/* ============================================================
   Creativ Adworks
   BRAND: NAVY + NEON CYAN. Values are the signed-off tokens from
   creativ-adworks-website/src/styles/tokens.css (Fernando, 2026-06-14).
   Prior gold, monochrome and azure directions are retired: do not
   reintroduce a warm accent here.
   Type: Cabinet Grotesk (display) + Switzer (body), both self hosted.
   Kiona survives only for small marks. Garet is retired.
   Cyan is an accent, not a tic. Headings are white. The accent is
   allowed on hairlines, small marks, focus, meters and one eyebrow.
   ============================================================ */

/* Cabinet Grotesk for display, Switzer for text. Both self hosted, both free.
   Garet read soft and dated at display size; these are the Swiss neo-grotesque
   family the reference sites use (Sierra runs GT America, Decagon FK Grotesk). */
@font-face{font-family:"Cabinet";src:url("fonts/cabinet-grotesk-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Cabinet";src:url("fonts/cabinet-grotesk-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Cabinet";src:url("fonts/cabinet-grotesk-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer";src:url("fonts/switzer-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer";src:url("fonts/switzer-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer";src:url("fonts/switzer-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Kiona";src:url("fonts/Kiona-Bold.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap}

:root{
  /* grounds, deep cinematic navy black */
  --ink:      #0a0e16;   /* page ground */
  --ink-2:    #060912;   /* deepest, hero and film bands */
  --ink-3:    #111726;   /* elevated: cards, calculator */
  --ink-4:    #172134;   /* surface: inputs, wells */

  /* accent, neon cyan light blue. One accent, used sparingly. */
  --lamp:     #25d6f0;
  --lamp-hi:  #5fe7ff;
  --lamp-dim: #12a6c4;
  --lamp-ink: #0a6d82;   /* the only accent safe as text on the paper panel */
  --lamp-wash:rgba(37,214,240,.13);

  --teal:     #12a6c4;   /* depth only */

  /* paper panel, the light editorial ground */
  --sheet:    #f5f7fa;
  --sheet-2:  #e4e9f0;
  --slate:    #0a1f44;   /* brand navy, type on paper */
  --slate-2:  #3d4a60;
  --slate-3:  #5a6880;

  /* type on the dark ground */
  --ivory:    #f5f7fa;
  --mist:     #aab4c4;
  --mist-2:   #8893a4;

  --line:     rgba(255,255,255,.10);
  --line-hi:  rgba(255,255,255,.20);
  --line-2:   rgba(10,31,68,.14);
  --line-cy:  rgba(37,214,240,.34);

  /* Headlines run in the body face at display size, exactly as the brand
     hero does. Kiona is caps only, so it is reserved for short marks. */
  --display:"Cabinet","Switzer",system-ui,-apple-system,sans-serif;
  --body:"Switzer",system-ui,-apple-system,sans-serif;
  --mark:"Kiona","Switzer",system-ui,sans-serif;

  --wrap:1220px;
  --gut:clamp(20px,5vw,72px);
  --band:clamp(80px,11vw,168px);
  --out:cubic-bezier(.19,1,.22,1);

  /* semantic stacking */
  --z-base:0; --z-raise:1; --z-sticky:40; --z-widget:1000;
}

*{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  margin:0;background:var(--ink);color:var(--mist);
  font-family:var(--body);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--lamp);color:oklch(0.16 0.02 60)}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.band{padding-block:var(--band);position:relative}
.band.sheet{background:var(--sheet);color:var(--slate)}
.band.ink2{background:var(--ink-2)}

/* ---------- type ---------- */
.d1,.d2,.d3{
  font-family:var(--display);font-weight:500;
  letter-spacing:-0.022em;line-height:1.015;margin:0;
  text-wrap:balance;color:#fff;
}
.sheet .d1,.sheet .d2,.sheet .d3{color:var(--slate)}
.d1{font-size:clamp(2.6rem,5.1vw,5rem)}
.d2{font-size:clamp(2rem,3.5vw,3.1rem);line-height:1.04}
.d3{font-size:clamp(1.35rem,2.1vw,1.75rem);letter-spacing:-0.018em;line-height:1.14}
.d1 em,.d2 em,.d3 em{font-style:normal;color:color-mix(in srgb,var(--mist) 62%,#fff)}
.sheet .d1 em,.sheet .d2 em,.sheet .d3 em{color:var(--slate-2)}

.lede{font-size:clamp(1.1rem,1.65vw,1.32rem);line-height:1.6;max-width:60ch;margin:1.5rem 0 0;color:var(--mist)}
.sheet .lede{color:var(--slate-2)}
p{text-wrap:pretty}

/* One named marker, used three times on the whole site, not above every section. */
.mark{
  display:inline-flex;align-items:center;gap:.7rem;margin:0 0 1.4rem;
  font-family:var(--display);font-weight:500;font-size:.82rem;
  letter-spacing:.02em;color:var(--lamp);
}
.mark::before{content:"";width:26px;height:1px;background:var(--lamp);opacity:.8}
.sheet .mark{color:var(--lamp-ink)}
.sheet .mark::before{background:var(--lamp-ink)}

/* ---------- reveal (enhancement only) ---------- */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .7s var(--out) var(--d,0ms),transform .7s var(--out) var(--d,0ms)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:var(--z-sticky);background:oklch(0.155 0.014 254 / 0.86);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:.9rem var(--gut);display:flex;align-items:center;gap:1.4rem}
.nav a{text-decoration:none}
.nav-logo img{height:30px;width:auto}
.nav-links{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem 1.35rem;font-size:.9rem;color:var(--mist-2)}
.nav-links a{transition:color .22s var(--out)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--lamp)}
.nav-cta{padding:.5rem 1.05rem;border:1px solid var(--lamp);color:var(--lamp);border-radius:2px;font-weight:500;font-size:.86rem}
.nav-cta:hover{background:var(--lamp);color:oklch(0.16 0.02 60)}
@media(max-width:820px){.nav-in{flex-wrap:wrap;gap:.7rem}.nav-links{width:100%;margin-left:0;font-size:.82rem;gap:.35rem 1rem}}

/* ---------- buttons ---------- */
.acts{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.2rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.9rem 1.75rem;font-family:var(--display);font-weight:500;font-size:.94rem;text-decoration:none;border-radius:2px;transition:background .25s var(--out),color .25s var(--out),border-color .25s var(--out),transform .25s var(--out)}
.btn:hover{transform:translateY(-1px)}
/* The accent earns its keep here: one filled cyan action per view. */
.btn-1{background:var(--lamp);color:#04121a;border:1px solid var(--lamp)}
.btn-1:hover{background:var(--lamp-hi);border-color:var(--lamp-hi)}
.btn-2{border:1px solid var(--line-hi);color:var(--ivory);background:rgba(255,255,255,.02)}
.btn-2:hover{border-color:var(--lamp);color:var(--lamp-hi);background:var(--lamp-wash)}
.sheet .btn-2{border-color:var(--line-2);color:var(--slate);background:transparent}
.sheet .btn-2:hover{border-color:var(--lamp-ink);color:var(--lamp-ink);background:rgba(37,214,240,.08)}
/* Keyboard users get the same accent the mouse gets. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--lamp);outline-offset:3px;border-radius:2px}
.sheet .btn-2{border-color:var(--line-2);color:var(--slate)}
.sheet .btn-2:hover{border-color:var(--lamp-ink);color:var(--lamp-ink)}
:where(a,button,input,summary,[tabindex]):focus-visible{outline:2px solid var(--lamp);outline-offset:3px;border-radius:2px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(94vh,860px);display:flex;align-items:flex-end;overflow:hidden;padding-block:clamp(96px,16vh,170px) clamp(52px,8vh,84px)}
.hero-img{position:absolute;inset:0;z-index:var(--z-base);background:var(--ink-2)}
.hero-img img,.hero-reel{width:100%;height:100%;object-fit:cover;display:block}
.hero-reel{filter:saturate(1.1) contrast(1.02) brightness(.9)}
/* Two scrims: a vertical one for the nav and the base, plus a left-weighted one
   so the headline always has a dark bed regardless of what the reel is doing.
   Tinted to the brand navy, never to a warm black. */
.hero-img::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(6,9,18,.86) 0%,rgba(6,9,18,.62) 40%,rgba(6,9,18,.22) 72%,rgba(6,9,18,.30) 100%),
    linear-gradient(180deg,rgba(6,9,18,.62) 0%,rgba(6,9,18,.10) 30%,rgba(6,9,18,.10) 62%,rgba(6,9,18,.92) 100%)}
@media(prefers-reduced-motion:reduce){
  .hero-reel{display:none}
  .hero-img{background:var(--ink-2) url("hero-reel-poster.jpg") center/cover no-repeat}
}
.hero .wrap{position:relative;z-index:var(--z-raise);width:100%}
.hero .lede{max-width:54ch;font-size:clamp(1.12rem,1.75vw,1.38rem)}
.hero-foot{margin-top:clamp(2.2rem,5vh,3.4rem);padding-top:1.3rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.5rem 2.4rem;font-size:.88rem;color:var(--mist-2)}
.hero-foot b{color:var(--ivory);font-weight:500}

/* ---------- full bleed image band ---------- */
.bleed{position:relative;height:clamp(300px,46vh,560px);overflow:hidden}
/* Real work, shown in its real colour. An earlier pass graded this down to
   34 percent saturation and laid a cyan tint over it to keep the page "cool".
   Fernando overruled that on 2026-09-28: no desaturation, no blue layer, let
   the photography be colourful. Keep only the scrim the caption needs. */
.bleed img{width:100%;height:100%;object-fit:cover;filter:saturate(1.14) contrast(1.03)}
@media(max-width:600px){.bleed img{object-position:35% 50%}}
.bleed::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,9,18,.28) 0%,rgba(6,9,18,0) 30%,rgba(6,9,18,0) 58%,rgba(6,9,18,.82) 100%)}
.bleed-cap{position:absolute;inset-inline:0;bottom:0;z-index:var(--z-raise);padding-bottom:clamp(1.6rem,4vw,2.6rem)}
.bleed-cap p{margin:0;max-width:44ch;font-size:clamp(1.05rem,1.9vw,1.35rem);color:var(--ivory);font-family:var(--display);font-weight:500;letter-spacing:-.02em;line-height:1.25}

/* ---------- alternating practice bands ---------- */
.prac{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;padding-block:clamp(2.6rem,6vw,4.4rem);border-top:1px solid var(--line)}
.prac:first-of-type{border-top:0}
.prac:nth-child(even) .prac-media{order:-1}
.prac-media{position:relative;border-radius:3px;overflow:hidden;aspect-ratio:4/3}
.prac-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--out)}
.prac:hover .prac-media img{transform:scale(1.03)}
.prac-name{font-family:var(--display);font-weight:500;font-size:.8rem;letter-spacing:.01em;color:var(--lamp);margin:0 0 .5rem}
.prac h3{margin:0 0 .7rem}
.prac p{margin:0 0 1rem;color:var(--mist-2);max-width:56ch}
.prac ul{margin:0;padding-left:1.05rem;color:var(--mist-2);font-size:.95rem}
.prac li{margin-bottom:.3rem}
.prac li::marker{color:var(--lamp-dim)}
@media(max-width:880px){.prac{grid-template-columns:1fr;gap:1.6rem}.prac:nth-child(even) .prac-media{order:0}}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.2rem,5.5vw,5.5rem);align-items:start}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:2.4rem}}
.split-media{border-radius:3px;overflow:hidden}
.split-media img{width:100%;height:auto}

