/* ==========================================================================
   Careivo — marketing site
   --------------------------------------------------------------------------
   Contents
     1. Tokens (one theme: white)      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: the instrument, held quiet.
   Warm carton board, one working face, and hairlines instead of shadows.
   Colour arrives as marks — the mark, the cheapest line, a verified tick —
   never as a fill. Small uniform uppercase labels do the labelling; the only
   large type on a page is the one thing that page is for. The rate card is
   not an illustration of the product, it is the product, so it is live.

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

:root {
  /* ---- the ground ----
     Hue 163, sampled off the plaster. The fold keeps the rich saturated green;
     everything below it comes up into the light, because a whole page at L .07
     reads as a hole rather than as a colour. Saturation stays low at the light
     end and climbs as it darkens, which is what the plaster itself does.
     Every text pair measured on the worst ground it can sit on. */
  --bg:        #BAD2C6;
  --bg-alt:    #A6C6B7;
  --surface:   #D3E1DA;
  --surface-2: #C2D6CD;

  --panel:   #0D382C;   /* the live side of the fold, unchanged */

  --paper:   #D3E1DA;
  --paper-2: #C2D6CD;
  --paper-3: #83AF9A;

  --plate-900: #071C16;
  --plate-800: #0D2D24;
  --plate-700: #164336;
  --plate-600: #24594A;
  --plate:     #397463;
  --plate-400: #51907E;
  --plate-300: #81B1A4;
  --plate-200: #B6CEC7;
  --plate-100: #B3CDC1;
  --plate-50:  #CBDDD4;

  --ink:   #133229;   /* 10.90:1 on the worst rendered ground */
  --ink-2: #1B372F;   /*  7.20:1 */
  --ink-3: #2F5349;   /*  4.66:1 — the floor. Never below 11px. */

  --ink-900: #071C16;
  --ink-800: #0D2D24;

  /* ---- the mark ----
     Vermilion on aged paper is the oldest pairing in print. Against umber it
     reads as a seal rather than as an accent. Logo, cheapest line, live dot. */
  --brand:     #EA3113;
  --brand-900: #4A1206;
  --brand-800: #7A1B08;
  --brand-700: #932206;
  --brand-600: #A82708;
  --brand-400: #F2603F;
  --brand-300: #EFA189;
  --brand-200: #D3A996;
  --brand-50:  #E8D5CC;
  --brand-ink: #EFEFE9;

  /* ---- semantic, pulled to the same warmth so nothing shouts ---- */
  --ok:      #24594A;
  --ok-lt:   #BFD6C7;
  --rose:    #A8321A;
  --rose-lt: #E8D5CC;
  /* Small caution text, so it is measured as text: #7A6018 was 4.43:1 on the
     lightest ground here and 3.24:1 on the darkest, and it carries 11px marks.
     Darkened to clear 4.5:1 on every ground it is used on, hue kept. */
  --amber:    #5F4A10;
  --amber-lt: #D9D5BB;

  --line:   #87B29E;
  --line-2: #AFC8BC;

  /* ---- the blends: neighbouring steps of one scale, never two colours ---- */
  --grad-deep:  #0D382C;
  --grad-band:  linear-gradient(158deg, #C2D8CB 0%, #B7D0C3 55%, #ACC8BB 100%);
  --grad-paper: linear-gradient(170deg, #C2D8CB 0%, #BAD2C6 48%, #AFCABD 100%);
  --grad-hero: var(--grad-deep);
  --grad-cta:  linear-gradient(158deg, #164336 0%, #0D2D24 100%);
  --grad-dark: var(--grad-deep);
  --slate-900: #0D2D24;
  --slate-800: #164336;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

  --sh-sm: none;
  --sh-md: none;
  --sh-lg: none;
  --sh-xl: none;

  --on-grad:      #EDF5F3;
  --on-grad-mute: #92B7AC;
  --on-grad-line: rgba(240, 241, 230, .20);

  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 1200px;
  --gutter: 28px;

  --r-sm:  0;
  --r-md:  0;
  --r-lg:  0;
  --r-xl:  0;
  --r-pill: 0;

  --t-ui: .8125rem;
  --track-ui: .04em;
  --sec-pad: clamp(3.5rem, 7vw, 6.5rem);
  --ease-long: cubic-bezier(.16, .84, .28, 1);

  color-scheme: light;
}


*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grad-paper);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* The tooth of the ground: a fibre weave and a fine noise, laid once over
   the whole page so flat areas are never a screen fill. Fixed and static —
   animating full-viewport texture costs more frames than it is worth. */
body::before {
  /* Deliberately empty. The grain and the plaster mottle that used to sit here
     have moved out of the UI entirely: analogue imperfection belongs in the
     photographs, and the contrast between a sharp interface and a rough image
     is the whole effect. Distressing both flattens it. */
  content: none;
}

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

:focus-visible { outline: 2px solid var(--plate-400); outline-offset: 3px; border-radius: var(--r-sm); }

@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; }

/* Bold condensed, uppercase, one weight — the Helvetica Neue Bold Condensed
   cut ERD sets its entire site in, reached here through Archivo's width axis. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600; line-height: 1.1; letter-spacing: -0.02em;
  text-wrap: balance; margin: 0;
}
h1 { font-size: clamp(2.25rem, 4.8vw, 3.5rem); line-height: 1.06; }
h2 { font-size: clamp(1.625rem, 3vw, 2.25rem); }
h3 { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.012em; }
h4 { font-size: 1rem; font-weight: 600; letter-spacing: -0.008em; }

/* The label that does most of the labelling on this site. Ink, not brand:
   colour is reserved for marks, and a section label is not a mark. */
.eyebrow {
  display: inline-block; font-size: var(--t-ui); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  /* Was --plate-400, which measured 2.33:1 on the page ground — a section
     label is information, not decoration, so it has to be readable. --plate-700
     is 6.94:1 on plain ground and 5.12:1 at the worst point of the stockroom
     photograph behind the "how it works" section. */
  color: var(--plate-700); margin-bottom: 1rem;
}
.lede { font-size: 1.0625rem; color: var(--ink-2); max-width: 40em; line-height: 1.6; }

/* Kept as a no-op: the gradient text is gone, but three templates call it. */
.grad-text { color: inherit; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-body); font-size: .9375rem; font-weight: 600;
  letter-spacing: -0.005em; padding: .8125rem 1.625rem;
  border: 1px solid transparent; border-radius: var(--r-pill); cursor: pointer; white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn svg { width: 16px; height: 16px; }
.btn--primary { background: var(--grad-cta); color: var(--paper); box-shadow: var(--sh-sm); }
.btn--primary:hover { background: var(--plate-900); }
.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--sh-sm); }
.btn--ghost:hover { border-color: var(--plate-400); box-shadow: var(--sh-md); }
.btn--ghost:hover { box-shadow: var(--sh-md); }
.btn--glass { background: transparent; color: var(--on-grad); border-color: var(--on-grad-line); }
.btn--glass:hover { background: var(--on-grad); color: var(--ink); border-color: var(--on-grad); }
.btn--white { background: var(--on-grad); color: var(--ink); border-color: var(--on-grad); }
.btn--white:hover { 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;
  /* White type needs a dark bar under it: on the sage ground it measured
     1.60:1. The bar takes the fold's own green so the two read as one band. */
  background: var(--panel);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.nav__inner { display: flex; align-items: center; gap: 2rem; min-height: 82px; }




/* The cross is overprinted across the whole lockup — from the left edge of the
   square through to the end of the name.

   It uses cross-wide.png, which is the same photographed cross cut into three
   and reassembled: only the two arms are stretched, because an arm is a
   uniform bar of ink and reads as a longer arm when widened. The upright and
   both end caps keep true scale. Stretching the square artefact whole was
   tried first and cut — the upright turned into a fat rectangle and the
   crossbar into a thin smear.

   It sits behind the lockup rather than over it. Multiplying it across the top
   dirtied the vermilion square into a brown and dulled the letters; behind, the
   square stays crisp, the type stays at full contrast, and the cross still
   reads because the page around the letters is pale. The upright is offset to
   60% in the asset so it lands on the word instead of in the gap between the
   square and the name. */



/* The tittle on the "i" is the printed cross, standing in for the square that
   was there before. --dot-y tunes its height above the baseline; it is drawn
   over the round tittle the face already sets. Sized in em so it tracks the
   type at every scale the lockup is used at. */



.brand {
  display: inline-flex; align-items: center; gap: .625rem;
  font-family: var(--font-display); font-weight: 900; font-size: 1.4375rem;
  letter-spacing: -0.04em; color: var(--ink);
}
.nav__links { display: flex; gap: 1.875rem; 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(--plate-600); }
.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: none;
}
.hero::after {
  width: 520px; height: 520px; bottom: -200px; left: -180px;
  background: none;
}
.hero__inner { position: relative; text-align: center; max-width: 52rem; margin-inline: auto; }
.pill {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; border: 1px solid var(--on-grad-line); color: var(--on-grad); font-size: .8125rem; font-weight: 600;
  padding: .4375rem .875rem; border-radius: 3px; margin-bottom: 1.75rem;
}
.pill__dot { width: 7px; height: 7px; background: var(--on-grad); }
.hero h1 { color: var(--on-grad); 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; position: relative; }

.rates { width: 100%; border-collapse: collapse; font-size: var(--t-data); }
.rates th { font-size: var(--t-ui); font-weight: 600; letter-spacing: var(--track-ui); text-transform: uppercase; color: var(--ink-3); text-align: left; padding: .625rem .75rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rates td { padding: 1rem .75rem; 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: 600; }
/* The cheapest line is the only thing on this page worth a colour. */
.rates .is-best td { background: var(--brand-50); }
.rates .is-best td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.rates .is-best .r-num { color: var(--brand-700); font-weight: 700; }

.chip { display: inline-block; font-family: var(--font-mono); font-size: .6875rem; font-weight: 400; letter-spacing: .02em; padding: 0; border: 0; border-radius: 0; }
.chip--scheme { color: var(--ink-2); }
.chip--none { color: var(--ink-3); border-color: transparent; }
.chip--low { color: var(--amber); }
.chip--best { color: var(--brand-700); }   /* not --brand: 11px text, see the ramp above */

.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 { 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: var(--sec-pad); }
.sec--alt { background: var(--bg-alt); }
.sec__head { max-width: 44rem; margin-bottom: clamp(2rem, 3.5vw, 3rem); }
/* Everything on this page hangs off one left edge. A centred block in a
   left-aligned page is the single loudest source of "scattered". */
.sec__head--center { margin-inline: 0; text-align: left; }
.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(--ink-3); 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: none; }
.spotlight h3 { color: var(--on-grad); 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: 0; border-top: 1px solid var(--ink); }
.step { position: relative; padding: 1.75rem clamp(1rem, 2vw, 2rem) 1rem 0; min-width: 0; }
.step + .step { border-left: 1px solid var(--line); padding-left: clamp(1rem, 2vw, 2rem); }
.step__n { font-family: var(--font-mono); font-size: 1.75rem; font-weight: 400; letter-spacing: -.02em; color: var(--plate-300); line-height: 1; margin-bottom: .875rem; }
@media (max-width: 56rem) {
  .steps { grid-template-columns: 1fr; }
  .step + .step { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
}
.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: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 1.5rem 0 0; box-shadow: none; min-width: 0; }
.card:hover { 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: var(--r-pill); background: var(--grad-cta); 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: var(--on-grad); }

/* 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: 0; border: 0; white-space: nowrap;
}
.tag i { width: 5px; height: 5px; border-radius: 50%; display: block; }
.tag--live  { background: none; color: var(--brand-700); }
.tag--live i  { background: var(--brand); }
.tag--build { background: none; color: var(--ink-3); }
.tag--build i { background: var(--plate-400); }

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

.journey {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; border-top: 1px solid var(--ink);
}

.phase {
  position: relative;
  padding: 1.75rem clamp(1rem, 2vw, 2rem) 1rem 0;
  display: flex; flex-direction: column; min-width: 0;
}
/* A hairline between columns does what a border-radius and a shadow were
   doing, without turning each column into a separate object. */
.phase + .phase { border-left: 1px solid var(--line); padding-left: clamp(1rem, 2vw, 2rem); }

/* Emphasis by weight, not by chrome: the live phase gets a heavier rule. */
.phase--key { box-shadow: inset 0 3px 0 var(--ink); }

.phase__top { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .875rem; flex-wrap: wrap; }
.phase__ord {
  font-family: var(--font-mono); font-size: 1.75rem; font-weight: 400;
  letter-spacing: -.02em; color: var(--plate-300); line-height: 1;
}
.phase h3 { margin-bottom: 1.5rem; font-size: 1.375rem; }

.phase__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.375rem; }
/* Each item hangs off its own rule. No icon tile, no bullet, no tick. */
.phase__step { display: block; padding-top: .875rem; border-top: 1px solid var(--line-2); }
.phase__dot { display: none; }
.phase__step b { display: block; font-size: 1rem; font-weight: 600; margin-bottom: .25rem; }
.phase__step span { font-size: .9375rem; color: var(--ink-2); line-height: 1.5; }

