/* ============================================================
   Ailly shared site styles
   Brand: Quicksand everywhere; Source Serif 4 for enterprise
   headlines only. Gradient stage: navy → deep purple.
   ============================================================ */

:root {
  --navy: #1A237E;
  --purple-deep: #311B92;
  --purple: #4A148C;
  --ink: #141A33;
  --body: #333A5C;
  --muted: #555C7A;
  --faint: #8A8FA8;
  --bg: #F6F6FA;
  --ent-navy: #141B4D;
  /* Enterprise accent pair, from the app's posture report (the reference):
     indigo on light surfaces, cover gold on navy. */
  --ent-ink: #3949AB;
  --ent-gold: #FFD54F;
  /* Grade bands (app LetterGrade.color): A green, B indigo, C amber, D deep orange, F red */
  --grade-a: #2E7D32; --grade-b: #3949AB; --grade-c: #F57C00; --grade-d: #E65100; --grade-f: #C62828;
  --biz-gold-1: #A9762A;
  --biz-gold-2: #C79A3E;
  --grad: linear-gradient(160deg, #1A237E 0%, #311B92 55%, #4A148C 100%);
  --grad-ent: linear-gradient(160deg, #141B4D 0%, #1A237E 55%, #311B92 100%);
  --shadow-card: 0 4px 18px rgba(20, 26, 77, .07);
  --shadow-card-lg: 0 6px 24px rgba(20, 26, 77, .09);
  --shadow-btn: 0 6px 18px rgba(20, 26, 77, .22);
  --radius: 18px;
  --font: ui-rounded, 'SF Pro Rounded', 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Source Serif 4', Georgia, serif;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font);
  font-weight: 500;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

[id] { scroll-margin-top: 84px; }

a { color: var(--navy); }

/* Skip link for keyboard users */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #fff;
  color: var(--navy);
  font-weight: 700;
  padding: 12px 18px;
  border-radius: 0 0 12px 0;
}
.skip:focus { left: 0; }

/* ============================== NAV ============================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(16, 20, 52, .82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
/* Solid fallback where backdrop-filter isn't supported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: rgba(16, 20, 52, .97); }
}

.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 30px; width: auto; display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}

.nav-links a {
  display: block;
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  padding: 9px 13px;
  border-radius: 10px;
  transition: color .15s, background .15s;
}

.nav-links a:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.nav-links a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .14); }

.nav-cta {
  display: inline-block;
  background: #fff;
  color: var(--navy);
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 99px;
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  border-radius: 10px;
}
.nav-toggle:hover { background: rgba(255, 255, 255, .1); }
.nav-toggle .bars { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; position: relative; }
.nav-toggle .bars::before, .nav-toggle .bars::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: #fff; border-radius: 2px;
}
.nav-toggle .bars::before { top: -7px; }
.nav-toggle .bars::after { top: 7px; }

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .nav-menu {
    position: absolute;
    top: 64px; left: 0; right: 0;
    background: rgba(20, 27, 77, .98);
    display: none;
    padding: 8px 20px 20px;
    box-shadow: 0 18px 30px rgba(10, 12, 40, .35);
  }
  .nav-menu.open { display: block; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-links a { padding: 13px 12px; font-size: 16px; }
  .nav-cta { display: none; }
}

@media (min-width: 761px) {
  .nav-menu { display: flex; align-items: center; gap: 14px; }
}

/* ============================== HERO ============================== */

.hero {
  background: var(--navy);
  background-image: var(--grad);
  color: #fff;
  text-align: center;
  padding: 88px 24px 96px;
  overflow: hidden;
}

.hero.hero-ent { background: var(--ent-navy); background-image: var(--grad-ent); }

.hero-mascot { width: 132px; margin-bottom: 20px; }

.hero h1 {
  font-size: clamp(38px, 6.5vw, 64px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.035em;
  max-width: 820px;
  margin: 0 auto 18px;
  text-wrap: balance;
}

.hero .hero-sub {
  font-size: 18px;
  line-height: 1.55;
  font-weight: 500;
  color: rgba(255, 255, 255, .82);
  max-width: 560px;
  margin: 0 auto;
}

.hero-ctas { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }

.chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255, 255, 255, .45);
  padding: 7px 16px;
  border-radius: 99px;
  margin-bottom: 22px;
}

.chip-gold { border-color: rgba(255, 213, 79, .5); color: var(--ent-gold); border-radius: 4px; }

.rule-gold { width: 56px; height: 2px; background: var(--ent-gold); opacity: .85; margin: 26px auto; border: none; }

/* Gentle float on the mascot */
.float { animation: float 5.5s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .float { animation: none; }
}

/* ============================== BUTTONS ============================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 700;
  height: 56px;
  padding: 0 30px;
  border-radius: 999px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-white { background: #fff; color: var(--navy); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.btn-white:hover { box-shadow: 0 9px 24px rgba(0, 0, 0, .3); }

.btn-ghost { border: 1.5px solid rgba(255, 255, 255, .55); color: #fff; background: transparent; }
.btn-ghost:hover { background: rgba(255, 255, 255, .1); }

.btn-navy { background: var(--navy); color: #fff; box-shadow: var(--shadow-btn); }
.btn-navy:hover { background: #232E96; box-shadow: 0 9px 24px rgba(20, 26, 77, .3); }

.btn-outline { border: 1.5px solid #C9CBE2; color: var(--navy); background: transparent; }
.btn-outline:hover { background: #EDEFFF; }

.btn-gold {
  background: linear-gradient(135deg, var(--biz-gold-1), var(--biz-gold-2));
  color: #fff;
  box-shadow: 0 6px 18px rgba(169, 118, 42, .32);
}
.btn-gold:hover { box-shadow: 0 9px 24px rgba(169, 118, 42, .4); }

/* App Store "coming soon" badge: one shared element.
   When the app goes live, swap the <span class="store-badge"> for an
   <a class="store-badge" href="APP_STORE_URL"> everywhere. */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: #fff;
  color: var(--navy);
  border-radius: 999px;
  height: 56px;
  padding: 0 24px 0 20px;
  text-align: left;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
.store-badge svg { width: 26px; height: 26px; flex: none; }
.store-badge .sb-top { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; opacity: .75; }
.store-badge .sb-bottom { display: block; font-size: 18px; font-weight: 700; line-height: 1.15; }

.store-badge.on-light {
  background: var(--navy);
  color: #fff;
  box-shadow: var(--shadow-btn);
}

/* ============================== SECTIONS ============================== */

main { display: block; }

.section { max-width: 1040px; margin: 0 auto; padding: 88px 24px; }
.section-tight { padding-top: 56px; padding-bottom: 56px; }
.section-narrow { max-width: 880px; }

.kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 12px;
}
.kicker-gold { color: var(--biz-gold-1); }

.section h2 {
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  margin-bottom: 14px;
  text-wrap: balance;
}

.lede {
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 600px;
  margin-bottom: 34px;
}

.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }

.serif { font-family: var(--serif); font-weight: 700; }

/* ============================== CARDS & GRIDS ============================== */

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card {
  background: #fff;
  border-radius: 20px;
  padding: 26px 24px;
  border: 1px solid rgba(20, 26, 77, .06);
  box-shadow: var(--shadow-card);
  transition: transform .25s cubic-bezier(.16,.84,.44,1), box-shadow .25s cubic-bezier(.16,.84,.44,1);
}
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(20, 26, 77, .12); }

.card h3 { font-size: 17px; font-weight: 700; margin: 12px 0 7px; }
.card p { font-size: 14.5px; line-height: 1.6; color: var(--muted); }

.ico svg { width: 22px; height: 22px; color: var(--navy); }
.ent .ico svg { color: var(--ent-navy); }
.sec-ico svg { width: 22px; height: 22px; color: var(--biz-gold-1); }
.ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #EDEFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
}
.ico-gold { background: #F7EED9; }
.ico-gold svg { color: var(--biz-gold-1); }

/* Lane cards (home) */
.lane {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  padding: 30px 26px;
  text-decoration: none;
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease;
}
.lane:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(20, 26, 77, .13); }

.lane .lane-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 14px;
}
.lane h3 { font-size: 21px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.lane p { font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.lane ul { list-style: none; margin: 16px 0 22px; }
.lane li { font-size: 14px; color: var(--body); padding: 5px 0 5px 24px; position: relative; }
.lane li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; color: var(--navy); }
.lane .lane-cta { margin-top: auto; font-weight: 700; font-size: 15px; color: var(--navy); }
.lane .lane-cta::after { content: " →"; }

.lane-business { position: relative; overflow: hidden; }
.lane-business::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--biz-gold-1), var(--biz-gold-2));
}
.lane-business .lane-tag, .lane-business li::before, .lane-business .lane-cta { color: var(--biz-gold-1); }

.lane-enterprise { background: var(--ent-navy); }
.lane-enterprise h3 { color: #fff; }
.lane-enterprise p { color: rgba(255, 255, 255, .82); }
.lane-enterprise li { color: rgba(255, 255, 255, .88); }
.lane-enterprise .lane-tag, .lane-enterprise li::before, .lane-enterprise .lane-cta { color: var(--ent-gold); }

/* ============================== STEPS ============================== */

.steps { counter-reset: s; display: grid; gap: 14px; }

.step {
  display: flex;
  gap: 17px;
  align-items: flex-start;
  background: #fff;
  border-radius: 18px;
  padding: 21px 20px;
  border: 1px solid rgba(20, 26, 77, .06);
  box-shadow: 0 3px 14px rgba(20, 26, 77, .06);
  transition: transform .25s cubic-bezier(.16,.84,.44,1), box-shadow .25s cubic-bezier(.16,.84,.44,1);
}
.step:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(20, 26, 77, .1); }
.step::before {
  counter-increment: s;
  content: counter(s);
  flex: 0 0 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.step h3 { font-size: 17px; font-weight: 700; margin-bottom: 5px; }
.step p { font-size: 14.5px; line-height: 1.6; color: var(--muted); }

.steps-gold .step::before { background: linear-gradient(135deg, var(--biz-gold-1), var(--biz-gold-2)); }

/* Launch path (business): vertical timeline, horizontal on wide screens */
.path { counter-reset: p; list-style: none; display: grid; gap: 16px; }
.path li {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 22px 20px 22px 66px;
  box-shadow: var(--shadow-card);
}
.path li::before {
  counter-increment: p;
  content: counter(p);
  position: absolute;
  left: 18px;
  top: 22px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--biz-gold-1), var(--biz-gold-2));
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.path h3 { font-size: 16px; font-weight: 700; margin-bottom: 5px; }
.path p { font-size: 14px; line-height: 1.55; color: var(--muted); }

