/* oyt-wet.css -- the wet look, shared by every public page (WET-SITE 2026-10-12).

   The landing (WET-LANDING 2026-10-12, approved by Jake and Tahan) set the recipe; this sheet is that recipe, lifted out
   of the landing rule for rule, so every public page lights the same way:

   - one ground for a whole page: OYT's quenched floor (#0a0908) under a fine grain, on one fixed layer behind it all
     (body::before), settling into that floor at the screen's top and bottom; html and body paint the floor alone;
   - one light, up and to the right (.room > .scene > .key-light, its beams), and scenes below lit by static lamps;
   - glass panes (.pane) whose 1px edges (.edge) brighten toward the scene's light (--la), hairlines lit in the middle;
   - gold, OYT's public tokens aliased (--wl-gold*), the one accent: the key (.key), labels, icons, figures that matter;
   - Archivo 700 for headlines and figures, Geist 400/500 for the rest, each over an Arial reshaped to its metrics so a
     late font moves nothing (vendor/fonts, OFL: THIRD-PARTY.md);
   - warm bone paper (.sheet.paper) only where a page truly needs a light section.

   A page links /oyt-tokens-public.css, then this sheet, then its own <style> for what is its alone; it preloads the
   faces its first screen sets. Only transform and opacity animate, and nothing does under reduced motion. Extend this
   sheet for a new shared need; never fork it into a page. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/vendor/fonts/archivo-700.woff2) format('woff2'); }
/* Arial Bold reshaped to Archivo 700's width and vertical metrics (fontTools, over this page's headline text), so a
   font that lands after first paint swaps in without moving a line. */
@font-face { font-family: 'Archivo Fallback'; font-weight: 700; src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 98.77%; ascent-override: 88.9%; descent-override: 21.26%; line-gap-override: 0%; }
/* and the body: Arial reshaped to Geist 400 and 500 (over the hero and nav text) */
@font-face { font-family: 'Geist Fallback'; font-weight: 400; src: local('Arial'), local('ArialMT');
  size-adjust: 104.2%; ascent-override: 88.29%; descent-override: 21.11%; line-gap-override: 9.6%; }
@font-face { font-family: 'Geist Fallback'; font-weight: 500; src: local('Arial'), local('ArialMT');
  size-adjust: 106.29%; ascent-override: 86.56%; descent-override: 20.7%; line-gap-override: 9.41%; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/vendor/fonts/geist-400.woff2) format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/vendor/fonts/geist-500.woff2) format('woff2'); }

