/*
 * Meridian web companion — the whole stylesheet.
 *
 * Every value here comes from the "Handoff spec" cards at the bottom of the
 * 2026-09-12 Claude Design bundle (`Meridian Companion.dc.html`). The design is
 * drawn mobile-first at 390 and desktop at 1440 with a single breakpoint at
 * 768px, so that is exactly how this file is ordered: base rules are the mobile
 * drawing, and one `min-width: 768px` block at the bottom carries the desktop
 * one. Do not add a second breakpoint without a design decision behind it.
 *
 * The four error colours (--danger, --warning and their fills) are marked in
 * the handoff as "added for the error states — not in the TV ramp". They are
 * used here because the /pair invalid and offline states are undrawable
 * without them; if the TV ramp gains its own, these follow it.
 */

:root {
  /* Colour — handoff "Color" card */
  --ground: #0d0c0b;
  --panel: #171614;
  --raised: #1f1d1a;
  --border: #2a2622;
  --text: #f2ede6;
  --text-2: #a7a196;
  --text-3: #6f6a62;
  --accent: #00c3cb;
  --accent-ink: #05201f;
  --accent-tint: #0e3234;
  --accent-line: rgba(0, 195, 203, 0.45);
  --accent-text: #7fd8dc;
  --danger: #e0654f;
  --danger-fill: #1c1513;
  --danger-border: #3a241e;
  --warning: #e8a13a;
  --warning-line: #4a3f2b;

  /* Type */
  --font-display: "Manrope", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;

  /* Radius — handoff "Radius · geometry" card */
  --r-pill: 999px;
  --r-panel: 26px;
  --r-card: 20px;
  --r-field: 18px;

  /* Geometry */
  --gutter: 20px;
  --section-y: 36px;
  --stack: 22px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* iOS zooms a field whose text is under 16px on focus. The handoff pins inputs
   at 16px for exactly this reason — do not shrink them to fit a layout. */
input, textarea, select, button { font: inherit; color: inherit; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: #5ad9de; }
::selection { background: rgba(0, 195, 203, 0.28); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; }
p { margin: 0; text-wrap: pretty; }

.u-muted { color: var(--text-2); }
.u-hidden { display: none !important; }
.u-grow { flex: 1; }

/* Screen-reader-only: announces state changes that are otherwise purely visual. */
.u-sr {
  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; border: 0;
}

/* ---------------------------------------------------------------- wordmark */

.brand { display: flex; align-items: center; gap: 8px; }
.brand__dot {
  width: 8px; height: 8px; border-radius: var(--r-pill);
  background: var(--accent);
  box-shadow: 0 0 10px rgba(0, 195, 203, 0.6);
  flex: none;
}
.brand__dot--warning { background: var(--warning); box-shadow: none; }
.brand__dot--off { background: var(--text-3); box-shadow: none; }
.brand__mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--text);
}

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

.site-header {
  height: 60px;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-header__nav { display: flex; align-items: center; gap: 20px; font-size: 13px; }
.site-header__nav a { color: var(--text-2); }
.site-header__nav a[aria-current="page"] { color: var(--text); }
.site-header__status { font-size: 12px; color: var(--text-2); letter-spacing: 0.04em; }

/* The header's download pill: a neutral outline on mobile where it is the only
   nav item, an accent outline on desktop where it sits after three links. */
.btn--download {
  height: 36px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
}
.btn--download:hover { border-color: #3a3530; color: var(--text); }

/* Shown only above the 768px breakpoint. */
.u-desktop-only { display: none; }

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  padding: 0 24px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16.5px;
  cursor: pointer;
  background: none;
  text-align: center;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn--block { display: flex; width: 100%; }
.btn--tall { height: 56px; font-size: 17px; }

.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: #22d2d9; }
.btn--primary:active { background: #00aab1; }

.btn--secondary { border-color: var(--border); color: var(--text); }
.btn--secondary:hover { border-color: #3a3530; background: var(--panel); }

.btn--outline-accent { border-color: var(--accent); color: var(--accent); }
.btn--outline-accent:hover { background: rgba(0, 195, 203, 0.08); }

/* "sending": the action is alive but not pressable. */
.btn--busy {
  background: var(--accent-tint);
  border-color: var(--accent-line);
  color: var(--accent-text);
  cursor: default;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--raised);
  border-color: var(--border);
  color: var(--text-3);
  cursor: not-allowed;
}
.btn--busy:disabled { background: var(--accent-tint); border-color: var(--accent-line); color: var(--accent-text); }

.spinner {
  width: 14px; height: 14px; flex: none;
  border-radius: var(--r-pill);
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  animation: spin 720ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2.4s; }
}

/* ------------------------------------------------------------------ fields */

.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font-size: 12.5px; color: var(--text-2); }
.field__hint { font-size: 12px; line-height: 1.5; color: var(--text-2); }

.input {
  height: 52px;
  width: 100%;
  border-radius: var(--r-field);
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 0 16px;
  font-size: 16px;
  color: var(--text);
  outline: none;
}
.input::placeholder { color: var(--text-3); }
.input:focus { border-color: var(--accent); }
.input:disabled { cursor: not-allowed; }

.input--code { font-size: 18px; letter-spacing: 0.22em; }

.field--invalid .input { background: var(--danger-fill); border-color: var(--danger); }

.field__error {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--danger);
}
.field__error svg { flex: none; margin-top: 2px; }

