/*
 * sl-reader.app: the landing and the two legal pages.
 *
 * The colours are the app's own (src/theme/tokens.ts): the cream shell in
 * light, the brown shell in dark. Literata is the reading face and Inter the
 * interface face, both subset from the app's font packages, so the site asks
 * no third party for anything (the privacy policy says so).
 */

@font-face { font-family: "Literata"; src: url("fonts/literata-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("fonts/literata-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Literata"; src: url("fonts/literata-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --bg: #f7f2e6;
  --band: #efe7d6;
  --surface: #fffdf7;
  --line: #e6dcc6;
  --hair: rgba(45, 40, 34, 0.12);
  --text: #2d2822;
  --text-2: #4b433a;
  --sub: #6f6558;
  --accent: #b3654a;
  --accent-ink: #8c4b36;
  --tint: rgba(179, 101, 74, 0.13);
  --tint-line: rgba(179, 101, 74, 0.26);
  --button: #2d2822;
  --on-button: #fbf7ee;
  --shadow: 0 1px 2px rgba(70, 50, 30, 0.06), 0 10px 28px -10px rgba(70, 50, 30, 0.22);
  --shadow-cover: 0 1px 2px rgba(50, 35, 20, 0.18), 0 10px 20px -8px rgba(50, 35, 20, 0.35);

  /* The phone in the hero shows the cream reading theme. */
  --bezel: #1f1b17;
  --page: #efe7d6;
  --page-text: #2d2822;
  --page-sub: #8a8072;
  --sheet: #fffdf7;
  --sheet-line: #ece3cf;
  --grabber: #e0d6bf;
  --hint: #c8bea8;
  --chip: #e6dcc6;

  /* The landing opens on the clay of the icon's seam; the cards on it are the
     app's own screens, so they take the library's colours (LIBRARY_COLORS). */
  --clay: #9c563e;
  --clay-fill: var(--clay);
  --tile: #fffdf7;
  --app-page: #efe7d6;
  --app-panel: #f7f2e6;
  --app-text: #2d2822;
  --app-sub: #6f6558;
  --app-ink: #8c4b36;
  --app-hair: rgba(45, 40, 34, 0.14);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #2c2118;
    --band: #33261c;
    --surface: #3f3126;
    --line: #584435;
    --hair: rgba(231, 214, 191, 0.13);
    --text: #efe0cb;
    --text-2: #dcc8ad;
    --sub: #c4a988;
    --accent-ink: #e8a084;
    --tint: rgba(179, 101, 74, 0.24);
    --tint-line: rgba(232, 160, 132, 0.32);
    --button: #efe0cb;
    --on-button: #2c2118;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 10px 28px -10px rgba(0, 0, 0, 0.5);
    --shadow-cover: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 20px -8px rgba(0, 0, 0, 0.6);

    /* …and the brown one at night. */
    --bezel: #120d09;
    --page: #33261c;
    --page-text: #e7d6bf;
    --page-sub: #a78f74;
    --sheet: #4a3a2c;
    --sheet-line: #5c4936;
    --grabber: #5c4936;
    --hint: #584435;
    --chip: #453629;

    /* The clay darkens and runs down into the page, and the cards take the
       library's dark colours. */
    --clay: #4a2b1d;
    --clay-fill: linear-gradient(#4a2b1d, #33261c);
    --tile: #4a3a2c;
    --app-page: #33261c;
    --app-panel: #3f3126;
    --app-text: #e7d6bf;
    --app-sub: #c4a988;
    --app-ink: #e8a084;
    --app-hair: rgba(231, 214, 191, 0.14);
  }
}

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

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

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }

.skip {
  position: absolute; left: 16px; top: -48px; z-index: 10;
  padding: 8px 14px; border-radius: 10px;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow);
}
.skip:focus { top: 12px; }

/* ------------------------------------------------------------------ *
 * Header and footer
 * ------------------------------------------------------------------ */

