/* ============================================================================
   OpenAnimal landing page: page styles.

   Every colour, radius, spacing step, font and motion value below resolves to
   an Open Design System token from ds/ovoa-tokens.css. Raw literals are a
   design-system violation here (see _adherence.oxlintrc.json in the DS export):
   if a value is missing, add it to the DS rather than hardcoding it.

   The page is scoped [data-brand="openanimal"], which selects the consumer
   brand assignment: red primary action, apricot atmospheres, 44px controls,
   15px body, pill primary CTA.
   ========================================================================= */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: var(--body-size);
  line-height: var(--body-line);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--motion-micro) var(--motion-ease);
}
a:hover { color: var(--color-action-primary); }

::selection { background: var(--color-action-primary); color: var(--white); }

img { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* ---------- Layout primitives ---------------------------------------- */

.wrap { max-width: 1240px; width: 100%; margin: 0 auto; padding-inline: var(--sp-6); }
.wrap-narrow { max-width: 960px; margin: 0 auto; padding-inline: var(--sp-6); }
.wrap-tight { max-width: 820px; margin: 0 auto; padding-inline: var(--sp-6); }

.section { padding-block: var(--sp-8); }
.section-paper { background: var(--color-canvas); }
.center { text-align: center; }

/* ---------- Type ------------------------------------------------------ */

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 var(--sp-4);
}
.eyebrow-red { color: var(--color-action-primary); }
.eyebrow-muted { color: var(--color-text-secondary); }
.eyebrow-mineral { color: var(--blue-700); }

.display,
.h1, .h2 {
  font-family: var(--font-display);
  font-weight: 300;
  margin: 0;
  text-wrap: balance;
}
.h1 { font-size: clamp(44px, 5vw, 72px); line-height: .98; letter-spacing: -.04em; }
.h2 { font-size: clamp(34px, 4vw, 52px); line-height: 1.02; letter-spacing: -.035em; }
.h2-lg { font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -.04em; }

.h3 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -.01em;
  margin: 0 0 var(--sp-2);
}

.lede {
  font-size: 19px;
  line-height: 29px;
  color: var(--color-text-secondary);
  margin: 0;
}
.lede-invert { color: rgba(255, 255, 255, .85); }

.mono { font-family: var(--font-data); }

/* ---------- Buttons --------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-height);
  padding-inline: var(--sp-5);
  border-radius: var(--control-radius);
  font-family: var(--font-ui);
  font-size: var(--button-size);
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background var(--motion-micro) var(--motion-ease),
              color var(--motion-micro) var(--motion-ease),
              border-color var(--motion-micro) var(--motion-ease);
}
.btn-primary { background: var(--color-action-primary); color: var(--white); }
.btn-primary:hover { background: var(--color-action-primary-hover); color: var(--white); }

.btn-secondary {
  background: var(--color-action-secondary);
  color: var(--color-text-primary);
  border: var(--hairline);
}
.btn-secondary:hover { border-color: var(--color-border-strong); color: var(--color-text-primary); }

/* On dark/photographic panels the secondary button needs its own contrast.
   ENG-1410: a light translucent fill under a light border disappears wherever
   the artwork behind it is light: both edges of the boundary go pale at once.
   An ink fill inverts that: the white border always contrasts against the
   button's own interior, and the interior always contrasts against light
   artwork. The button is then legible over any part of the illustration
   instead of relying on the crop putting it somewhere dark. */
.btn-on-dark {
  background: rgba(20, 22, 26, .38);
  border: 1px solid rgba(255, 255, 255, .72);
  color: var(--white);
}
.btn-on-dark:hover {
  background: rgba(20, 22, 26, .56);
  border-color: var(--white);
  color: var(--white);
}

.btn-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* ---------- Brand lockup ----------------------------------------------
   Brand brief §02: symbol left, wordmark in Bricolage Grotesque SemiBold,
   gap = 40% of symbol width, baseline-aligned.

   The mark is 240x144 (5:3), so symbol width = 1.667 x --mark-h and the gap
   works out at 0.667 x --mark-h. That gap is a brand-construction ratio, not
   layout spacing, so it is deliberately NOT snapped to the --sp-* scale:
   it has to track the mark size to stay correct at every placement.

   Interim: the brief lists Bricolage Grotesque as a *lead candidate* and says
   the cut wordmark SVGs remain the deliverable: "once produced, never
   re-typeset a name." Replace this with the SVG lockup when it exists. ---- */

.brandlock {
  display: inline-flex;
  align-items: baseline;
  gap: calc(var(--mark-h, 24px) * .667);
  text-decoration: none;
}
.brandlock img {
  height: var(--mark-h, 24px);
  width: auto;
  display: block;
  /* Optically seat the mark on the wordmark baseline. */
  align-self: center;
  position: relative;
  top: calc(var(--mark-h, 24px) * .06);
}
.brandlock-word {
  font-family: 'Bricolage Grotesque', var(--font-ui);
  font-weight: 600;
  font-size: calc(var(--mark-h, 24px) * .82);
  letter-spacing: -.015em;
  line-height: 1;
  color: var(--color-text-primary);
  white-space: nowrap;
}
.brandlock-reversed .brandlock-word { color: var(--paper-100); }
.brandlock:hover .brandlock-word { color: var(--color-action-primary); }
.brandlock-reversed:hover .brandlock-word { color: var(--white); }

/* ---------- Floating nav --------------------------------------------- */

.floatnav {
  position: fixed;
  top: var(--sp-4);
  left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity var(--motion-standard) var(--motion-ease),
              transform var(--motion-standard) var(--motion-ease);
}
.floatnav[data-visible="true"] { opacity: 1; transform: translateY(0); }
.floatnav[data-visible="true"] .floatnav-inner { pointer-events: auto; }

.floatnav-inner {
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  background: rgba(252, 251, 248, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: var(--hairline);
  border-radius: var(--radius-pill);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5);
  box-shadow: 0 12px 32px rgba(35, 35, 35, .14);
}
.floatnav-links { display: flex; gap: var(--sp-5); font-size: 14px; font-weight: 500; }
/* The DS fixes OpenAnimal controls at 44px; the floating pill is no exception. */
.floatnav .btn { height: var(--control-height); }

.mobile-menu, .cta-label-short { display: none; }
.mobile-menu summary {
  width: var(--control-height); height: var(--control-height);
  border-radius: 50%; cursor: pointer; list-style: none;
  display: grid; place-content: center; gap: 4px;
  border: var(--hairline); background: rgba(252, 251, 248, .9);
}
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary span { width: 17px; height: 1.5px; border-radius: 2px; background: var(--ink-900); display: block; }
.mobile-menu[open] { z-index: 40; }
.mobile-menu-panel {
  position: absolute; top: calc(100% + 10px); right: 0;
  z-index: 1;
  width: 210px; padding: var(--sp-2);
  background: var(--paper-000); color: var(--ink-900);
  border: var(--hairline); border-radius: var(--radius-module);
  box-shadow: 0 18px 45px rgba(20, 22, 26, .2);
  display: grid;
  overflow: hidden;
}
.mobile-menu-panel a {
  color: var(--ink-900) !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  min-height: var(--control-height);
  padding: var(--sp-3);
  display: flex;
  align-items: center;
}
.mobile-menu-panel a + a { border-top: var(--hairline); }
.mobile-menu-panel a:hover { background: var(--paper-100); color: var(--color-action-primary) !important; }

/* ---------- Hero ------------------------------------------------------ */

