/* ==========================================================================
   Careivo — marketing site
   --------------------------------------------------------------------------
   Contents
     1. Tokens (light + dark)         8. Journey, tags, prescription engine
     2. Base, type, buttons           9. Routing doors, bridge, door artwork
     3. Nav + sign-in menu           10. Cover (homepage hero + artwork)
     4. Hero, product mockup, rates  11. 3D depth rig, resilient layout
     5. Metrics, sections, cards     12. Interactive: search, order, calc, scan
     6. Distributor band, forms      13. WhatsApp, toast, upload
     7. Footer                       14. Utilities

   Direction: bold modern SaaS.
   Saturated emerald-to-teal gradients, real depth from layered shadows, a
   built product mockup as the hero image, drawn SVG iconography, and dense
   sections with little dead space.

   All imagery on this page is constructed in HTML/CSS/SVG. No stock photos,
   no external image requests.
   ========================================================================== */

:root {
  /* Ground. Warm white, biased toward the mark rather than neutral grey. */
  --bg:        #FFFFFF;
  --bg-alt:    #F8F5F2;
  --surface:   #FFFFFF;
  --surface-2: #FCFAF8;

  --ink:   #1F1E1C;
  --ink-2: #57524D;
  --ink-3: #8B857E;

  /* Inverted sections go warm black, never coloured: the logo is red on white
     and white on red, so the page keeps that three-colour discipline. */
  --ink-900: #1A1917;
  --ink-800: #2A2621;

  /* Brand. --brand is the logo vermilion; the rest is a scale around it. */
  --brand-900: #4A1206;
  --brand-800: #7A1B08;
  --brand-700: #B02209;
  --brand-600: #D22A0F;
  --brand:     #EA3113;
  --brand-400: #F2603F;
  --brand-300: #F79579;
  --brand-200: #FBC6B6;
  --brand-50:  #FDEEEA;
  --brand-ink: #1F1E1C;

  /* Semantic only, held away from the brand hue so "verified" never reads as
     an error and an error never reads as branding. */
  --ok:      #17795A;
  --ok-lt:   #E8F5F0;
  --rose:    #B3200A;
  --rose-lt: #FDEEEA;
  --amber:    #B45309;
  --amber-lt: #FEF6E7;

  --line:   #E7E0DA;
  --line-2: #F2ECE7;

  /* Flat, like the mark. --grad-cta is a solid colour on purpose. */
  --grad-hero: linear-gradient(150deg, #1A1917 0%, #241D19 52%, #3B1E13 100%);
  --grad-cta:  #EA3113;
  --grad-dark: linear-gradient(150deg, #1F1E1C 0%, #2C2723 100%);
  --slate-900: #1A1917;
  --slate-800: #2A2621;

  --sh-sm: 0 1px 2px rgba(31, 30, 28, .05), 0 1px 3px rgba(31, 30, 28, .04);
  --sh-md: 0 1px 2px rgba(31, 30, 28, .05), 0 6px 16px -8px rgba(31, 30, 28, .14);
  --sh-lg: 0 2px 4px rgba(31, 30, 28, .05), 0 16px 34px -16px rgba(31, 30, 28, .20);
  --sh-xl: 0 6px 14px rgba(31, 30, 28, .08), 0 36px 70px -28px rgba(31, 30, 28, .32);

  --on-grad:      #FFFFFF;
  --on-grad-mute: #B5ADA6;
  --on-grad-line: rgba(255, 255, 255, .14);

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 1200px;
  --gutter: 24px;
  /* The mark is a hard square, so the page stays crisp rather than round. */
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #131110;
    --bg-alt:    #1A1715;
    --surface:   #1C1918;
    --surface-2: #23201D;
    --ink:   #F3EEEA;
    --ink-2: #B5ACA4;
    --ink-3: #8A817A;
    /* Accents invert: on a dark ground the brand has to come up, not down. */
    --brand-700: #FF7B59;
    --brand-600: #FF8B6B;
    --brand-200: #6E2614;
    --brand-50:  #2E140D;
    --ok:      #34C79A;
    --ok-lt:   #102B23;
    --rose:    #FF7B59;
    --rose-lt: #2E140D;
    --amber-lt: #2A1E0C;
    --amber:    #FBBF24;
    --line:   #302A26;
    --line-2: #241F1C;
    --sh-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --sh-md: 0 2px 4px rgba(0, 0, 0, .4), 0 10px 24px -8px rgba(0, 0, 0, .6);
    --sh-lg: 0 4px 8px rgba(0, 0, 0, .4), 0 24px 48px -14px rgba(0, 0, 0, .7);
    --sh-xl: 0 10px 20px rgba(0, 0, 0, .5), 0 48px 90px -24px rgba(0, 0, 0, .8);
  }
}

*, *::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.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

.shell { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800; line-height: 1.05; letter-spacing: -0.035em;
  text-wrap: balance; margin: 0;
}
h1 { font-size: clamp(2.5rem, 5.6vw, 4.25rem); font-weight: 900; }
h2 { font-size: clamp(2rem, 3.8vw, 3rem); font-weight: 900; }
h3 { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; }
h4 { font-size: 1rem; font-weight: 800; letter-spacing: -0.015em; }

.eyebrow {
  display: inline-block; font-family: var(--font-mono);
  font-size: .8125rem; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 1rem;
}
.lede { font-size: 1.1875rem; color: var(--ink-2); max-width: 36em; line-height: 1.6; }

.grad-text {
  background: linear-gradient(96deg, #FF8B6B 0%, #FBC6B6 60%, #FFFFFF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-body); font-size: .9375rem; font-weight: 700;
  letter-spacing: -0.01em; padding: .8125rem 1.5rem;
  border: 1px solid transparent; border-radius: 3px; cursor: pointer; white-space: nowrap;
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease,
              background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn svg { width: 16px; height: 16px; }
.btn--primary {
  background: var(--brand); color: #FFFFFF;
}
.btn--primary:hover { background: var(--brand-600); transform: translateY(-1px); }
.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--sh-sm); }
.btn--ghost:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.btn--glass { background: rgba(255,255,255,.10); color: #FFFFFF; border-color: rgba(255,255,255,.28); backdrop-filter: blur(8px); }
.btn--glass:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }
.btn--white { background: #FFFFFF; color: var(--brand-800); box-shadow: var(--sh-md); }
.btn--white:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); }
.btn--lg { padding: 1rem 1.875rem; font-size: 1rem; }
.btn--wide { width: 100%; }

.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav__inner { display: flex; align-items: center; gap: 2rem; min-height: 68px; }
.logo { display: inline-flex; align-items: center; gap: .46em; }
.logo__mark { width: 1.16em; height: 1.16em; flex: none; display: block; }
.logo__wm {
  font-family: var(--font-display); font-weight: 900;
  letter-spacing: -0.04em; line-height: 1;
}
/* The tittle on the "i" is a square in the brand colour. --dot-y tunes its
   height above the baseline; the square is drawn over the round tittle. */
.logo__i { position: relative; --dot-y: .805em; --dot-s: .205em; }
.logo__i::after {
  content: ""; position: absolute; left: 50%; bottom: var(--dot-y);
  width: var(--dot-s); height: var(--dot-s);
  transform: translateX(calc(-50% + .018em)); background: var(--brand);
}

.brand {
  display: inline-flex; align-items: center; gap: .625rem;
  font-family: var(--font-display); font-weight: 900; font-size: 1.1875rem;
  letter-spacing: -0.04em; color: var(--ink);
}
.nav__links { display: flex; gap: 1.75rem; margin-left: auto; font-size: .9375rem; font-weight: 500; color: var(--ink-2); }
.nav__links a { transition: color .15s ease; }
.nav__links a:hover { color: var(--brand-700); }
.nav__cta { flex-shrink: 0; }
.nav__toggle {
  display: none; margin-left: auto;
  background: transparent; border: 1px solid var(--line);
  border-radius: 3px; padding: .4rem .6rem; color: var(--ink); cursor: pointer; font-size: 1rem;
}

