/*
 * Flowscale — the outward-facing site.
 *
 * Deliberately plain CSS with no build step and no network: the page is served
 * by an nginx container that only ever reads this directory, so a CDN font or a
 * hosted script would be one more thing that can be down when a prospect opens
 * the link.
 *
 * The palette is the product's, lifted from frontend/src/app/globals.css, so the
 * screenshots sit in a page that looks like the software rather than next to it.
 * Same rule as the app: nothing here spells a hue, and dark mode is a token swap.
 */

/* ── tokens ─────────────────────────────────────────────────────────── */
:root {
  --ink: #0f172a;
  --ink-soft: #475569;
  --ink-faint: #94a3b8;

  --surface: #ffffff;
  --surface-sunken: #f8fafc;
  --canvas: #f4f6fa;
  --line: #e2e8f0;
  --line-soft: #f1f5f9;

  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-ink: #3730a3;
  --accent-soft: #eef2ff;

  --way-desk: #2563eb;
  --way-insight: #c026d3;
  --way-stock: #0891b2;
  --warn: #b45309;
  --good: #047857;

  /* The clinical register. Indigo is the product's brand; this is the colour
     the page borrows from the room the product is used in -- it carries the
     pulse trace, the vitals icons and the paper grid, and nothing that means
     a status. Kept off the meaning palette on purpose: amber is allergy and
     expiry here exactly as it is in the app. */
  --clinical: #0d9488;
  --clinical-soft: #f0fdfa;

  --bezel: #1c2437;
  --bezel-edge: #2f394f;

  --shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .03);
  --shadow-raised: 0 2px 4px rgba(15, 23, 42, .04), 0 18px 40px -24px rgba(15, 23, 42, .3);
  --shadow-stage: 0 40px 90px -40px rgba(15, 23, 42, .45);

  --radius-control: .625rem;
  --radius-card: 1rem;
  --radius-panel: 1.25rem;

  --wrap: 1160px;
  --ease: cubic-bezier(.22, 1, .36, 1);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

[data-theme="dark"] {
  --ink: #e6edf7;
  --ink-soft: #9fb0c9;
  --ink-faint: #6b7d99;

  --surface: #141d2f;
  --surface-sunken: #0f1726;
  --canvas: #0a1120;
  --line: #26324a;
  --line-soft: #1a2436;

  --accent: #6366f1;
  --accent-hover: #7c83f7;
  --accent-ink: #b3bcfd;
  --accent-soft: #1d2547;

  --way-desk: #60a5fa;
  --way-insight: #e879f9;
  --way-stock: #22d3ee;

  /* Lifted for a dark ground, the same move as the accent. */
  --clinical: #2dd4bf;
  --clinical-soft: #0c2b2a;
  --warn: #f59e0b;
  --good: #34d399;

  --bezel: #060b16;
  --bezel-edge: #232e45;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-raised: 0 18px 40px -24px rgba(0, 0, 0, .8);
  --shadow-stage: 0 50px 110px -40px rgba(0, 0, 0, .9);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3 { line-height: 1.12; letter-spacing: -.022em; margin: 0; font-weight: 680; }
h1 { font-size: clamp(2.15rem, 1.2rem + 3.6vw, 4rem); letter-spacing: -.032em; text-wrap: balance; max-width: 19ch; }
h2 { font-size: clamp(1.65rem, 1.1rem + 2.1vw, 2.6rem); letter-spacing: -.028em; }
h3 { font-size: 1.08rem; }
p { margin: 0; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 var(--radius-control) 0; font-weight: 600;
}
.skip:focus { left: 0; }

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

/* ── buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .78rem 1.35rem;
  border-radius: var(--radius-control);
  font-size: .95rem; font-weight: 620; text-decoration: none;
  border: 1px solid transparent;
  transition: transform .18s var(--ease), background-color .18s var(--ease),
              border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn-sm { padding: .55rem 1rem; font-size: .875rem; }
.btn-primary {
  background: var(--accent); color: #fff;
  box-shadow: 0 10px 24px -14px var(--accent);
}
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn-ghost { border-color: var(--line); color: var(--ink-soft); background: var(--surface); }
.btn-ghost:hover { border-color: var(--accent); color: var(--ink); transform: translateY(-1px); }

/* ── top bar ────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid transparent;
  transition: background-color .25s var(--ease), border-color .25s var(--ease),
              backdrop-filter .25s var(--ease);
}
.topbar.is-stuck {
  background: color-mix(in srgb, var(--canvas) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--line);
}
.topbar-inner {
  display: flex; align-items: center; gap: 1.5rem;
  height: 4.25rem;
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 680; }
.brand-mark {
  display: block;
  width: 2rem; height: 2rem; border-radius: .6rem;
  box-shadow: 0 6px 16px -8px var(--accent);
}
.brand-name { letter-spacing: -.02em; }

.topnav { display: flex; gap: 1.6rem; margin-left: auto; font-size: .9rem; }
.topnav a {
  color: var(--ink-soft); text-decoration: none; font-weight: 520;
  position: relative; padding-block: .2rem;
}
.topnav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px;
  background: var(--accent); transition: right .25s var(--ease);
}
.topnav a:hover { color: var(--ink); }
.topnav a:hover::after { right: 0; }

.topbar-actions { display: flex; align-items: center; gap: .75rem; }

/*
 * Below this the six section links do not fit beside the brand and the
 * actions, and a flex row that cannot fit does not wrap politely -- it
 * overflows the bar and lands on top of the theme toggle, which then cannot be
 * tapped at all. The page is one scroll and the footer repeats every link, so
 * dropping the nav costs a visitor nothing.
 */
@media (max-width: 900px) {
  .topnav { display: none; }
  .topbar-actions { margin-left: auto; }
}

.theme-toggle {
  display: grid; place-items: center; flex: none;
  width: 2.25rem; height: 2.25rem; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius-control);
  background: var(--surface); color: var(--ink-soft); cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--accent); }
