/* luniteapp.com v2 / MOONRISE / shared stylesheet (every page).
   Restraint and light: one lit element per view (the mark over a lit horizon); everything else bone on black;
   colour appears only as lit LEDs (green on, amber attention, red = health only).
   Each inner page has its own night over the same horizon: the drop (Download), the gauge (Pricing),
   the beacon (Support), the new moon (Privacy), the first quarter (Terms), moonset (404), the screen (Open it on your PC).
   No JS, no inline styles, no inline-data images, nothing loaded from other sites. Every motion is CSS, animates INTO the
   base style, and stops under prefers-reduced-motion. Scroll-driven and cross-page effects are extras. */

:root {
  --bg: #0c0c0d;
  --card: #151517;
  --card-hover: #1d1d20;
  --track: #2b2b30;
  --text: #e4e2dc;
  --body: #bab8b2;
  --muted: #9a9a9e;
  --bright: #f2f0eb;
  --edge: #6e6e73;   /* strokes only */
  --dim: #4a4a4f;    /* strokes only */
  --green: #4fbe8b;
  --amber: #d6a44b;
  --red: #d66b66;    /* health only */

  /* --hud: uppercase tracked labels and keys. --display: the light headings. --sans: reading text. */
  --hud: "Bahnschrift", "DIN Alternate", "Segoe UI", system-ui, sans-serif;
  --display: "Bahnschrift", system-ui, -apple-system, "Segoe UI Variable Display", "Segoe UI", Roboto, sans-serif;
  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono: "Cascadia Mono", "Cascadia Code", Consolas, ui-monospace, "SF Mono", Menlo, monospace;

  /* type */
  --t-hero: clamp(32px, 1.3rem + 2.6vw, 58px);   /* Home H1 only */
  --t-h1: clamp(34px, 1.4rem + 2vw, 52px);       /* inner H1 */
  --t-h2: clamp(28px, 1.1rem + 1.4vw, 40px);     /* Home close, 404 */
  --t-price: clamp(48px, 2rem + 2.4vw, 64px);
  --t-h3: 22px;  --t-h4: 19px;  --t-lead: 17.5px;  --t-body: 16.5px;
  --t-small: 14.5px;  --t-fine: 12.5px;
  --t-hud: 12px;  --t-hud-s: 11px;

  /* space: 4-point steps; sections breathe in two sizes */
  --sec: clamp(64px, 7vw, 96px);
  --sec-top: clamp(40px, 4.5vw, 64px);
  --r-panel: 16px; --r-key: 10px; --r-plate: 6px;
  --gutter: clamp(16px, 4vw, 40px);
  --bar-h: 64px;

  /* motion */
  --ease: cubic-bezier(.16, 1, .3, 1);      /* UI, light, draws */
  --ease-io: cubic-bezier(.4, 0, .2, 1);    /* celestial: rises, sweeps */
  --ease-in: cubic-bezier(.5, 0, .9, .4);   /* falling */
  --d-press: .08s; --d-ui: .3s; --d-glow: .45s; --d-draw: .7s;

  /* one breath for every mark on a page, so they rise and fall together */
  --breath: 6.4s;
  --breath-at: 1.7s;   /* inner pages: after the page-head moon has risen (Home sets its own) */

  interpolate-size: allow-keywords; /* lets a <details> open to its natural height */
}
@media (max-width: 680px) {
  :root { --gutter: 16px; --bar-h: 56px; --t-h3: 20px; --t-h4: 17.5px; --t-lead: 17px; --t-body: 16px; }
}

/* cross-page: the instrument stays still while its reading changes.
   The header bar and the phone dock hold their place, the green "you are here" LED slides to the next item,
   and the header mark on one page and the moon on another share a name, so the moon travels. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(moon) { animation-duration: .8s; animation-timing-function: cubic-bezier(.45, 0, .1, 1); }
  ::view-transition-old(moon) { animation-duration: .8s; animation-timing-function: cubic-bezier(.7, 0, .9, .5); }
  ::view-transition-new(moon) { animation-duration: .8s; animation-timing-function: cubic-bezier(.3, .5, .4, 1); }
  ::view-transition-group(here) { animation-duration: .55s; animation-timing-function: var(--ease); }
  ::view-transition-old(root) { animation-duration: .3s; }
  ::view-transition-new(root) { animation-duration: .45s; }
}

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--bg);
  color-scheme: dark;
  scroll-padding-top: calc(var(--bar-h) + 28px);
  scrollbar-color: #34343a var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font: 400 1rem/1.6 var(--sans);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
strong, b { font-weight: 600; color: var(--text); }
:focus-visible { outline: 2px solid var(--bright); outline-offset: 4px; border-radius: 6px; }
::selection { background: rgba(242, 240, 235, .22); color: var(--bright); }

.wrap {
  width: 100%; max-width: 1180px; margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}
.col { max-width: calc(780px + 2 * var(--gutter)); }
.mid { max-width: calc(980px + 2 * var(--gutter)); }
.nowrap { white-space: nowrap; }

.skip {
  position: absolute; left: 12px; top: -64px; z-index: 100;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 16px; border-radius: 8px;
  background: var(--bright); color: var(--bg);
  font: 600 12px/1 var(--hud); letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- the breath (shared by every mark) ---------- */
@keyframes breathe { 0%, 100% { scale: 1; } 50% { scale: var(--swell, 1.03); } }
@keyframes glow-breathe { 0%, 100% { opacity: var(--lo, .2); } 50% { opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes copy-in { from { opacity: 0; translate: 0 10px; } }
@keyframes twinkle { from { opacity: .35; } to { opacity: 1; } }

/* ---------- LEDs ---------- */
.led {
  display: inline-block; flex: none;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--track);
  box-shadow: inset 0 0 0 1px rgba(110, 110, 115, .35);
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
[aria-current="page"] .led, .led.on {
  background: radial-gradient(circle at 35% 30%, #c9f1dd, var(--green) 55%, #2f8a60);
  box-shadow: 0 0 0 1px rgba(79, 190, 139, .3), 0 0 8px 1px rgba(79, 190, 139, .55), 0 0 2px var(--green);
}

/* a panel-mounted lamp: dark bezel, lit lens with a wide faint spill */
.lamp {
  --lo: #2f8a60; --c: var(--green); --hi: #c9f1dd; --glow: rgba(79, 190, 139, .55); --spill: rgba(79, 190, 139, .14);
  display: grid; place-items: center; flex: none;
  width: 19px; height: 19px; border-radius: 50%;
  background: #08080a;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .9), 0 0 0 1px rgba(110, 110, 115, .32), 0 1px 0 rgba(255, 255, 255, .04);
}
.lamp::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--hi), var(--c) 55%, var(--lo));
  box-shadow: 0 0 10px 1px var(--glow), 0 0 34px 8px var(--spill), 0 0 2px var(--c);
}
.lamp.red   { --lo: #93403c; --c: var(--red);   --hi: #f6cfcc; --glow: rgba(214, 107, 102, .55); --spill: rgba(214, 107, 102, .14); }
.lamp.amber { --lo: #94702c; --c: var(--amber); --hi: #f5e1b8; --glow: rgba(214, 164, 75, .5);   --spill: rgba(214, 164, 75, .14); }
.lamp.bone  { --lo: #9d9a93; --c: #e4e2dc;      --hi: #ffffff; --glow: rgba(242, 240, 235, .45); --spill: rgba(242, 240, 235, .1); }

/* ---------- buttons: keys with a soft bone light ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  text-decoration: none; white-space: nowrap;
  font: 600 13px/1 var(--hud); letter-spacing: .18em; text-transform: uppercase;
  border-radius: var(--r-key);
  -webkit-tap-highlight-color: transparent;
  transition: translate .45s var(--ease), scale .25s var(--ease), box-shadow .45s var(--ease),
              background-color .3s var(--ease), color .3s var(--ease);
}
.btn .ic { flex: none; width: 16px; height: 16px; transition: translate .5s var(--ease); }
.btn:active { transition-duration: var(--d-press); }
.btn:focus-visible { outline-offset: 5px; border-radius: 12px; }
@media (hover: hover) { .btn:is(:hover, :focus-visible) .ic { translate: 0 1.5px; } }

/* the lit key: bone, backlit, a soft halo; a slow band of light crosses it on hover */
.btn-lit {
  min-height: 54px; padding: 0 24px 0 28px;
  color: #0c0c0d;
  isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, #f8f7f3, #dcd9d1);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -2px 0 rgba(0, 0, 0, .16),
    0 0 0 1px rgba(242, 240, 235, .22),
    0 12px 28px -14px rgba(242, 240, 235, .5),
    0 0 46px -12px rgba(242, 240, 235, .32);
}
.btn-lit::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, 0) 62%) no-repeat;
  background-size: 230% 100%;
  background-position: 160% 0;
  opacity: 0;
}
@media (hover: hover) {
  .btn-lit:is(:hover, :focus-visible) {
    translate: 0 -1px;
    box-shadow:
      inset 0 1px 0 #fff,
      inset 0 -2px 0 rgba(0, 0, 0, .16),
      0 0 0 1px rgba(242, 240, 235, .42),
      0 16px 32px -14px rgba(242, 240, 235, .62),
      0 0 70px -10px rgba(242, 240, 235, .45);
  }
  .btn-lit:is(:hover, :focus-visible)::after {
    opacity: 1; background-position: -60% 0;
    transition: background-position 1.2s var(--ease), opacity .2s linear;
  }
}
.btn-lit:active {
  translate: 0 1px; scale: .985;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 2px 6px rgba(0, 0, 0, .2),
    0 0 0 1px rgba(242, 240, 235, .3),
    0 6px 16px -10px rgba(242, 240, 235, .5),
    0 0 30px -12px rgba(242, 240, 235, .3);
}

/* the header key (and the phone dock's): dark, ringed in bone, lit from the top edge */
.btn-key {
  min-height: 40px; padding: 0 15px 0 17px; gap: 10px;
  font-size: 12px; letter-spacing: .16em;
  color: var(--bright);
  background: linear-gradient(180deg, rgba(242, 240, 235, .085), rgba(242, 240, 235, .02)), #141416;
  box-shadow:
    inset 0 0 0 1px rgba(242, 240, 235, .3),
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 0 22px -8px rgba(242, 240, 235, .3);
}
.btn-key .ic { width: 15px; height: 15px; }
@media (hover: hover) {
  .btn-key:is(:hover, :focus-visible) {
    background-color: var(--card-hover);
    box-shadow:
      inset 0 0 0 1px rgba(242, 240, 235, .62),
      inset 0 1px 0 rgba(255, 255, 255, .2),
      0 0 30px -6px rgba(242, 240, 235, .45);
  }
}
.btn-key:active {
  scale: .975;
  box-shadow:
    inset 0 0 0 1px rgba(242, 240, 235, .45),
    inset 0 2px 6px rgba(0, 0, 0, .55),
    0 0 14px -6px rgba(242, 240, 235, .3);
}

