/* =========================================================================
   ONE BOOST — guide.css
   Long-form guide pages (fps-optimization, windows-11-gaming, …).

   Builds ON TOP of legal.css: the guides reuse `.legal` / `.legal-wrap`
   for width, headings, bullets and the `.box` callout, so a guide reads
   like the policy pages and inherits every future fix to them. Only the
   pieces a guide needs and a policy does not live here.

   Everything is token-driven (var(--surface), var(--line), var(--red-ink))
   so a palette change reaches these pages too — no raw hex.
   ========================================================================= */

/* ── breadcrumb ─────────────────────────────────────────────────────── */
.crumbs { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  color: var(--text-3); font-size: 13.5px; font-weight: 600; margin-bottom: 22px; }
.crumbs a { color: var(--text-2); transition: color .18s; }
.crumbs a:hover { color: var(--red-ink); }

/* ── the short answer, first thing on the page ──────────────────────── */
/* Placed above every section on purpose: a reader who leaves after one
   paragraph should still leave with the answer, and answer engines quote
   the first substantive block far more often than the fifth. */
.answer-box {
  background: linear-gradient(180deg, var(--surface), var(--bg-soft));
  border: 1px solid var(--line); border-inline-start: 3px solid var(--red);
  border-radius: var(--radius); padding: 22px 26px; margin: 0 0 36px;
}
.answer-box p { margin: 0; color: var(--text); font-size: 16.5px; line-height: 1.9; }

/* ── definition cards (average vs 1% low vs frame time) ─────────────── */
.def-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 20px 0 22px; }
.def-card { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 18px 20px; }
.def-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 15.5px;
  color: var(--text); margin-bottom: 8px; direction: ltr; text-align: start; }
html[lang="ar"] .def-card h3 { font-family: var(--font-ar); direction: rtl; }
.def-card p { font-size: 14.5px; line-height: 1.75; margin: 0; }

/* ── cause list with a severity chip ────────────────────────────────── */
.cause-list { display: flex; flex-direction: column; gap: 14px; margin: 20px 0 26px; }
.cause { position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 24px; }
.cause h3 { font-family: var(--font-display); font-weight: 700; font-size: 17px;
  color: var(--text); margin: 10px 0 8px; line-height: 1.45; }
html[lang="ar"] .cause h3 { font-family: var(--font-ar); }
.cause p { margin: 0; font-size: 15.5px; line-height: 1.85; }

/* Severity is encoded in BOTH colour and word — colour alone is unreadable
   for a colour-blind reader and invisible to a crawler. */
.sev { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
  padding: 3px 10px; border-radius: 999px; }
.sev-hi  { color: #ff8a8a; background: color-mix(in srgb, #ff5c5c 14%, transparent); border: 1px solid color-mix(in srgb, #ff5c5c 32%, transparent); }
.sev-mid { color: #ffc46b; background: color-mix(in srgb, #ffa53b 14%, transparent); border: 1px solid color-mix(in srgb, #ffa53b 32%, transparent); }
.sev-low { color: var(--text-2); background: var(--surface-3); border: 1px solid var(--line-2); }

/* ── ordered steps ──────────────────────────────────────────────────── */
.steps { list-style: none; counter-reset: s; display: flex; flex-direction: column;
  gap: 12px; margin: 18px 0 24px; padding: 0; }
.steps li { counter-increment: s; position: relative; color: var(--text-2);
  font-size: 16px; line-height: 1.8; padding-inline-start: 42px; }
.steps li::before {
  content: counter(s); position: absolute; inset-inline-start: 0; top: 1px;
  width: 27px; height: 27px; border-radius: 9px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 13.5px;
  color: var(--red-bright);
  background: color-mix(in srgb, var(--red-ink) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--red-ink) 28%, transparent);
}

/* ── can / cannot, side by side ─────────────────────────────────────── */
/* The "cannot" column is not a disclaimer buried in small print — it gets
   the same width and weight as "can". A page that only lists what a
   product does is an advertisement; one that lists both is a guide. */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0 26px; }
.two-col > div { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px; }
.two-col h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin-bottom: 12px; }
html[lang="ar"] .two-col h3 { font-family: var(--font-ar); }
.col-can  { border-top: 3px solid #33d17a !important; }
.col-can h3  { color: #33d17a; }
.col-cant { border-top: 3px solid var(--line-2) !important; }
.col-cant h3 { color: var(--text-2); }
.two-col ul.bullets li::before { background: var(--line-2); }
.col-can ul.bullets li::before { background: #33d17a; }

/* ── inline call to action ──────────────────────────────────────────── */
.cta-inline { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 10px; }

/* ── h3 inside a guide (FAQ questions) ──────────────────────────────── */
.guide h3 { font-family: var(--font-display); font-weight: 700; font-size: 17.5px;
  color: var(--text); margin: 26px 0 8px; }
html[lang="ar"] .guide h3 { font-family: var(--font-ar); }
.guide .cause h3, .guide .def-card h3, .guide .two-col h3 { margin-top: 0; }

/* ── narrow screens ─────────────────────────────────────────────────── */
@media (max-width: 780px) {
  .def-grid, .two-col { grid-template-columns: 1fr; }
}