/* CPU Manager site. One stylesheet, no build step.
   Design idea: a quiet aluminium page with a single piece of studio hardware on it.
   The rack units (hero demo and offer) are the only dark, lit, textured things on the page. */

/* ---------- Fonts (self-hosted, no third-party requests) ---------- */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}
/* Handwriting, used only for Max's "My personal favourite" margin note. Browsers only download it
   when the note is on the page. Falls back to the handwriting faces built into macOS and iOS. */
@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DSEG7";
  src: url("../fonts/dseg7-classic-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  --alu: #D9DCDA;          /* page: brushed aluminium */
  --alu-deep: #CDD1CF;     /* recessed bands */
  --ink: #1D2023;          /* text: graphite */
  --ink-soft: #50565B;     /* secondary text */
  --rule: #B3B8B6;         /* hairlines */
  --panel: #27292C;        /* anodised faceplate */
  --legend: #C6CAC6;       /* faceplate printing */
  --amber: #F2A71B;        /* the one accent: lit LEDs, buy buttons */
  --amber-deep: #C98506;
  --led-green: #44D861;    /* meters only */
  --led-red: #E5412E;      /* overload only */
  --tape: #EAE1C4;         /* scribble-strip masking tape */

  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --seg: "DSEG7", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 74rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(4.5rem, 10vw, 8rem);
  --measure: 62ch;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--alu);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 400;
  font-stretch: 100%;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

p { margin: 0 0 1em; }

h1, h2, h3 { margin: 0; color: var(--ink); text-wrap: balance; }

h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.06;
  font-weight: 780;
  font-stretch: 118%;
  letter-spacing: -0.018em;
  margin-bottom: 0.6em;
}

h3 {
  font-size: 1.3rem;
  line-height: 1.25;
  font-weight: 720;
  font-stretch: 104%;
  letter-spacing: -0.005em;
  margin-bottom: 0.45em;
}

a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--amber-deep); }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.rack :focus-visible { outline-color: var(--amber); }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  background: var(--ink); color: var(--alu); padding: 0.6rem 1rem; border-radius: 4px;
  text-decoration: none; font-weight: 700;
}
.skip:focus { top: 1rem; }

.fine { font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block; vertical-align: middle;
  padding: 0.85rem 1.35rem;
  border-radius: 4px;
  font: inherit; font-size: 1.02rem; font-weight: 720; font-stretch: 106%;
  line-height: 1.2; text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color 120ms, box-shadow 120ms, transform 120ms;
}

/* Buy: an illuminated amber key. */
.btn--buy {
  background: var(--amber);
  color: var(--ink);
  border: 1px solid var(--amber-deep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 0 var(--amber-deep), 0 3px 10px rgba(201, 133, 6, 0.28);
}
.btn--buy:hover { background: #F6B434; }
.btn--buy:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 var(--amber-deep); }

.btn--quiet {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: calc(0.85rem - 1px) calc(1.35rem - 1px);
}
.btn--quiet:hover { background: rgba(29, 32, 35, 0.06); }

.btn--small { padding: 0.55rem 0.95rem; font-size: 0.95rem; white-space: nowrap; }

/* A plain text link sitting next to a button. */
.text-link { font-weight: 650; font-stretch: 104%; }
.btn--big { padding: 1.05rem 1.7rem; font-size: 1.12rem; }
.btn--quiet.btn--big { padding: calc(1.05rem - 1px) calc(1.7rem - 1px); }

.cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; margin: 1.6rem 0 0.9rem; }

/* ---------- Header ---------- */

.site-head { padding-block: 1.2rem; }
.site-head .wrap { display: flex; align-items: center; gap: 1.5rem; }

.wordmark {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-weight: 800; font-stretch: 125%; font-size: 1.05rem; letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap;
}
.wordmark__led {
  width: 0.62rem; height: 0.62rem; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 2px var(--panel), 0 0 9px 1px rgba(242, 167, 27, 0.75);
}

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 1.6rem; }
.site-nav a:not(.btn) { text-decoration: none; font-weight: 600; font-size: 0.98rem; }
.site-nav a:not(.btn):hover { text-decoration: underline; text-decoration-color: var(--amber-deep); }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--amber-deep); }

