/* The front page (views/public/landing.ejs) — Daylight Glass.
   A drifting aurora and a holographic ℞ on a pale sky, behind white frosted glass. Three gates,
   each with its own hue and its own mark: doctors = circles and rings (green-teal), patients =
   soft blobs on a timeline (violet-blue), pharmacies = squares and a scanner's corner brackets
   (amber-coral). The marks stay small; every gate, door, button and field has the same corners
   whichever audience it is for.
   The page loads this and nothing else, so the palette below is a copy of the one at the top of
   app.css, which the rest of the service uses: change one, change the other.
   Each hue comes as a bright pair (-1, -2) for rings, glows and badges, and a deep pair (-ink,
   -ink-2) for anything that has to be read on white; the deep ones clear 4.5:1 on white.
   Every rule is scoped to body.home or a home- class. System fonts only; no external requests. */

@property --home-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root:has(> body.home) { background: #f4f6fb; color-scheme: light; overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { :root:has(> body.home) { scroll-behavior: smooth; } }

body.home {
  /* ink */
  --ink: #0c1324;
  --ink-2: #3b4459;
  --ink-3: #596276;
  --line: rgba(12, 19, 36, .1);
  --shade: 26, 32, 70;
  /* gate hues: bright pair, deep pair for text, button pair (white text on it, 4.5:1 or better) */
  --doc-1: #1fcf9f; --doc-2: #12a9c4; --doc-rgb: 22, 190, 150;
  --doc-ink: #0a7358; --doc-ink-2: #0b6c87; --doc-b1: #0a8060; --doc-b2: #0b6f8c;
  --pat-1: #9b87ff; --pat-2: #5b8cff; --pat-rgb: 132, 110, 250;
  --pat-ink: #5a3fd1; --pat-ink-2: #2e56c8; --pat-b1: #6a4fe0; --pat-b2: #3d63d6;
  --ph-1: #ffbf3f; --ph-2: #ff835c; --ph-rgb: 245, 150, 60;
  --ph-ink: #a8470d; --ph-ink-2: #b8400c; --ph-b1: #b45309; --ph-b2: #c2410c;
  --holo: #3ee8b8, #5fd4ff, #9d8cff, #f39cff, #ffc95a, #ff9670, #3ee8b8;
  /* type */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --rx-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23000' stroke-width='11' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M27 86V15h24a19 19 0 0 1 0 38H27'/%3E%3Cpath d='M45 53l38 36M59 88l24-25'/%3E%3C/svg%3E");
  --gutter-l: max(20px, env(safe-area-inset-left));
  --gutter-r: max(20px, env(safe-area-inset-right));
  /* One radius for every card on the page, whichever audience it is for. */
  --rad-card: 32px;

  margin: 0;
  min-height: 100vh;
  background: #f4f6fb;
  color: var(--ink);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}
body.home *, body.home *::before, body.home *::after { box-sizing: border-box; }
body.home :where(h1, h2, h3, p, ol, ul, dl, dd, figure) { margin: 0; }
body.home :where(ol, ul) { padding: 0; list-style: none; }
body.home a { color: inherit; }
body.home svg { flex: none; }
body.home .home-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
body.home :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
body.home ::selection { background: rgba(var(--doc-rgb), .28); color: var(--ink); }

body.home .home-wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter-l) var(--gutter-r); }
body.home .home-main, body.home .home-top, body.home .home-foot { position: relative; z-index: 1; }

/* ───────────────────────── the sky ───────────────────────── */
body.home .home-sky {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% -12%, #fff 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(90% 60% at 50% 118%, #f5edfb 0%, rgba(245, 237, 251, 0) 60%),
    #f4f6fb;
}
/* Curtain rays in white, where the aurora is thickest, and a whisper of paper grain. Both static. */
body.home .home-sky::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .24) 0 1px, transparent 1px 7px, rgba(255, 255, 255, .12) 7px 9px, transparent 9px 19px);
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 10%, rgba(0, 0, 0, .5) 45%, transparent 75%);
  mask: linear-gradient(180deg, transparent 0, #000 10%, rgba(0, 0, 0, .5) 45%, transparent 75%);
}
body.home .home-sky::after {
  content: ""; position: absolute; inset: 0; z-index: 1; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.home .home-sky i {
  position: absolute; display: block; border-radius: 50%;
  will-change: transform;
  animation: home-drift 36s ease-in-out infinite alternate;
}
body.home .home-a1 { width: 120vmax; height: 52vmax; left: -42vmax; top: -20vmax; --r: -16deg;
  background: radial-gradient(closest-side, rgba(52, 214, 167, .42), rgba(34, 195, 214, .16) 48%, rgba(34, 195, 214, 0) 74%); }
body.home .home-a2 { width: 100vmax; height: 48vmax; right: -44vmax; top: 2vmax; --r: 14deg; animation-duration: 44s; animation-delay: -14s;
  background: radial-gradient(closest-side, rgba(139, 116, 255, .36), rgba(96, 140, 255, .14) 50%, rgba(96, 140, 255, 0) 74%); }
body.home .home-a3 { width: 90vmax; height: 34vmax; left: -10vmax; top: 44vh; --r: -8deg; animation-duration: 40s; animation-delay: -22s;
  background: radial-gradient(closest-side, rgba(56, 200, 230, .22), rgba(56, 200, 230, 0) 72%); }
body.home .home-a4 { width: 80vmax; height: 40vmax; right: -30vmax; bottom: -18vmax; --r: 10deg; animation-duration: 48s; animation-delay: -6s;
  background: radial-gradient(closest-side, rgba(255, 150, 110, .3), rgba(255, 200, 110, .12) 50%, rgba(255, 200, 110, 0) 74%); }
@keyframes home-drift {
  0%   { transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)) scale(1); }
  50%  { transform: translate3d(9vmax, 4vmax, 0) rotate(calc(var(--r, 0deg) + 9deg)) scale(1.14); }
  100% { transform: translate3d(-5vmax, 8vmax, 0) rotate(calc(var(--r, 0deg) - 7deg)) scale(.92); }
}