/* the quiet key (secondary): a bezel that warms when touched */
.btn-quiet {
  min-height: 54px; padding: 0 26px;
  color: var(--text);
  background: rgba(21, 21, 23, .7);
  box-shadow: inset 0 0 0 1px rgba(110, 110, 115, .55), inset 0 1px 0 rgba(255, 255, 255, .04);
}
@media (hover: hover) {
  .btn-quiet:is(:hover, :focus-visible) {
    color: var(--bright); background-color: var(--card-hover);
    box-shadow: inset 0 0 0 1px rgba(242, 240, 235, .5), inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 26px -6px rgba(242, 240, 235, .3);
  }
}
.btn-quiet:active {
  scale: .98; color: var(--bright); background-color: var(--card-hover);
  box-shadow: inset 0 0 0 1px rgba(242, 240, 235, .45), inset 0 2px 6px rgba(0, 0, 0, .5);
}
/* Send it to your PC: a smaller quiet key (phones and touch screens only) */
.btn-send { min-height: 48px; padding: 0 20px; gap: 10px; font-size: 12px; letter-spacing: .16em; }
.btn-send .ic { width: 16px; height: 16px; }
@media (hover: hover) { .btn-send:is(:hover, :focus-visible) .ic { translate: 0 0; } }

/* an unpowered key: the paid plan is not switched on yet */
.btn-off {
  min-height: 54px; padding: 0 24px;
  color: var(--muted);
  background: rgba(12, 12, 13, .5);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
  outline: 1px dashed rgba(110, 110, 115, .55); outline-offset: -1px;
  cursor: default;
}

/* links inside reading text: a fine underline that is always there, and takes the bone light */
main :is(p, li, h3) a:not(.btn, .go) {
  color: var(--text);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: rgba(110, 110, 115, .8);
  border-radius: 3px;
  transition: color .3s var(--ease), text-decoration-color .3s var(--ease), text-shadow .5s var(--ease);
}
@media (hover: hover) {
  main :is(p, li, h3) a:not(.btn, .go):is(:hover, :focus-visible) {
    color: var(--bright);
    text-decoration-color: var(--bright);
    text-shadow: 0 0 14px rgba(242, 240, 235, .5);
  }
}
main :is(p, li, h3) a:not(.btn, .go):active { color: var(--text); text-shadow: none; }

/* ---------- header ---------- */
.bar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(12, 12, 13, .72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  view-transition-name: bar;
}
.bar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(110, 110, 115, .28) 18%, rgba(110, 110, 115, .28) 82%, transparent);
}
.bar-in { display: flex; align-items: center; gap: 8px; min-height: var(--bar-h); }
.bar [aria-current="page"] .led { view-transition-name: here; }

.brand {
  display: inline-flex; align-items: center; gap: 12px; margin-right: auto;
  min-height: 44px; padding: 6px 4px 6px 0;
  color: var(--text); text-decoration: none;
  font: 600 14px/1 var(--hud); letter-spacing: .34em;
}
.brand .mark { position: relative; display: grid; place-items: center; flex: none; width: 24px; height: 24px; }
.brand .mark::before { /* its own small moonlight, breathing with the page's moon */
  content: ""; position: absolute; inset: -12px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(242, 240, 235, .2), rgba(242, 240, 235, .07) 50%, rgba(242, 240, 235, 0));
  opacity: .25;
}
.brand img {
  position: relative; width: 24px; height: 24px;
  view-transition-name: moon;
  filter: drop-shadow(0 0 2px rgba(242, 240, 235, .3));
  transition: rotate .9s var(--ease);
}
.brand:focus-visible img { rotate: 60deg; }
@media (hover: hover) { .brand:hover img { rotate: 60deg; } }
.brand .led { margin-left: -4px; }

.nav { display: flex; align-items: center; gap: 2px; margin-right: 12px; }
.nav a {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px; border-radius: 8px;
  color: var(--muted); text-decoration: none;
  font: 600 12px/1 var(--hud); letter-spacing: .18em; text-transform: uppercase;
  transition: color .3s var(--ease), background-color .3s var(--ease);
}
@media (pointer: coarse) { .nav a { min-height: 44px; } }
@media (hover: hover) {
  .nav a:is(:hover, :focus-visible) { color: var(--text); background-color: rgba(242, 240, 235, .03); }
  .nav a:not([aria-current]):is(:hover, :focus-visible) .led { background: #85837e; box-shadow: 0 0 6px 1px rgba(242, 240, 235, .32); }
}
.nav a:active { color: var(--bright); }
.nav a[aria-current="page"] { color: var(--bright); }

/* ---------- the phone dock: Download at the thumb (hidden above 680px) ---------- */
.dock { display: none; }

/* ---------- inner page head: a small moon over a short lit horizon, a different night on every page ---------- */
.ph { position: relative; padding: clamp(22px, 4.6vh, 54px) 0 0; text-align: center; }
.ph-sky {
  --mc: 30px;   /* the moon's centre height above the horizon */
  position: relative; width: min(680px, 100%); height: 150px; margin: 0 auto;
}
.ph-clip { /* the bottom edge is the horizon: the moon and its light stop there */
  position: absolute; left: 0; right: 0; top: 0; bottom: 1px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to top, #000 72%, transparent);
  mask-image: linear-gradient(to top, #000 72%, transparent);
}
.ph-clip::before { /* moonlight, cut flat at the horizon */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle 250px at 50% calc(100% - var(--mc)),
    rgba(242, 240, 235, .12), rgba(242, 240, 235, .085) 14%, rgba(242, 240, 235, .055) 30%, rgba(242, 240, 235, .03) 48%,
    rgba(242, 240, 235, .014) 66%, rgba(242, 240, 235, .005) 84%, rgba(242, 240, 235, 0));
}
.ph-clip::after { /* the breath: a close light that swells and settles */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .2;
  background: radial-gradient(circle 74px at 50% calc(100% - var(--mc)),
    rgba(242, 240, 235, .16), rgba(242, 240, 235, .07) 45%, rgba(242, 240, 235, .02) 75%, rgba(242, 240, 235, 0));
}
.ph-mark {
  position: absolute; left: 50%; bottom: calc(var(--mc) - 18px);
  width: 36px; height: 36px; margin-left: -18px;
  filter: drop-shadow(0 0 3px rgba(242, 240, 235, .5)) drop-shadow(0 0 13px rgba(242, 240, 235, .22));
}
/* each page's signature: a box centred on the moon, clipped at the horizon like the moonlight */
.ph-sig {
  --s: 0px;
  position: absolute; left: 50%; bottom: calc(var(--mc) - var(--s) / 2);
  width: var(--s); height: var(--s); margin-left: calc(var(--s) / -2);
  pointer-events: none;
}
.ph-line {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg,
    rgba(74, 74, 79, 0), rgba(74, 74, 79, .9) 22%, rgba(110, 110, 115, .9) 40%,
    #d9d6cf 50%,
    rgba(110, 110, 115, .9) 60%, rgba(74, 74, 79, .9) 78%, rgba(74, 74, 79, 0));
}
.ph-line::before, .ph-line::after { /* the glint on the line, and its breath */
  content: ""; position: absolute; left: 0; right: 0; top: -5px; height: 11px; margin: 0 auto; pointer-events: none;
}
.ph-line::before { width: 300px; max-width: 100%; background: radial-gradient(closest-side, rgba(242, 240, 235, .3), rgba(242, 240, 235, .06) 55%, rgba(242, 240, 235, 0)); }
.ph-line::after { width: 150px; opacity: .2; background: radial-gradient(closest-side, rgba(242, 240, 235, .45), rgba(242, 240, 235, .08) 60%, rgba(242, 240, 235, 0)); }
.ph-scale { /* a fine instrument scale under the line, centred on the moon (no figures: it is a picture, not a reading) */
  position: absolute; left: 0; right: 0; top: 1px; margin: 0 auto;
  width: 385px; max-width: 100%; height: 9px;
  background:
    linear-gradient(rgba(242, 240, 235, .7), rgba(242, 240, 235, .7)) 50% 0 / 1px 9px no-repeat,
    linear-gradient(90deg, transparent 47.5px, rgba(110, 110, 115, .85) 47.5px 48.5px, transparent 48.5px) 50% 0 / 96px 6px repeat-x,
    linear-gradient(90deg, transparent 11.5px, rgba(74, 74, 79, .9) 11.5px 12.5px, transparent 12.5px) 50% 0 / 24px 3px repeat-x;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}
/* the page's own reading: one LED seated under the scale, at the page's place in the nav and footer order.
   It switches on once the moon has risen. */
.ph-sky::after {
  content: ""; position: absolute; top: calc(100% + 8px); left: calc(50% + var(--pip, 0px) - 2.5px);
  width: 5px; height: 5px; border-radius: 50%; pointer-events: none;
  background-color: var(--green);
  box-shadow: inset 0 0 0 1px rgba(79, 190, 139, .3), 0 0 8px 1px rgba(79, 190, 139, .55);
}
.ph-dl { --pip: -96px; }
.ph-pricing { --pip: -48px; }
.ph-support { --pip: 48px; }
.ph-privacy { --pip: 72px; }
.ph-terms { --pip: 96px; }
.ph-sky.set::after { /* 404: an empty slot, like its unlit kicker LED */
  background-color: var(--track);
  box-shadow: inset 0 0 0 1px rgba(110, 110, 115, .35);
}
@keyframes pip-on {
  0% { background-color: var(--track); box-shadow: inset 0 0 0 1px rgba(110, 110, 115, .35), 0 0 0 0 rgba(79, 190, 139, 0); }
  55% { background-color: #c9f1dd; box-shadow: inset 0 0 0 1px rgba(79, 190, 139, .4), 0 0 14px 3px rgba(79, 190, 139, .7); }
  100% { background-color: var(--green); box-shadow: inset 0 0 0 1px rgba(79, 190, 139, .3), 0 0 8px 1px rgba(79, 190, 139, .55); }
}

/* DOWNLOAD: the drop. The moon sits higher; a hairline of light falls from it to the horizon,
   and now and then a bright drop runs down it and the horizon flares where it lands. */
.ph-dl .ph-sky { --mc: 66px; }
.ph-dl .ph-sig {
  left: 50%; bottom: 0; width: 1px; height: calc(var(--mc) - 20px); margin-left: -.5px;
  background: linear-gradient(to top, rgba(242, 240, 235, .6), rgba(242, 240, 235, .2) 55%, rgba(242, 240, 235, .04));
  transform-origin: 50% 0;
}
.ph-dl .ph-sig::before {
  content: ""; position: absolute; left: -1.5px; top: 0; width: 4px; height: 4px; border-radius: 50%;
  --fall: calc(var(--mc) - 24px);
  background: #fff; box-shadow: 0 0 6px 2px rgba(242, 240, 235, .6), 0 0 16px 4px rgba(242, 240, 235, .2);
  opacity: 0;
}
.ph-dl .ph-sig::after { /* where the light meets the line: a small pool */
  content: ""; position: absolute; left: -14px; bottom: -3px; width: 29px; height: 6px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(242, 240, 235, .55), rgba(242, 240, 235, 0));
}