/* ---------- numbered leaks (a real sequence, so numbers earn it) ---------- */
.leaks{list-style:none;margin:0;padding:0;counter-reset:l}
.leaks li{counter-increment:l;padding:1.25rem 0;border-top:1px solid var(--line);display:grid;grid-template-columns:2.1rem 1fr;gap:1rem}
.leaks li:last-child{border-bottom:1px solid var(--line)}
.leaks li::before{content:counter(l);font-family:var(--display);font-weight:500;font-size:.85rem;color:var(--lamp-dim);padding-top:.32rem}
.sheet .leaks li{border-color:var(--line-2)}
.sheet .leaks li::before{color:var(--lamp-ink)}
.leaks h3{margin:0 0 .25rem;font-family:var(--display);font-weight:500;font-size:1.02rem;color:var(--ivory)}
.sheet .leaks h3{color:var(--slate)}
.leaks p{margin:0;font-size:.95rem;color:var(--mist-2)}
.sheet .leaks p{color:var(--slate-2)}

/* ---------- calculator ---------- */
.calc{margin-top:clamp(2.4rem,6vw,4rem);background:var(--ink);border:1px solid var(--line);border-radius:3px;padding:clamp(1.5rem,4vw,2.7rem);color:var(--mist)}
.calc h3{font-family:var(--display);font-weight:500;font-size:clamp(1.35rem,2.5vw,1.85rem);letter-spacing:-.025em;margin:0 0 .45rem;color:var(--ivory)}
.calc-note{margin:0 0 1.9rem;font-size:.92rem;color:var(--mist-2);max-width:58ch}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
@media(max-width:760px){.grid3{grid-template-columns:1fr}}
.field label{display:block;font-family:var(--display);font-weight:500;font-size:.78rem;color:var(--lamp);margin-bottom:.5rem}
.field input{width:100%;background:var(--ink-2);border:1px solid var(--ink-4);color:var(--ivory);font-family:var(--display);font-weight:500;font-size:1.2rem;padding:.7rem .85rem;border-radius:2px;font-variant-numeric:tabular-nums}
.field input:focus{border-color:var(--lamp);outline:none}
.calc-out{margin-top:1.9rem;padding-top:1.6rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.5rem}
.calc-out .big{font-family:var(--display);font-weight:500;font-variation-settings:'wdth' 100;font-size:clamp(2.5rem,6.2vw,4rem);color:var(--lamp-hi);letter-spacing:-.045em;line-height:.95;font-variant-numeric:tabular-nums}
.calc-out .cap{font-size:.92rem;color:var(--mist-2);max-width:32ch;line-height:1.5}

/* ---------- the demo panel ---------- */
.demo{margin-top:clamp(2.2rem,5vw,3.2rem);border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--ink-2)}
.demo-head{display:flex;flex-wrap:wrap;gap:.9rem 1.6rem;align-items:center;justify-content:space-between;padding:clamp(1.2rem,3vw,1.8rem) clamp(1.3rem,3.5vw,2.2rem);border-bottom:1px solid var(--line)}
.demo-who{display:flex;align-items:center;gap:1rem}
.demo-av{width:44px;height:44px;border-radius:50%;background:var(--lamp-wash);border:1px solid var(--lamp);display:grid;place-items:center;font-family:var(--display);font-weight:500;color:var(--lamp);flex:none}
.demo-who h3{margin:0;font-family:var(--display);font-weight:500;font-size:1.06rem;letter-spacing:-.015em;color:var(--ivory)}
.demo-who p{margin:.1rem 0 0;font-size:.86rem;color:var(--mist-2)}
.live{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--display);font-weight:500;font-size:.78rem;color:var(--lamp)}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lamp)}
@keyframes ping{0%{box-shadow:0 0 0 0 oklch(0.775 0.135 68/.5)}70%{box-shadow:0 0 0 12px oklch(0.775 0.135 68/0)}100%{box-shadow:0 0 0 0 oklch(0.775 0.135 68/0)}}
@media (prefers-reduced-motion:reduce){.live::before{animation:none}}
.demo-body{display:grid;grid-template-columns:1.05fr 1fr;gap:0}
@media(max-width:880px){.demo-body{grid-template-columns:1fr}}
.demo-shot{position:relative;min-height:230px}
.demo-shot img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
@media(max-width:880px){.demo-shot{min-height:0;aspect-ratio:3/2}}
.demo-side{padding:clamp(1.3rem,3.5vw,2.2rem);border-left:1px solid var(--line)}
@media(max-width:880px){.demo-side{border-left:0;border-top:1px solid var(--line)}}
.demo-side > p{margin:0 0 1.2rem;font-size:.95rem;color:var(--mist-2)}
.demo-try{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.demo-try li{padding-top:.8rem;border-top:1px solid var(--line)}
.demo-try b{display:block;font-family:var(--display);font-weight:500;font-size:.8rem;color:var(--lamp);margin-bottom:.2rem}
.demo-try span{font-size:.92rem;color:var(--mist-2)}
.demo-hint{display:flex;align-items:center;gap:.6rem;margin:1.5rem 0 0;padding:0;font-size:.9rem;color:var(--ivory)}
.demo-hint svg{flex:none}
.demo-rec{margin:.8rem 0 0;font-size:.84rem;line-height:1.55;color:var(--mist-2)}
.demo-rec a{color:var(--lamp);text-underline-offset:3px}

/* ---------- guardrails ---------- */
.rails{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(2.4rem,5vw,3.6rem)}
.rail{background:var(--ink);padding:1.7rem}
.ink2 .rail{background:var(--ink-2)}
.rail h3{margin:0 0 .5rem;font-family:var(--display);font-weight:500;font-size:.97rem;color:var(--lamp-hi)}
.rail p{margin:0;font-size:.93rem;color:var(--mist-2)}

/* ---------- vertical cards ---------- */
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:clamp(2.4rem,5vw,3.4rem);
  background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.vcard{position:relative;display:block;text-decoration:none;overflow:hidden;min-height:clamp(320px,34vw,430px);
  color:var(--ivory);background:var(--ink-2);isolation:isolate}
.vcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% 50%;
  transform:scale(1.02);transition:transform 1.2s var(--out),filter .6s var(--out);filter:saturate(1.12) brightness(1.1)}
.vcard::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,9,18,0) 0%,rgba(6,9,18,.06) 30%,rgba(6,9,18,.72) 56%,rgba(6,9,18,.93) 100%)}
.vcard:hover img,.vcard:focus-visible img{transform:scale(1.09);filter:saturate(1.2) brightness(1.2)}
.vcard-in{position:relative;z-index:var(--z-raise);height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem 1.35rem}
/* a hairline that draws in from the left on hover: the only accent these cards get */
.vcard-in::before{content:"";position:absolute;left:1.35rem;right:1.35rem;bottom:0;height:1px;background:var(--lamp);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--out)}
.vcard:hover .vcard-in::before,.vcard:focus-visible .vcard-in::before{transform:scaleX(1)}
.vcard-idx{font-family:var(--mark);font-size:.72rem;letter-spacing:.16em;color:var(--lamp);opacity:.85;margin-bottom:.6rem}
.vcard h3{margin:0 0 .35rem;font-family:var(--display);font-weight:500;font-size:clamp(1.1rem,1.5vw,1.3rem);letter-spacing:-.02em}
.vcard p{margin:0 0 .85rem;font-size:.88rem;line-height:1.5;color:var(--mist)}
.vcard .go{font-family:var(--display);font-weight:500;font-size:.8rem;color:var(--lamp);
  display:inline-flex;align-items:center;gap:.4rem}
.vcard .go::after{content:"";width:1.1rem;height:1px;background:var(--lamp);transition:width .4s var(--out)}
.vcard:hover .go::after{width:2rem}
@media(max-width:1100px){.vgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.vgrid{grid-template-columns:1fr}.vcard{min-height:270px}}

/* ---------- tiers ---------- */
.tiers{list-style:none;counter-reset:t;margin:clamp(2.4rem,5vw,3.6rem) 0 0;padding:0}
.tier{counter-increment:t;display:grid;grid-template-columns:auto 1fr;gap:clamp(1.1rem,3vw,2.6rem);padding:1.9rem 0;border-top:1px solid var(--line)}
.tier:last-child{border-bottom:1px solid var(--line)}
.tier::before{content:"0" counter(t);font-family:var(--display);font-weight:500;font-size:1.5rem;color:var(--lamp-dim);line-height:1;padding-top:.15rem}
.tier h3{margin:0 0 .45rem}
.tier p{margin:0;color:var(--mist-2);max-width:62ch}
@media(max-width:640px){.tier{grid-template-columns:1fr;gap:.5rem}}

/* ---------- work strip ---------- */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:clamp(2.4rem,5vw,3.4rem)}
@media(max-width:880px){.strip{grid-template-columns:repeat(2,1fr)}}
.strip figure{margin:0;position:relative;aspect-ratio:3/4;overflow:hidden}
.strip img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--out)}
.strip figure:hover img{transform:scale(1.05)}
.strip figcaption{position:absolute;inset-inline:0;bottom:0;padding:.9rem;background:linear-gradient(180deg,transparent,oklch(0.155 0.014 254/.92));font-family:var(--display);font-weight:500;font-size:.82rem;color:var(--ivory)}

