@charset "UTF-8";

/* ==========================================================================
   SEHATEC — Landing V2
   Static CSS. One stylesheet serves ar (RTL) / fr / en (LTR) via CSS logical
   properties, so there are no [dir] forks below except where a glyph or a
   gradient genuinely has to mirror.

   Palette is taken from the Android app (ui/theme/Color.kt) and the brand mark,
   not invented here: green #2ECC71, blue #2980B9, red #E74C3C. The raw brand
   green fails contrast as text, so every text/!button surface uses the -ink
   variants below.
   ========================================================================== */

/* --- Design tokens --- */
:root {
  color-scheme: light;

  /* Brand — mirrors app ui/theme/Color.kt */
  --green: #2ECC71;
  --green-light: #55C451;
  --green-deep: #197A15;
  --green-ink: #14670F;          /* text/buttons on white: 5.5:1 */

  --blue: #2980B9;
  --blue-light: #3897DC;
  --blue-deep: #01467A;
  --blue-ink: #01467A;

  --red: #E74C3C;
  --red-ink: #B3271A;
  --gold: #FFC766;
  --verified: #216EA0;

  /* Surfaces */
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --surface-2: #E9F3F9;
  --surface-3: #F1F6FA;
  --border: #DCE6EE;
  --border-strong: #C3D4E2;

  /* Ink */
  --text: #0B1A28;
  --text-2: #4C6073;
  --text-3: #6B7F91;

  /* Tinted backgrounds (decorative only) */
  --tint-green: rgba(46, 204, 113, 0.12);
  --tint-blue: rgba(41, 128, 185, 0.12);
  --tint-red: rgba(231, 76, 60, 0.12);
  --tint-gold: rgba(255, 199, 102, 0.22);

  /* Type */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Shape */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Elevation — soft, single-source, no heavy blurs */
  --sh-1: 0 1px 2px rgba(11, 26, 40, 0.06);
  --sh-2: 0 4px 14px rgba(11, 26, 40, 0.07);
  --sh-3: 0 14px 38px rgba(11, 26, 40, 0.10);

  /* Rhythm */
  --pad: clamp(1.25rem, 4vw, 2rem);
  --sec-y: clamp(3.5rem, 7vw, 6rem);
  --sec-y-tight: clamp(2.5rem, 5vw, 4rem);

  --t-fast: 140ms ease;
  --t: 220ms ease;
}

html[lang="ar"] {
  --font: 'Noto Kufi Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: keeps position:sticky working on the header */
  overflow-x: clip;
}

h1, h2, h3, h4 { margin: 0 0 0.6em; line-height: 1.25; font-weight: 700; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }

/* Arabic numerals stay Latin so codes/dates read the same in every locale */
html[lang="ar"] { font-variant-numeric: lining-nums; }

/* --- Focus: visible everywhere, never suppressed --- */
:focus-visible {
  outline: 3px solid var(--blue-light);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: -100px;
  z-index: 2000;
  background: var(--blue-deep);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600;
  transition: inset-block-start var(--t-fast);
}
.skip-link:focus { inset-block-start: 0; }

/* --- Layout --- */
.wrap {
  width: min(100% - 2.5rem, 1180px);
  margin-inline: auto;
}
.section { padding-block: var(--sec-y); }
.section--tight { padding-block: var(--sec-y-tight); }
.section--alt { background: var(--surface); }
.section--soft { background: linear-gradient(180deg, var(--bg) 0%, var(--surface-3) 100%); }

.head {
  max-width: 62ch;
  margin-block-end: clamp(2rem, 4vw, 3rem);
}
.head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--green-ink);
  background: var(--tint-green);
  padding: 0.3rem 0.85rem;
  border-radius: var(--r-pill);
  margin-block-end: 0.9rem;
}
.eyebrow--blue { color: var(--blue-ink); background: var(--tint-blue); }
html[lang="ar"] .eyebrow { text-transform: none; letter-spacing: 0; }

.h2 { font-size: clamp(1.6rem, 3.6vw, 2.35rem); letter-spacing: -0.015em; }
.h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); }
.lede { font-size: clamp(1rem, 1.6vw, 1.125rem); color: var(--text-2); }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.8rem 1.4rem;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  transition: background-color var(--t), border-color var(--t), color var(--t), transform var(--t-fast);
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn--lg { padding: 1rem 1.75rem; font-size: 1.0625rem; }
.btn--sm { padding: 0.55rem 1rem; font-size: 0.875rem; }
.btn--block { display: flex; width: 100%; }