.top { padding: 22px 0; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.brand {
  display: inline-flex; align-items: center; gap: 11px;
  color: var(--text); text-decoration: none;
  font: 600 19px/1 var(--sans); letter-spacing: -0.01em;
}
.brand img { width: 36px; height: 36px; border-radius: 22.5%; box-shadow: 0 1px 2px rgba(50, 35, 20, 0.25); }

.nav { display: flex; align-items: center; gap: 22px; font-size: 15px; }
.nav a { color: var(--sub); text-decoration: none; }
.nav a:hover { color: var(--text); }
/* The three languages as one control; the page's own is the lit one. */
.langs { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--hair); border-radius: 999px; }
.nav .langs a {
  min-width: 36px; padding: 4px 8px; border-radius: 999px;
  text-align: center; font: 500 12.5px/1.3 var(--sans); letter-spacing: 0.05em;
}
.nav .langs a[aria-current] { background: var(--tint); color: var(--accent-ink); }

/* On the landing the header sits on the hero's clay, and everything on it is
   drawn in cream. The header and the hero each paint the clay, so the two
   read as one block. */
.clay {
  --on-clay: #fff6ea;
  --on-clay-2: rgba(255, 246, 234, 0.92);
  --on-clay-sub: rgba(255, 246, 234, 0.84);
  --on-clay-hair: rgba(255, 246, 234, 0.32);
  --on-clay-lit: rgba(255, 246, 234, 0.2);
  background: var(--clay); color: var(--on-clay);
}
.clay :focus-visible { outline-color: var(--on-clay); }
.top.clay .brand { color: var(--on-clay); }
.top.clay .nav a { color: var(--on-clay-sub); }
.top.clay .nav a:hover { color: #fff; }
.top.clay .langs { border-color: var(--on-clay-hair); }
.top.clay .nav .langs a[aria-current] { background: var(--on-clay-lit); color: #fff; }

.foot { padding: 40px 0 48px; border-top: 1px solid var(--hair); color: var(--sub); font-size: 14px; }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.foot a { color: var(--sub); text-decoration: none; }
.foot a:hover { color: var(--text); text-decoration: underline; }

/* ------------------------------------------------------------------ *
 * Type
 * ------------------------------------------------------------------ */

.eyebrow,
.kicker {
  margin: 0 0 14px;
  font: 600 12.5px/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-ink);
}

h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--text); margin: 0; }

h1 {
  font-size: clamp(40px, 5.6vw, 66px);
  line-height: 1.06; letter-spacing: -0.025em;
  text-wrap: balance;
}
h1 em { font-style: italic; color: var(--accent-ink); }

h2 {
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1.12; letter-spacing: -0.02em;
  text-wrap: balance;
}

.lead { margin: 24px 0 0; max-width: 34em; font-size: clamp(18px, 1.6vw, 20px); line-height: 1.55; color: var(--text-2); }

.copy p { margin: 18px 0 0; max-width: 32em; color: var(--text-2); }
.copy .note { font-size: 15.5px; color: var(--sub); }

/* ------------------------------------------------------------------ *
 * Hero
 * ------------------------------------------------------------------ */

.hero { padding: 36px 0 88px; background: var(--clay-fill); }

