:root{
  --indigo:#5B4FE3; --accent:#46D7FF; --secondary:#C9C4FF;
  --ink:#15162B; --surface:#F6F7FB; --support:#2F2A76; --azure:#3B7AF7;
  --action:#FFB84D; --action-ink:#15162B; --white:#fff;
  --line:#E7E7F0; --line-2:#EEF1F5; --muted:#6B6B80; --faint:#8A95A1;
  --ok:#10B981;
  --disp:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --eye:'Space Grotesk',var(--disp); --ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px;
  --shadow-card:0 24px 60px rgba(21,22,43,.14);
  --shadow-soft:0 10px 30px rgba(21,22,43,.08);
  --maxw:1180px;
  --gut:clamp(22px,5.5vw,30px);
  --dark:linear-gradient(160deg,#20355A,#19253A 55%,#121A28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--ui);color:var(--ink);-webkit-font-smoothing:antialiased;
  background:radial-gradient(1100px 560px at 82% -6%,rgba(91,79,227,0.10),transparent 60%),var(--surface);
  overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--disp);margin:0;line-height:1.1;letter-spacing:-0.02em}
p{margin:0}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--indigo);outline-offset:2px;border-radius:6px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--eye);font-weight:600;text-transform:uppercase;
  letter-spacing:0.14em;font-size:12px;color:var(--indigo)}
.eyebrow .bar{width:22px;height:3px;border-radius:2px;background:var(--accent)}
.eyebrow.on-dark{color:var(--accent)}

/* Sections: horizontal gutter via .wrap, vertical rhythm via padding-block only */
.section{padding-block:clamp(64px,9vw,120px)}
.section.tight{padding-block:clamp(48px,6vw,80px)}
.section.alt{background:#fff}
.section-head{max-width:720px;margin:0 auto clamp(40px,5vw,60px);text-align:center}
.section-head h2{font-size:clamp(30px,4.4vw,50px);font-weight:800;margin:16px 0 0}
.section-head p{font-family:var(--ui);font-size:clamp(16px,2vw,19px);line-height:1.6;color:var(--muted);margin:18px auto 0;max-width:600px}
/* Buttons */
.btn-primary{font-family:var(--ui);font-weight:700;font-size:16px;background:var(--action);color:var(--action-ink);
  padding:15px 28px;border-radius:12px;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  box-shadow:0 8px 22px rgba(255,184,77,.35);transition:transform .15s ease,filter .15s ease}
.btn-primary:hover{transform:translateY(-1px);filter:brightness(.97)}
/* Leading icon on a button: optically a touch smaller than the cap height, so it sits
   with the text rather than shouting over it. */
.btn-ico{width:18px;height:18px;flex:none;margin-right:-1px}
/* Flat indigo, for a strong secondary action. Amber (--action) stays reserved for
   the booking CTA, one per view; this carries weight without becoming an eighth
   amber button on the page. Never fill it with the logo gradient (brand rule). */
.btn-indigo{font-family:var(--ui);font-weight:700;font-size:15px;background:var(--indigo);color:#fff;
  padding:14px 26px;border-radius:12px;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  box-shadow:0 10px 26px rgba(91,79,227,.28);transition:transform .15s ease,filter .15s ease}
.btn-indigo:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn-indigo .arw{transition:transform .15s ease;display:inline-block}
.btn-indigo:hover .arw{transform:translateX(3px)}
.btn-ghost{font-family:var(--ui);font-weight:600;font-size:15px;color:var(--ink);display:inline-flex;align-items:center;gap:8px;cursor:pointer;background:none;border:none}
.btn-ghost.on-dark{color:#fff}
.btn-ghost .arw{color:var(--indigo);transition:transform .15s ease;display:inline-block}
.btn-ghost.on-dark .arw{color:var(--accent)}
.btn-ghost:hover .arw{transform:translateX(3px)}
.cta-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}

.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:120;background:linear-gradient(90deg,var(--indigo),var(--azure) 52%,var(--accent))}

/* Nav */
.nav{position:sticky;top:0;z-index:100;transition:background .25s ease,box-shadow .25s ease}
.nav .nav-in{display:flex;align-items:center;justify-content:space-between;padding-block:18px;transition:padding .25s ease}
.nav.scrolled{background:rgba(246,247,251,.82);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);box-shadow:0 1px 0 var(--line)}
.nav.scrolled .nav-in{padding-block:11px}
.nav .logo img{height:40px;width:auto;display:block;transition:height .25s ease}
.nav.scrolled .logo img{height:36px}
.nav .links{display:flex;gap:28px;align-items:center}
.nav .links a{position:relative;font-family:var(--ui);font-weight:500;font-size:15px;color:var(--muted)}
.nav .links a:hover{color:var(--ink)}
.nav .links a.active{color:var(--indigo)}
.nav .links a.active::after{content:"";position:absolute;left:2px;right:2px;bottom:-7px;height:2px;border-radius:2px;background:var(--indigo)}
.navcta{font-family:var(--ui);font-weight:700;font-size:14px;background:var(--action);color:var(--action-ink);
  padding:10px 18px;border-radius:10px;border:none;cursor:pointer;box-shadow:0 4px 14px rgba(21,22,43,.10);transition:transform .15s ease,filter .15s ease}
.navcta:hover{transform:translateY(-1px);filter:brightness(.97)}
.navtoggle{display:none;width:34px;height:30px;border:none;background:none;cursor:pointer;flex-direction:column;justify-content:center;align-items:flex-end;gap:6px;padding:0}
.navtoggle span{display:block;height:2px;width:26px;background:var(--ink);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.navtoggle span:nth-child(2){width:20px}
.mobilemenu{position:fixed;inset:0;z-index:150;background:var(--surface);padding:0 var(--gut) calc(26px + env(safe-area-inset-bottom));display:flex;flex-direction:column;overflow-y:auto;isolation:isolate;transform:translateX(100%);transition:transform .34s cubic-bezier(.4,0,.2,1);visibility:hidden}
/* a quiet indigo-to-cyan glow under the docked action ties the sheet to the brand */
.mobilemenu::after{content:"";position:fixed;left:-30%;right:-30%;bottom:-28%;height:62%;z-index:-1;pointer-events:none;
  background:radial-gradient(45% 50% at 32% 55%,rgba(91,79,227,.20),transparent 70%),radial-gradient(40% 45% at 72% 48%,rgba(70,215,255,.18),transparent 70%)}
.mobilemenu.open{transform:none;visibility:visible}
.mm-top{display:flex;align-items:center;justify-content:space-between;padding-block:18px}
.mm-top .logo img{height:38px;width:auto;display:block}
.mm-close{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink);box-shadow:var(--shadow-soft)}
.mm-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.mm-links{display:flex;flex-direction:column;margin-top:clamp(18px,4vh,40px)}
.mm-links a{display:flex;align-items:baseline;font-family:var(--disp);font-weight:700;font-size:clamp(22px,6.2vw,26px);letter-spacing:-.015em;color:var(--ink);padding:15px 0;border-bottom:1px solid var(--line)}
.mm-links a:first-child{border-top:1px solid var(--line)}
.mm-links a:active,.mm-links a.active{color:var(--indigo)}
.mm-foot{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;align-items:stretch;gap:12px}
.mm-book{width:100%;justify-content:center}
.mm-note{margin:0;text-align:center;font-family:var(--ui);font-size:13px;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){
  .mm-links a,.mm-foot{opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
  .mobilemenu.open .mm-links a,.mobilemenu.open .mm-foot{opacity:1;transform:none}
  .mobilemenu.open .mm-links a:nth-child(1){transition-delay:.08s}.mobilemenu.open .mm-links a:nth-child(2){transition-delay:.12s}
  .mobilemenu.open .mm-links a:nth-child(3){transition-delay:.16s}.mobilemenu.open .mm-links a:nth-child(4){transition-delay:.2s}
  .mobilemenu.open .mm-links a:nth-child(5){transition-delay:.24s}.mobilemenu.open .mm-links a:nth-child(6){transition-delay:.28s}
  .mobilemenu.open .mm-foot{transition-delay:.34s}
}

/* ===== HERO ===== */
.hero-grid{display:grid;grid-template-columns:1fr auto;gap:clamp(32px,3.6vw,48px);align-items:center;padding-block:clamp(38px,5vw,64px) clamp(52px,7vw,90px)}
.hero h1{font-size:clamp(34px,5vw,56px);font-weight:800;margin:20px 0 0}
.hero h1 .hl{background:linear-gradient(120deg,#5B8EF5,#5B4FE3 52%,#2F2A76);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{font-family:var(--ui);font-size:clamp(16px,2vw,18px);line-height:1.6;color:var(--muted);max-width:500px;margin:22px 0 0}
.hero .cta-row{margin-top:32px}
.trust{font-family:var(--ui);font-size:14px;color:var(--muted);margin-top:24px;display:flex;align-items:center;gap:9px}
.trust .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
/* Availability (scarcity) pill, reused on light (hero) and dark (final) */
.avail-pill{display:inline-flex;align-items:center;gap:9px;width:fit-content;font-family:var(--eye);font-weight:600;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--indigo);background:rgba(91,79,227,.07);border:1px solid rgba(91,79,227,.2);border-radius:999px;padding:7px 14px;margin:0}
.avail-pill .pulse{width:8px;height:8px;border-radius:50%;background:var(--indigo);flex:none;position:relative}
.avail-pill .pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--indigo);animation:availpulse 2.2s ease-out infinite}
.avail-pill.on-dark{color:#fff;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.avail-pill.on-dark .pulse,.avail-pill.on-dark .pulse::after{background:var(--accent)}
.hero .avail-pill{margin-top:26px}
.final-badges{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:26px}
.final .avail-pill{margin:0}
/* Money-back badge: amber as an ACCENT (outline), never a fill, so it reads as a
   guarantee seal beside "Limited availability" without competing with the solid
   amber CTA button below (brand: one amber action per view). */
.mb-pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--eye);font-weight:600;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--action);background:rgba(255,184,77,.08);border:1px solid rgba(255,184,77,.34);border-radius:999px;padding:7px 14px}
.mb-pill svg{width:15px;height:15px;flex:none}
.final .avail-detail{font-family:var(--ui);font-size:15px;line-height:1.6;color:#9aa2bf;max-width:560px;margin:16px auto 0}
@keyframes availpulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.avail-pill .pulse::after{animation:none}}

/* (Old fanned "deliverables" hero preview removed; replaced by the rotating
   HERO VISUAL block near the end of this file.) */

/* ===== PROBLEM / WEDGE ===== */
.wedge{text-align:center;max-width:820px;margin:0 auto}
.wedge h2{font-size:clamp(28px,4vw,44px);font-weight:800;margin:18px auto 0;max-width:640px}
.wedge .wlead{font-family:var(--ui);font-size:clamp(16px,2vw,18px);line-height:1.6;color:var(--muted);max-width:560px;margin:18px auto 0}
/* Symptom chips: light "warning signal" pills (not process steps). */
.wedge .symptoms{display:flex;flex-wrap:wrap;gap:8px 10px;justify-content:center;max-width:600px;margin:24px auto 0}
.wedge .symptom{display:inline-flex;align-items:center;gap:7px;font-family:var(--ui);font-size:13px;font-weight:500;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 14px}
.wedge .symptom::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--secondary);flex:none}
.wedge .kicker{font-family:var(--disp);font-weight:800;font-size:clamp(20px,2.8vw,30px);line-height:1.25;max-width:620px;margin:clamp(44px,6vw,64px) auto 0;letter-spacing:-.02em}
.wedge .kicker .hl{color:var(--indigo)}

