/* ==========================================================================
   instlyquote.com — COMPONENTS
   Built against the measured Shoor spec. Homepage only, pending approval.
   Reads everything from tokens.css. Loaded INSTEAD of base.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  background: var(--c-base);
  color: var(--c-para);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;          /* the arcs and bleeds are deliberately over-wide */
}

img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; color: var(--c-display); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--c-link); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--c-grad-a);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--c-display); color: var(--c-base);
  padding: var(--s-2) var(--s-4); font-weight: 600;
}
.skip:focus { left: 0; }

/* ---- layout -------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sec { position: relative; }
.center { text-align: center; }

/* ==========================================================================
   5.1  Nav — transparent band, no rule, no blur
   ========================================================================== */
.nav {
  position: relative; z-index: 20;
  padding-block: var(--s-4) 0;
}
.nav .wrap { display: flex; align-items: center; gap: var(--s-4); }

.brand {
  display: flex; align-items: center; gap: 0.625rem;
  text-decoration: none; color: var(--c-display);
  font-weight: 700; font-size: 1.375rem; letter-spacing: -0.01em;
  margin-right: auto;
}
.brand-lockup {
  /* The official lockup artwork, mark and wordmark together. Reassembling it
     from a mark span plus text put the "ly" in .brand's flex gap and split the
     word. Height is the anchor; the SVG carries its own proportions. */
  height: 56px; width: auto; flex: none;
}
.brand span { color: var(--c-nav); font-weight: 500; }

.nav-links { display: flex; align-items: center; gap: 1.75rem; }
.nav-links a {
  color: var(--c-nav); text-decoration: none;
  font-size: var(--fs-nav); font-weight: 500;
}
.nav-links a:hover { color: var(--c-display); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  font-family: inherit; font-size: var(--fs-btn); font-weight: 600;
  text-decoration: none; white-space: nowrap;
  border-radius: var(--r-pill);
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn--primary {          /* 5.10 — 90deg #672a93 -> #4a53a8 */
  background: var(--g-cta);
  color: #fff;
}
.btn--glass {            /* nav Sign Up / hero secondary — translucent light */
  background: var(--c-glass);
  border-color: var(--c-glass-line);
  color: #d8ddff;
}
.btn--ghost {            /* 5.10 secondary */
  background: var(--c-btn-2);
  border-color: var(--c-glass-line);
  color: #d8ddff;
}
.btn--sm { padding: 0.5rem 1.125rem; font-size: 1.0625rem; }

/* ==========================================================================
   5.2  Announcement bar — full content width, arrow button on the right
   ========================================================================== */
.announce {
  position: relative; z-index: 10;
  display: flex; align-items: center; gap: var(--s-2);
  margin-top: 1.625rem;
  background: var(--c-bar);
  border: 1px solid var(--c-glass-line);
  border-top-color: var(--c-bar-edge);
  border-radius: var(--r-bar);
  padding-left: 1.5rem;
  overflow: hidden;
  font-size: var(--fs-announce);
}
.announce p { padding-block: 0.75rem; color: var(--c-nav); flex: 1 1 auto; }
.announce b { color: var(--c-announce); font-weight: 700; }
.announce .status { vertical-align: 0.1em; margin-right: 0.35rem; }
.announce-go {
  flex: none; align-self: stretch;
  display: grid; place-items: center;
  width: 3.25rem;
  background: var(--c-arrow-btn);
  color: #e4f5ff; text-decoration: none;
  font-size: 1.25rem;
}

/* ==========================================================================
   5.3  Hero
   ========================================================================== */
.hero { position: relative; padding-bottom: var(--s-4); }

/* 6.1a — radial bloom, centre (50%, 220px), ~1280 x 460 */
.hero::before {
  content: "";
  /* full-bleed: the lit band must reach both page edges, not stop inside them */
  position: absolute; top: -120px; left: 50%; transform: translateX(-50%);
  width: 100vw; height: 900px;
  background: var(--g-hero-core), var(--g-hero-body), var(--g-hero-rim);
  /* keep the nav band dark — in the reference the light starts at the
     announcement bar, it does not wash up behind the logo */
  -webkit-mask-image: linear-gradient(to bottom, transparent 8px, #000 60px);
  mask-image: linear-gradient(to bottom, transparent 8px, #000 60px);
  pointer-events: none;
}
/* 6.1b — the ray lattice sits on top of the bloom. VP at (752, 314) in
   artboard-doubled terms, i.e. on the H1's vertical mid-line. */
.hero-rays {
  /* box is 2400x640 with the vertex at (1200, 600); placing top at -346px
     lands that vertex on the headline cap, ~304px down the page */
  position: absolute; top: -346px; left: 50%; transform: translateX(-50%);
  width: 2400px; height: 640px; max-width: none;
  pointer-events: none; z-index: 2;
  mask-image: radial-gradient(ellipse 60% 78% at 50% 88%, #000 40%, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse 60% 78% at 50% 88%, #000 40%, transparent 92%);
}
.hero > .wrap { position: relative; z-index: 5; }

.hero h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-h1);
  margin-top: 3.5rem;             /* was 138px, sized for the removed announcement bar */
  max-width: 23ch;
  margin-inline: auto;
}
.hero h1 .grad {
  display: block;
  background: var(--g-heading);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.cta-row {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: var(--s-2);
}
.cta-row .btn { padding-block: 1rem; }

.trust {
  margin-top: 1.25rem;
  color: var(--c-muted);
  font-size: var(--fs-trust);
}
.trust .sep { color: var(--c-glow); padding-inline: 0.5rem; }

/* 5.3 — product frame, bottom masked not cropped (alpha 1 -> 0) */
.frame {
  position: relative; z-index: 5;
  max-width: 1100px; margin: 2.75rem auto 0;
  border: 1px solid var(--c-chrome-line);
  border-radius: var(--r-frame) var(--r-frame) 0 0;
  background: var(--c-chrome);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 58%, transparent 100%);
  mask-image: linear-gradient(#000 58%, transparent 100%);
}
.frame-bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--c-chrome-line);
}
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot--r { background: #dd6156; } .dot--y { background: #efba51; } .dot--g { background: #79cb6d; }
.frame-url {
  margin-left: 0.75rem; flex: 1 1 auto; max-width: 320px;
  background: #191b26; border-radius: var(--r-pill);
  padding: 0.3rem 0.9rem; font-size: 0.9375rem; color: var(--c-muted);
}
.frame-body { background: var(--c-band-alt); padding: var(--s-4); min-height: 220px; }

/* ==========================================================================
   5.4  Panel bar — real insurer names, not a fake logo wall
   ========================================================================== */
.panelbar { padding-block: var(--s-7); text-align: center; }
.panelbar p { color: var(--c-muted); font-size: 1.375rem; }
.panelbar ul {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.875rem 2.75rem;
  margin-top: var(--s-3);
}
.panelbar li {
  color: var(--c-card-title); font-weight: 600; font-size: 1.375rem;
  opacity: 0.72;
}

/* ==========================================================================
   5.5  Section header — badge, heading, sub
   ========================================================================== */
.badge {
  display: inline-block;
  background: var(--c-pill); border: 1px solid var(--c-pill-line);
  border-radius: var(--r-pill);
  padding: 0.5rem 1.75rem;
  font-size: var(--fs-badge); font-weight: 600;
  letter-spacing: var(--tr-badge); text-transform: uppercase;
  color: var(--c-display);
}
.sec-head { position: relative; z-index: 4; }
.sec-head h2 {
  font-size: var(--fs-h2); line-height: var(--lh-h2);
  margin-top: 0.875rem; max-width: 30ch;
}
.sec-head.center h2 { margin-inline: auto; }
.sec-head .sub {
  margin-top: 0.875rem;
  color: var(--c-muted); font-size: var(--fs-sub); line-height: var(--lh-sub);
  max-width: 60ch;
}
.sec-head.center .sub { margin-inline: auto; }

/* ==========================================================================
   6.2  Circuit / schematic linework
   ========================================================================== */
.circuit {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 1504px; max-width: none; pointer-events: none;
  z-index: 1;
}
.circuit--benefits { top: -60px; }
.circuit--doors    { top: -40px; }

/* ==========================================================================
   Status pills
   ========================================================================== */
.status {
  display: inline-block;
  font-size: 0.875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.2em 0.7em; border-radius: var(--r-pill);
  white-space: nowrap;
}
.status--live    { color: var(--c-live);    background: var(--c-live-bg); }
.status--testing { color: var(--c-testing); background: var(--c-testing-bg); }
.status--build   { color: var(--c-build);   background: var(--c-build-bg); }
.status--next    { color: var(--c-next);    background: var(--c-next-bg); }

/* ==========================================================================
   Spine panel — the "chart panel", 658 a-px wide, full content width
   ========================================================================== */
.spine {
  margin-top: var(--s-4);
  background: linear-gradient(180deg, var(--c-band-alt), var(--c-band));
  border: 1px solid var(--c-card-line);
  border-radius: var(--r-card);
  padding: var(--s-4);
  position: relative; z-index: 4;
}
.spine-grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
}
.spine-node { text-align: center; }
.spine-node b {
  display: block; font-size: 3.5rem; line-height: 1;
  color: var(--c-display); letter-spacing: -0.02em;
}
.spine-node span {
  display: block; margin-top: 0.625rem;
  color: var(--c-muted); font-size: 1.0625rem;
}
.spine-arrow { color: var(--c-glyph); font-size: 1.75rem; }

.fan {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 6px; margin-top: var(--s-5);
}
.fan i {
  display: block; width: 18px; height: 44px; border-radius: 4px;
  background: linear-gradient(180deg, var(--c-tile-indigo), rgba(107,114,255,0.15));
  opacity: 0.55;
}
.fan i:nth-child(3n) { opacity: 0.85; }
.spine-caption {
  margin-top: var(--s-3); text-align: center;
  color: var(--c-muted); font-size: 1.0625rem;
}

/* ==========================================================================
   5.6  Feature cards — 3-up, 206 x 111 a-px, hairline, inner rule
   ========================================================================== */
.features {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--s-4);
  position: relative; z-index: 4;
}
.feature {
  background: var(--c-card);
  border: 1px solid var(--c-card-line);
  border-radius: var(--r-feature);
  padding: var(--s-3) var(--s-4);
}
/* icon tile and title sit on ONE row — see reference */
.feature-head { display: flex; align-items: center; gap: 1rem; }
.tile {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  background: rgba(100,104,164,0.18);
  border: 1px solid rgba(146,131,179,0.22);
  color: var(--c-glyph); font-size: 0.9375rem; font-weight: 700;
}
.feature h3 {
  font-size: var(--fs-card-t); font-weight: 600; color: var(--c-card-title);
}
.feature hr {
  border: 0; border-top: 1px solid var(--c-card-line);
  margin: 0.875rem 0;
}
.feature p { color: var(--c-card-body); font-size: var(--fs-card-b); }