/* A thumb needs 44px. Same rule the clinic UI holds itself to, and below 900px
   this button and the call to action are the only controls in the header.
   Keyed to width rather than `pointer: coarse`, which headless Chromium
   reports as fine even under touch emulation -- so a check would pass while a
   real phone got a 36px target. */
@media (max-width: 900px) {
  .theme-toggle { width: 2.75rem; height: 2.75rem; }
}
.theme-toggle svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

/* ── hero ───────────────────────────────────────────────────────────── */
.hero { position: relative; padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(4rem, 8vw, 7rem); overflow: hidden; }
.hero-glow {
  position: absolute; inset: -30% -10% auto; height: 70vmax;
  background:
    radial-gradient(42% 46% at 22% 32%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 70%),
    radial-gradient(38% 44% at 76% 20%, color-mix(in srgb, var(--way-insight) 26%, transparent), transparent 70%),
    radial-gradient(44% 40% at 55% 62%, color-mix(in srgb, var(--way-stock) 22%, transparent), transparent 72%);
  filter: blur(24px);
  opacity: .5;
  pointer-events: none;
  animation: drift 22s var(--ease) infinite alternate;
}
[data-theme="dark"] .hero-glow { opacity: .42; }
@keyframes drift {
  from { transform: translate3d(-2%, 0, 0) scale(1); }
  to   { transform: translate3d(3%, 3%, 0) scale(1.08); }
}

