/* ============================================================
   PRISM MEDICAL PRODUCTS — SITE STYLESHEET
   Brand tokens locked to official palette. Do not introduce
   off-palette blues (#1B5EA8 was deprecated in v4 review).
   ============================================================ */

:root {
  --blue:        #0979BE;   /* Main Blue — primary actions, links */
  --dark:        #0C496F;   /* Dark Blue — headings, footer */
  --sky:         #DBE8F1;   /* Sky Blue — soft fills */
  --light:       #99C3DB;   /* Light Blue — secondary fills */
  --bg:          #F9FBFC;   /* Background White */
  --teal:        #1A8C8C;   /* Care & humanity accent, decorative only */
  --teal-ink:    #147575;   /* Teal for text (WCAG AA: 5.48:1 on white) */
  --amber:       #E6A817;   /* Urgency / notice only */
  --ink:         #16324A;   /* Body text */
  --muted:       #4A6A80;   /* Secondary text (WCAG AA: 5.73:1 on white) */
  --faint:       #56758A;   /* Captions (WCAG AA: 4.88:1 on white) */
  --line:        #E1ECF4;   /* Hairlines */
  --white:       #FFFFFF;

  --ff-display: 'Outfit', -apple-system, sans-serif;
  --ff-body:    'Inter', -apple-system, sans-serif;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 6px 24px rgba(12, 73, 111, .08);
  --shadow-lg: 0 14px 44px rgba(12, 73, 111, .13);
  --maxw: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* Visually hidden but available to screen readers and the heading outline. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Signature: prism refraction bar ---------- */
.refract {
  height: 4px; width: 96px; border: 0; border-radius: 100px;
  background: linear-gradient(90deg,
    var(--dark) 0%, var(--blue) 38%, var(--light) 68%, var(--sky) 84%, var(--teal) 100%);
}
.refract.center { margin: 0 auto; }
.refract-page {
  height: 4px; width: 100%;
  background: linear-gradient(90deg,
    var(--dark) 0%, var(--blue) 40%, var(--light) 70%, var(--sky) 86%, var(--teal) 100%);
}

/* ---------- Type scale ---------- */
h1, h2, h3, h4 { font-family: var(--ff-display); color: var(--dark); line-height: 1.15; }
h1 { font-size: clamp(34px, 5vw, 54px); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: clamp(26px, 3.6vw, 38px); font-weight: 800; letter-spacing: -0.015em; }
h3 { font-size: 21px; font-weight: 700; }
h4 { font-size: 17px; font-weight: 700; }
.eyebrow {
  font-family: var(--ff-display); font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue);
  display: block; margin-bottom: 12px;
}
.lede { font-size: 18px; color: var(--muted); max-width: 640px; }
.section-head { margin-bottom: 40px; }
.section-head .refract { margin-top: 18px; }
.section-head.centered { text-align: center; }
.section-head.centered .lede { margin: 12px auto 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-display); font-weight: 700; font-size: 15px;
  padding: 13px 26px; border-radius: 100px; border: 2px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-decoration: none !important;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: #0868a5; box-shadow: 0 8px 20px rgba(9, 121, 190, .3); }
.btn-outline { background: transparent; color: var(--dark); border-color: var(--light); }
.btn-outline:hover { border-color: var(--blue); color: var(--blue); }
.btn-ghost-dark { background: transparent; color: var(--white); border-color: rgba(255,255,255,.45); }
.btn-ghost-dark:hover { border-color: var(--white); }
.btn-sm { padding: 9px 18px; font-size: 13px; }