@media (min-width: 860px) {
  .path { grid-template-columns: repeat(5, 1fr); gap: 14px; }
  .path li { padding: 62px 18px 22px; text-align: center; }
  .path li::before { left: 50%; transform: translateX(-50%); top: 16px; }
  .path li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 32px;
    left: calc(50% + 26px);
    width: calc(100% - 38px);
    height: 2px;
    background: linear-gradient(90deg, var(--biz-gold-2), #E8D9B8);
  }
}

/* ============================== DARK IMPACT BLOCK ============================== */

.impact {
  background: var(--ent-navy);
  color: #fff;
  border-radius: 22px;
  padding: 36px 34px;
}
.impact b {
  font-family: var(--serif);
  font-size: clamp(28px, 4.5vw, 38px);
  font-weight: 700;
  color: var(--ent-gold);
  display: block;
  margin-bottom: 10px;
}
.impact p { color: rgba(255, 255, 255, .88); font-size: 14.5px; line-height: 1.6; max-width: 680px; }
.impact ul { list-style: none; margin-top: 14px; display: grid; gap: 8px; }
.impact li { font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.92); padding-left: 24px; position: relative; font-weight: 600; }
.impact li::before { content: "✓"; position: absolute; left: 0; color: var(--ent-gold); font-weight: 700; }

/* ============================== PRICING ============================== */

