:root{
  --bg:#F4F5F1;
  --bg-alt:#E9EBE4;
  --bg-raised:#FBFBF9;
  --ink:#1A1D1B;
  --ink-soft:#4B5450;
  --ink-faint:#7B857F;
  --rule:#CBCEC4;
  --accent:#2E5F5A;
  --accent-soft:#DCE6E3;
  --risk:#A8471F;
  --risk-soft:#F1E2D8;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#14181A;
    --bg-alt:#1C2123;
    --bg-raised:#191E20;
    --ink:#E9ECE9;
    --ink-soft:#AAB4AE;
    --ink-faint:#7C8983;
    --rule:#333B38;
    --accent:#7BC6BB;
    --accent-soft:#20302C;
    --risk:#E08A5C;
    --risk-soft:#332420;
  }
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap{
  max-width:1040px;
  margin:0 auto;
  padding:0 2rem;
}

@media (max-width:640px){
  .wrap{ padding:0 1.25rem; }
}

a{ color:inherit; }

img{ max-width:100%; }

/* ---- topbar ---- */

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--rule);
}

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.1rem 2rem;
}

@media (max-width:640px){
  .topbar-inner{ padding:1rem 1.25rem; }
}

.brand{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:var(--ink);
  line-height:1.2;
}

.brand-name{
  font-family:"Fraunces", Georgia, serif;
  font-weight:600;
  font-size:1.15rem;
}

.brand-sub{
  font-family:"IBM Plex Mono", monospace;
  font-size:0.62rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

.nav{
  display:flex;
  gap:1.8rem;
  font-family:"IBM Plex Mono", monospace;
  font-size:0.78rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

.nav a{ text-decoration:none; color:var(--ink-soft); }
.nav a:hover, .nav a:focus-visible{ color:var(--accent); }

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0.4rem;
}

.nav-toggle span{
  width:22px;
  height:2px;
  background:var(--ink);
}

@media (max-width:700px){
  .nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--bg);
    border-bottom:1px solid var(--rule);
    flex-direction:column;
    gap:0;
    padding:0.5rem 1.25rem 1rem;
    display:none;
  }
  .nav.open{ display:flex; }
  .nav a{ padding:0.7rem 0; border-top:1px solid var(--rule); }
  .nav a:first-child{ border-top:none; }
  .nav-toggle{ display:flex; }
}

a:focus-visible, button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ---- hero ---- */

.hero{ padding:3.6rem 0 4rem; }

.hero-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:3.5rem;
  align-items:center;
}

@media (max-width:860px){
  .hero-grid{ grid-template-columns:1fr; gap:2.6rem; }
}

.eyebrow{
  font-family:"IBM Plex Mono", monospace;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 1.1rem;
}

h1{
  font-family:"Fraunces", Georgia, serif;
  font-optical-sizing:auto;
  font-weight:600;
  font-size:clamp(2.2rem, 4.4vw, 3rem);
  line-height:1.05;
  letter-spacing:-0.01em;
  margin:0 0 1.2rem;
  text-wrap:balance;
}

.hero-dek{
  font-size:1.08rem;
  color:var(--ink-soft);
  max-width:36em;
  margin:0 0 2rem;
  text-wrap:balance;
}

.hero-ctas{ display:flex; gap:0.9rem; flex-wrap:wrap; }

.btn{
  font-family:"IBM Plex Sans", sans-serif;
  font-weight:600;
  font-size:0.95rem;
  padding:0.75em 1.3em;
  border-radius:2px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:0.5em;
  border:1px solid transparent;
  transition:transform 0.12s ease;
  cursor:pointer;
}

.btn.primary{ background:var(--ink); color:var(--bg); }

