/* Riave prototype · tokens after DESIGN-apple.md (as on ENSOR CELL)
   Display: SF Pro Display (system), Inter off-system, weight 600, tight tracking. Text: SF Pro Text / Inter, 17px,
   1.47, -0.374px. Weight ladder 300 / 400 / 600. One action colour, the near-black ink, carries every button; the
   only other colour on the page is the cartons' own. Colour change between sections is the divider; no shadows on
   chrome, only the one soft shadow under the product. Radii: 11 inputs, 18 cards, pills for actions. */
:root {
  --canvas: #FFFFFF; --parchment: #F5F5F7;
  --ink: #1D1D1F; --ink-2: #333333; --ink-3: #7A7A7A;
  --hairline: rgba(0, 0, 0, .12); --hairline-soft: #E0E0E0;
  --accent: #1D1D1F; --accent-hover: #333336; --accent-focus: #1D1D1F;   /* the action colour is the ink, not Apple's blue */
  --night: #000000; --on-night: #FFFFFF; --on-night-2: #CCCCCC;
  --bg: var(--parchment);
  --stage-wall: #E5DED8;            /* average of the hero's sunlit wall, used only behind the hero still */

  --essential: #CFEAE0;  --essential-ink: #1D1F4F;
  --fine: #D2E5AC;       --fine-ink: #D8338A;
  --deep: #F1C3CB;       --deep-ink: #1488C4;
  --implant: #CCDDEB;    --implant-ink: #8A5BB8;

  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --section: 80px;                  /* {spacing.section} */
  --gutter: clamp(20px, 5vw, 72px);
  --max: 1320px;
  /* the content's own width and its left edge: the same column .wrap gives, for things placed absolutely, so on a
     wide screen everything gathers in the middle with the text rather than drifting out to the window's edges */
  --col: min(calc(100vw - 2 * var(--gutter)), var(--max));
  --edge: calc((100vw - var(--col)) / 2);
  --ease: cubic-bezier(.16, 1, .3, 1);
  /* the syringe's right-hand column: from just past the product, or past the barrel in its close-up, whichever is
     further, so the words never touch it (the depths, before it, set theirs from the carton alone: their lines are
     longer and need the room) */
  --side: max(calc(50% + min(64vh, 640px, 52vw) * .179 + clamp(40px, 5vw, 80px)), calc(50% + 23vw));
}
@media (max-width: 640px) { :root { --section: 48px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: clip; }
html { background: var(--bg); scroll-padding-top: 88px; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text); font-size: 17px; line-height: 1.47; letter-spacing: -0.374px; font-weight: 400;
  font-feature-settings: "ss03";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
em { font-style: italic; }
html.held body { touch-action: none; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- type scale ----------
   .h-hero, .h-cert, .sku-name   {typography.hero-display}   56 / 600 / 1.07 / -0.28px
   .h-section                    {typography.display-lg}     40 / 600 / 1.10
   .sub                          {typography.lead}           28 / 400 / 1.14 / +0.196px
   tagline (.sku-layer, lines)   {typography.tagline}        21 / 600 / 1.19 / +0.231px
   .body                         {typography.body}           17 / 400 / 1.47 / -0.374px
   eyebrow, labels               {typography.caption-strong} 14 / 600 / 1.29 / -0.224px
   notes                         {typography.caption}        14 / 400 / 1.43 / -0.224px
   .fine-print                   {typography.fine-print}     12 / 400 / 1.33 / -0.12px */
.h-hero, .h-cert, .h-section, .h-statement, .sub, .sku-name, .uhd-title, .contact-title, .contact-lead { font-family: var(--display); }
.h-hero { font-size: 56px; line-height: 1.07; font-weight: 600; letter-spacing: -0.28px; }
.h-section { font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: -.003em; }
.h-statement { font-size: 40px; line-height: 1.1; font-weight: 400; letter-spacing: -.003em; max-width: 22ch; }
.h-statement em { font-style: normal; color: var(--ink-3); }
.sub { font-size: clamp(21px, 2vw, 28px); line-height: 1.14; letter-spacing: 0.196px; color: var(--ink); max-width: 40ch; }
.body { font-size: 17px; line-height: 1.47; color: var(--ink-2); max-width: 46ch; }
.eyebrow { font-size: 14px; line-height: 1.29; font-weight: 600; letter-spacing: -0.224px; color: var(--ink-3); }
.fine-print { font-size: 12px; line-height: 1.33; letter-spacing: -0.12px; color: var(--ink-3); }

/* ---------- line breaks ----------
   Copy breaks where its sense does, never wherever the width happens to run out. A .ln is one unit of sense and
   always starts its own line (a sentence, or a clause the copy pauses on); a .ln-n does so only on a phone, and runs
   on where there is room. Within a line, headings and short leads balance their lines, longer copy avoids leaving a
   word alone, and numbers stay with their units (  in the markup). */
.ln { display: block; }
.extrude-head .h-section, .safety-head .h-section { flex: none; }   /* a heading beside a note keeps its own lines; the note gives way */
@media (max-width: 640px) { .ln-n { display: block; } }
h1, h2, .sub, .uhd-line, .cert-body, .contact-lead, .safety-end-title, .safety-end-sub, .sku-layer, .ln { text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------- buttons: {component.button-primary}, the one action grammar ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  min-height: 44px; padding: 11px 22px; border: 0; border-radius: 9999px;
  font-family: var(--text); font-size: 17px; line-height: 1; letter-spacing: -0.374px; text-decoration: none; cursor: pointer;
  transition: transform .12s ease-out, background-color .15s ease-out;
}
/* the label centred on its letters, not on the font's line box: SF and Inter carry more room above the capitals than
   below the baseline, so a line-height-1 label sat about a pixel low, and its lowercase and descenders lower still.
   A pixel of padding moved from top to bottom sets it level. (text-box trimming does not reach into an inline-flex
   pill, so it is done by hand.) */
.pill { padding-top: 10px; padding-bottom: 12px; }
.pill:active { transform: scale(.95); }
.pill:disabled { opacity: .5; cursor: default; }
.pill:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 3px; }
.pill-primary { background: var(--accent); color: #fff; }
@media (hover: hover) and (pointer: fine) { .pill-primary:hover { background: var(--accent-hover); } }

.proto-tag { display: none; }
.proto-tag.on { display: block; }
.proto-tag {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 30; cursor: default; -webkit-user-select: none; user-select: none;
  font: 400 12px/1 var(--text); letter-spacing: -0.12px; color: var(--ink-2);
  padding: 7px 12px; border-radius: 9999px; background: rgba(245, 245, 247, .8);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
}

/* ---------- loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: #F3F2F0;                /* the hero's own ground, so the page opens on it without a seam */
  transition: opacity .7s var(--ease);
}
.loader.gone { opacity: 0; pointer-events: none; }
.loader-bead { width: 40px; height: auto; overflow: visible; }
.bead-ghost { fill: none; stroke: var(--ink); stroke-width: .3; opacity: .3; }
.bead-full { fill: var(--ink); }
.flyer { position: fixed; z-index: 55; pointer-events: none; fill: var(--ink); overflow: visible; transform-origin: 0 0; }

/* ---------- nav: two islands, no bar ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px var(--gutter);                                   /* a 52px bar: Apple's sub-nav height */
  pointer-events: none;
}
/* the bar: frosted glass behind the wordmark and the button, as on Apple's own pages, so whatever scrolls under the
   header (a scene's words going up the frame, the form) is seen through it softened and never read against the
   wordmark. Clear at the very top of the page, where the opening scene leaves the header its own room. */
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(245, 245, 247, .72); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .06);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  opacity: 0; transition: opacity .3s cubic-bezier(.23, 1, .32, 1), background-color .4s var(--ease);
}
.nav.bar::before { opacity: 1; }
.nav.clear::before { opacity: 0; }   /* over the hero: no bar, the scene is the ground (main.js) */
/* on a phone the bar is near-solid, without the blur: blurring a 3D scene redrawn every frame under it cost the
   hero, the depths and the range a frame now and then */