@media (max-width: 760px) {
  .site-nav { gap: 1rem; }
  .site-head .wrap { gap: 0.75rem; }
  .wordmark { font-size: 0.95rem; }
  /* Matches the short URLs the links have used since 29 Sep 2026. It said about.html before, which hid
     About on phones once the links changed (spotted by the Fable design pass the same night). */
  .site-nav a:not(.btn):not([href="/about"]):not([href="/"]) { display: none; }
}
/* The smallest phones (320 to 380 px wide): the header button used to run ~20 px off the right
   edge at 320 px. Tighter gaps and a slimmer button keep the wordmark, About and the button on one line. */
@media (max-width: 380px) {
  .site-head .wrap { gap: 0.4rem; }
  .site-nav { gap: 0.55rem; }
  .site-nav a:not(.btn) { font-size: 0.86rem; }
  .wordmark { font-size: 0.84rem; gap: 0.4rem; }
  .btn--small { padding: 0.5rem 0.6rem; font-size: 0.84rem; }
}

/* ---------- Hero ---------- */

.hero { padding-block: clamp(2rem, 6vw, 4.5rem) clamp(3.5rem, 7vw, 5.5rem); }

.hero__top {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 2rem clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}

.hero h1 {
  font-size: clamp(2.8rem, 6.6vw, 5.4rem);
  line-height: 0.96;
  font-weight: 820;
  font-stretch: 125%;
  letter-spacing: -0.03em;
  max-width: 11ch;
}

.hero__pitch { max-width: 40ch; }
.hero__pitch .lead { font-size: 1.28rem; line-height: 1.5; margin-bottom: 0.8em; }
.hero__pitch .fine { margin: 0; }

@media (max-width: 900px) {
  .hero__top { grid-template-columns: 1fr; }
  .hero__pitch { max-width: 46ch; }
}

/* "Stop Chrome overloading your mix." (29 Sep 2026): "overloading" is the longest word the hero has
   carried, and at the base 2.8rem minimum it ran ~11 px off a 320 px screen. Scale with the viewport
   below 400 px so the longest word always fits the column.
   Must come AFTER the base .hero h1 rule, or the base rule wins. */
@media (max-width: 400px) {
  .hero h1 { font-size: clamp(2.1rem, 11.2vw, 2.8rem); }
}

/* ---------- Rack hardware (shared by demo and offer) ---------- */

.rack-mount { margin: clamp(2.5rem, 5vw, 3.75rem) 0 0; }
.rack-mount figcaption { margin-top: 1rem; max-width: 60ch; }

.rack {
  position: relative;
  display: grid;
  grid-template-columns: clamp(1.6rem, 3vw, 2.5rem) minmax(0, 1fr) clamp(1.6rem, 3vw, 2.5rem);
  border-radius: 6px;
  color: var(--legend);
  background: linear-gradient(180deg, #33363A 0%, #27292C 48%, #202225 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 34px 60px -30px rgba(18, 22, 26, 0.6),
    0 14px 26px -14px rgba(18, 22, 26, 0.45);
}
/* Vertical brushing on the faceplate. */
.rack::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.022) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
}

.rack__ear {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: space-around;
  padding-block: 1rem;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.22), rgba(255, 255, 255, 0.035) 45%, rgba(0, 0, 0, 0.18));
}
.rack__ear--left { border-radius: 6px 0 0 6px; box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.5), 1px 0 0 rgba(255, 255, 255, 0.05); }
.rack__ear--right { border-radius: 0 6px 6px 0; box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.5), -1px 0 0 rgba(255, 255, 255, 0.05); }

/* Oval rack slot with a Phillips screw in it. */
.slot {
  position: relative;
  width: clamp(0.95rem, 1.6vw, 1.3rem); height: 0.62rem; border-radius: 1rem;
  background: #141618;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.08);
}
.slot::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 0.86rem; height: 0.86rem; transform: translate(-50%, -50%) rotate(12deg);
  border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 44%, rgba(0, 0, 0, 0.55) 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, rgba(0, 0, 0, 0.55) 44% 56%, transparent 56%),
    radial-gradient(circle at 35% 30%, #D6DADD, #82888D 62%, #4E5357);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}

.rack__face {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.5rem clamp(1.5rem, 3.5vw, 3rem);
  align-items: stretch;
  padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1rem, 2.2vw, 1.8rem);
}

/* Printed legends on the faceplate. Capitals are how hardware is labelled, so they live here only. */
.legend {
  font-size: 0.66rem; line-height: 1.2;
  font-weight: 700; font-stretch: 118%;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--legend);
}

