@font-face{font-family:"Syne Wordmark";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/Syne-700.woff2) format("woff2")}
@font-face{font-family:"Rethink Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/RethinkSans-400.woff2) format("woff2")}
@font-face{font-family:"Rethink Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/RethinkSans-700.woff2) format("woff2")}
@font-face{font-family:"Rethink Sans";font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/RethinkSans-800.woff2) format("woff2")}
:root{
  --paper:#F6F0E8; --ink:#15120D; --ink-2:#463C2B; --ink-3:#5E5340; --line:#DED4BF;
  --accent:#E91E30; --accent-b:#FF3A4B; --accent-d:#BE1A2C; --gold:#F69E18;   /* sampled from the reference poster's amber field */
  --sans:"Rethink Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --shadow-ink:#15120D;                              /* hard offset-shadow — black, like the poster's drop shadows */
  --shadow:6px 6px 0 var(--shadow-ink); --shadow-sm:4px 4px 0 var(--shadow-ink);
  --edge:clamp(1.3rem,4vw,2.6rem);
  --ratio:1.42; --fs-body:1rem;
  --fs-lead:calc(var(--fs-body)*var(--ratio)); --fs-h3:calc(var(--fs-lead)*var(--ratio));
  --fs-h2:calc(var(--fs-h3)*var(--ratio)); --fs-h1:calc(var(--fs-h2)*var(--ratio));
  --fs-hero:calc(var(--fs-h1)*var(--ratio)); --fs-label:calc(var(--fs-body)/var(--ratio));

  /* the type scale — eight steps, nothing else is a font-size */
  --t-cap:.7rem; --t-small:.92rem; --t-body:1rem; --t-h3:1.15rem;
  --t-lead:clamp(1rem,1rem + .5vw,1.42rem); --t-num:2rem;
  --t-h2:clamp(2.02rem,1.2rem + 2.8vw,2.86rem); --t-h1:clamp(2.86rem,1.5rem + 3.6vw,5rem);
  /* the spacing scale — six steps, nothing else is a margin, padding or gap */
  --s1:.25rem; --s2:.5rem; --s3:1rem; --s4:1.5rem; --s5:2.5rem; --s6:4rem;
  --measure:64ch;--measure-sm:56ch;--measure-xs:48ch;--w-lg:34rem;--w-md:42rem;--w-card:30rem;--w-col:62rem}
*{box-sizing:border-box;margin:0}
/* Canvas = surface, same as topbar/footer: rubber-band overscroll reveals bar-colored
   canvas, not the gold body — and overscroll-behavior kills the bounce outright where
   supported (the gold stays on body, painting the whole document as before). */
html{scroll-behavior:smooth;scrollbar-gutter:stable;background:var(--paper);overscroll-behavior:none}
body{background:var(--gold);color:var(--ink);font-family:var(--sans);font-size:var(--fs-body);line-height:1.5;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
svg{display:block}
[hidden]{display:none!important}
a{color:inherit}
img,svg{max-width:100%}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--edge);width:100%}
/* measure keeps the wrap full-width (so content shares the hero's left edge) and
   caps each text child to a readable 64ch; grid-like children stay full-width. */
.measure>*{max-width:var(--measure)}
.measure>.cards,.measure>.cmp-wrap,.measure>.grid-2,.measure>.grid-3,.measure>.figs{max-width:none}
.center{max-width:760px;margin:0 auto;text-align:center}
.center-tease{max-width:var(--measure);margin:0 auto;text-align:center}
.center-tease h1{margin:0 0 var(--s3)}
.center-tease .lede{margin:0 auto;max-width:var(--measure-xs)}
.center-tease .btns{justify-content:center;margin-top:var(--s5)}
.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}
.skip{position:absolute;left:.6rem;top:-4rem;z-index:100;background:var(--ink);color:var(--paper);padding:var(--s2) var(--s3);font-weight:700;text-decoration:none;transition:top .15s}
.skip:focus{top:.6rem}
a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.mt{margin-top:var(--s4)}
cite{display:block;font-style:normal;color:var(--ink-2);margin-top:var(--s2);font-weight:700}

/* type */
h1{font-weight:800;letter-spacing:-.04em;line-height:.98}
h2{font-weight:800;letter-spacing:-.035em;line-height:1.04}
h3{font-weight:800;letter-spacing:-.015em}
p{line-height:1.55}
.lede{color:var(--ink-2);font-weight:400;font-size:var(--t-lead);line-height:1.5;margin-top:var(--s2)}
b{font-weight:700}

/* cell marks */
.hx{fill:none;stroke:var(--ink);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:miter}
.hx.book{fill:var(--accent);stroke:var(--ink)}
.hx-wave{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:miter}
.hx-live{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:miter;transform-box:fill-box;transform-origin:center;animation:wave 2.4s ease-out infinite}
@keyframes wave{0%{transform:scale(0);opacity:0}12%{opacity:1}100%{transform:scale(1);opacity:0}}
@media(prefers-reduced-motion:reduce){.hx-live{animation:none;opacity:.4}html{scroll-behavior:auto}}
.hmark{align-self:flex-start}
.hmark--net{width:auto;height:39px}


/* buttons */
.btn{font-family:var(--sans);font-weight:700;font-size:var(--t-body);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);padding:var(--s3) var(--s4);border:2px solid transparent;white-space:nowrap;text-decoration:none;transition:transform .1s,filter .15s,background .15s,box-shadow .1s,color .15s;min-height:48px}
.btn--primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--accent-b)}
.btn--primary:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--shadow-ink)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--ghost:active{transform:translate(1px,1px)}
.btn--text{border-bottom:2px solid var(--accent)}

.btn--lg{padding:var(--s3) var(--s4);font-size:var(--t-h3)}
.btn--onaccent{background:var(--paper);color:var(--ink);box-shadow:4px 4px 0 var(--accent-d)}
.btn--onaccent:hover{background:#fff}
.btn--onaccent:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--accent-d)}
.btn--onaccent-ghost{background:transparent;color:#fff;border-color:#fff}
.btn--onaccent-ghost:hover{background:rgba(255,255,255,.14)}
.btn--ink{background:var(--ink);color:var(--paper);box-shadow:var(--shadow-sm)}
.btn--ink:hover{background:var(--shadow-ink)}
.btn--ink:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--accent)}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.btn.full{width:100%}
.btns{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
@media(max-width:520px){.btns{flex-direction:column;align-items:stretch}.btns .btn{width:100%}}

/* header */
.topbar{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.topbar--flow{position:static}
.nav-in{display:flex;align-items:center;gap:clamp(.8rem,2vw,1.6rem);height:64px}
.brand{display:flex;align-items:center;gap:var(--s2);text-decoration:none;font-weight:800;letter-spacing:-.03em}
.brand .logo{width:26px;height:30px}
.brand-name{font-size:var(--t-body);font-family:"Syne Wordmark","Syne",ui-sans-serif,sans-serif;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.nav-links{display:flex;gap:var(--s4);font-weight:700;font-size:var(--t-small);color:var(--ink-2)}
.nav-links a{text-decoration:none}
.nav-links a[aria-current=page]{color:var(--ink);border-bottom:2px solid var(--accent)}
.nav-sp{margin-left:auto}
.topbar .btn{min-height:44px;padding:var(--s2) var(--s3);font-size:var(--t-small)}
.nav-toggle{display:none;background:none;border:0;font-size:var(--t-lead);cursor:pointer;color:var(--ink);margin-left:auto;line-height:1;min-width:44px;min-height:44px}
/* Product dropdown */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop-btn{font:inherit;font-weight:700;font-size:var(--t-small);color:var(--ink-2);background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:var(--s1);padding:0}
.nav-drop-btn:hover{color:var(--ink)}
.nd-car{width:11px;height:auto;flex:none;transition:transform .15s}
.nav-drop.open .nd-car{transform:rotate(180deg)}
.nav-menu{position:absolute;top:calc(100% + .85rem);left:0;min-width:17rem;padding:var(--s1);display:none;flex-direction:column;z-index:60}
.nav-drop.open .nav-menu{display:flex}
.nav-menu a{display:flex;align-items:flex-start;gap:var(--s2);padding:var(--s2) var(--s2);text-decoration:none;border:0}
.nav-menu a:hover{background:var(--paper)}
.nm-ico{flex:none;width:26px;display:flex;align-items:center;justify-content:center;margin-top:var(--s1)}
.nm-mk{overflow:visible}
.nm-mk--net{height:22px}

.nm-tx{display:flex;flex-direction:column;gap:var(--s1);min-width:0}
.nm-t{font-weight:700;color:var(--ink);font-size:var(--t-small)}
.nm-d{color:var(--ink-2)}
.nm-more{border-top:1px solid var(--line);margin-top:var(--s1);padding-top:var(--s2)}
.nav-menu .nm-more{padding-left:calc(26px + 1.25rem)}
.nm-tag{color:var(--accent);border:1px solid var(--accent);padding:var(--s1) var(--s1);margin-left:var(--s2);vertical-align:middle}
@media(min-width:761px){
  .nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu{display:flex}
  /* mouse-safe bridge — covers the 14px gap so hover doesn't drop crossing from trigger to menu */
  .nav-menu::before{content:"";position:absolute;left:0;right:0;top:-.85rem;height:.85rem}
}
@media(max-width:760px){
  .nav-toggle{display:block}
  .nav-links{position:absolute;top:64px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:.5rem var(--edge);display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:var(--s3) 0;border-bottom:1px solid var(--line)}
  .nav-sp{display:none}
  .nav-cta-2{display:none}
  .nav-drop{display:block}
  .nav-drop-btn{width:100%;justify-content:space-between;padding:var(--s3) 0;border-bottom:1px solid var(--line);font-size:var(--t-body);color:var(--ink)}
  .nav-menu{position:static;padding:var(--s1) 0 var(--s2) var(--s3);min-width:0}
  .nav-links .nav-menu a{padding:var(--s2) 0;border-bottom:0}
}

html{overflow-x:hidden}  /* glyph bleed never becomes a scrollbar. NOT clip (clip on html forbids ALL root scrolling) and NOT on body (body overflow propagates to the viewport when html is visible) — hidden on html keeps the root scrollable vertically */
/* sections — each a full-viewport moment (§12). One idea, generous space. */
.section{padding:clamp(3.5rem,8vh,5.5rem) 0}
.section{background-color:var(--gold)}
/* amber-field texture: full-bleed paper grain + an edge-vignetted schematic grid (lighter than the field). */
body,.section{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'160'%20height%3D'160'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.9'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'saturate'%20values%3D'0'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23n)'%20opacity%3D'0.14'%2F%3E%3C%2Fsvg%3E"),radial-gradient(ellipse 76% 78% at 50% 44%,var(--gold) 30%,rgba(246,158,24,0) 88%),url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'340'%20height%3D'340'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23FBF5EA'%20stroke-width%3D'1'%3E%3Cline%20x1%3D'0'%20y1%3D'54'%20x2%3D'340'%20y2%3D'54'%20opacity%3D'0.20'%2F%3E%3Cline%20x1%3D'0'%20y1%3D'188'%20x2%3D'340'%20y2%3D'188'%20opacity%3D'0.12'%20stroke-dasharray%3D'7%2012'%2F%3E%3Cline%20x1%3D'0'%20y1%3D'286'%20x2%3D'340'%20y2%3D'286'%20opacity%3D'0.20'%2F%3E%3Cline%20x1%3D'70'%20y1%3D'0'%20x2%3D'70'%20y2%3D'340'%20opacity%3D'0.20'%2F%3E%3Cline%20x1%3D'222'%20y1%3D'0'%20x2%3D'222'%20y2%3D'340'%20opacity%3D'0.12'%20stroke-dasharray%3D'5%2011'%2F%3E%3Cline%20x1%3D'306'%20y1%3D'0'%20x2%3D'306'%20y2%3D'340'%20opacity%3D'0.20'%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D'%23FBF5EA'%20stroke-width%3D'1'%20opacity%3D'0.40'%3E%3Cpath%20d%3D'M216%2054h12M222%2048v12'%2F%3E%3Cpath%20d%3D'M64%20286h12M70%20280v12'%2F%3E%3C%2Fg%3E%3Cg%20fill%3D'%23FBF5EA'%20opacity%3D'0.32'%3E%3Ccircle%20cx%3D'306'%20cy%3D'188'%20r%3D'1.4'%2F%3E%3Ccircle%20cx%3D'70'%20cy%3D'54'%20r%3D'1.4'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:180px 180px,100% 100%,340px 340px;background-repeat:repeat,no-repeat,repeat;background-position:top left,center,top left}
/* NOTE: no background-attachment:fixed — a fixed layer disables composited scrolling
   and repaints the whole viewport's background stack every scroll frame (the lag). */
.section--hero{border-top:0}
/* poster glyphs — one massive cream character per section (data-glyph), anchored
   bottom-right, spilling past the boundary into the next stage, always under content */
main{overflow:clip}
.section--glyph{position:relative;overflow-x:clip}  /* the glyph bleeds to the section edge, never past it — keeps mobile layout viewport at device width */
.section--glyph[data-glyph]::after{content:attr(data-glyph);content:attr(data-glyph) / "";position:absolute;right:0;top:50%;transform:translate(30%,-50%);z-index:1;font-weight:800;line-height:1;font-size:clamp(44rem,92vw,110rem);color:rgba(251,245,234,.35);pointer-events:none}
.section>.wrap{position:relative;z-index:2}  /* every section's content rides above every glyph */
/* glyph sections alternate sides by position: every second one goes left (a page never counts) */
.section--glyph--l[data-glyph]::after,main>.section--glyph:nth-child(even of .section--glyph)[data-glyph]::after{right:auto;left:0;transform:translate(-30%,-50%)}
.section--glyph--xl[data-glyph]::after{font-size:clamp(54rem,112vw,132rem);rotate:-10deg}
/* the hero's glyph is drawn, not typed — a receiver behind the player */
.hero-glyph{position:absolute;left:-7rem;top:50%;transform:translateY(-52%) rotate(14deg) scaleX(-1);width:clamp(40rem,60vw,68rem);height:auto;z-index:1;color:rgba(251,245,234,.35);pointer-events:none}
.section-head{max-width:var(--measure);margin-bottom:clamp(2.2rem,5vh,3.6rem)}
[id]{scroll-margin-top:var(--s6)}
@media(min-width:760px){
  .section{min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);align-content:center;padding:clamp(4.5rem,10vh,8rem) 0}
  .section--hero{min-height:calc(100svh - 65px)}
}

/* hero */
.hero{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,3.5vw,3.5rem);align-items:center;width:100%}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:var(--s5)}}
/* hero copy — 3 proximity groups: promise (tight) · action · trust (separated) */
.hero-copy h1,.hero-copy h2{margin-bottom:var(--s3)}
.hero-copy .lede{max-width:var(--measure-xs);margin-top:0}
.hero-copy .btns{margin-top:clamp(2rem,3.5vh,2.8rem)}
.hero-copy .ticks{margin-top:clamp(1.4rem,2.5vh,2rem);margin-bottom:0}
.hero-copy .risk{margin-top:var(--s3)}
.hero-copy .trust{margin-top:clamp(2rem,3.5vh,2.8rem)}
.hero-copy .hero-trust{margin-top:var(--s3)}
.hero-trust{color:var(--ink-2);font-size:var(--t-body);line-height:1.5;max-width:46ch}
.hero-trust strong{color:var(--ink);font-weight:800}
.hero-trust-src{color:var(--ink-3);white-space:nowrap}
.risk{display:flex;gap:var(--s2);align-items:center;color:var(--ink-2);margin-top:var(--s3);line-height:1.4}
.trust{margin-top:var(--s4);border-top:1px solid var(--line);padding-top:var(--s4);max-width:52ch;color:var(--ink-2)}
.trust-n{color:var(--ink);font-variant-numeric:tabular-nums}
.ticks{list-style:none;display:grid;gap:var(--s2);margin:var(--s3) 0}
.ticks li{padding-left:var(--s4);position:relative;color:var(--ink-2)}
.ticks li:before{content:"";position:absolute;left:0;top:.4em;width:.66rem;height:.76rem;background:var(--accent);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.ticks--stack{grid-template-columns:1fr 1fr;gap:var(--s2) var(--s5);margin:var(--s4) 0 0}
.offer-risk{margin-top:var(--s4);color:var(--ink-2)}
.pricing-top{padding-top:clamp(1.6rem,3.5vh,2.6rem)}
.pricing-top h1{line-height:1.05;margin:0 0 var(--s2)}
.pricing-top .lede{margin:0 0 clamp(1.2rem,2.4vh,1.8rem);max-width:var(--measure-sm)}
@media (max-width:700px){.ticks--stack{grid-template-columns:1fr}}

/* native scheduler — radio chips; works without JS (UK wall times), JS localises labels */
.sched{border:0;margin:0 0 var(--s3);padding:0}
.sched legend{font-weight:800;margin-bottom:var(--s2)}
.sched-tz{font-weight:400;color:var(--ink-2)}
.sched-day{margin:var(--s2) 0}
.sched-d{display:block;margin-bottom:var(--s1);font-size:var(--t-cap);font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-2)}
.slots{display:flex;gap:var(--s2);flex-wrap:wrap}
.slot{position:relative}
.slot input{position:absolute;inset:0;opacity:0;pointer-events:none}
.slot span{font-variant-numeric:tabular-nums;min-width:3.7rem;text-align:center}
/* the booking wizard — one question at a time, in a box that never changes size.
   All step views overlay in one grid cell, so the box is exactly as tall as the
   tallest view at every viewport — nothing below it ever moves. Hidden = invisible
   but still in layout (visibility, never display) for anything that swaps or appears. */
