/* =====================================================================
   Helix Health Onboarding Portal — Stylesheet
   A clean, Sana-inspired design system: black typography on white,
   a single warm accent, generous whitespace, and quiet animations.
===================================================================== */

:root {
  --bg:            #ffffff;
  --bg-soft:       #f7f7f5;
  --bg-muted:      #f0efec;
  --ink:           #0a0a0a;
  --ink-soft:      #1a1a1a;
  --ink-muted:     #5a5a5a;
  --ink-subtle:    #8a8a88;
  --line:          #e7e6e2;
  --line-strong:   #d9d8d2;
  --accent:        #e4572e;   /* Helix warm red-orange */
  --accent-soft:   #fbe6de;
  --accent-ink:    #b0391a;
  --success:       #0f7a3b;
  --success-soft:  #e2f3e9;
  --warning:       #a26a00;
  --warning-soft:  #fcf0d6;
  --danger:        #b00020;
  --danger-soft:   #fde1e4;
  --info:          #0b5cad;
  --info-soft:     #e4efff;

  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-xl:  32px;

  --shadow-xs: 0 1px 2px rgba(10,10,10,0.04);
  --shadow-sm: 0 2px 6px rgba(10,10,10,0.06);
  --shadow-md: 0 10px 30px rgba(10,10,10,0.08);
  --shadow-lg: 0 30px 80px rgba(10,10,10,0.12);

  --ease:         cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);

  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Fraunces", "Inter", Georgia, serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html { scroll-behavior: smooth; }

a { color: inherit; text-decoration: none; }
button { font: inherit; }
img, svg { display: block; }

/* ------------------------------------------------------------------ */
/* Typography                                                           */
/* ------------------------------------------------------------------ */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.02;
}

.display-xl { font-size: clamp(44px, 7vw, 104px); }
.display-lg { font-size: clamp(36px, 5vw, 72px); }
.display-md { font-size: clamp(28px, 3.4vw, 48px); }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
}

.lead {
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--ink-muted);
  max-width: 62ch;
}

/* ------------------------------------------------------------------ */
/* Layout primitives                                                    */
/* ------------------------------------------------------------------ */

.container {
  width: min(1200px, 92vw);
  margin-inline: auto;
}

.container-wide {
  width: min(1440px, 94vw);
  margin-inline: auto;
}

.stack > * + * { margin-top: var(--stack, 16px); }

.row { display: flex; gap: 16px; align-items: center; }
.spacer { flex: 1; }

/* ------------------------------------------------------------------ */
/* Top navigation (shared)                                              */
/* ------------------------------------------------------------------ */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Solid-ish bar; blur lives on .nav-bg-blur so it does NOT trap
     position:fixed descendants (drawer/scrim) to this short header —
     Safari/Blink treat backdrop-filter like filter for fixed containing. */
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}

.nav.scrolled {
  border-bottom-color: var(--line);
  background: rgba(255, 255, 255, 0.96);
}

/* Frosted glass behind the bar only — siblings of .nav-inner stay
   viewport-fixed when using position:fixed (mobile drawer). */
.nav-bg-blur {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
.nav.scrolled .nav-bg-blur {
  background: rgba(255, 255, 255, 0.72);
}

.nav-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 18px;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--ink);
  display: grid;
  place-items: center;
  color: #fff;
  overflow: hidden;
  transition: transform 320ms var(--ease-out), background 320ms var(--ease-out);
}

.brand-mark svg { width: 20px; height: auto; }
.brand:hover .brand-mark { transform: rotate(-6deg) scale(1.04); }

.nav-links {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.nav-link {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14.5px;
  color: var(--ink-muted);
  transition: background 180ms var(--ease), color 180ms var(--ease);
  cursor: pointer;
}

.nav-link:hover { background: var(--bg-soft); color: var(--ink); }
.nav-link.active { background: var(--ink); color: #fff; }

/* Nav drawer wrapper. On desktop it dissolves with display:contents so
   its children (nav-links + button row) participate in nav-inner's flex
   layout exactly as before. On mobile (≤900px) it turns into a fixed
   side panel — see the responsive block at the bottom of this file. */
.nav-drawer { display: contents; }
.nav-drawer-head { display: none; }
.nav-actions { display: flex; align-items: center; gap: 16px; }

/* Hamburger toggle — hidden by default, revealed at ≤900px. */
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  margin-left: auto;
  position: relative;
  z-index: 65;
  transition: border-color 180ms var(--ease), background 180ms var(--ease),
              opacity 220ms var(--ease), transform 220ms var(--ease);
}
.nav-toggle:hover { background: var(--bg-soft); border-color: var(--line-strong); }
.nav-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.nav-toggle .ham-bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 240ms var(--ease), opacity 180ms var(--ease);
}
.nav-toggle[aria-expanded="true"] .ham-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .ham-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .ham-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Scrim sits behind the open drawer to dim the page and capture taps
   outside the menu. Must sit above page chrome (z-index:40) but below
   the drawer panel. */
.nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease);
  z-index: 10050;
}
.nav-scrim.open { opacity: 1; pointer-events: auto; }

body.nav-drawer-open { overflow: hidden; }

/* Lift the whole header subtree above in-page overlays (tooltips ~2000)
   while the mobile drawer is open — drawer/scrim z-index values are
   relative to this context. */
body.nav-drawer-open .nav {
  z-index: 10055;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                              */
/* ------------------------------------------------------------------ */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  --btn-border: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  cursor: pointer;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: transform 180ms var(--ease), background 180ms var(--ease),
              color 180ms var(--ease), border-color 180ms var(--ease),
              box-shadow 220ms var(--ease);
  white-space: nowrap;
}

.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; }

.btn.secondary {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-border: var(--line-strong);
}
.btn.secondary:hover { background: var(--bg-soft); border-color: var(--ink); }

.btn.ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink-muted);
  --btn-border: transparent;
  padding: 10px 14px;
}
.btn.ghost:hover { background: var(--bg-soft); color: var(--ink); box-shadow:none; transform:none; }

.btn.accent {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  --btn-border: var(--accent);
}

.btn.sm { padding: 8px 14px; font-size: 13.5px; }
.btn.lg { padding: 15px 26px; font-size: 16px; }

