/* Jaweb marketing site. Every colour, radius, space and size comes from the brand kit
   (Design/brand/system/project/tokens.json). Right to left first. Tangerine (--accent)
   is only for time and arrival: never text, never a button. */

:root {
  color-scheme: light dark;
  --canvas: #F2F2EF; --card: #FFFFFF; --wash: #EDEDEA; --line: #E4E4E0;
  --ink: #111110; --ink-muted: #6B6B65;
  --action: #111110; --on-action: #FFFFFF;
  --accent: #EB5A0F; --on-accent: #111110;
  --correct: #16A34A; --on-correct: #FFFFFF; --wrong: #DC2626; --on-wrong: #FFFFFF;
  --focus: #111110;
  --elevation-1: 0 1px 2px rgba(17,17,16,0.05), 0 4px 14px rgba(17,17,16,0.04);
  --phone-edge: #0B0B0E;

  --font-sans: "IBM Plex Sans Arabic", "Geeza Pro", system-ui, sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --radius-tile: 20px; --radius-card: 26px; --radius-pill: 999px;
  --hit: 44px; --icon-button: 38px; --action-height: 52px; --tile-height: 58px; --ring: 84px;
  --page: 1120px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #0F0F0E; --card: #1A1A18; --wash: #242422; --line: #2C2C29;
    --ink: #F4F4F1; --ink-muted: #A3A39C;
    --action: #F4F4F1; --on-action: #111110;
    --accent: #FF7A2E; --on-accent: #111110;
    --correct: #22C55E; --on-correct: #111110; --wrong: #F05252; --on-wrong: #111110;
    --focus: #F4F4F1;
    --elevation-1: 0 0 0 1px rgba(255,255,255,0.06);
    --phone-edge: #2A2A27;
  }
}

/* The share card is the picture people post: always the light theme, like in the app. */
.theme-light {
  --canvas: #F2F2EF; --card: #FFFFFF; --wash: #EDEDEA; --line: #E4E4E0;
  --ink: #111110; --ink-muted: #6B6B65; --action: #111110; --on-action: #FFFFFF;
  --accent: #EB5A0F; --elevation-1: 0 1px 2px rgba(17,17,16,0.05), 0 4px 14px rgba(17,17,16,0.04);
  color: var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-wrap: anywhere;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; inset-inline-start: var(--space-4); top: -60px; z-index: 10; background: var(--action); color: var(--on-action); padding: 10px 18px; border-radius: var(--radius-pill); font-weight: 700; text-decoration: none; }
.skip:focus { top: var(--space-4); }

.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--space-4); }
@media (min-width: 768px) { .wrap { padding-inline: var(--space-5); } }

/* ---------- Header and footer ---------- */
.site-head { padding-block: var(--space-4); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.brand { display: inline-flex; align-items: center; min-height: var(--hit); padding-block: 6px; }
.brand img { height: 36px; width: auto; }
.head-links { display: flex; gap: var(--space-1); }
.head-links a, .foot-links a {
  min-height: var(--hit); display: inline-flex; align-items: center; padding-inline: 12px;
  border-radius: var(--radius-pill); text-decoration: none; font-size: 14px; font-weight: 500; color: var(--ink-muted);
}
.foot-links button {
  font: inherit; border: 0; background: none; cursor: pointer;
  min-height: var(--hit); display: inline-flex; align-items: center; padding-inline: 12px;
  border-radius: var(--radius-pill); font-size: 14px; font-weight: 500; color: var(--ink-muted);
}
.foot-links button[hidden] { display: none; }
.head-links a:hover, .foot-links a:hover, .foot-links button:hover { color: var(--ink); background: var(--wash); }
.head-links a[aria-current="page"] { color: var(--ink); background: var(--wash); }

.site-foot { padding-block: var(--space-6) 40px; margin-top: 56px; border-top: 1px solid var(--line); }
.site-foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); }
.foot-brand { display: flex; align-items: center; gap: var(--space-3); color: var(--ink-muted); font-size: 14px; font-weight: 500; }
.foot-brand img { width: 28px; height: 28px; }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-inline-start: -12px; }