.hero {
  position: relative;
  min-height: 100vh;
  background: var(--ink-900);
  color: var(--white);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
}
/* The vertical wash seats the nav at the top and the stats rail at the bottom,
   and stays clear through the middle so the artwork reads. The 76% stop is what
   the stats rail sits on: it crosses the rug and the greyhound at every width,
   so it needs a bed of its own rather than the tail of the bottom fade. */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(20, 22, 26, .52) 0%,
    rgba(20, 22, 26, .26) 22%,
    rgba(20, 22, 26, 0) 46%,
    rgba(20, 22, 26, 0) 58%,
    rgba(20, 22, 26, .42) 76%,
    rgba(20, 22, 26, .7) 100%);
}
/* Copy-column wash, a second layer over the vertical one: same ink, so the two
   composite to the same result in either order. Zero on desktop, where the
   artwork's own plain wall already sits behind the copy; from tablet down it
   guarantees the headline a legible bed whatever the cover-crop exposes
   (ENG-1347). Driven by a custom property so the breakpoints below set one
   value instead of restating the whole gradient. */
.hero-scrim::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(20, 22, 26, var(--hero-wash-left, 0)) 0%,
    rgba(20, 22, 26, 0) 72%);
}

.hero-nav {
  position: relative; z-index: 30;
  max-width: 1240px; width: 100%; margin: 0 auto;
  padding: var(--sp-5) var(--sp-6);
  display: flex; align-items: center; gap: var(--sp-6);
}
.hero-nav-links { display: flex; gap: var(--sp-5); font-size: 15px; font-weight: 500; }
.hero-nav-links a,
.hero-nav-actions a:not(.btn) { color: var(--paper-100); }
.hero-nav-links a:hover,
.hero-nav-actions a:not(.btn):hover { color: var(--white); }
.hero-nav-actions {
  margin-left: auto;
  display: flex; align-items: center; gap: var(--sp-4);
  font-size: 15px; font-weight: 500;
}

.hero-body {
  position: relative; z-index: 20; flex: 1;
  max-width: 1240px; width: 100%; margin: 0 auto;
  padding: var(--sp-7) var(--sp-6);
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--sp-7);
}
/* ENG-1347/ENG-1410 established that the artwork's near-white "Bella" card
   always lands just right of viewport centre. Above 1200px nothing bounded the
   copy against it: `.hero-body` is capped at 1240 and centred, so the column's
   left edge sits at W/2 - 588 (620 half-cap, minus the 32px --sp-6 pad), and a
   640px column therefore reached W/2 + 52 — about 60px INTO the card at every
   width. It only became visible when the headline grew long enough to fill the
   column; the previous one wrapped shorter and never touched it.

   548px is where the right edge meets the card with 40px to spare in the worst
   case (a tall viewport, where the crop overflow that pushes the card right
   vanishes). 540 keeps a little more. The narrower tiers below still win. */
.hero-copy { max-width: 540px; }
.hero-copy .eyebrow { color: var(--apricot-200); }
.hero-copy .h1 { color: var(--white); margin-bottom: var(--sp-5); }
.hero-copy p {
  font-size: 19px; line-height: 29px;
  color: rgba(255, 255, 255, .88);
  margin: 0 0 28px; max-width: 520px;
  /* The second sentence is a hair too long for the column, so it wraps and its
     last word was being left alone on a line. `pretty` asks the browser to even
     out the final lines instead of orphaning one word. */
  text-wrap: pretty;
}
/* The subheadline breaks after the first sentence on wide viewports, where the
   two lines balance. Narrow ones hide the break so the copy reflows to the
   column width instead of breaking twice. There is a real space before the <br>
   in the markup: it is collapsed at the end of a wrapped line, and it is what
   separates the two sentences once the break is hidden. */
.hero-sub-break { display: inline; }
/* "Free to use" sits under the buttons and is not body copy, so it opts out of
   the `.hero-copy p` size and its 28px trailing margin. */
.hero-copy .hero-free {
  margin: 14px 0 0;
  font-size: 14px; line-height: 20px; font-weight: 600;
  letter-spacing: .01em;
  color: rgba(247, 246, 243, .82);
}

.hero-stats {
  display: flex; gap: var(--sp-7); flex-wrap: wrap;
  border-top: 1px solid rgba(247, 246, 243, .32);
  padding-top: var(--sp-5);
}
.hero-stat { min-width: 180px; }
.hero-stat-label {
  font-size: 16px; font-weight: 600; letter-spacing: -.01em;
  color: var(--white); margin-bottom: var(--sp-1);
}
.hero-stat-value { font-size: 14px; line-height: 21px; color: rgba(247, 246, 243, .75); }

/* ---------- Vet credibility strip ------------------------------------ */

.vets { background: var(--color-canvas); padding: var(--sp-8) var(--sp-6) var(--sp-7); }
.vets-faces { display: flex; justify-content: center; margin-bottom: var(--sp-5); }
.vets-faces img {
  width: 60px; height: 60px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--paper-100); display: block;
}
.vets-faces img + img { margin-left: -14px; }
.vets h2 {
  font-family: var(--font-ui); font-weight: 600;
  font-size: 24px; line-height: 30px; letter-spacing: -.015em;
  margin: 0 0 36px;
}
.vets-logos {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--sp-5) var(--sp-7);
}
.vets-logos img { height: 52px; width: auto; filter: grayscale(1); opacity: .5; }

/* ---------- How it works --------------------------------------------- */

.how { background: var(--color-canvas); padding: var(--sp-7) var(--sp-6) 96px; }
.how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.how-media {
  border-radius: var(--radius-card); overflow: hidden;
  aspect-ratio: 3 / 4; margin-bottom: var(--sp-4);
  background: var(--apricot-200); border: var(--hairline);
}
.how-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.how-step { color: var(--color-action-primary); margin-bottom: var(--sp-2); }
.how p { font-size: 15px; line-height: 23px; color: var(--color-text-secondary); margin: 0; }

/* ---------- Feature tabs (full-bleed photo panel) -------------------- */

.feature {
  position: relative; min-height: 100vh;
  background: var(--ink-900); color: var(--white); overflow: hidden;
}
.feature-bg { position: absolute; inset: 0; z-index: 0; }
.feature-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.feature-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(20, 22, 26, .5) 0%,
    rgba(20, 22, 26, .12) 30%,
    rgba(20, 22, 26, .2) 62%,
    rgba(20, 22, 26, .82) 100%);
}
.feature-tabs { position: absolute; top: 0; left: 0; right: 0; z-index: 3; pointer-events: none; }
.feature-tabs-inner {
  max-width: 1240px; margin: 0 auto; padding: 44px var(--sp-6) 0;
}
.feature-tablist {
  display: inline-flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.feature-tab {
  pointer-events: auto;
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--font-ui); font-size: 16px; font-weight: 500;
  color: rgba(255, 255, 255, .55);
  display: flex; align-items: center; gap: 14px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
  transition: color var(--motion-micro) var(--motion-ease);
}
.feature-tab[aria-selected="true"] { color: var(--white); font-weight: 700; }
.feature-tab-n { font-size: 11px; font-weight: 600; letter-spacing: .12em; opacity: .7; }

.feature-copy {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  max-width: 1240px; margin: 0 auto; padding: 0 var(--sp-6) var(--sp-8);
}
.feature-copy-inner { max-width: 640px; }
.feature-copy .h2 { margin-bottom: var(--sp-4); }

/* ---------- Longevity planner ---------------------------------------- */