.icon-btn {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  cursor: pointer;
  color: var(--ink-muted);
  transition: all 160ms var(--ease);
}
.icon-btn:hover { color: var(--ink); background: var(--bg-soft); }

/* ------------------------------------------------------------------ */
/* Landing — Hero                                                        */
/* ------------------------------------------------------------------ */

.hero {
  padding: clamp(48px, 8vw, 120px) 0 clamp(48px, 7vw, 96px);
  position: relative;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: center;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
}

.hero h1 { margin: 16px 0 22px; }

.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-soft);
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 500;
}
.pill .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* Decorative hero art */
.hero-art {
  aspect-ratio: 1 / 1.05;
  max-width: 520px;
  width: 100%;
  position: relative;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(90% 60% at 10% 0%, #ffe2d6 0%, rgba(255,226,214,0) 60%),
    radial-gradient(80% 70% at 110% 100%, #f4efe8 0%, rgba(244,239,232,0) 60%),
    #faf8f5;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  justify-self: end;
}

.hero-art .badge-card {
  position: absolute;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
  animation: floatY 6s ease-in-out infinite;
}
.hero-art .badge-card .emoji { width:40px; height:40px; border-radius: 12px; display:grid; place-items:center; background: var(--bg-soft); }
.hero-art .badge-card.b1 { top: 8%; left: 8%; }
.hero-art .badge-card.b2 { top: 42%; right: 6%; animation-delay: -2s; }
.hero-art .badge-card.b3 { bottom: 8%; left: 12%; animation-delay: -4s; }
.hero-art .badge-card small { color: var(--ink-subtle); font-size: 12px; display: block; }
.hero-art .badge-card strong { font-size: 14px; }

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ------------------------------------------------------------------ */
/* Marquee of hospital names                                             */
/* ------------------------------------------------------------------ */

.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
  overflow: hidden;
}

.marquee-track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: slide 34s linear infinite;
  color: var(--ink-subtle);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.marquee-track span { font-size: 18px; }

@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ------------------------------------------------------------------ */
/* Section / cards                                                       */
/* ------------------------------------------------------------------ */

section { padding: clamp(56px, 8vw, 112px) 0; }

.section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: end;
  margin-bottom: 40px;
}
@media (max-width: 780px) { .section-head { grid-template-columns: 1fr; } }

/* Balanced variant: right column gets equal space, bigger type, vertically
   centered next to the headline. Used in "What you'll submit" and
   "Walkthrough" sections so the supporting paragraph doesn't look like it
   flows out of the end of the headline. */
.section-head.balanced {
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}
.section-head.balanced .lead {
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 44ch;
  margin: 0;
}
@media (max-width: 980px) {
  .section-head.balanced { grid-template-columns: 1fr; gap: 20px; }
  .section-head.balanced .lead { justify-self: start; font-size: 19px; }
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.feature-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out), border-color 320ms var(--ease-out);
  cursor: default;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}
.feature-card .ico {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--bg-soft); display:grid; place-items:center;
  margin-bottom: 18px;
  transition: background 240ms var(--ease);
}
.feature-card:hover .ico { background: var(--accent-soft); color: var(--accent-ink); }
.feature-card h3 { margin: 0 0 6px; font-size: 18px; letter-spacing: -0.01em; }
.feature-card p { margin: 0; color: var(--ink-muted); font-size: 14.5px; }

/* Steps */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.steps.steps-4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) {
  .steps.steps-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
  .steps.steps-4 { grid-template-columns: 1fr; }
}

.step {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 130%);
  position: relative;
  overflow: hidden;
}
.step .num {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1;
  color: var(--ink-subtle);
  opacity: 0.35;
  letter-spacing: -0.04em;
}
.step h3 { font-size: 22px; letter-spacing: -0.015em; margin: 12px 0 8px; }
.step p { color: var(--ink-muted); margin: 0; }

/* Video */
.video-wrap {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 16/9;
  background: #0a0a0a;
  box-shadow: var(--shadow-lg);
}
.video-wrap iframe { width: 100%; height: 100%; border: 0; }

