/* ---------------------------------------------------------------------------
   The landing page.

   Provenance: this is the Figma design (`broker/design/landing-figma.css`)
   turned into an actual stylesheet. Figma's "copy as CSS" emits a flat
   list of declarations under layer-name comments with no selectors at
   all, so it cannot be linked — it is a spec, not code. Every colour, size,
   radius and shadow below is lifted from that dump; the layout is rebuilt as
   flow + grid so it survives a window narrower than the 1280px artboard.

   This page is deliberately NOT style.css. style.css is the app's own palette
   (white, #ff9500) and still dresses privacy.html, terms.html and the unlisted
   page under /try/ — changing it would restyle the release-testing page days
   before a release. The landing page is the one surface that gets to be a
   poster; the rest of the site stays the product.
   ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
   Fonts, self-hosted.

   The design asks for Newsreader, Hanken Grotesk and JetBrains Mono. They are
   served from /fonts/ rather than fonts.googleapis.com because this page says
   "NO TELEMETRY • ZERO TRACKING PIXELS" out loud, and a Google Fonts <link>
   would hand every visitor's IP address to a third party in the same viewport
   as that sentence. Self-hosting is ~300KB and costs the claim nothing.

   Newsreader and Hanken Grotesk are variable files, so one download covers the
   whole weight range the design uses (300 for the hero, 400 for prose, 600 for
   emphasis). Latin and Latin-Extended only: the page is English, and "advertí"
   is the widest character it has to set. `swap` so the words are readable
   before the fonts land — the fallback stacks below are chosen to be close.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 600;
  font-display: swap;
  src: url("fonts/newsreader-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 600;
  font-display: swap;
  src: url("fonts/newsreader-var-latinext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 600;
  font-display: swap;
  src: url("fonts/newsreader-vari-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 600;
  font-display: swap;
  src: url("fonts/newsreader-vari-latinext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/hanken-grotesk-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/hanken-grotesk-400-latinext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/jetbrains-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/jetbrains-mono-400-latinext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------------
   Tokens, straight off the artboard.
   ------------------------------------------------------------------------ */
:root {
  /* Three browns, darkest first: panels sit on the page, the page sits on the
     shell. `--shell` is what shows above and below the content column. */
  --shell: #2d2622;
  --page: #221d1a;
  --panel: #1a1614;
  --panel-2: #2a221f;
  --grid: #423732;

  /* The two accents. Sky is the interface colour — every control, label and
     keycap. Vermilion appears exactly twice: under "a word" in the hero and
     under "advertí" in the pull quote, which are the same word doing the same
     job in two places. Spending it anywhere else would flatten that rhyme. */
  --sky: #87ceeb;
  --sky-dim: rgba(135, 206, 235, 0.1);
  --sky-line: rgba(135, 206, 235, 0.2);
  --vermilion: #ec7d3e;

  --ink: #f5f5f0;
  --body: #e7e5e1;
  --muted: #a3a3a3;
  --warm: #bdab9b;

  --hair: rgba(255, 255, 255, 0.08);
  --hair-2: rgba(255, 255, 255, 0.1);

  --serif: "Newsreader", ui-serif, "Iowan Old Style", Palatino, Georgia, serif;
  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI",
    system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* The artboard is 1280 wide with a 32px gutter, so 1216 is the CONTENT width
     — the gutter sits outside it. `--measure` is the outer box, which is why it
     is 1280 and not 1216: getting this wrong narrows every section by 64px and
     costs the hero its line break after the em dash. */
  --measure: 1280px;
  --gutter: clamp(1.25rem, 2.5vw, 2rem);

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--shell);
  color: var(--body);
  font: 400 16px/26px var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}

/* Keyboard focus is the one thing the artboard has nothing to say about, so it
   is specified here once and inherited by every control on the page. */
:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Anything that scrolls to an anchor clears the sticky masthead. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

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

/* The recurring 12px monospaced label: section eyebrows, corner stamps, keycaps,
   footnotes. It is the page's connective tissue — if it is uppercase, tracked
   and monospaced, it is one of these. */
.stamp {
  margin: 0;
  font: 400 12px/16px var(--mono);
  letter-spacing: 0.3px;
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
   Masthead. Sticky, because the download button is the point of the page and
   should never be more than a glance away.
   ------------------------------------------------------------------------ */
.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border-bottom: 1px solid var(--hair);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* No blur available means no translucency either — otherwise the hero scrolls
   through the bar and the buttons become unreadable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .masthead {
    background: var(--panel);
  }
}

.masthead .wrap {
  min-height: 65px;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: 0.75rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-right: auto;
  font: 400 italic 20px/1 var(--serif);
  color: var(--ink);
  text-decoration: none;
}

.brand img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