/* ───────────────────────── glass ───────────────────────── */
body.home .home-door, body.home .home-gate, body.home .home-slab, body.home .home-travel {
  background: linear-gradient(180deg, rgba(255, 255, 255, .84), rgba(255, 255, 255, .6) 60%), rgba(255, 255, 255, .32);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
}
body.home .home-slab {
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .86) 60%), rgba(255, 255, 255, .6);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.home .home-door, body.home .home-gate, body.home .home-slab, body.home .home-travel { background: #fff; }
}

/* ───────────────────────── the ℞ ───────────────────────── */
/* A spinning holographic foil (compositor-only transform), seen through a ℞-shaped hole. */
body.home .home-holo { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
body.home .home-holo::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 180%; aspect-ratio: 1; margin: -90% 0 0 -90%;
  background: conic-gradient(from 0deg, var(--holo));
  animation: home-spin 9s linear infinite;
}
body.home .home-rx {
  display: block; position: absolute; inset: 14%;
  background: var(--ink);
  -webkit-mask: var(--rx-mask) center / contain no-repeat;
  mask: var(--rx-mask) center / contain no-repeat;
}
@keyframes home-spin { to { transform: rotate(1turn); } }

/* ───────────────────────── header ───────────────────────── */
body.home .home-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: calc(14px + env(safe-area-inset-top)); padding-bottom: 14px;
}
body.home .home-logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; border-radius: 12px; }
body.home .home-tile {
  position: relative; display: block; width: 34px; height: 34px; border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .6) inset, 0 6px 18px -6px rgba(var(--pat-rgb), .6);
}
body.home .home-tile .home-rx { inset: 16%; }
body.home .home-word { font: 800 21px/1 var(--display); letter-spacing: -.035em; color: var(--ink); }
body.home .home-word span { color: var(--doc-ink); }
body.home .home-nav { display: flex; align-items: center; gap: 4px; }
body.home .home-nav a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px;
  font-size: 14.5px; font-weight: 550; color: var(--ink-2); text-decoration: none;
  transition: background-color .2s, color .2s;
}
body.home .home-nav a:hover { color: var(--ink); background: rgba(255, 255, 255, .7); }
body.home .home-nav a:not(.home-nav-plain)::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
body.home .home-nav-doc { --c: var(--doc-1); }
body.home .home-nav-pat { --c: var(--pat-1); }
body.home .home-nav-ph  { --c: var(--ph-2); }
body.home .home-nav-ph::before { border-radius: 1.5px !important; }
body.home .home-nav-plain { border: 1px solid rgba(12, 19, 36, .12); background: rgba(255, 255, 255, .5); }
@media (max-width: 759px) {
  body.home .home-nav a:not(.home-nav-plain) { display: none; }
}

/* ───────────────────────── hero ───────────────────────── */
body.home .home-hero { padding-top: clamp(18px, 4vw, 56px); padding-bottom: clamp(56px, 7vw, 96px); }
body.home .home-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 6px 12px 6px 10px;
  border: 1px solid rgba(12, 19, 36, .1); border-radius: 999px; background: rgba(255, 255, 255, .66);
  font: 600 12.5px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
}
body.home .home-spark { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--doc-1); box-shadow: 0 0 10px var(--doc-1); }
body.home .home-spark::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--doc-1); opacity: 0; animation: home-ping 3.2s ease-out infinite; }
@keyframes home-ping { 0% { transform: scale(.4); opacity: .9; } 70%, 100% { transform: scale(1.8); opacity: 0; } }

