/* The home page, drawn from "Lenton Landing Page" in Claude Design. Every
   measurement here is the mock's; every colour is the token the mock's hex
   already was, so both palettes come out right. The three demonstrations use
   the product's own stage, word sheet, Reader and Vocabulary classes, and this
   file only adjusts where those components sit on a long page. */

/* Caveat draws only the "try it!" note, as in the mock. It is bundled rather
   than fetched: no page loads anything from another host. */
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/caveat-latin.woff2") format("woff2");
}

.landing-main {
  display: block;
  padding: 40px var(--content-page-gutter) 0;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.01em;
}

.landing-h2 {
  margin: 0;
  max-width: 900px;
  font-size: 36px;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.landing-h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.3;
}

.landing-sub {
  margin: 12px 0 0;
  max-width: 520px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-dim);
  text-wrap: pretty;
}

.landing-small {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-faint);
  text-wrap: pretty;
}

.landing-eyebrow {
  margin: 0 0 16px;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--ink-faint);
  white-space: nowrap;
}

.landing-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.2;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--control-line);
  border-radius: var(--radius-control);
  text-decoration: none;
}
.landing-btn:hover {
  color: var(--ink);
  background: var(--surface-alt);
  border-color: var(--control-line-over);
}
.landing-btn-large { height: 40px; padding: 0 16px; }
/* The Reader's call to action borrows the Anki yellow, the product's other
   filled action colour, so it stands apart from the hero's blue. */
.landing-btn-yellow,
.landing-btn-yellow:hover {
  color: var(--act-anki-ink);
  border-color: var(--act-anki-line);
}
.landing-btn-yellow { background: var(--act-anki); }
.landing-btn-yellow:hover { background: color-mix(in srgb, var(--act-anki) 88%, #000000); }

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

.landing-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 72px 0 88px;
  text-align: center;
}
.landing-hero h1 {
  margin: 0;
  max-width: 980px;
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 500;
  line-height: .92;
  letter-spacing: -0.055em;
  text-wrap: balance;
}
/* The rotating word reserves the width of the longest word, so the headline
   never reflows as it turns over. Each word sits a line and a bit below the
   last, and the clip shows only the one at --at; the extra copy of the first
   word at the end lets the last turn roll forward before snapping back. */
.landing-hero-rotor {
  position: relative;
  display: inline-grid;
  text-align: left;
  clip-path: inset(-0.2em -0.4em -0.25em -0.1em);
  --at: 0;
}
.landing-hero-sizer { grid-area: 1 / 1; visibility: hidden; white-space: nowrap; }
.landing-hero-word {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  transform: translateY(calc((var(--i) - var(--at)) * 1.3em));
  transition: transform 650ms cubic-bezier(.7, 0, .2, 1);
}
.landing-hero-rotor.is-resetting .landing-hero-word { transition: none; }
.landing-lede {
  margin: 0;
  max-width: 560px;
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-dim);
  text-wrap: pretty;
}
.landing-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.landing-chrome-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.2;
  color: var(--act-save-ink);
  background: var(--act-save);
  border: 1px solid var(--act-save-line);
  border-radius: var(--radius-control);
  text-decoration: none;
}
/* Until the extension is in the Chrome Web Store the button announces it
   rather than linking anywhere, so it is drawn faded and does not react. */
.landing-chrome-btn[aria-disabled="true"],
.landing-chrome-btn[aria-disabled="true"]:hover {
  color: var(--act-save-ink);
  background: var(--act-save);
  border-color: var(--act-save-line);
  opacity: .55;
  cursor: default;
}
.landing-chrome-btn:not([aria-disabled="true"]):hover {
  color: var(--act-save-ink);
  background: var(--act-save-over);
  border-color: var(--act-save-line-over);
}
.landing-chrome-logo {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: var(--radius-control);
}
.landing-chrome-logo img { width: 14px; height: 14px; display: block; }
/* In the hero the two calls to action stand a size taller than the page's
   other buttons, in step with the headline above them. */
.landing-hero .landing-chrome-btn,
.landing-hero .landing-btn-large { height: 52px; padding: 0 22px; font-size: 15px; }

/* ------------------------------------------------------------ watch */

