/* ============================================================================
   Cartiq: the shared stylesheet behind every prototype set.

   Carried forward from the approved landing page as it was seen: the
   same type scale, spacing, radii, shadows, components, breakpoints and motion.
   Four things changed, and only these:
     1. The palette, from warm paper to a bright, ocean-led set. Every value
        below was measured before use (check/palette.js).
     2. The English display face is declared as the face the approved page
        actually rendered, IBM Plex Sans, so the headline is deliberate and
        identical on every screen. The language rule that silently overrode
        component faces is gone. Arabic headlines stay in Amiri, as seen.
     3. Every panel, plate, card and instrument carries an edge that clears
        3:1 against its own fill and against the ground behind it, so it holds
        on an ordinary PC screen and not only a calibrated one.
     4. The product components the platform screens need, built from the same
        parts and the same rhythm, are appended at the end.
   ========================================================================= */

/* ---------- tokens (provisional brand calls, no Cartiq brand pack exists yet) ---------- */
:root {
  /* Ocean surfaces. The page is a light sea-white; sections step into aqua;
     every panel is white so it lifts off the page in tone as well as by edge. */
  --paper: #E9F5F9;
  --paper-2: #D4EBF3;
  --paper-3: #B8DCE9;
  --panel: #FFFFFF;
  /* Ink: deep-sea navy. 15.8:1 on the page, 17.6:1 on a panel. */
  --ink: #0A1A2B;
  --ink-2: #33505F;   /* 7.7:1 on the page, 5.9:1 on the deepest aqua */
  --ink-3: #3E5B6C;   /* 6.5:1 on the page, 4.95:1 on the deepest aqua */
  /* Rules and edges. --line is an interior rule; --edge is a panel boundary,
     3.89:1 on a panel, 3.50:1 on the page, 3.15:1 on an aqua band; --line-strong
     is a control edge at 3:1 or better everywhere it is used. */
  --line: rgba(10, 26, 43, .22);
  --edge: #5F869F;
  --line-strong: rgba(10, 26, 43, .5);
  /* Night: the scene, the closing section, the footer of the story pages. */
  --night: #0E1320;
  --night-2: #161E33;
  --night-3: #1F2A45;
  --night-edge: #5C6E90;               /* 3.6:1 on night, 3.2:1 on night-2 */
  --night-line: rgba(233, 245, 249, .16);
  --night-muted: #B8C6D2;              /* 10.6:1 on night */
  --glow: #FFC98A;
  /* The ocean accent. --accent is a fill and a large mark (3.2:1 on white);
     --accent-ink carries text and thin borders (5.8:1 on white). */
  --accent: #0E9CBF;
  --accent-ink: #0B6E8A;
  --accent-soft: #CDEFF7;
  /* Verdicts, as approved. The neutral pair is cooled to sit in the palette. */
  --buy: #1D6A45; --buy-bg: #DCEFE3;
  --hold: #3B5A82; --hold-bg: #DFE7F2;
  --sell: #9A2F2F; --sell-bg: #F5E0DC;
  --none: #4E5F6B; --none-bg: #E2E9EE;
  /* Form errors, and nothing else, take alert red. */
  --error: #B3261E; --error-bg: #FBE4E2;
  /* Type. The display face is the face the approved page rendered. */
  --font-display: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ar: 'IBM Plex Sans Arabic', 'Segoe UI', 'Noto Sans Arabic', Tahoma, sans-serif;
  --font-ar-display: 'Amiri', 'Noto Naskh Arabic', 'Times New Roman', serif;
  --gutter: clamp(20px, 5vw, 84px);
  --gap: clamp(16px, 2vw, 32px);
  --radius: 22px;
  --shadow-lg: 0 1px 1px rgba(10, 26, 43, .04), 0 10px 24px -10px rgba(10, 26, 43, .16), 0 30px 60px -20px rgba(10, 26, 43, .22);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --sat: env(safe-area-inset-top, 0px);
  --header-h: calc(64px + var(--sat));
  --dir: 1;
}
[dir="rtl"] { --dir: -1; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 20px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
}
img, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { touch-action: manipulation; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 6px; }
.night :focus-visible { outline-color: var(--paper); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: absolute; inset-inline-start: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 999px; text-decoration: none; font-size: 15px; }
.skip:focus-visible { top: 12px; outline-color: var(--ink); }

/* ---------- language variants ---------- */
html[lang="en"] [data-lang="ar"], html[lang="ar"] [data-lang="en"] { display: none !important; }
/* The language's default face sits on the root and is inherited, so a component
   that names its own face keeps it. The approved page set the English face on
   every element through a descendant rule, which is how its display face was
   silently replaced; the rule below only ever applies inside an Arabic page,
   where a Latin name should set in the UI sans. */
html { font-family: var(--font-body); }
html[lang="ar"] { font-family: var(--font-ar); }
/* And on the BODY as well, not only on the root. A host that wraps this page in
   its own shell sets `body { font: 14px <system> }`, and a declaration that
   matches body directly beats a value body merely INHERITED from html, whatever
   the specificity of the inherited one. That is why every set read in San
   Francisco or Arial: the size and the measure came through, because the page
   sets those on body itself, and only the face was lost. `html body` outranks a
   bare `body` whichever stylesheet is read last, so this does not depend on the
   host's load order.
   On body ALONE and never on its descendants: a descendant rule is exactly how
   the approved page's display face was silently replaced, which is what the note
   above is about. Components that name their own face still keep it. */
html body { font-family: var(--font-body); }
html[lang="ar"] body { font-family: var(--font-ar); }
:lang(ar) { letter-spacing: 0; font-style: normal; text-transform: none; }
p:lang(ar), li:lang(ar), td:lang(ar), dd:lang(ar) { line-height: 1.8; }
[dir="rtl"] :lang(en) { font-family: var(--font-body); }
bdi, [dir="ltr"] { unicode-bidi: isolate; }
.fig { font-variant-numeric: tabular-nums; white-space: nowrap; }
.value.fig, dd.fig { white-space: normal; } /* a range may wrap between its two figures; each figure stays whole through its non-breaking spaces */
.fig bdi { white-space: nowrap; }

