/* Diamantic homepage, hi-fi pass (13 Oct 2026). Built from wireframe v11.
 *
 * Type: Aeonik (CoType) carries everything in three styles (owner, 15 Oct: a web licence is per style): Thin (200) for
 * the hero's headline only, Light (300) at display sizes, in the hero's other lines and in the Beauty Scores, Regular
 * (400) in text and controls. No other weight is asked for. No italics (the reel's voice is upright since 14 Oct).
 * Each cut is declared below (@font-face): by weight alone Chrome drew a Mac's installed Light as Air.
 * Aeonik is served from /assets/fonts/aeonik under CoType's web licence, bought 15 Oct 2026 for the licensed domain.
 *
 * Colour: the brand is monochrome; colour comes from the stones and the jewellers' shops. Light sections sit
 * on #F8F8F8, the exact ground of the ring films, so the viewer and the reel never show as boxes.
 */

/* Aeonik, by cut, under CoType's web licence (15 Oct 2026; CoType EULA WebFonts V.6). Only the WOFF2 and WOFF files
   CoType supplied may be put online, unmodified (no subsetting or conversion), on the licensed domain only, by
   @font-face. The three cuts the page uses: Thin (200, the hero's headline only), Light (300), Regular (400). */
@font-face { font-family: "Aeonik"; font-weight: 200; font-style: normal; font-display: swap; src: url("../assets/fonts/aeonik/aeonik-thin.woff2") format("woff2"), url("../assets/fonts/aeonik/aeonik-thin.woff") format("woff"); }
@font-face { font-family: "Aeonik"; font-weight: 300; font-style: normal; font-display: swap; src: url("../assets/fonts/aeonik/aeonik-light.woff2") format("woff2"), url("../assets/fonts/aeonik/aeonik-light.woff") format("woff"); }
@font-face { font-family: "Aeonik"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/aeonik/aeonik-regular.woff2") format("woff2"), url("../assets/fonts/aeonik/aeonik-regular.woff") format("woff"); }

:root {
  --font-sans: "Aeonik", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* every black ground is #111111 (owner, 14 Oct): the hero film is rendered on it too */
  --black: #111111;
  --night: #111111;
  --night-2: oklch(0.175 0 0);
  --snow: oklch(0.965 0 0);
  --snow-2: oklch(0.68 0 0);
  --snow-3: oklch(0.54 0 0);
  --paper: #F8F8F8;
  --paper-2: oklch(0.945 0 0);
  --ink: oklch(0.17 0 0);
  --ink-2: oklch(0.53 0 0);
  --ink-3: oklch(0.45 0 0);
  --line-on-dark: oklch(1 0 0 / 0.12);
  /* the one warm colour of the brand's own: the alert (places left) */
  --alert: oklch(0.87 0.16 92);
  /* Gold, in a few tiny places only (owner, 14 Oct: "a little bit of gold … we've lost a bit of sophistication"): each
     section badge's icon (the #gold-on-dark / #gold-on-light gradients in the page) and a fine rim, bright along the
     badge's top and gone by its foot, as light catches a polished edge. The words stay neutral. */
  --gold-rim-dark: linear-gradient(oklch(0.9 0.11 92 / 0.6), oklch(0.85 0.12 88 / 0.1));
  --gold-rim-light: linear-gradient(oklch(0.68 0.12 85 / 0.65), oklch(0.68 0.12 85 / 0.12));
  --line-on-light: oklch(0 0 0 / 0.1);

  /* Corners (owner, 13 Oct: "more corner radius in general", the reel's Search button as the guide). */
  /* From the owner's Paper frame (14 Oct), copied exactly: the buttons' fills, their ring of inset hairlines (it
     replaces the border) and their small drop shadow; the headlines' vertical gradients. */
  /* Controls are flat (owner, 14 Oct: the bevelled, shadowed buttons looked "a bit iOS 2.0", dated): a fill and one
     hairline, no sheen, no bevel, no drop shadow. The colours stay the Paper frame's. */
  --ring: inset 0 0 0 1px rgb(255 255 255 / 0.12);
  /* The primary stays in its section's theme (owner, 14 Oct: not white on black and black on white): on a dark
     ground a clear lift of the greeny grey with light words, on a light ground a step of greeny grey with dark words;
     the ghost stays nearly the ground itself. */
  --btn-fill: rgb(237 239 238 / 0.2);
  --btn-fill-hover: rgb(237 239 238 / 0.26);
  /* On light grounds the primary is a plain neutral fill with no outline, and the ghost is an outline with no fill:
     the two roles read at a glance (owner, 14 Oct: the greeny fills read "a bit off", muddy, and weaker than a white
     ghost beside them). */
  --btn-fill-light: #DCDDDC;
  --btn-fill-light-hover: #D2D3D2;
  --btn-sheen: none;
  --ghost-fill: rgb(237 239 238 / 0.03);
  --ghost-sheen: none;
  --ink-on-silver: linear-gradient(oklab(0.448 0 0) 0%, oklab(0 0 0) 120.68%);
  --ink-on-dark: linear-gradient(oklab(0.965 0 0) 0%, oklab(0.772 0 0) 100%);
  /* The same ring and sheen, mapped for light grounds (where #D9D9D9 would vanish, the fill turns to #111111). */
  --ring-light: inset 0 0 0 1px rgb(17 17 17 / 0.12);
  --ink-on-light: linear-gradient(oklab(0.36 0 0) 0%, oklab(0.1 0 0) 100%);
  /* The owner's greeny grey (#EDEFEE, the ghost fill's own tint), carried into the second line of every headline
     and the badges: it brings the monochrome to life a little. */
  --sage: rgb(237 239 238);
  --hl-1: linear-gradient(oklab(0.965 0 0) 0%, oklab(0.772 0 0) 100%);
  --hl-2: linear-gradient(oklch(0.71 0.017 155) 0%, oklch(0.57 0.015 155) 100%);
  --radius-s: 6px;   /* small marks: tags, slots, step numbers */
  --radius: 8px;     /* controls: buttons, inputs, chips, toggles */
  --radius-l: 16px;  /* panels: plans, the form, the sheet, the shop frame */
  /* Elevation: soft, blurred, offset shadows that give the surfaces a little gloss. --lift is the Search button's own. */
  --lift: 0 1px 2px oklch(0 0 0 / 0.18), 0 10px 24px -8px oklch(0 0 0 / 0.42);
  --lift-soft: 0 1px 2px oklch(0 0 0 / 0.05), 0 12px 28px -12px oklch(0 0 0 / 0.24);
  --lift-panel: 0 1px 2px oklch(0 0 0 / 0.05), 0 32px 64px -28px oklch(0 0 0 / 0.3);
  --lift-dark: inset 0 1px 0 oklch(1 0 0 / 0.07), 0 2px 4px oklch(0 0 0 / 0.5), 0 40px 80px -32px #000;
  --lacquer: linear-gradient(180deg, #34343A 0%, #18181B 48%, #09090A 100%);
  --lacquer-edge: inset 0 1px 0 oklch(1 0 0 / 0.24), inset 0 -1px 0 oklch(0 0 0 / 0.55), inset 0 0 0 1px oklch(1 0 0 / 0.05);
  --graphite-edge: inset 0 1px 0 oklch(1 0 0 / 0.2), inset 0 -1px 0 oklch(0 0 0 / 0.35);
  /* The founders' material (owner, 14 Oct): dark glass lit from above, like a display case. A pool of light in the
     greeny grey falls from the top edge, and a rim catches it, bright along the top and gone by the foot. The
     Flagship card and the taken founding places are made of it; nothing else is. */
  --lit-ground: linear-gradient(oklch(0.205 0.004 155), oklch(0.17 0.002 155));
  --lit-pool: radial-gradient(120% 70% at 50% 0%, oklch(0.62 0.03 155 / 0.2) 0%, oklch(0.45 0.02 155 / 0.05) 55%, transparent 80%);
  --lit-rim: linear-gradient(180deg, oklch(0.9 0.02 155 / 0.6), oklch(0.9 0.02 155 / 0.14) 40%, oklch(0.9 0.02 155 / 0.06));
  --gutter: clamp(20px, 4.4vw, 64px);
  --header-h: 64px;
  --header-h-top: 88px;
  --wrap: 1312px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);

  --z-veil: 20;
  --z-header: 40;
  --z-skip: 50;

  --step-hero: clamp(2.75rem, 1.55rem + 5.3vw, 5.75rem);
  --step-h2: clamp(2.125rem, 1.45rem + 3vw, 4rem);
  --step-h3: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);
  --step-lead: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  --step-score: clamp(5.5rem, 3.2rem + 9vw, 10rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 8px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--night);
  color: var(--snow);
  font: 400 1rem/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, ul, ol, figure { margin: 0; }
button, input { font: inherit; color: inherit; }
s { text-decoration-thickness: 1px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: var(--z-skip); background: var(--snow); color: var(--black); padding: 12px 16px; border-radius: var(--radius); text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: calc(1440px + var(--gutter) * 2); }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon .icon__solid { fill: currentColor; stroke: none; } /* WhatsApp's handset: solid in its outlined bubble, as in their mark (an outlined handset read oddly: owner, 15 Oct) */

/* ------------------------------------------------------------ type */
.display, .headline { font-weight: 300; letter-spacing: -0.032em; text-wrap: balance; }
.display { font-size: var(--step-hero); line-height: 0.98; }
.headline { font-size: var(--step-h2); line-height: 1.02; }
.headline--center { text-align: center; }
.two-tone > span {
  display: block;
  background-image: var(--hl-1); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Gradient words are painted only inside their own box, and at these tight line heights the tails of g, j, p, q and y
   hang below it and went unpainted (owner, 15 Oct: "the line height … crops the tails and letter dropdowns"; measured
   1.9-9.3 px lost). So each box reaches a little above and below its line, with equal negative margins: the paint
   covers every tail and nothing moves. */
.two-tone > span, .plan__name, .join-form__title, .sheet__title, .films__free {
  padding-block: 0.06em 0.18em; margin-block: -0.06em -0.18em;
}
.badge-label > span:last-child, .cost--gold { padding-block: 0.06em 0.18em; }
.two-tone .tone-2 { background-image: var(--hl-2); }
/* On light grounds the same fall of light as on dark, made visible: lightness steps near black read far weaker than
   near white, so the ramp is steeper (owner, 16 Oct: the light headlines read flat beside the dark ones; was
   0.30 to 0.11 and 0.60 to 0.47) */
.section--light { --hl-1: linear-gradient(oklab(0.46 0 0) 0%, oklab(0.1 0 0) 100%); --hl-2: linear-gradient(oklch(0.66 0.02 155) 0%, oklch(0.44 0.018 155) 100%); }
/* the other headings take the first line's gradient */
.plan__name, .join-form__title, .sheet__title, .films__free {
  background-image: var(--hl-1); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead { font-size: var(--step-lead); line-height: 1.38; letter-spacing: -0.01em; max-width: 34ch; text-wrap: pretty; }
.body { font-size: 1.0625rem; line-height: 1.55; max-width: 46ch; text-wrap: pretty; color: var(--snow-2); }
.section--light .body { color: var(--ink-3); }
.micro { font-size: 0.8125rem; line-height: 1.3; letter-spacing: 0.01em; color: var(--snow-2); }
.section--light .micro { color: var(--ink-3); }
/* One kicker on the page, the hero's: wide-tracked capitals, the logo's own voice. */
.kicker { font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--snow-2); }
.star { font-family: var(--font-sans); }

/* ------------------------------------------------------------ section badges: a quiet pill above each heading */
.head-stack { display: grid; gap: 18px; justify-items: start; }
/* The owner's reference: a pill with a greeny cast, its words in a gradient and its icon in a soft sage. It sits
   flat on the page, a printed label: one faint hairline, no sheen, no bevel and no drop shadow, because raised,
   ringed and shadowed is how a button says "press me" (owner, 14 Oct: the badges had started to look clickable).
   On light grounds, the same label in a pale sage. */
.badge-label {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start;
  padding: 6px 12px 6px 10px; border: 1px solid transparent; border-radius: 999px;
  font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.01em; line-height: 1.2; white-space: nowrap;
  color: var(--snow);
  background: linear-gradient(oklch(0.2 0.002 90), oklch(0.2 0.002 90)) padding-box, var(--gold-rim-dark) border-box; /* solid, so the rim never tints it */
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.badge-label > span:last-child {
  background-image: linear-gradient(oklch(0.98 0.006 150) 0%, oklch(0.8 0.02 150) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.badge-label .bi { color: oklch(0.86 0.12 88); stroke: url(#gold-on-dark); }
.badge-label .bi .bi-fill, .badge-label .bi-q { fill: url(#gold-on-dark); }
.section--light .badge-label {
  color: var(--ink);
  background: linear-gradient(oklch(0.985 0.008 92), oklch(0.985 0.008 92)) padding-box, var(--gold-rim-light) border-box;
}
.section--light .badge-label > span:last-child { background-image: linear-gradient(oklch(0.34 0.012 150) 0%, oklch(0.14 0.006 150) 100%); }
.section--light .badge-label .bi { color: oklch(0.6 0.12 82); stroke: url(#gold-on-light); }
.section--light .badge-label .bi .bi-fill, .section--light .badge-label .bi-q { fill: url(#gold-on-light); }
.search__head .badge-label, .beauty__head .badge-label, .feed__head .badge-label { justify-self: center; }
.bi { width: 16px; height: 16px; flex: none; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.bi .bi-fill { fill: currentColor; stroke: none; }
.bi-dev__phone { fill: #fff; }
.bi-gem__facets { stroke-width: 1; opacity: 0.7; }
.bi-q { fill: currentColor; fill-opacity: 0; }
.bi--live { position: relative; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-inline: 4px; }
.bi--live::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid currentColor; opacity: 0; }
.bi-q1 { fill-opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  /* the search's crystal (owner: twinkle more): the big star breathes and turns a little, and two small sparks
     flash on and off out of step with each other, so something is always catching the light */
  .bi--ai path { transform-box: fill-box; transform-origin: center; }
  .bi-ai__big { animation: sparkle-breathe 2.4s var(--ease-quart) infinite; }
  .bi-ai__small { animation: twinkle 1.6s var(--ease-quart) infinite; }
  .bi-ai__tiny { animation: twinkle 1.6s var(--ease-quart) -0.8s infinite; }
  /* four looks, one lit at a time */
  .bi-q { animation: swatch 4s steps(1, end) infinite; }
  .bi-q1 { fill-opacity: 0; }
  .bi-q2 { animation-delay: 1s; } .bi-q3 { animation-delay: 2s; } .bi-q4 { animation-delay: 3s; }
  /* the Beauty Score star: a few quick turns, a rest, again */
  .bi--star { animation: star-spin 4.2s infinite; }
  /* the ring films: one eased turn, a rest */
  .bi--turn { animation: turn 3.6s infinite; }
  /* the price tag swings from its hole */
  .bi--tag { transform-origin: 11.4px 4.6px; animation: swing 3.4s var(--ease-quart) infinite; }
  /* the question mark nods */
  .bi-q__mark { animation: nod 3s var(--ease-quart) infinite; }
  /* every screen: the phone steps forward, then back */
  .bi-dev__phone { animation: dev-step 3.6s var(--ease-quart) infinite; }
  /* the diamond turns, like the film */
  .bi--gem { transform-origin: 50% 50%; animation: gem-turn 3.8s infinite; }
  /* places left: a quiet ping */
  .bi--live::after { animation: ping 2.4s var(--ease-out) infinite; }
}
@keyframes twinkle { 0%, 100% { transform: scale(0.2) rotate(0deg); opacity: 0; } 30% { transform: scale(1.25) rotate(45deg); opacity: 1; } 55% { transform: scale(0.9) rotate(70deg); opacity: 1; } 80% { transform: scale(0.2) rotate(90deg); opacity: 0; } }
@keyframes sparkle-breathe { 0%, 100% { transform: scale(1) rotate(0deg); } 40% { transform: scale(0.84) rotate(-8deg); } 70% { transform: scale(1.06) rotate(4deg); } }
@keyframes swatch { 0% { fill-opacity: 1; } 25%, 100% { fill-opacity: 0; } }
@keyframes star-spin {
  0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.7, 0, 0.2, 1); }
  32%, 100% { transform: rotate(1080deg); }
}
@keyframes turn {
  0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  30%, 100% { transform: rotate(360deg); }
}
@keyframes swing { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(8deg); } 55% { transform: rotate(-3deg); } 65% { transform: rotate(0deg); } }
@keyframes nod { 0%, 60%, 100% { transform: translateY(0); } 70% { transform: translateY(-1.2px); } 80% { transform: translateY(0.4px); } }
@keyframes dev-step { 0%, 55%, 100% { transform: translate(0, 0); } 70%, 85% { transform: translate(-1.5px, -1px); } }
@keyframes gem-turn { 0% { transform: scaleX(1); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); } 18% { transform: scaleX(-1); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); } 36%, 100% { transform: scaleX(1); } }
@keyframes ping { 0% { transform: scale(1); opacity: 0.7; } 70%, 100% { transform: scale(2.6); opacity: 0; } }

/* ------------------------------------------------------------ buttons: the owner's Paper declarations */
/* Flat: a fill and one hairline, solid labels. Each button stays in its section's theme: the primary is the clearly
   filled one (a lift of the greeny grey on dark, a step of it on light), the ghost is nearly the ground. */
.btn {
  --btn-h: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--btn-h); padding: 0 18px;
  border: 0; border-radius: 8px;
  font-size: 0.875rem; font-weight: 400; letter-spacing: 0.005em; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: var(--ring);
  transition: background-color 180ms var(--ease-quart), box-shadow 180ms var(--ease-quart), transform 120ms var(--ease-quart);
}
.btn:active { transform: scale(0.985); }
.btn__t { padding-block: 0.12em; }
.btn--primary { color: var(--snow); background-color: var(--btn-fill); background-image: var(--btn-sheen); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16); }
.btn--primary:hover { background-color: var(--btn-fill-hover); }
.btn--ghost { color: var(--snow); background-color: rgb(237 239 238 / 0.05); background-image: var(--ghost-sheen); }
.btn--ghost:hover { background-color: rgb(237 239 238 / 0.08); }
.section--light .btn--primary { color: var(--ink); background-color: var(--btn-fill-light); box-shadow: none; }
.section--light .btn--primary:hover { background-color: var(--btn-fill-light-hover); }
.section--light .btn--ghost { color: var(--ink); background-color: transparent; box-shadow: inset 0 0 0 1px rgb(17 17 17 / 0.14); }
.section--light .btn--ghost:hover { background-color: rgb(17 17 17 / 0.04); }
.btn--small { --btn-h: 40px; padding: 0 14px; font-size: 0.875rem; }
.btn--large { --btn-h: 48px; padding: 0 22px; font-size: 0.9375rem; }
.btn--block { width: 100%; }
.text-btn { background: none; border: 0; padding: 12px 4px; min-height: 44px; font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; color: var(--snow); }

/* ------------------------------------------------------------ header */
/* There is no header while the hero is on screen (owner, 14 Oct): the hero is the cover, its centred wordmark and
   its two buttons do the header's job. Once the hero has gone, the condensed header drops in, fixed, blurred, with
   the small logo and the full nav; it slides back out when the reader returns to the hero. */
.site-header {
  position: absolute; inset: 0 0 auto; z-index: var(--z-header);
  height: var(--header-h-top);
  color: var(--snow);
  border-bottom: 1px solid transparent;
  transition: background-color 320ms var(--ease-quart), border-color 320ms var(--ease-quart), color 320ms var(--ease-quart), box-shadow 320ms var(--ease-quart);
}
.site-header:not([data-compact="true"]) { display: none; }
.site-header[data-compact="true"] {
  position: fixed; height: var(--header-h);
  /* Always dark, over light sections too (owner, 14 Oct: the light header's grey buttons and its badge read "mid
     fidelity"): the bar is the brand's #111 glass, dense enough to stay dark over white, so the header keeps one look
     and one set of buttons. */
  background: rgb(17 17 17 / 0.88);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  border-bottom-color: var(--line-on-dark);
  box-shadow: 0 16px 40px -24px oklch(0 0 0 / 0.6);
}
.site-header[data-motion="in"] { animation: header-in 560ms var(--ease-out); }
.site-header[data-motion="out"] { animation: header-out 300ms var(--ease-quart) forwards; }
@keyframes header-in { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes header-out { to { transform: translateY(-100%); } }
@media (prefers-reduced-motion: reduce) { .site-header[data-motion] { animation: none; } }
.site-header__inner {
  height: 100%; max-width: calc(1440px + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 24px;
}
@media (min-width: 1024px) {
  .site-header__inner { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); }
  .site-header__actions { justify-self: end; }
}
.logo { display: block; flex: none; width: 136px; position: relative; opacity: 0; filter: blur(6px); transform: translateY(-4px); pointer-events: none; transition: opacity 420ms var(--ease-out), filter 420ms var(--ease-out), transform 420ms var(--ease-out); }
.site-header[data-compact="true"] .logo { opacity: 1; filter: blur(0); transform: none; pointer-events: auto; }
.logo__img { width: 100%; height: auto; transition: opacity 320ms var(--ease-quart); }
.nav { display: none; gap: clamp(18px, 2.2vw, 30px); margin-inline: auto; }
.nav a, .nav__soon { white-space: nowrap; } /* at 1024 (an upright iPad Pro) the links broke onto two lines */
.nav a { font-size: 0.9375rem; text-decoration: none; opacity: 0.78; padding: 10px 0; transition: opacity 180ms; }
.nav a:hover { opacity: 1; }
.nav__soon { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; padding: 10px 0; opacity: 0.6; cursor: default; }
/* "Coming soon" (owner, 14 Oct: the live demo is not ready): a soft tag in the colour of the words beside it, filled,
   with no outline and in sentence case (the outlined capitals read "mid fidelity"); the item it marks is not a link. */
.soon {
  display: inline-block; padding: 3px 8px; border-radius: 6px;
  font-size: 0.75rem; font-weight: 400; line-height: 1.35; letter-spacing: 0.01em; white-space: nowrap;
  background: color-mix(in oklab, currentColor 12%, transparent);
}
.icon--out { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.site-header__actions { display: flex; gap: 8px; margin-left: auto; align-items: center; }
.site-header .btn { --btn-h: 38px; padding: 0 14px; font-size: 0.8125rem; }
@media (pointer: coarse) { .site-header .btn { --btn-h: 44px; } }
.site-header .btn--whatsapp { display: none; width: 38px; padding: 0; }
@media (min-width: 1024px) { .site-header .btn--whatsapp { display: inline-flex; } }
/* phones: a menu for the links (the WhatsApp button floats in the corner by then) */
.menu-btn { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: var(--radius); border: 0; background-color: var(--ghost-fill); background-image: var(--ghost-sheen); box-shadow: var(--ring); color: inherit; cursor: pointer; }
@media (min-width: 1024px) { .menu-btn { display: none; } }
.menu {
  position: fixed; inset: calc(var(--header-h) + 8px) 12px auto auto; margin: 0; width: min(320px, calc(100vw - 24px));
  padding: 10px; display: none; gap: 10px;
  color: var(--snow); background: oklch(0.14 0 0 / 0.9);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid oklch(1 0 0 / 0.14); border-radius: var(--radius-l);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.08), 0 30px 60px -20px #000;
}
.menu:popover-open { display: grid; }
.menu__nav { display: grid; }
.menu__nav a { display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 12px; border-radius: var(--radius); text-decoration: none; font-size: 1.0625rem; }
.menu__nav a:hover { background: oklch(1 0 0 / 0.06); }
.menu__soon { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; font-size: 1.0625rem; color: var(--snow-2); }
@media (prefers-reduced-motion: no-preference) {
  .menu:popover-open { animation: menu-in 260ms var(--ease-out); }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
.site-header .btn--whatsapp .btn__label { display: none; }
.site-header .btn--ghost { color: inherit; }
.show-wide { display: none; }
@media (min-width: 1024px) {
  .nav { display: flex; }
  .logo { width: 150px; }
  .site-header__actions { margin-left: 0; }
}
@media (min-width: 1280px) {
  .site-header .btn--whatsapp { width: auto; padding: 0 16px; }
  .site-header .btn--whatsapp .btn__label { display: inline; }
}
@media (min-width: 600px) { .show-wide { display: inline; } .show-narrow { display: none; } }

/* ------------------------------------------------------------ §1 hero */
/* Built on rules, not spacing (owner, 15 Oct; worked out in hero-lab.html). The wordmark at the top and the words at
   the foot are laid out first; the band between is a size container and the ring is sized from it, its body filling
   the band and its reflection running on beneath the headline (owner: "the ring can't be just a row … the whole point
   is to flow beneath the text"). Over the loop the ring turns inside 32-68% of the frame's width and 13-42.4% of its
   height (its floor at 42.4%). On desktop its turning space runs from the wordmark's top (--rise) to a floor 12px above
   the headline (--sink), as the live page's ring did (owner: its size and the gap to the wordmark "look good"); both
   are measured by hifi.js. The film's own black is the page's (#111111); no overlay. */
.hero {
  position: relative; isolation: isolate;
  /* a little short of the screen, so the top of the next section always shows beneath it and says the page goes on
     (owner, 16 Oct: a visitor didn't know it scrolled; "usually I make the hero section like 95% of the viewport") */
  min-height: 95svh;
  background: var(--black);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  overflow: hidden;
  --band-min: 130px;
}
@media (min-width: 768px) { .hero { --band-min: 200px; } }
.hero__spacer { flex: 1 1 0; } /* takes what the band doesn't, once the band has reached its height */
/* and as much again below, so on a tall screen (an iPad upright) the hero's contents sit centred, not low (owner,
   15 Oct); while the band is still growing, both are nothing */
.hero::after { content: ""; flex: 1 1 0; }
.hero__mast { position: relative; z-index: 1; display: grid; justify-items: center; gap: clamp(10px, 1.6svh, 18px); padding-top: clamp(20px, 5svh, 88px); }
.hero__logo { width: clamp(140px, min(46vw, 24svh), 260px); height: auto; }
@media (min-width: 768px) {
  .hero__mast { padding-top: clamp(72px, 14vh, 150px); }
  /* Upright tablets: the ring has its full height and there is room to spare, so the foot gets the same margin as
     the wordmark's top and the spare splits evenly (.hero::after); the hero's contents sit centred (owner, 15 Oct) */
  @media (max-aspect-ratio: 4/5) { .hero .hero__content { padding-bottom: clamp(72px, 14vh, 150px); } }
  .hero__logo { width: clamp(176px, 46vw, 260px); }
}
/* a zero basis: with 'auto', Chromium gave the ring a 0 height to size from */
.hero__band {
  position: relative; flex: 1000 1 0; align-self: stretch; min-height: var(--band-min);
  container-type: size; pointer-events: none;
  --ring-max: min(92cqw, 600px); --film-w: min(calc(100cqh * 5.58), calc(var(--ring-max) / 0.36)); --film-h: calc(var(--film-w) * 0.5625);
  /* on a tall screen the width cap binds first: the band stops at what the capped ring needs, and the spare goes
     above the wordmark, so the wordmark and ring come down together */
  max-height: calc(var(--ring-cap) * 0.46 + 28px); --ring-cap: min(92vw, 600px);
}
@media (min-width: 768px) {
  .hero__band { --ring-cap: min(52vw, 740px); --ring-max: min(60cqw, 780px); --film-w: min(calc((100cqh + var(--rise, 0px) + var(--sink, 0px)) * 6.05), calc(var(--ring-max) / 0.36)); }
}
.hero__film {
  position: absolute; left: 50%; translate: -50% 0;
  top: calc(100cqh + var(--sink, 0px) - var(--film-h) * 0.424);
  width: var(--film-w); aspect-ratio: 16 / 9;
  /* The charcoal film's ground decodes to #111111, the page's own, but browsers colour-manage video their own way:
     as a safety net every edge feathers into the page, so no box edge can ever show. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 88%, transparent 100%), linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 88%, transparent 100%), linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect;
}
.hero__video { display: block; width: 100%; height: 100%; object-fit: fill; background: var(--black); }
.film-toggle {
  position: absolute; right: var(--gutter); bottom: 12px; z-index: 1;
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: var(--radius);
  background-color: var(--ghost-fill); background-image: var(--ghost-sheen); box-shadow: var(--ring);
  color: var(--snow-2); cursor: pointer;
  transition: color 180ms, background-color 180ms;
}
/* the hero's pause control: its bottom-right corner, level with the foot line (owner, 15 Oct), phones too (16 Oct:
   every section's pause control in the same corner; the top right of the ring "a bit weird and a bit dominant") */
.hero > .film-toggle { z-index: 2; pointer-events: auto; top: auto; bottom: var(--toggle-b, clamp(56px, 9vh, 104px)); }
/* on a phone the foot's lines run nearly edge to edge, so the control sits beneath them, in the hero's own corner */
@media (max-width: 767px) {
  .hero > .film-toggle { bottom: 10px; }
  .hero .hero__content { padding-bottom: 64px; }
}
.film-toggle:hover { color: var(--snow); background-color: rgb(237 239 238 / 0.08); }
.film-toggle svg { width: 14px; height: 14px; }

/* the words: their last line in the faint top of the blur at the foot of the screen, where it is under a pixel
   (20px lower, owner, 15 Oct: so the diamond has a little room at rest) */
.hero__content { position: relative; z-index: 1; display: grid; justify-items: center; gap: clamp(14px, 2.6svh, 30px); padding-top: clamp(8px, 2svh, 24px); padding-bottom: calc(clamp(56px, 9vh, 104px) - 12px); }
.hero__words { display: grid; justify-items: center; }
/* The words cross the ring's lower half and reflection. Rather than an overlay, a soft halo of the page's black hugs
   the letters only, enough to keep thin type legible over bright metal and nothing more. */
.hero__words { filter: drop-shadow(0 0 6px rgb(17 17 17 / 0.85)) drop-shadow(0 0 22px rgb(17 17 17 / 0.75)); }
.hero .kicker { color: var(--snow); }
.hero .kicker { display: flex; align-items: center; justify-content: center; gap: 12px; }
/* WooCommerce by name, not logo (its trademark guidelines: the logo needs a licence; 16 Oct 2026); the ® small and raised */
.hero .kicker .reg { font-size: 0.7em; vertical-align: 0.45em; letter-spacing: 0; margin-left: 0.08em; }
.hero .display { font-size: min(var(--step-hero), 5.25rem, 8.6svh); }
/* Type (owner, 15 Oct): the hero's headline is Aeonik Thin, everything else in it Light. Line 2 is a step brighter
   than the page's other second lines. A soft field of the page's black sits behind the words: an ellipse densest
   under the headline, fading to nothing, so it reads as the floor falling into shadow, not a box. */
.hero .display, .hero .display span { font-weight: 200; }
.hero :is(.kicker, .hero__sub, .btn, .btn__t, .hero__offer) { font-weight: 300; }
.hero .two-tone .tone-2 { background-image: linear-gradient(oklch(0.84 0.018 155), oklch(0.7 0.016 155)); }
.hero__content::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 0; translate: -50% 0; width: min(1100px, 130vw); height: 100%;
  background: radial-gradient(closest-side, rgb(17 17 17 / var(--field, 0.9)) 0%, rgb(17 17 17 / calc(var(--field, 0.9) * 0.75)) 45%, rgb(17 17 17 / 0) 100%);
}
/* the sub-line: two sentences, two lines (the break is in the text); on phones the first wraps into two */
.hero__sub { margin: clamp(10px, 1.6svh, 18px) auto 0; max-width: 24em; font-size: min(clamp(1rem, 0.92rem + 0.4vw, 1.25rem), 2.7svh); line-height: 1.4; color: var(--snow-2); text-wrap: balance; white-space: pre-line; }

/* as in the owner's Paper frame: the buttons share the 525px column equally; on phones side by side, short labels */
.hero__act { display: grid; justify-items: center; width: min(525px, 100%); }
.hero__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; justify-self: stretch; }
.hero__buttons .btn { flex: 1 1 0; padding-inline: 22px; }
.hero__buttons .icon { width: 20px; height: 20px; }
@media (max-width: 599px) { .hero__buttons .btn { padding-inline: 12px; } }

/* the foot (owner, 15 Oct): the offer in one line, a link to its terms; the launch beneath */
.hero__foot { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: clamp(0px, 0.6svh, 8px); color: var(--snow-2); }
.hero__offer {
  display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px;
  font-size: 0.9375rem; letter-spacing: 0; text-transform: none; color: var(--snow);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 1px;
  transition: text-decoration-color 180ms ease;
}
@media (hover: hover) and (pointer: fine) { .hero__offer:hover { text-decoration-color: oklch(1 0 0 / 0.4); } }
.hero__dot { color: var(--snow-3); }
.hero__left { display: inline-flex; align-items: center; gap: 9px; }
.hero__left .bi--live { margin: 0; color: var(--alert); box-shadow: 0 0 10px oklch(0.87 0.16 92 / 0.55); }
@media (max-width: 600px) { .hero__dot { display: none; } .hero__offer { flex-direction: column; } }
.nw { white-space: nowrap; }

/* Hero entrance (owner, 15 Oct: the wordmark first on its own, then "Only on WooCommerce", then the ring, then the
   rest): the wordmark resolves out of a blur (0.15 s); the WooCommerce line (0.75 s); the ring comes out of the dark
   and into focus (1.35 s); then the headline, the sub-line, the buttons and the foot, each out of a blur, in order. Default state is visible; under
   reduced motion it all simply appears. */
@media (prefers-reduced-motion: no-preference) {
  .hero-in { animation: resolve-in 1100ms var(--ease-out) both; animation-delay: var(--d, 0ms); }
  .hero__logo.hero-in { animation: mark-in 1500ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--d, 0ms); }
  /* the eyebrow resolves in place too, as the wordmark does: no rise (owner, 14 Oct) */
  .hero .kicker.hero-in { animation: mark-in 1200ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--d, 0ms); }
  .hero__film { animation: film-in 2600ms cubic-bezier(0.22, 1, 0.36, 1) 1350ms both; }
}
@keyframes mark-in {
  from { opacity: 0; filter: blur(12px); transform: scale(0.97); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes resolve-in {
  from { opacity: 0; filter: blur(14px); transform: translateY(14px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes film-in {
  from { opacity: 0; filter: blur(22px); scale: 1.06; }
  60% { opacity: 1; }
  to { opacity: 1; filter: blur(0); scale: 1; }
}

/* ------------------------------------------------------------ sections */
.section { --pad-top: clamp(88px, 12vw, 168px); position: relative; padding-block: clamp(88px, 12vw, 168px); }
/* A link to a section (the nav's, the footer's) lands halfway into its top padding, not above all of it (owner, 16 Oct) */
.section[id] { scroll-margin-top: calc(var(--pad-top) / -2); }
.section--dark { background: var(--night); color: var(--snow); }
.section--light { background: var(--paper); color: var(--ink); }
.section--dark + .section--dark { border-top: 1px solid var(--line-on-dark); }

.split-head { display: grid; gap: 20px; margin-bottom: clamp(40px, 6vw, 72px); }
@media (min-width: 1024px) {
  .split-head { grid-template-columns: 1fr minmax(0, 380px); align-items: end; gap: 64px; }
}

/* Reveal on scroll (owner, like MotorK): each element fades and rises once, as it arrives, in reading order within
   its section. No blur of its own: the veil at the foot of the viewport already carries everything up out of focus
   (owner, 13 Oct). The hidden start state only applies under .js-reveal (set in the head when the browser can
   observe and motion is welcome), so without it everything is simply there. */
.js-reveal [data-reveal] {
  opacity: 0; transform: translateY(32px);
  transition: opacity 900ms var(--ease-out), transform 1100ms var(--ease-out);
  transition-delay: var(--rd, 0ms);
}
.js-reveal .two-tone[data-reveal] { opacity: 1; transform: none; }
.js-reveal .two-tone[data-reveal] > span {
  opacity: 0; transform: translateY(32px);
  transition: opacity 900ms var(--ease-out), transform 1100ms var(--ease-out);
  transition-delay: var(--rd, 0ms);
}
.js-reveal .two-tone[data-reveal] > .tone-2 { transition-delay: calc(var(--rd, 0ms) + 110ms); }
/* large blocks (the reel, the shops, the ring viewer) rise further */
.js-reveal .search__reel[data-reveal], .js-reveal .website__show[data-reveal], .js-reveal .films__viewer[data-reveal],
.js-reveal .feed__stage[data-reveal] {
  transform: translateY(56px) scale(0.985);
}
.js-reveal [data-reveal].is-in, .js-reveal .two-tone[data-reveal].is-in > span { opacity: 1; transform: none; }

/* ------------------------------------------------------------ the veil: the foot of the viewport stays soft */
/* Six bands of backdrop blur, each masked to its own slice, so the blur deepens smoothly toward the edge (one
   blur under one gradient mask would show a hard step). It sits over the page but under the header and the
   WhatsApp button. It slides away when the footer arrives: hiding it with opacity would switch the blur off
   at once (an element with opacity below 1 is a backdrop root). */
.veil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-veil);
  height: clamp(56px, 9vh, 104px); pointer-events: none;
  transition: transform 600ms var(--ease-out);
}
.veil[data-away="true"] { transform: translateY(100%); }
.veil > i { position: absolute; inset: 0; }
.veil > i:nth-child(1) { --b: 0.5px; --m: transparent 0%, #000 16.7%, #000 33.3%, transparent 50%; }
.veil > i:nth-child(2) { --b: 1px; --m: transparent 16.7%, #000 33.3%, #000 50%, transparent 66.7%; }
.veil > i:nth-child(3) { --b: 2px; --m: transparent 33.3%, #000 50%, #000 66.7%, transparent 83.3%; }
.veil > i:nth-child(4) { --b: 4px; --m: transparent 50%, #000 66.7%, #000 83.3%, transparent 100%; }
.veil > i:nth-child(5) { --b: 8px; --m: transparent 66.7%, #000 83.3%, #000 100%; }
.veil > i:nth-child(6) { --b: 16px; --m: transparent 83.3%, #000 100%; }
.veil > i {
  -webkit-backdrop-filter: blur(var(--b)); backdrop-filter: blur(var(--b));
  -webkit-mask-image: linear-gradient(to bottom, var(--m)); mask-image: linear-gradient(to bottom, var(--m));
}

/* ------------------------------------------------------------ §2 the product, straight away */
/* Copy on the left, the jeweller's site on the right, turned towards the reader in perspective and running off the
   right edge (the owner's layout). The site is the signed-off ring-page film: three phones, then the desktop page
   (showcase-film.js / .css; its stage sizes itself). */
.showcase { background: #fff; overflow-x: clip; }
.showcase__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vw, 56px); align-items: center; }
/* the film's stage sizes itself from its column, so the column must never grow to fit the stage */
.showcase__stagecol { display: grid; gap: clamp(16px, 2.4vh, 28px); min-width: 0; }
.showcase .md-space { min-width: 0; width: 100%; }
/* The device switch, beside the demo link: a flat segmented control (a pale track, the chosen device on a white
   face with a hairline), each with its icon, so it reads as a control without shouting. */
.showcase .md-switch {
  display: inline-flex; gap: 2px; margin: 0; padding: 3px;
  border-radius: 999px; background: #EDEFEE; box-shadow: inset 0 0 0 1px rgb(17 17 17 / 0.06);
}
.showcase .md-switch button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 14px;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink-3);
  font: 400 0.875rem/1 var(--font-sans); letter-spacing: 0.005em; text-decoration: none; cursor: pointer;
  transition: background-color 220ms var(--ease-quart), color 220ms var(--ease-quart), box-shadow 220ms var(--ease-quart);
}
.showcase .md-switch button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.showcase .md-switch button[aria-pressed='true'] { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px rgb(17 17 17 / 0.1); }
@media (hover: hover) and (pointer: fine) { .showcase .md-switch button[aria-pressed='false']:hover { color: var(--ink); } }
.showcase .md-switch button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* the figure's source: a footnote at the section's foot */
.showcase__foot { position: relative; z-index: 1; /* over the film's soft lower margin */ margin-top: clamp(28px, 4vh, 48px); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.showcase__foot .md-toggle { position: static; flex: none; translate: none; }
.showcase__source { margin: 0; font-size: 0.75rem; line-height: 1.5; color: var(--ink-3); max-width: 70ch; }
.showcase__copy { display: grid; gap: 18px; justify-items: start; }
.showcase__copy .headline { max-width: 12ch; }

/* the figure's source: an asterisk on the claim, the citation under the action */
.cite { margin-left: 1px; color: inherit; text-decoration: none; font-weight: 400; }
.cite:hover { text-decoration: underline; }
.showcase__source a { color: inherit; text-underline-offset: 2px; }
/* The live demo waits (owner, 14 Oct: "it's not ready"): a quiet line, badged, where its button was; the device switch,
   the film's control, sits under it. */
.showcase__soon { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 0.9375rem; color: var(--ink-3); }
.showcase__act { display: grid; justify-items: start; gap: 18px; margin-top: 10px; }
/* Stacked (phones, tablets): everything centred, the film's phones too (the script), the actions full width
   (owner, 14 Oct: "the page doesn't hold together … centralise everything"). */
@media (max-width: 1023px) {
  .showcase__copy { justify-items: center; text-align: center; }
  .showcase__copy .badge-label { justify-self: center; }
  .showcase__copy .headline { margin-inline: auto; }
  .showcase__body { margin-inline: auto; }
  .showcase__act { justify-items: stretch; width: 100%; max-width: 480px; justify-self: center; }
  .showcase__soon { justify-content: center; }
  .showcase .md-switch { display: flex; width: 100%; }
  .showcase .md-switch button { flex: 1 1 0; justify-content: center; }
  .showcase__foot { justify-content: center; text-align: center; }
}
@media (min-width: 1024px) {
  .showcase__grid { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(40px, 4vw, 72px); }
}

/* ------------------------------------------------------------ §2 the search */
.search { padding-bottom: clamp(40px, 6vw, 96px); }
.search__head { display: grid; gap: 18px; justify-items: center; text-align: center; }
.search__body { margin-inline: auto; }
.search__reel { display: block; width: 100%; max-width: 1040px; margin-inline: auto; --nl-reel-ground: var(--paper); }
/* At full size nothing in the reel ever draws above 116px (sampled over a whole loop, camera lean included):
   clip the top 72px and pull the reel up by it, so the animation sits right under the head (owner: no gap). */
@media (min-width: 1200px) { .search__reel { margin-top: -72px; clip-path: inset(72px 0 0 0); } }

/* ------------------------------------------------------------ §3 on your website */
.website {
  background:
    radial-gradient(60% 40% at 50% 100%, oklch(0.2 0 0) 0%, transparent 70%),
    var(--night);
}
.website__lens { display: block; }

/* ------------------------------------------------------------ the diamond feed */
/* The ground is the diamond film's own #F6F6F6, so the film has no edge; the stone floats on a soft shadow. */
.feed { background: #F6F6F6; }
.feed__head { display: grid; gap: 18px; justify-items: center; text-align: center; }
.feed__body { margin-inline: auto; }
.feed__stage { display: grid; justify-items: center; margin-top: clamp(44px, 5vw, 64px); }
/* The diamond blends with its own ground (isolated, painted #F6F6F6), not with whatever is behind the section: while
   the section fades in, it is its own layer, and a blend reaching past it found nothing and showed the film's pale
   square for the first seconds (owner, 14 Oct). Now the square never shows, mid-fade or after. */
.feed__media { position: relative; width: clamp(240px, 34vw, 440px); isolation: isolate; background: #F6F6F6; }
/* the ground reaches past the stone's float (it rises 14px) so its top edge never leaves it and shows a pale strip */
.feed__media::before { content: ""; position: absolute; inset: -20px -24px 0; z-index: -1; background: #F6F6F6; }
/* Browsers draw the film's ground a shade or two off its true #F6F6F6 (Chrome: #F8F8F8), which would show as a pale
   square. Darken keeps whichever is darker, so the ground melts into the section and the stone is untouched (it
   sits on the float, the element that makes its own layer). */
.feed__float { aspect-ratio: 1; mix-blend-mode: darken; }
.feed__video { display: block; width: 100%; height: 100%; object-fit: cover; background: #F6F6F6; }
.feed__shadow { display: block; width: 52%; height: 24px; margin: -4px auto 0; background: radial-gradient(closest-side, oklch(0 0 0 / 0.17), transparent); filter: blur(5px); }
@media (prefers-reduced-motion: no-preference) {
  .feed__float { animation: float 6.4s ease-in-out infinite; }
  .feed__shadow { animation: float-shadow 6.4s ease-in-out infinite; }
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes float-shadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.84); opacity: 0.65; } }
/* Every section with motion has one pause control (WCAG 2.2.2), the same one, at the bottom right of its content
   (owner, 16 Oct: "all the same size", "the bottom right-hand corner of all of the sections"); on light grounds it is
   white with a hairline. */
.film-toggle.film-toggle--light {
  background-color: #fff; color: var(--ink-3);
  box-shadow: var(--ring-light);
}
.film-toggle.film-toggle--light:hover { color: var(--ink); background-color: #fff; }
.pause-foot { display: flex; justify-content: flex-end; margin-top: clamp(28px, 4vh, 48px); }
.pause-foot .film-toggle { position: static; flex: none; }

/* ------------------------------------------------------------ §5 beauty score: the loud one */
.beauty {
  background:
    radial-gradient(55% 45% at 50% 52%, oklch(0.22 0 0) 0%, transparent 72%),
    var(--black);
}
.beauty__head { display: grid; gap: 16px; justify-items: center; text-align: center; margin-bottom: clamp(48px, 7vw, 88px); }
.beauty__body { margin-inline: auto; max-width: 48ch; text-wrap: balance; }
/* The duel: the two scores face each other across a spine of grade names, over one mirrored certificate; everything
   leans toward the spine, so the two stones read as a pair. Three columns throughout (the spine fixed), so a score
   sits over its own stone's grades. */
.duel { --spine: clamp(76px, 18vw, 136px); display: grid; justify-items: center; max-width: 820px; }
.duel__scores { display: grid; grid-template-columns: 1fr var(--spine) 1fr; width: 100%; }
.duel .score { display: grid; gap: 8px; justify-items: end; text-align: right; }
.duel .score--high { grid-column: 3; justify-items: start; text-align: left; }
.score__tier { font-size: 0.9375rem; color: var(--snow-2); }
.score--high .score__tier { color: var(--snow); }
.duel__cert { width: 100%; margin-top: clamp(32px, 4.5vw, 52px); border-collapse: collapse; table-layout: fixed; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.duel__spine { width: var(--spine); }
.duel__cert caption { padding-bottom: 14px; font-size: 0.8125rem; letter-spacing: 0.01em; color: var(--snow-2); }
.duel__cert td, .duel__cert th { padding: 13px 0; border-top: 1px solid var(--line-on-dark); white-space: nowrap; }
.duel__cert tr:last-child > * { border-bottom: 1px solid var(--line-on-dark); }
.duel__cert th { font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.02em; color: var(--snow-2); text-align: center; }
.duel__cert td:first-child { text-align: right; }
.duel__cert td:last-child { text-align: left; }
/* what a grade costs, on the outer side of its value */
.cost { display: inline-block; font-size: 0.8125rem; color: var(--snow-3); }
.duel__cert td:first-child .cost { margin-right: 10px; }
.duel__cert td:last-child .cost { margin-left: 10px; }
.cost--gold { font-weight: 400; background-image: linear-gradient(oklch(0.93 0.11 95), oklch(0.8 0.13 82)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.js-reveal .duel__cert .cost { opacity: 0; transition: opacity 700ms var(--ease-out) calc(var(--rd, 0ms) + 900ms); }
.js-reveal .duel__cert.is-in .cost { opacity: 1; }
/* the duel speaks for itself: the headline and its one line sit above it, only the fine print below (owner, 16 Oct:
   "so you're not seeing stacks of paragraphs"; the line "The certificate barely tells them apart. The score does." went) */
.duel__note { margin-top: clamp(20px, 3vw, 28px); text-align: center; text-wrap: balance; max-width: 46ch; }
@media (max-width: 599px) {
  .duel { --spine: 72px; }
  .duel .score__value { font-size: min(var(--step-score), 17vw); }
  .duel__cert { font-size: 0.9375rem; }
}
/* Thin: before go-live the owner's Mac drew 300 in its installed Aeonik Air, and the served Light read heavier; Thin
   is the nearest cut licensed for the web (16 Oct) */
.score__value { font-size: var(--step-score); font-weight: 200; line-height: 0.9; letter-spacing: -0.05em; color: var(--snow-3); white-space: nowrap; }
/* the star a step smaller than the numerals (they are hairline-thin, the star is solid), centred on their height */
.score__value .star { font-size: 0.6em; vertical-align: 0.24em; letter-spacing: 0; margin-right: -0.04em; }
.score__value { background-image: var(--hl-2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.score--high .score__value { background-image: var(--hl-1); }
.score__value .star { color: oklch(0.6 0.015 155); -webkit-text-fill-color: oklch(0.6 0.015 155); }
.score--high .score__value .star { color: var(--snow); -webkit-text-fill-color: var(--snow); }
/* The scores' counter (hifi.js builds it): each digit is a window onto a strip of digits. The strip rests on its
   final digit; only while the reveal is still to come does it wait at 0, and it rolls with the reveal, for a time in
   proportion to the score, on the page's ease-out. The better stone's star is lit as its number lands. */
.score__value.has-roll { background-image: none; }
.roll { display: inline-flex; vertical-align: top; } /* hung from the line's top, so the line keeps its own height */
/* Each window runs from 0.06em above the line to 0.04em below it, measured to the digits (they sit 0.144-0.856em down
   the 0.9em line, Aeonik Extralight), so its edges can fade the passing digits in and out, like a drum, without
   touching the digit at rest or reaching the words beneath. Each cell keeps the line's baseline and gradient. */
.roll__col {
  position: relative; display: inline-block; vertical-align: top; height: 1em; margin: -0.06em 0 -0.04em; overflow: hidden;
  /* room either side, given back by the margins: the tight tracking makes a digit's box narrower than its ink, and the
     window (and the gradient, which paints only inside a box) shaved the right of the 5 in 75 (owner, 15 Oct) */
  padding-inline: 0.12em; margin-inline: -0.12em;
  -webkit-mask-image: linear-gradient(transparent, #000 0.18em, #000 0.93em, transparent);
  mask-image: linear-gradient(transparent, #000 0.18em, #000 0.93em, transparent);
}
.roll__fit { visibility: hidden; }
.roll__strip { position: absolute; left: 50%; top: 0; display: grid; justify-items: center; translate: -50% 0; transform: translateY(calc(var(--n) * -1em)); }
.roll__strip > span {
  height: 1em; line-height: 1.02em; padding-inline: 0.12em;
  background: var(--hl-2) 0 0.06em / 100% 0.9em no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent;
}
.score--high .roll__strip > span { background-image: var(--hl-1); }
.js-reveal .score:not(.is-in) .roll__strip { transform: none; }
.js-reveal .score.is-in .roll__strip { transition: transform var(--roll-ms) var(--ease-out) calc(var(--rd, 0ms) + 250ms); }
.js-reveal .score--high:not(.is-in) .star { color: oklch(0.6 0.015 155); -webkit-text-fill-color: oklch(0.6 0.015 155); }
.js-reveal .score--high.is-in .star { transition: color 600ms ease, -webkit-text-fill-color 600ms ease; transition-delay: calc(var(--rd, 0ms) + 250ms + var(--roll-ms) * 0.5); }

/* ------------------------------------------------------------ §6 ring films */
.films { --pad-top: clamp(104px, 14vw, 220px); padding-block: clamp(104px, 14vw, 220px); }
.films .wrap--wide { max-width: calc(800px + var(--gutter) * 2); }
.films .split-head { position: relative; z-index: 1; margin-bottom: clamp(8px, 1.5vw, 16px); }
.films__offer { display: grid; gap: 6px; }
.films__free { font-size: var(--step-h3); font-weight: 300; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); }
/* The viewer's frame is empty for its top ~170px (the ring sits low in it), so it tucks up under the heading
   (owner, 14 Oct: "the gap's a bit big"); the frame is the section's own #F8F8F8, so the overlap never shows. */
.films__viewer { display: block; margin-top: clamp(-80px, -6vw, 0px); }

/* ------------------------------------------------------------ §7 pricing */
.pricing { background: var(--night); }
.pricing .headline { margin-bottom: clamp(40px, 6vw, 72px); }
.plans { display: grid; gap: 16px; }
.plan {
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(24px, 3vw, 40px);
  border: 0; border-radius: var(--radius-l);
  background-color: rgb(237 239 238 / 0.025); background-image: var(--ghost-sheen);
  box-shadow: var(--ring), var(--lift-dark);
}
/* Flagship is the plan every founder is on, so it is the one lit card (owner, 14 Oct: "how can we make the flagship
   plan stand out more?"; then, of the white card: "I want it to feel special, not inverted"). It stays dark, in the
   founders' material, with a faint bloom of the same light above it and the section's one filled button. On a phone
   it leads. (The 1px rim is a real border, so the padding gives that pixel back and both cards keep one size.) */
.plan--flagship {
  padding: calc(clamp(24px, 3vw, 40px) - 1px);
  border: 1px solid transparent;
  background: var(--lit-pool) padding-box, var(--lit-ground) padding-box, var(--lit-rim) border-box;
  box-shadow: 0 -24px 64px -36px oklch(0.85 0.03 155 / 0.35), 0 2px 4px oklch(0 0 0 / 0.5), 0 40px 80px -32px #000;
}
.plan--flagship .plan__name { background-image: linear-gradient(oklch(0.84 0.018 155), oklch(0.7 0.016 155)); }
.plan--flagship .tag { color: var(--snow); background: oklch(0.34 0.02 150 / 0.24); box-shadow: inset 0 0 0 1px rgb(237 239 238 / 0.16); }
.plan--flagship .plan__list { border-top-color: oklch(0.9 0.02 155 / 0.14); }
@media (max-width: 899px) { .plan--flagship { order: -1; } }
.plan__head { display: grid; gap: 6px; }
.plan__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan__name { font-size: var(--step-h3); font-weight: 400; letter-spacing: -0.015em; }
.plan__blurb { color: var(--snow-2); font-size: 0.9375rem; }
.tag { font-size: 0.75rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; white-space: nowrap; background-color: rgb(237 239 238 / 0.06); background-image: var(--ghost-sheen); box-shadow: var(--ring); }
.plan__price { font-size: clamp(2.5rem, 2rem + 2vw, 3.25rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1; margin-top: 10px; }
.plan__price s { color: var(--snow-2); font-size: max(0.6em, 1.125rem); margin-right: 4px; }
.plan__price span { font-size: 1rem; color: var(--snow-2); letter-spacing: 0; }
.plan__setup { font-size: 0.9375rem; color: var(--snow-2); }
.plan__setup s { margin-right: 6px; color: var(--snow-2); }
.plan__list { list-style: none; padding: 18px 0 0; margin: 4px 0 8px; border-top: 1px solid var(--line-on-dark); display: grid; gap: 10px; flex: 1; align-content: start; }
.plan__list li { display: flex; gap: 12px; font-size: 0.9375rem; line-height: 1.4; }
.plan__list li::before { content: ""; flex: none; width: 12px; height: 7px; margin-top: 0.42em; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); opacity: 0.8; }
.plan__list .plan__lead { color: var(--snow-2); }
.plan__list .plan__lead::before { visibility: hidden; }
.pricing__fine { margin-top: 20px; text-align: center; font-size: 0.875rem; color: var(--snow-2); }
.pricing__notes { display: grid; gap: 20px; margin-top: clamp(32px, 4vw, 48px); font-size: 0.9375rem; color: var(--snow-2); }
.pricing__notes p:not(.micro) { color: var(--snow); max-width: 34ch; margin-top: 6px; }
@media (min-width: 900px) {
  .plans { grid-template-columns: 1fr 1fr; gap: 20px; }
  .pricing__notes { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------------ §8 faq */
.faq__grid { display: grid; gap: 40px; }
.faq__list { border-top: 1px solid var(--line-on-light); }
.qa { border-bottom: 1px solid var(--line-on-light); }
.qa summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  min-height: 64px; padding: 18px 0;
  font-size: 1.125rem; letter-spacing: -0.01em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
  transition: transform 300ms var(--ease-out);
}
.qa[open] summary::after { transform: rotate(45deg); }
.qa p { padding: 0 48px 24px 0; color: var(--ink-3); max-width: 60ch; font-size: 1.0625rem; }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .qa::details-content { block-size: 0; overflow: clip; transition: block-size 380ms var(--ease-out), content-visibility 380ms allow-discrete; }
  .qa[open]::details-content { block-size: auto; }
}
@media (min-width: 1024px) {
  .faq__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
  .faq__title { position: sticky; top: calc(var(--header-h) + 40px); }
}

/* ------------------------------------------------------------ §9 founding places */
.founding {
  background:
    radial-gradient(70% 60% at 20% 0%, oklch(0.2 0 0) 0%, transparent 65%),
    var(--black);
}
.founding__grid { display: grid; gap: 48px; }
.founding__copy { display: grid; gap: 32px; align-content: start; }
.slots { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-width: 420px; counter-reset: place; }
/* The ten places: an open one is an empty outline; a taken one is lit, in the Flagship's material (owner, 14 Oct: the
   white tiles had the white card's problem), so the six lit ones read as the founders already in. */
.slots li { counter-increment: place; aspect-ratio: 1; border: 1px solid oklch(1 0 0 / 0.14); border-radius: var(--radius-s); position: relative; }
.slots li::after { content: counter(place, decimal-leading-zero); position: absolute; left: 8px; bottom: 6px; font-size: 0.75rem; color: var(--snow-3); }
.slots li.is-taken { border-color: transparent; background: var(--lit-pool) padding-box, var(--lit-ground) padding-box, var(--lit-rim) border-box; }
.slots li.is-taken::after { color: var(--snow); }
.slots li.is-taken::before { content: ""; position: absolute; right: 8px; top: 9px; width: 9px; height: 5px; border-left: 1.5px solid var(--snow); border-bottom: 1.5px solid var(--snow); transform: rotate(-45deg); }
@media (min-width: 600px) { .slots { grid-template-columns: repeat(10, 1fr); max-width: 560px; } }
.ticks { list-style: none; padding: 0; display: grid; gap: 12px; font-size: 1.0625rem; }
.ticks li { display: flex; gap: 14px; }
.ticks li::before { content: ""; flex: none; width: 12px; height: 7px; margin-top: 0.4em; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); }
.join-form {
  display: grid; gap: 16px; align-content: start;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--line-on-dark); border-radius: var(--radius-l);
  background: oklch(1 0 0 / 0.035);
  box-shadow: var(--lift-dark);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.join-form__title { font-size: var(--step-h3); font-weight: 300; letter-spacing: -0.02em; margin-bottom: 4px; }
.join-form__fine, .join-form__person { font-size: 0.875rem; color: var(--snow-2); }
.join-form__person a { color: var(--snow); }
.field { display: grid; gap: 8px; font-size: 0.875rem; color: var(--snow-2); }
.field input {
  height: 52px; padding: 0 14px; font-size: 1rem; color: var(--snow);
  background: oklch(0 0 0 / 0.35); border: 1px solid oklch(1 0 0 / 0.18); border-radius: var(--radius);
  box-shadow: inset 0 2px 6px -2px oklch(0 0 0 / 0.6);
  transition: border-color 180ms var(--ease-quart), background-color 180ms var(--ease-quart);
}
.field input::placeholder { color: oklch(0.62 0 0); }
.field input:hover { border-color: oklch(1 0 0 / 0.3); }
.field input:focus { outline: none; border-color: var(--snow); background: oklch(0 0 0 / 0.5); }
.join-form.is-sent { text-align: left; }
@media (min-width: 1024px) {
  .founding__grid { grid-template-columns: 1fr minmax(0, 460px); gap: 80px; align-items: start; }
}

/* ------------------------------------------------------------ footer */
.site-footer { background: var(--black); color: var(--snow-2); border-top: 1px solid var(--line-on-dark); padding-block: 48px calc(48px + env(safe-area-inset-bottom)); font-size: 0.9375rem; }
.site-footer__grid { display: grid; gap: 24px; }
.site-footer__logo { width: 150px; height: auto; }
.site-footer__nav, .site-footer__contact { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer a { text-decoration: none; padding: 8px 0; }
.site-footer a:hover { color: var(--snow); }
.site-footer__fine { font-size: 0.8125rem; color: var(--snow-2); }
.site-footer__marks { margin-top: -12px; max-width: 72ch; } /* sits under the line above it, as one fine print */
@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: auto 1fr auto; align-items: center; gap: 48px; }
  .site-footer__nav { justify-content: center; }
  .site-footer__fine { grid-column: 1 / -1; }
  .site-footer__marks { margin-top: -36px; }
}


/* ------------------------------------------------------------ the sign-up sheet */
.sheet {
  padding: 0; border: 0; color: var(--snow); background: transparent;
  width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0;
}
.sheet::backdrop { background: oklch(0 0 0 / 0.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sheet__panel {
  position: absolute; inset: auto 0 0; max-height: 92svh; overflow: auto;
  padding: 28px 20px calc(28px + env(safe-area-inset-bottom));
  background: oklch(0.15 0 0 / 0.94);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  border-top: 1px solid oklch(1 0 0 / 0.16);
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  box-shadow: 0 -24px 60px -20px #000;
}
.sheet[open] .sheet__panel { animation: sheet-in 420ms var(--ease-out); }
.sheet[open]::backdrop { animation: fade-in 300ms var(--ease-quart); }
@keyframes sheet-in { from { transform: translateY(32px); opacity: 0; filter: blur(8px); } to { transform: none; opacity: 1; filter: blur(0); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sheet[open] .sheet__panel, .sheet[open]::backdrop { animation: none; } }
@media (min-width: 720px) {
  .sheet__panel { inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(520px, calc(100vw - 48px)); border: 1px solid oklch(1 0 0 / 0.16); border-radius: var(--radius-l); padding: 40px; box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.08), 0 48px 96px -32px #000; }
  @keyframes sheet-in { from { transform: translate(-50%, calc(-50% + 24px)); opacity: 0; filter: blur(8px); } to { transform: translate(-50%, -50%); opacity: 1; filter: blur(0); } }
}
.sheet__close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; border-radius: var(--radius); cursor: pointer; color: var(--snow-2); }
.sheet__close:hover { color: var(--snow); background: oklch(1 0 0 / 0.06); }
.step { display: grid; gap: 16px; }
.step[hidden] { display: none; }
.btn[hidden], .next-steps[hidden] { display: none; } /* .btn's own display beat the hidden attribute: the booking button showed to a shop not on WooCommerce */
.sheet__title { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); font-weight: 300; letter-spacing: -0.025em; line-height: 1.1; outline: none; padding-right: 40px; }
.sheet__fine { font-size: 0.8125rem; color: var(--snow-2); }
.field-error { font-size: 0.875rem; color: oklch(0.82 0.08 30); }
.field-error a { color: inherit; text-underline-offset: 2px; }
/* the spam trap: off screen for people, there for bots (Formspree drops anything that fills _gotcha) */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.choice { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.choice legend { font-size: 0.9375rem; margin-bottom: 10px; padding: 0; }
.choice__row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice label { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--radius); font-size: 0.9375rem; background-color: var(--ghost-fill); background-image: var(--ghost-sheen); box-shadow: var(--ring); transition: background-color 160ms; }
.choice input:checked + span { background-color: var(--btn-fill); background-image: var(--btn-sheen); box-shadow: inset 0 0 0 1.5px var(--snow); }
.choice input:focus-visible + span { outline: 2px solid var(--snow); outline-offset: 2px; }
.next-steps { list-style: none; padding: 0; display: grid; gap: 14px; font-size: 1.0625rem; }
.next-steps li { display: flex; gap: 14px; align-items: baseline; }
.next-steps span { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid oklch(1 0 0 / 0.3); border-radius: 50%; font-size: 0.8125rem; }
.sheet__notyet { color: var(--snow-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}