/* =========================================================================
   CURAPOD-M — Home
   Figma 1hDXw9DsfJ7ibaoxADsHzJ · section 301:6153
   desktop 37:65 (1280×5915) · mobile 37:1050 (393×5131)
   Mobile-first. Desktop breakpoint: min-width 1024px.
   All values transcribed verbatim from Figma. No rounding, no scale-snapping.
   ========================================================================= */

/* ---------- Fonts ---------- */
@font-face{font-family:"Plus Jakarta Sans";src:url("../assets/fonts/pjs-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("../assets/fonts/pjs-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("../assets/fonts/pjs-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("../assets/fonts/pjs-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("../assets/fonts/pjs-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- Tokens (resolved from get_variable_defs, per mode) ---------- */
:root{
  /* grounds */
  --bg-page-dark:#0b0b0b;
  --bg-page-light:#ffffff;
  --bg-surface:#ffffff;
  --bg-sunken:#f2f2f2;
  --bg-product:#f6f2eb;

  /* text */
  --text-primary:#0b0b0b;
  --text-inverse:#ffffff;
  --text-secondary:#3d3d3d;
  --text-muted:#767676;
  --text-accent-light:#BC2E16;   /* text/accent · light mode */
  --text-accent-dark:#FFBCAD;    /* text/accent · dark mode  */

  /* accent */
  --accent-base:#E8543D;         /* accent/base · desktop     */
  --accent-base-m:#FF7966;       /* accent/base · mobile/dark */
  --accent-soft:#E8543D17;
  --accent-halo:#E8543D42;
  --border-accent:#E8543D;

  /* closing band — shared "mk-close"/"mk-foot" component, now used by all
     three pages' final CTA + footer (index/makers/science). Was previously
     .page-makers-scoped only; promoted here so index.html and science.html
     (which don't carry that body class) resolve the same values. */
  --mk-accent-dark:#FFBCAD;
  --mk-dark-secondary:#bababa;
  --mk-dark-muted:#a3a3a3;
  --mk-dark-border:#ffffff1a;

  /* borders */
  --border-subtle:#0b0b0b14;
  --border-default:#0b0b0b29;
  --border-strong:#0b0b0b33;
  --border-subtle-inv:#ffffff1a;

  /* glass */
  --glass-fill:#ffffff1a;
  --glass-border:#ffffff4d;
  --glass-scrim:#000000c7;       /* glass/scrim — Figma value, 0.78 alpha */

  /* misc */
  --crimson-22:#ff8a8a38;
  --focus-glow:#E8543D66;
  --radius-full:999px;

  /* elevation */
  --elev-1:0 2px 6px -2px #0b0b0b14;
  --elev-2:0 8px 22px -6px #0b0b0b1f;
  --elev-3:0 16px 40px -12px #000000a3;

  /* type — MOBILE mode (37:1050) */
  --display-xl:64px;   --display-xl-lh:58px;
  --display-lg:36px;   --display-lg-lh:42px;
  --display-md:32px;   --display-md-lh:38px;
  --display-sm:28px;   --display-sm-lh:34px;
  --title-md:22px;     --title-md-lh:28px;
  --title-sm:18px;     --title-sm-lh:26px;
  --body-md:16px;      --body-md-lh:26px;
  --body-sm:14px;      --body-sm-lh:22px;
  --label-sm:12px;     --label-sm-lh:16px;
  --label-xs:11px;     --label-xs-lh:14px;

  /* tracking (Figma percentages) */
  --tr-display:-0.02em;
  --tr-title:-0.01em;
  --tr-label:0.16em;
  --tr-caps:0.04em;

  /* layout */
  --gutter:20px;
  --wrap:1112px;
  --fold-pt:136px;
  --fold-pb:64px;
}

@media (min-width:1024px){
  :root{
    /* type — DESKTOP mode (37:65) */
    --display-xl:216px;  --display-xl-lh:192px;
    --display-lg:58px;   --display-lg-lh:64px;
    --display-md:44px;   --display-md-lh:50px;
    --display-sm:34px;   --display-sm-lh:40px;
    --title-md:26px;     --title-md-lh:32px;
    --title-sm:20px;     --title-sm-lh:28px;
    --gutter:84px;
  }
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

/* =========================================================================
   FOLD-SNAP SCROLLING (all pages) -- each [data-fold] section is a snap
   point. `proximity`, not `mandatory`: mandatory snap would yank the user
   back to the top of a tall fold (mk-story, mk-founders, faq, ...) the
   moment they pause mid-read, since the only snap points are fold tops.
   Proximity only pulls the scroll into alignment when it already comes to
   rest near a fold boundary -- a slow read scrolls freely; a fast flick
   that overshoots past a boundary settles cleanly onto the next fold.
   The fixed nav pill, the menu overlay, and the short decorative
   transition bands between folds are excluded -- they aren't folds meant
   to be individually viewed. */
html{scroll-snap-type:none}
[data-fold]{scroll-snap-align:none}
[data-fold="nav"],
[data-fold="menu"],
[data-fold="transition"],
[data-fold="mk-transition"],
[data-fold="sc-transition"]{scroll-snap-align:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-snap-type:none}
}
body{
  margin:0;
  background:var(--bg-page-light);
  color:var(--text-primary);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--body-md);
  line-height:var(--body-md-lh);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video,svg{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
strong{font-weight:600}

:focus-visible{
  outline:2px solid var(--accent-base);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute;left:8px;top:-64px;z-index:200;
  background:#fff;color:#0b0b0b;padding:10px 16px;border-radius:999px;
  font-size:var(--body-sm);font-weight:700;
}
.skip-link:focus{top:8px}

.wrap{width:min(var(--wrap),100% - (var(--gutter) * 2));margin-inline:auto}

/* =========================================================================
   ?static=1 — freeze every animation at its end state for screenshot QA
   ========================================================================= */
html[data-static="1"] *,
html[data-static="1"] *::before,
html[data-static="1"] *::after{
  animation-delay:-1ms !important;
  animation-duration:1ms !important;
  animation-iteration-count:1 !important;
  animation-fill-mode:forwards !important;
  animation-play-state:paused !important;
  transition:none !important;
  scroll-behavior:auto !important;
}

/* Mobile hero composition previews. These are opt-in through ?hero=a, ?hero=b
   and ?hero=c so the team can compare real responsive layouts without
   changing the approved default before a direction is selected. */
@media (max-width:1023px){
  html[data-hero-layout] .hero__scroll-cue{display:none}
  html[data-hero-layout] .hero__headline{
    font-size:clamp(29px,7.6vw,33px);line-height:1.07;text-wrap:balance;
  }

  /* A — full-bleed/open centre: preserve the cinematic film and reserve its
     middle third for the wearable rather than covering it with copy. */
  html[data-hero-layout="a"] .hero{min-height:720px;justify-content:flex-start;padding:108px var(--gutter) 34px}
  html[data-hero-layout="a"] .hero__inner{display:block;height:578px}
  html[data-hero-layout="a"] .hero__message{display:contents}
  html[data-hero-layout="a"] .hero__headline{position:absolute;inset:0 0 auto;max-width:360px}
  html[data-hero-layout="a"] .hero__features{position:absolute;left:0;right:0;bottom:112px;gap:7px}
  html[data-hero-layout="a"] .hero__cta{position:absolute;left:0;bottom:0;gap:8px}
  html[data-hero-layout="a"] .hero__media video,
  html[data-hero-layout="a"] .hero__media img{object-position:50% 58%}

  /* B — framed film (recommended): copy and controls stay in natural flow,
     while a 300px panel shows substantially more of the landscape source. */
  html[data-hero-layout="b"] .hero,
  html[data-hero-layout="c"] .hero{
    display:grid;grid-template-columns:minmax(0,1fr);min-height:auto;
    justify-content:stretch;padding:96px var(--gutter) 34px;background:#0b0b0b;
  }
  html[data-hero-layout="b"] .hero{
    grid-template-rows:auto clamp(218px,28svh,244px) auto auto;
    gap:12px;
    padding:104px var(--gutter) 24px;
  }
  html[data-hero-layout="b"] .hero__inner,
  html[data-hero-layout="b"] .hero__message,
  html[data-hero-layout="c"] .hero__inner,
  html[data-hero-layout="c"] .hero__message{display:contents}
  html[data-hero-layout="b"] .hero__headline{grid-row:1;text-align:left}
  html[data-hero-layout="b"] .hero__media{
    position:relative;inset:auto;grid-row:2;height:clamp(218px,28svh,244px);z-index:0;
    border-radius:22px;overflow:hidden;
  }
  html[data-hero-layout="b"] .hero__media video,
  html[data-hero-layout="b"] .hero__media img{object-position:50% 58%}
  html[data-hero-layout="b"] .hero__features{grid-row:3;gap:7px;margin-top:0}
  html[data-hero-layout="b"] .hero__cta{grid-row:4;gap:9px;margin-top:8px}
  html[data-hero-layout="b"] .hero__scrim,
  html[data-hero-layout="b"] .hero__vignette{display:none}

  /* C — editorial stack: lead with film, then place the full message on an
     opaque panel for maximum reading clarity. */
  html[data-hero-layout="c"] .hero{grid-template-rows:96px 320px auto auto auto;gap:20px;padding-top:0}
  html[data-hero-layout="c"] .hero__media{
    position:relative;inset:auto;grid-row:2;height:320px;z-index:0;
    width:calc(100% + (var(--gutter) * 2));margin-left:calc(var(--gutter) * -1);
  }
  html[data-hero-layout="c"] .hero__media video,
  html[data-hero-layout="c"] .hero__media img{object-position:50% 58%}
  html[data-hero-layout="c"] .hero__headline{grid-row:3}
  html[data-hero-layout="c"] .hero__features{grid-row:4;gap:7px}
  html[data-hero-layout="c"] .hero__cta{grid-row:5;gap:9px}
  html[data-hero-layout="c"] .hero__scrim,
  html[data-hero-layout="c"] .hero__vignette{display:none}
}

/* Preserve the complete primary action on short phones without compacting the
   normal 844px+ composition. The shallower media window reveals more of the
   landscape source, so this does not introduce an additional subject crop. */
@media (max-width:1023px) and (max-height:740px){
  html[data-hero-layout="b"] .hero{
    grid-template-rows:auto 190px auto auto;gap:10px;
    padding:92px var(--gutter) 18px;
  }
  html[data-hero-layout="b"] .hero__media{height:190px}
  html[data-hero-layout="b"] .hero__features{margin-top:0}
}

/* =========================================================================
   Shared atoms
   ========================================================================= */

/* icon-arrow-right.svg (142:1670) / icon-close.svg (75:235) / live-dot.svg (142:1580)
   inlined verbatim from the manifest asset files — same paths, same 1.5 stroke,
   currentColor so the glyph follows the ground it sits on. */
.i-arrow,.i-close,.live-dot{display:inline-block;flex:0 0 auto;color:inherit}
.i-arrow svg,.i-close svg,.live-dot svg{width:100%;height:100%;display:block}
.i-arrow{width:14px;height:14px}
/* Footer CTA arrow is desktop-only — mobile Button/primary 73:236 is text only */
.i-arrow--desktop{display:none}
@media (min-width:1024px){.i-arrow--desktop{display:inline-block}}
/* authored line breaks — the second hero break only exists at the 1000px measure */
br.br-desktop{display:none}
@media (min-width:1024px){br.br-desktop{display:block}}
.i-close{width:22px;height:22px}
.live-dot{width:5px;height:5px}

/* Boxed pill, not bare text -- same glass-chip formula as .mk-close__badge,
   so "LIMITED SPOTS" / "500 REMAINING" reads as one deliberate component
   everywhere it appears, matching the container earlyaccess.html's own
   spots counter already used. */
.limited-spots{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:var(--radius-full);
  background:var(--glass-fill);border:1px solid var(--glass-border);
  color:var(--text-accent-dark);
  font-size:var(--label-xs);line-height:var(--label-xs-lh);
  font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;
}

/* Btn / Book Early Access — 164:2504 */
.btn-book{
  display:inline-flex;align-items:center;gap:11px;
  padding:18px 30px 18px 36px;border-radius:100px;
  background:#ffffff;color:#0b0b0b;
  font-size:var(--body-md);line-height:var(--body-md-lh);
  box-shadow:0 12px 28px -8px rgba(11,11,11,.45), 0 10px 34px -4px rgba(201,126,136,.42);
  white-space:nowrap;
  transition:box-shadow .25s ease,background-color .25s ease,color .25s ease;
}
/* Same documented product-red hover-glow exception as .nav__cta (css/menu.css)
   and .btn-primary--light above -- this is the third and last white button
   on the site (index.html hero, makers.html closing band). Replaces the
   resting drop-shadow with the glow rather than stacking both, so hover
   reads as the light turning ON, not as an added shadow on top of one. */
.btn-book:hover,
.btn-book:focus-visible{
  background:#E23532;
  color:#ffffff;
  box-shadow:0 0 20px 2px rgba(226,53,50,.55),0 0 46px 10px rgba(226,53,50,.3);
}
.btn-book__label{font-weight:600}
.btn-book__meta{
  grid-column:1;grid-row:1;
  color:#9b5549;font-size:9px;line-height:10px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  transition:color .25s ease;
}
.btn-book--scarcity .btn-book__label{grid-column:1;grid-row:2;font-size:17px;line-height:22px}
.btn-book__arrow{grid-column:2;grid-row:1 / span 2;align-self:center;font-weight:400}
.btn-book--scarcity{
  display:grid;grid-template-columns:auto auto;column-gap:18px;row-gap:2px;
  padding:12px 28px 13px 32px;
}
.btn-book:hover .btn-book__meta,
.btn-book:focus-visible .btn-book__meta{color:rgba(255,255,255,.78)}

/* Btn / primary (dark pill) — 142:1668 / 73:236 */
.btn-primary{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 20px;border-radius:999px;
  background:#0b0b0b;color:#ffffff;
  font-size:var(--body-sm);line-height:var(--body-sm-lh);font-weight:700;
  box-shadow:0 10px 24px -6px rgba(11,11,11,.18);
  white-space:nowrap;
  transition:background-color .25s ease,box-shadow .25s ease;
}
/* "Black CTAs turn red on hover" -- excludes .btn-primary--light, which is
   already white and keeps its own glow-only treatment defined below. */
.btn-primary:not(.btn-primary--light):hover,
.btn-primary:not(.btn-primary--light):focus-visible{
  background:#E23532;
  box-shadow:0 0 20px 2px rgba(226,53,50,.55),0 0 46px 10px rgba(226,53,50,.3);
}
.btn-primary--light{background:#ffffff;color:#0b0b0b;padding:17px 20px;box-shadow:none;transition:box-shadow .25s ease,background-color .25s ease,color .25s ease}
/* Same documented product-red hover-glow exception as .nav__cta in css/menu.css. */
.btn-primary--light:hover,
.btn-primary--light:focus-visible{
  background:#E23532;
  color:#ffffff;
  box-shadow:0 0 20px 2px rgba(226,53,50,.55),0 0 46px 10px rgba(226,53,50,.3);
}

/* =========================================================================
   MISSING-asset placeholders (ASSET-MANIFEST.json)
   ========================================================================= */
.placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;text-align:center;
  border:2px dashed var(--accent-base);
  background:repeating-linear-gradient(135deg,#E8543D12 0 10px,transparent 10px 20px);
  color:var(--text-accent-light);
  font-size:11px;line-height:14px;font-weight:600;letter-spacing:.02em;
  padding:8px;overflow:hidden;
}
.placeholder__slot{font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.placeholder__node,.placeholder__spec{font-weight:500;opacity:.8}
.placeholder--portrait{
  width:72px;height:72px;border-radius:50%;flex:0 0 auto;
  font-size:8px;line-height:10px;gap:1px;padding:4px;
}
.placeholder--portrait .placeholder__slot{letter-spacing:.02em}
.expert-card__portrait{width:72px;height:72px;border-radius:50%;flex:0 0 auto;object-fit:cover;display:block}
.placeholder--product{width:100%;aspect-ratio:1966 / 1106;border-radius:12px}

/* =========================================================================
   HERO — 142:1561 / 69:132
   ========================================================================= */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:720px;
  background:var(--bg-page-dark);
  color:var(--text-inverse);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--gutter) 38px;
}
.hero__media{position:absolute;inset:0;z-index:-3;background:var(--bg-page-dark)}
/* At 393×720 a 1280×720 source covers at scale 1.0 — full height, no vertical
   crop — so object-position cannot recover framing the file does not contain.
   Figma's mobile fill (69:132) is a PORTRAIT render of girl/01 (2958×1665);
   hero.mp4 is only the desktop 1280×720 window of it. A portrait export is
   needed — see the report. The hook is in place for when it lands. */
/* ASSET GAP (QA r1 #4): Figma's mobile hero 69:132 uses a PORTRAIT photograph of a
   full standing figure. The manifest-locked hero.mp4 / hero-poster.jpg are a 1280x720
   LANDSCAPE midsection close-up — the head is not in the source at all, so no crop can
   reproduce 69:132. Biasing the crop upward is the best available approximation; the
   real fix is a portrait `hero-poster-mobile` slot added to ASSET-MANIFEST.json. */
.hero__media video,.hero__media img{object-position:50% 30%}
.hero__media video,.hero__media img{
  width:100%;height:100%;object-fit:cover;
  object-position:var(--hero-focus,50% 50%);
}
.hero__still{display:none}
.hero__vignette,.hero__scrim{position:absolute;z-index:-2;pointer-events:none}
/* Vignette / Left · Right — desktop only (142:1564 / 142:1565) */
.hero__vignette{display:none}
/* Scrim / Top — 69:133 (mobile) */
.hero__scrim--top{
  left:0;right:0;top:0;height:300px;
  background:linear-gradient(180deg,rgba(11,11,11,.88) 0%,rgba(11,11,11,.35) 55%,rgba(11,11,11,0) 100%);
}
/* Scrim / Bottom — 69:134 (mobile) */
.hero__scrim--bottom{
  left:0;right:0;top:300px;height:420px;
  background:linear-gradient(180deg,rgba(11,11,11,0) 0%,rgba(11,11,11,.4) 45%,rgba(11,11,11,.94) 100%);
}
.hero__inner{position:relative;display:flex;flex-direction:column;gap:28px;width:100%}
.hero__message{display:flex;flex-direction:column;gap:28px}
.hero__copy{display:contents}
.hero__headline-mobile,.hero__summary,.hero__availability{display:none}
.hero__headline{
  font-size:var(--display-lg);line-height:var(--display-lg-lh);
  font-weight:300;letter-spacing:var(--tr-display);
  text-shadow:0 4px 30px rgba(11,11,11,.5);
}
.hero__features{display:flex;flex-direction:column;gap:10px}
.hero__features li{
  display:flex;align-items:center;gap:10px;
  color:var(--text-accent-dark);
  font-size:var(--label-sm);line-height:var(--label-sm-lh);
  font-weight:500;letter-spacing:var(--tr-label);text-transform:uppercase;
  text-shadow:0 1px 12px rgba(11,11,11,.55);
}
.hero__features .dot{width:4px;height:4px;border-radius:50%;background:var(--text-accent-dark);flex:0 0 auto}
.hero__cta{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.hero__cta .limited-spots{text-shadow:0 1px 12px rgba(11,11,11,.55)}
.hero__scroll-cue{display:none}

/* ---------------------------------------------------------------------
   HERO INTRO -- staged dissolve-in on load. `html.intro` is added by a
   pre-paint script in <head> (index.html only) and is never present under
   ?static=1 or prefers-reduced-motion, so this whole block is inert then --
   the hero text/nav/CTA simply render at full opacity, same as the QA
   freeze and reduced-motion fallbacks just below.
   Sequence (timed by js/home.js): video playing -> hero text dissolves in
   -> +2s later -> nav + CTA dissolve in.
   --------------------------------------------------------------------- */
html.intro .hero__message,
html.intro .hero__cta,
html.intro .nav,
html.intro .hero__scroll-cue{opacity:1}
html.intro .hero__message{transition:opacity 240ms ease}
html.intro .nav,
html.intro .hero__cta,
html.intro .hero__scroll-cue{transition:opacity 240ms ease}
html.intro.t1 .hero__message{opacity:1}
html.intro.t2 .nav,
html.intro.t2 .hero__cta,
html.intro.t2 .hero__scroll-cue{opacity:1}

@media (prefers-reduced-motion:reduce){
  .hero__video{display:none}
  .hero__still{display:block}
}

@media (min-width:1024px){
  .hero{
    min-height:832px;
    justify-content:flex-start;align-items:center;
    padding:172px var(--gutter) 68px;
  }
  .hero__vignette{display:block;top:0;height:100%;width:300px}
  .hero__vignette--l{left:0;background:linear-gradient(90deg,rgba(11,11,11,.5) 0%,rgba(11,11,11,0) 100%)}
  .hero__vignette--r{right:0;background:linear-gradient(90deg,rgba(11,11,11,0) 0%,rgba(11,11,11,.5) 100%)}
  /* Scrim / Top 142:1566 (440) · Scrim / Bottom 142:1567 (396 from 440) */
  .hero__scrim--top{
    height:440px;
    background:linear-gradient(180deg,rgba(11,11,11,.88) 0%,rgba(11,11,11,.44) 45%,rgba(11,11,11,0) 100%);
  }
  .hero__scrim--bottom{
    top:440px;height:396px;
    background:linear-gradient(180deg,rgba(11,11,11,0) 0%,rgba(11,11,11,.28) 45%,rgba(11,11,11,.9) 100%);
  }
  /* Desktop departs from the mobile flex-column stack here: message and CTA
     are pinned independently (message dead-centre, CTA low), matching the
     reference build's positioning exactly, rather than being two flex items
     separated by one large fixed gap -- which is what was reading as
     "hero text not centred" (it was flush to the top padding, not centred). */
  .hero__inner{position:static;display:block;width:auto;max-width:none}
  .hero__message{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    display:flex;flex-direction:column;align-items:center;gap:24px;
    width:100%;max-width:1000px;
  }
  .hero__headline{text-align:center;max-width:1000px}
  .hero__features{flex-direction:row;gap:15px;flex-wrap:wrap;justify-content:center}
  .hero__features{
    padding:10px 16px;border:1px solid rgba(255,255,255,.14);border-radius:999px;
    background:rgba(11,11,11,.34);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    box-shadow:0 10px 30px rgba(0,0,0,.18);
  }
  .hero__features li{font-size:12px;line-height:16px;font-weight:650;text-shadow:0 1px 12px rgba(0,0,0,.9)}
  .hero__features li{gap:15px}
  /* Was pinned with top:80.8% -- fine against the reference at exactly
     760px, but that leaves only ~15-25px before the button+pill stack hits
     the hero's own bottom edge (.hero is overflow:hidden), which is why the
     "LIMITED SPOTS" pill was reading as flush against the bottom of the
     fold. Anchoring from the bottom with a fixed offset instead guarantees
     real clearance regardless of the exact button/pill height. */
  .hero__cta{
    position:absolute;left:50%;bottom:88px;transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;gap:16px;
  }
  .hero__scroll-cue{
    display:block;position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
    width:1.5px;height:26px;border-radius:4px;background:var(--accent-base);opacity:.5;
  }
}

/* =========================================================================
   TRANSITION — 142:1560 / 70:156
   ========================================================================= */
.transition{
  height:clamp(56px,8svh,72px);
  margin-top:-2px;
  position:relative;
  z-index:1;
  background:linear-gradient(180deg,
    rgb(11,11,11) 0%, rgb(29,29,29) 35%, rgb(83,83,83) 66%, rgb(164,164,164) 88%, var(--bg-page-light) 100%);
}
@media (min-width:1024px){.transition{height:152px}}

/* Phone composition: preserve the approved product claim, readable benefits,
   and one clear action within a compact natural-height hero. */
@media (max-width:767px){
  .home .nav:not(.nav--stretched){top:max(16px,env(safe-area-inset-top))}
  html[data-hero-layout="b"] .hero{
    grid-template-rows:auto clamp(200px,27svh,240px) auto auto;
    gap:20px;padding:132px var(--gutter) 32px;
  }
  html[data-hero-layout="b"] .hero__copy{display:block;grid-row:1}
  html[data-hero-layout="b"] .hero__headline{
    font-size:clamp(32px,8.2vw,34px);line-height:1.05;font-weight:300;
    letter-spacing:-.03em;text-shadow:none;
  }
  html[data-hero-layout="b"] .hero__headline-desktop{display:none}
  html[data-hero-layout="b"] .hero__headline-mobile{display:block}
  html[data-hero-layout="b"] .hero__summary{
    display:block;margin-top:12px;font-size:15px;line-height:22px;
    color:#edcfc7;letter-spacing:0;
  }
  html[data-hero-layout="b"] .hero__media{
    height:clamp(200px,27svh,240px);border-radius:16px;
  }
  html[data-hero-layout="b"] .hero__features{gap:5px}
  html[data-hero-layout="b"] .hero__features li{
    font-size:15px;line-height:22px;font-weight:400;letter-spacing:0;
    text-transform:none;text-shadow:none;color:#f3d7cf;gap:10px;
  }
  html[data-hero-layout="b"] .hero__cta{margin-top:14px;gap:10px;align-items:stretch}
  html[data-hero-layout="b"] .hero__cta .btn-book{
    display:flex;justify-content:center;min-height:52px;padding:14px 24px;
    gap:16px;box-shadow:none;
  }
  html[data-hero-layout="b"] .hero__cta .btn-book__meta{display:none}
  html[data-hero-layout="b"] .hero__availability{
    display:block;font-size:12px;line-height:18px;color:#d8bcb4;text-align:center;
  }
  html[data-hero-layout="b"] .hero + .transition{
    display:block;height:68px;margin-top:-1px;
    background:linear-gradient(180deg,#0b0b0b 0%,#171717 24%,#393939 48%,#858585 72%,var(--bg-page-light) 100%);
  }
  html[data-hero-layout="b"] .problem{padding-top:56px}
}
@media (max-width:767px) and (max-height:740px){
  html[data-hero-layout="b"] .hero{
    grid-template-rows:auto 176px auto auto;gap:14px;padding:110px var(--gutter) 24px;
  }
  html[data-hero-layout="b"] .hero__headline{font-size:30px}
  html[data-hero-layout="b"] .hero__summary{margin-top:8px;font-size:14px;line-height:20px}
  html[data-hero-layout="b"] .hero__media{height:176px}
  html[data-hero-layout="b"] .hero__features{gap:3px}
  html[data-hero-layout="b"] .hero__cta{margin-top:8px}
}

/* Same treatment as .transition above, scoped to science.html: the sc-hero
   (dark) fold ends abruptly into .sc-problem (plain white, no bg image) with
   no gradient band of its own, unlike makers.html's .mk-transition (which
   fades to transparent because .mk-story has its own glow-image background
   to reveal). Science needs the solid dark->white fade instead, so this is
   a straight duplicate of .transition rather than of .mk-transition. */
.sc-transition{
  height:120px;
  background:linear-gradient(180deg,
    rgb(11,11,11) 0%, rgb(29,29,29) 35%, rgb(83,83,83) 66%, rgb(164,164,164) 88%, rgb(255,255,255) 100%);
}
@media (min-width:1024px){.sc-transition{height:200px}}

/* =========================================================================
   THE PROBLEM — 142:1693 / 70:157
   ========================================================================= */
.problem{
  background:var(--bg-page-light);
  padding:var(--fold-pt) 0 var(--fold-pb);
}
@media (max-width:1023px){.problem{padding-top:clamp(72px,10svh,96px)}}
.problem .wrap{display:flex;flex-direction:column}
.problem__eyebrow{
  font-size:var(--title-md);line-height:var(--title-md-lh);
  font-weight:500;letter-spacing:var(--tr-caps);text-transform:uppercase;
  color:var(--text-primary);
}
.problem__stat{color:var(--text-accent-light)}
.problem__headline{
  margin-top:16px;
  font-size:var(--display-lg);line-height:var(--display-lg-lh);
  font-weight:300;letter-spacing:var(--tr-display);
}
.problem__lead{
  margin-top:16px;
  font-size:var(--title-sm);line-height:var(--title-sm-lh);
  font-weight:400;letter-spacing:var(--tr-title);color:var(--text-secondary);
}

/* Fold3 / Player — 142:1698 / 70:162 */
.player{
  position:relative;margin-top:40px;width:100%;
  aspect-ratio:353 / 254;
  border-radius:16px;overflow:hidden;background:var(--bg-page-dark);
  box-shadow:0 8px 22px -6px rgba(0,0,0,.52);
}
.player__poster,.player__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.player__video{z-index:2}
.player__scrim{
  position:absolute;left:0;right:0;bottom:0;height:55%;
  background:linear-gradient(180deg,rgba(11,11,11,0) 0%,rgba(11,11,11,.42) 55%,rgba(11,11,11,.88) 100%);
}
.player__control{
  position:absolute;left:50%;top:37.4%;transform:translateX(-50%);
  width:64px;height:64px;border-radius:50%;
}
.player__control svg{width:100%;height:100%}
.player__title{
  position:absolute;left:20px;top:69.29%;
  font-size:var(--display-sm);line-height:var(--display-sm-lh);
  font-weight:300;letter-spacing:var(--tr-display);
  background-image:linear-gradient(180deg,rgb(255,235,221) 0%,rgb(255,186,174) 45%,rgb(255,121,102) 75%,rgb(232,84,61) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.player__kicker{
  position:absolute;left:20px;top:86.61%;
  color:var(--text-accent-dark);
  font-size:var(--label-xs);line-height:var(--label-xs-lh);
  font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;
}
.player.is-playing .player__poster,
.player.is-playing .player__scrim,
.player.is-playing .player__control,
.player.is-playing .player__title,
.player.is-playing .player__kicker{display:none}

@media (min-width:1024px){
  .problem{padding:124px 0 0}
  /* widened + a manual break (index.html) so "So here is a new chapter into
     Menstrual Pain Management" reliably sets in 2 lines, not 3 -- at the old
     616px measure the phrase needed a third line. */
  .problem__headline{margin-top:24px;max-width:880px}
  .problem__lead{margin-top:24px;max-width:616px}
  .player{
    margin-top:64px;aspect-ratio:1112 / 625;border-radius:24px;
    box-shadow:0 16px 40px -12px rgba(0,0,0,.64);
  }
  /* Player / Play control 142:1700 — x508 w96 in 1112 → centre 556 = dead centre.
     Originally y250 of 625 = 40% (matching the Figma reference exactly), but
     with the tall 1112x625 card that put the button low enough to fall
     mostly below the fold on ordinary viewport heights, with nothing on
     screen yet to signal "this is a video." Nudged up so it reads within
     the fold much sooner, even before the headline-height fix above. */
  .player__control{width:96px;height:96px;top:30%}
  .player__title{left:48px;top:80%}
  .player__kicker{left:48px;top:90.56%}
}

/* =========================================================================
   MEET M — 142:1704 / 71:168
   ========================================================================= */
.meetm{
  background:var(--bg-page-light);
  padding:var(--fold-pt) 0 var(--fold-pb);
  overflow-x:clip;
}
.meetm__inner{display:flex;flex-direction:column}
.meetm__eyebrow{
  color:var(--text-accent-light);
  font-size:var(--label-xs);line-height:var(--label-xs-lh);
  font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;
}
.meetm__wordmark{margin-top:14px;width:100%;height:auto}

/* Real certification marks -- same uniform trust-badge treatment used
   everywhere else on the site now (.mk-cred / .sc-cred), not a generic
   tick-in-a-pill. Light ground here, so no backing chip is needed. */
.creds{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.cred{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.cred__logo{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:32px;height:32px;overflow:hidden;
}
.cred__logo img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.cred__label{
  font-size:var(--label-xs);line-height:var(--label-xs-lh);
  font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--text-secondary);
}

.meetm__product{position:relative;margin-top:32px;padding:15px 0 16px;isolation:isolate}
.meetm__product-img{display:block;width:100%;height:auto}
.meetm__glow{
  position:absolute;left:50%;top:12px;transform:translateX(-50%);
  width:320px;height:210px;max-width:91%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,var(--accent-halo),rgba(232,84,61,0) 100%);
  filter:blur(10px);
}

.features{margin-top:32px;display:flex;flex-direction:column;gap:28px}
.feature{display:flex;flex-direction:column;gap:10px}
.feature + .feature{border-top:1px solid var(--border-subtle);padding-top:28px}
.feature__index{
  color:var(--text-accent-light);
  font-size:var(--label-xs);line-height:var(--label-xs-lh);
  font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;
}
.feature__title{
  font-size:var(--title-md);line-height:var(--title-md-lh);
  font-weight:600;letter-spacing:var(--tr-title);color:var(--text-primary);
}
.feature__body{
  font-size:var(--body-md);line-height:var(--body-md-lh);
  font-weight:400;color:var(--text-secondary);
}

@media (min-width:1024px){
  /* Fold · Meet M 142:1704 is 773 tall (product 142:1721 runs to its bottom edge,
     y220+553=773) and sits at y1173 inside Folds · Swappable 142:1692 (1032→3058).
     Meet M therefore ends at y2978 and Fold4 / Field 142:1583 begins at y3058:
     the 80px of page ground is in the composition and is kept deliberately. */
  /* Fold · Meet M 142:1704 is 773 tall with image 308 running to the bottom
     edge — no trailing space below the product. */
  /* 124 top + Figma's 773 fold + 80 bottom = 977. The 80 is REAL PAGE GROUND, not padding
     drift: 142:1704 sits at y1173 inside 142:1692 (1032→3058) so it ends at absolute 2978,
     while 142:1583 begins at y3058. Verified twice in QA. Do not remove it again — a later
     pass set this to `0`, which collapsed the fold to 897 and closed a gap the design has. */
  .meetm{padding:124px 0 80px}
  .meetm__inner{position:relative;min-height:773px}
  .meetm__eyebrow{font-size:var(--label-sm);line-height:var(--label-sm-lh);font-weight:500}
  .meetm__wordmark{margin-top:22px;width:600px}
  .creds{margin-top:46px;gap:16px;flex-wrap:nowrap}
  .cred__logo{width:40px;height:40px}

  /* image 308 — 983×553 at x456 (frame) → 372 from the 1112 wrap, top 220. Bleeds right by design. */
  .meetm__product{position:absolute;left:372px;top:220px;width:983px;margin:0;padding:0;z-index:0;pointer-events:none}
  .features{position:relative;z-index:1}
  .meetm__glow{
    /* Fold2 / Product Glow 142:1743 — 660×430 at x613.5 (→ 529.5 in-wrap), y304 */
    left:157.5px;top:84px;transform:none;width:660px;height:430px;max-width:none;filter:blur(18px);
  }
  .features{margin-top:115px;width:430px;gap:44px}
  .feature + .feature{padding-top:18px}
  .feature{
    display:grid;grid-template-columns:max-content 1fr;
    column-gap:12px;row-gap:9px;align-items:baseline;
  }
  .feature__index{grid-column:1;grid-row:1}
  .feature__title{grid-column:2;grid-row:1}
  .feature__body{grid-column:1 / -1;grid-row:2}
}

/* =========================================================================
   EXPERTS — 142:1583 / 72:192
   ========================================================================= */
.experts{
  background:var(--bg-sunken);
  padding:var(--fold-pt) 0 var(--fold-pb);
}
.experts__headline{
  font-size:var(--display-sm);line-height:var(--display-sm-lh);
  font-weight:300;letter-spacing:var(--tr-display);
}
.carousel{margin-top:32px}
.carousel__track{
  display:flex;gap:32px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:2px;
}
.carousel__track::-webkit-scrollbar{display:none}
.expert-card{
  flex:0 0 100%;scroll-snap-align:start;
  display:flex;flex-direction:column;gap:20px;
  padding:24px;border-radius:16px;
  background:var(--bg-surface);border:1px solid var(--border-subtle);
  box-shadow:var(--elev-2);
}
.expert-card__head{display:flex;align-items:center;gap:14px}
.expert-card__names{display:flex;flex-direction:column;gap:4px;min-width:0}
.expert-card__name{
  font-size:var(--title-sm);line-height:var(--title-sm-lh);
  font-weight:600;letter-spacing:var(--tr-title);
}
.expert-card__cred{
  font-size:var(--body-sm);line-height:var(--body-sm-lh);
  font-weight:400;color:var(--text-muted);
}
.expert-card__quote{
  margin:0;
  font-size:var(--title-sm);line-height:var(--title-sm-lh);
  font-weight:400;letter-spacing:var(--tr-title);color:var(--text-primary);
}
.carousel__bar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:32px}
.carousel__rail{flex:1 1 auto;height:2px;background:var(--border-subtle);overflow:hidden}
.carousel__rail-fill{
  display:block;height:2px;width:33.3333%;background:var(--accent-base);
  transition:width .32s ease, transform .32s ease;
}
.carousel__arrows{display:none;gap:12px;flex:0 0 auto}
.carousel__arrow{
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--border-default);background:var(--bg-surface);
  display:flex;align-items:center;justify-content:center;color:var(--text-primary);
  transition:border-color .2s ease,color .2s ease;
}
.carousel__arrow svg{width:20px;height:20px}
.carousel__arrow:hover{border-color:var(--accent-base);color:var(--accent-base)}
.carousel__arrow[disabled]{opacity:.35;cursor:default}
.carousel__arrow[disabled]:hover{border-color:var(--border-default);color:var(--text-primary)}

@media (min-width:1024px){
  /* Fold4 / Field 142:1583 — y3058→3958 (900). Heading y3260 → pt 202.
     Arrow row ends y3920 → pb 38. */
  .experts{padding:202px 0 38px}
  .experts__headline{font-size:var(--display-md);line-height:var(--display-md-lh)}
  .carousel{margin-top:78px}
  .expert-card{
    /* Expert Card 142:1585 — 540×276, p34; Quote 142:1591 starts at y130,
       exactly where the 96px Expert head ends. No gap. */
    flex:0 0 540px;height:276px;justify-content:flex-start;
    gap:0;padding:34px;border-radius:24px;
  }
  .expert-card__head{gap:20px}
  .expert-card__quote{margin-top:0}
  /* cards end y3664 · Fold4 / Track 142:1609 at y3896 → 232px of clear ground */
  .carousel__bar{margin-top:209px}
  .carousel__rail{flex:0 0 480px}
  .carousel__arrows{display:flex}
  .placeholder--portrait{width:96px;height:96px;font-size:9px;line-height:11px}
  .expert-card__portrait{width:96px;height:96px}
}

/* =========================================================================
   FAQ — 142:1617 / 73:192
   ========================================================================= */
.faq{
  background:var(--bg-page-light);
  padding:var(--fold-pt) 0 var(--fold-pb);
}
.faq__headline{
  font-size:var(--display-sm);line-height:var(--display-sm-lh);
  font-weight:300;letter-spacing:var(--tr-display);
}

/* Tabs — mobile 73:194 (gap 6, px 18, py 11). Must stay ONE row at 393. */
.faq__tabs{
  margin-top:28px;
  display:flex;align-items:center;gap:6px;flex-wrap:nowrap;
}
.faq__tab{
  flex:0 0 auto;
  padding:11px 18px;border-radius:var(--radius-full);
  border:1px solid transparent;background:transparent;
  color:var(--text-muted);
  font-size:var(--body-sm);line-height:var(--body-sm-lh);font-weight:500;
  white-space:nowrap;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
/* Solid dark pill, same idiom as .demo .seg button.on on the Early Access
   page -- not the pale-tint + coloured-ring treatment used before, which
   read as a generic AI-assistant segmented control. */
.faq__tab.is-active{
  background:var(--text-primary);border-color:transparent;
  color:var(--text-inverse);font-weight:700;
}

.faq__panel{margin-top:28px;display:flex;flex-direction:column;gap:10px}
.faq__panel[hidden]{display:none}
.faq__a[hidden]{display:none}
.player__video[hidden]{display:none}
.faq__item{
  border:1px solid var(--border-subtle);border-radius:12px;
  background:var(--bg-page-light);
  padding:18px;
  transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease;
}
/* Open state: a soft hairline + a low, wide ambient glow read as "quietly lit"
   rather than the flat, fully-saturated ring this used to be -- same restraint
   as an elevated card, not a loud CTA outline. */
.faq__item.is-open{
  background:var(--bg-surface);border-color:#E8543D33;
  box-shadow:var(--elev-1),0 0 0 1px #E8543D14,0 22px 40px -26px #E8543D4d;
}
.faq__item h3{margin:0;font:inherit}
.faq__q{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  font-size:var(--title-sm);line-height:var(--title-sm-lh);
  font-weight:600;letter-spacing:var(--tr-title);color:var(--text-primary);
  transition:font-weight .2s ease;
}
.faq__item.is-open .faq__q{font-weight:700}
.faq__q > span:first-child{flex:1 1 auto;min-width:0}

/* icon-plus 142:1636 / icon-minus 142:1630 — inline geometry, 1.5 stroke, rose.
   Open state fills the glyph into a small solid chip (dark disc, white bar)
   instead of a bare coloured line -- reads as a considered, crafted control
   rather than a generic accordion caret. */
.faq__glyph{
  position:relative;flex:0 0 auto;width:20px;height:20px;color:var(--accent-base);
  border-radius:50%;
  transition:background-color .25s ease,color .25s ease;
}
.faq__item.is-open .faq__glyph{background:var(--text-primary);color:var(--text-inverse)}
.faq__glyph::before,.faq__glyph::after{
  content:"";position:absolute;left:50%;top:50%;
  background:currentColor;border-radius:1px;
  transform:translate(-50%,-50%);
  transition:opacity .2s ease,transform .2s ease;
}
.faq__glyph::before{width:14px;height:1.5px}                 /* bar — always */
.faq__glyph::after{width:1.5px;height:14px}                  /* stem — plus only */
.faq__item.is-open .faq__glyph::after{opacity:0;transform:translate(-50%,-50%) scaleY(0)}

.faq__a{padding-top:12px}
.faq__a p{
  font-size:var(--body-md);line-height:var(--body-md-lh);
  font-weight:400;color:var(--text-secondary);
}

@media (min-width:1024px){
  .faq{padding:208px 0 120px}
  .faq__tabs{
    margin-top:52px;align-self:flex-start;width:max-content;
    padding:5px;border-radius:var(--radius-full);
    background:var(--bg-sunken);
    /* Figma strokes sit inside the 322px box — an inset ring, not a border,
       so the edge does not add 2px to the measured width. */
    border:0;box-shadow:inset 0 0 0 1px var(--border-default);
  }
  /* FAQ / Tabs 142:1619 is 322 wide: 5 + 92 + 6 + 103 + 6 + 105 + 5.
     The tab frames are stated widths in Figma, so they are set explicitly —
     Chromium's text metrics otherwise run each tab ~2px wide (328 total). */
  .faq__tab{padding:11px 0;text-align:center}
  #tab-usage{width:92px}
  #tab-science{width:103px}
  #tab-booking{width:105px}
  .faq__panel{margin-top:32px;gap:14px}
  .faq__item{padding:24px 28px;border-radius:16px}
  .faq__glyph{width:24px;height:24px}
  .faq__glyph::before{width:16px}
  .faq__glyph::after{height:16px}
  .faq__a{padding-top:16px}
  .faq__a p{max-width:880px}
}

/* =========================================================================
   FOOTER CTA — 142:1664 / 73:233
   ========================================================================= */
.footer-cta{background:var(--bg-page-light);padding:0 0 var(--fold-pb)}
.footer-cta__panel{
  display:flex;flex-direction:column;gap:24px;
  padding:32px 28px;border-radius:18px;
  background:var(--bg-surface);border:1px solid var(--border-subtle);
  box-shadow:var(--elev-2);
}
/* Sitting inside .mk-close (the same closing band makers/science use), this
   card reads as the whole section's content -- give it its own top/bottom
   air so the section doesn't feel front-loaded and cramped against the
   footer beneath it, matching how roomy that same section feels on the
   other two pages. */
.mk-close .footer-cta__panel{margin:0 0 40px}
/* index.html's close band uses this compact card instead of the taller
   badge+headline+CTA+spots stack makers/science use -- without something
   forcing extra height, the card just sits flush under the top padding,
   leaving unused dark space below it before the footer, so the section
   reads short/compact instead of "filling the fold" like the other two.
   Grid gives the card its own row that can be stretched by min-height
   below (desktop only) and centred within it, while the footer keeps its
   own natural size as the second row. */
.page-home .mk-close{display:grid;grid-template-rows:1fr auto}
.page-home .mk-close .footer-cta__panel{align-self:center}
.footer-cta__claim{
  font-size:var(--title-md);line-height:var(--title-md-lh);
  font-weight:300;letter-spacing:var(--tr-title);color:var(--text-primary);
}
.footer-cta__claim strong{font-weight:600}
.footer-cta__action{width:100%}
.footer-cta__action .btn-primary{width:100%}
/* mobile button 73:236 is text only; the arrow is desktop-only (142:1670) */
.footer-cta__action .i-arrow{display:none}

@media (min-width:1024px){
  .footer-cta{padding:0 0 132px}
  .footer-cta__panel{
    flex-direction:row;align-items:center;justify-content:space-between;gap:48px;
    padding:44px 48px;border-radius:28px;
  }
  .mk-close .footer-cta__panel{margin-bottom:64px}
  .page-home .mk-close{min-height:100vh}
  .footer-cta__claim{max-width:660px}
  .footer-cta__action{width:280px;flex:0 0 280px}
  .footer-cta__action .i-arrow{display:inline-block}
  .footer-cta__action .btn-primary{padding:14px 20px}
}

/* =========================================================================
   FOOTER — 142:1672 / 73:238
   ========================================================================= */
.site-footer{
  background:var(--bg-page-light);
  border-top:1px solid var(--border-subtle);
  padding:40px var(--gutter) 48px;
}
.site-footer__inner{display:flex;flex-direction:column;gap:24px}
.site-footer__brand img{width:153px;height:auto}
.site-footer__links{
  display:flex;flex-wrap:wrap;gap:14px 20px;
  font-size:var(--body-sm);line-height:var(--body-sm-lh);color:var(--text-secondary);
}
.site-footer__links a{white-space:nowrap}
.site-footer__links a:hover{color:var(--text-primary)}
.site-footer__links .is-strong{font-weight:700;color:var(--text-primary)}

@media (min-width:1024px){
  .site-footer{border-top:0;padding:20px 60px;min-height:163px;display:flex;align-items:center}
  .site-footer__inner{flex-direction:row;align-items:flex-start;justify-content:space-between;width:100%;gap:40px}
  .site-footer__brand{width:268px}
  .site-footer__brand img{width:180px}
  .site-footer__links{flex:0 0 570px;justify-content:space-between;gap:0;flex-wrap:nowrap}
}

/* =========================================================================
   EXTENDED FOOTER — 142:1546 / 150:685
   ========================================================================= */
.extfooter{
  position:relative;overflow:hidden;
  height:204px;background:var(--bg-product);
}
.extfooter__seam{position:absolute;left:0;right:0;top:0;height:1px;background:var(--border-subtle)}
.extfooter__arcs{position:absolute;inset:0}
/* concentric arcs, all centred on (50%, 225.5px) mobile / (50%, 474px) desktop */
.extfooter__arc{
  position:absolute;left:50%;top:225.5px;transform:translate(-50%,-50%);
  border:1px solid var(--crimson-22);border-radius:50%;
  width:var(--w);height:var(--w);
}
.extfooter__arc[style*="--d:1"]{--w:154px}
.extfooter__arc[style*="--d:2"]{--w:222px}
.extfooter__arc[style*="--d:3"]{--w:294px}
.extfooter__arc[style*="--d:4"]{--w:374px}
.extfooter__arc[style*="--d:5"]{--w:460px}
.extfooter__arc[style*="--d:6"]{--w:552px}
.extfooter__arc[style*="--d:7"]{--w:650px}
.extfooter__arc[style*="--d:8"]{--w:762px}

.extfooter__lead,.extfooter__poster{
  position:absolute;color:var(--crimson-22);
  font-weight:300;letter-spacing:var(--tr-display);white-space:nowrap;
}
.extfooter__lead{left:var(--gutter);top:48px;font-size:var(--display-lg);line-height:var(--display-lg-lh)}
.extfooter__poster{
  left:50%;transform:translateX(-50%);top:94px;
  font-size:var(--display-xl);line-height:var(--display-xl-lh);
}

@media (min-width:1024px){
  .extfooter{height:404px}
  .extfooter__arc{top:474px}
  .extfooter__arc[style*="--d:1"]{--w:500px}
  .extfooter__arc[style*="--d:2"]{--w:720px}
  .extfooter__arc[style*="--d:3"]{--w:960px}
  .extfooter__arc[style*="--d:4"]{--w:1220px}
  .extfooter__arc[style*="--d:5"]{--w:1500px}
  .extfooter__arc[style*="--d:6"]{--w:1800px}
  .extfooter__arc[style*="--d:7"]{--w:2120px}
  .extfooter__arc[style*="--d:8"]{--w:2480px}
  .extfooter__lead{top:72px}
  .extfooter__poster{top:148px}
}

/* =========================================================================
   768–1023 — tablet: desktop-ish proportions on the mobile composition
   ========================================================================= */
@media (min-width:768px) and (max-width:1023.98px){
  :root{--gutter:40px;--wrap:688px}
  .hero{min-height:760px}
  .hero__headline{max-width:600px}
  .expert-card{flex:0 0 min(540px,88%)}
  .creds{flex-wrap:wrap}
}

/* =========================================================================
   =========================================================================
   MAKERS PAGE — "Meet the Makers"
   Figma section 301:6154 · desktop 301:6155 (1280×3992) · mobile 301:6265 (393×5499)
   Appended to home.css by contract (no new stylesheet). All values verbatim.
   Shared with Home: tokens, @font-face, .wrap, .btn-book, .limited-spots,
   .live-dot/.i-arrow/.i-close, the ?static=1 freeze, and css/menu.css.
   =========================================================================
   ========================================================================= */

/* ---- page-scoped tokens (modes resolved per node) ---------------------- */
.page-makers{
  --mk-accent-light:#BC2E16;   /* text/accent · light sections   */
  --mk-accent-dark:#FFBCAD;    /* text/accent · dark sections    */
  --mk-crimson:#bc1c21;        /* crimson/500 · close glow       */
  --mk-glow-core:#d22e22;      /* glow/core · mobile hero glow   */
  --mk-dark-secondary:#bababa; /* text/secondary on dark         */
  --mk-dark-muted:#a3a3a3;     /* text/muted on dark             */
  --mk-dark-border:#ffffff1a;  /* border/subtle on dark          */
  --mk-hairline:1px;           /* stroke/hairline                */
}
/* ---- shared atoms ------------------------------------------------------ */
.mk-label{
  color:var(--mk-accent-light);
  font-size:var(--label-sm);line-height:var(--label-sm-lh);
  font-weight:500;letter-spacing:var(--tr-label);text-transform:uppercase;
}
.mk-rule{
  border:0;margin:0;height:var(--mk-hairline);
  background:var(--border-subtle);width:100%;
}
.mk-rule--mobile{display:block}
@media (min-width:1024px){.mk-rule--mobile{display:none}}

/* Two-column editorial grid: eyebrow at x84, content at x370 (286 + 826) */
.mk-cols{display:block}
@media (min-width:1024px){
  /* 286 + 826 = the 1112 wrap; fr keeps the ratio below 1280 */
  .mk-cols{display:grid;grid-template-columns:minmax(0,286fr) minmax(0,826fr);align-items:start}
}

/* =========================================================================
   HERO — 301:6243 / 301:6266
   The dark look is NOT in makers-hero.png: it comes from the image's own
   50% opacity plus vignettes 301:6245/6246 and scrims 301:6247/6248.
   ========================================================================= */
.mk-hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100vh;min-height:100svh;
  background:var(--bg-page-dark);color:var(--text-inverse);
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:216px var(--gutter) 60px;
}
/* Hero / Image 301:6267 — 575×761 at (-104,-120) in a 393×520 frame */
.mk-hero__media{position:absolute;inset:-23.08% -19.85% -23.27% -26.46%;z-index:-4}
.mk-hero__media img{width:100%;height:100%;object-fit:cover;opacity:.5}
.mk-hero__vignette,.mk-hero__scrim,.mk-hero__glow{position:absolute;pointer-events:none}
.mk-hero__vignette{top:0;bottom:0;width:110px;z-index:-3}
/* 301:6245 / 301:6246 — the frame edges go near-black in Figma; the jacket and
   shoulders must not read at the outer gutters. */
.mk-hero__vignette--l{left:0;background:linear-gradient(90deg,rgba(11,11,11,.96) 0%,rgba(11,11,11,.62) 45%,rgba(11,11,11,0) 100%)}
.mk-hero__vignette--r{right:0;background:linear-gradient(90deg,rgba(11,11,11,0) 0%,rgba(11,11,11,.62) 55%,rgba(11,11,11,.96) 100%)}
.mk-hero__scrim{left:0;right:0;z-index:-2}
.mk-hero__scrim--top{
  top:0;height:280px;
  background:linear-gradient(180deg,rgba(11,11,11,.86) 0%,rgba(11,11,11,.4) 50%,rgba(11,11,11,0) 100%);
}
.mk-hero__scrim--bottom{
  top:280px;height:240px;
  background:linear-gradient(180deg,rgba(11,11,11,0) 0%,rgba(11,11,11,.35) 50%,rgba(11,11,11,.92) 100%);
}
/* Hero / Glow 301:6272 — 250×190 at (72,178), glow/core */
/* 301:6249 — glow/core #d22e22, but 301:6272 renders as warm photographic tone,
   not a crimson wash. Held far below the .42 that produced an orange-red cast. */
.mk-hero__glow{
  left:72px;top:178px;width:250px;height:190px;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(210,46,34,.11),rgba(210,46,34,0) 100%);
  filter:blur(34px);
}
.mk-hero__inner{position:relative;display:flex;flex-direction:column;gap:94px;width:100%}
.mk-hero__message{display:flex;flex-direction:column;gap:16px;text-align:center}
.mk-hero__headline{
  font-size:var(--display-lg);line-height:var(--display-lg-lh);
  font-weight:300;letter-spacing:var(--tr-display);
}
.mk-hero__lead{
  color:var(--mk-accent-dark);
  font-size:var(--title-md);line-height:var(--title-md-lh);
  font-weight:300;letter-spacing:var(--tr-title);
}
.mk-hero__features{
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  font-size:var(--label-sm);line-height:var(--label-sm-lh);
  font-weight:500;letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--text-inverse);
}
.mk-hero__features li{display:flex;align-items:center;gap:15px}

@media (max-width:767px){
  .mk-hero{
    min-height:calc(100vh - 68px);
    min-height:calc(100svh - clamp(56px,8svh,72px));
    justify-content:center;
    padding:104px var(--gutter) 64px;
  }
  .mk-hero__inner{gap:42px;transform:translateY(clamp(28px,5svh,44px))}
  .mk-hero__message{gap:12px}
  .page-makers .mk-transition{
    height:clamp(56px,8svh,72px);
    margin-top:-1px;
    background:linear-gradient(180deg,#0b0b0b 0%,#171717 24%,#393939 48%,#858585 72%,var(--bg-page-light) 100%);
  }
}

@media (min-width:1024px){
  .mk-hero{min-height:100vh;padding:204px var(--gutter) 182px;align-items:center}
  /* Hero / Image 301:6244 — 1611×705 at (-170,-20) in a 1280×560 frame */
  .mk-hero__media{inset:-3.57% -12.58% -22.32% -13.28%}
  .mk-hero__vignette{width:300px}
  .mk-hero__scrim--top{height:300px;background:linear-gradient(180deg,rgba(11,11,11,.86) 0%,rgba(11,11,11,.4) 50%,rgba(11,11,11,0) 100%)}
  .mk-hero__scrim--bottom{top:300px;bottom:0;height:auto}
  .mk-hero__glow{display:none}          /* 301:6249 is hidden on desktop */
  .mk-hero__inner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);gap:38px;max-width:820px;align-items:center}
  .mk-hero__message{gap:24px;width:100%}
  .mk-hero__features{flex-direction:row;justify-content:center;gap:15px}
  /* Sep Dot 301:6255 / 301:6257 — 4px, between items only */
  .mk-hero__features li + li::before{
    content:"";width:4px;height:4px;border-radius:50%;
    background:currentColor;flex:0 0 auto;
  }
}

/* The hero grows with the viewport, while the source scrims were sized for
   fixed 520px/560px reference frames. Pinning their lower edge removes the
   exposed image band on taller screens without changing either image crop. */
@media (max-width:1023.98px){
  .page-makers .mk-hero__scrim--bottom{bottom:0;height:auto}
}

/* =========================================================================
   FOLD TRANSITION — 301:6259 (95) / 301:6280 (120)
   ========================================================================= */
.mk-transition{
  height:120px;
  background:linear-gradient(180deg,
    rgb(11,11,11) 0%, rgba(22,22,22,.8) 22%, rgba(45,45,45,.4) 50%,
    rgba(85,85,85,.12) 76%, rgba(0,0,0,0) 100%);
}
@media (min-width:1024px){.mk-transition{height:95px}}

/* =========================================================================
   ORIGIN / STORY — 301:6156–6162 / 301:6281
   ========================================================================= */
.mk-story{background:var(--bg-page-light);padding:var(--fold-pt) 0 0}
.mk-story .mk-label{margin-top:40px}
.mk-story__body{margin-top:24px}
.mk-statement{
  font-size:var(--display-md);line-height:var(--display-md-lh);
  font-weight:300;letter-spacing:var(--tr-display);color:var(--text-primary);
}
/* 301:6158 is two paragraphs at the 826px desktop measure; the mobile node
   301:6286 is one wrapped run, so the break is desktop-only. */
.mk-statement br{display:none}
.mk-story__split{margin-top:40px;display:flex;flex-direction:column;gap:32px}
/* QA C-3: display:contents dissolves .mk-story__text, so the split's 32px gap applied to
   P2->P3, which Figma's Tail 301:6290 spaces at 24 (P2 y0 h78 -> P3 y102). */
@media (max-width:767.98px){ .mk-story__p + .mk-story__p{margin-top:-8px} }
.mk-story__text{display:flex;flex-direction:column;gap:32px;order:1}
/* Mobile 301:6287 runs P1 → origin image 301:6289 → P2 → P3, so the text
   wrapper is dissolved and the image ordered between P1 and P2. Scoped below
   768: the tablet band styles .mk-story__text as a flex item, and
   display:contents would leave those rules with no box to apply to. */
@media (max-width:767.98px){
  .mk-story__text{display:contents}
  .mk-story__p1{order:1}
  .mk-story__p{order:3}
}
.mk-story__p1{
  font-size:var(--title-sm);line-height:var(--title-sm-lh);
  font-weight:400;letter-spacing:var(--tr-title);color:var(--text-primary);
}
.mk-story__p{
  font-size:var(--body-md);line-height:var(--body-md-lh);
  font-weight:400;color:var(--text-secondary);
}
/* Origin / Image 301:6289 — hairline edge; rings + grey field baked into the PNG */
.mk-origin-img{
  margin:0;order:2;
  aspect-ratio:353 / 441;overflow:hidden;
  border:var(--mk-hairline) solid var(--border-subtle);
}
.mk-origin-img img{width:122.52%;height:100%;max-width:none;margin-left:-5.51%;object-fit:cover}

@media (min-width:1024px){
  .mk-story{padding:124px 0 0}
  .mk-statement br{display:block}
  .mk-story .mk-label{margin-top:0;grid-column:1;grid-row:1}
  .mk-story__body{margin-top:0;grid-column:2;grid-row:1}
  /* Story 301:6159 at y832 vs statement top y684 (h100) → 48 */
  .mk-story__split{
    margin-top:48px;display:grid;
    grid-template-columns:minmax(0,397fr) minmax(0,397fr);gap:32px;align-items:start;
  }
  .mk-story__text{display:flex;flex-direction:column;gap:24px;order:0}
  .mk-origin-img{order:0;aspect-ratio:397 / 496}
  .mk-origin-img img{width:100%;margin-left:0}
}

/* =========================================================================
   STATS — 301:6260 + 301:6163 / 301:6293
   ========================================================================= */
.mk-stats{background:var(--bg-page-light);padding:64px 0 0}
.mk-stats__row{margin:40px 0 0;display:flex;gap:17px}
.mk-stat{display:flex;flex-direction:column;gap:12px;flex:1 1 0;min-width:0;max-width:168px}
.mk-stat__value{
  font-size:var(--display-sm);line-height:var(--display-sm-lh);
  font-weight:300;letter-spacing:var(--tr-display);color:var(--text-primary);
}
.mk-stat__label{
  margin:0;
  font-size:var(--label-xs);line-height:var(--label-xs-lh);
  font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--text-muted);
}
@media (min-width:1024px){
  /* Stats / Rule y1408 (story ends 1328) → 80 · Stats y1456 → 48 */
  .mk-stats{padding:80px 0 0}
  .mk-stats__row{margin-top:48px;gap:32px;padding-left:25.7194%}   /* 286/1112 */
  .mk-stat{gap:16px;max-width:397px}
}

/* =========================================================================
   FOUNDERS — 301:6170–6183 / 301:6302
   Desktop is deliberately asymmetric: Founder 1 portrait left / quote right
   at x513; Founder 2 reverses it. Mobile stacks portrait above copy.
   ========================================================================= */
.mk-founders{background:var(--bg-page-light);padding:64px 0 0}
.mk-founders__head{margin-top:41px}
.mk-founder{display:flex;flex-direction:column;gap:32px;margin-top:40px}
.mk-founder__portrait{margin:0;aspect-ratio:1 / 1;overflow:hidden;background:#e9dfda}
.mk-founder__portrait img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.78) sepia(.08) hue-rotate(-6deg) contrast(1.03) brightness(1.015);
}
.mk-founder__copy{display:flex;flex-direction:column;gap:24px}
.mk-founder__quote{
  margin:0;
  font-size:var(--display-sm);line-height:var(--display-sm-lh);
  font-weight:300;letter-spacing:var(--tr-display);color:var(--text-primary);
}
.mk-founder__attr{display:flex;flex-direction:column;gap:4px}
.mk-founder__name{
  font-size:var(--body-md);line-height:var(--body-md-lh);
  font-weight:600;color:var(--text-primary);
}
.mk-founder__role{
  font-size:var(--label-sm);line-height:var(--label-sm-lh);
  font-weight:500;letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--text-muted);
}
/* Mobile 301:6314 puts the portrait first for BOTH founders; only the
   desktop composition reverses Founder 2. */
.mk-founder--2 .mk-founder__portrait{order:-1}
.mk-rule--founder{margin-top:40px}

@media (min-width:1024px){
  /* Founders / Divider y1606 (stats end 1526) → 80 */
  .mk-founders{padding:80px 0 0}
  .mk-founders__head{margin-top:64px}          /* label y1670 */
  .mk-founder{
    display:grid;gap:0 32px;align-items:start;
    grid-template-columns:minmax(0,397fr) minmax(0,683fr);  /* 397 + 32 + 683 = 1112 */
  }
  .mk-founder__portrait{width:100%;max-width:397px;height:auto;aspect-ratio:1 / 1}
  .mk-founder__quote{width:100%}

  /* Founder 1 — portrait x84 y1734 (label ends 1686 → 48); quote x513 y1810 */
  .mk-founder--1{margin-top:48px}
  .mk-founder--1 .mk-founder__portrait{grid-column:1}
  .mk-founder--1 .mk-founder__copy{grid-column:2;margin-top:76px}

  /* Founder / Rule y2211 (portrait 1 ends 2131) → 80 */
  .mk-rule--founder{margin-top:80px}

  /* Founder 2 — copy x84 y2347; portrait x799 y2291 (rule 2211 → 80) */
  .mk-founder--2{margin-top:80px;grid-template-columns:minmax(0,683fr) minmax(0,397fr)}
  .mk-founder--2 .mk-founder__copy{grid-column:1;margin-top:56px}
  .mk-founder--2 .mk-founder__portrait{grid-column:2;order:0}
  .mk-founder--2 .mk-founder__copy .mk-founder__attr{margin-top:16px}
}

/* =========================================================================
   PRINCIPLES — 301:6184–6205 / 301:6321
   ========================================================================= */
.mk-principles{background:var(--bg-page-light);padding:64px 0 128px}
.mk-principles .mk-label{margin-top:41px}
.mk-principles__row{margin:40px 0 0;display:flex;flex-direction:column;gap:0}
.mk-principle{display:flex;flex-direction:column;gap:0;padding:0}
.mk-principle + .mk-principle{
  margin-top:24px;padding-top:24px;
  border-top:var(--mk-hairline) solid var(--border-subtle);
}
.mk-principle__index{
  color:var(--mk-accent-light);
  font-size:var(--label-xs);line-height:var(--label-xs-lh);
  font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;
}
.mk-principle__title{
  margin-top:16px;
  font-size:var(--title-sm);line-height:var(--title-sm-lh);
  font-weight:600;letter-spacing:var(--tr-title);color:var(--text-primary);
}
.mk-principle__body{
  margin-top:16px;
  font-size:var(--body-sm);line-height:var(--body-sm-lh);
  font-weight:400;color:var(--text-secondary);
}
@media (min-width:1024px){
  /* Principles / Divider y2768 (portrait 2 ends 2688) → 80 */
  .mk-principles{padding:80px 0 160px}
  .mk-principles .mk-label{margin-top:64px;grid-column:1;grid-row:1}
  .mk-principles__row{
    margin:64px 0 0;grid-column:2;grid-row:1;
    flex-direction:row;gap:32px;
  }
  .mk-principle{flex:1 1 0;min-width:0;width:auto}   /* 3×254 + 2×32 = 826 at 1280 */
  .mk-principle + .mk-principle{margin-top:0;padding-top:0;border-top:0}
  /* Heading 301:6190 is a fixed 86px box so the three bodies align */
  .mk-principle__title{min-height:56px}
}

/* =========================================================================
   CLOSE (dark) + FOOTER — 301:6206 / 301:6346
   ========================================================================= */
.mk-close{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--bg-page-dark);color:var(--text-inverse);
  padding:160px var(--gutter) 64px;
}
/* Close / Seam 301:6349 — white-to-transparent bleed over the fold edge.
   Kept short and capped well under full opacity (see note above the rule)
   so the dark ground starts almost immediately, not ~20% of the fold in. */
