/* GetMyYes homepage layers, loaded after the inline critical styles in
   index.html: the Apple HIG layer (dark mode, increased contrast, touch
   targets), the glass motion layer, and the product film section. Kept out
   of the HTML so the homepage stays inside its 120 KB budget
   (tool/marketing_build.mjs); the accessibility gate reads it as the
   page's own CSS. */

/* ==================================================================
   Apple design layer: Human Interface Guidelines, applied to the web
   (apple-design skill: liquid-glass.md, dark-mode.md, color.md,
   accessibility.md, typography.md, writing.md).
   ================================================================== */

:root { color-scheme: light dark; }

/* 1. Glass belongs to the functional layer only. The header floats over
      the page, so it is the one surface that gets the material; cards,
      panels and sections stay opaque. Regular variant: text sits on it. */
.site-header {
  border-bottom: 1px solid rgba(16, 38, 59, 0.10);
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
/* Scroll edge effect: content fades under the bar instead of colliding
   with a hard line. */
.site-header::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 100%;
  height: 14px;
  background: linear-gradient(to bottom, rgba(16, 38, 59, 0.07), rgba(16, 38, 59, 0));
  pointer-events: none;
}
/* At rest over the hero there is nothing beneath the bar to separate
   from, so it is clear; it materialises once content scrolls under it.
   The attribute is set by script, so without it the bar is simply glass. */
.site-header[data-at-top] {
  border-bottom-color: transparent;
  background: rgba(255, 255, 255, 0);
  -webkit-backdrop-filter: blur(0px) saturate(1);
  backdrop-filter: blur(0px) saturate(1);
  box-shadow: none;
}
.site-header[data-at-top]::after { opacity: 0; }

/* The menu is a popover off the bar: the same material, a little thicker
   because it carries a list of text. */
