:root{
  --paper:#F5F1E8; --paper-2:#EEE7D8;
  --ink:#1E1A13; --ink-soft:#6E6555; --dim:#948A76;
  --line:#D8CDB6; --line-2:#C3B79A;
  --green:#2F4A38; --sage:#6C8770; --sage-tint:#E3E6D8;
  --brick:#A9542E;
  --maxw:1080px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:"Inter",system-ui,sans-serif; font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
a{color:inherit;}
::selection{background:rgba(108,135,112,.3);}
.svgdefs{position:absolute; width:0; height:0;}
.chair{width:1em; height:1.33em; stroke:currentColor; fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; vertical-align:middle;}

/* nav */
nav{position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:1px solid var(--line);}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:64px;}
.brand{display:flex; align-items:center; gap:9px; font-family:"Playfair Display",serif; font-weight:800; font-size:22px; letter-spacing:-.01em;}
.brand .chair{color:var(--green); width:20px; height:27px;}
.nav-links{display:flex; align-items:center; gap:24px; font-size:15px; color:var(--ink-soft);}
.nav-links a{text-decoration:none; transition:color .15s;}
.nav-links a:not(.nav-cta):hover{color:var(--ink);}
.nav-cta{padding:9px 16px; border:1.5px solid var(--green); color:var(--green); border-radius:2px; font-weight:600; text-decoration:none; box-shadow:3px 3px 0 var(--sage); transition:all .12s;}
.nav-cta:hover, .nav-cta:focus, .nav-cta:active{background:var(--green); color:var(--paper); box-shadow:3px 3px 0 var(--ink);}
@media(max-width:640px){ .nav-links .hide-sm{display:none;} }

/* hero — title card */
header{padding:56px 0 30px;}
.card{position:relative; background:var(--paper); border:2px solid var(--ink); box-shadow:10px 10px 0 var(--sage);}
.card-inner{border:1px solid var(--line-2); margin:7px; padding:46px 44px 40px;}
.chairband{display:flex; gap:22px; justify-content:center; color:var(--line-2); margin-bottom:28px; opacity:.85;}
.chairband .chair{width:26px; height:34px;}
@media(max-width:560px){ .chairband .chair:nth-child(n+5){display:none;} }
.hero-mark{width:60px; height:80px; margin:0 auto 18px; display:block; color:var(--green);}
.eyebrow{text-align:center; font-family:"Playfair Display",serif; font-style:italic; font-size:16px; color:var(--sage); margin:0 0 8px;}
h1{font-family:"Playfair Display",serif; font-weight:800; font-size:clamp(32px,5.6vw,54px); line-height:1.08; letter-spacing:-.01em; text-align:center; margin:0 auto 20px; max-width:18ch;}
.lede{text-align:center; font-size:clamp(16.5px,2vw,20px); color:var(--ink-soft); max-width:52ch; margin:0 auto 30px;}
.lede b{color:var(--ink); font-weight:600;}
.cta-row{display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;}
.btn{font-family:"Inter",sans-serif; font-size:16px; font-weight:600; cursor:pointer; padding:14px 28px; border-radius:2px; border:2px solid var(--ink); background:var(--green); color:var(--paper); box-shadow:4px 4px 0 var(--ink); transition:transform .1s, box-shadow .1s;}
.btn:hover{transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--ink);}
.btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink);}
.cta-note{font-size:14.5px; color:var(--dim);}
.cta-note b{color:var(--brick); font-weight:600;}

/* morning → midday → evening */
.timeline{margin:44px auto 6px; max-width:960px;}
.tl-track{display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:start; gap:14px;}
.tl-rule{height:1px; margin-top:14px; background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 11px);}
.tl-node{text-align:center;}
.tl-node .cap{font-family:"Playfair Display",serif; font-style:italic; font-size:15px; margin-bottom:6px;}
.tl-node.m .cap{color:var(--sage);} .tl-node.d .cap{color:var(--green);} .tl-node.e .cap{color:var(--brick);}
.tl-node h4{margin:0 0 3px; font-size:15.5px; font-weight:700;}
.tl-node p{margin:0; font-size:13.5px; color:var(--ink-soft); line-height:1.45;}
@media(max-width:720px){
  .tl-track{grid-template-columns:1fr; gap:22px;}
  .tl-rule{display:none;}
  .tl-node{border-left:2px solid var(--line-2); padding-left:16px; text-align:left;}
}

/* sections */
section{padding:70px 0; border-top:1px solid var(--line);}
section.alt{background:var(--paper-2);}
.kicker{display:flex; align-items:center; gap:9px; font-family:"Playfair Display",serif; font-style:italic; font-size:17px; color:var(--sage); margin:0 0 14px;}
.kicker .chair{width:16px; height:21px; color:var(--sage);}
h2{font-family:"Playfair Display",serif; font-weight:800; font-size:clamp(25px,3.4vw,36px); line-height:1.14; letter-spacing:-.01em; margin:0 0 18px; max-width:24ch;}
.body-max{max-width:62ch;}
p.big{font-size:18px; color:var(--ink-soft); margin:0 0 15px;}
p.big b{color:var(--ink); font-weight:600;}