.rack__status { display: flex; flex-direction: column; justify-content: space-between; gap: 1.1rem; min-width: 8.5rem; }
.rack__brand { display: flex; align-items: center; gap: 0.55rem; }
.brand {
  font-size: 0.9rem; font-weight: 820; font-stretch: 125%;
  letter-spacing: 0.16em; text-transform: uppercase; color: #ECEEEA;
  white-space: nowrap;
}
.power-led {
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--led-green); box-shadow: 0 0 6px 1px rgba(68, 216, 97, 0.7);
}

.lamp { display: flex; align-items: center; gap: 0.55rem; }
.lamp__dot {
  width: 0.78rem; height: 0.78rem; border-radius: 50%;
  background: #4A1D18;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
  transition: background-color 60ms, box-shadow 60ms;
}
.lamp.is-on .lamp__dot {
  background: var(--led-red);
  box-shadow: 0 0 7px 2px rgba(229, 65, 46, 0.75), inset 0 -1px 2px rgba(0, 0, 0, 0.3);
}

.readout-group { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: end; gap: 0.35rem 0.4rem; }
.readout-group > .legend:first-child { grid-column: 1 / -1; }
.readout__unit { padding-bottom: 0.35rem; }

.readout {
  position: relative; display: inline-block;
  font-family: var(--seg); font-weight: 700;
  font-size: 1.9rem; line-height: 1;
  color: var(--amber);
  background: #151719;
  padding: 0.4rem 0.55rem;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 2px 6px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.06);
  text-shadow: 0 0 8px rgba(242, 167, 27, 0.55);
  font-variant-numeric: tabular-nums;
}
/* Unlit segments behind the digits, like a real display. */
.readout__ghost {
  position: absolute; left: 0.55rem; top: 0.4rem;
  color: rgba(242, 167, 27, 0.09); text-shadow: none;
}
.readout > [data-headroom], .readout > [data-countdown] { position: relative; }

/* LED meter bank */
.meters {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(0.5rem, 2vw, 1.8rem);
  padding: 0 clamp(0rem, 1.5vw, 1rem);
  border-left: 1px solid rgba(0, 0, 0, 0.45);
  border-right: 1px solid rgba(0, 0, 0, 0.45);
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.04) inset, -1px 0 0 rgba(255, 255, 255, 0.04) inset;
}
.ch { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }

