:root{
  /* ── Niggly brand tokens (from the production design system) ── */
  --cream:#F6F2E7;
  --off-white:#FAF9F3;
  --sage:#C9D5B8;
  --green-mid:#6F9B6B;
  --green-bright:#3FAE6C;
  --forest:#2F7A4C;
  --forest-deep:#123B27;
  --orange:#D97A34;
  --orange-text:#9C4812;
  --orange-cta:#B05418;
  --forest-text:#22603B;
  --green-link:#5CCB8A;

  --cream-shade:#EDE8DA;
  --sage-pale:#DDE5D1;
  --forest-hair:rgba(47,122,76,0.28);
  --forest-hair-strong:rgba(47,122,76,0.65);
  --orange-hair:rgba(217,122,52,0.55);
  --orange-bg:rgba(217,122,52,0.12);
  --cream-hair:rgba(246,242,231,0.32);
  --cream-hair-soft:rgba(246,242,231,0.18);

  --text-primary:var(--forest-deep);
  --text-secondary:rgba(18,59,39,0.9);
  --text-muted:rgba(18,59,39,0.88);
  --text-inverse:var(--cream);
  --text-inverse-secondary:rgba(246,242,231,0.84);
  --text-inverse-muted:rgba(246,242,231,0.72);

  --shadow-sm:0 4px 12px rgba(18,59,39,0.07);
  --shadow-card:0 8px 20px rgba(18,59,39,0.10);
  --shadow-hero:0 10px 25px rgba(18,59,39,0.12);

  --font-display:'Newsreader','Georgia','Times New Roman',serif;
  --font-sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --ease-out:cubic-bezier(0.22,1,0.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--text-primary);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}
a{color:inherit;}
img{max-width:100%;}

/* ── page background: the brand gradient (cream to sage to olive), with the
   paper-grain and contour textures laid over it at their natural size and
   tiled, never stretched. The light zone ends on olive (#B0BC91); the dark
   zone starts from the same olive and deepens into forest green, so dark
   text and cream text both stay readable (WCAG AA) in every section. ── */