.mk-close__seam{
  position:absolute;left:0;right:0;top:0;height:56px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,.5) 0%, rgba(255,255,255,.2) 45%, rgba(255,255,255,0) 100%);
}
/* Close / Glow 301:6347 — 460×300 at (-34,40) */
.mk-close__glow{
  position:absolute;left:var(--glow-x,50%);top:var(--glow-y,50%);
  transform:translate(-50%,-50%);
  width:900px;height:900px;max-width:220%;max-height:220%;
  z-index:-2;border-radius:50%;pointer-events:none;
  /* Product-red glow, off by default -- only appears while hovering (or
     keyboard-focusing into) the whole closing band, per the documented
     interaction/glow-product exception: the device's own therapy light,
     borrowed for this one section. Oversized so it reads as the section
     itself lighting up, not a decorative corner blob. Position tracks the
     pointer (js/home.js sets --glow-x/--glow-y on mousemove) with an eased
     trail rather than snapping, so it reads as a soft light following the
     hand rather than a mechanical cursor effect; falls back to dead-centre
     with no JS / for keyboard focus. */
  background:radial-gradient(closest-side,rgba(226,53,50,.4) 0%,rgba(226,53,50,0) 70%);
  opacity:0;
  transition:opacity .6s ease,left .5s cubic-bezier(.22,.61,.36,1),top .5s cubic-bezier(.22,.61,.36,1);
}
.mk-close:hover .mk-close__glow,
.mk-close:focus-within .mk-close__glow{opacity:1}

