/* ============================================================
   Cogua landing pages (index.html, how-it-works.html).
   One stylesheet for both pages, which carried byte-identical
   inline copies of it before. Built on the brand foundation:
   css/fonts.css (families), css/brand.css (palette, type,
   spacing, controls), css/nav.css (shared nav and footer).
   The founder's 2026-09-28 direction makes the secondary pages
   (Science, About, Plans) the reference: cream surface, ink
   text, forest for the score, terracotta for the call to
   action, Avenir Next first. Dark ink is kept for a few
   emphasis blocks, as the reference pages do.
   ============================================================ */

:root{
  --abyss:var(--cogua-cream);
  --pine-1:var(--cogua-white);
  --pine-2:var(--cogua-cream);
  --pine-3:var(--cogua-sand);
  --line:var(--cogua-sand);
  --line-strong:var(--cogua-border);
  --bone:var(--cogua-cream-2);
  --bone-2:var(--cogua-sand);
  --ink:var(--cogua-ink);
  --txt:var(--cogua-ink);
  --txt-dim:var(--cogua-ink-body);
  --txt-faint:var(--cogua-muted);
  --teal:var(--cogua-forest);
  --teal-glow:rgba(61,107,94,.14);
  --copper:var(--cogua-terracotta);
  --copper-ink:var(--cogua-terracotta-ink);
  --copper-hi:var(--cogua-terracotta-hover);
  --amber:var(--cogua-status-change);
  --slate:var(--cogua-status-skip);
  --violet:var(--cogua-status-ask);

  --w:1200px;
  --pad:clamp(20px,5vw,48px);
  --r:var(--cogua-radius-card);
  --r-lg:18px;

  /* the shared floating nav: 14px offset plus its pill */
  --nav-h:78px;
  --ease:cubic-bezier(.22,.84,.32,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

/* Dark emphasis blocks, as on the reference pages (cta-box, footer). Text roles flip to cream and
   the accent becomes terracotta, which reads on ink where forest does not. */
.plan-principle,.ex-one,.elayer.core,.cta-band,.closer{
  color:var(--txt);
  --txt:var(--cogua-cream);
  --txt-dim:rgba(250,248,245,.74);
  --txt-faint:rgba(250,248,245,.58);
  --line:rgba(250,248,245,.12);
  --line-strong:rgba(250,248,245,.22);
  --teal:var(--cogua-terracotta-hover);
  --copper-ink:var(--cogua-terracotta-hover);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:var(--nav-h);background:var(--abyss)}
body{
  font-family:var(--font-body);
  background:var(--abyss);
  color:var(--txt);
  line-height:var(--cogua-leading-body);
  font-size:1rem;
  letter-spacing:var(--cogua-tracking-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
::selection{background:rgba(61,107,94,.2)}

.wrap{max-width:var(--w);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.section{padding:clamp(64px,10vh,120px) 0;position:relative}
.section.tight{padding:clamp(52px,8vh,96px) 0}

/* ---------- type ---------- */
.eyebrow{
  font-size:var(--cogua-eyebrow-size);letter-spacing:var(--cogua-eyebrow-tracking);text-transform:uppercase;
  color:var(--copper-ink);font-weight:var(--cogua-weight-label);display:flex;align-items:center;gap:10px;
}
.eyebrow.center{justify-content:center}

.h-display{
  font-family:var(--font-display);
  font-weight:var(--cogua-weight-heading);
  font-size:clamp(2.375rem,5.4vw,4.375rem);
  line-height:1.06;
  letter-spacing:-.025em;
}
.h-1{
  font-family:var(--font-display);font-weight:var(--cogua-weight-heading);
  font-size:clamp(1.875rem,3.7vw,3rem);line-height:1.1;letter-spacing:var(--cogua-tracking-heading);
}
.h-2{
  font-family:var(--font-display);font-weight:var(--cogua-weight-heading);
  font-size:clamp(1.375rem,2.3vw,1.8125rem);line-height:1.18;letter-spacing:var(--cogua-tracking-heading);
}
/* Emphasis follows the reference: upright, a step heavier, terracotta (the small-text ink). */
em{font-style:normal;font-weight:var(--cogua-weight-strong);color:var(--copper-ink)}
.lede{font-size:clamp(1rem,1.4vw,1.1875rem);color:var(--txt-dim);line-height:1.7;max-width:60ch}
.dim{color:var(--txt-dim)}
.faint{color:var(--txt-faint)}

.sec-head{max-width:760px;display:grid;gap:18px;margin-bottom:clamp(44px,6vh,72px)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center;justify-items:center}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 24px;border-radius:var(--cogua-radius-control);
  background:var(--copper);color:var(--cogua-white);
  font-weight:var(--cogua-weight-label);font-size:.9375rem;letter-spacing:-.005em;
  transition:transform .35s var(--ease),background .25s,box-shadow .35s;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  position:relative;white-space:nowrap;
}
.btn:hover{background:var(--copper-hi);transform:translateY(-2px);box-shadow:0 8px 28px rgba(196,112,75,.3)}
.btn .arr{transition:transform .35s var(--ease);font-family:var(--font-body)}
.btn:hover .arr{transform:translateX(4px)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 22px;border-radius:var(--cogua-radius-control);
  border:1.5px solid var(--teal);color:var(--teal);
  font-weight:var(--cogua-weight-strong);font-size:.9375rem;
  transition:border-color .25s,background .25s,color .25s,transform .35s var(--ease);
}
.btn-ghost:hover{background:var(--teal);color:var(--cogua-cream);transform:translateY(-2px)}
.cta-band .btn-ghost{border-color:var(--line-strong);color:var(--txt)}
.cta-band .btn-ghost:hover{background:rgba(250,248,245,.08);color:var(--txt)}
.btn:focus-visible,.btn-ghost:focus-visible{outline:none;box-shadow:var(--cogua-focus-ring)}

/* ============================================================
   PHONE HARDWARE + APP UI
   ============================================================ */
.phone{
  position:relative;width:var(--phone-w,308px);aspect-ratio:308/640;
  flex:none;
}
.phone-frame{
  position:absolute;inset:0;border-radius:54px;
  background:linear-gradient(160deg,#2B3430,var(--cogua-ink) 55%);
  box-shadow:
    inset 0 0 0 1px rgba(250,248,245,.16),
    inset 0 0 0 5px #151B19,
    inset 0 0 0 6px rgba(0,0,0,.7),
    0 36px 70px -34px rgba(28,36,33,.45),
    0 8px 22px -10px rgba(28,36,33,.3);
}
.phone-screen{
  position:absolute;inset:11px;border-radius:44px;overflow:hidden;
  background:var(--cogua-cream);
  --pine-2:var(--cogua-white);
}
.phone-island{
  position:absolute;top:21px;left:50%;transform:translateX(-50%);
  width:86px;height:24px;border-radius:999px;background:#0A0D0C;z-index:6;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.phone-glow{
  position:absolute;inset:-14% -26%;z-index:-1;pointer-events:none;
  background:radial-gradient(48% 42% at 50% 46%,var(--teal-glow),transparent 70%);
  filter:blur(18px);opacity:.6;
}
/* On a phone the glow's sideways overhang stays inside the screen (mobile audit M07). */
@media(max-width:560px){.phone-glow{inset:-14% -4%}}

/* app shell */
.app-screen{
  position:absolute;inset:0;display:flex;flex-direction:column;
  padding:58px 18px 14px;color:var(--txt);
  opacity:0;transform:translateY(10px) scale(.99);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  pointer-events:none;
}
.app-screen.is-on{opacity:1;transform:none;pointer-events:auto}
.app-status{
  position:absolute;top:24px;left:26px;right:26px;display:flex;justify-content:space-between;
  font-size:11px;font-weight:600;color:rgba(28,36,33,.8);letter-spacing:.02em;
}
.app-status .sig{display:flex;gap:4px;align-items:center}
.app-status .sig i{width:3px;border-radius:1px;background:rgba(28,36,33,.8);display:block}
.app-status .sig i:nth-child(1){height:4px}.app-status .sig i:nth-child(2){height:6px}
.app-status .sig i:nth-child(3){height:8px}.app-status .sig i:nth-child(4){height:10px}
.app-batt{width:18px;height:9px;border:1px solid rgba(28,36,33,.7);border-radius:3px;position:relative}
.app-batt::after{content:"";position:absolute;inset:1.5px;right:5px;background:var(--teal);border-radius:1px}

.app-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.app-avatar{width:38px;height:38px;border-radius:50%;overflow:hidden;border:1.5px solid rgba(61,107,94,.5);flex:none}
.app-avatar picture{display:block;width:100%;height:100%}
.app-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.app-id b{display:block;font-size:14.5px;font-weight:600;line-height:1.15;letter-spacing:-.01em}
.app-id span{font-size:10.5px;color:var(--txt-faint)}
.app-bell{margin-left:auto;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--txt-dim)}

.app-title{font-size:19px;font-weight:700;letter-spacing:-.015em;margin-bottom:10px;display:flex;align-items:baseline;gap:8px}
.app-title small{font-size:10px;color:var(--txt-faint);font-weight:500;letter-spacing:.08em;text-transform:uppercase}

/* score ring small (in-app) */
.ringbox{display:grid;place-items:center;position:relative;margin:2px auto 8px}
.ringbox svg{display:block}
.ring-track{fill:none;stroke:var(--cogua-sand);stroke-width:9}
.ring-arc{
  fill:none;stroke:var(--teal);stroke-width:9;stroke-linecap:round;
  transform:rotate(-90deg);transform-origin:center;
  stroke-dasharray:339.29;stroke-dashoffset:339.29;
  transition:stroke-dashoffset 1.6s var(--ease-io);
}
.is-on .ring-arc,.is-loaded .hero .ring-arc{stroke-dashoffset:95}
.ring-center{position:absolute;text-align:center}
.ring-num{font-family:var(--font-display);font-weight:var(--cogua-weight-body);font-size:46px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ring-cap{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-faint);margin-top:3px;font-weight:600}

.pill-younger{
  margin:0 auto 10px;display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;border-radius:999px;font-size:11.5px;font-weight:600;
  background:rgba(61,107,94,.13);color:var(--teal);border:1px solid rgba(61,107,94,.3);
  width:max-content;
}
.pill-younger i{width:6px;height:6px;border-radius:50%;background:var(--teal)}

/* range band */
.range{position:relative;height:5px;border-radius:99px;background:var(--cogua-sand);margin:6px 8px 4px}
.range .band{position:absolute;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,rgba(61,107,94,.25),rgba(61,107,94,.65))}
.range .pt{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;background:var(--teal);border:2px solid var(--cogua-white);transform:translate(-50%,-50%);box-shadow:0 1px 3px rgba(28,36,33,.25)}
.range .tick{position:absolute;top:-3.5px;width:1.5px;height:12px;background:rgba(28,36,33,.35);transform:translateX(-50%)}
.range-lab{display:flex;justify-content:space-between;font-size:9px;color:var(--txt-faint);padding:0 8px;letter-spacing:.04em}
.evi-row{display:flex;align-items:center;justify-content:center;gap:6px;font-size:10.5px;color:var(--txt-dim);margin-top:7px}
.evi-row i{width:6px;height:6px;border-radius:50%;background:var(--teal)}

.says{
  margin-top:10px;background:var(--pine-2);border:1px solid var(--line);
  border-radius:14px;padding:11px 13px;
}
.says b{display:block;font-size:8.5px;letter-spacing:.2em;color:var(--teal);font-weight:700;margin-bottom:5px}
.says p{font-size:11.8px;line-height:1.5;color:var(--txt-dim)}

.mini-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:9px}
.mini{background:var(--pine-2);border:1px solid var(--line);border-radius:11px;padding:8px 8px 9px}
.mini b{display:block;font-size:8px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:4px}
.mini.t b{color:var(--teal)}.mini.a b{color:var(--amber)}.mini.s b{color:var(--slate)}
.mini p{font-size:9.6px;line-height:1.45;color:var(--txt-dim)}

.app-tabs{
  margin-top:auto;display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--line);padding-top:9px;
}
.app-tabs span{display:grid;justify-items:center;gap:4px;font-size:8.3px;letter-spacing:.04em;color:var(--txt-faint);font-weight:500}
.app-tabs i{width:17px;height:17px;border-radius:6px;border:1.4px solid currentColor;opacity:.85;display:block}
.app-tabs span.on{color:var(--teal)}
.app-tabs span.on i{background:rgba(61,107,94,.14)}
.app-tabs i.ic-ring{border-radius:50%}
.app-tabs i.ic-list{border-radius:4px;position:relative}
.app-tabs i.ic-list::after{content:"";position:absolute;left:3px;right:3px;top:4px;height:1.4px;background:currentColor;box-shadow:0 4px 0 currentColor}
.app-tabs i.ic-plus{position:relative;border-radius:50%}
.app-tabs i.ic-plus::after{content:"+";position:absolute;inset:0;display:grid;place-items:center;font-size:11px;line-height:1;border:0}
.app-tabs i.ic-spark{position:relative}
.app-tabs i.ic-spark::after{content:"";position:absolute;inset:4px;border:1.4px solid currentColor;border-radius:2px;transform:rotate(45deg)}
.app-tabs i.ic-chart{position:relative}
.app-tabs i.ic-chart::after{content:"";position:absolute;left:3px;right:3px;bottom:3px;height:7px;background:
  linear-gradient(currentColor,currentColor) 0 100%/2px 4px no-repeat,
  linear-gradient(currentColor,currentColor) 50% 100%/2px 7px no-repeat,
  linear-gradient(currentColor,currentColor) 100% 100%/2px 5px no-repeat}

.sample-tag{
  position:absolute;top:58px;right:16px;z-index:5;
  font-size:8px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--txt-faint);border:1px solid var(--line-strong);border-radius:99px;padding:4px 9px;
  background:rgba(255,255,255,.8);backdrop-filter:blur(4px);
}