.planner {
  background: linear-gradient(180deg,
    var(--color-atmosphere-top) 0%,
    var(--color-atmosphere-top) 70%,
    var(--color-atmosphere-middle) 100%);
  padding: 88px var(--sp-6) 96px;
}
.planner-head { text-align: center; max-width: 760px; margin: 0 auto 52px; }
.planner-head .h2-lg { margin-bottom: var(--sp-5); }
.planner-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: var(--sp-5); align-items: start;
}
.planner-controls { display: flex; flex-direction: column; gap: var(--sp-3); }

.ln-item {
  display: flex; align-items: center; gap: var(--sp-4); text-align: left;
  background: rgba(252, 251, 248, .45);
  border: var(--hairline);
  border-radius: var(--radius-module);
  padding: var(--sp-4) 18px; cursor: pointer;
  font-family: var(--font-ui);
  transition: background var(--motion-micro) var(--motion-ease),
              border-color var(--motion-micro) var(--motion-ease);
}
.ln-item[aria-pressed="true"] {
  background: var(--color-surface-raised);
  border-color: rgba(70, 112, 92, .55);
}
.ln-dotwrap {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--paper-100);
  border: 1px solid rgba(35, 35, 35, .14);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ln-dot { width: 12px; height: 12px; border-radius: 50%; display: block; }
.ln-text { flex: 1; min-width: 0; }
.ln-title {
  display: block; font-size: 16px; font-weight: 600; line-height: 22px;
  color: var(--color-text-primary); margin-bottom: 3px;
}
.ln-plus {
  font-family: var(--font-data); font-size: 13px; font-weight: 600;
  color: var(--clinical-stable);
}
.ln-desc { display: block; font-size: 13px; line-height: 19px; color: var(--color-text-secondary); }
.ln-check {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  background: transparent; border: 1px solid rgba(35, 35, 35, .3);
  color: var(--white);
  transition: background var(--motion-micro) var(--motion-ease),
              border-color var(--motion-micro) var(--motion-ease);
}
.ln-item[aria-pressed="true"] .ln-check {
  background: var(--clinical-stable); border-color: var(--clinical-stable);
}

.ln-card {
  background: var(--color-surface-raised);
  border: var(--hairline);
  border-radius: var(--radius-module);
  padding: 18px var(--sp-5);
}
.ln-card-wide { padding: var(--sp-5) 22px; }
.ln-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.ln-card-head span:first-child { font-size: 16px; font-weight: 600; }
.ln-pill {
  font-family: var(--font-data); font-size: 13px; font-weight: 600;
  background: var(--paper-100); border: var(--hairline);
  border-radius: var(--radius-pill); padding: 6px 14px;
}
.ln-range { width: 100%; accent-color: var(--color-action-primary); height: 6px; cursor: pointer; }
.ln-range-scale {
  display: flex; justify-content: space-between;
  font-size: 13px; color: var(--color-text-secondary); margin-top: var(--sp-2);
}
.ln-ask-q { font-size: 16px; font-weight: 600; line-height: 22px; margin-bottom: var(--sp-2); }
.ln-ask-a { font-size: 14px; line-height: 21px; color: var(--color-text-secondary); margin: 0; }

.planner-chart {
  position: relative;
  background: var(--color-surface-raised);
  border: var(--hairline);
  border-radius: var(--radius-shell);
  padding: 28px 30px 22px;
}
.planner-total { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: 14px; }
.planner-years { display: flex; align-items: baseline; gap: 6px; }
.planner-years-n {
  font-family: var(--font-data); font-size: 52px; font-weight: 600;
  line-height: 1; color: var(--clinical-stable);
}
.planner-years-u { font-family: var(--font-data); font-size: 18px; font-weight: 600; color: var(--clinical-stable); }
.planner-delta {
  font-family: var(--font-data); font-size: 13px; font-weight: 600;
  color: var(--clinical-stable);
  background: rgba(70, 112, 92, .1);
  border: 1px solid rgba(70, 112, 92, .4);
  border-radius: var(--radius-pill); padding: var(--sp-2) var(--sp-4);
}
.planner-legend {
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  margin-top: var(--sp-2); padding-left: 6px;
}
.planner-legend span { display: flex; align-items: center; gap: var(--sp-2); font-size: 14px; }
.planner-legend-plan { color: rgba(35, 35, 35, .75); }
.planner-legend-plan i { width: 26px; height: 4px; border-radius: 2px; background: var(--clinical-stable); display: inline-block; }
.planner-legend-none { color: var(--color-text-secondary); }
.planner-legend-none i { width: 26px; height: 0; border-top: 3px dashed rgba(35, 35, 35, .3); display: inline-block; }
.planner-note { margin-left: auto; font-size: 12px; color: rgba(35, 35, 35, .45); }

/* ---------- Ask OpenAnimal (interactive demo) ------------------------ */

.ask {
  background: linear-gradient(180deg, var(--blue-100) 0%, var(--blue-200) 100%);
  overflow: hidden;
}
.ask-inner { max-width: 1240px; margin: 0 auto; padding: 88px var(--sp-6) 96px; }
.ask-head { max-width: 720px; margin: 0 0 var(--sp-7); }
.ask-head .h2 { font-size: clamp(38px, 4.5vw, 58px); line-height: 1; margin-bottom: var(--sp-5); }
.ask-head .lede { margin-bottom: 28px; max-width: 560px; }

.ask-demo {
  background: var(--color-surface-raised);
  border: var(--hairline);
  border-radius: var(--radius-shell);
  padding: 28px 30px;
  max-width: 1000px; margin: 0 auto;
  box-shadow: 0 30px 60px rgba(35, 35, 35, .16);
}
.ask-demo-label { margin-bottom: var(--sp-3); }
.ask-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.ask-chip {
  cursor: pointer;
  font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  background: transparent; color: var(--color-text-primary);
  border: var(--hairline); border-radius: var(--radius-pill);
  padding: 9px 16px;
  transition: background var(--motion-micro) var(--motion-ease),
              color var(--motion-micro) var(--motion-ease),
              border-color var(--motion-micro) var(--motion-ease);
}
.ask-chip:hover { border-color: var(--color-border-strong); }
.ask-chip[aria-pressed="true"] {
  background: var(--color-action-primary);
  border-color: var(--color-action-primary);
  color: var(--white);
}
.ask-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.ask-answer {
  background: var(--paper-100); border: var(--hairline);
  border-radius: var(--radius-module); padding: var(--sp-5);
}
.ask-q { font-size: 16px; font-weight: 600; line-height: 22px; margin: 0 0 var(--sp-3); }
.ask-a { font-size: 15px; line-height: 23px; color: var(--color-text-primary); margin: 0 0 var(--sp-4); }
.ask-tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-data); font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  border-radius: var(--radius-pill); padding: 6px 12px;
}
.ask-triage { display: flex; flex-direction: column; gap: var(--sp-2); }
.ask-level {
  display: flex; gap: var(--sp-3); align-items: center;
  border-radius: var(--radius-card); padding: var(--sp-3);
  background: var(--paper-100); border: var(--hairline);
  transition: background var(--motion-micro) var(--motion-ease),
              border-color var(--motion-micro) var(--motion-ease);
}
.ask-level-glyph {
  width: 30px; height: 30px; flex: none;
  border-radius: var(--radius-control);
  display: flex; align-items: center; justify-content: center;
  /* Neutral well for the inactive state. The DS has no neutral-tint token, so
     this is an ink tint in the same style as the DS's own hairline rgba(). */
  background: rgba(35, 35, 35, .06);
}
/* DS iconography: round dot = home, cut diamond = clinic, triangle = critical. */
.glyph-home { width: 12px; height: 12px; border-radius: 50%; background: rgba(35, 35, 35, .35); display: block; }
.glyph-clinic { width: 12px; height: 12px; background: rgba(35, 35, 35, .35); transform: rotate(45deg); display: block; }
.glyph-critical {
  width: 0; height: 0; display: block;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-bottom: 12px solid rgba(35, 35, 35, .35);
}
.ask-level-title { font-weight: 700; font-size: 14px; color: var(--color-text-secondary); }
.ask-level-sub { font-size: 12px; margin-top: 1px; color: var(--color-text-secondary); }
.ask-level-flag {
  font-family: var(--font-data); font-size: 9px; font-weight: 700; letter-spacing: .05em;
  color: var(--white); border-radius: var(--radius-pill); padding: 2px 7px;
}
.ask-level-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