@media (max-width: 56rem) {
  .journey { grid-template-columns: 1fr; }
  .phase + .phase { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
}

/* --- 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(--ink); color: var(--bg);
  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: 0; border-top: 1px solid var(--ink);
}

.door {
  position: relative;
  display: flex; flex-direction: column;
  padding: 2rem clamp(1.25rem, 3vw, 3rem) 1rem 0;
  min-width: 0;
}
.door + .door { border-left: 1px solid var(--line); padding-left: clamp(1.25rem, 3vw, 3rem); }
.door::before { content: none; }

@media (max-width: 56rem) {
  .doors { grid-template-columns: 1fr; }
  .door + .door { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
}


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

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

.door__list { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-direction: column; gap: 0; }
.door__list li {
  display: block; font-size: 1rem; color: var(--ink-2);
  padding: .8125rem 0; border-top: 1px solid var(--line-2);
}
.door__list li:last-child { border-bottom: 1px solid var(--line-2); }
.door__list svg { display: none; }

.door__cta { margin-top: auto; }

/* The bridge line between the two doors */
.bridge {
  /* The first column used to hold a 24px icon; it now holds an archival plate,
     so it is sized to the object rather than to a glyph. Wide enough that the
     dressing reads as a thing on a counter, narrow enough that the note beside
     it is still the point. */
  display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1.75rem;
  align-items: start;
  max-width: 52rem; margin: 3.5rem 0 0;
  background: none; border: 0; border-top: 1px solid var(--ink);
  border-radius: 0; padding: 1.5rem 0 0; box-shadow: none;
}
.bridge__icon { width: 24px; height: 24px; border-radius: 0; background: none; display: grid; place-items: center; }
.bridge__icon svg { width: 24px; height: 24px; color: var(--plate-400); }
.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 { 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; margin-bottom: .875rem; }
.msearch__lbl {
  display: block; font-size: var(--t-ui); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: .6875rem;
}
.msearch__input {
  width: 100%; font: inherit; font-size: 1rem; padding: .9375rem 1.25rem;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); box-shadow: var(--sh-sm);
}
.msearch__input::placeholder { color: var(--ink-3); }
.msearch__input:focus { outline: none; border-color: var(--plate-400); box-shadow: var(--sh-md); }
.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-md);
  box-shadow: var(--sh-lg); max-height: 320px; overflow: auto; color: var(--ink);
}
.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: .625rem .75rem; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink); cursor: pointer;
}
.msearch__list button:hover, .msearch__list button:focus-visible { background: var(--surface-2); }
.msearch__list button span { font-family: var(--font-mono); font-size: .6875rem; color: var(--ink-3); white-space: nowrap; }

.addbtn {
  font: inherit; font-size: .8125rem; font-weight: 600;
  padding: .4375rem .9375rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.addbtn:hover { background: var(--grad-cta); border-color: transparent; color: var(--on-grad); }

/* ==========================================================================
   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: var(--on-grad); margin-left: .25rem; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) { .toast { bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)); } }

/* ==========================================================================
   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; }

/* ==========================================================================
   THE COUNTER — the homepage
   --------------------------------------------------------------------------
   The old hero was a CSS drawing of a phone showing a picture of the product,
   with four cards floating around it naming what the product does. This is
   the product: the real rate card, three rows already in the HTML, 92
   molecules behind the field. Nobody can copy it without the catalogue.

   No artwork, because the table is the artwork. The page opens quiet, gives
   the whole middle to one working object, and stops.
   ========================================================================== */

.counter {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--panel);
  color: var(--on-grad);
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  overflow: hidden;
}
/* The band carries the same tooth as the paper, plus one soft light that
   keeps the gradient from banding across wide screens. */
.counter::before {
  /* The light rig. Doyle shoots warm tungsten into green shade, through
     whatever the room already has in front of the lens — a grille, a shutter,
     a doorway — and lets the corners fall away. Four layers, in that order:
     the door jamb, the lamp, its halation, and the vignette. Static; nothing
     here animates, because a moving full-screen texture costs more than it
     gives. A repeating slat was tried and cut: a uniform stripe reads as a
     screen artefact, and the framing in those films is always an irregular
     object in the foreground, never a pattern. */
  content: ""; position: absolute; inset: 0 54% 0 0; z-index: 1; pointer-events: none;
  background-image:
    var(--grain),
    linear-gradient(90deg,
      rgba(14, 15, 6, .55) 0%,
      rgba(14, 15, 6, .10) 5%,
      transparent 11%,
      transparent 88%,
      rgba(14, 15, 6, .22) 96%,
      rgba(14, 15, 6, .48) 100%),
    radial-gradient(38vmax 34vmax at 104% 6%, rgba(214, 196, 128, .22), transparent 62%),
    radial-gradient(16vmax 16vmax at 102% 2%, rgba(238, 226, 176, .18), transparent 55%),
    radial-gradient(132% 116% at 44% 44%, transparent 34%, rgba(14, 15, 6, .60) 100%);
  background-blend-mode: overlay, multiply, screen, screen, normal;
  opacity: .88;
}

/* A directional scrim only works while the type stays in a left column. Once
   the text spans the full width the open side is under it, so the band goes
   back to an even scrim and trades some of the photograph for legibility. */
@media (max-width: 60rem) {
  /* Stacked: the panel keeps the type, the picture sits under it full-bleed
     and still unblended. */
  .counter { padding-bottom: 0; }
  .counter::before { inset: 0; }
  .counter__plate {
    position: relative; inset: auto; z-index: 0;
    height: clamp(12rem, 46vw, 18rem);
    margin-top: clamp(2rem, 6vw, 3rem);
    background-position: center 44%;
  }
}

.counter__head { max-width: 30rem; margin-bottom: clamp(2.25rem, 4.5vw, 3.25rem); }

.counter__eye {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
  font-size: var(--t-ui); font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; color: var(--on-grad-mute); margin-bottom: 2rem;
}
.counter__eye > span {
  background: rgba(240, 241, 230, .10); border: 1px solid var(--on-grad-line);
  border-radius: var(--r-pill); padding: .375rem .875rem;
}
.counter__live { display: inline-flex; align-items: center; gap: .5rem; color: var(--on-grad); }
/* The one dot of vermilion above the fold. It means live. */
.counter__live i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 0 3px rgba(234, 49, 19, .22); }

.counter h1 { margin-bottom: 1.25rem; color: var(--on-grad); }
.counter__lede { font-size: 1.0625rem; color: var(--on-grad-mute); max-width: 36em; line-height: 1.6; }

/* --- the rig ------------------------------------------------------------- */

.counter__rig { max-width: 100%; }

.counter__card {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden;
}

.counter__cardhead {
  display: flex; flex-wrap: wrap; gap: .375rem 1rem; align-items: baseline;
  padding: 1.0625rem 1.375rem; border-bottom: 1px solid var(--line-2);
  background: var(--surface-2); color: var(--ink);
}
.counter__cardhead b { font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.012em; }
.counter__cardhead span {
  margin-left: auto; font-family: var(--font-mono); font-size: .75rem;
  font-variant-numeric: tabular-nums; color: var(--ink-3);
}

/* Wide tables scroll inside their own box; the page never moves sideways. */
/* min-width:0 is the whole fix: this sits inside a grid/flex chain, where the
   default min-width:auto lets the box grow to its table instead of scrolling,
   and the page picks up a horizontal scrollbar on narrow screens. */
.counter__scroll { overflow-x: auto; min-width: 0; position: relative; }
.counter__card, .counter__rig { min-width: 0; }

.counter__foot {
  display: flex; flex-wrap: wrap; gap: .375rem 1rem; align-items: baseline;
  padding: .9375rem 1.375rem; border-top: 1px solid var(--line-2);
  background: var(--surface-2);
  font-family: var(--font-mono); font-size: .75rem; color: var(--ink-2);
}
.counter__foot span:last-child { margin-left: auto; color: var(--ink-3); }

.counter__note {
  margin: 0; padding: .8125rem 1.375rem 1rem; border-top: 1px solid var(--line-2);
  font-size: .8125rem; color: var(--ink-3);
}

.counter__ways { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); }

@media (max-width: 40rem) {
  .counter__cardhead span { margin-left: 0; width: 100%; }
  .counter__foot span:last-child { margin-left: 0; }
}

/* ==========================================================================
   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: var(--bg-alt); }
.door__art--patient { background: var(--bg-alt); }

.art-blob { position: absolute; border-radius: 50%; filter: blur(1px); }
.art-blob { display: none; }

/* --- 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); box-shadow: inset 3px 0 0 var(--brand); }
.art-row--best em { color: var(--brand-700); font-weight: 700; }
.art-row i {
  font-style: normal; font-family: var(--font-mono); font-size: .5rem; font-weight: 400;
  letter-spacing: .04em;
  /* An 8px mark, so it is measured as text: --brand is 3.00:1 on this tint.
     The keyline stays bright (a border is a graphic, 3:1), the word does not. */
  background: transparent; color: var(--brand-700); border: 1px solid var(--brand);
  border-radius: var(--r-pill); padding: .0625rem .4375rem;
}

/* --- 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(--plate-600); }

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

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

.entry { background: var(--grad-band); }
.entry__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ink); }
.entry__card {
  display: flex; flex-direction: column; gap: .5rem;
  background: transparent; border: 0; border-radius: 0;
  padding: 1.75rem clamp(1rem, 2vw, 2rem) 1.25rem 0; min-width: 0;
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease;
}
.entry__card + .entry__card { border-left: 1px solid var(--line); padding-left: clamp(1rem, 2vw, 2rem); }
@media (max-width: 56rem) {
  .entry__grid { grid-template-columns: 1fr; }
  .entry__card + .entry__card { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
}
.entry__icon { display: block; background: none; }
.entry__icon svg { width: 24px; height: 24px; color: var(--plate-400); }


.entry__card h3 { font-size: 1.25rem; margin-top: .25rem; }
.entry__card p { color: var(--ink-2); font-size: .9375rem; }
/* One button per card, not two. Three cards times two buttons was six equal
   calls to action competing in one row. */
