/* ============================================================
   VENDORED from systemsincubator.com — the Apple keynote design
   system, copied faithfully from
   ~/Code/incubator/sites/systems-incubator/public/css/apple.css
   (enclavelab/incubator-sites) on 2026-08-30.

   Treat this as a COPY, not a fork: if the design system changes,
   change it there and copy forward. Usher-specific additions live
   at the bottom under "Usher additions", never mixed in above.

   Used by the product front page and the 404 only. The chat
   surface and client console are token-driven (styles.css) because
   they wear a TENANT brand, not ours.
   ============================================================ */

/* ============================================================
   GHL Incubator — Apple keynote/editorial reskin
   Shared design system. Real copy kept, visual language Apple.
   One accent (Apple blue). White / #f5f5f7 / black rhythm.
   ============================================================ */

:root {
  --bg:            #ffffff;
  --bg-alt:        #f5f5f7;
  --ink:           #1d1d1f;
  --muted:         #6e6e73;
  --hair:          #d2d2d7;
  --accent:        #0071e3;
  --accent-press:  #0077ed;
  --black:         #000000;
  --dark-panel:    #0b0b0d;
  --paper-dark:    #f5f5f7;
  --muted-dark:    #a1a1a6;
  --card-dark:     #1d1d1f;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --pill: 980px;

  --wrap: 980px;
  --wrap-wide: 1180px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.003em;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }

