/* VanPay "Glass trail" base: body, type scale, the two grounds and their
   ambient light, the winding trail with its capsule, the split layout, glass
   and lit-object recipes, actions, reveals. Every act builds on these names.
   Owner: builder H. */

/* ------------------------------------------------------------- body -- */
:root {
  --vp-section: clamp(6rem, 11vw, 10rem);      /* 96 phone, 160 desktop */
  --vp-gutter: clamp(1.5rem, 4.5vw, 5rem);
  --vp-shadow-stack: 0 2px 4px rgba(0, 0, 0, 0.2), 0 12px 24px rgba(0, 0, 0, 0.3), 0 48px 96px rgba(0, 0, 0, 0.4);
  --vp-rim: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.06) 42%, rgba(255, 255, 255, 0.06) 58%, rgba(255, 255, 255, 0.4));
}
html { overflow-x: clip; }
body {
  background: var(--card-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: var(--t-body);
  line-height: 1.47;
  letter-spacing: 0;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
main { display: block; }
::selection { background: var(--vp-blue); color: #FFFFFF; }

/* Focus: the accent clears 3:1 on both grounds (grey on the past, blue on
   the future); a 2px gap keeps it off the element's own edge. */
:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1.1rem;
  border-radius: 999px;
  background: var(--sc-ink);
  color: var(--sc-canvas);
  font-size: var(--t-caption);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus-visible,
.skip-link:focus { transform: none; }

/* --------------------------------------------------- account bars -- */
/* Desktop: a fixed bar top-right, above the divider (z 60) and every act,
   below the skip link (z 100). No backdrop blur: the primary is a solid
   pill and the quiet links sit on an rgba backing, so the bar costs nothing
   against the three-glass budget. The bar's bottom (64px) stays above the
   era labels, which sit at 84px on the trail. */
.topbar {
  position: fixed;
  top: 1rem;
  right: var(--vp-gutter);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* Scrim: copy scrolling up the right column fades out under the bar instead
   of sliding behind the transparent links. A soft gradient from the page
   ground at the very top, right half only (the divider cap stays clear),
   feathered on its left edge. No backdrop-filter. Two layers cross-fade with
   --close: the night ground, then the daylight of the close. */
.topbar::before,
.topbar::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -1rem;
  right: calc(-1 * var(--vp-gutter));
  width: calc(50vw - 6rem);
  height: 7.5rem;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10rem);
  mask-image: linear-gradient(to right, transparent, #000 10rem);
}
.topbar::before {
  background: linear-gradient(to bottom, var(--sc-canvas) 0, var(--sc-canvas) 3.5rem, rgba(5, 8, 16, 0) 100%);
  opacity: calc(1 - var(--close, 0));
}
.topbar::after {
  background: linear-gradient(to bottom, var(--light-canvas) 0, var(--light-canvas) 3.5rem, rgba(245, 245, 247, 0) 100%);
  opacity: var(--close, 0);
}
.topbar__link {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding-inline: 1rem;
  border-radius: 999px;
  background: rgba(8, 10, 16, 0.55);
  color: var(--card-ink);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 240ms var(--ease-ui), background-color 240ms var(--ease-ui);
}
.topbar__cta { padding-inline: 1.5rem; font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .topbar__link:hover { background: rgba(255, 255, 255, 0.12); }
}
/* The arrival is daylight: the quiet links switch to dark ink on a white
   backing; the blue pill reads as it is. */
html[data-phase="close"] .topbar__link {
  background: rgba(255, 255, 255, 0.72);
  color: #1D1D1F;
}
@media (hover: hover) and (pointer: fine) {
  html[data-phase="close"] .topbar__link:hover { background: rgba(255, 255, 255, 0.95); }
}
@media (max-width: 1023.98px) {
  .topbar__link--docs { display: none; }
}

/* Phones: a sticky bottom bar with the full-width pill. split.js shows it
   once the hero's own CTA has scrolled above the viewport; the close carries
   its own CTA, so the bar steps out there. */
.ctabar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem var(--vp-gutter) calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: rgba(5, 8, 16, 0.94);
  border-top: 1px solid var(--sc-hairline);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 300ms var(--ease-ui), visibility 0s linear 300ms;
}
.ctabar[hidden] { display: none; }
.ctabar.is-on { transform: none; visibility: visible; transition-delay: 0s; }
/* The peak carries its own CTA (which must clear the bar) and so does the
   close: the bar steps out in both. */
html[data-phase="peak"] .ctabar,
html[data-phase="close"] .ctabar { transform: translateY(110%); visibility: hidden; transition-delay: 0s, 300ms; }
.ctabar__cta { flex: 1 1 auto; min-height: 3rem; font-weight: 600; }
.ctabar__login {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding-inline: 1rem;
  border-radius: 999px;
  color: var(--card-ink);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}
@media (min-width: 900px) { .ctabar { display: none; } }
@media (max-width: 899.98px) { .topbar { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .ctabar, .topbar__link { transition: none; }
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Touch: every interactive element is at least 44px tall. Inline links stay
   inline (vertical padding on an inline box widens the hit area without
   moving the line), sized so a 14px link clears 44px. */
@media (pointer: coarse), (min-width: 900px) and (max-width: 1199.98px) {
  .divider .divider__cap { min-height: 2.75rem; }
}
@media (pointer: coarse) {
  a, button, summary, [role="button"] { min-height: 2.75rem; min-width: 2.75rem; }
  :where(p, li, dd, figcaption, small) > :where(a:not(.btn)) { min-height: 0; min-width: 0; padding-block: 1rem; }
  .divider .divider__cap, .divider .divider__label { min-height: 2.75rem; }
}

/* Shared SVG defs holder: takes no space. */
.vp-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.g-coin-a { stop-color: #DCE6FF; }
.g-coin-b { stop-color: #5B86F0; }
.g-coin-c { stop-color: #1C3FA3; }
.g-matte-a { stop-color: #C9CBD1; }
.g-matte-b { stop-color: #6E7077; }
.g-matte-c { stop-color: #2B2C30; }
.g-rim-a { stop-color: #FFFFFF; stop-opacity: 0.9; }
.g-rim-b { stop-color: #FFFFFF; stop-opacity: 0; }
.g-rim-c { stop-color: #FFFFFF; stop-opacity: 0.7; }
.g-device-a { stop-color: #2A3245; }
.g-device-b { stop-color: #141926; }
.g-device-c { stop-color: #0A0D16; }
.g-sheen-a { stop-color: #FFFFFF; stop-opacity: 0.12; }
.g-sheen-b { stop-color: #FFFFFF; stop-opacity: 0; }
.g-trail-a { stop-color: var(--sc-ink-soft); stop-opacity: 0.35; }
.g-trail-b { stop-color: var(--sc-ink-soft); stop-opacity: 0.6; }
.g-trail-c { stop-color: var(--sc-accent); stop-opacity: 0.9; }
.g-light-a { stop-color: var(--sc-accent); stop-opacity: 0; }
.g-light-b { stop-color: var(--sc-accent); stop-opacity: 1; }

/* ---------------------------------------------------------- grounds -- */
/* Fixed two-ground layer. The future ground is the layer itself; the past
   ground is one SVG path filled from the left edge to the trail, so the
   boundary IS the trail. split.js rewrites the path; nothing animates width.
   Two ambient lights sit on it, pre-rendered once (the blur is never
   animated) and moved by transform only. */
.grounds {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: clip;
  background: var(--sc-canvas);
  pointer-events: none;
}
.grounds__svg,
.divider__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.grounds__card { fill: var(--card-canvas); stroke: none; }
.grounds__light {
  position: absolute;
  top: 50%;
  left: 0;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
  opacity: calc(1 - var(--close));
}
.grounds__light--past {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.06), transparent 70%);
  transform: translate3d(calc(var(--split) * 50vw - 50%), -62%, 0);
}
.grounds__light--future {
  background: radial-gradient(circle, var(--vp-glow), transparent 70%);
  transform: translate3d(calc(50vw + var(--split) * 50vw - 50%), -52%, 0);
}

.act { position: relative; z-index: 1; }

/* ---------------------------------------------------------- divider -- */
/* The divider is a winding trail: a hairline gradient stroke, the lit
   progress stroke with its blurred light trail, mile-marker dots, the glass
   capsule at the tip. split.js computes the curve from --split and scroll. */
.divider {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}
.divider__trail,
.divider__fill,
.divider__glow,
.divider__pulse {
  fill: none;
  vector-effect: non-scaling-stroke;
}
.divider__trail {
  stroke: url(#g-trail);
  stroke-width: 1.5px;
}
.divider__fill {
  stroke: var(--sc-accent);
  stroke-width: 2px;
  stroke-linecap: round;
}
/* The light trail: the one permitted glow, an object rather than text. The
   blur value never animates; only the path it follows is redrawn. */
.divider__glow {
  stroke: var(--sc-accent);
  stroke-width: 6px;
  stroke-linecap: round;
  opacity: 0.35;
  filter: url(#f-glow);
}
/* Arrival: the trail has straightened and the lit stroke runs the whole road. */
html[data-era="history"] .divider__fill { stroke-width: calc(2px + 1.5px * var(--close)); }
html[data-era="history"] .divider__trail { opacity: calc(1 - var(--close)); }

/* The era pulse: a short bright dash split.js sends along the road at each
   jump (dasharray / dashoffset, about 400ms, then gone). */
.divider__pulse {
  stroke: #FFFFFF;
  stroke-width: 2.5px;
  stroke-linecap: round;
  opacity: 0;
}

/* Mile-markers: a dot per era on the road. Only the current era carries its
   label (the cap readout names it too); the neighbours stay as dots. split.js
   adds .is-covered while any copy would pass under the label. */
.divider__mark { opacity: calc(1 - var(--close) * 2); }
.divider__mark.is-past { opacity: calc(0.6 - var(--close) * 2); }
.divider__mark-dot { fill: var(--sc-ink-soft); stroke: none; }
.divider__mark--future .divider__mark-dot { fill: var(--sc-accent); }
.divider__mark.is-here .divider__mark-dot { fill: var(--sc-ink); }
.divider__mark--future.is-here .divider__mark-dot { fill: var(--sc-accent); }
.divider__mark-label {
  font-family: var(--sc-font-text);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--sc-ink-soft);
  opacity: 0;
  transition: opacity 300ms var(--ease-ui);
}
.divider__mark.is-here .divider__mark-label { fill: var(--sc-ink); opacity: 1; }
.divider__mark.is-covered .divider__mark-label { opacity: 0; transition: none; }
.divider__mark--future .divider__mark-label,
.divider__mark--future.is-here .divider__mark-label { fill: var(--sc-accent); }

/* The time capsule: a gradient-lit glass pod riding the trail. Twin light
   trails stretch behind it with scroll speed (split.js) and relax to rest. */
.divider__capsule { opacity: calc(1 - var(--close) * 2); }
.divider__pod { transform-box: fill-box; transform-origin: 50% 50%; }
.divider__pod-shadow { fill: #000000; opacity: 0.4; filter: url(#f-spec); }
.divider__pod-body { fill: url(#g-coin); stroke: url(#g-rim); stroke-width: 1px; }
.divider__pod-spec { fill: #FFFFFF; opacity: 0.6; filter: url(#f-spec); }
.divider__pod-ring { fill: none; stroke: #FFFFFF; stroke-width: 0.8px; opacity: 0.45; }
.divider__wake { opacity: 0; }
.divider__wake-line { fill: none; stroke: url(#g-light); stroke-width: 1.6px; stroke-linecap: round; }
/* The jump: a quick wipe of light across the pod, once per crossing. */
.divider__flash { opacity: 0; clip-path: inset(0 0 100% 0); }
.divider__flash-body { fill: #FFFFFF; }
.divider__capsule.is-jump .divider__flash { animation: vp-capsule-wipe 360ms var(--ease-stage); }
.divider__capsule.is-jump .divider__pod { animation: vp-capsule-pop 360ms var(--ease-stage); }
@keyframes vp-capsule-wipe {
  0%   { opacity: 0.9; clip-path: inset(0 0 100% 0); }
  45%  { opacity: 0.9; clip-path: inset(0); }
  100% { opacity: 0.9; clip-path: inset(100% 0 0 0); }
}
@keyframes vp-capsule-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.16); }
  100% { transform: scale(1); }
}

/* The cap: a small glass pill on the trail at the top, holding the mark and
   the era readout. */
.divider .divider__cap {
  position: absolute;
  top: 0.75rem;
  left: 0;
  translate: max(0.75rem, calc(var(--cap-x, 50vw) - 50%)) 0;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.5rem;
  padding: 0.45rem 1rem 0.45rem 0.7rem;
  border-radius: 999px;
  color: var(--sc-ink);
  text-decoration: none;
  pointer-events: auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 12px 32px rgba(0, 0, 0, 0.45);
  transition: box-shadow 240ms var(--ease-ui), transform 240ms var(--ease-ui);
}
.divider__cap svg { width: 1.25rem; height: 1.25rem; fill: var(--vp-blue); flex: none; }
.divider__cap:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .divider__cap:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 16px 40px rgba(0, 0, 0, 0.5); }
}
/* Arrival: the cap sits on daylight, so it takes the light glass look and
   the readout drops to the light-soft grey (5.3:1 on #F5F5F7). */
html[data-phase="close"] .divider__cap {
  color: #1D1D1F;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.12);
}
html[data-phase="close"] .divider__cap::before { opacity: 0; }
html[data-phase="close"] .divider__era-line { color: #6E6E73; }

/* The era readout: two stacked lines. At a jump the current line lifts out
   (160ms), then the next rises in (160ms): never both at once. */
.divider__era {
  position: relative;
  display: grid;
  height: 1.1rem;
  overflow: clip;
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.1rem;
  color: var(--sc-ink-soft);
}
.divider__era-line {
  grid-area: 1 / 1;
  white-space: nowrap;
  transform: translateY(100%);
}
.divider__era-line.is-cur { transform: none; }
.divider__era-line.is-in { animation: vp-flap-in 160ms var(--ease-stage) forwards; }
.divider__era-line.is-out { animation: vp-flap-out 160ms var(--ease-fade) forwards; }
@keyframes vp-flap-in {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes vp-flap-out {
  from { transform: none; opacity: 1; }
  to   { transform: translateY(-100%); opacity: 0; }
}

/* Bottom labels: two glass pills either side of the road. */
.divider__labels {
  position: absolute;
  bottom: 1.25rem;
  left: 0;
  width: 0;
  translate: var(--lab-x, 50vw) 0;
  opacity: calc(1 - var(--close) * 3);
  transition: opacity 200ms var(--ease-ui);
}
.divider .divider__label {
  position: absolute;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  white-space: nowrap;
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 10px 28px rgba(0, 0, 0, 0.4);
}
.divider__label--card { right: 0.75rem; color: var(--card-ink); }
.divider__label--vp { left: 0.75rem; color: var(--sc-ink); }
.divider__label--vp::before {
  content: "";
  width: 6px; height: 6px;
  margin-right: 0.55rem;
  border-radius: 50%;
  background: var(--sc-accent);
}
/* In the flowing text acts the labels would sit on copy; the act headings
   carry the comparison there, so the labels step aside. */
html[data-phase="tension"] .divider__labels,
html[data-phase="build"] .divider__labels { opacity: 0; }

/* ------------------------------------------------------------ split -- */
.split { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.side {
  position: relative;
  min-width: 0;
  padding-inline: var(--vp-gutter);
}
.act:not([data-sc-act="pin"]) .side { padding-block: var(--vp-section); }

@media (min-width: 900px) {
  .split {
    grid-template-columns: 50vw 50vw;
    width: 100vw;
  }
  .side { background: transparent; }
  [data-sc-stage] > .split { height: 100%; }
  /* Past-side copy keeps clear of the road: amplitude (≤44px) + gap + the
     era label (≈140px) to its left. */
  .side--card { --trail-clear: 10rem; }
  .side--card :is(.display, .sub, .lead, .body, .caption, .label) { margin-right: var(--trail-clear); }
  /* Tablets keep the split; the clearance shrinks so headlines stop
     wrapping one word per line (the era label is guarded by split.js). */
  @media (max-width: 1199.98px) { .side--card { --trail-clear: clamp(0px, 10vw, 10rem); } }
  @media (max-width: 1024px) { .side--card { --trail-clear: 0px; } }
  [data-sc-stage] > .split > .side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: clamp(4.5rem, 10vh, 7rem);
  }
}

/* Mobile: one column, each side paints its ground and carries its label as
   a 14px caps band on its top edge. The ambient light becomes a plain
   gradient on the future side (no filter). */
@media (max-width: 899.98px) {
  :root { --vp-section: 6rem; }   /* stacked rhythm: 96 top and bottom, every act */
  .grounds, .divider { display: none; }
  .side {
    background: var(--sc-canvas);
    color: var(--sc-ink);
    --band: 2.75rem;
  }
  .side--vp { background: radial-gradient(90vw 60vw at 85% 0, var(--vp-glow), transparent 70%) var(--sc-canvas); }
  .side[data-label] { padding-top: calc(var(--band) + 1.5rem); }
  .act:not([data-sc-act="pin"]) .side[data-label] {
    padding-top: calc(var(--band) + var(--vp-section));
    padding-bottom: var(--vp-section);
  }
  /* The band: the side's 14px caps label on the left, its era on the right
     (data-era, set per act), so the journey through time reads on phones. */
  .side[data-label]::before,
  .side[data-era]::after {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: var(--band);
    display: flex;
    align-items: center;
    padding-inline: var(--vp-gutter);
    font-size: var(--t-caption);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sc-ink-soft);
    pointer-events: none;
  }
  .side[data-label]::before {
    content: attr(data-label);
    border-top: 1px solid var(--sc-hairline);
  }
  .side[data-era]::after {
    content: attr(data-era);
    justify-content: flex-end;
  }
  .side--vp[data-label]::before { border-top-color: var(--sc-accent); }
  /* The future band carries a 1px accent light line down its left gutter:
     the ::after covers the side (pointer-events off) so its era text sits
     in the band and the line runs from the band down, fading out. */
  .side--vp[data-era]::after {
    bottom: 0;
    height: auto;
    align-items: flex-start;
    line-height: var(--band);
    background: linear-gradient(var(--sc-accent), transparent) no-repeat calc(var(--vp-gutter) - 1rem) 0 / 1px 100%;
  }
  [data-sc-stage] > .split {
    height: 100%;
    grid-template-rows: auto auto;
    align-content: stretch;
  }
  [data-sc-stage] > .split > .side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 1rem;
  }
}

/* Landscape phones: the viewport cannot hold a pinned stage or the fixed
   trail chrome. main.js converts pinned acts to flow and sets data-short on
   <html> (split.js mirrors it); here every sticky thing goes static, the
   trail chrome and the bottom labels step out, and each side keeps its own
   ground even if the width still allows the split. */
@media (max-height: 500px) {
  .grounds, .divider, .divider__labels { display: none; }
  .side { background: var(--sc-canvas); }
  .side--vp { background: radial-gradient(90vw 60vw at 85% 0, var(--vp-glow), transparent 70%) var(--sc-canvas); }
  .sc-stage, [data-sc-stage], .build__card { position: static; }
  [data-sc-stage] { height: auto; min-height: 0; }
}
html[data-short] .grounds, html[data-short] .divider, html[data-short] .divider__labels { display: none; }
html[data-short] .side { background: var(--sc-canvas); }
html[data-short] .side--vp { background: radial-gradient(90vw 60vw at 85% 0, var(--vp-glow), transparent 70%) var(--sc-canvas); }
html[data-short] :is(.sc-stage, [data-sc-stage], .build__card) { position: static; }
html[data-short] [data-sc-stage] { height: auto; min-height: 0; }

/* ------------------------------------------------------------- type -- */
/* One family. Tracking tightens as size grows; the opsz axis is pinned at
   display sizes so the big cuts keep their tight apertures. */
.display {
  margin: 0;
  max-width: 820px;
  font-family: var(--sc-font-display);
  font-size: var(--t-head);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.003em;
  text-wrap: balance;
  color: var(--sc-ink);
}
.display--hero {
  font-size: var(--t-hero);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 32;
}
.display--super {
  font-size: var(--t-super);
  line-height: 1.05;
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 32;
}
.display--head { font-size: var(--t-head); }
@media (min-width: 900px) {
  .display--head { font-variation-settings: "opsz" 32; }
}
/* Stacked: pretty, not balance, so no headline falls into three lines. */
@media (max-width: 899.98px) {
  .display { text-wrap: pretty; }
}
.sub {
  margin: 1.5rem 0 0;
  max-width: 640px;
  font-size: var(--t-sub);
  font-weight: 500;
  line-height: 1.33;
  letter-spacing: 0.009em;
  color: var(--sc-ink-soft);
  text-wrap: pretty;
}
.lead {
  margin: 0;
  max-width: 640px;
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.45;
  color: var(--sc-ink-soft);
  text-wrap: pretty;
}
.body {
  margin: 0;
  max-width: 640px;
  font-size: var(--t-body);
  line-height: 1.47;
  color: var(--sc-ink-soft);
  text-wrap: pretty;
}
.caption {
  margin: 0;
  max-width: 640px;
  font-size: var(--t-caption);
  font-weight: 400;
  line-height: 1.4;
  color: var(--sc-ink-soft);
  text-wrap: pretty;
}
.label {
  margin: 0;
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}

/* ---------------------------------------------------------- actions -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0 1.375rem;
  border: 0;
  border-radius: 999px;
  font-family: var(--sc-font-text);
  font-size: var(--t-body);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 240ms var(--ease-ui), box-shadow 240ms var(--ease-ui), transform 160ms var(--ease-ui);
}
.btn:active { transform: scale(0.98); }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn--primary {
  background: var(--vp-blue);
  color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 24px rgba(40, 89, 215, 0.3);
}
/* A glass pill without its own backdrop blur, so it never counts against
   the three-blur budget; the rim and highlight carry the look. */
.btn--quiet {
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  color: var(--sc-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.3);
}
.is-light .btn--quiet {
  background: rgba(0, 0, 0, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: color-mix(in oklab, var(--vp-blue) 84%, #FFFFFF); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 12px 32px rgba(40, 89, 215, 0.4); }
  .btn--quiet:hover { background: rgba(255, 255, 255, 0.12); }
  .is-light .btn--quiet:hover { background: rgba(0, 0, 0, 0.07); }
}

.link {
  color: var(--sc-ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--sc-accent) 60%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color 240ms var(--ease-ui);
}
@media (hover: hover) and (pointer: fine) {
  .link:hover { text-decoration-color: var(--sc-accent); }
}

/* ------------------------------------------------------------ glass -- */
/* Recipe 1. At most three on screen; blur fixed at 18px; never inside a
   transformed scrolling parent if it can be helped. The 1px gradient rim is
   a masked pseudo-element. */
.glass {
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 30px 60px rgba(0, 0, 0, 0.45);
}
.glass::before,
.btn--quiet::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--vp-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.is-light .glass {
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 30px 60px rgba(0, 0, 0, 0.12);
}
.hairline { height: 1px; border: 0; margin: 0; background: var(--sc-hairline); }

/* ------------------------------------------------------- lit objects -- */
/* Recipe 3 + 4 + 8. `.studio` is the soft radial light an object floats on;
   `.obj` holds the object; `.obj__reflect` is its flipped, masked, blurred
   copy below. */
.studio {
  position: relative;
  isolation: isolate;
}
.studio::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 55% at 50% 58%, var(--studio-light, rgba(255, 255, 255, 0.07)), transparent 70%);
  pointer-events: none;
}
.side--vp .studio { --studio-light: var(--vp-glow); }
.obj { position: relative; }
.obj__reflect {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  margin-top: 0.5rem;
  transform: scaleY(-1);
  transform-origin: 50% 50%;
  /* The mask is drawn before the flip, so the opaque end is the local
     bottom: after flipping it sits nearest the object and fades away. */
  -webkit-mask-image: linear-gradient(transparent 55%, #000);
  mask-image: linear-gradient(transparent 55%, #000);
  filter: blur(2px);
  opacity: 0.35;
  pointer-events: none;
}
.spec { fill: #FFFFFF; opacity: 0.6; filter: url(#f-spec); }
.side--card .spec { opacity: 0.25; }
.rim { fill: none; stroke: url(#g-rim); stroke-width: 1.25px; }

/* ----------------------------------------------------------- reveals -- */
/* Flow reveal: opacity and a small lift-and-settle; children stagger 80ms
   through the engine's data-sc-stagger="80". */
[data-sc-in], [data-sc-stagger] > * {
  opacity: 0;
  transform: scale(0.96) translateY(12px);
  transition: opacity 600ms var(--ease-fade), transform 600ms var(--ease-fade);
}
[data-sc-in].sc-in, [data-sc-stagger] > .sc-in { opacity: 1; transform: none; }
[data-sc-in]:focus-within, [data-sc-stagger] > :focus-within { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-sc-in], [data-sc-stagger] > * { transform: none; transition-duration: 200ms; }
  .divider__labels, .divider__mark-label, .btn, .link, .divider__cap { transition: none; }
  .divider__era-line.is-in, .divider__era-line.is-out,
  .divider__capsule.is-jump .divider__flash, .divider__capsule.is-jump .divider__pod { animation: none; }
  .divider__era-line.is-in { transform: none; }
  .divider__era-line.is-out { visibility: hidden; }
  .divider__wake { display: none; }
}

/* The two bottom labels keep the glass look without a blur, so the page never
   shows more than three backdrop-filters (cap + one object per act). */
.divider__label.glass {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(255, 255, 255, 0.08);
}