/* =====================================================================
   OPERATIONAPPEAL — MOCKUP v3 — shared styles
   Strict palette: navy primary, gold accent, red CTA, green = success only.
   No purple, no teal, no orange, no blue other than navy.
   ===================================================================== */

:root {
  --bg:        #ffffff;
  --bg-soft:   #f6f8fb;
  --bg-dim:    #ecf0f5;
  --ink:       #1a2238;
  --ink-soft:  #4a5876;
  --ink-dim:   #7c8aa3;
  --navy:      #1d3461;
  --navy-mid:  #2a4980;
  --navy-deep: #0e1d3a;
  --navy-soft: #4664a3;
  --gold:      #c89636;
  --gold-soft: #e8c878;
  --gold-pale: #fbf3df;
  --red:       #c8362f;
  --red-soft:  #e85c54;
  --red-pale:  #fcebea;
  --green:     #2e7d4f;
  --green-pale:#eaf4ee;
  --line:      #d8dee8;
  --line-soft: #ebeef4;
  --shadow:    0 4px 20px rgba(26,34,56,0.08);
  --shadow-lg: 0 12px 40px rgba(26,34,56,0.14);
  --sans:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --serif:     Georgia, 'Times New Roman', serif;
  --r-sm: 6px; --r: 10px; --r-lg: 14px;
  --ease: cubic-bezier(.2,.7,.2,1);

  /* Legacy dark-theme tokens kept as aliases for inline styles still injected
     by app.js (case-detail Phase 2 CTA, capacity modal, autosave-recovery
     banner). Maps the old light-on-dark cream/bone palette to the new
     dark-on-light ink palette so that content stays legible after the Step-6
     cutover. Remove these once the dark-theme inline-style call sites in
     app.js have been rewritten to the light palette. */
  --bone:  var(--ink);
  --bone2: var(--ink-soft);
  --muted: var(--ink-dim);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--bg); color: var(--ink);
  line-height: 1.55; font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--red); }

/* ===== TOP RIBBON ===== */
#ribbon {
  background: var(--red); color: #fff; text-align: center;
  padding: 9px 16px; font-size: 12px; letter-spacing: 1.6px;
  text-transform: uppercase; font-weight: 700;
}

/* ===== NAV WITH HAMBURGER ===== */
nav.topnav {
  background: var(--navy);
  padding: 14px 28px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 3px solid var(--gold);
  position: sticky; top: 0; z-index: 100;
  box-shadow: var(--shadow);
}

