/* GENERATED by build.mjs — do not edit. Edit src/css/*.css and re-run. */

/* ===== tokens.css ==================================================== */
/* ============================================================================
 *  tokens — every colour, size, and duration in the design system.
 *
 *  Nothing below this file should contain a raw hex value, a raw px size, or a
 *  raw duration. If a component needs a value that isn't here, add it here.
 *  That rule is what makes a re-theme a one-file change.
 *
 *  DIRECTION: pure black canvas, one bright cyan accent doing the work, with
 *  violet / mint / amber as a secondary set for categorising. Big white
 *  headings, generous grey body copy, cards that are barely lighter than the
 *  page and rely on a hairline border instead of fill.
 * ========================================================================== */

:root {
  /* ---- surfaces ---------------------------------------------------------- */
  --bg:        #000000;   /* true black — the glows need it to read */
  --bg-soft:   #08090B;
  --panel:     #0A0B0D;
  --panel-2:   #101114;
  --panel-3:   #16171B;   /* inputs, nested rows */

  /* ---- ink --------------------------------------------------------------- */
  --text:      #FFFFFF;
  --muted:     #A1A1AA;
  --muted-2:   #71717A;
  --muted-3:   #52525B;   /* ghost numerals, disabled */
  --on-accent: #001417;   /* text on a cyan fill */

  /* ---- the accent -------------------------------------------------------- */
  --accent:      #67E8F9;
  --accent-soft: #A5F3FC;
  --accent-deep: #22D3EE;

  /* ---- the secondary set (categorising only — never two in one component) - */
  --violet: #A78BFA;
  --mint:   #34D399;
  --amber:  #FB923C;
  --danger: #F87171;

  /* Each accent needs a wash and a line at the same hue. Grouped so adding a
     colour means adding one block, not hunting through three files. */
  --accent-wash: rgba(103,232,249,.08);
  --accent-line: rgba(103,232,249,.24);
  --accent-glow: rgba(103,232,249,.35);
  --violet-wash: rgba(167,139,250,.08);
  --violet-line: rgba(167,139,250,.24);
  --mint-wash:   rgba(52,211,153,.08);
  --mint-line:   rgba(52,211,153,.24);
  --amber-wash:  rgba(251,146,60,.08);
  --amber-line:  rgba(251,146,60,.24);

  /* ---- lines ------------------------------------------------------------- */
  --line:   rgba(255,255,255,.07);
  --line-2: rgba(255,255,255,.12);
  --line-3: rgba(255,255,255,.18);

  /* ---- type -------------------------------------------------------------- */
  /* Plus Jakarta Sans is the closest freely-licensed match to the reference's
     geometric grotesque; IBM Plex Sans Arabic stays for Arabic, where it's
     already proven at heading weights. */
  --font-ar:  'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-lat: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-xs:      .78rem;
  --t-sm:      .875rem;
  --t-base:    1rem;
  --t-md:      1.0625rem;
  --t-lg:      clamp(1.15rem, 3.4vw, 1.375rem);
  --t-h3:      1.25rem;
  --t-h2:      clamp(1.9rem, 5vw, 2.75rem);
  --t-h1:      clamp(2.1rem, 6vw, 3.25rem);
  --t-display: clamp(2.4rem, 6.4vw, 4.1rem);
  --t-lead:    clamp(1.02rem, 2.4vw, 1.18rem);
  --t-stat:    clamp(1.7rem, 4vw, 2.1rem);   /* case-study card numbers */
  --t-ghost:   clamp(2.4rem, 6vw, 3.4rem);   /* the 01 / 02 / 03 numerals */

  /* Arabic is cursive: it needs more leading than Latin and must never be
     tracked. base.css swaps these wholesale on [dir]. */
  --lh-body-ar:  1.85;
  --lh-body-lat: 1.7;
  --lh-tight:    1.08;
  --lh-heading:  1.18;
  --track-tight: -.03em;
  --track-wide:  .14em;

  --w-light:  300;
  --w-normal: 400;
  --w-medium: 500;
  --w-semi:   600;
  --w-bold:   700;
  --w-black:  800;

  /* ---- space ------------------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 22px;
  --s-6: 28px;
  --s-7: 36px;
  --s-8: 52px;
  --s-9: 72px;
  --s-10: 104px;
  --s-section: clamp(56px, 7.5vw, 100px);
  --s-gutter: 28px;
  --s-gutter-sm: 20px;

  /* ---- shape ------------------------------------------------------------- */
  --r-xs:    8px;
  --r-sm:    12px;
  --r:       16px;
  --r-lg:    22px;
  --r-xl:    28px;
  --r-input: 10px;
  --r-btn:   12px;   /* the reference's CTAs are softly rounded, not pills */
  --pill:    999px;

  --shadow:       0 24px 70px -30px rgba(0,0,0,.9);
  --shadow-panel: 0 40px 120px -50px rgba(0,0,0,1);
  --shadow-btn:   0 0 0 1px rgba(103,232,249,.4), 0 8px 34px -8px var(--accent-glow);
  --shadow-btn-hover: 0 0 0 1px rgba(103,232,249,.6), 0 12px 44px -8px rgba(103,232,249,.5);

  /* ---- motion ------------------------------------------------------------ */
  --ease:   cubic-bezier(.22,.61,.36,1);
  --d-fast: .18s;
  --d:      .25s;
  --d-slow: .7s;

  /* ---- measure ----------------------------------------------------------- */
  --maxw:   1200px;
  --readw:  760px;
  --demow:  560px;
  --convow: 100%;

  /* ---- chrome ------------------------------------------------------------ */
  --nav-h: 72px;
  --z-fx: 0;
  --z-content: 1;
  --z-nav: 60;
  --z-debug: 9999;
}