/* ---------- type ---------- */
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: -.015em; line-height: 1.04; }
.display :lang(ar), .display:lang(ar) { font-family: var(--font-ar-display); font-weight: 400; letter-spacing: 0; line-height: 1.38; }
h1.display { font-size: clamp(40px, 6.1vw, 96px); }
h2.display { font-size: clamp(31px, 4vw, 60px); }
h1.display [data-lang="ar"], h2.display [data-lang="ar"] { font-size: 1.04em; }
h3 { font-size: 22px; font-weight: 500; line-height: 1.3; }
h3:lang(ar), h3 :lang(ar) { font-weight: 600; }
.lead { font-size: 19px; line-height: 1.55; color: var(--ink-2); }
.lead:lang(ar), .lead :lang(ar) { line-height: 1.8; }
.small { font-size: 15px; }
.caption { font-size: 13.5px; color: var(--ink-3); }
.caption:lang(ar), .caption :lang(ar) { font-size: 14.5px; }
.muted { color: var(--ink-2); }
.eyebrow { font-size: 12.5px; font-weight: 500; color: var(--ink-3); margin: 0 0 18px; }
.eyebrow [data-lang="en"] { text-transform: uppercase; letter-spacing: .14em; }
.eyebrow [data-lang="ar"] { font-size: 14px; font-weight: 500; }
.night .eyebrow, .night .caption, .night .muted { color: var(--night-muted); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.link { color: var(--accent-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.link:hover { text-decoration-thickness: 2px; }

/* ---------- layout ---------- */
.wrap { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); max-width: 1560px; margin-inline: auto; } /* symmetric, so the physical safe-area pair is correct in both directions */
.wrap-narrow { max-width: 1120px; }
.wrap-text { max-width: 860px; }
/* Lenis needs these while it drives the scroll */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--gap); }
.section { padding-block: clamp(84px, 11vw, 168px); }
.section-alt { background: var(--paper-2); }
.section-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 24px; align-items: end; margin-bottom: clamp(40px, 6vw, 88px); }
.section-head .title { grid-column: 1 / span 8; }
.section-head .intro { grid-column: 9 / span 4; }
.section-head .intro p { margin: 0; }
@media (max-width: 900px) {
  .section-head .title, .section-head .intro { grid-column: 1 / -1; }
}

/* ---------- buttons and chips ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent;
  font-size: 15.5px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--ink); color: var(--panel); }
.btn-primary:hover { background: #03111F; box-shadow: 0 10px 24px -12px rgba(10, 26, 43, .6); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { background: rgba(10, 26, 43, .06); border-color: var(--ink); }
.btn-accent { background: var(--accent-ink); color: var(--panel); }
.btn-accent:hover { background: #085A71; }
.btn-ghost { background: transparent; color: var(--accent-ink); }
.btn-ghost:hover { background: var(--accent-soft); }
.btn-block { width: 100%; }
.night .btn-primary { background: var(--paper); color: var(--ink); }
.night .btn-primary:hover { background: #fff; }
.night .btn-secondary { color: var(--paper); border-color: rgba(233, 245, 249, .5); }
.night .btn-secondary:hover { background: rgba(233, 245, 249, .1); border-color: var(--paper); }
.btn[aria-disabled="true"] { background: var(--paper-2); color: var(--ink-2); border-color: var(--edge); cursor: not-allowed; box-shadow: none; }
.btn .arrow { width: 18px; height: 18px; transition: transform 300ms var(--ease-out); }
[dir="rtl"] .btn .arrow { transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .arrow { transform: translateX(calc(var(--dir) * 4px)); }
  [dir="rtl"] .btn:hover .arrow { transform: translateX(-4px) scaleX(-1); }
}
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600; line-height: 1.3; border: 1px solid transparent; white-space: nowrap;
}
.chip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.chip-buy { color: var(--buy); background: var(--buy-bg); border-color: rgba(29, 106, 69, .35); }
.chip-hold { color: var(--hold); background: var(--hold-bg); border-color: rgba(59, 90, 130, .35); }
.chip-sell { color: var(--sell); background: var(--sell-bg); border-color: rgba(154, 47, 47, .35); }
.chip-none { color: var(--none); background: var(--none-bg); border-color: rgba(78, 95, 107, .4); }
.chip-none::before { background: transparent; border: 2px solid currentColor; width: 7px; height: 7px; }
.chip-sm { min-height: 26px; font-size: 13.5px; padding: 2px 10px; }
[dir="rtl"] .chip::before { transform: none; }
/* An icon-only control keeps a 44px hit area whatever the glyph size. */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid transparent; background: transparent; cursor: pointer; }
.icon-btn:hover { background: rgba(10, 26, 43, .07); }
.icon-btn svg { width: 20px; height: 20px; }

/* ---------- header ---------- */
.header {
  position: sticky; top: 0; z-index: 60; height: var(--header-h); padding-top: var(--sat); display: flex; align-items: center;
  background: rgba(233, 245, 249, .8); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .header { background: rgba(233, 245, 249, .96); } }
.header .wrap { display: flex; align-items: center; gap: 22px; width: 100%; }
.brand { font-family: var(--font-display); font-weight: 500; font-size: 22px; letter-spacing: -.01em; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; padding: 8px 0; direction: ltr; unicode-bidi: isolate; }
.brand > span { font-family: var(--font-display); }
.brand .mark { width: 26px; height: 26px; }
.nav { display: flex; gap: 26px; margin-inline-start: auto; }
.nav a { font-size: 14.5px; color: var(--ink-2); text-decoration: none; padding: 10px 2px; position: relative; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav a[aria-current="page"]::after { content: ""; position: absolute; inset-inline: 2px; bottom: 4px; height: 2px; background: var(--accent-ink); border-radius: 1px; }
.header-actions { display: flex; align-items: center; gap: 12px; margin-inline-start: auto; }
.nav + .header-actions { margin-inline-start: 0; }
.lang-btn { background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; min-height: 40px; padding: 0 14px; font-size: 14.5px; cursor: pointer; }
.lang-btn:hover { background: rgba(10, 26, 43, .06); border-color: var(--ink); }
.btn-small { min-height: 40px; padding: 0 18px; font-size: 14.5px; }
.menu-btn { display: none; }
@media (max-width: 900px) {
  .nav { display: none; }
  .header-actions .btn-small { display: none; }
  .menu-btn { display: inline-flex; }
}
/* The phone menu: the same links, one per row, from the header edge down. */
.drawer { position: fixed; inset: 0; z-index: 90; background: var(--paper); padding: calc(var(--header-h) + 16px) var(--gutter) 48px; overflow-y: auto; display: grid; align-content: start; gap: 4px; }
.drawer[hidden] { display: none; }
.drawer a { display: flex; align-items: center; min-height: 56px; font-size: 20px; text-decoration: none; border-bottom: 1px solid var(--line); color: inherit; }
.drawer a[aria-current="page"] { font-weight: 600; }
.drawer .lang-btn { margin-top: 24px; justify-self: start; }

/* ---------- hero ---------- */
.hero { position: relative; margin-top: calc(var(--header-h) * -1); padding-top: var(--header-h); min-height: 100vh; min-height: 100svh; display: grid; align-items: end; background: var(--paper-2); overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.hero-media video { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms ease; }
.hero-media video.is-playing { opacity: 1; }
.hero-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, rgba(233, 245, 249, .94) 0%, rgba(233, 245, 249, .86) 30%, rgba(233, 245, 249, .45) 56%, rgba(233, 245, 249, 0) 78%),
              linear-gradient(to top, rgba(233, 245, 249, .92) 0%, rgba(233, 245, 249, .35) 34%, rgba(233, 245, 249, 0) 60%); }
[dir="rtl"] .hero-scrim { background: linear-gradient(to left, rgba(233, 245, 249, .94) 0%, rgba(233, 245, 249, .86) 30%, rgba(233, 245, 249, .45) 56%, rgba(233, 245, 249, 0) 78%),
              linear-gradient(to top, rgba(233, 245, 249, .92) 0%, rgba(233, 245, 249, .35) 34%, rgba(233, 245, 249, 0) 60%); }