/* The headline and the lead side by side, their last lines level. */
.hero-head { position: relative; z-index: 5; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 56px; }
.hero-title { flex: 1 1 600px; min-width: 0; }
.hero-side { flex: 0 1 380px; min-width: 0; padding-bottom: 8px; }
.hero .eyebrow { margin: 0; color: var(--on-clay-sub); }
/* Sized so the longest language's name still shares a line with «Учите». */
.hero h1 { position: relative; margin-top: 16px; font-size: clamp(40px, 5.4vw, 62px); color: #fff8ee; text-wrap: wrap; }
.hero .lead { margin: 0; font-size: 18.5px; color: var(--on-clay-2); }
/* Only a phone breaks the headline after its first word, so the language's
   name never decides how many lines the headline takes. */
.br-narrow { display: none; }

.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 36px; }
.store {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px 13px 18px; border-radius: 999px;
  background: var(--button); color: var(--on-button);
  font: 500 16px/1.2 var(--sans);
}
.store svg { width: 20px; height: 20px; flex: none; }
.store-note { color: var(--sub); font-size: 15px; }
.hero .cta { margin-top: 24px; }
.hero .store { background: var(--on-clay); color: #7f412d; }
.hero .store-note { color: var(--on-clay-sub); }

/* The language in the headline is a choice: the word, a chevron, a menu of
   the languages there are stories in. The page ships showing the first one,
   and site.js swaps the phone and the cards around it to the one picked. */
.pick { position: relative; display: inline-block; }
.langpick {
  appearance: none; display: inline-flex; align-items: baseline; gap: 0.12em;
  margin: 0 -0.04em 0 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-style: italic; letter-spacing: inherit; color: #ffd9c4;
  text-decoration-line: underline; text-decoration-style: dotted;
  text-decoration-thickness: 0.05em; text-underline-offset: 0.16em;
}
.langpick .chev {
  display: inline-grid; place-items: center; align-self: center; flex: none;
  width: 0.46em; height: 0.46em; margin-left: 0.08em; border-radius: 50%;
  background: var(--on-clay-lit); transform: translateY(0.06em);
}
.langpick:hover .chev,
.langpick[aria-expanded="true"] .chev { background: rgba(255, 246, 234, 0.32); }
.langpick .chev svg { width: 58%; height: 58%; fill: none; stroke: currentColor; }
.langmenu {
  position: absolute; left: 0; top: calc(100% + 10px); z-index: 20;
  min-width: 232px; padding: 6px; border-radius: 18px;
  background: var(--surface); color: var(--text); text-align: left;
  box-shadow: 0 1px 2px rgba(40, 25, 12, 0.14), 0 26px 50px -18px rgba(40, 25, 12, 0.55);
  font: 400 16px/1.3 var(--sans); font-style: normal; letter-spacing: 0;
}
.langmenu[hidden] { display: none; }
.langopt {
  appearance: none; display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 48px; padding: 8px 12px; border: 0; border-radius: 12px;
  background: none; color: inherit; cursor: pointer; text-align: left;
  font: 500 16px/1.25 var(--sans);
}
.langopt:hover,
.langopt:focus-visible { background: var(--tint); outline: none; }
.langopt .tick { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--accent); visibility: hidden; }
.langopt[aria-checked="true"] .tick { visibility: visible; }

/* What the hero shows for each language. Specific enough to beat any
   display a pane's own class sets. */
[data-for][hidden] { display: none; }

/* The cards around the phone: each one of the app's screens, or a page. */
.tile {
  margin: 0; padding: 22px 24px;
  border-radius: 20px; background: var(--tile); color: var(--text);
  box-shadow: 0 1px 2px rgba(40, 25, 12, 0.12), 0 24px 48px -20px rgba(40, 25, 12, 0.5);
}
.tile .kicker { margin: 0; font-size: 11px; }
.tile-note { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: var(--text-2); }

/* The phone in the middle; reading on its left, what becomes of the words on
   its right. */
.stage {
  display: grid; grid-template-columns: minmax(0, 1fr) 318px minmax(0, 1fr);
  grid-template-areas: "level phone words" "swap phone review";
  align-items: start; gap: 28px 40px; margin-top: 56px;
}
.stage-phone { grid-area: phone; display: flex; justify-content: center; }
.tiles { display: contents; }
.t-level { grid-area: level; margin-top: 72px; }
.t-words { grid-area: words; }
.t-review { grid-area: review; margin-right: 24px; }
.t-swap { grid-area: swap; margin-left: 24px; }
.tile-dots { display: none; }

