/* ═══════════════════════════════════════════════════════════════════════════
   teknoble.com

   Design intent: a precision instrument, not a brochure.

   The v1 site reads as a template — stock illustrations, drop shadows on
   everything, a light blue gradient behind each section. This replaces that
   with three deliberate moves:

     1. ONE dark moment. The hero is deep navy and luminous; everything after
        it is clean and light. Contrast used once lands harder than contrast
        used everywhere.
     2. Type does the work. A real modular scale, tight tracking on display
        sizes, and generous measure. No decorative fonts, no serif headings.
     3. Motion is structural. Things arrive in the order you read them, once,
        and then hold still.

   No CDN, no build step, no framework — every rule here is hand-written and
   the whole file is the design system.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Palette ──────────────────────────────────────────────────────────
     Navy is the brand. The darker surfaces are cooler and slightly blue
     rather than neutral grey — a warm-black hero looks like a photo studio,
     a blue-black one looks like software. */
  --navy-950: #070c18;
  --navy-900: #0b1324;
  --navy-800: #101b33;
  --navy-700: #16264a;
  --navy: #12234a;

  --teal-300: #5eead4;
  --teal: #14b8a6;
  --teal-600: #0d9488;
  --blue: #3b82f6;
  --violet: #7c5cff;

  --ink: #0f1722;
  --body: #3e4a5f;
  --muted: #5b6780;
  --line: #e6eaf1;
  --line-strong: #d3dae6;

  --bg: #ffffff;
  --bg-alt: #f7f9fc;

  /* Product pages override these on <main>; the site defaults to brand teal.
     --accent-ink is readable on white AND behind white button text;
     --accent-soft is the version used on the dark hero. */
  --accent: var(--teal);
  --accent-ink: var(--teal-600);
  --accent-soft: var(--teal-300);

  /* ── Type scale ───────────────────────────────────────────────────────
     A 1.25 scale, fluid between a phone and a large desktop. Display sizes
     get negative tracking because large type set at default tracking looks
     loose and amateurish — that single property does more for "premium"
     than any amount of decoration. */
  --f-xs:   .8rem;
  --f-sm:   .9375rem;
  --f-base: 1rem;
  --f-md:   clamp(1.02rem, .99rem + .16vw, 1.14rem);
  --f-lg:   clamp(1.2rem,  1.1rem + .45vw, 1.45rem);
  --f-xl:   clamp(1.5rem,  1.3rem + .9vw,  2.05rem);
  --f-2xl:  clamp(1.9rem,  1.5rem + 1.7vw, 2.9rem);
  --f-3xl:  clamp(2.4rem,  1.7rem + 3.1vw, 4.4rem);

  --wrap: 1160px;
  --radius: 14px;
  --radius-lg: 20px;
  /* Header height, in one place: the sticky bar occupies flow, so the hero
     has to be pulled up by exactly this much to sit underneath it, and the
     mobile nav drawer has to open exactly below it. */
  --header-h: 66px;

  /* Layered shadows — one tight contact shadow plus one soft ambient one.
     A single large blur reads as a sticker; two layers read as depth. */
  --sh-sm: 0 1px 2px rgba(11,19,36,.06), 0 2px 6px rgba(11,19,36,.04);
  --sh-md: 0 1px 2px rgba(11,19,36,.06), 0 10px 28px rgba(11,19,36,.08);
  --sh-lg: 0 2px 4px rgba(11,19,36,.06), 0 24px 56px rgba(11,19,36,.12);
  --sh-xl: 0 2px 6px rgba(11,19,36,.08), 0 44px 90px rgba(11,19,36,.18);

  --ease: cubic-bezier(.22,.8,.3,1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* System stack, but the modern one — these are the faces the OS actually
     ships for UI, and they are better designed than anything a font CDN
     would give us at the cost of a render-blocking request we are not
     allowed to make anyway. */
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: var(--f-base);
  line-height: 1.65;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  color: var(--ink);
  line-height: 1.12;
  margin: 0 0 .5em;
  font-weight: 680;
  letter-spacing: -.022em;
  text-wrap: balance;          /* stops a lone word dangling on its own line */
}
h1 { font-size: var(--f-3xl); letter-spacing: -.035em; }
h2 { font-size: var(--f-2xl); letter-spacing: -.028em; }
h3 { font-size: var(--f-lg); letter-spacing: -.015em; }

p { margin: 0 0 1rem; }
a { color: var(--teal-600); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; display: block; }
ul { padding-left: 1.1rem; }
strong { color: var(--ink); font-weight: 650; }

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

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 26px; }
.narrow { max-width: 720px; }
.center { text-align: center; }
.muted { color: var(--muted); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  text-transform: uppercase; letter-spacing: .16em;
  font-size: var(--f-xs); font-weight: 700;
  color: var(--accent-ink); margin: 0 0 .9rem;
}
/* Small rule before the eyebrow — a typographic marker, not an icon. */
.eyebrow::before { content: ""; width: 18px; height: 2px; background: currentColor; border-radius: 2px; opacity: .55; }

.lead { font-size: var(--f-md); color: var(--body); max-width: 62ch; line-height: 1.65; }
.tag { display: inline-block; font-size: var(--f-sm); font-weight: 600; color: var(--muted); margin: 0 0 .4rem; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; background: #fff; padding: 10px 16px; border-radius: 10px; z-index: 100; box-shadow: var(--sh-md); }

.icon { flex: none; }

/* Gradient text. Used on exactly one phrase per page — it is emphasis, and
   emphasis that appears everywhere emphasises nothing. */
.grad {
  background: linear-gradient(100deg, var(--teal-300) 0%, #7dd3fc 42%, #a5b4fc 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.on-light .grad, .grad-ink {
  background: linear-gradient(100deg, var(--teal-600) 0%, var(--blue) 55%, var(--violet) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION
   One reveal mechanism site-wide. JS adds .is-in when an element enters view.
   Short distance, one easing, no repeats — restlessness is what makes an
   animated site feel cheap.
   ═══════════════════════════════════════════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .07s; }
.reveal[data-delay="2"] { transition-delay: .14s; }
.reveal[data-delay="3"] { transition-delay: .21s; }
.reveal[data-delay="4"] { transition-delay: .28s; }
.reveal[data-delay="5"] { transition-delay: .35s; }

/* Without JS nothing is ever hidden — the failure mode is "no animation". */
.no-js .reveal { opacity: 1; transform: none; }

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

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════════════════ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s, box-shadow .3s, backdrop-filter .3s;
}
/* Over the dark hero the nav is light; once scrolled past it the bar turns
   solid and the links flip back to navy. One class does both. */
.site-header.is-scrolled {
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 20px rgba(11,19,36,.06);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: 18px; }
/* Wordmark. Tight tracking and a heavy weight do the work; the sub-line is
   spaced wide underneath so the two lines read as one locked-up mark rather
   than two stacked words. Colour flips with the header state. */
.brand { display: inline-flex; align-items: center; line-height: 1; }
.brand:hover { text-decoration: none; }
/* The two inks are stacked and cross-faded, so the swap on scroll matches the
   header's own colour transition instead of snapping. Height drives the size;
   the 10:3 aspect of the artwork sets the width. */
.brand-logo { position: relative; display: block; height: 44px; aspect-ratio: 589 / 168; }
.brand-logo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  transition: opacity .3s;
}
.brand-logo-dark { opacity: 0; }
.site-header.is-scrolled .brand-logo-light { opacity: 0; }
.site-header.is-scrolled .brand-logo-dark { opacity: 1; }
@media (max-width: 560px) { .brand-logo { height: 32px; } }

/* The footer sits on navy permanently, so its mark is always the light one. */

.site-nav { display: flex; align-items: center; gap: 30px; }

/* ── Products submenu ───────────────────────────────────────────────────────
   "Products" stays a real link to the overview page; the menu is extra, not a
   replacement for it. It opens on hover and on :focus-within, so tabbing to
   the link reveals it without any JavaScript.

   The panel is white on both header states. A menu that flipped with the bar
   would be a second colour problem for no gain — as a raised card it reads as
   a layer above the page rather than part of the bar. */
.nav-item { position: relative; display: inline-flex; align-items: center; gap: 3px; }
.nav-sub-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px; border: 0; background: none; cursor: pointer;
  color: rgba(255,255,255,.82); opacity: .75;
}
.site-header.is-scrolled .nav-sub-toggle { color: var(--body); }
.nav-sub-toggle .icon { transition: transform .25s var(--ease); }
.nav-item.has-menu:hover .nav-sub-toggle .icon,
.nav-item.has-menu:focus-within .nav-sub-toggle .icon,
.nav-item.has-menu.is-open .nav-sub-toggle .icon { transform: rotate(180deg); }

