/* luniteapp.com v2 / Home only (loaded after site.css).
   The moon rises over one lit horizon, then breathes; now and then a glint runs round its nodes.
   Under it: three promises, the steps as one quiet path, a sliver of the app (and a closed demo report),
   a rule of facts, the price, and the moon again, small, setting into its horizon. */

:root {
  --moon: 176px;   /* the rising mark, its lit disc included */
  --lift: 14px;    /* how far it sits above the horizon when risen */
  --breath-at: 3s; /* breathing starts the moment the rise ends */
}

/* On Home the hero moon carries the shared name (once it has risen), so the header mark gives it up here. */
.brand img { view-transition-name: none; }

/* the bar is clear over the sky at the top and frosts within the first 120px of scroll (an extra) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 681px) {
    .home .bar { animation: bar-frost linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
    .home .bar::after { animation: fade-in linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
  }
}
@keyframes bar-frost {
  from { background-color: rgba(12, 12, 13, 0); -webkit-backdrop-filter: blur(0) saturate(100%); backdrop-filter: blur(0) saturate(100%); }
}

/* ---------- hero: moonrise ---------- */
.hero {
  position: relative;
  overflow-x: clip;
  display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100svh - var(--bar-h));
  padding: clamp(10px, 3vh, 40px) 0 clamp(40px, 7vh, 72px);
  text-align: center;
}

.sky { position: relative; flex: none; height: calc(var(--moon) + var(--lift) + 56px); }

/* the sky's light, cut flat at the horizon (a bright close glow, then a long smooth moonlit tail);
   a soft top mask takes it to zero before the header so the sticky bar never cuts it flat */
.halo {
  position: absolute; left: 50%; bottom: 0;
  width: 820px; height: calc(var(--moon) + var(--lift) + 72px);
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  pointer-events: none;
  --mc: calc(var(--moon) / 2 + var(--lift));
  background:
    radial-gradient(circle 82px at 50% calc(100% - var(--mc)),
      rgba(242, 240, 235, .16), rgba(242, 240, 235, .085) 40%, rgba(242, 240, 235, .03) 75%, rgba(242, 240, 235, 0) 100%),
    radial-gradient(circle 400px at 50% calc(100% - var(--mc)),
      rgba(242, 240, 235, .10), rgba(242, 240, 235, .088) 10%, rgba(242, 240, 235, .071) 20%, rgba(242, 240, 235, .054) 30%,
      rgba(242, 240, 235, .039) 40%, rgba(242, 240, 235, .027) 50%, rgba(242, 240, 235, .018) 60%, rgba(242, 240, 235, .011) 70%,
      rgba(242, 240, 235, .006) 80%, rgba(242, 240, 235, .003) 88%, rgba(242, 240, 235, .001) 95%, rgba(242, 240, 235, 0) 100%);
  -webkit-mask-image: linear-gradient(to top, #000 0, #000 58%, rgba(0, 0, 0, .86) 66%, rgba(0, 0, 0, .64) 74%, rgba(0, 0, 0, .4) 82%, rgba(0, 0, 0, .18) 90%, rgba(0, 0, 0, .05) 96%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0, #000 58%, rgba(0, 0, 0, .86) 66%, rgba(0, 0, 0, .64) 74%, rgba(0, 0, 0, .4) 82%, rgba(0, 0, 0, .18) 90%, rgba(0, 0, 0, .05) 96%, transparent 100%);
}
.halo::after { /* the breath in the sky: a close light that swells with the moon */
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(circle 150px at 50% calc(100% - var(--mc)),
    rgba(242, 240, 235, .085), rgba(242, 240, 235, .05) 35%, rgba(242, 240, 235, .02) 65%, rgba(242, 240, 235, 0));
}
/* faint light falling on the ground, just under the horizon */
.ground {
  position: absolute; left: 50%; top: 100%;
  width: 700px; height: 110px; transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(50% 100% at 50% 0%,
    rgba(242, 240, 235, .04), rgba(242, 240, 235, .022) 35%, rgba(242, 240, 235, .008) 70%, rgba(242, 240, 235, 0));
}
/* zero-mean grain (overlay keeps the average brightness): dithers the glow, invisible as texture */
.grain {
  position: absolute; left: 0; top: -60px;
  width: 100%; height: calc(100% + 180px);
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: .4;
}
/* the stars themselves (.stars) live in site.css: the 404's sky shares them */

.moon-clip { position: absolute; inset: 0; overflow: hidden; }
.moon {
  position: absolute; left: 50%; bottom: var(--lift);
  width: var(--moon); height: var(--moon);
  margin-left: calc(var(--moon) / -2);
}
.moon-sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.moon-sky .ticks { stroke-opacity: .3; }
.moon-sky .swell { opacity: 0; }
/* the mark sits where the unit cell sat inside the old 160-unit view: 30 units in, 100 units wide */
.moon-mark {
  position: absolute; left: 18.75%; top: 18.75%;
  width: 62.5%; height: 62.5%;
  overflow: visible;
  view-transition-name: none;
  filter: drop-shadow(0 0 3px rgba(242, 240, 235, .5)) drop-shadow(0 0 18px rgba(242, 240, 235, .2));
}
.moon-mark .gl { opacity: 0; transform-box: fill-box; transform-origin: center; }

/* the horizon: one bone line, lit where the moon sits */
.horizon {
  position: relative; flex: none; height: 1px; width: 100%;
  background: linear-gradient(90deg,
    rgba(74, 74, 79, 0) 3%, rgba(74, 74, 79, .9) 20%, rgba(110, 110, 115, .9) 38%,
    #d9d6cf 50%,
    rgba(110, 110, 115, .9) 62%, rgba(74, 74, 79, .9) 80%, rgba(74, 74, 79, 0) 97%);
}
.horizon::before, .horizon::after { /* the glint on the line, and its breath */
  content: ""; position: absolute; left: 0; right: 0; margin: 0 auto; pointer-events: none;
}
.horizon::before {
  top: -6px; width: 440px; max-width: 100%; height: 13px;
  background: radial-gradient(closest-side, rgba(242, 240, 235, .32), rgba(242, 240, 235, .07) 55%, rgba(242, 240, 235, 0));
}
.horizon::after {
  top: -4px; width: 220px; height: 9px; opacity: 0;
  background: radial-gradient(closest-side, rgba(242, 240, 235, .5), rgba(242, 240, 235, .1) 60%, rgba(242, 240, 235, 0));
}
/* an instrument scale under the line, centred on the moon */
.scale {
  position: absolute; left: 50%; top: 1px;
  width: 577px; height: 11px; transform: translateX(-50%);
  background:
    linear-gradient(rgba(242, 240, 235, .75), rgba(242, 240, 235, .75)) 50% 0 / 1px 11px no-repeat,
    repeating-linear-gradient(90deg, rgba(110, 110, 115, .85) 0 1px, transparent 1px 96px) 0 0 / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, rgba(74, 74, 79, .9) 0 1px, transparent 1px 24px) 0 0 / 100% 4px no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}

