/* ============================================================
   Remy — shared stylesheet
   Layout study: nanit.com (structure only; all content original)
   ============================================================ */

/* ============================================================
   PALETTE (theme swap point)
   Every colour used anywhere on this site is defined here, once.
   Swap this one block and the whole site re-themes: no hex, rgb()
   or named colour appears anywhere else in this file, in any inline
   style, or in any SVG attribute (the SVG art is coloured through
   classes further down, which read these same variables).
   The *-rgb tokens are space-separated channels so translucent
   layers (scrims, shadows, glass pills) can be written as
   rgb(var(--token) / <alpha>) and still follow the theme.
   ============================================================ */
:root {
  --cream: #f7f6f5;
  --cream-2: #ebe9e7;
  --sand: #E1DFDB;
  --white: #ffffff;
  --panel: #fefefd;
  --rule: #dedad6;
  --ink: #2b366a;
  --ink-soft: #4d588b;
  --ink-faint: #99a1c8;
  --btn: #324e82;
  --btn-hover: #283f68;
  --band-deep: #242d58;  /* deep navy band; light text sits on it */
  --dot: #9c9364;        /* small markers that need to hold against light grounds */
  --card-warm: #d5cdae;
  --card-cool: #bca884;
  --band-strong: #93bc84;
  --navy-deep: #242d58;
  --footer-navy: #2f3a6b;
  --accent: #afbe69;
  --ring: #c9d39d;
  --accent-hover: #a0b24d;
  --mark: #b89352;
  --chip-navy: #1e2549;
  --footer-text: #f7f6f5;
  --muted-on-dark: #d5c7ae;
  --footer-faint: #969ec1;
  --good: #5aa46c;
  --bad: #b3595c;
  --ok-text: #3e7d52;
  --ok-text-dark: #a8d5b5;
  --badge-1-bg: #d5c7ae;
  --badge-1-border: #bca884;
  --badge-2-bg: #ced5ae;
  --badge-2-border: #b2bc84;
  --badge-3-bg: #b8d5ae;
  --badge-3-border: #93bc84;
  --badge-4-bg: #aebed5;
  --badge-4-border: #849bbc;
  --badge-5-bg: #d5cdae;
  --badge-5-border: #bcb184;
  --ph-frame: #101428;
  --ph-screen: #1a2141;
  --ph-card: #252e5b;
  --ph-chip: #323f7b;
  --ph-chip-good: #2e5b45;
  --ph-chip-warn: #6b5533;
  --ph-rule: #2b3669;
  --ph-tabbar: #151a33;
  --ph-status: #a5acca;
  --ph-text: #ced1df;
  --ph-muted: #a2a8c3;
  --ph-tab-text: #989eb9;
  --ph-clip-1: #bcb184;
  --ph-clip-2: #988952;
  --art-ask-0: #d5c7ae;
  --art-ask-1: #bca884;
  --art-alert-0: #d5cdae;
  --art-alert-1: #bcb184;
  --art-trend-0: #ced5ae;
  --art-trend-1: #b2bc84;
  --art-night-0: #d5bbae;
  --art-night-1: #bc9784;
  --art-summary-0: #b8d5ae;
  --art-summary-1: #93bc84;
  --tint-1: #d5cdae;
  --tint-2: #d5c7ae;
  --tint-3: #aebed5;
  --ask-card-border: #bca884;
  --flag-bg: #d5cdae;
  --white-rgb: 255 255 255;
  --cream-rgb: 247 246 245;
  --ink-rgb: 43 54 106;
  --shadow-rgb: 34 43 84;
  --shadow-cool-rgb: 46 56 103;
  --drop-rgb: 28 36 70;
  --scrim-rgb: 28 36 70;
  --pill-rgb: 37 47 91;
  --svg-night-0: #13182f;
  --svg-night-1: #36406d;
  --svg-star: #ced5ae;
  --svg-wall-0: #dad4c8;
  --svg-wall-1: #c3bbac;
  --svg-table-0: #c5bb95;
  --svg-table-1: #a89a60;
  --svg-cam-base: #dfdbd7;
  --svg-cam-stem: #edebe8;
  --svg-cam-body: #f6f5f4;
  --svg-cam-lens: #161c36;
  --svg-cam-iris: #bca884;
  --svg-cam-led: #ced5ae;
}
/* ===== END PALETTE — no colour literals below this line ===== */

/* ============================================================
   FONTS (self-hosted)
   Shipped with the site rather than requested from the visitors OS, so the
   page renders identically on macOS, Windows and Android. Previously --serif
   resolved to Iowan Old Style on a Mac, Palatino Linotype on Windows and
   Georgia elsewhere: three different sites.
   Latin subset only, and only the cuts actually used: weights 400-700 plus
   the italics .em and .m-text need in both families.
   font-display: swap - text paints immediately in the fallback and reflows
   once the face lands, rather than holding the page blank.
   ============================================================ */
@font-face {
  font-family: "Libre Baskerville";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/libre-baskerville-400.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: "Libre Baskerville";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/libre-baskerville-500.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: "Libre Baskerville";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/libre-baskerville-600.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: "Libre Baskerville";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/libre-baskerville-700.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: "Libre Baskerville";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/libre-baskerville-400-italic.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: "Libre Baskerville";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/libre-baskerville-500-italic.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: "Cabin";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/cabin-400.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: "Cabin";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/cabin-500.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: "Cabin";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/cabin-600.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: "Cabin";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/cabin-700.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: "Cabin";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/cabin-400-italic.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;
}

/* Non-colour design tokens (type, radii, container geometry) */
:root {
  --serif: "Libre Baskerville", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: "Cabin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius-lg: 28px;
  --radius-md: 18px;
  /* Layout container. The reference sits its content ~48-56px from the viewport
     edge at 1440 (not inside a narrow centred column), so --maxw is the full
     desktop width and --gutter is the real side padding. */
  --maxw: 1440px;
  --maxw-bleed: 1560px;
  --gutter: 56px;        /* the site's global side gutter (.wrap) */
  --gutter-bleed: 48px;  /* .wrap-bleed (feature rows / explore band): measured 48/48 */
}


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

/* Type scale.
   Every size on the site is in rem, so the root is the single lever for the
   whole system: body, nav, buttons, cards and small print move together, and
   the headings' clamp() bounds scale with them.

   It used to be a flat 16px at every width, which left desktop reading at
   mobile sizes. Measured against the references at 1440: ElliQ and Fi both set
   body copy at 20px, and their headings run larger than ours too (ElliQ's
   biggest h2 at 64px, Fi's h1 at 96px, against our 54.4px). Stepping the root
   closes both gaps at once. Steps rather than a fluid clamp, because that is
   what both references do. */
html { scroll-behavior: smooth; font-size: 16px; }
@media (min-width: 768px)  { html { font-size: 18px; } }
@media (min-width: 1024px) { html { font-size: 20px; } }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  font-size: 1rem;      /* follows the root, which steps up on wider screens */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }
ul { list-style: none; }

/* The container carries NO side padding: its own box edge IS the content edge.
   That is what lets a bleeding rail reuse the identical expression for its left
   offset and land on exactly the same pixel at every width. */
.wrap {
  width: min(100% - 2 * var(--gutter), var(--maxw));
  margin: 0 auto;
  padding: 0;
}
/* Wider container for full-bleed-feeling media rows (reference: art sits ~48px
   from the viewport edge, not inside a narrow centred column) */
.wrap-bleed {
  width: min(100% - 2 * var(--gutter-bleed), var(--maxw-bleed));
  margin: 0 auto;
  padding: 0;
}

/* ---------- Type ---------- */
.display, h1, h2, h3.serif {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.9rem); }
.h-md { font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-family: var(--serif); font-weight: 500; line-height: 1.15; }
.em { font-style: italic; }
.sub { color: var(--ink-soft); }
.center { text-align: center; }

/* ---------- Text measure ----------
   Body copy never runs wider than a comfortable line (~65-70 characters) at any
   viewport; wide containers keep their width, the type inside them does not. */
.section-head p,
.band-deep p,
.cc-copy p,
.ps-copy p,
.faq-item .faq-a,
.chooser-card ul li,
.footer-disclaimer,
.note-box,
.small-note,
.lab-band .lab-sub,
p.sub,
.hero-content p { max-width: 62ch; }
/* …and centred blocks stay centred once the measure is capped */
.section-head p,
.band-deep p,
.center p,
.center .sub,
.small-note.center,
.lab-band .lab-sub { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 600; font-size: 0.95rem;
  padding: 15px 30px; border-radius: 999px; text-decoration: none;
  border: none; cursor: pointer; transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.btn .arrow { font-family: var(--sans); }
.btn-primary { background: var(--btn); color: var(--white); }
.btn-primary:hover { background: var(--btn-hover); }
.btn-light { background: var(--white); color: var(--ink); }
.btn-light:hover { background: var(--cream-2); }
.btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--white); }
.btn-accent { background: var(--accent); color: var(--ink); }
.btn-accent:hover { background: var(--accent-hover); }
.btn-sm { padding: 11px 22px; font-size: 0.88rem; }

/* ---------- Three-step "how it works" ---------- */
.step-grid { gap: 34px; }
.step { position: relative; padding-top: 8px; }
.step .step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 999px;
  background: var(--btn); color: var(--white);
  font-family: var(--sans); font-weight: 700; font-size: 1rem;
  margin-bottom: 16px;
}
.step h3 { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; margin-bottom: 10px; }
.step p { color: var(--ink-soft); font-size: 0.98rem; max-width: 42ch; }

/* Price line under a CTA */
.price-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.price-note a:hover { text-decoration: none; }

/* ---------- Announcement bar (above the sticky header, scrolls away) ---------- */
.announce-bar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--footer-navy); color: var(--footer-text);
  font-family: var(--sans); font-size: 0.8rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 11px 20px; text-decoration: none;
}
.announce-bar:hover .ab-arrow { transform: translateX(4px); }
.announce-bar .ab-dot {
  width: 7px; height: 7px; border-radius: 999px; background: var(--accent); flex: 0 0 auto;
}
.announce-bar .ab-arrow { transition: transform 0.2s; }
@media (max-width: 640px) {
  .announce-bar { font-size: 0.7rem; letter-spacing: 0.06em; padding: 9px 14px; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  /* Frosted rather than solid: the page slides under it instead of vanishing
     behind a plate. saturate() keeps the colours underneath from going flat
     and grey the way a plain blur leaves them. */
  background: rgb(var(--cream-rgb) / 0.72);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom-right-radius: 22px;
  box-shadow: 0 1px 0 rgb(var(--ink-rgb) / 0.06);
}
/* No backdrop-filter means a see-through bar with text over the page, so fall
   back to the solid ground rather than an unreadable one. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--cream); }
}
.header-inner {
  width: min(100% - 2 * var(--gutter), var(--maxw)); margin: 0 auto; padding: 0;
  display: flex; align-items: center; gap: 34px; height: 76px;
}
/* Wordmark set in type rather than shipped as an image, so it takes the ink
   colour and scales with the root like everything else in the bar. Same serif
   as the headings — no third family just for the logo.
   One rule, not two: the image-based version left a line-height:0 box behind,
   which dropped the word below the nav's centre line. */
.logo {
  display: inline-flex; align-items: center; text-decoration: none;
  font-family: var(--serif);
  font-weight: 600; font-size: 1.6rem; line-height: 1;
  letter-spacing: -0.015em; color: var(--ink);
  text-transform: lowercase;
  /* the descender on the y is counted in the box, so centring it optically
     needs a small lift */
  transform: translateY(-0.07em);
}
.main-nav { display: flex; align-items: center; gap: 30px; flex: 1; }
.main-nav > .nav-item { position: relative; }
.main-nav a.nav-link {
  text-decoration: none; font-size: 0.95rem; color: var(--ink);
  padding: 27px 2px; display: inline-block;
}
.main-nav a.nav-link:hover { opacity: 0.7; }

/* Features dropdown (pure CSS hover / focus-within) */
.dropdown-panel {
  position: absolute; top: 100%; left: -18px; min-width: 270px;
  background: var(--white); border-radius: 18px; padding: 14px 10px;
  box-shadow: 0 18px 45px rgb(var(--shadow-cool-rgb) / 0.16);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.16s, transform 0.16s, visibility 0.16s;
}
.nav-item:hover .dropdown-panel,
.nav-item:focus-within .dropdown-panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown-panel a {
  display: block; padding: 10px 16px; border-radius: 10px;
  text-decoration: none; font-size: 0.93rem;
}
.dropdown-panel a:hover { background: var(--cream-2); }
.dropdown-panel a small { display: block; color: var(--ink-soft); font-size: 0.78rem; }
/* Drawn rather than typed: the markup carries U+25BE, the *small* triangle,
   which renders tiny whatever size it is set at. Two borders rotated 45deg
   give a chevron that scales with the nav and takes currentColor. The glyph
   itself is pushed out of the box rather than removed, so the markup on all
   nine pages stays as it is. */
.caret {
  display: inline-block; width: 0.42em; height: 0.42em;
  margin-left: 9px; vertical-align: 0.16em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  overflow: hidden; text-indent: 3em; font-size: 1rem;
  opacity: 0.75;
}

.header-cta { margin-left: auto; }

/* Mobile header + drawer */
.menu-toggle, .mobile-cta { display: none; }
.drawer { display: none; }

@media (max-width: 960px) {
  /* Full-width bar on small screens, not a floating pill: the pill sat over the
     announcement strip and cost 20px of gutter on either side. Sticky rather than
     fixed so the announcement bar above it stays first in the page. */
  .site-header {
    position: sticky; top: 0; left: auto; right: auto;
    border-radius: 0;
    box-shadow: 0 1px 0 rgb(var(--ink-rgb) / 0.06);
  }
  body { padding-top: 0; }
  .header-inner { width: 100%; height: 60px; padding: 0 10px 0 var(--gutter); gap: 14px; }
  .main-nav, .header-cta { display: none; }
  .menu-toggle {
    display: flex; flex-direction: column; gap: 5px; background: none;
    border: none; cursor: pointer; padding: 8px;
  }
  .menu-toggle span { width: 20px; height: 2px; background: var(--ink); display: block; }
  .logo { margin-right: auto; }
  .logo img { height: 21px; }
  .mobile-cta {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 999px;
    background: var(--btn); color: var(--white); text-decoration: none; font-size: 1.1rem;
  }
  .drawer {
    display: block; position: fixed; inset: 0; z-index: 200;
    pointer-events: none;
  }
  .drawer .drawer-scrim {
    position: absolute; inset: 0; background: rgb(var(--shadow-rgb) / 0.4);
    opacity: 0; transition: opacity 0.2s;
  }
  .drawer .drawer-panel {
    position: absolute; top: 0; left: 0; bottom: 0; width: min(320px, 85vw);
    background: var(--cream); padding: 24px; overflow-y: auto;
    transform: translateX(-102%); transition: transform 0.25s ease;
    border-top-right-radius: 22px; border-bottom-right-radius: 22px;
  }
  .drawer.open { pointer-events: auto; }
  .drawer.open .drawer-scrim { opacity: 1; }
  .drawer.open .drawer-panel { transform: translateX(0); }
  .drawer-close { background: none; border: none; font-size: 1.6rem; color: var(--ink); cursor: pointer; margin-bottom: 10px; }
  .drawer-panel a { display: block; text-decoration: none; padding: 11px 4px; font-size: 1.05rem; }
  .drawer-panel .drawer-sub a { font-size: 0.93rem; padding: 8px 4px 8px 18px; color: var(--ink-soft); }
  .drawer-panel .drawer-label { margin-top: 12px; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); padding: 10px 4px 2px; }
  .drawer-panel .btn { margin-top: 18px; }
}