/* ---------- layout ---------- */
.wrap      { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.wrap-wide { width: 100%; max-width: var(--wrap-wide); margin-inline: auto; padding-inline: 24px; }

.section {
  padding-block: clamp(84px, 12vh, 148px);
}
.section--alt   { background: var(--bg-alt); }
.section--dark  { background: var(--black); color: var(--paper-dark); }
.section--panel { background: var(--dark-panel); color: var(--paper-dark); }
.section--tight { padding-block: clamp(56px, 8vh, 96px); }

.center { text-align: center; }

/* ---------- type ---------- */
.eyebrow {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent);
  margin-bottom: 14px;
}
.section--dark .eyebrow,
.section--panel .eyebrow { color: #2997ff; }

.display {
  font-weight: 600;
  font-size: clamp(42px, 7vw, 88px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.h1 {
  font-weight: 600;
  font-size: clamp(36px, 5.4vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.h2 {
  font-weight: 600;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.h3 {
  font-weight: 600;
  font-size: clamp(21px, 2.4vw, 27px);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.lede {
  font-weight: 400;
  font-size: clamp(19px, 2.2vw, 27px);
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--muted);
  text-wrap: pretty;
}
.section--dark .lede,
.section--panel .lede { color: var(--muted-dark); }

.section-head { max-width: 760px; margin-inline: auto; }
.section-head .lede { margin-top: 18px; }

p.body { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55; color: var(--muted); }
.section--dark p.body { color: var(--muted-dark); }

.kicker-mono {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- buttons / links ---------- */
.cta-row {
  display: flex; flex-wrap: wrap; gap: 14px 26px;
  align-items: center; justify-content: center;
  margin-top: 34px;
}
.cta-row.start { justify-content: flex-start; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 17px; font-weight: 400; line-height: 1;
  border-radius: var(--pill);
  padding: 13px 24px;
  cursor: pointer; border: 1px solid transparent;
  transition: background .2s ease, color .2s ease, transform .12s ease;
}
.btn:active { transform: scale(.97); }
.btn--pill  { background: var(--accent); color: #fff; }
.btn--pill:hover { background: var(--accent-press); }
.btn--soft  { background: rgba(0,0,0,.05); color: var(--ink); }
.btn--soft:hover { background: rgba(0,0,0,.09); }
.section--dark .btn--soft,
.section--panel .btn--soft { background: rgba(255,255,255,.12); color: #fff; }
.section--dark .btn--soft:hover { background: rgba(255,255,255,.2); }

.chev {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 17px; font-weight: 400; color: var(--accent);
}
.chev::after { content: "›"; font-size: 20px; line-height: 1; transition: transform .18s ease; }
.chev:hover { text-decoration: underline; }
.chev:hover::after { transform: translateX(3px); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  height: 52px;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.nav-inner {
  max-width: var(--wrap-wide); margin-inline: auto; height: 100%;
  padding-inline: 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav-logo {
  font-weight: 600; font-size: 18px; letter-spacing: -0.02em; color: var(--ink);
  white-space: nowrap;
}
.nav-logo b { color: var(--accent); font-weight: 600; }
.nav-links {
  display: flex; align-items: center; gap: 26px; list-style: none;
  font-size: 13.5px; font-weight: 400;
}
.nav-links a { color: rgba(29,29,31,.82); transition: color .15s ease; white-space: nowrap; }
.nav-links a:hover { color: var(--ink); }
.nav-links a.here { color: var(--ink); font-weight: 500; }
.nav-cta {
  font-size: 13.5px; font-weight: 500; color: #fff;
  background: var(--accent); border-radius: var(--pill);
  padding: 7px 15px; white-space: nowrap;
}
.nav-cta:hover { background: var(--accent-press); }
.nav-burger { display: none; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav-burger span { display: block; width: 20px; height: 1.5px; background: var(--ink); margin: 4px 0; transition: .2s; }

/* ---------- hero ---------- */
.hero {
  padding-top: clamp(64px, 10vh, 120px);
  padding-bottom: clamp(40px, 6vh, 80px);
  text-align: center;
}
.hero .display { margin-top: 8px; }
.hero .lede { max-width: 640px; margin: 22px auto 0; }

/* the Step Zero "product shot" card */
.shot {
  position: relative;
  margin: clamp(48px, 8vh, 96px) auto 0;
  max-width: 620px;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--hair);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.28), 0 8px 24px -12px rgba(0,0,0,.12);
  padding: 32px 34px 34px;
  text-align: left;
}
.shot::before {
  content: ""; position: absolute; inset: -80px -60px auto; height: 320px; z-index: -1;
  background: radial-gradient(60% 80% at 50% 0%, rgba(0,113,227,.12), transparent 70%);
  filter: blur(20px);
}
.shot-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.shot-title { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.shot-tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); background: rgba(0,113,227,.1); padding: 5px 10px; border-radius: var(--pill);
}
.shot-row { display: flex; align-items: flex-start; gap: 14px; padding: 13px 0; border-top: 1px solid var(--bg-alt); }
.shot-row:first-of-type { border-top: 0; }
.shot-check {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff; display: grid; place-items: center;
  font-size: 13px; margin-top: 1px;
}
.shot-row.dim .shot-check { background: var(--hair); color: #fff; }
.shot-row h4 { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.shot-row p { font-size: 13.5px; color: var(--muted); margin-top: 2px; }

/* ---------- order of operations (steps) ---------- */
.steps { display: grid; gap: 20px; margin-top: 56px; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
.step {
  background: #fff; border-radius: var(--radius-md); padding: 34px 32px;
  border: 1px solid var(--hair);
}
.section--alt .step { background: #fff; }
.step-num {
  font-family: var(--mono); font-size: 13px; letter-spacing: .1em;
  color: var(--accent); font-weight: 600; margin-bottom: 16px;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 16px; line-height: 1.5; }

/* ---------- feature cards ---------- */
.cards { display: grid; gap: 20px; margin-top: 56px; }
@media (min-width: 760px) { .cards.c3 { grid-template-columns: repeat(3,1fr); } .cards.c2 { grid-template-columns: repeat(2,1fr); } }
.card {
  background: #fff; border-radius: var(--radius-lg); padding: 40px 34px;
  border: 1px solid var(--hair);
}
.section--alt .card { background: #fff; }
.section--dark .card, .section--panel .card { background: var(--card-dark); border-color: rgba(255,255,255,.08); }
.card .ico { width: 40px; height: 40px; color: var(--accent); margin-bottom: 22px; }
.section--dark .card .ico { color: #2997ff; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 16px; line-height: 1.55; }
.section--dark .card p, .section--panel .card p { color: var(--muted-dark); }

/* ---------- split ---------- */
.split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 860px) { .split { grid-template-columns: 1.05fr .95fr; gap: 72px; } }
.split .h2 { margin-bottom: 20px; }

/* ownership visual */
.own-card {
  background: #fff; border: 1px solid var(--hair); border-radius: var(--radius-lg);
  padding: 30px; box-shadow: 0 30px 70px -34px rgba(0,0,0,.22);
}
.own-line { display: flex; align-items: center; justify-content: space-between; padding: 15px 4px; border-top: 1px solid var(--bg-alt); font-size: 15px; }
.own-line:first-child { border-top: 0; }
.own-line .lab { color: var(--muted); }
.own-line .val { font-weight: 600; }
.own-line .val.good { color: var(--accent); }
.own-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); background: rgba(0,113,227,.09); padding: 9px 14px; border-radius: var(--pill);
}

/* ---------- for / not-for ---------- */
.fortable { display: grid; gap: 20px; margin-top: 52px; }
@media (min-width: 760px) { .fortable { grid-template-columns: 1fr 1fr; gap: 24px; } }
.forcol { background: var(--bg-alt); border-radius: var(--radius-lg); padding: 40px 36px; }
.forcol.no { background: transparent; border: 1px solid var(--hair); }
.forcol h3 { margin-bottom: 22px; display: flex; align-items: center; gap: 10px; }
.forcol ul { list-style: none; display: grid; gap: 15px; }
.forcol li { display: flex; gap: 12px; font-size: 16px; line-height: 1.45; color: var(--ink); }
.mark { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.mark.yes { color: var(--accent); }
.mark.non { color: var(--muted); }

/* ---------- price ---------- */
.price-wrap { max-width: 720px; margin: 56px auto 0; }
.price-card {
  background: #fff; border: 1px solid var(--hair); border-radius: var(--radius-lg);
  padding: 48px 44px; text-align: center;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.25);
}
.price-big { font-size: clamp(46px, 8vw, 72px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.price-sub { color: var(--muted); font-size: 18px; margin-top: 12px; }
.price-note { color: var(--muted); font-size: 14px; margin-top: 6px; }
.incl { display: grid; gap: 14px; margin: 34px auto 0; max-width: 460px; text-align: left; }
.incl li { display: flex; gap: 12px; font-size: 16px; line-height: 1.45; }
.incl .mark { flex: none; }

/* tiers */
.tiers { display: grid; gap: 20px; margin-top: 24px; }
@media (min-width: 760px) { .tiers { grid-template-columns: 1fr 1fr; gap: 24px; } }
.tier { border: 1px solid var(--hair); border-radius: var(--radius-lg); padding: 38px 34px; background: #fff; }
.tier.free { background: var(--bg-alt); border-color: transparent; }
.tier .tlab { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tier .tprice { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; margin: 10px 0 6px; }
.tier ul { list-style: none; display: grid; gap: 12px; margin-top: 22px; }
.tier li { display: flex; gap: 10px; font-size: 15.5px; color: var(--muted); }
.tier .mark { width: 20px; height: 20px; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 52px auto 0; border-top: 1px solid var(--hair); }
.qa { border-bottom: 1px solid var(--hair); }
.qa summary {
  list-style: none; cursor: pointer; padding: 26px 8px 26px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  font-size: clamp(18px, 2vw, 22px); font-weight: 500; letter-spacing: -0.015em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa .plus { flex: none; width: 26px; height: 26px; position: relative; color: var(--accent); }
.qa .plus::before, .qa .plus::after {
  content: ""; position: absolute; background: currentColor; border-radius: 2px;
  left: 50%; top: 50%; transition: transform .28s ease;
}
.qa .plus::before { width: 2px; height: 16px; transform: translate(-50%,-50%); }
.qa .plus::after  { width: 16px; height: 2px; transform: translate(-50%,-50%); }
.qa[open] .plus::before { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.qa-body { overflow: hidden; }
.qa-body p { padding: 0 44px 28px 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.qa-body p + p { padding-top: 14px; }

/* ---------- big quote ---------- */
.pullquote { max-width: 900px; margin-inline: auto; text-align: center; }
.pullquote blockquote {
  font-size: clamp(28px, 4vw, 46px); font-weight: 600; line-height: 1.18; letter-spacing: -0.02em;
  text-wrap: balance;
}
.pullquote cite { display: block; margin-top: 28px; font-style: normal; font-size: 16px; color: var(--muted-dark); }

/* ---------- footer ---------- */
.footer { background: var(--bg-alt); color: var(--muted); font-size: 13px; padding-block: 44px; }
.footer .wrap-wide { display: grid; gap: 26px; }
.footer-top { display: flex; flex-wrap: wrap; gap: 30px 60px; justify-content: space-between; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 12px 34px; }
.footer-nav a { color: rgba(29,29,31,.75); }
.footer-nav a:hover { color: var(--ink); }
.footer-legal { border-top: 1px solid var(--hair); padding-top: 22px; line-height: 1.7; }
.footer-legal b { color: var(--ink); font-weight: 600; }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- responsive nav ---------- */
@media (max-width: 860px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: block; }
  .nav.open .nav-links {
    display: flex; position: absolute; top: 52px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 4px;
    background: rgba(255,255,255,.94); backdrop-filter: blur(20px);
    padding: 14px 24px 22px; border-bottom: 1px solid var(--hair);
  }
  .nav.open .nav-links a { padding: 10px 0; font-size: 17px; width: 100%; }
}

/* ============================================================
   Theme toggle button
   ============================================================ */
.theme-toggle {
  background: transparent; border: 0; cursor: pointer; color: var(--ink);
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; transition: background .15s ease;
}
.theme-toggle:hover { background: rgba(0,0,0,.06); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .moon { display: none; }

/* ============================================================
   Dark theme, toggled via html[data-theme="dark"]. Same markup,
   Apple "Pro" dark treatment: near-black canvas, glass panels,
   silver-gradient headline, on-dark blue accent.
   ============================================================ */
html[data-theme="dark"] {
  --bg: #000000;
  --bg-alt: #0a0a0b;
  --surface: #161617;
  --ink: #f5f5f7;
  --muted: #86868b;
  --hair: rgba(255,255,255,0.12);
  --accent: #2997ff;
  --accent-press: #47a6ff;
  color-scheme: dark;
}
html[data-theme="dark"] body { background: #000; color: var(--ink); }

html[data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,.12); }
html[data-theme="dark"] .theme-toggle .sun { display: none; }
html[data-theme="dark"] .theme-toggle .moon { display: block; }

/* nav */
html[data-theme="dark"] .nav { background: rgba(0,0,0,.7); border-bottom-color: rgba(255,255,255,.08); }
html[data-theme="dark"] .nav-links a { color: rgba(245,245,247,.78); }
html[data-theme="dark"] .nav-links a:hover,
html[data-theme="dark"] .nav-links a.here { color: var(--ink); }

/* hero silver-gradient headline, the dark flourish */
html[data-theme="dark"] .hero .display {
  background: linear-gradient(180deg,#fff 0%,#f5f5f7 40%,#a9a9b0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* white cards become frosted glass so text stays readable */
html[data-theme="dark"] .shot,
html[data-theme="dark"] .card,
html[data-theme="dark"] .step,
html[data-theme="dark"] .own-card,
html[data-theme="dark"] .price-card,
html[data-theme="dark"] .tier,
html[data-theme="dark"] .forcol,
html[data-theme="dark"] .opt {
  background: rgba(255,255,255,.05);
  border-color: var(--hair);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
html[data-theme="dark"] .tier.free { background: rgba(255,255,255,.03); }
html[data-theme="dark"] .forcol.no { background: transparent; }
html[data-theme="dark"] .shot { box-shadow: 0 40px 120px -30px rgba(41,151,255,.35), inset 0 1px 0 rgba(255,255,255,.08); }
html[data-theme="dark"] .own-card { box-shadow: 0 30px 80px -40px rgba(41,151,255,.4); }
html[data-theme="dark"] .step { box-shadow: none; }

/* soft buttons flip to light-on-dark */
html[data-theme="dark"] .btn--soft { background: rgba(255,255,255,.12); color: var(--ink); border-color: var(--hair); }
html[data-theme="dark"] .btn--soft:hover { background: rgba(255,255,255,.18); }

/* the black keynote sections nudge to off-black so they read against pure black */
html[data-theme="dark"] .section--dark { background: #0a0a0b; }

/* footer */
html[data-theme="dark"] .footer-nav a { color: rgba(245,245,247,.72); }
html[data-theme="dark"] .footer-nav a:hover { color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  html { transition: none; }
  body, .nav, .card, .step, .shot, .own-card, .forcol, .tier, .price-card, .opt, .btn--soft {
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
  }
}

/* ============================================================
   Accessibility polish, shared across the set
   ============================================================ */

/* anchor targets clear the sticky nav */
.section { scroll-margin-top: 72px; }

/* visible keyboard focus (WCAG 2.4.7). Outline follows each element's
   own border-radius, so pill buttons keep their shape. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.btn:focus-visible,
.chev:focus-visible,
.nav-cta:focus-visible,
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }
.qa summary:focus-visible { outline-offset: -4px; border-radius: 8px; }

/* skip to content: hidden until focused */
.skip-link {
  position: fixed; top: 10px; left: 12px; z-index: 200;
  transform: translateY(-180%);
  background: var(--accent); color: #fff;
  padding: 11px 18px; border-radius: 10px;
  font-size: 14px; font-weight: 500; letter-spacing: 0.01em;
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

/* ============================================================
   Design flourishes, one idea: order revealed in sequence.
   All CSS on existing classes, reduced-motion aware.
   ============================================================ */

/* B. Editorial index on eyebrows, scoped to the front-door pages
   (main.od-indexed) so single-section pages do not get a lone 01.
   Skips the hero eyebrow, which carries the brand name. */
main.od-indexed { counter-reset: od-eyebrow; }
main.od-indexed .section:not(.hero) .eyebrow { counter-increment: od-eyebrow; }
main.od-indexed .section:not(.hero) .eyebrow::before {
  content: counter(od-eyebrow, decimal-leading-zero) "  \00B7  ";
  font-family: var(--mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  opacity: 0.5;
}

/* A. Sequence cue on the order-of-operations steps: the mono number
   grows a short accent connector as each step reveals. */
.step-num { display: inline-flex; align-items: center; gap: 11px; }
.step-num::before {
  content: ""; height: 2px; width: 22px; flex: none;
  background: var(--accent); border-radius: 2px;
}

/* E. Chevron links draw an underline from the left on hover/focus. */
.chev { position: relative; }
.chev::before {
  content: ""; position: absolute; left: 0; bottom: -2px;
  height: 1.5px; width: 0; background: currentColor;
  transition: width .22s cubic-bezier(.2,.7,.2,1);
}
.chev:hover::before, .chev:focus-visible::before { width: calc(100% - 18px); }

@media (prefers-reduced-motion: no-preference) {
  /* A. connector draws in on reveal */
  .step .step-num::before { width: 0; transition: width .55s cubic-bezier(.2,.7,.2,1) .1s; }
  .step.in .step-num::before { width: 22px; }

  /* A. the four steps cascade in reading order */
  .steps .step:nth-child(1) { transition-delay: 0ms; }
  .steps .step:nth-child(2) { transition-delay: 80ms; }
  .steps .step:nth-child(3) { transition-delay: 160ms; }
  .steps .step:nth-child(4) { transition-delay: 240ms; }

  /* C. hero read-card rows write in one by one */
  .shot .shot-row {
    opacity: 0; transform: translateY(7px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
  }
  .shot.in .shot-row { opacity: 1; transform: none; }
  .shot.in .shot-row:nth-of-type(1) { transition-delay: .16s; }
  .shot.in .shot-row:nth-of-type(2) { transition-delay: .30s; }
  .shot.in .shot-row:nth-of-type(3) { transition-delay: .44s; }
  .shot.in .shot-row:nth-of-type(4) { transition-delay: .58s; }
}

/* ============================================================
   POLISH PASS — shared components added for the finish pass.
   All token-based, dark-safe, reduced-motion aware.
   ============================================================ */

/* ---------- screen-reader-only utility ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- hero shot: price/value on a shot-row ---------- */
.shot-row .sr-price {
  margin-left: auto; flex: none; align-self: center;
  font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.shot-row .sr-price small { font-weight: 400; font-size: 12px; color: var(--muted); letter-spacing: 0; }
.shot-row.feature .shot-check { box-shadow: 0 0 0 4px rgba(0,113,227,.16); }
.shot-row.feature h4 { color: var(--accent); }
html[data-theme="dark"] .shot-row.feature h4 { color: #2997ff; }
.shot-row.feature .sr-price { color: var(--accent); }
html[data-theme="dark"] .shot-row.feature .sr-price { color: #2997ff; }

/* ---------- compare matrix (apple.com/compare style) ---------- */
.compare {
  margin-top: 52px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--hair); border-radius: var(--radius-lg);
  background: var(--surface, #fff);
}
html[data-theme="dark"] .compare { background: rgba(255,255,255,.04); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.compare-table {
  width: 100%; min-width: 720px; border-collapse: collapse;
  font-size: 15px; line-height: 1.45;
}
.compare-table th, .compare-table td {
  text-align: left; padding: 20px 22px; vertical-align: top;
  border-bottom: 1px solid var(--hair);
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: 0; }
/* row-label column */
.compare-table tbody th[scope="row"] {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
  width: 148px; white-space: nowrap;
}
.compare-table td { color: var(--ink); }
.compare-table td .ct-sub { display: block; color: var(--muted); font-size: 13.5px; margin-top: 4px; line-height: 1.45; }
/* header product cells */
.compare-table thead .ct-corner { border-bottom: 1px solid var(--hair); background: transparent; }
.compare-table thead th[scope="col"] { position: relative; padding-top: 26px; }
.ct-tier { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ct-name { display: block; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; margin: 7px 0 6px; color: var(--ink); }
.ct-price { display: block; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.ct-price small { font-size: 14px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.ct-flag {
  position: absolute; top: -1px; left: 22px; right: 22px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--accent); text-align: center;
  padding: 4px 8px; border-radius: 0 0 8px 8px;
}
/* featured column */
.compare-table .is-feature { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.compare-table thead th.is-feature { box-shadow: inset 0 2px 0 var(--accent); }
.compare-table thead th.is-feature .ct-name,
.compare-table thead th.is-feature .ct-price { color: var(--accent); }
html[data-theme="dark"] .compare-table thead th.is-feature .ct-name,
html[data-theme="dark"] .compare-table thead th.is-feature .ct-price { color: #2997ff; }
/* yes / no marks inside cells */
.ct-mark { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.ct-mark svg { width: 18px; height: 18px; flex: none; }
.ct-mark.yes { color: var(--accent); }
html[data-theme="dark"] .ct-mark.yes { color: #2997ff; }
.ct-mark.no { color: var(--muted); }
/* footer CTA row */
.compare-table tfoot td { border-bottom: 0; padding-top: 22px; padding-bottom: 24px; }
.compare-table tfoot .btn { width: 100%; justify-content: center; }
@media (max-width: 760px) {
  .compare-hint { display: block; }
}
.compare-hint {
  display: none; text-align: center; margin-top: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

/* ---------- micro-polish: card hover-lift ---------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card, .tier, .step, .route, .icard, .forcol {
    transition: transform .28s cubic-bezier(.2,.7,.2,1),
                box-shadow .28s cubic-bezier(.2,.7,.2,1),
                border-color .3s ease, background-color .3s ease;
    will-change: transform;
  }
  .card:hover, .tier:hover, .step:hover, .route:hover, .icard:hover, .forcol:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 50px -28px rgba(0,0,0,.28);
  }
  html[data-theme="dark"] .card:hover,
  html[data-theme="dark"] .tier:hover,
  html[data-theme="dark"] .step:hover,
  html[data-theme="dark"] .route:hover,
  html[data-theme="dark"] .icard:hover,
  html[data-theme="dark"] .forcol:hover {
    box-shadow: 0 26px 60px -30px rgba(41,151,255,.4);
    border-color: rgba(255,255,255,.2);
  }
  /* the featured offer tier keeps its accent glow, just lifts */
  .tier.feature:hover { box-shadow: 0 40px 90px -44px rgba(0,113,227,.55); }
}

/* ---------- micro-polish: sticky-nav elevation + shrink on scroll ---------- */
.nav { transition: height .28s cubic-bezier(.2,.7,.2,1), background-color .3s ease, box-shadow .3s ease, border-color .3s ease; }
.nav.scrolled {
  height: 48px;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 8px 24px -18px rgba(0,0,0,.24);
  background: rgba(255,255,255,.82);
}
html[data-theme="dark"] .nav.scrolled {
  background: rgba(0,0,0,.82);
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 8px 28px -18px rgba(0,0,0,.7);
}
@media (prefers-reduced-motion: reduce) {
  .nav { transition: none; }
}