/* ============================================================
   BridgeWell Design System
   Public site: light body · navy/blue/teal palette · Inter font
   Portal/ops: navy sidebar · light content · bw- prefixed classes
   ============================================================ */

:root {
  /* ── Palette ── */
  --bw-blue:        #0ea5e9;
  --bw-blue-dark:   #0284c7;
  --bw-blue-light:  #e0f2fe;
  --bw-sky:         #38bdf8;
  --bw-teal:        #14b8a6;
  --bw-teal-light:  #ccfbf1;
  --bw-navy:        #0f172a;
  --bw-navy-mid:    #1e293b;
  --bw-slate:       #475569;
  --bw-muted:       #94a3b8;
  --bw-surface:     #f8fafc;
  --bw-surface-d:   #f1f5f9;
  --bw-white:       #ffffff;
  --bw-border:      #e2e8f0;
  --bw-success:     #22c55e;
  --bw-warning:     #f59e0b;
  --bw-danger:      #ef4444;

  /* ── Legacy (portal templates) ── */
  --bg-primary:     #ffffff;
  --bg-secondary:   #f8fafc;
  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --radius-md:      0.75rem;

  /* ── Typography ── */
  --bw-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Radius, shadow, motion ── */
  --bw-radius:      0.75rem;
  --bw-radius-sm:   0.375rem;
  --bw-radius-pill: 9999px;
  --bw-shadow:      0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --bw-shadow-md:   0 4px 16px rgba(0,0,0,.10);
  --bw-shadow-lg:   0 16px 48px rgba(0,0,0,.12);
  --bw-transition:  150ms ease;
}