.entry__actions { display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap; margin-top: auto; padding-top: 1rem; }
.entry__actions .btn { padding: .625rem 1rem; }
.entry__alt { font-size: .9375rem; font-weight: 600; color: var(--plate-600); }
.entry__alt:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.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 svg { color: var(--plate-600); }
.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(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* Removed: .sec--tight opted out of the shared rhythm. Sections do not
   negotiate their own spacing any more. */
.in-xs  { width: 5.5rem; }
.in-sm  { width: 6.5rem; }
.in-md  { width: 7rem; }
.in-num { text-align: right; }


/* ==========================================================================
   THE PLATE — the photograph gets its own half of the fold
   --------------------------------------------------------------------------
   A picture behind type can only ever be muted or illegible. So the type stays
   in the left column on flat olive and the plate takes the right at close to
   full strength, with a feathered edge between them and a light olive wash so
   the warm tan of the paper marries the band instead of fighting it.
   ========================================================================== */

.counter__plate {
  position: absolute; inset: 0 0 0 46%; z-index: 0;
  background-image: url("../img/charts.4f6a423581f8.jpg");
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}
.counter__plate::after { content: none; }
.counter .shell { position: relative; z-index: 1; }

@media (max-width: 60rem) {
  /* Once the type spans the full width there is no side to give the plate, so
     it becomes a full-bleed band under the text and stays fully visible. */
  .counter { padding-bottom: 0; }
  .counter__plate {
    position: relative; inset: auto; z-index: 0;
    height: clamp(11rem, 40vw, 16rem);
    margin-top: clamp(2rem, 6vw, 3rem);
    background-position: center 46%;
  }
  .counter__plate::after { content: none; }
}


/* ==========================================================================
   THE BUILDING
   --------------------------------------------------------------------------
   Worn plaster rather than clean stock: a mottle that pools unevenly the way
   damp does, and a dado rule at the height a corridor is actually painted to.
   Same olive and off-white; only the surface changes.
   ========================================================================== */

body::after { content: none; }

/* The dado: the line an old corridor is painted to, carried under each band. */
.rigsec { position: relative; isolation: isolate; }

/* The archive plate, in the band below the rate card.

   It sits where nothing is written rather than under everything. That is what
   lets it stay a photograph: dark text on this section means the ground can
   never fall below roughly 186 luminance anywhere type lands, and honouring
   that everywhere either scrims the plate away or flattens its tonal range
   until there is no image left. Both were tried.

   So the mask holds it out of the top of the section entirely — the label, the
   search field and the card — brings it up through the empty band underneath,
   and fades it out again before the section ends. Luminosity blend retints it
   into the page's sage instead of importing the plate's yellows. */
.rigsec::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--bg);
  background-image:
    url("../img/ward.36619100033d.jpg");
  background-size: cover;
  background-position: center 54%;
  background-repeat: no-repeat;
  /* multiply, not luminosity. Luminosity takes the plate's brightness but the
     page's saturation, which against a light sage ground always resolves to a
     pale wash — no mask or scrim setting could rescue it. multiply keeps the
     photograph's own tonal depth and still tints it into the page's green,
     because the sage sits underneath it as the base. */
  background-blend-mode: multiply;
  /* A soft hole over the top-centre, where the label and the search field sit,
     and full strength everywhere around it: the outer margins beyond the
     content column, and the band below the card. The card itself is opaque, so
     the plate passes behind it at full strength without costing anything. */
  -webkit-mask-image:
    radial-gradient(128% 74% at 50% 20%, transparent 0 44%, rgba(0,0,0,.45) 62%, #000 84%),
    linear-gradient(180deg, #000 0, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    radial-gradient(128% 74% at 50% 20%, transparent 0 44%, rgba(0,0,0,.45) 62%, #000 84%),
    linear-gradient(180deg, #000 0, #000 90%, transparent 100%);
          mask-composite: intersect;
}
.rigsec::after {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
  pointer-events: none;
}

/* Longing, not efficiency — the easing the reference build names for exactly
   this, used wherever the page moves at all. */
:root { --ease-long: cubic-bezier(.16, .84, .28, 1); }
[data-reveal] { transition-timing-function: var(--ease-long) !important; }


/* The frame stamp, bottom-left, out of the way of the footer's own mark. */
.tc {
  position: fixed; left: var(--gutter); bottom: 1rem; z-index: 30;
  margin: 0; display: grid; justify-items: start; gap: .1rem;
  font-family: var(--font-mono); font-size: .625rem; letter-spacing: .06em;
  color: var(--ink-3); pointer-events: none; opacity: .8;
}
@media (max-width: 46rem) { .tc { display: none; } }


/* The plaster, cut out of its studio ground and laid on the paper like the
   object it is — a real thing from the same set as the plate, not an icon. */
.bridge__plaster {
  width: 3.25rem; height: auto; margin-top: .25rem;
  transform: rotate(-4deg);
  filter: drop-shadow(0 1px 2px rgba(21, 21, 7, .18));
}


/* The fold is the one dark room on a pale page, so its controls flip. */
.counter__ways .btn--primary { background: var(--paper); color: var(--plate-900); box-shadow: none; }
.counter__ways .btn--primary:hover { background: #FFFFFF; }
.counter__ways .btn--ghost { background: transparent; color: var(--on-grad); border-color: var(--plate-300); box-shadow: none; }
.counter__ways .btn--ghost:hover { border-color: var(--on-grad); background: rgba(237, 245, 243, .10); }
.counter__eye > span { background: rgba(237, 245, 243, .10); border-color: rgba(237, 245, 243, .22); }



/* ---- the nav bar runs white on the fold's green ---------------------------- */
/* The bar carries the same tooth as the fold beneath it, so the two read as one
   piece of material rather than a flat strip sitting on a textured one: the
   grain, a fine weave, and a low raking light off the left. Static, and behind
   the content — the bar is sticky, so anything animated here would repaint on
   every scroll frame. */
.nav { position: sticky; isolation: isolate; }
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .55;
  background-image:
    var(--grain),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .030) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg,  rgba(0, 0, 0, .045) 0 1px, transparent 1px 5px),
    linear-gradient(96deg, rgba(255, 255, 255, .07) 0%, transparent 34%),
    radial-gradient(60% 180% at 88% 120%, rgba(0, 0, 0, .30), transparent 70%);
  background-blend-mode: overlay, overlay, multiply, screen, multiply;
}
.nav__inner { position: relative; z-index: 1; }
.nav .brand { color: #FFFFFF; }
.nav 
.nav__links { color: rgba(255, 255, 255, .82); }
.nav__links a:hover { color: #FFFFFF; }
.nav__signin { color: rgba(255, 255, 255, .82); }
.nav__signin:hover { color: #FFFFFF; }
.nav__toggle { color: #FFFFFF; border-color: rgba(255, 255, 255, .28); }
/* The primary button is the pale object once the bar behind it is dark. */
.nav__cta.btn--primary { background: #FFFFFF; color: var(--plate-900); box-shadow: none; }
.nav__cta.btn--primary:hover { background: var(--plate-50); }


/* ==========================================================================
   THE ENTRY — every object carries a reference and shows it
   --------------------------------------------------------------------------
   Direction B. A row is not a list item, it is a catalogue entry: reference,
   name, values. The reference is set in the mono at the smallest size the
   scale allows and sits above or ahead of the name, the way a drug entry
   prints its code. It is the part a competitor cannot copy, because it needs
   a real catalogue behind it.
   ========================================================================== */

.entryref {
  display: block; width: 100%;
  font-family: var(--font-mono); font-size: .625rem; letter-spacing: .12em;
  color: var(--ink-3); margin-bottom: .25rem;
}
.rowref {
  display: inline-block; min-width: 4.75rem;
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 400;
  letter-spacing: .06em; color: var(--ink-3);
}
.rates .is-best .rowref { color: var(--brand-700); }

/* The archive object beside the note: printed, handled, and shown at the size
   the plate can actually hold — the source is 500px across. */
.bridge__plate {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line);
}
.bridge__cap {
  display: block; margin-top: .5rem;
  font-family: var(--font-mono); font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}

@media (max-width: 40rem) { .bridge { grid-template-columns: 1fr; } }


/* ==========================================================================
   THE WORDMARK — an index entry
   --------------------------------------------------------------------------
   Name, hairline, reference. The identical construction the rate card uses for
   a molecule, so the company is typeset by its own catalogue rules. Sized in
   em throughout, so the lockup travels with whatever font-size sets it.
   ========================================================================== */

/* Two columns: the plate spans both rows, the index entry stacks beside it.
   Placed explicitly rather than by auto-flow, so adding the mark could not
   push the reference line onto a third row of its own. */
.logo {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  justify-items: start; align-items: center;
  line-height: 1;
}
.logo__c {
  grid-column: 1; grid-row: 1 / span 2;
  width: 1.32em; height: 1.32em; margin-right: .44em;
  display: block; align-self: center;
}
.logo__name { grid-column: 2; grid-row: 1; }
.logo__ref  { grid-column: 2; grid-row: 2; }
.logo__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1em;
  letter-spacing: -.035em;
  padding-bottom: .22em;
  border-bottom: 1px solid currentColor;
  width: 100%;
}
.logo__ref {
  font-family: var(--font-mono);
  font-size: .30em;
  letter-spacing: .22em;
  padding-top: .42em;
  opacity: .72;
  white-space: nowrap;
}

/* ==========================================================================
   ACT I — THE GATE (removed)
   --------------------------------------------------------------------------
   The first gate was built on `.gate`, `.gate__plate`, `.gate__mark` and the
   rest. It was superseded by the printed sheet, which is built on `.gt`, and
   every one of those selectors became dead — except `.gate` itself, which is
   ALSO the sign-in page's three-doors wrapper in app.css. Both stylesheets load
   on that page, so a dead rule was painting the sign-in panel near-black and
   leaving the wordmark on it at 1.28:1.

   The live gate is under "THE PRESS" below. Do not reintroduce a bare `.gate`.
   ========================================================================== */

/* ==========================================================================
   ACT II — THE COUNTER
   --------------------------------------------------------------------------
   The navigation architecture, not a hero. The three objects are shown before
   they are named, and the caption names the object rather than the feature it
   maps to. The third way in is quieter because the distributor role genuinely
   is narrower, not because it matters less.
   ========================================================================== */

.counter-scene { padding-block: clamp(1.5rem, 4vw, 2.5rem) var(--sec-pad); }
.counter-scene__back {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .625rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.counter-scene__back:hover { color: var(--ink); }
.counter-scene__back svg { width: 14px; height: 14px; }

.traces {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.5rem); align-items: end;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
.trace { margin: 0; display: grid; gap: .75rem; }
.trace figcaption {
  font-family: var(--font-mono); font-size: .5625rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.trace__paper, .trace__ledger {
  background: var(--surface); border: 1px solid var(--line);
  padding: .875rem .9375rem; min-height: 8.5rem;
  display: flex; flex-direction: column; gap: .3rem;
}
.trace__clinic {
  font-size: .625rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: .5rem;
}
.trace__hand { font-family: "Caveat", cursive; font-size: 1.0625rem; color: var(--ink-2); }
.trace__row {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .75rem; padding: .28rem 0; border-bottom: 1px solid var(--line-2);
}
.trace__row:last-child { border-bottom: 0; }
.trace__row b { font-weight: 500; }
.trace__row em { font-style: normal; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.trace--carton img { width: 100%; height: 8.5rem; object-fit: cover; border: 1px solid var(--line); }

.counter-scene__ask {
  font-size: clamp(1.75rem, 4vw, 2.75rem); margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.ways { display: grid; border-top: 1px solid var(--ink); }
.way {
  display: grid; grid-template-columns: 3rem minmax(0, 15rem) minmax(0, 1fr) 2rem;
  gap: 1.25rem; align-items: baseline;
  padding: 1.25rem 0; border-bottom: 1px solid var(--line);
  transition: padding-left .18s ease;
}
.way:hover { padding-left: .625rem; }
.way__n { font-family: var(--font-mono); font-size: .6875rem; color: var(--ink-3); }
.way__label { font-size: 1.125rem; font-weight: 600; letter-spacing: -.015em; }
.way__note { font-size: .9375rem; color: var(--ink-2); }
.way__arrow { text-align: right; color: var(--ink-3); }
.way:hover .way__arrow { color: var(--brand); }
/* The narrowest role, set quieter. */
.way--quiet .way__label { font-weight: 500; color: var(--ink-2); }
@media (max-width: 46rem) {
  .way { grid-template-columns: 2.25rem minmax(0, 1fr) 1.5rem; gap: .75rem; }
  .way__note { grid-column: 2 / -1; }
  .traces { grid-template-columns: 1fr; }
}

.counter-scene__signin { margin-top: 1.75rem; font-size: .9375rem; color: var(--ink-2); }
.counter-scene__signin a { font-weight: 600; border-bottom: 1px solid var(--brand); }

/* ==========================================================================
   THE STATE LANGUAGE
   --------------------------------------------------------------------------
   One vocabulary for all four machines: purchase order, patient order,
   prescription, trade account. A step is a mono label over a rule. The rule is
   what carries the state, so the same component reads at any size and needs no
   colour to be understood — colour only ever confirms what the rule says.

   `is-now` is the step the object is on. `is-done` is behind it. `is-next` is
   ahead. Nothing else is a state.
   ========================================================================== */

.states { display: flex; flex-wrap: wrap; gap: 0; margin: 1rem 0; }
.state {
  flex: 1 1 0; min-width: 6rem;
  padding-top: .5rem; border-top: 2px solid var(--line);
  font-family: var(--font-mono); font-size: .5625rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
}
.state.is-done { border-top-color: var(--ink-3); color: var(--ink-3); }
.state.is-now  { border-top-color: var(--brand); color: var(--brand-700); font-weight: 500; }
.state.is-now::after {
  content: ""; display: block; width: 5px; height: 5px;
  background: var(--brand); margin-top: .4rem;
}
.state.is-stopped { border-top-color: var(--rose); color: var(--rose); }

/* Marks functionality that is described but not yet built, so a screen never
   implies a problem is solved. Used sparingly and never on a live control. */
.state--future { opacity: .55; }
.state--future::before {
  content: "Planned"; display: block; font-size: .5rem;
  letter-spacing: .14em; color: var(--ink-3); margin-bottom: .2rem;
}


/* ==========================================================================
   Material evidence
   Photographs of real objects: a working stockroom, a rack of teaching charts,
   a wall of trade paperwork. They sit behind or beside structure, never under
   a number, and they get quieter the closer the page comes to a decision.
   ========================================================================== */

/* A working pharmacy's shelving — handwritten bin labels, taped repairs. Shot
   monochrome in camera, so nothing here recolours it. It sits under the three
   steps at low opacity and is meant to be noticed second, not first. */
.sec--stockroom { position: relative; isolation: isolate; overflow: hidden; }
.sec--stockroom::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background-image: url("../img/stockroom.42772483daa3.jpg");
  background-size: cover; background-position: center 40%;
  opacity: .13;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 66%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 66%, transparent 100%);
}

/* A wall of trade paperwork — invoices, packing lists and carbon copies taped
   up in layers. It sits behind the section that describes exactly this: three
   invoices, three credit dates, three follow-ups. Anchored left and faded on a
   vertical axis, so it is not the stockroom treatment repeated: that one is a
   centred band, this one is a column that runs off the left edge. */
.sec--paperwork { position: relative; isolation: isolate; overflow: hidden; }
.sec--paperwork::before {
  content: ""; position: absolute; z-index: -1;
  top: 0; bottom: 0; left: 0; width: min(38rem, 44%);
  background-image: url("../img/paperwork.3028e60c880f.jpg");
  background-size: cover; background-position: 40% center;
  opacity: .16;
  -webkit-mask-image: radial-gradient(120% 80% at 8% 50%, #000 0%, rgba(0,0,0,.7) 34%, transparent 80%);
          mask-image: radial-gradient(120% 80% at 8% 50%, #000 0%, rgba(0,0,0,.7) 34%, transparent 80%);
}

/* A rack of teaching charts, hung and torn. A fragment: it is cropped by the
   viewport on purpose and is the first thing to go at narrow widths, because
   it carries atmosphere and no information. */
.frag {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  opacity: .5; filter: saturate(.72);
}
.frag img { display: block; width: 100%; height: auto; }
/* Anchored off the top-right corner and dissolved radially from it, so the
   image has no cut edge of its own — it is leaving the frame, not sitting in
   a box. What survives is the rail, the hooks and the torn top edges. */
.frag--rack {
  top: -5rem; right: -9rem; width: min(26rem, 27vw);
  -webkit-mask-image: radial-gradient(135% 105% at 94% 6%, #000 0%, rgba(0,0,0,.9) 30%, transparent 76%);
          mask-image: radial-gradient(135% 105% at 94% 6%, #000 0%, rgba(0,0,0,.9) 30%, transparent 76%);
}
.sec--fragged { position: relative; overflow: hidden; }
.sec--fragged > .shell { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .frag { display: none; }
  .sec--stockroom::before { opacity: .09; }
  .sec--paperwork::before { width: 100%; opacity: .08; }
}


/* ==========================================================================
   THE PRESS — first screen in the red/off-white material language
   ==========================================================================
   Read off the reference set in refs/inspiration (see _manifest.json).

   Palette, measured off the poison labels (r03, r31, r42), the letterpress
   ampersand (r55) and the Mostaza Roja tin (r40) — and then checked, because
   the labels print red body text that a screen cannot carry:

     paper   #F2E8D5   the ground. Never white.
     ink     #1C1310   every word you actually read. 15.03:1 on paper.
     red     #D8261A   4.10:1 on paper — DISPLAY, BARS, RULES, MARKS. Never body.
     oxblood #7E1410   8.66:1 under cream — the red that is allowed to carry text.

   The rule that follows from those numbers is the rule the labels already obey:
   red is ink you look at, not ink you read.

   Scoped to `.gt` on purpose. This is one screen, not a site-wide repaint.
   ========================================================================== */

/* The tokens and the stock live on `.press`; every screen in this language
   carries that class alongside its own. One place for the palette, so a third
   screen cannot quietly invent a fourth red. */
.press {
  --paper:   #F2E8D5;
  --paper-d: #E7D9BF;
  --ink:     #1C1310;
  --red:     #D8261A;
  --oxblood: #7E1410;

  /* Paper tooth and press grain. Two frequencies: a coarse blotch that reads as
     uneven stock, and a fine grain that keeps flat areas from looking digital. */
  --tooth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23t)' opacity='0.55'/%3E%3C/svg%3E");
  --press: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E");

  background: var(--paper);
  color: var(--ink);
}
/* The stock itself. Multiply, so the tooth darkens the paper rather than
   greying it — a scrim over cream reads as dirt, a multiply reads as fibre. */
.press::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--press), var(--tooth);
  background-size: 160px 160px, 300px 300px;
  mix-blend-mode: multiply; opacity: .5;
}
/* Long reading sections get a quieter stock. The gate can carry .5 because a
   photograph sits on top of it; under body copy the coarse tooth reads as dirt
   rather than as paper. */
/* Texture at the ends of the page, near-nothing through the middle where the
   reading and the figures are. Same rule the whole project runs on: the closer
   to a decision, the quieter the material. */
.ct::before, .ctfoot::before { opacity: .22; }
.claim::before, .rc::before, .behind::before, .refuse::before { opacity: .09; }

/* --- ACT I — THE GATE ----------------------------------------------------
   A printed sheet with one object on it, and nothing tentative anywhere.

   The dressing crosses the whole sheet and is cut by the keyline on both sides
   — it is a strip across the page, not a pill floating on it. The name fills
   the strip. The furniture is heavy: a 3px keyline, a 3px rule under the index
   row, a 3px rule over the bottom bar. The way in is the terminal cell of that
   bar and is as tall as the bar.

   Cream on that green measures 8.21:1 in the render; ink is 1.91:1 and red is
   1.92:1, so nothing you have to read touches the dressing and the red never
   goes near it.

   The ground is the chemist's shop, and it is meant to be SEEN: a continuous
   duotone from paper to oxblood at 68%, so the shelves, bottles and cartons
   read as a room rather than a tint. No screen on it, so nothing interferes
   with the dressing's halftone. Every word sits on a paper bar above or below
   it, so the strength of the photograph never touches legibility. */

.gt {
  min-height: 100svh;
  padding: clamp(1.25rem, 3vw, 2.75rem);
  display: grid;
  /* The street outside — a chemist's shopfront — multiplied onto the stock in
     monochrome, so the page the sheet sits on is a place and not a colour. It
     shows in the margin and through the two bars; the sheet itself is untouched. */
  background: var(--paper) url("../img/ground-street.cf760dfc2364.jpg") center 55% / cover no-repeat;
  background-blend-mode: multiply;
}

.gt__sheet {
  position: relative; isolation: isolate; overflow: hidden; min-height: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  border: 3px solid var(--ink);
}


/* --- Index row ------------------------------------------------------------ */

/* Both bars are cell-divided rules, like the bottom bar of a poison label:
   hairlines between the cells give the row a rhythm instead of two clumps of
   type at either end of an empty span. */
.gt__top {
  position: relative; z-index: 2;
  display: flex; align-items: stretch;
  border-bottom: 3px solid var(--ink);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  font-family: var(--font-mono); font-size: .8125rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
}
.gt__cell { display: inline-flex; align-items: center; padding: .8125rem clamp(1rem, 2.4vw, 1.75rem); }
.gt__cell + .gt__cell { border-left: 1px solid var(--ink); }
.gt__top b { font-weight: 700; color: var(--oxblood); }
.gt__open {
  margin-left: auto; gap: .5rem; border-left: 3px solid var(--ink) !important;
  background: var(--paper);        /* opaque: the shopfront's phone number was ghosting through "Open" */
  color: var(--oxblood);
}
/* The rolled cross, but authored at 96px instead of 1200px: the roller texture
   is generated at the scale it is shown, so it survives. Shrinking the big one
   was what turned it into a smudge — the fix was the source, not the shape. */
.gt__cross { width: 1.25rem; height: 1.25rem; display: block; flex: 0 0 auto; }

/* --- The object ----------------------------------------------------------- */

/* The art area owns its paper and its wash. Scoped here, not to the sheet, so
   the translucent wash sits on solid cream (the interior stays exactly as it
   was) while the two bars and the margin show the street instead. */
.gt__art { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 0; background: var(--paper); }
/* The shelves: the continuous wash, with a faint screen printed through it —
   The source is 736px wide against a 2800px sheet — a 3.8x upscale, which is
   where the softness came from. Local contrast (unsharp against a 60px blur)
   plus a sharpen pass gives the packets and shelf edges back their definition;
   the 28% screen sits on top of that, texture rather than dots. */
.gt__art::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../img/shelves-print.ec1cfc92b068.jpg") center 40.3% / cover no-repeat;
  opacity: .82;
}

.gt__band {
  position: absolute; z-index: 2; top: 50%; left: 50%;
  width: 86%; aspect-ratio: 3.94;
  translate: -50% -50%; rotate: -10.5deg;
  background: url("../img/bandage-up.9acc0729260a.png") center / 100% 100% no-repeat;
  pointer-events: none;
}
.gt__mark {
  position: relative; z-index: 3; margin: 0;
  font-family: var(--font-display); font-weight: 900;
  font-size: 10.2vw; line-height: .82; letter-spacing: -.05em;
  color: var(--paper); white-space: nowrap;
  width: max-content;   /* hug the lockup: a full-width box hides its own overflow */
}
/* The old lockup: a vermilion square holding a white C. It is printed like
   everything else here — the cream rect behind it is the underprint, offset
   down and right, which is also what separates the red from the green (red on
   this green is 1.92:1, so the square could not sit on it unfenced). */
.gt__c {
  width: .95em; height: .95em; display: inline-block;
  vertical-align: -.09em; margin-right: .1em;
}

/* --- Bottom bar ----------------------------------------------------------- */

.gt__foot {
  position: relative; z-index: 2;
  display: flex; align-items: stretch;
  border-top: 3px solid var(--ink);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
}
/* The pharmacy cross, rolled on like a monoprint, sitting with the state it
   qualifies: the shop is open, and this is the sign that says which shop. */
.gt__cross { display: inline-block; width: 1.75rem; height: 1.75rem; flex: 0 0 auto; }
.gt__cross img { width: 100%; height: 100%; display: block; }
/* The pharmacy cross — the international sign, in the dressing's green, rolled
   on like a monoprint. It is the first cell of the bottom bar: a printer's
   mark, not a logo. */
/* The claim, then the qualifier, in two cells: the guardrail reads as a
   footnote to the tagline instead of a second sentence of equal weight. */
.gt__line {
  padding: 1.25rem clamp(1rem, 2.4vw, 1.75rem);
  flex: 1 1 auto;                  /* the claim takes the slack, so there is no empty cell */
  font-size: clamp(1.25rem, 2.1vw, 1.875rem); line-height: 1.2; letter-spacing: -.015em;
  color: var(--ink); margin: 0; font-weight: 600; align-self: center;
}
.gt__note {
  padding: 1.25rem clamp(1rem, 2.4vw, 1.75rem);
  flex: 0 0 auto;                  /* shrink to the words: a 600px void sat here */
  border-left: 1px solid var(--ink);
  font-family: var(--font-mono); font-size: .75rem; line-height: 1.5;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  margin: 0; align-self: center;
}
.gt__enter {
  position: relative; margin-left: auto;
  display: inline-flex; align-items: center; gap: 1.25rem;
  background: var(--oxblood); color: var(--paper);
  border-left: 3px solid var(--ink);
  font-family: var(--font-mono); font-size: .9375rem; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase;
  padding: 0 clamp(1.5rem, 3.5vw, 3rem);
}
.gt__enter svg { width: 22px; height: 22px; transition: translate .16s ease; }
.gt__enter:hover { color: var(--paper); background: var(--ink); }
.gt__enter:hover svg { translate: 6px 0; }

/* The running timecode is site chrome; the index row is this sheet's metadata. */
body:has(.gt) .tc { display: none; }

@media (max-width: 760px) {
  .gt__band { width: 175vw; rotate: -16deg; }
  /* The lockup measures 4.07em (mark .95 + gap .1 + word 3.02). At 24vw that is
     381px inside a 344px sheet and the final "o" was being cut. */
  .gt__mark { font-size: 20vw; }
  .gt__top { font-size: .6875rem; }
  .gt__top { flex-wrap: wrap; }
  .gt__cell { padding: .625rem clamp(.75rem, 2.4vw, 1.25rem); }
  .gt__open { margin-left: auto; }
  .gt__foot { display: grid; grid-template-columns: minmax(0, 1fr); }
  .gt__note { border-left: 0; border-top: 1px solid var(--ink); }
  /* On a stacked bar the middle is a row of its own. */

  .gt__enter { margin-left: 0; border-left: 0; border-top: 3px solid var(--ink); padding: 1.125rem clamp(1rem, 2.4vw, 1.75rem); justify-content: space-between; }
}

/* --- ACT II — THE COUNTER -------------------------------------------------
   Three specimens, a question set too big for its column, and three numbered
   ways in. The furniture is a catalogue page: index numerals, hairlines under
   everything, a heavy rule where the sheet changes subject.

   The one interaction that carries the language is the hover on a way: the row
   floods oxblood and the type knocks out cream. That is r46 — a whole field
   taking ink — and at 8.66:1 it is a flood that can still be read. */

.ct {
  position: relative; isolation: isolate;
  min-height: 100svh;
  padding: clamp(1.25rem, 3vw, 2.25rem) 0 clamp(3rem, 6vw, 5rem);
  overflow-x: hidden;
}
.ct__in { position: relative; z-index: 1; width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }

.ct__top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: .75rem; border-bottom: 2px solid var(--ink);
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
}
.ct__back { display: inline-flex; align-items: center; gap: .625rem; color: var(--ink); }
.ct__back svg { width: 15px; height: 15px; }
.ct__back:hover { color: var(--oxblood); }
.ct__no { color: var(--oxblood); }

/* --- The three specimens -------------------------------------------------
   Catalogue entries, not cards: index numeral, hairline, object, name. Each
   object is a different KIND of thing — handwriting, numerals, a halftone —
   so the row does not read as three of the same component. */

.spm__row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin: clamp(1.75rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.spm { display: flex; flex-direction: column; min-width: 0; }
.spm__head {
  display: flex; align-items: baseline; gap: .625rem;
  padding-bottom: .4375rem; margin-bottom: .875rem; border-bottom: 1px solid var(--ink);
  font-family: var(--font-mono); font-size: .625rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
}
/* Oxblood, not the bright red. These index numerals are 10px, and the bright
   red is 3.78:1 on stock — fine for a 200px wordmark, not for this. The rule
   the whole language runs on: bright red is display size only; every small red
   mark is oxblood. */
.spm__ix { color: var(--oxblood); font-weight: 700; }
.spm__body {
  border: 1.5px solid var(--ink); background: var(--paper);
  aspect-ratio: 5 / 4; overflow: hidden; position: relative;
}
.spm__body img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 01 — handwriting on a form */
.spm__rx { padding: 1rem 1.125rem; display: flex; flex-direction: column; gap: .3125rem; }
.spm__clinic {
  font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink); padding-bottom: .5rem;
  border-bottom: 1px solid var(--ink); margin-bottom: .375rem;
}
.spm__hand { font-family: "Caveat", cursive; font-size: 1.0625rem; line-height: 1.25; color: var(--ink); }

/* 02 — the numerals. This is the platform's own content, so it is set like
   content and not like a picture of content (r53). */
.spm__rate { padding: .75rem .875rem; display: flex; flex-direction: column; justify-content: center; gap: 0; }
.spm__line {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  padding: .3125rem 0; border-bottom: 1px solid var(--paper-d);
  font-size: .75rem;
}
.spm__line:last-child { border-bottom: 0; }
.spm__line b { font-weight: 600; }
.spm__line em {
  font-style: normal; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: .9375rem; font-weight: 600;
}
.spm__line--low { background: var(--oxblood); color: var(--paper); margin: 0 -.875rem; padding: .3125rem .875rem; border-bottom: 0; }

.spm__name { margin-top: .75rem; font-size: .9375rem; font-weight: 600; }

/* --- The question --------------------------------------------------------
   Set too big for the column and allowed to run past it. Red is display here
   and carries no reading weight; the sentence under it does that. */

/* Two lines, not one. On a single nowrap line this measured 11.42em wide, and
   the Archivo swap pushed it 398px past its column at 1421 — a headline sized
   by luck. Wrapping lets it be larger AND removes the failure mode. */
.ct__ask {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(3rem, 8.5vw, 7.5rem); line-height: .88; letter-spacing: -.05em;
  color: var(--red); margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  position: relative; max-width: 11ch;
}
.ct__ask::before {
  content: attr(data-word); position: absolute; left: 3px; top: 3px; z-index: -1; color: var(--oxblood);
}

/* --- The ways ------------------------------------------------------------- */

.wy__list { border-top: 2px solid var(--ink); }
.wy {
  display: grid; grid-template-columns: 4.5rem minmax(0, 15rem) minmax(0, 1fr) 2.5rem;
  align-items: center; gap: clamp(.75rem, 2vw, 1.75rem);
  padding: clamp(1rem, 2.2vw, 1.5rem) 0;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  transition: background-color .12s linear, color .12s linear, padding-inline .12s linear;
}
.wy__n {
  font-family: var(--font-mono); font-size: 1.25rem; font-weight: 500;
  letter-spacing: .04em; color: var(--oxblood);   /* 20px/500 is not large text */
}
.wy__label { font-size: clamp(1.0625rem, 1.8vw, 1.375rem); font-weight: 700; letter-spacing: -.02em; }
.wy__note { font-size: .9375rem; color: var(--ink); }
.wy__arrow { justify-self: end; font-size: 1.25rem; }

/* The flood. The whole row takes ink and the words knock out of it. */
.wy:hover, .wy:focus-visible {
  background: var(--oxblood); color: var(--paper);
  padding-inline: clamp(.75rem, 2vw, 1.25rem);
  outline: none;
}
.wy:hover .wy__n, .wy:focus-visible .wy__n,
.wy:hover .wy__note, .wy:focus-visible .wy__note { color: var(--paper); }

.ct__signin {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink);
}
.ct__signin a { color: var(--oxblood); font-weight: 700; border-bottom: 1.5px solid var(--oxblood); }

@media (max-width: 800px) {
  .spm__row { grid-template-columns: minmax(0, 1fr); }
  /* Content-driven at this width: a fixed ratio on a full-bleed column leaves a
     third of each specimen empty. */
  .spm__body { aspect-ratio: auto; min-height: 9.5rem; }
  .ct__ask { font-size: clamp(2.5rem, 13vw, 4.5rem); max-width: none; }
  /* Named areas, not auto-placement: with four children and three columns the
     rows were placing the label and the arrow wherever they landed. */
  .wy {
    grid-template-columns: 2.75rem minmax(0, 1fr) 1.5rem;
    grid-template-areas: "n label arrow" "n note arrow";
    row-gap: .1875rem; column-gap: .875rem;
  }
  .wy__n     { grid-area: n; align-self: start; }
  .wy__label { grid-area: label; }
  .wy__note  { grid-area: note; }
  .wy__arrow { grid-area: arrow; align-self: center; }
}


/* --- ACT I / 03 — THE RATE CARD ------------------------------------------
   Dense information with display type printed over it (r47), corrected for the
   fact that these figures are meant to be read: the overprint lands on the
   masthead and the rules, never on a number.

   `.rates`, `.msearch`, `.chip` and `.addbtn` are shared with two pages still in
   the older palette, so every rule here is scoped under `.press`. Nothing on
   /for-patients/ or /for-pharmacies/ moves until we move it on purpose. */

.rc { position: relative; isolation: isolate; padding: clamp(3rem, 7vw, 6rem) 0 clamp(3.5rem, 8vw, 7rem); }
.rc__in { position: relative; z-index: 1; width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }

.rc__ix {
  display: flex; align-items: baseline; gap: .875rem; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
  padding-bottom: .6875rem; border-bottom: 2px solid var(--ink);
}
.rc__ix span { color: var(--oxblood); font-weight: 700; }
.rc__ix em { font-style: normal; color: var(--ink); opacity: .72; letter-spacing: .12em; }

/* Printed over the rule above it, not politely below it. The 2px masthead rule
   crosses the caps — display type and furniture fighting for the same paper,
   which is the whole of r47 and r23. Legible because it is display size and
   because the rule is ink on red, not red on red. */
/* Ink, at heading size. The demo below it is the argument; the heading only
   has to name it. It kept its overprint and its display size until the page
   had three of those and no hierarchy at all. */
.rc__ask {
  font-size: clamp(1.375rem, 2.6vw, 2.125rem); line-height: 1.1; letter-spacing: -.03em;
  font-weight: 700; color: var(--ink); margin: 1.25rem 0 0;
}

/* --- The search field ----------------------------------------------------- */

.press .msearch { position: relative; margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 clamp(1.25rem, 2.5vw, 2rem); max-width: 44rem; }
.press .msearch__lbl {
  display: block; font-family: var(--font-mono); font-size: .625rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink); margin-bottom: .5rem;
}
.press .msearch__input {
  width: 100%; font: inherit; font-size: clamp(1.0625rem, 2vw, 1.5rem); font-weight: 500;
  letter-spacing: -.015em; color: var(--ink);
  background: transparent; border: 0; border-bottom: 3px solid var(--ink);
  border-radius: 0; padding: .5rem 0 .625rem;
}
.press .msearch__input::placeholder { color: var(--ink); opacity: .45; font-weight: 400; }
.press .msearch__input:focus { outline: none; border-bottom-color: var(--red); }
.press .msearch__list {
  position: absolute; z-index: 5; left: 0; right: 0; top: 100%; margin: 0; padding: 0; list-style: none;
  background: var(--paper); border: 2px solid var(--ink); border-top: 0; max-height: 17rem; overflow-y: auto;
}
.press .msearch__list li + li { border-top: 1px solid var(--paper-d); }
.press .msearch__list button {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: .6875rem .875rem; font: inherit; font-size: .9375rem; color: var(--ink);
}
.press .msearch__list button b { font-weight: 600; }
.press .msearch__list button span { font-family: var(--font-mono); font-size: .6875rem; opacity: .7; }
.press .msearch__list button:hover { background: var(--oxblood); color: var(--paper); }

/* --- The card ------------------------------------------------------------- */

.rc__card { border: 2px solid var(--ink); background: var(--paper); min-width: 0; }
.rc__cardhead {
  display: flex; align-items: baseline; gap: .875rem; flex-wrap: wrap;
  padding: .875rem 1.125rem; border-bottom: 2px solid var(--ink);
}
.rc__cardhead .entryref { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .14em; color: var(--oxblood); }
.rc__cardhead b { font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; }
.rc__cardhead [data-mol-meta] { margin-left: auto; font-family: var(--font-mono); font-size: .75rem; color: var(--ink); opacity: .75; }
.rc__scroll { overflow-x: auto; min-width: 0; position: relative; }

.press .rates { width: 100%; border-collapse: collapse; font-size: .9375rem; color: var(--ink); }
.press .rates th {
  font-family: var(--font-mono); font-size: .625rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink); opacity: .75;
  text-align: left; padding: .625rem .875rem; white-space: nowrap;
  border-bottom: 1px solid var(--ink); background: none;
}
.press .rates td { padding: .8125rem .875rem; border-bottom: 1px solid var(--paper-d); white-space: nowrap; }
.press .rates tbody tr:last-child td { border-bottom: 0; }
.press .rates .r-firm { font-weight: 600; }
/* color:inherit matters. The older, unscoped `.rowref` and `.rates .is-best
   .rowref` rules further up this file set a dark colour, and without this the
   ref on a flooded row inherits nothing and renders dark-on-oxblood. */
.press .rates .rowref { display: block; color: inherit; font-family: var(--font-mono); font-size: .625rem; font-weight: 400; letter-spacing: .12em; opacity: .6; }
.press .rates .r-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1rem; }
.press .rates tbody { transition: opacity .14s linear; }
.press .rates tbody.is-swapping { opacity: .25; }