.bw-steps{display:grid}
.bw-step{grid-area:1/1}
.bw-step[hidden]{display:block!important;visibility:hidden}
.bw-q{margin-bottom:var(--s3)}
.bw-days{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.slot--day .sched-d{display:block;margin:0;padding:var(--s2) var(--s2);border:2px solid var(--ink);cursor:pointer;background:transparent;text-transform:uppercase;font-size:var(--t-cap);font-weight:700;letter-spacing:.03em;color:var(--ink);text-align:center}
.slot--day input:checked+.sched-d{background:var(--ink);color:var(--paper);box-shadow:3px 3px 0 var(--ink)}
.bw .sched-days{display:grid}
.bw .sched-day{grid-area:1/1;visibility:hidden;margin:0}
.bw .sched-day.is-on{visibility:visible}
.bw [data-bw-book]{visibility:hidden;margin-top:var(--s3)}
.bw .bw-step:has(input[name="when"]:checked) [data-bw-book]{visibility:visible}
.bw-crumb{display:flex;justify-content:space-between;gap:var(--s3);align-items:center;width:100%;border:2px solid var(--ink);background:transparent;padding:var(--s2) var(--s3);margin-bottom:var(--s2);font:inherit;font-weight:700;font-size:var(--t-small);cursor:pointer;text-align:left}
.bw-crumb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bw-crumb i{font-style:normal;font-size:var(--t-cap);color:var(--accent-d);text-decoration:underline;text-underline-offset:2px;flex:none}

/* hero visual — the after-state: a party booked & synced (product-in-use, passive proof) */
.hero-art{display:grid;justify-items:center;align-content:center}
.hero-art .cp{justify-self:center}

/* form */
.field{display:grid;gap:var(--s2);margin-bottom:var(--s2)}

.field input,.field select{min-width:0}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2315120D' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center;background-size:.75rem;cursor:pointer}
.ack{display:flex;gap:var(--s2);align-items:flex-start;margin:var(--s3) 0 var(--s3);font-size:var(--t-small);line-height:1.45;color:var(--ink-2);cursor:pointer}
.ack input{width:1.15rem;height:1.15rem;margin-top:var(--s1);accent-color:var(--accent);flex:none}
.field input::placeholder{color:var(--ink-3)}

.field-err{min-height:1.1rem;color:var(--ink);font-weight:700;margin-top:var(--s1);line-height:1.2}
.field-err.show::before{content:"⚠ ";}
.field input.invalid{border-color:var(--ink);box-shadow:inset 3px 0 0 var(--ink)}
.panel{padding:var(--s4);width:100%;max-width:25rem;justify-self:end}
.panel h2{letter-spacing:-.01em;margin-bottom:var(--s3)}
.micro{color:var(--ink-2);margin-top:var(--s3);line-height:1.45}
.micro cite{display:inline;margin:0}
.form-ok{margin:var(--s3) 0;padding:var(--s3) var(--s3)}

.form-ok--float{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);margin:0;z-index:60;border-color:var(--accent);box-shadow:4px 4px 0 var(--ink);max-width:min(92vw,34rem)}

/* booked-result rows — shared by the call player's Booked card */
.mock-rows>div{display:flex;justify-content:space-between;gap:var(--s3);align-items:center;padding:var(--s2) 0;border-bottom:1px solid var(--line)}
.mock-rows>div:last-child{border-bottom:0;padding-bottom:0}

.mock-rows dd{font-weight:700;font-size:var(--t-body);text-align:right}
.facet-cap{display:block;margin-bottom:var(--s2)}

.qlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s4)}
.qrow-head{display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline;margin-bottom:var(--s2)}
.qrow-q{font-size:var(--t-h3);color:var(--ink);line-height:1.3}
.qrow-n{font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.qbar{height:8px;background:var(--line);overflow:hidden}
.qbar>span{display:block;height:100%;background:var(--accent);transform:scaleX(var(--p,1));transform-origin:left}
@media (prefers-reduced-motion:no-preference){.qpanel.is-in .qbar>span{animation:qgrow .85s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*70ms)}}
@keyframes qgrow{from{transform:scaleX(0)}}

/* call player — tight, mock-style: header + transcript + small controls + booked summary */
.cp{max-width:38rem;margin:0 auto;width:100%}
/* the demo IS the hero object — heavier poster shadow so it visibly leads the frame */

/* one widget, one fixed-height body — recorded & live fill it IDENTICALLY (no shift); Booked appears at the booking */
.cp-body{position:relative;height:32rem;overflow:hidden}
.cp-body>.cp-panel{position:absolute;inset:0;display:flex;flex-direction:column;min-width:0;min-height:0}
.cp-body>.cp-panel.cp-panel--hidden{display:none}
.cp-head{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s3);border-bottom:1px solid var(--line)}
.cp-ico{flex:none;overflow:visible}
.cp-headhex{flex:none;display:flex}
.cp-headhex.is-booked .hx{fill:var(--accent)}
.cp-headhex.is-booked .hx-live{display:none}
.cp-hd{display:flex;flex-direction:column;line-height:1.1}
.cp-t1{font-weight:800;font-size:var(--t-small)}
.cp-t2{color:var(--ink-2);margin-top:var(--s1)}
.cp-headstat{margin-left:auto;font-size:var(--t-small);font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.cp-tabs{display:flex}

.cp-tab:hover{color:var(--ink)}
.cp-tab.is-on{color:var(--ink);border-bottom-color:var(--accent)}
.cp-tab:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
/* transcript fills the body in BOTH modes; Booked + footer sit below it */
.cp-transcript{flex:1;min-height:0;position:relative;overflow-y:auto;overscroll-behavior:contain;padding:var(--s1) 0;scroll-behavior:smooth}
/* on touch screens the transcript follows playback instead of trapping the page scroll —
   JS still drives scrollTop, taps still seek; the finger always scrolls the page */
@media (max-width:760px){.cp-transcript{overflow-y:hidden}}
.cp-line{display:flex;gap:var(--s2);width:100%;text-align:left;background:transparent;border:0;border-left:3px solid transparent;padding:var(--s2) var(--s3);cursor:pointer;font-family:var(--sans);font-size:var(--t-body);line-height:1.45;color:var(--ink-2);transition:background .12s,color .12s,border-color .12s}
.cp-line:hover{background:var(--paper)}
.cp-line:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.cp-line.is-active{color:var(--ink);border-left-color:var(--ink);background:var(--paper)}
.cp-who{flex:none;width:3rem;padding-top:var(--s1)}
.cp-who--ava{color:var(--accent-d)}
.cp-said{flex:1}
/* Booked card — a top-anchored overlay that drops down over the transcript at the booking. Out of flow, so the transcript never reflows (zero shift). Entrance animated in JS. */
.cp-booked{position:absolute;top:0;left:0;right:0;z-index:2;background:var(--paper);border-bottom:2px solid var(--ink);padding:var(--s3) var(--s3);box-shadow:0 6px 0 var(--shadow-ink)}
/* footer — recorded: play+seek; live: End. Same row, same place. */
.cp-foot{flex:none;display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border-top:1px solid var(--line)}
.cp-play{flex:none;width:34px;height:34px;border:0;background:transparent;color:var(--accent);font-size:var(--t-lead);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:color .15s,transform .1s}
.cp-play svg{width:18px;height:18px;display:block}
.cp-play:hover{color:var(--accent-b)}
.cp-play:active{transform:scale(.9)}
.cp-play:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cp-seek{flex:1;min-width:0;-webkit-appearance:none;appearance:none;height:4px;background:var(--line);cursor:pointer}
.cp-seek:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.cp-seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;background:var(--ink);cursor:pointer}
.cp-seek::-moz-range-thumb{width:14px;height:14px;background:var(--ink);border:0;border-radius:0}
.cp-mute{flex:none;width:34px;height:34px;border:0;background:transparent;color:var(--accent);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:color .15s,transform .1s;position:relative}
.cp-mute.is-nudge::before{content:"";position:absolute;inset:3px;border:2px solid var(--accent);border-radius:50%;opacity:0;animation:muteNudge 1.8s ease-out .8s 4;pointer-events:none}
@keyframes muteNudge{0%{transform:scale(.55);opacity:0}18%{opacity:.9}100%{transform:scale(1.5);opacity:0}}
@media(prefers-reduced-motion:reduce){.cp-mute.is-nudge::before{animation:none}}
.cp-mute:hover{color:var(--accent-b)}
.cp-mute:active{transform:scale(.9)}
.cp-mute:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cp-mute svg{width:20px;height:20px;display:block}
.cp-endcall{margin-left:auto;font-family:var(--sans);font-weight:700;font-size:var(--t-cap);background:transparent;color:var(--ink);border:2px solid var(--ink);padding:var(--s1) var(--s3);min-height:34px;cursor:pointer}
.cp-endcall:hover{background:var(--ink);color:var(--paper)}
/* live launcher (intro) — fills the same body until the call starts */
.cp-live-intro{flex:1;display:flex;flex-direction:column;justify-content:center;gap:var(--s2);padding:var(--s3);overflow-y:auto}
.cp-talk{width:100%;font-family:var(--sans);font-weight:700;font-size:var(--t-body);color:#fff;background:var(--accent);border:0;box-shadow:var(--shadow-sm);padding:var(--s3) var(--s4);min-height:48px;cursor:pointer;transition:background .15s,transform .1s,box-shadow .1s}
.cp-talk:hover{background:var(--accent-b)}
.cp-talk:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--shadow-ink)}
.cp-talk:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.cp-live-note{min-height:3em;margin:0;visibility:hidden;font-size:var(--t-small);line-height:1.4;color:var(--ink);text-align:center}
.cp-live-note.is-on{visibility:visible}
.cp-live-note a{color:var(--accent);font-weight:700}
/* client area */