.ask-level[data-on="true"] .ask-level-title { color: var(--color-text-primary); }
.ask-disclaimer {
  font-size: 12px; color: rgba(35, 35, 35, .45);
  margin: var(--sp-4) 0 0;
}

/* ---------- Universal record ----------------------------------------- */

.record {
  background: linear-gradient(180deg,
    var(--color-atmosphere-top) 0%,
    var(--color-atmosphere-middle) 62%,
    var(--color-atmosphere-bottom) 100%);
  padding: 88px var(--sp-6) 0;
  overflow: hidden;
}
.record-shot { max-width: 1240px; margin: 52px auto 0; }
.record-shot img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-shell) var(--radius-shell) 0 0;
  border: var(--hairline); border-bottom: none;
}

/* ---------- Tools ----------------------------------------------------- */

.tools { background: var(--color-canvas); padding: 96px var(--sp-6); }
.tools-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.tools-head .h2 { margin-bottom: var(--sp-4); }
.tools-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-6); }
/* One early-access button for the whole tool set. It replaced a "Learn more"
   link on every card, which all pointed at the same signup anchor. */
.tools-cta { text-align: center; margin-top: var(--sp-2); }
.tool {
  background: var(--color-surface-raised); border: var(--hairline);
  border-radius: var(--radius-card); padding: 22px;
  display: flex; flex-direction: column;
}
.tool-icon {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-4);
}
.tool-icon i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.tool h3 { font-family: var(--font-ui); font-weight: 600; font-size: 16px; line-height: 22px; margin: 0 0 var(--sp-2); }
.tool p { font-size: 14px; line-height: 21px; color: var(--color-text-secondary); margin: 0 0 18px; }
.tool a { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--color-action-primary); }

/* Life stages + healthspan snapshot */
.stages { border: var(--hairline); border-radius: var(--radius-shell); overflow: hidden; background: var(--color-surface-raised); }
.stages-inner { padding: var(--sp-6); }
.stages-art { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); align-items: end; margin-bottom: var(--sp-1); }
.stages-art div { display: flex; align-items: flex-end; justify-content: center; }
.stages-art img { width: 140px; height: auto; display: block; }
.stages-line { position: relative; height: 24px; margin: 0 0 var(--sp-5); }
.stages-line-rule { position: absolute; left: 4%; right: 4%; top: 50%; height: 2px; background: rgba(35, 35, 35, .18); }
.stages-line-dots { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; align-items: center; }
.stages-line-dots span {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--color-action-primary);
  border: 2px solid var(--paper-000); display: block;
}
.stages-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.stage-card {
  background: var(--paper-100); border: var(--hairline);
  border-radius: var(--radius-card); padding: var(--sp-4) 18px; text-align: center;
}
.stage-card .eyebrow { margin-bottom: 6px; }
.stage-card-title { font-weight: 600; font-size: 16px; line-height: 22px; margin-bottom: 6px; }
.stage-card p { font-size: 13px; line-height: 19px; color: var(--color-text-secondary); margin: 0; }

.snapshot {
  background: var(--paper-100); border: var(--hairline);
  border-radius: var(--radius-module); padding: var(--sp-5) 28px; margin-top: var(--sp-5);
  display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center;
}
.snapshot-ring { text-align: center; }
.snapshot-ring .eyebrow { color: var(--clinical-stable); margin: var(--sp-1) 0 0; }
.snapshot-head { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.snapshot-head-title { font-weight: 600; font-size: 20px; line-height: 26px; }
.snapshot-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.metric {
  border: var(--hairline); border-radius: var(--radius-control);
  padding: 14px var(--sp-4); background: var(--color-surface-raised);
}
.metric-label { font-size: 13px; font-weight: 600; margin-bottom: var(--sp-3); }
.metric-value { font-size: 13px; font-weight: 600; margin-top: var(--sp-2); }
.metric-stable { color: var(--clinical-stable); }
.metric-watch { color: var(--clinical-warning-text); }
.metric-bars { display: flex; gap: 6px; height: 20px; align-items: stretch; }
.metric-bars i { flex: 1; border-radius: var(--sp-1); background: rgba(70, 112, 92, .3); }
.metric-bars i.on { background: var(--clinical-stable); }
.metric-bars i.mid { background: rgba(70, 112, 92, .5); }
.metric-dot-row { display: flex; align-items: center; gap: var(--sp-2); }
.metric-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--clinical-warning-accent); flex-shrink: 0; }
.metric-dot-label { font-size: 13px; color: var(--color-text-secondary); }

/* ---------- Species --------------------------------------------------- */

.species { background: var(--blue-700); color: var(--paper-100); padding: 88px var(--sp-6) 84px; overflow: hidden; }
.species .eyebrow { color: var(--blue-200); }
.species .h2 { font-size: clamp(44px, 5vw, 68px); line-height: .98; letter-spacing: -.04em; color: var(--white); margin-bottom: var(--sp-5); }
.species-lede { font-size: 19px; line-height: 29px; color: var(--blue-200); margin: 0 auto 28px; max-width: 520px; }
.species-chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  max-width: 560px; margin: 0 auto 52px;
}
.species-chip {
  display: inline-flex; align-items: center;
  padding: var(--sp-2) 18px; border-radius: var(--radius-pill);
  background: var(--paper-100); color: var(--ink-900);
  font-size: 14px; font-weight: 600;
}
.species-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-8); }
.species-grid img {
  display: block; width: 100%; height: auto;
  transition: transform var(--motion-standard) var(--motion-ease);
}
.species-grid > div:hover img { transform: translateY(-6px); }
.species-name { font-weight: 600; font-size: 14px; color: var(--white); margin-top: var(--sp-1); }
.species-sub { font-size: 12px; color: var(--blue-500); }
.species-cta {
  background: var(--paper-100); color: var(--ink-900);
  border-radius: var(--radius-shell); padding: 28px var(--sp-6);
  display: flex; align-items: center; gap: var(--sp-5);
  text-align: left; flex-wrap: wrap;
}
.species-cta-copy { flex: 1; min-width: 280px; }
.species-cta-title { font-weight: 600; font-size: 24px; line-height: 30px; letter-spacing: -.015em; margin-bottom: 6px; }
.species-cta p { font-size: 15px; line-height: 23px; color: var(--color-text-secondary); margin: 0; }

/* ---------- Testimonials --------------------------------------------- */

/* Mission: occupies the band the testimonial row used to. Same canvas and
   vertical rhythm, so the page's alternation of surfaces is unchanged. */
