/* Active Health round-2 mockup — canvas DS runtime replaced with real CSS.
   1 DS primitives · 2 canvas state->CSS · 3 GRAFT (rotor+ticker) · 4 responsive */

/* ---------- 1. DS primitives (faithful to components/core/Button.jsx) ---------- */
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);color:var(--text-on-light-primary);background:var(--surface-light)}
a{color:var(--accent-blue)}
a:hover{color:var(--accent-blue-hover)}
h1,h2,h3,h4{font-family:var(--font-display);text-transform:uppercase;letter-spacing:var(--ls-display);margin:0}
img{max-width:100%}

.dsbtn{font-family:var(--font-display);text-transform:uppercase;letter-spacing:var(--ls-caps);
  font-weight:var(--fw-semibold);border-radius:var(--radius-pill);cursor:pointer;text-decoration:none;
  transition:transform var(--duration-fast) var(--ease-standard),filter var(--duration-fast);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;white-space:nowrap}
.dsbtn:active{transform:scale(.97)}
.v-primary{background:var(--gradient-red-sweep);color:var(--white)}
.v-primary:hover{color:var(--white)}
.v-secondary{background:var(--navy-900);color:var(--white)}
.v-outline{background:transparent;color:var(--text-on-light-primary);border:2px solid var(--navy-900)}
.v-outline-dark{background:transparent;color:var(--white);border:2px solid rgba(255,255,255,.4)}
.v-outline-dark:hover{color:var(--white)}
.v-electric{background:var(--gradient-blue-sweep);color:var(--white)}
.s-sm{padding:8px 18px;font-size:var(--fs-body-sm)}
.s-md{padding:12px 26px;font-size:var(--fs-body)}
.s-lg{padding:16px 34px;font-size:var(--fs-body-lg)}

.dsfield{display:block;margin-bottom:var(--space-4)}
.dsfield span{display:block;margin-bottom:6px;font:var(--fw-semibold) var(--fs-body-sm) var(--font-body);
  color:var(--text-on-light-secondary)}
.dsfield input{width:100%;padding:12px 14px;border:1px solid var(--border-light);border-radius:var(--radius-md);
  font:var(--fs-body) var(--font-body);color:var(--text-on-light-primary);background:var(--white)}
.dsfield input:focus{outline:2px solid var(--border-focus);outline-offset:1px}

/* ---------- 2. canvas state bindings -> CSS ---------- */
.svc-wrap{position:absolute;left:18px;right:18px;bottom:18px;transform:translateY(0);
  transition:transform 220ms var(--ease-standard)}
.svc-card:hover .svc-wrap,.svc-card:focus-within .svc-wrap{transform:translateY(-14px)}
.svc-desc{margin:0;font-size:var(--fs-body-sm);font-family:var(--font-body);
  color:var(--text-on-dark-secondary);line-height:var(--lh-body);overflow:hidden;max-height:0;opacity:0;
  transition:opacity 220ms var(--ease-standard),max-height 220ms var(--ease-standard),margin 220ms var(--ease-standard)}
.svc-card:hover .svc-desc,.svc-card:focus-within .svc-desc{margin:0 0 12px;max-height:5em;opacity:1}

.faq-i{transition:transform 220ms var(--ease-standard);flex-shrink:0}
.faq-q[aria-expanded="true"] .faq-i{transform:rotate(45deg)}
.faq-a{margin:10px 0 28px;max-height:10em;overflow:hidden;opacity:1;font-family:var(--font-body);
  font-size:var(--fs-body);color:var(--text-on-light-secondary);line-height:var(--lh-body);text-align:left;
  transition:max-height 240ms var(--ease-standard),opacity 240ms var(--ease-standard),margin 240ms var(--ease-standard)}
.faq-a.shut{margin:0;max-height:0;opacity:0}

:root{--pm-accent:var(--red-600);--pm-accent-soft:rgba(186,34,38,.12);--pm-accent-line:rgba(186,34,38,.38)}
.toc-l{display:block;text-decoration:none;padding:10px 14px;border-left:2px solid transparent;
  border-radius:0 8px 8px 0;background:transparent;color:var(--text-on-light-secondary);
  font-family:var(--font-body);font-size:var(--fs-body-sm);font-weight:var(--fw-medium);line-height:1.5;
  transition:color var(--duration-base) var(--ease-standard),background var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard)}
.toc-l.on{border-left-color:var(--pm-accent);background:var(--pm-accent-soft);
  color:var(--text-on-light-primary);font-weight:var(--fw-semibold)}

@keyframes ah-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes ah-gradient-move{0%{background-position:0% 50%}100%{background-position:200% 50%}}