/* ---------- Shared pieces from the kit ---------- */
.card { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--elevation-1); }
.btn {
  font: inherit; font-size: 17px; font-weight: 700; min-height: var(--action-height); padding: 0 var(--space-5);
  border: 0; border-radius: var(--radius-pill); background: var(--action); color: var(--on-action);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  text-decoration: none; cursor: pointer; transition: transform .12s cubic-bezier(.23,1,.32,1);
}
.btn:active { transform: scale(.97); }
.btn--quiet { background: var(--card); color: var(--ink); box-shadow: var(--elevation-1); }
.btn svg { width: 20px; height: 20px; flex: none; }
.store {
  /* Link to the live App Store page (app 6833871335). */
  gap: 10px; padding-inline: 22px 26px;
}
.store svg { width: 22px; height: 22px; }
.store small { display: block; font-size: 12px; line-height: 14px; font-weight: 500; opacity: .8; }
.store b { display: block; font-size: 17px; line-height: 20px; }

.badge { display: inline-flex; align-items: center; gap: 6px; background: var(--wash); color: var(--ink); border-radius: var(--radius-pill); padding: 3px 10px 3px 4px; font-size: 12.5px; line-height: 20px; font-weight: 700; }
.badge--plain { padding: 3px 10px; }
.mark { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; }
.mark svg { width: 12px; height: 12px; }
.mark--correct { background: var(--correct); color: var(--on-correct); }
.mark--wrong { background: var(--wrong); color: var(--on-wrong); }
.cat { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }

@property --p { syntax: "<percentage>"; inherits: true; initial-value: 70%; }
.ring {
  --p: 70%; width: var(--ring); height: var(--ring); border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: conic-gradient(var(--accent) 0 var(--p), var(--wash) var(--p) 100%);
}
.ring.is-running { transition: --p 1s linear; }
.ring b { width: calc(var(--ring) - 14px); height: calc(var(--ring) - 14px); border-radius: 50%; background: var(--card); display: grid; place-items: center; font-size: 30px; line-height: 1; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ring--low b { color: var(--wrong); }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.tile {
  font: inherit; min-height: var(--tile-height); border: 0; border-radius: var(--radius-tile);
  background: var(--card); color: var(--ink); box-shadow: var(--elevation-1);
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 6px;
  transition: transform .12s cubic-bezier(.23,1,.32,1), opacity .2s ease-out;
}
button.tile { cursor: pointer; }
button.tile:active { transform: scale(.97); }
button.tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-tile); }
.tile--selected { background: var(--action); color: var(--on-action); }
.tile--correct { box-shadow: inset 0 0 0 2px var(--correct); }
.tile--selected.tile--correct { box-shadow: inset 0 0 0 3px var(--correct); }
.tile--wrong { box-shadow: inset 0 0 0 3px var(--wrong); }
.tile--dim { opacity: .45; }
.tile--word { font-size: 16px; line-height: 22px; }
.tile svg { width: 40px; height: 40px; }
.tile:disabled { cursor: default; }