.btn--primary { background: var(--green-ink); color: #fff; }
.btn--primary:hover { background: #10570C; }

.btn--secondary { background: var(--blue-deep); color: #fff; }
.btn--secondary:hover { background: #013659; }

.btn--ghost {
  background: var(--surface);
  color: var(--blue-ink);
  border-color: var(--border-strong);
}
.btn--ghost:hover { border-color: var(--blue); background: var(--surface-2); }

.btn--onDark {
  background: #fff;
  color: var(--blue-deep);
}
.btn--onDark:hover { background: #EAF3FA; }
.btn--onDarkGhost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.btn--onDarkGhost:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }

/* Arrow glyphs sit in markup as ← / →; mirror them per direction instead of
   shipping two icon sets. */
.btn .arrow { transition: transform var(--t-fast); }
[dir="rtl"] .btn .arrow { transform: scaleX(-1); }
.btn:hover .arrow { transform: translateX(3px); }
[dir="rtl"] .btn:hover .arrow { transform: scaleX(-1) translateX(3px); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 900;
  background: rgba(255, 255, 255, 0.92);
  border-block-end: 1px solid transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color var(--t), box-shadow var(--t);
}
.site-header[data-stuck="true"] {
  border-block-end-color: var(--border);
  box-shadow: var(--sh-1);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  min-height: 68px;
}

.brand { display: flex; align-items: center; gap: 0.6rem; flex: none; }
.brand img { width: 34px; height: 34px; }
.brand b {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.brand small {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-3);
  line-height: 1;
  letter-spacing: 0;
}
.brand-text { line-height: 1.15; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1.4vw, 1.15rem);
  margin-inline-end: auto;
}
.nav-links a {
  padding: 0.45rem 0.35rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-2);
  border-block-end: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.nav-links a:hover { color: var(--green-ink); border-block-end-color: var(--green); }

.nav-actions { display: flex; align-items: center; gap: 0.5rem; flex: none; }

/* Language switcher — real links, so switching is a navigation, not a repaint */
.langs {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
}
.langs a {
  padding: 0.3rem 0.6rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-2);
  border-radius: var(--r-pill);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.langs a:hover { color: var(--text); }
.langs a[aria-current="true"] {
  background: var(--surface);
  color: var(--blue-ink);
  box-shadow: var(--sh-1);
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}
.nav-toggle .bars { position: relative; width: 18px; height: 12px; flex: none; }
.nav-toggle .bars span {
  position: absolute;
  inset-inline: 0;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--t), opacity var(--t-fast);
}
.nav-toggle .bars span:nth-child(1) { top: 0; }
.nav-toggle .bars span:nth-child(2) { top: 5px; }
.nav-toggle .bars span:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 1040px) {
  .nav-links a { font-size: 0.875rem; }
  .nav-actions .btn span.long { display: none; }
}

@media (max-width: 900px) {
  /* Without wrap the panel cannot take its own line: flex-basis:100% just
     squeezes the brand and the actions instead, and the rows overlap. */
  .nav { min-height: 62px; gap: 0.5rem; flex-wrap: wrap; }
  .nav-toggle { display: inline-flex; }

  /* The panel is a plain block in flow when JS is off — it stays reachable
     rather than being trapped behind a button that does nothing. */
  .nav-panel {
    order: 10;
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-block: 1rem 1.5rem;
    border-block-start: 1px solid var(--border);
  }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
  .nav-links a {
    padding: 0.7rem 0.25rem;
    border-block-end: 1px solid var(--border);
    font-size: 1rem;
  }
  .nav-links a:hover { border-block-end-color: var(--border); }
  .nav-panel .langs { align-self: flex-start; }
  .nav-panel .panel-ctas { display: grid; gap: 0.6rem; }

  /* With JS the panel collapses; the mobile CTA below keeps the doctors
     entry point on screen either way. */
  html.js .nav-panel { display: none; }
  html.js .site-header[data-open="true"] .nav-panel { display: flex; }

  .nav-actions .desktop-only { display: none; }
  .nav-actions .mobile-cta { display: inline-flex; }
  .nav-links { margin-inline-end: 0; }
}

@media (min-width: 901px) {
  .nav-panel { display: contents; }
  .nav-panel .panel-ctas { display: none; }
  .nav-actions .mobile-cta { display: none; }
}

@media (max-width: 420px) {
  .brand small { display: none; }
  .nav-actions .mobile-cta { padding-inline: 0.75rem; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 6vw, 5.5rem);
  background:
    radial-gradient(1100px 460px at 78% -8%, rgba(46, 204, 113, 0.16), transparent 62%),
    radial-gradient(760px 420px at 6% 4%, rgba(41, 128, 185, 0.14), transparent 60%),
    var(--bg);
}
[dir="rtl"] .hero {
  background:
    radial-gradient(1100px 460px at 22% -8%, rgba(46, 204, 113, 0.16), transparent 62%),
    radial-gradient(760px 420px at 94% 4%, rgba(41, 128, 185, 0.14), transparent 60%),
    var(--bg);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero h1 {
  font-size: clamp(1.85rem, 5.2vw, 3.15rem);
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin-block-end: 0.7em;
}
.hero h1 .accent {
  color: var(--green-ink);
}
.hero .lede { max-width: 46ch; margin-block-end: 2rem; font-size: clamp(1rem, 1.7vw, 1.15rem); }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem 0.4rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-1);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-2);
  margin-block-end: 1.25rem;
}
[dir="rtl"] .hero-badge { padding: 0.4rem 0.5rem 0.4rem 0.9rem; }
.hero-badge .dot {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: var(--tint-green);
  border-radius: var(--r-pill);
  flex: none;
}
.hero-badge .dot svg { width: 13px; height: 13px; color: var(--green-ink); }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.hero-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-start: 1.25rem;
  font-size: 0.875rem;
  color: var(--text-3);
}
.hero-note svg { width: 15px; height: 15px; flex: none; color: var(--text-3); }

