/* Terminal notebook: compact type, ruled sections, instrument panels. */
.site-main:not(.site-main-app) .kicker { color:var(--focus); font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin:0 0 16px; }
.showcase-hero { display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:36px; padding:28px 0 44px; }
.site-main .showcase-hero h1.pitch { font-size:clamp(2rem,3.5vw,3.25rem); line-height:1.15; letter-spacing:-.055em; margin:0 0 28px; }
.site-main .hero-lede { font-family:var(--font); font-size:1.05rem; line-height:1.65; color:var(--ink); margin-bottom:20px; }
.showcase-actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px 26px; margin:26px 0 8px; font-size:.88rem; }
.site-main:not(.site-main-app) a.showcase-button { display:inline-flex; align-items:center; justify-content:space-between; gap:28px; background:var(--signal-bg); color:var(--focus); border:1px solid var(--focus); padding:13px 19px; border-radius:0; text-decoration:none; font-weight:600; }
.site-main:not(.site-main-app) a.showcase-button:hover { background:#20413f; }
.hero-figure { position:relative; display:flex; flex-direction:column; padding:24px; background:var(--cream-raised); border:1px solid var(--rule); border-radius:0; box-shadow:4px 4px 0 var(--code-bg); text-decoration:none;  }
.hero-figure img { width:100%; height:auto; margin:18px 0 4px; }
.figure-label { font-size:.65rem; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.1em; }
.figure-callout { display:flex; justify-content:space-between; align-items:center; gap:12px; border-top:1px solid var(--rule); padding:14px 0 6px; font-size:.88rem; color:var(--ink); }
.figure-callout strong { padding:4px 10px; background:var(--signal-bg); border:1px solid var(--focus); border-radius:0; color:var(--focus); }
.figure-note { font-size:.74rem; color:var(--ink-muted); }
.story-nav { display:flex; flex-wrap:wrap; gap:10px 24px; padding:16px 0 24px; font-size:.82rem; }
.story-nav a { color:var(--focus); }
.showcase-section[id] { scroll-margin-top:76px; }
.showcase-section { margin:0; padding:46px 0; border-top:1px solid var(--rule); }
.site-main .showcase-section h2, .site-main .landing-header h1 { font-weight:400; font-size:clamp(1.5rem,2.5vw,2rem); line-height:1.3; letter-spacing:-.04em; margin:0 0 24px; }
.site-main .showcase-section p { line-height:1.7; }
.feature-split { display:grid; grid-template-columns:1.35fr 1fr; gap:28px; align-items:center; }
.screenshot-frame { display:block; padding:8px; background:var(--cream-raised); border:1px solid var(--rule); border-radius:0; }
.screenshot-frame img, .game-screen img { display:block; width:100%; height:auto; }
.game-screen { display:block; margin:28px 0 20px; border-radius:0; overflow:hidden; border:1px solid #353942; background:#101114; }
.feature-bottom { display:flex; justify-content:space-between; gap:24px; align-items:center; }
.feature-bottom p { font-size:.9rem; }
.feature-bottom .showcase-button { flex-shrink:0; }
.route-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:24px 0; }
.route-grid a { padding:22px; border:1px solid var(--rule); background:var(--cream-raised); text-decoration:none; border-radius:0; }
.route-grid a:hover { border-color:var(--focus); }
.route-grid strong, .route-grid span { display:block; }
.route-grid strong { font-family:var(--font); font-weight:500; font-size:1rem; line-height:1.3; color:var(--ink); margin-bottom:12px; }
.route-grid span { font-size:.88rem; line-height:1.6; color:var(--ink-muted); }
.landing-header { padding:32px 0 34px; }
.site-main .landing-header h1 { font-size:clamp(2rem,3.5vw,3rem); max-width:19ch; }
.landing-header > p:not(.kicker) { font-size:1rem; max-width:57ch; }
.model-steps { list-style:none; counter-reset:step; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:30px 0; padding:0; }
.model-steps li { counter-increment:step; border-top:1px solid var(--rule); padding-top:14px; font-size:.92rem; }
.model-steps li:before { content:'0' counter(step); color:var(--focus); font-size:.7rem; letter-spacing:.1em; display:block; margin-bottom:12px; }
.model-steps strong { display:block; font-family:var(--font); color:var(--ink); font-size:1.2rem; font-weight:500; margin-bottom:8px; }
.architecture { border:1px solid var(--rule); padding:24px; border-radius:0; background:var(--cream-raised); margin:30px 0; }
.architecture svg { display:block; width:100%; height:auto; }
.architecture figcaption { font-size:.85rem; color:var(--ink-muted); margin-top:20px; }
@media(max-width:1100px) { .showcase-hero { grid-template-columns:1.1fr 1fr; gap:24px; } .feature-split { grid-template-columns:1fr; } .feature-bottom { align-items:flex-start; flex-direction:column; } }
@media(max-width:640px) { .showcase-hero { grid-template-columns:1fr; padding:18px 0 38px; gap:34px; } .hero-figure { max-width:360px; width:calc(100% - 12px); margin:0 auto; transform:none; } .showcase-section { padding:34px 0; } .route-grid,.model-steps { grid-template-columns:1fr; } .site-main .showcase-hero h1.pitch { font-size:2.5rem; } .route-grid { gap:10px; } .landing-header { padding-top:18px; } .architecture { padding:12px; } }
@media(prefers-reduced-motion:reduce) { .hero-figure { transform:none; } }

.architecture-small { display:none; }
@media(max-width:640px) {
  .architecture > svg { display:none; }
  .architecture-small { display:block; }
  .site-main .architecture-small p { margin:0; max-width:none; }
  .arch-origin { text-align:center; padding:18px 8px; font-family:var(--font); font-size:1.4rem; }
  .arch-core { position:relative; padding:18px; background:var(--signal-bg); border:1px solid var(--rule); border-radius:0; }
  .architecture-small strong { display:block; font-family:var(--font); font-size:1.2rem; font-weight:500; color:var(--ink); margin-bottom:8px; }
  .architecture-small span { display:block; font-size:.9rem; line-height:1.5; color:var(--ink-muted); }
  .architecture-small ul { list-style:none; margin:0 0 0 14px; padding:20px 0 0 20px; border-left:2px solid var(--focus); }
  .architecture-small li { position:relative; border:1px solid var(--rule); padding:15px; margin:0 0 14px; border-radius:0; }
  .architecture-small li:before { content:''; position:absolute; width:20px; border-top:2px solid var(--focus); left:-21px; top:29px; }
}

.engine-diagram { margin:28px 0; padding:26px; border:1px solid var(--rule); border-radius:0; background:var(--cream-raised); }
.engine-program,.engine-host { padding:22px; border:1px solid var(--rule); border-radius:0; }
.engine-program { background:var(--signal-bg); border-color:var(--rule); }
.site-main .engine-diagram h3 { margin:0 0 10px; font-size:1.6rem; font-weight:400; }
.site-main .engine-diagram p { margin:0; }
.site-main .engine-diagram .kicker { margin-bottom:12px; }
.engine-connection { text-align:center; padding:16px; font-size:.85rem; color:var(--ink-muted); }
.engine-connection span { display:block; font-size:1.5rem; color:var(--focus); }
.engine-diagram figcaption { margin-top:20px; font-size:.85rem; color:var(--ink-muted); }
@media(max-width:640px) { .engine-diagram { padding:12px; } .engine-program,.engine-host { padding:16px; } }

.binding-diagram { margin:28px 0; padding:26px; border:1px solid var(--rule); border-radius:0; background:var(--cream-raised); }
.binding-plan { padding:20px; background:var(--signal-bg); border:1px solid var(--rule); border-radius:0; }
.binding-plan > * { display:block; }
.binding-plan strong { margin:12px 0; font-family:var(--mono); font-size:1rem; overflow-wrap:anywhere; }
.binding-plan > :last-child { color:var(--ink-muted); font-size:.88rem; }
.binding-route { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; padding:0; margin:26px 0; gap:28px; }
.binding-route li { position:relative; border-top:2px solid var(--focus); padding-top:14px; }
.binding-route li + li:before { content:'→'; position:absolute; left:-23px; top:14px; color:var(--focus); }
.binding-route span,.binding-route strong { display:block; }
.binding-route span { color:var(--ink-muted); font-size:.78rem; margin-bottom:6px; }
.binding-route strong { font-family:var(--font); font-size:1.2rem; font-weight:500; }
.binding-diagram figcaption { font-size:.85rem; color:var(--ink-muted); line-height:1.6; }
@media(max-width:640px) { .binding-diagram { padding:14px; } .binding-plan { padding:16px; } .binding-route { grid-template-columns:1fr; gap:26px; } .binding-route li + li:before { content:'↓'; left:auto; right:8px; top:-26px; } }

/* Rule labels read like notebook indices, without animated terminal chrome. */
.site-main:not(.site-main-app) .kicker { color:var(--violet); letter-spacing:.06em; }
.showcase-hero .kicker::before { content:'> '; color:var(--focus); }
.showcase-section { border-top-style:dashed; }
.hero-figure { border-top:2px solid var(--focus); }
.figure-label { color:var(--violet); }
.route-grid { grid-template-columns:1fr; gap:0; }
.route-grid a { display:grid; grid-template-columns:1fr 2fr; gap:24px; padding:18px 0; border:0; border-top:1px solid var(--rule); background:transparent; }
.route-grid strong { margin:0; color:var(--focus); }
.route-grid a:hover { background:var(--cream-raised); }
@media(max-width:640px) { .route-grid a { grid-template-columns:1fr; gap:8px; } .site-main .showcase-hero h1.pitch { font-size:clamp(2rem,9vw,2.6rem); } }

/* The homepage's first action: the live calculator beside one instruction. */
/* One column: the calculator needs the full width to lay its inputs beside
   its outputs, which puts Why on the first screen. */
.showcase-hero.first-action { grid-template-columns:1fr; gap:20px; padding-top:16px; }
.site-main .first-action h1.pitch { font-size:clamp(1.8rem,3vw,2.4rem); margin:0 0 14px; }
.site-main .first-action .hero-lede { margin-bottom:10px; }
.site-main .first-step { color:var(--ink); font-size:1rem; margin:0 0 14px; }
.step-desk { display:none; }
@media (min-width:900px) { .step-phone { display:none; } .step-desk { display:inline; } }
.site-main .agent-line { font-size:.85rem; }
/* The line is for a desktop with a coding agent; a phone reader goes straight to the picture. */
@media not (min-width:900px) { .site-main .agent-line { display:none; } }
.agent-line-open { font:inherit; padding:0; border:0; background:none; color:var(--focus); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.site-main:not(.site-main-app) .agent-line-open { border:0; background:none; }
.hero-live { display:flex; flex-direction:column; gap:8px; }
.hero-frame { position:relative; height:540px; overflow:hidden; border:1px solid var(--rule); border-top:2px solid var(--focus); background:var(--cream-raised); }
.hero-frame[hidden] { display:none; }
/* Out of flow: the frame is laid out 1040px wide and scaled down, and a
   transform does not shrink layout, so in flow its unscaled width would
   widen the hero column past the window. */
.hero-calculator { position:absolute; top:0; left:0; display:block; width:100%; height:540px; border:0; transform-origin:0 0; }
/* The picture is dressed as a picture, not as the live calculator: a plain
   border and a label, with .hero-status saying what state the live one is in. */
.hero-poster { position:relative; display:block; padding:12px 16px; background:var(--cream-raised); border:1px solid var(--rule); text-decoration:none; }
.hero-poster img { width:100%; height:auto; display:block; }
.hero-poster-label { position:absolute; top:20px; right:24px; padding:2px 8px; background:var(--cream); border:1px solid var(--rule); color:var(--ink-muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; }
/* The label is where the eye lands on the picture, so it carries the
   loading state too; the status line under the picture says it in full. */
.hero-live[data-state="loading"] .hero-poster-label::after { content:" · live calculator loading…"; }
.hero-live[data-state="opening"] .hero-poster-label::after { content:" · opening…"; }
.site-main .hero-status { margin:0; font-size:.85rem; color:var(--ink-muted); }
.site-main .hero-live[data-state="failed"] .hero-status { color:var(--ink); border-left:3px solid var(--danger); padding-left:10px; }
/* A failure is said where the reader is looking: above the picture, whose
   label and faded image stop it passing for a working calculator. */
.hero-live[data-state="failed"] .hero-status { order:-1; }
.hero-live[data-state="failed"] .hero-poster img { opacity:.45; }
.hero-live[data-state="failed"] .hero-poster-label::after { content:" · live calculator unavailable"; }
.hero-retry { font:inherit; padding:2px 10px; background:var(--signal-bg); border:1px solid var(--focus); color:var(--focus); cursor:pointer; }
.hero-live[data-state="ready"] .hero-poster, .hero-live[data-state="ready"] .hero-status { display:none; }
.site-main .hero-live-foot { margin:0; font-size:.85rem; }
.showcase-intro { padding:0 0 28px; border-bottom:1px solid var(--rule); }
@media(max-width:640px) { .first-action { gap:18px; } .hero-poster { max-width:360px; } }