.mission { background: var(--color-canvas); padding: 96px var(--sp-6); }
.mission .h2 { margin-top: var(--sp-3); }
.mission-lede { margin: var(--sp-5) auto 0; max-width: 620px; }
.mission-parent {
  margin: var(--sp-6) auto 0; max-width: 560px;
  font-size: 15px; line-height: 23px;
  color: var(--color-text-secondary);
}
.mission-parent a { color: inherit; text-underline-offset: 3px; }

.reviews { background: var(--color-canvas); padding: 96px var(--sp-6); }
.reviews .h2 { margin-bottom: 14px; max-width: 640px; }
.reviews .lede { margin-bottom: var(--sp-7); max-width: 600px; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.review {
  background: var(--color-surface-raised); border: var(--hairline);
  border-radius: var(--radius-module); overflow: hidden;
}
.review-media { aspect-ratio: 4 / 3; background: var(--blue-200); }
.review-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.review-body { padding: var(--sp-5); }
.review-name { font-weight: 600; font-size: 15px; margin-bottom: 10px; }
.review-quote { font-size: 15px; line-height: 23px; margin: 0 0 14px; }
.review-caption { font-size: 13px; line-height: 19px; color: var(--color-text-secondary); margin: 0; }

/* ---------- FAQ ------------------------------------------------------- */

.faq { background: var(--color-canvas); padding: var(--sp-6) var(--sp-6) 96px; }
.faq .h2 { margin-bottom: var(--sp-7); text-align: center; }
.faq-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.faq-item {
  background: var(--color-surface-raised); border: var(--hairline);
  border-radius: var(--radius-card); overflow: hidden;
}
.faq-q {
  width: 100%; text-align: left; background: none; border: none;
  padding: var(--sp-5) var(--sp-5);
  font-family: var(--font-ui); font-size: 16px; font-weight: 600;
  color: var(--color-text-primary); cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
}
.faq-sign { font-size: 22px; color: var(--color-action-primary); font-weight: 300; line-height: 1; flex-shrink: 0; }
.faq-a { padding: 0 var(--sp-5) 22px; font-size: 15px; line-height: 23px; color: var(--color-text-secondary); }

/* ---------- Final CTA ------------------------------------------------- */

.cta {
  background: linear-gradient(180deg,
    var(--color-atmosphere-top) 0%,
    var(--color-atmosphere-middle) 48%,
    var(--color-atmosphere-bottom) 100%);
  text-align: center; overflow: hidden;
}
.cta-inner { padding: 96px var(--sp-6) 0; }
.cta .h2 { font-size: clamp(44px, 5vw, 68px); line-height: .98; letter-spacing: -.04em; margin: 0 auto var(--sp-5); max-width: 820px; }
.cta .lede { margin: 0 auto var(--sp-6); max-width: 560px; }
.cta .btn-row { justify-content: center; }
.cta-scene { display: block; width: 100%; height: auto; margin-top: var(--sp-7); }

/* ---------- Footer ---------------------------------------------------- */

.footer {
  background: var(--color-surface-raised); color: var(--color-text-secondary);
  padding: var(--sp-8) var(--sp-6) var(--sp-7);
  border-top: var(--hairline);
}
.footer-grid {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
}
.footer-brand { margin-bottom: 14px; }
.footer p { font-size: 14px; line-height: 21px; max-width: 280px; margin: 0; }
.footer-col-head { font-weight: 600; font-size: 14px; color: var(--color-text-primary); margin-bottom: 14px; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: 14px; color: var(--color-text-secondary); }
.footer-bottom {
  max-width: 1240px; margin: 44px auto 0; padding-top: var(--sp-5);
  border-top: 1px solid rgba(35, 35, 35, .14);
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: var(--sp-3); font-size: 13px;
}
.footer-bottom-links { display: flex; gap: var(--sp-5); }
.footer-bottom-links a { color: var(--color-text-secondary); }

/* ---------- Waitlist modal (ENG-1362) --------------------------------- */

.wl {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(35, 35, 35, .55);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-5);
  overflow-y: auto;
}
.wl[hidden] { display: none; }
.wl-card {
  position: relative;
  background: var(--color-surface-raised);
  border: var(--hairline);
  border-radius: var(--radius-shell);
  padding: var(--sp-6);
  width: 100%; max-width: 480px;
  box-shadow: 0 30px 60px rgba(35, 35, 35, .28);
}
.wl-close {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  width: 32px; height: 32px;
  background: none; border: none; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--color-text-secondary);
  border-radius: 50%;
}
.wl-close:hover { color: var(--color-text-primary); }
.wl-card h3 {
  font-family: var(--font-display); font-weight: 300;
  font-size: 34px; line-height: 1.05; letter-spacing: -.03em;
  margin: 0 0 var(--sp-3); color: var(--color-text-primary);
}
.wl-sub { font-size: 15px; line-height: 23px; color: var(--color-text-secondary); margin: 0 0 var(--sp-5); }
.wl-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.wl-field { display: block; margin-bottom: var(--sp-3); }
.wl-field > span {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--color-text-primary); margin-bottom: 6px;
}
.wl-field input,
.wl-field select {
  width: 100%; height: var(--control-height);
  padding-inline: var(--sp-3);
  font-family: var(--font-ui); font-size: 15px;
  color: var(--color-text-primary);
  background: var(--paper-100);
  border: var(--hairline);
  border-radius: var(--radius-control);
}
.wl-field input:focus-visible,
.wl-field select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.wl-submit {
  width: 100%; margin-top: var(--sp-2);
  height: var(--control-height);
  background: var(--color-action-primary); color: var(--white);
  border: none; border-radius: var(--control-radius);
  font-family: var(--font-ui); font-size: var(--button-size); font-weight: 600;
  cursor: pointer;
  transition: background var(--motion-micro) var(--motion-ease);
}
.wl-submit:hover:not(:disabled) { background: var(--color-action-primary-hover); }
.wl-submit:disabled { opacity: .6; cursor: default; }
.wl-error { font-size: 13px; color: var(--clinical-critical); margin: var(--sp-3) 0 0; min-height: 1px; }
.wl-legal { font-size: 12px; line-height: 18px; color: var(--color-text-secondary); margin: var(--sp-4) 0 0; }
.wl-code-label {
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-text-secondary); margin-bottom: 6px;
}
.wl-code {
  font-family: var(--font-data); font-size: 28px; font-weight: 600;
  color: var(--color-action-primary);
  background: var(--red-100); border-radius: var(--radius-control);
  padding: var(--sp-3) var(--sp-4); display: inline-block;
}
.wl-invite-head { margin: var(--sp-4) 0 var(--sp-1); font-weight: 600; color: var(--color-text-primary); font-size: 15px; }
.wl-nudge {
  font-size: 13px; color: var(--clinical-stable);
  background: rgba(70, 112, 92, .1);
  border: 1px solid rgba(70, 112, 92, .4);
  border-radius: var(--radius-control);
  padding: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-3);
}
.wl-share { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.wl-share a, .wl-share button {
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  color: var(--color-text-primary);
  background: var(--paper-100); border: var(--hairline);
  border-radius: var(--radius-pill); padding: var(--sp-2) 14px;
  cursor: pointer;
  transition: border-color var(--motion-micro) var(--motion-ease);
}
.wl-share a:hover, .wl-share button:hover { border-color: var(--color-border-strong); }
.wl-refbox { display: flex; gap: var(--sp-2); }
.wl-refbox input {
  flex: 1; min-width: 0; height: var(--control-height);
  padding-inline: var(--sp-3);
  font-family: var(--font-data); font-size: 13px;
  color: var(--color-text-secondary);
  background: var(--paper-100); border: var(--hairline);
  border-radius: var(--radius-control);
}
.wl-copy {
  height: var(--control-height); padding-inline: var(--sp-4);
  background: var(--ink-900); color: var(--white);
  border: none; border-radius: var(--radius-control);
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; cursor: pointer;
}

/* ---------- Brand tones (dots + icon wells) ---------------------------
   The DS assigns meaning by colour family, so tones are named for the family
   rather than for the feature that happens to use them today. -------- */

.ln-dot[data-tone="red"],
.tool-icon[data-tone="red"] i { background: var(--red-500); }
.ln-dot[data-tone="mineral"],
.tool-icon[data-tone="mineral"] i,
.tool-icon[data-tone="mineral-soft"] i { background: var(--blue-700); }
.ln-dot[data-tone="apricot"] { background: var(--apricot-600); }
.ln-dot[data-tone="ink"],
.tool-icon[data-tone="apricot"] i { background: var(--ink-900); }

.tool-icon[data-tone="red"] { background: var(--red-100); }
.tool-icon[data-tone="mineral"] { background: var(--blue-100); }
.tool-icon[data-tone="mineral-soft"] { background: var(--blue-200); }
.tool-icon[data-tone="apricot"] { background: var(--apricot-200); }

/* ---------- Ask demo: clinical states --------------------------------
   Clinical colours are functional, never brand. Each state pairs colour with
   a geometric glyph and a word, so colour is never the only signal. --- */

.ask-tag[data-level="stable"] {
  color: var(--clinical-stable);
  background: rgba(70, 112, 92, .1);
  border: 1px solid rgba(70, 112, 92, .4);
}
.ask-tag[data-level="caution"] {
  color: var(--clinical-warning-text);
  background: rgba(169, 106, 28, .1);
  border: 1px solid rgba(169, 106, 28, .4);
}
.ask-tag[data-level="critical"] {
  color: var(--clinical-critical);
  background: rgba(181, 5, 0, .08);
  border: 1px solid rgba(181, 5, 0, .35);
}

.ask-level[data-level="stable"][data-on="true"] {
  background: rgba(70, 112, 92, .1);
  border-color: var(--clinical-stable);
}
.ask-level[data-level="stable"][data-on="true"] .ask-level-glyph { background: var(--clinical-stable); }
.ask-level[data-level="stable"][data-on="true"] .glyph-home { background: var(--white); }
.ask-level[data-level="stable"][data-on="true"] .ask-level-flag { background: var(--clinical-stable); }

.ask-level[data-level="caution"][data-on="true"] {
  background: rgba(169, 106, 28, .1);
  border-color: var(--clinical-warning-accent);
}
.ask-level[data-level="caution"][data-on="true"] .ask-level-glyph { background: var(--clinical-warning-accent); }
.ask-level[data-level="caution"][data-on="true"] .glyph-clinic { background: var(--white); }
.ask-level[data-level="caution"][data-on="true"] .ask-level-flag { background: var(--clinical-warning-accent); }

.ask-level[data-level="critical"][data-on="true"] {
  background: rgba(181, 5, 0, .08);
  border-color: var(--clinical-critical);
}
.ask-level[data-level="critical"][data-on="true"] .ask-level-glyph { background: var(--clinical-critical); }
.ask-level[data-level="critical"][data-on="true"] .glyph-critical { border-bottom-color: var(--white); }
.ask-level[data-level="critical"][data-on="true"] .ask-level-flag { background: var(--clinical-critical); }

/* ---------- Touch targets ---------------------------------------------
   The DS puts OpenAnimal controls at 44px (--control-height), but bare text
   links render at their line-box height: 20-23px measured on iPhone SE
   through iPad. Buttons already comply; links did not.

   Horizontal rows (nav, footer legal) get an invisible ::after that extends
   the hit area vertically to 44px without moving anything. Nothing sits
   above or below them inside the row, so there is no overlap to cause
   mis-taps. Vertical stacks (footer columns, the feature tablist) can't use
   that trick: 44px boxes on a ~30px pitch would overlap each other, so those
   get real spacing instead, and only on coarse pointers. ------------- */

@media (pointer: coarse) {
  .hero-nav-links a,
  .hero-nav-actions > a:not(.btn),
  .floatnav-inner > a:not(.btn):not(.brandlock),
  .footer-bottom-links a,
  .brandlock {
    position: relative;
  }
  .hero-nav-links a::after,
  .hero-nav-actions > a:not(.btn)::after,
  .floatnav-inner > a:not(.btn):not(.brandlock)::after,
  .footer-bottom-links a::after,
  .brandlock::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 100%;
    min-height: var(--control-height);
  }

  /* Stacked links need genuine pitch, not overlapping hit boxes. */
  .footer-links { gap: var(--sp-3); }
  .footer-links a,
  .tool a {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-height);
  }
  .feature-tablist { gap: var(--sp-5); }
  .feature-tab { min-height: var(--control-height); }
  .ask-chip { min-height: var(--control-height); }

  /* A 6px slider track is unusable with a thumb. Grow the control box to the
     DS control height: the painted track stays centred within it. */
  .ln-range { height: var(--control-height); }
}