body.home h1 {
  font: 760 clamp(2.2rem, 9.6vw, 4.6rem)/1.02 var(--display);
  letter-spacing: -.042em; color: var(--ink); text-wrap: balance;
}
/* The foil again, in inks deep enough to read on white (every stop is 3:1 or better at this size). */
body.home .home-holo-text {
  display: inline-block;
  background: linear-gradient(100deg, #0a8a68 0%, #0b7fb0 22%, #5a44dc 46%, #b0369d 62%, #c85a12 82%, #b8430c 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: home-sheen 14s ease-in-out infinite alternate;
  padding-bottom: .06em;
}
@keyframes home-sheen { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
body.home .home-lede { margin-top: 18px; max-width: 34em; font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

/* The three doors */
body.home .home-doors { display: grid; gap: 10px; margin-top: 26px; }
body.home .home-door {
  --c: var(--doc-1); --ci: var(--doc-ink); --rgb: var(--doc-rgb);
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px 16px 12px 12px;
  border-radius: 20px; text-decoration: none; color: var(--ink); overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(var(--rgb), .36), inset 0 1px 0 rgba(255, 255, 255, .9), 0 18px 40px -26px rgba(var(--rgb), .75), 0 2px 6px -2px rgba(var(--shade), .08);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s;
}
body.home .home-door::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 140% at 0% 50%, rgba(var(--rgb), .18), rgba(var(--rgb), 0) 55%);
}
body.home .home-door:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(var(--rgb), .7), inset 0 1px 0 #fff, 0 22px 50px -22px rgba(var(--rgb), .85), 0 2px 6px -2px rgba(var(--shade), .08); }
body.home .home-door:focus-visible { outline-color: var(--ci); border-radius: 20px; }
body.home .home-door-pat { --c: var(--pat-1); --ci: var(--pat-ink); --rgb: var(--pat-rgb); }
body.home .home-door-ph  { --c: var(--ph-2);  --ci: var(--ph-ink);  --rgb: var(--ph-rgb); }
body.home .home-door-txt { position: relative; display: grid; gap: 2px; flex: 1; min-width: 0; }
body.home .home-door-txt b { font: 700 18px/1.2 var(--display); letter-spacing: -.02em; }
body.home .home-door-txt small { font-size: 14px; line-height: 1.3; color: var(--ink-2); }
body.home .home-door-go { position: relative; width: 20px; height: 20px; fill: none; stroke: var(--ci); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
body.home .home-door:hover .home-door-go { transform: translateY(3px); }
body.home .home-door-mark { display: none; }

/* Badges: circle, blob, square. The hues are bright, so the icon on them is near-black (6:1 or better). */
body.home .home-badge {
  --c1: var(--doc-1); --c2: var(--doc-2);
  position: relative; display: grid; place-items: center; width: 46px; height: 46px; flex: none;
  border-radius: 50%; color: #06120f;
  background: linear-gradient(140deg, var(--c1), var(--c2));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35) inset, 0 8px 20px -8px var(--c1);
}
body.home .home-badge svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
body.home .home-badge-doc::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(var(--doc-rgb), .5); }
body.home .home-badge-pat { --c1: var(--pat-1); --c2: var(--pat-2); color: #0c0a24; border-radius: 58% 42% 55% 45% / 48% 58% 42% 52%; }
body.home .home-badge-ph { --c1: var(--ph-1); --c2: var(--ph-2); color: #221004; border-radius: 9px; }
body.home .home-badge-lg { width: 60px; height: 60px; }
body.home .home-badge-lg svg { width: 30px; height: 30px; }
body.home .home-badge-lg.home-badge-ph { border-radius: 12px; }

/* ───────────────────────── specimen slab ───────────────────────── */
/* Last in the source: after the gates on a phone or tablet, lifted beside the headline on a desktop. */
body.home .home-specimen { position: relative; --px: 0; --py: 0; margin-top: clamp(56px, 10vw, 88px); }
body.home .home-stage { position: relative; perspective: 1500px; padding: 18px 6px 8px; animation: home-float 9s ease-in-out infinite; }
@keyframes home-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
body.home .home-stage::before {
  /* the glow the slab sits in */
  content: ""; position: absolute; inset: 8% -6% -4%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--doc-rgb), .32), rgba(var(--pat-rgb), .2) 55%, rgba(var(--pat-rgb), 0) 80%);
}
body.home .home-slab, body.home .home-ghost {
  transform: rotateX(calc(7deg - var(--py) * 7deg)) rotateY(calc(-9deg + var(--px) * 12deg)) rotateZ(-1.5deg);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
body.home .home-ghost {
  position: absolute; inset: 18px 6px 8px; border-radius: 24px;
  background: linear-gradient(160deg, rgba(var(--pat-rgb), .34), rgba(var(--doc-rgb), .18));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 20px 40px -24px rgba(var(--shade), .25);
  translate: 12px 12px; scale: .96;
}
body.home .home-slab {
  position: relative; border-radius: 24px; padding: 22px 20px 20px; overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .95),
    0 0 0 1px rgba(var(--shade), .07),
    0 40px 80px -30px rgba(var(--shade), .38),
    0 0 70px -24px rgba(var(--doc-rgb), .5);
  font-size: 14px; line-height: 1.45;
}
/* A white highlight that follows the pointer, and a faint rainbow band across the card. */
body.home .home-sheen {
  position: absolute; inset: -40%; pointer-events: none;
  background: radial-gradient(38% 30% at 50% 50%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%),
              linear-gradient(115deg, rgba(255, 255, 255, 0) 40%, rgba(157, 140, 255, .1) 46%, rgba(98, 243, 198, .1) 52%, rgba(255, 211, 107, .08) 56%, rgba(255, 255, 255, 0) 62%);
  transform: translate(calc(var(--px) * 22%), calc(var(--py) * 22%));
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
body.home .home-seal {
  position: absolute; top: 16px; right: 16px; width: 64px; height: 64px; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .6) inset, 0 6px 20px -6px rgba(var(--pat-rgb), .75);
}
body.home .home-guilloche {
  position: absolute; inset: 0; border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(255, 255, 255, 0) 0 2px, rgba(255, 255, 255, .4) 2px 2.6px);
  -webkit-mask: radial-gradient(circle, transparent 36%, #000 38%);
  mask: radial-gradient(circle, transparent 36%, #000 38%);
  mix-blend-mode: overlay;
}
body.home .home-seal .home-rx { inset: 22%; background: rgba(12, 19, 36, .88); }
body.home .home-slab-head { position: relative; padding-right: 76px; }
body.home .home-dr { font: 700 16.5px/1.25 var(--display); letter-spacing: -.01em; color: var(--ink); }
body.home .home-nowrap { white-space: nowrap; }
body.home .home-meta { display: block; font-size: 12.5px; color: var(--ink-3); }
body.home .home-pt {
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: 8px 16px;
  margin-top: 16px; padding: 12px 0; border-block: 1px solid var(--line);
}
body.home .home-pt-name { grid-column: 1 / -1; }
body.home .home-pt dt, body.home .home-dx span, body.home .home-k {
  display: block; font: 600 11px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
body.home .home-pt dd { font-weight: 600; color: var(--ink); }
body.home .home-dx { position: relative; margin-top: 10px; color: var(--ink-2); }
body.home .home-rxbody { position: relative; display: flex; gap: 12px; margin-top: 14px; }
body.home .home-rx-ink {
  position: relative; inset: auto; width: 40px; height: 40px; flex: none;
  background: linear-gradient(140deg, var(--ink), var(--doc-ink));
}
body.home .home-meds { flex: 1; min-width: 0; display: grid; gap: 10px; counter-reset: home-med; }
body.home .home-meds li { display: grid; gap: 1px; counter-increment: home-med; }
body.home .home-med { display: flex; justify-content: space-between; gap: 10px; }
body.home .home-med b { font-weight: 650; color: var(--ink); }
body.home .home-med b::before { content: counter(home-med) ". "; color: var(--ink-3); font-weight: 500; }
body.home .home-qty { font: 600 13px/1.5 var(--mono); color: var(--doc-ink); }
body.home .home-sig { font-size: 13px; color: var(--ink-2); font-style: italic; padding-left: 1.1em; }
body.home .home-slab-foot {
  position: relative; display: flex; align-items: center; gap: 16px; margin-top: 18px; padding-top: 16px;
  border-top: 1px dashed rgba(12, 19, 36, .18);
}
body.home .home-qr {
  flex: none; width: 104px; padding: 8px; border-radius: 12px; background: #fff; line-height: 0;
  box-shadow: 0 0 0 1px rgba(12, 19, 36, .1), 0 10px 24px -12px rgba(var(--shade), .4);
}
body.home .home-qr svg { display: block; width: 100%; height: auto; }
body.home .home-qr path[stroke] { stroke: var(--ink); }
body.home .home-codebox { display: grid; gap: 2px; min-width: 0; }
body.home .home-code { font: 700 clamp(15px, 4.3vw, 18px)/1.3 var(--mono); letter-spacing: .08em; color: var(--ink); white-space: nowrap; }
body.home .home-codebox .home-meta { overflow-wrap: anywhere; }
body.home .home-caption { margin-top: 18px; text-align: center; font-size: 14px; color: var(--ink-3); }
body.home .home-caption a, body.home .home-gate-links a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); font-weight: 600;
  text-decoration: underline; text-decoration-color: rgba(12, 19, 36, .28); text-underline-offset: 4px;
}
body.home .home-caption a { margin-left: 4px; }
body.home .home-gate-links { display: flex; flex-wrap: wrap; gap: 0 26px; }
body.home .home-caption a:hover, body.home .home-gate-links a:hover { text-decoration-color: currentColor; }
body.home .home-caption svg, body.home .home-gate-links svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ───────────────────────── gates (bento) ───────────────────────── */
body.home .home-bento, body.home .home-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
body.home .home-gate {
  --c1: var(--doc-1); --c2: var(--doc-2); --rgb: var(--doc-rgb); --ci: var(--doc-ink); --ci2: var(--doc-ink-2); --b1: var(--doc-b1); --b2: var(--doc-b2);
  position: relative; isolation: isolate; display: grid; gap: 20px; align-content: start;
  padding: clamp(22px, 3.2vw, 38px); border-radius: var(--rad-card); overflow: hidden;
  box-shadow: inset 0 1px 0 #fff, 0 30px 80px -44px rgba(var(--rgb), .65), 0 16px 40px -28px rgba(var(--shade), .22);
  scroll-margin-top: 16px;
}
/* The glowing ring: a conic gradient in the gate's hue, turned slowly, cut down to a 1.5px band. */
body.home .home-gate::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--home-a), var(--c1), var(--c2) 18%, rgba(var(--rgb), .18) 32%, rgba(12, 19, 36, .07) 50%, rgba(var(--rgb), .18) 68%, var(--c2) 82%, var(--c1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: home-ring 11s linear infinite;
}
@keyframes home-ring { to { --home-a: 360deg; } }
body.home .home-gate > * { position: relative; z-index: 1; }
body.home .home-gate-pat { --c1: var(--pat-1); --c2: var(--pat-2); --rgb: var(--pat-rgb); --ci: var(--pat-ink); --ci2: var(--pat-ink-2); --b1: var(--pat-b1); --b2: var(--pat-b2); }
body.home .home-gate-ph  { --c1: var(--ph-1);  --c2: var(--ph-2);  --rgb: var(--ph-rgb);  --ci: var(--ph-ink);  --ci2: var(--ph-ink-2);  --b1: var(--ph-b1);  --b2: var(--ph-b2); }
body.home .home-gate-pat::before { animation-duration: 13s; animation-direction: reverse; }
body.home .home-gate-ph::before  { animation-duration: 9s; }