/* ==========================================================================
   6.3 / 6.4  Arc transitions + star fields
   ========================================================================== */
.sky {
  position: relative;
  background:
    url("/assets/img/starfield-bright.svg") center bottom / 1504px auto repeat-x,
    linear-gradient(180deg, rgba(5,8,27,0) 0%, #1b2353 55%, #2d2766 100%);
  height: 170px;
  margin-top: var(--s-4);
}
/* Arc 2 — concave trough. Not a separate occluder: the sky's own bottom edge
   dips in the middle (corners curve up), which IS the trough. Sagitta ~56px,
   the spec's 28 a-px doubled. */
.sky--dim {
  background:
    url("/assets/img/starfield-dim.svg") center bottom / 1504px auto repeat-x,
    linear-gradient(180deg, rgba(5,8,27,0) 0%, #161d47 60%, #221f52 100%);
  height: 130px;
  border-radius: 0 0 50% 50% / 0 0 34px 34px;
  overflow: hidden;
  box-shadow: 0 1px 0 0 rgba(180,190,255,0.14);
}
/* the arc itself — an over-wide block that occludes the sky */
.arc {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 2400px; bottom: -1px; height: 240px;
  background: var(--c-base);
  border-radius: 50% 50% 0 0 / 200px 200px 0 0;
  box-shadow: 0 -1px 0 0 rgba(180,190,255,0.22);
}
.arc--concave {
  border-radius: 0 0 50% 50% / 0 0 200px 200px;
  bottom: auto; top: -1px;
  box-shadow: 0 1px 0 0 rgba(180,190,255,0.14);
}

/* ==========================================================================
   5.7  Bento grid — asymmetric, gutter 17 a-px
   ========================================================================== */
.bento {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: var(--s-5);
}
.bento li {
  padding: var(--s-3) var(--s-4);
  background: var(--g-bento);
  border: 1px solid var(--c-bento-line);
  border-radius: var(--r-card);
  padding: var(--s-4);
  display: flex; flex-direction: column;
  grid-column: span 2;
}
.bento .wide { grid-column: span 3; }
.bento-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2); margin-bottom: 0.75rem;
}
.bento h3 { font-size: var(--fs-card-t); font-weight: 600; color: var(--c-display); }
.bento p { color: var(--c-card-body); font-size: var(--fs-card-b); flex: 1 1 auto; }
.bento a {
  margin-top: 1.125rem; font-size: 1.0625rem; font-weight: 600;
  text-decoration: none; color: var(--c-grad-a);
}
.bento a:hover { text-decoration: underline; }
.bento .chip {
  width: 40px; height: 40px; border-radius: 11px; margin-bottom: 1rem;
  display: grid; place-items: center; color: #fff; font-size: 1.0625rem; font-weight: 700;
}
.chip--indigo { background: var(--c-tile-indigo); }
.chip--orchid { background: var(--c-tile-orchid); }
.chip--amber  { background: var(--c-tile-amber); }
.chip--slate  { background: rgba(100,104,164,0.3); color: var(--c-grad-a); }

/* ==========================================================================
   5.8  Timeline — rail with glowing nodes, copy left, visual bleeding right
   ========================================================================== */
