/* Every generated content page under test.befluent.net.
   Pairs with /_ds/styles.css, which supplies the tokens and the typeface — this
   file defines no colours and no sizes of its own, so the day the design system
   moves, these pages move with it.

   Standalone from the app on purpose. These are static files served beside it,
   not part of it: no bundle, no JavaScript, nothing to run before a crawler or
   a reader sees the text. Vite also hashes the app's stylesheet name on every
   build, so linking that one would break each deploy.

   The look is the cases article's (web/scripts/build-article.py): light ground,
   Onest, one teal accent. Before 2026-08-08 these pages were dark, on Manrope
   and Spectral, matching the test rather than the articles — ten pages that a
   reader arrives at from search, styled like the product they have not seen yet.
*/

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent-tag); color: var(--accent); }

/* ── shell ──────────────────────────────────────────────────────────────── */

.site {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline-soft);
}

.site-in {
  max-width: var(--w-container);
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font: 800 17px/1.3 var(--font-ui);
  letter-spacing: var(--ls-card);
}

.site-brand img {
  width: 30px;
  height: 30px;
  border-radius: var(--r-brand);
  object-fit: cover;
  flex: none;
}

.site-brand span {
  font: 500 15px/1.3 var(--font-ui);
  color: var(--text-muted);
}

/* The same pill the article's header carries, and the same one the test's own
   intro screen now uses. White on the gradient is the designer's call and it
   stays here: at 14px/700 on the darker stop it is about 3.2:1 — below the
   4.5:1 this size needs. Flagged rather than silently changed, because it is
   the brand's CTA and not this stylesheet's decision to make. */
.site-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  background: var(--brand-grad);
  box-shadow: var(--shadow-cta);
  color: #fff;
  font: 700 14px/1.2 var(--font-ui);
  text-decoration: none;
  transition: transform var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}

.site-cta:hover {
  transform: translateY(var(--lift-btn));
  box-shadow: var(--shadow-cta-hover);
}

/* How far the reader has got. Two and a half pixels under the header, filled by
   the script at the bottom of every page — with JS off it simply stays empty,
   which is why it is a bare strip and not a labelled control. */
.readbar {
  height: 2.5px;
  background: transparent;
}
.readbar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brand-grad-bar);
  transition: width 0.12s linear;
}

/* The article and its contents rail. Centred as a pair, so the article column
   keeps its measure and does not shift sideways when the rail disappears. */
.shell {
  display: flex;
  gap: 52px;
  align-items: flex-start;
  justify-content: center;
  max-width: var(--w-container);
  margin: 0 auto;
}

.wrap {
  max-width: 47rem;
  margin: 0 auto;
  padding: 54px 32px 90px;
  min-width: 0;
}

/* ── contents rail ──────────────────────────────────────────────────────── */

/* Second in the source, first on the screen. Reading order has to be article
   first — otherwise a keyboard walks seven fragment links before the headline —
   and `order` buys that without moving the rail visually. */
.rail {
  order: -1;
  width: 198px;
  flex: none;
  position: sticky;
  top: 92px;
  padding-top: 72px;
}

.rail-h {
  margin: 0 0 14px;
  font: var(--text-section);
  letter-spacing: var(--ls-section);
  text-transform: uppercase;
  color: var(--text-muted);
}

.rail nav { display: flex; flex-direction: column; gap: 2px; }

.rail a {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 7px 0;
  text-decoration: none;
  font: 500 13px/1.4 var(--font-ui);
  color: var(--text-secondary);
  transition: color var(--t-color) var(--ease);
}

/* The marker is a bar rather than a dot so it grows with a heading that wraps
   to three lines — a dot beside a three-line title reads as a bullet. */
.rail a i {
  width: 2px;
  flex: none;
  align-self: stretch;
  min-height: 16px;
  border-radius: 2px;
  background: var(--hairline-strong);
  transition: background var(--t-color) var(--ease);
}

.rail a:hover { color: var(--text); }
.rail a.on { color: var(--text); font-weight: 700; }
.rail a.on i { background: var(--accent-solid); }

/* Tabbing through the rail has to be visible. The ring is the design system's,
   pulled in a little so it does not collide with the neighbouring link. */
.rail a:focus-visible {
  outline: none;
  border-radius: 6px;
  box-shadow: var(--focus-ring-soft);
  color: var(--text);
}

/* Sticky header plus its progress strip, so an anchor does not land under it. */
h2[id] { scroll-margin-top: 92px; }

/* ── article ────────────────────────────────────────────────────────────── */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  padding: 6px 13px 6px 11px;
  border-radius: var(--r-pill);
  background: var(--accent-tag);
  font: var(--text-section);
  letter-spacing: var(--ls-section);
  text-transform: uppercase;
  color: var(--accent);
}