/* A soft wash of the gate's hue in its top corner, plus its shape motif. */
body.home .home-deco { position: absolute !important; z-index: 0 !important; pointer-events: none; }
body.home .home-gate-doc .home-deco {
  top: -140px; right: -140px; width: 420px; height: 420px; border-radius: 50%;
  background:
    repeating-radial-gradient(circle, rgba(var(--doc-rgb), 0) 0 27px, rgba(var(--doc-rgb), .22) 27px 28px),
    radial-gradient(closest-side, rgba(var(--doc-rgb), .18), rgba(var(--doc-rgb), 0));
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent);
  mask: radial-gradient(closest-side, #000 30%, transparent);
}
body.home .home-gate-pat .home-deco {
  top: -120px; right: -90px; width: 360px; height: 300px;
  border-radius: 58% 42% 55% 45% / 48% 58% 42% 52%;
  background: radial-gradient(closest-side, rgba(var(--pat-rgb), .22), rgba(98, 147, 255, .07) 60%, rgba(98, 147, 255, 0));
}
body.home .home-gate-ph .home-deco {
  top: 0; right: 0; width: 260px; height: 220px;
  background: radial-gradient(circle, rgba(var(--ph-rgb), .5) 1.3px, transparent 1.6px) 0 0 / 13px 13px;
  -webkit-mask: radial-gradient(100% 100% at 100% 0%, #000, transparent 70%);
  mask: radial-gradient(100% 100% at 100% 0%, #000, transparent 70%);
}
/* Scanner corner brackets around the pharmacy gate: a border following the card's own curve, cut
   down to its four corners, like the viewfinder of a phone's QR scanner. */
body.home .home-brackets {
  --inset: 10px; --l: 38px;
  position: absolute !important; inset: var(--inset); z-index: 3 !important; pointer-events: none;
  border: 2px solid #f08a3c; border-radius: calc(var(--rad-card) - var(--inset));
  -webkit-mask:
    linear-gradient(#000 0 0) left top / var(--l) var(--l), linear-gradient(#000 0 0) right top / var(--l) var(--l),
    linear-gradient(#000 0 0) left bottom / var(--l) var(--l), linear-gradient(#000 0 0) right bottom / var(--l) var(--l);
  -webkit-mask-repeat: no-repeat;
  mask:
    linear-gradient(#000 0 0) left top / var(--l) var(--l), linear-gradient(#000 0 0) right top / var(--l) var(--l),
    linear-gradient(#000 0 0) left bottom / var(--l) var(--l), linear-gradient(#000 0 0) right bottom / var(--l) var(--l);
  mask-repeat: no-repeat;
  filter: drop-shadow(0 0 5px rgba(var(--ph-rgb), .5));
}

body.home .home-gate-head { display: flex; align-items: center; gap: 16px; }
body.home .home-kicker { font: 600 12.5px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ci); }
body.home .home-gate h2 {
  font: 760 clamp(2rem, 7.4vw, 2.9rem)/1.02 var(--display); letter-spacing: -.04em;
  background: linear-gradient(100deg, var(--ink) 10%, var(--ci) 55%, var(--ci2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .05em;
}
body.home .home-gate-lede { font-size: 17px; color: var(--ink-2); max-width: 36em; text-wrap: pretty; }

/* Panels inside the doctor gate */
body.home .home-panel {
  display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: 22px;
  background: rgba(255, 255, 255, .66); box-shadow: inset 0 0 0 1px rgba(var(--rgb), .3), 0 1px 2px rgba(var(--shade), .05);
}
body.home .home-panel h3 { font: 700 17px/1.3 var(--display); letter-spacing: -.01em; color: var(--ink); }

/* Doctor features: ring bullets */
body.home .home-feats { display: grid; gap: 14px; }
body.home .home-feats li { position: relative; padding-left: 30px; color: var(--ink-2); font-size: 15.5px; }
body.home .home-feats li::before {
  content: ""; position: absolute; left: 2px; top: .3em; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--doc-1); box-shadow: 0 0 8px rgba(var(--doc-rgb), .5), inset 0 0 0 3px #fff, inset 0 0 0 7px var(--doc-1);
}
body.home .home-feats b { color: var(--ink); font-weight: 650; }
body.home .home-feats a { color: var(--doc-ink); font-weight: 600; text-underline-offset: 3px; }

/* Patient timeline: soft blobs strung on a line */
body.home .home-timeline { position: relative; display: grid; gap: 16px; padding-left: 30px; }
body.home .home-timeline::before {
  content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--pat-1), var(--pat-2) 70%, rgba(98, 147, 255, .12));
}
body.home .home-timeline li { position: relative; display: grid; gap: 2px; color: var(--ink-2); font-size: 15.5px; }
body.home .home-timeline li::before {
  content: ""; position: absolute; left: -30px; top: .25em; width: 18px; height: 18px;
  border-radius: 58% 42% 55% 45% / 48% 58% 42% 52%;
  background: linear-gradient(140deg, var(--pat-1), var(--pat-2));
  box-shadow: 0 0 0 4px #fbfbfe, 0 0 14px rgba(var(--pat-rgb), .6);
}
body.home .home-timeline b { color: var(--ink); font-weight: 650; }
body.home .home-note {
  padding: 14px 16px; border-radius: 18px; font-size: 14.5px; color: var(--ink-2);
  background: rgba(var(--pat-rgb), .08); box-shadow: inset 0 0 0 1px rgba(var(--pat-rgb), .26);
}

/* Pharmacy checks: square ticks */
body.home .home-try {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: -8px;
  font-size: 15px; font-weight: 650; color: var(--ph-ink);
  text-decoration: underline; text-decoration-color: rgba(var(--ph-rgb), .55); text-underline-offset: 4px;
}
body.home .home-try:hover { text-decoration-color: currentColor; }
body.home .home-try:focus-visible { outline-color: var(--ph-ink); }
body.home .home-try svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
body.home .home-try:hover svg { transform: translateX(3px); }

body.home .home-checks { display: grid; gap: 12px; }
body.home .home-checks li { position: relative; padding-left: 30px; color: var(--ink-2); font-size: 15.5px; }
body.home .home-checks li::before {
  content: ""; position: absolute; left: 0; top: .25em; width: 18px; height: 18px; border-radius: 4px;
  border: 1.5px solid #f08a3c; background: rgba(var(--ph-rgb), .14);
}
body.home .home-checks li::after {
  content: ""; position: absolute; left: 6.5px; top: calc(.25em + 3px); width: 5px; height: 9px;
  border: solid var(--ph-ink); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
body.home .home-red { color: #c81e1e; font-weight: 650; }

/* ───────────────────────── forms ───────────────────────── */
body.home .home-form { display: grid; gap: 10px; }
body.home .home-label { font: 600 13.5px/1.3 var(--sans); color: var(--ink-2); }
body.home .home-label + .home-input, body.home .home-label + .home-inline, body.home .home-label + .home-scan { margin-top: -4px; }
body.home .home-inline { display: flex; flex-wrap: wrap; gap: 10px; }
body.home .home-inline .home-input { flex: 1 1 200px; }
body.home .home-inline .home-btn { flex: 1 0 auto; }
body.home .home-input {
  width: 100%; min-width: 0; min-height: 52px; padding: 0 16px; border: 0; border-radius: 14px;
  font: 400 17px/1.2 var(--sans); color: var(--ink);
  background: rgba(255, 255, 255, .92);
  box-shadow: inset 0 0 0 1px rgba(12, 19, 36, .16), 0 1px 2px rgba(var(--shade), .05);
  transition: box-shadow .2s, background-color .2s;
  -webkit-appearance: none; appearance: none;
}
body.home .home-input::placeholder { color: #7d869a; }
body.home .home-input:hover { box-shadow: inset 0 0 0 1px rgba(12, 19, 36, .28), 0 1px 2px rgba(var(--shade), .05); }
body.home .home-input:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ci), 0 0 0 4px rgba(var(--rgb), .24); }
body.home .home-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px;
  border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 700 16px/1 var(--sans); letter-spacing: -.005em; color: #fff;
  background: linear-gradient(135deg, var(--b1, var(--doc-b1)), var(--b2, var(--doc-b2)));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) inset, 0 10px 24px -12px rgba(var(--rgb, var(--doc-rgb)), .95);
  transition: transform .2s, box-shadow .2s;
}
body.home .home-btn:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .26) inset, 0 14px 32px -12px rgba(var(--rgb, var(--doc-rgb)), 1); }
body.home .home-btn:active { transform: translateY(1px); }
body.home .home-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 999px; }
/* A full-width button may sit in a narrow panel: let its label wrap rather than overflow. */
body.home .home-btn-block { width: 100%; white-space: normal; text-wrap: balance; text-align: center; line-height: 1.2; padding-block: 10px; }
body.home .home-hint { font-size: 14px; color: var(--ink-3); }
body.home .home-fine { font-size: 13px; color: var(--ink-3); }
body.home .home-hint a, body.home .home-fine a { color: var(--ink); text-underline-offset: 3px; }
body.home .home-alert { padding: 12px 14px; border-radius: 14px; font-size: 14.5px; }
body.home .home-alert-ok { margin-bottom: 18px; color: var(--ink); background: rgba(var(--doc-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--doc-rgb), .45); }