.fwd{list-style:none;margin:var(--s2) 0 0;padding:0}
.fwd li{display:flex;align-items:baseline;gap:var(--s2);padding:var(--s2) 0}
.fwd li>span:last-child{font-size:var(--t-small);line-height:1.55;min-width:0}
.fwd-n{flex:0 0 1.05rem;font-weight:800;font-size:var(--t-small);color:var(--accent)}
.fwd code{font-size:var(--t-cap);white-space:nowrap}
.fwd-net{margin:var(--s2) 0 0}
.fwd-done{font-size:var(--t-cap);color:var(--ink-2);margin:var(--s2) 0 0}
.fwd-off{font-size:var(--t-cap);color:var(--ink-2);margin-top:auto;padding-top:var(--s3);text-align:center}.fwd-cell{display:grid}.fwd-grp{grid-area:1/1;display:flex;flex-direction:column;visibility:hidden}.fwd-grp .fwd-off{margin-top:var(--s3)}.fwd-pick:has(.slot:nth-child(1) input:checked) .fwd-grp:nth-child(1),.fwd-pick:has(.slot:nth-child(2) input:checked) .fwd-grp:nth-child(2),.fwd-pick:has(.slot:nth-child(3) input:checked) .fwd-grp:nth-child(3){visibility:visible}
.acct-pick{text-decoration:none}
.acct-pick h3{margin:0}
.acct-back{margin:0 0 var(--s2);font-size:var(--t-small)}

.acct-qn{color:var(--accent);font-weight:800;margin-left:var(--s2)}
.acct-lock{margin-top:var(--s3)}
.acct-plan{list-style:none;margin:var(--s3) 0 0;padding:0}

.acct-plan li:first-child{border-top:0}

.acct-plan .pl-body{display:flex;flex-direction:column;gap:var(--s1);min-width:0}
.acct-plan .pl-role{font-weight:700}
.acct-plan .pl-why{margin:0;line-height:1.45;color:var(--ink-2);max-width:34ch}
.acct-plan .pl-st{margin-left:auto;font-weight:700;font-size:var(--t-small);color:var(--ink-2);white-space:nowrap}
.acct-plan .pl-st--warn{color:var(--scarlet,var(--accent-d));white-space:normal;text-align:right}
.acct-plan .pl-cta{margin-left:auto;flex:0 0 auto}
.acct-plan .pl-st+.pl-cta{margin-left:0}