/* --- Phone presentation --- */
.hero-visual {
  display: flex;
  justify-content: center;
  position: relative;
}

.device {
  position: relative;
  width: min(300px, 78vw);
  border-radius: 42px;
  padding: 10px;
  background: linear-gradient(160deg, #16283A 0%, #0B1A28 100%);
  box-shadow: var(--sh-3), 0 0 0 1px rgba(11, 26, 40, 0.35);
}
.device::before {
  content: "";
  position: absolute;
  inset-block-start: 18px;
  inset-inline: 0;
  margin-inline: auto;
  width: 96px; height: 20px;
  background: #0B1A28;
  border-radius: var(--r-pill);
  z-index: 3;
}
.device-screen {
  position: relative;
  border-radius: 33px;
  overflow: hidden;
  background: var(--bg);
  padding: 2.4rem 0.85rem 1rem;
  font-size: 12px;
  line-height: 1.5;
}

.appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 0.7rem;
  padding-inline: 0.15rem;
}
.appbar .greet { font-size: 10.5px; color: var(--text-3); line-height: 1.3; }
.appbar .greet b { display: block; font-size: 13px; color: var(--text); }
.appbar .avatar {
  width: 28px; height: 28px;
  border-radius: var(--r-pill);
  background: linear-gradient(140deg, var(--green), var(--blue));
  display: grid; place-items: center;
  color: #fff; font-size: 11px; font-weight: 700;
  flex: none;
}

.wallet {
  position: relative;
  padding: 0.85rem 0.9rem;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--green-deep) 0%, #12694E 48%, var(--blue-deep) 100%);
  color: #fff;
  overflow: hidden;
}
.wallet::after {
  content: "";
  position: absolute;
  inset-block-start: -40px;
  inset-inline-end: -30px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
}
.wallet .label { font-size: 9.5px; opacity: 0.85; letter-spacing: 0.02em; }
.wallet .idno {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-block: 0.2rem 0.55rem;
  /* An identifier is one token: bidi reordering would scramble it in RTL. */
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}
.wallet .who { display: flex; align-items: center; justify-content: space-between; font-size: 10px; }
.wallet .who .chip {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(255, 255, 255, 0.18);
  padding: 2px 7px;
  border-radius: var(--r-pill);
  font-size: 9px;
}

.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-block: 0.6rem; }
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.45rem 0.3rem;
  text-align: center;
}
.stat b { display: block; font-size: 14px; color: var(--text); line-height: 1.2; }
.stat span { font-size: 9px; color: var(--text-3); }

