/* Layout: one night sky for the whole site. The home opens with a long pinned scene: the phone rises from the horizon,
   stars fall as you scroll, the phone's screen walks the road (reveal → home → the line → payday → «خالص»),
   and the sky opens to dawn at the end. Then plain sections: how, tools, blog, سهيل+, about, questions, contact.
   Night by default; the day look (الواجهة النهارية, the app's light palette) follows the visitor's setting or the
   toggle in the header. By day everything turns light in the same idea: a pale blue sky with faint blue specks falling,
   the horizon's glow, and the answers lit from below in sky blue. */
:root {
  --night: #04070c; --night2: #060b13; --dusk: #0d1c2e; --glow: #3c7cb4; --sky: #8dc3ec; --dawn: #f6c99a; --dawn2: #c9dcef;
  --ink: #f2f6fa; --mute: #a9bbcd; --dim: #6f8296; --card: rgba(11, 18, 27, .72); --edge: rgba(255, 255, 255, .09); --edge2: rgba(255, 255, 255, .18);
  --accent: #eaf2fa; --on-accent: #04070c; --danger: #f08a7e;
  --rule: rgba(255, 255, 255, .12); --paper: #04070c; --body: #d4dde6; --fill: rgba(0, 0, 0, .3); --field: #556981; --tint: rgba(255, 255, 255, .06); --tint2: rgba(255, 255, 255, .02);
  --chip: rgba(141, 195, 236, .12); --glass: rgba(4, 7, 12, .55); --sheet: rgba(11, 18, 27, .96); --solid-card: #0b121b; --lift: 0 0 #0000; --halo: rgba(60, 124, 180, .22);
  --ar: "IBM Plex Sans Arabic", "SF Arabic", "Geeza Pro", system-ui, sans-serif;
  --lat: Inter, "SF Pro Text", system-ui, sans-serif;
  --t-display: clamp(2.5rem, 1.5rem + 4.4vw, 4.6rem);
  --t-h2: clamp(1.8rem, 1.3rem + 2vw, 2.8rem);
  --t-h3: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --t-lede: clamp(1.05rem, 1rem + .35vw, 1.25rem);
  --wide: 1120px;
  color-scheme: dark;
}
/* The day look: the app's light palette (src/theme/tokens.ts). */
:root[data-theme="light"] {
  --ink: #07101a; --mute: #56636f; --dim: #5f6b77; --sky: #2c6ca3; --card: #fff; --edge: rgba(7, 16, 26, .08); --edge2: rgba(7, 16, 26, .18);
  --accent: #07101a; --on-accent: #fff; --danger: #b23b2e;
  --rule: rgba(7, 16, 26, .1); --paper: #f3f7fb; --body: #2a3642; --fill: #fff; --field: #788ba0; --tint: rgba(7, 16, 26, .05); --tint2: rgba(7, 16, 26, .02);
  --chip: #eaf2fa; --glass: rgba(243, 247, 251, .78); --sheet: rgba(255, 255, 255, .98); --solid-card: #fff; --halo: rgba(60, 124, 180, .14);
  --lift: 0 1px 2px rgba(7, 16, 26, .04), 0 10px 30px -18px rgba(7, 16, 26, .25);
  --dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='%232C6CA3'%3E%3Ccircle cx='84.2' cy='39.2' r='0.6' fill-opacity='0.12'/%3E%3Ccircle cx='213.5' cy='24.5' r='1.5' fill-opacity='0.12'/%3E%3Ccircle cx='236.5' cy='55.8' r='0.6' fill-opacity='0.32'/%3E%3Ccircle cx='108.7' cy='62.6' r='1.5' fill-opacity='0.32'/%3E%3Ccircle cx='15.4' cy='147.0' r='0.8' fill-opacity='0.12'/%3E%3Ccircle cx='150.0' cy='103.1' r='0.8' fill-opacity='0.12'/%3E%3Ccircle cx='144.7' cy='34.6' r='1.2' fill-opacity='0.18'/%3E%3Ccircle cx='140.6' cy='148.4' r='1.5' fill-opacity='0.18'/%3E%3Ccircle cx='26.8' cy='148.5' r='0.8' fill-opacity='0.25'/%3E%3Ccircle cx='25.3' cy='185.1' r='1.5' fill-opacity='0.12'/%3E%3Ccircle cx='160.9' cy='129.1' r='1.5' fill-opacity='0.32'/%3E%3Ccircle cx='202.1' cy='121.1' r='1.2' fill-opacity='0.25'/%3E%3Ccircle cx='77.9' cy='206.5' r='0.8' fill-opacity='0.12'/%3E%3Ccircle cx='149.4' cy='136.6' r='1' fill-opacity='0.32'/%3E%3Ccircle cx='74.9' cy='254.8' r='0.6' fill-opacity='0.32'/%3E%3Ccircle cx='42.9' cy='88.9' r='1.2' fill-opacity='0.32'/%3E%3Ccircle cx='10.2' cy='173.7' r='1.5' fill-opacity='0.25'/%3E%3Ccircle cx='88.4' cy='91.0' r='1.2' fill-opacity='0.32'/%3E%3Ccircle cx='17.9' cy='24.3' r='1' fill-opacity='0.32'/%3E%3Ccircle cx='181.2' cy='16.9' r='1' fill-opacity='0.32'/%3E%3Ccircle cx='74.0' cy='100.3' r='1' fill-opacity='0.12'/%3E%3Ccircle cx='244.6' cy='92.4' r='1.5' fill-opacity='0.12'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: light;
}
/* By day the ground is the app's: pale blue, lit softly from above, with faint specks of the night sky left in it. */
[data-theme="light"] body, [data-theme="light"] #home section.block, [data-theme="light"] footer { background: var(--dots), var(--paper); }
[data-theme="light"] #home section.block:nth-of-type(odd) { background: var(--dots), radial-gradient(80% 60% at 50% 0%, rgba(191, 221, 245, .55), transparent 70%), var(--paper); }
[data-theme="light"] #home .story + section.block { background: var(--dots), linear-gradient(180deg, transparent, var(--paper) clamp(72px, 10vw, 128px)); }
/* the story by day */
[data-theme="light"] .horizon { background: radial-gradient(50% 50% at 50% 50%, rgba(191, 221, 245, .95), rgba(191, 221, 245, .35) 55%, transparent 72%); }
[data-theme="light"] .horizon::after { background: linear-gradient(90deg, transparent, rgba(60, 124, 180, .5), transparent); }
[data-theme="light"] .floor { background: radial-gradient(50% 50% at 50% 50%, rgba(60, 124, 180, .35), transparent 70%); }
[data-theme="light"] .device { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14), 0 60px 120px -40px rgba(60, 124, 180, .55), 0 30px 60px -30px rgba(7, 16, 26, .45); }
[data-theme="light"] .rail i { background: rgba(44, 108, 163, .25); }
[data-theme="light"] .rail::before { background: rgba(44, 108, 163, .18); }
[data-theme="light"] .dawn { background: radial-gradient(120% 70% at 50% 110%, rgba(246, 201, 154, .45) 0%, rgba(191, 221, 245, .35) 40%, transparent 70%); }
[data-theme="light"] .finale .bigstar { filter: drop-shadow(0 0 18px rgba(141, 195, 236, .95)) drop-shadow(0 0 50px rgba(246, 201, 154, .8)); }
[data-theme="light"] .store { background: #07101a; color: #fff; }
/* the answers by day: lit from below in sky blue, as the night ones are */
[data-theme="light"] .answer { background: radial-gradient(40% 34% at 50% 112%, rgba(141, 195, 236, .8), transparent), radial-gradient(75% 80% at 50% 120%, rgba(191, 221, 245, .95), rgba(191, 221, 245, .3) 45%, transparent), linear-gradient(180deg, #fff, #eaf2fa);
  box-shadow: inset 0 0 0 1px var(--edge), var(--lift); }
[data-theme="light"] .about .sky2 { background: radial-gradient(60% 50% at 50% 110%, rgba(191, 221, 245, .95), transparent 70%), linear-gradient(180deg, #dcebf8, #f3f7fb); }
* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font: 400 1.0625rem/1.8 var(--ar); direction: rtl; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 8px; }
.num { font-family: var(--lat); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
h1, h2, h3 { font-weight: 400; margin: 0; text-wrap: balance; }
p { margin: 0; }
.gut { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.wrap { max-width: var(--wide); margin-inline: auto; }

/* the sky behind everything: falling stars on canvas, a dawn layer, grain */
#sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.dawn { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 70% at 50% 110%, rgba(246, 201, 154, .55) 0%, rgba(201, 220, 239, .22) 40%, transparent 70%), linear-gradient(180deg, transparent 30%, rgba(60, 124, 180, .35)); }
.grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
main, header, footer { position: relative; z-index: 2; }

/* ---------- header with tabs ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--paper); }
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; }
.top .in { display: flex; align-items: center; gap: 20px; height: 68px; }
.top::before { content: ""; position: absolute; inset: 0; background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid var(--edge); opacity: var(--solid, 0); transition: opacity .3s; }
.top .in { position: relative; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 22px; font-weight: 500; }
.brand svg { filter: drop-shadow(0 0 8px rgba(141, 195, 236, .8)); }
nav.tabs { display: flex; gap: 2px; margin-inline-start: 12px; }
nav.tabs a { text-decoration: none; color: var(--mute); font-size: 15px; padding: 7px 13px; border-radius: 999px; transition: color .2s, background .2s; }
nav.tabs a:hover, nav.tabs a[aria-current="true"] { color: var(--ink); background: var(--tint); }
.top .cta { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
/* the day/night toggle: a sun at night, a moon by day */
.mode { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--tint); color: var(--ink); display: grid; place-items: center; flex: none; }
.mode svg { width: 19px; height: 19px; }
.mode .moon, [data-theme="light"] .mode .sun { display: none; }
[data-theme="light"] .mode .moon { display: block; }
.pill { display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: 999px; padding: 10px 10px 10px 18px; padding-inline: 18px 8px; background: var(--accent); color: var(--on-accent); font-weight: 500; font-size: 15px; text-decoration: none; white-space: nowrap; }
.pill .arr { width: 30px; height: 30px; border-radius: 50%; background: var(--on-accent); color: var(--accent); display: grid; place-items: center; font-size: 14px; }
.pill.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--edge2); padding-inline: 18px; }
.menu { display: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--tint); color: var(--ink); margin-inline-start: 8px; }
.menu span { display: block; width: 16px; height: 1.5px; background: var(--ink); margin: 4px auto; border-radius: 2px; }
.sheet { display: none; }
@media (max-width: 900px) {
  nav.tabs { display: none; }
  .menu { display: block; }
  .top .cta .pill { padding: 8px 14px; font-size: 14px; }
  .top .cta .pill .arr { display: none; }
  .sheet { position: absolute; top: 68px; inset-inline: 12px; display: flex; flex-direction: column; padding: 10px; border-radius: 22px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--edge), 0 30px 60px -20px rgba(0, 0, 0, .5); }
  .sheet[hidden] { display: none; }
  .sheet a { padding: 12px 14px; text-decoration: none; border-radius: 14px; font-size: 16px; }
  .sheet a:hover { background: var(--tint); }
}