/* Four stories, A1 to B2, each with its level on the cover as the shelf
   shows it. */
.covers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.covers span { position: relative; }
.covers img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; box-shadow: var(--shadow-cover); }
.covers b {
  position: absolute; left: 5px; bottom: 5px;
  padding: 2px 5px; border-radius: 4px; background: rgba(0, 0, 0, 0.5);
  font: 600 9.5px/1.2 var(--sans); letter-spacing: 0.06em; color: #f6f0e6;
}

/* A book in the reader's own language with some words swapped. */
.swap-book { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.swap-book img { width: 36px; flex: none; border-radius: 4px; box-shadow: var(--shadow-cover); }
.swap-book p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--sub); }
.swap-text { margin: 14px 0 0; font: 400 17px/1.62 var(--serif); }
.sw { color: var(--accent-ink); background: var(--tint); border-radius: 4px; padding: 0 3px; }

/* The Words tab (WordsTab, WordRow): a day, then that day's words on one card. */
.app { margin-top: 14px; padding: 12px; border-radius: 16px; background: var(--app-page); color: var(--app-text); }
.app .day { margin: 0 0 8px; font: 600 10px/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--app-sub); }
.wcard { padding: 0 14px; border-radius: 16px; background: var(--app-panel); }
.wrow { display: flex; gap: 10px; padding: 11px 0 12px; }
.wrow + .wrow { border-top: 0.5px solid var(--app-hair); }
.wrow .body { flex: 1; min-width: 0; }
.wrow .speak { width: 15px; height: 15px; margin-top: 3px; opacity: 0.55; }
.hw-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.hw { font: 600 16px/20px var(--serif); }
.ptag {
  display: inline-flex; align-items: center; height: 17px; padding: 0 6px;
  border-radius: 9px; border: 1px solid var(--tint-line);
  font: 600 9.5px/1 var(--sans); letter-spacing: 0.04em; color: var(--app-ink);
}
.wtr { margin: 2px 0 0; font: 400 13px/18px var(--sans); }
.wq {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 5px 0 0; font: italic 400 12.5px/17px var(--serif); color: var(--app-sub);
}
.wq b,
.rv-quote b { font-weight: 400; color: var(--app-ink); }
.wmeta { margin: 5px 0 0; font: 400 10.5px/13px var(--sans); color: var(--app-sub); }

/* A round of the week's words (ReviewScreen), the card face down. */
.rv-top { display: flex; align-items: center; gap: 10px; }
.rv-close { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--app-panel); }
.rv-close svg { width: 9px; height: 9px; }
.rv-track { flex: 1; height: 4px; border-radius: 2px; background: var(--app-hair); overflow: hidden; }
.rv-track span { display: block; width: 17%; height: 4px; background: var(--accent); }
.rv-count { font: 600 11px/1 var(--sans); color: var(--app-sub); }
.rv-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  margin-top: 12px; padding: 16px 14px 14px; border-radius: 18px; background: var(--app-panel);
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.14);
}
.rv-hw { margin: 0; font: 600 23px/28px var(--serif); }
.rv-speak { display: grid; place-items: center; width: 30px; height: 30px; margin-top: 6px; border-radius: 50%; background: color-mix(in srgb, var(--app-text) 6%, transparent); }
.rv-speak svg { width: 15px; height: 15px; }
.rv-div { align-self: stretch; height: 0.5px; margin: 12px 0 10px; background: var(--app-hair); }
.rv-quote { margin: 0; font: italic 400 13.5px/20px var(--serif); }
.rv-src { display: flex; align-items: center; gap: 7px; margin: 10px 0 0; font: 400 11px/14px var(--sans); color: var(--app-sub); }
.rv-src img { width: 14px; height: 20px; border-radius: 2px; object-fit: cover; }
.rv-btn { display: grid; place-items: center; height: 38px; margin-top: 10px; border-radius: 20px; background: var(--accent); font: 600 13.5px/1 var(--sans); color: #fff; }

/* The phone. Sized in px so the page inside lays out the same way everywhere:
   the pill has to land over its word, and the word over its line. */
.phone {
  position: relative;
  width: 318px; height: 652px; padding: 9px;
  border-radius: 50px; background: var(--bezel);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 40px 80px -30px rgba(60, 40, 20, 0.55), 0 18px 36px -18px rgba(60, 40, 20, 0.45);
}
.screen {
  position: relative; overflow: hidden; height: 100%;
  border-radius: 41px; background: var(--page); color: var(--page-text);
}
.status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 26px 0 30px; height: 40px;
  font: 600 13px/1 var(--sans); letter-spacing: -0.01em;
}
.status svg { height: 11px; width: auto; fill: currentColor; }
.island { position: absolute; top: 11px; left: 50%; width: 92px; height: 26px; margin-left: -46px; border-radius: 20px; background: #000; }

.page { padding: 18px 26px 0 28px; }
.page .chapter { margin: 0 0 16px; font: 500 9.5px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--page-sub); }
.page p { margin: 0 0 12px; font: 400 15px/1.62 var(--serif); }
/* The paragraph under the tap is set line by line, so the word and its pill
   land where they were drawn in every browser. */