/* PRICING: the gauge. A half dial of 12 LED segments standing on the horizon, the moon inside it like a hub;
   all dark but the first, lit green: the cost meter at zero. On load it runs one power-on self-test and settles back.
   No figures on it. The lit segment is this page's reading, so it has no separate pip. */
@property --sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.ph-pricing .ph-sky { height: 160px; }
.ph-pricing .ph-sky::after { display: none; }
.ph-pricing .ph-clip {
  -webkit-mask-image: linear-gradient(to top, #000 80%, transparent);
  mask-image: linear-gradient(to top, #000 80%, transparent);
}
.ph-pricing .ph-sig {
  --s: 168px;
  bottom: calc(var(--s) / -2); /* centred on the horizon: the clip cuts the lower half, so the dial stands on the line */
  background:
    conic-gradient(from -88.25deg, #36996b 0deg, var(--green) 5deg, #7fd6ad 10deg 13deg, transparent 13deg),
    conic-gradient(from -88.25deg, rgba(74, 74, 79, .62) 0 176.5deg, transparent 176.5deg);
  -webkit-mask:
    radial-gradient(closest-side, transparent calc(100% - 12px), #000 calc(100% - 11.5px) calc(100% - 3px), transparent calc(100% - 2.5px)),
    repeating-conic-gradient(from -88.25deg, #000 0deg 11deg, transparent 11.6deg 14.4deg, #000 15deg);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(closest-side, transparent calc(100% - 12px), #000 calc(100% - 11.5px) calc(100% - 3px), transparent calc(100% - 2.5px)),
    repeating-conic-gradient(from -88.25deg, #000 0deg 11deg, transparent 11.6deg 14.4deg, #000 15deg);
  mask-composite: intersect;
}
.ph-pricing .ph-sig::before { /* the self-test light, clipped to the segments by the parent's mask */
  content: ""; position: absolute; inset: 0;
  background: conic-gradient(from -88.25deg, rgba(242, 240, 235, .9) 0 var(--sweep), transparent var(--sweep));
}
.ph-pricing .ph-clip::before { /* the lit segment's glow lives in the moonlight (a mask would cut it off) */
  background:
    radial-gradient(circle 18px at calc(50% - 76px) calc(100% - 10px), rgba(79, 190, 139, .3), rgba(79, 190, 139, 0)),
    radial-gradient(circle 250px at 50% calc(100% - var(--mc)),
      rgba(242, 240, 235, .12), rgba(242, 240, 235, .085) 14%, rgba(242, 240, 235, .055) 30%, rgba(242, 240, 235, .03) 48%,
      rgba(242, 240, 235, .014) 66%, rgba(242, 240, 235, .005) 84%, rgba(242, 240, 235, 0));
}

/* SUPPORT: the beacon. Two faint rings round the moon (drawn on the box itself, so motion never removes them);
   at each breath a ring ripples out from the moon (the pseudo-elements are only the ripples). */
.ph-support .ph-sig {
  --s: 166px; border-radius: 50%;
  background:
    radial-gradient(closest-side, transparent calc(43% - 1.5px), rgba(242, 240, 235, .14) 43%, transparent calc(43% + 1px)),
    radial-gradient(closest-side, transparent calc(69% - 1.5px), rgba(242, 240, 235, .08) 69%, transparent calc(69% + 1px));
}
.ph-support .ph-sig::before, .ph-support .ph-sig::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(242, 240, 235, .6);
  opacity: 0;
}

/* PRIVACY: new moon. The mark dimmed inside a thin ring with a lit rim: the light is kept in. */
.ph-privacy .ph-mark { opacity: .42; filter: drop-shadow(0 0 2px rgba(242, 240, 235, .2)); }
.ph-privacy .ph-clip::before { opacity: .45; }
.ph-privacy .ph-sig {
  --s: 60px; border-radius: 50%;
  background:
    conic-gradient(from 200deg, rgba(242, 240, 235, 0), rgba(242, 240, 235, .9) 70deg, rgba(242, 240, 235, .22) 150deg,
                   rgba(242, 240, 235, 0) 210deg, rgba(242, 240, 235, 0)),
    linear-gradient(rgba(110, 110, 115, .32), rgba(110, 110, 115, .32));
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 1.8px), #000 calc(100% - 1.3px) calc(100% - .4px), transparent 100%);
  mask: radial-gradient(closest-side, transparent calc(100% - 1.8px), #000 calc(100% - 1.3px) calc(100% - .4px), transparent 100%);
}

/* TERMS: first quarter. A disc behind the mark, its right half lit with a bright rim (the mark itself stays whole),
   split by a fine vertical line that rises from the horizon: the line. The sibling of Privacy's rim-lit ring. */
.ph-terms .ph-sig {
  --s: 60px; border-radius: 50%;
  background: linear-gradient(90deg, rgba(242, 240, 235, 0) 50%, rgba(242, 240, 235, .08) 50%);
  box-shadow: inset 0 0 0 1px rgba(110, 110, 115, .32), inset -1.5px 0 0 rgba(242, 240, 235, .5);
}
.ph-terms .ph-sig::before { /* the terminator */
  content: ""; position: absolute; left: calc(50% - .5px); bottom: 0; width: 1px; height: calc(100% + 16px);
  background: linear-gradient(to top, rgba(242, 240, 235, .7), rgba(242, 240, 235, .3) 55%, rgba(242, 240, 235, 0));
  transform-origin: 50% 100%;
}

/* OPEN IT ON YOUR PC: the screen. A thin bezel stands on the horizon round the moon, lit along its top edge.
   No nav item points here, so the page has no reading (no pip under the scale). */
.ph-pc .ph-sky::after { display: none; }
.ph-pc .ph-sig {
  bottom: 0; width: calc(var(--mc) * 3); height: calc(var(--mc) * 2); margin-left: calc(var(--mc) * -1.5);
  border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, rgba(242, 240, 235, .045), rgba(242, 240, 235, 0) 70%);
  box-shadow: inset 0 1px 0 rgba(242, 240, 235, .42), inset 1px 0 0 rgba(110, 110, 115, .5), inset -1px 0 0 rgba(110, 110, 115, .5);
}

/* wide screens: a bigger inner moon, so each head reads at a glance (and Privacy and Terms tell apart at thumbnail size);
   the signatures scale with it, and the moon sits a touch higher so the 70px discs stand on the line, not in it */
@media (min-width: 761px) and (min-height: 501px) {
  .ph-sky { --mc: 35px; }
  .ph-mark { width: 44px; height: 44px; margin-left: -22px; bottom: calc(var(--mc) - 22px); }
  .ph-pricing .ph-sig { --s: 184px; }
  .ph-pricing .ph-clip::before {
    background:
      radial-gradient(circle 18px at calc(50% - 84px) calc(100% - 11px), rgba(79, 190, 139, .3), rgba(79, 190, 139, 0)),
      radial-gradient(circle 250px at 50% calc(100% - var(--mc)),
        rgba(242, 240, 235, .12), rgba(242, 240, 235, .085) 14%, rgba(242, 240, 235, .055) 30%, rgba(242, 240, 235, .03) 48%,
        rgba(242, 240, 235, .014) 66%, rgba(242, 240, 235, .005) 84%, rgba(242, 240, 235, 0));
  }
  .ph-support .ph-sig { --s: 180px; }
  .ph-privacy .ph-sig, .ph-terms .ph-sig { --s: 70px; }
  .ph-dl .ph-sig { height: calc(var(--mc) - 24px); }
  .ph-dl .ph-sig::before { --fall: calc(var(--mc) - 28px); }
}

/* 404: moonset. No mark, only the afterglow over the horizon, and the stars that come out once the moon has gone. */
.ph-sky.set .ph-clip::before {
  background: radial-gradient(ellipse 260px 90px at 50% 100%,
    rgba(242, 240, 235, .09), rgba(242, 240, 235, .045) 35%, rgba(242, 240, 235, .015) 65%, rgba(242, 240, 235, 0));
}
.ph-sky.set .ph-clip::after {
  background: radial-gradient(ellipse 120px 40px at 50% 100%, rgba(242, 240, 235, .14), rgba(242, 240, 235, 0));
}
.ph-sky.set .stars { top: -20px; bottom: 1px; }

/* a few far stars, kept away from the moon (Home's sky and the 404's); two layers that trade brightness slowly */
.stars {
  position: absolute; left: 0; right: 0; top: -30px; bottom: 0; pointer-events: none;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent, #000 30%, #000 62%, transparent 92%),
    linear-gradient(90deg, #000 30%, transparent 40%, transparent 60%, #000 70%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent, #000 30%, #000 62%, transparent 92%),
    linear-gradient(90deg, #000 30%, transparent 40%, transparent 60%, #000 70%);
  mask-composite: intersect;
}
.stars::before, .stars::after { content: ""; position: absolute; inset: 0; background-repeat: no-repeat; }
.stars::before {
  background-image:
    radial-gradient(circle 1.4px at 9% 40%, rgba(242, 240, 235, .75), rgba(242, 240, 235, 0)),
    radial-gradient(circle 1.1px at 21% 66%, rgba(242, 240, 235, .55), rgba(242, 240, 235, 0)),
    radial-gradient(circle 1.2px at 32% 30%, rgba(242, 240, 235, .6), rgba(242, 240, 235, 0)),
    radial-gradient(circle 1.5px at 72% 36%, rgba(242, 240, 235, .7), rgba(242, 240, 235, 0)),
    radial-gradient(circle 1.1px at 84% 62%, rgba(242, 240, 235, .5), rgba(242, 240, 235, 0)),
    radial-gradient(circle 1.3px at 93% 32%, rgba(242, 240, 235, .6), rgba(242, 240, 235, 0));
}
.stars::after {
  background-image:
    radial-gradient(circle 1.1px at 15% 28%, rgba(242, 240, 235, .55), rgba(242, 240, 235, 0)),
    radial-gradient(circle 1.3px at 27% 50%, rgba(242, 240, 235, .6), rgba(242, 240, 235, 0)),
    radial-gradient(circle 1px at 4% 58%, rgba(242, 240, 235, .45), rgba(242, 240, 235, 0)),
    radial-gradient(circle 1.2px at 66% 56%, rgba(242, 240, 235, .55), rgba(242, 240, 235, 0)),
    radial-gradient(circle 1.4px at 78% 24%, rgba(242, 240, 235, .7), rgba(242, 240, 235, 0)),
    radial-gradient(circle 1.1px at 89% 48%, rgba(242, 240, 235, .5), rgba(242, 240, 235, 0));
}

.ph-copy { position: relative; }
.ph h1 {
  margin: 28px auto 0; max-width: 16em;
  font: 350 var(--t-h1)/1.08 var(--display);
  letter-spacing: -.012em;
  color: var(--bright);
  text-wrap: balance;
}
.ph .sub {
  margin: 16px auto 0; max-width: 33em;
  font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6;
  color: var(--body);
  text-wrap: pretty;
}
/* the date plate: silkscreen caps on a small riveted label (Privacy, Terms) */
.stamp {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 20px; padding: 9px 12px 8px;
  border-radius: var(--r-plate);
  font: 600 var(--t-hud-s)/1 var(--hud); letter-spacing: .24em; text-transform: uppercase;
  color: var(--muted);
  background: rgba(21, 21, 23, .6);
  box-shadow: inset 0 0 0 1px rgba(110, 110, 115, .35), inset 0 1px 0 rgba(255, 255, 255, .03);
}
:where(.page) p.stamp { font-size: var(--t-hud-s); line-height: 1; }
.ph-cta { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; }
.under { margin: 18px auto 0; max-width: 40em; font-size: var(--t-small); line-height: 1.6; color: var(--muted); }
:where(.page) p.under { font-size: var(--t-small); }
.kicker {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 30px;
  font: 600 var(--t-hud-s)/1 var(--hud); letter-spacing: .34em; text-transform: uppercase;
  color: var(--muted);
}
:where(.page) p.kicker { font-size: var(--t-hud-s); line-height: 1; }
.kicker + h1 { margin-top: 18px; }

@media (prefers-reduced-motion: no-preference) {
  .ph-mark {
    --swell: 1.045;
    animation: ph-rise 1.6s var(--ease-io) .15s both,
               breathe var(--breath) ease-in-out var(--breath-at) infinite;
  }
  .ph-clip::before { animation: fade-in 2s var(--ease) .35s both; }
  .ph-clip::after, .ph-line::after { animation: glow-breathe var(--breath) ease-in-out var(--breath-at) infinite both; }
  .ph-line { animation: line-draw 1.6s var(--ease) both; }
  .ph-line::before { animation: fade-in 2s var(--ease) .7s both; }
  .ph-sky:not(.set)::after { animation: pip-on .9s var(--ease) 1.6s both; }
  .ph-copy > * { animation: copy-in 1s var(--ease) both; }
  .ph-copy > :nth-child(1) { animation-delay: .12s; }
  .ph-copy > :nth-child(2) { animation-delay: .2s; }
  .ph-copy > :nth-child(3) { animation-delay: .28s; }
  .ph-copy > :nth-child(4) { animation-delay: .36s; }
  .ph-copy > :nth-child(5) { animation-delay: .44s; }

  .brand .mark::before { animation: glow-breathe var(--breath) ease-in-out var(--breath-at) infinite both; }
  .brand img { --swell: 1.07; animation: breathe var(--breath) ease-in-out var(--breath-at) infinite; }

  /* the signatures start once the moon is up */
  .ph-dl .ph-sig { animation: beam-in 1s var(--ease) 1.5s both; }
  .ph-dl .ph-sig::before { animation: drop 19.2s var(--ease-in) 1.8s infinite both; }
  .ph-dl .ph-sig::after { animation: fade-in 1s var(--ease) 2.2s both; }
  .ph-dl .ph-line::before { animation: fade-in 2s var(--ease) .7s both, land 19.2s var(--ease) 2.49s infinite; }

  .ph-pricing .ph-sig::before { animation: gauge-test 1.5s cubic-bezier(.45, 0, .25, 1) 1.1s both; }

  .ph-support .ph-sig::before { animation: beacon var(--breath) var(--ease) calc(var(--breath-at) + 2s) infinite both; }
  .ph-support .ph-sig::after { animation: beacon var(--breath) var(--ease) calc(var(--breath-at) + 2.9s) infinite both; }

  .ph-privacy .ph-sig {
    --lo: .55;
    animation: spin 48s linear 1.1s infinite, glow-breathe var(--breath) ease-in-out var(--breath-at) infinite both;
  }
  .ph-terms .ph-sig { animation: fade-in 1.2s var(--ease) .7s both; }
  .ph-terms .ph-sig::before { animation: terminator .9s var(--ease) .9s both; }
  .ph-pc .ph-sig { animation: fade-in 1.2s var(--ease) .7s both; }
  .short.ruled::before { animation: rule-draw 1.4s var(--ease) 1.5s both; } /* the line carries on down the sheet */

  .stars { animation: fade-in 4s ease 1.2s both; }
  .stars::before { animation: twinkle 7s ease-in-out infinite alternate; }
  .stars::after { animation: twinkle 9.5s ease-in-out -4s infinite alternate-reverse; }
}
@keyframes ph-rise { from { translate: 0 calc(var(--mc) + 20px); } }
@keyframes line-draw { from { scale: .2 1; opacity: 0; } }
@keyframes beam-in { from { scale: 1 0; } }
@keyframes drop {
  0% { translate: 0 0; opacity: 0; }
  .8% { opacity: 1; }
  3.6% { translate: 0 var(--fall); opacity: 1; }
  4.4%, 100% { translate: 0 var(--fall); opacity: 0; }
}
@keyframes land { 0%, 5%, 100% { scale: 1 1; } 1% { scale: 1.9 1.6; } }
@keyframes gauge-test { 0% { --sweep: 0deg; } 45% { --sweep: 176.5deg; } 100% { --sweep: 0deg; } }
@keyframes beacon { 0% { scale: .22; opacity: 0; } 4% { opacity: .55; } 45%, 100% { scale: 1; opacity: 0; } }
@keyframes spin { to { rotate: 1turn; } }
@keyframes terminator { from { scale: 1 0; } }

/* ---------- page body ---------- */
.page { padding-bottom: clamp(72px, 9vw, 112px); }
.sec { margin-top: var(--sec); }
.sec-top { margin-top: var(--sec-top); }

/* a section label: HUD caps, then a trace that ends on a small solder pad */
.label {
  display: flex; align-items: center; gap: 18px;
  margin-bottom: 24px;
  font: 600 var(--t-hud)/1 var(--hud); letter-spacing: .3em; text-transform: uppercase;
  color: var(--muted);
}
.label::after {
  content: ""; flex: 1; height: 6px;
  background:
    linear-gradient(90deg, var(--track), rgba(43, 43, 48, .35)) 0 50% / calc(100% - 7px) 1px no-repeat,
    radial-gradient(circle 3px at calc(100% - 3px) 50%, transparent 1.4px, rgba(110, 110, 115, .75) 1.8px 2.5px, transparent 2.9px);
}

:where(.page) p { font-size: var(--t-body); line-height: 1.65; text-wrap: pretty; }
.lead { max-width: 40em; font-size: var(--t-lead); color: var(--text); }
:where(.page) p.lead { font-size: var(--t-lead); line-height: 1.6; }
.lead + .dts { margin-top: 24px; }
.line { margin-top: 22px; max-width: 44em; }
.note {
  margin-top: 24px; max-width: 46em;
  padding-left: 16px; border-left: 1px solid var(--track);
}
:where(.page) p.note { font-size: var(--t-small); line-height: 1.6; color: var(--muted); }
.note strong, .note .ui { color: var(--body); }
.sec-note { margin-top: 30px; }

/* the app's own key labels (RUN CHECK-UP, SETTINGS...) set like its keys: tracked HUD caps */
.ui { font: 600 .84em/1 var(--hud); letter-spacing: .09em; color: var(--text); white-space: nowrap; }
/* ...and where they are the subject (a channel title, a step, the sealed list), as real keycaps */
:is(.ch-title, .step strong, .short) .ui {
  display: inline-block; padding: 5px 9px 4px; margin-block: 1px;
  border-radius: var(--r-plate);
  font-size: .74em; letter-spacing: .1em; line-height: 1.1;
  color: var(--bright);
  background: linear-gradient(180deg, rgba(242, 240, 235, .07), rgba(242, 240, 235, .015)), #111113;
  box-shadow: inset 0 0 0 1px rgba(242, 240, 235, .24), inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 0 -1px rgba(0, 0, 0, .6);
  vertical-align: .08em;
}
.short li .ui { font-size: .7em; padding: 4px 8px 3px; }
.path-sep { color: var(--muted); font-weight: 300; padding-inline: .1em; }

code {
  padding: .14em .42em; border-radius: 5px;
  font: 400 .86em/1.4 var(--mono);
  color: var(--text);
  background: rgba(242, 240, 235, .05);
  box-shadow: inset 0 0 0 1px rgba(110, 110, 115, .26);
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* the code block: no sideways scroll; lines wrap with a hanging indent, and each real line carries its number */
pre {
  position: relative;
  margin: 18px 0; padding: 16px 18px 16px 48px;
  border-radius: 10px;
  background: #08080a;
  box-shadow: inset 0 0 0 1px rgba(110, 110, 115, .3), inset 0 1px 0 rgba(255, 255, 255, .03), inset 2px 0 0 rgba(242, 240, 235, .18);
  font: 13px/1.8 var(--mono);
  color: var(--text);
  white-space: pre-wrap; overflow-wrap: break-word; /* split a word only when it can't fit a line */
  counter-reset: ln;
}
pre::before { /* the line-number gutter rule */
  content: ""; position: absolute; left: 38px; top: 12px; bottom: 12px; width: 1px;
  background: linear-gradient(rgba(43, 43, 48, 0), var(--track) 20%, var(--track) 80%, rgba(43, 43, 48, 0));
}
pre code { padding: 0; background: none; box-shadow: none; font: inherit; white-space: inherit; overflow-wrap: inherit; }
pre .ln { display: block; position: relative; padding-left: 2ch; text-indent: -2ch; }
pre .ln::before {
  counter-increment: ln; content: counter(ln);
  position: absolute; left: -36px; top: 0; width: 18px; text-align: right; text-indent: 0;
  color: var(--muted); font-size: 11px;
  -webkit-user-select: none; user-select: none;
}

/* lists inside text */
.bul { margin-top: 14px; display: grid; gap: 12px; }
.bul li { position: relative; padding-left: 22px; font-size: var(--t-body); line-height: 1.65; }
.bul li::before {
  content: ""; position: absolute; left: 2px; top: .72em;
  width: 5px; height: 5px; border-radius: 50%;
  background: #8f8d88; box-shadow: 0 0 6px rgba(242, 240, 235, .22);
}
.num { margin-top: 14px; display: grid; gap: 12px; counter-reset: n; }
.num li { position: relative; padding-left: 36px; font-size: var(--t-body); line-height: 1.65; counter-increment: n; }
.num li::before {
  content: counter(n); position: absolute; left: 0; top: .2em;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font: 600 11px/1 var(--hud); color: var(--text);
  background: #08080a;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .9), 0 0 0 1px rgba(110, 110, 115, .45);
}

/* ---------- the panel: one card recipe for the whole site; .screws adds the app's corner screws ---------- */
.panel {
  position: relative; isolation: isolate;
  border-radius: var(--r-panel); padding: 32px;
  background:
    var(--screws, linear-gradient(transparent, transparent)),
    linear-gradient(180deg, rgba(242, 240, 235, .032), rgba(242, 240, 235, 0) 42%),
    var(--card);
  box-shadow: inset 0 0 0 1px rgba(110, 110, 115, .28), inset 0 1px 0 rgba(255, 255, 255, .05), 0 30px 60px -40px rgba(0, 0, 0, .9);
}
.screws {
  --sc: radial-gradient(circle 4px, rgba(110, 110, 115, .55) 0 .9px, transparent 1.2px 2.2px, rgba(110, 110, 115, .6) 2.5px 3.3px, transparent 3.6px);
  --screws:
    var(--sc) 8px 8px / 8px 8px no-repeat,
    var(--sc) calc(100% - 8px) 8px / 8px 8px no-repeat,
    var(--sc) 8px calc(100% - 8px) / 8px 8px no-repeat,
    var(--sc) calc(100% - 8px) calc(100% - 8px) / 8px 8px no-repeat;
}

/* ---------- <details>: a row with a lamp that lights when it opens ---------- */
.dts { position: relative; }
.dts::after { /* closing hairline */
  content: ""; display: block; height: 1px;
  background: linear-gradient(90deg, var(--track), rgba(43, 43, 48, .5) 70%, rgba(43, 43, 48, 0));
}
.dt { position: relative; }
.dt::before { /* hairline above each row */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, var(--track), rgba(43, 43, 48, .5) 70%, rgba(43, 43, 48, 0));
}
.dt > summary {
  position: relative;
  display: grid; grid-template-columns: 15px minmax(0, 1fr) 14px; align-items: center; column-gap: 18px;
  min-height: 60px; padding: 16px 8px 16px 2px;
  list-style: none; cursor: pointer;
  color: var(--text);
  font: 350 var(--t-h4)/1.35 var(--display); letter-spacing: .006em;
  transition: color .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.dt > summary::-webkit-details-marker { display: none; }
.dt > summary::before { /* bone light that warms the row on hover or touch */
  content: ""; position: absolute; inset: 1px 0 0 -14px; pointer-events: none; border-radius: 8px;
  background: linear-gradient(90deg, rgba(242, 240, 235, .045), rgba(242, 240, 235, .015) 45%, rgba(242, 240, 235, 0) 80%);
  opacity: 0; transition: opacity .45s var(--ease);
}
.dt > summary::after { /* a thin lit rule that draws out from the lamp when the row opens */
  content: ""; position: absolute; left: 1px; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(242, 240, 235, .5), rgba(110, 110, 115, .32) 28%, rgba(43, 43, 48, 0) 85%);
  scale: 0 1; transform-origin: 0 50%;
  transition: scale .7s var(--ease);
}
.dt > summary:active::before { opacity: 1; transition-duration: var(--d-press); }
.dt > summary:focus-visible { outline-offset: 2px; border-radius: 8px; }
.dt-t { min-width: 0; overflow-wrap: anywhere; }
.dt-t code { font-size: .8em; }

.dt-lamp { /* bezel */
  position: relative; display: grid; place-items: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: #08080a;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .9), 0 0 0 1px rgba(110, 110, 115, .4);
  transition: box-shadow .4s var(--ease);
}
.dt-lamp::before, .dt-lamp::after { content: ""; grid-area: 1 / 1; width: 7px; height: 7px; border-radius: 50%; }
.dt-lamp::before { background: #1c1c20; box-shadow: inset 0 0 0 1px rgba(110, 110, 115, .25); } /* dark lens */
.dt-lamp::after { /* lit lens */
  background: radial-gradient(circle at 35% 30%, #c9f1dd, var(--green) 55%, #2f8a60);
  box-shadow: 0 0 8px 1px rgba(79, 190, 139, .55), 0 0 26px 6px rgba(79, 190, 139, .13), 0 0 2px var(--green);
  opacity: 0; scale: .6;
  transition: opacity .45s var(--ease), scale .6s var(--ease);
}
@media (hover: hover) {
  .dt > summary:is(:hover, :focus-visible) { color: var(--bright); }
  .dt > summary:is(:hover, :focus-visible)::before { opacity: 1; }
  .dt > summary:is(:hover, :focus-visible) .dt-lamp { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .9), 0 0 0 1px rgba(242, 240, 235, .55), 0 0 10px rgba(242, 240, 235, .18); }
  .dt > summary:is(:hover, :focus-visible) .dt-chev::before { border-color: var(--bright); }
}
.dt[open] > summary .dt-lamp::after { opacity: 1; scale: 1; }
.dt[open] > summary::after { scale: 1 1; }
.dt[open] > summary { color: var(--bright); }

.dt-chev { position: relative; width: 14px; height: 14px; }
.dt-chev::before {
  content: ""; position: absolute; left: 3px; top: 2px;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  rotate: 45deg;
  transition: rotate .5s var(--ease), translate .5s var(--ease), border-color .3s var(--ease);
}
.dt[open] > summary .dt-chev::before { rotate: 225deg; translate: 0 4px; }

.dt-body { position: relative; padding: 18px 8px 28px 35px; }
.dt-body > p, .dt-body > .num, .dt-body > .bul { max-width: 42em; }
.dt-body > p + p, .dt-body > p + .num, .dt-body > p + .bul { margin-top: 12px; }
.dt-body > .num + p, .dt-body > .bul + p { margin-top: 14px; }
.dt-body .note { margin-top: 16px; }
/* the rail: an open drawer's lamp runs a trace down its body (wide screens) */
@media (min-width: 761px) {
  .dt[open] > .dt-body::before {
    content: ""; position: absolute; left: 9px; top: 0; bottom: 28px; width: 1px;
    background: linear-gradient(rgba(242, 240, 235, .35), rgba(110, 110, 115, .18) 40%, rgba(43, 43, 48, 0));
    transform-origin: 50% 0;
  }
}

/* arriving by a link (#verify, #send...): the lamp blinks so the eye finds the row */
.dt:target > summary { color: var(--bright); }
@keyframes locate {
  50% { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .9), 0 0 0 1px rgba(242, 240, 235, .95), 0 0 16px 3px rgba(242, 240, 235, .45); }
}

/* a row that needs no drawer (Terms: Contact): same hairline, a lit bone lamp, the link in plain view */
.dt-row {
  display: grid; grid-template-columns: 15px auto minmax(0, 1fr); align-items: center; column-gap: 18px;
  min-height: 60px; padding: 8px 8px 8px 2px;
  color: var(--text);
  font: 350 var(--t-h4)/1.35 var(--display); letter-spacing: .006em;
}
:where(.page) p.dt-row { font-size: var(--t-h4); line-height: 1.35; }
main .dt-row a:not(.btn) {
  justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin-left: 4px;
  font: 400 var(--t-body)/1.5 var(--sans); letter-spacing: 0;
}
.dt-lamp.bone::after {
  opacity: 1; scale: 1;
  background: radial-gradient(circle at 35% 30%, #ffffff, #e4e2dc 55%, #9d9a93);
  box-shadow: 0 0 8px 1px rgba(242, 240, 235, .4), 0 0 22px 5px rgba(242, 240, 235, .08), 0 0 2px #e4e2dc;
}

/* smooth open and close where the browser can animate to auto height (an extra: plain open elsewhere) */
@supports selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    :is(.dt, .peek)::details-content {
      block-size: 0; overflow-y: clip;
      transition: block-size .32s var(--ease), content-visibility .32s allow-discrete;
    }
    :is(.dt, .peek)[open]::details-content { block-size: auto; }
  }
}
@media (prefers-reduced-motion: no-preference) {
  .dt[open] > .dt-body { animation: body-in .55s var(--ease) both; }
  .dt[open] > .dt-body::before { animation: rail var(--d-draw) var(--ease) .05s both; }
  .dt:target > summary .dt-lamp { animation: locate 1.1s ease-in-out .35s 3; }
}
@keyframes body-in { from { opacity: 0; translate: 0 -6px; } }
@keyframes rail { from { scale: 1 0; } }

/* Download's service hatch: verify, update, remove, in one screwed panel */
.service { padding: 8px 24px; }
.service.dts::after { display: none; }
.service .dt:first-child::before { display: none; }

/* ---------- Download: three steps joined by a trace ---------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 30px; view-timeline: --steps block; }
.step { position: relative; }
.step .node {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  font: 600 13px/1 var(--hud); color: var(--bright);
  background: #08080a;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .9), 0 0 0 1px rgba(242, 240, 235, .45), 0 0 18px -2px rgba(242, 240, 235, .3);
}
.step:not(:last-child)::before { /* the trace to the next node */
  content: ""; position: absolute; top: 16.5px; left: 46px; right: -20px; height: 1px;
  background:
    linear-gradient(90deg, rgba(242, 240, 235, .75), rgba(242, 240, 235, .45)) 0 0 / 100% 100% no-repeat,
    rgba(74, 74, 79, .9);
}
.step:not(:last-child)::after { /* the pad it lands on */
  content: ""; position: absolute; top: 14.5px; right: -22px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--bg); box-shadow: 0 0 0 1px rgba(110, 110, 115, .8);
}
.step p { margin-top: 18px; max-width: 19em; font-size: var(--t-body); color: var(--body); }
.step strong { display: block; margin-bottom: 6px; font: 350 var(--t-h3)/1.3 var(--display); color: var(--text); }
.step strong .ui { font-size: .66em; }
.step-body { display: block; }
/* side by side, the three steps share rows (node, heading, body), so a two-line heading never pushes one body out of line */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 761px) {
    .steps { grid-template-rows: auto auto auto; }
    .step { display: grid; grid-row: span 3; grid-template-rows: subgrid; font-size: var(--t-body); line-height: 1.65; color: var(--body); }
    .step p { display: contents; }
    .step strong { margin: 18px 0 6px; }
  }
}

/* ---------- a rule of facts (Home's trust row, Download's requirements): one component ---------- */
.facts {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 14px 34px;
  padding: 26px 0;
}
.facts::before, .facts::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, rgba(43, 43, 48, 0), var(--track) 14%, var(--track) 86%, rgba(43, 43, 48, 0));
}
.facts::before { top: 0; }
.facts::after { bottom: 0; }
.facts li {
  display: inline-flex; align-items: center; gap: 12px;
  white-space: nowrap;
  font: 600 var(--t-hud)/1.3 var(--hud); letter-spacing: .16em; text-transform: uppercase;
  color: var(--body);
}
/* one bullet language: the same LED slot the nav uses */
.facts li::before {
  content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%;
  background-color: var(--track);
  box-shadow: inset 0 0 0 1px rgba(110, 110, 115, .35), 0 0 0 0 rgba(79, 190, 139, 0);
}
.facts li.ok::before {
  background-color: var(--green);
  box-shadow: inset 0 0 0 1px rgba(79, 190, 139, .3), 0 0 8px 1px rgba(79, 190, 139, .55);
}
.facts li.warn::before {
  background-color: var(--amber);
  box-shadow: inset 0 0 0 1px rgba(214, 164, 75, .3), 0 0 8px 1px rgba(214, 164, 75, .5);
}
/* Download's five requirements: three aligned columns on a wide screen (3 + 2, LEDs in line), a plain wrap on phones */
@media (min-width: 761px) {
  .facts.cols { display: grid; grid-template-columns: repeat(3, max-content); column-gap: 46px; }
}

