/* ─────────────────────────────────────────────────────────────────────────
   Horologe — landing page

   Six devices and no more: the running clock, the one dark mockup that
   carries it, the four-face grid, the five-bell strip, the specification
   card, and the pair of buttons where the money is. One accent gesture —
   the ink mark on "Materials: none."

   The clock is the argument, so it is never a picture of a clock: it keeps
   real time, and every stroke lands on the dial in paint, not only in a
   transform, so a reader with the sound off still sees the bell.

   Dark is the identity: the warm near-black of a clock case, bronze for
   every hairline, blued steel for the one cold accent. Light is the same
   workshop in daylight: warm plaster, not a cream field and not a blue one.

   Monospace appears in exactly two places — the specification card and the
   price. Everywhere else the page speaks in one sans and one serif.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  /* Dark — the case interior. The page field is lifted so the mockup can be
     unambiguously the darkest thing on it. */
  --bg:        #221A15;
  --bg-2:      #2C231C;
  --bg-3:      #372B22;
  --ink:       #F4EEE1;
  --ink-2:     #BCB2A2;
  --ink-3:     #8E8375;
  --bronze:    #CB9C57;
  --bronze-2:  #E8C289;
  --blued:     #8AA1DC;
  --rule:      rgba(203, 156, 87, .22);
  --rule-2:    rgba(203, 156, 87, .46);
  --shade:     rgba(0, 0, 0, .45);
  --glow:      rgba(0, 0, 0, .68);
  --focus:     #E8C289;
  --on-bronze: #17110A;

  --desk-shadow:
    0 0 0 1px rgba(232, 194, 137, .26),
    0 54px 96px -40px rgba(0, 0, 0, .82),
    0 8px 22px -12px rgba(0, 0, 0, .7);

  --wash-1: rgba(203, 156, 87, .07);
  --wash-2: rgba(96, 122, 190, .06);

  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Mono", "Roboto Mono", Consolas, monospace;

  --t0: .6875rem;
  --t1: .8125rem;
  --t2: .9375rem;
  --t3: 1.0625rem;
  --t4: 1.1875rem;
  --t5: 1.375rem;
  --t6: clamp(1.7rem, 2.9vw, 2.4rem);
  --t7: clamp(2.1rem, 4vw, 3.1rem);
  --t8: clamp(2.5rem, 5.4vw, 4.1rem);

  --wrap: 70rem;
  --col: 37rem;                 /* one column of text — the FAQ page's measure */
  --pad: clamp(1.15rem, 4vw, 2.8rem);
  --dur: .3s;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Light — warm workshop plaster. Blued steel stays the one cold accent. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg:        #E7E1D5;
    --bg-2:      #F2EEE5;
    --bg-3:      #D8D0C0;
    --ink:       #1A1510;
    --ink-2:     #4A4237;
    --ink-3:     #706654;
    --bronze:    #7A4B0D;
    --bronze-2:  #935F13;
    --blued:     #1E3161;
    --rule:      rgba(63, 45, 22, .22);
    --rule-2:    rgba(63, 45, 22, .40);
    --shade:     rgba(48, 34, 16, .14);
    --glow:      rgba(48, 34, 16, .32);
    --focus:     #1E3161;
    --on-bronze: #FFF7EA;
    --desk-shadow:
      0 0 0 1px rgba(0, 0, 0, .55),
      0 64px 104px -44px rgba(20, 34, 68, .58),
      0 8px 24px -12px rgba(20, 34, 68, .34);
    --wash-1: rgba(122, 75, 13, .12);
    --wash-2: rgba(30, 49, 97, .10);
  }
}

/* An explicit override, so either theme can be inspected on any machine.
   Nothing on this page ever sets it — the theme follows the reader alone. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg:        #E7E1D5;
  --bg-2:      #F2EEE5;
  --bg-3:      #D8D0C0;
  --ink:       #1A1510;
  --ink-2:     #4A4237;
  --ink-3:     #706654;
  --bronze:    #7A4B0D;
  --bronze-2:  #935F13;
  --blued:     #1E3161;
  --rule:      rgba(63, 45, 22, .22);
  --rule-2:    rgba(63, 45, 22, .40);
  --shade:     rgba(48, 34, 16, .14);
  --glow:      rgba(48, 34, 16, .32);
  --focus:     #1E3161;
  --on-bronze: #FFF7EA;
  --desk-shadow:
    0 0 0 1px rgba(0, 0, 0, .55),
    0 64px 104px -44px rgba(20, 34, 68, .58),
    0 8px 24px -12px rgba(20, 34, 68, .34);
  --wash-1: rgba(122, 75, 13, .12);
  --wash-2: rgba(30, 49, 97, .10);
}
:root[data-theme="dark"] { color-scheme: dark; }

/* ── Base ─────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t3);
  line-height: 1.58;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(92% 62% at 12% -8%, var(--wash-1) 0%, transparent 66%),
    radial-gradient(84% 58% at 96% 106%, var(--wash-2) 0%, transparent 68%);
}

h1, h2 { font-family: var(--serif); font-weight: 600; margin: 0; }
p { margin: 0 0 1.05em; }
a { color: inherit; }
b, strong { font-weight: 640; }
button, select { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Blocks that only exist on one side of STORE_URL. See store.js. */
.hidden { display: none !important; }