.ln { display: block; white-space: nowrap; }
.page .heading { margin: 4px 0 10px; font: 600 17px/1.62 var(--serif); }

/* A paragraph's translation chip (ParagraphView): the language it would
   translate into, at the end of the paragraph's last line. */
.pchip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 22px; margin-left: 6px; vertical-align: 1px;
  border-radius: 11px; border: 0.5px solid var(--hint); background: var(--chip);
  font: 600 11px/1 var(--sans); letter-spacing: 0.5px;
  color: color-mix(in srgb, var(--page-text) 75%, transparent);
}

.hit {
  position: relative; white-space: nowrap;
  margin: 0 -2px; padding: 1px 2px; border-radius: 4px; background: var(--tint);
}
.pill {
  position: absolute; left: 50%; bottom: calc(100% + 4px);
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 9px 6px 13px; border-radius: 12px;
  background: var(--sheet); border: 1px solid var(--sheet-line);
  box-shadow: 0 6px 18px -6px rgba(50, 35, 20, 0.35);
  font: 600 15.5px/1.3 var(--serif); color: var(--accent);
  white-space: nowrap;
}
.pill svg { width: 12px; height: 12px; stroke: var(--accent); opacity: 0.45; }
/* A word near the right edge: the pill keeps to the screen, as the app's does. */
.pill.edge-r { left: auto; right: -12px; transform: none; }

/* The word card as the app draws it in contextual mode (WordSheet.tsx), a
   step smaller: the answer at the head, then the entry for the expression.
   Its top is set per page, under the tapped line, and whatever does not fit
   runs off the screen the way the real card scrolls. */
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; top: var(--sheet-top, 300px);
  overflow: hidden;
  padding: 10px 20px 0;
  border-radius: 24px 24px 0 0;
  background: var(--sheet); color: var(--page-text);
  box-shadow: 0 -10px 30px -8px rgba(50, 35, 20, 0.22);
}
/* Where the card runs off the screen it fades rather than being sliced
   through a line of type under the home bar. */
