/* ==========================================================================
   Arogo landing pages v2 -- design tokens + the stylesheet half of motion.js
   (doctor / clinic / pharmacy, templates v2a "Classic" and v2b "Modern").
   Source of truth: kb/projects/healthcare/design/landing-v2-2026-10-19/BRIEF.md (+ specialty-catalog.json).

   LOAD ORDER  <link rel="stylesheet" href="…/v2/fonts/fonts.css"> then …/v2/tokens.css, then the template's own CSS;
               <script src="…/v2/motion.js"></script> in <head>, synchronous (no defer): its first act is the `.js` class.
   NO LOGIC HERE: the page's look (layout, colours of components, the bottom-sheet shape) stays in the template. This file
   holds (1) tokens, (2) accents, (3) the hidden/visible STATES the script toggles -- hidden only under `.js`.

   HOW A TEMPLATE PICKS ITS ACCENT (on <html> or <body>; every var below is then in scope):
     doctor    data-spec="<specialty-catalog id>"        e.g. data-spec="gynaecology"   (no / unknown id = General Medicine)
     clinic    data-kind="clinic"
     pharmacy  data-kind="pharmacy"   (+ data-preset="cd" = the blue "Chemist & Druggist" alt)
   A provider-chosen colour overrides the SET together: --accent, --accent-ink, --accent-soft (and --accent-2 / -2-ink).
   Contrast (WCAG): white on --accent >= 4.8:1 for all 16 specialities + clinic + pharmacy; --accent-ink >= 4.5:1 on white
   and on --accent-soft. --accent itself is NOT safe for small text on --accent-soft (cardiology 3.95:1): small accent
   text uses --accent-ink. --accent-2 (teal #0D9488, clinic green #16A34A) is for fills and large text only; white text on
   a green button uses --accent-2-ink. --muted on white is 4.76:1 (use --body on tinted bands).

   PORTING THE SIX PROTOTYPES -- old name -> v2 name (the prototypes disagree with each other; this is the one vocabulary)
     colours   --accent --accent-ink --accent-soft --accent-2 --ink --body --muted --line --surface --soft   same
               --deep (doctor-a) -> --accent-ink      --h1b (doctor-b) -> --accent-2
               --wa-d / --wa-hover / --wa-ink -> --wa-ink      --accent-tint (pharmacy) same      --accent-2-soft (clinic) same
     radii     --r1 --r2 --r3                                                                                   same
     shadows   --sh1 --sh2 --sh3 (doctor, clinic-b, pharmacy-b) same;  --sh-sm / --sh-md / --sh-lg (clinic-a, pharmacy-a) -> --sh1 / --sh2 / --sh3
     fonts     --f-head --f-body --f-serif --f-script (doctor-a/b) same
               clinic-a  --head --text --serif --script      -> --f-head --f-body --f-serif --f-script
               clinic-b  --fh --fb --fs(=script)             -> --f-head --f-body --f-script
               pharm-a   --font-head/-body/-serif/-script    -> --f-head --f-body --f-serif --f-script
               pharm-b   --fh --fb --fs(=SERIF) --fc(=script)-> --f-head --f-body --f-serif --f-script   (--fs means serif here, script in clinic-b)
     layout    --hh (clinic-b 64px, pharmacy-a 72px)         -> --header-h (72px) / --header-h-c (condensed, 60px)
     states    .rv/.in                -> [data-reveal] / .is-in          .on / .done (steps)  -> .is-on / .is-done
               .show (bar)            -> .show (+ .is-shown)               .open (sheet)        -> .is-open (generic sheet)
               .s .c .cond .scrolled  -> .scrolled (+ .is-condensed)       .today (table row)   -> .today ([data-timings] tr), .is-today
               html.pin / html.rm     -> [data-story].is-pinned / html.rm  .lock (body)         -> .is-locked
     hooks     data-condense data-bar data-story(-step|-scene|-go) data-carousel(-track|-prev|-next|-dots|-nav) data-menu (<details>)
               data-timings data-open-now data-filters data-filter data-more data-tabs  -- what the shared partials use; the older
               aliases (data-header, data-actionbar, data-pin*, data-snap*) still work -- all of them are documented in motion.js
   The attribute vocabulary of motion.js (data-reveal, data-count, data-draw, data-pin, data-sheet, data-snap,
   data-accordion, ...) is documented at the top of motion.js.
   ========================================================================== */