:root {
  /* the ground: OYT's quenched floor, a hair warmer than black */
  --ground: #0a0908;
  /* inks, brightest to quietest; only the headlines and the key are full strength */
  --ink-1: #f6f2ea;
  --ink-2: #d4cec2;
  --ink-3: #9a948a;
  --ink-35: #8c867b;
  --ink-4: #6e695f;
  /* OYT gold: prod's public tokens (oyt-tokens-public.css), aliased with their own values as fallbacks, and the
     lamp ink that sits on them. Every gold on the page reads one of these four; tests/landing-hero-gold-parity.test.js
     holds the aliases to the token file and the gold to the places it is spent. */
  --wl-gold-hi: var(--a-bright, #f8cf5e);
  --wl-gold: var(--a, #f5c542);
  --wl-gold-lo: var(--a-deep, #eab52e);
  --wl-gold-ink: var(--lamp-ink, #201a0e);
  /* the fee line's small-type ink: --t2's twin, lighter, so small type reads 7:1 on the dark (p9-landing-fee) */
  --t2-small: #C7BDAA;
  --open: #8cc99a;
  /* warm light, used at low alpha everywhere */
  --light: 255 244 224;
  /* where this scene's light comes from: the edges brighten on that side (the hero's is up and to the right) */
  --la: 200deg;
  --gutter: clamp(20px, 5.6vw, 40px);
  /* headlines and figures: a sturdy sans, bold, tabular */
  --display: 'Archivo', 'Archivo Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --track: -.022em;
  /* paper: the bone scenes' inks, darkest to quietest (contrast probed on the rendered sheet: REPORT.md) */
  --p-1: #15120e;
  --p-2: #29241d;
  --p-3: #3a332a;
  --p-4: #463f35;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.45, 0, .55, 1);
  /* a soft damped spring (zeta 0.68, ~5% overshoot, settles in 0.6 s); fallback below */
  --spring: cubic-bezier(.34, 1.3, .64, 1);
}
  @supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, 0.0228, 0.0821, 0.1656, 0.2633, 0.3672, 0.4713, 0.5708, 0.6628, 0.7452, 0.8169, 0.8776, 0.9277, 0.9677, 0.9986, 1.0214, 1.0372, 1.0473, 1.0526, 1.0543, 1.0531, 1.05, 1.0455, 1.0402, 1.0346, 1.0289, 1.0235, 1.0185, 1.014, 1.0101, 1.0068, 1.004, 1.0018, 1.0001, 0.9989, 0.998, 1); }
}

* { box-sizing: border-box; }
/* html and body paint the base colour alone, --ground, and do not rubber-band (FIX-WET-OVERSCROLL 2026-10-16) */
html { background: var(--ground); color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; overscroll-behavior-y: none; }
body {
  margin: 0; color: var(--ink-3); overflow-x: hidden;
  /* the base colour and nothing over it: the backdrop is body::before, below. isolation makes body the stacking
     context its negative-z backdrop paints in, so that layer sits above this colour and under all the content */
  background-color: var(--ground); isolation: isolate; overscroll-behavior-y: none;
  font-family: 'Geist', 'Geist Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
@supports (overflow-x: clip) { body { overflow-x: visible; } }
/* ── the backdrop (OVERSCROLL 2026-10-16, FIX-WET-OVERSCROLL 2026-10-16) ───
   ONE surface behind every page, and nothing that scrolls paints a ground of its own: the grain tile over the floor
   on a single fixed layer, body::before, behind all the content. It reaches a full screen past the top and the bottom
   (and half a screen past each side), and it settles into the base colour, --ground, at the screen's top -- under
   the status bar and notch, env(safe-area-inset-top) -- and at its bottom, eased over 140 px, so html and body's own
   colour meets it at every edge. Whatever a pull or a bar shows past the page is that one flat colour:
   - #403 put the grain on a fixed layer, but on Jake's iPhone a pull past the top still opened a flat band under a
     grained edge: iOS carries a fixed layer with the page through its bounce, and what it uncovers is html's colour;
   - html and body set overscroll-behavior-y: none, so iOS 16+ and Chrome do not rubber-band the page at all (an inner
     scroll area keeps its own); where a bounce still happens, it uncovers the colour the edges already are;
   - theme-color names --ground, and apple-mobile-web-app-status-bar-style is black-translucent: the status bar shows
     this layer's top edge, which is --ground.
   Every scene's light sits on it as content (the room's, the lamps'), so a section never starts on a new sheet and
   the seams between scenes are only light fading. tests/wet-overscroll-edges.test.js holds every page that links this
   sheet to all of it, in Chromium and WebKit. */
:root { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .97 0 0 0 0 .92 .55 0 0 0 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); }
body::before {
  content: ''; position: fixed; z-index: -1; inset: -100vh -50vw; pointer-events: none;
  background: var(--grain) 0 0 / 180px 180px, var(--ground);
  /* where the screen's top and bottom are, in this layer (a screen of it lies past each), and the eased fade there */
  --bd-top: calc(100vh + env(safe-area-inset-top, 0px));
  --bd-end: calc(100% - 100vh - env(safe-area-inset-bottom, 0px));
  -webkit-mask-image: linear-gradient(180deg, transparent var(--bd-top), rgba(0,0,0,.14) calc(var(--bd-top) + 17px), rgba(0,0,0,.38) calc(var(--bd-top) + 39px),
    rgba(0,0,0,.62) calc(var(--bd-top) + 64px), rgba(0,0,0,.82) calc(var(--bd-top) + 90px), rgba(0,0,0,.94) calc(var(--bd-top) + 115px), #000 calc(var(--bd-top) + 140px),
    #000 calc(var(--bd-end) - 140px), rgba(0,0,0,.94) calc(var(--bd-end) - 115px), rgba(0,0,0,.82) calc(var(--bd-end) - 90px), rgba(0,0,0,.62) calc(var(--bd-end) - 64px),
    rgba(0,0,0,.38) calc(var(--bd-end) - 39px), rgba(0,0,0,.14) calc(var(--bd-end) - 17px), transparent var(--bd-end));
          mask-image: linear-gradient(180deg, transparent var(--bd-top), rgba(0,0,0,.14) calc(var(--bd-top) + 17px), rgba(0,0,0,.38) calc(var(--bd-top) + 39px),
    rgba(0,0,0,.62) calc(var(--bd-top) + 64px), rgba(0,0,0,.82) calc(var(--bd-top) + 90px), rgba(0,0,0,.94) calc(var(--bd-top) + 115px), #000 calc(var(--bd-top) + 140px),
    #000 calc(var(--bd-end) - 140px), rgba(0,0,0,.94) calc(var(--bd-end) - 115px), rgba(0,0,0,.82) calc(var(--bd-end) - 90px), rgba(0,0,0,.62) calc(var(--bd-end) - 64px),
    rgba(0,0,0,.38) calc(var(--bd-end) - 39px), rgba(0,0,0,.14) calc(var(--bd-end) - 17px), transparent var(--bd-end));
}
a { color: inherit; }
:focus-visible { outline: 2px solid rgb(var(--light) / .7); outline-offset: 3px; }
.tt-none { text-transform: none; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: #1e1b17; color: var(--ink-1); text-decoration: none; font-size: 14px; }
.skip-link:focus { top: 12px; }
/* parked above the page it sits in the band a pull past the top opens: clipped away until it has focus */
.skip-link:not(:focus) { clip-path: inset(50%); }

/* ── the room (the approved hero) ─────────────────────────────────────── */
.room { position: relative; isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; overflow: clip; padding-top: 68px; }

.scene {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  /* the light only: the edge falloff and the lit corner, content over the one backdrop (OVERSCROLL 2026-10-16: the
     scene no longer lays a ground and grain of its own that scroll with it). Nothing static sits OVER the moving
     light, so a phone composites three light layers and the words, not two more page-sized sheets. */
  background:
    radial-gradient(130% 100% at 60% 32%, transparent 40%, rgba(0,0,0,.42) 72%, rgba(0,0,0,.82) 100%),
    radial-gradient(120% 70% at 78% -8%, #1b1712 0%, #100e0c 42%, transparent 75%);
}
/* the page's top edge is the base colour (OVERSCROLL 2026-10-15; FIX-WET-OVERSCROLL 2026-10-16). The light reached the
   top edge at up to rgb(73 68 61), and a pull past the top opened a flat band over a lit page. The light settles into
   --ground at the very top, as the backdrop does at the screen's top, eased over the nav's height and a little more,
   so what a pull or the status bar shows carries the edge on. A small static layer over the light, never page-sized. */
.scene::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 140px; pointer-events: none;
  background: var(--ground);
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.86) 12%, rgba(0,0,0,.62) 28%, rgba(0,0,0,.38) 46%, rgba(0,0,0,.18) 64%, rgba(0,0,0,.06) 82%, transparent);
          mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.86) 12%, rgba(0,0,0,.62) 28%, rgba(0,0,0,.38) 46%, rgba(0,0,0,.18) 64%, rgba(0,0,0,.06) 82%, transparent);
}
/* the light source, up and to the right, off the page (a smaller layer on phones: 12 MB at 3x, not 23) */
.key-light {
  position: absolute; width: max(660px, 120vw); aspect-ratio: 1.25; top: calc(max(660px, 120vw) / -2.4); right: calc(max(660px, 120vw) / -3.2);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--light) / .23), rgb(var(--light) / .09) 34%, rgb(var(--light) / .025) 62%, transparent 80%);
  animation: lights-on 1.8s var(--ease-out) both, key-drift 23s var(--ease-io) -4s infinite alternate;
}
/* the beam it throws: a soft diagonal shaft, brightest near the source */
.beam {
  position: absolute; left: 50%; top: 250px; width: max(1200px, 150vw); height: max(190px, 20vw); margin-left: calc(max(1200px, 150vw) / -2);
  background: linear-gradient(180deg, transparent, rgb(var(--light) / .045) 26%, rgb(var(--light) / .13) 50%, rgb(var(--light) / .045) 74%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent 4%, rgba(0,0,0,.3) 28%, #000 62%, rgba(0,0,0,.75) 82%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 4%, rgba(0,0,0,.3) 28%, #000 62%, rgba(0,0,0,.75) 82%, transparent 100%);
  transform: rotate(-24deg);
  animation: lights-on 2.4s var(--ease-out) .1s both, beam-drift 29s var(--ease-io) -9s infinite alternate;
}
/* a thinner, fainter streak lower down, on its own clock */
.beam.thin {
  top: 64%; height: max(70px, 7vw);
  background: linear-gradient(180deg, transparent, rgb(var(--light) / .06) 45%, rgb(var(--light) / .12) 50%, rgb(var(--light) / .06) 55%, transparent);
  transform: rotate(-17deg);
  animation: lights-on 2.4s var(--ease-out) .25s both, thin-drift 37s var(--ease-io) -15s infinite alternate;
}
@keyframes lights-on { from { opacity: 0; } }
@keyframes key-drift { to { transform: translate3d(-5%, 4%, 0) scale(1.06); } }
@keyframes beam-drift { to { transform: rotate(-20deg) translate3d(-4%, 6%, 0); } }
@keyframes thin-drift { to { transform: rotate(-21deg) translate3d(5%, -5%, 0); } }


/* ── edges: a 1px border that is lit where the scene's light hits and fades away from it ── */
.edge { position: relative; }
.edge::after, .btn-ghost::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--edge-paint, linear-gradient(var(--la), rgb(var(--light) / .34), rgb(var(--light) / .07) 34%, rgb(var(--light) / .03) 64%, rgb(var(--light) / .12)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* ── nav: the hero's, fixed; clear over the hero, smoked glass once the page moves ── */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; }
.nav::before { /* the glass, faded in (opacity only) */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease-out);
  background: linear-gradient(180deg, rgba(16, 14, 12, .9), rgba(11, 10, 9, .82));
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
}
.nav::after { /* its bottom edge: a hairline lit in the middle */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; opacity: 0; transition: opacity .35s var(--ease-out);
  background: linear-gradient(90deg, transparent, rgb(var(--light) / .16) 50%, transparent);
}
.nav.scrolled::before, .nav.scrolled::after { opacity: 1; }
.nav-in {
  position: relative; width: 100%; max-width: 1240px; margin: 0 auto; height: 68px;
  padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between;
}
/* the logo: the tree mark and the name, set in Archivo 700, off-white, no effects (Jake, WET-SITE 2026-10-12: "plain,
   serious text"). The same in the nav and the footer of every public page; the painted lockup is retired. */
.nav-logo, .brand { display: inline-flex; align-items: center; gap: 9px; border-radius: 6px; color: var(--ink-1); text-decoration: none; line-height: 1; }
.nav-logo img, .brand img { height: 34px; width: auto; }
.logo-name { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; line-height: 1; color: var(--ink-1); white-space: nowrap; }
.nav-links { display: none; align-items: center; gap: 2px; }
.nav-links a {
  padding: 9px 12px; border-radius: 10px; color: #bcb6ab; text-decoration: none;   /* 4.5:1 even where the key light is brightest */
  font-size: 14px; font-weight: 500; letter-spacing: -.005em; transition: color .25s, background-color .25s;
}
@media (hover: hover) { .nav-links a:hover { color: var(--ink-1); background: rgb(var(--light) / .04); } }
.nav-links a.nav-cta { margin-left: 10px; color: var(--ink-1); padding: 9px 16px; }
.menu-btn {
  width: 44px; height: 44px; margin-right: -14px; display: grid;   /* its drawn lines (and the X) end on the gutter */ place-items: center; border: 0; border-radius: 12px;
  color: var(--ink-2); background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
/* two lines that cross into an X when the menu is open */
.menu-btn line { transform-box: view-box; transform-origin: 12px 12px; transition: transform .5s var(--spring); }
.menu-btn[aria-expanded="true"] line:first-child { transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] line:last-child { transform: translateY(-4px) rotate(-45deg); }
.menu {
  position: absolute; top: calc(100% + 8px); right: var(--gutter); width:   /* 8px under the bar's border; right edge on the gutter, with the X */
   min(260px, calc(100vw - 2 * var(--gutter)));
  padding: 6px; border-radius: 16px; display: grid;
  background: linear-gradient(180deg, #1e1b17, #131110); /* opaque: the headline must not ghost through */
  box-shadow: inset 0 1px 0 rgb(var(--light) / .1), 0 24px 48px -16px rgba(0,0,0,.8), 0 2px 8px rgba(0,0,0,.4);
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right; visibility: hidden;
  transition: opacity .2s, transform .45s var(--spring), visibility 0s .2s;
}
.menu.open { opacity: 1; transform: none; visibility: visible; transition: opacity .2s, transform .45s var(--spring), visibility 0s; }
.menu a { display: flex; align-items: center; min-height: 46px; padding: 0 14px; border-radius: 11px; color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 500; }
.menu a:active { background: rgb(var(--light) / .06); }
@media (min-width: 900px) {
  .room { padding-top: 76px; }
  .nav-in { height: 76px; }
  .nav-logo img, .brand img { height: 38px; }
  .logo-name { font-size: 20px; }
  .nav-links { display: flex; }
  .menu-btn, .menu { display: none; }
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 26px; padding: 7px 13px 7px 11px; border-radius: 999px;
  font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: .005em; color: var(--wl-gold-hi);
  background: linear-gradient(104deg, rgb(var(--light) / .035), rgb(var(--light) / .075));
  box-shadow: inset 0 1px 0 rgb(var(--light) / .07);
  --edge-paint: linear-gradient(100deg, rgb(var(--light) / .30), rgb(var(--light) / .06) 45%, rgb(var(--light) / .16));
}
.eyebrow::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--wl-gold-hi); box-shadow: 0 0 8px 1px color-mix(in srgb, var(--wl-gold-hi) 50%, transparent);
}

h1 {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-size: clamp(2.35rem, 10.3vw, 3.1rem); line-height: 1.03; letter-spacing: var(--track);
  padding-bottom: .06em; /* room for the descenders under the clipped gradient */
  background: linear-gradient(to right bottom, #fffbf3 40%, rgba(255,249,238,.62));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
h1 .l { display: block; }
h1 em { display: block; font-style: normal; /* "Own it." in OYT gold, lit from above */
  background: linear-gradient(180deg, var(--wl-gold-hi) 10%, var(--wl-gold) 75%, var(--wl-gold-lo));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.actions { display: flex; flex-direction: column; gap: 12px; margin-top: 34px; }
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 22px; border-radius: 14px; text-decoration: none; white-space: nowrap;
  font-size: 16px; font-weight: 500; letter-spacing: -.008em; line-height: 1;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: transform .6s var(--spring), box-shadow .4s var(--ease-out);
}
.btn svg { flex: none; transition: transform .6s var(--spring); }
.btn:active { transform: translateY(1px) scale(.965); transition-duration: .09s, .09s; transition-timing-function: ease-out, ease-out; }

/* the key: OYT gold, lit from above, the one full-strength colour on the page */
.key, .btn-lamp {
  color: var(--wl-gold-ink);
  background: linear-gradient(180deg, var(--wl-gold-hi) 0%, var(--wl-gold) 52%, var(--wl-gold-lo) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 232, .8),
    inset 0 -1px 0 rgba(110, 72, 0, .35),
    inset 0 0 0 1px rgba(255, 236, 168, .22),
    0 1px 1px rgba(0, 0, 0, .45),
    0 2px 8px -2px rgba(0, 0, 0, .55),
    0 10px 30px -10px color-mix(in srgb, var(--wl-gold) 50%, transparent);
}
.key::before, .btn-lamp::before { /* the gloss on the upper half */
  content: ''; position: absolute; inset: 1px 1px 52% 1px; border-radius: 13px 13px 8px 8px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0));
}
.key:active, .btn-lamp:active {
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 232, .6), inset 0 -1px 0 rgba(110, 72, 0, .3), inset 0 0 0 1px rgba(255, 236, 168, .2),
    0 1px 1px rgba(0, 0, 0, .4), 0 1px 4px -1px rgba(0, 0, 0, .5), 0 6px 18px -10px color-mix(in srgb, var(--wl-gold) 35%, transparent);
}