.hero-copy { position: relative; }
.plate {
  margin-top: 30px;
  font: 600 var(--t-hud-s)/1 var(--hud); letter-spacing: .62em; text-transform: uppercase;
  color: var(--muted);
  padding-left: .62em; /* balances the trailing tracking */
}
.hero h1 {
  margin: 20px auto 0; max-width: 13.6em;
  font: 350 var(--t-hero)/1.06 var(--display);
  letter-spacing: -.012em;
  color: var(--bright);
  text-wrap: balance;
}
.sub {
  margin: 20px auto 0; max-width: 33em;
  font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6;
  color: var(--body);
  text-wrap: pretty;
}
.cta {
  margin-top: 30px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 26px;
}
.quiet {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 6px;
  color: var(--muted); text-decoration: none;
  font: 600 var(--t-hud)/1 var(--hud); letter-spacing: .18em; text-transform: uppercase;
  transition: color .3s var(--ease), text-shadow .4s var(--ease);
}
.quiet .ic { width: 14px; height: 14px; transition: translate .5s var(--ease); }
@media (hover: hover) {
  .quiet:is(:hover, :focus-visible) { color: var(--bright); text-shadow: 0 0 14px rgba(242, 240, 235, .45); }
  .quiet:is(:hover, :focus-visible) .ic { translate: 0 3px; }
}
.quiet:active { color: var(--text); }

