/* 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: #f6f7f2;
  --surface: #ffffff;
  --subtle: #eaefe6;
  --line: #d8e0d5;
  --line-strong: #b9c6ba;
  --ink: #1d2a23;
  --ink-2: #47584e;
  --ink-3: #586b5e;
  --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;
  --warn-soft: #f9eeda;
  --warn-ink: #7a4508;
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;
  --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);
  color-scheme: light;
}

*, *::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(--brand); }
a:hover { color: var(--brand-strong); }
: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: 600; 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: #fff; 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(--brand); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-strong); color: var(--on-brand); }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-secondary { border-color: var(--brand); color: var(--brand); background: var(--surface); }
.btn-secondary:hover { background: var(--brand-soft); }
.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: none; display: inline-flex; gap: .35rem; align-items: baseline; }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ----------------------------------------------------------- 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: rgb(246 247 242 / .88); backdrop-filter: saturate(1.4) blur(12px); border-block-end: 1px solid rgb(216 224 213 / .7); }
.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); }
.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(--brand); 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(--brand); color: var(--ink-2); font-size: .95rem; } }
.hero-points li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--brand-bright); 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(--brand); color: var(--ink); }
.demo-steps button span { color: var(--brand); }
.demo-steps button[aria-current="step"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.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; }
.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: #6b7a71; 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(--brand); 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: #fffaf1; }
.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(--brand); }
: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(--brand); border-bottom: 2px solid var(--brand); 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(--brand); 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(--brand); 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(--brand); }
.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; }
.plan-soon { background: var(--warn-soft); color: var(--warn-ink); border-radius: var(--r); padding: .8rem 1rem; font-size: .95rem; margin: 0; }
.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: #fbe4e1; color: #8a2a1f; }
.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: #fff7f6; }
.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: #fbe4e1; border-color: var(--lv5); color: #8a2a1f; }
.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(--brand); 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: 3px solid var(--brand-bright); }
.step-list li::before { content: counter(s); display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; color: var(--brand); 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: #ebe7f5; color: #4b3c85; }
.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(--brand); }
.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(--brand); }
.build-go { color: var(--brand) !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; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; border-block-start: 1px solid #1f2923; margin-block-start: 2.5rem; 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: rgb(246 247 242 / .94); 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; }
}