/* ---------------------------------------------------------------------------
   Buttons. Two only: `.btn` is the sky-filled call to action, `.btn.ghost` is
   the outlined companion. Both are monospaced and uppercase-tracked, so a
   button always reads as a mechanism rather than as prose.
   ------------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6875rem 1.25rem;
  border: 1px solid var(--sky);
  border-radius: 9999px;
  background: var(--sky);
  color: #12222b;
  font: 400 12px/16px var(--mono);
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 0 20px rgba(135, 206, 235, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 28px rgba(135, 206, 235, 0.45);
}

.btn:active {
  transform: translateY(0);
}

.btn.ghost {
  background: transparent;
  color: var(--body);
  border-color: var(--hair-2);
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0.3px;
  font-weight: 400;
}

.btn.ghost:hover {
  border-color: var(--sky);
  color: var(--sky);
  box-shadow: 0 0 20px var(--sky-dim);
}

/* ---------------------------------------------------------------------------
   The content column.

   `--page` over `--shell`, with the architectural grid the design calls a
   "Backdrop Accent" printed on top of it. The grid is two repeating gradients
   rather than an image: it costs no request, and at 0.35 opacity over 96px
   cells it reads as engineering paper without ever competing with the type.
   ------------------------------------------------------------------------ */
.page {
  position: relative;
  background: var(--page);
  padding-top: clamp(2.5rem, 6vw, 6rem);
  overflow: clip;
}

.page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 96px 96px;
  /* Fades out down the page so the grid frames the hero and then gets out of
     the way of the reading. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0, transparent 900px);
  mask-image: linear-gradient(to bottom, #000 0, transparent 900px);
}

.page > * {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------------------
   Ticker — the one-line status pill above the hero.
   ------------------------------------------------------------------------ */
.ticker {
  padding-block: 1rem 0.5rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.375rem 1rem;
  background: var(--sky-dim);
  border: 1px solid var(--sky-line);
  border-radius: 9999px;
  box-shadow: 0 0 20px var(--sky-dim);
  font: 600 12px/16px var(--mono);
  letter-spacing: 0.3px;
  color: var(--sky);
}

/* The live dot: a solid centre with a slow halo behind it. The halo is the only
   animation on the page that is not a hover, so it is the first thing Reduce
   Motion switches off. */
.badge .dot {
  position: relative;
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 9999px;
  background: var(--sky);
}

.badge .dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--sky);
  opacity: 0.75;
  animation: halo 2.4s ease-out infinite;
}

@keyframes halo {
  0% {
    transform: scale(1);
    opacity: 0.75;
  }
  70%,
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

/* ---------------------------------------------------------------------------
   Hero: the sentence, and the object.
   ------------------------------------------------------------------------ */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 3.5rem) clamp(3rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--hair);
}

/* 92px on the artboard, but it is the widest thing on the page — clamped so it
   scales with the window instead of forcing a horizontal scrollbar. The
   negative tracking is the artboard's -2.3px expressed as a ratio, so it holds
   at every size. */
.hero h1 {
  margin: 0;
  /* The artboard breaks after the em dash, in a 798px box. A browser sets this
     line wider than Figma does at the same size and tracking, so that break is
     not reachable without shrinking the type — and letting it fall naturally
     starts line two with a dangling em dash. `balance` composes the three lines
     evenly instead, which keeps the dash mid-line at every width. The cap is
     just a stop so the line never runs past a comfortable measure. */
  max-width: 880px;
  font: 300 clamp(2.75rem, 7.2vw, 5.75rem) / 1 var(--serif);
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}

/* The two words the whole app is about. Sky says "this is the interface",
   the vermilion rule underneath says "this is the word you grabbed" — the same
   mark the confirm panel draws under a captured word. */
.hero h1 em {
  font-style: italic;
  color: var(--sky);
  text-decoration: underline;
  text-decoration-color: var(--vermilion);
  text-decoration-thickness: 4px;
  text-underline-offset: 0.14em;
  text-decoration-skip-ink: none;
}

.hero p {
  margin: 1.75rem 0 0;
  max-width: 52ch;
  color: var(--body);
  font-size: 16px;
  line-height: 26px;
}

/* --- The exhibition plate ------------------------------------------------ */
/* The app icon shown as a museum object: four corner stamps, a caption, and a
   glow instead of a shadow. The same plate language is reused for the demo clip
   further down the page, which is why the corner stamps are their own class. */
.plate {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: 100%;
  max-width: 340px;
  margin: 0;
  padding: 2.5rem 1.5rem;
  background: var(--panel);
  border: 1px solid var(--hair-2);
  border-radius: 16px;
}

.plate .corner {
  position: absolute;
  font: 400 9px/14px var(--mono);
  letter-spacing: 0.4px;
  color: var(--warm);
  opacity: 0.7;
}

.plate .tl { top: 12px; left: 14px; }
.plate .tr { top: 12px; right: 14px; }
.plate .bl { bottom: 12px; left: 14px; }
.plate .br { bottom: 12px; right: 14px; }

.plate figcaption {
  position: absolute;
  bottom: 34px;
  left: 0;
  right: 0;
  text-align: center;
  font: 400 9px/14px var(--mono);
  letter-spacing: 1px;
  color: var(--warm);
}