.video-placeholder {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background:
    radial-gradient(50% 60% at 50% 40%, rgba(228,87,46,0.3), transparent 70%),
    linear-gradient(180deg, #1a1a1a, #0a0a0a);
  color: #fff;
  cursor: pointer;
}
.video-placeholder .play {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  display: grid; place-items: center;
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.video-placeholder:hover .play { transform: scale(1.06); box-shadow: 0 24px 70px rgba(0,0,0,0.45); }
.video-placeholder .caption {
  position: absolute; bottom: 28px; left: 32px; right: 32px;
  display: flex; justify-content: space-between; align-items: flex-end;
}
.video-placeholder .caption h4 { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2.4vw, 34px); margin:0; letter-spacing: -0.02em; }
.video-placeholder .caption small { opacity: 0.7; letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; }

/* CTA band */
.cta-band {
  padding: clamp(56px, 8vw, 120px) 0;
  background: var(--ink);
  color: #fff;
}
.cta-band h2 { font-family: var(--font-display); font-size: clamp(34px, 5vw, 64px); letter-spacing: -0.02em; margin: 0 0 16px; font-weight: 400; }
.cta-band p { color: rgba(255,255,255,0.72); max-width: 60ch; }
.cta-band .btn { --btn-bg: #fff; --btn-fg: var(--ink); --btn-border: #fff; }
.cta-band .btn.secondary { --btn-bg: transparent; --btn-fg: #fff; --btn-border: rgba(255,255,255,0.4); }

/* Footer */
.footer {
  padding: 48px 0 40px;
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 14px;
}
.footer-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px 24px;
  align-items: center;
}
.footer-inner > .spacer:first-of-type { grid-column: 2; grid-row: 1; min-width: 24px; }
.footer-inner > .spacer:last-of-type { display: none; }
.footer-inner > span:last-child { grid-column: 3; grid-row: 1; justify-self: end; }
.footer-privacy {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 4px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 72ch;
}
.footer-privacy p { margin: 0; }
.footer-privacy strong { color: var(--ink); font-weight: 600; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 18px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.skip-link:focus {
  position: fixed;
  left: 16px;
  top: 16px;
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.portal-privacy-foot {
  padding: 14px 28px 22px;
  font-size: 12px;
  color: var(--ink-muted);
  border-top: 1px solid var(--line);
  text-align: center;
  line-height: 1.5;
}

/* ------------------------------------------------------------------ */
/* Portal application shell                                              */
/* ------------------------------------------------------------------ */

.portal {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 75px);
  width: min(1440px, 94vw);
  margin-inline: auto;
}

.portal-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  flex: 1;
  align-items: stretch;
}

@media (max-width: 960px) {
  .portal-grid { grid-template-columns: 1fr; }
}

/* Horizontal step rail — Bloomberg-style segmented journey */
.portal-steps {
  display: flex;
  align-items: stretch;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
  position: sticky;
  top: 75px;
  z-index: 6;
}
.portal-step {
  appearance: none;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--ink-muted);
  transition: border-color 160ms var(--ease), background 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.portal-step:hover { border-color: var(--ink-subtle); color: var(--ink); }
.portal-step.active {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.portal-step .ps-num {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}
.portal-step.active .ps-num { opacity: 0.85; color: rgba(255,255,255,0.85); }
.portal-step .ps-label {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.portal-step .ps-meta {
  font-size: 11px;
  opacity: 0.78;
  font-variant-numeric: tabular-nums;
}
.portal-step.has-file:not(.active) { border-color: var(--success); }
.portal-step .ps-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--line);
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}
.portal-step.has-file .ps-dot { background: var(--success); }

.progress-ring .ring-sub {
  text-align: center;
  font-size: 12px;
  color: var(--ink-subtle);
  margin: -8px auto 0;
  max-width: 140px;
  line-height: 1.35;
}

@media (max-width: 960px) {
  .portal-steps {
    position: static;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: thin;
  }
  .portal-step { flex: 0 0 auto; min-width: 130px; }
}

.sidebar {
  border-right: 1px solid var(--line);
  padding: 28px 22px 40px;
  position: sticky;
  top: 75px;
  align-self: start;
  max-height: calc(100vh - 75px);
  overflow-y: auto;
  background: var(--bg-soft);
}

@media (max-width: 960px) {
  .sidebar { position: static; max-height: none; border-right: none; border-bottom: 1px solid var(--line); }
}

.sidebar h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--ink-subtle);
  margin: 0 0 10px;
}

.progress-ring {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 140px;
  margin: 4px auto 20px;
}
.progress-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.progress-ring .ring-bg { fill: none; stroke: var(--line); stroke-width: 8; }
.progress-ring .ring-fg { fill: none; stroke: var(--ink); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 560ms var(--ease-out); }
.progress-ring .ring-text {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 30px; color: var(--ink);
}

.tab-list { display: flex; flex-direction: column; gap: 4px; }
/* A fixed 4-column grid guarantees the ·icon· · title · · count · · check ·
   columns line up across every section row — including the Review row. */
.tab-btn {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 52px 20px;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  background: transparent;
  text-align: left;
  width: 100%;
  color: var(--ink-soft);
  transition: background 180ms var(--ease), border-color 180ms var(--ease), transform 160ms var(--ease);
}
.tab-btn:hover { background: var(--bg); border-color: var(--line); }
.tab-btn.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.tab-btn .t-ico {
  width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; background: var(--bg);
  border: 1px solid var(--line); color: var(--ink-muted);
  justify-self: center;
}
.tab-btn.active .t-ico { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.22); color: #fff; }
.tab-btn .t-label {
  font-weight: 500;
  font-size: 14.5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tab-btn .t-count {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  padding: 2px 0;
  min-width: 52px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink-subtle);
  border: 1px solid var(--line);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: center;
  justify-self: stretch;
}
.tab-btn.active .t-count { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.22); }
.tab-btn .t-check {
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg); border: 1px solid var(--line); color: transparent;
  justify-self: center;
}
.tab-btn.complete .t-check { background: var(--success); color: #fff; border-color: var(--success); }
.tab-btn.partial .t-check { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); }

.sidebar .rules {
  margin-top: 24px;
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--ink-muted);
}
.sidebar .rules ul { padding-left: 18px; margin: 10px 0 0; }
.sidebar .rules li + li { margin-top: 8px; }

/* Main workspace */
.workspace {
  padding: 40px clamp(24px, 4vw, 64px) 120px;
  max-width: 960px;
  width: 100%;
  margin-inline: auto;
  justify-self: center;
}

.workspace-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 24px;
  margin-bottom: 28px;
}
@media (max-width: 700px) { .workspace-header { grid-template-columns: 1fr; } }

.workspace-header h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4.2vw, 52px);
  letter-spacing: -0.02em;
  margin: 8px 0 12px;
}
.workspace-header p { margin: 0; max-width: 62ch; color: var(--ink-muted); }

/* File upload steps (Departments / Units / Staff / Roles / Patients) */
.upload-intro { margin: 0 0 20px; max-width: 68ch; color: var(--ink-muted); font-size: 15px; line-height: 1.55; }
.upload-col-guide-lead { margin: -6px 0 12px; max-width: 68ch; }
.upload-col-guide-hint { color: var(--ink-subtle); }
.upload-col-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.upload-col-chip {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  cursor: help;
}
.upload-col-chip:focus {
  outline: none;
}
.upload-col-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-color: var(--accent-soft);
}
.upload-col-chip.req { border-left: 3px solid #d9372d; }
.upload-col-chip.opt { border-left: 3px solid #3b72f6; }

.upload-dropzone {
  border: 2px dashed var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  text-align: center;
  background: var(--bg-soft);
  transition: border-color 200ms var(--ease), background 200ms var(--ease), transform 200ms var(--ease);
  cursor: pointer;
}
.upload-dropzone:hover,
.upload-dropzone:focus-visible {
  border-color: var(--ink-subtle);
  background: var(--bg);
  outline: none;
}
.upload-dropzone.drag { border-color: var(--ink); background: var(--bg); transform: scale(1.01); }
.upload-dropzone strong { display: block; font-size: 16px; margin-bottom: 6px; color: var(--ink); }
.upload-dropzone span { font-size: 13px; color: var(--ink-muted); }

.upload-panel {
  margin-top: 24px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-xs);
  animation: slideUp 260ms var(--ease-out);
}
.upload-panel.empty { display: none; }

.sidebar-files-heading {
  margin: 22px 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}
.sidebar-files-note {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.35;
}
.upload-step-btn .t-label { font-size: 12.5px; }

.dataset-nav {
  margin-top: 36px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
}
.dataset-nav-label {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--ink-muted);
}
.dataset-nav-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.dataset-nav-grid--uploads { margin-top: 4px; margin-bottom: 14px; }
.dataset-nav-all { margin-top: 4px; }
.upload-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.upload-panel-head strong { font-size: 15px; }
.upload-panel-meta { font-size: 13px; color: var(--ink-muted); margin: 4px 0 0; }
.upload-validation {
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 8px;
  margin-top: 12px;
}
.upload-validation.ok { background: var(--success-soft); color: var(--ink); }
.upload-validation.warn { background: var(--warning-soft); color: var(--ink); }
.upload-validation.bad { background: #fdecea; color: #8b2016; }
.upload-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.upload-sidebar-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg);
  font-size: 13.5px;
  color: var(--ink-muted);
  line-height: 1.45;
}
.upload-sidebar-lead { margin: 0; }

