/* ═══════════════ VectorAIQ site — marketing sections ═══════════════
 * Everything that is NOT the scroll tour: nav, industries,
 * finale conversion, FAQ, footer. Uses the tokens from base.css. */

/* ─────────────── nav ─────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 60px; padding: 0 28px;
  color: #fff;
  background: transparent;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.nav-inner {
  max-width: var(--rail); height: 100%; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.nav.scrolled {
  background: rgba(6, 11, 30, 0.78);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07);
}
.nav-logo img { height: 26px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { font-size: 14px; font-weight: 550; color: rgba(255,255,255,0.82); transition: color 0.2s ease; }
.nav-links a:hover { color: #fff; }
.nav-signin { margin-left: 8px; }
.nav-cta {
  padding: 9px 20px; border-radius: 22px; background: var(--blue);
  color: #fff !important; font-weight: 600;
  transition: background 0.2s ease, transform 0.2s ease;
}
.nav-cta:hover { background: var(--blue-dark); }
.nav-burger { display: none; flex-direction: column; gap: 5px; padding: 10px; z-index: 102; }
.nav-burger span { width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 960px) {
  .nav-burger { display: flex; }
  #nav-links {
    position: fixed; inset: 0; z-index: 101;
    flex-direction: column; justify-content: center; gap: 30px;
    background: rgba(6, 11, 30, 0.97);
    opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease);
  }
  #nav-links.open { opacity: 1; pointer-events: auto; }
  #nav-links a { font-size: 20px; }
}
/* .nav.scrolled's backdrop-filter (and .nav-hidden's transform) each establish a
   containing block for position:fixed descendants — left in place, the fixed
   full-screen #nav-links panel above would be sized/positioned against the 60px
   header box instead of the viewport. "menu-open" (toggled in site.js alongside
   the burger) neutralizes both while the mobile menu is open. */
.nav.menu-open { backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; }

/* ─────────────── hero CTAs ─────────────── */
.hero-ctas { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn-hero-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px; border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.9);
  font-weight: 600; font-size: 15px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.btn-hero-ghost:hover { border-color: rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.06); }

/* ─────────────── scene-1 thread swap ─────────────── */
.w-thread {
  display: flex; flex-direction: column; gap: 14px; /* matches .w-messages gap in widget.css */
  justify-self: stretch; width: 100%;
}

/* ─────────────── industries · the Dive Chain ───────────────
   Default styles are the STATIC fallback (no-JS / reduced motion): four
   stacked chapters. main.js adds .ind-cinema for the pinned, scrubbed shot.
   Spec: docs/superpowers/specs/2026-07-16-industries-dive-chain-design.md */
.industries { background: transparent; padding: 90px 28px; }
.ind-pin { max-width: var(--rail); margin: 0 auto; }
.ind-flow, .ind-dust { display: none; }
.ind-intro { text-align: center; margin-bottom: 70px; }
/* the intro title is a plain interstitial statement (.int-text). In cinema
   mode the fly() parent owns the block fade, so the statement holds at full
   opacity and the per-word ignition sweep does the lighting. */