.sheet::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--sheet) 0%, transparent), var(--sheet) 75%);
}
.grabber { width: 36px; height: 4px; margin: 0 auto 14px; border-radius: 4px; background: var(--grabber); }
.sheet .body { position: relative; }
.size {
  position: absolute; top: 0; right: 0;
  display: flex; align-items: center;
  border: 1px solid color-mix(in srgb, var(--page-text) 14%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--page-text) 5%, transparent);
}
.size svg { width: 26px; height: 22px; padding: 5px 7px; stroke: var(--page-text); }
.size span { font: 600 10px/1 var(--sans); color: var(--page-sub); }
.label { font: 400 9.5px/1.25 var(--sans); letter-spacing: 0.13em; text-transform: uppercase; opacity: 0.5; }
.label.here { color: var(--accent); opacity: 0.85; }
.sheet .head { margin: 6px 0 0; padding-right: 88px; font: 600 24px/1.1 var(--serif); color: var(--accent); }
.answer { margin: 6px 0 0; font: 400 12.5px/1.45 var(--sans); opacity: 0.75; }
.snippet { margin: 8px 0 0; font: 400 12px/1.4 var(--sans); opacity: 0.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snippet b { font-weight: 600; }
.sheet .rule { height: 1px; margin: 13px 0; background: var(--page-text); opacity: 0.1; }
.orig { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.orig .label { opacity: 0.5; }
.orig .entry { display: flex; align-items: center; gap: 10px; font: 400 16px/1.2 var(--sans); }
.speak { flex: none; fill: none; stroke: currentColor; }
.speak path:first-child { fill: currentColor; stroke: none; }
.orig .speak { width: 15px; height: 15px; opacity: 0.7; }
.sense { margin-top: 12px; padding-top: 9px; border-top: 1px solid color-mix(in srgb, var(--page-text) 10%, transparent); }
.sense .pos { display: flex; align-items: center; justify-content: space-between; }
.sense .pos svg { width: 14px; height: 14px; stroke: var(--page-text); opacity: 0.35; }
.means { margin: 3px 0 0; font: 600 14.5px/1.27 var(--serif); }
.means i { font-style: italic; font-weight: 400; opacity: 0.55; }
.example { margin-top: 9px; padding-left: 10px; border-left: 2px solid var(--accent); }
.example p { margin: 0; font: 400 13.5px/1.4 var(--serif); }
/* The speaker keeps to the end of the sentence's first line, as in the app. */
.example .src { display: flex; align-items: flex-start; gap: 8px; }
.example .src span { flex: 1; }
.example .speak { width: 12px; height: 12px; margin-top: 3.5px; opacity: 0.5; }
.example .tr { margin-top: -1px; font: 400 11.5px/1.4 var(--sans); opacity: 0.55; }
.home-bar { position: absolute; left: 50%; bottom: 8px; width: 112px; height: 4px; margin-left: -56px; border-radius: 4px; background: var(--page-text); opacity: 0.85; }

/* A first visit sees the tap happen: the word lights up, then the pill, then
   the card, while the cards around the phone settle in. A language picked
   from the headline shows its page afresh, so its tap plays again. None of
   it for anyone who asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .hit { animation: light 0.5s 0.5s ease-out both; }
  .pill { animation: pop 0.45s 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
  .pill.edge-r { animation-name: pop-r; }
  .sheet { animation: rise 0.6s 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .t-level { animation: settle 0.6s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .t-words { animation: settle 0.6s 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .t-swap { animation: settle 0.6s 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .t-review { animation: settle 0.6s 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
}
@keyframes light { from { background: transparent; } }
@keyframes pop { from { opacity: 0; transform: translate(-50%, 6px) scale(0.92); } }
@keyframes pop-r { from { opacity: 0; transform: translateY(6px) scale(0.92); } }
@keyframes rise { from { transform: translateY(100%); } }
@keyframes settle { from { opacity: 0; transform: translateY(18px); } }

/* ------------------------------------------------------------------ *
 * Features
 * ------------------------------------------------------------------ */

.feature { padding: 96px 0; }
.feature .wrap { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; gap: 64px; }
.feature.flip .copy { order: 2; }

.band { background: var(--band); }

.card {
  border-radius: 22px; background: var(--surface);
  box-shadow: var(--shadow);
}

/* Dictionary against SLReader on one sentence. */
.compare { margin: 0; padding: 30px 30px 14px; }
.compare .sentence { margin: 0 0 22px; font: 400 21px/1.55 var(--serif); }
.compare mark { color: inherit; background: var(--tint); border-radius: 4px; padding: 1px 3px; margin: 0 -1px; }
.verdict { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px 14px; padding: 16px 0; border-top: 1px solid var(--hair); }
.verdict .mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; margin-top: 1px; }
.verdict .mark svg { width: 12px; height: 12px; }
.verdict.no .mark { background: var(--hair); color: var(--sub); }
.verdict.yes .mark { background: var(--accent); color: #fff; }
.verdict .who { font: 600 12px/1.3 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sub); }
.verdict .what { grid-column: 2; font: 400 18px/1.45 var(--serif); }
.verdict.no .what { color: var(--sub); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--sub) 60%, transparent); }
.verdict.yes .what b { color: var(--accent-ink); font-weight: 600; }
.verdict .tag { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: var(--tint); font: 500 12px/1.5 var(--sans); color: var(--accent-ink); vertical-align: 2px; }