/* Glossy sheen along the very bottom edge -- a faint upward lift in the
   dark, as if the surface were catching a low, soft light. Kept far more
   subtle than the product-red glow above; purely a material cue. */
.mk-close::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:240px;
  z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.025) 55%, rgba(255,255,255,.06) 100%);
}
.mk-close__cta{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.mk-close__badge{
  display:inline-flex;align-items:center;
  padding:7px 18px 7px 16px;border-radius:100px;
  background:var(--glass-fill);border:1px solid var(--glass-border);
  color:var(--mk-accent-dark);
  font-size:var(--label-xs);line-height:var(--label-xs-lh);
  font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;
}
.mk-close__headline{
  font-size:var(--display-md);line-height:var(--display-md-lh);
  font-weight:300;letter-spacing:var(--tr-display);color:var(--text-inverse);
}
.mk-close__sub{
  max-width:300px;
  font-size:var(--title-sm);line-height:var(--title-sm-lh);
  font-weight:400;letter-spacing:var(--tr-title);color:var(--mk-dark-secondary);
}
.mk-close__btn{margin-top:16px}
/* Figma has 24 (mobile) / 36 (desktop) between button and spots. .mk-close__cta
   already contributes its gap, so only the remainder is added here. */
.mk-close__spots{margin-top:8px;color:var(--mk-accent-dark)}

/* ---- footer ---- */
.mk-foot{display:flex;flex-direction:column;margin-top:64px}
.mk-foot__divider{border:0;margin:0;height:1px;background:var(--mk-dark-border);width:100%}
.mk-foot__logo{margin-top:32px}
.mk-foot__logo img{width:220px;height:auto}
.mk-foot__links{
  margin-top:32px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;
  font-size:var(--body-sm);line-height:var(--body-sm-lh);font-weight:500;
  color:var(--mk-dark-muted);
}
.mk-foot__links a{white-space:nowrap}
.mk-foot__links a:hover{color:var(--text-inverse)}
.mk-foot__links .is-current{color:var(--text-inverse)}
.mk-foot__tagline{
  margin-top:32px;
  font-size:var(--title-sm);line-height:var(--title-sm-lh);
  font-weight:400;letter-spacing:var(--tr-title);color:var(--mk-dark-secondary);
}
.mk-foot__creds{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
/* Real certification marks, same assets as earlyaccess.html's rail (the
   uniform trust-badge treatment across the whole site) instead of a generic
   tick-in-a-pill. CDSCO and IEC are dark-ink/full-colour logos, so they get
   a small white backing chip to stay legible on this section's dark ground.
   FDA ships its own true white variant (early-access-fda-white.svg) instead
   of the black mark on a chip -- see .mk-cred__logo--fda below. The rail on
   earlyaccess.html is dark too and gets the same white-mark treatment via
   .ea-mark__logo--fda in earlyaccess.css; .cred / .sc-cred are the only
   light-ground marks and use early-access-fda-black.svg with no chip. */
.mk-cred{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.mk-cred__logo{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:32px;height:32px;border-radius:6px;overflow:hidden;
  background:#fff;
}
.mk-cred__logo img{display:block;max-width:100%;max-height:100%;object-fit:contain}
/* FDA on dark ground: the white mark is legible on its own, no chip needed. */
.mk-cred__logo--fda{background:transparent}
.mk-cred__label{
  font-size:var(--label-xs);line-height:var(--label-xs-lh);
  font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--mk-dark-muted);
}
.mk-foot__copyright,.mk-foot__origin{
  margin-top:32px;
  font-size:var(--label-xs);line-height:var(--label-xs-lh);
  font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--mk-dark-muted);
}
.mk-foot__origin{margin-top:8px}

@media (min-width:1024px){
  .mk-close{padding:190px 0 58px}
  /* Close / Glow 301:6208 — 660×360 at x310 (centre 640) y130 */
  .mk-close__glow{width:1200px;height:1200px}
  .mk-close__cta{gap:24px}
  .mk-close__headline{max-width:800px}
  .mk-close__sub{max-width:800px}
  .mk-close__btn{margin-top:12px}
  .mk-close__spots{margin-top:12px}
  /* index.html's close band keeps the original light footer-cta__panel
     (claim + black CTA) instead of the badge/headline/spots pattern above --
     .mk-close drops its side padding at this breakpoint, so the panel needs
     its own width cap + centering, same measure .mk-foot uses below it. */
  .mk-close .footer-cta__panel{
    width:min(var(--wrap),100% - (var(--gutter) * 2));margin-inline:auto;
  }

  /* Footer / Divider y550 (limited spots ends 492) → 58 */
  .mk-foot{
    display:grid;margin-top:58px;
    width:min(var(--wrap),100% - (var(--gutter) * 2));margin-inline:auto;
    grid-template-columns:1fr auto;column-gap:40px;
  }
  .mk-foot__divider{grid-column:1 / -1;grid-row:1}
  .mk-foot__logo{grid-column:1;grid-row:2;margin-top:30px}   /* y580 */
  /* 301:6220 sits at x751 flush to the 1196 gutter — the auto column is sized
     by the wider creds row below, so the links must be pushed to its end. */
  .mk-foot__links{
    grid-column:2;grid-row:2;margin-top:26px;                /* y576 */
    flex-wrap:wrap;gap:12px 30px;justify-content:flex-end;
  }
  /* 301:6226 breaks after "Wearable"; the 1fr column clamps to ~497, so the
     tagline is allowed its full 540 measure rather than being column-bound. */
  /* QA C-1: `width:540px` set the 1fr column's min-content and left the auto column 532px
     where Footer/Credentials 301:6227 needs 589, wrapping the three pills onto two rows.
     max-width lets the creds column win. Figma is tight here (540 + 575 > 1112), so the
     tagline must yield, not the pills. Do not restore a fixed width. */
  .mk-foot__tagline{grid-column:1;grid-row:3;margin-top:34px;max-width:540px}
  .mk-foot__creds{grid-column:2;grid-row:3;margin-top:42px;gap:16px;flex-wrap:wrap;justify-content:flex-end}
  .mk-cred__logo{width:40px;height:40px}
  .mk-foot__copyright{grid-column:1;grid-row:4;margin-top:50px}
  .mk-foot__origin{grid-column:2;grid-row:4;margin-top:50px;justify-self:end}
}

/* =========================================================================
   MAKERS — 768–1023 band
   ========================================================================= */
@media (min-width:768px) and (max-width:1023.98px){
  .mk-hero{padding-top:190px}
  .mk-story__split{flex-direction:row;align-items:flex-start;gap:32px}
  /* Tablet gets a touch more than the 56px base, matching the section's
     slightly larger padding at this breakpoint -- still short, never the
     full-opacity 140-170px block this used to be. */
  .mk-close__seam{height:64px}
  .mk-story__text{flex:1 1 0;min-width:0}
  .mk-origin-img{flex:0 0 44%}
  .mk-principles__row{flex-direction:row;gap:32px}
  .mk-principle{flex:1 1 0;width:auto}
  .mk-principle + .mk-principle{margin-top:0;padding-top:0;border-top:0}
  .mk-founder{flex-direction:row;align-items:flex-start;gap:32px}
  .mk-founder__portrait{flex:0 0 44%}
  .mk-founder__copy{flex:1 1 0;min-width:0}
  .mk-founder--2{flex-direction:row-reverse}
  .mk-stat{width:auto;flex:1 1 0}
  .mk-close__sub{max-width:520px}
}

/* =========================================================================
   =========================================================================
   SCIENCE PAGE — "How light reaches the pain"
   Figma section 301:6456 · desktop 474:4728 (1280×5038) · mobile 485:5423 (393×7885)
   Appended to home.css by contract (no new stylesheet). All values verbatim.
   Shared with Home/Makers: tokens, @font-face, .wrap, .btn-primary,
   .limited-spots, .live-dot/.i-arrow/.i-close, ?static=1 freeze, css/menu.css.
   =========================================================================
   ========================================================================= */

/* ---- page-scoped tokens (modes resolved at the owning node) ------------ */
.page-science{
  --sc-accent-light:#BC2E16;    /* text/accent · light sections (474:4746)   */
  --sc-accent-dark:#FFBCAD;     /* text/accent · dark hero     (474:4728)    */
  --sc-accent-base:#E8543D;     /* accent/base · light mode — evidence rules */
  --sc-red-700:#b80000;         /* red/700  — stage 05 tile border           */
  --sc-red-22:#e9000038;        /* alpha/red-22 — stage 05 tile fill         */
  --sc-crimson:#bc1c21;         /* crimson/500 — "CRAMPS" label              */
  --sc-neutral-100:#f2f2f2;     /* neutral/100 — tile ground                 */
  --sc-tile-border:#0b0b0b38;   /* rgba(11,11,11,.22) — problem tile border  */
  --sc-dark-secondary:#bababa;  /* text/secondary on the dark hero           */
  --sc-dark-muted:#a3a3a3;      /* text/muted on the dark hero               */

  /* type — MOBILE mode (485:5423) */
  --sc-display-md:32px;   --sc-display-md-lh:38px;
  --sc-hero-lead:20px;    --sc-hero-lead-lh:28px;

  background:#ffffff;           /* bg/page · light mode */
  color:var(--text-primary);
}
@media (min-width:1024px){
  .page-science{
    /* type — DESKTOP mode (474:4728) */
    --sc-display-md:44px;  --sc-display-md-lh:50px;
    --sc-hero-lead:26px;   --sc-hero-lead-lh:32px;
  }
}

/* ---- shared atoms ------------------------------------------------------ */
.page-science .sc-eyebrow{
  color:var(--sc-accent-light);
  font-size:var(--label-xs);line-height:var(--label-xs-lh);
  font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;
}
.page-science .sc-lead{
  margin-top:28px;
  font-size:var(--title-sm);line-height:var(--title-sm-lh);
  font-weight:400;letter-spacing:var(--tr-title);color:var(--text-primary);
}
.page-science .sc-rule{height:1px;background:var(--border-subtle)}
/* 474:4934 — label grey, dot accent/base rose (currentColor would grey the dot too) */
.limited-spots--muted{color:var(--text-muted)}
.limited-spots--muted .live-dot{color:var(--sc-accent-base,var(--accent-base))}

/* credential pill — 474:4915 / 474:4949. Tick is inline SVG (asset MISSING). */
/* Real certification marks -- same uniform trust-badge treatment as the
   dark footers (.mk-cred), not a generic tick-in-a-pill. Already on a light
   ground here, so the marks need no backing chip. */
.page-science .sc-creds{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.page-science .sc-cred{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.page-science .sc-cred__logo{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:32px;height:32px;overflow:hidden;
}
.page-science .sc-cred__logo img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.page-science .sc-cred__label{
  font-size:var(--label-xs);line-height:var(--label-xs-lh);
  font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--text-muted);
}

@media (min-width:1024px){
  .page-science .sc-lead{margin-top:30px;max-width:940px}
}

/* =========================================================================
   HERO — 474:4729 / 496:2080
   ========================================================================= */
.sc-hero{
  position:relative;isolation:isolate;overflow:hidden;
  --sc-hero-x:0px;--sc-hero-y:0px;
  min-height:620px;
  background:var(--bg-page-dark);color:var(--text-inverse);
  display:flex;flex-direction:column;
  padding:144px var(--gutter) 48px;
}
/* image 309 — mobile 880×495 at x −244 (bleeds both edges); desktop 1605×903 at x −139 */
.sc-hero__media{
  position:absolute;left:-244px;top:0;width:880px;height:495px;z-index:-3;
  pointer-events:none;
  transform:translate3d(var(--sc-hero-x),var(--sc-hero-y),0) scale(1.03);
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.sc-hero__img{
  display:block;width:100%;height:100%;object-fit:cover;
  transform-origin:50% 45%;will-change:transform;
  animation:scHeroAmbient 12s ease-in-out infinite;
}
@keyframes scHeroAmbient{
  0%,100%{transform:scale(1.035) translate3d(-.6%,0,0)}
  50%{transform:scale(1.07) translate3d(.6%,-.5%,0)}
}
.page-science .nav:not(.nav--onlight){z-index:160}
.page-science .nav:not(.nav--onlight) .nav__pill{
  background:rgba(11,11,11,.84);border-color:rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 10px 30px rgba(0,0,0,.24);
}
.sc-hero__scrim{position:absolute;left:0;right:0;z-index:-2;pointer-events:none}
.sc-hero__scrim--top{
  top:0;height:380px;
  background:linear-gradient(180deg,rgba(11,11,11,.92) 0%,rgba(11,11,11,.62) 55%,rgba(11,11,11,.1) 100%);
}
.sc-hero__scrim--bottom{
  top:360px;height:260px;
  background:linear-gradient(180deg,rgba(11,11,11,0) 0%,#0b0b0b 100%);
}
.sc-hero__inner{position:relative;display:flex;flex-direction:column;flex:1 1 auto}
.sc-hero__message{display:flex;flex-direction:column;align-items:center;gap:20px}

/* Eyebrow Badge — mobile 496:2105 is the LIGHT pill (verified on the node
   render); desktop 474:4735 is the glass pill on the dark ground. */
.page-science .sc-badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 16px;border-radius:100px;
  background:rgba(255,255,255,.65);border:1px solid rgba(11,11,11,.08);
  color:var(--sc-accent-light);
  font-size:var(--label-xs);line-height:var(--label-xs-lh);
  font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;
  white-space:nowrap;
}
/* Desktop 474:4735 is the GLASS pill on the dark hero (mobile 496:2105 stays light). */
@media (min-width:1024px){
  .page-science .sc-badge{
    background:var(--glass-fill);
    border-color:var(--glass-border);
    color:var(--text-accent-dark);
  }
  .page-science .sc-badge .live-dot{color:var(--accent-base-m)}
}

@media (prefers-reduced-motion:reduce){
  .sc-hero__media{transform:none;transition:none}
  .sc-hero__img{animation:none;transform:none}
}
.sc-hero__headline{
  font-size:36px;line-height:42px;font-weight:300;letter-spacing:var(--tr-display);
  text-align:center;color:#ffffff;
}
.sc-hero__lead{
  font-size:var(--sc-hero-lead);line-height:var(--sc-hero-lead-lh);
  font-weight:300;letter-spacing:var(--tr-title);
  text-align:center;color:var(--sc-dark-secondary);
}
/* Hero / Feature Row — mobile stacked (496:2110), desktop inline (474:4740) */
.sc-hero__features{
  margin-top:auto;padding-top:48px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.sc-hero__features li{
  color:var(--sc-dark-muted);
  font-size:var(--label-xs);line-height:var(--label-xs-lh);
  font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;
  text-align:center;
}

@media (min-width:1024px){
  .sc-hero{min-height:910px;padding:231px var(--gutter) 0}
  .sc-hero__media{left:-139px;width:1605px;height:903px}
  .sc-hero__scrim--top{height:520px}
  .sc-hero__scrim--bottom{top:610px;height:300px}
  .sc-hero__inner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%}
  .sc-hero__message{gap:28px;max-width:900px;margin-inline:auto;width:100%}
  .sc-hero__headline{font-size:var(--display-lg);line-height:var(--display-lg-lh)}
  .sc-hero__features{
    flex-direction:row;justify-content:center;gap:15px;
    margin-top:0;padding-top:56px;
  }
  .sc-hero__features li{display:flex;align-items:center;gap:15px}
  .sc-hero__features li:not(:last-child)::after{
    content:"";width:4px;height:4px;border-radius:50%;
    background:var(--sc-dark-muted);flex:0 0 auto;
  }
}

/* hero placeholder box (asset MISSING — 474:4730) */
/* Hero placeholder (asset MISSING — 474:4730). It lives in the image layer,
   under both scrims, so its label is given its own opaque chip and pinned to
   the top-left of the image box — clear of the centred hero copy. */
.placeholder--sc-hero{
  width:100%;height:100%;border-radius:0;
  align-items:flex-start;justify-content:flex-start;
  padding:112px 0 0 260px;  /* clears the fixed nav pill (32 + 64) */
}
.placeholder--sc-hero > span{
  background:#0b0b0b;padding:3px 8px;border-radius:4px;
  color:var(--accent-base);
}

/* =========================================================================
   PROBLEM — 474:4746 / 497:2099   ·   MECHANISM — 474:4784 / 498:2099
   ========================================================================= */
.sc-mechanism{padding:72px 0}
.sc-problem{padding:var(--fold-pt) 0 72px}
.sc-chain{
  margin-top:28px;
  display:flex;flex-direction:column;gap:24px;   /* 264 pitch = 240 stage + 24 */
  padding:20px;border-radius:24px;background:#ffffff;
}
.sc-stage{display:flex;flex-direction:column;gap:12px}
.sc-stage__index{
  color:var(--text-secondary);
  font-size:var(--label-xs);line-height:var(--label-xs-lh);
  font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;text-align:center;
}
.sc-stage__tile{
  display:flex;align-items:center;justify-content:center;
  height:176px;border-radius:16px;overflow:hidden;
  background:var(--sc-neutral-100);border:1px solid var(--sc-tile-border);
}
.sc-stage__tile img{width:170px;height:135px;object-fit:cover}
.sc-stage__label{
  font-size:var(--body-md);line-height:var(--body-md-lh);
  font-weight:600;color:var(--text-primary);text-align:center;
}
/* Stage 05 of the Problem chain alone carries the red tile + crimson label */
.sc-stage--alert .sc-stage__tile{background:var(--sc-red-22);border:2px solid var(--sc-red-700)}
.sc-stage--alert .sc-stage__label{color:var(--sc-crimson)}
/* connectors exist on the Problem chain only (474:4756…) — none on Mechanism */
.sc-connector{display:none}

@media (min-width:1024px){
  .sc-problem{padding:124px 0 80px}
  .sc-mechanism{padding:100px 0 80px}
  .sc-chain{
    margin-top:52px;
    flex-direction:row;align-items:flex-start;justify-content:space-between;
    gap:0;padding:40px 0;
    /* At 1280 the five 184px stages + four 28px connectors are exactly 1112 —
       the wrap width — so nothing scrolls. Between 1024 and 1279 the wrap is
       narrower than the chain, so it scrolls in place instead of pushing the
       page sideways. */
    overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .sc-chain::-webkit-scrollbar{display:none}
  .sc-chain--connected{align-items:center}
  .sc-stage{width:184px;flex:0 0 184px;gap:16px}
  .sc-stage__tile{height:160px}
  .sc-stage__tile img{width:135px;height:107px}
  .sc-stage__label{min-height:52px}
  .sc-connector{
    display:flex;align-items:center;justify-content:center;
    width:28px;height:160px;flex:0 0 28px;color:var(--text-secondary);
  }
  /* 474:4757 — the glyph must fill the full 16px. The shared arrow path spans
     x4→x20 of a 24 viewBox (67%), so a 24px box renders it at exactly 16px. */
  .sc-connector .i-arrow{width:24px;height:24px}
}

/* =========================================================================
   BIOLOGY × TECH — 474:4813 / 499:2099
   ========================================================================= */
.sc-biotech{padding:72px 0}
.sc-biotech__header{margin-top:49px;display:flex;flex-direction:column;gap:24px}
.sc-biotech__headline{
  font-size:var(--sc-display-md);line-height:var(--sc-display-md-lh);
  font-weight:300;letter-spacing:var(--tr-display);color:var(--text-primary);
}
@media (min-width:1024px){
  .sc-biotech{padding:100px 0 38px}
  .sc-biotech__header{margin-top:73px;gap:32px}
  .sc-biotech__headline{max-width:900px}
}

/* =========================================================================
   EVIDENCE — 474:4886 / 501:2099
   ========================================================================= */
.sc-evidence{padding:72px 0}
.sc-evidence__header{margin-top:33px;display:flex;flex-direction:column;gap:24px}
.sc-evidence__headline{
  font-size:var(--sc-display-md);line-height:var(--sc-display-md-lh);
  font-weight:300;letter-spacing:var(--tr-display);color:var(--text-primary);
}
.sc-facts{margin-top:32px;display:flex;flex-direction:column;gap:24px}
.sc-fact{display:flex;flex-direction:column;gap:18px}
.sc-fact__rule{width:40px;height:2px;background:var(--sc-accent-base)}
.sc-fact__heading{display:flex;align-items:center;gap:12px;margin-bottom:-6px}
.sc-fact__index{
  color:var(--sc-accent-light);
  font-size:var(--label-xs);line-height:var(--label-xs-lh);
  font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;
}
.sc-fact__title{
  font-size:var(--title-sm);line-height:var(--title-sm-lh);
  font-weight:600;letter-spacing:var(--tr-title);color:var(--text-primary);
}
.sc-fact__body{
  font-size:var(--body-sm);line-height:var(--body-sm-lh);
  font-weight:400;color:var(--text-secondary);
}
.sc-evidence .sc-creds{margin-top:32px}

@media (min-width:1024px){
  .sc-evidence{padding:11px 0 0}
  .sc-evidence__header{margin-top:48px;gap:28px}
  .sc-evidence__headline{max-width:900px}
  .sc-facts{margin-top:48px;flex-direction:row;align-items:flex-start;gap:40px}
  .sc-fact{flex:1 1 0;min-width:0;gap:18px}
  .sc-evidence .sc-creds{margin-top:48px;flex-wrap:nowrap}
  .page-science .sc-cred__logo{width:40px;height:40px}
}

/* =========================================================================
   CLOSE / CTA — 474:4927 / 501:2139
   ========================================================================= */
.sc-close{padding:72px 0}
.sc-close .wrap{display:flex;flex-direction:column;align-items:center}
.sc-close__copy{display:flex;flex-direction:column;gap:20px;text-align:center}
.sc-close__headline{
  font-size:var(--sc-display-md);line-height:var(--sc-display-md-lh);
  font-weight:300;letter-spacing:var(--tr-display);color:var(--text-primary);
}
.sc-close__sub{
  font-size:var(--title-sm);line-height:var(--title-sm-lh);
  font-weight:400;letter-spacing:var(--tr-title);color:var(--text-secondary);
}
.sc-close__action{margin-top:32px;display:flex;flex-direction:column;align-items:center;gap:22px}
.page-science .sc-close__action .btn-primary{padding:14px 26px}

@media (min-width:1024px){
  .sc-close{padding:113px 0 0}
  .sc-close__copy{max-width:800px}
  .sc-close__action{margin-top:44px}
}

/* =========================================================================
   FOOTER — 474:4936 / 502:2100.  Science's footer sits on WHITE, so it uses
   the dark wordmark.svg — Makers' dark-ground footer uses wordmark-white.svg.
   ========================================================================= */
.sc-footer{padding:56px 0 64px;background:#ffffff}
/* 502:2103 logo is h14.33 and 502:2116 sits at y34.33 — the gap is 20, not 34. */
.sc-footer__row1{margin-top:25px;display:flex;flex-direction:column;gap:20px}
.sc-footer__brand img{width:220px;height:auto}
.sc-footer__links{
  display:flex;flex-direction:column;gap:18px;
  font-size:var(--body-sm);line-height:var(--body-sm-lh);
  font-weight:500;color:var(--text-secondary);
}
.sc-footer__links a:hover{color:var(--text-primary)}
.sc-footer__row2{margin-top:24px;display:flex;flex-direction:column;gap:20px}
.sc-footer__tagline{
  font-size:var(--body-sm);line-height:var(--body-sm-lh);
  font-weight:400;color:var(--text-muted);
}
.sc-footer__row3{
  margin-top:24px;display:flex;flex-direction:column;gap:8px;
  color:var(--text-muted);
  font-size:var(--label-xs);line-height:var(--label-xs-lh);
  font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;
}

@media (min-width:1024px){
  .sc-footer{padding:128px 0 64px}
  .sc-footer__row1{
    margin-top:28px;flex-direction:row;align-items:center;justify-content:space-between;gap:40px;
  }
  .sc-footer__links{flex-direction:row;align-items:center;gap:30px;white-space:nowrap}
  /* 474:4948 — one 565px row flush right, IEC ending at x1112. Figma gap is 27. */
  .sc-footer__row2{
    margin-top:28px;flex-direction:row;align-items:center;justify-content:space-between;gap:27px;
  }
  .sc-footer__row2 .sc-creds{gap:27px;justify-content:flex-end}
  .sc-footer__tagline{width:520px;flex:0 0 520px}
  .sc-footer__row3{margin-top:28px;flex-direction:row;justify-content:space-between;gap:24px}
}

/* =========================================================================
   768–1023 — tablet band for Science
   ========================================================================= */
@media (min-width:768px) and (max-width:1023.98px){
  .sc-hero{min-height:700px}
  .sc-hero__media{left:-244px;width:880px;height:495px}
  .sc-facts{flex-direction:row;flex-wrap:wrap;gap:32px}
  .sc-fact{flex:1 1 280px}
  .sc-footer__links{flex-direction:row;flex-wrap:wrap;gap:24px}
  .sc-footer__row1,.sc-footer__row2{flex-direction:row;align-items:center;justify-content:space-between}
}

@media (min-width:1280px){
  /* 474:4948 — the 565px credential row only fits flush-right in the 1112 wrap */
  .page-science .sc-footer__row2 .sc-creds{flex-wrap:nowrap}
}

/* =========================================================================
   PRIVACY POLICY
   ========================================================================= */
.page-privacy{background:#fff;color:var(--text-primary)}
.privacy-page{padding-top:56px;background:#fff}
.privacy-hero{
  position:relative;overflow:hidden;padding:96px 0 64px;
  background:linear-gradient(145deg,#fff 0%,#fbf6f4 62%,#f7e8e4 100%);
  border-bottom:1px solid var(--border-subtle);
}
.privacy-hero::after{
  content:"";position:absolute;width:420px;height:420px;right:-180px;top:-210px;
  border-radius:50%;background:radial-gradient(circle,rgba(226,53,50,.16),rgba(226,53,50,0) 70%);
  pointer-events:none;
}
.privacy-hero__inner{position:relative;z-index:1}
.privacy-eyebrow{
  margin-bottom:18px;color:var(--text-accent-light);font-size:var(--label-xs);
  line-height:var(--label-xs-lh);font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;
}
.privacy-hero h1{
  max-width:820px;font-size:clamp(42px,7vw,88px);line-height:.98;
  font-weight:300;letter-spacing:var(--tr-display);
}
.privacy-hero p:last-child{
  max-width:720px;margin-top:24px;color:var(--text-secondary);
  font-size:var(--title-sm);line-height:var(--title-sm-lh);
}
.privacy-content{padding:56px 0 96px}
.privacy-content__inner{max-width:920px}
.privacy-list{counter-reset:privacy-item;display:grid;gap:16px;list-style:none}
.privacy-list li{
  counter-increment:privacy-item;position:relative;padding:24px 24px 24px 72px;
  border:1px solid var(--border-default);border-radius:20px;background:#fff;
  color:var(--text-secondary);font-size:var(--body-md);line-height:1.7;
}
.privacy-list li::before{
  content:counter(privacy-item,decimal-leading-zero);position:absolute;left:22px;top:24px;
  width:32px;color:var(--text-accent-light);font-size:var(--label-xs);
  line-height:var(--label-xs-lh);font-weight:600;letter-spacing:var(--tr-label);
}
.privacy-footer{padding:1px 0 40px;background:#0b0b0b}
.privacy-footer .mk-foot{margin-top:40px}

@media (min-width:768px){
  .privacy-hero{padding:128px 0 88px}
  .privacy-content{padding:80px 0 128px}
  .privacy-list{gap:20px}
  .privacy-list li{padding:28px 32px 28px 88px;border-radius:24px}
  .privacy-list li::before{left:30px;top:30px}
  .privacy-footer{padding-bottom:58px}
}

/* =========================================================================
   SHARED LEGAL + CONTACT PAGES
   ========================================================================= */
.legal-content{padding:56px 0 96px;background:#fff}
.legal-content__inner{max-width:960px}
.legal-lead{
  margin-bottom:48px;padding:24px;border-left:3px solid var(--text-accent-light);
  border-radius:0 20px 20px 0;background:var(--accent-soft);
  color:var(--text-secondary);font-size:var(--title-sm);line-height:1.65;
}
.legal-sections{display:grid;gap:16px}
.legal-section{
  position:relative;padding:28px 24px;border:1px solid var(--border-default);
  border-radius:24px;background:#fff;
}
.legal-section__index{
  margin-bottom:12px;color:var(--text-accent-light);font-size:var(--label-xs);
  line-height:var(--label-xs-lh);font-weight:600;letter-spacing:var(--tr-label);
}
.legal-section h2{
  margin-bottom:18px;font-size:clamp(24px,4vw,36px);line-height:1.15;
  font-weight:400;letter-spacing:var(--tr-title);
}
.legal-section p,.legal-section li{
  color:var(--text-secondary);font-size:var(--body-md);line-height:1.75;
}
.legal-section p + p,.legal-section p + ul,.legal-section p + ol,
.legal-section ol + p,.legal-section ul + p{margin-top:16px}
.legal-section ol,.legal-section ul{display:grid;gap:10px;padding-left:22px}
.legal-section ol{list-style:decimal}
.legal-section ul{list-style:disc}
.legal-section li::marker{color:var(--text-accent-light);font-weight:600}
.legal-section li > ul{margin-top:10px}
.legal-section a{color:var(--text-primary);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.legal-section--help{background:linear-gradient(145deg,#fff 0%,#fbf2ef 100%)}
.legal-contact-links{display:grid;gap:10px;margin-top:24px}
.legal-contact-links > a,.legal-contact-links > span{
  display:flex;flex-direction:column;gap:4px;padding:16px 18px;
  border:1px solid var(--border-default);border-radius:14px;background:#fff;text-decoration:none;
}
.legal-contact-links span span,.legal-contact-links a span{
  color:var(--text-muted);font-size:var(--label-xs);line-height:var(--label-xs-lh);
  font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;
}
.legal-contact-links strong{color:var(--text-primary);font-size:var(--body-md);line-height:var(--body-md-lh);overflow-wrap:anywhere}

.contact-content{padding:56px 0 96px;background:#fff}
.contact-content__inner{max-width:1040px}
.contact-intro{max-width:760px;margin-bottom:48px}
.contact-intro p{color:var(--text-secondary);font-size:var(--title-sm);line-height:1.65}
.contact-intro p + p{margin-top:16px}
.legal-text-link{
  display:inline-flex;align-items:center;gap:10px;margin-top:24px;color:var(--text-primary);
  font-size:var(--body-md);line-height:var(--body-md-lh);font-weight:600;
}
.contact-grid{display:grid;gap:16px}
.contact-card{
  position:relative;display:flex;min-height:250px;flex-direction:column;padding:24px;
  border:1px solid var(--border-default);border-radius:24px;background:#fff;
}
.contact-card--accent{background:linear-gradient(145deg,#fff 0%,#fbf1ed 100%)}
.contact-card__index{align-self:flex-end;color:var(--text-accent-light);font-size:var(--label-xs);font-weight:600;letter-spacing:var(--tr-label)}
.contact-card__label{
  margin-top:auto;color:var(--text-muted);font-size:var(--label-xs);line-height:var(--label-xs-lh);
  font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;
}
.contact-card h2{margin-top:10px;font-size:var(--title-sm);line-height:var(--title-sm-lh);font-weight:400}
.contact-card a{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:24px;color:var(--text-primary);font-size:var(--body-md);font-weight:600;overflow-wrap:anywhere}
.contact-card a span{color:var(--text-accent-light);font-size:22px}

@media (min-width:768px){
  .legal-content,.contact-content{padding:80px 0 128px}
  .legal-lead{padding:30px 34px;margin-bottom:64px}
  .legal-sections{gap:20px}
  .legal-section{padding:36px 40px}
  .legal-contact-links{grid-template-columns:repeat(3,minmax(0,1fr))}
  .contact-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .contact-card{padding:28px;min-height:300px}
}

@media (min-width:1024px){
  .mk-foot__links{max-width:720px}
  .legal-sections--terms .legal-section{padding:42px 48px}
}
/* Pinastro reference fidelity: exact supplied Science problem/mechanism and carousel components. */
/* =========================================================================
   PROBLEM — 474:4746 / 497:2099   ·   MECHANISM — 474:4784 / 498:2099
   ========================================================================= */
.sc-mechanism{padding:72px 0}
.sc-problem{padding:var(--fold-pt) 0 72px}
.sc-chain{
  margin-top:36px;
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:32px 24px;
  border-radius:24px;
  background:radial-gradient(ellipse at center, #25262c 0%, #121317 65%, #08080a 100%);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 16px 40px -10px rgba(0,0,0,0.35), 0 0 30px -4px rgba(232,84,61,0.22);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.sc-chain::-webkit-scrollbar{display:none}
.sc-stage{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:16px;
  flex:1 1 0;
  min-width:140px;
}
.sc-stage__index{display:none}
.sc-stage__tile{
  display:flex;
  align-items:center;
  justify-content:center;
  height:130px;
  width:100%;
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
}
.sc-stage__tile img{
  max-width:100%;
  max-height:120px;
  width:auto;
  height:auto;
  object-fit:contain;
}
.sc-stage__label{
  font-size:var(--body-md);
  line-height:1.35;
  font-weight:600;
  color:#f4f4f6;
  text-align:center;
  max-width:180px;
  margin:0 auto;
}
/* Stage 05 Alert label stays bright crimson on the dark background */
.sc-stage--alert .sc-stage__tile{background:transparent;border:none}
.sc-stage--alert .sc-stage__label{color:#ff5c5c;font-weight:700}

/* Connectors — vertically centered with icon height (130px) */
.sc-connector{
  display:flex;
  align-items:center;
  justify-content:center;
  height:130px;
  flex:0 0 28px;
  color:rgba(255,255,255,0.75);
}
.sc-connector .i-arrow{
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sc-connector .i-arrow svg{
  width:100%;
  height:100%;
}

/* Mobile — stack the chain vertically (one stage per row) instead of the
   horizontal scroll strip; desktop (>=1024px) keeps the row layout below. */
@media (max-width:1023px){
  .sc-chain{
    flex-direction:column;
    align-items:stretch;
    overflow-x:visible;
  }
  .sc-stage{
    min-width:0;
    width:100%;
  }
  .sc-stage__label{
    max-width:none;
  }
  .sc-connector{
    height:auto;
    flex:0 0 auto;
    padding:4px 0;
  }
  .sc-connector .i-arrow{
    transform:rotate(90deg);
  }
}

@media (min-width:1024px){
  .sc-problem{padding:124px 0 80px}
  .sc-mechanism{padding:100px 0 80px}
  .sc-chain{
    margin-top:52px;
    padding:44px 36px;
    gap:16px;
  }
  .sc-stage{
    min-width:160px;
    max-width:200px;
  }
}

/* =========================================================================
   BIOLOGY × TECH — Showcase Carousel (ss2 Design Refined)
   ========================================================================= */
.sc-biotech{padding:72px 0 80px}
.sc-biotech__header{
  margin-top:49px;
  margin-bottom:36px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  gap:16px;
}
.sc-biotech__headline{
  font-size:var(--sc-display-md);
  line-height:var(--sc-display-md-lh);
  font-weight:300;
  letter-spacing:var(--tr-display);
  color:var(--text-primary);
  text-align:left;
}

.sc-showcase{
  position:relative;
  width:100%;
  margin-top:20px;
}
.sc-showcase__viewport{
  position:relative;
  width:100%;
  border-radius:24px;
  overflow:hidden;
  background:#000000;
  box-shadow:0 12px 40px -12px rgba(0,0,0,0.12);
}
.sc-showcase__track{
  position:relative;
  width:100%;
  min-height:500px;
}
.sc-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1);
  transform:scale(1.015);
  display:flex;
  flex-direction:column;
}
.sc-slide.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:scale(1);
  position:relative;
}

/* Slide Media — Full-bleed 16:9 coverage */
.sc-slide__media{
  position:relative;
  width:100%;
  height:360px;
  overflow:hidden;
}
.sc-slide__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:left center;
  display:block;
}

/* Floating Card with Refined Offset Shadow Layer */
.sc-slide__card-wrapper{
  position:relative;
  margin:-44px 16px 24px;
  z-index:3;
}
.sc-slide__card-shadow{
  position:absolute;
  inset:0;
  transform:translate(8px, 8px);
  background:rgba(20,20,20,0.35);
  border-radius:22px;
  z-index:1;
}
.sc-slide__card{
  position:relative;
  z-index:2;
  background:rgba(255,255,255,0.96);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:22px;
  padding:28px 24px;
  border:1px solid rgba(255,255,255,0.8);
  box-shadow:0 20px 48px -12px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
}
.sc-slide__tag{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(232,84,61,0.08);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-accent-light, #BC2E16);
  margin-bottom:14px;
}
.sc-slide__title{
  font-size:22px;
  line-height:1.3;
  font-weight:600;
  letter-spacing:-0.015em;
  color:var(--text-primary);
  margin:0 0 12px;
  text-align:left;
}
.sc-slide__body{
  font-size:14.5px;
  line-height:1.65;
  color:#444444;
  font-weight:400;
  margin:0;
  text-align:left;
}

/* Controls — Left aligned */
.sc-showcase__nav{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:16px;
  margin-top:24px;
}
.sc-showcase__arrow{
  width:42px;
  height:42px;
  border-radius:50%;
  background:#ffffff;
  border:1px solid var(--border-default);
  color:var(--text-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.sc-showcase__arrow:hover{
  background:var(--accent-base);
  color:#ffffff;
  border-color:var(--accent-base);
  transform:scale(1.05);
  box-shadow:0 6px 16px rgba(232,84,61,0.25);
}
.sc-showcase__arrow svg{
  width:18px;
  height:18px;
}
.sc-showcase__dots{
  display:flex;
  align-items:center;
  gap:8px;
}
.sc-showcase__dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--border-default);
  padding:0;
  cursor:pointer;
  transition:background-color .25s ease, width .25s ease;
}
.sc-showcase__dot.is-active{
  background:var(--accent-base);
  width:26px;
}

/* Desktop Layout */
@media (min-width:1024px){
  .sc-biotech{padding:100px 0 100px}
  .sc-biotech__header{margin-top:73px;margin-bottom:40px;gap:20px}
  .sc-biotech__headline{max-width:900px}

  .sc-showcase{
    max-width:100%;
    margin-inline:0 auto;
  }
  .sc-showcase__viewport{
    border-radius:32px;
    height:620px;
    overflow:hidden;
  }
  .sc-showcase__track{
    height:100%;
    min-height:620px;
  }
  .sc-slide{
    position:absolute;
    inset:0;
    height:100%;
    flex-direction:row;
  }
  .sc-slide__media{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }
  .sc-slide__media img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:left center;
  }
  .sc-slide__card-wrapper{
    position:absolute;
    right:44px;
    top:50%;
    transform:translateY(-50%);
    width:420px;
    max-width:40vw;
    margin:0;
  }
  .sc-slide__card-shadow{
    transform:translate(12px, 12px);
    border-radius:24px;
  }
  .sc-slide__card{
    border-radius:24px;
    padding:40px 34px;
  }
  .sc-slide__title{
    font-size:25px;
    line-height:1.28;
    margin-bottom:14px;
  }
  .sc-slide__body{
    font-size:15px;
    line-height:1.68;
  }
}

/* Approved master sequence: title -> device -> exploded view -> features. */
.master-seq{position:relative;height:260vh;height:260svh;background:#fff;color:var(--text-primary);overflow:visible}
.master-seq__stage{position:sticky;top:0;width:100%;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#fff}
.master-seq__bg{position:absolute;inset:0;background:#fff;z-index:0}
.master-seq__canvas,.master-seq__fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1;display:block}
.master-seq__canvas{opacity:0;border:0;outline:0;will-change:opacity}
.master-seq.is-ready .master-seq__fallback{visibility:hidden}
.master-seq__title-wrapper{position:absolute;top:clamp(212px,25vh,228px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;text-align:center;z-index:10;pointer-events:none;width:min(330px,70vw);max-width:90vw;will-change:transform,opacity;opacity:0}
.master-seq__title-wrapper.is-left{align-items:flex-start;text-align:left}
.master-seq__title-wrapper.is-right{align-items:center;text-align:center}
.master-seq__eyebrow{display:none}
.master-seq__wordmark{display:block;width:100%;height:auto;margin-bottom:8px;will-change:opacity,transform}
.master-seq__content{position:absolute;left:max(20px,5vw);top:clamp(220px,28vh,260px);z-index:5;width:min(450px,34vw);opacity:0;pointer-events:none;will-change:opacity}
.master-seq__content.is-active{pointer-events:auto}
.master-seq .creds{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px 16px;margin:0 0 36px;align-items:center;opacity:0}
.master-seq .cred{display:inline-flex;align-items:center;gap:10px}
.master-seq .cred__logo{flex:0 0 32px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.master-seq .cred__logo img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.master-seq .cred__label{font-size:var(--label-xs);line-height:var(--label-xs-lh);font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-secondary)}
.master-seq .features{display:flex;flex-direction:column;gap:20px;margin:0;padding:0;list-style:none}
.master-seq .feature--master{display:grid;grid-template-columns:max-content 1fr;column-gap:12px;row-gap:8px;align-items:baseline;opacity:0;transform:translateY(20px);will-change:opacity,transform}
.master-seq .feature__index,.feature--mobile .feature__index{grid-column:1;grid-row:1;color:var(--accent-base);font-size:var(--label-xs);line-height:var(--label-xs-lh);font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase}
.master-seq .feature__title{grid-column:2;grid-row:1;font-size:var(--title-md);line-height:var(--title-md-lh);font-weight:600;letter-spacing:var(--tr-title);color:var(--text-primary)}
.master-seq .feature__body,.feature--mobile .feature__body{grid-column:1 / -1;grid-row:2;font-size:var(--body-md);line-height:var(--body-md-lh);font-weight:400;color:var(--text-secondary)}
.master-seq__mobile-features{display:none}
.sequence-proof{display:none}
@media (min-width:1024px){
  /* The closing signature hands its lane to proof instead of leaving two
     competing CURAPOD/product labels on screen. The row is a direct child of
     the sticky stage, so the short-desktop copy scale cannot pull it off-axis. */
  .master-seq .creds{
    position:absolute;top:clamp(212px,25vh,228px);left:71%;z-index:11;
    width:min(620px,56vw);max-width:none;margin:0;
    flex-wrap:nowrap;justify-content:center;gap:12px clamp(10px,1.15vw,20px);
    opacity:0;transform:translate3d(-50%,14px,0);
    pointer-events:none;will-change:opacity,transform;
  }
  .master-seq .cred__label{font-size:clamp(9px,.7vw,var(--label-xs));letter-spacing:clamp(.09em,.12vw,var(--tr-label))}
}
@media (max-height:750px) and (min-width:1024px){
  .master-seq__content{transform-origin:left top;transform:scale(.85)}
}
@media (max-width:1023px){
  .master-seq{height:250vh;height:250svh}
  .master-seq__stage{height:100vh;height:100svh}
  .master-seq__title-wrapper{display:none}
  .master-seq__wordmark{max-width:240px}
  .master-seq__content{
    display:block;left:50%;right:auto;top:104px;bottom:auto;
    width:min(560px,calc(100% - 48px));transform:translateX(-50%);
  }
  .master-seq .creds{display:none}
  .sequence-proof{display:block;background:#fff;padding:30px max(20px,5vw) 56px;border-top:1px solid var(--border-subtle)}
  .sequence-proof__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center;align-items:center;gap:18px 16px;width:min(680px,100%);margin-inline:auto}
  .sequence-proof__item{display:flex;justify-content:center;align-items:center;gap:9px;min-width:0;text-align:center;color:var(--text-secondary);font-size:10px;line-height:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
  .sequence-proof__item:last-child{grid-column:1 / -1}
  .sequence-proof__logo{display:flex;flex:0 0 28px;width:28px;height:28px;align-items:center;justify-content:center}
  .sequence-proof__logo img{display:block;max-width:100%;max-height:100%;object-fit:contain}
  .master-seq .features{position:relative;display:flex;flex-direction:column;gap:14px;min-height:0}
  .master-seq .feature--master{
    position:relative;inset:auto;display:grid;
    grid-template-columns:max-content minmax(0,1fr);column-gap:10px;row-gap:6px;
  }
  .master-seq .feature__title{font-size:clamp(18px,2.8vw,22px);line-height:1.24}
  .master-seq .feature__body{font-size:clamp(15px,2vw,17px);line-height:1.48}
}
@media (max-width:767px){
  .master-seq{height:225vh;height:225svh}
  .master-seq__title-wrapper{display:flex}
  .master-seq__title-wrapper.is-left{align-items:center;text-align:center}
  .master-seq__eyebrow{display:block;margin:0 0 6px;color:var(--accent-base);font-size:10px;line-height:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
  .master-seq__content{top:92px;bottom:auto;width:calc(100% - 24px);padding-inline:6px}
  .master-seq .features{min-height:0;gap:8px}
  .master-seq .feature--master{column-gap:8px;row-gap:4px}
  .master-seq .feature__title{font-size:clamp(16px,4.2vw,18px);line-height:1.2}
  .master-seq .feature__body{font-size:clamp(13px,3.55vw,15px);line-height:1.3}
}
@media (max-width:767px) and (max-height:740px){
  .master-seq__content{top:72px;bottom:auto}
  .master-seq .feature__body{font-size:13px;line-height:1.28}
}
/* Static is the default until JS explicitly enables the timeline. This also
   covers reduced motion, unavailable canvas, and a failed script download. */
html:not(.js) .master-seq:not(.is-animated),
.master-seq.is-static{height:auto;padding:60px max(20px,5vw)}
html:not(.js) .master-seq:not(.is-animated) .master-seq__stage,
.master-seq.is-static .master-seq__stage{position:relative;height:auto;overflow:visible;flex-direction:column;gap:32px}
html:not(.js) .master-seq:not(.is-animated) .master-seq__title-wrapper,
.master-seq.is-static .master-seq__title-wrapper{position:relative;inset:auto!important;transform:none!important;width:min(600px,100%)!important;order:0;opacity:1!important}
html:not(.js) .master-seq:not(.is-animated) .master-seq__canvas,
.master-seq.is-static .master-seq__canvas{display:none}
html:not(.js) .master-seq:not(.is-animated) .master-seq__fallback,
.master-seq.is-static .master-seq__fallback{position:relative;inset:auto;height:auto;max-height:55vh;opacity:1!important;visibility:visible;order:1}
html:not(.js) .master-seq:not(.is-animated) .master-seq__content,
.master-seq.is-static .master-seq__content{display:block;position:relative;inset:auto;width:min(100%,720px);opacity:1!important;transform:none;pointer-events:auto;order:3}
html:not(.js) .master-seq:not(.is-animated) .features,
.master-seq.is-static .features{display:flex;min-height:0;gap:20px}
html:not(.js) .master-seq:not(.is-animated) .feature--master,
.master-seq.is-static .feature--master{position:relative;inset:auto;opacity:1!important;transform:none!important}
html:not(.js) .master-seq:not(.is-animated) .creds,
.master-seq.is-static .creds{position:relative;inset:auto;width:auto;opacity:1!important;transform:none!important;pointer-events:auto;order:2}