/* ---------- rows with a lamp (Pricing promises) ---------- */
.rows li {
  position: relative;
  display: grid; grid-template-columns: 19px minmax(0, 1fr); column-gap: 22px;
  align-items: start;
  padding: 26px 0;
  view-timeline: --row block;
}
.rows li::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, var(--track), rgba(43, 43, 48, .5) 70%, rgba(43, 43, 48, 0));
}
.rows li:first-child::before { display: none; }
.rows li:first-child { padding-top: 4px; } /* label to first row: 24px, like every other section */
.rows .lamp { margin-top: 4px; }
/* run-in: the head opens the sentence it belongs to ("Stays free: the check-up...") */
.rt-body { max-width: 40em; line-height: 1.65; }
.rt-body > .rt, .rt-body > p { display: inline; }
.rt { font: 350 var(--t-h4)/1.35 var(--display); letter-spacing: .004em; color: var(--text); }
.rt-body > p { color: var(--body); }
@media (min-width: 900px) {
  .rows.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
  .rows.grid li:nth-child(-n+2)::before { display: none; }
  .rows.grid li { padding: 28px 0; }
  .rows.grid li:nth-child(-n+2) { padding-top: 4px; }
}

/* ---------- Pricing: two plans ---------- */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.plan { display: flex; flex-direction: column; align-items: flex-start; padding: 30px 32px 32px; }
.plan.lit {
  box-shadow:
    inset 0 0 0 1px rgba(242, 240, 235, .2),
    inset 0 1px 0 rgba(255, 255, 255, .09),
    0 -24px 70px -40px rgba(242, 240, 235, .35),
    0 30px 60px -40px rgba(0, 0, 0, .9);
}
.plan.lit::before { /* moonlight falling on the lit plan from above */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(ellipse 70% 150px at 50% 0, rgba(242, 240, 235, .085), rgba(242, 240, 235, .025) 55%, rgba(242, 240, 235, 0));
}
.plan.lit::after { /* a lit edge along the top */
  content: ""; position: absolute; left: 18%; right: 18%; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(242, 240, 235, 0), rgba(242, 240, 235, .7), rgba(242, 240, 235, 0));
}
.plan.later { /* not on sale yet: an unpowered panel, a dashed outline, an unlit LED */
  background:
    var(--screws, linear-gradient(transparent, transparent)),
    linear-gradient(180deg, rgba(242, 240, 235, .015), rgba(242, 240, 235, 0) 45%),
    rgba(21, 21, 23, .55);
  box-shadow: none;
  outline: 1px dashed rgba(110, 110, 115, .5); outline-offset: -1px;
}
.plan-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 11px;
  font: 600 11.5px/1.3 var(--hud); letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted);
}
.plan-head b { color: var(--text); font-weight: 600; }
.plan-price {
  margin-top: 28px;
  font: 300 var(--t-price)/1 var(--display); letter-spacing: -.02em;
  color: var(--bright);
}
:where(.page) p.plan-price { font-size: var(--t-price); line-height: 1; }
.plan.lit .plan-price { text-shadow: 0 0 2px rgba(242, 240, 235, .4), 0 0 26px rgba(242, 240, 235, .22); }
.plan-price .unit {
  font: 600 12.5px/1 var(--hud); letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
/* the paid price, unlit: solid muted digits with no glow, beside the glowing bright "Free." (an outline stroke
   would draw Bahnschrift's overlapping contours: the $ bar through its S, a hollow square for the point) */
.plan.later .plan-price { color: var(--text); }
.plan .plan-price.unlit { color: var(--muted); text-shadow: none; }
@media (forced-colors: active) { .plan .plan-price.unlit { color: CanvasText; } }
.plan-rule {
  display: block; align-self: stretch; height: 1px; margin: 26px 0 22px;
  background: linear-gradient(90deg, rgba(242, 240, 235, .55), rgba(110, 110, 115, .35) 32%, rgba(43, 43, 48, 0) 90%);
}
.plan.later .plan-rule { background: linear-gradient(90deg, rgba(110, 110, 115, .6), rgba(43, 43, 48, .5) 32%, rgba(43, 43, 48, 0) 90%); }
.plan-text { font-size: var(--t-body); color: var(--body); max-width: 26em; margin-bottom: 30px; }
.plan .btn { margin-top: auto; } /* both keys sit on one line at the foot of their cards */
.plan-send { display: none; } /* phones only: Send it to your PC, in place of the card's Download key */

/* ---------- Support: two channels ---------- */
.channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.channel { display: flex; flex-direction: column; align-items: flex-start; padding: 30px 32px 26px; }
.ch-kind {
  display: flex; align-items: center; gap: 11px;
  font: 600 11.5px/1 var(--hud); letter-spacing: .24em; text-transform: uppercase;
  color: var(--muted);
}
:where(.page) p.ch-kind { font-size: 11.5px; line-height: 1; }
.ch-title {
  margin-top: 20px;
  font: 350 var(--t-h3)/1.3 var(--display); letter-spacing: -.004em;
  color: var(--bright);
  overflow-wrap: anywhere;
}
main .ch-title a:not(.btn) { color: var(--bright); text-decoration-color: rgba(242, 240, 235, .35); }
.channel p:not(.ch-kind) { margin-top: 14px; }
.go {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; margin-top: auto; padding-top: 16px;
  color: var(--text); text-decoration: none;
  font: 600 var(--t-hud)/1 var(--hud); letter-spacing: .16em; text-transform: uppercase;
  transition: color .3s var(--ease), text-shadow .4s var(--ease);
}
.go .ic { width: 14px; height: 14px; transition: translate .5s var(--ease); }
@media (hover: hover) {
  .go:is(:hover, :focus-visible) { color: var(--bright); text-shadow: 0 0 14px rgba(242, 240, 235, .45); }
  .go:is(:hover, :focus-visible) .ic { translate: 3px 0; }
}
.go:active { color: var(--bright); }

.side-note { padding: 24px 28px 26px; }
.side-title {
  display: flex; align-items: center; gap: 14px;
  font: 350 var(--t-h4)/1.3 var(--display); color: var(--text);
}
.side-title .lamp { width: 15px; height: 15px; }
.side-title .lamp::after { width: 7px; height: 7px; box-shadow: 0 0 8px 1px var(--glow), 0 0 22px 5px var(--spill); }
.side-note p { margin-top: 12px; padding-left: 29px; }

/* ---------- Privacy: the short version, sealed in a panel ---------- */
.short { position: relative; }
.short li {
  position: relative;
  padding: 19px 0 19px 26px;
  font-size: var(--t-lead); line-height: 1.55; color: var(--text);
  text-wrap: pretty;
}
.short li + li::after {
  content: ""; position: absolute; left: 26px; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(43, 43, 48, .9), rgba(43, 43, 48, 0));
}
.short li::before {
  content: ""; position: absolute; left: 0; top: 29px; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c9f1dd, var(--green) 55%, #2f8a60);
  box-shadow: 0 0 0 1px rgba(79, 190, 139, .3), 0 0 9px 1px rgba(79, 190, 139, .5);
}
.short.panel { padding: 8px 30px; }
.short.panel::after { /* the seal: a lit edge along the top, half the lit plan's strength */
  content: ""; position: absolute; left: 22%; right: 22%; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(242, 240, 235, 0), rgba(242, 240, 235, .38), rgba(242, 240, 235, 0));
}

