/* ==========================================================================
   GC GRADIA® PREMi launch page
   Static page, no build step. Tokens first, then layout, then components.
   ========================================================================== */

:root {
  --bg: #050807;
  --bg-2: #080d0b;
  --ink: #f3f7f5;
  --ink-2: #a9c4b8;
  --ink-3: #7f9a90;
  --gc: #158b70;          /* GC Green, Pantone 3278 C */
  --mint: #2ee6a6;        /* neon accent */
  --mint-2: #7dffd2;      /* light core */
  --glow: rgba(46, 230, 166, .55);
  --plate: rgba(255, 255, 255, .04);
  --plate-2: rgba(255, 255, 255, .07);
  --hair: rgba(255, 255, 255, .09);
  --hair-2: rgba(255, 255, 255, .16);
  --danger: #ffb4ad;
  --danger-line: #ff8a80;
  --radius: 0;
  --radius-s: 0;
  --max: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --blue: #3a80f0;        /* GRADIA PREMi label blue, lifted to read as light */
  /* GC corporate font first: Avenir Next is built into Apple devices; GC staff may have Avenir Next LT Pro installed.
     Everywhere else the GC manual's recommended web font, Inter, takes over. */
  --font: "Avenir Next", "Avenir Next LT Pro", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --logo-w: 113px;
  color-scheme: dark;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: #1c2622 var(--bg);
  scrollbar-width: thin;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

::selection { background: rgba(46, 230, 166, .35); color: #fff; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #1c2622; border-radius: 0; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #26352f; }

:focus-visible { outline: 2px solid var(--mint-2); outline-offset: 3px; border-radius: 0; }

img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
/* green call-outs in the titles (client: the words they bolded), the page's neon mint */
.hl { color: var(--mint); }
ul { margin: 0; padding: 0; }
button, input, select { font: inherit; color: inherit; }

/* Dental icons (inline SVG sprite at the top of <body>): sized and coloured like Font Awesome glyphs */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1em; height: 1em; fill: currentColor; flex: none; display: inline-block; vertical-align: -.14em; overflow: visible; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -999px; top: 12px; z-index: 1000;
  background: var(--mint); color: #04110c; padding: 10px 18px; border-radius: 0; text-decoration: none; font-weight: 600;
}
.skip:focus { left: 16px; }

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

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

.display {
  font-size: clamp(2.75rem, 6vw, 5.5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.032em;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}
.display em { font-style: italic; color: var(--mint-2); }
/* the hero headline always breaks into the same four lines, whatever font the visitor has */
.display__line { display: block; white-space: nowrap; }
.nowrap { white-space: nowrap; }

h2 {
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  font-weight: 400;
  letter-spacing: -.022em;
  line-height: 1.08;
  text-wrap: balance;
}

.lead {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0 0 2rem;
  text-wrap: pretty;
}
.lead strong { color: #fff; font-weight: 600; }

.section { position: relative; padding-block: clamp(3rem, 9vw, 7.5rem); }
.section--tight { padding-block: clamp(3.5rem, 8vw, 6rem); }
.section__head { max-width: 64ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); position: relative; z-index: 1; }
.section__head h2 { margin-bottom: 1.1rem; }
sup.tm { font-size: .55em; line-height: 0; vertical-align: super; margin-left: .04em; font-weight: inherit; }
.section__kicker { font-weight: 700; color: var(--gc); }
.section__head p { color: var(--ink-2); margin: 0; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); text-wrap: pretty; }
.section__head--split {
  max-width: none; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 1.25rem clamp(2rem, 6vw, 6rem); align-items: end;
}
.section__head--split h2 { margin: 0; max-width: 22ch; }
/* a long intro: the title sits at the top of it instead of at its last line */
.section__head--top { align-items: start; }
/* a long heading gets the full width so it stays at two lines on desktop; the intro follows below */
.section__head--wide { max-width: none; }
.section__head--wide h2 { max-width: 28em; }
.section__head--wide .h2__rest { display: block; }   /* the line breaks after the colon */
.section__head--wide p { max-width: 54ch; }
.section__head--split p { max-width: 54ch; }

.fine { font-size: .8125rem; color: var(--ink-3); line-height: 1.55; }

/* Avenir Next (GC corporate font) has Ultra Light, Regular, Medium, Demi Bold and Bold.
   The GC manual sets headlines in Roman and asks for Regular rather than Light for white text on dark. */
.avenir .display { font-weight: 400; letter-spacing: -.018em; }
.avenir h2 { letter-spacing: -.012em; }
.avenir .stat__num { letter-spacing: -.028em; }
.avenir .stat__unit, .avenir .success h3 { font-weight: 400; }
.avenir .stat__word { font-weight: 200; letter-spacing: -.012em; }
.avenir .masthead__nav { font-weight: 500; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.5rem; border-radius: 0; border: 1px solid transparent;
  font-weight: 600; font-size: 1rem; line-height: 1; text-decoration: none; cursor: pointer;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background-color .3s, border-color .3s, color .3s;
  white-space: nowrap;
}
.btn i { font-size: .95em; line-height: 1; flex: none; transition: transform .45s var(--ease); }
.btn:hover .fa-arrow-right { transform: translateX(3px); }
.btn .fa-bell { font-size: .9em; }
.btn--mint { background: var(--mint); color: #04110c; }
.btn--mint:hover { background: var(--mint-2); transform: translateY(-1px); box-shadow: 0 14px 34px -14px var(--glow); }
.btn--mint:active { transform: translateY(0); }
.btn--ghost { background: transparent; color: #fff; border-color: var(--hair-2); }
.btn--ghost:hover { border-color: rgba(255, 255, 255, .4); background: var(--plate); }
.btn--sm { padding: .72rem 1.15rem; font-size: .9375rem; }
.btn[aria-busy="true"] { opacity: .75; pointer-events: none; }
.btn[aria-busy="true"] i { animation: nudge .7s ease-in-out infinite alternate; }
@keyframes nudge { from { transform: translateX(0); } to { transform: translateX(5px); } }

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.masthead {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 88px;
  transition: background-color .4s, box-shadow .4s;
  overflow: hidden;
}
.masthead.is-scrolled {
  background: rgba(5, 8, 7, .74);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
.masthead__inner { height: 100%; display: flex; align-items: center; gap: 2rem; position: relative; padding-top: 22px; }
.masthead__logo { display: inline-flex; color: #fff; padding: 14px 0; text-decoration: none; }
.masthead__logo svg { height: 26px; width: auto; }
.masthead__logo:focus-visible { outline-offset: 10px; }

/* GC header line element: horizontal rule closing to the logo at the 64° chevron angle */
.masthead__line {
  position: absolute; top: 12px; height: 32px; pointer-events: none;
  left: calc(var(--logo-w) + 44px);
  right: min(calc(-1 * var(--gutter)), calc((var(--max) - 100vw) / 2));
}
.masthead__line::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(21, 139, 112, .95), rgba(21, 139, 112, .55)); }
.masthead__line::before {
  content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 32px;
  background: rgba(21, 139, 112, .9); transform-origin: top center; transform: rotate(26deg);
}
/* The GC line doubles as reading progress */
.masthead__progress {
  position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 1;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, rgba(46, 230, 166, .25), var(--mint-2));
  box-shadow: 0 0 10px 1px rgba(46, 230, 166, .55);
}

.masthead__nav { margin-left: auto; display: flex; gap: 1.9rem; font-size: .8125rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.masthead__nav a { text-decoration: none; transition: color .25s; padding: .4rem 0; }
.masthead__nav a:hover { color: #fff; }
.masthead__cta { margin-left: .25rem; }

/* --------------------------------------------------------------------------
   Lights, ribbons, plates
   -------------------------------------------------------------------------- */

.light {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(70px); mix-blend-mode: screen; opacity: .55; will-change: transform;
  animation: drift 18s ease-in-out infinite alternate;
}
.light--a { width: 48vw; height: 48vw; max-width: 760px; max-height: 760px; right: -10vw; top: -10vw; background: radial-gradient(closest-side, rgba(21, 139, 112, .6), rgba(21, 139, 112, 0)); }
.light--b { width: 40vw; height: 40vw; max-width: 620px; max-height: 620px; left: -12vw; bottom: -14vw; background: radial-gradient(closest-side, rgba(58, 128, 240, .24), rgba(46, 230, 166, .08) 55%, rgba(46, 230, 166, 0)); animation-duration: 24s; animation-delay: -8s; }
.light--c { width: 36vw; height: 36vw; max-width: 560px; max-height: 560px; left: 30%; top: -10%; background: radial-gradient(closest-side, rgba(21, 139, 112, .4), rgba(21, 139, 112, 0)); animation-duration: 21s; }
.light--d { width: 56vw; height: 30vw; max-width: 900px; max-height: 480px; left: 22%; top: 36%; background: radial-gradient(closest-side, rgba(46, 230, 166, .2), rgba(58, 128, 240, .08) 55%, rgba(58, 128, 240, 0)); animation-duration: 26s; }
.light--dim { opacity: .45; }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-4%, 6%, 0) scale(1.14); } }

/* Atmosphere: each section's light, steam and sheets live in one layer that fades out at its
   top and bottom, so light never ends on a hard edge where a section begins or ends */
.atmos {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.atmos--hero {
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 80%, transparent 100%);
}
.atmos--end {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 100%);
}
.section > .wrap, .hero > .wrap { position: relative; z-index: 1; }

/* Light sheets are canvases drawn additively by main.js */
.ribbons {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  pointer-events: none; z-index: 0; mix-blend-mode: screen;
}

/* Grain: dithers the dark gradients so light pools never band, and gives the air some texture */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: url("../assets/img/grain.webp") 0 0 / 160px 160px repeat;
  opacity: .055; mix-blend-mode: overlay;
}

/* Folder frames: transparent plates drawn by one hairline with the GC 64° break in the top edge
   and a neon tab (main.js draws the SVG and keeps it sized). Image frames are clipped to the same shape. */
[data-frame] { position: relative; --tab-h: 10px; --tab-w: 30%; }
.frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.frame path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: miter; }
.frame__line { stroke: rgba(255, 255, 255, .2); stroke-width: 1; transition: stroke .5s ease-out; }
.frame__glow { stroke: rgba(46, 230, 166, .14); stroke-width: 6; stroke-linecap: round; }
.frame__tab { stroke: var(--mint); stroke-width: 1.5; stroke-linecap: square; }
.frame__lamp { stroke-width: 1.5; opacity: 0; transition: opacity .35s ease-out; }
[data-frame]:hover .frame__line { stroke: rgba(255, 255, 255, .34); }
[data-frame-clip] { clip-path: polygon(0 var(--fth, 0px), var(--fx0, 0px) var(--fth, 0px), var(--fx1, 0px) 0, 100% 0, 100% 100%, 0 100%); }


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

