/* ==========================================================================
   BNDR LifeMatrix - Landing page (BNDR Studio brand look)
   Warm cream canvas, ink-black display type, hot-pink + lime accents,
   translucent glass shapes echoing the bndrllc.com cube. Mobile-first.
   ========================================================================== */

:root {
  --ink: #0d0d0d;
  --ink-soft: #4c4a44;
  --cream: #ece9e2;
  --cream-raised: #f7f5f0;
  --pink: #ff2757;
  --lime: #c8f031;
  --lime-ink: #2c3505;
  --olive: rgba(154, 170, 40, 0.34);
  --magenta: rgba(214, 40, 130, 0.26);
  --frame: rgba(13, 13, 13, 0.08);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* One shared corner radius for every card on the page */
  --card-radius: 1.2rem;
}

html { scroll-behavior: smooth; }
body.landing {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Nunito', system-ui, sans-serif;
  overflow-x: hidden;
}

.landing ::selection { background: rgba(255, 39, 87, 0.25); }

/* ---------- Ambient shapes (the "cube" field) ---------- */
.shape-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.shape {
  position: absolute;
  border-radius: var(--card-radius);
  will-change: transform;
  transform: rotate(var(--rot, 12deg));
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.shape--olive { background: var(--olive); box-shadow: inset 0 0 0 1px rgba(154, 170, 40, 0.25); }
.shape--magenta { background: var(--magenta); box-shadow: inset 0 0 0 1px rgba(214, 40, 130, 0.22); }
.shape--lime { background: rgba(200, 240, 49, 0.35); box-shadow: inset 0 0 0 1px rgba(150, 190, 20, 0.3); }
.shape-1 { width: 280px; height: 280px; top: -80px; right: -60px; --rot: 24deg; }
.shape-2 { width: 190px; height: 190px; top: 42%; left: -80px; --rot: -14deg; }
.shape-3 { width: 150px; height: 150px; top: 68%; right: 6%; --rot: 32deg; }
.shape-4 { width: 110px; height: 110px; top: 22%; left: 12%; --rot: -20deg; }

.landing main, .landing footer { position: relative; z-index: 1; }
/* header must out-stack main, or the fixed nav gets trapped under the hero */
.landing header { position: relative; z-index: 50; }

/* ---------- Grain ---------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Navigation ---------- */
.site-nav {
  position: fixed;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(1080px, calc(100% - 1.5rem));
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  border-radius: 999px;
  background: rgba(6, 7, 11, 0.72);
  border: 1px solid rgba(13, 13, 13, 0.08);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 10px 34px -18px rgba(13, 13, 13, 0.35);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.site-nav.is-scrolled { background: rgba(6, 7, 11, 0.92); box-shadow: 0 14px 40px -18px rgba(13, 13, 13, 0.45); }
.site-nav .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Rubik Moonrocks', cursive;
  font-size: 1.15rem;
  color: var(--ink);
  text-decoration: none;
  min-width: 0;
}
.site-nav .brand .brand-lockup__img { height: 1.6rem; }
.site-nav .links {
  display: none;
  align-items: center;
  gap: 1.4rem;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-nav .links a { color: var(--ink-soft); text-decoration: none; transition: color 0.2s; }
.site-nav .links a:hover { color: var(--pink); }
.site-nav .nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--ink);
  color: var(--cream);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.6rem 1.15rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.2s var(--ease-out), background 0.25s, color 0.25s;
}
.site-nav .nav-cta:hover { background: var(--pink); transform: translateY(-1px); }
.site-nav .menu-btn {
  display: inline-flex;
  border: none;
  background: none;
  padding: 0.4rem;
  color: var(--ink);
}
@media (min-width: 860px) {
  .site-nav .links { display: flex; }
  .site-nav .menu-btn { display: none; }
}
.mobile-menu {
  position: fixed;
  top: 4.6rem;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(1080px, calc(100% - 1.5rem));
  z-index: 49;
  border-radius: var(--card-radius);
  background: rgba(6, 7, 11, 0.97);
  border: 1px solid rgba(13, 13, 13, 0.08);
  box-shadow: 0 18px 50px -20px rgba(13, 13, 13, 0.4);
  padding: 0.75rem;
  display: none;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.3s var(--ease-out);
}
.mobile-menu.is-open { display: flex; opacity: 1; transform: translateX(-50%) translateY(0); }
.mobile-menu a {
  padding: 0.85rem 1rem;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
  border-radius: 0.8rem;
}
.mobile-menu a:hover { background: rgba(13, 13, 13, 0.05); color: var(--pink); }

