/* ==========================================================================
   BodyLeap marketing site. "Quiet Instrument", carried to the web.
   Dark is primary. Light is authored, not inverted.
   Jade is one signal: the meridian line, and whatever sits on it.
   No frameworks. This file is the design system.
   ========================================================================== */

/* ----- Tokens ----- */

:root {
  color-scheme: dark;

  /* Ink and text */
  --text: #F5F7FA;
  --muted: #9BA4B4;
  --faint: #828C9C;

  /* Grounds. The light passage: the page moves through a day. */
  --g-hero: #08090D;      /* pre-dawn */
  --g-promise: #090A0E;   /* the sky just before it */
  --g-reading: #0A0C10;   /* first light */
  --g-plan: #0B0D12;      /* morning */
  --g-range: #0C0F15;     /* midday */
  --g-day: #0E1118;       /* dusk band */
  --g-privacy: #06070B;   /* night */
  --g-faq: #090B10;       /* small hours */
  --g-close: #0B0D12;     /* dawn again */

  --surface: #12161E;
  --raised: #1A1F2A;

  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-soft: rgba(255, 255, 255, 0.055);

  /* The one accent */
  --jade: #6ADBBA;
  --jade-ink: #06251C;
  --jade-line: rgba(106, 219, 186, 0.42);
  --jade-halo: rgba(106, 219, 186, 0.15);

  /* Badge tiers, quoted from the app. Decorative hairlines only. */
  --tier-slate: #828C9C;
  --tier-bronze: #B87333;
  --tier-silver: #C0C8D4;
  --tier-gold: #E6A95C;
  --tier-jade: #6ADBBA;

  --shadow-phone: 0 32px 80px -36px rgba(0, 0, 0, 0.75);

  /* Layout */
  --frame: 1280px;
  --reading: 720px;
  --gutter: 16px;
  --rail-w: 64px;
  --mv-pad: clamp(5.5rem, 9vw, 8.5rem);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
}

html.light {
  color-scheme: light;

  --text: #16202E;
  --muted: #4E5A6B;
  --faint: #57616F;

  --g-hero: #F7F8FA;
  --g-promise: #F5F6F9;
  --g-reading: #F3F5F8;
  --g-plan: #F1F3F7;
  --g-range: #EEF1F5;
  --g-day: #E9EDF3;
  --g-privacy: #E4E8EF;
  --g-faq: #EFF2F6;
  --g-close: #F5F7FA;

  --surface: #FBFCFD;
  --raised: #EDF0F4;

  --hairline: rgba(16, 24, 36, 0.12);
  --hairline-soft: rgba(16, 24, 36, 0.075);

  --jade: #0A7B60;
  --jade-ink: #FFFFFF;
  --jade-line: rgba(10, 123, 96, 0.4);
  --jade-halo: rgba(10, 123, 96, 0.1);

  --tier-slate: #6B7484;
  --tier-bronze: #9A5C22;
  --tier-silver: #97A0AE;
  --tier-gold: #B87C2E;
  --tier-jade: #0A7B60;

  --shadow-phone: 0 28px 64px -36px rgba(18, 26, 40, 0.28);
}

/* Without JavaScript the theme still honours the OS preference.
   The .js class only exists when the inline script ran. */
@media (prefers-color-scheme: light) {
  html:not(.js) {
    color-scheme: light;
    --text: #16202E;
    --muted: #4E5A6B;
    --faint: #57616F;
    --g-hero: #F7F8FA;
    --g-promise: #F5F6F9;
    --g-reading: #F3F5F8;
    --g-plan: #F1F3F7;
    --g-range: #EEF1F5;
    --g-day: #E9EDF3;
    --g-privacy: #E4E8EF;
    --g-faq: #EFF2F6;
    --g-close: #F5F7FA;
    --surface: #FBFCFD;
    --raised: #EDF0F4;
    --hairline: rgba(16, 24, 36, 0.12);
    --hairline-soft: rgba(16, 24, 36, 0.075);
    --jade: #0A7B60;
    --jade-ink: #FFFFFF;
    --jade-line: rgba(10, 123, 96, 0.4);
    --jade-halo: rgba(10, 123, 96, 0.1);
    --tier-slate: #6B7484;
    --tier-bronze: #9A5C22;
    --tier-silver: #97A0AE;
    --tier-gold: #B87C2E;
    --tier-jade: #0A7B60;
    --shadow-phone: 0 28px 64px -36px rgba(18, 26, 40, 0.28);
  }
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 48px; }
}

/* ----- Base ----- */

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font);
  background: var(--g-reading);
  color: var(--text);
  font-size: 1.125rem;
  line-height: 1.7;
}
/* The homepage body matches the hero ground, so the transparent at-top
   header sits on one continuous surface. Subpages carry .page instead. */
body:not(.page) { background: var(--g-hero); }

img { display: block; max-width: 100%; height: auto; }

figure { min-width: 0; max-width: 100%; }

::selection { background: var(--jade); color: var(--jade-ink); }

[id] { scroll-margin-top: 6rem; }

a { color: inherit; }

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--surface); color: var(--text);
  padding: 0.75rem 1.25rem; z-index: 60; border-radius: 0 0 12px 0;
}
.skip:focus { left: 0; }

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

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

h1, h2, h3 { font-weight: 300; letter-spacing: -0.02em; text-wrap: balance; }

h1, h2, h3, .lede, .body-copy { overflow-wrap: break-word; }