/* 216px, where the still icon that used to sit here was 160. The clip carries
   its own checkerboard canvas and the icon tile fills 74% of that canvas, so
   216 is what puts the crab back at the size it has always been on this plate.
   Anything much larger stops clearing the figcaption underneath it. */
.plate .subject {
  position: relative;
  width: 216px;
  height: 216px;
  display: grid;
  place-items: center;
}

/* The glow the design calls "Mascot Glow Background" — sky, behind the object,
   soft enough that it never reads as a second shape. The object in front of it
   is now an opaque canvas rather than a rounded icon with transparent corners,
   so the only part of this that can still be seen is the halo past the canvas
   edge: hence the stop at 85% rather than 68%, which is what keeps a visible
   glow at the edge midpoints while the corners stay clean. */
.plate .subject::before {
  content: "";
  position: absolute;
  inset: -22%;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(135, 206, 235, 0.28), transparent 85%);
  filter: blur(14px);
}

/* Square on purpose — the checkerboard is the canvas the object is drawn on,
   and rounding it would crop the design. The float this element used to carry
   is gone with the still: the motion is inside the clip now, and bobbing the
   canvas as well made the artboard itself look adrift. */
.plate .subject video {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------------------
   Narrative strip — the pull quote, which is the demo clip's caption promoted
   to display size. The clip itself sits underneath it; see index.html.
   ------------------------------------------------------------------------ */
.strip {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(3rem, 7vw, 6.5rem);
}

/* The bordered eyebrow that opens a section. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  align-self: start;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--hair-2);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  font: 600 12px/16px var(--mono);
  letter-spacing: 1px;
  color: var(--warm);
  white-space: nowrap;
}

.strip blockquote {
  margin: 0;
  font: 400 italic clamp(1.375rem, 2.6vw, 1.875rem) / 1.25 var(--serif);
  font-variation-settings: "opsz" 30;
  color: var(--ink);
  text-wrap: pretty;
}

/* The word being grabbed, marked the same way the hero marks "a word". */
/* 16px on the artboard, against the card keycap's 12px. */
.strip blockquote kbd {
  font-size: 16px;
}

.strip blockquote i {
  text-decoration: underline;
  text-decoration-color: var(--vermilion);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
  text-decoration-skip-ink: none;
}

/* The keycap. Inline-block with a tightened line-height so it sits on the
   baseline of a 30px serif line without pushing the leading around. */
kbd {
  display: inline-block;
  padding: 0.0625rem 0.5rem;
  margin-inline: 0.15em;
  background: var(--sky-dim);
  border: 1px solid var(--sky-line);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  font: 400 12px/1.7 var(--mono);
  font-style: normal;
  letter-spacing: 0;
  color: var(--sky);
  vertical-align: 0.12em;
  white-space: nowrap;
}

/* --- The demo clip, framed as a second plate ----------------------------- */
/* NOT in the Figma artboard. The clip is the only place the site shows the
   gesture rather than describing it, and the quote above is literally its
   caption — so it is kept, dressed in the plate language the hero establishes.
   Deleting this rule and the <figure class="demo"> in index.html removes it
   without touching anything else. */
.demo {
  grid-column: 2;
  margin: 2.5rem 0 0;
  position: relative;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--hair-2);
  border-radius: 16px;
}

.demo video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: var(--panel);
}

.demo figcaption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.75rem 0.5rem;
  font: 400 9px/14px var(--mono);
  letter-spacing: 1px;
  color: var(--warm);
  opacity: 0.7;
}

/* ---------------------------------------------------------------------------
   Three-step mechanism.
   ------------------------------------------------------------------------ */
.steps {
  padding-block: 0 clamp(4rem, 8vw, 8rem);
}

.steps > header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

h2 {
  margin: 0;
  font: 400 clamp(1.75rem, 3.4vw, 2.25rem) / 1.11 var(--serif);
  font-variation-settings: "opsz" 36;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* A stamp with a small sky dot in front of it. */
.cue {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cue::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 9999px;
  background: var(--sky);
}

/* One panel, three cells, hairlines between them — the "Horizontal Editorial
   Index Sequence". `grid` rather than three boxes so the cards share a baseline
   grid: index pills line up, and so do the footnotes, whatever the copy does. */
.steps ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--panel);
  border-block: 1px solid var(--hair);
  border-radius: 20px;
}

.steps li {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 0.75rem;
  padding: 2rem;
  border-left: 1px solid var(--hair);
}

.steps li:first-child {
  border-left: 0;
}

.index {
  justify-self: start;
  padding: 0.3125rem 0.75rem;
  border: 1px solid var(--sky-line);
  border-radius: 6px;
  background: var(--sky-dim);
  font: 400 12px/16px var(--mono);
  letter-spacing: 0.3px;
  color: var(--sky);
}

.steps h3 {
  margin: 0;
  font: 400 italic clamp(1.25rem, 2vw, 1.5rem) / 1.33 var(--serif);
  font-variation-settings: "opsz" 24;
  color: var(--ink);
}

.steps p {
  margin: 0;
  font-size: 14px;
  line-height: 22.75px;
  color: var(--muted);
}