/* the first-run pointer (desktop and mouse screens): one quiet line under the key, an amber LED before it */
.first-run { margin-top: 10px; display: flex; justify-content: center; }
main .first-run a:not(.btn) {
  display: inline-flex; align-items: center; gap: 11px; min-height: 32px;
  font-size: 13.5px; line-height: 1.4; color: var(--muted);
  text-decoration-color: rgba(110, 110, 115, .55); text-underline-offset: 5px;
}
@media (max-width: 680px) { .first-run { display: none; } } /* hidden on phones only: a touch-screen Windows PC still needs it */
.first-run a::before {
  content: ""; flex: none; width: 5px; height: 5px; 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);
}

.micro {
  margin-top: 12px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 6px;
  font: 600 11.5px/1.4 var(--hud); letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
}
.micro li { display: inline-flex; align-items: center; }
.micro li + li::before {
  content: ""; width: 3px; height: 3px; margin: 0 14px; border-radius: 50%;
  background: var(--edge);
}

/* short desktop screens: a 1366x768 laptop shows only about 610-657px of page, so the moon steps down
   and the key (and the FREE · SIGNED row) stay on the first screen */
@media (min-width: 761px) and (max-height: 740px) {
  :root { --moon: 132px; --lift: 10px; }
  .sky { height: calc(var(--moon) + var(--lift) + 28px); }
  .hero { padding-top: 8px; padding-bottom: 32px; }
  .plate { margin-top: 22px; }
  .hero h1 { margin-top: 14px; }
  .cta { margin-top: 24px; }
}

/* ---------- hero motion: a slow rise, then a calm breath; now and then a glint runs round the nodes ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* in-out, not expo-out: the moon eases off the horizon, climbs, and settles (a rise, not a snap) */
  .moon {
    --swell: 1.028;
    animation: rise 2.8s var(--ease-io) .2s both,
               breathe var(--breath) ease-in-out var(--breath-at) infinite;
  }
  /* only a risen moon travels: it takes the shared name once the rise is done */
  .moon-mark { animation: take-name 1ms linear 3.1s both; }
  .moon-sky .swell, .halo::after, .horizon::after {
    --lo: 0;
    animation: glow-breathe var(--breath) ease-in-out var(--breath-at) infinite both;
  }
  .halo { animation: halo-in 3.2s var(--ease-io) .5s both; }
  .horizon::before { animation: fade-in 2.6s var(--ease) 1.1s both; }
  .moon-mark .n { animation: node-lit 1s var(--ease) both; }
  .moon-mark .n1 { animation-delay: 1.3s; }
  .moon-mark .n2 { animation-delay: 1.42s; }
  .moon-mark .n3 { animation-delay: 1.54s; }
  .moon-mark .n4 { animation-delay: 1.66s; }
  .moon-mark .n5 { animation-delay: 1.78s; }
  .moon-mark .n6 { animation-delay: 1.9s; }
  .moon-mark .n7 { animation-delay: 2.15s; }
  /* one chase every three breaths, timed to a breath's peak */
  .moon-mark .gl { animation: glint 19.2s cubic-bezier(.3, .7, .4, 1) infinite; }
  .moon-mark .gl1 { animation-delay: 5.4s; }
  .moon-mark .gl2 { animation-delay: 5.54s; }
  .moon-mark .gl3 { animation-delay: 5.68s; }
  .moon-mark .gl4 { animation-delay: 5.82s; }
  .moon-mark .gl5 { animation-delay: 5.96s; }
  .moon-mark .gl6 { animation-delay: 6.1s; }
  .moon-mark .gl7 { animation-delay: 6.38s; }
  .hero-copy > * { animation: copy-in 1.2s var(--ease) both; }
  .hero-copy > :nth-child(1) { animation-delay: .9s; }   /* plate */
  .hero-copy > :nth-child(2) { animation-delay: .25s; }  /* H1 */
  .hero-copy > :nth-child(3) { animation-delay: .35s; }  /* sub */
  .hero-copy > :nth-child(4) { animation-delay: .45s; }  /* key */
  .hero-copy > :nth-child(5) { animation-delay: .55s; }  /* first-run */
  .hero-copy > :nth-child(6) { animation-delay: .55s; }  /* phone: Windows note + Send */
  .hero-copy > :nth-child(7) { animation-delay: .62s; }  /* micro */

  /* the small moon at the close breathes with the big one, half under its horizon */
  .dusk img { --swell: 1.06; animation: breathe var(--breath) ease-in-out var(--breath-at) infinite; }
  .dusk::before { --lo: .25; animation: glow-breathe var(--breath) ease-in-out var(--breath-at) infinite both; }
}
@keyframes rise { from { translate: 0 calc(100% + var(--lift) + 10px); } }
@keyframes take-name { from { view-transition-name: none; } to { view-transition-name: moon; } }
@keyframes halo-in { from { opacity: 0; transform: translateX(-50%) scale(.82); } }
@keyframes node-lit { from { opacity: .3; } }
@keyframes glint {
  0% { opacity: 0; scale: .3; rotate: -25deg; }
  1.6% { opacity: .95; scale: 1; rotate: 0deg; }
  5% { opacity: 0; scale: .65; rotate: 30deg; }
  100% { opacity: 0; scale: .65; rotate: 30deg; }
}