/* ---------- Terms: the short version as a ruled sheet (numbered margin, a margin rule like the head's line) ---------- */
.short.ruled { padding: 0; counter-reset: t; }
.short.ruled::before {
  content: ""; position: absolute; left: 52px; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(rgba(242, 240, 235, .4), var(--track) 30%, var(--track) 85%, rgba(43, 43, 48, 0));
  transform-origin: 50% 0;
}
.short.ruled li { padding: 18px 0 18px 68px; counter-increment: t; }
.short.ruled li::before {
  content: counter(t, decimal-leading-zero);
  left: 0; top: 24px; width: 40px; height: auto; border-radius: 0;
  font: 600 var(--t-hud-s)/1 var(--hud); letter-spacing: .2em; color: var(--muted); text-align: right;
  background: none; box-shadow: none;
}
.short.ruled li + li::after { left: 68px; }
.short.ruled li:first-child { padding-top: 6px; }
.short.ruled li:first-child::before { top: 12px; }

/* ---------- Windows-only note + Email yourself the link (phones, upright or sideways; a touch-screen Windows PC is a PC) ---------- */
.pc-only { display: none; }
@media (max-width: 680px), (min-width: 681px) and (max-width: 940px) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
  .pc-only { display: grid; justify-items: center; gap: 14px; margin: 22px auto 0; max-width: 340px; }
  .pc-note {
    display: inline-flex; align-items: flex-start; gap: 10px; text-align: left;
    font-size: var(--t-small); line-height: 1.5; color: var(--body);
  }
  :where(.page, .hero) p.pc-note { font-size: var(--t-small); line-height: 1.5; }
  .pc-note::before {
    content: ""; flex: none; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f5e1b8, var(--amber) 55%, #94702c);
    box-shadow: 0 0 0 1px rgba(214, 164, 75, .3), 0 0 8px 1px rgba(214, 164, 75, .5);
  }
}

