/* ==========================================================================
   Trove marketing site — "B-E" visual system
   Ported from marketing-site/design-directions/Main.dc.html (approved 2026-09-09).

   Serves all four pages: index.html, support.html, privacy.html, terms.html.

   Authored mobile-first. Three width breakpoints only:
     720px  — two-column card grids
     1080px — three-column feature grid; backdrop-filter + the sweep loop return
     1240px — four-up gallery + four-up pricing; hero goes two-column
   Custom properties cannot be used inside @media conditions, so those three
   numbers appear as literals.

   FONTS ARE SELF-HOSTED. The site makes ZERO third-party requests on every
   page, not just the legal ones — no fonts.googleapis.com, no fonts.gstatic.com.
   Both families are SIL Open Font License 1.1; the licences ship beside the
   files in fonts/. These are Google's *variable* woff2 subsets, so one file
   covers a weight range and there is no per-weight download.
   ========================================================================== */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Grounds */
  --cream:        #fbf4e7;
  --cream-bright: #fffdf9;
  --cream-grey:   #f9f5ee;
  --screen-well:  #0b0b0d;

  /* Ink */
  --navy:        #0f1f66;
  --navy-top:    #172d8a;
  --navy-bottom: #0a164e;
  --navy-chip:   #16307f;
  --ink:         #1a1510;
  --ink-body:    #4d463d;
  --ink-tertiary:#3f3830;
  --ink-muted:   #6b6258;

  /* Gold */
  --gold:         #8a6203;   /* gold ink + link colour */
  --gold-hover:   #6f4e02;
  --gold-mid:     #c8910a;
  --gold-bright:  #f8a828;
  --gold-light:   #f8da6c;
  --gold-dk:      #8f6809;   /* .wordmark gradient start. The artboard's #b8860b
                                is 2.97:1 on cream and the 13px footer wordmark
                                needs 4.5:1 (WCAG 1.4.3); #8f6809 is 4.62:1 on
                                cream, 4.86:1 on the nav glass. */
  --gold-grad-start: #af7e07; /* .goldtext gradient start ONLY — 3.30:1 on cream,
                                clearing the 3:1 large-text floor at the 0% stop.
                                --gold-mid stays as-is: it is decorative in
                                .eyebrow__dot and never carries text. */
  --gold-pale:    #f6d27a;   /* gold on navy */
  --gold-btn-ink: #3a2807;

  /* Type */
  --font-display: 'Plus Jakarta Sans', 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-text:    'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Rhythm */
  --gutter:      clamp(20px, 2.8vw, 40px);   /* full-bleed chapter cards */
  --gutter-wide: clamp(20px, 6.25vw, 90px);  /* text-grid sections */
  --nav-h:       56px;

  /* Safe areas. The two gutter tokens above stay SYMMETRIC on purpose:
     `.chapter` cancels its parent's horizontal padding with a negative margin
     and would sit off-centre if they were not. The four --pad-* tokens are the
     per-side values every horizontal gutter on the page actually uses, so no
     text can run under the sensor housing or a rounded corner in landscape —
     all four pages declare viewport-fit=cover. */
  --sa-l: env(safe-area-inset-left,  0px);
  --sa-r: env(safe-area-inset-right, 0px);
  --pad-l:      max(var(--gutter),      var(--sa-l));
  --pad-r:      max(var(--gutter),      var(--sa-r));
  --pad-wide-l: max(var(--gutter-wide), var(--sa-l));
  --pad-wide-r: max(var(--gutter-wide), var(--sa-r));

  /* Shadow families — a hard gold "ledge" plus a wide navy ambient */
  --ledge:  rgba(200, 145, 42, 0.14);
  --ledge-strong: rgba(200, 145, 42, 0.18);
  --ambient: rgba(15, 31, 102, 0.26);

  /* Glass fills */
  --rim:           rgba(255, 255, 255, 0.96);
  --rim-chunky:    rgba(255, 255, 255, 0.86);
  --card-border-w: 2px;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--cream);
  /* clip, not hidden: `hidden` would make <html> the scroll container and
     break the fixed nav's compositing plus scroll anchoring. */
  overflow-x: clip;
  scroll-behavior: smooth;
  /* The capsule's real bottom edge is env(top) + its own offset + --nav-h. */
  scroll-padding-top: calc(env(safe-area-inset-top, 0px) + var(--nav-h) + 32px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  position: relative;
  overflow-x: clip;
  min-height: 100%;
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  background:
    linear-gradient(180deg,
      var(--cream)        0%,
      var(--cream-bright) 26%,
      var(--cream-grey)   58%,
      var(--cream-bright) 78%,
      var(--cream)       100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--navy);
  margin: 0;
  text-wrap: balance;
}
h3 { font-weight: 700; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
/* Scoped, never global. `list-style: none` strips the list/listitem roles in
   Safari + VoiceOver, and everything inside the legal pages' <main> is
   regenerated verbatim by gen-legal.py, so role="list" can never be added
   there. Only these decorative lists lose their markers, and each carries an
   explicit role="list" in the markup. */
.strip__list > li,
.feature-grid > li,
.plans > li,
.prose__list > li { list-style: none; }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-hover); }

/* Two-tone ring: navy carries the contrast on cream, the gold halo carries it
   on the navy chapter. No border-radius here — it would reshape pill buttons. */
:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(248, 168, 40, 0.55);
}
/* On the navy chapter the gold halo carries the contrast. */
.chapter--navy :focus-visible { outline-color: #ffffff; }

.skip-link {
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--cream-bright);
  border: 1px solid var(--navy);
  color: var(--navy);
  font-weight: 700;
  transition: top 140ms ease;
}
.skip-link:focus { top: 12px; }

/* --------------------------------------------------------------------------
   3. Atmosphere
   Nine blurred blobs in the artboard (~6.3M CSS px² of filter: blur()) become
   ONE painted layer of radial gradients. A gradient already falling to zero
   alpha at ~62% *is* a blur at 900px; the filter cost nothing but frames.
   -------------------------------------------------------------------------- */

.atmosphere {
  position: absolute;
  inset: 0;
  overflow: hidden;       /* keeps the negative-offset washes off the scrollbar */
  pointer-events: none;
  /* Phone / tablet. .atmosphere is inset:0 on <body>, so it is as tall as the
     WHOLE document — about 12,000px at 393px wide against about 7,000px on
     desktop. Percentage gradient positions therefore drift wildly with content
     length: the old second wash landed at the gallery/features seam and the
     bottom three-quarters of the phone page had no atmosphere at all.

     Fix: size each layer's tile in ABSOLUTE px and let the two mid-page washes
     repeat down the y axis. `at X% Y%` then resolves inside the tile, not
     inside the document, so the rhythm is identical whether the page is 6,000
     or 20,000px tall. Still zero `filter: blur()` — a radial gradient that has
     already fallen to zero alpha at 64% IS the blur, and nine real blur filters
     are what made the design canvas unopenable on a phone.

     Layers 1-2 are the hero key light and cool kicker (one shot, pinned to the
     top). Layers 3-4 are a 1900px band offset half a tile from each other, so
     washes alternate left / right roughly every 950px, for ever. */
  background-image:
    radial-gradient(74vw 560px at 4% 2%,    rgba(248, 218, 108, 0.50) 0%, rgba(248, 218, 108, 0) 66%),
    radial-gradient(82vw 640px at 98% 22%,  rgba(150, 182, 255, 0.40) 0%, rgba(150, 182, 255, 0) 68%),
    radial-gradient(88vw 820px at -14% 26%, rgba(170, 200, 255, 0.30) 0%, rgba(170, 200, 255, 0) 64%),
    radial-gradient(88vw 820px at 114% 26%, rgba(248, 218, 108, 0.34) 0%, rgba(248, 218, 108, 0) 64%);
  background-repeat: no-repeat, no-repeat, repeat-y, repeat-y;
  background-size:   100% 1100px, 100% 1100px, 100% 1900px, 100% 1900px;
  background-position: 0 0, 0 0, 0 1330px, 0 2280px;
}