/* ===== WHAT YOU GET: shell + foundation ===== */
.stack{position:relative}
.shell{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.shell .lab{grid-column:1/-1;text-align:center;font-family:var(--eye);text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--indigo);font-weight:600;margin-bottom:2px}
.dtile{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 20px;box-shadow:var(--shadow-card);transition:transform .18s ease}
.dtile:hover{transform:translateY(-4px)}
.dtile .ic{width:38px;height:38px;border-radius:11px;background:#EEEBFD;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.dtile .ic svg{width:20px;height:20px;stroke:var(--indigo);fill:none;stroke-width:1.9}
.dtile h3{font-size:16px;font-weight:800;margin-bottom:6px}
.dtile p{font-family:var(--ui);font-size:13px;line-height:1.5;color:var(--muted)}
.foundation{margin-top:-38px;padding:76px clamp(24px,4vw,48px) clamp(32px,4vw,46px);border-radius:var(--r-xl);position:relative;overflow:hidden;background:var(--dark);color:#fff}
.foundation::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(600px 300px at 15% 0,rgba(91,79,227,.34),transparent 60%),radial-gradient(560px 300px at 92% 108%,rgba(70,215,255,.14),transparent 60%)}
.foundation .fhead{position:relative;text-align:center;margin-bottom:24px}
.foundation .fhead h3{font-size:clamp(20px,2.4vw,26px);font-weight:800;margin-top:10px}
.foundation .fhead p{font-family:var(--ui);font-size:14.5px;color:#C7CBDB;margin-top:10px;max-width:520px;margin-left:auto;margin-right:auto;line-height:1.55}
.fgrid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.fitem{position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:14px 15px}
.fitem.hi{background:rgba(70,215,255,.09);border-color:rgba(70,215,255,.24)}
.fitem .ftag{display:inline-block;font-family:var(--eye);text-transform:uppercase;letter-spacing:.05em;font-size:9px;font-weight:600;color:#bfe9ff;background:rgba(70,215,255,.12);border:1px solid rgba(70,215,255,.26);border-radius:999px;padding:2px 7px;margin-bottom:8px}
.fitem .t{font-family:var(--ui);font-weight:600;font-size:13.5px;color:#fff}
.fitem .s{font-family:var(--ui);font-size:11.5px;color:#9aa2bf;margin-top:4px;line-height:1.4}
.foundation .fnote{position:relative;text-align:center;font-family:var(--ui);font-size:12.5px;color:#9aa2bf;margin-top:16px}

/* ===== PROOF BAND (closing recap, sits flush against the footer) =====
   Position and skin were both rewritten 2026-08-14, after two rejected passes.
   The history matters, because both failures are easy to repeat:

   1. As a DARK band between #package and #how it collided with the dark
      Authority section and with the dark AI band inside Process.
   2. As an ELEVATED WHITE CARD right under the hero it fought the hero's own
      illustration, which is already a composition of shadowed cards
      (.hv-stack and its ghost sheets), and read as part of the hero.

   So: never a card, never a shadow, never a container. FULL BLEED with its own
   background value, structure from 1px rules only. And down here the job is not
   to divide two sections, it is to be the last recap before the visitor books,
   carrying the detail a scanner never read on the way down.

   The negative bottom margin cancels .foot's own margin-top so the band sits
   flush against the footer. Keep them in step if that value ever changes. */
.proofband{position:relative;background:#F1EFFA;border-top:1px solid #DEDAF3;color:var(--ink);
  padding-block:clamp(38px,4.8vw,58px);margin-bottom:calc(-1 * clamp(64px,9vw,120px))}
.pbq-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr)}
.pbq{padding:0 clamp(14px,1.9vw,26px)}
.pbq:first-child{padding-left:0}
.pbq:last-child{padding-right:0}
.pbq + .pbq{border-left:1px solid #DEDAF3}
.pbq-ic{display:block;width:26px;height:26px;color:var(--indigo);margin-bottom:14px}
.pbq-ic svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.7}
.pbq h3{font-family:var(--disp);font-size:16.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink);line-height:1.28}
.pbq ul{margin-top:13px;display:flex;flex-direction:column;gap:8px}
.pbq li{position:relative;padding-left:21px;font-family:var(--ui);font-size:13.5px;line-height:1.5;color:var(--muted)}
.pbq li::before{content:"";position:absolute;left:1px;top:5px;width:9px;height:4.5px;
  border-left:1.9px solid var(--indigo);border-bottom:1.9px solid var(--indigo);transform:rotate(-45deg)}
@media(max-width:900px){
  .pbq-grid{grid-template-columns:1fr 1fr}
  .pbq{padding:0 clamp(16px,3vw,24px)}
  .pbq:nth-child(odd){padding-left:0}
  .pbq:nth-child(even){padding-right:0}
  .pbq:nth-child(3),.pbq:nth-child(4){padding-top:26px;margin-top:26px;border-top:1px solid #DEDAF3}
  .pbq:nth-child(3){border-left:none}
}
/* Phone: the band stops being a list and becomes a CREDENTIAL BAR. The twelve
   sub-items were sixteen lines of small type; every one of them is said again
   elsewhere on the page, so the detail goes and the titles get the room. */
@media(max-width:620px){
  .proofband{padding-block:clamp(30px,7vw,40px)}
  .pbq-grid{grid-template-columns:1fr 1fr;column-gap:0}
  .pbq{padding:0 15px}
  .pbq ul{display:none}
  .pbq h3{font-size:16.5px;line-height:1.3}
  .pbq-ic{width:24px;height:24px;margin-bottom:11px}
  .pbq-ic svg{width:24px;height:24px}
  .pbq:nth-child(3),.pbq:nth-child(4){padding-top:22px;margin-top:22px}
}
@media(max-width:380px){.pbq h3{font-size:15.5px}}

/* ===== FOUNDER + track record (dark) ===== */
.founder-sec{position:relative;overflow:hidden;background:var(--dark);color:#fff;border-radius:var(--r-xl);max-width:var(--maxw);margin:0 auto}
.founder-sec::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(700px 340px at 12% -10%,rgba(91,79,227,.4),transparent 60%),radial-gradient(620px 340px at 92% 112%,rgba(70,215,255,.16),transparent 60%)}
.founder-in{position:relative;display:grid;grid-template-columns:.66fr 1.34fr;gap:40px;align-items:center;padding:clamp(32px,4.5vw,52px)}
.founder-photo{aspect-ratio:4/5;max-width:280px;border-radius:var(--r-lg);overflow:hidden;position:relative;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10)}
.founder-photo .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#8b93b5;text-align:center;padding:20px}
.founder-photo .ph svg{width:54px;height:54px;stroke:#6470a0;fill:none;stroke-width:1.4}
.founder-photo .ph span{font-family:var(--ui);font-size:12px}
.founder-in blockquote{font-family:var(--disp);font-weight:800;font-size:clamp(22px,2.9vw,32px);line-height:1.25;letter-spacing:-.02em;margin:14px 0 0}
.founder-in blockquote .hl{color:var(--accent)}
.founder-in .body{font-family:var(--ui);font-size:15.5px;line-height:1.7;color:#C7CBDB;margin-top:18px;max-width:560px}
.founder-in .body + .body{margin-top:14px}
.founder-sign{margin-top:24px;display:flex;flex-direction:column;gap:3px}
.founder-sign .tname{font-family:var(--disp);font-weight:800;font-size:17px;color:#fff}
.founder-sign .ftitle{font-family:var(--ui);font-size:13px;color:var(--accent)}

/* ===== COST ===== */
.cost{display:grid;gap:14px;max-width:820px;margin:0 auto}
.costrow{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:20px 24px;box-shadow:var(--shadow-soft)}
.costrow .top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.costrow .who{font-family:var(--disp);font-weight:700;font-size:17px}
.costrow .who small{display:block;font-family:var(--ui);font-weight:400;font-size:12.5px;color:var(--faint);margin-top:3px;letter-spacing:0}
.costrow .save{font-family:var(--disp);font-weight:800;font-size:22px;color:var(--indigo);white-space:nowrap;text-align:right}
.costrow .save span{font-size:12px;font-weight:600;color:var(--muted);display:block;margin-bottom:1px}
.costrow .bar{height:9px;border-radius:5px;background:#ECEBF6;margin-top:16px;overflow:hidden}
.costrow .bar i{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,var(--indigo),var(--azure) 60%,var(--accent));transition:width 1s cubic-bezier(.22,1,.36,1)}
/* Footnote for the savings basis. The marker lives in the section supporting text. */
.cost-basis{max-width:820px;margin:18px auto 0;font-family:var(--ui);font-size:12.5px;line-height:1.55;color:var(--faint);text-align:center;font-style:italic}
.cost-agency{max-width:820px;margin:24px auto 0;background:#EEEBFD;border:1px solid var(--secondary);border-radius:var(--r-lg);padding:24px 28px;text-align:center}
.cost-agency h3{font-size:20px;font-weight:800;margin-bottom:10px}
.cost-agency p{font-family:var(--ui);font-size:15px;line-height:1.6;color:#413a86}

/* ===== PLANS ===== */
.plans{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;align-items:stretch}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 20px;display:flex;flex-direction:column;box-shadow:var(--shadow-soft)}
/* Emphasis ring is drawn INSIDE (inset shadow), not a thicker border, so the
   recommended card keeps the exact same box model as the others. A 2px border
   here made the card 2px narrower, dropped its badge out of line and wrapped
   "16 packages / month". */
.plan.rec{border-color:var(--indigo);box-shadow:inset 0 0 0 2px var(--indigo),0 20px 50px rgba(91,79,227,.18)}
.plan .badge{font-family:var(--eye);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:9.5px;color:var(--support);background:var(--secondary);border-radius:999px;padding:4px 10px;align-self:flex-start;min-height:20px}
.plan.rec .badge{color:#fff;background:var(--indigo)}
.plan h3{font-size:20px;font-weight:800;margin:16px 0 4px}
.plan .vol{font-family:var(--ui);font-size:13px;color:var(--muted);white-space:nowrap}
.plan .save{font-family:var(--disp);font-weight:800;font-size:15px;color:var(--indigo);margin-top:14px;min-height:20px}
.plan .scope{font-family:var(--ui);font-size:13px;color:var(--muted);line-height:1.5;margin-top:12px;flex:1}
.plan .price{font-family:var(--eye);text-transform:uppercase;letter-spacing:.06em;font-size:10.5px;color:var(--faint);margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2)}
/* Plan deliverables matrix (single source: w3bc_plan_deliverables) */
.plan-matrix-head{max-width:720px;margin:46px auto 18px;text-align:center}
.plan-matrix-head h3{font-size:clamp(20px,2.6vw,26px);font-weight:800}
.plan-matrix-head p{font-family:var(--ui);font-size:14.5px;line-height:1.6;color:var(--muted);margin:12px auto 0;max-width:660px}
.plan-matrix-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow-soft)}
.plan-matrix{width:100%;min-width:760px;border-collapse:collapse;font-family:var(--ui)}
.plan-matrix th,.plan-matrix td{padding:12px 14px;text-align:center;border-bottom:1px solid var(--line-2);vertical-align:middle}
.plan-matrix thead th{font-family:var(--eye);font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line);white-space:nowrap}
.plan-matrix thead th.pm-rec{color:var(--indigo)}
.plan-matrix .pm-corner{text-align:left}
.plan-matrix tbody th{text-align:left;font-weight:600;font-size:14px;color:var(--ink);min-width:240px}
.plan-matrix th[scope=row],.plan-matrix .pm-corner{position:sticky;left:0;background:#fff;z-index:1}
.plan-matrix .pm-vol{display:block;margin-top:4px;font-family:var(--ui);font-weight:500;font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--muted)}
.pv-vol{font-weight:600;font-size:14px;color:var(--ink);margin:2px 0 10px}
.plan-matrix .pm-sub{display:block;font-weight:400;font-size:12px;color:var(--faint);margin-top:2px}
.plan-matrix .pm-group td{text-align:left;font-family:var(--eye);text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:600;color:var(--indigo);background:var(--surface);padding-top:14px;padding-bottom:9px}
.plan-matrix .pm-rec{background:rgba(91,79,227,.045)}
.plan-matrix .pm-hl th,.plan-matrix .pm-hl td{background:rgba(70,215,255,.07)}
.plan-matrix .pm-hl th{box-shadow:inset 3px 0 0 var(--accent)}
.plan-matrix .pm-hl .pm-lbl{color:var(--indigo)}
.pm-yes{display:inline-flex;color:var(--indigo)}
.pm-yes svg{width:20px;height:20px}
.pm-add{display:inline-block;font-size:11.5px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 10px;white-space:nowrap}
.pm-no{display:inline-block;width:12px;height:2px;border-radius:2px;background:#D5D8E4}
.pm-txt{font-size:12.5px;color:var(--muted)}
.pm-note{font-family:var(--ui);font-size:12.5px;color:var(--faint);text-align:center;margin:14px auto 0;max-width:700px;line-height:1.55}
.addons{margin-top:48px}
.addons h3{text-align:center;font-size:20px;font-weight:800;margin-bottom:20px}
.addon-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:940px;margin:0 auto}
.addon-group{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--shadow-soft)}
.addon-group .ag-h{font-family:var(--eye);text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:600;color:var(--indigo);margin-bottom:8px}
.addon-group p{font-family:var(--ui);font-size:13.5px;line-height:1.55;color:var(--muted)}
.addon-note{max-width:720px;margin:20px auto 0;text-align:center;font-family:var(--ui);font-size:13.5px;line-height:1.6;color:var(--muted)}
.addon-note b{color:var(--ink);font-weight:700}
@media(max-width:720px){.addon-groups{grid-template-columns:1fr}}
/* Add-on cards: same icon geometry as .dtile .ic, so the page reads as one system.
   --ic-bg is what the knockout strokes inside the publishing/support icons paint
   with; it must match this tile background (see w3bc_deliverable_icon). */
.addon-group{display:flex;flex-direction:column}
.addon-group .ic{--ic-bg:#EEEBFD;width:38px;height:38px;border-radius:11px;background:#EEEBFD;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.addon-group .ic svg{width:20px;height:20px;stroke:var(--indigo);fill:none;stroke-width:1.8}
.addon-group .ag-h{font-family:var(--disp);text-transform:none;letter-spacing:-.01em;font-size:16px;font-weight:800;color:var(--ink);margin-bottom:7px}
/* Plan card CTA. nowrap is load-bearing: the recommended card's bolder label
   wrapped to two lines and broke the height rhythm across the five cards. */
.plan .plan-cta{width:100%;justify-content:center;margin-top:18px;font-size:14px;padding:12px 18px;white-space:nowrap;cursor:pointer;font-family:var(--ui);font-weight:600}
/* Recommended card: FILLED flat indigo, so it leads on the button too and not
   only on the ring. Amber stays reserved for the booking CTA (one per view) and
   the logo gradient is never a UI fill, so flat indigo is the one treatment
   that adds weight without breaking either rule. */
.plan.rec .plan-cta{background:var(--indigo);border-color:var(--indigo);color:#fff;font-weight:700;
  box-shadow:0 8px 20px rgba(91,79,227,.26)}
.plan.rec .plan-cta:hover{background:var(--indigo);border-color:var(--indigo);color:#fff;filter:brightness(1.06)}
.plan.rec .plan-cta .arw{color:#fff}

/* ===== FAQ ===== */
.faq-groups{max-width:800px;margin:0 auto}
.faq-cat{font-family:var(--eye);text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:600;color:var(--indigo);margin:30px 0 12px}
.faq-cat:first-child{margin-top:0}
.faq{max-width:800px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow-soft)}
.faq summary{list-style:none;cursor:pointer;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:var(--disp);font-weight:700;font-size:16.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{width:22px;height:22px;flex:none;position:relative;transition:transform .2s ease}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:var(--indigo);border-radius:2px}
.faq summary .pm::before{top:10px;left:3px;right:3px;height:2px}
.faq summary .pm::after{left:10px;top:3px;bottom:3px;width:2px;transition:opacity .2s ease}
.faq details[open] summary .pm::after{opacity:0}
.faq details[open] summary .pm{transform:rotate(180deg)}
.faq .a{padding:0 24px 22px;font-family:var(--ui);font-size:15px;line-height:1.65;color:var(--muted)}
/* FAQ category selector + two columns. Reuses the mechanics of the Plans mobile
   segmented selector rather than inventing a second tab component. The two
   columns are balanced SERVER-SIDE into two lists, not with CSS `columns`, which
   would split an open <details> across the column break. */
.faq-wide{max-width:1080px;margin:0 auto}
/* The fade colour is a VARIABLE, unlike .seghint which hardcodes var(--surface)
   because Plans is always a .section. The FAQ background is in play, so the
   fade has to follow the section or it paints a pale rectangle over the pills. */
/* The gap below the pills lives on the WRAPPER, not on .faq-seg. With it on the
   inner row it collapsed out of the wrapper, so the wrapper was shorter than the
   space it appeared to occupy and the absolutely positioned chevron centred
   itself ABOVE the pills instead of on them. */
.faq-segwrap{position:relative;margin-bottom:30px;--seg-fade:var(--surface)}
.section.alt .faq-segwrap{--seg-fade:#fff}
.faq-seghint{display:none}
.faq-seg{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.fseg-pill{font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 18px;cursor:pointer;white-space:nowrap;transition:color .15s ease,border-color .15s ease,background .15s ease}
.fseg-pill:hover{color:var(--ink);border-color:var(--secondary)}
.fseg-pill.on{background:var(--indigo);color:#fff;border-color:var(--indigo)}
.fseg-pill .n{opacity:.55;margin-left:7px;font-variant-numeric:tabular-nums}
.fseg-pill.on .n{opacity:.7}
.faq-panel{display:none}
.faq-panel.on{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;align-items:start}
.faq-panel .faq{max-width:none;margin:0}
@media(max-width:860px){
  .faq-panel.on{grid-template-columns:1fr;gap:0}
  .faq-seg{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
  .faq-seg::-webkit-scrollbar{display:none}
  .fseg-pill{flex:0 0 auto}
  .faq-seghint{display:flex;align-items:center;justify-content:flex-end;
    position:absolute;top:0;right:0;bottom:4px;width:46px;
    background:linear-gradient(90deg,transparent,var(--seg-fade) 58%);
    pointer-events:none;color:var(--indigo);transition:opacity .3s ease}
  .faq-seghint svg{width:18px;height:18px;animation:wtnudge 1.25s ease-in-out infinite}
  .faq-segwrap.seg-scrolled .faq-seghint,.faq-segwrap.seg-end .faq-seghint{opacity:0}
}

/* ===== FINAL ===== */
.final{position:relative;overflow:hidden;background:var(--dark);color:#fff;border-radius:var(--r-xl);max-width:var(--maxw);margin:0 auto;text-align:center}
.final::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(700px 340px at 20% -10%,rgba(91,79,227,.4),transparent 60%),radial-gradient(620px 340px at 88% 110%,rgba(70,215,255,.2),transparent 60%)}
.final .final-in{position:relative;padding:clamp(48px,7vw,88px) clamp(24px,5vw,48px)}
.final h2{font-size:clamp(30px,4.5vw,50px);font-weight:800;max-width:760px;margin:16px auto 0}
.final p{font-family:var(--ui);font-size:clamp(16px,2vw,18px);line-height:1.6;color:#C7CBDB;max-width:560px;margin:20px auto 0}
.final .cta-row{justify-content:center;margin-top:32px}
.final .fallback{font-family:var(--ui);font-size:14px;color:#9aa2bf;margin-top:22px}
.final .fallback a{color:#fff;border-bottom:1px solid rgba(255,255,255,.35)}

/* ===== FOOTER ===== */
.foot{background:var(--ink);color:#B9BED1;padding:56px 0 40px;margin-top:clamp(64px,9vw,120px)}
.foot .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;align-items:start}
.foot .logo{display:inline-block}
.foot .logo img{height:34px;width:auto;margin-bottom:18px}
.foot-fine{margin-top:38px;display:flex;flex-direction:column;gap:8px}
.foot-fine p{font-family:var(--ui);font-size:11.5px;line-height:1.5;color:#5b6486;max-width:none;margin:0}
.foot .pos{font-family:var(--ui);font-size:14px;line-height:1.6;color:#8991ad;max-width:320px}
.foot h5{font-family:var(--eye);text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:#6f7799;margin:0 0 14px;font-weight:600}
.foot ul li{margin-bottom:10px}
.foot ul li a{font-family:var(--ui);font-size:14px;color:#B9BED1}
.foot ul li a:hover{color:#fff}
.foot .legal{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--ui);font-size:12.5px;color:#6f7799}
.foot .legal a{color:#8991ad;border-bottom:1px solid rgba(255,255,255,.18)}
.foot .legal a:hover{color:#fff}
.foot-social{display:flex;align-items:center;gap:10px;margin-top:16px}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;color:#8991ad;border:1px solid rgba(255,255,255,.12);transition:color .15s,border-color .15s}
.foot-social a:hover{color:#fff;border-color:rgba(255,255,255,.28)}
.foot-social svg{width:18px;height:18px;display:block}

/* Floating CTA */
.float{position:fixed;right:18px;bottom:18px;z-index:110;opacity:0;transform:translateY(16px) scale(.96);pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.float.show{opacity:1;transform:none;pointer-events:auto}
.float a{font-family:var(--ui);font-weight:700;font-size:15px;background:var(--action);color:var(--action-ink);padding:14px 22px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;box-shadow:0 10px 28px rgba(255,184,77,.45)}
/* Back-to-top: shows on scroll-up past a threshold, hides on scroll-down / near top.
   Sits above the Book-a-pilot float in the bottom-right corner. */
.scrolltop{position:fixed;right:18px;bottom:82px;z-index:112;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 28px rgba(21,22,43,.18);opacity:0;transform:translateY(10px) scale(.92);pointer-events:none;transition:opacity .28s ease,transform .28s ease}
.scrolltop.show{opacity:1;transform:none;pointer-events:auto}
.scrolltop:hover{color:var(--indigo);border-color:var(--indigo)}
.scrolltop svg{width:20px;height:20px}

/* Problem slips */
.slips{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;max-width:760px;margin:clamp(30px,4vw,42px) auto 0}
.slip{flex:1;min-width:200px;display:flex;flex-direction:column;align-items:center;gap:14px;padding:30px 22px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-soft)}
.slip .si{width:44px;height:44px;border-radius:12px;background:#EEEBFD;display:flex;align-items:center;justify-content:center;flex:none}
.slip .si svg{width:22px;height:22px;stroke:var(--indigo);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.slip .scopy{display:flex;flex-direction:column;align-items:center;gap:5px}
.slip .st{font-family:var(--disp);font-weight:800;font-size:17px;color:var(--ink);text-align:center;letter-spacing:-.01em}
.slip .sd{font-family:var(--ui);font-size:13.5px;line-height:1.5;color:var(--muted);text-align:center;max-width:210px}

/* Team members */
.founder-photo .fimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.team-block{position:relative;margin:0 clamp(28px,4vw,52px);padding:30px 0 clamp(30px,4vw,46px);border-top:1px solid rgba(255,255,255,.10)}
.team-lab{font-family:var(--eye);text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:#9aa2bf;font-weight:600;margin-bottom:22px}
.team-members{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(30px,4vw,48px);row-gap:20px}
.tmember{display:flex;gap:18px;align-items:flex-start}
.tphoto{width:112px;height:140px;border-radius:16px;overflow:hidden;flex:none;position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)}
.tphoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(.9)}
.tphoto .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.tphoto .ph svg{width:30px;height:30px;stroke:#6470a0;fill:none;stroke-width:1.4}
.tinfo{min-width:0}
.tname{font-family:var(--disp);font-weight:800;font-size:16px;color:#fff}
.ttitle{font-family:var(--eye);text-transform:uppercase;letter-spacing:.05em;font-size:10px;color:var(--accent);font-weight:600;margin:4px 0 9px}
.tdesc{font-family:var(--ui);font-size:14px;color:#aab2cf;line-height:1.55}
.tcred{font-family:var(--ui);font-size:12.5px;color:#8791b3;line-height:1.5;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}
/* Scale line above the specialists. The number and the sentence share a baseline,
   because centering the text against a 74px numeral leaves it floating. */
.team-scale{display:flex;align-items:flex-end;gap:clamp(18px,2.6vw,28px);flex-wrap:wrap;padding-bottom:26px;margin-bottom:30px;border-bottom:1px solid rgba(255,255,255,.10)}
.team-scale .tsn{font-family:var(--disp);font-weight:800;font-size:clamp(46px,6.4vw,74px);line-height:.86;letter-spacing:-.03em;color:#fff;flex:none}
.team-scale .tsn i{font-style:normal;color:var(--accent)}
.team-scale .tst{font-family:var(--ui);font-size:15.5px;line-height:1.55;color:#C7CBDB;max-width:430px;padding-bottom:3px}
/* Three columns: the portrait stays SQUARE and modest. Full-column width turned a
   portrait source into a 16:9 landscape crop, which deforms a face, and a large
   image made one column dominate the row. */
.team-members.is-three{grid-template-columns:repeat(3,1fr);column-gap:clamp(22px,2.8vw,34px);align-items:stretch}
/* The two named people live in their own wrapper spanning two of the three
   tracks, and it sizes to its OWN content (align-self:start). That is what lets
   their credential lines align with each other: stretching them against the row
   would align them against the specialist panel, which is taller, and drag each
   credential a hundred pixels away from the bio it belongs to.
   subgrid keeps the two inner columns on the parent's exact tracks; the 1fr 1fr
   fallback is a few pixels off and invisible. */
.team-people{grid-column:span 2;align-self:start;display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(22px,2.8vw,34px);align-items:stretch}
@supports (grid-template-columns:subgrid){
  .team-people{grid-template-columns:subgrid}
}
.team-members.is-three .tmember{flex-direction:column;gap:0}
.team-members.is-three .tphoto{width:128px;height:128px;border-radius:18px;margin-bottom:18px}
.team-members.is-three .tphoto img{object-position:center 20%}
.team-members.is-three .tinfo{display:flex;flex-direction:column;flex:1}
/* Anchored to the bottom again, but now the bottom of .team-people, which is
   only as tall as the taller of the two people. So the two credentials line up
   with each other and neither is dragged away from its bio. */
.team-members.is-three .tcred{margin-top:auto;padding-top:18px}
/* The breathing room above the rule has to live on the BIO, not on .tcred: a
   margin-top there would fight the auto that does the aligning, and the padding
   sits below the border, so in the taller column the rule ended up hard against
   the last line of text. On the bio it is a fixed gap the auto margin simply
   accounts for, and both rules stay level. */
.team-members.is-three .tdesc{margin-bottom:10px}
/* Capability column: deliberately NOT a person card (no photo slot, no invented
   name) and deliberately QUIETER than the two real people, so the hierarchy stays
   people first. A cyan-filled panel here out-weighted them and inverted it. Same
   panel language as .fitem; cyan only on the label and the icons.
   The roles deliberately do NOT flex to fill. They did while there were only two
   of them, to stop the leftover height pooling at the bottom; with three, flexing
   made the panel the tallest column in the row and stretched the two people
   beside it, opening a ~100px void above each credential line. Let the panel size
   to its content and the row balances on its own. */
.tbench{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:20px 20px 18px;display:flex;flex-direction:column;height:100%}
.tbench-lab{font-family:var(--eye);text-transform:uppercase;letter-spacing:.11em;font-size:10px;font-weight:700;color:var(--accent);margin-bottom:16px;line-height:1.5}
.tbrole{display:flex;gap:13px;align-items:flex-start;padding:15px 0;border-top:1px solid rgba(255,255,255,.08)}
.tbrole:first-of-type{border-top:none;padding-top:0}
.tbrole:last-of-type{padding-bottom:0}
.tbrole .ic{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;background:rgba(70,215,255,.10);border:1px solid rgba(70,215,255,.22);color:var(--accent)}
.tbrole .ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7}
.tbrole .tbn{font-family:var(--disp);font-weight:800;font-size:14.5px;color:#fff;letter-spacing:-.01em}
.tbrole .tbd{font-family:var(--ui);font-size:12.5px;line-height:1.5;color:#9aa2bf;margin-top:4px}

/* Shared bits carried over into the output rows */
.eyebrow .fn{font-size:9px;margin-left:1px;vertical-align:super;opacity:.85}
/* Same marker in a section's supporting text, sized in em so it tracks the clamped type */
.section-head p .fn{font-size:.6em;margin-left:1px;vertical-align:super;opacity:.85}
.viewsample{font-family:var(--ui);font-weight:600;font-size:14px;color:var(--indigo);display:inline-flex;align-items:center;gap:6px}
.viewsample span{transition:transform .15s ease;display:inline-block}

/* Output rows (full-width, per-brand color) */
.section-cta{text-align:center;margin-top:34px}
.btn-outline{font-family:var(--ui);font-weight:600;font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--line);padding:13px 24px;border-radius:12px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:border-color .15s ease,color .15s ease,transform .15s ease}
.btn-outline:hover{border-color:var(--indigo);color:var(--indigo);transform:translateY(-1px)}
.btn-outline .arw{color:var(--indigo);transition:transform .15s ease;display:inline-block}
.btn-outline:hover .arw{transform:translateX(3px)}
.outputs{display:flex;flex-direction:column;gap:18px}
.outrow{width:100%;display:grid;grid-template-columns:.82fr 1.18fr;text-align:left;font-family:inherit;cursor:pointer;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-soft);padding:0;transition:transform .18s ease,box-shadow .18s ease}
.outrow:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}
.ob-brand{position:relative;overflow:hidden;color:#fff;padding:clamp(28px,3.5vw,44px);display:flex;flex-direction:column;justify-content:center;gap:8px;min-height:250px}
.ob-brand::after{content:"";position:absolute;inset:0;background:radial-gradient(420px 220px at 85% 112%,rgba(255,255,255,.14),transparent 60%);pointer-events:none}
.ob-industry{font-family:var(--eye);text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:600;opacity:.85}
.ob-mark{font-family:var(--disp);font-weight:800;font-size:clamp(24px,3vw,34px);letter-spacing:-.01em;line-height:1.05}
.ob-sub{font-family:var(--ui);font-size:13px;opacity:.72}
.outrow.legal .ob-brand{background:linear-gradient(150deg,#1D2A42,#0E1430)}
.outrow.legal .ob-mark{color:#F2EAD9}
.outrow.health .ob-brand{background:linear-gradient(150deg,#0C6E5D,#0A2620)}
.outrow.hotel .ob-brand{background:linear-gradient(150deg,#B5502F,#2A1F1A)}
.ob-content{background:#fff;padding:clamp(26px,3.5vw,44px);display:flex;flex-direction:column;justify-content:center}
.ob-content h3{font-family:var(--disp);font-weight:800;font-size:clamp(20px,2.3vw,27px);line-height:1.18;margin-bottom:12px;color:var(--ink)}
.ob-content p{font-family:var(--ui);font-size:15px;line-height:1.6;color:var(--muted);margin-bottom:20px;max-width:440px}
.ob-type{display:inline-flex;align-items:center;gap:7px;font-family:var(--eye);text-transform:uppercase;letter-spacing:.08em;font-size:10px;font-weight:600;color:var(--support);margin-bottom:12px}
.ob-type .d{width:6px;height:6px;border-radius:50%;background:var(--indigo)}
.outrow .viewsample{font-family:var(--ui);font-weight:600;font-size:15px;color:var(--indigo);display:inline-flex;align-items:center;gap:7px}
.outrow:hover .viewsample span{transform:translateX(3px)}

/* Sample package walkthrough modal */
body.modal-open{overflow:hidden}
.modal{position:fixed;inset:0;z-index:200;display:none}
.modal.open{display:block}
.modal-scrim{position:absolute;inset:0;background:rgba(15,18,30,.66);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}

/* Booking modal: the scheduler embedded inline, given as much of the screen as the
   viewport allows. The panel is a flex column and the iframe takes every pixel the
   header and the fallback line do not, so the calendar never needs a second scrollbar
   on desktop. On a phone it goes edge to edge and uses dvh, because a fixed 100vh sits
   under the mobile browser's own chrome and buries the last row of times. */
.bk-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1180px,96vw);height:min(960px,94vh);background:#fff;border-radius:var(--r-xl);box-shadow:0 40px 120px rgba(15,18,30,.55);display:flex;flex-direction:column;overflow:hidden}
.bk-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px clamp(18px,2.4vw,28px);border-bottom:1px solid var(--line)}
.bk-eyebrow{font-family:var(--eye);text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;font-weight:600;color:var(--indigo)}
.bk-title{font-family:var(--disp);font-weight:800;font-size:clamp(19px,2.2vw,24px);line-height:1.15;margin-top:3px}
.bk-body{flex:1;min-height:0;background:#fff}
.bk-body iframe{display:block;width:100%;height:100%;border:0}
.bk-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:10px clamp(18px,2.4vw,28px) 12px;border-top:1px solid var(--line);font-family:var(--ui);font-size:12.5px;color:var(--muted)}
.bk-foot a{color:var(--indigo);font-weight:600}
.bk-foot .wt-back{font-size:13.5px}
@media(max-width:860px){
  .bk-panel{left:0;top:0;transform:none;width:100vw;height:100dvh;max-height:100dvh;border-radius:0}
  .bk-head{padding:12px 16px}
  .bk-foot{padding:8px 16px 10px;font-size:12px}
}
.wt-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1180px,94vw);height:min(880px,93vh);background:var(--surface);border-radius:var(--r-xl);box-shadow:0 40px 120px rgba(15,18,30,.55);display:flex;flex-direction:column;overflow:hidden}
.wt-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px clamp(20px,2.4vw,30px);border-bottom:1px solid var(--line);background:#fff}
.wt-head-l{display:flex;align-items:center;gap:14px;min-width:0}
.wt-dot{width:38px;height:38px;border-radius:11px;flex:none;background:linear-gradient(150deg,#1D2A42,#0E1430)}
.wt-panel[data-brand="health"] .wt-dot{background:linear-gradient(150deg,#0C6E5D,#0A2620)}
.wt-panel[data-brand="hotel"] .wt-dot{background:linear-gradient(150deg,#B5502F,#2A1F1A)}
/* The industry line always holds one line: wrapping it doubled the height of a
   header that is fixed above the whole walkthrough. */
.wt-niche{font-family:var(--eye);text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;color:var(--indigo);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wt-brand{font-family:var(--disp);font-weight:800;font-size:16px;line-height:1.1;margin-top:2px}
.wt-head-r{display:flex;align-items:center;gap:12px;flex:none}
.wt-concept{font-family:var(--eye);text-transform:uppercase;letter-spacing:.07em;font-size:9.5px;font-weight:600;color:var(--support);background:var(--secondary);padding:6px 12px;border-radius:999px;white-space:nowrap}
.wt-close{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:22px;line-height:1;color:var(--muted);cursor:pointer}
.wt-close:hover{color:var(--ink)}
.wt-tabs{display:flex;gap:2px;padding:0 clamp(14px,2vw,26px);border-bottom:1px solid var(--line);background:#fff;overflow-x:auto;scrollbar-width:none}
.wt-tabs::-webkit-scrollbar{display:none}
.wt-tab{position:relative;font-family:var(--eye);font-weight:600;font-size:12.5px;letter-spacing:.03em;color:var(--faint);background:none;border:none;padding:15px 14px 14px;white-space:nowrap;display:flex;align-items:center;gap:8px;cursor:pointer}
.wt-tab .n{width:19px;height:19px;border-radius:50%;background:var(--line-2);color:var(--faint);font-size:10.5px;font-weight:700;display:grid;place-items:center;font-family:var(--ui)}
.wt-tab:hover{color:var(--muted)}
.wt-tab[aria-selected="true"]{color:var(--indigo)}
.wt-tab[aria-selected="true"] .n{background:var(--indigo);color:#fff}
.wt-tab[aria-selected="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--indigo);border-radius:2px}
.wt-tab.done .n{background:var(--ok);color:#fff}
/* Mobile: hint that the step tabs scroll horizontally (edge fade + nudging chevron).
   The chevron auto-hides once the user scrolls the strip or reaches the end (JS). */
.wt-tabswrap{position:relative}
.wt-tabsmore{display:none}
@media(max-width:720px){
  .wt-tabsmore{display:flex;align-items:center;justify-content:flex-end;position:absolute;top:0;right:0;bottom:1px;width:56px;padding-right:7px;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 58%);pointer-events:none;color:var(--indigo);transition:opacity .3s ease}
  .wt-tabsmore svg{width:20px;height:20px;animation:wtnudge 1.25s ease-in-out infinite}
  .wt-tabswrap.tabs-scrolled .wt-tabsmore,.wt-tabswrap.tabs-end .wt-tabsmore{opacity:0}
}
@keyframes wtnudge{0%,100%{transform:translateX(0);opacity:.5}50%{transform:translateX(4px);opacity:1}}
.wt-body{flex:1;overflow-y:auto;padding:clamp(24px,3vw,40px) clamp(20px,3vw,40px)}
.wt-step{display:none}
.wt-step.on{display:block;animation:wtfade .28s ease}
@keyframes wtfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.wt-stephead{max-width:640px;margin:0 auto clamp(24px,3vw,34px);text-align:center}
.wt-stephead h3{font-family:var(--disp);font-weight:800;font-size:clamp(22px,2.7vw,30px);line-height:1.14;letter-spacing:-.01em;margin-bottom:10px}
.wt-stephead p{font-family:var(--ui);font-size:15.5px;line-height:1.6;color:var(--muted)}
.wt-canvas{max-width:940px;margin:0 auto}
/* Closing note: last thing in the scrolling body of every step, separated by a
   single hairline. It used to sit in the sticky action bar next to the CTA. */
.wt-note{max-width:940px;margin:clamp(30px,4vw,46px) auto 0;padding-top:20px;border-top:1px solid var(--line);font-family:var(--ui);font-size:12.5px;line-height:1.55;color:var(--muted);text-align:center}
.wt-foot{display:flex;align-items:center;justify-content:flex-end;gap:16px;flex-wrap:wrap;padding:16px clamp(20px,2.4vw,30px);border-top:1px solid var(--line);background:#fff}
.wt-foot-actions{display:flex;align-items:center;gap:14px}
.wt-back{font-family:var(--ui);font-weight:600;font-size:14px;color:var(--muted);background:none;border:none;cursor:pointer}
.wt-back:hover{color:var(--ink)}
/* Overview */
.ov-grid{display:grid;grid-template-columns:.92fr auto 1.08fr;gap:20px;align-items:start}
.ov-arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;align-self:center}
.ov-arrow svg{width:34px;height:34px}
.ov-arrow .fd{display:flex;gap:5px}
.ov-arrow .fd i{width:5px;height:5px;border-radius:50%;background:var(--secondary);animation:hvfd 1.6s ease-in-out infinite}
.ov-arrow .fd i:nth-child(2){animation-delay:.2s}.ov-arrow .fd i:nth-child(3){animation-delay:.4s}
.ov-vary{max-width:900px;margin:16px auto 0;text-align:center;font-family:var(--ui);font-size:12.5px;color:var(--faint)}
.ov-col{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-soft)}
.ov-lbl{font-family:var(--eye);text-transform:uppercase;letter-spacing:.11em;font-size:10.5px;font-weight:600;color:var(--indigo);padding:16px 20px 12px;background:#FBFBFE;border-bottom:1px solid var(--line-2)}
.ov-item{display:flex;align-items:flex-start;gap:12px;padding:13px 20px;border-bottom:1px solid var(--line-2)}
.ov-item:last-child{border-bottom:none}
.ov-item .ico{width:22px;height:22px;border-radius:7px;flex:none;display:grid;place-items:center;background:var(--secondary);color:var(--support);margin-top:1px}
.ov-item .ico svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ov-item .t{font-family:var(--disp);font-weight:700;font-size:14px;line-height:1.25}
.ov-item .s{font-family:var(--ui);font-size:12px;color:var(--muted);margin-top:2px;line-height:1.45}
.ov-item .go{margin-left:auto;align-self:center;font-family:var(--eye);font-size:9.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);white-space:nowrap;flex:none}
.ov-col.publish .ov-item .ico{background:var(--indigo);color:#fff}
.ov-col.strategy .ov-item{padding:11px 20px}
.ov-item.hi{background:#F3FBFF;box-shadow:inset 3px 0 0 var(--accent)}
.ov-item.hi .t{color:var(--indigo)}
.ov-item.hi .ico{background:var(--accent);color:#0a3a44}
.ov-note{padding:12px 20px;background:#FBFBFE;font-family:var(--ui);font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px}
.ov-note b{color:var(--indigo);font-weight:600}
/* Article */
.art-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:22px;align-items:start}
/* Grid items default to min-width:auto, so one nowrap line (the article URL in the
   browser bar) would push the whole column past the panel on a phone. */
.art-grid > *{min-width:0}
.art-side{position:sticky;top:0}
.mini-label{font-family:var(--eye);text-transform:uppercase;letter-spacing:.09em;font-size:10px;color:var(--faint);font-weight:600;margin-bottom:10px}
.serp{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;box-shadow:var(--shadow-soft);font-family:arial,sans-serif}
.serp-crumb{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.serp-fav{width:24px;height:24px;border-radius:50%;background:linear-gradient(150deg,#1D2A42,#0E1430);flex:none}
.wt-panel[data-brand="health"] .serp-fav{background:linear-gradient(150deg,#0C6E5D,#0A2620)}
.wt-panel[data-brand="hotel"] .serp-fav{background:linear-gradient(150deg,#B5502F,#2A1F1A)}
.serp-site{font-size:12px;color:#202124;line-height:1.2}
.serp-url{font-size:12px;color:#4d5156}
.serp-ttl{font-size:19px;color:#1a0dab;line-height:1.3;margin:3px 0 2px}
.serp-desc{font-size:13px;color:#4d5156;line-height:1.55}
.serp-decoy{margin-top:14px;filter:blur(3px);opacity:.5}
.serp-decoy .serp-ttl{font-size:17px}
/* ---------------------------------------------------------------------------
 * Walkthrough, step 3: the published page.
 *
 * ONE typographic system, declared once as variables on .apage and used by every
 * element below. The page previously mixed nine sizes (14 / 13.5 / 13 / 12.5 for
 * prose alone) because each block had grown its own rule; the article is a single
 * reading surface and now reads as one. Body prose is a single size everywhere:
 * intro, section text, subpoint text, list items, FAQ answers, closing.
 *
 * Headings are real h1 / h2 / h3, built in JS so the hierarchy exists inside the
 * mock without any of it reaching the landing page's served HTML.
 * ------------------------------------------------------------------------- */
.abrow{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-soft)}
.abar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line-2);background:#FBFBFE}
.abar i{width:9px;height:9px;border-radius:50%;background:#E2E1EE}
.abar span{margin-left:10px;flex:1;min-width:0;font-family:var(--ui);font-size:11px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apage{
  --a-body:14px;        /* every line of prose in the article, without exception */
  --a-lh:1.72;
  --a-h1:clamp(19px,2.1vw,24px);
  --a-h2:17px;
  --a-h3:14.5px;
  --a-micro:11px;       /* meta line, eyebrow, TOC label */
  --a-ui:13px;          /* CTA copy and TOC items: chrome, not prose */
  padding:22px 24px
}
.apage p{font-family:var(--ui);font-size:var(--a-body);line-height:var(--a-lh);color:var(--ink);margin-bottom:13px}
.ameta{display:flex;gap:8px;align-items:center;font-family:var(--ui);font-size:var(--a-micro);color:var(--indigo);font-weight:600;margin-bottom:8px}
.ameta .sep{color:var(--faint)}
.a-kicker{font-family:var(--eye);text-transform:uppercase;letter-spacing:.1em;font-size:var(--a-micro);font-weight:600;color:var(--faint);margin-bottom:6px}
.a-h1{font-family:var(--disp);font-weight:800;font-size:var(--a-h1);line-height:1.18;letter-spacing:-.01em;color:var(--ink);margin-bottom:14px}
.a-h2{font-family:var(--disp);font-weight:800;font-size:var(--a-h2);line-height:1.26;color:var(--ink);margin:26px 0 10px;scroll-margin-top:14px}
.a-h3{font-family:var(--disp);font-weight:700;font-size:var(--a-h3);line-height:1.35;color:var(--ink);margin:18px 0 7px}
.aintro p:first-child{font-size:calc(var(--a-body) + 1px)}
.aclosing{margin-top:6px}
.a-ul,.a-ol{margin:0 0 13px 2px;padding-left:20px}
.a-ul li,.a-ol li{font-family:var(--ui);font-size:var(--a-body);line-height:var(--a-lh);color:var(--ink);margin-bottom:5px}
.a-ul{list-style:disc}
.a-ol{list-style:decimal}
.a-ul li::marker,.a-ol li::marker{color:var(--secondary)}
/* Featured image: a fixed 16:9 window the 4:3 file center-crops into, so every
   example opens on the same shape. In-text images keep their own ratio. */
.a-feat{margin:0 0 18px;border-radius:12px;overflow:hidden;background:var(--secondary)}
.a-inline{margin:22px 0 6px;border-radius:12px;overflow:hidden;background:var(--secondary)}
.a-feat img,.a-inline img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.atoc{border:1px solid var(--line);border-radius:10px;background:#FBFBFE;padding:14px 16px;margin:18px 0 4px}
.atoc .lbl{font-family:var(--eye);text-transform:uppercase;letter-spacing:.08em;font-size:9.5px;color:var(--faint);font-weight:600;margin-bottom:8px}
.atoc ol{list-style:none;counter-reset:t;padding:0;margin:0}
.atoc li{counter-increment:t;font-family:var(--ui);font-size:var(--a-ui);color:var(--support);padding:3px 0 3px 22px;position:relative}
.atoc li::before{content:counter(t);position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:var(--secondary);color:var(--support);font-size:9px;font-weight:700;display:grid;place-items:center}
.atoc .tlink{font:inherit;color:inherit;background:none;border:0;padding:0;text-align:left;cursor:pointer}
.atoc .tlink:hover{color:var(--indigo);text-decoration:underline}
/* CTA boxes. Which ones appear, and where the mid box sits, comes from the client's
   own CTA library, resolved by the shared resolver at export time. */
.a-cta{border:1px solid var(--secondary);background:linear-gradient(135deg,#f4f2ff,#eef4ff);border-radius:12px}
.a-cta-t{font-family:var(--disp);font-weight:700;font-size:15px;line-height:1.3;color:var(--support)}
.a-cta-d{font-family:var(--ui);font-size:var(--a-ui);line-height:1.5;color:var(--muted)}
.a-cta-b{display:inline-block;font-family:var(--ui);font-weight:700;font-size:var(--a-ui);color:#fff;background:var(--indigo);border-radius:9px;padding:10px 18px;white-space:nowrap}
.a-cta-mid{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 16px;padding:16px 18px;margin:26px 0}
.a-cta-mid .a-cta-d{grid-column:1;margin:3px 0 0}
.a-cta-mid .a-cta-b{grid-column:2;grid-row:1 / span 2;align-self:center}
.a-cta-final{margin-top:28px;padding:24px 20px;text-align:center;border-radius:14px}
.a-cta-final .a-cta-t{font-size:17px;font-weight:800}
.a-cta-final .a-cta-d{margin:7px auto 15px;max-width:38ch}
.afaq{border-top:1px solid var(--line);margin-top:28px;padding-top:6px}
.afaq .a-h3{margin-top:20px}
/* Waiting on (or missing) the package JSON. */
.wt-loading{font-family:var(--ui);font-size:var(--a-ui,13px);color:var(--faint);padding:38px 0;text-align:center}
.wt-loading.is-failed{color:var(--muted)}
/* Fixed-ratio media frames, shared by the article, the platform mocks and the email.
   Each mock uses the ratio its own placement uses: Facebook 1:1, Instagram 4:5,
   featured and newsletter 16:9. */
.r-16x9{aspect-ratio:16 / 9}
.r-1x1{aspect-ratio:1 / 1}
.r-4x5{aspect-ratio:4 / 5}
.is-empty{background:linear-gradient(135deg,#e9e7f6,#dbe6f2)}
/* Social + Ads device cards */
.dev-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:860px;margin:0 auto}
.dev{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-soft)}
.dev-h{display:flex;align-items:center;gap:10px;padding:13px 15px}
.dev-h .av{width:34px;height:34px;border-radius:50%;flex:none}
.av-fb{background:linear-gradient(135deg,#1D2A42,#0E1430)}
.wt-panel[data-brand="health"] .av-fb{background:linear-gradient(135deg,#0C6E5D,#0A2620)}
.wt-panel[data-brand="hotel"] .av-fb{background:linear-gradient(135deg,#B5502F,#2A1F1A)}
.av-ig{background:linear-gradient(45deg,#feda75,#d62976 50%,#962fbf);padding:2px}
.av-ig i{display:block;width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,#1D2A42,#0E1430)}
.wt-panel[data-brand="health"] .av-ig i{background:linear-gradient(135deg,#0C6E5D,#0A2620)}
.wt-panel[data-brand="hotel"] .av-ig i{background:linear-gradient(135deg,#B5502F,#2A1F1A)}
.dev-h b{font-family:var(--ui);font-size:13.5px;color:#050505;display:block;line-height:1.15}
.dev-h span{font-family:var(--ui);font-size:11px;color:var(--faint)}
.dev-txt{font-family:var(--ui);font-size:13px;line-height:1.6;color:var(--ink);padding:0 15px 12px}
/* Clamped feed copy with See more, the same rule the client preview uses: three lines,
   and the button appears only when the text genuinely overflows them (measured in JS,
   because line-clamp reports scrollHeight == clientHeight). Both feeds truncate this way,
   so the mock reads like the platform instead of like a wall of copy. */
.feedtext{white-space:pre-wrap}
.feedtext-body{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.feedtext.is-open .feedtext-body,
.feedtext.fits .feedtext-body,
.feedtext.measuring .feedtext-body{display:block;-webkit-line-clamp:unset;overflow:visible}
.seemore{border:0;background:none;color:#65676b;font:inherit;font-weight:600;cursor:pointer;padding:3px 0 0;white-space:normal}
.seemore:hover{text-decoration:underline}
/* Facebook's Public glyph on the byline, drawn, not an emoji. */
.fb-globe{width:13px;height:13px;display:inline-flex;vertical-align:-2px;color:#65676b}
.fb-globe svg{width:13px;height:13px}
/* The creative is stored 4:5. Facebook center-crops it to the square its placement
   uses; Instagram shows it whole. The crop is deliberate, not a mismatch. */
.dev-shot{background:linear-gradient(135deg,#e9e7f6,#dbe6f2);position:relative;overflow:hidden}
.dev-shot img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.dev-shot .tag{position:absolute;left:10px;bottom:10px;font-family:var(--ui);font-size:9px;color:var(--muted);background:rgba(255,255,255,.75);padding:3px 8px;border-radius:6px}
.fb-foot{background:#f0f2f5;padding:11px 15px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.fb-foot .d{font-family:var(--ui);font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.03em}
.fb-foot .hh{font-family:var(--ui);font-weight:700;font-size:12.5px;color:#050505;margin-top:2px}
.fb-foot .lm{font-family:var(--ui);font-weight:700;font-size:12px;color:#050505;background:#e4e6eb;border-radius:7px;padding:8px 13px;white-space:nowrap}
.dev-react{display:flex;gap:18px;padding:10px 15px;font-family:var(--ui);font-size:12px;color:var(--faint);border-top:1px solid var(--line-2)}
.ig-cap{font-family:var(--ui);font-size:12.5px;line-height:1.55;padding:10px 15px 14px}
.ig-cap b{color:#050505}
.ig-cap .tags{color:#00376b;margin-top:6px;display:block}
/* The client's standing disclosure closes the caption, after the hashtags, exactly
   where the two shared block builders put it. Rendered only when the piece has one. */
.ig-cap .disc{color:var(--faint);font-size:11.5px;margin-top:6px;display:block}
.ig-cap .disc:empty{display:none}
/* Instagram paid: the call-to-action bar under the creative. */
.ig-lm{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 15px;background:#fafafa;border-bottom:1px solid var(--line-2);font-family:var(--ui);font-weight:600;font-size:12.5px;color:#050505}
.ig-icons{display:flex;gap:14px;padding:10px 15px 0;font-size:15px}
.gad{padding:16px 18px;font-family:arial,sans-serif}
.gad-spons{font-family:var(--ui);font-weight:700;font-size:12px;color:#202124;margin-bottom:6px}
.gad-crumb{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.gad-fav{width:24px;height:24px;border-radius:50%;background:linear-gradient(150deg,#1D2A42,#0E1430);flex:none}
.wt-panel[data-brand="health"] .gad-fav{background:linear-gradient(150deg,#0C6E5D,#0A2620)}
.wt-panel[data-brand="hotel"] .gad-fav{background:linear-gradient(150deg,#B5502F,#2A1F1A)}
.gad-site{font-size:12px;color:#202124;line-height:1.15}
.gad-url{font-size:12px;color:#4d5156}
.gad-ttl{font-size:20px;color:#1a0dab;line-height:1.3;margin:4px 0 3px}
.gad-desc{font-size:13px;color:#4d5156;line-height:1.55}
.gad-rating{font-size:12px;color:#4d5156;margin-top:7px}
.gad-rating .st{color:#fbbc04;letter-spacing:1px}
.gad-sl{display:flex;gap:18px;margin-top:9px;flex-wrap:wrap}
.gad-sl span{font-size:12.5px;color:#1a0dab}
/* Third line of the step header, under the header's own two. The gap to the cards is
   now the header's fluid bottom margin, so the paragraph reads as belonging to the
   section it introduces instead of hovering above the outputs on a fixed 18px. */
.ad-explain{margin-top:12px;font-size:13px;color:var(--faint)}
/* Ads step: the search ad on its own row (a text ad wants a result-column measure,
   not a card), then the two paid-social placements side by side underneath. */
.ad-search{max-width:620px;margin:0 auto 22px}
.ad-search .gad{padding:18px 20px}
/* Social/Ads/Email: label on top (step-2 style), SVG platform icons */
.devcol{display:flex;flex-direction:column;min-width:0}
.dev-react{color:#65676b;align-items:center}
.dev-react .ri{display:inline-flex;align-items:center}
.dev-react svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ig-icons{color:#050505;align-items:center}
.ig-icons span{display:inline-flex;align-items:center}
.ig-icons svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mailwrap{max-width:900px;margin:0 auto}
.aintro p{margin-bottom:12px}
/* Email */
.mailenv{max-width:900px;margin:0 auto;display:grid;grid-template-columns:150px 220px minmax(0,1fr);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-soft);background:#fff;min-height:440px}
.mside{background:#f7f9fc;border-right:1px solid var(--line-2);padding:16px 12px}
.mside .fld{font-family:var(--ui);font-size:12.5px;color:var(--muted);padding:7px 8px;border-radius:7px;margin-bottom:2px}
.mside .fld.on{background:#eef1fb;color:var(--ink);font-weight:600}
.mlist{border-right:1px solid var(--line-2);overflow:hidden}
.mit{padding:12px 13px;border-bottom:1px solid var(--line-2)}
.mit .fr{font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--ink)}
.mit .su{font-family:var(--ui);font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mit.on{background:#f3f7ff;box-shadow:inset 3px 0 0 var(--indigo)}
.mit.ghost{opacity:.5}
.mread{padding:20px 24px}
.mread .su{font-family:var(--disp);font-weight:800;font-size:19px;line-height:1.25;margin-bottom:12px}
.mread .fr{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.mread .fr .av{width:34px;height:34px;border-radius:50%;flex:none;background:linear-gradient(135deg,#1D2A42,#0E1430)}
.wt-panel[data-brand="health"] .mread .fr .av{background:linear-gradient(135deg,#0C6E5D,#0A2620)}
.wt-panel[data-brand="hotel"] .mread .fr .av{background:linear-gradient(135deg,#B5502F,#2A1F1A)}
.mread .fr b{font-family:var(--ui);font-size:13px}
.mread .fr span{font-family:var(--ui);font-size:11.5px;color:var(--faint);display:block}
/* Newsletter art, 16:9. These pieces carry no newsletter image slot, so it reuses the
   featured image, the same fallback the client preview resolves. */
.mread .mbanner{border-radius:12px;overflow:hidden;margin-bottom:16px;background:var(--secondary)}
.mread .mbanner img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.mread p{font-family:var(--ui);font-size:14px;line-height:1.7;color:var(--ink);margin-bottom:14px}
.mread .eb{font-family:var(--ui);font-weight:700;font-size:13px;color:#fff;background:var(--indigo);border-radius:10px;padding:12px 22px;display:inline-block}
/* Analyst view */
.an-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.an-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:18px 18px 20px;box-shadow:var(--shadow-soft)}
.an-card .hd{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.an-card .hd .ic{width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;background:var(--secondary);color:var(--support)}
.an-card .hd .ic svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.an-card .hd .t{font-family:var(--disp);font-weight:800;font-size:13.5px;line-height:1.15}
.an-card .s{font-family:var(--ui);font-size:12px;color:var(--muted);line-height:1.5}
.an-card.hi{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow-soft)}
.an-card.hi .hd .ic{background:var(--accent);color:#0a3a44}
.an-card.hi .hd .t{color:var(--indigo)}
.an-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.an-chips span{font-family:var(--ui);font-size:10.5px;font-weight:600;color:var(--support);background:#F3F2FF;border:1px solid #E4E1FB;border-radius:6px;padding:3px 8px}
.an-kv{margin-top:11px;border-top:1px solid var(--line-2);padding-top:10px}
.an-kv .row{display:flex;justify-content:space-between;gap:10px;font-family:var(--ui);font-size:11.5px;padding:3px 0}
.an-kv .k{color:var(--faint)}
.an-kv .v{color:var(--ink);font-weight:600;text-align:right}
.an-src{margin-top:11px;border-top:1px solid var(--line-2);padding-top:10px;display:flex;flex-direction:column;gap:6px}
.an-src .r{display:flex;align-items:center;gap:7px;font-family:var(--ui);font-size:11px;color:var(--muted)}
.an-src .r .ck{width:14px;height:14px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;font-size:8px;flex:none}
.an-src .r .dm{color:var(--indigo);font-weight:600}
.an-bars{margin-top:11px;display:flex;flex-direction:column;gap:8px}
.an-bars .b{display:flex;align-items:center;gap:9px;font-family:var(--ui);font-size:11px;color:var(--muted)}
.an-bars .b .track{flex:1;height:6px;border-radius:4px;background:var(--line-2);overflow:hidden}
.an-bars .b .fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#5B8EF5,#5B4FE3)}
/* Final summary */
.wt-final{max-width:760px;margin:clamp(30px,4vw,46px) auto 0;text-align:center;border-top:1px solid var(--line);padding-top:clamp(28px,3.4vw,40px)}
.wt-final h3{font-family:var(--disp);font-weight:800;font-size:clamp(22px,2.8vw,30px);line-height:1.14;margin-bottom:10px}
.wt-final p{font-family:var(--ui);font-size:15.5px;color:var(--muted);margin-bottom:20px}
.wt-final .assets{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:22px}
.wt-final .assets span{font-family:var(--eye);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--support);background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 13px}
@media(max-width:860px){
  .wt-panel{width:100vw;height:100dvh;max-height:100dvh;border-radius:0;left:0;top:0;transform:none}
  .ov-grid{grid-template-columns:1fr}
  .ov-arrow svg{transform:rotate(90deg)}
  .art-grid{grid-template-columns:1fr}
  /* One column: the search result now sits above the article rather than beside it,
     so pinning it would park a card on top of the copy being read. */
  .art-side{position:static}
  .dev-grid{grid-template-columns:1fr}
  .an-grid{grid-template-columns:1fr 1fr}
  .mailenv{grid-template-columns:1fr}
  .mside,.mlist{display:none}
  /* One column: a phone-width card, not a full-bleed one. A 4:5 creative stretched to
     the panel width would be taller than the screen it is being read on. */
  .dev-grid{max-width:430px}
  .ad-search{max-width:100%}
}
@media(max-width:560px){
  .an-grid{grid-template-columns:1fr}
  .apage{padding:18px 16px}
  .a-cta-mid{grid-template-columns:1fr}
  .a-cta-mid .a-cta-b{grid-column:1;grid-row:auto;justify-self:start;margin-top:12px}
}

/* Plans, larger and more present */
.plans{gap:16px}
.plan{padding:28px 22px}
.plan .badge{font-size:10px}
.plan h3{font-size:22px;margin-top:18px}
.plan .vol{font-size:14px}
.plan .save{font-size:16px}
.plan .scope{font-size:13.5px;margin-top:14px}
.plan .price{font-size:11px}

/* ===== PROFESSIONAL RECOMMENDATIONS (editorial) ===== */
.recs{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1000px;margin:0 auto;align-items:stretch}
.rec{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(28px,3.2vw,40px);box-shadow:var(--shadow-soft);display:flex;flex-direction:column}
.rec-quote{margin:0 0 26px;font-family:var(--ui);font-weight:400;font-size:clamp(16px,1.85vw,19px);line-height:1.55;color:var(--ink);flex:1}
.rec-by{display:flex;align-items:center;gap:15px;padding-top:22px;border-top:1px solid var(--line-2)}
.rec-photo{width:56px;height:56px;border-radius:50%;overflow:hidden;flex:none;background:var(--surface);border:1px solid var(--line)}
.rec-photo img{width:100%;height:100%;object-fit:cover}
.rec-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.rec-name{font-family:var(--disp);font-weight:800;font-size:15.5px;color:var(--ink)}
.rec-role{font-family:var(--ui);font-size:13px;color:var(--muted)}
.rec-org{font-family:var(--eye);text-transform:uppercase;letter-spacing:.06em;font-size:10px;font-weight:600;color:var(--faint);margin-top:3px}
@media(max-width:720px){.recs{grid-template-columns:1fr}}

/* ===== TOOLS MARQUEE (full-bleed, two opposing rows) ===== */
.marquee{position:relative;display:flex;flex-direction:column;gap:15px;margin-top:clamp(30px,4vw,46px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mrow{overflow:hidden}
.mtrack{display:flex;gap:14px;width:max-content;will-change:transform}
.mright .mtrack{animation:marq-right 55s linear infinite}
.mleft .mtrack{animation:marq-left 62s linear infinite}
@keyframes marq-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes marq-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Speed easing (hover / touch -> ~half) is driven in site.js via playbackRate. */
.mcard{flex:none;display:flex;align-items:center;justify-content:center;height:60px;min-width:160px;padding:0 22px;border:1px solid transparent;border-radius:14px}
.mcard img{max-height:26px;max-width:120px;width:auto}
.mword{font-family:var(--disp);font-weight:700;font-size:14.5px;white-space:nowrap}
/* Dark treatment: deep navy band with an indigo glow, brand tiles harmonized to
   the W3 Blue palette (see w3bc_tools). Each tile carries --mc (harmonized brand
   color) and --mc-ink (auto contrast text). */
#tools.tools-dark{background:
  radial-gradient(900px 460px at 84% -12%,rgba(91,79,227,.22),transparent 62%),
  var(--dark)}
.tools-dark h2{color:#fff}
.tools-dark .section-head p{color:rgba(226,230,245,.72)}
.tools-dark .mcard{background:var(--mc);color:var(--mc-ink);border-color:rgba(255,255,255,.10);
  box-shadow:0 10px 26px rgba(6,9,20,.42),inset 0 0 0 1px rgba(255,255,255,.10)}
.tools-dark .mword{color:var(--mc-ink)}

/* ===== AUTHORITY (founder's track record, contained panel) ===== */
.authority-band{position:relative;overflow:hidden;background:var(--dark);color:#fff}
.authority-band::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(700px 340px at 18% -10%,rgba(91,79,227,.4),transparent 60%),radial-gradient(620px 340px at 88% 112%,rgba(70,215,255,.18),transparent 60%)}
.auth-in{position:relative;display:flex;flex-direction:column;gap:34px}
.auth-intro{max-width:640px;margin:0 auto;text-align:center}
.auth-intro h2{font-size:clamp(28px,4vw,44px);font-weight:800;margin-top:14px}
.auth-lead{font-family:var(--ui);font-size:clamp(15px,1.7vw,17px);line-height:1.6;color:#C7CBDB;margin-top:14px}
.auth-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center;padding-top:32px;border-top:1px solid rgba(255,255,255,.12)}
.amn{font-family:var(--disp);font-weight:800;font-size:clamp(30px,4.6vw,52px);letter-spacing:-.02em;color:#fff;line-height:1}
.aml{font-family:var(--ui);font-size:13px;color:#9aa2bf;margin-top:8px;line-height:1.35}
.auth-clients{display:flex;flex-direction:column;align-items:center;gap:clamp(36px,4vw,48px);padding-top:34px;border-top:1px solid rgba(255,255,255,.12)}
.auth-lab{font-family:var(--eye);text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:#8891af;font-weight:600}
/* Content-width columns spread with equal gaps (space-between), first and last
   marks flush to the container edges (same limit as the text). This keeps a
   narrow logo like IHG from floating in a wide equal cell. One row on desktop;
   below, fixed column counts keep wrapped rows balanced (6 -> 3+3 -> 2+2+2), so a
   logo is never orphaned alone, with extra vertical space between wrapped rows.
   NOTE: counts assume 6 visible brands, update them if that changes. */
.logo-strip{display:grid;grid-template-columns:repeat(6,auto);justify-content:space-between;align-items:center;justify-items:center;gap:34px 18px;width:100%}
.logo-item{display:flex;align-items:center;justify-content:center;height:30px;min-width:0}
.logo-item img{max-height:30px;max-width:100%;width:auto;object-fit:contain;filter:grayscale(1) brightness(0) invert(1);opacity:.55;transition:opacity .2s ease}
.logo-item img:hover{opacity:.9}
.logo-word{font-family:var(--disp);font-weight:800;font-size:16px;color:#fff;letter-spacing:-.01em;opacity:.5;text-align:center;line-height:1.15}
@media(max-width:900px){.logo-strip{grid-template-columns:repeat(3,1fr);justify-content:normal;gap:48px 20px}}
/* Two per row on phones, so the ROW gap is what gives the strip air. Kept well
   above the column gap on purpose: wrapped rows read as rows, not as a block. */
@media(max-width:560px){.logo-strip{grid-template-columns:repeat(2,1fr);gap:52px 22px}}

/* ===== COMPARISON v2 (clean, ranked, scored; desktop table + mobile cards) ===== */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cmp2{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-card);overflow:hidden}
.cmp2-table{width:100%;border-collapse:collapse;font-family:var(--ui)}
.cmp2-table th,.cmp2-table td{padding:16px 18px;text-align:center;border-bottom:1px solid var(--line-2)}
.cmp2-table tbody tr:last-child th,.cmp2-table tbody tr:last-child td{border-bottom:none}
.cmp2-col{font-family:var(--eye);text-transform:uppercase;letter-spacing:.04em;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.cmp2-rowh{text-align:left;font-family:var(--ui);font-weight:600;font-size:15px;color:var(--ink);white-space:nowrap}
.cmp2-cell{font-size:15px;color:var(--muted)}
.cmp2-cell.c-yes{color:var(--ok);font-weight:700}
.cmp2-cell.c-mid{color:#C6871B;font-weight:600}
.cmp2-cell.c-no{color:var(--faint);font-weight:400}
.cmp2-col.is-w3,.cmp2-cell.is-w3{background:rgba(91,79,227,.06)}
.cmp2-col.is-w3{color:var(--indigo)}
.cmp2-best{display:block;font-family:var(--ui);text-transform:none;letter-spacing:0;font-size:10.5px;font-weight:600;color:var(--indigo);margin-top:4px}
.cmp2-sub{display:block;font-family:var(--ui);text-transform:none;letter-spacing:0;font-size:11px;font-weight:500;line-height:1.35;color:var(--muted);white-space:normal;text-wrap:balance;max-width:118px;margin:3px auto 0}
.cmp2-name .cmp2-sub{max-width:none;margin:2px 0 0;font-size:12px}
/* Savings row: what used to be the standalone "The math" section, folded in on
   2026-08-14. Percentages only, never dollars, and the anchor volume is disclosed
   in the footnote (.cmp2-basis), not in the cell. A column with no figure prints
   an em dash: that is AI only, where a savings claim would be meaningless. */
.cmp2-saverow th,.cmp2-saverow td{background:#FBFBFE}
.cmp2-save{font-family:var(--disp);font-weight:800;font-size:16px;color:var(--indigo)}
.cmp2-save small{display:block;font-family:var(--ui);font-weight:500;font-size:10.5px;letter-spacing:.02em;color:var(--faint);margin-bottom:2px;text-transform:uppercase}
.cmp2-save.is-base{color:var(--faint);font-weight:600;font-size:13px}
.cmp2-basis{font-family:var(--ui);font-size:12.5px;line-height:1.55;color:var(--faint);text-align:center;font-style:italic;max-width:820px;margin:18px auto 0}
.cmp2-cta{text-align:center;margin-top:26px}
.cmp2-scorerow th,.cmp2-scorerow td{border-top:2px solid var(--line);background:#FBFBFE}
.cmp2-scorerow .cmp2-rowh{color:var(--support)}
.cmp2-rowh .sc-ic{width:19px;height:14px;vertical-align:-3px;margin-right:8px;color:var(--support)}
.cmp2-score{font-family:var(--disp);font-weight:800;font-size:21px}
.cmp2-score.is-w3{background:rgba(91,79,227,.1)}
.cmp2-score.s-g{color:var(--ok)}.cmp2-score.s-a{color:#C6871B}.cmp2-score.s-r{color:#C0503A}
.cmp2-cards{display:none}
/* shared score chip (cards + could be reused) */
.score{display:inline-flex;align-items:center;gap:7px;flex:none}
.score .sc-ic{width:20px;height:15px;flex:none}
.score-n{font-family:var(--disp);font-weight:800;font-size:15px;min-width:22px;text-align:right}
.score-bar{width:44px;height:6px;border-radius:4px;background:#EDEEF4;overflow:hidden}
.score-bar i{display:block;height:100%;border-radius:4px}
.score.s-g .score-n,.score.s-g .sc-ic{color:var(--ok)}.score.s-g .score-bar i{background:var(--ok)}
.score.s-a .score-n,.score.s-a .sc-ic{color:#C6871B}.score.s-a .score-bar i{background:#E7A83C}
.score.s-r .score-n,.score.s-r .sc-ic{color:#C0503A}.score.s-r .score-bar i{background:#D0664A}
/* mobile cards */
.cmp2-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-soft);margin-bottom:12px;overflow:hidden}
.cmp2-card.is-w3{border-color:var(--indigo);box-shadow:inset 0 0 0 1px var(--indigo),var(--shadow-soft)}
.cmp2-cardhead{width:100%;display:flex;align-items:center;gap:10px;background:none;border:none;padding:15px 16px;cursor:pointer;font-family:inherit;text-align:left}
.cmp2-name{font-family:var(--disp);font-weight:800;font-size:16px;color:var(--ink);flex:1;min-width:0}
.cmp2-chev{color:var(--faint);transition:transform .2s;flex:none}
.cmp2-chev svg{width:18px;height:18px;display:block}
.cmp2-card.open .cmp2-chev{transform:rotate(180deg)}
.cmp2-cardbody{display:none;padding:0 16px 15px}
.cmp2-card.open .cmp2-cardbody{display:block}
.cmp2-li{display:flex;align-items:flex-start;gap:9px;padding:7px 0;font-family:var(--ui);font-size:12.5px;color:var(--ink);border-bottom:1px solid var(--line-2)}
.cmp2-li:last-child{border-bottom:none}
.cmp2-dot{width:9px;height:9px;border-radius:50%;flex:none;margin-top:5px}
.d-yes{background:var(--ok)}.d-mid{background:#E7A83C}.d-no{background:#D0664A}
.cmp2-lx{line-height:1.4}
.cmp2-val{color:var(--muted)}
.v-yes{color:var(--ok);font-weight:700}.v-mid{color:#C6871B;font-weight:600}.v-no{color:var(--faint)}
/* Six columns overflow between the cards breakpoint and the full desktop width, and
   .cmp2 clips (overflow:hidden, for the radius) instead of scrolling, so a column would
   vanish. Tighten the grid through that window; above it the roomy design stands. */
@media(max-width:1080px){
  .cmp2-table th,.cmp2-table td{padding:14px 11px}
  .cmp2-cell{font-size:14px}
  .cmp2-rowh{font-size:14px;white-space:normal;min-width:190px}
  .cmp2-col{font-size:12px;letter-spacing:.02em}
  .cmp2-score{font-size:19px}
}
@media(max-width:930px){
  .cmp2{display:none}
  .cmp2-cards{display:block}
}

/* ===== PLANS mobile segmented selector (desktop keeps the matrix) ===== */
.plan-seg{display:none}
@media(max-width:860px){.plan-matrix-wrap{display:none}.plan-seg{display:block;margin-top:6px}}
.plan-seg .seg{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.plan-seg .seg::-webkit-scrollbar{display:none}
.pseg-pill{flex:0 0 auto;font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;white-space:nowrap}
.pseg-pill.on{background:var(--indigo);color:#fff;border-color:var(--indigo)}
.pseg-pill .rdot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-left:6px;vertical-align:middle}
.segwrap{position:relative}
.seghint{display:flex;align-items:center;justify-content:flex-end;position:absolute;top:0;right:0;bottom:6px;width:44px;background:linear-gradient(90deg,rgba(246,247,251,0),var(--surface) 58%);pointer-events:none;color:var(--indigo);transition:opacity .3s}
.seghint svg{width:18px;height:18px;animation:wtnudge 1.25s ease-in-out infinite}
.segwrap.seg-scrolled .seghint,.segwrap.seg-end .seghint{opacity:0}
.pseg-panel{display:none}
.pseg-panel.on{display:block}
.pv-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 12px;padding-bottom:13px;border-bottom:1px solid var(--line-2)}
.pv-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--eye);text-transform:uppercase;letter-spacing:.09em;font-size:11px;font-weight:600;color:var(--indigo)}
.pv-badge svg{width:15px;height:15px;flex:none}
.pv-disc{font-family:var(--ui);font-size:12px;font-weight:700;color:var(--ok);background:#E7F7F0;border:1px solid #CDEDDF;border-radius:999px;padding:5px 11px;flex:none;white-space:nowrap}
.pv-grp{font-family:var(--eye);text-transform:uppercase;letter-spacing:.1em;font-size:10px;font-weight:600;color:var(--faint);margin:16px 0 8px}
.pv-row{display:flex;align-items:flex-start;gap:11px;padding:11px 0;border-bottom:1px solid var(--line-2)}
.pv-row:last-child{border-bottom:none}
.pv-ic{width:22px;height:22px;border-radius:6px;flex:none;display:grid;place-items:center;font-size:12px;margin-top:1px}
.pv-ic.yes{background:#E7F7F0;color:var(--ok)}
.pv-ic.add{background:#FFF3DF;color:#B7791F}
.pv-ic.no{background:#FCECEA;color:#C0503A;font-weight:700}
.pv-tx b{font-family:var(--disp);font-weight:700;font-size:13.5px;color:var(--ink);line-height:1.25}
.pv-row.no .pv-tx b{color:var(--faint);font-weight:600}
.pv-tx small{display:block;font-family:var(--ui);font-size:11px;color:var(--muted);margin-top:2px;line-height:1.4}
.pv-pill{font-family:var(--ui);font-size:10px;font-weight:700;color:#B7791F;background:#FFF3DF;border:1px solid #F3E2C2;border-radius:999px;padding:2px 8px;margin-left:auto;flex:none;align-self:center}
.pv-hi{box-shadow:inset 3px 0 0 var(--accent);background:#F3FBFF;border-radius:6px;padding-left:9px;margin-left:-9px}

/* ===== PILOT ===== */
.pilot{max-width:1000px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.pilot-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pf{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px;box-shadow:var(--shadow-soft)}
.pf-k{font-family:var(--eye);text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--indigo);font-weight:600}
.pf-v{font-family:var(--disp);font-weight:800;font-size:16px;color:var(--ink);margin-top:6px;line-height:1.25}
.pf-s{font-family:var(--ui);font-size:12px;line-height:1.45;color:var(--faint);margin-top:6px}
.pilot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pcol{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 22px;box-shadow:var(--shadow-soft)}
.pcol h3{font-size:16px;font-weight:800;margin-bottom:14px}
.pcol ul{display:flex;flex-direction:column;gap:11px}
.pcol li{position:relative;padding-left:24px;font-family:var(--ui);font-size:13.5px;line-height:1.5;color:var(--muted)}
.pcol li::before{content:"";position:absolute;left:2px;top:3px;width:11px;height:6px;border-left:2px solid var(--indigo);border-bottom:2px solid var(--indigo);transform:rotate(-45deg)}
.pilot-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.pilot-guarantee{display:flex;align-items:center;gap:22px;background:var(--dark);color:#fff;border-radius:var(--r-lg);padding:clamp(22px,3.5vw,32px);position:relative;overflow:hidden}
.pilot-guarantee::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(560px 280px at 92% -30%,rgba(255,184,77,.15),transparent 60%)}
.pilot-guarantee .pg-badge{flex:none;width:54px;height:54px;border-radius:14px;display:grid;place-items:center;background:rgba(255,184,77,.1);border:1px solid rgba(255,184,77,.34);color:var(--action)}
/* Amber accents so the pilot money-back block converses with the Start here mb-pill */
.pilot-guarantee .eyebrow.on-dark{color:var(--action)}
.pilot-guarantee .eyebrow .bar{background:var(--action)}
.pilot-guarantee .pg-badge svg{width:26px;height:26px}
.pilot-guarantee .pg-body{position:relative}
.pilot-guarantee h3{font-size:clamp(19px,2.3vw,25px);font-weight:800;margin:8px 0 0}
.pilot-guarantee p{font-family:var(--ui);font-size:clamp(14px,1.5vw,16px);line-height:1.6;color:#C7CBDB;margin:9px 0 0;max-width:660px}
.pilot-guarantee p.pg-fine{font-size:13px;line-height:1.55;color:#9AA0B8;margin-top:10px}
.pilot-guarantee p.pg-fine a{color:#C7CBDB;text-decoration:underline;text-underline-offset:2px}
@media (max-width:560px){.pilot-guarantee{flex-direction:column;align-items:flex-start;gap:16px}}

/* Reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ===== RESPONSIVE ===== */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
  /* Stacked hero on one central axis (Tarsis, 2026-10-11): copy, action and the card scene share
     the same center line. Balanced wrapping keeps the H1 from leaving "content." alone on a line. */
  .hero-copy{text-align:center;display:flex;flex-direction:column;align-items:center}
  .hero h1{text-wrap:balance}
  .hero .sub{max-width:34ch;margin-left:auto;margin-right:auto;text-wrap:pretty}
  .hero .cta-row{justify-content:center}
  .nav .links{display:none}
  .navtoggle{display:flex}
  .nav .logo img{height:38px}.nav.scrolled .logo img{height:34px}
  .founder-in{grid-template-columns:1fr;gap:28px}
  .founder-photo{max-width:300px}
  .plans{grid-template-columns:repeat(2,1fr)}
  .shell{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:repeat(2,1fr)}
  .team-members{grid-template-columns:1fr;row-gap:clamp(36px,9vw,48px)}
  /* .team-members.is-three outranks the line above (two classes vs one), so the
     three-column grid has to be unset explicitly here or it survives on phones. */
  .team-members.is-three{grid-template-columns:1fr;row-gap:clamp(28px,6vw,38px)}
  /* One column: the wrapper stops spanning and stops being a grid, and the
     credential stops being anchored, because there is nothing left to align to. */
  .team-people{grid-column:auto;display:contents}
  /* 8 + the bio's own 10 keeps the same 18px total as the wide layout. */
  .team-members.is-three .tcred{margin-top:8px;padding-top:18px}
  /* Stacked in one column the named people read better centred: the photo is a
     small square and left-aligning it against full-width text left a hole. The
     capability panel keeps its icon-left rows, which are a list and not a card. */
  .team-members.is-three .tmember{align-items:center;text-align:center}
  .team-members.is-three .tinfo{align-items:center;width:100%}
  .outrow{grid-template-columns:1fr}
  .ob-brand{min-height:150px}
}
@media(max-width:720px){
  .wedge-packs{grid-template-columns:1fr}
  .foot .foot-grid{grid-template-columns:1fr;gap:28px}
  .auth-metrics{grid-template-columns:repeat(2,1fr);gap:22px}
  .pilot-facts{grid-template-columns:repeat(2,1fr)}
  .pilot-cols{grid-template-columns:1fr}
}
@media(max-width:560px){
  .plans{grid-template-columns:1fr}
  .shell{grid-template-columns:1fr 1fr}
}
/* Very small phones (<390px): stack each team card (photo above full-width text)
   so Cris's and Eliezer's bios stop being squeezed into a narrow side column. */
@media(max-width:389.98px){
  .tmember{flex-direction:column;gap:14px}
  .tphoto{width:96px;height:120px}
}
/* Modal header on phones (<410px, which is where the brand name starts running
   three lines deep). The badge, the dot and the close button give back the width
   they were taking, so the industry line keeps its single line and the name gets
   room. The name is also capped at two lines and ellipsized: "Wrenfield Rehab
   & Movement" used to make the fixed header taller than the content it
   introduces. */
@media(max-width:409.98px){
  .wt-head{gap:10px;padding-left:16px;padding-right:16px}
  .wt-head-l{gap:10px}
  .wt-dot{width:32px;height:32px;border-radius:9px}
  .wt-brand{font-size:14px;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .wt-concept{font-size:8px;letter-spacing:.05em;padding:4px 7px}
  .wt-close{width:32px;height:32px;font-size:19px}
}
/* Smallest phones (<366px). Two-up card grids leave no room for the text and the
   modal footer CTA broke into two lines. The hero fix for the same width sits
   with the rest of the hero rules further down, so it wins on source order. */
@media(max-width:365.98px){
  .shell{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}

  .wt-niche{font-size:9px;letter-spacing:.07em}
  .wt-brand{font-size:13.5px}
  .wt-foot{padding-left:16px;padding-right:16px}
  .wt-foot-actions{width:100%;justify-content:space-between;gap:10px}
  .wt-back{font-size:13px}
  .wt-foot .btn-primary{font-size:13.5px;padding:13px 16px;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none}
}

/* ===== HERO VISUAL (single scene: one topic -> one package) ============
   Topic card -> arrow -> package card, ghost sheets fanned behind for volume,
   a base status strip on the package. hv- namespaced (hero-only). The old
   two-scene rotating hero (slide 2: calendar + social/location peeks) was
   removed 2026-07-24; its JS (#heroStage) just no-ops now. */
.hero-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:400px}
.hv-flow{display:flex;align-items:center;justify-content:center;gap:18px}
.hv-bob{animation:hvbob 6.5s ease-in-out var(--d,0s) infinite}
@keyframes hvbob{0%,100%{transform:rotate(var(--rot,0deg)) translateY(0)}50%{transform:rotate(var(--rot,0deg)) translateY(-8px)}}

.hv-stack{position:relative}
.hv-stack .hv-ghost{position:absolute;inset:0;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-soft)}
.hv-stack .hv-ghost.g1{transform:translate(8px,-8px) rotate(2.2deg);opacity:.72}
.hv-stack .hv-ghost.g2{transform:translate(15px,-15px) rotate(4.4deg);opacity:.42}
.hv-stack.left .hv-ghost.g1{transform:translate(-8px,-8px) rotate(-2.2deg)}
.hv-stack.left .hv-ghost.g2{transform:translate(-15px,-15px) rotate(-4.4deg)}
.hv-card{position:relative;z-index:2;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 34px 80px -20px rgba(21,22,43,.30);overflow:hidden}

.hv-tag{display:inline-flex;align-items:stretch;border-radius:8px;overflow:hidden;font-family:var(--eye);text-transform:uppercase;
  letter-spacing:.1em;font-size:10.5px;font-weight:800;line-height:1;box-shadow:0 6px 15px rgba(21,22,43,.20)}
.hv-tag .a{background:var(--indigo);color:#fff;padding:6px 10px;display:flex;align-items:center}
.hv-tag .b{background:#fff;color:var(--indigo);padding:6px 10px;display:flex;align-items:center}

.hv-topic{width:175px;padding:16px 17px 18px;--rot:-1deg;--d:.1s}
.hv-topic .tt{font-family:var(--disp);font-weight:700;font-size:16.5px;line-height:1.18;letter-spacing:-.01em;color:var(--ink);margin:13px 0 3px}
.hv-topic .l{height:10px;border-radius:5px;background:#ECEBF6;margin-top:10px}
.hv-topic .l:nth-of-type(2){width:92%}.hv-topic .l:nth-of-type(3){width:70%}

.hv-arrow{display:flex;flex-direction:column;align-items:center;gap:7px;flex:0 0 auto}
.hv-arrow svg{width:40px;height:40px}
.hv-arrow .fd{display:flex;gap:5px}
.hv-arrow .fd i{width:5px;height:5px;border-radius:50%;background:var(--secondary);animation:hvfd 1.6s ease-in-out infinite}
@keyframes hvfd{0%,100%{opacity:.35}50%{opacity:1;background:var(--indigo)}}
.hv-arrow .fd i:nth-child(2){animation-delay:.2s}.hv-arrow .fd i:nth-child(3){animation-delay:.4s}

.hv-pkg{width:298px;--rot:0deg;--d:0s}
.hv-head{position:absolute;top:13px;left:14px;z-index:3}
.hv-fimg{height:100px;position:relative;overflow:hidden;background:#DDE2EE}
.hv-fimg svg{display:block;width:100%;height:100%}
.hv-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hv-fimg .hv-media{filter:saturate(.66) brightness(1.05) contrast(.96)}
.hv-fimg::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(135deg,rgba(91,79,227,.34),rgba(59,122,247,.18) 58%,rgba(70,215,255,.10));mix-blend-mode:soft-light}
.hv-body{padding:15px 17px 0}
.hv-body h4{font-family:var(--disp);font-weight:800;font-size:16.5px;line-height:1.24;margin:0 0 11px;letter-spacing:-.01em}
.hv-qachip{display:inline-flex;align-items:center;gap:8px;font-family:var(--ui);font-size:11.5px;color:var(--muted);background:#F4F3FC;border:1px solid #EAE7FA;border-radius:999px;padding:5px 11px}
.hv-qachip b{color:var(--indigo);font-weight:700}
.hv-qachip .ck{width:16px;height:16px;border-radius:50%;background:var(--accent);display:inline-flex;align-items:center;justify-content:center;flex:none}
.hv-qachip .ck svg{width:9px;height:9px}
.hv-div{height:1px;background:var(--line-2);margin:14px -17px 12px}
.hv-out{display:flex;flex-direction:column;gap:11px}
.hv-out .row{display:flex;align-items:center;gap:11px}
.hv-out .ic{width:30px;height:30px;border-radius:9px;flex:none;background:#EEEBFD;display:flex;align-items:center;justify-content:center;color:var(--indigo)}
.hv-out .ic svg{width:15px;height:15px;stroke:var(--indigo);fill:none;stroke-width:1.8}
.hv-out .tx{font-family:var(--ui);font-size:12px;font-weight:600;color:var(--ink);line-height:1.2}
.hv-out .tx small{display:block;font-weight:400;color:var(--faint);font-size:10.5px;margin-top:2px}

.hv-strip{display:flex;align-items:center;gap:8px;margin:15px -17px 0;padding:12px 17px;border-top:1px solid var(--line-2);background:#FAFBFE;
  font-family:var(--ui);font-size:11.5px;font-weight:600;color:var(--muted);flex-wrap:wrap}
.hv-strip b{color:var(--ink);font-weight:700}
.hv-strip .sep{color:var(--faint);font-weight:400}
.hv-strip .live{display:inline-flex;align-items:center;gap:7px;color:var(--ink);margin-left:auto}
.hv-strip .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);position:relative;flex:none}
.hv-strip .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);animation:hvpulse 2s ease-out infinite}
@keyframes hvpulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.8);opacity:0}}

/* Stacked (<=900): topic above package, arrow points down. IN/OUT pills stay
   LEFT-aligned (centering would sit the package pill over the person's face). */
@media (max-width:900px){
  .hero-visual{min-height:0}
  .hv-flow{flex-direction:column;gap:22px}
  .hv-arrow svg{transform:rotate(90deg)}
}
/* Smallest phones (<366px): the package card is a fixed 298px and the ghost
   sheets behind it are offset and rotated on top of that, so the fan reached
   ~354px and gave the WHOLE document a horizontal scroll. That is also what
   pulled the walkthrough modal off-center: the modal is position:fixed, so it
   anchors to the layout viewport while the visible area sits scrolled to the
   right of it. Narrower card, tighter fan, no page-wide scroll. */
@media(max-width:365.98px){
  .hv-pkg{width:258px}
  .hv-stack .hv-ghost.g1{transform:translate(6px,-7px) rotate(1.6deg)}
  .hv-stack .hv-ghost.g2{transform:translate(11px,-13px) rotate(3deg)}
  .hv-stack.left .hv-ghost.g1{transform:translate(-6px,-7px) rotate(-1.6deg)}
  .hv-stack.left .hv-ghost.g2{transform:translate(-11px,-13px) rotate(-3deg)}
}

/* Section-head highlight (indigo on light) */
.section-head h2 .hl{color:var(--indigo)}

/* ===== HOW IT WORKS v2 (#how): spine + Build + You receive ===== */
.hiw-spine{max-width:720px;margin:0 auto}
.hiw-stations{position:relative;margin-left:19px;padding-left:30px}
.hiw-stations::before{content:"";position:absolute;left:-1px;top:6px;bottom:14px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--indigo),var(--azure) 55%,var(--accent))}
.hiw-st{position:relative;padding:2px 0 24px}
.hiw-st .hiw-node{position:absolute;left:-49px;top:0;width:38px;height:38px;border-radius:11px;background:var(--indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:800;font-size:16px;border:3px solid #fff;box-shadow:0 6px 16px -6px rgba(91,79,227,.7)}
.hiw-st h3{font-size:20px;font-weight:800;letter-spacing:-.01em}
.hiw-st .hiw-d{font-family:var(--ui);font-size:14.5px;line-height:1.55;color:var(--muted);margin-top:6px}
.hiw-youchip{margin-top:10px;display:inline-flex;align-items:center;gap:8px;font-family:var(--ui);font-size:12.5px;font-weight:600;color:#0e7490;background:#E9FBFF;border:1px solid #C6EEF7;border-radius:999px;padding:6px 12px}
.hiw-youchip .yb{font-family:var(--eye);text-transform:uppercase;letter-spacing:.08em;font-size:9.5px;color:#fff;background:#22B8D6;border-radius:5px;padding:2px 6px}
.hiw-build{margin-top:12px;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:16px 18px}
.hiw-lane{display:grid;grid-template-columns:104px 1fr;gap:16px;align-items:start}
.hiw-lane+.hiw-lane{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2)}
.hiw-ll{font-family:var(--eye);text-transform:uppercase;letter-spacing:.1em;font-size:9.5px;font-weight:600;color:var(--faint);padding-top:6px}
.hiw-chips{display:flex;flex-wrap:wrap;gap:6px}
.hiw-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--ui);font-size:12px;font-weight:600;color:#3a3a4e;background:#fff;border:1px solid var(--line-2);border-radius:8px;padding:5px 10px}
.hiw-chip svg{width:11px;height:11px;fill:none;stroke:var(--indigo);stroke-width:3}
.hiw-buildnote{margin-top:12px;font-family:var(--ui);font-size:11.5px;color:var(--faint)}
.hiw-buildnote b{color:var(--muted);font-weight:700}
.hiw-out{max-width:720px;margin:16px auto 0;display:flex;gap:14px;align-items:flex-start;background:linear-gradient(180deg,#F2FBFE,#fff);border:1px solid #CFEDF7;border-radius:16px;padding:16px 18px}
.hiw-oi{width:40px;height:40px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;background:#DFF6FC}
.hiw-oi svg{width:21px;height:21px;stroke:#0e7490;fill:none;stroke-width:1.8}
.hiw-outlab{font-family:var(--eye);text-transform:uppercase;letter-spacing:.1em;font-size:10px;font-weight:600;color:#0e7490}
.hiw-outt{font-family:var(--disp);font-weight:800;font-size:16px;color:var(--ink);margin-top:3px;letter-spacing:-.01em}
.hiw-outs{font-family:var(--ui);font-size:13.5px;line-height:1.55;color:var(--muted);margin-top:6px}

/* AI question, full-bleed contrasting band */
.hiwai{position:relative;overflow:hidden;background:#101126;color:#fff;padding-block:clamp(44px,6vw,72px)}
.hiwai::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(680px 320px at 88% 130%,rgba(70,215,255,.14),transparent 60%),radial-gradient(560px 300px at 6% -20%,rgba(91,79,227,.28),transparent 55%)}
.hiwai-in{position:relative;max-width:820px;margin:0 auto}
.hiwai-eyebrow{font-family:var(--eye);text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:600;color:var(--accent)}
.hiwai-head{font-family:var(--disp);font-weight:800;font-size:clamp(22px,3vw,30px);line-height:1.2;letter-spacing:-.02em;margin-top:12px;max-width:640px;text-wrap:balance}
.hiwai-split{margin-top:26px;display:grid;grid-template-columns:.78fr 1.22fr;gap:14px 40px}
.hiwai-group.is-ai{padding-right:38px;border-right:1px solid rgba(255,255,255,.12)}
/* 10.5px sat well below the page's own eyebrow standard (12px) and read as fine
   print next to a 30px headline in a full-bleed band. 11.5px closes most of that
   gap while keeping the compact small-caps character the section trades on. */
.hiwai-gl{display:flex;align-items:center;gap:8px;font-family:var(--eye);text-transform:uppercase;letter-spacing:.1em;font-size:11.5px;font-weight:600;margin-bottom:14px}
.hiwai-gl .dot{width:7px;height:7px;border-radius:50%}
.hiwai-group.is-ai .hiwai-gl{color:var(--accent)}
.hiwai-group.is-ai .dot{background:var(--accent)}
.hiwai-group.is-human .hiwai-gl{color:var(--secondary)}
.hiwai-group.is-human .dot{background:#8B7DFF}
.hiwai-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:11px}
.hiwai-group.is-human .hiwai-list{grid-template-columns:1fr 1fr;gap:11px 18px}
.hiwai-list li{position:relative;font-family:var(--ui);font-size:15.5px;line-height:1.45;color:#E4E7F4;padding-left:17px}
.hiwai-list li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.4)}
.hiwai-punch{margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-family:var(--disp);font-weight:700;font-size:clamp(15px,2vw,17px);letter-spacing:-.01em;line-height:1.4}
.hiwai-punch .hl{color:var(--accent)}
@media (max-width:720px){
  .hiw-lane{grid-template-columns:1fr;gap:8px}
  .hiw-st h3{font-size:18px}
  .hiwai-split{grid-template-columns:1fr;gap:22px}
  .hiwai-group.is-ai{padding-right:0;border-right:none}
}
@media (max-width:389.98px){
  .hiw-stations{margin-left:16px;padding-left:26px}
  .hiw-st .hiw-node{left:-44px;width:34px;height:34px;font-size:15px}
  .hiwai-group.is-human .hiwai-list{grid-template-columns:1fr}
}
/* Wrenfield (health): real client logos. Placed at the end of the file, after the
   placeholder-gradient brand rules, so equal-specificity selectors win by source order. */
.wt-panel[data-brand="health"] .wt-dot,
.wt-panel[data-brand="health"] .serp-fav,
.wt-panel[data-brand="health"] .gad-fav{background:url(../logos/wrenfield-app-icon.svg?v=20261011) center/cover no-repeat}
.wt-panel[data-brand="health"] .av-fb,
.wt-panel[data-brand="health"] .av-ig i,
.wt-panel[data-brand="health"] .mread .fr .av{background:url(../logos/wrenfield-avatar.svg?v=20261011) center/cover no-repeat}

/* ============================================================
   Case-study header (Overview, step 1) + Examples card white logo
   ============================================================ */
.wt-case{border:1px solid var(--line);border-radius:20px;overflow:hidden;display:grid;grid-template-columns:minmax(280px,.84fr) 1.16fr;background:#fff}
.wt-idtile{position:relative;overflow:hidden;isolation:isolate;color:#fff;padding:38px 30px;min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:22px}
.wt-panel[data-brand="health"] .wt-idtile{background:radial-gradient(130% 100% at 82% 8%,rgba(127,217,192,.24),transparent 55%),linear-gradient(158deg,#0E7A67,#0C6E5D 42%,#084C40 82%,#0A2620)}
.wt-panel[data-brand="legal"] .wt-idtile{background:radial-gradient(130% 100% at 82% 8%,rgba(198,160,92,.16),transparent 55%),linear-gradient(158deg,#2C3F63,#1D2A42 44%,#151E38 82%,#0E1430)}
.wt-panel[data-brand="hotel"] .wt-idtile{background:radial-gradient(130% 100% at 82% 8%,rgba(230,169,60,.16),transparent 55%),linear-gradient(158deg,#C9603A,#B5502F 44%,#6E3220 82%,#2A1F1A)}
.wt-idtile .wt-wm{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.wt-idtile .wt-wm img{position:absolute;max-width:none;width:162%;left:50%;transform:translateX(-50%);bottom:-6%;opacity:.06}
.wt-plate{background:#F4F8F5;border-radius:22px;padding:22px 30px;display:inline-flex;box-shadow:0 16px 36px rgba(8,20,16,.34)}
.wt-plate img{width:146px;height:auto;display:block}
.wt-idname{display:flex;flex-direction:column;gap:3px}
.wt-idname b{font-family:var(--disp);font-weight:800;font-size:23px;letter-spacing:-.01em;line-height:1.05}
.wt-idname span{font-family:var(--ui);font-weight:500;font-size:13px;color:rgba(255,255,255,.82)}
.wt-idtag{font-family:var(--eye);text-transform:uppercase;letter-spacing:.19em;font-size:10.5px;font-weight:600;color:rgba(255,255,255,.9);display:inline-flex;align-items:center;gap:9px}
.wt-idtag:empty{display:none}
.wt-idtag::before,.wt-idtag::after{content:"";width:16px;height:1px;background:rgba(255,255,255,.4)}
.wt-panel[data-brand="health"] .wt-idtag{color:#7FD9C0}
.wt-panel[data-brand="health"] .wt-idtag::before,.wt-panel[data-brand="health"] .wt-idtag::after{background:rgba(127,217,192,.5)}
.wt-caseinfo{padding:32px 34px;display:flex;flex-direction:column}
.wt-eyerow{display:flex;align-items:center;gap:11px;margin-bottom:14px;flex-wrap:wrap}
.wt-eyebrow{font-family:var(--eye);text-transform:uppercase;letter-spacing:.15em;font-size:11px;font-weight:600;color:var(--indigo);display:inline-flex;align-items:center;gap:8px}
.wt-eyebrow .bar{width:18px;height:2px;border-radius:2px;background:var(--indigo)}
.wt-nichepill{font-family:var(--ui);font-weight:600;font-size:11px;color:var(--support);background:#F1F0FF;border:1px solid #E4E1FF;padding:4px 10px;border-radius:999px}
.wt-casetitle{font-family:var(--disp);font-weight:800;font-size:clamp(21px,2.5vw,27px);line-height:1.16;letter-spacing:-.025em;color:var(--ink);margin:0 0 12px;text-wrap:balance}
/* The case-study intro and the strategy note are read rather than skimmed, so both
   carry paragraph breaks. The type stays on the container and the paragraphs only
   add the gap between them. */
.wt-casesup{font-family:var(--ui);font-size:14.5px;line-height:1.62;color:var(--muted)}
.wt-casesup p{margin:0}
.wt-casesup p + p{margin-top:11px}
.wt-facets{margin-top:22px;border-top:1px solid var(--line);display:flex;flex-direction:column}
.wt-facet{padding:16px 0;border-bottom:1px solid var(--line-2)}
.wt-facet:last-child{border-bottom:0;padding-bottom:0}
.wt-flbl{font-family:var(--eye);text-transform:uppercase;letter-spacing:.11em;font-size:10px;font-weight:600;color:var(--faint);margin-bottom:7px;display:flex;align-items:center;gap:8px}
.wt-flbl .ic{width:15px;height:15px;color:var(--indigo);flex:none}
.wt-facet p{font-family:var(--ui);font-size:13.5px;line-height:1.6;color:var(--ink);margin:0}
.wt-facet .wt-fbody p + p{margin-top:9px}
.wt-facet:first-child p{color:#33344a}
/* The Examples list card carries no brand mark (removed by Tarsis, 2026-08-04: three marks
   side by side read as clutter). Marks are internal to the walkthrough modal. */
@media (max-width:760px){
  .wt-case{grid-template-columns:1fr}
  .wt-idtile{min-height:260px;gap:18px}
  .wt-idtile .wt-wm img{max-width:none;width:195%;left:50%;transform:translateX(-50%);bottom:-6%;opacity:.045}
}

/* Marrowstone (legal): the client's own palette, Harbor Navy #1D2A42 with a Beacon Gold
   #C6A05C accent and Warm Ivory #F5F2EA paper. The icon and the avatar carry the lighthouse in its
   reverse (ivory body, gold lantern) cut, the one the brand ships for dark grounds. Placed at the
   end, like the Wrenfield block, so the equal-specificity brand rules win by source order. */
.wt-panel[data-brand="legal"] .wt-dot,
.wt-panel[data-brand="legal"] .serp-fav,
.wt-panel[data-brand="legal"] .gad-fav{background:url(../logos/marrowstone-app-icon.svg?v=20261011) center/cover no-repeat}
.wt-panel[data-brand="legal"] .av-fb,
.wt-panel[data-brand="legal"] .av-ig i,
.wt-panel[data-brand="legal"] .mread .fr .av{background:url(../logos/marrowstone-avatar.svg?v=20261011) center/cover no-repeat}
.wt-panel[data-brand="legal"] .wt-idtag{color:#C6A05C}
.wt-panel[data-brand="legal"] .wt-idtag::before,
.wt-panel[data-brand="legal"] .wt-idtag::after{background:rgba(198,160,92,.5)}
.wt-panel[data-brand="legal"] .wt-plate{background:#F5F2EA}
/* The lighthouse is upright and near-square (699x669), so the shared plate size (146px, tuned for
   the 2.13:1 Wrenfield mark) would run it off the plate. 96px keeps the same optical weight. */
.wt-panel[data-brand="legal"] .wt-plate img{width:96px}
/* Watermark: the lighthouse is an upright, near-square subject (699x669), so the shared framing
   (width 162%, centered, bottom-anchored) would blow it up into a wall of navy. Marrowstone's own
   framing instead: big, anchored to the LOWER RIGHT corner, running off the right and the bottom so
   the beacon reads as a crest rather than a logo. Every brand tile gets its own size and position.
   The size and both offsets are in PIXELS, not percentages, on purpose: the tile is a grid cell
   whose width and height both follow the text column, so a percentage framing re-crops the mark at
   every viewport width. Fixed pixels pin it to the corner and it never moves. */
.wt-panel[data-brand="legal"] .wt-idtile .wt-wm img{max-width:none;width:720px;height:auto;left:auto;right:-363px;top:auto;bottom:-30px;transform:none;opacity:.05}
@media (max-width:760px){
  /* Stacked tile: short and wide, so the mark is smaller and pushed further out. About half of the
     lighthouse stays inside, the rest runs off the right edge. Pixels here too, same reason. */
  .wt-panel[data-brand="legal"] .wt-idtile .wt-wm img{max-width:none;width:330px;height:auto;left:auto;right:-150px;top:auto;bottom:-30px;transform:none;opacity:.075}
}

/* Halloway (hotel): the client's own palette, Terracotta #B5502F into Ink Espresso #2A1F1A with a
   Golden Ochre #E6A93C accent on Paper Cream #FBF4E9. The Threshold H monogram is SQUARE, unlike the
   landscape Wrenfield mark, so the plate and the watermark need their own sizing: the shared
   .wt-plate img{width:146px} and .wt-wm img{width:162%} are tuned for a 2.13:1 shape and would
   overflow the tile here. Placed at the end, like the other brand blocks, so equal-specificity
   rules win by source order. */
.wt-panel[data-brand="hotel"] .wt-dot,
.wt-panel[data-brand="hotel"] .serp-fav,
.wt-panel[data-brand="hotel"] .gad-fav{background:url(../logos/halloway-app-icon.svg?v=20261011) center/cover no-repeat}
.wt-panel[data-brand="hotel"] .av-fb,
.wt-panel[data-brand="hotel"] .av-ig i,
.wt-panel[data-brand="hotel"] .mread .fr .av{background:url(../logos/halloway-avatar.svg?v=20261011) center/cover no-repeat}
.wt-panel[data-brand="hotel"] .wt-idtile{background:radial-gradient(130% 100% at 82% 8%,rgba(230,169,60,.16),transparent 55%),linear-gradient(158deg,#C9603A,#B5502F 44%,#6E3220 82%,#2A1F1A)}
.wt-panel[data-brand="hotel"] .wt-idtag{color:#E6A93C}
.wt-panel[data-brand="hotel"] .wt-idtag::before,
.wt-panel[data-brand="hotel"] .wt-idtag::after{background:rgba(230,169,60,.5)}
.wt-panel[data-brand="hotel"] .wt-plate{background:#FBF4E9}
.wt-panel[data-brand="hotel"] .wt-plate img{width:86px}
/* Watermark: the Threshold H runs wide enough that its verticals leave the tile
   on both sides, and its horizontal arm crosses the logo plate. That needs the
   mark centered on the PLATE, not on the tile, so it is anchored to the tile
   center and pulled up by the fixed distance between the two (the plate sits
   above the name and the tagline in a centered column, so that distance is a
   constant 46 to 50px at every width, not a percentage). Width 250% and left 68%
   are the framing Tarsis approved: the composition is deliberately off-center,
   one vertical inside the tile on the left, the arm running through the plate. */
.wt-panel[data-brand="hotel"] .wt-idtile .wt-wm img{max-width:none;width:250%;left:68%;top:50%;bottom:auto;transform:translate(-50%,calc(-50% - 50px));opacity:.07}
.outrow.hotel .ob-brand{background:linear-gradient(150deg,#B5502F,#2A1F1A)}
@media (max-width:760px){
  /* Same framing on the stacked tile. Only the pull-up changes, because there the
     plate sits 46px above the tile center instead of 50. */
  .wt-panel[data-brand="hotel"] .wt-idtile .wt-wm img{max-width:none;width:250%;left:68%;top:50%;bottom:auto;transform:translate(-50%,calc(-50% - 46px));opacity:.07}
}


/* =====================================================================
   EXAMPLES MODAL, step 2 (Distribution) and step 7 (Analyst view), 2026-09-30.
   Step 2: ONE TOPIC | IN (the hero's own card and brief, w3bc_samples() 'topic') wired to
   PACKAGE | OUT (What you publish, rows unchanged), which STANDS on a light base: the
   strategy layer underneath. fx- namespace. The port sits outside the clipped card so it
   is always a whole circle. The entrance (.fx.play) runs once per opening of the step, in reading order: the base rises,
   the topic comes in, the package lands on the base, then the connector lights up.
   Step 7: the strategy file of the piece as a short report, rx- namespace, filled from the
   exported package (content/data/{key}.json, "analyst", adw_387/db/export-samples.php).
   The previous ov-col.strategy and an-* rules stay below unused, by the additive rule.
   ===================================================================== */

.fx{position:relative;padding-top:6px}
.fx-stage{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,236px) minmax(0,1fr);column-gap:104px;align-items:end;padding:0 8%;margin-bottom:-17px}
.fx-flow{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.fx-flow path{fill:none;stroke:url(#fxramp);stroke-width:1.5;stroke-dasharray:2 6;stroke-linecap:round}
.fx-flow .dot{fill:var(--accent);filter:drop-shadow(0 0 5px rgba(70,215,255,.85))}

.fx-topic{position:relative;z-index:2;align-self:center;margin-bottom:58px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 16px 16px;
  box-shadow:0 1px 2px rgba(21,22,43,.05),0 22px 44px -18px rgba(21,22,43,.22)}
.fx-field{margin-top:14px;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line-2);border-radius:10px;padding:12px 12px;min-height:66px}
.fx-field svg{width:15px;height:15px;flex:none;color:var(--faint)}
.fx-typed{font-family:var(--disp);font-weight:700;font-size:15px;line-height:1.32;letter-spacing:-.01em;color:var(--ink)}
.fx-node{position:absolute;right:-5px;top:50%;margin-top:-5px;width:10px;height:10px;border-radius:50%;background:var(--indigo);box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(91,79,227,.22)}

.fx-pkg{position:relative;z-index:3}
.fx-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:0 1px 2px rgba(21,22,43,.06),0 16px 34px -14px rgba(21,22,43,.20)}
.fx-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px 12px 18px;background:#FBFBFE;border-bottom:1px solid var(--line-2)}
.fx-lbl{font-family:var(--eye);text-transform:uppercase;letter-spacing:.11em;font-size:10.5px;font-weight:600;color:var(--indigo);white-space:nowrap}
.fx-card .ov-item .ico{background:var(--indigo);color:#fff}
/* the port sits OUTSIDE the clipped card, so it is always a whole circle */
.fx-port{position:absolute;left:-6px;top:96px;width:12px;height:12px;border-radius:50%;background:#fff;border:1.5px solid var(--indigo);
  box-shadow:0 0 0 4px rgba(91,79,227,.10);z-index:5;transition:box-shadow .35s ease}
.fx-port.hit{box-shadow:0 0 0 7px rgba(70,215,255,.24)}
.fx-contact{position:absolute;left:5%;right:5%;bottom:-9px;height:18px;border-radius:50%;background:radial-gradient(closest-side,rgba(21,22,43,.30),rgba(21,22,43,0));filter:blur(2px);z-index:-1}

/* the foundation: a shallow top face (where the package stands), a crisp
   front edge in the brand ramp, and the strategy layer on its face */
.fx-base{position:relative;z-index:1}
.fx-top{position:relative;height:34px;clip-path:polygon(2.4% 0,97.6% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,#E3E2F5 0%,#EFEEFA 100%)}
.fx-top::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(91,79,227,.22) .8px,transparent 1.1px);background-size:12px 9px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000);mask-image:linear-gradient(180deg,transparent,#000)}
.fx-front{position:relative;background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 22px 22px;padding:26px clamp(20px,3.4vw,36px) 20px;
  box-shadow:0 30px 60px -34px rgba(47,42,118,.30)}
.fx-front::before{content:"";position:absolute;left:-1px;right:-1px;top:0;height:1.5px;background:linear-gradient(90deg,var(--indigo),var(--azure) 52%,var(--accent))}
.fx-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--eye);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--indigo)}
.fx-eyebrow .bar{width:22px;height:3px;border-radius:2px;background:var(--accent)}
.fx-list{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:36px}
.fx-row{grid-column:span 2}
.fx-row{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid var(--line-2);min-width:0}
.fx-row.lead{grid-column:span 3;gap:14px;padding:0 0 24px;border-top:0}
.fx-row.lead .i{width:36px;height:36px;border-radius:10px;background:#F1F0FE;margin-top:0}
.fx-row.lead .i svg{width:18px;height:18px}
.fx-row.lead.hi .i{background:var(--accent);border-radius:10px}
.fx-row.lead.hi .i svg{width:17px;height:17px}
.fx-row.lead .t{font-size:17px;line-height:1.28;letter-spacing:-.01em}
.fx-row.lead .s{font-size:13px;margin-top:4px;max-width:36ch}
.fx-row .i{width:20px;height:20px;flex:none;display:grid;place-items:center;color:var(--indigo);margin-top:-1px}
.fx-row .i svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fx-row .t{font-family:var(--disp);font-weight:700;font-size:14px;line-height:1.3;color:var(--ink)}
.fx-row .s{font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:2px}
.fx-row.hi .i{background:var(--accent);color:#0a3a44;border-radius:6px}
.fx-row.hi .i svg{width:13px;height:13px}
.fx-foot{margin-top:4px;padding-top:14px;border-top:1px solid var(--line-2);display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.fx-foot b{color:var(--indigo);font-weight:600}

.fx.play .fx-base{animation:fxUp .7s cubic-bezier(.22,.8,.26,1) both}
.fx.play .fx-pkg{animation:fxSettle .7s .55s cubic-bezier(.22,.8,.26,1) both}
.fx.play .fx-contact{animation:fxShadow .7s .55s cubic-bezier(.22,.8,.26,1) both}
.fx.play .fx-topic{animation:fxIn .6s .15s cubic-bezier(.22,.8,.26,1) both}
.fx.play .fx-flow{animation:fxFade .5s 1.05s ease both}
@keyframes fxUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fxSettle{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes fxShadow{from{opacity:0;transform:scaleX(.7)}to{opacity:1;transform:none}}
@keyframes fxIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}

@media (max-width:860px){
  .fx-stage{grid-template-columns:minmax(0,1fr);row-gap:58px;padding:0 5%;margin-bottom:-15px}
  .fx-topic{margin:0;width:min(100%,300px);justify-self:center;align-self:start}
  .fx-node{right:auto;left:50%;top:auto;bottom:-5px;margin:0 0 0 -5px}
  .fx-port{left:50%;top:-6px;margin-left:-6px}
  .fx-top{height:28px;clip-path:polygon(3% 0,97% 0,100% 100%,0 100%)}
  .fx-list{grid-template-columns:minmax(0,1fr)}
  .fx-row,.fx-row.lead{grid-column:auto}
  .fx-row.lead{padding-bottom:18px}
  .fx-row.lead+.fx-row.lead{border-top:1px solid var(--line-2);padding-top:18px}
  .fx-row.lead .t{font-size:16px}
}
@media (max-width:480px){.fx-head{flex-wrap:wrap;row-gap:8px}}
.fx-tt::after{content:"\2060";border-right:2px solid var(--indigo);margin-left:1px;animation:fxblink 1.05s steps(1) infinite}
@keyframes fxblink{50%{border-right-color:transparent}}
@keyframes fxFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.fx.play *{animation:none!important}.fx-tt::after{animation:none}}
/* ---------- ANALYST VIEW v2: a strategy report, not a wall of cards ---------- */
.rx{display:grid;gap:18px}
.rx-panel{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 1px 2px rgba(21,22,43,.04),0 18px 40px -28px rgba(21,22,43,.22);overflow:hidden;min-width:0}
.rx-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 20px;padding:22px 28px 0}
.rx-eye{font-family:var(--eye);text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;font-weight:600;color:var(--indigo)}
.rx-title{font-family:var(--disp);font-weight:800;font-size:19px;line-height:1.25;letter-spacing:-.015em;margin:6px 0 0;text-wrap:balance}
.rx-head>div:first-child{flex:1 1 280px;min-width:0}
.rx-head>.rx-meta,.rx-head>.rx-tier{flex:none}
.rx-meta{font-size:12.5px;color:var(--muted);padding-bottom:2px}
.rx-meta b{color:var(--ink);font-weight:600}

/* plan metrics */
.rx-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:22px 0 0;border-top:1px solid var(--line-2)}
.rx-m{padding:20px 22px 22px 28px;border-left:1px solid var(--line-2);min-width:0}
.rx-m:first-child{border-left:0}
.rx-n{font-family:var(--disp);font-weight:800;font-size:30px;line-height:1;letter-spacing:-.025em;color:var(--ink);font-variant-numeric:tabular-nums}
.rx-n small{font-size:17px;font-weight:700;color:var(--faint);letter-spacing:-.01em}
.rx-l{font-size:12.5px;line-height:1.45;color:var(--ink);font-weight:600;margin-top:9px}
.rx-s{font-size:12px;line-height:1.45;color:var(--muted);margin-top:3px}
.rx-bar{height:4px;border-radius:4px;background:var(--line-2);margin-top:12px;overflow:hidden}
.rx-bar i{display:block;height:100%;border-radius:4px;background:var(--indigo)}
.rx-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 28px;padding:14px 28px;background:#FBFBFE;border-top:1px solid var(--line-2);font-size:12.5px;color:var(--muted)}
.rx-foot b{color:var(--ink);font-weight:600}
.rx-where{display:flex;flex-wrap:wrap;gap:6px 22px}
.rx-where span{white-space:nowrap}
.rx-where em{font-style:normal;color:var(--faint);margin-right:6px}

/* this piece: keyword + its 12 months */
.rx-kw{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);border-top:1px solid var(--line-2);margin-top:22px}
.rx-kw>div{padding:22px 28px 24px;min-width:0}
.rx-kw>div+div{border-left:1px solid var(--line-2)}
.rx-small{font-size:11.5px;color:var(--faint)}
.rx-term{font-family:var(--disp);font-weight:800;font-size:22px;line-height:1.25;letter-spacing:-.02em;margin-top:6px;text-wrap:balance}
.rx-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}
.rx-fv{font-family:var(--disp);font-weight:800;font-size:20px;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rx-fv small{font-size:13px;color:var(--faint);font-weight:700}
.rx-fl{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.35}
.rx-meter{position:relative;height:4px;border-radius:4px;background:var(--line-2);margin-top:9px}
.rx-meter .zone{position:absolute;left:0;top:0;bottom:0;width:20%;border-radius:4px 0 0 4px;background:rgba(70,215,255,.35)}
.rx-meter .val{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--indigo);box-shadow:0 0 0 2px #fff}
.rx-sec{margin-top:18px;padding-top:14px;border-top:1px solid var(--line-2);font-size:12.5px;color:var(--muted)}
.rx-sec b{color:var(--ink);font-weight:600}
.rx-spark{position:relative;margin-top:10px}
.rx-spark svg{display:block;width:100%;height:96px;overflow:visible}
.rx-spark .ln{fill:none;stroke:var(--indigo);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.rx-spark .ar{fill:url(#rxarea)}
.rx-spark .avg{stroke:var(--faint);stroke-width:1;stroke-dasharray:3 4}
.rx-spark .end{fill:var(--indigo);stroke:#fff;stroke-width:2}
.rx-spark .hit{fill:transparent;cursor:crosshair}
.rx-spark .cur{stroke:var(--line);stroke-width:1}
.rx-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--faint);margin-top:6px;font-variant-numeric:tabular-nums}
.rx-tip{position:absolute;top:-6px;transform:translate(-50%,-100%);background:var(--ink);color:#fff;font-size:11.5px;line-height:1.3;padding:5px 8px;border-radius:7px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s}
.rx-tip b{font-weight:700}
.rx-serp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2)}
.rx-serp .v{font-family:var(--disp);font-weight:800;font-size:17px;font-variant-numeric:tabular-nums}
.rx-serp .k{font-size:11.5px;color:var(--muted);line-height:1.35;margin-top:3px}

/* competitor gap */
.rx-gap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:0;margin-top:20px;border-top:1px solid var(--line-2)}
.rx-rivals{list-style:none;margin:0;padding:6px 28px 14px}
.rx-rivals li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:8px;padding:14px 0;border-top:1px solid var(--line-2)}
.rx-rivals li:first-child{border-top:0}
.rx-rank{font-family:var(--disp);font-weight:800;font-size:20px;line-height:1.1;letter-spacing:-.02em;color:var(--secondary);font-variant-numeric:tabular-nums}
.rx-rank small{display:block;font-family:var(--ui);font-size:10.5px;font-weight:500;letter-spacing:0;color:var(--faint);margin-top:3px}
.rx-rivals p{font-size:13px;line-height:1.55;color:var(--ink)}
.rx-verdict{background:linear-gradient(160deg,#1E1F45,var(--ink) 70%);color:#fff;padding:24px 26px;display:flex;flex-direction:column;justify-content:center}
.rx-verdict .wl{display:flex;align-items:center;gap:8px;font-family:var(--eye);text-transform:uppercase;letter-spacing:.12em;font-size:10px;font-weight:600;color:var(--accent)}
.rx-verdict .wl svg{width:15px;height:15px}
.rx-verdict p{margin-top:12px;font-family:var(--disp);font-weight:700;font-size:16px;line-height:1.5;letter-spacing:-.005em}
.rx-tier{font-family:var(--eye);font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--support);background:#F1F0FE;border-radius:999px;padding:4px 9px;white-space:nowrap}

/* the rest of the file, as a spec list */
.rx-spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:16px;border-top:1px solid var(--line-2)}
.rx-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:14px;align-items:start;padding:18px 28px;border-top:1px solid var(--line-2);min-width:0}
.rx-row:nth-child(-n+2){border-top:0}
.rx-row:nth-child(even){border-left:1px solid var(--line-2)}
.rx-row.full{grid-column:1/-1;border-left:0}
.rx-row.full+.rx-row{border-top:1px solid var(--line-2)}
.rx-row.full~.rx-row:nth-child(even){border-left:0}
.rx-row.full~.rx-row:nth-child(odd){border-left:1px solid var(--line-2)}
.rx-row .i{color:var(--indigo);margin-top:1px}
.rx-row .i svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.rx-row .t{font-family:var(--disp);font-weight:700;font-size:14.5px;line-height:1.3}
.rx-row .d{font-size:13px;line-height:1.55;color:var(--muted);margin-top:4px}
.rx-row .d b{color:var(--ink);font-weight:600}
.rx-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.rx-pills span{font-size:11.5px;font-weight:500;color:var(--support);background:#F6F5FF;border:1px solid #E6E3FB;border-radius:999px;padding:4px 10px;white-space:nowrap}

/* the honest footnote */
.rx-note{display:flex;align-items:flex-start;justify-content:center;gap:10px;max-width:640px;margin:8px auto 0;font-size:13px;line-height:1.6;color:var(--muted);text-align:left}
.rx-note svg{width:16px;height:16px;flex:none;color:var(--indigo);margin-top:3px}
.rx-note b{color:var(--ink);font-weight:600}

@media (max-width:980px){
  .rx-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rx-m:nth-child(3){border-left:0}
  .rx-m:nth-child(n+3){border-top:1px solid var(--line-2)}
  .rx-kw,.rx-gap{grid-template-columns:minmax(0,1fr)}
  .rx-kw>div+div{border-left:0;border-top:1px solid var(--line-2)}
  .rx-spec{grid-template-columns:minmax(0,1fr)}
  .rx-row,.rx-row:nth-child(even),.rx-row.full~.rx-row:nth-child(odd),.rx-row.full~.rx-row:nth-child(even){border-left:0;border-top:1px solid var(--line-2)}
  .rx-row:first-child{border-top:0}
}
@media (max-width:620px){
  .rx-head>.rx-meta{flex:1 1 100%}
  .rx-head,.rx-foot{padding-left:18px;padding-right:18px}
  .rx-m{padding:16px 16px 18px 18px}
  .rx-n{font-size:25px}
  .rx-kw>div,.rx-rivals{padding-left:18px;padding-right:18px}
  .rx-row{padding:16px 18px;grid-template-columns:20px minmax(0,1fr)}
  .rx-row .rx-tier{grid-column:2;justify-self:start}
  .rx-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rx-serp{grid-template-columns:minmax(0,1fr)}
}

/* v2 cleanup: one voice per panel (the eyebrow), fewer bolds, a smaller scale */
.rx-head{padding:20px 28px 0;align-items:center}
.rx-eye{margin:0;font-size:11px;letter-spacing:.12em}
.rx-metrics,.rx-kw,.rx-gap{margin-top:16px}
.rx-spec{margin-top:14px}
.rx-n{font-size:26px}
.rx-n small{font-size:15px;font-weight:600}
.rx-l{font-weight:500;color:#3A3D55;margin-top:8px}
.rx-foot b,.rx-where b{font-weight:500}
.rx-term{font-size:19px;font-weight:700;letter-spacing:-.015em}
.rx-fv{font-size:17px;font-weight:700}
.rx-fv[style]{font-size:15px!important;font-weight:600}
.rx-sec b{font-weight:500}
.rx-serp .v{font-size:16px;font-weight:700}
.rx-rank{font-size:15px;font-weight:700}
.rx-rivals p{font-size:13px}
.rx-verdict p{font-size:15px;font-weight:600;line-height:1.55}
.rx-row .t{font-size:14px;font-weight:600}
.rx-note .lead{color:var(--ink)}
.rx-tip b{font-weight:700}
.rx-fv-word{font-size:15px;font-weight:600;padding-top:3px}
.rx-kw .rx-where{margin-top:10px;font-size:12.5px;color:var(--muted)}
.rx-kw .rx-where b{color:var(--ink)}

/* ===== The 70-second tour (explainer video, 2026-10-09) ===== */
.xp{position:relative;padding-top:clamp(64px,8vw,104px);background:#fff;--xp-ov:0px}
.xp::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.xp-head{max-width:720px;margin:0 auto;text-align:center}
.xp-head h2{font-size:clamp(30px,4.4vw,50px);font-weight:800;margin:16px 0 0;letter-spacing:-.02em}
.xp-head p{font-family:var(--ui);font-size:clamp(16px,2vw,19px);line-height:1.6;color:var(--muted);margin:18px auto 0;max-width:560px}
.xp-stage{position:relative;margin-top:clamp(36px,4.5vw,56px)}
.xp-stage::before{content:"";position:absolute;left:8%;right:8%;top:14%;bottom:-6%;pointer-events:none;z-index:0;
  background:radial-gradient(50% 60% at 30% 40%,rgba(91,79,227,.30),transparent 70%),radial-gradient(45% 55% at 75% 65%,rgba(70,215,255,.22),transparent 70%);filter:blur(40px)}
.xp-frame{position:relative;z-index:1;margin:0 auto;max-width:1080px;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;
  background:radial-gradient(60% 70% at 25% 30%,rgba(91,79,227,.16),transparent 70%),radial-gradient(55% 60% at 80% 75%,rgba(70,215,255,.16),transparent 70%),#F1F2FC;cursor:pointer;isolation:isolate;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 0 0 1px rgba(91,79,227,.14),0 30px 80px -20px rgba(21,22,43,.35),0 60px 140px -40px rgba(47,42,118,.35);
  transform-origin:50% 100%}
/* Entrance, the blog's image reveal: the frame rises and settles while the picture inside eases
   back from a slight zoom. Transform only (compositor). Gated by .reveal, so no JS or reduced motion
   shows it in place. */
.xp-stage.reveal{opacity:1;transform:none;transition:none}
.xp-stage.reveal .xp-frame{transform:translateY(72px) scale(.94);transition:transform 1.15s cubic-bezier(.2,.7,.2,1)}
.xp-stage.reveal.in .xp-frame{transform:none}
.xp-stage.reveal .xp-poster,.xp-stage.reveal .xp-video{transform:scale(1.12);transition:opacity .5s ease,transform 1.5s cubic-bezier(.2,.7,.2,1)}
.xp-stage.reveal.in .xp-poster,.xp-stage.reveal.in .xp-video{transform:none}
.xp-poster,.xp-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.xp-poster{opacity:0;transition:opacity .5s ease}.xp-poster.is-in{opacity:1}
.xp-video{opacity:0;transition:opacity .6s ease}
.xp-frame.is-teasing .xp-video,.xp-frame.is-playing .xp-video{opacity:1}
.xp-frame.is-playing{cursor:auto}
/* Play: indigo disc (the action of this view; amber stays for the booking CTA), label beneath */
.xp-play{position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  border:0;padding:0;background:radial-gradient(60% 60% at 50% 50%,rgba(21,22,43,.20),rgba(21,22,43,0) 70%);cursor:pointer;color:var(--ink)}
.xp-disc{position:relative;width:clamp(76px,8vw,96px);height:clamp(76px,8vw,96px);border-radius:50%;display:grid;place-items:center;
  background:var(--indigo);color:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.55),0 18px 40px -8px rgba(47,42,118,.6);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.xp-disc::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(70,215,255,.75);opacity:0;animation:xpPulse 2.6s cubic-bezier(.2,.7,.2,1) infinite}
.xp-disc svg{width:38%;height:38%;fill:currentColor} /* the path already sits optically centered (its centroid is the disc center) */
.xp-label{position:absolute;left:50%;top:calc(50% + clamp(76px,8vw,96px) / 2 + 16px);transform:translateX(-50%);display:flex;align-items:baseline;gap:10px;padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.92);
  box-shadow:0 8px 24px -8px rgba(21,22,43,.35);font-family:var(--ui);white-space:nowrap}
.xp-label b{font-family:var(--disp);font-weight:800;font-size:16px;letter-spacing:-.01em}
.xp-label span{font-size:13px;color:var(--muted)}
.xp-frame:hover .xp-disc,.xp-play:focus-visible .xp-disc{transform:scale(1.08);box-shadow:0 0 0 8px rgba(255,255,255,.7),0 22px 50px -8px rgba(47,42,118,.7)}
.xp-play:focus-visible{outline:none}
.xp-play:focus-visible .xp-label{outline:2px solid var(--indigo);outline-offset:3px}
@keyframes xpPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.55);opacity:0}}
.xp-tag{position:absolute;z-index:2;top:16px;left:16px;display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:999px;
  background:rgba(21,22,43,.62);color:#fff;font-family:var(--eye);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  opacity:0;transform:translateY(-4px);transition:opacity .4s,transform .4s;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.xp-frame.is-teasing .xp-tag{opacity:1;transform:none}
.xp-eq{display:inline-flex;align-items:flex-end;gap:2px;height:10px}
.xp-eq i{width:2px;height:100%;background:var(--accent);border-radius:1px;transform-origin:bottom;animation:xpEq 1s ease-in-out infinite}
.xp-eq i:nth-child(2){animation-delay:-.35s}.xp-eq i:nth-child(3){animation-delay:-.7s}
@keyframes xpEq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.xp-frame.is-playing .xp-play,.xp-frame.is-playing .xp-tag{display:none}
/* End: a real booking action over the video's own end card */
.xp-end{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px;text-align:center;
  background:radial-gradient(70% 60% at 50% 0%,rgba(91,79,227,.38),transparent 70%),#15162B;animation:xpIn .45s ease both}
.xp-frame.is-ended .xp-video{visibility:hidden}
.xp-end[hidden]{display:none}
.xp-end-t{font-family:var(--disp);font-weight:800;font-size:clamp(22px,3vw,34px);letter-spacing:-.02em;color:#fff;margin:0}
.xp-end-s{font-family:var(--ui);font-size:clamp(14px,1.5vw,16px);color:#C7CBDB;margin:-10px 0 4px}
.xp-end-a{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center}
.xp-replay{border:0;background:none;color:#C7CBDB;font-family:var(--ui);font-weight:600;font-size:15px;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.xp-replay:hover{color:#fff}
@keyframes xpIn{from{opacity:0}to{opacity:1}}

/* Direction A, "on the seam": the frame straddles the hero and the dark authority band */
.xp--seam,.xp--seam + .authority-band{--xp-ov:clamp(120px,16vw,250px)}
.xp--seam .xp-stage{margin-bottom:calc(var(--xp-ov) * -1)}
.xp--seam + .authority-band{padding-top:calc(var(--xp-ov) + clamp(64px,8vw,104px))}

/* Direction B, "split stage": copy left, frame right */
.xp--split{padding-bottom:clamp(56px,7vw,96px)}
@media (min-width:961px){
  .xp--split .xp-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(36px,4vw,64px);align-items:center}
  .xp--split .xp-head{text-align:left;margin:0}
  .xp--split .xp-head p{margin-left:0}
  .xp--split .xp-stage{margin-top:0}
}

@media (max-width:720px){
  .xp-frame{aspect-ratio:4/5;max-width:520px;border-radius:var(--r-md)}
  .xp--seam,.xp--seam + .authority-band{--xp-ov:96px}
  .xp-label b{font-size:15px}
  .xp-tag{top:auto;bottom:14px;left:14px} /* the 4:5 cut fills its top edge; its bottom is open */
  .xp-end-a{flex-direction:column;gap:14px}
}
@media (prefers-reduced-motion:reduce){
  .xp-disc::after,.xp-eq i{animation:none}
  .xp-frame,.xp-disc{transition:none}
}