.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  padding-top: clamp(7rem, 15vh, 10rem); padding-bottom: clamp(3rem, 6vh, 5rem);
  overflow: clip; isolation: isolate;
}
.hero .ribbons--back {
  inset: -8% -6%; width: 112%; height: 116%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; position: relative; z-index: 1; }
.hero__copy { position: relative; z-index: 2; }
/* A soft reading shade: the fog stays everywhere, but it dims behind the words */
.hero__copy::before {
  content: ""; position: absolute; z-index: -1; inset: -20% -30% -26% -40%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(5, 8, 7, .78), rgba(5, 8, 7, .62) 45%, rgba(5, 8, 7, .3) 75%, rgba(5, 8, 7, 0));
}
/* A dark halo hugging the glyphs: invisible on black, it only darkens fog right behind the words */
.lead, .hero__note, .section__head p, .stats__fine, .split__caption, .register__intro p, .register__fine, .order__copy .fine {
  text-shadow: 0 0 16px rgba(5, 8, 7, .92), 0 0 4px rgba(5, 8, 7, .7);
}

.quick {
  position: relative; display: flex; gap: .5rem; padding: .45rem .45rem .45rem 1.1rem; border-radius: 0;
  max-width: 560px; --tab-h: 7px; --tab-w: 36%;
}
.quick:focus-within .frame__line { stroke: rgba(46, 230, 166, .78); }
.quick.is-invalid .frame__line { stroke: var(--danger-line); }
.quick input {
  flex: 1 1 auto; min-width: 0; background: transparent; border: 0; color: #fff;
  padding: .8rem .25rem; font-size: 1rem; caret-color: var(--mint);
}
.quick input::placeholder { color: #9cb8ad; }
.quick input:focus { outline: none; }
.quick__field { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; background: rgba(5, 8, 7, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }   /* the neon can pass behind the form; the typed text keeps a dark ground */
.quick__field input { flex: 1 1 auto; min-width: 0; }
.quick__icon { align-self: center; color: var(--ink-3); font-size: .9375rem; margin-right: .1rem; transition: color .3s; }
/* The button is notched like the frame around it: top edge low on the left, a 64° step, a raised tab on the right.
   The shape lives on ::before, so the focus ring and the hover glow are never clipped. */
.quick .btn--mint { --dh: 6px; --dx: 58%; background: transparent; padding-top: calc(.95rem + 3px); padding-bottom: calc(.95rem - 3px); }
.quick .btn--mint::before {
  content: ""; position: absolute; inset: 0; z-index: -2; background: var(--mint); transition: background-color .3s;
  clip-path: polygon(0 var(--dh), var(--dx) var(--dh), calc(var(--dx) + 2.93px) 0, 100% 0, 100% 100%, 0 100%);
}
.quick .btn--mint::after { clip-path: polygon(0 var(--dh), var(--dx) var(--dh), calc(var(--dx) + 2.93px) 0, 100% 0, 100% 100%, 0 100%); }
.quick .btn--mint:hover { background: transparent; box-shadow: none; filter: drop-shadow(0 12px 16px rgba(46, 230, 166, .3)); }
.quick .btn--mint:hover::before { background: var(--mint-2); }
.quick:focus-within .quick__icon { color: var(--mint); }
.quick--lg { max-width: none; padding: .55rem .55rem .55rem 1.1rem; }
.quick--lg input { font-size: 1.0625rem; padding: 1rem .2rem; }
.quick--lg .btn { padding: calc(1.05rem + 3px) 1.25rem calc(1.05rem - 3px); }
.quick .btn { padding-left: 1.25rem; padding-right: 1.25rem; }
.notify__error { display: flex; align-items: center; gap: .5rem; color: var(--danger); font-size: .875rem; margin: .6rem 0 0 1.25rem; min-height: 1.3em; }
.notify__error i { font-size: .875rem; }
.notify__done {
  display: flex; align-items: center; gap: .9rem; max-width: 560px; outline: none;
  padding: calc(.85rem + 4px) 1.2rem .85rem .85rem; border-radius: 0; --tab-h: 7px; --tab-w: 30%;
}
.notify__done p { margin: 0; color: var(--ink-2); font-size: .9375rem; line-height: 1.45; }
.notify__done strong { color: #fff; font-weight: 600; }
.notify__done [data-success-email] { color: #fff; }
.notify__check {
  flex: none; width: 40px; height: 40px; border-radius: 0; display: grid; place-items: center;
  background: var(--mint); color: #04110c; font-size: 1rem;
}
.hero__note { margin: .9rem 0 0 .25rem; color: var(--ink-2); font-size: .9375rem; }

.hero__product { position: relative; margin: 0; z-index: 1; display: grid; place-items: center; min-height: 420px; }
.hero__stage { position: relative; width: 100%; display: grid; place-items: center; will-change: transform; }
.hero__capsule { position: relative; z-index: 2; width: min(100%, 600px); animation: float 9s ease-in-out infinite alternate; }
.hero__capsule img { width: 100%; }
/* A specular glint that travels across the product, masked by the product's own silhouette */
.hero__glint {
  position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; mix-blend-mode: screen;
  -webkit-mask: url("../assets/img/capsule-hero.webp") center / 100% 100% no-repeat;
  mask: url("../assets/img/capsule-hero.webp") center / 100% 100% no-repeat;
}
/* A horizontal ramp on a skewed band: every row fades to zero at both edges, so the sweep never shows a box */
.hero__glint::before {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 34%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, 0));
  transform: translateX(-160%) skewX(-14deg);
}
.hero__product::before {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: 2%; height: 34%; z-index: 0;
  background: radial-gradient(60% 60% at 50% 60%, rgba(46, 230, 166, .28), rgba(21, 139, 112, .1) 50%, transparent 76%);
  filter: blur(28px);
}
@keyframes float { from { transform: translateY(0); } to { transform: translateY(-16px); } }

/* --------------------------------------------------------------------------
   Performance
   -------------------------------------------------------------------------- */

.performance { overflow: clip; isolation: isolate; }
.stats { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2vw, 1.5rem); position: relative; z-index: 1; }
.stat {
  position: relative; padding: clamp(1.4rem, 2.6vw, 2.1rem); padding-top: calc(clamp(1.4rem, 2.6vw, 2.1rem) + 6px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem;
  min-height: 240px;
  transition: transform .6s var(--ease);
}
.stat:hover { transform: translateY(-3px); }
.stat__num, .stat__label { position: relative; z-index: 1; text-shadow: 0 0 18px rgba(5, 8, 7, .95), 0 0 4px rgba(5, 8, 7, .8); }
.stat--xl { grid-column: span 5; }
.stat--l { grid-column: span 4; }
.stat--m { grid-column: span 3; }
/* water sorption: a full-width strip under the six cards; the standard on the left, the label and its window on the right */
.stat--full { grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; column-gap: clamp(1.5rem, 4vw, 4rem); row-gap: .75rem; }
.stat--full .stat__num { grid-row: 1 / span 2; }
.stat--full .stat__label { max-width: 46ch; align-self: end; }
.stat--full .stat__why { align-self: start; margin-top: 0; }
.stat--full .stat__tip { left: auto; width: min(460px, 100%); }
.stat__num {
  font-size: clamp(3.25rem, 6vw, 5.75rem); font-weight: 200; letter-spacing: -.045em; line-height: .95;
  font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: .3rem; flex-wrap: wrap; margin: 0;
}
.stat--xl .stat__num { font-size: clamp(4rem, 8.4vw, 8.25rem); }
.stat__num .approx { font-weight: 200; color: var(--ink-2); margin-right: -.1em; }
.stat__unit { font-size: clamp(1.05rem, 1.7vw, 1.7rem); font-weight: 300; color: var(--mint); letter-spacing: 0; align-self: baseline; }
.stat--xl .stat__unit { font-size: clamp(1.25rem, 2.2vw, 2.3rem); }
.stat__word { font-size: clamp(2.2rem, 3.6vw, 3.4rem); font-weight: 300; letter-spacing: -.03em; line-height: 1; }
.stat__label { font-size: 1rem; color: var(--ink-2); max-width: 26ch; line-height: 1.45; }
.stat__label strong { color: #fff; font-weight: 500; display: block; margin-bottom: .2rem; }

/* "Why it matters": a small window on the card. Desktop: it opens above the card on hover or focus.
   Phones and touch: the button opens it over the card; a tap outside, the button again or Escape closes it. */
.stat__why {
  position: relative; z-index: 2; align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem;
  margin-top: -.5rem; padding: .35rem 0; background: none; border: 0; cursor: pointer;
  color: var(--mint); font: inherit; font-size: .8125rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  transition: color .25s;
}
.stat__why i { font-size: .95em; }
.stat__why-close { display: none; }
.stat.is-tip .stat__why-open { display: none; }
.stat.is-tip .stat__why-close { display: inline; }
.stat.is-tip .stat__why i::before { content: "\f057"; }   /* circle-xmark while the window is open */
.stat__why:hover, .stat.is-tip .stat__why { color: var(--mint-2); }
.stat__why:focus-visible { outline: 2px solid var(--mint-2); outline-offset: 3px; }
.stat__tip {
  position: absolute; z-index: 6; left: 0; right: 0; bottom: calc(100% + 12px); width: auto; min-width: min(340px, 86vw);
  padding: 1.1rem 1.2rem 1.15rem; background: rgba(6, 10, 8, .96); border: 1px solid var(--hair-2); border-top: 2px solid var(--mint);
  box-shadow: 0 28px 70px -24px rgba(0, 0, 0, .95), 0 0 40px -16px rgba(46, 230, 166, .35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--ink-2); font-size: .9375rem; line-height: 1.5; text-shadow: none;
  opacity: 0; visibility: hidden; transform: translate3d(0, 8px, 0); pointer-events: none;
  transition: opacity .25s ease, transform .35s var(--ease), visibility 0s linear .35s;
}
.stat__tip p { margin: 0; }
.stat__tip p + .stat__tip-k { margin-top: .8rem; }
.stat__tip-k { color: var(--mint) !important; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .3rem !important; }
.stat__tip strong { color: #fff; font-weight: 500; }
.stat.tip-below .stat__tip { bottom: auto; top: calc(100% + 12px); transform: translate3d(0, -8px, 0); }   /* not enough room above (masthead): open downward */
.stat.is-tip .stat__tip { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
@media (hover: hover) and (pointer: fine) {
  .stat:hover .stat__tip, .stat:focus-within .stat__tip { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}
.stat:hover, .stat.is-tip, .stat:focus-within { z-index: 5; }
@media (max-width: 760px) {
  /* inside the swipe row there is no room above: the window covers the card instead */
  /* the window covers the card down to the button row, so its text never runs under the button */
  .stat__tip {
    inset: 0; bottom: calc(clamp(1.4rem, 2.6vw, 2.1rem) + 2.4rem); min-width: 0;
    overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1.05rem 1.1rem;
    font-size: .875rem; line-height: 1.45; border-bottom: 1px solid var(--hair);
  }
  .stat__tip p + .stat__tip-k { margin-top: .6rem; }
  .stat__tip-k { font-size: .6875rem; }
  .stat__why { z-index: 7; }
}
@media (prefers-reduced-motion: reduce) { .stat__tip { transform: none !important; transition: opacity .15s, visibility 0s linear .15s; } }
.stats__fine { margin-top: 1.5rem; position: relative; z-index: 1; max-width: none; text-wrap: balance; }
.stats__pager { display: none; }
/* Mean and maximum: a small MPa scale in the flexural strength cards (brochure values only) */
.range { display: block; width: 100%; height: auto; overflow: visible; position: relative; z-index: 1; font-family: var(--font); }
.rg-axis, .rg-ticks .min { stroke: rgba(255, 255, 255, .16); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rg-ticks .maj { stroke: rgba(255, 255, 255, .3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rg-glow { stroke: rgba(46, 230, 166, .22); stroke-width: 7; stroke-linecap: round; }
.rg-seg { stroke: var(--mint); stroke-width: 2.4; fill: none; }
.rg-mean { stroke: rgba(255, 255, 255, .85); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.rg-dot { fill: var(--mint-2); }
.rg-halo { fill: rgba(46, 230, 166, .18); }
.rg-txt { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.rg-txt--mean { fill: var(--ink-2); }
.rg-txt--max { fill: var(--mint-2); }
.rg-end { font-size: 12px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Technology
   -------------------------------------------------------------------------- */

.science__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }

.split {
  position: relative; aspect-ratio: 4 / 3; border-radius: 0; overflow: hidden;
  background: #0b1310; --x: 50%;
}
/* two microscope images; the right one is clipped at the handle (--x, set by main.js) */
.split__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.split__img--r { clip-path: inset(0 0 0 var(--x)); }
.split { touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.split__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; z-index: 4; pointer-events: none; -webkit-appearance: none; appearance: none; }
.split__range:focus-visible { opacity: 0; }
.split:has(.split__range:focus-visible) .frame__line { stroke: var(--mint-2); stroke-width: 2; }
.split__divider {
  position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; z-index: 2; pointer-events: none;
  background: var(--mint-2); box-shadow: 0 0 18px 2px var(--glow), 0 0 70px 14px rgba(46, 230, 166, .22);
}
.split__handle {
  position: absolute; top: 50%; left: var(--x); translate: -50% -50%; width: 46px; height: 46px; border-radius: 0; z-index: 3; pointer-events: none;
  background: rgba(5, 8, 7, .82); border: 1px solid rgba(46, 230, 166, .75); display: grid; place-items: center; color: var(--mint-2);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .8);
}
.split__handle i { font-size: .9375rem; }
.split__label {
  position: absolute; top: 1rem; z-index: 3; pointer-events: none;
  font-size: .8125rem; letter-spacing: .01em; padding: .45rem .8rem; border-radius: 0;
  background: rgba(5, 8, 7, .7); border: 1px solid var(--hair); color: var(--ink-2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.split__label--l { left: 1rem; }
.split__label--r { right: 1rem; color: #fff; border-color: rgba(46, 230, 166, .45); }
.split__note { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 3; pointer-events: none; display: flex; justify-content: space-between; gap: 1rem; font-size: .8125rem; color: var(--ink-2); }
.split__note span { max-width: 22ch; padding: .5rem .75rem; border-radius: 0; background: rgba(5, 8, 7, .7); border: 1px solid var(--hair); }
.split__note > span:last-child { text-align: right; }
.split__note > span:first-child { max-width: 26ch; }
.split__note .split__note-r { display: grid; gap: .45rem; align-content: end; max-width: 30ch; padding: 0; background: none; border: 0; }
.split__note .split__note-r span { display: block; max-width: none; }
.split__note b, .split__tag { font-weight: 700; color: var(--mint-2); }
.split__caption { margin: .9rem 0 0; }
.split__legend { display: none; }

.tech { list-style: none; margin: 0; padding: 0; }
.tech li { padding: 1.6rem 0; border-top: 1px solid var(--hair); }
.tech li:last-child { border-bottom: 1px solid var(--hair); }
.tech h3 { font-size: 1.3rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; }
.tech h3 > i { color: var(--mint); font-size: .9375rem; width: 1.6rem; display: inline-block; }
.tech h3 > span { display: block; padding-left: 1.6rem; color: var(--mint); font-weight: 400; font-size: .9375rem; margin-top: .25rem; letter-spacing: 0; }
.tech p { padding-left: 1.6rem; margin: .7rem 0 0; color: var(--ink-2); max-width: 46ch; }
/* On phones main.js turns the list into an accordion (.is-accordion): one open item at a time */
.tech.is-accordion li { padding: 0; }
.tech.is-accordion li.is-open { border-top-color: rgba(46, 230, 166, .45); }
.tech__toggle {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 44px; align-items: center; column-gap: .9rem;
  width: 100%; min-height: 76px; padding: .9rem 0; margin: 0; border: 0; border-radius: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.tech__ico {
  display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(46, 230, 166, .45);
  color: var(--mint); font-size: .9375rem; transition: background-color .35s, color .35s, border-color .35s;
}
.tech__name { display: grid; gap: .25rem; font-size: 1.1875rem; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }
.tech__sub { color: var(--mint); font-size: .875rem; font-weight: 400; letter-spacing: 0; }
.tech__sign { position: relative; width: 44px; height: 44px; }
.tech__sign::before, .tech__sign::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -.75px 0 0 -7px;
  background: var(--mint-2); transition: transform .45s var(--ease);
}
.tech__sign::after { transform: rotate(90deg); }
.tech li.is-open .tech__sign::after { transform: rotate(0deg); }
.tech li.is-open .tech__ico { background: var(--mint); border-color: var(--mint); color: #04110c; }
.tech__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.tech li.is-open .tech__panel { grid-template-rows: 1fr; }
.tech__inner { min-height: 0; overflow: hidden; }
.tech__inner > p { margin: 0; padding: 0 0 1.35rem calc(40px + .9rem); max-width: none; }

/* --------------------------------------------------------------------------
   Indications
   -------------------------------------------------------------------------- */

.indications { overflow: clip; isolation: isolate; }
.specimens {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
.specimen {
  position: relative; z-index: 1; margin: 0; display: flex; flex-direction: column;
  padding: clamp(1.25rem, 2.6vw, 2.25rem) clamp(1rem, 2vw, 1.75rem) clamp(1.4rem, 2.4vw, 2rem);
  transition: background-color .6s ease-out;
}
.specimen + .specimen { border-left: 1px solid var(--hair); }
.specimen:hover { background-color: rgba(255, 255, 255, .025); }
.specimen__stage { position: relative; aspect-ratio: 1 / 1; perspective: 900px; }
.specimen__float { position: absolute; inset: 0; transform-style: preserve-3d; }
.specimen__img { position: absolute; inset: 0; display: grid; place-items: center; }
.specimen__img::before {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 4%; height: 24%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(46, 230, 166, .36), rgba(46, 230, 166, 0)); filter: blur(18px);
}
.specimen__img img {
  position: relative; width: auto; height: auto;
  max-width: calc(var(--s, .8) * 100%); max-height: calc(var(--s, .8) * 100%);
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .45));
}
.specimen figcaption { display: flex; gap: .8rem; align-items: flex-start; margin-top: clamp(.75rem, 1.6vw, 1.25rem); }
.specimen__ico { font-size: clamp(1.8rem, 2.4vw, 2.15rem); color: var(--ink); margin-top: .05rem; }
.specimen__text { display: grid; gap: .25rem; min-width: 0; }
.specimen__name { font-size: clamp(1.35rem, 1.9vw, 1.75rem); font-weight: 400; letter-spacing: -.012em; line-height: 1.15; color: var(--ink); }
.specimen__desc { font-size: .9375rem; color: var(--ink-3); }

.gallery {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px .75rem;
  margin-top: clamp(2.5rem, 5vw, 4rem); scrollbar-width: thin; list-style: none;
}
.gallery li { margin: 0; scroll-snap-align: start; border-radius: 0; overflow: hidden; position: relative; aspect-ratio: 4 / 3; --tab-h: 8px; --tab-w: 36%; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease); }
.gallery li:hover img { scale: 1.04; }
.gallery figure { margin: 0; height: 100%; }
.gallery figcaption {
  position: absolute; left: .75rem; bottom: .75rem; font-size: .8125rem; padding: .4rem .75rem; border-radius: 0;
  background: rgba(5, 8, 7, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--hair);
}

/* --------------------------------------------------------------------------
   Esthetics
   -------------------------------------------------------------------------- */

.esthetics { overflow: clip; }

/* 3DNext 2026: title and copy centred on each other, then a photo rail (arrows on the right, swipe on phones) */
.section__head--middle { align-items: center; }
.event__more { margin: clamp(1.25rem, 2.4vw, 1.75rem) 0 0;   /* the copy continues from the paragraph above, so no rule between */
  color: var(--ink-2); font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.65; text-wrap: pretty; }
.event__rail { margin-top: clamp(2rem, 4vw, 3rem); }
.event__nav { display: flex; justify-content: flex-end; gap: .5rem; margin-bottom: 1rem; }
.event__btn {
  display: grid; place-items: center; width: 48px; height: 48px; cursor: pointer;
  background: transparent; color: var(--ink); border: 1px solid var(--hair-2); border-radius: 0; font-size: 1rem;
  transition: border-color .25s, color .25s, opacity .25s;
}
.event__btn:hover:not(:disabled) { border-color: var(--mint); color: var(--mint-2); }
.event__btn:disabled { opacity: .3; cursor: default; }
.event__track {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2rem) / 3); gap: 1rem;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.event__track::-webkit-scrollbar { display: none; }
.event__track:focus-visible { outline: 2px solid var(--mint-2); outline-offset: 4px; }
.event__slide { scroll-snap-align: start; aspect-ratio: 3 / 2; overflow: hidden; border: 1px solid var(--hair); background: var(--bg-2); }
.event__open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.event__open:focus-visible { outline: 2px solid var(--mint-2); outline-offset: -2px; }
.event__slide img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.event__slide:hover img { transform: scale(1.03); }

/* Lightbox: the photo as large as the screen allows, square buttons on the dark ground */
html.has-lightbox { overflow: hidden; }
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(3, 5, 4, .97); color: var(--ink); overflow: hidden;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: transparent; }
.lightbox__figure { margin: 0; display: grid; gap: .9rem; justify-items: center; max-width: min(1200px, calc(100vw - 9rem)); touch-action: pan-y; }
.lightbox__img { display: block; max-width: 100%; max-height: calc(100dvh - 9rem); width: auto; height: auto; border: 1px solid var(--hair); user-select: none; -webkit-user-drag: none; }
.lightbox__bar { display: flex; justify-content: center; width: 100%; color: var(--ink-2); font-size: .9375rem; }   /* only the "n / 11" count; the description stays in the photo's alt text */
.lightbox__count { color: var(--ink-3); font-variant-numeric: tabular-nums; flex: none; }
.lightbox__btn {
  position: absolute; display: grid; place-items: center; width: 52px; height: 52px; cursor: pointer;
  background: rgba(5, 8, 7, .6); color: var(--ink); border: 1px solid var(--hair-2); border-radius: 0; font-size: 1.05rem;
  transition: border-color .25s, color .25s;
}
.lightbox__btn:hover { border-color: var(--mint); color: var(--mint-2); }
.lightbox__close { top: 1.25rem; right: 1.25rem; }
.lightbox__prev { left: 1.25rem; top: 50%; translate: 0 -50%; }
.lightbox__next { right: 1.25rem; top: 50%; translate: 0 -50%; }
.motion .lightbox[open] { animation: formbox-fade .3s ease-out both; }
.motion .lightbox__img.is-swap { animation: formbox-fade .35s ease-out both; }
@media (max-width: 600px) {
  .lightbox__figure { max-width: 100vw; }
  .lightbox__img { max-height: calc(100dvh - 10rem); border-inline: 0; }
  .lightbox__bar { padding-inline: 1rem; font-size: .875rem; }
  .lightbox__close { top: .75rem; right: .75rem; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 1.25rem; translate: none; width: 48px; height: 48px; }
  .lightbox__prev { left: 1rem; }
  .lightbox__next { right: 1rem; }
}
@media (max-width: 900px) { .event__track { grid-auto-columns: calc((100% - 1rem) / 2); } }
@media (max-width: 600px) {
  /* phones: swipe; the next photo peeks in at the edge */
  .event__nav { display: none; }
  .event__track { grid-auto-columns: 84%; gap: .75rem; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
}
.esthetics__stage {
  position: relative; margin-top: clamp(1.5rem, 4vw, 3rem); padding: clamp(1.5rem, 4vw, 3.5rem) 0;
  display: grid; place-items: center; isolation: isolate;
}
/* A still backlight behind the six units: they read as lit from behind, with no sweep */
.esthetics__glow {
  position: absolute; left: 50%; top: 50%; width: min(92%, 920px); height: 74%; translate: -50% -54%; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(46, 230, 166, .17), rgba(21, 139, 112, .07) 56%, transparent 76%);
  filter: blur(26px);
}
/* The b-HT properties marked on the six units. Wide screens: main.js places each label around the image and
   draws its leader at the GC 64° angle (.is-placed). Otherwise the dots carry numbers and the labels are a list. */
.hs { position: relative; z-index: 1; width: min(100%, 1000px); --tl: .25s; }
.hs__view { position: relative; }
.hs__frame { position: relative; }
.hs__img { display: block; width: 100%; height: auto; filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .5)); }
.hs__lines { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 1; }
.hs__lines path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.hs__case { stroke: rgba(5, 8, 7, .5); stroke-width: 3.4; }
.hs__line { stroke: rgba(125, 255, 210, .82); stroke-width: 1.2; transition: stroke .3s, stroke-width .3s; }
.hs__line.is-hot { stroke: var(--mint-2); stroke-width: 1.7; }
.hs__dot {
  position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); z-index: 2;
  width: 24px; height: 24px; margin: -12px 0 0 -12px; display: grid; place-items: center; cursor: default;
}
.hs__dot::before, .hs__dot::after { content: ""; position: absolute; inset: 1px; border-radius: 50%; border: 1.5px solid var(--mint-2); }
.hs__dot::before {
  background: rgba(5, 8, 7, .3); box-shadow: 0 0 0 2px rgba(5, 8, 7, .42), 0 0 14px rgba(46, 230, 166, .5);
  transition: box-shadow .35s, transform .45s var(--ease);
}
.hs__dot::after { opacity: 0; pointer-events: none; }
.hs__dot b {
  position: relative; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--mint); color: #04110c; font-size: .6875rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 1.5px rgba(5, 8, 7, .5);
}
.hs.is-placed .hs__dot b { width: 8px; height: 8px; font-size: 0; background: var(--mint-2); }
.hs__dot.is-hot::before { transform: scale(1.18); box-shadow: 0 0 0 2px rgba(5, 8, 7, .42), 0 0 26px 9px rgba(125, 255, 210, .38); }
.hs__list { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; grid-template-columns: 1fr; gap: 1rem 2rem; text-align: left; }
.hs__item { display: flex; gap: .8rem; align-items: flex-start; }
.hs__num {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; margin-top: .05rem;
  background: var(--mint); color: #04110c; font-size: .75rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.hs__text { display: grid; gap: .15rem; min-width: 0; }
.hs__title { display: flex; gap: .55rem; align-items: baseline; font-size: 1.0625rem; font-weight: 500; line-height: 1.3; color: var(--ink); transition: color .3s; }
.hs__title i { flex: none; color: var(--mint); font-size: .875rem; }
.hs__item.is-hot .hs__title { color: var(--mint-2); }
@media (min-width: 600px) { .hs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .js .hs { margin-block: 94px 90px; } }
.hs.is-placed { --tl: .62s; }
.hs.is-placed .hs__list { position: absolute; inset: 0; margin: 0; display: block; pointer-events: none; }
.hs.is-placed .hs__item { position: absolute; left: 0; top: 0; display: block; white-space: nowrap; pointer-events: auto; }
.hs.is-placed .hs__num { display: none; }
.hs.is-placed .hs__text { gap: .1rem; text-shadow: 0 0 14px rgba(5, 8, 7, .95), 0 0 3px rgba(5, 8, 7, .8); }
.hs.is-placed .hs__title { font-size: 1rem; }
.hs.is-placed .hs__item[data-dir="left"] { text-align: right; }
.hs.is-placed .hs__item[data-dir="left"] .hs__title { justify-content: flex-end; }
.esthetics__stage figcaption { position: relative; z-index: 1; margin-top: 1.5rem; color: var(--ink-2); font-size: .875rem; text-shadow: 0 0 16px rgba(5, 8, 7, .95), 0 0 4px rgba(5, 8, 7, .8); }

/* --------------------------------------------------------------------------
   Workflow
   -------------------------------------------------------------------------- */

.workflow { overflow: clip; isolation: isolate; }
.steps-wrap { position: relative; padding-left: clamp(1.75rem, 4vw, 3.25rem); }
/* End of the workflow: every product of the steps together, under one callout */
.family { margin-top: clamp(4rem, 8vw, 7rem); text-align: center; }
.family__title { max-width: 24ch; margin: 0 auto clamp(2rem, 4vw, 3.25rem); font-size: clamp(1.75rem, 3.4vw, 2.9rem); font-weight: 400; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
.family__stage { position: relative; }
.family__stage::before {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -2%; height: 30%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(46, 230, 166, .22), rgba(46, 230, 166, 0)); filter: blur(24px); pointer-events: none;
}
.family__stage img { position: relative; display: block; width: 100%; height: auto; }
.steps { display: grid; list-style: none; margin: 0; padding: 0; }
/* A rail that fills as you read the workflow; each step lights as the cure point reaches it */
.steps__rail { position: absolute; left: .45rem; top: 0; bottom: 0; width: 1px; background: var(--hair); }
.steps__fill {
  position: absolute; top: 0; bottom: 0; left: -.5px; width: 2px; transform-origin: 50% 0; transform: scaleY(0);
  background: linear-gradient(180deg, rgba(46, 230, 166, 0), rgba(46, 230, 166, .75) 70%, var(--mint-2));
}
.steps__head {
  position: absolute; top: 0; left: .5px; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 0;
  background: var(--mint-2); box-shadow: 0 0 0 4px rgba(46, 230, 166, .14), 0 0 18px 3px rgba(46, 230, 166, .55);
  opacity: .35; transition: opacity .4s ease-out;
}
.steps-wrap.is-active .steps__head { opacity: 1; }
.step {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: center;
  padding: clamp(1.5rem, 3vw, 2.5rem) 0; border-top: 1px solid var(--hair);
}
.step:last-child { border-bottom: 1px solid var(--hair); }
.step:nth-child(even) .step__media { order: -1; }
.step__num { font-weight: 200; color: var(--ink-3); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-right: .6em; transition: color .6s ease-out; }
.step.is-lit .step__num { color: var(--mint); }
.step h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 400; margin: 0 0 .8rem; letter-spacing: -.018em; line-height: 1.15; }
.step p { color: var(--ink-2); margin: 0; max-width: 48ch; }
.step__products { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; padding: 0; list-style: none; }
.step__products li { display: inline-flex; align-items: center; gap: .55rem; font-size: .875rem; padding: .4rem .8rem; border-radius: 0; border: 1px solid var(--hair-2); color: var(--ink); }
.step__products .ico { color: var(--mint); font-size: 1.125rem; }
.step__products i { color: var(--mint); font-size: .9375rem; }
.step__media {
  position: relative; aspect-ratio: 3 / 2; max-height: 420px; width: 100%; display: grid; place-items: center; border-radius: 0; overflow: hidden;
  background: radial-gradient(60% 60% at 50% 66%, rgba(21, 139, 112, .16), transparent 72%);
}
.step.is-lit .step__media .frame__line { stroke: rgba(46, 230, 166, .55); }
.step__media img { max-height: 72%; width: auto; max-width: 78%; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .5)); }
.step__media--photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: 50% 55%; filter: none; scale: 1.2; }
.step__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; place-items: center; width: 100%; height: 100%; padding: 1.5rem; }
.step__pair img { max-height: 84%; max-width: 100%; }
/* Step 01: the capsule takes two thirds of the frame and starts as a line drawing traced from its render */
.step__pair--print { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); padding: 1rem 1.25rem; }
.blueprint { position: relative; justify-self: stretch; align-self: stretch; min-width: 0; min-height: 0; }
.blueprint svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.blueprint path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.blueprint .bp-box { fill: none; stroke: none; }
.blueprint .bp-main { stroke: var(--mint-2); stroke-width: 1.6; }
.blueprint .bp-part { stroke: var(--mint); stroke-width: 1.25; stroke-opacity: .9; }
.blueprint .bp-detail { stroke: var(--mint); stroke-width: 1.05; stroke-opacity: .55; }
.blueprint .bp-center { stroke: rgba(255, 255, 255, .3); stroke-width: 1; stroke-dasharray: 10 4 2 4; }
.blueprint .bp-cure { opacity: 0; mix-blend-mode: screen; }
:root:not(.motion) .blueprint .bp-wire, :root:not(.motion) .blueprint .bp-cure { display: none; }
.step__trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .75rem; place-items: center; width: 100%; height: 100%; padding: 1.5rem; }
.step__trio img { max-height: 100%; max-width: 100%; }

