/* ═══════════════════════════════════════════════════════════════════════════════════════════
   معاون — landing page stylesheet
   The two figures of the mark are the story: blue is the customer, teal is معاون. White paper,
   navy Cairo, the gradient only where the two meet. Logical properties only; the few physical
   values (stage overlays, transform-origin, the cursor) carry a comment saying why.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────────────────────────────────── */
:root {
  --white: #FFFFFF;
  --paper: #F5F8FD;
  --line: #DCE6F5;
  --line-strong: rgba(2, 11, 20, .22);
  --blue: #005CFF;
  --teal: #00D2B4;
  --teal-ink: #087566;
  --teal-deep: #064E44;
  --navy: #020B14;
  --ink: #0B1F33;
  --muted: #4A5A6E;
  --tint-blue: #E9F1FF;
  --tint-teal: #E3FBF6;
  --amber: #B45309;
  --amber-bg: #FFF7E6;
  --amber-line: #F2C94C;
  --gradient: linear-gradient(135deg, #005CFF 0%, #00D2B4 100%);
  --gradient-ink: linear-gradient(135deg, #005CFF 0%, #06796A 100%);
  --glow-blue: rgba(0, 92, 255, .14);
  --glow-teal: rgba(0, 210, 180, .12);

  --font: 'Cairo', 'Tahoma', 'Arial', sans-serif;
  --fs-display: clamp(2.75rem, 7vw, 6.5rem);
  --fs-h1: clamp(2.25rem, 4.5vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 3.4vw, 2.75rem);
  --fs-h3: clamp(1.375rem, 2.4vw, 2rem);
  --fs-lead: clamp(1.25rem, 1.6vw, 1.5rem);
  --fs-eyebrow: clamp(.875rem, 1vw, 1rem);
  --fs-body: clamp(1.0625rem, 1.15vw, 1.25rem);
  --fs-small: .875rem;
  --lh-heading: 1.35;
  --lh-body: 1.9;
  --measure: 62ch;
  --container: 1200px;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --s8: 64px; --s9: 96px; --s10: 128px;
  --gutter: 16px;
  --section-pad: clamp(4rem, 12vh, 8rem);
  --topbar: 72px;
  --r-sm: 8px; --r-md: 16px; --r-card: 20px; --r-device: 24px; --r-pill: 999px;
  --shadow-card: 0 12px 40px rgba(2, 11, 20, .06);
  --shadow-device: 0 24px 60px rgba(2, 11, 20, .10);
  --focus: 3px solid var(--blue);

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --d-fast: .2s; --d-base: .35s; --d-slow: .7s;
}
@media (min-width: 768px) { :root { --gutter: 24px; } }
@media (min-width: 1200px) { :root { --gutter: 48px; } }

/* ── Reset & base ───────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-block-start: calc(var(--topbar) + 16px); }
html:not(.lenis):has(body[data-motion="lite"]) { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body);
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased;
  overflow-x: clip; min-block-size: 100svh;
}
img, svg, video, canvas { display: block; max-inline-size: 100%; }
img { block-size: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, fieldset, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-inline-size: 0; }
legend { padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
strong { font-weight: 700; }
svg use { pointer-events: none; }
:focus-visible { outline: var(--focus); outline-offset: 3px; border-radius: var(--r-sm); }

.sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link {
  position: fixed; inset-block-start: 8px; inset-inline-start: 8px; z-index: 100;
  padding: .6em 1.2em; border-radius: var(--r-pill); background: var(--navy); color: #fff;
  font-weight: 700; transform: translateY(-200%); transition: transform var(--d-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }
/* Latin words and numbers sit inside Arabic sentences without flipping. The text-align only
   matters on the Arabic page: an LTR box that gets blockified there must still hug the page's
   inline start. On the English page the box and the page already agree. */
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; font-variant-numeric: tabular-nums; }
[dir="rtl"] .ltr { text-align: end; }

/* ── The second language ────────────────────────────────────────────────────────────────
   The page is Arabic; English is a translation applied before the first paint (i18n.js). These
   are the only rules that care which one is showing: everything else is written with logical
   properties, and the stage overlays stay physical because they are pinned to the two figures,
   not to the reading direction. */
.is-translating body { visibility: hidden; }
[dir="ltr"] [data-ink] { background-position: 0% 100%; }
[dir="ltr"] .chart__bars i { transform-origin: 0 50%; }
.topbar__actions { display: flex; align-items: center; gap: var(--s3); }
.lang-toggle {
  display: inline-flex; align-items: center; min-block-size: 44px; padding: .5em 1em;
  border-radius: var(--r-pill); border: 1px solid transparent;
  font-size: .9375rem; font-weight: 700; color: var(--muted);
  transition: color var(--d-fast), border-color var(--d-fast), background-color var(--d-fast);
}
.lang-toggle:hover { color: var(--navy); border-color: var(--line); background: rgba(2, 11, 20, .04); }
.nobr { white-space: nowrap; }

/* ── Layout ─────────────────────────────────────────────────────────────────────────────── */
.container { inline-size: 100%; max-inline-size: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: var(--section-pad); }
.section--paper { background: var(--paper); }

/* ── Type ───────────────────────────────────────────────────────────────────────────────── */
.display { font-size: var(--fs-display); font-weight: 900; line-height: 1.2; color: var(--navy); }
.h2 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.3; color: var(--navy); max-inline-size: 22ch; }
.h3 { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-heading); color: var(--navy); }
.lead { font-size: var(--fs-lead); line-height: 1.8; color: var(--ink); max-inline-size: 40ch; }
.lead--support { font-weight: 600; color: var(--muted); max-inline-size: var(--measure); }
.body { font-size: var(--fs-body); line-height: var(--lh-body); max-inline-size: var(--measure); color: var(--ink); }
.body--strong { font-weight: 700; color: var(--navy); }
.body--small { font-size: 1rem; color: var(--muted); }
.thesis { font-size: var(--fs-body); font-weight: 700; color: var(--navy); }
.thesis--h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); }
.eyebrow { font-size: var(--fs-eyebrow); font-weight: 600; line-height: 1.6; margin-block-end: var(--s3); }
.eyebrow--teal { color: var(--teal-ink); }
.eyebrow--blue { color: var(--blue); }
.section .h2 { margin-block-end: var(--s5); }
.section .body + .body { margin-block-start: var(--s4); }
.section .body { margin-block-end: var(--s4); }
.section .h3 { margin-block: var(--s6) var(--s4); }
.thesis--h3 { margin-block-start: var(--s6); }