/* ---------- Hero: full-bleed ---------- */
.hero-bleed {
  position: relative; min-height: 640px; display: flex; align-items: flex-end;
  overflow: hidden; color: var(--white);
}
.hero-bleed .hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-bleed .hero-media svg { width: 100%; height: 100%; }
.hero-bleed .hero-content {
  position: relative; z-index: 1; margin: 0 auto;
  width: min(100% - 2 * var(--gutter), var(--maxw)); padding: 60px 0 70px;
}
.hero-bleed h1 { max-width: 640px; margin-bottom: 18px; text-shadow: 0 2px 22px rgb(var(--scrim-rgb) / 0.45); }
.hero-bleed .hero-content p { text-shadow: 0 1px 14px rgb(var(--scrim-rgb) / 0.4); }
.hero-bleed p { max-width: 520px; margin-bottom: 26px; font-size: 1rem; }
.hero-bleed .hero-eyebrow {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.12em;
  margin-bottom: 16px; opacity: 0.92;
}
/* Light hero: ink type on a cream wash, for photos that should stay bright */
.hero-bleed.text-dark { color: var(--ink); }
/* A touch more cream than the feature-page heroes: this headline is bigger and
   runs further across the frame. */
.hero-bleed.text-dark .hero-scrim-light {
  background: linear-gradient(100deg, rgb(var(--cream-rgb) / 0.96) 0%, rgb(var(--cream-rgb) / 0.86) 36%,
                                      rgb(var(--cream-rgb) / 0.42) 60%, rgb(var(--cream-rgb) / 0.04) 80%);
}
.hero-bleed.text-dark h1, .hero-bleed.text-dark .hero-content p { text-shadow: none; }
.hero-bleed.text-dark .hero-eyebrow { color: var(--btn); opacity: 1; }
.hero-bleed.text-dark .hero-note { color: var(--ink-soft); opacity: 1; }
/* Mirrored photo (composition only — no text or signage in frame) */
.img-flip { transform: scaleX(-1); }

/* Plain fact list used in copy columns (no bullets shouting for attention) */
.fact-list { margin: 4px 0 0; }
.fact-list li {
  position: relative; padding-left: 22px; margin-bottom: 10px;
  color: var(--ink); font-size: 0.98rem;
}
.fact-list li::before {
  content: ""; position: absolute; left: 2px; top: 0.55em;
  width: 7px; height: 7px; border-radius: 999px; background: var(--dot);
}
/* Fact columns (privacy) — a plain panel, no art, just the claims */
.fact-card {
  background: var(--panel); border-radius: var(--radius-md); padding: 30px 30px 26px;
}
.fact-card h3 { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; margin-bottom: 16px; }
.fact-card .fact-list li { color: var(--ink-soft); font-size: 0.95rem; }

/* "Ask about anything you missed" — three example questions under the timeline */
.ask-block { text-align: center; max-width: 720px; margin: 44px auto 0; }
.ask-block .h-md { margin-bottom: 18px; }
.ask-block p { margin-left: auto; margin-right: auto; }
.q-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 16px; }
.q-list li {
  background: var(--white); border: 1px solid var(--rule); border-radius: 999px;
  padding: 10px 18px; font-family: var(--sans); font-size: 0.95rem; color: var(--ink);
}

/* The note under a hero CTA. This was scoped to .hero-bleed, so on a split hero
   it picked up neither the size nor the margin: it rendered at full body size
   with margin 0, and the CTA's inline-flex line box overlapped it by ~17px.
   Unscoped now, so both hero shapes get it. */
.hero-note {
  font-family: var(--sans); font-size: 0.88rem; margin: 26px 0 0; opacity: 0.8;
}
/* Circle arrows — only ever rendered as real <button>s wired to a rail (script.js) */
.circle-arrow {
  width: 42px; height: 42px; border-radius: 999px; border: 1.5px solid rgb(var(--white-rgb) / 0.8);
  background: rgb(var(--white-rgb) / 0.12); color: var(--white); display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer; font-size: 1rem;
  font-family: var(--sans); padding: 0; transition: background 0.2s, opacity 0.2s;
}
.circle-arrow.on-light { border-color: var(--ink-soft); color: var(--ink); background: transparent; }
.circle-arrow.on-light:hover { background: rgb(var(--ink-rgb) / 0.08); }
.circle-arrow[disabled] { opacity: 0.32; cursor: default; }

/* Hero: centered (flagship) */
.hero-flagship {
  position: relative; overflow: hidden; padding: 64px 0 0; text-align: center;
}
.hero-flagship .hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-flagship .hero-bg svg { width: 100%; height: 100%; }
.hero-flagship .hero-bg img { width: 100%; height: 100%; object-fit: cover; }
/* Heavier than the homepage scrim on purpose: this hero's subject is the two
   phone screenshots, so the room behind them is atmosphere, not the picture.
   Strongest at the top, where the centred headline runs widest. */
.hero-flagship-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom,
    rgb(var(--cream-rgb) / 0.92) 0%, rgb(var(--cream-rgb) / 0.86) 45%,
    rgb(var(--cream-rgb) / 0.80) 70%, rgb(var(--cream-rgb) / 0.94) 100%);
}
/* Same reason as the homepage hero: --ink-soft has no headroom over a photo. */
.hero-flagship .hero-note { color: var(--ink); }
.hero-flagship .hero-top { position: relative; z-index: 1; }
.hero-flagship h1 { margin: 0 auto 26px; max-width: 700px; }
.hero-flagship .hero-product { position: relative; z-index: 1; margin-top: 44px; }

/* Hero: split (feature pages) — text left over full-bleed art right */
.hero-split {
  position: relative; min-height: 560px; display: flex; align-items: center;
  overflow: hidden;
}
.hero-split .hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-split .hero-media svg { width: 100%; height: 100%; }
.hero-split .hero-content {
  position: relative; z-index: 1; margin: 0 auto;
  width: min(100% - 2 * var(--gutter), var(--maxw)); padding: 70px 0;
}
.hero-split h1 { max-width: 560px; margin-bottom: 20px; }
.hero-split p { max-width: 520px; margin-bottom: 28px; }
.hero-split.text-dark { color: var(--ink); }
.hero-split.text-light { color: var(--white); }
.hero-split.text-light .sub { color: rgb(var(--white-rgb) / 0.85); }

/* ---------- Sections ---------- */
.section { padding: 52px 0; }
.section-tight { padding: 38px 0; }
.section-head { text-align: center; max-width: 800px; margin: 0 auto 32px; }
.section-head p { margin-top: 16px; color: var(--ink-soft); }

/* Flagship section head — measured off the reference's "Unlock the full
   experience" block at 1440: a ~66px centred serif headline over a single
   ~24px sub-line, both well clear of the container edges. */
.section-head.head-xl { max-width: 1040px; margin-bottom: 46px; }
.section-head.head-xl h2 { font-size: clamp(2.1rem, 4.6vw, 4.2rem); line-height: 1.05; }
.section-head.head-xl p {
  margin-top: 20px; color: var(--ink);
  font-size: clamp(1rem, 1.7vw, 1.5rem); max-width: 48ch;
}

.band-cream-2 { background: var(--cream-2); }
.band-sand { background: var(--sand); }

/* Rounded page seams (Nanit-style big radius transitions) */
.seam-top { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }

/* Deep-navy feature band. Inverted, so it reads as a break in the page rather
   than another tinted section. Everything inside it that assumes a light ground
   is flipped below: navy-on-navy is invisible. */
.band-deep {
  background: var(--band-deep); color: var(--cream);
  padding: 50px 0;
}
.band-deep .wrap { max-width: 1000px; text-align: center; }
.band-deep h2 { margin-bottom: 16px; color: var(--cream); }
.band-deep p { font-size: 1.05rem; color: var(--muted-on-dark); }
.band-deep .btn-primary { background: var(--cream); color: var(--ink); }
.band-deep .btn-primary:hover { background: var(--white); }

/* ---------- Card grids ---------- */
.card-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.card-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* Product-style card (home trio).
   The art block is a tinted backdrop that CONTAINS its app card whole: the
   snippet is fitted inside, never stretched past its natural resolution and
   never cropped so that only part of it reads. Cards whose art is a photo use
   .art-photo, where the photo does fill the block edge to edge. */
.product-card {
  background: var(--white); border-radius: var(--radius-lg); padding: 14px 14px 20px;
  display: flex; flex-direction: column; text-align: left;
}
.product-card .card-art {
  border-radius: var(--radius-md); overflow: hidden; margin-bottom: 16px;
  position: relative; height: 282px; padding: 22px; display: flex;
  align-items: center; justify-content: center;
}
/* contain, never cover: max-* on both axes with auto sizing keeps the whole
   card visible and caps it at (well under) its own pixel width */
.product-card .card-art .ui-snippet {
  width: auto; height: auto; max-width: 100%; max-height: 100%; margin: 0;
  border-radius: 14px; filter: drop-shadow(0 10px 22px rgb(var(--drop-rgb) / 0.18));
}
.product-card .card-art.art-photo { padding: 0; }
.product-card h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 4px; padding: 0 8px; }
.product-card .card-sub { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 16px; padding: 0 8px; }
.product-card .btn { width: 100%; justify-content: center; margin-top: auto; }

/* Tall photo cards with serif overlay (carousels / trios) */
.photo-card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  min-height: 480px; color: var(--white); display: flex; align-items: flex-end;
  isolation: isolate;
}
.photo-card .pc-media { position: absolute; inset: 0; z-index: -1; }
.photo-card .pc-media svg { width: 100%; height: 100%; }
.photo-card .pc-label {
  position: absolute; top: 20px; left: 20px;
  background: rgb(var(--white-rgb) / 0.28); backdrop-filter: blur(4px);
  border-radius: 999px; padding: 8px 18px; font-size: 0.88rem;
}
.photo-card .pc-plus {
  position: absolute; top: 16px; right: 16px; width: 38px; height: 38px;
  background: var(--accent); color: var(--ink); border-radius: 999px;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.photo-card .pc-title {
  font-family: var(--serif); font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.15; padding: 26px; text-shadow: 0 1px 14px rgb(var(--scrim-rgb) / 0.35);
}

/* Real horizontal rail — scrolls, bleeds to the viewport edge, driven by the
   .rail-controls buttons (script.js). */
.rail {
  display: flex; gap: 22px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-behavior: smooth;
  /* the scroll container clips vertically, so leave room on both edges for
     the cards' hover shadow */
  padding-top: 6px;
  padding-bottom: 6px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.rail::-webkit-scrollbar { display: none; }
/* Card width is tuned so the card at the viewport edge is cut ~1/3 through —
   the reference's "there is more, scroll me" affordance, not a hairline sliver. */
.rail > * { flex: 0 0 clamp(300px, 35vw, 500px); scroll-snap-align: start; }
/* A bleeding rail is NOT inside the centred container — it is its own
   full-width band, so its track can start exactly on the container's left edge
   and run off the right edge of the viewport.
   padding-left repeats the container's own centring expression verbatim:
     .wrap left edge  = max(gutter, (100vw - maxw) / 2)
     rail track left  = max(gutter, (100%  - maxw) / 2)
   and since the band is full width, 100% == the viewport width. The percentages
   resolve against the band's own width, so a vertical scrollbar can never push
   the page into horizontal overflow (which `vw` maths would). */
.rail-bleed {
  width: 100%;
  padding-left: max(var(--gutter), (100% - var(--maxw)) / 2);
  padding-right: 0;
  margin-right: 0;
  /* scroll-snap measures from the scrollport edge, which ignores padding — without
     a matching scroll-padding the browser silently scrolls the track back flush to
     the viewport edge and the alignment is lost on load. */
  scroll-padding-left: max(var(--gutter), (100% - var(--maxw)) / 2);
}
/* rails that belong to a .wrap-bleed section align to THAT container's edge */
.rail-bleed.rail-wide {
  padding-left: max(var(--gutter-bleed), (100% - var(--maxw-bleed)) / 2);
  scroll-padding-left: max(var(--gutter-bleed), (100% - var(--maxw-bleed)) / 2);
}

.rail-controls { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
.rail-rule { flex: 1; height: 1px; background: rgb(var(--ink-rgb) / 0.25); }

/* Photo cards used as links keep their type styling */
a.photo-card { text-decoration: none; color: var(--white); }

/* Explore tiles — photo fills the frame, label underneath. Always a real link. */
.explore-tile { display: block; text-decoration: none; color: var(--ink); }
.explore-tile .et-media {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--radius-md); aspect-ratio: 4 / 3;
}
.explore-tile .et-label {
  display: block; margin-top: 14px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.85rem;
}
.explore-tile:hover .et-label { text-decoration: underline; }

/* A bleeding rail earns its right-hand crop only where the section is a
   browse-y row of many cards. A small, fixed set of EQUAL items (value props,
   explore tiles) stays symmetric inside the container instead. */
.tile-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.tile-grid > * { flex: 0 1 calc(25% - 18px); min-width: 168px; }

.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 46px; }

/* Quote / value columns */
.value-item {
  font-family: var(--serif); font-size: 1.25rem; line-height: 1.35;
}
.value-item small {
  display: block; font-family: var(--sans); color: var(--ink-soft);
  font-size: 0.85rem; margin-top: 12px;
}

/* Badge row (privacy facts standing in for award badges) */
.badge-row {
  display: flex; justify-content: space-between; gap: 26px; flex-wrap: wrap;
}
.badge {
  width: 150px; height: 150px; border-radius: 999px; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 16px; font-size: 0.78rem; font-weight: 600;
  line-height: 1.3; border: 2px solid rgb(var(--ink-rgb) / 0.25); background: var(--white);
}
.badge .badge-big { font-family: var(--serif); font-size: 1.05rem; font-weight: 500; margin-bottom: 4px; }
.badge.tint-1 { background: var(--badge-1-bg); border-color: var(--badge-1-border); }
.badge.tint-2 { background: var(--badge-2-bg); border-color: var(--badge-2-border); }
.badge.tint-3 { background: var(--badge-3-bg); border-color: var(--badge-3-border); }
.badge.tint-4 { background: var(--badge-4-bg); border-color: var(--badge-4-border); }
.badge.tint-5 { background: var(--badge-5-bg); border-color: var(--badge-5-border); }

/* ---------- Split feature blocks ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split .split-copy h2 { margin-bottom: 16px; }
.split .split-copy p { margin-bottom: 15px; color: var(--ink); max-width: 60ch; }
.split .split-copy .btn { margin-top: 8px; }
.split.media-right .split-media { order: 2; }
.split.media-right .split-copy { order: 1; }

/* .media-card is for PHOTO media only — a photo fills the block edge to edge.
   App snippets use .snip-block / .phone-block instead (no dead colour fields). */
.media-card {
  border-radius: var(--radius-lg); min-height: 420px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; padding: 0;
}
.media-card.bg-cool { background: var(--card-cool); }
.media-card.bg-warm { background: var(--card-warm); }
.media-card.bg-navy { background: var(--navy-deep); }
.media-card.bg-sand { background: var(--sand); }

/* ============================================================
   Reference anatomy (nanit.com/features): a colour block that HUGS one
   large phone, cropped by the block's lower edge with the notch visible
   at the top. Exactly one object per block — no UI card lifted out over
   the screen (those popouts read as a duplicate phone, so they're gone).
   ============================================================ */
.phone-block {
  position: relative; overflow: hidden; border-radius: 26px;
  background: var(--card-warm);
  height: 600px; display: flex; justify-content: center;
}
.phone-block.bg-cool { background: var(--card-cool); }
.phone-block.bg-sand { background: var(--sand); }
.phone-block.bg-navy { background: var(--navy-deep); }
/* Phone is 828x1738 — at 330px wide it stands 693px tall inside a 600px block,
   so the block crops it: notch visible at the top, body running off the bottom. */
.phone-block .pb-phone {
  width: 330px; max-width: 58%; height: auto; align-self: flex-start;
  margin-top: 40px; flex: 0 0 auto;
  filter: drop-shadow(0 16px 34px rgb(var(--drop-rgb) / 0.3));
}
/* Feature rows built on the reference grid: block ~46% of a near-full-bleed
   container, copy in the remaining column, sides alternating. */
.feat-rows { display: flex; flex-direction: column; gap: 76px; }
.feat-row {
  display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  gap: 72px; align-items: center;
}
.feat-row.media-right { grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); }
.feat-row.media-right .fr-media { order: 2; }
.feat-row.media-right .fr-copy { order: 1; }
.fr-copy h2 { margin-bottom: 16px; }
/* A row heading that sits under a section head is an h3, and h3 had no size of
   its own here - it fell back to the browser default (~1.17em), smaller than
   the body-adjacent scale the rows are drawn at. Same step as .h-md. */