/* A reveal toggle sits inside the 52px field as a 38px pill. */
.field--reveal { position: relative; }
.field--reveal .input { padding-right: 96px; }
.reveal {
  position: absolute;
  right: 8px;
  top: 7px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--raised);
  border: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-2);
  cursor: pointer;
}
.reveal:hover { color: var(--text); }
.field--reveal .field__label + * { position: relative; }

/* --------------------------------------------------------------- code chip */

.code-chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  background: var(--raised);
  border: 1px solid var(--border);
}
.code-chip__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0.22em;
  color: var(--text);
}
.code-chip__state {
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.code-chip--expired { border-style: dashed; border-color: var(--warning-line); }
.code-chip--expired .code-chip__value { color: var(--text-3); text-decoration: line-through; }
.code-chip--expired .code-chip__state { color: var(--warning); }

/* --------------------------------------------------------- segmented tabs */

.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--panel);
  border: 1px solid var(--border);
}
.tab {
  flex: 1;
  text-align: center;
  padding: 10px 6px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: none;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
}
.tab[aria-selected="true"] {
  background: var(--raised);
  border-color: var(--accent-line);
  font-weight: 500;
  color: var(--text);
}
.tab:disabled { cursor: not-allowed; }
/* The handoff shortens the labels below 768px. */
.tab__long { display: none; }

/* ------------------------------------------------------------- trust line */

.trust {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-2);
}
.trust svg { flex: none; margin-top: 2px; }

/* --------------------------------------------------------------- /pair page */

.pair {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
}
.pair__banner {
  padding: 14px var(--gutter);
  background: var(--danger-fill);
  border-bottom: 1px solid var(--danger-border);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text);
}
.pair__banner svg { flex: none; }

.pair__body {
  flex: 1;
  padding: 22px var(--gutter) 0;
  display: flex;
  flex-direction: column;
  gap: var(--stack);
}
.pair__head { display: flex; align-items: center; justify-content: space-between; }
.pair__intro { display: flex; flex-direction: column; gap: 12px; }
.pair__intro h1 { font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; }
.pair__intro p { font-size: 14px; line-height: 1.55; color: var(--text-2); }
.pair__codeblock { display: flex; flex-direction: column; gap: 10px; }
.pair__codeblock-label { font-size: 12.5px; color: var(--text-2); }
.pair__fields { display: flex; flex-direction: column; gap: 14px; }

.pair__action {
  padding: 16px var(--gutter) 26px;
  padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: var(--ground);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pair__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-2);
}
.pair__note { text-align: center; font-size: 12px; color: var(--text-2); }
.pair__retry-note { font-size: 12.5px; line-height: 1.55; color: var(--text-2); }

/* The form dims but stays legible while a hand-off is in flight or the
   connection is down, because the user's typing must remain readable. */
.pair__form[data-dim="sending"] { opacity: 0.55; }
.pair__form[data-dim="offline"] { opacity: 0.6; }

/* sent / expired replace the form and centre in the remaining height. */
.pair__panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  padding: 0 24px;
}
.pair__panel h1 { font-size: 30px; line-height: 1.15; letter-spacing: -0.01em; }
.pair__panel p { font-size: 15px; line-height: 1.6; color: var(--text-2); max-width: 310px; }
.pair__panel--expired h1 { font-size: 27px; line-height: 1.2; }

.disc {
  width: 76px; height: 76px;
  border-radius: var(--r-pill);
  background: var(--accent-tint);
  border: 1px solid rgba(0, 195, 203, 0.5);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 44px rgba(0, 195, 203, 0.18);
}