.save-indicator {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font-size: 13px;
  color: var(--ink-muted);
  min-height: 34px;
}
.save-indicator .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); transition: all 240ms var(--ease); }
.save-indicator[data-status="saving"] .status-dot { background: var(--warning); box-shadow: 0 0 0 4px var(--warning-soft); animation: pulse 1.2s infinite; }
.save-indicator[data-status="error"] .status-dot { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.3); opacity: 0.5; }
}

/* ------------------------------------------------------------------ */
/* Forms                                                                 */
/* ------------------------------------------------------------------ */

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 24px;
}
@media (max-width: 720px) { .field-grid { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }

.label-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--ink-soft);
  font-weight: 500;
}
.label-row .req { color: var(--accent); font-weight: 700; }
.label-row .opt {
  font-size: 11px;
  padding: 2px 7px;
  background: var(--info-soft);
  color: var(--info);
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--bg-muted);
  color: var(--ink-muted);
  cursor: help;
  transition: background 160ms var(--ease), color 160ms var(--ease);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-display);
}
.tooltip:hover,
.tooltip.open { background: var(--ink); color: #fff; }

/* Accessible copy of the tip is kept in the DOM for screen readers but
   hidden visually — the visible tooltip is a single floating element
   positioned dynamically by app.js to avoid viewport clipping. */
.tooltip .tip-body {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

/* Floating tooltip (one per page) */
#global-tooltip {
  position: fixed;
  top: 0; left: 0;
  background: var(--ink);
  color: #fff;
  padding: 13px 15px;
  border-radius: 12px;
  width: 300px;
  max-width: calc(100vw - 24px);
  font-family: var(--font-sans);
  font-size: 12.8px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px) scale(0.98);
  transition: opacity 160ms var(--ease), transform 200ms var(--ease-out);
  box-shadow: var(--shadow-lg);
  z-index: 2000;
}
#global-tooltip.visible { opacity: 1; transform: translateY(0) scale(1); }
#global-tooltip::after {
  content: "";
  position: absolute;
  left: var(--arrow-x, 50%);
  transform: translateX(-50%);
  border: 6px solid transparent;
}
#global-tooltip[data-placement="above"]::after { top: 100%;   border-top-color: var(--ink); }
#global-tooltip[data-placement="below"]::after { bottom: 100%; border-bottom-color: var(--ink); }
#global-tooltip .tip-label { display: block; font-weight: 600; margin-bottom: 6px; letter-spacing: 0.06em; text-transform: uppercase; font-size: 10.5px; color: rgba(255,255,255,0.55); }
#global-tooltip .tip-sep { height: 1px; background: rgba(255,255,255,0.12); margin: 10px 0; }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="date"], textarea, select {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--bg);
  font: inherit;
  color: var(--ink);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease);
}
textarea { resize: vertical; min-height: 90px; font-family: inherit; }
select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'><path fill='none' stroke='%230a0a0a' stroke-width='1.5' d='M1 1l5 5 5-5'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(10,10,10,0.08);
}

input.invalid, textarea.invalid, select.invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px var(--danger-soft);
}

.hint { font-size: 12.5px; color: var(--ink-subtle); }
.error { font-size: 12.5px; color: var(--danger); display: flex; align-items: center; gap: 6px; }
.error::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); }

/* -----------------------------------------------------------
   Phone input — flag + dial code trigger on the left, number on
   the right. The trigger opens a searchable country popover; the
   number input enforces a digits-only cap that matches the
   country's national significant length.
----------------------------------------------------------- */
.phone-intl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  overflow: hidden;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.phone-intl:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(10,10,10,0.08);
}
.phone-intl.invalid,
.phone-intl:has(input.invalid) {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px var(--danger-soft);
}