/* the second action: smoked glass, a lit top edge, no outline */
.glass, .btn-ghost {
  color: #e4dfd5;
  background: linear-gradient(104deg, rgb(var(--light) / .05) 5%, rgb(var(--light) / .095) 100%);
  box-shadow: inset 0 1px 0 rgb(var(--light) / .1), 0 1px 2px rgba(0, 0, 0, .4), 0 10px 24px -14px rgba(0, 0, 0, .7);
  --edge-paint: linear-gradient(180deg, rgb(var(--light) / .16), rgb(var(--light) / .05) 60%, rgb(var(--light) / .08));
}
.glass svg { color: var(--ink-3); }
.nav-cta.glass { height: 38px; display: inline-flex; align-items: center; border-radius: 11px; }

@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
  .btn:hover svg { transform: translateX(2px); }
  .key:hover, .btn-lamp:hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 252, 232, .85), inset 0 -1px 0 rgba(110, 72, 0, .35), inset 0 0 0 1px rgba(255, 236, 168, .26),
      0 1px 1px rgba(0, 0, 0, .45), 0 4px 12px -2px rgba(0, 0, 0, .55), 0 16px 40px -12px color-mix(in srgb, var(--wl-gold) 62%, transparent);
  }
  .glass:hover, .btn-ghost:hover { box-shadow: inset 0 1px 0 rgb(var(--light) / .14), 0 1px 2px rgba(0, 0, 0, .4), 0 14px 30px -14px rgba(0, 0, 0, .8); }
  .btn:active { transform: translateY(1px) scale(.965); }
}

