/* ===== TOKENS - warm light "paper" theme, WCAG 2.0 AA tuned ===== */
:root{
  --paper:#FAF7F2;       /* page background */
  --paper-2:#F1EBE0;     /* alternating sections */
  --paper-3:#EBE3D5;     /* subtle deeper warm */
  --tint:#EAF1EE;        /* soft teal tint for the "fix" section */
  --card:#FFFFFF;
  --code:#23201B;        /* warm-dark code surface (not black) */
  --code-2:#2E2A22;      /* code panel header */
  --line:#E4DCCE;
  --line-strong:#D3C8B6;

  --ink:#1F2328;         /* primary text  - ~14.5:1 on paper */
  --ink-mid:#494E55;     /* secondary     - ~7.4:1 on paper */
  --ink-dim:#5D626A;     /* captions      - ~5.5:1 on paper */

  --accent:#0C6F5B;      /* teal text     - ~5.5:1 on paper */
  --accent-deep:#0A5B4B; /* teal hover / on tint */
  --accent-2:#1668A6;    /* blue          - ~5.3:1 on paper */
  --risk:#B5382A;        /* red text      - ~5.5:1 on paper */
  --risk-deep:#98301F;

  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:"Inter", system-ui, -apple-system, sans-serif;
  --maxw:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
code{font-family:var(--mono);font-size:.9em}
.prompt{color:var(--accent);font-family:var(--mono)}
.muted{color:var(--ink-dim)}
.hl{color:var(--accent);font-weight:700}
em{color:var(--ink);font-style:italic}

/* ===== NAV ===== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;padding:.9rem clamp(1rem,4vw,2.5rem);
  background:rgba(250,247,242,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .3s, border-color .3s, box-shadow .3s;
}
.nav.scrolled{background:rgba(250,247,242,.94);border-bottom:1px solid var(--line);box-shadow:0 1px 12px -6px rgba(0,0,0,.15)}
.nav__brand{font-family:var(--mono);font-weight:700;font-size:.95rem;letter-spacing:.02em;white-space:nowrap;color:var(--ink)}
.nav__links{display:flex;gap:.95rem;font-size:.85rem;color:var(--ink-mid)}
.nav__links a{position:relative;transition:color .2s}
.nav__links a:hover{color:var(--ink)}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--accent);transition:width .25s}
.nav__links a:hover::after{width:100%}
.nav__cta{
  font-family:var(--mono);font-size:.8rem;font-weight:700;
  padding:.5rem .9rem;border:1.5px solid var(--accent);border-radius:6px;color:var(--accent);
  transition:background .2s,color .2s;white-space:nowrap;
}
.nav__cta:hover{background:var(--accent);color:#fff}
.nav__levels{gap:1.4rem;font-size:.9rem}
.nav__levels a{font-weight:500;letter-spacing:.01em}
.nav__levels a.is-active{color:var(--accent);font-weight:700}
.nav__levels a.is-active::after{width:100%}
.openclaw-hook .section__head{max-width:none}
.openclaw-hook .section__title{line-height:1.25}
.openclaw-hook .hot{color:var(--risk);background:rgba(181,56,42,.12);border-radius:5px;padding:0 .16em}
.survey-cta{padding-top:clamp(2rem,5vw,3.5rem);padding-bottom:clamp(2rem,5vw,3.5rem)}
.survey-cta__qr{display:inline-block;padding:.8rem;background:#fff;border-radius:12px;border:1px solid var(--line);line-height:0}
.survey-cta__qr img{display:block;width:200px;height:200px}
.survey-cta__link{display:block;margin:1rem 0 0;font-family:var(--mono);font-size:.85rem;color:var(--accent);text-decoration:underline;text-underline-offset:2px;word-break:break-all;max-width:360px}
@media(max-width:980px){.nav__links{display:none}}

/* ===== HERO ===== */
.hero{
  position:relative;min-height:100vh;
  display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:3rem;
  padding:8rem clamp(1rem,5vw,4rem) 4rem;
  max-width:1320px;margin:0 auto;overflow:hidden;
}
.grid-bg{
  position:absolute;inset:0;z-index:0;
  background-image:linear-gradient(rgba(31,35,40,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(31,35,40,.05) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 80% 70% at 30% 20%,#000 30%,transparent 75%);
  opacity:.9;
}
.scanline{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(12,111,91,.05),transparent);
  height:180px;animation:scan 8s linear infinite;
}
@keyframes scan{0%{transform:translateY(-200px)}100%{transform:translateY(110vh)}}
.hero__inner{position:relative;z-index:2}
.tag{
  display:inline-block;font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);font-weight:700;
  border:1px solid var(--line-strong);border-radius:100px;padding:.4rem .9rem;margin-bottom:1.6rem;
  background:var(--card);
}
.hero__title{
  font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.02;font-weight:900;letter-spacing:-.02em;
  margin:0 0 1.4rem;color:var(--ink);
}
.glitch{color:var(--accent);position:relative;display:inline-block}
.hero__lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--ink-mid);max-width:36ch;margin:0 0 2rem}
.hero__actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2.6rem}
.btn{
  font-family:var(--mono);font-weight:700;font-size:.9rem;
  padding:.85rem 1.4rem;border-radius:8px;transition:transform .15s,background .2s,box-shadow .2s;
  display:inline-block;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--accent);color:#fff;box-shadow:0 10px 26px -10px rgba(12,111,91,.6)}