/* --------------------------------------------------------------------------
   Ordering
   -------------------------------------------------------------------------- */

/* ROI calculator: inputs on a plate at left, results at right (they stay in view while you type on desktop) */
.roi__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1rem, 2vw, 1.5rem); align-items: start; position: relative; z-index: 1; }
.roi__inputs, .roi__results { position: relative; margin: 0; padding: clamp(1.4rem, 2.6vw, 2.1rem); padding-top: calc(clamp(1.4rem, 2.6vw, 2.1rem) + 6px); }
.roi__results { position: sticky; top: 100px; display: grid; gap: 1.6rem; }
/* restoration tabs: a segmented control; each shows its live monthly savings */
.roi__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--hair-2); margin-bottom: 1.6rem; }
.roi__tab {
  position: relative; display: grid; gap: .2rem; justify-items: start; padding: .8rem 1rem .85rem; cursor: pointer; text-align: left;
  background: transparent; color: var(--ink-2); border: 0; font: inherit; transition: background-color .25s, color .25s;
}
.roi__tab + .roi__tab { border-left: 1px solid var(--hair-2); }
.roi__tab::after { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--mint); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.roi__tab[aria-selected="true"] { background: rgba(46, 230, 166, .07); color: #fff; }
.roi__tab[aria-selected="true"]::after { transform: scaleX(1); }
.roi__tab:hover { color: #fff; }
.roi__tab:focus-visible { outline: 2px solid var(--mint-2); outline-offset: -2px; }
.roi__tabname { font-size: 1rem; font-weight: 500; }
.roi__tabval { font-size: .8125rem; color: var(--mint); font-variant-numeric: tabular-nums; }
.roi__panel[hidden] { display: none; }
.motion .roi__panel:not([hidden]) { animation: formbox-fade .35s ease-out both; }

/* sliders: a hairline track that fills mint up to the square handle; the value reads large above */
.roi__slider { display: grid; gap: .55rem; padding: .35rem 0 1.15rem; }
.roi__shead { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.roi__shead label { font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.roi__shead output { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 300; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }
.roi__slider input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y;
  --track: linear-gradient(90deg, var(--mint) 0 var(--p, 50%), rgba(255, 255, 255, .12) var(--p, 50%) 100%);
}
.roi__slider input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: var(--track); box-shadow: 0 0 14px -2px rgba(46, 230, 166, .45); }
.roi__slider input[type="range"]::-moz-range-track { height: 4px; background: var(--track); }
.roi__slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 0; cursor: grab;
  background: #050807; border: 2px solid var(--mint); box-shadow: 0 0 0 4px rgba(46, 230, 166, .14), 0 0 18px rgba(46, 230, 166, .55);
  transition: transform .2s var(--ease), box-shadow .2s;
}
.roi__slider input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 0; background: #050807; border: 2px solid var(--mint); box-shadow: 0 0 18px rgba(46, 230, 166, .55); cursor: grab; }
.roi__slider input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); }
.roi__slider input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.18); box-shadow: 0 0 0 7px rgba(46, 230, 166, .18), 0 0 26px rgba(46, 230, 166, .75); }
.roi__slider input[type="range"]:focus-visible { outline: none; }
.roi__slider input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #050807, 0 0 0 5px var(--mint-2); }
.roi__slider input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px #050807, 0 0 0 5px var(--mint-2); }
.roi__scale { display: flex; justify-content: space-between; font-size: .75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-top: -.25rem; }
.roi__slider--invest { padding-top: 1.2rem; border-top: 1px solid var(--hair); }
.roi__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; padding-top: 1rem; border-top: 1px solid var(--hair); }
.roi__example { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--ink-3); }
.roi__example i { color: var(--mint); }
.roi__reset {
  display: inline-flex; align-items: center; gap: .5rem; height: 40px; padding: 0 .95rem; cursor: pointer;
  background: transparent; color: var(--ink-2); border: 1px solid var(--hair-2); font: inherit; font-size: .8125rem; font-weight: 500;
  transition: border-color .25s, color .25s;
}
.roi__reset:hover { border-color: var(--mint); color: var(--mint-2); }