h1 {
  font-size: clamp(2.75rem, 5.5vw, 4.75rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

h2 {
  font-size: clamp(2.125rem, 3.6vw, 3.125rem);
  line-height: 1.1;
}

p { text-wrap: pretty; }

.lede {
  font-size: clamp(1.1875rem, 1.7vw, 1.4375rem);
  line-height: 1.65;
  color: var(--muted);
  font-weight: 300;
  max-width: 36em;
}

.body-copy { color: var(--muted); font-weight: 300; max-width: 60ch; }

.eyebrow {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
}

/* The signature: a very large light numeral on a quiet field.
   Weight 300 per the design language's hero-numeral range. */
.numeral {
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 0.9;
  color: var(--text);
}

/* ----- Frame and the meridian rail ----- */

.frame {
  width: 100%;
  max-width: var(--frame);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Each movement is a grid: [rail][body]. The rail cell draws its own
   segment of the meridian; abutting segments read as one line. */
.mv { position: relative; }
.mv > .frame { display: grid; grid-template-columns: minmax(0, 1fr); }

.rail { display: none; position: relative; }

.mv-body { padding-block: var(--mv-pad); min-width: 0; }

@media (min-width: 1080px) {
  .mv > .frame { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .rail { display: block; }
  .rail::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 8px;
    width: 1px;
    background: var(--jade-line);
  }
  .rail::after {
    /* the node: one dot where the movement begins */
    content: "";
    position: absolute;
    left: 8px; top: calc(var(--mv-pad) + 0.55em);
    width: 7px; height: 7px;
    transform: translateX(-3px);
    border-radius: 50%;
    background: var(--jade);
  }
  .rail.rail-quiet::after { display: none; }
}

.rail-none::before,
.rail-none::after { display: none; }

/* The mark. One artwork, recoloured per theme through a mask. */
.mark {
  display: inline-block;
  flex: none;
  background: var(--jade);
  -webkit-mask: url("logo.svg") no-repeat center / contain;
  mask: url("logo.svg") no-repeat center / contain;
}
.mark-sm { width: 30px; height: 30px; }
.mark-lg { width: 76px; height: 76px; }

/* In the hero the meridian starts where the instrument appears.
   JS measures the exact y of .hero-visual into --rail-top; without JS
   the fallback lands close enough. */
.rail-hero::before { display: none; }
.rail-hero::after { display: none; }
@media (min-width: 1080px) {
  .rail-hero::before {
    display: block;
    top: var(--rail-top, calc(100% - 760px));
  }
  .rail-hero::after {
    display: block;
    top: var(--rail-top, calc(100% - 760px));
  }
}

/* On narrow screens the meridian collapses to a short tick above each h2. */
@media (max-width: 1079.98px) {
  .mv-body > h2::before,
  .mv-body .mv-head > h2::before,
  .mv-body .mv-head > h3::before {
    content: "";
    display: block;
    width: 22px; height: 1px;
    background: var(--jade);
    margin-bottom: 1.25rem;
  }
}

/* Movement grounds: the light passage. */
.mv-hero    { background: var(--g-hero); }
.mv-reading { background: var(--g-reading); }
.mv-plan    { background: var(--g-plan); }
.mv-range   { background: var(--g-range); }
.mv-day     { background: var(--g-day); border-block: 1px solid var(--hairline-soft); }
.mv-privacy { background: var(--g-privacy); }
.mv-faq     { background: var(--g-faq); border-top: 1px solid var(--hairline-soft); }
.mv-close   { background: var(--g-close); }

/* ----- Header ----- */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--g-hero);
  background: color-mix(in oklab, var(--g-hero) 80%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--hairline-soft);
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.site-header.is-hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}
/* The header owns the full width of the screen; the page content does not. */
.site-header .frame {
  max-width: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding-inline: clamp(20px, 3.5vw, 48px);
  padding-block: 1.25rem;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.75rem;
  text-decoration: none;
  font-size: 1.1875rem; font-weight: 500; letter-spacing: -0.01em;
}
.site-nav {
  display: flex; align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.375rem);
}
.site-nav > a:not(.nav-cta) {
  position: relative;
  text-decoration: none; color: var(--muted);
  font-size: 1rem; font-weight: 400;
  white-space: nowrap;
  padding-block: 0.3rem;
  transition: color 180ms ease-out;
}
.site-nav > a:not(.nav-cta):hover,
.site-nav > a:not(.nav-cta)[aria-current] { color: var(--text); }
/* A hairline that draws itself in under the link. */
.site-nav > a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--jade);
  transition: right 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.site-nav > a:not(.nav-cta):hover::after,
.site-nav > a:not(.nav-cta)[aria-current]::after { right: 0; }
@media (prefers-reduced-motion: reduce) {
  .site-nav > a:not(.nav-cta)::after { transition: none; }
}

/* The header's own call to action: one small jade pill. */
.nav-cta {
  display: inline-flex; align-items: center;
  background: var(--jade); color: var(--jade-ink);
  border-radius: 999px;
  padding: 0.5rem 1.125rem;
  font-size: 0.9375rem; font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms ease-out;
}
.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -10px var(--jade-line);
}
@media (max-width: 767.98px) {
  .site-nav > .nav-cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-cta { transition: none; }
  .nav-cta:hover { transform: none; }
}

/* At the very top of the page the header breathes: transparent, no rule,
   items a touch larger. Scrolling condenses it onto its glass. The growth
   is pure transform so the sticky header never re-flows the page. */