/* plan screen cards */
.pcards{display:grid;gap:8px}
.pcard{background:var(--pine-2);border:1px solid var(--line);border-radius:13px;padding:11px 12px}
.pcard .row{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.pcard .row b{font-size:12.5px;font-weight:600;letter-spacing:-.01em}
.pcard p{font-size:10.5px;color:var(--txt-dim);line-height:1.5}
.chip{
  margin-left:auto;font-size:8.6px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:3.5px 9px;border-radius:99px;border:1px solid;flex:none;
}
.chip.keep{background:rgba(46,138,115,.1);color:var(--cogua-status-keep);border-color:rgba(46,138,115,.4)}
.chip.change{background:rgba(192,128,42,.1);color:var(--cogua-status-change);border-color:rgba(192,128,42,.45)}
.chip.add{background:rgba(196,112,75,.1);color:var(--cogua-status-add);border-color:rgba(196,112,75,.45)}
.chip.skip{background:rgba(80,98,90,.08);color:var(--cogua-status-skip);border-color:rgba(80,98,90,.35)}
.chip.ask{background:rgba(110,90,220,.08);color:var(--cogua-status-ask);border-color:rgba(110,90,220,.35)}
.chip.watch{background:rgba(40,130,170,.08);color:var(--cogua-status-watch);border-color:rgba(40,130,170,.35)}

/* progress screen */
.state-chip{
  display:inline-flex;align-items:center;gap:8px;width:max-content;
  padding:7px 14px;border-radius:999px;font-size:11.5px;font-weight:600;
  background:rgba(61,107,94,.12);color:var(--teal);border:1px solid rgba(61,107,94,.35);
  margin-bottom:12px;
}
.state-chip i{width:7px;height:7px;border-radius:50%;background:var(--teal)}
.ptl{display:grid;gap:0;position:relative;margin-left:6px}
.ptl::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1.4px;background:var(--line-strong)}
.ptl li{position:relative;padding:0 0 13px 22px}
.ptl li:last-child{padding-bottom:0}
.ptl li::before{
  content:"";position:absolute;left:0;top:4px;width:11px;height:11px;border-radius:50%;
  background:var(--cogua-white);border:2px solid var(--slate);
}
.ptl li.hot::before{border-color:var(--teal);background:rgba(61,107,94,.22)}
.ptl b{display:block;font-size:11.5px;font-weight:600}
.ptl span{font-size:9.8px;color:var(--txt-faint);display:block;line-height:1.45}
.next-row{
  margin-top:12px;display:flex;justify-content:space-between;align-items:center;
  background:var(--pine-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;
  font-size:10.5px;color:var(--txt-dim);
}
.next-row b{color:var(--txt);font-size:11px}

/* journey screen layered groups */
.jg{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.jg.off{opacity:0;transform:translateY(12px);pointer-events:none;position:absolute;left:18px;right:18px}
.evi-chips{display:flex;flex-wrap:wrap;gap:7px;margin:6px 0 4px}
.evi-chips span{
  font-size:10px;font-weight:600;padding:6px 11px;border-radius:99px;
  border:1px solid var(--line-strong);background:var(--pine-2);color:var(--txt-dim);
  transition:transform .6s var(--ease),opacity .6s var(--ease);
}
.evi-chips span i{color:var(--teal);margin-right:5px;font-style:normal}
.evi-kept{display:flex;flex-wrap:wrap;align-items:center;gap:5px 7px;margin:2px 0 4px;font-size:10px;color:var(--txt-dim)}
.evi-kept b{font-weight:600}
.evi-kept span{padding:5px 10px;border-radius:99px;border:1px dashed var(--line-strong)}
.s-pend .evi-chips span{opacity:0;transform:translateY(14px) scale(.92)}
.drv{display:grid;gap:5px;margin-top:4px}
.drv .it{display:flex;gap:8px;align-items:center;font-size:10.8px;color:var(--txt-dim);background:var(--pine-2);border:1px solid var(--line);border-radius:10px;padding:7px 10px}
.drv .it i{width:6px;height:6px;border-radius:50%;flex:none}
.drv .it.t i{background:var(--teal)}.drv .it.a i{background:var(--amber)}.drv .it.s i{background:var(--slate)}
.drv .lab{font-size:8.4px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-faint);font-weight:700;margin:5px 0 1px}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--nav-h) + 40px) 0 60px;overflow:clip;
}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-bg img{
  position:absolute;right:-6%;top:0;height:112%;width:62%;object-fit:cover;object-position:62% 30%;
  opacity:0;transform:scale(1.06);
  transition:opacity 1.6s var(--ease),transform 2.6s var(--ease);
  -webkit-mask-image:radial-gradient(120% 100% at 78% 40%,#000 38%,transparent 72%);
          mask-image:radial-gradient(120% 100% at 78% 40%,#000 38%,transparent 72%);
}
.is-loaded .hero-bg img{opacity:.9;transform:scale(1)}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,var(--abyss) 32%,rgba(250,248,245,.72) 58%,rgba(250,248,245,.3)),
    linear-gradient(0deg,var(--abyss) 2%,transparent 24%);
}
.hero-grid{
  position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4vw,60px);align-items:center;width:100%;
}
.hero-copy{display:grid;gap:26px;justify-items:start}
.hero h1{color:var(--txt)}
.hero h1 .l2{display:block;color:var(--copper)}
.hero-sub{max-width:50ch}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-proof{display:flex;gap:26px;flex-wrap:wrap;margin-top:6px}
.hero-proof div{display:grid;gap:1px}
.hero-proof b{font-family:var(--font-display);font-weight:var(--cogua-weight-heading);font-size:1.3125rem;letter-spacing:-.01em}
.hero-proof span{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-faint);font-weight:600}