/* Pharmacy code field: a scanner window */
body.home .home-scan { position: relative; border-radius: 14px; overflow: hidden; }
body.home .home-code-in {
  min-height: 64px; padding: 0 18px 8px; border-radius: 14px;
  font: 600 clamp(20px, 5.6vw, 24px)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255, 246, 232, .88);
  box-shadow: inset 0 0 0 1px rgba(var(--ph-rgb), .6);
}
body.home .home-code-in::placeholder { color: rgba(168, 71, 13, .7); letter-spacing: .12em; }
body.home .home-scanline {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--ph-rgb), 0) 82%, rgba(var(--ph-rgb), .2) 96%, rgba(255, 160, 70, .8) 99.4%, rgba(var(--ph-rgb), 0));
  transform: translateX(-100%);
  animation: home-scan 5.5s cubic-bezier(.6, 0, .4, 1) infinite;
}
@keyframes home-scan { 0% { transform: translateX(-100%); } 50%, 100% { transform: translateX(100%); } }
body.home .home-scan:focus-within .home-scanline { animation: none; opacity: 0; }
body.home .home-ticks { position: absolute; left: 18px; right: 18px; bottom: 10px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; pointer-events: none; }
body.home .home-ticks i { height: 2px; border-radius: 2px; background: rgba(var(--ph-rgb), .3); transition: background-color .15s, box-shadow .15s; }
body.home .home-ticks i:nth-child(4n) { margin-right: 6px; }
body.home .home-ticks i.on { background: var(--ph-2); box-shadow: 0 0 6px rgba(var(--ph-rgb), .9); }

