/* NoriClinic public site — the landing page (views/site/landing*.php) and,
   from the "Inner pages" section down, every page drawn by views/site/layout.php.
   Where an inner page has the same component as the landing, it shares the
   landing's rule (grouped selectors) rather than restating it. */
/* ---------- Tokens ---------- */
:root {
  --accent: #0f5f57;          /* existing brand accent */
  --accent-ink: #0b4a44;
  --accent-soft: #e3efec;
  --accent-line: #b9d6d0;
  --on-accent: #ffffff;       /* text on solid accent fills */
  /* The logo (views/_brand.php): the brand kit's COLOUR version here, its
     REVERSED version in both dark blocks below. */
  --logo-cradle: #0f5f57; --logo-head: #2a9d8a; --logo-nori: #0f5f57; --logo-clinic: #5c6b67;
  --bg: #faf8f4;              /* warm white */
  --bg-alt: #f2eee6;
  --surface: #ffffff;
  --ink: #15201e;
  --ink-2: #3c4845;
  --muted: #66716e;
  --line: #e4ded3;
  --warn: #9a4a12;
  --warn-soft: #fbecdd;
  --danger: #a4352b;
  --danger-soft: #f8e3e0;
  --ok: #1d6b4a;
  --ok-soft: #e1f1e8;
  --paper: #fff7e2;
  --dark: #0d1917;
  --dark-2: #13231f;
  --dark-ink: #eef4f2;
  --dark-muted: #9fb3ae;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(21,32,30,.06), 0 12px 32px -12px rgba(21,32,30,.18);
  --font-head: "Readex Pro", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Readex Pro", system-ui, sans-serif;
  --max: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #3fb8a6; --accent-ink: #7cc9bd; --accent-soft: #15302b; --accent-line: #245049; --on-accent: #06120f;
    --bg: #0f1614; --bg-alt: #131d1a; --surface: #18221f; --ink: #eaf1ef; --ink-2: #c3cfcb;
    --logo-cradle: #3fb8a6; --logo-head: #8fe3cf; --logo-nori: #f7f9fc; --logo-clinic: #93a1b8;
    --muted: #90a09b; --line: #26332f; --warn: #f0a868; --warn-soft: #3a2616;
    --danger: #f08b80; --danger-soft: #3a1c19; --ok: #7fd1a8; --ok-soft: #173327; --paper: #2a2619;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 40px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  --accent: #3fb8a6; --accent-ink: #7cc9bd; --accent-soft: #15302b; --accent-line: #245049; --on-accent: #06120f;
  --bg: #0f1614; --bg-alt: #131d1a; --surface: #18221f; --ink: #eaf1ef; --ink-2: #c3cfcb;
  --logo-cradle: #3fb8a6; --logo-head: #8fe3cf; --logo-nori: #f7f9fc; --logo-clinic: #93a1b8;
  --muted: #90a09b; --line: #26332f; --warn: #f0a868; --warn-soft: #3a2616;
  --danger: #f08b80; --danger-soft: #3a1c19; --ok: #7fd1a8; --ok-soft: #173327; --paper: #2a2619;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 40px -12px rgba(0,0,0,.6);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 17px; line-height: 1.8;
  overflow-x: clip;
}
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.35; margin: 0; font-weight: 600; letter-spacing: 0; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap, .site-wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow, .site-eyebrow { font-family: var(--font-head); font-size: 14px; font-weight: 500; color: var(--accent); display: inline-flex; align-items: center; gap: 8px; }
.eyebrow::before, .site-eyebrow::before { content: ""; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.lead, .site-lead { font-size: clamp(17px, 1.6vw, 19px); color: var(--ink-2); max-width: 58ch; }
.sr-only, .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.latin { font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; direction: ltr; unicode-bidi: isolate; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  font-family: var(--font-head); font-size: 16px; font-weight: 500; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; transition: transform .2s, background .2s, border-color .2s;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-ink); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--accent); }
.btn:active { transform: scale(.98); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.site-header.scrolled { border-bottom-color: var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-head); font-weight: 600; font-size: 20px; direction: ltr; }
.brand img { height: 30px; width: auto; }
/* The slogan under the logo. The header is a fixed 68px, which fits the 30px
   mark and one small line, so the header does not grow. It drops out where
   the header is tight (below 520px, with the sign-in link); the footer and
   the closing heading still carry it. */
.brand:has(.brand-tag) { flex-direction: column; align-items: center; gap: 3px; }
.brand-tag { unicode-bidi: plaintext; font-family: var(--font-body); font-size: 12px; font-weight: 400; line-height: 1.2; color: var(--muted); white-space: nowrap; }
@media (max-width: 519.98px) { .brand-tag { display: none; } }
.nav-links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav-links a, .nav-lang, .nav-signin { text-decoration: none; color: var(--ink-2); font-size: 15px; }
.nav-links a { display: inline-block; padding: 12px 0; white-space: nowrap; }
.nav-links a:hover, .nav-links a[aria-current="true"], .nav-links a[aria-current="page"], .nav-lang:hover, .nav-signin:hover { color: var(--accent); }
.nav-links a[aria-current="true"], .nav-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; }
.skip { position: fixed; top: 10px; inset-inline-start: 10px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--accent); color: var(--on-accent); text-decoration: none; transform: translateY(-160%); transition: transform .2s; }
.skip:focus { transform: none; }
.trust { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--ink-2); }
.trust li { display: inline-flex; align-items: center; gap: 7px; }
.trust li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.mcta { display: none; }
@media (max-width: 900px) {
  .mcta { display: flex; position: fixed; inset-inline: 12px; bottom: 12px; z-index: 60; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 10px 10px 16px; padding-inline-start: 16px; border-radius: 16px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); box-shadow: var(--shadow); transform: translateY(140%); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
  .mcta.show { transform: none; }
  .mcta span { font-size: 14px; color: var(--ink-2); line-height: 1.4; }
  .mcta .btn { min-height: 44px; padding: 0 18px; flex-shrink: 0; }
  footer { padding-bottom: 96px; }
}
.nav .btn { min-height: 42px; padding: 0 18px; font-size: 15px; }
.nav-end { display: flex; align-items: center; gap: 18px; }
/* Language switch and sign-in: 44px targets; colour and hover shared with
   .nav-links a. */