.fr-copy h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); margin-bottom: 16px; }
.fr-copy p { margin-bottom: 22px; max-width: 60ch; }

/* Tight backdrop for a standalone UI card: the block hugs the snippet.
   Used where no matching full-phone render exists. */
.snip-block {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--card-warm);
  display: flex; align-items: center; justify-content: center;
  padding: 30px 28px;
  max-width: 500px; margin: 0 auto;   /* the block hugs the card, not the column */
}
.snip-block.bg-cool { background: var(--card-cool); }
.snip-block.bg-warm { background: var(--card-warm); }
.snip-block.bg-navy { background: var(--navy-deep); }
.snip-block.bg-sand { background: var(--sand); }
.snip-block .ui-snippet { width: 100%; max-width: 430px; margin: 0; }

/* Split card with white panel (Home sweet home style) */
.panel-split {
  display: grid; grid-template-columns: 1.15fr 1fr; border-radius: var(--radius-lg);
  overflow: hidden; background: var(--white);
}
.panel-split .ps-media { min-height: 420px; position: relative; }
.panel-split .ps-media svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.panel-split .ps-copy { padding: 44px 44px; display: flex; flex-direction: column; justify-content: center; }
.panel-split .ps-copy h2 { margin-bottom: 14px; }
.panel-split .ps-copy p { color: var(--ink-soft); margin-bottom: 22px; max-width: 52ch; }

/* ---------- Privacy lab band ---------- */
.lab-band {
  position: relative; overflow: hidden; color: var(--white); text-align: center;
  padding: 68px 0 60px;
}
.lab-band .lab-bg { position: absolute; inset: 0; z-index: 0; }
.lab-band .lab-bg svg { width: 100%; height: 100%; }
.lab-band .wrap { position: relative; z-index: 1; }
.lab-band .lab-title { font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin-bottom: 20px; }
.lab-band .lab-sub { max-width: 700px; margin: 0 auto 28px; }
.stat-pills { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-bottom: 32px; }
.stat-pill {
  background: rgb(var(--white-rgb) / 0.22); backdrop-filter: blur(4px);
  border-radius: 999px; padding: 14px 30px; font-size: 0.88rem;
}
.stat-pill b { display: block; font-size: 1rem; }

/* ---------- Setup chooser ---------- */
.chooser-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 28px; }
.chooser-card {
  display: grid; grid-template-columns: 1.05fr 1fr; border-radius: var(--radius-lg);
  overflow: hidden; background: var(--panel);
}
.chooser-card + .chooser-card { margin-top: 22px; }
.chooser-card .cc-media { min-height: 400px; position: relative; }
.chooser-card .cc-media svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.chooser-card .cc-copy { padding: 40px 42px; }
.chooser-card .cc-copy h3 { font-family: var(--serif); font-size: 1.9rem; font-weight: 500; margin-bottom: 16px; }
.chooser-card .cc-copy p { color: var(--ink-soft); margin-bottom: 18px; }
.chooser-card ul { margin: 0 0 26px; }
.chooser-card ul li { position: relative; padding-left: 20px; margin-bottom: 10px; color: var(--ink-soft); font-size: 0.95rem; }
.chooser-card ul li::before { content: "•"; position: absolute; left: 4px; color: var(--ink-faint); }
.chooser-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 36px; }
.chooser-tab { display: flex; gap: 18px; align-items: center; font-family: var(--serif); font-size: 1.05rem; color: var(--ink-soft); }
.chooser-tab.active { color: var(--ink); }
.chooser-tab .ct-rule { flex: 1; height: 1px; background: rgb(var(--ink-rgb) / 0.3); }

/* ---------- Comparison table ---------- */
.compare-card { background: var(--white); border-radius: var(--radius-md); padding: 30px 32px; max-width: 780px; margin: 0 auto; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.compare-table th { font-family: var(--serif); font-weight: 500; font-size: 1.05rem; text-align: left; padding: 10px 12px 18px; }
.compare-table th:nth-child(2), .compare-table th:nth-child(3),
.compare-table td:nth-child(2), .compare-table td:nth-child(3) { text-align: center; }
.compare-table td { padding: 15px 12px; border-top: 1px solid var(--rule); }
.tick, .cross {
  display: inline-flex; width: 26px; height: 26px; border-radius: 999px;
  align-items: center; justify-content: center; font-size: 0.8rem; color: var(--white);
}
.tick { background: var(--good); }
.cross { background: var(--bad); }
/* A comparison row whose cells carry descriptive text rather than a bare
   yes/no: the badge shrinks and sits before the words instead of standing in
   for them, so the row still reads at a glance. */
.tick.inline-badge, .cross.inline-badge {
  width: 19px; height: 19px; font-size: 0.6rem; margin-right: 7px; vertical-align: -4px;
}

/* ---------- Hotspot showcase ---------- */
.hotspot-stage { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 460px; }
.hotspot-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hotspot {
  position: absolute; width: 34px; height: 34px; border-radius: 999px;
  background: rgb(var(--white-rgb) / 0.65); box-shadow: 0 0 0 8px rgb(var(--white-rgb) / 0.28);
}
.hotspot::after { content: ""; position: absolute; inset: 11px; background: var(--white); border-radius: 999px; }

/* ---------- UGC-style grid ---------- */
.ugc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.ugc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.ugc-tile { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 1 / 1.05; }
.ugc-tile svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ugc-tile .ugc-tag {
  position: absolute; left: 12px; bottom: 12px; background: rgb(var(--white-rgb) / 0.85);
  color: var(--ink); border-radius: 10px; padding: 6px 12px; font-size: 0.78rem; font-weight: 600;
}

/* ---------- FAQ ---------- */
.faq-band { background: var(--footer-navy); color: var(--white); padding: 56px 0; }
.faq-band .faq-title { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 3.4vw, 2.8rem); margin-bottom: 28px; }
.faq-card { border: 1px solid rgb(var(--white-rgb) / 0.35); border-radius: var(--radius-md); padding: 6px 34px; }
.faq-item { border-top: 1px solid rgb(var(--white-rgb) / 0.3); }
.faq-item:first-child { border-top: none; }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between;
  align-items: center; gap: 20px; padding: 20px 0; font-weight: 600; font-size: 1.02rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .plus { font-size: 1.4rem; font-weight: 400; transition: transform 0.2s; flex: 0 0 auto; }
.faq-item[open] summary .plus { transform: rotate(45deg); }
.faq-item .faq-a { padding: 0 40px 20px 0; color: rgb(var(--white-rgb) / 0.92); font-size: 0.97rem; max-width: 62ch; }

/* ---------- Footer ---------- */
.site-footer { background: var(--footer-navy); color: var(--footer-text); padding: 56px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 40px; }
/* Pages that drop the Follow Us column (no real profiles to link) share the
   remaining width evenly instead of leaving a 1.4fr gap where it stood. */
.footer-grid:not(:has(.follow-col)) { grid-template-columns: repeat(4, 1fr); }
.footer-grid h4 { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; margin-bottom: 16px; }
.footer-grid ul li { margin-bottom: 10px; }
.footer-grid a { color: var(--footer-text); text-decoration: none; font-size: 0.95rem; }
.footer-grid a:hover { text-decoration: underline; }
.social-row { display: flex; gap: 18px; }
.social-row a {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: rgb(var(--white-rgb) / 0.1);
}
.follow-col { border-right: 1px solid rgb(var(--white-rgb) / 0.18); padding-right: 40px; }
.footer-legal {
  margin-top: 44px; display: flex; gap: 22px; flex-wrap: wrap; align-items: center;
  font-size: 0.8rem; color: var(--footer-faint);
}
.footer-legal a { color: var(--footer-faint); text-decoration: none; }
.footer-disclaimer { margin-top: 26px; font-size: 0.8rem; color: var(--footer-faint); max-width: 62ch; }

/* ---------- Phone mockup (CSS-drawn app UI) ---------- */
.phone {
  width: 250px; background: var(--ph-frame); border-radius: 40px; padding: 11px;
  box-shadow: 0 24px 50px rgb(var(--drop-rgb) / 0.35); flex: 0 0 auto;
}
.phone .phone-screen {
  background: var(--ph-screen); border-radius: 31px; overflow: hidden; color: var(--white);
  font-size: 0.68rem; min-height: 470px; display: flex; flex-direction: column;
}
.phone .p-status { display: flex; justify-content: space-between; padding: 12px 18px 6px; font-size: 0.62rem; color: var(--ph-status); }
.phone .p-title { text-align: center; font-weight: 600; font-size: 0.78rem; padding: 4px 0 10px; }
.phone .p-card { background: var(--ph-card); margin: 6px 12px; border-radius: 12px; padding: 12px; }
.phone .p-card h5 { font-size: 0.72rem; margin-bottom: 6px; font-weight: 600; }
.phone .p-card p { color: var(--ph-text); line-height: 1.45; }
.phone .p-chip { display: inline-block; background: var(--ph-chip); border-radius: 999px; padding: 3px 10px; margin: 2px 2px 2px 0; font-size: 0.6rem; }
.phone .p-chip.good { background: var(--ph-chip-good); }
.phone .p-chip.warn { background: var(--ph-chip-warn); }
.phone .p-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-top: 1px solid var(--ph-rule); }
.phone .p-row:first-of-type { border-top: none; }
.phone .p-row small { color: var(--ph-muted); }
.phone .p-tabbar { margin-top: auto; display: flex; justify-content: space-around; padding: 10px 8px 14px; background: var(--ph-tabbar); color: var(--ph-tab-text); font-size: 0.58rem; }
.phone .p-tabbar b { color: var(--white); }
.phone .p-blurclip {
  margin: 6px 12px; border-radius: 12px; overflow: hidden; position: relative; height: 120px;
  background: linear-gradient(140deg, var(--ph-clip-1), var(--ph-clip-2));
}
.phone .p-blurclip .blur-dot {
  position: absolute; width: 34px; height: 34px; border-radius: 999px;
  background: rgb(var(--white-rgb) / 0.55); filter: blur(2px);
}
.phone .p-blurclip .clip-tag {
  position: absolute; left: 8px; bottom: 8px; background: rgb(var(--scrim-rgb) / 0.75);
  border-radius: 8px; padding: 3px 8px; font-size: 0.58rem;
}
.phone.phone-tilt { transform: rotate(-6deg); }
.phone-pair { display: flex; align-items: center; }
.phone-pair .phone:nth-child(2) { margin-left: -60px; transform: rotate(5deg) translateY(26px); }

/* Notification pop chip */
.noti-chip {
  background: rgb(var(--white-rgb) / 0.95); color: var(--ink); border-radius: 14px;
  padding: 12px 16px; display: flex; gap: 12px; align-items: center;
  box-shadow: 0 12px 30px rgb(var(--shadow-rgb) / 0.25); font-size: 0.85rem; max-width: 320px;
}
.noti-chip .noti-icon {
  width: 34px; height: 34px; border-radius: 9px; background: var(--btn); color: var(--white);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 0.9rem;
}
.noti-chip b { display: block; font-size: 0.85rem; }
.noti-chip small { color: var(--ink-soft); font-size: 0.75rem; }
.float-chip { position: absolute; }

/* ---------- Utility ---------- */
.mt-1 { margin-top: 10px; } .mt-2 { margin-top: 18px; } .mt-3 { margin-top: 28px; } .mt-4 { margin-top: 40px; }
.mb-2 { margin-bottom: 20px; }
.cta-center { display: flex; justify-content: center; gap: 18px; margin-top: 30px; flex-wrap: wrap; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* ---------- Ring buying guide + waitlist (waitlist.html) ---------- */
.ring-guide-hero {
  padding: 72px 0 58px;
  background: var(--cream);
}
.ring-guide-hero .wrap,
.ring-guide-summary .wrap,
.ring-setup .wrap,
.ring-how-it-works .wrap,
.ring-guide-faq .wrap,
.alternate-waitlist .wrap { max-width: 1120px; }
.ring-guide-hero .eyebrow,
.ring-how-it-works .eyebrow,
.alternate-waitlist .eyebrow {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--btn);
  margin-bottom: 14px;
}
.ring-guide-hero h1 { max-width: 16ch; margin-bottom: 18px; }
.ring-guide-hero .lede { max-width: 60ch; font-size: 1.12rem; color: var(--ink-soft); }

.ring-guide-summary { padding: 0 0 64px; background: var(--cream); }
.camera-product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.camera-product-grid-single { grid-template-columns: minmax(0, 820px); justify-content: center; }
.camera-product-card {
  display: grid; grid-template-columns: minmax(180px, 0.85fr) 1.15fr;
  min-height: 360px; overflow: hidden; background: var(--panel);
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
}
.camera-product-image {
  min-height: 330px; overflow: hidden; background: var(--white);
  display: grid; place-items: center;
}
.camera-product-image img { width: 100%; height: 100%; object-fit: contain; }
.camera-product-grid-single .camera-product-image img { transform: scale(1.18); }
.camera-product-copy {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 34px 30px 30px;
}
.guide-card-label {
  display: block; margin-bottom: 12px; color: var(--btn);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.camera-product-copy h2 { margin-bottom: 8px; font-size: 1.45rem; }
.camera-price { margin-bottom: 14px; color: var(--ink); font-size: 1.18rem; font-weight: 700; }
.camera-product-copy p { margin-bottom: 22px; color: var(--ink-soft); font-size: 0.9rem; }
.camera-product-copy .btn { margin-top: auto; padding: 12px 20px; font-size: 0.85rem; }
.camera-compatibility-note,
.camera-count-note {
  display: flex; align-items: baseline; justify-content: space-between; gap: 30px;
  margin-top: 18px; padding: 24px 28px; background: var(--cream-2);
  border-radius: var(--radius-md);
}
.camera-compatibility-note .guide-card-label,
.camera-count-note .guide-card-label { flex: 0 0 auto; margin-bottom: 0; }
.camera-compatibility-note p,
.camera-count-note p { color: var(--ink-soft); }
.camera-compatibility-note b,
.camera-count-note b { color: var(--ink); }

.ring-setup { background: var(--cream-2); }
.ring-setup .step { padding: 26px; background: var(--panel); border-radius: var(--radius-md); }

.ring-how-it-works { padding: 64px 0; background: var(--panel); }
.ring-how-it-works .wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 72px; align-items: start; }
.ring-how-copy h2 { font-size: clamp(1.65rem, 3vw, 2.5rem); max-width: 15ch; }
.ring-how-list { list-style: none; display: grid; gap: 0; }
.ring-how-list li { display: grid; grid-template-columns: 38px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--rule); }
.ring-how-list li:first-child { border-top: none; padding-top: 0; }
.ring-how-list li > span {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px;
  background: var(--cream-2); color: var(--btn); font-weight: 700; font-size: 0.82rem;
}
.ring-how-list p { color: var(--ink-soft); }
.ring-how-list b { color: var(--ink); }
.ring-guide-more { margin-top: 22px; color: var(--muted-on-dark); font-size: 0.9rem; }
.ring-guide-more a { color: var(--white); text-underline-offset: 3px; }