/* ===== base.css ====================================================== */
/* ============================================================================
 *  base — reset, document typography, bidi handling, focus.
 *  No component styling lives here.
 * ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* anchor links land below the sticky nav instead of under it */
  scroll-padding-block-start: calc(var(--nav-h) + var(--s-4));
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ar);
  font-size: 17px;
  line-height: var(--lh-body-ar);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
}

/* ---- bidi -----------------------------------------------------------------
 * Arabic is cursive: it must never be letter-spaced, and it wants more leading
 * than Latin. Rather than patching that per component, swap the two type
 * settings once, here.
 * -------------------------------------------------------------------------- */
[dir="ltr"] body {
  font-family: var(--font-lat);
  line-height: var(--lh-body-lat);
}

[dir="rtl"] .display,
[dir="rtl"] .page-hero h1,
[dir="rtl"] .eyebrow,
[dir="rtl"] .section-head h2,
[dir="rtl"] .prose h2,
[dir="rtl"] .cta-card h2,
[dir="rtl"] .footer-col h4,
[dir="rtl"] .sample-tag,
[dir="rtl"] .stat-row b { letter-spacing: 0; }

/* Headings take the Latin geometric face in LTR; Arabic keeps its own, which
   already carries the weight the design needs. */
[dir="ltr"] h1, [dir="ltr"] h2, [dir="ltr"] h3,
[dir="ltr"] .display, [dir="ltr"] .btn, [dir="ltr"] .stat-row b {
  font-family: var(--font-lat);
}

/* Latin runs (brand, numbers) stay LTR inside RTL text.
   Keep this on an INLINE element. Put it on a block and `direction: ltr` makes
   that block's own text-align resolve to left, so the Latin run drifts to the
   wrong side of an RTL layout while its label stays put. The `:where()` rule
   below is the backstop for when someone forgets. */
.lat {
  display: inline-block;
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--font-lat);
}
/* Harmless when .lat is inline-block (it shrink-wraps, so alignment is moot);
   corrects the drift when it has accidentally become block-level. */
[dir="rtl"] .lat { text-align: right; }

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; }

/* Inline icons size from the type scale instead of hardcoded width/height
   attributes, so a font-size change carries them along. */
.ico { width: 1em; height: 1em; flex: none; }

/* Arrows in CTAs point "forward" — which flips with direction. */
.arrow { display: inline-block; transition: transform var(--d) var(--ease); }
[dir="rtl"] .arrow { transform: scaleX(-1); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--s-1);
}
::selection { background: rgba(103,232,249,.3); color: #fff; }

/* ---- reduced motion -------------------------------------------------------
 * Kept in base (not at the end of one big file) so it can never be overridden
 * by a component rule loaded later.
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fx b { animation: none !important; }
  .orb-ring { animation: none !important; }
  .orb-core { transition: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .btn, .card, .arrow { transition: none; }
  /* with the ring animation off, a blinking dot is the only "speaking" cue left */
  .orb-speaking .orb-dot { opacity: 1; animation: blink 1s steps(2) infinite; }
}
@keyframes blink { 50% { opacity: .25; } }

/* ===== layout.css ==================================================== */
/* ============================================================================
 *  layout — page scaffolding, sections, grids, the ambient background.
 * ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--s-gutter);
}

.section { padding-block: var(--s-section); }

/* Sections are separated by space and a hairline, not by a change of fill —
   the black canvas has to stay unbroken for the glows to work. */
.section--ruled { border-block-start: 1px solid var(--line); }

.section-head {
  max-width: var(--readw);
  margin-inline: auto;
  margin-block-end: var(--s-7);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
}
.section-head h2 {
  font-weight: var(--w-bold);
  font-size: var(--t-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-tight);
}
.section-head p { color: var(--muted); font-size: var(--t-md); max-width: 52ch; }

/* left-aligned variant, with room for a "view all" link on the far side */
.section-head--start {
  max-width: none; text-align: start; align-items: stretch;
  display: grid; grid-template-columns: 1fr auto; align-items: end;
  gap: var(--s-4) var(--s-6);
}
.section-head--start .eyebrow { justify-self: start; grid-column: 1; }
.section-head--start h2 { grid-column: 1; }
.section-head--start .head-link { grid-column: 2; grid-row: 2; }