.hero {
  position: relative; background: var(--grad-hero); color: var(--on-grad);
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(9rem, 15vw, 13rem);
  overflow: hidden; isolation: isolate;
  --on-grad-mute: #DDD5CF;
}
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; z-index: -1; pointer-events: none; }
.hero::before {
  width: 640px; height: 640px; top: -220px; right: -160px;
  background: radial-gradient(circle, rgba(247,149,121,.40) 0%, transparent 68%);
}
.hero::after {
  width: 520px; height: 520px; bottom: -200px; left: -180px;
  background: radial-gradient(circle, rgba(234,49,19,.26) 0%, transparent 70%);
}
.hero__inner { position: relative; text-align: center; max-width: 52rem; margin-inline: auto; }
.pill {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px); color: #FFFFFF; font-size: .8125rem; font-weight: 600;
  padding: .4375rem .875rem; border-radius: 3px; margin-bottom: 1.75rem;
}
.pill__dot { width: 7px; height: 7px; border-radius: 50%; background: #FF8B6B; box-shadow: 0 0 0 3px rgba(255,139,107,.30); }
.hero h1 { color: #FFFFFF; margin-bottom: 1.25rem; }
.hero__lede { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--on-grad-mute); max-width: 40em; margin: 0 auto 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .875rem; justify-content: center; margin-bottom: 1.25rem; }
.hero__note { font-size: .875rem; color: var(--on-grad-mute); display: inline-flex; align-items: center; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.hero__note svg { width: 15px; height: 15px; flex-shrink: 0; }

.showcase { margin-top: clamp(-11rem, -13vw, -7.5rem); position: relative; z-index: 5; }
.app {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-xl); overflow: hidden; max-width: 1060px; margin-inline: auto;
}
.app__chrome { display: flex; align-items: center; gap: .75rem; padding: .8125rem 1.125rem; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.app__dots { display: flex; gap: .375rem; }
.app__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); display: block; }
.app__url {
  flex: 1; text-align: center; font-family: var(--font-mono); font-size: .75rem;
  color: var(--ink-3); background: var(--bg); border: 1px solid var(--line-2);
  border-radius: 3px; padding: .25rem .75rem; max-width: 260px; margin-inline: auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app__body { display: grid; grid-template-columns: 190px minmax(0, 1fr); }
.app__side { border-right: 1px solid var(--line); padding: 1.125rem .875rem; background: var(--surface-2); min-width: 0; }
.app__sideLabel { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding: 0 .5rem; margin-bottom: .625rem; }
.app__nav { display: flex; flex-direction: column; gap: .125rem; }
.app__navItem { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 600; color: var(--ink-2); padding: .4375rem .5rem; border-radius: 3px; }
.app__navItem svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .8; }
.app__navItem.is-active { background: var(--brand-50); color: var(--brand-700); }
.app__main { padding: 1.125rem 1.25rem 1.25rem; min-width: 0; }
.app__search { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r-sm); padding: .625rem .75rem; font-size: .875rem; font-weight: 600; margin-bottom: .875rem; }
.app__search svg { width: 16px; height: 16px; color: var(--ink-3); flex-shrink: 0; }
.app__searchMeta { margin-left: auto; font-family: var(--font-mono); font-size: .6875rem; color: var(--ink-3); }
.app__scroll { overflow-x: auto; min-width: 0; }