/* ---------- Hero ---------- */
.hero {
  padding: 7.5rem 1.25rem 3rem;
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}
@media (min-width: 860px) { .hero { padding-top: 9.5rem; } }
.hero .kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--cream-raised);
  border: 1px solid var(--frame);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  margin-bottom: 1.4rem;
}
.hero .kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); }
.hero h1 {
  font-size: clamp(2.4rem, 8.5vw, 4.6rem);
  font-weight: 900;
  font-style: italic;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 1.2rem;
}
.hero h1 .accent { color: var(--pink); }
/* Padding + negative margin give italic overhangs headroom inside the
   overflow mask on ALL four sides - descenders (f, y, comma, period) and
   italic bottom-left overhangs extend below the em box, so the mask needs
   bottom headroom too or glyph bottoms get sheared. Once the reveal has
   finished, .hero.settled releases the mask entirely so no font-rendering
   difference can ever clip a settled glyph. */
.hero h1 .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0.18em 0.12em 0.18em 0.06em;
  margin: -0.18em -0.12em -0.18em -0.06em;
}
.hero.settled h1 .word { overflow: visible; }
.hero h1 .word > span { display: inline-block; transform: translateY(160%); }
.hero.is-ready h1 .word > span { animation: word-rise 0.8s var(--ease-out) forwards; animation-delay: var(--d, 0s); }
@keyframes word-rise { to { transform: translateY(0); } }
.hero .sub {
  max-width: 54ch;
  margin: 0 auto 2rem;
  color: var(--ink-soft);
  font-size: clamp(1rem, 2.6vw, 1.2rem);
  line-height: 1.6;
}
.hero .cta-row {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
}
@media (min-width: 560px) { .hero .cta-row { flex-direction: row; } }
.cta-lime {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--lime);
  color: var(--lime-ink);
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1rem 2rem;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid rgba(44, 53, 5, 0.15);
  box-shadow: 0 10px 30px -10px rgba(160, 200, 20, 0.7);
  transition: transform 0.2s var(--ease-spring), box-shadow 0.25s;
  will-change: transform;
}
.cta-lime:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 38px -10px rgba(160, 200, 20, 0.85); }
.cta-quiet {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-weight: 800;
  font-size: 0.95rem;
  padding: 1rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  border: 1.5px solid rgba(13, 13, 13, 0.25);
  transition: border-color 0.2s, color 0.2s, transform 0.2s var(--ease-out);
}
.cta-quiet:hover { border-color: var(--pink); color: var(--pink); transform: translateY(-1px); }
.hero .trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.hero .trust span { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero .trust svg { width: 0.95rem; height: 0.95rem; color: var(--pink); }

/* ---------- App frame (screenshots) ---------- */
.app-frame {
  max-width: 980px;
  margin: 3rem auto 0;
  border-radius: var(--card-radius);
  background: #101015;
  border: 1px solid rgba(13, 13, 13, 0.35);
  box-shadow:
    0 40px 90px -35px rgba(13, 13, 13, 0.55),
    0 0 0 6px rgba(6, 7, 11, 0.5);
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}
.app-frame .bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.65rem 0.9rem;
  background: #1a1a22;
}
.app-frame .bar i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.app-frame .bar i:nth-child(1) { background: #ff5f57; }
.app-frame .bar i:nth-child(2) { background: #febc2e; }
.app-frame .bar i:nth-child(3) { background: #28c840; }
.app-frame .bar .url {
  flex: 1;
  margin-left: 0.6rem;
  font-size: 0.68rem;
  color: #9aa;
  background: #101018;
  border-radius: 6px;
  padding: 0.28rem 0.7rem;
  text-align: center;
  letter-spacing: 0.04em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.app-frame img { display: block; width: 100%; height: auto; }

/* ---------- Sections ---------- */
.section { max-width: 1080px; margin: 0 auto; padding: 4.5rem 1.25rem 1rem; }
.section .label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--cream-raised);
  border: 1px solid var(--frame);
  border-radius: 6px;
  padding: 0.35rem 0.8rem;
  margin-bottom: 1rem;
}
.section .label .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); }
.section h2 {
  font-size: clamp(1.8rem, 5.5vw, 3rem);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0 0 1rem;
}
.section .lede { color: var(--ink-soft); max-width: 58ch; line-height: 1.65; margin: 0 0 2.4rem; }