/* ---- eyebrow ---------------------------------------------------------------
 * Two forms: a plain uppercase accent label above a section heading, and a
 * bordered pill with a live dot for the hero.
 * -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-lat);
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--accent);
}
[dir="rtl"] .eyebrow { font-family: var(--font-ar); font-size: var(--t-sm); }

.eyebrow--pill {
  padding: 7px 15px 7px 13px;
  border: 1px solid var(--accent-line);
  border-radius: var(--pill);
  background: var(--accent-wash);
}
.eyebrow--pill::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  flex: none;
}

/* ---- display type --------------------------------------------------------- */
.display {
  font-weight: var(--w-black);
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
}
/* The reference runs a cyan→violet gradient across the second half of the
   headline. Applied to a <span> so the first half stays solid white. */
.grad {
  background: linear-gradient(100deg, var(--accent) 0%, var(--accent-soft) 38%, var(--violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
[dir="rtl"] .grad { background-image: linear-gradient(260deg, var(--accent) 0%, var(--accent-soft) 38%, var(--violet) 100%); }

.lead {
  color: var(--muted);
  font-weight: var(--w-normal);
  font-size: var(--t-lead);
  line-height: 1.75;
}

/* ---- grids ---------------------------------------------------------------- */
.grid   { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---- hero ------------------------------------------------------------------
 * Two columns on desktop: the pitch on one side, the live agent on the other.
 * The demo IS the product panel — a visitor can see the claim and test it in
 * the same viewport.
 * -------------------------------------------------------------------------- */
.hero { padding-block: clamp(48px, 7vw, 88px) clamp(48px, 7vw, 96px); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(36px, 5vw, 68px);
  align-items: center;
}
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
.hero-copy .eyebrow { margin-block-end: var(--s-5); }
.hero-copy .display { max-width: 15ch; }
.hero-copy .lead { max-width: 46ch; margin-block-start: var(--s-5); }
.hero-cta {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-block-start: var(--s-7);
}

/* the stat strip under the CTAs — a grid, not flex-wrap: three equal columns
   keep it on one row whatever the label lengths do across languages */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6) var(--s-5);
  margin-block-start: var(--s-7);
  padding-block-start: var(--s-6);
  border-block-start: 1px solid var(--line);
  width: 100%;
}
.stat-row > div { min-width: 0; }
.stat-row b {
  display: block;
  font-weight: var(--w-black);
  /* smaller than a case-study figure: these values are words as often as
     numbers, and "Saudi dialect" has to fit a third of the column */
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: var(--track-tight);
  color: var(--accent);
  overflow-wrap: break-word;
}
.stat-row span {
  display: block;
  margin-block-start: 6px;
  color: var(--muted-2);
  font-size: var(--t-sm);
  line-height: 1.5;
}

.trust {
  margin-block-start: var(--s-5);
  color: var(--muted-2);
  font-size: var(--t-sm);
}

/* interior page header */
.page-hero {
  padding-block: clamp(56px, 8vw, 100px) clamp(28px, 4vw, 48px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
}
.page-hero h1 {
  font-weight: var(--w-black);
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  max-width: 20ch;
}
.page-hero .lead { max-width: 52ch; }

/* ---- ambient glows ---------------------------------------------------------
 * On a true-black page these are the only thing giving depth. Kept very low
 * opacity and very large — they should never read as distinct shapes.
 * -------------------------------------------------------------------------- */
.fx {
  position: fixed;
  inset: 0;
  z-index: var(--z-fx);
  pointer-events: none;
  overflow: hidden;
}
.fx b {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
.fx .b1 {
  width: 52vw; height: 52vw; inset-block-start: -18vw; inset-inline-start: -12vw;
  background: radial-gradient(circle at 50% 50%, rgba(34,211,238,.16), transparent 66%);
  animation: drift1 28s var(--ease) infinite alternate;
}
.fx .b2 {
  width: 44vw; height: 44vw; inset-block-start: 30%; inset-inline-end: -14vw;
  background: radial-gradient(circle at 50% 50%, rgba(167,139,250,.11), transparent 64%);
  animation: drift2 36s var(--ease) infinite alternate;
}
.fx .b3 {
  width: 40vw; height: 40vw; inset-block-end: -16vw; inset-inline-start: 22%;
  background: radial-gradient(circle at 50% 50%, rgba(52,211,153,.07), transparent 62%);
  animation: drift3 32s var(--ease) infinite alternate;
}
@keyframes drift1 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(4vw,5vh,0) scale(1.14); } }
@keyframes drift2 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-5vw,-4vh,0) scale(1.16); } }
@keyframes drift3 { from { transform: translate3d(0,0,0) scale(.95); } to { transform: translate3d(3vw,-5vh,0) scale(1.1); } }

/* everything above the glows */
nav, main, footer { position: relative; z-index: var(--z-content); }