/* ── Nav ──────────────────────────────────────────────────────────────── */

.nav {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 1.35rem var(--pad) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .58rem;
  font-family: var(--serif);
  font-size: var(--t5);
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
}
.appicon {
  display: block;
  width: 30px; height: 30px;
  border-radius: 7px;
  box-shadow: 0 1px 3px var(--shade), 0 0 0 1px rgba(0, 0, 0, .18);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2.4vw, 1.7rem);
  font-size: var(--t2);
}
.nav-links a { text-decoration: none; color: var(--ink-2); }
.nav-links a:hover { color: var(--ink); }
.nav-cta {
  padding: .5em .9em;
  border: 1px solid var(--rule-2);
  border-radius: 3px;
  white-space: nowrap;
}
.nav-cta:hover { border-color: var(--bronze); color: var(--bronze); }

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--t2);
  font-weight: 560;
  letter-spacing: 0;
  line-height: 1;
  padding: .85em 1.35em;
  border-radius: 3px;
  border: 1px solid var(--rule-2);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), transform .12s var(--ease), color var(--dur) var(--ease);
}
.btn:hover { border-color: var(--ink-3); }
.btn:active { transform: translateY(1px); }

/* The purchase leads. Filled brass, an inset light line, a soft drop — and
   it is the most confident object in any row it appears in. */
.btn-buy {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.004em;
  height: 58px;
  padding: 0 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--on-bronze);
  border-color: var(--bronze-2);
  background: linear-gradient(180deg, var(--bronze-2), var(--bronze));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .38) inset,
    0 18px 34px -16px var(--glow),
    0 2px 7px -3px var(--shade);
}
.btn-buy:hover {
  background: linear-gradient(180deg, #F5D8A6, var(--bronze-2));
  border-color: #F5D8A6;
  transform: translateY(-1px);
}
.btn-buy:active { transform: translateY(1px); }
.btn-buy-lg { font-size: 19px; height: 64px; padding: 0 2.2rem; }

/* The audition stands beside it: the same height, one hairline, quieter —
   and still unmistakably a sound control. */
.btn-audition {
  font-size: 17px;
  font-weight: 500;
  height: 58px;
  padding: 0 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: transparent;
  border-color: var(--rule-2);
}
.btn-audition:hover {
  border-color: var(--bronze);
  background: color-mix(in srgb, var(--bronze) 9%, transparent);
}
.ctas-close .btn-audition { height: 64px; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 0 0 3px color-mix(in srgb, var(--bronze) 26%, transparent); }
  50%      { box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 0 0 8px color-mix(in srgb, var(--bronze) 10%, transparent); }
}

/* ── The stroke count — the hour, made visible ─────────────────────────── */

.count {
  display: inline-flex;
  align-items: center;
  gap: .58em;
  min-height: 1.5em;
  font-size: var(--t4);
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.count.live { opacity: 1; }
.count b {
  display: inline-block;
  font-weight: 620;
  opacity: .28;
  color: var(--ink-3);
  transform: scale(1);
  transition: opacity .14s var(--ease), color .14s var(--ease), transform .14s var(--ease);
}
.count b.hit { opacity: 1; color: var(--bronze-2); transform: scale(1.3); }
.count b.hit.settled { transform: scale(1); }

/* ── Hero ─────────────────────────────────────────────────────────────── */

/* Four things and no more: the headline, the lede, the row where the money
   and the sound sit together, and one line of chips. The headline runs the
   full width so it lands as a two-line block; the object sits beside the
   type it captions. */
.hero {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(1.8rem, 3.6vw, 2.9rem) var(--pad) clamp(2.2rem, 4.4vw, 3.4rem);
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  grid-template-areas: "head head" "type stage";
  align-items: start;
  column-gap: clamp(1.8rem, 3.4vw, 2.8rem);
  row-gap: clamp(1.4rem, 2.8vw, 2.2rem);
}

h1 {
  grid-area: head;
  font-size: clamp(52px, 7.2vw, 112px);
  line-height: .92;
  letter-spacing: -.028em;
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}

.hero-type { grid-area: type; min-width: 0; }
.stage { grid-area: stage; }

.lede {
  font-size: var(--t5);
  line-height: 1.42;
  color: var(--ink-2);
  max-width: 26em;
  margin: 0 0 1.6rem;
  letter-spacing: -.004em;
}

/* The purchase leads and the audition stands beside it, same row, same
   height. The page sells the clock; the sound is how you check it. */
.ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .7rem .8rem;
  margin: 0 0 .7rem;
}
.ctas-close { justify-content: center; margin: 1.5rem 0 1.1rem; }

