/* Field Edition and delivery: one width system, open layouts, shared spacing tokens. */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--space-5);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--cream);font-family:var(--sans);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block;height:auto}
h1,h2,h3,p,ul,ol,figure{margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.1;letter-spacing:-.03em;text-wrap:pretty}
h2{font-size:clamp(2.125rem,3.5vw,3.25rem)}
h3{font-size:1.625rem}
button,input{font:inherit;color:inherit}
a,button,label,summary{touch-action:manipulation}
:where(a,button,input,summary):focus-visible{outline:3px solid var(--orange);outline-offset:var(--space-1)}
.wrap,.reading{width:min(var(--content-wide),calc(100% - var(--page-gutter)*2));margin-inline:auto}
.reading{max-width:var(--content-reading)}
.eyebrow{font-size:.75rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--orange)}
.eyebrow+h1,.eyebrow+h2{margin-top:var(--space-4)}
.muted,.fine{color:var(--muted)}
.fine{font-size:.9375rem;margin-top:var(--space-5)}
.skip-link{position:absolute;left:-9999px;top:var(--space-2);background:var(--orange);color:var(--ink);padding:var(--space-3) var(--space-4);border-radius:100px;z-index:10}
.skip-link:focus{left:var(--space-4)}
.site-header{border-bottom:1px solid var(--line)}
.site-header .wrap{height:104px;display:flex;align-items:center}
.wordmark img{width:118px}
.site-footer{border-top:1px solid var(--line)}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:center;justify-content:space-between;padding-block:var(--space-6);color:var(--muted);font-size:.9375rem}
.site-footer a{text-decoration:none}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:var(--space-4) var(--space-6);background:var(--orange);border:1px solid var(--orange);border-radius:100px;color:var(--ink);font-size:1.0625rem;font-weight:500;line-height:1.3;text-decoration:none;text-align:center;cursor:pointer;transition:background var(--motion-fast)}
.button:hover{background:var(--orange-hover);border-color:var(--orange-hover)}
.button:disabled{opacity:.6;cursor:progress}
.button-ghost{background:transparent;color:var(--cream);border-color:var(--line)}
.button-ghost:hover{background:var(--panel);border-color:var(--muted)}
.text-link{color:var(--orange);text-underline-offset:var(--space-1)}
/* The offer and form share an open column. Only the illustrated objects have frames. */
.hero{padding-block:var(--space-8)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--space-8);align-items:center}
.hero-copy{display:grid;gap:var(--space-6);min-width:0}
.promise h1{font-size:clamp(2.5rem,3.6vw,3.25rem);line-height:1.06}
.promise p{margin-top:var(--space-4);color:var(--muted)}
.signup{border-top:1px solid var(--line);padding-top:var(--space-5);scroll-margin-top:var(--space-5)}
.signup .prompt{display:block;font-family:var(--serif);font-size:1.5rem;line-height:1.15;margin-bottom:var(--space-4)}
.signup input[type=email]{display:block;width:100%;min-height:56px;padding:var(--space-4);font-size:1.0625rem;line-height:1.3;background:var(--panel);color:var(--cream);border:1px solid var(--line);border-radius:var(--space-2);appearance:none}
.signup input[type=email]::placeholder{color:var(--muted)}
.signup input[type=email]:focus{border-color:var(--orange)}
.signup .button{width:100%;margin-top:var(--space-4)}
.consent{display:flex;gap:var(--space-3);align-items:flex-start;min-height:48px;padding-top:var(--space-4);cursor:pointer;font-size:.9375rem;line-height:1.5}
.consent input{flex:none;width:24px;height:24px;margin:0;accent-color:var(--orange);cursor:pointer}
.trust{margin-top:var(--space-3);color:var(--muted);font-size:.875rem;text-align:center}
.form-status{margin-top:var(--space-2);color:var(--orange-hover);font-size:.9375rem;text-align:center}
.form-status:empty{display:none}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.alt-option{display:block;width:100%;margin-top:var(--space-3);min-height:48px;padding:var(--space-2) 0;background:transparent;border:0;border-radius:var(--space-1);color:var(--muted);font-size:.875rem;line-height:1.5;text-align:center;cursor:pointer}
.alt-option span{color:var(--orange);text-decoration:underline;text-underline-offset:var(--space-1)}
.alt-option:hover{color:var(--cream)}
.alt-option[aria-pressed=true]{outline:1px solid var(--orange);outline-offset:var(--space-1);color:var(--cream)}
.alt-note{margin-top:var(--space-2);color:var(--muted);font-size:.875rem;text-align:center}
/* Concept B: paper, chat and terminal are illustrations, without a surrounding card. */
.hero-visual{min-width:0}
.concept-b{display:grid;justify-items:center;padding:var(--space-5) 0}
.visual-heading,.visual-kicker,.branch-label{font-family:var(--sans);font-weight:500;letter-spacing:.13em;line-height:1.4}
.visual-heading{color:var(--orange);text-align:center;font-size:.6875rem;letter-spacing:.18em;margin-bottom:var(--space-5)}
.guide-sheet{position:relative;width:264px;padding:var(--space-5);background:var(--paper);color:var(--ink);border-radius:var(--space-1);box-shadow:var(--space-2) var(--space-2) 0 var(--panel);min-width:0}
.guide-sheet .visual-kicker{color:var(--line);font-size:.5625rem}
.guide-title{font-family:var(--serif);font-size:1.75rem;line-height:1.08;letter-spacing:-.025em;margin-top:var(--space-2)}
.guide-examples{border-top:1px solid color-mix(in srgb,var(--line) 25%,transparent);margin-top:var(--space-4);padding-top:var(--space-3);display:grid;gap:var(--space-2)}
.guide-examples p{display:flex;gap:var(--space-2);align-items:center;font-family:var(--serif);font-size:.8125rem;white-space:nowrap}
.pillar{display:inline-block;width:7px;height:7px;flex:none;border-radius:50%}
.physical{background:var(--pillar-physical)}
.mental{background:var(--pillar-mental)}
.emotional{background:var(--pillar-emotional)}
.guide-time{display:block;font-size:.5625rem;letter-spacing:.1em;margin-top:var(--space-4);color:var(--line)}
.branch-connectors{display:flex;justify-content:space-around;width:85%;padding-block:var(--space-2);color:var(--orange);font-size:28px;line-height:1.5}
.three-branches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);width:100%;align-items:start}
.branch{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);min-width:0}
.branch-label{font-size:.5rem;letter-spacing:.08em;text-align:center;color:var(--muted)}
.visual-chip{font-size:.6875rem;line-height:1.4;color:var(--muted);white-space:nowrap}
.mini-phone,.mini-paper,.mini-terminal{height:152px;width:100%;padding:var(--space-3);border-radius:var(--space-2);font-size:.6875rem}
.mini-phone{background:var(--bg);border:2px solid var(--line);border-radius:var(--space-4);padding:var(--space-3) var(--space-2)}
.chat-question{font-size:.5625rem;text-align:right;color:var(--muted)}
.chat-answer{margin-top:var(--space-2);padding:var(--space-2);background:var(--panel);border-radius:var(--space-1)}
.chat-answer .visual-kicker{font-size:.5rem;color:var(--pillar-mental)}
.chat-answer p{font-family:var(--serif);font-size:.875rem;line-height:1.2;margin-block:var(--space-2)}
.chat-answer>span:last-child{font-size:.5625rem;color:var(--muted)}
.mini-paper{position:relative;background:var(--paper);color:var(--ink);border-radius:var(--space-1)}
.mini-paper .visual-kicker{font-size:.5rem}
.mini-paper p{font-family:var(--serif);font-size:.625rem;border-bottom:1px solid color-mix(in srgb,var(--line) 25%,transparent);padding-block:var(--space-2)}
.mini-paper b{float:right;color:var(--line);font-family:var(--sans);font-weight:400}
.mini-paper>.visual-kicker:last-of-type{display:block;margin-top:var(--space-2)}
.pencil{position:absolute;right:1px;top:calc(-1*var(--space-2));width:6px;height:35px;background:var(--orange);transform:rotate(35deg);border-bottom:8px solid var(--ink)}
.mini-terminal{background:var(--panel);border:1px solid var(--line);line-height:1.5}
.terminal-dots{display:block;color:var(--muted);font-size:7px;letter-spacing:3px;margin-bottom:var(--space-3)}
/* Section rhythm. Wide bands and the two-column reading grid share the same edges. */
.section{padding-block:var(--section-y)}
.story,.faq{border-top:1px solid var(--line)}
.section-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr);gap:var(--space-9);align-items:start}
.section-heading>p:not(.eyebrow){margin-top:var(--space-5)}
.prose p+p{margin-top:var(--space-5)}
.lede{font-size:1.25rem;line-height:1.6}
.story-time{font-family:var(--serif);font-size:4.5rem;line-height:1;color:var(--orange);letter-spacing:-.04em;padding-top:var(--space-5)}
.story-time span{display:block;margin-top:var(--space-3);font-family:var(--sans);font-size:.8125rem;letter-spacing:0;line-height:1.5;color:var(--muted)}
.band{background:var(--panel)}
.band-heading{display:flex;justify-content:space-between;gap:var(--space-7);align-items:flex-end}
.band-heading>p{max-width:220px}
.routes{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-7);margin-top:var(--space-7)}
.routes li{border-top:1px solid var(--line);padding-top:var(--space-5)}
.routes h3{margin-top:var(--space-4);margin-bottom:var(--space-3)}
.routes p{color:var(--muted)}
.routes-note{margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid var(--line);font-size:.9375rem;color:var(--cream)}
.protocols{list-style:none;padding:0;counter-reset:protocol}
.protocols li{counter-increment:protocol;display:grid;grid-template-columns:var(--space-7) 1fr;column-gap:var(--space-4);border-top:1px solid var(--line);padding-block:var(--space-5)}
.protocols li:first-child{padding-top:0;border-top:0}
.protocols li:last-child{padding-bottom:0}
.protocols li::before{content:counter(protocol,decimal-leading-zero);grid-row:1/3;font-size:.875rem;color:var(--orange);padding-top:var(--space-1)}
.protocols h3{font-size:1.625rem}
.protocols p{grid-column:2;color:var(--muted);margin-top:var(--space-2)}
.section .button{margin-top:var(--space-6)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--space-5);align-items:center;min-height:64px;padding-block:var(--space-5);font-size:1.125rem;font-weight:500;line-height:1.5}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--orange);font-size:1.5rem;line-height:1;flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding-bottom:var(--space-5);color:var(--muted)}
.final-cta{text-align:center}
.final-cta h2{font-size:clamp(2.5rem,4.5vw,4rem)}
.final-cta h2+p{max-width:600px;margin:var(--space-5) auto 0}
.final-cta .fine{max-width:600px;margin-inline:auto;margin-top:var(--space-5)}
/* Delivery: first the download, then an open installer band, then the quieter essay offer. */
.ready-intro{padding-block:var(--section-y)}
.ready h1{font-size:clamp(2.5rem,4.5vw,4rem)}
.ready .download{margin-top:var(--space-6);min-width:320px;min-height:64px;font-size:1.1875rem}
.ready .note{margin-top:var(--space-5);color:var(--muted);max-width:640px}
.panel-section{scroll-margin-top:0;border-block:1px solid var(--line)}
.panel-section.is-target,.panel-section:target{border-color:var(--orange)}
.panel-section.is-target .section-heading,.panel-section:target .section-heading{border-left:3px solid var(--orange);padding-left:var(--space-5)}
.panel-section h2{font-size:clamp(2rem,3vw,2.625rem)}
.panel-section .section-heading>p:not(.eyebrow){color:var(--muted)}
.cmd{border-block:1px solid var(--line);padding-block:var(--space-5)}
.cmd-label{font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--orange);font-weight:500}
.cmd code{display:block;margin-top:var(--space-4);font-family:var(--sans);font-size:1.0625rem;line-height:1.65;color:var(--cream);overflow-wrap:anywhere;white-space:pre-wrap;user-select:all;-webkit-user-select:all}
.cmd .button{margin-top:var(--space-5);min-width:128px}
.copy-status{margin-top:var(--space-2);color:var(--muted);font-size:.9375rem}
.copy-status:empty{display:none}
.steps{list-style:none;padding:0;display:grid;gap:var(--space-5);margin-top:var(--space-6);counter-reset:step}
.steps li{counter-increment:step;padding-left:var(--space-7);position:relative}
.steps li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:0;color:var(--orange);font-size:.875rem}
.steps h3{font-family:var(--sans);font-size:1.0625rem;font-weight:500;letter-spacing:0;line-height:1.65}
.steps p{color:var(--muted)}
.substack{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--space-7)}
.substack .eyebrow{margin-bottom:var(--space-4);color:var(--muted)}
.substack p{color:var(--muted)}
.substack-embed{display:block;width:100%;max-width:480px;height:400px;border:1px solid var(--line);border-radius:var(--space-2);background:var(--paper)}
.substack .button{margin-top:var(--space-4);font-size:.9375rem}
/* Animations never hide content: no-JS, static captures and unsupported browsers stay visible. */
.reveal-play{animation:reveal-in var(--motion-reveal) var(--motion-ease) both}
.diagram-play .guide-sheet{animation:reveal-in var(--motion-reveal) var(--motion-ease) both}
.diagram-play .branch{animation:reveal-in var(--motion-reveal) var(--motion-ease) both}
.diagram-play .branch:nth-child(2){animation-delay:var(--motion-step)}
.diagram-play .branch:nth-child(3){animation-delay:calc(var(--motion-step)*2)}
@keyframes reveal-in{from{opacity:.55;transform:translateY(var(--space-3))}to{opacity:1;transform:translateY(0)}}
@media(max-width:999px){
  .hero-grid{gap:var(--space-7);grid-template-columns:1fr}
  .hero-visual{width:100%;max-width:560px;margin-inline:auto}
  .hero-copy{max-width:640px;margin-inline:auto;width:100%}
  .section-grid{gap:var(--space-7);grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .routes{gap:var(--space-5)}
  .band-heading{display:block}
  .band-heading>p{max-width:none;margin-top:var(--space-4)}
}
@media(max-width:719px){
  .site-header .wrap{height:72px}
  .wordmark img{width:88px}
  .hero{padding-block:var(--space-6) var(--section-y)}
  .hero-grid{gap:var(--space-5)}
  .hero-copy{gap:var(--space-5)}
  .promise h1{font-size:2.375rem}
  .concept-b{padding:0;grid-template-columns:1fr 1.2fr;gap:var(--space-4) var(--space-5);align-items:center}
  .concept-b .visual-heading{grid-column:1/-1;margin:0;font-size:.625rem}
  .guide-sheet{width:100%;padding:var(--space-3) var(--space-4)}
  .guide-title{font-size:1.3125rem}
  .guide-examples,.branch-connectors{display:none}
  .guide-time{font-size:.4375rem;letter-spacing:0;line-height:1.5}
  .three-branches{grid-template-columns:1fr;gap:var(--space-3)}
  .branch{align-items:flex-start;gap:var(--space-1);padding-bottom:var(--space-3);border-bottom:1px solid var(--line)}
  .branch:last-child{border:0;padding-bottom:0}
  .branch-label{font-size:.4375rem;text-align:left}
  .branch .mini-phone,.branch .mini-paper,.branch .mini-terminal{display:none}
  .visual-chip{font-size:.8125rem;color:var(--cream)}
  .section-grid{grid-template-columns:1fr;gap:var(--space-6)}
  .story-time{font-size:3.5rem;padding-top:0}
  .lede{font-size:1.1875rem}
  .routes{grid-template-columns:1fr;gap:var(--space-6);margin-top:var(--space-6)}
  .routes-note{margin-top:var(--space-6)}
  .protocols li{grid-template-columns:var(--space-6) 1fr;column-gap:var(--space-3)}
  .protocols h3{font-size:1.5rem}
  .section-heading .button,.final-cta .button{width:100%}
  .final-cta{text-align:left}
  .final-cta h2{font-size:2.625rem}
  .ready .download{width:100%;min-width:0}
  .substack{grid-template-columns:1fr;gap:var(--space-5)}
  .substack .button{width:100%}
  .site-footer .wrap{gap:var(--space-5);font-size:.8125rem}
  .site-footer .wrap>a:last-child{width:100%}
}
@media(max-width:640px){.substack-embed{height:380px}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