@media (prefers-color-scheme: dark){
  .btn.primary{ background:var(--accent); color:#0E1413; }
}

.btn.ghost{ background:transparent; border-color:var(--rule); color:var(--ink); }
.btn.block{ display:flex; justify-content:center; width:100%; margin-top:0.6rem; }
.btn:hover{ transform:translateY(-1px); }

@media (prefers-reduced-motion: reduce){
  .btn{ transition:none; }
}

/* ---- exhibit (annotated code) ---- */

.exhibit{
  background:var(--bg-raised);
  border:1px solid var(--rule);
  border-radius:3px;
  overflow:hidden;
}

.exhibit-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0.7rem 1rem;
  border-bottom:1px solid var(--rule);
  font-family:"IBM Plex Mono", monospace;
  font-size:0.68rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

.dots{ display:flex; gap:0.35em; }
.dots span{ width:0.5em; height:0.5em; border-radius:50%; background:var(--rule); }

pre.code{
  margin:0;
  padding:1.1rem 0;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:0.82rem;
  line-height:1.9;
  overflow-x:auto;
}

pre.code .line{ display:grid; grid-template-columns:2.4rem 1fr; padding:0 1rem; }
pre.code .line.flagged{ background:var(--risk-soft); box-shadow: inset 3px 0 0 var(--risk); }
.ln{ color:var(--ink-faint); user-select:none; }
.tok-kw{ color:var(--accent); }
.tok-str{ color:#8A6D3B; }
@media (prefers-color-scheme: dark){ .tok-str{ color:#D8BE6E; } }

.callout{
  margin:0 1rem 1.1rem;
  padding:0.9rem 1rem;
  background:var(--risk-soft);
  border-left:3px solid var(--risk);
  border-radius:2px;
}

.callout-tag{
  display:flex;
  align-items:center;
  gap:0.5em;
  font-family:"IBM Plex Mono", monospace;
  font-size:0.66rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--risk);
  margin-bottom:0.4em;
}

.callout-tag::before{ content:""; width:0.5em; height:0.5em; border-radius:50%; background:var(--risk); }
.callout p{ margin:0; font-size:0.88rem; color:var(--ink); line-height:1.55; }

/* ---- proof strip ---- */

.proof{ padding:2.4rem 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }

.proof-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:2.5rem;
  align-items:start;
}

@media (max-width:760px){ .proof-grid{ grid-template-columns:1fr; gap:1.6rem; } }

.proof p{ color:var(--ink-soft); font-size:1rem; max-width:44ch; margin:0; }
.proof strong{ color:var(--ink); font-weight:600; }

.tags{ display:flex; flex-wrap:wrap; gap:0.5rem; align-content:flex-start; }

.tag{
  font-family:"IBM Plex Mono", monospace;
  font-size:0.72rem;
  letter-spacing:0.04em;
  color:var(--ink-soft);
  border:1px solid var(--rule);
  padding:0.35em 0.7em;
  border-radius:2px;
}

/* ---- offer sections ---- */

.offer{ padding:4rem 0; }
.offer.alt{ background:var(--bg-alt); }

.section-label{
  font-family:"IBM Plex Mono", monospace;
  font-size:0.7rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 1rem;
}

h2{
  font-family:"Fraunces", Georgia, serif;
  font-weight:500;
  font-size:clamp(1.6rem, 3vw, 2rem);
  margin:0 0 0.8rem;
  text-wrap:balance;
}

.offer-dek{ color:var(--ink-soft); font-size:1.02rem; max-width:50ch; margin:0 0 2.4rem; }

.offer-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:2.5rem;
  align-items:start;
  margin-bottom:2rem;
}

@media (max-width:800px){ .offer-grid{ grid-template-columns:1fr; gap:2rem; } }

.deliverables{ display:grid; gap:1.4rem; }
.deliverable{ display:grid; grid-template-columns:2.2rem 1fr; gap:1rem; align-items:start; }
.d-num{ font-family:"IBM Plex Mono", monospace; font-size:0.85rem; color:var(--ink-faint); padding-top:0.2rem; }
.d-title{ font-weight:600; color:var(--ink); margin:0 0 0.25rem; font-size:1rem; }
.deliverable p:not(.d-title){ margin:0; color:var(--ink-soft); font-size:0.94rem; }

.plate{
  background:var(--bg-raised);
  border:1px solid var(--rule);
  border-radius:2px;
  padding:1.9rem;
  position:relative;
}

.offer.alt .plate{ background:var(--bg-raised); }

.plate::before{
  content:attr(data-tag);
  position:absolute;
  top:-0.6em;
  left:1.6rem;
  background:var(--bg-raised);
  padding:0 0.6em;
  font-family:"IBM Plex Mono", monospace;
  font-size:0.66rem;
  letter-spacing:0.1em;
  color:var(--ink-faint);
}

.plate.featured{ border-color:var(--accent); }
.plate.featured::before{ color:var(--accent); }

.plate-name{ font-family:"Fraunces", serif; font-weight:500; font-size:1.1rem; margin:0 0 0.3rem; }

.price-row{ display:flex; align-items:baseline; gap:0.5rem; margin-bottom:1rem; flex-wrap:wrap; }
.price{ font-family:"IBM Plex Mono", monospace; font-size:2.1rem; color:var(--ink); letter-spacing:-0.01em; }
.price.small{ font-size:1.7rem; }
.price-unit{ font-size:0.85rem; color:var(--ink-faint); }

.plate p{ font-size:0.92rem; color:var(--ink-soft); margin:0 0 1rem; }

.spec-list{
  list-style:none;
  margin:0;
  padding:1rem 0 0;
  border-top:1px solid var(--rule);
  display:grid;
  gap:0.55rem;
  font-family:"IBM Plex Mono", monospace;
  font-size:0.8rem;
}

.spec-list li{ display:flex; justify-content:space-between; gap:0.8rem; color:var(--ink-soft); }
.spec-list span:last-child{ color:var(--ink); text-align:right; }

.tiers{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media (max-width:560px){ .tiers{ grid-template-columns:1fr; } }

/* ---- contact ---- */

.contact{ padding:4.2rem 0; }

.contact-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:2.5rem;
  align-items:start;
}

@media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; gap:2rem; } }

.contact p{ color:var(--ink-soft); max-width:48ch; margin:0; }

.contact-card{
  background:var(--bg-alt);
  border:1px solid var(--rule);
  border-radius:3px;
  padding:1.8rem;
}

.contact-label{
  font-family:"IBM Plex Mono", monospace;
  font-size:0.68rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 0.4rem;
}

.contact-email{
  font-family:"Fraunces", serif;
  font-weight:500;
  font-size:1.25rem;
  text-decoration:none;
  color:var(--accent);
  word-break:break-word;
}

.contact-value{ margin:0; color:var(--ink); font-size:0.98rem; }

/* ---- footer ---- */

.site-footer{ border-top:1px solid var(--rule); padding:2rem 0; }

.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  flex-wrap:wrap;
  gap:0.6rem 1.2rem;
  font-family:"IBM Plex Mono", monospace;
  font-size:0.78rem;
  color:var(--ink-faint);
}

.footer-inner a{ color:var(--accent); text-decoration:none; }
.footer-inner a:hover, .footer-inner a:focus-visible{ text-decoration:underline; }