/* ---------- the scroll story ---------- */
.story { position: relative; height: 640vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.horizon { position: absolute; inset-inline: -10%; bottom: -38vh; height: 70vh; border-radius: 50%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(60, 124, 180, .75), rgba(60, 124, 180, .18) 55%, transparent 72%); filter: blur(10px); }
.horizon::after { content: ""; position: absolute; inset-inline: 18%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(201, 220, 239, .9), transparent); }
.intro { position: absolute; inset-inline: 0; top: 16vh; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; padding-inline: 20px; }
.intro h1 { font-size: var(--t-display); line-height: 1.25; }
.intro h1 em { font-style: normal; color: var(--sky); }
.intro p { color: var(--mute); font-size: var(--t-lede); max-width: 34ch; }
.intro .btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.hint-scroll { color: var(--dim); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hint-scroll i { width: 1px; height: 34px; background: linear-gradient(var(--sky), transparent); animation: drip 2.2s ease-in-out infinite; }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

.rig { pointer-events: none; position: absolute; left: 50%; top: 50%; width: var(--pw); height: calc(var(--pw) * 2.164); margin-left: calc(var(--pw) / -2); margin-top: calc(var(--pw) * -1.082); perspective: 1400px; --pw: min(330px, 38vh); }
.device { position: absolute; inset: 0; border-radius: calc(var(--pw) * .16); padding: calc(var(--pw) * .032); background: linear-gradient(145deg, #2a3442, #0c121a 40%, #1d2733); transform-style: preserve-3d; will-change: transform;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14), 0 60px 120px -40px rgba(60, 124, 180, .7), 0 30px 60px -30px #000; }
.glass { position: relative; width: 100%; height: 100%; border-radius: calc(var(--pw) * .13); overflow: hidden; background: #04070c; }
.glass img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .55s ease, transform .9s cubic-bezier(.2, .8, .2, 1); transform: scale(1.04); }
.glass img.on { opacity: 1; transform: none; }
.island { position: absolute; top: calc(var(--pw) * .03); left: 50%; width: 30%; height: calc(var(--pw) * .085); margin-left: -15%; border-radius: 99px; background: #000; z-index: 2; }
.shine { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; background: linear-gradient(115deg, rgba(255, 255, 255, .14) 0%, transparent 28%, transparent 70%, rgba(255, 255, 255, .05)); mix-blend-mode: screen; }
.floor { position: absolute; left: 50%; bottom: calc(var(--pw) * -.2); width: 140%; height: 60px; margin-left: -70%; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(141, 195, 236, .45), transparent 70%); filter: blur(12px); }

.caps { position: absolute; inset-inline-start: max(5vw, 24px); top: 50%; transform: translateY(-50%); width: min(380px, 34vw); }
.cap { position: absolute; inset: auto 0; top: 50%; transform: translateY(-40%); opacity: 0; transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1); pointer-events: none; display: flex; flex-direction: column; gap: 12px; }
.cap.on { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.cap .step { display: inline-flex; gap: 8px; align-items: center; color: var(--sky); font-size: 14px; }
.cap .step::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.cap h2 { font-size: var(--t-h2); line-height: 1.3; }
.cap p { color: var(--mute); font-size: var(--t-lede); }
.rail { position: absolute; inset-inline-end: max(5vw, 24px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; align-items: center; }
.rail i { width: 7px; height: 7px; border-radius: 50%; background: rgba(141, 195, 236, .25); transition: background .3s, box-shadow .3s, transform .3s; }
.rail i.on { background: var(--sky); box-shadow: 0 0 12px var(--sky); transform: scale(1.3); }
.rail::before { content: ""; position: absolute; top: 4px; bottom: 4px; width: 1px; background: rgba(141, 195, 236, .18); z-index: -1; }

.finale { position: absolute; inset-inline: 0; top: 11vh; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; opacity: 0; pointer-events: none; padding-inline: 20px; }
.finale.on { pointer-events: auto; }
.finale .bigstar { filter: drop-shadow(0 0 22px rgba(255, 255, 255, .9)) drop-shadow(0 0 60px rgba(246, 201, 154, .7)); }
.finale h2 { font-size: var(--t-display); line-height: 1.2; }
.finale p { color: var(--mute); font-size: var(--t-lede); }
.store { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 14px; background: #fff; color: #000; text-decoration: none; font-family: var(--lat); line-height: 1.15; text-align: left; direction: ltr; }
.store small { display: block; font-size: 11px; }
.store b { font-size: 18px; font-weight: 500; }

@media (max-width: 900px) {
  .rig { --pw: min(250px, 30vh); top: 42%; }
  .caps { inset-inline: 20px; top: auto; bottom: max(28px, env(safe-area-inset-bottom, 0px)); transform: none; width: auto; height: 150px; }
  .cap { top: auto; bottom: 0; transform: translateY(10px); text-align: center; align-items: center; gap: 6px; }
  .cap.on { transform: none; }
  .cap h2 { font-size: 1.6rem; }
  .cap p { font-size: 1rem; max-width: 34ch; }
  .rail { inset-inline-end: 12px; gap: 10px; }
  .intro { top: 12vh; }
}

/* ---------- «الخطة»: the hero's season (the same days as the app's Home; build.py puts the table in <head>) ----------
   A mark in the top corner, the season's line over the heading, and its color in the horizon. Positioned out of the
   flow, so nothing moves; they leave with the intro as the story starts. */
:root[data-season="ramadan"] { --szn-mark: #f3d9a4; --szn-core: #f3d9a4; --szn-line: #f3d9a4; --szn-hz: rgba(201, 161, 90, .75); }
:root[data-season="asianCup"] { --szn-mark: #fff; --szn-core: #7fe0a8; --szn-line: #7fe0a8; --szn-hz: rgba(22, 160, 90, .7); }
:root[data-season="whiteFriday"] { --szn-mark: #fff; --szn-core: #f2f6fa; --szn-line: #dfe7ef; --szn-hz: rgba(242, 246, 250, .42); }
:root[data-theme="light"][data-season="ramadan"] { --szn-mark: #a87420; --szn-core: #e2b866; --szn-line: #8a5e14; --szn-hz: rgba(236, 206, 150, .95); }
:root[data-theme="light"][data-season="asianCup"] { --szn-core: #3cc07a; --szn-line: #0f7a44; --szn-hz: rgba(140, 214, 172, .95); }
:root[data-theme="light"][data-season="whiteFriday"] { --szn-mark: #3f4e5d; --szn-core: #a3b3c3; --szn-line: #4c5b6a; --szn-hz: rgba(206, 218, 230, .95); }
:root[data-season] .horizon { background: radial-gradient(30% 38% at 50% 50%, var(--szn-hz), transparent 75%), radial-gradient(50% 50% at 50% 50%, rgba(60, 124, 180, .75), rgba(60, 124, 180, .18) 55%, transparent 72%); }
:root[data-theme="light"][data-season] .horizon { background: radial-gradient(30% 38% at 50% 50%, var(--szn-hz), transparent 75%), radial-gradient(50% 50% at 50% 50%, rgba(191, 221, 245, .95), rgba(191, 221, 245, .35) 55%, transparent 72%); }
.szn-art, .szn-line, .szn [data-s] { display: none; }
[data-season] .szn-art, [data-season] .szn-line { display: block; }
[data-season="ramadan"] .szn-art [data-s="ramadan"], [data-season="asianCup"] .szn-art [data-s="asianCup"], [data-season="whiteFriday"] .szn-art [data-s="whiteFriday"] { display: block; }
.szn-art { position: absolute; left: max(5vw, 24px); top: calc(12px - 16vh); width: clamp(140px, 16vw, 220px); pointer-events: none; }
.szn-art svg { width: 100%; height: auto; overflow: visible; }
.szn-art stop.a { stop-color: var(--szn-core); stop-opacity: .4; }
.szn-art stop.b { stop-color: var(--szn-core); stop-opacity: 0; }
.szn-art .m { fill: var(--szn-mark); }
.szn-art .sp { fill: #fff; }
.szn-art .ms, .szn-art .tag { fill: none; stroke: var(--szn-mark); stroke-width: 1.5; stroke-linejoin: round; }
.szn-art .th { stroke: var(--szn-mark); stroke-opacity: .45; stroke-width: 1; }
.szn-art .ball { fill: #fff; }
.szn-art .pt { fill: #0a1626; }
.szn-art .seam { stroke: #0a1626; stroke-width: 1.2; }
.szn-art .lan { animation: sway 5s ease-in-out infinite alternate; }
.szn-art .l2 { animation-duration: 6.5s; animation-delay: -2s; }
@keyframes sway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
[data-theme="light"] .szn-art .sp { fill: var(--sky); }
[data-theme="light"] .szn-art .ball { stroke: rgba(10, 22, 38, .3); stroke-width: 1; }
[data-theme="light"] .szn-art .tag { fill: rgba(255, 255, 255, .85); }
[data-theme="light"] .szn-art stop.a { stop-opacity: .55; }
.szn-line { position: absolute; inset-inline: 0; top: -40px; text-align: center; font-size: 14px; color: var(--szn-line); }
[data-season="ramadan"] .szn-line [data-s="ramadan"], [data-season="asianCup"] .szn-line [data-s="asianCup"], [data-season="whiteFriday"] .szn-line [data-s="whiteFriday"] { display: inline-flex; gap: 8px; align-items: center; }
.szn-line [data-s]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
@media (max-width: 900px) {
  .szn-art { left: 8px; top: calc(2px - 12vh); width: 104px; }
}

/* ---------- plain sections ---------- */
section.block { padding-block: clamp(72px, 10vw, 128px); scroll-margin-top: 70px; }
.eyebrow { color: var(--sky); font-size: 14px; display: inline-flex; gap: 8px; align-items: center; }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.sh { display: flex; flex-direction: column; gap: 12px; max-width: 640px; margin-bottom: 40px; }
.sh h2 { font-size: var(--t-h2); line-height: 1.3; }
.sh p { color: var(--mute); font-size: var(--t-lede); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .grid3 { grid-template-columns: minmax(0, 1fr); } }
.card { background: var(--card); box-shadow: inset 0 0 0 1px var(--edge), var(--lift); border-radius: 26px; padding: 24px; display: flex; flex-direction: column; gap: 10px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); min-width: 0; }
.card h3 { font-size: var(--t-h3); }
.card p { color: var(--mute); font-size: 15.5px; }
.card .n { font-family: var(--lat); font-weight: 200; font-size: 44px; line-height: 1; color: var(--sky); }
.promise { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: center; padding: 22px 0; border-block: 1px solid var(--edge); margin-top: 48px; color: var(--mute); font-size: 15px; }
.promise span { display: inline-flex; gap: 8px; align-items: center; }
.promise span::before { content: "✓"; color: var(--sky); }

.tool { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 16px; }
@media (max-width: 860px) { .tool { grid-template-columns: minmax(0, 1fr); } }
.calc { gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; color: var(--mute); }
.field .box { display: flex; align-items: center; gap: 8px; border-radius: 14px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--field); padding: 0 14px; min-height: 50px; }
.field .box:focus-within { box-shadow: inset 0 0 0 1.5px var(--accent); }
.field input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--ink); font: 300 22px var(--lat); direction: ltr; text-align: right; font-variant-numeric: tabular-nums; }
.field .u { color: var(--dim); font-size: 13px; }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 520px) { .row3 { grid-template-columns: minmax(0, 1fr); } }
.answer { position: relative; overflow: hidden; border-radius: 28px; padding: 26px; display: flex; flex-direction: column; gap: 10px; justify-content: flex-end; min-height: 260px;
  background: radial-gradient(40% 34% at 50% 112%, rgba(141, 195, 236, .75), transparent), radial-gradient(75% 80% at 50% 120%, rgba(60, 124, 180, .95), rgba(60, 124, 180, .3) 45%, transparent), linear-gradient(180deg, #060b13, #0d1c2e); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .11); }
.answer .k { color: var(--mute); font-size: 14px; }
.answer .big { font-family: var(--lat); font-weight: 200; font-size: clamp(48px, 7vw, 72px); line-height: 1.05; }
.answer .big small { font-family: var(--ar); font-size: 18px; color: var(--mute); font-weight: 400; margin-inline-start: 6px; }
.answer .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 12px; border-top: 1px solid var(--rule); }
.answer .pair b { display: block; font-family: var(--lat); font-weight: 300; font-size: 24px; }
.answer .pair span { color: var(--mute); font-size: 13px; }
.answer .grp { display: flex; flex-direction: column; gap: 8px; }
.answer .grp + .grp { padding-top: 16px; border-top: 1px solid var(--rule); }
.answer .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.answer .st { display: flex; flex-direction: column; gap: 2px; }
.answer .st > span { color: var(--mute); font-size: 13px; }
.answer .st b { font-weight: 200; font-size: clamp(32px, 4vw, 44px); line-height: 1.1; display: flex; align-items: baseline; gap: 6px; }
.answer .st b small { font-family: var(--ar); font-size: 15px; font-weight: 400; color: var(--mute); }
.warn { color: var(--danger); }
.minih { font-size: var(--t-h3); margin-top: 40px; }
/* «متى تخلص ديونك؟»: a row per debt */
.payoff { margin-top: 40px; }
.payoff .sub { color: var(--mute); margin: 6px 0 16px; }
.dcols, .drow { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 40px; gap: 8px; align-items: center; }
.dcols span { color: var(--mute); font-size: 13px; }
.drows { display: grid; gap: 10px; }
.drow input { min-width: 0; min-height: 46px; border: 0; border-radius: 12px; padding: 0 12px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--field); color: var(--ink); font: inherit; outline: none; }
.drow input.n { font: 300 18px var(--lat); direction: ltr; text-align: right; font-variant-numeric: tabular-nums; }
.drow input::placeholder { color: var(--dim); font-family: var(--ar); font-size: 14px; }
.drow input:focus { box-shadow: inset 0 0 0 1.5px var(--accent); }
.drow .del { width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--dim); cursor: pointer; display: grid; place-items: center; }
.drow .del:hover { color: var(--ink); background: var(--tint); }
.drow .del svg { width: 14px; height: 14px; }
.dadd { justify-self: start; align-self: flex-start; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px dashed var(--field); background: none; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.dadd:hover { border-style: solid; background: var(--tint); }
@media (max-width: 520px) {
  .dcols, .drow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px; }
  .dcols span:first-child { display: none; }
  .drow .nm { grid-column: 1 / -1; }
  .drow { padding-bottom: 10px; border-bottom: 1px solid var(--edge); }
}
.mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
@media (max-width: 860px) { .mini { grid-template-columns: minmax(0, 1fr); } }
.mini > div, .mini > a { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 20px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--edge); background: var(--tint2); }
.mini b { font-weight: 500; font-size: 1.05rem; }
a.mini-go { text-decoration: none; transition: box-shadow .2s, background .2s; }
a.mini-go:hover { box-shadow: inset 0 0 0 1px var(--edge2); background: var(--tint); }
.mini .go { color: var(--sky); font-size: 14px; }
.allg { margin-top: 24px; display: flex; justify-content: center; }
.mini p { color: var(--mute); font-size: 15px; flex: 1; }
.soon.dimmed { background: var(--tint); color: var(--mute); }
.post { text-decoration: none; padding: 0; overflow: hidden; transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
.post:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--edge2); }
.post .art { height: 150px; position: relative; overflow: hidden; }
.post .body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.post .meta { color: var(--dim); font-size: 13px; display: flex; gap: 10px; }
.post h3 { font-size: 1.2rem; line-height: 1.55; }

.plus { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
@media (max-width: 860px) { .plus { grid-template-columns: minmax(0, 1fr); } }
.plus ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.plus li { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--edge); }
.plus li:first-child { border-top: 0; }
.plus li b { font-weight: 500; display: block; }
.plus li span { color: var(--mute); font-size: 15px; }
.plus .ic { width: 38px; height: 38px; border-radius: 50%; background: var(--chip); color: var(--sky); display: grid; place-items: center; flex: none; }
.soon { display: inline-flex; padding: 2px 12px; border-radius: 999px; background: var(--chip); color: var(--sky); font-size: 13px; }

.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
@media (max-width: 860px) { .about { grid-template-columns: minmax(0, 1fr); } }
.about .sky2 { aspect-ratio: 1; max-width: 100%; border-radius: 32px; position: relative; overflow: hidden; background: radial-gradient(60% 50% at 50% 110%, rgba(60, 124, 180, .8), transparent 70%), linear-gradient(180deg, #04070c, #0d1c2e); box-shadow: inset 0 0 0 1px var(--edge); }
.about .sky2 canvas { width: 100%; height: 100%; display: block; }
.about p { color: var(--mute); font-size: var(--t-lede); }
.about p + p { margin-top: 14px; }
.about blockquote { margin: 22px 0 0; font-size: 1.5rem; color: var(--ink); }

details { border-top: 1px solid var(--edge); padding: 6px 0; }
details:last-child { border-bottom: 1px solid var(--edge); }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; font-size: 1.1rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--lat); font-weight: 200; font-size: 28px; color: var(--sky); transition: transform .3s; }
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--mute); padding-bottom: 18px; max-width: 70ch; }

.contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .contact { grid-template-columns: minmax(0, 1fr); } }
.copy { display: flex; gap: 8px; align-items: center; justify-content: space-between; border-radius: 14px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--edge); padding: 8px 8px 8px 14px; padding-inline: 14px 8px; }
.copy span { font-family: var(--lat); direction: ltr; user-select: all; overflow-wrap: anywhere; }
.copy button { border: 0; border-radius: 999px; background: var(--tint); padding: 6px 12px; font-size: 13px; flex: none; }

footer { border-top: 1px solid var(--edge); padding-block: 40px calc(40px + env(safe-area-inset-bottom, 0px)); color: var(--dim); font-size: 14px; }
footer .in { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; align-items: flex-start; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
footer a { text-decoration: none; color: var(--mute); }
footer a:hover { color: var(--ink); }

/* ---------- a guide (/guides/<page>, built by site/build.py with this stylesheet) ---------- */
.art-wrap { max-width: 720px; margin-inline: auto; padding-block: 48px 96px; }
.crumbs { color: var(--dim); font-size: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { text-decoration: none; color: var(--mute); }
.art-wrap h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); line-height: 1.35; margin-top: 18px; }
.byline { display: flex; gap: 12px; align-items: center; color: var(--dim); font-size: 14px; margin-top: 18px; flex-wrap: wrap; }
.byline .av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #060b13, #0d1c2e); box-shadow: inset 0 0 0 1px var(--edge2); }
.cover { margin-top: 28px; height: 260px; border-radius: 28px; overflow: hidden; position: relative; box-shadow: inset 0 0 0 1px var(--edge); }
.prose { margin-top: 36px; font-size: 1.12rem; line-height: 2; }
.prose > * + * { margin-top: 18px; }
.prose h2 { font-size: 1.7rem; line-height: 1.45; margin-top: 44px; }
.prose p { color: var(--body); }
.prose strong { color: var(--ink); font-weight: 500; }
.prose ul { padding-inline-start: 22px; color: var(--body); }
.prose li + li { margin-top: 8px; }
.prose .tldr { background: var(--card); box-shadow: inset 0 0 0 1px var(--edge); border-radius: 22px; padding: 18px 22px; }
.prose .tldr b { color: var(--sky); font-weight: 500; display: block; font-size: 14px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.prose th { color: var(--dim); font-weight: 400; font-size: 14px; text-align: right; padding: 8px 0; }
.prose td { padding: 12px 0; border-top: 1px solid var(--edge); }
.prose td:not(:first-child), .prose th:not(:first-child) { text-align: left; }
.tablebox { overflow-x: auto; }
.endcta { margin-top: 48px; }
.serp { margin-top: 56px; border-radius: 20px; background: #fff; color: #202124; padding: 18px 20px; font-family: Arial, var(--ar); direction: rtl; }
.serp small { color: #4d5156; font-size: 12px; display: block; }
.serp .u { color: #202124; font-size: 13px; direction: ltr; text-align: right; }
.serp .h { color: #1a0dab; font-size: 19px; line-height: 1.4; margin-top: 4px; }
.serp .d { color: #4d5156; font-size: 14px; line-height: 1.6; margin-top: 4px; }
.serplabel { color: var(--dim); font-size: 13px; margin-top: 56px; display: block; }
.serplabel + .serp { margin-top: 10px; }
/* the waitlist («بلّغني»), at the end of the story */
.wait { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(100%, 30rem); }
.wait__row { display: flex; gap: 8px; width: 100%; }
.wait input { flex: 1; min-width: 0; height: 52px; padding-inline: 18px; border-radius: 999px; border: 0; background: var(--fill); box-shadow: inset 0 0 0 1px var(--field); color: var(--ink); font: 400 1rem var(--ar); }
.wait input::placeholder { color: var(--dim); }
.wait input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
.wait .pill { flex: none; height: 52px; }
.wait .pill[disabled] { opacity: .6; cursor: default; }
.wait__note { color: var(--dim); font-size: 13px; }
.wait__msg { min-height: 1.6em; font-size: 15px; color: var(--sky); }
.wait__msg.is-err { color: var(--danger); }
.wait__hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* The guides (/guides): the home page's look (its stylesheet is included first), plus what a long read needs. */
body { background: radial-gradient(90% 50% at 50% -10%, var(--halo), transparent 70%), var(--paper); }
[data-theme="light"] body { background: var(--dots), radial-gradient(95% 42% at 50% -6%, rgba(191, 221, 245, .9), transparent 72%), var(--paper); }
.top::before { opacity: 1; }
.art-wrap { max-width: 760px; }
.lede { color: var(--mute); font-size: var(--t-lede); margin-top: 16px; }
.byline .upd { color: var(--mute); }
.toc { margin-top: 28px; padding: 18px 22px; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--edge); background: var(--tint2); }
.toc b { color: var(--sky); font-weight: 500; font-size: 14px; display: block; margin-bottom: 6px; }
.toc ol { margin: 0; padding-inline-start: 20px; color: var(--mute); display: grid; gap: 4px; }
.toc a { text-decoration: none; color: var(--mute); }
.toc a:hover { color: var(--ink); }
.prose h2 { scroll-margin-top: 84px; }
.prose h3 { font-size: 1.25rem; font-weight: 500; margin-top: 28px; }
.prose ol { padding-inline-start: 22px; color: var(--body); }
.prose a { color: var(--sky); }
.prose .tool { margin-top: 24px; }
.prose .tool .card { gap: 14px; }
.prose .answer { min-height: 220px; }
.answer .mt { width: 100%; border-collapse: collapse; font-size: 15px; }
.answer .mt td { padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .12); vertical-align: top; }
.answer .mt td:last-child { text-align: left; }
.answer .mt small { color: var(--mute); font-size: 12.5px; }
.steps { list-style: none; padding: 0 !important; display: grid; gap: 12px; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; padding: 16px 18px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px var(--edge), var(--lift); margin: 0 !important; }
.steps li::before { content: counter(s); font: 200 30px/1 var(--lat); color: var(--sky); }
.steps li b { display: block; color: var(--ink); font-weight: 500; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 620px) { .duo { grid-template-columns: minmax(0, 1fr); } }
.duo > div { padding: 18px 20px; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px var(--edge), var(--lift); }
.duo h3 { margin: 0 0 6px !important; font-size: 1.1rem !important; }
.duo p, .duo li { font-size: 1rem; line-height: 1.8; }
.duo .tag { display: inline-flex; padding: 2px 10px; border-radius: 999px; background: var(--chip); color: var(--sky); font-size: 12.5px; margin-bottom: 8px; }
.say { margin: 28px 0 0; padding: 4px 18px; border-inline-start: 2px solid var(--sky); font-size: 1.35rem; line-height: 1.7; color: var(--ink); }
.say small { display: block; color: var(--mute); font-size: 1rem; margin-top: 4px; }
.note { color: var(--dim); font-size: 14.5px !important; line-height: 1.8; }
.faqs { margin-top: 56px; }
.faqs h2 { margin-bottom: 8px; }
.related { margin-top: 64px; }
.related h2 { font-size: 1.4rem; margin-bottom: 16px; }
.related .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .related .grid3 { grid-template-columns: minmax(0, 1fr); } }
.related .post .art { height: 110px; }
.hub { padding-block: 48px 96px; }
.hub h1 { font-size: var(--t-display); line-height: 1.2; }
.hub .lede { max-width: 640px; }
.hub .cat { margin-top: 56px; }
.hub .cat h2 { font-size: var(--t-h3); color: var(--mute); margin-bottom: 16px; }
.hub .tools4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 36px; }
@media (max-width: 860px) { .hub .tools4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .hub .tools4 { grid-template-columns: minmax(0, 1fr); } }
.hub .tools4 a { text-decoration: none; padding: 18px 20px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px var(--edge), var(--lift); display: flex; flex-direction: column; gap: 4px; }
.hub .tools4 a:hover { box-shadow: inset 0 0 0 1px var(--edge2), var(--lift); }
.hub .tools4 b { font-weight: 500; }
.hub .tools4 span { color: var(--mute); font-size: 14px; }
select.sel { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--ink); font: 400 17px var(--ar); }
select.sel option { background: var(--solid-card); }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 420px) { .row2 { grid-template-columns: minmax(0, 1fr); } }
.prose .tool { grid-template-columns: minmax(0, 1fr); }
.prose .endcta { margin-top: 40px; }
.endcta .pill { align-self: flex-start; margin-top: 8px; }
/* the proverbs page */
.sayg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 620px) { .sayg { grid-template-columns: minmax(0, 1fr); } }
.sayg figure { margin: 0; padding: 20px 22px; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px var(--edge); display: flex; flex-direction: column; gap: 8px; }
.sayg blockquote { margin: 0; font-size: 1.3rem; line-height: 1.6; color: var(--ink); }
.sayg figcaption { color: var(--mute); font-size: 1rem; line-height: 1.8; }
.sayg .tag { align-self: flex-start; display: inline-flex; padding: 2px 10px; border-radius: 999px; background: var(--chip); color: var(--sky); font-size: 12.5px; }
/* the hub */
.hub .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.hub .chips span { padding: 6px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--edge2); color: var(--mute); font-size: 14px; }
.hub .chips b { font-family: var(--lat); font-weight: 400; color: var(--ink); margin-inline-end: 4px; }
.hub .tools4 a.big { grid-column: span 2; background: radial-gradient(70% 90% at 50% 130%, rgba(60, 124, 180, var(--big-glow, .7)), transparent), var(--card); justify-content: flex-end; min-height: 150px; }
.hub .tools4 a.big b { font-size: 1.5rem; }
@media (max-width: 480px) { .hub .tools4 a.big { grid-column: auto; } }
.hub .tools4 i { font-style: normal; color: var(--sky); font-size: 13px; margin-top: auto; padding-top: 6px; }
.hub .say { max-width: 640px; }
.hub .endcta { margin-top: 64px; }
[data-theme="light"] .hub .tools4 a.big { --big-glow: .28; }