.code-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0.75rem;
  text-align: center;
  box-shadow: var(--sh-1);
}
.code-card .cap { font-size: 9.5px; color: var(--text-3); }
.code-digits {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-block: 0.5rem;
  direction: ltr;
}
.code-digits i {
  width: 26px;
  padding-block: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  font-style: normal;
  font-size: 14px;
  font-weight: 700;
  color: var(--blue-deep);
}
.code-timer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--green-ink);
  background: var(--tint-green);
  padding: 2px 8px;
  border-radius: var(--r-pill);
}

.active-grant {
  margin-block-start: 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.55rem 0.6rem;
}
.active-grant .t { font-size: 9.5px; color: var(--text-3); margin-block-end: 0.35rem; }
.active-grant .row { display: flex; align-items: center; gap: 6px; }
.active-grant .pic {
  width: 24px; height: 24px; border-radius: var(--r-pill);
  background: var(--tint-blue);
  display: grid; place-items: center;
  font-size: 9px; font-weight: 700; color: var(--blue-ink);
  flex: none;
}
.active-grant .nm { font-size: 10.5px; font-weight: 600; line-height: 1.3; }
.active-grant .nm span { display: block; font-size: 9px; font-weight: 400; color: var(--text-3); }
.active-grant .rev {
  margin-inline-start: auto;
  font-size: 9px;
  font-weight: 700;
  color: var(--red-ink);
  background: var(--tint-red);
  padding: 3px 7px;
  border-radius: var(--r-pill);
  flex: none;
}

/* Floating proof chips beside the device */
.float-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-2);
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
}
.float-chip svg { width: 15px; height: 15px; flex: none; }
.float-chip--a { inset-block-start: 16%; inset-inline-start: -8%; color: var(--blue-ink); }
.float-chip--b { inset-block-end: 12%; inset-inline-end: -6%; color: var(--green-ink); }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { order: -1; }
  .device { width: min(258px, 68vw); }

  /* Once the hero stacks, the device is centred in a full-width row: the
     chips would either float far out at the container edges or land on top
     of the screen they annotate. The trust strip just below makes the same
     two points in full sentences. */
  .float-chip { display: none; }
}
@media (max-width: 560px) {
  .hero-ctas .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   Trust strip
   ========================================================================== */
.trust {
  background: var(--surface);
  border-block: 1px solid var(--border);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}
.trust-item { display: flex; align-items: flex-start; gap: 0.7rem; }
.trust-item .ic {
  width: 34px; height: 34px;
  flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--tint-blue);
  color: var(--blue-ink);
}
.trust-item .ic svg { width: 18px; height: 18px; }
.trust-item b { display: block; font-size: 0.9375rem; line-height: 1.35; }
.trust-item span { font-size: 0.8125rem; color: var(--text-3); }

@media (max-width: 860px) { .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .trust-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }

/* ==========================================================================
   Steps — "How it works"
   ========================================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
  counter-reset: step;
}
.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.35rem;
}
.step .n {
  counter-increment: step;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--green-ink);
  color: #fff;
  font-weight: 800;
  font-size: 0.9375rem;
  margin-block-end: 0.9rem;
}
.step .n::before { content: counter(step, decimal-leading-zero); }
.step h3 { font-size: 1.0625rem; margin-block-end: 0.4rem; }
.step p { font-size: 0.9rem; color: var(--text-2); }

/* Connector: a real dashed border on a pseudo-element. The V1 rule
   `background: dashed 2px <color>` was invalid and drew nothing. */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block-start: 42px;
  inset-inline-start: 100%;
  width: clamp(1rem, 2.5vw, 1.5rem);
  border-block-start: 2px dashed var(--border-strong);
}

@media (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step:nth-child(2n)::after, .step:last-child::after { content: none; }
}
@media (max-width: 540px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step::after { content: none !important; }
}

/* ==========================================================================
   Access flow — the consent mechanism, told as a diagram
   ========================================================================== */
.flow-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  box-shadow: var(--sh-2);
}

.flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  align-items: stretch;
}
.flow-node {
  position: relative;
  text-align: center;
  padding: 1.1rem 0.65rem;
  border-radius: var(--r-md);
  background: var(--surface-3);
  border: 1px solid var(--border);
}
.flow-node .ic {
  width: 42px; height: 42px;
  margin-inline: auto;
  margin-block-end: 0.6rem;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--blue-ink);
}
.flow-node .ic svg { width: 20px; height: 20px; }
.flow-node b { display: block; font-size: 0.875rem; line-height: 1.35; }
.flow-node span { display: block; font-size: 0.75rem; color: var(--text-3); margin-block-start: 0.2rem; }