.info-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 18px;
  border-radius: var(--r-card);
  background: var(--panel);
  border: 1px solid var(--border);
  width: 100%;
}
.info-row__label { font-size: 12px; color: var(--text-2); }
.info-row__value { font-size: 14px; color: var(--text); }


/* ---------------------------------------------------- /pair composition */

/* Mobile draws the brand row inline in the body; desktop draws a real top bar.
   Both exist in the DOM and one is display:none, which also removes it from the
   accessibility tree — so a screen reader never hears the wordmark twice. */
.pair__topbar { display: none; }
.pair__card { display: contents; }
.pair__form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--stack);
}
.pair__cardhead { display: flex; flex-direction: column; gap: var(--stack); }
.pair__trust--desktop { display: none; }

/* The action is pinned to the bottom of the viewport and the form scrolls
   under it, which is what keeps the Xtream tab's three fields reachable
   without the CTA leaving the screen. */
.pair__action {
  position: sticky;
  bottom: 0;
  margin: 0 calc(var(--gutter) * -1);
}
.pair__panel .pair__action { position: static; margin: 0; }

.field__control { position: relative; }
.u-strong { color: var(--text); }

/* Only the selected tab's fields are in the document flow. */
.pair[data-kind="m3u"] #field-server,
.pair[data-kind="m3u"] #field-user,
.pair[data-kind="m3u"] #field-pass,
.pair[data-kind="xtream"] #field-m3u,
.pair[data-kind="local"] #field-m3u,
.pair[data-kind="local"] #field-user,
.pair[data-kind="local"] #field-pass { display: none; }

/* --------------------------------------------------------- landing / legal */