/* Feature grid */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
.feature-card {
  background: var(--cream-raised);
  border: 1px solid var(--frame);
  border-radius: var(--card-radius);
  padding: 1.5rem;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease, border-color 0.3s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 39, 87, 0.35);
  box-shadow: 0 20px 45px -22px rgba(13, 13, 13, 0.35);
}
.feature-card .icon-chip {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 39, 87, 0.09);
  color: var(--ink);
  margin-bottom: 1rem;
}
.feature-card .icon-chip svg { width: 24px; height: 24px; }
.feature-card .icon-chip .spark { color: var(--pink); }
.feature-card h3 { font-size: 1.05rem; margin: 0 0 0.4rem; font-weight: 800; }
.feature-card p { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.6; margin: 0; }

/* Deep-dive rows */
.dive {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  align-items: center;
  padding: 2.6rem 0;
}
@media (min-width: 880px) {
  .dive { grid-template-columns: 5fr 6fr; gap: 3rem; }
  .dive.dive--flip .dive-copy { order: 2; }
  .dive.dive--flip .dive-visual { order: 1; }
}
.dive h3 { font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 900; font-style: italic; letter-spacing: -0.02em; margin: 0 0 0.7rem; }
.dive p { color: var(--ink-soft); line-height: 1.65; margin: 0 0 1rem; }
.dive ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.dive li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.95rem; font-weight: 600; }
.dive li svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; margin-top: 0.15rem; color: var(--pink); }
.dive .app-frame { margin: 0; }

/* Privacy statement band */
.privacy-band {
  /* P9: inverted ink slab -> S2 accent glass on the void */
  background: rgba(255, 39, 87, 0.06);
  border: 1px solid rgba(255, 39, 87, 0.25);
  color: var(--ink);
  border-radius: var(--card-radius);
  padding: 2.6rem 1.5rem;
  text-align: center;
  margin-top: 3rem;
}
@media (min-width: 720px) { .privacy-band { padding: 3.5rem 3rem; } }
.privacy-band h2 { color: var(--ink); }
.privacy-band h2 .lime { color: var(--lime); }
.privacy-band p { color: rgba(236, 233, 226, 0.75); max-width: 56ch; margin: 0 auto 0.4rem; line-height: 1.65; }
.privacy-band .mini {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.6rem;
  margin-top: 1.6rem;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lime);
}

