/* ==========================================================================
   Chain website styles

   How this file is organised:
     1. Fonts        load the three typefaces from /fonts
     2. Tokens       every colour, font and size in one place (change them here)
     3. Base         defaults for the whole page
     4. Building blocks  things used in many places: buttons, LCD screens, tags
     5. Sections     one block per section of index.html, in page order
     6. Small screens   layout changes for tablets and phones

   A rule looks like:   selector { property: value; }
   ".hero" means "anything with class="hero" in the HTML".
   "var(--ink)" means "use the value of the --ink token defined below".
   ========================================================================== */


/* 1. FONTS ---------------------------------------------------------------- */
/* The files live in /fonts. All three typefaces are under the SIL Open Font
   Licence, which allows them to be served from your own site. */

@font-face {
  font-family: "VT323";
  src: url("../fonts/VT323-Regular.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Share Tech Mono";
  src: url("../fonts/ShareTechMono-Regular.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}


/* 2. TOKENS --------------------------------------------------------------- */
/* Layout concept: a paper page with white bezels around pale LCD screens,
   tinted by role (source amber, effect grey green, output lilac), the same
   system as the app. Values come from the app's tokens.json. */

:root {
  /* Page */
  --paper: #FAFAF7;
  --frame: #FFFFFF;
  --ink: #16141D;
  --body-text: #3A3842;
  --muted: #67646F;
  --rule: #E3E1DA;
  --grid-dot: #DAD7CF;

  /* The three screen tints, each with its ink, unlit ghost and label colour */
  --source: #F3C766;  --source-ink: #3A2408;  --source-ghost: #DFB352;  --source-label: #6B4A12;
  --effect: #DCE0D3;  --effect-ink: #1E2320;  --effect-ghost: #C6CBBB;  --effect-label: #4C5249;
  --output: #DCD5F3;  --output-ink: #22183F;  --output-ghost: #C6BCE6;  --output-label: #4E4373;

  /* Accents (signal and state only, as in the app) */
  --orange: #F25F1C;
  --orange-text: #B9420B;
  --purple: #6A3FD4;
  --green: #1F9D57;
  --purple-on-dark: #8F6BEA;
  --green-on-dark: #2FBF70;
  --footer-muted: #9A97A3;

  /* Type */
  --font-display: "VT323", "Share Tech Mono", ui-monospace, monospace;
  --font-label: "Share Tech Mono", ui-monospace, "SF Mono", monospace;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Sizes. clamp(smallest, preferred, largest) scales with the window width. */
  --size-hero: clamp(56px, 8.6vw, 124px);
  --size-h2: clamp(46px, 5vw, 72px);
  --size-lead: clamp(16px, 1.4vw, 19px);
  --page-width: 1312px;
  --section-gap: clamp(72px, 9vw, 120px);

  /* This site is deliberately light only: the paper and LCD look is the
     product's identity. color-scheme tells the browser to draw form fields
     and scrollbars to match. */
  color-scheme: light;
}


/* 3. BASE ----------------------------------------------------------------- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Section links land below the sticky 72px nav, not under it */
[id] { scroll-margin-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* .wrap keeps content to a readable width and gives every section the same
   side gutter. The max() keeps clear of phone notches in landscape. */
.wrap {
  max-width: calc(var(--page-width) + 128px);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px), 4.4vw);
  padding-right: max(16px, env(safe-area-inset-right, 0px), 4.4vw);
}
@media (min-width: 1440px) {
  .wrap { padding-left: 64px; padding-right: 64px; }
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* A visible outline when someone moves through the page with the Tab key */
:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 4px; }

/* Headings are typed in sentence case in the HTML and shown in capitals
   here, so screen readers read words instead of spelling out letters */
h1, h2, h3 {
  margin: 0;
  text-transform: uppercase;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.85;
  text-wrap: balance;
}
h2 { font-size: var(--size-h2); }
p { margin: 0; }

.section { padding-block: var(--section-gap) 0; }

/* Heading on the left, a short paragraph on the right */
.section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 40px;
  margin-bottom: 36px;
}
.section-head p {
  max-width: 470px;
  color: var(--body-text);
}

.label {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}


/* 4. BUILDING BLOCKS ------------------------------------------------------ */

/* Buttons: an ink key with amber text, and an outlined key */
.key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  padding: 13px 22px;
  border-radius: 7px;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--source);
  cursor: pointer;
  white-space: nowrap;
}
.key:hover { text-decoration: none; background: #2A2734; }
.key--outline { background: transparent; color: var(--ink); }
.key--outline:hover { background: var(--frame); }
.key--small { font-size: 21px; padding: 8px 14px; border-radius: 6px; }

/* An LCD tile: a white bezel (.tile) around a tinted screen (.screen).
   Add one of the role classes to set the tint for everything inside. */
.tile {
  background: var(--frame);
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  padding: 7px;
  display: flex;
  flex-direction: column;
}
.screen {
  background: var(--screen);
  color: var(--screen-ink);
  border-radius: 6px;
  flex-grow: 1;
}
/* The role classes just swap four local tokens. Everything inside uses
   var(--screen), var(--screen-ink) and so on, so one class recolours it all. */
.is-source { --screen: var(--source); --screen-ink: var(--source-ink); --screen-ghost: var(--source-ghost); --screen-label: var(--source-label); }
.is-effect { --screen: var(--effect); --screen-ink: var(--effect-ink); --screen-ghost: var(--effect-ghost); --screen-label: var(--effect-label); }
.is-output { --screen: var(--output); --screen-ink: var(--output-ink); --screen-ghost: var(--output-ghost); --screen-label: var(--output-label); }

/* A small tinted tag such as SOURCE */
.tag {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1;
  padding: 4px 9px;
  border-radius: 4px;
  background: var(--screen);
  color: var(--screen-ink);
}

/* An outlined tag inside a screen, such as AU · VST3 */
.chip {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 20px;
  padding: 0 7px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  white-space: nowrap;
}

/* The CHAIN wordmark with its purple and green offset */
.wordmark {
  font-family: var(--font-display);
  line-height: 1;
  text-shadow: -2px 0 0 var(--purple), 2px 0 0 var(--green);
}


/* 5. SECTIONS ------------------------------------------------------------- */

/* --- Navigation bar --- */
.nav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: var(--frame);
  border-bottom: 1px solid var(--rule);
}
.nav .wrap {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.nav-brand { display: flex; align-items: center; gap: 12px; }
.nav-brand:hover { text-decoration: none; }
/* The app icon, design/redesign-kit/chain-icon.svg from the Chain repo.
   The favicon uses the 16 and 32 px variant instead (favicon.svg). */
.nav-icon { display: block; width: 34px; height: 34px; }
.nav-brand .wordmark { font-size: 34px; }
.nav-links, .nav-menu {
  display: flex;
  align-items: center;
  gap: 30px;
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--body-text);
  text-transform: uppercase;
}