.alternate-waitlist { padding: 72px 0 80px; background: var(--cream); scroll-margin-top: 76px; }
.alternate-waitlist-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 76px; align-items: start; }
.alternate-waitlist h2 { margin-bottom: 16px; }
.alternate-waitlist h2 + p { max-width: 48ch; color: var(--ink-soft); }
.alternate-waitlist .waitlist-form { margin-top: 0; }
.alternate-waitlist .small-note { margin-top: 14px; }

.waitlist-form { display: grid; gap: 14px; max-width: 460px; margin-top: 26px; }
.waitlist-form label {
  display: grid; gap: 6px;
  font-family: var(--sans); font-size: 0.85rem; font-weight: 600; color: var(--ink);
}
.waitlist-form input, .waitlist-form select {
  width: 100%; box-sizing: border-box;
  font-family: var(--sans); font-size: 1rem; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--rule); border-radius: 12px;
  padding: 13px 16px; transition: border-color 0.2s;
}
.waitlist-form input:focus, .waitlist-form select:focus { outline: none; border-color: var(--btn); }
.waitlist-form .btn { justify-self: start; margin-top: 6px; }
.waitlist-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- No-Ring guide modal (index.html + caregiver page) ---------- */
.waitlist-overlay {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgb(var(--scrim-rgb) / 0.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: rv-fade 0.2s ease-out;
}
.waitlist-overlay[hidden] { display: none; }
.waitlist-modal {
  position: relative; width: 100%; max-width: 620px; max-height: 100%;
  overflow-y: auto; box-sizing: border-box;
  background: var(--panel); color: var(--ink);
  border-radius: var(--radius-lg); padding: 36px 32px 32px;
  box-shadow: 0 24px 60px rgb(var(--shadow-rgb) / 0.28);
  animation: rv-up 0.35s var(--ease-soft);
}
.waitlist-modal .eyebrow {
  font-family: var(--sans); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--btn); margin: 0 0 10px;
}
.waitlist-modal h3 { font-size: 1.6rem; line-height: 1.15; margin: 0 0 12px; text-wrap: balance; }
.waitlist-modal p { font-size: 0.95rem; line-height: 1.55; color: var(--ink-soft); margin: 0; }
/* The product shot is a 1500×1500 with the camera in the middle ~45%. contain
   fits the whole square to the box height at every width, then the scale
   zooms in on the camera so it fills the box instead of floating in white.
   The box is white like the shot's own ground, so nothing needs blending. */
.modal-product { margin: 18px 0 0; width: 240px; max-width: 100%; height: 240px; border-radius: 16px; background: var(--white); border: 1px solid var(--rule); overflow: hidden; }
.modal-product img { display: block; width: 100%; height: 100%; object-fit: contain; transform: scale(1.7); }
.waitlist-modal .modal-product-name { margin-top: 14px; font-family: var(--sans); font-size: 0.9rem; color: var(--ink-soft); }
.modal-product-name b { color: var(--ink); font-weight: 700; }
.waitlist-modal .modal-guide-actions { justify-content: flex-start; margin-top: 16px; margin-bottom: 26px; }
.modal-setup { font-size: 0.88rem; line-height: 1.55; color: var(--ink-soft); }
.waitlist-modal .modal-setup-title { font-family: var(--sans); font-weight: 700; font-size: 0.9rem; color: var(--ink); margin: 0 0 8px; }
.modal-steps { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.modal-steps li { font-size: 0.88rem; line-height: 1.5; color: var(--ink-soft); }
.waitlist-modal .modal-footnote { margin: 26px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); font-family: var(--sans); font-size: 0.8rem; color: var(--ink-soft); }
.modal-footnote a { color: var(--btn); font-weight: 700; text-decoration: none; }
.modal-footnote a:hover { text-decoration: underline; text-underline-offset: 3px; }
.modal-guide-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.modal-guide-actions .btn { padding: 12px 18px; font-size: 0.84rem; }
.waitlist-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 999px; border: none;
  background: var(--cream-2); color: var(--ink);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.waitlist-close:hover { background: var(--sand); }
.waitlist-status { display: none; margin: 12px 0 0; font-family: var(--sans); font-size: 0.85rem; color: var(--ink-soft); }
.waitlist-status.visible { display: block; }
@media (max-width: 800px) {
  .camera-product-grid { grid-template-columns: 1fr; }
  .ring-how-it-works .wrap,
  .alternate-waitlist-grid { grid-template-columns: 1fr; gap: 36px; }
  .ring-how-copy h2 { max-width: 22ch; }
}
@media (max-width: 560px) {
  .ring-guide-hero { padding: 48px 0 42px; }
  .ring-guide-summary { padding-bottom: 44px; }
  .camera-product-card { grid-template-columns: 1fr; }
  .camera-product-image { min-height: 250px; max-height: 280px; }
  .camera-product-copy { padding: 26px 24px; }
  .camera-compatibility-note,
  .camera-count-note { align-items: flex-start; flex-direction: column; gap: 6px; padding: 22px 24px; }
  .ring-setup .step { padding: 22px; }
  .ring-how-it-works { padding: 48px 0; }
  .alternate-waitlist { padding: 48px 0; }
  .waitlist-modal { padding: 30px 22px 24px; border-radius: var(--radius-md); }
}
.small-note { font-size: 0.82rem; color: var(--ink-soft); }
.note-box {
  background: var(--cream-2); border-radius: 14px; padding: 16px 20px;
  font-size: 0.88rem; color: var(--ink-soft); margin-top: 22px;
}
.band-deep .note-box {
  background: rgb(var(--white-rgb) / 0.08); color: var(--muted-on-dark);
  margin-left: auto; margin-right: auto;   /* capped to a measure, so centre it like the rest of the band */
}
.band-deep .stat-duo .sd-big { color: var(--cream); }
.band-deep .stat-duo .sd-item small { color: var(--muted-on-dark); }

/* ---------- Signal vs noise (homepage, under the hero) ----------
   Two phones, weighted rather than balanced. The noise side is smaller,
   flatter and desaturated; the signal side sits at full size with a real
   shadow. That asymmetry is the argument — a symmetrical comparison would
   read as "two options" instead of "one of these is useless to you". */
.contrast {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 6vw, 90px); align-items: end;
  max-width: 900px; margin: 0 auto;
}
.cs-side { margin: 0; display: flex; flex-direction: column; align-items: center; }
.cs-side figcaption {
  margin-top: 20px; text-align: center; font-size: 0.88rem; line-height: 1.4;
  color: var(--ink-soft); max-width: 22ch;
}
.cs-signal figcaption { color: var(--ink); font-weight: 600; }

.cs-ph {
  width: 100%; max-width: 260px; border-radius: 26px 26px 0 0;
  padding: 9px 9px 0; background: var(--ph-frame);
  display: flex; flex-direction: column; align-items: center;
}
/* the noise phone recedes: smaller, greyer, no lift */
.cs-noise .cs-ph {
  max-width: 226px; filter: saturate(0.35); opacity: 0.9;
  box-shadow: 0 6px 16px rgb(var(--drop-rgb) / 0.14);
}
.cs-signal .cs-ph { box-shadow: 0 20px 44px rgb(var(--drop-rgb) / 0.34); }

.cs-notch { width: 52px; height: 5px; border-radius: 99px; background: rgb(var(--white-rgb) / 0.22); margin: 4px 0 8px; }
.cs-screen {
  width: 100%; min-height: 300px; border-radius: 18px 18px 0 0; padding: 20px 12px 14px;
  background: var(--ph-screen); display: flex; flex-direction: column; align-items: center;
}
.cs-time { font-size: 2.1rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: rgb(var(--white-rgb) / 0.95); }
.cs-date { font-size: 0.62rem; color: var(--ph-muted); margin: 4px 0 16px; }

/* the repetitive stack */
.cs-list { width: 100%; display: flex; flex-direction: column; gap: 5px; list-style: none; }
.cs-list li {
  display: grid; grid-template-columns: auto 1fr auto; gap: 5px; align-items: baseline;
  background: rgb(var(--white-rgb) / 0.9); border-radius: 9px; padding: 7px 8px;
  font-size: 0.54rem; color: var(--ink); white-space: nowrap;
}
/* they fade down the stack: the point is that you stop reading them */
.cs-list li:nth-child(3) { opacity: 0.8; }
.cs-list li:nth-child(4) { opacity: 0.62; }
.cs-list li:nth-child(5) { opacity: 0.45; }
.cs-app { font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.45rem; color: var(--ink-faint); }
.cs-txt { font-weight: 600; }
.cs-when { font-size: 0.45rem; color: var(--ink-faint); }

/* the one that says something */
.cs-alert {
  width: 100%; background: var(--white); border-radius: 12px; padding: 11px 11px 12px;
  text-align: left; box-shadow: 0 0 26px 4px rgb(var(--white-rgb) / 0.18);
}
.cs-kick {
  display: block; font-size: 0.52rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--bad); margin-bottom: 5px;
}
.cs-alert b { display: block; font-size: 0.72rem; line-height: 1.3; color: var(--ink); margin-bottom: 8px; }
.cs-clip { display: block; height: 68px; border-radius: 8px; overflow: hidden; margin-bottom: 9px; }
.cs-clip img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.cs-act {
  display: block; text-align: center; font-size: 0.62rem; font-weight: 600;
  padding: 7px; border-radius: 999px; background: var(--btn); color: var(--white);
}

@media (max-width: 640px) {
  .contrast { gap: 18px; }
  .cs-side figcaption { font-size: 0.8rem; margin-top: 14px; }
  .cs-screen { min-height: 250px; padding: 16px 9px 12px; }
  .cs-time { font-size: 1.6rem; }
  /* nowrap keeps each alert on one line, but two phones side by side leave no
     room for the timestamps — they are texture here, not information */
  .cs-when { display: none; }
  .cs-list li { grid-template-columns: auto 1fr; }
}


/* ============================================================
   Homepage sections (implementation spec)
   ============================================================ */

/* §1 hero — the spec calls for a dedicated mobile crop of the same scene.
   With one source file the crop is done with object-position; a genuinely
   different crop needs the real photograph. */
.hero-mobile-crop { object-position: 58% 42%; }

/* §4 the alert picker reuses the vertical tablist, but its stage is a phone
   block rather than a bare stage, so the phone crops the way it does
   everywhere else on the site. */
/* §9 the questions are the control and the answer card is the stage. The card
   is a flat asset rather than a phone, so the stage has no fixed height and
   nothing is cropped — and it is capped at its authored width so it stays
   crisp (see ui-kit.css: .answer-card is authored at 460px). */
.ask-picker .picker-row .pr-copy { font-size: 1rem; }
/* a real phone again, cropped by the block the way every other phone here is */
.ask-picker .picker-stage { height: 620px; align-content: start; padding-top: 38px; }
.picker-grid.ask-picker .picker-stage .picker-shot { width: min(330px, 100%); }

/* §5 the ordinary-moments cards carry no caption: volume is the message */
.m-card.m-photo-only, .m-card.m-snip { background: none; box-shadow: none; }
.m-card.m-photo-only .m-photo { height: 150px; border-radius: var(--radius-md); }
.m-card.m-snip { display: flex; align-items: center; }
.m-card.m-snip .m-ui {
  width: 100%; height: auto; border-radius: var(--radius-md);
  filter: drop-shadow(0 8px 18px rgb(var(--drop-rgb) / 0.18));
}

/* §6 + §7 timestamped pills carry the time in bold ahead of the label */
.callout-pill b { font-weight: 700; }
.hotspot-group .hotspot-label b { display: block; }

/* §7 the annotated caregiver photo. The answer chip sits ON the photo like
   every other floating chip on the site — under it, it read as an orphan. */
.split-media { position: relative; }
.care-tile { min-height: 420px; }
.care-chip { max-width: 300px; }

/* §10B privacy: one quiet line, subordinate to the setup above it.
   No badges, no icons — it is a reassurance, not a feature. */
.privacy-note {
  margin-top: 34px; text-align: center; font-size: 0.92rem;
  color: var(--ink-soft); max-width: 60ch; margin-left: auto; margin-right: auto;
}
.privacy-note a { color: var(--btn); font-weight: 600; text-decoration: none; white-space: nowrap; }
.privacy-note a:hover { text-decoration: underline; }


/* §2 the noisy history and Remy's verdict on the same morning. Two separate
   blocks, each with its own ground — sharing one block read as a single
   composite image rather than two phones. */
.phone-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* roughly the top three-quarters of each phone: a whole phone floating in a
   block reads as a product shot, a cropped one reads as a screen you are
   looking over someone's shoulder at */
.phone-duo .phone-block { height: 370px; margin: 0; }
.phone-duo .pb-phone { width: 100%; max-width: 262px; margin-top: 22px; }

/* §6 seven events on one small frame: absolute placement made them collide,
   so they stack in a corner-anchored column instead. */
.day-events { left: 12px; right: 12px; gap: 5px; }
.day-events .callout-pill { font-size: 0.62rem; padding: 5px 9px; white-space: normal; }

@media (max-width: 960px) {
  .phone-duo { gap: 10px; }
  .phone-duo .phone-block { height: 320px; }
  .phone-duo .pb-phone { max-width: 92%; margin-top: 16px; }
  .day-events .callout-pill { font-size: 0.58rem; padding: 4px 8px; }
}

/* The middle step carries seven event pills. At the default frame height only
   five fit, and the spec is explicit that an overlay which cannot fit at a
   readable size should be repositioned rather than shrunk — so the chain's
   frames get the height instead, and the pills stay legible. */
.day-chain .hc-media { aspect-ratio: auto; height: 290px; }

/* §7 the visit read as a sequence, so the events run as one ordered column
   rather than sitting at arbitrary points on the photograph */
.visit-events { left: 18px; right: auto; gap: 7px; }
/* .ugc-tile sets white-space: normal on its pills and wins on source order,
   so each event was breaking across two lines */
.ugc-tile .visit-events .callout-pill { white-space: nowrap; max-width: none; }


