/* Muraqib website. The product's own palette, fonts and radius (see the app's
   src/app/globals.css): a light page, with dark "stage" sections that are the
   app itself. Logical properties throughout, so Arabic mirrors correctly. */

@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/space-grotesk-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("/assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("/assets/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("/assets/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --subtle: #f3f5f4;
  --line: #dfe3e1;
  --line-strong: #c9cfcc;
  --ink: #0b100d;
  --ink-2: #3e4944;
  --ink-3: #5f6b66;
  --brand: #0c7a5b;
  --brand-strong: #0a5f49;
  --brand-soft: #e7f4ed;
  --brand-bright: #3fc79f;
  --on-brand: #f4fbf8;
  --stage: #0e130f;
  --stage-2: #18211c;
  --stage-line: #2e3a33;
  --stage-ink: #e3ebe5;
  --stage-ink-2: #aebfb4;
  --lv1: #8ed36d;
  --lv2: #3fc79f;
  --lv3: #7fb8f2;
  --lv4: #ffb454;
  --lv5: #f2867b;
  --cta: #3fc79f;
  --cta-hover: #34b38d;
  --on-cta: #04211a;
  --warn-soft: #f9eeda;
  --warn-ink: #7a4508;
  --absent-soft: #fbe4e1;
  --absent-ink: #8a2a1f;
  --paid-soft: #ebe7f5;
  --paid-ink: #4b3c85;
  --header-bg: rgb(255 255 255 / .9);
  --wash: linear-gradient(135deg, #cdf2e2 0%, #d6ebf6 52%, #e3e2f8 100%);
  --r-sm: 6px;
  --r: 6px;
  --r-lg: 16px;
  --shadow: 0 1px 2px rgb(16 24 20 / .06), 0 10px 30px -12px rgb(16 24 20 / .18);
  --shadow-lg: 0 40px 90px -30px rgb(6 12 9 / .55);
  --font-body: "Inter", system-ui, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-ar: "IBM Plex Sans Arabic", "Inter", "Segoe UI", Tahoma, sans-serif;
  --wrap: 1180px;
  --gap: clamp(1rem, 2.5vw, 1.75rem);
  --section: clamp(4rem, 9vw, 7.5rem);
  /* "only": browsers with a forced dark mode leave the page as designed. */
  color-scheme: only light;
}

/* Dark, only when the visitor picks it with the header switch (site.js; the
   saved choice is applied by the inline script before the page paints). The
   app itself is dark by default, so this is Muraqib's other native look. */
:root[data-theme="dark"] {
  --bg: #0b100d;
  --surface: #121a15;
  --subtle: #16201a;
  --line: #26322b;
  --line-strong: #3b4a41;
  --ink: #e8efe9;
  --ink-2: #b8c6bd;
  --ink-3: #95a59b;
  --brand: #3fc79f;
  --brand-strong: #63ddb8;
  --brand-soft: #173428;
  --on-brand: #04211a;
  --stage: #060a08;
  --stage-2: #101914;
  --warn-soft: #3a2e17;
  --warn-ink: #f5c77e;
  --absent-soft: #3a1d1a;
  --absent-ink: #f2a79d;
  --paid-soft: #2a2540;
  --paid-ink: #cfc4f7;
  --header-bg: rgb(11 16 13 / .88);
  --wash: linear-gradient(135deg, #103a2d 0%, #0f2c3c 52%, #211f3f 100%);
  --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 10px 30px -12px rgb(0 0 0 / .6);
  color-scheme: dark only;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--font-body);
  text-rendering: optimizeLegibility;
}
[lang="ar"] body, body:lang(ar) { font-family: var(--font-ar); line-height: 1.8; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--brand-bright); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); line-height: 1.12; margin: 0 0 .6em; text-wrap: balance; letter-spacing: -.015em; }
:lang(ar) :is(h1, h2, h3) { font-family: var(--font-ar); letter-spacing: 0; line-height: 1.35; font-weight: 700; }
h1 { font-size: clamp(2.3rem, 5.4vw, 4.1rem); font-weight: 700; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.65rem); font-weight: 700; }
h3 { font-size: 1.14rem; font-weight: 700; letter-spacing: -.005em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gap)); margin-inline: auto; }
.narrow { max-width: 760px; }
.lede { font-size: clamp(1.08rem, 1.6vw, 1.24rem); color: var(--ink-2); max-width: 62ch; }
.muted, .small { color: var(--ink-3); }
.small { font-size: .92rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 1rem; top: -3rem; z-index: 100; background: var(--ink); color: var(--bg); padding: .6rem 1rem; border-radius: var(--r-sm); }
.skip:focus { top: 1rem; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .7rem 1.35rem; border-radius: var(--r);
  font-weight: 600; font-size: 1rem; text-decoration: none; border: 1.5px solid transparent;
  transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--cta); color: var(--on-cta); }