body{background:var(--cream);}
.zone-light{
  position:relative; isolation:isolate; overflow-x:clip;
  background:linear-gradient(180deg, #F6F2E7 0%, #F3EFE1 16%, #E6EBD8 40%, #D3DDBD 68%, #B0BC91 100%);
}
.zone-light::before, .zone-dark::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-repeat:repeat; opacity:0.5;
}
.zone-light::before{
  background-image:url('paper-grain.png'), url('contour-light.svg');
  background-size:220px 220px, 760px 760px;
  mix-blend-mode:multiply;
}
.zone-dark{
  position:relative; isolation:isolate; overflow-x:clip;
  color:var(--text-inverse);
  background:linear-gradient(180deg, #B0BC91 0px, #4F7C5A 60px, #1A402D 120px, #123423 55%, #0B2418 100%);
}
.zone-dark::before{
  background-image:url('contour-dark.svg'), url('paper-grain.png');
  background-size:760px 760px, 220px 220px;
  opacity:0.42; mix-blend-mode:soft-light;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 160px); mask-image:linear-gradient(180deg, transparent 0, #000 160px);
}
.contour{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-repeat:repeat;
  background-size:640px 640px;
  opacity:0.55;
  z-index:1;
}

.wrap{
  position:relative;
  z-index:2;
  max-width:700px;
  margin:0 auto;
  padding:0 24px;
}

/* ── icons: rounded monoline, sit inside circular cream chips ── */
.icon{width:20px; height:20px; flex-shrink:0; display:block;}
.icon-outline{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.icon-solid{fill:currentColor; stroke:none;}
.icon-chip{
  width:40px; height:40px;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:var(--off-white);
  border:1px solid var(--forest-hair);
  color:var(--forest-deep);
  flex-shrink:0;
}
.icon-chip.on-dark{background:rgba(246,242,231,0.1); border-color:var(--cream-hair); color:var(--cream);}

/* ── header ── */
header{
  position:sticky;
  top:0;
  z-index:40;
  padding:16px 0;
  border-bottom:1px solid var(--forest-hair);
  background:rgba(246,242,231,0.72);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
}
.header-inner{
  max-width:700px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.logo{
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-display);
  font-weight:500;
  font-size:22px;
  letter-spacing:-0.02em;
  color:var(--forest-deep);
}
.logo .mark{width:30px; height:18.8px; flex-shrink:0;}
.logo .mark path{fill:none; stroke:url(#lineGrad); stroke-width:6.7; stroke-linecap:round;}
.logo .mark circle{fill:var(--forest);}

form.inline{display:flex; gap:8px; flex:1; min-width:230px; max-width:380px;}
.sr-only{position:absolute; left:-9999px;}

input[type="email"]{
  flex:1; min-width:0; min-height:44px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid var(--forest-hair);
  background:var(--off-white);
  color:var(--text-primary);
  font-family:var(--font-sans);
  font-size:14px;
  outline:none;
  transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
input[type="email"]::placeholder{color:var(--text-muted);}
input[type="email"]:focus{border-color:var(--forest-text); box-shadow:0 0 0 4px rgba(47,122,76,0.14);}
input[type="email"]:focus-visible{outline:2px solid var(--forest); outline-offset:2px;}
.zone-dark input[type="email"]{background:rgba(246,242,231,0.08); border-color:var(--cream-hair); color:var(--cream);}
.zone-dark input[type="email"]::placeholder{color:var(--text-inverse-muted);}
.zone-dark input[type="email"]:focus{border-color:var(--green-link); box-shadow:0 0 0 4px rgba(63,174,108,0.2);}

button{
  min-height:44px;
  padding:10px 22px;
  border-radius:999px;
  border:none;
  background:var(--orange-cta);
  color:var(--off-white);
  font-family:var(--font-sans);
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 16px -6px rgba(217,122,52,0.5);
  transition:transform 130ms var(--ease-out), box-shadow 240ms var(--ease-out), filter 240ms var(--ease-out);
}
button:hover{filter:brightness(1.06); box-shadow:0 8px 20px -6px rgba(217,122,52,0.6);}
button:active{transform:scale(0.96);}
button:focus-visible{outline:2px solid var(--forest-deep); outline-offset:2px;}
button:disabled{opacity:0.7; cursor:default; transform:none;}

.top-form-msg{font-size:13px; color:var(--forest-text); margin-top:6px; font-weight:500; min-height:1px;}

[data-reveal].reveal-init{opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);}
[data-reveal].reveal-init.is-visible{opacity:1; transform:translateY(0);}
.stagger > *:nth-child(1){transition-delay:0s;}
.stagger > *:nth-child(2){transition-delay:.08s;}
.stagger > *:nth-child(3){transition-delay:.16s;}
.stagger > *:nth-child(4){transition-delay:.24s;}

/* ── hero ── */
.hero{padding:32px 0 36px; text-align:center;}
.eyebrow{
  font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:18px; font-weight:600;
}
.zone-dark .eyebrow{color:var(--text-inverse-muted);}
h1{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(32px, 5.6vw, 52px);
  line-height:1.14;
  letter-spacing:-0.015em;
  margin:0 0 18px;
  color:var(--forest-deep);
}
h1 em{
  font-style:italic;
  font-weight:500;
  color:var(--forest-text);
}
.sub{
  font-size:17px; line-height:1.55; color:var(--text-secondary);
  max-width:480px; margin:0 auto 32px;
}
.zone-dark .sub{color:var(--text-inverse-secondary);}

.cta-primary{display:flex; gap:10px; max-width:400px; margin:0 auto; justify-content:center; flex-wrap:wrap;}
.cta-primary input[type="email"]{padding:13px 16px; font-size:15px;}
.cta-primary button{padding:13px 26px; font-size:15px;}
.cta-note{font-size:12px; color:var(--text-muted); margin-top:12px;}
.zone-dark .cta-note{color:var(--text-inverse-muted);}

/* trend chips */
.chips{display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:26px;}
.chip{display:inline-flex; align-items:center; gap:7px; padding:10px 18px; border-radius:999px; font-size:13.5px; font-weight:700; box-shadow:var(--shadow-card); transition:transform 200ms var(--ease-out);}
.chip:hover{transform:translateY(-2px);}
.chip .icon{width:15px; height:15px;}
.chip-good{background:var(--sage-pale); color:var(--forest-text); border:1.5px solid rgba(47,122,76,0.4);}
.chip-neutral{background:var(--off-white); color:var(--text-secondary); border:1.5px solid var(--forest-hair-strong);}
.chip-warn{background:#FCEBDD; color:var(--orange-text); border:1.5px solid var(--orange-hair);}

/* pull-quote strip */
.pullquote{padding:8px 0 56px; text-align:center;}
.pullquote p{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(19px,3vw,23px);
  line-height:1.5;
  color:var(--forest-deep);
  max-width:520px;
  margin:0 auto;
}

/* ── phases — Card A / cream ── */
.phases{padding-top:16px; padding-bottom:48px; border-top:1px solid var(--forest-hair);}
.section-head{max-width:520px; margin:0 auto 36px; text-align:center;}
.section-head .eyebrow{margin-bottom:12px;}
.section-head h2{font-family:var(--font-display); font-weight:400; font-size:clamp(24px,4vw,30px); line-height:1.25; margin:0 0 14px; color:var(--forest-deep);}
.zone-dark .section-head h2{color:var(--cream);}
.section-head p{color:var(--text-secondary); line-height:1.6; font-size:15px; margin:0;}
.zone-dark .section-head p{color:var(--text-inverse-secondary);}

.phase-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:13px;}
.phase-card{
  background:var(--off-white);
  border:1px solid var(--forest-hair);
  border-radius:26px;
  padding:18px 16px;
  text-align:left;
  box-shadow:var(--shadow-sm);
  transition:transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
.phase-card:hover{transform:translateY(-5px); border-color:var(--forest-hair-strong); box-shadow:var(--shadow-card);}
.phase-card .icon-chip{margin-bottom:14px; width:36px; height:36px;}
.phase-card .icon-chip .icon{width:18px; height:18px;}
.phase-card .num{font-family:var(--font-sans); font-size:12px; color:var(--text-muted); font-weight:600; letter-spacing:0.04em; margin-bottom:6px;}
.phase-card h3{margin:0; font-size:15.5px; font-weight:600; color:var(--forest-deep); line-height:1.3; font-family:var(--font-sans);}

/* ── faq ── */
.faq{padding-top:16px; padding-bottom:60px;}
.faq-item{border-top:1px solid var(--cream-hair-soft);}
.faq-item:last-child{border-bottom:1px solid var(--cream-hair-soft);}
.faq-item summary{
  padding:18px 4px; cursor:pointer; font-weight:600; font-size:15px; color:var(--cream);
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;
  transition:color 200ms var(--ease-out);
}
.faq-item summary:hover{color:var(--green-link);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+'; font-family:var(--font-display); font-size:20px; color:var(--green-link); flex-shrink:0; transition:transform 200ms var(--ease-out);}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{margin:0 4px 18px; font-size:14px; line-height:1.65; color:var(--text-inverse-secondary); max-width:560px;}

/* ── bottom cta ── */
.bottom-cta{padding-top:80px; padding-bottom:100px; text-align:center; position:relative; overflow:hidden;}
.bottom-cta::before{
  content:''; position:absolute; top:-22%; left:50%; transform:translateX(-50%);
  width:640px; max-width:150%; height:420px;
  background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(63,174,108,0.22) 0%, transparent 70%);
  filter:blur(10px); pointer-events:none; z-index:0;
}
.bottom-cta .wrap{z-index:1;}
.bottom-cta h2{font-family:var(--font-display); font-weight:400; font-size:clamp(26px,4vw,36px); line-height:1.2; margin:0 0 14px; color:var(--cream);}
.bottom-cta .sub{margin-bottom:30px;}
.bottom-msg{font-size:14px; color:var(--green-link); margin-top:14px; font-weight:500; min-height:1px;}

footer{text-align:center; padding:26px 0 40px; font-size:12px; color:var(--text-inverse-muted); position:relative; z-index:2;}
footer .foot-links{margin-top:10px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
footer .foot-links a{color:var(--text-inverse-secondary); text-decoration:underline; text-underline-offset:2px;}

@media (max-width:640px){.phase-grid{grid-template-columns:repeat(2, 1fr);}}
@media (max-width:520px){
  header{padding:12px 0;}
  .header-inner{flex-direction:column; align-items:stretch;}
  form.inline{max-width:none; min-width:0; width:100%;}
  .eyebrow{margin-bottom:10px;}
  h1{font-size:29px; line-height:1.15; margin-bottom:10px;}
  .sub{font-size:15px; line-height:1.45; margin:0 auto 16px;}
  .cta-note{margin-top:6px;}
}

/* ───────── v2: athletes + physios pages ───────── */
.skip-link{position:absolute; left:-9999px; top:8px; z-index:100; background:var(--forest-deep); color:var(--cream); padding:10px 16px; border-radius:999px; font-weight:600; font-size:14px;}
.skip-link:focus{left:12px;}
a:focus-visible{outline:2px solid var(--forest); outline-offset:3px; border-radius:4px;}
.zone-dark a:focus-visible{outline-color:var(--green-link);}

.wrap-wide{position:relative; z-index:2; max-width:1040px; margin:0 auto; padding:0 24px;}
.header-inner{max-width:1040px;}
.header-left{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.nav-link{font-size:14px; font-weight:600; color:var(--forest-text); text-decoration:none; padding:8px 2px;}
.nav-link:hover{text-decoration:underline; text-underline-offset:3px;}
.nav-link[aria-current="page"]{color:var(--forest-deep); text-decoration:underline; text-underline-offset:3px;}

/* phone and desktop screenshots */
.device{
  position:relative; width:min(100%, 280px); margin:0 auto; padding:7px;
  border-radius:42px;
  background:linear-gradient(150deg, #345a43 0%, #10281c 55%, #0a1c13 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.16), 0 2px 4px rgba(18,59,39,0.18), 0 26px 44px -18px rgba(18,59,39,0.5), 0 60px 80px -40px rgba(18,59,39,0.35);
}
.device img{display:block; width:100%; height:auto; aspect-ratio:375/812; object-fit:cover; object-position:top center; border-radius:35px; background:var(--cream);}
.device::after{content:''; position:absolute; inset:7px; border-radius:35px; pointer-events:none; background:linear-gradient(118deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0) 26%);}
.device.sm{width:min(100%, 220px); padding:6px; border-radius:34px;}
.device.sm img{border-radius:28px;} .device.sm::after{inset:6px; border-radius:28px;}
.browser-card{
  position:relative; padding-top:30px; border:1px solid var(--forest-hair-strong); border-radius:18px; overflow:hidden; background:#fff;
  box-shadow:0 2px 4px rgba(18,59,39,0.10), 0 28px 50px -22px rgba(18,59,39,0.45);
}
.browser-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:30px; border-bottom:1px solid var(--forest-hair);
  background:
    radial-gradient(circle at 16px 15px, #E3A58E 5px, transparent 5.5px),
    radial-gradient(circle at 34px 15px, #E6CD8C 5px, transparent 5.5px),
    radial-gradient(circle at 52px 15px, #9CCB9C 5px, transparent 5.5px),
    #EFEEE6;
}
.browser-card img{display:block; width:100%; height:auto;}
.caption{font-size:13px; color:var(--text-secondary); margin:12px 0 0; text-align:center;}

/* soft halo + contour rings behind a screenshot */
.halo{position:absolute; left:50%; top:50%; width:150%; aspect-ratio:1; transform:translate(-50%,-50%); z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(111,155,107,0.5), rgba(111,155,107,0.18) 55%, transparent 72%);}
.halo::before,.halo::after{content:''; position:absolute; border-radius:50%; border:1px solid rgba(47,122,76,0.22);}
.halo::before{inset:16%;} .halo::after{inset:4%; border-color:rgba(47,122,76,0.13);}
.staged{position:relative; isolation:isolate;}

/* floating callouts (text taken from the screenshot they sit beside) */
.float-chip{
  position:absolute; z-index:3; display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:999px;
  font-size:13px; font-weight:700; white-space:nowrap; color:var(--forest-deep);
  background:rgba(250,249,243,0.94); border:1.5px solid var(--forest-hair-strong);
  box-shadow:var(--shadow-card), 0 14px 28px -12px rgba(18,59,39,0.4);
  animation:bob 6s ease-in-out infinite;
}
.float-chip .icon{width:15px; height:15px; color:var(--forest-text);}
.float-chip.alt{animation-delay:-3s; background:var(--forest-deep); color:var(--cream); border-color:rgba(246,242,231,0.3);}
@keyframes bob{0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);}}

/* hero */
.hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center; padding:40px 24px 56px;}
.hero-copy{text-align:left;}
.hero-copy .sub{margin:0 0 28px; max-width:470px;}
.hero-copy .cta-primary{margin:0; justify-content:flex-start; max-width:430px;}
.hero-copy .cta-note{margin-top:12px;}
.hero-copy .cta-note a{color:var(--forest-text); font-weight:600;}
.hero-shot .device{width:min(100%, 300px);}

/* evidence strip */
.evidence{padding:26px 0; border-top:1px solid var(--forest-hair); border-bottom:1px solid var(--forest-hair);}
.evidence p{max-width:680px; margin:0 auto; text-align:center; font-size:14.5px; line-height:1.65; color:var(--text-secondary);}
.evidence .eyebrow{display:block; text-align:center; margin-bottom:10px;}

/* generic section head variants */
.band{padding:64px 0;}
.band + .band{border-top:1px solid var(--forest-hair);}
.lede{max-width:560px; margin:0 auto; text-align:center; color:var(--text-secondary); font-size:15.5px; line-height:1.65;}

/* how it works */
.steps{display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; margin-top:38px;}
.step{text-align:center;}
.step .device{margin-bottom:22px;}
.step .num{font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:6px;}
.step h3{font-family:var(--font-display); font-weight:500; font-size:22px; line-height:1.25; margin:0 0 8px; color:var(--forest-deep);}
.step p{margin:0 auto; max-width:300px; font-size:14.5px; line-height:1.6; color:var(--text-secondary);}
.trend-note{max-width:520px; margin:44px auto 0; text-align:center;}
.trend-note p{font-size:14.5px; line-height:1.6; color:var(--text-secondary); margin:0;}

/* two-column split */
.split{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center;}
.split.reverse .split-media{order:-1;}
.split-copy h2{font-family:var(--font-display); font-weight:400; font-size:clamp(26px,3.6vw,34px); line-height:1.22; margin:0 0 14px; color:var(--forest-deep);}
.split-copy p{font-size:15.5px; line-height:1.65; color:var(--text-secondary); margin:0 0 14px;}
.split-media{display:flex; gap:18px; justify-content:center; align-items:flex-start;}
.ticks{list-style:none; padding:0; margin:18px 0 22px;}
.ticks li{position:relative; padding:0 0 0 28px; margin:0 0 12px; font-size:15px; line-height:1.55; color:var(--text-secondary);}
.ticks li::before{content:''; position:absolute; left:0; top:6px; width:14px; height:8px; border-left:2.5px solid var(--forest); border-bottom:2.5px solid var(--forest); transform:rotate(-45deg);}
.ticks strong{color:var(--forest-deep);}
.text-link{display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:15px; color:var(--forest-deep); text-decoration:underline; text-underline-offset:3px;}
.zone-dark .text-link{color:var(--green-link);}

/* phases */
.phase-note{text-align:center; font-size:13.5px; color:var(--text-secondary); margin:16px 0 0;}
.phases-split{margin-top:52px;}

/* faq extras */
.faq a{color:var(--green-link);}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:34px; padding:24px 24px 40px; text-align:center;}
  .hero-copy{text-align:center;}
  .hero-copy .sub{margin:0 auto 24px;}
  .hero-copy .cta-primary{margin:0 auto; justify-content:center;}
  .steps{grid-template-columns:1fr; gap:44px;}
  .split{grid-template-columns:1fr; gap:36px;}
  .split.reverse .split-media{order:0;}
  .split-copy{text-align:left;}
  .band{padding:48px 0;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition-duration:0.01ms !important; animation-duration:0.01ms !important;}
  .phase-card:hover,.chip:hover{transform:none;}
  [data-reveal].reveal-init{opacity:1; transform:none;}
}

/* ───────── physios page ───────── */
.btn{
  min-height:44px; padding:10px 22px; border-radius:999px; background:var(--orange-cta); color:var(--off-white);
  font-family:var(--font-sans); font-weight:600; font-size:14px; text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px -6px rgba(217,122,52,0.5);
}
.btn:hover{filter:brightness(1.06);}
.btn:focus-visible{outline:2px solid var(--forest-deep); outline-offset:2px;}
input[type="text"]{
  flex:1; min-width:0; min-height:44px; padding:10px 16px; border-radius:999px;
  border:1px solid var(--forest-hair); background:var(--off-white); color:var(--text-primary);
  font-family:var(--font-sans); font-size:14px; outline:none;
}
input[type="text"]::placeholder{color:var(--text-muted);}
input[type="text"]:focus-visible{outline:2px solid var(--forest); outline-offset:2px;}
.zone-dark input[type="text"]{background:rgba(246,242,231,0.08); border-color:var(--cream-hair); color:var(--cream);}
.zone-dark input[type="text"]::placeholder{color:var(--text-inverse-muted);}
.zone-dark input[type="text"]:focus-visible{outline-color:var(--green-link);}
.interest-form{display:grid; gap:10px; max-width:430px;}
.interest-form input{padding:13px 16px; font-size:15px;}
.interest-form button{padding:13px 26px; font-size:15px;}
.hero-copy .interest-form{margin:0;}
.bottom-cta .interest-form{margin:0 auto; text-align:left;}
.facts{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:34px;}
.fact{background:var(--off-white); border:1px solid var(--forest-hair); border-radius:26px; padding:24px 22px; box-shadow:var(--shadow-sm);}
.fact .num{font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:8px;}
.fact h3{font-family:var(--font-display); font-weight:500; font-size:20px; line-height:1.25; margin:0 0 8px; color:var(--forest-deep);}
.fact p{margin:0; font-size:14.5px; line-height:1.6; color:var(--text-secondary);}
.stack{max-width:760px; margin:0 auto;}
.stack h2{font-family:var(--font-display); font-weight:400; font-size:clamp(26px,3.6vw,34px); line-height:1.22; margin:0 0 14px; color:var(--forest-deep);}
.stack p{font-size:15.5px; line-height:1.65; color:var(--text-secondary); margin:0 0 14px;}
.see-grid{display:grid; grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr); gap:56px; align-items:start;}
.see-grid h2{font-family:var(--font-display); font-weight:400; font-size:clamp(26px,3.6vw,34px); line-height:1.22; margin:0 0 12px; color:var(--forest-deep);}
.see-grid p{font-size:15.5px; line-height:1.65; color:var(--text-secondary); margin:0;}
.see-grid .ticks{margin:6px 0 0;}
.see-grid .ticks li:last-child{margin-bottom:0;}
@media (max-width:900px){ .see-grid{grid-template-columns:1fr; gap:6px;} .facts{grid-template-columns:1fr;} .hero-copy .interest-form{margin:0 auto; text-align:left;} }


/* ───────── v3: composition and polish ───────── */
.hero-shot{position:relative; isolation:isolate; min-height:600px; display:flex; align-items:center; justify-content:center;}
.hero-shot .device.front{position:relative; z-index:2; width:min(100%, 290px);}
.hero-shot .device.back{position:absolute; z-index:1; width:250px; left:2%; top:9%; transform:rotate(-8deg); opacity:0.96;}
.hero-shot .fc1{left:-12%; top:90%;}
.hero-shot .fc2{right:-10%; top:5%;}
.hero-shot-single{min-height:0;}

.steps{position:relative; gap:30px; margin-top:56px;}
.steps::before{content:''; position:absolute; left:16.6%; right:16.6%; top:0; border-top:2px dashed rgba(47,122,76,0.4); z-index:0;}
.step{
  position:relative; z-index:1; padding:34px 22px 28px; border-radius:32px;
  background:rgba(250,249,243,0.62); border:1px solid var(--forest-hair);
  box-shadow:var(--shadow-sm);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.step:hover{transform:translateY(-4px); box-shadow:var(--shadow-card);}
.step .badge{
  position:absolute; top:-19px; left:50%; transform:translateX(-50%); width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; background:var(--forest-deep); color:var(--cream); font-weight:700; font-size:15px;
  box-shadow:0 0 0 6px #F3EFE1, 0 8px 16px -6px rgba(18,59,39,0.5);
}
.step-media{position:relative; overflow:hidden; margin-bottom:22px; -webkit-mask-image:linear-gradient(180deg, #000 76%, transparent 100%); mask-image:linear-gradient(180deg, #000 76%, transparent 100%);}
.step-media .device{margin-top:2px; margin-bottom:-36%;}

.share-panel{
  position:relative; padding:54px 48px; border-radius:40px; overflow:hidden;
  background:linear-gradient(135deg, rgba(250,249,243,0.78), rgba(250,249,243,0.5));
  border:1px solid var(--forest-hair); box-shadow:var(--shadow-card);
}
.share-panel .split-media{padding:10px 0;}

.phase-card{--accent:#D97A34; border-top:4px solid var(--accent);}
.phase-card:nth-child(1){--accent:#D97A34;} .phase-card:nth-child(2){--accent:#A68B47;} .phase-card:nth-child(3){--accent:#729D59;} .phase-card:nth-child(4){--accent:#3FAE6C;}
.phase-card .icon-chip{border-color:var(--accent); color:var(--forest-deep);}
.phases-split .split-media{position:relative; isolation:isolate; padding:20px 0 50px; min-height:0;}
.phases-split .split-media .device.sm:nth-child(2){margin-top:44px;}

.band{position:relative;}
.motif{display:block; width:84px; height:auto; margin:0 auto 18px;}
.motif path{fill:none; stroke:url(#lineGrad); stroke-width:6.7; stroke-linecap:round;}
.motif circle{fill:var(--forest);}

.hero-shot.physio{min-height:0; display:block;}

/* physios hero: give the product screenshot more room */
.physio-hero{max-width:1240px; grid-template-columns:minmax(0,0.75fr) minmax(0,1.25fr); gap:44px;}
.physio-hero .hero-shot.physio{width:100%;}
.physio-hero{padding-bottom:32px;}
/* physios: the short quote and the 'What you see' list sit closer together now the second screenshot is gone */
.band[aria-labelledby="gap-title"]{padding:40px 0;}
.band[aria-labelledby="see-title"]{padding:44px 0;}

@media (max-width:900px){
  .physio-hero{max-width:none; grid-template-columns:1fr;}
  .hero-shot{min-height:0; padding:18px 0 8px;}
  .hero-shot .device.back, .hero-shot .float-chip{display:none;}
  .hero-shot .halo{width:130%;}
  .steps::before{display:none;}
  .step{padding-top:36px;}
  .share-panel{padding:34px 22px; border-radius:30px;}
  .phases-split .split-media .device.sm:nth-child(2){margin-top:30px;}
}
@media (prefers-reduced-motion: reduce){ .float-chip{animation:none;} .step:hover{transform:none;} }

/* the last light section sits close to the dark zone, no dead gap */
.zone-light main > .band:last-child{padding-bottom:32px;}

/* honeypot field for spam bots: off-screen, never seen or tabbed to by people */
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none;}