/* The bottom rail of each card: a hairline, then an icon and a claim. */
.steps footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hair);
  font: 400 12px/16px var(--mono);
  letter-spacing: 0.3px;
  color: var(--warm);
}

.steps footer span:first-child {
  font-size: 12px;
  line-height: 1;
}

/* ---------------------------------------------------------------------------
   Patronage.

   The one warm panel on the page: a vermilion-to-amber gradient with two
   blurred discs floating over it. It is the only section asking for money, and
   it is the only section that changes temperature — that is the whole reason
   the rest of the page stays cold.
   ------------------------------------------------------------------------ */
.patron {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  margin-bottom: clamp(3rem, 7vw, 6rem);
  padding: clamp(2rem, 4vw, 3rem);
  background: linear-gradient(180deg, #342e2d 0%, #3f2b21 77.4%, #361a0f 100%);
  border-radius: 16px;
  box-shadow: 0 0 49px var(--shell);
  /* Explicitly clip the filtered glow layers to the rounded panel; overflow
     alone can leave the top-right and bottom-left corners square in Safari. */
  overflow: hidden;
  clip-path: inset(0 round 16px);
}

.patron::before,
.patron::after {
  content: "";
  position: absolute;
  border-radius: 9999px;
  filter: blur(32px);
  z-index: -1;
}

/* 384px and 320px on the 1216px artboard. Capped as a share of the panel too,
   because at phone width a fixed 384px disc covers the whole card and washes
   out the heading it is supposed to sit behind. */
.patron::before {
  width: min(384px, 62%);
  aspect-ratio: 1;
  right: -8%;
  top: -18%;
  background: rgba(135, 206, 235, 0.41);
}

.patron::after {
  width: min(320px, 52%);
  aspect-ratio: 1;
  left: -8%;
  bottom: -18%;
  background: rgba(107, 122, 128, 0.32);
}

.patron h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  font-variation-settings: "opsz" 48;
}

.patron h2 em {
  display: block;
  font-style: italic;
  color: var(--sky);
}

.patron > div > p {
  margin: 1.5rem 0 0;
  max-width: 34rem;
  color: var(--body);
}

/* --- The console --------------------------------------------------------- */
.console {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--shell);
  border: 1px solid var(--sky);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.console header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--hair-2);
}

.console header .stamp:first-child {
  color: var(--sky);
  letter-spacing: 1px;
}

/* The tiers are links, not radio buttons: /donate is one Stripe payment link
   and the amount is typed on Stripe's own page, so a control that appeared to
   hold a chosen amount would be claiming something it cannot deliver. Every
   tile goes to the same place; the filled one is a suggestion, not a state. */
.tiers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.625rem;
  margin-bottom: 1rem;
}

.tier {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 0.75rem 0.25rem;
  border: 1px solid var(--hair-2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  font: 400 14px/20px var(--mono);
  color: var(--body);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.tier:hover {
  border-color: var(--sky);
  color: var(--sky);
  transform: translateY(-1px);
}

.tier.suggested {
  background: var(--sky);
  border-color: var(--sky);
  color: #12222b;
  box-shadow: 0 0 15px rgba(135, 206, 235, 0.4);
}

.tier.suggested:hover {
  color: #12222b;
}

/* The primary action, outlined rather than filled: the filled sky button on
   this page means "download", and it should keep meaning only that. */
.feed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 1rem;
  border: 2px solid var(--sky);
  border-radius: 8px;
  background: transparent;
  box-shadow: 0 0 20px var(--sky-dim);
  font: 700 12px/16px var(--mono);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--sky);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.feed:hover {
  background: var(--sky);
  color: #12222b;
}

.console > .stamp {
  margin-top: 1rem;
  text-align: center;
  line-height: 18px;
}

/* ---------------------------------------------------------------------------
   Creed — the closing statement and the second download.
   ------------------------------------------------------------------------ */
.creed {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  padding-block: clamp(2rem, 5vw, 4rem) clamp(4rem, 8vw, 7rem);
  text-align: center;
}

.creed .mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--hair-2);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--warm);
}

.creed blockquote {
  margin: 0;
  max-width: 22ch;
  font: 300 italic clamp(1.5rem, 3.2vw, 2.25rem) / 1.11 var(--serif);
  font-variation-settings: "opsz" 36;
  color: var(--ink);
  text-wrap: balance;
}

.creed .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 0.5rem;
}

/* ---------------------------------------------------------------------------
   Colophon. Sits on --shell, outside the content column, so the page ends on
   the same brown it started on.
   ------------------------------------------------------------------------ */
.colophon {
  border-top: 1px solid var(--hair);
}

.colophon .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding-block: 1.5rem;
  font: 400 12px/16px var(--mono);
  letter-spacing: 0.3px;
  color: var(--muted);
}