.landing-watch-head {
  position: relative;
  padding-top: 32px;
  margin-bottom: 22px;
  border-top: 1px solid var(--line);
}
.landing-try {
  position: absolute;
  left: 360px;
  bottom: -56px;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
  color: var(--ink);
}
.landing-try svg { display: block; margin-top: 14px; }
.landing-try span {
  font-family: 'Caveat', cursive;
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  transform: rotate(-6deg);
  white-space: nowrap;
}

/* One grid for the video and its word sheet. The video's column unwraps so
   the player, the legend and the logos are each a row, and the sheet shares
   the player's row — so it is always exactly as tall as the video. */
.landing-watch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 380px);
  gap: 8px 24px;
  align-items: start;
}
.landing-watch-main { display: contents; }
.landing-watch-main > * { grid-column: 1; }

/* A still of a YouTube video with Lenton's subtitles drawn on it, the way the
   extension draws them. The caption band and the control bar are measured from
   YouTube's own player: a 75% black caption band padded .25em, round 40px
   controls on a 30% black ground, one pill holding the right-hand buttons,
   and a 4px red progress bar with its scrubber. */
.landing-player {
  container-type: inline-size;
  background-color: #1c1c1c;
  background-image: repeating-linear-gradient(135deg, #2a2a2a 0 1px, transparent 1px 12px);
  font-family: "YouTube Noto", Roboto, Arial, Helvetica, sans-serif;
}

.landing-captions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 72px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 24px;
  text-align: center;
}
.landing-caption {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0 .25em;
  color: #ffffff;
  background: rgba(8, 8, 8, .75);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.landing-caption-de {
  font-size: clamp(17px, 3.4cqw, 30px);
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
}
.landing-caption-en {
  padding-block: .16em;
  color: #dedede;
  font-size: clamp(12px, 1.9cqw, 17px);
  line-height: 1.42;
}
/* Words on the picture are drawn exactly as the extension draws them over
   YouTube: the known and level marks are a bar .1em thick, lifted .02em off
   the bottom and inset .04em at each end, rather than the website's
   full-width inset line; the highlight is the extension's yellow in either
   palette. */
.landing-caption .w {
  position: relative;
  display: inline-block;
  margin: 0 -.03em;
  padding: 0 .05em;
  transition: color .12s ease, background-color .12s ease;
}
.landing-page .landing-caption .w.saved,
.landing-page .landing-caption .w.in-level { box-shadow: none; }
.landing-caption .w::after {
  content: "";
  position: absolute;
  right: .04em;
  bottom: .02em;
  left: .04em;
  height: .08em;
  opacity: 0;
}
.landing-caption .w.saved::after { background: #45c46b; opacity: 1; }
.landing-caption .w.in-level::after { background: var(--word-level, #7c5cff); opacity: 1; }
.landing-caption .w:hover,
.landing-caption .w.active,
.landing-caption .w.partner-hover { color: #090909; background: #ffe680; }
/* The separable pair's dotted line is drawn rather than left to
   text-decoration, whose dots shrink to specks at caption size. Square dots
   as thick as the known bar, in the same place under the word. */
.landing-caption .w.separable { text-decoration: none; }
.landing-caption .w.separable::before {
  content: "";
  position: absolute;
  right: .04em;
  bottom: .02em;
  left: .04em;
  height: .08em;
  background-image: repeating-linear-gradient(90deg, currentColor 0 .08em, transparent .08em .18em);
}

.landing-yt {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  color: #eeeeee;
}
.landing-yt-progress {
  position: relative;
  height: 3px;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, .2);
  border-radius: 3px;
}
.landing-yt-loaded,
.landing-yt-played {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 3px 0 0 3px;
}
.landing-yt-loaded { width: 55%; background: rgba(255, 255, 255, .4); }
.landing-yt-played { width: 38%; background: linear-gradient(90deg, #ff0033 80%, #ff2791); }
.landing-yt-scrubber {
  position: absolute;
  top: -3.5px;
  left: calc(38% - 5px);
  width: 10px;
  height: 10px;
  background: #ff0033;
  border-radius: 50%;
}
.landing-yt-controls { display: flex; align-items: center; gap: 10px; height: 36px; }
.landing-yt-round {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .3);
  border-radius: 50%;
}
.landing-yt-round [data-icon],
.landing-yt-btn [data-icon] { font-size: 21px; }
/* YouTube's player glyphs are solid. */
.landing-yt .material-symbol { font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; }
.landing-yt-time {
  height: 36px;
  display: inline-flex;
  align-items: center;
  margin-left: -3px;
  padding: 0 14px;
  background: rgba(0, 0, 0, .3);
  border-radius: 28px;
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.landing-yt-spacer { flex: 1; }
.landing-yt-group {
  display: inline-flex;
  height: 36px;
  background: rgba(0, 0, 0, .3);
  border-radius: 28px;
}
.landing-yt-btn {
  position: relative;
  width: 43px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.landing-yt-btn [data-icon="toggleOn"] { font-size: 27px; }
/* Captions on: YouTube underlines the CC button in red. */
.landing-yt-btn.is-on::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 3px;
  background: #ff0033;
  border-radius: 2px;
}

@container (max-width: 520px) {
  .landing-yt-group .landing-yt-btn:nth-child(1),
  .landing-yt-group .landing-yt-btn:nth-child(4) { display: none; }
  .landing-captions { bottom: 66px; padding: 0 10px; }
}

.landing-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  font-size: 13px;
  color: var(--ink-dim);
}
.landing-legend > span { display: flex; align-items: center; gap: 6px; }
.landing-swatch { flex: none; width: 18px; height: 3px; }
.landing-swatch.is-saved { background: var(--word-saved-custom, var(--good)); }
.landing-swatch.is-level { background: var(--word-level, #7c5cff); }
.landing-swatch.is-separable { height: 0; border-bottom: 2px dotted var(--ink); }

.landing-works {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.landing-works .landing-eyebrow { margin: 0; }
.landing-logos {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
}
.landing-logo { display: flex; align-items: center; height: 28px; }
.landing-logo img { display: block; height: 17px; width: auto; }
.landing-logo-comma { margin: 0 14px 0 2px; align-self: flex-end; font-size: 18px; line-height: 1; color: var(--ink-dim); }
.landing-logo img[alt="Disney+"] { height: 24px; }
/* On Obsidian the wordmarks turn white, as their own dark-background
   versions do. YouTube keeps its red, so it swaps to its own dark file. */
.landing-logo .landing-logo-dark { display: none; }
:root[data-palette="obsidian-v3"] .landing-logo .landing-logo-light { display: none; }
:root[data-palette="obsidian-v3"] .landing-logo .landing-logo-dark { display: block; }
:root[data-palette="obsidian-v3"] .landing-logo img[alt="Disney+"],
:root[data-palette="obsidian-v3"] .landing-logo img[alt="HBO Max"] { filter: brightness(0) invert(1); }

/* The word sheet, standing in its own column instead of over the video. */
.landing-sheet {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  width: auto;
  min-width: 0;
  max-height: none;
  /* Sized by the row, never the row by it: without this a long entry would
     make the player's row taller than the video. Its middle scrolls instead,
     as the product sheet's does. */
  contain: size;
  font-size: 14px;
}
.landing-sheet-empty { color: var(--ink-faint); font-size: 14px; }

/* Badges keep the mock's size, which is a shade tighter than the product's. */
.landing-page .sheet-tag,
.landing-page .sheet-level,
.landing-page .word-tag { line-height: 1.2; }

/* Every word mark on this page is a fifth lighter than the product's own:
   the known and level lines .08em rather than .1em, the separable dots
   1.6px rather than 2px. */
.landing-page .w.saved { box-shadow: inset 0 -0.08em 0 var(--word-saved-custom, var(--good)); }
.landing-page .w.in-level { box-shadow: inset 0 -0.08em 0 var(--word-level, #7c5cff); }
.landing-page .w.separable { text-decoration-thickness: 1.6px; }
.landing-swatch { height: 2.4px; }
.landing-swatch.is-separable { border-bottom-width: 1.6px; }

/* ------------------------------------------------------------ split sections */

.landing-split {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 44px;
  padding: 32px 0;
  border-top: 1px solid var(--line-strong);
}
/* The Reader needs width more than the other examples do, so its heading
   sits above it, as the video's does, rather than in a column beside it. */
.landing-read { margin-top: 44px; flex-direction: column; }
.landing-read > .landing-split-head { flex: none; align-items: center; text-align: center; }
.landing-read .landing-sub { margin-inline: auto; }
.landing-read-cta { display: flex; justify-content: center; margin-top: 24px; }
/* The section spans the page, but the Reader itself stays book-width and
   centred beneath its heading, like a window set into the page. */
.landing-read > .landing-split-body { flex: none; width: min(100%, 880px); margin-inline: auto; position: relative; }
/* The Reader's note hangs in the margin to its right, pointing back into the
   first paragraph. That margin only exists on a wide window, so below that
   the note is left out rather than laid over the text. */
.landing-try-reader {
  left: calc(100% + 6px);
  top: 96px;
  bottom: auto;
}
.landing-try-reader svg { margin-top: 0; }
.landing-try-reader span { margin-top: 26px; transform: rotate(6deg); }
@media (max-width: 1179px) {
  .landing-try-reader { display: none; }
}
.landing-split-head {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.landing-split-body { flex: 999 1 560px; min-width: 0; }

/* The Reader, framed as a window on this page rather than filling it. */
.landing-reader {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  overflow: hidden;
}
.landing-reader .reader-toolbar,
.landing-reader .reader-nav {
  position: relative;
  top: auto;
  bottom: auto;
  width: auto;
  margin: 0;
  padding-inline: 12px;
}
.landing-reader .reader-toolbar::before,
.landing-reader .reader-nav::before { left: 0; width: 100%; transform: none; }
.landing-reader .reader-progress { position: static; width: auto; margin: 0; }
.landing-reader .reader-progress span { transition: width .18s linear; }
.landing-reader .reader-workspace { min-height: 0; padding: 18px 18px 24px; }
/* The real reader caps its line length for comfort on a full page; inside
   this frame that cap left the text a narrow strip, so the page fills the
   frame and the gutter kept for the paragraph buttons is just wide enough. */
.landing-reader .reader-page { width: 100%; }
.landing-reader .reader-content { padding-inline: 12px; }
@media (min-width: 761px) {
  .landing-reader .reader-paragraph { margin-left: 52px; }
}
.landing-reader .reader-content { --reader-size: 17px; }
/* At reading size the page's lighter marks were too faint, so the Reader's
   are a shade heavier than the product's. Its separable dots are drawn, as
   the video's are, because the browser's dotted underline shrinks to specks;
   they sit exactly where the known and level lines do, at the same weight. */
.landing-page .landing-reader .w.saved { box-shadow: inset 0 -0.11em 0 var(--word-saved-custom, var(--good)); }
.landing-page .landing-reader .w.in-level { box-shadow: inset 0 -0.11em 0 var(--word-level, #7c5cff); }
.landing-page .landing-reader .w.separable {
  text-decoration: none;
  background-image: repeating-linear-gradient(90deg, currentColor 0 .11em, transparent .11em .24em);
  background-size: 100% .11em;
  background-position: 0 100%;
  background-repeat: no-repeat;
}
.landing-reader .reader-tools .icon-btn { cursor: default; }
.landing-reader .reader-tools .icon-btn:hover { background: transparent; border-color: transparent; }
.landing-reader .reader-paragraph { cursor: default; }

/* ------------------------------------------------------------ one vocabulary */

/* Generous vertical room, so each of these sections reads as its own
   stop on the page rather than a strip between two rules. */
.landing-section { padding: 96px 0; border-top: 1px solid var(--line-strong); }
.landing-flow { display: flex; flex-wrap: wrap; gap: 44px; align-items: center; }
.landing-flow-copy { flex: 999 1 420px; min-width: 0; }
.landing-flow-diagram {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.landing-flow-modes,
.landing-flow-drops {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.landing-flow-mode {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--control-line);
  border-radius: var(--radius-control);
  font-size: 16px;
  font-weight: bold;
}
.landing-flow-mode [data-icon] { font-size: 18px; }
.landing-soon {
  font-size: 11px;
  font-weight: bold;
  line-height: 1.2;
  color: var(--band-b2);
  border: 1px solid currentColor;
  border-radius: var(--radius-control);
  padding: 2px 6px;
}
.landing-flow-drops { height: 22px; }
.landing-flow-drops span { width: 50%; border-right: 1px solid var(--control-line); }
.landing-flow-join { margin: 0 calc(100% / 6 - 4px); border-top: 1px solid var(--control-line); }
.landing-flow-stem { width: 1px; height: 22px; margin: 0 auto; background: var(--control-line); }
.landing-flow-target {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  color: var(--act-ai-ink);
  background: var(--act-ai);
  border: 1px solid var(--act-ai-line);
  border-radius: var(--radius-surface);
}
.landing-flow-target > span:first-child { display: flex; flex-direction: column; }
.landing-flow-target strong { font-size: 17px; line-height: 1.3; }
/* On the teal the dimmed and green text would lose contrast, so both are
   white, the subtitle at reduced opacity. */
.landing-flow-target > span:first-child > span { font-size: 13px; opacity: .85; }
.landing-flow-anki {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: bold;
}
.landing-flow-anki [data-icon] { font-size: 16px; }

/* ------------------------------------------------------------ anki */

.landing-anki { display: flex; flex-wrap: wrap; gap: 32px 40px; align-items: start; }
.landing-anki-logo {
  flex: none;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.landing-anki-logo img { width: 84px; height: 84px; display: block; }
.landing-anki-copy { flex: 999 1 360px; min-width: 0; }
.landing-anki-actions { display: flex; gap: 8px; margin-top: 22px; }
.landing-anki-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.2;
  color: var(--act-anki-ink);
  background: var(--act-anki);
  border: 1px solid var(--act-anki-line);
  border-radius: var(--radius-control);
  text-decoration: none;
}
.landing-anki-btn:hover { color: var(--act-anki-ink); }
.landing-checks { flex: 1 1 320px; min-width: 0; border-top: 1px solid var(--line); }
.landing-checks > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.landing-checks [data-icon] { font-size: 16px; color: var(--good); }

/* ------------------------------------------------------------ levels */

.landing-levels-body { display: flex; flex-direction: column; gap: 22px; }
.landing-sample {
  margin: 0;
  padding: 22px 26px;
  background: var(--sunken);
  border: 1px solid var(--line-strong);
  font-family: var(--font-read);
  font-size: 20px;
  line-height: 1.6;
}
.landing-level-lists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 24px 40px;
}
.landing-list-head {
  margin: 0;
  padding-bottom: 8px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: .12em;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line-strong);
}
.landing-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.landing-list-row .landing-swatch { width: 22px; }
.landing-band { width: 36px; }
.landing-level {
  font-size: 12px;
  font-weight: bold;
  line-height: 1.2;
  color: var(--band);
  border: 1px solid currentColor;
  border-radius: var(--radius-control);
  padding: 3px 8px;
}
.landing-dim { color: var(--ink-dim); }

/* ------------------------------------------------------------ vocabulary */

/* Framed as a page, the way the Reader above is, rather than a list floating
   in the section. */
.landing-vocab-demo {
  padding: 16px 20px 6px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
}
.landing-vocab-demo .vocabulary-head h3 { margin: 0; font-size: 17px; }
.landing-vocab-demo .words .word:last-child { border-bottom: 0; }

/* ------------------------------------------------------------ questions */

.landing-faq-list { border-top: 1px solid var(--line-strong); }
.landing-faq-list details { border-bottom: 1px solid var(--line-strong); }
.landing-faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 46px;
  padding: 0 4px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  list-style: none;
}
.landing-faq-list summary::-webkit-details-marker { display: none; }
.landing-faq-list summary:hover { background: var(--surface-alt); }
.landing-faq-list summary [data-icon] { font-size: 18px; color: var(--ink-dim); }
.landing-faq-list details[open] summary [data-icon] { transform: rotate(180deg); }
.landing-faq-list p {
  margin: 0;
  padding: 0 4px 14px;
  max-width: 620px;
  font-size: 14px;
  color: var(--ink-dim);
  text-wrap: pretty;
}

/* ------------------------------------------------------------ narrow */

@media (max-width: 760px) {
  .landing-watch { grid-template-columns: minmax(0, 1fr); }
  .landing-sheet { grid-column: 1; grid-row: auto; contain: none; max-height: 380px; margin-top: 12px; }
  .landing-hero { padding: 32px 0 56px; }
  .landing-lede { font-size: 17px; }
  .landing-h2 { font-size: 30px; }
  .landing-section { padding: 56px 0; }
  .landing-try { display: none; }
  .landing-works { flex-direction: column; align-items: stretch; }
  .landing-sample { padding: 18px; font-size: 18px; }
  .landing-flow-mode { font-size: 14px; padding: 0 8px; gap: 5px; }
}