/* ============================================================================
   ZURA — Marketing front page
   Design tokens → base → layout → components → motion
   ========================================================================== */

/* ---------------------------------------------------------------- TOKENS -- */
:root {
  /* Brand */
  --blue-50:#EFF6FF;  --blue-100:#DBEAFE; --blue-500:#3B82F6;
  --blue-600:#2563EB; --blue-700:#1D4ED8;
  --cyan-50:#ECFEFF;  --cyan-500:#00B4C6;
  --orange-50:#FFF7ED;--orange-400:#FF7A59;--orange-700:#C2410C;--orange-800:#9A3412;
  --violet-50:#F5F3FF;--violet-500:#8B5CF6;
  --green-50:#F0FDF4; --green-500:#22C55E; --green-700:#15803D;

  /* Neutrals */
  --ink-900:#0F172A; --ink-800:#1E293B; --ink-700:#334155;
  --ink-600:#475569; --ink-500:#64748B; --ink-400:#94A3B8;
  --line:#E2E8F0;    --line-strong:#CBD5E1;
  --surface:#FFFFFF; --surface-2:#F8FAFC; --surface-3:#F1F5F9;

  /* Elevation — layered for depth rather than one flat drop */
  --sh-xs: 0 1px 2px rgba(15,23,42,.05);
  --sh-sm: 0 1px 3px rgba(15,23,42,.06), 0 4px 10px -4px rgba(15,23,42,.08);
  --sh-md: 0 2px 6px rgba(15,23,42,.05), 0 12px 28px -12px rgba(15,23,42,.16);
  --sh-lg: 0 4px 12px rgba(15,23,42,.06), 0 24px 48px -20px rgba(15,23,42,.22);
  --sh-xl: 0 8px 24px rgba(15,23,42,.08), 0 40px 80px -32px rgba(15,23,42,.28);
  --ring-blue: 0 0 0 4px rgba(59,130,246,.16);

  /* Geometry */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
  --shell:1280px;
  --pad-x:clamp(18px, 4vw, 48px);
  --section-y:clamp(64px, 8vw, 116px);

  /* Motion */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:.18s; --t-med:.35s; --t-slow:.7s;
}

/* ------------------------------------------------------------------ BASE -- */
*,*::before,*::after { box-sizing:border-box; }
/* Guard: several components set display:flex/grid, which would otherwise
   defeat the [hidden] attribute and leave invisible elements interactive. */
[hidden] { display:none !important; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size:16px; line-height:1.55;
  color:var(--ink-900); background:var(--surface);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4 { margin:0; letter-spacing:-.022em; line-height:1.12; font-weight:700; }
p { margin:0; }
img,svg { max-width:100%; display:block; }
a { color:var(--blue-600); text-decoration:none; transition:color var(--t-fast) ease; }
a:hover { color:var(--blue-700); }
ul { margin:0; padding:0; list-style:none; }
button { font:inherit; color:inherit; }
:focus-visible { outline:2px solid var(--blue-600); outline-offset:3px; border-radius:6px; }

.shell { width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad-x); }
.section { padding-block:var(--section-y); position:relative; }
.section--tint { background:var(--surface-2); border-block:1px solid var(--line); }

