/* Muhandis design system. Tokens and components from the approved home page (canvas «مهندس — الصفحة الرئيسية», v8). See DESIGN.md. */

:root {
  /* colour */
  --ground: #FFFFFF;
  --ink: #0E1116;
  --ink-2: #2B323D;      /* body text on white, 12.9:1 */
  --ink-3: #3A4250;      /* secondary text, 10.4:1 */
  --muted: #5B6473;      /* captions, 6.2:1 on white */
  --blue: #2447D6;       /* committed royal blue fields and links, 6.7:1 on white */
  --blue-ink: #1532A8;   /* link hover, text on pale blue */
  --blue-on: #E3E9FF;    /* body text on blue, 5.9:1 */
  --blue-on-2: #C9D4FF;  /* small print on blue, 4.8:1 */
  --saffron: #F6C344;    /* highlighter, primary button, focus halo (the ring itself is ink, or saffron on blue) */
  --saffron-ink: #2E2610;/* text on saffron fields */
  --pale: #E9EEFF;       /* secondary fields */
  --cream: #FFF3D1;      /* price pill */
  --cream-ink: #4A3B10;
  --surface: #F4F6FB;    /* phone screens */
  --line: #E2E6EF;
  --line-2: #858E9F;     /* field and control borders, 3.3:1 on white (WCAG 1.4.11) */
  --line-choice: #7385C8;/* option cards on the pale field, 3.1:1 on --pale */
  --error: #9B1C1C;
  --error-bg: #FDECEC;
  --error-strong: #E5484D;
  --success: #1F9D61;
  --success-ink: #0B5C36;
  --success-bg: #E3F6EC;

  /* type: «Muhandis Riyal» carries only the riyal sign (U+20C1), which system fonts lack, so it leads both stacks */
  --display: 'Muhandis Riyal', 'Alexandria', 'IBM Plex Sans Arabic', Tahoma, sans-serif;
  --body: 'Muhandis Riyal', 'IBM Plex Sans Arabic', Tahoma, sans-serif;
  --fs-body: 17px;
  --fs-h1: clamp(40px, 5.4vw, 72px);
  --fs-h2: clamp(22px, calc(3vw + 6px), 46px);      /* at least 1.25× under the hero h1 at every width */
  --fs-h3: clamp(20px, calc(2.4vw + 6px), 34px);
  --fs-lead: clamp(18px, 1.8vw, 21px);
  --fs-ui: 18px;         /* panel descriptions */
  --fs-small: 15px;      /* small print */
  --fs-caption: 14px;    /* captions, meta */
  --fs-micro: 13px;      /* tags, report meta */

  /* shape and space */
  --r-media: 24px;
  --r-panel: 28px;
  --r-card: 18px;
  --r-field: 14px;
  --r-pill: 999px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(52px, 9vw, 120px);
  --max: 1200px;
  --shadow-panel: 0 24px 48px -36px rgba(14, 17, 22, .35);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* The Saudi Central Bank's riyal sign, built by scripts/build-riyal-font.py; used for that one character only. */
@font-face { font-family: 'Muhandis Riyal'; src: url('/fonts/riyal.woff') format('woff'); unicode-range: U+20C1; font-display: block; }

*, *::before, *::after { box-sizing: border-box; }
[hidden]:not([data-step]) { display: none !important; }
section[data-step][hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--body); font-size: var(--fs-body); line-height: 1.75; overflow-x: hidden; }
img, video { max-width: 100%; display: block; }
a { color: var(--blue); text-underline-offset: 5px; }
a:hover { color: var(--blue-ink); }
::selection { background: var(--saffron); color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--saffron); }
/* On blue the ring turns saffron (4.35:1 on blue); ink would vanish into the field. */
.field-blue :focus-visible, .app-header :focus-visible { outline-color: var(--saffron); box-shadow: 0 0 0 2px var(--ink); }
mark { background: linear-gradient(transparent 55%, var(--saffron) 55%) no-repeat right / 100% 100%; color: inherit; padding: 0 .08em; }
h1, h2, h3, .display { font-family: var(--display); font-weight: 800; line-height: 1.3; margin: 0; text-wrap: balance; }
p { margin: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; background: var(--saffron); color: var(--ink); padding: 10px 16px; border-radius: var(--r-pill); z-index: 10; }
.skip:focus { top: 8px; }