/* load choreography */
.lc{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.is-loaded .lc{opacity:1;transform:none}
.is-loaded .lc-1{transition-delay:.1s}
.is-loaded .lc-2{transition-delay:.24s}
.is-loaded .lc-3{transition-delay:.4s}
.is-loaded .lc-4{transition-delay:.56s}
.is-loaded .lc-5{transition-delay:.74s}

.hero-stage{position:relative;display:flex;justify-content:center;perspective:1400px;--phone-w:clamp(264px,23vw,318px)}
.hero-stage .phone{
  opacity:0;transform:translateY(60px) rotateY(-9deg) rotateX(4deg);
  transition:opacity 1.1s var(--ease) .5s,transform 1.4s var(--ease) .5s;
  will-change:transform;
}
.is-loaded .hero-stage .phone{opacity:1;transform:translateY(0) rotateY(-7deg) rotateX(3deg)}

.float-card{
  position:absolute;z-index:4;width:188px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line-strong);border-radius:var(--r);padding:13px 15px;
  box-shadow:0 18px 40px -20px rgba(28,36,33,.28);
  opacity:0;transform:translateY(26px) scale(.95);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.is-loaded .float-card{opacity:1;transform:none}
.is-loaded .fc-a{transition-delay:1.25s}
.is-loaded .fc-b{transition-delay:1.45s}
.is-loaded .fc-c{transition-delay:1.65s}
.float-card b{display:flex;align-items:center;gap:7px;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-bottom:7px}
.float-card b i{width:7px;height:7px;border-radius:50%}
.fc-a{top:6%;left:-9%}.fc-a b{color:var(--teal)}.fc-a b i{background:var(--teal)}
.fc-b{bottom:21%;right:-12%}.fc-b b{color:var(--amber)}.fc-b b i{background:var(--amber)}
.fc-c{bottom:-3%;left:-4%}.fc-c b{color:var(--slate)}.fc-c b i{background:var(--slate)}
.float-card p{font-size:.75rem;line-height:1.5;color:var(--txt-dim)}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -9px}}
.is-loaded .fc-a{animation:bob 7s ease-in-out 2.4s infinite}
.is-loaded .fc-b{animation:bob 8s ease-in-out 2.9s infinite}
.is-loaded .fc-c{animation:bob 7.5s ease-in-out 3.3s infinite}

.scroll-cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  display:grid;justify-items:center;gap:8px;font-size:.6875rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--txt-faint);font-weight:600;
}
.scroll-cue::after{
  content:"";width:1px;height:34px;
  background:linear-gradient(var(--txt-faint),transparent);
  animation:cue 2.2s var(--ease) infinite;
}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============================================================
   TWO AGES (signature score reveal)
   ============================================================ */
.ta-wrap{position:relative;height:330vh}
.ta-stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:clip;
  display:grid;place-items:center;text-align:center;
}
.ta-stage::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(52% 40% at 50% 52%,rgba(61,107,94,.07),transparent 70%);
  opacity:0;transition:opacity 1s var(--ease);
}
.ta-stage[data-phase="2"]::before,.ta-stage[data-phase="3"]::before,.ta-stage[data-phase="4"]::before{opacity:1}

.ta-el{position:absolute;left:50%;transform:translateX(-50%);transition:opacity .7s var(--ease),transform .9s var(--ease);width:min(92vw,860px)}

.ta-kicker{top:46%;transform:translate(-50%,-50%)}
.ta-kicker p{margin-top:14px;color:var(--txt-dim);font-size:1.0625rem}
.ta-stage:not([data-phase="0"]) .ta-kicker{opacity:0;transform:translate(-50%,-66%);pointer-events:none}

.ta-cal{top:50%;transform:translate(-50%,-50%);transition:all .9s var(--ease)}
.ta-cal .cap{font-size:.75rem;letter-spacing:.26em;text-transform:uppercase;color:var(--txt-faint);font-weight:600;margin-bottom:8px;transition:inherit}
.ta-cal .num{
  font-family:var(--font-display);font-weight:400;letter-spacing:-.03em;line-height:.95;
  font-size:clamp(6.875rem,22vw,14.75rem);color:var(--txt);
  transition:inherit;
}
.ta-cal .unit{font-size:clamp(1.125rem,2.6vw,1.75rem);color:var(--txt-dim);font-family:var(--font-display)}
.ta-stage[data-phase="0"] .ta-cal{opacity:0;transform:translate(-50%,-34%)}
.ta-stage[data-phase="2"] .ta-cal,
.ta-stage[data-phase="3"] .ta-cal,
.ta-stage[data-phase="4"] .ta-cal{
  top:13%;transform:translate(-50%,0) scale(.34);opacity:.55;
}
.ta-stage[data-phase="2"] .ta-cal .num,
.ta-stage[data-phase="3"] .ta-cal .num,
.ta-stage[data-phase="4"] .ta-cal .num{color:var(--txt-faint)}

.ta-bio{top:50%;transform:translate(-50%,-46%);opacity:0;width:min(92vw,700px);display:grid;justify-items:center}
.ta-stage[data-phase="2"] .ta-bio,
.ta-stage[data-phase="3"] .ta-bio,
.ta-stage[data-phase="4"] .ta-bio{opacity:1;transform:translate(-50%,-50%)}
.ta-stage[data-phase="3"] .ta-bio,
.ta-stage[data-phase="4"] .ta-bio{transform:translate(-50%,-58%) scale(.92)}
.ta-ringbox{position:relative;display:grid;place-items:center}
.ta-ringbox svg{display:block}
.ta-track{fill:none;stroke:var(--cogua-sand);stroke-width:13}
.ta-arc{
  fill:none;stroke:var(--teal);stroke-width:13;stroke-linecap:round;
  transform:rotate(-90deg);transform-origin:center;
  stroke-dasharray:980.18;stroke-dashoffset:980.18;
}
.ta-center{position:absolute;display:grid;justify-items:center;gap:2px}
.ta-num{
  font-family:var(--font-display);font-weight:400;letter-spacing:-.03em;line-height:1;
  font-size:clamp(4.875rem,11vw,7.75rem);
  font-variant-numeric:tabular-nums;color:var(--txt);
}
.ta-bio .cap{font-size:.71875rem;letter-spacing:.26em;text-transform:uppercase;color:var(--teal);font-weight:700}

.ta-proof{top:71%;opacity:0;transform:translate(-50%,16px);display:grid;justify-items:center;gap:16px}
.ta-stage[data-phase="3"] .ta-proof,.ta-stage[data-phase="4"] .ta-proof{opacity:1;transform:translate(-50%,0)}
.ta-stamp{
  display:inline-flex;align-items:center;gap:9px;padding:11px 22px;border-radius:999px;
  background:rgba(61,107,94,.12);border:1px solid rgba(61,107,94,.4);color:var(--teal);
  font-weight:700;font-size:1rem;letter-spacing:.01em;
}
.ta-stamp i{width:8px;height:8px;border-radius:50%;background:var(--teal)}
.ta-rangewrap{width:min(78vw,420px);display:grid;gap:7px}
.ta-rangewrap .range{height:6px;margin:0;background:var(--cogua-sand)}
.ta-evi{font-size:.8125rem;color:var(--txt-dim);letter-spacing:.02em}

.ta-says{top:84%;opacity:0;transform:translate(-50%,16px);max-width:560px}
.ta-stage[data-phase="4"] .ta-says{opacity:1;transform:translate(-50%,0)}
.ta-says b{display:block;font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;color:var(--teal);font-weight:700;margin-bottom:9px}
.ta-says p{font-family:var(--font-display);font-weight:400;font-size:clamp(1.125rem,2.2vw,1.4375rem);line-height:1.45;color:var(--txt)}
.ta-sample{position:absolute;right:26px;bottom:24px;font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-faint);font-weight:600;border:1px solid var(--line);padding:5px 11px;border-radius:99px}

/* ============================================================
   LOOP
   ============================================================ */
.loop-row{
  display:grid;grid-template-columns:repeat(7,1fr);gap:0;align-items:start;
  position:relative;margin:14px 0 30px;
}
.loop-row::before{
  content:"";position:absolute;left:7%;right:7%;top:25px;height:1.5px;
  background:linear-gradient(90deg,transparent,var(--line-strong) 12%,var(--line-strong) 88%,transparent);
}
.lnode{display:grid;justify-items:center;gap:11px;text-align:center;position:relative;padding:0 6px}
.lnode i{
  width:50px;height:50px;border-radius:50%;background:var(--pine-1);
  border:1px solid var(--line-strong);display:grid;place-items:center;
  font-size:1.0625rem;position:relative;z-index:1;color:var(--txt-dim);
  transition:border-color .45s,color .45s,box-shadow .45s,background .45s,transform .45s var(--ease);
}
.lnode b{font-size:.78125rem;font-weight:600;letter-spacing:.01em}
.lnode span{font-size:.6875rem;color:var(--txt-faint);line-height:1.45}
.lnode.pulse i{
  border-color:var(--teal);color:var(--teal);background:rgba(61,107,94,.1);
  box-shadow:0 0 0 6px rgba(61,107,94,.08);transform:scale(1.08);
}
.loop-note{
  max-width:640px;margin:0 auto;text-align:center;
  font-size:clamp(1rem,1.6vw,1.125rem);color:var(--txt-dim);line-height:1.7;
}
.loop-note strong{color:var(--teal);font-weight:var(--cogua-weight-strong)}

/* ============================================================
   JOURNEY (scrollytelling with phone)
   ============================================================ */