.hero-copy { max-width: 48rem; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .8rem; font-weight: 640; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  padding: .38rem .8rem; border-radius: 999px;
  margin-bottom: 1.4rem;
}
.eyebrow .dot {
  width: .45rem; height: .45rem; border-radius: 50%; background: var(--good);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 70%, transparent);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 .5rem transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.lede { margin-top: 1.35rem; font-size: clamp(1.02rem, .95rem + .4vw, 1.2rem); color: var(--ink-soft); max-width: 40rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.hero-note { margin-top: 1.1rem; font-size: .85rem; color: var(--ink-faint); }

/* ── device frames ──────────────────────────────────────────────────── */
.stage {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: 3rem;
}
.laptop { margin: 0; max-width: 62rem; margin-inline: auto; }
.laptop-lid {
  background: linear-gradient(160deg, var(--bezel-edge), var(--bezel));
  border-radius: 1rem 1rem .35rem .35rem;
  padding: .7rem .7rem .85rem;
  box-shadow: var(--shadow-stage), inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
}
.laptop-screen {
  border-radius: .55rem; overflow: hidden;
  background: var(--canvas);
  aspect-ratio: 1440 / 900;
}
.laptop-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.laptop-base {
  height: .75rem;
  background: linear-gradient(180deg, var(--bezel-edge), var(--bezel));
  border-radius: 0 0 .9rem .9rem;
  margin-inline: -2.5%;
  position: relative;
  box-shadow: 0 18px 30px -22px rgba(0, 0, 0, .8);
}
.laptop-base span {
  position: absolute; left: 50%; top: 0; translate: -50% 0;
  width: 18%; height: .3rem; border-radius: 0 0 .4rem .4rem;
  background: color-mix(in srgb, #000 35%, transparent);
}

/*
 * A tablet, at the 10.2-inch iPad's real 3:4.
 *
 * Sized generously on purpose. A device frame is only worth drawing if the
 * screen inside it is legible, and legibility here is just the scale factor:
 * a 810px-wide layout shown 300px wide is at 37% and reads as a smudge. At
 * 40rem it is near 80%, which is about where the laptop sits.
 */
.tablet { margin: 0; width: min(40rem, 100%); }
.tablet-frame {
  position: relative;
  background: linear-gradient(160deg, var(--bezel-edge), var(--bezel));
  border-radius: 1.4rem; padding: 1.15rem .9rem;
  box-shadow:
    var(--shadow-stage),
    0 0 0 1px color-mix(in srgb, var(--clinical) 20%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #fff 9%, transparent);
}
.tablet-frame img {
  border-radius: .35rem;
  aspect-ratio: 810 / 1080;
  object-fit: cover; object-position: top center;
  width: 100%;
}
.tablet-lens {
  position: absolute; left: 50%; top: .5rem; translate: -50% 0;
  width: .3rem; height: .3rem; border-radius: 50%;
  background: color-mix(in srgb, #fff 22%, var(--bezel));
}

.phone { margin: 0; width: 13.5rem; }
.phone-frame {
  position: relative;
  background: linear-gradient(160deg, var(--bezel-edge), var(--bezel));
  border-radius: 2rem; padding: .45rem;
  /* Two rims, not one: the outer keeps a dark phone from merging into the
     dark laptop it stands in front of, the inner is the handset's own edge. */
  box-shadow:
    var(--shadow-stage),
    0 0 0 1px color-mix(in srgb, var(--clinical) 22%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent);
}
.phone-frame img {
  border-radius: 1.6rem;
  aspect-ratio: 390 / 844;
  object-fit: cover; object-position: top center;
  width: 100%;
}
.phone-notch {
  position: absolute; left: 50%; top: .45rem; translate: -50% 0;
  width: 38%; height: 1.1rem; border-radius: 0 0 .7rem .7rem;
  background: var(--bezel); z-index: 2;
}

.stage .phone {
  /* Dropped below the laptop's baseline so it covers the sidebar rather than
     the consultation itself -- the screen people came to look at. */
  position: absolute; left: 0; bottom: -1.5rem;
  animation: float 7s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-.7rem); }
}
@media (max-width: 820px) {
  .stage .phone { display: none; }
}

/* ── the pulse rule ─────────────────────────────────────────────────────
 *
 * The page's one piece of medical iconography, and it earns its place by
 * being the thing a clinic screen actually shows. Two copies of the same
 * path: a faint continuous track, and a short travelling dash on top of it,
 * so the trace reads as live rather than as a drawing of a heartbeat.
 */
.pulse-rule {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  width: 100%;
  line-height: 0;
}
.pulse-rule svg { width: 100%; height: 3rem; overflow: visible; }
.pulse-rule path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.pulse-track {
  stroke: color-mix(in srgb, var(--clinical) 32%, var(--line));
  stroke-width: 1.5;
}
.pulse-beat {
  stroke: var(--clinical);
  stroke-width: 2;
  /* A 90-unit lit segment on a ~2400-unit path. */
  stroke-dasharray: 90 2400;
  animation: trace 5.5s linear infinite;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--clinical) 55%, transparent));
}
@keyframes trace {
  from { stroke-dashoffset: 2490; }
  to   { stroke-dashoffset: 0; }
}
.pulse-rule-slim { margin: 0; opacity: .55; }
.pulse-rule-slim svg { height: 2rem; }

