@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-in{fill:var(--ink)}
.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,.pick{display:flex;align-items:flex-start;gap:var(--s2);padding:var(--s2) var(--s2);text-decoration:none;border:0}
.picks{display:flex;flex-direction:column;min-width:0}
.pick{width:100%;min-width:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.pick.is-on{background:var(--ink);color:var(--paper)}
.pick.is-on .nm-t,.pick.is-on .nm-d{color:var(--paper)}
.pick .nm-t,.pick .nm-d{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.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 */
body{min-height:100svh;display:flex;flex-direction:column}main{overflow:clip;flex:1 0 auto}
.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;grid-template-columns:minmax(0,1fr);gap:var(--s2);margin-bottom:var(--s2)}
/* What opens from a field floats over the page below it: nothing under it moves. */
.field-ctl{position:relative;display:grid;min-width:0}
/* It opens clear of the field's focus ring (3px at 2px), white with the field's own ink edge, lifted off the form by the panels' shadow. */
.field-drop{position:absolute;left:0;right:0;top:calc(100% + var(--s2));z-index:6;display:grid;grid-template-columns:minmax(0,1fr);padding:var(--s1)}
.field .field-drop{background:#fff}
.field-mark{position:absolute;right:0;top:calc(100% + var(--s1));font-size:var(--t-cap);line-height:1.2;color:var(--ink-3);pointer-events:none}
.field-ctl:has(>.field-drop)>.field-mark{visibility:hidden}

.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-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-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}
.gl{width:1.05rem;height:1.05rem;display:block}
.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-form{visibility:hidden;display:flex;gap:var(--s2);align-items:center}
.fact-form input,.vv-ed input,.vv-ed textarea{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,.vv-ctl-edit .vv-cancel{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-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(--row-bg,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(--row-bg,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)}
/* The hold's red fill is the square's own inset shadow, painted with its background and so always under its bin. It was a layer sliding over the square with the bin lifted above it by z-index, and WebKit paints an animating layer over its siblings whatever their z-index — the bin vanished under the bar every time a new delete used it (25–26 Sep 2026). 34px is the square's inside (38 less its edges): the band reaches the far edge as the hold fires. */
.btn--sq.fact-del{color:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 var(--accent)}
.btn--sq.fact-del.is-holding{box-shadow:inset 34px 0 0 var(--accent);transition:box-shadow 1.4s linear;color:var(--ink)}
/* The bin crosses two grounds as the band passes under it, so it wears the colour both carry: ink over the paper square, paper over the hovered (ink) one. */
.btn--sq.fact-del.is-holding:hover{color:var(--paper)}
.fact-tog{appearance:none}.vvrow--add .btn{opacity:.55}.vvrow--add: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)}
.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}
a.tile.acct-cardlink:hover h3{color:var(--accent)}
.acct-tiles{margin-top: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}
  /* The account, v2 (22 Sep 2026): each domain is a screen. A section fills the viewport under the sticky topbar and the page snaps section to section; the overview is the first screen. Cards inside keep their own horizontal snap. */
  html:has(.page-acct--snap){scroll-snap-type:y mandatory}
  .page-acct--snap .section{min-height:calc(100svh - 65px);align-content:center;scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:65px}
  /* The last screen and the footer share one viewport: the last section gives up the minimal footer's height (1.1rem padding either side of one line), so resting on the final screen shows the footer under it. */
  .page-acct--snap main>:last-child .section,.page-acct--snap main>section:last-child{min-height:calc(100svh - 65px - 3.7rem);padding-bottom:var(--s3)}
  .page-acct--snap .foot{scroll-snap-align:end}
  /* The rail (22 Sep 2026): the sections as a column of marks in the left margin, fixed at the viewport's middle; the current one in ink, the rest quiet. It exists only where the margin does. */
  .rail{position:fixed;left:var(--s3);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:var(--s3);z-index:40}
  .rail-a{display:block;color:var(--ink);opacity:.35;transition:opacity .2s}
  .rail-a:hover,.rail-a:focus-visible,.rail-a[aria-current]{opacity:1}
  .rail-demo{position:relative;min-height:12rem}.rail-demo .rail{position:absolute;left:0;top:50%}
  @media(max-width:1300px){.rail{display:none}}
}
.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 clamp their text at two lines. */
.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}
.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 .tile{overflow:hidden}
.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}
/* The board (24 Sep 2026, the CRM's stages): where five cards fit, every card side by side across the page between its gutters (where the lanes' carousels bleed), a stage never wider than a lane's card, each card's list scrolling inside it; narrower, the carousel it is everywhere else, one stage per view on a phone. Across the page a stage is wide enough to read its names (on the content line five came to 200px each). */
.fdcar--board{margin-top:var(--s3)}
@media(min-width:1100px){
  .fdcar--board .fdcar-track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s3);overflow:visible;padding:2px var(--edge) var(--s2);max-width:calc(5 * 21rem + 4 * var(--s3) + 2 * var(--edge));margin-inline:auto;box-sizing:border-box}
  .fdcar--board .fdcar-cell{max-width:none}
  .fdcar--board .fdcar-nav{display:none}
}
.fdcar-cell{flex:0 0 21rem;max-width:21rem;scroll-snap-align:start;box-sizing:border-box;display:flex}
.acct-fd,.fdcar-cell>.fdmail{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{-webkit-line-clamp:unset;display:block}
.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-book{margin-top:var(--s2)}
.acct-fd .acct-book{max-height:none;flex:1 1 auto;min-height:0;overflow:auto}
/* No native bar on any scroller inside a scroll area: the fades are the affordance, as on the carousel track. */.acct-fd .acct-book,.acct-fd .acct-fd-body,.vv-scroll>*{scrollbar-width:none}
.acct-fd .acct-book::-webkit-scrollbar,.acct-fd .acct-fd-body::-webkit-scrollbar,.vv-scroll>*::-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%}
.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{display:flex;flex-direction:column}