/* the caregiver link sits with its copy rather than under the photo */
.cta-inline { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

@media (max-width: 960px) {
}

/* §10A the hotspot dot is decorative: a translucent disc with a solid white
   ::after over its centre. Putting a number inside it left the digit sitting
   under that disc, which is why they were unreadable. The numbered variant
   drops the overlay and becomes a real badge. */
.hotspot-group .hotspot {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: var(--btn); color: var(--white);
  font-family: var(--sans); font-size: 0.85rem; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 5px rgb(var(--white-rgb) / 0.6), 0 4px 12px rgb(var(--drop-rgb) / 0.28);
}
.hotspot-group .hotspot::after { display: none; }
.hotspot-legend .callout-pill b { color: var(--btn); }

/* ---------- §4 contextual alerting ----------
   Two pairs, each the same camera at two different times. Deliberately no
   arrows, ticks, crosses or before/after labels: the timestamps and the
   presence or absence of a chip carry the whole comparison. */
/* .ugc-tile is nearly square (1 / 1.05), which suits a portrait grid tile but
   stretched these 4:3 frames about 200px taller than the photograph needs.
   Matching the source ratio, and capping the row width, keeps four large
   frames from becoming a 1400px section. */
.compare-rows { display: flex; flex-direction: column; gap: 22px; max-width: 1040px; margin: 0 auto; }
.compare-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cmp-tile { aspect-ratio: 4 / 3; min-height: 0; }
.cmp-time { left: 16px; top: 16px; }
.cmp-time b { font-weight: 700; }
.cmp-chip { left: 16px; bottom: 16px; max-width: 260px; }

/* the time pill is top-left and the alert chip bottom-left, so the room tag
   moves out of both their ways */
.cmp-tile .ugc-tag { top: 16px; right: 16px; bottom: auto; left: auto; }

@media (max-width: 960px) {
  /* spec: stack all four in sequence, never a two-column grid */
  .compare-pair { grid-template-columns: 1fr; gap: 14px; }
  .compare-rows { gap: 14px; }
  .cmp-chip { max-width: calc(100% - 32px); }
}

/* How Remy Works §4: the spec asks for this phone to read as an interactive
   demonstration rather than another hero composition, so it is substantially
   larger than the 300px mockups in the hero above it. */
.picker-grid.hiw-picker .picker-stage { height: 660px; }
.picker-grid.hiw-picker .picker-stage .picker-shot { width: min(420px, 100%); }
@media (max-width: 960px) {
  /* spec: a horizontal swipeable selector above the phone, each item carrying
     both its heading and its description */
  .hiw-picker { grid-template-columns: 1fr; gap: 18px; }
  .hiw-picker .picker-rows {
    flex-direction: row; overflow-x: auto; gap: 8px;
    scrollbar-width: none; -ms-overflow-style: none;
    padding-bottom: 4px; scroll-snap-type: x proximity;
  }
  .hiw-picker .picker-rows::-webkit-scrollbar { display: none; }
  .hiw-picker .picker-row {
    flex: 0 0 auto; width: 80vw; scroll-snap-align: start; padding: 14px 16px;
  }
  .hiw-picker .picker-row .row-arrow { display: none; }
  .picker-grid.hiw-picker .picker-stage { width: 100%; height: 520px; }
  .picker-grid.hiw-picker .picker-stage .picker-shot { width: min(330px, 86%); }
  /* spec: ~84% of the viewport, next card still showing */
  #answers-rail > * { flex: 0 0 84vw; }
}
/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .card-grid-3 { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .ugc-grid { grid-template-columns: repeat(2, 1fr); }
  .badge-row { justify-content: center; }
  .value-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 36px; }
}

@media (max-width: 960px) {
  /* one place sets the mobile side gutter: .wrap, .wrap-bleed, the header,
     both heroes and the rail bleed padding all read it */
  :root { --gutter: 18px; --gutter-bleed: 18px; }
  .hero-bleed .hero-content, .hero-split .hero-content { padding: 48px 0 56px; }
  .section { padding: 36px 0; }
  .section-tight { padding: 26px 0; }
  .band-deep { padding: 36px 0; }
  .split, .panel-split, .chooser-card { grid-template-columns: 1fr; }
  .split { gap: 26px; }
  .split.media-right .split-media { order: 1; }
  .split.media-right .split-copy { order: 2; }
  .panel-split .ps-copy { padding: 28px 20px; }
  .chooser-card .cc-copy { padding: 28px 20px; }
  .card-grid-3, .card-grid-4 { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: 1fr; gap: 26px; }
  .tile-grid { gap: 18px; }
  .tile-grid > * { flex: 0 1 calc(50% - 9px); min-width: 140px; }
  .photo-card { min-height: 420px; }
  .media-card { min-height: 320px; }
  .hero-bleed { min-height: 660px; }
  /* Overlay hero on mobile too: the text sits over the photo, so the scrim has
     to run bottom-to-top under the text rather than left-to-right. Kept light
     enough that the photo still reads — a wash strong enough to guarantee
     contrast everywhere would erase the picture it is sitting on. */
  .hero-bleed.text-dark .hero-scrim-light {
    background: linear-gradient(to top,
      rgb(var(--cream-rgb) / 0.93) 0%, rgb(var(--cream-rgb) / 0.90) 68%,
      rgb(var(--cream-rgb) / 0.84) 82%, rgb(var(--cream-rgb) / 0.22) 100%);
  }
  /* The eyebrow and the price note use the two lighter inks, which have no
     headroom left once they sit on a photograph. Over the overlay hero they
     take full --ink; pushing the scrim up instead would have erased the
     picture to rescue two small lines of text. */
  .hero-bleed.text-dark .hero-eyebrow,
  .hero-bleed.text-dark .hero-note { color: var(--ink); }
  /* The floating chip has nowhere to go once the copy spans the full width:
     it landed on top of the headline. It is supplementary, so it steps out. */
  .hero-bleed .hero-media .remy-chip { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 8px; }
  .footer-grid .follow-col { border-right: none; padding-right: 0; margin-bottom: 26px; }
  .footer-grid h4 { margin: 22px 0 14px; }
  .chooser-head { flex-direction: column; align-items: flex-start; }
  .ugc-head { flex-direction: column; align-items: flex-start; }
  .faq-card { padding: 4px 20px; }
  .faq-item .faq-a { padding-right: 8px; }
  .compare-card { padding: 22px 14px; }
  .compare-table th, .compare-table td { padding: 10px 6px; font-size: 0.85rem; }
  .hotspot-stage { min-height: 380px; }
  .chooser-tabs { grid-template-columns: 1fr; gap: 16px; }
  .phone-pair { flex-direction: column; }
  .phone-pair .phone:nth-child(2) { margin-left: 0; margin-top: -40px; }
  .lab-band { padding: 48px 0 42px; }
  .hero-flagship { padding-top: 44px; }
  /* hero-split on narrow screens: one band, not a photo strip stacked on a
     white block. The photograph stays the background for the whole hero, the
     scrim carries the ink type, and the app card sits under the copy where it
     is big enough to read. */
  /* display:contents dissolves the media wrapper, so the photo and scrim keep
     absolute-positioning against the section (staying the background of the
     whole band) while the app card drops into normal flow underneath the copy.
     Reserving space for it with padding cannot work: the cards range from a
     squat alert to a full settings panel, so the flow has to measure it. */
  .hero-split { display: flex; flex-direction: column; min-height: 0; }
  .hero-split .hero-media { display: contents; }
  /* Some feature heroes paint their ground with an SVG rather than a photo.
     Once the wrapper dissolves it would sit in flow as a band at the top, so
     pin it to the section the way .img-cover already pins itself. */
  .hero-split .hero-media > svg {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%; display: block;
  }
  .hero-split .hero-content { order: 1; padding: 40px 0 26px; }
  .hero-split .hero-note { margin-bottom: 0; }
  .hero-split .float-ui,
  .hero-split .float-ui.card-style {
    order: 2; position: static; transform: none;
    height: auto; width: auto;
    max-width: min(86%, 330px); max-height: 58vh;
    margin: 0 auto 36px; border-radius: 18px;
  }
  /* A left-to-right wash leaves the right half of the type on bare photo once
     the copy runs full width, so flatten it to an even one. */
  .hero-split .hero-scrim-light {
    background: linear-gradient(180deg, rgb(var(--cream-rgb) / 0.88) 0%,
                                        rgb(var(--cream-rgb) / 0.80) 55%,
                                        rgb(var(--cream-rgb) / 0.70) 100%);
  }
  /* text-light heroes keep their white type: the photo is now the background of
     the whole band, so flipping to ink here put navy text on a dark room. */
  .hero-split.text-light { color: var(--white); background: none; }
  .hero-split.text-light .sub { color: rgb(var(--white-rgb) / 0.9); }
  /* and the dark scrim flattens the same way the cream one does */
  .hero-split .hero-scrim-dark {
    background: linear-gradient(180deg, rgb(var(--scrim-rgb) / 0.72) 0%,
                                        rgb(var(--scrim-rgb) / 0.62) 55%,
                                        rgb(var(--scrim-rgb) / 0.5) 100%);
  }
}

@media (max-width: 520px) {
  .ugc-grid { grid-template-columns: 1fr 1fr; }
  .badge { width: 124px; height: 124px; font-size: 0.7rem; }
  .phone { width: 220px; }
}

/* ---------- Real photo / app-screenshot assets ---------- */

/* ---------- Caregiver campaign landing page ---------- */
.caregiver-landing .caregiver-hero { min-height: 680px; }
.caregiver-landing .caregiver-hero .hero-content { padding-top: 72px; padding-bottom: 76px; }
.caregiver-landing .caregiver-hero h1 { max-width: 680px; font-size: clamp(2.8rem, 5.3vw, 5.2rem); line-height: 1.16; }
.caregiver-landing .caregiver-hero .sub { max-width: 620px; font-size: 1.08rem; }
.caregiver-hero .hero-scrim-light {
  width: 84%; right: auto;
  background: linear-gradient(100deg, rgb(var(--cream-rgb) / 0.97) 0%, rgb(var(--cream-rgb) / 0.9) 52%, rgb(var(--cream-rgb) / 0.56) 72%, rgb(var(--cream-rgb) / 0) 100%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  -webkit-mask-image: linear-gradient(to right, rgb(var(--ink-rgb) / 1) 0%, rgb(var(--ink-rgb) / 1) 68%, transparent 100%);
  mask-image: linear-gradient(to right, rgb(var(--ink-rgb) / 1) 0%, rgb(var(--ink-rgb) / 1) 68%, transparent 100%);
}
.caregiver-eyebrow,
.caregiver-kicker {
  display: block; margin-bottom: 16px; color: var(--btn); font-size: 0.76rem;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.caregiver-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 28px; }
.caregiver-text-link { color: var(--ink); font-weight: 700; text-decoration: none; }
.caregiver-text-link:hover { color: var(--btn); }
.caregiver-hero-note { margin-top: 20px; color: var(--ink-soft); font-size: 0.82rem; max-width: 560px; }
.caregiver-proof { background: var(--navy-deep); color: var(--white); padding: 30px 0; }
.caregiver-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.caregiver-proof-grid > div { padding: 4px 34px; border-left: 1px solid rgb(var(--white-rgb) / 0.18); }
.caregiver-proof-grid > div:first-child { border-left: 0; padding-left: 0; }
.caregiver-proof-grid strong,
.caregiver-proof-grid span { display: block; }
.caregiver-proof-grid strong { margin-bottom: 6px; font-family: var(--serif); font-size: 1.12rem; font-weight: 500; }
.caregiver-proof-grid span { color: rgb(var(--white-rgb) / 0.74); font-size: 0.9rem; line-height: 1.45; }
.caregiver-intro .section-head { max-width: 780px; margin-left: auto; margin-right: auto; }
.caregiver-intro .section-head p { max-width: 660px; }
.caregiver-landing .caregiver-intro .hc-media.caregiver-timeline-step img {
  position: absolute; top: 18px; width: min(72%, 240px); max-width: none; max-height: none;
}
.visit-summary-ui {
  width: 88%; padding: 22px 24px; border: 1px solid var(--rule); border-radius: 18px;
  background: var(--white); color: var(--ink); box-shadow: 0 10px 26px rgb(var(--shadow-rgb) / 0.16);
}
.visit-summary-ui span {
  display: block; margin-bottom: 12px; color: var(--btn); font-size: 0.72rem;
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.visit-summary-ui p { margin: 0; font-size: 0.92rem; line-height: 1.5; }
.caregiver-checks { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.caregiver-checks li { position: relative; padding-left: 30px; color: var(--ink); }
.caregiver-checks li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 15px; height: 8px; border-left: 2px solid var(--btn); border-bottom: 2px solid var(--btn); transform: rotate(-45deg); }
.caregiver-inline-cta { margin-top: 28px; }
.caregiver-privacy { background: var(--navy-deep); color: var(--white); }
.caregiver-privacy-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: center; }
.caregiver-privacy .caregiver-kicker { color: var(--accent); }
.caregiver-privacy h2 { max-width: 620px; }
.caregiver-privacy-copy > p { color: rgb(var(--white-rgb) / 0.78); max-width: 620px; margin: 20px 0 24px; }
.caregiver-privacy .caregiver-text-link { color: var(--white); }
.caregiver-privacy-card { padding: 34px; border: 1px solid rgb(var(--white-rgb) / 0.18); border-radius: var(--radius-lg); background: rgb(var(--white-rgb) / 0.07); }
.caregiver-privacy-card strong { display: block; margin-bottom: 7px; font-family: var(--serif); font-size: 1.15rem; font-weight: 500; }
.caregiver-privacy-card p { color: rgb(var(--white-rgb) / 0.72); margin-bottom: 24px; }
.caregiver-privacy-card p:last-child { margin-bottom: 0; }
.caregiver-faq-centered { max-width: 820px; }
.caregiver-faq .faq-card { margin: 0; background: var(--white); border-color: var(--rule); color: var(--ink); }
.caregiver-faq .faq-item { border-color: var(--rule); }
.caregiver-faq .faq-item summary { color: var(--ink); }
.caregiver-faq .faq-item .faq-a { color: var(--ink-soft); }
.caregiver-landing .band-sand .sub { margin-top: 16px; }

@media (max-width: 960px) {
  .caregiver-landing .caregiver-hero { min-height: 650px; }
  .caregiver-landing .caregiver-hero .hero-content { padding-top: 46px; padding-bottom: 48px; }
  .caregiver-landing .caregiver-hero h1 { max-width: 14ch; font-size: clamp(2.55rem, 9vw, 4rem); }
  .caregiver-landing .caregiver-hero .sub { max-width: 34rem; }
  .caregiver-hero .hero-scrim-light {
    width: 100%;
    background: rgb(var(--cream-rgb) / 0.76);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .caregiver-hero .visit-events,
  .caregiver-hero .remy-chip { display: none; }
  .caregiver-proof-grid { grid-template-columns: 1fr; }
  .caregiver-proof-grid > div,
  .caregiver-proof-grid > div:first-child { padding: 18px 0; border-left: 0; border-top: 1px solid rgb(var(--white-rgb) / 0.18); }
  .caregiver-proof-grid > div:first-child { border-top: 0; }
  .caregiver-privacy-grid { grid-template-columns: 1fr; gap: 34px; }
  .caregiver-split-media-first .split-copy { order: 1; }
  .caregiver-split-media-first .split-media { order: 2; }
}

@media (max-width: 560px) {
  .caregiver-hero-actions { align-items: flex-start; flex-direction: column; gap: 17px; }
  .caregiver-hero-note { font-size: 0.78rem; }
  .caregiver-privacy-card { padding: 26px 22px; }
}

/* Full-bleed cover photo inside any positioned media container */
.img-cover {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* Gentle warm grade for lifestyle photos (cohesion with the cream/navy palette) */
.img-warm { filter: sepia(0.12) saturate(1.06) brightness(1.01); }
/* The hero photo is cool window light, and it sets the temperature for the
   whole page above the fold, so it gets a stronger push than the site default.
   Scoped to the hero: the same amount on the warm interiors elsewhere would
   tip them orange. */
.hero-media .img-warm { filter: sepia(0.26) saturate(1.16) brightness(1.02) hue-rotate(-10deg); }
/* Camera-footage stills: oversize + bottom-anchor so the frame's top edge
   (fisheye ceiling + watermark) never shows, regardless of container ratio */
.img-cover.crop-safe { top: auto; bottom: 0; height: 118%; }

/* Text-legibility scrims layered over hero photos */
.hero-scrim-dark {
  position: absolute; inset: 0; pointer-events: none;
  /* Two layers: a strong wash down the text column (left), plus a lighter lift
     off the bottom edge. Keeps the headline readable without flattening the face. */
  background:
    linear-gradient(100deg, rgb(var(--scrim-rgb) / 0.86) 0%, rgb(var(--scrim-rgb) / 0.66) 32%,
                            rgb(var(--scrim-rgb) / 0.22) 58%, rgb(var(--scrim-rgb) / 0) 76%),
    linear-gradient(to top, rgb(var(--scrim-rgb) / 0.5) 0%, rgb(var(--scrim-rgb) / 0.16) 55%, rgb(var(--scrim-rgb) / 0.06) 100%);
}
.hero-scrim-light {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgb(var(--cream-rgb) / 0.94) 0%, rgb(var(--cream-rgb) / 0.62) 42%, rgb(var(--cream-rgb) / 0.06) 72%);
}
/* Overlay scrims so serif titles stay readable on real photos */
.photo-card .pc-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(var(--scrim-rgb) / 0.55) 0%, rgb(var(--scrim-rgb) / 0.08) 55%);
}
.lab-band .lab-bg::after {
  content: ""; position: absolute; inset: 0; background: rgb(var(--scrim-rgb) / 0.6);
}