.mobile-menu-panel {
  border: 1px solid rgba(16, 38, 59, 0.12);
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  backdrop-filter: blur(28px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 24px 48px -24px rgba(16, 38, 59, 0.45);
  transform-origin: top right;
}
.mobile-menu-panel a:hover,
.mobile-case-button:hover { background: rgba(47, 111, 98, 0.10); }

@media (prefers-reduced-motion: no-preference) {
  .site-header,
  .site-header::after {
    transition: background-color 260ms ease, border-color 260ms ease, box-shadow 260ms ease,
      opacity 260ms ease, -webkit-backdrop-filter 260ms ease, backdrop-filter 260ms ease;
  }
  /* One short settle as the popover forms: it rises a few pixels and the
     blur gathers. Reduced motion skips it, as Apple asks for blur and
     scale changes. */
  .mobile-menu[open] .mobile-menu-panel {
    animation: glass-form 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
}
@keyframes glass-form {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    -webkit-backdrop-filter: blur(0px) saturate(1);
    backdrop-filter: blur(0px) saturate(1);
  }
}

/* Browsers without the material get the old near-opaque bar. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header,
  .mobile-menu-panel { background: rgba(255, 255, 255, 0.97); }
}

/* 2. Touch targets. Standalone links get the 44 px Apple asks for on
      phones and touch screens; desktop keeps its compact rhythm. Links
      inside running text are left alone. */
@media (max-width: 760px), (pointer: coarse) {
  .brand { min-height: 44px; }
  .footer-links { gap: 0; }
  .footer-links a { min-height: 44px; display: flex; align-items: center; }
  .proof-action,
  .preview-card-foot a,
  .resource-links a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* 3. Weight carries hierarchy only if it is spent sparingly: small
      uppercase labels do not need the heaviest cut. */
.packet-cover-top,
.packet-manifest-header p,
.proof-slide-kicker { font-weight: 700; }
.proof-slide .proof-action { font-weight: 750; }

/* 4. Dark appearance, following the system setting (no in-page switch).
      The navy and teal tokens are text roles here, so they turn light;
      the few surfaces that were painted with them get their own values. */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #0E1922;
    --surface: #15222D;
    --surface-soft: #162B2C;
    --surface-blue: #152534;
    --navy: #CFE0EE;
    --navy-dark: #F2F6F8;
    --teal-dark: #8FD3C2;
    --success: #7CCBA4;
    --text: #E7EDF0;
    --text-soft: #BAC6CD;
    --muted: #93A2AC;
    --border: #2A3A46;
    --border-strong: #5E7382;
    --focus: #7FB6EE;
    --error: #F08A92;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40), 0 4px 12px -4px rgba(0, 0, 0, 0.50);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.35), 0 22px 44px -26px rgba(0, 0, 0, 0.70);
  }
  .site-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
    background: rgba(14, 25, 34, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  .site-header::after { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0)); }
  .site-header[data-at-top] { background: rgba(14, 25, 34, 0); }
  .mobile-menu-panel {
    border-color: rgba(255, 255, 255, 0.10);
    background: rgba(21, 34, 45, 0.80);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 48px -24px rgba(0, 0, 0, 0.8);
  }
  .mobile-menu-panel a:hover,
  .mobile-case-button:hover { background: rgba(143, 211, 194, 0.12); }

  /* The one tinted primary action per view: mint on ink, 11.9:1. */
  .button-primary { background: #A9DED2; color: #0E1922; }
  .button-primary:hover { background: #C3EADF; color: #0E1922; }
  .packet-cover .button-primary,
  .closing .button-primary { background: #E7EDF0; color: #10263B; }
  .packet-cover .button-primary:hover,
  .closing .button-primary:hover { background: #FFFFFF; color: #10263B; }
  .proof-arrow:hover { border-color: #A9DED2; background: #A9DED2; color: #0E1922; }

  .hero {
    background:
      radial-gradient(circle at 84% 18%, rgba(143, 211, 194, 0.10), transparent 29rem),
      linear-gradient(180deg, #101D28 0%, var(--background) 100%);
  }
  .packet-section {
    background:
      radial-gradient(circle at 12% 16%, rgba(143, 211, 194, 0.08), transparent 24rem),
      linear-gradient(145deg, #101D28 0%, #0E1922 100%);
  }
  .packet-cover {
    background:
      radial-gradient(circle at 84% 12%, rgba(159, 214, 200, 0.16), transparent 18rem),
      linear-gradient(150deg, #173B58 0%, #10263B 70%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), var(--shadow-2);
  }
  .packet-manifest-header,
  .packet-manifest-footer { background: #13202A; }
  .packet-check { border-color: #2E4A47; background: #162B2C; }
  /* The sheet of paper behind the case file: a shade above the page, not a
     light slab glowing at its edge. */
  .packet-shell::before { border-color: #2A3A46; background: #18262F; }
  .preview-card-header { background: #1C3A55; }
  .closing { background: #12283B; }
}

/* 5. Increase Contrast and Reduce Transparency: opaque surfaces and
      stronger lines, in either appearance. */
@media (prefers-contrast: more) {
  :root {
    --muted: var(--text-soft);
    --text-soft: var(--text);
    --border: var(--border-strong);
  }
  a { text-decoration-thickness: 2px; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .site-header,
  .site-header[data-at-top],
  .mobile-menu-panel {
    border-color: var(--border-strong);
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .site-header::after { display: none; }
}

/* ==================================================================
   Glass motion layer. The owner asked for glass that people notice,
   which is a deliberate step past Apple's functional-layer-only rule:
   glass only reads when something colourful moves behind it, so the
   hero gets a slow aurora and three floating surfaces sit over it
   (the header, the example card's frame, the reassurance strip).
   Text never sits on glass alone: the card body stays opaque.
   Every effect is off under reduced motion; the drifting light has a
   pause control (WCAG 2.2.2) and a remembered choice.
   ================================================================== */

.hero { position: relative; isolation: isolate; }
.hero > .wrap { position: relative; z-index: 1; }

/* The aurora reaches up under the header so the bar has colour to
   frost from the very first frame. Clipped at the sides: no sideways
   scroll. */
.hero-aurora {
  position: absolute;
  inset: -96px 0 0 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-aurora span {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.hero-aurora span:nth-child(1) {
  top: -6%; left: -8%;
  width: min(760px, 90vw); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(47, 111, 98, 0.46) 0%, rgba(47, 111, 98, 0.16) 40%, rgba(47, 111, 98, 0) 68%);
}
.hero-aurora span:nth-child(2) {
  top: -14%; right: -6%;
  width: min(680px, 80vw); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(76, 170, 150, 0.50) 0%, rgba(76, 170, 150, 0.18) 42%, rgba(76, 170, 150, 0) 66%);
}
.hero-aurora span:nth-child(3) {
  bottom: -22%; left: 34%;
  width: min(620px, 76vw); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(46, 110, 190, 0.36) 0%, rgba(46, 110, 190, 0.12) 42%, rgba(46, 110, 190, 0) 66%);
}
@keyframes aurora-a {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(14vw, 60px, 0) scale(1.18); }
  100% { transform: translate3d(4vw, 140px, 0) scale(0.92); }
}
@keyframes aurora-b {
  0% { transform: translate3d(0, 0, 0) scale(1.05); }
  50% { transform: translate3d(-16vw, 90px, 0) scale(0.9); }
  100% { transform: translate3d(-6vw, 30px, 0) scale(1.2); }
}
@keyframes aurora-c {
  0% { transform: translate3d(0, 0, 0) scale(0.95); }
  100% { transform: translate3d(-18vw, -120px, 0) scale(1.15); }
}

/* Pause control for the drifting light: a small glass pill. */
.motion-toggle {
  position: absolute;
  z-index: 2;
  right: max(16px, calc((100% - var(--max)) / 2 + 20px));
  bottom: clamp(52px, 5vw, 66px);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 22px -14px rgba(16, 38, 59, 0.5);
  color: var(--navy-dark);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.motion-toggle::before {
  content: "";
  width: 10px; height: 12px;
  border-inline: 3px solid currentColor;
  box-sizing: border-box;
}
.motion-toggle[aria-pressed="true"]::before {
  width: 0; height: 0;
  border-inline: 0;
  border-block: 6px solid transparent;
  border-inline-start: 10px solid currentColor;
}
html.motion-paused .hero-aurora span,
html.motion-paused .glass-stage { animation-play-state: paused; }

/* The example card floats in a glass frame. The card body stays opaque
   so the text never depends on what is behind it; the frame is what
   catches the light. */
.glass-stage {
  position: relative;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.30);
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  backdrop-filter: blur(22px) saturate(1.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(16, 38, 59, 0.06),
    0 40px 80px -40px rgba(16, 38, 59, 0.45);
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.glass-stage > .preview-card { border-radius: 19px; }
/* Specular highlight: follows the pointer on desktop, rests top-left. */
.glass-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 22%) var(--my, 0%), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 42%);
  mix-blend-mode: soft-light;
  opacity: 0.75;
  pointer-events: none;
  transition: opacity 400ms ease;
}
.glass-stage:hover::before { opacity: 1; }
/* One sweep of light across the frame shortly after the page settles. */
.glass-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 62%) no-repeat;
  background-size: 250% 100%;
  background-position: 120% 0;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* The reassurance strip straddles the hero, so the aurora shows through
   its top half. */
.reassurance-list {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), var(--shadow-2);
}

/* At rest the header is the clear variant, so the aurora glows through;
   it thickens to the regular variant once content scrolls beneath it. */
.site-header[data-at-top] {
  border-bottom-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.34);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
  backdrop-filter: blur(18px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Primary buttons: a glint of light crosses on hover. The hero button
   gets one unprompted pass after the page settles. */
.button-primary { position: relative; overflow: hidden; }
.button-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.42) 50%, rgba(255, 255, 255, 0) 70%) no-repeat;
  background-size: 250% 100%;
  background-position: 130% 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* The light drifts only when motion is welcome; otherwise it rests. */
  .hero-aurora span:nth-child(1) { animation: aurora-a 21s ease-in-out infinite alternate; }
  .hero-aurora span:nth-child(2) { animation: aurora-b 26s ease-in-out infinite alternate; }
  .hero-aurora span:nth-child(3) { animation: aurora-c 18s ease-in-out infinite alternate; }
  .glass-stage { animation: glass-float 7s ease-in-out infinite alternate; }
  .glass-stage::after { animation: light-sweep 1.8s ease-in-out 900ms both; }
  .button-primary:hover::after { animation: light-sweep 900ms ease-out both; }
  .hero-actions .button-primary::after { animation: light-sweep 1.4s ease-in-out 1.8s both; }
  .hero-actions .button-primary:hover::after { animation: light-sweep 900ms ease-out both; }

  /* Frosted focus: sections below the fold come into focus as they
     arrive, from a blur, the way an object settles behind glass. The
     text is never transparent, only out of focus, so its contrast holds
     at every moment (axe and real readers agree). Only set up by
     script, so without it everything is simply in focus. */
  html.reveal-ready [data-reveal] {
    translate: 0 28px;
    filter: blur(14px) saturate(0.6);
    transition: translate 900ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 900ms ease;
    transition-delay: var(--reveal-delay, 0ms);
  }
  html.reveal-ready [data-reveal].is-revealed { translate: 0 0; filter: none; }
}
@keyframes glass-float {
  from { translate: 0 0; }
  to { translate: 0 -10px; }
}
@keyframes light-sweep {
  from { background-position: 130% 0; }
  to { background-position: -30% 0; }
}

/* Reduced motion: still light, nothing moving, so nothing to pause. */
@media (prefers-reduced-motion: reduce) {
  .motion-toggle { display: none; }
}

@media (max-width: 760px) {
  .glass-stage { padding: 7px; border-radius: 24px; }
  .motion-toggle { right: 16px; bottom: 40px; }
}

@media (prefers-color-scheme: dark) {
  .hero-aurora span:nth-child(1) { background: radial-gradient(circle, rgba(47, 111, 98, 0.55) 0%, rgba(47, 111, 98, 0) 68%); }
  .hero-aurora span:nth-child(2) { background: radial-gradient(circle, rgba(143, 211, 194, 0.22) 0%, rgba(143, 211, 194, 0) 66%); }
  .hero-aurora span:nth-child(3) { background: radial-gradient(circle, rgba(46, 110, 170, 0.42) 0%, rgba(46, 110, 170, 0) 66%); }
  .site-header[data-at-top] {
    border-bottom-color: rgba(255, 255, 255, 0.08);
    background: rgba(14, 25, 34, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }
  .glass-stage {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 40px 80px -40px rgba(0, 0, 0, 0.8);
  }
  .reassurance-list {
    border-color: rgba(255, 255, 255, 0.10);
    background: rgba(21, 34, 45, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), var(--shadow-2);
  }
  .motion-toggle {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(21, 34, 45, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
}

/* Reduce Transparency / Increase Contrast: every glass surface opaque. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .glass-stage,
  .reassurance-list,
  .motion-toggle,
  .site-header[data-at-top] {
    border-color: var(--border-strong);
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .glass-stage::before,
  .glass-stage::after { display: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-stage { background: rgba(255, 255, 255, 0.7); }
  .reassurance-list,
  .motion-toggle { background: var(--surface); }
}

/* ==================================================================
   Product film section.
   ================================================================== */
.film-section { padding-block: clamp(72px, 8vw, 112px) clamp(24px, 4vw, 48px); }
.film-inner { display: grid; justify-items: center; gap: clamp(24px, 3vw, 36px); text-align: center; }
.film-frame { width: min(100%, 1040px); text-align: left; }
.film-copy h2 { font-size: clamp(34px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -0.01em; }
.film-copy p { margin-top: 14px; color: var(--text-soft); }
.film-frame { margin: 0; }
.film-copy p { margin-inline: auto; }
.film-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-panel, 20px);
  background: #0E1922;
  box-shadow: 0 40px 90px -46px rgba(16, 38, 59, 0.55), 0 0 0 1px rgba(16, 38, 59, 0.08);
}
/* Phones: the vertical cut, as wide as the column allows without
   outgrowing the screen's height. */
.film-video.is-vertical { aspect-ratio: 9 / 16; width: min(100%, calc(82vh * 9 / 16)); height: auto; margin-inline: auto; }
.film-transcript { margin-top: 14px; color: var(--text-soft); font-size: 15px; }
.film-transcript summary { min-height: 44px; display: inline-flex; align-items: center; color: var(--navy); font-weight: 700; cursor: pointer; }
.film-transcript p { margin-top: 8px; max-width: 70ch; }
@media (prefers-color-scheme: dark) {
  .film-video { box-shadow: 0 40px 90px -46px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08); }
}

/* ==================================================================
   The plain-English lens (hero). A fictional letter; a glass reading
   bar slides over it and the line beneath reads in plain English.
   Without script each line is simply followed by its plain version;
   home.js adds .lens-on, then sets --ly/--lh (the bar) on the sheet and
   --oy/--rh (each line's box) on the plain lines. No backdrop-filter:
   the bar is light and edge, so the glass allow-list stays as it is.
   ================================================================== */
.lens-sheet { position: relative; padding: 16px 16px 18px; background: var(--surface); }
.lens-letterhead {
  margin: 0 12px 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lens-rows { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.lens-row { display: grid; }
.lens-jargon,
.lens-plain { display: block; padding: 6px 12px; border-radius: 10px; }
.lens-jargon { color: var(--text-soft); font-family: var(--serif); font-size: 15.5px; line-height: 1.4; }
.lens-plain { color: var(--navy-dark); font-size: 16px; font-weight: 650; line-height: 1.45; }
/* No script: the plain version sits under its line, marked like a note. */
.lens-card:not(.lens-on) .lens-plain {
  margin: 0 0 6px 12px;
  border-left: 3px solid var(--teal);
  border-radius: 0 10px 10px 0;
  background: var(--surface-soft);
}
.lens-on .lens-row > * { grid-area: 1 / 1; }
.lens-on .lens-plain {
  position: relative;
  z-index: 1;
  background: var(--surface-soft);
  clip-path: inset(
    max(0px, calc(var(--ly, -999px) - var(--oy, 0px))) 0
    max(0px, calc(var(--oy, 0px) + var(--rh, 0px) - var(--ly, -999px) - var(--lh, 0px))) 0
    round 10px
  );
}
.lens-glass { display: none; }
.lens-on .lens-glass {
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 14px;
  right: 14px;
  height: var(--lh, 0px);
  transform: translateY(var(--ly, -999px));
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 38%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 0 0 1px rgba(47, 111, 98, 0.45),
    0 12px 28px -14px rgba(16, 38, 59, 0.5),
    0 0 26px -6px rgba(143, 211, 194, 0.7);
  cursor: grab;
  touch-action: none;
}
.lens-on .lens-glass:active { cursor: grabbing; }
/* The bar names what it does. */
.lens-on .lens-glass::before {
  content: "Plain English";
  position: absolute;
  top: -10px;
  right: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--teal);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.5;
}
.lens-on .lens-row { cursor: pointer; }
.lens-toggle {
  display: inline;
  min-height: 24px;
  margin: 0;
  padding: 3px 0;
  border: 0;
  background: none;
  color: #FFFFFF;
  font: inherit;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.lens-toggle[aria-pressed="true"] { text-decoration-style: double; }
.lens-toggle:focus-visible { outline: 3px solid #A9DED2; outline-offset: 2px; border-radius: 4px; }
@media (prefers-color-scheme: dark) {
  .lens-on .lens-glass {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 38%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      inset 0 0 0 1px rgba(143, 211, 194, 0.55),
      0 12px 28px -14px rgba(0, 0, 0, 0.8),
      0 0 26px -6px rgba(143, 211, 194, 0.45);
  }
  .lens-on .lens-glass::before { background: #8FD3C2; color: #0E1922; }
}
@media (prefers-contrast: more) {
  .lens-on .lens-glass { box-shadow: inset 0 0 0 2px var(--teal); background: none; }
}

/* ==================================================================
   The one-number hook. Both figures are published Marketplace data,
   cited in #research-sources. home.js arms the reveal only when the
   section starts below the fold and motion is welcome; text is never
   faded (axe counts faded text as low contrast), only sharpened.
   ================================================================== */
.odds { padding-block: clamp(64px, 8vw, 104px) clamp(8px, 2vw, 24px); }
.odds-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
}
.odds-number {
  margin: 0;
  color: var(--teal);
  font-family: var(--serif);
  font-size: clamp(96px, 14vw, 184px);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.035em;
  transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 900ms ease;
}
.odds-lead h2 { max-width: 19ch; margin-top: 16px; font-size: clamp(26px, 3vw, 38px); line-height: 1.15; }
.odds-dots { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: clamp(6px, 1vw, 10px); max-width: 380px; }
.odds-dots i {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--border);
  transition: background-color 420ms ease, box-shadow 420ms ease, transform 420ms cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.odds-dots i:nth-child(-n+4) { background: var(--teal); box-shadow: 0 0 0 4px rgba(47, 111, 98, 0.16); }
.odds-dots i:nth-child(2) { transition-delay: 160ms; }
.odds-dots i:nth-child(3) { transition-delay: 320ms; }
.odds-dots i:nth-child(4) { transition-delay: 480ms; }
.odds-follow p { margin-top: 18px; font-size: 20px; line-height: 1.45; }
.odds-follow .odds-note { margin-top: 10px; color: var(--muted); font-size: 15px; }
.odds[data-armed] .odds-number { transform: translateY(18px) scale(0.94); filter: blur(10px); }
.odds[data-armed] .odds-dots i:nth-child(-n+4) { background: var(--border); box-shadow: none; transform: scale(0.8); }
.odds[data-armed].is-in .odds-number { transform: none; filter: none; }
.odds[data-armed].is-in .odds-dots i:nth-child(-n+4) { background: var(--teal); box-shadow: 0 0 0 4px rgba(47, 111, 98, 0.16); transform: none; }
@media (prefers-color-scheme: dark) {
  .odds-dots i:nth-child(-n+4),
  .odds[data-armed].is-in .odds-dots i:nth-child(-n+4) { background: #8FD3C2; box-shadow: 0 0 0 4px rgba(143, 211, 194, 0.16); }
}
@media (max-width: 760px) {
  .odds-inner { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* ==================================================================
   Deadline ring: the answer drawn as the 180-day window, with the
   time left in teal. The sentence beside it carries the meaning.
   ================================================================== */
.deadline-result-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
.deadline-ring { position: relative; width: 116px; height: 116px; }
.deadline-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.deadline-ring circle { fill: none; stroke-width: 10; }
.deadline-ring .ring-track { stroke: var(--border); }
.deadline-ring .ring-left {
  stroke: var(--teal);
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  stroke-dashoffset: calc(100 - var(--left, 0) * 100);
  transition: stroke-dashoffset 1100ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.deadline-ring-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: var(--navy-dark); }
.deadline-ring-label b { font-family: var(--serif); font-size: 32px; line-height: 1; font-variant-numeric: tabular-nums; }
.deadline-ring-label small { margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 750; }
@media (prefers-color-scheme: dark) { .deadline-ring .ring-left { stroke: #8FD3C2; } }
@media (prefers-reduced-motion: reduce) { .deadline-ring .ring-left { transition: none; } }
@media (max-width: 420px) {
  .deadline-result-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The footer took the "not ready yet?" links: four columns, two on
   tablets (phones keep the single column from the inline styles). */
@media (min-width: 681px) and (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ==================================================================
   Dawn print layer (October 2026). The page reads from night to
   morning: a woodblock-print dawn behind the hero (dawn.js), warm paper
   between, and the sun fully up in the closing scene. The craft follows
   an editorial reference the owner chose: mono kickers, hairlines, big
   serif type rising out of masks, tiles that settle as they arrive, and
   paper ornaments that float. Calm by contract: no red, no slamming
   stamps, every loop pauses with the motion control, and reduced motion
   gets the finished page at once.
   ================================================================== */
:root {
  --paper: #FAF5EC;
  --paper-2: #F2EADB;
  --hair: #E3D7C4;
  --mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-color-scheme: light) {
  :root {
    --background: #FAF5EC;
    --surface: #FFFDF8;
    --surface-soft: #F5EFE4;
    --surface-blue: #F5EFE5;
    --border: #DED2BF;
  }
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #0E1922; --paper-2: #14212C; --hair: #263644; }
}

/* Paper grain over everything, as faint as print. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) { body::after { opacity: 0.06; } }

/* Kickers are set in mono capitals, like the labels on a print. */
.eyebrow,
.usp-kicker,
.usp-count,
.proof-slide-kicker span {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero .hero-badge {
  gap: 12px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero .hero-badge::before { content: ""; width: 28px; height: 1px; background: currentColor; }

/* ---------------------------------------------------------- hero */
.hero {
  min-height: min(100svh, 980px);
  display: grid;
  align-items: center;
  padding-block: clamp(64px, 7vw, 104px) clamp(120px, 11vw, 168px);
  background: linear-gradient(180deg, #CAD6EC 0%, #D9D0E3 40%, #F2CBBA 66%, #F8DEB8 74%, #8DA0C2 74.2%, #34536F 100%);
}
.dawn { position: absolute; inset: -76px 0 0 0; z-index: -1; overflow: hidden; pointer-events: none; }
.dawn canvas { display: block; width: 100%; height: 100%; }
.hero .dawn { z-index: 0; }
.hero-aurora { mix-blend-mode: soft-light; }
.hero .hero-note { color: var(--text-soft); }
.research-sources .source-note { color: var(--text-soft); }
.hero-copy > .lede,
.hero-copy > .hero-note { max-width: 32rem; }
.hero .hero-accent::after { background: rgba(255, 253, 248, 0.55); }
.hero .glass-stage { box-shadow: 0 50px 90px -40px rgba(23, 50, 77, 0.55); }

/* "Continue your case" for visitors who left while a step was running. */
.resume-case {
  max-width: 32rem;
  margin: 0 0 28px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 18px 40px -28px rgba(23, 50, 77, 0.45);
}
.resume-case[hidden] { display: none; }
.resume-case-title { margin: 0 0 6px; color: var(--navy-dark); font-family: var(--serif); font-size: 19px; font-weight: 700; line-height: 1.3; }
.resume-case-text { margin: 0 0 14px; color: var(--text-soft); font-size: 16px; line-height: 1.5; }
.resume-case-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Hairlines that frame the hero, drawn in on arrival. */
.hero-lines { position: absolute; inset: -76px 0 0 0; z-index: 0; pointer-events: none; }
.hero-lines i { position: absolute; background: rgba(16, 38, 59, 0.13); }
.hero-lines i:nth-child(1),
.hero-lines i:nth-child(2) { top: 0; bottom: 0; width: 1px; }
.hero-lines i:nth-child(1) { left: max(16px, calc((100% - var(--max, 1160px)) / 2)); }
.hero-lines i:nth-child(2) { right: max(16px, calc((100% - var(--max, 1160px)) / 2)); }
.hero-lines i:nth-child(3) { left: 0; right: 0; top: 76px; height: 1px; }

/* Lines of type rise out of their own masks. */
@keyframes mask-rise {
  from { transform: translateY(0.6em); clip-path: inset(0 0 100% 0); }
  to { transform: none; clip-path: inset(-25% -6% -25% -6%); }
}
@keyframes draw-down { from { transform: scaleY(0); } }
@keyframes draw-across { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: no-preference) {
  .hero .hero-badge,
  .hero-title-line,
  .hero .lede,
  .hero-actions,
  .hero-sample,
  .hero .hero-note { animation: mask-rise 1s var(--ease-out) both; }
  .hero-title-line:nth-child(1) { animation-delay: 0.08s; }
  .hero-title-line:nth-child(2) { animation-delay: 0.18s; }
  .hero .lede { animation-delay: 0.3s; }
  .hero-actions { animation-delay: 0.4s; }
  .hero-sample { animation-delay: 0.46s; }
  .hero .hero-note { animation-delay: 0.52s; }
  .hero-lines i:nth-child(-n+2) { transform-origin: top; animation: draw-down 1.6s var(--ease-out) both; }
  .hero-lines i:nth-child(3) { transform-origin: left; animation: draw-across 1.6s var(--ease-out) 0.2s both; }
}

/* The example letter is paper: a printed card, not a dark panel. */
.lens-card .preview-card-header { background: var(--paper-2); color: var(--navy-dark); border-bottom: 1px solid var(--hair); }
.lens-card .preview-header-subtitle { color: var(--text-soft); }
.lens-card .preview-document-icon { background: rgba(23, 50, 77, 0.08); color: var(--navy); }
.lens-card .lens-toggle { color: var(--navy); }
.lens-card .lens-toggle:focus-visible { outline-color: var(--teal); }
.lens-sheet {
  background:
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(160, 140, 110, 0.10) 31px 32px),
    var(--surface);
}

/* The strip straddles the sea, so it carries more paper than glass. */
@media (prefers-color-scheme: light) {
  .reassurance-list { background: rgba(255, 253, 248, 0.9); }
}

/* -------------------------------------------- three promises */
.usp { position: relative; padding-block: clamp(88px, 10vw, 150px); overflow: clip; }
.usp-pin { display: none; }
.usp-rows { display: grid; gap: clamp(72px, 9vw, 120px); }
.usp-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.usp-row:nth-child(even) .usp-copy { order: 2; }
.usp-kicker { color: var(--teal-dark); }
.usp-title { margin-top: 16px; font-family: var(--serif); font-size: clamp(38px, 4.4vw, 64px); line-height: 1.04; letter-spacing: -0.02em; }
.usp-line { margin-top: 18px; max-width: 30ch; color: var(--text-soft); font-size: 19px; }
.usp-media {
  --q: 1;
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 4.4;
  overflow: hidden;
  border-radius: 24px;
  background: var(--paper-2);
  box-shadow: 0 40px 80px -48px rgba(23, 50, 77, 0.55), 0 0 0 1px var(--hair);
  clip-path: inset(calc((1 - var(--q)) * 9%) round 24px);
}
.usp-media > * { transform: scale(calc(1.16 - 0.16 * var(--q))); transform-origin: 50% 40%; }
.usp-media-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.usp-media-ring,
.usp-media-stack {
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #CAD6EC 0%, #DCD2E4 46%, #F3CCBA 72%, #F8DFBA 100%);
}
.usp-ring { position: relative; width: min(64%, 300px); aspect-ratio: 1; }
.usp-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.usp-ring circle { fill: none; stroke-width: 9; }
.usp-ring .ring-track { stroke: rgba(23, 50, 77, 0.14); }
.usp-ring .ring-left {
  stroke: var(--navy);
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  stroke-dashoffset: calc(100 - var(--q) * 83.3);
}
.usp-ring-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: var(--navy-dark); }
.usp-ring-label b { font-family: var(--serif); font-size: clamp(56px, 6vw, 84px); line-height: 1; }
.usp-ring-label small { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.usp-sheets { position: relative; width: 56%; aspect-ratio: 0.8; margin-top: 22%; }
.usp-sheets span {
  position: absolute;
  inset: 0;
  display: block;
  padding: 5% 9% 0;
  border-radius: 10px;
  background:
    repeating-linear-gradient(180deg, transparent 0 20px, rgba(23, 50, 77, 0.08) 20px 21px) 0 28% / 100% 60% no-repeat,
    #FFFDF8;
  box-shadow: 0 18px 34px -24px rgba(23, 50, 77, 0.6), 0 0 0 1px #E6DCCB;
  color: var(--navy-dark);
  font-family: var(--serif);
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 700;
  line-height: 1.2;
}
.usp-sheets span:nth-child(1) { transform: translateY(calc(var(--q) * -39%)) rotate(calc(var(--q) * -3deg)); }
.usp-sheets span:nth-child(2) { transform: translateY(calc(var(--q) * -26%)) rotate(calc(var(--q) * -1deg)); }
.usp-sheets span:nth-child(3) { transform: translateY(calc(var(--q) * -13%)) rotate(calc(var(--q) * 1deg)); }
.usp-sheets span:nth-child(4) { transform: rotate(calc(var(--q) * 2.5deg)); }
.usp-orn {
  --py: 0px;
  position: absolute;
  z-index: 2;
  width: clamp(92px, 11vw, 160px);
  height: auto;
  filter: drop-shadow(0 22px 22px rgba(23, 50, 77, 0.22));
  pointer-events: none;
  translate: 0 var(--py);
}
.usp-orn-nib { right: -2%; top: -6%; rotate: 18deg; }
.usp-orn-letter { left: -3%; bottom: -8%; rotate: -10deg; }
.usp-orn-plane { right: -4%; top: 2%; width: clamp(120px, 14vw, 200px); }
@keyframes orn-float { to { transform: translateY(-14px) rotate(2deg); } }
@media (prefers-reduced-motion: no-preference) {
  .usp-orn { animation: orn-float 6.5s ease-in-out infinite alternate; }
  .usp-orn-letter { animation-duration: 7.4s; }
  .usp-orn-plane { animation-duration: 5.6s; }
}
html.motion-paused .usp-orn { animation-play-state: paused; }
@media (prefers-color-scheme: dark) {
  .usp-media-ring,
  .usp-media-stack { background: linear-gradient(180deg, #0D1726 0%, #1E2A47 50%, #4A3A58 82%, #8C5E57 100%); }
  .usp-ring .ring-track { stroke: rgba(255, 255, 255, 0.16); }
  .usp-ring .ring-left { stroke: #8FD3C2; }
  .usp-ring-label { color: #F2F6F8; }
  .usp-orn { filter: drop-shadow(0 22px 22px rgba(0, 0, 0, 0.5)); }
}
@media (max-width: 860px) {
  .usp-row { grid-template-columns: minmax(0, 1fr); }
  .usp-row:nth-child(even) .usp-copy { order: 0; }
  .usp-orn { width: 96px; }
}

/* Wide screens with motion welcome: one heading is pinned while the
   pictures pass, and the next heading takes over the letters it shares
   (home.js adds .is-flying; the row copy stays for screen readers). */
.usp.is-flying .usp-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(40px, 6vw, 96px);
}
.usp.is-flying .usp-pin {
  display: block;
  position: sticky;
  top: calc(50vh - 150px);
  align-self: start;
  height: 300px;
}
.usp.is-flying .usp-row { grid-template-columns: minmax(0, 1fr); min-height: 86vh; align-content: center; }
.usp.is-flying .usp-row:last-child { min-height: 64vh; }
.usp.is-flying .usp-copy {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.usp-count { color: var(--teal-dark); }
.usp-flight {
  position: relative;
  margin-top: 18px;
  min-height: 2.2em;
  color: var(--navy-dark);
  font-family: var(--serif);
  font-size: clamp(40px, 3.8vw, 58px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.usp-flight span { position: absolute; left: 0; top: 0; white-space: pre; will-change: transform; }
.usp-pin-line { margin-top: 22px; max-width: 30ch; color: var(--text-soft); font-size: 19px; transition: filter 300ms ease, transform 300ms ease; }
.usp-pin-line.is-swapping { filter: blur(6px); transform: translateY(6px); }

/* ---------------------------------------------- proof postcards */
.proof-slide {
  position: relative;
  background:
    repeating-linear-gradient(180deg, transparent 0 35px, rgba(160, 140, 110, 0.08) 35px 36px),
    var(--surface);
}
.proof-slide-kicker { padding-right: 150px; }
.proof-slide h3 { padding-right: clamp(0px, 8vw, 96px); }
.post-stamp {
  position: absolute;
  top: 20px;
  right: 22px;
  width: 62px;
  height: 76px;
  border: 4px dotted var(--surface);
  outline: 1px solid var(--hair);
  background:
    radial-gradient(circle at 62% 60%, #FBE3B2 0 9px, rgba(251, 227, 178, 0.4) 10px, transparent 18px),
    linear-gradient(180deg, #CAD6EC 0%, #F2CBBA 62%, #4E6A8C 62.5%, #2C4A63 100%);
  box-shadow: 0 6px 12px -8px rgba(23, 50, 77, 0.6);
}
.postmark {
  position: absolute;
  top: 14px;
  right: 58px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 1.5px solid rgba(23, 50, 77, 0.42);
  box-shadow: inset 0 0 0 7px var(--surface), inset 0 0 0 8.5px rgba(23, 50, 77, 0.32);
  transform: rotate(-12deg);
  pointer-events: none;
}
.postmark::after {
  content: "GETMYYES";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(23, 50, 77, 0.5);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.postmark::before {
  content: "";
  position: absolute;
  top: 30px;
  right: 84px;
  width: 70px;
  height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 30'%3E%3Cpath d='M0 5q8.75-5 17.5 0t17.5 0 17.5 0 17.5 0M0 15q8.75-5 17.5 0t17.5 0 17.5 0 17.5 0M0 25q8.75-5 17.5 0t17.5 0 17.5 0 17.5 0' fill='none' stroke='%2317324D' stroke-opacity='.35' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes postmark-settle { from { transform: rotate(-34deg) scale(1.18); } }
@media (prefers-reduced-motion: no-preference) {
  .proof-carousel.is-posted .postmark { animation: postmark-settle 1.1s var(--ease-out) both; }
  .proof-carousel.is-posted .proof-slide:nth-child(2) .postmark { animation-delay: 0.12s; }
}
@media (prefers-color-scheme: dark) {
  .postmark { border-color: rgba(220, 232, 229, 0.4); box-shadow: inset 0 0 0 7px var(--surface), inset 0 0 0 8.5px rgba(220, 232, 229, 0.3); }
  .postmark::after { color: rgba(220, 232, 229, 0.5); }
  .postmark::before { filter: invert(1); opacity: 0.8; }
}
@media (max-width: 560px) {
  .post-stamp { width: 48px; height: 58px; top: 16px; right: 16px; }
  .postmark { width: 70px; height: 70px; right: 40px; }
  .postmark::before { display: none; }
  .proof-slide-kicker { padding-right: 104px; }
  .proof-slide h3 { padding-right: 0; }
}

/* --------------------------------- pricing: three times of day */
.price-card { --sky: linear-gradient(180deg, #0E1A2C 0%, #2B2F51 100%); --sea: linear-gradient(180deg, #0B1A28, #15283A); --sun: radial-gradient(circle at 74% 34%, #FFF1D6 0 5px, rgba(255, 241, 214, 0.22) 6px, transparent 22px); }
.price-card.core { --sky: linear-gradient(180deg, #CAD6EC 0%, #F2CBBA 100%); --sea: linear-gradient(180deg, #4E6A8C, #34536F); --sun: radial-gradient(circle at 70% 72%, #FBE3B2 0 15px, rgba(251, 227, 178, 0.5) 16px, transparent 38px); }
.price-card.optional-price { --sky: linear-gradient(180deg, #A9C3E6 0%, #E4ECF6 100%); --sea: linear-gradient(180deg, #3E6D86, #2A5470); --sun: radial-gradient(circle at 26% 34%, #FFF4D6 0 13px, rgba(255, 244, 214, 0.5) 14px, transparent 34px); }
.price-card,
.price-card.core {
  padding-top: 112px;
  background:
    var(--sea) 0 60px / 100% 24px no-repeat,
    var(--sun) top / 100% 60px no-repeat,
    var(--sky) top / 100% 60px no-repeat,
    var(--surface);
}
.price-card.core { padding-top: 110px; }
.price-label { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; }

/* ---------------------------------------------- closing sunrise */
.closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(78vh, 720px);
  display: grid;
  align-items: center;
  background: linear-gradient(180deg, #BCD0EC 0%, #DDE3F0 45%, #F6D9BC 70%, #8DA0C2 70.2%, #34536F 100%);
  color: var(--text);
}
.closing .dawn { inset: 0; }
.closing-inner { align-self: start; padding-top: clamp(24px, 4vw, 56px); }
.closing h2 { color: var(--navy-dark); font-size: clamp(40px, 4.6vw, 66px); line-height: 1.05; }
.closing p { color: var(--text-soft); }
.closing .button-primary { background: var(--navy); color: #FFFFFF; }
.closing .button-primary:hover { background: var(--navy-dark); color: #FFFFFF; }

/* ------------------------------------------------ dark: pre-dawn */
@media (prefers-color-scheme: dark) {
  .hero { background: linear-gradient(180deg, #0D1726 0%, #1F2B48 45%, #55415F 68%, #A86F5C 74%, #2E3349 74.2%, #091420 100%); }
  .hero-lines i { background: rgba(255, 255, 255, 0.1); }
  .hero .hero-accent::after { background: rgba(143, 211, 194, 0.18); }
  .hero .glass-stage { box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.8); }
  .hero-copy { text-shadow: 0 1px 18px rgba(9, 20, 32, 0.55); }
  .lens-card .preview-card-header { background: #182633; }
  .lens-card .preview-document-icon { background: rgba(255, 255, 255, 0.08); color: #F2F6F8; }
  .lens-card .lens-toggle { color: #F2F6F8; }
  .lens-sheet { background: repeating-linear-gradient(180deg, transparent 0 31px, rgba(255, 255, 255, 0.04) 31px 32px), var(--surface); }
  .proof-slide { background: repeating-linear-gradient(180deg, transparent 0 35px, rgba(255, 255, 255, 0.035) 35px 36px), var(--surface); }
  .closing { background: linear-gradient(180deg, #0D1726 0%, #24304E 45%, #7A5262 68%, #2E3349 70.2%, #091420 100%); }
  .closing h2 { color: #F2F6F8; }
  .closing p { color: #BAC6CD; }
  .closing .button-primary { background: #E7EDF0; color: #10263B; }
  .closing .button-primary:hover { background: #FFFFFF; color: #10263B; }
  .closing-inner { text-shadow: 0 1px 18px rgba(9, 20, 32, 0.55); }
}
@media (prefers-contrast: more) {
  body::after { display: none; }
  .hero-copy, .closing-inner { text-shadow: none; }
}

/* ==================================================================
   The tutorial's logic, applied (sunset-tutorial prompts): a floating
   menu, a page grid that expresses the product, and one icon family.
   Their grid was the solar array's cell lines; ours is a letter pad:
   two margin rules run the length of the page at the column's edges,
   and each section opens on a ruled line.
   ================================================================== */
.site-header {
  top: 12px;
  width: min(calc(100% - 24px), 1216px);
  margin: 12px auto 0;
  border: 1px solid rgba(16, 38, 59, 0.10);
  border-radius: 999px;
}
.site-header::after { display: none; }
.site-header .header-inner { width: 100%; min-height: 62px; padding: 6px 8px 6px 22px; }
.site-header .button-small { border-radius: 999px; }
@media (max-width: 680px) {
  .site-header .header-inner { min-height: 56px; padding: 4px 6px 4px 16px; }
}
@media (prefers-color-scheme: dark) {
  .site-header { border-color: rgba(255, 255, 255, 0.10); }
}

:root { --rule: rgba(16, 38, 59, 0.09); }
@media (prefers-color-scheme: dark) { :root { --rule: rgba(255, 255, 255, 0.07); } }
#main-content { position: relative; }
#main-content::before,
#main-content::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 5;
  width: 1px;
  background: var(--rule);
  pointer-events: none;
}
#main-content::before { left: max(16px, calc(50% - 580px)); }
#main-content::after { right: max(16px, calc(50% - 580px)); }
.hero-lines i:nth-child(-n+2) { display: none; }
.usp,
.odds,
.film-section,
.deadline-band { border-top: 1px solid var(--rule); }

/* Icons: Solar Bold Duotone (one family, never hand-drawn). */
.reassurance-list .ri { display: block; width: 26px; height: 26px; margin: 0 auto 6px; color: var(--teal); }
.preview-document-icon .pi { width: 24px; height: 24px; color: var(--navy); }
.usp-kicker .ki,
.usp-count .ki { width: 18px; height: 18px; margin-right: 10px; vertical-align: -4px; color: var(--teal); }
.usp-pin-icons .ki { display: none; }
.usp-pin-icons .ki.is-on { display: inline-block; }
@media (prefers-color-scheme: dark) {
  .reassurance-list .ri,
  .usp-kicker .ki,
  .usp-count .ki { color: #8FD3C2; }
  .preview-document-icon .pi { color: #F2F6F8; }
}

/* ==================================================================
   The film, edge to edge and one with the page: no frame, no corners.
   Its night sky rises out of the paper above (a mask fade, top only, so
   the player's controls at the bottom stay fully visible), and its sea
   runs on into the page below as a band that settles into the paper.
   In dark mode the night film and the page share their colour already.
   ================================================================== */
.film-wide { padding-block: clamp(72px, 8vw, 112px) 0; }
.film-wide .film-head h2 { margin-top: 12px; font-size: clamp(34px, 3.6vw, 52px); line-height: 1.08; letter-spacing: -0.01em; }
.film-wide .film-frame { width: 100%; margin: clamp(20px, 3vw, 40px) 0 0; }
.film-wide .film-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  box-shadow: none;
  background: #0D1726;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.2) 4%, rgba(0, 0, 0, 0.62) 9%, rgba(0, 0, 0, 0.9) 13%, #000 17%);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.2) 4%, rgba(0, 0, 0, 0.62) 9%, rgba(0, 0, 0, 0.9) 13%, #000 17%);
}
/* The margin rules stop at the picture's edge rather than crossing it. */
.film-wide .film-frame { position: relative; z-index: 6; --film-sea: rgb(10, 20, 32); --film-day: 0; }

/* The shore: the film's sea runs on under the picture in print swells, its
   colour following the film from night to morning (home.js sets --film-sea
   from the playhead), and breaks on the paper in a scalloped tide line. The
   sun's path keeps glinting in it once morning comes. Static otherwise. */
.film-wide figcaption { padding: 0 0 clamp(8px, 1.5vw, 16px); background: none; }
.film-wide figcaption::before {
  content: "";
  display: block;
  height: clamp(48px, 5.4vw, 84px);
  margin-top: -1px;
  background-color: var(--film-sea);
  background-image:
    radial-gradient(ellipse 22px 2px at 57% 18%, rgba(255, 226, 170, calc(var(--film-day) * 0.75)), rgba(255, 226, 170, 0)),
    radial-gradient(ellipse 30px 2px at 61% 34%, rgba(255, 226, 170, calc(var(--film-day) * 0.6)), rgba(255, 226, 170, 0)),
    radial-gradient(ellipse 18px 2px at 54% 47%, rgba(255, 226, 170, calc(var(--film-day) * 0.55)), rgba(255, 226, 170, 0)),
    radial-gradient(ellipse 34px 2px at 59% 62%, rgba(255, 226, 170, calc(var(--film-day) * 0.45)), rgba(255, 226, 170, 0)),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0 1px, rgba(255, 255, 255, 0) 1px 8px);
  transition: background-color 0.9s linear;
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 11px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='12' viewBox='0 0 160 12'%3E%3Cpath d='M0 0H160V5C150 5 140 11 120 11C100 11 90 5 80 5C70 5 60 11 40 11C20 11 10 5 0 5Z'/%3E%3C/svg%3E") bottom / 160px 12px repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 11px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='12' viewBox='0 0 160 12'%3E%3Cpath d='M0 0H160V5C150 5 140 11 120 11C100 11 90 5 80 5C70 5 60 11 40 11C20 11 10 5 0 5Z'/%3E%3C/svg%3E") bottom / 160px 12px repeat-x;
}

/* The caption, set like a plate in a printed book, and the transcript as a
   sheet of the same letter paper the film unfolds. */
.film-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  padding-top: clamp(18px, 2.4vw, 30px);
}
.film-plate {
  margin: 0;
  max-width: 62ch;
  font-family: var(--serif);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.35;
  color: var(--navy-dark);
}
.film-plate-no {
  margin-right: 14px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  vertical-align: 0.15em;
}
.film-wide .film-transcript { margin: 0 0 0 auto; }
.film-wide .film-transcript summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px 0 14px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--surface);
  color: var(--navy);
  font-size: 15px;
}
.film-wide .film-transcript summary::-webkit-details-marker { display: none; }
.film-wide .film-transcript summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}
.film-wide .film-transcript[open] { flex-basis: 100%; margin-left: 0; }
.film-wide .film-transcript[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.film-wide .film-transcript summary .ki { width: 18px; height: 18px; color: var(--teal); }
.film-wide #film-transcript {
  margin-top: 14px;
  max-width: 78ch;
  padding: clamp(18px, 2.4vw, 28px) clamp(20px, 3vw, 34px);
  border-radius: 10px;
  background:
    repeating-linear-gradient(180deg, transparent 0 29px, rgba(23, 50, 77, 0.07) 29px 30px) 0 14px / 100% 100% no-repeat,
    #FFFDF8;
  box-shadow: 0 24px 40px -30px rgba(16, 38, 59, 0.55), 0 0 0 1px #E6DCCB;
  color: #1F2B37;
  line-height: 30px;
}
.film-wide #film-transcript p { margin: 0; max-width: none; }
.film-wide #film-transcript p + p { margin-top: 0; text-indent: 1.5em; }

/* Sound, when the browser held it back: a paper pill over the film's sea. */
.film-sound {
  position: absolute;
  z-index: 2;
  left: clamp(14px, 2.6vw, 36px);
  bottom: calc(clamp(48px, 5.4vw, 84px) + clamp(18px, 2.4vw, 30px) + 64px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px 0 14px;
  border: 0;
  border-radius: 999px;
  background: #FFFDF8;
  color: #10263B;
  font: 700 15px/1 var(--sans, Inter, system-ui, sans-serif);
  box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(16, 38, 59, 0.12);
  cursor: pointer;
}
.film-sound[hidden] { display: none; }
.film-sound .ki { width: 20px; height: 20px; color: #2F6F62; }
.film-sound:hover { background: #F3ECDF; }
.film-sound:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; box-shadow: 0 0 0 6px #10263B; }

/* The plane the film sends into the sunrise lands on the deadline check. */
.film-wide + .deadline-band { border-top: 0; padding-top: clamp(36px, 5vw, 72px); }
.deadline-band .deadline-check { position: relative; }
.deadline-orn {
  position: absolute;
  right: clamp(-8px, -1vw, 0px);
  top: clamp(-74px, -6vw, -52px);
  width: clamp(104px, 10vw, 148px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 14px 14px rgba(23, 50, 77, 0.2));
}
@media (max-width: 680px) {
  .film-caption { flex-direction: column; align-items: flex-start; }
  .film-wide .film-transcript { margin-left: 0; }
  .film-sound { bottom: auto; top: 18%; }
  .deadline-orn { top: -58px; right: 6px; width: 96px; }
}
@media (forced-colors: active) {
  .film-wide figcaption::before { display: none; }
  .film-sound, .film-wide .film-transcript summary { border: 1px solid ButtonText; }
}

/* Paper keeps its ink: the sheets are cream in both themes, so their labels
   stay dark rather than following the page's light ink in dark mode. */
.usp-sheets span { color: #10263B; }

/* ==================================================================
   The day. Between the film and the closing sunrise the page used to be
   a stack of flat bands. Now it is one sky over paper: the film's
   morning, a clear midday, a warm afternoon and a dusk that hands over to
   the closing's dawn colours, with print haze drifting across it (static).
   In dark mode it is one night that slowly deepens, with sparse stars,
   into the closing sky.
   ================================================================== */
.day { position: relative; isolation: isolate; }
.day::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 300px 11px at 16% 9%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)),
    radial-gradient(ellipse 420px 13px at 82% 21%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)),
    radial-gradient(ellipse 260px 10px at 70% 38%, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0)),
    radial-gradient(ellipse 380px 12px at 12% 57%, rgba(255, 250, 240, 0.7), rgba(255, 250, 240, 0)),
    radial-gradient(ellipse 340px 12px at 88% 74%, rgba(255, 244, 232, 0.7), rgba(255, 244, 232, 0)),
    radial-gradient(ellipse 280px 10px at 24% 90%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)),
    radial-gradient(ellipse 46% 9% at 86% 14%, rgba(255, 226, 170, 0.32), rgba(255, 226, 170, 0)),
    radial-gradient(ellipse 50% 9% at 10% 68%, rgba(255, 196, 150, 0.22), rgba(255, 196, 150, 0)),
    linear-gradient(180deg, #FAF5EC 0%, #F6EEE1 16%, #EFF2F0 38%, #F5ECE1 60%, #EFE3E3 80%, #D9DDEC 94%, #BCD0EC 100%);
}
/* The bands give way to the one sky. */
.day > section { background: transparent; border-top: 0; }
.day > .section + .section { padding-top: clamp(40px, 5vw, 72px); }
@media (prefers-color-scheme: dark) {
  .day::before {
    background:
      radial-gradient(1.4px 1.4px at 12% 6%, #FFF3D6, rgba(255, 243, 214, 0)),
      radial-gradient(1.2px 1.2px at 77% 11%, #FFF3D6, rgba(255, 243, 214, 0)),
      radial-gradient(1.6px 1.6px at 41% 19%, #FFF3D6, rgba(255, 243, 214, 0)),
      radial-gradient(1.2px 1.2px at 92% 31%, #FFF3D6, rgba(255, 243, 214, 0)),
      radial-gradient(1.4px 1.4px at 6% 43%, #FFF3D6, rgba(255, 243, 214, 0)),
      radial-gradient(1.2px 1.2px at 63% 52%, #FFF3D6, rgba(255, 243, 214, 0)),
      radial-gradient(1.6px 1.6px at 28% 64%, #FFF3D6, rgba(255, 243, 214, 0)),
      radial-gradient(1.4px 1.4px at 85% 71%, #FFF3D6, rgba(255, 243, 214, 0)),
      radial-gradient(1.2px 1.2px at 48% 79%, #FFF3D6, rgba(255, 243, 214, 0)),
      radial-gradient(1.6px 1.6px at 16% 86%, #FFF3D6, rgba(255, 243, 214, 0)),
      radial-gradient(1.4px 1.4px at 71% 92%, #FFF3D6, rgba(255, 243, 214, 0)),
      radial-gradient(1.2px 1.2px at 37% 96%, #FFF3D6, rgba(255, 243, 214, 0)),
      radial-gradient(ellipse 340px 12px at 18% 26%, rgba(170, 190, 230, 0.07), rgba(170, 190, 230, 0)),
      radial-gradient(ellipse 420px 14px at 80% 58%, rgba(170, 190, 230, 0.07), rgba(170, 190, 230, 0)),
      radial-gradient(ellipse 44% 8% at 84% 12%, rgba(207, 224, 238, 0.07), rgba(207, 224, 238, 0)),
      linear-gradient(180deg, #0E1922 0%, #0F1B26 30%, #111D2C 60%, #131D33 85%, #0D1726 100%);
  }
}
@media (prefers-contrast: more), (forced-colors: active) {
  .day::before { background: var(--background); }
}

/* ==================================================================
   Phone polish (October 2026)
   ================================================================== */
/* The Menu control is a pill, like the header it sits in. */
.mobile-menu summary { border-radius: 999px; padding: 8px 18px; }

/* The headline's highlight runs under each line of "Build the appeal." as
   a thick translucent underline, so it ends with the words when the line
   wraps on a phone, instead of a bar the width of the whole block. */
.hero .hero-accent::after { display: none; }
.hero .hero-accent {
  text-decoration-line: underline;
  text-decoration-thickness: 0.17em;
  text-underline-offset: -0.04em;
  text-decoration-skip-ink: none;
  text-decoration-color: rgba(255, 253, 248, 0.55);
}
@media (prefers-color-scheme: dark) {
  .hero .hero-accent { text-decoration-color: rgba(143, 211, 194, 0.22); }
}

/* The lens shows what is left to read: an unread insurer line carries a
   dotted rule and a small lens, which fade once the glass has been there;
   the letterhead's dots fill one by one; the glass has a grip. */
.lens-dots { display: inline-flex; gap: 5px; margin-left: 10px; vertical-align: 1px; }
.lens-dots i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--teal); transition: background-color 0.3s ease; }
.lens-dots i.on { background: var(--teal); }
.lens-on .lens-row:not(.is-read) .lens-jargon {
  text-decoration: underline dotted rgba(47, 111, 98, 0.6);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.lens-on .lens-row .lens-jargon::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%232F6F62' stroke-width='2.4'/%3E%3Cpath d='M15.5 15.5l5 5' stroke='%232F6F62' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.lens-on .lens-row.is-read .lens-jargon::after { opacity: 0; transform: scale(0.4); }
.lens-on .lens-row:not(.is-read):hover .lens-jargon { color: var(--navy-dark); }
.lens-on .lens-row { cursor: zoom-in; }
.lens-on .lens-glass::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 26px;
  height: 4px;
  margin-left: -13px;
  border-radius: 99px;
  border-top: 1.5px solid rgba(47, 111, 98, 0.55);
  border-bottom: 1.5px solid rgba(47, 111, 98, 0.55);
}
@media (prefers-color-scheme: dark) {
  .lens-dots i { border-color: #8FD3C2; }
  .lens-dots i.on { background: #8FD3C2; }
  .lens-on .lens-row:not(.is-read) .lens-jargon { text-decoration-color: rgba(143, 211, 194, 0.55); }
  .lens-on .lens-row .lens-jargon::after { filter: brightness(1.9) saturate(0.7); }
  .lens-on .lens-glass::after { border-color: rgba(143, 211, 194, 0.6); }
}
@media (prefers-reduced-motion: reduce) {
  .lens-dots i, .lens-on .lens-row .lens-jargon::after { transition: none; }
}

/* The appeal kit, more compact. */
.packet-cover { min-height: 400px; padding: clamp(26px, 3vw, 40px); }
.packet-cover-count strong { font-size: clamp(64px, 7vw, 92px); }
.packet-cover h2 { margin-top: 18px; font-size: clamp(32px, 3.4vw, 46px); }
.packet-cover-actions { margin-top: 20px; }
.packet-item { min-height: 92px; padding: 18px 20px; }
.packet-item h3 { font-size: 17px; }
@media (max-width: 700px) {
  .packet-cover { padding: 24px 22px; }
  .packet-cover-count { margin-top: 18px; }
  .packet-cover-count strong { font-size: 64px; }
  .packet-cover h2 { margin-top: 10px; font-size: 32px; }
  .packet-cover-copy { margin-top: 10px; font-size: 16px; }
  .packet-cover-actions { margin-top: 16px; }
  .packet-manifest-header { min-height: 0; padding-block: 14px; }
  .packet-item { min-height: 0; padding: 14px 16px; column-gap: 10px; grid-template-columns: 26px minmax(0, 1fr); }
  .packet-item:nth-child(odd) { border-right: 1px solid var(--border); }
  .packet-item:nth-last-child(-n + 2) { border-bottom: 0; }
  .packet-check { width: 26px; height: 26px; border-radius: 8px; }
  .packet-check svg { width: 15px; height: 15px; }
  .packet-item h3 { font-size: 15px; line-height: 1.3; }
  .packet-manifest-footer { min-height: 0; padding-block: 12px; }
}
@media (max-width: 700px) {
  .packet-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The postmark sits where a real one would: overlapping the stamp's edge,
   its lettering fitted inside the ring. */
@media (max-width: 560px) {
  .postmark { width: 74px; height: 74px; top: 12px; right: 50px; }
  .postmark::after { font-size: 7.5px; letter-spacing: 0.1em; }
  .post-stamp { z-index: 0; }
  .proof-slide-kicker { padding-right: 116px; }
}