/* ---------- Motion ---------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(14px); }
.motion-ready .reveal {
  transition: opacity var(--motion-large) var(--motion-ease),
              transform var(--motion-large) var(--motion-ease);
}
.motion-ready .reveal.in-view { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Responsive ------------------------------------------------ */

/* ENG-1347 / ENG-1410: the root cause. The artwork puts the plain blue wall in
   its left ~45% and the near-white "Bella" card plus the cat dead centre.
   Because the hero is height-matched by object-fit: cover, the card's left edge
   lands at viewportCentre + 0.007 × scaledImageWidth, i.e. always just right of
   centre. So the moment the copy column reaches the centre the headline and body
   are set on a near-white card, which no amount of scrim can rescue (that is why
   strengthening the scrim alone did not clear this).

   Clearance from the copy to that card is therefore ≈ W/2 − 537 at a 900px-tall
   viewport: it crosses zero at ~1075px and only reaches a comfortable ~60px at
   ~1195px. Hence two tiers rather than one: a single breakpoint at 1080px would
   put the switch exactly on the zero-crossing, leaving 3px of clearance one pixel
   above it. Both tiers shift the crop off centre so the plain wall stays under
   the copy, as the desktop composition intends; the 1200px tier only needs a
   nudge, so it keeps most of the garden in frame. */
@media (max-width: 1200px) {
  .hero-img { object-position: 22% center; }
  .hero-scrim { --hero-wash-left: .16; }
}

/* Anchoring the crop only helps while there is crop to move: object-position can
   shift the artwork by (imageAspect × heroHeight − viewportWidth), and on a short
   viewport the hero collapses to its content floor (~600px) so that overflow
   nearly vanishes: 47px at 1024×600 against the 123px the copy needs. Measured
   with the anchor already applied, clearance was −107px at 1024×600, −60px at
   932×430 (Pro Max landscape), −9px at 900×600 and +1px at 860×480: the headline,
   not the paragraph, is what reaches furthest right in this band, because 5vw puts
   it at 45–54px and its first line runs to ~648px.

   So bound the copy column here rather than the crop. It also feeds back the right
   way: a narrower column takes more headline lines, which makes the hero taller,
   which buys back the crop overflow the anchor needs. No-op at ≤640px, where the
   column is already viewport-bound below this width. */
@media (max-width: 1200px) and (max-height: 780px) {
  .hero-copy { max-width: 430px; }
}