.meter {
  --level: 0.25;
  position: relative;
  width: clamp(1.05rem, 2.2vw, 1.55rem);
  height: clamp(7rem, 13vw, 10rem);
  border-radius: 3px;
  background: #141618;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.06);
}
.meter__leds, .meter__lit {
  position: absolute; inset: 4px;
  /* 12 segments: 7 green, 3 amber, 2 red. */
  background: linear-gradient(to top,
    var(--led-green) 0 58.333%,
    var(--amber) 58.333% 83.333%,
    var(--led-red) 83.333% 100%);
  -webkit-mask: repeating-linear-gradient(to top, #000 0 calc(8.3333% - 2px), transparent calc(8.3333% - 2px) 8.3333%);
          mask: repeating-linear-gradient(to top, #000 0 calc(8.3333% - 2px), transparent calc(8.3333% - 2px) 8.3333%);
}
.meter__leds { opacity: 0.14; }
.meter__lit {
  clip-path: inset(calc((1 - var(--level)) * 100%) 0 0 0);
  filter: drop-shadow(0 0 3px rgba(68, 216, 97, 0.45));
}

/* Scribble strip: masking tape and a marker, the way every studio labels its channels. */
.strip {
  display: inline-block; max-width: 100%;
  background: var(--tape);
  color: #2A2C2F;
  font-size: clamp(0.66rem, 1.05vw, 0.86rem);
  font-weight: 720; font-stretch: 72%;
  line-height: 1.25;
  padding: 0.18rem 0.45rem;
  border-radius: 1px;
  transform: rotate(-1.4deg);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}
.ch:nth-child(2n) .strip { transform: rotate(1.1deg); }
.ch:nth-child(3n) .strip { transform: rotate(-0.4deg); }
.ch--daw .strip { background: #F3D48C; }

/* The one control: an illuminated push key. */
.rack__control { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7rem; }

.key {
  appearance: none; border: 0; cursor: pointer;
  width: clamp(6.8rem, 11vw, 8.8rem); aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  padding: 0.8rem;
  border-radius: 6px;
  font: inherit; text-align: left;
  color: #EEF0EC;
  background: linear-gradient(180deg, #474B50, #35383C);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 0 rgba(0, 0, 0, 0.45),
    0 4px 0 #16181A,
    0 7px 14px rgba(0, 0, 0, 0.5);
  transition: transform 90ms ease-out, box-shadow 90ms ease-out;
}
.key:hover { background: linear-gradient(180deg, #4D5157, #393C41); }
.key:active { transform: translateY(2px); }
.key[aria-pressed="true"] {
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 1px 0 #16181A,
    0 2px 5px rgba(0, 0, 0, 0.5);
}
.key__led {
  width: 0.68rem; height: 0.68rem; border-radius: 50%;
  background: #5A4312;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7);
  transition: background-color 120ms, box-shadow 120ms;
}
.key[aria-pressed="true"] .key__led { background: var(--amber); box-shadow: 0 0 9px 2px rgba(242, 167, 27, 0.8); }
.key__legend {
  font-size: 0.86rem; line-height: 1.15;
  font-weight: 760; font-stretch: 112%;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.rack__hint { font-size: 0.82rem; color: var(--legend); font-stretch: 100%; }

/* Small screens: stack the status block and key under the meters. */
@media (max-width: 760px) {
  .rack__face { grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem 1rem; }
  .meters { grid-column: 1 / -1; order: -1; border: 0; box-shadow: none; padding: 0; gap: 0.35rem; }
  .rack__status { min-width: 0; }
  .brand { font-size: 0.7rem; letter-spacing: 0.1em; }
  .strip { font-size: 0.62rem; font-stretch: 62%; padding: 0.14rem 0.28rem; }
  .key { width: 6.4rem; }
}

/* ---------- Sections ---------- */

.section { padding-block: var(--section); border-top: 1px solid var(--rule); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
  gap: 2.5rem clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.split--sticky .split__head { position: sticky; top: 2rem; }
.split__head > p { color: var(--ink-soft); max-width: 36ch; }
.split__head .btn { margin-top: 0.6rem; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--sticky .split__head { position: static; }
}

.prose { max-width: var(--measure); }
.prose--narrow { max-width: 56ch; }

/* The System Overload exhibit */
.exhibit { margin: 0; }
.exhibit__title {
  display: flex; align-items: center; gap: 0.9rem;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  line-height: 1; font-weight: 820; font-stretch: 125%; letter-spacing: -0.03em;
  margin-bottom: 0.9rem;
}
.exhibit__lamp {
  flex: none;
  width: 0.34em; height: 0.34em; border-radius: 50%;
  background: var(--led-red);
  box-shadow: 0 0 0 3px var(--panel), 0 0 14px 3px rgba(229, 65, 46, 0.6);
}
.exhibit__detail {
  font-size: 1.15rem; line-height: 1.5; color: var(--ink-soft);
  max-width: 34ch; padding-left: 1rem; border-left: 3px solid var(--led-red);
}

/* Features: a text column, each with a small piece of the real interface above it. */
.features { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
.feature { max-width: var(--measure); }
.feature p { color: var(--ink); }

.vignette {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--panel); color: var(--legend);
  padding: 0.5rem; border-radius: 5px; margin-bottom: 1.1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 18px -10px rgba(18, 22, 26, 0.55);
}
/* A vignette with Max's handwritten note beside it, arrow curving back into the menu. */
.vignette-row { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 1.1rem; }
.vignette-row .vignette { margin-bottom: 0; flex: none; }
.fav-note {
  display: flex; align-items: flex-end; gap: 0.1rem; margin: 0;
  font-family: "Caveat", "Bradley Hand", "Noteworthy", "Marker Felt", cursive;
  font-weight: 600; font-size: 1.75rem; line-height: 0.95; color: var(--ink);
  transform: rotate(-4deg); transform-origin: left center;
}
.fav-note__arrow {
  width: 4.6rem; height: auto; flex: none; margin-bottom: 0.2rem;
  fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.fav-note__text { max-width: 6.5em; }
/* Too narrow to sit beside the menu: drop the note underneath, offset to the right, so the same
   up-and-left arrow still points back at "Prioritize when open". */
@media (max-width: 520px) {
  .vignette-row { flex-direction: column; align-items: flex-start; gap: 0; }
  .fav-note { margin: -0.3rem 0 0 7.5rem; font-size: 1.55rem; }
}
/* Smallest phones: less indent and slightly smaller writing, so "My personal / favourite" stays on
   two lines instead of stranding "My" up against the menu. */
@media (max-width: 380px) {
  .fav-note { margin-left: 4.5rem; font-size: 1.45rem; }
  .fav-note__text { max-width: 7em; }
}

.chip {
  font-size: 0.82rem; font-weight: 700; font-stretch: 100%;
  padding: 0.28rem 0.6rem; border-radius: 3px;
  background: #1C1E21; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.chip.is-on { background: var(--amber); color: var(--ink); box-shadow: 0 0 8px rgba(242, 167, 27, 0.45); }

.menu-mock { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.15rem 0.35rem; font-size: 0.86rem; }
.menu-mock__label { font-weight: 600; }
.menu-mock__value {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: #1C1E21; color: #F1F2EE; font-weight: 700;
  padding: 0.28rem 0.6rem; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.menu-mock__value::after {
  content: ""; width: 0.4rem; height: 0.4rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.ctx-mock { display: grid; gap: 0.1rem; min-width: 14rem; font-size: 0.86rem; }
.ctx-mock__item { position: relative; padding: 0.3rem 0.6rem 0.3rem 1.6rem; border-radius: 3px; color: #E6E8E4; }
.ctx-mock__item.is-checked { background: #3A3D42; }
.ctx-mock__item.is-checked::before {
  content: ""; position: absolute; left: 0.62rem; top: 0.45rem;
  width: 0.3rem; height: 0.6rem;
  border-right: 2px solid var(--amber); border-bottom: 2px solid var(--amber);
  transform: rotate(40deg);
}

/* Safety spec sheet */
.spec { margin: 0; border-top: 2px solid var(--ink); }
.spec__row {
  display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: 0.4rem 2rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--rule);
}
.spec dt { font-weight: 720; font-stretch: 108%; }
.spec dd { margin: 0; max-width: 52ch; }
@media (max-width: 620px) { .spec__row { grid-template-columns: 1fr; } }

/* ---------- Beta sign-up (beta mode, 29 Sep 2026) ---------- */

.beta-lead {
  font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.3;
  font-weight: 650; font-stretch: 112%; letter-spacing: -0.01em;
  color: var(--ink-soft); margin: -0.2em 0 1em;
}
.split__head .beta-lead { max-width: 24ch; }
.beta-terms { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0.9rem; max-width: 40ch; }
.beta-terms li { position: relative; padding-left: 1.4rem; }
.beta-terms li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 0 2px var(--panel);
}

.beta-form {
  display: grid; gap: 1.1rem;
  background: #E6E9E7; border: 1px solid var(--rule); border-radius: 8px;
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: 0 30px 60px -40px rgba(18, 22, 26, 0.55);
}
.field { display: grid; gap: 0.35rem; min-width: 0; }
.field[hidden] { display: none; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }
.field label { font-weight: 650; font-stretch: 104%; font-size: 0.98rem; }
.optional { font-weight: 400; color: var(--ink-soft); font-size: 0.88rem; }
.beta-form input[type="text"], .beta-form input[type="email"], .beta-form select, .beta-form textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: #FBFBFA; border: 1px solid #9BA19F; border-radius: 5px;
  padding: 0.65rem 0.75rem; min-height: 2.75rem;
  box-shadow: inset 0 1px 2px rgba(18, 22, 26, 0.08);
}
.beta-form textarea { resize: vertical; min-height: 5.5rem; }
.beta-form input:focus-visible, .beta-form select:focus-visible, .beta-form textarea:focus-visible {
  outline: 3px solid var(--amber-deep); outline-offset: 1px; border-color: var(--ink);
}
.check { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; font-size: 0.98rem; cursor: pointer; }
.check input { width: 1.15rem; height: 1.15rem; margin: 0.2rem 0 0; accent-color: var(--amber-deep); }
.beta-form .btn { justify-self: start; }
.beta-form button[disabled] { opacity: 0.6; cursor: progress; }
.beta-form .fine { margin: 0; }
.form-status { margin: 0; font-weight: 600; min-height: 1.4em; }
.form-status:empty { display: none; }
.form-status--error { color: #A1291B; }
.form-done h3 { margin-bottom: 0.4em; }
.form-done p { margin: 0; }
.form-done:focus { outline: none; }

/* ---------- Privacy policy page ---------- */

.policy h1 {
  font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: 1; font-weight: 820; font-stretch: 125%;
  letter-spacing: -0.03em; margin-bottom: 0.4em;
}
.policy h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin: 2em 0 0.5em; }
.policy ul { padding-left: 1.2rem; }
.policy li { margin-bottom: 0.4em; }
.policy-table { overflow-x: auto; margin: 1.2rem 0 1.4rem; }
.policy-table table { border-collapse: collapse; width: 100%; font-size: 0.98rem; }
.policy-table th, .policy-table td { text-align: left; padding: 0.6rem 0.8rem 0.6rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.policy-table th { font-weight: 720; border-bottom: 2px solid var(--ink); }

/* Honeypot: off-screen, not display:none (some bots skip hidden fields). */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- What else it does ---------- */

.also { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 3.5vw, 2.5rem); }
.also h3 { margin-bottom: 0.7rem; }
.also .prose p:last-child { margin-bottom: 0; }
.app-shot { margin: 0; }
.app-shot img {
  width: 100%; border-radius: 6px;
  box-shadow: 0 34px 60px -30px rgba(18, 22, 26, 0.6), 0 14px 26px -14px rgba(18, 22, 26, 0.45);
}
.app-shot figcaption { margin-top: 1rem; }

/* ---------- The real test ---------- */

/* minmax(0, 1fr) stops the results table's minimum width from stretching the column past the screen on phones. */
.proof { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 2.75rem); }
.proof h3 { margin-bottom: 0.9rem; }
.proof .prose p:last-child { margin-bottom: 0; }

/* The results rack: a faceplate holding a small table of 7-segment readouts. */
.rack--results .rack__face { display: block; min-width: 0; overflow-x: auto; padding-block: clamp(1.2rem, 2.6vw, 1.8rem); }
.results { border-collapse: collapse; }
.results caption { text-align: left; padding-bottom: 1.1rem; }
.results th, .results td { padding: 0.45rem clamp(0.6rem, 2vw, 1.4rem) 0.45rem 0; text-align: left; vertical-align: middle; }
.results thead th { padding-bottom: 0.2rem; max-width: 9rem; }
.results tbody th { white-space: nowrap; padding-right: clamp(1rem, 3vw, 2.2rem); }
.readout__val { position: relative; }
/* Overload counts above zero light up red, the one place red is allowed. */
.readout--red { color: var(--led-red); text-shadow: 0 0 8px rgba(229, 65, 46, 0.55); }
.readout--red .readout__ghost { color: rgba(229, 65, 46, 0.1); }

@media (max-width: 480px) {
  .results .legend { letter-spacing: 0.08em; }
  .results th, .results td { padding-right: 0.7rem; }
  .results tbody th { white-space: normal; padding-right: 0.9rem; }
  .results .readout { font-size: 1.4rem; padding: 0.35rem 0.45rem; }
  .results .readout__ghost { left: 0.45rem; top: 0.35rem; }
}
/* On the smallest phones the decorative rack ears give their width back to the table. */
@media (max-width: 360px) {
  .rack--results { grid-template-columns: minmax(0, 1fr); }
  .rack--results .rack__ear { display: none; }
  .rack--results .rack__face { padding-inline: 0.85rem; }
  .results th, .results td { padding-right: 0.5rem; }
  .results tbody th { padding-right: 0.6rem; }
}

/* Honesty section sits on a recessed band. */
.section--honest { background: var(--alu-deep); }

/* ---------- Offer ---------- */

.price-title { max-width: 18ch; margin-bottom: 1.4em; }
/* "A $19 answer to a $5,000 problem." sits between the heading and the offer rack. */
.price-title:has(+ .price-lead) { margin-bottom: 0.35em; }
.price-lead {
  font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.3;
  font-weight: 650; font-stretch: 112%; letter-spacing: -0.01em;
  color: var(--ink-soft); margin: 0 0 1.6em;
}

.rack--offer .rack__face.offer {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(1.4rem, 3vw, 2.2rem);
}

.offer__price { display: flex; flex-direction: column; gap: 0.3rem; }
.offer__amount {
  font-size: clamp(3.4rem, 7vw, 5.2rem); line-height: 0.9;
  font-weight: 840; font-stretch: 125%; letter-spacing: -0.03em;
  color: #F4F5F1;
}
.offer__note { font-size: 0.95rem; color: var(--legend); }

.offer__timer { display: inline-grid; grid-template-columns: max-content; justify-items: stretch; row-gap: 0.45rem; }
.offer__timer > .legend { justify-self: start; }
.readout--wide { font-size: clamp(1.5rem, 3.2vw, 2.3rem); }
.timer-units {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-inline: 0.2rem;
  text-align: center;
  font-size: 0.78rem; color: var(--legend);
}

.offer__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; }
.offer__trial { color: #ECEEEA; font-size: 0.98rem; }
.offer__trial:hover { text-decoration-color: var(--amber); }
.offer__status { margin: 0; font-size: 0.9rem; color: var(--amber); max-width: 26ch; min-height: 0; }
.offer__status:empty { display: none; }

@media (max-width: 900px) {
  .rack--offer .rack__face.offer { grid-template-columns: 1fr; justify-items: start; }
}

.facts {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 3rem;
  max-width: 60rem;
}
.facts li { position: relative; padding-left: 1.4rem; color: var(--ink); }
.facts li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 0 2px var(--panel);
}
@media (max-width: 760px) { .facts { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */

.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  position: relative;
  list-style: none; cursor: pointer;
  padding: 1.15rem 2.5rem 1.15rem 0;
  font-weight: 700; font-stretch: 106%; font-size: 1.12rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 0.4rem; top: 50%;
  width: 0.6rem; height: 0.6rem; margin-top: -0.45rem;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
  transition: transform 150ms;
}
.faq details[open] summary::after { transform: rotate(225deg); margin-top: -0.1rem; }
.faq details p { max-width: 58ch; padding-bottom: 0.4rem; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* ---------- Final call ---------- */

.final-title {
  font-size: clamp(2.6rem, 6.4vw, 5.2rem);
  line-height: 0.98; font-weight: 820; font-stretch: 125%; letter-spacing: -0.03em;
  max-width: 14ch;
}

/* ---------- Footer ---------- */

.site-foot { border-top: 1px solid var(--rule); padding-block: 2.5rem 3rem; font-size: 0.92rem; color: var(--ink-soft); }
.site-foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 1rem 3rem; }
.site-foot p { margin: 0; }
@media (max-width: 760px) { .site-foot__grid { grid-template-columns: 1fr; } }

/* ---------- About page ---------- */

.about-hero { padding-block: clamp(2rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 3.5rem); }
.about-hero h1 {
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 0.98; font-weight: 820; font-stretch: 125%; letter-spacing: -0.03em;
  max-width: 13ch; margin-bottom: 1.4rem;
}
.about-hero .lead { font-size: 1.28rem; line-height: 1.5; max-width: 46ch; }

.photo { margin: 0; }
.photo img {
  width: 100%; border-radius: 4px;
  aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 55%;
  box-shadow: 0 30px 60px -34px rgba(18, 22, 26, 0.65);
}
@media (max-width: 760px) { .photo img { aspect-ratio: 3 / 2; } }
.photo figcaption { margin-top: 0.8rem; }

.story { padding-block: var(--section); }
.story .split + .split { margin-top: clamp(3rem, 6vw, 5rem); }
.story .prose p { max-width: var(--measure); }

.cat-note { color: var(--ink-soft); font-style: italic; }

/* The illustration's left side is Max, so on narrower crops keep the left edge. */
.photo--max img { object-position: 0% 50%; }

/* Mitzy dozing on the rule at the top of a section. Her belly sits 44.55% of the way down the
   image, so shifting her up by that much puts her on the line with her tail hanging below it. */
.section--perch { position: relative; }
.perch { position: absolute; top: -1px; left: 0; right: 0; height: 0; }
.mitzy {
  position: absolute; top: 0; right: clamp(0rem, 6vw, 5rem);
  width: 227px; height: auto;
  transform: translateY(-44.55%);
}
@media (max-width: 760px) {
  .mitzy { width: 170px; right: 0; }
}

/* ---------- Offer state ---------- */

/* When the launch price has ended, the script sets this class and hides launch-only lines. */
.offer-over [data-launch-only] { display: none !important; }