/* The lowest listed PTR takes ink, and every word in the row knocks out of it.
   Cream on oxblood is 8.66:1, so a flooded row is still a readable row. */
.press .rates tr.is-best td { background: var(--oxblood); color: var(--paper); border-bottom-color: var(--oxblood); }
/* Full strength: cream on oxblood is 8.66:1, but a 10px mono ref at 60-80%% opacity is not. */
.press .rates tr.is-best .rowref { color: inherit; opacity: 1; }

.press .chip {
  display: inline-block; font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .06em; padding: 0; border: 0; border-radius: 0; background: none; color: inherit;
}
.press .chip--none { opacity: .45; }
.press .chip--low { color: var(--oxblood); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.press .rates tr.is-best .chip--low { color: var(--paper); }
.press .chip--best {
  font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  background: var(--paper); color: var(--oxblood); padding: .1875rem .5rem;
}
.press .addbtn {
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  color: var(--paper); background: var(--ink); border: 0; border-radius: 0;
  padding: .4375rem .8125rem;
}
.press .addbtn:hover { background: var(--oxblood); }
.press .rates tr.is-best .addbtn { background: var(--paper); color: var(--oxblood); }
.press .rates tr.is-best .addbtn:hover { background: var(--ink); color: var(--paper); }

/* --- The figure ----------------------------------------------------------- */

.rc__foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  padding: 1.125rem 1.125rem 1.25rem; border-top: 2px solid var(--ink);
}
.rc__fig { font-size: .9375rem; color: var(--ink); }
.rc__fig b {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2rem, 4.4vw, 3.5rem); letter-spacing: -.045em; line-height: .9;
  color: var(--red); display: inline-block; vertical-align: -.12em; margin-right: .375rem;
}
.rc__cart { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; color: var(--ink); opacity: .8; }
.rc__cart b { font-weight: 700; opacity: 1; }
.rc__note {
  padding: 0 1.125rem 1rem; font-size: .75rem; color: var(--ink); opacity: .62; max-width: 42rem;
}