/* ---------- three promises ---------- */
.how { padding: clamp(72px, 9vw, 128px) 0 clamp(16px, 2vw, 28px); }
.narrow { max-width: 920px; }
.how .label { margin-bottom: 0; }
.promises { margin-top: 24px; }
.promises li {
  position: relative;
  display: grid;
  grid-template-columns: 19px minmax(0, 15rem) minmax(0, 1fr);
  column-gap: 22px;
  align-items: baseline;
  padding: 30px 0;
  view-timeline: --row block;
}
.promises li::before { /* hairline between rows */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(43, 43, 48, 1), rgba(43, 43, 48, .5) 70%, rgba(43, 43, 48, 0));
}
.promises .lamp { align-self: start; margin-top: 5px; }
.promises li:first-child::before { display: none; }
.promises li:first-child { padding-top: 6px; }
.promises h3 {
  font: 350 var(--t-h3)/1.3 var(--display); letter-spacing: .005em;
  color: var(--text);
}
.promises p { font-size: var(--t-body); line-height: 1.6; color: var(--body); max-width: 32em; text-wrap: pretty; }
.promises .note {
  grid-column: 3;
  margin-top: 12px; padding-left: 14px;
  font-size: 14px; line-height: 1.55; color: var(--muted);
  border-left: 1px solid var(--track);
}

/* ---------- the steps: one quiet path in the steps' trace language (nodes light in order as it arrives) ---------- */
.path {
  position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px;
  margin-top: 6px; padding: 32px 0 0 5px;
  view-timeline: --path block;
}
.path::before { /* the same hairline as the promise rows */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(43, 43, 48, 1), rgba(43, 43, 48, .5) 70%, rgba(43, 43, 48, 0));
}
.path li {
  position: relative; padding-top: 24px;
  text-wrap: balance;
  font: 600 11.5px/1.55 var(--hud); letter-spacing: .16em; text-transform: uppercase;
  color: var(--body);
}
.path li::before { /* the node: a small bezel ring, lit bone */
  content: ""; position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50%;
  background: #08080a;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .9), 0 0 0 1px rgba(242, 240, 235, .6), 0 0 10px -1px rgba(242, 240, 235, .4);
}
.path li:not(:last-child)::after { /* the trace to the next node */
  content: ""; position: absolute; top: 4px; left: 17px; right: -16px; height: 1px;
  background:
    linear-gradient(90deg, rgba(242, 240, 235, .6), rgba(242, 240, 235, .3)) 0 0 / 100% 100% no-repeat,
    rgba(74, 74, 79, .9);
}
.path .ui { font: inherit; letter-spacing: inherit; color: var(--text); }

/* ---------- a glimpse ---------- */
.glimpse { padding: clamp(40px, 5vw, 64px) 0 clamp(56px, 8vw, 110px); text-align: center; }
.glimpse-line {
  max-width: 34em; margin-inline: auto;
  font-size: 17px; line-height: 1.6; color: var(--body);
  text-wrap: balance;
}
.glimpse-line strong { font: 600 1.06em/1 var(--hud); letter-spacing: .02em; color: var(--bright); }

.sliver { max-width: 624px; margin: 46px auto 0; view-timeline: --sliver block; }
.frame { position: relative; padding: 12px; }
.frame::before { /* HUD corner brackets */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  --c: rgba(110, 110, 115, .75); --l: 14px;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 0 / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / 1px var(--l) no-repeat;
}
.slot {
  position: relative; overflow: hidden;
  aspect-ratio: 600 / 120;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 88%, transparent), linear-gradient(transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 88%, transparent), linear-gradient(transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}
/* crop of home.png: x 220-720, y 126-226 (1.2x at 600 wide): the USB and Ethernet traces and the I/O ports.
   v2.2: re-aimed off the DisplayPort and memory lamps, which the demo seed drew in colours the real engine can't produce.
   Pixels untouched; framed, cropped and dimmed only. */