/* ---------- Topbar ---------- */
.topbar {
  background: var(--dark); color: var(--sky); font-size: 13px;
}
.topbar .container {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 40px; gap: 16px; flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px;
}
.topbar a { color: var(--white); font-weight: 600; }
.topbar .tb-links { display: flex; gap: 20px; align-items: center; }
.topbar .henry { color: var(--light); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(249, 251, 252, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav .container {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 72px; gap: 20px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none !important; flex-shrink: 0; }
.brand-mark {
  width: 38px; height: 38px; flex: none;
}
.brand-name {
  font-family: var(--ff-display); font-weight: 800; font-size: 20px;
  color: var(--dark); line-height: 1.05;
}
.brand-sub { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }

.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav-links > li { position: relative; }
.nav-links a.nav-item {
  display: block; padding: 10px 13px; border-radius: 100px;
  font-size: 14.5px; font-weight: 600; color: var(--ink);
  text-decoration: none !important; white-space: nowrap;
}
.nav-links a.nav-item:hover, .nav-links a.nav-item.active { color: var(--blue); background: var(--sky); }

/* Dropdown */
.has-drop > a.nav-item::after {
  content: ""; display: inline-block; margin-left: 7px;
  border: 4px solid transparent; border-top-color: currentColor;
  transform: translateY(2px);
}
.drop {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 250px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  list-style: none;
}
.has-drop:hover .drop, .has-drop:focus-within .drop {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.drop a {
  display: block; padding: 10px 14px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none !important;
}
.drop a:hover { background: var(--sky); color: var(--blue); }
.drop .drop-note {
  padding: 8px 14px 6px; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); font-weight: 700;
}

.nav-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Mobile nav */
.nav-toggle {
  display: none; flex-direction: column; gap: 5px; background: none; border: 0;
  padding: 10px; cursor: pointer;
}
.nav-toggle span { width: 24px; height: 2.5px; background: var(--dark); border-radius: 2px; }
.mobile-nav {
  position: fixed; inset: 0; z-index: 100; background: var(--dark);
  padding: 24px; overflow-y: auto;
  transform: translateX(100%); transition: transform .25s ease; visibility: hidden;
}
.mobile-nav.open { transform: translateX(0); visibility: visible; }
.mobile-nav-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.mobile-nav-header button { background: none; border: 0; cursor: pointer; padding: 8px; }
.mobile-nav a {
  display: block; padding: 13px 4px; color: var(--white);
  font-family: var(--ff-display); font-weight: 600; font-size: 18px;
  border-bottom: 1px solid rgba(255,255,255,.1); text-decoration: none !important;
}
.mobile-nav .m-group { padding: 16px 4px 6px; color: var(--light); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.mobile-nav .m-sub { font-size: 16px; padding-left: 16px; color: var(--sky); }

/* ---------- Hero ---------- */
.hero { padding: 76px 0 64px; position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.hero .lede { margin: 20px 0 30px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-badges { display: flex; gap: 22px; margin-top: 34px; flex-wrap: wrap; }
.hero-badges .badge { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.hero-badges svg { flex: none; }

.hero-visual { position: relative; }
.hero-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow-lg); padding: 30px; position: relative; z-index: 2;
}
.hero-card .refract { width: 100%; margin-bottom: 22px; }
.hero-stat { display: flex; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.hero-stat:last-child { border-bottom: 0; }
.hero-stat b { font-family: var(--ff-display); font-size: 27px; font-weight: 800; color: var(--blue); min-width: 96px; }
.hero-stat span { color: var(--muted); font-size: 14.5px; }
.hero-glow {
  position: absolute; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(153,195,219,.35), transparent 65%);
  top: -80px; right: -100px; z-index: 1;
}

/* ---------- Sections ---------- */
.section { padding: 76px 0; }
.section.alt { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section.sky { background: var(--sky); }

/* ---------- Persona router ---------- */
.router-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.router-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; box-shadow: var(--shadow); text-decoration: none !important;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.router-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--light); }
.router-card .rc-icon {
  width: 48px; height: 48px; border-radius: 12px; background: var(--sky);
  display: grid; place-items: center; color: var(--blue);
}
.router-card h3 { color: var(--dark); }
.router-card p { color: var(--muted); font-size: 15px; flex: 1; }
.router-card .rc-go { color: var(--blue); font-weight: 700; font-family: var(--ff-display); font-size: 14.5px; }

/* ---------- Promise strip ---------- */
.promise { background: var(--dark); color: var(--white); padding: 54px 0; }
.promise h2 { color: var(--white); }
.promise .refract { margin-top: 16px; }
.promise-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 38px; }
.promise-item h3 { color: var(--sky); margin-bottom: 6px; }
.promise-item p { color: rgba(255,255,255,.75); font-size: 14.5px; }
.promise-item .p-num {
  font-family: var(--ff-display); font-weight: 800; color: var(--light);
  font-size: 14px; letter-spacing: .1em; display: block; margin-bottom: 10px;
}

/* ---------- Product line grid ---------- */
.lines-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.line-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; text-decoration: none !important; display: flex; flex-direction: column; gap: 10px;
  transition: transform .18s ease, box-shadow .18s ease;
  position: relative; overflow: hidden;
}
.line-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--dark), var(--blue), var(--light), var(--teal));
  opacity: 0; transition: opacity .18s ease;
}
.line-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.line-card:hover::before { opacity: 1; }
.line-card .lc-code {
  font-family: var(--ff-display); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; color: var(--faint);
}
.line-card h3 { color: var(--dark); }
.line-card p { color: var(--muted); font-size: 14.5px; flex: 1; }
.line-card .rc-go { color: var(--blue); font-weight: 700; font-family: var(--ff-display); font-size: 14px; }