/* Pricing */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  max-width: 780px;
  margin: 0 auto;
}
@media (min-width: 720px) { .pricing-grid { grid-template-columns: 1fr 1.15fr; align-items: stretch; } }
.price-card {
  background: var(--cream-raised);
  border: 1px solid var(--frame);
  border-radius: var(--card-radius);
  padding: 1.9rem 1.6rem;
  display: flex;
  flex-direction: column;
}
.price-card.featured {
  background: #101015;
  /* P9: card text was var(--cream) (now void-dark) on a dark card */
  color: var(--ink);
  border: 1px solid rgba(255, 39, 87, 0.28);
  box-shadow: 0 30px 70px -30px rgba(13, 13, 13, 0.6);
  position: relative;
  overflow: hidden;
}
.price-card.featured::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -30%;
  width: 70%;
  height: 90%;
  background: radial-gradient(circle, rgba(255, 39, 87, 0.28), transparent 65%);
  pointer-events: none;
}
.price-card .plan { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pink); margin-bottom: 0.6rem; }
.price-card .amount { font-size: 2.7rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
.price-card .amount .was { font-size: 1.1rem; font-weight: 700; color: inherit; opacity: 0.45; text-decoration: line-through; margin-left: 0.5rem; }
.price-card .per { font-size: 0.85rem; opacity: 0.65; margin: 0.35rem 0 1.2rem; }
.price-card ul { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: 0.55rem; flex: 1; }
.price-card li { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.92rem; }
.price-card li svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.18rem; color: var(--pink); }
.price-card.featured li svg { color: var(--lime); }
.price-note { text-align: center; font-size: 0.82rem; color: var(--ink-soft); margin-top: 1.1rem; }
.price-note a { color: var(--pink); }

/* FAQ */
.faq { max-width: 760px; margin: 0 auto; }
.faq details {
  background: var(--cream-raised);
  border: 1px solid var(--frame);
  border-radius: var(--card-radius);
  padding: 1.1rem 1.3rem;
  margin-bottom: 0.7rem;
  transition: border-color 0.25s ease;
}
.faq details[open] { border-color: rgba(255, 39, 87, 0.4); }
.faq summary {
  font-weight: 800;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--pink);
  transition: transform 0.25s var(--ease-out);
  flex-shrink: 0;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink-soft); line-height: 1.65; margin: 0.8rem 0 0; font-size: 0.95rem; }
.faq details p a { color: var(--pink); }

/* Final CTA */
.final-cta { text-align: center; padding: 4.5rem 1.25rem 5rem; }
.final-cta h2 { font-size: clamp(2rem, 6.5vw, 3.4rem); font-weight: 900; font-style: italic; letter-spacing: -0.03em; margin: 0 0 1rem; }
.final-cta p { color: var(--ink-soft); margin: 0 0 2rem; }