.timeline { position: relative; margin-top: var(--s-4); padding-left: 3.25rem; }
.timeline::before {
  content: ""; position: absolute; left: 20px; top: 12px; bottom: 12px;
  width: var(--rail-w); background: var(--c-rail); border-radius: 2px;
}
.step { position: relative; padding-block: 0 var(--s-3); }
.step:last-child { padding-bottom: 0; }
.step::before {              /* node core */
  content: ""; position: absolute; left: -3.25rem; top: 0.65rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(146,131,179,0.22), 0 0 26px 8px rgba(215,104,185,0.35);
}
.step-grid {
  display: grid; grid-template-columns: minmax(0, 46ch) minmax(0, 1fr);
  gap: var(--s-5); align-items: start;
}
.step-label { font-size: var(--fs-card-t); font-weight: 700; color: var(--c-display); }
.step p {
  margin-top: 1rem;
  font-size: var(--fs-para); line-height: var(--lh-para);
  color: var(--c-para); max-width: var(--w-prose); font-weight: 500;
}
.step p .lead { color: var(--c-lead); }
.step ul { margin-top: 1.5rem; }
.step ul li {
  position: relative; padding-left: 1.5rem; margin-bottom: 0.625rem;
  color: var(--c-card-body); font-size: 1.0625rem;
}
.step ul li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--c-glyph);
}
/* 3.7 — the visual bleeds past the right edge */
.step-visual {
  background: var(--g-bento);
  border: 1px solid var(--c-bento-line);
  border-radius: var(--r-card) 0 0 var(--r-card);
  padding: var(--s-3) var(--s-4);
  margin-right: calc(var(--gutter) * -1 - 6vw);
}
.step-visual h4 {
  font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--c-muted); margin-bottom: 1rem;
}
.step-visual .rows { display: grid; gap: 0.625rem; }
.step-visual .row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--c-card-line);
  border-radius: 10px; padding: 0.75rem 1rem;
  font-size: 1.0625rem; color: var(--c-card-title);
}
.step-visual .row span { color: var(--c-muted); font-size: 1rem; }

/* ==========================================================================
   Audience strip
   ========================================================================== */
.audiences {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--s-5);
}
.audiences li {
  border-top: 1px solid var(--c-card-line);
  padding-top: 1.5rem;
}
.audiences h3 { font-size: var(--fs-card-t); font-weight: 600; color: var(--c-card-title); }
.audiences p { margin-top: 0.75rem; color: var(--c-card-body); font-size: var(--fs-card-b); }

/* ==========================================================================
   5.10  Final CTA
   ========================================================================== */
.final { position: relative; padding-block: var(--s-5) var(--s-6); text-align: center; }
.final h2 { font-size: var(--fs-h2-cta); line-height: var(--lh-h2); max-width: 22ch; margin-inline: auto; }
.final .sub { max-width: 54ch; margin-top: 1.75rem; }
.final .todo { max-width: 90ch; margin-inline: auto; }

/* ==========================================================================
   5.11  Footer
   ========================================================================== */
.site-footer { border-top: 1px solid var(--c-rule); padding-block: var(--s-5) var(--s-4); }
.foot-top {
  display: grid; gap: var(--s-5);
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
}
.foot-brand p {
  margin-top: 1.125rem; color: var(--c-foot-link); font-size: var(--fs-foot-l);
  max-width: 42ch;
}
.foot-brand a { color: var(--c-link); }
.site-footer h3 {
  font-size: var(--fs-foot-h); font-weight: 600; color: var(--c-foot-head);
  margin-bottom: 1.0625rem;
}
.site-footer nav li { margin-bottom: 0.875rem; }
.site-footer nav a {
  color: var(--c-foot-link); text-decoration: none; font-size: var(--fs-foot-l);
}
.site-footer nav a:hover { color: var(--c-display); }
.foot-bottom {
  margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid var(--c-card-line);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  align-items: baseline; justify-content: space-between;
}
.foot-bottom p { color: var(--c-copyright); font-size: var(--fs-trust); }
.disclaimer { color: var(--c-muted); font-size: var(--fs-foot-l); max-width: 68ch; }

/* ==========================================================================
   Editorial flags — unresolved facts and unrouted CTAs.
   Loud on purpose. Nothing ships with one of these still rendering.
   ========================================================================== */
.todo {
  border: 1px solid var(--c-todo-line); border-left-width: 4px;
  background: var(--c-todo-bg); color: var(--c-todo);
  border-radius: 12px; padding: var(--s-3) var(--s-4);
  margin-top: var(--s-4);
  text-align: left;
}
.todo b {
  display: block; font-size: 0.875rem; text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 0.625rem;
}
.todo p { font-size: 1.0625rem; }
.todo p + p { margin-top: 0.75rem; }
.todo ul { margin-top: 0.75rem; }
.todo li { position: relative; padding-left: 1.25rem; margin-bottom: 0.375rem; font-size: 1.0625rem; }
.todo li::before { content: "—"; position: absolute; left: 0; }

/* ==========================================================================
   Responsive — the spec is desktop-only, these are ours
   ========================================================================== */
@media (max-width: 1100px) {
  .bento li, .bento .wide { grid-column: span 3; }
  .audiences { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step-grid { grid-template-columns: 1fr; }
  .step-visual { margin-right: calc(var(--gutter) * -1); }
}
@media (max-width: 800px) {
  .nav-links { display: none; }        /* mobile nav not designed yet */
  .features { grid-template-columns: 1fr; }
  .bento li, .bento .wide { grid-column: span 6; }
  .spine-grid { grid-template-columns: 1fr; }
  .spine-arrow { display: none; }
  .audiences, .foot-top { grid-template-columns: 1fr; }
  .timeline { padding-left: 3rem; }
  .step::before { left: -2.6rem; }
  .announce { font-size: 1.125rem; padding-left: 1rem; }
  .sky { height: 240px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ==========================================================================
   REFERENCE-MATCH PASS
   Added after comparing the build against the three reference crops.
   ========================================================================== */

/* 5.3 — the hero CTA is ONE pill containing the field and the button,
   not two separate buttons. */
.cta-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: var(--s-2);
  background: var(--c-input);
  border: 1px solid var(--c-glass-line);
  border-radius: var(--r-pill);
  padding: 0.4375rem 0.4375rem 0.4375rem 1.5rem;
  text-align: left;
}
.cta-pill input {
  background: transparent; border: 0; outline: 0;
  font: inherit; font-size: var(--fs-btn);
  color: var(--c-display); width: 15rem;
}
.cta-pill input::placeholder { color: var(--c-placeholder); }
.cta-pill .btn { padding-block: 0.6875rem; }

.trust a { color: var(--c-link); text-decoration: underline; }

/* 5.3 — fuller browser chrome: traffic lights, tab strip, URL bar */
.frame-tabs {
  display: flex; align-items: center; gap: 0.375rem;
  padding: 0.5rem 1rem 0;
}
.frame-tabs .tab {
  display: flex; align-items: center; gap: 0.4375rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--c-chrome-line);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  padding: 0.4375rem 0.875rem;
  font-size: 0.875rem; color: var(--c-muted);
  white-space: nowrap;
}
.frame-tabs .tab.is-active { background: var(--c-chrome); color: var(--c-card-title); }
.frame-tabs .fav { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.frame-tabs .plus { color: var(--c-muted); padding-inline: 0.5rem; font-size: 1.125rem; }

/* 5.7 — bento cards lead with a visual area that bleeds to the card edges */
.bento-vis {
  margin: calc(var(--s-3) * -1) calc(var(--s-4) * -1) var(--s-3);
  border-radius: var(--r-card) var(--r-card) 0 0;
  border-bottom: 1px solid var(--c-bento-line);
  background:
    radial-gradient(ellipse 70% 90% at 30% 0%, rgba(107,114,255,0.16), transparent 70%),
    rgba(255,255,255,0.025);
  padding: var(--s-3);
  height: 132px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 0.5rem;
}
/* fan of engine bars */
.vis-bars { display: flex; align-items: flex-end; gap: 4px; height: 100%; }
.vis-bars i {
  flex: 1 1 0; min-width: 0; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--c-tile-indigo), rgba(107,114,255,0.12));
  opacity: 0.5; height: 52%;
}
.vis-bars i:nth-child(3n)   { opacity: 0.9; height: 84%; }
.vis-bars i:nth-child(4n)   { height: 38%; }
.vis-bars i:nth-child(5n)   { height: 96%; opacity: 0.75; }
.vis-bars i:nth-child(7n)   { height: 66%; }
/* stacked mini rows */
.vis-rows { display: grid; gap: 0.5rem; }
.vis-rows span {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--c-card-line);
  border-radius: 8px; padding: 0.5rem 0.75rem;
  font-size: 0.9375rem; color: var(--c-card-title);
}
.vis-rows span em { font-style: normal; color: var(--c-muted); font-size: 0.875rem; }
.vis-rows span.is-sel { background: rgba(107,114,255,0.22); border-color: rgba(107,114,255,0.4); }
/* chat bubbles */
.vis-chat { display: grid; gap: 0.5rem; }
.vis-chat b {
  font-weight: 400; font-size: 0.9375rem; padding: 0.5rem 0.875rem;
  border-radius: 12px; max-width: 78%;
  background: rgba(255,255,255,0.05); color: var(--c-card-title);
}
.vis-chat b.me {
  justify-self: end; background: rgba(107,114,255,0.24); color: #fff;
}
/* four windows */
.vis-quad { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; height: 100%; }
.vis-quad span {
  border: 1px solid var(--c-card-line); border-radius: 10px;
  background: rgba(255,255,255,0.035);
  display: grid; place-items: center;
  font-size: 0.875rem; color: var(--c-muted);
}