/* a hairline lit in the middle: the hero's bottom edge, and the seams between chapters below */
.horizon { position: relative; height: 1px; width: min(760px, 84vw); margin: 0 auto;
  background: linear-gradient(90deg, transparent, rgb(var(--light) / .22) 50%, transparent); }
.horizon::after { content: ''; position: absolute; left: 20%; right: 20%; top: -40px; height: 80px;
  background: radial-gradient(closest-side, rgb(var(--light) / .05), transparent); }

@media (min-width: 560px) {
  .actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

/* ═══ BELOW THE HERO: one scene per section ═══════════════════════════════
   A scene = a section on the shared ground + its own static light (.lamp, sometimes a .shaft) + panes whose edges
   brighten toward that light (--la). Lamps overflow their section up and down, so the seams are light fading into
   light; overflow-x: clip keeps them from widening the page. Nothing here animates on its own. */
.sec, .band, .pricing { position: relative; isolation: isolate; padding: 88px 0 24px; overflow-x: clip; }
:is(.sec, .band, .pricing) > .lamp, :is(.sec, .band, .pricing) > .shaft { position: absolute; z-index: -1; pointer-events: none; }
.lamp { border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--light) / var(--lamp-a, .08)), rgb(var(--light) / calc(var(--lamp-a, .08) * .38)) 42%, rgb(var(--light) / calc(var(--lamp-a, .08) * .1)) 68%, transparent); }
.shaft {
  height: 180px; left: 50%; width: 1500px; margin-left: -750px;
  background: linear-gradient(180deg, transparent, rgb(var(--light) / .035) 28%, rgb(var(--light) / .09) 50%, rgb(var(--light) / .035) 72%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent 6%, rgba(0,0,0,.35) 30%, #000 62%, rgba(0,0,0,.6) 84%, transparent);
          mask-image: linear-gradient(90deg, transparent 6%, rgba(0,0,0,.35) 30%, #000 62%, rgba(0,0,0,.6) 84%, transparent);
}
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.head { max-width: 640px; }
.head.c { margin: 0 auto; text-align: center; }
.kicker { margin: 0 0 22px; }
.head.c .kicker { margin-left: auto; margin-right: auto; }
h2 {
  margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.95rem, 7.9vw, 2.35rem); line-height: 1.07; letter-spacing: var(--track);
  padding-bottom: .06em; text-wrap: balance;
  background: linear-gradient(to right bottom, #fffbf3 45%, rgba(255,249,238,.66));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.lede { margin: 22px 0 0; text-wrap: pretty; font-size: 17px; line-height: 1.62; letter-spacing: -.003em; color: var(--ink-3); max-width: 34rem; }
.head.c .lede, .head.c .p-intro, .head.c .faq-sub { margin-left: auto; margin-right: auto; text-wrap: balance; }
h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1.22; letter-spacing: -.012em; color: var(--ink-1); }

/* lit glass: a warm face lit from the scene's side, a top highlight, a soft drop */
.pane {
  border-radius: 22px;
  background:
    linear-gradient(var(--la), rgb(var(--light) / .085) 0%, rgb(var(--light) / .028) 34%, rgb(var(--light) / .012) 66%, rgb(var(--light) / .035) 100%),
    linear-gradient(180deg, rgba(27, 24, 20, .82), rgba(14, 12, 10, .88));
  box-shadow: inset 0 1px 0 rgb(var(--light) / .1), inset 0 -1px 0 rgba(0, 0, 0, .4), 0 34px 70px -34px rgba(0, 0, 0, .9), 0 12px 26px -18px rgba(0, 0, 0, .6);
}
.hair { height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--light) / .14) 50%, transparent); }
.ico { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--wl-gold);
  background: linear-gradient(var(--la), rgb(var(--light) / .12), rgb(var(--light) / .03)); box-shadow: inset 0 1px 0 rgb(var(--light) / .12), 0 4px 10px -6px rgba(0,0,0,.6); }