.phone-flag-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: var(--bg-soft);
  border: 0;
  border-right: 1px solid var(--line);
  cursor: pointer;
  color: var(--ink);
  font: inherit;
  font-variant-numeric: tabular-nums;
  transition: background 160ms var(--ease);
  min-height: 46px;
}
.phone-flag-btn:hover { background: var(--bg-muted); }
.phone-flag-btn:focus-visible { outline: none; background: var(--bg-muted); }
.phone-flag-btn[aria-expanded="true"] { background: var(--bg-muted); }
.phone-flag-btn .phone-flag {
  width: 22px; height: 16px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
.phone-flag-btn .phone-dial {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.phone-flag-btn .phone-chev {
  color: var(--ink-subtle);
}
.phone-intl input[type="tel"] {
  border: 0;
  border-radius: 0;
  background: transparent;
  width: 100%;
  padding: 12px 14px;
}
.phone-intl input[type="tel"]:focus {
  outline: none;
  box-shadow: none;
}
.phone-intl input.invalid {
  border: 0;
  box-shadow: none;
}

@media (max-width: 520px) {
  .phone-flag-btn { padding: 0 10px; gap: 6px; }
  .phone-flag-btn .phone-dial { font-size: 13px; }
}

/* Country picker popover (fixed-positioned by app.js) */
.country-popover {
  position: fixed;
  top: 0; left: 0;
  width: 320px;
  max-height: 360px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 2100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: popIn 160ms var(--ease-out);
}
@keyframes popIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.country-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}
.country-search .ico { color: var(--ink-subtle); display: inline-flex; }
.country-search input {
  border: 0;
  background: transparent;
  width: 100%;
  padding: 4px 0;
  font: inherit;
  color: var(--ink);
}
.country-search input:focus { outline: none; box-shadow: none; }

.country-list {
  overflow-y: auto;
  padding: 6px 0;
  flex: 1;
}
.country-group-label {
  padding: 10px 14px 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-subtle);
  font-weight: 600;
}
.country-group-sep {
  height: 1px;
  background: var(--line);
  margin: 8px 12px;
}
.country-opt {
  width: 100%;
  display: grid;
  grid-template-columns: 26px 1fr auto 16px;
  gap: 10px;
  align-items: center;
  padding: 9px 14px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  font: inherit;
  transition: background 120ms var(--ease);
}
.country-opt:hover,
.country-opt:focus { background: var(--bg-soft); outline: none; }
.country-opt.selected { background: var(--bg-soft); }
.country-opt .country-flag {
  width: 22px; height: 16px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
.country-opt .country-name {
  font-size: 14px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.country-opt .country-dial {
  font-size: 13px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.country-opt .country-check {
  color: var(--success);
  display: inline-flex;
}

/* -----------------------------------------------------------
   Yes / No segmented toggle
----------------------------------------------------------- */
.yesno {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 4px;
  background: var(--bg-soft);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  max-width: 220px;
  width: 100%;
}
.yesno-opt {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px 14px;
  border-radius: 999px;
  font: inherit;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 180ms var(--ease), color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.yesno-opt:hover { color: var(--ink); }
.yesno-opt.active {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.yesno-opt:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@keyframes slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* Action bar at bottom */
.action-bar {
  position: sticky;
  bottom: 16px;
  margin-top: 40px;
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  align-items: center;
  z-index: 20;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.action-bar.fade-out {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}
.action-bar:hover {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}
.action-bar .summary { font-size: 13.5px; color: var(--ink-muted); padding-left: 10px; }
.action-bar .spacer { flex: 1; }

/* Review tab */
.review-summary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.stat-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg);
}
.stat-card .n {
  font-family: var(--font-display);
  font-size: 36px;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-card .lbl { color: var(--ink-muted); font-size: 13px; margin-top: 6px; text-transform: uppercase; letter-spacing: 0.08em; }
.stat-card .ok { color: var(--success); font-size: 12px; margin-top: 8px; }
.stat-card .warn { color: var(--warning); font-size: 12px; margin-top: 8px; }

.review-upload-lead {
  margin: -12px 0 14px;
  font-size: 14px;
  color: var(--ink-muted);
  max-width: 62ch;
}
.review-upload-summary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.review-upload-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg);
}
.review-upload-card.has-file { border-color: var(--line-strong); background: var(--bg-soft); }
.review-upload-card.warn { border-color: rgba(162, 106, 0, 0.45); background: var(--warning-soft); }
.review-upload-card strong { font-size: 14px; }
.review-upload-meta {
  font-size: 12.5px;
  color: var(--ink-muted);
  word-break: break-word;
}
.review-upload-val {
  font-size: 12px;
  color: var(--warning);
  line-height: 1.45;
}
.review-upload-card .btn { align-self: flex-start; margin-top: auto; }

.review-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}

.review-list { display: flex; flex-direction: column; gap: 12px; }
.review-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg);
}
.review-row .ico { width: 28px; height: 28px; border-radius: 8px; background: var(--bg-soft); display:grid; place-items:center; }
.review-row strong { font-size: 15px; }
.review-row small { display: block; color: var(--ink-subtle); font-size: 12.5px; }

/* -----------------------------------------------------------
   Review — section-by-section answers summary
----------------------------------------------------------- */
.review-answers { display: flex; flex-direction: column; gap: 14px; margin-bottom: 12px; }

.answer-group {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg);
  overflow: hidden;
}
.answer-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.answer-group-head strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.answer-list {
  margin: 0;
  padding: 8px 18px 14px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 1.4fr;
  gap: 6px 20px;
}
.answer-list dt {
  font-size: 13px;
  color: var(--ink-muted);
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.answer-list dt:first-of-type,
.answer-list dt:first-of-type + dd { border-top: 0; }
.answer-list dd {
  margin: 0;
  padding: 8px 0;
  font-size: 14px;
  color: var(--ink);
  border-top: 1px solid var(--line);
  word-break: break-word;
}
.answer-list dd.empty {
  color: var(--ink-subtle);
  font-style: italic;
}
.answer-list .req { color: var(--accent); font-weight: 700; margin-left: 2px; }

@media (max-width: 640px) {
  .answer-list { grid-template-columns: 1fr; }
  .answer-list dd { padding-top: 0; border-top: 0; margin-bottom: 4px; }
  .answer-list dt { padding-bottom: 2px; }
}

/* Toast */
.toast-host {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 100;
}
.toast {
  background: var(--ink);
  color: #fff;
  padding: 14px 18px;
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 240px;
  animation: toastIn 280ms var(--ease-out);
}
.toast.success { background: var(--success); }
.toast.warn    { background: var(--warning); }
.toast.error   { background: var(--danger); }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Modal */
.modal-host {
  position: fixed; inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10,10,10,0.48);
  backdrop-filter: blur(6px);
  z-index: 80;
  animation: fade 200ms var(--ease);
}
.modal-host.open { display: flex; }
.modal {
  background: #fff;
  border-radius: var(--radius-lg);
  max-width: 520px;
  width: 100%;
  padding: 28px;
  box-shadow: var(--shadow-lg);
  animation: slideUp 260ms var(--ease-out);
}
.modal h3 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 400; font-size: 26px; letter-spacing: -0.02em; }
.modal p { color: var(--ink-muted); margin: 0 0 20px; }
.modal .modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

.modal-email-input-wrapper {
  margin-bottom: 20px;
}