/* INK — a wash that flows from the inline start, driven by --ink 0..100 */
[data-ink] {
  --ink: 100;
  background-image: linear-gradient(135deg, rgba(0, 92, 255, .18), rgba(0, 210, 180, .18));
  background-repeat: no-repeat; background-size: calc(var(--ink) * 1%) 100%;
  background-position: 100% 100%; /* physical: 100% is the inline start of an RTL line */
  padding-inline: .15em; margin-inline: -.15em; border-radius: var(--r-sm);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* CURTAIN word spans (added by main.js) */
.w { display: inline-block; overflow: hidden; padding-block: .18em; margin-block: -.18em; vertical-align: bottom; }
.w__in { display: inline-block; }

/* ── Chips, buttons ─────────────────────────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  display: inline-flex; align-items: center; gap: .45em; padding: .35em .9em; border-radius: var(--r-pill);
  background: var(--paper); border: 1px solid var(--line); font-size: var(--fs-small); font-weight: 600; color: var(--ink); line-height: 1.6;
}
.section--paper .chip { background: #fff; }
.chips--strong { gap: var(--s3); margin-block: var(--s5) var(--s6); }
.chips--strong .chip { font-size: 1rem; font-weight: 700; padding: .5em 1.1em; }
.chip--teal { background: var(--tint-teal); border-color: var(--teal); color: var(--teal-deep); }
.chip--outline-teal { background: #fff; border: 1.5px solid var(--teal); color: var(--teal-deep); font-weight: 700; }
.chip--mic .mic-glyph { display: inline-grid; place-items: center; inline-size: 24px; block-size: 24px; border-radius: 50%; background: var(--gradient); color: #fff; }
.chip--mic .mic-glyph svg { stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .85em 1.7em; border-radius: var(--r-pill); font-size: 1rem; font-weight: 700; line-height: 1.4; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: box-shadow var(--d-base) var(--ease-out), background-color var(--d-base), border-color var(--d-base), color var(--d-base);
}
.btn__icon { inline-size: 1.1em; block-size: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn--primary { background: var(--gradient-ink); color: #fff; box-shadow: 0 10px 28px rgba(0, 92, 255, .22); }
.btn--primary:hover { box-shadow: 0 14px 36px rgba(0, 92, 255, .32); }
.btn--primary:focus-visible { outline-color: var(--navy); box-shadow: 0 0 0 3px #fff, 0 10px 28px rgba(0, 92, 255, .22); }
.btn--outline { background: #fff; border-color: var(--line-strong); color: var(--ink); }
.btn--outline:hover { border-color: var(--navy); }
.btn--small { padding: .6em 1.2em; font-size: .9375rem; min-block-size: 44px; }
.btn--lg { padding: 1em 2.2em; font-size: 1.125rem; }

[data-pulse] { position: relative; }
[data-pulse]::after { content: ''; position: absolute; inset: -4px; border-radius: inherit; border: 1.5px solid var(--teal); opacity: 0; pointer-events: none; }
[data-pulse].is-live::after { animation: pulse 2.4s ease-out infinite; }
.btn[data-pulse]::after { border-radius: var(--r-pill); }
@keyframes pulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.35); opacity: 0; } }

/* ── Top bar ────────────────────────────────────────────────────────────────────────────── */
.topbar {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 50; block-size: var(--topbar);
  background: transparent; border-block-end: 1px solid transparent; transition: border-color var(--d-base), background-color var(--d-base);
}
.topbar.is-scrolled { border-color: var(--line); background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.topbar__in { display: flex; align-items: center; justify-content: space-between; block-size: 100%; }
.topbar__brand { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; opacity: 0; transition: opacity var(--d-base) var(--ease-out); }
.topbar.is-branded .topbar__brand, .topbar__brand:focus-visible, body[data-motion="none"] .topbar__brand { opacity: 1; }
section[tabindex="-1"]:focus, main:focus { outline: none; }
.topbar__mark { block-size: 36px; inline-size: auto; }
.topbar__word { block-size: 22px; inline-size: auto; }

/* ═══ The figures ═══════════════════════════════════════════════════════════════════════════
   One vocabulary on every stage. Colours per figure; the arm is the brighter band that meets the
   other figure's arm to close the M. */
.stage-box { position: relative; container-type: inline-size; }
.stage { inline-size: 100%; block-size: auto; overflow: visible; }
.fig { color: var(--blue); }
.fig--teal { color: var(--teal); }
.fig__leg, .fig__arm { fill: none; stroke-width: 60; stroke-linecap: round; }
.fig--blue .fig__leg { stroke: url(#gBlue); }
.fig--blue .fig__arm { stroke: url(#gBlueArm); }
.fig--blue .fig__head { fill: #0A3BD6; }
.fig--teal .fig__leg { stroke: url(#gTeal); }
.fig--teal .fig__arm { stroke: url(#gTealArm); }
.fig--teal .fig__head { fill: #00B7A2; }
.fig__shadow { fill: rgba(2, 11, 20, .08); }
.fig__rings circle { fill: none; stroke: currentColor; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.fig__glow { fill: var(--teal); opacity: 0; filter: blur(16px); }
.fig-mini .fig__leg { stroke-width: 44; }
.fig-mini .fig__glow { opacity: .35; filter: blur(12px); }

/* the hero breathes on its own: the customer speaks, معاون listens */
.hero .fig--blue .fig__rings circle { animation: ring 2.6s ease-out infinite; animation-delay: calc(var(--k) * .45s); }
.hero .fig--teal .fig__glow { animation: breathe 3s ease-in-out infinite; }
@keyframes ring { 0% { transform: scale(.55); opacity: .6; } 100% { transform: scale(1.2); opacity: 0; } }
@keyframes breathe { 0%, 100% { opacity: .18; } 50% { opacity: .5; } }

/* Overlays on a stage are positioned physically: the stage is a picture, not prose. The figures
   occupy x 17–29% (blue) and 71–83% (teal) below y 22%; overlays live in the top band and the
   middle lane between them. The selectors carry .stage-box so they outrank .bubble's own sizing. */
.stage-box .ov { position: absolute; margin: 0; }
.stage-box .ov--q { left: 2%; top: 0; max-inline-size: 44%; }
.stage-box .ov--a { right: 2%; top: 0; max-inline-size: 38%; }
.stage-box .ov--int { left: 31%; top: 34%; max-inline-size: 30%; }
.stage-box .ov--stop { left: 33%; top: 64%; }
.stage-box .ov--p1 { left: 29%; top: 3%; max-inline-size: 44%; }
.stage-box .ov--p2 { left: 31%; top: 21%; max-inline-size: 44%; }
.stage-box .ov--p3 { left: 33%; top: 39%; max-inline-size: 44%; }
.stage-box .ov--intent { right: 4%; top: 3%; display: flex; flex-direction: column; align-items: flex-start; }
.stage-box .ov--shelf { left: 30%; top: 22%; inline-size: 40%; }
.stage-box .ov--note { left: 30%; top: 82%; max-inline-size: 40%; }
/* overlay type scales with the stage: 16px on a 620px stage, never under 12px */
.stage-box .bubble--sm { font-size: clamp(.75rem, 2.6cqi, 1rem); padding: .6em .9em; line-height: 1.6; }
.stage-box .bubble--xs { font-size: clamp(.6875rem, 2.3cqi, .875rem); padding: .5em .8em; line-height: 1.5; }
.stage-box .chip { font-size: clamp(.6875rem, 2.2cqi, .875rem); }
.understood { display: flex; align-items: center; gap: .4em; color: var(--navy); font-size: clamp(.6875rem, 2.2cqi, .875rem); font-weight: 700; margin-block-end: 4px; }
.frame__thread .bubble--xs { font-size: .8125rem; padding: .5em .8em; line-height: 1.5; }
.stage-box .note { font-size: clamp(.6875rem, 2.4cqi, .9375rem); font-weight: 600; color: var(--navy); background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: .5em .9em; display: flex; gap: .4em; align-items: center; box-shadow: var(--shadow-card); }
.shelf { display: flex; flex-direction: column; gap: 6px; }
.doc {
  display: flex; align-items: center; gap: .4em; padding: .3em .7em; white-space: nowrap; border-radius: var(--r-sm);
  background: #fff; border: 1px solid var(--line); font-size: clamp(.625rem, 2.1cqi, .8125rem); font-weight: 600; color: var(--ink); box-shadow: var(--shadow-card);
}
.doc svg { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.doc.is-lit { background: var(--tint-teal); border-color: var(--teal); color: var(--teal-deep); }
.doc.is-lit svg { stroke: var(--teal-ink); }

/* ── Hero ───────────────────────────────────────────────────────────────────────────────── */
.hero { position: relative; padding-block: calc(var(--topbar) + var(--s8)) var(--s9); min-block-size: 100svh; overflow: hidden; background: var(--white); }
.hero__glow { position: absolute; border-radius: 50%; pointer-events: none; }
.hero__glow--blue { inline-size: 60vw; block-size: 60vw; max-inline-size: 900px; max-block-size: 900px; inset-block-start: -20vw; inset-inline-start: -15vw; background: radial-gradient(circle, var(--glow-blue), transparent 68%); }
.hero__glow--teal { inline-size: 55vw; block-size: 55vw; max-inline-size: 820px; max-block-size: 820px; inset-block-end: -18vw; inset-inline-end: -12vw; background: radial-gradient(circle, var(--glow-teal), transparent 68%); }
.hero__in {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--s8);
  align-items: center; min-block-size: calc(100svh - var(--topbar) - var(--s8) - var(--s9));
}
.hero__lockup { inline-size: clamp(150px, 16vw, 210px); margin-block-end: var(--s5); }
.hero .display { margin-block-end: var(--s4); }
.hero .lead { margin-block-end: var(--s4); }
.hero .thesis { font-size: var(--fs-lead); margin-block-end: var(--s6); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s3); margin-block-end: var(--s6); }
.hero__stage { align-self: center; }

/* ── The story (يسمع → يفهم → يعرف → يجيب) ──────────────────────────────────────────────── */
.story { position: relative; background: var(--white); }
.story__pin { min-block-size: 100svh; display: grid; align-items: center; padding-block: calc(var(--topbar) + var(--s4)) var(--s6); }
.story__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s7); align-items: center; }
.story__copy { position: relative; min-block-size: 26rem; }
.act { position: absolute; inset-inline: 0; inset-block-start: 3.5rem; } /* below the rail */
.act .h2 { margin-block-end: var(--s4); }
.act .body { margin-block-end: var(--s3); }
.act .thesis--h3 { margin-block-start: var(--s4); }
.act .thesis--tight { margin-block-start: var(--s1); }
.story__rail { display: flex; gap: var(--s4); margin-block-end: var(--s6); font-size: var(--fs-small); font-weight: 700; color: var(--muted); }
.story__rail li { position: relative; padding-block-end: 6px; transition: color var(--d-base); }
.story__rail li::after { content: ''; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 2px; border-radius: 1px; background: var(--line); transition: background-color var(--d-base); }
.story__rail li.is-active { color: var(--navy); }
.story__rail li.is-active::after { background: var(--teal); }
#s-bubble-a1 .bubble__text, #s-bubble-a2 .bubble__text { display: inline; }

/* ── في كل مكان ─────────────────────────────────────────────────────────────────────────── */
.frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); margin-block: var(--s6); align-items: start; }
.frame { display: flex; flex-direction: column; }
.frame .h3 { margin-block: var(--s4) var(--s2); }
.frame .body { margin: 0; font-size: 1rem; color: var(--muted); }
.frame__screen {
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-device); background: var(--paper); border: 1px solid var(--line);
  box-shadow: var(--shadow-device); padding: var(--s4); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s4); overflow: hidden;
}
.frame__timer { position: absolute; inset-block-start: var(--s4); inset-inline-end: var(--s4); font-size: .8125rem; font-weight: 700; color: var(--muted); }
.fig-mini { inline-size: 45%; }
.frame__status { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.frame__screen--chat { justify-content: flex-end; }
.frame__thread { display: flex; flex-direction: column; gap: var(--s2); inline-size: 100%; }
.frame__thread .bubble--customer { align-self: flex-start; }
.frame__thread .bubble--moawen { align-self: flex-end; }
.frame__apps { display: flex; gap: var(--s2); inline-size: 100%; padding-block-start: var(--s2); border-block-start: 1px solid var(--line); }
.frame__apps span { flex: 1; block-size: 6px; border-radius: 3px; background: var(--line); }
.frame__apps span:first-child { background: var(--teal); }
.same-lines { margin-block-start: var(--s6); }
.same-lines .h3 { margin-block: var(--s1); }

/* the device: «صوت بس · كتابة بس · الاثنين» */
.device { background: #fff; border: 1px solid var(--line); border-radius: var(--r-device); box-shadow: var(--shadow-device); padding: var(--s4); }
.device .h3 { margin-block-start: var(--s4); }
.device__caption { font-size: var(--fs-small); font-weight: 600; color: var(--muted); text-align: center; margin-block-end: var(--s3); }
.seg { --i: 2; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: var(--r-pill); background: var(--paper); border: 1px solid var(--line); }
.seg::before {
  content: ''; position: absolute; inset-block: 4px; inset-inline-start: calc(4px + var(--i) * (100% - 8px) / 3); inline-size: calc((100% - 8px) / 3);
  border-radius: var(--r-pill); background: var(--gradient-ink); transition: inset-inline-start var(--d-base) var(--ease-out);
}
.seg label { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-block-size: 44px; text-align: center; padding: .4em .3em; border-radius: var(--r-pill); font-size: .9rem; font-weight: 700; color: var(--ink); cursor: pointer; user-select: none; transition: color var(--d-base) var(--ease-out), background-color var(--d-fast); }
.seg label:has(:checked) { color: #fff; }
.seg label:not(:has(:checked)):hover { background: rgba(2, 11, 20, .05); }
.seg label:has(:focus-visible) { outline: var(--focus); outline-offset: 2px; }
.seg input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; pointer-events: none; }
.device__screen { position: relative; aspect-ratio: 3 / 4; margin-block-start: var(--s4); border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--line); overflow: hidden; }
.device__bar { position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 28px; padding-inline: var(--s4); display: flex; align-items: center; justify-content: space-between; font-size: .75rem; color: var(--muted); }
.device__dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--teal); }
.pane {
  position: absolute; inset: 28px 0 0 0; padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3);
  opacity: 0; translate: 0 6px; visibility: hidden; pointer-events: none;
  transition: opacity var(--d-fast) var(--ease-out), translate var(--d-fast) var(--ease-out), visibility 0s linear var(--d-fast);
}
.device__screen[data-mode="voice"] .pane--voice, .device__screen[data-mode="text"] .pane--text, .device__screen[data-mode="both"] .pane--both { opacity: 1; translate: 0 0; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.pane--voice { align-items: center; justify-content: center; gap: var(--s5); }
.pane__avatar { border-radius: 50%; background: #fff; border: 1px solid var(--line); flex: none; }
.pane__avatar img { inline-size: 100%; block-size: 100%; border-radius: 50%; object-fit: cover; }
.pane__avatar--lg { inline-size: 96px; block-size: 96px; }
.pane__avatar--sm { inline-size: 48px; block-size: 48px; }
.pane__status { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.pane__head { display: flex; align-items: center; gap: var(--s3); }
.pane__mic { margin-block-start: auto; align-self: center; inline-size: 48px; block-size: 48px; border-radius: 50%; background: var(--gradient-ink); color: #fff; display: grid; place-items: center; }
.pane__mic svg { stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pane .bubble { font-size: .9375rem; padding: .6em .9em; }

/* waveform bars: physical-left half blue (the caller), right half teal (معاون); LTR on purpose */
.wave { display: flex; align-items: center; gap: 3px; block-size: 48px; direction: ltr; }
.wave i { display: block; inline-size: 3px; block-size: 100%; border-radius: 2px; background: var(--teal); transform: scaleY(.25); transform-origin: center; animation: wave 1.1s ease-in-out infinite; animation-delay: calc(var(--n) * 45ms); animation-play-state: paused; }
.wave--24 i:nth-child(-n + 12), .wave--12 i:nth-child(-n + 6) { background: var(--blue); }
.wave--12 { block-size: 28px; }
.wave--picker { block-size: 32px; }
.device__screen[data-mode="voice"] .pane--voice .wave i, .device__screen[data-mode="both"] .pane--both .wave i, [data-playing] .wave--picker i, .frame--phone .wave i { animation-play-state: running; }
@keyframes wave { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

/* ── Bubbles ────────────────────────────────────────────────────────────────────────────── */
.bubble { position: relative; max-inline-size: min(34rem, 100%); padding: .85em 1.15em; border-radius: var(--r-md); line-height: 1.8; font-size: var(--fs-body); color: var(--navy); }
.bubble--customer { background: var(--tint-blue); border-inline-start: 3px solid var(--blue); }
.bubble--moawen { background: var(--tint-teal); border-inline-start: 3px solid var(--teal); }
.bubble--cut { border-inline-end: 2px dashed var(--teal); }
.bubble__text { display: inline; }
.dots { display: inline-flex; gap: 4px; vertical-align: middle; margin-inline-end: .5em; }
.dots i { inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; opacity: .3; }
.bubble.is-typing .dots i { animation: dots .9s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
.bubble:not(.is-typing) .dots { display: none; }
@keyframes dots { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.check { fill: none; stroke: var(--teal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ── Persona & voice picker ─────────────────────────────────────────────────────────────── */
.persona__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s8); align-items: center; }
.persona__grid > * { min-inline-size: 0; }
.picker { background: #fff; border: 1px solid var(--line); border-radius: var(--r-device); box-shadow: var(--shadow-device); padding: var(--s6); display: flex; flex-direction: column; gap: var(--s6); }
.picker__label { display: block; font-weight: 800; font-size: 1.125rem; color: var(--navy); margin-block-end: var(--s3); }
.persona-pick__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s4) var(--s5); }
.portrait { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s3); cursor: pointer; }
.portrait + .portrait { border-inline-start: 1px solid var(--line); padding-inline-start: var(--s5); }
.portrait input, .pill input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; pointer-events: none; }
.portrait__ring { display: block; inline-size: clamp(96px, 26vw, 160px); block-size: clamp(96px, 26vw, 160px); padding: 3px; border-radius: 50%; background: var(--line); transition: background var(--d-base) var(--ease-out); }
.portrait__ring img { inline-size: 100%; block-size: 100%; border-radius: 50%; object-fit: cover; background: #fff; }
.portrait:hover .portrait__ring { background: var(--line-strong); }
.portrait:has(:checked) .portrait__ring, .portrait.is-checked .portrait__ring { background: var(--gradient); }
.portrait:has(:focus-visible) .portrait__ring { outline: var(--focus); outline-offset: 3px; }
.portrait__name { font-weight: 800; font-size: 1.125rem; color: var(--navy); }
.voice-pick .body--small { margin-block-end: var(--s3); }
.voice-pick__groups { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.voice-group { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: flex-start; align-content: flex-start; }
.voice-group__title { inline-size: 100%; font-size: var(--fs-small); font-weight: 700; color: var(--muted); }
.voice-pick[data-persona="latifa"] .voice-group[data-gender="male"] .pill, .voice-pick[data-persona="yusuf"] .voice-group[data-gender="female"] .pill { color: var(--muted); border-color: var(--line); }
.pill { position: relative; display: inline-flex; align-items: center; align-self: flex-start; padding: .4em 1em; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line-strong); font-weight: 600; cursor: pointer; transition: background-color var(--d-fast), border-color var(--d-fast), color var(--d-fast); }
.pill:hover { border-color: var(--navy); }
.voice-pick .voice-group .pill:has(:checked), .voice-pick .voice-group .pill.is-checked { background: var(--tint-teal); border-color: var(--teal); color: var(--teal-deep); }
.pill:has(:checked)::before, .pill.is-checked::before { content: '✓'; font-size: .8em; margin-inline-end: .35em; }
.pill:has(:focus-visible) { outline: var(--focus); outline-offset: 2px; }
.picker__play { display: flex; align-items: center; gap: var(--s4); }

/* ── يحلل ───────────────────────────────────────────────────────────────────────────────── */
.insight { position: relative; background: var(--white); }
.insight__pin { min-block-size: 100svh; display: grid; align-items: center; padding-block: calc(var(--topbar) + var(--s4)) var(--s6); }
.insight__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s7); align-items: center; }
#story { --ar: 420; }   /* the stage SVG is 600×420 */
.insight__stage { aspect-ratio: 600 / var(--ar); }
#insight { --ar: 440; }
.insight__copy { position: relative; min-block-size: 20rem; }
.insight__closing { padding-block: var(--s6) var(--section-pad); }
.insight__closing .h2 { max-inline-size: 30ch; }
.convo { left: 4%; top: 4%; inline-size: 52%; display: flex; flex-direction: column; gap: var(--s2); }
.convo .bubble--customer { align-self: flex-start; }
.convo .bubble--moawen { align-self: flex-end; }
.record { left: 8%; top: 10%; inline-size: 84%; padding: var(--s4) var(--s5); border-radius: var(--r-card); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-device); }
.stackcard { left: 8%; top: 10%; inline-size: 84%; block-size: 60%; border-radius: var(--r-card); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.record__row { display: grid; grid-template-columns: minmax(6rem, 8rem) 1fr; gap: var(--s3); padding-block: var(--s2); border-block-end: 1px solid var(--line); font-size: .9375rem; }
.record__row:last-child { border: 0; }
.record__row dt { font-weight: 700; color: var(--navy); }
.record__row dd { color: var(--ink); }
.emotion { font-size: 1.25rem; display: inline-flex; gap: .3em; align-items: center; }
.chart { left: 4%; top: 6%; inline-size: 50%; padding: var(--s4) var(--s5); border-radius: var(--r-card); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.chart__title { font-weight: 800; color: var(--navy); margin-block-end: var(--s2); }
.chart__bars { display: flex; flex-direction: column; gap: 6px; }
.chart__bars li { display: grid; grid-template-columns: 1fr; gap: 3px; }
.chart__label { font-size: .75rem; font-weight: 600; color: var(--muted); }
.chart__bars i { display: block; block-size: 8px; border-radius: 4px; background: var(--blue); inline-size: calc(var(--v) * 100%); transform-origin: 100% 50%; /* grows from the inline start */ }
.chart__bars [data-gap] i { background: var(--amber-line); }
.chart__bars [data-gap].is-hot i { background: var(--amber); }
.gap-card { right: 2%; top: 26%; inline-size: 42%; padding: var(--s4) var(--s5); border-radius: var(--r-card); background: var(--amber-bg); border: 1px solid var(--amber-line); box-shadow: var(--shadow-card); }
.gap-card__title { display: flex; align-items: center; gap: .4em; font-weight: 800; color: var(--amber); font-size: 1rem; margin-block-end: var(--s2); }
.gap-card__icon { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gap-card__row { display: grid; grid-template-columns: 1fr; gap: 2px; padding-block: var(--s2); border-block-start: 1px solid rgba(180, 83, 9, .18); font-size: .875rem; }
.gap-card__row dt { font-weight: 700; color: var(--navy); }
.gap-card__row dd { color: var(--ink); }
.caption-note { right: 4%; top: 2%; font-size: var(--fs-small); color: var(--muted); }

/* ── Trust ──────────────────────────────────────────────────────────────────────────────── */
.trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s7); align-items: start; }
.trust .h2 { font-size: var(--fs-h3); margin-block-end: var(--s3); }
.trust .chips--strong { margin-block: var(--s4) var(--s4); }
.rows { margin-block-start: var(--s4); }
.row { display: flex; flex-direction: column; gap: 2px; padding-block: var(--s3); border-block-end: 1px solid var(--line); }
.row strong { font-size: 1rem; color: var(--navy); }
.row span { font-size: .9375rem; color: var(--ink); }
.tiles { display: grid; gap: var(--s3); margin-block: var(--s4) 0; }
.tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile { padding: var(--s4); border-radius: var(--r-card); background: #fff; border: 1px solid var(--line); min-inline-size: 0; }
.tile strong { display: block; font-size: 1.0625rem; font-weight: 700; color: var(--navy); line-height: 1.4; margin-block-end: 2px; overflow-wrap: anywhere; }
.tile span { color: var(--muted); font-size: .9375rem; }
.tile--counter strong { font-size: var(--fs-h3); font-weight: 900; }

/* ── THE FINAL SCROLL ───────────────────────────────────────────────────────────────────── */
.final { background: var(--white); }
.final__stage { position: relative; min-block-size: 100svh; display: grid; place-items: center; overflow: hidden; padding-block: var(--topbar) var(--s6); }
.final__film { position: relative; inline-size: min(840px, 80vw); aspect-ratio: 16 / 9; }
.final__poster, .final__canvas, .final__video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.final__canvas[hidden], .final__video[hidden] { display: none; }
.final__verbs { position: absolute; inset-inline: 0; inset-block-start: calc(var(--topbar) + 2vh); text-align: center; font-size: clamp(3rem, 11vw, 10rem); font-weight: 900; line-height: 1.1; color: var(--navy); pointer-events: none; }
.final__verb { position: absolute; inset-inline: 0; opacity: 0; }
.final__lockup { position: absolute; inset-inline: 0; inset-block-end: clamp(16px, 5svh, 48px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding-inline: var(--gutter); }
.final__name { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 900; color: var(--navy); line-height: 1.25; }
.final__tag { max-inline-size: none; margin: 0 !important; }
.final__lockup .body { margin: var(--s2) 0 0; }
.final__lockup .thesis { font-size: var(--fs-lead); }

/* ── Final CTA & footer ─────────────────────────────────────────────────────────────────── */
.cta__in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s4); }
.cta .h2 { margin: 0 !important; max-inline-size: none; }
.cta .display { margin-block-end: var(--s3); }
.cta .lead { max-inline-size: 48ch; margin: 0; }
.cta__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s4); margin-block: var(--s5) var(--s9); }
.cta__brand { display: flex; flex-direction: column; align-items: center; gap: var(--s4); }
.cta__brand img { block-size: 72px; inline-size: auto; }
.cta__brand .chips { justify-content: center; }
.cta__tag { font-size: var(--fs-h3) !important; margin: 0 !important; max-inline-size: none; }
.footer { border-block-start: 1px solid var(--line); padding-block: var(--s4); font-size: var(--fs-small); color: var(--muted); }
.footer__in { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.footer__link { display: inline-flex; align-items: center; min-block-size: 44px; font-weight: 700; color: var(--navy); }
.footer__link:hover { text-decoration: underline; text-underline-offset: .25em; }

/* ── The note that appears when a mailto click opens nothing ──────────────────────────── */
.email-link { font-weight: 700; color: var(--navy); text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--teal); }
.email-link:hover { color: var(--teal-ink); }
.mail-note {
  position: fixed; inset-block-end: var(--s5); inset-inline: var(--s4); z-index: 60; margin-inline: auto; max-inline-size: 36rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s4) var(--s5); border-radius: var(--r-card); background: var(--navy); color: #fff; box-shadow: var(--shadow-device);
  font-size: 1rem; line-height: 1.7;
}
.mail-note[hidden] { display: none; }
.mail-note .email-link { color: #fff; text-decoration-color: var(--teal); }
.mail-note__actions { display: flex; align-items: center; gap: var(--s2); flex: none; }
.mail-note__copy { padding: .45em 1em; border-radius: var(--r-pill); background: #fff; color: var(--navy); font-weight: 700; min-block-size: 44px; }
.mail-note__close { inline-size: 44px; min-block-size: 44px; border-radius: 50%; color: #fff; font-size: 1.5rem; line-height: 1; }
.mail-note__close:hover { background: rgba(255, 255, 255, .14); }
.mail-note__copy:hover { background: var(--tint-teal); }
.mail-note__copy:focus-visible { outline-color: #fff; }

/* ── Magnetic cursor (physical: pointer coordinates are physical) ───────────────────────── */
.cursor { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 9999; border-radius: 50%; opacity: 0; }
.cursor--dot { inline-size: 6px; block-size: 6px; background: var(--navy); margin: -3px 0 0 -3px; }
.cursor--ring { inline-size: 36px; block-size: 36px; border: 1px solid rgba(11, 31, 51, .4); margin: -18px 0 0 -18px; transition: border-color var(--d-fast), box-shadow var(--d-fast); }
.cursor--ring.is-hot { border-color: var(--teal); box-shadow: 0 0 18px rgba(0, 210, 180, .55), inset 0 0 10px rgba(0, 210, 180, .25); }
.cursor--ring.is-light { border-color: #fff; box-shadow: 0 0 18px rgba(255, 255, 255, .7); }
.cursor.is-visible { opacity: 1; }

/* ── Responsive ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023.98px) {
  .hero__in { grid-template-columns: 1fr; min-block-size: 0; row-gap: var(--s6); }
  .hero__stage { inline-size: min(560px, 100%); margin-inline: auto; }
  .frames { grid-template-columns: 1fr; max-inline-size: 26rem; margin-inline: auto; }
  .persona__grid { grid-template-columns: 1fr; }
  .persona__grid .picker { order: -1; }
  .trust { grid-template-columns: 1fr; gap: var(--s8); }
}

/* Small or short viewports (the «lite» level): the story and يحلل stages stick while their acts
   scroll beneath; nothing is pinned. */
@media (max-width: 899.98px), (max-height: 639.98px) {
  .story__pin, .insight__pin { min-block-size: 0; display: block; padding-block: var(--section-pad) var(--s6); }
  .story__grid, .insight__grid { display: block; }
  /* The stage is a card that holds still while the acts pass beneath it. It butts straight
     against the top bar — with a gap, text was sliced in the strip between the two and looked
     broken. The card's border and shadow say "this is in front", so text sliding behind it
     reads as depth rather than damage. */
  .story__stage, .insight__stage {
    position: sticky; inset-block-start: var(--topbar); z-index: 2;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
    box-shadow: var(--shadow-card); margin-block-end: var(--s5);
    overflow: hidden; /* a card holds its own contents: nothing flies out over the text */
  }
  .story__copy, .insight__copy { min-block-size: 0; }
  /* One act fills the clear space under the card, so what you read and what the stage shows are
     the same moment. --clear is what is left of the screen once the bar and the card have taken
     their share; sizing an act to it means one act ≈ one screenful, and the heading is never
     already behind the card when you arrive at it. main.js drives the stage to that act rather
     than scrubbing across all of them. */
  .story__stage, .insight__stage { aspect-ratio: 600 / var(--ar); }
  .act {
    --card: calc((100vw - 2 * var(--gutter)) * var(--ar) / 600);
    position: relative; inset: auto;
    min-block-size: max(380px, calc(100svh - var(--topbar) - var(--card) - var(--s7)));
    padding-block: var(--s5);
    display: flex; flex-direction: column; justify-content: center;
    scroll-margin-block-start: calc(var(--topbar) + var(--card) + var(--s5));
  }
  /* the acts carry the rhythm on small screens, so the headings breathe a little less */
  .act .h2 { line-height: 1.25; margin-block-end: var(--s3); }
  .act .body { margin-block-end: var(--s3); }
  .act .chips--strong { margin-block: var(--s4) 0; }
  .story__rail { display: none; }
  .final__stage { min-block-size: 0; padding-block: var(--section-pad); display: flex; flex-direction: column; gap: var(--s6); }
  .final__verbs { position: static; margin: 0; font-size: clamp(2.5rem, 12vw, 5rem); display: flex; flex-direction: column; gap: var(--s2); }
  .final__verb { position: static; opacity: 1; }
  .final__film { inline-size: min(560px, 92vw); }
  .final__lockup { position: static; }
}
body[data-motion="none"] .story__pin, body[data-motion="none"] .insight__pin { min-block-size: 0; display: block; padding-block: var(--section-pad) var(--s6); }
body[data-motion="none"] .story__grid, body[data-motion="none"] .insight__grid { display: block; }
body[data-motion="none"] .story__stage, body[data-motion="none"] .insight__stage { margin-block-end: var(--s6); max-inline-size: 640px; margin-inline: auto; }
body[data-motion="none"] .story__copy, body[data-motion="none"] .insight__copy { min-block-size: 0; }
body[data-motion="none"] .act { position: relative; inset: auto; padding-block: var(--s6); }
body[data-motion="none"] .story__rail { display: none; }
body[data-motion="none"] .final__stage { min-block-size: 0; padding-block: var(--section-pad); display: flex; flex-direction: column; gap: var(--s6); }
body[data-motion="none"] .final__verbs { position: static; margin: 0; font-size: clamp(2.5rem, 8vw, 5rem); display: flex; flex-direction: column; gap: var(--s2); }
body[data-motion="none"] .final__verb { position: static; opacity: 1; }
body[data-motion="none"] .final__lockup { position: static; }
body[data-motion="none"] .cursor { display: none; }
/* without motion every stage shows its resolved pose: the question, the answer, the shelf, the picture */
body[data-motion="none"] #s-bubble-a1, body[data-motion="none"] #s-bubble-int, body[data-motion="none"] #s-chip-stop,
body[data-motion="none"] #s-p1, body[data-motion="none"] #s-p2, body[data-motion="none"] #s-p3, body[data-motion="none"] #s-intent,
body[data-motion="none"] #i-convo, body[data-motion="none"] #i-record, body[data-motion="none"] #i-stack1, body[data-motion="none"] #i-stack2 { display: none; }
body[data-motion="none"] .doc[data-lit] { background: var(--tint-teal); border-color: var(--teal); color: var(--teal-deep); }
body[data-motion="none"] .fig__glow { opacity: .3; }

@media (max-width: 767.98px) {
  .voice-pick__groups { grid-template-columns: 1fr; }
  .cta__buttons { flex-direction: column; align-items: stretch; }
  .cta__buttons .btn { inline-size: 100%; }
  .picker { padding: var(--s5); }
  .tiles--2 { grid-template-columns: 1fr; }
  .ov--q, .ov--a, .ov--p1, .ov--p2, .ov--p3 { max-inline-size: 48%; }
  .bubble--sm { font-size: .875rem; }
  .bubble--xs { font-size: .8125rem; }
  .doc { font-size: .75rem; padding: .3em .5em; }
  .note { font-size: .8125rem; }
  .record__row { grid-template-columns: 1fr; gap: 0; font-size: .8125rem; }
  .chart__label { font-size: .6875rem; }
  /* measured: at these sizes every overlay stays inside the stage on a 360–430px phone */
  /* the chart and the gap card stand side by side on a wide screen; stacked on a phone they need
     the extra height, and every overlay was measured to stay inside the card at 360–430px */
  #insight { --ar: 620; }
  .stage-box .record { top: 3%; inline-size: 92%; left: 4%; padding: var(--s3) var(--s4); }
  .stage-box .record__row { padding-block: 3px; line-height: 1.55; }
  .stage-box .emotion { font-size: 1rem; }
  .stage-box .chart { top: 3%; inline-size: 62%; }
  /* anchored to the foot of the card, so however tall its three rows grow it can never spill.
     It covers the lower bars of the chart on a phone — which is the point of this act: the bar
     it names is the one nobody answered. */
  .stage-box .gap-card { top: auto; inset-block-end: 4%; inline-size: 68%; right: 3%; }
  .stage-box .gap-card__title { font-size: .8125rem; }
  .stage-box .gap-card__row { font-size: .75rem; }
  .stage-box .ov--note { top: 74%; max-inline-size: 46%; }
  .stage-box .ov--shelf { top: 16%; }
}

@media (max-width: 640px) {
  .hero { padding-block-start: calc(var(--topbar) + var(--s6)); }
  .wave--24 i:nth-child(n + 17) { display: none; }
  .wave--24 i:nth-child(-n + 8) { background: var(--blue); }
  .wave--24 i:nth-child(n + 9) { background: var(--teal); }
  .topbar__mark { block-size: 32px; }
  .topbar__word { block-size: 20px; }
  .chips--strong .chip { font-size: .9375rem; }
  .cta__brand img { block-size: 60px; }
}
@media (max-width: 400px) {
  .hero__ctas .btn { inline-size: 100%; }
  .seg label { font-size: .8125rem; padding-inline: .2em; }
}

/* ── Motion: reduced, coarse pointers, forced colours ──────────────────────────────────── */
@media (pointer: coarse) { .cursor { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .cursor { display: none; }
}
@media (forced-colors: active) {
  .seg label:has(:checked), .pill:has(:checked), .portrait:has(:checked) .portrait__ring { outline: 3px solid CanvasText; outline-offset: 2px; }
}