.rates { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.rates th { font-family: var(--font-mono); font-size: .625rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: .5rem .625rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rates td { padding: .625rem; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.rates tbody tr:last-child td { border-bottom: none; }
.rates .r-num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.rates .r-firm { font-weight: 700; }
.rates .is-best td { background: var(--brand-50); }
.rates .is-best .r-num { color: var(--brand-600); }
.rates .is-best .r-firm { color: var(--brand-700); }

.chip { display: inline-block; font-family: var(--font-mono); font-size: .625rem; font-weight: 600; padding: .1875rem .4375rem; border-radius: 2px; }
.chip--scheme { background: var(--brand-50); color: var(--brand-700); }
.chip--none { color: var(--ink-3); }
.chip--low { background: var(--amber-lt); color: var(--amber); }
.chip--best { background: var(--grad-cta); color: #FFFFFF; border-radius: 3px; padding: .1875rem .5rem; }

.app__foot { display: flex; align-items: center; gap: .875rem; flex-wrap: wrap; margin-top: .875rem; padding-top: .875rem; border-top: 1px dashed var(--line); }
.app__saving { font-family: var(--font-mono); font-size: .8125rem; font-weight: 600; color: var(--rose); background: var(--rose-lt); border-radius: 3px; padding: .3125rem .75rem; }
.app__cart { margin-left: auto; font-size: .8125rem; color: var(--ink-2); font-weight: 600; }
.app__cart b { font-family: var(--font-mono); color: var(--ink); }

.metrics { padding-block: clamp(3rem, 5vw, 4.5rem) clamp(1rem, 2vw, 2rem); }
.metrics__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.metric {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1.5rem 1.5rem 1.375rem; box-shadow: var(--sh-sm);
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease;
}
.metric:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.metric__icon { width: 38px; height: 38px; border-radius: 4px; background: var(--bg-alt); display: grid; place-items: center; margin-bottom: .875rem; }
.metric__icon svg { width: 19px; height: 19px; color: var(--brand-600); }
.metric__fig { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 900; letter-spacing: -0.045em; line-height: 1; margin-bottom: .3125rem; }
.metric__label { font-size: .9375rem; color: var(--ink-2); }

.sec { padding-block: clamp(3.5rem, 6.5vw, 6rem); }
.sec--alt { background: var(--bg-alt); }
.sec__head { max-width: 44rem; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.sec__head--center { margin-inline: auto; text-align: center; }
.sec__head h2 { margin-bottom: .875rem; }

.split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.75rem, 3.5vw, 3rem); align-items: start; }
.timeline { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-sm); padding: .5rem 1.375rem; min-width: 0; }
.tl { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: 1rem; padding-block: 1.0625rem; border-bottom: 1px solid var(--line-2); }
.tl:last-child { border-bottom: none; }
.tl__time { font-family: var(--font-mono); font-size: .75rem; font-weight: 500; color: var(--brand); padding-top: .1875rem; }
.tl__what { font-weight: 700; font-size: .9375rem; margin-bottom: .1875rem; }
.tl__detail { font-size: .9375rem; color: var(--ink-2); }

.spotlight { background: var(--grad-dark); color: var(--on-grad); border-radius: var(--r-lg); padding: 1.875rem; box-shadow: var(--sh-lg); position: relative; overflow: hidden; min-width: 0; --on-grad-mute: #A8A29B; }
.spotlight::after { content: ""; position: absolute; width: 300px; height: 300px; top: -130px; right: -110px; border-radius: 50%; background: radial-gradient(circle, rgba(234,49,19,.26) 0%, transparent 70%); pointer-events: none; }
.spotlight h3 { color: #FFFFFF; margin-bottom: .875rem; position: relative; }
.spotlight p { color: var(--on-grad-mute); font-size: 1rem; margin-bottom: .875rem; position: relative; }
.spotlight p:last-of-type { margin-bottom: 0; }
.spotlight strong { color: #FFFFFF; }
.spotlight__stat { position: relative; display: flex; align-items: baseline; gap: .625rem; margin-top: 1.375rem; padding-top: 1.25rem; border-top: 1px solid var(--on-grad-line); }
.spotlight__num { font-family: var(--font-display); font-size: 2.25rem; font-weight: 900; letter-spacing: -0.05em; line-height: 1; color: #FF8B6B; }
.spotlight__cap { font-size: .8125rem; color: var(--on-grad-mute); }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.step { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.625rem 1.5rem; box-shadow: var(--sh-sm); transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease; min-width: 0; }
.step:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.step__n { width: 42px; height: 42px; border-radius: 4px; background: var(--brand); color: #FFFFFF; display: grid; place-items: center; font-family: var(--font-mono); font-size: .875rem; font-weight: 600; margin-bottom: 1.0625rem; }
.step h3 { margin-bottom: .5rem; }
.step p { font-size: 1rem; color: var(--ink-2); }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.625rem 1.5rem; box-shadow: var(--sh-sm); transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, border-color .2s ease; min-width: 0; }
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--brand-200); }
.card__icon { width: 44px; height: 44px; border-radius: 4px; background: var(--bg-alt); display: grid; place-items: center; margin-bottom: 1.0625rem; }
.card__icon svg { width: 21px; height: 21px; color: var(--brand-600); }
.card h3 { margin-bottom: .5rem; }
.card p { font-size: 1rem; color: var(--ink-2); }

.band { background: var(--grad-dark); color: var(--on-grad); position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(3.5rem, 6.5vw, 6rem); --on-grad-mute: #A8A29B; }
.band::before { content: ""; position: absolute; z-index: -1; width: 620px; height: 620px; border-radius: 50%; top: -240px; left: -160px; background: radial-gradient(circle, rgba(234,49,19,.18) 0%, transparent 70%); }
.band h2 { color: #FFFFFF; }
.band .eyebrow { color: #FF8B6B; }
.band .lede { color: var(--on-grad-mute); }
.band__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-bottom: 2.5rem; }
.band__item { background: rgba(255,255,255,.07); border: 1px solid var(--on-grad-line); border-radius: var(--r-md); padding: 1.5rem; backdrop-filter: blur(6px); min-width: 0; }
.band__item h3 { color: #FFFFFF; margin-bottom: .5rem; display: flex; align-items: center; gap: .625rem; }
.band__item h3 svg { width: 19px; height: 19px; color: #FF8B6B; flex-shrink: 0; }
.band__item p { font-size: 1rem; color: var(--on-grad-mute); }

.signup { max-width: 40rem; margin-inline: auto; }
.signup__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: clamp(1.75rem, 4vw, 2.75rem); }
.signup__card h2 { margin-bottom: .625rem; }
.signup__blurb { color: var(--ink-2); margin-bottom: 1.75rem; }
.fgrid { display: grid; gap: 1rem; }
.fgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: flex; flex-direction: column; gap: .375rem; min-width: 0; }
.field label { font-size: .8125rem; font-weight: 700; }
.field-input, .field-select {
  width: 100%; font-family: var(--font-body); font-size: .9375rem; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .75rem .8125rem;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.field-select { appearance: none; }
.field-input:focus, .field-select:focus { outline: none; border-color: var(--brand-400); background: var(--surface); box-shadow: 0 0 0 4px rgba(234,49,19,.16); }
.field-input::placeholder { color: var(--ink-3); }
.field--bad .field-input, .field--bad .field-select { border-color: var(--rose); }
.field-error { font-size: .8125rem; color: var(--rose); margin: 0; }
.alert { background: var(--rose-lt); border: 1px solid var(--rose); border-radius: var(--r-sm); padding: .75rem .875rem; font-size: .875rem; color: var(--rose); margin-bottom: 1.25rem; }
.form-note { font-size: .8125rem; color: var(--ink-3); text-align: center; margin-top: .875rem; }

.receipt { max-width: 34rem; margin-inline: auto; text-align: center; padding-block: clamp(4rem, 11vw, 7rem); }
.receipt__mark { width: 64px; height: 64px; border-radius: 6px; background: var(--brand); display: grid; place-items: center; margin: 0 auto 1.5rem; }
.receipt__mark svg { width: 30px; height: 30px; color: #FFFFFF; }
.receipt h1 { font-size: clamp(2rem, 4.5vw, 2.75rem); margin-bottom: 1rem; }
.receipt p { color: var(--ink-2); margin-bottom: 1.25rem; }

.foot { background: var(--slate-900); color: var(--on-grad-mute); padding-block: 3rem 2.25rem; --on-grad-mute: #A8A29B; }
.foot__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; }
.foot__blurb { font-size: .9375rem; max-width: 24em; margin-top: .875rem; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: .9375rem; }
.foot__nav a:hover { color: #FFFFFF; }
.foot__legal { margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--on-grad-line); font-family: var(--font-mono); font-size: .75rem; }
.foot__legal a { color: #FF8B6B; }
.foot .brand { color: #FFFFFF; }

/* Resilient layout — nothing may push the page sideways at any width */
.split > *, .steps > *, .cards > *, .band__grid > *,
.metrics__grid > *, .tl > *, .fgrid > * { min-width: 0; }
p, dd, dt, li, td, th, h1, h2, h3, h4, label { overflow-wrap: break-word; }

@media (max-width: 980px) {
  .metrics__grid, .steps, .cards, .band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .app__body { grid-template-columns: minmax(0, 1fr); }
  .app__side { display: none; }
}

@media (max-width: 720px) {
  .metrics__grid, .steps, .cards, .band__grid, .fgrid--2 { grid-template-columns: minmax(0, 1fr); }
  .nav__toggle { display: block; }
  .nav__cta { display: none; }
  .nav__links {
    display: none; position: absolute; inset-inline: 0; top: 100%;
    flex-direction: column; gap: 0; background: var(--bg);
    border-bottom: 1px solid var(--line); padding: .25rem var(--gutter) 1rem;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding-block: .8125rem; border-bottom: 1px solid var(--line-2); }
  .hero { padding-block: 2.5rem 8rem; }
  .showcase { margin-top: -6.5rem; }
  .tl { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
}

/* ==========================================================================
   Platform journey, prescription AI, and build-status marking
   ========================================================================== */

/* Status chips — the page must never imply something is live when it isn't. */
.tag {
  display: inline-flex; align-items: center; gap: .375rem;
  font-family: var(--font-mono); font-size: .625rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .25rem .5rem; border-radius: 3px; white-space: nowrap;
}
.tag i { width: 5px; height: 5px; border-radius: 50%; display: block; }
.tag--live  { background: var(--brand-50);  color: var(--brand-700); }
.tag--live i  { background: var(--brand-600); box-shadow: 0 0 0 3px rgba(234,49,19,.20); }
.tag--build { background: var(--amber-lt); color: var(--amber); }
.tag--build i { background: var(--amber); }

/* --- The journey: three phases, each holding its steps ------------------- */

.journey { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }

.phase {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.625rem 1.5rem 1.5rem;
  box-shadow: var(--sh-sm);
  display: flex; flex-direction: column;
  min-width: 0;
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease;
}
.phase:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }

/* The middle phase is the differentiated one — give it the accent. */
.phase--key { border-color: var(--brand-200); box-shadow: var(--sh-md); }
.phase--key::before {
  content: ""; position: absolute; inset-inline: 1.5rem; top: -1px; height: 3px;
  background: var(--grad-cta); border-radius: 0 0 3px 3px;
}

.phase__top { display: flex; align-items: center; gap: .625rem; margin-bottom: .375rem; flex-wrap: wrap; }
.phase__ord {
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .12em; color: var(--brand);
}
.phase h3 { margin-bottom: 1.125rem; font-size: 1.1875rem; }

.phase__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8125rem; }
.phase__step { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: .75rem; align-items: start; }
.phase__dot {
  width: 26px; height: 26px; border-radius: 3px;
  background: var(--bg-alt); color: var(--brand-600);
  display: grid; place-items: center; flex-shrink: 0;
}
.phase__dot svg { width: 14px; height: 14px; }
.phase__step b { display: block; font-size: .9375rem; font-weight: 700; margin-bottom: .0625rem; }
.phase__step span { font-size: .9375rem; color: var(--ink-2); }

/* --- Prescription AI: handwriting in, structured data out --------------- */

.pipeline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.1fr);
  gap: 1.5rem; align-items: center;
}
.pipeline__arrow {
  width: 46px; height: 46px; border-radius: 3px;
  background: var(--brand); color: #FFFFFF;
  display: grid; place-items: center; flex-shrink: 0;
}
.pipeline__arrow svg { width: 22px; height: 22px; }

/* The scanned prescription */
.script {
  background: #FFFDF6;
  border: 1px solid #E8E2D2;
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  padding: 1.25rem 1.375rem 1.5rem;
  transform: rotate(-1.2deg);
  min-width: 0;
  color: #1B2320;
}
.script__head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  border-bottom: 1px solid #E8E2D2; padding-bottom: .75rem; margin-bottom: .875rem;
}
.script__clinic { font-family: var(--font-display); font-weight: 800; font-size: .9375rem; letter-spacing: -0.02em; }
.script__reg { font-size: .6875rem; color: #7A7361; margin-top: .125rem; }
.script__rx { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; color: #B0261F; line-height: 1; }
.script__lines { font-family: "Caveat", "Segoe Script", cursive; font-size: 1.3125rem; line-height: 1.75; color: #26346B; }
.script__lines div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.script__sign {
  margin-top: 1rem; padding-top: .625rem; border-top: 1px dashed #E0D9C6;
  font-family: "Caveat", cursive; font-size: 1.25rem; color: #26346B;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
}
.script__date { font-family: var(--font-mono); font-size: .6875rem; color: #7A7361; }

/* The structured output */
.extract {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  overflow: hidden; min-width: 0;
}
.extract__head {
  display: flex; align-items: center; gap: .625rem; flex-wrap: wrap;
  padding: .8125rem 1rem; background: var(--surface-2); border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.extract__row { padding: .8125rem 1rem; border-bottom: 1px solid var(--line-2); }
.extract__row:last-of-type { border-bottom: none; }
.extract__line { display: flex; align-items: baseline; gap: .625rem; flex-wrap: wrap; }
.extract__drug { font-weight: 700; font-size: .9375rem; }
.extract__dose {
  font-family: var(--font-mono); font-size: .75rem; color: var(--ink-2);
  background: var(--bg-alt); border-radius: 2px; padding: .125rem .4375rem;
}
.extract__conf { margin-left: auto; font-family: var(--font-mono); font-size: .6875rem; font-weight: 600; }
.extract__conf--ok  { color: var(--brand-600); }
.extract__conf--low { color: var(--amber); }
.extract__bar { height: 3px; border-radius: 3px; background: var(--line-2); margin-top: .5rem; overflow: hidden; }
.extract__bar i { display: block; height: 100%; border-radius: 3px; background: var(--grad-cta); }
.extract__bar--low i { background: var(--amber); }
.extract__flag { font-size: .75rem; color: var(--amber); margin-top: .375rem; display: flex; align-items: center; gap: .375rem; }
.extract__flag svg { width: 13px; height: 13px; flex-shrink: 0; }

.extract__verify {
  display: flex; align-items: center; gap: .625rem; flex-wrap: wrap;
  padding: .875rem 1rem; background: var(--brand-50); border-top: 1px solid var(--line);
  font-size: .8125rem; color: var(--brand-700); font-weight: 600;
}
.extract__verify svg { width: 17px; height: 17px; flex-shrink: 0; }

/* --- Safety note -------------------------------------------------------- */

.guard {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 1rem;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--brand-600);
  border-radius: var(--r-md); padding: 1.375rem 1.5rem;
  box-shadow: var(--sh-sm); margin-top: 2rem;
}
.guard__icon {
  width: 46px; height: 46px; border-radius: 4px; background: var(--bg-alt);
  display: grid; place-items: center;
}
.guard__icon svg { width: 22px; height: 22px; color: var(--brand-600); }
.guard h3 { margin-bottom: .375rem; }
.guard p { font-size: .9375rem; color: var(--ink-2); }

@media (max-width: 980px) {
  .journey { grid-template-columns: minmax(0, 1fr); }
  .pipeline { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .pipeline__arrow { transform: rotate(90deg); margin-inline: auto; }
  .script { transform: none; }
  .guard { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Routing homepage — the two doors
   ========================================================================== */

.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }

.door {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 2rem 1.875rem 1.875rem;
  box-shadow: var(--sh-md);
  min-width: 0;
  overflow: hidden;
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, border-color .2s ease;
}
.door:hover { transform: translateY(-5px); box-shadow: var(--sh-xl); border-color: var(--brand-200); }
.door::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px;
  background: var(--grad-cta);
}
.door--soon::before { background: linear-gradient(115deg, #B45309 0%, #F59E0B 100%); }

.door__top { display: flex; align-items: center; gap: .875rem; margin-bottom: 1.125rem; flex-wrap: wrap; }

.door h3 { font-size: 1.5rem; letter-spacing: -0.03em; }
.door__lede { color: var(--ink-2); margin-bottom: 1.25rem; }

.door__list { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; flex-direction: column; gap: .625rem; }
.door__list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: .625rem; font-size: 1rem; color: var(--ink-2); }
.door__list svg { width: 18px; height: 18px; color: var(--brand-600); margin-top: .1875rem; }
.door--soon .door__list svg { color: var(--amber); }

.door__cta { margin-top: auto; }

/* The bridge line between the two doors */
.bridge {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 1.125rem;
  align-items: start;
  max-width: 46rem; margin: 2.5rem auto 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 1.375rem 1.5rem; box-shadow: var(--sh-sm);
}
.bridge__icon { width: 46px; height: 46px; border-radius: 4px; background: var(--bg-alt); display: grid; place-items: center; }
.bridge__icon svg { width: 22px; height: 22px; color: var(--brand-600); }
.bridge h3 { margin-bottom: .375rem; }
.bridge p { font-size: .9375rem; color: var(--ink-2); }

@media (max-width: 860px) {
  .doors { grid-template-columns: minmax(0, 1fr); }
  .bridge { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   3D depth system
   --------------------------------------------------------------------------
   Everything here is CSS 3D transforms — GPU-composited, no WebGL, no extra
   bytes over the wire. It has to hold on a mid-range Android over 4G, because
   that is what a chemist is actually holding.

   Contract, same as the motion layer: the flat layout IS the real layout.
   These transforms only ever ADD depth on top of a page that already reads
   correctly with JavaScript disabled.
   ========================================================================== */

/* Perspective must sit on the *direct* parent of a transformed element, so it
   goes on the grid containers rather than the section. */
.doors,
.cards,
.steps,
.journey,
.band__grid,
.metrics__grid,
.showcase,
.split { perspective: 1400px; perspective-origin: 50% 40%; }

/* Elements the scroll rig drives. Custom properties default to zero, so with
   no JS these render exactly as they did before. */
[data-depth] {
  transform:
    translateZ(var(--dz, 0px))
    rotateX(var(--drx, 0deg))
    rotateY(var(--dry, 0deg));
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* Only promote to its own layer while the rig is actually running, so we are
   not holding dozens of layers in memory on a phone that never animates. */
.is-3d [data-depth] { will-change: transform; }

/* The hero mockup gets the strongest treatment — it is the product shot. */
.showcase .app { transform-origin: 50% 0%; }

/* A soft floor shadow under the mockup sells the height off the page. */
.showcase { position: relative; }
.showcase::after {
  content: "";
  position: absolute; left: 8%; right: 8%; bottom: -28px; height: 44px;
  background: radial-gradient(ellipse at center, rgba(31,30,28,.28) 0%, transparent 72%);
  filter: blur(14px);
  opacity: var(--shadow-strength, .55);
  z-index: -1; pointer-events: none;
}

/* Cursor tilt is a pointer-device affordance only. Never on touch, where it
   would fire on tap and feel broken. */
@media (hover: none), (pointer: coarse) {
  .is-3d [data-depth] { --dry: 0deg !important; }
}

/* Anyone who has asked for less motion gets the flat page, full stop. */
@media (prefers-reduced-motion: reduce) {
  .doors, .cards, .steps, .journey,
  .band__grid, .metrics__grid, .showcase, .split { perspective: none; }
  [data-depth] { transform: none !important; }
  .showcase::after { display: none; }
}

/* Ease the cursor tilt only as it returns to rest — easing it on the way in
   would put a lag between the pointer and the card, and easing the scroll rig
   would make the whole page feel like it is dragging behind the scrollbar. */
.is-3d [data-depth].is-resetting { transition: transform .4s cubic-bezier(.22,1,.36,1); }

/* ==========================================================================
   Interactive components
   --------------------------------------------------------------------------
   All three degrade to readable static content with JS off: the molecule
   picker hides, the calculator hides, and the prescription demo simply shows
   its already-extracted state.
   ========================================================================== */


/* Rows fade as they swap so the change is legible rather than a jump-cut. */
.rates tbody { transition: opacity .16s ease; }
.rates tbody.is-swapping { opacity: .25; }

/* --- Savings calculator ------------------------------------------------- */

.calc {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-md);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.calc__controls { display: flex; flex-direction: column; gap: 1.375rem; min-width: 0; }
.calc__field label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-size: .875rem; font-weight: 700; margin-bottom: .625rem;
}
.calc__val {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: .9375rem; font-weight: 600; color: var(--brand-700);
}
.calc__field input[type="range"] {
  width: 100%; accent-color: var(--brand-600);
  height: 22px; cursor: pointer;
}

.calc__out {
  background: var(--grad-dark); color: #FFFFFF;
  border-radius: var(--r-md); padding: 1.5rem;
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0; position: relative; overflow: hidden;
}
.calc__out::after {
  content: ""; position: absolute; width: 240px; height: 240px;
  top: -110px; right: -90px; border-radius: 50%;
  background: radial-gradient(circle, rgba(234,49,19,.18) 0%, transparent 70%);
}
.calc__label {
  position: relative;
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .12em;
  text-transform: uppercase; color: #A8A29B; margin-bottom: .5rem;
}
.calc__big {
  position: relative;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2rem, 4.5vw, 2.75rem); letter-spacing: -0.05em;
  line-height: 1; color: #FF8B6B;
  font-variant-numeric: tabular-nums;
}
.calc__sub { position: relative; font-size: .875rem; color: #A8A29B; margin-top: .625rem; }

.calc__note {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line); padding-top: 1rem;
  font-size: .8125rem; color: var(--ink-3);
}
.calc__note b { color: var(--ink-2); }

/* --- Prescription reader demo ------------------------------------------- */

.scan {
  display: none;
  align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.has-js .scan { display: flex; }
.scan__status {
  font-family: var(--font-mono); font-size: .75rem; color: var(--ink-3);
}

/* With JS on, rows start hidden and are revealed by the demo. Without JS the
   extraction is simply shown in full, already complete. */
.has-js .extract__row[data-line] { opacity: 0; transform: translateY(6px); }
.has-js .extract__row[data-line].is-shown {
  opacity: 1; transform: none;
  transition: opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.has-js .extract__verify { opacity: 0; transition: opacity .3s ease; }
.has-js .extract__verify.is-shown { opacity: 1; }

/* The bar fills as each line is read. */
.has-js .extract__bar i { width: 0 !important; transition: width .5s cubic-bezier(.22,1,.36,1); }
.has-js .extract__bar i.is-filled { width: var(--fill) !important; }

/* The scanning sweep across the prescription. */
.script { position: relative; }
.script__beam {
  position: absolute; inset-inline: 0; height: 40%;
  background: linear-gradient(180deg, transparent, rgba(247,149,121,.30), transparent);
  opacity: 0; pointer-events: none;
}
.script__beam.is-scanning {
  opacity: 1;
  animation: beam 1.5s cubic-bezier(.45,0,.55,1);
}
@keyframes beam {
  from { top: -40%; }
  to   { top: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .script__beam { display: none; }
  .has-js .extract__row[data-line] { opacity: 1; transform: none; }
  .has-js .extract__verify { opacity: 1; }
  .has-js .extract__bar i { transition: none; }
}

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

/* ==========================================================================
   WhatsApp — the channel Indian chemists actually use
   ========================================================================== */

.wa {
  position: fixed; right: 1.25rem;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: inline-flex; align-items: center; gap: .625rem;
  background: #25D366; color: #FFFFFF;
  font-weight: 700; font-size: .9375rem;
  padding: .8125rem 1.125rem .8125rem .9375rem;
  border-radius: 3px;
  box-shadow: 0 6px 18px -4px rgba(37,211,102,.55), 0 2px 6px rgba(0,0,0,.18);
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease;
}
.wa:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -6px rgba(37,211,102,.65), 0 3px 8px rgba(0,0,0,.2); }
.wa svg { width: 24px; height: 24px; flex-shrink: 0; }
@media (max-width: 720px) { .wa__label { display: none; } .wa { padding: .875rem; } }
@media print { .wa { display: none; } }

/* ==========================================================================
   Live molecule search (inside the hero mockup)
   ========================================================================== */

.msearch { position: relative; display: none; margin-bottom: .875rem; }
.has-js .msearch { display: block; }
.msearch__input {
  width: 100%; font: inherit; font-size: .9375rem; font-weight: 600;
  padding: .6875rem .875rem .6875rem 2.25rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E858A' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") no-repeat .75rem center / 16px;
  color: var(--ink);
}
.msearch__input:focus { outline: none; border-color: var(--brand-400); box-shadow: 0 0 0 4px rgba(234,49,19,.16); }
.msearch__list {
  position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 20;
  list-style: none; margin: 0; padding: .375rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: var(--sh-lg); max-height: 320px; overflow: auto;
}
.msearch__list[hidden] { display: none; }
.msearch__list button {
  width: 100%; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  text-align: left; font: inherit; font-size: .875rem;
  padding: .5625rem .625rem; border: 0; border-radius: 3px;
  background: transparent; color: var(--ink); cursor: pointer;
}
.msearch__list button:hover, .msearch__list button:focus-visible { background: var(--brand-50); }
.msearch__list button span { font-family: var(--font-mono); font-size: .6875rem; color: var(--ink-3); white-space: nowrap; }

.addbtn {
  font: inherit; font-size: .6875rem; font-weight: 700; letter-spacing: .02em;
  padding: .3125rem .625rem; border-radius: 3px;
  border: 1px solid var(--brand-600); background: transparent; color: var(--brand-700);
  cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.addbtn:hover { background: var(--brand-600); color: #FFFFFF; }
.rates .is-best .addbtn { background: var(--brand-600); color: #FFFFFF; }

/* ==========================================================================
   Build-an-order sandbox
   ========================================================================== */

#order { display: none; }               /* nothing to build without JS */
.has-js #order { display: block; }

.order { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.order__lines { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.order__empty {
  background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-md);
  padding: 2.25rem 1.5rem; text-align: center; color: var(--ink-2);
}
.order__empty b { display: block; color: var(--ink); font-size: 1.0625rem; margin-bottom: .25rem; }

.order__group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-sm); overflow: hidden; }
.order__firm {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .8125rem 1rem; background: var(--surface-2); border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
}
.order__firm span { font-family: var(--font-mono); font-size: .8125rem; font-weight: 600; color: var(--ink-2); }
.order__line {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: .75rem; align-items: center;
  padding: .75rem 1rem; border-bottom: 1px solid var(--line-2); font-size: .9375rem;
}
.order__line:last-child { border-bottom: 0; }
.order__line b { display: block; font-weight: 700; }
.order__line small { font-family: var(--font-mono); font-size: .75rem; color: var(--ink-3); }
.order__amt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; min-width: 5.5rem; text-align: right; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.qty button { font: inherit; width: 30px; height: 30px; border: 0; background: var(--surface-2); color: var(--ink); cursor: pointer; }
.qty button:hover { background: var(--brand-50); color: var(--brand-700); }
.qty output { min-width: 2.25rem; text-align: center; font-family: var(--font-mono); font-size: .875rem; font-weight: 600; }
.order__rm { font: inherit; font-size: .75rem; color: var(--ink-3); background: none; border: 0; cursor: pointer; padding: .25rem; }
.order__rm:hover { color: var(--rose); }

.order__summary {
  position: sticky; top: 84px;
  background: var(--grad-dark); color: #FFFFFF;
  border-radius: var(--r-lg); padding: 1.5rem; box-shadow: var(--sh-lg); min-width: 0;
}
.order__summary dl { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; margin: 0 0 1.25rem; font-size: .9375rem; }
.order__summary dt { color: #A8A29B; }
.order__summary dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.order__save { border-top: 1px solid rgba(255,255,255,.14); padding-top: 1rem; margin-bottom: 1.25rem; }
.order__save .calc__big { font-size: clamp(1.75rem, 3.5vw, 2.25rem); }
.order__hint { font-size: .8125rem; color: #A8A29B; margin-top: .5rem; }
.order__hint b { color: #FF8B6B; }
.order__actions { display: flex; flex-wrap: wrap; gap: .625rem; }
.order__actions .btn--ghost { background: rgba(255,255,255,.08); color: #FFFFFF; border-color: rgba(255,255,255,.22); }
.order__actions .btn--ghost:hover { background: rgba(255,255,255,.16); }

@media (max-width: 900px) {
  .order { grid-template-columns: minmax(0, 1fr); }
  .order__summary { position: static; }
  .order__line { grid-template-columns: minmax(0, 1fr) auto; }
  .order__amt { min-width: 0; }
}

/* ==========================================================================
   Toast
   ========================================================================== */

.toast {
  position: fixed; left: 50%; z-index: 80;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--ink); color: #FFFFFF;
  padding: .75rem 1.125rem; border-radius: 3px;
  font-size: .9375rem; font-weight: 600; box-shadow: var(--sh-lg);
  max-width: min(92vw, 34rem);
  transition: transform .25s cubic-bezier(.22,1,.36,1), opacity .25s ease;
}
.toast.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.toast a { color: #FF8B6B; margin-left: .25rem; }
@media (max-width: 720px) { .toast { bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-color-scheme: dark) { .toast { background: #F3EEEA; color: #1C1918; } .toast a { color: var(--brand-700); } }

/* ==========================================================================
   Send your own prescription
   ========================================================================== */

.upload { max-width: 44rem; margin-inline: auto; }
.upload__card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); padding: clamp(1.75rem, 4vw, 2.75rem);
}
.upload__card h2 { margin-bottom: .75rem; font-size: clamp(1.6rem, 3vw, 2.25rem); }
.upload__blurb { color: var(--ink-2); margin-bottom: 1.5rem; }

.drop {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .375rem;
  text-align: center; padding: 1.75rem 1rem;
  border: 2px dashed var(--line); border-radius: var(--r-md); background: var(--surface-2);
  cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
.drop:hover, .drop.is-over { border-color: var(--brand-400); background: var(--brand-50); }
.drop.is-bad { border-color: var(--rose); }
.drop svg { width: 30px; height: 30px; color: var(--brand-600); margin-bottom: .25rem; }
.drop__title { font-weight: 700; }
.drop__file { font-family: var(--font-mono); font-size: .75rem; color: var(--ink-3); }
.drop__file.is-bad { color: var(--rose); }
.drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.consent {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .75rem; align-items: start;
  margin: 1.25rem 0; padding: 1rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2);
  font-size: .875rem; color: var(--ink-2); line-height: 1.55; cursor: pointer;
}
.consent.is-bad { border-color: var(--rose); }
.consent input { width: 18px; height: 18px; margin-top: .125rem; accent-color: var(--brand-600); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none; }

/* ==========================================================================
   COVER — the homepage hero
   --------------------------------------------------------------------------
   Light, warm and open rather than the dark green slab used on the two
   audience pages. A soft mint-cream ground, a warm apricot accent used only
   here, and a built visual: a phone showing the patient app, surrounded by
   floating cards that name the four things the product actually does.

   Every pixel of the artwork is CSS and inline SVG. No photography, no image
   requests, nothing to license.
   ========================================================================== */

:root {
  --cream:     #FAF6F1;
  --cream-2:   #F7F2ED;
  --apricot:   #FF8256;
  --apricot-lt:#FFEDE5;
}
@media (prefers-color-scheme: dark) {
  :root { --cream: #17120F; --cream-2: #1C1613; --apricot: #FF9B76; --apricot-lt: #34211A; }
}

.cover {
  position: relative;
  background:
    radial-gradient(90rem 50rem at 78% 8%,  rgba(250,196,178,.45), transparent 60%),
    radial-gradient(70rem 46rem at 8%  88%, rgba(255,130,86,.14), transparent 62%),
    linear-gradient(170deg, var(--cream) 0%, var(--cream-2) 100%);
  overflow: hidden;
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5.5rem);
}
.cover__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.cover h1 {
  font-size: clamp(2.5rem, 5.2vw, 4rem);
  color: var(--ink);
  margin-bottom: 1.25rem;
}
.cover h1 em {
  font-style: normal;
  background: linear-gradient(96deg, var(--brand-600) 0%, var(--brand-400) 55%, var(--apricot) 130%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cover__lede { font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); color: var(--ink-2); max-width: 32em; margin-bottom: 1.875rem; }
.cover__cta { display: flex; flex-wrap: wrap; gap: .875rem; margin-bottom: 1.75rem; }

.cover__pill {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  color: var(--ink-2); font-size: .8125rem; font-weight: 600;
  padding: .4375rem .875rem .4375rem .5rem; border-radius: 3px; margin-bottom: 1.5rem;
}
.cover__pill b { color: var(--brand-700); }
.cover__pill i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand-600);
  box-shadow: 0 0 0 3px rgba(234,49,19,.20); display: block; margin-inline: .25rem;
}

/* Small proof row under the buttons. */
.cover__proof { display: flex; flex-wrap: wrap; gap: 1.25rem 1.75rem; }
.cover__proofItem { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--ink-2); }
.cover__proofItem svg { width: 17px; height: 17px; color: var(--brand-600); flex-shrink: 0; }

/* --- The stage ---------------------------------------------------------- */

.stage { position: relative; aspect-ratio: 1 / 1.02; min-width: 0; }

/* Two soft blobs behind the device give the composition depth. */
.stage__blob { position: absolute; border-radius: 50%; filter: blur(2px); z-index: 0; }
.stage__blob--a { inset: 6% 4% 22% 10%; background: linear-gradient(150deg, rgba(234,49,19,.12), rgba(247,149,121,.30)); }
.stage__blob--b { width: 42%; aspect-ratio: 1; right: 2%; bottom: 8%; background: linear-gradient(150deg, rgba(255,130,86,.30), rgba(255,130,86,.10)); }

/* Decorative capsules, drawn not photographed. */
.stage__cap { position: absolute; border-radius: 3px; z-index: 1; box-shadow: var(--sh-sm); }
.stage__cap--1 { width: 74px; height: 34px; left: 1%; top: 20%; transform: rotate(-24deg);
  background: linear-gradient(90deg, var(--apricot) 0 50%, #FFD9C9 50% 100%); }
.stage__cap--2 { width: 56px; height: 26px; right: 5%; top: 9%; transform: rotate(18deg);
  background: linear-gradient(90deg, var(--brand-400) 0 50%, var(--brand-200) 50% 100%); }

/* The device. */
.phone {
  position: absolute; z-index: 2;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(60%, 17.5rem); aspect-ratio: 9 / 18.6;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2.25rem;
  box-shadow: var(--sh-xl);
  padding: .5rem;
  display: flex; flex-direction: column;
}
.phone__screen {
  flex: 1; border-radius: 1.85rem; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line-2);
  display: flex; flex-direction: column; min-height: 0;
}
.phone__notch {
  width: 34%; height: 16px; margin: .25rem auto .375rem;
  background: var(--ink); opacity: .82; border-radius: 3px; flex-shrink: 0;
}
.phone__top {
  padding: .5rem .75rem .625rem; flex-shrink: 0;
  /* App chrome is ink so the one red thing on the screen is the action. */
  background: var(--ink-900); color: #FFFFFF;
}
.phone__eyebrow { font-family: var(--font-mono); font-size: .5rem; letter-spacing: .14em; text-transform: uppercase; opacity: .82; }
.phone__title { font-family: var(--font-display); font-weight: 800; font-size: .8125rem; letter-spacing: -0.02em; margin-top: .125rem; }
.phone__body { padding: .625rem .625rem .75rem; display: flex; flex-direction: column; gap: .375rem; overflow: hidden; }

.rx { background: var(--surface); border: 1px solid var(--line-2); border-radius: .625rem; padding: .4375rem .5rem; }
.rx__name { font-size: .625rem; font-weight: 700; color: var(--ink); }
.rx__dose { font-family: var(--font-mono); font-size: .5rem; color: var(--ink-3); margin-top: .0625rem; }
.rx__bar { height: 2px; border-radius: 3px; background: var(--line-2); margin-top: .3125rem; overflow: hidden; }
.rx__bar i { display: block; height: 100%; border-radius: 3px; background: var(--brand-600); }

.phone__split { display: flex; align-items: center; gap: .3125rem; margin-top: .125rem; }
.phone__split span { flex: 1; height: 1px; background: var(--line); }
.phone__split b { font-family: var(--font-mono); font-size: .4375rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }

.shop { display: flex; align-items: center; gap: .4375rem; background: var(--surface); border: 1px solid var(--line-2); border-radius: .625rem; padding: .375rem .5rem; }
.shop--best { border-color: var(--brand-200); background: var(--brand-50); }
.shop__dot { width: 18px; height: 18px; border-radius: 6px; background: var(--bg-alt); flex-shrink: 0; display: grid; place-items: center; }
.shop--best .shop__dot { background: var(--brand-600); }
.shop__dot svg { width: 10px; height: 10px; color: var(--ink-3); }
.shop--best .shop__dot svg { color: #FFFFFF; }
.shop__name { font-size: .5625rem; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop__meta { font-family: var(--font-mono); font-size: .5rem; color: var(--ink-3); }
.shop__price { font-family: var(--font-mono); font-size: .5625rem; font-weight: 700; }
.shop--best .shop__price { color: var(--brand-700); }

.phone__cta {
  margin-top: auto; text-align: center;
  background: var(--grad-cta); color: #FFFFFF;
  font-size: .5625rem; font-weight: 700;
  padding: .4375rem; border-radius: 3px;
}

/* Floating labels around the device. */
.chiplet {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 3px; padding: .5rem .8125rem .5rem .5rem;
  box-shadow: var(--sh-lg);
  font-size: .8125rem; font-weight: 600; color: var(--ink);
  white-space: nowrap; max-width: 56%;
}
.chiplet i {
  width: 26px; height: 26px; border-radius: 3px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--brand-50);
}
.chiplet i svg { width: 14px; height: 14px; color: var(--brand-600); }
.chiplet small { display: block; font-size: .6875rem; font-weight: 500; color: var(--ink-3); }
.chiplet--warm i { background: var(--apricot-lt); }
.chiplet--warm i svg { color: var(--apricot); }

.chiplet--1 { left: -6%;  top: 6%; }
.chiplet--2 { right: -6%; top: 31%; }
.chiplet--3 { left: -7%;  bottom: 26%; }
.chiplet--4 { right: -3%; bottom: 8%; }

/* A slow drift, so the composition breathes. Disabled for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .chiplet, .stage__cap { animation: drift 7s ease-in-out infinite; }
  .chiplet--2 { animation-delay: -1.6s; }
  .chiplet--3 { animation-delay: -3.2s; }
  .chiplet--4 { animation-delay: -4.8s; }
  .stage__cap--1 { animation-delay: -2.4s; }
  .stage__cap--2 { animation-delay: -5.5s; }
  @keyframes drift { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }
}

/* Narrow screens: the stage's children are all absolutely positioned, so it
   has no content height of its own — state the height, size the device from
   it, and show two chips instead of four. */
@media (max-width: 900px) {
  .cover__grid { grid-template-columns: minmax(0, 1fr); }
  .stage { aspect-ratio: auto; height: clamp(23rem, 78vw, 30rem); max-width: 30rem; margin: 1.5rem auto 0; }
  .phone { width: auto; height: 82%; aspect-ratio: 9 / 18.6; }
  .chiplet--2, .chiplet--3 { display: none; }
  .chiplet { max-width: 52%; font-size: .75rem; padding: .4375rem .6875rem .4375rem .4375rem; white-space: normal; line-height: 1.3; }
  .chiplet small { display: none; }
  .chiplet--1 { left: 0; top: 0; }
  .chiplet--4 { right: 0; bottom: 0; }
  .stage__cap--1 { left: 2%; top: 26%; }
  .stage__cap--2 { right: 3%; top: 12%; }
}
@media (max-width: 480px) { .stage { height: clamp(20rem, 74vw, 24rem); } }

/* ==========================================================================
   Door artwork — a built scene at the top of each routing card.
   Trade card shows a rate comparison; patient card shows a prescription
   resolving into a nearby chemist and a price. CSS and inline SVG only.
   ========================================================================== */

.door__art {
  position: relative;
  height: 11rem;
  margin: -0.5rem -0.375rem 1.5rem;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
}
.door__art--trade   { background: linear-gradient(155deg, #FBF0EC 0%, #F7E2DA 100%); }
.door__art--patient { background: linear-gradient(155deg, #FFF1EA 0%, #FFE7DC 100%); }
@media (prefers-color-scheme: dark) {
  .door__art--trade   { background: linear-gradient(155deg, #2A1A15 0%, #221713 100%); }
  .door__art--patient { background: linear-gradient(155deg, #2A1A13 0%, #22150F 100%); }
}

.art-blob { position: absolute; border-radius: 50%; filter: blur(1px); }
.art-blob--a { width: 9rem; aspect-ratio: 1; right: -2.5rem; top: -3rem; background: rgba(234,49,19,.18); }
.art-blob--b { width: 7rem; aspect-ratio: 1; left: -2rem; bottom: -2.5rem; background: rgba(255,130,86,.26); }

/* --- Trade: a miniature rate sheet -------------------------------------- */

.art-sheet {
  position: relative; width: 84%;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 3px; box-shadow: var(--sh-md); overflow: hidden;
}
.art-sheet__head {
  display: flex; gap: .375rem; align-items: center;
  padding: .4375rem .5625rem; border-bottom: 1px solid var(--line-2);
  background: var(--surface-2);
  font-family: var(--font-mono); font-size: .5rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.art-sheet__head b { margin-left: auto; font-weight: 500; }
.art-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .375rem .5625rem; border-bottom: 1px solid var(--line-2);
  font-size: .625rem;
}
.art-row:last-child { border-bottom: 0; }
.art-row span { flex: 1; font-weight: 600; color: var(--ink); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-row em {
  font-style: normal; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-2);
}
.art-row--best { background: var(--brand-50); }
.art-row--best span, .art-row--best em { color: var(--brand-700); }
.art-row i {
  font-style: normal; font-family: var(--font-mono); font-size: .5rem; font-weight: 700;
  background: var(--grad-cta); color: #FFFFFF; border-radius: 3px; padding: .0625rem .375rem;
}

/* --- Patient: a slip resolving into a chemist ---------------------------- */

.art-stack { position: relative; width: 84%; height: 76%; }

.art-rx {
  position: absolute; left: 0; top: 4%; width: 58%;
  background: #FFFDF6; border: 1px solid #EBE4D4;
  border-radius: 9px; box-shadow: var(--sh-md);
  padding: .4375rem .5rem .5rem;
  transform: rotate(-3.5deg);
}
.art-rx__top {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid #EFE8D8; padding-bottom: .1875rem; margin-bottom: .25rem;
}
.art-rx__clinic { font-size: .4375rem; font-weight: 700; color: #4A4433; letter-spacing: .02em; }
.art-rx__mark { font-family: var(--font-mono); font-size: .6875rem; font-weight: 600; color: #B0261F; line-height: 1; }
.art-rx__lines { font-family: "Caveat", cursive; font-size: .6875rem; line-height: 1.5; color: #26346B; }
.art-rx__lines div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.art-shop {
  position: absolute; right: 0; bottom: 2%; width: 62%;
  display: flex; align-items: center; gap: .4375rem;
  background: var(--surface); border: 1px solid var(--brand-200);
  border-radius: 3px; box-shadow: var(--sh-lg);
  padding: .3125rem .5625rem .3125rem .3125rem;
}
.art-shop__pin {
  width: 20px; height: 20px; border-radius: 3px; flex-shrink: 0;
  background: var(--grad-cta); display: grid; place-items: center;
}
.art-shop__pin svg { width: 11px; height: 11px; color: #FFFFFF; }
.art-shop__name { font-size: .5625rem; font-weight: 700; line-height: 1.25; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-shop__meta { display: block; font-family: var(--font-mono); font-size: .4375rem; font-weight: 500; color: var(--ink-3); }
.art-shop__price { margin-left: auto; font-family: var(--font-mono); font-size: .625rem; font-weight: 700; color: var(--brand-700); }

/* The connector between slip and chemist. */
.art-arrow {
  position: absolute; left: 47%; top: 46%;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--sh-sm); display: grid; place-items: center;
}
.art-arrow svg { width: 13px; height: 13px; color: var(--apricot); }

@media (max-width: 860px) { .door__art { height: 10rem; } }

/* ==========================================================================
   Sign-in doors on the front page
   ========================================================================== */

.entry { background: var(--surface); border-block: 1px solid var(--line); }
.entry__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.entry__card {
  display: flex; flex-direction: column; gap: .5rem;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.5rem; min-width: 0;
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease;
}
.entry__card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.entry__icon { width: 44px; height: 44px; border-radius: 4px; display: grid; place-items: center; background: var(--brand-50); }
.entry__icon svg { width: 22px; height: 22px; color: var(--brand-600); }
.entry__card--pharmacy .entry__icon { background: #EDE7E2; }  .entry__card--pharmacy .entry__icon svg { color: #1F1E1C; }
.entry__card--distributor .entry__icon { background: var(--apricot-lt); } .entry__card--distributor .entry__icon svg { color: var(--apricot); }
.entry__card h3 { font-size: 1.25rem; margin-top: .25rem; }
.entry__card p { color: var(--ink-2); font-size: .9375rem; }
.entry__actions { display: flex; gap: .625rem; flex-wrap: wrap; margin-top: .75rem; }
.entry__actions .btn { padding: .625rem 1rem; font-size: .875rem; }
.nav__signin { font-weight: 600; color: var(--ink-2); }
.nav__signin:hover { color: var(--brand-700); }
.door__signin { font-size: .875rem; color: var(--ink-2); align-self: center; margin-left: .75rem; }
.door__signin a { color: var(--brand-700); font-weight: 700; }
@media (max-width: 860px) { .entry__grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Sign-in dropdown in the nav. A native <details>, so it opens and closes
   with no JavaScript; the script only adds close-on-outside-click / Escape.
   ========================================================================== */

.menu { position: relative; }
.menu > summary { list-style: none; display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; user-select: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary svg { width: 14px; height: 14px; transition: transform .15s ease; }
.menu[open] > summary { color: var(--brand-700); }
.menu[open] > summary svg { transform: rotate(180deg); }

.menu__panel {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 80;
  width: 17.5rem; padding: .5rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
}
.menu__panel::before {  /* the little caret */
  content: ""; position: absolute; top: -7px; right: 1.5rem; width: 12px; height: 12px;
  background: var(--surface); border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
.menu__item {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: .75rem; align-items: center;
  padding: .625rem .625rem; border-radius: 3px; color: var(--ink);
  transition: background-color .12s ease;
}
.menu__item:hover, .menu__item:focus-visible { background: var(--bg-alt); }
.menu__item b { display: block; font-weight: 700; font-size: .9375rem; line-height: 1.2; }
.menu__item small { display: block; font-size: .75rem; color: var(--ink-3); margin-top: .0625rem; }
.menu__icon { width: 36px; height: 36px; border-radius: 3px; display: grid; place-items: center; background: var(--brand-50); }
.menu__icon svg { width: 18px; height: 18px; color: var(--brand-600); }
.menu__item--pharmacy .menu__icon { background: #EDE7E2; }  .menu__item--pharmacy .menu__icon svg { color: #1F1E1C; }
.menu__item--distributor .menu__icon { background: var(--apricot-lt); } .menu__item--distributor .menu__icon svg { color: var(--apricot); }
.menu__foot { border-top: 1px solid var(--line-2); margin-top: .375rem; padding: .625rem .625rem .25rem; font-size: .8125rem; color: var(--ink-2); }
.menu__foot a { color: var(--brand-700); font-weight: 700; }

/* In the mobile drawer the nav is a vertical list: render the menu inline. */
@media (max-width: 720px) {
  .menu > summary { padding-block: .8125rem; border-bottom: 1px solid var(--line-2); width: 100%; }
  .menu__panel { position: static; width: auto; box-shadow: none; border: 0; padding: .25rem 0 .5rem; }
  .menu__panel::before { display: none; }
  .nav__links .menu__item { border-bottom: 0; padding-block: .5rem; }
}

/* ==========================================================================
   Utilities — the only place layout nudges live; templates carry no style="".
   ========================================================================== */

.u-mx-auto { margin-inline: auto; }
.u-right   { margin-left: auto; }
.u-left    { text-align: left; }
.u-mt      { margin-top: 1rem; }
.u-mt-lg   { margin-top: 1.25rem; }
.u-mb      { margin-bottom: 1rem; }
.u-mb-lg   { margin-bottom: 1.25rem; }
.u-flex    { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.u-wide    { max-width: none; }
.u-flat    { box-shadow: none; }
.u-muted   { font-weight: 500; color: var(--ink-3); }
.u-accent  { color: var(--brand-700); }
.u-link    { color: var(--brand); font-weight: 600; }
.sec--tight { padding-top: clamp(2.5rem, 5vw, 4rem); }
.in-xs  { width: 5.5rem; }
.in-sm  { width: 6.5rem; }
.in-md  { width: 7rem; }
.in-num { text-align: right; }