/* step labels: where to start (1) and where to look (2) */
.roi__step { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.25rem; font-size: .8125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.roi__step span { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--mint); color: var(--mint); font-size: .8125rem; letter-spacing: 0; }
.roi__tab { grid-template-columns: auto minmax(0, 1fr); column-gap: .6rem; align-items: center; }
.roi__tabico { grid-row: 1 / span 2; font-size: 1.6rem; color: var(--ink-3); transition: color .25s; }
.roi__tab[aria-selected="true"] .roi__tabico { color: var(--mint); }
.roi__shead label { display: grid; gap: .25rem; }
.roi__help { font-size: .8125rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
/* per restoration, in one line: today's cost → PREMi's $59 → what one restoration saves */
.roi__unit { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .65rem; margin: -.3rem 0 1.5rem; padding: .8rem 1rem; background: rgba(46, 230, 166, .05); border-left: 2px solid var(--mint); font-size: .9375rem; color: var(--ink-3); }
.roi__unit b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.roi__unit > i { font-size: .75rem; color: var(--ink-3); }
.roi__unit .roi__usave { flex-basis: 100%; color: var(--ink-2); }
.roi__usave b { color: var(--mint); font-weight: 600; }

/* the headline result reads as a sentence */
.roi__lead { margin: 0; font-size: 1rem; color: var(--ink-2); }
.roi__big .roi__per { font-size: .32em; font-weight: 300; letter-spacing: 0; color: var(--ink-2); text-shadow: none; }
.roi__sentence { margin: .9rem 0 0; font-size: 1rem; line-height: 1.55; color: var(--ink-2); max-width: 40ch; }
.roi__sentence b { color: #fff; font-weight: 500; }
.roi__sentence .roi__m { color: var(--mint); }

/* payback chart: cumulative savings rising to meet the investment line */
.roi__chart { margin: 0; padding-top: 1.4rem; border-top: 1px solid var(--hair); }
.roi__plot { position: relative; margin-top: .8rem; }
.roi__chart svg { display: block; width: 100%; height: 150px; overflow: visible; }
.roi__tag { position: absolute; z-index: 1; white-space: nowrap; font-size: .75rem; font-weight: 500; letter-spacing: .02em; pointer-events: none; transition: left .45s var(--ease), top .45s var(--ease), opacity .3s; }
.roi__tag--invest { left: 0; transform: translateY(calc(-100% - 4px)); color: var(--ink-2); }
.roi__tag--dot { transform: translate(-50%, calc(-100% - 14px)); padding: .25rem .5rem; background: #050807; border: 1px solid var(--mint); color: var(--mint-2); }
.roi__tag.is-off { opacity: 0; }
.roi__grid-l { stroke: rgba(255, 255, 255, .06); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.roi__area { fill: url(#roi-area); stroke: none; }
.roi__line { fill: none; stroke: var(--mint); stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(46, 230, 166, .6)); }
.roi__invest { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.roi__dot { fill: #050807; stroke: var(--mint-2); stroke-width: 2; vector-effect: non-scaling-stroke; }
.roi__dot-halo { fill: rgba(46, 230, 166, .22); }
.roi__dot.is-off, .roi__dot-halo.is-off { visibility: hidden; }
.roi__axis { display: flex; justify-content: space-between; margin-top: .5rem; font-size: .75rem; color: var(--ink-3); }
.roi__legend { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; margin: .7rem 0 0; font-size: .75rem; color: var(--ink-3); }
.roi__lg { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--mint); vertical-align: middle; margin-right: -.6rem; }
.roi__lg--invest { border-top: 1px dashed rgba(255, 255, 255, .55); }
.roi__k { margin: 0; font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.roi__big { margin: .35rem 0 0; font-size: clamp(3rem, 5.6vw, 5rem); font-weight: 200; line-height: 1; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 40px rgba(46, 230, 166, .25); }
.roi__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.25rem; }
.roi__pair p { margin: 0; display: grid; gap: .3rem; }
.roi__pair b { font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 300; color: var(--ink); font-variant-numeric: tabular-nums; }
.roi__compare { display: grid; gap: .6rem; padding-top: 1.4rem; border-top: 1px solid var(--hair); }
.roi__bar { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto; align-items: center; gap: .75rem; font-size: .875rem; }
.roi__blabel { color: var(--ink-2); }
.roi__track { position: relative; height: 10px; background: rgba(255, 255, 255, .05); overflow: hidden; }
.roi__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--mint); box-shadow: 0 0 16px rgba(46, 230, 166, .45); transition: width .7s var(--ease); }
.roi__fill--now { background: #5f786e; box-shadow: none; }
.roi__bar b { min-width: 6.5em; text-align: right; color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.roi__gain { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin: 0; padding-top: 1.4rem; border-top: 1px solid var(--hair); }
.roi__gain b { font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 400; color: var(--mint); font-variant-numeric: tabular-nums; }
.roi__note { margin: 0; font-size: .875rem; color: var(--ink-3); min-height: 1.3em; }
.roi .is-neg { color: var(--danger) !important; }
/* the full breakdown: closed by default, the Excel's remaining inputs and its two comparisons */
.roi__more { position: relative; z-index: 1; margin-top: clamp(1rem, 2vw, 1.5rem); border: 1px solid var(--hair-2); background: rgba(5, 8, 7, .55); }
.roi__more summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; padding: 1.1rem 1.4rem; cursor: pointer; list-style: none;
  font-size: 1.0625rem; font-weight: 500; color: var(--ink); transition: background-color .25s;
}
.roi__more summary::-webkit-details-marker { display: none; }
.roi__more summary:hover { background: rgba(46, 230, 166, .05); }
.roi__more summary:focus-visible { outline: 2px solid var(--mint-2); outline-offset: -2px; }
.roi__morehint { font-size: .875rem; font-weight: 400; color: var(--ink-3); }
.roi__more summary i { margin-left: auto; align-self: center; color: var(--mint); transition: transform .35s var(--ease); }
.roi__more[open] summary i { transform: rotate(180deg); }
.roi__moregrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); padding: .4rem 1.4rem 1.6rem; border-top: 1px solid var(--hair); }
.roi__moreinputs { padding-top: 1rem; }
.roi__moreinputs .roi__slider--invest { border-top: 1px solid var(--hair); }
.roi__moreout { display: grid; gap: 1.4rem; align-content: start; padding-top: 1rem; }
.roi__moreout .roi__compare:first-child { border-top: 0; padding-top: 0; }
.motion .roi__more[open] .roi__moregrid { animation: formbox-fade .35s ease-out both; }
@media (max-width: 760px) { .roi__moregrid { grid-template-columns: minmax(0, 1fr); } .roi__more summary { padding: 1rem 1.1rem; } .roi__moregrid { padding-inline: 1.1rem; } }
.roi__fine { margin-top: 1.25rem; max-width: 90ch; }
@media (max-width: 980px) {
  .roi__grid { grid-template-columns: minmax(0, 1fr); }
  .roi__results { position: relative; top: auto; }
}
@media (max-width: 600px) {
  .roi__tab { padding: .7rem .6rem .75rem; grid-template-columns: minmax(0, 1fr); }
  .roi__tabico { display: none; }
  .roi__tabname { font-size: .8125rem; overflow-wrap: anywhere; }
  .roi__tabval { font-size: .75rem; }
  .roi__bar { grid-template-columns: 3.6rem minmax(0, 1fr) auto; gap: .6rem; }
  .roi__bar b { min-width: 5.5em; }
}
@media (prefers-reduced-motion: reduce) { .roi__fill { transition: none; } }

.order { overflow: clip; isolation: isolate; }
.order__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; position: relative; z-index: 1; }
.order__visual { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 440px; }
.order__visual .ribbons { inset: -10% -14%; width: 128%; height: 120%; }
.order__tilt { position: relative; z-index: 1; width: min(100%, 640px); }
.order__visual img { width: 100%; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .45)); position: relative; z-index: 1; }
.order__visual .ribbons {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.order__copy h2 { margin-bottom: 1rem; }
.order__copy .lead { margin-bottom: 1.25rem; }
.shades { width: 100%; border-collapse: collapse; margin: 1.25rem 0 1.75rem; font-variant-numeric: tabular-nums; }
.shades caption { text-align: left; font-weight: 500; padding-bottom: .75rem; color: #fff; }
.shades th { text-align: left; font-weight: 500; color: var(--ink-3); font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; padding: .6rem 0; border-bottom: 1px solid var(--hair-2); }
.shades td { padding: .85rem 0; border-bottom: 1px solid var(--hair); }
.shades td:first-child { font-size: 1.25rem; font-weight: 500; width: 30%; }
.shades td:last-child, .shades th:last-child { text-align: right; color: var(--ink-2); }
.order__actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }

/* --------------------------------------------------------------------------
   Registration
   -------------------------------------------------------------------------- */

.register { overflow: clip; isolation: isolate; }
.register .ribbons {
  inset: auto -4% -8%; width: 108%; height: 70%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 28%, #000 88%, transparent 100%);
}
.register__plate {
  position: relative; z-index: 1; --tab-h: 14px; --tab-w: 26%;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  padding: clamp(1.75rem, 4.5vw, 4rem); padding-top: calc(clamp(1.75rem, 4.5vw, 4rem) + 10px); border-radius: 0;
}
.register__intro h2 { margin-bottom: 1rem; }
.register__intro p { color: var(--ink-2); max-width: 40ch; }
.register__list { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: .9rem; color: var(--ink); }
.register__list li { display: flex; gap: .8rem; align-items: flex-start; line-height: 1.45; }
.register__list i { color: var(--mint); font-size: 1.0625rem; line-height: 1.45; flex: none; }
.register__list .ico { color: var(--mint); font-size: 1.25rem; margin-top: .14em; }
.register__action { position: relative; }
/* Sign-up buttons: one large mint button in the hero and on the registration plate */
.btn--lg { padding: 1.15rem 1.75rem; font-size: 1.0625rem; gap: .7rem; }
.hero__cta { margin-top: clamp(1.25rem, 2.4vw, 1.75rem); display: flex; flex-wrap: wrap; gap: .75rem; }
.register__action { gap: .75rem; }
/* "Already a Member?": the quiet partner of the mint button */
[data-member] { font: inherit; font-weight: 600; cursor: pointer; }
.btn--ghost.btn--lg { padding-block: calc(1.15rem - 1px); }

/* member note: the sign-up popup's panel, sized to its message (phones too) */
.formbox--note { width: min(520px, calc(100vw - 32px)); }
.formbox--note .formbox__body { padding: 1.5rem 1.5rem 1.75rem; }
.memberbox__text { margin: 0; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.6; }
.memberbox__mail { color: var(--mint-2); font-weight: 500; overflow-wrap: break-word; }   /* breaks after the @ on narrow screens */

/* Downloads: one row per document; ready ones link to the PDF, the rest wait as "Coming soon" */
.downloads__title { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.downloads__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: .75rem; }
.download {
  display: flex; align-items: center; gap: 1rem; min-height: 76px; padding: 1rem 1.25rem;
  border: 1px solid var(--hair-2); background: rgba(5, 8, 7, .55); color: var(--ink); text-decoration: none;
  transition: border-color .25s, background-color .25s, transform .45s var(--ease);
}
a.download:hover { border-color: var(--mint); background: rgba(46, 230, 166, .06); transform: translateY(-2px); }
a.download:focus-visible { outline: 2px solid var(--mint-2); outline-offset: 3px; }
.download__ico { font-size: 1.5rem; color: var(--mint); flex: none; }
.download__text { display: grid; gap: .2rem; min-width: 0; flex: 1; }
.download__name { font-size: 1rem; font-weight: 500; line-height: 1.3; }
.download__meta { font-size: .8125rem; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }
.download__go { color: var(--mint); flex: none; transition: transform .35s var(--ease); }
a.download:hover .download__go { transform: translateY(2px); }
.download.is-soon { border-style: dashed; color: var(--ink-2); }
.download.is-soon .download__ico { color: var(--ink-3); }
.register__action { display: grid; justify-items: start; }

/* Sign-up popup: GC's Account Engagement form in a modal. Its page is transparent with white labels,
   made for a dark ground; color-scheme matches the form's own (light) so the frame stays transparent. */
html.has-formbox { overflow: hidden; }
.formbox {
  width: min(600px, calc(100vw - 32px)); max-width: none; max-height: min(92dvh, 1120px);
  margin: auto; padding: 0; border: 1px solid var(--hair-2); border-top: 2px solid var(--mint); border-radius: 0;
  background: #070b09; color: var(--ink); box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .9), 0 0 60px -20px rgba(46, 230, 166, .25);
  overflow: hidden;
}
.formbox[open] { display: flex; flex-direction: column; }
.formbox::backdrop { background: rgba(2, 4, 3, .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.formbox__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex: none;
  padding: 1rem 1rem 1rem 1.5rem; border-bottom: 1px solid var(--hair);
}
.formbox__title { margin: 0; font-size: clamp(1.35rem, 2.2vw, 1.7rem); font-weight: 400; letter-spacing: -.015em; line-height: 1.15; }
.formbox__close {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none; cursor: pointer;
  background: transparent; color: var(--ink); border: 1px solid var(--hair-2); border-radius: 0; font-size: 1.1rem;
  transition: border-color .25s, color .25s, background-color .25s;
}
.formbox__close:hover { border-color: var(--mint); color: var(--mint-2); }
.formbox__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1.25rem 1.5rem 1.5rem; }
/* dark, thin scrollbars wherever a panel scrolls (popup, card windows) */
.formbox__body, .stat__tip { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent; }
.formbox__body::-webkit-scrollbar, .stat__tip::-webkit-scrollbar { width: 8px; }
.formbox__body::-webkit-scrollbar-track, .stat__tip::-webkit-scrollbar-track { background: transparent; }
.formbox__body::-webkit-scrollbar-thumb, .stat__tip::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border: 2px solid transparent; background-clip: padding-box; }
.formbox__body::-webkit-scrollbar-thumb:hover, .stat__tip::-webkit-scrollbar-thumb:hover { background-color: rgba(46, 230, 166, .5); }
.formbox__frame { display: block; width: 100%; height: 1150px; border: 0; background: transparent; color-scheme: light; }   /* tall enough that GC's form never shows its own (light) scrollbar: 13 fields with our template = ~1050px (2026-10-23), the rest leaves room for error lines; the popup itself scrolls */
.motion .formbox[open] { animation: formbox-in .5s var(--ease) both; }
.motion .formbox[open]::backdrop { animation: formbox-fade .35s ease-out both; }
@keyframes formbox-in { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.985); } }
@keyframes formbox-fade { from { opacity: 0; } }
@media (max-width: 600px) {
  /* phones: a full-screen sheet, close button always in reach */
  .formbox { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-top: 2px solid var(--mint); }
  .formbox__head { padding: .75rem .75rem .75rem 1.1rem; }
  .formbox__body { padding: .9rem .75rem 1.5rem; }
  .formbox__frame { height: 1320px; }   /* ~1210px on a phone */
  .hero__cta .btn, .register__cta { width: 100%; }
  .formbox--note { width: calc(100vw - 32px); height: fit-content; max-height: calc(100dvh - 32px); margin: auto; border: 1px solid var(--hair-2); border-top: 2px solid var(--mint); }
}
.register__fine { margin: 1rem 0 0 1.35rem; max-width: 52ch; }
.success { display: grid; gap: 1rem; align-content: center; min-height: 360px; outline: none; }
.success__check { color: var(--mint); font-size: .62em; margin-right: .55em; vertical-align: .18em; }
.success h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 300; letter-spacing: -.025em; }
.success p { color: var(--ink-2); margin: 0; max-width: 46ch; }
.success p strong { color: #fff; font-weight: 500; }

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

.footer { position: relative; padding: clamp(3.5rem, 7vw, 6rem) 0 2rem; border-top: 1px solid var(--hair); overflow: clip; background: #040605; }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr .9fr; gap: 2.5rem 2rem; position: relative; z-index: 1; }
.footer__brand { display: grid; gap: 1.5rem; align-content: start; }
.footer__logo { color: #fff; display: inline-flex; width: max-content; }
.footer__logo svg { height: 30px; width: auto; }
.footer address { font-style: normal; color: var(--ink-2); line-height: 1.6; font-size: .9375rem; display: grid; gap: .65rem; }
.footer .contact { display: flex; gap: .75rem; align-items: baseline; }
.footer .contact i { color: var(--mint); font-size: .875rem; width: 1em; text-align: center; flex: none; }
.footer__heading { margin: 0 0 .9rem; font-size: .8125rem; font-weight: 500; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; font-size: .9375rem; }
.footer li { margin: 0; }
.footer__grid a { text-decoration: none; color: var(--ink-2); transition: color .25s; }
.footer__grid a:hover { color: #fff; }
.footer__legal {
  margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hair);
  display: grid; gap: .6rem; font-size: .8125rem; color: var(--ink-3); position: relative; z-index: 1;
}
.footer__legal p { margin: 0; max-width: 90ch; }
.chevrons { position: absolute; right: var(--gutter); bottom: 6.5rem; width: clamp(96px, 10vw, 144px); color: rgba(0, 168, 142, .75);   /* the brochure cover mark: seven bars, #00a88e */ pointer-events: none; }

/* --------------------------------------------------------------------------
   Life: light and layers. Everything below the reveal rule is gated on .motion,
   which is only set when the visitor has not asked for reduced motion.
   -------------------------------------------------------------------------- */

.js [data-reveal] { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Headline words come into focus; the italic words arrive overexposed and cure to mint */
.motion [data-words] { opacity: 0; animation: reveal-safety 0s linear 2.5s forwards; }
.motion [data-words].is-split { opacity: 1; animation: none; }
.motion [data-words] .w {
  display: inline-block; opacity: 0; filter: blur(14px); transform: translate3d(0, .32em, 0);
  animation: focus-in 1.15s var(--ease) forwards;
  animation-delay: calc(160ms + var(--i, 0) * 62ms);
}
.motion .display em .w {
  animation: focus-in 1.15s var(--ease) forwards, cure-tint 1.9s ease-out both;
  animation-delay: calc(160ms + var(--i, 0) * 62ms), calc(160ms + var(--i, 0) * 62ms);
}
@keyframes focus-in { to { opacity: 1; filter: none; transform: none; } }
@keyframes cure-tint { from { color: #fff; } to { color: var(--mint-2); } }
@keyframes reveal-safety { to { opacity: 1; } }

/* The capsule rises into the light; its light pool stutters on like a neon tube, then breathes */
.motion .hero__capsule img { animation: rise 1.7s var(--ease) .3s both; }
@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 48px, 0) scale(.94); filter: blur(10px) brightness(.4); }
  to { opacity: 1; transform: none; filter: blur(0) brightness(1); }
}
.motion .hero__product::before { animation: ignite 1.4s steps(1, end) .95s both, breathe 6s ease-in-out 2.4s infinite alternate; }
@keyframes ignite { 0% { opacity: 0; } 10% { opacity: .9; } 16% { opacity: .15; } 28% { opacity: 1; } 34% { opacity: .45; } 46%, 100% { opacity: 1; } }
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.08); } }
.motion .hero__glint::before { animation: glint 11s ease-in-out 3.4s 3; }   /* three passes, then the capsule rests */
@keyframes glint { 0% { transform: translateX(-160%) skewX(-14deg); } 26%, 100% { transform: translateX(360%) skewX(-14deg); } }