/* ---- reveal-on-scroll ----------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--d-slow) var(--ease), transform var(--d-slow) var(--ease);
}
[data-reveal].in { opacity: 1; transform: none; }

/* ---- responsive ----------------------------------------------------------- */
@media (max-width: 1040px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .hero-copy { align-items: center; text-align: center; }
  .hero-copy .display, .hero-copy .lead { max-width: 22ch; margin-inline: auto; }
  .hero-copy .lead { max-width: 46ch; }
  .hero-cta { justify-content: center; }
  .stat-row { text-align: center; max-width: 620px; margin-inline: auto; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .section-head--start { grid-template-columns: 1fr; }
  .section-head--start .head-link { grid-column: 1; grid-row: auto; justify-self: start; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { padding-inline: var(--s-gutter-sm); }
  .grid-4 { grid-template-columns: 1fr; }
  /* stack CTAs full-width so Arabic labels sit on one line, never clipped */
  .hero-cta { flex-direction: column; align-items: stretch; width: 100%; }
  .hero-cta .btn { width: 100%; }
  /* three columns is too tight on a phone — one per row, left-aligned */
  .stat-row { grid-template-columns: 1fr; gap: var(--s-4); text-align: start; }
}

/* ===== components.css ================================================ */
/* ============================================================================
 *  components — nav, buttons, cards, steps, faq, cta, forms, footer.
 *  Reusable across every page. Page-specific tweaks live in pages.css.
 * ========================================================================== */

/* ---------------------------------------------------------------- nav */
nav {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-nav);
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-block-end: 1px solid var(--line);
}
.nav-in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--s-gutter);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-lat);
  font-weight: var(--w-bold);
  font-size: 1.02rem;
  letter-spacing: -.01em;
}
.brand .mark {
  width: 34px; height: 34px; border-radius: var(--r-xs); flex: none;
  display: grid; place-items: center;
  color: var(--accent);            /* the mark's SVG uses currentColor */
  border: 1px solid var(--accent-line);
  background: var(--accent-wash);
  transition: border-color var(--d) var(--ease), box-shadow var(--d) var(--ease);
}
.brand:hover .mark { border-color: var(--accent); box-shadow: 0 0 22px -4px var(--accent-glow); }

.nav-links { display: flex; align-items: center; gap: var(--s-5); }
.nav-links a {
  color: var(--muted);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  position: relative;
  white-space: nowrap;
  transition: color var(--d-fast) var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; inset-block-end: -8px; inset-inline-start: 0;
  width: 100%; height: 2px; background: var(--accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--d) var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
[dir="rtl"] .nav-links a::after { transform-origin: right; }

.nav-actions { display: flex; align-items: center; gap: var(--s-3); }
.lang-btn {
  font-family: var(--font-lat);
  font-weight: var(--w-semi);
  font-size: var(--t-xs);
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--pill);
  min-width: 42px; height: 38px; padding-inline: var(--s-3);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
  transition: var(--d-fast) var(--ease);
}
.lang-btn:hover { border-color: var(--accent-line); color: var(--accent); }

.nav-burger {
  display: none;
  width: 40px; height: 38px;
  border: 1px solid var(--line-2);
  background: transparent;
  border-radius: var(--r-input);
  cursor: pointer; padding: 0; place-items: center;
}
.nav-burger span, .nav-burger span::before, .nav-burger span::after {
  content: ""; display: block; width: 17px; height: 1.6px;
  background: var(--text); border-radius: 2px;
  position: relative; transition: var(--d-fast) var(--ease);
}
.nav-burger span::before { position: absolute; inset-block-start: -6px; }
.nav-burger span::after  { position: absolute; inset-block-start: 6px; }

/* ---------------------------------------------------------------- buttons */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: inherit; font-weight: var(--w-bold); font-size: var(--t-base);
  line-height: 1.35; white-space: nowrap; max-width: 100%; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--r-btn);
  padding: 15px 26px;
  transition: transform .2s var(--ease), box-shadow var(--d) var(--ease),
              background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn--primary {
  color: var(--on-accent);
  background: linear-gradient(180deg, var(--accent-soft), var(--accent) 60%, var(--accent-deep));
  box-shadow: var(--shadow-btn);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-btn-hover); }
.btn--primary:hover .arrow { transform: translateX(3px); }
[dir="rtl"] .btn--primary:hover .arrow { transform: scaleX(-1) translateX(3px); }

.btn--ghost {
  color: var(--text);
  border-color: var(--line-2);
  background: rgba(255,255,255,.02);
}
.btn--ghost:hover { border-color: var(--line-3); background: rgba(255,255,255,.05); transform: translateY(-2px); }

.btn--sm { padding: 10px 16px; font-size: var(--t-sm); border-radius: var(--r-input); }
.btn--wide { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; transform: none; }

.wa-btn { display: inline-flex; align-items: center; gap: var(--s-2); }
.wa-btn .ico { font-size: 1.15em; }

/* an inline text link with a trailing arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--t-sm); font-weight: var(--w-semi);
  color: var(--accent);
  transition: gap var(--d-fast) var(--ease);
}
.link-arrow:hover { gap: 11px; }

/* ---------------------------------------------------------------- cards */
.card {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--s-6);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
  transition: border-color var(--d) var(--ease), background var(--d) var(--ease),
              transform var(--d) var(--ease);
}
.card:hover { transform: translateY(-3px); border-color: var(--line-2); background: var(--panel-2); }