.slot img {
  position: absolute; max-width: none;
  width: 248%; height: auto;
  left: -44%; top: -126%;
  opacity: .7;
  transition: opacity .6s var(--ease);
}
@media (hover: hover) { .sliver:hover .slot img { opacity: .8; } }
/* a scan line that reads across the board as you scroll past (an extra; hidden where unsupported) */
.slot::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px;
  opacity: 0; pointer-events: none;
  background: linear-gradient(rgba(242, 240, 235, 0), rgba(242, 240, 235, .85) 22%, rgba(242, 240, 235, .85) 78%, rgba(242, 240, 235, 0));
  box-shadow: 0 0 16px 3px rgba(242, 240, 235, .22);
}
:is(.sliver, .peek-fig) figcaption {
  margin: 16px auto 0; max-width: 46em;
  font: 600 var(--t-hud-s)/1.7 var(--hud); letter-spacing: .24em; text-transform: uppercase;
  color: var(--muted);
  text-wrap: balance;
}

/* the closed demo report: a small pill that opens to one framed screenshot (the first impression stays minimal) */
.peek { margin-top: 30px; }
.peek > summary {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 0 20px 0 14px; border-radius: 999px;
  list-style: none; cursor: pointer;
  font: 600 11.5px/1 var(--hud); letter-spacing: .2em; text-transform: uppercase;
  color: var(--text);
  background: rgba(21, 21, 23, .6);
  box-shadow: inset 0 0 0 1px rgba(110, 110, 115, .45), inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: color .3s var(--ease), box-shadow .45s var(--ease), background-color .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.peek > summary::-webkit-details-marker { display: none; }
.peek > summary:focus-visible { outline-offset: 4px; border-radius: 999px; }
@media (hover: hover) {
  .peek > summary:is(:hover, :focus-visible) {
    color: var(--bright); background-color: var(--card-hover);
    box-shadow: inset 0 0 0 1px rgba(242, 240, 235, .45), inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 26px -8px rgba(242, 240, 235, .3);
  }
}
.peek > summary:active { color: var(--bright); background-color: var(--card-hover); }
.peek[open] > summary { color: var(--bright); }
.peek[open] > summary .dt-lamp::after { opacity: 1; scale: 1; }
.peek-fig { max-width: 624px; margin: 22px auto 0; }
/* the report's gauge and use bars only, near 1:1. crop x 400-1040, y 0-310 of report.png (pixels untouched) */
.peek-slot { position: relative; overflow: hidden; aspect-ratio: 640 / 310; }
.peek-slot img { position: absolute; max-width: none; width: 193.75%; height: auto; left: -62.5%; top: 0; opacity: .9; }
@media (prefers-reduced-motion: no-preference) {
  .peek[open] > .peek-fig { animation: body-in .55s var(--ease) both; }
}

/* ---------- trust: a thin rule of facts (the shared .facts component, centred; its LEDs light as it scrolls in) ---------- */
.trust { padding: clamp(40px, 5vw, 64px) 0 0; }
.facts { justify-content: center; column-gap: 24px; } /* five facts on one line at 1280+ */
main .facts a:not(.btn) {
  color: inherit; text-decoration: underline; text-decoration-color: rgba(110, 110, 115, .7);
  text-underline-offset: 5px; text-decoration-thickness: 1px;
  transition: color .3s var(--ease), text-decoration-color .3s var(--ease), text-shadow .4s var(--ease);
}
@media (hover: hover) {
  main .facts a:not(.btn):is(:hover, :focus-visible) { color: var(--bright); text-decoration-color: var(--bright); text-shadow: 0 0 14px rgba(242, 240, 235, .45); }
}

/* ---------- price ---------- */
.price { padding-top: clamp(20px, 2.5vw, 32px); text-align: center; }
.price p { max-width: 42em; margin-inline: auto; font-size: 16px; line-height: 1.7; color: var(--body); text-wrap: balance; }
.price strong { font: 600 1.05em/1 var(--hud); letter-spacing: .02em; color: var(--bright); }
main .price a:not(.btn) {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 6px;
  color: var(--text);
  text-underline-offset: 5px;
  white-space: nowrap;
}
.price a .ic { width: 14px; height: 14px; transition: translate .5s var(--ease); }
@media (hover: hover) { .price a:is(:hover, :focus-visible) .ic { translate: 3px 0; } }

/* ---------- close: the moon again, small, setting: its top shows above the line, so the page ends with a set ---------- */
.close { padding: clamp(110px, 15vw, 200px) 0 clamp(90px, 12vw, 150px); text-align: center; }
.dusk {
  position: relative; width: 240px; max-width: 100%; margin: 0 auto; padding-top: 30px;
  clip-path: inset(-80px -80px 0 -80px);
}
.dusk::before { /* its own little moonlight, cut at its horizon */
  content: ""; position: absolute; left: 0; right: 0; top: -40px; bottom: 1px; pointer-events: none; opacity: .25;
  background: radial-gradient(circle 80px at 50% 100%, rgba(242, 240, 235, .12), rgba(242, 240, 235, .04) 50%, rgba(242, 240, 235, 0));
}
.dusk img {
  position: relative;
  width: 34px; height: 34px; margin: 0 auto;
  translate: 0 45%;
  filter: drop-shadow(0 0 3px rgba(242, 240, 235, .45)) drop-shadow(0 0 14px rgba(242, 240, 235, .2));
}
.dusk::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(110, 110, 115, 0), rgba(217, 214, 207, .8) 50%, rgba(110, 110, 115, 0));
}
.close h2 {
  margin-top: 34px;
  font: 350 var(--t-h2)/1.12 var(--display); letter-spacing: -.008em;
  color: var(--bright);
  text-wrap: balance;
}
.close .btn { margin-top: 32px; }

