/* ============================================================
   Sollingual design system v2  (sol2.css)  "neutral reset"
   NEUTRAL / DISCIPLINED / APPLE-GRADE direction: white and near-black
   grounds, ONE amber accent on a strict budget (btn-primary fill,
   audio seek + eq while playing, focus ring, one .accent word per
   page). Photography and video carry all color. Six type rungs, one
   spacing scale, three band shells, one card, one list.
   Ships alongside the frozen legacy sol.css; pages swap their single
   stylesheet link as they are rebuilt. js/sol.js + js/sol-motion.js
   are byte-identical: every class/id they bind is kept verbatim, and
   the --sun1/--line/--good/--bad token NAMES survive as aliases.
   No em-dashes / en-dashes anywhere in this file (grep gate).
   ============================================================ */

/* ---- self-hosted variable fonts ---- */
@font-face{
  font-family:"Inter";
  src:url("/fonts/inter.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Sora";
  src:url("/fonts/sora.woff2") format("woff2");
  font-weight:100 800; font-style:normal; font-display:swap;
}

/* ============================================================
   TOKENS (LIGHT, primary)
   White ground, ONE alternating Apple-gray band, neutral ink stack,
   near-black photo/video/footer ground shared by both themes.
   ============================================================ */
:root{
  /* grounds */
  --bg:#ffffff;            /* base canvas */
  --bg-2:#f5f5f7;          /* the ONE alternating gray band */
  --dark:#0c0b0b;          /* photo/video/footer ground, same in both themes */

  /* surfaces: cards/panels; the *-alt pair flips them on .band-alt */
  --panel:#ffffff;
  --panel-2:#f5f5f7;
  --panel-alt:#ffffff;     /* card surface when sitting on --bg-2 */
  --panel-2-alt:#e8e8ec;   /* quiet surface when sitting on --bg-2 */

  /* neutral ink stack */
  --ink:#1d1d1f; --ink2:#424245; --mut:#6e6e73; --line:#e4e4e7;

  /* THE single accent. Budgeted: .accent word, audio seek/eq while playing,
     focus ring, and the logo mark. The bright brand amber. */
  --accent:#f59e0b;
  --accent-hover:#e8930a;
  /* the PRIMARY BUTTON fill is a deeper shade of the same amber so its WHITE
     label clears 4.5:1 (white on the bright #f59e0b is only ~2:1). Owner wants
     white button text everywhere; this keeps it legible and premium. */
  --accent-btn:#b8560a;    /* white label clears 4.5:1 (about 4.75) */
  --accent-btn-hover:#a44d08;
  --on-accent:#ffffff;     /* white label on the amber button */
  /* readable accent for SMALL/isolated text on light grounds (the bright
     brand amber misses 4.5:1 on white); dark grounds use the bright one. */
  --accent-text:#9a5b00;

  /* status colors: the live dot, booked tick, form message */
  --good:#3f8f5b; --bad:#c65a4a;
  /* darker on-surface TEXT variants (>=4.5:1 on light surfaces) */
  --good-text:#2c7746; --bad-text:#a83a2b;

  /* TOKEN-NAME BRIDGE: sol.js paints inline styles with var(--sun1) and
     var(--line) (seek bar) and var(--good)/var(--bad) (demo message).
     --line/--good/--bad are real tokens above; --sun1 aliases the accent
     so sol.js ships byte-identical. Never remove these four names. */
  --sun1:var(--accent);

  /* nav glass */
  --navbg:rgba(255,255,255,.82);

  /* ---- TYPE LADDER: exactly 6 rungs. Sora for display/h2, Inter rest. */
  --t-display:clamp(44px,6vw,76px);
  --t-h2:clamp(30px,3.6vw,46px);
  --t-h3:clamp(19px,1.5vw,21px);
  --t-lead:clamp(17px,1.3vw,19px);
  --t-body:16px;
  --t-small:13px;
  /* named UI-chrome sizes (not copy rungs): every px font-size in the
     kit lives in the six rungs above or right here, so the ladder plus
     this block stay the single grep-able list and cannot regrow. */
  --t-ui:14px;             /* nav links, card body, fields, chat, footer */
  --t-btn:15px;            /* buttons, .tlink, chat head, mobile tier */
  --t-micro:11px;          /* flyout micro copy, roi label, bubble label */
  --t-brand:20px;          /* nav + footer wordmark */
  --t-ghost:clamp(40px,6vw,72px); /* deck ghost numeral */

  /* ---- SPACING: one scale + one section rhythm + one gap */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:40px; --s-5:64px;
  --s-section:clamp(88px,10vw,140px);
  --gap:24px;

  /* ---- RADII: three rungs + pill */
  --r-1:10px; --r-2:16px; --r-3:24px; --r-pill:999px;

  /* ---- exactly two neutral shadows: resting and floating */
  --sh-1:0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.05);
  --sh-2:0 8px 20px rgba(0,0,0,.07), 0 28px 60px rgba(0,0,0,.10);

  /* ---- motion: one confident ease-out curve, two durations */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-1:.18s;            /* hovers, small state flips */
  --dur-2:.6s;             /* reveals, fades */
  /* a springier settle for BELOW-fold reveals only: a soft overshoot
     that lands cleanly. Never used above the fold (heroes paint flat). */
  --ease-rise:cubic-bezier(.16,.84,.34,1.06);
  --dur-rise:.72s;         /* line/media reveals below the fold */

  /* ---- one crisp accent focus ring on every actionable control */
  --ring:0 0 0 3px rgba(245,158,11,.35);
}

/* ---- TOKENS (DARK): retuned neutral near-black family. Light and dark
   read as one design; --dark and the accent are shared. ---- */
html[data-theme="dark"]{
  --bg:#131211;
  --bg-2:#1a1918;
  --panel:#1d1c1b;
  --panel-2:#242322;
  --panel-alt:#242322;
  --panel-2-alt:#2c2b2a;
  --ink:#f4f4f2; --ink2:#d6d5d2; --mut:#a3a19d; --line:#2e2c2a;
  --navbg:rgba(19,18,17,.80);
  /* the bright accent already clears as text on dark */
  --accent-text:#f59e0b;
  /* brightened status values that clear 4.5:1 as text on dark panels */
  --good-text:#48a468; --bad-text:#d0705f;
  --sh-1:0 1px 2px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.40);
  --sh-2:0 10px 26px rgba(0,0,0,.55), 0 34px 70px rgba(0,0,0,.55);
  color-scheme:dark;
}

/* The demo-form status message is colored inline by sol.js with
   var(--good)/var(--bad). Re-point ONLY those two names inside the
   message element to the readable text variants; the bright fills/dots
   everywhere else are untouched. (Ported contract; do not remove.) */
#demoMsg{--good:var(--good-text);--bad:var(--bad-text)}

/* ============================================================
   RESET + BASE
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:78px;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font:var(--t-body)/1.6 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;font-feature-settings:"cv11" 1,"ss01" 1;
  font-optical-sizing:auto;
}
a{color:inherit;text-decoration:none}
img,video{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
section{padding:var(--s-section) 0;position:relative}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
p{text-wrap:pretty}

/* ---- type: the six rungs applied ---- */
h1,h2,h3{text-wrap:balance}
h1{
  font-family:"Sora","Inter",system-ui,sans-serif;
  font-size:var(--t-display);
  line-height:1.02;font-weight:700;letter-spacing:-.03em;
}
h2{
  font-family:"Sora","Inter",system-ui,sans-serif;
  font-size:var(--t-h2);
  line-height:1.08;font-weight:700;letter-spacing:-.025em;
}
h3{font-size:var(--t-h3);font-weight:650;line-height:1.3;letter-spacing:-.012em}
.lead{font-size:var(--t-lead);line-height:1.58;letter-spacing:-.005em;color:var(--ink2)}
.small{font-size:var(--t-small);color:var(--mut)}
/* eyebrow: the only wide-tracked caps. Muted, never amber. */
.eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}