/* ==========================================================================
   INNER PAGES
   Shared additions for the seven non-home pages.
   ========================================================================== */

/* Inner-page hero: shorter than home, badge above the headline */
/* Inner-page heroes were costing a full viewport before any feature appeared.
   Tightened throughout: the badge sits closer to the nav, the headline is a
   step smaller than the homepage, and the product frame follows immediately. */
.hero--page { padding-bottom: var(--s-3); }
.hero--page h1 {
  margin-top: var(--s-3);
  max-width: 26ch;
  font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.25rem);
}
.hero--page .badge { margin-top: var(--s-4); }
.sub--hero {
  margin: var(--s-2) auto 0;
  max-width: 58ch;
  color: var(--c-muted);
  font-size: 1.1875rem;
  line-height: 1.55;
}
.hero--page .cta-row { margin-top: var(--s-3); }
.hero--page .trust { margin-top: 0.875rem; }
.hero--page .frame { margin-top: var(--s-4); }
/* the first section after an inner hero doesn't need homepage-sized air */
.hero--page + .sec { padding-top: var(--s-5) !important; }

/* three-up feature grid (six cards read as 3 x 2) */
.features--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* plain and numbered lists inside cards */
.step-list, .num-list { display: grid; gap: 0.625rem; margin-top: 0.25rem; }
.step-list li, .num-list li {
  position: relative; padding-left: 1.75rem;
  color: var(--c-card-body); font-size: var(--fs-card-b);
}
.step-list li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--c-glyph);
}
.num-list { counter-reset: n; }
.num-list li::before {
  counter-increment: n;
  content: counter(n, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  color: var(--c-glyph); font-size: 0.875rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* insurer panel */
.panel-heading {
  margin: var(--s-5) 0 var(--s-3);
  font-size: var(--fs-card-t); font-weight: 600; color: var(--c-card-title);
}
.panel-list {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
}
.panel-list li {
  border: 1px solid var(--c-card-line);
  background: rgba(255,255,255,0.025);
  border-radius: var(--r-pill);
  padding: 0.5rem 1.125rem;
  font-size: 1.0625rem; color: var(--c-card-title);
}

@media (max-width: 1100px) { .features--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px)  { .features--3 { grid-template-columns: 1fr; } }

/* the inner-page hero is shorter, so the ray vertex has to rise with it —
   otherwise it converges in the middle of the headline instead of at its cap */
.hero--page .hero-rays { top: -412px; }

/* ---- pull quote ---------------------------------------------------- */
.pull-quote {
  margin: var(--s-5) auto 0;
  max-width: 46ch;
  text-align: center;
  font-size: clamp(1.375rem, 1rem + 1.1vw, 1.75rem);
  line-height: 1.35;
  color: var(--c-display);
  font-weight: 600;
}

/* ---- data table ----------------------------------------------------- */
.table-wrap {
  margin-top: var(--s-5);
  overflow-x: auto;
  border: 1px solid var(--c-card-line);
  border-radius: var(--r-card);
  background: var(--g-bento);
}
table.data { border-collapse: collapse; width: 100%; min-width: 720px; }
table.data th, table.data td {
  text-align: left; padding: 1.125rem 1.5rem;
  border-bottom: 1px solid var(--c-card-line);
  font-size: 1.0625rem; vertical-align: middle;
}
table.data thead th {
  font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--c-muted); font-weight: 700;
  border-bottom: 1px solid var(--c-glass-line);
  background: rgba(255,255,255,0.02);
}
table.data tbody th { color: var(--c-card-title); font-weight: 600; }
table.data tbody td { color: var(--c-card-body); }
table.data tbody tr:last-child th,
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: rgba(255,255,255,0.02); }

.pill {
  display: inline-block; white-space: nowrap;
  border: 1px solid rgba(107,114,255,0.35);
  background: rgba(107,114,255,0.14);
  color: var(--c-grad-a);
  border-radius: var(--r-pill);
  padding: 0.3rem 0.9rem;
  font-size: 0.9375rem; font-weight: 600;
}

/* status chip sitting on its own line inside a feature card */
.feature .status { margin-bottom: 0.25rem; }

/* ==========================================================================
   PHONE FRAME + DUAL PRODUCT SHOT
   Sage has two surfaces, so its hero shows both: browser frame and handset.
   ========================================================================== */
.frames-dual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--s-5);
  align-items: end;
  max-width: 1100px;
  margin: 4.5rem auto 0;
  position: relative; z-index: 5;
}
.frames-dual .frame { margin: 0; max-width: none; }

.phone {
  border: 9px solid #171a26;
  border-radius: 38px;
  overflow: hidden;
  background: #171a26;
  box-shadow: 0 30px 70px rgba(0,0,0,0.55);
}
.phone img { width: 100%; display: block; }

.shot-caption {
  margin-top: 1rem;
  color: var(--c-muted);
  font-size: 1rem;
  text-align: center;
}

@media (max-width: 900px) {
  .frames-dual { grid-template-columns: 1fr; }
  .phone { max-width: 300px; margin-inline: auto; }
}

/* product media sits flush inside the browser frame */
.frame-body--flush { padding: 0; min-height: 0; }
.frame-body--flush img { width: 100%; display: block; }

/* a screenshot used as evidence inside a section, not in a browser frame */
.inline-shot {
  margin-top: var(--s-5);
  border: 1px solid var(--c-card-line);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-card);
}
.inline-shot img { width: 100%; display: block; }
.inline-shot figcaption {
  padding: 1rem var(--s-4);
  border-top: 1px solid var(--c-card-line);
  color: var(--c-muted);
  font-size: 1rem;
}