.ico svg { width: 19px; height: 19px; }
.mk-s { stroke: rgb(var(--light) / .34); stroke-width: 1.4; }
.mk-a { stroke: var(--wl-gold); stroke-width: 1.5; }
.num-n { font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--wl-gold); font-variant-numeric: tabular-nums lining-nums; }
.tlink { color: var(--ink-2); text-decoration: underline; text-decoration-color: rgb(var(--light) / .28); text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
@media (hover: hover) { .tlink:hover { color: var(--ink-1); text-decoration-color: rgb(var(--light) / .6); } }

/* ── footer: the last light, a horizon and a faint glow under it ── */
.s-foot { --la: 180deg; padding: 0 0 104px; }
.s-foot .lamp { --lamp-a: .075; left: 50%; top: -60px; width: min(1000px, 120vw); height: 380px; transform: translateX(-50%); }
.s-foot .horizon { margin-bottom: 56px; }
.f-ribbon { max-width: 54rem; margin: 0 auto; text-align: center; font-size: 13px; line-height: 1.85; letter-spacing: .005em; color: var(--ink-35); }
.f-marks { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 21px; margin: 40px 0 0; }
.f-marks img { display: block; flex: none; width: auto; object-fit: contain; }
.f-marks .f-mark-nvidia { height: 42px; border-radius: 4px; }
.f-marks-rule { flex: none; width: 1px; height: 32px; background: linear-gradient(180deg, transparent, rgb(var(--light) / .25), transparent); }
/* the footer's logo: the nav's mark, drawn large beside NVIDIA's badge, so the badge stays clearly the smaller mark (the
   owner's rule of 2026-09-16: its frame at most half the tree's visible height, its area at most four-fifths of the
   tree's; Jake, 2026-10-13). One row from 600px; on a phone the logo, a short level hairline, then the badge. */
.f-marks .f-brand { gap: 14px; }
.f-marks .f-brand img { height: 84px; }
.f-marks .f-brand .logo-name { font-size: 30px; }
@media (max-width: 599px) {
  .f-marks { flex-direction: column; gap: 22px; }
  .f-marks-rule { width: 32px; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--light) / .25), transparent); }
}
@media (min-width: 600px) { .f-marks .f-brand .logo-name { font-size: 36px; } }
.f-row { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 40px; text-align: center; font-size: 14px; line-height: 1.6; color: var(--ink-35); }
.f-row p { margin: 0; }
.f-company p + p { margin-top: 4px; }
.f-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; }
.f-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--ink-2); text-decoration: none; font-size: 14px; }
@media (hover: hover) { .f-links a:hover { color: var(--ink-1); } }
.f-social { display: flex; justify-content: center; gap: 8px; margin-top: 6px; }
.f-social a { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--ink-3);
  background: linear-gradient(180deg, rgb(var(--light) / .06), rgb(var(--light) / .02)); box-shadow: inset 0 0 0 1px rgb(var(--light) / .08), inset 0 1px 0 rgb(var(--light) / .08); }
.f-social svg { width: 16px; height: 16px; }
.f-end { margin-top: 30px; }
.f-tagline { color: var(--ink-3); }
/* a page's footer with no ribbon and no marks: its first row sits under the horizon's own margin */
.s-foot .wrap > .f-row:first-child { margin-top: 0; }
.f-legal { max-width: 46rem; margin: 26px auto 0; text-align: center; font-size: 13px; line-height: 1.6; color: var(--ink-35); }

/* ── the shared chrome this page places (the page before's rules, kept): the install banner (oyt-install.js) keeps its
   box at the floor and rides above the sticky bar by translate, from the --dock-h the bar's script writes, so its
   coming and going is no layout shift; the toasts sit under the nav. Position only: their look is their own. ── */
#oyt-install-banner {
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  translate: 0 calc(-1 * var(--dock-h, 0px));
  transition: translate .5s var(--ease-out);
}
#oyt-toasts { top: 76px !important; right: 24px !important; z-index: 49 !important; }
@media (max-width: 560px) { #oyt-toasts { top: 76px !important; left: 16px !important; right: 16px !important; } }

/* ── the pricing cards: the landing's pricing, the pricing page and the checkout ── */
.p-cards { display: grid; gap: 16px; max-width: 980px; margin: 22px auto 0; }
.p-card { padding: 30px 24px 28px; display: flex; flex-direction: column; }
.p-card.lic { --lamp-boost: 1;
  background:
    radial-gradient(120% 60% at 50% -10%, rgb(var(--light) / .16), rgb(var(--light) / .03) 45%, transparent 70%),
    linear-gradient(var(--la), rgb(var(--light) / .095) 0%, rgb(var(--light) / .03) 34%, rgb(var(--light) / .012) 66%, rgb(var(--light) / .04) 100%),
    linear-gradient(180deg, rgba(30, 26, 21, .86), rgba(14, 12, 10, .9));
  --edge-paint: linear-gradient(var(--la), rgb(var(--light) / .48), rgb(var(--light) / .1) 32%, rgb(var(--light) / .035) 64%, rgb(var(--light) / .14));
}
.p-eye { font-size: 13px; font-weight: 500; letter-spacing: .01em; color: var(--ink-35); }
.p-amt { margin: 14px 0 0; font-family: var(--display); font-weight: 700; font-size: 68px; line-height: .95; letter-spacing: -.035em; color: var(--ink-1); font-variant-numeric: tabular-nums lining-nums; }
.p-amt sup { font-size: .42em; vertical-align: .95em; margin-right: .04em; color: var(--ink-2); }
.p-period { margin-top: 10px; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.p-fee { margin: 18px 0 0; font-size: 15px; line-height: 1.6; color: var(--t2-small); }
.p-fee a { color: var(--t1); }
.p-card .hair { margin: 24px 0 20px; }
.p-eye-list { margin-bottom: 6px; }
.p-feats { display: grid; }
.p-feat { display: flex; align-items: flex-start; gap: 13px; padding: 9px 0; font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.p-feat strong { font-weight: 500; color: var(--ink-1); }
.p-chk { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-1);
  background: linear-gradient(180deg, rgb(var(--light) / .14), rgb(var(--light) / .04)); box-shadow: inset 0 0 0 1px rgb(var(--light) / .14), inset 0 1px 0 rgb(var(--light) / .16); }
.p-chk svg { width: 11px; height: 11px; }
.p-bot { display: flex; flex: 1; flex-direction: column; }
.p-cell { display: flex; }
.p-cell > .p-card { flex: 1; }
.p-monthly-cta { margin: auto 0 0; padding-top: 22px; }
.p-monthly-cta .btn { width: 100%; }

/* ── paper: the comparison and pricing, on a warm bone sheet that floats in the dark: lit paper in a dim room, not
   a lightbox. Its own light is a dim wash from above that falls off to the edges; the reflection and the edges are
   soft. Black is the accent on paper; gold stays for labels, the key and the figures that matter. ── */
.sheet {
  position: relative; isolation: isolate; margin: 0 8px; padding: 52px 0 4px; border-radius: 24px; color: var(--p-3);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .15 0 0 0 0 .08 .5 0 0 0 -.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E") 0 0 / 180px 180px,
    radial-gradient(85% 45% at 50% 0%, rgba(246, 238, 222, .34) 0%, rgba(246, 238, 222, 0) 72%),
    radial-gradient(150% 100% at 50% 30%, transparent 50%, rgba(52, 38, 20, .15) 100%),
    linear-gradient(180deg, #ddd3c1, #d6cbb7 55%, #cdc1aa);
  box-shadow: inset 0 1px 0 rgba(250, 242, 226, .45), inset 0 -1px 0 rgba(52, 38, 20, .18), 0 1px 2px rgba(0, 0, 0, .45),
    0 40px 110px -40px rgba(0, 0, 0, .95), 0 0 90px -34px rgb(var(--light) / .1);
  --edge-paint: linear-gradient(var(--la), rgba(250, 242, 226, .5), rgba(250, 242, 226, .14) 30%, rgba(70, 54, 30, .2) 75%, rgba(70, 54, 30, .3));
}
.sheet::before { /* the wet reflection: one soft diagonal band */
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(112deg, transparent 16%, rgba(250, 242, 226, .14) 30%, rgba(250, 242, 226, 0) 46%);
}
.sheet .wrap { padding-left: 18px; padding-right: 18px; }
.paper :focus-visible { outline-color: var(--p-1); }   /* the light ring would vanish on bone */
.paper h2 { background: linear-gradient(to right bottom, var(--p-1) 50%, #3d362c); -webkit-background-clip: text; background-clip: text; }
.paper .lede { color: var(--p-3); }
.paper .eyebrow { /* black pill, gold words */
  color: var(--wl-gold-hi); background: linear-gradient(180deg, #25211c, #0f0d0b);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 18px -10px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .1);
  --edge-paint: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04));
}
.paper .pane { /* a lighter leaf of the same bone, raised by its shadow rather than by glare */
  background: linear-gradient(var(--la), #e6ddcd, #e1d8c6 55%, #dbd0bd);
  box-shadow: inset 0 1px 0 rgba(250, 242, 226, .5), 0 1px 2px rgba(52, 38, 20, .14), 0 22px 44px -28px rgba(40, 28, 12, .5);
  --edge-paint: linear-gradient(var(--la), rgba(250, 242, 226, .55), rgba(70, 54, 30, .12) 45%, rgba(70, 54, 30, .2));
}
.paper .hair { background: linear-gradient(90deg, transparent, rgba(52, 38, 20, .2) 50%, transparent); }
.paper .tlink { color: var(--p-2); text-decoration-color: rgba(40, 30, 15, .32); }
.paper .key { box-shadow: inset 0 1px 0 rgba(255, 252, 232, .8), inset 0 -1px 0 rgba(110, 72, 0, .35), inset 0 0 0 1px rgba(160, 110, 0, .18),
    0 1px 1px rgba(60, 40, 0, .3), 0 2px 8px -2px rgba(60, 40, 0, .35), 0 12px 26px -12px rgba(200, 140, 0, .55); }
.paper .btn.glass { /* the secondary action on paper: black */
  color: #f6f2ea; background: linear-gradient(180deg, #2a251f, #110f0c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(0, 0, 0, .3), 0 12px 24px -14px rgba(0, 0, 0, .65);
  --edge-paint: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .03));
}
.paper .btn.glass svg { color: var(--wl-gold-hi); }
/* a figure that matters gets OYT's highlighter */
.mark { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--wl-gold-lo) 60%, transparent) 58%, color-mix(in srgb, var(--wl-gold-lo) 60%, transparent) 92%, transparent 92%); padding: 0 .1em; margin: 0 -.05em; }