/* The target is the whole row, not the eleven characters. With padding:0 this was a ~110x14px hit area at the bottom of a scrollable card body, which is why a single click so often did nothing and it took several to reach Stripe. Underline still draws under the words, so it looks the same. */ .pl-link{display:block;width:100%;text-align:left;background:none;border:0;padding:var(--s2) 0;font-family:var(--sans);font-weight:700;font-size:var(--t-small);color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pl-link:hover,.pl-link:focus-visible{color:var(--ink)}
.acct-plan .btn{min-height:36px;padding:var(--s2) var(--s3);font-size:var(--t-small)}
.acct-plan .acct-buy{margin-left:var(--s2);flex:0 0 auto}
.acct-buy{display:inline}
.acct-lab{margin:var(--s3) 0 0}
.figs--dash{margin:var(--s4) 0}
.figs--dash .fig{padding:var(--s3) var(--s3) var(--s3)}
.figs--dash .fig-n,.figs--4.figs--dash .fig-n{font-size:var(--t-num)}

/* dash tables: the scroller holds the width, and every row is at least as wide
   as its own tracks (min-content = the sum of the column minimums + gaps +
   padding). Hand-typed min-widths drifted short of that on every kind — a
   fleet row wanted 53.9rem and declared 42, so the grid spilled out of its own
   box and the row's actions button landed on top of the last column. */
.dash-tab{border:2px solid var(--ink);background:var(--paper);box-shadow:var(--shadow);overflow-x:auto}
.dash-tab--sticky{max-height:calc(100svh - 10rem);overflow:auto}
.dash-tab--sticky .dash-row--head{position:sticky;top:0;z-index:2;background:var(--paper);box-shadow:0 1px 0 var(--ink)}
/* The venue name freezes too: scrolled right, a row with no name is a row you
   cannot identify. Header cell sits above both so the corner stays legible. */
/* The row's own horizontal padding scrolls away with the row, which left the
   frozen name jammed against the border. The padding belongs to the frozen
   cells, so it travels with them. */
.dash-tab--sticky .dash-row--fleet>.dash-name{position:sticky;left:0;z-index:1;background:var(--paper);padding-right:var(--s2)}
.dash-tab--sticky .dash-row--head>.dash-name{z-index:3}
/* The actions freeze to the right edge the way the name freezes to the left:
   the control for a row is no use once the row has scrolled away from it. The
   checkbox, the fly-out and the dots live in ONE cell so the menu anchors to
   the button — anchored to the row (which is as wide as the scroll) they came
   apart the moment you scrolled sideways. --ctl-inset clears the padding
   between the button and the cell's edge: without it the fly-out opened 16px
   too far right and covered the very button that closes it, which is why a
   menu could be opened and never cancelled. */
.dash-tab--sticky .dash-row--fleet>.vn-cell{position:sticky;right:0;z-index:1;background:var(--paper)}
.vn-cell{--ctl-inset:var(--s3)}
.dash-tab--sticky .dash-row--head>.vn-cell{z-index:3}
.vn-cell{position:relative;display:flex;align-items:center;justify-content:flex-end;min-width:38px}
/* A venue action's answer, inside the control cell the action lives in. The
   cell is absolutely positioned, so the answer cannot move a single row —
   the state swaps in one place, it is never inserted above the table. */
.vn-said{display:none;font-size:var(--t-small);font-weight:700;white-space:nowrap;padding:0 var(--s2)}
.fact-ctl.is-said .vn-act,.fact-ctl.is-said .fact-rm{display:none}
.fact-ctl.is-said .vn-said{display:inline-flex;align-items:center}
.dash-row{display:grid;gap:var(--s2);align-items:center;padding:var(--s2) var(--s3);border-top:1px solid var(--line);color:inherit;text-decoration:none;min-width:min-content}
.spark{display:block;width:100%;height:1.3rem;fill:var(--ink)}
.spark--big{height:3.6rem}
.dash-chart{border:2px solid var(--ink);background:var(--paper);box-shadow:var(--shadow);padding:var(--s3) var(--s3) var(--s3)}
.dash-row--econ{grid-template-columns:minmax(11rem,1.4fr) 4.5rem 5.5rem 6rem 5.5rem 5.5rem}
.dash-row:first-child{border-top:0}
a.dash-row:hover .dash-name{text-decoration:underline}
.dash-row--head{font-size:var(--t-cap);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);font-weight:700}
.dash-name{font-weight:800;display:flex;align-items:center;gap:var(--s2);min-width:0}
.dash-num{font-weight:700;white-space:nowrap}
.dash-num.num{text-align:right}
.dash-num i{font-style:normal;color:var(--ink-2);font-weight:600;font-size:.85em}
.dash-num.is-hot{color:var(--accent)}
.dash-last{color:var(--ink-2);font-size:var(--t-small);white-space:nowrap}
.dash-pillar{margin-top:clamp(2.6rem,5vh,4rem)}
.dash-pillar:first-of-type{margin-top:var(--s4)}
.dash-h{font-family:var(--display,var(--sans));font-size:var(--t-num);font-weight:800;letter-spacing:-.02em;margin:0 0 var(--s1);padding-bottom:var(--s2);border-bottom:3px solid var(--ink)}
.dash-funnel{padding:var(--s2) 0}
.fun-row{display:grid;grid-template-columns:minmax(7rem,10rem) 1fr auto 3.2rem;gap:var(--s3);align-items:center;padding:var(--s2) var(--s3);border-top:1px solid var(--line)}
.fun-row:first-child{border-top:0}
.fun-row--tracked{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.fun-lab{display:flex;flex-direction:column;min-width:0}
.fun-name{font-weight:800;font-size:var(--t-small)}
.fun-sub{font-size:var(--t-cap);color:var(--ink-2)}
.fun-bar{position:relative;background:var(--line);height:1.9rem;display:flex;align-items:center}
.fun-fill{position:absolute;inset:0 auto 0 0;background:var(--ink);min-width:2px}
.fun-row--tracked .fun-fill{background:var(--accent)}
.fun-n{font-weight:800;font-size:var(--t-small);min-width:2.6rem;text-align:right}
.fun-step{font-weight:700;font-size:var(--t-small);color:var(--ink-2);text-align:right}
.dash-row--coh{grid-template-columns:minmax(8rem,1.4fr) 5rem 6rem 5rem}
.dash-row--pipe{grid-template-columns:minmax(8rem,1.2fr) minmax(9rem,1fr) 7.5rem 9.5rem}
.dash-row--pipe .dash-num{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv{margin-top:var(--s4);padding:var(--s3) var(--s3);max-width:32rem}
.rv .acct-sub{margin:0 0 var(--s2)}
.rv-form{display:flex;flex-direction:column;gap:var(--s2)}
.rv-lab{margin-top:var(--s2)}
.rv-seg{display:flex;flex-wrap:wrap;gap:var(--s2)}

.rv-opt input{position:absolute;opacity:0;width:0;height:0}

.rv-opt:has(input:checked){background:var(--ink);color:var(--paper)}
.rv-form textarea{resize:vertical}
.rv-actions{display:flex;gap:var(--s2);margin-top:var(--s2)}
.rv-done{font-weight:700}
.dash-flagmk{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;height:1.5rem;padding:0 var(--s2);background:var(--accent);color:#fff;font-size:var(--t-small);font-weight:800;margin-left:var(--s2)}
/* Every cell is ONE line, so every row is the same height, always. Wrapping
   made rows 55 / 65 / 83 / 105px tall, and since the faults are recomputed
   live from ElevenLabs on each load, a fault string getting longer moved every
   row below it. The full text is on the title. */
.dash-row--fleet{grid-template-columns:minmax(9rem,1.2fr) minmax(7.5rem,.9fr) 8.5rem 5.5rem 5rem 4.5rem 5rem 4.5rem 6rem 5.5rem 38px;position:relative;padding-left:0;padding-right:0}
/* The row's horizontal padding belongs to the frozen cells, so it travels with
   them — left on the row, it scrolled away and jammed the name against the
   border. Must sit AFTER the base .dash-row rule: same specificity, later wins. */
.dash-row--fleet>.dash-name{padding-left:var(--s3)}
.dash-row--fleet>.vn-cell{padding-right:var(--s3)}
.dash-row--fleet>*{min-width:0}
.dash-row--fleet .dash-needs,.dash-row--fleet .dash-last{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
/* The name shrinks around the origin tag rather than pushing it out of the
   cell: inline, the tag was clipped away on exactly the venues that have one
   (the long names), which is the opposite of useful. */
.dash-row--fleet .dash-name{display:flex;align-items:center;gap:var(--s2);white-space:nowrap;overflow:hidden}
.dash-row--fleet .dash-name a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-needs{font-size:var(--t-small);font-weight:700;color:var(--accent)}
.dash-needs--none{color:var(--ink-3);font-weight:400}
/* Thin columns, full content on hover — as an OVERLAY, never a resize.
   Two things this shape gets right that expanding the cell did not:
   the cell's hit box never changes, so the expansion cannot trap the
   pointer (move one pixel right and you are on the neighbour, which is
   reachable again immediately); and nothing reflows, so the row under the
   cursor never moves. Resizing real columns would have needed
   display:contents on the rows — losing the row as a box, and the frozen
   name with it — and reflowed the whole table on every mouse move.
   Headers are excluded: they are short, and a sticky row does not want a
   positioned child fighting its stacking. */
.dash-row--fleet:not(.dash-row--head)>[data-full]:not(.dash-name){position:relative}
/* the overlay is a child of a cell that clips its own text, so the cell has to
   stop clipping for the overlay to escape it — the box and hit area are
   untouched, only what may paint outside them */
.dash-row--fleet:not(.dash-row--head)>[data-full]:hover,
.dash-row--fleet:not(.dash-row--head)>[data-full]:focus-within{overflow:visible}
.dash-row--fleet:not(.dash-row--head)>[data-full]:hover::after,
.dash-row--fleet:not(.dash-row--head)>[data-full]:focus-within::after{
  content:attr(data-full);position:absolute;left:0;top:0;bottom:0;
  display:flex;align-items:center;width:max-content;max-width:34rem;
  /* left:0 is the cell's PADDING box, so without this the overlay ignored the
     cell's own padding-left and the hovered venue name jumped 16px left, out
     of its column and against the table border. */
  padding-left:inherit;padding-right:var(--s3);background:var(--paper);
  color:inherit;font:inherit;white-space:nowrap;z-index:4;pointer-events:none}
.dash-row--fleet>.dash-name[data-full]:hover::after{text-decoration:underline}

/* Thinner now that nothing is lost to truncation — the table fits a laptop
   without horizontal scroll instead of needing 1286px. */
/* The menu's hidden checkbox rides with the dots that own it. Left at its
   static position it sat at the row's left edge, and clicking the dots
   focused it — scrolling the wide table back to 0 and taking the dots with it. */
.dash-row .fact-mx{right:var(--s3);left:auto}
.dash-marks{display:flex;align-items:center;gap:var(--s1)}
.dash-row--rq{grid-template-columns:minmax(10rem,1.6fr) auto auto;gap:var(--s3)}
.dash-row--rq .dash-name{flex-direction:column;align-items:flex-start;gap:var(--s1)}
.rq-subj{font-weight:600;font-size:var(--t-cap);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:22rem}.rq-subj--warn{color:var(--accent-d)}
.rq-chips{display:flex;flex-wrap:wrap;gap:var(--s1);align-items:center;justify-content:flex-end}
.rq-status,.rq-src,.rq-cat,.rq-star{font-size:var(--t-cap);font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:var(--s1) var(--s2);border:2px solid var(--ink)}
.rq-open{background:var(--accent);color:#fff;border-color:var(--accent)}
.rq-reviewing{background:var(--gold);color:var(--ink);border-color:var(--ink)}
.rq-resolved{background:var(--paper);color:var(--ink-2)}
.rq-src{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.rq-cat{background:transparent;color:var(--ink-2)}
.rq-star{border:0;font-size:var(--t-small);padding:var(--s1) var(--s1)}
.dash-ue{padding:var(--s3) var(--s3)}
.ue-inputs{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s3)}
.ue-inputs label{display:flex;flex-direction:column;gap:var(--s1);font-size:var(--t-cap);letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--ink-2);flex:1 1 9rem}
.ue-inputs input{font-weight:700}
.ue-out{margin-top:0}
.ue-out .fig{padding:var(--s3) var(--s3) var(--s3)}
.dash-lb{padding:var(--s3) var(--s3)}
.lb-fields{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s3)}
.lb-fields label{display:flex;flex-direction:column;gap:var(--s1);font-size:var(--t-cap);letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink-2);flex:1 1 8rem}
.lb-fields input{font-weight:600}
.lb-out{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.lb-out code{flex:1 1 16rem;font-size:var(--t-small);font-weight:700;background:var(--paper);border:2px dashed var(--ink-2);padding:var(--s2) var(--s2);overflow-wrap:anywhere}
.dash-lb .btn{min-height:36px;padding:var(--s2) var(--s3);flex:0 0 auto}
.dash-caption{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin:clamp(2.4rem,4vh,3.2rem) 0 1.2rem}
.dash-caption .acct-sub{margin:0}
.dash-ratewrap{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-cap);letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink-2)}
.dash-ratewrap .field--bare{flex:0 0 6rem}
.dash-row--kv{grid-template-columns:1fr auto}
.dash-kv{font-weight:700;font-size:var(--t-small);overflow-wrap:anywhere}
.dash-row--int{grid-template-columns:minmax(9rem,1.4fr) repeat(5,5.5rem)}
.dash-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:0 var(--s3);align-items:start}
.dash-rates{font-family:var(--sans);font-size:var(--t-small);font-weight:700;border:2px solid var(--ink);background:#fff;color:var(--ink);padding:var(--s1) var(--s2);width:4.5rem}
.acct-facts{list-style:none;margin:var(--s3) 0 0;padding:0}
.acct-facts+.pl-why{margin-top:var(--s2)}
.acct-book{list-style:none;margin:var(--s3) 0 0;padding:0;max-height:16rem;overflow:auto}
.acct-book li{border-top:1px solid var(--line)}
.acct-book li:first-child{border-top:0}
.acct-book a{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);padding:var(--s2) 0;color:inherit;text-decoration:none}
.acct-book a:hover .bk-date,.acct-book a:focus-visible .bk-date{text-decoration:underline}
.bk-date{font-size:var(--t-small);color:var(--ink-2)}
.bk-amt{font-weight:700}
.fact{display:flex;gap:var(--s2);border-top:1px solid var(--line);padding:var(--s2) 0}
.fact:first-child{border-top:0}
.gl{width:1.05rem;height:1.05rem;display:block}
.fact-mk{flex:0 0 1.35rem;display:flex;justify-content:center;color:var(--ink)}
.fact-main{flex:1;min-width:0;display:grid;align-items:center}
.fact-face,.fact-form{grid-area:1/1}
.fact-face{display:flex;flex-direction:column;gap:var(--s1);min-width:0}
.fact-val{font-weight:700;font-size:var(--t-small);overflow-wrap:anywhere}
.fact-sub{color:var(--ink-2)}
.fact-form{visibility:hidden;display:flex;gap:var(--s2);align-items:center}
.fact-form input,.vv-ed input,.vv-ed textarea,.vv-ghost input{font-family:var(--sans);font-size:var(--t-small);padding:var(--s2) var(--s2);border:2px solid var(--ink);background:#fff;color:var(--ink);flex:1;min-width:0;width:100%;box-sizing:border-box}

.fact-tg,.fact-rm,.vn-act{display:inline;flex:0 0 auto}
.fact-x:checked~.fact-main .fact-face{visibility:hidden}
.fact-x:checked~.fact-main .fact-form{visibility:visible}
.fact-x:checked~.fact-editbtn{background:var(--ink);color:var(--paper)}
.fact-x:checked~.fact-rm,.fact-x:checked~.fact-ctl .fact-rm,.fact-x:checked~.fact-ctl .fact-tg{display:none}
.fact--menu{flex-wrap:nowrap;position:relative}
.fact--menu .fact-val{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fact-ctl{display:flex;align-items:center;gap:var(--s2);position:absolute;top:50%;right:calc(38px + var(--s2) + var(--ctl-inset,0px));transform:translate(10px,-50%);opacity:0;pointer-events:none;background:var(--paper);padding-left:var(--s2);transition:transform .2s ease,opacity .2s ease}
.fact-ctl::before{content:"";position:absolute;right:100%;top:-2px;bottom:-2px;width:1.2rem;background:linear-gradient(90deg,transparent,var(--paper))}
.fact-mx:checked~.fact-ctl{opacity:1;transform:translate(0,-50%);pointer-events:auto}
@media (prefers-reduced-motion:reduce){.fact-ctl{transition:none}}
.fact-mx:checked~.fact-menubtn{background:var(--ink);color:var(--paper)}
.fact-del{position:relative;overflow:hidden;color:var(--accent);border-color:var(--accent)}
.fact-del::before{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left}
.fact-del svg{position:relative}
.fact-del.is-holding::before{transform:scaleX(1);transition:transform 3s linear}
.fact-del.is-holding{color:var(--paper);transition:color .35s .3s}
.fact-tog{appearance:none}

.fact--ghost .fact-form{visibility:visible;flex:1}
.fact--ghost .fact-form input{border-style:dashed;border-color:var(--ink-2);background:transparent}
.fact--ghost .fact-form input:focus{border-style:solid;border-color:var(--ink);background:#fff}
.fact--ghost .btn{opacity:.55}
.fact--ghost:focus-within .btn{opacity:1}
/* navigation feedback — content dims + progress cursor until the next paint */
html.is-nav,html.is-nav body{cursor:progress}
html.is-nav main{opacity:.55;transition:opacity .25s .05s}
.acct-secdrop .nav-drop-btn{font-size:var(--t-small)}
.acct-secdrop .nav-menu{left:auto;right:0}
/* the date-picker panel inside the dropdown */
.acct-cal{min-width:19rem;padding:var(--s3)}
.acct-cal-tabs{display:flex;border-bottom:2px solid var(--line);margin-bottom:var(--s2)}
.acct-cal-tabs button{margin-bottom:-2px}
.acct-cal-tabs button.is-on{color:var(--ink);border-bottom-color:var(--accent)}
.acct-cal-body{max-height:16rem;overflow-y:auto;display:flex;flex-direction:column}
.acct-cal-it{font-family:var(--sans);font-weight:700;font-size:var(--t-small);text-align:left;padding:var(--s2) var(--s2);background:transparent;border:0;color:var(--ink-2);cursor:pointer}
.acct-cal-it:hover{color:var(--ink);background:var(--paper)}
.acct-cal-it.is-on{color:var(--accent-d)}
.acct-cal-head{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:var(--t-small);margin-bottom:var(--s2)}
.acct-cal-head button{font-family:var(--sans);background:transparent;border:0;cursor:pointer;font-weight:800;font-size:var(--t-body);padding:var(--s1) var(--s2);color:var(--ink-2)}
.acct-cal-head button:hover{color:var(--ink)}
.acct-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.acct-cal-dow{font-size:var(--t-cap);font-weight:700;letter-spacing:.05em;color:var(--ink-3);padding:var(--s1) 0}
.acct-cal-day{font-family:var(--sans);font-size:var(--t-small);font-weight:600;padding:var(--s1) 0;background:transparent;border:0;cursor:pointer;color:var(--ink)}
.acct-cal-day:hover{background:var(--paper);color:var(--accent-d)}
.acct-cal-day.is-on{background:var(--accent);color:#fff}
.acct-cal-day.is-off{color:var(--line);cursor:default}
.acct-cal-foot{display:flex;gap:var(--s3);border-top:1px solid var(--line);margin-top:var(--s2);padding-top:var(--s2)}
.acct-cal-foot a{font-weight:700;font-size:var(--t-small);color:var(--accent-d);text-decoration:none;padding:0}
.acct-brief{margin-top:var(--s3);max-width:var(--measure-sm)}
.tile .mk{margin-bottom:var(--s3)}
.acct-read{margin-top:var(--s4)}
.acct-read-beats{max-width:58ch}
.acct-read-beats p{margin:0 0 var(--s3);font-size:var(--t-h3);line-height:1.45;font-weight:700}
.acct-beat-mk{color:var(--accent-d);margin-right:var(--s2)}
.acct-doubts{display:grid;gap:var(--s3)}
.acct-doubt{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:start}
.acct-doubt-n{font-weight:800;font-size:var(--t-lead);color:var(--accent-d);font-variant-numeric:tabular-nums;line-height:1.15}
.acct-doubt-q{font-style:italic;color:var(--ink-2);margin-top:var(--s1)}
.acct-doubt-link{margin-top:var(--s2)}
.acct-doubt-link a{font-size:var(--t-small)}
.acct-sub{margin:clamp(2.4rem,4vh,3.2rem) 0 1.2rem}
.flip{position:relative;height:100%;perspective:1600px}
.flip-f{position:relative;display:block;height:100%;transform:rotateY(0) scale(1);transition:transform .26s cubic-bezier(.4,0,1,1) .26s}
.flip-b{position:absolute;inset:0;transform:rotateY(90deg) scale(.8);transition:transform .26s cubic-bezier(.4,0,1,1);pointer-events:none}
.flip.is-flipped .flip-f{transform:rotateY(-90deg) scale(.8);transition:transform .26s cubic-bezier(.4,0,1,1)}
.flip.is-flipped .flip-b{transform:rotateY(0) scale(1);transition:transform .26s cubic-bezier(0,0,.2,1) .26s;pointer-events:auto}
@media(prefers-reduced-motion:reduce){.flip-f,.flip-b,.flip.is-flipped .flip-f,.flip.is-flipped .flip-b{transition:none}}
.flip.is-loading .flip-f::after{content:".";position:absolute;background:var(--paper);border:2px solid var(--ink);box-shadow:var(--shadow);padding:var(--s1) var(--s3);font-weight:800;line-height:1;min-width:2.6em;min-height:1.7em;opacity:0;animation:cmdots 1.2s steps(1,end) infinite,cmshow .01s linear .18s forwards;left:50%;bottom:var(--s3);transform:translateX(-50%);text-align:center}
/* A submit that starts REAL work says so. The build begins inside this request — a tenant, an agent, the first read — so the press used to be followed by a disabled button and nothing at all (9 Sep 2026). Same dots the flip card thinks with. */.btn.is-working::after{content:"...";display:inline-block;white-space:pre;animation:vvdots 1.2s steps(3,start) infinite}/* `content` is not animatable — the flip card's own loading state gives up on cmdots and just shows "..." for the same reason. So the dots are always all three and a clip reveals them one at a time: the width never changes, so the button cannot jog while it works (10 Sep 2026). */@keyframes vvdots{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}@media (prefers-reduced-motion:reduce){.btn.is-working::after{animation:none;clip-path:none}}@keyframes cmdots{0%{content:"."}33%{content:".."}66%{content:"..."}}
@keyframes cmshow{to{opacity:1}}
@media(prefers-reduced-motion:reduce){.flip.is-loading .flip-f::after{animation:none;content:"...";opacity:1}}
.chip-btn{font-family:var(--sans)}
.chip-btn:disabled{pointer-events:none}
.chip-btn svg{width:1rem;height:1rem}

button.chip-btn:hover{background:var(--ink);color:var(--paper)}
button.chip-btn:active{transform:translate(1px,1px)}
.chip-btn--lg:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.fdmail-tr{margin-left:auto;display:flex}
.cp-head .flip-chip{margin-left:var(--s2)}
.flip-f:hover .flip-chip,.flip-f:focus-visible .flip-chip{background:var(--ink);color:var(--paper)}
.flip.is-flipped .flip-b{cursor:pointer}
.cp--card{height:100%;max-width:none;display:flex;flex-direction:column}
.cp--card .cp-body{height:auto;flex:1;min-height:0}
.acct-brief a:not(.btn){font-weight:700}
.acct-brief a:not(.btn):hover{border-bottom:2px solid var(--accent)}
.acct-cardlink{display:block;color:inherit;text-decoration:none}
.acct-cardlink .fdcar-cell{height:100%}
/* In a carousel the link wraps the cell, making the LINK the flex child —
   pin its basis or the cells shrink to min-content on narrow screens. */
.fdcar-track>.acct-cardlink{flex:0 0 21rem;max-width:21rem;scroll-snap-align:start;display:flex}
a.tile.acct-cardlink:hover h3{color:var(--accent)}
.acct-tiles{margin-top:var(--s2)}
.acct-tiles .tile h3{margin-bottom:var(--s2)}
.proof{display:flex;flex-wrap:wrap;gap:var(--s4);margin:var(--s4) 0 0;align-items:flex-end}
.hexes{display:flex;gap:var(--s2)}

.hexcap .k{font-weight:800}
.hexcap .v{font-size:var(--t-small);color:var(--ink-2);margin-top:var(--s1);font-weight:500}
/* The account pages are an operating surface, not the marketing narrative —
   sections stack at their natural height (the deck's 100svh panels read as
   dead air around data) at the system's base rhythm. Glyphs keep the report
   deck's treatment: full size, ink crossing the edge, spilling across
   sections — never shrunk. */
@media(min-width:760px){
  .page-acct .section{min-height:0;align-content:start;padding:clamp(3.5rem,8vh,5.5rem) 0}
}
.page-acct .section--glyph[data-glyph]::after{font-size:clamp(30rem,64vw,72rem);right:-.22em;transform:translateY(-50%)}
.page-acct .section--glyph--l[data-glyph]::after,.page-acct main>.section--glyph:nth-child(even of .section--glyph)[data-glyph]::after{right:auto;left:-.06em;transform:translateY(-50%)}
/* Rethink Sans ships a standard-ligature party trick — "(6)" renders as a
   circled six. Caller data must render verbatim, so ligatures are off
   across the account pages (fi/fl are negligible in this grotesk). */
.page-acct{font-variant-ligatures:none}
/* FIXED GEOMETRY — a section's size never depends on its period or its
   content (the no-layout-shift contract): cards are fixed-height units
   (two-line subject, pinned foot), card regions reserve their rows, and
   empty states sit inside the same box. No measured heights anywhere. */
/* FIXED CARDS — content never sizes anything in the area (banned from the
   vocabulary, 17 Jul): every transfer card is exactly 30rem — subject box
   reserves 3 lines, the rows region 3 rows, the sum clamps at 6 lines
   (min-height + padding-bottom:0 pattern — no slice, no rounding loss),
   the foot pins. Tiles run fixed 16rem rows with clamped text. */
.page-acct .fdcar-track>.acct-cardlink,.page-acct .fdcar-track>.fdcar-cell{height:30rem}
.acct-carhold{min-height:31rem}
.page-acct .fdmail{overflow:hidden}
.page-acct .fdmail-subj{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(3.75em + .8rem);padding-bottom:0;margin-bottom:var(--s1)}
.page-acct .fdmail-rows{min-height:7.7rem}
.page-acct .fdmail-sum{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;padding-bottom:0;margin-bottom:var(--s3);flex:0 0 auto}
.page-acct .fdmail-foot{margin-top:auto}
.page-acct .acct-tiles{grid-auto-rows:16rem;min-height:16rem}
.page-acct .acct-tiles--idx{grid-auto-rows:auto;min-height:0}
.page-acct .acct-tiles--idx .tile{height:auto}
.page-acct .acct-tiles .tile,.page-acct .acct-tiles .card{height:100%;overflow:hidden}
.page-acct .acct-tiles .card.is-rec{overflow:visible}
.page-acct .acct-tiles .tile h3,.page-acct .acct-tiles .tile p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.acct-card-lg{max-width:var(--w-lg);margin-top:var(--s4)}
/* live-tab intro view: the widget header (sample-call framing) makes no sense over
   the talk button — hide it and give the body its height back, so the card never changes size */
.cp--liveintro .cp-head{display:none}
.cp--liveintro .cp-body{height:calc(32rem + var(--cp-head-h,64px))}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media(max-width:480px){.field-row{grid-template-columns:1fr}}
/* live active — identical layout to recorded: transcript fills, Booked appears, footer below */
.cp-live-call{flex:1;display:flex;flex-direction:column;min-height:0}
@media(max-width:520px){.cp-who{width:100%;padding-top:0;margin-bottom:var(--s1)}.cp-line{flex-direction:column;gap:var(--s1)}.cp-tab{font-size:var(--t-cap);padding:var(--s2) var(--s1)}}

/* disparate figures — each stat in its own bounded tile, demonstrated on its own
   terms: a gauge fills each percentage to its OWN 100%; the $ figure is a plain
   number (no "out of"). Hard-shadowed tiles read as separate facts, not a table
   row — there is no shared axis or column to invite comparison between them. */
.figs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,1.8vw,1.5rem);margin-top:clamp(2.2rem,3.6vw,3.2rem);align-items:stretch}
.figs--3{grid-template-columns:repeat(3,1fr)}
.figs--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.figs--4 .fig-n{font-size:var(--t-h2)}
.fig{padding:clamp(2rem,2.8vw,2.8rem) clamp(1.4rem,2.2vw,2rem);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center}
.fig-n{font-size:var(--t-h1);font-weight:800;letter-spacing:-.04em;line-height:.9}
.fig--solo{max-width:var(--w-lg);margin:var(--s3) auto 0}
.proofstack .fdcar{width:100%;max-width:67rem;margin:0 auto clamp(2rem,3.6vw,3rem)}
.proofstack--lead .fdcar{margin:clamp(2rem,3.6vw,3rem) auto 0}
.proofstack .fdcar--bleed{width:auto;max-width:none;margin-inline:calc(50% - 50vw)}
.fdcar-track{display:flex;gap:var(--s4);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px var(--s2) var(--s2) 2px}
/* Full-bleed variant — the report deck's carousel treatment, adapted to the
   site wrap (1160px incl. --edge padding): track spans the viewport, cards
   align and snap to the wrap's content line, scrolled cards run under the
   screen edges. Same clean cut as the deck — no fades. */
.fdcar--bleed{margin-inline:calc(50% - 50vw)}
.fdcar--bleed .fdcar-track{padding:2px var(--edge) 8px max(var(--edge),calc(50vw - 580px + var(--edge)));scroll-padding-left:max(var(--edge),calc(50vw - 580px + var(--edge)));scroll-behavior:smooth}
.fdcar-track::-webkit-scrollbar{display:none}
.fdcar-cell{flex:0 0 21rem;max-width:21rem;scroll-snap-align:start;box-sizing:border-box;display:flex}
.acct-fd{flex:1 1 auto;min-width:0}
.acct-fd .acct-fd-body{padding:0 var(--s3) var(--s3);display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.acct-fd .acct-plan li{flex-wrap:wrap;row-gap:var(--s2)}
.acct-fd .acct-plan .pl-body{flex:1 1 60%}
.page-acct .acct-fd .fdmail-subj{min-height:0;-webkit-line-clamp:unset;display:block;flex:0 0 auto;padding-bottom:var(--s1)}
.acct-fd .fdmail-top{flex:0 0 auto}
.acct-fd .acct-fd-body{overflow:hidden}
.acct-fd .price{margin:var(--s1) 0 var(--s2)}
.acct-fd .acct-plan,.acct-fd .acct-facts,.acct-fd .acct-book{margin-top:var(--s2)}
.acct-fd .acct-book{max-height:none;flex:1 1 auto;min-height:0;overflow:auto}
.acct-fd .acct-book,.acct-fd .acct-fd-body{scrollbar-width:none}
.acct-fd .acct-book::-webkit-scrollbar,.acct-fd .acct-fd-body::-webkit-scrollbar{display:none}
.pl-portal{margin-top:auto;padding-top:var(--s2)}
.fdcar-cell>.flip{flex:1 1 auto;min-width:0;max-width:100%}
.fdcar-cell .fdmail{height:100%;display:flex;flex-direction:column}
.fdcar-nav{display:flex;align-items:center;justify-content:flex-end;gap:var(--s2);margin-top:var(--s3)}
.fdcar--bleed .fdcar-nav{padding-inline:max(var(--edge),calc(50vw - 580px + var(--edge)))}
/* The transfer card — the report deck's treatment, verbatim (the deck is
   the source of truth for this rectangle): paper surface, 2px ink border,
   full shadow, flex column — the sum absorbs, the foot pins, heights
   equalise within a row by stretch. No numeric heights, no clamps. */
.fdmail{padding:0;display:flex;flex-direction:column}

.fdmail-top{display:flex;padding:var(--s3) var(--s3) 0}

.fdmail-subj{font-weight:800;line-height:1.25;letter-spacing:-.01em;padding:var(--s3) var(--s3) var(--s1);min-height:calc(2.5em + 1.1rem)}
.fdmail-rows{padding:var(--s2) var(--s3) var(--s1)}
.fdmail-row{display:grid;grid-template-columns:4.4rem 1fr;gap:var(--s2);padding:var(--s2) 0;border-bottom:1px solid var(--line);font-size:var(--t-small)}
.fdmail-row:last-child{border-bottom:0}
.fdmail-row .k{padding-top:.15em}
.fdmail-row .v{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.32rem}
.fdmail-none{color:var(--ink-3);font-weight:500}
.proofstack>.fdmail{width:100%;max-width:var(--w-card);margin:0 auto clamp(1.8rem,3.2vw,2.6rem)}
.fdmail-row .v--sm{font-size:var(--t-small)}
.fdmail-sum{flex:1 1 auto;padding:var(--s3) var(--s3) var(--s3);font-size:var(--t-small);line-height:1.55;color:var(--ink-2);font-weight:500}
.fdmail-sum b{color:var(--ink);font-weight:700}
.fdmail-foot{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s3);border-top:2px solid var(--ink);color:var(--ink-2)}
.ticks.aftr{gap:var(--s3);max-width:var(--measure-sm);margin-top:clamp(1.2rem,2vw,1.8rem)}
.ticks.aftr li b{color:var(--ink);display:block;margin-bottom:var(--s1)}
.aftr-panel{align-self:center}
.ntf{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s4)}
.ntf li{--mk:.95rem;position:relative;display:grid;grid-template-columns:4.1rem var(--mk) 1fr;gap:0 var(--s3);align-items:start}
.ntf li:not(:last-child):before{content:"";position:absolute;left:calc(4.1rem + var(--s3) + var(--mk) / 2 - 1px);top:.12rem;bottom:calc(-1 * var(--s4));width:2px;background:var(--line)}
.ntf-t{font-weight:800;font-size:var(--t-small);line-height:1.45;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ntf-mk{margin-top:.12rem;background:var(--gold);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);position:relative;z-index:1}
.ntf-mk--book{background:var(--accent)}
.ntf-mk--rep{background:var(--ink)}
.ntf-tx{display:flex;flex-direction:column;gap:var(--s1)}
.ntf-tx b{line-height:1.3}
.ntf-tx span{color:var(--ink-2);line-height:1.45}
.fig-gauge{width:min(100%,17rem);height:7px;background:var(--line);margin-top:var(--s3);overflow:hidden}
.fig-gauge>span{display:block;height:100%;background:var(--ink)}
.fig-t{color:var(--ink-2);line-height:1.35;margin-top:var(--s3);font-weight:400}
@media(max-width:760px){.figs--3{grid-template-columns:1fr}.figs--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.figs{grid-template-columns:1fr}}
.src{color:var(--ink-2);margin-top:var(--s3)}

.src-a:hover{color:var(--ink)}

/* booking flow — deepened how-it-works (homepage). Stacked steps so each can carry depth;
   step 2 is featured (heavier border) and embeds a real call, start to close. */
.flow{list-style:none;margin:0 auto;padding:0;max-width:var(--w-col);display:flex;flex-direction:column;gap:clamp(1.3rem,2.4vw,2rem)}
.flow-step{display:block;position:relative}
.flow-n{position:absolute;top:clamp(.6rem,1.2vw,1rem);right:clamp(.9rem,1.8vw,1.5rem);font-size:var(--t-h1);font-weight:800;color:rgba(21,18,13,.1);letter-spacing:-.03em;line-height:.85;pointer-events:none}
.flow-bd{min-width:0}
.flow-bd h3{margin:0 0 var(--s2);padding-right:var(--s6);line-height:1.3}
.flow-bd>p{color:var(--ink-2);margin:0;max-width:var(--measure)}
.abuild{margin:var(--s3) auto 0;max-width:390px}
.abuild svg{display:block;width:100%;height:auto}
.abuild text{font-family:var(--sans,ui-sans-serif,system-ui,sans-serif)}
.abl{font-size:var(--t-small);font-weight:700;fill:var(--ink)}
.ab-stream{fill:none;stroke:rgba(0,0,0,.5);stroke-width:3.4;stroke-dasharray:3 8;stroke-linecap:round}
.ab-loop{fill:none;stroke:var(--gold);stroke-width:3.4;stroke-dasharray:3 8;stroke-linecap:round}
@media (prefers-reduced-motion:no-preference){.ab-stream,.ab-loop{animation:abFlow .9s linear infinite;animation-play-state:paused}.abuild.is-live .ab-stream,.abuild.is-live .ab-loop{animation-play-state:running}}
@keyframes abFlow{to{stroke-dashoffset:-20}}
/* (data-flow conduit removed 5 Jul 2026 — parked; see git history for the pipeline) */
.intwall{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5) var(--s5);align-items:center;justify-items:center;margin-top:var(--s4)}
@media (max-width:900px){.intwall{grid-template-columns:repeat(2,1fr);gap:var(--s4) var(--s4)}}
.intlogo{max-height:clamp(52px,6vw,72px);max-width:100%;width:auto;height:auto;filter:brightness(0);opacity:.5;transition:opacity .15s}
.intlogo[alt="ROLLER"],.intlogo[alt="Checkfront"]{max-height:clamp(40px,4.6vw,56px)}
.intlogo[alt="FareHarbor"]{max-height:clamp(44px,5vw,60px)}
.intlogo:hover{opacity:.85}
/* the coverage suite — step 3's rig: an endless honeycomb mesh scrolling down
   through a clipped window. Solid ink, a few gaps per row; gaps pop shut in
   scarlet as they travel. Parity rides with each row (.s) so recycled rows
   keep the tessellation; the belt moves transform-only. */