.site-header.at-top {
  background: transparent;
  border-bottom-color: transparent;
}
.brand {
  transform-origin: left center;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.site-header.at-top .brand { transform: scale(1.09); }
.site-nav {
  transform-origin: right center;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.site-header.at-top .site-nav { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .brand, .site-nav { transition: none; }
}

/* On small screens the inline links give way to a compact JS-free menu. */
.nav-menu { display: none; position: relative; }
.nav-menu summary {
  list-style: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--muted);
  padding: 0.45rem 1rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu[open] summary { color: var(--text); }
.nav-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.6rem);
  min-width: 12rem;
  display: grid;
  gap: 0.25rem;
  padding: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: var(--shadow-phone);
  z-index: 50;
}
@media (max-width: 767.98px) {
  .site-nav > a { display: none; }
  .nav-menu { display: block; }
  .site-nav .nav-panel a {
    display: block;
    padding: 0.6rem 0.85rem;
    border-radius: 10px;
    font-size: 1.0625rem;
    color: var(--text);
    text-decoration: none;
  }
  .site-nav .nav-panel a:hover { background: var(--raised); }
  .site-nav .nav-panel a[aria-current] {
    text-decoration: underline;
    text-decoration-color: var(--jade);
    text-underline-offset: 4px;
  }
  .site-nav .nav-panel .panel-cta {
    background: var(--jade);
    color: var(--jade-ink);
    text-align: center;
    font-weight: 500;
    border-radius: 999px;
    margin-bottom: 0.35rem;
  }
  .site-nav .nav-panel .panel-cta:hover { background: var(--jade); }
}

/* 44px is the minimum comfortable touch target, so the ring stays 40px for the
   look while the control itself meets it. */
.theme-toggle {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--hairline);
  background: none; color: var(--muted); cursor: pointer;
  transition: color 180ms ease-out, border-color 180ms ease-out;
}
.theme-toggle::after {
  content: ""; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 999px;
}
.theme-toggle:hover { color: var(--text); border-color: var(--hairline); }
.theme-toggle svg { width: 17px; height: 17px; }
/* The toggle only works with JavaScript; without it, don't show a dead control. */
html:not(.js) .theme-toggle { display: none; }
html:not(.light) .theme-toggle .ic-moon { display: none; }
html.light .theme-toggle .ic-sun { display: none; }

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

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  max-width: 100%;
  text-align: center;
  border-radius: 999px;
  padding: 0.9375rem 1.75rem;
  font-size: 1.0625rem; font-weight: 500;
  text-decoration: none;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms ease-out, opacity 180ms ease-out,
    background-color 180ms ease-out;
}
.btn-primary { background: var(--jade); color: var(--jade-ink); }
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 32px -12px var(--jade-line);
}
.btn-ghost {
  border: 1px solid var(--hairline);
  color: var(--text); font-weight: 400;
}
.btn-ghost:hover { background: var(--surface); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none; }
}

.micro { font-size: 0.9375rem; color: var(--faint); font-weight: 300; }

/* ----- Phone ----- */

.phone {
  width: var(--w, 340px);
  max-width: min(100%, calc(100vw - 2 * var(--gutter)));
  border-radius: calc(var(--w, 340px) * 0.135);
  overflow: hidden;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-phone);
  background: var(--surface);
}
.phone img { width: 100%; }
html:not(.light) .phone .shot-light { display: none; }
html.light .phone .shot-dark { display: none; }

figure figcaption {
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: var(--faint);
  font-weight: 300;
}

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

.mv-hero .mv-body {
  padding-top: clamp(4.5rem, 9vh, 7rem);
  padding-bottom: clamp(5rem, 9vw, 8rem);
}

.hero-stage {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.hero-stage h1 { margin-top: 2.25rem; max-width: 14ch; }
.hero-stage .hero-sub { margin-top: 1.5rem; max-width: 34em; }
.hero-stage .actions { margin-top: 2.75rem; justify-content: center; }
.hero-stage .micro { margin-top: 1.375rem; max-width: 34em; text-align: center; }

/* The mark, given the front door. A quiet halo, no glow theatrics. */
.mark-halo {
  position: relative;
  display: inline-flex;
  align-items: center; justify-content: center;
}
.mark-halo::before {
  content: "";
  position: absolute;
  inset: -90%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--jade-halo), transparent 72%);
  pointer-events: none;
}
.mark-halo-sm::before { inset: -60%; }
@media (prefers-reduced-motion: no-preference) {
  .mark-halo::before {
    animation: halo-breath 8s ease-in-out infinite alternate;
  }
  @keyframes halo-breath {
    from { opacity: 0.7; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1.05); }
  }
}
.mark-hero {
  position: relative;
  width: clamp(64px, 9vw, 92px);
  height: clamp(64px, 9vw, 92px);
}

/* Entrance. Keyframes with "both" so the page is complete without JS,
   and ends complete everywhere else. */
@media (prefers-reduced-motion: no-preference) {
  .he {
    animation: hero-rise 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: var(--d, 0ms);
  }
  @keyframes hero-rise {
    from { opacity: 0; transform: translateY(14px); }
  }
}

/* The second beat: the instrument itself. */
.hero-visual {
  margin-top: clamp(4.5rem, 9vw, 7.5rem);
  display: grid;
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: center;
  justify-content: center;
}
@media (min-width: 900px) {
  .hero-visual { grid-template-columns: auto auto; }
}

.hero-numeral-row {
  display: flex; align-items: baseline; gap: 0.75rem;
  margin-top: 1.25rem;
}
.hero-numeral-row .numeral {
  font-size: clamp(6.5rem, 13vw, 11rem);
  min-width: 2ch;
}
.hero-numeral-row .of {
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  color: var(--faint); font-weight: 300;
}