.caption {
  font-size: var(--t2);
  color: var(--ink-3);
  margin: 0 0 1.4rem;
  max-width: 34em;
}

.facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .5rem;
  font-size: var(--t1);
  color: var(--ink-2);
}
.facts li {
  padding: .34em .7em;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg-2);
  white-space: nowrap;
}

/* ── The desk: the one dark object, on our own wallpaper ──────────────────
   A rendered Mac desktop carrying Horologe's real menu bar popover, with the
   live clock behind it. The overlap is the argument — "in front of your
   wallpaper, behind everything you're working in" — demonstrated.
   ───────────────────────────────────────────────────────────────────────── */

.stage { margin: 0; min-width: 0; display: flex; justify-content: center; }

.desk {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 34rem;
  aspect-ratio: 1 / 1.06;
  border-radius: 12px;
  overflow: hidden;
  background: #040308;
  box-shadow: var(--desk-shadow);
}

/* The wallpaper: a struck bell-bronze disc. Hard edges, high chroma, no
   blur anywhere — a composed image in our own material, not a mesh wash. */
.wall {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(158deg, #100C0A 0%, #07050C 54%, #030207 100%);
}
.disc {
  position: absolute;
  display: block;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255, 226, 172, .06) 0 2px,
      rgba(0, 0, 0, .10) 2px 15px),
    repeating-conic-gradient(from 14deg at 50% 50%,
      #F7CC7C 0deg 6deg,
      #8E5312 6deg 17deg,
      #2A1503 17deg 24deg,
      #C08123 24deg 33deg,
      #FFE9B6 33deg 36deg,
      #4A2A08 36deg 45deg);
  box-shadow: inset 0 0 0 2px rgba(255, 224, 168, .22);
}
.disc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 37% 27%, rgba(255, 240, 200, .62) 0%, rgba(255, 240, 200, 0) 26%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 34%, rgba(3, 2, 7, .70) 94%);
}
.disc-a { width: 74cqw; height: 74cqw; left: -28cqw; top: 56cqw; }
.disc-b { width: 46cqw; height: 46cqw; left: 72cqw; top: 66cqw; }

.desk::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 7cqw 2cqw rgba(0, 0, 0, .5);
  z-index: 8;
}

/* Menu bar. The bell in it is the mute, one click away. */
.menubar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 4.6cqw;
  display: flex; align-items: center;
  gap: 2.4cqw;
  padding: 0 2.2cqw;
  font-family: var(--sans);
  font-size: 2.1cqw;
  line-height: 1;
  color: rgba(255, 252, 246, .84);
  background: rgba(10, 7, 5, .5);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  z-index: 6;
}
.menubar .mb-apple { width: 2.5cqw; height: 2.5cqw; flex: none; opacity: .92; }
.menubar .mb-apple svg { width: 100%; height: 100%; fill: currentColor; }
.menubar b { font-weight: 620; }
.menubar .mb-dim { opacity: .6; }
.menubar .mb-right { margin-left: auto; display: flex; align-items: center; gap: 2.1cqw; }
.menubar .mb-glyph { width: 2.5cqw; height: 2.5cqw; display: block; }
.menubar .mb-glyph svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* The same status items the screen grab further down shows, in the same
   order: our bell, Wi-Fi, battery, Control Centre, the clock. */