/* ---------- Steps ---------- */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
.step {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; position: relative;
}
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--ff-display); font-weight: 800; font-size: 15px; color: var(--blue);
  background: var(--sky); border-radius: 100px; padding: 4px 13px;
  display: inline-block; margin-bottom: 14px;
}
.step h3 { margin-bottom: 6px; }
.step p { color: var(--muted); font-size: 14.5px; }

/* ---------- Testimonials ---------- */
.quotes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.quote {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow);
}
.quote blockquote { font-size: 15.5px; color: var(--ink); font-style: italic; }
.quote .q-who { margin-top: 16px; font-family: var(--ff-display); font-weight: 700; font-size: 13.5px; color: var(--blue); }
.quote .q-role { font-size: 12.5px; color: var(--faint); }

/* ---------- Feature split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.checks { list-style: none; margin-top: 20px; display: grid; gap: 12px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink); font-size: 15.5px; }
.checks svg { flex: none; margin-top: 3px; }
.panel {
  background: var(--white); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow-lg); padding: 34px;
}
.panel .refract { width: 100%; margin-bottom: 20px; }
.panel h3 { margin-bottom: 10px; }
.panel p { color: var(--muted); font-size: 15px; }
.panel + .panel { margin-top: 18px; }

/* ---------- FAQ ---------- */
.faq { max-width: 780px; margin: 0 auto; }
.faq details {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm);
  margin-bottom: 12px; overflow: hidden;
}
.faq summary {
  cursor: pointer; padding: 18px 22px; font-family: var(--ff-display);
  font-weight: 700; font-size: 16px; color: var(--dark); list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; color: var(--blue); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq .faq-body { padding: 0 22px 20px; color: var(--muted); font-size: 15px; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--dark); color: var(--white); padding: 68px 0; position: relative; overflow: hidden; }
.cta-band h2 { color: var(--white); }
.cta-band p { color: rgba(255,255,255,.78); max-width: 560px; margin: 14px 0 28px; }
.cta-band .refract { margin-top: 18px; }
.cta-inner { position: relative; z-index: 2; }
.cta-glow {
  position: absolute; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(9,121,190,.35), transparent 65%);
  bottom: -260px; right: -160px;
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding: 66px 0 50px; }
.page-hero .lede { margin-top: 16px; }
.page-hero .refract { margin-top: 22px; }
.crumbs { font-size: 13px; color: var(--faint); margin-bottom: 18px; }
.crumbs a { color: var(--faint); }
.crumbs a:hover { color: var(--blue); }