.colophon .who {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

/* The mascot chip: the design's one vermilion-tinted object, and the only place
   the warm accent appears outside the patronage panel. */
.colophon .chip {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 2px;
  background: rgba(249, 115, 22, 0.1);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.colophon .chip img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.colophon strong {
  font-weight: 400;
  color: var(--body);
}

.colophon nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.colophon a {
  text-decoration: none;
  color: var(--muted);
}

.colophon a:hover {
  color: var(--sky);
}

.colophon .sep {
  opacity: 0.4;
}

/* ---------------------------------------------------------------------------
   Narrower windows.

   The artboard is a fixed 1280. Three breakpoints undo the three places that
   assume it: the hero's two columns, the strip's label gutter, and the
   three-across card row.
   ------------------------------------------------------------------------ */
@media (max-width: 980px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }

  .plate {
    justify-self: center;
  }

  .steps ol {
    grid-template-columns: minmax(0, 1fr);
  }

  .steps li {
    border-left: 0;
    border-top: 1px solid var(--hair);
  }

  .steps li:first-child {
    border-top: 0;
  }

  .patron {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .demo {
    grid-column: 1;
  }

  .tiers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .masthead .brand {
    margin-right: 0;
  }
}

/* ---------------------------------------------------------------------------
   Reduce Motion.

   Everything that moves on this page is decoration: the live dot's halo and
   the lift on hover. Neither carries information, so under Reduce Motion they
   simply stop. The two clips are handled separately in demo.js, which turns the
   demo into a still with controls and holds the decorative hero on the crab.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .btn:hover,
  .tier:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   The claw pointer — verbatim from style.css, because it belongs to the brand
   rather than to a page. See broker/README.md, "The claw pointer". If one copy
   changes, change both.
   ------------------------------------------------------------------------ */
a,
button,
summary,
[role="button"] {
  cursor: url("claw-cursor.png") 1 7, pointer;
  cursor: -webkit-image-set(url("claw-cursor.png") 1x, url("claw-cursor-2x.png") 2x) 1 7,
    pointer;
  cursor: image-set(url("claw-cursor.png") 1x, url("claw-cursor-2x.png") 2x) 1 7, pointer;
}

/* ---------------------------------------------------------------------------
   In action — the use-case grid (FIG. C1–C6).

   Six specimen tiles, one per surface. The scenes are drawn in HTML/CSS
   rather than recorded: the words in them are real text a crawler and an AI
   answer can read, they weigh nothing, and they are stylised enough not to
   pass for a screenshot of the app or of anyone's player. The real recordings
   live on each /use/ page, where they prove the claim. Each tile's heading,
   sentence and link are the part search reads; the scene is aria-hidden.

   One shared 7s loop, staggered per tile: the claw arrives, the word lights
   up, the card rises, everything resets. `.case-grid.live` is set by demo.js
   when the grid scrolls into view, so six loops never run off-screen.
   ------------------------------------------------------------------------ */
.cases {
  padding-block: 0 clamp(4rem, 8vw, 8rem);
}

.cases > header {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-bottom: 1.25rem;
}

.cases > header > div {
  display: grid;
  justify-items: start;
  gap: 0.75rem;
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--panel);
  border-block: 1px solid var(--hair);
  border-radius: 20px;
}

.case {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.5rem;
  padding: 0.75rem 0.75rem 1.25rem;
  border-radius: 16px;
  transition: background 0.15s ease;
}

.case:has(a):hover {
  background: rgba(255, 255, 255, 0.025);
}

.case h3 {
  margin: 0.5rem 0.5rem 0;
  font: 400 italic 1.375rem/1.25 var(--serif);
  font-variation-settings: "opsz" 24;
  color: var(--ink);
}

/* The whole tile is the link target; the anchor sits on the heading so the
   link text is the surface's name. */
.case h3 a {
  text-decoration: none;
}

.case h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
}

.case h3 a:hover,
.case h3 a:focus-visible {
  color: var(--sky);
}

.case h3 .go {
  font: 400 12px/1 var(--mono);
  font-style: normal;
  color: var(--sky);
  margin-left: 0.375rem;
}

.case p {
  margin: 0 0.5rem;
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
}

/* --- The scene ----------------------------------------------------------- */
.scene {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--hair-2);
  border-radius: 12px;
  background: #110e0c;
  font-family: var(--sans);
}

.scene .corner {
  position: absolute;
  z-index: 3;
  font: 400 9px/14px var(--mono);
  letter-spacing: 0.4px;
  color: var(--warm);
  opacity: 0.7;
}

.scene .tl { top: 8px; left: 10px; }
.scene .tr { top: 8px; right: 10px; }

/* The line of text the word lives in, wherever the surface puts it. */
.scene .line {
  position: absolute;
  z-index: 1;
  font-size: clamp(12px, 1.25vw, 15px);
  line-height: 1.35;
  color: var(--ink);
}

/* The grabbed word: sky wash, then the vermilion rule — the confirm panel's
   own mark, and the hero's. */
.scene .w {
  border-radius: 3px;
  padding: 0 2px;
  margin: 0 -2px;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  text-decoration-skip-ink: none;
}

/* The claw: the site's own pointer image, travelling to the word. It lives
   inside the word's span, so it lands on the word whatever the layout does. */
.scene .w {
  position: relative;
}