/* Stats: numerals gain weight as they count up, units settle, the plate hairline scans across */
.motion .stat::after { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.6s var(--ease); transition-delay: calc(var(--d, 0ms) + .25s); }
.motion .stat.is-in::after { transform: scaleX(1); }
.motion .stat .stat__num { font-weight: 100; transition: font-weight 1.8s var(--ease); transition-delay: var(--d, 0ms); }
.motion .stat.is-in .stat__num { font-weight: 200; }
.motion .stat .stat__unit { opacity: 0; transform: translate3d(0, .35em, 0); transition: opacity .7s ease-out, transform .9s var(--ease); transition-delay: calc(var(--d, 0ms) + .85s); }
.motion .stat.is-in .stat__unit { opacity: 1; transform: none; }
/* The self-polishing plate gets polished once */
.stat > .gloss {
  position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none;
  clip-path: polygon(0 var(--fth, 0px), var(--fx0, 0px) var(--fth, 0px), var(--fx1, 0px) 0, 100% 0, 100% 100%, 0 100%);
}
.stat > .gloss::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 42%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .12) 50%, rgba(255, 255, 255, 0));
  transform: translateX(-140%) skewX(-14deg);
}
.motion .stat.is-in > .gloss::before { animation: gloss 1.7s var(--ease-io) both; animation-delay: calc(var(--d, 0ms) + .9s); }
@keyframes gloss { from { transform: translateX(-140%) skewX(-14deg); } to { transform: translateX(340%) skewX(-14deg); } }