.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, 470px); gap: 48px; align-items: end; padding-block: 36px 40px; width: 100%; }
.hero-copy .eyebrow { color: var(--ink-2); }
.hero h1 { max-width: 13ch; margin-bottom: 22px; }
.hero h1 [data-lang="ar"] { max-width: 16ch; }
.hero .lead { max-width: 54ch; margin-bottom: 28px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.media-bar { position: absolute; z-index: 3; inset-inline-end: var(--gutter); top: calc(var(--header-h) + 16px); display: flex; align-items: center; gap: 8px; }
.media-note { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .92); border: 1px solid var(--edge); font-size: 13px; color: var(--ink-2); }
.media-pause { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--line-strong); font-size: 13.5px; font-weight: 500; cursor: pointer; }
.media-pause[hidden] { display: none; }
.media-pause svg { width: 14px; height: 14px; }
.media-pause .icon-play, .media-pause[aria-pressed="true"] .icon-pause { display: none; }
.media-pause[aria-pressed="true"] .icon-play { display: block; }
.scroll-hint { position: absolute; z-index: 3; inset-inline-start: var(--gutter); bottom: 22px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); display: none; }
/* A page hero without the plate: the same stage, copy only. */
.hero-page { min-height: 0; }
.hero-page .hero-inner { grid-template-columns: minmax(0, 1fr); padding-block: clamp(72px, 10vw, 150px) clamp(56px, 7vw, 110px); }
.hero-page .hero-copy { max-width: 900px; }
.hero-page .lead { margin-bottom: 0; }
.hero-page .hero-actions { margin-top: 28px; }