@media (max-width: 800px) {
  .rc__ask { white-space: normal; font-size: clamp(2.125rem, 11vw, 3.5rem); margin-bottom: -.4rem; }
  .rc__cardhead [data-mol-meta] { margin-left: 0; flex-basis: 100%; }
  .rc__foot { gap: .625rem; }
}


/* --- THE GATE, the other way (/gate-alt/) ---------------------------------
   One photograph, one process, one mark. Compare against `.gt`. */

.ga { min-height: 100svh; padding: clamp(.625rem, 1.4vw, 1.125rem); display: grid; }
.ga__sheet {
  position: relative; isolation: isolate; overflow: hidden; min-height: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  border: 3px solid var(--ink); background: var(--paper);
}

.ga__top {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 1.25rem;
  padding: .625rem clamp(1rem, 2.4vw, 1.75rem);
  border-bottom: 3px solid var(--ink); background: var(--paper);
  font-family: var(--font-mono); font-size: .8125rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
}
.ga__top b { font-weight: 700; color: var(--oxblood); }
.ga__open { margin-left: auto; display: inline-flex; align-items: center; gap: .75rem; }
/* The cross is the stamp: where the "open" dot was, at a size that means it. */
.ga__stamp { width: 2.25rem; height: 2.25rem; display: block; }

/* The print. Full bleed, one screen, no tint. */
.ga__art {
  position: relative; isolation: isolate; display: grid; place-items: center; min-height: 0;
  background: var(--paper) url("../img/shopfront-halftone.b62891c1d034.png") center 34% / cover no-repeat;
}
.ga__band {
  position: absolute; z-index: 1; top: 50%; left: 50%;
  width: 86%; aspect-ratio: 3.94; translate: -50% -50%; rotate: -10.5deg;
  background: url("../img/bandage-up.9acc0729260a.png") center / 100% 100% no-repeat; pointer-events: none;
}
/* A hard grotesque. Every poster in the reference set is one; the humanist
   face was the least printed-looking thing on the sheet. */
.ga__mark {
  position: relative; z-index: 2; margin: 0;
  font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 900;
  font-size: 12.4vw; line-height: .82; letter-spacing: -.045em;
  color: var(--paper); white-space: nowrap;
}