/* ───────────────────────── travel ───────────────────────── */
body.home .home-travel {
  position: relative; display: grid; align-content: center; gap: 26px; padding: clamp(24px, 3.2vw, 38px); border-radius: var(--rad-card);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 0 0 1px rgba(var(--shade), .05), 0 16px 40px -28px rgba(var(--shade), .22);
}
body.home .home-travel h2 { font: 720 clamp(1.5rem, 5vw, 2rem)/1.1 var(--display); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
body.home .home-route { position: relative; display: grid; gap: 26px; padding-left: 34px; }
body.home .home-route::before {
  content: ""; position: absolute; left: 10px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--doc-1), var(--pat-1) 50%, var(--ph-2));
}
body.home .home-route li { position: relative; display: grid; gap: 4px; color: var(--ink-2); font-size: 15.5px; max-width: 30em; }
body.home .home-route b { font: 700 18px/1.25 var(--display); color: var(--ink); letter-spacing: -.015em; }
body.home .home-node { position: absolute; left: -34px; top: 1px; width: 22px; height: 22px; background: var(--c); box-shadow: 0 0 0 5px #fafbfe, 0 0 14px var(--c); }
body.home .home-stop-doc { --c: var(--doc-1); }
body.home .home-stop-doc .home-node { border-radius: 50%; }
body.home .home-stop-pat { --c: var(--pat-1); }
body.home .home-stop-pat .home-node { border-radius: 58% 42% 55% 45% / 48% 58% 42% 52%; }
body.home .home-stop-ph { --c: var(--ph-2); }
body.home .home-stop-ph .home-node { border-radius: 5px; }
/* A glint running the route, top to bottom here and left to right on wider screens. */
body.home .home-route::after {
  content: ""; position: absolute; left: 10px; top: 10px; width: 2px; height: 24%; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
  animation: home-comet-y 6s cubic-bezier(.5, 0, .3, 1) infinite;
}
@keyframes home-comet-y { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: 1; } 62% { opacity: 1; } 70%, 100% { transform: translateY(calc(316% - 20px)); opacity: 0; } }
@keyframes home-comet-x { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 62% { opacity: 1; } 70%, 100% { transform: translateX(calc(316% - 22px)); opacity: 0; } }

