/* Just MenuHUD product site.
   Concept: the site is a Mac desktop. A working menu bar (the app's own eight
   indicators, rendered live by site.js) is the chrome; the hero wallpaper is
   the app icon's coral-to-violet gradient; popovers hang from the strip.
   Committed dark theme: the product's iconic state is white glyphs over a
   vivid wallpaper. Voice type is Schibsted Grotesk (self-hosted, one variable
   file); the product chrome inside the menu bar stays system SF + SF Mono,
   because those pieces depict the app itself.
   Motion: hero load choreography + view-timeline reveals, transform/opacity
   only, all off under prefers-reduced-motion. */

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/schibsted-grotesk-latin.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --bg: oklch(17% 0.022 305);
  --bg-deep: oklch(13.5% 0.02 305);
  --ink: oklch(96% 0.006 305);
  --ink-2: oklch(74% 0.022 305);
  --hairline: oklch(100% 0 0 / 0.12);
  --accent: oklch(70% 0.17 30);
  --supporter-accent: oklch(80% 0.08 30);
  --chrome: oklch(14% 0.03 320 / 0.42);
  --chrome-solid: oklch(16% 0.03 320);
  --pop-shadow: 0 2px 8px oklch(5% 0.02 300 / 0.45), 0 24px 70px oklch(5% 0.02 300 / 0.55);
  --font-display: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  --font-chrome: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --mb-h: 36px;
  /* z scale: content < menubar */
  --z-menubar: 10;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.045rem/1.65 var(--font-display);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-top: var(--mb-h);
}

.shell { max-width: 1120px; margin: 0 auto; padding: 0 28px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid oklch(85% 0.1 30); outline-offset: 2px; border-radius: 4px; }
::selection { background: oklch(70% 0.17 30 / 0.35); }

.skip-link {
  position: fixed;
  inset-block-start: 8px;
  inset-inline-start: 12px;
  z-index: calc(var(--z-menubar) + 1);
  padding: 8px 12px;
  border-radius: 8px;
  background: #fff;
  color: #1c1420;
  font: 650 0.9rem/1.2 var(--font-display);
  transform: translateY(calc(-100% - 16px));
}
.skip-link:focus-visible { transform: none; }

h1, h2, h3 { text-wrap: balance; }

/* ---------------------------------------------------------------- menu bar */