.ga__foot { position: relative; z-index: 2; display: flex; align-items: stretch; border-top: 3px solid var(--ink); background: var(--paper); }
.ga__line { padding: 1.25rem clamp(1rem, 2.4vw, 1.75rem); font-size: clamp(1.125rem, 1.75vw, 1.5rem); line-height: 1.3; color: var(--ink); margin: 0; max-width: 40ch; font-weight: 500; }
.ga__enter {
  position: relative; margin-left: auto; display: inline-flex; align-items: center; gap: 1.25rem;
  background: var(--oxblood); color: var(--paper); border-left: 3px solid var(--ink);
  font-family: var(--font-mono); font-size: .9375rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  padding: 0 clamp(1.5rem, 3.5vw, 3rem);
}
.ga__enter svg { width: 22px; height: 22px; transition: translate .16s ease; }
.ga__enter:hover { color: var(--paper); background: var(--ink); }
.ga__enter:hover svg { translate: 6px 0; }
body:has(.ga) .tc { display: none; }

@media (max-width: 760px) {
  .ga__band { width: 150vw; rotate: -16deg; }
  .ga__mark { font-size: 22vw; }
  .ga__top { font-size: .6875rem; }
  .ga__foot { display: grid; grid-template-columns: minmax(0, 1fr); }
  .ga__enter { margin-left: 0; border-left: 0; border-top: 3px solid var(--ink); padding: 1.125rem clamp(1rem, 2.4vw, 1.75rem); justify-content: space-between; }
}


/* --- The definition slip -------------------------------------------------
   "Counterclinic" is the one word on this sheet that has to be explained, so
   it is the one word you can press. It opens as a catalogue entry on paper —
   the same stock, the same rules, the same mono — rather than as a UI panel. */

.gt__def {
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  background: none; border: 0; padding: 0; cursor: pointer;
  border-bottom: 1px solid var(--oxblood);
}
.gt__def:hover, .gt__def:focus-visible { color: var(--oxblood); border-bottom-width: 2px; }

.def {
  position: relative;              /* the close button was absolute against the viewport and sat on the keyline */
  width: min(34rem, calc(100vw - 2.5rem));
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 3px solid var(--ink); background: var(--paper); color: var(--ink);
}
.def::backdrop { background: rgba(28, 19, 16, .62); }
.def__x { position: absolute; top: .25rem; right: .25rem; }
.def__x button {
  font-family: var(--font-mono); font-size: 1.25rem; line-height: 1;
  color: var(--ink); background: none; border: 0; cursor: pointer;
  padding: .625rem .8125rem;
}
.def__x button:hover { color: var(--oxblood); }
.def__head {
  font-family: var(--font-mono); font-size: .8125rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  padding-bottom: .625rem; margin-bottom: 1rem; border-bottom: 3px solid var(--ink);
}
.def__head em { font-style: italic; font-weight: 400; text-transform: none; letter-spacing: .04em; color: var(--oxblood); }
.def__list { margin: 0; padding-left: 1.375rem; display: grid; gap: .75rem; }
.def__list li { font-size: 1rem; line-height: 1.45; }
.def__list li::marker { font-family: var(--font-mono); font-size: .8125rem; color: var(--oxblood); }
.def__note {
  margin-top: 1.125rem; padding-top: .875rem; border-top: 1px solid var(--ink);
  font-family: var(--font-mono); font-size: .75rem; line-height: 1.6;
  letter-spacing: .06em; color: var(--ink);
}

/* The global focus ring is --plate-400, from the olive system. Inside the press
   pages that reads as a stray colour, so the ring is oxblood here. */
.press :focus-visible, .def :focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; }


/* --- THE LANDING PAGE: the claim, what is behind it, the refusals ---------
   /counter/ is the page that has to argue, so it carries three sections the
   threshold does not: the claim set as display type, the three things a price
   alone will not tell you, and the words this system will not print.

   All of it is ink on paper. The photographs stopped at the gate on purpose —
   this is where a pharmacist starts reading numbers, and the rule the whole
   project runs on is that the closer you get to a decision the quieter the
   material gets. */

.claim { padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem); }
/* The same box as .shell — same max-width, same gutter — so the press sections
   and the site chrome share one left edge. They were 36px apart: .shell is
   1200 wide PLUS a 28px gutter, these were 1216 wide with none. */
.claim__in, .behind__in, .refuse__in, .ctfoot__in {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter);
}
.claim__ix {
  display: flex; align-items: baseline; gap: .875rem;
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
  padding-bottom: .6875rem; border-bottom: 2px solid var(--ink);
}
.claim__ix span { color: var(--oxblood); font-weight: 700; }

/* A bar, knocked out — not a third giant red headline. The page already has
   one of those above the fold; repeating the move three times left no hero and
   turned a distinctive device into a tic. Same force, different form, and at
   8.66:1 cream on oxblood it can be any size. */
.claim__big {
  display: block; margin: .75rem 0 0;
  background: var(--oxblood); color: var(--paper);
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.5rem, 3.8vw, 3.25rem); line-height: 1.06; letter-spacing: -.035em;
  padding: .375em .5em .42em;
}
.claim__sub {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.5rem, 3.8vw, 3.25rem); line-height: 1.06; letter-spacing: -.035em;
  color: var(--ink); padding: .375em .5em .42em 0;
  margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
}
.claim__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.claim__cols p { font-size: 1.0625rem; line-height: 1.55; color: var(--ink); max-width: 44ch; }

/* --- Behind the number ---------------------------------------------------- */

.behind { padding: clamp(3rem, 6vw, 5rem) 0; }
.behind__head {
  font-size: clamp(1.375rem, 2.6vw, 2.125rem); letter-spacing: -.03em; font-weight: 700;
  color: var(--ink); margin: 1.25rem 0 clamp(1.75rem, 4vw, 2.75rem); max-width: 24ch;
}
.bh__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.bh {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(.75rem, 2vw, 2.5rem);
  padding: clamp(1.25rem, 2.6vw, 2rem) 0; border-bottom: 1px solid var(--ink);
  align-items: start;
}
.bh__n { font-family: var(--font-mono); font-size: 1.125rem; font-weight: 500; color: var(--oxblood); }
.bh__body h3 { font-size: clamp(1.125rem, 1.9vw, 1.5rem); letter-spacing: -.02em; margin-bottom: .5rem; }
.bh__body p { font-size: 1rem; line-height: 1.55; color: var(--ink); max-width: 62ch; }
/* The line that states the rule, set like a caption in a catalogue. */
/* Its own column: the rule is the line you remember, so it sits beside the
   prose rather than wrapping underneath it. */
.bh__rule {
  grid-column: 3; grid-row: 1;
  align-self: center; padding-left: .875rem; border-left: 2px solid var(--red);
  font-family: var(--font-mono); font-size: .75rem !important; line-height: 1.5;
  letter-spacing: .06em; text-transform: uppercase;
}

/* --- The refusals: the one section printed as a label -------------------- */

.refuse { padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.5rem, 7vw, 6rem); }
.refuse__in { border: 3px solid var(--ink); padding: clamp(1.5rem, 3.5vw, 2.75rem); background: var(--paper); }
.refuse__ix { border-bottom-color: var(--ink); }
.refuse__head {
  font-size: clamp(1.375rem, 2.6vw, 2.125rem); letter-spacing: -.03em; font-weight: 700;
  margin: 1.25rem 0 clamp(1.25rem, 3vw, 2rem);
}
.rf__row { list-style: none; margin: 0 0 clamp(1.25rem, 3vw, 2rem); padding: 0; display: flex; flex-wrap: wrap; gap: .625rem; }
.rf {
  font-family: var(--font-mono); font-size: clamp(.875rem, 1.6vw, 1.125rem); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper); background: var(--oxblood); padding: .5rem 1rem;
  position: relative; text-decoration: line-through; text-decoration-thickness: 2px;
}
.refuse__note { font-size: 1.0625rem; line-height: 1.6; color: var(--ink); max-width: 62ch; }
.refuse__note em { font-style: normal; font-family: var(--font-mono); font-size: .9375rem; color: var(--oxblood); }

/* --- Foot ----------------------------------------------------------------- */

.ctfoot { padding: 0 0 clamp(3rem, 6vw, 5rem); }
.ctfoot__in { border-top: 3px solid var(--ink); padding-top: clamp(1.5rem, 3vw, 2.25rem); }
.ctfoot__line { font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: 600; letter-spacing: -.02em; margin-bottom: 1.25rem; }
.ctfoot__ways { display: flex; flex-wrap: wrap; gap: 0 clamp(1.25rem, 3vw, 2.5rem); margin-bottom: 1.5rem; }
.ctfoot__ways a {
  font-family: var(--font-mono); font-size: .875rem; font-weight: 500; letter-spacing: .1em;
  color: var(--ink); padding: .5rem 0; border-bottom: 2px solid var(--red);
}
.ctfoot__ways a:hover { color: var(--oxblood); }
.ctfoot__signin {
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink);
}
.ctfoot__signin a { color: var(--oxblood); font-weight: 700; border-bottom: 1.5px solid var(--oxblood); }

@media (max-width: 800px) {
  .claim__big { white-space: normal; font-size: clamp(2rem, 10vw, 3.25rem); }
  .claim__cols { grid-template-columns: minmax(0, 1fr); }
  .bh { grid-template-columns: 3rem minmax(0, 1fr); }
  .bh__rule { grid-column: 2; grid-row: auto; margin-top: .75rem; }
}


/* --- /overview/ masthead -------------------------------------------------- */

.ov { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem); }
.ov__in { position: relative; z-index: 1; width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }
.ov::before { opacity: .22; }
.ov__soon { font-style: normal; margin-left: auto; color: var(--ink); opacity: .7; }

/* The page's one display moment. The rate card below it is set in ink, so this
   is the only place on /overview/ that shouts. */
.ov__head {
  position: relative;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.5rem, 7.2vw, 6.25rem); line-height: .9; letter-spacing: -.05em;
  color: var(--red); margin: -.12em 0 .1em; max-width: 14ch;
}
.ov__head::before { content: attr(data-word); position: absolute; left: 3px; top: 3px; z-index: -1; color: var(--oxblood); }
.ov__lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); line-height: 1.5; color: var(--ink);
  max-width: 52ch; margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 clamp(1.5rem, 3vw, 2.25rem);
}
.ov__ways { display: flex; align-items: stretch; flex-wrap: wrap; gap: 1.25rem; }
.ov__cta {
  display: inline-flex; align-items: center; gap: 1.125rem;
  background: var(--oxblood); color: var(--paper); border: 0;
  font-family: var(--font-mono); font-size: .875rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; padding: 1rem 1.75rem;
}
.ov__cta svg { width: 20px; height: 20px; transition: translate .16s ease; }
.ov__cta:hover { background: var(--ink); color: var(--paper); }
.ov__cta:hover svg { translate: 5px 0; }
.ov__alt {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: .875rem; font-weight: 500;
  letter-spacing: .12em; color: var(--ink); border-bottom: 2px solid var(--red);
  padding: 1rem 0 .875rem;
}
.ov__alt:hover { color: var(--oxblood); }

@media (max-width: 800px) { .ov__head { max-width: none; font-size: clamp(2.25rem, 11vw, 3.5rem); } }


/* The press palette has to reach the chrome, and it cannot get there by
   inheritance: `--paper` and friends are declared on `.press`, while `.nav`
   sits outside it — and the OLIVE system already owns a `--paper` (a pale
   green) in :root. So the nav was resolving to that and coming out sage.
   Re-declaring the four on the body gives the chrome the right values without
   touching the olive pages. */
body:has(.press), body.sheet {
  --paper:   #F2E8D5;
  --paper-d: #E7D9BF;
  --ink:     #1C1310;
  --red:     #D8261A;
  --oxblood: #7E1410;
}

/* --- THE CHROME, in the press language -----------------------------------
   The nav is shared by every page that still shows it, so it is the single
   most visible olive element left. It becomes the top rule of the sheet: cream
   stock, a 3px ink rule under it, cells divided by hairlines, and the one
   action as an oxblood terminal cell — the same furniture as the gate's index
   row and the landing page's bars.

   Scoped by `body:has(.press)` so a page that has not been converted yet keeps
   the chrome it was designed with, instead of a cream bar over an olive hero. */

body:has(.press) .nav, body.sheet .nav {
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
}
body:has(.press) .nav__inner, body.sheet .nav__inner { min-height: 0; gap: 0; align-items: stretch; }
/* Scoped to the nav. Unscoped, this painted the FOOTER wordmark ink as well —
   #1C1310 on the olive foot, 1.23:1, a brand mark nobody could read on any
   press page. The footer keeps the colour it was designed with. */