/* receipt */
.receipt{margin-top:32px; max-width:520px; background:var(--paper); border:1px solid var(--line-2); box-shadow:6px 6px 0 var(--line); position:relative;}
.receipt .rhead{padding:14px 20px; border-bottom:1px dashed var(--line-2); font-family:"Playfair Display",serif; font-weight:700; font-size:16px; display:flex; justify-content:space-between; align-items:center;}
.receipt .rhead .chair{width:15px;height:20px;color:var(--green);}
.rrow{display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:13px 20px; border-bottom:1px dashed var(--line);}
.rrow .lbl{color:var(--ink-soft); font-size:15px;}
.rrow .val{font-family:"JetBrains Mono",monospace; font-size:16px; font-weight:500; white-space:nowrap;}
.val.pos{color:var(--green);} .val.neg{color:var(--brick);}
.rfoot{padding:16px 20px; font-size:14.5px; color:var(--ink-soft);}
.rfoot b{color:var(--ink);}
.stamp{position:absolute; top:14px; right:-10px; transform:rotate(7deg); border:2px solid var(--brick); color:var(--brick); font-family:"Playfair Display",serif; font-weight:700; font-size:13px; padding:4px 10px; border-radius:3px; opacity:.9;}

/* problem — two columns so the block fills full width */
#problem h2{max-width:none;}
.problem-grid{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; margin-top:8px;}
.problem-grid > .txt{max-width:52ch;}
.problem-grid .big:last-child{margin-bottom:0;}
.problem-grid .receipt{margin-top:0; max-width:none;}
@media(max-width:820px){ .problem-grid{grid-template-columns:1fr; gap:26px;} .problem-grid > .txt{max-width:62ch;} }

/* steps */
.steps{margin-top:34px;}
.step{display:grid; grid-template-columns:56px 1fr; gap:22px; padding:22px 0; border-bottom:1px solid var(--line);}
.step:first-child{border-top:1px solid var(--line);}
.step .num{font-family:"Playfair Display",serif; font-weight:800; font-size:34px; color:var(--green); line-height:1;}
.step h3{margin:0 0 6px; font-size:18px; font-weight:700;}
.step p{margin:0; color:var(--ink-soft); font-size:15.5px; max-width:60ch;}
.step code{font-family:"JetBrains Mono",monospace; font-size:13.5px; color:var(--brick); background:var(--sage-tint); padding:1px 6px; border-radius:3px;}

/* rails */
.rails{margin-top:44px; display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:start;}
.rails > *{min-width:0;} /* long code lines scroll inside .listing instead of widening the page on mobile */
@media(max-width:820px){ .rails{grid-template-columns:1fr; gap:22px;} }
.rails p{color:var(--ink-soft); font-size:15.5px; margin:0 0 14px; max-width:48ch;}
.rails p b{color:var(--ink); font-weight:600;}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px;}
.chip{font-size:12.5px; color:var(--green); border:1px solid var(--sage); padding:4px 10px; border-radius:2px; font-family:"JetBrains Mono",monospace;}
.listing{background:var(--paper); border:1px solid var(--line-2); box-shadow:6px 6px 0 var(--line); font-family:"JetBrains Mono",monospace; font-size:12.5px; line-height:1.75;}
.listing .ltop{display:flex; align-items:center; gap:8px; padding:10px 15px; border-bottom:1px solid var(--line); color:var(--dim); font-size:12px;}
.listing .ltop .chair{width:13px;height:17px;color:var(--sage);}
.listing pre{margin:0; padding:15px 18px; overflow-x:auto; color:var(--ink);}
.listing .k{color:var(--green); font-weight:500;} .listing .s{color:var(--brick);} .listing .c{color:var(--dim);} .listing .n{color:var(--sage);}

/* trust */
.facts{margin-top:32px; display:grid; grid-template-columns:1fr 1fr; gap:0 40px;}
@media(max-width:720px){ .facts{grid-template-columns:1fr;} }
.fact{padding:20px 0; border-top:1px solid var(--line);}
.fact h4{margin:0 0 6px; font-size:16.5px; font-weight:700; display:flex; align-items:baseline; gap:9px;}
.fact h4 .tick{color:var(--green); font-family:"Playfair Display",serif;}
.fact p{margin:0; color:var(--ink-soft); font-size:14.5px; line-height:1.55;}