/* ---------- 404: the moon has set (Open it on your PC shares its one-head layout) ---------- */
.nf .ph, .ph.ph-pc { min-height: calc(100svh - var(--bar-h) - 180px); display: flex; flex-direction: column; justify-content: center; padding-bottom: 40px; }
.nf .ph-sky, .ph-pc .ph-sky { height: 120px; }
.nf .ph-cta .btn-lit { padding: 0 30px; } /* Home has no icon: even padding */
/* their icons stay put on hover (the download nudge would read as "download") */
@media (hover: hover) { :is(.nf, .ph-pc) .ph-cta .btn:is(:hover, :focus-visible) .ic { translate: 0 0; } }

/* ---------- footer: the last horizon ---------- */
.foot { position: relative; padding: 36px 0 40px; }
.foot::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(43, 43, 48, 1) 18%, rgba(110, 110, 115, .9) 46%, rgba(217, 214, 207, .7) 50%,
    rgba(110, 110, 115, .9) 54%, rgba(43, 43, 48, 1) 82%, transparent);
}
.foot::after { /* the same instrument scale as the page heads, small */
  content: ""; position: absolute; left: 50%; top: 1px; width: 240px; margin-left: -120px; height: 5px; pointer-events: none;
  background:
    linear-gradient(rgba(242, 240, 235, .7), rgba(242, 240, 235, .7)) 50% 0 / 1px 5px no-repeat,
    linear-gradient(90deg, transparent 11.5px, rgba(74, 74, 79, .9) 11.5px 12.5px, transparent 12.5px) 50% 0 / 24px 3px repeat-x;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; }