/* ---------- steps ---------- */
.steps{list-style:none;counter-reset:s;margin:clamp(2.4rem,5vw,3.4rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.step{counter-increment:s;background:var(--ink);padding:1.8rem 1.5rem}
.step::before{content:"0" counter(s);display:block;font-family:var(--display);font-weight:500;font-size:1.1rem;color:var(--lamp-dim);margin-bottom:.85rem}
.step h3{margin:0 0 .4rem;font-family:var(--display);font-weight:500;font-size:1rem;color:var(--ivory)}
.step p{margin:0;font-size:.92rem;color:var(--mist-2)}

/* ---------- quiz + assessment ---------- */
.quiz{background:var(--ink);border:1px solid var(--line);border-radius:3px;padding:clamp(1.5rem,4vw,2.7rem);margin-top:clamp(2.2rem,5vw,3.2rem);color:var(--mist)}
.sheet .quiz{color:var(--mist)}
.quiz-head{display:flex;flex-wrap:wrap;gap:1rem;align-items:baseline;justify-content:space-between;margin-bottom:.5rem}
.quiz h3{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(1.35rem,2.5vw,1.85rem);letter-spacing:-.025em;color:var(--ivory)}
.langtog{display:flex;border:1px solid var(--ink-4);border-radius:2px;overflow:hidden}
.langtog button{background:none;border:0;color:var(--mist-2);font-family:var(--display);font-weight:500;font-size:.74rem;padding:.42rem .85rem;cursor:pointer;transition:background .2s,color .2s}
.langtog button[aria-pressed="true"]{background:var(--lamp);color:oklch(0.16 0.02 60)}
.quiz-note{margin:0 0 1.7rem;font-size:.92rem;color:var(--mist-2);max-width:58ch}
.q{padding:1.25rem 0;border-top:1px solid var(--line)}
.q-top{display:grid;grid-template-columns:1.9rem 1fr;gap:.9rem}
.q-n{font-family:var(--display);font-weight:500;font-size:.82rem;color:var(--lamp-dim);padding-top:.2rem}
.q-text{margin:0 0 .3rem;font-family:var(--display);font-weight:500;font-size:1.02rem;color:var(--ivory)}
.q-bench{margin:0 0 .85rem;font-size:.85rem;color:var(--mist-2)}
.q-opts{list-style:none;margin:0;padding:0;display:grid;gap:.42rem}
.q-opts label{display:flex;gap:.65rem;align-items:flex-start;padding:.6rem .8rem;border:1px solid var(--ink-4);border-radius:2px;cursor:pointer;font-size:.93rem;transition:border-color .2s,background .2s}
.q-opts label:hover{border-color:var(--lamp)}
.q-opts input{margin:.3rem 0 0;accent-color:var(--lamp);flex:none}
.q-opts label:has(input:checked){border-color:var(--lamp);background:var(--lamp-wash)}
.q-opts label:has(input:checked) span{color:var(--ivory)}
.q-fb{margin:.7rem 0 0;padding:.7rem .85rem;background:var(--lamp-wash);border:1px solid var(--lamp);border-radius:2px;font-size:.9rem;color:var(--ivory)}
.q-fb[hidden]{display:none}
.quiz-out{margin-top:1.7rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.meter{height:7px;background:var(--ink-3);border-radius:99px;overflow:hidden;margin:1rem 0 1.4rem}
.meter i{display:block;height:100%;width:0;background:var(--lamp);border-radius:99px;transition:width .6s var(--out)}
.quiz-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:1.5rem}
.quiz-nums .big{font-family:var(--display);font-weight:500;font-size:clamp(2.1rem,4.6vw,3rem);color:var(--lamp-hi);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.quiz-nums .cap{font-size:.88rem;color:var(--mist-2);margin-top:.5rem;line-height:1.5}
.band-out{margin-top:1.5rem;padding:1.05rem 1.25rem;border:1px solid var(--line);border-radius:2px}
.band-out h4{margin:0 0 .3rem;font-family:var(--display);font-weight:500;font-size:1rem;color:var(--lamp-hi)}
.band-out p{margin:0;font-size:.93rem;color:var(--mist-2)}
.capture{margin-top:1.7rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.capture form{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem}
.capture input[type=email]{flex:1 1 250px;background:var(--ink-2);border:1px solid var(--ink-4);color:var(--ivory);padding:.8rem .9rem;border-radius:2px;font-family:var(--body);font-size:1rem}
.capture input[type=email]::placeholder{color:var(--mist-2)}
.capture input:focus{border-color:var(--lamp);outline:none}
.capture .msg{margin:.9rem 0 0;font-size:.9rem}
.capture .msg.ok{color:oklch(0.80 0.13 160)}
.capture .msg.err{color:oklch(0.76 0.14 40)}
.capture .fineprint{margin:.8rem 0 0;font-size:.82rem;color:var(--mist-2)}
.side{border-top:1px solid var(--line);padding:1.5rem 0}
.side-head{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;align-items:baseline;margin-bottom:.4rem}
.side-head h3{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(1.25rem,2.5vw,1.7rem);letter-spacing:-.025em;color:var(--ivory)}
.side-score{font-family:var(--display);font-weight:500;font-size:.85rem;color:var(--lamp);font-variant-numeric:tabular-nums}
.side-blurb{margin:0 0 1.2rem;font-size:.94rem;color:var(--mist-2);max-width:60ch}
.total{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:1.4rem;margin-top:1.9rem;padding-top:1.7rem;border-top:1px solid var(--line)}
.total .n{font-family:var(--display);font-weight:500;font-size:clamp(2rem,4.4vw,2.8rem);color:var(--lamp-hi);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.total .t{font-size:.86rem;color:var(--mist-2);margin-top:.45rem}

/* ---------- page head (verticals) ---------- */
.phead{position:relative;overflow:hidden;min-height:min(72vh,660px);display:flex;align-items:flex-end;padding-block:clamp(96px,15vw,150px) clamp(48px,7vw,80px)}
.phead .wrap{width:100%}
.phead-img{position:absolute;inset:0;z-index:var(--z-base)}
.phead-img picture,.pp .hero picture{display:contents}
.phead-img img{width:100%;height:100%;object-fit:cover;object-position:58% 50%;filter:contrast(1.03) saturate(1.14) brightness(1.1)}
/* These rooms are already near-black and cool, so the scrim only has to seat the
   type. Anchored to the text column: the copy gets a dark bed and the right two
   fifths of the frame stay open. Tinted navy, never warm. */
.phead-img::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(96deg,rgba(6,9,18,.86) 0%,rgba(6,9,18,.66) 32%,rgba(6,9,18,.18) 62%,rgba(6,9,18,0) 84%),
    linear-gradient(180deg,rgba(6,9,18,.46) 0%,rgba(6,9,18,0) 26%,rgba(6,9,18,0) 58%,rgba(6,9,18,.94) 100%)}
.phead .wrap{position:relative;z-index:var(--z-raise)}
.phead .d1,.phead .lede,.phead .crumb{text-shadow:0 1px 18px oklch(0.125 0.014 254/.85),0 1px 3px oklch(0.125 0.014 254/.7)}
.crumb{margin:0 0 1.2rem;font-size:.9rem;color:var(--ivory);font-weight:500}
.crumb a{color:var(--lamp);text-decoration:none}
.crumb a:hover{text-decoration:underline}

/* ---------- close ---------- */
.close{text-align:center;max-width:46rem;margin:0 auto}
.close .lede{margin-inline:auto}
.close .acts{justify-content:center}
.fine{margin-top:1.6rem;font-size:.86rem;color:var(--mist-2)}
.sheet .fine{color:var(--slate-3)}

/* ---------- footer ---------- */
footer{background:var(--ink);padding:3.4rem 0;border-top:1px solid var(--line)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.4rem;align-items:center}
.foot img{height:30px;width:auto}
.foot p{margin:0;font-size:.86rem;color:var(--mist-2)}
.foot a{color:var(--lamp);text-decoration:none}

@media(max-width:700px){.nb{display:none}.d1{font-size:clamp(2.3rem,8.6vw,3.2rem)}}

/* ---------- call transcript ---------- */
.script{margin-top:clamp(2.2rem,5vw,3.2rem);border:1px solid var(--line);border-radius:3px;background:var(--ink-2);overflow:hidden}
.script-head{padding:1.1rem clamp(1.2rem,3vw,1.8rem);border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:baseline;justify-content:space-between}
.script-head p{margin:0;font-size:.92rem;color:var(--mist-2);max-width:62ch}
.script-tag{font-family:var(--display);font-weight:500;font-size:.74rem;color:var(--lamp);white-space:nowrap}
.script-body{padding:clamp(1.1rem,3vw,1.7rem);display:grid;gap:.85rem}
.turn{display:grid;grid-template-columns:5.4rem 1fr;gap:1rem;align-items:start}
.turn span{font-family:var(--display);font-weight:500;font-size:.72rem;padding-top:.22rem}
.turn.caller span{color:var(--mist-2)}
.turn.agent span{color:var(--lamp)}
.turn p{margin:0;font-size:.97rem;line-height:1.6}
.turn.caller p{color:var(--mist-2)}
.turn.agent p{color:var(--ivory);background:var(--lamp-wash);padding:.6rem .85rem;border-radius:2px}
@media(max-width:620px){.turn{grid-template-columns:1fr;gap:.35rem}}

/* ==========================================================================
   The 9:41 stage. A pinned, scroll scrubbed sequence: a call comes in, rings
   out, and then the same call is answered. Everything is legible with no JS
   and no scroll, so this degrades to a plain readable section.
   ========================================================================== */
.stage{background:var(--ink-2);position:relative}
/* Was 420vh. Four screens of pinned scroll reads as a broken page, not as
   cinema. 230vh is enough to play the four beats and let you out. */
.stage-track{height:230vh}
.stage-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.stage-pin::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 78% 42%,rgba(37,214,240,.13),transparent 62%)}
.stage-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,6vw,6rem);align-items:center;position:relative;z-index:var(--z-raise)}

.stage-copy{position:relative}
.stage-line{position:absolute;top:0;left:0;right:0;opacity:0;transform:translateY(18px);
  transition:opacity .5s var(--out),transform .6s var(--out);pointer-events:none}
.stage-line.is-on{opacity:1;transform:none;position:relative}
.stage-sub{max-width:44ch;margin-top:clamp(1.1rem,2.4vh,1.6rem);color:var(--mist);font-size:1.02rem;
  opacity:0;transform:translateY(12px);transition:opacity .5s var(--out) .08s,transform .5s var(--out) .08s;
  position:absolute;pointer-events:none}
.stage-sub.is-on{opacity:1;transform:none;position:relative}

/* the handset */
.phone{position:relative;justify-self:end;width:min(27rem,100%);min-height:30rem;
  background:linear-gradient(180deg,var(--ink-3),var(--ink-2));
  border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.4rem 1.6rem;
  box-shadow:0 50px 120px -60px rgba(0,0,0,.95),0 0 0 1px rgba(37,214,240,.05) inset}
.phone-top{display:flex;justify-content:space-between;align-items:center;font-size:.76rem;color:var(--mist-2);letter-spacing:.04em}
.phone-sig{width:2.4rem;height:.5rem;border-radius:1px;
  background:repeating-linear-gradient(90deg,var(--mist-2) 0 3px,transparent 3px 5px)}