@media (max-width: 1080px) {
  .tools-grid { grid-template-columns: repeat(3, 1fr); }
  .species-grid { grid-template-columns: repeat(5, 1fr); }
  .snapshot-metrics { grid-template-columns: repeat(2, 1fr); }

  /* Below the tablet breakpoint the crop is deep enough that a nudge is not
     enough: anchor it hard to the plain wall. */
  .hero-img { object-position: left center; }
  .hero-scrim { --hero-wash-left: .3; }
}

@media (max-width: 900px) {
  .planner-grid { grid-template-columns: 1fr; }
  .ask-body { grid-template-columns: 1fr; }
  .how-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .snapshot { grid-template-columns: 1fr; justify-items: center; }
  .stages-cards { grid-template-columns: repeat(2, 1fr); }
  .stages-art, .stages-line { display: none; }

  /* ENG-1346: the previous site hid the nav links at tablet width with no
     hamburger, leaving no way to navigate. Wrap them instead of hiding:
     every destination stays reachable at every width. The floating pill has
     no room to wrap, so it drops to brand + CTA; the top nav and the footer
     both still carry the full set. */
  .hero-nav { flex-wrap: wrap; gap: var(--sp-4); }
  .hero-nav-actions { margin-left: auto; }
  .hero-nav-links { order: 3; width: 100%; gap: var(--sp-4); }
  .floatnav-links { display: none; }

  /* ENG-1347 / ENG-1410: the crop is anchored left from 1080px down, so the
     copy already sits on the plain wall. This wash carries the nav and the
     stats rail, which cross the rug and the greyhound at these widths. */
  .hero-scrim {
    --hero-wash-left: .34;
    background: linear-gradient(180deg,
      rgba(20, 22, 26, .62) 0%,
      rgba(20, 22, 26, .4) 40%,
      rgba(20, 22, 26, .34) 58%,
      rgba(20, 22, 26, .58) 76%,
      rgba(20, 22, 26, .78) 100%);
  }
}