/* who */
.who{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:30px;}
@media(max-width:720px){ .who{grid-template-columns:1fr;} }
.who .col{padding:24px; border:2px solid var(--ink);}
.who .yes{background:var(--sage-tint); box-shadow:6px 6px 0 var(--sage);}
.who .no{background:var(--paper); box-shadow:6px 6px 0 var(--line);}
.who h4{margin:0 0 12px; font-family:"Playfair Display",serif; font-weight:700; font-size:17px;}
.who .yes h4{color:var(--green);} .who .no h4{color:var(--dim);}
.who ul{margin:0; padding:0; list-style:none;}
.who li{font-size:15px; color:var(--ink-soft); padding:6px 0 6px 22px; position:relative;}
.who li:before{position:absolute; left:0; top:6px; font-weight:700;}
.who .yes li:before{content:"✓"; color:var(--green);}
.who .no li:before{content:"—"; color:var(--dim);}

/* form */
#waitlist .form-card{max-width:560px; margin:32px auto 0; background:var(--paper); border:2px solid var(--ink); box-shadow:8px 8px 0 var(--sage); padding:34px;}
.field{margin-bottom:17px;}
.field label{display:block; font-size:14px; font-weight:600; margin-bottom:8px;}
.field input, .field select, .field textarea{width:100%; font-family:inherit; font-size:15.5px; color:var(--ink); background:var(--paper); border:1px solid var(--line-2); border-radius:2px; padding:12px 14px; transition:border-color .15s, box-shadow .15s;}
.field textarea{resize:vertical; min-height:72px;}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(47,74,56,.14);}
.field select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236E6555' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center;}
#waitlist .btn{width:100%; margin-top:6px;}
.form-fine{font-size:13px; color:var(--dim); text-align:center; margin:15px 0 0; line-height:1.5;}
.success{text-align:center; padding:16px 0;}
.success .hero-mark{width:52px; height:70px; margin:0 auto 14px; color:var(--green);}
.success h3{font-family:"Playfair Display",serif; margin:0 0 8px; font-size:22px; font-weight:800;}
.success p{margin:0; color:var(--ink-soft); font-size:15px;}
.hidden{display:none;}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; opacity:0;}

/* footer */
footer{padding:40px 0 54px; border-top:1px solid var(--line); color:var(--dim); font-size:14px;}
.foot-in{display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap;}
.foot-in .tagline{color:var(--ink-soft); max-width:44ch;}
.foot-in .hook{font-family:"Playfair Display",serif; font-style:italic; color:var(--green); font-size:16px;}
.tg-link{color:var(--green); font-weight:600; text-decoration:none; border-bottom:1px dashed var(--sage); white-space:nowrap;}
.tg-link:hover{color:var(--brick); border-bottom-color:var(--brick);}

/* who — each criterion + how it is proven */
.who.who-wide{grid-template-columns:1.4fr 1fr;}
.who-proof li{padding-top:10px; padding-bottom:10px;}
.who-proof li + li{border-top:1px dashed var(--line-2);}
.who .yes .who-proof li:before{top:10px;}
.who-proof li b{display:block; color:var(--ink); font-weight:600; line-height:1.4;}
.who-proof li span{display:block; font-size:14px; color:var(--ink-soft); line-height:1.45; margin-top:3px;}
@media(max-width:720px){ .who.who-wide{grid-template-columns:1fr;} }