/* the ONE accent word per page (hero headline). Readable roast on light
   grounds; the bright brand amber on dark grounds where it clears 3:1. */
.accent{color:var(--accent-text)}
.hero-cine .accent,.band-dark .accent,.sv-copy .accent{color:var(--accent)}

/* ---- icon system: stroke icons inherit text color ---- */
.ic-svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none;flex:none;display:inline-block;vertical-align:middle}

/* ---- one consistent keyboard focus ring (mouse users never see it) ---- */
.btn-primary:focus-visible,.btn-quiet:focus-visible,.tlink:focus-visible,
.themebtn:focus-visible,.hamburger:focus-visible,.heartab:focus-visible,
.playbtn:focus-visible,.seek:focus-visible,.solbubble:focus-visible,
.solx:focus-visible,.mp-acc:focus-visible,.card--link:focus-visible,
.navlinks>a:focus-visible,.navprod>.prodlink:focus-visible,
.fly-sec:focus-visible,.fly-tier:focus-visible,.mobilepanel a:focus-visible,
.sitefoot a:focus-visible,.hero-vidctl:focus-visible{outline:none;box-shadow:var(--ring)}
.fld:focus{outline:0;border-color:var(--accent);box-shadow:var(--ring)}
.hearscript:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ============================================================
   DARK-CONTEXT RE-TOKENING
   .band-dark / .sitefoot sit on the shared --dark
   ground in BOTH themes. Re-pointing the surface + ink tokens inside
   them flips every kit component (cards, lists, console, hairlines)
   to its dark variant with no extra selectors. The console inside a
   dark band is the "night console" chapter.
   ============================================================ */
.band-dark,.sitefoot{
  --bg:var(--dark);
  --bg-2:#211f1e;
  --ink:#ffffff;
  --ink2:rgba(255,255,255,.82);
  --mut:rgba(255,255,255,.60);
  --line:rgba(255,255,255,.14);
  --panel:#161514;
  --panel-2:#211f1e;
  --panel-alt:#161514;
  --panel-2-alt:#211f1e;
  --accent-text:#f59e0b;
  --good-text:#48a468;
  --bad-text:#d0705f;
  color:var(--ink2);
}

/* ============================================================
   BEHAVIORAL CONTRACT CSS  (bound by js/sol.js + js/sol-motion.js;
   ported from sol.css and reskinned neutral. Class names verbatim.)
   ============================================================ */

/* ---- scroll reveal: sol.js adds .js-reveal to <html>, .reveal to
   targets, .in on intersection; stagger delay is set inline. Below-fold
   only; the springier --ease-rise gives a clean rise+fade with a small
   settle. Heroes never carry .reveal, so this never touches the fold. ---- */
.js-reveal .reveal{opacity:0;transform:translateY(22px);transition:opacity var(--dur-rise) var(--ease-rise),transform var(--dur-rise) var(--ease-rise)}
.js-reveal .reveal.in{opacity:1;transform:none}

/* ---- staggered children: sol-motion.js arms .sm-armed on the parent,
   .sm-child + inline delay on kids, .sm-in on the parent in view. Same
   springier settle; the 70ms step is owned by the engine. ---- */
.sm-armed .sm-child{
  opacity:0;transform:translateY(22px);
  transition:opacity var(--dur-rise) var(--ease-rise),transform var(--dur-rise) var(--ease-rise);
}
.sm-armed.sm-in .sm-child{opacity:1;transform:none}
/* a [data-lines] heading inside a stagger owns its own line-mask reveal,
   so it opts out of the parent child-fade (no double animation): it stays
   opaque and untransformed while its masked lines do the work. */
.sm-armed .sm-child[data-lines]{opacity:1;transform:none;transition:none}

/* ---- headline mask rise: sol-motion.js wraps a [data-lines] heading's
   own content, in place, in a single .sm-line clip mask holding a
   .sm-line-i inner; the inner rises up from behind the mask when
   .sm-lines-in lands. The mask is a plain block that inherits the
   heading's box exactly (no added padding, no fixed height), so the
   wrapped heading occupies the identical space it did unwrapped: zero
   layout shift at every viewport. The wrap only runs when JS is on
   (no-JS keeps the plain heading) and is skipped under reduced motion. */
.sm-lines{position:relative}
.sm-line{display:block;overflow:hidden}
.sm-line-i{
  display:block;transform:translateY(115%);
  transition:transform var(--dur-rise) var(--ease-rise);
}
.sm-lines.sm-lines-in .sm-line-i{transform:none}

/* ---- scroll-aware ambient video: initial hide is gated on .js-reveal so
   no-JS visitors always see the frame; sol-motion.js adds .sv-in. ---- */
.js-reveal video[data-scrollvideo]{
  opacity:0;transform:scale(1.03);
  transition:opacity .8s var(--ease),transform 1.1s var(--ease);
}
video[data-scrollvideo].sv-in{opacity:1;transform:none}

/* ---- parallax elements promise their own compositing layer ---- */
[data-parallax]{will-change:transform}

/* ---- sticky numbered deck: sol-motion.js eases covered cards; CSS owns
   the pin + the ghost index (ink at 6%, the one neutral flourish). ---- */
.deck{display:grid;gap:26px}
.deck-card{
  position:sticky;top:calc(84px + 2vh);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-3);
  box-shadow:var(--sh-2);padding:clamp(24px,4vw,44px);
  transform-origin:center top;will-change:transform,opacity;
}
.deck-card::before{
  content:attr(data-n);position:absolute;top:18px;right:26px;
  font-family:"Sora","Inter",system-ui,sans-serif;
  font-size:var(--t-ghost);font-weight:700;letter-spacing:-.04em;
  color:var(--ink);opacity:.06;line-height:1;pointer-events:none;
  font-variant-numeric:tabular-nums;
}
@media(max-width:820px){
  .deck-card{position:static;--t-ghost:40px}
  .deck-card::before{top:14px;right:16px}
}

/* ---- media presence rise: sol-motion.js adds .sm-rise-in to a
   [data-rise] framed photo (a .featrow-media) when it scrolls in. The
   inner image eases from a hair over-scale + soft fade to rest. Gated on
   .js-reveal so no-JS visitors see the photo immediately; the frame keeps
   overflow:hidden so the scale never bleeds or shifts layout. ---- */
.js-reveal .featrow-media[data-rise]{opacity:0;transition:opacity var(--dur-rise) var(--ease)}
.js-reveal .featrow-media[data-rise] img{
  transform:scale(1.03);
  transition:transform 1s var(--ease-rise);
}
.featrow-media[data-rise].sm-rise-in{opacity:1}
.featrow-media[data-rise].sm-rise-in img{transform:none}

/* ============================================================
   NAV  (same DOM/JS as legacy: #themeBtn #hamburger #mobilePanel,
   [data-navprod] .prodlink .flyout .open, .mp-acc/.mp-group/.mp-sub)
   Neutral glass bar, hairline rule, flat amber disc logo.
   ============================================================ */