.phone-face{position:absolute;left:1.4rem;right:1.4rem;top:4.2rem;bottom:1.4rem;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity .45s var(--out),transform .55s var(--out);pointer-events:none}
.phone-face.is-on{opacity:1;transform:none;pointer-events:auto}
.phone-face[data-face="answered"]{justify-content:flex-start}
.phone-label{margin:0;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--lamp)}
.phone-label.is-bad{color:#ff8189}
.phone-label.is-good{color:var(--lamp)}
.phone-num{margin:.5rem 0 0;font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.02em;color:#fff}
.phone-state{margin:.7rem 0 0;font-size:.92rem;color:var(--mist)}
.dots{display:inline-flex;gap:.22rem;margin-left:.45rem;vertical-align:middle}
.dots i{width:4px;height:4px;border-radius:50%;background:var(--lamp);opacity:.3;animation:dot 1.25s infinite}
.dots i:nth-child(2){animation-delay:.18s}.dots i:nth-child(3){animation-delay:.36s}
@keyframes dot{0%,60%,100%{opacity:.25}30%{opacity:1}}

.ring-halo{position:absolute;left:50%;top:-3.2rem;width:16rem;height:16rem;margin-left:-8rem;border-radius:50%;
  border:1px solid rgba(37,214,240,.4);animation:halo 2.1s var(--out) infinite}
@keyframes halo{0%{transform:scale(.5);opacity:.75}100%{transform:scale(1.5);opacity:0}}

.wave{display:flex;align-items:flex-end;gap:3px;height:2.1rem;margin:.9rem 0 1.1rem}
.wave i{flex:1;background:var(--lamp);opacity:.55;border-radius:1px;height:22%;animation:wv 1.1s ease-in-out infinite}
.wave i:nth-child(3n){animation-delay:.14s}.wave i:nth-child(3n+1){animation-delay:.28s}
.wave i:nth-child(4n){animation-delay:.42s}.wave i:nth-child(5n){animation-delay:.56s}
@keyframes wv{0%,100%{height:18%}50%{height:92%}}

.tape{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.tape li{opacity:0;transform:translateY(8px);transition:opacity .38s var(--out),transform .38s var(--out);
  display:grid;grid-template-columns:5.6rem 1fr;gap:.7rem;font-size:.86rem;line-height:1.5}
.tape li.is-on{opacity:1;transform:none}
.tape b{font-weight:500;color:var(--lamp);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding-top:.16rem}
.tape li[data-who="c"] b{color:var(--mist-2)}
.tape span{color:var(--mist)}
.phone-done{margin:1.1rem 0 0;padding-top:.9rem;border-top:1px solid var(--line);font-size:.86rem;color:var(--ivory);
  opacity:0;transform:translateY(8px);transition:opacity .4s var(--out),transform .4s var(--out)}
.phone-done.is-on{opacity:1;transform:none}

.stage-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line)}
.stage-bar i{display:block;height:100%;width:0;background:var(--lamp);transition:width .1s linear}

@media(max-width:900px){
  .stage-track{height:200vh}
  .stage-grid{grid-template-columns:1fr;gap:2rem}
  .phone{justify-self:stretch;width:100%;min-height:26rem}
  .stage-pin{align-items:flex-start;padding-top:4.5rem;height:100svh;min-height:100svh}
  .phone{min-height:0}
}
/* No JS, or motion turned down: unpin and show every phase as plain content. */
.no-js .stage-track,.stage.is-static .stage-track{height:auto}
.no-js .stage-pin,.stage.is-static .stage-pin{position:static;height:auto;padding:var(--band) 0}
.no-js .stage-line,.no-js .stage-sub,.no-js .phone-face,.no-js .tape li,.no-js .phone-done,
.stage.is-static .stage-line,.stage.is-static .stage-sub,.stage.is-static .phone-face,
.stage.is-static .tape li,.stage.is-static .phone-done{position:relative;opacity:1;transform:none}
.no-js .phone-face,.stage.is-static .phone-face{left:auto;right:auto;top:auto;margin-top:1.6rem}
@media(prefers-reduced-motion:reduce){
  .ring-halo,.wave i,.dots i{animation:none}
  .wave i{height:46%}
}

/* ---------- mobile nav ----------------------------------------------------
   At 375px the open nav was 137px of permanent chrome, listing four industries
   the visitor probably does not belong to before they reach the headline.
   Below 820px it collapses behind a control; above, nothing changes. */
.nav-burger{display:none;margin-left:auto;width:44px;height:44px;padding:0;background:none;border:0;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:6px}
.nav-burger span{display:block;width:20px;height:1.5px;background:var(--ivory);
  transition:transform .32s var(--out),opacity .2s var(--out)}
.nav-burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

@media(max-width:820px){
  .nav-burger{display:flex}
  .nav-in{flex-wrap:nowrap;gap:.7rem}
  .nav-links{position:fixed;inset:57px 0 auto 0;width:100%;margin:0;flex-direction:column;align-items:stretch;
    gap:0;padding:.5rem var(--gut) 1.6rem;background:oklch(0.145 0.014 254 / .98);
    backdrop-filter:blur(18px);border-bottom:1px solid var(--line);
    transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .28s var(--out),transform .32s var(--out),visibility .28s}
  .nav-links.is-open{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .nav-links a{min-height:52px;padding-inline:0;border-bottom:1px solid var(--line);font-size:1rem}
  .nav-links a:last-child{border-bottom:0}
  .nav-cta{margin-top:.9rem;justify-content:center;border-radius:2px}
}

/* ==========================================================================
   The call card. The product, above the fold. Linear shows its app at scale,
   ElevenLabs lets you hear a voice in one click: this does both. The waveform
   is driven by the real audio, not a loop, so what you watch is what you hear.
   ========================================================================== */
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;width:100%}
.hero-copy .lede{max-width:40ch}
@media(max-width:1000px){.hero-grid{grid-template-columns:1fr;gap:2.6rem}}

.callcard{position:relative;background:rgba(10,14,22,.72);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border:1px solid var(--line-hi);border-radius:10px;padding:clamp(1.15rem,2vw,1.6rem);
  box-shadow:0 60px 140px -70px rgba(0,0,0,.98),0 0 0 1px rgba(37,214,240,.06) inset}
.callcard::before{content:"";position:absolute;inset:-1px;border-radius:11px;pointer-events:none;
  background:linear-gradient(140deg,rgba(37,214,240,.34),transparent 38%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1px}

.cc-top{display:flex;align-items:center;gap:.6rem;font-size:.78rem;color:var(--mist-2);letter-spacing:.02em}
.cc-who{font-family:var(--mark);letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.cc-time{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--mist-2)}
.cc-dot{width:7px;height:7px;border-radius:50%;background:var(--lamp);box-shadow:0 0 0 0 rgba(37,214,240,.55);
  animation:ccpulse 2.4s var(--out) infinite}
@keyframes ccpulse{0%{box-shadow:0 0 0 0 rgba(37,214,240,.5)}70%{box-shadow:0 0 0 9px rgba(37,214,240,0)}100%{box-shadow:0 0 0 0 rgba(37,214,240,0)}}

.cc-wave{display:block;width:100%;height:clamp(84px,11vw,132px);margin:1rem 0 .9rem}

.cc-tape{list-style:none;margin:0 0 1.15rem;padding:0;min-height:5.6rem;display:grid;gap:.5rem;align-content:start}
.cc-tape li{display:grid;grid-template-columns:5.2rem 1fr;gap:.7rem;font-size:.87rem;line-height:1.5;color:var(--mist);
  opacity:0;transform:translateY(6px);animation:ccin .42s var(--out) forwards}
@keyframes ccin{to{opacity:1;transform:none}}
.cc-tape li b{font-family:var(--mark);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--lamp);padding-top:.22rem;font-weight:400}
.cc-tape li[data-who="c"] b{color:var(--mist-2)}
.cc-tape li.cc-idle{grid-template-columns:1fr;color:var(--mist-2);opacity:1;transform:none;animation:none;font-style:normal}

.cc-acts{display:flex;flex-wrap:wrap;gap:.65rem}
.cc-play{border:0;cursor:pointer;font-family:var(--display)}
.cc-ico{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;
  border-color:transparent transparent transparent currentColor;margin-right:.6rem;transition:none}
.cc-play.is-playing .cc-ico{width:10px;height:12px;border:0;background:currentColor;margin-right:.6rem;
  -webkit-mask:linear-gradient(#000 0 0) left/3px 100% no-repeat,linear-gradient(#000 0 0) right/3px 100% no-repeat;
  mask:linear-gradient(#000 0 0) left/3px 100% no-repeat,linear-gradient(#000 0 0) right/3px 100% no-repeat}
.cc-note{margin:.95rem 0 0;font-size:.85rem;line-height:1.5;color:var(--mist);max-width:52ch}

@media(prefers-reduced-motion:reduce){.cc-dot{animation:none}.cc-tape li{animation:none;opacity:1;transform:none}}

/* The hero headline now shares the fold with the call card, so it sizes to its
   own column rather than to the page. */
.hero-copy .d1{font-size:clamp(2.25rem,3.5vw,3.55rem)}
.hero-copy .lede{font-size:clamp(1rem,1.25vw,1.12rem);margin-top:1.1rem}
.hero-foot{margin-top:clamp(1.5rem,3vh,2.2rem)}
@media(max-width:1000px){.hero-copy .d1{font-size:clamp(2.3rem,6.4vw,3.4rem)}}
/* 2026-10-19: the hero loop is a logo-free cut of the Los Angeles night aerial
   from Fernando's own animation, so it plays sharp. The old 2025 showreel
   carried titles and had to be blurred into a smear, which read as broken. */
.hero-reel{filter:saturate(1.15) contrast(1.03) brightness(.78);transform:none}

/* ==========================================================================
   INTRO: portal -> fly-in -> orb -> talk to the orb -> scroll into the site.
   Ported from the Astro build's IntroExperience (v3), with the orb ignition
   restored and a new beat added: the lit orb is what you speak to.
   ========================================================================== */
  .ca-intro {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    opacity: 1;
    transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .ca-intro.is-leaving { opacity: 0; }

  .ca-intro__film {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
  }
  .ca-intro__film.is-active { opacity: 1; }

  /* Terminal text typed INSIDE the orb -- a small box centred on the orb's
     glowing sphere so the line reads as if it is on the orb's screen, not
     floating across the whole viewport. */
  /* The orb is dead-centre of its source frame (measured fx=0.507, fy=0.502),
     and object-fit:cover always maps the source centre to the viewport centre,
     so anchoring the box at 50%/50% locks it onto the orb on EVERY screen size
     and aspect ratio -- no per-viewport offset that could drift off-centre. */
  .ca-intro__terminal {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(170px, 23vw, 330px);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.9s ease;
    pointer-events: none;
  }
  .ca-intro__terminal.is-on { opacity: 1; }
  .ca-intro__terminal-text {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: clamp(0.95rem, 2.05vw, 1.7rem);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: #eafcff;
    text-align: center;
    text-shadow:
      0 0 6px rgba(77, 225, 255, 0.65),
      0 0 18px rgba(77, 225, 255, 0.5),
      0 0 40px rgba(120, 90, 255, 0.35);
    white-space: normal;
  }
  /* On portrait phones object-fit:cover scales by height, so the centred orb
     fills most of the width -- the box can be wider and the type bigger. The
     50% vertical anchor still lands on the orb centre (cover keeps centre fixed). */
  @media (max-width: 768px) {
    .ca-intro__terminal { width: clamp(190px, 64vw, 320px); }
    .ca-intro__terminal-text { font-size: clamp(1.05rem, 5.2vw, 1.6rem); }
  }

  /* Logo reveal -- after the orb powers down, the white Creativ Adworks lockup
     fades in over the dark sphere (CSS only, no generated video). */
  .ca-intro__logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1.03);
    width: clamp(240px, 42vw, 460px);
    height: auto;
    z-index: 3;
    opacity: 0;
    filter: drop-shadow(0 0 22px rgba(77, 225, 255, 0.35));
    transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }
  .ca-intro__logo.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  @media (max-width: 768px) {
    .ca-intro__logo { width: clamp(220px, 74vw, 360px); }
  }

  /* "Scroll down" cue -- fades in below the logo, in the same glowing terminal
     style as the typed line. */
  .ca-intro__scroll {
    position: absolute;
    left: 50%;
    bottom: clamp(2.2rem, 9vh, 5.5rem);
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    opacity: 0;
    transition: opacity 0.9s ease;
    pointer-events: none;
  }
  .ca-intro__scroll.is-on { opacity: 1; }
  .ca-intro__scroll-label {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: clamp(0.9rem, 1.7vw, 1.25rem);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: #eafcff;
    text-align: center;
    text-shadow:
      0 0 6px rgba(77, 225, 255, 0.65),
      0 0 18px rgba(77, 225, 255, 0.5),
      0 0 40px rgba(120, 90, 255, 0.35);
  }
  .ca-intro__scroll-chevron {
    width: 16px;
    height: 16px;
    border-right: 2px solid #4de1ff;
    border-bottom: 2px solid #4de1ff;
    transform: rotate(45deg);
    animation: ca-scrolldown 1.8s ease-in-out infinite;
  }
  @keyframes ca-scrolldown {
    0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.35; }
    50%      { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
  }
  .ca-intro__caret {
    display: inline-block;
    width: 0.62em;
    height: 1.05em;
    margin-left: 0.08em;
    transform: translateY(0.16em);
    background: #4de1ff;
    box-shadow: 0 0 12px rgba(77, 225, 255, 0.8);
    animation: ca-caret 1s steps(1) infinite;
  }
  @keyframes ca-caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

  .ca-intro__portal { position: absolute; inset: 0; overflow: hidden; z-index: 2; }
  .ca-intro.is-playing .ca-intro__portal { opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }

  .ca-intro__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.04);
    animation: ca-drift 18s ease-in-out infinite alternate;
  }
  @keyframes ca-drift {
    from { transform: scale(1.04) translate3d(-1%, -0.5%, 0); }
    to   { transform: scale(1.1) translate3d(1%, 0.5%, 0); }
  }
  .ca-intro__scrim {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(120% 90% at 50% 38%, transparent 0%, rgba(5, 6, 11, 0.35) 55%, rgba(5, 6, 11, 0.92) 100%),
      linear-gradient(to bottom, rgba(5, 6, 11, 0.2), rgba(5, 6, 11, 0.65));
  }

  .ca-intro__portal-logo {
    position: absolute;
    left: 50%;
    top: 44%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.15rem;
    width: min(78vw, 480px);
    text-align: center;
  }
  .ca-intro__portal-mark {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 28px rgba(77, 225, 255, 0.26));
    pointer-events: none;
  }
  .ca-intro__portal-tag {
    margin: 0;
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: clamp(0.58rem, 1.35vw, 0.76rem);
    font-weight: 500;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: rgba(234, 252, 255, 0.82);
    text-indent: 0.36em;
    pointer-events: none;
  }
  .ca-intro__portal-value {
    max-width: 34rem;
    margin: 0.15rem 0 0;
    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: clamp(1rem, 2.2vw, 1.28rem);
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.9);
    text-wrap: balance;
  }
  .ca-intro__portal-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.9rem;
    padding: 0.85rem 1.3rem;
    border-radius: 999px;
    background: #4de1ff;
    color: #05060b;
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 16px 50px -20px rgba(77, 225, 255, 0.85);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  }
  .ca-intro__portal-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 60px -22px rgba(77, 225, 255, 1);
  }
  .ca-intro__portal-cta--2 {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: none;
    margin-top: 0.4rem;
  }
  .ca-intro__portal-cta--2:hover { box-shadow: none; border-color: #4de1ff; }
  @media (max-width: 768px) {
    .ca-intro__portal-logo { width: min(84vw, 360px); top: 40%; gap: 0.9rem; }
    .ca-intro__portal-tag { letter-spacing: 0.26em; text-indent: 0.26em; }
    .ca-intro__portal-value { font-size: 0.98rem; }
    .ca-intro__portal-cta { width: min(100%, 20rem); }
  }

  .ca-intro__ui {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 1.4rem;
    padding: 0 1.5rem clamp(3rem, 12vh, 7rem);
    text-align: center;
  }
  .ca-intro__kicker {
    margin: 0;
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
  }

  .ca-intro__enter {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 13rem;
    padding: 1.05rem 2.6rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 0.86rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: not-allowed;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  }
  .ca-intro.is-ready .ca-intro__enter {
    cursor: pointer;
    background: rgba(77, 225, 255, 0.14);
    box-shadow: 0 0 0 1px rgba(77, 225, 255, 0.5), 0 18px 50px -18px rgba(77, 225, 255, 0.7);
  }
  .ca-intro.is-ready .ca-intro__enter:hover { transform: translateY(-2px); background: rgba(77, 225, 255, 0.22); }

  .ca-intro__ring {
    position: absolute;
    inset: -3px;
    border-radius: 999px;
    border: 1px solid rgba(77, 225, 255, 0.45);
    opacity: 0;
  }
  .ca-intro.is-ready .ca-intro__ring { animation: ca-pulse 2.4s ease-out infinite; }
  @keyframes ca-pulse {
    0%   { opacity: 0.7; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.28); }
  }

  .ca-intro__hint {
    margin: 0;
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.45);
  }

  .ca-intro__skip {
    position: absolute;
    right: clamp(1rem, 4vw, 2.4rem);
    bottom: clamp(1rem, 4vw, 2.4rem);
    z-index: 5;
    padding: 0.5rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(5, 6, 11, 0.45);
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 0.85rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    min-height: 44px;
    color: #fff;
    opacity: 1;
    transition: opacity 0.4s ease;
  }
  .ca-intro.is-playing .ca-intro__skip,
  .ca-intro__skip:hover { opacity: 1; }

  @media (max-width: 768px) {
    .ca-intro__enter { min-width: 11rem; padding: 1rem 2rem; }
    .ca-intro__skip {
      top: max(1rem, env(safe-area-inset-top));
      right: 1rem;
      bottom: auto;
    }
  }