/* Restorations print in layer by layer under a curing line, then cure: flash, shadow, light pool */
.motion .printable { clip-path: inset(100% -30% -45% -30%); }
.motion .specimen.is-printing .printable {
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 2px, rgba(0, 0, 0, .55) 2px 3px);
  mask-image: repeating-linear-gradient(180deg, #000 0 2px, rgba(0, 0, 0, .55) 2px 3px);
  animation: print .9s steps(26, end) var(--pd, 0ms) forwards;
}
.motion .specimen.is-printed .printable { clip-path: none; -webkit-mask-image: none; mask-image: none; animation: cured .55s ease-out both; }
@keyframes print { from { clip-path: inset(100% -30% -45% -30%); } to { clip-path: inset(0% -30% -45% -30%); } }
@keyframes cured {
  from { filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .45)) brightness(1.5) saturate(.7); }
  to { filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .45)) brightness(1) saturate(1); }
}
.cure {
  position: absolute; top: -9px; left: 0; width: 100%; height: 18px; z-index: 3; pointer-events: none; opacity: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(125, 255, 210, .55), rgba(46, 230, 166, .18) 55%, rgba(46, 230, 166, 0) 100%);
  filter: blur(3px); mix-blend-mode: screen;
  transform: translateY(var(--y0, 0px));
}
.motion .specimen.is-printing .cure { animation: cure .9s steps(26, end) var(--pd, 0ms) forwards, cure-fade .9s linear var(--pd, 0ms) forwards; }
@keyframes cure { from { transform: translateY(var(--y0, 0px)); } to { transform: translateY(var(--y1, 0px)); } }
@keyframes cure-fade { 0% { opacity: 0; } 6% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } }
.motion .specimen figcaption { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .7s ease-out, transform .9s var(--ease); transition-delay: calc(var(--pd, 0ms) + .55s); }
.motion .specimen.is-printing figcaption { opacity: 1; transform: none; }
.motion .specimen__img::before { opacity: 0; transition: opacity .75s ease-out; }
.motion .specimen.is-printed .specimen__img::before { opacity: 1; }