/* Stylized Remy app screenshots (phone-framed PNGs with transparent corners) */
.ui-phone {
  width: 250px; max-width: 78%; height: auto; flex: 0 0 auto;
  filter: drop-shadow(0 24px 50px rgb(var(--drop-rgb) / 0.35));
}
.ui-phone.tilt { transform: rotate(-6deg); }
/* Floating-card style screenshots */
.ui-card {
  width: 250px; max-width: 72%; height: auto; flex: 0 0 auto; border-radius: 18px;
  filter: drop-shadow(0 18px 40px rgb(var(--drop-rgb) / 0.3));
}
.phone-pair .ui-phone:nth-child(2) { margin-left: -60px; transform: rotate(5deg) translateY(26px); }

/* UI-card snippets — one app moment, no phone chrome or dead backdrop */
.ui-snippet {
  width: min(400px, 84%); height: auto; flex: 0 0 auto; border-radius: 18px;
  filter: drop-shadow(0 18px 40px rgb(var(--drop-rgb) / 0.28));
}

/* Bench-stats duo (safety page) — explicitly bench testing, next to the disclaimer */
.stat-duo { display: flex; justify-content: center; gap: 56px; flex-wrap: wrap; margin-top: 34px; }
.stat-duo .sd-item { text-align: center; max-width: 240px; }
.stat-duo .sd-big { font-family: var(--serif); font-weight: 500; font-size: 2.7rem; line-height: 1.05; }
.stat-duo .sd-item small { display: block; margin-top: 6px; font-size: 0.85rem; line-height: 1.4; }

/* Screenshot floated over a hero photo (right side) */
.float-ui {
  position: absolute; z-index: 1; right: 6%; top: 10%; height: 80%; width: auto;
  filter: drop-shadow(0 18px 40px rgb(var(--drop-rgb) / 0.35));
}
.float-ui.card-style { height: auto; max-height: 76%; max-width: 34%; border-radius: 18px; }

/* Before/after band: two half-frame footage stills + divider */
.ba-half {
  position: absolute; bottom: 0; height: 114%; width: 50%; object-fit: cover;
}
.ba-half.left { left: 0; }
.ba-half.right { right: 0; }
.ba-divider {
  position: absolute; top: 0; bottom: 0; left: calc(50% - 4px); width: 8px; background: var(--white); z-index: 1;
}
.ba-label {
  position: absolute; top: 24px; z-index: 1; background: rgb(var(--pill-rgb) / 0.85); color: var(--white);
  border-radius: 999px; padding: 8px 18px; font-size: 0.88rem; font-weight: 600;
}
.ba-label.ba-left { left: 6%; }
.ba-label.ba-right { right: 6%; }
/* Real test-home footage stays deliberately small: each half caps at ~380px wide */
.ba-band { max-width: 760px; margin: 0 auto; }

/* ============================================================
   Product-output overlays — every lifestyle photo carries a
   Remy artifact (chip / pill / card) about that exact scene
   ============================================================ */

/* Floating "what Remy wrote" chip */
.remy-chip {
  position: absolute; z-index: 2;
  background: rgb(var(--cream-rgb) / 0.96); color: var(--ink);
  border-radius: 14px; padding: 10px 14px 11px;
  font-size: 0.8rem; line-height: 1.4; font-family: var(--sans);
  box-shadow: 0 10px 26px rgb(var(--shadow-rgb) / 0.28);
  max-width: 260px;
}
.remy-chip .rc-kicker {
  display: block; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 3px;
}
.remy-chip .rc-ok { color: var(--ok-text); font-weight: 600; }
.remy-chip.rc-dark { background: rgb(var(--pill-rgb) / 0.92); color: var(--white); }
.remy-chip.rc-dark .rc-kicker { color: var(--muted-on-dark); }
.remy-chip.rc-dark .rc-ok { color: var(--ok-text-dark); }

/* Stack of chips (e.g. two timeline moments over one photo) */
.remy-stack {
  position: absolute; z-index: 2; display: flex; flex-direction: column;
  align-items: flex-start; gap: 10px;
}
.remy-stack .remy-chip { position: static; }

/* Chip pinned inside a tall photo-card (below its pc-label) */
.photo-card .pcard-chip { left: 20px; top: 68px; }
.photo-card .pcard-chip.right { left: auto; right: 16px; }

/* Callout pill over real footage: states what Remy DID at that spot */
.callout-pill {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgb(var(--cream-rgb) / 0.95); color: var(--ink);
  border-radius: 999px; padding: 6px 13px;
  font-size: 0.75rem; font-weight: 600; font-family: var(--sans);
  box-shadow: 0 6px 18px rgb(var(--shadow-rgb) / 0.3); white-space: nowrap;
}
.callout-pill::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px;
  background: var(--dot); flex: 0 0 auto;
}

/* Corner-anchored stack of pills (annotation, viewport-safe) */
.callout-stack {
  position: absolute; z-index: 2; left: 16px; bottom: 16px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.callout-stack.cs-top { bottom: auto; top: 16px; }
.callout-stack .callout-pill { position: static; }

/* Calm camera-viewer chrome around real footage */
.cam-frame {
  border-radius: var(--radius-lg); overflow: hidden; background: var(--white);
  box-shadow: 0 14px 34px rgb(var(--shadow-rgb) / 0.12);
}
.cam-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 13px 22px; background: var(--white);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink);
}
.cam-bar .cb-meta {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-soft); font-weight: 600; letter-spacing: 0.06em;
}
.cam-bar .cb-meta::before {
  content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--good);
}
.cam-frame .hotspot-stage, .cam-frame .cam-media { border-radius: 0; }

/* Hotspot with an always-visible label: what Remy did there */
.hotspot-group { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; }
.hotspot-group .hotspot { position: relative; top: auto; left: auto; flex: 0 0 auto; }
.hotspot-group .hotspot-label {
  background: rgb(var(--cream-rgb) / 0.95); color: var(--ink);
  border-radius: 999px; padding: 6px 13px;
  font-size: 0.75rem; font-weight: 600; white-space: nowrap;
  box-shadow: 0 6px 18px rgb(var(--shadow-rgb) / 0.3);
}
.hotspot-legend { display: none; }

/* "From clip to check-in" chain (privacy page) */
.how-chain {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 18px; align-items: center;
}
.hc-step {
  background: var(--white); border-radius: var(--radius-md); padding: 12px 12px 15px;
  box-shadow: 0 12px 30px rgb(var(--shadow-rgb) / 0.1);
}
.hc-media {
  position: relative; border-radius: 12px; overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--cream-2);
}
.hc-media.hc-ui { display: flex; align-items: center; justify-content: center; }
.hc-media.hc-ui img { max-height: 88%; max-width: 74%; width: auto; border-radius: 12px; box-shadow: 0 10px 26px rgb(var(--shadow-rgb) / 0.18); }
.hc-cap { text-align: center; font-weight: 600; font-size: 0.92rem; margin-top: 13px; }
.hc-cap small { display: block; color: var(--ink-soft); font-weight: 400; font-size: 0.78rem; margin-top: 2px; }
.hc-arrow {
  font-family: var(--serif); font-size: 1.7rem; color: var(--ink-soft);
  text-align: center; user-select: none;
}

/* Footage tile pills need to wrap inside small squares */
.ugc-tile .callout-pill { white-space: normal; max-width: calc(100% - 24px); }

/* Floated UI card anchored low (when a person occupies the photo's upper half) */
.float-ui.anchor-bottom { top: auto; bottom: 8%; max-height: 62%; }

/* Default chip anchor inside full-bleed heroes */
.hero-bleed .hero-media .remy-chip { right: 6%; top: 16%; }
@media (max-width: 960px) {
  .hero-bleed.hero-stack-mobile .hero-media .remy-chip { top: auto; right: 12px; bottom: 12px; }
}

@media (max-width: 960px) {
  .remy-chip { font-size: 0.72rem; max-width: 215px; padding: 8px 12px 9px; }
  .callout-pill, .hotspot-group .hotspot-label { font-size: 0.68rem; padding: 5px 10px; }
  .photo-card .pcard-chip { top: 64px; }
  /* the footage crops differently on small screens, so in-stage hotspots
     drift off their subjects: hide them, show the legend row underneath */
  .hotspot-group { display: none; }
  .hotspot-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
  .hotspot-legend .callout-pill { position: static; white-space: normal; }

  /* ---- homepage spec: mobile transforms ---- */

  /* §4 the vertical selector becomes a horizontal swipe row above the UI */
  .ask-picker { grid-template-columns: 1fr; gap: 18px; }
  .ask-picker .picker-rows {
    flex-direction: row; overflow-x: auto; gap: 8px;
    scrollbar-width: none; -ms-overflow-style: none;
    padding-bottom: 4px; scroll-snap-type: x proximity;
  }
  .ask-picker .picker-rows::-webkit-scrollbar { display: none; }
  .ask-picker .picker-row {
    flex: 0 0 auto; max-width: 78vw; scroll-snap-align: start;
    padding: 13px 16px;            /* large tappable control */
  }
  .ask-picker .picker-row .row-arrow { display: none; }
  .ask-picker .picker-stage { width: 100%; }

  /* §3 rail: ~84% card width, next card visibly cut off */
  #safety-rail > * { flex: 0 0 84vw; }

  /* §8 the 3-up trend grid becomes a horizontal swipe rail, ~85% wide */
  .trend-grid {
    display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none;
    margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter));
    padding: 0 var(--gutter);
  }
  .trend-grid::-webkit-scrollbar { display: none; }
  .trend-grid > * { flex: 0 0 85vw; scroll-snap-align: start; }

  /* §7 three of the four events stay on the image; the fourth would crowd it */
  .visit-events .callout-pill:not(.pill-keep) { display: none; }
  .care-tile { min-height: 300px; }
  .care-chip { position: static; margin-top: 14px; max-width: none; }


  /* §5 keep roughly 1.5-2.5 cards across the screen */
  .m-card.m-photo-only, .m-card.m-snip { width: 46vw; }
  .m-card.m-photo-only .m-photo { height: 120px; }
  .how-chain { grid-template-columns: 1fr; gap: 12px; }
  .hc-arrow { transform: rotate(90deg); }
  .cam-bar { padding: 11px 16px; font-size: 0.64rem; }
}

/* ============================================================
   Motion — scroll reveals + entrance animations
   Every pre-reveal hidden state is gated behind html.anim, which
   only script.js adds (and skips under prefers-reduced-motion),
   so the site is fully visible if JS never runs.
   Character: warm and soft — small rises, slow soft easing.
   ============================================================ */

:root { --ease-soft: cubic-bezier(0.22, 1, 0.36, 1); }

/* Scroll reveals (elements tagged .rv by script.js) */
html.anim .rv {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.6s var(--ease-soft), transform 0.6s var(--ease-soft);
  transition-delay: var(--rv-d, 0ms);
  will-change: opacity, transform;
}
html.anim .rv.in { opacity: 1; transform: none; }

@keyframes rv-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes rv-fade { from { opacity: 0; } to { opacity: 1; } }

/* Hero entrances: headline / sub / CTA rise in sequence on load */
html.anim .hero-bleed .hero-content > *,
html.anim .hero-split .hero-content > *,
html.anim .hero-flagship .hero-top > * { animation: rv-up 0.65s var(--ease-soft) 0.08s backwards; }
html.anim .hero-bleed .hero-content > *:nth-child(2),
html.anim .hero-split .hero-content > *:nth-child(2),
html.anim .hero-flagship .hero-top > *:nth-child(2) { animation-delay: 0.2s; }
html.anim .hero-bleed .hero-content > *:nth-child(3),
html.anim .hero-split .hero-content > *:nth-child(3),
html.anim .hero-flagship .hero-top > *:nth-child(3) { animation-delay: 0.32s; }
/* Floating UI cards + chips over hero photos arrive a beat later */
html.anim .hero-media .remy-chip,
html.anim .hero-media .float-ui { animation: rv-up 0.8s var(--ease-soft) 0.55s backwards; }
/* Flagship hero (check-in): product row drifts up after the headline */
html.anim .hero-flagship .hero-product > * { animation: rv-up 0.7s var(--ease-soft) 0.45s backwards; }
html.anim .hero-flagship .hero-product > *:nth-child(2) { animation-delay: 0.57s; }
html.anim .hero-flagship .hero-product > *:nth-child(3) { animation-delay: 0.69s; }
/* the tilted phone keeps its rotate — fade only, no transform keyframes */
html.anim .hero-flagship .hero-product > .tilt { animation-name: rv-fade; }

/* Hotspot stage (index): pins pop in after the frame reveals… */
html.anim .cam-frame .hotspot-group { opacity: 0; }
html.anim .cam-frame.in .hotspot-group { animation: hs-in 0.5s var(--ease-soft) forwards; }
html.anim .cam-frame.in .hotspot-group:nth-of-type(1) { animation-delay: 0.5s; }
html.anim .cam-frame.in .hotspot-group:nth-of-type(2) { animation-delay: 0.65s; }
html.anim .cam-frame.in .hotspot-group:nth-of-type(3) { animation-delay: 0.8s; }
@keyframes hs-in { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }
/* …then each dot carries a calm, slow pulse ring */
html.anim .hotspot::before {
  content: ""; position: absolute; inset: -6px; border-radius: 999px;
  border: 2px solid rgb(var(--white-rgb) / 0.6); opacity: 0;
  animation: hs-pulse 2.5s ease-out 1.6s infinite;
}
@keyframes hs-pulse {
  0% { transform: scale(0.55); opacity: 0.8; }
  65% { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}

/* Before/after blur band (check-in): divider handle hints at the split */
html.anim .hotspot-stage.in .ba-divider { animation: ba-nudge 1.2s var(--ease-soft) 0.55s 1; }
@keyframes ba-nudge {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(-16px); }
  70% { transform: translateX(12px); }
}