.btn-primary:hover { background: var(--cta-hover); color: var(--on-cta); }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn-secondary { border-color: var(--ink); color: var(--ink); background: var(--surface); }
.btn-secondary:hover { background: var(--subtle); color: var(--ink); }
.btn-sm { min-height: 40px; padding: .45rem 1rem; font-size: .95rem; }
.stage .btn-primary { background: var(--brand-bright); color: #04211a; }
.stage .btn-primary:hover { background: #63ddb8; color: #04211a; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-block: 1.6rem 0; }
.text-link { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; display: inline-flex; gap: .35rem; align-items: baseline; }
.text-link:hover { text-decoration-thickness: 2px; }

/* ----------------------------------------------------------- the spectrum */
/* The app's five performance levels, Excellent to Weak, as the site's rule. */
.kicker { display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem; font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
:lang(ar) .kicker { letter-spacing: 0; font-size: .92rem; text-transform: none; }
.spectrum { display: inline-flex; gap: 3px; }
.spectrum i { width: 14px; height: 4px; border-radius: 2px; background: var(--lv1); }
.spectrum i:nth-child(2) { background: var(--lv2); }
.spectrum i:nth-child(3) { background: var(--lv3); }
.spectrum i:nth-child(4) { background: var(--lv4); }
.spectrum i:nth-child(5) { background: var(--lv5); }
.stage .kicker { color: var(--stage-ink-2); }

/* ----------------------------------------------------------------- header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: saturate(1.4) blur(12px); border-block-end: 1px solid var(--line); }
.header-row { display: flex; align-items: center; gap: 1rem; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
:lang(ar) .brand { font-family: var(--font-ar); }
.brand img { border-radius: 9px; }
.site-nav { display: flex; align-items: center; gap: 1.5rem; margin-inline-start: auto; }
.site-nav ul { display: flex; gap: 1.35rem; list-style: none; }
.site-nav ul a { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .98rem; }
.site-nav ul a:hover { color: var(--ink); }
.nav-end { display: flex; align-items: center; gap: .9rem; }
.lang-link { font-weight: 600; text-decoration: none; color: var(--ink); padding: .35rem .6rem; border-radius: var(--r-sm); }
.lang-link:hover { background: var(--subtle); color: var(--ink); }
.lang-link:lang(ar) { font-family: var(--font-ar); }
/* Light/dark switch: a moon in light mode, a sun in dark mode. */
.theme-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; transition: background-color .15s, border-color .15s; }
.theme-toggle:hover { background: var(--subtle); border-color: var(--line-strong); }
.theme-toggle:active { background: var(--line); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun, :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
.nav-toggle { display: none; margin-inline-start: auto; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); cursor: pointer; }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 1px; margin-inline: auto; position: relative; transition: transform .2s; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; inset-inline-start: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 980px) {
  .js .nav-toggle { display: block; }
  .js .site-nav { position: fixed; inset: 68px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--gap) 1.5rem; background: var(--bg); border-block-end: 1px solid var(--line); box-shadow: var(--shadow); display: none; }
  .js .site-nav.open { display: flex; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav ul a { display: block; padding: .85rem 0; border-block-end: 1px solid var(--line); font-size: 1.05rem; }
  .nav-end { justify-content: space-between; padding-block-start: 1rem; }
  .no-js .site-nav, html:not(.js) .site-nav { flex-wrap: wrap; }
}

/* ------------------------------------------------------------------- hero */
.hero { padding-block: clamp(2.5rem, 6vw, 5rem) var(--section); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.eyebrow { font-size: .92rem; color: var(--ink-2); font-weight: 600; margin-block-end: 1.1rem; }
.hero h1 { margin-block-end: 1.1rem; font-size: clamp(2.2rem, 4.2vw, 3.45rem); }
.hero-points { list-style: none; margin-block-start: 1.8rem; display: grid; gap: .55rem; color: var(--ink-2); font-size: .98rem; }
.hero-points li { display: flex; gap: .6rem; align-items: baseline; }
/* A phone visitor learns it is a computer program before tapping Download. */
.phone-note { display: none; }
@media (max-width: 760px) { .phone-note { display: block; margin-block: 1.2rem 0; padding-inline-start: .8rem; border-inline-start: 3px solid var(--ink); color: var(--ink-2); font-size: .95rem; } }
.hero-points li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--ink); transform: translateY(-1px); }
.hero-shot { margin-inline-end: calc(-1 * clamp(0rem, 8vw, 9rem)); }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-shot { margin-inline-end: 0; }
}