/* the tinted rounded-square icon tile */
.card .tile {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  margin-block-end: var(--s-5);
  color: var(--accent);
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
}
.card .tile svg { width: 22px; height: 22px; }
.card h3 {
  font-weight: var(--w-bold); font-size: var(--t-h3);
  letter-spacing: -.01em; margin-block-end: var(--s-3);
}
.card p { color: var(--muted); font-size: var(--t-sm); line-height: 1.75; }
.card .link-arrow { margin-block-start: var(--s-5); }

/* Per-card accent. Set --c/--c-wash/--c-line once and the tile, link and hover
   glow all follow — that's how the reference gets four differently-coloured
   cards without four copies of the component. */
.card--violet { --accent: var(--violet); --accent-wash: var(--violet-wash); --accent-line: var(--violet-line); }
.card--mint   { --accent: var(--mint);   --accent-wash: var(--mint-wash);   --accent-line: var(--mint-line); }
.card--amber  { --accent: var(--amber);  --accent-wash: var(--amber-wash);  --accent-line: var(--amber-line); }

/* ---------------------------------------------------------------- stat cards */
/* Big accent number + label + source line. Built for real client results;
   until those exist it carries capability claims instead of invented metrics. */
.stat-card {
  padding: var(--s-6);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--accent-wash), transparent 62%), var(--panel);
  transition: border-color var(--d) var(--ease), transform var(--d) var(--ease);
}
.stat-card:hover { transform: translateY(-3px); border-color: var(--accent-line); }
.stat-card b {
  display: block;
  font-weight: var(--w-black);
  font-size: var(--t-stat);
  line-height: 1.15;
  letter-spacing: var(--track-tight);
  color: var(--accent);
  margin-block-end: var(--s-3);
}
.stat-card strong { display: block; font-weight: var(--w-semi); font-size: var(--t-sm); }
.stat-card span { display: block; margin-block-start: 6px; color: var(--muted-2); font-size: var(--t-xs); }
.stat-card--violet { --accent: var(--violet); --accent-wash: var(--violet-wash); --accent-line: var(--violet-line); }
.stat-card--mint   { --accent: var(--mint);   --accent-wash: var(--mint-wash);   --accent-line: var(--mint-line); }
.stat-card--amber  { --accent: var(--amber);  --accent-wash: var(--amber-wash);  --accent-line: var(--amber-line); }

/* ---------------------------------------------------------------- steps */
/* Numbered cards with a big ghost numeral behind a small filled badge. */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.steps--4 { grid-template-columns: repeat(4, 1fr); }
.step {
  position: relative;
  padding: var(--s-6);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--panel);
  transition: border-color var(--d) var(--ease), transform var(--d) var(--ease);
}
.step:hover { transform: translateY(-3px); border-color: var(--line-2); }
.step-n { display: flex; align-items: center; gap: var(--s-3); margin-block-end: var(--s-5); }
.step-n .ghost {
  font-family: var(--font-lat);
  font-weight: var(--w-black);
  font-size: var(--t-ghost);
  line-height: 1;
  color: var(--muted-3);
  opacity: .35;
  letter-spacing: -.04em;
}
.step-n .badge {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-lat); font-weight: var(--w-bold); font-size: var(--t-xs);
  color: var(--on-accent);
  background: var(--accent);
  box-shadow: 0 0 18px -4px var(--accent-glow);
}
.step b { display: block; font-weight: var(--w-bold); font-size: var(--t-h3); margin-block-end: var(--s-3); }
.step p { color: var(--muted); font-size: var(--t-sm); line-height: 1.75; }

/* ---------------------------------------------------------------- faq */
.faq-list { max-width: var(--readw); margin-inline: auto; }
.faq {
  padding: var(--s-5) 0;
  border-block-start: 1px solid var(--line);
}
.faq:first-child { border-block-start: none; padding-block-start: 0; }
.faq h3 {
  font-weight: var(--w-semi); font-size: var(--t-md);
  margin-block-end: var(--s-2); color: var(--text);
}
.faq p { color: var(--muted); font-size: var(--t-sm); line-height: 1.8; }

/* ---------------------------------------------------------------- rows */
.rows { max-width: var(--readw); margin-inline: auto; }
.row { padding-block: var(--s-5); border-block-start: 1px solid var(--line); }
.row:first-child { border-block-start: none; padding-block-start: 0; }
.row b { display: block; font-weight: var(--w-semi); font-size: var(--t-md); margin-block-end: 6px; }
.row span { color: var(--muted); font-size: var(--t-sm); }