.menubar .mb-glyph circle { fill: currentColor; stroke: none; }
.menubar .mb-glyph .fill { fill: currentColor; stroke: none; }
.menubar .mb-batt { width: 3.4cqw; }
.menubar .mb-lit { color: #F2CE93; filter: drop-shadow(0 0 .7cqw rgba(242, 206, 147, .6)); }
.menubar .mb-clock { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

.clock-slot { position: absolute; inset: 0; display: grid; place-items: center; }
/* The clock stands to the left of the panel, clear of it. The dial is the
   thing being bought and it now has something to show, so nothing is
   allowed to sit on top of it. */
.desk .clock-slot { transform: translate(-20%, -4%); z-index: 3; }

/* ── Horologe's menu bar panel, drawn as the app draws it ─────────────────
   This is a redraw of the panel in web/popover.webp — which is a screen grab
   of the running binary — and it is held to that photograph group for group
   and row for row: the master panel with the bell, the name and the status
   line; Chime, five; Face, four; When, with the quarters, the hour strike and
   the quiet-hours window; Desktop clock, with its size; Launch at login; and
   the footer, which signs the version the way the app signs it. Same order,
   same switches thrown, same macOS grammar — rounded sub-panels on a vibrant
   ground, controls in the accent colour, secondary type in grey.

   It is drawn instead of pasted for exactly one reason: it answers. Pick a
   bell or a face further down and this panel ticks it, because it is reading
   the same state the dial is. The photograph proves the panel exists; this
   one proves it is wired to the clock.

   Everything is expressed in --pt, one point of the real 316-point panel, so
   the whole thing scales with the desk and keeps the app's own proportions.
   ───────────────────────────────────────────────────────────────────────── */

.pop {
  position: absolute;
  z-index: 7;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--pt));
  padding: calc(12 * var(--pt));
  border-radius: calc(11 * var(--pt));
  background: rgba(238, 238, 240, .93);
  backdrop-filter: blur(22px) saturate(1.7);
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  color: #1D1D1F;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .12),
    inset 0 1px 0 rgba(255, 255, 255, .5),
    -1.5cqw 2.4cqw 7cqw -1.6cqw rgba(0, 0, 0, .78);
  font-family: var(--sans);
  font-size: calc(12 * var(--pt));
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
}
/* Hangs off the bell in the bar, flush under it, the way NSPopover does. */
.pop-hero { --pt: .12975cqw; width: 41cqw; top: 4.6cqw; right: 2.6cqw; }

.pop::before {
  content: "";
  position: absolute; top: calc(-6 * var(--pt)); right: 25.9cqw;
  border-left: calc(7 * var(--pt)) solid transparent;
  border-right: calc(7 * var(--pt)) solid transparent;
  border-bottom: calc(6.4 * var(--pt)) solid rgba(238, 238, 240, .93);
}

/* Section captions: 10 pt, semibold, uppercase, tertiary — Panel(title:). */
.pop-cap {
  margin: calc(3 * var(--pt)) 0 calc(-3 * var(--pt));
  padding-left: calc(4 * var(--pt));
  font-size: calc(10 * var(--pt));
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(60, 60, 67, .45);
}

/* The rounded sub-panel every group sits on. */
.pop-box {
  list-style: none;
  margin: 0;
  padding: calc(9 * var(--pt));
  border-radius: calc(10 * var(--pt));
  background: rgba(0, 0, 0, .055);
  display: flex;
  flex-direction: column;
  gap: calc(7 * var(--pt));
}
.pop-row { display: flex; align-items: center; gap: calc(8 * var(--pt)); min-width: 0; }
.pop-rule { height: 1px; background: rgba(0, 0, 0, .11); }