/* how-it-works — "four chairs": one step at a time, progress = a row of chairs */
.how-chairs{margin-top:36px;}
.hc-track{position:relative; display:grid; grid-template-columns:repeat(4,1fr); --p:0;}
.hc-track::before, .hc-track::after{content:""; position:absolute; top:28px; left:12.5%; height:2px;}
.hc-track::before{right:12.5%; background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 11px);}
.hc-track::after{width:calc(75% * var(--p)); background:var(--green); transition:width .4s;}
.hc-node{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:8px; padding:0; background:none; border:none; cursor:pointer; font-family:"Inter",sans-serif; font-size:13.5px; font-weight:600; color:var(--dim); transition:color .2s;}
.hc-seat{width:58px; height:58px; display:grid; place-items:center; border-radius:50%; background:var(--paper-2);}
.hc-seat .chair{width:24px; height:32px; color:var(--line-2); stroke-width:2.6; transition:all .2s;}
.hc-node:hover{color:var(--ink);}
.hc-node.done{color:var(--green);} .hc-node.done .chair{color:var(--green); stroke-width:4.4;}
.hc-node.on{color:var(--ink);} .hc-node.on .chair{color:var(--green); width:32px; height:43px; stroke-width:3.4;}
.hc-node:focus-visible{outline:2px solid var(--green); outline-offset:4px;}
.hc-stage{margin-top:40px;}
.hc-pane{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center;}
.how-chairs.js .hc-stage{display:grid;}
.how-chairs.js .hc-pane{grid-area:1/1; visibility:hidden; opacity:0; transform:translateY(10px); transition:opacity .3s, transform .3s, visibility .3s;}
.how-chairs.js .hc-pane.on{visibility:visible; opacity:1; transform:none;}
.how-chairs:not(.js) .hc-track, .how-chairs:not(.js) .hc-actions{display:none;}
.how-chairs:not(.js) .hc-pane + .hc-pane{margin-top:44px; padding-top:44px; border-top:1px dashed var(--line-2);}
.hc-ill .ill{max-width:440px; margin:0 auto;}
.hc-num{font-family:"Playfair Display",serif; font-weight:800; font-size:60px; line-height:1; color:var(--green);}
.hc-num span{font-size:22px; color:var(--line-2); margin-left:4px;}
.hc-txt h3{font-family:"Playfair Display",serif; font-size:28px; font-weight:800; line-height:1.15; margin:12px 0 12px;}
.hc-txt p{color:var(--ink-soft); font-size:17px; margin:0 0 16px;}
.hc-txt .hc-ex{display:inline-block; font-family:"JetBrains Mono",monospace; font-size:12.5px; line-height:1.5; color:var(--green); border:1px solid var(--sage); border-radius:2px; padding:5px 10px; margin:0 0 4px;}
.hc-actions{display:flex; align-items:center; gap:24px; margin-top:22px;}
.how-back{font-family:"Inter",sans-serif; font-size:15px; font-weight:600; color:var(--green); background:none; border:none; border-bottom:1px dashed var(--sage); padding:2px 0; cursor:pointer;}
.how-back:hover{color:var(--brick); border-bottom-color:var(--brick);}
@media(max-width:720px){
  .hc-node{font-size:11.5px;}
  .hc-pane{grid-template-columns:1fr; gap:18px; align-content:start;}
  .hc-num{font-size:44px;}
  .hc-txt h3{font-size:23px;}
}

/* line illustrations — same stroke language as the chair mark */
.ill{display:block; width:100%; height:auto; color:var(--green);}
.ill .s2{stroke:var(--sage);}
.ill .sb{stroke:var(--brick);}
.ill .sp{stroke:var(--paper);}
.ill .fp{fill:var(--paper);}
.ill .ft{fill:var(--sage-tint);}
.ill .fb{fill:var(--brick);}
.ill .fg{fill:var(--green);}
.ill .dash{stroke-dasharray:5 5;}
.ill text{font-family:"JetBrains Mono",monospace; font-size:11.5px; fill:var(--sage); stroke:none;}
.ill .tg{fill:var(--green); font-size:14px; font-weight:500;}
.ill .tp{fill:var(--paper); font-size:17px; font-weight:500;}
.ill .tn{fill:var(--green); font-weight:500;}

/* cases carousel — reuses .receipt for the cards */
.cases-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.cases-head h2{margin-bottom:0;}
.case-nav{display:flex; align-items:center; gap:12px;}
.case-btn{width:44px; height:44px; font-family:"Inter",sans-serif; font-size:18px; font-weight:600; cursor:pointer; background:var(--paper); color:var(--green); border:1.5px solid var(--green); border-radius:2px; box-shadow:3px 3px 0 var(--sage); transition:all .12s;}
.case-btn:hover:not(:disabled){background:var(--green); color:var(--paper); box-shadow:3px 3px 0 var(--ink);}
.case-btn:disabled{opacity:.35; cursor:default;}
.case-count{font-family:"JetBrains Mono",monospace; font-size:14px; color:var(--dim); min-width:44px; text-align:center;}
.case-count b{color:var(--ink); font-weight:500;}
.case-track{display:flex; gap:28px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:30px 16px 22px 2px; margin:0 -16px 0 -2px; scrollbar-width:none;}
.case-track::-webkit-scrollbar{display:none;}
.case-track:focus-visible{outline:2px solid var(--green); outline-offset:4px;}
.case-track .receipt.case{flex:0 0 min(600px, 86%); margin-top:0; max-width:none; scroll-snap-align:start; display:flex; flex-direction:column;}
.case .rhead{padding-right:136px;}
.case .rfoot{margin-top:auto;}
.case-meta{display:flex; align-items:baseline; gap:10px; padding:12px 20px; border-bottom:1px dashed var(--line); font-size:14.5px; color:var(--ink-soft); line-height:1.45;}
.case-meta .chip{flex:none;}
.case-fine{font-size:13px; color:var(--dim); margin:4px 0 0;}
@media(max-width:560px){ .case-meta{flex-direction:column; gap:8px;} .case .rhead{padding-right:20px; padding-top:44px;} }