.foot-brand {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  color: var(--muted); text-decoration: none;
  font: 600 var(--t-hud)/1 var(--hud); letter-spacing: .3em;
  transition: color .3s var(--ease);
}
.foot-brand img { width: 18px; height: 18px; opacity: .8; transition: opacity .3s var(--ease), rotate .9s var(--ease); }
@media (hover: hover) {
  .foot-brand:is(:hover, :focus-visible) { color: var(--text); }
  .foot-brand:is(:hover, :focus-visible) img { opacity: 1; rotate: 60deg; }
}
.foot-nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.foot-nav a {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px;
  color: var(--muted); text-decoration: none;
  font: 600 11.5px/1 var(--hud); letter-spacing: .18em; text-transform: uppercase;
  transition: color .3s var(--ease), text-shadow .4s var(--ease);
}
@media (hover: hover) { .foot-nav a:is(:hover, :focus-visible) { color: var(--bright); text-shadow: 0 0 12px rgba(242, 240, 235, .4); } }
.foot-nav a:active { color: var(--bright); }
.foot-nav a[aria-current="page"] { color: var(--text); }
.foot-nav a[aria-current="page"]::before { /* sits in the gap, so the row wraps like Home's */
  content: ""; position: absolute; left: -10px; top: 50%; margin-top: -2px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 6px 1px rgba(79, 190, 139, .55);
}
.legal { margin-top: 20px; max-width: 64em; font-size: var(--t-fine); line-height: 1.6; color: var(--muted); }