/* ---------- scroll-driven extras (never hide content) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* each lamp sits dark until its row comes up, then switches on with one flare */
    .promises .lamp::after {
      animation: lamp-on linear both;
      animation-timeline: --row;
      animation-range: entry 40% cover 38%;
    }
    /* the path powers up in order: node, trace, node... */
    .path li::before { animation: path-node linear both; animation-timeline: --path; }
    .path li:not(:last-child)::after { animation: trace-fill linear both; animation-timeline: --path; }
    .path li:nth-child(1)::before { animation-range: entry 30% entry 55%; }
    .path li:nth-child(1)::after { animation-range: entry 50% entry 70%; }
    .path li:nth-child(2)::before { animation-range: entry 62% entry 80%; }
    .path li:nth-child(2)::after { animation-range: entry 75% entry 92%; }
    .path li:nth-child(3)::before { animation-range: entry 85% cover 55%; }
    .path li:nth-child(3)::after { animation-range: entry 95% cover 58%; }
    .path li:nth-child(4)::before { animation-range: cover 52% cover 62%; }
    /* the scan line crosses the board while the sliver passes */
    .slot::after {
      animation: scan linear both;
      animation-timeline: --sliver;
      animation-range: cover 22% cover 70%;
    }
  }
}
@keyframes scan {
  0% { left: 3%; opacity: 0; }
  12%, 86% { opacity: .9; }
  100% { left: 92%; opacity: 0; }
}
@keyframes path-node {
  0%, 30% { box-shadow: inset 0 1px 1px rgba(0, 0, 0, .9), 0 0 0 1px rgba(110, 110, 115, .5), 0 0 0 -1px rgba(242, 240, 235, 0); }
  60% { box-shadow: inset 0 1px 1px rgba(0, 0, 0, .9), 0 0 0 1px rgba(242, 240, 235, .95), 0 0 16px 2px rgba(242, 240, 235, .5); }
}
/* pip-on, lamp-on, trace-fill live in site.css */

