/* Otoia (working name), the website — Lumen 4: Lumen 3 with the first Lumen's hero (drop-test marks, mono
   bar, crop marks, the sentence typed as a description). White light on cobalt blue, like a negative print, and as little
   else as possible; the ring alone keeps its real colours. One look on purpose: the page is blue whatever the system theme. Text is white
   throughout (only white keeps 4.5:1 on this blue); hierarchy comes from size and weight. */
:root {
  --blue: #0a63fd;             /* the page, the reference print's blue */
  --blue-deep: #0646c8;        /* the terminal; text on white */
  --line: rgba(255, 255, 255, .34);
  --line-2: rgba(255, 255, 255, .7);
  --glass: rgba(255, 255, 255, .075);
  --glow: 0 0 22px rgba(214, 233, 255, .55);
  --sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --pad: clamp(16px, 2.6vw, 40px);
  --gut: clamp(20px, 3vw, 48px);       /* content inside the grid's margin lines */
  --ease: cubic-bezier(.2, .9, .1, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; background: var(--blue); }
html.reduce { scroll-behavior: auto; }
body { margin: 0; background: var(--blue); color: #fff; font-family: var(--sans); font-size: 17px; line-height: 1.45; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* film grain over everything, as in the print (main.js makes the tile) */
body::after { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; background-image: var(--grain, none); background-size: 180px 180px; opacity: .9; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 70; background: #fff; color: var(--blue-deep); padding: 8px 12px; }
.skip:focus { left: 8px; }
a { color: inherit; }
:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
button { font: inherit; color: inherit; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; border: 1.5px solid #fff; border-radius: 999px; background: transparent; padding: 13px 22px; font-weight: 700; font-size: 16px; letter-spacing: -.01em; cursor: pointer; text-decoration: none; color: #fff; transition: background .2s, color .2s, box-shadow .3s, transform .18s var(--ease); }
.btn.small { padding: 8px 16px; font-size: 14px; }
.btn.primary { background: #fff; color: var(--blue-deep); box-shadow: 0 0 26px rgba(214, 233, 255, .45); }
.btn.primary:hover { box-shadow: 0 0 0 5px rgba(255, 255, 255, .22), 0 0 40px rgba(230, 242, 255, .8); }
.btn.quiet:hover { background: rgba(255, 255, 255, .14); }
.btn:active { transform: translateY(2px); }

/* ------------------------------------------------------------ put it on */
.hero { position: relative; height: 100svh; min-height: 600px; overflow: hidden; isolation: isolate; }
/* its bottom fades into the page, so the hand and the light corner don't end on a hard edge */
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: max(90px, 18%); z-index: 2; pointer-events: none; background: linear-gradient(rgba(10, 99, 253, 0), var(--blue) 92%); }
/* the print's light edges: paler toward the right-hand corners, where no text sits */
.haze { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 50% at 104% -6%, rgba(176, 216, 255, .7), rgba(176, 216, 255, 0) 70%),
    radial-gradient(55% 60% at 104% 106%, rgba(190, 224, 255, .6), rgba(190, 224, 255, 0) 70%),
    radial-gradient(45% 50% at -6% 108%, rgba(120, 186, 255, .35), rgba(120, 186, 255, 0) 70%);
}
.stage { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hud .lead { pointer-events: auto; }

/* the bar, as in the first Lumen: sections in mono, a hairline under it */
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; text-transform: uppercase; }
/* the top bar stays at the top as the page scrolls: the wordmark, the sections centred, then sound
   and Reserve */
.bar { position: fixed; z-index: 50; left: 0; right: 0; top: 0; height: calc(64px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--pad) 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px;
  border-bottom: 1px solid var(--line); background: rgba(10, 99, 253, .72); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.bar .logo { grid-column: 1; justify-self: start; }
.bar .nav { grid-column: 2; }
.bar-end { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 14px; }
.logo { font-weight: 900; font-size: 24px; letter-spacing: -.04em; text-decoration: none; }
/* the wordmark (Otoia Ring's "Light" logo, media/otoia-wordmark*.svg): the O is the ring seen from
   the side; 26 px tall here (it softens under 24) */
.logo { display: inline-flex; align-items: flex-start; }
.logo img { display: block; height: 26px; width: auto; }
.nav { display: flex; gap: 52px; white-space: nowrap; }
.bar .nav { font-size: 14px; letter-spacing: .04em; }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.nav a { text-decoration: none; }
.nav a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
/* sound: an icon alone, the speaker with waves when on and a cross when off */
.sound { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; padding: 0; color: #fff; cursor: pointer; transition: background .2s; }
.sound:hover { background: rgba(255, 255, 255, .14); }
.snd { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.snd .on, .snd .off { transition: opacity .2s; }
.sound[aria-pressed="true"] .snd .off, .sound[aria-pressed="false"] .snd .on { opacity: 0; }
/* crop marks in the top corners (at the bottom, the grid's crosses take over) */
.crop { position: absolute; width: 18px; height: 18px; border-color: var(--line-2); border-style: solid; border-width: 0; pointer-events: none; }
.crop.tl { left: 10px; top: 74px; border-left-width: 1px; border-top-width: 1px; }
.crop.tr { right: 10px; top: 74px; border-right-width: 1px; border-top-width: 1px; }
/* the target at the ring once the hand has turned (before, the stage draws it) */
.target { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; -webkit-mask-image: linear-gradient(#000 76%, transparent 97%); mask-image: linear-gradient(#000 76%, transparent 97%); }
.target path { fill: none; stroke: rgba(255, 255, 255, .72); stroke-width: 1; }
.target rect { fill: rgba(6, 70, 200, .9); }
.target text { fill: #fff; font: 600 11px/1 var(--mono); white-space: pre; }

/* the giant words, behind the hand: white outlines over an opaque fill (the variable font's
   overlapping contours, the R's leg or the G's bar, stay hidden inside the letter) */
.type { position: absolute; left: 0; right: 0; top: max(84px, 12svh); z-index: 1; padding: 0 var(--pad); font-weight: 850; font-size: min(18vw, 21.5svh); line-height: .9; letter-spacing: -.012em; text-transform: uppercase; user-select: none; visibility: hidden; }
.type.set { visibility: visible; }
.type .line { display: block; white-space: nowrap; transition: transform .62s cubic-bezier(.25, 1.35, .35, 1) var(--ld, 0s); }
.type.static .line { transition: none; }
.type .ch { position: relative; display: inline-block; --cut: 50%; }
.type .h { display: inline-block; color: var(--blue); -webkit-text-stroke: 3px rgba(255, 255, 255, .92); paint-order: stroke fill; text-shadow: none; transition: color .5s ease var(--d, 0s), text-shadow .5s ease var(--d, 0s); will-change: transform; }
.type .h.l { clip-path: inset(-20% calc(100% - var(--cut)) -20% -20%); }
.type .h.r { position: absolute; left: 0; top: 0; clip-path: inset(-20% -20% -20% var(--cut)); }
/* whole letters unless the line is torn (main.js: .split), so no seam shows down the middle */
.type .line:not(.split) .h.l { clip-path: none; }
.type .line:not(.split) .h.r { visibility: hidden; }
.type .ch.dot .h { color: #fff; }
/* lit by the impact: the letters fill with light from the contact point outward */
/* (a faint glow only: Chrome draws text shadows far brighter than WebKit, and the type turned shiny) */
.type .ch.lit .h { color: #3a86fd; text-shadow: 0 0 .03em rgba(255, 255, 255, .28); }
.type .ch.dot.lit .h { color: #fff; }
.type .ch.jump { animation: jump .5s var(--ease) var(--d, 0s) both; }
@keyframes jump { 30% { transform: translateY(-.06em); } }
/* the cut: a line of light where the ring went through */
.type .ch::after { content: ""; position: absolute; top: -4%; bottom: -4%; left: var(--cut); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 12px 2px rgba(214, 233, 255, .9); opacity: 0; transform: scaleY(.2); transition: opacity .5s ease, transform .35s var(--ease); }
.type .ch.cut::after { opacity: 1; transform: scaleY(1); transition: none; }
.type.static .h, .type.static .ch::after { transition: none !important; }
/* a word changing: the old letters lift out, the new rise in */
.type .ch.out { animation: chOut .24s ease-in var(--fd, 0s) both; }
.type .ch.in { animation: chIn .55s var(--ease) var(--fd, 0s) both; }
@keyframes chOut { to { transform: translateY(-.22em); opacity: 0; } }
@keyframes chIn { from { transform: translateY(.28em); opacity: 0; } }
/* the rest of the sentence round the giant words */
.type .aside { margin: 0; font-size: clamp(22px, 2.3vw, 36px); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; text-transform: none; text-align: left; opacity: 0; transform: translateY(.3em); transition: opacity .6s ease, transform .8s var(--ease); }
.type .pre { margin-bottom: .55em; }
.type .post { margin-top: .5em; }
.type.said-pre .pre, .type.said-post .post { opacity: 1; transform: none; }
.type.static .aside { transition: none; }

/* the end: the thumb presses the wheel and the ring listens (the next ring's microphone): a pill,
   five bars and the words, "Next ring" in small type */
.voice { position: absolute; z-index: 4; width: min(290px, calc(100vw - 32px)); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 11px; align-items: center; padding: 9px 15px 9px 13px; border-radius: 18px; background: rgba(6, 70, 200, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .45s var(--ease); pointer-events: none; }
.voice.on { opacity: 1; transform: none; }
.v-bars { display: flex; align-items: center; gap: 2px; height: 16px; }
.v-bars i { width: 3px; height: 100%; background: currentColor; border-radius: 2px; transform: scaleY(var(--h, .22)); transition: transform .09s linear; }
.v-text { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; min-height: 1.3em; }
.v-note { display: block; grid-column: 2; margin-top: 2px; font: 600 10px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; opacity: .62; }
.reduce .voice, .reduce .v-bars i { transition: none; }
/* the lead: the sentence as a description under the words, typed once the ring is on */
.lead { position: absolute; left: var(--pad); bottom: 36px; width: min(24rem, calc(100% - 2 * var(--pad))); transition: opacity .6s ease; }
.headline { margin: 0 0 20px; min-height: 2.5em; font-size: clamp(20px, 1.7vw, 25px); line-height: 1.25; letter-spacing: -.01em; font-weight: 500; text-wrap: balance; }
.headline .typed { display: none; }
.headline .typed.started { display: block; }
.headline .typed span { opacity: 0; }
.headline .typed span.on { opacity: 1; }
.headline .typed .caret { display: inline-block; width: .5em; height: .1em; background: #fff; margin-left: 2px; vertical-align: baseline; animation: blink .9s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.reduce .headline .typed .caret { animation: none; }
.lead-actions { display: flex; gap: 18px; align-items: center; }
/* the hero's call to action: big and glowing, a halo going out from it like the ring's press; it
   arrives once the sentence is typed (owner: "more predominant and more noticeable") */
.btn.cta { position: relative; gap: 18px; padding: 10px 10px 10px 32px; font-size: 21px; font-weight: 750; letter-spacing: -.02em;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 0 38px rgba(214, 233, 255, .75), 0 16px 36px rgba(2, 18, 64, .35); }
.cta-arr { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; transition: transform .35s var(--ease); }
.cta-arr svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.btn.cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: ctaHalo 2.8s cubic-bezier(.1, .6, .3, 1) infinite; }
@keyframes ctaHalo { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); } 70%, 100% { box-shadow: 0 0 0 22px rgba(255, 255, 255, 0); } }
.btn.cta:hover { box-shadow: 0 0 0 6px rgba(255, 255, 255, .25), 0 0 54px rgba(230, 242, 255, .95), 0 16px 36px rgba(2, 18, 64, .35); }
.btn.cta:hover .cta-arr { transform: translateX(4px); }
.btn.cta:active { transform: translateY(2px) scale(.98); }
/* waiting for the sentence, then up with a flare */
.lead:not(.typing) .cta { opacity: 0; transform: translateY(14px) scale(.94); }
.lead.typing .cta { animation: ctaIn .8s var(--ease) 1.15s backwards; }
@keyframes ctaIn { 0% { opacity: 0; transform: translateY(14px) scale(.94); } 55% { opacity: 1; transform: translateY(-2px) scale(1.04); } 100% { opacity: 1; transform: none; } }
.reduce .btn.cta::after, .reduce .lead.typing .cta { animation: none; }
.reduce .lead .cta { opacity: 1; transform: none; }

/* ------------------------------------------------------------ sections */
/* ------------------------------------------------------------ the grid
   Hairlines like the one under the bar: two down the page at the margins, one across at the top of
   every section, and a small cross where they meet. Content sits a gutter inside the lines; blocks
   that are grids themselves (.cells: the facts, the order) run out to them, split by the same
   hairline, and end on the next section's line. */
main, .foot { position: relative; }
main::before, .foot::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pad); right: var(--pad); border-left: 1px solid var(--line); border-right: 1px solid var(--line); pointer-events: none; }
.sec { position: relative; padding: 120px calc(var(--pad) + var(--gut)); border-top: 1px solid var(--line); }
.sec::after, .foot::after { content: ""; position: absolute; top: -5px; left: calc(var(--pad) - 5px); right: calc(var(--pad) - 5px); height: 11px; pointer-events: none;
  background:
    linear-gradient(#fff, #fff) 5px 0 / 1px 11px no-repeat, linear-gradient(#fff, #fff) 0 5px / 11px 1px no-repeat,
    linear-gradient(#fff, #fff) calc(100% - 5px) 0 / 1px 11px no-repeat, linear-gradient(#fff, #fff) 100% 5px / 11px 1px no-repeat; }
.sec:has(> .cells:last-child) { padding-bottom: 0; }
.cells { display: grid; margin: 0 calc(-1 * var(--gut)); border-top: 1px solid var(--line); }
.cells > * { min-width: 0; margin: 0; padding: 36px var(--gut) 44px; }
.cells > * + * { border-left: 1px solid var(--line); }
.head { max-width: 46rem; margin: 0 0 56px; }
.head h2, .head h1 { margin: 0 0 14px; font-size: clamp(40px, 6vw, 88px); line-height: .95; letter-spacing: -.045em; font-weight: 800; text-wrap: balance; text-shadow: 0 0 30px rgba(214, 233, 255, .3); }
.head p { margin: 0; font-size: 18px; max-width: 36em; }
#ring .head, #controls .head { margin-left: auto; margin-right: auto; text-align: center; }
#controls .head { max-width: 64rem; }
#before .head { max-width: none; }
#controls .head p { text-wrap: balance; }
#ring .head p, #controls .head p { margin: 0 auto; }
.fine { margin: 40px 0 0; font-size: 12px; max-width: 70em; }

/* calm entrances, once each */
.k { opacity: 0; transform: translateY(18px); transition: opacity .7s ease var(--dl, 0s), transform .9s var(--ease) var(--dl, 0s); }
.k.in { opacity: 1; transform: none; }
.reduce .k { opacity: 1; transform: none; transition: none; }

/* ten inputs: the ring alone, an arrow to each input */
.diagram { position: relative; height: clamp(520px, 46vw, 640px); }
.diagram .fig { position: absolute; left: 50%; top: 52%; width: min(500px, 44%); aspect-ratio: 1; transform: translate(-50%, -50%); overflow: visible; filter: drop-shadow(0 0 7px rgba(214, 233, 255, .55)); }
.diagram .lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.lines path { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1; transition: stroke .2s; }
.lines path.head { fill: rgba(255, 255, 255, .55); stroke: none; }
.lines circle { fill: var(--blue); stroke: #fff; stroke-width: 1; }
.lines g.on path { stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .9)); }
.lines g.on path.head { fill: #fff; stroke: none; }
.lines g.on circle { fill: #fff; }
.callouts { list-style: none; margin: 0; padding: 0; }
.callouts li { position: absolute; left: 0; top: 0; transform: translateY(-50%); width: min(15rem, 27%); }
.callouts li.r { text-align: left; }
.callouts li.l { text-align: right; }
.callouts button { width: 100%; display: grid; gap: 2px; text-align: inherit; border: 0; background: none; border-radius: 10px; padding: 6px 10px; cursor: pointer; transition: background .2s, box-shadow .3s; }
.callouts button:hover, .callouts li.on button { background: rgba(255, 255, 255, .12); box-shadow: var(--glow); }
.callouts b { font-weight: 650; font-size: 16px; line-height: 1.25; }
.callouts small { font-size: 13px; }
.callouts .glyph { font-family: var(--mono); margin-right: 6px; }
.callouts li.part button { cursor: default; }
/* the inputs as the Otoia Ring app groups them: a glass panel per group (Swipes left; Clicks and Wheel
   right), one soft curve from each to the ring, and what each group uses drawn on the ring */
.callouts.groups { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 17rem) 1fr minmax(0, 17rem); grid-template-rows: 1fr 1fr; column-gap: 24px; row-gap: 22px; padding-top: 44px; pointer-events: none; }
.callouts.groups li { position: static; transform: none; width: auto; }
.callouts.groups > li { pointer-events: auto; }
.callouts .grp { padding: 6px; border-radius: 18px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24), 0 20px 50px -24px rgba(2, 18, 64, .6); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); }
.callouts .grp[data-g="swipes"] { grid-column: 1; grid-row: 1 / 3; align-self: center; }
.callouts .grp[data-g="clicks"] { grid-column: 3; grid-row: 1; align-self: end; }
.callouts .grp[data-g="wheel"] { grid-column: 3; grid-row: 2; align-self: start; }
.callouts .grp .gh { display: block; padding: 9px 12px 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.callouts .grp.l .gh { text-align: right; }
.callouts .grp ul { list-style: none; margin: 0; padding: 0; }
.callouts .grp li + li { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.callouts .grp button { width: 100%; display: grid; gap: 3px; text-align: left; border: 0; background: none; border-radius: 12px; padding: 9px 12px 10px; cursor: pointer; transition: background .2s; }
.callouts .grp.l button { text-align: right; }
.callouts .grp button:hover, .callouts .grp li.on button { background: rgba(255, 255, 255, .14); box-shadow: none; }
.callouts .grp small { font-size: 12.5px; color: rgba(255, 255, 255, .75); }
.callouts .grp b { font-size: 16px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.callouts .grp.l b { flex-direction: row-reverse; justify-content: flex-start; }
.callouts .grp .glyph { margin: 0; width: 1.1em; text-align: center; }
.lines .cv { stroke: rgba(255, 255, 255, .45); stroke-width: 1.2; }
.lines .cv.hot { stroke: #fff; stroke-width: 1.6; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .9)); }
.lines .reach { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 1.3; stroke-dasharray: 3.5 3.5; }
.lines .reach.hot { stroke: #fff; }
.lines .arrow { fill: rgba(255, 255, 255, .7); stroke: none; }
.lines .arrow.hot { fill: #fff; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .9)); }
.lines .tap { fill: #fff; stroke: none; filter: drop-shadow(0 0 5px rgba(214, 233, 255, .9)); }
.lines .area { fill: rgba(255, 255, 255, .12); stroke: rgba(255, 255, 255, .5); stroke-width: 1; transition: fill .2s, stroke .2s; }
.lines .area.hot { fill: rgba(255, 255, 255, .3); stroke: #fff; }
.lines .anc { fill: var(--blue); stroke: #fff; stroke-width: 1.2; }
.lines .anc.hot { fill: #fff; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .9)); }
.lines .trace { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(214, 233, 255, .9)); }
.lines .tip { fill: #fff; stroke: none; filter: drop-shadow(0 0 6px rgba(214, 233, 255, .9)); }
.seg { position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 2; display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line-2); border-radius: 99px; }
.seg button { font-size: 14px; background: none; border: 0; border-radius: 99px; padding: 8px 16px; cursor: pointer; }
.seg button.on { background: #fff; color: var(--blue-deep); }

/* the agents: the picker (engine/picker.js brings its own styles) */
#agents { max-width: 1240px; margin: 0 auto; }
.tag { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; background: #fff; color: var(--blue-deep); border-radius: 4px; padding: 2px 6px; margin-right: 6px; vertical-align: 1px; }
.tag.soon { background: none; color: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
/* before you buy: four cells, one line each */
.facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.facts > div { display: flex; flex-direction: column; gap: 10px; }
.facts dt { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.facts dd { margin: 0; font-size: clamp(21px, 1.8vw, 27px); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; text-wrap: balance; }
.facts dd.more { font-size: 15px; font-weight: 500; letter-spacing: 0; line-height: 1.4; }
/* a picture over each fact (Codex's isometric glow renders cut out of their blue,
   tools/facts-assets.sh; the Otoia app's is its icon restyled), all standing on the same line */
.facts dd.pic { order: -1; height: clamp(160px, 15vw, 230px); margin-bottom: 22px; display: flex; align-items: flex-end; justify-content: center; }
.facts dd.pic img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.facts dd.pic.small img { max-height: 70%; }

/* buy it once: the ring turning in one cell, the order in the other; the price's digits roll */
.buy { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.buy > .buy-ring { position: relative; display: grid; place-items: center; min-height: 560px; padding: 0;
  background: radial-gradient(closest-side, rgba(214, 233, 255, .3), rgba(214, 233, 255, 0)) center / 78% 78% no-repeat; }
.buy-fig { width: min(460px, 82%); aspect-ratio: 1; overflow: visible; cursor: grab; filter: drop-shadow(0 22px 34px rgba(3, 26, 82, .45)); }
.buy-order { display: flex; flex-direction: column; gap: 24px; }
.editions { align-self: flex-start; display: inline-flex; gap: 2px; padding: 3px; border: 1.5px solid var(--line-2); border-radius: 99px; }
.editions button { border: 0; background: none; border-radius: 99px; padding: 9px 18px; font-size: 15px; font-weight: 650; cursor: pointer; transition: background .25s, color .25s; }
.editions button[aria-pressed="true"] { background: #fff; color: var(--blue-deep); }
.price { margin: 0; display: flex; align-items: flex-start; gap: 12px; line-height: 1; }
.digits { display: inline-flex; font-size: clamp(110px, 12vw, 196px); font-weight: 800; letter-spacing: 0; font-variant-numeric: tabular-nums; filter: drop-shadow(0 0 22px rgba(214, 233, 255, .4)); }
.digits .cur { font-size: .42em; margin: .1em .06em 0 0; }
.digits .dg { display: inline-block; height: 1em; overflow: hidden; margin-right: -.04em; }
.digits .strip { display: block; transition: transform 1s cubic-bezier(.2, .9, .1, 1); }
.digits .strip span { display: block; height: 1em; line-height: 1; }
.once { align-self: flex-end; font-size: 18px; font-weight: 600; margin-bottom: 1.6em; }
.gets { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.gets li { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 600; }
.gets li.in { animation: getIn .5s var(--ease) both; }
@keyframes getIn { from { opacity: 0; transform: translateX(-10px); } }
.reserve { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 16px; align-items: end; }
.field input { width: 100%; font: inherit; font-size: clamp(22px, 2.6vw, 34px); font-weight: 700; letter-spacing: -.03em; border: 0; border-bottom: 1.5px solid #fff; background: transparent; padding: 8px 0; color: #fff; border-radius: 0; }
.field input::placeholder { color: rgba(255, 255, 255, .7); }
.field input:focus-visible { outline: none; box-shadow: 0 8px 18px -10px rgba(255, 255, 255, .9); }
.reserve .btn { font-size: 18px; padding: 16px 26px; }
.note { margin: 0; font-size: 13px; }
/* online before the shop opens: a quiet pill where the email box and Reserve will be */
.soon { margin: 0; }
.soon-pill { display: inline-flex; align-items: center; gap: 11px; border: 1.5px solid rgba(255, 255, 255, .7); border-radius: 999px; padding: 15px 24px; font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.soon-pill i { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, .9); }
.btn[disabled] { opacity: .7; cursor: progress; }

/* track your order: the order number and email in one cell, as big as the Reserve's email; in the
   other the order page's five steps, a dot each on a dashed path (the first filled) */
.trk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.trk-form { display: flex; flex-direction: column; gap: 26px; }
.trk-form .field { display: grid; gap: 4px; }
.trk-form .btn { align-self: flex-start; min-width: 150px; font-size: 18px; padding: 16px 26px; }
.trk-form .note { min-height: 1.45em; }   /* its line is kept, so the form doesn't move when it speaks */
.trk-steps { display: grid; place-items: center; }
.stages { list-style: none; margin: 0; padding: 0; font-size: 14px; letter-spacing: .06em; }
.stages li { position: relative; display: flex; align-items: center; gap: 20px; padding: 14px 0; }
.stages li::before { content: ""; flex: none; width: 16px; height: 16px; border: 1.5px solid #fff; border-radius: 50%; }
.stages li.done::before { background: #fff; box-shadow: var(--glow); }
.stages li:not(:last-child)::after { content: ""; position: absolute; left: 7.25px; top: calc(50% + 8px); height: calc(100% - 16px); width: 1.5px; background: repeating-linear-gradient(var(--line-2) 0 4px, transparent 4px 8px); }

.foot { padding: 40px calc(var(--pad) + var(--gut)) 48px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; }
.foot p { margin: 0; }
/* the wordmark again (as in the bar), then the line */
.foot-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.foot-mark { display: inline-flex; align-items: flex-start; }
.foot-mark img { display: block; height: 26px; width: auto; }

/* ------------------------------------------------------------ one screen each
   (owner, 2026-10-23) every section fills the screen under the bar, as the hero fills it: less space
   round the heads, the head's size taken from the screen's height too, the ring's diagram given what
   its head leaves, and the facts and the order run down to the next line */
@media (min-width: 901px) and (min-height: 600px) {
  .sec { min-height: calc(100svh - 64px); padding-top: clamp(24px, 4svh, 48px); padding-bottom: clamp(24px, 4svh, 48px); display: flex; flex-direction: column; justify-content: center; }
  .head { margin-bottom: clamp(16px, 2.8svh, 36px); }
  .head h2 { font-size: clamp(40px, min(6vw, 9.5svh), 88px); }
  /* the ten inputs get more room (owner, 2026-10-23): their head on one line where it fits, the space
     that saves round it and the diagram */
  #ring { height: calc(100svh - 64px); padding-top: clamp(32px, 7.5svh, 84px); padding-bottom: clamp(28px, 6svh, 64px); }
  #ring .head { max-width: none; margin-bottom: clamp(24px, 6svh, 64px); }
  #ring .head p { max-width: 50em; }
  .diagram { flex: 1 1 0; min-height: 0; height: auto; container-type: size; }
  .diagram .fig { width: min(500px, 44%, 92cqh); }
  .callouts.groups { padding-top: 0; row-gap: 14px; }
  .callouts .grp button { padding-top: clamp(5px, 1svh, 9px); padding-bottom: clamp(6px, 1.1svh, 10px); }
  .sec > .cells:last-child { flex: 1 1 auto; }
  .facts > div, .buy-order, .trk-form { justify-content: center; }
  .cells > * { padding-top: clamp(18px, 2.6svh, 36px); padding-bottom: clamp(20px, 3svh, 44px); }
  .buy > .buy-ring { min-height: 0; }
  .buy-fig { width: min(460px, 82%, 56svh); }
  .buy-order { gap: clamp(12px, 2svh, 24px); }
  .trk-form { gap: clamp(16px, 3svh, 28px); }
  .stages { font-size: 15px; }
  .stages li { padding-top: clamp(10px, 2.2svh, 20px); padding-bottom: clamp(10px, 2.2svh, 20px); }
  .gets li { padding-top: clamp(6px, 1.25svh, 11px); padding-bottom: clamp(6px, 1.25svh, 11px); }
  #agents .pkr-stage { min-height: clamp(380px, 60svh, 470px); }
  .digits { font-size: clamp(90px, min(12vw, 18svh), 196px); }
}
@media (min-width: 901px) and (min-height: 600px) and (max-height: 760px) {
  .digits { font-size: min(12vw, 15svh); }
  .editions button { padding-top: 6px; padding-bottom: 6px; }
  .reserve .btn { padding-top: 12px; padding-bottom: 12px; }
  #agents .pkr-stage { min-height: 340px; }
}

/* ------------------------------------------------------------ narrow screens */
@media (max-width: 1200px) and (min-width: 901px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts > :nth-child(odd) { border-left: 0; }
  .facts > :nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .nav { display: none; }
  /* as wide as the screen allows ("CONTROL" is 4.73 em wide), or as a short screen's height does */
  .type { top: 12svh; font-size: min(calc((100vw - 32px) / 4.8), 10.8svh); }
  .type .aside { font-size: 19px; }
  /* on a phone the lead holds the sentence and the call to action */
  .lead { right: var(--pad); width: auto; bottom: 20px; }
  /* the call to action stays on phones too, under the sentence */
  .lead .lead-actions { margin-top: 16px; }
  .btn.cta { font-size: 18px; padding: 8px 8px 8px 24px; gap: 14px; }
  .cta-arr { width: 40px; height: 40px; }
  .headline { font-size: 19px; margin: 0; min-height: 0; }
  .hero.dropping .lead, .lead:not(.typing) { opacity: 0; pointer-events: none; }
  .sec { padding-top: 80px; padding-bottom: 80px; }
  .diagram { height: auto; display: grid; gap: 20px; justify-items: center; }
  .diagram .seg { position: static; transform: none; }
  .diagram .fig { position: static; transform: none; width: min(360px, 88vw); }
  .diagram .lines { display: none; }
  .diagram:has(.callouts.groups) .lines { display: block; }
  .callouts.groups { position: static; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 10px; padding-top: 0; }
  .callouts .grp[data-g="swipes"] { grid-column: 1; grid-row: 1 / 3; align-self: start; }
  .callouts .grp[data-g="clicks"] { grid-column: 2; grid-row: 1; align-self: start; }
  .callouts .grp[data-g="wheel"] { grid-column: 2; grid-row: 2; align-self: start; }
  .callouts .grp.l .gh, .callouts .grp.l button { text-align: left; }
  .callouts .grp.l b { flex-direction: row; }
  .callouts .grp button { padding: 8px 9px 9px; }
  .callouts .grp b { font-size: 15px; gap: 6px; }
  .callouts .grp small { font-size: 11.5px; }
  .callouts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; width: 100%; }
  .callouts li, .callouts li.l, .callouts li.r { position: static; transform: none; width: auto; text-align: left; }
  :root { --gut: 16px; }
  .cells, .facts, .buy, .trk { grid-template-columns: minmax(0, 1fr); }
  .cells > * + * { border-left: 0; border-top: 1px solid var(--line); }
  .cells > * { padding: 26px var(--gut) 30px; }
  /* each fact a row: the picture, then its words */
  .facts > div { display: grid; grid-template-columns: 108px minmax(0, 1fr); column-gap: 18px; row-gap: 6px; align-content: start; }
  .facts > div > * { grid-column: 2; }
  .facts dd.pic { grid-column: 1; grid-row: 1 / span 3; height: 104px; margin: 0; align-self: center; }
  .facts dd.pic.small img { max-height: 62%; }
  .buy > .buy-ring { min-height: 340px; }
  .digits { font-size: min(34vw, 150px); }
  .reserve { grid-template-columns: 1fr; }
  .trk-steps { place-items: start; }
}

/* the blog: under the fixed bar, its title as a section head, then the posts (none yet) */
.blog main { padding-top: 64px; min-height: calc(100svh - 120px); }
.blog .empty { margin: 0; padding: 36px 0 0; border-top: 1px solid var(--line); color: var(--dim, rgba(255, 255, 255, .78)); }