.drivers { margin-top: 2rem; display: grid; gap: 0.875rem; max-width: 30rem; }
.driver {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.875rem;
  font-size: 1rem; color: var(--muted); font-weight: 300;
}
.driver > span + * { min-width: 0; }
.chip {
  flex: none;
  font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
  color: var(--faint);
}

/* ----- Trust line ----- */

.trust { border-block: 1px solid var(--hairline-soft); background: var(--g-reading); }

/* ----- The promise (movement 1.5) -----
   The differentiator, stated high and plainly, with its one honest exception in
   the same breath. The architecture movement further down is the proof; this is
   the claim, so it gets prose and no diagram. */
.mv-promise { background: var(--g-promise); }
.promise-copy { margin-top: 2.5rem; display: grid; gap: 1.25rem; }
.promise-copy .body-copy { max-width: 64ch; }

/* The caveat sits in its own hairline band, the same punctuation the trust strip
   and the body-clock movement use, marked with the meridian's own node glyph so
   the line the page has been drawing visibly stops here and admits something. */
.promise-caveat {
  position: relative;
  margin-top: 2.75rem;
  max-width: 64ch;
  padding: 1.75rem 1.75rem 1.75rem 2rem;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: var(--surface);
}
.promise-caveat::before {
  content: "";
  position: absolute;
  left: 2rem; top: -4px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--jade);
}
.caveat-label {
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0.01em;
  color: var(--text);
  margin-bottom: 0.625rem;
}
.promise-caveat p:not(.caveat-label) {
  color: var(--muted); font-weight: 300; font-size: 1rem; line-height: 1.65;
}
.mv-promise .privacy-link { margin-top: 2.25rem; }
.trust ul {
  list-style: none;
  display: flex; flex-direction: column; gap: 0.6rem;
  padding-block: 1.5rem;
  font-size: 1.0625rem; font-weight: 300; color: var(--muted);
}
@media (min-width: 820px) {
  .trust ul { flex-direction: row; justify-content: space-between; gap: 2.5rem; }
}

/* ----- Reading movement ----- */

.reading-grid {
  display: grid; gap: clamp(3rem, 5vw, 5rem);
  margin-top: clamp(3rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 980px) {
  .reading-grid { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); }
  .reading-grid > figure { position: sticky; top: 6rem; }
}

/* A closer look at the same instrument, not a third identical thumbnail. */
.crop {
  width: 100%;
  max-width: 30rem;
  aspect-ratio: 1 / 1.06;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  box-shadow: var(--shadow-phone);
}
.crop img {
  width: 108%;
  max-width: none;
  margin-left: -3%;
  margin-top: -36%;
}
html:not(.light) .crop .shot-light { display: none; }
html.light .crop .shot-dark { display: none; }

.spec { max-width: 36rem; }
.spec > div { padding-block: 2.25rem; }
.spec > div + div { border-top: 1px solid var(--hairline-soft); }
.spec dt { font-size: 1.3125rem; font-weight: 400; }
.spec dd { margin-top: 0.75rem; color: var(--muted); font-weight: 300; }
.spec-note { margin-top: 2.75rem; color: var(--muted); font-weight: 300; max-width: 36rem; }

/* ----- Split sections (plan, day) ----- */

.split {
  display: grid; gap: clamp(3rem, 5vw, 6rem);
  align-items: center;
  margin-top: clamp(3rem, 5vw, 4.5rem);
}
@media (min-width: 980px) {
  .split { grid-template-columns: minmax(0, 1fr) auto; }
  .split.flip { grid-template-columns: auto minmax(0, 1fr); }
  .split.flip > figure { order: -1; }
}
.split .stack { display: grid; gap: 1.5rem; max-width: 36rem; }

/* ----- Range movement ----- */

.disciplines {
  margin-top: clamp(2.5rem, 4vw, 4rem);
  display: flex; flex-wrap: wrap; column-gap: 1.4rem; row-gap: 0.5rem;
  align-items: baseline;
  font-size: clamp(1.625rem, 3.2vw, 2.625rem);
  font-weight: 300;
  letter-spacing: -0.02em;
}
.disciplines .dot { color: var(--faint); font-size: 0.6em; }
/* The five words arrive one by one. */
@media (prefers-reduced-motion: no-preference) {
  html.js .disciplines .d {
    display: inline-block;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--d, 0ms);
  }
  html.js .disciplines.in .d { opacity: 1; transform: none; }
}

.distances {
  margin-top: clamp(3.5rem, 6vw, 5.5rem);
  display: grid; gap: clamp(3rem, 5vw, 6rem);
  align-items: center;
}
@media (min-width: 980px) {
  .distances { grid-template-columns: minmax(0, 1fr) auto; }
}

.distance-table { width: 100%; border-collapse: collapse; max-width: 40rem; }
.distance-table caption {
  text-align: left; font-size: 1.3125rem; font-weight: 400;
  padding-bottom: 1.25rem;
}
.distance-table th {
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--faint);
  text-align: right; padding: 0 0 0.6rem 1.25rem;
}
.distance-table th:first-child { text-align: left; padding-left: 0; }
.distance-table td {
  border-top: 1px solid var(--hairline-soft);
  padding: 0.95rem 0 0.95rem 1.25rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 300;
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  white-space: nowrap;
}
.distance-table td:first-child {
  text-align: left; padding-left: 0;
  font-size: 1.0625rem; color: var(--muted); font-weight: 400;
  white-space: normal;
}
.distance-table .unit { color: var(--faint); font-size: 0.8em; margin-left: 0.15em; }
.distance-note { margin-top: 1.5rem; }