.flow-node--accent { background: var(--tint-green); border-color: rgba(46, 204, 113, 0.35); }
.flow-node--accent .ic { color: var(--green-ink); border-color: rgba(46, 204, 113, 0.4); }
.flow-node--end { background: var(--tint-gold); border-color: rgba(255, 199, 102, 0.6); }
.flow-node--end .ic { color: #7A5200; border-color: rgba(255, 199, 102, 0.8); }

/* Arrows between nodes, mirrored for RTL by the same scaleX trick */
.flow-node:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: calc(100% + 0.05rem);
  width: 0.4rem; height: 0.4rem;
  margin-block-start: -0.2rem;
  border-block-start: 2px solid var(--border-strong);
  border-inline-end: 2px solid var(--border-strong);
  transform: rotate(45deg);
}
[dir="rtl"] .flow-node:not(:last-child)::after { transform: rotate(-135deg); }

.flow-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 1rem;
  margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
  padding-block-start: clamp(1.25rem, 3vw, 2rem);
  border-block-start: 1px solid var(--border);
}
.fact b {
  display: block;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 800;
  color: var(--blue-deep);
  line-height: 1.15;
}
.fact span { font-size: 0.875rem; color: var(--text-2); }

@media (max-width: 880px) {
  .flow { grid-template-columns: minmax(0, 1fr); gap: 1.35rem; }
  .flow-node { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.85rem; text-align: start; align-items: center; }
  .flow-node .ic { margin: 0; }
  .flow-node:not(:last-child)::after {
    inset-block-start: calc(100% + 0.35rem);
    inset-inline-start: 32px;
    margin-block-start: 0;
    transform: rotate(135deg);
  }
  [dir="rtl"] .flow-node:not(:last-child)::after { transform: rotate(135deg); }
}

/* ==========================================================================
   Feature cards
   ========================================================================== */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(1rem, 2.2vw, 1.5rem);
}
/* Nine feature cards: a wider track keeps the grid at three columns so the
   last row is full instead of leaving one card stranded on its own. */
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.35rem;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.card:hover { border-color: var(--border-strong); box-shadow: var(--sh-2); }
.card .ic {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--tint-green);
  color: var(--green-ink);
  margin-block-end: 1rem;
}
.card .ic svg { width: 21px; height: 21px; }
.card .ic--blue { background: var(--tint-blue); color: var(--blue-ink); }
.card .ic--gold { background: var(--tint-gold); color: #7A5200; }
.card h3 { font-size: 1.0625rem; margin-block-end: 0.35rem; }
.card p { font-size: 0.9rem; color: var(--text-2); }

/* Split layout: text one side, visual the other */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .split .visual { order: 2; }
  .split .prose { order: 1; }
}

.checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding-block: 0.5rem;
  font-size: 0.9375rem;
}
.checks li .tick {
  width: 22px; height: 22px;
  flex: none;
  margin-block-start: 2px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--tint-green);
  color: var(--green-ink);
}
.checks li .tick svg { width: 12px; height: 12px; }
.checks li b { display: block; }
.checks li span { display: block; font-size: 0.85rem; color: var(--text-3); }

/* ==========================================================================
   Vaccination status board
   ========================================================================== */
.vacc-board {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-2);
}
.vacc-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--surface-3);
  border-block-end: 1px solid var(--border);
}
.vacc-tabs span {
  padding: 0.75rem 0.5rem;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-3);
  border-block-end: 3px solid transparent;
}
.vacc-tabs span[data-on="true"] {
  color: var(--blue-ink);
  background: var(--surface);
  border-block-end-color: var(--blue);
}
.vacc-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-block-end: 1px solid var(--border);
}
.vacc-list li:last-child { border-block-end: 0; }
.vacc-list .pill {
  flex: none;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: var(--r-pill);
}
.pill--done { background: var(--tint-green); color: var(--green-ink); }
.pill--due { background: var(--tint-red); color: var(--red-ink); }
.pill--soon { background: var(--tint-blue); color: var(--blue-ink); }
.vacc-list .nm { font-size: 0.9rem; font-weight: 600; line-height: 1.3; }
.vacc-list .nm span { display: block; font-size: 0.78rem; font-weight: 400; color: var(--text-3); }