/* form — answer modes (self / ask the agent) */
.mode-tabs{display:grid; grid-template-columns:1fr 1fr; margin:-34px -34px 26px; border-bottom:1px solid var(--line);}
.mode-tab{position:relative; font-family:"Inter",sans-serif; font-size:14.5px; font-weight:600; color:var(--dim); background:none; border:none; padding:15px 10px; cursor:pointer; transition:color .15s;}
.mode-tab + .mode-tab{border-left:1px solid var(--line);}
.mode-tab:hover, .mode-tab.on{color:var(--ink);}
.mode-tab.on::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:var(--green);}
.mode-tab:focus-visible{outline:2px solid var(--green); outline-offset:-4px;}
fieldset.field{border:none; padding:0; min-width:0;}
fieldset.field legend{display:block; font-size:14px; font-weight:600; margin-bottom:8px; padding:0;}
.opt{font-weight:400; color:var(--dim);}
.picks{display:flex; flex-wrap:wrap; gap:8px;}
.picks label{position:relative; display:inline-block; margin:0; font-weight:400; cursor:pointer;}
.picks input{position:absolute; inset:0; opacity:0; margin:0; pointer-events:none;}
.picks span{display:inline-block; font-size:14px; line-height:1.3; padding:7px 12px; border:1px solid var(--line-2); border-radius:2px; background:var(--paper); color:var(--ink); transition:background .12s, color .12s, border-color .12s;}
.picks label:hover span{border-color:var(--green);}
.picks input:checked + span{background:var(--green); border-color:var(--green); color:var(--paper);}
.picks input:focus-visible + span{outline:2px solid var(--green); outline-offset:2px;}
.picks-field.bad .picks span{border-color:var(--brick);}
.field-hint{font-size:13px; color:var(--dim); line-height:1.45; margin:-4px 0 8px;}
.field-err{font-size:13px; color:var(--brick); margin:6px 0 0;}
.agent-intro{font-size:14.5px; color:var(--ink-soft); line-height:1.5; margin:0 0 14px;}
.prompt-box{margin-bottom:20px;}
.prompt-box pre{max-height:220px; white-space:pre-wrap; font-size:12px; line-height:1.6;}
.copy-btn{margin-left:auto; font-family:"Inter",sans-serif; font-size:12.5px; font-weight:600; color:var(--green); background:var(--paper); border:1.5px solid var(--green); border-radius:2px; padding:4px 10px; box-shadow:2px 2px 0 var(--sage); cursor:pointer; transition:all .12s;}
.copy-btn:hover, .copy-btn.done{background:var(--green); color:var(--paper); box-shadow:2px 2px 0 var(--ink);}
@media(max-width:560px){ #waitlist .form-card{padding:24px;} .mode-tabs{margin:-24px -24px 22px;} }

/* round 2 — growth math, green block, case tags, cost slider */
section.green{background:var(--green); color:var(--paper); border-top-color:var(--green);}
section.green .kicker, section.green .kicker .chair{color:var(--sage-tint);}
section.green h2{color:var(--paper);}
section.green .fact{border-top-color:rgba(245,241,232,.22);}
section.green .fact h4{color:var(--paper);}
section.green .fact h4 .tick{color:var(--sage-tint);}
section.green .fact p{color:rgba(245,241,232,.78);}
section.green + section{border-top-color:var(--green);}

#growth h2{max-width:none;}
.growth-grid{display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-top:30px; align-items:start;}
.growth-grid .receipt{margin-top:0; max-width:none;}
.growth-grid + .case-fine{margin-top:18px;}
.receipt.win{border-color:var(--green); box-shadow:6px 6px 0 var(--sage);}
.stamp.ok{border-color:var(--green); color:var(--green);}
.rrow.total .lbl{color:var(--ink); font-weight:600;}
.rrow.total .val{font-size:18px;}
@media(max-width:820px){ .growth-grid{grid-template-columns:1fr; gap:26px;} }

.rails.rails-center{align-items:center;}

.case-meta{align-items:center;}
.case-meta .chip{background:var(--green); border-color:var(--green); color:var(--paper); font-weight:500;}
@media(max-width:560px){ .case-meta{align-items:flex-start;} }

.opt{display:block; font-size:13px; margin-top:2px;}

.range-val{font-family:"JetBrains Mono",monospace; font-size:15px; font-weight:500; color:var(--green); margin:-2px 0 6px;}
.range-val.empty{font-family:"Inter",sans-serif; font-size:13.5px; font-weight:400; color:var(--dim);}
.range-field.bad .range-val{color:var(--brick);}
.field input.cost-range{-webkit-appearance:none; appearance:none; width:100%; height:24px; padding:0; margin:0; border:none; background:transparent; box-shadow:none; cursor:pointer; --fill:0%;}
.cost-range::-webkit-slider-runnable-track{height:4px; border-radius:2px; background:linear-gradient(90deg,var(--green) var(--fill),var(--line-2) var(--fill));}
.cost-range::-moz-range-track{height:4px; border-radius:2px; background:var(--line-2);}
.cost-range.touched::-moz-range-progress{height:4px; border-radius:2px; background:var(--green);}
.cost-range::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:20px; height:20px; margin-top:-8px; background:var(--paper); border:2px solid var(--ink); border-radius:2px; box-shadow:2px 2px 0 var(--ink);}
.cost-range::-moz-range-thumb{width:16px; height:16px; background:var(--paper); border:2px solid var(--ink); border-radius:2px; box-shadow:2px 2px 0 var(--ink);}
.cost-range.touched::-webkit-slider-thumb{background:var(--green);}
.cost-range.touched::-moz-range-thumb{background:var(--green);}
.field input.cost-range:focus{box-shadow:none;}
.cost-range:focus-visible{outline:2px solid var(--green); outline-offset:4px;}
.range-ticks{position:relative; height:18px; margin:4px 10px 0; font-family:"JetBrains Mono",monospace; font-size:11.5px; color:var(--dim);}
.range-ticks span{position:absolute; top:0; transform:translateX(-50%); white-space:nowrap;}
.range-ticks span:first-child{transform:translateX(-30%);}
.range-ticks span:last-child{transform:translateX(-80%);}