.jy-wrap{position:relative;height:calc(7 * 92vh + 100vh)}
.jy-stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:clip;
  display:flex;align-items:center;
}
.jy-stage .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center;width:100%}
.jy-copy{display:grid;gap:18px;max-width:430px;justify-self:end;text-align:right;justify-items:end}
.jy-count{font-size:.75rem;letter-spacing:.26em;color:var(--txt-faint);font-weight:600;font-variant-numeric:tabular-nums}
.jy-cap{position:relative;min-height:150px;width:100%}
.jy-cap p{
  position:absolute;inset:0;margin:0;
  font-family:var(--font-display);font-weight:var(--cogua-weight-heading);font-size:clamp(1.25rem,2.3vw,1.75rem);
  line-height:1.3;letter-spacing:-.015em;color:var(--txt);
  opacity:0;transform:translateY(20px);transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.jy-cap p.on{opacity:1;transform:none}
.jy-cap p small{display:block;margin-top:10px;font-family:var(--font-body);font-size:.875rem;color:var(--txt-dim);font-weight:400;line-height:1.6}
.jy-stage .phone{--phone-w:clamp(258px,24vh,300px)}
.jy-rail{display:grid;gap:9px;justify-self:start}
.jy-rail i{width:7px;height:7px;border-radius:99px;background:var(--line-strong);transition:height .4s var(--ease),background .4s}
.jy-rail i.on{height:24px;background:var(--teal)}
.jy-final{
  text-align:center;padding:0 var(--pad) clamp(90px,12vh,150px);max-width:820px;margin:0 auto;
}
.jy-final p{
  font-family:var(--font-display);font-weight:var(--cogua-weight-heading);
  font-size:clamp(1.5rem,3.2vw,2.5rem);line-height:1.22;letter-spacing:var(--cogua-tracking-heading);
}

/* ============================================================
   SIGNALS
   ============================================================ */
.sig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sig-card{
  background:var(--pine-1);border:1px solid var(--line-strong);border-radius:var(--r);
  padding:26px 24px;display:grid;gap:14px;align-content:start;
  transition:transform .5s var(--ease),box-shadow .4s;
}
.sig-card:hover{transform:translateY(-4px);box-shadow:var(--cogua-shadow-card)}
.sig-card i{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:1.0625rem;
  background:rgba(61,107,94,.1);border:1px solid rgba(61,107,94,.25);color:var(--teal);
}
.sig-card h3{font-size:1.03125rem;font-weight:600;letter-spacing:-.01em}
.sig-card ul{display:grid;gap:7px}
.sig-card li{font-size:.8125rem;color:var(--txt-dim);display:flex;gap:9px;line-height:1.5}
.sig-card li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--teal);margin-top:8px;flex:none;opacity:.8}
.sig-stats{
  margin-top:46px;display:flex;justify-content:center;gap:clamp(34px,7vw,90px);
  flex-wrap:wrap;text-align:center;
}
.sig-stats div{display:grid;gap:4px}
.sig-stats b{font-family:var(--font-display);font-weight:var(--cogua-weight-body);font-size:clamp(2.375rem,5vw,3.875rem);letter-spacing:-.02em;line-height:1}
.sig-stats span{font-size:.71875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-faint);font-weight:600}

/* ============================================================
   LIGHT SECTIONS (plan, science)
   ============================================================ */
.light{background:var(--bone);color:var(--ink)}

.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.acard{
  background:var(--cogua-white);border:1px solid var(--line-strong);border-radius:var(--r);
  padding:24px 24px 22px;display:grid;gap:12px;align-content:start;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;
}
.acard:hover{transform:translateY(-4px);box-shadow:var(--cogua-shadow-card)}
.acard .chip{margin-left:0;width:max-content;font-size:.6875rem}
.acard h3{font-size:1.125rem;font-weight:600;letter-spacing:-.012em}
.acard .say{font-size:.875rem;line-height:1.6;color:var(--txt-dim)}
.acard .say b{font-weight:700;color:var(--ink)}
.acard .why{font-size:.78125rem;color:var(--txt-faint);line-height:1.55;border-top:1px solid var(--line);padding-top:11px}
.plan-principle{
  margin-top:54px;border-radius:var(--r-lg);
  background:var(--ink);color:var(--txt);
  padding:clamp(30px,4.5vw,52px);display:grid;gap:14px;justify-items:center;text-align:center;
}
.plan-principle p{
  font-family:var(--font-display);font-weight:var(--cogua-weight-heading);font-size:clamp(1.25rem,2.4vw,1.6875rem);
  line-height:1.38;max-width:21em;
}
.plan-principle p em{color:var(--teal)}
.plan-principle span{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-faint);font-weight:600}

/* ============================================================
   CHECKUP + DASHBOARD MOCK
   ============================================================ */
.frag-row{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-bottom:14px}
.frag{
  background:var(--pine-1);border:1px solid var(--line-strong);border-radius:var(--r);
  padding:15px 10px;display:grid;gap:7px;justify-items:center;text-align:center;
}
.frag i{font-size:1rem;opacity:.8}
.frag b{font-size:.71875rem;font-weight:600;color:var(--txt-dim)}
.frag span{font-size:.625rem;color:var(--txt-faint)}
.converge{
  display:grid;justify-items:center;gap:4px;margin:6px 0 26px;color:var(--txt-faint);
}
.converge i{width:1px;height:30px;background:linear-gradient(var(--line-strong),var(--teal))}
.converge span{font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--teal)}

.browser{
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-strong);
  background:var(--pine-1);
  box-shadow:0 40px 80px -44px rgba(28,36,33,.32);
}
.browser-bar{
  display:flex;align-items:center;gap:14px;padding:13px 18px;
  border-bottom:1px solid var(--line);background:var(--bone);
}
.browser-bar .dots{display:flex;gap:6px}
.browser-bar .dots i{width:10px;height:10px;border-radius:50%;background:var(--pine-3);border:1px solid var(--line-strong)}
.browser-bar .url{
  flex:1;max-width:300px;margin:0 auto;text-align:center;
  font-size:11.5px;color:var(--txt-faint);background:var(--pine-1);
  border:1px solid var(--line);border-radius:8px;padding:6px 14px;letter-spacing:.02em;
}
.dash{display:grid;grid-template-columns:198px 1fr;min-height:480px}
.dash-side{
  border-right:1px solid var(--line);padding:20px 14px;display:grid;gap:4px;align-content:start;
  background:var(--pine-2);
}
.dash-side .wordmark{font-family:var(--font-display);font-size:16px;font-weight:var(--cogua-weight-heading);letter-spacing:0;margin:4px 8px 16px}
.dash-side a{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;
  font-size:13.5px;font-weight:500;color:var(--txt-dim);
}
.dash-side a i{width:8px;height:8px;border-radius:3px;border:1.5px solid currentColor;opacity:.7}
.dash-side a.on{background:rgba(61,107,94,.1);color:var(--teal);border:1px solid rgba(61,107,94,.22)}
.dash-side .dlock{margin-top:14px;font-size:10px;color:var(--txt-faint);padding:0 12px;line-height:1.6}
.dash-main{padding:22px 24px;display:grid;gap:16px;align-content:start}
.dash-hello{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dash-hello .app-avatar{width:46px;height:46px}
.dash-hello .who b{font-size:17px;font-weight:700;display:block;letter-spacing:-.01em}
.dash-hello .who span{font-size:11.5px;color:var(--txt-faint)}
.dash-hello .state-chip{margin:0 0 0 auto}
.dash-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:14px}
.dpanel{background:var(--pine-2);border:1px solid var(--line);border-radius:16px;padding:17px 18px;display:grid;gap:11px;align-content:start}
.dpanel h4{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-faint);font-weight:700}
.dscore{display:flex;align-items:center;gap:16px}
.dscore .ringbox{margin:0}
.dscore .meta{display:grid;gap:6px}
.dscore .meta .pill-younger{margin:0}
.dscore .meta small{font-size:11px;color:var(--txt-dim)}
.dlist{display:grid;gap:8px}
.dlist li{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--txt-dim);line-height:1.5}
.dlist li i{width:5px;height:5px;border-radius:50%;background:var(--teal);margin-top:7px;flex:none}
.dlist.amber li i{background:var(--amber)}
.dlist.slate li i{background:var(--slate)}
.dpanel .chip{margin-left:0;width:max-content}
.dash-foot{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vetline{
  margin-top:42px;max-width:680px;margin-left:auto;margin-right:auto;text-align:center;
  font-size:clamp(1rem,1.7vw,1.1875rem);line-height:1.65;color:var(--txt-dim);
}
.vetline strong{color:var(--txt);font-weight:var(--cogua-weight-strong)}

/* ============================================================
   ADVANCED
   ============================================================ */
.lanes{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:start}
.lane{display:grid;gap:10px}
.lane-h{
  display:flex;align-items:center;gap:8px;font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;padding:0 4px 9px;border-bottom:1px solid var(--line);
}
.lane-h i{width:8px;height:8px;border-radius:50%}
.lane.now .lane-h{color:var(--teal)}.lane.now .lane-h i{background:var(--teal)}
.lane.disc .lane-h{color:var(--amber)}.lane.disc .lane-h i{background:var(--amber)}
.lane.later .lane-h{color:var(--cogua-status-watch)}.lane.later .lane-h i{background:var(--cogua-status-watch)}
.lane.cond .lane-h{color:var(--violet)}.lane.cond .lane-h i{background:var(--violet)}
.lane.not .lane-h{color:var(--slate)}.lane.not .lane-h i{background:var(--slate)}
.adv-card{
  background:var(--pine-1);border:1px solid var(--line-strong);border-radius:var(--r);padding:15px 15px 14px;
  display:grid;gap:7px;transition:transform .45s var(--ease),box-shadow .35s;
}
.adv-card:hover{transform:translateY(-3px);box-shadow:var(--cogua-shadow-card)}
.adv-card b{font-size:.84375rem;font-weight:600;letter-spacing:-.005em}
.adv-card p{font-size:.71875rem;color:var(--txt-dim);line-height:1.55}
.adv-card .trg{font-size:.65625rem;color:var(--txt-faint);border-top:1px solid var(--line);padding-top:8px;line-height:1.5}
.adv-card .trg b{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);display:block;margin-bottom:3px;font-weight:700}
.adv-empty{
  border:1px dashed rgba(61,107,94,.4);border-radius:var(--r);padding:22px 15px;
  display:grid;gap:7px;justify-items:center;text-align:center;background:rgba(61,107,94,.05);
}
.adv-empty b{font-size:.84375rem;color:var(--teal);font-weight:600}
.adv-empty p{font-size:.71875rem;color:var(--txt-dim);line-height:1.55}
.adv-foot{
  margin-top:46px;text-align:center;display:grid;gap:12px;justify-items:center;
}
.adv-foot p{
  font-family:var(--font-display);font-weight:var(--cogua-weight-heading);font-size:clamp(1.25rem,2.4vw,1.75rem);letter-spacing:var(--cogua-tracking-heading);
}
.adv-foot small{font-size:.78125rem;color:var(--txt-faint);max-width:56ch;line-height:1.6}