/* the pricing cards on paper: the license is the black card, the monthly plan (and the trial) the bone leaf */
.paper .p-card:not(.lic) .p-eye, .paper .p-card:not(.lic) .p-eye-list { color: var(--p-4); }
.paper .p-card:not(.lic) .p-amt { color: var(--p-1); }
.paper .p-card:not(.lic) .p-amt sup, .paper .p-card:not(.lic) .p-period { color: var(--p-2); }
.paper .p-card:not(.lic) .p-fee, .paper .p-card:not(.lic) .p-feat { color: var(--p-3); }
.paper .p-card:not(.lic) .p-feat strong { color: var(--p-1); }
.paper .p-card:not(.lic) .p-chk { color: var(--wl-gold-hi); background: linear-gradient(180deg, #2a251f, #100e0c); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.paper .p-card.lic { /* the black license card, its top edge catching gold */
  color: var(--ink-3);
  background:
    radial-gradient(120% 60% at 50% -10%, rgb(var(--light) / .15), rgb(var(--light) / .03) 45%, transparent 70%),
    linear-gradient(var(--la), rgb(var(--light) / .08), rgb(var(--light) / .02) 40%, rgb(var(--light) / .03)),
    linear-gradient(180deg, #221e19, #0c0b09);
  box-shadow: inset 0 1px 0 rgb(var(--light) / .16), 0 2px 4px rgba(0, 0, 0, .3), 0 40px 80px -34px rgba(0, 0, 0, .8);
  --edge-paint: linear-gradient(var(--la), color-mix(in srgb, var(--wl-gold-hi) 75%, transparent), color-mix(in srgb, var(--wl-gold-hi) 14%, transparent) 30%, rgb(var(--light) / .05) 65%, rgb(var(--light) / .16));
}
.paper .lic .p-eye { color: var(--wl-gold-hi); }
.paper .lic .p-amt { background: linear-gradient(180deg, var(--wl-gold-hi) 10%, var(--wl-gold) 80%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.paper .lic .hair { background: linear-gradient(90deg, transparent, rgb(var(--light) / .16) 50%, transparent); }
.paper .lic .tlink { color: var(--ink-2); text-decoration-color: rgb(var(--light) / .3); }
.paper .lic .p-chk { color: var(--wl-gold-ink); background: linear-gradient(180deg, var(--wl-gold-hi), var(--wl-gold)); box-shadow: inset 0 1px 0 rgba(255, 250, 220, .6), 0 2px 6px -2px color-mix(in srgb, var(--wl-gold) 45%, transparent); }

@media (min-width: 720px) {
  .sheet { width: calc(100% - 48px); max-width: 1280px; margin: 0 auto; padding: 88px 0 24px; border-radius: 32px; }
  .sheet .wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
}

/* ── wider screens ── */
@media (min-width: 720px) {
  .sec, .band, .pricing { padding: 120px 0 56px; }
  h2 { font-size: clamp(2.3rem, 3.6vw, 3.1rem); }
  .lede { font-size: 18px; }
  .p-cards { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
  .p-card { padding: 36px 34px 32px; }
  .f-row { flex-direction: row; justify-content: space-between; align-items: flex-start; text-align: left; }
  .f-side { display: flex; flex-direction: column; align-items: flex-end; }
  .f-links { justify-content: flex-end; }
  .f-social { justify-content: flex-end; }
  .f-end { align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .btn, .btn svg, .menu, .menu-btn line, .nav::before, .nav::after { transition-duration: .01s !important; transition-delay: 0s !important; }
  /* and every tint, ring and slide the sheet eases (the autofill hold at 9999s aside: it is no motion, it keeps a
     field's ground) */
  .nav-links a, .tlink, .field select, .field textarea, .seg-item, .checkbox input, .co-consent input,
  #oyt-install-banner { transition-duration: .01s !important; transition-delay: 0s !important; }
  /* (its own rule: a browser that does not know the autofill state drops this one alone) */
  .field input:not(:-webkit-autofill) { transition-duration: .01s !important; transition-delay: 0s !important; }
}
@media (forced-colors: active) {
  h1, h2 { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
}

/* ═══ THE REST OF THE PUBLIC SITE (WET-SITE 2026-10-12) ═══════════════════════════════════════════════════════════
   The landing's room, light, panes and type, cut to a page's size. Nothing below is on the landing. */

/* a page's nav: the landing's bar, scrolling away with the page (no script, no glass to fade in), its few links shown
   at every width, each a 44 px target */
.nav.nav-page { position: absolute; }
/* a visitor who came from the app gets oyt-back.js's fixed Back strip over the page's top: the bar starts under it */
html.oyt-back-on .nav.nav-page { top: calc(52px + env(safe-area-inset-top, 0px)); }
/* the logo's link is a 44px target round the mark and the name, centred in it, so nothing on the bar moves */
.nav-page .nav-logo { min-height: 44px; }
.nav-page .nav-links { display: flex; }
.nav-page .nav-links a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 899px) {
  .nav-page .nav-links a { padding: 0 9px; }
  .nav-page .nav-links a.nav-cta { margin-left: 4px; padding: 0 12px; }
}
@media (max-width: 399px) { .nav-page .nav-links a { padding: 0 5px; } }

/* a page's first scene: the hero's room and its light, as tall as the page's words. The light is on when the page
   arrives and holds (only the landing's hero comes on and drifts, under its pause control). */
.room.room-page { min-height: 0; }
/* its light fades into the page's ground below, so the room never ends on an edge */
.room-page .scene { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
/* no entrance: a fade of these layers repaints the screen's whole width every frame in WebKit, and a tap on Back in
   the installed app waited the fade out (the walk's O6, Back from pricing.html: 8.5 s, main 5.6 s; WET-SITE 026) */
.room-page :is(.key-light, .beam), .room-center :is(.key-light, .beam) { animation: none; }
.page-head { width: 100%; max-width: 1180px; margin: 0 auto; padding: 40px var(--gutter) 56px; }
.page-head .eyebrow { margin-bottom: 22px; }
.page-head h1 { font-size: clamp(2.15rem, 9.2vw, 2.8rem); line-height: 1.05; text-wrap: balance; }
.page-head .lede { max-width: 36rem; }
@media (min-width: 960px) {
  .page-head { padding: 64px var(--gutter) 72px; }
  .page-head h1 { font-size: clamp(3rem, 4.2vw, 3.7rem); }
}

/* a page that is one message (not found, offline, a payment's outcome): the room fills the screen, the words centred */
.room.room-center { justify-content: center; }
/* its room is the page's end, and the light's falloff darkened that end to rgb(7 6 6) over the backdrop's ~12: a pull
   past the bottom opened a step. The light settles into the backdrop over the last 140 px, the top's curve turned over
   (OVERSCROLL 2026-10-16; its lights hold still, so the mask costs no frame) */
.room-center .scene {
  -webkit-mask-image: linear-gradient(0deg, transparent, rgba(0,0,0,.14) 17px, rgba(0,0,0,.38) 39px, rgba(0,0,0,.62) 64px, rgba(0,0,0,.82) 90px, rgba(0,0,0,.94) 115px, #000 140px);
          mask-image: linear-gradient(0deg, transparent, rgba(0,0,0,.14) 17px, rgba(0,0,0,.38) 39px, rgba(0,0,0,.62) 64px, rgba(0,0,0,.82) 90px, rgba(0,0,0,.94) 115px, #000 140px);
}
.center-stack { width: 100%; max-width: 580px; margin: 0 auto; padding: 32px var(--gutter) 72px; text-align: center; }
.center-stack .actions { justify-content: center; }
.center-stack .lede { margin-left: auto; margin-right: auto; }
/* under oyt-back.js's bar (the installed app) the room fills what is left of the screen, so the page does not
   scroll by the bar's height; the bar's own expression (its variable can come up empty on the body in WebKit) */
html.oyt-back-on .room-center { min-height: calc(100svh - 52px - env(safe-area-inset-top, 0px)); }
/* the message: a step under a page head's headline; a long one balances over two lines on a phone */
.center-stack h1 { font-size: clamp(1.75rem, 7.4vw, 2.5rem); line-height: 1.08; text-wrap: balance; }
/* centred lines balance (as .head.c's lede does) */
.center-stack .lede { text-wrap: balance; }
/* a link inside the message reads as one (the .prose link), with a 44 target round its words */
.center-stack .lede a { position: relative; color: var(--ink-1); white-space: nowrap; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--wl-gold) 55%, transparent); }
.center-stack .lede a::before { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); }
@media (hover: hover) { .center-stack .lede a:hover { text-decoration-color: var(--wl-gold); } }


/* ── forms and messages (login, checkout): the field, the segmented control, the checkbox, the notice. .co-consent and
   .co-say are checkout.html's own label and message, their markup pinned by its tests, so they join the shared rules
   rather than copy them. The checkbox is .checkbox: the landing's .check is its gold tick. ── */
.field label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink-2); }
.field input, .field select, .field textarea {
  display: block; width: 100%; height: 52px; margin: 0; padding: 0 16px; border-radius: 14px;
  font: inherit; font-size: 16px; line-height: 1.3; color: var(--ink-1); caret-color: var(--wl-gold);
  background: linear-gradient(180deg, rgba(0, 0, 0, .44), rgba(0, 0, 0, .26));
  border: 1px solid rgb(var(--light) / .11); border-top-color: rgb(var(--light) / .06); border-bottom-color: rgb(var(--light) / .2);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45), 0 1px 0 rgb(var(--light) / .04);
  outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.field textarea { height: auto; min-height: 104px; padding: 12px 16px; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-35); opacity: 1; }
@media (hover: hover) { .field input:hover, .field select:hover, .field textarea:hover { border-color: rgb(var(--light) / .17); border-bottom-color: rgb(var(--light) / .26); } }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: color-mix(in srgb, var(--wl-gold) 72%, transparent);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45), 0 0 0 3px color-mix(in srgb, var(--wl-gold) 22%, transparent), 0 0 22px -6px color-mix(in srgb, var(--wl-gold) 45%, transparent);
}
/* the browser's autofill paints its own plate: the well's own colour and ink instead */
.field input:-webkit-autofill, .field input:-webkit-autofill:hover, .field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink-1); caret-color: var(--wl-gold);
  box-shadow: inset 0 0 0 100px #14120f, inset 0 2px 5px rgba(0, 0, 0, .45);
  transition: background-color 9999s 0s;
}
.field-hint { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.field-error { margin: 8px 0 0; font-size: 13px; line-height: 1.5; font-weight: 500; color: #ffa494; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: rgba(255, 150, 130, .55); }
.field-row { display: grid; grid-template-columns: 1fr; }
@media (min-width: 480px) { .field-row { grid-template-columns: 1fr 1fr; gap: 12px; } }

.seg { display: flex; gap: 4px; padding: 4px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, .24));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5), inset 0 0 0 1px rgb(var(--light) / .07), 0 1px 0 rgb(var(--light) / .05); }
.seg-item { flex: 1; min-height: 44px; margin: 0; padding: 0 12px; border: 0; border-radius: 12px; background: transparent;
  font: inherit; font-size: 15px; font-weight: 500; line-height: 1.2; color: var(--ink-2); cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: color .25s var(--ease-out), background-color .25s var(--ease-out), box-shadow .25s var(--ease-out), transform .45s var(--spring); }