/* integration layer — agent → our MCP → vendors */
#layer h2{max-width:none;}
.layer-ill{margin:34px 0 8px;}
.layer-ill .ill-wide{max-width:900px; margin:0 auto;}
.layer-ill .ill-tall{display:none; max-width:340px; margin:0 auto;}
@media(max-width:720px){ .layer-ill .ill-wide{display:none;} .layer-ill .ill-tall{display:block;} }
.ill .tv{fill:var(--ink); font-family:"Inter",sans-serif; font-size:13px; font-weight:600;}
.layer-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; margin-top:30px;}
.layer-grid > *{min-width:0;}
@media(max-width:820px){ .layer-grid{grid-template-columns:1fr; gap:26px;} }
.layer-points{list-style:none; margin:0 0 18px; padding:0;}
.layer-points li{display:grid; grid-template-columns:40px 1fr; gap:14px; padding:14px 0; border-top:1px solid var(--line);}
.layer-points li:first-child{border-top:none; padding-top:0;}
.lp-n{font-family:"Playfair Display",serif; font-weight:800; font-size:30px; line-height:1; color:var(--green);}
.layer-points b{display:block; font-size:16.5px; font-weight:700; margin-bottom:4px;}
.layer-points div span{display:block; color:var(--ink-soft); font-size:15px; line-height:1.5;}

/* consent checkbox */
.check{display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--ink-soft); line-height:1.45; margin:4px 0 18px; cursor:pointer;}
.check input{flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:var(--green); cursor:pointer;}

@media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important;} }

/* language switch (RU → EN) */
.lang-link{font-size:13px; font-weight:600; letter-spacing:.06em; color:var(--ink-soft); border:1px solid var(--line-2); border-radius:2px; padding:3px 7px; line-height:1.2;}
.lang-link:hover{color:var(--ink); border-color:var(--ink);}
@media(max-width:640px){
  nav .wrap{padding:0 16px;}
  .nav-in{gap:10px;}
  .nav-links{gap:10px;}
  .nav-cta{white-space:nowrap; padding:8px 11px; font-size:14px;}
}
@media(max-width:360px){ .brand{font-size:19px;} nav .brand .chair{display:none;} .nav-cta{padding:7px 9px; font-size:13.5px;} }

/* compact integration diagram — phones only */
.layer-ill .ill-mob{display:none;}

/* ==========================================================================
   MOBILE COMPACT (≤640px) — each block should read on one phone screen.
   Stacks of cards become swipe rows (same pattern as the cases carousel).
   ========================================================================== */