.nav-menu {
  position: absolute; top: 100%; left: 50%;
  /* The padding is the hover bridge across the gap to the card below. */
  padding-top: 13px; width: 310px;
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.nav-item.has-menu:hover .nav-menu,
.nav-item.has-menu:focus-within .nav-menu,
.nav-item.has-menu.is-open .nav-menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav-menu-inner {
  display: block; padding: 8px; border-radius: 16px;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(11,19,36,.18), 0 2px 8px rgba(11,19,36,.06);
}
.nav-menu-inner > a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 11px;
  color: var(--ink) !important; transition: background .18s;
}
.nav-menu-inner > a:hover { text-decoration: none; background: color-mix(in srgb, var(--accent) 9%, #fff); }
.nav-menu-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.nav-menu-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nav-menu-text b { font-size: var(--f-sm); font-weight: 680; letter-spacing: -.005em; }
.nav-menu-text span { font-size: var(--f-xs); color: var(--muted); }
.nav-menu-all {
  display: flex !important; align-items: center; gap: 6px;
  margin-top: 4px; padding: 10px 12px !important;
  border-top: 1px solid var(--line); border-radius: 0 0 11px 11px;
  font-size: var(--f-xs); font-weight: 650; color: var(--accent-ink) !important;
}
.nav-menu-all:hover { background: var(--bg-alt); }
/* :not(.btn) matters — without it this rule outranks .btn-ghost's own colour
   (0,2,1 vs 0,1,0) and paints the Support portal button's label white on a
   white pill, i.e. invisible. */
.site-nav a:not(.btn) { font-weight: 550; font-size: var(--f-sm); letter-spacing: .005em; color: rgba(255,255,255,.82); transition: color .2s; }
.site-nav a:not(.btn):hover { text-decoration: none; color: #fff; }
.site-nav a:not(.btn).is-active { color: #fff; }
.site-header.is-scrolled .site-nav a:not(.btn) { color: var(--body); }
.site-header.is-scrolled .site-nav a:not(.btn):hover,
.site-header.is-scrolled .site-nav a:not(.btn).is-active { color: var(--teal-600); }

/* The one button in the nav. Translucent over the dark hero so it reads as
   secondary to the page's real call to action, solid once the bar turns white. */
.site-nav .btn { color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.07); box-shadow: none; }
.site-nav .btn:hover { color: #fff; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.14); }
.site-header.is-scrolled .site-nav .btn { color: var(--ink); border-color: var(--line-strong); background: #fff; }
.site-header.is-scrolled .site-nav .btn:hover { color: var(--teal-600); border-color: var(--teal); }

.nav-toggle { display: none; background: none; border: 0; width: 42px; height: 42px; padding: 9px; cursor: pointer; }
.nav-toggle span { display: block; height: 2px; background: #fff; margin: 5px 0; border-radius: 2px; transition: .25s var(--ease); }
.site-header.is-scrolled .nav-toggle span { background: var(--ink); }

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .82rem 1.5rem; border-radius: 100px;
  font-weight: 600; font-size: var(--f-sm); letter-spacing: .005em;
  cursor: pointer; border: 1px solid transparent;
  transition: transform .2s var(--ease), box-shadow .2s, background .2s, border-color .2s, color .2s;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--teal); color: #061a17; box-shadow: 0 1px 2px rgba(11,19,36,.1), 0 8px 22px rgba(20,184,166,.32); }
.btn-primary:hover { background: var(--teal-300); color: #061a17; box-shadow: 0 2px 4px rgba(11,19,36,.1), 0 14px 32px rgba(20,184,166,.42); }
/* On a product page the call to action wears that product's colour. White on
   --accent-ink clears 5:1 for all three, which dark text on the vivid accent
   would not. */
.p-hero .btn-primary, .p-cta .btn-primary, .product-row .btn-primary {
  background: var(--accent-ink); color: #fff;
  box-shadow: 0 1px 2px rgba(11,19,36,.1), 0 8px 22px color-mix(in srgb, var(--accent) 34%, transparent);
}
.p-hero .btn-primary:hover, .p-cta .btn-primary:hover, .product-row .btn-primary:hover {
  background: var(--accent); color: #fff;
  box-shadow: 0 2px 4px rgba(11,19,36,.1), 0 14px 32px color-mix(in srgb, var(--accent) 44%, transparent);
}

.btn-ghost { border-color: var(--line-strong); color: var(--ink); background: #fff; }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal-600); }

/* On the dark hero. */
.on-dark .btn-ghost { border-color: rgba(255,255,255,.26); color: #fff; background: rgba(255,255,255,.05); }
.on-dark .btn-ghost:hover { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.12); color: #fff; }
.btn-outline { border-color: rgba(255,255,255,.3); color: #fff; background: transparent; }
.btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; }

.btn-sm { padding: .55rem 1.05rem; font-size: var(--f-xs); }

/* ═══════════════════════════════════════════════════════════════════════════
   DARK HERO
   Mesh gradient + fine grid + grain + a spotlight that tracks the pointer.
   Each layer is nearly invisible alone; together they stop the panel reading
   as a flat block of colour, which is the thing that makes cheap dark heroes
   look cheap.
   ═══════════════════════════════════════════════════════════════════════════ */
.hero-dark {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy-950);
  color: #fff;
  padding: clamp(7rem, 13vw, 11rem) 0 clamp(4rem, 9vw, 7rem);
  /* The header is sticky, which means it still takes up space in the flow.
     Pull the hero up by exactly that height so it starts at the top of the
     viewport and the header floats over it — otherwise a white band sits
     above the dark panel. The hero's own top padding already clears it. */
  margin-top: calc(-1 * var(--header-h));
}
.hero-dark h1, .hero-dark h2, .hero-dark h3 { color: #fff; }
.hero-dark .lead { color: rgba(255,255,255,.86); }
.hero-dark .eyebrow { color: var(--accent-soft); }

.hero-bg { position: absolute; inset: 0; z-index: -2; pointer-events: none; }

.mesh { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; }
.mesh-1 { width: 620px; height: 620px; top: -240px; left: -160px; background: radial-gradient(circle, rgba(20,184,166,.55) 0%, transparent 70%); animation: float1 26s ease-in-out infinite; }
.mesh-2 { width: 700px; height: 700px; top: -300px; right: -220px; background: radial-gradient(circle, rgba(59,130,246,.42) 0%, transparent 70%); animation: float2 32s ease-in-out infinite; }
.mesh-3 { width: 520px; height: 520px; bottom: -280px; left: 38%; background: radial-gradient(circle, rgba(124,92,255,.34) 0%, transparent 70%); animation: float1 38s ease-in-out infinite reverse; }

@keyframes float1 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(50px,36px,0) scale(1.1); } }
@keyframes float2 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-56px,30px,0) scale(1.06); } }

.hero-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 30%, #000 25%, transparent 100%);
          mask-image: radial-gradient(ellipse 75% 60% at 50% 30%, #000 25%, transparent 100%);
}

/* Grain. An SVG turbulence filter as a data URI — a few hundred bytes, and it
   is what stops the gradients banding into visible stripes on cheap panels. */
.hero-grain {
  position: absolute; inset: 0; opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* Pointer spotlight. Driven by two custom properties set in JS; falls back to
   a fixed position when JS never runs, so it still looks intentional. */
.hero-spot {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 28%), rgba(94,234,212,.10), transparent 65%);
  transition: background .3s ease-out;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME HERO
   ═══════════════════════════════════════════════════════════════════════════ */
.h-hero-inner { max-width: 940px; }
.h-hero h1 { max-width: 17ch; margin-bottom: 1.2rem; }
.h-hero .lead { font-size: clamp(1.08rem, 1rem + .45vw, 1.32rem); max-width: 58ch; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 2.2rem; }

/* Product pills under the hero — the thing most visitors came for, one tap in. */
.h-chips { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.12); }
.chip {
  display: inline-flex; align-items: center; gap: 11px;
  padding: .7rem 1.25rem .7rem .95rem;
  border: 1px solid rgba(255,255,255,.16); border-radius: 100px;
  background: rgba(255,255,255,.045);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: var(--f-sm); color: rgba(255,255,255,.74);
  transition: border-color .25s, background .25s, transform .25s var(--ease);
}
.chip:hover { text-decoration: none; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.1); transform: translateY(-2px); }
.chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; box-shadow: 0 0 12px var(--accent); }
.chip b { color: #fff; font-weight: 640; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE PRODUCT SURFACE
   A stylised OptiLyn screen, drawn entirely in CSS.

   Not a screenshot, and not pretending to be one: a real screenshot dates the
   moment the product changes, needs redacting before it can be published, and
   is unreadable at this size anyway. This shows the SHAPE of the software —
   which is what a visitor is actually judging — and it stays true.
   ═══════════════════════════════════════════════════════════════════════════ */
.surface-wrap { position: relative; perspective: 2000px; }
.surface {
  position: relative;
  border-radius: 16px; overflow: hidden;
  background: #fdfefe;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 40px 100px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.3);
  transform: rotateX(6deg) rotateY(-10deg) rotateZ(1deg);
  transform-style: preserve-3d;
  animation: surfaceIn 1.2s var(--ease) both .25s;
}
@keyframes surfaceIn {
  from { opacity: 0; transform: rotateX(14deg) rotateY(-18deg) translateY(40px) scale(.94); }
  to   { opacity: 1; transform: rotateX(6deg) rotateY(-10deg) rotateZ(1deg); }
}

.sf-top { display: flex; align-items: center; gap: 14px; padding: 11px 16px; background: linear-gradient(180deg, var(--navy-700), var(--navy-800)); }
.sf-dots { display: flex; gap: 6px; }
.sf-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.2); }
.sf-branch { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; color: rgba(255,255,255,.75); background: rgba(255,255,255,.09); padding: 4px 11px; border-radius: 100px; }
.sf-branch::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-300); }