/* ============================================================
   ACCESS
   ============================================================ */
/* No photograph sits behind Scout's progress phone: a reader could take any dog pictured here for the
   sample dog. A plain wash in the brand's forest gives the section its depth instead. */
.access{position:relative;overflow:clip}
.access::before{
  content:"";position:absolute;right:-12%;bottom:-18%;width:56%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(61,107,94,.10),transparent);pointer-events:none;
}
.access-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(34px,5vw,76px);align-items:center;position:relative;z-index:1}
.access-copy{display:grid;gap:22px}
.state-row{display:flex;flex-wrap:wrap;gap:9px}
.state-pill{
  font-size:.75rem;font-weight:600;padding:8px 15px;border-radius:999px;border:1px solid var(--line-strong);
  color:var(--txt-dim);background:var(--pine-1);display:inline-flex;gap:8px;align-items:center;
}
.state-pill i{width:6px;height:6px;border-radius:50%}
.state-pill.t{color:var(--teal);border-color:rgba(61,107,94,.4);background:rgba(61,107,94,.07)}
.state-pill.t i{background:var(--teal)}
.state-pill.a i{background:var(--amber)}
.state-pill.b i{background:var(--cogua-status-watch)}
.state-pill.c i{background:var(--copper)}
.atl{display:grid;gap:0;position:relative;margin-top:8px}
.atl::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:1.5px;background:var(--line-strong)}
.atl li{position:relative;padding:0 0 16px 30px}
.atl li:last-child{padding-bottom:0}
.atl li::before{content:"";position:absolute;left:0;top:5px;width:15px;height:15px;border-radius:50%;background:var(--pine-1);border:2px solid var(--slate)}
.atl li.hot::before{border-color:var(--teal);background:rgba(61,107,94,.2)}
.atl b{font-size:.875rem;font-weight:600;display:block;letter-spacing:-.005em}
.atl b small{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-faint);font-weight:700;margin-right:9px}
.atl p{font-size:.78125rem;color:var(--txt-dim);line-height:1.55;max-width:46ch}
.access-quote{
  font-size:clamp(.9375rem,1.5vw,1.0625rem);color:var(--txt);line-height:1.7;
  background:rgba(196,112,75,.07);border-left:3px solid var(--copper);padding:14px 18px;border-radius:0 10px 10px 0;
}
.access-stage{display:grid;justify-items:center;gap:22px}
.access-stage .phone{--phone-w:clamp(256px,21vw,294px)}

/* ============================================================
   SCIENCE (light)
   ============================================================ */
.sci-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,80px);align-items:start}
.sci-left{position:sticky;top:calc(var(--nav-h) + 30px);display:grid;gap:22px}
.sci-isnot{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
.sci-col{background:var(--cogua-white);border:1px solid var(--line-strong);border-radius:var(--r);padding:20px}
.sci-col h4{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;margin-bottom:13px}
.sci-col.is h4{color:var(--cogua-status-keep)}.sci-col.not h4{color:var(--cogua-status-add)}
.sci-col li{font-size:.84375rem;line-height:1.55;color:var(--txt-dim);display:flex;gap:9px;padding:4px 0}
.sci-col.is li::before{content:"+";color:var(--cogua-status-keep);font-weight:700}
.sci-col.not li::before{content:"\00d7";color:var(--cogua-status-add);font-weight:700}
.estack{display:grid;gap:10px}
.elayer{
  background:var(--cogua-white);border:1px solid var(--line-strong);border-radius:var(--r);
  padding:16px 18px;display:flex;align-items:center;gap:14px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.elayer:hover{transform:translateX(6px);box-shadow:var(--cogua-shadow-card)}
.elayer i{
  width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  font-size:.875rem;background:rgba(46,138,115,.1);color:var(--cogua-status-keep);border:1px solid rgba(46,138,115,.25);
}
.elayer b{font-size:.875rem;font-weight:600;display:block;letter-spacing:-.005em}
.elayer span{font-size:.75rem;color:var(--txt-faint);line-height:1.5;display:block}
.elayer.core{background:var(--ink);border-color:var(--ink)}
.elayer.core b{color:var(--txt)}
.elayer.core span{color:var(--txt-dim)}
.elayer.core i{background:rgba(196,112,75,.16);color:var(--teal);border-color:rgba(196,112,75,.35)}
.sci-proofs{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.sci-proofs span{
  font-size:.75rem;font-weight:600;padding:8px 14px;border-radius:999px;
  border:1px solid var(--line-strong);color:var(--txt-dim);background:var(--cogua-white);
}
.sci-note{margin-top:18px;font-size:.78125rem;color:var(--txt-faint);line-height:1.65;max-width:54ch}

/* ============================================================
   PRICING
   ============================================================ */
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:880px;margin:0 auto}
.price{
  background:var(--pine-1);border:1px solid var(--line-strong);border-radius:var(--r-lg);
  padding:clamp(28px,3.5vw,40px);display:grid;gap:18px;align-content:start;position:relative;overflow:hidden;
}
.price.hot{border:2px solid var(--teal);background:var(--pine-1)}
.price .tag{
  position:absolute;top:20px;right:20px;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--teal);border:1px solid rgba(61,107,94,.4);padding:5px 11px;border-radius:99px;
  background:rgba(61,107,94,.08);
}
.price h3{font-size:.875rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--txt-dim)}
/* Where the card is narrow for its text (a phone, or enlarged text, read in em), the "Coming later"
   tag sits in the flow above the plan's name instead of in the corner over it (the reviewers' PP-2). */
@media (max-width:40em){
  .price .tag{position:static;display:inline-block;justify-self:start;margin-bottom:12px}
}
/* The price never breaks inside its figure ("$14 / 9" at 200% text on a phone, the reviewers' PP-2):
   the figure breaks only between words and "one time" wraps under it. */
.price .amt{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 9px}
.price .amt b{overflow-wrap:normal}
.price .amt b{font-family:var(--font-display);font-weight:var(--cogua-weight-body);font-size:clamp(2.875rem,5vw,3.75rem);letter-spacing:-.02em;line-height:1}
.price .amt span{font-size:.875rem;color:var(--txt-faint)}
.price .alt{font-size:.8125rem;color:var(--txt-dim);margin-top:-8px}
.price p.desc{font-size:.90625rem;color:var(--txt-dim);line-height:1.6}
.price ul{display:grid;gap:9px}
.price li{font-size:.84375rem;color:var(--txt-dim);display:flex;gap:10px;line-height:1.5}
.price li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--teal);margin-top:8px;flex:none}
.price .btn,.price .btn-ghost{justify-content:center;margin-top:4px}
.price-bridge{
  text-align:center;margin-top:34px;font-size:.875rem;color:var(--txt-dim);
}
.price-bridge b{color:var(--txt)}

/* ============================================================
   CLOSER + FOOTER
   ============================================================ */
.closer{position:relative;min-height:78vh;display:flex;align-items:flex-end;overflow:clip;padding:0}
.closer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.closer::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,36,33,.3) 0%,rgba(28,36,33,.2) 32%,rgba(28,36,33,.86) 100%);
}
.closer .wrap{position:relative;z-index:2;padding-bottom:clamp(60px,9vh,110px);display:grid;gap:24px;justify-items:start}
.closer h2{max-width:12em;color:var(--txt)}

/* ---------- reveals ---------- */
[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].in{opacity:1;transform:none}