/* ---------- 3. THE GRAFT: V2 rotor + trust ticker, re-skinned to the canvas DS ---------- */
.rotorline{display:flex;align-items:baseline;flex-wrap:wrap;margin:0 0 28px;
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:var(--ls-display);
  font-size:clamp(1.35rem,3.2vw,2.4rem);line-height:1.06;color:#e6e9f2}
.rotor{display:inline-flex;overflow:hidden;height:1.06em;vertical-align:bottom;
  background:var(--gradient-red-sweep);color:var(--white);border-radius:.14em;padding:0 .22em}
.rotor-track{display:flex;flex-direction:column;animation:roll 9s cubic-bezier(.32,.72,0,1) infinite}
.rotor-track span{height:1.06em;line-height:1.06;display:block}
@keyframes roll{
  0%,16%{transform:translateY(0)}
  25%,41%{transform:translateY(-1.06em)}
  50%,66%{transform:translateY(-2.12em)}
  75%,91%{transform:translateY(-3.18em)}
  100%{transform:translateY(-4.24em)}
}

.ticker{position:absolute;left:0;right:0;bottom:0;z-index:6;overflow:hidden;
  border-top:1px solid rgba(255,255,255,.16);background:rgba(1,15,40,.6);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ticker-track{display:flex;gap:3rem;width:max-content;padding:.85rem 0;animation:tick 34s linear infinite}
.ticker-track span{font-family:var(--font-body);font-weight:800;text-transform:uppercase;
  letter-spacing:.14em;font-size:.72rem;color:#cdd3e4;white-space:nowrap}
.ticker-track span::before{content:"\25CF";color:var(--accent-red);margin-right:3rem;
  font-size:.55rem;vertical-align:middle}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  .rotor-track{animation:none}
  .rotor-track span:not(:first-child){display:none}
  .ticker-track{animation:none}
  [style*="ah-gradient-move"]{animation:none!important}
  *{transition-duration:.01ms!important}
}

/* ---------- 4. responsive layer (artboards are fixed-canvas; floor is 390px) ---------- */
/* The canvas --s scale ramp was invalid CSS (length/length), so every
   calc(Npx * var(--s)) padding silently dropped to 0. --s is now 1 inline;
   the ramp above the 1440px design width lives here. */
@media (min-width:1800px){[style*="--s:1"]{--s:1.15!important}}
@media (min-width:2200px){[style*="--s:1"]{--s:1.35!important}}

@media (max-width:1100px){
  section[style*="grid-template-columns:1.25fr"]{grid-template-columns:1fr!important;
    padding-left:clamp(20px,5vw,40px)!important;padding-right:clamp(20px,5vw,40px)!important;
    min-height:auto!important}
  section[style*="grid-template-columns:1.25fr"] > div[style*="padding:calc(100px"]{
    padding:clamp(80px,10vw,110px) 0 clamp(24px,4vw,40px)!important;max-width:100%!important}
  /* floating proof cards: absolute on the artboard, in-flow on small screens */
  div[style*="position:absolute;inset:0;pointer-events:none"]{position:static!important;
    display:grid!important;gap:12px;padding:0 clamp(20px,5vw,40px) 92px}
  div[style*="position:absolute;inset:0;pointer-events:none"] > div{position:static!important;
    width:auto!important;top:auto!important;right:auto!important}
  div[style*="grid-template-columns:repeat(5,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
  div[style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
  div[style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
  div[style*="grid-template-columns:1fr 340px"],
  div[style*="grid-template-columns:minmax(0,1fr) 320px"]{grid-template-columns:1fr!important}
  aside{position:static!important}
  /* grid/flex children default to min-width:auto, so a nowrap CTA row sets the
     track width and overflows the clipped wrapper. Let them shrink and wrap. */
  section > *,section[style*="display:grid"] > *{min-width:0}
  div[style*="display:flex"][style*="gap:20px"]{flex-wrap:wrap!important}
  .dsbtn{max-width:100%}
}
@media (max-width:720px){
  header{flex-wrap:wrap!important;gap:12px!important;padding:14px 20px!important}
  header nav{order:3;width:100%;gap:14px!important;overflow-x:auto;padding-bottom:4px}
  h1{font-size:clamp(2.4rem,10vw,3.4rem)!important}
  h2{font-size:clamp(1.7rem,7vw,2.4rem)!important}
  div[style*="grid-template-columns:repeat(5,1fr)"],
  div[style*="grid-template-columns:repeat(4,1fr)"],
  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns:repeat(2,1fr)"]{grid-template-columns:1fr!important}
  section{padding-left:20px!important;padding-right:20px!important}
  .rotorline{font-size:clamp(1.15rem,6vw,1.6rem)}
}

/* round-2 review badge (mockup chrome only; not part of the design) */
.r2nav{position:fixed;left:12px;top:104px;z-index:9999;display:flex;gap:8px;
  font:600 11px/1 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase}
@media (max-width:720px){.r2nav{top:auto;bottom:12px}}