/* --------------------------------------------------------------------------
   4. The glass recipe
   A white key light from the top-left, a warm gold bounce bottom-right, a cool
   periwinkle kicker top-right, then asymmetric 1px inner rims.
   `isolation: isolate` is load-bearing: it creates the stacking context that
   keeps the z-index:-1 ::before inside the card.
   -------------------------------------------------------------------------- */

.glass { position: relative; isolation: isolate; }

.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(120% 70% at 10% 0%,    rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(70% 55%  at 100% 100%, rgba(200, 145, 42, 0.11)  0%, rgba(200, 145, 42, 0)  65%),
    radial-gradient(60% 40%  at 90% 10%,   rgba(140, 170, 255, 0.15) 0%, rgba(140, 170, 255, 0) 60%);
}

.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0   1px 0 rgba(255, 255, 255, 0.95),
    inset 1px 0   0 rgba(255, 255, 255, 0.60),
    inset 0  -1px 0 rgba(255, 255, 255, 0.35);
}

/* Navy variant. Paints OVER the panel (no negative z-index); the panel's own
   content is lifted with position:relative;z-index:1. The artboard's two
   blurred child blobs are folded in here as gradients 4 and 5. */
.aurora::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(58% 46% at 12% 0%,   rgba(120, 170, 255, 0.42) 0%, rgba(120, 170, 255, 0) 62%),
    radial-gradient(52% 44% at 92% 96%,  rgba(248, 190, 80, 0.30)  0%, rgba(248, 190, 80, 0)  66%),
    radial-gradient(40% 34% at 74% 8%,   rgba(60, 120, 255, 0.30)  0%, rgba(60, 120, 255, 0)  62%),
    radial-gradient(64% 52% at -4% -12%, rgba(120, 170, 255, 0.50) 0%, rgba(120, 170, 255, 0.30) 30%, rgba(120, 170, 255, 0) 72%),
    radial-gradient(66% 54% at 104% 112%, rgba(220, 165, 60, 0.40) 0%, rgba(220, 165, 60, 0.24) 30%, rgba(220, 165, 60, 0) 72%);
}

/* --------------------------------------------------------------------------
   5. Shared primitives
   -------------------------------------------------------------------------- */

/* Gold gradient text — colour declared FIRST so the text is never invisible. */
.goldtext {
  color: var(--gold);
  background: linear-gradient(92deg, var(--gold-grad-start) 0%, var(--gold) 100%);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .goldtext {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: 0.30em;
  padding-left: 0.1em;         /* re-centres the block after the trailing gap */
  color: var(--gold);
  background: linear-gradient(92deg, var(--gold-dk) 0%, var(--gold) 100%);
  white-space: nowrap;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .wordmark {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* Eyebrow pills */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* min-height, not height: at 320px "HOME INVENTORY FOR IPHONE" wraps to two
     lines and a hard height would let it spill straight out of the capsule.
     The symmetric padding keeps the one-line rendering at exactly 40px. */
  min-height: 40px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.80);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 18px -12px rgba(15, 31, 102, 0.24);
  font-family: var(--font-text);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow--tilt-l { transform: rotate(-1.5deg); }
.eyebrow--tilt-r { transform: rotate(1.5deg); }
.eyebrow--onnavy {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.42);
  color: var(--gold-pale);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* The hero pill sits over the gold atmosphere wash and is deliberately lighter
   than the section pills (Main.dc.html:104 — 0.66 against their 0.78/0.80). */
.hero .eyebrow { background: rgba(255, 255, 255, 0.66); }

.eyebrow__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-mid));
  box-shadow: 0 0 0 3px rgba(248, 168, 40, 0.22);   /* Main.dc.html:105 */
  flex: none;
}

/* Buttons.
   NOTE: the base class stays `.btn` — script.js stamps
   [data-appstore-unresolved] onto these anchors and the disabled-state rule
   at the bottom of this block is its only styling hook. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* min-height + symmetric padding, not a hard height: at 320-360px
     "Download on the App Store" plus its icon wraps to two lines, and `height`
     would let it overflow the pill. One-line rendering is unchanged. */
  min-height: 54px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
}
.btn__icon { flex: none; }

.btn--gold {
  background: linear-gradient(100deg, var(--gold-bright) 0%, var(--gold-light) 100%);
  color: var(--gold-btn-ink);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 12px 26px -12px rgba(248, 168, 40, 0.6);
}

.btn--glass {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.95);
  color: #2c2315;
  font-weight: 600;
  box-shadow: 0 10px 24px -14px rgba(15, 31, 102, 0.25);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.btn--sm { min-height: 44px; padding: 10px 18px; font-size: 0.9375rem; gap: 8px; }
.btn--lg { min-height: 54px; padding: 14px 26px; }

.btn--gold.btn--lg {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 16px 32px -12px rgba(248, 168, 40, 0.65);
}

@media (hover: hover) {
  .btn--gold:hover {
    transform: translateY(-1px);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.6) inset,
      0 18px 36px -12px rgba(248, 168, 40, 0.7);
  }
  .btn--glass:hover { background: rgba(255, 255, 255, 0.88); color: var(--navy); }
}

/* The designed two-tone focus ring: :focus-visible sets box-shadow at the same
   specificity as .btn--gold / .btn--glass and loses on source order, so the
   gold halo has to be re-stated here or it never paints on the CTAs. */
.btn--gold:focus-visible {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 0 0 5px rgba(248, 168, 40, 0.55);
}
.btn--glass:focus-visible { box-shadow: 0 0 0 5px rgba(248, 168, 40, 0.55); }

/* App Store links stay inert until APP_STORE_URL is set in script.js. */
.btn[data-appstore-unresolved] { cursor: default; }
.btn[data-appstore-unresolved]:hover { transform: none; }