nav{position:sticky;top:0;z-index:40;background:var(--navbg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:14px;height:66px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:var(--t-brand);letter-spacing:-.5px}
.brand b{color:var(--ink)}
/* the logo mark: a FLAT amber disc. No gradient, no glow. */
.sun{width:26px;height:26px;border-radius:50%;background:var(--accent)}
.navlinks{margin-left:auto;display:flex;gap:20px;align-items:center}
.navlinks>a{color:var(--mut);font-weight:600;font-size:var(--t-ui);transition:color .15s ease}
.navlinks>a:hover,.navlinks>a.active{color:var(--ink)}
.navlinks .btn-primary{color:var(--on-accent)}
.themebtn{border:1px solid var(--line);background:var(--panel);color:var(--ink);width:38px;height:38px;border-radius:50%;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;transition:border-color .15s ease,transform .15s ease}
.themebtn:hover{border-color:var(--mut);transform:translateY(-1px)}
.themebtn .ic-svg{width:18px;height:18px}

/* ---- product flyout: flat link navigates; hover/focus/.open reveals a
   quiet panel of deep links. Hover bridge closes the gap. (JS contract) ---- */
.navprod{position:relative}
.navprod>.prodlink{color:var(--mut);font-weight:600;font-size:var(--t-ui);transition:color .15s ease;cursor:pointer}
.navprod:hover>.prodlink,.navprod:focus-within>.prodlink,.navprod.open>.prodlink{color:var(--ink)}
.navprod::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px;pointer-events:none}
.navprod:hover::after,.navprod:focus-within::after,.navprod.open::after{pointer-events:auto}
.flyout{
  position:absolute;top:calc(100% + 14px);left:50%;
  transform:translateX(-50%) translateY(6px);
  min-width:264px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-2);
  box-shadow:var(--sh-2);padding:6px;
  opacity:0;visibility:hidden;
  transition:opacity .16s var(--ease),transform .16s var(--ease);
  z-index:50;
}
.navprod:hover>.flyout,.navprod:focus-within>.flyout,.navprod.open>.flyout{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.fly-head{padding:12px 13px 10px}
.fly-eyebrow{display:block;font-size:var(--t-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.fly-note{display:block;font-size:var(--t-small);color:var(--mut);line-height:1.45;margin-top:4px}
.fly-tiers{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:0 6px 6px}
.fly-tiers-one{grid-template-columns:1fr}
.fly-tier{display:flex;flex-direction:column;gap:2px;padding:10px 11px;border-radius:var(--r-1);transition:background .14s var(--ease)}
.fly-tier:hover{background:var(--panel-2)}
.fly-tier-name{font-size:var(--t-small);font-weight:700;color:var(--ink);line-height:1.1}
.fly-tier-price{font-size:var(--t-ui);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.fly-tier-price small{font-size:var(--t-micro);font-weight:600;color:var(--mut);letter-spacing:0}
.fly-tier-sub{font-size:var(--t-micro);color:var(--mut);line-height:1.35}
.fly-sections{display:flex;flex-direction:column;padding:5px 6px 6px;border-top:1px solid var(--line);margin-top:2px}
.fly-sec-head{font-size:var(--t-micro);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mut);padding:9px 11px 3px}
.fly-sec-head+.fly-sec{padding-top:5px}
.fly-sec-head:not(:first-child){margin-top:3px;border-top:1px solid var(--line);padding-top:11px}
.fly-sec{font-size:var(--t-small);font-weight:600;color:var(--ink2);padding:8px 11px;border-radius:var(--r-1);transition:background .14s var(--ease),color .14s var(--ease)}
.fly-sec:hover{background:var(--panel-2);color:var(--ink)}

/* ---- mobile hamburger + panel (accordion products; JS contract) ---- */
.hamburger{display:none;border:1px solid var(--line);background:var(--panel);color:var(--ink);width:40px;height:40px;border-radius:var(--r-1);cursor:pointer;align-items:center;justify-content:center}
.hamburger .ic-svg{width:22px;height:22px}
.mobilepanel{display:none;position:fixed;left:0;right:0;top:66px;z-index:39;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:var(--sh-2);transform:translateY(-12px);opacity:0;pointer-events:none;transition:transform .22s ease,opacity .22s ease;max-height:calc(100vh - 66px);overflow-y:auto}
.mobilepanel.open{display:flex;transform:translateY(0);opacity:1;pointer-events:auto}
.mobilepanel .wrap{flex-direction:column;align-items:stretch;height:auto;gap:2px;padding-top:10px;padding-bottom:16px;display:flex}
.mobilepanel>.wrap>a{padding:13px 4px;font-weight:650;font-size:var(--t-body);color:var(--ink);border-bottom:1px solid var(--line)}
.mobilepanel .mp-cta{margin-top:16px;justify-content:center;border-bottom:0!important}
.mp-group{border-bottom:1px solid var(--line)}
.mp-acc{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:0;border:0;cursor:pointer;font-family:inherit;font-weight:650;font-size:var(--t-body);color:var(--ink);padding:14px 4px;text-align:left}
.mp-chev{width:20px;height:20px;color:var(--mut);transition:transform .2s var(--ease);flex:none}
.mp-group.open .mp-chev{transform:rotate(180deg)}
.mp-sub{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .24s var(--ease);padding-left:6px}
.mp-group.open .mp-sub{grid-template-rows:1fr}
.mp-sub>*{min-height:0}
.mp-sub a{padding:10px 4px;font-size:var(--t-ui);font-weight:600;color:var(--mut);border-bottom:1px solid var(--line)}
.mp-sub a:last-child{border-bottom:0}
.mp-sub a.mp-tier{color:var(--ink);font-weight:700;font-size:var(--t-btn);display:flex;align-items:baseline;gap:8px;margin-top:4px}
.mp-sub a.mp-tier span{color:var(--mut);font-weight:700;font-size:var(--t-small);font-variant-numeric:tabular-nums}
@media(max-width:1000px){
  .navlinks{display:none}
  .hamburger{display:flex;margin-left:auto}
}

/* ---- nav over the video hero: transparent + light until sol.js adds
   .nav-solid past 40px of scroll. Keyed off body.has-video-hero. ---- */
.has-video-hero nav{
  background:linear-gradient(180deg, rgba(10,10,11,.42), rgba(10,10,11,0));
  border-bottom-color:rgba(255,255,255,.12);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.has-video-hero nav .brand,.has-video-hero nav .brand b{color:#fff}
.has-video-hero nav .navlinks>a,
.has-video-hero nav .navprod>.prodlink{color:rgba(255,255,255,.82)}
.has-video-hero nav .navlinks>a:hover,
.has-video-hero nav .navprod:hover>.prodlink,
.has-video-hero nav .navprod.open>.prodlink{color:#fff}
.has-video-hero nav .themebtn,
.has-video-hero nav .hamburger{
  background:rgba(10,10,11,.34);border-color:rgba(255,255,255,.28);color:#fff;
}
.has-video-hero nav .themebtn:hover{border-color:rgba(255,255,255,.6)}
.has-video-hero nav.nav-solid{
  background:var(--navbg);border-bottom-color:var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.has-video-hero nav.nav-solid .brand,
.has-video-hero nav.nav-solid .brand b{color:var(--ink)}
.has-video-hero nav.nav-solid .navlinks>a,
.has-video-hero nav.nav-solid .navprod>.prodlink{color:var(--mut)}
.has-video-hero nav.nav-solid .navlinks>a:hover,
.has-video-hero nav.nav-solid .navprod:hover>.prodlink,
.has-video-hero nav.nav-solid .navprod.open>.prodlink{color:var(--ink)}
.has-video-hero nav.nav-solid .themebtn,
.has-video-hero nav.nav-solid .hamburger{
  background:var(--panel);border-color:var(--line);color:var(--ink);
}

/* ============================================================
   SECTION SHELLS: exactly three. Strict alternation.
   .band       base white/near-black canvas
   .band-alt   the one gray band + hairlines (cards auto-flip surface)
   .band-dark  the shared near-black ground, both themes
   ============================================================ */
.band{background:var(--bg)}
.band-alt{
  background:var(--bg-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  --panel:var(--panel-alt);
  --panel-2:var(--panel-2-alt);
}
.band-dark{position:relative;background:var(--dark);isolation:isolate;overflow:hidden}
.band-dark h1,.band-dark h2,.band-dark h3{color:var(--ink)}

/* ============================================================
   SECTION HEADING BLOCK: .sechead (eyebrow + h2 + lead, 60ch cap).
   Centered by default; .sechead--left for split layouts. Optional
   data-num="01" renders a quiet Linear-style index above the eyebrow.
   ============================================================ */
.sechead{max-width:60ch;margin:0 auto var(--s-4);text-align:center}
.sechead .eyebrow{margin-bottom:14px}
.sechead .lead{margin:14px auto 0;max-width:60ch}
.sechead[data-num]::before{
  content:attr(data-num);display:block;margin-bottom:12px;
  font-size:var(--t-small);font-weight:600;letter-spacing:.1em;
  color:var(--mut);font-variant-numeric:tabular-nums;
}
.sechead--left{margin-left:0;text-align:left}
.sechead--left .lead{margin-left:0}

/* ============================================================
   THE CARD: one card, three modifiers. Hairline border, resting
   shadow, kit radius. Surface flips automatically on .band-alt and
   inside dark contexts via the token indirection above.
   .card--link   whole-card anchor (family cross-links, product tiles)
   .card--price  pricing card (flat price, note, CTA pinned)
   .card--quiet  FAQ / hints: hairline only, no shadow
   ============================================================ */
.card{
  position:relative;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-2);
  padding:28px;box-shadow:var(--sh-1);
}
.card>h3{margin-bottom:8px}
.card p{color:var(--mut);font-size:var(--t-ui);line-height:1.55}

a.card--link{color:var(--ink);transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
a.card--link:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.card--link .tlink{margin-top:auto;padding-top:18px}

.card--price .amt{
  font-family:"Sora","Inter",system-ui,sans-serif;
  font-size:var(--t-h2);font-weight:700;letter-spacing:-.02em;
  margin:10px 0 2px;font-variant-numeric:tabular-nums;line-height:1.05;
}
.card--price .amt small{font-size:var(--t-ui);color:var(--mut);font-weight:600;letter-spacing:0}
.card--price .note{color:var(--mut);font-size:var(--t-small);line-height:1.5;margin-bottom:16px}
.card--price .btn-primary,.card--price .btn-quiet{margin-top:auto;justify-content:center}
.card--price .list{margin:0 0 20px}
/* the price-card CTA is a .tlink (the one mid-page CTA), pinned to the
   card foot the same way the link card pins its own. */
.card--price .tlink{margin-top:auto;padding-top:18px}

.card--quiet{background:var(--panel-2);border-color:var(--line);box-shadow:none;padding:22px}
/* quiet cards sit on the darker --panel-2-alt surface inside .band-alt,
   where --mut misses AA; their body copy steps up to ink2. */
.card--quiet p{color:var(--ink2)}

/* ============================================================
   THE LIST: one icon list. 20px currentColor icons, no chips.
   .list--inline is the trust row (small, muted, wraps).
   ============================================================ */
.list{list-style:none;display:flex;flex-direction:column;gap:12px}
.list li{display:flex;gap:12px;align-items:flex-start;font-size:var(--t-ui);line-height:1.5;color:var(--ink2)}
.list .ic-svg{width:20px;height:20px;margin-top:1px;color:currentColor}
.list--inline{flex-direction:row;flex-wrap:wrap;gap:8px 20px}
.list--inline li{font-size:var(--t-small);color:var(--mut);align-items:center;gap:8px}
.list--inline .ic-svg{width:16px;height:16px;margin-top:0}

/* ============================================================
   BUTTONS + TEXT LINK
   .btn-primary  THE amber pill. Nav, hero, form submit. Nowhere else.
   .btn-quiet    hairline pill; turns glass automatically in dark bands.
   .tlink        chevron text link: the ONLY mid-page CTA.
   ============================================================ */
.btn-primary,.btn-quiet{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:var(--r-pill);padding:14px 26px;
  font-weight:700;font-size:var(--t-btn);letter-spacing:-.01em;line-height:1;
  cursor:pointer;border:0;font-family:inherit;
  transition:transform var(--dur-1) var(--ease),background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);
}
.btn-primary .ic-svg,.btn-quiet .ic-svg{width:18px;height:18px;stroke-width:2}
.btn-primary{background:var(--accent-btn);color:var(--on-accent)}
.btn-primary:hover{transform:translateY(-1px);background:var(--accent-btn-hover)}
.btn-primary:active{transform:translateY(0)}
.btn-quiet{background:var(--panel);color:var(--ink);border:1px solid var(--line)}
.btn-quiet:hover{transform:translateY(-1px);border-color:var(--mut)}
/* dark-context quiet button: neutral glass (absorbs the old btn-glass) */
.band-dark .btn-quiet,.hero-cine .btn-quiet,.sv-copy .btn-quiet{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#fff;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.band-dark .btn-quiet:hover,
.hero-cine .btn-quiet:hover,.sv-copy .btn-quiet:hover{border-color:rgba(255,255,255,.55)}
nav .btn-primary{padding:10px 18px;font-size:var(--t-ui)}
.cta-row{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}

.tlink{display:inline-flex;align-items:center;gap:6px;font-weight:650;font-size:var(--t-btn);color:var(--ink);letter-spacing:-.01em}
.tlink::after{content:"\203A";font-weight:700;font-size:1.1em;line-height:1;transition:transform var(--dur-1) var(--ease)}
.tlink:hover{text-decoration:underline;text-underline-offset:3px}
.tlink:hover::after{transform:translateX(3px)}
.band-dark .tlink{color:var(--ink)}

/* ============================================================
   .pheader  FULL-BLEED PHOTO HERO (product pages).
   The tool flat-lay bleeds edge to edge and the copy sits in the
   photo's OWN empty space, so the tools are never covered:
     .pheader--gold      (flatlay-gold)      gold tools pack the LEFT
        on black; the copy sits on the RIGHT, on the black. No scrim.
     .pheader--wood      (flatlay-wood)      screwdrivers run along
        the BOTTOM; the copy sits in the clean wood at the TOP.
     .pheader--electric  (flatlay-electric)  tools ring the frame;
        the copy sits in the open CENTER.
   White copy + amber accent on all three, both site themes (the
   photos read the same light and dark). Gradients are minimal: none
   on the black gold shot, a soft feathered touch only where the pale
   wood needs it, kept off the tools. Paints instantly under the solid
   nav; one-shot scale settle, killed for reduced-motion.

   Structure kept verbatim: .pheader > .wrap.pheader-grid >
   .pheader-copy (...) + figure.pheader-media > img. The figure is
   absolute inset:0 and the .wrap stays position:STATIC, so the photo
   bleeds to the .pheader edges (not the centered .wrap); the copy is
   the positioned element, and flex on the .wrap drops it into each
   photo's empty zone.
   ============================================================ */
.pheader{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--dark);
  min-height:clamp(600px,88vh,940px);
  display:flex;
}
/* the photo bleeds edge to edge behind everything */
.pheader-media{
  margin:0;position:absolute;inset:0;z-index:0;
  border:0;border-radius:0;box-shadow:none;overflow:hidden;
  background:var(--dark);
}
.pheader-media img{display:block;width:100%;height:100%;object-fit:cover}
/* Each photo is framed so its TOOLS sit at an edge and its EMPTY bench fills
   the zone the copy lands in. A light zoom pushes the tools further out so the
   copy never sits on a tool. (sizes=100vw on the <img> loads the full-res file
   so the zoom stays sharp.) */
.pheader-media--gold img{object-position:left center}   /* gold tools LEFT, black RIGHT for the copy */
.pheader-media--electric img{                            /* tools ring the CENTER: zoom to open it   */
  object-position:center;transform:scale(1.16);transform-origin:center;
}
.pheader-media--wood img{object-position:center bottom}  /* screwdrivers GROUNDED + visible at bottom */

/* a whisper of scrim only where the pale wood needs it, kept OFF the tools.
   pointer-events off so the CTAs stay clickable. */
.pheader::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
/* gold: the black bench already carries white type, so NO scrim at all */
/* wood: a soft wash over the TOP wood under the copy, gone before the tools */
.pheader--wood::after{
  background:linear-gradient(180deg,
    rgba(10,10,11,.68) 0%, rgba(10,10,11,.52) 24%,
    rgba(10,10,11,.26) 46%, rgba(10,10,11,0) 66%);
}
/* wood + electric: the trust checklist is dropped from the hero so the copy
   fits in the clean bench above the tools; it still lives in the section
   below. (Gold keeps it: the black area has room.) */
.pheader--wood .pheader-copy .list--inline,
.pheader--electric .pheader-copy .list--inline{display:none}
/* electric: a soft round pool over the open CENTER behind the copy */
.pheader--electric::after{
  background:radial-gradient(56% 58% at 50% 46%,
    rgba(10,10,11,.64) 0%, rgba(10,10,11,.42) 44%,
    rgba(10,10,11,.14) 68%, rgba(10,10,11,0) 84%);
}

/* the copy container fills the band; flex drops the copy into the photo's
   empty zone per variant. The .wrap stays STATIC so the absolute figure keeps
   referencing .pheader (full bleed); the COPY is the positioned element. The
   copy is kept TIGHT so it fits inside each photo's clean bench. */
.pheader .wrap.pheader-grid{
  width:100%;margin:0 auto;
  display:flex;
  padding-top:clamp(100px,12vh,144px);
  padding-bottom:clamp(44px,7vh,84px);
}
.pheader-copy{position:relative;z-index:2;max-width:36rem;color:#fff}
.pheader-copy .eyebrow{color:rgba(255,255,255,.74)}
.pheader-copy h1{margin-top:12px;max-width:18ch;color:#fff}
.pheader-copy .accent{color:var(--accent)}
.pheader-copy .lead{margin:13px 0 0;max-width:56ch;color:rgba(255,255,255,.88)}
.pheader-copy .lead b{color:#fff}
.pheader-copy .cta-row{margin-top:20px}
.pheader-copy .list--inline{margin-top:15px}
.pheader-copy .list--inline,
.pheader-copy .list--inline li{color:rgba(255,255,255,.80)}
.pheader-copy .small{margin-top:12px;color:rgba(255,255,255,.66)}
/* text-shadow only on the light photos, as insurance; the gold shot needs none */
.pheader--wood .pheader-copy h1,.pheader--wood .pheader-copy .lead,
.pheader--electric .pheader-copy h1,.pheader--electric .pheader-copy .lead{
  text-shadow:0 1px 14px rgba(0,0,0,.40);
}
/* quiet button = white glass on the photo */
.pheader .btn-quiet{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.30);color:#fff;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.pheader .btn-quiet:hover{border-color:rgba(255,255,255,.58)}

/* PLACEMENT: drop the copy into each photo's empty space */
.pheader--gold .wrap{justify-content:flex-end;align-items:center}       /* RIGHT, centered */
.pheader--wood .wrap{justify-content:flex-start;align-items:flex-start}  /* TOP, left       */
.pheader--electric .wrap{justify-content:center;align-items:center}      /* CENTER          */
.pheader--electric .pheader-copy{text-align:center;max-width:34rem}
.pheader--electric .cta-row{justify-content:center}
.pheader--electric .list--inline{justify-content:center}
/* wood: wider copy so the headline runs 2 lines and the block sits higher,
   lifting the lead + CTAs off the screwdriver handles */
.pheader--wood .pheader-copy{max-width:46rem}
.pheader--wood .pheader-copy h1{max-width:none}

/* ---- mobile (<=820px): full-bleed photo, copy stacks and anchors to the
   bottom over one soft bottom wash that reads on any photo. Zoom eased off
   (portrait reframes on its own); tools kept in frame; no horizontal scroll. */
@media(max-width:820px){
  .pheader{min-height:clamp(540px,86svh,760px)}
  .pheader .wrap.pheader-grid{
    padding-top:clamp(116px,16vh,156px);
    padding-bottom:clamp(44px,8vh,68px);
    justify-content:flex-start;align-items:flex-end;
  }
  .pheader-copy{max-width:100%;min-width:0;text-align:left}
  .pheader--electric .pheader-copy{text-align:left;max-width:100%}
  .pheader--electric .cta-row,.pheader--electric .list--inline{justify-content:flex-start}
  .pheader-copy h1{max-width:100%}
  .pheader-copy .lead{max-width:100%}
  /* buttons + trust row wrap instead of overflowing the narrow viewport */
  .pheader .cta-row{flex-wrap:wrap}
  .pheader .list--inline{flex-wrap:wrap}
  /* one soft bottom wash for legibility on any photo, on every variant */
  .pheader--gold::after,.pheader--wood::after,.pheader--electric::after{
    background:linear-gradient(0deg,
      rgba(10,10,11,.82) 0%, rgba(10,10,11,.56) 30%,
      rgba(10,10,11,.20) 56%, rgba(10,10,11,0) 78%);
  }
  .pheader-media--gold img{object-position:center;transform:none}
  .pheader-media--electric img{object-position:center;transform:scale(1.06);transform-origin:center}
  .pheader-media--wood img{object-position:center bottom;transform:none}
  .pheader .cta-row .btn-primary,
  .pheader .cta-row .btn-quiet{flex:1 1 auto;justify-content:center}
}

/* ============================================================
   .hero-cine  FULL-BLEED VIDEO HERO (home). Poster paints instantly
   via the element background; sol.js adds .is-playing on canplay and
   injects the .hero-vidctl pause puck (WCAG 2.2.2). Scrims neutral;
   bottom fade dissolves into the page ground.
   ============================================================ */
.hero-cine{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(120px,15vh,190px) 0 clamp(88px,12vh,132px);
  background:var(--dark);
}
/* the poster paints on the always-visible WRAPPER so it shows through
   the transparent element while the stream loads, and so no-JS visitors
   (who never get .is-playing) still see the frame. */
.hero-cine .hero-video{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:#0c0b0b url("/video/help-hero-poster.jpg") center 42%/cover no-repeat;
}
.hero-cine .hero-video-el{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  transition:opacity .9s var(--ease);
}
/* the fade-from-poster hide is JS-gated like data-scrollvideo above */
.js-reveal .hero-cine .hero-video-el{opacity:0}
.js-reveal .hero-cine .hero-video-el.is-playing{opacity:1}
/* neutral legibility scrim anchored to the copy side + bottom fade to bg */
.hero-cine .hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(10,10,11,.86) 0%, rgba(10,10,11,.60) 42%, rgba(10,10,11,.18) 100%),
    linear-gradient(0deg, var(--bg) 0%, transparent 22%);
}
.hero-cine .wrap{position:relative;z-index:2}

/* hero layout: copy left, the hear-a-call console floating right */
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(40px,5vw,64px);align-items:center}
.hero-grid>*{min-width:0}
.hero-cine .hero-copy{color:#fff}
.hero-cine .hero-copy .eyebrow{color:rgba(255,255,255,.66)}
.hero-cine h1{color:#fff}
.hero-cine .lead{color:rgba(255,255,255,.85);margin-top:22px;max-width:52ch}
.hero-cine .lead b{color:#fff}
.hero-cine .list--inline{margin-top:26px;color:rgba(255,255,255,.72)}
.hero-cine .list--inline li{color:rgba(255,255,255,.72)}
.hero-cine h1{margin-top:18px;max-width:15ch}
.hero-stage{position:relative;display:flex;justify-content:center}
.hero-stage .console{position:relative;z-index:1;width:100%;max-width:440px}
/* the light console lifts off the dark video with one deep neutral shadow */
.hero-cine .console{box-shadow:0 24px 60px rgba(0,0,0,.5),0 8px 20px rgba(0,0,0,.34)}

/* accessible pause/play puck, injected by sol.js: neutral glass */
.hero-vidctl{
  position:absolute;right:clamp(14px,3vw,28px);bottom:clamp(14px,3vh,26px);z-index:4;
  width:40px;height:40px;border-radius:var(--r-pill);display:grid;place-items:center;cursor:pointer;
  pointer-events:auto;color:#fff;background:rgba(10,10,11,.44);
  border:1px solid rgba(255,255,255,.30);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:transform var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease);
}
.hero-vidctl:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.6);background:rgba(10,10,11,.58)}
.hero-vidctl .ic-svg{width:18px;height:18px}

@media(max-width:880px){
  .hero-grid{grid-template-columns:1fr;gap:38px}
  .hero-cine{padding:clamp(104px,20vh,150px) 0 64px}
  .hero-cine .hero-scrim{
    background:
      linear-gradient(180deg, rgba(10,10,11,.80) 0%, rgba(10,10,11,.52) 46%, rgba(10,10,11,.30) 100%),
      linear-gradient(0deg, var(--bg) 0%, transparent 16%);
  }
}

/* ============================================================
   .sv-band  SCROLL VIDEO BAND (After-Hours team moment). The video
   plays on-screen-only via sol-motion.js; copy rides a neutral scrim.
   Children: video[data-scrollvideo] / .sv-scrim / .sv-copy
   ============================================================ */
.sv-band{position:relative;overflow:hidden;padding:0;background:var(--dark)}
.sv-band video{display:block;width:100%;aspect-ratio:16/9;max-height:72vh;object-fit:cover}
.sv-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg, rgba(10,10,11,.74) 0%, rgba(10,10,11,.24) 46%, rgba(10,10,11,.08) 100%);
}
.sv-copy{position:absolute;left:0;right:0;bottom:0;z-index:2;padding-bottom:clamp(24px,5vh,56px);color:#fff}
.sv-copy .eyebrow{color:rgba(255,255,255,.66)}
.sv-copy h2,.sv-copy h3{color:#fff}
.sv-copy .lead{color:rgba(255,255,255,.85);max-width:52ch}

/* ============================================================
   .stats  BORDERLESS COUNT-UP STRIP. Values pair with [data-countup]
   (sol-motion.js). No tiles, no borders: numbers carry it.
   Children: .stat > .v + .l
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);text-align:center}
.stats .v{
  font-family:"Sora","Inter",system-ui,sans-serif;
  font-size:var(--t-h2);font-weight:700;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;color:var(--ink);
}
.stats .l{margin-top:10px;font-size:var(--t-small);color:var(--mut);font-weight:600;line-height:1.4}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr);gap:var(--s-4) var(--gap)}}

/* ============================================================
   .console  THE ONE TRANSCRIPT FAMILY (live-call console, hear panel,
   night console, campaign console). Neutral shell; agent bubbles are
   --bg-2 fills with a 2px --line left border; the foot tick is --good.
   The hear panel is a .console with .heartabs + .playbar inside
   [data-hear]. All sol.js hooks byte-identical.
   ============================================================ */
.console{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-3);
  box-shadow:var(--sh-2);
  overflow:hidden;
}
.console-head{
  display:flex;align-items:center;gap:12px;
  padding:15px 20px;border-bottom:1px solid var(--line);
  background:var(--panel-2);
}
.console-live{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-small);font-weight:700;color:var(--ink2);letter-spacing:.3px}
.livedot{position:relative;width:9px;height:9px;border-radius:50%;background:var(--good);box-shadow:0 0 0 0 rgba(63,143,91,.5);animation:pulse 1.9s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,143,91,.5)}70%{box-shadow:0 0 0 9px rgba(63,143,91,0)}100%{box-shadow:0 0 0 0 rgba(63,143,91,0)}}
/* idle dot for the hear panel: calm neutral, no pulse */
.hearidle{width:9px;height:9px;border-radius:50%;background:var(--mut);opacity:.55}
.console-lang{font-size:var(--t-small);color:var(--mut);font-weight:600;margin-right:auto}
/* header waveform: neutral at rest; accent + motion ONLY while playing
   (this is part of the audio accent allowance). */
.wave{display:inline-flex;align-items:center;gap:2.5px;height:20px}
.wave i{width:2.5px;height:22%;border-radius:2px;background:var(--line);display:block;transform-origin:center}
[data-hear].playing .wave i{background:var(--accent);animation:wavebar 1.1s ease-in-out infinite}
.wave i:nth-child(2){animation-delay:.12s}
.wave i:nth-child(3){animation-delay:.24s}
.wave i:nth-child(4){animation-delay:.36s}
.wave i:nth-child(5){animation-delay:.48s}
.wave i:nth-child(6){animation-delay:.6s}
.wave i:nth-child(7){animation-delay:.72s}
@keyframes wavebar{0%,100%{height:22%}50%{height:100%}}

.console-body{padding:18px 20px 12px;display:flex;flex-direction:column;gap:11px}
.cbubble{max-width:88%;padding:10px 13px;border-radius:var(--r-1);font-size:var(--t-small);line-height:1.45}
/* agent turn: neutral surface, hairline, 2px neutral left rule */
.cbubble.ai{background:var(--bg-2);color:var(--ink2);border:1px solid var(--line);border-left:2px solid var(--line);border-bottom-left-radius:5px;align-self:flex-start}
.band-alt .cbubble.ai{background:var(--panel-2)}
.cbubble.ai::before{content:"Sollingual";display:block;font-size:var(--t-micro);font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--mut);margin-bottom:3px}
.cbubble.caller{background:var(--panel-2);color:var(--ink2);align-self:flex-end;border:1px solid var(--line);border-bottom-right-radius:5px}
/* typing indicator on the last agent bubble */
.cbubble.typing{align-self:flex-start;display:inline-flex;gap:5px;align-items:center;padding:13px 15px}
.cbubble.typing::before{display:none}
.cbubble.typing span{width:6px;height:6px;border-radius:50%;background:var(--mut);opacity:.55;animation:typedot 1.4s ease-in-out infinite}
.cbubble.typing span:nth-child(2){animation-delay:.2s}
.cbubble.typing span:nth-child(3){animation-delay:.4s}
@keyframes typedot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
/* the final bubble fades in after the typing beat. Hidden only when JS
   runs (.js-reveal) AND sol.js has armed .animate: no-JS visitors always
   see the complete transcript. (Ported contract; keyframes verbatim.) */
.js-reveal .console.animate .cbubble.reveal-late{opacity:0}
.console.animate .cbubble.reveal-late{animation:bubblein .5s ease forwards;animation-delay:2.1s}
.console.animate .cbubble.typing{animation:typingout .3s ease forwards;animation-delay:2.05s}
@keyframes bubblein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes typingout{to{opacity:0;height:0;padding-top:0;padding-bottom:0;margin:0;overflow:hidden}}

.console-foot{
  margin-top:6px;padding:13px 20px;border-top:1px solid var(--line);
  font-size:var(--t-small);color:var(--ink2);font-weight:600;display:flex;align-items:center;gap:9px;
  background:var(--panel-2);
}
/* the booked tick: the one status fill, green */
.tick{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--good);color:#fff;flex:none}
.tick .ic-svg{width:12px;height:12px;stroke-width:3;color:#fff}

/* ---- campaign console rows (.crow): the console's row variant for the
   outreach campaign console and the home deck. Table rows, not chat
   bubbles; .crow-status--booked is the one green text state. ---- */
.crow{display:flex;align-items:center;gap:10px;font-size:var(--t-small);line-height:1.45}
.crow-name{flex:none;font-weight:700;color:var(--ink)}
.crow-sub{flex:1;min-width:0;color:var(--mut)}
.crow-lang{flex:none;font-size:var(--t-micro);font-weight:700;letter-spacing:.08em;color:var(--mut);border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 8px}
.crow-status{flex:none;display:inline-flex;align-items:center;gap:5px;font-weight:700;color:var(--mut)}
.crow-status .ic-svg{width:14px;height:14px}
.crow-status--booked{color:var(--good-text)}

/* ---- hear panel additions inside [data-hear]: tabs + play bar + the
   scrolling transcript region (sol.js swaps its content per tab). ---- */
[data-hear] .heartabs{margin:18px 20px 14px}
[data-hear] .playbar{margin:0 20px}
[data-hear] .hearfallback{margin:14px 20px 0}
.heartabs{display:flex;gap:8px;flex-wrap:wrap}
.heartab{border:1px solid var(--line);background:var(--panel);color:var(--ink2);border-radius:var(--r-pill);padding:9px 16px;font-size:var(--t-small);font-weight:700;cursor:pointer;font-family:inherit;transition:border-color .16s var(--ease),background .16s var(--ease),color .16s var(--ease)}
.heartab:hover{border-color:var(--mut)}
/* selected tab: ink segmented-control fill, never amber */
.heartab[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:transparent}
.playbar{display:flex;align-items:center;gap:14px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-1);padding:15px 17px}
/* play button: ink disc (the amber fill budget excludes it) */
.playbtn{flex:none;width:50px;height:50px;border-radius:50%;border:0;cursor:pointer;color:var(--bg);background:var(--ink);display:flex;align-items:center;justify-content:center;transition:transform .16s var(--ease)}
.playbtn:hover{transform:scale(1.05)}
.playbtn .ic-svg{width:20px;height:20px;stroke-width:2}
.playmeta{flex:1;min-width:0}
.playmeta .plabel{font-size:var(--t-ui);font-weight:700;color:var(--ink)}
.seekrow{display:flex;align-items:center;gap:10px;margin-top:8px}
/* the seek track: sol.js paints the elapsed side inline with
   linear-gradient(90deg, var(--sun1) .. var(--line) ..) - accent allowed. */
.seek{flex:1;appearance:none;-webkit-appearance:none;height:5px;border-radius:var(--r-pill);background:var(--line);cursor:pointer}
.seek::-moz-range-progress{background:var(--accent);height:5px;border-radius:var(--r-pill)}
.seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--panel)}
.seek::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--panel)}
.ptime{font-size:var(--t-small);color:var(--mut);font-variant-numeric:tabular-nums;flex:none;min-width:74px;text-align:right}
/* equalizer: invisible at rest; accent + motion only while playing */
.eq{display:inline-flex;align-items:flex-end;gap:3px;height:22px;flex:none;opacity:0;transition:opacity .2s ease}
.eq span{width:4px;background:var(--accent);border-radius:2px;height:30%}
.eq.on{opacity:1}
.eq.on span{animation:eqbar .9s ease-in-out infinite}
.eq.on span:nth-child(2){animation-delay:.15s}
.eq.on span:nth-child(3){animation-delay:.3s}
.eq.on span:nth-child(4){animation-delay:.45s}
@keyframes eqbar{0%,100%{height:25%}50%{height:100%}}
/* the transcript region: capped, soft bottom fade instead of a scrollbar */
.hearscript{border-top:1px solid var(--line);margin-top:16px}
.hearscript .console-body{padding:16px 20px 6px;max-height:262px;overflow-y:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}
.hearscript .console-body::-webkit-scrollbar{width:0;height:0}
/* graceful audio fallback row (sol.js toggles display) */
.hearfallback{display:flex;align-items:center;gap:12px;background:var(--panel-2);border:1px dashed var(--line);border-radius:var(--r-1);padding:16px;font-size:var(--t-ui);color:var(--ink2)}
.hearfallback .ic-svg{color:var(--mut);width:22px;height:22px}
.hearfallback a{font-weight:700;color:var(--ink)}