/* Footer */
.site-footer {
  /* P9: inverted ink slab -> void glass band on the aurora */
  background: rgba(6, 7, 11, 0.85);
  border-top: 1px solid rgba(255, 39, 87, 0.22);
  color: rgba(236, 233, 226, 0.7);
  padding: 3rem 1.25rem 2.2rem;
}
.site-footer .inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .site-footer .inner { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer .brand-blurb .brand {
  font-family: 'Rubik Moonrocks', cursive;
  font-size: 1.3rem;
  color: var(--cream);
  text-decoration: none;
  display: inline-flex;
}
.site-footer p { font-size: 0.85rem; line-height: 1.6; margin: 0.8rem 0 0; }
.site-footer h4 {
  color: var(--cream);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 0.9rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.site-footer a { color: inherit; text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
.site-footer a:hover { color: var(--lime); }
.site-footer .legal-line {
  max-width: 1080px;
  margin: 2.4rem auto 0;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(236, 233, 226, 0.12);
  font-size: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); transition-delay: var(--rd, 0s); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero h1 .word { overflow: visible; }
  .hero h1 .word > span { transform: none; animation: none; }
  .shape { display: none; }
}

/* ---------- Mobile cohesion pass (phones only; desktop untouched) ---------- */
@media (max-width: 767px) {
  /* Tighter hero stack: the preview frame starts on the first screen instead
     of below the fold, so nothing reads as cut off. */
  .hero { padding-top: 5.5rem; }
  .hero .kicker { margin-bottom: 1rem; }
  .hero h1 { margin-bottom: 1rem; }
  .hero .sub { margin-bottom: 1.75rem; }
  .hero .cta-row { margin-bottom: 1rem; }

  /* WEBFIX3 (1): the synthetic-italic shear (only normal Nunito faces ship,
     so engines slant glyphs themselves) pushes word-final ink past each
     word-mask box. The previous fix used negative inset() - Blink honors
     it, WebKit CLAMPS negative insets to 0, so iPhones kept clipping.
     polygon() accepts out-of-box coordinates in every engine: clip ONLY
     along the bottom reveal line; top/left/right sit 2em outside the box,
     unreachable by any shear. If an engine rejects the clip-path entirely
     the words simply rise unmasked - degraded, never clipped. */
  .hero h1 .word {
    overflow: visible;
    clip-path: polygon(-2em -2em, calc(100% + 2em) -2em, calc(100% + 2em) 100%, -2em 100%);
  }
  .hero.settled h1 .word { clip-path: none; }

  /* WEBFIX2 (3): lift the aurora depth rows a touch on phones so card and
     screenshot edges separate from the void. Desktop keeps its values.
     body.landing: must outrank the later .landing block (source order). */
  body.landing {
    --aurora-near: 52 13 37;
    --aurora-mid: 36 10 28;
    --aurora-far: 26 8 22;
  }

  /* WEBFIX2 (4): the hero preview sits inside the page gutter like the tour
     frames below it - a contained, rounded card on every viewport. */
  .app-frame {
    margin-top: 2rem;
    box-shadow: 0 24px 55px -28px rgba(13, 13, 13, 0.5);
  }
  /* WEBFIX3 (frame-bottom): shot-home.png's own bottom edge slices through
     the Quick Add button tops (baked into the 1440x900 capture). On phones,
     end the visible crop at image row 810 - the measured quiet gap between
     the appointments card and the Quick Add heading (quiet band 798-822).
     object-position keeps the top; desktop is untouched. */
  #hero-frame img {
    aspect-ratio: 1440 / 810;
    object-fit: cover;
    object-position: top;
  }
  /* One shared vertical rhythm for every card stack on the page */
  .feature-grid, .pricing-grid { gap: 1rem; }
  .faq details { margin-bottom: 1rem; }
  .dive { gap: 1.25rem; padding: 2rem 0; }
  .privacy-band { margin-top: 2rem; }
}


/* ===== P9: underwater void-black depth (reference = lighting only) =====
   The landing joins the app's S1 aurora field. The palette flips through
   the existing tokens (surface<->text pairs invert together, so contrast
   is preserved by construction); the cream cube field retires visually -
   markup kept per R3. Copy and layout untouched (P11 owns the rewrite). */
.landing {
  --ink: #f4f6f8;
  --ink-soft: rgba(244, 246, 248, 0.62);
  --cream: #06070b;
  --cream-raised: #0b0d14;
  --olive: rgba(159, 90, 255, 0.10); /* WEBFIX: violet undertone */
  --magenta: rgba(255, 39, 87, 0.14);
  --frame: rgba(255, 39, 87, 0.22);
  /* Pin the S1 depth tokens: the landing is void-black in every OS mode. */
  --color-primary: 3 4 8;
  --color-secondary: 9 11 17;
  --aurora-near: 38 9 27; /* WEBFIX: wine-plum, was teal-green */
  --aurora-mid: 26 7 21;
  --aurora-far: 18 5 16;
  --white-text: 235 238 245;
}
.landing .shape-field { display: none; }

/* WEBFIX2 (3a): the page scrollbar and shared chrome (consent button, focus
   rings) live on <html>, OUTSIDE body.landing - so they still resolved the
   default teal accent. Pin the brand accent at the root of every page that
   loads this sheet; loads after base.css, so the html[data-theme] pair
   outranks the base theme blocks. */
html, html[data-theme] {
  --color-accent: 255 39 87;
  --color-accent-hover: 255 82 120;
}

/* WEBFIX3 (scrollbar): the thumb color must not depend on custom-property
   resolution - engines disagree about which element the root scrollbar
   pseudo resolves var() against, so the teal default could still bleed
   through off-Blink. Literal brand magenta via BOTH mechanisms: the
   standard property (WebKit/modern Chrome document scrollbar) and the
   legacy webkit pseudos. Landing sheet only - the app keeps its themes. */
html { scrollbar-color: rgba(255, 39, 87, 0.55) transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 39, 87, 0.4); }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 39, 87, 0.65); }