/* ---------- reduced motion / no-js ---------- */
.no-motion *,.no-motion *::before,.no-motion *::after{animation:none!important;transition:none!important}
.no-motion [data-reveal],.no-motion .lc{opacity:1;transform:none}
.no-motion .hero-bg img{opacity:.9;transform:none}
.no-motion .hero-stage .phone{opacity:1;transform:none}
.no-motion .float-card{opacity:1;transform:none}
.no-motion .ring-arc{stroke-dashoffset:95}
.no-motion .ta-wrap{height:auto}
.no-motion .ta-stage{position:relative;height:auto;min-height:0;padding:90px 0;display:grid;gap:34px;place-items:center}
.no-motion .ta-el{position:relative;left:auto;top:auto;transform:none;opacity:1}
.no-motion .ta-cal{transform:none}
.no-motion .ta-arc{stroke-dashoffset:271}
.no-motion .jy-wrap{height:auto}
.no-motion .jy-stage{position:relative;height:auto;padding:60px 0}
.no-motion .jy-cap{min-height:0;display:grid;gap:22px}
.no-motion .jy-cap p{position:relative;opacity:1;transform:none}
.no-motion .jg.off{opacity:1;transform:none;position:relative;left:auto;right:auto}
.no-motion .s-pend .evi-chips span{opacity:1;transform:none}
.no-motion .app-screen{position:relative;min-height:100%;opacity:1;transform:none;pointer-events:auto}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .sig-grid{grid-template-columns:1fr 1fr}
  .plan-grid{grid-template-columns:1fr 1fr}
  /* The five lanes wrap into as many columns as fit instead of scrolling sideways with cut-off
     columns and no hint that they scroll (the reviewers' PP-3): one column on a phone. */
  .lanes{grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
  .lane{scroll-snap-align:start}
  .frag-row{grid-template-columns:repeat(4,1fr)}
  .dash{grid-template-columns:170px 1fr}
  .dash-grid{grid-template-columns:1fr 1fr}
  .dash-foot{grid-template-columns:1fr}
}
@media (max-width:900px){
  .hero{min-height:0;padding-top:calc(var(--nav-h) + 44px)}
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .hero-bg img{width:100%;right:0;opacity:.35;-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 80%);mask-image:linear-gradient(180deg,#000 30%,transparent 80%)}
  .is-loaded .hero-bg img{opacity:.35}
  .hero-stage{padding:0 0 12px}
  .fc-a{left:0;top:-3%}
  .fc-b{right:0;bottom:30%}
  .fc-c{display:none}
  .scroll-cue{display:none}
  .jy-stage .wrap{grid-template-columns:1fr;gap:0;position:relative;height:100%;align-content:center;justify-items:center}
  .jy-rail{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%)}
  .jy-copy{order:2;max-width:560px;justify-self:center;text-align:center;justify-items:center;margin-top:26px}
  .jy-cap{min-height:128px}
  .jy-cap p{font-size:1.1875rem}
  .jy-cap p small{font-size:.8125rem}
  .jy-stage .phone{--phone-w:min(232px,30vh)}
  .access-grid{grid-template-columns:1fr}
  .sci-grid{grid-template-columns:1fr}
  .sci-left{position:static}
  .price-grid{grid-template-columns:1fr}
  .dash{grid-template-columns:1fr}
  .dash-side{display:flex;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--line);padding:14px}
  .dash-side .wordmark{display:none}
  .dash-side .dlock{display:none}
  .dash-side a{padding:8px 12px;font-size:12.5px}
}
@media (max-width:640px){
  .sig-grid{grid-template-columns:1fr}
  .plan-grid{grid-template-columns:1fr}
  .frag-row{grid-template-columns:repeat(2,1fr)}
  .loop-row{grid-template-columns:1fr;gap:14px;justify-items:start}
  .loop-row::before{left:25px;right:auto;top:8%;bottom:8%;width:1.5px;height:auto}
  .lnode{grid-template-columns:50px 1fr;justify-items:start;text-align:left;gap:4px 16px}
  .lnode i{grid-row:span 2}
  .ta-says{top:80%}
  .ta-proof{top:69%}
}

/* ============================================================
   HOW IT WORKS page
   ============================================================ */
.hiw-hero{padding:calc(var(--nav-h) + clamp(70px,11vh,130px)) 0 clamp(50px,7vh,90px);position:relative;overflow:clip}
.hiw-hero .wrap{display:grid;gap:24px;max-width:880px}
.hiw-hero::before{
  content:"";position:absolute;inset:-20% -10% auto;height:90%;
  background:radial-gradient(50% 60% at 50% 0%,rgba(61,107,94,.06),transparent 70%);
  pointer-events:none;
}
.step{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,5vw,80px);align-items:center;
  padding:clamp(56px,8vh,100px) 0;border-top:1px solid var(--line);
}
.step:first-of-type{border-top:0}
.step.flip .step-copy{order:2}
.step-copy{display:grid;gap:18px;max-width:480px}
.step-num{
  font-family:var(--font-display);font-weight:var(--cogua-weight-strong);font-size:.875rem;letter-spacing:.08em;
  color:var(--teal);display:flex;align-items:center;gap:12px;
}
.step-num::after{content:"";height:1px;width:42px;background:rgba(61,107,94,.4)}
.step-quote{
  font-size:clamp(.9375rem,1.5vw,1.0625rem);color:var(--txt);
  background:rgba(196,112,75,.07);border-left:3px solid var(--copper);padding:12px 16px;border-radius:0 10px 10px 0;line-height:1.6;
}
.step-visual{display:grid;justify-items:center}
.step-visual .phone{--phone-w:clamp(250px,22vw,288px)}
.panel{
  width:min(100%,420px);background:var(--pine-1);border:1px solid var(--line-strong);
  border-radius:var(--r-lg);padding:24px;display:grid;gap:14px;
  box-shadow:0 30px 70px -40px rgba(28,36,33,.3);
}
.panel .drv .it{font-size:12.5px}
.panel .pcard .row b{font-size:14px}
.panel .pcard p{font-size:12px}
.step-photo{
  width:min(100%,440px);border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line-strong);position:relative;
  box-shadow:0 30px 70px -40px rgba(28,36,33,.3);
}
.step-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3.4}
.step-photo .overlay-chip{
  position:absolute;left:16px;bottom:16px;right:16px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(12px);
  border:1px solid var(--line-strong);border-radius:14px;padding:13px 15px;
}
.overlay-chip b{display:block;font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);font-weight:700;margin-bottom:6px}
.overlay-chip p{font-size:.78125rem;color:var(--txt-dim);line-height:1.55}

/* anatomy */
.anatomy{max-width:760px;margin:0 auto;display:grid;gap:14px}
.anat-card{
  background:var(--pine-1);border:1px solid var(--line-strong);border-radius:var(--r-lg);
  padding:clamp(24px,3.5vw,38px);display:grid;gap:16px;
}
.anat-card .row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.anat-card .row h3{font-size:1.3125rem;font-weight:600;letter-spacing:-.012em}
.anat-line{display:grid;grid-template-columns:128px 1fr;gap:14px;align-items:baseline;border-top:1px solid var(--line);padding-top:14px}
.anat-line b{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--teal)}
.anat-line.alt b{color:var(--amber)}
.anat-line.mute b{color:var(--slate)}
.anat-line p{font-size:.90625rem;color:var(--txt-dim);line-height:1.6}

.cta-band{
  border-radius:var(--r-lg);background:var(--ink);color:var(--txt);
  padding:clamp(34px,5vw,58px);
  display:grid;gap:18px;justify-items:center;text-align:center;
}
.cta-band h2{max-width:18em}
.cta-band .row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

@media (max-width:900px){
  .step{grid-template-columns:1fr;gap:34px}
  .step.flip .step-copy{order:0}
  .anat-line{grid-template-columns:1fr;gap:5px}
}

/* ============================================================
   Mobile polish
   ============================================================ */

@media (max-width:640px){
  .ta-ringbox svg{width:min(76vw,300px);height:auto}
  .ta-proof{top:67%}
  .ta-says{top:81%;width:min(90vw,560px)}
  .ta-stamp{font-size:.84375rem;padding:9px 17px}
  .ta-rangewrap{width:min(82vw,360px)}
  .ta-evi{font-size:.75rem}
  .float-card{width:154px;padding:11px 12px}
  .float-card p{font-size:.6875rem}
  .fc-a{left:-2px;top:-4%}
  .fc-b{right:-2px;bottom:8%}
  .hero-stage{padding-top:20px}
  .hero-proof{gap:18px}
  .jy-stage .phone{--phone-w:min(224px,27vh)}
  .jy-cap{min-height:142px}
  .jy-cap p{font-size:1.09375rem;line-height:1.4}
  .jy-cap p small{font-size:.78125rem;margin-top:8px}
  .jy-copy{margin-top:18px;gap:12px}
  .dash{min-height:0}
  .dash-grid,.dash-foot{grid-template-columns:1fr}
  .dash-main{padding:16px;gap:12px}
  .browser{border-radius:18px}
  .atl p{max-width:none}
  .price{padding:26px 22px}
  /* Stacked, full width: side by side, the longer label wrapped one word per line (the reviewers' PP-1). */
  .cta-band .row{width:100%;flex-direction:column;align-items:stretch}
  .cta-band .row .btn,.cta-band .row .btn-ghost{flex:none;width:100%;justify-content:center}
  .closer{min-height:64vh}
}

/* ============================================================
   Exact-for-this-dog contrast (Plan section)
   ============================================================ */
.exact{display:grid;grid-template-columns:1fr 1.15fr;gap:16px;margin-top:16px}
.ex-noise,.ex-one{border-radius:var(--r);padding:26px 26px 24px;display:grid;gap:10px;align-content:start}
.ex-noise{background:var(--bone-2);border:1px solid var(--line-strong)}
.ex-cap{font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700}
.ex-noise .ex-cap{color:var(--txt-faint)}
.ex-num{font-family:var(--font-display);font-weight:400;font-size:clamp(2.5rem,4.6vw,3.5rem);letter-spacing:-.02em;line-height:1}
.ex-noise .ex-num{color:rgba(28,36,33,.36)}
.ex-sub{font-size:.8125rem;color:var(--txt-faint)}
.ex-one .ex-sub{color:var(--txt-dim)}
.ex-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.ex-chips span{font-size:.71875rem;padding:6px 12px;border-radius:99px;border:1px dashed rgba(28,36,33,.25);color:var(--txt-faint)}
.ex-one{background:var(--ink);color:var(--txt);border:1px solid var(--ink)}
.ex-one .ex-cap{color:var(--teal)}
.ex-rows{display:grid;gap:9px;margin-top:6px}
.ex-rows li{display:grid;grid-template-columns:4.125rem 1fr;gap:12px;font-size:.78125rem;align-items:baseline}
.ex-rows b{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);font-weight:700}
.ex-rows span{color:var(--txt-dim);line-height:1.5}
.ex-line{margin:26px auto 0;max-width:660px;text-align:center;font-size:.9375rem;color:var(--txt-dim);line-height:1.65}
.ex-line b{color:var(--ink);font-weight:600}
.ex-line + .plan-principle{margin-top:34px}
@media (max-width:900px){.exact{grid-template-columns:1fr}}