/* Word swap: one sentence, its swapped words in each language. */
.swap { margin: 0; padding: 28px; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 26px; align-items: start; }
.swap .cover { width: 112px; border-radius: 6px; box-shadow: var(--shadow-cover); }
.swap .meta { margin: 2px 0 12px; font-size: 13.5px; color: var(--sub); }
.swap .line { margin: 0; font: 400 21px/1.6 var(--serif); }
.swap mark {
  color: var(--accent-ink); background: var(--tint);
  border-radius: 5px; padding: 1px 4px; margin: 0 -1px;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.chips button {
  appearance: none; cursor: pointer;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--hair);
  background: transparent; color: var(--sub);
  font: 500 14px/1.2 var(--sans);
}
.chips button:hover { color: var(--text); border-color: var(--tint-line); }
/* The icon's seam colour rather than the accent: white on the accent itself
   is 4:1, under AA at this size. */
.chips button[aria-pressed="true"] { background: #9c563e; border-color: #9c563e; color: #fff; }

/* The shelf: four stories, then four classics. */
.shelf-section { padding: 96px 0; }
.shelf-section .copy { max-width: 640px; }
.shelf {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 22px 18px;
  margin: 48px 0 0; padding: 0; list-style: none;
}
.shelf li { min-width: 0; }
.shelf img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; box-shadow: var(--shadow-cover); }
.shelf .title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 12px; font: 400 15px/1.3 var(--serif);
}
.shelf .by { display: block; margin-top: 3px; font-size: 13px; line-height: 1.35; color: var(--sub); }
.shelf .gap { grid-column: 5; }
.shelf-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; font: 600 12px/1.3 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sub); }
.shelf-legend span { padding-top: 12px; border-top: 1px solid var(--hair); }

/* Two small things that did not need a section each. */
.pair { padding: 96px 0; }
.pair .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pair .card { padding: 30px 30px 32px; }
.pair .icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--tint); color: var(--accent-ink); }
.pair .icon svg { width: 22px; height: 22px; }
.pair h3 { margin-top: 18px; font-size: 25px; line-height: 1.2; letter-spacing: -0.01em; }
.pair p { margin: 10px 0 0; color: var(--text-2); }

.closing { padding: 96px 0 104px; background: var(--band); text-align: center; }
.closing img { width: 72px; height: 72px; margin: 0 auto 26px; border-radius: 22.5%; box-shadow: var(--shadow-cover); }
.closing p { margin: 16px auto 0; max-width: 30em; color: var(--text-2); }
.mail { white-space: nowrap; }
.closing .cta { justify-content: center; margin-top: 30px; }

/* ------------------------------------------------------------------ *
 * The legal pages
 * ------------------------------------------------------------------ */