.btn--primary:hover{background:var(--accent-deep)}
.btn--ghost{border:1.5px solid var(--line-strong);color:var(--ink-mid)}
.btn--ghost:hover{border-color:var(--ink-mid);color:var(--ink)}
.hero__meta{display:flex;flex-direction:column;gap:.5rem;font-size:.85rem;color:var(--ink-mid)}
.hero__meta .k{font-family:var(--mono);color:var(--accent);margin-right:.6rem;font-size:.78rem;font-weight:700}

/* terminal card (intentional dark code surface) */
.hero__terminal{position:relative;z-index:2;
  background:var(--code);border:1px solid var(--code-2);border-radius:12px;overflow:hidden;
  box-shadow:0 30px 70px -34px rgba(31,25,15,.5);
}
.term__bar{display:flex;gap:.5rem;padding:.8rem 1rem;background:var(--code-2);border-bottom:1px solid rgba(255,255,255,.06)}
.term__bar span{width:12px;height:12px;border-radius:50%;background:#4a463d}
.term__bar span:nth-child(1){background:#e06b5c}
.term__bar span:nth-child(2){background:#e8b44a}
.term__bar span:nth-child(3){background:#4fd6a0}
.term__body{margin:0;padding:1.4rem 1.4rem 1.8rem;font-family:var(--mono);font-size:.88rem;line-height:1.9;overflow-x:auto;color:#dce3ea}
.c-muted{color:#a7b4c2}
.c-key{color:#6fc6ff}
.c-ok{color:#4fd6a0}
.c-warn{color:#e8b44a}
.c-bad{color:#ff8a7a}
.c-str{color:#e8c06a}
.cursor{color:#4fd6a0;animation:blink 1.1s step-end infinite}
@keyframes blink{50%{opacity:0}}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:7rem}
  .hero__lead{max-width:none}
}

/* ===== SECTIONS ===== */
.section{max-width:var(--maxw);margin:0 auto;padding:clamp(4rem,9vw,7rem) clamp(1rem,5vw,2rem)}
/* alt/dark sections keep identical geometry to plain sections; background bleeds full-width via a pseudo-element */
.section--alt,.section--dark{position:relative;isolation:isolate}
.section--alt::before,.section--dark::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1}
.section--alt::before{background:var(--paper-2)}
.section--dark::before{background:var(--tint)}
.section__head{margin-bottom:3rem;max-width:none}
.section__num{font-family:var(--mono);font-size:.85rem;color:var(--accent);letter-spacing:.2em;font-weight:700}
.section__title{font-size:clamp(1.8rem,4vw,3rem);font-weight:800;letter-spacing:-.02em;margin:.4rem 0 .8rem;line-height:1.08;color:var(--ink)}
.section--sub{padding-top:clamp(.8rem,2vw,1.4rem);padding-bottom:clamp(1.5rem,4vw,3rem)}
.section:has(+ .section--sub){padding-bottom:clamp(.8rem,2vw,1.4rem)}
.section--sub .section__head{margin-bottom:2rem}
.section--sub .section__title{font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:700}
.section__sub{font-size:clamp(1rem,1.4vw,1.15rem);color:var(--ink-mid);margin:0;max-width:62ch}
.section__kicker{font-size:.85rem;font-style:italic;color:var(--ink-dim);margin:0 0 .6rem;max-width:62ch}

/* Intermediate (Taiwan): plain-English restructure, scoped additions */
.openclaw-hook__stat{max-width:none}
.stat-lead{font-size:clamp(1.8rem,4vw,3rem);font-weight:800;letter-spacing:-.02em;margin:.4rem 0 .8rem;line-height:1.25;color:var(--ink)}
.baby__intro--tw{display:grid;grid-template-columns:210px 1fr;gap:2.5rem;align-items:center;margin-bottom:3rem}
.baby__intro--tw .section__head{margin-bottom:0;max-width:none}
@media(max-width:600px){.baby__intro--tw{grid-template-columns:1fr;gap:1.4rem}}

/* ===== TIMELINE ===== */
.timeline{position:relative;display:flex;flex-direction:column;gap:1.2rem;padding-left:1.5rem}
.timeline::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--accent),var(--line-strong))}
.tl__item{display:grid;grid-template-columns:90px 1fr;gap:1.2rem;align-items:start;position:relative}
.tl__item::before{content:"";position:absolute;left:-1.5rem;top:14px;width:11px;height:11px;border-radius:50%;background:var(--paper);border:2px solid var(--accent);transform:translateX(-4px)}
.tl__year{font-family:var(--mono);font-weight:700;font-size:1.15rem;color:var(--accent);padding-top:.6rem}
.tl__card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1.2rem 1.4rem;transition:border-color .25s,transform .25s,box-shadow .25s;box-shadow:0 1px 3px rgba(31,25,15,.04)}
.tl__card:hover{border-color:var(--accent);transform:translateX(4px);box-shadow:0 10px 24px -14px rgba(12,111,91,.35)}
.tl__card h3{margin:0 0 .4rem;font-size:1.1rem;color:var(--ink)}
.tl__card p{margin:0;color:var(--ink-mid);font-size:.95rem}
.tl__card p+p{margin-top:.6rem}
.tl__link{display:block;margin-top:.6rem;font-family:var(--mono);font-size:.85rem;color:var(--accent);text-decoration:underline;text-underline-offset:2px;word-break:break-all}
.tl__card--accent{border-color:var(--accent);background:linear-gradient(180deg,var(--tint),var(--card))}
@media(max-width:560px){.tl__item{grid-template-columns:64px 1fr;gap:.8rem}.tl__year{font-size:1rem}}

/* ===== EXPLOSION — growth vs time ===== */
.growth{margin:3.5rem 0 2.5rem;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:2rem clamp(1rem,4vw,2.5rem) 1.4rem;box-shadow:0 1px 3px rgba(31,25,15,.05);
  display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto 1fr auto;gap:.4rem;position:relative}
.growth__title{grid-column:1 / -1;grid-row:1;margin:0 0 1.6rem;text-align:center;
  font-weight:700;font-size:clamp(1rem,1.6vw,1.15rem);color:var(--ink);line-height:1.4}
/* y-axis label with up arrow */
.growth__ylabel{grid-column:1;grid-row:2;align-self:center;justify-self:center;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--mono);font-weight:700;font-size:.9rem;color:var(--accent);letter-spacing:.05em}
/* plot area with drawn axes */
.growth__area{grid-column:2;grid-row:2;position:relative;padding:1.6rem 1.4rem 0 1.4rem}
/* axes drawn as borders on the plot; arrowheads sit on the axis ends */
.growth__cols{position:relative;display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(1.2rem,6vw,4rem);min-height:340px;padding-left:1.2rem;
  border-left:3px solid var(--accent);border-bottom:3px solid var(--accent)}
.ax{position:absolute;width:0;height:0}
.ax--y{left:-4.5px;top:-9px;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:9px solid var(--accent)}
.ax--x{right:-9px;bottom:-4.5px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid var(--accent)}
.gcol{display:flex;flex-direction:column;align-items:center;gap:.7rem}
.growth__years{display:flex;justify-content:center;gap:clamp(1.2rem,6vw,4rem);padding-left:1.2rem;padding-top:.6rem}
.gcol--2025,.gyear--2025{width:33%;max-width:290px}
.gcol--2026,.gyear--2026{width:42%;max-width:380px}
.gyear{text-align:center;font-family:var(--mono);font-weight:700;font-size:clamp(1.1rem,2.4vw,1.6rem);color:var(--ink)}
.gcol .shot{width:100%;border:2px solid var(--accent);background:#fff}
.gcol .shot img{background:#fff}
.gcol__label{font-weight:800;font-size:clamp(1rem,2.2vw,1.4rem);color:var(--ink);text-align:center;line-height:1.15}
.gcol__label .q{color:var(--accent)}
.growth__xlabel{grid-column:2;grid-row:3;justify-self:end;
  font-family:var(--mono);font-weight:700;font-size:.9rem;color:var(--accent);letter-spacing:.05em;padding-top:.3rem}
@media(max-width:560px){
  .growth__cols{gap:1rem;min-height:0}
  .gcol--2025,.gcol--2026,.gyear--2025,.gyear--2026{width:48%}
}

.jevons{max-width:660px;margin:0 auto}
.jevons__lead{font-size:1.15rem;color:var(--ink);margin:0 0 1.4rem;font-weight:500}
.landscape{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.landscape li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.75rem .95rem;background:var(--card);border:1px solid var(--line);border-radius:8px;transition:border-color .2s}
.landscape li:hover{border-color:var(--accent-2)}
.landscape__k{font-weight:600;font-size:.95rem;color:var(--ink)}
.landscape__v{font-family:var(--mono);font-size:.82rem;color:var(--ink-dim);text-align:right}

/* ===== CARDS 3 ===== */
.cards3{display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem;margin-bottom:2.5rem}
.cards3 .card{flex:1 1 320px;max-width:480px}
#secure-tools .cards3{justify-content:flex-start}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.6rem;transition:transform .25s,border-color .25s,box-shadow .25s;box-shadow:0 1px 3px rgba(31,25,15,.05)}
.card:hover{transform:translateY(-5px);border-color:var(--accent);box-shadow:0 16px 34px -18px rgba(12,111,91,.35)}
.card__icon{font-family:var(--mono);font-weight:700;font-size:.8rem;letter-spacing:.15em;color:var(--accent);
  background:rgba(12,111,91,.09);border:1px solid rgba(12,111,91,.28);border-radius:6px;
  padding:.35rem .7rem;display:inline-block;margin-bottom:1rem}
.card h3{margin:0 0 .5rem;font-size:1.2rem;color:var(--ink)}
.card p{margin:0;color:var(--ink-mid);font-size:.95rem}

/* baby diagram — taint sink list + rule pack */
.babyfig{margin:0 0 2.5rem;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:1.6rem clamp(1rem,3vw,2rem);box-shadow:0 1px 3px rgba(31,25,15,.05)}
.babyfig svg{width:100%;height:auto;display:block}
.babyfig figcaption{margin-top:1.1rem;text-align:center;font-family:var(--mono);font-size:.8rem;color:var(--ink-dim)}
.babyfig--nest{max-width:580px}
.bd-box{fill:var(--paper-2);stroke:var(--line-strong);stroke-width:1.5}
.bd-node{fill:var(--card);stroke:var(--accent);stroke-width:2}
.bd-out-bad{fill:#FBEBE8;stroke:var(--risk);stroke-width:2}
.bd-out-good{fill:#E7F1EC;stroke:var(--accent);stroke-width:2}
.bd-t{font-family:var(--sans);font-size:15px;font-weight:600;fill:var(--ink)}
.bd-title{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;fill:var(--ink-dim)}
.bd-head{font-family:var(--mono);font-size:18px;font-weight:700;letter-spacing:.08em;fill:var(--ink)}
.bd-sink{font-family:var(--mono);font-size:14px;fill:var(--ink)}
.bd-ok{fill:var(--accent)}
.bd-bad{fill:var(--risk)}
.bd-arrow{stroke:var(--ink-dim);stroke-width:2;fill:none}
.bd-arrow--accent{stroke:var(--accent)}
.bd-arrowhead{fill:var(--ink-dim)}
.bd-tag{fill:var(--accent)}
.bd-tag-t{font-family:var(--mono);font-size:11px;font-weight:700;fill:#fff}
.bd-arrow--bad{stroke:var(--risk)}
.bd-arrowhead--bad{fill:var(--risk)}
.bd-sub{font-family:var(--sans);font-size:11px;fill:var(--ink-dim)}
.bd-mute{opacity:.45}
.bd-hl{fill:#E7F1EC}
.bd-watch--bad{fill:none;stroke:var(--risk);stroke-width:1.5;stroke-dasharray:4 3}
.bd-watch--ok{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:4 3}

/* paper code panels — real examples from the research paper */
.cwe78__detail{margin:0 0 2rem;padding:1.4rem 1.6rem;background:var(--card);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;gap:.8rem}
.cwe78__detail p{margin:0;font-size:clamp(.95rem,1.3vw,1.05rem);line-height:1.7;color:var(--ink-mid)}
.cwe78__cwename{font-family:var(--mono);font-size:.9rem;color:var(--ink);padding-bottom:.9rem;border-bottom:1px solid var(--line)}
#cwe78 .shots{margin:1.6rem 0}
#cwe78 .shots__grid--1{grid-template-columns:1fr;justify-items:center}
#cwe78 .shots__grid--1 .shot{max-width:460px;width:100%}
#baby .shots{margin:2rem 0 0}
#baby .shots__grid--1{grid-template-columns:1fr;justify-items:center}
#baby .shots__grid--1 .shot{max-width:520px;width:100%}
.cwe78__detail strong{color:var(--ink)}
.cwe78__bad{color:var(--risk);font-weight:600}
.paper-codes{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.2rem;margin:0 0 2.5rem}
.paper-code{background:var(--code);border-radius:12px;overflow:hidden}
.paper-code__label{font-family:var(--mono);font-size:.68rem;color:#b8b0a0;padding:.55rem 1rem .4rem;background:var(--code-2);letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.07)}
.paper-code__pre{margin:0;padding:.9rem 1rem 1rem;font-family:var(--mono);font-size:.76rem;color:#e0d8cc;line-height:1.65;overflow-x:auto;white-space:pre}
.paper-code__ok{color:#6ecf8e}
.paper-code__bad{color:#f08080}
.paper-code__key{color:#79c0ff}
.paper-code__str{color:#a5d6a7}
.paper-code__cmt{color:#8b8378}
.paper-code__fn{color:#d2a8ff}
.study{margin:2.5rem 0 0;padding:1.6rem 1.8rem;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px}
.study__k{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}
.study h3{margin:0 0 1rem;font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.4;color:var(--ink)}
.study__lead{margin:0 0 1.1rem;color:var(--ink-mid);line-height:1.7}
.study__tests{list-style:none;margin:0 0 1.2rem;padding:0;display:flex;flex-direction:column;gap:.7rem;counter-reset:none}
.study__tests li{display:flex;gap:.8rem;align-items:baseline;color:var(--ink-mid);line-height:1.6}
.study__n{flex:none;font-family:var(--mono);font-size:.72rem;font-weight:600;color:var(--accent);background:rgba(12,111,91,.1);padding:.2rem .55rem;border-radius:6px;letter-spacing:.04em}
.study__finding{margin:0 0 1rem;padding:.9rem 1.1rem;background:rgba(181,56,42,.06);border-radius:8px;color:var(--ink);font-weight:500;line-height:1.65}
.study .source-note{margin:0}
.baby__lead{max-width:62ch;margin:0 0 2rem;font-size:clamp(1.02rem,1.5vw,1.15rem);color:var(--ink-mid);line-height:1.7}
.linklist{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.linklist li{font-family:var(--mono);font-size:.82rem;color:var(--ink-mid);line-height:1.5}
.linklist a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.paper-code__bad{color:#f08080}

/* proof panel */
.babyworks{background:linear-gradient(180deg,rgba(12,111,91,.06),var(--card));
  border:1px solid rgba(12,111,91,.3);border-radius:14px;padding:2rem clamp(1.2rem,3vw,2rem);margin:0 0 3rem;max-width:none}
.babyworks__k{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}
.babyworks h3{margin:0 0 .8rem;font-size:1.3rem;color:var(--ink)}
.babyworks p{margin:0 0 1rem;color:var(--ink-mid);font-size:1rem;line-height:1.65}
.babyworks p:last-child{margin-bottom:0}
.babyworks strong{color:var(--accent)}
.babyworks code{font-family:var(--mono);background:rgba(12,111,91,.1);color:var(--accent-deep);padding:.1rem .35rem;border-radius:4px;font-size:.9em}
.babyworks__note{font-size:.9rem;color:var(--ink-dim)}

/* pull quote */
.pullquote{text-align:center;margin:0 auto 3rem;max-width:44ch}
.pullquote p{font-size:clamp(1.3rem,2.6vw,1.8rem);font-weight:700;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.pullquote strong{color:var(--risk)}

/* ===== EXAMPLE ===== */
.example{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 2px 6px rgba(31,25,15,.06)}
.example__head{font-family:var(--mono);font-size:.85rem;color:var(--ink-mid);padding:.9rem 1.4rem;
  background:var(--paper-2);border-bottom:1px solid var(--line)}
.example__body{display:grid;grid-template-columns:1fr 1fr;gap:0}
@media(max-width:820px){.example__body{grid-template-columns:1fr}}
.example__text{padding:1.8rem}
.example__text p{margin:0 0 1rem;color:var(--ink-mid);font-size:.98rem}
.example__text code{background:rgba(22,104,166,.1);color:var(--accent-2);padding:.1rem .35rem;border-radius:4px}
.example__punch{color:var(--ink)!important;border-top:1px solid var(--line);padding-top:1rem;margin-top:1.2rem!important}
.example__punch strong{color:var(--accent)}
.code{margin:0;padding:1.8rem;background:var(--code);color:#dce3ea;font-family:var(--mono);font-size:.85rem;line-height:1.9;
  overflow-x:auto}
@media(max-width:820px){.code{border-top:1px solid var(--line)}}

/* ===== STATS ===== */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-bottom:1.8rem}
@media(max-width:760px){.stats{grid-template-columns:1fr}}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.8rem;text-align:center;box-shadow:0 1px 3px rgba(31,25,15,.05)}
.stat__num{font-family:var(--mono);font-weight:700;font-size:clamp(2.4rem,5vw,3.4rem);color:var(--risk);line-height:1;margin-bottom:.8rem}
.stat:nth-child(3) .stat__num{color:var(--accent)}
.stat__label{color:var(--ink-mid);font-size:.95rem}
.note{text-align:center;color:var(--ink-mid);font-size:1.05rem;max-width:60ch;margin:0 auto}

/* ===== CYCLE ===== */
.cycle{display:flex;align-items:stretch;justify-content:center;flex-wrap:wrap;gap:.8rem;margin-bottom:2.5rem}
.cycle__step{flex:1 1 180px;max-width:220px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:1.4rem;display:flex;flex-direction:column;gap:.7rem;transition:border-color .25s;box-shadow:0 1px 3px rgba(31,25,15,.05)}
.cycle__step:hover{border-color:var(--risk)}
.cycle__n{font-family:var(--mono);font-weight:700;color:var(--risk);border:1.5px solid var(--risk);border-radius:50%;
  width:32px;height:32px;display:grid;place-items:center;font-size:.9rem}
.cycle__step p{margin:0;font-size:.95rem;color:var(--ink-mid)}
.cycle__step strong{color:var(--ink)}
.cycle__arrow{display:flex;align-items:center;color:var(--ink-dim);font-size:1.5rem;font-family:var(--mono)}
.cycle__arrow--loop{color:var(--risk)}
@media(max-width:760px){.cycle__arrow{transform:rotate(90deg)}.cycle__step{max-width:none}}
.warnquote{margin:0;background:#FBEBE8;
  border:1px solid rgba(181,56,42,.35);border-radius:14px;padding:2rem;font-size:1.15rem;line-height:1.6;color:var(--ink)}
.warnquote strong{color:var(--risk)}
.warnquote span{display:block;margin-top:1rem;color:var(--ink-mid);font-size:1rem}

/* ===== FIX ===== */
.fix{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-bottom:3rem}
@media(max-width:760px){.fix{grid-template-columns:1fr}}
.fix--single{grid-template-columns:1fr}
.fix__card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.6rem;
  transition:transform .25s,border-color .25s,box-shadow .25s;box-shadow:0 1px 3px rgba(31,25,15,.05)}
.fix__card:hover{transform:translateY(-5px);border-color:var(--accent);box-shadow:0 16px 34px -18px rgba(12,111,91,.35)}
.fix__k{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.8rem;font-weight:700}
.fix__card h3{margin:0 0 .5rem;font-size:1.2rem;color:var(--ink)}
.fix__card p{margin:0;color:var(--ink-mid);font-size:.95rem}
.takeaway{text-align:center;border-top:1px solid var(--line-strong);padding-top:2.5rem}
.takeaway p{margin:.3rem 0;font-family:var(--mono);color:var(--ink-mid);letter-spacing:.02em}
.takeaway strong{color:var(--accent)}
.takeaway__big{font-family:var(--sans)!important;font-size:clamp(1.4rem,3vw,2.2rem)!important;font-weight:800;
  color:var(--ink)!important;letter-spacing:-.01em!important;line-height:1.25;margin-top:1rem!important}

/* ===== SCREENSHOTS / IMAGES ===== */
.shot{display:block;margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:var(--card);transition:border-color .25s,transform .25s,box-shadow .25s;line-height:0;box-shadow:0 1px 3px rgba(31,25,15,.05)}
a.shot:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 14px 30px -16px rgba(12,111,91,.35)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption,.shot__cap{display:block;line-height:1.5;font-size:.8rem;color:var(--ink-dim);
  padding:.6rem .8rem;background:var(--paper-2);border-top:1px solid var(--line);font-family:var(--mono)}
.shot figcaption strong,.shot__cap strong{color:var(--ink-mid)}

/* timeline media cards */
.tl__card--media{display:grid;grid-template-columns:1fr 200px;gap:1.2rem;align-items:center}
.tl__card--media .shot{width:200px}
@media(max-width:640px){.tl__card--media{grid-template-columns:1fr}.tl__card--media .shot{width:100%}}

/* baby: woodcut beside the section head */
.baby__intro{display:grid;grid-template-columns:210px 1fr;gap:2.5rem;align-items:center;margin-bottom:3rem}
.baby__intro .section__head{margin-bottom:0;max-width:none}
.shot--woodcut{width:100%}
.shot--woodcut img{background:var(--paper-2)}
@media(max-width:600px){
  .baby__intro{grid-template-columns:1fr;gap:1.4rem}
  .shot--woodcut{max-width:220px}
}

/* survey */
.survey{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center}
.survey>*,.riskrow>*,.speaker>*,.shots__grid>*{min-width:0}
@media(max-width:760px){.survey{grid-template-columns:1fr}}
.survey .shot,.survey .shot img{background:#fff}
.survey .note{margin:0;text-align:left}
.survey__head{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:800;color:var(--ink);letter-spacing:-.01em;line-height:1.2;margin:0 0 .8rem}
.survey__head strong{color:var(--accent)}
.shots--wide{margin-top:2.5rem}
.shots--wide .shots__grid{grid-template-columns:1fr 1fr;gap:1.6rem}
@media(max-width:640px){.shots--wide .shots__grid{grid-template-columns:1fr}}
.guardian-note{margin:1.6rem 0 0;max-width:64ch}
.guardian-note__k{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.3rem}
.guardian-note h3{margin:0 0 .5rem;font-size:1.3rem;color:var(--ink)}
.guardian-note p{margin:0;color:var(--ink-mid);line-height:1.65}

/* risk row */
.riskrow{display:grid;grid-template-columns:280px 1fr;gap:2rem;align-items:center}
@media(max-width:760px){.riskrow{grid-template-columns:1fr}}
.shot--wheel img{background:#fff}
.riskrow .warnquote{height:100%}

/* guardian shots gallery */
.shots{margin:3rem 0}
.shots__title{font-family:var(--mono);font-size:.95rem;font-weight:500;color:var(--ink-mid);margin:0 0 1.2rem}
.shots__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.2rem;align-items:start}
@media(max-width:640px){.shots__grid{grid-template-columns:1fr}}
.shots__grid .shot,.shots__grid .shot img{background:var(--code)}

/* abstract */
#abstract{padding-top:1.5rem}
.abstract{max-width:none}
.abstract .section__title{margin-top:.4rem}
.abstract__body{margin-top:1.4rem}
.abstract__body p{font-size:clamp(1.02rem,1.5vw,1.15rem);color:var(--ink-mid);margin:0 0 1.2rem;line-height:1.75}
.abstract__body p:last-child{margin-bottom:0}
.abstract__body strong{color:var(--ink)}
.abstract__body strong.hot{color:var(--risk)}
.abstract__quote{margin:0 0 1.4rem;padding:1.2rem 1.4rem;border-left:3px solid var(--accent);background:rgba(12,111,91,.06);border-radius:0 8px 8px 0}
.abstract__quote p{font-size:clamp(1rem,1.4vw,1.1rem);font-style:italic;color:var(--ink-mid);margin:0 0 .7rem;line-height:1.75}
.abstract__quote cite{font-size:.85rem;font-style:normal;color:var(--ink-dim);font-family:var(--mono)}

/* coding AI — the numbers */
.cai-hero{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:2rem clamp(1rem,4vw,2.5rem);margin-bottom:1.4rem;box-shadow:0 1px 3px rgba(31,25,15,.05)}
.cai-hero__claim{font-size:clamp(1.1rem,2vw,1.35rem);font-weight:600;color:var(--ink);margin:0 0 1.8rem;text-align:center;line-height:1.4}
.cai-hero__claim strong{color:var(--accent)}
.cai-jump{display:flex;align-items:center;justify-content:center;gap:clamp(1.5rem,5vw,3.5rem);flex-wrap:wrap}
.cai-pt{display:flex;flex-direction:column;align-items:center;gap:.25rem;text-align:center}
.cai-pt__pct{font-family:var(--mono);font-weight:700;font-size:clamp(2.6rem,7vw,3.8rem);line-height:1;color:var(--ink-dim)}
.cai-pt--now .cai-pt__pct{color:var(--accent)}
.cai-pt__date{font-family:var(--mono);font-size:.82rem;color:var(--ink-dim)}
.cai-pt__detail{font-size:.85rem;color:var(--ink-mid)}
.cai-jump__arrow{font-size:2rem;color:var(--accent);font-weight:700}
.cai-ranks{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media(max-width:720px){.cai-ranks{grid-template-columns:1fr}}
.cai-rank{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.6rem;box-shadow:0 1px 3px rgba(31,25,15,.05)}
.cai-rank__title{margin:0 0 .2rem;font-size:1.15rem;color:var(--ink)}
.cai-rank__sub{margin:0 0 1.1rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.03em;color:var(--ink-dim)}
.cai-rank__list{list-style:none;margin:0;padding:0}
.cai-row{display:grid;grid-template-columns:auto 1fr auto;column-gap:.7rem;row-gap:.45rem;align-items:baseline;padding:.6rem 0;border-top:1px solid var(--line)}
.cai-row:first-child{border-top:0}
.cai-row__rank{grid-column:1;grid-row:1;font-family:var(--mono);font-weight:700;color:var(--accent);font-size:.9rem}
.cai-row__name{grid-column:2;grid-row:1;font-weight:600;color:var(--ink)}
.cai-row__val{grid-column:3;grid-row:1;font-family:var(--mono);font-weight:700;color:var(--ink-mid)}
.cai-row__track{grid-column:1 / -1;grid-row:2;height:8px;background:var(--paper-2);border-radius:5px;overflow:hidden}
.cai-row__bar{display:block;height:100%;background:var(--accent);border-radius:5px}
.cai-rank__note{margin:1.1rem 0 0;font-size:.85rem;color:var(--ink-dim);font-style:italic;line-height:1.5}
.source-note{margin:1.6rem 0 0;font-family:var(--mono);font-size:.82rem;color:var(--ink-dim)}
.abstract__body .source-note{font-family:var(--mono);font-size:.82rem;color:var(--ink-dim);line-height:1.5}
.source-note a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* speaker */
.speaker{display:grid;grid-template-columns:340px 1fr;gap:2.5rem;align-items:center}
@media(max-width:760px){.speaker{grid-template-columns:1fr}}
.speaker__shot{width:100%}
.speaker__body .section__title{margin-top:.3rem}
.speaker__body a{color:var(--accent);font-weight:600}

/* ===== FOOTER ===== */
.footer{background:var(--paper-3);border-top:1px solid var(--line-strong);padding:3.5rem clamp(1rem,5vw,2rem)}
.footer__inner{max-width:var(--maxw);margin:0 auto;text-align:center}
.footer__brand{font-family:var(--mono);font-weight:700;font-size:1.05rem;margin-bottom:1rem;color:var(--ink)}
.footer__meta p{margin:.2rem 0;color:var(--ink-mid)}
.footer__meta strong{color:var(--ink)}
.footer__meta a{color:var(--accent);font-weight:600}
.footer__fine{margin-top:1.4rem;color:var(--ink-dim);font-size:.85rem}

/* ===== REVEAL ===== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .scanline,.cursor{animation:none}
  .curve{stroke-dashoffset:0}
}

/* ===== TO TOP ===== */
.totop{position:fixed;right:1.4rem;bottom:1.4rem;z-index:40;width:44px;height:44px;border-radius:50%;
  background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.2rem;
  opacity:0;pointer-events:none;transition:opacity .3s,transform .2s,background .2s;box-shadow:0 10px 24px -8px rgba(12,111,91,.6)}
.totop.show{opacity:1;pointer-events:auto}
.totop:hover{transform:translateY(-3px);background:var(--accent-deep)}