/* ============================================================
   ILLUSTRATIVE SAMPLE AND SHOWCASE (program plan 12.7.6.9)
   Scout, the one sample report's dog, and the homepage's
   illustrative examples. Values are checked against
   scripts/fixtures/illustrative_sample_dog.mjs by
   scripts/test_illustrative_sample.mjs.
   ============================================================ */

/* The sample label sits in the app screen's flow, under the status bar, so it never covers the
   dog's name the way the old corner tag did. */
.sample-tag{position:static;align-self:center;margin:-8px auto 9px;white-space:nowrap;background:var(--cogua-white)}
/* The journey phone carries no sample tag since ledger 2026-10-03f (the sample is named once, at the
   hero). A screen 420px or taller keeps the tag's 24px row in its top
   padding (58px plus 24px), so its scenes sit where they did and are not left a quarter blank above the
   tabs; a shorter screen uses the row for its content, which keeps the tabs inside it. Both are read by
   scripts/test_site_brand_browser.mjs (the blank check at 1280 and 390 by 844, the sideways and tabs
   check at 360 by 640, 360 by 600 and 320 by 568). */
@container (min-height:420px){#jyPhone .app-journey{padding-top:82px}}
/* Sized in rem, at the 11px label size, so they follow the reader's default text size
   (scripts/test_site_brand_browser.mjs reads them on the homepage at 100% and 200% text). */
.vx-label{display:block;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--txt-faint)}
.sample-label{
  display:inline-block;width:fit-content;max-width:100%;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--txt-faint);border:1px solid var(--line-strong);border-radius:99px;padding:5px 12px;background:var(--cogua-white)
}
.tag-preview{
  display:inline-block;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;vertical-align:middle;
  color:var(--cogua-status-ask);border:1px solid rgba(93,75,184,.4);background:rgba(93,75,184,.07);border-radius:99px;padding:2px 8px;margin-left:6px
}
.hero-photo-cap{position:absolute;right:var(--pad);bottom:22px;z-index:3;max-width:300px;text-align:right;font-size:.6875rem;line-height:1.5;color:var(--txt-faint)}
.dash-num{font-size:36px}
.dlist li.raise i{background:var(--amber)}

/* Two ages: the ring counts from the calendar age to the biological age. Without motion (or
   without script, see the page's noscript rules) the two numbers sit side by side, compact. */
.no-motion .ta-stage{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"kicker kicker" "cal bio" "proof proof" "says says" "sample sample";
  gap:26px 44px;padding:80px var(--pad)
}
.no-motion .ta-stage .ta-el{opacity:1;transform:none;width:auto}
.no-motion .ta-kicker{grid-area:kicker}
.no-motion .ta-cal{grid-area:cal;justify-self:end;align-self:center}
.no-motion .ta-cal .num{font-size:clamp(4rem,10vw,7.5rem);color:var(--txt-faint)}
.no-motion .ta-bio{grid-area:bio;justify-self:start}
.no-motion .ta-ringbox svg{width:min(64vw,260px);height:auto}
.no-motion .ta-num{font-size:clamp(3.5rem,8vw,6rem)}
.no-motion .ta-proof{grid-area:proof}
.no-motion .ta-says{grid-area:says}
.no-motion .ta-sample{grid-area:sample;position:static;justify-self:center}
.ta-rangewrap .range .band{background:linear-gradient(90deg,rgba(61,107,94,.3),rgba(61,107,94,.7))}

/* Journey: every caption shares one grid cell, so the box is as tall as the longest caption and
   the 01 / 07 count below it can never be overlapped (the founder's 04 / 07 screenshot). */
.jy-cap{display:grid}
.jy-cap p{position:relative;inset:auto;grid-area:1 / 1}
.no-motion .jy-cap p{grid-area:auto}
.no-motion .jy-count,.no-motion .jy-rail{display:none}

/* Showcase */
.vx{background:var(--bone)}
.vx-controls{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:.75rem;margin:-26px 0 28px;text-align:center}
.vx-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.vx-chip{
  font-size:.84375rem;font-weight:600;padding:.5625em 1.1875em;border-radius:99px;border:1.5px solid var(--line-strong);
  background:var(--cogua-white);color:var(--txt-dim);transition:background .2s,border-color .2s,color .2s
}
.vx-chip:hover{border-color:var(--teal);color:var(--teal)}
.vx-chip[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:var(--cogua-white)}
.vx-chip:focus-visible{outline:none;box-shadow:var(--cogua-focus-ring)}
.vx-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vx-chip-all{border-style:dashed}
/* Three examples at first (ledger 2026-10-03f), so the grid is three wide on a desktop and one on a
   phone; an interest or All shows more in the same columns. */
.vx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.vx-card{
  background:var(--cogua-white);border:1px solid var(--line-strong);border-radius:var(--r);
  padding:1.125rem 1.125rem 1rem;display:flex;flex-direction:column;gap:.5625rem;min-width:0
}
.vx-card[hidden]{display:none}
.vx-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.5rem}
.vx-hook{font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--copper-ink);line-height:1.4;min-width:0}
.vx-dog{font-size:.75rem;color:var(--txt-faint);font-weight:600;line-height:1.45}
.vx-insight{font-size:1.03125rem;font-weight:600;line-height:1.32;letter-spacing:-.01em}
.vx-why{font-size:.8125rem;color:var(--txt-dim);line-height:1.55}
.vx-do{font-size:.8125rem;color:var(--txt);line-height:1.55;border-top:1px solid var(--line);padding-top:.5625rem}
.vx-do b{display:block;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:2px}
.vx-figs{display:flex;flex-wrap:wrap;gap:.375rem}
.vx-figs li{font-size:.71875rem;font-weight:600;color:var(--txt-dim);background:var(--cogua-cream);border:1px solid var(--line);border-radius:8px;padding:.25rem .5rem;line-height:1.4}
.vx-link{font-size:.8125rem;font-weight:700;color:var(--teal)}
.vx-foot{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:32px}
.vx-foot .btn,.vx-foot .btn-ghost{white-space:normal;text-align:center;justify-content:center}
@media (max-width:1000px){.vx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .hero-photo-cap{position:relative;right:auto;bottom:auto;margin:6px auto 0;padding:0 var(--pad);text-align:center;max-width:none}
}
@media (max-width:640px){
  .vx-grid{grid-template-columns:1fr}
  .no-motion .ta-stage{grid-template-columns:1fr;grid-template-areas:"kicker" "cal" "bio" "proof" "says" "sample";gap:22px}
  .no-motion .ta-cal,.no-motion .ta-bio{justify-self:center}
}
.ptl b span,.ptl span span{display:inline;font-size:inherit;color:inherit;line-height:inherit}
.ptl b .tag-preview{display:inline-block;font-size:.6875rem;color:var(--cogua-status-ask);line-height:1.3;margin-left:4px;padding:1px 6px}
/* Journey scene 01: Scout's profile fills the phone while the caption introduces him. */
.jg-profile{gap:4px}
.jg-profile .it{display:block;padding:5px 10px;line-height:1.35}
.jg-profile .it b{display:block;font-size:8.4px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);font-weight:700;margin-bottom:1px}
.jg-profile .it span{display:inline;font-size:inherit;color:inherit}
.no-motion .jg.off{display:none!important}
/* How It Works: Scout's profile. */
.panel>.sample-label{justify-self:start}
.anatomy>.sample-label{justify-self:start}
.profile-head{display:flex;align-items:center;gap:12px}
.profile-head .app-avatar{width:52px;height:52px}
.profile-head .app-id b{font-size:18px}
.profile-head .app-id span{font-size:12.5px}
.profile-rows{display:grid;gap:0}
.profile-rows li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:13px;align-items:baseline}
.profile-rows b{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);font-weight:700}
.profile-rows span{color:var(--txt-dim);line-height:1.5}
@media (max-width:640px){.profile-rows li{grid-template-columns:1fr;gap:2px}}
.anat-card .row .chip{margin-left:0}
/* Narrow phones (mobile audit M07, M13): the hero photo, the caption, the dashboard mock and the
   Access photo stay inside the screen, so the landing page joins the narrow-phone sweep. */
@media (max-width:900px){
  .hero{flex-wrap:wrap}
  .hero-photo-cap{flex-basis:100%}
  .hero-bg img,.is-loaded .hero-bg img{left:0;right:0;width:100%;transform:none}
  .dash{grid-template-columns:minmax(0,1fr)}
  .dash-main,.dash-side{min-width:0}
  .dash-hello .who{min-width:0}
}
@media (max-width:640px){
  .dash-grid,.dash-foot{grid-template-columns:minmax(0,1fr)}
  .dscore{flex-wrap:wrap}
}
/* Two ages: the calendar age shrinks toward its own top, so the small number never sits on the ring. */
.ta-stage[data-phase="2"] .ta-cal,.ta-stage[data-phase="3"] .ta-cal,.ta-stage[data-phase="4"] .ta-cal{transform-origin:50% 0}

/* In the one-column journey the 01 / 07 count sits under the caption, so an entering caption slides
   in by less than the gap above the count and never passes over it, even mid-transition. The browser
   check in scripts/test_site_brand_browser.mjs measures that gap in every scene. */