.covsuite{margin:var(--s3) auto 0;max-width:var(--w-md)}
.cov-grid{position:relative;overflow:hidden;overflow:clip;aspect-ratio:2.3}
.cov-belt{position:relative;will-change:transform}
.cov-row{position:relative;display:grid;grid-template-columns:repeat(14,1fr);margin-top:calc(-100%/48.5)}
.cov-row:first-child{margin-top:0}
.cov-row.s{transform:translateX(calc(100%/28))}
.cov-row i{display:block;aspect-ratio:.866;clip-path:polygon(50% 2%,97% 26%,97% 74%,50% 98%,3% 74%,3% 26%);transition:transform .28s cubic-bezier(.5,1.5,.4,1) var(--d,0s)}
.cov-row i.v{background:rgba(0,0,0,.5)}
.cov-row i.n{background:var(--gold)}
.cov-row.off i{transform:scale(0)}
.cov-link{position:absolute;z-index:4;width:3px;margin-left:-1.5px;transform-origin:50% 0;background:var(--gold);opacity:0;transform:scaleY(0);pointer-events:none;will-change:transform,opacity}
.cov-tag{position:absolute;z-index:5;transform:translate(-50%,0);will-change:transform,opacity;white-space:nowrap;background:var(--paper);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:.34em .7em;line-height:1.25;font-family:var(--sans);font-size:var(--t-small);font-weight:700;color:var(--ink);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .cov-row i.n{animation:covPp .3s ease}
  .cov-tag{animation:covTag var(--covdur,2.05s) ease .34s forwards}
  .cov-link{animation:covLnk var(--covdur,2.05s) ease .22s forwards}
}
@keyframes covLnk{0%{opacity:1;transform:scaleY(0)}9%,94%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1)}}
@keyframes covTag{0%{opacity:0;transform:translate(-50%,6px) scale(.7)}10%,94%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-4px) scale(.92)}}
@keyframes covPp{0%{transform:scale(.4)}55%{transform:scale(1.18)}100%{transform:scale(1)}}
@media(max-width:700px){
  .cov-grid{aspect-ratio:1.35}
  .covsuite{--covdur:1.55s}
  .cov-tag{font-size:var(--t-cap);padding:.3em .55em;box-shadow:3px 3px 0 var(--ink)}
}