.modal-email-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 14px;
  background: var(--bg);
  color: var(--ink);
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}

.modal-email-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.modal-email-input::placeholder {
  color: var(--ink-subtle);
}

.modal-email-error {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--danger);
  font-weight: 500;
}

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Utility */
.hide { display: none !important; }
.center { text-align: center; }
.text-muted { color: var(--ink-muted); }
.small { font-size: 13px; }

/* 3-view toggle: landing / portal / templates — only one shows at a time. */
.landing, .portal, .templates-main { display: none; }
body[data-view="landing"]   .landing        { display: block; }
body[data-view="portal"]    .portal         { display: grid; }
body[data-view="templates"] .templates-main { display: block; }

/* ======================================================================
   Templates view — a standalone "data dictionary" for the four onboarding
   datasets. Polished, dark-free, with hover popovers on column headers so
   facilities can inspect each field's meaning and guidance live.
   ====================================================================== */
.templates-main { padding: 88px 0 80px; background: var(--bg-soft); min-height: 100vh; }

.tpl-shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
}

/* --- Hero --- */
.tpl-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr);
  gap: 40px;
  align-items: start;
  padding: 40px 0 28px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
.tpl-hero-copy h1 { margin: 10px 0 10px; }
.tpl-hero-copy .lead { margin: 0 0 18px; color: var(--ink-muted); max-width: 60ch; }
.tpl-legend { display: flex; flex-wrap: wrap; gap: 10px; }
.legend-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid var(--line); background: #fff;
  border-radius: 999px; font-size: 13px; color: var(--ink-muted);
}
.legend-chip strong { color: var(--ink); font-weight: 600; }
.legend-chip .chip-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ink-subtle);
}
.legend-chip.tone-required .chip-dot { background: #d9372d; }
.legend-chip.tone-optional .chip-dot { background: #3b72f6; }
.legend-chip .chip-note { color: var(--ink-subtle); }

.tpl-hero-rules {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  box-shadow: var(--shadow-xs);
}
.tpl-hero-rules strong {
  display: block; margin-bottom: 10px; color: var(--ink);
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em;
}
.tpl-hero-rules ul { margin: 0; padding-left: 18px; color: var(--ink-muted); font-size: 14px; }
.tpl-hero-rules li + li { margin-top: 6px; }

@media (max-width: 860px) {
  .tpl-hero { grid-template-columns: 1fr; }
}

/* --- Dataset tabs --- */
.tpl-tabs {
  display: inline-flex;
  padding: 5px;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-xs);
  margin-bottom: 24px;
}
.tpl-tab {
  appearance: none;
  border: 0; background: transparent; cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: flex-start;
  padding: 8px 18px; border-radius: 999px;
  font-family: inherit; color: var(--ink-muted);
  transition: color 160ms var(--ease), background 160ms var(--ease);
}
.tpl-tab:hover { color: var(--ink); }
.tpl-tab.active {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.tpl-tab-name { font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em; }
.tpl-tab-meta {
  font-size: 11px; opacity: 0.72; margin-top: 1px;
  font-variant-numeric: tabular-nums;
}

/* --- Panel --- */
.tpl-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  animation: tplPanelIn 360ms var(--ease-out) both;
}
.tpl-panel[hidden] { display: none !important; }

@keyframes tplPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tpl-panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px; padding: 28px 28px 22px;
  border-bottom: 1px solid var(--line);
}
.tpl-panel-head h2 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.02em;
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.tpl-sheet {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11.5px;
  color: var(--ink-subtle);
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
}
.tpl-tagline { margin: 0; font-size: 14px; color: var(--ink); font-weight: 500; }
.tpl-desc { margin: 6px 0 0; color: var(--ink-muted); font-size: 14px; max-width: 64ch; }

.tpl-panel-actions { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; }
.tpl-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(56px, auto));
  gap: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 16px;
}
.tpl-stats > div { display: grid; gap: 2px; text-align: center; }
.tpl-stats strong { font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--ink); letter-spacing: -0.02em; }
.tpl-stats span { font-size: 11px; color: var(--ink-subtle); text-transform: uppercase; letter-spacing: 0.08em; }
.tpl-btn-row { display: flex; gap: 8px; }

@media (max-width: 860px) {
  .tpl-panel-head { grid-template-columns: 1fr; }
  .tpl-panel-actions { align-items: flex-start; }
}

.tpl-rules {
  margin: 0; padding: 16px 28px;
  list-style: none;
  display: grid; gap: 6px;
  font-size: 13.5px; color: var(--ink-muted);
  background: linear-gradient(180deg, var(--bg), #fff);
  border-bottom: 1px solid var(--line);
}
.tpl-rules li { padding-left: 18px; position: relative; }
.tpl-rules li::before {
  content: "";
  position: absolute; left: 4px; top: 9px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-subtle);
}