/* ── stat strip ─────────────────────────────────────────────────────── */
.strip { border-block: 1px solid var(--line); background: var(--surface); }
.strip-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  padding-block: 2.25rem;
}
.stat { text-align: center; }
.stat-icon {
  display: grid; place-items: center; margin: 0 auto .6rem;
  width: 2.25rem; height: 2.25rem; border-radius: .7rem;
  color: var(--clinical);
  background: color-mix(in srgb, var(--clinical) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--clinical) 42%, transparent);
}
.stat-icon svg {
  width: 1.15rem; height: 1.15rem;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.stat b {
  display: block; font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
  font-weight: 700; letter-spacing: -.03em;
  /* Indigo into the clinical teal rather than into magenta: the icons above
     these numbers are teal, and the strip should read as one thing. */
  background: linear-gradient(120deg, var(--accent), var(--clinical));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat span { display: block; font-size: .85rem; color: var(--ink-soft); margin-top: .3rem; }

/* ── sections ───────────────────────────────────────────────────────── */
.section { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.section-alt { background: var(--surface); border-block: 1px solid var(--line); }

.section-head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.kicker {
  font-size: .78rem; font-weight: 680; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .7rem;
}
/*
 * A single beat in front of every section label. Threaded through as a mask
 * rather than an inline SVG per heading so it inherits the label's colour and
 * costs one rule instead of six copies of the same markup.
 */
.kicker::before {
  content: "";
  display: inline-block;
  width: 1.35rem; height: .62rem;
  margin-right: .5rem;
  vertical-align: 1px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 16'%3E%3Cpath d='M1 8h7l2-5 3 10 3-13 3 16 2-8h9' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.section-head .sub { margin-top: 1rem; color: var(--ink-soft); font-size: 1.02rem; }

/* ── the day ────────────────────────────────────────────────────────── */
.flow {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  counter-reset: step;
}
.flow-step {
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-panel); padding: 1.6rem 1.5rem 1.4rem;
  box-shadow: var(--shadow-card);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.section-alt .flow-step { background: var(--canvas); }
.flow-step:hover { transform: translateY(-3px); box-shadow: var(--shadow-raised); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.flow-head { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.flow-icon {
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; border-radius: .65rem;
  color: var(--clinical);
  background: color-mix(in srgb, var(--clinical) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--clinical) 34%, transparent);
}
.flow-icon svg {
  width: 1.1rem; height: 1.1rem;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.flow-no {
  font-family: var(--mono); font-size: .8rem; font-weight: 600;
  color: var(--accent); letter-spacing: .1em;
}
.flow-step h3 { margin-bottom: .6rem; }
.flow-step p { color: var(--ink-soft); font-size: .94rem; }
.flow-tag {
  margin-top: 1rem !important; padding-top: .85rem;
  border-top: 1px solid var(--line-soft);
  font-size: .8rem; color: var(--ink-faint) !important; font-weight: 560;
}

/* ── screens ────────────────────────────────────────────────────────── */
.tabs {
  display: flex; flex-wrap: wrap; gap: .4rem;
  padding: .35rem; margin-bottom: 1.5rem;
  background: var(--canvas); border: 1px solid var(--line);
  border-radius: var(--radius-control); width: fit-content; max-width: 100%;
}
.section-alt .tabs { background: var(--surface-sunken); }
.tabs button {
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: .88rem; font-weight: 580;
  color: var(--ink-soft);
  padding: .5rem .95rem; border-radius: .45rem;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] {
  background: var(--accent); color: #fff;
  box-shadow: 0 8px 18px -12px var(--accent);
}

.browser {
  margin: 0;
  border: 1px solid var(--line); border-radius: var(--radius-card);
  overflow: hidden; background: var(--surface);
  box-shadow: var(--shadow-raised);
}
.browser-bar {
  display: flex; align-items: center; gap: .4rem;
  padding: .65rem .9rem;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--line);
}
.section-alt .browser-bar { background: var(--canvas); }
.tl { width: .65rem; height: .65rem; border-radius: 50%; background: var(--line); }
.tl:first-child { background: color-mix(in srgb, #ef4444 70%, var(--line)); }
.tl:nth-child(2) { background: color-mix(in srgb, #f59e0b 70%, var(--line)); }
.tl:nth-child(3) { background: color-mix(in srgb, #22c55e 70%, var(--line)); }
.browser-url {
  margin-left: .8rem; font-family: var(--mono); font-size: .76rem;
  color: var(--ink-faint);
}
.browser img { width: 100%; aspect-ratio: 1440 / 900; object-fit: cover; object-position: top left; }
.browser img.is-swapping { opacity: 0; }
.browser img { transition: opacity .22s var(--ease); }

/* A phone capture of the same screen, hidden until the browser-chrome
   version above stops being legible at phone width. See the max-width:640
   swap below -- this is the only place on the page a screenshot's framing
   changes by breakpoint rather than just its size. */
.screen-phone { display: none; margin: 0 auto; width: min(17rem, 72vw); }
.screen-phone .phone-frame img.is-swapping { opacity: 0; }
.screen-phone .phone-frame img { transition: opacity .22s var(--ease); }

@media (max-width: 640px) {
  .screens .browser { display: none; }
  .screens .screen-phone { display: block; }
  /* Consult has no phone capture (see app.js) -- keep showing the browser
     crop for it rather than a phone frame around a missing image. */
  #screenpanel.no-phone .browser { display: block; }
  #screenpanel.no-phone .screen-phone { display: none; }
}

.screen-caption { margin-top: 1.4rem; max-width: 48rem; }
.screen-caption h3 { font-size: 1.15rem; margin-bottom: .45rem; }
.screen-caption p { color: var(--ink-soft); font-size: .96rem; }

.mobile-rail {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  padding-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--line);
}
.mobile-copy { max-width: 44rem; }
.mobile-copy h3 { font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); margin: .7rem 0 1rem; letter-spacing: -.026em; }
.mobile-copy > p { color: var(--ink-soft); }

/*
 * Side by side and both full size, rather than one faded behind the other.
 * The row is what carries the claim -- the same list, laid out for whichever
 * device is on the counter -- so both screens have to be readable at once.
 */
.devices {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.devices .phone { width: min(15rem, 100%); }
.devices figcaption {
  margin-top: .9rem; text-align: center;
  font-size: .8rem; color: var(--ink-faint);
}
@media (max-width: 640px) {
  /* Below this the pair cannot both be legible, and half a device frame is
     worse than one. The phone is the surface the claim is really about. */
  .devices .tablet { display: none; }
  .devices .phone { width: min(17rem, 100%); }
}

.ticks { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: .55rem; }
.ticks li {
  position: relative; padding-left: 1.65rem;
  font-size: .93rem; color: var(--ink-soft);
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .45rem;
  width: .95rem; height: .95rem; border-radius: 50%;
  background: color-mix(in srgb, var(--good) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 45%, transparent);
}
.ticks li::after {
  content: ""; position: absolute; left: .28rem; top: .68rem;
  width: .38rem; height: .2rem;
  border-left: 1.6px solid var(--good); border-bottom: 1.6px solid var(--good);
  rotate: -45deg;
}

/* ── benefit cards ──────────────────────────────────────────────────── */
.cards {
  display: grid; gap: 1.15rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-panel); padding: 1.6rem 1.5rem;
  box-shadow: var(--shadow-card);
  position: relative; overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.section-alt .card { background: var(--canvas); }
.card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0; transition: opacity .3s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-raised); border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); }
.card:hover::before { opacity: 1; }
.card h3 { margin-bottom: .6rem; }
.card p { color: var(--ink-soft); font-size: .94rem; }
.card em { font-style: italic; color: var(--ink); }

.card-icon {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: .75rem;
  margin-bottom: 1.05rem;
  background: color-mix(in srgb, currentColor 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 26%, transparent);
}
.card-icon svg {
  width: 1.25rem; height: 1.25rem;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon-accent { color: var(--accent); }
.icon-stock { color: var(--way-stock); }
.icon-desk { color: var(--way-desk); }
.icon-insight { color: var(--way-insight); }
.icon-warn { color: var(--warn); }
.icon-good { color: var(--good); }

/* ── the document ───────────────────────────────────────────────────── */
#document { position: relative; overflow: hidden; }

/* Squared paper, the way a clinic's own pad is ruled. Faint enough to read
   as texture rather than as a grid, and it fades out before the copy. */
.rx-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--clinical) 14%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--clinical) 14%, transparent) 1px, transparent 1px);
  background-size: 1.5rem 1.5rem;
  mask-image: radial-gradient(70% 60% at 75% 45%, #000, transparent 72%);
  opacity: .5;
  pointer-events: none;
}
[data-theme="dark"] .rx-grid { opacity: .35; }

.rx { position: relative; display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 960px) { .rx { grid-template-columns: 1fr 1fr; } }
.rx-copy h2 { margin: .7rem 0 1.2rem; }
.rx-copy > p { color: var(--ink-soft); }
.rx-copy .ticks { margin-top: 1.6rem; gap: .9rem; }
.rx-copy .ticks li { padding-left: 1.8rem; }
.rx-copy .ticks b { color: var(--ink); font-weight: 620; }
.rx-note {
  margin-top: 1.6rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: .88rem; color: var(--ink-faint);
}

/* A sheet of paper, lit from the left. It keeps its own white in dark mode --
   a prescription is printed, and inverting it would be a lie about the one
   artefact on this page that leaves the building. */
.rx-paper {
  margin: 0; position: relative;
  border-radius: .4rem;
  background: #fff;
  box-shadow:
    0 1px 0 rgba(15, 23, 42, .06),
    0 30px 60px -30px rgba(15, 23, 42, .45),
    0 2px 8px -2px rgba(15, 23, 42, .12);
  rotate: -1.1deg;
  transition: rotate .5s var(--ease), box-shadow .5s var(--ease);
}
.rx-paper:hover { rotate: 0deg; box-shadow: 0 40px 80px -34px rgba(15, 23, 42, .55); }
[data-theme="dark"] .rx-paper {
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .06);
}
.rx-paper img { width: 100%; border-radius: .4rem; }
/* Under the sheet, not on it. Laid over the page it covered the verification
   line -- captioning a document by hiding part of it. */
.rx-paper figcaption {
  margin-top: 1.3rem;
  text-align: right;
  font-size: .78rem; color: var(--ink-faint);
  rotate: 1.1deg;
}

/* ── pricing ────────────────────────────────────────────────────────── */
.plans-group {
  font-size: .78rem; font-weight: 680; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: .9rem;
}
/* Space belongs above the label, not above the grid it introduces. */
.plans + .plans-group { margin-top: 2.9rem; }
.plans {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  align-items: start;
}
/* Two shipping tiers get the room; the three planned ones sit together and
   read as a set, which is what they are. */
@media (min-width: 780px) {
  /* The two live tiers sit side by side and match heights; the roadmap three
     are a set and do not need to. */
  /* Three shipping tiers side by side, matched in height; the two roadmap
     ones are a set and do not need to be. */
  .plans-live { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .plans-live .plan { display: flex; flex-direction: column; }
  .plans-live .plan-state { margin-top: auto; }
  .plans-soon { grid-template-columns: repeat(2, 1fr); }
}
.plan {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-panel); padding: 1.6rem 1.4rem 1.5rem;
  box-shadow: var(--shadow-card); position: relative;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.section-alt .plan { background: var(--canvas); }
.plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-raised); }
.plan-featured {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: var(--shadow-raised), 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.plan-badge {
  position: absolute; top: -.7rem; left: 1.4rem;
  background: var(--accent); color: #fff;
  font-size: .7rem; font-weight: 660; letter-spacing: .05em; text-transform: uppercase;
  padding: .22rem .6rem; border-radius: 999px;
}
.plan-for { font-size: .82rem; color: var(--ink-faint); margin-top: .35rem; min-height: 2.4em; }
.plan-price {
  font-size: 1.45rem; font-weight: 700; letter-spacing: -.028em;
  margin: 1rem 0 .2rem;
}
.plan-price span { font-size: .82rem; font-weight: 500; color: var(--ink-faint); letter-spacing: 0; }
.plan-year { font-size: .82rem; color: var(--ink-soft); margin-top: .1rem; }
.plan-year b { color: var(--ink); font-weight: 640; }
/* A tier with no price yet must not sit at the same weight as one that has
   one -- that is how a roadmap quietly reads as a product. */
.plan-price-tbd { font-size: 1.05rem; font-weight: 600; color: var(--ink-faint); letter-spacing: -.01em; }
.plan .ticks { margin-top: 1.1rem; }
.plan .ticks li { font-size: .875rem; }
.plan-state {
  margin-top: 1.35rem; padding-top: .9rem; border-top: 1px solid var(--line-soft);
  font-size: .78rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
}
.state-live { color: var(--good); }
.state-soon { color: var(--ink-faint); }
.plans-note { margin-top: 1.75rem; font-size: .85rem; color: var(--ink-faint); max-width: 46rem; }

/* ── contact ────────────────────────────────────────────────────────── */
.contact { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .contact { grid-template-columns: 1fr 22rem; } }
.contact-copy h2 { margin: .7rem 0 1rem; }
.contact-copy > p { color: var(--ink-soft); max-width: 38rem; }
.contact-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.75rem; }
.contact-note { margin-top: 1.1rem; font-size: .87rem; color: var(--ink-faint); max-width: 34rem; }

.contact-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .55rem;
  counter-reset: contact;
}
.contact-steps li {
  counter-increment: contact;
  position: relative; padding: .85rem 1rem .85rem 2.9rem;
  background: var(--canvas); border: 1px solid var(--line);
  border-radius: var(--radius-control);
}
.section-alt .contact-steps li { background: var(--surface-sunken); }
.contact-steps li::before {
  content: counter(contact);
  position: absolute; left: .9rem; top: .95rem;
  display: grid; place-items: center;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink);
  font-size: .72rem; font-weight: 700;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
.contact-steps b { display: block; font-size: .88rem; }
.contact-steps span { display: block; font-size: .8rem; color: var(--ink-faint); margin-top: .1rem; }

/* ── footer ─────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--line); padding: 2.75rem 0 2rem; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: flex-start; }
.footer-brand { display: flex; gap: .75rem; align-items: flex-start; max-width: 22rem; }
.footer-brand p { font-size: .85rem; color: var(--ink-faint); margin-top: .15rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: .875rem; }
.footer-links a { color: var(--ink-soft); text-decoration: none; }
.footer-links a:hover { color: var(--accent); }
.footer-fine { margin-top: 2.25rem; font-size: .78rem; color: var(--ink-faint); }

/* ── reveal on scroll ───────────────────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

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

.plans-gst {
  max-width: 46rem;
  margin: 1.75rem auto 0;
  padding: .85rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: .9rem;
  line-height: 1.6;
  text-align: center;
}
.plans-gst b { color: var(--ink); }

/* ---------------------------------------------------------------- compare
   The plan table. Modelled on what every clinic software site does, because
   a doctor comparing three tiers wants a grid, not three columns of bullets
   they have to diff by eye. Each row carries a plain sentence as well as a
   name: "Patient queue Management" on its own tells a doctor nothing they
   did not already assume. */
.compare { margin-top: 56px; }

.compare-head {
  font-size: clamp(19px, 2.2vw, 23px);
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}

.compare-sub {
  max-width: 62ch;
  margin: 0 0 22px;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.65;
}

/* The table is wider than a phone. It scrolls inside this box rather than
   pushing the whole page sideways, which is the failure mode that makes a
   pricing page feel broken on the device most doctors will open it on. */
.compare-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  -webkit-overflow-scrolling: touch;
}