/* ───────────────────────── footer ───────────────────────── */
body.home .home-foot {
  display: grid; gap: 10px; justify-items: start;
  margin-top: clamp(56px, 8vw, 104px); padding-top: 28px; padding-bottom: calc(84px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  font-size: 14px; color: var(--ink-3);
}
body.home .home-logo-sm .home-word { font-size: 19px; }
body.home .home-foot nav { display: flex; flex-wrap: wrap; gap: 0 4px; margin-left: -10px; }
body.home .home-foot nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--ink-2); text-decoration: none; border-radius: 10px; }
body.home .home-foot nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* ───────────────────────── the doctor wall ─────────────────────────
   views/partials/doctor-wall.ejs brings its own stylesheet; this only dresses it for the daylight
   sky: white frosted cards, deep ink for the names, a ring in the doctors' own teal and the seal in
   its darker ink, which holds its contrast on white. */
body.home {
  --wall-fg: var(--ink);
  --wall-muted: var(--ink-3);
  --wall-tile: rgba(255, 255, 255, .78);
  --wall-border: rgba(12, 19, 36, .08);
  --wall-ring: rgba(var(--doc-rgb), .45);
  --wall-badge: var(--doc-ink);
  --wall-shadow: inset 0 1px 0 #fff, 0 12px 26px -18px rgba(var(--shade), .38);
}
body.home .home-wall { margin-top: clamp(56px, 8vw, 96px); }
body.home .home-wall .wall-title { font: 720 clamp(1.5rem, 5vw, 2rem)/1.1 var(--display); letter-spacing: -.03em; }
/* Wide enough for a short wall to be narrower than the page (wall.css centres it), so its heading
   is centred over it too: a band across the page, rather than a heading at one edge and the cards
   drifting in the middle. */
@media (min-width: 760px) { body.home .home-wall :is(.wall-title, .wall-sub) { text-align: center; } }