/* FAQ accordion: smooth expand (progressive enhancement) */
html.anim { interpolate-size: allow-keywords; }
html.anim .faq-item::details-content {
  height: 0; opacity: 0; overflow: clip;
  transition: height 0.35s ease, opacity 0.3s ease, content-visibility 0.35s allow-discrete;
}
html.anim .faq-item[open]::details-content { height: auto; opacity: 1; }

/* Micro-interactions: gentle card lift + shadow (works with or without JS) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .product-card, .photo-card, .ugc-tile, .hc-step {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .product-card:hover, .ugc-tile:hover, .hc-step:hover {
    transform: translateY(-4px); box-shadow: 0 16px 34px rgb(var(--shadow-cool-rgb) / 0.14);
  }
  .photo-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgb(var(--shadow-cool-rgb) / 0.22); }
  .btn { transition: background 0.2s, color 0.2s, transform 0.2s; }
  .btn:hover { transform: translateY(-2px); }
}

/* Reduced motion: script.js already skips tagging, but neutralize everything
   here too in case the preference flips after load */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.anim .rv { opacity: 1; transform: none; transition: none; }
  html.anim .hero-bleed .hero-content > *,
  html.anim .hero-split .hero-content > *,
  html.anim .hero-flagship .hero-top > *,
  html.anim .hero-flagship .hero-product > *,
  html.anim .hero-media .remy-chip,
  html.anim .hero-media .float-ui,
  html.anim .hotspot-stage.in .ba-divider { animation: none; }
  html.anim .cam-frame .hotspot-group { opacity: 1; animation: none; }
  html.anim .hotspot::before { animation: none; opacity: 0; }
  html.anim .faq-item::details-content { transition: none; height: auto; opacity: 1; }
}

@media (max-width: 960px) {
  /* The hero-split media layer stays the background of the whole band on narrow
     screens (see the rules above); only the floated art in other blocks moves. */
  .float-ui { height: 76%; top: 12%; }
  .hero-split .float-ui { height: auto; top: auto; }
  .phone-pair .ui-phone:nth-child(2) { margin-left: 0; margin-top: -40px; }
  .product-card .card-art { height: 230px; }
  /* Reference anatomy on narrow screens: block still hugs the phone */
  .feat-rows { gap: 44px; }
  .feat-row, .feat-row.media-right { grid-template-columns: 1fr; gap: 24px; }
  .feat-row.media-right .fr-media { order: 1; }
  .feat-row.media-right .fr-copy { order: 2; }
  .phone-block { height: 450px; border-radius: 22px; }
  .phone-block .pb-phone { width: 230px; max-width: 60%; margin-top: 28px; }
  .snip-block { padding: 20px 18px; }
  .snip-block .ui-snippet { max-width: 360px; }
  .rail > * { flex: 0 0 78vw; }
  /* each half is only ~175px wide here, so the labels must wrap inside their
     own half instead of spilling across the divider */
  .ba-label {
    font-size: 0.66rem; padding: 5px 10px; top: 12px; line-height: 1.25;
    border-radius: 12px; white-space: normal; text-align: center; max-width: 42%;
  }
  /* stack the before/after labels diagonally so they can't collide */
  .ba-label.ba-left { left: 4%; }
  .ba-label.ba-right { right: 4%; top: auto; bottom: 12px; }
  /* portrait-subject full-bleed heroes: stack the photo band above the text on
     narrow screens (same treatment as hero-split) so text never sits on a face */
  .hero-bleed.hero-stack-mobile { display: block; min-height: 0; color: var(--ink); background: var(--cream); }
  .hero-bleed.hero-stack-mobile .hero-media { position: relative; height: 320px; }
  .hero-bleed.hero-stack-mobile .hero-media .hero-scrim-dark { display: none; }
  .hero-bleed.hero-stack-mobile .hero-content { padding: 34px 0 44px; }
  .hero-bleed.hero-stack-mobile .btn-light { background: var(--btn); color: var(--white); }
}

/* ============================================================
   Tinted art backdrops + SVG stand-in art
   Colour that used to live in inline styles / SVG fill attributes now
   rides on these classes, so the palette block stays the only place a
   colour is authored.
   ============================================================ */
/* The five accent gradients. Named for the feature they were introduced with,
   but they are a rotation, not a taxonomy - "The things that come before the
   emergency" cycles them across its cards, and the phone blocks on the feature
   pages now do the same instead of sitting on two flat tans. */
.card-art.art-ask,     .phone-block.art-ask     { background: linear-gradient(150deg, var(--art-ask-0), var(--art-ask-1)); }
.card-art.art-alert,   .phone-block.art-alert   { background: linear-gradient(150deg, var(--art-alert-0), var(--art-alert-1)); }
.card-art.art-trend,   .phone-block.art-trend   { background: linear-gradient(150deg, var(--art-trend-0), var(--art-trend-1)); }
.card-art.art-night,   .phone-block.art-night   { background: linear-gradient(150deg, var(--art-night-0), var(--art-night-1)); }
.card-art.art-summary, .phone-block.art-summary { background: linear-gradient(150deg, var(--art-summary-0), var(--art-summary-1)); }

/* Tilted photo tile in the check-in collage (geometry stays inline, colour doesn't) */
.collage-tile { box-shadow: 0 18px 40px rgb(var(--shadow-cool-rgb) / 0.18); }

/* SVG stand-in illustrations: every fill/stop lives here, not on the element */
.sv-night-0 { stop-color: var(--svg-night-0); }
.sv-night-1 { stop-color: var(--svg-night-1); }
.sv-star    { fill: var(--svg-star); }
.sv-wall-0  { stop-color: var(--svg-wall-0); }
.sv-wall-1  { stop-color: var(--svg-wall-1); }
.sv-table-0 { stop-color: var(--svg-table-0); }
.sv-table-1 { stop-color: var(--svg-table-1); }
.sv-glow    { fill: var(--white); }
.sv-cam-base { fill: var(--svg-cam-base); }
.sv-cam-stem { fill: var(--svg-cam-stem); }
.sv-cam-body { fill: var(--svg-cam-body); }
.sv-cam-lens { fill: var(--svg-cam-lens); }
.sv-cam-iris { fill: var(--svg-cam-iris); }
.sv-cam-led  { fill: var(--svg-cam-led); }

/* ============================================================
   Drifting moment rows (marquee)
   One authored set of cards per row; script.js clones it enough times
   to cover the viewport, then sets --m-shift to exactly one set plus
   one gap so the loop wraps seamlessly, and derives the duration from
   that distance so the speed is a constant px/second at every width.
   Rows drift in opposite directions and pause on hover or focus.
   Without JS — or under prefers-reduced-motion — none of the html.js
   rules apply and the same markup renders as a static wrapped grid.
   ============================================================ */
.moments-rows { display: flex; flex-direction: column; gap: 0; }
/* The row is a scroll container, so it clips vertically as well as
   horizontally: with no padding the cards' drop shadow (0 10px 24px, so 34px
   below the box and 14px above) was sliced off flush with the card edge and
   read as a hard line under every row. The padding gives the shadow room
   inside the scroll box; the negative margin pulls the rows back together so
   the visual gap between cards stays the 16px it was. */
.moments-row {
  overflow: hidden; --m-gap: 16px;
  padding-top: 14px; padding-bottom: 34px;
}
.moments-row + .moments-row { margin-top: -32px; }
/* ...and claw back the trailing padding so the block ends where it used to */
.moments-rows { margin-bottom: -18px; }

/* When JS is driving it, the row is a genuine horizontal scroller: it looks
   scrollable, so it has to actually scroll. The drift is applied to
   scrollLeft (see script.js) rather than a transform, so a drag or a
   trackpad swipe just takes over mid-motion instead of fighting it. */
html.js .moments-row {
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab;
}
html.js .moments-row::-webkit-scrollbar { display: none; }
html.js .moments-row.is-grabbing { cursor: grabbing; scroll-behavior: auto; }

/* Static fallback: a wrapped, centred grid inside the normal container */
.moments-track { display: flex; }
.m-set {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
}

html.js .marquee-track {
  display: flex; width: max-content; gap: var(--m-gap);
}
html.js .marquee-set { flex-wrap: nowrap; max-width: none; margin: 0; padding: 0; }


/* The cards themselves reuse the site's warm card language */
.m-card {
  display: flex; flex-direction: column; width: 212px;
  border-radius: var(--radius-md); overflow: hidden;
  font-size: 0.82rem; font-weight: 600; line-height: 1.32;
  color: var(--ink); flex: 0 0 auto; background: var(--cream-2);
  box-shadow: 0 10px 24px rgb(var(--shadow-rgb) / 0.1);
}
.m-card .m-photo {
  display: block; width: 100%; height: 116px; object-fit: cover;
}
.m-card .m-cap {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  gap: 3px; padding: 11px 14px 13px; min-height: 62px;
}
.m-card .m-when {
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--ink-soft);
}
.m-card .m-text { font-weight: 600; }

/* Quiet tints, drawn from the same warm palette as the bands */
.m-card.tint-1 { background: var(--tint-1); }
.m-card.tint-sand { background: var(--sand); }
.m-card.tint-2 { background: var(--tint-2); }
.m-card.tint-3 { background: var(--tint-3); }

/* Questions you can ask: white card, soft blue rule, italic question */
.m-card.m-ask { background: var(--white); border: 1.5px solid var(--ask-card-border); }
.m-card.m-ask .m-when { color: var(--btn); }
.m-card.m-ask .m-text { font-style: italic; }

/* The rare flags: peach-tinted, still calm */
.m-card.m-flag { background: var(--flag-bg); border: 1.5px solid var(--card-warm); }
.m-card.m-flag .m-when { color: var(--mark); }

.moments-footnote {
  text-align: center; color: var(--ink-soft); font-size: 0.85rem;
  margin: 22px auto 0; max-width: 62ch; padding: 0 var(--gutter);
}

@media (max-width: 700px) {
  .m-card { width: 158px; font-size: 0.73rem; border-radius: 14px; }
  .m-card .m-photo { height: 86px; }
  .m-card .m-cap { padding: 9px 11px 10px; min-height: 52px; }
  .m-card .m-when { font-size: 0.57rem; }
  .moments-row { --m-gap: 10px; }
  .m-set { gap: 10px; }
  .moments-rows { gap: 12px; }
}

/* ============================================================
   Feature picker: a vertical tablist that swaps the phone beside it
   Each row is a real <button role="tab"> in a vertical tablist; the
   phone screens stack in one grid cell and crossfade. Keyboard:
   Arrow keys / Home / End move the selection, tabindex roves.
   ============================================================ */
.picker-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 52px; align-items: center;
}
.picker-rows { display: flex; flex-direction: column; gap: 10px; }
.picker-row {
  background: var(--white); border: 1px solid rgb(var(--ink-rgb) / 0.16);
  border-radius: 14px; padding: 15px 20px;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  width: 100%; text-align: left; font-family: var(--sans); color: inherit;
  font-weight: 600; font-size: 0.99rem; line-height: 1.4; cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease,
    border-color 0.2s ease, background 0.2s ease;
}
.picker-row .pr-copy { display: block; }
.picker-row small {
  display: block; margin-top: 3px; font-weight: 400; font-size: 0.85rem;
  color: var(--ink-soft); max-width: 46ch;
}
.picker-row .row-arrow {
  color: var(--btn); font-size: 1.15rem; flex: 0 0 auto;
  transition: transform 0.2s ease;
}
.picker-row[aria-selected="true"] {
  border-color: var(--btn);
  box-shadow: 0 10px 24px rgb(var(--shadow-cool-rgb) / 0.16);
}
.picker-row[aria-selected="true"] .row-arrow { transform: translateX(4px); }
.picker-row:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* The stage reuses the cropped-phone anatomy: the screens stack in one
   grid cell inside the block and crossfade between them. */
.picker-stage { display: grid; justify-items: center; }
/* The stacked screens are centred grid items, so the percentage cap that
   .phone-block gives a single flex child would resolve against the item
   itself and shrink it. Size them outright instead, and let the block's
   fixed height do the cropping exactly as it does on the features page. */
.picker-stage .picker-shot {
  grid-area: 1 / 1; opacity: 0;
  width: min(330px, 100%); max-width: 100%;
  transition: opacity 0.3s ease; pointer-events: none;
}
.picker-stage .picker-shot.is-active { opacity: 1; }

@media (hover: hover) {
  .picker-row:hover { border-color: var(--btn); }
}