.plan {
  background: #fff;
  border-radius: 24px;
  padding: 30px 28px;
  border: 1px solid rgba(20, 26, 77, .06);
  box-shadow: var(--shadow-card-lg);
  display: flex;
  flex-direction: column;
  transition: transform .25s cubic-bezier(.16,.84,.44,1), box-shadow .25s cubic-bezier(.16,.84,.44,1);
}
.plan:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(20, 26, 77, .14); }
.plan .plan-lane { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--navy); margin-bottom: 12px; }
.plan h3 { font-size: 21px; font-weight: 700; margin-bottom: 4px; }
.plan .plan-note { font-size: 13.5px; color: var(--faint); margin-top: 2px; }
.plan .n { font-size: 40px; font-weight: 700; color: var(--navy); margin-top: 14px; line-height: 1; }
.plan .n small { display: block; font-size: 14px; font-weight: 600; color: var(--muted); margin-top: 7px; letter-spacing: 0; }
.plan .per { font-size: 13.5px; color: var(--muted); margin-top: 7px; line-height: 1.5; }
.plan ul { list-style: none; margin: 20px 0 24px; }
.plan li { font-size: 14.5px; padding: 6px 0 6px 26px; position: relative; color: var(--body); line-height: 1.5; }
.plan li::before { content: "✓"; position: absolute; left: 2px; color: #2E7D32; font-weight: 700; }
.plan .btn { margin-top: auto; }

.plan-business .plan-lane { color: var(--biz-gold-1); }
.plan-business .n { color: var(--biz-gold-1); }

/* The enterprise plan wears the report cover: deep navy gradient + glow,
   white type. Gold is jewelry, not paint: exactly two gold moments (the
   lane eyebrow and the founding line); price and checks stay white so the
   card reads premium, not brassy. */
.plan-enterprise {
  background: var(--ent-navy);
  background-image:
    radial-gradient(circle at 82% -12%, rgba(61, 90, 254, .38), transparent 58%),
    linear-gradient(160deg, #0D1240 0%, #1A237E 62%, #283593 100%);
  color: #fff;
}
.plan-enterprise .plan-lane { color: var(--ent-gold); }
.plan-enterprise .plan-note { color: rgba(255, 255, 255, .65); }
/* Price font matches the other plans. Side by side, prices must read as one
   family (serif here looks off next to Quicksand numerals). Serif is reserved
   for INSIDE report artifacts: grade seals, the report cover. */
.plan-enterprise .n { color: #fff; }
.plan-enterprise .n small { color: rgba(255, 255, 255, .55); }
.plan-enterprise .per { color: rgba(255, 255, 255, .75); }
.plan-enterprise li { color: rgba(255, 255, 255, .9); }
.plan-enterprise li::before { color: rgba(255, 255, 255, .7); }
.plan-enterprise .founding { color: var(--ent-gold); }

.finePrint { font-size: 12.5px; color: var(--faint); margin-top: 10px; line-height: 1.55; }

/* Keep the plan CTAs on one line across cards: reserve equal fine-print height
   when the plans sit side by side, so a shorter note doesn't drop its button. */
@media (min-width: 700px) {
  /* Reserve equal heights so the price, feature list, and CTA all line up
     across cards regardless of how long each plan's copy runs. */
  .plan .plan-note { min-height: 34px; }
  .plan .per { min-height: 96px; }
  .plan .finePrint { min-height: 58px; }
}

/* ============================== SECURITY ROWS ============================== */

.sec-row { display: flex; gap: 15px; align-items: flex-start; margin-bottom: 16px; }
.sec-row .sec-ico { font-size: 21px; flex: none; margin-top: 1px; }
.sec-row p { font-size: 14.5px; color: var(--muted); line-height: 1.6; }
.sec-row b { color: var(--ink); }

/* ============================== FAQ ============================== */

.faq { display: grid; gap: 12px; }
.faq details {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 0 22px;
}
.faq summary {
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  padding: 19px 28px 19px 0;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 600;
  color: var(--navy);
}
.faq details[open] summary::after { content: "–"; }
.faq details p { font-size: 15px; line-height: 1.65; color: var(--muted); padding-bottom: 20px; }
.faq details p + p { margin-top: -8px; }

/* ============================== CLOSING CTA BAND ============================== */

.cta-band {
  background: var(--navy);
  background-image: var(--grad);
  color: #fff;
  text-align: center;
  padding: 72px 24px;
}
.cta-band.cta-ent { background: var(--ent-navy); background-image: var(--grad-ent); }
/* Badges in the CTA bands are loose inline spans (no flex wrapper), so give them
   real separation so the pair never touches when it wraps on phones. */
.cta-band .store-badge { margin: 6px 6px 0; }
.cta-band h2 { font-size: clamp(24px, 3.8vw, 34px); font-weight: 700; margin-bottom: 12px; }
.cta-band p { font-size: 16px; color: rgba(255, 255, 255, .85); max-width: 520px; margin: 0 auto 28px; line-height: 1.6; }

/* ============================== LEGAL / PROSE PAGES ============================== */

.prose { max-width: 700px; margin: 0 auto; padding: 8px 24px 88px; }
.prose h2 {
  font-size: 22px; font-weight: 700; color: var(--navy);
  margin: 44px 0 12px; letter-spacing: -.01em; scroll-margin-top: 96px;
}
.prose h2:first-of-type { margin-top: 8px; }
.prose p { font-size: 16.5px; line-height: 1.75; color: var(--body); margin-bottom: 14px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.prose .updated { font-size: 13px; color: var(--faint); margin-bottom: 4px; }

/* Opening paragraph reads a size up: it carries the whole promise of the page. */
.prose-lead { font-size: 18.5px !important; line-height: 1.65 !important; color: var(--muted) !important; }

/* "The short version" card. A privacy policy nobody reads is a failed document,
   so the honest summary sits above the legal text rather than under it. */
.prose-tldr {
  background: #fff; border: 1px solid rgba(26, 35, 126, .12);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 26px 28px; margin: 30px 0 8px;
}
.prose-tldr h3 {
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy); margin-bottom: 14px;
}
.prose-tldr ul { list-style: none; display: grid; gap: 11px; }
.prose-tldr li {
  font-size: 15.5px; line-height: 1.6; color: var(--body);
  padding-left: 27px; position: relative;
}
.prose-tldr li::before {
  content: ""; position: absolute; left: 2px; top: .5em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--navy); opacity: .85;
}

/* Section rail: skimmable on desktop, hidden where it would just be more scrolling. */
.prose-toc { margin: 34px 0 4px; padding: 0 0 26px; border-bottom: 1px solid rgba(26, 35, 126, .1); }
.prose-toc h3 {
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 12px;
}
.prose-toc ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.prose-toc a {
  display: inline-block; font-size: 14px; text-decoration: none; color: var(--navy);
  background: rgba(26, 35, 126, .055); border-radius: 999px; padding: 6px 13px;
  transition: background .16s ease;
}
.prose-toc a:hover { background: rgba(26, 35, 126, .11); text-decoration: none; }
@media (max-width: 640px) {
  .prose { padding-bottom: 64px; }
  .prose h2 { font-size: 20px; margin-top: 36px; }
  .prose p { font-size: 16px; }
  .prose-toc { display: none; }
  .prose-tldr { padding: 22px 20px; }
}

.page-hero { padding: 60px 24px 64px; }
.page-hero h1 { font-size: clamp(32px, 5vw, 48px); }

/* ============================== FOOTER ============================== */

.footer { background: var(--ent-navy); color: rgba(255, 255, 255, .75); padding: 56px 24px 30px; }
.footer-inner { max-width: 1040px; margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }

.footer-brand img { width: 64px; margin-bottom: 12px; }
.footer-brand p { font-size: 14px; line-height: 1.6; max-width: 260px; }

.footer h4 { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.footer ul { list-style: none; }
.footer li { margin-bottom: 9px; }
.footer a { color: rgba(255, 255, 255, .75); text-decoration: none; font-size: 14.5px; }
.footer a:hover { color: #fff; text-decoration: underline; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(255, 255, 255, .55);
}

/* ============================== MISC ============================== */

.quote-card { background: #fff; border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow-card); }
.quote-card blockquote { font-size: 15.5px; line-height: 1.65; color: var(--body); }
.quote-card blockquote::before { content: "“"; color: var(--navy); font-size: 34px; line-height: 0; vertical-align: -10px; margin-right: 2px; font-weight: 700; }
.quote-card figcaption { margin-top: 14px; font-size: 13.5px; font-weight: 700; color: var(--faint); }

.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { background: #EDEFFF; color: var(--navy); font-size: 13.5px; font-weight: 700; padding: 8px 15px; border-radius: 99px; }
.pill-gold-bg { background: #F7EED9; color: var(--biz-gold-1); }

/* Score ring, a small visual used on personal page */
.ring {
  width: 128px; height: 128px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: conic-gradient(#fff calc(var(--p) * 1%), rgba(255, 255, 255, .22) 0);
  position: relative;
}
.ring::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: #2A1F7E; }
.ring b { position: relative; font-size: 38px; font-weight: 700; color: #fff; }


/* ============================== APP SCREENSHOTS ============================== */

.phone {
  display: inline-block;
  border-radius: 38px;
  padding: 10px;
  background: #10142E;
  box-shadow: 0 24px 48px rgba(10, 14, 40, .35), inset 0 0 0 1.5px rgba(255, 255, 255, .12);
}
.phone img {
  display: block;
  width: 100%;
  border-radius: 30px;
}
.hero-phone {
  width: min(300px, 74vw);
  margin: 40px auto -110px;
  transform: rotate(-2deg);
}
.hero-phone:hover { transform: rotate(0deg); }
.phone { transition: transform .35s ease; }

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 22px;
  align-items: start;
}
.shot { text-align: center; }
.shot .phone { width: 100%; max-width: 240px; }
.shot figcaption {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
  margin-top: 12px;
}
@media (max-width: 700px) {
  .shots { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .hero-phone { margin-bottom: -80px; }
}

/* Space below a hero that a phone overlaps into */
.after-hero { padding-top: 150px; }
@media (max-width: 700px) { .after-hero { padding-top: 120px; } }

/* Three-jobs strip in the hero */
.jobs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.jobs span, .jobs a {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 99px;
  padding: 10px 18px;
  transition: background .15s ease;
}
.jobs a:hover { background: rgba(255, 255, 255, .22); }
.jobs span {
  font-size: 13.5px; font-weight: 700; color: #fff;
  background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 99px; padding: 10px 18px;
}

/* ============================== SCROLL REVEAL ==============================
   Progressive enhancement: the hidden state only exists once site.js adds
   `reveal-ready` to <html>. No JS (or reduced-motion) => nothing is hidden,
   content is always fully visible. site.js tags targets with [data-reveal]. */
[data-reveal] {
  transition: opacity .7s cubic-bezier(.16, .84, .44, 1),
              transform .7s cubic-bezier(.16, .84, .44, 1);
}
html.reveal-ready [data-reveal] { opacity: 0; transform: translateY(22px); }
html.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.reveal-ready [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ============================== CHAPTERS (home lanes) ==============================
   One umbrella hero, then each lane gets its own full-width cinematic chapter:
   a distinct color world, one headline, one line, one visual, one CTA. */
.chapter { padding: 96px 24px; overflow: hidden; }
@media (min-width: 880px) { .chapter { padding: 116px 24px; } }
.chapter-inner {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  align-items: center;
}
@media (min-width: 880px) {
  .chapter-inner { grid-template-columns: 1.05fr .95fr; gap: 72px; }
  /* Reversed chapters put the copy on the right, media on the left */
  .chapter-reverse .chapter-copy { order: 2; }
}

.chapter-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 14px;
}
.chapter h2, .scrub h2 {
  font-size: clamp(30px, 4.6vw, 46px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.03em;
  margin-bottom: 16px;
}
.chapter-lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 460px;
  margin-bottom: 28px;
}
.chapter-cta {
  display: inline-block;
  font-weight: 700;
  font-size: 16px;
  color: var(--navy);
  text-decoration: none;
}
.chapter-cta::after { content: "\2192"; display: inline-block; margin-left: .35em; transition: transform .18s ease; }
.chapter-cta:hover::after { transform: translateX(4px); }

.chapter-media { display: flex; justify-content: center; }
.chapter-media .phone { width: min(300px, 74vw); }

/* Personal: clean & warm */
.chapter-personal { background: #fff; }

/* Business: soft gold world */
.chapter-business { background: #FBF6EC; }
.chapter-business .chapter-kicker,
.chapter-business .chapter-cta { color: var(--biz-gold-1); }

/* Enterprise: dark, authoritative stage */
.chapter-enterprise { background: var(--ent-navy); background-image: var(--grad-ent); color: #fff; }
.chapter-enterprise .chapter-lede { color: rgba(255, 255, 255, .82); }
.chapter-enterprise .chapter-kicker,
.chapter-enterprise .chapter-cta { color: var(--ent-gold); }

/* Alternating soft-tint chapter for rhythm on single-lane pages */
.chapter-alt { background: #EFF1FA; }

/* Bigger, more cinematic headline for lane pages */
.chapter-xl h2 { font-size: clamp(34px, 5.4vw, 56px); line-height: 1.04; }

/* Soft glow behind device shots so they lift off the page */
.chapter-media { position: relative; }
.chapter-media .phone { position: relative; z-index: 1; }
.chapter-media::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 360px; height: 360px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 92, 200, .20), transparent 66%);
  z-index: 0;
  pointer-events: none;
}
.chapter-business .chapter-media::before { background: radial-gradient(circle, rgba(201, 163, 74, .22), transparent 66%); }
.chapter-enterprise .chapter-media::before { background: radial-gradient(circle, rgba(61, 90, 254, .35), transparent 66%); }

/* ============================== STAGE: full-bleed stat / statement ============================== */
.stage {
  background: var(--navy);
  background-image: var(--grad);
  color: #fff;
  text-align: center;
  padding: 120px 24px;
  overflow: hidden;
}
.stage.stage-ent { background: var(--ent-navy); background-image: var(--grad-ent); }
.stage.stage-biz { background: #8A5E1E; background-image: linear-gradient(160deg, #6E4A15 0%, #A9762A 55%, #C79A3E 100%); }
.stage .stage-kicker {
  font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255, 255, 255, .7); margin-bottom: 18px;
}
.stage .stage-num {
  font-size: clamp(84px, 17vw, 180px);
  font-weight: 700; line-height: .88; letter-spacing: -.04em;
  margin: 0 0 6px;
  background: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, .62));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #fff; /* fallback if clipping unsupported */
}
.stage h2 {
  font-size: clamp(30px, 4.6vw, 46px); font-weight: 700;
  letter-spacing: -.025em; line-height: 1.08; margin-bottom: 16px;
}
.stage p { font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .82); max-width: 560px; margin: 0 auto; }


/* ============================== POLISH (2026-07-19 flagship pass) ============================== */

::selection { background: rgba(74, 92, 200, .28); }

a:focus-visible, button:focus-visible, summary:focus-visible, .btn:focus-visible {
  outline: 3px solid rgba(74, 92, 200, .55);
  outline-offset: 3px;
  border-radius: 12px;
}

/* Per-item reveal (site.js tags grid/step/path children with a stagger delay) */
html.reveal-ready [data-reveal-item] { opacity: 0; transform: translateY(18px); }
html.reveal-ready [data-reveal-item].is-visible { opacity: 1; transform: none; }
[data-reveal-item] {
  transition: opacity .65s cubic-bezier(.16, .84, .44, 1) var(--rd, 0s),
              transform .65s cubic-bezier(.16, .84, .44, 1) var(--rd, 0s);
}
@media (prefers-reduced-motion: reduce) {
  html.reveal-ready [data-reveal-item] { opacity: 1 !important; transform: none !important; }
}

/* Device shots: a touch more presence */
.hero-phone, .hero-stage .phone { box-shadow: 0 42px 90px rgba(8, 11, 36, .5); }
.chapter-media .phone:hover { transform: translateY(-6px); }

/* FAQ + quote cards join the hairline family */
.faq details, .quote-card { border: 1px solid rgba(20, 26, 77, .06); }


/* ============================================================
   CINEMA (2026-07-19 jaw-drop pass): the Apple-grade layer.
   Home hero goes full-viewport with scroll physics; a showcase
   scene proves the product by filling the filing sheet live.
   ============================================================ */

/* --- Full-viewport opening hero (home) --- */
.hero-cine {
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 96px 24px 0;
}
.hero-cine .hero-anim { will-change: transform, opacity; }

.hero-cine h1 {
  font-size: clamp(50px, 8.6vw, 104px);
  /* line-height >= 1.04 + bottom padding: with background-clip:text, glyph
     paint outside the line box (the y/g descenders) loses its gradient and
     reads as cut off. The padding keeps every descender inside painted area. */
  line-height: 1.06;
  letter-spacing: -.04em;
  max-width: 1000px;
  padding-bottom: .08em;
  margin-bottom: 10px;
  background: linear-gradient(180deg, #fff 45%, rgba(255, 255, 255, .8));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #fff;
}
.hero-cine .hero-sub {
  font-size: clamp(17px, 2.2vw, 21px);
  max-width: 640px;
  margin-top: 6px;
}
.hero-cine .hero-ctas { margin-top: 36px; }
/* Hero device cluster: one phone on mobile, a fanned trio on wide screens. */
.hero-stage {
  position: relative;
  margin: 64px auto -120px;
  width: min(320px, 76vw);
  will-change: transform;
}
.hero-stage .hp-center { position: relative; z-index: 2; display: block; }
.hero-stage .hp-left, .hero-stage .hp-right { display: none; }
@media (min-width: 980px) {
  .hero-stage { width: 340px; margin-bottom: -140px; }
  .hero-stage .hp-left, .hero-stage .hp-right {
    display: block;
    position: absolute;
    top: 60px;
    width: 88%;
    z-index: 1;
    opacity: .88;
    filter: brightness(.82) saturate(.95);
  }
  .hero-stage .hp-left { left: -68%; transform: rotate(-9deg); }
  .hero-stage .hp-right { right: -68%; transform: rotate(9deg); }
}

/* Layered glow atmosphere */
.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .55;
  pointer-events: none;
}
.hero-glow.hg1 { width: 520px; height: 520px; background: #5C6BFF; top: -180px; left: -160px; }
.hero-glow.hg2 { width: 460px; height: 460px; background: #4A148C; bottom: -140px; right: -140px; opacity: .7; }
.hero-glow.hg3 { width: 300px; height: 300px; background: #FFD54F; bottom: 30%; left: 58%; opacity: .1; }
.hero-cine > *:not(.hero-glow) { position: relative; z-index: 1; }

/* Scroll cue */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: 30px; height: 30px;
  border-right: 2.5px solid rgba(255, 255, 255, .55);
  border-bottom: 2.5px solid rgba(255, 255, 255, .55);
  rotate: 45deg;
  animation: cue 2.2s ease-in-out infinite;
  z-index: 1;
}
@keyframes cue {
  0%, 100% { transform: translate(-50%, 0); opacity: .55; }
  50% { transform: translate(-50%, 9px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } }
@media (max-width: 700px) { .hero-cine { min-height: 88svh; } }

/* --- The showcase scene: the sheet fills itself --- */
.cinema {
  background: var(--ent-navy);
  background-image:
    radial-gradient(circle at 15% 8%, rgba(92, 107, 255, .32), transparent 52%),
    radial-gradient(circle at 88% 92%, rgba(74, 20, 140, .55), transparent 58%),
    linear-gradient(168deg, #0D1240 0%, #171E5E 55%, #23144D 100%);
  color: #fff;
  padding: 120px 24px;
  overflow: hidden;
}
.cinema-inner {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 52px;
  align-items: center;
}
@media (min-width: 880px) { .cinema-inner { grid-template-columns: 1fr 1fr; gap: 72px; } }
.cinema .chapter-kicker { color: var(--ent-gold); }
.cinema h2 {
  font-size: clamp(34px, 5.4vw, 60px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.035em;
  margin-bottom: 18px;
  text-wrap: balance;
}
.cinema .cinema-lede { font-size: 18px; line-height: 1.65; color: rgba(255, 255, 255, .85); max-width: 460px; margin-bottom: 26px; }
.cinema .chapter-cta { color: var(--ent-gold); }

/* The living answer sheet */
.sheet {
  background: #fff;
  border-radius: 26px;
  padding: 22px;
  color: var(--ink);
  box-shadow: 0 40px 90px rgba(5, 8, 30, .55), 0 0 0 1px rgba(255, 255, 255, .08);
  max-width: 430px;
  margin: 0 auto;
  width: 100%;
}
.sheet-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sheet-head img {
  width: 40px;
  background: var(--grad);
  border-radius: 11px;
  padding: 5px;
}
.sheet-head b { font-size: 16px; display: block; }
.sheet-head span { font-size: 12px; color: var(--faint); }
.sheet-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.sheet-chips span {
  font-size: 11px; font-weight: 700; color: var(--navy);
  background: #EDEFFF; border-radius: 99px; padding: 5px 11px;
}
.sheet-row {
  border: 1px solid rgba(20, 26, 77, .08);
  border-radius: 14px;
  padding: 11px 14px;
  margin-bottom: 9px;
  position: relative;
  min-height: 58px;
}
.sheet-row .sl {
  font-size: 9.5px; font-weight: 700; letter-spacing: .09em;
  color: var(--faint); text-transform: uppercase;
  display: flex; justify-content: space-between;
}
.sheet-row .sv { font-size: 14.5px; font-weight: 700; margin-top: 3px; min-height: 19px; }
.sheet-row .check {
  position: absolute; right: 12px; bottom: 10px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #43A047; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  opacity: 0; transform: scale(.4);
  transition: opacity .3s cubic-bezier(.16,.84,.44,1), transform .3s cubic-bezier(.34,1.56,.64,1);
}
.sheet-row.filled .check { opacity: 1; transform: scale(1); }
.sheet-row.typing .sv::after {
  content: ""; display: inline-block; width: 2px; height: 14px;
  background: var(--navy); margin-left: 2px; vertical-align: -2px;
  animation: caret 
 .8s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.sheet-row.srlock .sv { filter: blur(4px); user-select: none; }
.sheet-stamp {
  margin-top: 13px;
  background: linear-gradient(120deg, #0C6E5E, #10897B);
  color: #fff;
  border-radius: 13px;
  padding: 12px;
  text-align: center;
  font-weight: 700;
  font-size: 13.5px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s cubic-bezier(.16,.84,.44,1) .15s, transform .5s cubic-bezier(.16,.84,.44,1) .15s;
}
.sheet-done .sheet-stamp { opacity: 1; transform: none; }

/* --- Bigger lane-page heroes + chapter presence --- */
.hero:not(.hero-cine) h1 { font-size: clamp(40px, 7vw, 72px); line-height: 1.02; letter-spacing: -.04em; }
.chapter-xl h2 { font-size: clamp(36px, 5.8vw, 64px); }
.chapter-media .phone { width: min(330px, 76vw); }


/* Every hero gets the glow atmosphere automatically (the home hero carries its
   own richer .hero-glow layers, so it opts out of the pseudo pair). Children
   are lifted above the glows so text never sits under a blur. */
.hero { position: relative; }
.hero:not(.hero-cine)::before,
.hero:not(.hero-cine)::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}
.hero:not(.hero-cine)::before {
  width: 420px; height: 420px;
  background: #5C6BFF; opacity: .38;
  top: -150px; left: -130px;
}
.hero:not(.hero-cine)::after {
  width: 380px; height: 380px;
  background: #4A148C; opacity: .5;
  bottom: -140px; right: -110px;
}
.hero-ent:not(.hero-cine)::before { background: #3D5AFE; opacity: .3; }
.hero:not(.hero-cine) > * { position: relative; z-index: 1; }


/* Links on dark surfaces: navy-on-navy is invisible. Gold with a quiet
   underline, per the enterprise-gold-on-navy rule. */
.impact a, .stage a, .cinema a, .cta-band p a, .chapter-enterprise a:not(.chapter-cta) {
  color: var(--ent-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.impact a:hover, .stage a:hover, .cinema a:hover { color: #FFE9A8; }


/* Staged hero entrance: mascot, headline, sub, and CTAs rise in sequence on
   load. Pure CSS; reduced-motion renders everything settled. */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
/* Order matters: float is listed LAST so it wins the transform once its delay
   ends; rise-in's forwards fill holds until then. The phone animates opacity
   only, because the scroll physics own its transform via inline style. */
.hero-cine .hero-mascot { animation: rise-in .7s cubic-bezier(.16,.84,.44,1) both, float 5.5s ease-in-out 1.3s infinite; }
.hero-cine h1 { animation: rise-in .8s cubic-bezier(.16,.84,.44,1) .12s both; }
.hero-cine .hero-sub { animation: rise-in .8s cubic-bezier(.16,.84,.44,1) .24s both; }
.hero-cine .hero-ctas { animation: rise-in .8s cubic-bezier(.16,.84,.44,1) .38s both; }
.hero-cine .hero-stage { animation: fade-in 1s ease .5s both; }
@media (prefers-reduced-motion: reduce) {
  .hero-cine .hero-mascot, .hero-cine h1, .hero-cine .hero-sub,
  .hero-cine .hero-ctas, .hero-cine .hero-stage { animation: none; }
}


/* ============================================================
   LANE CINEMA (2026-07-20). Lane pages open like the home page:
   full-viewport hero, staged entrance, scroll physics, a device
   stage that overlaps into the first chapter.
   ============================================================ */

/* Lane heroes carry more content (chip, jobs strip, two CTAs), so the
   headline steps down a size from the home hero and the stage sits closer. */
.hero-lane { min-height: 88svh; }
.hero-lane h1 { font-size: clamp(40px, 6.4vw, 80px); max-width: 940px; }
.hero-lane .hero-sub { max-width: 620px; }
.hero-lane .hero-ctas { margin-top: 28px; }
.hero-lane .hero-stage { margin-top: 56px; }
.hero-lane .chip { margin-bottom: 18px; }
@media (max-width: 700px) { .hero-lane { min-height: 84svh; } }

/* The chip and jobs strip join the staged entrance */
.hero-cine .chip { animation: fade-in .8s ease .1s both; }
.hero-cine .jobs { animation: rise-in .8s cubic-bezier(.16,.84,.44,1) .3s both; }
@media (prefers-reduced-motion: reduce) {
  .hero-cine .chip, .hero-cine .jobs { animation: none; }
}

/* Sections a hero device overlaps into (the stage hangs 120 to 140px down) */
.chapter.after-hero { padding-top: 180px; }
.stage.after-hero { padding-top: 210px; }
@media (max-width: 700px) {
  .chapter.after-hero { padding-top: 150px; }
  .stage.after-hero { padding-top: 170px; }
}

/* Per-lane glow tints. Business warms its third glow with burnished gold;
   enterprise cools the first to the report-cover blue. */
.hero-biz .hero-glow.hg3 { background: #C79A3E; opacity: .16; }
.hero-ent .hero-glow.hg1 { background: #3D5AFE; opacity: .4; }
.hero-ent .hero-glow.hg3 { background: #FFD54F; opacity: .09; }

/* A single-phone stage (enterprise) reads best a touch larger */
.hero-stage.hero-stage-solo { width: min(340px, 76vw); }
@media (min-width: 980px) { .hero-stage.hero-stage-solo { width: 360px; } }


/* ============================================================
   PRICING CINEMA (2026-07-20). The pricing page opens like the
   rest of the site, just quieter: a cinema hero with no device
   stage, lane-accent hairlines on the plan cards, and the
   honesty promise on a full-bleed stage band.
   ============================================================ */

.hero-quiet { min-height: 56svh; padding-bottom: 72px; }
.hero-quiet h1 { font-size: clamp(40px, 6vw, 76px); }
@media (max-width: 700px) { .hero-quiet { min-height: 50svh; } }

/* Plan cards wear their lane across the top, like the home lane cards */
.plan { position: relative; overflow: hidden; }
.plan::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--navy), var(--purple));
}
.plan-business::before { background: linear-gradient(90deg, var(--biz-gold-1), var(--biz-gold-2)); }
.plan-enterprise::before { background: linear-gradient(90deg, #3D5AFE, #5C6BFF); }

/* The lifted-children rule (.hero-cine > *:not(.hero-glow)) outranks
   .scroll-cue's own position: absolute and turned the cue relative,
   pushing it off-center. Re-pin it. */
.hero .scroll-cue { position: absolute; }

/* The frosted nav sits in normal flow, so at the top of the page its glass
   sampled the light body background and read gray; only after scrolling did
   the hero slide under it and tint it purple. Pull every hero up beneath the
   64px nav band so the glass is always over the gradient at the top. */
.nav { margin-bottom: -64px; }
.hero { padding-top: 152px; }
.hero-cine { padding-top: 160px; }
.page-hero { padding-top: 124px; }

/* Store badges keep their spacing outside the cta-band too */
.center .store-badge { margin: 6px 6px 0; }

/* Honesty band: the jobs pills work on any stage */
.stage .jobs { margin-top: 30px; }
.stage .honest-note {
  margin: 26px auto 0;
  font-size: 15px;
  color: rgba(255, 255, 255, .72);
  max-width: 600px;
  line-height: 1.65;
}


/* ============================================================
   LIVING NUMBERS + APP MOTION (2026-07-20 deep pass).
   The app's reveal language on the web: the count-up score ring,
   score bars that fill, grade seals that pop, journey rows with
   the gold NEXT chip, jewel-box closing bands, and the one
   shimmer the design system allows (the Pro card).
   ============================================================ */

/* --- Score ring (the app's hero ring, drawn on scroll) --- */
.score-ring { position: relative; width: 200px; height: 200px; margin: 0 auto 20px; }
.score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.score-ring .rbg { stroke: rgba(255, 255, 255, .22); }
.score-ring .rfg { stroke: #fff; transition: stroke-dashoffset 1.3s cubic-bezier(.22, .8, .3, 1) .15s; }
.ring-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ring-center b { font-size: 60px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.ring-center span { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .72); margin-top: 6px; }

/* --- Scorecard: bars fill, seals pop (enterprise report artifact) --- */
html.reveal-ready:not(.reduce-motion) .dim .seal {
  opacity: 0; transform: scale(.4);
  transition: opacity .45s cubic-bezier(.34, 1.56, .64, 1) var(--sd, 0s),
              transform .45s cubic-bezier(.34, 1.56, .64, 1) var(--sd, 0s);
}
html.reveal-ready .dim.is-anim .seal { opacity: 1; transform: none; }
.dim .bar i { transition: width 1s cubic-bezier(.22, .8, .3, 1) calc(var(--sd, 0s) + .12s); }
@media (prefers-reduced-motion: reduce) {
  html.reveal-ready .dim .seal { opacity: 1 !important; transform: none !important; }
}

/* --- The report frame: the scorecard sits on the report cover --- */
.report-frame {
  background-image:
    radial-gradient(circle at 82% -12%, rgba(61, 90, 254, .38), transparent 58%),
    linear-gradient(160deg, #0D1240 0%, #1A237E 62%, #283593 100%);
  border-radius: 26px;
  padding: 26px 24px 24px;
  box-shadow: 0 30px 70px rgba(5, 8, 30, .35);
  text-align: left;
}
.report-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
}
.chip-confidential {
  font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ent-gold); border: 1px solid rgba(255, 213, 79, .5);
  border-radius: 4px; padding: 5px 10px;
}
.rf-brand { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.rule-gold-sm { width: 56px; height: 2px; background: var(--ent-gold); border: none; margin: 14px 0 18px; opacity: .85; }

/* --- Journey timeline variants (app journey rows) --- */
.path li { overflow: hidden; }
.path-ent li::before { background: linear-gradient(135deg, #3949AB, #5C6BFF); }
@media (min-width: 860px) {
  .path-ent li:not(:last-child)::after { background: linear-gradient(90deg, #5C6BFF, #C9CFF2); }
}
.path .when { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ent-ink); margin-bottom: 7px; }

/* Enterprise step circles pick up the report indigo */
.ent .step::before { background: linear-gradient(135deg, #3949AB, #5C6BFF); }

/* --- Jewel-box closing bands: the floating mascot joins the moment --- */
.cta-band .cta-mascot { width: 84px; margin: 0 auto 16px; display: block; }

/* --- The one allowed shimmer: the Pro card --- */
.plan-shimmer { position: relative; overflow: hidden; }
.plan-shimmer::after {
  content: "";
  position: absolute; top: -60%; bottom: -60%; left: -70%; width: 46%;
  background: linear-gradient(105deg, transparent, rgba(108, 99, 255, .09), transparent);
  transform: rotate(12deg);
  animation: shimmer 4.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmer { 0%, 18% { left: -70%; } 62%, 100% { left: 135%; } }
@media (prefers-reduced-motion: reduce) { .plan-shimmer::after { animation: none; opacity: 0; } }

/* --- Letterhead card (app letterhead documents): the founder note --- */
.letterhead {
  background: #fff; border-radius: 22px; padding: 40px 36px;
  border: 1px solid rgba(20, 26, 77, .06);
  box-shadow: var(--shadow-card-lg);
  max-width: 680px; margin: 0 auto; text-align: left;
}
.letterhead h3 { font-family: var(--serif); font-size: 25px; font-weight: 700; }
.letterhead .lh-date { font-size: 12.5px; color: var(--faint); margin-top: 6px; }
.letterhead .lh-rule { width: 44px; height: 2px; background: var(--navy); border: none; margin: 16px 0 20px; }
.letterhead p { font-size: 15.5px; line-height: 1.75; color: var(--body); }
.letterhead .sig { margin-top: 20px; font-weight: 700; color: var(--ink); }
@media (max-width: 700px) { .letterhead { padding: 30px 24px; } }

/* --- Press feedback (the app's haptic, translated) --- */
.btn:active, .store-badge:active { transform: scale(.97); }
.card:active, .plan:active, .lane:active { transform: translateY(-1px) scale(.995); }

/* --- Mobile hero fan: the flanking phones peek in instead of vanishing --- */
@media (max-width: 979px) {
  .hero-stage:not(.hero-stage-solo) .hp-left,
  .hero-stage:not(.hero-stage-solo) .hp-right {
    display: block;
    position: absolute;
    top: 40px;
    width: 82%;
    z-index: 1;
    opacity: .5;
    filter: brightness(.72) saturate(.9);
  }
  .hero-stage:not(.hero-stage-solo) .hp-left { left: -52%; transform: rotate(-10deg); }
  .hero-stage:not(.hero-stage-solo) .hp-right { right: -52%; transform: rotate(10deg); }
}

/* Inline bolds inside impact list rows stay body-sized white (the big serif
   gold .impact b treatment is for the stat headline only) */
.impact li b { font-family: var(--font); font-size: inherit; color: #fff; display: inline; margin: 0; }

/* ============================== MINIMAL FOOTER (2026-07-20) ==============================
   One quiet, centered block: the five destinations, a muted row of
   guides and legal, and the base line. Nothing strewn about. */
.footer-min { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; }
.footer-nav a { color: rgba(255, 255, 255, .88); font-size: 14.5px; font-weight: 600; text-decoration: none; }
.footer-nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-sub { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
.footer-sub a { color: rgba(255, 255, 255, .55); font-size: 13px; text-decoration: none; }
.footer-sub a:hover { color: rgba(255, 255, 255, .85); }
.footer-base {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-top: 22px; margin-top: 6px; width: 100%;
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between;
  font-size: 12.5px; color: rgba(255, 255, 255, .5);
}
.footer-base a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.footer-base a:hover { color: #fff; }
@media (max-width: 700px) { .footer-base { justify-content: center; text-align: center; } }


/* ============================================================
   PRODUCT SCENES (2026-07-20). Three more "watch it work"
   moments in the sheet's family: an interview becoming graded
   evidence (enterprise), a day checking itself off (personal),
   and the readiness climb (enterprise). JS drives the sequence;
   .scene classes gate each beat; reduced motion settles all.
   ============================================================ */

/* Personal flavor of the cinema band: the brand gradient world */
.cinema-personal {
  background-image:
    radial-gradient(circle at 15% 8%, rgba(92, 107, 255, .35), transparent 52%),
    radial-gradient(circle at 88% 92%, rgba(74, 20, 140, .6), transparent 58%),
    linear-gradient(168deg, #171E5E 0%, #2A1B6E 55%, #3D1470 100%);
}
.cinema-personal .chapter-kicker { color: rgba(255, 255, 255, .85); }
.cinema-personal .chapter-cta { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* --- Interview scene (enterprise) --- */
.ivscene { max-width: 440px; margin: 0 auto; width: 100%; }
.iv-bubble {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 20px 20px 20px 6px;
  padding: 16px 18px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.iv-tag {
  display: block;
  font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .6); margin-bottom: 8px;
}
.iv-text { font-size: 16px; line-height: 1.55; color: #fff; min-height: 75px; font-style: italic; }
.iv-text::after {
  content: ""; display: none; width: 2px; height: 15px;
  background: #fff; margin-left: 2px; vertical-align: -2px;
  animation: caret .8s steps(1) infinite;
}
.ivscene.typing .iv-text::after { display: inline-block; }
.iv-card {
  background: #fff; border-radius: 20px; padding: 20px;
  margin-top: 14px; color: var(--ink);
  box-shadow: 0 30px 70px rgba(5, 8, 30, .5);
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.16, .84, .44, 1), transform .55s cubic-bezier(.16, .84, .44, 1);
}
.ivscene.s2 .iv-card { opacity: 1; transform: none; }
.iv-tag2 {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ent-ink); margin-bottom: 12px;
}
.iv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.iv-row .ivl { font-size: 15px; font-weight: 700; }
.iv-seal {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--grade-c); color: #fff;
  font-family: var(--serif); font-size: 18px; font-weight: 700;
  opacity: 0; transform: scale(.4);
  transition: opacity .45s cubic-bezier(.34, 1.56, .64, 1) .5s, transform .45s cubic-bezier(.34, 1.56, .64, 1) .5s;
}
.ivscene.s2 .iv-seal { opacity: 1; transform: none; }
.iv-bar { display: block; height: 4px; border-radius: 2px; background: rgba(20, 27, 77, .08); margin: 10px 0 14px; overflow: hidden; }
.iv-bar i { display: block; height: 100%; border-radius: 2px; background: var(--grade-c); width: 0; transition: width 1s cubic-bezier(.22, .8, .3, 1) .35s; }
.ivscene.s2 .iv-bar i { width: var(--w, 50%); }
.iv-hours { font-size: 14px; color: var(--muted); }
.iv-hours b { color: var(--ink); font-size: 15px; }
.iv-stamp {
  margin-top: 14px;
  background: linear-gradient(120deg, #0C6E5E, #10897B);
  color: #fff; border-radius: 13px; padding: 12px; text-align: center;
  font-weight: 700; font-size: 13.5px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s cubic-bezier(.16, .84, .44, 1), transform .5s cubic-bezier(.16, .84, .44, 1);
}
.ivscene.s4 .iv-stamp { opacity: 1; transform: none; }

/* --- Day scene (personal) --- */
.daycard {
  background: #fff; border-radius: 26px; padding: 22px; color: var(--ink);
  box-shadow: 0 40px 90px rgba(5, 8, 30, .55), 0 0 0 1px rgba(255, 255, 255, .08);
  max-width: 420px; margin: 0 auto; width: 100%;
}
.dc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dc-head > div > b { font-size: 17px; display: block; }
.dc-head > div > span { font-size: 12px; color: var(--faint); }
.dc-streak {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  background: #FFF3E0; color: #B4530A; border-radius: 99px;
  padding: 7px 13px; font-size: 13px; font-weight: 700;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.daycard.streak-pop .dc-streak { transform: scale(1.12); }
.dc-row {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid rgba(20, 26, 77, .08);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 9px;
  position: relative;
}
.dc-ico {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  background: #EDEFFF;
}
.dc-ico.warm { background: #FFF3E0; }
.dc-ico.deep { background: #ECE7FA; }
.dc-body { flex: 1; min-width: 0; }
.dc-kick { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.dc-title { font-size: 14.5px; font-weight: 700; margin-top: 2px; }
.dc-row .check {
  position: static; width: 22px; height: 22px; border-radius: 50%;
  background: transparent; border: 2px solid rgba(20, 26, 77, .16);
  color: transparent; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.dc-row.filled .check { background: #43A047; border-color: #43A047; color: #fff; transform: scale(1.08); }
.dc-points {
  position: absolute; right: 46px; top: -10px;
  background: linear-gradient(120deg, #FFE7A3, #FFC24D); color: #4E3200;
  font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: 99px;
  box-shadow: 0 6px 16px rgba(120, 80, 0, .25);
  opacity: 0; transform: translateY(8px) scale(.7);
  transition: opacity .4s cubic-bezier(.34, 1.56, .64, 1), transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.dc-row.points .dc-points { opacity: 1; transform: none; }
.dc-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 13px; padding: 12px 14px;
  background: var(--grad); border-radius: 13px; color: #fff;
}
.dc-foot span { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.dc-foot b { font-size: 19px; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.daycard.score-pop .dc-foot b { transform: scale(1.18); }

/* --- The climb (enterprise): three assessments, one story --- */
.climb {
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(20px, 6vw, 56px);
  height: 300px; margin: 40px auto 0; max-width: 560px;
}
.cl-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; flex: 1; max-width: 120px; }
.cl-seal {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--band); color: #fff;
  font-family: var(--serif); font-size: 20px; font-weight: 700;
  margin-bottom: 8px;
  opacity: 0; transform: scale(.4);
  transition: opacity .45s cubic-bezier(.34, 1.56, .64, 1) var(--d2, .9s), transform .45s cubic-bezier(.34, 1.56, .64, 1) var(--d2, .9s);
}
.cl-col b { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 8px; opacity: 0; transition: opacity .4s ease var(--d2, .9s); }
.cl-col i {
  display: block; width: 100%; max-width: 84px;
  height: 0; border-radius: 12px 12px 4px 4px;
  background: linear-gradient(180deg, var(--band), color-mix(in srgb, var(--band) 72%, #141B4D));
  transition: height 1s cubic-bezier(.22, .8, .3, 1) var(--d1, 0s);
}
.climb.go .cl-col i { height: var(--h); }
.climb.go .cl-seal, .climb.go .cl-col b { opacity: 1; transform: none; }
.cl-lab { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  .ivscene .iv-card, .ivscene .iv-seal, .ivscene .iv-stamp,
  .dc-row .check, .dc-points, .cl-seal, .cl-col b { transition: none; }
}

/* Business/enterprise pages carry the briefcase mascot. Its face fills about
   1.29x more canvas than the personal mascot, so it renders at matched size
   (personal size divided by 1.29) per the design doctrine. */
.hero-mascot.mascot-biz { width: 102px; }
.cta-band .cta-mascot.mascot-biz { width: 65px; }

/* The range dash in big stat numerals gets air on both sides (the tight
   letter-spacing otherwise presses it into the digits) */
.stage-num .num-dash { margin: 0 .09em; letter-spacing: 0; }


/* ============================================================
   BENTO + COMPARE + DOC SCENE + GALLERY + LIVE SHOTS
   (2026-07-20 "fold it all in" pass)
   ============================================================ */

/* Live screen recordings inside phone frames */
.phone video { display: block; width: 100%; border-radius: 30px; }

/* --- Bento grid: everything Ailly, one glance --- */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  text-align: left;
}
.b {
  background: #fff;
  border: 1px solid rgba(20, 26, 77, .06);
  border-radius: 20px;
  padding: 22px 20px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: transform .25s cubic-bezier(.16,.84,.44,1), box-shadow .25s cubic-bezier(.16,.84,.44,1);
}
.b:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(20, 26, 77, .12); }
.b h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 6px; }
.b p { font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.b-2w { grid-column: span 2; }
.b-2h { grid-row: span 2; }
.b-kick {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--navy); margin-bottom: 10px;
}
.b-dark { background: var(--ent-navy); background-image: var(--grad-ent); border: none; }
.b-dark h3 { color: #fff; }
.b-dark p { color: rgba(255, 255, 255, .78); }
.b-dark .b-kick { color: var(--ent-gold); }
.b-gold { background: #FBF6EC; }
.b-gold .b-kick { color: var(--biz-gold-1); }
/* tiny visuals inside tiles */
.b-ask {
  display: flex; align-items: center; gap: 9px;
  background: var(--grad); border-radius: 99px; padding: 11px 16px;
  color: rgba(255, 255, 255, .85); font-size: 13px; margin-top: 14px;
}
.b-ask i { font-style: normal; }
.b-ask span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.b-seal {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--grade-b); color: #fff;
  font-family: var(--serif); font-size: 20px; font-weight: 700;
  margin-bottom: 12px;
}
.b-flame { font-size: 26px; margin-bottom: 8px; display: block; }
.b-chipgold {
  display: inline-block; margin-bottom: 12px;
  font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ent-gold); border: 1px solid rgba(255, 213, 79, .5);
  border-radius: 4px; padding: 4px 9px;
}
.b-widget {
  width: 92px; height: 92px; border-radius: 22px;
  background: var(--grad); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  margin-bottom: 12px; box-shadow: 0 10px 24px rgba(20, 26, 77, .25);
}
.b-widget b { font-size: 26px; line-height: 1; }
.b-widget span { font-size: 10px; font-weight: 700; margin-top: 4px; opacity: .8; }
@media (max-width: 880px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
}
/* iPhone: one confident column; every tile full-width and full-density */
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .b-2w { grid-column: auto; }
  .b-2h { grid-row: auto; }
  .b { padding: 24px 22px; }
  .b h3 { font-size: 18px; }
  .b p { font-size: 14.5px; }
}

/* --- The honest math: Launch vs. the big filing sites --- */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 780px; margin: 34px auto 0; text-align: left; }
.vs-col { border-radius: 22px; padding: 26px 24px; }
.vs-ailly { background: var(--ent-navy); background-image: linear-gradient(160deg, #6E4A15 0%, #A9762A 60%, #C79A3E 100%); color: #fff; box-shadow: 0 18px 44px rgba(110, 74, 21, .35); }
.vs-them { background: #fff; border: 1px solid rgba(20, 26, 77, .08); box-shadow: var(--shadow-card); }
.vs-col h3 { font-size: 17px; font-weight: 700; margin-bottom: 16px; }
.vs-them h3 { color: var(--muted); }
.vs-col ul { list-style: none; }
.vs-col li { font-size: 14px; line-height: 1.5; padding: 8px 0 8px 26px; position: relative; }
.vs-ailly li::before { content: "\2713"; position: absolute; left: 0; font-weight: 700; color: #fff; }
.vs-them li { color: var(--muted); }
.vs-them li::before { content: "\2717"; position: absolute; left: 0; font-weight: 700; color: #C62828; }
.vs-note { font-size: 12.5px; color: var(--faint); margin-top: 14px; text-align: center; }
@media (max-width: 640px) { .vs { grid-template-columns: 1fr; } }

/* --- Business doc scene: the letterhead writes itself --- */
.cinema-biz {
  background-image:
    radial-gradient(circle at 15% 8%, rgba(255, 213, 130, .25), transparent 52%),
    radial-gradient(circle at 88% 92%, rgba(60, 34, 5, .55), transparent 58%),
    linear-gradient(168deg, #5C3D10 0%, #8A5E1E 55%, #B07F2E 100%);
}
.docscene {
  background: #fff; border-radius: 22px; padding: 30px 28px;
  max-width: 430px; margin: 0 auto; width: 100%;
  color: var(--ink);
  box-shadow: 0 40px 90px rgba(40, 24, 2, .5);
  min-height: 320px;
}
.doc-title { font-family: var(--serif); font-size: 22px; font-weight: 700; min-height: 30px; }
.doc-sub { font-size: 12.5px; color: var(--faint); margin-top: 4px; }
.doc-rule { width: 44px; height: 2px; background: var(--biz-gold-1); border: none; margin: 16px 0 18px; transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.22,.8,.3,1); }
.docscene.s2 .doc-rule { transform: none; }
.doc-line { font-size: 14px; line-height: 1.7; color: var(--body); min-height: 48px; }
.docscene.typing .doc-line::after, .docscene.typing-t .doc-title::after {
  content: ""; display: inline-block; width: 2px; height: 14px;
  background: var(--biz-gold-1); margin-left: 2px; vertical-align: -2px;
  animation: caret .8s steps(1) infinite;
}
.doc-stamp {
  margin-top: 18px;
  background: linear-gradient(120deg, #0C6E5E, #10897B);
  color: #fff; border-radius: 13px; padding: 12px; text-align: center;
  font-weight: 700; font-size: 13.5px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s cubic-bezier(.16,.84,.44,1), transform .5s cubic-bezier(.16,.84,.44,1);
}
.docscene.s3 .doc-stamp { opacity: 1; transform: none; }

/* --- Screens gallery: a snap-scroll look inside --- */
.gallery {
  display: flex; gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 10px 24px 26px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.gallery::-webkit-scrollbar { display: none; }
.gal {
  flex: 0 0 auto; width: 230px;
  scroll-snap-align: center;
  text-align: center;
}
.gal .phone { width: 100%; }
.gal figcaption { font-size: 13px; font-weight: 700; color: var(--muted); margin-top: 12px; }
.gallery-wrap { max-width: 1100px; margin: 0 auto; }


/* ============================================================
   BENTO v2 (2026-07-20): every tile is a miniature product
   artifact, not a text card.
   ============================================================ */
.b-stage { background: var(--navy); background-image: var(--grad); border: none; }
.b-stage h3 { color: #fff; }
.b-stage p { color: rgba(255, 255, 255, .8); }
.b-stage .b-kick { color: rgba(255, 255, 255, .85); }

/* Mini conversation (Ask Ailly) */
.mini-q {
  background: #fff; color: var(--ink);
  border-radius: 16px 16px 4px 16px;
  padding: 10px 14px; font-size: 13.5px; font-weight: 600;
  margin: 16px 0 8px 34px;
}
.mini-a {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  border-radius: 16px 16px 16px 4px;
  padding: 10px 14px; font-size: 13.5px; line-height: 1.5;
  margin-right: 34px;
}
.b-stage .b-ask { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .75); }

/* Every tile: artifact up top, words seated at the bottom, no dead zones */
.b { display: flex; flex-direction: column; }
.b > h3 { margin-top: auto; padding-top: 14px; }
.b > h3 + p { margin-top: 0; }
.b-stage > h3 { margin-top: 0; padding-top: 0; }

/* Graded row (the app scorecard, miniature) */
.mini-grade { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mg-dims { display: grid; gap: 8px; }
.mg-dim { display: flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.mg-dim > span:first-child { flex: 0 0 88px; }
.mg-minibar { display: block; flex: 1; height: 4px; border-radius: 2px; background: rgba(20, 27, 77, .08); overflow: hidden; }
.mg-minibar i { display: block; height: 100%; border-radius: 2px; background: var(--grade-b); }
.mini-grade .b-seal { margin: 0; }
.mini-grade .mg-body { flex: 1; }
.mini-grade .mg-score { font-size: 13px; font-weight: 700; color: var(--ink); }
.mini-grade .mg-bar { display: block; height: 4px; border-radius: 2px; background: rgba(20, 27, 77, .08); margin-top: 6px; overflow: hidden; }
.mini-grade .mg-bar i { display: block; height: 100%; width: 68%; border-radius: 2px; background: var(--grade-b); }

/* Streak week (dots that got done) */
.mini-week { display: flex; gap: 6px; margin-bottom: 14px; }
.mini-week span {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  background: #EDEFFF; color: var(--faint);
}
.mini-week .done { background: #43A047; color: #fff; }
.mini-week .today { background: linear-gradient(135deg, #FFE7A3, #FFC24D); color: #4E3200; }
.b .mini-best { font-size: 12px; font-weight: 700; color: #B4530A; }

/* Midnight advisor exchange */
.mini-time { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: var(--faint); margin-bottom: 8px; }
.mini-msg {
  background: #fff; border: 1px solid rgba(20, 26, 77, .08);
  border-radius: 14px; padding: 9px 12px;
  font-size: 12.5px; line-height: 1.45; color: var(--body);
  margin-bottom: 6px;
}
.mini-msg.me { background: #EDEFFF; font-weight: 600; }

/* Watched renewal row */
.mini-renewal {
  background: #fff; border: 1px solid rgba(20, 26, 77, .08);
  border-radius: 14px; padding: 11px 13px; margin-bottom: 14px;
}
.mini-renewal b { display: block; font-size: 13px; }
.mini-renewal .ok { display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 700; color: #2E7D32; background: #E8F5E9; border-radius: 99px; padding: 4px 10px; }
.mini-renewal.mr-tight { margin-top: -6px; }

/* Miniature report cover */
.b-report { display: flex; flex-direction: row; gap: 18px; align-items: center; }
.mini-cover {
  flex: 0 0 116px;
  background-image: linear-gradient(160deg, #0D1240 0%, #1A237E 62%, #283593 100%);
  border-radius: 12px; padding: 12px 10px; text-align: center;
  box-shadow: 0 10px 24px rgba(5, 8, 30, .4);
}
.mini-cover .chip-confidential { font-size: 7.5px; padding: 3px 6px; letter-spacing: .12em; }
.mini-cover .mc-name { font-family: var(--serif); font-size: 13px; font-weight: 700; color: #fff; margin: 8px 0; }
.mini-cover .mc-seal {
  width: 34px; height: 34px; border-radius: 50%; margin: 0 auto;
  background: #fff; color: var(--ent-navy);
  font-family: var(--serif); font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.mini-cover .mc-sub { font-size: 8px; color: rgba(255, 255, 255, .6); margin-top: 8px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }

/* Prompt drill before/after */
.mini-before { font-size: 13px; color: var(--faint); text-decoration: line-through; margin-bottom: 8px; }
.mini-after {
  background: #EDEFFF; border-radius: 12px; padding: 9px 12px;
  font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.45;
  margin-bottom: 8px;
}
.mini-a-chip {
  display: inline-block; font-size: 11px; font-weight: 700;
  background: var(--grade-a); color: #fff; border-radius: 99px; padding: 4px 11px;
  margin-bottom: 12px;
}
@media (max-width: 880px) {
  .b-report { flex-direction: column; align-items: flex-start; }
}

/* The tall Ask tile fills its column: conversation up top, input pinned low */
.b-2h.b-stage { display: flex; flex-direction: column; }
.b-2h.b-stage .b-ask { margin-top: auto; }


/* ============================================================
   SCRUB STORY (2026-07-21): the pinned phone. The device stays
   fixed while the three steps scroll past; the screen inside
   crossfades to match the step. Collapses to a top-pinned phone
   on iPhone. No JS: all steps visible, first screen showing.
   ============================================================ */
.scrub { background: #fff; overflow: visible; }
.scrub.after-hero { padding-top: 150px; }
/* Business lane flavor: the soft gold world, kickers to match */
.scrub-biz { background: #FBF6EC; }
.scrub-biz .chapter-kicker { color: var(--biz-gold-1); }
.scrub-inner {
  max-width: 1040px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 72px;
}
.scrub-steps .sstep {
  min-height: 88svh;
  display: flex; flex-direction: column; justify-content: center;
  transition: opacity .45s ease;
}
.scrub-steps .sstep.dim { opacity: .28; }
.scrub-stage {
  position: sticky; top: 0; height: 100svh;
  display: flex; align-items: center; justify-content: center;
}
.scrub-phone { position: relative; width: min(320px, 74vw); }
.scrub-phone .layer { transition: opacity .55s ease; }
.scrub-phone .layer:not(.base) {
  position: absolute; top: 10px; left: 10px; /* 10px = the bezel padding */
  width: calc(100% - 20px); height: calc(100% - 20px);
  object-fit: cover; opacity: 0;
}
.scrub-phone .layer.on { opacity: 1; }
.scrub-phone .layer.base.off { opacity: 0; }
@media (max-width: 879px) {
  .scrub-inner { grid-template-columns: 1fr; gap: 0; }
  .scrub-stage {
    position: sticky; top: 64px; height: auto;
    padding: 14px 0 34px;
    order: -1;
    z-index: 2;
    /* Solid past the phone's bottom edge, then a short fade so passing
       copy slips under it instead of reading through the bezel. */
    background: linear-gradient(180deg, #fff calc(100% - 26px), rgba(255, 255, 255, 0));
  }
  .scrub-biz .scrub-stage {
    background: linear-gradient(180deg, #FBF6EC calc(100% - 26px), rgba(251, 246, 236, 0));
  }
  .scrub-phone { width: min(180px, 46vw); }
  .scrub-steps .sstep { min-height: 54svh; text-align: center; align-items: center; }
  .scrub-steps .chapter-lede { margin-left: auto; margin-right: auto; }
  .scrub.after-hero { padding-top: 130px; }
}


/* ============================================================
   SCENES, ROUND THREE (2026-07-21): the midnight advisor with
   the deadline catch (business), the prompt makeover (how-to),
   and the journey that rewrites itself (personal). Same family:
   JS gates the beats, reduced motion settles the finale.
   ============================================================ */

/* --- Advisor at midnight + the deadline catch (business) --- */
.advscene { max-width: 420px; margin: 0 auto; width: 100%; }
.adv-chat {
  background: #0B1036;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 26px; padding: 20px;
  box-shadow: 0 40px 90px rgba(4, 6, 24, .6);
}
.adv-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.adv-head b { font-size: 15px; color: #fff; }
.adv-head span { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: rgba(255, 255, 255, .55); }
.adv-msg {
  border-radius: 16px; padding: 12px 14px;
  font-size: 14.5px; line-height: 1.5; max-width: 88%;
}
.adv-msg.me {
  margin-left: auto;
  background: linear-gradient(120deg, #FFE7A3, #FFC24D);
  color: #4E3200; font-weight: 600;
  border-bottom-right-radius: 6px;
  min-height: 66px;
}
.advscene.typing .adv-text::after {
  content: ""; display: inline-block; width: 2px; height: 1em;
  background: #4E3200; margin-left: 2px; vertical-align: -2px;
  animation: adv-blink .8s steps(1) infinite;
}
@keyframes adv-blink { 50% { opacity: 0; } }
.adv-dots {
  display: flex; gap: 5px; padding: 12px 6px 4px;
  opacity: 0; transition: opacity .3s ease;
}
.advscene.s2:not(.s3) .adv-dots { opacity: 1; }
.adv-dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  animation: adv-dot 1s ease-in-out infinite;
}
.adv-dots i:nth-child(2) { animation-delay: .15s; }
.adv-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes adv-dot { 40% { transform: translateY(-4px); opacity: 1; } }
.adv-msg.ai {
  background: rgba(255, 255, 255, .1); color: #fff;
  border-bottom-left-radius: 6px;
  margin-top: 4px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s cubic-bezier(.16, .84, .44, 1), transform .45s cubic-bezier(.16, .84, .44, 1);
}
.advscene.s3 .adv-msg.ai { opacity: 1; transform: none; }
.advscene.s3 .adv-dots { padding: 0; height: 0; overflow: hidden; }
.adv-deadline {
  background: #fff; border-radius: 18px; padding: 14px 16px;
  margin-top: 12px; color: var(--ink);
  box-shadow: 0 24px 60px rgba(4, 6, 24, .5);
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s cubic-bezier(.16, .84, .44, 1), transform .5s cubic-bezier(.16, .84, .44, 1);
}
.advscene.s4 .adv-deadline { opacity: 1; transform: none; }
.adv-drow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.adv-drow b { display: block; font-size: 14.5px; }
.adv-drow span:not(.adv-check) { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.adv-check {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: #43A047; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  transform: scale(.4); opacity: 0;
  transition: opacity .35s cubic-bezier(.34, 1.56, .64, 1) .35s, transform .35s cubic-bezier(.34, 1.56, .64, 1) .35s;
}
.advscene.s4 .adv-check { opacity: 1; transform: scale(1); }
.adv-chip {
  display: inline-block; margin-top: 11px;
  background: #E8F5E9; color: #1B5E20;
  font-size: 12.5px; font-weight: 700;
  border-radius: 99px; padding: 6px 12px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s cubic-bezier(.16, .84, .44, 1) .65s, transform .4s cubic-bezier(.16, .84, .44, 1) .65s;
}
.advscene.s4 .adv-chip { opacity: 1; transform: none; }

/* --- The prompt makeover (how to talk to AI) --- */
.mkscene {
  background: #fff;
  border: 1px solid rgba(20, 26, 77, .08);
  border-radius: 22px; padding: 22px;
  box-shadow: 0 18px 50px rgba(20, 26, 77, .1);
  margin: 26px 0 38px; max-width: 560px;
}
.mk-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 8px;
}
.mk-weak {
  font-size: 17px; font-style: italic; font-weight: 600;
  transition: color .4s ease, opacity .4s ease;
}
.mkscene.s1 .mk-weak { color: var(--faint); opacity: .6; text-decoration: line-through; }
.mk-strong { font-size: 15px; font-weight: 600; line-height: 1.55; margin-top: 10px; min-height: 70px; }
.mkscene.typing .mk-text::after {
  content: ""; display: inline-block; width: 2px; height: 1em;
  background: var(--ink); margin-left: 2px; vertical-align: -2px;
  animation: adv-blink .8s steps(1) infinite;
}
.mk-checks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mk-c {
  font-size: 12.5px; font-weight: 700;
  border: 1px solid rgba(20, 26, 77, .14); color: var(--faint);
  border-radius: 99px; padding: 6px 12px;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.mk-c.on { background: #E8F5E9; color: #1B5E20; border-color: #C8E6C9; }
.mk-c.on::before { content: "\2713\00a0"; }
.mk-c.mk-skip { border-style: dashed; }
.mk-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.mk-note { font-size: 13px; color: var(--muted); opacity: 0; transition: opacity .45s ease .15s; }
.mk-seal {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--grade-a); color: #fff;
  font-family: var(--serif); font-size: 18px; font-weight: 700;
  opacity: 0; transform: scale(.4);
  transition: opacity .45s cubic-bezier(.34, 1.56, .64, 1), transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.mkscene.s3 .mk-note { opacity: 1; }
.mkscene.s3 .mk-seal { opacity: 1; transform: scale(1); }

/* --- The journey that rewrites itself (personal) --- */
.jscene { max-width: 560px; margin: 40px auto 0; display: grid; gap: 10px; text-align: left; }
.j-row {
  display: flex; align-items: center; gap: 13px;
  background: #fff; border: 1px solid rgba(20, 26, 77, .08);
  border-radius: 15px; padding: 13px 16px;
  transition: opacity .45s cubic-bezier(.16, .84, .44, 1), transform .45s cubic-bezier(.16, .84, .44, 1);
}
/* Hidden-until-played only once JS is confirmed running (no-JS keeps all rows) */
html.reveal-ready .j-row:not(.on) { opacity: 0; transform: translateY(10px); }
.j-row.dim { opacity: .55; }
.j-dot {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  border: 2px solid rgba(20, 26, 77, .16); color: #fff;
}
.j-row.done .j-dot { background: #43A047; border-color: #43A047; }
.j-row.now .j-dot { border-color: #3949AB; box-shadow: 0 0 0 4px rgba(57, 73, 171, .16); }
.j-body { flex: 1; min-width: 0; }
.j-week { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.j-body b { font-size: 14.5px; font-weight: 700; display: block; margin-top: 1px; }
.j-now {
  background: #EDEFFF; color: #1A237E;
  font-size: 11.5px; font-weight: 700;
  border-radius: 99px; padding: 5px 11px; flex: none;
}
.j-flip { display: grid; }
.j-flip b { grid-area: 1 / 1; transition: opacity .5s ease; }
.j-flip .j-new { opacity: 0; }
.jscene.swap .j-flip .j-old { opacity: 0; }
.jscene.swap .j-flip .j-new { opacity: 1; }
.j-tag {
  background: #EDE7F6; color: #4527A0;
  font-size: 11.5px; font-weight: 700;
  border-radius: 99px; padding: 5px 11px; flex: none;
  opacity: 0; transform: scale(.7);
  transition: opacity .4s cubic-bezier(.34, 1.56, .64, 1) .25s, transform .4s cubic-bezier(.34, 1.56, .64, 1) .25s;
}
.jscene.swap .j-tag { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .adv-msg.ai, .adv-deadline, .adv-check, .adv-chip, .adv-dots,
  .mk-weak, .mk-c, .mk-note, .mk-seal,
  .j-row, .j-flip b, .j-tag { transition: none; animation: none; }
}


/* ============================================================
   COMB PASS (2026-07-22): sitewide fit-and-finish from the
   every-inch review. Phone-mock bottom vignette, mobile rhythm,
   footer wrap fix, hero CTA stacking, before/after cards.
   ============================================================ */

/* Screenshots inside device frames end wherever the capture ended; a soft
   bottom shade makes that cut read as device shading, not a rendering bug. */
.chapter-media .phone::after, .scrub-phone::after, .gal .phone::after, .shot .phone::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 10px;
  height: 34px; border-radius: 0 0 30px 30px;
  background: linear-gradient(180deg, rgba(13, 16, 42, 0), rgba(13, 16, 42, .22));
  pointer-events: none;
}
.gal .phone, .shot .phone { position: relative; }

/* Mobile rhythm: the desktop air reads as dead space on a 390px screen */
@media (max-width: 640px) {
  .section { padding: 60px 22px; }
  .section-tight { padding-top: 42px; padding-bottom: 42px; }
  .cinema { padding: 84px 22px; }
  .stage { padding: 88px 22px; }
}

/* Footer rows fit one line on iPhone; no single-word orphans
   (342px row: five links at 13px plus 4 x 12px gaps = ~314px) */
@media (max-width: 480px) {
  .footer-nav { gap: 6px 12px; }
  .footer-nav a { font-size: 13px; }
  .footer-sub { gap: 6px 12px; }
  .footer-sub a { font-size: 11.5px; }
}

/* Hero CTAs stack as one centered column on small phones instead of the
   ragged 1 + 2 wrap */
@media (max-width: 480px) {
  .hero-ctas { flex-direction: column; }
  .hero-ctas .store-badge { width: 220px; justify-content: center; }
}

/* Gallery edges fade so peeking captions read as designed, not clipped */
.gallery {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

/* The Ask tile's conversation breathes to fill its two-row span */
.b-2h.b-stage .mini-q { margin-top: auto; }

/* How-to: the mistakes list carries its own gold checks; kill default discs */
ul.impact { list-style: none; }

/* How-to: before/after examples sit in cards like everything else */
.ba {
  background: #fff; border: 1px solid rgba(20, 26, 77, .08);
  border-radius: 18px; padding: 18px 20px; margin-top: 16px;
  box-shadow: var(--shadow-card);
}
.ba p + p { margin-top: 12px; }

/* How-to: the makeover card centers in its column */
.mkscene { margin-left: auto; margin-right: auto; }

/* Four cards never orphan into a 3 + 1 grid */
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }


/* ============================================================
   FLAGSHIP PASS (2026-07-30): fixes and upgrades from the
   nine-reviewer every-millimeter audit.
   ============================================================ */

/* Short pages (404, legal) pin the footer to the viewport bottom; a lone
   hero (the 404) stretches to meet it so no background strip leaks out */
body { min-height: 100svh; display: flex; flex-direction: column; }
body > main { flex: 1; }
body > main:has(> .page-hero:only-child) { display: flex; flex-direction: column; }
body > main > .page-hero:only-child {
  flex: 1; display: flex; flex-direction: column;
  justify-content: center; align-items: center;
}

/* Big headings break in balanced halves instead of stranding a word */
h1, .cinema h2, .chapter h2, .scrub h2, .stage h2, .section h2 { text-wrap: balance; }

/* The settled check keeps a calm scale (the pop lives in the transition) */
.dc-row.filled .check { transform: none; }

/* Plan cards end with intent: CTA (or fine print) seats at the bottom */
.plan:has(.btn) .btn { margin-top: auto; }
.plan:has(.btn) .finePrint { margin-top: 14px; }
.plan:not(:has(.btn)) .finePrint { margin-top: auto; }
/* All three price blocks share a baseline so first bullets align */
@media (min-width: 880px) { .plan .n { min-height: 56px; } }

/* Tablet: three-up grids never orphan a card into an empty half-row.
   The third card goes full-width as a deliberate spotlight instead. */
@media (min-width: 641px) and (max-width: 1023px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 > :nth-child(3):last-child { grid-column: 1 / -1; }
  .grid-3 > :nth-child(3):last-child ul { columns: 2; column-gap: 28px; }
}

/* Enterprise scorecard breathes at tablet width */
@media (min-width: 641px) and (max-width: 1023px) {
  .dim-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The scroll cue never sits on top of the hero device */
.hero-stage { z-index: 2; }
.hero .scroll-cue { z-index: 1; }

/* Enterprise climb section loses its mobile air pocket */
@media (max-width: 640px) { #climb { padding-top: 36px; } }

/* Business: the five-steps band lives in the lane's cream world,
   ending the site's only light-on-light seam */
.section-cream { background: #FBF6EC; }

/* The doc scene always reads as a document: faint rule lines wait
   under the typed clause until the text overwrites them */
.doc-skel { display: grid; gap: 11px; margin-top: 14px; }
.doc-skel i { display: block; height: 8px; border-radius: 4px; background: rgba(20, 26, 77, .07); }
.doc-skel i:nth-child(2) { width: 92%; }
.doc-skel i:nth-child(3) { width: 78%; }

/* Mid-page store badges match the stacked hero treatment on phones */
@media (max-width: 480px) {
  .center .store-badge, .cta-band .store-badge { min-width: 220px; justify-content: center; }
}

/* Guides: each numbered use is its own block, and the Try prompt
   sits in a quiet card that invites copying */
.section-narrow > h3 { margin-top: 30px; }
.section-narrow > p > i:only-child {
  display: block; font-style: italic;
  background: #F3F4FB; border: 1px solid rgba(20, 26, 77, .07);
  border-radius: 14px; padding: 13px 16px; margin-top: 2px;
}

/* Glossary: comfortable reading measure */
.gloss > p { max-width: 70ch; }

/* Cross-links between the three job guides */
.guide-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 34px; }
.guide-links a {
  font-size: 13.5px; font-weight: 700; color: var(--navy); text-decoration: none;
  border: 1px solid rgba(20, 26, 77, .16); border-radius: 99px; padding: 9px 16px;
}
.guide-links a:hover { background: #EDEFFF; }

/* Bento: the report card's empty half carries graded-dimension pills */
.mc-pills { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.mc-pills span {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 99px; padding: 6px 12px;
  font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, .85);
}
.mc-pills b { font-family: var(--serif); font-size: 12.5px; color: var(--ent-gold); }

/* Bento: the widget tile centers its artifact */
.b-center { align-items: center; text-align: center; }
.b-center > h3, .b-center > p { align-self: center; }

/* How-to: the five mistakes wear an x, not a checkmark */
ul.impact-x li::before { content: "\2715"; }

/* Cards that are links keep the card look and gain an affordance */
.card-link { display: block; text-decoration: none; color: inherit; }
.card-link .chapter-cta { margin-top: 10px; display: inline-block; }