@media (pointer: coarse) {
  .nav::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(245, 245, 247, .94); }
  .nav.on-dark::before { background: rgba(17, 17, 19, .92); }
}
.nav.on-dark::before { background: rgba(17, 17, 19, .62); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08); }
.nav > * { pointer-events: auto; }
.wm { display: block; fill: currentColor; overflow: visible; }
.nav-mark { color: var(--ink); }
.nav-mark .wm { height: 24px; width: auto; }
.nav-dot { opacity: 0; }
.nav-dot.on { opacity: 1; }
.nav .pill { min-height: 32px; padding: 7px 15px; font-size: 14px; letter-spacing: -0.224px; }   /* the sub-nav's Buy pill, at caption size */
.nav .pill { padding-top: 6px; padding-bottom: 8px; }   /* the same pixel moved up as on .pill */
.nav-mark { transition: color .4s var(--ease); }
.nav.on-dark .nav-mark { color: var(--on-night); }
.nav.on-dark .pill-primary { background: var(--on-night); color: var(--ink); }   /* on the dark CE section the pill turns light */

/* belt and braces for the meta above: a number a browser still links stays in the text's own colour */
a[href^="tel:"], a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font: inherit !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- shared stage ---------- */
.stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; }

/* ---------- hero: the cartons in 3D, the scroll drives the scene ---------- */
.hero { position: relative; height: 400vh; background: #161618; }
.hero-stage { background: #F3F2F0; }
.hero-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-copy { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 2; will-change: opacity, transform; pointer-events: none;
  display: flex; flex-direction: column; justify-content: center; }
/* on a wide frame the title stands at the left, halfway down, and the hand takes the rest; on a narrow one it is
   above, and the hand below it */
@media (max-aspect-ratio: 115/100) { .hero-copy { justify-content: flex-start; padding-top: clamp(104px, 14vh, 150px); } }
.hero-copy .sub { margin-top: 16px; max-width: 52ch; }
/* before the intro plays: copy and the header wait; cartons wait above the frame (set by the script) */
.js .hero-copy { opacity: 0; }
.js .nav { opacity: 0; transition: opacity .6s var(--ease); }
.js .nav.in { opacity: 1; }
.loader.clear { background: transparent; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .js .nav { transition: opacity .3s ease; }
}

/* ---------- certification: the one deliberate dark moment on the page ---------- */
.cert { height: 300vh; }
.cert-stage { background: #111113; color: var(--on-night); }
.ce-foil { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cert-copy { position: absolute; left: 0; right: 0; bottom: clamp(40px, 8vh, 88px); text-align: center; }
.h-cert { font-size: 56px; line-height: 1.07; font-weight: 600; letter-spacing: -0.28px; }
.cert-body { margin: 12px auto 0; font-family: var(--display); font-size: clamp(21px, 2vw, 28px); line-height: 1.14; letter-spacing: 0.196px; color: var(--on-night-2); }
.cert-range { margin: 12px auto 0; font-size: 17px; line-height: 1.47; color: var(--ink-3); }

/* ---------- gel ---------- */
.gel { height: 320vh; }
.gel-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* on wide frames the syringe stands in the middle, as the cartons do in the depths before it, and the words take the
   same right-hand column; on narrow frames the film sits below the title, between it and the facts */
@media (max-width: 1023px) { .gel-video { top: 26vh; height: 74vh; -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%); mask-image: linear-gradient(180deg, transparent, #000 10%); } }
@media (min-width: 1024px) {
  .gel-stage .gel-shot { left: var(--side); right: auto; width: calc(var(--edge) + var(--col) - var(--side)); max-width: none; margin: 0; padding: 0; top: 0; bottom: 0; justify-content: center; }
  .gel-stage .gel-note { margin-top: 16px; }
}
@media (min-width: 1024px) and (max-width: 1068px) { .gel-shot .h-section { font-size: 34px; } }
/* the shots' lines: one shows at a time, and changes on the film's cut, with no fade, as the picture does */
.gel-shot { position: absolute; left: 0; right: 0; top: clamp(104px, 15vh, 150px); bottom: clamp(32px, 6vh, 56px); z-index: 1; display: flex; flex-direction: column; justify-content: space-between; visibility: hidden; }
.gel-shot.is-on { visibility: visible; }
.gel-note { max-width: 46ch; font-size: 17px; line-height: 1.47; color: var(--ink-2); }   /* {typography.body} */

/* ---------- UHD ---------- */
.uhd { height: 460vh; }
.uhd-stage { background: #C9CBCC; }
/* the film is drawn a little wider than the frame, so when it draws back inside the press its sides stay covered */
.uhd-video { position: absolute; top: 0; left: -12%; width: 124%; height: 100%; object-fit: cover; will-change: transform; }
/* the shots' lines sit low on the left, on a soft light scrim so the strands behind never fight them */
.uhd-shot { position: absolute; left: 0; right: 0; bottom: clamp(40px, 8vh, 80px); z-index: 1; visibility: hidden; }
.uhd-shot.is-on { visibility: visible; }
/* the top edge while the scene comes up under the syringe film: that film's own last frame, laid out exactly as it
   shows above and mirrored about the join, so the grey and the grain run straight on across it; it fades out downward
   and goes as the scene settles (--join, main.js). Matched pixel for pixel at any size, which no set colour could be. */
.uhd-join { position: absolute; left: 0; right: 0; top: 0; height: 24vh; overflow: hidden; z-index: 1; pointer-events: none; opacity: var(--join, 0);
  -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
.uhd-join video { position: absolute; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; object-fit: cover; transform: scaleY(-1); }
@media (max-width: 1023px) { .uhd-join video { height: 74vh; } }   /* as the syringe film sits on a narrow frame */
.uhd-stage::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(to top, rgba(245, 245, 247, .72), rgba(245, 245, 247, 0)); pointer-events: none; }
.uhd-title { font-size: clamp(56px, 9.6vw, 148px); line-height: 1; font-weight: 600; letter-spacing: -.03em; }
.uhd-line { font-family: var(--display); font-size: 21px; line-height: 1.19; font-weight: 600; letter-spacing: 0.231px; max-width: 54ch; }   /* {typography.tagline} */
/* the press: two plates, the page's own ground, closing from above and below with a hairline at the working edge */
.uhd-plate { position: absolute; left: 0; right: 0; height: 50%; z-index: 2; background: var(--parchment); will-change: transform; }
.uhd-plate-top { top: 0; transform: translate3d(0, -100%, 0); box-shadow: inset 0 -1px 0 var(--hairline); }
.uhd-plate-bottom { bottom: 0; transform: translate3d(0, 100%, 0); box-shadow: inset 0 1px 0 var(--hairline); }
.uhd-plate-in { position: absolute; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.uhd-plate-top .uhd-plate-in { bottom: 24px; }
.uhd-plate-bottom .uhd-plate-in { top: 18px; }
.uhd-plate .fine-print { text-align: right; max-width: 32ch; }
.uhd-read { display: flex; align-items: baseline; gap: 18px; }
.uhd-read b { font-family: var(--display); font-size: clamp(88px, 15vw, 240px); line-height: .82; font-weight: 600; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.uhd-read span { font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: 0.231px; color: var(--ink); }
@media (max-width: 640px) {
  .uhd-line { font-size: 17px; }
  .uhd-plate-in { flex-direction: column; align-items: flex-start; gap: 8px; }
  .uhd-plate .fine-print { text-align: left; }
  .uhd-read { flex-direction: column; gap: 6px; }
}

/* ---------- safety: a drop of the gel, the scroll as the clock ---------- */
.safety { height: 320vh; }
.safety-stage { background: #E6E6E6; }
.safety-head { position: absolute; left: 0; right: 0; top: clamp(104px, 15vh, 150px); display: flex; justify-content: space-between; gap: 40px; z-index: 1; }
.safety-note-top { max-width: 72ch; font-size: 17px; line-height: 1.47; color: var(--ink-2); }   /* {typography.body} */
.safety-bead { position: absolute; left: 50%; top: 55%; width: min(50vh, 56vw); height: auto; translate: -50% -50%; will-change: transform, opacity; }
/* the end: the line takes the drop's place, centred on it, as the last of the drop goes (main.js) */
.safety-end { position: absolute; left: 0; right: 0; top: 55%; translate: 0 -50%; text-align: center; z-index: 1; opacity: 0; will-change: opacity, transform; }
.safety-end-title { font-family: var(--display); font-size: 56px; line-height: 1.07; font-weight: 600; letter-spacing: -0.28px; }   /* {typography.hero-display} */
.safety-end-sub { margin-top: 12px; font-family: var(--display); font-size: clamp(21px, 2vw, 28px); line-height: 1.14; letter-spacing: 0.196px; color: var(--ink-2); will-change: opacity, transform; }   /* {typography.lead} */
@media (max-width: 1068px) { .safety-end-title { font-size: 40px; } }
@media (max-width: 834px) { .safety-end { top: 50%; } }
@media (max-width: 640px) { .safety-end-title { font-size: 34px; } }
.safety-clock { position: absolute; left: 0; right: 0; bottom: clamp(72px, 12vh, 120px); display: flex; align-items: flex-end; gap: 32px; z-index: 1; }
.safety-hours { display: flex; align-items: baseline; gap: 8px; }
.safety-hours b { font-family: var(--display); font-size: clamp(88px, 14vw, 220px); line-height: .8; font-weight: 600; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.safety-hours span { font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: 0.231px; color: var(--ink); }
.safety-note { max-width: 30ch; text-wrap: balance; color: var(--ink-2); font-size: 14px; line-height: 1.43; letter-spacing: -0.224px; padding-bottom: 8px; }   /* {typography.caption} */
.safety-ruler { position: absolute; left: 0; right: 0; bottom: clamp(28px, 5vh, 48px); height: 22px; }
.safety-ruler::before { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 0; border-top: 1px solid var(--hairline); }
.safety-ruler .mark { position: absolute; top: 0; height: 22px; border-left: 1px solid var(--hairline); padding: 6px 0 0 6px; font-size: 12px; letter-spacing: -0.12px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.safety-ruler .mark:last-of-type { border-left: 0; border-right: 1px solid var(--hairline); padding: 6px 6px 0 0; translate: -100% 0; }
.safety-ruler i { position: absolute; top: -6px; width: 1px; height: 28px; background: var(--ink); }
@media (max-width: 834px) {
  .safety-head { flex-direction: column; gap: 20px; }
  .safety-bead { top: 50%; width: min(38vh, 66vw); }
  .safety-ruler .mark[data-h="3"], .safety-ruler .mark[data-h="6"] { color: transparent; }
  .safety-clock { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------- depth: room by room, the nearest tissue passing in front between them ---------- */
.depth { height: 600vh; }
.depth-stage { background: #F3DCD2; }
/* the scene is one canvas, redrawn each frame (main.js); the words and the gauge lie over it */
.depth-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.depth-copy { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.sku-copy { will-change: opacity, transform; }
.gel-stage { background: #E2E2E2; }
.gauge { position: absolute; left: var(--edge); top: 50%; transform: translateY(-50%); display: flex; gap: 14px; height: min(52vh, 420px); z-index: 21; color: var(--ink); transition: color .6s var(--ease); }
.gauge-track { position: relative; width: 1px; background: currentColor; opacity: .25; }
.gauge-mark { will-change: transform; position: absolute; left: 0; top: 0; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; background: currentColor; }
.gauge-labels { list-style: none; display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; line-height: 1.33; letter-spacing: -0.12px; max-width: 150px; }
.gauge-labels li { opacity: .45; transition: opacity .4s var(--ease); }
.gauge-labels li.on { opacity: 1; }

/* three columns (from 1024px; narrower, the words sit above the carton): the gauge at the column's left edge, the carton in the very middle of the frame, the words to its
   right, from a fixed gap after the carton out to the column's right edge */
.depth-stage { --cw: calc(var(--ch, 400px) * .358); --cl: calc(50% + var(--cw) / 2 + clamp(40px, 5vw, 80px)); }   /* --ch: the carton's height, from main.js */
.sku-copy {
  position: absolute; top: 50%; translate: 0 -50%; left: var(--cl); color: var(--ink);
  width: min(420px, calc(var(--edge) + var(--col) - var(--cl)));
}
.sku-name { font-size: 56px; line-height: 1.07; font-weight: 600; letter-spacing: -0.28px; }
.sku-layer { margin-top: 12px; font-family: var(--display); font-size: 21px; line-height: 1.19; font-weight: 600; letter-spacing: 0.231px; }   /* {typography.tagline} */
.sku-meta { margin-top: 12px; font-size: 17px; line-height: 1.47; color: var(--ink-2); }
.sku-meta .ln { white-space: nowrap; }   /* each line is whole: the column is sized for the longest */
@media (max-width: 1068px) { .sku-name { font-size: 40px; } }
.gauge-now { display: none; position: absolute; left: 16px; top: 50%; translate: 0 -50%; white-space: nowrap; font-size: 12px; letter-spacing: -0.12px; color: var(--ink); }
@media (max-width: 1023px) and (max-aspect-ratio: 4/3) {   /* narrow and upright; a phone on its side takes the wide arrangement */
  .gauge { left: 12px; }
  .gauge-labels { display: none; }
  .gauge-now { display: none; }   /* the layer is named under the product already; beside the track it ran into the copy on a short frame */
  /* narrow: the words at the foot; the carton stands in the middle of the space above them (main.js) */
  .sku-copy { top: var(--copy-top, auto); bottom: auto; translate: none; left: calc(var(--gutter) + 16px); right: var(--gutter); width: auto; }
}
@media (max-width: 640px) { .sku-name { font-size: 34px; } .sku-layer { font-size: 19px; } }

/* ---------- extrusion: four lanes read like the test, a cursor sweeping the plunger's travel ---------- */
.extrude { height: 300vh; }
.extrude-stage { background: var(--canvas); }
.extrude-head { position: absolute; left: 0; right: 0; top: clamp(104px, 15vh, 150px); display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.extrude-head .fine-print { max-width: 62ch; text-align: right; }
.extrude-lanes { position: absolute; left: 0; right: 0; top: 38vh; bottom: calc(clamp(28px, 5vh, 48px) + 30px); display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); }
.lane { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr) 150px; align-items: center; border-top: 1px solid var(--hairline-soft); }
.lane:last-child { border-bottom: 1px solid var(--hairline-soft); }
.lane-name { font-size: 17px; line-height: 1.24; font-weight: 600; letter-spacing: -0.374px; }   /* {typography.body-strong} */
.lane-name small { display: block; font-size: 14px; line-height: 1.43; font-weight: 400; letter-spacing: -0.224px; color: var(--ink-3); margin-top: 2px; }
.lane { min-height: 0; }
.lane svg { display: block; align-self: stretch; width: 100%; height: 100%; min-height: 0; overflow: visible; }
.lane .trace { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.lane-read { text-align: right; font-family: var(--display); font-size: clamp(36px, 4.4vw, 56px); line-height: 1; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lane-read small { font-size: .38em; font-weight: 400; letter-spacing: 0; color: var(--ink-3); margin-left: .2em; }
.extrude-cursor { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink-3); pointer-events: none; }
.extrude-axis { position: absolute; left: 0; right: 0; bottom: clamp(28px, 5vh, 48px); display: flex; justify-content: space-between; padding-left: calc(var(--gutter) + 150px); padding-right: calc(var(--gutter) + 150px); font-size: 12px; letter-spacing: -0.12px; color: var(--ink-3); }
@media (max-width: 834px) {
  .extrude-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .extrude-head .fine-print { text-align: left; }
  .extrude-lanes { top: 40vh; }
  .lane { grid-template-columns: 76px minmax(0, 1fr) 64px; }
  .lane-name { font-size: 14px; letter-spacing: -0.224px; } .lane-name small { font-size: 12px; letter-spacing: -0.12px; }
  .lane-read { font-size: 26px; }
  .extrude-axis { padding-left: calc(var(--gutter) + 76px); padding-right: calc(var(--gutter) + 64px); }
}

/* ---------- the range: the four on a ledge in window light, before the form ---------- */
.range { height: 300vh; }
.range-stage { background: #E9DCD3; }
.range-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.range-copy { position: absolute; left: 0; right: 0; top: clamp(104px, 14vh, 150px); z-index: 2; pointer-events: none; }
.range-copy .sub { margin-top: 12px; }

/* ---------- contact: the page's ask, as on ENSOR CELL ----------
   A parchment tile: the head centred (eyebrow, display, lead, one sentence to a line), then the form as one white
   {component.store-utility-card}, labels over their fields, fields filled parchment at 11px, the blue pill to send. */
.contact { background: var(--parchment); padding: calc(var(--section) * 1.5) 0 var(--section); }
.contact-inner { max-width: calc(44rem + 2 * var(--gutter)); display: flex; flex-direction: column; }
.contact-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.contact-title { font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: -.003em; max-width: 20ch; text-wrap: balance; }   /* {typography.display-lg} */
.contact-lead { margin-top: 12px; font-size: clamp(21px, 2vw, 28px); line-height: 1.14; letter-spacing: 0.196px; color: var(--ink-2); }   /* {typography.lead} */
.form { margin-top: clamp(32px, 4vw, 48px); background: var(--canvas); border: 1px solid rgba(0, 0, 0, .06); border-radius: 18px; padding: clamp(24px, 3.4vw, 40px); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-wide { grid-column: 1 / -1; }
.field span { font-size: 14px; line-height: 1.29; font-weight: 600; letter-spacing: -0.224px; color: var(--ink-2); }   /* {typography.caption-strong} */
.field input, .field textarea {
  font: inherit; letter-spacing: inherit; color: var(--ink); background: var(--parchment);
  border: 1px solid transparent; border-radius: 11px; padding: 11px 14px; min-height: 44px; width: 100%;
  transition: border-color .15s ease-out, background-color .15s ease-out;
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input:focus, .field textarea:focus { outline: none; background: var(--canvas); border-color: var(--ink); box-shadow: 0 0 0 3px rgba(29, 29, 31, .1); }
.field input[aria-invalid="true"] { border-color: #E30000; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-foot { margin-top: 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-status { font-size: 14px; line-height: 1.43; letter-spacing: -0.224px; color: var(--ink-2); }
.form-status:empty { display: none; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } .contact-title { font-size: 34px; } }

/* ---------- footer: {component.footer}, parchment with a hairline over it ---------- */
.foot-wrap { background: var(--parchment); }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 20px; padding-bottom: 32px; border-top: 1px solid #D2D2D7; font-size: 12px; line-height: 1.33; letter-spacing: -0.12px; color: var(--ink-3); }
.foot .wm { height: 20px; width: auto; }
.foot-mark { display: block; color: var(--ink-2); transition: opacity .2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .foot-mark:hover { opacity: .6; } }
@media (max-width: 640px) { .foot { flex-direction: column; align-items: flex-start; gap: 12px; } }

/* entries: a heavy fade-up, settled by the clock once the scroll brings them in */

/* ---------- type ladder by width (brand/DESIGN.md) ---------- */
@media (max-width: 1068px) { .h-hero, .h-cert { font-size: 40px; } }
@media (max-width: 640px) { .h-hero, .h-cert { font-size: 34px; } .h-section, .h-statement { font-size: 34px; } }
@media (max-width: 419px) { .h-hero, .h-cert { font-size: 28px; } .h-section, .h-statement { font-size: 28px; } }

/* prototype: the storyboard bar (?board) */
.board-bar { position: fixed; left: 50%; bottom: 56px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 6px; border-radius: 999px; background: rgba(22,22,24,.86); color: #F3F2F0; font: 400 13px/1 var(--text); }
.board-bar button { min-width: 30px; padding: 0 6px; height: 30px; border-radius: 999px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.board-bar button.on { background: #F3F2F0; color: #161618; }
.board-bar p { margin: 0 8px 0 6px; white-space: nowrap; }

/* ---------- a phone on its side: a short, wide frame ---------- */
@media (max-height: 520px) and (min-aspect-ratio: 4/3) {
  .sku-name { font-size: 30px; } .sku-layer { margin-top: 6px; font-size: 17px; } .sku-meta { margin-top: 6px; font-size: 14px; }
  .safety-head, .extrude-head { top: 64px; }
  .safety-head .h-section, .extrude-head .h-section { font-size: 28px; }
  .safety-clock { bottom: 52px; } .safety-hours b { font-size: 72px; }
  .safety-bead { left: 74%; }                                     /* the drop and its closing line beside the clock, not over it */
  .safety-end { left: 48%; right: 0; width: auto; max-width: none; margin: 0; padding: 0 var(--gutter) 0 0; }
  .safety-end-title { font-size: 30px; } .safety-end-sub { margin-top: 6px; font-size: 17px; }
  .extrude-head { flex-direction: row; align-items: flex-end; }
  .extrude-head .fine-print { text-align: right; max-width: 44ch; font-size: 11px; }
  .extrude-lanes { top: 140px; }
  .uhd-line { font-size: 17px; }
  .uhd-plate .fine-print { font-size: 11px; }
  .uhd-plate-top .uhd-plate-in { bottom: 12px; }
  .uhd-plate-bottom .uhd-plate-in { top: 10px; }
  .uhd-read b { font-size: 64px; }
  .uhd-read span { font-size: 17px; }
}