.nav-lang { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-weight: 600; letter-spacing: .04em; }
.nav-signin { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
/* With EN, sign-in and the button beside them the links need about 900px of
   their own (more in English), so they fold away below 1000px, not 900px. */
@media (max-width: 999.98px) { .nav-links { display: none; } }
/* Too narrow for the logo, EN, sign-in and the button on one line. Sign-in
   goes, as in the site layout's header: a returning user finds it in the
   footer, and a new visitor's next step is the button. */
@media (max-width: 519.98px) { .nav-signin { display: none; } }
/* Below 380px (the site layout's own compact point) the logo, EN and the
   button only fit on one line with tighter spacing — EN keeps its 44px
   target, so it needs no gap of its own. */
@media (max-width: 379.98px) {
  .nav { gap: 8px; } .nav-end { gap: 0; } .nav .btn { padding: 0 12px; font-size: 14px; }
  /* 26px — the app sidebar's size — so a longer button label (English's
     "Request access") still fits on one line. */
  .brand .brandmark-svg { height: 26px; width: auto; }
}

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(40px, 7vw, 88px) 0 clamp(56px, 8vw, 110px); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.hero h1 { font-size: clamp(36px, 5.2vw, 64px); font-weight: 600; margin: 18px 0 20px; }
.hero h1 em { font-style: normal; color: var(--accent); }
/* The English headline has about twice the Arabic's letters. */
html[lang="en"] .hero h1 { font-size: clamp(34px, 4.2vw, 52px); }
.hero .lead { margin-bottom: 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-note { font-size: 14px; color: var(--muted); margin-top: 14px; }
/* What the clinic gets: four short outcomes, each with the accent tick. */
.values { list-style: none; margin: -8px 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 16px; font-weight: 500; color: var(--ink); }
.values li { display: inline-flex; align-items: center; gap: 8px; }
.values li::before { content: "✓"; content: "✓" / ""; /* decorative: not read aloud where supported */ color: var(--accent); font-weight: 700; }

/* Exploded 3D stack */
.stack-scene { position: relative; height: clamp(360px, 44vw, 540px); perspective: 1800px; }
.stack {
  position: absolute; inset: 0; margin: auto; width: min(86%, 420px); height: 62%;
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--tilt, 56deg) + var(--my, 0deg))) rotateZ(calc(38deg + var(--mx, 0deg)));
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.layer {
  position: absolute; inset: 0; border-radius: 18px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow); padding: 16px 18px;
  transform: translateZ(calc(var(--i) * var(--gap, 90px)));
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.layer-title { font-family: var(--font-head); font-size: 13px; font-weight: 600; margin-bottom: 10px; display: flex; justify-content: space-between; color: var(--ink); }
.layer-title span { color: var(--muted); font-weight: 400; }
.hero-caption { position: absolute; bottom: 0; inset-inline: 0; text-align: center; font-size: 13px; color: var(--muted); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .stack-scene { height: 340px; margin-top: 8px; overflow: clip; }
  .stack { width: 72%; }
}

/* ---------- Mini UI primitives (shared by hero + product screens) ---------- */
.ui { font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.ui-rows { display: grid; gap: 6px; }
.appt { display: grid; grid-template-columns: 48px 1fr auto; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 9px; background: var(--bg); border: 1px solid var(--line); }
.appt time { color: var(--muted); font-size: 11.5px; }
.appt b { font-weight: 600; }
.appt small { display: block; color: var(--muted); font-size: 11px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.wait { background: var(--accent-soft); color: var(--accent); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.bad { background: var(--danger-soft); color: var(--danger); }
.chip.muted { background: var(--bg-alt); color: var(--muted); }
.bar { height: 7px; border-radius: 4px; background: var(--bg-alt); }
.bar.a { background: var(--accent-line); }
.ui-btn { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 8px; font-size: 11.5px; font-weight: 500; border: 1px solid var(--line); background: var(--surface); }
.ui-btn.p { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ---------- Section scaffolding ---------- */
section { position: relative; }
section[id] { scroll-margin-top: 68px; }
.section { padding: clamp(72px, 10vw, 140px) 0; }
.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head h2 { font-size: clamp(28px, 3.6vw, 44px); margin: 14px 0 16px; }
/* Hidden-until-revealed only when a script exists to reveal it. Unconditional,
   this left every .reveal block — the FAQ, the plans, section heads — invisible
   to anyone reading without JS. A browser that predates (scripting) skips the
   block and simply shows everything, without the fade. */
@media (scripting: enabled) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
  .reveal.in { opacity: 1; transform: none; }
}

/* ---------- Scene 1: fragments → one system ---------- */
.converge { height: 320vh; background: var(--bg-alt); }
.converge-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; grid-template-columns: 1fr 1.35fr; align-items: center; gap: clamp(20px, 4vw, 56px); max-width: var(--max); margin: 0 auto; padding: 68px var(--gutter) 24px; }
.converge-copy { position: relative; min-height: 280px; }
.converge-copy > div { position: absolute; inset: 0; transition: opacity .5s, transform .5s; }
.converge-copy h2 { font-size: clamp(26px, 3.2vw, 40px); margin: 14px 0 16px; }
.converge-copy .step-b { opacity: 0; transform: translateY(14px); }
.converge.solved .step-a { opacity: 0; transform: translateY(-14px); }
.converge.solved .step-b { opacity: 1; transform: none; }
.frag-field { position: relative; perspective: 1400px; }
.frag-frame {
  position: absolute; inset: -18px; border-radius: 22px; border: 1.5px solid var(--accent-line);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  opacity: var(--frame, 0); transform: scale(calc(.96 + var(--frame, 0) * .04)); transition: opacity .2s;
}
.frag-frame span { position: absolute; top: -13px; inset-inline-start: 20px; background: var(--bg-alt); padding: 0 10px; font-family: var(--font-head); font-weight: 600; color: var(--accent); font-size: 15px; direction: ltr; }
.frag-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; transform-style: preserve-3d; }
.frag { height: 128px; transform-style: preserve-3d; will-change: transform; }
.frag-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; }
.face { position: absolute; inset: 0; border-radius: 14px; padding: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--shadow); }
.face.front { background: var(--surface); border: 1px dashed #c9bfae; color: var(--ink-2); font-size: 14px; }
.face.front .tag { font-size: 12px; color: var(--muted); }
.face.front.paper { background: var(--paper); font-family: var(--font-head); }
.face.front.chat { background: var(--surface); }
.face.front .scribble { height: 6px; border-radius: 3px; background: #d8cdb9; margin-top: 6px; }
.face.back { transform: rotateY(180deg); background: var(--surface); border: 1px solid var(--accent-line); }
.face.back b { font-family: var(--font-head); font-size: 16px; font-weight: 600; color: var(--ink); }
.face.back .tag { font-size: 12px; color: var(--accent); }
.face.back .dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--accent); display: grid; place-items: center; }
.face.back .dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.converge-progress { position: absolute; bottom: 22px; inset-inline: 0; margin: 0 auto; width: 140px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.converge-progress i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--accent); }

@media (max-width: 900px) {
  .converge { height: 300vh; }
  .converge-stage { grid-template-columns: 1fr; align-content: start; gap: 18px; padding-top: 84px; }
  .converge-copy { min-height: 262px; }
  .converge-copy h2 { font-size: 24px; }
  .converge-copy .lead { font-size: 15.5px; }
  .frag-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .frag { height: 92px; }
  .face { padding: 10px; }
  .face.back b { font-size: 14px; }
  .face.front { font-size: 12.5px; }
}