.flag {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0 1px rgba(22, 33, 31, 0.12);
  flex: none;
}
.flag i { flex: 1; }
.flag i:nth-child(1) { background: #fff; }
.flag i:nth-child(2) { background: #0039a6; }
.flag i:nth-child(3) { background: #d52b1e; }

.eyebrow a { color: inherit; text-decoration: none; }

h1 {
  font-weight: 800;
  font-size: clamp(32px, 5.4vw, 46px);
  line-height: 1.08;
  letter-spacing: var(--ls-display);
  margin: 0 0 20px;
  text-wrap: balance;
  color: var(--text);
}

h2 {
  font-weight: 800;
  font-size: clamp(23px, 3.6vw, 28px);
  line-height: 1.18;
  letter-spacing: var(--ls-h2);
  margin: 48px 0 14px;
  text-wrap: balance;
  color: var(--text);
}

p { margin: 0 0 17px; color: var(--text-body); }
p.lead { font-size: 19px; line-height: 1.55; color: var(--text-secondary); }
strong { color: var(--text); font-weight: 700; }
em { font-style: italic; }

a { color: var(--accent); }
a:hover { color: var(--accent-solid); }

ul { margin: 0 0 18px; padding-left: 22px; color: var(--text-body); }
li { margin-bottom: 7px; }

/* A correct Russian form, and a wrong one. Colour is never the only signal:
   the wrong form is struck through as well, so it survives being printed,
   being read by someone colourblind, and being quoted without styles. */
.ru { color: var(--text); font-weight: 600; }
.no {
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* Example blocks. The whole point of one is that two sentences differ by a
   single word, so the marker sits in its own column and the sentences line up
   under each other — a strikethrough alone made the reader hunt for it. */
.ex {
  margin: 0 0 22px;
  padding: 18px 20px;
  border-radius: var(--r-card);
  border: 1px solid var(--hairline);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.ex p { margin: 0 0 9px; padding-left: 26px; text-indent: -26px; }
.ex p:last-child { margin: 0; }
.ex .mark {
  display: inline-block;
  width: 26px;
  text-indent: 0;
  font-weight: 800;
  font-size: 15px;
}
.ex .ok { color: var(--text); }
.ex .ok .mark { color: var(--answer-right); }
.ex .bad { color: var(--text-secondary); }
.ex .bad .mark { color: var(--answer-wrong); }
.ex .bad .ru, .ex .bad .no { color: inherit; }
.ex .gloss {
  font-size: 15px;
  color: var(--text-muted);
  padding-left: 26px;
  text-indent: 0;
  margin-top: 11px;
}

/* ── the closing offer ──────────────────────────────────────────────────── */

.cta {
  margin: 52px 0 0;
  padding: 28px 26px;
  border: 1px solid var(--accent-tag);
  border-radius: var(--r-card);
  background: var(--accent-soft);
}
.cta p { margin: 0 0 18px; color: var(--text); }
.cta a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--brand-grad);
  box-shadow: var(--shadow-cta);
  color: #fff;
  font: 700 16px/1.2 var(--font-ui);
  text-decoration: none;
  padding: 15px 26px;
  border-radius: var(--r-pill);
  transition: transform var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
.cta a:hover {
  color: #fff;
  transform: translateY(var(--lift-btn));
  box-shadow: var(--shadow-cta-hover);
}

/* Cross-links, generated onto every page. Grouped rather than a flat list so a
   reader scanning for "the next level up" finds it without reading ten titles.
   This is most of why the sites currently holding these queries hold them. */
.more {
  margin-top: 60px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
}
.more h2 { font-size: 21px; margin: 0 0 18px; }
.more-h {
  margin: 0 0 8px;
  font: var(--text-section);
  letter-spacing: var(--ls-section);
  text-transform: uppercase;
  color: var(--text-muted);
}
.more-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.more a {
  padding: 9px 15px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--hairline);
  font: 600 14px/1.2 var(--font-ui);
  color: var(--text-body);
  text-decoration: none;
  transition: transform var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease),
    color var(--t-color) var(--ease);
}
.more a:hover {
  color: var(--accent);
  border-color: rgba(14, 155, 137, 0.32);
  transform: translateY(var(--lift-btn));
}

/* ── footer ─────────────────────────────────────────────────────────────── */

.site-foot {
  border-top: 1px solid var(--hairline);
  background: var(--surface);
}
.site-foot-in {
  max-width: var(--w-container);
  margin: 0 auto;
  padding: 26px 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}
.site-foot a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 14px/1.4 var(--font-ui);
  color: var(--accent);
  text-decoration: none;
}
.site-foot span { font: var(--text-meta); color: var(--text-muted); }

/* The rail goes before the article column narrows, not after: keeping both to
   the last pixel would buy a rail at the cost of the measure, and the measure
   is what the page is for. Same breakpoint as the cases article. */
@media (max-width: 1060px) {
  .rail { display: none; }
}

@media (max-width: 720px) {
  .site-in, .site-foot-in { padding-left: 20px; padding-right: 20px; }
  .wrap { padding-left: 20px; padding-right: 20px; }
  .site-brand span { display: none; }
  .more-cols { grid-template-columns: minmax(0, 1fr); }
}