@media (hover: hover) { .seg-item:not(.on):not([aria-selected="true"]):hover { color: var(--ink-1); } }
/* a segment answers a press, as a key does */
.seg-item:active { transform: scale(.97); transition-duration: .09s; }
.seg-item.on, .seg-item[aria-selected="true"] { color: var(--ink-1);
  background: linear-gradient(180deg, rgb(var(--light) / .13), rgb(var(--light) / .06));
  box-shadow: inset 0 1px 0 rgb(var(--light) / .16), 0 1px 2px rgba(0, 0, 0, .5), 0 6px 14px -8px rgba(0, 0, 0, .7); }

.checkbox, .co-consent { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; font-weight: 500; color: var(--ink-2); cursor: pointer; }
.checkbox input, .co-consent input { flex: none; width: 22px; height: 22px; margin: 0; border-radius: 7px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .46), rgba(0, 0, 0, .26)) center / 100% 100% no-repeat;
  border: 1px solid rgb(var(--light) / .42); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.checkbox input:checked, .co-consent input:checked { border-color: transparent;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23201a0e' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px 15px no-repeat,
    linear-gradient(180deg, var(--wl-gold-hi), var(--wl-gold));
  box-shadow: inset 0 1px 0 rgba(255, 250, 220, .6), 0 2px 8px -2px color-mix(in srgb, var(--wl-gold) 45%, transparent); }