/* ---------------------------------------------------------------- cta band */
.cta-card {
  position: relative;
  max-width: 1000px; margin-inline: auto;
  padding: clamp(44px, 7vw, 88px) clamp(24px, 5vw, 64px);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background:
    radial-gradient(90% 130% at 50% -20%, rgba(34,211,238,.14), transparent 62%),
    var(--panel);
  text-align: center;
  overflow: hidden;
}
.cta-card .eyebrow { margin-block-end: var(--s-5); }
.cta-card h2 {
  font-weight: var(--w-black);
  font-size: clamp(1.9rem, 5.4vw, 3rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  max-width: 18ch; margin-inline: auto;
}
.cta-card p {
  color: var(--muted); font-size: var(--t-md);
  max-width: 48ch; margin: var(--s-5) auto 0;
}
.cta-actions {
  display: flex; gap: var(--s-3);
  justify-content: center; flex-wrap: wrap;
  margin-block-start: var(--s-7);
}

/* ---------------------------------------------------------------- prose (legal) */
.prose { max-width: var(--readw); margin-inline: auto; }
.prose > * + * { margin-block-start: 1.1em; }
.prose h2 { font-weight: var(--w-bold); font-size: 1.5rem; margin-block-start: 1.9em; letter-spacing: -.02em; }
.prose h2:first-child { margin-block-start: 0; }
.prose h3 { font-weight: var(--w-semi); font-size: var(--t-md); color: var(--accent); margin-block-start: 1.5em; }
.prose p, .prose li { color: var(--muted); font-size: var(--t-sm); line-height: 1.85; }
.prose strong { color: var(--text); font-weight: var(--w-semi); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose ul { padding-inline-start: 1.3em; }
.prose li { margin-block-start: .5em; }
.prose .updated { color: var(--muted-2); font-size: var(--t-xs); }

/* ---------------------------------------------------------------- forms */
.form-card {
  padding: clamp(24px, 4vw, 40px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--panel);
}
.field { margin-block-end: var(--s-4); }
.field label {
  display: block; font-size: var(--t-sm); font-weight: var(--w-medium);
  color: var(--muted); margin-block-end: var(--s-2);
}
.field input, .field textarea, .field select {
  width: 100%;
  background: var(--panel-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-input);
  padding: 13px 15px;
  color: var(--text);
  font-family: inherit;
  font-size: var(--t-sm);
  transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted-3); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px rgba(103,232,249,.1);
}
/* phone and email are Latin/numeric even in an RTL form */
.field input[type="tel"], .field input[type="email"] { direction: ltr; text-align: start; }
.field textarea { resize: vertical; min-height: 128px; line-height: 1.7; }
.form-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { min-height: 1.4em; margin-block-start: var(--s-3); font-size: var(--t-sm); font-weight: var(--w-medium); }
.form-msg.ok { color: var(--accent); }
.form-msg.err { color: var(--danger); }

/* ---------------------------------------------------------------- footer */
.footer {
  border-block-start: 1px solid var(--line);
  padding-block: var(--s-9) var(--s-6);
  margin-block-start: var(--s-8);
}
.footer-grid {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-gutter);
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: var(--s-7);
}
.footer-brand .brand { margin-block-end: var(--s-4); }
.footer-brand p {
  color: var(--muted-2); font-size: var(--t-sm);
  line-height: 1.8; max-width: 34ch;
}
.footer-col h4 {
  font-family: var(--font-lat);
  font-size: var(--t-xs); font-weight: var(--w-bold);
  letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--muted-2); margin-block-end: var(--s-5);
}
[dir="rtl"] .footer-col h4 { font-family: var(--font-ar); }
.footer-col a {
  display: block; color: var(--muted); font-size: var(--t-sm);
  margin-block-end: var(--s-3); transition: color var(--d-fast) var(--ease);
}
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  max-width: var(--maxw); margin: var(--s-8) auto 0;
  padding: var(--s-5) var(--s-gutter) 0;
  border-block-start: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  justify-content: space-between; align-items: center;
  color: var(--muted-2); font-size: var(--t-xs);
}
.footer-bottom a:hover { color: var(--accent); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1040px) {
  /* seven nav links don't fit once Arabic labels are in — collapse to the burger */
  .nav-links {
    display: none;
    position: fixed; inset-block-start: var(--nav-h); inset-inline: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--s-2) var(--s-gutter) var(--s-5);
    background: rgba(0,0,0,.97);
    backdrop-filter: blur(18px);
    border-block-end: 1px solid var(--line);
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding-block: var(--s-3); border-block-end: 1px solid var(--line); font-size: var(--t-md); }
  .nav-links a::after { display: none; }
  .nav-burger { display: grid; }
  .steps--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
  .steps, .steps--4 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 400px) {
  /* nowrap is right everywhere else, but "Message us on WhatsApp" is wider than
     a 320px screen's content box — and a nowrap button sets the grid column's
     min-content width, so it pushes the whole page into horizontal scroll. */
  .btn { white-space: normal; padding-inline: var(--s-4); }
}
@media (max-width: 560px) {
  .nav-in { padding-inline: var(--s-gutter-sm); gap: var(--s-2); }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .btn { width: 100%; }
  /* keep the nav bar from overflowing narrow phones */
  .brand { font-size: .95rem; gap: var(--s-2); min-width: 0; }
  .brand .mark { width: 30px; height: 30px; }
  .brand .lat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  nav .wa-btn span { display: none; }
  nav .wa-btn { padding: 10px var(--s-3); }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ===== agent.css ===================================================== */
/* ============================================================================
 *  agent — the live demo panel: orb, waveform, transcript, input row.
 *  This is the product sample, so it gets its own layer. In the hero it plays
 *  the role the reference gives to its mock product UI — except ours is real.
 * ========================================================================== */

.demo {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  border: 1px solid var(--line-2);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(34,211,238,.09), transparent 60%),
    var(--panel);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}