@media (max-width: 640px) {
  .wrap, .wrap-narrow, .wrap-tight { padding-inline: var(--sp-5); }
  .hero-nav, .hero-body { padding-inline: var(--sp-5); }
  .how, .tools, .reviews, .faq, .species, .planner, .record, .cta-inner, .ask-inner {
    padding-left: var(--sp-5); padding-right: var(--sp-5);
  }
  .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .species-grid { grid-template-columns: repeat(3, 1fr); }
  .stages-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .snapshot-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wl-row { grid-template-columns: 1fr; }
  /* Two-up the link columns: at 44px touch targets a single column makes the
     footer several screens tall. The brand block spans the full width. */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .hero-stats { gap: var(--sp-3); }
  /* Keep the authority signal, not a full logo wall. */
  .vets-faces img { width: 30px; height: 30px; }
  .vets-faces img + img { margin-left: -7px; }

  /* A phone crops to the narrowest slice of the artwork, so the stats rail sits
     squarely on the rug and the potted plant: the bottom half of the wash
     carries most of the legibility here. The copy column is on the plain wall
     via the left-anchored crop plus the strongest copy wash of the three. */
  .hero-scrim {
    --hero-wash-left: .54;
    background: linear-gradient(180deg,
      rgba(20, 22, 26, .7) 0%,
      rgba(20, 22, 26, .52) 40%,
      rgba(20, 22, 26, .42) 58%,
      rgba(20, 22, 26, .68) 76%,
      rgba(20, 22, 26, .88) 100%);
  }
  /* The phone layout drops the copy out of its absolute bottom slot and lets it
     flow under the artwork instead, so the wash has to carry the whole lower
     half of the panel rather than just its last band. */
  .feature-scrim {
    background: linear-gradient(180deg,
      rgba(20, 22, 26, .58) 0%,
      rgba(20, 22, 26, .48) 34%,
      rgba(20, 22, 26, .74) 58%,
      rgba(20, 22, 26, .82) 100%);
  }
  /* `relative`, not `static`: these two carry a z-index that lifts them over
     .feature-bg, and z-index is inert on a static box: so `static` silently
     dropped the tab labels and the whole section heading behind the photograph,
     leaving the panel with no readable copy at all on a phone. */
  .feature-copy { position: absolute; padding: 0 var(--sp-5) 42px; }
  .feature { min-height: min(700px, 92svh); }
  .feature-tabs { position: absolute; }
  .feature-tabs-inner { padding: var(--sp-5) var(--sp-5) 0; }

  /* The floating pill can't fit brand + Log in + CTA on a phone: everything
     wrapped onto two lines. The pill exists to keep the primary CTA in reach;
     Log in is still in the hero nav and the footer. */
  .floatnav-inner > a:not(.btn):not(.brandlock), .floatnav-links { display: none; }
  .floatnav { top: 10px; padding-inline: 12px; }
  .floatnav-inner { width: 100%; gap: var(--sp-2); padding: 7px 7px 7px 12px; }
  .floatnav .brandlock { margin-right: auto; --mark-h: 18px !important; }
  .floatnav .btn { white-space: nowrap; height: 40px; padding-inline: 13px; font-size: 13px; }
  .brandlock-word { white-space: nowrap; }

  .mobile-menu { display: block; position: relative; }
  .mobile-menu summary { width: 40px; height: 40px; }
  .cta-label-long { display: none; }
  .cta-label-short { display: inline; }

  /* One clean navigation row. The destinations live in the menu instead of
     wrapping into a second and third row over the hero. */
  .hero-nav { flex-wrap: nowrap; gap: var(--sp-2); padding: 12px 16px; }
  .hero-nav > .brandlock { --mark-h: 24px !important; margin-right: auto; }
  .hero-nav-links, .hero-nav-actions > a:not(.btn) { display: none; }
  .hero-nav-actions { gap: var(--sp-2); margin-left: 0; }
  .hero-nav .btn { height: 40px; padding-inline: 13px; font-size: 13px; }
  .hero-nav .mobile-menu summary { background: rgba(20, 22, 26, .34); border-color: rgba(255,255,255,.55); }
  .hero-nav .mobile-menu summary span { background: var(--white); }

  /* Put the illustrated room behind the message, as it is on desktop. */
  .hero { min-height: 760px; }
  .hero-img { object-position: 42% center; }
  .hero-body { padding: 58px var(--sp-5) 24px; gap: var(--sp-5); }
  .hero-copy { max-width: 330px; }
  .hero-copy .h1 { font-size: clamp(38px, 10.5vw, 43px); line-height: .98; margin-bottom: 18px; }
  .hero-copy p { font-size: 16px; line-height: 23px; margin-bottom: 22px; max-width: 330px; }
  .hero-sub-break { display: none; }
  .hero-copy .hero-free { font-size: 13px; margin-top: 12px; }
  .hero-copy .btn-row { gap: 10px; }
  .hero-copy .btn { height: 42px; padding-inline: 16px; font-size: 13px; }
  .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); padding-top: 14px; }
  .hero-stat { min-width: 0; }
  .hero-stat-label { font-size: 12px; line-height: 16px; }
  .hero-stat-value { display: none; }

  .vets { padding: 30px var(--sp-5) 28px; }
  .vets-faces { margin-bottom: 14px; }
  .vets h2 { font-size: 18px; line-height: 23px; margin-bottom: 18px; }
  .vets-logos { flex-wrap: nowrap; gap: 22px; }
  .vets-logos img { height: 28px; }
  .vets-logos img:nth-child(n+4) { display: none; }

  .how { padding-top: 42px; padding-bottom: 52px; }
  .how > .wrap > .lede { margin-bottom: 28px !important; }
  .how-grid { gap: 24px 12px; }
  .how-media { aspect-ratio: 16 / 10; margin-bottom: 10px; }
  .how-step { font-size: 10px; margin-bottom: 4px; }
  .how .h3 { font-size: 16px; line-height: 20px; margin-bottom: 5px; }
  .how p { font-size: 13px; line-height: 18px; }
  .how-grid + div { margin-top: 28px !important; }

  .feature-bg img { object-position: 61% center; }
  .feature-tablist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; width: 100%; }
  .feature-tab { min-height: 38px; font-size: 12px; line-height: 15px; gap: 7px; text-align: left; }
  .feature-tab-n { font-size: 9px; }
  .feature-copy .h2 { font-size: 38px; line-height: 1; }
  .feature-copy .lede { font-size: 16px; line-height: 23px; }

  .planner { padding-top: 52px; padding-bottom: 56px; }
  .planner-head { margin-bottom: 28px; }
  .planner-head .h2-lg { font-size: 38px; line-height: 1; margin-bottom: 16px; }
  .planner-head .lede { font-size: 16px; line-height: 23px; }
  .planner-grid { gap: 18px; }
  .planner-controls { gap: 8px; }
  .planner-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planner-controls > .eyebrow, .planner-controls > .ln-card { grid-column: 1 / -1; }
  .ln-item { padding: 10px 12px; gap: 10px; }
  .ln-dotwrap { width: 28px; height: 28px; }
  .ln-desc { display: none; }
  .ln-title { font-size: 14px; line-height: 19px; margin: 0; }
  .ln-card, .ln-card-wide { padding: 14px 16px; }
  .ln-card-wide { display: none; }
  .ln-range { height: 30px; }
  .planner-chart { padding: 18px 16px 14px; }
  .planner-years-n { font-size: 42px; }
  .planner-note { display: none; }

  .ask-inner { padding-top: 52px; padding-bottom: 56px; }
  .ask-head { margin-bottom: 28px; }
  .ask-head .h2 { font-size: 38px; line-height: 1; margin-bottom: 16px; }
  .ask-head .lede { font-size: 16px; line-height: 23px; margin-bottom: 20px; }
  .ask-demo { padding: 16px; }
  .ask-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; margin-right: -16px; margin-bottom: 14px; scrollbar-width: none; }
  .ask-chips::-webkit-scrollbar { display: none; }
  .ask-chip { flex: none; min-height: 38px; padding: 7px 12px; font-size: 12px; }
  .ask-body { gap: 10px; }
  .ask-answer { padding: 16px; }
  .ask-a { font-size: 14px; line-height: 21px; }
  .ask-triage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .ask-level { display: block; padding: 9px; }
  .ask-level-glyph { width: 24px; height: 24px; margin-bottom: 7px; }
  .ask-level-title { font-size: 11px; line-height: 14px; }
  .ask-level-sub, .ask-level-flag { display: none !important; }

  .record { padding-top: 52px; }
  .record .h2-lg { font-size: 38px; line-height: 1; }
  .record .lede { font-size: 16px; line-height: 23px; }
  .record-shot { margin-top: 26px; height: 260px; overflow: hidden; }
  .record-shot img { height: 100%; object-fit: cover; object-position: top left; }

  .tools { padding-top: 52px; padding-bottom: 56px; }
  .tools-head { margin-bottom: 28px; }
  .tools-head .h2 { font-size: 38px; line-height: 1; }
  .tools-head .lede { font-size: 16px; line-height: 23px; }
  .tools-grid { gap: 10px; margin-bottom: 24px; }
  .tool { padding: 14px; min-height: 170px; }
  .tool:last-child { grid-column: 1 / -1; min-height: 130px; }
  .tool-icon { width: 32px; height: 32px; margin-bottom: 10px; }
  .tool h3 { font-size: 15px; line-height: 19px; }
  .tool p { font-size: 12px; line-height: 17px; margin-bottom: 8px; }
  .tool a { min-height: 32px; font-size: 12px; }

  .stages-inner { padding: 14px; }
  .stages-cards { gap: 8px; }
  .stage-card { padding: 14px 12px; text-align: left; min-height: 126px; }
  .stage-card-title { font-size: 14px; line-height: 18px; }
  .stage-card p { font-size: 11px; line-height: 16px; }
  .snapshot { grid-template-columns: 76px 1fr; gap: 12px; padding: 14px; justify-items: stretch; }
  .snapshot-ring svg { width: 76px; height: 76px; }
  .snapshot-ring .eyebrow, .snapshot-head .eyebrow { display: none; }
  .snapshot-head { margin-bottom: 10px; }
  .snapshot-head-title { font-size: 15px; line-height: 19px; }
  .snapshot-metrics { gap: 6px; }
  .metric { padding: 8px; }
  .metric-label, .metric-value, .metric-dot-label { font-size: 10px; }

  .species { padding-top: 52px; padding-bottom: 52px; }
  .species .h2 { font-size: 40px; margin-bottom: 14px; }
  .species-lede { font-size: 16px; line-height: 23px; margin-bottom: 20px; }
  .species-chips { gap: 6px; margin-bottom: 28px; }
  .species-chip { padding: 6px 11px; font-size: 11px; }
  .species-grid { gap: 14px 8px; margin-bottom: 28px; }
  .species-grid img { height: 82px; object-fit: contain; }
  .species-name { font-size: 12px; }
  .species-sub { display: none; }
  .species-cta { padding: 18px; gap: 14px; }
  .species-cta-copy { min-width: 0; }
  .species-cta-title { font-size: 18px; line-height: 23px; }
  .species-cta p { font-size: 13px; line-height: 18px; }

  .reviews { padding: 52px var(--sp-5); }
  .reviews .h2 { font-size: 38px; line-height: 1; }
  .reviews .lede { margin-bottom: 28px; }
  .reviews-grid { display: flex; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .reviews-grid::-webkit-scrollbar { display: none; }
  .review { min-width: 82vw; scroll-snap-align: start; }
  .review-media { aspect-ratio: 16 / 8; }
  .review-body { padding: 16px; }

  .faq { padding: 44px var(--sp-5) 52px; }
  .faq .h2 { font-size: 38px; margin-bottom: 28px; }
  .faq-q { padding: 16px; font-size: 14px; }
  .faq-a { padding: 0 16px 16px; font-size: 13px; line-height: 19px; }

  .cta-inner { padding-top: 52px; }
  .cta .h2 { font-size: 40px; }
  .cta .lede { font-size: 16px; line-height: 23px; margin-bottom: 22px; }
  .cta-scene { margin-top: 28px; min-height: 110px; object-fit: cover; }

  .footer { padding: 34px var(--sp-5) 24px; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 12px; }
  .footer-grid > div:first-child p { max-width: 330px; }
  .footer-links { gap: 2px; }
  .footer-links a { min-height: 34px; font-size: 13px; }
  .footer-bottom { margin-top: 28px; padding-top: 16px; display: grid; }
  .footer-bottom-links { gap: 14px; flex-wrap: wrap; }
}

@media (max-width: 350px) {
  .hero-nav > .brandlock .brandlock-word,
  .floatnav .brandlock-word { display: none; }
  .hero-nav .btn, .floatnav .btn { font-size: 12px; padding-inline: 10px; }
}

@media (max-width: 640px) and (max-height: 650px) {
  .hero { min-height: 100svh; }
  .hero-body { padding-top: var(--sp-5); }
  .hero-copy .h1 { font-size: 36px; }
  .hero-copy p { font-size: 15px; line-height: 21px; }
  .hero-stats { display: none; }
}