/* Clickable module cards */
.frag { position: relative; }
.frag-hit { position: absolute; inset: 0; z-index: 3; border: 0; padding: 0; margin: 0; background: none; border-radius: 14px; cursor: pointer; pointer-events: none; transform: translateZ(2px); }
.converge.solved .frag-hit { pointer-events: auto; }
.frag-hit:hover + .frag-inner .face.back, .frag-hit:focus-visible + .frag-inner .face.back { border-color: var(--accent); box-shadow: 0 18px 40px -18px rgba(15,95,87,.55); }
.face.back .more { display: block; margin-top: 6px; font-size: 12px; font-weight: 500; color: var(--accent); opacity: .75; }
.frag-hit:hover + .frag-inner .more { opacity: 1; }
.tap-hint { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: 15px; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); padding: 6px 14px; border-radius: 999px; }
/* Once the cards have settled they should look pressable: each dot pings in
   turn, the hint pings with them, and a hovered card lifts toward the reader. */
.face.back { transition: border-color .25s, box-shadow .25s, transform .25s; }
.frag-hit:hover + .frag-inner .face.back, .frag-hit:focus-visible + .frag-inner .face.back { transform: rotateY(180deg) translateZ(10px); }
@keyframes frag-ping {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  70%, 100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 0%, transparent); }
}
.converge.solved .face.back .dot { animation: frag-ping 3s ease-out infinite; }
.converge.solved .frag:nth-child(2) .face.back .dot { animation-delay: .5s; }
.converge.solved .frag:nth-child(3) .face.back .dot { animation-delay: 1s; }
.converge.solved .frag:nth-child(4) .face.back .dot { animation-delay: 1.5s; }
.converge.solved .frag:nth-child(5) .face.back .dot { animation-delay: 2s; }
.converge.solved .frag:nth-child(6) .face.back .dot { animation-delay: 2.5s; }
.tap-hint::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: frag-ping 2s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .converge.solved .face.back .dot, .tap-hint::before { animation: none; }
  .frag-hit:hover + .frag-inner .face.back, .frag-hit:focus-visible + .frag-inner .face.back { transform: rotateY(180deg); }
}
/* Phones have no hover, so the invitation has to be written on the card. The
   92px card holds the name and the label, not the dot and the one-line
   description as well (English overflowed by up to 49px). */
@media (max-width: 900px) {
  .face.back .dot, .face.back .tag { display: none; }
  .face.back b { display: block; line-height: 1.3; }
  .face.back .more { margin-top: 4px; font-size: 11.5px; opacity: 1; }
  .tap-hint { font-size: 13.5px; margin-top: 10px; }
}

/* The waiting-list panel's three questions. */
.ex-faq { margin: 20px 0 0; display: grid; gap: 8px; }
.ex-faq div { padding: 10px 14px; border-radius: 12px; background: var(--bg-alt); }
.ex-faq dt { font-family: var(--font-head); font-weight: 600; font-size: 14.5px; color: var(--ink); }
.ex-faq dd { margin: 2px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }

/* ---------- Module explorer (dialog) ---------- */
html.modal-open { overflow: hidden; }
.explorer { width: min(1120px, calc(100vw - 32px)); max-width: none; height: min(760px, calc(100dvh - 32px)); max-height: none; padding: 0; border: 0; border-radius: 22px; background: var(--bg); color: var(--ink); box-shadow: 0 40px 120px -30px rgba(0,0,0,.5); overflow: hidden; }
.explorer[open] { display: flex; flex-direction: column; animation: exIn .35s cubic-bezier(.2,.7,.2,1); }
.explorer::backdrop { background: rgba(8,18,16,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
@keyframes exIn { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.ex-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.ex-tabs { display: flex; gap: 6px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.ex-tabs::-webkit-scrollbar { display: none; }
.ex-tabs button { flex-shrink: 0; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-2); font-family: var(--font-head); font-size: 14px; cursor: pointer; }
.ex-tabs button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ex-close { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.ex-body { flex: 1; overflow-y: auto; }
.ex-panel { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(20px, 3vw, 44px); padding: clamp(20px, 3vw, 40px); align-items: center; min-height: 100%; }
.ex-panel[hidden] { display: none; }
.ex-copy h3 { font-size: clamp(24px, 2.6vw, 32px); margin: 10px 0 12px; }
.ex-copy .lead { font-size: 17px; }
.ex-steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; counter-reset: st; }
.ex-steps li { counter-increment: st; display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; font-size: 16px; color: var(--muted); transition: color .3s; }
.ex-steps li::before { content: counter(st, arabic-indic); width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-family: var(--font-head); font-size: 14px; transition: all .3s; }
.ex-steps li.on { color: var(--ink); }
.ex-steps li.on::before { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ex-replay { margin-top: 22px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-2); font-family: var(--font-head); font-size: 14px; cursor: pointer; }
.ex-demo { position: relative; perspective: 1400px; }
.ex-stage { transform: rotateY(8deg) rotateX(3deg); transform-style: preserve-3d; transition: transform .6s; }
.ex-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface); }
.ex-foot .btn { min-height: 44px; }
.ex-nav { display: flex; gap: 8px; }
/* timeline engine */
.ex-demo [data-at]:not(.on) { display: none !important; }
.ex-demo [data-at].on { animation: pop .45s cubic-bezier(.2,.7,.2,1); }
.ex-demo .off { display: none !important; }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } }
.tapable { position: relative; }
.tapable.tap { animation: tap .7s ease; }
.tapable.tap::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(15,95,87,.35); animation: ripple .7s ease-out forwards; pointer-events: none; }
@keyframes tap { 40% { transform: scale(.92); } }
@keyframes ripple { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.ex-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 14px; }
.ex-card + .ex-card { margin-top: 12px; }
.ex-card-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; font-family: var(--font-head); font-size: 13.5px; font-weight: 600; }
.ex-card-h span { font-family: var(--font-body); font-weight: 400; color: var(--muted); font-size: 12px; }
.row-hl { animation: rowhl 2s ease; }
@keyframes rowhl { 0%, 60% { background: var(--accent-soft); border-color: var(--accent-line); } }
.appt .acts { display: flex; gap: 6px; align-items: center; }
/* phone / chat */
.duo { display: grid; grid-template-columns: 250px 1fr; gap: 16px; align-items: center; }
.phone { width: 250px; height: 460px; border-radius: 34px; background: #0f1f1c; padding: 10px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.5); transform: translateZ(30px); }
.phone-in { height: 100%; border-radius: 26px; overflow: hidden; display: flex; flex-direction: column; background: #efe7dc; }
:root[data-theme="dark"] .phone-in { background: #1b2522; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .phone-in { background: #1b2522; } }
.chat-top { background: #0f5f57; color: #fff; padding: 12px 14px 10px; font-size: 13px; font-family: var(--font-head); display: flex; align-items: center; gap: 8px; }
.chat-top i { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.2); }
.chat-top small { display: block; font-family: var(--font-body); font-size: 10.5px; opacity: .8; }
.chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 10px; overflow: hidden; }
.msg { max-width: 86%; padding: 7px 10px; border-radius: 12px; font-size: 12.5px; line-height: 1.55; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.msg.clinic { align-self: flex-start; background: #fff; color: #1d2422; border-start-start-radius: 4px; }
.msg.patient { align-self: flex-end; background: #d6f1dc; color: #1d2422; border-start-end-radius: 4px; }
.qrs { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 5px; max-width: 92%; }
.qr { font-size: 12px; font-weight: 500; padding: 6px 11px; border-radius: 999px; background: #fff; color: #0f5f57; border: 1px solid #b9d6d0; }
.qr.chosen { background: #0f5f57; color: #fff; }
/* EMR (English clinical terms) */
.emr { direction: ltr; text-align: left; font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; }
.emr-head { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.emr-av { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 600; font-size: 14px; }
.emr-head b { font-family: var(--font-head); font-size: 16px; }
.emr-head small { display: block; color: var(--muted); font-size: 12px; }
.emr-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.emr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.emr-box { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; font-size: 12px; line-height: 1.5; }
.emr-box h6 { margin: 0 0 5px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.emr-box div { display: flex; justify-content: space-between; gap: 8px; }
.emr-box .hi { color: var(--danger); font-weight: 600; }
.emr-audit { margin-top: 10px; font-size: 11.5px; color: var(--muted); display: flex; justify-content: space-between; gap: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }
.roles-mini .role { grid-template-columns: 1fr repeat(3, 56px); }
.roles-mini .role.head span { text-align: center; }
.toggle { width: 34px; height: 20px; border-radius: 999px; background: var(--line); position: relative; flex-shrink: 0; }
.toggle::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: inset-inline-start .3s; }
.toggle.is-on { background: var(--accent); }
.toggle.is-on::after { inset-inline-start: 17px; }
@media (max-width: 900px) {
  .explorer { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .ex-panel { grid-template-columns: 1fr; align-items: start; gap: 18px; }
  .ex-demo { order: -1; }
  .ex-copy h3 { font-size: 22px; margin-top: 4px; }
  .ex-copy .lead { font-size: 15.5px; }
  .ex-replay { margin-top: 12px; }
  .phone { height: 360px; }
  .ex-stage { transform: none; }
  .ex-steps { margin-top: 14px; gap: 6px; }
  .ex-steps li { font-size: 14.5px; }
  .duo { grid-template-columns: 1fr; justify-items: center; }
  .phone { width: 100%; max-width: 300px; height: 400px; }
  .emr-grid { grid-template-columns: 1fr 1fr; }
  .ex-foot .btn-ghost { display: none; }
}

/* ---------- Scene 2: a day in the clinic ---------- */
.day { background: var(--bg); }
.day-intro { padding-top: clamp(72px, 10vw, 130px); }
.day-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(24px, 5vw, 72px); }
.chapters { padding-bottom: 20vh; }
.chapter { min-height: 88vh; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; opacity: .35; transition: opacity .5s; }
.chapter.is-active { opacity: 1; }
.chapter .when { display: inline-flex; gap: 10px; align-items: baseline; font-family: var(--font-head); color: var(--accent); font-weight: 500; font-size: 15px; }
.chapter .when span { color: var(--muted); font-weight: 400; }
.chapter h3 { font-size: clamp(24px, 2.6vw, 32px); margin: 12px 0 14px; }
.chapter p { color: var(--ink-2); max-width: 46ch; }
.chapter .fine { margin-top: 16px; font-size: 14px; color: var(--muted); border-inline-start: 2px solid var(--warn); padding-inline-start: 12px; max-width: 46ch; }

.day-stage { position: sticky; top: 68px; height: calc(100vh - 68px); display: flex; align-items: center; }
.rail { position: absolute; inset-inline-end: -36px; top: 50%; transform: translateY(-50%); display: grid; gap: 10px; }
.rail { gap: 0 !important; }
.rail button { width: 24px; height: 24px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.rail button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--line); transition: background .3s, transform .3s; }
.rail button[aria-current="step"]::before { background: var(--accent); transform: scale(1.35); }
.device-scene { width: 100%; perspective: 1600px; }
.device {
  position: relative; width: 100%; aspect-ratio: 16 / 12; max-height: 76vh;
  transform-style: preserve-3d;
  transform: rotateX(var(--drx, 6deg)) rotateY(var(--dry, 10deg));
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.device-body { position: absolute; inset: 0; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 80px -30px rgba(15,95,87,.35), var(--shadow); transform-style: preserve-3d; }
.app-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.app-bar .clinic { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 500; }
.app-bar .clinic::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.app-bar .who { color: var(--muted); }
.screens { position: absolute; inset: 46px 0 0 0; transform-style: preserve-3d; }
.screen { position: absolute; inset: 0; padding: 16px; opacity: 0; visibility: hidden; transform: translateZ(-80px) translateY(14px); transition: opacity .55s ease, transform .7s cubic-bezier(.2,.7,.2,1), visibility 0s .7s; transform-style: preserve-3d; }
.screen.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .55s ease .1s, transform .7s cubic-bezier(.2,.7,.2,1) .1s, visibility 0s; }
.screen-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.screen-title h4 { font-size: 15px; font-weight: 600; }
.screen-title span { font-size: 12px; color: var(--muted); }

/* Pop-out layer: the one thing each moment is about lifts toward the viewer */
.pop {
  position: absolute; z-index: 2; background: var(--surface); border: 1px solid var(--accent-line); border-radius: 14px;
  box-shadow: 0 24px 50px -18px rgba(15,95,87,.45), var(--shadow); padding: 14px;
  transform: translateZ(0) translateY(16px); opacity: 0;
  transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .5s;
}
.screen.is-active .pop { transform: translateZ(70px); opacity: 1; transition-delay: .7s; }
.pop h5 { font-family: var(--font-head); font-size: 13px; font-weight: 600; margin: 0 0 8px; }
.pop .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.pop .row:first-of-type { border-top: 0; }
.pop .actions { display: flex; gap: 8px; margin-top: 10px; }

/* Day board with live time marker */
.board { position: relative; }
.now-line { position: absolute; inset-inline: 0; height: 0; border-top: 2px solid var(--danger); top: 34%; z-index: 1; animation: now 14s linear infinite alternate; }
.now-line::before { content: attr(data-label); position: absolute; top: -11px; inset-inline-start: -4px; background: var(--danger); color: var(--on-accent); font-size: 10.5px; padding: 1px 7px; border-radius: 999px; }
@keyframes now { from { top: 30%; } to { top: 48%; } }
.appt.cancelled b { text-decoration: line-through; color: var(--muted); }
.appt.flash { animation: flash 1.2s ease 2 .3s; }
@keyframes flash { 50% { background: var(--danger-soft); } }
.offer-state { opacity: 0; transition: opacity .4s 2.2s; }
.screen.is-active .offer-state { opacity: 1; }

.record-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.record-head b { font-family: var(--font-head); font-size: 15px; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tabs span { font-size: 11.5px; padding: 3px 10px; border-radius: 7px; background: var(--bg); border: 1px solid var(--line); color: var(--ink-2); }
.tabs span.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.vitals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vitals div { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; }
.vitals small { display: block; color: var(--muted); font-size: 11px; }
.rx-input { margin-top: 12px; border: 1px solid var(--accent-line); border-radius: 9px; padding: 9px 12px; background: var(--surface); display: flex; justify-content: space-between; gap: 10px; }
.rx-input small { color: var(--muted); }
.pop.warnpop { border-color: #e8c29f; }
.pop.warnpop h5 { color: var(--warn); }

.draft { min-height: 4.5em; font-size: 12.5px; line-height: 1.8; color: var(--ink); background: var(--bg); border-radius: 9px; padding: 8px 10px; border: 1px solid var(--line); }
.draft .caret { display: inline-block; width: 2px; height: 1em; background: var(--accent); vertical-align: middle; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ai-tag { font-size: 11px; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: 999px; }
.status-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ok); }
.status-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }

.roles { display: grid; gap: 6px; }
.role { display: grid; grid-template-columns: 1fr repeat(4, 46px); gap: 6px; align-items: center; padding: 6px 10px; border-radius: 9px; background: var(--bg); border: 1px solid var(--line); }
.role.head { background: transparent; border-color: transparent; color: var(--muted); font-size: 10.5px; }
.role.head span { white-space: nowrap; text-align: center; } /* the 46px columns fit the longest label */
.role i { width: 14px; height: 14px; border-radius: 4px; background: var(--line); justify-self: center; }
.role i.y { background: var(--accent); }
.task { display: flex; gap: 8px; align-items: center; font-size: 12px; padding: 4px 0; }
.task i { width: 13px; height: 13px; border-radius: 4px; border: 1.5px solid var(--muted); }
.task.done i { background: var(--accent); border-color: var(--accent); }
.task.done span { text-decoration: line-through; color: var(--muted); }

.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.kpis div { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.kpis small { display: block; color: var(--muted); font-size: 11px; }
.kpis b { font-family: var(--font-head); font-size: 18px; font-weight: 600; }
.chart { display: flex; align-items: flex-end; gap: 10px; height: 110px; padding: 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.chart div { flex: 1; background: var(--accent-line); border-radius: 6px 6px 2px 2px; height: 0; transition: height 1s cubic-bezier(.2,.7,.2,1); }
.screen.is-active .chart div { height: var(--h); }
.chart div:last-child { background: var(--accent); }
.demo-note { position: absolute; bottom: 10px; inset-inline-end: 16px; font-size: 10.5px; color: var(--muted); }

@media (max-width: 900px) {
  .day-grid { grid-template-columns: 1fr; gap: 0; }
  .day-stage { order: -1; top: 60px; height: auto; z-index: 3; padding: 10px 0 14px; background: linear-gradient(var(--bg) 88%, transparent); }
  .rail { display: none; }
  .device-scene { max-width: 520px; margin: 0 auto; }
  .chapter { min-height: 64vh; justify-content: flex-start; padding-top: 12px; }
  .device { aspect-ratio: 4 / 3.3; max-height: 42vh; }
  .vitals, .screen .ui-rows:not(.board) > .appt:nth-child(n+4), .board > .appt:nth-child(n+5) { display: none; }
  .app-bar { padding: 8px 12px; }
  .screens { top: 36px; }
  .day-stage .hero-caption { display: none; }
  .rx-sign { display: none; }
  .rx-paper { inset-inline: 6%; }
  .ui { font-size: 11.5px; }
  .screen { padding: 12px; }
  .pop { padding: 10px; }
}

/* ---------- Claim verification flags ---------- */
.claim-tag { display: inline-block; margin-inline-start: 8px; font-size: 11.5px; font-weight: 500; color: var(--warn); background: var(--warn-soft); border: 1px dashed var(--warn); padding: 0 8px; border-radius: 6px; vertical-align: middle; font-family: var(--font-body); }
[data-claim].claim-off { display: none !important; }

/* ---------- Printed prescription (3D sheet) ---------- */
.rx-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.rx-paper {
  position: absolute; inset-inline: 12%; top: 46px; bottom: 6%;
  background: #fffdf8; color: #1d2422; border: 1px solid #e6dfd1; border-radius: 6px;
  padding: 14px 18px; box-shadow: 0 30px 60px -24px rgba(21,32,30,.45);
  transform-origin: 50% 100%; transform: rotateX(-78deg) translateY(30px); opacity: 0;
  transition: transform 1s cubic-bezier(.2,.7,.2,1) .5s, opacity .4s .5s;
}
.screen.is-active .rx-paper { transform: translateZ(60px) rotateX(0); opacity: 1; }
.rx-paper header { display: flex; justify-content: space-between; border-bottom: 2px solid var(--accent); padding-bottom: 8px; margin-bottom: 10px; }
.rx-paper header b { font-family: var(--font-head); font-size: 13px; }
.rx-paper header small { display: block; color: #6b726f; font-size: 10.5px; }
.rx-meta { display: flex; justify-content: space-between; font-size: 11px; color: #4a5250; margin-bottom: 10px; }
.rx-mark { font-family: Georgia, serif; font-size: 22px; color: var(--accent); line-height: 1; direction: ltr; }
.rx-line { padding: 6px 0; border-bottom: 1px dotted #d9d1c2; font-size: 11.5px; }
.rx-line .latin { font-weight: 600; }
.rx-line small { display: block; color: #6b726f; }
.rx-sign { position: absolute; bottom: 12px; inset-inline-start: 18px; width: 38%; border-top: 1px solid #9aa19f; font-size: 10px; color: #6b726f; padding-top: 3px; }

/* ---------- Owner activity log ---------- */
.log-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.log-filters span { font-size: 11px; padding: 3px 10px; border-radius: 7px; border: 1px solid var(--line); background: var(--bg); color: var(--ink-2); }
.log-filters span.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.log { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.log-row { display: grid; grid-template-columns: 58px 1fr auto; gap: 10px; align-items: center; padding: 7px 10px; border-top: 1px solid var(--line); background: var(--surface); opacity: 0; transform: translateX(-8px); transition: opacity .4s, transform .4s; }
.log-row:first-child { border-top: 0; }
.screen.is-active .log-row { opacity: 1; transform: none; }
.screen.is-active .log-row:nth-child(2) { transition-delay: .12s; } .screen.is-active .log-row:nth-child(3) { transition-delay: .24s; }
.screen.is-active .log-row:nth-child(4) { transition-delay: .36s; } .screen.is-active .log-row:nth-child(5) { transition-delay: .48s; }
.log-row time { color: var(--muted); font-size: 11px; }
.log-row b { font-weight: 600; }
.log-row small { display: block; color: var(--muted); font-size: 11px; }
.who-chip { font-size: 10.5px; color: var(--muted); }
.pop .sum { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; }
.pop .sum div { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.pop .sum b { font-family: var(--font-head); }
@media (max-width: 900px) { .log-row:nth-child(n+5) { display: none; } }

/* ---------- Automation ---------- */
.auto { background: var(--bg); }
.auto-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.auto-intro { position: sticky; top: 110px; }
.rules { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 14px; }
.rules::before { content: ""; position: absolute; top: 20px; bottom: 20px; inset-inline-start: 19px; width: 2px; background: var(--line); }
.rule { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; }
.rule .node { width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent-line); display: grid; place-items: center; z-index: 1; transition: border-color .4s, background .4s; }
.rule .node::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-line); transition: background .4s, transform .4s; }
.rule.in .node { border-color: var(--accent); }
.rule.in .node::after { background: var(--accent); animation: ping 2.4s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(15,95,87,.35); } 70%, 100% { box-shadow: 0 0 0 12px rgba(15,95,87,0); } }
.rule .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.rule .when-then { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: baseline; }
.rule .k { font-family: var(--font-head); font-size: 12.5px; font-weight: 600; color: var(--muted); }
.rule .k.then { color: var(--accent); }
.rule .v { font-size: 16px; color: var(--ink); }
.rule .human { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
@media (max-width: 900px) { .auto-grid { grid-template-columns: 1fr; } .auto-intro { position: static; } }

/* ---------- Empty-slot calculator ---------- */
.calc { background: var(--dark); color: var(--dark-ink); }
.calc .eyebrow { color: #7cc9bd; }
.calc .lead { color: var(--dark-muted); }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: stretch; }
.calc-form { background: var(--dark-2); border: 1px solid #2a3c37; border-radius: 18px; padding: 26px; display: grid; gap: 22px; }
.field label { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-head); font-size: 15px; margin-bottom: 10px; }
.field output { color: #7cc9bd; font-weight: 600; }
.field small { display: block; color: var(--dark-muted); font-size: 13px; margin-top: 6px; }
.field input[type=range] { width: 100%; accent-color: #3fa597; height: 28px; }
.calc-out { display: grid; gap: 14px; align-content: start; }
.stat { border-radius: 18px; padding: 24px; border: 1px solid #2a3c37; }
.stat.loss { background: #1c1512; border-color: #4a2a22; }
.stat.gain { background: #10261f; border-color: #245049; }
.stat small { display: block; color: var(--dark-muted); font-size: 14px; }
.stat b { display: block; font-family: var(--font-head); font-size: clamp(32px, 4.4vw, 48px); font-weight: 600; line-height: 1.3; margin: 4px 0; }
.stat.loss b { color: #f0a08f; }
.stat.gain b { color: #8fdccd; }
.calc-note { font-size: 13.5px; color: var(--dark-muted); border-inline-start: 2px solid #3fa597; padding-inline-start: 12px; }
@media (max-width: 900px) { .calc-grid { grid-template-columns: 1fr; } }

/* ---------- Roles ---------- */
.people { background: var(--bg-alt); }
.people-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.person { padding: 28px 0 0; padding-inline-end: 28px; }
.person + .person { border-inline-start: 1px solid var(--line); padding-inline-start: 28px; }
.person h3 { font-size: 22px; margin-bottom: 6px; }
.person > p { color: var(--muted); font-size: 15px; margin-bottom: 18px; }
.person ul, .screen-list, .benefit-list, .trust-list, .nope-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.person li, .screen-list li, .benefit-list li, .trust-list li, .nope-list li { padding-inline-start: 20px; position: relative; color: var(--ink-2); font-size: 16px; }
.person li::before, .screen-list li::before, .benefit-list li::before, .trust-list li::before, .nope-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .75em; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--accent); }
@media (max-width: 900px) {
  .people-grid { grid-template-columns: 1fr; }
  .person, .person + .person { padding: 26px 0; border-inline-start: 0; border-bottom: 1px solid var(--line); }
}

/* ---------- Research ---------- */
.research-grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 48px); }
.research-grid .lead { max-width: 64ch; }
.facts { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.facts li { background: var(--surface); padding: 16px; font-size: 14.5px; color: var(--ink-2); }
.facts b { display: block; font-family: var(--font-head); color: var(--ink); font-size: 18px; font-weight: 600; margin-bottom: 2px; }
.qop { justify-self: start; font-family: var(--font-head); font-size: 11.5px; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 2px 10px; border-radius: 999px; }
@media (max-width: 900px) { .facts { grid-template-columns: 1fr 1fr; } }

/* ---------- Research dataset table ---------- */
.dataset { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.ds-bar { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.ds-bar b { font-family: var(--font-head); font-size: 14px; font-weight: 600; }
.ds-query { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.ds-query span:not(.qop) { font-size: 11.5px; padding: 2px 9px; border-radius: 7px; background: var(--bg); border: 1px solid var(--line); }
.ds-scroll { overflow-x: auto; }
.dataset table { width: 100%; border-collapse: collapse; font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dataset th { position: sticky; top: 0; text-align: start; font-family: var(--font-head); font-weight: 500; font-size: 11.5px; color: var(--muted); background: var(--bg); padding: 9px 14px; border-bottom: 1px solid var(--line); }
.dataset td { padding: 9px 14px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.dataset td:first-child { color: var(--accent); font-weight: 600; }
.dataset tbody tr:nth-child(even):not(.ds-more) td { background: color-mix(in srgb, var(--bg) 55%, transparent); }
.dataset tbody tr { opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s; }
.dataset.in tbody tr { opacity: 1; transform: none; }
.dataset.in tbody tr:nth-child(2) { transition-delay: .08s; } .dataset.in tbody tr:nth-child(3) { transition-delay: .16s; }
.dataset.in tbody tr:nth-child(4) { transition-delay: .24s; } .dataset.in tbody tr:nth-child(5) { transition-delay: .32s; }
.dataset.in tbody tr:nth-child(6) { transition-delay: .4s; }
.ds-more td { text-align: center; color: var(--muted); font-size: 12px; border-bottom: 0; }
.ds-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 12px 18px; font-size: 12px; color: var(--muted); background: var(--bg); border-top: 1px solid var(--line); }
.ds-key { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-inline-end: 4px; }
@media (max-width: 900px) { .ds-bar { flex-direction: column; } }

/* ---------- Security (dark rhythm section) ---------- */
.dark { background: var(--dark); color: var(--dark-ink); --line: #23332f; }
.dark .eyebrow { color: #7cc9bd; }
.dark .lead { color: var(--dark-muted); }
.sec-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 80px); }
.controls { list-style: none; margin: 0; padding: 0; border-top: 1px solid #2a3c37; }
.controls li { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 16px 0; border-bottom: 1px solid #2a3c37; }
.controls b { font-family: var(--font-head); font-weight: 500; font-size: 17px; }
.controls span { color: var(--dark-muted); font-size: 14px; }
.not-list { background: var(--dark-2); border: 1px solid #2a3c37; border-radius: 18px; padding: 26px; align-self: start; }
.not-list h3 { font-size: 20px; margin-bottom: 6px; }
.not-list > p { color: var(--dark-muted); font-size: 15px; margin-bottom: 18px; }
.not-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.not-list li { position: relative; padding-inline-start: 26px; font-size: 15.5px; }
.not-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .55em; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #e79a8f; background: linear-gradient(135deg, transparent 45%, #e79a8f 45%, #e79a8f 55%, transparent 55%); }
@media (max-width: 900px) { .sec-grid { grid-template-columns: 1fr; } }

/* ---------- Pricing (rendered from CMS snapshot) ---------- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; align-items: stretch; }
.plan { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.plan.featured { border: 2px solid var(--accent); box-shadow: 0 24px 60px -30px rgba(15,95,87,.5); }
.plan .badge { position: absolute; top: -12px; inset-inline-start: 22px; background: var(--accent); color: var(--on-accent); font-size: 12.5px; font-family: var(--font-head); padding: 3px 12px; border-radius: 999px; }
.plan h3 { font-size: 20px; }
.plan .price { font-family: var(--font-head); font-size: 32px; font-weight: 600; }
.plan .price small { font-size: 14px; color: var(--muted); font-weight: 400; }
.plan .for { color: var(--muted); font-size: 15px; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; color: var(--ink-2); flex: 1; }
.plan li::before { content: "✓"; color: var(--accent); margin-inline-end: 8px; }
.plan .btn { width: 100%; }
.sample-ribbon { display: inline-block; margin-bottom: 18px; font-size: 13px; color: var(--warn); background: var(--warn-soft); border: 1px dashed var(--warn); padding: 4px 12px; border-radius: 8px; }
.offer-banner { margin-bottom: 22px; padding: 14px 18px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent-line); }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 72px); }
.faq details, .faq-item { border-bottom: 1px solid var(--line); }
.faq summary, .faq-item summary { list-style: none; cursor: pointer; padding: 20px 0; font-family: var(--font-head); font-size: 18px; font-weight: 500; display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 48px; }
.faq summary::-webkit-details-marker, .faq-item summary::-webkit-details-marker { display: none; }
.faq summary::after, .faq-item summary::after { content: "+"; color: var(--accent); font-size: 24px; transition: transform .3s; }
.faq details[open] summary::after, .faq-item[open] summary::after { transform: rotate(45deg); }
.faq details p, .faq-item p { padding: 0 0 22px; color: var(--ink-2); max-width: 62ch; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; } }

/* ---------- Final CTA + footer ---------- */
.final, .site-cta-sec { text-align: center; background: var(--bg-alt); }
.final h2, .site-cta-sec h2 { font-size: clamp(30px, 4vw, 48px); max-width: 18ch; margin: 16px auto; }
.final .lead, .site-cta-sec .site-lead { margin: 0 auto 30px; }
.final .hero-actions, .site-cta-sec .site-actions { justify-content: center; }
footer { padding: 44px 0; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--muted); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; align-items: center; }
.foot-id { display: grid; gap: 4px; }
.foot-tag { color: var(--ink-2); }
.foot ul { list-style: none; display: flex; flex-wrap: wrap; gap: 18px; margin: 0; padding: 0; }
.foot a { text-decoration: none; display: inline-block; padding: 12px 0; }
.foot a:hover { color: var(--accent); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dataset tbody tr { opacity: 1; transform: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .converge { height: auto; }
  .converge-stage { position: relative; height: auto; padding-block: 80px; }
  .converge-copy { min-height: 0; }
  .converge-copy > div { position: relative; }
  .converge-copy .step-a { display: none; }
  .converge-copy .step-b { opacity: 1; transform: none; }
  .converge-progress { display: none; }
}

/* Calculator evidence strip */
.evidence { list-style: none; margin: 0 0 34px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #2a3c37; border: 1px solid #2a3c37; border-radius: 18px; overflow: hidden; }
.evidence li { background: var(--dark-2); padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.evidence b { font-family: var(--font-head); font-size: 21px; line-height: 1.4; font-weight: 600; color: #8fdccd; }
.evidence p { color: var(--dark-ink); font-size: 15.5px; line-height: 1.7; }
.evidence a { margin-top: auto; padding-top: 8px; font-size: 13px; color: var(--dark-muted); text-decoration: underline; text-underline-offset: 3px; }
.evidence a:hover { color: #8fdccd; }
.evidence-note { margin: -20px 0 30px; font-size: 13px; color: var(--dark-muted); }
.calc-intro { font-family: var(--font-head); font-size: 17px; color: var(--dark-ink); margin-bottom: 18px; }
@media (max-width: 900px) { .evidence { grid-template-columns: 1fr; } }

/* ---------- Utilities (replace former inline style attributes; CSP style-src-attr safe) ---------- */
.c-muted { color: var(--muted); } .mt-6 { margin-top: 6px; } .mt-8 { margin-top: 8px; } .mt-10 { margin-top: 10px; } .pt-0 { padding-top: 0; }
.w-55 { width: 55%; } .w-62 { width: 62%; } .w-68 { width: 68%; } .w-70 { width: 70%; } .w-80 { width: 80%; } .w-100 { width: 100%; }
.caption-static { position: static; margin-top: 14px; }
.pos-a { inset-inline-start: 8%; bottom: 8%; width: 74%; } .pos-b { inset-inline-start: 5%; bottom: 5%; width: 48%; }
.pos-c { inset-inline-start: 10%; bottom: 10%; width: 66%; } .pos-d { inset-inline-end: 6%; bottom: 6%; width: 70%; }
.pos-e { inset-inline-end: 6%; bottom: 6%; width: 58%; } .pos-f { inset-inline-end: 5%; bottom: 6%; width: 80%; }
.h2-lg { font-size: clamp(28px, 3.6vw, 44px); margin: 14px 0 16px; } .h2-faq { font-size: clamp(28px, 3.4vw, 40px); margin: 14px 0 16px; }
.h2-md { font-size: clamp(26px, 3.2vw, 40px); margin: 14px 0 16px; }
.rx-h { font-size: 15px; font-weight: 600; margin: 0; }
.h5-flex { display: flex; justify-content: space-between; align-items: center; }
.chips-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.note-xs { color: var(--muted); font-size: 11px; margin-top: 8px; }
.fine-ok { border-color: var(--accent) !important; }
.li-0 { --i: 0; } .li-1 { --i: 1; } .li-2 { --i: 2; }
.h-52 { --h: 52%; } .h-58 { --h: 58%; } .h-64 { --h: 64%; } .h-76 { --h: 76%; }

/* ---- NoriClinic logo (views/_brand.php) ------------------------------------
   The brand kit's own artwork. This page does not load app.css, so the logo's
   four colours come from this page's own --logo-* tokens: the kit's COLOUR
   version on the paper ground, its REVERSED version when the page goes dark.
   Never recolour outside the kit's variants. */
.brand .brandmark { display: inline-flex; align-items: center; line-height: 1; }
.brand .brandmark-svg { flex: none; display: block; }
.brandmark .bm-cradle { fill: var(--logo-cradle); }
.brandmark .bm-head   { fill: var(--logo-head); }
.brandmark .bm-nori   { fill: var(--logo-nori); }
.brandmark .bm-clinic { fill: var(--logo-clinic); }

/* ==========================================================================
   Inner pages — views/site/layout.php and the views it wraps
   (features, how-it-works, security, about, pricing, resources, FAQ, blog,
   contact). Same tokens, type and rhythm as the landing; only what the
   landing has no equivalent for is defined here.
   ========================================================================== */
/* Narrow sections keep a readable measure but start at the same edge as the
   page heading, as the landing's section heads do; the closing CTA centres. */
.site-narrow > * { max-width: 780px; }
.site-cta-sec .site-narrow > * { margin-inline: auto; }
.site-hero { padding: clamp(44px, 7vw, 96px) 0 clamp(36px, 5vw, 64px); }
.site-hero h1 { font-size: clamp(34px, 4.6vw, 56px); margin: 16px 0 18px; max-width: 22ch; }
.site-hero .site-lead { max-width: 62ch; }
.site-sec { padding: clamp(48px, 7vw, 96px) 0; }
.site-sec.tint { background: var(--bg-alt); }
.site-sec.tint + .site-cta-sec { padding-top: 0; }
/* flow-root keeps the heading's top margin inside the section, so no strip
   of page colour shows between two tinted blocks. */
.site-cta-sec { display: flow-root; }
.site-sec h2 { font-size: clamp(26px, 3.2vw, 38px); margin-bottom: 18px; }
.site-sec h3 { font-size: 20px; margin-bottom: 8px; }
.site-sec p { color: var(--ink-2); }
.site-sec p + p { margin-top: 14px; }
.site-after { margin-top: 22px; }
.site-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 26px; }
.site-fineprint { margin-top: 16px; font-size: 13.5px; color: var(--muted); }
/* A quiet "read more" link. Its arrow is drawn here, pointing along the
   reading direction, so the text itself carries none. */
.site-quiet-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--accent); font-family: var(--font-head); font-weight: 500; text-decoration: none; }
.site-quiet-link::after { content: "←"; }
[dir="ltr"] .site-quiet-link::after { content: "→"; }
.site-quiet-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-big { font-family: var(--font-head); font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; line-height: 1.45; color: var(--accent); margin-bottom: 22px; }

/* The one-line reframe ("booking software saves the appointment. That's all.") */
.pivot { background: var(--dark); }
.pivot .pivot-line { font-family: var(--font-head); font-size: clamp(24px, 3vw, 36px); font-weight: 600; line-height: 1.4; color: var(--dark-ink); }
.pivot .pivot-body { margin-top: 16px; font-size: 18px; color: var(--dark-muted); }
.pivot-body strong { color: #8fdccd; font-weight: 600; }

/* A labelled list: bold lead-in, then the sentence. */
.mech-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mech-list li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; color: var(--ink-2); }
.mech-list strong, .benefit-list strong, .step-list strong { display: block; font-family: var(--font-head); font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.step-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: step; }
.step-list li { counter-increment: step; position: relative; padding-inline-start: 52px; color: var(--ink-2); min-height: 36px; }
.step-list li::before { content: counter(step); position: absolute; inset-inline-start: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-family: var(--font-head); font-weight: 600; }
.nope-list li::before { border-color: var(--danger); }

/* Cards: four daily moments, the three roles, the plans. */
.cap-list, .role-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.role-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cap, .role-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.cap h3, .role-card h3 { font-size: 19px; }
.cap p, .role-card p { font-size: 16px; }
@media (max-width: 760px) { .cap-list, .role-list { grid-template-columns: 1fr; } }
.cap-head { margin: 36px 0 12px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 17px; color: var(--accent); }
.site-sec h2 + .cap-head { margin-top: 8px; padding-top: 0; border-top: 0; }

/* Pricing (views/site/pricing.php): the landing's plan card, in a grid. */
.plans-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.plan.is-featured { border: 2px solid var(--accent); box-shadow: 0 24px 60px -30px rgba(15,95,87,.5); }
.plan-name { font-size: 22px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; }
.plan-name .badge { position: static; background: var(--accent); color: var(--on-accent); font-size: 12.5px; font-family: var(--font-head); padding: 3px 12px; border-radius: 999px; }
.plan-tagline { color: var(--muted); font-size: 15px; }
.plan-price { font-family: var(--font-head); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.plan-price strong { font-size: 34px; font-weight: 600; color: var(--ink); }
.plan-was { color: var(--muted); text-decoration: line-through; }
.plan-cur, .plan-period { color: var(--muted); font-size: 15px; }
.plan .screen-list li { padding-inline-start: 0; }
.plan .screen-list li::before { position: static; display: inline; width: auto; height: auto; border: 0; border-radius: 0; }
.tabular { font-variant-numeric: tabular-nums; }
.offer-band { background: var(--accent-soft); padding: 28px 0; }
.offer-title { font-family: var(--font-head); font-size: 20px; font-weight: 600; color: var(--accent-ink); }
.offer-band .offer-desc, .offer-band .offer-until { color: var(--ink-2); margin-top: 6px; }

/* Tables (security page). */
.scroll-x { overflow-x: auto; }
.site-table { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 8px; }
.site-table th, .site-table td { text-align: start; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.site-table th { font-family: var(--font-head); font-weight: 500; color: var(--muted); font-size: 14px; }
.site-table td { color: var(--ink-2); }

/* The contact form. */
.site-form { display: grid; gap: 20px; max-width: 560px; }
.site-field { display: grid; gap: 6px; }
.site-field label { font-family: var(--font-head); font-size: 15px; font-weight: 500; color: var(--ink); }
.site-field .req, .site-field .opt { color: var(--muted); font-weight: 400; font-size: 13.5px; }
.site-field input, .site-field textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; }
.site-field textarea { min-height: 120px; resize: vertical; }
.site-field input:focus-visible, .site-field textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.site-field .hint { font-size: 13.5px; color: var(--muted); }
.site-form .btn { justify-self: start; }

/* A submission result, above the page (layout.php). */
.site-flashes { padding-top: 20px; }
.flash { padding: 14px 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.flash.success, .flash.ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ink); }
.flash.error { background: var(--danger-soft); border-color: var(--danger); color: var(--ink); }
.flash + .flash { margin-top: 10px; }

/* Resources, blog and a post. */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: var(--accent); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.crumbs a:hover { text-decoration: underline; }
[dir="ltr"] .crumbs [aria-hidden="true"] { display: inline-block; transform: scaleX(-1); }
.site-hero h1[dir="rtl"] { max-width: 780px; }
.post-meta { color: var(--muted); font-size: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.post-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.post-list li { padding: 20px 0; border-bottom: 1px solid var(--line); }
.post-list a { font-family: var(--font-head); font-size: 19px; font-weight: 500; color: var(--ink); text-decoration: none; }
.post-list a:hover { color: var(--accent); }
.post-list p { margin-top: 6px; color: var(--ink-2); font-size: 15.5px; }
.post-body > * + * { margin-top: 16px; }
.post-body h2 { font-size: clamp(22px, 2.6vw, 28px); margin-top: 40px; }
.post-body h3 { font-size: 19px; margin-top: 28px; }
.post-body p, .post-body li { color: var(--ink-2); }
.post-body ul, .post-body ol { padding-inline-start: 22px; }
.post-body a { color: var(--accent); }
.post-body blockquote { margin-inline: 0; padding-inline-start: 18px; border-inline-start: 3px solid var(--accent-line); color: var(--ink-2); }
.faq-item .faq-link { margin-top: -10px; }
/* Published announcement bar uses the site's own colour and spacing tokens. */
.announcement-bar { display:flex; align-items:center; gap:calc(var(--gutter) / 2); padding:calc(var(--gutter) / 4) var(--gutter); background:var(--accent-soft); color:var(--ink); min-inline-size:0; }
.announcement-bar[hidden] { display:none; }
.announcement-important { background:var(--warn-soft); }
.announcement-copy { margin:0; flex:1; min-inline-size:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.announcement-bar a,.announcement-bar button { flex-shrink:0; color:inherit; }
.announcement-bar button { background:transparent; border:0; cursor:pointer; min-block-size:44px; min-inline-size:44px; }
@media print { .announcement-bar { display:none !important; } }