.checkbox input:focus-visible, .co-consent input:focus-visible { outline: 2px solid var(--wl-gold); outline-offset: 3px; }
.paper .checkbox, .paper .co-consent { color: var(--p-1); }
.paper .checkbox input, .paper .co-consent input { border-color: #6b6152; background: linear-gradient(180deg, #d2c7b3, #e3dac9) center / 100% 100% no-repeat; box-shadow: inset 0 1px 2px rgba(52, 38, 20, .28); }
.paper .checkbox input:checked, .paper .co-consent input:checked { border-color: transparent;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23f8cf5e' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px 15px no-repeat,
    linear-gradient(180deg, #2a251f, #110f0c);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.paper .checkbox input:focus-visible, .paper .co-consent input:focus-visible { outline-color: var(--p-1); }

.notice, .co-say { padding: 12px 16px; border-radius: 14px; font-size: 15px; line-height: 1.55; color: var(--ink-1);
  background: linear-gradient(180deg, rgb(var(--light) / .08), rgb(var(--light) / .045));
  box-shadow: inset 0 1px 0 rgb(var(--light) / .1), inset 0 0 0 1px rgb(var(--light) / .08); }
.notice.is-error, .co-say.is-error { background: linear-gradient(180deg, rgba(229, 96, 76, .2), rgba(229, 96, 76, .12));
  box-shadow: inset 0 1px 0 rgba(255, 180, 160, .2), inset 0 0 0 1px rgba(255, 130, 110, .32); }
.notice.is-ok { background: linear-gradient(180deg, rgba(140, 201, 154, .17), rgba(140, 201, 154, .09));
  box-shadow: inset 0 1px 0 rgba(190, 240, 200, .16), inset 0 0 0 1px rgba(140, 201, 154, .3); }
.notice a, .co-say a { color: var(--wl-gold-hi); font-weight: 500; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--wl-gold-hi) 55%, transparent); }

/* long reading (Terms, Privacy, the manifesto, the Guides): a 42rem measure of Geist at 16 (17 wider), Archivo heads,
   gold-tipped list markers, links that read as links */
.prose { max-width: 42rem; font-size: 16px; line-height: 1.65; letter-spacing: -.003em; color: var(--ink-3); text-wrap: pretty; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.05em; }
.prose h2 { margin: 2.1em 0 .6em; font-size: clamp(1.45rem, 5.6vw, 1.8rem); line-height: 1.15; }
.prose h3 { margin: 1.7em 0 .5em; font-size: 18px; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li { margin: .35em 0; padding-left: .2em; }
.prose li::marker { color: var(--wl-gold); }
.prose strong { font-weight: 500; color: var(--ink-1); }
.prose a { color: var(--ink-1); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--wl-gold) 55%, transparent); }
@media (hover: hover) { .prose a:hover { text-decoration-color: var(--wl-gold); } }
.prose blockquote { margin: 1.4em 0; padding: 2px 0 2px 18px; border-left: 2px solid color-mix(in srgb, var(--wl-gold) 55%, transparent); color: var(--ink-2); }
.prose table { width: 100%; margin: 1.2em 0; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { padding: 10px 12px 10px 0; text-align: left; vertical-align: top; border-bottom: 1px solid rgb(var(--light) / .1); }
.prose th { font-weight: 500; color: var(--ink-2); }
@media (min-width: 720px) { .prose { font-size: 17px; line-height: 1.7; } }

/* ── paper (print): dark words on white. The light, the glass and the gradients are the screen's; a printer gets the
   words, the hairlines and the footer, never the header (the public palette's own print block keeps cards whole). ── */
@media print {
  :root { color-scheme: light; --ink-1: #1d1a16; --ink-2: #2b2620; --ink-3: #3d362d; --ink-35: #4a4237; --ink-4: #5a5145; --t2-small: #3d362d; }
  html, body { background: #fff !important; }
  .nav, .scene, .lamp, .shaft, .horizon, .hs-pause, .bar-buy, .skip-link, .flag-wrap, #oyt-install-banner, body::before { display: none !important; }
  .room { min-height: 0 !important; padding-top: 0 !important; }
  .page-head, .center-stack { padding-top: 0; padding-bottom: 24px; }
  .sec, .band, .pricing, .s-foot { padding: 24px 0 0; }
  .eyebrow { padding: 0; }
  .eyebrow::before { display: none; }
  .pane, .sheet { border: 1px solid rgba(37, 34, 32, .25); }
  .hair { background: linear-gradient(90deg, transparent, rgba(37, 34, 32, .3) 50%, transparent); }
  .prose a, .tlink { color: inherit; }
  h1, h1 em, h2, .p-amt, .paper .lic .p-amt { background: none !important; color: var(--ink-1) !important; -webkit-text-fill-color: currentColor !important; }
  .pane, .sheet, .sheet::before, .p-card, .paper .p-card.lic, .glass, .key, .key::before, .eyebrow, .ico, .p-chk { background: none !important; box-shadow: none !important; }
  .edge::after { display: none; }
  .key, .glass, .eyebrow, .paper .lic .p-eye { color: var(--ink-1) !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1 !important; transform: none !important; }
  main .wrap { content-visibility: visible !important; }
}