.ind-cinema .ind-intro .int-text { opacity: 1; }
.ind-cluster { margin: 0 auto 70px; max-width: 640px; text-align: center; }
.cl-name { font-size: clamp(34px, 5vw, 56px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; margin-bottom: 18px; }
.cl-query {
  display: inline-block; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px; font-weight: 500; line-height: 1.5; max-width: 340px; text-align: left;
  background: var(--blue); color: #fff; padding: 13px 17px; border-radius: 16px 16px 4px 16px;
  box-shadow: 0 20px 50px -18px rgba(23, 114, 232, 0.5); margin-bottom: 22px;
}
.cl-card {
  width: 330px; margin: 0 auto 22px; padding: 18px; text-align: left;
  background: #fff; border-radius: 14px; border: 1px solid rgba(9, 36, 71, 0.10);
  box-shadow: 0 20px 60px -20px rgba(9, 36, 71, 0.18), 0 6px 18px -6px rgba(9, 36, 71, 0.08);
}
.cl-card .p-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.cl-card .p-sub { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; color: var(--ink-2); margin-top: 3px; }
.cl-card .p-attrs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.cl-card .p-attrs span {
  font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 20px;
  background: rgba(23, 114, 232, 0.08); color: var(--navy); border: 1px solid rgba(23, 114, 232, 0.18);
}
.cl-card .p-foot { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid rgba(9, 36, 71, 0.10); padding-top: 11px; }
.cl-card .p-price { font-size: 17px; font-weight: 800; color: var(--ink); }
.cl-card .p-price small { font-size: 11px; font-weight: 600; color: var(--ink-2); }
.cl-card .p-stock { font-size: 12px; font-weight: 600; color: #0b8a5c; }
.card-cert { display: flex; gap: 14px; align-items: flex-start; width: 340px; }
.card-cert .c-doc {
  flex: none; width: 44px; height: 56px; border-radius: 6px; position: relative;
  background: #eef3fb; border: 1px solid rgba(23, 114, 232, 0.25);
}
.card-cert .c-doc::after {
  content: "PDF"; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  font-size: 9px; font-weight: 800; letter-spacing: 0.08em; color: var(--blue);
}
.card-cert .c-name { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.card-cert .c-sub { font-size: 12px; color: var(--ink-2); margin-top: 4px; line-height: 1.5; }
.card-cert .c-src { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10.5px; color: var(--blue); margin-top: 8px; }
.card-xref { width: 340px; }
.card-xref .x-row { display: flex; align-items: center; gap: 12px; }
.card-xref .x-part { flex: 1; }
.card-xref .x-part b { display: block; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13.5px; color: var(--ink); }
.card-xref .x-part small { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.card-xref .x-old small { color: #b4540a; }
.card-xref .x-new small { color: #0b8a5c; }
.card-xref .x-arrow { flex: none; color: var(--blue); font-size: 18px; font-weight: 700; }
.card-xref .x-specs { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: var(--ink-2); margin: 12px 0; line-height: 1.7; }
.card-xref .x-foot { border-top: 1px solid rgba(9, 36, 71, 0.10); padding-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.card-trio { width: 360px; padding: 16px; }
.card-trio .t-grid { display: flex; gap: 10px; }
.card-trio .t-item { flex: 1; }
.card-trio .t-swatch { height: 60px; border-radius: 8px; margin-bottom: 8px; }
.card-trio .t-item b { display: block; font-size: 11px; letter-spacing: -0.01em; line-height: 1.3; color: var(--ink); }
.card-trio .t-item span { font-size: 12px; font-weight: 700; color: var(--navy); }
.card-trio .t-foot { margin-top: 12px; border-top: 1px solid rgba(9, 36, 71, 0.10); padding-top: 10px; font-size: 12px; font-weight: 600; color: #0b8a5c; }
.cl-points { list-style: none; display: inline-flex; flex-direction: column; gap: 12px; text-align: left; }
.cl-points li {
  font-size: clamp(14px, 1.35vw, 18px); font-weight: 550; color: var(--ink-2); line-height: 1.45;
  padding-left: 14px; border-left: 2px solid rgba(23, 114, 232, 0.55); max-width: 300px;
}

/* ── cinema mode: main.js adds .ind-cinema when motion is allowed ── */
.industries.ind-cinema { padding: 0; }
.ind-cinema .ind-pin {
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden;
  max-width: none; margin: 0;
}
.ind-cinema .ind-stage { position: absolute; inset: 0; z-index: 1; will-change: transform; }
.ind-cinema .ind-cluster { margin: 0; max-width: none; }
.ind-cinema .ind-fly {
  position: absolute; left: 50%; top: 50%; visibility: hidden;
  will-change: transform, opacity, filter; pointer-events: none;
}
.ind-cinema .ind-fly > * {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  width: max-content; max-width: 86vw; margin: 0;
}
.ind-cinema .ind-intro { margin: 0; }
.ind-cinema .cl-name { font-size: clamp(52px, 8.5vw, 118px); line-height: 0.98; white-space: nowrap; text-align: center; }
.ind-cinema .dark-ch .cl-name { color: #f4f7ff; }
.ind-cinema .dark-ch .cl-points li { color: rgba(235, 242, 255, 0.78); border-left-color: rgba(106, 165, 248, 0.75); }
.ind-cinema .dark-ch .cl-card { box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.55), 0 6px 18px -6px rgba(0, 0, 0, 0.3); }
.ind-cinema .cl-points li { opacity: 0; }
.ind-cinema .ind-flow {
  display: block; position: absolute; left: -4%; top: -6%; width: 108%; height: 200%;
  z-index: 0; pointer-events: none; will-change: transform;
}
.ind-flow path { fill: none; transition: stroke 0.5s ease; }
.ind-flow .f-a { stroke: rgba(45, 105, 230, 0.34); stroke-width: 1.4; }
.ind-flow .f-b { stroke: rgba(45, 105, 230, 0.22); stroke-width: 1.3; }
.ind-flow .f-c { stroke: rgba(45, 105, 230, 0.14); stroke-width: 1.2; }
.ind-flow .f-base { stroke: rgba(45, 105, 230, 0.10); stroke-width: 1; stroke-dasharray: 2 6; }
.ind-cinema.darkbg .ind-flow .f-a { stroke: rgba(150, 188, 255, 0.34); }
.ind-cinema.darkbg .ind-flow .f-b { stroke: rgba(150, 188, 255, 0.22); }
.ind-cinema.darkbg .ind-flow .f-c { stroke: rgba(150, 188, 255, 0.14); }
.ind-cinema.darkbg .ind-flow .f-base { stroke: rgba(150, 188, 255, 0.10); }
.ind-cinema .ind-dust {
  display: block; position: absolute; left: 0; right: 0; top: 0; z-index: 0;
  height: calc(100% + 140px); pointer-events: none; will-change: transform; opacity: 0;
  background-image: radial-gradient(circle, currentColor 1.2px, transparent 1.7px);
  background-size: 140px 140px;
}
.ind-cinema .ind-dust.ink { color: rgba(35, 44, 104, 0.14); }
.ind-cinema .ind-dust.white { color: rgba(190, 210, 255, 0.14); }
@media (max-width: 960px) {
  /* the longest chapter name ("E-commerce & Retail") overflows the viewport
     at the base clamp's 52px floor on phone widths; nowrap is load-bearing
     (the monument-name grammar), so shrink the floor instead */
  .ind-cinema .cl-name { font-size: clamp(34px, 10vw, 118px); }
}

/* ─────────────── finale conversion ─────────────── */
.finale-convert { margin-top: 44px; }
.finale-offer { font-size: 15px; color: rgba(255, 255, 255, 0.65); margin-bottom: 20px; }
.fin-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.fin-form[hidden] { display: none; }
.fin-input {
  width: min(340px, 100%); padding: 14px 20px; border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.07);
  color: #fff; font: inherit; font-size: 15px; outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.fin-input::placeholder { color: rgba(255, 255, 255, 0.4); }
.fin-input:focus { border-color: var(--blue); background: rgba(255, 255, 255, 0.1); }
.fin-submit { position: relative; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 15px; }
.fin-spinner {
  display: none; width: 16px; height: 16px; margin-left: 8px;
  border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%;
  animation: fin-spin 0.7s linear infinite; vertical-align: -3px;
}
.fin-form.loading .fin-spinner { display: inline-block; }
.fin-form.loading .fin-submit { pointer-events: none; opacity: 0.75; }
@keyframes fin-spin { to { transform: rotate(360deg); } }
.fin-error { min-height: 20px; margin-top: 10px; font-size: 13.5px; color: #f87171; }
.fin-success {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 6px;
  padding: 12px 22px; border-radius: 28px; font-size: 15px; font-weight: 550;
  background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.35); color: #6ee7b7;
}
.fin-success[hidden] { display: none; }
.finale-ctas { margin-top: 26px; }

/* ─────────────── FAQ ─────────────── */
.faq { background: transparent; padding: 110px 28px; color: #fff; } /* night: the env is dark from the finale on */
.faq-inner { max-width: var(--rail); margin: 0 auto; text-align: center; }
.faq-title { font-size: clamp(30px, 4.4vw, 52px); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 12px; }
.faq-sub { font-size: 16px; color: rgba(255, 255, 255, 0.65); max-width: 560px; margin: 0 auto 44px; }
.faq-list {
  max-width: 760px; margin: 0 auto; /* reading measure inside the rail */
  text-align: left; background: #fff;
  border: 1px solid rgba(9, 36, 71, 0.1); border-radius: 14px; overflow: hidden;
  box-shadow: 0 12px 32px rgba(9, 36, 71, 0.06);
}
.faq-item + .faq-item { border-top: 1px solid rgba(9, 36, 71, 0.08); }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 24px; font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; color: var(--ink);
}
.faq-toggle { position: relative; width: 14px; height: 14px; flex: none; }
.faq-toggle::before, .faq-toggle::after {
  content: ""; position: absolute; background: var(--blue); border-radius: 1px;
  transition: transform 0.3s var(--ease);
}
.faq-toggle::before { left: 0; right: 0; top: 6px; height: 2px; }
.faq-toggle::after { top: 0; bottom: 0; left: 6px; width: 2px; }
.faq-item.open .faq-toggle::after { transform: scaleY(0); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { min-height: 0; overflow: hidden; }
.faq-a-inner p { padding: 0 24px 22px; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.faq-cta { display: inline-block; margin-top: 40px; }

/* ─────────────── footer ─────────────── */
.footer { color: #fff; padding: 54px 28px; }
.footer-inner {
  max-width: var(--rail); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.footer-brand { display: flex; flex-direction: column; gap: 10px; }
.footer-brand img { height: 24px; width: auto; align-self: flex-start; }
.footer-brand small { font-size: 12.5px; color: rgba(255, 255, 255, 0.5); }
.footer-copy { font-size: 12.5px; color: rgba(255, 255, 255, 0.4); }
.footer-social { display: flex; gap: 14px; list-style: none; margin: 14px 0 0; padding: 0; }
.footer-social a { display: block; opacity: 0.6; transition: opacity 0.2s ease; }
.footer-social a:hover, .footer-social a:focus-visible { opacity: 1; }
.footer-copy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 760px) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ─────────────── finale done-for-you note ─────────────── */
.finale-note {
  margin: 18px auto 0; max-width: 480px;
  font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.6);
}

/* keep emoji from visually abutting the following word (system emoji fonts
   swallow the trailing space of glyphs like 👋) */
.emoji { margin-right: 0.16em; }

/* ─────────────── mid-tour CTA (catches high-intent skimmers) ─────────────── */
.midcta { background: transparent; padding: 46px 28px; } /* floats in the journey env */
.midcta-inner {
  max-width: var(--rail); margin: 0 auto; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 20px 30px; flex-wrap: wrap;
}
.midcta-text {
  font-size: clamp(17px, 2.2vw, 21px); font-weight: 650;
  letter-spacing: -0.02em; line-height: 1.35; color: var(--navy);
}
.midcta-btn { flex: none; }

/* ─────────────── reviews / social proof ─────────────── */
.reviews { background: transparent; padding: 110px 28px; }
.rev-inner { max-width: var(--rail); margin: 0 auto; text-align: center; }
.rev-kicker {
  font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 18px;
}
.rev-title { font-size: clamp(30px, 4.4vw, 52px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 52px; }
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: left; }
.rev-card {
  display: flex; flex-direction: column; gap: 18px;
  background: #fff; border: 1px solid rgba(9, 36, 71, 0.1); border-radius: 16px; padding: 28px;
  box-shadow: 0 12px 32px rgba(9, 36, 71, 0.06);
}
.rev-card blockquote { font-size: 15.5px; line-height: 1.55; letter-spacing: -0.01em; font-weight: 500; color: var(--ink); }
.rev-card figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.rev-who { display: flex; flex-direction: column; }
.rev-who h3 { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; margin: 0; display: block; }
.rev-who small { font-size: 12.5px; color: var(--ink-2); margin-top: 1px; }
@media (max-width: 860px) { .rev-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }

/* ─────────────── how it works (onboarding ladder) ─────────────── */
.howto { background: transparent; padding: 110px 28px; }
.howto-inner { max-width: var(--rail); margin: 0 auto; text-align: center; }
.howto-kicker {
  font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 18px;
}
.howto-title { font-size: clamp(30px, 4.4vw, 52px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 56px; }
.ladder { list-style: none; position: relative; text-align: left; max-width: 700px; margin: 0 auto; /* reading measure inside the rail */ }
/* one continuous rail from the first badge centre to the last; badges sit on top */
.ladder::before {
  content: ""; position: absolute; left: 25px; top: 26px; bottom: 26px; width: 2px;
  background: linear-gradient(rgba(23, 114, 232, 0.45), rgba(23, 114, 232, 0.12));
}
.rung { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 22px; align-items: start; padding-bottom: 36px; }
.rung:last-child { padding-bottom: 0; }
.rung-num {
  position: relative; z-index: 1;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--blue); color: #fff; font-size: 20px; font-weight: 800;
  display: grid; place-items: center;
  box-shadow: 0 8px 22px rgba(23, 114, 232, 0.35);
}
.rung-body { padding-top: 7px; }
.rung-body strong { display: block; font-size: 18px; letter-spacing: -0.02em; margin-bottom: 6px; }
.rung-body p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 560px) {
  .rung { grid-template-columns: 44px 1fr; gap: 16px; }
  .rung-num { width: 44px; height: 44px; font-size: 18px; }
  .ladder::before { left: 21px; top: 22px; bottom: 22px; }
  .rung-body strong { font-size: 16.5px; }
}

/* ─────────────── pricing ─────────────── */
.pricing { background: transparent; padding: 110px 28px; }
.pr-inner { max-width: var(--rail); margin: 0 auto; text-align: center; }
.pr-kicker {
  font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 18px;
}
.pr-title { font-size: clamp(30px, 4.4vw, 52px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 16px; }
.pr-sub { font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 560px; margin: 0 auto 44px; }
.pr-panel {
  max-width: 920px; margin: 0 auto; /* keeps the two columns at a comfortable width inside the rail */
  display: grid; grid-template-columns: 1fr 1fr; text-align: left;
  background: #fff; border: 1px solid rgba(9, 36, 71, 0.1); border-radius: 18px; overflow: hidden;
  box-shadow: 0 16px 40px rgba(9, 36, 71, 0.08);
}
.pr-col { padding: 32px 30px; }
.pr-drivers { border-right: 1px solid rgba(9, 36, 71, 0.08); }
.pr-included { background: #fbfcff; }
.pr-h {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 20px;
}
.pr-driver { padding: 14px 0; border-top: 1px solid rgba(9, 36, 71, 0.07); }
.pr-driver:first-of-type { border-top: 0; padding-top: 0; }
.pr-driver strong { display: block; font-size: 15.5px; letter-spacing: -0.015em; margin-bottom: 4px; }
.pr-driver small { display: block; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.pr-list { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.pr-list li { position: relative; padding-left: 30px; font-size: 14px; line-height: 1.4; color: var(--ink); }
.pr-list li::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 20px; height: 20px; border-radius: 50%;
  background: #d1fae5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.pr-cta { margin-top: 36px; }
.pr-reassure { margin-top: 40px; font-size: 13.5px; color: var(--ink-2); }
@media (max-width: 720px) {
  .pr-panel { grid-template-columns: 1fr; }
  .pr-drivers { border-right: 0; border-bottom: 1px solid rgba(9, 36, 71, 0.08); }
}

/* ═══════════════ motion pass · phase 3 — second-half life ═══════════════ */

/* ── reviews: differential column drift + star pops ── */
@media (prefers-reduced-motion: no-preference) and (min-width: 861px) {
  /* engine writes --rvp (0→1 transit) and --rvx (lateral sweep-in from the
     right; trailing cards sweep farther) — the translate property composes
     with the reveal animations' transform */
  .rev-card:nth-child(1) { translate: var(--rvx, 0vw) calc((var(--rvp, 0.5) - 0.5) * -96px); }
  .rev-card:nth-child(2) { translate: calc(var(--rvx, 0vw) * 1.25) calc((var(--rvp, 0.5) - 0.5) * 34px); }
  .rev-card:nth-child(3) { translate: calc(var(--rvx, 0vw) * 1.5) calc((var(--rvp, 0.5) - 0.5) * 96px); }
}
@media (prefers-reduced-motion: no-preference) {
  .js .rev-grid .rev-card { opacity: 0; }
  .rev-grid.on .rev-card { opacity: 1; animation: lc-rise 0.8s var(--ease-expo) backwards; }
  .rev-grid.on .rev-card:nth-child(2) { animation-delay: 0.09s; }
  .rev-grid.on .rev-card:nth-child(3) { animation-delay: 0.18s; }
}

/* ── pricing: border sweep on reveal + pointer spotlight ── */
@property --sweep { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.pr-col { position: relative; z-index: 1; }
.pr-panel::after {
  content: ""; position: absolute; inset: 0; border-radius: 18px;
  padding: 1.5px; pointer-events: none; opacity: 0;
  background: conic-gradient(from var(--sweep, 0deg),
    transparent 0 76%, rgba(23, 114, 232, 0.9) 90%, transparent 99%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
@media (prefers-reduced-motion: no-preference) {
  .pr-panel.on::after { animation: pr-sweep 1.4s var(--ease-expo) 0.2s both; }
}
@keyframes pr-sweep {
  0% { --sweep: 0deg; opacity: 1; }
  80% { opacity: 1; }
  100% { --sweep: 360deg; opacity: 0; }
}
@media (hover: hover) {
  /* same containment pattern as the button glow: full-size layer, light
     positioned by the gradient — can't paint outside the panel */
  .pr-panel::before {
    content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
    background: radial-gradient(circle 240px at var(--glow-x, 50%) var(--glow-y, 50%),
      rgba(23, 114, 232, 0.08) 0%, transparent 70%);
    opacity: 0; transition: opacity 0.4s ease-out; pointer-events: none;
  }
  .pr-panel.is-glow::before { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .pr-list li::before { transform: scale(0); }
  .pr-panel.on .pr-list li::before { animation: check-pop 0.5s var(--ease-over) both; }
  .pr-panel.on .pr-list li:nth-child(1)::before { animation-delay: 0.35s; }
  .pr-panel.on .pr-list li:nth-child(2)::before { animation-delay: 0.41s; }
  .pr-panel.on .pr-list li:nth-child(3)::before { animation-delay: 0.47s; }
  .pr-panel.on .pr-list li:nth-child(4)::before { animation-delay: 0.53s; }
  .pr-panel.on .pr-list li:nth-child(5)::before { animation-delay: 0.59s; }
  .pr-panel.on .pr-list li:nth-child(6)::before { animation-delay: 0.65s; }
}
@keyframes check-pop { to { transform: scale(1); } }

/* ── how it works: the rail draws itself, rungs ignite as it passes ── */
@media (prefers-reduced-motion: no-preference) {
  .js .ladder::before { transform: scaleY(var(--lp, 0)); transform-origin: top; }
  .js .rung-num {
    background: #cdd9ea; color: #5a6f8c; box-shadow: none;
    transition: background 0.4s var(--ease), color 0.4s var(--ease),
                box-shadow 0.4s var(--ease);
  }
  .js .rung-body { opacity: 0.35; transform: translateY(10px);
    transition: opacity 0.5s var(--ease-expo), transform 0.5s var(--ease-expo); }
  .rung.lit .rung-num {
    background: var(--blue); color: #fff;
    box-shadow: 0 8px 22px rgba(23, 114, 232, 0.35);
    animation: num-pop 0.5s var(--ease-over);
  }
  .rung.lit .rung-body { opacity: 1; transform: none; }
}
@keyframes num-pop { 0% { transform: scale(0.88); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* ── finale: the aurora returns and converges on the CTA ── */
.finale-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.finale-aurora .orb-fa {
  width: 44vw; height: 44vw; top: -10%; left: -14%; opacity: 0.34;
  background: radial-gradient(circle, #1772e8 0%, transparent 65%);
  translate: calc(var(--fp, 0) * 18vw) calc(var(--fp, 0) * 8vh);
}
.finale-aurora .orb-fb {
  width: 36vw; height: 36vw; bottom: -12%; right: -10%; opacity: 0.3;
  background: radial-gradient(circle, #6d5df0 0%, transparent 65%);
  animation-delay: -8s;
  translate: calc(var(--fp, 0) * -16vw) calc(var(--fp, 0) * -8vh);
}

/* recap tiles assemble from slight scatter — everything you watched, collected */
@media (prefers-reduced-motion: no-preference) {
  .js .recap-item { opacity: 0; }
  .recap.on .recap-item { opacity: 1; animation: recap-in 0.65s var(--ease-expo) backwards; }
  .recap.on .recap-item:nth-child(3n+1) { --sx: -12px; --sr: -1.6deg; }
  .recap.on .recap-item:nth-child(3n+2) { --sx: 9px; --sr: 1.2deg; }
  .recap.on .recap-item:nth-child(4n+3) { --sy: 22px; }
  .recap.on .recap-item:nth-child(2)  { animation-delay: 0.035s; }
  .recap.on .recap-item:nth-child(3)  { animation-delay: 0.07s; }
  .recap.on .recap-item:nth-child(4)  { animation-delay: 0.105s; }
  .recap.on .recap-item:nth-child(5)  { animation-delay: 0.14s; }
  .recap.on .recap-item:nth-child(6)  { animation-delay: 0.175s; }
  .recap.on .recap-item:nth-child(7)  { animation-delay: 0.21s; }
  .recap.on .recap-item:nth-child(8)  { animation-delay: 0.245s; }
  .recap.on .recap-item:nth-child(9)  { animation-delay: 0.28s; }
  .recap.on .recap-item:nth-child(10) { animation-delay: 0.315s; }
  .recap.on .recap-item:nth-child(11) { animation-delay: 0.35s; }
  .recap.on .recap-item:nth-child(12) { animation-delay: 0.385s; }
}
@keyframes recap-in {
  from { opacity: 0; transform: translate(var(--sx, 0px), var(--sy, 14px)) rotate(var(--sr, 0deg)) scale(0.97); }
}

/* demo form → success: morph, not swap */
.fin-form { transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.fin-form.sent { opacity: 0; transform: scale(0.96); pointer-events: none; }
.fin-success:not([hidden]) { animation: success-pop 0.55s var(--ease-over) 0.2s backwards; }
@keyframes success-pop { from { opacity: 0; transform: translateY(8px) scale(0.85); } }

/* ═══════════════ motion pass · phase 4 — garnish ═══════════════ */

/* nav hides going down, returns on the first nudge up; a journey hairline
   (scroll progress, --pp from the engine) runs along its bottom edge */
.nav { transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease), transform 0.4s var(--ease-expo); }
.nav.nav-hidden { transform: translateY(-100%); }
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--grad-mid), var(--grad-end));
  transform: scaleX(var(--pp, 0)); transform-origin: left;
  opacity: 0; transition: opacity 0.35s var(--ease);
  pointer-events: none;
}
.nav.scrolled::after { opacity: 1; }

/* FAQ items cascade on first reveal */
@media (prefers-reduced-motion: no-preference) {
  .js .faq-list .faq-item { opacity: 0; }
  .faq-list.on .faq-item { opacity: 1; animation: lc-rise 0.6s var(--ease-expo) backwards; }
  .faq-list.on .faq-item:nth-child(2)  { animation-delay: 0.04s; }
  .faq-list.on .faq-item:nth-child(3)  { animation-delay: 0.08s; }
  .faq-list.on .faq-item:nth-child(4)  { animation-delay: 0.12s; }
  .faq-list.on .faq-item:nth-child(5)  { animation-delay: 0.16s; }
  .faq-list.on .faq-item:nth-child(6)  { animation-delay: 0.20s; }
  .faq-list.on .faq-item:nth-child(7)  { animation-delay: 0.24s; }
  .faq-list.on .faq-item:nth-child(8)  { animation-delay: 0.28s; }
  .faq-list.on .faq-item:nth-child(9)  { animation-delay: 0.32s; }
  .faq-list.on .faq-item:nth-child(10) { animation-delay: 0.36s; }
}

/* ═══════════════ motion pass · phase 9 — parallax layers ═══════════════ */

/* pricing panel presents itself — origin at its base for the stand-up */
.pr-panel { transform-origin: 50% 100%; }

/* on light sections the blue glow box-shadow reads as hover light leaking
   outside the button — neutral elevation there instead; the cursor glow
   itself stays clipped inside the pill (overflow: hidden) */
.pr-cta .btn-primary, .midcta-btn { box-shadow: 0 6px 18px rgba(9, 36, 71, 0.16); }

/* Tile titles promoted from <strong> to <h3> for passage indexing / LLM
   section extraction (feature-tile keywords are now real headings).
   Reproduces every declaration from .tile-body strong (css/base.css:436:
   font-size 15px, font-weight 700, letter-spacing -0.015em) and neutralizes
   the <h3> UA defaults (font-size 1.17em, letter-spacing normal). Margin is
   already zeroed globally (base.css:35 `* { margin: 0 }`); repeated here for
   robustness. Visual output must remain byte-identical to the previous
   <strong>. */
.tile-body .tile-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: inherit;
  letter-spacing: -0.015em;
  color: inherit;
  margin: 0;
}

/* Industry chapter headings (.cl-name) link out to their landing pages;
   the link must inherit the chapter's own type styling, not default <a> blue.
   In cinema/scroll-animation mode the ancestor .ind-fly carries
   pointer-events: none (site.css:149) so the flying layers never intercept
   clicks mid-transition; re-enable it on just the link so the settled,
   fully-opaque chapter name stays clickable. */
.cl-name a { color: inherit; text-decoration: none; pointer-events: auto; }
.cl-name a:hover, .cl-name a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

/* ─────────────── nav · industries dropdown ─────────────── */
.nav-drop { position: relative; }
.nav-drop-menu {
  position: absolute; top: 100%; left: 0; min-width: 220px;
  display: flex; flex-direction: column; gap: 2px; padding: 8px;
  background: #0b1430; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu { opacity: 1; visibility: visible; transform: none; }
.nav-drop-menu a { padding: 8px 10px; border-radius: 6px; white-space: nowrap; }
.nav-drop-menu a:hover, .nav-drop-menu a:focus-visible { background: rgba(255,255,255,0.08); }
@media (max-width: 860px) {
  .nav-drop-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: none; border: 0; padding: 0 0 0 14px;
  }
}

/* ─────────────── footer · sitemap columns ─────────────── */
.footer-nav { display: flex; flex-wrap: wrap; gap: 48px; }
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-col h2 {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em;
  opacity: 0.55; margin: 0 0 4px; font-weight: 600;
}
.footer-col h2 a { color: inherit; text-decoration: none; }
.footer-col h2 a:hover, .footer-col h2 a:focus-visible { text-decoration: underline; }
.footer-col a { opacity: 0.8; }
.footer-col a:hover, .footer-col a:focus-visible { opacity: 1; }