/* header bar — label, subtitle, and the three dots from the reference */
.demo-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  border-block-end: 1px solid var(--line);
}
.demo-head .t {
  font-family: var(--font-lat);
  font-size: var(--t-xs); font-weight: var(--w-bold);
  letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--accent);
}
[dir="rtl"] .demo-head .t { font-family: var(--font-ar); letter-spacing: 0; font-size: var(--t-sm); }
.demo-head .s { display: block; margin-block-start: 4px; color: var(--muted-2); font-size: var(--t-sm); }
.demo-dots { display: flex; gap: 6px; flex: none; margin-block-start: 5px; }
.demo-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-3); }
.demo-dots i:nth-child(1) { background: rgba(248,113,113,.5); }
.demo-dots i:nth-child(2) { background: rgba(251,191,36,.5); }
.demo-dots i:nth-child(3) { background: rgba(52,211,153,.5); }

.demo-body { padding: var(--s-6); }
.demo-orb {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-4); margin-block-end: var(--s-5);
}

/* ---------------------------------------------------------------- orb */
.orb {
  position: relative;
  width: min(40vw, 148px); height: min(40vw, 148px);
  border: none; background: none; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.orb-core {
  position: absolute; inset: 10%; border-radius: 50%;
  background: radial-gradient(circle at 50% 34%, #12262B, #05070A 76%);
  box-shadow: 0 0 70px rgba(34,211,238,.16), inset 0 2px 40px rgba(0,0,0,.8);
  transition: transform var(--d) var(--ease);
}
.orb-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(103,232,249,.45);
  box-shadow: 0 0 34px rgba(34,211,238,.2);
}
.orb-ring.two { inset: -14px; border-color: rgba(103,232,249,.14); }
.orb canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 50%; pointer-events: none;
}
.orb-dot {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); opacity: 0; transition: .2s;
}
.orb-glyph { position: relative; color: var(--accent); opacity: .95; transition: opacity .2s; }
.orb-glyph svg { width: 28px; height: 28px; }

/* four states, driven by setState() in js/agent/orb.js */
.orb-idle .orb-ring { animation: pulse 3.6s ease-in-out infinite; }
.orb-idle .orb-ring.two { animation: pulse 3.6s ease-in-out infinite .3s; }
.orb-thinking .orb-ring { border-color: var(--accent); animation: pulse 1.5s ease-in-out infinite; }
.orb-listening .orb-ring { border-color: var(--accent-soft); animation: pulse 1s ease-in-out infinite; }
.orb-listening .orb-core { transform: scale(1.05); }
.orb-speaking .orb-ring { border-color: var(--accent-soft); animation: none; }
.orb-speaking .orb-glyph { opacity: 0; }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.04); opacity: .9; } }

.orb-hint {
  font-size: var(--t-sm); font-weight: var(--w-semi);
  color: var(--accent); min-height: 1.6em;
}

/* ---------------------------------------------------------------- transcript */
.convo { max-width: var(--convow); margin-inline: auto; }
.transcript {
  display: flex; flex-direction: column; gap: var(--s-2);
  max-height: 300px; min-height: 0; overflow-y: auto;
  padding: var(--s-1) 2px; scroll-behavior: smooth;
  /* The log auto-scrolls to the newest line, so older ones get cut by the top
     edge — which reads as a rendering bug rather than as scrolled content.
     Fading the top edge makes it read as depth. The 14px fade lands inside the
     first bubble's padding, so it never touches text when nothing is scrolled. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 26px);
  scrollbar-width: thin;
  scrollbar-color: var(--line-3) transparent;
}
.transcript:empty { display: none; }

.line {
  max-width: 90%;
  padding: 10px var(--s-4);
  border-radius: var(--r-sm);
  font-size: var(--t-sm); line-height: 1.7;
  white-space: pre-wrap; word-wrap: break-word;
}
/* Visitor one side, agent the other — mirrored in RTL so the agent always sits
   on the side the reader's eye ends on. */
.line.you {
  align-self: flex-start;
  background: var(--panel-3);
  border: 1px solid var(--line);
  color: var(--muted);
}
[dir="rtl"] .line.you { align-self: flex-end; }
.line.bot {
  align-self: flex-end;
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
}
[dir="rtl"] .line.bot { align-self: flex-start; }
.line.thinking { color: var(--muted-2); }
.line.playing { border-color: var(--accent); box-shadow: 0 0 20px -6px var(--accent-glow); }

.listen {
  display: inline-flex; align-items: center; gap: 6px;
  /* it flows inline right after the message text — needs its own breathing
     room on the leading edge, or it collides with the last word */
  margin-block-start: var(--s-2);
  margin-inline-start: var(--s-2);
  font-size: var(--t-xs); font-weight: var(--w-semi);
  color: var(--accent);
  background: none; border: none; padding: 0; cursor: pointer;
}
.listen:hover { text-decoration: underline; }
.listen .ico { font-size: 1.1em; }

/* auto-play sample-conversation label (UI-only demo, cleared on first real turn) */
.sample-tag {
  align-self: center; margin-block: 2px var(--s-1);
  font-family: inherit; font-size: .68rem; font-weight: var(--w-bold);
  letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--muted-2); background: rgba(255,255,255,.03);
  border: 1px solid var(--line); border-radius: var(--pill);
  padding: 3px 12px;
}