/* ============================================================
   .form  DEMO FORM (same field names/ids as legacy). Neutral fields,
   accent only on focus ring. The consent block carries the 10DLC SMS
   wording; it must never be visually hidden or truncated.
   ============================================================ */
.form{display:grid;gap:14px}
.form .grid{gap:14px}
.fld{width:100%;border:1px solid var(--line);border-radius:var(--r-1);padding:12px 14px;font-size:var(--t-ui);font-family:inherit;color:var(--ink);background:var(--panel);transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
select.fld{appearance:none;background:var(--panel)}
.consent{display:flex;gap:9px;align-items:flex-start;margin-top:2px}
.consent input{margin-top:3px;flex:none;width:17px;height:17px;accent-color:var(--ink)}
.consent label{font-size:12px;color:var(--mut);line-height:1.5;letter-spacing:0}
.cf-turnstile{margin:2px 0}
#demoMsg{font-size:var(--t-ui);font-weight:600;min-height:1.4em}

/* ============================================================
   .roi  OUTREACH ROI CALCULATOR (reskin only: ids roiLeads..roiMath
   and the inline solRoi() script stay verbatim). Neutral console-
   grade shell replacing the legacy espresso-gradient head. Sliders
   are INK: the amber budget (btn-primary + audio seek/eq) does not
   include them; they keep the accent focus ring like every control.
   ============================================================ */
.roi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-3);box-shadow:var(--sh-2);overflow:hidden}
.roi-head{padding:20px 24px;border-bottom:1px solid var(--line);background:var(--panel-2)}
.roi-head h3{color:var(--ink)}
.roi-head p{font-size:var(--t-small);color:var(--mut);margin-top:4px;line-height:1.5}
.roi-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.roi-inputs{padding:24px;border-right:1px solid var(--line)}
.roi-field{margin-bottom:20px}
.roi-field:last-child{margin-bottom:0}
.roi-field label{display:block;font-size:var(--t-small);font-weight:700;color:var(--ink2);margin-bottom:9px}
.roi-field label b{color:var(--ink);font-variant-numeric:tabular-nums}
.roi-field .hint{font-size:12px;color:var(--mut);font-weight:500;margin-top:7px;line-height:1.45}
.roi-out{padding:24px;background:var(--panel-2);display:flex;flex-direction:column;gap:14px}
.roi-big{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-1);padding:18px 20px;box-shadow:var(--sh-1)}
.roi-big .k{font-size:var(--t-micro);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
.roi-big .v{
  font-family:"Sora","Inter",system-ui,sans-serif;
  font-size:var(--t-h2);font-weight:700;letter-spacing:-.02em;
  color:var(--ink);line-height:1.05;margin-top:6px;font-variant-numeric:tabular-nums;
}
.roi-line{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:var(--t-ui);color:var(--ink2)}
.roi-line b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.roi-math{font-size:var(--t-small);color:var(--mut);line-height:1.55;border-top:1px solid var(--line);padding-top:12px}
.roi-math b{color:var(--ink2)}
.roi-note{font-size:var(--t-small);color:var(--mut);padding:16px 24px 20px;line-height:1.55;border-top:1px solid var(--line)}
.roi input[type=range]{width:100%;accent-color:var(--ink);height:6px;cursor:pointer}
.roi input[type=range]:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-pill)}
@media(max-width:720px){
  .roi-grid{grid-template-columns:1fr}
  .roi-inputs{border-right:0;border-bottom:1px solid var(--line)}
}