/* ---- new beat: the orb is the interface ---- */
.ca-intro__talk{position:absolute;left:50%;bottom:clamp(4.5rem,13vh,9rem);transform:translateX(-50%);
  z-index:6;display:flex;flex-direction:column;align-items:center;gap:.85rem;
  opacity:0;visibility:hidden;transition:opacity .7s var(--out),visibility .7s;text-align:center}
.ca-intro__talk.is-on{opacity:1;visibility:visible}
.ca-intro__talk-btn{display:inline-flex;align-items:center;gap:.7rem;min-height:50px;
  padding:.85rem 1.7rem;border-radius:999px;border:1px solid rgba(37,214,240,.55);
  background:rgba(37,214,240,.10);color:#eafcff;font-family:var(--display);font-weight:500;
  font-size:.95rem;letter-spacing:.01em;cursor:pointer;backdrop-filter:blur(10px);
  transition:background .3s var(--out),border-color .3s var(--out),transform .3s var(--out)}
.ca-intro__talk-btn:hover{background:rgba(37,214,240,.2);border-color:var(--lamp);transform:translateY(-1px)}
.ca-intro__talk-btn::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--lamp);
  box-shadow:0 0 0 0 rgba(37,214,240,.6);animation:ccpulse 2.2s var(--out) infinite}
.ca-intro__talk-note{margin:0;font-size:.76rem;letter-spacing:.02em;color:rgba(245,247,250,.52);max-width:34ch}
.ca-intro__talk.is-live .ca-intro__talk-btn{border-color:var(--lamp);background:rgba(37,214,240,.18)}

/* the orb breathes while the conversation is live */
.ca-intro.is-talking .ca-intro__film.is-active{animation:orbbreathe 3.4s ease-in-out infinite}
@keyframes orbbreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.022)}}
.ca-orb-glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(62vh,62vw);height:min(62vh,62vw);border-radius:50%;pointer-events:none;z-index:2;
  opacity:0;transition:opacity .6s var(--out);
  background:radial-gradient(circle,rgba(37,214,240,.22) 0%,rgba(37,214,240,.07) 46%,transparent 68%)}
.ca-intro.is-talking .ca-orb-glow{opacity:1}

@media(max-width:768px){
  .ca-intro__talk{bottom:clamp(3.5rem,10vh,6rem)}
  .ca-intro__talk-btn{font-size:.9rem;padding:.8rem 1.4rem}
}
@media(prefers-reduced-motion:reduce){
  .ca-intro.is-talking .ca-intro__film.is-active{animation:none}
  .ca-intro__talk-btn::before{animation:none}
}

/* The talk block and the scroll cue were landing on top of each other: the cue
   sits at the very bottom, the invite stacks clear above it. */
.ca-intro__scroll{bottom:clamp(1.2rem,3.2vh,2.2rem)}
.ca-intro__talk{bottom:clamp(6.5rem,17vh,11rem)}
.ca-intro__talk-note{padding:.45rem .9rem;border-radius:999px;background:rgba(6,9,18,.5);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:rgba(245,247,250,.68)}
@media(max-width:768px){.ca-intro__talk{bottom:clamp(5.5rem,15vh,8rem)}}

/* ==========================================================================
   The orb console. Everything sits inside the sphere and borrows the terminal's
   glow language, so it reads as the orb's own display rather than page chrome
   parked underneath it. Geometry is measured from the video's cover math in JS
   and written to --orb-d / --orb-x / --orb-y.
   ========================================================================== */
.ca-orbui{position:absolute;left:var(--orb-x,50%);top:var(--orb-y,50%);
  width:var(--orb-d,420px);height:var(--orb-d,420px);transform:translate(-50%,-50%);
  z-index:5;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .8s var(--out),visibility .8s;pointer-events:none}
.ca-orbui.is-on{opacity:1;visibility:visible}
.ca-orbui__ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ca-orbui__stack{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.65rem;width:64%;text-align:center}

.ca-orbui__status,.ca-orbui__line{margin:0;font-family:var(--mark);letter-spacing:.14em;text-transform:uppercase;
  color:#bfefff;text-shadow:0 0 6px rgba(77,225,255,.6),0 0 18px rgba(77,225,255,.4)}
.ca-orbui__status{font-size:clamp(.54rem,.78vw,.68rem);opacity:0;transition:opacity .45s var(--out)}
.ca-orbui__status.is-on{opacity:.85}
.ca-orbui__line{font-family:var(--body);text-transform:none;letter-spacing:.01em;
  font-size:clamp(.72rem,1.02vw,.9rem);line-height:1.45;color:#eafcff;min-height:2.6em;
  text-shadow:0 0 8px rgba(77,225,255,.5),0 0 22px rgba(120,90,255,.3);opacity:0;transition:opacity .4s var(--out)}
.ca-orbui__line.is-on{opacity:1}

/* the call to action is glowing type with a drawn underline, never a pill */
.ca-orbui__cta{pointer-events:auto;cursor:pointer;background:none;border:0;padding:.25rem .1rem .45rem;
  font-family:var(--mark);font-size:clamp(.82rem,1.32vw,1.12rem);letter-spacing:.2em;text-transform:uppercase;
  color:#eafcff;position:relative;
  text-shadow:0 0 8px rgba(77,225,255,.75),0 0 24px rgba(77,225,255,.5),0 0 52px rgba(120,90,255,.34);
  transition:color .3s var(--out),letter-spacing .4s var(--out)}
.ca-orbui__cta::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,#4de1ff,transparent);
  box-shadow:0 0 10px rgba(77,225,255,.85);
  transform:scaleX(.45);transition:transform .5s var(--out);
  animation:orbline 2.6s var(--out) infinite}
@keyframes orbline{0%,100%{opacity:.55}50%{opacity:1}}
.ca-orbui__cta:hover{letter-spacing:.24em}
.ca-orbui__cta:hover::after{transform:scaleX(1)}
.ca-orbui__cta:focus-visible{outline:none}
.ca-orbui__cta:focus-visible::after{transform:scaleX(1)}
.ca-orbui.is-live .ca-orbui__cta{font-size:clamp(.62rem,.9vw,.76rem);opacity:.7;letter-spacing:.18em}

@media(prefers-reduced-motion:reduce){.ca-orbui__cta::after{animation:none}}

/* ---- the lens dollies in when the conversation starts, so the console has
        room without ever leaving the sphere ---- */
.ca-intro__film{transition:opacity .45s ease, scale 2.4s var(--out)}
.ca-intro.is-talking .ca-intro__film.is-active{scale:1.34}
.ca-intro.is-talking .ca-intro__film.is-active{animation:none}   /* breathing moves to the rim */
.ca-orbui{transition:opacity .8s var(--out),visibility .8s,width 2.4s var(--out),height 2.4s var(--out),
  left 2.4s var(--out),top 2.4s var(--out)}

/* transcript, borrowed from how L.I.S.A. holds its history: the line you are
   hearing is lit, the one before it stays at a fifth of the brightness. */