.sf-body { display: grid; grid-template-columns: 56px 1fr; min-height: 340px; }
.sf-rail { background: var(--navy-900); padding: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sf-rail i { width: 22px; height: 22px; border-radius: 7px; background: rgba(255,255,255,.1); display: block; }
.sf-rail i.on { background: var(--teal); box-shadow: 0 0 16px rgba(20,184,166,.6); }

.sf-main { padding: 15px; background: #f6f8fb; display: grid; gap: 11px; align-content: start; }

.sf-row { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; }
.sf-avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--teal), var(--blue)); flex: none; }
.sf-name { font-size: 11.5px; font-weight: 700; color: var(--ink); }
.sf-sub { font-size: 9.5px; color: var(--muted); }
.sf-pill { margin-left: auto; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 9px; border-radius: 100px; background: #d9f7f1; color: #07655a; }

/* Prescription block — the thing that makes this recognisably optical. */
.sf-rx { background: #fff; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.sf-rx-h { display: grid; grid-template-columns: 34px repeat(4, 1fr); background: var(--navy); }
.sf-rx-h span { font-size: 8.5px; font-weight: 700; letter-spacing: .07em; color: rgba(255,255,255,.85); padding: 6px 7px; text-align: center; }
.sf-rx-r { display: grid; grid-template-columns: 34px repeat(4, 1fr); border-top: 1px solid var(--line); animation: slideIn .55s var(--ease) both; }
.sf-rx-r:nth-of-type(2) { animation-delay: .9s; }
.sf-rx-r:nth-of-type(3) { animation-delay: 1.05s; }
.sf-rx-r span { font-size: 10px; padding: 6px 7px; text-align: center; color: var(--ink); font-variant-numeric: tabular-nums; }
.sf-rx-r span:first-child { font-weight: 700; color: var(--teal-600); }
@keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

/* Order lines */
.sf-lines { background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 4px 0; }
.sf-line { display: grid; grid-template-columns: 1fr 44px 54px; gap: 8px; padding: 7px 11px; align-items: center; animation: slideIn .5s var(--ease) both; }
/* Stagger covers any row count: Pharmalyn's invoice has a header row plus
   three lines, so stopping at 3 made the last line animate in first. */
.sf-line:nth-of-type(1) { animation-delay: 1.20s; }
.sf-line:nth-of-type(2) { animation-delay: 1.32s; }
.sf-line:nth-of-type(3) { animation-delay: 1.44s; }
.sf-line:nth-of-type(4) { animation-delay: 1.56s; }
.sf-line:nth-of-type(5) { animation-delay: 1.68s; }
.sf-line:nth-of-type(6) { animation-delay: 1.80s; }
.sf-line + .sf-line { border-top: 1px solid #f1f4f8; }
.sf-line b { font-size: 10.5px; font-weight: 600; color: var(--ink); }
.sf-line span { font-size: 10px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.sf-line span.amt { color: var(--ink); font-weight: 650; }

/* Totals */
.sf-total { display: flex; justify-content: space-between; align-items: center; background: var(--navy); border-radius: 9px; padding: 11px 13px; animation: slideIn .5s var(--ease) both 1.6s; }
.sf-total .k { font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.6); }
.sf-total .v { font-size: 15px; font-weight: 750; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* Floating stat cards that sit proud of the surface — depth without clutter. */
.sf-float {
  position: absolute; z-index: 2;
  background: rgba(255,255,255,.97);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 13px; padding: 11px 14px;
  box-shadow: 0 20px 44px rgba(0,0,0,.3);
  animation: floatIn .8s var(--ease) both;
}
.sf-float .k { font-size: 9px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 700; }
.sf-float .v { font-size: 17px; font-weight: 750; color: var(--ink); letter-spacing: -.025em; line-height: 1.15; }
.sf-float-1 { top: 16%; left: -10%; animation-delay: 1.5s; }
.sf-float-2 { bottom: 12%; right: -8%; animation-delay: 1.75s; }
@keyframes floatIn { from { opacity: 0; transform: translateY(18px) scale(.92); } to { opacity: 1; transform: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════════════════════════════════════════ */
.section { padding: clamp(4rem, 9vw, 7rem) 0; }
.section-alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.sec-head { max-width: 700px; margin-bottom: 3rem; }
.sec-head .lead { margin-top: .7rem; }
.center .sec-head { margin-inline: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS
   The gradient hairline on hover is the one piece of ornament in the whole
   system. It works because nothing else competes with it.
   ═══════════════════════════════════════════════════════════════════════════ */
.cap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); gap: 20px; }

.cap, .mod, .dep, .client, .card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.7rem 1.55rem;
  box-shadow: var(--sh-sm);
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.cap::before, .mod::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, var(--accent), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.cap:hover, .mod:hover, .dep:hover, .client:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: transparent; }
.cap:hover::before, .mod:hover::before { opacity: 1; }

.cap-icon, .mod-icon, .dep-icon, .str-icon, .diff-icon, .client-mark {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; flex: none;
  /* Tinted from --accent, so these chips follow the product a page is about
     instead of staying Teknoble teal on a blue or purple page. */
  background: linear-gradient(140deg,
      color-mix(in srgb, var(--accent) 18%, transparent),
      color-mix(in srgb, var(--accent) 9%, transparent));
  color: var(--accent-ink);
}
.cap-icon, .dep-icon { width: 46px; height: 46px; margin-bottom: 1.1rem; }
.mod-icon { width: 42px; height: 42px; margin-bottom: .95rem; }
.str-icon, .diff-icon, .client-mark { width: 40px; height: 40px; }

/* Same two-line reservation as the module cells, so the four capability
   cards start their body copy on the same line. */
.cap h3, .mod h3 { margin-bottom: .4rem; min-height: 2.6em; line-height: 1.3; }
.cap p, .mod p { margin: 0; font-size: var(--f-sm); }

/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCT CARDS
   ═══════════════════════════════════════════════════════════════════════════ */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.prod {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 2rem 1.8rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--sh-sm); color: inherit;
  transition: transform .32s var(--ease), box-shadow .32s, border-color .32s;
}
.prod:hover { text-decoration: none; transform: translateY(-6px); box-shadow: var(--sh-xl); border-color: var(--line-strong); }
.prod-glow { position: absolute; inset: -50% 35% 55% -45%; background: radial-gradient(circle, var(--accent) 0%, transparent 62%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.prod:hover .prod-glow { opacity: .12; }
.prod-tag { font-size: var(--f-xs); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--accent); }
.prod h3:not(.lockup) { font-size: var(--f-xl); margin: .6rem 0 .35rem; }
/* Product lockups — see product_lockup() in includes/partials.php.
   align-self matters: .prod is a flex column, whose default align-items:
   stretch pulls an <img> to the full card width while its height stays
   fixed — which is exactly what squashed both logos into smears. */
.lockup { display: flex; align-items: center; gap: 12px; align-self: flex-start; margin: .75rem 0 .45rem; }
.lockup img { display: block; flex: none; }
.lockup-logo img { height: 34px; width: auto; max-width: 100%; object-fit: contain; }
.lockup-mark img { width: 40px; height: 40px; object-fit: contain; }
.lockup-mark span { font-size: var(--f-xl); font-weight: 760; letter-spacing: -.035em; color: var(--ink); line-height: 1; }
.product-row-lockup { margin: .4rem 0 .8rem; }
.product-row-lockup.lockup-logo img { height: 38px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.prod-feats { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.prod-feats li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--f-sm); margin: .55rem 0; }
.prod-feats .icon { color: var(--accent); margin-top: 3px; }
.prod-more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 1.5rem; color: var(--accent); font-weight: 640; font-size: var(--f-sm); }
.prod-more .icon { transition: transform .25s var(--ease); }
.prod:hover .prod-more .icon { transform: translateX(5px); }

/* ═══════════════════════════════════════════════════════════════════════════
   STATS — numbers count up on first view (see main.js)
   ═══════════════════════════════════════════════════════════════════════════ */
.stats-band { background: var(--navy-950); color: #fff; position: relative; overflow: hidden; padding: clamp(3rem, 6vw, 4.5rem) 0; }
.stats-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px circle at 15% 0%, rgba(20,184,166,.16), transparent 60%); }
.stat-row { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 30px; }
.stat { position: relative; padding-left: 20px; }
.stat::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--teal), transparent); }
.stat-value { font-size: clamp(2.1rem, 1.4rem + 2vw, 3.1rem); font-weight: 760; letter-spacing: -.04em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.stat-label { color: #fff; font-weight: 600; font-size: var(--f-sm); margin-top: .5rem; }
.stat-note { font-size: var(--f-xs); color: rgba(255,255,255,.64); margin-top: .2rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   FLOW
   ═══════════════════════════════════════════════════════════════════════════ */
.flow { list-style: none; padding: 0; margin: 0; }
.flow-step { display: grid; grid-template-columns: 50px 1fr; gap: 22px; padding-bottom: 2.4rem; position: relative; }
.flow-step:last-child { padding-bottom: 0; }
.flow-step:not(:last-child)::before { content: ""; position: absolute; left: 24px; top: 50px; bottom: 2px; width: 2px; background: linear-gradient(180deg, var(--line-strong), transparent); }
.flow-marker {
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 1.5px solid var(--line-strong);
  color: var(--accent); font-weight: 750; font-size: var(--f-sm);
  transition: border-color .3s, box-shadow .3s, transform .3s var(--ease);
}
.flow-step.is-in .flow-marker { border-color: var(--accent); box-shadow: 0 0 0 6px rgba(20,184,166,.1); }
.flow-body h3 { padding-top: .75rem; margin-bottom: .3rem; font-size: var(--f-md); }
.flow-body p { margin: 0; font-size: var(--f-sm); }
.flow-tight .flow-step { padding-bottom: 1.8rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   MODULE SHEET — every module readable at once, no click required.
   A hairline-divided grid reading like a spec sheet, not another set of
   rounded cards with a gradient icon blob — that treatment is used twice
   already on this page (.cap, .dep) and repeating it a third time for
   something meant to be scanned fast, not admired, would cost legibility
   for no reason. The oversized ghost numeral is the only "icon" move.
   ═══════════════════════════════════════════════════════════════════════════ */
.mod-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 18px; }

.mod-sheet {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
}
.mod-cell {
  position: relative; background: #fff; padding: 1.9rem 1.7rem 1.7rem;
  transition: background .22s;
}
.mod-cell:hover { background: color-mix(in srgb, var(--accent) 5%, #fff); }
.mod-num {
  position: absolute; top: 10px; right: 16px; font-size: 2.6rem; font-weight: 800;
  line-height: 1; letter-spacing: -.03em; color: var(--line-strong);
  font-variant-numeric: tabular-nums; user-select: none;
}
.mod-cell h3 {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--f-md); margin: 0 0 .55rem; padding-right: 2.4rem;
  /* Reserve two lines so a wrapping name ("Narcotics Register") does not push
     its body text below the bodies beside it. */
  min-height: 2.5em; line-height: 1.25;
}
.mod-cell-ico {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 14%, #fff); color: var(--accent);
}
.mod-cell p { margin: 0; font-size: var(--f-sm); }
@media (max-width: 640px) {
  .mod-sheet { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TESTIMONIALS (product page) — renders only when data.php has real quotes
   ═══════════════════════════════════════════════════════════════════════════ */
.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.quote-card {
  margin: 0; padding: 1.9rem 2rem; background: #fff; border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--radius); box-shadow: var(--sh-sm);
}
.quote-card blockquote { margin: 0 0 1.1rem; font-size: var(--f-md); line-height: 1.5; color: var(--ink); }
.quote-card figcaption { display: flex; flex-direction: column; gap: 2px; font-size: var(--f-sm); }

/* Visible only while data.php's testimonials are still the shipped
   placeholders — see the PHP comment above where this is printed. */
.dummy-flag {
  margin: 0 0 1.6rem; padding: .7rem 1rem; border-radius: 9px;
  background: #fef3c7; border: 1px solid #fcd34d; color: #92400e;
  font-size: var(--f-sm); font-weight: 620; text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FAQ — question and answer sit together, always. No accordion: closing an
   answer by default just means the visitor asking it has to click to find
   out you already had it, which is the opposite of what a FAQ is for.
   ═══════════════════════════════════════════════════════════════════════════ */
.faq-list { display: grid; gap: 1.6rem; margin: 0; }
.faq-item { padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 0; padding-bottom: 0; }
.faq-item dt { font-weight: 660; font-size: var(--f-md); color: var(--ink); margin-bottom: .45rem; }
.faq-item dd { margin: 0; font-size: var(--f-sm); }

/* ═══════════════════════════════════════════════════════════════════════════
   DEEP DIVES
   ═══════════════════════════════════════════════════════════════════════════ */
.deep-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.deep-flip .deep-copy { order: 2; }
.deep-visual { display: flex; justify-content: center; }

.check-list { list-style: none; padding: 0; margin: 1.3rem 0 1.6rem; }
.check-list li { position: relative; padding-left: 1.9rem; margin: .65rem 0; font-size: var(--f-sm); }
/* The disc and the tick are drawn separately so BOTH follow --accent. As a
   background image the tick's stroke colour would be baked into the data URI;
   as a mask, background-color paints it. */
.check-list li::before,
.check-list li::after { content: ""; position: absolute; left: 0; top: .42em; }
.check-list li::before {
  width: 15px; height: 15px; border-radius: 50%;
  background-color: color-mix(in srgb, var(--accent) 15%, #fff);
}
.check-list li::after {
  width: 15px; height: 15px;
  background-color: var(--accent-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5L20 6.5'/%3E%3C/svg%3E") center/9px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5L20 6.5'/%3E%3C/svg%3E") center/9px no-repeat;
}

/* Deep-dive illustrations */
.vis { width: 100%; max-width: 410px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--sh-lg); overflow: hidden; }
.vis-head { display: flex; align-items: center; gap: 9px; padding: 12px 16px; background: var(--navy); color: #fff; font-size: var(--f-xs); font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.vis-head .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.vis-foot, .vis-prev { padding: 11px 16px; border-top: 1px solid var(--line); font-size: var(--f-xs); color: var(--muted); background: #fafbfd; }
.vis-prev { display: flex; justify-content: space-between; gap: 10px; }

.vis-rx table { width: 100%; border-collapse: collapse; font-size: var(--f-sm); font-variant-numeric: tabular-nums; }
.vis-rx th, .vis-rx td { padding: 10px 12px; text-align: center; }
.vis-rx thead th { background: #f4f7fb; font-size: var(--f-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.vis-rx tbody th { text-align: left; font-weight: 700; color: var(--accent); }
.vis-rx tbody tr + tr td, .vis-rx tbody tr + tr th { border-top: 1px solid var(--line); }

.vis-grid .cells { display: grid; grid-template-columns: repeat(5,1fr); gap: 5px; padding: 15px; }
.vis-grid .cells i { aspect-ratio: 1; display: grid; place-items: center; border-radius: 7px; font-style: normal; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vis-grid .lvl-0 { background: #f1f4f8; color: #c3ccd8; }
.vis-grid .lvl-1 { background: #e4f5f2; background: color-mix(in srgb, var(--accent) 16%, #fff); color: var(--teal-600); }
.vis-grid .lvl-2 { background: #9fdfd6; background: color-mix(in srgb, var(--accent) 40%, #fff); color: #084f46; }
.vis-grid .lvl-3 { background: var(--accent); color: #fff; }
.vis-legend { display: flex; gap: 15px; padding: 11px 16px; border-top: 1px solid var(--line); background: #fafbfd; font-size: var(--f-xs); color: var(--muted); }
.vis-legend span { display: inline-flex; align-items: center; gap: 6px; }
.vis-legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }

.vis-branch .br { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 12px; padding: 12px 16px; }
.vis-branch .br-name { font-size: var(--f-sm); font-weight: 620; color: var(--ink); }
.vis-branch .br-bar { height: 9px; border-radius: 5px; background: #eef2f7; overflow: hidden; }
.vis-branch .br-bar i { display: block; height: 100%; width: var(--pct); border-radius: 5px; background: var(--accent); background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--blue))); transform-origin: left; animation: barIn 1.1s var(--ease) both; animation-delay: var(--d); }
@keyframes barIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.vis-roles .role { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 12px; padding: 12px 16px; }
.vis-roles .role-name { font-size: var(--f-sm); font-weight: 620; color: var(--ink); }
.vis-roles .role-bits { display: flex; gap: 6px; }
.vis-roles .role-bits i { width: 100%; height: 10px; border-radius: 3px; background: #eef2f7; animation: bitIn .5s both; animation-delay: var(--d); }
.vis-roles .role-bits i.on { background: var(--accent); }
@keyframes bitIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   STRENGTHS / DIFFERENCE / DEPLOYMENT / CLIENTS
   ═══════════════════════════════════════════════════════════════════════════ */
.str-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 26px 38px; }
.str, .diff { display: flex; gap: 16px; align-items: flex-start; }
.str h3, .diff h3 { font-size: var(--f-md); margin-bottom: .35rem; }
.str p, .diff p { margin: 0; font-size: var(--f-sm); }

.diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 44px; }

.dep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.dep .check-list { margin-bottom: 0; }

.clients-band { background: var(--bg-alt); border-block: 1px solid var(--line); }
.clients-inner { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; }
.clients-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.client { display: flex; align-items: center; gap: 15px; padding: 1.15rem 1.35rem; }
.client b { display: block; color: var(--ink); font-size: var(--f-md); font-weight: 650; }
.client .muted { font-size: var(--f-sm); }

/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCT PAGE HERO
   ═══════════════════════════════════════════════════════════════════════════ */
.p-hero-inner { display: grid; grid-template-columns: 1.02fr .98fr; gap: 60px; align-items: center; }
.p-hero h1 { margin-bottom: .5rem; }
.p-hero-points { list-style: none; padding: 0; margin: 1.9rem 0 0; }
.p-hero-points li { display: flex; align-items: flex-start; gap: 11px; margin: .7rem 0; font-size: var(--f-sm); color: rgba(255,255,255,.86); }
.p-hero-points .icon { color: var(--teal-300); margin-top: 3px; }

.page-hero-sm { padding: clamp(6.5rem, 11vw, 9rem) 0 clamp(3rem, 6vw, 4.5rem); }
.page-hero-sm h1 { max-width: 19ch; }
.page-hero-sm .lead { margin-top: 1rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCT LIST
   ═══════════════════════════════════════════════════════════════════════════ */
.product-list { display: grid; gap: 22px; }
.product-row {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 34px;
  padding: 2.3rem; background: #fff;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg); box-shadow: var(--sh-sm);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.product-row:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.product-row h2 { margin-bottom: .5rem; font-size: var(--f-xl); }
.product-row-features { align-self: center; margin: 0; }
.product-row-main .btn { margin-top: 1rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   CTA
   ═══════════════════════════════════════════════════════════════════════════ */
.cta-band { position: relative; overflow: hidden; background: var(--navy-950); }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px circle at 80% 120%, rgba(20,184,166,.2), transparent 60%); }
.cta-band h2 { color: #fff; }
.cta-band p, .cta-band .muted { color: rgba(255,255,255,.66); }
.cta-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════════════════════════════════════════ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 48px; }
.form label { display: block; font-weight: 620; color: var(--ink); margin: 1.1rem 0 .4rem; font-size: var(--f-sm); }
.form input, .form textarea { width: 100%; padding: .82rem 1rem; border: 1px solid var(--line-strong); border-radius: 11px; font: inherit; background: #fff; transition: border-color .2s, box-shadow .2s; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(20,184,166,.13); }
.form .btn { margin-top: 1.6rem; }
.field-error { display: block; color: #dc2626; font-size: var(--f-xs); margin-top: .35rem; }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.notice { border-radius: var(--radius); padding: 1.3rem 1.5rem; }
.notice-ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */
.site-footer { background: var(--navy-950); color: rgba(255,255,255,.62); padding: 4.5rem 0 1.8rem; }
.site-footer h4 { color: #fff; font-size: var(--f-sm); margin-bottom: 1rem; letter-spacing: .01em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: .55rem 0; font-size: var(--f-sm); }
.site-footer a { color: rgba(255,255,255,.62); transition: color .2s; }
.site-footer a:hover { color: #fff; text-decoration: none; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 40px; }
.footer-logo { filter: brightness(0) invert(1); margin-bottom: 1rem; opacity: .95; }
.footer-legal { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1); font-size: var(--f-xs); }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1040px) {
  .p-hero-inner { grid-template-columns: 1fr; gap: 50px; }
  .p-hero-visual { order: -1; }
  .surface { transform: none; animation: none; opacity: 1; }
  .sf-float { display: none; }     /* they overhang the edge; no room here */
  .deep-inner { grid-template-columns: 1fr; gap: 38px; }
  .deep-flip .deep-copy { order: 0; }
  .explorer { grid-template-columns: 1fr; gap: 22px; }
  .exp-list { flex-direction: row; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .exp-btn { white-space: nowrap; }
  .clients-inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 34px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .diff-grid { grid-template-columns: 1fr; gap: 26px; }
  .dep-grid { grid-template-columns: 1fr; }
  .product-row { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 640px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    background: rgba(11,19,36,.97);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    flex-direction: column; align-items: stretch; gap: 0; padding: 10px 0; display: none;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .site-header.is-scrolled .site-nav { background: rgba(255,255,255,.98); border-bottom-color: var(--line); }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 14px 26px; color: #fff; }
  .site-header.is-scrolled .site-nav a { color: var(--ink); }

  /* Collapsed until the chevron is tapped, and without the card styling it
     has on desktop. In the drawer the menu is in the flow, so it is toggled
     with display rather than visibility — hidden visibility would still hold
     its 200-odd pixels of space open. display also settles the hover question
     on its own: :hover and :focus-within only move opacity, which does nothing
     while the element is not displayed, so a tap on the chevron is the only
     thing that opens it. */
  .nav-item { display: block; position: relative; }
  .nav-item > a { padding-right: 62px; }
  .nav-sub-toggle {
    position: absolute; top: 0; right: 16px;
    width: 54px; height: 50px; opacity: 1;
  }
  .nav-menu {
    position: static; display: none; width: auto; padding-top: 0;
    opacity: 1; visibility: visible; transform: none; transition: none;
  }
  /* The desktop open-state rule is three classes deep, so it outranks the
     .nav-menu reset above and would re-apply translateX(-50%) here — sliding
     the drawer submenu off the left edge while still holding its height. */
  .nav-item.has-menu:hover .nav-menu,
  .nav-item.has-menu:focus-within .nav-menu,
  .nav-item.has-menu.is-open .nav-menu { transform: none; }
  .nav-item.has-menu.is-open .nav-menu { display: block; }
  .nav-menu-inner { padding: 0 0 6px; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .nav-menu-inner > a { padding: 9px 26px 9px 40px; border-radius: 0; color: rgba(255,255,255,.78) !important; }
  .site-header.is-scrolled .nav-menu-inner > a { color: var(--body) !important; }
  .nav-menu-text span { display: none; }
  .nav-menu-all { display: none !important; }
  .site-nav .btn { margin: 10px 26px; }
  .footer-grid { grid-template-columns: 1fr; }
  .flow-step { grid-template-columns: 42px 1fr; gap: 16px; }
  .flow-marker { width: 42px; height: 42px; }
  .flow-step:not(:last-child)::before { left: 20px; top: 44px; }
  .hero-dark { padding: 6rem 0 3.5rem; }
  /* Large blurred meshes wash out text at phone size. */
  .mesh { opacity: .6; filter: blur(64px); }
  .sf-body { min-height: 280px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v3 ADDITIONS — Carelyn showcase, client strip, video, premium polish
   ═══════════════════════════════════════════════════════════════════════════ */

.center-head { margin-inline: auto; text-align: center; }
.center-head .lead { margin-inline: auto; }
.center-head .eyebrow::after { content: ""; width: 18px; height: 2px; background: currentColor; border-radius: 2px; opacity: .55; }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; margin-top: 2.2rem; font-weight: 640; font-size: var(--f-sm); color: var(--teal-600); }
.link-arrow:hover { text-decoration: none; }
.link-arrow .icon { transition: transform .25s var(--ease); }
.link-arrow:hover .icon { transform: translateX(5px); }

/* Product hero: brand mark beside the name; eyebrow and ticks tinted to the
   product's own accent rather than the company teal. */
.p-hero-title { display: flex; align-items: center; gap: .32em; }
.p-hero-title img { width: .92em; height: .92em; flex: none; background: #fff; border-radius: .2em; padding: .1em; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.p-hero .eyebrow, .p-hero .p-hero-points .icon { color: #7fb0ff; color: color-mix(in srgb, var(--accent) 45%, #fff); }

/* ── Client strip in motion ───────────────────────────────────────────── */
.marquee {
  position: relative; overflow: hidden; padding: 8px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-list { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0 9px; }
@keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

.logo-tile {
  flex: none; width: 196px; height: 104px; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--sh-sm);
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.logo-tile img { width: 168px; height: 84px; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s var(--ease); }
.logo-tile.has-name { grid-template-rows: 1fr auto; row-gap: 6px; padding: 10px 8px 8px; }
.logo-tile.has-name img { width: auto; height: auto; max-width: 150px; max-height: 46px; align-self: center; justify-self: center; }
.logo-name { font-size: 12px; font-weight: 650; color: var(--ink); line-height: 1.1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.logo-tile:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--line-strong); }
.logo-tile:hover img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { width: auto; justify-content: center; }
  .marquee-list { flex-wrap: wrap; justify-content: center; }
  .marquee-list[aria-hidden="true"] { display: none; }
}

.logo-band { padding: clamp(2.6rem, 5vw, 3.6rem) 0; background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.logo-band-head p { text-align: center; margin: 0 0 1.6rem; font-size: var(--f-sm); color: var(--muted); letter-spacing: .01em; }
.logo-band-head b { color: var(--ink); font-weight: 650; }
.clients-band { padding-bottom: clamp(3.5rem, 7vw, 5rem); }
.clients-band .sec-head { margin-bottom: 2.4rem; }

/* ── Walkthrough video ────────────────────────────────────────────────── */
.video-band { position: relative; overflow: hidden; background: var(--navy-950); color: #fff; }
.video-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px circle at 50% 100%, rgba(47,111,237,.28), transparent 60%),
    radial-gradient(600px circle at 10% 0%, rgba(20,184,166,.14), transparent 60%);
}
.video-band .wrap { position: relative; }
.video-band h2 { color: #fff; }
.video-band .lead { color: rgba(255,255,255,.7); }
.video-band .eyebrow { color: #7fb0ff; color: color-mix(in srgb, var(--accent) 45%, #fff); }

.vplayer {
  position: relative; max-width: 980px; margin: 0 auto;
  border-radius: 18px; overflow: hidden;
  background: var(--navy-800);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 50px 120px rgba(0,0,0,.55);
}
.vplayer::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px;
  background: linear-gradient(140deg, rgba(255,255,255,.35), transparent 30%, transparent 70%, var(--accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.vplayer-chrome { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: linear-gradient(180deg, var(--navy-700), var(--navy-800)); border-bottom: 1px solid rgba(255,255,255,.06); }
.vplayer-url { margin: 0 auto; font-size: 11px; letter-spacing: .04em; color: rgba(255,255,255,.55); background: rgba(255,255,255,.06); padding: 4px 16px; border-radius: 100px; transform: translateX(-24px); }
.vplayer-stage { position: relative; aspect-ratio: 16 / 9; background: #000; }
.vplayer-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }

/* The cover only exists once JS is running to remove it again. */
.vplayer-cover { display: none; }
html:not(.no-js) .vplayer-cover {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  border: 0; cursor: pointer; color: #fff; font: inherit;
  background:
    radial-gradient(circle at 50% 50%, rgba(7,12,24,.3), rgba(7,12,24,.85) 78%),
    linear-gradient(180deg, rgba(7,12,24,.15), rgba(7,12,24,.55));
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: opacity .45s var(--ease), visibility .45s;
}
.vplayer-play {
  position: relative; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--navy-900); padding-left: 5px;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
  transition: transform .35s var(--ease);
}
.vplayer-play::before, .vplayer-play::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.6); animation: ripple 2.6s var(--ease) infinite;
}
.vplayer-play::after { animation-delay: 1.3s; }
@keyframes ripple { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
.vplayer-cover:hover .vplayer-play { transform: scale(1.07); }
.vplayer-meta { font-size: var(--f-sm); font-weight: 600; letter-spacing: .02em; color: rgba(255,255,255,.88); }
.vplayer.is-playing .vplayer-cover { opacity: 0; visibility: hidden; }

/* ── Carelyn surface ──────────────────────────────────────────────────── */
.surface-care .sf-rail i.on { background: #2f6fed; box-shadow: 0 0 16px rgba(47,111,237,.7); }
.surface-care .sf-avatar { background: linear-gradient(135deg, #2f6fed, #14b8a6); }
.surface-care .sf-pill { background: #e0eaff; color: #1d4ed8; }
.surface-care .sf-branch::before { background: #7fb0ff; }
.sf-vitals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; animation: slideIn .55s var(--ease) both .9s; }
.sf-vitals div { background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 8px 9px; }
.sf-vitals span { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sf-vitals b { display: block; font-size: 13px; font-weight: 750; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.surface-care .sf-line { grid-template-columns: 1fr 50px 58px; }

/* ── Carelyn deep-dive visuals ────────────────────────────────────────── */
.vh-patient { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.vh-patient .sf-avatar { width: 34px; height: 34px; background: linear-gradient(135deg, var(--accent), var(--teal)); }
.vh-patient b { display: block; color: var(--ink); font-size: var(--f-sm); line-height: 1.3; }
.vh-patient span { font-size: var(--f-xs); color: var(--muted); }
.vh-line { list-style: none; margin: 0; padding: 10px 16px 6px 38px; position: relative; }
.vh-line::before { content: ""; position: absolute; left: 25px; top: 24px; bottom: 30px; width: 2px; background: linear-gradient(180deg, var(--accent), var(--line)); }
.vh-line li { position: relative; padding: 8px 0 10px 8px; animation: bitIn .5s both; animation-delay: var(--d); }
.vh-line li::before { content: ""; position: absolute; left: -17px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); }
.vh-dept { display: inline-block; font-size: 9.5px; font-weight: 750; letter-spacing: .1em; color: var(--accent); margin-bottom: 2px; }
.vh-line b { display: block; font-size: var(--f-sm); color: var(--ink); font-weight: 620; line-height: 1.35; }
.vh-note { font-size: var(--f-xs); color: var(--muted); }

.vis-ward .beds { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 16px; }
.bed { aspect-ratio: 1 / 1.25; border-radius: 9px; display: grid; place-items: end center; padding-bottom: 6px; font-style: normal; position: relative; animation: bitIn .45s both; animation-delay: var(--d); }
.bed::before { content: ""; position: absolute; top: 18%; left: 22%; right: 22%; height: 16%; border-radius: 4px; background: rgba(255,255,255,.55); }
.bed span { position: relative; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bed-o { background: var(--accent); color: #fff; }
.bed-f { background: #eef2f7; color: #9aa6b8; }
.bed-f::before { background: #fff; }
.bed-d { background: #fde7c7; color: #9a5b0b; }
.vis-legend i.bed-o { background: var(--accent); }
.vis-legend i.bed-f { background: #eef2f7; box-shadow: inset 0 0 0 1px #cfd7e3; }
.vis-legend i.bed-d { background: #fde7c7; }

.vis-pharm table { width: 100%; border-collapse: collapse; font-size: var(--f-sm); font-variant-numeric: tabular-nums; }
.vis-pharm th, .vis-pharm td { padding: 10px 14px; text-align: left; }
.vis-pharm td:last-child, .vis-pharm th:last-child { text-align: right; }
.vis-pharm thead th { background: #f4f7fb; font-size: var(--f-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.vis-pharm tbody tr + tr td { border-top: 1px solid var(--line); }
.vis-pharm td:first-child { color: var(--ink); font-weight: 560; }
.vis-pharm td:nth-child(2) { color: var(--muted); font-size: var(--f-xs); }
.vis-pharm tr.nx td { background: #f5f8ff; background: color-mix(in srgb, var(--accent) 6%, #fff); }
.tag-nx { display: inline-block; margin-left: 6px; font-size: 9px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 100px; background: var(--accent); color: #fff; vertical-align: 1px; }

.bill-split { display: flex; gap: 4px; height: 16px; margin: 18px 16px 12px; }
.bill-split i { width: var(--w); background: var(--c); border-radius: 5px; transform-origin: left; animation: barIn 1s var(--ease) both; animation-delay: var(--d); }
.bill-keys { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0 16px 14px; margin: 0; font-size: var(--f-xs); color: var(--muted); }
.bill-keys li { display: inline-flex; align-items: center; gap: 7px; }
.bill-keys i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.bill-keys b { color: var(--ink); font-variant-numeric: tabular-nums; }
.bill-rows { border-top: 1px solid var(--line); }
.bill-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 16px; font-size: var(--f-sm); }
.bill-rows div + div { border-top: 1px solid var(--line); }
.bill-rows span { color: var(--muted); }
.bill-rows b { color: var(--ink); font-weight: 620; }

/* ── About: mission and vision ────────────────────────────────────────── */
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 3rem; }
.mv { position: relative; overflow: hidden; padding: 2.2rem 2.1rem; border-radius: var(--radius-lg); background: var(--navy-950); }
.mv::before { content: ""; position: absolute; inset: 0; background: radial-gradient(500px circle at 0% 0%, rgba(20,184,166,.25), transparent 60%); pointer-events: none; }
.mv-alt::before { background: radial-gradient(500px circle at 100% 0%, rgba(59,130,246,.28), transparent 60%); }
.mv-k { position: relative; display: block; font-size: var(--f-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-300); margin-bottom: .9rem; }
.mv p { position: relative; margin: 0; font-size: var(--f-lg); line-height: 1.45; color: #fff; letter-spacing: -.012em; }

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM POLISH
   ═══════════════════════════════════════════════════════════════════════════ */
::selection { background: rgba(20,184,166,.22); color: var(--ink); }

h1 { font-weight: 720; }
h2 { font-weight: 700; }

/* Primary button: a light sweep across on hover. */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--ease);
}
.btn-primary:hover::after { transform: translateX(120%); }

/* Cards light up under the pointer (--px/--py set in main.js). */
.prod::after, .cap::after, .dep::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--px, 50%) var(--py, 0%), rgba(20,184,166,.08), transparent 55%);
  background: radial-gradient(420px circle at var(--px, 50%) var(--py, 0%), color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%);
  opacity: 0; transition: opacity .35s;
}
.prod:hover::after, .cap:hover::after, .dep:hover::after { opacity: 1; }
.dep { overflow: hidden; }

/* Product cards: a hairline of the product's colour along the top edge. */
.prod::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent 85%);
}

/* Stat numbers get a faint vertical sheen. */
.stat-value { background: linear-gradient(180deg, #fff 35%, rgba(255,255,255,.7)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Header: a thin gradient line under the bar once it turns solid. */
.site-header.is-scrolled::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(20,184,166,.5), rgba(59,130,246,.5), transparent);
}

/* Footer: brand mark, and an oversized ghost wordmark signing off the page. */
.site-footer { position: relative; overflow: hidden; }
.footer-brand { margin-bottom: 1.2rem; }
.footer-brand img { display: block; height: 42px; width: auto; }
.footer-sign {
  margin: 2.4rem 0 -.08em; text-align: center; line-height: .8; user-select: none; pointer-events: none;
  font-size: clamp(4rem, 17vw, 15rem); font-weight: 850; letter-spacing: -.06em; white-space: nowrap;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,0) 90%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

@media (max-width: 900px) {
  .mv-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .logo-tile { width: 150px; height: 82px; border-radius: 12px; }
  .logo-tile img { width: 128px; height: 64px; }
  .marquee-list { gap: 12px; }
  .vplayer-play { width: 70px; height: 70px; }
  .vplayer-url { display: none; }
  .sf-vitals { grid-template-columns: repeat(2, 1fr); }
  .vis-ward .beds { grid-template-columns: repeat(4, 1fr); }
}
.surface-care ~ .sf-float-2 { bottom: -5%; right: -6%; }

/* Module sheet: hairlines drawn by each cell rather than by the gap showing
   the sheet's background, so a short last row ends in white, not a grey block. */
.mod-sheet { gap: 0; background: #fff; }
.mod-cell { box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }
.sf-pill { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   v4 — dashboard visuals (ported from optilynv2.com), dedicated-site link
   ═══════════════════════════════════════════════════════════════════════════ */

/* Alternate deep dives sit on the tinted ground, so seven sections in a row
   read as a rhythm rather than one long white page. */
.deep-alt { background: var(--bg-alt); border-block: 1px solid var(--line); }

.p-hero-site { margin: 1.6rem 0 0; font-size: var(--f-sm); color: rgba(255,255,255,.6); }
.p-hero-site a { display: inline-flex; align-items: center; gap: 5px; color: #fff; font-weight: 620; border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 1px; transition: border-color .2s; }
.p-hero-site a:hover { text-decoration: none; border-color: #fff; }
.product-row-main .btn + .btn { margin-left: 8px; }

/* Daily summary */
.dash-tiles { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); }
.dash-tile { background: #fff; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.dash-tile .k { font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; }
.dash-tile .v { font-size: 14px; font-weight: 750; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.dash-rank { padding: 14px 16px 8px; border-top: 1px solid var(--line); }
.dash-rank-head { font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; margin-bottom: 9px; }
.dash-rank-row { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; padding: 6px 0; animation: slideIn .5s var(--ease) both; animation-delay: var(--d); }
.dash-rank-name { font-size: 11.5px; color: var(--ink); font-weight: 600; }
.dash-rank-bar { height: 8px; border-radius: 4px; background: #eef2f7; overflow: hidden; }
.dash-rank-bar i { display: block; height: 100%; width: var(--pct); border-radius: 4px; background: var(--accent); background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--blue))); transform-origin: left; animation: barIn 1.1s var(--ease) both; }

/* POS / counter */
.pos-search { margin: 13px 16px 6px; padding: 9px 12px; border: 1.5px solid var(--line-strong); border-radius: 9px; font-size: 11.5px; color: var(--muted); background: #fafbfd; }
.pos-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 10px 16px; animation: slideIn .5s var(--ease) both; animation-delay: var(--d); }
.pos-row + .pos-row { border-top: 1px solid #f1f4f8; }
.pos-row-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pos-row-main b { font-size: 12px; color: var(--ink); font-weight: 700; }
.pos-row-main span { font-size: 10.5px; }
.pos-stock { font-size: 10px; color: var(--teal-600); background: #e6f7f5; background: color-mix(in srgb, var(--accent) 12%, #fff); padding: 3px 9px; border-radius: 100px; font-weight: 650; white-space: nowrap; }
.pos-price { font-size: 12px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Master dashboard */
.vis-master .vis-head { display: flex; align-items: center; gap: 9px; }
.md-band, .md-tiles, .md-split { padding-inline: 16px; }
.md-period { margin-left: auto; padding: 3px 10px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: none; color: #fff; background: rgba(255,255,255,.14); }
.md-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-block: 14px; border-bottom: 1px solid var(--line); }
.md-fig { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.md-fig .k { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.md-fig .v { font-size: 16px; font-weight: 760; letter-spacing: -.025em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.md-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0; }
.md-tile { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 8px 9px; border-radius: 9px; background: var(--bg-alt); border: 1px solid var(--line); animation: bitIn .5s var(--ease) both; animation-delay: var(--d, 0ms); }
.md-tile .k { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-tile .v { font-size: 13px; font-weight: 720; color: var(--ink); font-variant-numeric: tabular-nums; }
.md-split { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: end; padding-block: 14px; border-top: 1px solid var(--line); }
.md-chart { min-width: 0; }
.md-chart-k { display: block; margin-bottom: 8px; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.md-bars { display: flex; align-items: flex-end; gap: 6px; height: 58px; }
.md-bars i { flex: 1; min-width: 0; height: var(--h, 50%); border-radius: 4px 4px 1px 1px; background: color-mix(in srgb, var(--accent) 45%, #fff); transform-origin: bottom; animation: mdGrow .6s var(--ease) both; animation-delay: var(--d, 0ms); }
.md-bars i:last-child { background: var(--accent); }
@keyframes mdGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.md-days { display: flex; gap: 6px; margin-top: 5px; }
.md-days span { flex: 1; min-width: 0; text-align: center; font-size: 9px; color: var(--muted); font-weight: 620; }
.md-gauge-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 86px; text-align: center; }
.md-gauge { position: relative; width: 58px; height: 58px; border-radius: 50%; background: conic-gradient(var(--accent) 0 var(--pct), #e8edf4 var(--pct) 100%); display: grid; place-items: center; }
.md-gauge::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
.md-gauge-num { position: relative; font-size: 12.5px; font-weight: 760; color: var(--ink); }
.md-gauge-k { font-size: 10px; color: var(--muted); font-weight: 620; line-height: 1.25; }

@media (max-width: 560px) {
  .md-band { grid-template-columns: 1fr; gap: 6px; }
  .md-fig { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; }
  .md-tiles { grid-template-columns: repeat(2, 1fr); }
  .dash-rank-row { grid-template-columns: 90px 1fr; }
  .product-row-main .btn + .btn { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v5 — three products: Pharmalyn surface + visuals, Carelyn's own dashboard
   visuals, product-tinted heroes, readability
   ═══════════════════════════════════════════════════════════════════════════ */

/* Product heroes glow in the product's own colour, so the three pages are
   told apart at a glance instead of all opening on the company teal. */
.p-hero .mesh-1 { background: radial-gradient(circle, color-mix(in srgb, var(--accent) 62%, transparent) 0%, transparent 70%); }
.p-hero .hero-spot { background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 28%), color-mix(in srgb, var(--accent) 14%, transparent), transparent 65%); }

/* Flow markers pick up the product colour on product pages. */
.flow-step.is-in .flow-marker { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent); }

/* Readability: body copy in cards and lists at a comfortable size and
   measure. Small grey text on white was the main weakness of v4. */
.cap p, .mod-cell p, .str p, .diff p, .flow-body p, .faq-item dd { line-height: 1.6; }
.deep-copy .lead { max-width: 52ch; }
.deep-copy h2 { max-width: 18ch; }
.check-list li { line-height: 1.5; }

/* ── Pharmalyn surface ────────────────────────────────────────────────── */
.surface-pharm .sf-rail i.on { background: #7c3aed; box-shadow: 0 0 16px rgba(124,58,237,.7); }
.surface-pharm .sf-avatar { background: linear-gradient(135deg, #7c3aed, #2f6fed); }
.surface-pharm .sf-pill { background: #ede9fe; color: #5b21b6; }
.surface-pharm .sf-branch::before { background: #c4b5fd; }
/* Drop the badge to the card's corner, as Carelyn's does: at the default
   bottom:12% it sat on top of the invoice total. */
.surface-pharm ~ .sf-float-2 { bottom: -5%; right: -6%; }
.sf-plines .sf-line { grid-template-columns: 1fr 78px 40px 34px; gap: 6px; }
.sf-plines .sf-line span:nth-child(2) { font-size: 9px; text-align: left; white-space: nowrap; }
.sf-plines .sf-lh { padding-block: 4px 5px; }
.sf-plines .sf-lh span { font-size: 8px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.sf-plines .sf-lh span:first-child { text-align: left; }
.sf-keys { display: flex; gap: 6px; flex-wrap: wrap; animation: slideIn .5s var(--ease) both 1.5s; }
.sf-keys span { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; color: var(--body); background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 4px 8px 4px 5px; }
kbd { font: 700 8.5px/1 ui-monospace, Consolas, monospace; padding: 3px 5px; border-radius: 4px; background: var(--navy); color: #fff; }

/* ── Shared rows for table-like visuals ───────────────────────────────── */
.ds-row, .su-row, .au-row { display: grid; align-items: center; gap: 10px; padding: 10px 16px; font-size: var(--f-sm); font-variant-numeric: tabular-nums; animation: slideIn .5s var(--ease) both; animation-delay: var(--d, 0ms); }
.ds-row + .ds-row, .su-row + .su-row, .au-row + .au-row { border-top: 1px solid #eef1f6; }
.ds-h, .su-h, .au-h { background: #f4f7fb; padding-block: 8px; animation: none; }
.ds-h span, .su-h span, .au-h span { font-size: 10px !important; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted) !important; }
.ds-row span:not(:first-child), .su-row span:not(:first-child), .au-row span:not(:first-child) { text-align: right; color: var(--ink); }

/* ── Carelyn: hospital dashboard ──────────────────────────────────────── */
.hd-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px 16px; }
.hd-count { display: flex; flex-direction: column; gap: 1px; padding: 10px 11px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 7%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 16%, #fff); animation: bitIn .5s var(--ease) both; animation-delay: var(--d); }
.hd-count b { font-size: 20px; font-weight: 780; letter-spacing: -.03em; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.hd-count span { font-size: 10.5px; font-weight: 620; color: var(--muted); }
.hd-count.warn { background: #fff7e8; border-color: #fde2b0; }
.hd-count.warn b { color: #b45309; }
.hd-income { display: grid; grid-template-columns: 118px 1fr; gap: 18px; align-items: center; padding: 14px 16px 16px; border-top: 1px solid var(--line); }
.hd-donut { position: relative; width: 118px; height: 118px; border-radius: 50%; display: grid; place-items: center; animation: donutIn 1s var(--ease) both .2s; }
.hd-donut::before { content: ""; position: absolute; inset: 17px; border-radius: 50%; background: #fff; }
.hd-donut span { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.hd-donut b { font-size: 14px; font-weight: 780; color: var(--ink); letter-spacing: -.02em; }
.hd-donut i { font-style: normal; font-size: 9.5px; color: var(--muted); }
@keyframes donutIn { from { opacity: 0; transform: rotate(-90deg) scale(.85); } to { opacity: 1; transform: none; } }
.hd-keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.hd-keys li { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 8px; font-size: 12.5px; color: var(--body); }
.hd-keys i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.hd-keys b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ── Carelyn: doctor share ────────────────────────────────────────────── */
.vis-share .ds-row { grid-template-columns: 1fr 34px 62px 62px; }
.vis-salary .ds-row { grid-template-columns: 1fr 52px 58px 62px; }
.ds-name { display: flex; flex-direction: column; min-width: 0; }
.ds-name b { font-size: 12.5px; color: var(--ink); font-weight: 650; }
.ds-name i { font-style: normal; font-size: 10.5px; color: var(--muted); }
.ds-total { background: color-mix(in srgb, var(--accent) 6%, #fff); font-weight: 750; color: var(--ink); animation: none; }
.ds-split { height: 8px; margin: 4px 16px 14px; border-radius: 5px; background: #cbd5e1; overflow: hidden; }
.ds-split i { display: block; height: 100%; width: var(--w); background: var(--accent); transform-origin: left; animation: barIn 1.1s var(--ease) both .4s; }

.sc-steps { list-style: none; display: flex; gap: 4px; margin: 0; padding: 14px 16px 4px; }
.sc-steps li { flex: 1; position: relative; padding-top: 16px; font-size: 10.5px; font-weight: 620; color: var(--muted); text-align: center; line-height: 1.25; }
.sc-steps li::before { content: ""; position: absolute; top: 3px; left: 0; right: 0; height: 4px; border-radius: 3px; background: #e5eaf2; }
.sc-steps li.done::before { background: var(--accent); }
.sc-steps li.now::before { background: linear-gradient(90deg, var(--accent), #e5eaf2); }
.sc-steps li.done, .sc-steps li.now { color: var(--ink); }
.sc-bar { display: flex; gap: 3px; height: 16px; margin: 16px 16px 12px; }
.sc-bar i { width: var(--w); background: var(--c); border-radius: 4px; transform-origin: left; animation: barIn 1s var(--ease) both; animation-delay: var(--d); }

/* ── Carelyn: ward medicine requests ──────────────────────────────────── */
.wm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; animation: slideIn .5s var(--ease) both; animation-delay: var(--d); }
.wm-row + .wm-row { border-top: 1px solid #eef1f6; }
.wm-row b { display: block; font-size: var(--f-sm); color: var(--ink); font-weight: 650; line-height: 1.3; }
.wm-row span { font-size: 11.5px; color: var(--muted); }
.wm-st { flex: none; font-size: 10px !important; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; }
.wm-pending { background: #fff4e0; color: #b45309 !important; }
.wm-issued { background: #e3f6ee; color: #047857 !important; }

/* ── Pharmalyn: dashboard ─────────────────────────────────────────────── */
.pd-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 14px 16px; }
.pd-card { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 7%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 16%, #fff); animation: bitIn .5s var(--ease) both; animation-delay: var(--d); }
.pd-card span { font-size: 10.5px; font-weight: 650; color: var(--muted); }
.pd-card b { font-size: 17px; font-weight: 780; letter-spacing: -.025em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pd-chart { padding: 12px 16px 14px; border-top: 1px solid var(--line); }
.pd-chart-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pd-legend { display: inline-flex; align-items: center; gap: 5px; text-transform: none; letter-spacing: 0; font-weight: 620; }
.pd-legend i { width: 9px; height: 9px; border-radius: 2px; margin-left: 6px; }
.pd-legend i.s, .pd-bars i.s { background: color-mix(in srgb, var(--accent) 38%, #fff); }
.pd-legend i.p, .pd-bars i.p { background: var(--accent); }
.pd-bars { display: flex; align-items: flex-end; gap: 10px; height: 70px; }
.pd-bars div { flex: 1; display: flex; align-items: flex-end; gap: 2px; height: 100%; }
.pd-bars i { flex: 1; height: var(--h); border-radius: 3px 3px 1px 1px; transform-origin: bottom; animation: mdGrow .6s var(--ease) both; }
.pd-top { border-top: 1px solid var(--line); padding: 10px 16px 12px; }
.pd-top div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 12.5px; color: var(--ink); }
.pd-top div b { font-variant-numeric: tabular-nums; }
.pd-top .pd-top-h { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 0; }

/* ── Pharmalyn: formula search / batch & expiry ───────────────────────── */
.vis-exp .pos-search b { color: var(--accent); }
/* align-items:center matters: a stretched grid cell also stretches the flex
   pills inside .ex-tags, and a 100px radius turns a stretched pill into a fat
   oval. Rows read: name + price on top, batch/expiry + stock beneath. */
.ex-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; padding: 11px 16px; align-items: center; animation: slideIn .5s var(--ease) both; animation-delay: var(--d); }
.ex-row + .ex-row { border-top: 1px solid #eef1f6; }
.ex-main b { display: block; font-size: 12.5px; color: var(--ink); font-weight: 700; }
.ex-main span { font-size: 11px; color: var(--muted); }
.ex-price { text-align: right; white-space: nowrap; }
.ex-price b { font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ex-price span { margin-left: 5px; font-size: 10.5px; color: var(--muted); }
.ex-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; align-self: center; }
.ex-tags span { font-size: 10px; font-weight: 650; line-height: 1.6; padding: 2px 9px; border-radius: 100px; white-space: nowrap; }
.ex-batch { background: #f1f4f8; color: var(--body); }
.ex-date { background: color-mix(in srgb, var(--accent) 12%, #fff); color: color-mix(in srgb, var(--accent) 75%, #000); }
.ex-stock { text-align: right; white-space: nowrap; font-size: 12px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ex-stock span { font-size: 10px; font-weight: 500; color: var(--muted); margin-left: 4px; }

/* ── Pharmalyn: supply order ──────────────────────────────────────────── */
.vis-supply .su-row { grid-template-columns: 1fr 44px 56px 46px; }
.su-name { color: var(--ink); font-weight: 600; font-size: 12.5px; }
.su-low { color: #c2410c !important; font-weight: 750; }
.su-qty { font-weight: 750; color: var(--accent) !important; }
.su-action { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--line); background: #fafbfd; }
.su-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #fff; background: var(--accent); padding: 7px 13px; border-radius: 100px; box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent); }
.su-done { font-size: 11px; font-weight: 650; color: #047857; }

/* ── Pharmalyn: narcotics record ──────────────────────────────────────── */
.nc-row { display: grid; grid-template-columns: 46px 1fr; gap: 12px; padding: 12px 16px; animation: slideIn .5s var(--ease) both; animation-delay: var(--d); }
.nc-row + .nc-row { border-top: 1px solid #eef1f6; }
.nc-date { font-size: 11px; font-weight: 750; color: var(--accent); padding-top: 1px; }
.nc-row b { display: block; font-size: 12.5px; color: var(--ink); font-weight: 680; margin-bottom: 2px; }
.nc-row div > span { display: block; font-size: 11px; color: var(--muted); line-height: 1.5; }

/* ── Pharmalyn: shift closing ─────────────────────────────────────────── */
.sh-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 16px; font-size: var(--f-sm); color: var(--body); animation: slideIn .5s var(--ease) both; animation-delay: var(--d); }
.sh-row + .sh-row { border-top: 1px dashed #e6eaf1; }
.sh-row b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 650; }
.sh-row b.pos { color: #047857; }
.sh-row b.neg { color: #b91c1c; }
.sh-total { display: flex; justify-content: space-between; align-items: center; margin: 6px 12px 0; padding: 12px 14px; border-radius: 10px; background: var(--navy); }
.sh-total span { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.sh-total b { font-size: 17px; font-weight: 780; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sh-profit { display: flex; justify-content: space-between; gap: 10px; padding: 12px 16px 14px; font-size: 12.5px; color: var(--muted); }
.sh-profit b { color: var(--accent); font-variant-numeric: tabular-nums; }

/* ── Pharmalyn: stock audit ───────────────────────────────────────────── */
.vis-audit .au-row { grid-template-columns: 1fr 52px 48px 40px; }
.au-name { color: var(--ink); font-weight: 600; font-size: 12.5px; }
.au-flag { display: inline-block; margin-left: 4px; font-size: 9px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 100px; background: #fff1e6; color: #c2410c; vertical-align: 1px; }
.au-d { font-weight: 750; }
.au-d.neg { color: #b91c1c !important; }
.au-d.pos { color: #b45309 !important; }
.au-d.ok  { color: #047857 !important; }

@media (max-width: 560px) {
  .hd-income { grid-template-columns: 96px 1fr; gap: 14px; }
  .hd-donut { width: 96px; height: 96px; }
  .hd-donut::before { inset: 14px; }
  .hd-donut b { font-size: 12px; }
  .hd-count b { font-size: 17px; }
  .sf-plines .sf-line { grid-template-columns: 1fr 40px 34px; }
  .sf-plines .sf-line span:nth-child(2) { display: none; }
  .ex-row { grid-template-columns: 1fr; }
  .ex-price, .ex-stock { text-align: left; }
}

/* ── Large screens ───────────────────────────────────────────────────────
   Past ~1500px the page used to stop growing and leave empty margins. Zoom
   the whole page up in steps instead, so text, cards, logos and pictures all
   grow together — the same as pressing Ctrl-plus in the browser. Media
   queries still see the real screen width, so phones and laptops are
   untouched. (The page has no vh sizes, so zoom is safe here.) */
@media (min-width: 1500px) { html { zoom: 1.12; } }
@media (min-width: 1700px) { html { zoom: 1.25; } }
@media (min-width: 1900px) { html { zoom: 1.4; } }
@media (min-width: 2200px) { html { zoom: 1.75; } }
@media (min-width: 2500px) { html { zoom: 1.95; } }
@media (min-width: 2900px) { html { zoom: 2.3; } }
@media (min-width: 3400px) { html { zoom: 2.75; } }
@media (min-width: 3900px) { html { zoom: 3.1; } }