/* Logo block — SVG mark + wordmark */
.brand-link { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.brand-mark { width: 38px; height: 38px; flex: 0 0 38px; }
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-wordmark {
  color: #fff; font-weight: 900; letter-spacing: 3px;
  font-size: 19px; text-transform: uppercase; line-height: 1;
}
.brand-wordmark .accent { color: var(--gold-soft); }
.brand-tag {
  display: block; color: rgba(255,255,255,0.55);
  font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase;
  margin-top: 4px; font-weight: 600;
}

/* Hamburger button */
.hamburger {
  width: 44px; height: 44px;
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: 8px; background: transparent;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.hamburger:hover { border-color: var(--gold); background: rgba(200,150,54,0.12); }
.hamburger .bars {
  position: relative; width: 22px; height: 16px;
}
.hamburger .bars::before,
.hamburger .bars::after,
.hamburger .bars span {
  content: ''; position: absolute; left: 0;
  width: 100%; height: 2px; background: #fff;
  border-radius: 1px; transition: transform 0.32s var(--ease), top 0.18s var(--ease), opacity 0.18s var(--ease);
}
.hamburger .bars::before { top: 0; }
.hamburger .bars span { top: 7px; }
.hamburger .bars::after { top: 14px; }
.hamburger.open .bars::before { top: 7px; transform: rotate(45deg); background: var(--gold-soft); }
.hamburger.open .bars span { opacity: 0; }
.hamburger.open .bars::after { top: 7px; transform: rotate(-45deg); background: var(--gold-soft); }

/* Embedded-mode chrome adjustments (2026-05-08).
   When PUBLIC pages are loaded inside the VSO workbench iframe, embed-detect.js
   tags <html> with .oa-embedded. We:
   1) hide the public ribbon + VSO badge (workbench has its own chrome),
   2) keep nav.topnav in the DOM as a positioning anchor for the hamburger,
      but strip its visual background/border and hide its non-hamburger
      children (brand link, brand wordmark, etc.),
   3) flip the hamburger bars to dark navy so they're visible against the
      now-transparent topnav background (default is white bars on navy bg
      — invisible once the bg goes transparent against a white iframe page).
   These rules used to live in analyze.html; moved here so they apply to
   every PUBLIC page (my-cases, manage-data, home, etc.) — the iframe can
   navigate between them via the hamburger and consistent styling matters.
   Specificity is bumped via html.oa-embedded prefix to beat .menu-list a. */
html.oa-embedded #ribbon,
html.oa-embedded #oa-vso-badge { display: none !important; }
html.oa-embedded nav.topnav {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 8px 12px !important;
  min-height: 0 !important;
  height: auto !important;
}
html.oa-embedded nav.topnav > :not(.hamburger) { display: none !important; }
html.oa-embedded body { padding-top: 0 !important; margin-top: 0 !important; }
html.oa-embedded .hamburger { border-color: rgba(29,52,97,0.45); }
html.oa-embedded .hamburger .bars::before,
html.oa-embedded .hamburger .bars::after,
html.oa-embedded .hamburger .bars span { background: var(--navy, #1d3461); }

/* Embedded-only menu items (Admin, Sign Out) injected by script.js into
   the slide-in menu when .oa-embedded is present. The items carry
   .oa-embedded-only so they're hidden in non-embedded mode (the JS
   injection is idempotent — pages that aren't iframed never see them). */
.oa-embedded-only { display: none !important; }
html.oa-embedded .oa-embedded-only { display: block !important; }

/* Slide-in menu panel */
.menu-overlay {
  position: fixed; inset: 0;
  background: rgba(14,29,58,0.55);
  opacity: 0; pointer-events: none;
  transition: opacity 0.28s var(--ease);
  z-index: 200; backdrop-filter: blur(2px);
}
.menu-overlay.open { opacity: 1; pointer-events: auto; }

.menu-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(360px, 88vw);
  background: var(--navy-deep);
  border-left: 4px solid var(--gold);
  z-index: 201;
  transform: translateX(100%);
  transition: transform 0.36s var(--ease);
  display: flex; flex-direction: column;
  box-shadow: -12px 0 40px rgba(0,0,0,0.3);
}
.menu-panel.open { transform: translateX(0); }
.menu-head {
  padding: 22px 26px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: space-between;
}
.menu-head .label { color: var(--gold-soft); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; }
.menu-close {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: transparent; color: #fff;
  cursor: pointer; font-size: 18px; line-height: 1;
}
.menu-close:hover { background: rgba(255,255,255,0.08); border-color: var(--gold); }

.menu-list { flex: 1; overflow-y: auto; padding: 16px 0; }
.menu-list a {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 26px;
  color: #cbd4e2; font-size: 15px; font-weight: 600;
  letter-spacing: 0.4px;
  border-left: 3px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.menu-list a:hover, .menu-list a.active {
  background: rgba(200,150,54,0.08);
  border-left-color: var(--gold);
  color: #fff;
}
.menu-list a .ico { color: var(--gold-soft); width: 18px; text-align: center; font-size: 14px; }
.menu-list a.section-head {
  padding: 18px 26px 8px;
  font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase;
  font-weight: 800; color: var(--gold);
  pointer-events: none; border-left: none;
}
.menu-list .menu-cta {
  margin: 12px 26px 0; padding: 12px 18px;
  background: var(--red); color: #fff !important;
  border-radius: 6px; text-align: center;
  letter-spacing: 1.5px; text-transform: uppercase;
  font-weight: 800; font-size: 13px; border-left: none;
}
.menu-list .menu-cta:hover { background: var(--red-soft); }
.menu-foot {
  padding: 18px 26px;
  border-top: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.45); font-size: 12px;
  font-style: italic; font-family: var(--serif);
}

/* ===== UNIFIED BUTTON SYSTEM ===== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: var(--r-sm);
  font-family: var(--sans); font-size: 13px;
  letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700;
  border: 2px solid transparent; cursor: pointer; background: #fff;
  transition: transform 0.12s var(--ease), background 0.12s var(--ease), color 0.12s var(--ease), border-color 0.12s var(--ease), box-shadow 0.12s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.btn-primary { background: var(--red); color: #fff; border-color: var(--red); box-shadow: 0 4px 14px rgba(200,54,47,0.28); }
.btn-primary:hover { background: var(--red-soft); border-color: var(--red-soft); box-shadow: 0 6px 18px rgba(200,54,47,0.36); }

.btn-secondary { background: #fff; color: var(--gold); border-color: var(--gold); }
.btn-secondary:hover { background: var(--gold); color: #fff; }

.btn-neutral { background: #fff; color: var(--navy); border-color: var(--navy); }
.btn-neutral:hover { background: var(--navy); color: #fff; }

.btn-yes { background: #fff; color: var(--green); border-color: var(--green); }
.btn-yes:hover { background: var(--green); color: #fff; }
.btn-pos { background: #fff; color: var(--navy); border-color: var(--navy); }
.btn-pos:hover { background: var(--navy); color: #fff; }
.btn-meh { background: #fff; color: var(--ink-soft); border-color: var(--ink-dim); }
.btn-meh:hover { background: var(--ink-soft); color: #fff; border-color: var(--ink-soft); }
.btn-no { background: #fff; color: var(--red); border-color: var(--red); }
.btn-no:hover { background: var(--red); color: #fff; }

.btn-ghost { background: transparent; color: var(--ink-soft); border-color: var(--line); }
.btn-ghost:hover { background: var(--bg-dim); color: var(--ink); }

/* ===== HERO ===== */
.hero { background: linear-gradient(135deg, #f7f9fc 0%, #e8eef7 100%); padding: 80px 24px 60px; }
.hero-card {
  max-width: 760px; margin: 0 auto; background: #fff;
  border-radius: var(--r-lg); padding: 56px 56px 48px;
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
  text-align: center;
}
.hero-stars { color: var(--gold); font-size: 14px; letter-spacing: 4px; margin-bottom: 18px; }
.hero-eyebrow { color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 22px; }
.hero h1 {
  font-size: 52px; line-height: 1.05; font-weight: 900;
  color: var(--ink); margin-bottom: 18px; letter-spacing: -1px;
}
.hero h1 .accent {
  display: block; color: var(--red);
  text-shadow: 0 2px 24px rgba(200,54,47,0.18); margin-top: 6px;
}
.hero-sub { font-size: 19px; color: var(--ink); font-weight: 600; margin-bottom: 22px; max-width: 560px; margin-left: auto; margin-right: auto; line-height: 1.4; }
.hero-body { font-size: 15px; color: var(--ink-soft); margin-bottom: 32px; max-width: 560px; margin-left: auto; margin-right: auto; line-height: 1.65; }
.hero-ctas { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ===== STATS ===== */
section.stats { padding: 60px 24px; background: var(--bg); }
.stats-grid { max-width: 880px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.stat { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r); padding: 36px 28px; text-align: center; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease); }
.stat:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold); }
.stat .num { font-size: 48px; font-weight: 900; color: var(--red); letter-spacing: -1px; line-height: 1; }
.stat .num::after { content: ''; display: block; width: 36px; height: 3px; background: var(--gold); margin: 12px auto 0; border-radius: 2px; }
.stat .lbl { color: var(--ink-soft); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; line-height: 1.5; margin-top: 14px; }

/* ===== CHICLETS ===== */
section.categories { padding: 30px 24px 70px; background: var(--bg); text-align: center; }
.cat-label { color: var(--ink-dim); font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 18px; }
.cat-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cat { background: #fff; color: var(--gold); border: 1.5px solid var(--gold); padding: 11px 22px; border-radius: 4px; font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; cursor: pointer; transition: all 0.15s var(--ease); }
.cat:hover { background: var(--gold); color: #fff; }

/* ===== FOUNDER SECTION — COMPACT ===== */
section.founder {
  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg-dim) 100%);
  padding: 70px 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.founder-head { text-align: center; margin-bottom: 40px; max-width: 720px; margin-left: auto; margin-right: auto; }
.founder-eyebrow { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 12px; }
.founder-head h2 { font-size: 36px; font-weight: 900; color: var(--ink); letter-spacing: -0.6px; line-height: 1.1; margin-bottom: 12px; }
.founder-head h2 .accent { color: var(--red); }
.founder-head .sub { font-family: var(--serif); font-size: 17px; color: var(--ink-soft); font-style: italic; line-height: 1.5; }

/* Compact card grid: side cards portrait-ish, middle card landscape */
.founder-cards-compact {
  max-width: 980px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 20px;
  align-items: stretch;
}
.fcard-mini { display: flex; flex-direction: column; }
.fcard-mini .body { flex: 1; }
.fcard-mini {
  background: #fff; border-radius: var(--r); overflow: hidden;
  box-shadow: var(--shadow); border: 1px solid var(--line);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.fcard-mini:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.fcard-mini .photo {
  width: 100%; aspect-ratio: 1 / 1; background: var(--bg-dim);
  overflow: hidden; position: relative;
}
.fcard-mini.center .photo {
  aspect-ratio: 4 / 3;   /* LANDSCAPE — preserve the 3-Marines composition */
}
.fcard-mini .photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 20%;
  display: block;
}
.fcard-mini.center .photo img {
  object-position: center center;  /* center the group */
}
/* Tall variant for full-body portraits where head AND lower body matter
   (e.g., dress blues with the blood stripe) — use a portrait aspect so
   nothing important gets cropped. */
.fcard-mini.tall .photo { aspect-ratio: 4 / 5; }
.fcard-mini.tall .photo img { object-position: center center; }
.fcard-mini .photo .tag {
  position: absolute; top: 10px; left: 10px;
  background: rgba(14,29,58,0.85); color: var(--gold-soft);
  padding: 4px 9px; border-radius: 3px;
  font-size: 9px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
}
.fcard-mini .body { padding: 14px 16px 18px; }
.fcard-mini .body .era { color: var(--gold); font-size: 10px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; margin-bottom: 6px; }
.fcard-mini .body .ttl { color: var(--ink); font-size: 14px; font-weight: 800; margin-bottom: 8px; line-height: 1.3; }
.fcard-mini .body .desc { color: var(--ink-soft); font-size: 12.5px; line-height: 1.55; }

.founder-attrib { text-align: center; margin-top: 32px; color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
.founder-attrib .pipe { color: var(--ink-dim); margin: 0 8px; }

/* ===== PAGE HEADER (sub-pages) ===== */
.page-header { background: linear-gradient(135deg, #f7f9fc 0%, #e8eef7 100%); padding: 56px 24px 44px; border-bottom: 1px solid var(--line); }
.page-header .inner { max-width: 880px; margin: 0 auto; text-align: center; }
/* 2026-05-25 — letter-spacing tightened 4px to 1.5px so long eyebrow text
   ("YOUR SAVED ANALYSES, ON THIS DEVICE ONLY", "PARTNERS AND REFERRAL
   RECIPIENTS") doesn't overflow into the left side where the 70px branch
   badge sits absolutely-positioned below the nav. Centered text shrinks
   toward the middle as tracking tightens; protects the badge zone. */
.ph-eyebrow { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 12px; }
.page-header h1 { font-size: 38px; font-weight: 900; color: var(--ink); letter-spacing: -0.7px; line-height: 1.1; margin-bottom: 10px; }
.page-header .lead { color: var(--ink-soft); font-size: 16px; max-width: 620px; margin: 0 auto; }

main.page { max-width: 880px; margin: 0 auto; padding: 40px 24px 60px; }
main.page-wide { max-width: 1100px; margin: 0 auto; padding: 40px 24px 60px; }

/* ===== CARDS / PANELS ===== */
.card-base { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 24px 28px; box-shadow: var(--shadow); }
.panel-label { color: var(--ink-dim); font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-row .btn { flex: 1 1 140px; min-width: 0; justify-content: center; padding-left: 14px; padding-right: 14px; }

.summary-card {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-left: 4px solid var(--gold); border-radius: var(--r-sm);
  padding: 22px 26px; margin-bottom: 36px;
}
.summary-card .label { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 10px; }
.summary-card p { color: var(--ink); font-size: 15px; line-height: 1.65; }
.summary-card strong { color: var(--navy); }

.callout-good { background: var(--green-pale); border: 1px solid #c8e3d3; border-left: 4px solid var(--green); padding: 14px 18px; border-radius: var(--r-sm); margin: 16px 0; }
.callout-good .lbl { color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; }
.callout-good p { color: var(--ink); font-size: 14px; margin: 0; }
.callout-warn { background: var(--gold-pale); border: 1px solid #ecd9a8; border-left: 4px solid var(--gold); padding: 14px 18px; border-radius: var(--r-sm); margin: 16px 0; }
.callout-warn .lbl { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; }
.callout-warn p { color: var(--ink); font-size: 14px; margin: 0; }
.callout-bad { background: var(--red-pale); border: 1px solid #f1b3ae; border-left: 4px solid var(--red); padding: 14px 18px; border-radius: var(--r-sm); margin: 16px 0; }
.callout-bad .lbl { color: var(--red); font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; }
.callout-bad p { color: var(--ink); font-size: 14px; margin: 0; }

section.policy { margin-bottom: 32px; }
section.policy h2 { color: var(--navy); font-size: 22px; font-weight: 800; letter-spacing: -0.3px; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 2px solid var(--gold); display: inline-block; }
section.policy p { color: var(--ink-soft); font-size: 15px; margin-bottom: 14px; line-height: 1.7; }
section.policy ul { margin: 14px 0 14px 22px; }
section.policy li { color: var(--ink-soft); font-size: 15px; margin-bottom: 8px; line-height: 1.65; }
section.policy strong { color: var(--ink); font-weight: 700; }

/* ===== FOOTER ===== */
footer.site-footer {
  background: var(--navy-deep); color: #cbd4e2;
  padding: 40px 24px; text-align: center; border-top: 4px solid var(--gold);
}
footer .brand { color: var(--red); font-weight: 900; letter-spacing: 3px; font-size: 14px; text-transform: uppercase; }
footer .brand::before {
  content: '';
  display: inline-block;
  width: 22px; height: 22px;
  background: url('/favicon.svg?v=5') center/contain no-repeat;
  vertical-align: -6px;
  margin-right: 8px;
}
footer .dedication { color: #cbd4e2; font-style: italic; font-size: 14px; margin-top: 14px; font-family: var(--serif); }
footer .links { margin-top: 18px; }
footer .links a { color: #9eaac0; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; padding: 0 14px; border-right: 1px solid rgba(155,170,192,0.25); text-decoration: none; }
footer .links a:last-child { border-right: none; }
footer .links a:hover { color: var(--gold-soft); }

/* ===== CHAT WIDGET ===== */
.chat-bubble {
  position: fixed; bottom: 26px; right: 26px;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 10px 28px rgba(200,54,47,0.42);
  z-index: 150; transition: transform 0.16s var(--ease);
}
.chat-bubble:hover { transform: scale(1.06); }
.chat-bubble svg { width: 28px; height: 28px; }
.chat-bubble.hidden { transform: scale(0); pointer-events: none; }
/* Mobile: shrink + hug the edge so it doesn't dominate the right gutter
   over the rating widget (founder iPhone QA 2026-05-23). */
@media (max-width: 720px) {
  .chat-bubble { width: 44px; height: 44px; bottom: 14px; right: 14px; }
  .chat-bubble svg { width: 20px; height: 20px; }
}

.chat-panel {
  position: fixed; bottom: 26px; right: 26px;
  width: min(380px, calc(100vw - 32px));
  height: 540px; max-height: calc(100vh - 60px);
  background: #fff; border-radius: 14px;
  box-shadow: 0 24px 60px rgba(14,29,58,0.32);
  z-index: 150; display: flex; flex-direction: column;
  overflow: hidden; border: 1px solid var(--line);
  transform: translateY(20px) scale(0.96); opacity: 0; pointer-events: none;
  transition: transform 0.26s var(--ease), opacity 0.22s var(--ease);
}
.chat-panel.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.chat-panel.preview { /* always-on showcase mode for the mockup */ transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }

.chat-head {
  background: var(--navy); color: #fff;
  padding: 14px 18px; display: flex; align-items: center; gap: 12px;
  border-bottom: 3px solid var(--gold);
}
.chat-head .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--gold); color: var(--navy-deep); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 16px; flex: 0 0 38px; }
.chat-head .meta { flex: 1; min-width: 0; }
.chat-head .meta .ttl { font-weight: 800; letter-spacing: 1px; font-size: 14px; }
.chat-head .meta .sub { font-size: 11px; color: rgba(255,255,255,0.75); letter-spacing: 1px; text-transform: uppercase; margin-top: 2px; }
.chat-head .close { background: transparent; border: 1px solid rgba(255,255,255,0.25); color: #fff; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 14px; }
.chat-head .close:hover { background: rgba(255,255,255,0.08); border-color: var(--gold); }

.chat-msgs { flex: 1; overflow-y: auto; padding: 16px 14px; background: var(--bg-soft); display: flex; flex-direction: column; gap: 10px; }
.msg { display: flex; max-width: 86%; }
.msg .bubble { padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.45; }
.msg.bot { align-self: flex-start; }
.msg.bot .bubble { background: #fff; color: var(--ink); border: 1px solid var(--line); border-top-left-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.msg.user { align-self: flex-end; }
.msg.user .bubble { background: var(--navy); color: #fff; border-top-right-radius: 4px; }
.msg-author { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 4px; font-weight: 700; padding: 0 4px; }
.msg.user .msg-author { text-align: right; color: var(--navy); }

.chat-input {
  padding: 12px 12px 14px; background: #fff; border-top: 1px solid var(--line);
  display: flex; gap: 8px; align-items: flex-end;
}
.chat-input textarea {
  flex: 1; resize: none; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 18px;
  font-family: var(--sans); font-size: 14px; min-height: 38px; max-height: 100px;
}
.chat-input textarea:focus { outline: none; border-color: var(--navy); }
.chat-send {
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: var(--red); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 38px; transition: background 0.15s, transform 0.12s;
}
.chat-send:hover { background: var(--red-soft); transform: scale(1.05); }

/* ===== RESPONSIVE ===== */
@media (max-width: 880px) {
  .stats-grid { grid-template-columns: 1fr; }
  .founder-cards-compact { grid-template-columns: 1fr; }
  .fcard-mini.center .photo { aspect-ratio: 4 / 3; }
}
@media (max-width: 720px) {
  nav.topnav { padding: 12px 18px; }
  .brand-mark { width: 32px; height: 32px; flex: 0 0 32px; }
  .brand-wordmark { font-size: 15px; letter-spacing: 2px; }
  .brand-tag { display: none; }
  .hero { padding: 50px 16px 40px; }
  .hero-card { padding: 36px 24px; }
  .hero h1 { font-size: 38px; }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  section.founder { padding: 50px 16px; }
  .founder-head h2 { font-size: 28px; }
  main.page, main.page-wide { padding: 30px 16px 50px; }
  #ribbon { font-size: 10px; letter-spacing: 1.2px; padding: 8px 12px; }
  .page-header { padding: 36px 16px 30px; }
  .page-header h1 { font-size: 28px; }
  .chat-panel { right: 12px; bottom: 12px; height: calc(100vh - 80px); width: calc(100vw - 24px); }
}

/* ===== Reduced motion ===== */
/* Respect prefers-reduced-motion for decorative animations and transitions,
   but keep critical loading indicators (spinners, typing dots) animating —
   they're the only feedback during analyze; freezing them looks broken. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  #spinner .spinner,
  .spinner { animation: spin .9s linear infinite !important; }
  .oa-dot { animation: oaBounce 1.2s infinite !important; }
}