.ca-orbui__prev{margin:0;font-family:var(--body);font-size:clamp(.62rem,.86vw,.76rem);line-height:1.4;
  color:#eafcff;opacity:0;transition:opacity .4s var(--out);text-shadow:0 0 8px rgba(77,225,255,.35)}
.ca-orbui__prev.is-on{opacity:.2}
.ca-orbui__line .cur{display:inline-block;width:.5em;height:1em;margin-left:.12em;
  transform:translateY(.14em);background:#4de1ff;box-shadow:0 0 10px rgba(77,225,255,.8);
  animation:ca-caret 1s steps(1) infinite}

/* answer chips: hairline glass, never solid pills */
.ca-orbui__chips{display:none;flex-wrap:wrap;justify-content:center;gap:.35rem;margin-top:.3rem;pointer-events:auto}
.ca-orbui.is-live .ca-orbui__chips{display:flex}
.ca-orbui__chips button{cursor:pointer;font-family:var(--mark);font-size:clamp(.5rem,.68vw,.6rem);
  letter-spacing:.12em;text-transform:uppercase;color:#cdf3ff;padding:.32rem .6rem;border-radius:999px;
  border:1px solid rgba(77,225,255,.32);background:rgba(8,16,26,.42);backdrop-filter:blur(6px);
  transition:border-color .28s var(--out),background .28s var(--out),color .28s var(--out)}
.ca-orbui__chips button:hover{border-color:rgba(77,225,255,.85);background:rgba(37,214,240,.16);color:#fff}

/* The eye owns the middle of the sphere. The console sits under it, on its own
   soft plate, so the type never has to compete with the iris glow. */
.ca-orbui{align-items:flex-end}
.ca-orbui__stack{width:78%;gap:.4rem;padding-bottom:9%;
  justify-content:flex-end;isolation:isolate}
.ca-orbui__stack::before{content:"";position:absolute;inset:-12% -10% -14% -10%;z-index:-1;border-radius:50% 50% 46% 46%/60% 60% 40% 40%;
  background:radial-gradient(60% 72% at 50% 62%,rgba(3,7,14,.82) 0%,rgba(3,7,14,.6) 52%,transparent 78%);
  filter:blur(2px)}
.ca-orbui__status{order:-1}
.ca-orbui__line{min-height:0}
.ca-orbui__chips{margin-top:.5rem;gap:.3rem}
.ca-orbui__chips button{padding:.3rem .55rem}
@media(max-width:768px){
  .ca-orbui__stack{width:86%;padding-bottom:7%}
  .ca-orbui__chips button{font-size:.52rem;padding:.28rem .5rem}
}

/* Once the line is live the status carries the state, so the invite steps back. */
.ca-orbui.is-live .ca-orbui__cta{display:none}
.ca-orbui.is-live .ca-orbui__status{opacity:.95;color:#eafcff}
.ca-orbui.is-live .ca-orbui__status::before{content:"";display:inline-block;width:6px;height:6px;
  border-radius:50%;background:#4de1ff;margin-right:.5em;transform:translateY(-1px);
  box-shadow:0 0 8px rgba(77,225,255,.9);animation:ccpulse 2s var(--out) infinite}

/* English only for now: the scorecard language toggle is hidden so the page
   never offers a Spanish path the agents do not currently speak. The ES strings
   stay in the JSON, so bringing it back is one line. */
.langtog{display:none}

/* ==========================================================================
   Partner package page. Reuses the site's system; only the components that
   do not exist elsewhere are defined here.
   ========================================================================== */
.phead--flat{min-height:auto;padding-block:clamp(7rem,15vh,11rem) clamp(3rem,7vh,5rem);background:var(--ink-2)}
.phead--flat .d1{max-width:22ch}
.phead--flat .lede{max-width:62ch;margin-top:1.3rem}

/* what is true today, two columns that must never be confused */
.truth{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.2rem);margin-top:clamp(2rem,4vw,3rem)}
@media(max-width:820px){.truth{grid-template-columns:1fr;gap:2rem}}
.tlist{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.6rem}
.tlist li{position:relative;padding-left:1.7rem;font-size:.95rem;line-height:1.5}
.tlist li::before{position:absolute;left:0;top:.05em;font-family:var(--mark);font-size:.9rem}
.tlist--yes li::before{content:"✓";color:var(--lamp-ink)}
.tlist--no li::before{content:"✕";color:#b4384a}
.sheet .tlist li{color:var(--slate-2)}
.tnote{margin-top:clamp(1.6rem,3vw,2.2rem);padding:1rem 1.2rem;border:1px solid rgba(10,109,130,.35);border-radius:2px;
  background:rgba(37,214,240,.07);font-size:.95rem;color:var(--slate);max-width:74ch}

/* the deal table */
.dtable{width:100%;border-collapse:collapse;margin-bottom:1.2rem}
.dtable th{text-align:left;font-weight:400;color:var(--mist-2);padding:.7rem 0;border-bottom:1px solid var(--line);font-size:.92rem}
.dtable td{text-align:right;padding:.7rem 0;border-bottom:1px solid var(--line);color:var(--ivory);font-size:.98rem}
.dtable b{color:var(--lamp)}

/* the work strip */
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:clamp(2rem,4vw,3rem)}
@media(max-width:900px){.wgrid{grid-template-columns:1fr;max-width:600px}}
.wgrid figure{margin:0}
.wgrid img{width:100%;height:auto;border-radius:3px;display:block;aspect-ratio:3/2;object-fit:cover}
.wgrid figcaption{margin-top:.75rem;font-size:.88rem;line-height:1.5;color:var(--slate-2)}
.wgrid figcaption b{color:var(--slate)}

.steps--plain{counter-reset:none;list-style:decimal;padding-left:1.2rem;display:block;margin-top:.9rem}
.steps--plain li{margin-bottom:.4rem;font-size:.95rem;color:var(--mist);border:0;padding:0}
.steps--plain li::before{content:none}
.fine{font-size:.82rem;color:var(--mist-2);margin-top:.9rem;max-width:56ch}
.sheet .fine{color:var(--slate-3)}
.leaks h3 a{color:inherit;text-decoration:none;border-bottom:1px solid var(--lamp-ink)}
.leaks h3 a:hover{color:var(--lamp-ink)}

/* ---------- partner documents -------------------------------------------
   Long-form reading on the site instead of a PDF download. The package is
   rewritten often, and a PDF goes stale the moment the markdown changes,
   which has already happened once. HTML rebuilds from the source every deploy. */
.doc{padding-block:clamp(2.5rem,6vw,5rem)}
.doc-in{max-width:74ch;margin:0 auto;padding-inline:var(--gut)}
.doc-in>*{max-width:68ch}
.doc-in>table,.doc-in>.tw{max-width:none}
.doc h1{font-family:var(--display);font-weight:500;letter-spacing:-0.03em;
  font-size:clamp(2.1rem,4vw,3.3rem);line-height:1.05;margin:0 0 1.4rem;text-wrap:balance}
.doc h2{font-family:var(--display);font-weight:500;letter-spacing:-0.022em;
  font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.12;margin:3.2rem 0 1rem;
  padding-top:1.6rem;border-top:1px solid var(--line);text-wrap:balance}
.doc h3{font-family:var(--display);font-weight:500;letter-spacing:-0.015em;
  font-size:clamp(1.12rem,1.7vw,1.32rem);line-height:1.2;margin:2.1rem 0 .7rem;color:var(--lamp-hi)}
.doc h4{font-family:var(--body);font-weight:600;font-size:1rem;margin:1.5rem 0 .5rem}
.doc p,.doc li{font-size:1.035rem;line-height:1.68;color:var(--mist)}
.doc p{margin:0 0 1.05rem;text-wrap:pretty}
.doc strong{color:var(--ivory);font-weight:600}
.doc em{color:color-mix(in srgb,var(--mist) 72%,#fff)}
.doc a{color:var(--lamp-hi);text-underline-offset:3px}
.doc ul,.doc ol{margin:0 0 1.2rem;padding-left:1.3rem}
.doc li{margin-bottom:.45rem}
.doc li::marker{color:var(--lamp-dim)}
.doc hr{border:0;border-top:1px solid var(--line);margin:2.6rem 0}
.doc blockquote{margin:1.6rem 0;padding:1.1rem 1.4rem;background:var(--ink-3);
  border-radius:3px;border:1px solid var(--line)}
.doc blockquote p{margin:0;color:var(--ivory);font-size:1.08rem}
.doc blockquote p+p{margin-top:.8rem}
.doc code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--ink-3);padding:.14em .42em;border-radius:2px;color:var(--lamp-hi)}
.doc pre{background:var(--ink-3);border:1px solid var(--line);border-radius:3px;
  padding:1rem 1.2rem;overflow-x:auto;margin:0 0 1.2rem}
.doc pre code{background:none;padding:0;color:var(--mist);font-size:.86rem;line-height:1.55}
.tw{overflow-x:auto;margin:0 0 1.4rem;-webkit-overflow-scrolling:touch}
.doc table{border-collapse:collapse;width:100%;font-size:.95rem;min-width:30rem}
.doc th{text-align:left;font-family:var(--display);font-weight:500;color:var(--ivory);
  padding:.7rem .9rem .7rem 0;border-bottom:1px solid var(--lamp-ink);white-space:nowrap}
.doc td{padding:.7rem .9rem .7rem 0;border-bottom:1px solid var(--line);
  color:var(--mist);vertical-align:top}
.doc tr:last-child td{border-bottom:0}
/* On a phone the tables wrap instead of scrolling sideways. */
@media (max-width:560px){
  .doc table{min-width:0;font-size:.9rem}
  .doc th{white-space:normal}
  .doc th,.doc td{padding-right:.6rem}
  .doc table.wide thead{display:none}
  .doc table.wide tr{display:block;padding:.85rem 0;border-bottom:1px solid var(--line)}
  .doc table.wide tr:last-child{border-bottom:0}
  .doc table.wide td{display:flex;justify-content:space-between;gap:1rem;border:0;padding:.18rem 0;text-align:right}
  .doc table.wide td:first-child{display:block;text-align:left;font-weight:600;padding-bottom:.35rem}
  .doc table.wide td::before{content:attr(data-label);color:var(--mist-2);text-align:left;font-weight:400}
  .doc table.wide td:first-child::before{content:none}
  .doc table.wide td:empty{display:none}
}
.doc-meta{font-size:.86rem;color:var(--mist-2);margin:0 0 2.4rem}
.doc-nav{display:flex;flex-wrap:wrap;gap:.6rem;margin:3.5rem 0 0;
  padding-top:1.8rem;border-top:1px solid var(--line)}
.doc-nav a{display:inline-block;padding:.6rem 1rem;border:1px solid var(--line);
  border-radius:2px;font-size:.9rem;color:var(--ivory);text-decoration:none}
.doc-nav a:hover{border-color:var(--lamp);color:var(--lamp-hi)}
@media (max-width:640px){
  .doc h2{margin-top:2.4rem}
  .doc p,.doc li{font-size:1rem}
}
/* A markdown rule immediately above a heading doubles the h2 top border. */
.doc hr + h2,.doc hr + h3{border-top:0;padding-top:0;margin-top:1.2rem}
.doc hr + hr{display:none}
.doc > .doc-in > hr:first-child{display:none}

/* ---------- partner page: the two honest lists ------------------------- */
.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding-left:1.6rem;margin-bottom:.7rem;color:var(--mist);line-height:1.55}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  border-radius:50%;background:var(--lamp)}
.defs{margin:0}
.defs dt{font-family:var(--display);font-weight:500;color:var(--ivory);
  font-size:1.02rem;margin-top:1.05rem;padding-left:1.6rem;position:relative}
.defs dt:first-child{margin-top:0}
.defs dt::before{content:"";position:absolute;left:0;top:.52em;width:11px;height:1px;background:var(--mist-2)}
.defs dd{margin:.25rem 0 0 1.6rem;color:var(--mist-2);font-size:.95rem;line-height:1.55}

/* ---------- partner page: evidence figures ------------------------------
   The why-now section is carried by sourced numbers. They need to read as
   evidence, not as a hero-metric template, so: no gradient, no card chrome,
   source line always attached, and never more than four in a row. */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;
  overflow:hidden;margin-top:clamp(2rem,4vw,3rem)}