/* tiles / grids */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.3rem,2.5vw,2rem)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.3rem,2.5vw,2rem)}
@media(max-width:760px){.grid-2,.grid-3{grid-template-columns:1fr}}
.tile{padding:clamp(1.7rem,2.6vw,2.4rem)}

.tile h3{margin-bottom:var(--s2)}
.tile p{color:var(--ink-2)}
/* the docs kit — technical elements for integration/API documentation pages
   (first user: /tee-control/documentation). code{} is the decided inline
   token: UA-mono stack (no webfont payload), bordered, ground-swapped the
   same way tiles are. .ep-h is the endpoint lockup heading inside a
   .tile — method chip + mono path. Modifier rules are class-doubled so they
   outrank the .section--surface ground swap. NB this comment lives inside a
   template literal — no backticks here. */
code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.85em;font-weight:600;background:var(--paper);border:1px solid var(--line);padding:.05em .3em;overflow-wrap:anywhere}
.section--surface code{background:var(--paper)}
.ep-h{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s2)}
.ep-m{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;line-height:1;padding:var(--s1) var(--s2);border:2px solid var(--ink);background:var(--paper);color:var(--ink)}
.section--surface .ep-m{background:var(--paper)}
.ep-m.ep-m--post{background:var(--accent);color:var(--paper)}
.ep-m.ep-m--del{background:var(--ink);color:var(--paper)}
.ep-m.ep-m--patch{background:var(--gold);color:var(--ink)}
.ep-p{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:var(--t-small);font-weight:700;letter-spacing:-.01em;overflow-wrap:anywhere}
.ep-stack{margin:0 auto;max-width:var(--w-col);display:flex;flex-direction:column;gap:clamp(1.3rem,2.4vw,2rem)}
.vid{display:block;width:100%;height:auto;background:var(--ink);border:2px solid var(--ink);box-shadow:var(--shadow)}
.rtile-mk{margin-bottom:var(--s3)}
.rtile-stat{margin-top:var(--s2);color:var(--ink)}
/* the report excerpt on /manager — funnel drawn static, cards in a fixed grid */
.funnel{max-width:var(--w-md);display:flex;flex-direction:column;gap:var(--s3)}
.fstage{display:flex;align-items:center;gap:var(--s3)}
.fbarwrap{flex:none;width:24rem;max-width:56vw;height:3rem;display:flex}
.fbar{background:var(--accent);height:100%}
.fmeta{flex:none;line-height:1.15;font-weight:700;font-size:var(--t-body)}
.fmeta b{font-size:var(--t-lead);font-weight:800;margin-right:var(--s2)}
@media (max-width:760px){.fbarwrap{max-width:42vw}.fmeta{font-size:var(--t-small)}.fmeta b{font-size:var(--t-h3)}}
.fconv{padding:var(--s2) 0 var(--s2) var(--s4);font-weight:700;color:var(--ink-2);position:relative;line-height:1}
.fconv:before{content:"↓";position:absolute;left:.35rem;color:var(--ink-3)}
.fconv b{color:var(--accent-d);font-weight:800}

.tile .role{display:block;margin-bottom:var(--s2)}

/* founder */
.founder{display:flex;gap:var(--s3);align-items:flex-start}
.founder-photo{flex:none;width:8.5rem;height:10.6rem;object-fit:cover;border:2px solid var(--ink)}
.founder blockquote{font-size:var(--t-h3);line-height:1.4;letter-spacing:-.01em}
.founder figcaption{margin-top:var(--s3);display:flex;flex-direction:column;gap:var(--s1)}
.f-name{font-weight:800}
.f-role{color:var(--ink-2)}
.fpiece{max-width:46rem;margin:0 auto;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-sm);padding:clamp(1.5rem,2.8vw,2.6rem)}
.fpiece.has-photo{display:grid;grid-template-columns:minmax(200px,250px) 1fr;gap:clamp(1.6rem,3vw,2.8rem);align-items:start;max-width:64rem}
.fp-photo{display:block;width:100%;height:auto;border:2px solid var(--ink);box-shadow:var(--shadow);background:var(--paper)}
.fp-lead{margin:0 0 var(--s2);font-size:var(--t-lead);font-weight:800;line-height:1.4;letter-spacing:-.01em}
.fp-cap{display:flex;flex-direction:column;gap:var(--s1);margin:0 0 var(--s3)}
.fp-side .fp-cap{margin:var(--s3) 0 0}
.fp-story p{color:var(--ink-2);max-width:62ch;margin:0 0 var(--s3)}
.fpiece .btns{margin-top:var(--s4)}
@media(max-width:700px){.fpiece.has-photo{display:block}.fp-side{max-width:240px;margin-bottom:var(--s3)}}

/* cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);align-items:stretch}
.cards--4{grid-template-columns:repeat(4,1fr)}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:920px){.cards,.cards--4{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.cards,.cards--4{grid-template-columns:1fr}}
.card{position:relative;padding:var(--s4) var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
/* the card family's ONE motion, defined once: hover grows the shadow and
   NEVER moves the element — a surface that translates under its own pointer
   flickers at the edges (hover drops, element returns, loop = dancing).
   Only :active presses move. Elements inside a card carry no motion. */

.card:hover,a.tile:hover,.fdcar-cell:hover .fdmail,.fdcar-cell:hover .cp{box-shadow:8px 8px 0 var(--shadow-ink)}

.card .tag{position:absolute;top:-.8rem;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--ink);color:var(--paper);font-weight:700;padding:var(--s1) var(--s2)}
.amt-was{font-size:var(--t-h3);font-weight:700;text-decoration:line-through;opacity:.45}
/* price & guarantee — one ink box under the hero copy: the spots line
   above, price huge, guarantee running along the bottom. Every line is in
   flow: the price scales with the viewport, so anything pinned beside it
   lands on the digits when the box narrows. */