/* Master */
.pop-master { gap: calc(11 * var(--pt)); }
.pop-bell { width: calc(26 * var(--pt)); height: calc(26 * var(--pt)); flex: none; color: #007AFF; }
.pop-bell svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.pop-id { display: flex; flex-direction: column; gap: calc(1 * var(--pt)); min-width: 0; }
.pop-id b { font-size: calc(13 * var(--pt)); font-weight: 600; }
.pop-sub { font-size: calc(11 * var(--pt)); color: rgba(60, 60, 67, .62); white-space: nowrap; }
.pop-master .sw { margin-left: auto; }

/* Volume: the two speaker glyphs the app puts either side of the slider. */
.pop-vol { gap: calc(9 * var(--pt)); }
.pop-spk {
  flex: none;
  width: calc(7 * var(--pt)); height: calc(9 * var(--pt));
  background: rgba(60, 60, 67, .58);
  clip-path: polygon(0 30%, 40% 30%, 100% 0, 100% 100%, 40% 70%, 0 70%);
}
.pop-spk-3 { width: calc(11 * var(--pt)); }
.pop-vol .sldr { flex: 1 1 auto; }

/* Chime and Face rows: a radio, a label, and — for the chimes — a preview. */
.pop-chimes, .pop-faces { gap: 0; }
.pop-chimes li, .pop-faces li {
  display: flex; align-items: center; gap: calc(8 * var(--pt));
  padding: calc(4 * var(--pt)) 0;
  min-width: 0;
}
.pop-chimes li + li, .pop-faces li + li { border-top: 1px solid rgba(0, 0, 0, .08); }
.rad {
  flex: none;
  width: calc(12 * var(--pt)); height: calc(12 * var(--pt));
  border-radius: 50%;
  box-shadow: inset 0 0 0 calc(1.2 * var(--pt)) rgba(60, 60, 67, .4);
}
.on > .rad {
  background: #007AFF;
  box-shadow: none;
  position: relative;
}
.on > .rad::after {
  content: "";
  position: absolute; left: 26%; top: 22%;
  width: 44%; height: 24%;
  border-left: calc(1.5 * var(--pt)) solid #fff;
  border-bottom: calc(1.5 * var(--pt)) solid #fff;
  transform: rotate(-45deg);
}
.pop-chimes li.on > span, .pop-faces li.on > span { font-weight: 600; }
.pop-play {
  flex: none; margin-left: auto;
  width: calc(20 * var(--pt)); height: calc(20 * var(--pt));
  border-radius: 50%;
  background: rgba(0, 0, 0, .1);
  position: relative;
}
.pop-play::after {
  content: "";
  position: absolute; top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-left: calc(5 * var(--pt)) solid rgba(30, 30, 32, .8);
  border-top: calc(3.2 * var(--pt)) solid transparent;
  border-bottom: calc(3.2 * var(--pt)) solid transparent;
}
/* The face thumbnails the app renders live, in their four materials. */
.fth { flex: none; width: calc(26 * var(--pt)); height: calc(26 * var(--pt)); border-radius: 50%; }
.fth-mantel { background: radial-gradient(circle at 50% 50%, #6B4A12 0 9%, #F3E8CF 11% 40%, #8A6321 43%, #E0BA6E 72%, #7A5518 100%); }
.fth-station { background: radial-gradient(circle at 50% 50%, #C0392B 0 9%, #FBFBFB 11% 56%, #17181A 59%); }
.fth-chronometer { background: radial-gradient(circle at 50% 50%, #79808A 0 9%, #FAFAF7 11% 56%, #A7ADB4 59%, #6E757D 100%); }
.fth-nocturne { background: radial-gradient(circle at 50% 50%, #9FE6C8 0 9%, #14161C 11% 56%, #454C5A 59%); }

/* When: the hour pickers, drawn as macOS draws a small stepper field. */
.pop-hours { gap: calc(6 * var(--pt)); }
.stp {
  flex: 1 1 0; min-width: 0;
  font-size: calc(11 * var(--pt));
  font-weight: 400;
  padding: calc(2 * var(--pt)) calc(5 * var(--pt));
  border-radius: calc(4 * var(--pt));
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
  position: relative;
}
.stp::after {
  content: "";
  position: absolute; top: calc(2 * var(--pt)); right: calc(2 * var(--pt));
  width: calc(9 * var(--pt)); height: calc(12 * var(--pt));
  border-radius: calc(2.5 * var(--pt));
  background: #007AFF;
}

/* Desktop clock */
.pop-size .sldr { flex: 1 1 auto; }
.pop-num { font-variant-numeric: tabular-nums; font-family: var(--mono); }

/* Switches and sliders, in the accent colour, because the app is running. */
.sw {
  flex: none;
  display: inline-block;
  width: calc(26 * var(--pt)); height: calc(15 * var(--pt));
  border-radius: calc(7.5 * var(--pt));
  background: rgba(120, 120, 128, .3);
  position: relative;
}
.sw::after {
  content: ""; position: absolute; top: calc(1.2 * var(--pt)); left: calc(1.2 * var(--pt));
  width: calc(12.6 * var(--pt)); height: calc(12.6 * var(--pt));
  border-radius: 50%; background: #fff;
  box-shadow: 0 calc(.6 * var(--pt)) calc(1.4 * var(--pt)) rgba(0, 0, 0, .3);
}
.sw.on { background: #007AFF; }
.sw.on::after { transform: translateX(calc(11 * var(--pt))); }

.sldr { position: relative; height: calc(3.4 * var(--pt)); border-radius: calc(1.7 * var(--pt)); background: rgba(0, 0, 0, .16); }
.sldr b { position: absolute; inset: 0 30% 0 0; border-radius: calc(1.7 * var(--pt)); background: #007AFF; }
.sldr i {
  position: absolute; top: 50%; left: 70%;
  width: calc(12 * var(--pt)); height: calc(12 * var(--pt));
  margin: calc(-6 * var(--pt)) 0 0 calc(-6 * var(--pt));
  border-radius: 50%; background: #fff;
  box-shadow: 0 calc(.6 * var(--pt)) calc(1.6 * var(--pt)) rgba(0, 0, 0, .35);
}
.sldr-lg b { inset: 0 30% 0 0; }
.sldr-lg i { left: 70%; }

/* Footer: the version, signed the way SettingsView signs it, and Quit. */
.pop-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: calc(2 * var(--pt)) calc(4 * var(--pt)) 0;
}
.pop-ver { font-size: calc(10 * var(--pt)); color: rgba(60, 60, 67, .42); }
.pop-foot span + span { font-size: calc(11 * var(--pt)); color: rgba(60, 60, 67, .62); }

/* ── The choice: four faces, five bells ───────────────────────────────── */

.choose {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(1.4rem, 3vw, 2.4rem) var(--pad) 0;
}

.choose h2 {
  font-size: var(--t6);
  line-height: 1.1;
  letter-spacing: -.024em;
  margin: 0 0 1rem;
  text-wrap: balance;
  max-width: 20em;
}
.choose h2.second { margin-top: clamp(2.4rem, 4.6vw, 3.4rem); }

.faces {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem;
  margin: 0;
}

.face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  padding: 1rem .6rem .9rem;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--bg-2);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* The best thing on the page is what happens when one of these is pressed,
   so the card has to look pressable before it is pressed: it lifts, the
   brass comes up under it, and the swatch grows a shade. */
.face:hover {
  border-color: var(--bronze);
  background: color-mix(in srgb, var(--bronze) 7%, var(--bg-2));
  transform: translateY(-4px);
  box-shadow: 0 16px 26px -18px var(--glow), 0 3px 8px -5px var(--shade);
}
.face:hover .swatch { transform: scale(1.045); }
.face .swatch { transition: transform var(--dur) var(--ease); }
.face:active { transform: translateY(-1px); }
.face[aria-checked="true"] { border-color: var(--bronze); background: color-mix(in srgb, var(--bronze) 10%, var(--bg-2)); }

.face .swatch { display: block; margin-bottom: .6rem; }
.face-name { font-family: var(--serif); font-size: var(--t4); font-weight: 600; }
.face-blurb { font-size: var(--t1); color: var(--ink-3); line-height: 1.36; text-wrap: balance; }

/* The invitation to press. The retint is the best thing on the page and
   nothing else says it is there. */
.invite {
  font-size: var(--t2);
  color: var(--bronze);
  margin: -.4rem 0 1.1rem;
  max-width: 40em;
}
.advice {
  font-size: var(--t2);
  color: var(--ink-2);
  max-width: 40em;
  margin: 1.1rem 0 0;
}
.advice::before {
  content: "";
  display: inline-block;
  width: 1.4rem;
  height: 1px;
  background: var(--rule-2);
  vertical-align: middle;
  margin-right: .6rem;
}

.drawn {
  font-size: var(--t2);
  color: var(--ink-2);
  max-width: 40em;
  margin: 1rem 0 0;
}

/* ── The five bells ───────────────────────────────────────────────────────
   Not a settings table. Five cards, each one a control that is obviously a
   control, each carrying a struck-bell figure that stands still until the
   card rings and then decays across it like the sound does.
   ───────────────────────────────────────────────────────────────────────── */

.bells {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .9rem;
  margin: 0;
}
.bell {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .22rem;
  padding: .95rem .9rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--bg-2);
  color: var(--ink);
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bell:hover {
  border-color: var(--bronze);
  background: color-mix(in srgb, var(--bronze) 7%, var(--bg-2));
  transform: translateY(-4px);
  box-shadow: 0 16px 26px -18px var(--glow), 0 3px 8px -5px var(--shade);
}
.bell:active { transform: translateY(-1px); }
.bell.chosen { border-color: var(--bronze); background: color-mix(in srgb, var(--bronze) 12%, var(--bg-2)); }

/* Five partials, tallest first — the shape of a bell's decay, standing
   still until it is struck. */
.bell-wave {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 26px;
  margin-bottom: .5rem;
}
.bell-wave i {
  width: 3px;
  border-radius: 2px;
  background: var(--rule-2);
  transition: background var(--dur) var(--ease);
}
.bell-wave i:nth-child(1) { height: 100%; }
.bell-wave i:nth-child(2) { height: 74%; }
.bell-wave i:nth-child(3) { height: 52%; }
.bell-wave i:nth-child(4) { height: 34%; }
.bell-wave i:nth-child(5) { height: 20%; }
.bell:hover .bell-wave i,
.bell.chosen .bell-wave i { background: var(--bronze); }
.bell.ringing .bell-wave i {
  background: var(--bronze-2);
  animation: partial 1.5s var(--ease) infinite;
}
.bell.ringing .bell-wave i:nth-child(2) { animation-duration: 1.15s; }
.bell.ringing .bell-wave i:nth-child(3) { animation-duration: .85s; }
.bell.ringing .bell-wave i:nth-child(4) { animation-duration: .62s; }
.bell.ringing .bell-wave i:nth-child(5) { animation-duration: .44s; }
@keyframes partial {
  0%   { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(.18); opacity: .45; }
}

.bell-name { font-family: var(--serif); font-size: var(--t3); font-weight: 600; line-height: 1.2; }
.bell-blurb { font-size: var(--t1); color: var(--ink-3); line-height: 1.35; }
.bell-go {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: auto;
  padding-top: .7rem;
  font-size: var(--t1);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bronze);
}
.bell-go::before {
  content: "";
  width: 0; height: 0;
  border-left: 7px solid currentColor;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  flex: none;
}
.bell.ringing { border-color: var(--bronze-2); background: color-mix(in srgb, var(--bronze) 16%, var(--bg-2)); }
.bell.ringing .bell-go { color: var(--bronze-2); }
.count-bell { font-size: var(--t2); gap: .34em; }

/* ── The close: the object at four, the card, the money ───────────────── */

.close {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(2.4rem, 5vw, 3.6rem) var(--pad) 0;
}

/* Three things stand in a row here and they are three kinds of evidence: the
   clock, running, drawn in your browser; the panel, photographed off the
   running Mac app; and the card, which is only words. Middle column sized to
   the grab so it is never resampled up. */
.close-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) 300px minmax(0, 1.32fr);
  gap: clamp(1.4rem, 3vw, 2.2rem);
  align-items: center;
}
.close-object { text-align: center; min-width: 0; }

/* Grounded, not floating: the object stands on a surface and casts onto it. */
.close-stage {
  position: relative;
  margin: 0 0 1.3rem;
  min-height: clamp(210px, 25vw, 340px);
  display: grid;
  place-items: center;
}
.close-stage::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -.35rem;
  width: min(78%, 20rem); height: 2.4rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow) 0%, transparent 78%);
  opacity: .8;
  pointer-events: none;
}
.close-stage .clock-slot { position: static; display: grid; place-items: center; }

/* ── The proof ────────────────────────────────────────────────────────────
   Everything else on this page is drawn in the browser, which is exactly the
   objection a careful buyer makes: nothing here shows the Mac app. So the
   middle of the row is the one photograph on the site — the whole of the
   app's own menu bar panel, taken off the running binary at two pixels per
   point by tools/popover.sh, hanging from the bar it belongs to, over a
   desktop, ending where it really ends: at its own version line. Nothing is
   masked, faded or cut, because the objection this answers is a crop.
   ───────────────────────────────────────────────────────────────────────── */

.proof { margin: 0; min-width: 0; }
.proof img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 3px;
  filter: drop-shadow(0 14px 26px var(--shade)) drop-shadow(0 2px 5px var(--shade));
}
.proof figcaption {
  margin-top: .5rem;
  font-size: var(--t1);
  color: var(--ink-3);
  text-align: center;
  text-wrap: balance;
}

/* ── The specification card — the one place monospace lives ───────────── */

.card {
  padding: 1.35rem clamp(1.1rem, 2.6vw, 1.7rem) 1.15rem;
  border: 1px solid color-mix(in srgb, var(--bronze) 36%, transparent);
  border-radius: 5px;
  background: var(--bg-2);
  box-shadow: 0 1px 0 var(--shade);
  min-width: 0;
}
.card-head { font-family: var(--serif); font-size: var(--t4); margin: 0 0 .9rem; padding-bottom: .8rem; border-bottom: 1px solid var(--rule-2); }
/* The one gloss on the site: the card names the object, then defines it, the way a
   dictionary would. Said once, here, and nowhere else. */
.card-gloss { display: block; margin-top: .28rem; font-size: var(--t1); font-weight: 400;
              font-style: normal; color: var(--ink-3); letter-spacing: 0; }
.card-gloss i { font-style: italic; }
.card-list { margin: 0; font-family: var(--mono); font-size: var(--t1); line-height: 1.5; }
.card-list > div {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: .25rem 1rem;
  padding: .44rem 0;
  border-bottom: 1px solid var(--rule);
}
.card-list > div:last-child { border-bottom: 0; }
.card-list dt { color: var(--ink-3); margin: 0; }
.card-list dt::after { content: ":"; }
.card-list dd { margin: 0; }
.card-list .inked dt, .card-list .inked dd { font-weight: 600; color: var(--ink); }
.card-list .inked dd { position: relative; display: inline-block; justify-self: start; }

/* The page's one drawn mark, on the joke that earns the conceit. */
.mark {
  position: absolute;
  left: -.55rem; bottom: -.7rem;
  width: calc(100% + 1.9rem); height: 1.05rem;
  fill: none;
  stroke: var(--bronze);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .95;
  vector-effect: non-scaling-stroke;
}

/* ── The money ────────────────────────────────────────────────────────── */

.buy {
  max-width: 40rem;
  margin: clamp(2.6rem, 5vw, 3.8rem) auto 0;
  padding: 0 0 clamp(2.2rem, 4vw, 3rem);
  text-align: center;
}
.close-head {
  font-family: var(--serif);
  font-size: var(--t7);
  letter-spacing: -.026em;
  line-height: 1.06;
  margin: 0 0 .8rem;
  text-wrap: balance;
}
.close-sub {
  font-size: var(--t4);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 26em;
  margin: 0 auto 1.9rem;
  text-wrap: balance;
}
.close-price {
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--ink-3);
  max-width: 34em;
  margin: 1.1rem auto 0;
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.foot {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 1.3rem var(--pad) clamp(2rem, 4vw, 2.8rem);
  border-top: 1px solid var(--rule);
  font-size: var(--t2);
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.6rem;
  justify-content: space-between;
}
.foot p { margin: 0; }
.foot-line { color: var(--ink-2); }
.foot-links a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule); }
.foot-links a:hover { color: var(--bronze); border-bottom-color: var(--bronze); }