/* Section headers */
.section-head {
  max-width: 760px;
  margin: 0 auto 36px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.section-head--wide { max-width: 960px; }
.section-head--pricing { max-width: 820px; }
.section-head--faq { max-width: 720px; }

.section-title {
  font-size: clamp(1.875rem, 1.125rem + 3.06vw, 3.875rem);
  line-height: 1.10;
  letter-spacing: -0.018em;
}
.section-lede {
  font-size: clamp(1.03rem, 0.95rem + 0.335vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink-body);
}
.chapter--navy .section-title { color: #ffffff; }
.chapter--navy .section-lede { color: rgba(255, 255, 255, 0.88); }

/* Full-bleed rounded chapter panels */
.chapter {
  position: relative;
  border-radius: 0;
  margin-inline: calc(var(--pad-l) * -1) calc(var(--pad-r) * -1);
  padding-block: 56px 60px;
  padding-inline: var(--pad-l) var(--pad-r);
  overflow: hidden;
}
.chapter--gallery {
  background: linear-gradient(168deg,
    rgba(250, 226, 150, 0.44) 0%,
    rgba(252, 240, 206, 0.50) 46%,
    rgba(255, 253, 249, 0.62) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.chapter--navy {
  background: linear-gradient(168deg,
    var(--navy-top) 0%,
    var(--navy) 52%,
    var(--navy-bottom) 100%);
  box-shadow:
    0 30px 60px -40px rgba(15, 31, 102, 0.7),
    0 12px 30px -18px rgba(60, 120, 255, 0.3);
}
.chapter__body { position: relative; z-index: 1; }

/* Reveal-on-scroll (script.js adds .is-visible) */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 520ms ease, transform 520ms ease;
}
.reveal.is-visible { opacity: 1; transform: none; }
/* Without script.js the h1, the lede, every card and every plan carry
   opacity: 0 and the page renders blank. index.html / support.html also carry
   a <noscript> copy of this for engines without the scripting media feature. */
@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   6. Floating capsule nav
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  z-index: 60;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: max(var(--gutter), env(safe-area-inset-left, 0px));
  right: max(var(--gutter), env(safe-area-inset-right, 0px));
  max-width: 1200px;
  margin-inline: auto;
  transition: transform 180ms cubic-bezier(.2, .7, .2, 1);
}
.nav--hidden { transform: translateY(-160%); }
/* Shift+Tab from page content must not park focus on an off-screen capsule.
   Specificity 0,2,0 beats .nav--hidden's 0,1,0 whatever the source order. */
.nav:focus-within { transform: none; }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--nav-h);
  padding: 0 8px 0 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 18px 44px -24px rgba(15, 31, 102, 0.28),
    0 6px 18px -10px rgba(200, 145, 42, 0.22);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav__inner { background: rgba(255, 255, 255, 0.94); }
}

/* The wordmark alone is an 18px-tall anchor; this is the primary go-home
   control and sits where thumb accuracy is worst (WCAG 2.5.5). */
.nav__brand { display: inline-flex; align-items: center; min-height: 44px; }
.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__link {
  display: none;                 /* restored at 720px */
  align-items: center;
  min-height: 46px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-tertiary);
  transition: background 160ms ease, color 160ms ease;
}
@media (hover: hover) {
  .nav__link:hover { background: rgba(255, 255, 255, 0.78); color: var(--navy); }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.section { position: relative; z-index: 1; }

.hero {
  padding-block: calc(var(--nav-h) + 40px) 0;
  padding-inline: var(--pad-l) var(--pad-r);
}
.hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; }
.hero__device { margin: 0; }  /* <figure> UA margin would overflow the phone */

.hero__title {
  margin-top: 24px;
  max-width: 640px;
  font-size: clamp(2.375rem, 1.25rem + 4.59vw, 5.375rem);
  line-height: 1.06;
  letter-spacing: -0.020em;
}
.hero__title em { font-style: normal; }

.hero__lede {
  margin-top: 22px;
  max-width: 560px;
  font-size: clamp(1.0625rem, 0.922rem + 0.58vw, 1.4375rem);
  line-height: 1.45;
  color: var(--ink-body);
}

.hero__cta {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 360px;
}
.hero__cta .btn { width: 100%; }

/* The tilted device. Everything is driven off --hero-stage-w so the radii
   scale with it; a 300px mock with a 60px radius reads as a lozenge. */
.hero__stage {
  --hero-stage-w: min(300px, 76vw);
  --hero-tilt: -2.5deg;
  position: relative;
  width: var(--hero-stage-w);
  aspect-ratio: 480 / 900;
  margin-inline: auto;
  transform: rotate(var(--hero-tilt));
  animation: settle 1.3s cubic-bezier(.2, .8, .2, 1) 0.15s both;
}

.hero__shell {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--hero-stage-w) * 0.125);
  overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.76) 0%, rgba(255, 255, 255, 0.36) 100%);
  border: 1px solid var(--rim);
  box-shadow:
    /* the hard, unblurred offset block is what sells the tilt as physical */
    12px 14px 0 -2px rgba(15, 31, 102, 0.10),
    0 40px 80px -44px rgba(15, 31, 102, 0.34),
    0 18px 36px -22px rgba(200, 145, 42, 0.24);
  /* backdrop-filter lives in the 1080 block, not here: below it the shell's
     parent runs a 1.3s transform animation, which forces the backdrop to be
     re-sampled every frame of first paint, and there is nothing behind it at
     that width but two smooth gradients. */
}

.hero__screen {
  position: relative;
  width: 77.5%;
  aspect-ratio: 372 / 810;
  border-radius: calc(var(--hero-stage-w) * 0.0875);
  overflow: hidden;
  background: var(--screen-well);
  box-shadow:
    0 24px 48px -28px rgba(15, 31, 102, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.55);
}

/* B's highlight band. Below 1080 it is parked statically — a 7s infinite loop
   over a backdrop-filtered surface is the worst motion offender on the page. */
.sweep-band {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 34%;
  z-index: 3;
  pointer-events: none;
  transform: translateX(22%) skewX(-16deg);
  opacity: 0.18;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.28) 40%,
    rgba(255, 255, 255, 0.62) 50%,
    rgba(255, 255, 255, 0.28) 60%,
    rgba(255, 255, 255, 0) 100%);
}

.hero__label {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);   /* Main.dc.html:128/130 */
  border: 1px solid rgba(255, 255, 255, 0.96);
  box-shadow:
    0 16px 32px -18px rgba(15, 31, 102, 0.4),
    0 4px 12px -6px rgba(200, 145, 42, 0.3);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--navy);
  transform: rotate(var(--r, 0deg));
  animation: label-in 0.6s cubic-bezier(.2, .9, .3, 1.35) 1.1s both;
}
.hero__label--a { --r: 5deg;  left: 4px;  top: 30%; }
.hero__label--b { --r: -5deg; right: 4px; bottom: 26%; animation-delay: 1.28s; }

@keyframes settle {
  0%   { opacity: 0; transform: translate(34px, 54px) rotate(calc(var(--hero-tilt) * 2.75)) scale(0.95); }
  62%  { opacity: 1; transform: translate(-4px, -7px) rotate(calc(var(--hero-tilt) * 0.6))  scale(1.008); }
  82%  {             transform: translate(2px, 3px)   rotate(calc(var(--hero-tilt) * 1.15)) scale(0.999); }
  100% { opacity: 1; transform: translate(0, 0)       rotate(var(--hero-tilt))              scale(1); }
}
@keyframes label-in {
  0%   { opacity: 0; transform: scale(0.7)  rotate(var(--r, 0deg)); }
  70%  { opacity: 1; transform: scale(1.08) rotate(var(--r, 0deg)); }
  100% { opacity: 1; transform: scale(1)    rotate(var(--r, 0deg)); }
}
@keyframes sweep {
  0%   { transform: translateX(-160%) skewX(-16deg); }
  28%  { transform: translateX(380%)  skewX(-16deg); }
  100% { transform: translateX(380%)  skewX(-16deg); }
}

/* --------------------------------------------------------------------------
   8. Apple-platforms strip
   -------------------------------------------------------------------------- */

.strip { padding-block: 48px 0; padding-inline: var(--pad-l) var(--pad-r); }
.strip__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.strip__list li {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 11px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.60);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 18px -12px rgba(15, 31, 102, 0.22);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-tertiary);
}