.menubar {
  position: fixed;
  inset: 0 0 auto;
  height: var(--mb-h);
  z-index: var(--z-menubar);
  background: var(--chrome);
  -webkit-backdrop-filter: blur(28px) saturate(1.7);
  backdrop-filter: blur(28px) saturate(1.7);
  border-bottom: 1px solid oklch(100% 0 0 / 0.08);
  font-family: var(--font-chrome);
}
@supports not (backdrop-filter: blur(1px)) {
  .menubar { background: var(--chrome-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .menubar { background: var(--chrome-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.mb-inner {
  max-width: 1240px;
  height: 100%;
  margin: 0 auto;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mb-brand {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 2px 6px;
  white-space: nowrap;
  margin-right: auto;
}
.mb-brand:hover { text-decoration: none; }

.mb-cluster { display: flex; align-items: center; height: 100%; }

.mb-ind {
  appearance: none;
  border: 0;
  border-radius: 5px;
  background: transparent;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 24px;
  padding: 0 8px;
  color: var(--ink);
  white-space: nowrap;
}
.mb-ind.hiding { overflow: hidden; }
.mb-figures { display: inline-flex; align-items: center; gap: 3px; }
.mb-ind[aria-pressed="true"] { background: oklch(100% 0 0 / 0.14); }
.mb-ind:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

/* Date Module: the calendar badge plus weekday-and-month text */
.cal-badge {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: #fff;
  border-top: 4.5px solid oklch(62% 0.21 30);
  margin-right: 2px;
}
.cal-badge b { font: 600 9px/11px var(--font-chrome); color: #1c1c21; }
.mb-datetext { font: 500 12.5px/1 var(--font-chrome); }

/* Stacked value rows with a glyph column, as Network and Disk draw them */
.mb-arrows { display: inline-flex; flex-direction: column; align-items: center; }
.mb-arrows i { font: 600 8px/10px var(--font-mono); font-style: normal; opacity: 0.85; }
.mb-rows { display: inline-flex; flex-direction: column; align-items: flex-end; min-width: 52px; }
.mb-rows span {
  font: 600 9px/10px var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* The stacked-letter column, fill bar, and mini graph of the indicator shell */
.mb-letters { display: inline-flex; flex-direction: column; align-items: center; }
.mb-letters i { font: 600 6.5px/6.8px var(--font-chrome); font-style: normal; }
.mb-bar {
  position: relative;
  width: 4px;
  height: 20px;
  border-radius: 1.5px;
  background: oklch(100% 0 0 / 0.18);
  overflow: hidden;
}
.mb-bar i {
  position: absolute;
  inset: auto 0 0;
  height: 20%;
  background: oklch(100% 0 0 / 0.9);
  border-radius: 1.5px;
}
.mb-graph {
  display: inline-flex;
  align-items: flex-end;
  width: 30px;
  height: 20px;
  border-radius: 2px;
  background: oklch(100% 0 0 / 0.18);
  overflow: hidden;
}
.mb-graph i { flex: 1; height: var(--h, 8%); min-height: 1px; background: oklch(100% 0 0 / 0.9); }

.mb-temp { font: 600 11px/1 var(--font-mono); font-variant-numeric: tabular-nums; }

/* Battery: outline body with a charge fill and its terminal nub */
.mb-batt {
  position: relative;
  width: 21px;
  height: 10.5px;
  border: 1px solid oklch(100% 0 0 / 0.6);
  border-radius: 3px;
  margin-right: 2px;
}
.mb-batt::after {
  content: "";
  position: absolute;
  left: calc(100% + 1px);
  top: 2.5px;
  width: 1.5px;
  height: 4px;
  border-radius: 0 1px 1px 0;
  background: oklch(100% 0 0 / 0.6);
}
.mb-batt i {
  position: absolute;
  inset: 1px auto 1px 1px;
  width: 87%;
  max-width: calc(100% - 2px);
  border-radius: 1.5px;
  background: var(--ink);
}
.mb-battpct { font: 500 11px/1 var(--font-chrome); }

.mb-download {
  flex: none;
  background: #fff;
  color: #1c1420;
  font: 600 12px/1 var(--font-chrome);
  border-radius: 6px;
  padding: 6px 11px;
  transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.16s;
}
.mb-download:hover { text-decoration: none; opacity: 0.9; }
.mb-download:active { transform: scale(0.97); }

/* ---------------------------------------------------------------- wallpaper */

.hero {
  position: relative;
  background:
    radial-gradient(110% 80% at 85% -20%, oklch(76% 0.17 50 / 0.8), transparent 55%),
    radial-gradient(90% 90% at 8% 115%, oklch(38% 0.15 295 / 0.95), transparent 62%),
    linear-gradient(148deg,
      oklch(63% 0.215 30) 0%,
      oklch(57% 0.205 10) 30%,
      oklch(49% 0.19 335) 56%,
      oklch(41% 0.165 305) 78%,
      oklch(25% 0.07 300) 100%);
}
.grain { isolation: isolate; }
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
  pointer-events: none;
}
.hero-fade {
  position: absolute;
  inset: auto 0 -1px;
  height: 180px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  gap: 48px;
  align-items: start;
}
.hero-copy { padding: clamp(64px, 11vh, 140px) 0 clamp(96px, 14vh, 170px); }
.hero h1 {
  font-size: clamp(3rem, 6.4vw, 5.4rem);
  font-weight: 760;
  line-height: 0.99;
  letter-spacing: -0.028em;
  margin: 0 0 26px;
  text-shadow: 0 2px 36px oklch(0% 0 0 / 0.22);
}
.hero .sub {
  font-size: clamp(1.15rem, 1.6vw, 1.3rem);
  font-weight: 480;
  line-height: 1.5;
  max-width: 42ch;
  margin: 0 0 36px;
  color: oklch(98% 0.006 40 / 0.97);
  text-shadow: 0 1px 2px oklch(0% 0 0 / 0.2), 0 2px 18px oklch(0% 0 0 / 0.2);
}
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.cta-row.center { justify-content: center; }
.cta-row .meta {
  font: 500 12px/1.4 var(--font-mono);
  letter-spacing: 0.02em;
  color: oklch(98% 0.006 40 / 0.95);
  text-shadow: 0 1px 2px oklch(0% 0 0 / 0.22);
}
.hero-note {
  margin: 44px 0 0;
  font: 500 12.5px/1.6 var(--font-mono);
  color: oklch(98% 0.006 40 / 0.92);
  max-width: 40ch;
  text-shadow: 0 1px 2px oklch(0% 0 0 / 0.22);
}

.button {
  display: inline-block;
  background: #fff;
  color: #241019;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  border-radius: 12px;
  padding: 14px 28px;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease;
}
.button:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 10px 30px oklch(10% 0.05 320 / 0.35);
}
.button:active { transform: translateY(0) scale(0.985); box-shadow: none; }

/* The open popover hangs from the menu bar, arrow first, like NSPopover. */
.hero-pop {
  position: relative;
  justify-self: end;
  z-index: 1;
  min-height: 627px; /* Network: 610px, plus the 9px arrow and 8px padding. */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 17px;
  margin-right: clamp(0px, 3vw, 40px);
}
/* One silhouette and one animated surface: the arrow cannot receive the
   image's shadow or drift away when the popover scales into view. */
.popover-surface {
  position: relative;
  width: min(320px, 82vw);
  filter: drop-shadow(0 2px 4px oklch(5% 0.02 300 / 0.45))
          drop-shadow(0 24px 35px oklch(5% 0.02 300 / 0.55));
}
.pop-arrow {
  position: absolute;
  z-index: 1;
  left: var(--popover-arrow-x, 160px);
  top: -9px;
  transform: translateX(-50%);
  width: 22px;
  height: 10px; /* Overlap the flat top by 1px, including at fractional zoom. */
  background: #fff;
  clip-path: polygon(50% 0, 100% 90%, 100% 100%, 0 100%, 0 90%);
}
.hero-pop .pop-frame { box-shadow: none; }
.pop-frame {
  border-radius: 11px;
  box-shadow: var(--pop-shadow);
}
img.pop-frame { display: block; width: min(320px, 82vw); height: auto; }
img.pop-frame[hidden] { display: none; }

/* ------------------------------------------------------- section headings */

h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 720;
  line-height: 1.06;
  letter-spacing: -0.022em;
  margin: 0 0 18px;
}
.section-sub {
  color: var(--ink-2);
  max-width: 52ch;
  margin: 0 0 56px;
}

/* ---------------------------------------------------------------- overview */

/* One image of the whole product, straight under the hero's call to action.
   Wide and dense on purpose: this one is for taking in at a glance, and the
   Module gallery below it is where a single popover is actually read. */
.overview { padding: clamp(64px, 9vh, 104px) 0 clamp(16px, 3vh, 40px); }

/* Wider than the page's column, capped so it does not sprawl on a very wide
   display. Each popover is a ninth of the image, so every pixel of width the
   image gains is width the popovers gain. */
.overview-stage { padding-inline: 28px; }
.overview-shot {
  display: block;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  height: auto;
  border-radius: clamp(10px, 1.4vw, 18px);
  box-shadow: var(--pop-shadow);
}

/* ---------------------------------------------------------------- gallery */

/* The Modules, one row each: the row chooses which popover the pane shows, and
   the switch beside it adds or removes that Module from the live menu bar at
   the top of the page. Two jobs, two controls — a radio and a switch — rather
   than one control quietly doing both. */
.gallery { padding: clamp(64px, 9vh, 110px) 28px clamp(72px, 10vh, 120px); }

.gallery-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  margin-top: 48px;
}

.mod-list {
  display: grid;
  gap: 2px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.mod {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 14px 16px;
  border-radius: 14px;
  transition: background 0.2s ease;
}
.mod:has([data-pick]:checked) { background: oklch(100% 0 0 / 0.07); }
.mod:has([data-pick]:focus-visible) {
  outline: 2px solid oklch(85% 0.1 30);
  outline-offset: 2px;
}

/* Each control is invisible and stretched over exactly the label it belongs to,
   so the whole row picks the Module and the switch alone toggles it — and
   neither leaves a transparent hit area loose anywhere else on the page. */
.mod-pick,
.mod-switch {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
}
.mod input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.switch {
  position: relative;
  display: block;
  width: 38px;
  height: 22px;
  margin-top: 2px;
  border-radius: 11px;
  background: oklch(100% 0 0 / 0.16);
  transition: background 0.2s ease;
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px oklch(0% 0 0 / 0.4);
  transition: transform 0.22s cubic-bezier(0.2, 1.2, 0.4, 1);
}
.mod input:checked + .switch { background: var(--accent); }
.mod input:checked + .switch::after { transform: translateX(16px); }
.mod input:focus-visible + .switch { outline: 2px solid oklch(85% 0.1 30); outline-offset: 2px; }
.mod.deny .switch { animation: shake 0.32s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-3px); }
}

.mod-text { display: block; font-size: 0.95rem; line-height: 1.55; color: var(--ink-2); }
.mod-text strong {
  display: block;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.mod:has([data-pick]:checked) .mod-text strong { color: var(--accent); }

/* The pane keeps the height of the tallest popover so choosing another Module
   never moves the page under the reader's cursor. Nothing is cropped: a
   popover taller than the pane is scaled down whole, which is the point of
   showing it at all — the CPU Popover used to lose its Core Rings here. */
.gallery-pane {
  position: sticky;
  top: calc(var(--mb-h) + 28px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 560px;
}
/* An explicit display would otherwise outrank the browser's own rule for the
   hidden attribute, and every popover would stand in the pane at once. */
.gallery-shot[hidden] { display: none; }
.gallery-shot {
  display: block;
  width: auto;
  max-width: 100%;
  /* A flex item will not shrink below its own pixel width without this, and
     these renders are 640 wide — wider than a phone. */
  min-width: 0;
  height: auto;
  max-height: 560px;
  object-fit: contain;
  border-radius: 11px;
  box-shadow: var(--pop-shadow);
}

.mod-rule {
  margin: 56px 0 0;
  font: 500 12.5px/1.6 var(--font-mono);
  color: var(--ink-2);
  transition: color 0.3s ease;
}
.mod-rule.flash { color: var(--accent); }

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

/* --------------------------------------------------------- free + Tip Jar */

/* The quietest section on the page, on purpose: MenuHUD is not for sale, so
   the Tip Jar is set as prose and fine print, never as a price card. */
.supporter {
  padding: clamp(88px, 12vh, 140px) 0;
  border-block-start: 1px solid var(--hairline);
}
.supporter-inner { max-width: 760px; }
.supporter .section-sub { margin-bottom: 0; max-width: 54ch; }
.tip-note {
  max-width: 62ch;
  margin: 36px 0 0;
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.7;
  text-wrap: pretty;
}
.tip-fine {
  max-width: 62ch;
  margin: 28px 0 0;
  padding-block-start: 18px;
  border-block-start: 1px solid var(--hairline);
  font: 500 12.5px/1.9 var(--font-mono);
  color: var(--ink-2);
}

/* Shared by the pricing and restore pages. */
.eyebrow {
  margin: 0 0 14px;
  color: var(--supporter-accent);
  font: 650 0.76rem/1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.status-mark {
  width: 10px;
  height: 10px;
  margin-block-start: 5px;
  border-radius: 50%;
  background: var(--supporter-accent);
  box-shadow: 0 0 0 4px oklch(80% 0.08 30 / 0.14);
}

/* ------------------------------------------------------------- pricing */

.pricing-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(64px, 9vh, 108px) 28px clamp(88px, 12vh, 144px);
}
.pricing-intro { max-width: 780px; }
.pricing-intro h1 {
  margin: 0 0 28px;
  font-size: clamp(2.8rem, 6vw, 5.2rem);
  font-weight: 760;
  line-height: 0.99;
  letter-spacing: -0.03em;
}
.pricing-lede {
  max-width: 64ch;
  margin: 0;
  color: var(--ink-2);
  font-size: clamp(1.08rem, 1.7vw, 1.25rem);
  line-height: 1.55;
  text-wrap: pretty;
}
.pricing-availability {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  max-width: 680px;
  margin-block-start: 36px;
  padding: 18px 20px;
  border-radius: 14px;
  background: oklch(21.5% 0.03 305);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.pricing-availability strong { font-size: 0.98rem; }
.pricing-availability p {
  margin: 5px 0 0;
  color: var(--ink-2);
  font-size: 0.9rem;
  line-height: 1.55;
}
.pricing-offer { margin-block-start: clamp(76px, 11vh, 128px); }
.pricing-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 28px clamp(40px, 7vw, 96px);
  align-items: end;
  margin-block-end: 34px;
}
.pricing-heading h2 { margin: 0; }
.pricing-heading p {
  max-width: 56ch;
  margin: 0;
  color: var(--ink-2);
}
.pricing-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pricing-tier {
  min-height: 190px;
  padding: clamp(22px, 3vw, 30px);
  border-radius: 16px;
  background: oklch(22% 0.032 305);
  box-shadow: inset 0 0 0 1px var(--hairline);
  display: flex;
  flex-direction: column;
}
.pricing-tier h3 {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.94rem;
  font-weight: 580;
}
.pricing-tier p { margin: 0; }
.pricing-tier .pricing-amount {
  margin: auto 0 18px;
  color: var(--ink);
  font: 700 clamp(2rem, 4vw, 3rem)/1 var(--font-mono);
  letter-spacing: -0.04em;
  white-space: nowrap;
}
.pricing-tier p:last-child {
  color: var(--ink-2);
  font-size: 0.84rem;
}
.pricing-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(44px, 8vw, 112px);
  margin-block-start: clamp(76px, 11vh, 124px);
}
.pricing-details h2,
.purchase-flow h2,
.pricing-payment h2 { font-size: clamp(1.55rem, 2.8vw, 2.1rem); }
.pricing-details p,
.pricing-details li,
.purchase-flow li,
.pricing-payment p {
  color: var(--ink-2);
  font-size: 0.98rem;
}
.pricing-details ul,
.purchase-flow ol {
  margin: 0;
  padding-inline-start: 1.3rem;
}
.pricing-details li,
.purchase-flow li { margin-block-end: 14px; }
.pricing-details strong,
.purchase-flow strong { color: var(--ink); }
.purchase-flow,
.pricing-payment {
  max-width: 780px;
  margin-block-start: clamp(76px, 11vh, 124px);
}
.policy-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-block-start: 26px;
}
.policy-links a { font-weight: 620; }
.pricing-contact { margin-block-start: 28px; }
.pricing-download {
  margin-block-start: clamp(88px, 13vh, 148px);
  padding-block-start: clamp(56px, 8vh, 88px);
  border-block-start: 1px solid var(--hairline);
  text-align: center;
}
.pricing-download h2 { margin-block-end: 12px; }
.pricing-download p {
  margin: 0 0 28px;
  color: var(--ink-2);
}

/* -------------------------------------------------------------- restore */

.restore-page {
  max-width: 860px;
  min-height: calc(100vh - var(--mb-h));
  margin: 0 auto;
  padding: clamp(64px, 9vh, 108px) 28px clamp(88px, 12vh, 144px);
}
.restore-intro { max-width: 720px; }
.restore-intro h1 {
  margin: 0 0 24px;
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 760;
  line-height: 0.99;
  letter-spacing: -0.03em;
}
.restore-lede {
  max-width: 62ch;
  margin: 0;
  color: var(--ink-2);
  font-size: clamp(1.08rem, 1.7vw, 1.24rem);
  line-height: 1.55;
  text-wrap: pretty;
}
.restore-panel {
  max-width: 680px;
  margin-block-start: clamp(52px, 8vh, 80px);
  padding: clamp(24px, 5vw, 42px);
  border-radius: 20px;
  background: oklch(21.5% 0.03 305);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.restore-panel h2 { font-size: clamp(1.55rem, 2.8vw, 2.1rem); }
.restore-panel > p {
  color: var(--ink-2);
  font-size: 0.94rem;
}
.recovery-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 12px;
  margin-block-start: 28px;
}
.recovery-form label {
  grid-column: 1 / -1;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 650;
}
.recovery-form input,
.recovery-form button {
  min-height: 44px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  font: 600 0.96rem/1.2 var(--font-display);
}
.recovery-form input {
  min-width: 0;
  padding: 10px 12px;
  background: oklch(16% 0.025 305);
  color: var(--ink);
}
.recovery-form button {
  padding: 10px 18px;
  border-color: transparent;
  background: #fff;
  color: #241019;
  cursor: pointer;
}
.recovery-form button:disabled,
.recovery-form input:disabled { cursor: wait; opacity: 0.62; }
.recovery-status {
  min-height: 1.6em;
  margin: 18px 0 0;
  color: var(--ink);
  font-weight: 650;
}
.restore-panel .restore-alternative {
  margin: 28px 0 0;
  padding-block-start: 22px;
  border-block-start: 1px solid var(--hairline);
  font-size: 0.88rem;
}

/* ---------------------------------------------------------------- privacy */

.privacy { background: var(--bg-deep); padding: clamp(80px, 11vh, 130px) 0; }
.privacy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 40px clamp(48px, 6vw, 96px);
  align-items: start;
}
.privacy h2 { font-size: clamp(2.1rem, 4vw, 3.2rem); margin: 0; }
.privacy-copy p { color: var(--ink-2); max-width: 58ch; margin: 0 0 20px; }
.privacy-copy p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- closing */

.closing {
  position: relative;
  text-align: center;
  padding: clamp(110px, 16vh, 190px) 0 0;
  background:
    radial-gradient(90% 110% at 50% 145%, oklch(64% 0.215 25 / 0.95), transparent 72%),
    radial-gradient(70% 85% at 88% 130%, oklch(52% 0.19 320 / 0.85), transparent 62%),
    radial-gradient(55% 65% at 8% 140%, oklch(45% 0.17 300 / 0.8), transparent 60%),
    linear-gradient(to bottom, var(--bg), oklch(23% 0.06 310) 85%);
}
.closing h2 { font-size: clamp(2rem, 3.8vw, 3rem); margin-bottom: 30px; }
.closing .meta { color: oklch(97% 0.008 40 / 0.85); }

.closing footer {
  margin-top: clamp(90px, 13vh, 150px);
  border-top: 1px solid oklch(100% 0 0 / 0.14);
  padding: 26px 0 34px;
  font-size: 0.88rem;
  color: oklch(97% 0.01 40 / 0.75);
}
.foot-row { display: flex; justify-content: space-between; gap: 16px; }
.closing footer a { color: oklch(97% 0.01 40 / 0.9); }

/* ---------------------------------------------------------------- policy */

.policy { padding: 56px 28px 96px; max-width: 780px; }
.policy h1 {
  font-size: clamp(2.1rem, 4.4vw, 3rem);
  font-weight: 740;
  letter-spacing: -0.024em;
  line-height: 1.05;
  margin: 0 0 28px;
}
.policy h2 { font-size: 1.4rem; margin: 44px 0 14px; }
.policy p, .policy li { color: var(--ink-2); font-size: 0.98rem; }
.policy li { margin-bottom: 14px; }
.policy strong { color: var(--ink); font-weight: 620; }
.policy code { font-family: var(--font-mono); font-size: 0.9em; }

.site-footer {
  border-top: 1px solid var(--hairline);
  padding: 28px 0 44px;
  font-size: 0.88rem;
  color: var(--ink-2);
}
.site-footer .foot-row { display: flex; justify-content: space-between; gap: 16px; }

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .hero-copy .sub { animation-delay: 0.08s; }
  .hero-copy .cta-row { animation-delay: 0.16s; }
  .hero-copy .hero-note { animation-delay: 0.6s; }
  .hero-pop > * { animation: pop-open 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; }
  .hero-pop.pop-enter > * { animation-delay: 0s; }
  /* Fade the parent so clearing the children's entrance fill cannot cancel the exit. */
  .hero-pop.pop-exit { opacity: 0; transition: opacity 150ms ease-out; }
  .hero-pop.pop-exit > * { animation: none; }

  @supports (animation-timeline: view()) {
    .reveal {
      animation: rise-in 1s cubic-bezier(0.16, 1, 0.3, 1) both;
      animation-timeline: view();
      animation-range: entry 5% entry 38%;
    }
  }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
@keyframes pop-open {
  from { opacity: 0; transform: translateY(-8px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .switch::after, .mb-download, .button { transition: none; }
  .mod.deny .switch { animation: none; }
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 980px) {
  .mb-ind.mb-o2 { display: none; }
}
@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-pane { position: static; order: -1; min-height: 0; }
  .gallery-shot { max-height: 62vh; }
  .privacy-grid { grid-template-columns: 1fr; }
  .pricing-heading { grid-template-columns: 1fr; align-items: start; }
}
@media (width < 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 8px; }
  .hero-copy { padding: 56px 0 12px; }
  .hero-pop { min-height: 0; justify-self: center; margin-right: 0; padding-top: 36px; padding-bottom: 72px; }
  .hero-pop .pop-arrow { display: none; }
}
@media (max-width: 820px) {
  .mb-ind.mb-o1 { display: none; }
}
@media (max-width: 640px) {
  .mb-ind[data-mod="network"] { display: none; }
  .hero h1 { font-size: clamp(2.6rem, 11vw, 3.4rem); }
  .pricing-tiers { grid-template-columns: 1fr; }
  .pricing-tier { min-height: 0; }
  .pricing-details { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .mb-ind[data-mod="cpu"] .mb-graph { display: none; }
  .mb-datetext { display: none; }
  .foot-row { flex-direction: column; align-items: center; gap: 8px; }
  .shell { padding: 0 22px; }
  .restore-page { padding-inline: 22px; }
  .restore-panel { padding: 22px; border-radius: 16px; }
  .recovery-form { grid-template-columns: 1fr; }
}

/* If responsive rules hide every enabled Module, one indicator must survive
   for its popover. The script clears this exception as soon as one fits again. */
.mb-ind.responsive-survivor { display: inline-flex; }