/* -------------------------------------------------------------- hero demo */
/* One quiz, four real screens: copy, paste, the student, the report. */
/* The text lines up with the demo's edge; only its lines are kept short. */
.hero-copy > * { max-width: 880px; }
.hero-copy .hero-points { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; }
.demo { margin: clamp(2.2rem, 5vw, 3.2rem) 0 0; }
.demo-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; margin-block-end: 1rem; }
.demo-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 2vw, 1.3rem); }
:lang(ar) .demo-title { font-family: var(--font-ar); }
.demo-steps { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.demo-steps button { position: relative; overflow: hidden; min-height: 40px; padding: .35rem .95rem; font: inherit; font-weight: 600; font-size: .95rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink-2); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.demo-steps button:hover { border-color: var(--ink); color: var(--ink); }
.demo-steps button span { color: var(--ink-3); }
.demo-steps button[aria-current="step"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.demo-steps button[aria-current="step"] span { color: var(--brand-bright); }
.demo-steps button::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 0; width: 0; height: 3px; background: var(--brand-bright); }
.demo.is-running .demo-steps button[aria-current="step"]::after { animation: step-run 4200ms linear forwards; }
@keyframes step-run { to { width: 100%; } }
html:not(.js) .demo-steps, html:not(.js) .demo-pause { display: none; }
.demo-stage { display: grid; padding: clamp(.5rem, 2.2vw, 1.75rem); border-radius: var(--r-lg); background: var(--wash); }
.demo-scene { grid-area: 1 / 1; position: relative; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s .6s; }
.demo-scene.on { opacity: 1; visibility: visible; transition: opacity .6s ease; }
.demo-scene:not(.on) .spot { animation: none; }
.demo-scene.on .spot { animation: spot-in .5s .3s ease both; }
/* Copy: a spreadsheet, drawn in the page, over the empty grid it will fill. */
.scene-copy .spot-frame img { filter: brightness(.6); }
.sheet-card { position: absolute; inset-inline-start: 3%; top: 9%; width: min(38%, 400px); padding: .8rem .8rem .7rem; background: #fff; color: #1f2a24; border-radius: 10px; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .65), 0 0 0 1px rgb(0 0 0 / .08); }
.sheet-label { display: flex; align-items: center; gap: .45rem; margin: 0 0 .5rem; font-size: .8rem; font-weight: 600; color: #4b5d52; }
.sheet-label::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: #1f7a4a; }
.sheet { width: 100%; border-collapse: collapse; font-size: .78rem; font-variant-numeric: tabular-nums; }
.sheet th, .sheet td { padding: .16rem .45rem; border: 1px solid #dfe5e1; text-align: start; white-space: nowrap; }
.sheet thead th, .sheet tbody th { background: #f1f4f2; color: #4a6b5f; font-weight: 500; text-align: center; }
.sheet tbody th { width: 1.7rem; }
.sheet .sheet-head td { font-weight: 700; }
.sheet .col-b { width: 4.2rem; text-align: center; }
.scene-copy.on .sheet .is-copied { background: rgb(31 122 74 / .12); border-inline: 2px solid #1f7a4a; }
.scene-copy.on .sheet tbody tr:nth-child(2) .is-copied { border-block-start: 2px solid #1f7a4a; }
.scene-copy.on .sheet tbody tr:last-child .is-copied { border-block-end: 2px solid #1f7a4a; }
.sheet-toast { margin: .6rem 0 0; font-size: .8rem; font-weight: 600; color: #0a5f49; opacity: 0; }
.sheet-toast kbd { font: 600 .7rem/1 var(--font-body); padding: .1rem .3rem; border: 1px solid #b9c6ba; border-radius: 4px; background: #f6f7f2; }
.scene-copy.on .sheet-card { animation: card-in .6s ease both; }
.scene-copy.on .sheet-toast { animation: fade-to-on .4s 1.1s ease forwards; }
@keyframes card-in { from { opacity: 0; translate: 0 16px; } }
@keyframes fade-to-on { to { opacity: 1; } }
/* Paste: the same grid, filled. */
.demo-chip { position: absolute; inset-inline-end: 3%; top: 4%; margin: 0; padding: .35rem .9rem; background: var(--brand-bright); color: #04211a; font-weight: 700; font-size: .9rem; border-radius: 999px; box-shadow: 0 10px 30px -10px rgb(0 0 0 / .55); opacity: 0; }
.scene-paste.on .demo-chip { animation: fade-to-on .4s .5s ease forwards; }
html:not(.js) .demo-chip { opacity: 1; }
/* Report: the family report, on a desk. */
.demo-desk { display: grid; place-items: center; height: 100%; padding-block: 3%; background: radial-gradient(80% 80% at 50% 30%, #e2e9e2, #c8d3ca); border-radius: var(--r-lg); }
.demo-desk .paper { width: min(46%, 470px); }
.demo-desk .paper figcaption { display: none; }
.scene-report.on .paper { animation: card-in .7s ease both; }
.demo-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-block-start: 1rem; }
.demo-caption { margin: 0; max-width: 70ch; min-height: 3.4em; font-size: 1.08rem; color: var(--ink-2); }
.demo-pause { flex: none; min-height: 40px; padding: .35rem .9rem; font: inherit; font-size: .9rem; font-weight: 600; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.demo-pause:hover { border-color: var(--ink); color: var(--ink); }
/* Phones: close-up crops of each screen, and the spreadsheet on its own. */
@media (max-width: 700px) {
  .scene-copy .spot-frame { display: none; }
  .sheet-card { position: static; width: 100%; }
  .demo-desk .paper { width: 80%; }
  .demo-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .demo-steps button { padding: .35rem .25rem; font-size: .85rem; }
}

/* ----------------------------------------------------------------- frames */
.frame { margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.frame-dark { background: var(--stage); border-color: #25302a; box-shadow: var(--shadow-lg); }
.frame img { width: 100%; }
.frame figcaption { padding: .8rem 1rem; font-size: .92rem; color: var(--ink-3); background: var(--surface); border-block-start: 1px solid var(--line); }
.paper { margin: 0; }
/* The second sheet sits behind the page only, not behind the caption. */
.paper .sheet { position: relative; isolation: isolate; }
.paper img { display: block; width: 100%; border-radius: 4px; background: #fff; box-shadow: 0 1px 1px rgb(0 0 0 / .06), 0 20px 50px -18px rgb(20 30 25 / .35); }
.paper .sheet::before { content: ""; position: absolute; inset: 10px -10px -10px 10px; background: #fff; border-radius: 4px; box-shadow: 0 10px 30px -18px rgb(20 30 25 / .35); z-index: -1; }
.paper figcaption { margin-block-start: 1.2rem; font-size: .92rem; color: var(--ink-3); }
.shot-note { margin-block-start: 1.2rem; font-size: .85rem; color: var(--stage-ink-2); }

/* --------------------------------------------------------------- sections */
section { padding-block: var(--section); }
.hero + section { padding-block-start: 0; }
/* Two sections on the same ground in a row: one gap between them, not two. */
.excel + .uae { padding-block-start: 0; }
.stage { background: var(--stage); color: var(--stage-ink); }
.stage :is(h1, h2, h3) { color: #f1f6f2; }
.stage .lede { color: var(--stage-ink-2); }
.stage a:not(.btn) { color: var(--brand-bright); }
.alt { background: var(--surface); }

/* sound familiar */
.familiar-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-block-start: 2.5rem; }
.scattered { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.scrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: .9rem 1rem; box-shadow: 0 1px 2px rgb(16 24 20 / .05); display: grid; gap: .2rem; }
.scrap strong { font-weight: 600; }
.scrap span { color: var(--ink-3); font-size: .92rem; }
.scrap-1 { transform: rotate(-1.2deg); }
.scrap-2 { transform: rotate(1deg) translateY(6px); }
.scrap-3 { transform: rotate(.8deg); }
.scrap-4 { transform: rotate(-.9deg) translateY(4px); }
.scrap-5 { transform: rotate(-.6deg); }
.scrap-6 { transform: rotate(1.1deg) translateY(5px); border-color: var(--lv4); background: var(--warn-soft); }
.turn { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-block-end: 1.1rem; color: var(--ink); }
:lang(ar) .turn { font-family: var(--font-ar); }
@media (max-width: 900px) { .familiar-grid { grid-template-columns: 1fr; } }

/* what changes: not cards, a ruled row */
.value { padding-block-start: 0; }
.value-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.value-grid article { border-block-start: 3px solid var(--lv2); padding-block-start: 1.1rem; }
.value-grid article:nth-child(2) { border-color: var(--lv3); }
.value-grid article:nth-child(3) { border-color: var(--lv4); }
.value-grid article:nth-child(4) { border-color: var(--lv1); }
.value-grid p { color: var(--ink-2); margin: 0; }
@media (max-width: 980px) { .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .value-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------- tour */
.tour { margin-block-start: 2.2rem; }
.tour-groups, .tour-tabs { display: none; }
.js .tour.is-tabbed .tour-groups { display: inline-flex; gap: .25rem; padding: .3rem; background: var(--stage-2); border: 1px solid var(--stage-line); border-radius: 999px; margin-block-end: 1rem; max-width: 100%; overflow-x: auto; }
.js .tour.is-tabbed .tour-tabs:not([hidden]) { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: 1.5rem; }
.tour-group, .tour-tab { font: inherit; cursor: pointer; border: 0; background: none; color: var(--stage-ink-2); }
.tour-group { padding: .55rem 1.2rem; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.tour-group[aria-selected="true"] { background: var(--brand-bright); color: #04211a; }
.tour-tab { padding: .45rem .95rem; border-radius: var(--r-sm); border: 1px solid var(--stage-line); font-size: .95rem; }
.tour-tab[aria-selected="true"] { border-color: var(--brand-bright); color: #f1f6f2; background: rgb(63 199 159 / .12); }
.tour-group:hover, .tour-tab:hover { color: #f1f6f2; }
.tour-panel { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
html:not(.js) .tour-panel + .tour-panel, .tour:not(.is-tabbed) .tour-panel + .tour-panel { margin-block-start: 3rem; }
.tour-panel[hidden] { display: none; }
/* A new tab fades up; its spotlight settles a moment later. */
.js .tour.is-tabbed .tour-panel:not([hidden]) { animation: panel-in .35s ease both; }
@keyframes panel-in { from { opacity: 0; translate: 0 8px; } }
.spot-frame { position: relative; }
.spot { position: absolute; border: 2px solid var(--brand-bright); border-radius: 10px; box-shadow: 0 0 0 9999px rgb(6 10 8 / .42), 0 0 24px rgb(63 199 159 / .35); pointer-events: none; animation: spot-in .5s .2s ease both; }
@keyframes spot-in { from { opacity: 0; scale: 1.04; } }
/* Phones get the close-up instead, so no spotlight is needed. */
@media (max-width: 700px) { .has-focus .spot { display: none; } }
.tour-copy p { color: var(--stage-ink-2); }
@media (max-width: 900px) { .tour-panel { grid-template-columns: 1fr; } }
/* On a phone the four groups share the width: no hidden fourth tab to scroll to. */
@media (max-width: 560px) {
  .js .tour.is-tabbed .tour-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 12px; width: 100%; }
  .tour-group { padding: .55rem .2rem; font-size: .9rem; border-radius: 9px; }
}

.checks { list-style: none; display: grid; gap: .5rem; margin-block: 1rem 1.25rem; }
.checks li { display: flex; gap: .65rem; align-items: baseline; }
/* A tick is the same in both directions, so it uses physical borders on purpose. */
.checks li::before { content: ""; flex: none; width: .95rem; height: .5rem; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-.2rem) rotate(-45deg); }
.checks-dark li::before { border-color: var(--brand-bright); }

/* ------------------------------------------------------ record once, report */
.reporting { background: var(--surface); border-block: 1px solid var(--line); }
.reporting-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.flows { list-style: none; display: grid; gap: 0; margin-block: 2rem 1.75rem; border-block-start: 1px solid var(--line); }
.flows li { display: grid; grid-template-columns: 9.5rem auto 1fr; gap: 1rem; align-items: baseline; padding-block: .85rem; border-block-end: 1px solid var(--line); }
.flows strong { font-weight: 600; }
.flow-arrow { color: var(--ink-3); font-weight: 700; }
.flows li span:last-child { color: var(--ink-2); }
@media (max-width: 900px) { .reporting-grid { grid-template-columns: 1fr; } .reporting .paper { max-width: 440px; } }
@media (max-width: 560px) { .flows li { grid-template-columns: 1fr; gap: .15rem; } .flow-arrow { display: none; } }

/* ------------------------------------------------------------ student story */
.story-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; margin-block-start: 2rem; }
.comments .story-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-block: 0; }
@media (max-width: 900px) { .story-grid, .comments .story-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ time savers */
.savers { background: var(--subtle); }
.savers .frame { margin-block: 2.2rem; }
.savers-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem 2rem; }
.savers-grid h3 { font-size: 1.04rem; }
.savers-grid p { color: var(--ink-2); font-size: .97rem; margin: 0; }
@media (max-width: 980px) { .savers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .savers-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- comparison */
.table-scroll { overflow-x: auto; margin-block: 2rem 1rem; }
.compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 1rem; }
.compare th, .compare td { text-align: start; padding: 1rem 1.1rem; vertical-align: top; border-block-end: 1px solid var(--line); }
.compare thead th { font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
:lang(ar) .compare thead th { letter-spacing: 0; text-transform: none; font-size: .95rem; }
.compare tbody th { font-weight: 600; width: 22%; }
.compare td { color: var(--ink-2); }
.compare .col-us { background: var(--brand-soft); color: var(--ink); }
.compare thead .col-us { color: var(--brand-strong); border-start-start-radius: var(--r); border-start-end-radius: var(--r); }
.footnote { color: var(--ink-3); font-size: .95rem; max-width: 70ch; }
@media (max-width: 640px) {
  .compare thead { display: none; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; }
  .compare tr { border: 1px solid var(--line); border-radius: var(--r); margin-block-end: .9rem; overflow: hidden; background: var(--surface); }
  .compare tbody th { background: var(--subtle); width: 100%; }
  .compare td::before { content: attr(data-label); display: block; font-size: .8rem; font-weight: 600; color: var(--ink-3); margin-block-end: .2rem; }
}

/* -------------------------------------------------------------------- UAE */
.uae-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-block-start: 2.2rem; }
.uae-grid article { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.3rem 1.3rem 1.1rem; }
.uae-grid p { color: var(--ink-2); font-size: .97rem; margin: 0; }
@media (max-width: 980px) { .uae-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .uae-grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------- Arabic */
.arabic { background: var(--surface); border-block: 1px solid var(--line); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-block: 2.2rem 1.5rem; }
.pair figure { margin: 0; display: grid; gap: .6rem; }
.pair-label { justify-self: start; background: var(--brand-soft); color: var(--brand-strong); font-weight: 700; font-size: .85rem; padding: .25rem .8rem; border-radius: 999px; }
.pair-label:lang(ar) { font-family: var(--font-ar); }
.arabic-points { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
@media (max-width: 760px) { .pair, .arabic-points { grid-template-columns: 1fr; } }
/* With JavaScript: one frame that turns between English and Arabic. */
.pair.is-switching { grid-template-columns: minmax(0, 1fr); max-width: 940px; margin-inline: auto; }
.pair.is-switching figure { grid-area: 2 / 1; transition: opacity .6s ease, translate .6s ease; }
.pair.is-switching figure:not(.on) { opacity: 0; pointer-events: none; }
.pair.is-switching figure[data-lang-shot="en"]:not(.on) { translate: -24px 0; }
.pair.is-switching figure[data-lang-shot="ar"]:not(.on) { translate: 24px 0; }
.pair.is-switching .pair-label { display: none; }
.lang-demo-tabs { grid-area: 1 / 1; justify-self: center; display: inline-grid; grid-template-columns: 1fr 1fr; padding: .25rem; background: var(--subtle); border-radius: 999px; }
.lang-demo-tabs button { font: inherit; font-weight: 600; min-height: 40px; padding: .35rem 1.3rem; border: 0; border-radius: 999px; background: none; color: var(--ink-2); cursor: pointer; transition: background-color .15s, color .15s; }
.lang-demo-tabs button:lang(ar) { font-family: var(--font-ar); }
.lang-demo-tabs button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgb(16 24 20 / .16); }

/* Gentle entrances as a section scrolls in. `translate`, not `transform`, so
   the tilted scraps keep their tilt. Without JavaScript nothing is hidden. */
.js .reveal { opacity: 0; translate: 0 14px; transition: opacity .6s ease, translate .6s ease; }
.js .reveal.in { opacity: 1; translate: 0 0; }

/* ---------------------------------------------------------------- privacy */
.privacy-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.leaves { font-size: .95rem; color: var(--stage-ink-2); border-inline-start: 2px solid var(--stage-line); padding-inline-start: 1rem; }
.diagram { display: grid; justify-items: center; gap: 0; }
.node { width: 100%; max-width: 340px; display: flex; align-items: center; gap: .75rem; padding: 1rem 1.2rem; border-radius: var(--r-lg); border: 1px solid var(--stage-line); background: var(--stage-2); color: #f1f6f2; font-weight: 600; }
.node img { border-radius: 7px; }
.node-icon { color: var(--brand-bright); width: 28px; text-align: center; font-size: 1.1rem; }
.node-app { border-color: var(--brand-bright); }
.edge { width: 2px; height: 34px; background: repeating-linear-gradient(to bottom, var(--brand-bright) 0 5px, transparent 5px 10px); }
.page-hero .diagram .node { background: var(--surface); color: var(--ink); border-color: var(--line); }
.page-hero .diagram .node-app { border-color: var(--brand); }
.page-hero .diagram .node-icon { color: var(--brand); }
.page-hero .diagram .edge { background: repeating-linear-gradient(to bottom, var(--brand) 0 5px, transparent 5px 10px); }
.page-hero .diagram { margin-block-start: 2.5rem; justify-items: start; }
@media (max-width: 900px) { .privacy-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- the day */
.timeline { list-style: none; margin-block-start: 2.2rem; display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: 9rem 1fr; gap: 1.5rem; padding-block: 1.2rem; border-block-start: 1px solid var(--line); position: relative; }
.timeline .time { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1.05rem; }
:lang(ar) .timeline .time { font-family: var(--font-ar); }
.timeline h3 { margin-block-end: .25rem; }
.timeline p { margin: 0; color: var(--ink-2); max-width: 60ch; }
@media (max-width: 560px) { .timeline li { grid-template-columns: 1fr; gap: .25rem; } }

/* ---------------------------------------------------------------- pricing */
.pricing-band { background: var(--subtle); }
.worth { max-width: 760px; margin-block-end: 2.5rem; }
.worth p { color: var(--ink-2); }
.repeated { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: 1.2rem; }
.repeated li { background: var(--surface); border: 1px dashed var(--line-strong); border-radius: 999px; padding: .35rem .9rem; font-size: .92rem; color: var(--ink-2); }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; max-width: 980px; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2.2rem); display: flex; flex-direction: column; }
.plan-paid { border: 2px solid var(--ink); }
.plan h3 { font-size: 1.05rem; color: var(--ink-3); font-weight: 600; margin-block-end: .4rem; }
.plan-price { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 2.9rem); font-weight: 700; margin: 0; line-height: 1.1; }
:lang(ar) .plan-price { font-family: var(--font-ar); }
.plan-price span { font-size: .55em; color: var(--ink-3); }
.plan-price small { display: block; font-family: var(--font-body); font-size: .95rem; font-weight: 400; color: var(--ink-3); margin-block-start: .3rem; }
:lang(ar) .plan-price small { font-family: var(--font-ar); }
.plan-note { color: var(--ink-3); font-size: .95rem; margin-block: .6rem 0; }
/* Pro: Annual | Monthly. The billed amount is body-size and bold, never fine print. */
.billing-toggle { display: inline-grid; grid-template-columns: 1fr 1fr; align-self: flex-start; padding: .25rem; margin-block: .2rem 1.1rem; background: var(--subtle); border-radius: 999px; }
.billing-toggle button { font: inherit; font-weight: 600; font-size: .95rem; min-height: 40px; padding: .4rem 1.15rem; border: 0; border-radius: 999px; background: none; color: var(--ink-2); cursor: pointer; transition: background-color .15s, color .15s; }
.billing-toggle button:hover { color: var(--ink); }
.billing-toggle button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgb(16 24 20 / .16); }
.billing-option + .billing-option { margin-block-start: 1.4rem; padding-block-start: 1.2rem; border-block-start: 1px dashed var(--line); }
.is-toggled .billing-option + .billing-option { margin-block-start: 0; padding-block-start: 0; border: 0; }
.billing-name { display: flex; align-items: center; gap: .55rem; margin: 0 0 .35rem; font-weight: 700; }
.is-toggled .billing-label { display: none; }
.plan-badge { background: var(--brand); color: var(--on-brand); font-size: .78rem; font-weight: 700; padding: .15rem .65rem; border-radius: 999px; }
.plan-billed { margin: .55rem 0 0; font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.plan-save { margin: .35rem 0 0; color: var(--brand-strong); font-size: .95rem; }
.billing-option .btn { margin-block-start: 1rem; }
.plan .checks { flex: 1; align-content: start; }
.plan .btn { align-self: flex-start; }
/* "How to buy": the Pro card's button and the app's Buy Muraqib land here. The
   header stays on screen (68px, .header-row), so the section stops below it. */
#buy { scroll-margin-top: 68px; }
/* The two checkout buttons carry a price, so their labels are long: side by side
   when there is room, each full width on a phone. */
.buy-row .btn { flex: 1 1 18rem; max-width: 26rem; text-align: center; }
.buy-other { margin-block-start: 1.25rem; color: var(--ink-2); }
.no-tricks { margin-block-start: 1.5rem; color: var(--ink-3); }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------- Pro */
.pro-band { background: radial-gradient(80% 70% at 85% 10%, #173428 0%, var(--stage) 60%); }
.pro-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.pro-steps { list-style: none; counter-reset: p; display: grid; gap: .6rem; margin-block: 1.5rem; }
.pro-steps li { counter-increment: p; display: flex; gap: .75rem; align-items: baseline; color: var(--stage-ink); }
.pro-steps li::before { content: counter(p); flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: rgb(63 199 159 / .15); color: var(--brand-bright); font-weight: 700; font-size: .85rem; }
.pro-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 0 0 1.5rem; }
.pro-tiers div { border: 1px solid var(--stage-line); border-radius: var(--r); padding: .9rem 1rem; }
.pro-tiers .is-pro { border-color: var(--brand-bright); background: rgb(63 199 159 / .07); }
.pro-tiers dt { font-weight: 700; color: #f1f6f2; margin-block-end: .25rem; }
.pro-tiers dd { margin: 0; color: var(--stage-ink-2); font-size: .95rem; }
@media (max-width: 900px) { .pro-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .pro-tiers { grid-template-columns: 1fr; } }
/* Before and after, stacked in one cell; the shown one fades over the other. */
.flip { display: grid; }
.flip > [data-flip-shot] { grid-area: 1 / 1; transition: opacity .7s ease; }
.js .flip > [data-flip-shot]:not(.on) { opacity: 0; }
html:not(.js) .flip > [data-flip-shot]:not(.on) { display: none; }

/* ------------------------------------------------------- try the register */
.try { background: var(--surface); border-block: 1px solid var(--line); }
html:not(.js) .try { display: none; }
.try-register { margin-block-start: 1.5rem; padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); }
.try-counts { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; min-height: 1.9rem; }
.try-counts span { padding: .2rem .75rem; border-radius: 999px; font-size: .9rem; font-weight: 600; }
.try-counts .c-present { background: var(--brand-soft); color: var(--brand-strong); }
.try-counts .c-late { background: var(--warn-soft); color: var(--warn-ink); }
.try-counts .c-absent { background: var(--absent-soft); color: var(--absent-ink); }
.try-register ul { list-style: none; display: grid; gap: .5rem; }
.try-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .55rem .8rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); transition: border-color .2s, background-color .2s; }
.try-row[data-status="late"] { border-color: var(--lv4); }
.try-row[data-status="absent"] { border-color: var(--lv5); background: var(--absent-soft); }
.try-name { font-weight: 600; }
.try-status { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.try-status button { font: inherit; font-size: .9rem; min-height: 40px; padding: .3rem .75rem; display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-2); cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.try-status button:hover { border-color: var(--ink-3); color: var(--ink); }
.try-status button[aria-pressed="true"][data-s="present"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-strong); }
.try-status button[aria-pressed="true"][data-s="late"] { background: var(--warn-soft); border-color: var(--lv4); color: var(--warn-ink); }
.try-status button[aria-pressed="true"][data-s="absent"] { background: var(--absent-soft); border-color: var(--lv5); color: var(--absent-ink); }
.try-status kbd { font: 600 .72rem/1 var(--font-body); padding: .15rem .3rem; border: 1px solid currentColor; border-radius: 4px; opacity: .75; }
.try-note { margin: 1rem 0 0; font-size: .92rem; color: var(--ink-3); }
@media (max-width: 560px) {
  .try-row { flex-direction: column; align-items: stretch; gap: .45rem; }
  .try-status button { flex: 1; justify-content: center; }
}

/* ------------------------------------------------------------- testimonials */
.voices-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin-block-start: 2rem; }
.voice { margin: 0; display: grid; gap: 1rem; padding: 1.4rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.voice blockquote { margin: 0; font-size: 1.05rem; }
.voice figcaption { display: grid; color: var(--ink-3); font-size: .92rem; }
.voice figcaption strong { color: var(--ink); }

/* -------------------------------------------------------------------- FAQ */
.faq-item { border-block-end: 1px solid var(--line); }
.faq-item summary { cursor: pointer; list-style: none; padding: 1.15rem 0; font-weight: 600; font-size: 1.06rem; display: flex; justify-content: space-between; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--ink); font-weight: 700; font-size: 1.3rem; line-height: 1; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { color: var(--ink-2); padding-block-end: 1.2rem; margin: 0; max-width: 68ch; }
.faq-teaser .text-link, .faq-full .text-link { margin-block-start: 1.5rem; }

/* ------------------------------------------------------------------ final */
.final { text-align: center; padding-block: clamp(4rem, 10vw, 7rem); background: radial-gradient(70% 90% at 50% 0%, #17362b 0%, var(--stage) 70%); }
.final-inner { display: grid; justify-items: center; }
.final h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); max-width: 18ch; }
.final p { color: var(--stage-ink-2); font-size: 1.15rem; max-width: 52ch; }
.final .cta-row { justify-content: center; }
.muted-on-dark { color: var(--stage-ink-2); font-size: .95rem; }

/* ------------------------------------------------------------ inner pages */
.page-hero { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem); }
.feature-hero .frame { margin-block-start: clamp(2rem, 5vw, 3.5rem); }
.problem { background: var(--surface); border-block: 1px solid var(--line); padding-block: clamp(3rem, 7vw, 5rem); }
.step-list { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-block-start: 2rem; }
.step-list li { counter-increment: s; padding-block-start: 1rem; border-block-start: 2px solid var(--ink); }
.step-list li::before { content: counter(s); display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; color: var(--ink); margin-block-end: .4rem; }
.step-list p { color: var(--ink-2); margin: 0; }
@media (max-width: 760px) { .step-list { grid-template-columns: 1fr; } }
.feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 2rem; margin: 1.5rem 0 0; }
.feature-list dt { font-weight: 600; margin-block-end: .2rem; }
.feature-list dd { margin: 0; color: var(--ink-2); font-size: .98rem; }
.caps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .caps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .feature-list, .caps-grid { grid-template-columns: 1fr; } }
/* Four licence facts: one row of four, or two by two, never three and an orphan. */
.facts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .facts-grid { grid-template-columns: 1fr; } }
.feature-group-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.feature-group .feature-list { grid-template-columns: 1fr; gap: 1rem; }
@media (max-width: 900px) { .feature-group-grid { grid-template-columns: 1fr; } }
.docs-table { width: 100%; border-collapse: collapse; }
.docs-table th, .docs-table td { text-align: start; padding: .9rem .6rem; border-block-end: 1px solid var(--line); }
.docs-table th { font-weight: 600; }
.docs-table td { color: var(--ink-2); }
/* Phones: the document and its badge on one line, who it is for underneath. */
@media (max-width: 560px) {
  .docs-table, .docs-table tbody { display: block; }
  .docs-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; padding-block: .85rem; border-block-end: 1px solid var(--line); }
  .docs-table th, .docs-table td { padding: 0; border: 0; }
  .docs-table td:nth-child(2) { grid-row: 2; grid-column: 1 / -1; font-size: .92rem; }
  .docs-table td:last-child { grid-row: 1; grid-column: 2; }
}
.pill { display: inline-block; padding: .2rem .7rem; border-radius: 999px; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.pill-free { background: var(--brand-soft); color: var(--brand-strong); }
.pill-paid { background: var(--paid-soft); color: var(--paid-ink); }
.pill-soon { background: var(--warn-soft); color: var(--warn-ink); }
.extra-paper { max-width: 520px; }
.extra .frame { max-width: 1000px; margin-inline: auto; }
.related { padding-block: 0 var(--section); }
.related h2 { font-size: 1rem; color: var(--ink-3); font-weight: 600; }
.related ul { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; }
.related a { display: inline-flex; gap: .4rem; padding: .6rem 1rem; border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; background: var(--surface); font-weight: 600; }
.related a:hover { border-color: var(--ink); }
.prose h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin-block: 2.5rem .7rem; }
.prose p { color: var(--ink-2); max-width: 68ch; }

/* download */
.builds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-block-start: 2rem; }
.build { display: grid; gap: .3rem; align-content: start; padding: 1.3rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); text-decoration: none; color: var(--ink); }
.build strong { font-size: 1.1rem; }
.build span { color: var(--ink-3); font-size: .95rem; }
a.build:hover { border-color: var(--ink); }
.build-go { color: var(--ink) !important; font-weight: 600; margin-block-start: .6rem; }
.build-soon .pill { justify-self: start; margin-block-start: .6rem; }
.note { background: var(--warn-soft); color: var(--warn-ink); border-radius: var(--r); padding: .8rem 1rem; margin-block: 1.25rem .6rem; max-width: 62ch; }
.first-run { background: var(--surface); border-block: 1px solid var(--line); }
.os-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; margin-block-start: 1.5rem; }
.os-grid ol { padding-inline-start: 1.25rem; display: grid; gap: .5rem; color: var(--ink-2); }
@media (max-width: 760px) { .builds, .os-grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------- footer */
.site-footer { background: #0b100d; color: var(--stage-ink-2); padding-block: 3.5rem 2rem; font-size: .95rem; }
.site-footer a { color: var(--stage-ink); text-decoration: none; }
.site-footer a:hover { color: var(--brand-bright); }
.site-footer .brand { color: #f1f6f2; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
.site-footer h2 { font-family: var(--font-body); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--stage-ink-2); margin-block-end: .9rem; }
:lang(ar) .site-footer h2 { font-family: var(--font-ar); letter-spacing: 0; font-size: .95rem; }
.site-footer ul { list-style: none; display: grid; gap: .5rem; }
.footer-brand p { margin-block: .8rem 0; max-width: 36ch; }
.footer-biz { margin-block-start: 1.2rem; line-height: 1.7; }
/* The independence line. Quiet on purpose: it is a fact a reader may need,
   not a disclaimer shouting for attention, so it sits above the copyright at
   the smallest size the footer uses and never competes with the links. */
.footer-independent { margin-block-start: 2.2rem; }
.footer-independent p { color: var(--stage-ink-2); font-size: .82rem; line-height: 1.7; max-width: 80ch; margin: 0; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; border-block-start: 1px solid #1f2923; margin-block-start: 1.2rem; padding-block-start: 1.5rem; font-size: .88rem; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* ------------------------------------------------------------- sticky cta */
.sticky-cta { display: none; }
@media (max-width: 760px) {
  .js .sticky-cta { display: block; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 40; padding: .7rem var(--gap) calc(.7rem + env(safe-area-inset-bottom)); background: var(--header-bg); backdrop-filter: blur(10px); border-block-start: 1px solid var(--line); transform: translateY(110%); transition: transform .25s ease; }
  .js .sticky-cta { visibility: hidden; }
  .js .sticky-cta.show { transform: none; visibility: visible; }
  .sticky-cta .btn { width: 100%; }
  .nav-open .sticky-cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------ download integrity */
/* A SHA-256 is 64 characters that have to be compared by eye, so it is set in
   the monospace face, left to right even on the Arabic page, and allowed to
   wrap anywhere rather than pushing the page wider than the phone. */
.hash {
  display: inline-block;
  margin-block-start: .35rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--ink-2);
  overflow-wrap: anywhere;
  word-break: break-all;
}
pre.code {
  margin-block: .6rem 0;
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2, transparent);
  overflow-x: auto;
}
pre.code code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem;
  color: var(--ink-2);
}