/* ---------- smaller screens ---------- */
@media (max-width: 760px) {
  :root { --moon: 148px; --lift: 12px; }
  .sky { height: calc(var(--moon) + var(--lift) + 40px); }
  .plate { margin-top: 26px; }
  .promises li { grid-template-columns: 19px minmax(0, 1fr); column-gap: 16px; row-gap: 8px; padding: 26px 0; }
  .promises h3 { grid-column: 2; }
  .promises p { grid-column: 2; }
  .promises .note { grid-column: 2; }
  .promises .lamp { margin-top: 4px; }
  /* the path stands up: nodes on the left, a vertical trace, labels beside them */
  .path { grid-template-columns: minmax(0, 1fr); row-gap: 20px; padding: 28px 0 0 5px; }
  .path li { padding: 0 0 0 30px; }
  .path li::before { top: 4px; }
  .path li:not(:last-child)::after { top: 19px; bottom: -15px; left: 4px; right: auto; width: 1px; height: auto;
    background: linear-gradient(180deg, rgba(242, 240, 235, .6), rgba(242, 240, 235, .3)) 0 0 / 100% 100% no-repeat, rgba(74, 74, 79, .9); }
  /* phone sliver: the USB and Ethernet traces, 1:1 so the labels read. crop x 236-560, y 110-230 of home.png */
  .frame { padding: 8px; }
  .slot {
    aspect-ratio: 324 / 120;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(transparent, #000 14%, #000 86%, transparent);
  }
  .slot img { width: 382.716%; left: -72.84%; top: -91.6667%; }
  /* trust: a tidy left-aligned list, centred as a block, inside full-width hairlines */
  .facts { display: grid; justify-content: center; justify-items: start; gap: 12px; }
  main .facts a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; margin-block: -14px; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (max-width: 760px) {
    .path li:nth-child(n)::before { animation-range: entry 20% cover 40%; }
    .path li:nth-child(n)::after { animation-range: entry 20% cover 45%; }
    .path li:nth-child(2)::before { animation-range: cover 30% cover 45%; }
    .path li:nth-child(3)::before { animation-range: cover 38% cover 50%; }
    .path li:nth-child(4)::before { animation-range: cover 46% cover 56%; }
  }
}
@media (max-width: 680px) { /* one 56px header row; the sky grows on tall screens */
  :root { --moon: clamp(140px, 19svh, 184px); }
  .hero { min-height: calc(100svh - var(--bar-h)); }
  .sky { height: calc(var(--moon) + var(--lift) + clamp(28px, 6svh, 64px)); }
  .stars { display: none; }
  .cta .quiet { display: none; }       /* the section is right below */
  /* the phone key: the Windows note and Send it to your PC (lit), then the micro row. A phone can't run Lunite,
     so no Download key here (and How it works is hidden above) */
  .hero-copy { display: flex; flex-direction: column; align-items: center; }
  .hero-copy > .pc-only { order: 1; width: 100%; margin-top: 26px; }
  .hero-copy > .cta { display: none; }
  .hero-copy > .micro { order: 3; margin-top: 18px; font-size: 12px; }
  .cta .btn-lit { width: 100%; max-width: 340px; }
  /* the close: the sticky dock comes to rest under the heading as its key */
  .close { padding: 64px 0 0; }
  .close .btn { display: none; }
  .close + .dock { margin: 30px auto 64px; }
  .path li { font-size: 13px; letter-spacing: .12em; }
  :is(.sliver, .peek-fig) figcaption { font-size: 12px; }
}
@media (max-width: 440px) {
  .micro { letter-spacing: .14em; }
  .micro li + li::before { margin: 0 10px; }
  .facts li { font-size: 11.5px; letter-spacing: .12em; }
}
@media (max-height: 700px) and (max-width: 760px) {
  :root { --moon: 128px; }
  .sky { height: calc(var(--moon) + var(--lift) + 24px); }
  .halo { height: calc(var(--moon) + var(--lift) + 40px); } /* fades out under the header, not behind it */
}
@media (max-height: 500px) {
  :root { --moon: 112px; }
  .stars { display: none; }
}
/* a phone turned sideways: no plate, a lower sky and a tighter stack, so the key is on the first screen
   (the bar stops sticking in site.css) */
@media (max-height: 500px) and (max-width: 940px) {
  :root { --moon: 76px; }
  .plate { display: none; }
  .sky { height: calc(var(--moon) + var(--lift) + 8px); }
  .hero h1 { margin-top: 10px; font-size: 36px; }
  .sub { margin-top: 12px; }
  .cta { margin-top: 16px; }
  .halo { height: calc(var(--moon) + var(--lift) + 40px); }
}

/* the smallest phones: a trust fact may wrap rather than run past the screen in a wider fallback font */
@media (max-width: 359px) { .facts li { white-space: normal; } }

/* landscape phones: the desktop-only first-run line goes, the Windows note + Email key take the Download key's place */
@media (min-width: 681px) and (max-width: 940px) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
  .first-run, .hero-copy > .cta { display: none; }
  /* the H1 already says Windows PC: the key alone, on the first screen */
  .hero-copy > .pc-only { margin-top: 14px; gap: 10px; }
  .hero-copy > .pc-only .pc-note { display: none; }
  .close .close-send { margin: 26px auto 0; }
}