/* ==========================================================================
   Doctor portal presentation
   ========================================================================== */
.portal {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--sh-3);
  background: var(--surface);
}
.portal-chrome {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.85rem;
  background: var(--surface-3);
  border-block-end: 1px solid var(--border);
}
.portal-chrome i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.portal-chrome .url {
  margin-inline-start: 0.5rem;
  font-size: 0.6875rem;
  color: var(--text-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 0.15rem 0.6rem;
  direction: ltr;
}
.portal-body { display: grid; grid-template-columns: 58px minmax(0, 1fr); min-height: 260px; }
.portal-side {
  background: var(--blue-deep);
  padding: 0.85rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}
.portal-side .lg {
  width: 26px; height: 26px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  display: grid; place-items: center;
  margin-block-end: 0.5rem;
}
.portal-side .lg img { width: 18px; height: 18px; }
.portal-side i {
  width: 28px; height: 6px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.22);
}
.portal-side i[data-on="true"] { background: var(--green); }
.portal-main { padding: 1rem; background: var(--bg); display: grid; gap: 0.75rem; align-content: start; }
.portal-h { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.portal-h b { font-size: 0.9375rem; }
.portal-h .badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.6875rem; font-weight: 700;
  color: #fff; background: var(--verified);
  padding: 0.15rem 0.55rem; border-radius: var(--r-pill);
}
.portal-h .badge svg { width: 11px; height: 11px; }
.portal-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.portal-stats div {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.5rem 0.6rem;
}
.portal-stats b { display: block; font-size: 1.05rem; line-height: 1.2; }
.portal-stats span { font-size: 0.6875rem; color: var(--text-3); }
.portal-rec {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.7rem 0.8rem;
}
.portal-rec .ttl { font-size: 0.75rem; color: var(--text-3); margin-block-end: 0.4rem; }
.portal-rec .ln { height: 7px; border-radius: 4px; background: var(--surface-2); margin-block-end: 6px; }
.portal-rec .ln:last-child { margin-block-end: 0; }
.portal-rec .ln.w70 { width: 70%; }
.portal-rec .ln.w45 { width: 45%; }
.portal-window {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.6875rem; font-weight: 700;
  color: var(--green-ink); background: var(--tint-green);
  padding: 0.2rem 0.6rem; border-radius: var(--r-pill);
}

/* ==========================================================================
   Verification / security / centers
   ========================================================================== */
.verify-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.verify-card .pic {
  width: 46px; height: 46px; flex: none;
  border-radius: var(--r-pill);
  background: var(--tint-blue);
  display: grid; place-items: center;
  font-weight: 800; color: var(--blue-ink);
}
.verify-card .who b { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9375rem; }
.verify-card .who span { font-size: 0.8125rem; color: var(--text-3); }
.badge-verified {
  display: inline-flex; align-items: center; gap: 0.2rem;
  font-size: 0.6875rem; font-weight: 700;
  color: #fff; background: var(--verified);
  padding: 0.1rem 0.5rem; border-radius: var(--r-pill);
}
.badge-verified svg { width: 11px; height: 11px; }

.sec-grid {
  display: grid;
  /* Six items: a 300px floor lands on three columns, so the second row is
     full rather than two cards adrift under four. */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(0.85rem, 2vw, 1.25rem);
}
.sec-item {
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.sec-item .ic {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--blue-ink);
  margin-block-end: 0.85rem;
}
.sec-item .ic svg { width: 19px; height: 19px; }
.sec-item b { display: block; font-size: 0.9375rem; margin-block-end: 0.25rem; }
.sec-item p { font-size: 0.85rem; color: var(--text-2); }

/* ==========================================================================
   Final CTA
   ========================================================================== */
.final {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--green-deep) 0%, #10604A 45%, var(--blue-deep) 100%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}
.final::after {
  content: "";
  position: absolute;
  inset-block-end: -120px;
  inset-inline-start: -60px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}
.final h2 { font-size: clamp(1.5rem, 4vw, 2.35rem); color: #fff; position: relative; }
.final p { max-width: 56ch; margin-inline: auto; color: rgba(255, 255, 255, 0.88); position: relative; }
.final-ctas {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-block-start: 1.75rem;
}
.final-note {
  position: relative;
  margin-block-start: 1rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.75);
}
@media (max-width: 520px) { .final-ctas .btn { flex: 1 1 100%; } }