/* the example plate */
.plate { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 22px 22px 20px; }
.plate-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.plate-head h2 { font-size: 17px; font-weight: 600; }
.plate .caption { margin: 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tab { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; }
.tab:hover { background: rgba(10, 26, 43, .06); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.panel[hidden], [role="tabpanel"][hidden] { display: none; }
.panel .home { font-size: 15px; color: var(--ink-2); margin: 0 0 14px; }
.rows { display: grid; gap: 0; border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 118px minmax(0, 1fr); align-items: start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.row dt { font-size: 13.5px; color: var(--ink-3); padding-top: 3px; }
.row dd { margin: 0; }
.row .value { font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; }
.row .value [data-lang="ar"] { font-size: 21px; }
.row .conf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row .conf .score { font-size: 22px; font-weight: 500; }
.row .conf .word { font-size: 15px; font-weight: 600; }
.bar { position: relative; height: 6px; width: 120px; border-radius: 999px; background: var(--paper-3); overflow: hidden; }
.bar i { position: absolute; inset: 0; width: var(--w, 50%); background: var(--accent-ink); border-radius: 999px; }
[dir="rtl"] .bar i { inset-inline-start: 0; inset-inline-end: auto; }
.row .why { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-2); }
.basis { margin: 12px 0 0; font-size: 13.5px; color: var(--ink-3); }

/* ---------- problem ---------- */
.problem .band { grid-column: 2 / span 11; position: relative; aspect-ratio: 21 / 9; min-height: 320px; max-height: 70vh; border-radius: var(--radius); overflow: hidden; background: var(--paper-3); }
.problem .band img { width: 100%; height: 115%; object-fit: cover; object-position: 50% 40%; }
.problem .band .caption { position: absolute; inset-inline-start: 18px; bottom: 14px; margin: 0; background: rgba(255, 255, 255, .92); border: 1px solid var(--edge); padding: 5px 10px; border-radius: 999px; color: var(--ink-2); }
@media (max-width: 900px) { .problem .band { grid-column: 1 / -1; aspect-ratio: 4 / 3; min-height: 0; max-height: none; } }

/* ---------- the scene ---------- */
.night { background: var(--night); color: var(--paper); }
.scene { position: relative; }
.stage { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; background: var(--night); }
.sky { position: absolute; inset: 0;
  background: linear-gradient(180deg, #0a0f1c 0%, #131d36 36%, #2b2d47 50%, #5c4438 55%, #2a2331 57%, #0e1322 62%, #080b13 100%); }
.sky::after { content: ""; position: absolute; inset: 0; background: radial-gradient(52% 40% at 66% 56%, rgba(255, 176, 106, .18), transparent 72%); }
[dir="rtl"] .sky::after { background: radial-gradient(52% 40% at 34% 56%, rgba(255, 176, 106, .18), transparent 72%); }
.stage .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
[dir="rtl"] .stage .poster { object-position: 38% 50%; }
.stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 700ms ease; }
.stage canvas.is-ready { opacity: 1; }
.stage[data-ready="1"] .poster { visibility: hidden; } /* the still steps aside once the live scene has drawn; it returns if the context is lost */
.scene-body { position: relative; }
.scene-copy { padding-block: clamp(56px, 8vw, 110px); max-width: 720px; }
.stop { padding-block: 14px; }
.stop h2 { font-size: clamp(28px, 3vw, 44px); margin-bottom: 14px; }
.stop p { margin: 0; max-width: 46ch; color: var(--night-muted); font-size: 17px; }
.stop p:lang(ar), .stop p :lang(ar) { max-width: 40ch; }
.stop .gloss { display: block; margin-top: 10px; font-size: 14.5px; color: var(--night-muted); border-inline-start: 2px solid var(--glow); padding-inline-start: 12px; }
.ledger { margin-top: 26px; background: var(--night-2); border: 1px solid var(--night-edge); border-radius: 16px; padding: 16px 18px 12px; }
.ledger h3 { font-size: 14px; font-weight: 600; margin-bottom: 10px; color: var(--paper); }
.ledger table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ledger th, .ledger td { text-align: start; padding: 7px 0; border-bottom: 1px solid var(--night-line); vertical-align: top; }
.ledger th { font-weight: 500; color: var(--night-muted); font-size: 12.5px; }
.ledger td.num, .ledger th.num { text-align: right; font-variant-numeric: tabular-nums; } /* numeric cells keep the physical right edge in both directions (RTL-11, provisional) */
.ledger tr:last-child td { border-bottom: 0; }
.ledger .note { margin: 10px 0 0; font-size: 12.5px; color: var(--night-muted); }
.figures { margin-top: 18px; background: var(--panel); color: var(--ink); border: 1px solid var(--edge); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow-lg); }
.figures .eyebrow { margin-bottom: 8px; color: var(--ink-3); }
.figures .row { grid-template-columns: 120px minmax(0, 1fr); padding: 9px 0; }
.figures .row .value { font-size: 20px; }
.figures .row:last-child { border-bottom: 0; }

/* live mode: overlays on the pinned stage */
.scene.is-live .scene-body { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.scene.is-live .scene-copy { position: absolute; inset-inline-start: var(--gutter); top: calc(var(--header-h) + 28px); bottom: 20px; width: min(40%, 560px); max-width: none; padding: 0; pointer-events: auto; overflow: hidden; }
.scene.is-live .eyebrow { margin-bottom: 12px; }
.scene.is-live .stop { padding-block: 8px; }
.scene.is-live .stop h2 { font-size: clamp(26px, 2.6vw, 38px); margin-bottom: 10px; }
.scene.is-live .stop p { font-size: 16px; }
.scene.is-live .stop .gloss { font-size: 13.5px; margin-top: 8px; }
.scene.is-live .ledger { margin-top: 14px; padding: 10px 16px 8px; }
.scene.is-live .ledger h3 { margin-bottom: 6px; }
.scene.is-live .ledger table { font-size: 14px; }
.scene.is-live .ledger th, .scene.is-live .ledger td { padding: 4px 0; }
.scene.is-live .ledger .note { display: none; }
.scene.is-live .figures { margin-top: 14px; padding: 12px 16px 14px; }
.scene.is-live .figures .rows { display: grid; grid-template-columns: 1.5fr 1fr .9fr; gap: 14px; border-top: 0; }
.scene.is-live .figures .row { grid-template-columns: 1fr; gap: 4px; padding: 0; border-bottom: 0; }
.scene.is-live .figures .row dt { padding-top: 0; }
.scene.is-live .figures .row .value { font-size: 18px; }
.scene.is-live .figures .why { display: none; }
@media (max-height: 820px) and (min-width: 901px) {
  .scene.is-live .stop h2 { font-size: 26px; margin-bottom: 8px; }
  .scene.is-live .stop p { font-size: 15.5px; }
  .scene.is-live .stop .gloss { font-size: 13.5px; margin-top: 8px; }
  .scene.is-live .ledger table { font-size: 13.5px; }
  .scene.is-live .figures .row .value { font-size: 18px; }
}
/* fit levels: the script adds tight-1 to tight-4 only when the pinned copy would not fit the stage, so a short
   viewport shows fewer ledger rows and tighter type instead of clipping a figure */
@media (min-width: 901px) {
  .scene.is-live.tight-1 .ledger tr[data-row]:nth-child(n + 6) { display: none; }
  .scene.is-live.tight-2 .ledger tr[data-row]:nth-child(n + 5) { display: none; }
  .scene.is-live.tight-3 .ledger tr[data-row]:nth-child(n + 4) { display: none; }
  .scene.is-live.tight-2 .scene-copy { top: calc(var(--header-h) + 12px); bottom: 12px; }
  .scene.is-live.tight-2 .scene-copy > .eyebrow { margin-bottom: 6px; }
  .scene.is-live.tight-2 .stop h2 { font-size: 24px; margin-bottom: 8px; }
  .scene.is-live.tight-2 .stop p { font-size: 15px; line-height: 1.5; }
  .scene.is-live.tight-2 .stop .gloss { display: none; }
  .scene.is-live.tight-2 .ledger { margin-top: 10px; padding: 8px 14px 6px; }
  .scene.is-live.tight-2 .ledger table { font-size: 13.5px; }
  .scene.is-live.tight-2 .ledger th, .scene.is-live.tight-2 .ledger td { padding: 3px 0; }
  .scene.is-live.tight-2 .figures { margin-top: 10px; padding: 10px 14px 12px; }
  .scene.is-live.tight-2 .figures .row .value { font-size: 16px; }
  .scene.is-live.tight-3 .scene-copy > .eyebrow { display: none; }
  .scene.is-live.tight-3 .ledger h3 { display: none; }
  .scene.is-live.tight-4 .stop p { display: none; }
}
.scene.is-live .stops { display: grid; }
.scene.is-live .stop { grid-area: 1 / 1; opacity: 0; transform: translateY(24px); will-change: opacity, transform; }
.scene.is-live .ledger, .scene.is-live .figures { opacity: 0; will-change: opacity; }
.scene.is-live .ledger tr[data-row] { opacity: 0; transform: translateX(calc(var(--dir) * -10px)); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.scene.is-live .ledger tr[data-row].is-in { opacity: 1; transform: none; }
.scene.is-live .figures { transition: opacity 600ms var(--ease-out); }
@media (max-width: 900px) {
  .scene.is-live .scene-copy { inset-inline: 0; top: auto; bottom: 0; transform: none; width: auto; padding: 56px 18px 18px;
    background: linear-gradient(to top, rgba(14, 19, 32, .97) 0, rgba(14, 19, 32, .97) calc(100% - 48px), rgba(14, 19, 32, 0) 100%); }
  .scene.is-live .stop h2 { font-size: 24px; margin-bottom: 8px; }
  .scene.is-live .stop p { font-size: 15px; }
  .scene.is-live .stop .gloss { display: none; }
  .scene.is-live .ledger { margin-top: 14px; padding: 12px 14px 8px; }
  .scene.is-live .ledger tr[data-row]:nth-child(n + 5) { display: none; }
  .scene.is-live .ledger .note { display: none; }
  .scene.is-live .figures { margin-top: 12px; padding: 10px 14px 12px; }
  .scene.is-live .figures .rows { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .scene.is-live .figures .row:first-child { grid-column: 1 / -1; }
  .scene.is-live .figures .row .value { font-size: 16px; }
  .scene.is-live .figures .row .conf .score { font-size: 18px; }
  .ledger table { font-size: 14px; }
  /* fit levels on phones: fewer rows, then tighter type, before anything else gives */
  .scene.is-live.tight-1 .ledger tr[data-row]:nth-child(n + 4) { display: none; }
  .scene.is-live.tight-2 .ledger tr[data-row]:nth-child(n + 3) { display: none; }
  .scene.is-live.tight-2 .scene-copy { padding-top: 32px; }
  .scene.is-live.tight-2 .stop h2 { font-size: 21px; margin-bottom: 6px; }
  .scene.is-live.tight-2 .stop p { font-size: 14.5px; line-height: 1.5; }
  .scene.is-live.tight-2 .ledger { margin-top: 10px; padding: 8px 12px 6px; }
  .scene.is-live.tight-2 .ledger th, .scene.is-live.tight-2 .ledger td { padding: 3px 0; }
  .scene.is-live.tight-2 .figures { margin-top: 10px; padding: 8px 12px 10px; }
  .scene.is-live.tight-2 .figures .rows { gap: 6px 10px; }
  .scene.is-live.tight-3 .scene-copy > .eyebrow { display: none; }
  .scene.is-live.tight-3 .ledger h3 { display: none; }
  .scene.is-live.tight-4 .stop p { display: none; }
}
.poster-mode .scene-body, .poster-mode .header, .poster-mode .hero, .poster-mode .section, .poster-mode footer, .poster-mode .stage .poster { visibility: hidden; }

/* ---------- how sure ---------- */
.sure .instrument { grid-column: 7 / span 6; }
.sure .copy { grid-column: 1 / span 5; }
.instrument { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius); padding: 26px 26px 22px; box-shadow: var(--shadow-lg); }
.instrument label { display: block; font-weight: 500; margin-bottom: 8px; }
.instrument output { font-variant-numeric: tabular-nums; font-weight: 600; }
.instrument input[type="range"] { width: 100%; margin: 12px 0 6px; accent-color: var(--accent-ink); height: 44px; cursor: pointer; }
.instrument .ticks { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-3); margin-bottom: 18px; }
.range-viz { position: relative; height: 74px; margin: 6px 0 0; }
.range-viz .track { position: absolute; left: 0; right: 0; top: 26px; height: 6px; border-radius: 999px; background: var(--paper-3); }
.range-viz .band { position: absolute; top: 12px; height: 34px; border-radius: 8px; background: rgba(14, 156, 191, .18); border: 1.5px solid var(--accent-ink); left: 50%; width: 62%; transform: translateX(-50%) scaleX(var(--s, 1)); transform-origin: center; }
.range-viz .band.is-off { border-style: dashed; background: transparent; border-color: var(--line-strong); }
.range-viz .mid { position: absolute; left: 50%; top: 4px; height: 50px; width: 1.5px; background: var(--ink); transform: translateX(-50%); }
.range-viz .lbl { position: absolute; top: 58px; left: 50%; font-size: 12px; color: var(--ink-3); transform: translateX(-50%); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) { .range-viz .band { transition: transform 420ms var(--ease-out), border-color 300ms ease, background-color 300ms ease; } }
.instrument .out { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.instrument .out dt { font-size: 13.5px; color: var(--ink-3); margin-bottom: 4px; }
.instrument .out dd { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.3; }
.instrument .out dd .word { font-size: 15px; font-weight: 600; margin-inline-start: 6px; }
.instrument .note { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-3); }
@media (max-width: 900px) { .sure .instrument, .sure .copy { grid-column: 1 / -1; } .instrument .out { grid-template-columns: 1fr; } }

/* ---------- what you get ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.card { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius); padding: 28px 26px 26px; min-height: 100%; display: flex; flex-direction: column; gap: 14px; }
.card .num { font-family: var(--font-display); font-weight: 400; font-size: 44px; line-height: 1; color: var(--accent-ink); }
.card .num:lang(ar) { font-family: var(--font-ar-display); font-size: 40px; }
.card h3 { font-size: 24px; }
.card p { margin: 0; color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; align-items: center; }
.chips .caption { margin: 0; width: 100%; }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }

/* ---------- trust ---------- */
.trust .text { grid-column: 1 / span 6; }
.trust .visual { grid-column: 8 / span 5; position: relative; }
.trust .frame { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 4; background: var(--paper-3); }
.trust .frame img { width: 100%; height: 115%; object-fit: cover; object-position: 50% 30%; }
.trust .frame .caption { position: absolute; inset-inline-start: 16px; bottom: 14px; margin: 0; background: rgba(255, 255, 255, .92); border: 1px solid var(--edge); padding: 5px 10px; border-radius: 999px; color: var(--ink-2); }
.trust-list { list-style: none; padding: 0; margin: 0 0 34px; display: grid; gap: 22px; }
.trust-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; }
.trust-list .tick { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--accent-ink); }
.trust-list .tick svg { width: 16px; height: 16px; }
.trust-list h3 { font-size: 20px; margin-bottom: 4px; }
.trust-list p { margin: 0; color: var(--ink-2); }
.gloss-box { border: 1px solid var(--edge); border-inline-start: 3px solid var(--accent-ink); border-radius: 14px; padding: 16px 18px; background: var(--panel); }
.gloss-box h3 { font-size: 16px; margin-bottom: 4px; }
.gloss-box p { margin: 0; font-size: 15px; color: var(--ink-2); }
@media (max-width: 900px) { .trust .text, .trust .visual { grid-column: 1 / -1; } .trust .frame { aspect-ratio: 4 / 5; } }

/* ---------- behind ---------- */
.rooms { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.room { display: flex; flex-direction: column; gap: 18px; }
.room .frame { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 2; background: var(--paper-3); }
.room .frame img { width: 100%; height: 115%; object-fit: cover; }
.room h3 { font-size: 26px; }
.room p { margin: 0; color: var(--ink-2); max-width: 52ch; }
.room .link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; width: max-content; color: inherit; }
.room .link:hover { border-color: var(--ink); }
.room .link svg { width: 16px; height: 16px; }
[dir="rtl"] .room .link svg { transform: scaleX(-1); }
@media (max-width: 900px) { .rooms { grid-template-columns: 1fr; } }

/* ---------- faq ---------- */
.faq .list { max-width: 820px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; font-size: 19px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 20px; height: 20px; flex: none; transition: transform 300ms var(--ease-out); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq .answer { padding: 0 0 22px; max-width: 64ch; color: var(--ink-2); }
.faq .answer p { margin: 0; }

/* ---------- final ---------- */
.final { position: relative; min-height: 86vh; min-height: 86svh; display: grid; align-items: center; overflow: hidden; }
.final .media { position: absolute; inset: 0; }
.final .media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.final .scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 19, 32, .94) 0%, rgba(14, 19, 32, .66) 45%, rgba(14, 19, 32, .5) 100%); }
.final .inner { position: relative; z-index: 2; padding-block: clamp(90px, 12vw, 160px); max-width: 900px; }
.final h2 { margin-bottom: 26px; }
.final .lead { color: var(--night-muted); max-width: 48ch; }
.final .actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.final .caption { margin: 26px 0 0; }