/* ---------- Sections ---------- */
main { display: block; }
figure { margin: 0; }
.section { padding-block: 56px 0; }
@media (min-width: 1024px) { .section { padding-block: 88px 0; } }
.section-head { display: grid; gap: var(--space-3); max-width: 620px; margin-bottom: var(--space-6); }
.eyebrow { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-muted); }
.h2 { font-size: 28px; line-height: 36px; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
@media (min-width: 1024px) { .h2 { font-size: 36px; line-height: 46px; } }
.lead { font-size: 17px; line-height: 28px; color: var(--ink-muted); text-wrap: pretty; }

/* Hero */
.hero { padding-block: var(--space-4) 0; }
.hero .wrap { display: grid; gap: 40px; align-items: center; }
.hero-text { display: grid; gap: var(--space-5); justify-items: start; }
.hero h1 { font-size: 36px; line-height: 50px; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; max-width: 13em; }
.hero h1 .ltr { display: inline; }
.hero .lead { max-width: 30em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.hero-note { font-size: 14px; line-height: 20px; color: var(--ink-muted); font-weight: 500; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.hero-note span { display: inline-flex; align-items: center; gap: 6px; }
.hero-note svg { width: 18px; height: 18px; }
@media (min-width: 600px) { .hero h1 { font-size: 46px; line-height: 62px; } }
@media (min-width: 960px) {
  .hero { padding-block: 40px 0; }
  .hero .wrap { grid-template-columns: 1.1fr .9fr; gap: 56px; }
  .hero h1 { font-size: 60px; line-height: 80px; }
}

/* Phone mockup (direction C) */
.phone-stage { position: relative; display: grid; justify-items: center; padding-block: 12px 28px; }
.phone {
  width: 292px; max-width: calc(100vw - 52px); height: 600px; border-radius: 42px; overflow: hidden;
  background: var(--canvas); color: var(--ink); display: flex; flex-direction: column; direction: rtl;
  box-shadow: 0 0 0 9px var(--phone-edge), 0 24px 60px rgba(17,17,16,.16);
}
.sb { display: flex; justify-content: space-between; padding: 14px 28px 4px; font-size: 12px; font-weight: 700; direction: ltr; font-variant-numeric: tabular-nums; }
.sb i { display: inline-flex; gap: 3px; align-items: end; }
.sb i span { width: 3px; height: 5px; background: currentColor; border-radius: 1px; }
.sb i span:nth-child(2) { height: 7px; } .sb i span:nth-child(3) { height: 9px; } .sb i span:nth-child(4) { height: 11px; }
.phone-top { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 10px; }
.phone-top img { height: 26px; width: auto; }
.score { height: var(--icon-button); padding: 0 12px 0 8px; border-radius: var(--radius-pill); background: var(--action); color: var(--on-action); display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 15px; }
.qcard { margin: 4px 14px 0; flex: 1; display: grid; align-content: center; justify-items: center; gap: 14px; padding: var(--space-5) var(--space-4); }
.qcard .prompt { font-size: 42px; line-height: 52px; font-weight: 700; letter-spacing: -.02em; }
.qcard .result { min-height: 26px; display: grid; place-items: center; }
.qcard .result .badge { transition: opacity .2s ease-out; }
.qcard .result[data-shown="false"] .badge { opacity: 0; }
.phone .tiles { padding: 12px 14px 26px; }
.arrival {
  position: absolute; inset-inline-end: 0; top: 64px; width: 216px; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 12px 12px 16px; padding-inline: 16px 12px;
}
.arrival b { display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 22px; }
.arrival .cat { display: block; margin-top: 2px; padding-inline-start: 16px; }
.pill-sm { height: 38px; padding: 0 18px; border-radius: var(--radius-pill); background: var(--action); color: var(--on-action); display: inline-grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
@media (max-width: 420px) { .arrival { display: none; } }
@media (min-width: 960px) { .arrival { inset-inline-end: -8px; top: 120px; } }

/* Steps */
.steps { display: grid; gap: var(--space-3); list-style: none; margin: 0; padding: 0; counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { padding: var(--space-5); display: grid; gap: var(--space-3); align-content: start; }
.step-top { display: flex; align-items: center; justify-content: space-between; }
.step-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--wash); display: grid; place-items: center; position: relative; }
.step-icon svg { width: 24px; height: 24px; }
.step-icon .dot { position: absolute; top: 9px; inset-inline-end: 9px; box-shadow: 0 0 0 2px var(--wash); }
.step-num { font-size: 14px; font-weight: 700; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.step h3 { font-size: 20px; line-height: 30px; font-weight: 700; }
.step p { color: var(--ink-muted); }
.mini-ring { --p: 70%; width: 24px; height: 24px; border-radius: 50%; background: conic-gradient(var(--accent) 0 var(--p), transparent var(--p) 100%); display: grid; place-items: center; }
.mini-ring::after { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--wash); }

/* Question kinds */
.kinds { display: grid; gap: var(--space-3); }
@media (min-width: 900px) { .kinds { grid-template-columns: repeat(3, 1fr); } }
.kind { padding: var(--space-5) var(--space-4) var(--space-4); display: grid; gap: var(--space-4); grid-template-rows: auto auto 1fr auto; }
@media (min-width: 900px) { .kind { padding-inline: var(--space-5); } }
.kind-head { display: flex; align-items: center; gap: var(--space-3); }
.kind-head .step-icon { width: 44px; height: 44px; }
.kind h3 { font-size: 20px; line-height: 28px; font-weight: 700; }
.kind > p { color: var(--ink-muted); }
.try { background: var(--canvas); border-radius: var(--radius-tile); padding: var(--space-4); display: grid; gap: var(--space-3); align-content: start; }
.try-q { display: grid; justify-items: center; gap: var(--space-2); padding-block: var(--space-2); min-height: 92px; align-content: center; text-align: center; }
.try-q .prompt { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -.01em; }
.try-q .ask { font-size: 15px; line-height: 22px; font-weight: 700; }
.try .tiles .tile { min-height: 56px; }
.try-shapes { display: flex; align-items: center; justify-content: center; gap: var(--space-4); }
.try-shapes svg { width: 72px; height: 72px; }
.try-shapes .vs { font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.hint { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ink-muted); }
.try-foot { min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.again { font: inherit; font-size: 14px; font-weight: 500; color: var(--ink-muted); background: none; border: 0; min-height: var(--hit); padding: 0 12px; margin-inline-end: -12px; border-radius: var(--radius-pill); cursor: pointer; }
.again:hover { color: var(--ink); background: var(--wash); }
.again[hidden] { display: none; }
.kinds-note { margin-top: var(--space-5); color: var(--ink-muted); font-size: 15px; max-width: 640px; }

/* Fair play */
.fair { padding: var(--space-5) var(--space-4); display: grid; gap: var(--space-5); align-items: center; }
@media (min-width: 900px) { .fair { grid-template-columns: 1fr 1.1fr; padding: 48px; gap: 48px; } }
.fair .section-head { margin: 0; }
.people { display: grid; gap: var(--space-2); }
.person { display: flex; align-items: center; gap: var(--space-3); background: var(--canvas); border-radius: var(--radius-tile); padding: 12px var(--space-4); }
.av { width: 32px; height: 32px; border-radius: 50%; background: var(--wash); color: var(--ink); display: grid; place-items: center; font-size: 13px; font-weight: 700; flex: none; }
.person .who { font-size: 14px; font-weight: 500; min-width: 3.5em; }
.person .q { margin-inline-start: auto; font-size: 20px; line-height: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.person .q svg { width: 30px; height: 30px; }
.person .cat { min-width: 3em; }
.person--you { background: var(--wash); }
.person--you .av { background: var(--action); color: var(--on-action); }

/* Ranking + share */
.rank-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
@media (min-width: 900px) { .rank-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); } }
.panel-cap { margin-top: var(--space-3); font-size: 14px; line-height: 20px; color: var(--ink-muted); text-align: center; }
.rank-box { display: grid; gap: var(--space-3); max-width: 400px; width: 100%; margin-inline: auto; }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--wash); border-radius: var(--radius-pill); padding: 4px; font-size: 14px; font-weight: 700; text-align: center; color: var(--ink-muted); }
.seg span { padding: var(--space-2); border-radius: var(--radius-pill); }
.seg .on { background: var(--card); color: var(--ink); box-shadow: var(--elevation-1); }
.list { padding: 4px var(--space-4); }
.row { display: flex; align-items: center; gap: 10px; padding: 12px 0; font-size: 15px; font-weight: 500; }
.row + .row { border-top: 1px solid var(--line); }
.row .av { width: 30px; height: 30px; }
.av--first { background: var(--accent); color: var(--on-accent); }
.row--you { background: var(--action); color: var(--on-action); margin-inline: -8px; padding-inline: 8px; border-radius: 14px; }
.row--you + .row, .row + .row--you { border-top-color: transparent; }
.row--you .av { background: var(--on-action); color: var(--action); }
.row--you .pts { color: var(--on-action); }
.row .pts { margin-inline-start: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

.share-wrap { display: grid; justify-items: center; }
.share {
  width: 100%; max-width: 360px; aspect-ratio: 1 / 1; background: var(--canvas); border-radius: var(--radius-card);
  padding: 24px; display: grid; grid-template-rows: auto 1fr auto; gap: 12px; direction: rtl;
  box-shadow: 0 1px 2px rgba(17,17,16,0.05), 0 4px 14px rgba(17,17,16,0.04), 0 0 0 1px rgba(17,17,16,0.04);
}
.share > img { height: 32px; width: auto; }
.share-panel { background: var(--card); border-radius: var(--radius-card); display: grid; justify-items: center; align-content: center; gap: 2px; box-shadow: var(--elevation-1); }
.share-panel b { font-size: 72px; line-height: 76px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.share-panel span { font-size: 16px; color: var(--ink-muted); font-weight: 500; }
.share-head { display: grid; gap: 4px; justify-items: start; }
.share-head img { height: 32px; width: auto; }
.share-head span { font-size: 13px; color: var(--ink-muted); font-weight: 500; }
.share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: center; }
.share-tile { background: var(--card); border-radius: 20px; box-shadow: var(--elevation-1); padding: 12px 8px; display: grid; justify-items: center; gap: 2px; }
.share-tile b { font-size: 32px; line-height: 36px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 6px; }
.share-tile b.best { color: var(--accent); }
.share-tile b .ok { font-style: normal; width: 18px; height: 18px; border-radius: 50%; background: var(--correct); color: var(--on-correct); font-size: 11px; display: grid; place-items: center; }
.share-tile span { font-size: 12px; color: var(--ink-muted); font-weight: 500; text-align: center; }
.share-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-muted); }
.share-foot .pill-sm { height: 34px; font-size: 13px; padding: 0 14px; }
.rank-text { display: grid; gap: var(--space-2); margin-top: var(--space-5); max-width: 520px; }
.rank-text h3 { font-size: 20px; line-height: 28px; font-weight: 700; }
.rank-text p { color: var(--ink-muted); }