/* The MENU button only appears on narrow screens (see section 6) */
.nav-toggle {
  display: none;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  background: var(--frame);
  color: var(--ink);
  padding: 8px 12px;
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.nav-toggle[aria-expanded="true"] { background: var(--ink); color: var(--paper); }

/* --- Hero --- */
.hero {
  padding-block: 72px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.hero-tags { display: flex; gap: 8px; }
.hero h1 { font-size: var(--size-hero); line-height: 0.82; }
.hero-lead { max-width: 640px; font-size: var(--size-lead); color: var(--body-text); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.hero-meta { color: var(--muted); }

/* --- Demo window (stands in for the video until it's recorded) --- */
.demo { padding-top: 48px; }
.window {
  background: var(--frame);
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(22, 20, 29, 0.35);
}
.window-bar {
  height: 56px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.window-dots { display: flex; gap: 6px; margin-right: 12px; }
.window-dots span { width: 11px; height: 11px; border-radius: 50%; background: var(--rule); }
.window-bar .wordmark { font-size: 24px; }
.window-preset { font-size: 13px; font-weight: 600; margin-right: 8px; white-space: nowrap; }
.lcd-block {
  height: 36px;
  padding: 3px 5px;
  border-radius: 6px;
  background: var(--effect);
  color: var(--effect-ink);
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-display);
  font-size: 19px;
  white-space: nowrap;
}
.lcd-block span { padding: 3px 7px; border-radius: 4px; }
.lcd-block .on { background: var(--effect-ink); color: var(--effect); }
.lcd-block--centre { margin-left: auto; }
.lcd-block--right { margin-left: auto; }

.window-canvas { position: relative; background: var(--paper); }
.window-canvas svg { display: block; width: 100%; height: auto; }
.window-canvas .patch-tall { display: none; }

.window-status {
  height: 40px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: 19px;
}
.window-message {
  flex-grow: 1;
  min-width: 0;
  height: 26px;
  padding: 0 10px;
  border-radius: 5px;
  background: var(--effect);
  color: var(--effect-ink);
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}
.window-readouts { display: flex; gap: 12px; white-space: nowrap; }

/* --- How it works --- */
.how {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  counter-reset: none;
}
.how-step .screen {
  padding: 18px 20px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: center;
  gap: 16px 40px;
}
.how-text { display: flex; flex-direction: column; gap: 8px; }
.how-step .use-top { justify-content: flex-start; gap: 14px; }
.how-step h3 { font-size: 30px; line-height: 0.95; }
.how-step p { font-size: 15px; max-width: 46ch; }
.how-step .flow { margin-top: 0; }
.how-step .flow > span[aria-hidden] { color: var(--screen-label); }
.how-audio { width: 100%; max-width: 320px; margin-top: 6px; }
.how-cta { margin-top: 28px; display: flex; justify-content: center; }

/* --- What it's for --- */
.uses {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.use .screen {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.use-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--screen-label);
}
.use-top .num { font-family: var(--font-display); font-size: 22px; }
.use-top .label { font-size: 11px; letter-spacing: 0.08em; }
/* The inverted readout: screen colours swapped */
.readout {
  background: var(--screen-ink);
  color: var(--screen);
  border-radius: 4px;
  padding: 12px 12px 10px;
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 0.9;
  white-space: nowrap;
  overflow: hidden;
}
.use h3 { font-size: 30px; line-height: 0.95; margin-top: 4px; }
.use p { font-size: 15px; }

/* --- Modules --- */
.roles {
  display: grid;
  grid-template-columns: 1.25fr 1fr 0.75fr;
  gap: 20px;
  align-items: start;
}
.role-head {
  background: var(--screen);
  color: var(--screen-ink);
  border-radius: 6px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.role-head h3 { font-size: 30px; line-height: 1; }
.role-head .label { color: var(--screen-label); letter-spacing: 0.06em; }
.modules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.modules--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.modules--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modules--1 { grid-template-columns: 1fr; }
.module { border-radius: 7px; padding: 4px; }
.module .screen {
  border-radius: 4px;
  padding: 9px 10px;
  min-height: 74px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.module strong { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 0.95; }
.module span { font-size: 13px; line-height: 1.4; color: var(--screen-label); }

/* --- In your DAW --- */
.daw {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.daw .tile { border-radius: 12px; padding: 8px; }
.daw .screen {
  border-radius: 7px;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.daw-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.daw-top .label { color: var(--screen-label); }
.daw h3 { font-size: clamp(38px, 3.6vw, 52px); }
.daw p { max-width: 520px; }
.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1;
}
.flow .step {
  padding: 8px 11px;
  border-radius: 5px;
  border: 1.5px solid var(--ink);
  background: var(--screen);
  color: var(--screen-ink);
  white-space: nowrap;
}
.flow .step.is-plain { background: var(--frame); color: var(--ink); }

/* --- Specs and small things --- */
.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
}
.two-col > div { min-width: 0; }
.two-col h2 { margin-bottom: 24px; }
.specs { margin: 0; border-top: 1.5px solid var(--ink); }
.specs div {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.specs dt { color: var(--muted); }
.specs dd { margin: 0; font-size: 15px; }
.confirm { color: var(--orange-text); font-family: var(--font-label); font-size: 12px; }

.small-things {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.small-things li {
  background: var(--frame);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.small-things h3 { font-size: 26px; line-height: 0.95; }
.small-things p { font-size: 14px; color: var(--body-text); }

/* --- Waitlist --- */
.waitlist .tile { border-radius: 16px; padding: 10px; }
.waitlist .screen {
  border-radius: 10px;
  padding: clamp(28px, 4.4vw, 56px) clamp(20px, 4.4vw, 64px);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px 56px;
  align-items: center;
}
.waitlist-copy { display: flex; flex-direction: column; gap: 16px; }
.waitlist-copy .label { color: var(--screen-label); }
.waitlist h2 { font-size: clamp(52px, 6vw, 88px); line-height: 0.82; }
.waitlist-copy p { font-size: 17px; max-width: 460px; }

.form { display: flex; flex-direction: column; gap: 12px; }
.form-row { display: flex; gap: 10px; }
.form input {
  flex-grow: 1;
  min-width: 0;
  height: 58px;
  padding: 0 16px;
  border: 1.5px solid var(--screen-ink);
  border-radius: 7px;
  background: var(--frame);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.form button {
  height: 58px;
  padding: 0 22px;
  border: 0;
  border-radius: 7px;
  background: var(--screen-ink);
  color: var(--screen);
  font-family: var(--font-display);
  font-size: 28px;
  cursor: pointer;
}
.form-note { font-family: var(--font-label); font-size: 12px; color: var(--screen-label); }
.form-status { font-family: var(--font-display); font-size: 22px; min-height: 24px; }

.meter { display: flex; gap: 2px; margin-top: 18px; }
.meter i { flex: 1; max-width: 10px; height: 22px; background: var(--screen-ink); }
.meter i.off { background: var(--screen-ghost); }
.meter-caption { font-family: var(--font-display); font-size: 22px; color: var(--screen-label); }

/* --- FAQ --- */
.faq-layout {
  display: grid;
  grid-template-columns: 0.7fr 2fr;
  gap: 32px 64px;
}
.faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
  border-top: 1.5px solid var(--ink);
}
/* <details> is a built-in HTML element that opens and closes on click */
.faq details { padding: 18px 0 20px; border-bottom: 1px solid var(--rule); min-width: 0; }
.faq summary {
  text-transform: uppercase;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 0.95;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--body-text); }

/* --- Footer --- */
.footer {
  margin-top: var(--section-gap);
  background: var(--ink);
  color: var(--paper);
}
.footer .wrap {
  padding-block: 40px 48px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
.footer .wordmark {
  font-size: 64px;
  line-height: 0.8;
  text-shadow: -3px 0 0 var(--purple-on-dark), 3px 0 0 var(--green-on-dark);
}
.footer .label { color: var(--footer-muted); margin-top: 10px; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--rule);
  text-transform: uppercase;
}


/* 6. SMALL SCREENS -------------------------------------------------------- */
/* @media blocks only apply when the window is narrower than the width given.
   Try dragging your browser window narrower to watch these kick in. */

@media (max-width: 1100px) {
  /* Section links fold into a MENU button. Without JavaScript the button
     can't work, so the links simply stay hidden as before. */
  .nav-menu { display: none; }
  .js .nav-toggle { display: inline-flex; }
  .js .nav.is-open .nav-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--frame);
    border-bottom: 1.5px solid var(--ink);
    padding: 8px max(16px, 4.4vw) 16px;
  }
  .js .nav.is-open .nav-menu a { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .nav-links { gap: 12px; }
  .how-step .screen { grid-template-columns: 1fr; }
  .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roles { grid-template-columns: 1fr; }
  .modules--2, .modules--1 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .waitlist .screen { grid-template-columns: 1fr; }
  .faq-layout { grid-template-columns: 1fr; }
  .lcd-block--right { display: none; }
}

@media (max-width: 760px) {
  .window-canvas .patch-wide { display: none; }   /* swap the wide patch... */
  .window-canvas .patch-tall { display: block; }  /* ...for the vertical one */
  .window-bar .lcd-block, .window-preset { display: none; }
  .window-readouts span:not(:last-child) { display: none; }

  .hero { padding-top: 40px; text-align: left; align-items: flex-start; }
  .hero-actions { justify-content: flex-start; width: 100%; }
  .hero-actions .key { flex: 1 1 100%; justify-content: center; }

  .uses, .daw, .two-col, .faq, .small-things { grid-template-columns: 1fr; }
  .two-col { gap: var(--section-gap); }
  .modules--3, .modules--2, .modules--1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .specs div { grid-template-columns: 1fr; gap: 2px; }
  .form-row { flex-direction: column; }
  .nav-icon { width: 30px; height: 30px; }
  .nav-brand { gap: 8px; }
  .wide-only { display: none; }
  .flow { font-size: 18px; gap: 6px; }
  .flow .step { padding: 6px 8px; }
}

/* Text inside the demo patch drawings (the SVGs in index.html) */
.svg-display { font-family: var(--font-display); }
.svg-label { font-family: var(--font-label); letter-spacing: 0.06em; }

/* Hides a label visually but keeps it for screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* "Skip to content": hidden until someone presses Tab on arriving */
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 30;
  padding: 10px 14px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.skip-link:focus { top: 12px; }
main:focus { outline: none; }

/* Where a module works: APP, PLUGIN or BOTH, at the foot of each card */
.module .where {
  order: 3;
  margin-top: auto;
  padding-top: 6px;
  align-self: flex-start;
  font-family: var(--font-label);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--screen-label);
}
.module .where::before { content: "▸ "; }

.footer .footer-legal { max-width: 70ch; margin-top: 14px; font-family: var(--font-body); font-size: 12px; line-height: 1.6; letter-spacing: 0; text-transform: none; }
.legal-cta { margin-top: 28px; }
.legal-cta .key:hover { text-decoration: none; }

/* Text pages such as privacy.html: one readable column */
.legal { max-width: calc(760px + 128px); padding-top: 56px; }
.legal h1 { font-size: clamp(48px, 6vw, 80px); }
.legal-meta { color: var(--muted); margin: 12px 0 32px; }
.legal h2 { font-size: 30px; margin: 40px 0 12px; }
.legal p, .legal li { color: var(--body-text); max-width: 68ch; }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 12px 0 0; padding-left: 1.2em; }
.legal li + li { margin-top: 6px; }
.legal ul + p { margin-top: 12px; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal .confirm { font-size: 13px; }

/* The demo video, once it exists (see the comment in index.html) */
.demo-video { display: block; width: 100%; height: auto; background: var(--paper); }