/* Tonovox — website
   Tokens and rules are copied from ../tonovox-assets/STYLESHEET.md (§20
   silver theme, §21 drop-in tokens) and mirrored in
   ../tonovox-assets/tonovox-lockup.html. Change one, change all three.

   FLAT BY CONSTRUCTION (§1.7): no shadows of any kind, no gradients, no blur,
   no bevel. Depth is the fill ramp (--well → --bg →
   --panel → --panel-raised) plus 1px hairlines, and nothing else. The CI
   `frontend` job greps this file for the forbidden properties — keep them out
   of the comments too, or write them the way this line does. */

:root {
  color-scheme: light;

  /* surfaces — a silver faceplate, never pure white */
  --bg: #D9DEE5;
  --bg-lift: #E7EBF0;
  --panel: #E7EBF0;
  --panel-raised: #EEF1F5;
  --well: #C9CFD7;
  --well-lift: #D1D7DE;
  --border: #C2C9D2;
  --border-strong: #A9B3BF;

  /* brand ink — dark blue on silver, 7.35:1 against --bg */
  --accent: #17456E;
  --accent-bright: #24618F;
  --accent-dim: #3E6B91;
  --accent-ghost: rgba(23, 69, 110, 0.10);

  /* type */
  --text: #14243A;
  --text-dim: #47586E;
  --text-faint: #6B7C91;
  --text-disabled: #97A3B2;

  /* interaction */
  --azure: #24618F;
  --azure-ghost: rgba(36, 97, 143, 0.16);
  --meter: #356B31;
  --clip: #A83A31;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
  --dur-enter: 900ms;

  /* §8: radii come from the scale, spacing from 4/8/12/16/24/32/48/64 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --wrap: 60rem;
  --gutter: clamp(16px, 5vw, 32px);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* The website uses the system stack so it matches the plugin UI (§7). */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  /* Sticky footer: the page keeps its full height even with three lines on it. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

::selection { background: var(--accent); color: var(--bg); }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-bright); }

/* §19: keyboard focus is never removed, only drawn — 1px azure, 2px offset. */
:focus-visible {
  outline: 1px solid var(--azure);
  outline-offset: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- header ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px var(--gutter);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
}

/* The mark is 24px minimum (§23) and strokes with currentColor. The tone band
   is flatter and wider than the old mountains, so its box runs ~1.25× bigger
   at the same stroke-width (§17) — never thicken the stroke to compensate. */
.brand-mark {
  width: 35px;
  height: 35px;
  display: block;
  color: var(--accent);
}

.brand-word {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.brand-word .vox { font-weight: 300; color: var(--text-dim); }

.site-nav {
  display: flex;
  gap: 4px;
}

/* 44px minimum hit area (§8) even though the text is small. */
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 12px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.site-nav a:hover { color: var(--accent); background: var(--accent-ghost); }

/* The page you are on, drawn the way a hover is — one flat wash and the brand
   ink, so "current" is a state and not a second emphasis system. */
.site-nav a[aria-current="page"] {
  color: var(--accent);
  background: var(--accent-ghost);
}

/* ---------- hero ---------- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 4vmin, 32px);
  text-align: center;
  padding: clamp(48px, 12vmin, 96px) var(--gutter) clamp(40px, 8vmin, 64px);
}

/* Same box as the lockup's .logo (../tonovox-assets/tonovox-lockup.html): the
   hand-drawn tone fills ~81 % × 48 % of the 128 canvas, so the hero needs the
   wider box to carry the same weight as the wordmark under it. */
.hero-mark {
  width: clamp(140px, 32vmin, 256px);
  height: auto;
  display: block;
  color: var(--accent);
}

.wordmark {
  margin: 0;
  font-size: clamp(28px, 6vmin, 40px);   /* §7 display: 40px @1x */
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.1;
  color: var(--text);
}

.wordmark .vox { font-weight: 300; color: var(--text-dim); }

.rule {
  width: clamp(28px, 6vmin, 46px);
  height: 1px;
  border: 0;
  margin: 0;
  background: rgba(23, 69, 110, 0.45); /* == color-mix fallback */
  background: color-mix(in srgb, var(--accent) 45%, transparent);
}

.tagline {
  margin: 0;
  font-size: clamp(11px, 1.6vmin, 13px);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.lede {
  margin: 0;
  max-width: 34rem;
  font-size: 18px;
  color: var(--text-dim);
  text-wrap: balance;
}

.hero-actions { margin: 8px 0 0; }

/* The two lines that belong together: the promise, then the fact about the
   first plugin. 8px apart (§8), so the hero's wide rhythm still reads around
   them rather than between them. */
.hero-copy {
  display: grid;
  gap: 8px;
}

.subline {
  margin: 0;
  max-width: 34rem;
  font-size: 15px;
  color: var(--text-dim);
  text-wrap: balance;
}

/* ---------- pages (About, Gain MS) ---------- */

/* Head block, prose, facts table, one action — the same four parts on every
   page. `.page` stacks them in one column; `.product` lays the same parts out
   beside the plate. */
.page {
  display: grid;
  gap: 24px;
  align-content: start;
  max-width: 46rem;      /* prose wants a shorter measure than --wrap */
  padding-block: clamp(32px, 8vmin, 64px) clamp(40px, 8vmin, 64px);
}

.page-head {
  display: grid;
  gap: 12px;
  justify-items: start;
}

.page-body {
  display: grid;
  gap: 16px;
  max-width: 44rem;
}

.page-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0;
}

/* §7: H1 is the page's subject — 28px @1x, weight 500, +0.05em. */
.page-name {
  margin: 0;
  font-size: clamp(28px, 6vmin, 40px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.1;
  color: var(--text);
}

/* Named areas, so the plate can sit beside the words on a wide screen and
   directly under the headline on a narrow one — without a second copy of the
   markup. DOM order stays: headline, plate, prose, facts, action. */
.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "shot"
    "body"
    "facts"
    "acts";
  gap: clamp(20px, 5vmin, 32px);
  align-items: start;
  padding-block: clamp(32px, 8vmin, 64px) clamp(40px, 8vmin, 64px);
}

.product > .page-head    { grid-area: head; }
.product > .product-shot { grid-area: shot; }
.product > .page-body    { grid-area: body; }
.product > .facts        { grid-area: facts; }
.product > .page-actions { grid-area: acts; }

/* 60rem == --wrap: two columns only once the page is as wide as its own
   measure, so the text column never gets squeezed. */
@media (min-width: 60rem) {
  .product {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem);
    grid-template-areas:
      "head  shot"
      "body  shot"
      "facts shot"
      "acts  shot";
    gap: 24px clamp(32px, 5vmin, 56px);
  }
}

/* Micro/badge (§7): 10-12px, 500, wide tracking, uppercase. The pill radius
   is §8's own token, and a badge is an object, not a rounded rectangle. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px 12px;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-pill);
  background: var(--accent-ghost);
  color: var(--accent);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* The plate is drawn square — a plugin window is a cut piece of metal (§8) —
   so the screenshot keeps its corners and the card around it does the lifting.
   --panel is one step above --bg on the fill ramp: that is the whole depth.
*/
.product-shot {
  margin: 0;
  display: grid;
  gap: 12px;
  justify-items: center;
  padding: clamp(16px, 3vmin, 24px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.product-shot img {
  display: block;
  width: 100%;
  max-width: 20rem;      /* the plate is tall; kept plate-sized, not a banner */
  height: auto;
}

.product-shot figcaption {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-faint);   /* duplicated information only (§19) */
  text-align: center;
}

/* Two columns means a long left column: keep the plate in view while it reads.
   Sticky, not animated — it moves only with the scroll. */
@media (min-width: 60rem) {
  .product-shot {
    position: sticky;
    top: 16px;
  }
}

/* ---------- bands ---------- */

.band {
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding-block: clamp(32px, 6vmin, 48px);
}

/* The lift is a flat step, not a gradient (§2: full-width banding only). */
.band-alt { background: var(--bg-lift); }

.section-label {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.quiet {
  margin: 0;
  max-width: 40rem;
  color: var(--text-dim);
}

.facts {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  max-width: 34rem;              /* a readout, not a full-width band */
  display: grid;
  gap: 1px;                      /* hairline separators, drawn by the gap */
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.facts li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  background: var(--panel);
}

/* On a narrow screen a long value ("macOS (Apple Silicon) · Windows 11")
   would wrap into the label's column; stacked, each gets the full width. */
@media (max-width: 30rem) {
  .facts li {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

.fact-k {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.fact-v { color: var(--text); }

/* ---------- the long product page ----------
   Everything a crawler quotes, and everything a person scrolls to: the
   breadcrumb, the section heads, the feature cards, the spec list and the FAQ.
   Same four rules as the rest of the file — flat fills from the ramp, 1 px
   hairlines, radii and spacing from the tokens (§7 type, §8 geometry). */

/* The site's shape, in the page: Home › Gain MS. */
.breadcrumbs {
  padding-block: 24px 0;
}

/* The plate is the first thing under it, so the breadcrumb borrows part of the
   page's own top padding rather than stacking on top of it. */
.breadcrumbs + article > .product,
.breadcrumbs + .page {
  padding-block-start: clamp(16px, 4vmin, 32px);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.breadcrumbs li + li::before {
  content: "/";
  padding-right: 8px;
  color: var(--border-strong);
}

.breadcrumbs a { color: var(--text-dim); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--text); }

/* A band holds prose, so it takes the measure §7 gives a page, not --wrap. */
.band > .wrap {
  display: grid;
  gap: 24px;
  align-content: start;
  max-width: 46rem;
}

/* §7 H2: 20px, 500, +0.04 em — the plate's own module title, one step under
   the product name and never bigger than it. */
.section-name {
  margin: 0;
  font-size: clamp(18px, 3.4vmin, 20px);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: var(--text);
}

/* Feature cards: the fill ramp does the lifting and the 1 px gaps do the
   drawing, exactly like .facts — one idiom, two shapes. */
.features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.feature {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 16px;
  background: var(--panel);
}

.feature h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--text);
}

.feature p { margin: 0; font-size: 14px; color: var(--text-dim); }

/* The M/S definition: two formulas and the words that join them, on one line
   until the line runs out. */
.formula {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin: 0;
  font-size: 15px;
  color: var(--text);
}

code {
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--well);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
  font-size: 0.9em;
  white-space: nowrap;
}

/* Use cases: a dash, not a bullet — the system draws rules, not dots. */
.uses {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 44rem;
  color: var(--text-dim);
}

.uses li { position: relative; padding-left: 20px; }

.uses li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 1px;
  background: var(--accent-dim);
}

.uses strong { font-weight: 500; color: var(--text); }

/* The spec sheet as a definition list: two columns of hairline cells, stacked
   when the screen is too narrow to hold "Gain range" beside its value. */
.specs {
  display: grid;
  grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr);
  gap: 1px;
  margin: 0;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.specs dt {
  padding: 12px 16px;
  background: var(--panel-raised);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.specs dd {
  margin: 0;
  padding: 12px 16px;
  background: var(--panel-raised);
  color: var(--text);
}

@media (max-width: 30rem) {
  .specs { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .specs dt { padding-bottom: 0; }
  .specs dd { padding-top: 4px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
  .specs dd:last-child { padding-bottom: 12px; border-bottom: 0; }
}

/* The FAQ is open by default: content a crawler has to click to find is
   content it may not quote at all. */
.qa {
  display: grid;
  gap: 24px;
  margin: 0;
}

.qa > div { display: grid; gap: 8px; max-width: 44rem; }

.qa h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--text);
}

.qa p { margin: 0; color: var(--text-dim); }

/* The two links that belong at the end of a product page. */
.also { display: grid; gap: 8px; margin: 0; }
.also p { margin: 0; font-size: 14px; color: var(--text-dim); }

/* ---------- buttons (§14) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;              /* hit area (§8), drawn height is 40 (primary) */
  min-width: 72px;
  padding: 0 24px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--panel-raised);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.btn:hover { background: var(--well-lift); border-color: var(--accent-dim); color: var(--text); }
.btn:active { background: var(--well); }

/* Primary: one per view — ghost fill, accent ink. */
.btn-primary {
  background: var(--accent-ghost);
  border-color: var(--accent-dim);
  color: var(--accent);
}
.btn-primary:hover {
  background: var(--azure-ghost);
  border-color: var(--azure);
  color: var(--accent);
}
.btn-primary:active { background: var(--well); }

/* The download button on a page whose product has not shipped: present, so the
   view keeps its shape, and unmistakably not clickable. */
.btn:disabled,
.btn:disabled:hover,
.btn:disabled:active {
  background: var(--panel);
  border-color: var(--border);
  color: var(--text-disabled);
  cursor: default;
}

/* ---------- footer ---------- */

.site-footer {
  margin-top: auto;              /* sticky footer */
  border-top: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-dim);
  font-size: 14px;
}

.site-footer .wrap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 24px;
}

.site-footer p { margin: 0; }

.foot-note { color: var(--text-faint); }

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

/* Entrance motion is opt-in and never gates visibility: a t=0 screenshot must
   show the whole page (§23). */
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.hero.animate > * { animation: rise var(--dur-enter) var(--ease) both; }
.hero.animate > *:nth-child(2) { animation-delay: 0.08s; }
.hero.animate > *:nth-child(3) { animation-delay: 0.18s; }
.hero.animate > *:nth-child(4) { animation-delay: 0.26s; }
.hero.animate > *:nth-child(5) { animation-delay: 0.34s; }
.hero.animate > *:nth-child(6) { animation-delay: 0.42s; }

@media (prefers-reduced-motion: reduce) {
  .hero.animate > * { animation: none; }
  .btn { transition: none; }
}