.scene .claw {
  position: absolute;
  z-index: 4;
  left: 55%;
  top: 45%;
  width: 22px;
  height: 22px;
  background: url("claw-cursor-2x.png") center / contain no-repeat;
  opacity: 0;
}

/* The saved card that rises out of the grab. */
.scene .card {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 10%;
  display: grid;
  gap: 1px;
  min-width: 46%;
  padding: 0.4rem 0.75rem 0.5rem;
  background: rgba(26, 22, 20, 0.96);
  border: 1px solid rgba(245, 245, 240, 0.22);
  border-radius: 9px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  color: #f5f5f0;
  text-align: center;
  transform: translate(-50%, 18px);
  opacity: 0;
}

.scene .card b {
  font: 700 15px/1.25 "Literata", var(--serif);
}

.scene .card span {
  font: 400 11px/1.3 var(--sans);
  color: rgba(245, 245, 240, 0.65);
}

/* The freeze: a faint sky frame, which is what holding ⌥Space looks like. */
.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 2px solid var(--sky);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

.case-grid.live .scene::after { animation: freeze 7s var(--d, 0s) infinite; }
.case-grid.live .scene .claw  { animation: claw 7s var(--d, 0s) infinite; }
.case-grid.live .scene .w     { animation: word 7s var(--d, 0s) infinite; }
.case-grid.live .scene .card  { animation: rise 7s var(--d, 0s) infinite; }

@keyframes freeze {
  0%, 12% { opacity: 0; }
  16%, 46% { opacity: 0.55; }
  52%, 100% { opacity: 0; }
}

@keyframes claw {
  0%, 10% { opacity: 0; transform: translate(48px, 34px); }
  14% { opacity: 1; transform: translate(48px, 34px); }
  32%, 46% { opacity: 1; transform: translate(0, 0); }
  52%, 100% { opacity: 0; transform: translate(0, 0); }
}

@keyframes word {
  0%, 30% { background: transparent; text-decoration-color: transparent; }
  34%, 88% { background: rgba(135, 206, 235, 0.28); text-decoration-color: var(--vermilion); }
  94%, 100% { background: transparent; text-decoration-color: transparent; }
}

@keyframes rise {
  0%, 48% { opacity: 0; transform: translate(-50%, 18px); }
  56%, 88% { opacity: 1; transform: translate(-50%, 0); }
  94%, 100% { opacity: 0; transform: translate(-50%, -6px); }
}

/* Reduce Motion, or no JS: every scene shows its finished state — word marked,
   card out. Still a complete picture, never a blank tile. */
.case-grid:not(.live) .scene .w {
  background: rgba(135, 206, 235, 0.28);
  text-decoration-color: var(--vermilion);
}