/* --------------------------------------------------------------------------
   9. Gallery — scattered phone tiles
   -------------------------------------------------------------------------- */

.gallery { padding-block: 64px 0; padding-inline: var(--pad-l) var(--pad-r); }

.shots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(280px, 74vw);
  gap: 16px;
  /* Explicit on both axes. `overflow-x: auto` alone computes overflow-y to
     auto as well, so the rail was already clipping vertically by accident;
     16px of padding-top gives the +/-2deg tile rotation room to breathe. */
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad-l) var(--pad-r);
  padding-block: 16px 28px;
  padding-inline: var(--pad-l) var(--pad-r);
  margin-inline: calc(var(--pad-l) * -1) calc(var(--pad-r) * -1);
  scrollbar-width: none;
}
.shots::-webkit-scrollbar { display: none; }
/* The rail is flush with the chapter's clipped border box, so the default
   ring (2px outline at 2px offset + a 5px halo) is sliced off on both sides. */
.shots:focus-visible {
  outline-offset: -4px;
  box-shadow: inset 0 0 0 5px rgba(248, 168, 40, 0.55);
}

.shot-tile {
  margin: 0;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px 12px 20px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--rim);
  box-shadow:
    0 12px 0 -3px rgba(200, 145, 42, 0.16),
    0 16px 30px -20px rgba(15, 31, 102, 0.3);
  transition: transform 220ms ease;
}
.shot-tile--1 { transform: rotate(-2deg); }
.shot-tile--2 { transform: rotate(2deg); }
.shot-tile--3 { transform: rotate(-2deg); }
.shot-tile--4 { transform: rotate(2deg); }
@media (hover: hover) {
  .shot-tile:hover { transform: rotate(0deg) translateY(-4px); }
}

.shot-tile figcaption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 8px;
}
.shot-kicker {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold);
}
.shot-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(1.1875rem, 1.141rem + 0.19vw, 1.3125rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
}

/* Phone mockups — the placeholder / onerror contract.
   The placeholder sits UNDER the image; the <img> removes itself on a 404. */
.phone__screen {
  position: relative;
  width: 100%;
  aspect-ratio: 269 / 583;
  border-radius: 22px;
  overflow: hidden;
  background: var(--screen-well);
  box-shadow:
    0 24px 50px -30px rgba(15, 31, 102, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.5);
}
.hero__screen.phone__screen {
  width: 77.5%;
  aspect-ratio: 372 / 810;
  border-radius: calc(var(--hero-stage-w) * 0.0875);
}

.phone__placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8125rem;
  line-height: 1.4;
}
.phone__placeholder span { font-weight: 700; color: rgba(255, 255, 255, 0.9); word-break: break-word; }
.phone__placeholder small { font-size: 0.75rem; color: rgba(255, 255, 255, 0.55); }

.phone__image {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   10. Features
   -------------------------------------------------------------------------- */

.features {
  margin-top: 64px;
  padding-block: 64px 72px;
  padding-inline: var(--pad-l) var(--pad-r);
  border-top: 1px solid rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.85);
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0)    0%,
    rgba(255, 255, 255, 0.66) 12%,
    rgba(255, 255, 255, 0.72) 88%,
    rgba(255, 255, 255, 0)   100%);
}
.features__inner { max-width: 1260px; margin: 0 auto; }

.feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.feature-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 22px 26px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.92);
  border: var(--card-border-w) solid var(--rim-chunky);
  box-shadow:
    0 10px 0 -2px var(--ledge),
    0 16px 30px -22px var(--ambient);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
@media (hover: hover) {
  .feature-card:hover {
    transform: translateY(-4px);
    box-shadow:
      0 14px 0 -2px var(--ledge-strong),
      0 26px 48px -28px rgba(15, 31, 102, 0.3);
  }
}

.feature-card h3,
.faq-card h3 {
  font-size: clamp(1.3125rem, 1.219rem + 0.38vw, 1.5625rem);
  line-height: 1.22;
  letter-spacing: -0.005em;
}
.feature-card p,
.faq-card p,
.plan__desc {
  font-size: 1.0625rem;
  color: var(--ink-body);
}
.feature-card p { line-height: 1.55; }   /* Main.dc.html:212 */
.faq-card p,
.plan__desc     { line-height: 1.6; }    /* Main.dc.html:378 / :330 */

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  flex: none;
}
.feature-icon svg { width: 24px; height: 24px; }
.feature-icon--cream {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(251, 238, 206, 0.9));
  border: 1px solid rgba(200, 145, 42, 0.38);
  color: var(--gold);
  box-shadow: 0 8px 16px -10px rgba(200, 145, 42, 0.5);
}
.feature-icon--navy {
  background: linear-gradient(160deg, var(--navy-chip), var(--navy));
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--gold-pale);
  box-shadow: 0 10px 20px -12px rgba(15, 31, 102, 0.7);
}
/* hand-placed rotations, in card order */
.feature-card:nth-child(1)  .feature-icon { transform: rotate(-3deg); }
.feature-card:nth-child(2)  .feature-icon { transform: rotate(3deg); }
.feature-card:nth-child(3)  .feature-icon { transform: rotate(-4deg); }
.feature-card:nth-child(4)  .feature-icon { transform: rotate(4deg); }
.feature-card:nth-child(5)  .feature-icon { transform: rotate(3deg); }
.feature-card:nth-child(6)  .feature-icon { transform: rotate(-3deg); }
.feature-card:nth-child(7)  .feature-icon { transform: rotate(4deg); }
.feature-card:nth-child(8)  .feature-icon { transform: rotate(-4deg); }
.feature-card:nth-child(9)  .feature-icon { transform: rotate(3deg); }
.feature-card:nth-child(10) .feature-icon { transform: rotate(4deg); }
.feature-card:nth-child(11) .feature-icon { transform: rotate(-3deg); }
.feature-card:nth-child(12) .feature-icon { transform: rotate(3deg); }

/* --------------------------------------------------------------------------
   11. Pricing — the navy chapter
   -------------------------------------------------------------------------- */

.pricing { padding-block: 64px 0; padding-inline: var(--pad-l) var(--pad-r); }

.plans {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 16px;
}

.plan {
  display: flex;
  flex-direction: column;
  padding: 26px 22px 28px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--rim);
  box-shadow: 0 20px 44px -26px rgba(5, 12, 44, 0.7);
}
.plan--featured {
  background: rgba(255, 255, 255, 0.97);
  border: 2px solid rgba(246, 210, 122, 0.95);
  box-shadow:
    0 24px 52px -24px rgba(5, 12, 44, 0.75),
    0 0 0 6px rgba(246, 210, 122, 0.16);
}