.offer-box{margin-top:var(--s4);display:inline-block;background:var(--ink);color:var(--paper);padding:var(--s3) var(--s3) var(--s3);text-transform:uppercase;font-weight:700;letter-spacing:.11em;font-size:var(--t-cap);line-height:1.7}
.offer-box .offer-box-price{font-size:var(--t-h1);letter-spacing:-.02em;line-height:1;margin:0}
.offer-box .offer-box-price span{font-size:var(--t-h3);letter-spacing:.08em;margin-left:var(--s1)}
.offer-box .offer-box-spots{margin:0 0 var(--s1)}
.offer-box .offer-box-guarantee{margin-top:var(--s3);padding-top:var(--s2);border-top:1px solid rgba(247,243,235,.3)}
/* team-card LinkedIn badge — glyph link beside the name */
.card .li{display:inline-flex;margin-left:var(--s2);vertical-align:-2px;transition:color .15s}
.card .li svg{width:15px;height:15px}
.card .li:hover{color:var(--accent)}
/* add-on marker — the flow numerals' ghost treatment, card-scaled */
.card-pre{position:absolute;top:.5rem;right:1rem;font-size:var(--t-h2);font-weight:800;color:rgba(21,18,13,.1);letter-spacing:-.03em;line-height:.85;pointer-events:none}
.card .price,.acct-fd .price{display:flex;align-items:baseline;gap:var(--s1)}
.card .price .amt,.acct-fd .price .amt{font-size:var(--t-num);font-weight:800;letter-spacing:-.03em}
.card .price .per{font-size:var(--t-small);color:var(--ink-2)}

.card p{color:var(--ink-2);font-size:var(--t-body);line-height:1.45}
.card-cta{margin-top:auto;padding-top:var(--s2)}
.card-cta .btn{width:100%;min-height:44px;font-size:var(--t-small);padding:var(--s2) var(--s3)}

/* enterprise band */
.enterprise{display:flex;gap:var(--s4);align-items:center;justify-content:space-between;flex-wrap:wrap;padding:var(--s4) var(--s4)}
.enterprise h3{margin:var(--s1) 0}
.enterprise .btn{flex:none}
.enterprise--slim{padding:var(--s3) var(--s4)}
.enterprise--slim h3{margin:var(--s1) 0 0}

/* comparison */
.cmp-wrap{overflow-x:auto;border:1px solid var(--line)}
.cmp{width:100%;border-collapse:collapse;min-width:640px;background:var(--paper)}
.cmp th,.cmp td{border-bottom:1px solid var(--line);padding:var(--s3) var(--s3);text-align:left;font-size:var(--t-small)}
.cmp thead th{background:var(--paper)}
.cmp tbody th{font-weight:700;color:var(--ink)}
.cmp td{text-align:center}
.cmp td:first-child{text-align:left}
.cmp th.cmp-c{text-align:center}
.cmp td.cmp-t{text-align:left}
.cmp .yes svg{margin:0 auto;width:15px;height:18px}
.cmp .no{color:var(--ink-3)}

/* faq */
/* FAQ — always open, nothing to click; cards two-up, evens nudged for the stagger */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s4);align-items:start;padding-bottom:var(--s5)}
.faq-card{padding:var(--s4) var(--s4)}

.faq-card:nth-child(even){transform:translateY(2.6rem)}
.faq-card h3{margin:0 0 var(--s2);letter-spacing:-.01em}
.faq .a{color:var(--ink-2);line-height:1.55}
.faq .a a{color:var(--accent-d);font-weight:700}
@media(max-width:760px){.faq{grid-template-columns:1fr;padding-bottom:0}.faq-card:nth-child(even){transform:none}}

/* index / chips */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{display:inline-flex;align-items:center;padding:var(--s2) var(--s3);border:2px solid var(--ink);background:var(--paper);text-decoration:none;font-weight:700;font-size:var(--t-small);box-shadow:3px 3px 0 var(--shadow-ink);transition:box-shadow .15s,transform .15s}
.chip:hover{box-shadow:5px 5px 0 var(--shadow-ink)}

/* cta band */
/* the CTA band is the one clean moment — it outranks the glyph layer (z2 > glyphs' z1),
   so any neighbouring glyph's spill stops dead at its edge */
.cta-band{background:var(--accent);color:#fff;border-top:0;position:relative;z-index:2}
.cta-band h2,.cta-band .lede{color:#fff}
.cta-band .lede{opacity:.92;max-width:60ch;margin-left:auto;margin-right:auto}
.cta-band .btns{justify-content:center;margin-top:var(--s4)}

/* legal */
.legal h2{margin:var(--s4) 0 var(--s2)}
.legal p{color:var(--ink-2);margin-bottom:var(--s2)}
.legal a{font-weight:700}

/* footer */
.foot{background:var(--paper);border-top:1px solid var(--line)}
.foot-in{padding:clamp(3rem,6vw,5rem) var(--edge) 2rem;max-width:1160px;margin:0 auto}
.foot-top{display:grid;grid-template-columns:1.5fr 2.5fr;gap:clamp(2.4rem,6vw,5rem);padding-bottom:clamp(2.4rem,4vw,3.4rem);border-bottom:1px solid var(--line)}
@media(max-width:760px){.foot-top{grid-template-columns:1fr;gap:var(--s5)}}
.foot-brand{display:grid;gap:var(--s3);align-content:start;max-width:34ch}
.foot-brand .brand{font-size:var(--t-h3)}
.foot-tag{color:var(--ink-2);font-size:var(--t-body);line-height:1.45}
.foot-brand .btn{justify-self:start;min-height:44px;padding:var(--s2) var(--s3);font-size:var(--t-small)}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4) var(--s4)}
@media(max-width:520px){.foot-cols{grid-template-columns:1fr 1fr}}
.foot-col{display:grid;gap:var(--s2);align-content:start}
.foot-h{margin-bottom:var(--s1)}
.foot-col a{color:var(--ink-2);text-decoration:none;width:fit-content}
.foot-col a:hover{color:var(--ink)}
.foot--min .foot-in{padding:1.1rem var(--edge)}
.foot--min .foot-bottom{padding-top:0}
.foot-bottom{display:flex;justify-content:space-between;gap:var(--s3) var(--s4);flex-wrap:wrap;align-items:center;padding-top:var(--s4);color:var(--ink-2)}
.foot-bottom a{color:var(--ink-2);text-decoration:none}
.foot-bottom a:hover{color:var(--ink)}
.foot-social,.foot-links{display:inline-flex;gap:var(--s3);flex-wrap:wrap}

/* consent */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--ink);color:var(--paper);display:flex;gap:var(--s3);align-items:center;justify-content:space-between;flex-wrap:wrap;padding:.9rem var(--edge);font-size:var(--t-small)}
.consent .btn--text{color:var(--paper);border-bottom-color:var(--paper);min-height:44px;display:inline-flex;align-items:center}
.consent-btns{display:flex;gap:var(--s3);align-items:center}
.consent .btn--primary{min-height:44px;padding:var(--s2) var(--s3)}

/* mobile sticky CTA — primary action in the thumb zone (Structure VII) */
.mcta{display:none}
@media(max-width:760px){
  .mcta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;justify-content:center;
    background:var(--paper);border-top:2px solid var(--ink);padding:.6rem var(--edge);
    padding-bottom:calc(.6rem + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .2s ease}
  .mcta.show{transform:translateY(0)}
  .mcta .btn{width:100%;max-width:var(--w-card);min-height:48px}
}

/* ============================================================================
   THE DECK — the build/account card rows and editable cards (moved out of
   worker.ts's per-page VV_INTERVIEW_CSS block, 2 Sep 2026). Every card,
   carousel, input and figure rule above applies; this is the glue only.
   ============================================================================ */