body:has(.press) .nav .brand, body.sheet .nav .brand {
  color: var(--ink);
  padding: .875rem clamp(1rem, 2.4vw, 1.75rem) .875rem 0;
}
body:has(.press) .nav__links, body.sheet .nav__links {
  margin-left: auto; gap: 0; align-items: stretch;
  font-family: var(--font-mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
}
body:has(.press) .nav__links > a, body.sheet .nav__links > a,
body:has(.press) .nav__links .menu > summary, body.sheet .nav__links .menu > summary {
  display: inline-flex; align-items: center; color: var(--ink);
  padding: .875rem clamp(.875rem, 2vw, 1.5rem);
  border-left: 1px solid var(--ink);
}
body:has(.press) .nav__links > a:hover, body.sheet .nav__links > a:hover,
body:has(.press) .nav__links .menu[open] > summary, body.sheet .nav__links .menu[open] > summary { color: var(--paper); background: var(--oxblood); }
body:has(.press) .nav__signin, body.sheet .nav__signin { font-weight: 500; color: var(--ink); }

/* SIGN IN sat 20px shorter than every cell beside it, so its keyline stopped
   short of the bar and its label rode high. The cell is a <details>, which is a
   block container: it stretched as a flex item of the rail, but the <summary>
   inside it only ever took its own content height. Making the details a flex
   box hands that height down, which also drops the panel from the bar's edge
   rather than from mid-air. Above the drawer breakpoint only — below it the
   menu is a plain vertical list. */
@media (min-width: 721px) {
body:has(.press) .nav__links .menu, body.sheet .nav__links .menu { display: flex; align-items: stretch; }
body:has(.press) .nav__links .menu > summary, body.sheet .nav__links .menu > summary { flex: 1 0 auto; }
}

/* The one action: the terminal cell, as ENTER is on the gate. */
body:has(.press) .nav__cta, body.sheet .nav__cta {
  display: inline-flex; align-items: center; border-radius: 0; border: 0;
  background: var(--oxblood); color: var(--paper); box-shadow: none;
  border-left: 3px solid var(--ink);
  font-family: var(--font-mono); font-size: .75rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .875rem clamp(1rem, 2.4vw, 1.75rem);
}
body:has(.press) .nav__cta:hover, body.sheet .nav__cta:hover { background: var(--ink); color: var(--paper); }

/* The sign-in panel becomes a slip of paper, like the definition card. */
body:has(.press) .menu__panel, body.sheet .menu__panel {
  background: var(--paper); border: 3px solid var(--ink); border-radius: 0;
  box-shadow: none; top: 100%; padding: 0;
}
body:has(.press) .menu__panel::before, body.sheet .menu__panel::before { display: none; }
body:has(.press) .menu__item, body.sheet .menu__item { border-radius: 0; color: var(--ink); padding: .8125rem .875rem; }
body:has(.press) .menu__item + .menu__item, body.sheet .menu__item + .menu__item { border-top: 1px solid var(--paper-d); }
body:has(.press) .menu__item:hover, body.sheet .menu__item:hover,
body:has(.press) .menu__item:focus-visible, body.sheet .menu__item:focus-visible { background: var(--oxblood); color: var(--paper); }
body:has(.press) .menu__item:hover small, body.sheet .menu__item:hover small,
body:has(.press) .menu__item:focus-visible small, body.sheet .menu__item:focus-visible small { color: var(--paper); }
/* The panel is a document, not a nav strip: the mono caps stop at the cell
   label and the descriptions go back to reading type. */
body:has(.press) .menu__item b, body.sheet .menu__item b { font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .14em; }
body:has(.press) .menu__item small, body.sheet .menu__item small {
  font-family: var(--font-body); font-size: .8125rem; letter-spacing: 0;
  text-transform: none; color: var(--ink); opacity: .75; margin-top: .1875rem;
}
body:has(.press) .menu__item:hover small, body.sheet .menu__item:hover small,
body:has(.press) .menu__item:focus-visible small, body.sheet .menu__item:focus-visible small { opacity: .9; }
body:has(.press) .menu__icon, body.sheet .menu__icon { border-radius: 0; background: var(--oxblood); }
body:has(.press) .menu__icon svg, body.sheet .menu__icon svg { color: var(--paper); stroke: var(--paper); }
body:has(.press) .menu__item:hover .menu__icon svg, body.sheet .menu__item:hover .menu__icon svg { color: var(--oxblood); stroke: var(--oxblood); }
body:has(.press) .menu__item:hover .menu__icon, body.sheet .menu__item:hover .menu__icon { background: var(--paper); }
body:has(.press) .menu__foot, body.sheet .menu__foot {
  border-top: 3px solid var(--ink); padding: .75rem .875rem;
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
}
body:has(.press) .menu__foot a, body.sheet .menu__foot a { color: var(--oxblood); font-weight: 700; }
body:has(.press) .nav__toggle, body.sheet .nav__toggle { color: var(--ink); }


/* --- Two additions, each earning its place -------------------------------

   THE AMPOULE DRAWER, behind "Behind the number". It is not decoration and it
   is not a mood: the photograph shows LOTE numbers and VAL dates on the actual
   boxes, which is precisely what that section argues a price will not tell you.
   Masked to the right so it never sits under the prose, and duotoned into the
   palette so it reads as part of the printing rather than as a photo dropped in.

   THE STAMP. Counterclinic is a counter-institutional idea, so the page carries
   the institution's own gesture — a rubber stamp, double-ruled, inked unevenly,
   landing crooked. One per page. It is the only element here that is neither
   type nor rule nor photograph, which is the whole reason it works. */

.behind { position: relative; isolation: isolate; overflow: hidden; }
.behind::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 0; bottom: 0; right: 0; width: min(34rem, 42%);
  background: url("../img/ampoules.866ffc0d4384.jpg") center / cover no-repeat;
  opacity: .26;
  -webkit-mask-image: radial-gradient(120% 85% at 92% 50%, #000 0%, rgba(0,0,0,.55) 38%, transparent 80%);
          mask-image: radial-gradient(120% 85% at 92% 50%, #000 0%, rgba(0,0,0,.55) 38%, transparent 80%);
}

.claim__in { position: relative; }
.claim__stamp {
  position: absolute; z-index: 2; pointer-events: none;
  bottom: -.5rem; right: var(--gutter);
  width: clamp(12rem, 20vw, 18rem); height: auto;
  rotate: -4.5deg;
}

@media (max-width: 900px) {
  .behind::after { width: 100%; opacity: .13; }
  .claim__stamp { position: static; rotate: -2.5deg; display: block; width: 14rem; margin: .75rem 0 -.5rem; }
}


/* --- The split, drawn ----------------------------------------------------
   The one mechanic that is genuinely Careivo's, and the one that is faster to
   see than to read: a cart goes in, N purchase orders come out, one per
   stockist. Drawn in rules and bars rather than a chart library, because it is
   a diagram on a printed sheet and everything else here is too.

   The bars are proportional to the amounts, so the picture is not decorative —
   Anand's 48% really is the biggest share of the basket. */

.flow { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); }
.flow::before { opacity: .09; }
.fl {
  display: grid; grid-template-columns: minmax(0, 15rem) 3.5rem minmax(0, 1fr);
  align-items: center; gap: 0;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
}
.fl__src {
  display: grid; align-content: center; gap: .1875rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1rem, 2vw, 1.5rem);
  background: var(--oxblood); color: var(--paper); align-self: stretch;
}
.fl__k {
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
}
.fl__fig { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1; letter-spacing: -.05em; }
.fl__sub { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em; opacity: .85; }

/* The bracket: one line in, three out. */
.fl__arm { position: relative; align-self: stretch; }
.fl__arm::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 1.25rem; height: 2px; background: var(--ink);
}
.fl__arm::after {
  content: ""; position: absolute; left: 1.25rem; top: 16.6%; bottom: 16.6%; width: 2px; background: var(--ink);
}

.fl__out { list-style: none; margin: 0; padding: 0; }
.fl__po {
  position: relative;
  display: grid; grid-template-columns: 6.5rem minmax(0, 11rem) minmax(0, 1fr) 6rem 5rem;
  align-items: center; gap: 1rem;
  padding: clamp(.875rem, 1.8vw, 1.125rem) clamp(1rem, 2vw, 1.5rem);
}
.fl__po + .fl__po { border-top: 1px solid var(--ink); }
/* the arm's spur into each row */
.fl__po::before {
  content: ""; position: absolute; left: -2.25rem; top: 50%; width: 2.25rem; height: 2px; background: var(--ink);
}
.fl__ref { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; color: var(--oxblood); }
.fl__firm { font-weight: 600; font-size: .9375rem; }
.fl__bar { display: block; height: .875rem; width: var(--w); background: var(--red); }
.fl__amt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .9375rem; text-align: right; }
.fl__n { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em; color: var(--ink); opacity: .7; text-align: right; }
.fl__note { margin-top: 1.125rem; font-size: 1rem; line-height: 1.55; color: var(--ink); max-width: 62ch; }

@media (max-width: 900px) {
  .fl { grid-template-columns: minmax(0, 1fr); }
  .fl__arm { display: none; }
  .fl__po::before { display: none; }
  .fl__po { grid-template-columns: 5.5rem minmax(0, 1fr) 5.5rem; row-gap: .375rem; }
  .fl__bar { grid-column: 1 / -1; }
  .fl__n { grid-column: 3; }
}


/* --- Two objects, each where it means something ---------------------------

   THE BLISTER, beside the rate card. A price table is abstract; this is the
   strip the price is for. It sits in the masthead row so the heading, the
   object and the table read as one statement.

   THE JOURNAL, in the claim. A receipt, a used strip, a Band-Aid packet and
   "I've been so sick lately" in red marker — kept by the person who paid. The
   section claims a price hides what is behind it; this IS what is behind it,
   so it is given half the width rather than a corner. The prose narrows to
   meet it, which is also the width prose wants to be read at.

   The stamp moves under the text when the journal is present: two objects
   stacked in the same column would be a pile, not a composition. */

.rc__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
  align-items: end; gap: clamp(1.25rem, 3vw, 2.5rem);
}
.rc__spec { margin: 0; }
.rc__spec img { display: block; width: 100%; height: auto; border: 2px solid var(--ink); }
.rc__spec figcaption, .claim__kept figcaption {
  margin-top: .5rem; font-family: var(--font-mono); font-size: .625rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink); opacity: .75;
}

.claim__cols { grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); align-items: start; }
.claim__text p { max-width: none; }
.claim__text p + p { margin-top: 1.25rem; }
.claim__kept { margin: .25rem 0 0; }
.claim__kept img { display: block; width: 100%; height: auto; border: 2px solid var(--ink); }
.claim__in:has(.claim__kept) .claim__stamp { right: auto; left: var(--gutter); bottom: -1rem; }

@media (max-width: 900px) {
  .rc__head { grid-template-columns: minmax(0, 1fr); }
  .rc__spec { max-width: 15rem; }
  .claim__cols { grid-template-columns: minmax(0, 1fr); }
  .claim__kept { margin: 0 0 1.25rem; width: min(20rem, 100%); }
}


/* --- Four corrections to the landing page ---------------------------------

   1. THE HEADING STOPS HIDING. The rate-card masthead was bottom-aligned, so
      the specimen hung from the rule and the heading sat 150px below it with
      nothing in between. The masthead is one composition now: the question and
      the field that answers it on the left, the object on the right, both
      hanging from the same rule. The demo's root moved up a level with it, so
      every hook interactive.js scopes to is still inside one element.

   2. THE WAYS SAY WHAT THEY ARE. Each row had a 380px hole between its note
      and its arrow. It is filled with the one thing a visitor actually wants
      at that moment — whether the thing they clicked exists yet. Same two
      states /overview/ uses, because they are the same two facts.

   3. THE CARTON IS PRINTED IN TWO INKS. The halftone screen destroyed it: at
      275px it was a blob. It is separated now the way the original was printed
      — a black plate for the type and a red plate for the cross — so it reads
      as the object it is, and it is the only place on the page where the red
      is in a photograph rather than on top of one.

   4. THE PAGE ENDS SOMEWHERE. It used to stop on a row of links. It closes on
      the shop: every screen above is ordering from that shelf. */

.rc__head { align-items: start; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.rc__say { min-width: 0; }
.rc__say .msearch { margin-top: clamp(1.25rem, 2.5vw, 2rem); margin-bottom: 0; max-width: none; }

.wy { grid-template-columns: 4.5rem minmax(0, 15rem) minmax(0, 1fr) auto 2.5rem; }
.wy__state {
  justify-self: end; display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .625rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
.wy__state::before {
  content: ""; width: .4375rem; height: .4375rem; border-radius: 50%;
  background: var(--oxblood);
}
.wy__state--soon::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
.wy:hover .wy__state, .wy:focus-visible .wy__state { color: var(--paper); }
.wy:hover .wy__state::before, .wy:focus-visible .wy__state::before { background: var(--paper); }
.wy:hover .wy__state--soon::before, .wy:focus-visible .wy__state--soon::before {
  background: transparent; box-shadow: inset 0 0 0 1.5px var(--paper);
}

.ctfoot__cols {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: start;
}
.ctfoot__ways { flex-direction: column; align-items: flex-start; gap: .375rem; }
.ctfoot__ways a { border-bottom-width: 2px; }
.ctfoot__shop { margin: 0; }
/* height:auto or the markup's height attribute wins and the crop never
   happens — the same trap the other two figures already avoid. */
.ctfoot__shop img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5;
  object-fit: cover; object-position: center 62%;   /* the shelves and the counter */
  border: 2px solid var(--ink);
}
.ctfoot__shop figcaption {
  margin-top: .5rem; font-family: var(--font-mono); font-size: .625rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink); opacity: .75;
}