/* Step 01: the line drawing draws in, then the capsule prints in over it layer by layer and the lines go */
.motion .blueprint .bp-draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.motion .blueprint.is-in .bp-draw { animation: bp-draw var(--dur, 1s) var(--ease-io) var(--del, 0s) forwards; }
.motion .blueprint .bp-center { opacity: 0; }
.motion .blueprint.is-in .bp-center { animation: rg-fade .4s ease-out .9s forwards; }
.motion .blueprint .bp-print { clip-path: inset(100% 0 0 0); }
.motion .blueprint.is-in .bp-print { animation: bp-print 1s steps(24, end) 1.5s forwards; }
.motion .blueprint.is-in .bp-wire { animation: bp-unwire 1s steps(24, end) 1.5s forwards; }
.motion .blueprint.is-in .bp-cure { animation: bp-cure 1s steps(24, end) 1.5s forwards, bp-cure-fade 1s linear 1.5s forwards; }
@keyframes bp-draw { to { stroke-dashoffset: 0; } }
@keyframes bp-print { to { clip-path: inset(0 0 0 0); } }
@keyframes bp-unwire { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes bp-cure { from { transform: translateY(0); } to { transform: translateY(var(--bp-travel, -690px)); } }
@keyframes bp-cure-fade { 0% { opacity: 0; } 6% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } }

/* Mean and maximum: the gap draws from the mean to the maximum once the card is in */
.motion .stat .rg-seg { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.motion .stat.is-in .rg-seg { animation: rg-draw .9s var(--ease) .45s forwards; }
.motion .stat .rg-glow, .motion .stat .rg-txt { opacity: 0; }
.motion .stat.is-in .rg-glow { animation: rg-fade .8s ease-out .65s forwards; }
.motion .stat.is-in .rg-txt { animation: rg-fade .5s ease-out 1.1s forwards; }
.motion .stat .rg-max { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.2); }
.motion .stat.is-in .rg-max { animation: rg-pop .55s var(--ease) 1.2s forwards; }
@keyframes rg-draw { to { stroke-dashoffset: 0; } }
@keyframes rg-fade { to { opacity: 1; } }
@keyframes rg-pop { to { opacity: 1; transform: none; } }