/* ============================================================
   .sitefoot  FOOTER on the shared --dark ground. Flat, no gradient,
   no glow; hairline rules; neutral link stack (re-tokened above).
   ============================================================ */
.sitefoot{background:var(--dark);padding:60px 0 0;border-top:1px solid rgba(255,255,255,.08)}
.sitefoot .fcols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:34px}
.sitefoot .fbrand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:var(--t-brand);color:#fff;letter-spacing:-.5px}
.sitefoot .fbrand b{color:#fff}
.sitefoot .fone{margin-top:12px;font-size:var(--t-ui);line-height:1.6;color:var(--mut);max-width:280px}
.sitefoot .fmeta{margin-top:14px;font-size:var(--t-small);color:var(--mut);line-height:1.7}
.sitefoot h4{font-size:var(--t-small);text-transform:uppercase;letter-spacing:1px;color:var(--mut);font-weight:700;margin-bottom:14px}
.sitefoot ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.sitefoot ul a,.sitefoot ul span{font-size:var(--t-ui);color:var(--ink2);transition:color .15s ease}
.sitefoot ul a:hover{color:#fff}
.sitefoot ul .fprice{color:var(--mut);font-weight:700;font-size:var(--t-small);font-variant-numeric:tabular-nums}
.sitefoot .fbook{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:#fff}
.sitefoot .fbook:hover{text-decoration:underline;text-underline-offset:3px}
.sitefoot .fbar{margin-top:46px;border-top:1px solid rgba(255,255,255,.10);padding:20px 0 26px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:var(--t-small);color:var(--mut)}
.sitefoot .fbar a{color:var(--ink2);font-weight:600}
.sitefoot .fbar a:hover{color:#fff}
.sitefoot .fbar .sp{margin-left:auto}
@media(max-width:860px){.sitefoot .fcols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.sitefoot .fcols{grid-template-columns:1fr}}

/* ============================================================
   CHAT WIDGET (sol.js contract: #solPanel #solBody #solMsg #solGate,
   .solmsg.bot/.me injected). Bubble goes ink; amber leaves the corner.
   .solrow is the input-row alias used by rebuilt pages; .solinput is
   the legacy name on pages not yet rebuilt. Same rule, both names.
   ============================================================ */
.solchat{position:fixed;right:20px;bottom:20px;z-index:60}
.solbubble{width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;color:var(--bg);background:var(--ink);box-shadow:var(--sh-2);display:flex;align-items:center;justify-content:center;transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.solbubble:hover{transform:translateY(-2px) scale(1.03)}
.solbubble .ic-svg{width:26px;height:26px;stroke-width:2}
.solpanel{position:absolute;right:0;bottom:74px;width:344px;max-width:calc(100vw - 40px);height:486px;max-height:calc(100vh - 120px);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-2);box-shadow:var(--sh-2);display:flex;flex-direction:column;overflow:hidden}
.solpanel[hidden]{display:none!important}
.solhead{display:flex;align-items:center;gap:8px;padding:13px 14px;border-bottom:1px solid var(--line);font-size:var(--t-btn);font-weight:650}
.solx{margin-left:auto;background:0;border:0;line-height:1;cursor:pointer;color:var(--mut);display:flex;align-items:center}
.solx .ic-svg{width:20px;height:20px}
.solbody{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:9px;background:var(--bg-2)}
.solmsg{max-width:84%;padding:9px 12px;border-radius:var(--r-1);font-size:var(--t-ui);line-height:1.45;white-space:pre-wrap}
.solmsg.bot{background:var(--panel);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:5px}
.solmsg.me{background:var(--ink);color:var(--bg);align-self:flex-end;border-bottom-right-radius:5px}
.solgate{padding:10px 12px;border-top:1px solid var(--line);background:var(--panel);display:flex;justify-content:center}
.solgate:empty{display:none;padding:0;border:0}
.solrow,.solinput{display:flex;gap:8px;padding:11px;border-top:1px solid var(--line);background:var(--panel)}
.solrow input,.solinput input{flex:1;border:1px solid var(--line);border-radius:var(--r-1);padding:10px 12px;font-size:var(--t-ui);font-family:inherit;color:var(--ink);background:var(--panel)}
.solrow input:focus,.solinput input:focus{outline:0;border-color:var(--accent);box-shadow:var(--ring)}
.solrow .btn-primary,.solinput .btn-primary{padding:9px 13px}
.solrow .btn-primary .ic-svg,.solinput .btn-primary .ic-svg{width:18px;height:18px}

/* ============================================================
   .featrow  THE image-beside-copy row. Neutral rounded frame, hairline
   border, resting shadow. .featrow--reverse flips media to the right.
   Children: .featrow-media > img / .featrow-copy
   ============================================================ */
.featrow{display:grid;grid-template-columns:1.02fr 1.05fr;gap:clamp(28px,4vw,56px);align-items:stretch}
.featrow>*{min-width:0}
.featrow-media{
  position:relative;margin:0;border-radius:var(--r-3);overflow:hidden;
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--sh-1);
  width:100%;height:100%;min-height:280px;
}
.featrow-media img{display:block;width:100%;height:100%;object-fit:cover}
.featrow-copy{align-self:center}
.featrow-copy .eyebrow{margin-bottom:14px}
.featrow-copy .lead{margin:14px 0 0;max-width:52ch}
.featrow-copy .list{margin-top:22px}
.featrow-copy .cta-row{margin-top:28px}
.featrow--reverse .featrow-media{order:2}
.featrow--reverse .featrow-copy{order:1}
@media(max-width:820px){
  .featrow{grid-template-columns:1fr;gap:28px}
  .featrow-media{height:auto;min-height:0;aspect-ratio:16/10}
  .featrow--reverse .featrow-media{order:0}
  .featrow--reverse .featrow-copy{order:0}
}

/* ============================================================
   GRID HELPERS
   ============================================================ */
.grid{display:grid;gap:var(--gap)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.g2,.g3{grid-template-columns:1fr}}

/* ============================================================
   REDUCED MOTION: the full neutralizer. Content is always visible and
   static; only the user-driven controls keep working.
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{scroll-behavior:auto}
  .js-reveal .reveal{opacity:1;transform:none;transition:none;transition-delay:0s!important;will-change:auto}
  .sm-armed .sm-child{opacity:1;transform:none;transition:none;transition-delay:0s!important}
  /* headline line reveal: engine skips the split under reduced motion, so
     the heading is authored text; belt-and-suspenders in case a class
     lingers, force every line flat and visible. */
  .sm-line-i{transform:none!important;transition:none!important}
  .sm-lines,.sm-line{overflow:visible}
  /* media presence rise: photo and frame flat and fully opaque. */
  .js-reveal .featrow-media[data-rise],
  .featrow-media[data-rise]{opacity:1!important;transition:none}
  .js-reveal .featrow-media[data-rise] img,
  .featrow-media[data-rise] img{transform:none!important;transition:none}
  .livedot{animation:none}
  [data-hear].playing .wave i{animation:none;height:55%}
  .eq.on span{animation:none;height:60%}
  .cbubble.typing{display:none}
  .cbubble.reveal-late,
  .js-reveal .console.animate .cbubble.reveal-late{opacity:1;animation:none}
  .flyout,.mobilepanel{transition:none}
  .deck-card{position:static;transform:none!important;opacity:1!important}
  video[data-scrollvideo],.js-reveal video[data-scrollvideo]{opacity:1;transform:none;transition:none}
  /* the hero video still autoplays muted for everyone (the injected
     .hero-vidctl puck is the accessible stop); only the fade goes. */
  .hero-cine .hero-video-el,
  .js-reveal .hero-cine .hero-video-el{opacity:1;transition:none}
  a.card--link:hover,.featrow-media:hover,.btn-primary:hover,.btn-quiet:hover,
  .themebtn:hover,.solbubble:hover,.playbtn:hover,.hero-vidctl:hover{transform:none}
  .tlink:hover::after{transform:none}
  .mp-chev,.tlink::after{transition:none}
}

/* ============================================================
   PRINT: chrome and motion off, ink on paper.
   ============================================================ */
@media print{
  nav,.solchat,.hero-video,.hero-vidctl,.sv-band video,.hero-scrim{display:none!important}
  body{background:#fff;color:#000}
  .js-reveal .reveal,.sm-armed .sm-child{opacity:1!important;transform:none!important}
  .sm-line-i{transform:none!important}
  .sm-lines,.sm-line{overflow:visible}
  .featrow-media[data-rise]{opacity:1!important}
  .featrow-media[data-rise] img{transform:none!important}
  .band-dark,.sitefoot,.hero-cine{background:#fff;color:#000}
  .deck-card{position:static}
}