@media (max-width:900px){
  .jy-cap p{transform:translateY(8px)}
  .jy-copy{gap:16px}
}

/* Narrow phones: the hero's float cards sit in a row under the phone instead of over it, so they never
   cover the phone's sample label or its "What matters most" text. The browser check in
   scripts/test_site_brand_browser.mjs measures both at 390px. */
@media (max-width:480px){
  .hero-stage{flex-wrap:wrap;gap:12px}
  .hero-stage .float-card{position:relative;inset:auto;width:calc(50% - 6px);order:2}
}

/* The hero's float cards beside the phone, never over its text (the reviewers' PP-5 and SV3-2).
   Where they float, they are callouts of the phone mockup, so their type is at the mockup's scale in
   px, like the tags inside the mockups: a reader's larger default text grows the page, not a callout
   pinned beside a fixed-size phone, which is what made them cover each other and the phone at 175 to
   200% text. On a wide desktop each card hangs off the phone's own edge (from --phone-w), overlapping
   only its bezel; between 901 and 1180px there is no room beside the phone, so the cards sit in a row
   under it, as they do on a phone. scripts/test_site_brand_browser.mjs reads the cards against each
   other and against every line of the phone's screen at 1024, 1280 and 1440px, at 100, 125 and 200%
   text, and at 390px. */
@media (min-width:481px) and (max-width:900px),(min-width:1181px){
  .hero-stage .float-card b{font-size:11px}
  .hero-stage .float-card p{font-size:12px}
}
@media (min-width:481px) and (max-width:640px){
  .hero-stage .float-card p{font-size:11px}
}
@media (min-width:1181px){
  .hero-stage .float-card{width:156px;padding:11px 13px}
  .hero-stage .fc-a{left:calc(50% - var(--phone-w) / 2 - 146px);top:9%}
  .hero-stage .fc-c{left:calc(50% - var(--phone-w) / 2 - 146px);bottom:6%}
  .hero-stage .fc-b{left:calc(50% + var(--phone-w) / 2 - 10px);right:auto;top:46%;bottom:auto}
}
@media (min-width:901px) and (max-width:1180px){
  .hero-stage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
  .hero-stage .phone{grid-column:1 / -1;justify-self:center}
  .hero-stage .float-card{position:relative;inset:auto;width:auto}
}

/* The journey phone sizes its scenes to its own screen, read by container queries on .phone-screen,
   not to the viewport. A tall screen (the 1280px layout) adds the score scene's range and evidence and
   the Access scene's two check-ins (.jg-wide), so the phone is not half empty beside the caption. Below
   480px of screen height the cards tighten, below 430px the extras marked .jg-roomy drop, below 400px
   the dog's header drops, and below 360px the last extras go; below 210px of screen width the padding,
   header and tabs tighten. Which of these a given viewport reaches depends on the phone's size there,
   so no viewport is named here. scripts/test_site_brand_browser.mjs measures every scene at 1280 and
   390px, pinned and in the still frame, and at short phone viewports that nothing in the screen runs
   past it sideways. */
.phone-screen{container-type:size}
@container (max-height:480px){
  .jg-wide{display:none!important}
  .drv{gap:4px}
  .drv .it{padding:5px 8px;font-size:10.2px;line-height:1.35}
  .drv .lab{margin:3px 0 0}
  .pcard{padding:8px 10px}
  .pcard .row{flex-wrap:wrap;gap:4px 8px;margin-bottom:3px}
  .pcard .row .chip{order:-1;margin-left:0}
  .pcard .row b{flex-basis:100%}
  .pcard p{font-size:10px;line-height:1.45}
  #jgTl .app-title{margin-bottom:4px}
  .ptl li{padding-bottom:8px}
  .state-chip{margin-bottom:6px}
  .next-row{margin-top:6px}
}
@container (max-height:430px){.jg-roomy{display:none!important}}
@container (max-height:400px){#jgHead{display:none!important}}
@container (max-height:360px){
  .jg-extra,.jy-stage.s7 #jgTl .ptl li:first-child{display:none!important}
  .jg-profile .it{padding:4px 8px}
}
@container (max-width:210px){
  .app-screen{padding-left:12px;padding-right:12px}
  .jg.off{left:12px;right:12px}
  .app-head{gap:8px;margin-bottom:8px}
  .app-head .app-avatar{width:30px;height:30px}
  .app-id b{font-size:13px}
  .app-id span{font-size:9.5px;white-space:nowrap}
  .app-tabs span{font-size:7.4px;letter-spacing:0}
}
/* The smallest phones (a 320px viewport gives a screen about 131px wide): the tabs and the two pills
   tighten so nothing in the screen runs past it sideways (the reviewers' SV3-3 check). */
@container (max-width:140px){
  .app-screen{padding-left:9px;padding-right:9px}
  .jg.off{left:9px;right:9px}
  .app-tabs span{font-size:6.6px}
  .pill-younger,.state-chip{font-size:9px;padding-left:8px;padding-right:8px;white-space:normal;max-width:100%}
}
#jgScoreMore{display:grid;gap:6px;margin-top:10px}
#jgTl .app-title{font-size:15px;margin-bottom:8px}
/* A price and its Preview price label start a line together when they fit, and wrap when they do not. */
.price-line{display:inline-block}
/* The drivers scene carries the score as one line, so every driver fits above the tabs. */
.drv-score{display:flex;align-items:baseline;gap:8px;margin:0}
.drv-score b{font-size:22px;line-height:1.1;font-weight:500;letter-spacing:-.02em;color:var(--txt)}
.drv-score span{font-size:10.8px;color:var(--teal);font-weight:600}
.drv-score span span{font-size:inherit;color:inherit}
@media (max-width:900px){.sample-tag{letter-spacing:.08em;padding:4px 7px}}
/* The last scene adds the steps and the next checkpoint, so its timeline keeps the two scored rows. */
.jy-stage.s7 #jgTl .jg-wide,.jy-stage.s7 #jgTl .jg-extra{display:none}

/* Type follows the reader's default text size. Page text on the landing pages is sized in rem. The
   phone and dashboard mockups (and the app cards in How It Works panels) are drawn in px, as pictures of
   a screen, so their text, tags included, keeps the mockup's own scale. On the homepage, uppercase
   labels and tags outside the mockups and the shared footer are at least 11px at the default size.
   scripts/test_site_brand_browser.mjs reads every visible piece of homepage text at 100% and 200% text:
   page text doubles, mockup text holds, and no such label is under 11px. */
/* With enlarged text on a phone, a call to action wraps and a long word in a large heading or figure
   breaks, instead of pushing the page sideways (the narrow-phone sweep in
   scripts/test_site_brand_browser.mjs reads every public page at 320 and 360px with 200% text).
   Automatic hyphenation (hyphens:auto) is not used: a browser that carries an English hyphenation
   dictionary splits with it a word that would fit whole on the next line, and a browser without one
   shows nothing, which is how four homepage headings broke on CI's Chromium 1234 and passed on the
   shared machine's Chromium 1194 (program plan register 12.7.6.12, 2026-10-06). The PP-2 check in
   that script fails any homepage text at 390px and 200% text whose style asks for it. */
@media (max-width:640px){
  .btn{white-space:normal}
  .h-display,.h-1,.h-2,.ex-num,.hero-proof b,.sig-stats b,.ta-cal .num,.ta-num,.frag b{overflow-wrap:anywhere}
  .frag-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,7.5rem),1fr))}
  .sci-grid{grid-template-columns:minmax(0,1fr)}
  .sci-isnot{grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr))}
}
/* Enlarged text on a narrow screen: a screen narrower than 15 times the reader's text size, read in em,
   which a media query takes from the reader's default text size (a 390px phone at 200% text). The
   longest words in the large type, "biological" in the hero, "Hundreds" in the signal stats and
   "Endless" in the exact-plan card, came within a few percent of their lines there, so the side gutter
   and those cards' side padding tighten and the stats' figure tracks a little closer. Type sizes are
   unchanged (the 200% text reading in scripts/test_site_brand_browser.mjs holds page text to double).
   The PP-2 near-miss reading in the same script draws every piece of homepage text 8% larger at 390px
   and 200% text and fails on any word that then breaks mid-word. */
@media (max-width:15em){
  :root{--pad:12px}
  .ex-noise,.ex-one{padding-left:20px;padding-right:20px}
  .sig-stats b{letter-spacing:-.035em}
}
.phone-screen,.browser{font-size:16px}
.phone-screen .tag-preview,.browser .tag-preview,.panel .tag-preview{font-size:11px}

/* The biological age first on a phone (founder, 2026-10-06: bring the Bio Age result earlier on
   mobile). In the one-column hero the phone, with its score ring, follows the headline and its line
   of meaning, ahead of the buttons and the proof figures, which the nav's own button already
   repeats. The hero copy's box steps aside (display:contents) so its parts and the phone share one
   order; their entrance classes stay on each part. scripts/test_site_brand_browser.mjs reads the ring
   inside the first screen at 390 by 844 and catches the old order. */
@media (max-width:900px){
  .hero-grid{gap:20px;justify-items:start}
  .hero-copy{display:contents}
  .hero-copy>.eyebrow{order:1}
  .hero-copy>h1{order:2}
  .hero-copy>.hero-sub{order:3}
  .hero-stage{order:4;justify-self:stretch;margin:6px 0 10px}
  .hero-ctas{order:5}
  .hero-proof{order:6}
}

/* A preview showcase card's one mark, beside its owner hook (founder, 2026-10-06: the footer
   disclosure is gone, so what is on the way is said in place). */
.vx-mark{flex:none;font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--cogua-status-ask);border:1px solid rgba(93,75,184,.35);border-radius:99px;padding:.125rem .5rem;line-height:1.4;white-space:nowrap}