:root {
  /* ---- colour: neutrals (BRIEF) ---- */
  --ink: #0F172A;
  --body: #334155;
  --muted: #64748B;
  --line: #E2E8F0;
  --surface: #FFFFFF;
  --soft: #F8FAFC;

  /* ---- colour: accent set -- default = General Medicine (navy + teal); [data-spec] / [data-kind] below override ---- */
  --accent: #0B4F8A;
  --accent-ink: #083B69;
  --accent-soft: #E0F2FE;
  --accent-2: #0D9488;
  --accent-2-ink: #0F766E;
  --accent-2-soft: #CCFBF1;
  --accent-tint: #E0F2FE;
  --on-accent: #FFFFFF;

  /* ---- colour: WhatsApp green (white on it is 5.0:1; the brand #25D366 would fail) ---- */
  --wa: #15803D;
  --wa-ink: #166534;

  /* ---- colour: open / closed / soon badges (text on its own soft background >= 4.5:1) ---- */
  --ok: #15803D;      --ok-soft: #DCFCE7;
  --warn: #B45309;    --warn-soft: #FEF3C7;
  --bad: #B91C1C;     --bad-soft: #FEE2E2;

  /* ---- radius ---- */
  --r1: 12px;
  --r2: 16px;
  --r3: 24px;
  --r-pill: 999px;

  /* ---- shadow ---- */
  --sh1: 0 1px 2px rgb(15 23 42 / .06);
  --sh2: 0 8px 24px rgb(15 23 42 / .08);
  --sh3: 0 24px 48px rgb(15 23 42 / .12);

  /* ---- spacing: 4-pt base on the 8-pt grid (BRIEF 4/8/12/16/24/32/48/64/96) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ---- type: families (self-hosted by fonts.css; every stack ends in a system face, Devanagari faces before it) ---- */
  --f-head: "Plus Jakarta Sans", Inter, "Noto Sans Devanagari", "Nirmala UI", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-body: Inter, "Noto Sans Devanagari", "Nirmala UI", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-serif: Fraunces, "Noto Serif Devanagari", Georgia, "Times New Roman", serif;
  --f-script: Caveat, "Segoe Script", "Bradley Hand", cursive;

  /* ---- type: scale -- fluid, so one rule covers 390 px (H1 34 / H2 26 / body 16) and 1440 px (H1 60 / H2 40 / body 17) ---- */
  --fs-h1: clamp(2.125rem, 1.4rem + 3vw, 3.75rem);
  --fs-h2: clamp(1.625rem, 1.1rem + 1.6vw, 2.5rem);
  --fs-h3: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  --fs-lead: clamp(1.0625rem, .98rem + .4vw, 1.25rem);
  --fs-body: clamp(1rem, .9rem + .3vw, 1.0625rem);
  --fs-small: .875rem;
  --fs-xs: .75rem;
  --lh-head: 1.1;
  --lh-body: 1.6;

  /* ---- layout ---- */
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 72px;
  --header-h-c: 60px;
  --tap: 44px;                           /* minimum touch target */

  /* ---- layers ---- */
  --z-header: 50; --z-bar: 60; --z-overlay: 80; --z-sheet: 90; --z-toast: 100;

  /* ---- motion (BRIEF: reveal = fade + 16-24 px rise, children staggered 60-80 ms) ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-1: .2s; --dur-2: .35s; --dur-3: .65s;
  --rise: 20px;
  --stagger: 70ms;
}

/* ==========================================================================
   Accents. Doctor: one rule per catalogue speciality (generated from specialty-catalog.json: --accent / --accent-soft are
   the catalogue's own values; --accent-ink = the accent mixed 28 % toward black, except the three approved presets, which keep
   the inks the owner saw; --accent-2 = the accent itself unless the preset designed a second colour).
   ========================================================================== */
[data-spec="general-medicine"]{--accent:#0B4F8A;--accent-ink:#083B69;--accent-soft:#E0F2FE;--accent-2:#0D9488;--accent-2-ink:#0F766E}
[data-spec="gynaecology"]{--accent:#BE185D;--accent-ink:#9D174D;--accent-soft:#FCE7F3;--accent-2:#DB2777;--accent-2-ink:#9D174D}
[data-spec="cardiology"]{--accent:#DC2626;--accent-ink:#B91C1C;--accent-soft:#FEE2E2;--accent-2:#DC2626;--accent-2-ink:#B91C1C}
[data-spec="dermatology"]{--accent:#7C3AED;--accent-ink:#592AAB;--accent-soft:#EDE9FE;--accent-2:#7C3AED;--accent-2-ink:#592AAB}
[data-spec="paediatrics"]{--accent:#C2410C;--accent-ink:#8C2F09;--accent-soft:#FFEDD5;--accent-2:#C2410C;--accent-2-ink:#8C2F09}
[data-spec="ent"]{--accent:#0E7490;--accent-ink:#0A5468;--accent-soft:#CFFAFE;--accent-2:#0E7490;--accent-2-ink:#0A5468}
[data-spec="orthopaedics"]{--accent:#1D4ED8;--accent-ink:#15389C;--accent-soft:#DBEAFE;--accent-2:#1D4ED8;--accent-2-ink:#15389C}
[data-spec="ophthalmology"]{--accent:#0F766E;--accent-ink:#0B554F;--accent-soft:#CCFBF1;--accent-2:#0F766E;--accent-2-ink:#0B554F}
[data-spec="dentistry"]{--accent:#0369A1;--accent-ink:#024C74;--accent-soft:#E0F2FE;--accent-2:#0369A1;--accent-2-ink:#024C74}
[data-spec="psychiatry"]{--accent:#4F46E5;--accent-ink:#3932A5;--accent-soft:#E0E7FF;--accent-2:#4F46E5;--accent-2-ink:#3932A5}
[data-spec="neurology"]{--accent:#7E22CE;--accent-ink:#5B1894;--accent-soft:#F3E8FF;--accent-2:#7E22CE;--accent-2-ink:#5B1894}
[data-spec="gastroenterology"]{--accent:#B45309;--accent-ink:#823C06;--accent-soft:#FEF3C7;--accent-2:#B45309;--accent-2-ink:#823C06}
[data-spec="pulmonology"]{--accent:#075985;--accent-ink:#054060;--accent-soft:#E0F2FE;--accent-2:#075985;--accent-2-ink:#054060}
[data-spec="endocrinology"]{--accent:#15803D;--accent-ink:#0F5C2C;--accent-soft:#DCFCE7;--accent-2:#15803D;--accent-2-ink:#0F5C2C}
[data-spec="urology"]{--accent:#1E40AF;--accent-ink:#162E7E;--accent-soft:#DBEAFE;--accent-2:#1E40AF;--accent-2-ink:#162E7E}
[data-spec="general-surgery"]{--accent:#334155;--accent-ink:#252F3D;--accent-soft:#F1F5F9;--accent-2:#334155;--accent-2-ink:#252F3D}

/* Clinic: blue + green. */
[data-kind="clinic"] {
  --accent: #1D4ED8;
  --accent-ink: #1E3A8A;
  --accent-soft: #EFF6FF;
  --accent-2: #16A34A;
  --accent-2-ink: #15803D;
  --accent-2-soft: #F0FDF4;
  --accent-tint: #DBEAFE;
}
/* Pharmacy: WellCare green (default), alt blue = "Chemist & Druggist" (data-preset="cd"). */
[data-kind="pharmacy"] {
  --accent: #047857;
  --accent-ink: #064E3B;
  --accent-soft: #ECFDF5;
  --accent-2: #0D9488;
  --accent-2-ink: #0F766E;
  --accent-2-soft: #CCFBF1;
  --accent-tint: #D1FAE5;
}
[data-kind="pharmacy"][data-preset="cd"] {
  --accent: #1E40AF;
  --accent-ink: #1E3A8A;
  --accent-soft: #EFF6FF;
  --accent-2: #0369A1;
  --accent-2-ink: #075985;
  --accent-2-soft: #E0F2FE;
  --accent-tint: #DBEAFE;
}

/* ==========================================================================
   Base the whole family shares.
   ========================================================================== */
[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--header-h-c) + 8px); }   /* an #anchor jump lands below the sticky header */
.is-locked { overflow: hidden; }                       /* body while a sheet is open */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ==========================================================================
   MOTION STATES -- the stylesheet half of motion.js (the attribute contract is documented at the top of that file).
   Everything that starts hidden is gated on `html.js:not(.rm)`: `.js` is set by boot.js (and motion.js), `.rm` by reduced motion
   or `?static`. Without `.js`, or if the script fails (it then removes `.js`), or under `.rm`, the page is simply shown.
   `:is()` is not understood by a very old browser: that drops the whole hiding rule, so content stays visible there too.
   ========================================================================== */

/* -- reveal: [data-reveal] (one element) and the children of [data-reveal-stagger] --
      hidden until the script adds .is-in (fade + rise, delayed by --i x --stagger), then .is-settled removes OUR transition
      so the template's own hover transitions are not slowed by the stagger delay. [data-reveal="fade"] = fade only. */
html.js:not(.rm) :is([data-reveal], [data-reveal-stagger] > *):not(.is-settled) {
  transition: opacity var(--dur-3) var(--ease) calc(var(--i, 0) * var(--stagger)),
              transform var(--dur-3) var(--ease) calc(var(--i, 0) * var(--stagger));
}
html.js:not(.rm) :is([data-reveal], [data-reveal-stagger] > *):not(.is-in, .is-settled) {
  opacity: 0;
  transform: translate3d(0, var(--rise), 0);
}
html.js:not(.rm) [data-reveal="fade"]:not(.is-in, .is-settled) { transform: none; }

/* -- action bar [data-actionbar]: slides away until the script has seen the hero scroll past (.is-shown). Without JS it
      is simply always there. -- */
.js [data-actionbar] {
  transform: translate3d(0, 110%, 0);
  visibility: hidden;                      /* never painted while away (a full-page screenshot would show it under the fold) */
  transition: transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
}
.js [data-actionbar].is-shown {
  transform: none;
  visibility: visible;
  transition: transform var(--dur-2) var(--ease), visibility 0s;
}

/* -- bottom sheet / modal [data-sheet] + its overlay [data-sheet-overlay]: the SCRIPT owns open/closed (.is-open, inert,
      aria-hidden, focus, Escape, scroll lock, inline `visibility: hidden` while closed -- put back after the sheet's own
      close transition -- the one the CLOSED state declares, so put the sheet's `transition` on the base selector, not only
      on `.is-open` -- so a slide-out still plays and a closed sheet is never painted); the template owns the look (a
      bottom sheet slides with transform, a modal fades). Without JS there is no sheet: the "Book" triggers are plain
      links to the inline form. -- */
html:not(.js) [data-sheet], html:not(.js) [data-sheet-overlay] { display: none; }
/* only a sheet WITH an id is motion.js's: the booking sheet (empty data-sheet, `hidden` while closed) is booking.js's and the template's */
[data-sheet-overlay]:not([data-sheet-overlay=""]) { pointer-events: none; opacity: 0; }
[data-sheet-overlay]:not([data-sheet-overlay=""]).is-open { pointer-events: auto; opacity: 1; }

/* -- pinned story [data-pin]: the wrapper is tall (the scroll distance), the stage sticks and stays on screen while the
      steps advance. Only while .is-pinned (script: no reduced motion, no ?nopin, viewport tall enough); otherwise the story
      is a plain list -- the template shows every step and every scene stacked. The template styles .is-on / .is-done on
      [data-pin-step], [data-pin-scene] and the rail marks, and reads --p (0..1) for a fill. -- */
[data-pin].is-pinned {
  min-height: calc(100vh + var(--pin-n, 4) * var(--pin-per, 75vh));
}
[data-pin].is-pinned > [data-pin-stage] {
  position: sticky;
  top: var(--pin-top, var(--header-h-c));
  height: calc(100vh - var(--pin-top, var(--header-h-c)));
  height: calc(100svh - var(--pin-top, var(--header-h-c)));
}

/* -- snap carousel [data-snap]: native scroll-snap (swipe works without JS); the script adds arrows + dots -- */
[data-snap] {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
[data-snap]::-webkit-scrollbar { display: none; }
[data-snap] > * { scroll-snap-align: start; }
html:not(.js) :is([data-snap-prev], [data-snap-next], [data-snap-dots], [data-carousel-nav], [data-carousel-dots], [data-tabs]) { display: none; }

/* -- [data-carousel] (the shared reviews row), [data-tabs] (lab tabs), [data-filters] (chips): the template styles them; the page is
      complete without JS (the row scrolls, every tab panel is in the HTML, the filter chips ship `hidden` and the script un-hides
      them), so only the controls that need JS are hidden here, and only without it. -- */

/* -- draw [data-draw]: the script writes --p (0..1) and the class .is-drawing. Recipes for the template: a vertical rail
      `transform: scaleY(var(--p, 1)); transform-origin: top`, a horizontal one `width: calc(var(--p, 1) * 100%)`. The
      fallback 1 means "fully drawn" without JS. -- */

/* -- reduced motion / print / a reader that cannot scroll: everything is just there. The script also marks every element
      revealed under reduced motion; this block covers the instant before it runs. -- */
@media (prefers-reduced-motion: reduce) {
  .js :is([data-reveal], [data-reveal-stagger] > *):not(.is-in, .is-settled) { opacity: 1; transform: none; }
  .js :is([data-reveal], [data-reveal-stagger] > *) { transition: none; }
  .js [data-actionbar], .js [data-actionbar].is-shown { transition: none; }
  [data-pin].is-pinned { min-height: 0; }
  [data-pin].is-pinned > [data-pin-stage] { position: static; height: auto; }
}
@media print {
  .js :is([data-reveal], [data-reveal-stagger] > *):not(.is-in, .is-settled) { opacity: 1; transform: none; }
  .js [data-actionbar] { display: none; }
  [data-sheet], [data-sheet-overlay] { display: none !important; }
  [data-pin].is-pinned { min-height: 0; }
  [data-pin].is-pinned > [data-pin-stage] { position: static; height: auto; }
}