.skip-link {
  position:absolute; left:-9999px; top:12px; z-index:200;
  background:var(--ink-900); color:#fff; padding:10px 18px; border-radius:var(--r-sm); font-weight:600;
}
.skip-link:focus { left:12px; color:#fff; }

/* ---------------------------------------------- AMBIENT MESH BACKGROUND -- */
.bg-mesh { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.mesh-blob { position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; }
.mesh-blob--a { width:min(46vw,620px); aspect-ratio:1; background:radial-gradient(circle,#BFDBFE,transparent 70%);
  top:-14%; right:-8%; animation:drift 26s var(--ease-out) infinite alternate; }
.mesh-blob--b { width:min(38vw,520px); aspect-ratio:1; background:radial-gradient(circle,#CFFAFE,transparent 70%);
  top:32%; left:-12%; animation:drift 32s var(--ease-out) infinite alternate-reverse; }
.mesh-blob--c { width:min(30vw,420px); aspect-ratio:1; background:radial-gradient(circle,#FFEDD5,transparent 70%);
  top:8%; left:44%; opacity:.4; animation:drift 38s var(--ease-out) infinite alternate; }
@keyframes drift {
  from { transform:translate3d(0,0,0) scale(1); }
  to   { transform:translate3d(3%,6%,0) scale(1.14); }
}

/* --------------------------------------------------------------- BUTTONS -- */
.btn {
  --btn-bg:var(--blue-600); --btn-fg:#fff; --btn-bd:transparent;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1.5px solid var(--btn-bd); border-radius:var(--r-md);
  padding:11px 18px; min-height:44px;
  font-size:14px; font-weight:600; letter-spacing:-.005em;
  cursor:pointer; overflow:hidden; isolation:isolate; white-space:nowrap;
  transition:transform var(--t-med) var(--ease-out),
             box-shadow var(--t-med) var(--ease-out),
             background var(--t-fast) ease,
             color var(--t-fast) ease,
             border-color var(--t-fast) ease;
}
/* Sheen sweep on hover */
.btn::after {
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.28) 50%,transparent 68%);
  transform:translateX(-120%); transition:transform .75s var(--ease-out);
}
.btn:hover::after { transform:translateX(120%); }
.btn:active { transform:translateY(1px) scale(.985); }

.btn--primary { --btn-bg:var(--blue-600); box-shadow:0 1px 2px rgba(37,99,235,.24), 0 8px 18px -8px rgba(37,99,235,.5); }
.btn--primary:hover { --btn-bg:var(--blue-700); color:#fff; transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(37,99,235,.24), 0 16px 32px -10px rgba(37,99,235,.55); }

.btn--dark { --btn-bg:var(--ink-900); box-shadow:0 8px 18px -10px rgba(15,23,42,.6); }
.btn--dark:hover { --btn-bg:var(--ink-800); color:#fff; transform:translateY(-2px); box-shadow:0 16px 32px -12px rgba(15,23,42,.55); }

.btn--accent { --btn-bg:var(--orange-700); box-shadow:0 8px 20px -8px rgba(194,65,12,.6); }
.btn--accent:hover { --btn-bg:var(--orange-800); color:#fff; transform:translateY(-2px); box-shadow:0 18px 36px -12px rgba(194,65,12,.6); }

.btn--outline { --btn-bg:var(--surface); --btn-fg:var(--ink-900); --btn-bd:var(--line-strong); }
.btn--outline:hover { --btn-bg:var(--surface-2); --btn-bd:var(--ink-400); color:var(--ink-900);
  transform:translateY(-2px); box-shadow:var(--sh-md); }

.btn--ghost { --btn-bg:transparent; --btn-fg:var(--ink-900); }
.btn--ghost:hover { --btn-bg:var(--surface-3); color:var(--ink-900); }

.btn--sm { padding:9px 15px; min-height:40px; font-size:13.5px; }
.btn--lg { padding:15px 26px; min-height:52px; font-size:15.5px; border-radius:13px; }
.btn--block { width:100%; }

.btn-arrow { width:16px; height:16px; transition:transform var(--t-med) var(--ease-out); }
.btn:hover .btn-arrow { transform:translateX(4px); }

/* Loading state */
.btn-spinner { display:none; width:17px; height:17px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation:spin .7s linear infinite; }
.btn.is-loading .btn-label { opacity:.55; }
.btn.is-loading .btn-spinner { display:block; }
.btn.is-loading .btn-arrow { display:none; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------------------------------------------------------------- HEADER -- */
.site-header {
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-med) ease, box-shadow var(--t-med) ease, background var(--t-med) ease;
}
.site-header.is-stuck { border-bottom-color:var(--line); box-shadow:0 1px 24px -8px rgba(15,23,42,.16); background:rgba(255,255,255,.86); }

.header-inner { display:flex; align-items:center; gap:clamp(10px,2vw,28px); min-height:70px; }

/* ------------------------------------------------------------------ LOGO -- */
/* Sprite host: must stay in the render tree (not display:none) or Safari and
   Firefox fail to resolve the <use> references. */
.sprite { position:absolute; width:0; height:0; overflow:hidden; }

.logo {
  --logo-h:30px;
  display:inline-flex; align-items:center; gap:calc(var(--logo-h) * .19);
  color:var(--blue-600); flex-shrink:0;
  transition:color var(--t-fast) ease;
}
.logo:hover { color:var(--blue-700); }
/* Both symbols share the source lockup's vertical box, so rendering them at a
   matched height reproduces the original artwork's alignment exactly. */
.logo-mark, .logo-word { height:var(--logo-h); width:auto; display:block; fill:currentColor; }
.logo-mark { aspect-ratio:980/1106; transform-origin:50% 58%; }
.logo-word { aspect-ratio:2198/1106; }
.logo--sm { --logo-h:24px; }

/* Entrance: mark springs in, wordmark follows. `backwards` (not `both`) so the
   properties revert to their base values once it finishes — otherwise the
   animation would keep hold of transform and the hover states below would
   never apply. */
@keyframes logoMarkIn {
  from { opacity:0; transform:scale(.7) rotate(-16deg); }
  to   { opacity:1; transform:none; }
}
@keyframes logoWordIn {
  from { opacity:0; transform:translateX(-9px); }
  to   { opacity:1; transform:none; }
}
.site-header .logo-mark { animation:logoMarkIn .62s var(--ease-spring) backwards; }
.site-header .logo-word { animation:logoWordIn .5s var(--ease-out) .14s backwards; }

/* Hover is desktop-only — on touch it would fire on tap and read as a glitch. */
@media (hover:hover) and (pointer:fine) {
  .logo-mark, .logo-word { transition:transform var(--t-med) var(--ease-spring); }
  .logo:hover .logo-mark { transform:rotate(-9deg) scale(1.09); }
  .logo:hover .logo-word { transform:translateX(2px); }
}

.nav { display:flex; gap:2px; flex:1; min-width:0; }
.nav-link {
  position:relative; color:var(--ink-600); font-size:14px; font-weight:500;
  padding:9px 13px; border-radius:var(--r-sm); display:inline-flex; align-items:center;
  transition:color var(--t-fast) ease, background var(--t-fast) ease;
}
.nav-link::after {
  content:''; position:absolute; left:13px; right:13px; bottom:4px; height:2px; border-radius:2px;
  background:var(--blue-600); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-med) var(--ease-out);
}
.nav-link:hover { color:var(--ink-900); background:var(--surface-2); }
.nav-link:hover::after { transform:scaleX(1); }

.header-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }

.scroll-progress {
  position:absolute; left:0; bottom:-1px; height:2px; width:0;
  background:linear-gradient(90deg,var(--blue-500),var(--cyan-500));
  transition:width .1s linear;
}

/* Mobile nav */
.nav-toggle { display:none; width:42px; height:42px; border:1px solid var(--line); background:var(--surface);
  border-radius:var(--r-sm); flex-direction:column; justify-content:center; align-items:center; gap:4px; cursor:pointer; }
.nav-toggle span { display:block; width:17px; height:1.8px; background:var(--ink-800); border-radius:2px;
  transition:transform var(--t-med) var(--ease-out), opacity var(--t-fast) ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(5.8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-5.8px) rotate(-45deg); }

.mobile-nav {
  display:flex; flex-direction:column; gap:2px;
  padding:10px var(--pad-x) 20px; border-top:1px solid var(--line); background:rgba(255,255,255,.96);
  animation:slideDown var(--t-med) var(--ease-out);
}
.mobile-nav a { padding:13px 4px; font-size:15px; font-weight:500; color:var(--ink-700); border-bottom:1px solid var(--line); }
.mobile-nav .btn { margin-top:14px; }
@keyframes slideDown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }

/* ------------------------------------------------------------------ HERO -- */
.hero { position:relative; padding-top:clamp(44px,6vw,80px); padding-bottom:clamp(40px,5vw,64px);
  border-bottom:1px solid var(--line); background:linear-gradient(180deg,rgba(248,250,252,.7),rgba(255,255,255,0) 60%); }
.hero-grid {
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(36px,5vw,72px); align-items:center;
}
.hero-copy { max-width:600px; }

.pill {
  display:inline-flex; align-items:center; gap:9px;
  background:linear-gradient(120deg,var(--cyan-50),#fff); color:#0E7490;
  border:1px solid #A5F3FC; border-radius:var(--r-pill);
  padding:7px 15px 7px 12px; font-size:12.5px; font-weight:600; margin-bottom:24px;
  box-shadow:var(--sh-xs);
}
.pill-dot { width:7px; height:7px; border-radius:50%; background:var(--cyan-500); position:relative; }
.pill-dot::after { content:''; position:absolute; inset:0; border-radius:50%; background:var(--cyan-500);
  animation:ping 2.2s var(--ease-out) infinite; }
@keyframes ping { 0%{transform:scale(1);opacity:.75} 70%,100%{transform:scale(3);opacity:0} }

.hero-title { font-size:clamp(38px,5.4vw,62px); font-weight:800; letter-spacing:-.035em; line-height:1.04; margin-bottom:22px; }
.hero-title .line { display:block; }
.grad {
  font-style:normal;
  background:linear-gradient(100deg,var(--blue-600) 0%,var(--cyan-500) 55%,var(--blue-500) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradShift 7s ease-in-out infinite;
}
@keyframes gradShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

.hero-sub { font-size:clamp(16px,1.5vw,18.5px); line-height:1.62; color:var(--ink-600); max-width:540px; margin-bottom:32px; text-wrap:pretty; }
.hero-cta { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:40px; }

.stats { display:flex; gap:clamp(22px,4vw,48px); flex-wrap:wrap; margin:0; }
.stat dd { margin:0; font-size:13px; color:var(--ink-500); font-weight:500; }
.stat-num { font-size:28px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  background:linear-gradient(160deg,var(--ink-900),var(--ink-600)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Hero visual */
.hero-visual { position:relative; perspective:1400px; }

/* Clinic photograph — anchored right, the schedule card overlaps its lower-left */
.hero-photo {
  position:relative; margin:0 0 0 auto; width:min(100%,450px);
  aspect-ratio:4/5; border-radius:24px; overflow:hidden;
  box-shadow:var(--sh-xl);
  transform:translateZ(0) rotate(1deg);
  transition:transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out);
}
.hero-photo img { width:100%; height:100%; object-fit:cover; object-position:62% 30%;
  transform:scale(1.02); transition:transform 1.1s var(--ease-out); }
.hero-visual:hover .hero-photo { transform:rotate(0deg) translateY(-6px);
  box-shadow:0 12px 32px rgba(15,23,42,.1), 0 56px 96px -40px rgba(15,23,42,.34); }
.hero-visual:hover .hero-photo img { transform:scale(1.07); }
/* Cools the photo toward the brand blue and darkens the lower-left so the
   white schedule card keeps its contrast where the two overlap. */
.photo-tint { position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(215deg, rgba(37,99,235,.10) 0%, transparent 42%),
    linear-gradient(20deg, rgba(15,23,42,.42) 0%, rgba(15,23,42,.06) 46%, transparent 68%);
}

/* Mobile-first: the card is stacked below the photo on a light background,
   so it stays fully opaque here. Glass treatment is added from 621px up,
   where it actually sits on top of the photograph. */
.app-card {
  position:absolute; left:-96px; bottom:-30px; z-index:2; width:min(78%,344px);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--sh-xl); overflow:hidden;
  transition:transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out),
             background var(--t-med) ease;
  animation:floatCard 7s ease-in-out infinite;
}
.hero-visual:hover .app-card { animation-play-state:paused; transform:translateY(-10px) scale(1.015);
  box-shadow:0 12px 32px rgba(15,23,42,.12), 0 56px 96px -40px rgba(15,23,42,.4); }
@keyframes floatCard {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-12px); }
}

/* ── Glass schedule card (tablet + desktop only) ────────────────────────────
   The card overlaps the photograph at these widths, so it goes translucent and
   frosted to let the image read through. Inner rows have to lose their solid
   white too, or the effect stops at the card's outer edge. Opacity climbs on
   hover so the data is fully legible the moment anyone looks at it.          */
@media (min-width:621px) {
  .app-card {
    background:rgba(255,255,255,.66);
    -webkit-backdrop-filter:blur(22px) saturate(180%);
    backdrop-filter:blur(22px) saturate(180%);
    border-color:rgba(255,255,255,.6);
    box-shadow:0 8px 24px rgba(15,23,42,.10), 0 40px 80px -32px rgba(15,23,42,.34),
               inset 0 1px 0 rgba(255,255,255,.6);
  }
  .app-chrome { background:linear-gradient(180deg,rgba(248,250,252,.72),rgba(238,242,247,.6));
    border-bottom-color:rgba(226,232,240,.7); }
  .app-url { background:rgba(255,255,255,.7); border-color:rgba(226,232,240,.8); }
  .appt   { background:rgba(255,255,255,.5); border-color:rgba(226,232,240,.8); }
  .claims { background:rgba(248,250,252,.54); }

  .hero-visual:hover .app-card { background:rgba(255,255,255,.93); }
  .hero-visual:hover .appt   { background:rgba(255,255,255,.9); }
  .hero-visual:hover .claims { background:rgba(248,250,252,.92); }
}
/* No backdrop-filter support — fall back to a more opaque card so the
   schedule text never sits directly on a busy photograph. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  @media (min-width:621px) {
    .app-card { background:rgba(255,255,255,.94); }
    .appt     { background:rgba(255,255,255,.9); }
  }
}

.app-chrome { height:42px; background:linear-gradient(180deg,#F8FAFC,#EEF2F7); border-bottom:1px solid var(--line);
  display:flex; align-items:center; padding:0 15px; gap:7px; }
.app-chrome .dot { width:9px; height:9px; border-radius:50%; background:var(--line-strong); }
.app-url { margin-left:12px; font-size:11.5px; color:var(--ink-400); font-weight:500;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-pill); padding:3px 12px; }

.app-body { padding:16px; display:grid; gap:10px; }
.app-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.app-title { font-size:14px; font-weight:700; }

.tag { border-radius:var(--r-pill); padding:5px 11px; font-size:11px; font-weight:600; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px; }
.tag--green { background:var(--green-50); color:var(--green-700); }
.tag--blue  { background:var(--blue-50);  color:var(--blue-600); }
.tag--amber { background:var(--orange-50);color:var(--orange-700); }
.tag--slate { background:var(--surface-3);color:var(--ink-500); }
.tag-pulse { width:6px; height:6px; border-radius:50%; background:var(--green-500); animation:blink 1.8s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

.appt-list { display:grid; gap:9px; }
.appt {
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--line); border-radius:var(--r-md); padding:11px 12px;
  background:var(--surface);
  transition:transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), border-color var(--t-med) ease;
}
.appt:hover { transform:translateX(4px); border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow:var(--sh-sm); }
.appt-bar { width:4px; height:38px; border-radius:var(--r-pill); background:var(--accent); flex:0 0 4px; }
.appt-meta { flex:1; min-width:0; display:grid; gap:2px; }
.appt-name { font-size:13px; font-weight:600; }
.appt-time { font-size:12px; color:var(--ink-500); }

.claims { background:var(--surface-2); border-radius:var(--r-md); padding:13px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:12px; color:var(--ink-600); font-weight:500; }
.claims b { font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--ink-900); }

.float-chip {
  position:absolute; z-index:3; display:flex; align-items:center; gap:11px;
  background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:14px; padding:11px 15px;
  box-shadow:var(--sh-lg);
  animation:floatChip 5.5s ease-in-out infinite;
}
.float-chip--verify { right:-20px; top:38px; }
.float-chip strong { display:block; font-size:12.5px; font-weight:700; }
.float-chip span { font-size:11.5px; color:var(--ink-500); }
.check-ring { width:30px; height:30px; border-radius:50%; background:var(--green-50); color:var(--green-700);
  display:grid; place-items:center; flex:0 0 30px; }
.check-ring svg { width:17px; height:17px; }
@keyframes floatChip { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

/* Logo cloud */
.logo-cloud { margin-top:clamp(48px,6vw,76px); text-align:center; }
.logo-cloud-label { font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-400); margin-bottom:22px; }
.logo-row { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.logo-slot {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:150px; height:52px; padding:0 20px;
  border:1px dashed var(--line-strong); border-radius:var(--r-md);
  background:var(--surface); color:var(--ink-400);
  font-size:13.5px; font-weight:700; letter-spacing:-.01em;
  filter:grayscale(1); opacity:.72;
  transition:opacity var(--t-med) ease, filter var(--t-med) ease, transform var(--t-med) var(--ease-out), border-color var(--t-med) ease, color var(--t-med) ease;
}
.logo-slot:hover { opacity:1; filter:none; transform:translateY(-3px); border-color:var(--blue-500); color:var(--ink-700); }

/* -------------------------------------------------------------- SECTIONS -- */
.section-head { max-width:660px; margin-bottom:clamp(32px,4vw,48px); }
.eyebrow { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-500); margin-bottom:14px; }
.eyebrow--blue { color:var(--blue-600); }
.eyebrow--orange { color:var(--orange-700); }
.eyebrow--cyan { color:#0E7490; }
.eyebrow--center { display:block; text-align:center; margin-bottom:24px; }
.section-title { font-size:clamp(28px,3.4vw,40px); font-weight:800; letter-spacing:-.032em; margin-bottom:14px; }
.section-sub { font-size:16.5px; color:var(--ink-500); text-wrap:pretty; }

/* Cards */
.card {
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  transition:transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), border-color var(--t-med) ease;
}
.card::before {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), color-mix(in srgb, var(--tint,#3B82F6) 12%, transparent), transparent 62%);
  opacity:0; transition:opacity var(--t-med) ease;
}
.card:hover { transform:translateY(-5px); border-color:color-mix(in srgb, var(--tint,#3B82F6) 32%, var(--line)); box-shadow:var(--sh-lg); }
.card:hover::before { opacity:1; }

.feature-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr)); gap:20px; }
.feature { padding:28px; }
.feature-icon {
  width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
  background:var(--tint-bg,#EFF6FF); color:var(--tint,#3B82F6); margin-bottom:18px;
  transition:transform var(--t-med) var(--ease-spring), box-shadow var(--t-med) var(--ease-out);
}
.feature-icon svg { width:21px; height:21px; }
.feature:hover .feature-icon { transform:scale(1.1) rotate(-6deg); box-shadow:0 8px 20px -8px color-mix(in srgb, var(--tint) 60%, transparent); }
.feature h3 { font-size:17.5px; font-weight:700; margin-bottom:9px; }
.feature p { font-size:14.5px; line-height:1.62; color:var(--ink-600); }

/* Video block */
.video-block { margin-top:clamp(36px,5vw,64px); max-width:1000px; margin-inline:auto; }
.video-frame {
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--sh-lg);
  background:linear-gradient(150deg,#0F172A,#1E293B 55%,#0B2545);
  aspect-ratio:16/9;
}
.video-grid { position:absolute; inset:0; opacity:.22;
  background-image:linear-gradient(rgba(148,163,184,.25) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(148,163,184,.25) 1px,transparent 1px);
  background-size:52px 52px; mask-image:radial-gradient(ellipse at center,#000,transparent 75%); }
.video-poster { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:20px; z-index:2; }
.play-btn {
  width:78px; height:78px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.94); color:var(--ink-900); display:grid; place-items:center;
  box-shadow:0 12px 40px rgba(0,0,0,.4);
  transition:transform var(--t-med) var(--ease-spring), background var(--t-fast) ease;
}
.play-btn svg { width:30px; height:30px; margin-left:3px; }
.play-btn::before { content:''; position:absolute; width:78px; height:78px; border-radius:50%;
  border:2px solid rgba(255,255,255,.5); animation:ping 2.6s var(--ease-out) infinite; }
.play-btn:hover { transform:scale(1.09); background:#fff; }
.video-meta { text-align:center; color:#fff; display:grid; gap:5px; }
.video-meta strong { font-size:19px; font-weight:700; letter-spacing:-.02em; }
.video-meta span { font-size:13px; color:var(--ink-400); }

/* Audience cards */
.audience-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:clamp(20px,3vw,32px); }
.audience { padding:clamp(28px,3vw,38px); }
.audience h3 { font-size:clamp(22px,2.4vw,27px); margin-bottom:13px; }
.audience-lede { font-size:15px; line-height:1.62; color:var(--ink-600); margin-bottom:24px; }
.ticks { display:grid; gap:13px; margin-bottom:28px; }
.ticks li { position:relative; padding-left:30px; font-size:14.5px; color:var(--ink-700); }
.ticks li::before {
  content:''; position:absolute; left:0; top:2px; width:19px; height:19px; border-radius:7px;
  background:var(--tick-bg,#F0FDF4);
}
.ticks li::after {
  content:''; position:absolute; left:5.5px; top:7.5px; width:8px; height:5px;
  border-left:2px solid var(--tick,#22C55E); border-bottom:2px solid var(--tick,#22C55E);
  transform:rotate(-45deg);
}
.ticks--green { --tick:#22C55E; --tick-bg:#F0FDF4; }
.ticks--orange { --tick:#EA580C; --tick-bg:#FFF7ED; }
.ticks--cyan { --tick:#0891B2; --tick-bg:#ECFEFF; }

/* Highlighted audience card — the dentist/portable-profile pitch */
.audience--feature { border-color:var(--orange-400); box-shadow:var(--sh-md); }
.audience-flag {
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  background:var(--orange-50); color:var(--orange-700); border:1px solid #FED7AA;
  border-radius:var(--r-pill); padding:5px 11px; font-size:11.5px; font-weight:700;
  letter-spacing:.02em; text-transform:uppercase; margin-bottom:14px;
}
.audience-flag svg { width:13px; height:13px; }
.audience:nth-child(1) { --tint:#3B82F6; }
.audience:nth-child(2) { --tint:#FF7A59; }

/* Proof */
.proof { text-align:center; }
.badges { display:flex; gap:11px; flex-wrap:wrap; justify-content:center; margin-bottom:44px; }
.badge {
  background:var(--surface); border:1px solid var(--line); color:var(--ink-500);
  border-radius:var(--r-pill); padding:9px 19px; font-size:13px; font-weight:600;
  transition:transform var(--t-med) var(--ease-out), color var(--t-fast) ease, border-color var(--t-fast) ease, box-shadow var(--t-med) ease;
}
.badge:hover { transform:translateY(-3px); color:var(--ink-900); border-color:var(--line-strong); box-shadow:var(--sh-sm); }

/* Clinical ambassador — stacked and centred on mobile, side by side from 621px */
.ambassador {
  max-width:780px; margin:0 auto; text-align:center;
  display:grid; justify-items:center; gap:22px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(26px,3.5vw,36px);
  box-shadow:var(--sh-sm);
  transition:transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.ambassador:hover { transform:translateY(-3px); box-shadow:var(--sh-lg); }
.amb-portrait {
  margin:0; width:clamp(92px,13vw,116px); aspect-ratio:1;
  border-radius:20px; overflow:hidden; box-shadow:var(--sh-md);
}
.amb-portrait img { width:100%; height:100%; object-fit:cover; object-position:50% 45%;
  transition:transform var(--t-slow) var(--ease-out); }
.ambassador:hover .amb-portrait img { transform:scale(1.06); }
.amb-body h3 { font-size:clamp(20px,2.3vw,25px); font-weight:700; margin-bottom:12px; }
.amb-body p { font-size:15.5px; line-height:1.65; color:var(--ink-600); text-wrap:pretty; }
.amb-body strong { color:var(--ink-900); font-weight:700; }

@media (min-width:621px) {
  .ambassador { grid-template-columns:auto 1fr; justify-items:start;
    text-align:left; gap:clamp(24px,3.5vw,38px); align-items:center; }
}

/* CTA band */
.cta-band { position:relative; background:linear-gradient(135deg,#0B1220,#0F172A 45%,#132A4A); color:#fff; overflow:hidden; }
.cta-inner { position:relative; z-index:2; padding-block:clamp(52px,7vw,84px);
  display:flex; gap:30px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.cta-inner h2 { font-size:clamp(25px,3vw,35px); font-weight:800; letter-spacing:-.03em; margin-bottom:12px; max-width:600px; }
.cta-inner p { font-size:16px; line-height:1.6; color:var(--ink-400); max-width:540px; }
.cta-glow { position:absolute; width:640px; height:640px; border-radius:50%; top:-58%; right:-8%;
  background:radial-gradient(circle,rgba(37,99,235,.42),transparent 66%); filter:blur(14px);
  animation:drift 20s var(--ease-out) infinite alternate; }

/* Footer */
.site-footer { border-top:1px solid var(--line); background:var(--surface); }
.footer-inner { padding-block:38px; display:flex; gap:24px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.footer-links { display:flex; gap:22px; flex-wrap:wrap; }
.footer-links a { font-size:13.5px; color:var(--ink-500); font-weight:500; position:relative; }
.footer-links a::after { content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left; transition:transform var(--t-med) var(--ease-out); }
.footer-links a:hover { color:var(--ink-900); }
.footer-links a:hover::after { transform:scaleX(1); }
.copyright { font-size:13.5px; color:var(--ink-500); }

/* ----------------------------------------------------------------- MODAL -- */
.modal-root { position:fixed; inset:0; z-index:100; display:flex; align-items:flex-start; justify-content:center;
  padding:clamp(16px,5vh,56px) 16px; overflow-y:auto; }
.modal-backdrop { position:fixed; inset:0; background:rgba(15,23,42,.55);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity var(--t-med) ease; }
/* The panel carries a role accent as custom properties, and every tinted
   surface inside it — picker, focus ring, note, submit button, success mark —
   reads from these rather than hard-coding a colour. Switching role retints
   the whole dialog in one transition, and adding a fourth role is four lines. */
.modal-panel {
  --role-500:var(--blue-500); --role-600:var(--blue-600); --role-700:var(--blue-700);
  --role-50:var(--blue-50);   --role-100:var(--blue-100);
  --role-ring:rgba(59,130,246,.17);
  --role-glow:rgba(37,99,235,.34);

  position:relative; width:100%; max-width:588px;
  background:var(--surface); border-radius:24px;
  box-shadow:0 2px 8px rgba(15,23,42,.06), 0 32px 64px -24px rgba(15,23,42,.32),
             0 0 0 1px rgba(15,23,42,.05);
  overflow:hidden;
  opacity:0; transform:translateY(24px) scale(.96);
  transition:opacity var(--t-med) var(--ease-out), transform .42s var(--ease-spring);
}
.modal-panel[data-role="dentist"] {
  --role-500:var(--orange-400); --role-600:var(--orange-700); --role-700:var(--orange-800);
  --role-50:var(--orange-50);   --role-100:#FFEDD5;
  --role-ring:rgba(255,122,89,.2); --role-glow:rgba(194,65,12,.34);
}
.modal-panel[data-role="clinic"] {
  --role-500:var(--cyan-500); --role-600:#0E7490; --role-700:#155E75;
  --role-50:var(--cyan-50);   --role-100:#CFFAFE;
  --role-ring:rgba(0,180,198,.2); --role-glow:rgba(14,116,144,.34);
}

/* Role-tinted wash behind the header. Sits under the content, never over it. */
.modal-panel::before {
  content:''; position:absolute; inset:0 0 auto; height:190px; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 100% at 12% 0%, var(--role-50) 0%, transparent 72%),
    linear-gradient(180deg, var(--role-50) 0%, transparent 100%);
  opacity:.9; transition:background var(--t-med) ease;
}
.modal-root.is-open .modal-backdrop { opacity:1; }
.modal-root.is-open .modal-panel { opacity:1; transform:none; }
body.modal-open { overflow:hidden; }

.modal-head { position:relative; z-index:1; padding:28px 28px 0;
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.modal-eyebrow {
  display:inline-flex; align-items:center; gap:7px; margin-bottom:11px;
  font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--role-600); transition:color var(--t-med) ease;
}
.modal-eyebrow svg { width:14px; height:14px; }
.modal-head h3 { font-size:23.5px; font-weight:800; letter-spacing:-.03em; margin-bottom:7px; }
.modal-head p { font-size:14px; color:var(--ink-600); line-height:1.55;
  transition:opacity var(--t-fast) ease; }
.modal-close { width:42px; height:42px; flex:0 0 42px; border:none; border-radius:13px;
  background:rgba(255,255,255,.72); color:var(--ink-500); cursor:pointer; display:grid; place-items:center;
  box-shadow:0 1px 2px rgba(15,23,42,.06), inset 0 0 0 1px rgba(15,23,42,.06);
  transition:background var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-med) var(--ease-spring); }
.modal-close svg { width:19px; height:19px; }
.modal-close:hover { background:#fff; color:var(--ink-900); transform:rotate(90deg); }

.modal-view { position:relative; z-index:1; padding:24px 28px 30px; }

.picker-label {
  display:block; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-500); margin-bottom:10px;
}
.role-picker { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:22px; }
.role-btn {
  position:relative; text-align:left; cursor:pointer; overflow:hidden;
  border:1.5px solid var(--line); background:var(--surface);
  border-radius:15px; padding:13px 12px 12px; min-height:44px;
  display:grid; gap:2px; justify-items:start;
  transition:border-color var(--t-fast) ease, background var(--t-fast) ease,
             transform var(--t-med) var(--ease-out), box-shadow var(--t-med) ease;
}
.role-ico {
  width:30px; height:30px; border-radius:9px; margin-bottom:7px;
  display:grid; place-items:center;
  background:var(--surface-3); color:var(--ink-500);
  transition:background var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-med) var(--ease-spring);
}
.role-ico svg { width:16px; height:16px; }
.role-btn:hover { transform:translateY(-2px); box-shadow:var(--sh-sm); border-color:var(--line-strong); }
.role-btn:hover .role-ico { transform:scale(1.06); }
.role-title { font-size:13.5px; font-weight:700; color:var(--ink-900); line-height:1.25; }
.role-sub { font-size:11.5px; color:var(--ink-500); line-height:1.35; }

/* Active state is driven by the role tokens, so it stays in step with the
   rest of the dialog instead of needing a rule per role. */
.role-btn.is-active {
  background:var(--role-50); border-color:var(--role-500);
  box-shadow:0 0 0 3.5px var(--role-ring);
}
.role-btn.is-active .role-title { color:var(--role-600); }
.role-btn.is-active .role-sub { color:var(--role-600); opacity:.78; }
.role-btn.is-active .role-ico { background:var(--role-500); color:#fff; }
/* Tick in the corner — the selected card should read as chosen, not just tinted */
.role-btn::after {
  content:''; position:absolute; top:11px; right:11px; width:15px; height:15px; border-radius:50%;
  background:var(--role-500) no-repeat center/9px 9px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.4 2.4L9.5 4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity:0; transform:scale(.4); transition:opacity var(--t-fast) ease, transform var(--t-med) var(--ease-spring);
}
.role-btn.is-active::after { opacity:1; transform:scale(1); }

/* Portable-profile note inside the modal — only shown for the dentist role */
.role-note {
  display:flex; gap:11px; align-items:flex-start;
  background:linear-gradient(180deg, var(--role-50), rgba(255,255,255,0));
  border:1px solid var(--role-100); border-radius:14px;
  padding:13px 15px; margin:-4px 0 20px;
  font-size:13px; line-height:1.55; color:var(--role-700);
}
.role-note svg { width:17px; height:17px; flex:none; margin-top:1.5px; color:var(--role-500); }
.role-note b { font-weight:700; }

.field-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
  gap:14px; margin-bottom:16px; }

/* align-content:start is load-bearing. A .field is a grid whose rows are auto,
   so when it gets stretched to match a taller sibling in the row, the spare
   height is handed to the rows — silently making one input taller than its
   neighbour and pushing it out of line. Pinning the content to the top means a
   field can be stretched without its control changing size or position.
   (The original misalignment came from `.field:last-of-type` adding a 20px
   bottom margin: `:last-of-type` matches the last *div* among siblings, which
   inside a .field-row is the right-hand field, not the notes field it was
   written for. Spacing is now set on the containers instead.) */
.field { display:grid; gap:7px; align-content:start; margin-bottom:0; }
.field--single { margin-bottom:20px; }

.field label { font-size:13px; font-weight:600; color:var(--ink-700); }
.optional { color:var(--ink-400); font-weight:500; }
.field input, .field textarea, .field select {
  width:100%; border:1.5px solid var(--line); border-radius:12px;
  padding:12px 14px; font-size:15px; color:var(--ink-900); background:var(--surface-2);
  min-height:48px; font-family:inherit;
  transition:border-color var(--t-fast) ease, box-shadow var(--t-fast) ease, background var(--t-fast) ease;
}
.field textarea { resize:vertical; line-height:1.55; min-height:92px; }
.field input::placeholder, .field textarea::placeholder { color:var(--ink-400); }
.field input:hover, .field textarea:hover, .field select:hover {
  border-color:var(--line-strong); background:var(--surface); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline:none; border-color:var(--role-500); box-shadow:0 0 0 4px var(--role-ring); background:#fff;
}
.field.has-error input, .field.has-error textarea { border-color:#EF4444; background:#FEF2F2; }
.field.has-error input:focus { box-shadow:0 0 0 4px rgba(239,68,68,.15); }
.field-error { font-size:12px; color:#DC2626; min-height:0; display:none; }
.field.has-error .field-error { display:flex; align-items:center; gap:5px; }
.field.has-error .field-error::before {
  content:''; width:13px; height:13px; flex:none; border-radius:50%;
  background:#DC2626 no-repeat center/13px 13px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 3v3.4M6 8.6v.2' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Submit block — the button carries the role colour, so the last thing the
   visitor looks at matches the audience they picked. */
.modal-submit {
  --btn-bg:var(--role-600); --btn-fg:#fff;
  box-shadow:0 1px 2px var(--role-glow), 0 10px 24px -10px var(--role-glow);
  transition:background var(--t-med) ease, box-shadow var(--t-med) ease,
             transform var(--t-med) var(--ease-out);
}
.modal-submit:hover { --btn-bg:var(--role-700); color:#fff; transform:translateY(-2px);
  box-shadow:0 2px 6px var(--role-glow), 0 20px 38px -12px var(--role-glow); }
.modal-submit:disabled { cursor:default; transform:none; }

.modal-trust {
  display:flex; flex-wrap:wrap; justify-content:center; gap:7px 18px; margin-top:16px;
  font-size:12px; color:var(--ink-500);
}
.modal-trust span { display:inline-flex; align-items:center; gap:6px; }
.modal-trust svg { width:13px; height:13px; color:var(--green-500); }

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.hp-field {
  position:absolute; left:-9999px; top:auto; width:1px; height:1px;
  overflow:hidden; opacity:0; pointer-events:none;
}

.select-wrap { position:relative; }
.select-wrap select { appearance:none; -webkit-appearance:none; padding-right:40px; cursor:pointer; }
.select-chevron { position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--ink-500); pointer-events:none; }

.fineprint { font-size:12px; color:var(--ink-500); margin-top:12px; text-align:center; line-height:1.55; }

.modal-success { text-align:center; padding:44px 30px 38px; }
.success-ring { width:68px; height:68px; border-radius:50%;
  background:var(--role-50); color:var(--role-600);
  box-shadow:0 0 0 8px var(--role-ring);
  display:grid; place-items:center; margin:0 auto 22px; animation:popIn .5s var(--ease-spring) both; }
.success-ring svg { width:32px; height:32px; }
.success-check { stroke-dasharray:34; stroke-dashoffset:34; animation:drawCheck .5s var(--ease-out) .2s forwards; }
@keyframes drawCheck { to { stroke-dashoffset:0; } }
@keyframes popIn { from { transform:scale(.5); opacity:0; } to { transform:scale(1); opacity:1; } }
.modal-success h4 { font-size:20px; font-weight:800; letter-spacing:-.025em; margin-bottom:9px; }
.modal-success p { font-size:14.5px; color:var(--ink-600); line-height:1.62; max-width:390px; margin:0 auto 26px; }

/* ---------------------------------------------------------------- MOTION -- */
[data-reveal] { opacity:0; transform:translateY(22px); }
[data-reveal].is-in { opacity:1; transform:none;
  transition:opacity .75s var(--ease-out), transform .75s var(--ease-out);
  transition-delay:var(--d,0ms); }

.magnetic { will-change:transform; }

/* ------------------------------------------------------------ RESPONSIVE -- */
@media (max-width:1020px) {
  .hero-grid { grid-template-columns:1fr; }
  .hero-copy { max-width:none; }
  .hero-visual { max-width:600px; margin-inline:auto; width:100%; }
  .hero-photo { width:min(66%,400px); }
  .app-card { animation:none; left:0; width:min(58%,344px); bottom:-18px; }
  .hero-visual:hover .app-card { transform:translateY(-4px) scale(1); }
  .float-chip--verify { right:0; top:26px; }
}
@media (max-width:860px) {
  .nav { display:none; }
  .nav-toggle { display:flex; }
  .header-actions .btn--ghost { display:none; }
  /* Nav is gone, so nothing is pushing the actions over — send them to the end
     so the burger sits flush against the right edge. */
  .header-actions { margin-left:auto; }
  .cta-inner { flex-direction:column; align-items:flex-start; }
  .cta-inner .btn { width:100%; }
}
@media (max-width:620px) {
  .header-actions .btn--sm { padding:9px 13px; }
  /* Chip would sit on top of the claims row at this width — drop it */
  .float-chip { display:none; }
  .hero-cta { flex-direction:column; align-items:stretch; }
  .hero-cta .btn { width:100%; }
  /* Photo goes full width and the card sits under it, overlapping slightly,
     rather than covering the clinician's face. */
  .hero-photo { width:100%; aspect-ratio:1/1; transform:none; }
  /* Stacked, not overlapping — an overlap here just clips the card's chrome bar */
  .app-card { position:static; width:100%; margin:16px 0 0; }
  .hero-visual:hover .hero-photo { transform:none; }
  /* One per row, but laid out horizontally — three stacked icon-above-text
     cards would push the first input below the fold on a phone. */
  .role-picker { grid-template-columns:1fr; gap:8px; }
  .role-btn { grid-template-columns:auto 1fr; align-items:center; column-gap:12px; padding:11px 12px; }
  .role-ico { margin-bottom:0; grid-row:span 2; }
  .role-title { align-self:end; }
  .role-sub { align-self:start; }
  .role-btn::after { top:50%; margin-top:-7.5px; }
  .modal-head { padding:24px 20px 0; }
  .modal-view { padding:20px 20px 26px; }
  .modal-success { padding:38px 22px 32px; }
  .stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  .stat-num { font-size:23px; }
  .stat dd { font-size:12px; line-height:1.4; }
  .footer-inner { flex-direction:column; align-items:flex-start; gap:18px; }
  .play-btn { width:62px; height:62px; }
  .play-btn::before { width:62px; height:62px; }
  .play-btn svg { width:24px; height:24px; }
}

/* ------------------------------------------------- REDUCED MOTION / PRINT -- */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  [data-reveal] { opacity:1 !important; transform:none !important; }
  .app-card { transform:none !important; }
}