.cmp {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  text-align: left;
}

/* Deliberately not sticky. `overflow-x: auto` on the wrapper computes
   overflow-y to auto as well, which makes it the scroll container the header
   would stick inside -- and it has no vertical overflow, so the header simply
   scrolls away. Measured, not assumed: it stuck to nothing and sat behind the
   topbar. The group bands carry the reading instead. */
.cmp thead th {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 16px 18px 13px;
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.cmp thead th:not(:first-child) { text-align: center; width: 132px; }

.cmp thead th span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 450;
  color: var(--ink-faint);
}

.cmp thead th.cmp-featured { color: var(--accent-ink); }
.cmp thead th.cmp-featured span { color: var(--accent); }

.cmp-group th {
  background: var(--clinical-soft);
  padding: 13px 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.cmp-group-name {
  display: block;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--clinical);
}

.cmp-group-note {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 450;
  color: var(--ink-soft);
}

.cmp tbody tr:not(.cmp-group) th {
  padding: 15px 18px;
  font-weight: 450;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  max-width: 460px;
}

.cmp tbody tr:not(.cmp-group):last-child th,
.cmp tbody tr:not(.cmp-group):last-child td { border-bottom: 0; }

.cmp-name {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.cmp-desc {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.cmp-new {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 2px;
}

.cmp td {
  text-align: center;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  padding: 16px 18px;
}

.cmp-yes span {
  display: inline-grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 999px;
  background: var(--good);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

/* Deliberately quiet. A row of loud crosses reads as a list of things the
   clinic is being denied, which is not the feeling a pricing page wants. */
.cmp-no span { color: var(--ink-faint); font-size: 15px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Below this a three-column grid puts two of the three plans off-screen, so
   the page asks a doctor to compare tiers by scrolling sideways to find them.
   The grid is abandoned: each feature becomes a block, and the plans that
   include it are named on chips underneath. Nothing scrolls horizontally and
   every plan is visible for every row. */
@media (max-width: 720px) {
  .compare-scroll { overflow-x: visible; }
  .cmp { min-width: 0; }
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cmp tbody, .cmp tr, .cmp tbody th, .cmp td { display: block; }

  .cmp tbody tr:not(.cmp-group) {
    padding: 14px 15px 12px;
    border-bottom: 1px solid var(--line-soft);
  }
  .cmp tbody tr:not(.cmp-group):last-child { border-bottom: 0; }
  .cmp tbody tr:not(.cmp-group) th {
    padding: 0;
    border-bottom: 0;
    max-width: none;
  }
  .cmp-group th { padding: 12px 15px; }

  /* The chips sit in one wrapping row under the description. */
  .cmp td {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: auto;
    margin: 9px 6px 0 0;
    padding: 3px 9px 3px 7px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 550;
    letter-spacing: -0.005em;
    text-align: left;
    vertical-align: middle;
  }
  .cmp td::after { content: attr(data-plan); }

  .cmp-yes { border-color: color-mix(in srgb, var(--good) 35%, transparent); }
  .cmp-yes::after { color: var(--ink); }
  .cmp-yes span { width: 14px; height: 14px; font-size: 9px; }

  /* Named but plainly not included -- a chip that were simply absent would
     read as an oversight rather than as "not in this plan". */
  .cmp-no { border-style: dashed; opacity: .55; }
  .cmp-no::after { color: var(--ink-faint); }
  .cmp-no span { font-size: 11px; line-height: 1; }
}