:where(body.rd) p{margin:revert}
:where(body.rd) :is(h1,h2,h3){font-weight:revert; letter-spacing:revert; text-wrap:revert; margin:revert}
:where(body.rd) a{text-decoration:revert}
:where(body.rd) :is(img,svg,canvas){display:revert; max-width:revert}
:where(body.rd) ::selection{background:revert; color:revert}
/* legacy rules that share a class name with a redesign block (found by scripts/preview-inner/rd-collision-gate.mjs):
   undo them completely; the redesign's own rules for these classes come later in this sheet and win */
:where(body.rd) :is(.dc, .vsim){all:revert}

body.rd{--forest:#21312F; --forest-2:#2C403D; --cream:#FFFDF8; --paper:#F6EFE4; --coral:#FF8B64; --tan:#C98A6B; --rust:#B55332; --headtan:#DDA88A; --label:12px; --track:1.68px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.rd{margin:0; background:var(--cream); color:var(--forest); font-family:'Source Serif 4', Georgia, 'Times New Roman', serif; font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased}
a{color:inherit}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.ip-k{font-size:var(--label); letter-spacing:var(--track); text-transform:uppercase}

/* reading progress: a transform, driven straight from scroll */
.ip-progress{position:fixed; top:62px; left:0; right:0; height:2px; z-index:57; transform-origin:0 50%; transform:scaleX(0); background:var(--coral)}

/* hero */
.ip-hero{background:var(--forest); color:var(--cream); padding:clamp(120px,14vw,170px) clamp(18px,4vw,48px) clamp(64px,8vw,110px); position:relative; overflow:hidden}
.ip-hero::before{content:''; position:absolute; inset:-20% -10% auto auto; width:70vw; height:70vw; background:radial-gradient(closest-side, rgba(255,139,100,.16), transparent 70%); pointer-events:none}
.ip-hero-grid{position:relative; width:min(1180px,100%); margin:0 auto; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:clamp(28px,5vw,80px); align-items:end}
@media (max-width:900px){ .ip-hero-grid{grid-template-columns:1fr} }
.ip-eyebrow{color:var(--headtan); margin:0 0 22px}
.ip-hero h1{font-weight:400; font-size:clamp(38px,5.4vw,76px); line-height:1.02; letter-spacing:-.025em; margin:0 0 24px}
.ip-hero h1 em{font-style:italic; color:var(--tan)}
.ip-lede{font-size:clamp(17px,1.5vw,20px); line-height:1.6; max-width:60ch; margin:0 0 30px; color:rgba(255,253,248,.92)}
.ip-ctas{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:0 0 26px}
.ip-btn{display:inline-flex; align-items:center; gap:10px; background:var(--coral); color:var(--forest); text-decoration:none; font-size:var(--label); letter-spacing:var(--track); text-transform:uppercase; font-weight:600; padding:15px 22px; border-radius:999px; transition:transform .2s ease}
.ip-btn:hover{transform:translateY(-1px)}
.ip-btn span{transition:transform .25s cubic-bezier(.22,1,.36,1)} .ip-btn:hover span{transform:translateX(4px)}
.ip-ghost{display:inline-flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-size:var(--label); letter-spacing:var(--track); text-transform:uppercase; font-weight:600; padding:14px 22px; border-radius:999px; border:1.5px solid rgba(255,253,248,.72); background:rgba(255,253,248,.04); transition:background .2s ease, color .2s ease, border-color .2s ease}
.ip-ghost:hover{background:var(--cream); color:var(--forest); border-color:var(--cream)}
.ip-btn:focus-visible,.ip-ghost:focus-visible{outline:2px solid #fff; outline-offset:3px}
.ip-proof{display:flex; flex-wrap:wrap; gap:6px 18px; color:rgba(255,253,248,.82); margin:0}
.ip-proof b{color:#F4B400; font-weight:400; letter-spacing:2px}
.ip-founder{margin:0; justify-self:end; width:min(320px,100%)}
@media (max-width:900px){ .ip-founder{justify-self:start; width:min(260px,70%)} }
.ip-founder-frame{border-radius:16px; overflow:hidden; aspect-ratio:4/5; box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.ip-founder img{width:100%; height:100%; object-fit:cover; object-position:50% 14%; display:block; will-change:transform}
.ip-founder figcaption{margin-top:14px; font-size:15px; color:rgba(255,253,248,.88)}
.ip-founder figcaption b{display:block; font-weight:600; color:#fff}

.ip-photo{margin:0; justify-self:end; width:100%}
.ip-photo-frame{border-radius:18px; overflow:hidden; aspect-ratio:4/5; box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.ip-photo img{width:100%; height:100%; object-fit:cover; display:block; will-change:transform}
@media (max-width:900px){ .ip-photo-frame{aspect-ratio:3/2} }
/* full-bleed photo hero: the photo fills the header, a scrim keeps the copy legible.
   min-height (never a fixed height) so a short screen lets the hero grow instead of clipping the copy */
.ip-hero--bg{min-height:min(100svh,960px); display:flex; flex-direction:column; justify-content:flex-end; background:var(--forest)}
.ip-hero--bg::before{display:none}
.ip-bg{position:absolute; inset:0; margin:0; overflow:hidden}
.ip-bg img{width:100%; height:100%; object-fit:cover; display:block; will-change:transform}
.ip-bg::after{content:''; position:absolute; inset:0; background:
  linear-gradient(90deg, rgba(33,49,47,.94) 0%, rgba(33,49,47,.84) 38%, rgba(33,49,47,.42) 70%, rgba(33,49,47,.18) 100%),
  linear-gradient(0deg, rgba(33,49,47,.7) 0%, rgba(33,49,47,0) 40%),
  linear-gradient(180deg, rgba(33,49,47,.55) 0%, rgba(33,49,47,0) 22%)}
.ip-hero--bg .ip-hero-grid{grid-template-columns:minmax(0,780px)}
@media (min-width:901px) and (max-width:1200px){   /* the copy column reaches ~80% across here, so the dark zone does too */
  .ip-bg::after{background:
    linear-gradient(90deg, rgba(33,49,47,.94) 0%, rgba(33,49,47,.86) 50%, rgba(33,49,47,.5) 82%, rgba(33,49,47,.25) 100%),
    linear-gradient(0deg, rgba(33,49,47,.7) 0%, rgba(33,49,47,0) 40%),
    linear-gradient(180deg, rgba(33,49,47,.55) 0%, rgba(33,49,47,0) 22%)}
}
@media (max-width:900px){
  .ip-bg::after{background:linear-gradient(0deg, rgba(33,49,47,.96) 0%, rgba(33,49,47,.86) 55%, rgba(33,49,47,.6) 100%)}
  .ip-hero--bg .ip-eyebrow{color:var(--cream)}   /* the tan label measured 2.4:1 over the lighter top of the photo; cream clears 4.5 */
}
.ip-chip{display:flex; align-items:center; gap:12px; margin:0 0 22px; font-size:15px; color:rgba(255,253,248,.9)}
.ip-chip img{width:44px; height:44px; border-radius:50%; object-fit:cover}
.ip-chip b{color:#fff; font-weight:600}
/* definition */
.ip-def{background:var(--paper); padding:clamp(56px,7vw,96px) clamp(18px,4vw,48px)}
.ip-def-in{width:min(980px,100%); margin:0 auto}
.ip-def .ip-k{color:#8A4A2C; margin:0 0 18px}
.ip-def p.ip-def-t{margin:0; font-size:clamp(22px,2.4vw,32px); line-height:1.38; letter-spacing:-.01em}
.ip-def a{color:var(--forest)}

/* body: sticky contents left, sections right */
.ip-body{padding:clamp(56px,7vw,100px) clamp(18px,4vw,48px)}
.ip-grid{width:min(1180px,100%); margin:0 auto; display:grid; grid-template-columns:260px minmax(0,1fr); gap:clamp(32px,5vw,80px); align-items:start}
@media (max-width:980px){ .ip-grid{grid-template-columns:1fr} .ip-toc{display:none} }
.ip-toc{position:sticky; top:96px}
.ip-toc .ip-k{color:#8A4A2C; margin:0 0 14px}
.ip-toc ol{list-style:none; margin:0; padding:0; border-left:1px solid rgba(33,49,47,.16)}
.ip-toc a{display:flex; gap:12px; padding:8px 0 8px 16px; margin-left:-1px; border-left:2px solid transparent; text-decoration:none; font-size:14.5px; line-height:1.35; color:rgba(33,49,47,.72); transition:color .2s ease, border-color .2s ease}
.ip-toc a span{font-size:11px; letter-spacing:1px; color:rgba(33,49,47,.62); padding-top:2px; min-width:18px}
.ip-toc a:hover{color:var(--forest)}
.ip-toc a.on{color:var(--forest); border-left-color:var(--coral)}
.ip-toc a:focus-visible{outline:2px solid var(--forest); outline-offset:2px}
.ip-content{max-width:72ch}
.ip-sec{padding:0 0 clamp(40px,5vw,64px); scroll-margin-top:96px}
.ip-secn{font-size:var(--label); letter-spacing:var(--track); color:#8A4A2C; margin:0 0 12px}
.ip-sec h2{font-weight:400; font-size:clamp(28px,3vw,40px); line-height:1.12; letter-spacing:-.02em; margin:0 0 18px}
.ip-cap{font-size:clamp(18px,1.5vw,20px); line-height:1.6; padding:2px 0 2px 20px; border-left:3px solid var(--coral); margin:0 0 22px}
.ip-sec p{margin:0 0 16px}
.ip-cite{color:var(--forest); text-decoration:underline; text-decoration-color:rgba(181,83,50,.6); text-underline-offset:3px}
.ip-cite:hover{text-decoration-color:var(--rust)}
.ip-mid{position:relative; overflow:hidden; isolation:isolate; background:var(--forest); color:var(--cream); border-radius:18px; padding:clamp(30px,4vw,52px); margin:0 0 clamp(48px,6vw,72px)}
.ip-mid .ip-ctas{margin:0}
/* CTA photographs: a real <img> (lazy, two sizes) under a scrim, so the copy reads on any frame */
.ip-ctabg{position:absolute; inset:0; margin:0; z-index:-1}
.ip-ctabg img{width:100%; height:100%; object-fit:cover; display:block}
.ip-ctabg::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(33,49,47,.94) 0%, rgba(33,49,47,.88) 60%, rgba(33,49,47,.6) 100%)}
@media (max-width:760px){ .ip-mid .ip-ctabg::after{background:linear-gradient(90deg, rgba(33,49,47,.93) 0%, rgba(33,49,47,.9) 70%, rgba(33,49,47,.82) 100%)} }
.ip-mid .ip-mid-k{font-size:var(--label); letter-spacing:var(--track); text-transform:uppercase; color:var(--headtan); margin:0 0 10px}
.ip-mid .ip-mid-h{font-size:clamp(24px,2.4vw,32px); line-height:1.2; margin:0 0 10px}
.ip-mid .ip-mid-p{margin:0 0 22px; color:var(--cream)}

/* FAQ: answer console (no accordions) */
.ip-faq{background:var(--forest); color:var(--cream); padding:clamp(64px,8vw,110px) clamp(18px,4vw,48px)}
.ip-faq-in{width:min(1180px,100%); margin:0 auto}
.ip-faq .ip-k{color:var(--headtan); margin:0 0 14px}
.ip-faq h2{font-weight:400; font-size:clamp(30px,3.6vw,50px); line-height:1.08; letter-spacing:-.02em; margin:0 0 clamp(26px,3vw,40px)}
.qa{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(18px,3vw,48px); align-items:start}
@media (max-width:820px){ .qa{grid-template-columns:1fr} }
.qa-list{list-style:none; margin:0; padding:0; border-top:1px solid rgba(255,253,248,.2)}
.qa-q{display:flex; width:100%; justify-content:space-between; gap:16px; text-align:left; background:none; border:0; border-bottom:1px solid rgba(255,253,248,.2); cursor:pointer; font:inherit; color:var(--cream); font-size:clamp(16px,1.4vw,19px); line-height:1.35; padding:16px 4px}
.qa-q::after{content:'\2192'; flex:0 0 auto; transition:transform .25s cubic-bezier(.22,1,.36,1)}
.qa-q[aria-selected="true"]{font-style:italic} .qa-q[aria-selected="true"]::after,.qa-q:hover::after{transform:translateX(5px)}
.qa-q:focus-visible{outline:2px solid #fff; outline-offset:2px}
.qa-panels{display:grid; gap:14px}
.qa-panel{background:var(--cream); color:var(--forest); border-radius:14px; padding:clamp(22px,2.8vw,36px); scroll-margin-top:84px}
.qa-panel[hidden]{display:none}
.qa-who{font-size:var(--label); letter-spacing:var(--track); text-transform:uppercase; color:#8A4A2C; margin:0 0 12px}
.qa-a{margin:0; font-size:clamp(16px,1.3vw,18px); line-height:1.6}
.qa-a a{color:var(--forest)}

/* sources, related, byline */
.ip-end{padding:clamp(56px,7vw,96px) clamp(18px,4vw,48px)}
.ip-end-in{width:min(1180px,100%); margin:0 auto; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(32px,5vw,80px)}
@media (max-width:900px){ .ip-end-in{grid-template-columns:1fr} }
.ip-end .ip-k{color:#8A4A2C; margin:0 0 16px}
.ip-src{margin:0; padding-left:22px; font-size:14px; line-height:1.55}
.ip-src li{margin:0 0 10px} .ip-src a{color:var(--forest); text-decoration-color:rgba(33,49,47,.4)}
.ip-rels{display:grid; gap:10px}
.ip-rel{display:flex; justify-content:space-between; align-items:center; gap:14px; padding:18px 20px; border-radius:12px; background:var(--paper); text-decoration:none; color:var(--forest); font-size:17px; transition:transform .3s cubic-bezier(.22,1,.36,1), background .3s ease}
.ip-rel:hover{transform:translateX(4px); background:#EFE5D6} .ip-rel i{font-style:normal}
.ip-rel:focus-visible{outline:2px solid var(--forest); outline-offset:2px}
.ip-by{display:flex; gap:14px; align-items:center; margin:28px 0 0; padding-top:22px; border-top:1px solid rgba(33,49,47,.16); font-size:14px}
.ip-by img{width:52px; height:52px; border-radius:50%; object-fit:cover}
.ip-by b{display:block; font-size:15px}

/* close */
.ip-close{position:relative; overflow:hidden; isolation:isolate; background:var(--forest); color:var(--cream); text-align:center; padding:clamp(96px,12vw,170px) clamp(18px,4vw,48px)}
.ip-close .ip-ctabg::after{background:radial-gradient(ellipse 70% 80% at 50% 50%, rgba(33,49,47,.9) 0%, rgba(33,49,47,.8) 55%, rgba(33,49,47,.66) 100%)}
.ip-close h2{font-weight:400; font-size:clamp(36px,5vw,68px); letter-spacing:-.025em; line-height:1.04; margin:0 0 18px}
.ip-close h2 em{font-style:italic; color:var(--headtan)}   /* --tan measured 2.9:1 over the brightest CTA photo; the lighter tan clears it */
.ip-close p{margin:0 auto 30px; max-width:52ch; color:rgba(255,253,248,.9)}
.ip-close .ip-ctas{justify-content:center}

/* reveals: transform only, and visible without JS */
.js .ip-rv{transform:translateY(22px); transition:transform .8s cubic-bezier(.22,1,.36,1)}
.js .ip-rv.in{transform:none}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .js .ip-rv{transform:none; transition:none} .ip-btn,.ip-btn span,.ip-rel,.qa-q::after,.ip-toc a{transition:none} .ip-progress{display:none} }

/* ---------- visual modules ---------- */
.mx{position:relative; padding:clamp(64px,8vw,120px) clamp(18px,4vw,48px)}
.mx-forest{background:var(--forest); color:var(--cream)} .mx-forest2{background:var(--forest-2); color:var(--cream)}
.mx-paper{background:var(--paper)} .mx-cream{background:var(--cream)}
.mx-in{width:min(1180px,100%); margin:0 auto}
.mx-k{font-size:var(--label); letter-spacing:var(--track); text-transform:uppercase; color:var(--headtan); margin:0 0 14px}
.mx-k-dark{color:#8A4A2C}
.mx-h{font-weight:400; font-size:clamp(30px,3.6vw,52px); line-height:1.06; letter-spacing:-.02em; margin:0 0 clamp(18px,2vw,28px)}
.mx-h em{font-style:italic; color:var(--tan)} .mx-cream .mx-h em,.mx-paper .mx-h em{color:var(--rust)}
.mx-note{font-size:13px; opacity:.78; margin:14px 0 0; text-align:center}
.mx-cite{color:inherit; text-decoration:underline; text-decoration-color:rgba(201,138,107,.7); text-underline-offset:3px}
.mx-go{display:inline-flex; gap:10px; align-items:center; margin-top:22px; color:var(--cream); text-decoration:none; border-bottom:1px solid rgba(255,253,248,.5); padding-bottom:3px}
.mx-go span{transition:transform .25s ease} .mx-go:hover span{transform:translateX(4px)}

/* scene runtime: a sticky stage. .sc-live is set by JS only after the fit check passes */
[data-scene].sc-live{padding:0}
[data-scene].sc-live .sc-stage{position:sticky; top:0; height:100vh; height:100svh; display:flex; align-items:center; padding:76px clamp(18px,4vw,48px) 24px; box-sizing:border-box; overflow:hidden}
[data-scene].sc-live .mp-panels{display:grid}
[data-scene].sc-live .mp-panels > *{grid-area:1/1; opacity:0; transform:translateY(14px); transition:opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1); pointer-events:none}
[data-scene].sc-live .mp-panels > .on{opacity:1; transform:none; pointer-events:auto}
.mp-panels > *{margin:0 0 26px}
[data-scene].sc-live .mp-panels > *{margin:0}
/* phones, live: the art sits on top of the stage (scaled by the runtime to fit), one caption under it, clear of the
   nav above and the Book-a-call button below. The two phone scenes show their phone only when live. */
@media (max-width:900px){
  [data-scene].sc-live .sc-stage{align-items:flex-start; padding:64px clamp(18px,4vw,48px) 78px}
  [data-scene].sc-live .wd-phonecol,[data-scene].sc-live .ai-phonecol{display:block; order:-1}
  /* the phone mockups peek up from the bottom edge: top of the screen visible, fading out */
  [data-scene].sc-live :is(.wd-phonecol,.ai-phonecol,.sf-phonecol) .mx-phone{width:min(250px,66vw); max-height:24svh; padding-bottom:0; border-bottom-left-radius:0; border-bottom-right-radius:0; -webkit-mask-image:linear-gradient(#000 72%,transparent); mask-image:linear-gradient(#000 72%,transparent)}
  [data-scene].sc-live :is(.wd-phonecol,.ai-phonecol,.sf-phonecol) .mx-screen{border-bottom-left-radius:0; border-bottom-right-radius:0}
  [data-scene].sc-live.no-phone :is(.wd-phonecol,.ai-phonecol){display:none}
  /* short phones: before the art is scaled, the copy compacts. Takeaways and section links repeat the article text
     right below the scene, so they go; illustration notes and citations stay. */
  [data-scene].sc-live.sc-compact .mx-h{font-size:24px; margin-bottom:10px}
  [data-scene].sc-live.sc-compact .mx-k{margin-bottom:8px}
  [data-scene].sc-live.sc-compact :is(.wd-take,.mp-links){display:none}
  [data-scene].sc-live.sc-compact :is(.mp-q,.ai-qq){font-size:17px; margin-bottom:8px}
  [data-scene].sc-live.sc-compact .mp-n{margin-bottom:6px}
  [data-scene].sc-live.sc-compact .rg-read{margin-bottom:8px} [data-scene].sc-live.sc-compact .rg-read span{font-size:26px}
  [data-scene].sc-live.sc-compact .wd-bar{font-size:14px} [data-scene].sc-live.sc-compact .wd-unit{margin-bottom:0}
  [data-scene].sc-live :is(.wd-phonecol,.ai-phonecol,.sf-phonecol) .mx-note{margin-top:4px; font-size:11px; line-height:1.3}
}

/* phone */
.mx-phone{width:min(300px,78vw,calc((100vh - 200px) * .4865)); width:min(300px,78vw,calc((100svh - 200px) * .4865)); margin:0 auto; aspect-ratio:9/18.5; border-radius:42px; background:#0f1716; padding:11px; box-shadow:0 50px 90px -40px rgba(0,0,0,.75), inset 0 0 0 2px rgba(255,255,255,.08)}
.mx-screen{height:100%; border-radius:32px; background:#fff; color:#1f1f1f; overflow:hidden; position:relative; font-family:-apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size:13px; line-height:1.45}
.mx-status{display:flex; justify-content:space-between; align-items:center; padding:12px 22px 6px; font-size:12px; font-weight:600}
.mx-status i{position:relative; box-sizing:border-box; width:24px; height:11px; border:1.5px solid #1f1f1f; border-radius:3px; padding:1.5px; background:repeating-linear-gradient(90deg,#34C759 0 4px,transparent 4px 5.5px) content-box}   /* battery: green charge bars */
.mx-status i::after{content:''; position:absolute; right:-4px; top:50%; width:2px; height:4px; margin-top:-2px; border-radius:0 1px 1px 0; background:#1f1f1f}

@media (max-height:820px){ .mx-h{font-size:clamp(28px,3vw,42px)} .mp-q{font-size:clamp(18px,1.5vw,22px)} .ai-qq{font-size:clamp(19px,1.7vw,24px)} .wd-bars{gap:8px} .mx-note{margin-top:8px} }
/* words */
.wd-grid{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,5vw,80px); align-items:center}
.wd-g{text-align:center; padding:10px 0 6px} .wd-glogo{font:700 30px/1 Arial, sans-serif; color:#4285f4}
.wd-search{margin:6px 14px 14px; border:1px solid #dadce0; border-radius:24px; padding:10px 16px; display:flex; align-items:center; gap:2px; box-shadow:0 1px 6px rgba(32,33,36,.18); min-height:20px}
.wd-typed{white-space:nowrap; overflow:hidden}
.wd-caret{width:1.5px; height:16px; background:#1a73e8; animation:wdc 1s steps(1) infinite} @keyframes wdc{50%{opacity:0}}
.wd-skel{padding:0 16px} .wd-skel span{display:block; height:9px; border-radius:5px; background:#eceff1; margin:0 0 7px} .wd-skel span.s{width:62%}
.wd-tag{font-size:11px; font-weight:600; color:#5f6368; margin:12px 0 7px}
.wd-map{height:70px; border-radius:10px; background:linear-gradient(135deg,#e8f0e3,#dfe9f3); margin:0 0 8px}
.wd-bars{list-style:none; margin:0 0 18px; padding:0; display:grid; gap:12px}
.wd-bar{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) 3.2ch; gap:14px; align-items:center; font-size:clamp(15px,1.3vw,18px); transition:opacity .3s ease}
.wd-bar b{font-weight:400; text-align:right; font-variant-numeric:tabular-nums}
.wd-track{height:10px; border-radius:6px; background:rgba(255,253,248,.12); overflow:hidden}
.wd-track i{display:block; height:100%; width:var(--w); background:var(--coral); border-radius:6px; transform-origin:0 50%; transition:transform .6s cubic-bezier(.22,1,.36,1)}
.sc-live .wd-bar{opacity:.38} .sc-live .wd-bar.done,.sc-live .wd-bar.on{opacity:1}
.sc-live .wd-bar .wd-track i{transform:scaleX(0)} .sc-live .wd-bar.done .wd-track i,.sc-live .wd-bar.on .wd-track i{transform:scaleX(1)}
.wd-unit{font-size:14px; opacity:.85; margin:0 0 20px}
.wd-take{list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:15.5px; line-height:1.5}
.wd-take li{padding-left:16px; border-left:2px solid var(--coral)}
.wd-nophone .wd-grid{grid-template-columns:minmax(0,1fr); max-width:860px; margin:0 auto}
.wd-nophone .wd-bar{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 7ch}
@media (max-width:900px){ .wd-grid{grid-template-columns:1fr} .wd-phonecol{display:none} }

/* checker */
.ck-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,80px); align-items:start}
@media (max-width:900px){ .ck-grid{grid-template-columns:1fr} }
.ck-rule{font-size:clamp(17px,1.4vw,19px); line-height:1.6; margin:0 0 18px}
.ck-caution{font-size:14.5px; color:rgba(33,49,47,.8); margin:0; padding-left:14px; border-left:2px solid rgba(33,49,47,.25)}
.ck-box{background:#fff; border-radius:18px; padding:clamp(20px,2.6vw,32px); box-shadow:0 30px 60px -40px rgba(33,49,47,.45); display:grid; gap:16px}
.ck-box fieldset{border:0; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 10px}
.ck-box legend{font-size:15px; font-weight:600; margin:0 0 8px; padding:0; width:100%}
.ck-box fieldset label{display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px; background:var(--paper); font-size:15px; cursor:pointer}
.ck-box fieldset label:has(input:checked){background:var(--forest); color:var(--cream)}
.ck-box input[type=radio]{accent-color:var(--coral)}
.ck-range{display:grid; gap:8px; font-size:15px} .ck-range span{display:flex; justify-content:space-between; gap:12px; font-weight:600}
.ck-range output{font-variant-numeric:tabular-nums; font-weight:400}
.ck-range input{width:100%; accent-color:var(--rust)}
.ck-out{border-radius:12px; padding:16px 18px; font-size:15.5px; line-height:1.5; background:var(--paper)}
.ck-out b{display:block; font-size:18px; margin:0 0 4px}
.ck-out.yes{background:var(--forest); color:var(--cream)} .ck-out.maybe{background:#F7E3C9}

/* decide */
.dc-qq{font-size:clamp(19px,1.6vw,22px); line-height:1.35; margin:0 0 14px; font-weight:600}
.dc-opts{display:flex; flex-wrap:wrap; gap:10px}
.dc-opt{font:inherit; font-size:15px; padding:10px 16px; border-radius:999px; border:1px solid rgba(33,49,47,.2); background:var(--paper); color:var(--forest); cursor:pointer; transition:background .2s ease, color .2s ease}
.dc-opt:hover{background:var(--forest); color:var(--cream)} .dc-opt:focus-visible,.dc-reset:focus-visible{outline:2px solid var(--forest); outline-offset:2px}
.dc-r{padding:16px 18px; border-radius:12px; background:var(--paper); margin:0 0 10px}
.dc-rh{font-weight:600; margin:0 0 8px; font-size:17px} .dc-rq{margin:0 0 8px; font-style:italic; line-height:1.5}
.dc-r .mp-links a{text-decoration-color:rgba(33,49,47,.4)}
.js .dc-r{display:none} .js .dc-r.on{display:block; background:var(--forest); color:var(--cream)} .js .dc-r.on .mp-links a{text-decoration-color:rgba(255,253,248,.5)}
.dc-reset{justify-self:start; font:inherit; font-size:14px; background:none; border:0; padding:0; color:var(--rust); text-decoration:underline; text-underline-offset:3px; cursor:pointer}
/* map */
.mp-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:center}
@media (max-width:900px){ .mp-grid{grid-template-columns:1fr} .mp-mapcol{order:-1} }
.mp-svg{width:100%; height:auto; max-height:62vh; display:block}
.mp-c{fill:rgba(255,253,248,.07); stroke:rgba(255,253,248,.28); stroke-width:.8; transition:fill .45s ease}
.mp-c.hl{fill:rgba(255,139,100,.55); stroke:var(--cream)} .mp-c.hl.warn{fill:rgba(221,168,138,.35)}
.mp-cl{font:600 13px/1 'Source Serif 4', Georgia, serif; fill:var(--cream); text-anchor:middle; opacity:.55; transition:opacity .3s ease}
.mp-cl.hl{opacity:1}
.mp-city{opacity:0; transition:opacity .35s ease} .mp-city.on{opacity:1}
.mp-city circle{fill:var(--cream); stroke:var(--forest); stroke-width:2} .mp-city text{font:600 13.5px/1 'Source Serif 4', Georgia, serif; fill:#fff; text-anchor:end; paint-order:stroke; stroke:var(--forest); stroke-width:3px}
html:not(.js) .mp-city{opacity:1}   /* with JS the captions drive the pins, live or static */
.mp-n{font-size:var(--label); letter-spacing:var(--track); text-transform:uppercase; color:var(--headtan); margin:0 0 12px}
.mx-cream .mp-n,.mx-paper .mp-n{color:#8A4A2C}
.mp-q{margin:0 0 14px; font-size:clamp(19px,1.8vw,25px); line-height:1.35; font-style:italic}
.mp-say{margin:0 0 12px; opacity:.92}
.mp-links{display:flex; flex-wrap:wrap; gap:16px; margin:0; font-size:15px}
.mp-links a{color:inherit; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,253,248,.45)}

/* phones: the map stays pinned while its captions scroll under it */
@media (max-width:900px){
  .mp:not(.sc-live) .mp-mapcol{position:sticky; top:62px; z-index:2; background:var(--forest); margin:0 calc(-1 * clamp(18px,4vw,48px)); padding:6px clamp(18px,4vw,48px) 4px; box-shadow:0 16px 20px -16px rgba(0,0,0,.6)}
  .mp:not(.sc-live) .mp-svg{max-height:34vh; max-height:34svh; margin:0 auto}
  .mp:not(.sc-live) .mp-mapcol .mx-note{margin:2px 0 0; font-size:11px}
  .mp:not(.sc-live) .mp-panel{padding:26px 0 30px; border-top:1px solid rgba(255,253,248,.16); margin:0}
  .mp:not(.sc-live) .mp-panel:not(.on){opacity:.55}
}
/* live basemap (opt-in): sits exactly over the drawn map, which keeps the column's size */
.mp-mapcol{position:relative}
.mp-live{position:absolute; left:0; right:0; top:0; border-radius:14px; overflow:hidden; opacity:0; transition:opacity .6s ease; background:#EFE9DF; pointer-events:none}
.mp-has-live .mp-live{opacity:1} .mp-has-live .mp-svg{visibility:hidden}
.mp-note-live{display:none} .mp-has-live .mp-note-live{display:inline} .mp-has-live .mp-note-svg{display:none}
.mp-live .leaflet-tile-pane{filter:grayscale(.55) sepia(.22) saturate(.85) brightness(1.03) contrast(.94)}   /* light, warm basemap (Jamie 2026-10-17: lighter map) */
.mp-live .leaflet-container, .mp-live.leaflet-container{background:#EFE9DF; font:inherit}
/* leaflet.css loads after this and sets a white chip, so these carry one more class; dark text on cream, readable on the light map */
.mp .mp-live .leaflet-control-attribution{pointer-events:auto; background:rgba(255,253,248,.9); color:#21312F; font-size:10.5px}
.mp .mp-live .leaflet-control-attribution a{color:#21312F}
.mp-tip.leaflet-tooltip{background:rgba(24,34,33,.94); border:0; border-left:2px solid var(--coral); border-radius:2px; box-shadow:0 6px 14px -6px rgba(0,0,0,.6); padding:5px 8px 5px 7px; color:#fff; font:600 13px/1 'Source Serif 4', Georgia, serif; letter-spacing:.01em}
.mp-tip.leaflet-tooltip::before{display:none}
/* house */
.hs-grid{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(28px,5vw,72px); align-items:center}
@media (max-width:900px){ .hs-grid{grid-template-columns:1fr} .hs-art{order:-1} }
.hs-svg{width:100%; height:auto; display:block}
.hs-roof{fill:#C98A6B} .hs-wall{fill:#F1E6D6; stroke:rgba(33,49,47,.25)} .hs-ground{fill:#9DB59A}
.hs-o rect{fill:#CFDDE3; stroke:#7C8C8B; stroke-width:3; transition:fill .4s ease, stroke .4s ease} .hs-o path{stroke:#7C8C8B; stroke-width:2; fill:none} .hs-o circle{fill:#7C8C8B}
.hs-o.ok rect{fill:#BFE3D6; stroke:var(--forest); stroke-width:5}
.hs-o.weak rect{fill:#F6C7B6; stroke:var(--rust); stroke-width:5; animation:hsw 1.4s ease-in-out infinite} @keyframes hsw{50%{stroke-opacity:.35}}
.hs-t{font:600 13px/1 'Source Serif 4', Georgia, serif; fill:var(--forest); text-anchor:middle}
.hs-legend{display:flex; gap:20px; justify-content:center; font-size:14px; margin:14px 0 0}
.hs-legend span::before{content:''; display:inline-block; width:14px; height:14px; border-radius:3px; margin-right:7px; vertical-align:-2px}
.hs-legend .ok::before{background:#BFE3D6; border:3px solid var(--forest)} .hs-legend .weak::before{background:#F6C7B6; border:3px solid var(--rust)}
.hs-panel[data-verdict] .mp-q{color:var(--rust)}
.hs-src{font-size:14px; margin:18px 0 0; opacity:.85}

/* ai */
.ai-grid{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,5vw,80px); align-items:center}
@media (max-width:900px){ .ai-grid{grid-template-columns:1fr} .ai-phonecol{display:none} }
.ai-screen{display:grid; grid-template-rows:auto 1fr}
.ai-chat{grid-area:2/1; padding:6px 14px 14px; opacity:0; transition:opacity .35s ease; overflow:hidden}
.ai-chat.on{opacity:1} .ai-chat.ai-fade{-webkit-mask-image:linear-gradient(#000 82%,transparent); mask-image:linear-gradient(#000 82%,transparent)} html:not(.js) .ai-chat:first-of-type, .aix:not(.sc-live) .ai-chat[data-step="0"]{opacity:1}
.ai-app{display:flex; align-items:center; gap:8px; font-weight:600; margin:2px 0 12px} .ai-app i{width:14px; height:14px; border-radius:50%}
.ai-me{margin:0 0 12px auto; max-width:85%; background:#f1f3f4; border-radius:16px 16px 4px 16px; padding:9px 12px}
.ai-bot p{margin:0; font-size:12.5px; line-height:1.5} .ai-bot a{color:inherit}
.ai-rail{list-style:none; margin:0 0 22px; padding:0; display:flex; gap:14px; flex-wrap:wrap}
.ai-rail li{width:30px; height:30px; color:var(--cream); opacity:.32; transform:scale(1); transition:opacity .3s ease, transform .3s ease}
.ai-rail li svg{width:100%; height:100%} .ai-rail li.done{opacity:.6} .ai-rail li.on{opacity:1; transform:scale(1.18)}
.ai-qq{font-size:clamp(21px,2vw,28px); line-height:1.3; margin:0 0 14px; font-style:italic}
.ai-reads{margin:0; opacity:.92} .ai-reads span{display:block; font-size:var(--label); letter-spacing:var(--track); text-transform:uppercase; color:var(--headtan); margin:0 0 6px}

/* reveal */
.rv-grid{display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:clamp(24px,4vw,64px); align-items:center}
@media (max-width:900px){ .rv-grid{grid-template-columns:1fr} .rv-frame{order:-1} }
.rv-frame{margin:0; position:relative; width:min(100%, calc((100vh - 230px) * 16 / 9)); justify-self:center}
.rv-frame > img, .rv-lit{display:block; width:100%; aspect-ratio:var(--ar); border-radius:14px}
.rv-frame > img{height:auto}
.rv-lit{position:absolute; left:0; top:0; background-size:100% 100%; opacity:1; transition:opacity .9s cubic-bezier(.22,1,.36,1); pointer-events:none}
.rvx.sc-live .rv-lit, .rvx[data-fit=static] .rv-lit{opacity:0}
.rvx .rv-lit.on, .rvx .rv-lit.done{opacity:1}
.rv-spot{position:absolute; left:0; top:0; width:100%; aspect-ratio:var(--ar); border-radius:14px; background:rgba(14,24,22,.62); opacity:0; transition:opacity .7s cubic-bezier(.22,1,.36,1); pointer-events:none}
.rvx .rv-spot.on{opacity:1}
.rvx .rv-lit.on:not(.rv-none){animation:rvlit 1.2s cubic-bezier(.22,1,.36,1)}
@keyframes rvlit{0%{filter:brightness(1.15) saturate(1.15)}100%{filter:none}}
@media (prefers-reduced-motion: reduce){ .rvx .rv-lit.on{animation:none} .rv-spot{transition:none} }
@media (max-width:900px){
  .rvx:not(.sc-live) .rv-frame{position:sticky; top:62px; z-index:2; background:var(--forest); padding:6px 0 4px}
  .rvx:not(.sc-live) .rv-panel{padding:24px 0 28px; border-top:1px solid rgba(255,253,248,.16); margin:0}
  .rvx:not(.sc-live) .rv-panel:not(.on){opacity:.55}
}
/* build order: stacking cards */
.bd{scroll-margin-top:70px}
.bd-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(28px,5vw,72px); align-items:start}
@media (max-width:900px){ .bd-grid{grid-template-columns:1fr} }
.bd-head{position:sticky; top:96px}
@media (max-width:900px){ .bd-head{position:static} }
.bd-cards{list-style:none; margin:0; padding:0}
.bd-card{position:sticky; top:calc(96px + var(--i) * 14px); background:#fff; border-radius:18px; padding:clamp(22px,2.6vw,34px); margin:0 0 22px; box-shadow:0 24px 50px -34px rgba(33,49,47,.55); border:1px solid rgba(33,49,47,.08)}
.bd-n{font-size:var(--label); letter-spacing:var(--track); text-transform:uppercase; color:#8A4A2C; margin:0 0 10px}
.bd-t::first-letter{text-transform:uppercase}
.bd-t{margin:0; font-size:clamp(18px,1.6vw,22px); line-height:1.45} .bd-t a{color:var(--forest)}

/* photos inside the reading column break out to the page width */
.mx-photo{margin:0 0 clamp(24px,2.6vw,34px)} .mx-photo-in{border-radius:14px; overflow:hidden; aspect-ratio:21/9}   /* a band inside the reading column, not a full-screen poster */
.mx-photo img{width:100%; height:100%; object-fit:cover; display:block}
/* shared: on phones (static fallback) the art stays pinned while its captions scroll under it */
@media (max-width:900px){
  .sy:not(.sc-live) .mp-panels > *, .rg:not(.sc-live) .mp-panels > *, .dl:not(.sc-live) .mp-panels > *, .sf:not(.sc-live) .mp-panels > *{padding:24px 0 28px; margin:0; border-top:1px solid rgba(255,253,248,.16)}
  .rg:not(.sc-live) .mp-panels > *, .sf:not(.sc-live) .mp-panels > *{border-top-color:rgba(33,49,47,.14)}
  .sy:not(.sc-live) .mp-panels > :not(.on), .rg:not(.sc-live) .mp-panels > :not(.on), .dl:not(.sc-live) .mp-panels > :not(.on), .sf:not(.sc-live) .mp-panels > :not(.on){opacity:.55}
}
.mx-cream .mp-links a,.mx-paper .mp-links a{text-decoration-color:rgba(33,49,47,.4)}
/* system */
.sy-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,72px); align-items:center}
.sy-board{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,88px); transition:gap .8s cubic-bezier(.22,1,.36,1)}
.sy-board.linked{gap:clamp(22px,2.6vw,36px)}
.sy-lines{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
.sy-lines path{fill:none; stroke:var(--coral); stroke-width:2; vector-effect:non-scaling-stroke; opacity:0; transition:opacity .8s ease .2s}
.sy-lines path + path{transition-delay:.45s}
.sy-board.linked .sy-lines path{opacity:1}
.sy-node{position:relative; z-index:1; background:var(--forest-2); box-shadow:inset 0 0 0 999px rgba(255,253,248,.04); border:1.5px dashed rgba(255,253,248,.34); border-radius:16px; padding:clamp(14px,1.6vw,20px); min-height:clamp(118px,12vw,150px); transition:background .5s ease, color .5s ease, border-color .5s ease, transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease}
.sy-tag{font-size:11px; letter-spacing:var(--track); text-transform:uppercase; color:var(--headtan); margin:0 0 8px; transition:opacity .4s ease}
.sy-t{font-size:clamp(19px,1.7vw,24px); line-height:1.15; margin:0 0 6px}
.sy-s{font-size:14px; line-height:1.4; margin:0; opacity:.86}
.sy-node.lit{background:var(--cream); box-shadow:none; color:var(--forest); border:1.5px solid var(--cream)} .sy-node.lit .sy-tag{color:#8A4A2C}
.sy-node.now{transform:translateY(-6px); box-shadow:0 24px 44px -26px rgba(0,0,0,.8)}
.sy-board.linked .sy-tag{opacity:0}
.sy-core{position:absolute; z-index:2; left:50%; top:50%; margin:0; background:var(--coral); color:var(--forest); font-weight:600; font-size:15px; border-radius:999px; padding:10px 18px; white-space:nowrap; opacity:0; transform:translate(-50%,-50%) scale(.6); transition:opacity .5s ease .3s, transform .6s cubic-bezier(.22,1,.36,1) .3s; box-shadow:0 0 0 8px var(--forest-2)}
.sy-board.linked .sy-core{opacity:1; transform:translate(-50%,-50%) scale(1)}
@media (max-width:900px){ .sy-grid{grid-template-columns:1fr} .sy-art{order:-1}
  .sy:not(.sc-live) .sy-art{position:sticky; top:62px; z-index:2; background:var(--forest-2); margin:0 calc(-1 * clamp(18px,4vw,48px)); padding:8px clamp(18px,4vw,48px) 6px; box-shadow:0 16px 20px -16px rgba(0,0,0,.6)}
  .sy-s{display:none} .sy-node{min-height:0; padding:12px 14px} .sy-t{font-size:17px; margin:0} .sy-board{gap:28px} .sy-board.linked{gap:16px}
  .sy-board, .sy-board.linked{row-gap:46px}   /* the centre pill (27px + its 8px ring) sits between the rows without touching titles */ .sy-art .mx-note{margin-top:6px; font-size:11px} }
/* price ruler */
.rg-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap}
.rg-read{margin:0 0 clamp(18px,2vw,28px); text-align:right; color:var(--forest)}
.rg-read span{display:block; font-size:clamp(30px,4.2vw,58px); line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--rust)}
.rg-read small{display:block; font-size:13px; letter-spacing:var(--track); text-transform:uppercase; margin-top:8px; color:#8A4A2C}
.rg-art{margin:clamp(8px,1.4vw,18px) 0 clamp(26px,3vw,40px)}
.rg-ruler{position:relative; height:calc(var(--rows) * 46px + 34px)}
.rg-band{position:absolute; top:calc(var(--row) * 46px); height:34px; border-radius:8px; display:flex; align-items:center; padding:0 12px; box-sizing:border-box; color:var(--cream); font-size:14px; white-space:nowrap; transform-origin:0 50%; transition:transform .7s cubic-bezier(.22,1,.36,1), opacity .5s ease}
.rg-band b{font-weight:600}
.rg-mkt{background:var(--forest)} .rg-ours{background:var(--rust)} .rg-warn{background:repeating-linear-gradient(-45deg,#7A3F27 0 6px,#8F4E33 6px 12px)}
.rg-narrow b{position:absolute; left:calc(100% + 10px); color:var(--forest)}
.sc-live .rg-band{transform:scaleX(0); opacity:0} .sc-live .rg-band.on, .sc-live .rg-band.done{transform:none; opacity:1}
.rg-axis{position:absolute; left:0; right:0; bottom:0; height:24px; border-top:2px solid var(--forest)}
.rg-tick{position:absolute; top:0; transform:translateX(-50%); font-size:13px; color:var(--forest); padding-top:12px; font-variant-numeric:tabular-nums; white-space:nowrap}
.rg-tick i{position:absolute; left:50%; top:-2px; width:2px; height:9px; background:var(--forest)} .rg-minor i{height:5px; opacity:.6}
.rg-tick:first-child{transform:none} .rg-tick:first-child i{left:0} .rg-tick:last-child{transform:translateX(-100%)} .rg-tick:last-child i{left:auto; right:0}
.rg-panels{max-width:860px}
@media (max-width:900px){ .rg-read{text-align:left} .rg-ruler{height:calc(var(--rows) * 38px + 30px)} .rg-band{top:calc(var(--row) * 38px); height:28px; font-size:12.5px; padding:0 8px} .rg-tick{font-size:11px}
  .rg:not(.sc-live) .rg-art{position:sticky; top:62px; z-index:2; background:var(--cream); margin:0 calc(-1 * clamp(18px,4vw,48px)); padding:10px clamp(18px,4vw,48px) 8px; box-shadow:0 16px 20px -18px rgba(33,49,47,.45)} }
/* dial */
.dl-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:center}
.dl-art{margin:0}
.dl-face{position:relative; width:min(100%, calc(100vh - 260px), 520px); width:min(100%, calc(100svh - 260px), 520px); margin:0 auto}
.dl-svg{display:block; width:100%; height:auto; overflow:visible}
.dl-m{font:600 15px/1 'Source Serif 4', Georgia, serif; fill:var(--cream); opacity:.7; text-anchor:middle}
.dl-track{fill:none; stroke:rgba(255,253,248,.1); stroke-width:16}
.dl-arc{fill:none; stroke-width:16; stroke-linecap:round; stroke-dasharray:var(--len) 12; stroke-dashoffset:0; transform-box:view-box; transform-origin:50% 50%; transform:rotate(var(--rot)); transition:stroke-dashoffset 1s cubic-bezier(.22,1,.36,1), opacity .4s ease}
.dl-arc[data-k="0"]{stroke:var(--coral)} .dl-arc[data-k="1"]{stroke:var(--tan)} .dl-arc[data-k="2"]{stroke:var(--cream)} .dl-arc[data-k="3"]{stroke:#9DB59A}
.sc-live .dl-arc{stroke-dashoffset:var(--len); opacity:0} .sc-live .dl-arc.on, .sc-live .dl-arc.done{stroke-dashoffset:0; opacity:1} .sc-live .dl-arc.done{opacity:.6}
.dl-read{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:44%; margin:0; text-align:center}
.dl-read span{display:block; font-size:clamp(22px,2.4vw,34px); line-height:1.05; letter-spacing:-.01em}
.dl-read span.long{font-size:clamp(17px,1.7vw,24px); line-height:1.1}
.dl-read:has(span.long){width:34%}   /* spelled-out ranges ("six to twelve months") */
.dl-read small{display:block; font-size:11px; letter-spacing:var(--track); text-transform:uppercase; color:var(--headtan); margin-top:8px}
@media (max-width:900px){ .dl-grid{grid-template-columns:1fr} .dl-art{order:-1}
  .dl:not(.sc-live) .dl-art{position:sticky; top:62px; z-index:2; background:var(--forest); margin:0 calc(-1 * clamp(18px,4vw,48px)); padding:8px clamp(18px,4vw,48px) 4px; box-shadow:0 16px 20px -16px rgba(0,0,0,.6)}
  .dl:not(.sc-live) .dl-face{width:min(72vw, 36vh); width:min(72vw, 36svh)} .dl-art .mx-note{margin-top:2px; font-size:11px}
  .dl-read{position:static; transform:none; width:auto; margin:4px 0 0} .dl-read span{font-size:20px; display:inline} .dl-read small{display:inline; margin:0 0 0 8px} }
/* surfaces */
.sf-grid{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(28px,5vw,80px); align-items:center}
.sf-screen{display:grid; grid-template-rows:auto 1fr}
.sf-scr{grid-area:2/1; opacity:0; transition:opacity .4s ease; overflow:hidden; padding:0 0 12px}
.sf-scr.on, html:not(.js) .sf-scr[data-step="0"], .sf:not(.sc-live):not(:has(.sf-scr.on)) .sf-scr[data-step="0"]{opacity:1}
.sf-map{position:relative; height:84px; border-radius:10px; background:linear-gradient(135deg,#e8f0e3,#dfe9f3); margin:0 0 10px}
.sf-map i{position:absolute; width:12px; height:12px; border-radius:50% 50% 50% 0; background:#ea4335; transform:rotate(-45deg)} .sf-map i:nth-child(1){left:22%; top:30%} .sf-map i:nth-child(2){left:55%; top:52%} .sf-map i:nth-child(3){left:76%; top:24%}
.sf-links span{display:block; height:8px; border-radius:5px; background:#eceff1; margin:0 0 6px} .sf-links span:nth-child(3n+1){background:#d2e3fc; width:70%}
.sf-voice{background:linear-gradient(180deg,#14201f,#2b3b39); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px}
.sf-voice .wd-skel{width:100%; box-sizing:border-box} .sf-voice .wd-tag{color:rgba(255,255,255,.75)} .sf-voice .wd-skel span{background:rgba(255,255,255,.18)}
.sf-orb{width:74px; height:74px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #ffd0bf, var(--coral) 45%, #7a3f27); box-shadow:0 0 40px rgba(255,139,100,.55)}
.sf-wave{display:flex; gap:4px; align-items:center; height:34px} .sf-wave i{width:4px; height:30%; border-radius:2px; background:rgba(255,255,255,.85)}
.sf-scr.on .sf-wave i{animation:sfw 1.1s ease-in-out var(--d) infinite} @keyframes sfw{50%{height:100%}}
.sf-me{margin:14px 14px 14px auto} .sf-names{list-style:none; margin:0; padding:0 14px; display:grid; gap:12px}
.sf-names li{display:grid; grid-template-columns:22px 1fr; gap:4px 10px; align-items:center} .sf-names b{grid-row:span 2; width:22px; height:22px; border-radius:50%; background:#1f1f1f; color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center}
.sf-names span{height:8px; border-radius:5px; background:#eceff1} .sf-names span:first-of-type{background:#cfd8dc; width:60%} .sf-names span.s{width:88%}
.sf-names span.r{grid-column:2; height:7px; background:#f1f3f4} .sf-names span.s2{width:70%} .sf-names li{grid-template-rows:auto; padding-bottom:10px; border-bottom:1px solid #f1f3f4}
.sf-stack{padding:16px 14px; display:grid; gap:12px; align-content:start} .sf-stack p{margin:0; padding:12px; border-radius:12px; background:#f1f3f4; display:grid; gap:6px}
.sf-stack b{font-size:12px} .sf-stack span{height:7px; border-radius:4px; background:#dadce0} .sf-stack span.s{width:60%}
.sf-scr.on.sf-stack p{animation:sfin .6s cubic-bezier(.22,1,.36,1) both} .sf-stack p:nth-child(2){animation-delay:.12s!important} .sf-stack p:nth-child(3){animation-delay:.24s!important} @keyframes sfin{from{opacity:0; transform:translateY(10px)}}
.sf-pill{display:inline-block; background:var(--forest); color:var(--cream); border-radius:999px; padding:2px 9px; letter-spacing:1px}
@media (prefers-reduced-motion: reduce){ .sf-scr.on .sf-wave i, .sf-scr.on.sf-stack p{animation:none} }
@media (max-width:900px){ .sf-grid{grid-template-columns:1fr} .sf-phonecol{order:-1}
  .sf:not(.sc-live) .sf-phonecol{position:sticky; top:62px; z-index:2; background:var(--paper); margin:0 calc(-1 * clamp(18px,4vw,48px)); padding:8px clamp(18px,4vw,48px) 4px; box-shadow:0 16px 20px -18px rgba(33,49,47,.45)}
  .sf:not(.sc-live) .mx-phone{width:min(46vw, calc(40svh * .4865)); border-radius:26px; padding:7px} .sf:not(.sc-live) .mx-screen{border-radius:20px; font-size:10px} .sf-phonecol .mx-note{margin-top:4px; font-size:11px} }
/* request path */
.pt-art{margin:clamp(6px,1vw,14px) 0 clamp(22px,2.6vw,34px)}
.pt-stages{list-style:none; margin:0 0 14px; padding:0; display:grid; grid-template-columns:repeat(var(--n),1fr); gap:10px}
.pt-stage{border:1.5px solid rgba(255,253,248,.24); border-radius:14px; padding:12px 14px; transition:background .4s ease, color .4s ease, border-color .4s ease}
.pt-stage.lit{background:var(--cream); color:var(--forest); border-color:var(--cream)}
.pt-t{margin:0 0 4px; font-size:clamp(16px,1.4vw,20px); line-height:1.15} .pt-s{margin:0; font-size:13px; opacity:.8; line-height:1.35}
.pt-lane{position:relative; display:block; height:52px; margin:0 0 6px; border-radius:10px; background:rgba(255,253,248,.04) repeating-linear-gradient(to right, transparent 0 calc(100% / var(--n) - 1px), rgba(255,253,248,.16) calc(100% / var(--n) - 1px) calc(100% / var(--n)))}
.pt-lab{position:absolute; left:10px; top:5px; z-index:1; font-size:11px; letter-spacing:var(--track); text-transform:uppercase; color:var(--headtan)}
.pt-clip{position:relative; display:block; height:100%; overflow:hidden; width:calc(var(--stop,1) * 100%); transition:width .8s cubic-bezier(.22,1,.36,1)}
.pt-human .pt-run, .pt-clip .pt-run{position:relative; display:block; height:100%}
.pt-human .pt-run{width:100%; overflow:hidden}
.pt-clip .pt-run{width:calc(100% / max(var(--stop,1), .0001))}
.pt-run i{position:absolute; top:62%; left:-16px; width:13px; height:13px; margin-top:-6.5px; border-radius:50%; animation:ptgo 4.2s linear var(--d) infinite}
.pt-human i{background:var(--cream)} .pt-bot i{background:var(--coral); border-radius:2px; transform:rotate(45deg)}
@keyframes ptgo{to{left:100%}}
.pt-wall{position:absolute; right:0; top:6px; bottom:6px; width:4px; border-radius:2px; background:var(--coral); box-shadow:0 0 14px var(--coral); opacity:var(--wall,0); transition:opacity .4s ease}
.pt-panels{max-width:860px}
@media (prefers-reduced-motion: reduce){ .pt-run i{animation:none; left:calc(var(--d) * 20%)} }
@media (max-width:900px){ .pt-stages{grid-template-columns:repeat(2,1fr)} .pt-lane{height:44px} .pt-s{display:none}
  .pt:not(.sc-live) .pt-art{position:sticky; top:62px; z-index:2; background:var(--forest); margin:0 calc(-1 * clamp(18px,4vw,48px)); padding:8px clamp(18px,4vw,48px) 6px; box-shadow:0 16px 20px -16px rgba(0,0,0,.6)}
  .pt:not(.sc-live) .mp-panels > *{padding:24px 0 28px; margin:0; border-top:1px solid rgba(255,253,248,.16)} .pt:not(.sc-live) .mp-panels > :not(.on){opacity:.55} }

.ip-chap{background:var(--paper); padding:0 clamp(18px,4vw,48px) clamp(40px,5vw,72px)}
.ip-chap-in{width:min(1180px,100%); margin:0 auto; padding-top:clamp(28px,3vw,44px)}
.ip-chap .ip-k{color:#8A4A2C; margin:0 0 6px}
.ip-chap ol{list-style:none; margin:0; padding:0; columns:2; column-gap:clamp(28px,5vw,80px)}
@media (max-width:760px){ .ip-chap ol{columns:1} }
.ip-chap li{break-inside:avoid}
.ip-chap a{display:grid; grid-template-columns:44px 1fr auto; align-items:baseline; gap:12px; padding:11px 0; text-decoration:none; color:var(--forest); border-bottom:1px solid rgba(33,49,47,.12); font-size:16.5px; line-height:1.35; transition:color .2s}
.ip-chap a span{font-style:italic; font-size:22px; line-height:1; color:#A6472A; font-variant-numeric:tabular-nums; min-width:0; padding:0; letter-spacing:0}
.ip-chap a::after{content:'\2192'; color:#A6472A; opacity:0; transform:translateX(-6px); transition:opacity .2s, transform .2s}
.ip-chap a:hover{color:#A6472A} .ip-chap a:hover::after{opacity:1; transform:none}
.ip-read{padding:clamp(56px,7vw,96px) clamp(18px,4vw,48px) clamp(16px,2vw,24px)}
.ip-col{width:min(70ch,100%); margin:0 auto}
.ip-col .ip-sec{scroll-margin-top:84px}
.bd-p{font-size:16px; margin:14px 0 0}
.ip-ftoc{position:fixed; top:110px; left:clamp(16px,2.4vw,40px); width:clamp(200px,calc((100vw - 70ch) / 2 - 80px),260px); z-index:40; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s}
.ip-ftoc.show{opacity:1; visibility:visible}
@media (max-width:1319px){ .ip-ftoc{display:none} }
.ip-ftoc ol{list-style:none; margin:0; padding:0; border-left:1px solid rgba(33,49,47,.16)}
.ip-ftoc a{display:flex; gap:10px; padding:6px 0 6px 14px; margin-left:-1px; border-left:2px solid transparent; text-decoration:none; font-size:13.5px; line-height:1.3; color:rgba(33,49,47,.7)}
.ip-ftoc a span{font-size:11px; color:rgba(33,49,47,.6); min-width:16px}
.ip-ftoc a.on{color:var(--forest); border-left-color:var(--coral)}

/* parity widgets (tools.mjs): redesign styling around the live components' own markup hooks */
.xs{padding:clamp(56px,7vw,100px) 0}
.xs-in{width:min(1180px,calc(100% - 36px)); margin:0 auto}
.xs-h{font-weight:400; letter-spacing:-.02em; line-height:1.08; font-size:clamp(28px,3.4vw,46px); margin:.35em 0 0; max-width:22ch}
.xs-h em{font-style:italic; color:var(--rust)}
.xs-lead{max-width:62ch; margin:18px 0 0; font-size:18px; line-height:1.6}
.xs-lab{margin:0; font-size:var(--label); letter-spacing:var(--track); text-transform:uppercase; font-weight:600; opacity:.72}
.xs-foot{margin:14px 0 0; font-size:13px; line-height:1.5; opacity:.72}
.xs .ip-btn{align-self:flex-start; margin-top:20px}
.xs button{font:inherit; color:inherit}
/* light surfaces read the state colors darker; dark surfaces lighter (both used by the components' own scripts) */
.xs-est, .xs-quiz{--teal:#2E6B57; --amber:#8A5A16; --coral:#A6472A; --text-mute:rgba(33,49,47,.72)}
.xs-sim, .est-out, .vqz-result{--teal:#8FDCBB; --amber:#E8BC86; --coral:#FF9B78; --text-mute:rgba(255,253,248,.72)}
/* ---- quiz: a printed audit slip; the chosen answer gets circled in pen, the read prints at the foot ---- */
.xs-quiz{background:var(--forest); color:var(--cream); padding:clamp(56px,7vw,96px) 0}
.xs-quiz .ip-k{color:var(--headtan)}
.xs-quiz .xs-h{font-size:clamp(28px,3vw,42px); max-width:16ch}
.xs-quiz .xs-h em{color:var(--headtan)}
.xs-quiz .xs-in{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,5vw,80px); align-items:start}
.xs-quiz .xs-lead{font-size:17px; opacity:.86}
.vqz-head{position:sticky; top:110px}
.vqz-body{display:block; margin:0}
.vqz-slip{--ink:#1d2a28; --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace; position:relative; background:#FFFDF8; color:var(--ink); padding:30px clamp(22px,3vw,40px) 34px; transform:rotate(-.6deg); box-shadow:0 40px 70px -40px rgba(0,0,0,.75), 0 2px 0 rgba(0,0,0,.08);
  -webkit-mask:radial-gradient(circle 7px at 50% 0,transparent 98%,#000) 0 0/18px 51% repeat-x, radial-gradient(circle 7px at 50% 100%,transparent 98%,#000) 0 100%/18px 51% repeat-x;
  mask:radial-gradient(circle 7px at 50% 0,transparent 98%,#000) 0 0/18px 51% repeat-x, radial-gradient(circle 7px at 50% 100%,transparent 98%,#000) 0 100%/18px 51% repeat-x}
.vqz-sliphead{display:flex; justify-content:space-between; margin:0 0 6px; padding-bottom:12px; border-bottom:1px dashed rgba(29,42,40,.35); font:600 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:#8A4A2C}
.vqz-questions{display:block}
.vqz-q{display:grid; grid-template-columns:34px 1fr; gap:4px 6px; padding:18px 0; border-bottom:1px dashed rgba(29,42,40,.22)}
.vqz-qn{grid-row:1 / 3; font:600 12px/1.6 var(--mono); color:#8A4A2C}
.vqz-qtext{margin:0; font-size:17px; line-height:1.4}
.vqz-opts{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 0; margin-top:8px}
.vqz-opt{position:relative; cursor:pointer; background:none; border:0; padding:4px 10px; font-size:15.5px; color:rgba(29,42,40,.62); transition:color .2s}
.vqz-opt + .vqz-opt::before{content:'/'; position:absolute; left:-4px; color:rgba(29,42,40,.28); pointer-events:none}
.vqz-opt:hover{color:var(--ink)}
.vqz-opt[aria-pressed="true"]{color:var(--ink)}
.vqz-opt::after{content:''; position:absolute; inset:-5px -3px -4px -3px; pointer-events:none; background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M8 22C10 9 40 4 66 5s50 6 48 17-34 15-60 14S4 31 7 19 36 3 62 4' fill='none' stroke='%23C2532F' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  clip-path:inset(0 100% 0 0); transition:clip-path .45s cubic-bezier(.6,0,.3,1)}
.vqz-opt[aria-pressed="true"]::after{clip-path:inset(0 0 0 0)}
.vqz-opt:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.vqz-result{margin-top:22px; background:none; color:var(--ink); padding:0; min-height:0; border-radius:0; --teal:#2E6B57; --amber:#8A5A16; --coral:#A6472A; --text-mute:rgba(29,42,40,.7)}
.vqz-empty .xs-lab, .vqz-verdict .xs-lab{font:600 11px/1 var(--mono); letter-spacing:.14em; color:#8A4A2C; opacity:1}
.vqz-empty p:last-child{margin:10px 0 0; font-size:15px; line-height:1.5; color:rgba(29,42,40,.7)}
.vqz-meterhead{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.vqz-score{font:600 34px/1 var(--mono); font-variant-numeric:tabular-nums}
.vqz-meter{margin-top:10px; height:12px; background:repeating-linear-gradient(90deg, rgba(29,42,40,.14) 0 6px, transparent 6px 9px); border-radius:0; overflow:hidden}
.vqz-fill{height:100%; width:0; -webkit-mask:repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 9px); mask:repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 9px); transition:width .6s cubic-bezier(.2,.7,.2,1), background .4s}
.vqz-vtitle{margin:18px 0 0; font-weight:400; font-size:22px; line-height:1.25; display:inline-block; padding:6px 12px; border:2px solid #A6472A; color:#A6472A; transform:rotate(-1.5deg); text-transform:none}
.vqz-vbody{margin:12px 0 0; font-size:15.5px; line-height:1.6; color:rgba(29,42,40,.82)}
.vqz-focus{display:inline-block; margin-top:10px; color:var(--ink); text-decoration-color:#C2532F; text-underline-offset:4px}
.vqz-cta-row{margin-top:18px; padding-top:16px; border-top:1px dashed rgba(29,42,40,.3); display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px}
.vqz-cta-row .ip-btn{margin-top:0; background:#FF8B64; color:#21312F}
.est-out .ip-btn{background:#FF8B64; color:#21312F}
.vqz-cta-row .xs-foot{margin:0; color:rgba(29,42,40,.7)}
/* ---- estimator: a sentence you finish; the numbers sit on one rule, no slab ---- */
.xs-est{background:var(--paper)}
.est{margin-top:clamp(26px,3vw,40px); display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr); gap:clamp(28px,5vw,80px); align-items:start}
.est-inputs{display:block; border-top:1px solid rgba(33,49,47,.16)}
.est-group{padding:20px 0 18px; border-bottom:1px solid rgba(33,49,47,.16)}
.est-group .xs-lab{color:#8A4A2C; opacity:1}
.est-opts{position:relative; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 0; margin-top:10px; padding-bottom:26px}
.est-opt{cursor:pointer; background:none; border:0; padding:2px 16px 4px 0; text-align:left; color:rgba(33,49,47,.4); transition:color .2s}
.est-opt + .est-opt{padding-left:16px; border-left:1px solid rgba(33,49,47,.18)}
.est-opt b{display:inline; font-weight:400; font-size:clamp(20px,1.9vw,26px); letter-spacing:-.01em; background:linear-gradient(var(--coral,#A6472A),var(--coral,#A6472A)) no-repeat 0 100%/0 2px; padding-bottom:3px; transition:background-size .35s ease}
.est-opt:hover{color:rgba(33,49,47,.75)}
.est-opt[aria-pressed="true"]{color:var(--forest)}
.est-opt[aria-pressed="true"] b{background-size:100% 2px}
.est-opt i{display:none; position:absolute; left:0; bottom:0; font-size:14px; font-style:italic; color:rgba(33,49,47,.76)}
.est-opt[aria-pressed="true"] i{display:block}
.est-opt:focus-visible{outline:2px solid var(--forest); outline-offset:3px}
.est-out{position:sticky; top:110px; background:none; color:var(--forest); border-radius:0; padding:0 0 0 clamp(20px,2.4vw,32px); border-left:2px solid var(--coral,#A6472A); display:flex; flex-direction:column; --teal:#2E6B57; --amber:#8A5A16; --coral:#A6472A; --text-mute:rgba(33,49,47,.72)}
.est-out > .xs-lab{color:#8A4A2C; opacity:1}
.est-metric{margin-top:22px}
.est-val{margin:6px 0 0; font-size:clamp(34px,3.4vw,52px); line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.est-metric-sub{margin:6px 0 0; font-size:14px; line-height:1.45; opacity:.75}
.est-note{margin:20px 0 0; font-size:15px; line-height:1.6; opacity:.85; min-height:72px}
/* ---- simulator: a phone whose answer rewrites; the signals are switches, visibility is the signal bars ---- */
.xs-sim{background:var(--forest); color:var(--cream)}
.xs-sim .xs-h em{color:var(--headtan)}
.vsim{margin-top:clamp(26px,3vw,40px); display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:clamp(28px,5vw,90px); align-items:center}
.vs-left{display:block; border-top:1px solid rgba(255,253,248,.16)}
.vs-left .xs-lab{margin:18px 0 6px; color:var(--headtan); opacity:1}
.vs-sig{display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px; text-align:left; width:100%; cursor:pointer; background:none; border:0; border-bottom:1px solid rgba(255,253,248,.16); border-radius:0; padding:18px 0}
.vs-sig-txt{grid-column:1; grid-row:1}
.vs-led{grid-column:2; grid-row:1; position:relative; width:44px; height:26px; border-radius:13px; background:rgba(255,253,248,.18); transition:background .25s}
.vs-led::after{content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--cream); transition:transform .25s cubic-bezier(.3,.7,.2,1)}
.vs-sig[aria-pressed="true"] .vs-led{background:var(--coral,#FF9B78); box-shadow:none}
.vs-sig[aria-pressed="true"] .vs-led::after{transform:translateX(18px)}
.vs-sig:hover .vs-sig-txt b{color:#fff}
.vs-sig:focus-visible{outline:2px solid var(--cream); outline-offset:4px}
.vs-sig-txt b{display:block; font-weight:400; font-size:clamp(20px,1.8vw,24px); letter-spacing:-.01em}
.vs-sig-txt i{display:block; font-style:normal; font-size:14px; opacity:.66; margin-top:3px}
.vs-right{display:flex; flex-direction:column; align-items:center; background:none; padding:0}
.vs-phone{width:100%; max-width:320px; aspect-ratio:9/15.5; box-sizing:border-box; border-radius:44px; background:#0f1716; padding:12px; box-shadow:0 50px 90px -40px rgba(0,0,0,.8), inset 0 0 0 2px rgba(255,255,255,.08)}
.vs-screen{height:100%; display:flex; flex-direction:column; background:#fff; color:#1f1f1f; border-radius:32px; overflow:hidden; --teal:#2E6B57; --amber:#8A5A16; --coral:#A6472A; --text-mute:rgba(31,31,31,.72)}
.vs-status{display:flex; justify-content:space-between; align-items:center; padding:14px 22px 6px; font:600 12px/1 -apple-system,'Segoe UI',Roboto,Arial,sans-serif}
.vs-meter{width:28px; height:12px; margin:0; border-radius:0; background:rgba(0,0,0,.14); overflow:hidden;
  -webkit-mask:linear-gradient(#000,#000) 0 100%/5px 30% no-repeat, linear-gradient(#000,#000) 7px 100%/5px 55% no-repeat, linear-gradient(#000,#000) 14px 100%/5px 78% no-repeat, linear-gradient(#000,#000) 21px 100%/5px 100% no-repeat;
  mask:linear-gradient(#000,#000) 0 100%/5px 30% no-repeat, linear-gradient(#000,#000) 7px 100%/5px 55% no-repeat, linear-gradient(#000,#000) 14px 100%/5px 78% no-repeat, linear-gradient(#000,#000) 21px 100%/5px 100% no-repeat}
.vs-fill{height:100%; width:0; transition:width .6s cubic-bezier(.2,.7,.2,1), background .4s}
.vs-meterhead{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:14px 18px 10px; border-bottom:1px solid #eceff1; font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif}
.vs-meterhead .xs-lab{font-size:11px; letter-spacing:.08em; opacity:.6}
.vs-pct{font-size:22px; font-weight:600; font-variant-numeric:tabular-nums; transition:color .3s}
.vs-answerbox{flex:1; margin:0; border:0; border-radius:0; padding:16px 16px 0; display:flex; flex-direction:column; gap:8px; font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif}
.vs-ans-bar{display:flex; align-items:center; gap:8px; padding:0; border:0}
.vs-ans-bar .xs-lab{font-size:11px; letter-spacing:.06em; opacity:.6}
.vs-ans-bar::before{content:''; width:18px; height:18px; border-radius:50%; background:conic-gradient(#C2532F,#E8BC86,#2E6B57,#C2532F)}
.vs-answer{margin:0; padding:12px 14px; border-radius:4px 16px 16px 16px; background:#f1f3f4; font-size:14.5px; line-height:1.5; min-height:110px; font-style:normal}
.vs-cited{align-self:flex-start; font-size:11.5px; text-align:left; transition:color .3s}
.vs-win .vs-answer{background:#e7f3ee}
.vs-cta{align-self:center; margin:0 0 16px !important}
.vs-screen .vs-cta{font-size:12px}
.vs-cta[hidden]{display:none}
.vs-right > .xs-foot{text-align:center}
@media (max-width:900px){ .est, .vsim, .xs-quiz .xs-in{grid-template-columns:1fr} .vqz-head, .est-out{position:static} .vqz-slip{transform:none} .est-out{padding-left:18px} }
@media (prefers-reduced-motion: reduce){ .vqz-fill, .vs-fill{transition:none} }
.rv{background:var(--forest); color:var(--cream); padding:clamp(56px,7vw,100px) 0 clamp(48px,6vw,84px)}
.rv-wrap{width:min(1180px,calc(100% - 36px)); margin:0 auto}
.rv-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:18px 40px; margin-bottom:clamp(26px,3vw,40px)}
.rv-head .eyebrow{opacity:.62}
.rv-head h2{font-weight:400; letter-spacing:-.02em; line-height:1.08; font-size:clamp(28px,3.4vw,46px); margin:0}
.rv-head h2 em{font-style:italic; color:var(--tan)}
.rv-line{display:flex; align-items:baseline; gap:12px; margin:0 0 8px; flex-wrap:wrap}
.rv-num{font-size:clamp(34px,3.4vw,44px); font-weight:300; letter-spacing:-.02em; line-height:1}
.rv-stars{color:#F4B400; letter-spacing:2px; margin:0}
.rv-sub{font-size:15px; color:rgba(255,253,248,.82)}
.rv-link{color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,253,248,.45); padding-bottom:3px; display:inline-flex; gap:8px; font-size:14px}
.rv-link:hover{border-bottom-color:#fff}
.rv-board{position:relative}
.rv-track{list-style:none; margin:0 -14px; padding:22px 14px 26px; scroll-padding-inline:14px; display:flex; gap:clamp(18px,2.4vw,34px); overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; contain:paint}
.rv-track::-webkit-scrollbar{display:none}
.rv-note{flex:0 0 clamp(270px,28vw,390px); scroll-snap-align:start}
@media (max-width:640px){ .rv-note{flex-basis:min(80vw,320px)} }
.rv-note figure{position:relative; margin:0; min-height:250px; padding:34px 24px 22px; display:flex; flex-direction:column;
  background:#FCEBA6; color:#21312F; transform:rotate(-2deg); box-shadow:0 2px 0 rgba(0,0,0,.04), 0 22px 28px -18px rgba(0,0,0,.55);
  transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s cubic-bezier(.22,1,.36,1)}
.rv-note:nth-child(3n+2) figure{background:#F8D9C6; transform:rotate(1.6deg)}
.rv-note:nth-child(3n+3) figure{background:#DCE8D2; transform:rotate(-.8deg)}
.rv-note figure::before{content:''; position:absolute; top:-11px; left:50%; width:86px; height:24px; margin-left:-43px;
  background:rgba(255,253,248,.55); box-shadow:0 1px 2px rgba(0,0,0,.12); transform:rotate(-3deg)}
.rv-note:hover figure, .rv-note:focus-within figure{transform:rotate(0) translateY(-6px); box-shadow:0 2px 0 rgba(0,0,0,.04), 0 34px 40px -20px rgba(0,0,0,.6)}
.rv-note .rv-stars{color:#7A5000; font-size:13px; margin-bottom:12px}
.rv-q{margin:0 0 14px; flex:1; font-size:16px; line-height:1.42; font-style:italic}
.rv-q p{margin:0}
.rv-q p + p{margin-top:.6em}
/* the whole quote is clamped (a review can have several paragraphs), with a soft fade at the cut */
.rv-q.clamped{max-height:calc(1.42em * 8); overflow:hidden; -webkit-mask-image:linear-gradient(#000 72%, transparent); mask-image:linear-gradient(#000 72%, transparent)}
@media (max-width:640px){ .rv-q.clamped{max-height:calc(1.42em * 10)} }   /* cut only the genuinely long ones */
.rv-more{align-self:flex-start; background:none; border:0; padding:0 0 2px; margin:0 0 14px; cursor:pointer; font:inherit; font-size:14px; color:#21312F;
  border-bottom:1px solid rgba(33,49,47,.5)}
.rv-more:focus-visible{outline:2px solid #21312F; outline-offset:3px}
.rv-note figcaption{display:flex; flex-direction:column; gap:2px; font-size:14px}
.rv-note figcaption b{font-weight:600; font-size:15px}
.rv-note figcaption span{color:rgba(33,49,47,.78); font-size:13px}
.rv-nav{display:flex; gap:10px; justify-content:flex-end; margin-top:6px}
.rv-nav[hidden]{display:none}
.rv-arrow{width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,253,248,.35); background:transparent; color:var(--cream); font-size:18px; cursor:pointer}
.rv-arrow:hover{background:rgba(255,253,248,.1)}
.rv-arrow:disabled{opacity:.35; cursor:default}
.rv-arrow:focus-visible{outline:2px solid #fff; outline-offset:2px}
@media (prefers-reduced-motion: reduce){ .rv-note figure{transition:none} }
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

.rdf{background:var(--forest); color:var(--cream); padding:clamp(56px,7vw,90px) clamp(18px,4vw,48px) 30px; font-size:15px}
.rdf-in{width:min(1180px,100%); margin:0 auto}
.rdf-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:34px}
@media (max-width:1020px){ .rdf-grid{grid-template-columns:1fr 1fr 1fr} .rdf-brand{grid-column:1 / -1} }
@media (max-width:620px){ .rdf-grid{grid-template-columns:1fr 1fr} }
.rdf-h{display:block; font-size:var(--label); letter-spacing:var(--track); text-transform:uppercase; font-weight:600; color:var(--headtan); margin:0 0 12px}
.rdf-grid a{display:block; color:rgba(255,253,248,.82); text-decoration:none; padding:4px 0; line-height:1.4}
.rdf-grid a:hover{color:var(--cream); text-decoration:underline; text-underline-offset:3px}
.rdf-brand img{border-radius:12px}
.rdf-nap{margin:16px 0 0; line-height:1.8; color:rgba(255,253,248,.78)}
.rdf-nap a{display:inline !important; padding:0 !important}
.rdf-soc{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}
.rdf-soc a{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid rgba(255,253,248,.28); border-radius:50%; padding:0}
.rdf-soc svg{width:15px; height:15px; fill:currentColor}
.rdf-badge{font-size:10px; letter-spacing:1px; border:1px solid rgba(221,168,138,.6); color:var(--headtan); border-radius:999px; padding:1px 7px; margin-left:8px; font-weight:600}
.rdf-base{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:44px; padding-top:20px; border-top:1px solid rgba(255,253,248,.16); font-size:13px; color:rgba(255,253,248,.72)}
.rdf-base a{color:inherit}