/* ---------- footer ---------- */
.footer { padding: 44px 0 34px; border-top: 1px solid var(--line); }
.footer .top { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-bottom: 26px; }
.footer .links { display: flex; flex-wrap: wrap; gap: 20px; margin-inline-start: auto; }
.footer .links a { display: inline-block; padding: 6px 0; font-size: 14.5px; text-decoration: none; color: var(--ink-2); }
.footer .links a:hover { color: var(--ink); }
.footer .fine { font-size: 13.5px; color: var(--ink-3); max-width: 80ch; }
.footer .fine p { margin: 0 0 6px; }

/* ---------- motion foundation ---------- */
html.has-motion [data-motion-text]:not([data-motion-text="hero"]),
html.has-motion [data-reveal],
html.has-motion [data-reveal-item],
html.has-motion [data-image-reveal] { visibility: hidden; }
html.has-motion [data-motion-static] { visibility: visible; }
.motion-word-mask { --mask-pad-top: .14em; --mask-pad-bottom: .22em; --mask-pad-inline: .02em; display: inline-block; overflow: hidden; vertical-align: top;
  padding: var(--mask-pad-top) var(--mask-pad-inline) var(--mask-pad-bottom);
  margin: calc(var(--mask-pad-top) * -1) calc(var(--mask-pad-inline) * -1) calc(var(--mask-pad-bottom) * -1); }