@media(max-width:640px){
  body{font-size:15.5px; line-height:1.5;}
  .wrap{padding:0 16px;}

  /* sections */
  section{padding:40px 0;}
  .kicker{font-size:15px; margin-bottom:6px;}
  .kicker .chair{width:13px; height:17px;}
  h2{font-size:23px; line-height:1.15; margin-bottom:10px;}
  p.big{font-size:15.5px; line-height:1.5; margin-bottom:10px;}

  /* hero */
  header{padding:18px 0 8px;}
  .card{box-shadow:6px 6px 0 var(--sage);}
  .card-inner{margin:5px; padding:22px 16px 22px;}
  .chairband{display:none;}
  .eyebrow{font-size:14px; margin-bottom:8px;}
  h1{font-size:29px; margin-bottom:12px;}
  .lede{font-size:15px; line-height:1.5; margin-bottom:18px;}
  .btn{font-size:15px; padding:12px 22px;}
  .cta-row{gap:10px;}
  .cta-note{font-size:13px;}
  .timeline{margin:22px 0 0;}
  .tl-track{gap:10px;}
  .tl-node{padding-left:12px;}
  .tl-node .cap{display:inline; font-size:13.5px; margin:0 6px 0 0;}
  .tl-node h4{display:inline; font-size:14.5px;}
  .tl-node p{font-size:13px; margin-top:1px;}

  /* receipts (problem, growth, cases) */
  .receipt{box-shadow:4px 4px 0 var(--line);}
  .receipt .rhead{padding:10px 14px; font-size:15px;}
  .rrow{padding:8px 14px; gap:10px;}
  .rrow .lbl{font-size:13.5px; line-height:1.35;}
  .rrow .val{font-size:14px;}
  .rrow.total .val{font-size:15.5px;}
  .rfoot{padding:10px 14px; font-size:13px; line-height:1.45;}
  .stamp{font-size:11.5px; padding:3px 8px; top:10px; right:-6px;}

  /* problem */
  .problem-grid{gap:18px;}

  /* how it works */
  .how-chairs{margin-top:18px;}
  .hc-track::before, .hc-track::after{top:21px;}
  .hc-seat{width:44px; height:44px;}
  .hc-node{gap:4px;}
  .hc-node.on .chair{width:26px; height:35px;}
  .hc-stage{margin-top:16px;}
  .hc-pane{gap:8px;}
  .hc-ill .ill{max-width:none; max-height:150px; width:auto; margin:0 auto;}
  .hc-num{font-size:30px; display:inline-block; vertical-align:baseline;}
  .hc-num span{font-size:15px;}
  .hc-txt h3{font-size:20px; margin:4px 0 8px;}
  .hc-txt p{font-size:15px; line-height:1.5; margin-bottom:10px;}
  .hc-txt .hc-ex{font-size:11.5px;}
  .hc-actions{margin-top:12px; gap:18px;}
  .hc-actions .btn{padding:10px 18px;}

  /* integration layer: shorter diagram, points become a swipe row, code sample hidden */
  .layer-ill{margin:14px 0 0;}
  .layer-ill .ill-tall{max-width:230px;}
  .layer-grid{margin-top:14px; gap:12px;}
  .layer-points{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
                margin:0 -16px 12px; padding:4px 16px 10px;}
  .layer-points::-webkit-scrollbar{display:none;}
  .layer-points li, .layer-points li:first-child{flex:0 0 82%; scroll-snap-align:start; display:block;
                padding:14px 16px; border:1px solid var(--line-2); background:var(--paper); box-shadow:4px 4px 0 var(--line);}
  .lp-n{font-size:24px; display:block; margin-bottom:6px;}
  .layer-points b{font-size:15px;}
  .layer-points div span{font-size:13.5px; line-height:1.45;}
  #layer .listing{display:none;}

  /* growth: the two receipts side by side as a swipe row */
  .growth-grid{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
               margin:16px -16px 0; padding:6px 22px 12px 16px;}
  .growth-grid::-webkit-scrollbar{display:none;}
  .growth-grid .receipt{flex:0 0 86%; scroll-snap-align:start;}
  .growth-grid + .case-fine{margin-top:8px;}

  /* cases */
  .cases-head{gap:12px;}
  .case-btn{width:38px; height:38px; font-size:16px;}
  .case-track{gap:16px; padding:18px 16px 14px 2px;}
  .case-meta{padding:8px 14px; font-size:13px; gap:6px;}
  .case .rhead{padding-top:34px;}
  .case-fine{font-size:12px;}

  /* who: yes / no columns as a swipe row */
  .who.who-wide{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
                margin:16px -16px 0; padding:4px 22px 12px 16px;}
  .who.who-wide::-webkit-scrollbar{display:none;}
  .who .col{flex:0 0 86%; scroll-snap-align:start; padding:16px; box-shadow:4px 4px 0 var(--sage);}
  .who .no{box-shadow:4px 4px 0 var(--line);}
  .who h4{font-size:16px; margin-bottom:6px;}
  .who li{font-size:13.5px; padding:4px 0 4px 20px;}
  .who-proof li{padding-top:7px; padding-bottom:7px;}
  .who .yes .who-proof li:before{top:7px;}
  .who-proof li span{font-size:12.5px; margin-top:1px;}

  /* form */
  #waitlist .form-card{margin-top:18px; padding:18px 16px; box-shadow:5px 5px 0 var(--sage);}
  .mode-tabs{margin:-18px -16px 16px;}
  .mode-tab{padding:12px 8px; font-size:14px;}
  .field{margin-bottom:12px;}
  .field label, fieldset.field legend{font-size:13.5px; margin-bottom:5px;}
  .opt{font-size:12px;}
  .field input, .field select, .field textarea{font-size:16px; padding:9px 12px;}   /* 16px stops iOS zoom-on-focus */
  .picks{gap:6px;}
  .picks span{font-size:13px; padding:5px 9px;}
  .field-hint{font-size:12px; margin-bottom:5px;}
  .check{font-size:13px; margin:2px 0 12px;}
  .form-fine{font-size:12px; margin-top:10px;}
  #waitlist .btn{margin-top:2px;}

  footer{padding:28px 0 36px;}
}
@media(max-width:640px){
  /* problem: the "buys blind" point is repeated in How-it-works step 2 — drop it here on phones */
  .problem-grid .txt .big:nth-child(3){display:none;}
  .problem-grid .txt .big:nth-child(2){margin-bottom:0;}

  /* how: step number sits beside the title, smaller picture */
  .hc-ill .ill{max-height:122px;}
  .hc-num{float:left; font-size:26px; margin:3px 10px 0 0;}
  .hc-num span{font-size:13px; margin-left:2px;}
  .hc-txt h3{margin-top:0;}
  .hc-txt p{clear:both;}

  /* layer: the diagram and the swipe cards carry the message — intro text and rail chips drop on phones */
  #layer .wrap > p.big{display:none;}
  #layer .chips{display:none;}
  .layer-ill .ill-tall{display:none;}
  .layer-ill .ill-mob{display:block; max-width:360px; margin:0 auto;}
  .receipt .rhead .chair{display:none;}   /* the stamp takes that corner on phones */

  /* who: tighter intro */
  #who .wrap > p.big{font-size:14.5px;}
}
@media(max-width:640px){
  /* swipe rows: keep the 16px page gutter when cards snap (snap ignores padding without this) */
  .layer-points, .growth-grid, .who.who-wide{scroll-padding-inline:16px;}
  .layer-points::after, .growth-grid::after, .who.who-wide::after{content:""; flex:0 0 2px;}  /* trailing space after the last card */
}