.case-grid:not(.live) .scene .card {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* --- The six surfaces ---------------------------------------------------- */

/* C1 YouTube: a video frame with a progress bar and a subtitle. */
.s-video {
  background:
    radial-gradient(120% 90% at 70% 20%, #3a4a52 0%, transparent 60%),
    radial-gradient(90% 70% at 20% 80%, #4a3527 0%, transparent 65%),
    #1a1512;
}

.s-video .bar {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 7%;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
}

.s-video .bar::before {
  content: "";
  position: absolute;
  inset: 0 58% 0 0;
  border-radius: inherit;
  background: #e14b3b;
}

.s-video .line,
.s-stream .line {
  left: 50%;
  bottom: 16%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 0.15rem 0.5rem;
  background: rgba(0, 0, 0, 0.62);
  border-radius: 3px;
}

.s-video .card,
.s-stream .card {
  bottom: auto;
  top: 18%;
}

/* C2 Streaming: full bleed, letterboxed, a plain white subtitle. */
.s-stream {
  background:
    linear-gradient(#000 0 11%, transparent 11% 89%, #000 89%),
    radial-gradient(80% 70% at 30% 45%, #2c3b47 0%, transparent 70%),
    radial-gradient(60% 60% at 80% 60%, #3b2a33 0%, transparent 70%),
    #121014;
}

.s-stream .line {
  bottom: 15%;
  background: none;
  font-weight: 500;
  text-shadow: 0 1px 3px #000, 0 0 2px #000;
}

/* C3 PDFs: a page of a paper, set in the serif. */
.s-pdf {
  background: #2b2522;
}

.s-pdf .sheet {
  position: absolute;
  inset: 12% 18% -10%;
  padding: 10% 9%;
  background: #f3efe7;
  border-radius: 2px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

.s-pdf .sheet i {
  display: block;
  height: 5px;
  margin-bottom: 7px;
  border-radius: 2px;
  background: #d8d0c3;
}

.s-pdf .sheet i:nth-child(3) { width: 82%; }
.s-pdf .line {
  position: static;
  margin: 2px 0 9px;
  font: 400 clamp(12px, 1.2vw, 14px)/1.35 var(--serif);
  color: #2b2421;
}

/* C4 Webtoons: a panel and a speech bubble. */
.s-comic {
  background:
    linear-gradient(160deg, #f0e6d6 0%, #e3d2bd 100%);
}

.s-comic .bubble {
  position: absolute;
  top: 22%;
  left: 12%;
  padding: 0.6rem 0.9rem;
  background: #fff;
  border: 2px solid #221d1a;
  border-radius: 50% / 46%;
}

.s-comic .bubble::after {
  content: "";
  position: absolute;
  left: 28%;
  bottom: -12px;
  border: 7px solid transparent;
  border-top: 12px solid #221d1a;
  border-bottom: 0;
}

.s-comic .line {
  position: static;
  color: #221d1a;
  font-weight: 700;
  font-family: "Apple SD Gothic Neo", var(--sans);
}

.s-comic .figure {
  position: absolute;
  right: 10%;
  bottom: -8%;
  width: 30%;
  aspect-ratio: 120 / 170;
}

.s-comic .figure svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* C5 Discord-like chat: avatars and message rows. */
.s-chat {
  background: #1f1d24;
}

.s-chat .msg {
  position: absolute;
  left: 7%;
  right: 7%;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0 9px;
  align-items: start;
}

.s-chat .msg::before {
  content: "";
  grid-row: span 2;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--av, #6b7a80);
}

.s-chat .msg small {
  font: 600 10px/1.4 var(--sans);
  color: var(--nm, #a3a3a3);
}

.s-chat .m1 { top: 14%; --av: #5f6db0; --nm: #9fa9e8; }
.s-chat .m2 { top: 42%; --av: #b07a5f; --nm: #e8b99f; }
.s-chat .m1 i,
.s-chat .m1 i + i {
  display: block;
  height: 5px;
  margin-top: 6px;
  border-radius: 2px;
  background: #3a3742;
}

.s-chat .m1 i + i { width: 60%; }
.s-chat .line {
  position: static;
  color: #dcdbe0;
}

/* C6 Games: a dialogue box over a scene. */
.s-game {
  background:
    linear-gradient(to bottom, transparent 55%, #15210f 55%),
    linear-gradient(to bottom, #233548, #3b5a52 55%);
}

.s-game .box {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 8%;
  padding: 0.55rem 0.75rem;
  background: rgba(14, 18, 30, 0.9);
  border: 2px solid #c9b88a;
  border-radius: 6px;
}

.s-game .box small {
  display: block;
  font: 700 9px/1.4 var(--mono);
  letter-spacing: 0.8px;
  color: #c9b88a;
}

.s-game .line {
  position: static;
  font-family: var(--mono);
  font-size: clamp(11px, 1.1vw, 13px);
}

.s-game .card,
.s-chat .card,
.s-comic .card {
  bottom: auto;
  top: 12%;
  left: auto;
  right: 6%;
  transform: translate(0, 18px);
}

.s-comic .card { top: auto; bottom: 10%; right: auto; left: 8%; }

.case-grid.live .s-game .card,
.case-grid.live .s-chat .card,
.case-grid.live .s-comic .card {
  animation-name: rise-side;
}

@keyframes rise-side {
  0%, 48% { opacity: 0; transform: translate(0, 18px); }
  56%, 88% { opacity: 1; transform: translate(0, 0); }
  94%, 100% { opacity: 0; transform: translate(0, -6px); }
}

.case-grid:not(.live) .s-game .card,
.case-grid:not(.live) .s-chat .card,
.case-grid:not(.live) .s-comic .card {
  transform: none;
}

@media (max-width: 980px) {
  .case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .case-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------------------
   Use-case pages (/use/*). Same design system as the landing page; these
   rules only cover what a spoke has that the home page doesn't.
   ------------------------------------------------------------------------ */
.crumbs a {
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--sky);
}

.use-hero {
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
}

.use-hero h1 {
  font-size: clamp(2.5rem, 5.6vw, 4.5rem);
}

.use-hero .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 2rem;
}

.use-hero .actions .stamp {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}

.use-hero .use-clip {
  grid-column: auto;
  margin: 0;
}

.case-grid.solo {
  grid-template-columns: minmax(0, 1fr);
}

.case-grid.solo .scene .line {
  font-size: clamp(14px, 1.9vw, 20px);
}

.case-grid.solo .scene .card b {
  font-size: 20px;
}

.case-grid.solo .scene .card span {
  font-size: 12px;
}

.use .steps {
  padding-top: clamp(3rem, 7vw, 6rem);
}

/* What you get: the copy beside a card.

   The card is the app's own card, rebuilt from electron/card-display.ts and
   electron/palette.css — the same Literata face (copied from
   @fontsource-variable/literata, OFL, licence beside the files), the same
   ground and tokens — so the site shows exactly what a learner will see.
   The content is a real card from the live store (coup d'œil). If the app's
   card changes shape, this one should follow. */
@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/literata/literata-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/literata/literata-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Literata";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/literata/literata-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Literata";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/literata/literata-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.use-get {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.use-get > div {
  display: grid;
  gap: 1rem;
  justify-items: start;
}

.use-get p:not(.eyebrow),
.use-notes p,
.use-faq p {
  margin: 0;
  max-width: 60ch;
  color: var(--body);
}

.app-card {
  --card-ink: #f5f5f0;
  --card-muted: rgba(245, 245, 240, 0.65);
  --card-hair: rgba(245, 245, 240, 0.08);
  --card-edge: rgba(245, 245, 240, 0.12);
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 10px;
  background: #1a1614;
  border: 1px solid var(--hair-2);
  border-radius: 20px;
  box-shadow: 0 0 40px var(--sky-dim);
  color: var(--card-ink);
  font-family: var(--sans);
}

.app-card .face {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 1.75rem 1.5rem 1.75rem;
  background: #221f1c;
  border: 1px solid var(--card-edge);
  border-radius: 16px;
  text-align: center;
}

.app-card .head {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem 0.75rem;
  margin-bottom: 0.75rem;
}

.app-card .lemma {
  font: 400 1.75rem/1.2 "Literata", var(--serif);
  color: var(--card-muted);
}

.app-card .pos {
  padding: 0.2rem 0.75rem;
  border: 1px solid var(--card-edge);
  border-radius: 9999px;
  font: 500 13px/1.4 var(--sans);
  color: var(--card-muted);
}

.app-card .speak {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(135, 206, 235, 0.15);
  color: var(--sky);
}

.app-card .tr {
  font: 700 2.5rem/1.1 "Literata", var(--serif);
}

.app-card .sub {
  font-size: 17px;
  color: var(--card-muted);
}

.app-card hr {
  width: 56px;
  margin: 1.1rem 0 1rem;
  border: 0;
  border-top: 1px solid var(--card-edge);
}

.app-card .label {
  font: 600 12px/1.4 var(--sans);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--card-muted);
}

.app-card .expl {
  margin: 0.35rem 0 0;
  max-width: 40ch;
  font: 400 italic 1.0625rem/1.45 "Literata", var(--serif);
  color: var(--card-ink);
  text-wrap: balance;
}

.app-card .examples {
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem;
  background: #221f1c;
  border: 1px solid var(--card-edge);
  border-radius: 16px;
}

.app-card .examples header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font: 600 15px/1 var(--sans);
}

.app-card .examples header svg {
  color: var(--card-muted);
}

.app-card .count {
  padding: 0.2rem 0.5rem;
  border-radius: 9999px;
  background: rgba(245, 245, 240, 0.1);
  font-size: 12px;
  color: var(--card-muted);
}

.app-card .ex {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.app-card .ex > div {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  padding: 0.85rem 0.9rem;
  background: rgba(245, 245, 240, 0.03);
  border-radius: 10px;
}

.app-card .ex q {
  font: 600 1rem/1.35 "Literata", var(--serif);
  quotes: none;
}

.app-card .ex q mark {
  background: none;
  color: var(--sky);
}

.app-card .ex .captured q {
  color: var(--card-muted);
}

.app-card .ex span {
  font-size: 13px;
  line-height: 1.4;
  color: var(--card-muted);
}

/* Notes: the part competitors don't write. */
.use-notes {
  display: grid;
  gap: 1.5rem;
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.use-notes > div:first-child {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
}

.use-notes .cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 4px;
  background: var(--panel);
  border-block: 1px solid var(--hair);
  border-radius: 20px;
}

.use-notes .cols > div {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: 2rem;
  border-left: 1px solid var(--hair);
}

.use-notes .cols > div:first-child {
  border-left: 0;
}

.use-notes h3 {
  margin: 0;
  font: 400 italic 1.25rem/1.33 var(--serif);
  color: var(--ink);
}

.use-notes p {
  font-size: 14px;
  line-height: 22.75px;
  color: var(--muted);
}

/* FAQ: collapsed, and still in the document for crawlers. */
.use-faq {
  max-width: 880px;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.use-faq h2 {
  margin-bottom: 1.25rem;
}

.use-faq details {
  border-top: 1px solid var(--hair-2);
}

.use-faq details:last-of-type {
  border-bottom: 1px solid var(--hair-2);
}

.use-faq summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 0;
  font: 400 italic 1.25rem/1.4 var(--serif);
  color: var(--ink);
  list-style: none;
}

.use-faq summary::-webkit-details-marker {
  display: none;
}

.use-faq summary::after {
  content: "+";
  font: 400 18px/1.4 var(--mono);
  color: var(--sky);
}

.use-faq details[open] summary::after {
  content: "−";
}

.use-faq details p {
  padding-bottom: 1.25rem;
}

.use-faq a {
  color: var(--sky);
}

@media (max-width: 980px) {
  .use-hero,
  .use-get,
  .use-notes .cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .use-hero .case-grid {
    width: 100%;
  }

  .use-notes .cols > div {
    border-left: 0;
    border-top: 1px solid var(--hair);
  }

  .use-notes .cols > div:first-child {
    border-top: 0;
  }

  .app-card {
    justify-self: center;
    width: min(100%, 520px);
  }
}

@media (max-width: 520px) {
  .app-card .ex {
    grid-template-columns: minmax(0, 1fr);
  }
}