.fdmail-top{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s3) var(--s2)}

/* The title sits in the card's top row, between the mark and the card's controls (Andrei, 23 Sep 2026). A call card's top row keeps room for two lines, so the cards in a row start their rows level and a one-line title still sits centred on the mark. */.fdmail-subj{font-weight:800;line-height:1.25;letter-spacing:-.01em;flex:1;min-width:0}.fdmail:not(.acct-fd) .fdmail-top{min-height:calc(var(--s3) + var(--s2) + 2.5 * var(--t-h3))}
.fdmail-rows{padding:var(--s2) var(--s3) var(--s1)}
.fdmail-row{display:grid;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-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}/* A report in the row beside the calls: the figure, its word, then the rows (24 Sep 2026). */.acct-rep{flex:1 1 auto;padding:var(--s2) var(--s3) 0}.acct-rep>p{margin:0 0 var(--s3);color:var(--ink-2)}.acct-rep .fdmail-rows{padding-left:0;padding-right:0}
.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 .mk{margin-bottom:var(--s3)}
.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)}
.tile-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{padding:var(--s4) var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
/* 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. The lift
   itself is the grammar's (the attention lift); a card in the deck lifts
   8px, not the ink card's 10px, because the track's 8px bottom padding is
   all the clearance it has. */
.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)}
/* 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,.acct-rep .price .amt{font-size:var(--t-num);font-weight:800;letter-spacing:-.03em}

.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)}@media(prefers-reduced-motion:reduce){.fdcar-cell.vvborn>*{animation:none}}.vvdeck .fdmail-top{min-height:calc(var(--s3) + 38px + var(--s2))}.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)}.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;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,rgba(246,240,232,0),rgba(246,240,232,.85) 55%,var(--paper));pointer-events:none}/* The same fade at the head once the list has scrolled: what is above is as findable as what is below. */.vv-scroll.is-above::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--s6);background:linear-gradient(to top,rgba(246,240,232,0),rgba(246,240,232,.85) 55%,var(--paper));pointer-events:none;z-index:1}
.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)}.vvvoices>*{flex-shrink:0}/* An island in a lane: its wrapper lays out as nothing, so its card is the lane's cell (the booking system in the account's lane). */.fdcar-track>[data-island]{display:contents}.vvv{display:flex;align-items:center;gap:var(--s2);padding:0 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;min-height:38px}.vvv[aria-pressed="true"],.vvv.is-on{background:var(--ink);color:var(--paper);--row-bg:var(--ink)}/* THE row (23 Sep 2026): every row is one box of one height (the square control's 38px), its edge on the content line (the rule above). A row with squares: its value then its squares, each square the square control itself, its border lying on the row's (the row draws no right edge; neighbours share an edge), still on press; more than one go behind the dots, which open over a fade inside the box. Being edited, the row is the field (white), its text where it was. The row that adds one has the dashed edge. */.vvrow{padding:0 0 0 var(--s2);border-right:0;align-items:stretch;gap:0;cursor:auto;position:relative}.vvrow .fact-main{flex:1;min-width:0}.vvrow .fact-main{display:grid;align-items:stretch}.vvrow .vvrow-face{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0 var(--s2) 0 0;text-align:left;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:var(--s2);min-width:0;height:100%}button.vvrow-face{cursor:pointer}.vvrow .vvrow-face>span{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.vvrow .btn--sq{margin:-2px 0 -2px -2px;height:auto;align-self:stretch}.vvrow .btn--sq:active{transform:none}.vvrow form{display:flex;align-self:stretch}.vvrow .fact-form{align-self:stretch;align-items:stretch;gap:0}.vvrow .fact-form input{border:0;background:transparent;padding:0 var(--s2);min-height:34px;height:100%}/* Open, the value is shown whole (Andrei, 24 Sep 2026): the field wraps and grows with it, one line tall for a short value, its text where the row's was. The squares stay squares at the top; the box draws its own right edge below them. */.vvrow .fact-form textarea{field-sizing:content;display:block;font-family:var(--sans);font-size:var(--t-body);line-height:1.4;color:var(--ink);border:0;background:transparent;padding:6px var(--s2);min-height:34px;resize:none;overflow:hidden;width:100%}.vvrow:has(.fact-x:checked){border-right:2px solid var(--ink);align-items:flex-start}.vvrow:has(.fact-x:checked) .btn--sq{align-self:flex-start;height:38px}.vvrow:has(.fact-x:checked)>.fact-editbtn{margin-right:-2px}.vvrow:has(.fact-x:checked) .fact-main,.vvrow:has(.fact-x:checked) .fact-form{align-self:stretch}.vvrow:has(.fact-x:checked){background:#fff;color:var(--ink);padding-left:0}/* A row that can't be chosen draws no box (Andrei, 23 Sep): the box is there, unseen, its edge on the content line like every row's, so its value sits indented from the title as body copy does. Opened, the box shows and becomes the field; nothing moves and nothing reaches past the line. */.vvrow:not(.vvrow--pick):not(.vvrow--add):not(.vvrow--slot){border-color:transparent;background:transparent}.vvrow:not(.vvrow--pick):not(.vvrow--add):has(.fact-x:checked){border-color:var(--ink);background:#fff}.vvrow--slot{border:2px dashed rgba(21,18,13,.16);background:transparent;min-height:38px;cursor:default}.vvrow--add{border-style:dashed;border-color:var(--ink-2);border-right-width:2px;background:transparent;padding-left:0}.vvrow--add .btn--sq{margin:0;background:transparent;border-style:dashed;border-color:transparent;border-left-color:var(--ink-2)}.vvrow:has(input:focus-visible),.vvrow:has(textarea:focus-visible){outline:3px solid var(--accent);outline-offset:2px}.vvrow input:focus-visible,.vvrow textarea:focus-visible{outline:none}.vvrow--add:focus-within .btn--sq{border-left-style:solid;border-left-color:var(--ink)}.vvrow--add:focus-within{border-style:solid;border-color:var(--ink);background:#fff}.vvrow--add .fact-form{visibility:visible;flex:1}.vvrow .fact-ctl{top:-2px;bottom:-2px;right:36px;transform:translateX(10px);gap:0;padding-left:0;align-items:stretch}.vvrow .fact-ctl .btn--sq{margin-top:0;margin-bottom:0}.vvrow .fact-mx:checked~.fact-ctl{transform:none}.vvrow .fact-ctl::before{top:2px;bottom:2px;right:calc(100% + 2px)}.vvv.is-on .fact-mx:checked~.fact-menubtn,.vvv.is-on .fact-x:checked~.fact-editbtn{background:var(--paper);color:var(--ink)}/* A list that is the scroller clips 5px above the area (its focus-ring room, below): the head fade starts there too, so no sliced row shows above it. */.vv-scroll.is-above:has(>.vvvoices)::before{top:-5px}.vv-scroll+.vvvoices,.vvvoices+.vvvoices,.vvvoices+.vv-scroll{margin-top:var(--s2)}/* A fact list inside a scroll area IS the scroller. A scroller clips what is drawn outside its box, and the focus ring (3px at 2px) lives there: the list wears that much padding, pulled back by the same margin, so the ring on a row's input or chip renders whole; the last row scrolls clear of the fade. */.vv-scroll>.vvvoices{flex:1 1 auto;min-height:0;overflow:auto;padding:5px 5px var(--s5);margin:-5px -5px 0}.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}.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-top{opacity:.4}.vvpend .tile,.vvpend:hover .fdmail{border-style:dashed;box-shadow:none}.vvghost .tile{animation:vvghost-breathe 2.6s ease-in-out infinite}.vvghost .tile::after,.vvworking .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}.vvworking .tile{position:relative;overflow:hidden}/* A row that plays: it sweeps while the sound loads, then an accent line runs along its foot as it plays. */.vvv.is-loading,.vvv.is-sounding{position:relative;overflow:hidden}.vvv.is-loading::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(140,140,140,.35) 50%,transparent 70%);transform:translateX(-100%);animation:vvghost-sweep 1.1s ease-in-out infinite}.vvv.is-sounding::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:var(--p,0%);background:var(--accent);transition:width .25s linear;pointer-events:none}@media (prefers-reduced-motion:reduce){.vvv.is-loading::after{animation:none;transform:none;opacity:.5}}/* Locked, ahead of the walk: the card is there, opaque and still, its title whole over a covered face. The cover is the hatch every not-yet slot wears (.vvcover). */.vvlocked .tile,.vvlocked:hover .fdmail{background:var(--paper);border-color:rgba(21,18,13,.35);animation:none;display:flex;flex-direction:column}.vvlocked .tile::after{content:none}.vvlocked .fdmail-top{opacity:1}.vvcover{flex:1 1 auto;margin:0 var(--s3) var(--s3);min-height:4rem;border:2px solid rgba(21,18,13,.12);background:repeating-linear-gradient(135deg,rgba(21,18,13,.09) 0 2px,transparent 2px 12px)}.vvslot{display:block;height:3.2rem;max-width:18rem;margin:0}/* A failed act: the accent edge until it goes through. */.vvalert .tile,.vvalert:hover .fdmail{border-color:var(--accent);border-style:solid}/* 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,.vvworking .tile::after{animation:none}.vvghost .tile::after,.vvworking .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,.rv,.nav-menu{background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.panel,.fig,.cp,.fdmail,.form-ok,.enterprise,.card.is-rec,.field-drop{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.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,.pl-why,.acct-note,.hero-trust-src,.cp-t2,.foot-bottom,.fdmail-foot,.tile-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,.tile-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,.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)}
/* a heading that is a link reads as the heading; under the pointer it turns accent (the CRM's lane headings and stage titles) */
.section-head h2 a,a.fdmail-subj{color:inherit;text-decoration:none}
.section-head h2 a:hover,a.fdmail-subj:hover{color:var(--accent)}
/* 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,.cp-ico,.nm-mk,.rail-mk,.rail-a svg{width:1.35rem;height:1.55rem;display:block}
.pl-mk,.cmp-mk,.ntf-mk{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}.pl-why,.field-note{font-size:var(--t-small);color:var(--ink-2)}.field-note{font-weight:400}
/* THE row as a link (24 Sep 2026, the CRM's board): one line, the name then its note, cut at the box's edge, a chip at the far end. A press carries it, so it never selects text and never offers the link's own menu. */
a.vvv{color:inherit;text-decoration:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
a.vvv>span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
a.vvv>.vvv-end{margin-left:auto;flex:none;overflow:visible}
/* A row not confirmed yet wears the dashed edge (landing, saving, the one still to come); a row being carried wears the lift. */
.vvv.is-pending{border-style:dashed}
.vvv.is-lifted{box-shadow:var(--shadow);pointer-events:none}
/* 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-tg,.fact-rm,.vn-act{display:flex;align-items:center}
.fact-editbtn,.fact-menubtn{margin:0}/* The dots own the menu: its squares slide out from under them, never over (Andrei, 24 Sep 2026). */.vvrow,.vn-cell{isolation:isolate}.fact-menubtn{position:relative;z-index:1}
/* 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)}
/* THE EDITABLE CARD'S TWO LAYERS SHARE ONE GEOMETRY (16 Sep 2026). The edit layer used to sit 8px higher, and its textarea wore the field grammar's body size and 16px padding, so every letter moved when the pencil was pressed. Now the layer wears the face's padding, the title stands where the title stands, and the textarea draws its frame 8px OUTSIDE the paragraph's box (negative margin, matching padding) at the paragraph's own size and leading, so the text does not move by a pixel between reading and editing. The title input does the same against the title. */
.vv-ed{padding:0 var(--s3) var(--s3);gap:0}

.vv-ed textarea{font-size:var(--t-small);line-height:1.55;padding:6px;border:2px solid var(--ink);margin:0 -8px 0;width:calc(100% + 16px);min-height:0}