/* ── Reset / Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--bw-font);
  color: var(--bw-navy);
  background: var(--bw-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bw-blue); text-decoration: none; transition: color var(--bw-transition); }
a:hover { color: var(--bw-blue-dark); }
ul { list-style: none; padding: 0; margin: 0; }

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 { line-height: 1.2; font-weight: 700; margin: 0 0 .5rem; color: var(--bw-navy); letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; }
p  { margin: 0 0 1rem; }
.lead { font-size: 1.125rem; color: var(--bw-slate); line-height: 1.7; }
.text-muted { color: var(--bw-muted); }
.text-slate { color: var(--bw-slate); }
.text-blue  { color: var(--bw-blue); }
.text-white { color: #fff !important; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.section-label, .bw-section-label {
  display: inline-block;
  color: var(--bw-blue);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .75rem;
}

.section-header { text-align: center; max-width: 720px; margin: 0 auto 3rem; }

/* ── Layout ── */
.container    { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.container-sm { max-width: 760px;  margin: 0 auto; padding: 0 1.5rem; }
.section      { padding: 5rem 0; }
.section-sm   { padding: 3rem 0; }

.grid  { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.flex         { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-wrap    { flex-wrap: wrap; }
.gap-1 { gap: .5rem; } .gap-2 { gap: 1rem; } .gap-3 { gap: 1.5rem; }

.bg-surface  { background: var(--bw-surface); }
.bg-dark     { background: var(--bw-navy); color: #fff; }
.bg-blue     { background: var(--bw-blue); color: #fff; }
.bg-gradient { background: linear-gradient(135deg, var(--bw-navy), #1e3a5f); color: #fff; }
.bg-gradient h1, .bg-gradient h2, .bg-gradient h3, .bg-dark h1, .bg-dark h2, .bg-dark h3 { color: #fff; }

/* ── Navbar ── */
.navbar {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bw-border);
  padding: .875rem 0;
}
.navbar .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.navbar-brand img { height: 36px; width: auto; }
.navbar-nav { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; }
.navbar-nav li { list-style: none; }
.navbar-nav a  {
  padding: .5rem .875rem; font-size: .9rem; font-weight: 500;
  color: var(--bw-navy); border-radius: var(--bw-radius-sm);
  transition: background var(--bw-transition), color var(--bw-transition);
}
.navbar-nav a:hover { background: var(--bw-surface); color: var(--bw-blue); }
.navbar-actions { display: flex; gap: .625rem; align-items: center; }
.navbar-toggle {
  display: none; background: none; border: none;
  font-size: 1.5rem; cursor: pointer; padding: .25rem .5rem;
  color: var(--bw-navy);
}

/* Mobile menu panel */
.mobile-menu {
  display: none;
  position: fixed; top: 64px; left: 0; right: 0;
  background: #fff;
  border-bottom: 1px solid var(--bw-border);
  padding: 1rem 1.5rem;
  box-shadow: var(--bw-shadow-md);
  z-index: 999;
}
.mobile-menu.open { display: flex; flex-direction: column; gap: .25rem; }
.mobile-menu a {
  padding: .75rem .5rem;
  color: var(--bw-navy); font-weight: 500; font-size: .95rem;
  border-radius: var(--bw-radius-sm);
}
.mobile-menu a:hover { background: var(--bw-surface); color: var(--bw-blue); }
/* Mobile-drawer account section. Stacks the account-action buttons
   (Profile / Billing / Notifications / Sign out) vertically so each
   gets a full row and a clear tap target. The pre-fix flex-row layout
   put four `white-space: nowrap` `.btn-sm` children in a non-wrapping
   row inside a viewport-width drawer — the trailing Sign out button
   overflowed off-screen on viewports under ~480px and was effectively
   invisible to mobile users even though it was in the DOM. */
.mobile-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .35rem;
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--bw-border);
}
.mobile-actions .btn,
.mobile-actions form { width: 100%; }
.mobile-actions .btn { justify-content: flex-start; }
.mobile-actions form .btn { width: 100%; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .625rem 1.25rem;
  border-radius: var(--bw-radius-sm);
  font-family: var(--bw-font);
  font-weight: 600; font-size: .9rem; line-height: 1.2;
  border: 2px solid transparent; cursor: pointer;
  transition: all var(--bw-transition);
  text-decoration: none; white-space: nowrap;
}
.btn-primary { background: var(--bw-blue); color: #fff; border-color: var(--bw-blue); }
.btn-primary:hover { background: var(--bw-blue-dark); border-color: var(--bw-blue-dark); color: #fff; }
.btn-outline { background: transparent; color: var(--bw-blue); border-color: var(--bw-blue); }
.btn-outline:hover { background: var(--bw-blue); color: #fff; }
.btn-white   { background: #fff; color: var(--bw-navy); border-color: #fff; }
.btn-white:hover { background: var(--bw-surface); color: var(--bw-blue); }
.btn-ghost   { background: transparent; color: var(--bw-slate); border-color: transparent; }
.btn-ghost:hover { background: var(--bw-surface); color: var(--bw-navy); }
.btn-dark    { background: var(--bw-navy); color: #fff; border-color: var(--bw-navy); }
.btn-dark:hover { background: var(--bw-navy-mid); border-color: var(--bw-navy-mid); }
.btn-danger  { background: var(--bw-danger); color: #fff; border-color: var(--bw-danger); }
.btn-lg    { padding: .875rem 1.75rem; font-size: 1rem; }
.btn-sm    { padding: .4rem .85rem; font-size: .8rem; }
.btn-block { width: 100%; }
.btn-pill  { border-radius: var(--bw-radius-pill); }

/* ── Cards (public) ── */
.card {
  background: var(--bw-white);
  border: 1px solid var(--bw-border);
  border-radius: var(--bw-radius);
  box-shadow: var(--bw-shadow);
  overflow: hidden;
  transition: box-shadow var(--bw-transition), transform var(--bw-transition);
}
.card:hover { box-shadow: var(--bw-shadow-md); }
.card-body   { padding: 1.5rem; }
.card-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--bw-border); background: var(--bw-surface); }
.card-footer { padding: 1rem 1.5rem; border-top:    1px solid var(--bw-border); background: var(--bw-surface); }

/* ── Hero ── */
.hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0284c7 100%);
  color: #fff; padding: 6rem 0 5rem;
  position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.hero-content { position: relative; max-width: 720px; }
.hero h1 { color: #fff; margin-bottom: 1.25rem; }

/* Hero split: copy left, photo right (stacks on ≤960px). */
.hero-split {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 3rem;
  align-items: center;
}
.hero-split .hero-content { max-width: 100%; }
.hero-media { min-width: 0; display: flex; justify-content: center; }
.hero-image {
  width: 100%;
  max-width: 520px;
  height: auto;
  max-height: 460px;
  object-fit: contain;
  border-radius: var(--bw-radius);
  box-shadow: 0 20px 50px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}
@media (max-width: 960px) {
  .hero-split { grid-template-columns: 1fr; gap: 2rem; }
  .hero-image { max-height: 320px; margin: 0 auto; }
}
.hero .lead { color: rgba(255,255,255,.82); font-size: 1.2rem; margin-bottom: 2rem; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 2rem;
  padding: .375rem 1rem; font-size: .8rem;
  color: rgba(255,255,255,.9); margin-bottom: 1.5rem;
}

/* ── Steps ── */
.steps { display: grid; gap: 0; }
.step  { display: flex; gap: 1.5rem; padding: 2rem 0; border-bottom: 1px solid var(--bw-border); align-items: flex-start; }
.step:last-child { border-bottom: none; }
.step-num {
  flex-shrink: 0; width: 48px; height: 48px;
  background: var(--bw-blue); color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.1rem;
}

/* ── Pricing cards ── */
.pricing-card { text-align: left; }
.pricing-card .card-body { display: flex; flex-direction: column; height: 100%; }
.pricing-card.featured {
  border-color: var(--bw-blue);
  box-shadow: 0 0 0 2px var(--bw-blue), var(--bw-shadow-lg);
  transform: scale(1.02);
}
.price-amount { font-size: 3rem; font-weight: 800; color: var(--bw-navy); line-height: 1; }
.price-period { color: var(--bw-muted); font-size: .9rem; }
.feature-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.feature-list li {
  padding: .5rem 0;
  display: flex; align-items: flex-start; gap: .75rem;
  font-size: .9rem; color: var(--bw-slate);
}
.feature-list li::before { content: '✓'; color: var(--bw-success); font-weight: 700; flex-shrink: 0; }

/* ── Testimonials ── */
.testimonial-card { padding: 2rem; }
.testimonial-quote {
  font-size: 1.05rem; font-style: italic; color: var(--bw-slate);
  margin-bottom: 1.5rem; line-height: 1.7;
}
.testimonial-author { display: flex; align-items: center; gap: .875rem; }
.testimonial-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--bw-blue-light); color: var(--bw-blue);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem;
}
.stars { color: #f59e0b; font-size: .9rem; margin-bottom: .25rem; }

/* ── FAQ accordion ── */
.faq-item { border-bottom: 1px solid var(--bw-border); }
.faq-question {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 1.25rem 0; display: flex; justify-content: space-between; align-items: center;
  font-family: var(--bw-font); font-weight: 600; font-size: 1rem; color: var(--bw-navy);
}
.faq-question:hover { color: var(--bw-blue); }
.faq-answer { padding: 0 0 1.25rem; color: var(--bw-slate); line-height: 1.7; display: none; }
.faq-item.open .faq-answer { display: block; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform .2s; font-size: 1.25rem; color: var(--bw-muted); }

/* ── Badges ── */
.badge {
  display: inline-flex; align-items: center; padding: .25rem .625rem;
  border-radius: 2rem; font-size: .75rem; font-weight: 600;
}
.badge-blue   { background: var(--bw-blue-light); color: var(--bw-blue-dark); }
.badge-green  { background: #dcfce7; color: #15803d; }
.badge-teal   { background: var(--bw-teal-light); color: #0f766e; }
.badge-yellow { background: #fef9c3; color: #854d0e; }
.badge-red    { background: #fee2e2; color: #991b1b; }
.badge-gray   { background: #f1f5f9; color: var(--bw-slate); }

/* bw- namespaced badges (used by portal/ops) */
.bw-badge {
  display: inline-flex; align-items: center; padding: .2rem .55rem;
  border-radius: 2rem; font-size: .72rem; font-weight: 600;
  background: #f1f5f9; color: var(--bw-slate);
}
.bw-badge--staff         { background: var(--bw-blue-light); color: var(--bw-blue-dark); }
.bw-badge--pending       { background: #fef3c7; color: #92400e; }
.bw-badge--plan-start    { background: var(--bw-blue-light); color: var(--bw-blue-dark); }
.bw-badge--plan-full     { background: var(--bw-teal-light); color: #0f766e; }
.bw-badge--plan-maintain { background: #dcfce7; color: #15803d; }

/* ── Stats ── */
.stat-card { text-align: center; padding: 1.5rem; }
.stat-value { font-size: 2.5rem; font-weight: 800; color: var(--bw-navy); line-height: 1; }
.stat-label { color: var(--bw-muted); font-size: .85rem; margin-top: .35rem; }

/* bw- namespaced stats */
.bw-stat-card {
  background: #fff; border: 1px solid var(--bw-border);
  border-radius: var(--bw-radius); padding: 1.25rem 1.5rem;
  box-shadow: var(--bw-shadow);
}
.bw-stat-label { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--bw-muted); margin-bottom: .375rem; }
.bw-stat-value { font-size: 1.85rem; font-weight: 700; color: var(--bw-navy); line-height: 1.1; }
.bw-stat-sub   { font-size: .75rem; color: var(--bw-slate); margin-top: .25rem; }

/* ── Forms ── */
.form-control {
  display: block; width: 100%;
  padding: .625rem .875rem;
  border: 1.5px solid var(--bw-border);
  border-radius: var(--bw-radius-sm);
  font-family: var(--bw-font); font-size: .95rem;
  color: var(--bw-navy); background: #fff;
  transition: border-color var(--bw-transition), box-shadow var(--bw-transition);
}
.form-control:focus { outline: none; border-color: var(--bw-blue); box-shadow: 0 0 0 3px rgba(14,165,233,.15); }
.form-label  { display: block; font-weight: 600; font-size: .875rem; margin-bottom: .375rem; color: var(--bw-navy); }
.form-group  { margin-bottom: 1.25rem; }
.form-text   { font-size: .8rem; color: var(--bw-muted); margin-top: .25rem; }
.invalid-feedback { color: var(--bw-danger); font-size: .8rem; margin-top: .25rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="date"], textarea, select {
  font-family: var(--bw-font);
}

/* ── Alerts ── */
.alert {
  padding: 1rem 1.25rem; border-radius: var(--bw-radius-sm);
  border-left: 4px solid; margin-bottom: 1rem; font-size: .9rem;
}
.alert-success, .alert-info.success { background: #f0fdf4; border-color: var(--bw-success); color: #15803d; }
.alert-warning { background: #fffbeb; border-color: var(--bw-warning); color: #92400e; }
.alert-danger, .alert-error { background: #fef2f2; border-color: var(--bw-danger); color: #991b1b; }
.alert-info    { background: var(--bw-blue-light); border-color: var(--bw-blue); color: var(--bw-blue-dark); }

.bw-alert {
  padding: .875rem 1.125rem; border-radius: var(--bw-radius-sm);
  border-left: 4px solid var(--bw-blue); background: var(--bw-blue-light);
  color: var(--bw-blue-dark); margin: 1rem 0;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.bw-alert--success { background: #f0fdf4; border-color: var(--bw-success); color: #15803d; }
.bw-alert--warning { background: #fffbeb; border-color: var(--bw-warning); color: #92400e; }
.bw-alert--error, .bw-alert--danger { background: #fef2f2; border-color: var(--bw-danger); color: #991b1b; }
.bw-alert-close {
  background: none; border: none; font-size: 1.25rem;
  cursor: pointer; color: inherit; opacity: .6;
}
.bw-alert-close:hover { opacity: 1; }

/* ── Tables ── */
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th {
  padding: .75rem 1rem;
  border-bottom: 2px solid var(--bw-border);
  text-align: left; font-weight: 600;
  color: var(--bw-slate); font-size: .78rem;
  text-transform: uppercase; letter-spacing: .05em;
}
.table td { padding: .875rem 1rem; border-bottom: 1px solid var(--bw-border); }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--bw-surface); }

/* ── Progress bar ── */
.progress     { background: var(--bw-border); border-radius: 2rem; height: 8px; overflow: hidden; }
.progress-bar { height: 100%; background: var(--bw-blue); border-radius: 2rem; transition: width .4s ease; }

/* ── Footer ── */
.footer { background: var(--bw-navy); color: rgba(255,255,255,.7); padding: 4rem 0 2rem; }
.footer h5 { color: #fff; font-size: .85rem; margin-bottom: 1rem; letter-spacing: .04em; text-transform: uppercase; }
.footer a  { color: rgba(255,255,255,.55); font-size: .875rem; display: block; margin-bottom: .45rem; }
.footer a:hover { color: #fff; }
.footer-divider { border: 0; border-top: 1px solid rgba(255,255,255,.1); margin: 3rem 0 1.5rem; }
/* Three-column bottom row: brand / legal links / disclaimer.
   The previous flex+justify-between layout floated the disclaimer
   off to the right while .footer a { display:block } stacked the
   legal links vertically with the inline "·" separators stranded
   on their own lines. The grid + BEM children below fix both:
   legal anchors stay inline within a flex nav, separators are
   aria-hidden spans (not announced as list items), and the mobile
   breakpoint collapses to a single centered column. */
.footer-bottom {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 1rem 2rem;
  font-size: .78rem;
  color: rgba(255,255,255,.55);
  line-height: 1.55;
}
.footer-bottom__brand {
  margin: 0;
  color: rgba(255,255,255,.7);
  white-space: nowrap;
}
.footer-bottom__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .25rem .65rem;
}
.footer-bottom__sep {
  color: rgba(255,255,255,.3);
  user-select: none;
}
/* Override `.footer a { display: block; margin-bottom: .45rem }` for
   the legal-row anchors so they sit inline with separators. */
.footer-bottom__link {
  display: inline;
  margin: 0;
  color: rgba(255,255,255,.7);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.18);
  text-underline-offset: .15em;
}
.footer-bottom__link:hover {
  color: #fff;
  text-decoration-color: rgba(255,255,255,.55);
}
.footer-bottom__link:focus-visible {
  outline: 2px solid rgba(255,255,255,.7);
  outline-offset: 3px;
  border-radius: 2px;
  color: #fff;
}
.footer-bottom__disclaimer {
  margin: 0;
  max-width: 420px;
  text-align: right;
  color: rgba(255,255,255,.55);
}
@media (max-width: 860px) {
  .footer-bottom {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
  .footer-bottom__brand { white-space: normal; }
  .footer-bottom__disclaimer {
    text-align: center;
    max-width: 560px;
  }
}

/* ═══════════════════════════════════════════════════════
   PORTAL LAYOUT (member + operations)
   bw- prefixed classes used by existing portal templates
   ═══════════════════════════════════════════════════════ */

.bw-portal { display: flex; min-height: calc(100vh - 64px); }

.bw-sidebar {
  width: 240px; flex-shrink: 0;
  background: var(--bw-navy); color: #fff;
  padding: 1.5rem 1rem; display: flex; flex-direction: column; gap: 1.5rem;
  /* PR-11A: pin the nav to the viewport. `align-self: flex-start`
     prevents the default `align-items: stretch` on the .bw-portal
     flex container from inflating the sidebar to the parent's full
     height, which would suppress `position: sticky` and make the
     nav scroll with the page content. With this declaration the
     sidebar keeps its declared height and stays glued to top:64px
     (just under the global navbar) as the main content scrolls. */
  position: sticky; top: 64px; align-self: flex-start;
  height: calc(100vh - 64px);
  overflow-y: auto;
  z-index: 5;
}
.bw-sidebar-section { display: flex; flex-direction: column; gap: .25rem; }
.bw-sidebar-label {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255,255,255,.45); font-weight: 600;
  padding: 0 .5rem; margin-bottom: .5rem;
}
.bw-sidebar-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem .75rem; border-radius: var(--bw-radius-sm);
  color: rgba(255,255,255,.75); font-size: .88rem; font-weight: 500;
  transition: all var(--bw-transition);
}
.bw-sidebar-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.bw-sidebar-link.active { background: var(--bw-blue); color: #fff; }

.bw-portal-content {
  flex: 1; padding: 2rem; background: var(--bw-surface);
  min-width: 0;
}
.bw-portal-header { margin-bottom: 1.5rem; }
.bw-portal-header h1 { font-size: 1.6rem; margin-bottom: .25rem; }
.bw-portal-header p { color: var(--bw-slate); margin: 0; font-size: .95rem; }

.bw-portal-hero {
  background: linear-gradient(135deg, #0f172a 0%, #0284c7 100%);
  color: #fff; border-radius: var(--bw-radius);
  padding: 1.75rem 2rem;
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1.5rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.bw-portal-hero h1 { color: #fff; font-size: 1.6rem; margin-bottom: .5rem; }
.bw-portal-hero p  { color: rgba(255,255,255,.8); margin: 0 0 1rem; font-size: .95rem; }
.bw-portal-hero-badge {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--bw-radius-sm); padding: .75rem 1rem;
  text-align: right; min-width: 120px;
}
.bw-portal-hero-badge .num { font-size: 1.75rem; font-weight: 800; line-height: 1; color: #fff; }
.bw-portal-hero-badge .lbl { font-size: .75rem; color: rgba(255,255,255,.7); margin-top: .25rem; }

/* bw-cards (portal/ops) */
.bw-card {
  background: #fff; border: 1px solid var(--bw-border);
  border-radius: var(--bw-radius); padding: 1.25rem 1.5rem;
  box-shadow: var(--bw-shadow);
  margin-bottom: 1rem;
}
.bw-card-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--bw-slate); font-weight: 700; margin-bottom: .75rem; }

.bw-grid { display: grid; gap: 1rem; }
.bw-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.bw-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.bw-grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.bw-text-muted { color: var(--bw-muted); }
.bw-mb-8  { margin-bottom: .5rem; }
.bw-mb-16 { margin-bottom: 1rem; }
.bw-mb-24 { margin-bottom: 1.5rem; }

/* ── Utilities ── */
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mt-5 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2rem; } .mb-5 { margin-bottom: 3rem; }
.p-0 { padding: 0; } .p-3 { padding: 1.5rem; } .p-4 { padding: 2rem; }
.w-100 { width: 100%; }
.d-none { display: none; } .d-flex { display: flex; }
.rounded { border-radius: var(--bw-radius); }
.shadow  { box-shadow: var(--bw-shadow-md); }

/* bw-main wrapper set by base.html so fixed navbar has offset if needed */
.bw-main { display: block; }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .bw-portal { flex-direction: column; }
  .bw-sidebar { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; gap: .5rem; padding: 1rem; }
  .bw-sidebar-section { flex: 1; min-width: 220px; }
}

@media (max-width: 768px) {
  .navbar-nav, .navbar-actions { display: none; }
  .navbar-toggle { display: inline-flex; }
  .pricing-card.featured { transform: none; }
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .hero { padding: 4rem 0 3rem; }
  .section { padding: 3.5rem 0; }
  .bw-portal-content { padding: 1.25rem; }
}

/* ═══════════════════════════════════════════════════════
   PORTAL EXTRAS — bw- classes used by wizard, messaging,
   ops detail, and other portal templates.
   Kept here so templates authored with the legacy vocabulary
   continue to render against the merged design system.
   ═══════════════════════════════════════════════════════ */

/* Legacy color var aliases used inline in some templates */
:root {
  --text-primary:   var(--bw-navy);
  --text-secondary: var(--bw-slate);
  --text-tertiary:  var(--bw-muted);
  --bg-primary:     var(--bw-white);
  --bg-secondary:   var(--bw-surface);
  --bw-gray-100:    #f1f5f9;
  --bw-gray-200:    #e2e8f0;
  --bw-gray-300:    #cbd5e1;
  --bw-gray-400:    #94a3b8;
  --bw-gray-500:    #64748b;
}

/* bw- buttons (portal templates) */
.bw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .55rem 1.1rem;
  border-radius: var(--bw-radius-sm);
  font-family: var(--bw-font);
  font-weight: 600; font-size: .875rem;
  border: 1.5px solid transparent; cursor: pointer;
  transition: all var(--bw-transition);
  text-decoration: none; white-space: nowrap;
  background: var(--bw-surface); color: var(--bw-navy);
}
.bw-btn:hover { background: var(--bw-surface-d); }
.bw-btn--primary { background: var(--bw-blue); color: #fff; border-color: var(--bw-blue); }
.bw-btn--primary:hover { background: var(--bw-blue-dark); border-color: var(--bw-blue-dark); color: #fff; }
.bw-btn--outline { background: transparent; color: var(--bw-blue); border-color: var(--bw-blue); }
.bw-btn--outline:hover { background: var(--bw-blue); color: #fff; }
.bw-btn--ghost   { background: transparent; color: var(--bw-slate); border-color: transparent; }
.bw-btn--ghost:hover { background: var(--bw-surface); }
.bw-btn--sm  { padding: .375rem .75rem; font-size: .78rem; }
.bw-btn--md  { padding: .55rem 1.1rem; font-size: .875rem; }
.bw-btn--lg  { padding: .75rem 1.5rem; font-size: .95rem; }
.bw-btn--full { width: 100%; }

/* bw- forms (portal) */
.bw-form { display: grid; gap: 1rem; }
.bw-field { display: flex; flex-direction: column; gap: .375rem; }
.bw-field label {
  font-weight: 600; font-size: .78rem;
  color: var(--bw-slate); letter-spacing: .02em;
}
.bw-field input, .bw-field textarea, .bw-field select {
  padding: .55rem .85rem;
  border: 1.5px solid var(--bw-border);
  border-radius: var(--bw-radius-sm);
  font-size: .92rem; font-family: var(--bw-font);
  color: var(--bw-navy); background: #fff;
  transition: border-color var(--bw-transition), box-shadow var(--bw-transition);
}
.bw-field input:focus, .bw-field textarea:focus, .bw-field select:focus {
  outline: none; border-color: var(--bw-blue);
  box-shadow: 0 0 0 3px rgba(14,165,233,.15);
}
.bw-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.bw-form-actions { display: flex; gap: .75rem; margin-top: .5rem; }

/* bw- alert box (onboarding wizard / inline notices) */
.bw-alert-box {
  padding: .875rem 1.125rem; border-radius: var(--bw-radius-sm);
  border-left: 4px solid var(--bw-blue);
  background: var(--bw-blue-light); color: var(--bw-blue-dark);
  font-size: .88rem; line-height: 1.55;
}
.bw-alert-box.info     { background: var(--bw-blue-light); border-color: var(--bw-blue); color: var(--bw-blue-dark); }
.bw-alert-box.success  { background: #f0fdf4; border-color: var(--bw-success); color: #15803d; }
.bw-alert-box.warning  { background: #fffbeb; border-color: var(--bw-warning); color: #92400e; }
.bw-alert-box.danger   { background: #fef2f2; border-color: var(--bw-danger); color: #991b1b; }

/* bw- dividers */
.bw-divider { border: 0; border-top: 1px solid var(--bw-border); margin: 1.5rem 0; }

/* bw- progress (onboarding) */
.bw-progress-label {
  display: flex; justify-content: space-between;
  font-size: .75rem; color: var(--bw-slate);
  margin-bottom: .375rem;
}
.bw-progress-bar {
  height: 8px; background: var(--bw-border);
  border-radius: 2rem; overflow: hidden;
  margin-bottom: 1rem;
}
.bw-progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--bw-blue), var(--bw-teal));
  border-radius: 2rem; transition: width .4s ease;
}

/* Onboarding step indicator pills */
.bw-onboard-step-indicator {
  display: flex; flex-wrap: wrap; gap: .375rem;
  margin-bottom: 1.5rem;
}
.bw-os-step {
  padding: .3rem .625rem;
  border-radius: 2rem;
  font-size: .72rem; font-weight: 600;
  background: var(--bw-gray-100); color: var(--bw-slate);
  border: 1px solid var(--bw-border);
}
.bw-os-step.done { background: var(--bw-teal-light); color: #0f766e; border-color: var(--bw-teal-light); }
.bw-os-step.curr { background: var(--bw-blue); color: #fff; border-color: var(--bw-blue); }

/* bw- table (ops directory) */
.bw-table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--bw-border); border-radius: var(--bw-radius); }
.bw-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.bw-table th {
  padding: .75rem 1rem;
  text-align: left; font-weight: 600;
  color: var(--bw-slate); font-size: .74rem;
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 2px solid var(--bw-border);
  background: var(--bw-surface);
}
.bw-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--bw-border); color: var(--bw-navy); }
.bw-table tr:last-child td { border-bottom: none; }
.bw-table tr:hover td { background: var(--bw-surface); }

/* bw- messaging (inbox/thread) */
.bw-thread { display: flex; flex-direction: column; gap: .75rem; padding: .5rem 0; }
.bw-bubble {
  max-width: 80%; padding: .625rem .875rem;
  border-radius: 1rem; font-size: .9rem; line-height: 1.55;
  word-wrap: break-word;
}
.bw-bubble--theirs { background: var(--bw-surface); color: var(--bw-navy); border: 1px solid var(--bw-border); align-self: flex-start; }
.bw-bubble--mine   { background: var(--bw-blue); color: #fff; align-self: flex-end; }
.bw-bubble-meta    { font-size: .7rem; color: var(--bw-muted); margin-top: .25rem; }

.bw-message-row {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .75rem 1rem; border-bottom: 1px solid var(--bw-border);
  transition: background var(--bw-transition);
}
.bw-message-row:hover { background: var(--bw-surface); }
.bw-message-row--unread { background: rgba(14,165,233,.05); }
.bw-message-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bw-blue-light); color: var(--bw-blue);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem; flex-shrink: 0;
}

/* bw- badge extras */
.bw-badge--active  { background: #dcfce7; color: #15803d; }

/* Additional text / spacing utilities used inline */
.bw-text-xs { font-size: .72rem; }
.bw-text-sm { font-size: .85rem; }

.bw-mt-8  { margin-top: .5rem; }
.bw-mt-16 { margin-top: 1rem; }
.bw-mt-24 { margin-top: 1.5rem; }
.bw-mt-32 { margin-top: 2rem; }
.bw-mb-8  { margin-bottom: .5rem; }
.bw-mb-16 { margin-bottom: 1rem; }
.bw-mb-24 { margin-bottom: 1.5rem; }
.bw-mb-32 { margin-bottom: 2rem; }

.bw-flex-between { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }

@media (max-width: 640px) {
  .bw-field-row { grid-template-columns: 1fr; }
  .bw-form-actions { flex-direction: column; }
  .bw-bubble { max-width: 90%; }
}

/* ═══════════════════════════════════════════════════════
   IMAGE HELPERS — split hero, feature images, portal brand
   ═══════════════════════════════════════════════════════ */

/* Navbar logo sizing safety */
.navbar-logo { height: 40px; width: auto; max-height: 40px; object-fit: contain; }
.footer-logo { height: 48px; width: auto; max-height: 48px; object-fit: contain; }

/* Split hero: copy left, image right (stacks on small screens) */
.split-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}
.split-hero-text  { min-width: 0; }
.split-hero-media { min-width: 0; }
.split-hero h1, .split-hero h2 { color: var(--bw-navy); }

/* Reusable card/feature image with aspect ratio + safe cropping */
.feature-img {
  width: 100%;
  height: auto;
  max-height: 520px;
  border-radius: var(--bw-radius);
  object-fit: cover;
  box-shadow: var(--bw-shadow-md);
  display: block;
}
.feature-img--top {
  border-radius: var(--bw-radius) var(--bw-radius) 0 0;
  max-height: 220px;
  box-shadow: none;
  aspect-ratio: 16 / 9;
}

/* Results banner (member progress_log) — image right, copy left */
.results-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 220px);
  gap: 1.25rem;
  align-items: center;
  overflow: hidden;
}
.results-banner-img {
  width: 100%; height: 100%;
  max-height: 160px;
  object-fit: cover;
  border-radius: var(--bw-radius-sm);
}
.results-banner-text { min-width: 0; }

/* Portal sidebar brand (icon + wordmark) */
.bw-sidebar-brand {
  display: flex; align-items: center; gap: .55rem;
  padding: .75rem .5rem 1rem;
  margin-bottom: .25rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #fff; font-weight: 700; font-size: 1rem;
  letter-spacing: -.01em;
  text-decoration: none;
}
.bw-sidebar-brand img {
  width: 26px; height: 26px; object-fit: contain;
  opacity: .95;
}
.bw-sidebar-brand:hover { color: var(--bw-sky); }

@media (max-width: 960px) {
  .split-hero { grid-template-columns: 1fr; gap: 2rem; }
  .split-hero-media { order: -1; }                /* photo first on mobile for visual */
  .feature-img { max-height: 360px; }
  .results-banner { grid-template-columns: 1fr; }
  .results-banner-img { max-height: 180px; order: -1; }
  .bw-sidebar-brand { border-bottom: none; padding: .5rem; }
}

/* ─── Cookie consent ─────────────────────────────────────────────
   Banner sits at the bottom of the viewport, non-modal so the page
   below stays interactive (intake forms, login, payment must keep
   working while the banner is up). Modal is the preferences UI;
   strictly necessary toggle is visually locked. */

.bw-cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 -8px 32px rgba(0,0,0,.08);
  padding: 1rem 1.25rem;
  font-size: .9rem;
  line-height: 1.5;
}
.bw-cookie-banner__inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap;
}
.bw-cookie-banner__copy { flex: 1 1 380px; min-width: 0; }
.bw-cookie-banner__title {
  margin: 0 0 .25rem 0; font-size: 1rem; font-weight: 600;
  color: var(--bw-ink, #0e1b2c);
}
.bw-cookie-banner__body { margin: 0; color: var(--bw-text-secondary, #4a5360); }
.bw-cookie-banner__actions { display: flex; gap: .5rem; flex-wrap: wrap; flex-shrink: 0; }

@media (max-width: 640px) {
  .bw-cookie-banner__inner { flex-direction: column; align-items: stretch; }
  .bw-cookie-banner__actions { justify-content: flex-end; }
}

.bw-cookie-modal[hidden] { display: none; }
.bw-cookie-modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.bw-cookie-modal__backdrop { position: absolute; inset: 0; background: rgba(14, 27, 44, .55); }
.bw-cookie-modal__panel {
  position: relative; background: #fff;
  border-radius: 12px; box-shadow: 0 24px 64px rgba(0,0,0,.24);
  width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
  padding: 1.5rem;
}
.bw-cookie-modal__header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; margin-bottom: .5rem;
}
.bw-cookie-modal__header h2 { margin: 0; font-size: 1.25rem; font-weight: 600; }
.bw-cookie-modal__close {
  background: transparent; border: 0; font-size: 1.5rem; line-height: 1;
  cursor: pointer; color: var(--bw-text-tertiary, #6b7480); padding: 0 .25rem;
}
.bw-cookie-modal__close:hover { color: var(--bw-ink, #0e1b2c); }
.bw-cookie-modal__intro { font-size: .9rem; color: var(--bw-text-secondary, #4a5360); margin: 0 0 1rem 0; }
.bw-cookie-modal__categories { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.25rem; }
.bw-cookie-modal__actions {
  display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap;
  border-top: 1px solid rgba(0,0,0,.06); padding-top: 1rem;
}

.bw-cookie-cat {
  border: 1px solid rgba(0,0,0,.08); border-radius: 8px; padding: .75rem .9rem;
}
.bw-cookie-cat__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.bw-cookie-cat__name { font-weight: 600; font-size: .95rem; color: var(--bw-ink, #0e1b2c); }
.bw-cookie-cat__body {
  margin: .35rem 0 0 0; font-size: .82rem;
  color: var(--bw-text-secondary, #4a5360); line-height: 1.5;
}

.bw-cookie-cat__toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.bw-cookie-cat__toggle input { position: absolute; opacity: 0; }
.bw-cookie-cat__switch {
  display: inline-block; width: 36px; height: 20px;
  background: #cbd2da; border-radius: 999px;
  position: relative; transition: background .15s ease;
}
.bw-cookie-cat__switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; background: #fff;
  border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: left .15s ease;
}
.bw-cookie-cat__toggle input:checked ~ .bw-cookie-cat__switch { background: #1f6feb; }
.bw-cookie-cat__toggle input:checked ~ .bw-cookie-cat__switch::after { left: 18px; }
.bw-cookie-cat__toggle--locked {
  font-size: .75rem; color: var(--bw-text-tertiary, #6b7480);
  text-transform: uppercase; letter-spacing: .04em; cursor: not-allowed;
}

body.bw-cookie-modal-open { overflow: hidden; }


/* ──────────────────────────────────────────────────────────────────
   Homepage redesign — image-led editorial layout.
   Scoped under .bw-home-* so these rules don't bleed into other
   marketing pages. The existing .hero, .split-hero, .grid, .card
   primitives still drive the bones; this block adds picture-frame,
   editorial-cover, and storytelling layouts that the redesigned
   templates/marketing/home.html relies on.
   ────────────────────────────────────────────────────────────────── */

/* Wide editorial cover image at the top of a section. Used by
   "How it works" (Bgw04), "Why BridgeWell" (Bgw06), and "Plans
   preview" (Bgw07). Aspect-ratio guarantees no CLS while large PNGs
   decode. */
.bw-home-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: var(--bw-surface, #f5f7fa);
  box-shadow: 0 12px 32px -16px rgba(15, 23, 42, .35);
  margin-bottom: 2.5rem;
}
.bw-home-cover img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.bw-home-cover--portrait {
  aspect-ratio: 4 / 3;
}

/* Side-by-side image + copy. Mirrors .split-hero but with finer
   control over image position and a softer shadow + rounded frame.
   .bw-home-split--reverse swaps the order on desktop for visual
   rhythm contrast. */
.bw-home-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}
.bw-home-split--reverse > .bw-home-split-media { order: 2; }
.bw-home-split-media img {
  width: 100%; height: auto;
  border-radius: 18px;
  display: block;
  box-shadow: 0 12px 32px -16px rgba(15, 23, 42, .35);
  aspect-ratio: 4 / 3;
  object-fit: cover; object-position: center;
}
.bw-home-split-text   { min-width: 0; }
.bw-home-split-text h2 { color: var(--bw-navy); }

@media (max-width: 960px) {
  .bw-home-split { grid-template-columns: 1fr; gap: 1.75rem; }
  .bw-home-split--reverse > .bw-home-split-media { order: -1; }
}

/* Step rail used by the 4-step "How it works" module. */
.bw-home-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}
.bw-home-step {
  position: relative;
  padding: 1.5rem 1.5rem 1.75rem;
  background: #fff;
  border: 1px solid var(--bw-border, #e5e7eb);
  border-radius: 14px;
  transition: box-shadow .18s ease, transform .18s ease;
}
.bw-home-step:hover {
  box-shadow: 0 12px 28px -16px rgba(15, 23, 42, .25);
  transform: translateY(-2px);
}
.bw-home-step-num {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem; letter-spacing: .08em;
  color: var(--bw-blue, #0ea5e9);
  margin-bottom: .55rem;
}
.bw-home-step h3 {
  font-size: 1.05rem;
  color: var(--bw-navy);
  margin: 0 0 .5rem;
  line-height: 1.3;
}
.bw-home-step p {
  font-size: .9rem;
  color: var(--bw-slate, #475569);
  line-height: 1.6;
  margin: 0;
}

/* Member-stories layout: tall image rail on the left, two stacked
   testimonial cards on the right. Collapses to image-on-top + cards
   below on small screens. */
.bw-home-stories {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 2rem;
  align-items: stretch;
}
.bw-home-stories-media {
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  min-height: 420px;
  background: var(--bw-surface, #f5f7fa);
  box-shadow: 0 12px 32px -16px rgba(15, 23, 42, .35);
}
.bw-home-stories-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.bw-home-stories-list {
  display: flex; flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.bw-home-story-card {
  background: #fff;
  border: 1px solid var(--bw-border, #e5e7eb);
  border-radius: 14px;
  padding: 1.5rem 1.5rem 1.25rem;
  flex: 1;
  display: flex; flex-direction: column;
  justify-content: space-between;
}
.bw-home-story-card .quote {
  font-size: 1rem;
  color: var(--bw-navy, #0f172a);
  line-height: 1.6;
  margin: 0 0 1rem;
}
.bw-home-story-card .quote::before { content: "“"; color: var(--bw-blue); font-weight: 700; margin-right: .15rem; }
.bw-home-story-card .quote::after  { content: "”"; color: var(--bw-blue); font-weight: 700; margin-left: .15rem; }
.bw-home-story-card .meta {
  font-size: .8rem;
  color: var(--bw-muted, #6b7480);
  margin: 0;
}
.bw-home-story-card .placeholder-tag {
  display: inline-block;
  font-size: .65rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bw-blue, #0ea5e9);
  background: rgba(14, 165, 233, .08);
  padding: .15rem .5rem; border-radius: 999px;
  margin-bottom: .75rem;
  font-weight: 600;
}
@media (max-width: 960px) {
  .bw-home-stories { grid-template-columns: 1fr; }
  .bw-home-stories-media { min-height: 280px; }
}

/* Program-preview pathway cards under the Bgw07 cover. Three cards;
   the middle is highlighted as the flagship plan. */
.bw-home-pathways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}
.bw-home-pathway {
  background: #fff;
  border: 1px solid var(--bw-border, #e5e7eb);
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  display: flex; flex-direction: column;
  gap: .65rem;
  transition: box-shadow .18s ease, transform .18s ease;
}
.bw-home-pathway:hover {
  box-shadow: 0 14px 32px -16px rgba(15, 23, 42, .28);
  transform: translateY(-2px);
}
.bw-home-pathway--featured {
  border-color: var(--bw-blue, #0ea5e9);
  box-shadow: 0 10px 28px -16px rgba(14, 165, 233, .55);
  position: relative;
}
.bw-home-pathway--featured::before {
  content: "Most popular";
  position: absolute;
  top: -.6rem; left: 1.25rem;
  background: var(--bw-blue, #0ea5e9);
  color: #fff;
  font-size: .65rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700;
  padding: .25rem .55rem;
  border-radius: 999px;
}
.bw-home-pathway h3 {
  font-size: 1.1rem; color: var(--bw-navy);
  margin: 0;
}
.bw-home-pathway .tagline {
  font-size: .85rem;
  color: var(--bw-blue, #0ea5e9);
  font-weight: 600;
  margin: 0;
}
.bw-home-pathway .highlight {
  font-size: .9rem;
  color: var(--bw-slate, #475569);
  line-height: 1.6;
  margin: 0;
}

/* FAQ preview accordion-style cards. Native <details>/<summary> so
   we don't introduce JS just for the homepage. */
.bw-home-faq {
  display: flex; flex-direction: column;
  gap: .75rem;
}
.bw-home-faq details {
  background: #fff;
  border: 1px solid var(--bw-border, #e5e7eb);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
}
.bw-home-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--bw-navy, #0f172a);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.bw-home-faq summary::-webkit-details-marker { display: none; }
.bw-home-faq summary::after {
  content: "+";
  color: var(--bw-blue, #0ea5e9);
  font-size: 1.4rem;
  line-height: 1;
  transition: transform .2s ease;
}
.bw-home-faq details[open] summary::after { transform: rotate(45deg); }
.bw-home-faq .answer {
  padding: 0 1.25rem 1.1rem;
  color: var(--bw-slate, #475569);
  font-size: .95rem;
  line-height: 1.6;
  margin: 0;
}

/* Editorial hero image — replaces the previous .hero-image rule for
   the homepage only. Aspect-ratio-locked so the navy gradient hero
   keeps a stable height while a 1.7 MB PNG decodes. */
.bw-home-hero-media {
  width: 100%;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .55);
}
.bw-home-hero-media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* Differentiator card grid — visually denser than .grid-3 cards on
   why_bridgewell, but less heavy than the current homepage. */
.bw-home-diff {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}
.bw-home-diff-card {
  background: #fff;
  border: 1px solid var(--bw-border, #e5e7eb);
  border-radius: 14px;
  padding: 1.4rem 1.4rem 1.5rem;
  transition: box-shadow .18s ease, transform .18s ease;
}
.bw-home-diff-card:hover {
  box-shadow: 0 10px 28px -16px rgba(15, 23, 42, .25);
  transform: translateY(-2px);
}
.bw-home-diff-card .ic {
  font-size: 1.6rem;
  margin-bottom: .65rem;
  display: block;
}
.bw-home-diff-card h3 {
  font-size: 1rem;
  color: var(--bw-navy);
  margin: 0 0 .35rem;
  line-height: 1.3;
}
.bw-home-diff-card p {
  font-size: .9rem;
  color: var(--bw-slate, #475569);
  line-height: 1.55;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────
   Member dashboard (Weight Journey) — additive, scoped
   ───────────────────────────────────────────────────────────── */

.bw-trend-card {
  background: #fff;
  border: 1px solid var(--bw-border, #e5e7eb);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 16px;
}
.bw-trend-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.bw-trend-card__head h2 {
  font-size: 16px;
  color: var(--bw-navy, #0f172a);
  margin: 0;
  letter-spacing: -0.2px;
}
.bw-trend-card__sub {
  font-size: 12px;
  color: var(--text-tertiary, #64748b);
  margin: 4px 0 0;
}
.bw-trend-card__chart {
  margin: 8px 0 4px;
}
.bw-trend-card__chart--strip {
  margin-bottom: 0;
}
.bw-trend-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: var(--text-tertiary, #64748b);
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--bw-border, #f1f5f9);
}
.bw-trend-card__cta {
  font-size: 11px;
  color: var(--bw-blue, #0ea5e9);
  text-decoration: none;
  font-weight: 500;
}
.bw-trend-card__empty {
  padding: 18px 4px;
  text-align: center;
}
.bw-trend-card__empty p {
  font-size: 13px;
  color: var(--text-tertiary, #64748b);
  margin: 0 0 10px;
}
.bw-trend-card__recap {
  font-size: 12px;
  color: var(--text-secondary, #475569);
  line-height: 1.6;
  margin: 10px 0 0;
  padding: 8px 10px;
  background: rgba(148, 163, 184, 0.06);
  border-radius: 6px;
}
.bw-trend-card__recap-at {
  display: block;
  font-size: 10px;
  color: var(--text-tertiary, #94a3b8);
  margin-top: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Daily-adherence strip color-key legend — Food / Movement tracker
   cards. Swatch colors are set via inline `style` from
   apps/patients/charts.adherence_legend_items so the swatches and
   the SVG bars share a single source. Wraps cleanly on narrow
   viewports (≤420px the chips fall onto two lines). */
.bw-trend-card__legend {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 11px;
  color: var(--text-tertiary, #64748b);
}
.bw-trend-card__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.3;
}
.bw-trend-card__legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
  display: inline-block;
}
.bw-trend-card__legend-label {
  white-space: nowrap;
}

.bw-range-toggle {
  display: inline-flex;
  background: rgba(148, 163, 184, 0.08);
  border-radius: 999px;
  padding: 2px;
}
.bw-range-toggle__opt {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary, #475569);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.bw-range-toggle__opt.is-active {
  background: #fff;
  color: var(--bw-navy, #0f172a);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.bw-pct-pill {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.12);
  color: #0d9488;
  white-space: nowrap;
}
.bw-pct-pill--neutral {
  background: rgba(148, 163, 184, 0.15);
  color: var(--bw-navy, #0f172a);
}

.bw-phase-pill {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.1);
  color: var(--bw-blue, #0ea5e9);
  white-space: nowrap;
}
.bw-phase-pill--maintenance {
  background: rgba(20, 184, 166, 0.12);
  color: #0d9488;
}
.bw-phase-pill--taper {
  background: rgba(249, 115, 22, 0.1);
  color: #c2410c;
}
.bw-phase-pill--onboarding {
  background: rgba(148, 163, 184, 0.15);
  color: var(--bw-navy, #0f172a);
}

.bw-milestone {
  margin-top: 6px;
}
.bw-milestone__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: var(--text-secondary, #475569);
  margin-bottom: 6px;
}
.bw-milestone__pct {
  font-weight: 600;
  color: var(--bw-navy, #0f172a);
}
.bw-milestone__bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.15);
  overflow: hidden;
}
.bw-milestone__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--bw-teal, #14b8a6), var(--bw-blue, #0ea5e9));
  border-radius: 999px;
}
.bw-milestone__detail {
  font-size: 12px;
  color: var(--text-tertiary, #64748b);
  margin: 6px 0 0;
}

.bw-insight {
  background: #fff;
  border: 1px solid var(--bw-border, #e5e7eb);
  border-left: 3px solid rgba(148, 163, 184, 0.6);
  border-radius: 8px;
  padding: 12px 14px;
}
.bw-insight--positive { border-left-color: var(--green-mid, #16a34a); }
.bw-insight--neutral  { border-left-color: var(--bw-blue, #0ea5e9); }
.bw-insight--warn     { border-left-color: #f59e0b; }
.bw-insight--alert    { border-left-color: #b91c1c; }
.bw-insight__text {
  font-size: 13px;
  color: var(--text-secondary, #475569);
  line-height: 1.55;
  margin: 0;
}
.bw-insight__cta {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  color: var(--bw-blue, #0ea5e9);
  font-weight: 500;
  text-decoration: none;
}

.bw-action-card {
  display: block;
  background: #fff;
  border: 1px solid var(--bw-border, #e5e7eb);
  border-radius: 8px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, transform .15s;
}
.bw-action-card:hover {
  border-color: var(--bw-blue, #0ea5e9);
  transform: translateY(-1px);
}
.bw-action-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--bw-navy, #0f172a);
  margin: 0 0 6px;
}
.bw-action-card__body {
  font-size: 12px;
  color: var(--text-tertiary, #64748b);
  margin: 0 0 8px;
  line-height: 1.55;
}
.bw-action-card__cta {
  font-size: 11px;
  color: var(--bw-blue, #0ea5e9);
  font-weight: 500;
  margin: 0;
}

.bw-bp-form {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--bw-border, #f1f5f9);
}
.bw-bp-form__row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.bw-bp-form__row input[type="number"] {
  width: 64px;
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid var(--bw-border, #e5e7eb);
  border-radius: 6px;
}
.bw-bp-form__sep {
  font-size: 16px;
  color: var(--text-tertiary, #64748b);
}
.bw-bp-form__hint {
  font-size: 10px;
  color: var(--text-tertiary, #94a3b8);
  margin: 6px 0 0;
}

.bw-chart-svg {
  display: block;
  width: 100%;
}

/* ─────────────────────────────────────────────────────────────
   Sprint 2 — taper readiness, plateau, non-scale victories
   ───────────────────────────────────────────────────────────── */

.bw-readiness-pill {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  background: rgba(148, 163, 184, 0.15);
  color: var(--bw-navy, #0f172a);
}
.bw-readiness-pill--ready_for_review     { background: rgba(20, 184, 166, 0.18); color: #0d9488; }
.bw-readiness-pill--approaching_readiness { background: rgba(14, 165, 233, 0.15); color: var(--bw-blue, #0ea5e9); }
.bw-readiness-pill--building_readiness    { background: rgba(245, 158, 11, 0.15); color: #b45309; }
.bw-readiness-pill--not_ready             { background: rgba(148, 163, 184, 0.20); color: var(--text-secondary, #475569); }
.bw-readiness-pill--insufficient_data     { background: rgba(148, 163, 184, 0.15); color: var(--text-tertiary, #64748b); }

.bw-readiness-meter {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
}
.bw-readiness-meter__bar {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.15);
  overflow: hidden;
}
.bw-readiness-meter__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bw-teal, #14b8a6), var(--bw-blue, #0ea5e9));
}
.bw-readiness-meter__fill--not_ready          { background: rgba(148, 163, 184, 0.55); }
.bw-readiness-meter__fill--building_readiness { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.bw-readiness-meter__value {
  font-size: 14px;
  font-weight: 600;
  color: var(--bw-navy, #0f172a);
  margin: 0;
}

.bw-readiness-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.bw-readiness-list li {
  font-size: 12px;
  color: var(--text-secondary, #475569);
  margin: 4px 0;
  padding-left: 18px;
  position: relative;
}
.bw-readiness-list--positive li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green-mid, #16a34a);
  font-weight: 700;
}
.bw-readiness-list--blockers li::before {
  content: "·";
  position: absolute;
  left: 4px;
  color: #b45309;
  font-weight: 700;
}

.bw-plateau-pill {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-secondary, #475569);
}
.bw-plateau-pill--progressing       { background: rgba(20, 184, 166, 0.18); color: #0d9488; }
.bw-plateau-pill--likely_plateau    { background: rgba(245, 158, 11, 0.18); color: #b45309; }
.bw-plateau-pill--possible_plateau  { background: rgba(245, 158, 11, 0.10); color: #b45309; }
.bw-plateau-pill--adherence_gap     { background: rgba(14, 165, 233, 0.15); color: var(--bw-blue, #0ea5e9); }
.bw-plateau-pill--insufficient_data { background: rgba(148, 163, 184, 0.18); color: var(--text-tertiary, #64748b); }

.bw-victory-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 12px;
}
.bw-victory-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--bw-border, #f1f5f9);
  font-size: 13px;
}
.bw-victory-row:last-child { border-bottom: 0; }
.bw-victory-row__kind {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bw-blue, #0ea5e9);
  background: rgba(14, 165, 233, 0.08);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.bw-victory-row__note {
  flex: 1;
  color: var(--text-secondary, #475569);
}
.bw-victory-row__time {
  font-size: 11px;
  color: var(--text-tertiary, #94a3b8);
  white-space: nowrap;
}

.bw-nsv-form {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--bw-border, #f1f5f9);
}
.bw-nsv-form__kind {
  flex: 0 0 auto;
  padding: 6px 8px;
  font-size: 12px;
  border: 1px solid var(--bw-border, #e5e7eb);
  border-radius: 6px;
  background: #fff;
}
.bw-nsv-form__note {
  flex: 1;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid var(--bw-border, #e5e7eb);
  border-radius: 6px;
}

/* ─────────────────────────────────────────────────────────────
   Sprint 3 — smart nudges + handoff
   ───────────────────────────────────────────────────────────── */

.bw-nudge-card {
  display: block;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.06), rgba(14, 165, 233, 0.06));
  border: 1px solid var(--bw-border, #e5e7eb);
  border-left: 3px solid var(--bw-blue, #0ea5e9);
  border-radius: 10px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.bw-nudge-card:hover {
  border-color: var(--bw-blue, #0ea5e9);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.bw-nudge-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--bw-navy, #0f172a);
  margin: 0 0 6px;
}
.bw-nudge-card__body {
  font-size: 12px;
  color: var(--text-secondary, #475569);
  line-height: 1.55;
  margin: 0 0 8px;
}
.bw-nudge-card__cta {
  font-size: 11px;
  color: var(--bw-blue, #0ea5e9);
  font-weight: 500;
  margin: 0;
}
.bw-nudge-card--nudge_plateau_likely    { border-left-color: #f59e0b; }
.bw-nudge-card--nudge_taper_ready       { border-left-color: #0d9488; }
.bw-nudge-card--nudge_taper_approaching { border-left-color: var(--bw-blue, #0ea5e9); }
.bw-nudge-card--nudge_adherence_drop    { border-left-color: #b45309; }
.bw-nudge-card--nudge_missed_logging    { border-left-color: var(--text-tertiary, #94a3b8); }
.bw-nudge-card--nudge_strong_streak     { border-left-color: var(--green-mid, #16a34a); }
.bw-nudge-card--nudge_milestone_reached { border-left-color: var(--green-mid, #16a34a); }
.bw-nudge-card--nudge_weekly_review_ready { border-left-color: var(--bw-blue, #0ea5e9); }
.bw-nudge-card--nudge_streak_at_risk    { border-left-color: #b45309; }
.bw-nudge-card--nudge_streak_resumed    { border-left-color: var(--green-mid, #16a34a); }

.bw-handoff-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(20, 184, 166, 0.12);
  color: #0d9488;
  border-radius: 999px;
  vertical-align: middle;
}

/* ── Sprint 4 — Habit tracker / streak strip ─────────────────────── */
.bw-habits { margin-bottom: 16px; }
.bw-habits__pill {
  display: inline-block;
  padding: 3px 10px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  vertical-align: middle;
}
.bw-habits__pill--at-risk { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.bw-habits__pill--resumed { background: rgba(22, 163, 74, 0.14); color: #15803d; }
.bw-habits__totals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 12px 0 14px;
}
.bw-habits__total {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--surface-2, #f8fafc);
  border-radius: 10px;
}
.bw-habits__total-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--bw-navy, #0f172a);
  line-height: 1;
}
.bw-habits__total-tail {
  font-size: 14px;
  color: var(--text-tertiary, #94a3b8);
  font-weight: 500;
}
.bw-habits__total-label {
  font-size: 11px;
  color: var(--text-tertiary, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bw-habits__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.bw-habits__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  background: var(--surface-2, #f8fafc);
  border-radius: 8px;
  border: 1px solid transparent;
}
.bw-habits__day--today {
  border-color: var(--bw-blue, #0ea5e9);
  background: rgba(14, 165, 233, 0.06);
}
.bw-habits__date {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary, #94a3b8);
}
.bw-habits__num {
  font-size: 11px;
  color: var(--text-secondary, #475569);
  font-variant-numeric: tabular-nums;
}
.bw-habits__dots {
  display: flex;
  gap: 3px;
  margin: 2px 0;
}
.bw-habits__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.25);
  display: inline-block;
}
.bw-habits__dot--meal.is-on     { background: #0ea5e9; }
.bw-habits__dot--movement.is-on { background: #16a34a; }
.bw-habits__dot--weight.is-on   { background: #8b5cf6; }
.bw-habits__legend {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--text-tertiary, #94a3b8);
  margin: 12px 0 0;
}
.bw-habits__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Visually-hidden utility — accessible to screen readers only.
   Used by the tracker cards' chart-summary line, by the leads form
   helper labels, and by any future surface that needs SR text without
   on-screen rendering. WCAG-recommended clip pattern. */
.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;
}

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHELL v2 — Portal UX sprint
   Unified header + grouped sidebar + dashboard hierarchy
   ═══════════════════════════════════════════════════════════════ */

/* ── Portal header bar ───────────────────────────────────────────
   Authenticated portal pages slot a contextual header into the
   .bw-portal-content column. Sits flush against the sticky navbar
   and the navy sidebar so the eye reads them as one shell. */
.bw-portal-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem;
  padding: 1rem 2rem;
  background: #fff;
  border-bottom: 1px solid var(--bw-border);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .03);
  margin: -2rem -2rem 1.5rem;
}
.bw-portal-topbar-title h1 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--bw-navy);
  letter-spacing: -.01em;
}
.bw-portal-topbar-title p {
  margin: 2px 0 0;
  font-size: .82rem;
  color: var(--bw-slate);
  line-height: 1.4;
}
.bw-portal-topbar-actions {
  display: flex; align-items: center; gap: .5rem;
  flex-shrink: 0;
}

/* ── Account dropdown (uses native <details>) ────────────────────
   No JS — <details>/<summary> handles open/close + accessibility.
   The chevron rotates via [open] selector. */
.bw-account-menu { position: relative; }
.bw-account-menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .75rem;
  border-radius: var(--bw-radius-sm);
  font-size: .85rem; font-weight: 500;
  color: var(--bw-navy);
  background: var(--bw-surface);
  border: 1px solid var(--bw-border);
  transition: background var(--bw-transition);
}
.bw-account-menu > summary::-webkit-details-marker { display: none; }
.bw-account-menu > summary:hover { background: #fff; border-color: var(--bw-blue); }
.bw-account-menu[open] > summary { background: #fff; border-color: var(--bw-blue); }
.bw-account-menu-chevron {
  font-size: .65rem;
  transition: transform var(--bw-transition);
}
.bw-account-menu[open] .bw-account-menu-chevron { transform: rotate(180deg); }
.bw-account-menu-panel {
  position: absolute; right: 0; top: calc(100% + .5rem);
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--bw-border);
  border-radius: var(--bw-radius);
  box-shadow: var(--bw-shadow-md);
  padding: .5rem;
  z-index: 1100;
}
.bw-account-menu-panel a,
.bw-account-menu-panel button {
  display: block;
  width: 100%;
  text-align: left;
  padding: .55rem .75rem;
  border-radius: var(--bw-radius-sm);
  font-size: .88rem;
  font-weight: 500;
  color: var(--bw-navy);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}
.bw-account-menu-panel a:hover,
.bw-account-menu-panel button:hover {
  background: var(--bw-surface); color: var(--bw-blue);
}
.bw-account-menu-panel-divider {
  height: 1px; background: var(--bw-border);
  margin: .35rem 0;
}
.bw-account-menu-panel-meta {
  padding: .5rem .75rem .65rem;
  font-size: .75rem; color: var(--bw-slate);
  border-bottom: 1px solid var(--bw-border);
  margin-bottom: .35rem;
}
.bw-account-menu-panel-meta strong {
  display: block; color: var(--bw-navy); font-size: .82rem;
  font-weight: 600; margin-bottom: 1px;
}
.bw-account-menu-panel-secondary {
  display: block; color: var(--bw-slate); font-size: .72rem;
  margin-bottom: 1px;
}
.bw-account-menu-panel-id {
  display: block; color: var(--bw-slate); font-size: .68rem;
  font-family: var(--bw-font-mono, ui-monospace, SFMono-Regular, monospace);
  letter-spacing: .05em; margin-top: 2px;
}
.bw-account-menu-panel-badges {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px;
}
.bw-account-menu-summary-text { font-size: .82rem; }

/* ── PR-8A: Inline account-identity block in the top bar ──────────
   Sits between the notification bell and the account dropdown. Lets
   the member confirm at a glance which account is signed in — name
   (or email / "Member ending XXXX" for CV-routed), plan, status. */
.bw-identity-inline {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .25rem .6rem .25rem .25rem;
  border-radius: 999px;
  background: var(--bw-surface);
  border: 1px solid var(--bw-border);
  max-width: 320px;
}
.bw-identity-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bw-teal,#14b8a6), var(--bw-blue,#0ea5e9));
  color: #fff; font-size: .72rem; font-weight: 700;
  letter-spacing: .02em;
  flex-shrink: 0;
}
.bw-identity-avatar--sm { width: 22px; height: 22px; font-size: .62rem; }
.bw-identity-text {
  display: inline-flex; flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}
.bw-identity-name {
  font-size: .82rem; font-weight: 600; color: var(--bw-navy);
  max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bw-identity-meta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .68rem; color: var(--bw-slate);
  margin-top: 1px;
}
.bw-identity-plan { font-weight: 500; }
.bw-identity-sep { opacity: .5; }
.bw-identity-status {
  font-weight: 600;
  padding: 0 .35rem; border-radius: 999px;
  font-size: .62rem; text-transform: uppercase; letter-spacing: .03em;
}
.bw-identity-status--active   { background: rgba(16,185,129,.12); color: #047857; }
.bw-identity-status--pending  { background: rgba(245,158,11,.12); color: #b45309; }
.bw-identity-status--inactive { background: rgba(185,28,28,.12);  color: #b91c1c; }

/* Plan/status pills inside the dropdown panel. */
.bw-badge--plan {
  background: rgba(14,165,233,.10); color: #0369a1;
}
.bw-badge--active   { background: rgba(16,185,129,.12); color: #047857; }
.bw-badge--pending  { background: rgba(245,158,11,.12); color: #b45309; }
.bw-badge--inactive { background: rgba(185,28,28,.12);  color: #b91c1c; }

/* Mobile drawer identity header — same data, full-width layout. */
.bw-identity-mobile {
  display: flex; align-items: center; gap: .65rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--bw-border);
  background: var(--bw-surface);
}
.bw-identity-mobile-text {
  display: flex; flex-direction: column;
  min-width: 0; line-height: 1.2;
}
.bw-identity-mobile .bw-identity-name { max-width: none; }

/* On small viewports collapse the inline identity to avatar-only so
   the bell + dropdown still fit; the dropdown panel and mobile drawer
   carry the full identity block. */
@media (max-width: 768px) {
  .bw-identity-inline .bw-identity-text { display: none; }
  .bw-identity-inline { padding: 0; border: 0; background: transparent; }
}

/* ── Sidebar grouped/collapsible parent (uses native <details>) ──
   Modern, calm style — subtle indentation + chevron, no tree lines. */
.bw-sidebar-group { margin: 0; }
.bw-sidebar-group > summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem .75rem;
  border-radius: var(--bw-radius-sm);
  color: rgba(255, 255, 255, .75);
  font-size: .88rem; font-weight: 500;
  transition: all var(--bw-transition);
}
.bw-sidebar-group > summary::-webkit-details-marker { display: none; }
.bw-sidebar-group > summary:hover {
  background: rgba(255, 255, 255, .08); color: #fff;
}
.bw-sidebar-group[open] > summary { color: #fff; }
.bw-sidebar-group-chevron {
  font-size: .7rem;
  opacity: .55;
  transition: transform var(--bw-transition);
}
.bw-sidebar-group[open] .bw-sidebar-group-chevron {
  transform: rotate(180deg); opacity: .9;
}
.bw-sidebar-children {
  display: flex; flex-direction: column; gap: .15rem;
  margin: .15rem 0 .25rem .9rem;
  padding-left: .65rem;
  border-left: 1px solid rgba(255, 255, 255, .08);
}
.bw-sidebar-children .bw-sidebar-link {
  font-size: .82rem;
  padding: .4rem .7rem;
  color: rgba(255, 255, 255, .6);
}
.bw-sidebar-children .bw-sidebar-link:hover { color: #fff; }


/* ═══════════════════════════════════════════════════════════════════
   PR-11B — Embedded CareValidate secure clinical portal.

   `.bw-clinical-portal-frame` is the iframe that renders the
   CareValidate hosted portal inside the BridgeWell shell. Height
   uses `min-height: calc(100vh - 180px)` so the topbar (~64px) and
   the explainer card above (~116px) both stay visible while the
   iframe consumes the rest of the viewport. The frame inherits the
   shell's max-width via the parent `.bw-portal-content` rule.

   `.bw-clinical-portal-shell` is the per-page tweak applied to
   `.bw-portal-content` on the secure-portal page so the iframe can
   expand to the full content column without the default
   `max-width:760px` table-of-contents constraint that some inner
   templates set inline. Mobile keeps the same min-height — the
   iframe scrolls internally on its own. */
.bw-clinical-portal-shell {
  max-width: 100%;
}

.bw-clinical-portal-frame {
  width: 100%;
  min-height: calc(100vh - 180px);
  border: 0;
  border-radius: 16px;
  background: #fff;
  /* Belt + suspenders: tablet/desktop browsers honour the parent
     max-width via .bw-portal-content; this keeps the frame from
     overflowing its column on very narrow viewports. */
  max-width: 100%;
  display: block;
}

@media (max-width: 768px) {
  .bw-clinical-portal-frame {
    /* On phones the topbar + sidebar stack vertically; the iframe
       gets a slightly shorter min-height so the page doesn't feel
       cropped at the bottom. */
    min-height: calc(100vh - 220px);
    border-radius: 12px;
  }
}
.bw-sidebar-children .bw-sidebar-link.active {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

/* ── Dashboard — "Today's actions" emphasized row ────────────────
   Sits between hero and the rest of the dashboard so primary actions
   read first. Visually heavier than the regular .bw-stat-card grid. */
.bw-today-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.bw-today-action {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--bw-border);
  border-left: 3px solid var(--bw-blue);
  border-radius: var(--bw-radius);
  box-shadow: var(--bw-shadow);
  text-decoration: none;
  color: inherit;
  transition: transform var(--bw-transition),
              box-shadow var(--bw-transition),
              border-color var(--bw-transition);
}
.bw-today-action:hover {
  transform: translateY(-1px);
  box-shadow: var(--bw-shadow-md);
  border-left-color: var(--bw-navy);
}
.bw-today-action-eyebrow {
  font-size: .68rem; text-transform: uppercase;
  letter-spacing: .08em; font-weight: 700;
  color: var(--bw-blue);
}
.bw-today-action-title {
  font-size: 1rem; font-weight: 700; color: var(--bw-navy); margin: 0;
}
.bw-today-action-meta {
  font-size: .8rem; color: var(--bw-slate); margin: 0;
}
.bw-today-action-cta {
  margin-top: auto;
  font-size: .82rem; font-weight: 600; color: var(--bw-blue);
}

/* Soft section heading between dashboard zones — visual rhythm. */
.bw-dashboard-section-heading {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--bw-slate);
  font-weight: 700;
  margin: 1.75rem 0 .75rem;
}

/* Responsive: tighten the portal topbar on small screens */
@media (max-width: 768px) {
  .bw-portal-topbar {
    padding: .85rem 1.25rem;
    margin: -1.25rem -1.25rem 1rem;
    flex-wrap: wrap;
  }
  .bw-portal-topbar-title h1 { font-size: 1.05rem; }
  .bw-portal-topbar-title p { font-size: .78rem; }
  .bw-today-actions { gap: .75rem; }
  .bw-today-action { padding: .9rem 1rem; }
}

/* On the horizontal-flex sidebar layout (≤960px) groups expand without
   the indent rule that makes sense in the vertical layout. */
@media (max-width: 960px) {
  .bw-sidebar-children {
    padding-left: 0;
    margin-left: 0;
    border-left: 0;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Dashboard UX Refresh — hero indicators, today header, section banners

   The dashboard hero now reads phase context + 2-3 at-a-glance
   indicators (movement %, meals %, last weight) instead of a single
   floating weight badge. The cards beneath are grouped under three
   lightweight section banners so the page reads as a story instead of
   a wall.
   ───────────────────────────────────────────────────────────────────── */

.bw-portal-hero--refresh {
  /* Override the default `align-items: flex-end` so the hero column
     grows top-down naturally when indicators + CTAs stack inside it. */
  align-items: stretch;
}
.bw-portal-hero--refresh .bw-portal-hero__lede {
  flex: 1 1 auto;
  min-width: 0;
}
.bw-portal-hero__phase {
  color: rgba(255,255,255,.85);
  margin: 0 0 1rem;
  font-size: .95rem;
  line-height: 1.45;
}

.bw-hero-indicators {
  list-style: none;
  padding: 0;
  margin: 0 0 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}
.bw-hero-indicator {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--bw-radius-sm);
  padding: .55rem .9rem;
  min-width: 7.5rem;
}
.bw-hero-indicator__num {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  letter-spacing: -0.02em;
}
.bw-hero-indicator__lbl {
  font-size: .72rem;
  color: rgba(255,255,255,.75);
  margin-top: .15rem;
  text-transform: none;
  letter-spacing: 0;
}

.bw-hero-cta-row {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}
.bw-hero-cta {
  display: inline-flex;
  align-items: center;
  padding: .55rem 1.1rem;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.2;
  transition: background-color .15s ease, border-color .15s ease;
}
.bw-hero-cta--primary {
  background: rgba(255,255,255,.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
}
.bw-hero-cta--primary:hover {
  background: rgba(255,255,255,.28);
}
.bw-hero-cta--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.4);
}
.bw-hero-cta--ghost:hover {
  background: rgba(255,255,255,.1);
}

/* Today section — heading + date sit above the action tiles. */
.bw-today { margin-bottom: 1.25rem; }
.bw-today__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: .55rem;
  gap: 1rem;
}
.bw-today__title {
  font-size: 1.1rem;
  margin: 0;
  color: var(--bw-navy);
  letter-spacing: -0.01em;
}
.bw-today__sub {
  font-size: .8rem;
  color: var(--text-tertiary, #94a3b8);
  margin: 0;
}

/* Section banners — quiet headings that group the cards below. */
.bw-section-banner {
  margin: 1.6rem 0 .85rem;
  padding-left: .55rem;
  border-left: 3px solid var(--bw-teal, #14b8a6);
}
.bw-section-banner__title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--bw-navy);
  letter-spacing: -0.01em;
}
.bw-section-banner__sub {
  font-size: .8rem;
  margin: .1rem 0 0;
  color: var(--text-tertiary, #94a3b8);
  line-height: 1.4;
}

@media (max-width: 720px) {
  .bw-portal-hero--refresh { padding: 1.25rem 1.25rem; }
  .bw-hero-indicator { padding: .45rem .75rem; min-width: 6.25rem; }
  .bw-hero-indicator__num { font-size: 1.15rem; }
  .bw-today__head { flex-direction: column; align-items: flex-start; gap: .15rem; }
  .bw-section-banner { margin: 1.25rem 0 .65rem; }
}

/* ─── Secure clinical portal (PR-D8) ───
 * Page-level primitives used by templates/carevalidate/secure_clinical_portal.html.
 * Replaces the per-card inline `margin-bottom:16px;max-width:960px` style
 * sprawl with a single stack + section conventions.
 */
.bw-clinical-portal-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 960px;
}
.bw-clinical-portal-info-strip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #eef4ff;
  border: 1px solid #dbe6fb;
  color: #334155;
  font-size: .9rem;
  line-height: 1.5;
  margin: 0;
}
.bw-clinical-portal-info-strip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: #6b7c93;
  margin-top: 1px;
}
.bw-clinical-portal-info-strip-icon svg {
  width: 100%;
  height: 100%;
}
.bw-clinical-portal-section-title {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bw-ink, #0f172a);
  margin: 0 0 12px;
}
.bw-clinical-portal-case-heading {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  color: var(--bw-ink, #0f172a);
}
.bw-clinical-portal-case-shortid {
  display: inline-block;
  font-family: var(--bw-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .72rem;
  padding: 2px 7px;
  background: rgba(15, 23, 42, .05);
  border-radius: 999px;
  color: var(--bw-slate, #475569);
}
.bw-clinical-portal-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
  margin: 18px 0 0;
  font-size: .88rem;
}
.bw-clinical-portal-meta dt {
  color: var(--bw-muted, #64748b);
  font-weight: 500;
}
.bw-clinical-portal-meta dd {
  margin: 0;
  color: var(--bw-ink, #0f172a);
}
.bw-clinical-portal-row {
  padding: 14px 0;
  border-top: 0.5px solid var(--border-mid, rgba(15,23,42,.08));
}
.bw-clinical-portal-row:first-of-type {
  border-top: 0;
  padding-top: 4px;
}
.bw-clinical-portal-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.bw-clinical-portal-chip {
  display: inline-flex;
  align-items: center;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}
.bw-clinical-portal-chip--approved { background: #dcfce7; color: #15803d; }
.bw-clinical-portal-chip--pending  { background: #fef3c7; color: #92400e; }
.bw-clinical-portal-chip--decision { background: rgba(15,23,42,.06); color: #334155; }
.bw-clinical-portal-meds {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bw-clinical-portal-med {
  padding: 12px 14px;
  background: rgba(15,23,42,.025);
  border-radius: var(--radius-md);
  font-size: .9rem;
}
.bw-clinical-portal-med-name {
  font-weight: 600;
  color: var(--bw-ink, #0f172a);
}
.bw-clinical-portal-med-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.bw-clinical-portal-med-meta span {
  font-size: .72rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: white;
  border: 0.5px solid var(--border-mid, rgba(15,23,42,.08));
  color: var(--bw-slate, #475569);
}
.bw-clinical-portal-med-instructions {
  margin: 8px 0 0;
  color: var(--bw-muted, #64748b);
  font-size: .8rem;
  line-height: 1.45;
}
.bw-clinical-portal-message {
  background: linear-gradient(180deg, rgba(99,102,241,.04), rgba(99,102,241,.01));
  border: 0.5px solid rgba(99,102,241,.18);
}
.bw-clinical-portal-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 0.5px solid var(--border-mid, rgba(15,23,42,.12));
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: .9rem;
  line-height: 1.5;
  resize: vertical;
  min-height: 96px;
  background: white;
}
.bw-clinical-portal-textarea:focus {
  outline: 2px solid var(--bw-blue, #3b82f6);
  outline-offset: 1px;
}
.bw-clinical-portal-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.bw-clinical-portal-section-note {
  margin: 0 0 12px;
  font-size: .82rem;
  color: var(--bw-muted, #64748b);
}
@media (max-width: 640px) {
  .bw-clinical-portal-meta { grid-template-columns: 1fr; gap: 2px 0; }
  .bw-clinical-portal-meta dt { padding-top: 8px; }
}

/* ─────────── Secure Clinical Portal — UX correction (post PR-D8) ─────────── */

.bw-clinical-portal-summary {
  padding: 22px 24px;
}
.bw-clinical-portal-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(15, 23, 42, .06);
}
.bw-clinical-portal-summary-titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.bw-clinical-portal-eyebrow {
  margin: 0;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bw-muted, #64748b);
}
.bw-clinical-portal-summary .bw-clinical-portal-case-heading {
  margin: 0;
}
.bw-clinical-portal-meta-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem;
  background: rgba(15, 23, 42, .04);
  border-radius: 4px;
  padding: 1px 6px;
}

.bw-clinical-portal-chip--lg {
  font-size: .78rem;
  padding: 4px 10px;
  letter-spacing: .02em;
}

.bw-clinical-portal-decisions {
  padding: 22px 24px;
}
.bw-clinical-portal-decision {
  border: 1px solid rgba(21, 128, 61, .14);
  background: linear-gradient(180deg, rgba(220, 252, 231, .35), rgba(220, 252, 231, .08));
  border-radius: 10px;
  padding: 16px 18px;
  margin-top: 12px;
}
.bw-clinical-portal-decision:first-of-type {
  margin-top: 4px;
}
.bw-clinical-portal-decision-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.bw-clinical-portal-decision-date {
  font-size: .78rem;
  color: var(--bw-muted, #64748b);
}
.bw-clinical-portal-decision-text {
  margin: 10px 0 0;
  font-size: .92rem;
  line-height: 1.55;
}
.bw-clinical-portal-decision-reviewer {
  margin: 12px 0 0;
  font-size: .78rem;
  color: var(--bw-muted, #64748b);
}
.bw-clinical-portal-med-name {
  margin: 0 0 4px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
}
.bw-clinical-portal-med-dose {
  font-weight: 500;
  color: var(--bw-muted, #475569);
  font-size: .92rem;
}

/* Hoisted row primitives (replaces per-element inline styles) */
.bw-clinical-portal-row-title {
  font-size: .92rem;
  font-weight: 600;
}
.bw-clinical-portal-row-title-block {
  margin: 0 0 8px;
  font-weight: 600;
  font-size: .92rem;
}
.bw-clinical-portal-row-meta {
  font-size: .78rem;
  color: var(--bw-muted, #64748b);
}
.bw-clinical-portal-row-body {
  margin: 8px 0 0;
  font-size: .9rem;
  line-height: 1.55;
  white-space: pre-wrap;
}
.bw-clinical-portal-row-note {
  margin: 6px 0 0;
  font-size: .78rem;
  color: var(--bw-muted, #64748b);
}
.bw-clinical-portal-row-action {
  margin-top: 10px;
}
.bw-clinical-portal-row-list {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: .88rem;
  line-height: 1.6;
}
.bw-clinical-portal-payment {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: .9rem;
}
.bw-clinical-portal-attachment-list {
  margin: 0;
  padding-left: 18px;
  font-size: .9rem;
  line-height: 1.75;
}

@media (max-width: 640px) {
  .bw-clinical-portal-summary,
  .bw-clinical-portal-decisions { padding: 18px 16px; }
  .bw-clinical-portal-decision { padding: 14px 14px; }
}

/* ─────────── Secure Clinical Portal — image-match redesign ─────────── */

/* Page-level hero: shield icon + h1 + subtitle. Replaces the standard
   portal_topbar on this page so we can give the title much more weight
   and put the shield mark next to it. */
.bw-clinical-portal-shell .bw-portal-topbar { display: none; }

.bw-clinical-portal-hero {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin: -2rem -2rem 1.5rem;
  padding: 28px 32px 24px;
  background: #fff;
  border-bottom: 1px solid rgba(15, 23, 42, .06);
}
.bw-clinical-portal-hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  color: #2c6be0;
  margin-top: 4px;
}
.bw-clinical-portal-hero-icon svg { width: 100%; height: 100%; }
.bw-clinical-portal-hero-text h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #0f172a;
  line-height: 1.15;
}
.bw-clinical-portal-hero-text p {
  margin: 6px 0 0;
  font-size: .98rem;
  line-height: 1.5;
  color: #475569;
  max-width: 56ch;
}

/* Card head — icon + title (+ trailing chip). Used by the summary card,
   the decisions card, and every secondary card. */
.bw-clinical-portal-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(15, 23, 42, .06);
}
.bw-clinical-portal-card-head--tight {
  padding-bottom: 0;
  margin-bottom: 14px;
  border-bottom: 0;
}
.bw-clinical-portal-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  color: #2c6be0;
}
.bw-clinical-portal-card-icon svg { width: 100%; height: 100%; }
.bw-clinical-portal-card-icon--green  { color: #15803d; }
.bw-clinical-portal-card-icon--violet { color: #4f46e5; }

/* Inside the summary card the head still has the title block in the
   middle column and the status chip pinned right. */
.bw-clinical-portal-summary .bw-clinical-portal-card-head {
  align-items: flex-start;
}
.bw-clinical-portal-summary .bw-clinical-portal-summary-titles {
  flex: 1;
  min-width: 0;
}
.bw-clinical-portal-summary .bw-clinical-portal-summary-titles .bw-clinical-portal-case-heading {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}

/* Override the section-title role inside the new card-head — these
   titles now sit beside an icon rather than on their own line. */
.bw-clinical-portal-card-head .bw-clinical-portal-section-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #0f172a;
}

/* Approved chip with leading check (matches image's filled-green look). */
.bw-clinical-portal-chip--approved {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  background: #dcfce7;
  color: #15803d;
}
.bw-clinical-portal-chip--approved svg {
  width: 14px;
  height: 14px;
}

/* Icon-prefixed two-column metadata grid (replaces the prior dt/dd
   inline grid). Renders Case ID / Case / Opened / Last updated /
   Assigned to with a small monochrome icon next to each label. */
.bw-clinical-portal-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 32px;
  margin: 0;
}
.bw-clinical-portal-meta-cell {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.bw-clinical-portal-meta-cell--full { grid-column: 1 / -1; }
.bw-clinical-portal-meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: #94a3b8;
  margin-top: 2px;
}
.bw-clinical-portal-meta-icon svg { width: 100%; height: 100%; }
.bw-clinical-portal-meta-cell dt {
  margin: 0;
  font-size: .82rem;
  font-weight: 500;
  color: #64748b;
  line-height: 1.2;
}
.bw-clinical-portal-meta-cell dd {
  margin: 4px 0 0;
  font-size: .95rem;
  font-weight: 500;
  color: #0f172a;
  line-height: 1.35;
  word-break: break-word;
}

/* Decision card refresh — match the green-tinted nested card from the
   image with the leading filled-check "Approved" status pill. */
.bw-clinical-portal-decision-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 700;
  color: #15803d;
  letter-spacing: 0;
  text-transform: none;
}
.bw-clinical-portal-decision-status--pending  { color: #92400e; }
.bw-clinical-portal-decision-status--decision { color: #334155; }
.bw-clinical-portal-decision-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #16a34a;
  color: #fff;
}
.bw-clinical-portal-decision-check svg { width: 14px; height: 14px; }

.bw-clinical-portal-med-meta-line {
  margin: 6px 0 0;
  font-size: .92rem;
  color: #475569;
  line-height: 1.55;
}
.bw-clinical-portal-med-meta-line span:not(:last-child)::after {
  content: " · ";
  color: #94a3b8;
  margin: 0 2px;
}

.bw-clinical-portal-decision-reviewer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  padding-left: 4px;
  font-size: .9rem;
  color: #64748b;
  font-weight: 500;
}
.bw-clinical-portal-decision-reviewer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #94a3b8;
}
.bw-clinical-portal-decision-reviewer-icon svg { width: 100%; height: 100%; }

/* Form-responses / "Member message" card — matches the bordered-quote
   look-and-feel in the image. */
.bw-clinical-portal-message {
  background: #fff;
  border: 0.5px solid rgba(15, 23, 42, .08);
}
.bw-clinical-portal-secure-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: .9rem;
  color: #64748b;
  font-weight: 500;
}
.bw-clinical-portal-secure-note-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: #94a3b8;
}
.bw-clinical-portal-secure-note-icon svg { width: 100%; height: 100%; }
.bw-clinical-portal-message-divider {
  height: 1px;
  background: rgba(15, 23, 42, .06);
  margin: 4px -4px 18px;
}
.bw-clinical-portal-message-label {
  display: block;
  margin: 0 0 8px;
  font-size: .82rem;
  font-weight: 500;
  color: #64748b;
}
.bw-clinical-portal-message-quote {
  background: #fafbfc;
  border: 1px solid #e5e9f0;
  border-radius: 10px;
  color: #1e293b;
  font-size: .96rem;
  line-height: 1.55;
  padding: 14px 18px;
  min-height: 84px;
}
.bw-clinical-portal-message-quote:focus {
  outline: 2px solid #4f46e5;
  outline-offset: 1px;
  background: #fff;
}

@media (max-width: 720px) {
  .bw-clinical-portal-hero {
    padding: 22px 20px 18px;
    margin: -2rem -1.25rem 1.25rem;
    gap: 14px;
  }
  .bw-clinical-portal-hero-icon { width: 36px; height: 36px; }
  .bw-clinical-portal-hero-text h1 { font-size: 1.4rem; }
  .bw-clinical-portal-hero-text p { font-size: .9rem; }
  .bw-clinical-portal-meta-grid { grid-template-columns: 1fr; gap: 14px; }
  .bw-clinical-portal-card-head { gap: 10px; flex-wrap: wrap; }
}