.vvstat{margin:0 0 var(--s1);color:var(--ink-3);display:flex;align-items:center;gap:var(--s2);min-height:1.4em}.vvel{margin-left:auto;font-variant-numeric:tabular-nums;font-size:var(--t-small);color:var(--ink-3)}.vvtick{margin:0 0 var(--s1);font-size:var(--t-small);color:var(--ink-3);min-height:1.3em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vvtick b{color:var(--ink);font-weight:700}.vvhead{margin:0 0 var(--s5)}.vvhead h1{margin:0 0 .55em}.vvprog{max-width:var(--w-lg);margin:0 auto}.vvprog .bar{height:.55rem;border:2px solid var(--ink);background:var(--paper);margin:0 0 var(--s2)}.vvhead .vvstat{color:var(--ink)}.vvhead .vvtick,.vvhead .vvel{color:var(--ink-2)}.vvhead #final{max-width:var(--w-lg);margin:0 auto}.vvhead .amt{animation:vvnumin .5s cubic-bezier(.2,1.5,.4,1)}@keyframes vvnumin{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}#final h3{margin:var(--s3) 0 0}
#final p{margin:var(--s1) 0 0;color:var(--ink-2)}#vvbar{display:block;height:100%;width:2%;background:linear-gradient(90deg,var(--accent) 0%,var(--gold) 50%,var(--accent) 100%);background-size:220% 100%;animation:vvpulse 2.2s ease-in-out infinite;transition:width .8s ease}@keyframes vvpulse{0%,100%{background-position:0% 0}50%{background-position:100% 0}}#vvbar.is-done{animation:none;background:var(--accent)}@media(prefers-reduced-motion:reduce){#vvbar{animation:none;background:var(--accent)}}.vvdeck{width:100%;margin-top:var(--s4);min-height:33rem}@keyframes vvbear{from{opacity:0;transform:translateY(30px) rotate(-1.1deg) scale(.95)}55%{opacity:1}78%{transform:translateY(-3px) rotate(.2deg)}to{opacity:1;transform:none}}.fdcar-cell.vvborn>*{animation:vvbear .6s cubic-bezier(.22,1.35,.36,1) both}.vvv--mt{margin-top:var(--s2)}.vv-ghost{display:flex;gap:var(--s2);margin-top:var(--s2);align-items:stretch}@media(prefers-reduced-motion:reduce){.fdcar-cell.vvborn>*{animation:none}}.vvdeck .fdmail-top{min-height:3.6rem;align-items:flex-start}.vvdeck .acct-fd-body>:first-child{margin-top:var(--s2)}.vvdeck .acct-fd-body p+p,.acct-fd-body p+.vvvoices{margin-top:var(--s2)}.vv-ed .fdmail-subj{padding-left:0;padding-right:0;padding-top:0}.vvacc-on .fdcar-next{display:none}.vv-ctl{margin-left:auto;display:grid;justify-items:end}.vv-ctl-face,.vv-ctl-edit{grid-area:1/1;display:flex;gap:var(--s2)}.vvx:checked~.fdmail-top .vv-ctl-face{visibility:hidden}.vvx:not(:checked)~.fdmail-top .vv-ctl-edit{visibility:hidden}.vv-layers{display:grid;flex:1 1 auto;min-height:0}.vv-face,.vv-ed{grid-area:1/1;min-width:0;min-height:0}.vv-face{display:flex;flex-direction:column;min-height:0}
.vv-face .acct-fd-body p{white-space:pre-line}
/* the knowledge is complete on the face: the body scrolls inside the fixed card, the way the transcript does */
.vvedc .vv-face .acct-fd-body{overflow:auto;min-height:0;scrollbar-width:thin;padding-bottom:var(--s4)}
/* the scroll area of an editable card: the fade sits on it, the action slot sits below it */
.vv-scroll{position:relative;min-height:0;flex:1 1 auto;display:flex;flex-direction:column}.vv-scroll>.acct-book{padding-bottom:var(--s4)}
.vv-scroll.is-more::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--s6);background:linear-gradient(to bottom,transparent,var(--paper) 70%);pointer-events:none}
.vv-face>.card-cta{padding:0 var(--s3) var(--s3);margin-top:0}.vv-ed{visibility:hidden;display:flex;flex-direction:column;gap:var(--s2);padding:var(--s2) var(--s3) var(--s3)}.vv-ed input{flex:0 0 auto}.vv-ed textarea{flex:1 1 auto;resize:none;line-height:1.45;min-height:0}.vvtopic,.vvadded{position:relative}.vvx{position:absolute;top:1.2rem;left:1.25rem}.vvx:checked~.vv-layers .vv-face{visibility:hidden}.vvx:checked~.vv-layers .vv-ed{visibility:visible}.vvx:focus-visible~.fdmail-top .vv-editbtn{outline:3px solid var(--accent);outline-offset:1px}.vvbig{width:100%;flex:1 1 auto;display:flex;align-items:center;justify-content:center;margin:var(--s3) 0 0;cursor:pointer;font:inherit;padding:0;background:transparent;border:0;color:var(--ink-3)}.vvbig:hover,.vvbig:focus-visible{color:var(--ink)}.vvplus{width:6.5rem;height:6.5rem;display:block}.field textarea{font-family:inherit;font-size:var(--t-body);padding:var(--s3) var(--s3);border:2px solid var(--ink);background:#fff;color:var(--ink);width:100%;min-width:0;box-sizing:border-box;min-height:7rem;resize:none;line-height:1.4}.acct-fd-body .field input{box-sizing:border-box}.acct-fd-body>p{margin:0;color:var(--ink-2);font-size:var(--t-small)}.vvvoices{display:flex;flex-direction:column;gap:var(--s2)}.vvv{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s2);border:2px solid var(--ink);background:var(--paper);cursor:pointer;text-align:left;font:inherit;width:100%;box-sizing:border-box;border-radius:0}.vvv[aria-pressed="true"]{background:var(--ink);color:var(--paper)}#vvasks{flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:thin}#vvc-asks .vv-ghost{flex:0 0 auto}.vvv.btn--primary{background:var(--accent);color:#fff}.vvv.btn--primary:hover,.vvv.btn--primary:focus-visible{background:var(--accent-b)}.vvv .gl{flex:none}.vva[aria-pressed="false"] .gl{visibility:hidden}.vva[aria-pressed="false"]{color:var(--ink-3)}.vva[aria-pressed="false"]>span{text-decoration:line-through}.vvv-nm{font-weight:800}.vvv-nt{font-size:var(--t-small);opacity:.7;font-weight:400}.vvlearned{margin-top:var(--s2);font-size:var(--t-small);color:var(--ink-3);line-height:1.45}.vvdeck{position:relative;z-index:1}.vvdeck .fdcar-track{scroll-snap-type:none}.vvghost .tile,.vvghost:hover .fdmail{border-style:dashed;border-color:rgba(21,18,13,.3);box-shadow:none;background:rgba(250,243,231,.35);position:relative;overflow:hidden}.vvghost .fdmail-subj{opacity:.4}.vvwait{margin:var(--s2) 0 0;padding:0 var(--s3);font-size:var(--t-small);color:var(--ink-3);opacity:.75}.vvghost .vvwait{opacity:.85}.vvghost .tile{animation:vvghost-breathe 2.6s ease-in-out infinite}.vvghost .tile::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-100%);animation:vvghost-sweep 2.6s ease-in-out infinite}/* The knowledge is a PILE waiting to be dealt: the slot wears two cards behind it, and each topic card deals OFF that pile rather than rising like a card that was always going to be there (9 Sep 2026). */.vvstack .tile{box-shadow:10px 10px 0 -3px rgba(21,18,13,.16),20px 20px 0 -6px rgba(21,18,13,.09)}.vvborn>.vvtopic{animation:vvdeal .52s cubic-bezier(.22,1.2,.36,1) both}@keyframes vvdeal{from{opacity:0;transform:translate(26px,14px) rotate(2.5deg) scale(.94)}60%{opacity:1}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.vvborn>.vvtopic{animation:none}}@keyframes vvghost-breathe{0%,100%{border-color:rgba(21,18,13,.22)}50%{border-color:rgba(21,18,13,.45)}}@keyframes vvghost-sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}@media (prefers-reduced-motion:reduce){.vvghost .tile,.vvghost .tile::after{animation:none}.vvghost .tile::after{content:none}}.vvdeck .fdcar-track::after{content:"";flex:0 0 max(0px,calc(100vw - max(var(--edge),calc(50vw - 580px + var(--edge))) - 22.4rem))}
/* the stills preview grid */
.g-grid{display:flex;flex-wrap:wrap;gap:var(--s5);align-items:flex-start;margin-top:var(--s4)}
.g-frame{overflow:hidden;box-shadow:0 14px 50px rgba(0,0,0,.45)}
.g-card figcaption{margin-top:var(--s2);font-size:var(--t-small);line-height:1.6}

/* ===================================================================
   THE GRAMMARS (3 Sep 2026) — one rule per family. A per-element rule
   above that restates one of these is dead; delete it when you find it.
   =================================================================== */
/* focus */
:is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* surfaces — quiet, ink */
.tile,.card,.flow-step,.faq-card,.qpanel,.aftr-panel,.rv,.nav-menu{background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.panel,.fig,.cp,.fdmail,.form-ok,.enterprise,.card--ink,.card.is-rec{background:var(--paper);border:2px solid var(--ink);box-shadow:var(--shadow)}
.fdmail{padding:0}
.flow-step{padding:clamp(1.7rem,2.6vw,2.4rem)}
/* a card with one CTA is one link: the hit stretches over the card, the CTA is its visible label */
.card,.enterprise{position:relative}
.card-hit{position:absolute;inset:0;z-index:2;background:none;border:0;padding:0;margin:0;cursor:pointer;font:0/0 a;color:transparent}
.card:has(.card-hit:focus-visible),.enterprise:has(.card-hit:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.enterprise:hover{box-shadow:10px 10px 0 var(--shadow-ink)}
/* the card's hover is the CTA's hover — the hit sits over the label, so the label follows the card */
:is(.card,.enterprise):hover .btn--primary,:is(.card,.enterprise):focus-within .btn--primary{background:var(--accent-b)}
:is(.card,.enterprise):hover .btn--ghost,:is(.card,.enterprise):focus-within .btn--ghost{background:var(--ink);color:var(--paper)}
/* the attention lift — a reading unit lifts under the pointer or keyboard focus; ghosts never */
.tile:hover,.card:hover,.flow-step:hover,.faq-card:hover,.tile:focus-within,.card:focus-within{box-shadow:8px 8px 0 var(--shadow-ink)}
.fdmail:hover,.cp:hover,.card--ink:hover,.card.is-rec:hover,.fdmail:focus-within{box-shadow:10px 10px 0 var(--shadow-ink)}
.card,.tile,.fdmail,.cp,.flow-step,.faq-card{transition:box-shadow .15s}
/* the one square control */
.chip-btn,.btn--sq,.fact-tog,.vvaccbtn,.flip-chip,.fdcar-prev,.fdcar-next,.chip-btn--lg{width:38px;height:38px;min-height:38px;padding:0;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;background:var(--paper);border:2px solid var(--ink);color:var(--ink);cursor:pointer;line-height:1;box-shadow:none}
/* the deck's accept chip exists only while the walk holds a card to accept */
.fdcar:not(.vvacc-on) .vvaccbtn{display:none}
.chip-btn:hover,.btn--sq:hover,.fact-tog:hover,.vvaccbtn:hover,.flip-chip:hover,.fdcar-prev:hover,.fdcar-next:hover,.fact-tog.is-on,.chip-btn.is-on{background:var(--ink);color:var(--paper)}
.chip-btn:disabled,.fdcar-prev:disabled,.fdcar-next:disabled{opacity:.35;cursor:default;background:var(--paper);color:var(--ink)}
/* choices and tabs */
.rv-opt,.slot span{font-family:var(--sans);font-size:var(--t-small);font-weight:700;padding:var(--s1) var(--s2);border:2px solid var(--ink);color:var(--ink-2);background:transparent;cursor:pointer;display:inline-flex;align-items:center;user-select:none}
.rv-opt.is-on,.slot input:checked+span{background:var(--ink);color:var(--paper)}
.cp-tab,.acct-cal-tabs button{flex:1;font-family:var(--sans);font-weight:700;font-size:var(--t-small);padding:var(--s2) var(--s2);min-height:40px;background:transparent;color:var(--ink-2);border:0;border-bottom:2px solid var(--line);cursor:pointer;transition:color .12s,border-color .12s}
/* captions — the caption, the chip caption */
.acct-sub,.facet-cap,.foot-h,.role,.fdmail-row .k,.cp-who,.field label,.cmp thead th,.rv-lab,.fwd-net,.acct-lab,.mock-rows dt,.bw-q{font-size:var(--t-cap);letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-2)}
.ep-m,.tag,.nm-tag,.offer-box-spots{font-size:var(--t-cap);letter-spacing:.08em;text-transform:uppercase;font-weight:700}
/* small print — one size; weight where the line carries a figure */
.src,.micro,.fact-sub,.pl-why,.acct-note,.hero-trust-src,.cp-t2,.foot-bottom,.fdmail-foot,.rtile-stat,.offer-box-guarantee,.ntf-tx span,.fig-t,.fconv,.field-err,.sched-tz,.opt,cite,.risk,.form-ok,.trust,.nm-d,.f-role,.foot-col a,.vvtick,.vvstat,.rv-done,.trust-t,.trust-n{font-size:var(--t-small)}
.trust-n{font-weight:800;font-size:var(--t-body)}
.src,.rtile-stat,.fdmail-foot,.form-ok{font-weight:700}
/* headings — one size each */
h1,.pricing-top h1{font-size:var(--t-h1)}
h2,.panel h2,.legal h2{font-size:var(--t-h2)}
h3,.card h3,.faq-card h3,.enterprise--slim h3,.flow-bd h3,.hexcap .k,.fdmail-subj{font-size:var(--t-h3)}
/* links — inline, arrow; the topbar and footer keep the nav link */
.src-a,.legal a,.faq-card .a a,.offer-risk a,.card .li,.acct-brief a:not(.btn),.consent a,.fwd a{color:var(--accent-d);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
.arrow,.acct-doubt-link a,.pl-link,.nm-more,.acct-back a,.btn--text{color:var(--accent);font-weight:700;text-decoration:none;border:0;background:none;padding:0;min-height:0;box-shadow:none}
.arrow:hover,.acct-doubt-link a:hover,.pl-link:hover,.nm-more:hover,.acct-back a:hover,.btn--text:hover{color:var(--accent-d)}
/* the one input */
.field input,.field select,.field textarea,.rv-form textarea,.fact-form input,.vv-ed input,.vv-ed textarea,.ue-inputs input,.lb-fields input{font-family:var(--sans);font-size:var(--t-body);color:var(--ink);border:2px solid var(--ink);background:#fff;padding:var(--s2) var(--s3);min-height:48px;width:100%;box-sizing:border-box}
/* marks — hero, card, row */
.hmark,.hex{width:50px;height:58px}
.fdmail-mk,.mk,.tile .mk,.rtile-mk,.cp-ico,.nm-mk{width:1.35rem;height:1.55rem;display:block}
.pl-mk,.cmp-mk,.ntf-mk,.fact-mk .gl{width:15px;height:17px}
/* rows — a fact row and a plan row are one row */
.acct-plan li{display:flex;align-items:center;gap:var(--s2);border-top:1px solid var(--line);padding:var(--s2) 0}
.pl-role{font-weight:700;font-size:var(--t-small);overflow-wrap:anywhere}
.fact-sub,.pl-why{font-size:var(--t-small);color:var(--ink-2)}
/* feedback — the status box (.form-ok) and the inline note */
.acct-note,.rv-done,.field-err.show,.vvtick{font-size:var(--t-small);color:var(--ink-2);margin:var(--s1) 0 var(--s2)}
.field-err.show{color:var(--accent-d);font-weight:700}
.form-ok--page{border-color:var(--accent)}
.fact{align-items:center}
.fact-tg,.fact-rm,.vn-act{display:flex;align-items:center}
.fact-editbtn,.fact-menubtn{margin:0}
/* the one input inside a row */
.field--bare{margin:0;flex:1;gap:0}.field--bare.vvv--mt{margin-top:var(--s2)}
.field--bare input,.field--bare select,.field--bare textarea,input.field--bare{min-height:38px;padding:var(--s1) var(--s2)}
.fact-form .field{flex:1}
/* the arrow link */
.arrow--back::before{content:"← "}
.arrow:not(.arrow--back)::after{content:" →"}
/* the bare number */
.amt.is-accent{color:var(--accent);text-decoration:none}
/* key/value rows: keys as wide as they need, values right when the row says so */
.fdmail-row{grid-template-columns:minmax(4.4rem,auto) 1fr}
.fdmail-rows--r .v{text-align:right}
.dash-tab>.fdmail-rows{padding:0 var(--s3)}
/* ticks with arrows */
.ticks--arrows li::before{content:"→";background:none;color:var(--accent-d);font-weight:800}
/* the optional marker on a field label — quiet, not a second caption */
.field .opt{font-size:var(--t-cap);text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink-3)}
/* the LinkedIn badge beside a name, wherever the name is */
.li{display:inline-flex;margin-left:var(--s1);color:var(--ink-3);vertical-align:-2px;transition:color .15s}
.li svg{width:15px;height:15px}
.li:hover{color:var(--accent)}
/* the bare number's companions */
.amt-was{margin-left:var(--s2)}
.per{margin-left:var(--s1);font-size:var(--t-small);color:var(--ink-2)}
.acct-fd-body>.field--bare{flex:0 0 auto}
.acct-plan li{align-items:flex-start}
.pl-mk{margin-top:var(--s1)}
.acct-brief{margin-bottom:var(--s4)}
.acct-fd-body > .acct-lab{margin:var(--s3) 0 0}

/* merged by the consolidation pass: one rule per shared declaration (state fills, hidden-by-state, weights, rhythm) */
.slot input:checked+span,.slot span:hover,.slot--day .sched-d:hover{box-shadow:3px 3px 0 var(--ink)}