/* ---------------------------------------------------------------- input row */
.input-row { display: flex; gap: var(--s-2); margin-block-start: var(--s-4); }
.input-row input {
  flex: 1; min-width: 0;
  background: var(--panel-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-input);
  padding: 12px var(--s-4);
  color: var(--text); font-family: inherit; font-size: var(--t-sm);
  transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.input-row input::placeholder { color: var(--muted-3); }
.input-row input:focus {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px rgba(103,232,249,.1);
}

.icon-btn {
  width: 46px; height: 46px; flex: none;
  border-radius: var(--r-input);
  border: 1px solid var(--line-2);
  background: var(--panel-3); color: var(--muted);
  cursor: pointer; display: grid; place-items: center;
  transition: var(--d-fast) var(--ease);
}
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn:hover { border-color: var(--accent-line); color: var(--accent); }
.icon-btn.send {
  background: linear-gradient(180deg, var(--accent-soft), var(--accent-deep));
  color: var(--on-accent); border-color: transparent;
  box-shadow: 0 6px 22px -8px var(--accent-glow);
}
.icon-btn.send:hover { transform: translateY(-1px); }
/* the send arrow points "forward" — flip it out of RTL */
[dir="ltr"] .icon-btn.send svg { transform: scaleX(-1); }
.icon-btn.muted { color: var(--muted-3); border-style: dashed; }

.demo-note {
  text-align: center; color: var(--muted-2);
  font-size: var(--t-xs); line-height: 1.7;
  margin: var(--s-4) auto 0;
}
.demo-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* A standalone demo (on the industry pages, not in the hero) needs its own
   width cap — in the hero the grid column already provides one. */
.demo--standalone { max-width: var(--demow); margin-inline: auto; }

@media (max-width: 1040px) {
  .transcript { max-height: 42vh; }
}

/* ---------------------------------------------------------------- ?debug=1 overlay */
/* Only ever in the DOM when ?debug=1 is in the URL. It exists so per-turn
   latency can be read off a real iPhone over cellular, with no Mac attached. */
.dbg-panel {
  position: fixed; inset-inline: var(--s-2); inset-block-end: var(--s-2);
  z-index: var(--z-debug);
  max-height: 46vh; overflow: auto;
  background: rgba(5,6,8,.96);
  color: var(--text);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  padding: 10px var(--s-3);
  font: 11px/1.5 ui-monospace, Menlo, monospace;
  box-shadow: 0 10px 40px rgba(0,0,0,.8);
}
.dbg-head { display: flex; gap: 10px; align-items: center; margin-block-end: 6px; }
.dbg-head b { color: var(--accent); }
.dbg-btn {
  background: transparent; color: var(--text);
  border: 1px solid var(--line-2); border-radius: 6px;
  padding: 3px 9px; font: inherit; cursor: pointer;
}
.dbg-btn--go {
  margin-inline-start: auto;
  background: var(--accent); color: var(--on-accent); border: 0;
}
.dbg-panel table { width: 100%; border-collapse: collapse; }
.dbg-panel th { text-align: left; color: var(--muted-2); font-weight: var(--w-normal); }
.dbg-panel th:not(:first-child), .dbg-panel td:not(:first-child) { text-align: right; }
.dbg-panel td.w { color: var(--danger); }
.dbg-last { margin-block-start: 6px; color: var(--muted-2); }

/* ===== pages.css ===================================================== */
/* ============================================================================
 *  pages — the few rules that belong to one page rather than the system.
 *  Keep this file small. If something here gets used twice, promote it to
 *  components.css.
 * ========================================================================== */

/* ---------------------------------------------------------------- contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  max-width: 980px;
  margin-inline: auto;
  align-items: start;
}
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.contact-side .row b { font-size: var(--t-md); }
.contact-side .row span a { color: var(--accent); }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .field-pair { grid-template-columns: 1fr; gap: 0; }
}

/* ---------------------------------------------------------------- industry pages */
/* clinics / salons / restaurants share one layout: a list of leaks where the
   cost of each missed call is the point, then the live demo, then the CTA. */
.pain { max-width: var(--readw); margin-inline: auto; display: grid; gap: var(--s-3); }
.pain-item {
  display: flex; gap: var(--s-4);
  align-items: flex-start;
  padding: var(--s-5);
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--panel);
  transition: border-color var(--d) var(--ease);
}
.pain-item:hover { border-color: var(--line-2); }
.pain-item .mark-x {
  flex: none; width: 28px; height: 28px; border-radius: var(--r-xs);
  display: grid; place-items: center;
  color: var(--danger);
  background: rgba(248,113,113,.08);
  border: 1px solid rgba(248,113,113,.22);
  margin-block-start: 2px;
}
.pain-item .mark-x svg { width: 14px; height: 14px; }
.pain-item b { display: block; font-weight: var(--w-semi); font-size: var(--t-md); margin-block-end: 6px; }
.pain-item p { color: var(--muted); font-size: var(--t-sm); line-height: 1.75; }