/* ───────────────────────── :target and reveal ───────────────────────── */
body.home .home-gate:target { animation: home-arrive 1.6s ease-out 1; }
@keyframes home-arrive { 0% { box-shadow: 0 0 0 3px rgba(var(--rgb), .85), 0 0 70px rgba(var(--rgb), .5); } 100% { box-shadow: inset 0 1px 0 #fff, 0 30px 80px -44px rgba(var(--rgb), .65), 0 16px 40px -28px rgba(var(--shade), .22); } }
body.home .home-pre { opacity: 0; transform: translateY(28px); }
body.home [data-reveal] { transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1); }

/* Loops pause while their element is off screen (the script sets .home-off). */
body.home .home-off, body.home .home-off::before, body.home .home-off *, body.home .home-off *::before, body.home .home-off *::after { animation-play-state: paused !important; }

/* ───────────────────────── wider screens ───────────────────────── */
@media (max-width: 1039px) { body.home .home-main { overflow-x: clip; } }
@media (max-width: 479px) {
  body.home .home-eyebrow-more { display: none; }
  body.home .home-seal { width: 50px; height: 50px; top: 14px; right: 14px; }
  body.home .home-slab-head { padding-right: 58px; }
}
@media (max-width: 759px) {
  body.home .home-door, body.home .home-gate, body.home .home-slab, body.home .home-travel { -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); }
}
@media (min-width: 560px) {
  body.home .home-slab { padding: 28px 28px 24px; font-size: 14.5px; }
  body.home .home-qr { width: 118px; }
  body.home .home-specimen { max-width: 520px; margin-inline: auto; width: 100%; }
}
@media (min-width: 760px) {
  body.home .home-doors { grid-template-columns: repeat(3, 1fr); }
  body.home .home-door { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 16px; min-height: 178px; padding: 20px; }
  body.home .home-door-txt b { font-size: 20px; }
  body.home .home-door::before { background: radial-gradient(120% 90% at 0% 0%, rgba(var(--rgb), .2), rgba(var(--rgb), 0) 60%); }
  body.home .home-door-go { position: absolute; right: 16px; top: 20px; }
  body.home .home-door-mark {
    display: block; position: absolute; right: -18px; bottom: -22px; width: 112px; height: 112px;
    fill: none; stroke: var(--ci); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; opacity: .12;
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), opacity .3s;
  }
  body.home .home-door:hover .home-door-mark { opacity: .22; transform: rotate(-6deg) scale(1.05); }
  body.home .home-pair { grid-template-columns: 1fr 1fr; }
  /* The six points run longer than the two panels beside them, so the panels keep their own height
     and the spare room collects in an empty row under them rather than inside them. */
  body.home .home-gate-doc { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 28px;
    grid-template-rows: auto auto auto auto 1fr auto;
    grid-template-areas: "head head" "lede lede" "feats signin" "feats new" "feats ." "links links"; }
  body.home .home-gate-doc > .home-gate-head { grid-area: head; }
  body.home .home-gate-doc > .home-gate-lede { grid-area: lede; }
  body.home .home-gate-doc > .home-signin { grid-area: signin; }
  body.home .home-gate-doc > .home-feats { grid-area: feats; align-content: start; }
  body.home .home-gate-doc > .home-new { grid-area: new; }
  body.home .home-gate-doc > .home-gate-links { grid-area: links; }
  body.home .home-route { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; gap: 8px 28px; padding-left: 0; padding-top: 44px; }
  body.home .home-route li { grid-row: span 2; grid-template-rows: subgrid; align-content: start; }
  body.home .home-route::before { left: 11px; right: 11px; top: 10px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--doc-1), var(--pat-1) 50%, var(--ph-2)); }
  body.home .home-node { left: 0; top: -44px; }
  body.home .home-route::after { left: 11px; top: 10px; width: 24%; height: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff); animation-name: home-comet-x; }
}

@media (min-width: 1040px) {
  body.home .home-main { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); column-gap: 56px; }
  body.home .home-hero { grid-column: 1; grid-row: 1; display: grid; align-content: center; padding-top: 40px; min-height: min(820px, calc(100vh - 72px)); }
  body.home .home-specimen { grid-column: 2; grid-row: 1; align-self: center; max-width: none; margin: 0; padding-top: 40px; padding-bottom: clamp(56px, 7vw, 96px); }
  body.home .home-bento { grid-column: 1 / -1; grid-row: 2; }
  body.home .home-wall { grid-column: 1 / -1; grid-row: 3; }
  body.home .home-slab, body.home .home-ghost { transform: rotateX(calc(10deg - var(--py) * 8deg)) rotateY(calc(-17deg + var(--px) * 14deg)) rotateZ(2deg); }
  body.home .home-foot { grid-template-columns: auto 1fr auto; align-items: center; column-gap: 20px; }
  body.home .home-foot nav { margin: 0 -10px 0 0; }
  body.home .home-bento { grid-template-columns: minmax(0, 6.7fr) minmax(0, 5.3fr); grid-template-rows: auto 1fr; gap: 20px; }
  body.home .home-gate-doc { grid-column: 1; grid-row: 1; }
  body.home .home-travel { grid-column: 1; grid-row: 2; }
  body.home .home-pair { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 20px; }
  body.home .home-pair > .home-gate { flex: 1 1 auto; }
  body.home .home-gate h2 { font-size: clamp(2.4rem, 3.4vw, 3.1rem); }
}
@media (min-width: 1100px) {
  body.home .home-bento { grid-template-columns: minmax(0, 6.4fr) minmax(0, 5.6fr); }
}

/* ───────────────────────── motion off ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.home *, body.home *::before, body.home *::after { animation: none !important; transition-duration: .01ms !important; }
  body.home .home-scanline { display: none; }
  body.home .home-pre { opacity: 1; transform: none; }
}