.fig{background:var(--ink-2);padding:clamp(1.3rem,2.4vw,1.9rem)}
.fig b{display:block;font-family:var(--display);font-weight:500;letter-spacing:-0.03em;
  font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1;color:var(--lamp-hi);margin-bottom:.55rem}
.fig p{margin:0;font-size:.95rem;line-height:1.5;color:var(--mist)}
.fig cite{display:block;margin-top:.7rem;font-style:normal;font-size:.78rem;
  color:var(--mist-2);line-height:1.4}
.sheet .fig{background:#fff}
.sheet .fig b{color:var(--lamp-ink)}
.sheet .fig p{color:var(--slate)}
.sheet .fig cite{color:#5b6a80}

/* a door: one of several ways into an account, deliberately not a ladder */
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:clamp(1rem,1.8vw,1.4rem);margin-top:clamp(2rem,4vw,3rem)}
.door{border:1px solid var(--line);border-radius:3px;padding:clamp(1.2rem,2.2vw,1.7rem);
  background:var(--ink-3)}
.door h3{font-family:var(--display);font-weight:500;font-size:1.06rem;margin:0 0 .5rem;
  color:var(--lamp-hi);letter-spacing:-0.01em}
.door p{margin:0 0 .6rem;font-size:.95rem;line-height:1.58;color:var(--mist)}
.door p:last-child{margin-bottom:0}
.door .then{display:block;margin-top:.85rem;padding-top:.75rem;border-top:1px solid var(--line);
  font-size:.88rem;color:var(--mist-2)}
.sheet .door{background:#fff;border-color:#dfe5ec}
.sheet .door h3{color:var(--lamp-ink)}
.sheet .door p{color:var(--slate)}
.sheet .door .then{color:#5b6a80;border-top-color:#dfe5ec}

/* a quiet pull quote for the one line that should stop the reader */
.pull{margin:clamp(2.2rem,4vw,3.2rem) 0}
.pull::before{content:"";display:block;width:2.4rem;height:1px;background:var(--lamp);margin-bottom:1.1rem}
.pull p{font-family:var(--display);font-weight:500;letter-spacing:-0.018em;
  font-size:clamp(1.3rem,2.3vw,1.85rem);line-height:1.28;color:var(--ivory);margin:0;
  max-width:26ch;text-wrap:balance}
.sheet .pull p{color:var(--slate)}

/* ==========================================================================
   PARTNER PAGE (body.pp)
   Measured against the Levanta retreat deck Fernando approved on 2026-09-23:
   19px body, one column, light reading sections, short numbered items on
   hairline rules, dark sections used as punctuation rather than as the page.
   The version this replaces had 56 text blocks under 16px, 14 of 18 sections
   dark and 8 multi column text grids, and he said the columns blended together
   and it looked cheap. Do not reintroduce card grids for running text here.
   ========================================================================== */
.pp{--pp-ink:#0b1a33;--pp-body:#243449;--pp-soft:#55657b;--pp-rule:rgba(11,26,51,.13);
  --pp-paper:#f4f6f9;--pp-paper-2:#e9eef4}
.pp .sec{padding-block:clamp(76px,11vw,140px);position:relative}
.pp .sec .wrap{max-width:1080px}
.pp .col{max-width:720px}

.pp .sec.dark{background:var(--ink);color:var(--ivory)}
.pp .sec.dark-2{background:var(--ink-3);color:var(--ivory)}
.pp .sec.light{background:var(--pp-paper);color:var(--pp-ink)}
.pp .sec.light-2{background:var(--pp-paper-2);color:var(--pp-ink)}

.pp .kick{display:inline-flex;align-items:center;gap:.8rem;margin:0 0 1.4rem;
  font-family:var(--body);font-size:.9rem;letter-spacing:.02em;color:var(--lamp)}
.pp .kick::before{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
.pp .light .kick,.pp .light-2 .kick{color:var(--lamp-ink)}

.pp h1,.pp .h2{font-family:var(--display);font-weight:500;letter-spacing:-0.028em;
  text-wrap:balance;margin:0}
.pp h1{font-size:clamp(2.7rem,5.6vw,4.8rem);line-height:1.02}
.pp .h2{font-size:clamp(2.1rem,4vw,3.3rem);line-height:1.05;margin-bottom:1.6rem}
/* tokens.css: cyan is an accent, never a heading color. The emphasis in a
   heading is carried by value, the same convention as .d1 em on the main site. */
.pp h1,.pp .dark .h2,.pp .dark-2 .h2{color:var(--ivory)}
.pp .light .h2,.pp .light-2 .h2{color:var(--pp-ink)}
.pp h1 em,.pp .dark .h2 em,.pp .dark-2 .h2 em{font-style:normal;color:color-mix(in srgb,var(--mist) 62%,#fff)}
.pp .light .h2 em,.pp .light-2 .h2 em{font-style:normal;color:#5b6a80}

.pp .sec p{font-size:1.1875rem;line-height:1.64;margin:0 0 1.15rem;text-wrap:pretty}
.pp .dark p,.pp .dark-2 p{color:#c9d2de}
.pp .light p,.pp .light-2 p{color:var(--pp-body)}
.pp .sec p.big{font-size:clamp(1.3rem,2vw,1.55rem);line-height:1.5}
.pp .dark p.big,.pp .dark-2 p.big{color:var(--ivory)}
.pp .light p.big,.pp .light-2 p.big{color:var(--pp-ink)}
.pp .sec p.note{font-size:1rem;line-height:1.55}
.pp .dark p.note{color:#9aa6b6}
.pp .light p.note,.pp .light-2 p.note{color:var(--pp-soft)}
.pp strong{font-weight:600}
.pp .dark strong,.pp .dark-2 strong{color:var(--ivory)}
.pp .light strong,.pp .light-2 strong{color:var(--pp-ink)}

/* numbered items on hairline rules, straight from the retreat deck */
.pp .ruled{list-style:none;margin:2.6rem 0 0;padding:0;counter-reset:r}
.pp .ruled>li{display:grid;grid-template-columns:3.4rem 1fr;gap:0 1.1rem;
  padding:1.6rem 0;border-top:1px solid var(--line)}
.pp .ruled>li:last-child{border-bottom:1px solid var(--line)}
.pp .light .ruled>li,.pp .light-2 .ruled>li{border-color:var(--pp-rule)}
.pp .ruled>li::before{counter-increment:r;content:counter(r,decimal-leading-zero);
  font-family:var(--display);font-size:1.05rem;color:var(--lamp);padding-top:.28rem}
.pp .light .ruled>li::before,.pp .light-2 .ruled>li::before{color:var(--lamp-ink)}
.pp .ruled h3{font-family:var(--display);font-weight:500;letter-spacing:-0.015em;
  font-size:clamp(1.28rem,2vw,1.55rem);line-height:1.2;margin:0 0 .5rem}
.pp .dark .ruled h3,.pp .dark-2 .ruled h3{color:var(--ivory)}
.pp .light .ruled h3,.pp .light-2 .ruled h3{color:var(--pp-ink)}
.pp .ruled p{font-size:1.0938rem;margin:0 0 .6rem}
.pp .ruled p:last-child{margin-bottom:0}

/* the one quote that should stop the reader */
.pp .say{margin:2.8rem 0;padding:0}
.pp .say::before{content:"";display:block;width:2.4rem;height:1px;background:var(--lamp);margin-bottom:1.2rem}
.pp .say p{font-family:var(--display);font-weight:500;letter-spacing:-0.018em;
  font-size:clamp(1.45rem,2.6vw,2.05rem);line-height:1.25;margin:0}
.pp .dark .say p{color:var(--ivory)}
.pp .light .say p,.pp .light-2 .say p{color:var(--pp-ink)}
.pp .light .say::before{background:var(--lamp-ink)}
.pp .say cite{display:block;margin-top:.9rem;font-style:normal;font-size:.95rem;
  font-family:var(--body);letter-spacing:0}
.pp .dark .say cite{color:#9aa6b6}
.pp .light .say cite{color:var(--pp-soft)}

/* the arithmetic, laid out as the conversation it is */
.pp .sum{margin:2.6rem 0 0;border-top:1px solid var(--line)}
.pp .sum>div{display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:baseline;
  padding:1.1rem 0;border-bottom:1px solid var(--line)}
.pp .sum dt{font-size:1.125rem;color:#c9d2de;margin:0}
.pp .sum dd{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(1.25rem,2vw,1.55rem);
  color:var(--ivory);text-align:right;max-width:18ch;text-wrap:balance}
.pp .sum .cut dd{color:#7d8899;text-decoration:line-through;text-decoration-thickness:1px}
.pp .sum .keep dd{color:var(--lamp-hi)}

/* the money table */
.pp .pay{margin:2.4rem 0 1.6rem;border-top:1px solid var(--pp-rule)}
.pp .pay>div{display:grid;grid-template-columns:1fr auto;gap:1.5rem;padding:1.15rem 0;
  border-bottom:1px solid var(--pp-rule);align-items:baseline}
.pp .pay dt{font-size:1.125rem;color:var(--pp-body);margin:0}
.pp .pay dd{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(1.3rem,2.2vw,1.7rem);
  color:var(--pp-ink)}
.pp .pay .end dd{color:var(--pp-soft);font-size:1.15rem}

.pp .actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem}
.pp .light .btn-2{color:var(--pp-ink);border-color:var(--pp-rule)}
.pp .light .btn-2:hover{border-color:var(--lamp-ink)}

.pp .hero{position:relative;min-height:min(92vh,860px);display:flex;align-items:flex-end;
  padding-block:clamp(120px,16vw,180px) clamp(64px,9vw,110px);overflow:hidden;background:var(--ink)}
.pp .hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(1.14) brightness(.92)}
.pp .hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,14,22,.30) 0%,rgba(10,14,22,.04) 34%,rgba(10,14,22,.38) 60%,rgba(10,14,22,.94) 100%)}
.pp .hero .wrap{position:relative;z-index:var(--z-raise);max-width:1080px}
.pp .hero p{font-size:clamp(1.15rem,1.7vw,1.35rem);line-height:1.6;color:#d6dde7;
  max-width:60ch;margin:1.6rem 0 0}

.pp .pic{margin:0;height:clamp(280px,48vh,560px);overflow:hidden;position:relative}
.pp .pic img{width:100%;height:100%;object-fit:cover;filter:saturate(1.12)}

@media (max-width:640px){
  .pp .ruled>li{grid-template-columns:2.4rem 1fr;gap:0 .7rem}
  .pp .sec p{font-size:1.09rem}
  .pp .sum>div,.pp .pay>div{grid-template-columns:1fr;gap:.25rem}
  .pp .sum dd,.pp .pay dd{text-align:left;max-width:none}
}

/* partner page forms: registration and feedback */
.pp .ppform{margin-top:2rem;display:grid;gap:1.1rem}
.pp .ppgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem 1.2rem}
.pp .ppform label{display:grid;gap:.4rem;font-size:.95rem;color:var(--pp-body);font-weight:500}
.pp .ppform input,.pp .ppform select,.pp .ppform textarea{font:inherit;font-size:1.02rem;font-weight:400;
  color:var(--pp-ink);background:#fff;border:1px solid rgba(11,26,51,.22);border-radius:3px;
  padding:.72rem .85rem;width:100%;box-sizing:border-box}
.pp .ppform input:focus,.pp .ppform select:focus,.pp .ppform textarea:focus{outline:2px solid var(--lamp-ink);outline-offset:1px;border-color:var(--lamp-ink)}
.pp .ppform textarea{resize:vertical;min-height:5.5rem}
.pp .ppform button{justify-self:start;margin-top:.4rem}
.pp .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ==========================================================================
   2026-09-28 polish pass
   ========================================================================== */
/* footer logo: the PNG is 1000x400, so a fixed width attribute squashed it */
.foot img{height:32px;width:auto}

/* guardrails: six items, so three columns, never a grid with empty cells */
.rails{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.rails{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.rails{grid-template-columns:1fr}}
.split .rails{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:560px){.split .rails{grid-template-columns:1fr}}

/* partner page: jump links under the hero intro */
.pp .hero p.private{font-size:.95rem;color:#aab4c4;margin-top:1rem}
.pp .hero p.jump{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;margin:2.2rem 0 0;font-size:1rem;max-width:none}
.pp .hero .jump a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:3px}
.pp .hero .jump a:hover{border-bottom-color:var(--lamp)}
.pp .ruled h3{text-wrap:balance}

/* partner documents (Playbook, Agreement): the same light reading page as the
   partner landing page. They were grey on dark, which Fernando said was hard to read. */
.ppdoc{background:#f4f6f9}
.ppdoc .doc{background:#f4f6f9}
.ppdoc .doc h1,.ppdoc .doc h2,.ppdoc .doc h3{color:#0b1a33}
.ppdoc .doc h2{border-top-color:rgba(11,26,51,.13)}
.ppdoc .doc p,.ppdoc .doc li{color:#243449;font-size:1.125rem;line-height:1.66}
.ppdoc .doc strong{color:#0b1a33}
.ppdoc .doc em{color:#243449}
.ppdoc .doc a{color:var(--lamp-ink)}
.ppdoc .doc li::marker{color:var(--lamp-ink)}
.ppdoc .doc hr{border-top-color:rgba(11,26,51,.13)}
.ppdoc .doc blockquote{background:#fff;border:1px solid rgba(11,26,51,.12)}
.ppdoc .doc blockquote p{color:#0b1a33}
.ppdoc .doc th{color:#0b1a33;border-bottom-color:var(--lamp-ink)}
.ppdoc .doc td{color:#243449;border-bottom-color:rgba(11,26,51,.12)}
.ppdoc .doc code{background:#e9eef4;color:#0b1a33}
.ppdoc .doc-meta{color:#55657b}
.ppdoc .doc-meta a{color:var(--lamp-ink)}
.ppdoc .doc-nav{border-top-color:rgba(11,26,51,.13)}
.ppdoc .doc-nav a{color:#0b1a33;border-color:rgba(11,26,51,.22)}
.ppdoc .doc-nav a:hover{border-color:var(--lamp-ink);color:var(--lamp-ink)}
@media(max-width:640px){.ppdoc .doc p,.ppdoc .doc li{font-size:1.06rem}}
/* phones: the hero copy runs over the bright sky, so seat it on a deeper scrim */
@media(max-width:640px){
  .pp .hero::after{background:linear-gradient(180deg,rgba(10,14,22,.40) 0%,rgba(10,14,22,.30) 22%,rgba(10,14,22,.62) 46%,rgba(10,14,22,.95) 100%)}
}

/* Keyboard users land on the content, not on the nav, the intro or the orb. */
.skip{position:absolute;left:1rem;top:-4rem;z-index:calc(var(--z-widget) + 1);padding:.7rem 1rem;background:var(--lamp);color:#0a0e16;
  font-family:var(--display);font-weight:500;font-size:.95rem;border-radius:2px;text-decoration:none}
.skip:focus{top:1rem}
main:focus{outline:none}

/* 2026-10-19 buyer lens audit */
/* F79: on phones the lede crossed the lamp, the lantern and the window glare. Darken the whole hero and lift the text. */
@media(max-width:700px){
  .phead-img img{filter:contrast(1.03) saturate(1.1) brightness(.85)}
  .phead-img::after{background:linear-gradient(180deg,rgba(6,9,18,.55) 0%,rgba(6,9,18,.8) 45%,rgba(6,9,18,.94) 100%)}
  .phead .lede{color:var(--ivory)}
}
/* F83: the privacy page has no hero image, so it does not need the hero height. */
.phead:not(:has(.phead-img)){min-height:0;padding-block:6.5rem 2.5rem}
/* F84: unchecked radios rendered as solid white discs on the dark cards. */
.quiz{color-scheme:dark}
/* F26: the "what is true today" box under the industry hero. */
.true-today{margin-top:1.6rem;padding:1rem 1.2rem;border:1px solid rgba(37,214,240,.35);border-radius:2px;max-width:62ch}
.true-today .mark{margin:0 0 .4rem}
.true-today .lede{font-size:.98rem;margin:0}
.hero-note{margin-top:1.2rem;font-size:.98rem;max-width:62ch}
.phead .fine{margin-top:1.2rem}
.phead .fine a{color:var(--lamp);text-underline-offset:3px}
/* F08: actions on the first phone screen. */
.hero-acts{margin:1.4rem 0 .4rem}
/* F27: the mid-page band. */
.mid-cta{padding-block:clamp(2.6rem,6vw,4rem)}
/* F06: the orb's recording line. */
.ca-orbui__rec{margin:.5rem auto 0;max-width:30ch;font-size:.68rem;line-height:1.45;color:rgba(255,255,255,.62);pointer-events:auto}
.ca-orbui__rec a{color:#4de1ff}
.ca-orbui.is-live .ca-orbui__rec{display:none}
/* F76, F77: progress on phones while answering. */
.qprog{display:none}
@media(max-width:600px){
  .qprog{display:block;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);padding:.55rem 1rem;background:oklch(0.155 0.014 254/.94);border-top:1px solid var(--line);font-family:var(--display);font-weight:500;font-size:.8rem;color:var(--ivory);text-align:center}
  .qprog[hidden]{display:none}
}

/* ==========================================================================
   2026-10-19 home rebuild: one offer. Hero carries the doors; demo, three
   rails, one paragraph on who you deal with, three steps and the form.
   ========================================================================== */
.hero--desk{min-height:0;align-items:flex-start;padding-block:clamp(96px,12vh,136px) clamp(40px,6vh,64px)}
.hero--desk .hero-copy{max-width:64ch}
.hero--desk .mark{margin-bottom:1.3rem}
.hero--desk .d1{font-size:clamp(2.45rem,4.6vw,4.3rem);max-width:15ch}
.hero--desk .lede{max-width:50ch;font-size:clamp(1.05rem,1.4vw,1.22rem);margin-top:1.2rem}
.hero--desk .hero-acts{margin-top:1.8rem}
.hero-proof{margin:1rem 0 0;font-size:.9rem;color:var(--mist-2)}
.pick-row{display:none}
.pick{margin-top:clamp(2.2rem,5vh,3.4rem)}
.pick-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.4rem;margin-bottom:1rem}
.pick-head h2{margin:0}
.pick-head p{margin:0;font-size:.9rem;color:var(--mist-2)}
.pick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.pick-card{position:relative;display:block;height:196px;overflow:hidden;border-radius:3px;text-decoration:none;color:var(--ivory);background:var(--ink-2);isolation:isolate}
.pick-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% 50%;display:block;
  transform:scale(1.02);transition:transform 1.1s var(--out),filter .6s var(--out);filter:saturate(1.1) brightness(1.05)}
.pick-card::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,9,18,.02) 0%,rgba(6,9,18,.18) 36%,rgba(6,9,18,.80) 64%,rgba(6,9,18,.95) 100%)}
.pick-card:hover img,.pick-card:focus-visible img{transform:scale(1.07);filter:saturate(1.18) brightness(1.15)}
.pick-in{position:absolute;inset:auto 0 0 0;padding:.95rem 1.05rem;z-index:1}
.pick-in h3{margin:0 0 .3rem;font-family:var(--display);font-weight:500;font-size:1.08rem;letter-spacing:-.015em}
.pick-in p{margin:0;font-size:.8rem;line-height:1.42;color:var(--mist);max-width:30ch}
.pick-in .go{display:inline-flex;align-items:center;gap:.4rem;margin-top:.55rem;font-family:var(--display);font-weight:500;font-size:.8rem;color:var(--lamp)}
.pick-in .go::after{content:"";width:1.1rem;height:1px;background:var(--lamp);transition:width .4s var(--out)}
.pick-card:hover .go::after{width:2rem}
@media(max-width:1000px){.pick-grid{grid-template-columns:repeat(2,1fr)}.pick-card{height:186px}}
@media(max-width:700px){
  .hero--desk{padding-top:92px}
  .pick-row{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;margin:1.1rem 0 0;font-family:var(--display);font-weight:500;font-size:.95rem}
  .pick-row a{color:var(--lamp-hi);text-decoration:none;border-bottom:1px solid var(--lamp-dim);padding-bottom:1px}
  .pick{margin-top:2.6rem}
  .pick-head{display:block}
  .pick-head p{margin-top:.4rem}
  .pick-grid{gap:2px}
  .pick-card{height:200px}
  .pick-in{padding:.8rem .85rem}
  .pick-in h3{font-size:1rem}
  .pick-in p{font-size:.76rem}
}
@media(max-width:420px){.pick-grid{grid-template-columns:1fr}.pick-card{height:150px}}
.demo-split{align-items:center}
.rails--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.rails--3{grid-template-columns:1fr}}
.who{display:grid;grid-template-columns:3fr 2fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.who-still{margin:0}
.who-still img{width:100%;height:auto;border-radius:3px;display:block}
.who-still figcaption{margin-top:.6rem;font-size:.82rem;color:var(--slate-3)}
@media(max-width:800px){.who{grid-template-columns:1fr}.who-still{max-width:420px}}
.review{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.4rem;margin-top:clamp(2.2rem,5vw,3.2rem);padding-top:clamp(2rem,4vw,2.8rem);border-top:1px solid var(--line);max-width:48rem}
.review .field--wide,.review .field--acts{grid-column:1/-1}
.review .field input{font-size:1.05rem;font-variant-numeric:normal}
.review .field textarea{width:100%;background:var(--ink-2);border:1px solid var(--ink-4);color:var(--ivory);font-family:var(--display);font-weight:500;font-size:1.05rem;padding:.7rem .85rem;border-radius:2px;resize:vertical;min-height:5.2rem}
.review .field textarea:focus{border-color:var(--lamp);outline:none}
.review .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.review .field--acts{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:.4rem}
.review .msg{margin:0;font-size:.9rem;color:var(--mist)}
.review .msg.err{color:#ff9d8a}
.review-done{grid-column:1/-1;font-family:var(--display);font-weight:500;font-size:1.4rem;color:var(--ivory);margin:0}
@media(max-width:600px){.review{grid-template-columns:1fr}}

/* 2026-10-19 industry pages: demo card without the photograph, true-today under
   the demo, the review form on the page. */
.demo-body--solo{grid-template-columns:1fr}
.demo-body--solo .demo-side{border-left:0}
.true-today--demo{margin-top:clamp(1.6rem,3vw,2.4rem);max-width:none}
.phead .mark{text-shadow:0 1px 14px oklch(0.125 0.014 254/.85)}
.review--center{margin-inline:auto}
.review-fine{text-align:center;max-width:none;margin-inline:auto}

/* language toggle (2026-10-21, /es/) */
.nav-lang{font-family:var(--display);font-weight:500;font-size:.78rem;letter-spacing:.08em;color:var(--mist);text-decoration:none;padding:.4rem .5rem;border:1px solid var(--line);border-radius:2px;margin-right:.3rem}
.nav-lang:hover{color:var(--ivory);border-color:var(--lamp)}