/* ---------- Notice box ---------- */
.notice {
  background: var(--sky); border-left: 4px solid var(--blue); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 18px 22px; font-size: 15px; color: var(--dark); margin: 26px 0;
}
.notice.amber { background: #FDF6E3; border-left-color: var(--amber); }

/* ---------- Legal / prose pages ---------- */
.prose { max-width: 780px; }
.prose h2 { font-size: 24px; margin: 40px 0 12px; }
.prose h3 { font-size: 18px; margin: 28px 0 8px; }
.prose p, .prose li { color: var(--muted); font-size: 15.5px; }
.prose ul { padding-left: 22px; margin: 10px 0; }
.prose .updated { font-size: 13px; color: var(--faint); margin-bottom: 8px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.contact-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; box-shadow: var(--shadow);
}
.contact-card h3 { margin-bottom: 8px; }
.contact-card p { color: var(--muted); font-size: 15px; margin-bottom: 16px; }
.contact-card .big-link {
  font-family: var(--ff-display); font-size: 22px; font-weight: 800; color: var(--blue);
}

/* ---------- Footer ---------- */
footer { background: var(--dark); color: rgba(255,255,255,.8); }
.footer-main { padding: 60px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; gap: 32px; }
.footer-brand .brand-name { color: var(--white); }
.footer-brand .brand-sub { color: var(--light); }
.footer-brand p { font-size: 14px; margin-top: 14px; max-width: 300px; }
.footer-col h2 { color: var(--sky); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.footer-col ul { list-style: none; display: grid; gap: 9px; }
.footer-col a { color: rgba(255,255,255,.75); font-size: 14px; text-decoration: none !important; }
.footer-col a:hover { color: var(--white); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding: 22px 0;
  font-size: 13px; color: rgba(255,255,255,.55);
}
.footer-bottom .container { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-legal a { color: rgba(255,255,255,.65); text-decoration: none !important; }
.footer-legal a:hover { color: var(--white); }

.hipaa-strip { background: #093a59; padding: 14px 0; }
.hipaa-strip .container {
  display: flex; gap: 10px 28px; flex-wrap: wrap; align-items: center;
  font-size: 12.5px; color: var(--light);
}
.hipaa-strip span { display: inline-flex; align-items: center; gap: 7px; }
.hipaa-strip svg { flex: none; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--dark); color: var(--white); padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---------- Dropdown tap-open state (touch devices) ---------- */
.has-drop.open .drop { opacity: 1; visibility: visible; transform: translateY(0); }

/* ---------- Mobile sticky call bar ---------- */
.call-bar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(249, 251, 252, .94); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.call-bar .btn { width: 100%; justify-content: center; }
/* Mobile call bar disabled: stays hidden on all screen sizes */

/* ---------- Forms page ---------- */
.forms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px;
}
.form-card h3 { font-size: 18px; }
.form-card p { color: var(--muted); font-size: 14.5px; flex: 1; }
.form-card .fc-meta { font-size: 12px; color: var(--faint); letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
@media (max-width: 620px) { .forms-grid { grid-template-columns: 1fr; } }

/* Check icons inherit the teal via currentColor rather than a hardcoded hex. */
.checks li > svg, .badge svg { color: var(--teal); flex-shrink: 0; }

/* ---------- Wide two-column dropdown ---------- */
.drop-wide { display: flex; gap: 8px; min-width: 520px; padding: 10px;
  max-height: calc(100vh - 130px); overflow-y: auto; }
.drop-wide .drop-col { flex: 1; min-width: 0; }
.drop-wide .drop-col > ul { list-style: none; }
.drop-wide .drop-note {
  display: block; padding: 8px 14px 6px; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); font-weight: 700;
}
.drop-wide .drop-col + .drop-col { border-left: 1px solid var(--line); }
.drop-wide a { font-size: 13.5px; padding: 8px 14px; }

/* ---------- Full-bleed media band ---------- */
.media-band { margin: 0; width: 100%; }
.media-band img {
  width: 100%; height: clamp(240px, 34vw, 460px); object-fit: cover; display: block;
}
.media-band figcaption {
  max-width: var(--maxw); margin: 0 auto; padding: 12px 24px 0;
  font-size: 13.5px; color: var(--muted);
}
.media-inline { margin: 0 0 30px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.media-inline img { width: 100%; height: clamp(200px, 26vw, 340px); object-fit: cover; display: block; }

/* ---------- Full-width content flow ---------- */
.flow > * + * { margin-top: 22px; }
.checks.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 34px; }
.pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.trio-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; align-items: start; }
.faq.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 100% !important; }
.faq.two details { margin: 0; }
.measure { max-width: 68ch; }
@media (max-width: 980px) {
  .checks.cols { grid-template-columns: 1fr 1fr; }
  .trio-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .checks.cols, .pair-grid, .faq.two { grid-template-columns: 1fr; }
}

/* ---------- Photography ---------- */
.photo { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--sky); }
.photo img { width: 100%; height: auto; display: block; }
.photo figcaption {
  padding: 12px 16px; font-size: 13.5px; color: var(--muted);
  background: var(--white); border-top: 1px solid var(--line);
}