/* ---- nav robustness -------------------------------------------------
   Nine items plus a CTA was wrapping to two lines below ~1400px. */
.nav-links { gap: 1.375rem; flex-wrap: nowrap; }
.nav-links a { font-size: 1.0625rem; white-space: nowrap; }
@media (max-width: 1380px) {
  .nav .btn { display: none; }          /* CTA goes first, links matter more */
  .nav-links { gap: 1.125rem; }
  .nav-links a { font-size: 1rem; }
}
@media (max-width: 1120px) {
  .nav-links { gap: 0.875rem; }
  .nav-links a { font-size: 0.9375rem; }
}

/* the 12-screen grid reads fine four-up and saves a whole row */
@media (min-width: 1200px) { .features--4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* ==========================================================================
   HERO VARIANTS
   Nine pages with the same centred hero read as one page repeated. Three
   treatments now, in descending loudness — which is also the hierarchy:

     home            centred, full burst, ray lattice, full-width frame
     product pages   split: copy left, product right, calmer glow, no rays
     conceptual      left-aligned, no product shot, quietest

   The split also halves the vertical cost of a hero, which is where most of
   the scroll was going.
   ========================================================================== */

/* ---- shared: inner pages are calmer than home ---- */
.hero--split .hero-rays,
.hero--left  .hero-rays { display: none; }

.hero--split::before,
.hero--left::before {
  height: 620px;
  background:
    radial-gradient(ellipse 460px 190px at 38% 210px,
      rgba(138,95,200,0.50) 0%, rgba(74,58,150,0.30) 45%, rgba(5,8,27,0) 82%),
    radial-gradient(ellipse 900px 240px at 50% 200px,
      rgba(5,8,27,0) 30%, rgba(70,120,190,0.16) 60%, rgba(5,8,27,0) 95%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 40px, #000 150px);
  mask-image: linear-gradient(to bottom, transparent 40px, #000 150px);
}

/* ---- split: copy left, product right ---- */
.hero--split .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: var(--s-5);
  align-items: center;
  padding-top: var(--s-5);
}
.hero--split .hero-copy { text-align: left; }
.hero--split .badge { margin-top: 0; }
.hero--split h1 { margin-inline: 0; max-width: 15ch; }
.hero--split .sub--hero { margin-inline: 0; max-width: 44ch; }
.hero--split .cta-row { justify-content: flex-start; }
.hero--split .trust { text-align: left; }
.hero--split .frame {
  margin: 0;
  max-width: none;
  border-radius: var(--r-frame);
  -webkit-mask-image: none;
  mask-image: none;
  box-shadow: 0 30px 70px rgba(0,0,0,0.45);
}

/* ---- left: conceptual pages, no product shot ---- */
.hero--left .center,
.hero--left .hero-copy { text-align: left; }
.hero--left h1 { margin-inline: 0; max-width: 20ch; }
.hero--left .sub--hero { margin-inline: 0; max-width: 56ch; }
.hero--left .cta-row { justify-content: flex-start; }
.hero--left .trust { text-align: left; }
.hero--left .badge { margin-top: 0; }

@media (max-width: 1000px) {
  .hero--split .hero-grid { grid-template-columns: 1fr; }
  .hero--split .frame { margin-top: var(--s-4); }
}


/* trust line on a split hero must not orphan a word */
.hero--split .trust, .hero--left .trust { max-width: 46ch; }
/* stacked CTAs in a narrow column read better at equal width */
.hero--split .cta-row .btn { justify-content: center; }

/* left-aligned heroes were colliding with the nav */
.hero--left .center,
.hero--left .hero-copy { padding-top: var(--s-4); }

/* the caption belongs under the handset, not stranded across the page */
.frames-dual + .shot-caption,
.frames-dual .shot-caption { text-align: center; }
.hero--split .shot-caption { margin-top: 0.75rem; font-size: 0.9375rem; }

/* circuit chips were floating in open space directly under a hero */
.hero--split + .sec .circuit,
.hero--left  + .sec .circuit { opacity: 0.55; }

/* the engine diagram is the product shot on /quote-engine */
.engine-diagram {
  margin: 0;
  border: 1px solid var(--c-bento-line);
  border-radius: var(--r-card);
  background:
    radial-gradient(ellipse 60% 70% at 50% 50%, rgba(107,114,255,0.07), transparent 70%),
    var(--g-bento);
  padding: var(--s-3);
}
.engine-diagram img { width: 100%; display: block; }

/* ==========================================================================
   HOME HERO, REBUILT — calm and dark. The burst-and-rays treatment kept
   washing the headline out and striking lines through the copy; slick here
   means high-contrast type on near-black with one restrained pool of light.
   ========================================================================== */
.hero::before {
  background:
    radial-gradient(ellipse 640px 300px at 50% 460px,
      rgba(107,114,255,0.20) 0%, rgba(103,42,147,0.13) 45%, rgba(5,8,27,0) 78%),
    radial-gradient(ellipse 1100px 420px at 50% 380px,
      rgba(27,35,83,0.55) 0%, rgba(5,8,27,0) 75%);
  -webkit-mask-image: none;
  mask-image: none;
  height: 760px;
  top: 0;
}
.hero .badge { margin-top: var(--s-5); }
.hero h1 { margin-top: 1.25rem; }
.hero .sub--hero { max-width: 52ch; }
.hero .cta-row { margin-top: var(--s-4); }
.hero .trust { margin-top: 1.125rem; color: #8e94ad; }
.dot-sep {
  display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--c-glyph); vertical-align: middle; margin: 0 0.875rem;
}
.hero .frame { border-radius: var(--r-frame); box-shadow: 0 34px 90px rgba(0,0,0,0.5); }

/* hero order: headline -> product, immediately. CTAs and proof live under
   the frame, and the nav button covers anyone who will not scroll. */
.hero .sub--hero { margin-bottom: 0; }
.hero .frame { margin-top: 2rem; }
.hero-after { text-align: center; margin-top: var(--s-4); }
.hero-after .trust { margin: 0 0 1rem; }
.hero-after .cta-row { margin-top: 0; justify-content: center; }

/* home hero graph — the aggregator fan-out is the opening visual */
.engine-diagram--home { max-width: 840px; margin: 1.75rem auto 0; }
/* the demo video lives in how-it-works now, shown whole */
#spine .frame { max-width: 1100px; margin: 0 auto var(--s-4); }

/* ==========================================================================
   HOME HERO — restored to the approved treatment (Mo's screenshot):
   announcement bar, ray fan, purple burst, email pill CTA, stats, video.
   Scoped to the home hero only; .hero--page variants are untouched.
   ========================================================================== */
.hero:not(.hero--page)::before {
  background:
    radial-gradient(ellipse 560px 210px at 50% 160px,
      #ddd2f2 0%, #a88fd0 16%, #8a5fb8 34%, rgba(91,61,156,0) 74%),
    radial-gradient(ellipse 880px 300px at 50% 155px,
      rgba(138,95,200,0.80) 0%, rgba(104,74,182,0.62) 34%,
      rgba(62,56,150,0.40) 60%, rgba(28,36,100,0.20) 80%, rgba(5,8,27,0) 96%),
    radial-gradient(ellipse 1240px 320px at 50% 146px,
      rgba(5,8,27,0) 20%, rgba(92,120,215,0.34) 48%,
      rgba(70,190,214,0.30) 68%, rgba(48,104,160,0.17) 85%, rgba(5,8,27,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 30px, #000 120px);
  mask-image: linear-gradient(to bottom, transparent 30px, #000 120px);
  height: 900px; top: -120px;
}
.hero:not(.hero--page) h1 { margin-top: 8.625rem; }
.hero:not(.hero--page) h1 .grad {
  background: linear-gradient(180deg, #cdd0ea 0%, #9a9dc7 58%, #8b8eb4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero:not(.hero--page) .frame {
  max-width: 1100px; margin: 4.5rem auto 0;
  border-radius: var(--r-frame) var(--r-frame) 0 0;
  -webkit-mask-image: linear-gradient(#000 58%, transparent 100%);
  mask-image: linear-gradient(#000 58%, transparent 100%);
  box-shadow: none;
}
.hero:not(.hero--page) { padding-bottom: var(--s-6); }

/* ==========================================================================
   HERO v3 — Mo's blueprint: H1, one-line sub, live product animation,
   demo CTA, oversized stats, insurer names below. Home only.
   ========================================================================== */
.hero:not(.hero--page) .hero-rays { opacity: 0.6; }   /* rays -40% */
.hero:not(.hero--page) .sub--hero {
  margin: 0.875rem auto 0; max-width: 46ch;
  font-size: 1.375rem; color: #b9bed6;
}
.hero:not(.hero--page) .frame { margin-top: 2.25rem; }
.hero:not(.hero--page) .hero-after { margin-top: var(--s-4); text-align: center; }
.hero:not(.hero--page) .hero-after .cta-row { justify-content: center; margin-top: 0; }

.stats-big {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1.5rem; list-style: none; margin: var(--s-5) auto 0; padding: 0;
  max-width: 1000px;
}
.stats-big li { text-align: center; }
.stats-big b {
  display: block; font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem);
  font-weight: 800; letter-spacing: -0.02em; color: #fff; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stats-big span {
  display: block; margin-top: 0.5rem;
  font-size: 1.0625rem; color: var(--c-muted);
}
@media (max-width: 820px) { .stats-big { grid-template-columns: repeat(2, 1fr); } }

/* connected step cards — 01 -> 02 -> 03 */
.features--steps { position: relative; }
.features--steps .feature { position: relative; }
.features--steps .feature:not(:last-child)::after {
  content: "\2192";
  position: absolute; right: -1.35rem; top: 1.1rem;
  color: var(--c-glyph); font-size: 1.25rem;
}
@media (max-width: 900px) { .features--steps .feature::after { display: none; } }
.spine-caption a { color: var(--c-link); }

/* six module cards: even 3x2, no orphan row */
.bento--even { grid-template-columns: repeat(3, minmax(0,1fr)); }
.bento--even li { grid-column: auto; }
@media (max-width: 980px) { .bento--even { grid-template-columns: 1fr; } }

/* .features.grid--2 was inheriting the 3-col template - make it truly 2-up */
ul.features.grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 820px) { ul.features.grid--2 { grid-template-columns: 1fr; } }

/* Stripe float: the product starts before the fold ends */
.hero:not(.hero--page) .cta-row { margin-top: var(--s-4); }
.hero:not(.hero--page) .frame { margin-top: 2.5rem; }
.hero:not(.hero--page) .hero-after { margin-top: var(--s-5); }

/* The poem becomes the badge; the literal line leads; the product is the hero. */
.hero:not(.hero--page) .badge { margin-top: var(--s-4); }
.h1-literal {
  font-size: clamp(2.25rem, 1.3rem + 2.8vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  max-width: 24ch;
  margin: 1.5rem auto 0;
}
.h1-literal .grad { display: block; }
.hero:not(.hero--page) .cta-row { margin-top: var(--s-3); }
.hero:not(.hero--page) .frame { margin-top: 2rem; }

/* override the restored-hero h1 spacing for the literal headline */
.hero:not(.hero--page) .h1-literal {
  margin-top: 1.25rem;
  font-size: clamp(2.125rem, 1.2rem + 2.5vw, 2.875rem);
  max-width: none;
}

/* understated hero link - the product is the CTA */
.hero-link {
  display: inline-block; margin-top: 1rem;
  color: var(--c-muted); text-decoration: none;
  font-size: 1.125rem;
}
.hero-link:hover { color: var(--c-display); text-decoration: underline; }

/* close the dead band between the hero stats and the insurer strip */
.hero:not(.hero--page) { padding-bottom: 0; }
.hero:not(.hero--page) .hero-after { margin-top: var(--s-4); padding-bottom: 0; }
.panelbar { padding-block: var(--s-4) var(--s-3); }

/* review pass: quieter link, audience line, software dominates, logos first */
.hero-link { font-size: 1rem; margin-top: 0.75rem; }
.hero-audience {
  margin: 0.75rem auto 0; color: var(--c-muted); font-size: 1.1875rem;
}
.hero:not(.hero--page) .frame { max-width: 1240px; margin-top: 1.75rem; }
.panelbar .stats-big { margin-top: var(--s-4); }

/* stats must sit above the circuit art's floating chips */
.panelbar { position: relative; z-index: 6; }
.panelbar .stats-big { padding-bottom: var(--s-2); }
#spine { margin-top: var(--s-3); }

/* the link and audience line need to survive the glow behind them */
.hero-audience { color: #c9cee3; }
.hero-link { color: #b9bed6; }

/* numbers on the first screen: tighter stack, product slightly narrower */
.hero:not(.hero--page) .h1-literal { margin-top: 1rem; }
.hero-link { margin-top: 0.5rem; }
.hero:not(.hero--page) .frame { max-width: 1040px; margin-top: 1.25rem; }
.hero:not(.hero--page) .stats-big { margin-top: 1.5rem; }
.panelbar { padding-block: var(--s-3); }

/* modules follow the tour directly - shrink the transition band */
.sky { height: 120px; margin-top: var(--s-3); }

/* ==========================================================================
   TOUR INDEX RAIL — the module identifier lives in the DOM, not burned into
   the bitmap. Real type, selectable, readable by a screen reader, and it
   shows the whole system so a viewer arriving mid-loop knows where they are.
   Five entries over seven frames: CRM covers pipeline + automations,
   Sage covers the CRM panel + WhatsApp. 15.4s total.
   ========================================================================== */
.tour-rail {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 0 2.25rem; list-style: none;
  margin: 1.25rem auto 0; padding: 0;
}
.tour-rail li {
  position: relative; padding-bottom: 0.625rem;
  font-size: 1.0625rem; font-weight: 500;
  color: var(--c-muted); opacity: 0.42;
  animation: railStep 17.6s linear infinite;

}
.tour-rail li span { display: block; }
/* hairline that fills while its module is on screen */
.tour-rail li i {
  position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: rgba(255,255,255,0.10); overflow: hidden;
}
.tour-rail li i::after {
  content: ""; position: absolute; inset: 0;
  background: var(--c-grad-a); transform: scaleX(0); transform-origin: left;
  animation: railFill 17.6s linear infinite;
  animation-delay: inherit;
}

/* 5 steps: lit for 1/5 of the cycle, dim otherwise */
@keyframes railStep {
  0%      { opacity: 1;    color: var(--c-display); }
  19.999% { opacity: 1;    color: var(--c-display); }
  20%     { opacity: 0.42; color: var(--c-muted); }
  100%    { opacity: 0.42; color: var(--c-muted); }
}
@keyframes railFill {
  0%   { transform: scaleX(0); }
  20%  { transform: scaleX(1); }
  100% { transform: scaleX(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tour-rail li, .tour-rail li i::after { animation: none; }
  .tour-rail li { opacity: 1; color: var(--c-muted); }
}

/* the arc is anchored to the sky's bottom and was taller than its band, so it
   painted over the tour rail sitting above it */
.sky { overflow: hidden; }
.sky .arc { height: 120px; }

/* 8 frames, 6 entries. Quote engine 1, Nomi 1, CRM 2, Sage 2, Group quotes 1,
   Policy Hub 1 - so the lit window differs per entry. */
.tour-rail li:nth-child(1) { animation-name: rail1; }
.tour-rail li:nth-child(2) { animation-name: rail2; }
.tour-rail li:nth-child(3) { animation-name: rail3; }
.tour-rail li:nth-child(4) { animation-name: rail4; }
.tour-rail li:nth-child(5) { animation-name: rail5; }
.tour-rail li:nth-child(6) { animation-name: rail6; }
.tour-rail li:nth-child(1) i::after { animation-name: fill1; }
.tour-rail li:nth-child(2) i::after { animation-name: fill2; }
.tour-rail li:nth-child(3) i::after { animation-name: fill3; }
.tour-rail li:nth-child(4) i::after { animation-name: fill4; }
.tour-rail li:nth-child(5) i::after { animation-name: fill5; }
.tour-rail li:nth-child(6) i::after { animation-name: fill6; }

@keyframes rail1 { 0%,12.49%{opacity:1;color:#fff} 12.5%,100%{opacity:.42;color:var(--c-muted)} }
@keyframes rail2 { 0%,12.49%{opacity:.42;color:var(--c-muted)} 12.5%,24.99%{opacity:1;color:#fff} 25%,100%{opacity:.42;color:var(--c-muted)} }
@keyframes rail3 { 0%,24.99%{opacity:.42;color:var(--c-muted)} 25%,49.99%{opacity:1;color:#fff} 50%,100%{opacity:.42;color:var(--c-muted)} }
@keyframes rail4 { 0%,49.99%{opacity:.42;color:var(--c-muted)} 50%,74.99%{opacity:1;color:#fff} 75%,100%{opacity:.42;color:var(--c-muted)} }
@keyframes rail5 { 0%,74.99%{opacity:.42;color:var(--c-muted)} 75%,87.49%{opacity:1;color:#fff} 87.5%,100%{opacity:.42;color:var(--c-muted)} }
@keyframes rail6 { 0%,87.49%{opacity:.42;color:var(--c-muted)} 87.5%,100%{opacity:1;color:#fff} }

@keyframes fill1 { 0%{transform:scaleX(0)} 12.5%{transform:scaleX(1)} 12.6%,100%{transform:scaleX(1);opacity:0} }
@keyframes fill2 { 0%,12.5%{transform:scaleX(0)} 25%{transform:scaleX(1)} 25.1%,100%{transform:scaleX(1);opacity:0} }
@keyframes fill3 { 0%,25%{transform:scaleX(0)} 50%{transform:scaleX(1)} 50.1%,100%{transform:scaleX(1);opacity:0} }
@keyframes fill4 { 0%,50%{transform:scaleX(0)} 75%{transform:scaleX(1)} 75.1%,100%{transform:scaleX(1);opacity:0} }
@keyframes fill5 { 0%,75%{transform:scaleX(0)} 87.5%{transform:scaleX(1)} 87.6%,100%{transform:scaleX(1);opacity:0} }
@keyframes fill6 { 0%,87.5%{transform:scaleX(0)} 100%{transform:scaleX(1)} }

/* section sub that must sit on exactly two rows */
.sub--two { max-width: 82ch; }

/* ==========================================================================
   PLATFORM EXPLORER — six tabs, one panel each. Rebuilt in our own tokens
   rather than importing the reference stylesheet, so it inherits Switzer,
   the palette and the spacing scale instead of forking the design system.
   ========================================================================== */
.pex {
  margin-top: var(--s-4);
  border: 1px solid var(--c-bento-line);
  border-radius: var(--r-card);
  background: var(--g-bento);
  overflow: hidden;
}
.pex-tabs {
  display: flex; flex-wrap: wrap; gap: 0.25rem;
  padding: 0.5rem;
  border-bottom: 1px solid var(--c-card-line);
  background: rgba(255,255,255,0.02);
}
.pex-tab {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center; gap: 0.625rem;
  padding: 0.75rem 1rem;
  background: transparent; border: 0; border-radius: 10px;
  font-family: inherit; font-size: 1.0625rem; font-weight: 500;
  color: var(--c-muted); cursor: pointer; white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.pex-tab:hover { color: var(--c-display); }
.pex-tab.is-active {
  background: rgba(107,114,255,0.16);
  color: var(--c-display); font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(107,114,255,0.28);
}
.pex-ico {
  width: 24px; height: 24px; flex: none;
  display: grid; place-items: center; border-radius: 7px;
  background: rgba(255,255,255,0.06);
  font-size: 0.75rem; font-weight: 700; color: var(--c-grad-a);
}
.pex-tab.is-active .pex-ico { background: rgba(107,114,255,0.3); color: #fff; }

.pex-panel {
  display: grid; grid-template-columns: minmax(0,0.82fr) minmax(0,1.18fr);
  gap: var(--s-5); align-items: center;
  padding: var(--s-5);
  animation: pexIn .32s ease both;
}
.pex-panel[hidden] { display: none; }
@keyframes pexIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.pex-eyebrow {
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--c-muted); font-weight: 700;
  display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap;
}
.pex-copy h3 {
  font-size: clamp(1.75rem, 1.1rem + 1.6vw, 2.375rem);
  line-height: 1.1; letter-spacing: -0.015em;
  margin: 0.875rem 0 0.75rem; max-width: 18ch;
}
.pex-copy > p { color: var(--c-card-body); font-size: 1.0625rem; max-width: 46ch; }

.pex-stats {
  display: flex; flex-wrap: wrap; gap: 1.75rem;
  margin: var(--s-4) 0 var(--s-3);
  padding-top: var(--s-3); border-top: 1px solid var(--c-card-line);
}
.pex-stats b {
  display: block; font-size: 1.5rem; font-weight: 800; color: #fff;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.pex-stats span { display: block; margin-top: 0.2rem; font-size: 0.9375rem; color: var(--c-muted); }

.pex-shot {
  margin: 0; border: 1px solid var(--c-card-line); border-radius: var(--r-card);
  overflow: hidden; background: var(--c-card);
  box-shadow: 0 24px 60px rgba(0,0,0,0.42);
}
.pex-shot img { width: 100%; display: block; }

@media (max-width: 980px) {
  .pex-panel { grid-template-columns: 1fr; }
  .pex-tab { flex: 1 1 40%; font-size: 1rem; }
}

/* ---- integrations ---- */
.integrations {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.5rem; margin-top: var(--s-4); list-style: none; padding: 0;
}
.integrations li {
  border: 1px solid var(--c-card-line); border-radius: var(--r-feature);
  background: var(--c-card); padding: var(--s-3) var(--s-4);
}
.integrations b { display: block; color: var(--c-card-title); font-size: var(--fs-card-t); }
.integrations span {
  display: block; margin-top: 0.5rem;
  color: var(--c-card-body); font-size: 1rem;
}
@media (max-width: 900px) { .integrations { grid-template-columns: 1fr; } }

/* per-module accent — six products, one architecture */
.pex-tab.is-active {
  background: color-mix(in srgb, var(--acc) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 34%, transparent);
}
.pex-tab .pex-ico { color: var(--acc); }
.pex-tab.is-active .pex-ico {
  background: color-mix(in srgb, var(--acc) 28%, transparent);
  color: #fff;
}
.pex-eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--acc); flex: none;
}
.pex-stats b { color: #fff; }
.pex-panel .hero-link { color: var(--acc); }
.pex-shot { box-shadow: 0 24px 60px rgba(0,0,0,0.42), 0 0 0 1px color-mix(in srgb, var(--acc) 18%, transparent); }

/* ─── Legal pages ─────────────────────────────────────────────────────────
   Privacy, cookies, terms. Deliberately plain: one narrow measure, no
   decoration, generous leading. These get read, not scanned. */

/* Flush left, so the reading column starts on the same axis as the h1 above
   it. Centring the measure under a left-aligned hero reads as a mistake. */
.legal { max-width: 46rem; margin-inline: 0; }
.legal .updated {
  color: var(--c-muted); font-size: 0.875rem; letter-spacing: 0.02em;
  margin: 0 0 2.5rem;
}
.legal h2 {
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem); line-height: 1.3;
  color: var(--c-display); margin: 3rem 0 0.85rem; scroll-margin-top: 6rem;
}
.legal h2:first-of-type { margin-top: 0; }
.legal h3 {
  font-size: 1rem; color: var(--c-card-title); margin: 1.75rem 0 0.5rem;
}
.legal p, .legal li { color: var(--c-para); line-height: 1.75; }
.legal p { margin: 0 0 1.1rem; }
.legal ul { margin: 0 0 1.1rem; padding-left: 1.15rem; }
.legal li { margin-bottom: 0.55rem; }
.legal li::marker { color: var(--c-rail); }
.legal a { color: var(--c-link); text-underline-offset: 3px; }
.legal strong { color: var(--c-display); font-weight: 600; }

/* Contents list at the top of each policy. */
.legal-toc {
  border: 1px solid var(--c-card-line); background: var(--c-card);
  border-radius: 14px; padding: 1.25rem 1.5rem; margin: 0 0 2.75rem;
}
.legal-toc h2 {
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-muted); margin: 0 0 0.75rem;
}
.legal-toc ol {
  margin: 0; padding: 0; list-style: none;
  columns: 2; column-gap: 2rem;
}
.legal-toc li { margin: 0 0 0.4rem; break-inside: avoid; }
.legal-toc a { color: var(--c-nav); text-decoration: none; font-size: 0.9375rem; }
.legal-toc a:hover { color: var(--c-display); text-decoration: underline; }
@media (max-width: 40rem) { .legal-toc ol { columns: 1; } }

/* Inline sibling of .todo — a single missing fact mid-sentence rather than a
   whole unresolved block. Same amber, so it reads as the same warning. */
.needs-fact {
  color: var(--c-todo); background: var(--c-todo-bg);
  border-bottom: 1px dashed var(--c-todo-line);
}

/* Footer legal row. */
.foot-legal { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin: 0; }
.foot-legal a { color: var(--c-foot-link); text-decoration: none; font-size: 0.875rem; }
.foot-legal a:hover { color: var(--c-display); text-decoration: underline; }

/* ─── Situation picker (Build with us) ────────────────────────────────────
   The page asks one question - which of these is you - so it behaves like
   one question rather than a stack of sections. Seven situations on the
   left, the route that answers them on the right. Three of the seven share
   a route, so buttons map to panels by data-route, not one-to-one. */

.picker {
  display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: var(--s-4); align-items: start; margin-top: var(--s-5);
}

.picker-list { display: grid; gap: 0.5rem; }
.pick {
  display: grid; gap: 0.25rem; text-align: left; cursor: pointer;
  padding: 0.95rem 1.1rem;
  background: rgba(255,255,255,0.022);
  border: 1px solid var(--c-card-line); border-radius: 13px;
  font: inherit; color: inherit;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.pick b { font-size: 1.0625rem; font-weight: 600; color: var(--c-card-title); }
.pick span { font-size: 0.9375rem; color: var(--c-card-body); }
.pick:hover { background: rgba(255,255,255,0.045); transform: translateX(2px); }
.pick:focus-visible { outline: 2px solid var(--c-link); outline-offset: 2px; }
.pick.is-active {
  background: rgba(107,114,255,0.16); border-color: rgba(107,114,255,0.42);
}
.pick.is-active b { color: var(--c-display); }

.picker-panels { position: relative; }
.route {
  padding: var(--s-4);
  background: var(--g-bento);
  border: 1px solid var(--c-bento-line); border-radius: var(--r-card);
}
.route[hidden] { display: none; }
.route-head { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.route-head h3 {
  font-size: var(--fs-h3, 1.5rem); font-weight: 700; color: var(--c-display);
  letter-spacing: -0.02em;
}
.route > p {
  margin-top: 0.875rem; color: var(--c-para);
  font-size: var(--fs-para); line-height: var(--lh-para); max-width: 62ch;
}
.route-facts { display: grid; gap: 0.5rem; margin-top: var(--s-3); }
.route-facts li {
  position: relative; padding-left: 1.5rem;
  color: var(--c-card-body); font-size: 1.0625rem;
}
.route-facts li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--c-glyph);
}
.route .frame, .route-vis { margin-top: var(--s-4); }
.route-vis {
  border: 1px solid var(--c-bento-line); border-radius: var(--r-card);
  background:
    radial-gradient(ellipse 70% 90% at 30% 0%, rgba(107,114,255,0.16), transparent 70%),
    rgba(255,255,255,0.025);
  padding: var(--s-4);
}
/* The WhatsApp capture is portrait - centre it rather than stretch it. */
.route-vis--phone { display: grid; place-items: center; padding: var(--s-3); }
.route-vis--phone img { width: auto; max-height: 420px; border-radius: 14px; }

@media (max-width: 1000px) {
  .picker { grid-template-columns: 1fr; }
  .picker-list {
    grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr);
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem;
  }
  .pick { scroll-snap-align: start; }
  .pick:hover { transform: none; }
}

/* Four separately-branded workspaces on one platform. The only route with no
   real capture behind it - a network's own tenants are their data, not ours to
   screenshot - so this is deliberately diagrammatic rather than a fake UI. */
.tenants { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.tenant {
  display: grid; gap: 0.3rem; padding: 0.9rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--c-card-line); border-radius: 11px;
}
.tenant i { width: 22px; height: 22px; border-radius: 7px; margin-bottom: 0.35rem; }
.tenant b { font-size: 0.9375rem; font-weight: 600; color: var(--c-card-title); }
.tenant span { font-size: 0.8125rem; color: var(--c-card-body-spec); word-break: break-all; }
.tenants-note {
  margin-top: 0.875rem; font-size: 0.9375rem; color: var(--c-muted); text-align: center;
}
@media (max-width: 640px) { .tenants { grid-template-columns: repeat(2, minmax(0, 1fr)); } }