.section {
  padding: var(--section-y) var(--gutter);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.section:first-of-type { border-top: 0; }
.eyebrow {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
}
.pill-eyebrow {
  align-self: flex-start;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(0, 195, 203, 0.4);
  border-radius: var(--r-pill);
  padding: 5px 12px;
}

.hero {
  padding: var(--section-y) var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: radial-gradient(120% 60% at 12% 0%, rgba(0, 195, 203, 0.1), rgba(0, 195, 203, 0));
}
.hero h1 {
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero p { font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.hero__actions { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }

.section h2 { font-size: 27px; line-height: 1.2; letter-spacing: -0.01em; }
.section p { font-size: 15px; line-height: 1.65; color: var(--text-2); }

.steps { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; margin: 0; padding-left: 0; list-style: none; }
.step { display: flex; gap: 12px; align-items: baseline; }
.step__n { font-family: var(--font-display); font-size: 13px; color: var(--accent); width: 18px; flex: none; }
.step__label { font-size: 14.5px; color: var(--text); }

.cards { display: flex; flex-direction: column; gap: 12px; }
.card {
  padding: 20px;
  border-radius: var(--r-card);
  background: var(--panel);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card h3 { font-size: 18px; line-height: 1.25; }
.card p { font-size: 14px; line-height: 1.6; color: var(--text-2); }

.closer {
  padding: 40px var(--gutter);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: radial-gradient(120% 70% at 80% 100%, rgba(0, 195, 203, 0.1), rgba(0, 195, 203, 0));
}
.closer h2 { font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; }
.closer p { font-size: 14.5px; line-height: 1.6; color: var(--text-2); }

.site-footer {
  padding: 22px var(--gutter) 28px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.site-footer__links { display: flex; gap: 20px; font-size: 13px; }
.site-footer__links a { color: var(--text-2); }
.site-footer__disclaimer { font-size: 11.5px; line-height: 1.6; color: var(--text-3); }

/* Abstract placeholder artwork — no logo, no still, no programming.
   Compliance constraints 4 and 5 forbid anything else here. */
.artwork {
  margin-top: 16px;
  height: 210px;
  border-radius: var(--r-card);
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
}
.artwork__row { display: flex; gap: 10px; }
.artwork__bar { height: 8px; border-radius: var(--r-pill); background: #2f2b26; }
.artwork__bar--b { background: #242019; }
.artwork__bar--c { background: #201d19; }
.artwork__tile {
  flex: 1;
  height: 98px;
  border-radius: 14px;
  background: linear-gradient(160deg, #242019, #1a1815);
  border: 1px solid var(--border);
}
.artwork__tile--lit {
  background: linear-gradient(160deg, #1f1d1a, #171614);
  border-color: rgba(0, 195, 203, 0.35);
}
.artwork__lines { display: flex; gap: 8px; flex-wrap: wrap; }
.artwork__lines .artwork__bar { height: 7px; }
.artwork__label {
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* The keyboard-grid figure behind "typing a URL with a D-pad is miserable". */
.keygrid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  padding: 12px;
  border-radius: var(--r-field);
  background: var(--panel);
  border: 1px solid var(--border);
}
.keygrid span { height: 14px; border-radius: 5px; background: #242019; }
.keygrid span.is-lit { background: var(--raised); border: 1px solid rgba(0, 195, 203, 0.5); }
.keygrid span.is-wide { grid-column: span 10; background: #201d19; }

/* ------------------------------------------------------------------- legal */

.legal { padding: 32px var(--gutter) 40px; display: flex; flex-direction: column; gap: 14px; }
.legal h1 { font-size: 32px; line-height: 1.12; letter-spacing: -0.018em; }
.legal h2 { font-size: 19px; margin: 22px 0 0; color: var(--text); }
.legal p { font-size: 15px; line-height: 1.7; color: var(--text-2); }
.legal__date { font-size: 13px; color: var(--text-3); }
.legal__lede { margin-top: 6px; }
.legal__index { display: none; }

/* ================================================================ desktop */

@media (min-width: 768px) {
  :root {
    --gutter: 64px;
    --section-y: 80px;
  }

  .site-header { height: 72px; }
  .u-desktop-only { display: revert; }
  .artwork__row .u-desktop-only { display: block; }
  .btn--download {
    height: 40px;
    padding: 0 20px;
    border-color: var(--accent);
    font-size: 14px;
    font-weight: 500;
    color: var(--accent);
  }
  .btn--download:hover { border-color: var(--accent); background: rgba(0, 195, 203, 0.08); }
  .site-header__nav { gap: 32px; font-size: 14px; }
  .brand__dot { width: 9px; height: 9px; }
  .brand__mark { font-size: 14px; }

  .tab__short { display: none; }
  .tab__long { display: inline; }
  .tab { padding: 11px 8px; font-size: 14px; }

  /* /pair: a centred 560px panel, action in flow rather than anchored. */
  .pair {
    position: relative;
    overflow-x: clip;
  }
  .pair::before {
    content: "";
    position: absolute;
    top: -220px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 520px;
    border-radius: var(--r-pill);
    background: radial-gradient(closest-side, rgba(0, 195, 203, 0.14), rgba(0, 195, 203, 0));
    pointer-events: none;
  }
  .pair__body {
    align-items: center;
    justify-content: center;
    padding: 48px var(--gutter);
    position: relative;
  }
  .pair__card {
    width: 560px;
    max-width: 100%;
    padding: 36px;
    border-radius: var(--r-panel);
    background: var(--panel);
    border: 1px solid var(--border);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 26px;
  }
  /* Inside the panel the fill inverts: fields drop to the page ground. */
  .pair__card .input,
  .pair__card .tabs { background: var(--ground); }
  .pair__card .field--invalid .input { background: var(--danger-fill); }
  .pair__card .field__label { font-size: 13px; }
  .pair__card .field__hint { font-size: 12.5px; }
  .pair__intro h1 { font-size: 30px; }
  .pair__intro p { font-size: 15px; line-height: 1.6; max-width: 330px; }
  .pair__head--mobile { display: none; }

  /* Header row of the desktop card: copy left, code chip right. */
  .pair__cardhead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
  }
  .pair__codeblock {
    flex: none;
    align-items: flex-end;
    gap: 8px;
  }
  .pair__codeblock-label { font-size: 12px; }
  .code-chip { padding: 10px 18px; }
  .code-chip__value { font-size: 22px; letter-spacing: 0.2em; }

  /* The action rejoins the flow: rule, then trust line beside the button. */
  .pair__action {
    padding: 0;
    padding-bottom: 0;
    border-top: 0;
    background: none;
    gap: 20px;
  }
  .pair__action::before {
    content: "";
    display: block;
    height: 1px;
    background: linear-gradient(
      90deg,
      rgba(42, 38, 34, 0),
      var(--border) 48px,
      var(--border) calc(100% - 48px),
      rgba(42, 38, 34, 0)
    );
  }
  .pair__actionrow {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .pair__actionrow .trust { flex: 1; font-size: 12.5px; }
  .pair__actionrow .btn { flex: none; width: auto; padding: 0 34px; }
  .pair__topbar { display: flex; }
  .pair__trust--mobile { display: none; }
  .pair__trust--desktop { display: flex; }
  .pair__form { flex: none; gap: 26px; }
  .pair__cardhead { flex-direction: row; }
  .pair__action { position: static; margin: 0; }
  .pair__form > .u-grow { display: none; }
  .pair__panel { padding: 0; align-items: flex-start; }
  .pair__panel p { max-width: 420px; }

  /* Landing */
  .hero {
    padding: 88px var(--gutter) 80px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
    background: radial-gradient(70% 90% at 10% 0%, rgba(0, 195, 203, 0.1), rgba(0, 195, 203, 0));
  }
  .hero__copy { display: flex; flex-direction: column; gap: 22px; }
  .hero h1 { font-size: 62px; line-height: 1.04; letter-spacing: -0.025em; }
  .hero p { font-size: 18px; max-width: 520px; }
  .hero__actions { flex-direction: row; gap: 12px; padding-top: 8px; }
  .hero__actions .btn { height: 56px; font-size: 17px; padding: 0 30px; }
  .pill-eyebrow { font-size: 12px; letter-spacing: 0.09em; padding: 6px 14px; }

  .artwork { margin-top: 0; height: 420px; border-radius: var(--r-panel); padding: 24px; gap: 18px; }
  .artwork__row { gap: 14px; }
  .artwork__tile { height: 200px; border-radius: 18px; }
  .artwork__tile--lit { flex: 1.3; box-shadow: 0 0 44px rgba(0, 195, 203, 0.1); }
  .artwork__tile--narrow { flex: 0.7; }
  .artwork__bar { height: 10px; }
  .artwork__lines { flex-direction: column; gap: 10px; padding-top: 4px; }
  .artwork__lines .artwork__bar { height: 9px; }
  .artwork__label { right: 18px; bottom: 14px; font-size: 11px; }

  .section--problem {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 72px;
    align-items: center;
  }
  .section--problem .section__copy { display: flex; flex-direction: column; gap: 20px; }
  .section h2 { font-size: 42px; line-height: 1.12; letter-spacing: -0.018em; }
  .section p { font-size: 17px; max-width: 520px; }
  .eyebrow { font-size: 12px; }
  .steps { flex-direction: row; gap: 40px; padding-top: 12px; }
  .step { flex-direction: column; gap: 6px; }
  .step__n { width: auto; }
  .step__label { font-size: 15px; }

  .keygrid {
    grid-template-columns: repeat(12, 1fr);
    gap: 6px;
    padding: 24px;
    border-radius: var(--r-panel);
  }
  .keygrid span { height: 26px; border-radius: 7px; }
  .keygrid span.is-wide { grid-column: span 12; }

  .section--features { gap: 32px; }
  .section--features .section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 40px;
  }
  .section--features h2 { font-size: 38px; line-height: 1.15; }
  .section--features .section__head p { font-size: 15px; max-width: 420px; }
  .cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .card { padding: 28px; gap: 10px; }
  .card h3 { font-size: 19px; }
  .card p { font-size: 14.5px; }

  .closer {
    padding: 96px var(--gutter);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 56px;
    background: radial-gradient(60% 120% at 88% 50%, rgba(0, 195, 203, 0.11), rgba(0, 195, 203, 0));
  }
  .closer__copy { display: flex; flex-direction: column; gap: 14px; }
  .closer h2 { font-size: 44px; line-height: 1.1; letter-spacing: -0.02em; }
  .closer p { font-size: 16.5px; }
  .closer .btn { flex: none; height: 60px; padding: 0 36px; font-size: 18px; }

  .site-footer {
    padding: 36px var(--gutter) 44px;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: space-between;
    gap: 56px;
  }
  .site-footer__links { gap: 28px; font-size: 13.5px; }
  .site-footer__disclaimer { font-size: 12.5px; line-height: 1.65; max-width: 620px; }

  /* Legal: a 240px sticky index beside a 680px measure. */
  .legal {
    padding: 72px var(--gutter) 88px;
    display: grid;
    grid-template-columns: 240px minmax(0, 680px);
    gap: 80px;
    align-items: start;
  }
  .legal__index {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: sticky;
    top: 32px;
  }
  .legal__index-title {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-2);
    padding-bottom: 6px;
  }
  .legal__index a { font-size: 14px; color: var(--text-2); }
  .legal__index a:first-of-type { color: var(--accent); }
  .legal__body { display: flex; flex-direction: column; gap: 16px; }
  .legal h1 { font-size: 48px; line-height: 1.08; letter-spacing: -0.022em; }
  .legal__date { font-size: 13.5px; }
  .legal__lede { margin-top: 8px; font-size: 17px; line-height: 1.75; }
  .legal h2 { font-size: 22px; margin: 28px 0 0; }
  .legal p { font-size: 16.5px; line-height: 1.75; }
}