@media (max-width: 900px) {
  .wy { grid-template-columns: 3.5rem minmax(0, 1fr) auto; }
  .wy__note { grid-column: 2 / -1; }
  .wy__state { grid-column: 2; justify-self: start; }
  .wy__arrow { grid-column: 3; grid-row: 1; }
  .ctfoot__cols { grid-template-columns: minmax(0, 1fr); }
  .ctfoot__shop { max-width: 18rem; }
}

/* The close is a statement, not a caption. It was set at caption size next to
   a 520px photograph, which left the left half of the last screen empty. */
.ctfoot__line {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.75rem, 3.6vw, 2.875rem); line-height: 1.02; letter-spacing: -.035em;
  max-width: 14ch; margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.ctfoot__ways { gap: .5rem; margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.ctfoot__ways a { font-size: .9375rem; }

/* The prescription was two thirds full and a third empty, which is not what a
   prescription looks like — it looks like a form someone finished. The name at
   the foot is where a doctor signs, so the object closes itself. */
.spm__rx { justify-content: space-between; }
.spm__sign {
  margin-top: auto; align-self: flex-end; padding-top: .375rem;
  border-top: 1px solid var(--ink); min-width: 8rem; text-align: center;
  font-family: "Caveat", cursive; font-size: 1.125rem; color: var(--ink);
}

/* The offset ghost is a large-type effect. Below 800px the headline is half
   the size, `max-width` is lifted, and the absolutely-positioned duplicate
   stopped breaking on the same words as the text it sits under — printing the
   question twice, three pixels apart. It is worth nothing at that size, so it
   is not printed at that size. */
@media (max-width: 800px) {
  .ct__ask::before { content: none; }
}


/* --- 02 · The prescription -------------------------------------------------

   The page had six sections and every one of them was trade: PTR, schemes,
   stock, purchase orders, credit terms. The patient appeared once, as a row in
   a list, marked "in build". This section is the other half of the same system,
   and it is drawn rather than photographed because what a patient needs to see
   is a SEQUENCE and a COMPARISON, not another object.

   Both figures come from the model, not from copywriting: the states are
   Prescription.Status, and the quotes are `patient._quotes` — every verified
   chemist that can price the whole prescription, cheapest first — run over the
   illustrative catalogue.

   The bar plots the excess over the cheapest rather than the total. Drawn from
   zero, four totals within a tenth of each other are four identical bars; drawn
   from a cropped baseline, a 7% difference looks like a doubling. The excess is
   the quantity the section is about, so the excess is what is drawn. */

.rx { padding: clamp(3rem, 6vw, 5rem) 0; }
.ix__state {
  margin-left: .75rem; padding: .1875rem .4375rem .25rem;
  border: 1px solid var(--ink); color: var(--ink);
  font-size: .5625rem; letter-spacing: .18em;
}

/* The chain. Three states, each a step wider than a label: the middle one is
   the machine, the last one is a person, and the rule between them is the
   point of the whole section. */
.rxc {
  list-style: none; margin: 0 0 1.25rem; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem); counter-reset: none;
}
.rxc__s {
  position: relative; display: flex; flex-direction: column; gap: .375rem;
  border-top: 3px solid var(--ink); padding-top: .875rem;
}
/* The arrow lives in the gutter, so it never sits inside a step's measure. */
.rxc__s + .rxc__s::before {
  content: "→"; position: absolute; top: -1.9rem;
  left: calc(clamp(1rem, 2.5vw, 2rem) / -2); translate: -50% 0;
  font-family: var(--font-mono); font-size: 1rem; color: var(--oxblood);
}
.rxc__n {
  font-family: var(--font-mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .18em; color: var(--oxblood);
}
.rxc__s b { font-size: clamp(1.0625rem, 1.8vw, 1.3125rem); letter-spacing: -.02em; }
.rxc__s span:last-child { font-size: .9375rem; line-height: 1.5; color: var(--ink); }
/* The signature is the gate, so it is the one step printed in ink. */
.rxc__s--gate { border-top-color: var(--red); }

.rxc__alt {
  border-left: 3px solid var(--ink); padding: .125rem 0 .125rem .875rem;
  font-size: 1rem; line-height: 1.55; max-width: 62ch;
  margin: 0 0 clamp(2.25rem, 5vw, 3.5rem);
}

.qt__head {
  font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: 700; letter-spacing: -.025em;
  margin: 0 0 1.25rem; max-width: 34ch;
}
.qt { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.qt__r {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 16rem) minmax(0, 1fr) 5rem 6rem 5.5rem;
  align-items: center; gap: clamp(.5rem, 1.5vw, 1.25rem);
  padding: .875rem 0; border-bottom: 1px solid var(--ink);
}
.qt__r.is-best { background: var(--oxblood); color: var(--paper); padding-inline: .75rem; }
.qt__ref { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em; opacity: .8; }
.qt__firm { display: flex; flex-direction: column; font-weight: 700; letter-spacing: -.015em; }
.qt__area {
  font-family: var(--font-mono); font-size: .625rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; opacity: .75;
}
.qt__bar { display: block; height: .875rem; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.qt__r.is-best .qt__bar { background: color-mix(in srgb, var(--paper) 22%, transparent); }
.qt__bar > span { display: block; height: 100%; width: var(--w); background: var(--red); }
.qt__over {
  font-family: var(--font-mono); font-size: .8125rem; text-align: right;
  color: var(--oxblood);
}
.qt__r.is-best .qt__over { color: var(--paper); }
.qt__tot {
  font-family: var(--font-mono); font-size: clamp(1rem, 1.7vw, 1.25rem); font-weight: 500;
  text-align: right; letter-spacing: -.01em;
}
.qt__flag {
  justify-self: end; font-family: var(--font-mono); font-size: .625rem;
  letter-spacing: .16em; text-transform: uppercase;
}
.qt__axis {
  margin: .875rem 0 1.25rem; font-family: var(--font-mono); font-size: .75rem;
  letter-spacing: .06em; color: var(--ink);
}

@media (max-width: 900px) {
  .rxc { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .rxc__s + .rxc__s::before { content: none; }
  .qt__r {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "firm tot" "bar bar" "over flag";
    row-gap: .375rem;
  }
  .qt__ref { display: none; }
  .qt__firm { grid-area: firm; } .qt__tot { grid-area: tot; }
  .qt__bar  { grid-area: bar; }  .qt__over { grid-area: over; text-align: left; }
  .qt__flag { grid-area: flag; }
}

/* The kicker is a flex row of three cells. On a phone the qualifier and the
   state chip were squeezed into two ragged columns; they wrap to their own line
   instead, and the state chip stays with the label it qualifies. */
@media (max-width: 700px) {
  .claim__ix { flex-wrap: wrap; row-gap: .375rem; }
  .claim__ix em { flex-basis: 100%; }
  .ix__state { margin-left: 0; }
}

/* The diagram showed three purchase orders and never added them up, which is
   the one piece of arithmetic the section exists to demonstrate. */
.fl__po--sum { border-top: 3px solid var(--ink); border-bottom: 0; font-weight: 700; }
/* The bar takes its length from --w. The total row has no --w to give it, and
   an invalid width fills the cell — a bar longer than every bar it totals. */
.fl__po--sum .fl__bar { background: none; }
/* The trunk and its spurs belong to the purchase orders. Tuned for three rows,
   they reached into the total as well — drawing the sum as a fourth supplier.
   Four equal rows put the first and last PO centres at 1/8 and 5/8. */
.fl__po--sum::before { display: none; }
.fl .fl__arm::after { top: 12.5%; bottom: 37.5%; }
.fl .fl__arm::before { top: 12.5%; }
.fl__po--sum .fl__firm { font-weight: 700; }
.fl__po--sum .fl__amt { color: var(--oxblood); }

/* ==========================================================================
   THE SHEET PAGES
   --------------------------------------------------------------------------
   /for-patients/ and /for-pharmacies/ were built on the olive system — a dark
   gradient hero, tinted alternating sections, a glass band — and they are the
   two pages the landing page sends people to. Clicking a way-in changed
   companies at the door.

   They are converted the way the app was: remap the semantic tokens once, then
   convert the handful of devices that have no equivalent in a printed system.
   A gradient is not a press effect. Neither is a blurred pane of glass, a soft
   shadow or a rounded corner. What replaces them is what the rest of the system
   is made of — a ground, a rule, a plate, and one red.
   ========================================================================== */

body.sheet {
  --paper:   #F2E8D5;
  --paper-d: #E7D9BF;
  --red:     #D8261A;
  --oxblood: #7E1410;

  --bg:        #F2E8D5;
  --bg-alt:    #E7D9BF;
  --surface:   #F2E8D5;
  --surface-2: #EFE1C8;

  --ink:   #1C1310;
  --ink-2: #3A2B25;
  --ink-3: #63504A;

  --line:   #C6B191;
  --line-2: #DCCCAE;

  --brand:     #D8261A;
  --brand-600: #98180F;
  --brand-700: #7E1410;
  --brand-400: #98180F;
  --brand-200: #C9A98F;
  --brand-50:  #EFDFC6;

  --rose:    #7E1410;  --rose-lt:    #EFDFC6;
  --amber:   #6B5312;  --amber-lt:   #E3D3A9;
  --apricot: #8A3512;  --apricot-lt: #EDDCC2;

  --plate-900: #1C1310; --plate-800: #1C1310; --plate-700: #2A1D18;
  --plate-600: #3E2B24; --plate-400: #7A635A; --plate-300: #B4A18E;

  --on-grad:      #F2E8D5;
  --on-grad-mute: #D9C7A8;
  --on-grad-line: rgba(242, 232, 213, .32);

  background: var(--paper); color: var(--ink);
}

/* --- The hero stops being a gradient -------------------------------------- */

/* No closing rule: the showcase below is pulled up to overlap the hero, so a
   border on the hero's bottom edge draws a line straight across the mockup. */
body.sheet .hero {
  background: var(--paper); color: var(--ink);
  --on-grad: #1C1310; --on-grad-mute: #3A2B25;
  padding-block: clamp(3rem, 6vw, 5rem) clamp(9rem, 15vw, 13rem);
}
body.sheet .hero::before, body.sheet .hero::after { display: none; }
body.sheet .hero h1 { color: var(--ink); }
body.sheet .hero__lede { color: var(--ink-2); }
body.sheet .hero__note { color: var(--ink-2); }

/* The state chip, as the rail sets one: a keyline and a mono word. */
body.sheet .pill {
  border: 2px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink);
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; padding: .375rem .625rem;
}
body.sheet .pill__dot { width: .4375rem; height: .4375rem; background: var(--oxblood); }

/* --- Sections ------------------------------------------------------------- */

body.sheet .sec--alt { background: var(--paper-d); }

/* The one dark band on the trade page. Ink, not a green gradient, and the
   panes of glass inside it become what a plate holds: keylines. */
body.sheet .band { background: var(--ink); color: var(--paper); }
body.sheet .band::before { display: none; }
body.sheet .band h2 { color: var(--paper); }
body.sheet .band .eyebrow { color: var(--paper); opacity: .75; }
body.sheet .band .lede { color: var(--on-grad-mute); }
body.sheet .band__item {
  background: transparent; border: 1px solid var(--on-grad-line);
  border-radius: 0; backdrop-filter: none;
}
body.sheet .band__item h3 { color: var(--paper); }
body.sheet .band__item h3 svg { color: var(--red); }
body.sheet .band__item p { color: var(--on-grad-mute); }

/* --- Buttons, as plates --------------------------------------------------- */

body.sheet .btn {
  border-radius: 0; box-shadow: none;
  font-family: var(--font-mono); font-size: .75rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
body.sheet .btn--primary { background: var(--oxblood); color: var(--paper); border: 2px solid var(--oxblood); }
body.sheet .btn--primary:hover { background: var(--ink); border-color: var(--ink); }
body.sheet .btn--ghost { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
body.sheet .btn--ghost:hover { background: var(--ink); color: var(--paper); }
body.sheet .band .btn--ghost { color: var(--paper); border-color: var(--paper); }
body.sheet .band .btn--ghost:hover { background: var(--paper); color: var(--ink); }
body.sheet .btn--white { background: var(--paper); color: var(--ink); border: 2px solid var(--paper); }

/* The hero's two buttons were built for a dark ground: `--white` is a pane of
   paper and `--glass` is a translucent keyline. On a cream hero the first
   disappears into the page and the second loses its edge entirely. They become
   what every other action in this system is — a plate and a keyline. */
body.sheet .btn--white { background: var(--oxblood); color: var(--paper); border: 2px solid var(--oxblood); }
body.sheet .btn--white:hover { background: var(--ink); border-color: var(--ink); box-shadow: none; }
body.sheet .btn--glass { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
body.sheet .btn--glass:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* Inside the one ink band, the pair invert. */
body.sheet .band .btn--white { background: var(--paper); color: var(--ink); border-color: var(--paper); }
body.sheet .band .btn--glass { color: var(--paper); border-color: var(--paper); }
body.sheet .band .btn--glass:hover { background: var(--paper); color: var(--ink); }

/* The big section numerals were --plate-300, which on the printed grounds is
   2.05:1 — under the 3:1 that 28px large text earns. They are an index, and an
   index that cannot be read is decoration. */
body.sheet .step__n,
body.sheet .phase__ord { color: var(--plate-400); }