.plan__tier {
  /* an <h3> in the markup, so it must opt out of the h1,h2,h3 display face */
  font-family: var(--font-text);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.plan__price {
  margin-top: 14px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.plan__amount {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--navy);
  font-size: clamp(2.5rem, 2.266rem + 0.955vw, 3.125rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.plan__period,
.plan__note {
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-muted);
}
.plan__note { margin-top: 12px; min-height: 24px; display: block; }
.plan__rule {
  height: 1px;
  flex: none;
  margin: 22px 0 20px;
  border: 0;
  background: linear-gradient(90deg, rgba(200, 145, 42, 0.6), rgba(200, 145, 42, 0.05));
}
.plan--featured .plan__rule {
  background: linear-gradient(90deg, rgba(200, 145, 42, 0.75), rgba(200, 145, 42, 0.08));
}

/* --------------------------------------------------------------------------
   11b. Plan comparison table (2026-09-24 — the four cards became one table)
   -------------------------------------------------------------------------- */

.plan-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--rim);
  box-shadow: 0 20px 44px -26px rgba(5, 12, 44, 0.7);
}
.plan-table {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
  color: var(--ink);
}
.plan-table th,
.plan-table td {
  padding: 12px 14px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid rgba(26, 21, 16, 0.08);
}
.plan-table thead th {
  padding: 22px 14px 16px;
  vertical-align: bottom;
  border-bottom: 1px solid rgba(200, 145, 42, 0.45);
}
.plan-table thead th .plan__tier { display: block; }
.plan-table__price {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 4px;
  margin-top: 10px;
}
.plan-table thead .plan__amount { font-size: clamp(1.6rem, 1.4rem + 0.8vw, 2.1rem); }
.plan-table thead .plan__note { margin-top: 6px; min-height: 0; font-size: 0.85rem; }
.plan-table tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--ink);
  min-width: 220px;
}
.plan-table tbody td { color: var(--ink-muted); font-weight: 500; white-space: nowrap; }
.plan-table thead .plan__period,
.plan-table thead .plan__note { white-space: nowrap; }
.plan-table__group th {
  padding-top: 22px;
  font-family: var(--font-text);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 0;
}
.plan-table__corner { width: 30%; }
.plan-table th.plan-table__featured,
.plan-table tbody tr > td:nth-child(4) {
  background: rgba(246, 210, 122, 0.14);
}
.plan-table tbody tr:last-child th,
.plan-table tbody tr:last-child td { border-bottom: 0; }
.plan-table .tick { color: var(--gold); font-weight: 800; font-size: 1.05rem; }
.plan-table .dash { color: rgba(26, 21, 16, 0.28); }
/* The first column stays put while a phone scrolls the plans sideways. */
.plan-table tbody th,
.plan-table thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #ffffff;           /* opaque: the scrolled cells must not ghost through */
}
.plan-table__group th { border-bottom: 0; }
.plan-table__group td { border-bottom: 0; background: transparent; }
@media (max-width: 720px) {
  .plan-table { min-width: 0; font-size: 0.88rem; }
  .plan-table th, .plan-table td { padding: 10px 10px; }
  .plan-table tbody th { min-width: 0; width: 44vw; max-width: 180px; }
  .plan-table td { min-width: 118px; }
  .plan-table thead .plan__amount { font-size: 1.45rem; }
  .plan-table thead th { padding: 16px 10px 12px; }
}

/* The Trove AI cloud, before a heading or a sentence — the mark the app uses. */
.cloudmark {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.35em;
  vertical-align: -0.12em;
  background: currentColor;
  color: #d99b2b;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18a4.5 4.5 0 0 1-.6-8.96A6 6 0 0 1 18 8.5a4 4 0 0 1-.5 7.97Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18a4.5 4.5 0 0 1-.6-8.96A6 6 0 0 1 18 8.5a4 4 0 0 1-.5 7.97Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   12. FAQ
   -------------------------------------------------------------------------- */

.faq { padding-block: 56px 0; padding-inline: var(--pad-l) var(--pad-r); }
.faq__inner { max-width: 1260px; margin: 0 auto; }

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.faq-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px 26px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.92);
  border: var(--card-border-w) solid var(--rim-chunky);
  box-shadow:
    0 10px 0 -2px rgba(200, 145, 42, 0.13),
    0 16px 30px -22px var(--ambient);
}
.faq-card a { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   13. Closing CTA
   -------------------------------------------------------------------------- */

.closing { padding-block: 72px 0; padding-inline: var(--pad-l) var(--pad-r); }

.closing__card {
  max-width: 1260px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px var(--gutter);
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.76) 0%, rgba(255, 255, 255, 0.42) 100%);
  border: 1px solid var(--rim);
  box-shadow:
    0 12px 0 -3px var(--ledge),
    0 40px 80px -44px rgba(15, 31, 102, 0.3);
}
.closing__wordmark { font-size: 1.0625rem; letter-spacing: 0.30em; }
.closing__title {
  margin-top: 22px;
  font-size: clamp(2rem, 1.1rem + 3.65vw, 4.375rem);
  line-height: 1.08;
  letter-spacing: -0.020em;
}
.closing__lede {
  margin-top: 18px;
  max-width: 640px;
  font-size: clamp(1.0625rem, 0.96rem + 0.39vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ink-body);
}

/* WCAG 1.4.1: gold on --ink-body is 1.70:1, so colour alone cannot mark an
   inline link. Nav and footer pills are exempt — they are whole blocks of
   links inside a <nav>, distinguished by context. */
.hero__lede a,
.section-lede a,
.closing__lede a,
.page-head__lede a,
.plan__desc a,
.footer__brand a { text-decoration: underline; text-underline-offset: 3px; }
.closing__card .btn {
  margin-top: 30px;
  width: 100%;
  max-width: 360px;
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

.footer {
  position: relative;
  z-index: 1;
  padding-block: 48px 40px;
  padding-inline: var(--pad-l) var(--pad-r);
}
.footer__inner {
  max-width: 1260px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.footer__brand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.9375rem;
  color: var(--ink-muted);
}
.footer__wordmark { font-size: 0.8125rem; letter-spacing: 0.28em; }
.footer__rule {
  width: 1px;
  height: 16px;
  background: rgba(200, 145, 42, 0.45);
  flex: none;
}
.footer__links { display: flex; flex-wrap: wrap; gap: 12px; }
/* Main.dc.html:421-423 — the artboard's footer links are bare text that only
   picks up a chip on hover. The resting background + border made the footer
   louder than the quiet one the owner approved. */
.foot-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-body);
  transition: background 160ms ease, color 160ms ease;
}
@media (hover: hover) {
  .foot-link:hover { background: rgba(255, 255, 255, 0.7); color: var(--navy); }
}
.foot-link[aria-current="page"] { color: var(--navy); background: rgba(255, 255, 255, 0.78); }

/* --------------------------------------------------------------------------
   15. Sub-pages — support.html (.page-head / .prose) and the legal pages
   -------------------------------------------------------------------------- */