/* --- Table --- */
.tpl-table-scroll {
  overflow-x: auto;
  scrollbar-gutter: stable;
}
.tpl-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.tpl-table thead th {
  position: sticky; top: 0;
  background: #fff;
  z-index: 2;
  text-align: left;
  padding: 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  animation: colIn 420ms var(--ease-out) both;
}
@keyframes colIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tpl-col-inner {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-left: 3px solid transparent;
  cursor: help;
  transition: background 160ms var(--ease), border-color 160ms var(--ease);
  outline: none;
}
.tpl-col.required .tpl-col-inner { border-left-color: #d9372d; }
.tpl-col.optional .tpl-col-inner { border-left-color: #3b72f6; }
.tpl-col-inner:hover,
.tpl-col-inner:focus-visible { background: var(--bg); }
.tpl-col-inner .col-name {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em;
}
.tpl-col-inner .col-flag {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tpl-col.required .col-flag { color: #b82a21; }
.tpl-col.optional .col-flag { color: #2e59c2; }

.tpl-table tbody tr {
  animation: rowIn 400ms var(--ease-out) both;
  transition: background 160ms var(--ease);
}
.tpl-table tbody tr:hover { background: var(--bg); }
@keyframes rowIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tpl-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  max-width: 260px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tpl-table tbody tr:last-child td { border-bottom: 0; }
.tpl-table td.is-empty .dash { color: var(--ink-subtle); }
.tpl-rownum {
  width: 42px;
  color: var(--ink-subtle);
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  background: var(--bg);
  border-right: 1px solid var(--line);
}
.tpl-table thead .tpl-rownum {
  padding: 16px 0;
  font-weight: 600;
}

.tpl-panel-foot {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 14px 28px;
  font-size: 12px;
  color: var(--ink-subtle);
  border-top: 1px solid var(--line);
  background: var(--bg);
}

/* --- Column tip popover --- */
.col-tip {
  position: fixed;
  z-index: 120;
  max-width: 360px;
  padding: 14px 16px;
  background: #111;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 36px rgba(0,0,0,0.35);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
  pointer-events: none;
  font-size: 13px;
  line-height: 1.5;
}
.col-tip.visible { opacity: 1; transform: translateY(0); }
.col-tip-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 10px;
}
.col-tip code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12.5px;
  background: rgba(255,255,255,0.1);
  padding: 3px 8px;
  border-radius: 6px;
}
.col-tip .tip-flag {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(255,255,255,0.08);
}
.col-tip .tip-flag.tone-required { color: #ffb1a9; background: rgba(217,55,45,0.18); }
.col-tip .tip-flag.tone-optional { color: #b9ccff; background: rgba(59,114,246,0.22); }
.col-tip-sec + .col-tip-sec { margin-top: 10px; }
.col-tip-sec .lbl {
  display: block; font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.5);
  margin-bottom: 3px;
}
.col-tip-sec p { margin: 0; color: rgba(255,255,255,0.92); }

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

/* ======================================================================
   Responsive enhancements — tablets, phones, narrow viewports
   These rules layer on top of the existing breakpoints to make every
   surface (nav, hero, sections, portal, templates, modals) usable on
   touch devices down to ~320px wide.
   ====================================================================== */

/* CTA band — replaces the inline grid-template-columns that used to live
   in markup. Same look on desktop, but it can now collapse on mobile. */
.cta-band-head { grid-template-columns: 1.2fr 1fr; }
.cta-band-actions {
  display: flex;
  gap: 12px;
  align-self: center;
  justify-self: end;
  flex-wrap: wrap;
}

/* --- Tablet landscape and below (≤1024px) ---------------------------- */
@media (max-width: 1024px) {
  .nav-inner { gap: 16px; }
  .hero-art { max-width: 460px; }
  .hero-art .badge-card { min-width: 200px; padding: 14px 16px; }
  .workspace { padding: 36px 28px 110px; }
}

/* --- Tablet / large phone (≤900px) ----------------------------------- */
@media (max-width: 900px) {
  /* Reveal the hamburger and pin the nav row to brand + toggle. On
     mobile the nav row spans the full viewport with its own gutter
     (the .container width rule is overridden) so the brand and
     hamburger sit ~22px in from each edge and honour the iOS notch. */
  .nav .nav-inner {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    gap: 12px;
    padding: 14px max(22px, env(safe-area-inset-right))
             14px max(22px, env(safe-area-inset-left));
  }
  .nav-toggle { display: inline-flex; }

  /* While the drawer is open the hamburger fades away so the drawer's
     own close button is the single, unambiguous "X" on screen. */
  body.nav-drawer-open   .nav-toggle {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.9);
  }

  /* Brand row must never paint over the full-viewport drawer when they
     overlap horizontally on narrow phones. */
  .nav-inner > .brand {
    position: relative;
    z-index: 0;
  }

  /* Promote .nav-drawer from a layout passthrough to a real side panel
     that slides in from the right when .open is applied by JS. */
  .nav-drawer {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(340px, 88vw);
    padding: 0;
    background: #fff;
    border-left: 1px solid var(--line);
    box-shadow: -22px 0 60px rgba(10, 10, 10, 0.18);
    transform: translateX(105%);
    transition: transform 320ms var(--ease-out);
    z-index: 10060;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav-drawer.open { transform: translateX(0); }

  /* Drawer header — title + dedicated close button anchored to the top. */
  .nav-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-soft);
  }
  .nav-drawer-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 20px;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .nav-drawer-close {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background 160ms var(--ease), color 160ms var(--ease),
                border-color 160ms var(--ease);
  }
  .nav-drawer-close:hover { background: var(--bg-soft); color: var(--ink); border-color: var(--line-strong); }
  .nav-drawer-close:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

  /* Nav links: stack vertically and stretch full width inside the drawer. */
  .nav-drawer .nav-links {
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px 12px 18px;
  }
  .nav-drawer .nav-link {
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 15.5px;
    color: var(--ink-soft);
    font-weight: 500;
  }
  .nav-drawer .nav-link:hover { background: var(--bg-soft); color: var(--ink); }
  .nav-drawer .nav-link.active { background: var(--ink); color: #fff; }

  /* Action buttons pinned to the bottom of the drawer. */
  .nav-drawer .nav-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: auto;
    padding: 16px 18px 22px;
    border-top: 1px solid var(--line);
    background: var(--bg-soft);
  }
  .nav-drawer .nav-actions .btn { justify-content: center; width: 100%; }

  /* Hero art — center under the headline, tighter floating cards */
  .hero-art {
    justify-self: center;
    max-width: 520px;
    aspect-ratio: 1 / 0.95;
  }
}

/* --- Small tablet / phone (≤768px) ----------------------------------- */
@media (max-width: 768px) {
  html, body { font-size: 15px; }

  /* Buttons feel right with a touch less padding on small screens */
  .btn { padding: 11px 18px; }
  .btn.lg { padding: 13px 22px; font-size: 15.5px; }
  .btn.sm { padding: 7px 12px; font-size: 13px; }

  /* Hero */
  .hero { padding: clamp(36px, 12vw, 72px) 0 clamp(36px, 10vw, 64px); }
  .hero-grid { gap: 28px; }
  .hero h1 { margin: 12px 0 18px; }
  .hero-cta { margin-top: 22px; gap: 10px; }
  .hero-cta .btn { flex: 1 1 auto; justify-content: center; min-width: 0; }
  .hero-art .badge-card {
    min-width: 0;
    max-width: 78%;
    padding: 12px 14px;
    border-radius: 14px;
    gap: 10px;
  }
  .hero-art .badge-card .emoji { width: 34px; height: 34px; border-radius: 10px; }
  .hero-art .badge-card strong { font-size: 13.5px; }
  .hero-art .badge-card small { font-size: 11.5px; }
  .hero-art .badge-card.b1 { top: 5%; left: 5%; }
  .hero-art .badge-card.b2 { top: 44%; right: 5%; }
  .hero-art .badge-card.b3 { bottom: 5%; left: 7%; }

  /* Marquee */
  .marquee { padding: 16px 0; }
  .marquee-track { gap: 40px; }
  .marquee-track span { font-size: 15px; }

  /* Sections */
  section { padding: clamp(44px, 10vw, 72px) 0; }
  .section-head { margin-bottom: 28px; }

  /* Feature grid — single column reads better on phones */
  .feature-grid { grid-template-columns: 1fr; gap: 12px; }
  .feature-card { padding: 22px 20px; }

  /* Steps */
  .step { padding: 24px; }
  .step .num { font-size: 44px; }
  .step h3 { font-size: 19px; }

  /* Video */
  .video-placeholder .play { width: 64px; height: 64px; }
  .video-placeholder .play svg { width: 20px; height: 20px; }
  .video-placeholder .caption {
    bottom: 18px;
    left: 20px;
    right: 20px;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  /* CTA band — stack headline above actions, stretch buttons */
  .cta-band-head { grid-template-columns: 1fr; gap: 20px; }
  .cta-band-actions {
    align-self: start;
    justify-self: start;
    width: 100%;
  }
  .cta-band-actions .btn { flex: 1 1 200px; justify-content: center; }

  /* Footer */
  .footer { padding: 36px 0 32px; }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 14px;
    text-align: left;
  }
  .footer-inner > .spacer { display: none !important; }
  .footer-inner > span:last-child {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
  .footer-privacy { grid-column: 1; grid-row: auto; padding-top: 14px; }

  /* Portal */
  .portal { width: 100%; min-height: calc(100vh - 60px); }
  .workspace { padding: 28px 20px 100px; }
  .portal-privacy-foot { padding: 12px 20px 18px; }
  .workspace-header h1 { font-size: clamp(26px, 7vw, 38px); }

  /* Action bar — wrap nicely on phones */
  .action-bar {
    flex-wrap: wrap;
    border-radius: 18px;
    padding: 10px 12px;
    gap: 8px;
    bottom: 12px;
  }
  .action-bar .summary {
    flex: 1 1 100%;
    order: -1;
    padding-left: 6px;
  }
  .action-bar .spacer { display: none; }

  /* Sidebar in portal — softer padding when stacked */
  .sidebar { padding: 24px 20px 28px; }

  /* Templates */
  .templates-main { padding: 56px 0 60px; }
  .tpl-shell { padding: 0 20px; }
  .tpl-hero { padding: 24px 0 22px; gap: 22px; margin-bottom: 22px; }
  .tpl-hero-rules { padding: 16px 18px; }
  .tpl-tabs {
    display: flex;
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    border-radius: 14px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tpl-tabs::-webkit-scrollbar { display: none; }
  .tpl-tab { flex: 0 0 auto; padding: 8px 14px; }
  .tpl-panel-head { padding: 22px 20px 18px; gap: 18px; }
  .tpl-panel-head h2 { font-size: 24px; }
  .tpl-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 10px 12px;
    gap: 8px;
  }
  .tpl-stats strong { font-size: 18px; }
  .tpl-stats span { font-size: 10px; }
  .tpl-rules { padding: 12px 20px; }
  .tpl-panel-foot { padding: 12px 20px; flex-direction: column; gap: 4px; }

  /* Modal */
  .modal-host { padding: 16px; }
  .modal { padding: 22px; border-radius: 18px; }
  .modal h3 { font-size: 22px; }

  /* Toast — span the bottom on phones for thumb reach */
  .toast-host { bottom: 16px; right: 16px; left: 16px; }
  .toast { min-width: 0; width: 100%; }
}

/* --- Phone (≤520px) -------------------------------------------------- */
@media (max-width: 520px) {
  .container { width: 100%; padding-inline: 18px; }
  .container-wide { width: 100%; padding-inline: 18px; }

  .brand { font-size: 16px; gap: 10px; }
  .brand-mark { width: 30px; height: 30px; border-radius: 9px; }
  .brand-mark svg { width: 18px; }

  .nav-inner { padding: 12px 0; }

  /* Hero CTAs stack full width on tiny phones */
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }

  /* Trust row reads better stacked */
  .hero .row[style*="margin-top:28px"] {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* Hero art — smaller, tighter floating cards */
  .hero-art { aspect-ratio: 1 / 1; max-width: 100%; }
  .hero-art .badge-card { padding: 10px 12px; max-width: 82%; }
  .hero-art .badge-card .emoji { width: 30px; height: 30px; }
  .hero-art .badge-card strong { font-size: 12.5px; }
  .hero-art .badge-card small { font-size: 11px; }

  /* Portal */
  .workspace { padding: 22px 16px 90px; }
  .portal-steps { padding: 12px 14px; }

  /* Country picker stays inside viewport */
  .country-popover {
    width: calc(100vw - 24px);
    max-width: 360px;
  }

  /* Templates */
  .templates-main { padding: 44px 0 56px; }
  .tpl-shell { padding: 0 16px; }
  .tpl-panel-head { padding: 20px 18px 16px; }
  .tpl-panel-head h2 { font-size: 22px; }
  .tpl-table { font-size: 12.5px; }
  .tpl-table td { padding: 10px 14px; }
  .tpl-col-inner { padding: 12px 14px; }
  .tpl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* CTA band buttons stack */
  .cta-band-actions { flex-direction: column; }
  .cta-band-actions .btn { width: 100%; }
}

/* --- Tiny phones (≤380px) ------------------------------------------- */
@media (max-width: 380px) {
  /* Hide the secondary nav button (Resume draft) when the row is too
     tight — the primary CTA stays. The action is still reachable
     inside the portal sidebar. */
  #nav-resume { display: none; }

  .display-xl { font-size: clamp(32px, 10vw, 48px); }
}