/* ==========================================================================
   FAQ — <details>, so it works with JS off
   ========================================================================== */
.faq { display: grid; gap: 0.75rem; max-width: 820px; margin-inline: auto; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.faq details[open] { border-color: var(--border-strong); box-shadow: var(--sh-1); }
.faq summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  font-weight: 700;
  font-size: 0.9375rem;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  inline-size: 9px; block-size: 9px;
  margin-inline-start: auto;
  flex: none;
  /* Physical sides on purpose: a chevron must point down in both
     directions, and logical sides would flip it sideways in RTL. */
  border-right: 2px solid var(--text-3);
  border-bottom: 2px solid var(--text-3);
  transform: rotate(45deg);
  transition: transform var(--t);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .answer { padding: 0 1.15rem 1.15rem; font-size: 0.9rem; color: var(--text-2); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--text);
  color: #E4ECF3;
  padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem;
  margin-block-start: var(--sec-y);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}
.footer-brand .brand b { color: #fff; }
.footer-brand .brand small { color: #8FA6B8; }
.footer-brand p { margin-block-start: 1rem; font-size: 0.875rem; color: #A8BDCC; max-width: 34ch; }
.site-footer h4 { font-size: 0.9375rem; color: #fff; margin-block-end: 1rem; }
.site-footer nav { display: grid; gap: 0.6rem; }
.site-footer nav a, .site-footer address a {
  font-size: 0.875rem;
  color: #A8BDCC;
  transition: color var(--t-fast);
}
.site-footer nav a:hover, .site-footer address a:hover { color: #fff; }
.site-footer address { font-style: normal; display: grid; gap: 0.6rem; }
.footer-bottom {
  margin-block-start: clamp(2rem, 4vw, 3rem);
  padding-block-start: 1.25rem;
  border-block-start: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: #8FA6B8;
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1rem; }

@media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Reveal-on-scroll
   Default state is VISIBLE. The hidden state is applied only once JS has run
   (html.js is set by an inline head script), so a JS failure or a crawler
   never gets a blank page.
   ========================================================================== */
html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms ease, transform 520ms ease;
  transition-delay: var(--d, 0ms);
}
html.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Print --- */
@media print {
  .site-header, .hero-visual, .final, .nav-toggle { display: none; }
  body { background: #fff; }
}

/* ==========================================================================
   Document pages (privacy / terms)
   ========================================================================== */
.doc { max-width: 74ch; margin-inline: auto; }
.doc h1 { font-size: clamp(1.6rem, 4vw, 2.25rem); letter-spacing: -0.015em; }
.doc h2 {
  font-size: clamp(1.1rem, 2.4vw, 1.3rem);
  margin-block: 2.25rem 0.75rem;
  padding-block-end: 0.5rem;
  border-block-end: 1px solid var(--border);
}
.doc p, .doc li { color: var(--text-2); }
.doc ul { margin-block: 0.5rem 1rem; }
.doc ul li {
  position: relative;
  padding-inline-start: 1.15rem;
  margin-block-end: 0.5rem;
}
.doc ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.65em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--green);
}
.doc .updated { font-size: 0.875rem; color: var(--text-3); }
.doc a { color: var(--blue-ink); text-decoration: underline; text-underline-offset: 2px; }

.notice {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  margin-block: 1.5rem;
  background: var(--tint-gold);
  border: 1px solid rgba(255, 199, 102, 0.7);
  border-radius: var(--r-md);
  font-size: 0.9rem;
  color: #5C3D00;
}
.notice svg { width: 20px; height: 20px; flex: none; margin-block-start: 2px; }
.notice p { color: inherit; }

/* --- Small helpers --- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Latin tokens (blood type, IDs) that bidi would otherwise reorder in RTL */
.ltr { direction: ltr; unicode-bidi: isolate; }

/* A value that is deliberately not published yet. Reads as a stated gap, not
   as a link someone can click into nowhere. */
.pending {
  display: inline-block;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--text-3);
}
.site-footer .pending { color: #8FA6B8; }
.doc .pending { color: var(--text-3); }
.mt-2 { margin-block-start: 1.5rem; }
.center { text-align: center; }