.page-head {
  padding-block: calc(var(--nav-h) + 48px) 0;
  padding-inline: var(--pad-l) var(--pad-r);
}
.page-head__inner {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.page-head__title {
  font-size: clamp(2rem, 1.1rem + 3.65vw, 4.375rem);
  line-height: 1.08;
  letter-spacing: -0.020em;
}
.page-head__lede {
  max-width: 640px;
  font-size: clamp(1.0625rem, 0.922rem + 0.58vw, 1.4375rem);
  line-height: 1.45;
  color: var(--ink-body);
}

.prose { padding-block: 48px 0; padding-inline: var(--pad-l) var(--pad-r); }
.prose__inner {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.prose__block {
  padding: 24px 22px 26px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.92);
  border: var(--card-border-w) solid var(--rim-chunky);
  box-shadow:
    0 10px 0 -2px rgba(200, 145, 42, 0.13),
    0 16px 30px -22px var(--ambient);
}
.prose__block h2 {
  font-size: clamp(1.3125rem, 1.219rem + 0.38vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin-bottom: 14px;
}
.prose__block p,
.prose__list li {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-body);
}
.prose__block p + p,
.prose__block p + .prose__list,
.prose__block .prose__list + p { margin-top: 14px; }
.prose__list { display: flex; flex-direction: column; gap: 10px; }
.prose__list li { position: relative; padding-left: 22px; }
.prose__list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(200, 145, 42, 0.7);
}
.prose__list--ordered { counter-reset: step; }
.prose__list--ordered li { padding-left: 30px; }
.prose__list--ordered li::before {
  counter-increment: step;
  content: counter(step) ".";
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font-weight: 700;
  color: var(--gold);
}
.prose__block strong { color: var(--ink); font-weight: 700; }
.prose__block a { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Legal pages (privacy.html / terms.html) -----------------------------
   The <main id="content" class="container"> element and everything inside it
   is regenerated verbatim by marketing-site/gen-legal.py. These rules style
   the markup it emits; do not rely on adding classes inside <main>.
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding-inline: var(--pad-l) var(--pad-r);
}

/* privacy.html / terms.html make ZERO third-party requests — no Google Fonts
   link, no preconnects. A Privacy Policy that ships the reader's IP and
   User-Agent to a third party before it can say "we do not track you" defeats
   itself, and the App Store links to these two pages directly.

   Resolved 2026-09-11 by self-hosting the fonts instead: no page loads
   anything off-origin, so the legal pages now use the SAME typeface as the
   rest of the site and the wordmark is consistent across all four. The
   system-stack override that used to live here is gone. */

.legal > header {
  position: relative;
  z-index: 1;
  padding: 20px 0 8px;
}
.legal > header .container {
  max-width: 1200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
}
.legal .brand { display: inline-flex; align-items: center; min-height: 44px; }
.legal > header nav { display: flex; flex-wrap: wrap; gap: 8px; }

.legal main.container {
  position: relative;
  z-index: 1;
  padding-block: 40px 64px;
}
.legal main.container h1 {
  font-size: clamp(1.875rem, 1.3rem + 2.1vw, 2.75rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.legal main.container h2 {
  font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 2.2em 0 0.6em;
}
.legal main.container h3 {
  font-size: 1.0625rem;
  line-height: 1.4;
  margin: 1.6em 0 0.4em;
  color: var(--navy);
}
.legal main.container p,
.legal main.container li,
.legal main.container address {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-body);
}
.legal main.container p { margin: 0 0 1em; }
.legal main.container address { font-style: normal; margin: 0 0 1em; }
.legal main.container a { text-decoration: underline; text-underline-offset: 3px; }
.legal main.container strong { color: var(--ink); font-weight: 700; }
.legal main.container time { color: var(--ink-muted); }
.legal p.effective { margin-bottom: 1.6em !important; }

/* NATIVE markers on the legal pages, never `list-style: none` and never a
   ::before fake. Safari + VoiceOver drop the list/listitem roles from any list
   whose list-style computes to none, and gen-legal.py regenerates every
   <ul>/<ol> inside <main> verbatim, so role="list" can never be added there —
   CSS is the only place this can be fixed. ::marker restores the gold. */
.legal ol.toc {
  list-style: decimal;
  padding: 20px 22px 20px 46px;
  margin: 0 0 8px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 0 -2px rgba(200, 145, 42, 0.10), 0 16px 30px -24px var(--ambient);
}
.legal ol.toc li { margin: 6px 0; }
.legal main.container nav[aria-labelledby="toc-heading"] h2 { font-size: 1.125rem; }

.legal main.container ul { list-style: disc; margin: 0 0 1em; padding-left: 1.4em; }
.legal main.container ul > li { margin-bottom: 0.5em; }
.legal main.container li::marker { color: var(--gold); font-weight: 700; }

/* ol.alpha already carries its own "a)" labels in a generated <span class="l">,
   so it must render NO marker while keeping the list role. list-style-type: ""
   does exactly that; the @supports guard leaves older Safari on `none` rather
   than dropping the declaration and falling back to visible decimals. */
.legal ol.alpha { list-style-type: none; margin: 0 0 1em; }
@supports (list-style-type: "") {
  .legal ol.alpha { list-style-type: ""; }
}
.legal ol.alpha > li { position: relative; padding-left: 30px; margin-bottom: 0.6em; }
.legal ol.alpha > li > span.l {
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--gold);
}

.legal > footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(200, 145, 42, 0.25);
  padding: 28px 0 40px;
  font-size: 0.9375rem;
  color: var(--ink-muted);
}
.legal > footer .container {
  max-width: 1200px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
}
.legal > footer nav { display: flex; flex-wrap: wrap; gap: 8px; }
.legal > footer .container > span { display: inline-flex; align-items: center; min-height: 44px; }

/* ==========================================================================
   16. Breakpoints
   ========================================================================== */