@media (max-width: 960px) {
  .picker-grid { grid-template-columns: 1fr; gap: 26px; }
  .picker-row { padding: 13px 16px; font-size: 0.94rem; }
  .picker-stage .picker-shot { width: min(230px, 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .picker-stage .picker-shot { transition: none; }
  .picker-row { transition: none; }
}


/* ---------- Outcome cards ------------------------------------------------
   Four cards, one device, four different screens. The phone bleeds off the
   bottom of its block (the same anatomy the feature rows use) so it reads as
   a phone rather than a floating widget, and the four screens are the only
   thing that differs. Drawn in CSS so it follows the palette. ------------- */
.outcome-grid .product-card { padding-top: 14px; }
.oc-stage {
  border-radius: var(--radius-md); margin-bottom: 16px; height: 232px;
  padding: 20px 16px 0; display: flex; justify-content: center; overflow: hidden;
}
.oc-dark { background: var(--navy-deep); }
.oc-dark.is-lit { background: var(--chip-navy); }
.oc-day  { background: var(--sand); }
.oc-calm { background: var(--cream-2); }

.oc-ph {
  width: 158px; border-radius: 20px 20px 0 0; padding: 7px 7px 0;
  background: var(--ph-frame); box-shadow: 0 12px 30px rgb(var(--drop-rgb) / 0.30);
  display: flex; flex-direction: column; align-items: center;
}
.oc-notch { width: 44px; height: 5px; border-radius: 99px; background: rgb(var(--white-rgb) / 0.22); margin: 3px 0 6px; }
.oc-screen {
  width: 100%; flex: 1; border-radius: 14px 14px 0 0; padding: 12px 10px;
  display: flex; flex-direction: column;
}

/* the two night screens: a lock screen, dark or lit */
.oc-lockscreen { background: var(--ph-screen); align-items: center; text-align: center; }
.is-lit .oc-lockscreen { background: var(--ph-card); }
.oc-lt { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1;
  color: rgb(var(--white-rgb) / 0.95); }
.oc-ld { font-size: 0.6rem; color: var(--ph-muted); margin-top: 2px; }
.oc-empty { margin-top: auto; margin-bottom: 14px; font-size: 0.62rem; color: var(--ph-tab-text); }
.oc-note {
  width: 100%; margin-top: 12px; text-align: left; border-radius: 10px; padding: 8px 9px;
  background: rgb(var(--white-rgb) / 0.95); color: var(--ink);
  box-shadow: 0 0 22px 3px rgb(var(--white-rgb) / 0.16);
}
.oc-note b { display: block; font-size: 0.74rem; line-height: 1.2; }
.oc-brand { display: flex; justify-content: space-between; font-size: 0.53rem; font-weight: 700;
  letter-spacing: 0.09em; color: var(--btn); margin-bottom: 3px; }
.oc-brand i { font-style: normal; color: var(--ink-faint); letter-spacing: 0; }

/* the two in-app screens */
.oc-app { background: var(--white); }
.oc-kick { display: flex; justify-content: space-between; font-size: 0.5rem; font-weight: 700;
  letter-spacing: 0.09em; color: var(--btn); margin-bottom: 7px; }
.oc-kick i { font-style: normal; color: var(--ink-faint); letter-spacing: 0; }
.oc-clip { border-radius: 7px; overflow: hidden; height: 62px; margin-bottom: 7px; }
.oc-clip img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 76%; }
.oc-app p { font-size: 0.63rem; line-height: 1.35; color: var(--ink); }
.oc-sum { color: var(--ink-soft) !important; }
.oc-cta { margin-top: 9px; text-align: center; font-size: 0.6rem; font-weight: 600;
  padding: 6px; border-radius: 999px; background: var(--btn); color: var(--white); }
.oc-ok { margin-top: 10px; font-size: 0.6rem; font-weight: 600; color: var(--ok-text);
  display: flex; align-items: center; gap: 5px; }
.oc-ok::before { content: ""; width: 13px; height: 13px; border-radius: 50%;
  background: var(--good); opacity: 0.25; flex: 0 0 13px; }

@media (max-width: 960px) { .oc-stage { height: 212px; } .oc-ph { width: 148px; } }

/* ---------- Legal + support pages ----------
   Long-form text pages (privacy, terms, support) cloned from remycamera.com.
   One measured column, the site's serif for headings, no art. */
.legal { padding: 64px 0 80px; background: var(--cream); }
.legal .wrap { width: min(100% - 2 * var(--gutter), 780px); margin: 0 auto; }
.legal-hero { margin-bottom: 40px; }
.legal-hero .eyebrow {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--btn);
  margin-bottom: 14px;
}
.legal-hero h1 { margin-bottom: 18px; }
.legal-hero .lede { font-size: 1.1rem; color: var(--ink-soft); max-width: 62ch; }
.legal-hero .meta {
  display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 22px;
  font-family: var(--sans); font-size: 0.85rem; color: var(--ink-soft);
}
.legal-hero .btn { margin-top: 24px; }
.legal-summary {
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--radius-md); padding: 28px 30px; margin-bottom: 48px;
}
.legal-summary h2 { font-size: 1.4rem; margin-bottom: 16px; }
.legal-summary p { color: var(--ink-soft); margin-bottom: 14px; }
.legal-summary p:last-child, .legal-summary li:last-child { margin-bottom: 0; }
.legal-summary ul li, .legal-list li {
  position: relative; padding-left: 22px; margin-bottom: 12px;
  color: var(--ink-soft); font-size: 0.98rem;
}
.legal-summary ul li::before, .legal-list li::before {
  content: ""; position: absolute; left: 2px; top: 0.62em;
  width: 7px; height: 7px; border-radius: 999px; background: var(--dot);
}
.legal-body section { margin-bottom: 44px; }
.legal-body h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-bottom: 16px;
  display: flex; align-items: baseline; gap: 14px;
}
.legal-body h2 .num {
  font-family: var(--sans); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.08em; color: var(--ink-faint);
}
.legal-body h3 {
  font-family: var(--sans); font-size: 1rem; font-weight: 700;
  margin: 26px 0 10px;
}
.legal-body p { color: var(--ink-soft); margin-bottom: 14px; max-width: 68ch; }
.legal-body a { color: var(--btn); text-decoration: underline; text-underline-offset: 3px; }
.legal-table-scroll { overflow-x: auto; margin-bottom: 14px; }
.legal-table {
  width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 0.94rem;
}
.legal-table thead th {
  text-align: left; padding: 10px 12px; background: var(--cream-2);
  border-bottom: 1px solid var(--rule); color: var(--ink); font-weight: 700;
}
.legal-table td { padding: 10px 12px; border-bottom: 1px solid var(--rule); color: var(--ink-soft); vertical-align: top; }
@media (max-width: 640px) {
  .legal { padding: 40px 0 56px; }
  .legal-summary { padding: 22px 20px; }
}

/* ============================================================
   BLOG
   The hub (/blog/) and the post template (/blog/<slug>.html).

   Two jobs, and they pull in opposite directions:
   - a human has to want to read 1,500 words on a phone, so the article
     column is capped at a real measure and the type is set larger than
     the marketing pages;
   - a retrieval system has to be able to lift a single paragraph out and
     answer with it, so .answer-box, .takeaways and the FAQ are structural
     elements rather than styling flourishes. Every one of them has a
     schema counterpart in the post's JSON-LD.

   Colours are tokens only — the palette block at the top of this file is
   still the single place a colour is authored.
   ============================================================ */

/* ---------- shared: the reading column ---------- */
.post-wrap { width: min(100% - 2 * var(--gutter), 760px); margin: 0 auto; }
@media (max-width: 640px) { .post-wrap { width: min(100% - 40px, 760px); } }

/* ---------- blog hub ---------- */
.blog-hero { padding: 64px 0 30px; background: var(--cream); }
.blog-hero .eyebrow,
.post-eyebrow {
  font-family: var(--sans); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
}
.blog-hero h1 { margin: 12px 0 14px; }
.blog-hero p { color: var(--ink-soft); max-width: 62ch; font-size: 1.05rem; line-height: 1.6; }

.blog-list { padding: 34px 0 72px; background: var(--cream); }
.blog-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.blog-card {
  display: flex; flex-direction: column; background: var(--panel);
  border: 1px solid var(--rule); border-radius: var(--radius-md); overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
}
.blog-card:hover { box-shadow: 0 14px 34px rgb(var(--shadow-cool-rgb) / 0.13); transform: translateY(-2px); }
.blog-card-art { aspect-ratio: 16 / 9; background: var(--cream-2); }
.blog-card-art img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.blog-card-tag {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--mark);
}
.blog-card h2 { font-size: 1.32rem; line-height: 1.25; }
.blog-card h2 a { text-decoration: none; }
.blog-card h2 a:hover { color: var(--btn); }
.blog-card p { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.58; margin: 0; }
.blog-card-meta {
  margin-top: auto; padding-top: 12px; font-family: var(--sans);
  font-size: 0.82rem; color: var(--ink-faint);
}

/* ---------- post: header ---------- */
.post { background: var(--cream); padding: 46px 0 56px; }
.post-head { padding-bottom: 26px; }
.post-head h1 { margin: 14px 0 16px; font-size: clamp(1.9rem, 4vw, 2.9rem); }
.post-lede { font-size: 1.16rem; line-height: 1.62; color: var(--ink-soft); }
.post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule);
  font-family: var(--sans); font-size: 0.86rem; color: var(--ink-faint);
}
.post-meta .post-author { color: var(--ink); font-weight: 600; }
.post-meta .sep { color: var(--rule); }

/* Breadcrumb — visible, and mirrored by BreadcrumbList JSON-LD. */
.breadcrumb { font-family: var(--sans); font-size: 0.82rem; color: var(--ink-faint); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ---------- post: the answer box ----------
   The single highest-value block on the page for answer engines: one
   self-contained, liftable paragraph that answers the title question
   without needing the rest of the article for context. Keep it under
   ~50 words and lead with the direct answer, not a preamble. */
.answer-box {
  margin: 26px 0 8px; padding: 22px 24px;
  background: var(--panel); border: 1px solid var(--rule);
  border-left: 4px solid var(--accent); border-radius: var(--radius-md);
}
.answer-box h2 {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 10px; line-height: 1.2;
}
.answer-box p { font-size: 1.04rem; line-height: 1.62; margin: 0; }

/* ---------- post: takeaways ---------- */
.takeaways {
  margin: 30px 0; padding: 24px 26px;
  background: var(--cream-2); border-radius: var(--radius-md);
}
.takeaways h2 {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 14px; line-height: 1.2;
}
.takeaways ul { display: grid; gap: 10px; }
.takeaways li { position: relative; padding-left: 22px; line-height: 1.55; }
.takeaways li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--dot);
}

/* ---------- post: table of contents ---------- */
.post-toc {
  margin: 30px 0; padding: 20px 24px;
  border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--panel);
}
.post-toc h2 {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 12px; line-height: 1.2;
}
.post-toc ol { list-style: decimal; padding-left: 20px; display: grid; gap: 7px; }
.post-toc li { font-family: var(--sans); font-size: 0.94rem; }
.post-toc a { color: var(--ink-soft); text-decoration: none; }
.post-toc a:hover { color: var(--btn); text-decoration: underline; }

/* ---------- post: body ---------- */
.post-body { padding-bottom: 20px; font-size: 1.06rem; line-height: 1.7; }
.post-body > * + * { margin-top: 1.15em; }
.post-body h2 {
  font-size: clamp(1.45rem, 2.6vw, 1.95rem);
  margin-top: 2em; scroll-margin-top: 90px;
}
.post-body h3 {
  font-family: var(--serif); font-weight: 600; font-size: 1.22rem;
  line-height: 1.3; margin-top: 1.7em; scroll-margin-top: 90px;
}
.post-body p { color: var(--ink-soft); }
.post-body strong { color: var(--ink); font-weight: 700; }
.post-body a { color: var(--btn); text-decoration: underline; text-underline-offset: 3px; }
.post-body ul, .post-body ol { padding-left: 22px; display: grid; gap: 9px; color: var(--ink-soft); }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li { line-height: 1.6; }
.post-body figure { margin: 1.8em 0; }
.post-body figure img { width: 100%; border-radius: var(--radius-md); }
.post-body figcaption {
  margin-top: 10px; font-family: var(--sans); font-size: 0.84rem; color: var(--ink-faint);
}
.post-body blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--ring); color: var(--ink); font-style: italic;
}
.post-body table {
  width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 0.94rem;
}
.post-body thead th {
  text-align: left; padding: 10px 12px; background: var(--cream-2);
  border-bottom: 1px solid var(--rule); color: var(--ink); font-weight: 700;
}
.post-body td { padding: 10px 12px; border-bottom: 1px solid var(--rule); color: var(--ink-soft); vertical-align: top; }
.post-table-scroll { overflow-x: auto; }

/* A short, factual aside. Answer engines quote these well because they are
   self-contained and hedged correctly. */
.post-note {
  padding: 18px 22px; background: var(--cream-2);
  border-radius: var(--radius-md); font-size: 0.98rem; color: var(--ink-soft);
}
.post-note strong { color: var(--ink); }

/* ---------- post: author / E-E-A-T ----------
   Elder care is YMYL territory: Google holds it to a higher bar for
   experience, expertise, authoritativeness and trust. A named author with
   a real bio, a visible review date and honest sourcing is not decoration,
   it is the difference between ranking and not. */
.author-card {
  display: flex; gap: 16px; align-items: flex-start;
  margin: 40px 0 0; padding: 22px 24px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-md);
}
.author-card img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.author-card .author-name { font-family: var(--sans); font-weight: 700; color: var(--ink); }
.author-card .author-role { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-faint); margin-top: 2px; }
.author-card .author-bio { margin-top: 8px; font-size: 0.94rem; line-height: 1.56; color: var(--ink-soft); }

.post-sources { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--rule); }
.post-sources h2 {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px;
}
.post-sources ol { list-style: decimal; padding-left: 20px; display: grid; gap: 8px; }
.post-sources li { font-family: var(--sans); font-size: 0.88rem; color: var(--ink-soft); line-height: 1.5; }
.post-sources a { color: var(--btn); }

.post-disclaimer {
  margin-top: 26px; font-family: var(--sans); font-size: 0.84rem;
  line-height: 1.55; color: var(--ink-faint);
}

/* ---------- post: FAQ ----------
   Reuses the .faq-item component from the marketing pages so the answers
   stay in the DOM (details/summary content is crawled). The visible text
   must match the FAQPage JSON-LD verbatim. */
.post-faq { margin-top: 42px; }
.post-faq > h2 { margin-bottom: 16px; }

/* ---------- post: conversion + related ---------- */
.related { padding: 56px 0 72px; background: var(--cream); }
.related h2 { font-size: 1.5rem; margin-bottom: 20px; }

@media (max-width: 640px) {
  .post { padding-top: 30px; }
  .post-body { font-size: 1.02rem; }
  .author-card { flex-direction: column; }
}

/* Publisher action item left in a draft — [VERIFY] / [SOURCE NEEDED] per
   AI-Blog-SEO-GEO-Instructions.md. Deliberately loud: an unresolved marker must
   be impossible to publish by accident. Every one of these is removed, with the
   claim either sourced or cut, before a post goes live. */
.verify {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  background: var(--badge-1-bg); border: 1px dashed var(--mark);
  font-family: var(--sans); font-size: 0.82rem; font-weight: 600; color: var(--mark);
}

/* ============================================================
   CITATIONS
   Numbered superscripts against the specific claim, and a collapsed
   source list under the FAQ. A long open bibliography makes a consumer
   guide read like a term paper and pushes the CTA below the fold; the
   trust signal survives fine in a <details>, and the links are still in
   the DOM for crawlers either way.
   ============================================================ */
.cite {
  font-family: var(--sans); font-size: 0.62em; font-weight: 600;
  line-height: 0; vertical-align: super; margin-left: 1px;
}
.cite a { color: var(--btn); text-decoration: none; }
.cite a:hover { text-decoration: underline; }
.cite a::before { content: "["; }
.cite a::after  { content: "]"; }

.sources-details {
  margin-top: 38px; border-top: 1px solid var(--rule); padding-top: 20px;
}
.sources-details > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 0.86rem; font-weight: 600; color: var(--ink-soft);
}
.sources-details > summary::-webkit-details-marker { display: none; }
.sources-details > summary::after {
  content: "\25be"; font-size: 0.9em; color: var(--ink-faint); transition: transform .15s ease;
}
.sources-details[open] > summary::after { transform: rotate(180deg); }
.sources-details > summary:hover { color: var(--ink); }
.sources-details ol {
  list-style: decimal; padding-left: 22px; display: grid; gap: 10px; margin-top: 16px;
}
.sources-details li {
  font-family: var(--sans); font-size: 0.86rem; line-height: 1.5; color: var(--ink-soft);
}
.sources-details li a { color: var(--btn); }
.sources-details li:target { background: var(--cream-2); border-radius: 4px; }

.reviewed-note {
  margin-top: 14px; font-family: var(--sans); font-size: 0.8rem;
  line-height: 1.5; color: var(--ink-faint);
}

/* ============================================================
   FURTHER READING
   Contextual links from the marketing pages into the blog. The blog
   already links out to these pages; without a link back, the established
   pages hold all the authority and share none of it with new posts.
   Sits above the closing CTA so it does not compete with it.
   ============================================================ */
.further-reading { padding: 8px 0 44px; background: var(--cream); }
.further-reading .fr-label {
  font-family: var(--sans); font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 14px;
}
.further-reading ul { display: grid; gap: 10px; max-width: 62ch; }
.further-reading li { position: relative; padding-left: 20px; line-height: 1.5; }
.further-reading li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--dot);
}
.further-reading a {
  color: var(--btn); text-decoration: underline; text-underline-offset: 3px;
  font-family: var(--sans); font-size: 0.98rem;
}
.further-reading a:hover { color: var(--btn-hover); }