.motion-word-mask:lang(ar) { --mask-pad-top: .42em; --mask-pad-bottom: .5em; --mask-pad-inline: .08em; }
.motion-word { display: inline-block; will-change: transform, opacity; }
@media (prefers-reduced-motion: no-preference) {
  html.js [data-motion-text="hero"] .motion-word { animation: motion-word-rise .95s cubic-bezier(.25, 1, .5, 1) both; animation-delay: calc(var(--word-index) * 55ms + 160ms); }
  html.js [data-motion-text="hero"] .motion-word:lang(ar) { animation-name: motion-word-rise-ar; }
  html.js .hero-fade { animation: hero-fade 1.1s var(--ease-out) both; animation-delay: var(--d, 700ms); }
}
@keyframes motion-word-rise { from { transform: translateY(120%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes motion-word-rise-ar { from { transform: translateY(150%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hero-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
[data-image-reveal] { overflow: hidden; }
[data-parallax-image] { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .btn, .tab, .faq summary svg, .range-viz .band, .stage canvas, .hero-media video { transition: none; }
  .problem .band img, .trust .frame img, .room .frame img { height: 100%; }
}

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  /* on phones the photograph is a band above the copy, so the words sit on solid ground */
  .hero { display: block; min-height: 0; background: var(--paper); }
  .hero-media { position: relative; height: 46vh; height: 46svh; min-height: 300px; margin-top: var(--header-h); }
  .hero-scrim, [dir="rtl"] .hero-scrim { background: linear-gradient(to top, rgba(233, 245, 249, .55) 0%, rgba(233, 245, 249, 0) 32%); }
  .hero-inner { grid-template-columns: 1fr; gap: 28px; padding-top: 28px; }
  .media-bar { top: calc(var(--header-h) + 10px); }
  .hero h1 { font-size: clamp(38px, 10.5vw, 60px); }
  .hero .lead { font-size: 17px; }
  .hero-page .hero-media { height: 34vh; height: 34svh; min-height: 220px; }
  .plate { padding: 18px 16px 16px; }
  .row { grid-template-columns: 96px minmax(0, 1fr); }
  .row .value { font-size: 20px; }
  .section-head { margin-bottom: 36px; }
}
@media (max-width: 480px) {
  .hero-actions .btn { width: 100%; }
  .tabs { gap: 6px; }
  .tab { padding: 0 11px; font-size: 13.5px; }
  .plate .row { grid-template-columns: 1fr; gap: 4px; }
  .plate .row dt { padding-top: 0; }
}

/* ============================================================================
   Product components. The platform screens, sign-in and sign-up, and the
   specification pages are built from the parts above: the plate becomes the
   panel, the plate's rows become the record rows, the same buttons, chips,
   tabs and type. Product motion is short and calm (70 to 240 ms), and a figure
   never animates its digits.
   ========================================================================= */

/* productive type: fixed sizes inside panels, never fluid */
.t-h1 { font-size: 30px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; }
.t-h2 { font-size: 22px; font-weight: 500; line-height: 1.3; }
.t-h3 { font-size: 17px; font-weight: 600; line-height: 1.35; }
.t-body { font-size: 17px; line-height: 1.6; }
.t-dense { font-size: 15px; line-height: 1.5; }
.t-label { font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--ink-3); }
.t-label:lang(ar), .t-label :lang(ar) { font-size: 14.5px; }
.t-caption { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.t-caption:lang(ar), .t-caption :lang(ar) { font-size: 14.5px; }
.t-num-l { font-size: 34px; font-weight: 500; line-height: 1.1; letter-spacing: -.015em; }
.t-num-m { font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; }
.t-num-s { font-size: 17px; font-weight: 500; line-height: 1.3; }
.dim { color: var(--ink-3); }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.contain { container-type: inline-size; }

/* flexible grids for the product pages: columns collapse on available width */
.cols { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.cols-split { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.stack > * + * { margin-top: var(--flow, 16px); }
.stack-s > * + * { --flow: 8px; }
.stack-l > * + * { --flow: 32px; }
.row-flex { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.spread { display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline; justify-content: space-between; }

/* THE PANEL RULE: a white surface with an edge that clears 3:1 against its own
   fill and against the ground behind it. The shadow is depth, never the edge. */
.box { background: var(--panel); color: var(--ink); border: 1px solid var(--edge); border-radius: var(--radius); padding: 26px 26px 22px; box-shadow: var(--shadow-lg); }
.box-flat { box-shadow: none; }
.box-flush { padding: 0; overflow: hidden; }
.box-quiet { background: var(--paper-2); box-shadow: none; }
.box-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.box-head h2, .box-head h3 { font-size: 17px; font-weight: 600; }
.box-foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.well { background: var(--paper-2); color: var(--ink); border: 1px solid var(--edge); border-radius: 14px; padding: 16px; }
.night .box { background: var(--night-2); border-color: var(--night-edge); color: var(--paper); box-shadow: none; }
.night .well { background: var(--night); border-color: var(--night-edge); }

.tag { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--paper); font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.tag:lang(ar), .tag :lang(ar) { font-size: 13.5px; }
/* Every example figure on every surface is marked as one. */
.example-mark { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: 999px; border: 1px dashed var(--edge); background: transparent; font-size: 12.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.example-mark:lang(ar), .example-mark :lang(ar) { font-size: 13.5px; }
.night .example-mark { border-color: var(--night-edge); color: var(--night-muted); }

/* the confidence axis: a number and a word on a fixed 0 to 100 axis, cut points printed */
.conf { display: grid; gap: 8px; }
.conf-read { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.conf-score { font-size: 34px; font-weight: 500; line-height: 1; letter-spacing: -.015em; }
.conf-word { font-size: 16px; font-weight: 600; }
.conf-of { font-size: 13.5px; color: var(--ink-3); }
.conf-axis { position: relative; height: 34px; margin-top: 4px; }
.conf-track { position: absolute; top: 11px; inset-inline: 0; height: 8px; background: var(--paper-3); border: 1px solid var(--edge); border-radius: 999px; }
.conf-cut { position: absolute; top: 6px; width: 1px; height: 18px; background: var(--edge); inset-inline-start: var(--at); }
[dir="rtl"] .conf-cut { inset-inline-start: auto; inset-inline-end: var(--at); }
.conf-stop { position: absolute; top: 4px; width: 4px; height: 22px; border-radius: 2px; background: var(--accent-ink); inset-inline-start: var(--at); margin-inline-start: -2px; transition: inset-inline-start 240ms cubic-bezier(.2, 0, .38, .9); }
[dir="rtl"] .conf-stop { inset-inline-start: auto; inset-inline-end: var(--at); margin-inline: 0 -2px; }
.conf-scale { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-3); }
.conf-bands { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); }
.conf-bands b { font-weight: 600; color: var(--ink-2); }
.conf-bands:lang(ar), .conf-bands :lang(ar) { font-size: 13.5px; }

/* the range plot: a valuation is a range with a middle; recorded sales are marks on the same axis in another encoding */
.range { display: grid; gap: 8px; }
.range-plot { position: relative; height: 72px; }
.range-axis { position: absolute; bottom: 22px; inset-inline: 0; height: 1px; background: var(--edge); }
.range-band { position: absolute; bottom: 12px; height: 22px; inset-inline-start: var(--from); width: var(--span); background: repeating-linear-gradient(135deg, rgba(14, 156, 191, .22) 0 6px, rgba(14, 156, 191, .08) 6px 12px); border: 1px solid var(--accent-ink); border-radius: 6px; transition: inset-inline-start 240ms cubic-bezier(.2, 0, .38, .9), width 240ms cubic-bezier(.2, 0, .38, .9); }
[dir="rtl"] .range-band { inset-inline-start: auto; inset-inline-end: var(--from); }
.range-point { position: absolute; bottom: 6px; inset-inline-start: var(--at); width: 2px; height: 34px; background: var(--ink); margin-inline-start: -1px; transition: inset-inline-start 240ms cubic-bezier(.2, 0, .38, .9); }
[dir="rtl"] .range-point { inset-inline-start: auto; inset-inline-end: var(--at); margin-inline: 0 -1px; }
.range-sale { position: absolute; bottom: 46px; inset-inline-start: var(--at); width: 9px; height: 9px; margin-inline-start: -4.5px; border-radius: 50%; background: var(--panel); border: 1.5px solid var(--ink-2); }
[dir="rtl"] .range-sale { inset-inline-start: auto; inset-inline-end: var(--at); margin-inline: 0 -4.5px; }
.range-ticks { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-3); }
.range-key { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-2); }
.range-key span { display: inline-flex; align-items: center; gap: 6px; }
.range-key i { width: 16px; height: 10px; flex: none; }
.range-key .k-band { background: repeating-linear-gradient(135deg, rgba(14, 156, 191, .22) 0 5px, rgba(14, 156, 191, .08) 5px 10px); border: 1px solid var(--accent-ink); border-radius: 2px; }
.range-key .k-point { width: 2px; height: 14px; background: var(--ink); }
.range-key .k-sale { width: 9px; height: 9px; border-radius: 50%; background: var(--panel); border: 1.5px solid var(--ink-2); }

/* definition rows: the plate's rows, reused everywhere a label sits beside a value */
.defs { display: grid; border-top: 1px solid var(--line); margin: 0; }
.defs > div { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: start; }
.defs dt { font-size: 13.5px; color: var(--ink-3); padding-top: 4px; }
.defs dt:lang(ar), .defs dt :lang(ar) { font-size: 14.5px; }
.defs dd { margin: 0; }
@container (max-width: 380px) { .defs > div { grid-template-columns: 1fr; gap: 4px; } }

/* tables: a data table stays a table, scrolls inside its own focusable frame, never the page */
.table-scroll { overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--edge); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-lg); }
.table-scroll:focus-visible { outline-offset: -2px; }
.table-flow { overflow-x: auto; overscroll-behavior-x: contain; }
.table-flow:focus-visible { outline-offset: 2px; }
table.data { width: 100%; border-collapse: collapse; font-size: 15px; }
table.data caption { text-align: start; padding: 16px 18px 8px; font-size: 13.5px; color: var(--ink-3); }
table.data th, table.data td { text-align: start; padding: 12px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data thead th { position: sticky; top: 0; z-index: 1; background: var(--paper); font-size: 13px; font-weight: 600; color: var(--ink-2); border-bottom: 1px solid var(--edge); white-space: nowrap; }
table.data thead th:lang(ar), table.data thead th :lang(ar) { font-size: 14px; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--paper); }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
[dir="rtl"] table.data .num { text-align: right; }
table.data .sort { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-align: start; min-height: 40px; padding-block: 10px; margin-block: -10px; }
table.data .sort svg { width: 12px; height: 12px; opacity: .5; }
table.data .sort[aria-sort="ascending"] svg, table.data .sort[aria-sort="descending"] svg { opacity: 1; }
table.data .sort[aria-sort="descending"] svg { transform: rotate(180deg); }
.night .table-scroll { background: var(--night-2); border-color: var(--night-edge); box-shadow: none; }
.night table.data thead th { background: var(--night-3); color: var(--paper); border-bottom-color: var(--night-edge); }
.night table.data th, .night table.data td { border-bottom-color: var(--night-line); }
.night table.data tbody tr:hover { background: var(--night-3); }
/* stacked records: the phone form of a text-led table */
.records { display: grid; gap: 12px; }
.record { background: var(--panel); border: 1px solid var(--edge); border-radius: 16px; padding: 18px; box-shadow: var(--shadow-lg); }
.record-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.record-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 12px; }
td .link, .record-top .link { display: inline-block; min-height: 26px; padding-block: 3px; }
.empty { display: grid; gap: 12px; justify-items: start; padding: 48px 26px; border: 1px solid var(--edge); border-radius: var(--radius); background: var(--panel); }

/* forms */
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field > label { font-size: 15px; font-weight: 500; }
.field > label:lang(ar), .field > label :lang(ar) { font-size: 16px; }
.field .hint { font-size: 13.5px; color: var(--ink-3); margin: 0; }
.field .hint:lang(ar), .field .hint :lang(ar) { font-size: 14.5px; }
.input, .select, textarea.input { width: 100%; min-height: 48px; padding: 11px 14px; background: var(--panel); color: var(--ink); border: 1px solid var(--edge); border-radius: 12px; transition: border-color 200ms ease, box-shadow 200ms ease; }
textarea.input { min-height: 120px; resize: vertical; line-height: 1.6; }
.input:hover, .select:hover { border-color: var(--ink-3); }
.input:focus-visible, .select:focus-visible { border-color: var(--accent-ink); outline-offset: 1px; }
.input::placeholder { color: var(--ink-3); opacity: 1; }
.input[inputmode="numeric"], .input[inputmode="decimal"], .input.fig { font-variant-numeric: tabular-nums; }
.field[data-invalid="true"] .input, .field[data-invalid="true"] .select { border-color: var(--error); border-width: 2px; }
.field-error { display: none; align-items: flex-start; gap: 6px; font-size: 14px; font-weight: 500; color: var(--error); margin: 0; }
.field-error:lang(ar), .field-error :lang(ar) { font-size: 15px; }
.field[data-invalid="true"] .field-error, .checkbox[data-invalid="true"] .field-error { display: flex; }
.field-error svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.phone-field { display: flex; gap: 8px; }
.phone-field .select { width: auto; min-width: 116px; flex: none; }
.phone-field .input { flex: 1 1 auto; min-width: 0; }
.otp { width: 100%; max-width: 280px; min-height: 60px; text-align: center; font-size: 26px; font-weight: 500; letter-spacing: .38em; text-indent: .38em; font-variant-numeric: tabular-nums; direction: ltr; }
.checkbox, .radio { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; padding-block: 8px; }
.checkbox input, .radio input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--accent-ink); }
.checkbox > div, .radio > div { min-width: 0; }
.error-summary { border: 2px solid var(--error); border-radius: 16px; background: var(--error-bg); padding: 16px 22px; margin-bottom: 24px; }
.error-summary h2 { font-size: 17px; color: var(--error); margin-bottom: 8px; }
.error-summary ul { margin: 0; padding-inline-start: 1.2em; }
.error-summary a { color: var(--error); font-weight: 500; }
.error-summary[hidden] { display: none; }
/* a state the person cannot fix is explained, never styled as their error */
.notice { display: grid; gap: 8px; padding: 16px 22px; border: 1px solid var(--edge); border-inline-start-width: 4px; border-radius: 14px; background: var(--panel); }
.notice-info { border-inline-start-color: var(--accent-ink); }
.notice-caution { border-inline-start-color: var(--sell); }
.notice-none { border-inline-start-color: var(--none); }
.notice h3 { font-size: 16px; font-weight: 600; }
.notice p { margin: 0; }
/* steps */
.steps { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 24px; padding: 0; list-style: none; }
.step { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-3); }
.step b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 13px; font-weight: 600; }
.step[aria-current="step"] { color: var(--ink); font-weight: 600; }
.step[aria-current="step"] b { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.step[data-done="true"] b { background: var(--buy-bg); color: var(--buy); border-color: var(--buy); }
.steps .sep { width: 18px; height: 1px; background: var(--line-strong); }
/* a switch is a checkbox that looks like one */
.switch { position: relative; width: 52px; height: 30px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--paper-3); border: 1px solid var(--edge); transition: background-color 200ms ease; pointer-events: none; }
.switch i::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--panel); border: 1px solid var(--edge); transition: inset-inline-start 200ms ease; }
.switch input:checked + i { background: var(--accent-ink); border-color: var(--accent-ink); }
.switch input:checked + i::after { inset-inline-start: 25px; }
.switch input:focus-visible + i { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.switch input:disabled + i { opacity: .6; }

/* stats and deltas */
.stat { display: grid; gap: 4px; }
.stat-label { font-size: 13.5px; color: var(--ink-3); }
.stat-label:lang(ar), .stat-label :lang(ar) { font-size: 14.5px; }
.stat-value { font-size: 26px; font-weight: 500; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.stat-note { font-size: 13.5px; color: var(--ink-2); }
/* a delta carries its sign and an arrow whose meaning holds in Arabic: the arrow never mirrors */
.delta { display: inline-flex; align-items: center; gap: 5px; font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.delta svg { width: 12px; height: 12px; transform: none !important; }
.delta-up { color: var(--buy); }
.delta-down { color: var(--sell); }
.delta-flat { color: var(--ink-3); }

/* the signed-in shell: a sidebar on wide screens, a bar and a tab bar on phones */
.app { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; min-height: 100svh; }
.side { background: var(--panel); border-inline-end: 1px solid var(--edge); padding: 24px 16px; display: grid; align-content: start; gap: 4px; position: sticky; top: 0; height: 100vh; height: 100svh; overflow-y: auto; }
.side .brand { margin-bottom: 24px; padding-inline: 12px; }
.side a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding-inline: 12px; border-radius: 12px; text-decoration: none; font-size: 15px; color: var(--ink-2); }
.side a:hover { background: var(--paper); color: var(--ink); }
.side a[aria-current="page"] { background: var(--ink); color: var(--panel); font-weight: 500; }
.side svg { width: 19px; height: 19px; flex: none; }
.side-foot { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.app-main { min-width: 0; }
.app-bar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 16px; min-height: 68px; padding: 0 32px; background: rgba(233, 245, 249, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.app-bar h1 { font-size: 19px; font-weight: 600; }
.app-bar .spacer { margin-inline-start: auto; }
.app-body { padding: 32px; display: grid; gap: 24px; align-content: start; }
/* And inside ONE screen, not only between them. The shell's own gap separates
   the page wrappers from each other, and only one of those is ever on screen,
   so every block within a screen sat flush against the next: the figure tiles,
   the notice and the two lower boxes ran together on Home, and the table ran
   into the summary on Portfolio. The wrapper carries the shell's own rhythm so
   there is one rhythm and not two.
   `:not([hidden])` rather than a bare `[data-page]`, because a display value on
   an attribute selector would otherwise fight the hidden attribute at equal
   weight and the three screens would all be on screen at once, deciding it by
   whichever stylesheet was read last. */
.app-body > [data-page]:not([hidden]) { display: grid; gap: 24px; align-content: start; }
.tabbar { display: none; }
.bar-brand { display: none; }
.app-bar .lang-btn { display: none; }
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .bar-brand { display: inline-flex; font-size: 19px; }
  .app-bar .lang-btn { display: inline-flex; }
  .app-bar { padding-inline: 16px; gap: 12px; }
  .app-bar h1 { font-size: 17px; }
  .app-body { padding: 16px 16px calc(96px + env(safe-area-inset-bottom, 0px)); gap: 16px; }
  .app-body > [data-page]:not([hidden]) { gap: 16px; }
  .tabbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 70; display: flex; background: var(--panel); border-top: 1px solid var(--edge); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .tabbar a { flex: 1; display: grid; justify-items: center; gap: 3px; min-height: 60px; padding-block: 10px; text-decoration: none; font-size: 12px; color: var(--ink-3); }
  .tabbar a:lang(ar), .tabbar a :lang(ar) { font-size: 13px; }
  .tabbar a[aria-current="page"] { color: var(--accent-ink); font-weight: 600; }
  .tabbar svg { width: 22px; height: 22px; }
}

/* dialog and toasts */
dialog.sheet { border: 1px solid var(--edge); border-radius: var(--radius); padding: 0; background: var(--panel); color: var(--ink); width: min(560px, calc(100vw - 32px)); box-shadow: var(--shadow-lg); }
dialog.sheet::backdrop { background: rgba(10, 26, 43, .5); }
dialog.sheet .sheet-body { padding: 32px; }
dialog.sheet .sheet-foot { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; padding: 16px 32px 32px; }
.toast-rail { position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 120; display: grid; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.toast { display: flex; gap: 12px; align-items: flex-start; background: var(--panel); border: 1px solid var(--edge); border-radius: 14px; padding: 12px 16px; box-shadow: var(--shadow-lg); font-size: 14.5px; }
.toast .icon-btn { width: 32px; height: 32px; margin-inline-start: auto; }

/* the consent bar */
.consent-bar { position: fixed; inset-inline: 16px; bottom: 16px; z-index: 130; max-width: 640px; margin-inline: auto; background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 24px; }
.consent-bar[hidden] { display: none; }

/* product-screen motion: a screen arrives with a short fade, nothing else moves */
@media (prefers-reduced-motion: no-preference) {
  [data-page].is-arriving { animation: page-arrive 180ms cubic-bezier(0, 0, .38, .9) both; }
}
@keyframes page-arrive { from { opacity: 0; } to { opacity: 1; } }
.figure-swap { transition: opacity 240ms cubic-bezier(.2, 0, .38, .9); }
.figure-swap.is-swapping { opacity: .35; }

/* 200 percent zoom and the reader's own spacing must not clip anything: nothing sets a fixed height on text */
@media (max-width: 420px) {
  .t-num-l, .conf-score { font-size: 30px; }
  .stat-value { font-size: 23px; }
}

/* The public page: the language switch is a link to the other language's
   address, set exactly like the button it replaces. */
a.lang-btn { display: inline-flex; align-items: center; text-decoration: none; color: inherit; line-height: normal; }

/* The public page: the closing section keeps the height its cut invitation and
   buttons took, as bottom space, so its words sit where the approved page set
   them, over the same part of the photograph. */
html[lang="en"] .final .inner { padding-bottom: calc(clamp(90px, 12vw, 160px) + 151.88px); }
html[lang="ar"] .final .inner { padding-bottom: calc(clamp(90px, 12vw, 160px) + 161.38px); }
@media (max-width: 567.98px) { html[lang="en"] .final .inner { padding-bottom: calc(clamp(90px, 12vw, 160px) + 181.31px); } }
@media (max-width: 375.98px) { html[lang="en"] .final .inner { padding-bottom: calc(clamp(90px, 12vw, 160px) + 272.75px); }
  html[lang="ar"] .final .inner { padding-bottom: calc(clamp(90px, 12vw, 160px) + 195.56px); } }
@media (max-width: 321.98px) { html[lang="ar"] .final .inner { padding-bottom: calc(clamp(90px, 12vw, 160px) + 257.56px); } }
/* The closing eyebrow sits over the photograph. In the approved colour it
   measures 4.3 to 4.5:1 behind the Arabic glyphs at 1600 and 1920 wide; one
   step lighter in the same blue-grey it clears 4.5:1 at every size measured. */
.final .eyebrow { color: #CCD8E2; }
/* The video button's icon follows its own state attribute; the button no
   longer carries aria-pressed, since its name already changes. */
.media-pause[data-paused="true"] .icon-pause { display: none; }
.media-pause[data-paused="true"] .icon-play { display: block; }