@media (min-width: 720px) {
  :root { --nav-h: 64px; --card-border-w: 3px; }

  .nav { top: calc(env(safe-area-inset-top, 0px) + 18px); }
  .nav__inner { padding: 0 10px 0 28px; }
  .nav__link { display: inline-flex; }

  .wordmark { font-size: 1.4375rem; letter-spacing: 0.36em; }
  .closing__wordmark { font-size: 1.375rem; letter-spacing: 0.36em; }
  .footer__wordmark { font-size: 0.875rem; letter-spacing: 0.32em; }

  .hero { padding-top: calc(var(--nav-h) + 64px); }
  .hero__title    { letter-spacing: -0.028em; line-height: 1.03; }
  .section-title  { letter-spacing: -0.024em; line-height: 1.08; }
  .closing__title,
  .page-head__title { letter-spacing: -0.028em; line-height: 1.05; }

  .hero__cta { flex-direction: row; max-width: none; }
  .hero__cta .btn { width: auto; }
  .btn--lg { min-height: 56px; padding: 15px 28px; }
  .hero__stage { --hero-stage-w: 360px; --hero-tilt: -3deg; }
  .hero__label { min-height: 44px; padding: 0 16px; font-size: 0.9375rem; }
  .hero__label--a { left: -28px; }
  .hero__label--b { right: -20px; }

  .strip { padding-top: 60px; }
  .strip__list { gap: 12px; }

  /* chapters become rounded panels again */
  .chapter {
    margin-inline: 0;
    border-radius: 40px;
    padding: 64px 28px 72px;
  }
  .chapter--navy { padding: 64px 32px 72px; }

  /* The artboard's panel EDGES (Main.dc.html:149 / :313). Held back until 720
     because below it the chapter is full-bleed with radius 0, where a 1px
     border draws a hairline down both screen edges instead of around a card.
     The 1px white hairline is the only thing separating the navy pricing
     chapter from the cream page. */
  .chapter--gallery {
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow:
      0 40px 90px -60px rgba(15, 31, 102, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  .chapter--navy {
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow:
      0 60px 120px -60px rgba(15, 31, 102, 0.7),
      0 20px 44px -22px rgba(60, 120, 255, 0.3);
  }

  .gallery { padding-top: 88px; }
  .shots {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 340px));
    justify-content: center;
    gap: 22px;
    /* both axes: `overflow-x: visible` alone would keep the inherited
       `overflow-y: hidden` and re-compute x back to auto */
    overflow-x: visible;
    overflow-y: visible;
    scroll-snap-type: none;
    padding: 0 18px;
    margin-inline: 0;
  }
  .shot-tile { border-radius: 40px; padding: 14px 14px 24px; gap: 16px; }
  .shot-tile--1 { transform: rotate(-1.5deg); }
  .shot-tile--2 { transform: rotate(1.5deg);  margin-top: 22px; }
  .shot-tile--3 { transform: rotate(-1.5deg); }
  .shot-tile--4 { transform: rotate(1.5deg);  margin-top: 22px; }
  .phone__screen { border-radius: 28px; }

  .section-head { gap: 22px; margin-bottom: 48px; }

  .features {
    margin-top: 88px;
    padding-block: 88px 96px;
    padding-inline: var(--pad-wide-l) var(--pad-wide-r);
  }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .feature-card { padding: 28px 26px 30px; border-radius: 32px; gap: 18px; }
  .feature-icon { width: 54px; height: 54px; border-radius: 18px; }
  .feature-icon svg { width: 25px; height: 25px; }
  .feature-card h3, .faq-card h3 { line-height: 1.18; }

  .pricing { padding-top: 88px; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .plan { padding: 28px 24px 30px; border-radius: 32px; }

  .faq { padding-block: 20px 0; padding-inline: var(--pad-wide-l) var(--pad-wide-r); }
  .faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .faq-card { padding: 30px 30px 32px; border-radius: 32px; gap: 14px; }

  .closing { padding-block: 96px 0; padding-inline: var(--pad-wide-l) var(--pad-wide-r); }
  .closing__card { padding: 64px 40px; border-radius: 44px; }
  .closing__card .btn { width: auto; max-width: none; }

  .footer { padding-block: 64px 56px; padding-inline: var(--pad-wide-l) var(--pad-wide-r); }
  .footer__inner { flex-direction: row; align-items: center; justify-content: space-between; }
  .footer__brand { font-size: 1rem; }
  .footer__links { gap: 8px; }

  .page-head {
    padding-block: calc(var(--nav-h) + 72px) 0;
    padding-inline: var(--pad-wide-l) var(--pad-wide-r);
  }
  .prose { padding-block: 56px 0; padding-inline: var(--pad-wide-l) var(--pad-wide-r); }
  .prose__inner { gap: 22px; }
  .prose__block { padding: 32px 32px 34px; border-radius: 32px; }

  .legal main.container { padding-block: 56px 80px; }
}

@media (min-width: 1080px) {
  :root { --nav-h: 72px; }

  .nav { top: calc(env(safe-area-inset-top, 0px) + 24px); }
  .nav__inner {
    padding: 0 12px 0 34px;
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
  }
  .nav--hidden { transform: none; }

  /* Main.dc.html:90 — a 44px/15px pill reads undersized inside a 72px capsule
     next to a 23px wordmark and 46px nav links. */
  .btn--sm { min-height: 50px; padding: 13px 22px; font-size: 1rem; }

  .hero__title    { letter-spacing: -0.035em; line-height: 1.00; }
  .section-title  { letter-spacing: -0.030em; line-height: 1.06; }
  .closing__title,
  .page-head__title { letter-spacing: -0.035em; line-height: 1.03; }
  .feature-card h3, .faq-card h3 { letter-spacing: -0.015em; line-height: 1.15; }
  .shot-title { letter-spacing: -0.01em; }

  /* Desktop translucency at the artboard's values, and backdrop-filter returns
     — now on the nav capsule, the hero shell, the two hero labels, the glass
     button, the navy eyebrow, the four gallery tiles, the four plans and the
     closing card. .feature-card / .faq-card / .prose__block stay flat
     translucent fills: the artboard blurs them too, but 20+ more blurred
     surfaces is the cost this port was built to avoid. Raise it with the owner
     if the desktop cards read too printed. */
  .feature-card, .prose__block { background: rgba(255, 255, 255, 0.72); }
  .faq-card { background: rgba(255, 255, 255, 0.66); }

  /* The four gallery tiles are the only glass sitting directly on the pale-gold
     wash, so they are the lightest fill on the page and the one that most
     needs the blur (Main.dc.html:180). */
  .shot-tile {
    background: rgba(255, 255, 255, 0.58);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
  }
  .hero__label {
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
  }
  .plan {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
  }
  .plan--featured { background: rgba(255, 255, 255, 0.97); }
  .closing__card {
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
  }

  /* the one looping element on the page; script.js pauses it out of view */
  .sweep-band {
    opacity: 1;
    transform: translateX(-160%) skewX(-16deg);
    animation: sweep 7s cubic-bezier(0.45, 0, 0.2, 1) 2s infinite;
    animation-play-state: paused;
  }
  .is-sweeping .sweep-band { animation-play-state: running; }

  .hero__shell {
    box-shadow:
      22px 26px 0 -2px rgba(15, 31, 102, 0.10),
      0 60px 120px -48px rgba(15, 31, 102, 0.34),
      0 24px 48px -24px rgba(200, 145, 42, 0.24);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
  }

  /* ----- The artboard's ambient light, restored ---------------------------
     Every card's soft second shadow layer was shrunk 40-50% for the phone
     layout and never put back at the widths the owner actually approved, so
     the desktop page read flat and printed instead of sitting on a deep navy
     ambient. These are Main.dc.html's values verbatim. The hard gold "ledge"
     layer (0 10px 0 -2px / 0 12px 0 -3px) was already correct and is
     unchanged; only the soft layer moves. .hero__shell above is the pattern. */
  .shot-tile {
    box-shadow:
      0 12px 0 -3px rgba(200, 145, 42, 0.16),
      0 40px 80px -40px rgba(15, 31, 102, 0.3);
  }
  .feature-card {
    box-shadow:
      0 10px 0 -2px var(--ledge),
      0 26px 52px -32px rgba(15, 31, 102, 0.26);
  }
  .faq-card {
    box-shadow:
      0 10px 0 -2px rgba(200, 145, 42, 0.13),
      0 26px 52px -32px rgba(15, 31, 102, 0.26);
  }
  .prose__block {
    box-shadow:
      0 10px 0 -2px rgba(200, 145, 42, 0.13),
      0 26px 52px -32px rgba(15, 31, 102, 0.26);
  }
  .plan { box-shadow: 0 30px 60px -30px rgba(5, 12, 44, 0.7); }
  .plan--featured {
    box-shadow:
      0 34px 70px -28px rgba(5, 12, 44, 0.75),
      0 0 0 6px rgba(246, 210, 122, 0.16);
  }
  .closing__card {
    box-shadow:
      0 12px 0 -3px var(--ledge),
      0 50px 100px -48px rgba(15, 31, 102, 0.3);
  }
  /* .phone__screen (0,1,0, later in source) wins over .hero__screen for the
     hero's inner well, so the hero value needs the compound selector. */
  .phone__screen {
    box-shadow:
      0 24px 50px -26px rgba(15, 31, 102, 0.5),
      0 0 0 1px rgba(255, 255, 255, 0.5);
  }
  .hero__screen.phone__screen {
    box-shadow:
      0 30px 60px -28px rgba(15, 31, 102, 0.55),
      0 0 0 1px rgba(255, 255, 255, 0.55);
  }
  @media (hover: hover) {
    .feature-card:hover {
      box-shadow:
        0 14px 0 -2px var(--ledge-strong),
        0 34px 64px -32px rgba(15, 31, 102, 0.3);
    }
  }

  .strip { padding-top: 70px; }

  /* 1080-1239 was a dead band: the hero only goes two-column at 1240, so the
     360px mock from the 720 block floated in the middle of an ~1100px column. */
  .hero__stage { --hero-stage-w: clamp(360px, 30vw, 400px); }

  .chapter { border-radius: 56px; padding: 80px 40px 88px; }
  .chapter--navy { padding: 80px 48px 88px; }

  .features {
    margin-top: 120px;
    padding-block: 120px 130px;
    padding-inline: var(--pad-wide-l) var(--pad-wide-r);
  }
  .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
  .feature-card { padding: 34px 32px 36px; border-radius: 38px; }
  .feature-icon { width: 58px; height: 58px; border-radius: 20px; }
  .feature-icon svg { width: 26px; height: 26px; }

  .faq-card { border-radius: 38px; padding: 36px 38px 38px; }
  .faq-grid { gap: 26px; }

  .section-head { margin-bottom: 56px; }

  .closing { padding-top: 130px; }
  .closing__card { padding: 80px 60px; border-radius: 56px; }
  .prose__block { border-radius: 38px; padding: 36px 38px 38px; }

  /* Full atmosphere: seven washes, one paint, zero blur filters. */
  .atmosphere {
    background:
      radial-gradient(860px 860px at -240px -280px,      rgba(248, 218, 108, 0.62) 0%, rgba(248, 218, 108, 0) 62%),
      radial-gradient(1000px 1000px at calc(100% + 320px) 90px, rgba(150, 182, 255, 0.48) 0%, rgba(150, 182, 255, 0) 62%),
      radial-gradient(900px 900px at -340px 18.5%,       rgba(170, 200, 255, 0.34) 0%, rgba(170, 200, 255, 0) 62%),
      radial-gradient(880px 880px at calc(100% + 280px) 38%, rgba(248, 218, 108, 0.40) 0%, rgba(248, 218, 108, 0) 62%),
      radial-gradient(900px 900px at -300px 56%,         rgba(150, 182, 255, 0.36) 0%, rgba(150, 182, 255, 0) 62%),
      radial-gradient(860px 860px at calc(100% + 260px) 80%, rgba(248, 218, 108, 0.38) 0%, rgba(248, 218, 108, 0) 62%),
      radial-gradient(940px 640px at 260px 90%,          rgba(170, 200, 255, 0.32) 0%, rgba(170, 200, 255, 0) 62%);
  }
}

@media (min-width: 1240px) {
  .hero {
    padding-block: calc(var(--nav-h) + 94px) 0;
    padding-inline: max(80px, var(--sa-l)) max(80px, var(--sa-r));
  }
  .hero__inner {
    flex-direction: row;
    /* Main.dc.html:101 — the copy column is vertically centred against the
       960px device column; flex-start left the composition high and
       top-heavy against an ~891px column. */
    align-items: center;
    justify-content: space-between;
    gap: 60px;
  }
  /* Never `flex: 0 0 660px` + `0 0 560px`: 660+560+60 = 1280, which overflows
     the 1080px content box at exactly 1240. The copy flexes, the device column
     is sized from the same clamp as the stage inside it. */
  .hero__copy { flex: 1 1 auto; min-width: 0; max-width: 660px; }
  .hero__device {
    flex: 0 0 auto;
    width: clamp(420px, 36vw, 560px);
    margin: 0;
    display: flex;
    justify-content: center;
  }
  .hero__title { margin-top: 28px; }
  .hero__lede { margin-top: 30px; }
  .hero__cta { margin-top: 40px; }
  .btn--lg { min-height: 62px; padding: 18px 32px; font-size: 1.125rem; }
  .btn--glass.btn--lg { padding: 18px 28px; }
  .hero__stage {
    /* 33.4vw, not 33vw: at the 1440px artboard width 33vw resolves to 475.2px
       and every radius derived from the stage lands ~1% small. */
    --hero-stage-w: clamp(400px, 33.4vw, 480px);
    --hero-tilt: -4deg;
    margin-inline: 0;
  }
  .hero__label { min-height: 50px; padding: 0 20px; font-size: 1rem; }
  /* -54px is the artboard value and applies from 1360 up. Below that the copy
     column is still wide enough that a hard -54px leaves label A about 10px
     from the h1; this interpolates it in to -34px at 1240. */
  .hero__label--a { left: max(-54px, calc(-34px - (100vw - 1240px) * 0.1667)); top: 19%; }
  .hero__label--b { right: -36px; bottom: 18%; }

  .gallery {
    padding-block: 110px 0;
    padding-inline: max(40px, var(--sa-l)) max(40px, var(--sa-r));
  }
  .chapter { border-radius: 72px; padding: 96px 40px 104px; }
  .chapter--navy { padding: 90px 60px 96px; }
  .chapter__inner { max-width: 1360px; margin: 0 auto; }

  .shots {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    justify-content: stretch;
    gap: 28px;
    padding: 0;
  }
  .shot-tile { border-radius: 44px; padding: 15px 15px 26px; gap: 18px; }
  .shot-tile--1 { transform: rotate(-2.5deg); margin-top: 0; }
  .shot-tile--2 { transform: rotate(2.5deg);  margin-top: 26px; }
  .shot-tile--3 { transform: rotate(-2deg);   margin-top: 16px; }
  .shot-tile--4 { transform: rotate(2deg);    margin-top: 0; }
  .phone__screen { border-radius: 32px; }

  .pricing {
    padding-block: 120px;
    padding-inline: max(40px, var(--sa-l)) max(40px, var(--sa-r));
  }
  .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .plan { padding: 34px 30px 36px; border-radius: 40px; }
  .plan__price { margin-top: 16px; }

  .closing__card { padding: 96px 80px; border-radius: 64px; }

  .footer {
    padding-block: 76px 68px;
    padding-inline: max(90px, var(--sa-l)) max(90px, var(--sa-r));
  }
}

/* ==========================================================================
   17. Preference queries
   ========================================================================== */

@media (prefers-reduced-transparency: reduce) {
  .nav__inner,
  .shot-tile, .feature-card, .plan, .faq-card, .closing__card,
  .hero__label, .hero__shell, .prose__block, .btn--glass {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.96);
  }
  .plan--featured { background: #ffffff; }
  .glass::before, .aurora::before { opacity: 0.45; }
  .atmosphere { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hero__stage { animation: none; opacity: 1; transform: rotate(var(--hero-tilt)); }
  .hero__label { animation: none; opacity: 1; transform: rotate(var(--r, 0deg)); }
  .sweep-band  { display: none; }
  .reveal      { opacity: 1; transform: none; transition: none; }
  .nav         { transform: none !important; }
  .btn--gold:hover, .feature-card:hover, .shot-tile:hover { transform: none; }
}

@media (forced-colors: active) {
  .glass::before, .aurora::before, .atmosphere, .sweep-band { display: none; }
  .nav__inner, .feature-card, .faq-card, .plan, .shot-tile,
  .closing__card, .prose__block, .chapter, .eyebrow, .strip__list li, .foot-link {
    border: 1px solid CanvasText;
  }
}

@media print {
  .nav, .atmosphere, .skip-link, .sweep-band, .footer__links, .legal > footer nav { display: none; }
  body { background: #fff; }
  .legal main.container { padding: 0; max-width: none; }
  a { color: CanvasText; text-decoration: none; }
}