/* RU | EN switch */
.lang-sw{display:inline-flex; border:1px solid var(--line-2); border-radius:2px; overflow:hidden; font-size:12.5px; font-weight:600; letter-spacing:.06em; line-height:1;}
.lang-sw a, .lang-sw span{padding:6px 8px;}
.lang-sw a{color:var(--dim); text-decoration:none;}
.lang-sw a:hover{color:var(--ink); background:var(--paper-2);}
.lang-sw .on{background:var(--green); color:var(--paper);}

/* phones: the hero fills the whole screen so the next block never peeks from below */
@media(max-width:640px){
  header{min-height:calc(100vh - 65px); min-height:calc(100lvh - 65px); display:flex; flex-direction:column; padding:14px 0 72px;}   /* lvh = full screen: Safari's floating toolbar is see-through; bottom padding keeps the timeline above it */
  header > .wrap{flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:18px; width:100%;}
  header .card{flex:1; display:flex;}
  header .card-inner{flex:1; display:flex; flex-direction:column; justify-content:center;}
  .timeline{margin:0;}
  .lang-sw a, .lang-sw span{padding:6px 7px;}
}
/* phones: brand + RU|EN + CTA must fit one row */
@media(max-width:420px){
  nav .brand .chair{display:none;}
  .brand{font-size:19px;}
  .nav-links{gap:8px;}
  .nav-cta{padding:7px 9px; font-size:13.5px;}
}
@media(max-width:350px){
  .brand{font-size:17px;}
  .nav-links{gap:6px;}
  .nav-cta{padding:6px 7px; font-size:12.5px;}
  .lang-sw{font-size:11.5px;}
  .lang-sw a, .lang-sw span{padding:5px 5px;}
}

/* article pages (e.g. /en/b2ai/): normal-height hero on phones, not the full-screen landing hero */
@media(max-width:640px){
  header.page-head{min-height:0; display:block; padding:18px 0 8px;}
  header.page-head > .wrap, header.page-head .card, header.page-head .card-inner{display:block;}
}
/* "launch postponed" note: hover (tap on touch) shows a 600x600 meme under the cursor — script.js, section 3 */
.ec-meme{cursor:help; border-bottom:1px dashed currentColor; outline:none;}
.ec-meme:focus-visible{outline:2px solid var(--sage); outline-offset:3px;}
.ec-meme-pop{position:fixed; left:0; top:0; z-index:100; width:600px; height:600px; display:flex; flex-direction:column; background:var(--paper); border:2px solid var(--ink); box-shadow:8px 8px 0 var(--sage); pointer-events:none; opacity:0; visibility:hidden; transition:opacity .12s, visibility .12s;}
.ec-meme-pop.on{opacity:1; visibility:visible;}
.ec-meme-pop img{display:block; width:100%; flex:1 1 auto; min-height:0; object-fit:cover; object-position:center; background:var(--paper-2);}
.ec-meme-pop p{flex:0 0 52px; display:flex; align-items:center; justify-content:center; margin:0; padding:0 14px; border-top:1px solid var(--line); font-family:"JetBrains Mono",monospace; font-size:13px; line-height:1.3; color:var(--ink-soft); text-align:center;}
@media(max-width:640px){ .ec-meme-pop p{flex-basis:40px; font-size:11.5px;} }