.bodymap { margin-top: clamp(4.5rem, 8vw, 7.5rem); }
.bodymap h3 {
  font-size: clamp(2.125rem, 3.6vw, 3.125rem);
  line-height: 1.1;
}
.bodymap-stage {
  margin-top: clamp(2.5rem, 4vw, 4rem);
  display: flex; justify-content: center;
}

/* ----- Badges strip ----- */

.badges {
  margin-top: clamp(4.5rem, 8vw, 7rem);
  border-top: 1px solid var(--hairline-soft);
  padding-top: clamp(2.5rem, 4vw, 4rem);
  display: grid; gap: 2.5rem;
}
@media (min-width: 980px) {
  .badges { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: center; }
}
.tiers {
  list-style: none;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}
.tiers span.bar { display: block; height: 1px; margin-bottom: 0.7rem; }
/* The tier hairlines draw themselves in, left to right, one after another. */
@media (prefers-reduced-motion: no-preference) {
  html.js .badges.rv .tiers .bar {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  html.js .badges.rv .tiers li:nth-child(2) .bar { transition-delay: 90ms; }
  html.js .badges.rv .tiers li:nth-child(3) .bar { transition-delay: 180ms; }
  html.js .badges.rv .tiers li:nth-child(4) .bar { transition-delay: 270ms; }
  html.js .badges.rv .tiers li:nth-child(5) .bar { transition-delay: 360ms; }
  html.js .badges.rv.in .tiers .bar { transform: scaleX(1); }
}
.tiers .t-name { font-size: 0.9375rem; font-weight: 400; }
.badges .numeral { font-size: clamp(3rem, 5vw, 4.25rem); }
.badges .badge-copy { margin-top: 1rem; }

/* ----- Privacy movement ----- */

.mv-privacy .mv-body { padding-block: clamp(6.5rem, 11vw, 10rem); }

.privacy-copy { max-width: var(--reading); display: grid; gap: 1.5rem; margin-top: 2.75rem; }
.privacy-copy p { color: var(--muted); font-weight: 300; font-size: 1.1875rem; }

.arch {
  margin-top: clamp(3rem, 5vw, 4.5rem);
  display: grid;
  gap: 1.5rem;
  align-items: stretch;
  max-width: 56rem;
}
@media (min-width: 820px) {
  .arch { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0; }
}

.arch-phone {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: 24px;
  background: var(--surface);
  padding: 2rem 1.75rem 1.75rem;
}
/* The meridian's last act: it enters the phone and ends. The arch shifts
   left by the rail width so the line lands exactly on the meridian's x. */
@media (min-width: 1080px) {
  .arch { margin-left: calc(-1 * var(--rail-w)); }
  .arch-phone { padding-left: 2.5rem; }
  .arch-phone::before {
    content: "";
    position: absolute;
    left: 8px;
    top: -520px;
    height: calc(520px + 1.35rem);
    width: 1px;
    background: var(--jade-line);
  }
  .arch-phone::after {
    content: "";
    position: absolute;
    left: 8px;
    top: calc(1.35rem - 3px);
    width: 7px; height: 7px;
    transform: translateX(-3px);
    border-radius: 50%;
    background: var(--jade);
  }
}
.arch-phone h3 { font-size: 1.0625rem; font-weight: 500; letter-spacing: 0; }
.arch-phone p, .arch-else p { margin-top: 0.6rem; font-size: 1rem; color: var(--muted); font-weight: 300; }

.arch-gap {
  display: flex; align-items: center; justify-content: center;
  padding: 0.5rem 2.25rem;
  font-size: 0.875rem; color: var(--faint); font-weight: 300;
}

.arch-else {
  border: 1px dashed var(--hairline);
  border-radius: 24px;
  padding: 2rem 1.75rem 1.75rem;
}
.arch-else h3 { font-size: 1.0625rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }

.arch-caption { margin-top: 1.25rem; font-size: 0.9375rem; color: var(--faint); font-weight: 300; }

.privacy-link {
  display: inline-block;
  margin-top: 2.5rem;
  color: var(--text);
  font-weight: 400;
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 6px;
  transition: text-decoration-color 160ms ease-out;
}
.privacy-link:hover { text-decoration-color: currentColor; }

/* ----- FAQ ----- */

.faq {
  margin-top: clamp(2.5rem, 4vw, 4rem);
  max-width: 780px;
  border-top: 1px solid var(--hairline-soft);
}
.faq-item { border-bottom: 1px solid var(--hairline-soft); }
.faq-item summary {
  list-style: none;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 2rem;
  cursor: pointer;
  padding-block: 1.625rem;
  font-size: 1.25rem; font-weight: 400;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* On hover the icon wakes up; the question itself is already at full ink. */
.faq-item summary:hover .faq-icon::before,
.faq-item summary:hover .faq-icon::after { background: var(--text); }
/* The icon: a plus drawn from two hairlines, turning into a cross. */
.faq-icon {
  position: relative;
  flex: none;
  width: 16px; height: 16px;
  align-self: center;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: var(--faint);
  transition: background-color 180ms ease-out;
}
.faq-icon::before { left: 0; right: 0; top: 7px; height: 1.5px; }
.faq-icon::after { top: 0; bottom: 0; left: 7px; width: 1.5px; }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-a { padding-bottom: 1.875rem; max-width: 62ch; }
.faq-a p { color: var(--muted); font-weight: 300; }
.faq-a a { color: var(--text); text-underline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .faq-item[open] .faq-a { animation: faq-in 420ms cubic-bezier(0.16, 1, 0.3, 1); }
  @keyframes faq-in {
    from { opacity: 0; transform: translateY(-4px); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .faq-icon { transition: none; }
}

/* ----- Close ----- */

.mv-close > .frame { display: block; }
.mv-close .mv-body {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding-block: clamp(6rem, 10vw, 9rem);
}
.close-line {
  margin-top: 3rem;
  max-width: 17em;
  font-size: clamp(2.375rem, 4.2vw, 3.5rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}
.mv-close .actions { margin-top: 2.75rem; justify-content: center; }
.mv-close .micro { margin-top: 1.25rem; }

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

.site-footer { border-top: 1px solid var(--hairline-soft); background: var(--g-close); }
.site-footer .frame { padding-block: 3.5rem; }
.foot-grid { display: grid; gap: 2.5rem; }
@media (min-width: 820px) {
  .foot-grid { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}
.foot-brand p { margin-top: 1rem; max-width: 24rem; font-size: 1rem; color: var(--muted); font-weight: 300; }
.foot-nav { display: flex; gap: 2.5rem; }
.foot-nav a {
  display: block;
  font-size: 1rem; color: var(--muted); font-weight: 300;
  text-decoration: none; padding-block: 0.3rem;
  transition: color 160ms ease-out;
}
.foot-nav a:hover { color: var(--text); }
/* The quiet signature: the wordmark as a watermark, almost part of the ground. */
.foot-mark {
  margin-top: 4rem;
  font-size: clamp(4.5rem, 12vw, 10rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 0.9;
  color: var(--text);
  opacity: 0.05;
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
}

.foot-line {
  margin-top: 3rem; padding-top: 1.75rem;
  border-top: 1px solid var(--hairline-soft);
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem;
  justify-content: space-between;
  font-size: 0.875rem; color: var(--faint); font-weight: 300;
}

/* ----- Subpages (privacy, support, journal, about) ----- */

.page { background: var(--g-reading); min-height: 100vh; }
.page-main .frame { padding-block: clamp(4rem, 8vw, 7rem); }
.page-main .reading-col { max-width: var(--reading); }
.page-main h1 { margin-bottom: 2.5rem; }
.page-main h2 { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.01em; margin-top: 3rem; margin-bottom: 1rem; }
.page-main p, .page-main li { color: var(--muted); font-weight: 300; }
.page-main p + p { margin-top: 1rem; }
.page-main ul { padding-left: 1.25rem; display: grid; gap: 0.5rem; margin-block: 1rem; }
.page-main a { color: var(--text); text-underline-offset: 4px; }
.page-main .stamp { font-size: 0.9375rem; color: var(--faint); margin-bottom: 2rem; }

/* ----- The feedback form (support page) ----- */

.feedback-form {
  margin-top: 1.75rem;
  display: grid;
  gap: 1.375rem;
  max-width: 34rem;
}
.ff-row { display: grid; gap: 0.5rem; }
.ff-row label { font-size: 0.9375rem; font-weight: 400; color: var(--text); }
.ff-opt { color: var(--faint); font-weight: 300; }
.invite-form { margin-top: 0.5rem; display: grid; gap: 1.125rem; }
.iv-consent {
  display: flex; align-items: baseline; gap: 0.6rem;
  font-size: 0.9375rem; color: var(--muted); font-weight: 300;
  cursor: pointer;
}
.iv-consent input { accent-color: var(--jade); }

.feedback-form input,
.feedback-form select,
.feedback-form textarea,
.invite-form input[type="email"] {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 0.8rem 1rem;
}
.feedback-form textarea { resize: vertical; min-height: 8rem; }
.feedback-form input:hover,
.feedback-form select:hover,
.feedback-form textarea:hover { border-color: var(--hairline); }
.ff-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ff-captcha:empty { display: none; }
.ff-actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.ff-note:empty { display: none; }

/* ----- Subpage layouts: use the width, keep the measure -----
   Body text stays capped near 70ch (wider reads worse, not more premium);
   the space is spent on second elements: topic rows, a sticky form panel,
   an on-page nav. */

/* The journal hub: full-width clickable topic rows. */
.topic-wrap { max-width: 62rem; margin-top: 2.5rem; }
.topic-rows { border-top: 1px solid var(--hairline-soft); }
.topic-row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 1rem 2rem;
  padding: 1.75rem 0.75rem;
  border-bottom: 1px solid var(--hairline-soft);
  text-decoration: none;
  transition: background-color 200ms ease-out;
}
.topic-row:hover { background: var(--surface); }
.tr-name { font-size: 1.5rem; font-weight: 400; letter-spacing: -0.01em; color: var(--text); }
.tr-desc { color: var(--muted); font-weight: 300; }
.tr-meta { font-size: 0.875rem; color: var(--faint); white-space: nowrap; }
.tr-arrow {
  color: var(--faint);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), color 200ms ease-out;
}
.topic-row:hover .tr-arrow { transform: translateX(4px); color: var(--jade); }
@media (max-width: 819.98px) {
  .topic-row { grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem 1rem; }
  .tr-name { grid-column: 1; }
  .tr-arrow { grid-row: 1; grid-column: 2; align-self: center; }
  .tr-desc, .tr-meta { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .topic-row, .tr-arrow { transition: none; }
  .topic-row:hover .tr-arrow { transform: none; }
}

/* Topic pages: the pieces list */
.pieces { margin-top: 2rem; border-top: 1px solid var(--hairline-soft); }
.piece { padding-block: 1.75rem; border-bottom: 1px solid var(--hairline-soft); }
.piece h2 { margin-top: 0; }
.piece-status {
  margin-top: 0.75rem;
  display: inline-block;
  font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
  color: var(--faint);
}

/* Support: content on the left, the form in a sticky panel on the right. */
.support-grid { display: grid; gap: 3rem; }
@media (min-width: 1100px) {
  .support-grid {
    grid-template-columns: minmax(0, 1fr) 26rem;
    gap: 4.5rem;
    align-items: start;
  }
  .support-aside { position: sticky; top: 7rem; }
}
.aside-panel {
  border: 1px solid var(--hairline);
  border-radius: 24px;
  background: var(--surface);
  padding: 2rem;
}
.aside-panel h2 { margin-top: 0; }
.aside-panel .feedback-form { margin-top: 1.25rem; }

/* Privacy: a sticky on-page nav in the left column. */
.page-grid-toc { display: grid; gap: 2rem; }
.page-toc { display: none; }
@media (min-width: 1100px) {
  .page-grid-toc {
    grid-template-columns: 15rem minmax(0, var(--reading));
    gap: 4.5rem;
    align-items: start;
  }
  .page-toc {
    display: block; position: sticky; top: 7rem;
    /* The privacy contents ran long once the notice became complete. Let it
       scroll inside itself rather than run off the bottom of a short laptop.
       The scrollbar is drawn down to a hairline: a chunky grey bar three
       columns from a jade meridian is exactly the noise this design refuses. */
    max-height: calc(100vh - 9rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--hairline) transparent;
  }
  .page-toc::-webkit-scrollbar { width: 3px; }
  .page-toc::-webkit-scrollbar-track { background: transparent; }
  .page-toc::-webkit-scrollbar-thumb {
    background: var(--hairline);
    border-radius: 999px;
  }
  .page-toc:hover::-webkit-scrollbar-thumb { background: var(--jade-line); }
}
.toc-title { font-size: 0.875rem; font-weight: 500; color: var(--faint); margin-bottom: 0.75rem; }
/* A second group heading inside the same nav needs air above it. */
.page-toc .toc-title + a { margin-top: 0; }
.page-toc a + .toc-title { margin-top: 1.5rem; }
.page-toc a {
  display: block;
  padding-block: 0.35rem;
  color: var(--muted); font-weight: 300; font-size: 0.9375rem;
  text-decoration: none;
  transition: color 160ms ease-out;
}
.page-toc a:hover { color: var(--text); }

/* Itemised lists inside a reading column: legal detail that reads as prose. */
.prose-list {
  margin: 1.25rem 0 0;
  padding-left: 1.1rem;
  display: grid; gap: 0.875rem;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.65;
}
.prose-list li { padding-left: 0.35rem; }
.prose-list li::marker { color: var(--faint); }
.prose-list strong { color: var(--text); font-weight: 500; }

/* Short pages sit centered rather than hugging the left edge. */
.reading-center { margin-inline: auto; }

/* ----- The people (about page) -----
   Four portraits cropped to one shared framing rule, so photographs taken at
   completely different distances read as a set. The grid breaks slightly wider
   than the reading column: enough presence to be the page's one visual moment,
   not enough to shout. No jade here on purpose; on this site jade means the
   meridian and what sits on it, and a row of accent-coloured job titles would
   spend the accent on the least important words on the page. */
/* Scoped under .page-main on purpose: the generic `.page-main p, .page-main li`
   and `.page-main ul` rules further up are more specific than a lone class, and
   would otherwise flatten every name to muted 300 and re-indent the grid. */
/* Five people, so the column count steps 2, 3, 5 rather than landing a lone
   portrait on a second row. The grid breaks wider than the reading column at
   the top step, which keeps the tiles a sensible size across five. */
.page-main .team-grid {
  list-style: none;
  margin: 3rem auto 0;
  padding: 0;
  max-width: 58rem;
  display: grid;
  gap: 2.5rem 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 620px) {
  .page-main .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 940px) {
  .page-main .team-grid {
    max-width: 64rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.75rem;
  }
}
.page-main .team-member { min-width: 0; color: inherit; }
.team-member img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 20px;
  border: 1px solid var(--hairline);
  background: var(--surface);
}
.team-member .team-name {
  margin-top: 1.125rem;
  font-size: 1.0625rem; font-weight: 500; line-height: 1.3;
  color: var(--text);
}
.team-member .team-role {
  margin-top: 0.1875rem;
  font-size: 0.9375rem; font-weight: 300; line-height: 1.4;
  color: var(--muted);
}
.team-member .team-note {
  margin-top: 0.625rem;
  font-size: 0.875rem; font-weight: 300; line-height: 1.55;
  color: var(--faint);
}

/* The beta page: the two platforms side by side. */
.beta-grid { margin-top: 2.5rem; display: grid; gap: 1.5rem; max-width: 62rem; }
@media (min-width: 900px) { .beta-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.beta-panel {
  border: 1px solid var(--hairline);
  border-radius: 24px;
  background: var(--surface);
  padding: 2.25rem 2rem;
}
.beta-panel h2 { margin-top: 0; }
.beta-steps {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 1.75rem;
  counter-reset: step;
  display: grid; gap: 0.875rem;
}
.beta-steps li {
  counter-increment: step;
  display: flex; align-items: baseline; gap: 0.875rem;
  color: var(--muted); font-weight: 300;
}
.beta-steps li::before {
  content: counter(step);
  flex: none;
  width: 1.75rem; height: 1.75rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  font-size: 0.875rem;
  color: var(--faint);
}
.beta-close { margin-top: 2.5rem; }

/* Journal and about */
.journal-standard {
  border: 1px solid var(--hairline);
  border-radius: 24px;
  padding: 1.75rem 2rem;
  margin-block: 2.5rem;
}
.journal-standard ul { margin-block: 0.5rem 0; }

/* Short laptops: the front door must land its CTAs inside the first
   viewport. The hero-visual is the second beat and may sit below the fold. */
@media (min-width: 900px) and (max-height: 820px) {
  .mv-hero .mv-body { padding-top: 2.5rem; }
  .mark-hero { width: 60px; height: 60px; }
  .hero-stage h1 { margin-top: 1.5rem; font-size: clamp(2.5rem, 5vh, 3.5rem); }
  .hero-stage .hero-sub { margin-top: 1.125rem; }
  .hero-stage .actions { margin-top: 1.75rem; }
  .hero-stage .micro { margin-top: 1rem; }
  .hero-visual { margin-top: 4rem; }
}

/* ----- The front door -----
   A black veil with the mark, shown once per session on the homepage.
   The .intro class exists only when the head script decided to run it,
   so no-JS and reduced-motion visitors go straight in. Always dark:
   this is the brand's door, whichever theme lies behind it. */

.veil { display: none; }
html.intro { overflow: hidden; }
html.intro .veil {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: #05060A;
  animation: veil-in 300ms ease-out both;
  transition: opacity 620ms ease-out, visibility 0s 620ms;
}
@keyframes veil-in {
  from { opacity: 0; }
}
html.intro .veil.out { opacity: 0; visibility: hidden; }
.veil-stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.veil-stage::before {
  content: "";
  position: absolute;
  inset: -90%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(106, 219, 186, 0.15), transparent 72%);
}
.veil-mark {
  position: relative;
  width: 96px; height: 96px;
  background: #6ADBBA;
  -webkit-mask: url("logo.svg") no-repeat center / contain;
  mask: url("logo.svg") no-repeat center / contain;
}
html.intro .veil-stage {
  animation: veil-mark-in 850ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}
@keyframes veil-mark-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
}
/* The core: mark, halo, the loading ring and the badges riding it.
   The whole core is what "opens" into the page at the end. */
.veil-core {
  position: relative;
  width: 200px; height: 200px;
  display: flex; align-items: center; justify-content: center;
}
html.intro .veil-core {
  animation: veil-open 700ms cubic-bezier(0.7, 0, 0.84, 0) 2650ms forwards;
}
@keyframes veil-open {
  to { transform: scale(5); opacity: 0; }
}

/* The ring: a hairline that draws itself clockwise around the mark,
   the site's loading indicator made of the meridian. */
.veil-ring {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
  color: rgba(106, 219, 186, 0.55);
}
.veil-ring circle {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  stroke-linecap: round;
}
html.intro .veil-ring circle {
  animation: veil-ring-draw 1800ms cubic-bezier(0.45, 0, 0.25, 1) 500ms forwards;
}
@keyframes veil-ring-draw {
  to { stroke-dashoffset: 0; }
}

/* The collection: the mark again, five times, in the app's tier colours,
   each appearing on the ring as the line passes its position. */
.veil-badge {
  position: absolute;
  left: calc(var(--x) - 10px);
  top: calc(var(--y) - 10px);
  width: 20px; height: 20px;
  background: var(--c, #6ADBBA);
  -webkit-mask: url("logo.svg") no-repeat center / contain;
  mask: url("logo.svg") no-repeat center / contain;
  opacity: 0;
}
html.intro .veil-badge {
  animation: veil-badge-in 420ms cubic-bezier(0.16, 1, 0.3, 1) var(--vd, 0ms) forwards;
}
@keyframes veil-badge-in {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: none; }
}
/* The hero's own entrance waits behind the door. */
html.intro .he { animation-play-state: paused; }
/* Belt and braces: if the class ever appears under reduced motion, no veil. */
@media (prefers-reduced-motion: reduce) {
  html.intro .veil { display: none; }
  html.intro { overflow: auto; }
}

/* ----- Back to top ----- */

.to-top {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--surface);
  background: color-mix(in oklab, var(--surface) 86%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--muted);
  z-index: 35;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 300ms ease-out,
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
    color 180ms ease-out;
}
.to-top svg { width: 18px; height: 18px; }
.to-top.show { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { color: var(--text); }
/* Without JavaScript nothing toggles .show, so it is simply always there. */
html:not(.js) .to-top { opacity: 1; pointer-events: auto; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; }
}

/* ----- The travelling signal (scroll glow) ----- */

#signal {
  position: fixed;
  top: 38vh;
  width: 1px; height: 110px;
  background: linear-gradient(to bottom, transparent, var(--jade), transparent);
  opacity: 0;
  z-index: 30;
  pointer-events: none;
  transition: opacity 500ms ease-out;
}

/* ----- Quiet motion. Content is visible by default; JS + motion opt-in. ----- */

@media (prefers-reduced-motion: no-preference) {
  html.js .rv {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--d, 0ms);
  }
  html.js .rv.in { opacity: 1; transform: none; }
}

/* Parallax rides its own transform; keep it cheap. */
[data-plx] { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  #signal { display: none; }
}