/* FAQ */
.faq { padding: 4px var(--space-4); max-width: 800px; }
@media (min-width: 768px) { .faq { padding-inline: var(--space-5); } }
.faq details + details { border-top: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; min-height: 60px; padding-block: 16px; display: flex; align-items: center;
  justify-content: space-between; gap: var(--space-4); font-size: 17px; line-height: 26px; font-weight: 700; border-radius: 8px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 20px; height: 20px; flex: none; color: var(--ink-muted); transition: transform .2s cubic-bezier(.23,1,.32,1); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details p { padding-bottom: 18px; color: var(--ink-muted); max-width: 640px; }
@media (prefers-reduced-motion: reduce) { .faq summary svg, .tile, .btn, .qcard .result .badge { transition: none; } }

/* Closing call */
.closing { padding: 40px var(--space-4); display: grid; gap: var(--space-5); justify-items: center; text-align: center; }
.closing img { width: 72px; height: 72px; border-radius: 16px; }
@media (min-width: 768px) { .closing { padding: 56px; } }

/* ---------- Text pages (privacy, support) ---------- */
.doc { max-width: 760px; margin-inline: auto; }
.doc-head { display: grid; gap: var(--space-3); padding-block: var(--space-5) var(--space-6); }
.doc-head h1 { font-size: 34px; line-height: 44px; font-weight: 700; letter-spacing: -.01em; }
@media (min-width: 768px) { .doc-head { padding-block: 40px; } .doc-head h1 { font-size: 44px; line-height: 56px; } }
.doc-body { padding: var(--space-5) var(--space-4); display: grid; gap: var(--space-6); }
@media (min-width: 768px) { .doc-body { padding: 40px 48px; } }
.doc-body section { display: grid; gap: var(--space-3); }
.doc-body h2 { font-size: 21px; line-height: 30px; font-weight: 700; }
.doc-body p, .doc-body li { color: var(--ink); }
.doc-body .muted { color: var(--ink-muted); }
.doc-body ul { margin: 0; padding-inline-start: 22px; display: grid; gap: var(--space-2); }
.doc-body li::marker { color: var(--ink-muted); }
.doc-body strong { font-weight: 700; }
.facts { display: grid; gap: var(--space-2); grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .facts { grid-template-columns: 1fr 1fr; } }
.facts li { display: flex; gap: 10px; align-items: center; background: var(--canvas); border-radius: var(--radius-tile); padding: 12px var(--space-4); font-weight: 500; }
.facts svg { width: 20px; height: 20px; flex: none; }
.placeholder { display: inline-block; direction: ltr; unicode-bidi: isolate; background: var(--wash); color: var(--ink); border: 1.5px dashed var(--ink-muted); border-radius: 8px; padding: 0 8px; font-weight: 700; font-size: .95em; }
.contact { display: grid; gap: var(--space-3); padding: var(--space-5) var(--space-4); }
@media (min-width: 768px) { .contact { padding: 32px 48px; } }
.contact .addr { font-size: 20px; line-height: 30px; }
.path { font-weight: 700; }
.qa { display: grid; gap: var(--space-2); }
.qa + .qa { border-top: 1px solid var(--line); padding-top: var(--space-5); }
.qa h3 { font-size: 18px; line-height: 28px; font-weight: 700; }
.qa ol { margin: 0; padding: 0; list-style: none; counter-reset: qa; display: grid; gap: var(--space-2); }
.qa ol li { counter-increment: qa; position: relative; padding-inline-start: 36px; }
.qa ol li::before { content: counter(qa); position: absolute; inset-inline-start: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; background: var(--wash); color: var(--ink); font-size: 13px; line-height: 24px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.doc-body--after { margin-top: var(--space-3); }
.doc-body a:not(.btn), .contact a:not(.btn) { font-weight: 500; text-underline-offset: 3px; }