/* ---------- scroll-driven extras (content is whole without them) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* lamps sit dark until their row comes up, then switch on with one flare */
    .rows .lamp::after {
      animation: lamp-on linear both;
      animation-timeline: --row;
      animation-range: entry 40% cover 38%;
    }
    .reveal { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }

    /* the three steps power up in order as the row arrives: node, trace, node, trace, node */
    .step .node { animation: node-on linear both; animation-timeline: --steps; }
    .step:not(:last-child)::before { animation: trace-fill linear both; animation-timeline: --steps; }
    .step.s1 .node { animation-range: entry 10% entry 40%; }
    .step.s1::before { animation-range: entry 35% entry 60%; }
    .step.s2 .node { animation-range: entry 50% entry 75%; }
    .step.s2::before { animation-range: entry 70% entry 90%; }
    .step.s3 .node { animation-range: entry 80% entry 100%; }


    /* the facts' LEDs come on one after another, like checks passing */
    .facts { view-timeline: --facts block; }
    .facts li::before { animation: pip-on linear both; animation-timeline: --facts; }
    .facts li:nth-child(1)::before { animation-range: cover 6% cover 12%; }
    .facts li:nth-child(2)::before { animation-range: cover 10% cover 16%; }
    .facts li:nth-child(3)::before { animation-range: cover 14% cover 20%; }
    .facts li:nth-child(4)::before { animation-range: cover 18% cover 24%; }
    .facts li:nth-child(5)::before { animation-range: cover 22% cover 28%; }
    .facts li.warn::before { animation-name: pip-amber; }
  }
}
@keyframes drift { from { translate: 0 22px; } }
@keyframes rule-draw { from { scale: 1 0; } }
@keyframes lamp-on {
  0%, 52% { opacity: .32; scale: .85; box-shadow: 0 0 0 0 var(--glow), 0 0 0 0 var(--spill), 0 0 0 var(--c); }
  62% { opacity: 1; scale: 1.18; box-shadow: 0 0 18px 4px var(--glow), 0 0 46px 12px var(--spill), 0 0 4px var(--c); }
  100% { opacity: 1; scale: 1; box-shadow: 0 0 10px 1px var(--glow), 0 0 34px 8px var(--spill), 0 0 2px var(--c); }
}
@keyframes node-on {
  0%, 30% { color: var(--muted); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .9), 0 0 0 1px rgba(110, 110, 115, .4), 0 0 0 -2px rgba(242, 240, 235, 0); }
  60% { color: #fff; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .9), 0 0 0 1px rgba(242, 240, 235, .9), 0 0 26px 2px rgba(242, 240, 235, .45); }
  100% { color: var(--bright); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .9), 0 0 0 1px rgba(242, 240, 235, .45), 0 0 18px -2px rgba(242, 240, 235, .3); }
}
@keyframes pip-amber {
  0% { background-color: var(--track); box-shadow: inset 0 0 0 1px rgba(110, 110, 115, .35), 0 0 0 0 rgba(214, 164, 75, 0); }
  55% { background-color: #f5e1b8; box-shadow: inset 0 0 0 1px rgba(214, 164, 75, .4), 0 0 14px 3px rgba(214, 164, 75, .65); }
  100% { background-color: var(--amber); box-shadow: inset 0 0 0 1px rgba(214, 164, 75, .3), 0 0 8px 1px rgba(214, 164, 75, .5); }
}
@keyframes trace-fill { from { background-size: 0% 100%; } }

/* ---------- smaller screens ---------- */
@media (max-width: 860px) {
  .plans, .channels { grid-template-columns: minmax(0, 1fr); }
  /* stacked cards: the dashed "not on sale yet" key only lined the keys up side by side, and repeats the card's own label */
  .plan .btn-off { display: none; }
  .plan.later .plan-text { margin-bottom: 0; }
}
@media (max-width: 760px) {
  .steps { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
  .step { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 18px; align-items: start; }
  .step p { margin-top: 5px; max-width: none; }
  .step:not(:last-child)::before {
    top: 44px; bottom: -22px; left: 16.5px; right: auto; width: 1px; height: auto;
    background:
      linear-gradient(180deg, rgba(242, 240, 235, .75), rgba(242, 240, 235, .45)) 0 0 / 100% 100% no-repeat,
      rgba(74, 74, 79, .9);
  }
  .step:not(:last-child)::after { top: auto; bottom: -24px; right: auto; left: 14.5px; }

  .facts.cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } /* one item per line at every phone width */
  .rows li { column-gap: 16px; padding: 22px 0; }
  .dt > summary { min-height: 56px; column-gap: 14px; padding-block: 14px; }
  .dt-row { column-gap: 14px; min-height: 56px; }
  .dt-body { padding: 14px 0 24px 0; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (max-width: 760px) {
    @keyframes trace-fill { from { background-size: 100% 0%; } }
  }
}

/* ---------- phones: one header row that scrolls away; the key moves to a dock at the thumb ----------
   A phone can't run Lunite, so on phones the dock and the lit key are Send it to your PC (the Home deck's mailto).
   The dock is sticky, the last child of a run that starts after the page's own key: it sits below the fold while
   that key is on screen, pins to the bottom once you scroll, and stops above the footer (no animation needed). */
@media (max-width: 680px) {
  html { scroll-padding-top: 16px; scroll-padding-bottom: 96px; }
  .bar { position: relative; }
  .bar-in { flex-wrap: nowrap; gap: 4px; min-height: var(--bar-h); }
  .bar .btn-key { display: none; }
  .brand { min-width: 44px; padding: 0; }
  .nav { flex: none; margin: 0 -8px 0 0; padding: 0; gap: 0; }
  .nav a { min-height: 44px; padding: 0 8px; gap: 6px; font-size: 12px; letter-spacing: .12em; }
  .nav a:not([aria-current]) .led { display: none; } /* only "you are here" keeps its LED */

  .dock {
    position: sticky; z-index: 60; width: max-content; max-width: 100%;
    margin: 24px auto 0;
    bottom: calc(12px + env(safe-area-inset-bottom));
    display: flex; align-items: center; gap: 12px;
    padding: 6px 6px 6px 14px; border-radius: 999px;
    background: rgba(18, 18, 20, .74);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: inset 0 0 0 1px rgba(242, 240, 235, .16), inset 0 1px 0 rgba(255, 255, 255, .06),
                0 12px 32px -12px rgba(0, 0, 0, .85), 0 0 44px -18px rgba(242, 240, 235, .28);
    view-transition-name: dock;
  }
  .dock-mark { width: 20px; height: 20px; filter: drop-shadow(0 0 2px rgba(242, 240, 235, .35)); }
  .dock-key { min-height: 44px; border-radius: 999px; padding: 0 16px 0 18px; }
  .dock-key:focus-visible { border-radius: 999px; }

  .ph-sky { height: clamp(104px, 14svh, 132px); }
  .ph-pricing .ph-sky { height: clamp(124px, 16svh, 146px); }
  .ph-support .ph-sig { --s: 140px; }
  .ph h1 { margin-top: 22px; }
  .nf .ph-sky, .ph-pc .ph-sky { height: 110px; }

  .panel { padding: 24px 20px; border-radius: 14px; }
  .plan { padding: 26px 22px; }
  .channel { padding: 26px 22px 18px; }
  .side-note { padding: 22px 20px 24px; }
  .side-note p { padding-left: 0; }
  .short.panel { padding: 4px 20px; }
  .short li { padding-left: 22px; }
  .short li::before { top: 28px; }
  .short li + li::after { left: 22px; }
  .short.ruled::before { left: 34px; }
  .short.ruled li { padding-left: 48px; }
  .short.ruled li::before { width: 24px; letter-spacing: .12em; }
  .short.ruled li + li::after { left: 48px; }
  .service { padding: 4px 16px; }
  main .ch-title a:not(.btn) { display: inline-block; padding-block: 10px; }

  pre { padding: 14px 14px 14px 40px; font-size: 12.5px; }
  pre::before { left: 31px; }
  pre .ln::before { left: -32px; width: 16px; }

  .ph-cta .btn { width: 100%; max-width: 340px; }

  .foot { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
  .foot-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .foot-brand { align-self: flex-start; }
  .foot-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
  .foot-nav a { min-height: 44px; }
  .foot-nav a[aria-current="page"]::before { position: static; order: 1; margin: 0; } /* the LED after the label: every label keeps its left edge */

  /* an open drawer keeps its title pinned while you read a long body (the phone header doesn't stick, so top: 0 is free) */
  .dt[open] > summary { position: sticky; top: 0; z-index: 3; background: var(--bg); }
  .service .dt[open] > summary { background: var(--card); }

  /* small caps a little larger at arm's length */
  .plan-head, .ch-kind, :where(.page) p.ch-kind, .stamp, :where(.page) p.stamp { font-size: 12px; }

  /* a phone can't run Lunite, so no key in the page downloads it on a phone: Email yourself the link stands in */
  main a[href="/download/latest"] { display: none; }

  /* Pricing: the plan keys run full width, like every other key on a phone */
  .plan .btn { align-self: stretch; }
  .plan-send { display: block; align-self: stretch; margin-top: auto; }
  .plan-send + .btn { margin-top: 12px; }

  /* the lit key on a phone is Send it to your PC. (The quiet-bezel Download rules after it are dormant while phones hide Download.) */
  :is(.pc-only, .plan-send) .btn-send {
    width: 100%; max-width: 340px; min-height: 54px; padding: 0 24px 0 28px; gap: 12px;
    font-size: 13px; letter-spacing: .18em;
    color: #0c0c0d;
    background: linear-gradient(180deg, #f8f7f3, #dcd9d1);
    box-shadow:
      inset 0 1px 0 #fff,
      inset 0 -2px 0 rgba(0, 0, 0, .16),
      0 0 0 1px rgba(242, 240, 235, .22),
      0 12px 28px -14px rgba(242, 240, 235, .5),
      0 0 46px -12px rgba(242, 240, 235, .32);
  }
  .plan-send .btn-send { max-width: none; }
  :is(.pc-only, .plan-send) .btn-send:is(:hover, :focus-visible) {
    color: #0c0c0d; background-color: transparent;
    box-shadow:
      inset 0 1px 0 #fff,
      inset 0 -2px 0 rgba(0, 0, 0, .16),
      0 0 0 1px rgba(242, 240, 235, .42),
      0 16px 32px -14px rgba(242, 240, 235, .62),
      0 0 70px -10px rgba(242, 240, 235, .45);
  }
  :is(.pc-only, .plan-send) .btn-send:active {
    color: #0c0c0d; translate: 0 1px; scale: .985;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .7),
      inset 0 2px 6px rgba(0, 0, 0, .2),
      0 0 0 1px rgba(242, 240, 235, .3),
      0 6px 16px -10px rgba(242, 240, 235, .5),
      0 0 30px -12px rgba(242, 240, 235, .3);
  }
  :is(.hero .cta, .ph-dl .ph-cta, .plan.lit) .btn-lit {
    color: var(--text);
    background: rgba(21, 21, 23, .7);
    box-shadow: inset 0 0 0 1px rgba(110, 110, 115, .55), inset 0 1px 0 rgba(255, 255, 255, .04);
  }
  :is(.hero .cta, .ph-dl .ph-cta, .plan.lit) .btn-lit::after { display: none; }
  :is(.hero .cta, .ph-dl .ph-cta, .plan.lit) .btn-lit:is(:hover, :focus-visible) {
    translate: 0 0; color: var(--bright); background-color: var(--card-hover);
    box-shadow: inset 0 0 0 1px rgba(242, 240, 235, .5), inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 26px -6px rgba(242, 240, 235, .3);
  }
  :is(.hero .cta, .ph-dl .ph-cta, .plan.lit) .btn-lit:active {
    translate: 0 0; scale: .98; color: var(--bright); background-color: var(--card-hover);
    box-shadow: inset 0 0 0 1px rgba(242, 240, 235, .45), inset 0 2px 6px rgba(0, 0, 0, .5);
  }

  /* Download's head on a phone: the Windows note and Send only; no Download key, so no LICENSE line under it either */
  .ph-dl .ph-copy { display: flex; flex-direction: column; align-items: center; }
  .ph-dl .pc-only { order: 1; width: 100%; margin-top: 26px; margin-bottom: 14px; } /* room under the lit key's glow */
  .ph-dl .ph-cta, .ph-dl .under { display: none; }
}
/* phone tap targets: inline links grow their tap area without changing the line height */
@media (max-width: 680px), (hover: none) and (pointer: coarse) {
  main :is(p, li) a:not(.btn, .go) { padding-block: 10px; }
  main .price a:not(.btn) { padding-block: 9px; margin-block: -9px; } /* an inline-flex link: the margin keeps its line height */
}
@media (max-width: 429px) {
  .brand-word, .brand .led { display: none; } /* mark only, as in his D pick */
  .brand { gap: 0; justify-content: center; }
}
@media (max-width: 359px) {
  .stamp, :where(.page) p.stamp { letter-spacing: .16em; white-space: nowrap; } /* 'Last updated 12 November 2026' on one line */
  .dock-mark { display: none; } /* the label 'Email yourself the link' needs the room at 320 */
  .dock { padding-left: 6px; gap: 0; }
  /* the phone Email key: 'Email yourself the link' must fit a 244px plan card and a 288px column, even in a wider fallback font */
  :is(.pc-only, .plan-send) .btn-send, .ph-pc .ph-cta .btn-lit { min-width: 0; padding: 0 14px; gap: 8px; font-size: 12px; letter-spacing: .1em; white-space: normal; text-align: center; line-height: 1.25; }
  .nav a { padding: 0 6px; letter-spacing: .08em; }
}
/* phones (and landscape phones): the smaller gauge */
@media (max-width: 680px), (max-height: 500px) and (max-width: 940px) {
  .ph-pricing .ph-sig { --s: 124px; }
  .ph-pricing .ph-clip::before {
    background:
      radial-gradient(circle 14px at calc(50% - 55px) calc(100% - 7px), rgba(79, 190, 139, .3), rgba(79, 190, 139, 0)),
      radial-gradient(circle 250px at 50% calc(100% - var(--mc)),
        rgba(242, 240, 235, .12), rgba(242, 240, 235, .085) 14%, rgba(242, 240, 235, .055) 30%, rgba(242, 240, 235, .03) 48%,
        rgba(242, 240, 235, .014) 66%, rgba(242, 240, 235, .005) 84%, rgba(242, 240, 235, 0));
  }
}
/* landscape phones: a lower sky */
@media (max-height: 500px) and (max-width: 940px) {
  .bar { position: relative; } /* a sideways phone has no height to spare for a sticky bar */
  .ph-sky { height: 110px; }
  .ph-pricing .ph-sky { height: 124px; }
  .ph-dl .ph-sky { --mc: 54px; }
}

/* the dock also steps aside while the page's own Send key is on screen (an extra over the sticky run) */
@supports (timeline-scope: --cta) {
  @media (prefers-reduced-motion: no-preference) and (max-width: 680px) {
    .has-cta body { timeline-scope: --cta; }
    :is(.pc-only, .plan-send) .btn-send { view-timeline: --cta block; view-timeline-inset: 0px; }
    .has-cta .dock { animation: dock-yield linear both; animation-timeline: --cta; animation-range: cover 0% cover 100%; }
  }
}
@keyframes dock-yield {
  0%, 100% { opacity: 1; translate: 0 0; visibility: visible; }
  5%, 95% { opacity: 0; translate: 0 18px; visibility: hidden; }
}

/* ---------- reduced motion: everything still, final state shown ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- the Get-it-on-your-PC page: no Download in its header either (Macs, iPads and phones land here) ---------- */
.pg-pc .bar .btn-key { display: none; }

/* ---------- landscape phones: a phone turned sideways is wider than 680px but is still a phone.
   Same split as upright: no Download anywhere, Email yourself the link as the lit key. Layout stays the wide one. ---------- */
@media (min-width: 681px) and (max-width: 940px) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
  .bar .btn-key, main a[href="/download/latest"] { display: none; }
  .plan-send { display: block; align-self: stretch; margin-top: auto; }
  .ph-dl .ph-cta, .ph-dl .under { display: none; }
  :is(.pc-only, .plan-send) .btn-send {
    width: 100%; max-width: 340px; min-height: 54px; padding: 0 24px 0 28px; gap: 12px;
    font-size: 13px; letter-spacing: .18em;
    color: #0c0c0d;
    background: linear-gradient(180deg, #f8f7f3, #dcd9d1);
    box-shadow:
      inset 0 1px 0 #fff,
      inset 0 -2px 0 rgba(0, 0, 0, .16),
      0 0 0 1px rgba(242, 240, 235, .22),
      0 12px 28px -14px rgba(242, 240, 235, .5),
      0 0 46px -12px rgba(242, 240, 235, .32);
  }
  /* Download head: the note on one line, the key on the first screen */
  .ph-dl .pc-only { max-width: 600px; margin-top: 16px; margin-bottom: 14px; gap: 10px; }
  .ph-dl .ph-sky { height: 92px; }
  /* Get-it-on-your-PC: this page exists for its key, so the key sits on the first screen */
  .ph-pc .ph-sky { height: 84px; }
  .ph-pc .kicker { margin-top: 16px; }
  .ph-pc .sub { max-width: 680px; }
  .ph-pc .ph-cta { margin-top: 20px; }
}

/* the Home close's Email key: landscape phones only (upright, the dock rests there; desktop keeps Download) */
@media (max-width: 680px) { .close .close-send { display: none; } }