/* Esthetics: the six units simply arrive with the figure; the backlight comes up behind them */
.motion .esthetics__glow { opacity: 0; transition: opacity 1.6s ease-out .35s; }
.motion .esthetics__stage.is-in .esthetics__glow { opacity: 1; }
/* Hotspots, in brochure order: the dot pops in and pings, its leader draws out, then its label writes itself in */
.hs__item { --t: calc(var(--i) * .38s + .25s + var(--tl)); }
.motion .hs__dot { opacity: 0; transform: scale(.3); }
.motion .hs.is-live .hs__dot { animation: hs-pop .4s var(--ease) calc(var(--i) * .38s + .25s) forwards; }
.motion .hs.is-live .hs__dot::after { animation: hs-ping .9s ease-out calc(var(--i) * .38s + .32s) 1 both, hs-idle 5.2s ease-out calc(var(--i) * 1.3s + 3.8s) infinite; }
.motion .hs__lines path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.motion .hs.is-live .hs__lines path { animation: hs-draw .42s var(--ease-io) calc(var(--i) * .38s + .45s) forwards; }
.hs.is-done .hs__lines path { animation: none; stroke-dashoffset: 0; }
.motion .hs__ch, .motion .hs__title i, .motion .hs__num { opacity: 0; }
.motion .hs.is-live .hs__ch { animation: hs-in .07s linear calc(var(--t) + var(--c) * 16ms) forwards; }
.motion .hs.is-live .hs__title i, .motion .hs.is-live .hs__num { animation: hs-in .25s ease-out var(--t) forwards; }
@keyframes hs-pop { 0% { opacity: 0; transform: scale(.3); } 60% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: none; } }
@keyframes hs-ping { 0% { opacity: .85; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes hs-idle { 0% { opacity: .55; transform: scale(1); } 28%, 100% { opacity: 0; transform: scale(2.4); } }
@keyframes hs-draw { to { stroke-dashoffset: 0; } }
@keyframes hs-in { to { opacity: 1; } }
@keyframes hs-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.motion .order__visual img { animation: float 11s ease-in-out -4s infinite alternate; }

/* Primary buttons: a sheen on hover, and once on the hero button after it lands */
.btn--mint { position: relative; overflow: hidden; isolation: isolate; }
.btn--mint::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 0) 70%);
  transform: translateX(-130%);
}
.motion .btn--mint:hover::after { transform: translateX(130%); transition: transform .9s var(--ease); }
.motion .quick .btn--mint::after { animation: sheen 1.2s var(--ease) 2.1s backwards; }
@keyframes sheen { from { transform: translateX(-130%); } to { transform: translateX(130%); } }

/* Registration success: the check draws, a ring of light expands */
.motion .success:not([hidden]) .success__check, .motion .notify__done:not([hidden]) .notify__check i { display: inline-block; animation: pop .6s var(--ease) .2s both; }
.motion .notify__done:not([hidden]) { animation: rise-in .7s var(--ease) both; }
@keyframes rise-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* The curing lamp follows the cursor; plate edges catch it (added by main.js on fine pointers) */
.lamp {
  position: fixed; left: -320px; top: -320px; width: 640px; height: 640px; border-radius: 50%;
  pointer-events: none; z-index: 45; opacity: 0; transition: opacity .6s ease-out;
  background: radial-gradient(closest-side, rgba(46, 230, 166, .085), rgba(46, 230, 166, .03) 45%, rgba(46, 230, 166, 0) 72%);
  mix-blend-mode: screen; will-change: transform;
}
.lamp.is-on { opacity: 1; }
/* Frames draw themselves when their plate reveals; the neon tab strikes like a tube */
.motion [data-reveal] .frame__line { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.7s var(--ease) .15s, stroke .5s ease-out; }
.motion [data-reveal].is-in .frame__line { stroke-dashoffset: 0; }
.motion [data-reveal] .frame__tab, .motion [data-reveal] .frame__glow { opacity: 0; }
.motion [data-reveal].is-in .frame__tab, .motion [data-reveal].is-in .frame__glow { animation: tab-ignite .9s steps(1, end) .8s both; }
@keyframes tab-ignite { 0% { opacity: 0; } 12% { opacity: .9; } 20% { opacity: .1; } 34% { opacity: 1; } 42% { opacity: .35; } 56%, 100% { opacity: 1; } }

/* Mobile: a notify dock once the hero has scrolled away, gone again at the form */
.dock { display: none; }

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

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

@media (max-width: 1120px) {
  .masthead__nav { gap: 1.35rem; letter-spacing: .08em; }
}

@media (max-width: 1100px) {
  /* narrower columns: the buttons give the email placeholder a little more room */
  .quick .btn, .quick--lg .btn { padding-left: 1rem; padding-right: 1rem; }
  .quick--lg { gap: .4rem; }
  .register__plate { grid-template-columns: 1fr; }   /* the sign-up form gets the full width */
  .stat--xl { grid-column: span 6; }
  .stat--l { grid-column: span 6; }
  .stat--m { grid-column: span 4; }
}

@media (max-width: 980px) {
  .masthead__nav { display: none; }
  .masthead__cta { margin-left: auto; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__product { order: 2; min-height: 0; margin-top: 1rem; }
  /* tablets stack the text first: the neon lives in the lower part, behind the product */
  .hero .ribbons--back {
    translate: none !important;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 50%, #000 62%, #000 90%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, transparent 50%, #000 62%, #000 90%, transparent 100%);
  }
  .hero__capsule { width: min(100%, 440px); }
  .section__head--split { grid-template-columns: 1fr; }
  .section__head--split h2 { max-width: none; }
  .science__grid, .order__grid, .register__plate { grid-template-columns: 1fr; }
  .order__visual { min-height: 0; }
  .step { grid-template-columns: 1fr; }
  .step .step__media, .step:nth-child(even) .step__media { order: -1; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .chevrons { bottom: auto; top: 2.5rem; }
}

@media (max-width: 760px) {
  /* the six stats become one swipe row: cards snap, the next one peeks in, a pager shows where you are */
  .stats {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: .85rem;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1); padding: 10px var(--gutter) 4px; scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .stats::-webkit-scrollbar { display: none; }
  .stat { grid-column: auto !important; min-height: 356px; scroll-snap-align: start; }   /* tall enough for the longest "why it matters" window */
  .stat--full { display: flex; }   /* in the swipe row it is a card like the others */
  .stat--full .stat__tip { width: auto; }
  .js .stats > [data-reveal] { transform: translate3d(28px, 0, 0); transition-delay: 0ms; }
  .js .stats > [data-reveal].is-in { transform: none; }
  .stats__pager { display: flex; align-items: center; gap: 6px; margin-top: 1.1rem; }
  .stats__pager span { width: 16px; height: 2px; background: var(--hair-2); transition: width .45s var(--ease), background-color .3s; }
  .stats__pager span.is-on { width: 32px; background: var(--mint); }
  .stats__count { margin-left: auto; font-size: .8125rem; font-weight: 500; letter-spacing: .04em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .specimens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .specimen + .specimen { border-left: 0; }
  .specimen:nth-of-type(even) { border-left: 1px solid var(--hair); }
  .specimen:nth-of-type(n+3) { border-top: 1px solid var(--hair); }
  .footer__grid { grid-template-columns: 1fr; }
  .gallery { grid-auto-columns: 82%; }
  .split { aspect-ratio: 1; }
  .split__note { display: none; }
  .split__more { display: none; }
  .split__label { top: .7rem; padding: .4rem .6rem; font-size: .75rem; }
  .split__label--l { left: .7rem; }
  .split__label--r { right: .7rem; }
  .split__legend { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.25rem; margin-top: 1rem; }
  .split__legend p { margin: 0; font-size: .8125rem; line-height: 1.45; color: var(--ink-2); }
  .split__legend b { display: block; margin-bottom: .25rem; font-weight: 500; color: #fff; }
  .split__legend p + p { text-align: right; }
  .split__legend p + p > b { color: var(--mint-2); }
  .split__legend-row { display: block; margin-top: .35rem; }
  .split__legend .split__tag { display: inline; margin: 0; }
  .esthetics__stage { margin-top: .75rem; padding: .25rem 0; }
  .footer ul { gap: 0; }
  .footer ul a { display: inline-block; padding: .7rem 0; }
  .footer address { gap: 0; }
  .footer .contact { padding-block: .7rem; }
  .footer__logo { padding-block: 8px; }
    .steps-wrap { padding-left: 1.6rem; }
  .steps__rail { left: .3rem; }
  .dock {
    display: block; position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60;
    transform: translate3d(0, 160%, 0); visibility: hidden;
    transition: transform .55s var(--ease), visibility 0s linear .55s;
  }
  .dock.is-shown { transform: none; visibility: visible; transition: transform .55s var(--ease), visibility 0s; }
  .dock .btn { width: 100%; padding: 1.05rem 1.5rem; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .85); }
}

@media (max-width: 640px) {
  .masthead__line { display: none; }
  .masthead__inner { padding-top: 0; }
  .masthead { height: 72px; }
  .hero__copy::before { display: none; }
  .hero__copy { display: contents; }
  .hero__inner > * { order: 1; }
  .hero__product { order: -1; margin: 0 0 1.1rem; min-height: 0; }
  .hero__note { order: 6; margin-top: 0; }
  .hero__capsule { width: min(72%, 300px); }
  .masthead__cta { min-height: 44px; }
  /* the neon stays behind the product at the top and fades out before the text starts; no drift over the text on scroll */
  .hero .ribbons--back {
    inset: 0 -6% auto -6%; width: 112%; height: calc(6.5rem + min(72vw, 300px) + 3rem); translate: none !important;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 64%, transparent 90%);
    mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 64%, transparent 90%);
  }
  /* the form stacks: the field keeps its icon on one row, the notched button runs full width below it */
  .quick, .quick--lg { flex-direction: column; align-items: stretch; padding: .45rem; gap: .45rem; }
  .quick__field { min-height: 52px; padding: 0 .55rem 0 .8rem; }
  .quick input, .quick--lg input { padding: .85rem .4rem; font-size: 1rem; }
  .quick .btn, .quick--lg .btn { width: 100%; padding: calc(1rem + 3px) 1.25rem calc(1rem - 3px); }
}

@media (max-width: 520px) {
  .notify__error, .register__fine { margin-left: .75rem; }
  .notify__done { border-radius: 0; align-items: flex-start; }
  .masthead { height: 66px; }
  .masthead__logo svg { height: 22px; }
  :root { --logo-w: 96px; }
  .hero { padding-top: 6rem; }
  .display { font-size: 2.5rem; margin-bottom: 1.1rem; }
  .lead { font-size: 1rem; margin-bottom: 1.25rem; }
  .specimen { padding: 1rem .85rem 1.15rem; }
  .specimen__name { font-size: 1.25rem; }
  .specimen__desc { font-size: .8125rem; }
}

@media (max-width: 599px) {
  .hs__view {
    margin-inline: calc(var(--gutter) * -1); overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  }
  .hs__frame { width: 136%; margin-left: -18%; }
  .hs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: 1rem; }
  .hs__item {
    flex-direction: column; gap: .5rem; padding: .75rem .8rem .85rem; border: 1px solid var(--hair-2);
    cursor: pointer; transition: border-color .3s, background-color .3s; -webkit-tap-highlight-color: transparent;
  }
  .hs__item.is-hot { border-color: rgba(46, 230, 166, .6); background: rgba(46, 230, 166, .05); }
  .hs__title { font-size: .9375rem; line-height: 1.25; }
  .hs__title i { display: none; }
}

/* Capture mode (?capture=1): final state without motion, for screenshots and QA */
.capture *, .capture *::before, .capture *::after { animation: none !important; transition: none !important; }
.capture [data-reveal] { opacity: 1 !important; transform: none !important; }
.capture .masthead { position: absolute; }