/* ── The clock mount ──────────────────────────────────────────────────── */

.clock-mount { line-height: 0; transition: transform var(--dur) var(--ease); transform-origin: center; }
.clock-mount.swap { transform: scale(.92); }
/* The rock is not here. It is drawn into the canvas, because a transform on
   this element moves a picture of the clock around the page and leaves the
   clock's own pixels exactly where they were. This element only holds the
   two halos that have to escape the frame. */
.clock-rock { position: relative; line-height: 0; }
.clock-rock canvas { position: relative; z-index: 1; }

/* The stroke, leaving the case. The dial's own light is painted into the
   canvas; these two are the part that gets out of the frame — a halo on
   the case and one ring going into the room, per blow. */
.clock-bloom,
.clock-ripple {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
}
.clock-bloom {
  width: 132%; height: 132%; margin: -66% 0 0 -66%;
  background: radial-gradient(circle, rgba(232, 194, 137, .5) 34%, rgba(232, 194, 137, 0) 70%);
}
.clock-bloom.go { animation: bloom 1.7s var(--ease) 1; }
@keyframes bloom {
  0%   { opacity: 0;   transform: scale(.84); }
  9%   { opacity: 1; }
  100% { opacity: 0;   transform: scale(1.14); }
}
.clock-ripple {
  width: 88%; height: 88%; margin: -44% 0 0 -44%;
  border: 2px solid rgba(232, 194, 137, .6);
  z-index: 2;
}
.clock-ripple.go { animation: ripple 1.5s cubic-bezier(.16, .72, .3, 1) 1; }
@keyframes ripple {
  0%   { opacity: .95; transform: scale(.95); }
  100% { opacity: 0;   transform: scale(1.55); }
}
#clock { display: block; }

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  /* One column, and the areas restated — the headline still captions the
     object, the object just sits under the type instead of beside it. */
  .hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "type" "stage";
    padding-top: clamp(1.6rem, 5vw, 2.6rem);
  }
  .desk { max-width: 30rem; }
  .lede { font-size: var(--t4); }
  .close-grid { grid-template-columns: minmax(0, 1fr); }
  .close-stage { min-height: 250px; }
  .proof { width: min(100%, 340px); margin-inline: auto; }
  .card { max-width: 36rem; margin-inline: auto; }
  .faces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bells { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  /* "Nobody sent it." has to hold one line, or the two-line block becomes
     four and the caption stops reading as a caption. */
  h1 { font-size: clamp(38px, 11.6vw, 52px); }
  .nav { padding-top: 1rem; gap: .5rem .8rem; }
  .nav-links { font-size: var(--t1); gap: .8rem; }
  .wordmark { font-size: var(--t4); }
  .appicon { width: 26px; height: 26px; }
  /* One column: the purchase first and full width, the audition under it
     at the same size — the order the page argues in. */
  .btn-buy, .btn-audition { width: 100%; }
  .ctas { flex-direction: column; align-items: stretch; gap: .55rem; }
  /* Stacked, the count is a row of its own, so it must not hold a row's
     worth of height while it is empty. */
  .ctas .count { justify-content: center; min-height: 0; }
  .ctas .count.live { min-height: 1.5em; }
  .facts li { white-space: normal; }
  .bells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-list > div { grid-template-columns: 1fr; }
  .card-list dt { font-size: var(--t0); letter-spacing: .06em; text-transform: uppercase; }
  .close-stage { min-height: 200px; }
  .foot { flex-direction: column; }
}

/* ── Reduced motion ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* No rocking, no sweep, no glow, no expanding rings — a static dial, as
     asked. The stroke count stays, because a number counting itself out is
     information rather than motion, and it is how a reader here sees the
     bell land. */
  .face:hover, .bell:hover { transform: none; }
  .btn-audition.ringing, .bell.ringing .bell-wave i { animation: none; }
  .count b.hit { transform: none; }
  .clock-bloom, .clock-ripple { display: none; }
}