/* layout */
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.field-blue { background: var(--blue); color: #fff; }
.field-pale { background: var(--pale); }
.split { display: flex; flex-wrap: wrap; gap: clamp(36px, 5vw, 72px); align-items: center; }
.split > * { min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 22px; }
.row { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.lead { font-size: var(--fs-lead); line-height: 1.85; color: var(--ink-2); max-width: 32em; }
.field-blue .lead { color: var(--blue-on); }
.small { font-size: var(--fs-small); color: var(--muted); }
.field-blue .small { color: var(--blue-on-2); }
.field-blue .small a { color: inherit; }
.h2 { font-size: var(--fs-h2); }
/* Skip-link target: takes focus without drawing a ring around the headline. */
[tabindex="-1"]:focus { outline: none; box-shadow: none; }
.pain-h { color: var(--ink); }

/* header */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 18px; }
/* The wordmark is an SVG (images/wordmark*.svg) sized from the font-size, so the existing size rules per place still hold:
   its box is 0.8em tall, the ink inside it 0.76em, as the text wordmark was. */
.wordmark { font-size: 30px; line-height: 1; color: inherit; text-decoration: none; display: inline-flex; align-items: center; }
.wordmark-img { display: block; height: .8em; width: auto; }
.wordmark-foot { font-size: 24px; vertical-align: -4px; }
/* Smallest phones: the hero h1 bottoms out at 28px, so the wordmark steps down to stay under it. */
@media (max-width: 360px) { .site-header .wordmark { font-size: 22px; } }
.nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px); flex-wrap: wrap; font-size: 16px; }
.nav a { color: inherit; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.nav a.btn-white { color: var(--blue); }
.nav a:not(.btn) { min-width: 44px; justify-content: center; }
@media (max-width: 480px) { .nav-extra { display: none !important; } }

/* buttons: pill, 44px minimum */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 28px; border-radius: var(--r-pill); font: inherit; font-weight: 700; font-size: 18px; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .15s var(--ease), background .2s; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--saffron); color: var(--ink); }
.btn-primary:hover { background: #F0B92C; color: var(--ink); }
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--blue-ink); color: #fff; }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #262C36; color: #fff; }
.btn-white { background: #fff; color: var(--blue); min-height: 44px; padding: 0 20px; font-size: 16px; }
.btn-ghost { background: transparent; color: var(--blue); border-color: var(--line-2); }
.btn-danger { background: var(--error-bg); color: var(--error); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 16px; }
.btn-lg { min-height: 60px; padding: 0 32px; font-size: 19px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.text-link { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; color: inherit; }

/* hero */
/* The phone is the hero's one object: it sits on the field's bottom edge and hangs into the next section,
   so the field ends where the copy ends and the two sections lock together. */
.hero { overflow: visible; }
.hero-inner { padding-block: clamp(24px, 5vw, 64px) 0; align-items: flex-end; }
.hero-copy { padding-bottom: clamp(56px, 8vw, 104px); }
/* «بالذكاء الاصطناعي؟» is held together by a no-break space, so the size follows the column, never the other way round. */
.hero-copy { flex: 3 1 600px; gap: 22px; container-type: inline-size; }
.hero h1 { font-size: min(var(--fs-h1), 9.4vw); line-height: 1.3; color: #fff; }
@supports (font-size: 1cqi) { .hero h1 { font-size: max(28px, min(var(--fs-h1), 9.6cqi)); } }
.hero h1 span { color: var(--saffron); }
/* Wide but short screens (a 730px-tall laptop): the headline also follows the window's height, so the urgent line
   and its live time sit in the first screen. The turn and the section headings step down with it to keep the 1.25× rule. */
@media (min-width: 861px) and (max-height: 820px) {
  .hero-inner { padding-top: 12px; }
  .hero-copy { gap: 16px; }
  .hero h1 { font-size: min(var(--fs-h1), 9.4vw, 8vh); }
  @supports (font-size: 1cqi) { .hero h1 { font-size: max(28px, min(var(--fs-h1), 9.6cqi, 8vh)); } }
  .h2 { font-size: min(var(--fs-h2), 5.6vh); }
  .pain .relief { font-size: min(clamp(22px, calc(3vw + 8px), 52px), 6.2vh); }
}
.hero-lead { max-width: 30em; }
.hero-link { color: #fff; }
/* The route for a product that is down: white on blue, its link underlined in saffron (saffron text is 4.3:1 here), the time kept on one line. */
.hero-urgent { font-size: 17px; line-height: 1.7; color: #fff; max-width: 32em; text-wrap: pretty; border-inline-start: 3px solid var(--saffron); padding-inline-start: 16px; }
.hero-urgent a { color: #fff; font-weight: 700; text-decoration-color: var(--saffron); text-decoration-thickness: 2px; padding-block: 12px; }
.hero-urgent a:hover { color: #fff; text-decoration-color: #fff; }
.hero-media { flex: 1 1 340px; display: flex; justify-content: center; align-items: flex-end; position: relative; z-index: 1; }
.phone { position: relative; width: 248px; min-height: 470px; display: flex; background: var(--ink); border-radius: 40px; padding: 10px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.35); margin-bottom: -110px; }
/* The section after the hero clears the hanging phone. */
.pain { padding-top: calc(110px + clamp(40px, 5vw, 72px)); }
@media (max-width: 860px) {
  .hero-copy { padding-bottom: 32px; }
  .phone { margin-bottom: -80px; }
  .pain { padding-top: calc(80px + 40px); }
}
.phone-screen { width: 100%; flex: 1; background: var(--surface); border-radius: 31px; overflow: hidden; display: flex; flex-direction: column; color: var(--ink); font-size: 13px; }
.phone-notch { height: 26px; display: flex; justify-content: center; align-items: center; }
.phone-notch span { width: 72px; height: 18px; background: var(--ink); border-radius: 10px; }
.phone-bar { padding: 8px 16px 10px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); }
.phone-store { font-size: 15px; }
.phone-cart { font-size: var(--fs-micro); color: var(--muted); }
.phone-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.phone-row { background: #fff; border-radius: 14px; padding: 12px; display: flex; justify-content: space-between; }
.bubble { border-radius: 14px; padding: 10px 12px; line-height: 1.6; }
.bubble-error { background: var(--error-bg); color: var(--error); font-weight: 600; }
.bubble-reply { background: var(--blue); color: #fff; border-radius: 16px 16px 16px 4px; }
/* The sender is the wordmark itself (white on the blue bubble), as in the header: 16px tall. */
.bubble-from { display: block; font-size: 20px; line-height: 1; margin-bottom: 6px; }
.bubble-ok { background: var(--success-bg); color: var(--success-ink); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.phone-pay { margin: 0 16px 18px; background: var(--ink); color: #fff; border-radius: var(--r-pill); text-align: center; padding: 12px; font-weight: 700; font-size: 14px; }
.phone [data-step] { transition: opacity .4s var(--ease), transform .4s var(--ease), background-color .4s var(--ease), color .4s var(--ease); }
/* Unplayed bubbles keep their space as quiet placeholders, so the phone is the same size throughout and never shows a blank gap. */
.phone[data-playing] [data-step][hidden] { display: block; background: #E6E9F0; color: transparent; }
.phone[data-playing] [data-step][hidden] > * { visibility: hidden; }

/* pain quotes */
/* The visitor's sentences as a chorus, then the turn across the full width with its explanation beside it. No photo. */
.pain { display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 28px); }
.pain-h { margin-bottom: 0; }
.quotes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(12px, 2vw, 18px) clamp(32px, 4vw, 56px); font-family: var(--display); font-weight: 700; font-size: clamp(19px, calc(1.6vw + 8px), 30px); line-height: 1.4; }
.quotes li { text-wrap: balance; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; }
/* One small ink drawing leads each sentence (first column, so it stays put while sentences change length);
   with the rotation on it pops in and draws its strokes as its sentence arrives. */
.quote-art { order: -1; width: 64px; height: 64px; color: var(--ink); overflow: visible; }
.quote-art .qa-tilt { transform-box: fill-box; transform-origin: center; transform: rotate(-10deg); }
.quotes[data-rotating] li[data-on] .quote-art { animation: art-pop .5s var(--ease) both; }
.quotes[data-rotating] li[data-on] .qa-draw { stroke-dasharray: 160; stroke-dashoffset: 160; animation: art-draw .7s var(--ease) .15s forwards; }
@keyframes art-pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes art-draw { to { stroke-dashoffset: 0; } }
/* The static list (no script, reduced motion) runs in two ruled columns on wide screens. */
@media (min-width: 861px) {
  .quotes:not([data-rotating]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quotes:not([data-rotating]) li { border-top: 1px solid var(--line); padding-top: 12px; }
}
.quotes mark { white-space: nowrap; } /* a highlighted phrase never breaks across lines */
/* Rotating quotes (app.js sets data-rotating): one slot; each sentence snaps up fast out of a blur, its highlight sweeps,
   it holds for the pause, then flicks away upward as the next arrives. */
.quotes[data-rotating] { display: grid; }
.quotes[data-rotating] li { grid-area: 1 / 1; opacity: 0; transform: translateY(32px) scale(.97); filter: blur(8px); pointer-events: none;
  transition: opacity .28s var(--ease), transform .38s var(--ease), filter .28s var(--ease); }
.quotes[data-rotating] li[data-out] { transform: translateY(-24px) scale(.98); transition-duration: .2s, .24s, .2s; }
.quotes[data-rotating] li[data-on] { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.quotes[data-rotating] mark { background-size: 0% 100%; transition: background-size .4s var(--ease) .22s; }
.quotes[data-rotating] li[data-on] mark { background-size: 100% 100%; }
.quotes-ctl { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.quotes-ctl[hidden] { display: none; }
.quotes-dots { display: flex; gap: 6px; }
.quotes-dot { width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; }
.quotes-dot span { display: block; width: 100%; height: 4px; border-radius: 2px; background: var(--line-2); overflow: hidden; position: relative; }
.quotes-dot span::after { content: ''; position: absolute; inset: 0; background: var(--blue); transform: scaleX(0); transform-origin: right; }
.quotes-dot[data-seen] span::after { transform: scaleX(1); }
.quotes-dot[aria-current="true"] span::after { animation: quote-fill var(--quote-ms, 3400ms) linear forwards; }
[data-quotes][data-paused] .quotes-dot[aria-current="true"] span::after { animation-play-state: paused; }
/* Stopped: the chosen sentence's bar reads full and in ink, so a tap visibly lands and the current sentence still stands out
   from the seen ones (blue) when the rotation rests on the last sentence. */
[data-quotes][data-stopped] .quotes-dot[aria-current="true"] span::after { animation: none; transform: scaleX(1); background: var(--ink); }
@keyframes quote-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.quotes-toggle { font: inherit; font-size: var(--fs-small); font-weight: 600; color: var(--ink-3); background: none; border: 0; min-height: 44px; min-width: 44px; padding: 0 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 5px; }
/* The turn of the page: set larger than the problem it answers. */
/* Larger than the quotes it answers, still under the hero h1. */
.relief { font-family: var(--display); font-weight: 800; font-size: clamp(24px, calc(3.2vw + 8px), 56px); line-height: 1.15; color: var(--blue); margin: 0; }
.relief-turn { color: var(--blue); }
/* The turn: a full-width grid, the line on one side and its explanation beside it, the two bottoms aligned. */
.turn { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px clamp(24px, 4vw, 56px); align-items: end; margin-top: clamp(28px, 4vw, 48px); }
.turn .lead { max-width: 30em; }
@media (min-width: 861px) { .turn { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.media { width: 100%; object-fit: cover; border-radius: var(--r-media); }
/* The tools as pills, each a link to its platform page; the running-text link keeps its 44px tap height. */
.tools-line { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 16px; color: var(--ink-3); }
.tools-line .tool { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: var(--r-pill); direction: ltr; color: var(--ink); font-weight: 600; text-decoration: none; }
.tools-line .tool:hover { border-color: var(--blue); color: var(--blue-ink); }
.tools-line > span > a, .closing-mail a { padding-block: 12px; }
.nowrap { white-space: nowrap; }
.pull { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.5; color: var(--blue); max-width: 22em; text-wrap: balance; }
.pull mark { padding: 0 .04em; white-space: nowrap; }
/* Three promises in three columns, each a display line with its explanation under it; one column on phones. */
.vows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px clamp(24px, 3vw, 40px); }
.vows li { border-top: 1px solid rgba(255,255,255,.35); padding-top: 18px; }
.vows strong { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(20px, calc(1.4vw + 8px), 26px); line-height: 1.3; color: #fff; margin-bottom: 10px; }
.vows span { color: var(--blue-on); font-size: 16px; line-height: 1.75; }
@media (min-width: 701px) { .vows { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* the price list: every Service, price and proof on one ruled list, nothing behind a tab */
.services-inner { gap: clamp(28px, 4vw, 44px); }
/* The intro sits under its heading, not stranded across the row. */
.services-head { flex-direction: column; align-items: flex-start; gap: 10px; }
.services-intro { max-width: 28em; color: var(--ink-2); }
/* How it works, in one line before the decision: a sequence, so the numbers carry meaning. */
.flow { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px clamp(20px, 3vw, 40px); }
.flow li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.flow b { color: var(--ink); }
.flow-n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--saffron); color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 14px; }
@media (max-width: 700px) { .flow { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
.price-list { list-style: none; margin: 0; padding: 0; }
/* A row: the sentence and Service, what it does and three things received, the sample, then the price and the one button. */
.price-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) 240px 200px; gap: 18px clamp(20px, 3vw, 36px); align-items: start; padding: 30px 0 32px; border-bottom: 1px solid var(--line); }
/* The free Quote first, on its own cream band, bleeding 16px into the gutter (never past it). */
.row-free { background: var(--cream); border-bottom: 0; border-radius: 20px; padding-inline: 16px; margin-inline: -16px; }
/* An ink rule divides the free row from the paid ones. */
.row-free + .price-row { border-top: 2px solid var(--ink); margin-top: 8px; }
.row-h { font-size: inherit; line-height: inherit; }
.row-q { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(20px, calc(1.6vw + 6px), 26px); line-height: 1.3; color: var(--ink); text-decoration: none; text-wrap: balance; }
.row-q:hover { color: var(--blue-ink); text-decoration: underline; text-underline-offset: 6px; }
.row-svc { margin-top: 8px; font-size: var(--fs-small); color: var(--ink-3); font-weight: 600; }
.row-svc b { color: var(--blue-ink); }
.row-get .ticks { margin-top: 4px; }
.row-get .ticks li { font-size: 16px; }
/* Once, under the whole list. */
.list-reassure { margin: 18px 0 0; }
/* The sample at caption size, never smaller: the proof sits beside the price. */
.row-sample .sample { max-width: 320px; }
/* Wide screens: the sample is simply there (the disclosure is open and shows no control). Phones fold it: see the 560px block. */
.sample-fold summary { display: none; }
/* The three promises in short, before the first price. */
.vows-line { list-style: none; margin: -8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 28px; font-size: var(--fs-small); font-weight: 600; }
.vows-line li { display: flex; align-items: center; gap: 8px; }
.vows-line li::before { content: ''; display: inline-block; width: 14px; height: 14px; flex: none; background: var(--success);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E") center / contain no-repeat; }
.vows-line a { color: var(--ink); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.vows-line a:hover { color: var(--blue-ink); text-decoration: underline; text-underline-offset: 5px; }
.row-sample .sample-page { font-size: var(--fs-caption); }
.row-act { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.row-price { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1.2; color: var(--ink); }
.row-price small { display: block; font-family: var(--body); font-weight: 500; font-size: var(--fs-caption); color: var(--ink-3); margin-top: 4px; line-height: 1.5; text-wrap: pretty; }
.row-act .btn { width: 100%; }
/* Second Opinion and Partner: two slim ruled links under the list, not rows. */
.menu-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 56px); margin-top: 4px; }
.menu-more a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; min-height: 44px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.menu-more a:hover b { color: var(--blue-ink); text-decoration: underline; text-underline-offset: 6px; }
.menu-more a b { font-family: var(--display); font-size: 18px; display: block; color: var(--ink); }
.menu-more a > span > span { font-size: var(--fs-small); color: var(--ink-3); }
.menu-more a em { font-style: normal; font-family: var(--display); font-weight: 800; white-space: nowrap; }
@media (max-width: 1100px) { .price-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 700px) { .menu-more { grid-template-columns: minmax(0, 1fr); } }
/* Phones: one column; the price and button come before the sample, so the free row never reads as the sample's «750»;
   the cream band stays inside the gutter, so its corners never touch the screen edge. */
@media (max-width: 560px) {
  .price-row { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 24px 0 26px; }
  .row-sample { order: 1; }
  .row-price { font-size: 24px; }
  .row-free { margin-inline: 0; }
  /* The sample folds behind «شوف نموذج من اللي يوصلك» (app.js closes it; without script it stays open). */
  .sample-fold summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; font-weight: 700; font-size: var(--fs-small); color: var(--blue-ink); cursor: pointer; list-style: none; }
  .sample-fold summary::-webkit-details-marker { display: none; }
  .sample-fold[open] summary { margin-bottom: 10px; }
  .sample-fold[open] .plus-v { transform: scaleY(0); }
}
/* A service page gives the sample a full-width row at reading size: the artifact is the proof. */
@container (min-width: 560px) {
  .sample-slot .sample { max-width: none; }
  .sample-slot .sample-page { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px 28px; align-items: start; padding: 20px 24px 24px; font-size: var(--fs-small); }
  .sample-slot .sample-top { grid-column: 1 / -1; font-size: 18px; }
  .sample-slot .sample-top .tag { font-size: var(--fs-caption); }
  .sample-slot .sample-price { grid-column: 1 / -1; font-size: var(--fs-small); }
  .sample-slot .sample-bar i { width: 26px; height: 8px; }
}
.sample { margin: 0; display: flex; flex-direction: column; gap: 8px; max-width: 340px; }
.sample figcaption { font-size: var(--fs-caption); color: var(--muted); }
/* The page runs off the bottom edge, open-ended: a crop of a longer document, not a card. */
.sample-sheet { border-bottom: 1px dashed var(--line-2); }
.sample-page { background: var(--surface); border-radius: 12px 12px 0 0; padding: 14px 14px 18px; display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-micro); line-height: 1.5; color: var(--ink-3); }
.sample-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-family: var(--display); font-size: 13px; color: var(--ink); }
.sample-top .tag { font-family: var(--body); font-size: var(--fs-micro); padding: 1px 8px; }
.sample-scores, .sample-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sample-scores li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sample-score { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.sample-score b { font-family: var(--display); color: var(--ink); min-width: 2.2em; text-align: end; }
.sample-score b.zero { color: var(--error); }
.sample-bar { display: flex; gap: 3px; flex: none; }
.sample-bar i { width: 16px; height: 6px; border-radius: 3px; background: var(--line); }
.sample-bar[data-score="1"] i:first-child { background: var(--error-strong); }
.sample-bar[data-score="2"] i:nth-child(-n+2) { background: var(--saffron); }
.sample-bar[data-score="3"] i { background: var(--success); }
.sample-items li { border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.sample-items b, .sample-note b, .sample-label { display: block; color: var(--ink); }
.sample-price { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--display); font-weight: 800; font-size: 13px; }
.sample-note { background: var(--pale); color: var(--blue-ink); border-radius: 8px; padding: 6px 8px; }
.sample-note-red { background: var(--error-bg); color: var(--error); }
.sample-note-red b { color: var(--error); }
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { border-radius: var(--r-pill); padding: 6px 14px; font-size: 15px; font-weight: 600; background: var(--pale); color: var(--blue-ink); }
.pill-price { background: var(--cream); color: var(--cream-ink); font-weight: 700; }
.level-rows { display: flex; flex-direction: column; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.level-rows legend { font-weight: 700; font-size: 16px; padding: 0; margin-bottom: 8px; }
.level-row { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 12px 16px; border: 1.5px solid var(--line-2); border-radius: 14px; cursor: pointer; transition: border-color .2s, background .2s; }
.level-row:hover { border-color: var(--blue); }
.level-row input { width: 20px; height: 20px; margin: 0; accent-color: var(--blue); }
.level-row:has(input:checked) { border-color: var(--blue); background: var(--pale); }
.level-row:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--saffron); }
.level-row-name { font-family: var(--display); font-weight: 700; font-size: 17px; }
.level-row-time { display: block; font-family: var(--body); font-weight: 400; font-size: var(--fs-caption); color: var(--muted); }
.level-row-price { font-family: var(--display); font-weight: 800; font-size: 17px; white-space: nowrap; }
/* «مو متأكد»: checked on load, so a level is never required and can always be undone. */
.level-row-unsure { grid-template-columns: 22px minmax(0, 1fr); }
.level-row-desc { grid-column: 2 / 4; font-size: 14px; color: var(--ink-3); line-height: 1.6; }
.ticks { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 20px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; }
.ticks svg { flex: none; margin-top: 4px; }
/* Ink text with a green tick: the reassurance reads as fact, without a third accent colour beside the button. */
.reassure { text-wrap: pretty; font-size: var(--fs-small); color: var(--ink-3); font-weight: 600; margin: -6px 0 0; }
.reassure::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-inline-end: 6px; vertical-align: -2px; background: var(--success);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E") center / contain no-repeat; }
.reassure-on-saffron { color: var(--saffron-ink); margin: 0; }

.tag { align-self: flex-start; border-radius: var(--r-pill); padding: 3px 12px; font-size: var(--fs-micro); font-weight: 700; }
.tag-red { background: var(--error-bg); color: var(--error); }
.tag-amber { background: var(--cream); color: var(--cream-ink); }
.tag-green { background: var(--success-bg); color: var(--success-ink); }
.tag-blue { background: var(--pale); color: var(--blue-ink); }

/* steps */
.steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 22px; }
.steps li { display: flex; gap: 18px; align-items: flex-start; }
.promise-h { color: #fff; }
.step-n { font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--ink); background: var(--saffron); width: 48px; height: 48px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; }

/* ruled list (who we are) and promises */
.ruled { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px 32px; }
.ruled li { border-top: 3px solid var(--blue); padding-top: 14px; }
.ruled-list { grid-template-columns: minmax(0, 1fr); gap: 22px; }
/* Who we are breaks the page's heading-beside-body rhythm: the quote runs the full width at display size,
   and the paragraph steps across to the other side under it. */
.about { display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 28px); }
.about .pull { font-size: clamp(20px, 2.8vw, 38px); line-height: 1.45; max-width: 24em; }
.about-body .lead { margin-top: clamp(22px, 3vw, 36px); max-width: 34em; }
@media (min-width: 861px) { .about-body .lead { margin-inline-start: auto; } }
.pull-figure { margin: 0; }
/* The person who signs the quote, beside it. */
.about .pull-figure { display: grid; grid-template-columns: clamp(96px, 14vw, 200px) minmax(0, 1fr); gap: 0 clamp(18px, 3vw, 40px); align-items: center; }
.pull-face { grid-row: span 2; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-media); }
.pull-figure blockquote { margin: 0; }
.pull-by { margin-top: 14px; font-size: 16px; color: var(--ink-2); }
.pull-by strong { color: var(--ink); }
.closing-mail { font-size: var(--fs-small) !important; }
.closing-mail a { color: var(--saffron-ink); font-weight: 700; }
/* Tighter than a full section, so the blue field reads as a section and not a divider. */
.promise-inner { gap: clamp(24px, 3vw, 36px); padding-block: clamp(48px, 6vw, 80px); }
/* Home «مين حنا؟»: the portrait is its own column at 300×375, the heading, quote and paragraph beside it. */
.about-home { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px clamp(32px, 5vw, 64px); align-items: start; }
.about-home .pull-face { grid-row: auto; width: 200px; height: 250px; aspect-ratio: auto; }
.about-text { display: flex; flex-direction: column; gap: 18px; }
.about-home .pull { margin: 0; font-size: clamp(20px, 2.8vw, 38px); line-height: 1.45; max-width: 22em; }
.about-home .pull-by { margin: -6px 0 0; }
.about-more { align-self: flex-start; font-size: var(--fs-small); color: var(--ink-3); }
@media (min-width: 861px) { .about-home { grid-template-columns: 300px minmax(0, 1fr); } .about-home .pull-face { width: 300px; height: 375px; } }
.ruled strong { font-family: var(--display); font-size: 20px; display: block; margin-bottom: 4px; }

/* lessons index: a ruled list, the newest leading; the whole row is the link */
.lesson-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.lesson-list li { border-bottom: 1px solid var(--line-2); }
.lesson-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; align-items: center; padding: 24px 4px 26px; color: var(--ink); text-decoration: none; }
.lesson-h { grid-column: 1; font-size: clamp(20px, calc(1.1vw + 11px), 26px); font-weight: 700; line-height: 1.45; }
.lesson-desc { grid-column: 1; color: var(--ink-3); font-size: 17px; line-height: 1.75; max-width: 40em; }
.lesson-meta { grid-column: 1; margin-top: 2px; color: var(--muted); font-size: var(--fs-caption); }
.lesson-go { grid-column: 2; grid-row: 1 / span 3; color: var(--blue); font-size: 22px; transition: transform .3s var(--ease); }
.lesson-link:hover .lesson-h { color: var(--blue); }
.lesson-link:hover .lesson-go { transform: translateX(-6px); }
/* Only the «أحدث الدروس» list leads with its newest lesson in larger type; the topic groups are even rows. */
.lesson-list-lead li:first-child .lesson-link { padding-block: 32px 36px; }
.lesson-list-lead li:first-child .lesson-h { font-size: var(--fs-h3); font-weight: 800; line-height: 1.35; }
.lesson-list-lead li:first-child .lesson-desc { font-size: var(--fs-lead); }
.lesson-groups { display: flex; flex-direction: column; gap: clamp(44px, 5vw, 64px); }
.lesson-group { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 24px; }
.lesson-group-head { display: flex; flex-direction: column; gap: 4px; }
.lesson-group-intro { color: var(--ink-3); font-size: 17px; line-height: 1.7; max-width: 40em; }
@media (max-width: 600px) { .lesson-link { gap: 4px 14px; padding-block: 20px 22px; } .lesson-go { font-size: 18px; } }

/* Reading pages (the lessons index and each lesson): the text at its reading width on the start side, and from 961px a
   sticky aside on the far side, as the service pages have, so a wide screen is not half empty. */
.read-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 64px); align-items: start; }
.read-main { min-width: 0; }
.read-aside { display: flex; flex-direction: column; gap: 28px; }
.read-aside-wide { display: none; }
/* .read-aside is in the selector so the panel headings stay quiet inside a .card too. */
.read-aside .read-aside-h { font-size: 19px; font-weight: 700; line-height: 1.45; }
.read-ask p { margin: 0; color: var(--ink-3); font-size: 16px; line-height: 1.7; }
.read-ask .btn { align-self: flex-start; }
.read-outline { display: flex; flex-direction: column; gap: 10px; }
.read-outline ol, .read-outline ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.read-outline li { border-bottom: 1px solid var(--line); }
.read-outline a { display: block; padding: 9px 2px; color: var(--ink-3); font-size: 15px; line-height: 1.55; text-decoration: none; }
.read-outline a:hover { color: var(--blue); }
/* The section the reader is in (app.js marks it while scrolling). */
.read-outline a[aria-current="true"] { color: var(--blue); font-weight: 700; }
.read-sticky { display: flex; flex-direction: column; gap: 28px; }
.prose h2[id] { scroll-margin-top: 24px; }
@media (min-width: 961px) {
  .read-layout { grid-template-columns: minmax(0, 1fr) minmax(260px, 300px); }
  /* A lesson keeps its prose measure, so the aside sits at the far edge with air between them. */
  .read-layout-article { grid-template-columns: minmax(0, 36rem) minmax(260px, 300px); justify-content: space-between; }
  /* The aside runs the full height of the text, and only .read-sticky inside it sticks: never taller than the screen (it
     scrolls within itself if it must), so its bottom is never cut off, and what sits above it scrolls away normally. */
  .read-aside { align-self: stretch; }
  .read-sticky { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain; }
  .read-aside-wide { display: flex; }
}

/* home: lessons as one quiet line after the ask */
.lessons-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; padding-block: 0 clamp(32px, 4vw, 48px); }
.lessons-h { font-size: 18px; font-weight: 700; }
.lessons-line ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 20px; }
.lessons-line ul a { min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; }
.lessons-all { color: var(--ink-3); font-size: var(--fs-small); }

/* FAQ */
/* Home: the questions run in two columns under their heading, never beside it. */
.faq-inner { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 32px); }
.faq-list { min-width: 0; }
@media (min-width: 861px) {
  .faq-inner .faq { column-count: 2; column-gap: clamp(32px, 4vw, 56px); border-top: 0; border-bottom: 1px solid var(--line); }
  .faq-inner .faq details { break-inside: avoid; border-top: 1px solid var(--line); border-bottom: 0; }
}
section:has(> .faq-inner) { border-top: 1px solid var(--line); }
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-size: 19px; font-weight: 700; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq details p { margin: 0 0 20px; color: var(--ink-2); max-width: 30em; } /* ~70 Arabic characters a line */
.faq-link { font-weight: 700; white-space: nowrap; padding-block: 12px; }
.plus-v { transition: transform .3s var(--ease); transform-origin: center; }
.faq details[open] .plus-v { transform: scaleY(0); }

/* closing saffron block */
.closing-section { padding: 0 var(--gutter) clamp(48px, 7vw, 88px); }
.closing-copy { gap: 16px; }
.closing-h { font-size: clamp(22px, calc(2.6vw + 8px), 40px); line-height: 1.3; }
.closing { max-width: calc(var(--max) - 2 * var(--gutter)); margin: 0 auto; background: var(--saffron); border-radius: 32px; padding: clamp(28px, 5vw, 64px); display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 56px); align-items: center; }
.closing > * { flex: 1 1 360px; min-width: 0; }
.closing > .closing-copy { flex-grow: 1.25; }
.closing p { color: var(--saffron-ink); font-size: 19px; }
.preview-card { color: var(--ink); background: #fff; border-radius: var(--r-media); padding: clamp(20px, 3vw, 28px); display: flex; flex-direction: column; gap: 18px; }
.preview-card .small { font-size: var(--fs-small); text-wrap: pretty; }
.closing .preview-card .error-text { margin-top: -8px; color: var(--error); font-size: var(--fs-small); }
.closing .preview-card .reassure { margin: -8px 0 0; font-size: var(--fs-small); }
.preview-head { justify-content: space-between; }
.preview-title { font-size: 20px; }
.preview-field { gap: 8px; }
.preview-field .textarea { min-height: 110px; }
.preview-submit { align-self: flex-start; }
@media (max-width: 520px) { .preview-submit { align-self: stretch; } }

/* footer */
.site-footer { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; font-size: 15px; color: var(--muted); padding-block: 0 32px; }
.site-footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
.site-footer nav a { min-width: 44px; justify-content: center; }
.site-footer a { color: var(--muted); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }

/* prose (service pages, posts, legal) */
.prose { max-width: 32em; font-size: 18px; color: var(--ink-2); }
.prose > * + * { margin-top: 18px; }
.prose h2 { font-size: clamp(26px, 3vw, 34px); color: var(--ink); margin-top: 40px; }
.prose h3 { font-size: clamp(21px, 2.4vw, 26px); color: var(--ink); margin-top: 36px; }
.platform-problems > h3:first-child { margin-top: 0; }
/* A command or key never breaks across lines. */
.prose code { white-space: nowrap; }
.prose ul, .prose ol { padding-inline-start: 1.2em; }
.prose li + li { margin-top: 6px; }
/* A short head: the title, lead, pills and button, with no dead band above or below. */
.page-head { padding-block: clamp(24px, 3vw, 40px) clamp(40px, 5vw, 64px); }
/* With an aside (a Service's sample), the head is two columns and the aside hangs off the blue field into the body. */
.page-head-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 clamp(32px, 5vw, 64px); align-items: end; }
.page-head-aside { position: relative; z-index: 1; margin-bottom: -80px; }
.page-head-aside .sample { max-width: none; }
.page-head-aside .sample-page { background: #fff; border-radius: 18px 18px 0 0; box-shadow: var(--shadow-panel); padding: 20px 22px 22px; font-size: var(--fs-small); }
.page-head-aside .sample-sheet { border-bottom-color: var(--blue-on-2); }
.page-head-aside figcaption { color: var(--blue-on-2); }
.has-head-aside .service-layout { padding-top: calc(80px + clamp(28px, 4vw, 48px)); }
@media (min-width: 961px) {
  .page-head-grid { grid-template-columns: minmax(0, 1.1fr) minmax(300px, 440px); }
  .page-head-aside { margin-bottom: -120px; }
  .has-head-aside .service-layout { padding-top: calc(120px + clamp(28px, 4vw, 48px)); }
}
.page-head h1 { font-size: clamp(36px, 5.4vw, 68px); color: #fff; }
.breadcrumbs { font-size: 15px; }
.breadcrumbs a { color: var(--blue-on); }

/* forms */
.form { display: flex; flex-direction: column; gap: 26px; }
.form fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.form legend, .label { font-weight: 700; font-size: 18px; padding: 0; margin-bottom: 4px; }
.hint { font-size: 15px; color: var(--muted); }
.input, .textarea, .select { width: 100%; font: inherit; font-size: 17px; color: var(--ink); background: #fff; border: 1.5px solid var(--line-2); border-radius: var(--r-field); padding: 12px 14px; min-height: 52px; }
.textarea { min-height: 140px; resize: vertical; line-height: 1.7; }
.input:focus, .textarea:focus, .select:focus { border-color: var(--blue); outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--saffron); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--error-strong); }
.error-text { color: var(--error); font-size: 15px; font-weight: 600; }
.alert { border-radius: var(--r-field); padding: 14px 16px; font-weight: 600; }
.alert-error { background: var(--error-bg); color: var(--error); }
.alert-ok { background: var(--success-bg); color: var(--success-ink); }
.alert-info { background: var(--pale); color: var(--blue-ink); }
.options { display: flex; flex-wrap: wrap; gap: 10px; }
.option { position: relative; }
.option input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.option > span { display: inline-flex; align-items: center; min-height: 44px; border: 1.5px solid var(--line-2); border-radius: var(--r-pill); padding: 6px 16px; font-size: 16px; background: #fff; }
.option input:checked + span { border-color: var(--blue); background: var(--pale); color: var(--blue-ink); font-weight: 700; }
.option input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--saffron); }
.options-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.options-cards .option > span { border-radius: var(--r-card); width: 100%; min-height: 76px; padding: 14px 16px; flex-direction: column; align-items: flex-start; gap: 2px; }
.options-cards .option b { font-family: var(--display); font-size: 17px; }
.options-cards .option small { font-size: 14px; color: var(--muted); font-weight: 400; }
.check { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; cursor: pointer; }
.check input { width: 24px; height: 24px; margin-top: 4px; flex: none; accent-color: var(--blue); }
.progress { display: flex; gap: 6px; }
.progress span { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.progress span[data-on] { background: var(--blue); }
.form-card { background: #fff; border-radius: var(--r-panel); padding: clamp(20px, 4vw, 44px); box-shadow: var(--shadow-panel); }
.form-nav { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 20px; }
.note { background: var(--pale); color: var(--blue-ink); border-radius: var(--r-field); padding: 14px 16px; font-size: 16px; }

/* app shells: portal and dashboard */
.app-header { background: var(--blue); color: #fff; }
.app-header .site-header { padding-block: 12px; }
.app-main { padding-block: clamp(28px, 4vw, 56px) 80px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: clamp(18px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card h2 { font-size: clamp(22px, 2.4vw, 28px); }
.card h3 { font-size: 20px; font-weight: 700; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }
.money { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 3vw, 34px); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 16px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.timeline li { display: flex; gap: 10px; align-items: center; }
.dot { width: 18px; height: 18px; border-radius: 50%; flex: none; border: 2px solid #C9CFDA; }
.dot[data-state="done"] { background: var(--success); border-color: var(--success); }
.dot[data-state="now"] { border-color: var(--blue); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: start; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; background: var(--surface); }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.thread { display: flex; flex-direction: column; gap: 10px; }
.msg { border-radius: 16px; padding: 12px 14px; max-width: 88%; }
.msg-client { background: var(--surface); align-self: flex-start; }
.msg-team { background: var(--pale); align-self: flex-end; }
.msg time { display: block; font-size: 13px; color: var(--muted); }

/* dashboard pipeline */
.pipeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
@media (max-width: 700px) { .pipeline { grid-auto-flow: row; grid-auto-columns: auto; } }
.column { background: var(--surface); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.column h2 { font-size: 16px; font-family: var(--body); font-weight: 700; display: flex; justify-content: space-between; }
.pcard { background: #fff; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); border: 1.5px solid transparent; }
.pcard:hover { border-color: var(--blue); color: var(--ink); }
.countdown { font-size: 14px; font-weight: 700; color: var(--blue-ink); }
.countdown[data-late] { color: var(--error); }
.flag { font-size: 13px; font-weight: 700; border-radius: var(--r-pill); padding: 2px 10px; align-self: flex-start; }
.flag-at_risk, .flag-late { background: var(--cream); color: var(--cream-ink); }
.flag-alert, .flag-breach { background: var(--error-bg); color: var(--error); }
.signal { border-radius: 16px; padding: 14px 16px; border: 1.5px solid var(--line); }
.signal[data-on] { border-color: var(--error-strong); background: var(--error-bg); color: var(--error); font-weight: 700; }

/* report reading view */
.report { max-width: 820px; }
.report h1 { font-size: clamp(30px, 4vw, 44px); }
.report h2 { font-size: clamp(24px, 2.6vw, 30px); margin-top: 36px; }
.score { font-family: var(--display); font-weight: 800; }
.fine-print { font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; }

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

@media print {
  .app-header, .site-header, .no-print, .site-footer { display: none !important; }
  body { font-size: 12pt; }
  .card { border: 0; padding: 0; }
  a { color: inherit; text-decoration: none; }
}


/* Small phones: the phone mockup is the hero picture on its own, so the hero stays near one screen. */
@media (max-width: 520px) {
  .vows span { font-size: 16px; }
  .quotes:not([data-rotating]) li:nth-child(n+4) { display: none; }
  .phone { width: 236px; min-height: 0; }
  /* Phone type peaks: the turn, the promises' heading and the closing ask sit clearly above the 22px section headings,
     and stay under the hero h1's 1.25× (the h1 floor is 28px at 320px, so 6.8vw tops out at 22.4px there). */
  .h2 { font-size: max(21px, 6.2vw); }
  .row-q { font-size: 20px; }
  .quotes { font-size: 21px; }
  .quote-art { width: 48px; height: 48px; }
  .relief { font-size: max(22px, 6.8vw); }
  .promise-h, .closing-h { font-size: max(22px, 6.4vw); }
}

/* Phones: the email line follows the form, so the field comes first. */
@media (max-width: 860px) {
  .closing { row-gap: 18px; }
  .closing-copy { display: contents; }
  .closing-copy > * { flex: 1 1 100%; }
  .closing-mail { order: 2; }
}

/* ---------- inner pages: service, platforms, about, checklist, lessons ---------- */
.section-h { font-size: var(--fs-h3); }
.page-stack { gap: clamp(32px, 4vw, 48px); }
.page-head-cta { align-self: flex-start; }
.pill-on-blue { background: rgba(255, 255, 255, .14); color: #fff; }
.ticks-one { grid-template-columns: minmax(0, 1fr); }
.step-body { padding-top: 8px; }
/* Service page: the body, with a sticky aside of who it suits and the one button. */
.service-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.service-body { gap: clamp(32px, 4vw, 44px); }
@media (min-width: 961px) { .service-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .service-aside { position: sticky; top: 24px; } }
.sample-slot { container-type: inline-size; }
/* Levels on a Service page: rows that go straight into the form with that level chosen. */
.level-links { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.level-links li { border-bottom: 1px solid var(--line); }
/* A ruled row: name and time, the price, a ghost pill, the description under the name. The whole row is the link. */
.level-link { display: grid; grid-template-columns: minmax(0, 1.4fr) 120px auto; gap: 4px 24px; align-items: center; padding: 18px 0; min-height: 44px; color: var(--ink); text-decoration: none; }
.level-link .level-row-name { font-size: 22px; }
.level-link .level-row-time { font-size: var(--fs-small); }
.level-link .level-row-price { font-size: 22px; }
.level-link .level-row-desc { grid-column: 1 / 2; grid-row: 2; }
.level-link .level-go { grid-column: 3; grid-row: 1 / span 2; }
.level-link:hover { color: var(--ink); }
.level-link:hover .level-row-name { color: var(--blue-ink); }
.level-link:hover .level-go { border-color: var(--blue); }
@media (max-width: 700px) {
  .level-link { grid-template-columns: minmax(0, 1fr) auto; }
  .level-link .level-row-desc { grid-column: 1 / -1; }
  .level-link .level-go { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
}
/* Phones: one «ابدأ طلبك» in reach once the hero's button has scrolled away (app.js shows it; never without script). */
.cta-bar { display: none; }
@media (max-width: 860px) {
  .cta-bar:not([hidden]) { display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 5; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -14px 18px -16px rgba(14, 17, 22, .28); }
  .cta-bar .btn { min-height: 48px; padding-inline: 22px; font-size: 17px; flex: none; }
  .cta-bar span { font-size: var(--fs-caption); color: var(--ink-3); text-wrap: balance; flex: 1 1 auto; }
  .cta-bar-x { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
  .cta-bar-x:hover { background: var(--surface); color: var(--ink); }
  body.has-cta-bar { padding-bottom: 84px; }
}
/* A ruled list of where to go next: never a row of identical cards. */
.link-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.link-list li { border-bottom: 1px solid var(--line-2); }
.link-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 20px; align-items: center; padding: 18px 4px; min-height: 44px; color: var(--ink); text-decoration: none; }
.link-list b { font-family: var(--display); font-weight: 700; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.4; }
.link-list-sub { grid-column: 1; color: var(--ink-3); font-size: 16px; }
.link-list .pill { grid-column: 2; grid-row: 1 / span 2; white-space: nowrap; }
.link-list a:hover b { color: var(--blue); }
/* Problems quoted on a platform page: the visitor's sentences, at display size, all at once. */
/* A closing block inside a page column (lesson, checklist): copy, then the one button with its reassurance. */
.closing-inline { margin-top: clamp(40px, 6vw, 64px); max-width: none; }
.closing-action { gap: 10px; align-items: flex-start; }
.closing-link { color: var(--saffron-ink); font-weight: 700; padding-block: 12px; }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
/* About page: the portrait and quote lead, the way of working follows. */
.about-page { gap: clamp(32px, 4vw, 48px); }
.about-prose { max-width: 32em; }
.about-prose .btn { margin-top: 8px; }
.closing-action .reassure { font-size: var(--fs-small); }
/* Breadcrumb and inline links in running text: 44px tap areas without moving the lines. */
.breadcrumbs a, .service-aside .small a { display: inline-block; padding-block: 12px; margin-block: -12px; }
.closing-link { white-space: nowrap; }
/* Intake file picker: the native input covers the whole control (so a tap anywhere opens it), invisible; the Arabic button and file names show through. */
.file-pick { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 52px; padding: 6px 8px; border: 1.5px dashed var(--line-2); border-radius: var(--r-field); background: #fff; }
.file-pick-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-pick-names { font-size: var(--fs-small); color: var(--muted); }
.file-pick:has(.file-pick-input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--saffron); }
.file-pick:hover .file-pick-btn { border-color: var(--blue); }