.doc { padding: 40px 0 88px; }
.doc .wrap { max-width: 780px; }
.doc h1 { font-size: clamp(36px, 5vw, 52px); }
.doc .date { margin: 14px 0 0; color: var(--sub); font-size: 15px; }
.doc .summary { margin: 36px 0 8px; padding: 22px 26px; border-radius: 18px; background: var(--tint); border: 1px solid var(--tint-line); }
.doc .summary h2 { margin: 0; font: 600 13px/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); }
.doc .summary ul { margin: 12px 0 0; padding-left: 20px; }
.doc .summary li { margin: 6px 0; }
.doc h2 { margin: 48px 0 0; font-size: clamp(24px, 2.6vw, 29px); line-height: 1.25; letter-spacing: -0.01em; scroll-margin-top: 24px; }
.doc p, .doc li { color: var(--text-2); }
.doc p { margin: 14px 0 0; }
.doc ul { margin: 14px 0 0; padding-left: 22px; }
.doc li { margin: 8px 0; }
.doc strong { color: var(--text); font-weight: 600; }
.doc .toc { margin: 32px 0 0; padding: 0; list-style: none; columns: 2; column-gap: 32px; font-size: 15px; }
.doc .toc li { margin: 0 0 8px; break-inside: avoid; }
.doc .toc a { color: var(--sub); text-decoration: none; }
.doc .toc a:hover { color: var(--text); text-decoration: underline; }

/* ------------------------------------------------------------------ *
 * Narrow screens
 * ------------------------------------------------------------------ */

/* The phone above, its four cards two by two under it, still reading on the
   left and the words on the right. */
@media (max-width: 1099px) {
  .hero-side { flex: 1 1 100%; max-width: 34em; }
  .stage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "phone phone" "level words" "swap review";
    gap: 20px; max-width: 760px; margin: 48px auto 0;
  }
  .stage-phone { margin-bottom: 20px; }
  .t-level,
  .t-review,
  .t-swap { margin: 0; }
}

@media (max-width: 960px) {
  .feature .wrap { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .feature.flip .copy { order: 0; }
  .shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .shelf .gap { grid-column: auto; }
  .shelf-legend { display: none; }
}

@media (max-width: 720px) {
  body { font-size: 16.5px; }
  .wrap { padding: 0 16px; }
  .top { padding: 16px 0; }
  .nav .doc-link { display: none; }
  .hero { padding: 20px 0 56px; }
  .hero-head { gap: 22px; }
  .hero h1 { margin-top: 12px; }
  .hero .lead { font-size: 16.5px; }
  .br-narrow { display: inline; }
  /* The menu hangs under the whole headline, not under the word. */
  .pick { position: static; }
  .langmenu { right: 0; }
  /* The cards in a row to swipe through, the next one showing at the edge. */
  .stage { display: block; margin-top: 40px; }
  .tiles {
    display: flex; align-items: flex-start; gap: 12px;
    margin: 32px -16px 0; padding: 0 16px 8px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .tiles::-webkit-scrollbar { display: none; }
  .tile { flex: 0 0 300px; padding: 20px; scroll-snap-align: start; }
  .tile-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
  .tile-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--on-clay-hair); }
  .tile-dots span.on { background: var(--on-clay); }
  .feature,
  .shelf-section,
  .pair,
  .closing { padding: 72px 0; }
  .pair .wrap { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pair .card { padding: 24px 22px 26px; }
  .compare { padding: 24px 22px 10px; }
  .compare .sentence,
  .swap .line { font-size: 19px; }
  .swap { grid-template-columns: minmax(0, 1fr); padding: 22px; gap: 18px; }
  .swap .cover { width: 84px; }
  .shelf {
    display: flex; gap: 14px; margin: 36px -16px 0; padding: 0 16px 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .shelf::-webkit-scrollbar { display: none; }
  .shelf li { flex: 0 0 118px; scroll-snap-align: start; }
  .doc { padding: 24px 0 64px; }
  .doc .toc { columns: 1; }
  .doc .summary { padding: 18px 18px; }
}

@media (max-width: 360px) {
  .phone { zoom: 0.9; }
}