/* ---------- NEW badge ---------- */
.tag-new {
  color: var(--teal-ink); font-size: 11px; font-weight: 800;
  letter-spacing: .06em; margin-left: 6px;
}

/* ---------- Fade-in ---------- */
.fade-in { transition: opacity .5s ease, transform .5s ease; }
/* Hidden state applies only when JS is confirmed running (html.js is set by an
   inline head script). If main.js fails to load or is blocked, content stays
   visible instead of disappearing. */
.js .fade-in { opacity: 0; transform: translateY(16px); }
.js .fade-in.visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1360px) {
  .nav-links { gap: 0; }
  .nav-links a.nav-item { padding: 10px 9px; font-size: 13.5px; }
  .nav .container { padding: 0 16px; }
  .nav-cta .btn-sm { padding: 10px 16px; font-size: 14px; }
  /* The phone number is already in the topbar, so drop the duplicate nav
     button here rather than letting Get Started run off the viewport. */
  .nav-cta .btn-outline { display: none; }
}
@media (max-width: 1040px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta .btn-outline { display: none; }
  .hero-grid, .split, .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .router-grid, .lines-grid, .quotes-grid { grid-template-columns: 1fr 1fr; }
  .promise-grid, .steps-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  /* Minimum tap target height on touch screens (WCAG 2.5.8). */
  .topbar .tb-links a { padding: 6px 2px; }
  .crumbs a { display: inline-block; padding: 5px 0; }
  .footer-col a, .footer-legal a { display: inline-block; padding: 6px 0; }
  .brand { flex-shrink: 1; min-width: 0; }
  .brand-sub { display: none; }
  .nav-cta .btn-primary { display: none; }
  .router-grid, .lines-grid, .quotes-grid, .promise-grid, .steps-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .section, .hero { padding: 52px 0; }
  .topbar .tb-links { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .js .fade-in { opacity: 1; transform: none; }
}


/* ============================================================
   PRINT
   Patients and provider offices print the prescription forms,
   the FAQ and the Notice of Privacy Practices. Strip the
   interface, keep the content, and expose link destinations.
   ============================================================ */
@media print {
  .topbar, .nav, .mobile-nav, .call-bar, .hipaa-strip,
  .refract-page, .cta-band, .nav-toggle, .skip-link { display: none !important; }

  html, body { background: #fff; color: #000; font-size: 11.5pt; }
  body { padding-bottom: 0; }
  .container { max-width: 100%; padding: 0; }
  .section, .hero, .page-hero { padding: 12pt 0; }

  h1 { font-size: 20pt; }
  h2 { font-size: 15pt; }
  h3 { font-size: 12.5pt; }
  h1, h2, h3 { color: #000; break-after: avoid; page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }

  .panel, .form-card, .quote, .notice, .step, .line-card {
    box-shadow: none; border: 1pt solid #999; break-inside: avoid; page-break-inside: avoid;
  }
  .fade-in, .js .fade-in { opacity: 1 !important; transform: none !important; }
  .refract { background: #000 !important; height: 2pt; }

  /* Print the destination of real links so a paper copy is still usable. */
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  main a[href^="tel:"]::after { content: ""; }
  .footer { border-top: 1pt solid #999; }
  .footer a::after { content: ""; }

  details { break-inside: avoid; }
  details > summary { list-style: none; font-weight: 700; }
  details:not([open]) > .faq-body { display: block; } /* print answers too */
}

/* ---------- Preloader (covers the page until the shared header/footer are loaded) ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 9999; background: var(--bg, #f9fbfc);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .25s ease;
}
.preloader span {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid var(--sky, #cfe3f1); border-top-color: var(--blue, #0979be);
  animation: prism-spin .8s linear infinite;
}
@keyframes prism-spin { to { transform: rotate(360deg); } }
html:not(.js) .preloader { display: none; }
@media (prefers-reduced-motion: reduce) { .preloader span { animation: none; } }