/* AI Altitude Assessment — dark theme
   Brand: navy + yellow accent. Type: Oswald (display) + Inter (body). */

:root {
  /* Surfaces */
  --bg-base: #0A0F1F;
  --bg-elevated: #131C30;
  --bg-surface: #1B2A4E;
  --bg-surface-hover: #243466;
  --bg-overlay: rgba(10, 15, 31, 0.85);

  /* Borders */
  --border: #2A3654;
  --border-strong: #3D4D75;
  --border-glow: rgba(244, 196, 48, 0.35);

  /* Text */
  --text: #E8EAED;
  --text-2: #B8C0D0;
  --text-muted: #8B95A8;
  --text-dim: #5C6680;

  /* Brand accent (yellow) */
  --accent: #F4C430;
  --accent-glow: #FFD23F;
  --accent-soft: rgba(244, 196, 48, 0.08);
  --accent-soft-2: rgba(244, 196, 48, 0.16);

  /* Altitude band colors */
  --band-grounded: #EF6868;
  --band-taxiing: #FF8E47;
  --band-climbing: #FFB020;
  --band-cruising: #3ECF8E;
  --band-stratosphere: #F4C430;

  /* Semantic */
  --danger: #EF6868;
  --success: #3ECF8E;

  /* Type */
  --font-display: 'Oswald', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Spacing & layout */
  --max: 1200px;
  --radius: 8px;
  --radius-lg: 14px;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-base);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  min-height: 0;
  -webkit-font-smoothing: antialiased;
}

/* Subtle vignette + top glow tying everything together */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 50% -20%, rgba(244, 196, 48, 0.06), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(27, 42, 78, 0.4), transparent 50%);
  pointer-events: none;
  z-index: 0;
}

main, header, footer { position: relative; z-index: 1; }

a { color: var(--accent); text-decoration: none; transition: color .15s; }
a:hover { color: var(--accent-glow); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
  margin: 0 0 0.5em;
}

h1 { font-size: 2.4rem; line-height: 1.15; }
h2 { font-size: 1.6rem; line-height: 1.2; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; color: var(--text-2); }

/* ============================================================
   TOP BAR
   ============================================================ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 15, 31, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 1.1rem;
  text-transform: uppercase;
}
.brand:hover { color: var(--text); }
.brand-mark { color: var(--text); }
.brand-dot {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--accent);
  display: inline-block;
}
.brand-product {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: none;
  padding-left: 6px;
  border-left: 1px solid var(--border);
  margin-left: 4px;
}
.brand-tagline {
  font-family: var(--font-body);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-transform: none;
  padding-left: 12px;
  border-left: 1px solid var(--border);
  margin-left: 8px;
  white-space: nowrap;
}
@media (max-width: 900px) {
  /* Tagline hides on small viewports to keep room for the nav links. */
  .brand-tagline { display: none; }
}
.topnav { display: flex; gap: 8px; align-items: center; }
.navlink {
  color: var(--text-2);
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: 0.92rem;
  font-weight: 500;
  transition: all .15s;
}
.navlink:hover { color: var(--text); background: var(--bg-elevated); }
.navlink-primary {
  background: var(--accent);
  color: var(--bg-base);
}
.navlink-primary:hover { background: var(--accent-glow); color: var(--bg-base); }
.topbar-accent {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
  opacity: 0.5;
}

/* ============================================================
   MAIN LAYOUT
   ============================================================ */

.main {
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px 32px 80px;
}

.section { margin-top: 56px; }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.section-sub { color: var(--text-muted); font-size: 0.88rem; }

/* ============================================================
   HERO (home)
   ============================================================ */

.hero {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  align-items: center;
  padding: 24px 0 16px;
}
.hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.78rem;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 16px;
}
.hero-title {
  font-size: 3rem;
  line-height: 1.1;
  margin: 0 0 20px;
}
.hero-title .accent { color: var(--accent); }
.hero-sub {
  font-size: 1.05rem;
  color: var(--text-2);
  max-width: 620px;
  margin-bottom: 28px;
}
.hero-cta { display: flex; gap: 12px; }

.hero-altitude svg {
  width: 100%;
  height: auto;
  max-width: 320px;
}
.hero-altitude .band-strato { fill: var(--band-stratosphere); opacity: 0.85; }
.hero-altitude .band-cruise { fill: var(--band-cruising); opacity: 0.7; }
.hero-altitude .band-climb  { fill: var(--band-climbing); opacity: 0.7; }
.hero-altitude .band-taxi   { fill: var(--band-taxiing); opacity: 0.7; }
.hero-altitude .band-ground { fill: var(--band-grounded); opacity: 0.7; }
.hero-altitude .ticks line { stroke: var(--text-muted); stroke-width: 1; }
.hero-altitude .labels text {
  fill: var(--text-2);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hero-altitude .pointer polygon {
  fill: var(--accent);
  filter: drop-shadow(0 0 6px var(--accent));
}

/* ============================================================
   STAT CARDS
   ============================================================ */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.stat-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: border-color .2s, transform .2s;
}
.stat-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.stat-value {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-label {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ============================================================
   DATA TABLE
   ============================================================ */

.table-wrap {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td {
  text-align: left;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}
.data-table thead th {
  background: var(--bg-surface);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.76rem;
  font-weight: 600;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: rgba(27, 42, 78, 0.3); }
.cell-org { font-weight: 600; color: var(--text); }
.cell-meta { color: var(--text-muted); font-size: 0.85rem; }
.th-actions, .cell-actions { text-align: right; }
.cell-actions { display: flex; gap: 14px; justify-content: flex-end; align-items: center; }

.link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
}
.link:hover { color: var(--accent-glow); }
.link-muted { color: var(--text-muted); }
.link-muted:hover { color: var(--text); }
.link-danger { color: var(--danger); }
.link-danger:hover { color: #FF8585; }
.inline-form { display: inline; margin: 0; padding: 0; }

/* Pills */
.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pill-success { background: rgba(62, 207, 142, 0.12); color: var(--success); }
.pill-progress { background: rgba(244, 196, 48, 0.12); color: var(--accent); }
.pill-idle { background: rgba(139, 149, 168, 0.12); color: var(--text-muted); }

/* ============================================================
   EMPTY STATE
   ============================================================ */

.empty-state {
  background: var(--bg-elevated);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 64px 32px;
  text-align: center;
}
.empty-icon {
  font-size: 3rem;
  color: var(--accent);
  margin-bottom: 12px;
  opacity: 0.7;
}
.empty-state h3 { font-size: 1.4rem; margin-bottom: 8px; }
.empty-state p { color: var(--text-muted); max-width: 400px; margin: 0 auto 24px; }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 20px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.2;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .15s;
  text-decoration: none;
  appearance: none;
}
.btn-sm { padding: 7px 14px; font-size: 0.85rem; }
.btn-primary {
  background: var(--accent);
  color: var(--bg-base);
}
.btn-primary:hover {
  background: var(--accent-glow);
  color: var(--bg-base);
  box-shadow: 0 0 20px rgba(244, 196, 48, 0.4);
}
.btn-secondary {
  background: var(--bg-elevated);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover {
  background: var(--bg-surface);
  color: var(--text);
  border-color: var(--accent);
}
.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border-color: var(--border);
}
.btn-ghost:hover {
  color: var(--text);
  background: var(--bg-elevated);
}

.is-deeplink-target {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* ============================================================
   FORMS
   ============================================================ */

.form-page {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  max-width: 960px;
  margin: 16px auto;
}
.form-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
}
.form-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.78rem;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 8px;
}
.form-card h1 { font-size: 1.8rem; margin-bottom: 12px; }
.form-lead { color: var(--text-2); margin-bottom: 32px; }

.stacked-form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.field input, .field textarea, .field select {
  background: var(--bg-base);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 0.95rem;
  font-family: var(--font-body);
  transition: border-color .15s, box-shadow .15s;
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Custom chevron — yellow arrow on dark background */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23F4C430' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 1 6 6 11 1'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 38px;
  cursor: pointer;
}
.field select option {
  background: var(--bg-elevated);
  color: var(--text);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft-2);
}
.field-hint { font-size: 0.82rem; color: var(--text-muted); }
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.info-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.info-card h3 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.info-card-reference {
  display: block;
}
.info-card-section + .info-card-section {
  margin-top: 28px;
}
.band-list { list-style: none; padding: 0; margin: 0; }
.band-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.external-start-form {
  display: none;
  margin-top: 20px;
}

.external-start-status {
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.5;
  margin-top: 18px;
  padding-top: 16px;
}

.external-start-status.is-ready {
  color: var(--text-2);
}

.external-form-actions {
  justify-content: space-between;
}

html.is-formless-assessment-start .form-page[data-new-assessment-page],
html.is-production-iframe-app .form-page[data-new-assessment-page],
body.is-production-iframe-app .form-page[data-new-assessment-page] {
  grid-template-columns: 1fr;
  max-width: 100%;
  width: 100%;
}

html.is-formless-assessment-start [data-in-app-form-card],
html.is-production-iframe-app [data-in-app-form-card],
body.is-production-iframe-app [data-in-app-form-card] {
  display: none;
}

html.is-formless-assessment-start .info-card-reference,
html.is-production-iframe-app .info-card-reference,
body.is-production-iframe-app .info-card-reference {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

html.is-formless-assessment-start .info-card-section + .info-card-section,
html.is-production-iframe-app .info-card-section + .info-card-section,
body.is-production-iframe-app .info-card-section + .info-card-section {
  margin-top: 0;
}

html.is-formless-assessment-start .info-card,
html.is-production-iframe-app .info-card,
body.is-production-iframe-app .info-card {
  width: 100%;
}

html.is-formless-assessment-start .external-start-form,
html.is-production-iframe-app .external-start-form,
body.is-production-iframe-app .external-start-form {
  display: block;
}
.band-item:last-child { border-bottom: none; }
.band-marker {
  width: 10px;
  height: 28px;
  border-radius: 3px;
}
.band-item-grounded .band-marker     { background: var(--band-grounded); }
.band-item-taxiing .band-marker      { background: var(--band-taxiing); }
.band-item-climbing .band-marker     { background: var(--band-climbing); }
.band-item-cruising .band-marker     { background: var(--band-cruising); }
.band-item-stratosphere .band-marker { background: var(--band-stratosphere); }
.band-name { font-weight: 600; color: var(--text); font-size: 0.92rem; }
.band-range { font-size: 0.8rem; color: var(--text-muted); }

.scale-list { list-style: none; padding: 0; margin: 0; }
.scale-list li {
  padding: 6px 0;
  font-size: 0.92rem;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 10px;
}
.scale-list .scale-num {
  display: inline-flex;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--bg-surface);
  color: var(--accent);
  font-weight: 600;
  font-family: var(--font-mono);
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
}

/* ============================================================
   ASSESSMENT PAGE
   ============================================================ */

.assessment-header {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  margin-bottom: 32px;
}
.back-link {
  font-size: 0.85rem;
  color: var(--text-muted);
  display: inline-block;
  margin-bottom: 12px;
}
.back-link:hover { color: var(--accent); }
.ah-meta h1 { font-size: 1.8rem; margin-bottom: 6px; }
.ah-sub {
  color: var(--text-muted);
  font-size: 0.9rem;
  display: flex;
  gap: 8px;
  align-items: center;
}
.ah-sub strong { color: var(--text-2); font-weight: 600; }
.dot-sep { color: var(--text-dim); }

.ah-progress {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.progress-count { color: var(--text); font-weight: 600; }
.progress-track {
  height: 6px;
  background: var(--bg-surface);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-glow));
  border-radius: 999px;
  transition: width .3s;
  box-shadow: 0 0 8px rgba(244, 196, 48, 0.5);
}
.progress-overall {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.overall-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.overall-value {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text);
  margin-left: auto;
}
.overall-value span { font-family: var(--font-mono); }

.overall-altitude {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 999px;
}

/* Category nav (sticky side anchor list) */
.category-nav {
  position: sticky;
  top: 100px;
  float: right;
  width: 220px;
  margin-left: 24px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: none; /* hidden on small viewports; shown via media query */
}
@media (min-width: 1100px) {
  .category-nav { display: block; }
  .assessment-body { margin-right: 244px; }
}
.catnav-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.category-nav ul { list-style: none; padding: 0; margin: 0; }
.category-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius);
  color: var(--text-2);
  font-size: 0.88rem;
  transition: all .15s;
}
.category-nav a:hover { background: var(--bg-surface); color: var(--text); }
.category-nav a.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  border-left: 2px solid var(--accent);
  padding-left: 8px;
}
.catnav-icon {
  width: 22px;
  height: 22px;
  background: var(--bg-surface);
  color: var(--accent);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
}

/* Category cards */
.category-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-bottom: 24px;
  scroll-margin-top: 100px;
}
.cat-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.cat-head-icon {
  width: 44px;
  height: 44px;
  background: var(--bg-surface);
  color: var(--accent);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  border: 1px solid var(--border-strong);
}
.cat-head h2 { font-size: 1.3rem; margin-bottom: 4px; }
.cat-desc { color: var(--text-muted); font-size: 0.9rem; margin: 0; }
.cat-score {
  text-align: right;
  padding-left: 18px;
  border-left: 1px solid var(--border);
}
.cat-score-pct {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--text);
}
.cat-score-pct .cat-pct-val { font-family: var(--font-mono); }
.cat-score-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* Question block */
.question {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.question:last-child { border-bottom: none; padding-bottom: 0; }
.question-text {
  font-size: 0.98rem;
  color: var(--text);
  margin-bottom: 14px;
  line-height: 1.5;
}

.scale-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.scale-btn {
  flex: 1 1 0;
  min-width: 110px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all .15s;
  font-family: var(--font-body);
}
.scale-btn:hover {
  border-color: var(--border-strong);
  background: var(--bg-elevated);
  transform: translateY(-1px);
}
.scale-btn .scale-num {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-muted);
}
.scale-btn .scale-label {
  font-size: 0.74rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.scale-btn.is-selected {
  background: var(--accent-soft-2);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.scale-btn.is-selected .scale-num,
.scale-btn.is-selected .scale-label {
  color: var(--accent);
}
.scale-clear {
  background: none;
  border: 1px solid transparent;
  color: var(--text-dim);
  font-size: 0.78rem;
  padding: 0 12px;
  cursor: pointer;
  border-radius: var(--radius);
  align-self: stretch;
  transition: color .15s;
}
.scale-clear:hover { color: var(--danger); }

.question-note {
  margin-top: 12px;
  font-size: 0.85rem;
}
.question-note summary {
  cursor: pointer;
  color: var(--text-muted);
  list-style: none;
  display: inline-block;
  padding: 4px 0;
}
.question-note summary::-webkit-details-marker { display: none; }
.question-note summary:hover { color: var(--accent); }
.note-input {
  margin-top: 8px;
  width: 100%;
  background: var(--bg-base);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  resize: vertical;
}
.note-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft-2);
}

/* Sticky bottom action bar */
.assessment-actions {
  position: sticky;
  bottom: 0;
  margin-top: 32px;
  background: rgba(10, 15, 31, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 16px 24px;
  z-index: 10;
}
.assessment-actions-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--max);
  margin: 0 auto;
}
.autosave-status {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  gap: 8px;
}
.autosave-status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
}
.autosave-status.is-saving::before { background: var(--accent); animation: pulse 0.8s infinite; }
.autosave-status.is-error::before { background: var(--danger); }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.action-buttons { display: flex; gap: 10px; }

/* ============================================================
   RESULTS PAGE
   ============================================================ */

.results-header { margin-bottom: 32px; }
.results-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.78rem;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 8px;
}
.results-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.results-head-row h1 { font-size: 2.2rem; margin-bottom: 8px; }
.results-meta { color: var(--text-muted); font-size: 0.9rem; display: flex; gap: 8px; align-items: center; }
.results-meta strong { color: var(--text-2); font-weight: 600; }
.results-actions { display: flex; gap: 10px; }

.results-summary {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  align-items: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 32px;
}
.summary-altitude {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 0 auto;
}
.altitude-ring { width: 100%; height: 100%; }
.ring-bg { fill: none; stroke: var(--bg-surface); stroke-width: 14; }
.ring-fg {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
  transition: stroke-dashoffset .8s ease-out;
}
.ring-grounded     { stroke: var(--band-grounded); }
.ring-taxiing      { stroke: var(--band-taxiing); }
.ring-climbing     { stroke: var(--band-climbing); }
.ring-cruising     { stroke: var(--band-cruising); }
.ring-stratosphere { stroke: var(--band-stratosphere); filter: drop-shadow(0 0 8px var(--band-stratosphere)); }

.ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ring-pct {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
}
.ring-pct span { font-size: 1.4rem; color: var(--text-muted); }
.ring-altitude {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 6px;
  padding: 4px 12px;
  border-radius: 999px;
}
.ring-progress {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 8px;
}

.summary-headline h2 { font-size: 1.5rem; margin-bottom: 10px; }
.summary-headline p { color: var(--text-2); margin-bottom: 20px; }

.highlight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.highlight-card {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.highlight-strong { border-left: 3px solid var(--success); }
.highlight-weak { border-left: 3px solid var(--danger); }
.highlight-eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.highlight-name { font-weight: 600; color: var(--text); font-size: 0.95rem; }

/* Domain breakdown */
.domain-grid {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.domain-row {
  display: grid;
  grid-template-columns: 240px 1fr 200px;
  gap: 24px;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.domain-row:last-child { border-bottom: none; }
.domain-row:hover { background: rgba(27, 42, 78, 0.3); }
.domain-row-empty { opacity: 0.55; }
.domain-name { font-weight: 600; color: var(--text); font-size: 0.95rem; margin-bottom: 4px; }
.domain-meta { font-size: 0.78rem; color: var(--text-muted); }
.domain-bar-wrap { width: 100%; }
.domain-bar {
  height: 8px;
  background: var(--bg-surface);
  border-radius: 999px;
  overflow: hidden;
}
.domain-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .8s ease-out;
}
.domain-fill-grounded     { background: var(--band-grounded); }
.domain-fill-taxiing      { background: var(--band-taxiing); }
.domain-fill-climbing     { background: var(--band-climbing); }
.domain-fill-cruising     { background: var(--band-cruising); }
.domain-fill-stratosphere { background: var(--band-stratosphere); }
.domain-score { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.domain-pct {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text);
}
.domain-pct span { color: var(--text-muted); font-size: 0.9rem; font-family: var(--font-mono); }
.domain-empty {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Altitude badges */
.altitude-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.altitude-grounded     { background: rgba(239, 104, 104, 0.12); color: var(--band-grounded); }
.altitude-taxiing      { background: rgba(255, 142, 71, 0.12); color: var(--band-taxiing); }
.altitude-climbing     { background: rgba(255, 176, 32, 0.12); color: var(--band-climbing); }
.altitude-cruising     { background: rgba(62, 207, 142, 0.12); color: var(--band-cruising); }
.altitude-stratosphere { background: rgba(244, 196, 48, 0.14); color: var(--band-stratosphere); }
.altitude-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Band reference grid */
.band-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.band-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.band-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.band-card.altitude-grounded::before     { background: var(--band-grounded); }
.band-card.altitude-taxiing::before      { background: var(--band-taxiing); }
.band-card.altitude-climbing::before     { background: var(--band-climbing); }
.band-card.altitude-cruising::before     { background: var(--band-cruising); }
.band-card.altitude-stratosphere::before { background: var(--band-stratosphere); }
.band-card-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 24px rgba(244, 196, 48, 0.15);
}
.band-card-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}
.band-card-range {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.band-card-headline {
  font-size: 0.82rem;
  color: var(--text-2);
  line-height: 1.4;
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 80px;
  padding: 24px 0;
  background: var(--bg-base);
}
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.footer-brand {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.footer-dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-altitude { display: none; }
  .hero-title { font-size: 2.2rem; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .form-page { grid-template-columns: 1fr; }
  .assessment-header { grid-template-columns: 1fr; }
  .results-summary { grid-template-columns: 1fr; }
  .summary-altitude { width: 200px; height: 200px; }
  .domain-row { grid-template-columns: 1fr; gap: 8px; }
  .band-grid { grid-template-columns: repeat(2, 1fr); }
  .main { padding: 24px 20px 60px; }
  .scale-btn { min-width: calc(33% - 6px); }
}

@media (max-width: 700px) {
  html.is-formless-assessment-start .info-card-reference,
  html.is-production-iframe-app .info-card-reference,
  body.is-production-iframe-app .info-card-reference {
    grid-template-columns: 1fr;
  }

  html.is-formless-assessment-start .info-card-section + .info-card-section,
  html.is-production-iframe-app .info-card-section + .info-card-section,
  body.is-production-iframe-app .info-card-section + .info-card-section {
    margin-top: 28px;
  }
}

@media (max-width: 540px) {
  .topbar-inner { padding: 14px 20px; }
  .brand-product { display: none; }
  .stats { grid-template-columns: 1fr; }
  .scale-btn { min-width: calc(50% - 4px); }
  .band-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   REPORTS LANDING + TREND PAGES
   ============================================================ */

.reports-hero {
  padding: 24px 0 32px;
}
.reports-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.78rem;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 12px;
}
.reports-hero h1 { font-size: 2.4rem; line-height: 1.15; margin-bottom: 12px; }
.reports-sub { font-size: 1.05rem; color: var(--text-2); max-width: 640px; }

/* Numeric / right-aligned cells */
.data-table th.num,
.data-table td.num { text-align: right; }
.data-table-compact th,
.data-table-compact td { padding: 11px 16px; font-size: 0.88rem; }

.col-code { width: 60px; }
.cell-code {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
}
.cell-muted { color: var(--text-muted); }
.cell-bar { width: 140px; }

.org-score {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--text);
}
.org-score span { font-family: var(--font-mono); color: var(--text-muted); font-size: 0.85rem; }

/* Delta chips */
.delta {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
}
.delta-up { background: rgba(62, 207, 142, 0.12); color: var(--success); }
.delta-down { background: rgba(239, 104, 104, 0.12); color: var(--danger); }
.delta-flat { background: rgba(139, 149, 168, 0.12); color: var(--text-muted); }
.delta-none {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Mini bar (per-domain trend row) */
.mini-bar {
  height: 6px;
  background: var(--bg-surface);
  border-radius: 999px;
  overflow: hidden;
}
.mini-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .6s ease-out;
}
.mini-bar-grounded     { background: var(--band-grounded); }
.mini-bar-taxiing      { background: var(--band-taxiing); }
.mini-bar-climbing     { background: var(--band-climbing); }
.mini-bar-cruising     { background: var(--band-cruising); }
.mini-bar-stratosphere { background: var(--band-stratosphere); }

/* ============================================================
   PER-ORG REPORT
   ============================================================ */

.report-header {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  margin-bottom: 32px;
}
.report-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.report-actions { display: flex; gap: 10px; }
.report-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.76rem;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 8px;
}
.report-header h1 { font-size: 2rem; margin-bottom: 20px; }

.report-summary-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.report-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.report-stat-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.report-stat-value {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
}
.report-stat-value span { color: var(--text-muted); font-size: 1rem; font-family: var(--font-mono); }
.report-stat-text { font-size: 0.95rem; font-weight: 500; }

.report-footnote {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* ============================================================
   TREND CHART (SVG)
   ============================================================ */

.trend-chart-wrap {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.trend-svg {
  width: 100%;
  height: auto;
  display: block;
  font-family: var(--font-body);
}

.trend-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.6; }
.trend-axis-y {
  fill: var(--text-muted);
  font-size: 11px;
  font-family: var(--font-mono);
  text-anchor: end;
}
.trend-axis-x {
  fill: var(--text-2);
  font-size: 11px;
  font-family: var(--font-mono);
}

/* Background band tints — subtle so the line dominates */
.trend-band { opacity: 0.18; }
.trend-band-grounded     { fill: var(--band-grounded); }
.trend-band-taxiing      { fill: var(--band-taxiing); }
.trend-band-climbing     { fill: var(--band-climbing); }
.trend-band-cruising     { fill: var(--band-cruising); }
.trend-band-stratosphere { fill: var(--band-stratosphere); }

.trend-area {
  fill: var(--accent);
  opacity: 0.12;
}
.trend-line {
  stroke: var(--accent);
  stroke-width: 2.5;
  fill: none;
  filter: drop-shadow(0 0 4px rgba(244, 196, 48, 0.4));
}
.trend-point {
  stroke: var(--bg-base);
  stroke-width: 2;
  cursor: pointer;
}
.trend-point-grounded     { fill: var(--band-grounded); }
.trend-point-taxiing      { fill: var(--band-taxiing); }
.trend-point-climbing     { fill: var(--band-climbing); }
.trend-point-cruising     { fill: var(--band-cruising); }
.trend-point-stratosphere { fill: var(--band-stratosphere); }
.trend-point-label {
  fill: var(--text);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
}
.trend-empty {
  fill: var(--text-muted);
  font-size: 12px;
  font-style: italic;
}

.trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--text-muted);
}
.trend-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.trend-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: inline-block;
  opacity: 0.6;
}

/* ============================================================
   EXECUTIVE VISUALS — shared chart container + heat / radar /
   sparkline / matrix / portfolio / band-distribution styles.
   Used on:
   - /reports          (portfolio heat map, band distribution)
   - /reports/{slug}   (snapshot heat, evolution matrix, sparklines, radar, movers)
   - printable report  (snapshot heat + radar)
   ============================================================ */

.chart-wrap {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.chart-wrap-center { text-align: center; }
.chart-wrap-scroll { overflow-x: auto; }
.chart-wrap svg { display: block; max-width: 100%; height: auto; }
.chart-empty {
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  padding: 32px 0;
  font-size: 0.92rem;
}

/* --- Heat map cells (snapshot + matrix + portfolio share these) --- */
.heat-svg, .matrix-svg, .portfolio-svg, .spark-svg, .radar-svg, .banddist-svg {
  font-family: var(--font-body);
}

.heat-cell,
.matrix-cell {
  stroke: rgba(255,255,255,0.04);
  stroke-width: 1;
}
.heat-cell-grounded,     .matrix-cell-grounded     { fill: var(--band-grounded); }
.heat-cell-taxiing,      .matrix-cell-taxiing      { fill: var(--band-taxiing); }
.heat-cell-climbing,     .matrix-cell-climbing     { fill: var(--band-climbing); }
.heat-cell-cruising,     .matrix-cell-cruising     { fill: var(--band-cruising); }
.heat-cell-stratosphere, .matrix-cell-stratosphere { fill: var(--band-stratosphere); }
.heat-cell-empty,        .matrix-cell-empty        { fill: rgba(139, 149, 168, 0.18); stroke: var(--border); }

/* Snapshot heat-map cell text */
.heat-cell-code  { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; font-family: var(--font-mono); opacity: 0.85; }
.heat-cell-pct   { font-size: 30px; font-weight: 800; font-family: var(--font-display); }
.heat-cell-name  { font-size: 10.5px; font-weight: 600; }
/* Text color picks: darker bands need light text; amber/yellow need dark text */
.heat-cell-label-grounded,
.heat-cell-label-taxiing      { fill: #FFFFFF; }
.heat-cell-label-climbing     { fill: #5C3A00; }  /* on amber */
.heat-cell-label-cruising     { fill: #0E3E27; }  /* on green */
.heat-cell-label-stratosphere { fill: #4A380B; }  /* on yellow */
.heat-cell-label-empty        { fill: var(--text-muted); }

/* Five-swatch legend used under heat map / evolution matrix */
.heat-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--text-2);
}
.heat-legend-item { display: inline-flex; align-items: center; gap: 8px; }
.heat-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: inline-block;
}
.heat-legend-range { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.78rem; }

/* --- Evolution matrix --- */
.matrix-row-code {
  fill: var(--text-2);
  font-size: 11.5px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}
.matrix-row-name {
  fill: var(--text);
  font-size: 12.5px;
  font-weight: 500;
}
.matrix-cell-text { font-size: 12px; font-weight: 700; font-family: var(--font-mono); }
.matrix-cell-text-light  { fill: #FFFFFF; }
.matrix-cell-text-dark   { fill: #2D1B00; }
.matrix-cell-text-muted  { fill: var(--text-muted); }
.matrix-axis-x {
  fill: var(--text-muted);
  font-size: 10.5px;
  font-family: var(--font-mono);
}

/* --- Domain sparklines --- */
.spark-card {
  fill: var(--bg-base);
  stroke: var(--border);
  stroke-width: 1;
}
.spark-code   { fill: var(--text-muted); font-size: 11px; font-weight: 700; font-family: var(--font-mono); letter-spacing: 0.06em; }
.spark-name   { fill: var(--text); font-size: 11.5px; font-weight: 500; }
.spark-latest { font-size: 14px; font-weight: 700; font-family: var(--font-display); }
.spark-latest-grounded     { fill: var(--band-grounded); }
.spark-latest-taxiing      { fill: var(--band-taxiing); }
.spark-latest-climbing     { fill: var(--band-climbing); }
.spark-latest-cruising     { fill: var(--band-cruising); }
.spark-latest-stratosphere { fill: var(--band-stratosphere); }
.spark-mid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.55; }
.spark-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark-line-grounded     { stroke: var(--band-grounded); }
.spark-line-taxiing      { stroke: var(--band-taxiing); }
.spark-line-climbing     { stroke: var(--band-climbing); }
.spark-line-cruising     { stroke: var(--band-cruising); }
.spark-line-stratosphere { stroke: var(--band-stratosphere); }
.spark-area              { opacity: 0.14; }
.spark-area-grounded     { fill: var(--band-grounded); }
.spark-area-taxiing      { fill: var(--band-taxiing); }
.spark-area-climbing     { fill: var(--band-climbing); }
.spark-area-cruising     { fill: var(--band-cruising); }
.spark-area-stratosphere { fill: var(--band-stratosphere); }
.spark-point {
  stroke: var(--bg-elevated);
  stroke-width: 2;
}
.spark-point-grounded     { fill: var(--band-grounded); }
.spark-point-taxiing      { fill: var(--band-taxiing); }
.spark-point-climbing     { fill: var(--band-climbing); }
.spark-point-cruising     { fill: var(--band-cruising); }
.spark-point-stratosphere { fill: var(--band-stratosphere); }
.spark-extremum-min { fill: var(--text-muted); }
.spark-extremum-max { fill: var(--text-2); }
.spark-empty {
  fill: var(--text-muted);
  font-size: 11px;
  font-style: italic;
}

/* --- Radar overlay --- */
.radar-grid {
  fill: none;
  stroke: var(--border);
  stroke-width: 1;
  opacity: 0.55;
}
.radar-spoke {
  stroke: var(--border);
  stroke-width: 1;
  opacity: 0.45;
}
.radar-tick {
  fill: var(--text-muted);
  font-size: 9.5px;
  font-family: var(--font-mono);
}
.radar-poly {
  stroke-width: 2;
  stroke-linejoin: round;
}
.radar-poly-first  { fill: var(--text-muted); fill-opacity: 0.16; stroke: var(--text-muted); stroke-opacity: 0.65; stroke-dasharray: 4 4; }
.radar-poly-latest { fill: var(--accent); fill-opacity: 0.28; stroke: var(--accent); }
.radar-vertex      { fill: var(--accent); stroke: var(--bg-elevated); stroke-width: 1.5; }
.radar-axis-label  { fill: var(--text-2); font-size: 11px; font-weight: 700; font-family: var(--font-mono); letter-spacing: 0.04em; }
.radar-swatch      { stroke: none; }
.radar-swatch-first  { fill: var(--text-muted); fill-opacity: 0.5; }
.radar-swatch-latest { fill: var(--accent); fill-opacity: 0.75; }
.radar-legend-label  { fill: var(--text-2); font-size: 11px; }
.radar-domain-key {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 24px;
  text-align: left;
  margin: 20px auto 0;
  max-width: 560px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
}
.radar-domain-key-row { display: flex; align-items: baseline; gap: 8px; }
.radar-domain-key-code {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-size: 0.78rem;
  flex-shrink: 0;
  width: 30px;
}
.radar-domain-key-name { color: var(--text-2); }

/* --- Portfolio heat map --- */
.portfolio-col-code {
  fill: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}
.portfolio-col-name {
  fill: var(--text);
  font-size: 11.5px;
  font-weight: 600;
}
.portfolio-row-name {
  fill: var(--text);
  font-size: 12.5px;
  font-weight: 500;
}
.portfolio-overall-cell { stroke: var(--accent); stroke-width: 1.5; }
.portfolio-overall-text { font-weight: 800; font-size: 13px; }

/* --- Band distribution --- */
.banddist-title {
  fill: var(--text-2);
  font-size: 12px;
  font-weight: 600;
}
.banddist-track {
  fill: var(--bg-base);
  stroke: var(--border);
  stroke-width: 1;
}
.banddist-seg {
  stroke: var(--bg-elevated);
  stroke-width: 1;
}
.banddist-seg-grounded     { fill: var(--band-grounded); }
.banddist-seg-taxiing      { fill: var(--band-taxiing); }
.banddist-seg-climbing     { fill: var(--band-climbing); }
.banddist-seg-cruising     { fill: var(--band-cruising); }
.banddist-seg-stratosphere { fill: var(--band-stratosphere); }
.banddist-seg-label {
  font-size: 13px;
  font-weight: 800;
  font-family: var(--font-mono);
}
.banddist-seg-label-grounded,
.banddist-seg-label-taxiing      { fill: #FFFFFF; }
.banddist-seg-label-climbing     { fill: #5C3A00; }
.banddist-seg-label-cruising     { fill: #0E3E27; }
.banddist-seg-label-stratosphere { fill: #4A380B; }
.banddist-stage-name {
  fill: var(--text-2);
  font-size: 11px;
  font-weight: 600;
}
.banddist-stage-share {
  fill: var(--text-muted);
  font-size: 10.5px;
  font-family: var(--font-mono);
}
.banddist-legend-text {
  fill: var(--text-muted);
  font-size: 10.5px;
}

/* --- Movers panel --- */
.movers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.movers-col-title {
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.movers-col-title-up   { color: var(--success); }
.movers-col-title-down { color: var(--danger); }

.mover-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.mover-card-up   { border-left-color: var(--success); }
.mover-card-down { border-left-color: var(--danger); }
.mover-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}
.mover-code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}
.mover-delta { font-weight: 700; font-size: 0.9rem; font-family: var(--font-mono); }
.mover-delta-up   { color: var(--success); }
.mover-delta-down { color: var(--danger); }
.mover-name {
  color: var(--text);
  font-weight: 500;
  font-size: 0.95rem;
  margin-bottom: 10px;
}
.mover-bar-row {
  display: grid;
  grid-template-columns: 48px 1fr 60px;
  align-items: center;
  gap: 10px;
}
.mover-bar-from {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.mover-bar-to {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  text-align: right;
}
.mover-bar {
  height: 6px;
  background: var(--bg-base);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.mover-bar-fill {
  height: 100%;
  border-radius: 3px;
}
.mover-empty {
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.88rem;
  padding: 14px 16px;
  background: var(--bg-elevated);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

@media (max-width: 900px) {
  .movers-grid { grid-template-columns: 1fr; }
  .radar-domain-key { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .report-summary-row { grid-template-columns: repeat(2, 1fr); }
  .report-meta-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .data-table-compact { font-size: 0.82rem; }
}

/* ============================================================
   PRINT — clean black-on-white "Save as PDF" output
   ============================================================ */

@media print {
  body {
    background: #fff !important;
    color: #1a1a1a !important;
  }
  body::before { display: none !important; }
  .topbar, .site-footer, .report-actions, .assessment-actions { display: none !important; }
  main { padding: 0 !important; max-width: 100% !important; }

  /* Light-mode overrides for print */
  .report-header,
  .table-wrap,
  .trend-chart-wrap,
  .chart-wrap,
  .stat-card,
  .domain-grid,
  .band-card,
  .results-summary,
  .category-card,
  .mover-card {
    background: #fff !important;
    border-color: #ccc !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
  /* Scope the heading-color reset so it applies to dashboard/trend pages
     only — never to the branded report (.rp pages have their own colors). */
  .report-header h1, .reports-hero h1, .results-header h1,
  .section h2, .section-head h2 { color: #1a1a1a !important; }
  p, td, th, .domain-name, .domain-meta, .cell-org, .report-stat-label, .report-stat-value {
    color: #1a1a1a !important;
  }
  .trend-grid { stroke: #d0d0d0 !important; }
  .trend-axis-y, .trend-axis-x { fill: #555 !important; }
  .trend-line { filter: none !important; }
  .trend-band { opacity: 0.12 !important; }
  /* Force the new chart fills + text colors to survive PDF export */
  .heat-cell, .matrix-cell, .banddist-seg,
  .spark-area, .spark-line, .spark-point,
  .radar-poly, .radar-vertex {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .mover-card { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mover-name, .mover-bar-from, .mover-bar-to { color: #1a1a1a !important; }
  .matrix-row-name, .portfolio-row-name, .spark-name { fill: #1a1a1a !important; }
  .matrix-row-code, .portfolio-col-code, .spark-code { fill: #555 !important; }
  .matrix-axis-x { fill: #555 !important; }
  .radar-axis-label { fill: #1a1a1a !important; }
  .radar-grid, .radar-spoke { stroke: #c0c8d6 !important; }
  .reports-eyebrow, .report-eyebrow, .results-eyebrow { color: #B8860B !important; }
  .data-table thead th {
    background: #1B2A4E !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .data-table tbody tr:hover { background: transparent !important; }
  .delta-up, .delta-down, .delta-flat,
  .pill, .altitude-badge {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .section { margin-top: 28px; page-break-before: auto; }

  /* Print-only header band so PDF has clear identification */
  .report-header::before {
    content: "JETSTREAM · AI ALTITUDE ASSESSMENT";
    display: block;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    letter-spacing: 0.15em;
    font-size: 0.85rem;
    color: #B8860B;
    border-bottom: 2px solid #1B2A4E;
    padding-bottom: 8px;
    margin-bottom: 16px;
  }
}

/* ============================================================
   PRINTABLE BRANDED REPORT
   ============================================================
   Mirrors the JetStream AI Blueprints whitepaper:
   - Dark navy cover with wireframe pattern + yellow gradient
   - White interior pages with blue-accent callouts and emphasis
   - Footer band: logo + copyright + page number + accent line
   - Yellow→blue gradient line at every page bottom
   ============================================================ */

:root {
  /* Whitepaper-specific palette */
  --rp-cover-bg: #0A1B45;
  --rp-cover-bg-2: #1A4FA8;
  --rp-page-bg: #FFFFFF;
  --rp-page-text: #1A1A1A;
  --rp-page-text-2: #4A4A4A;
  --rp-page-text-muted: #777;
  --rp-blue: #0F6FFF;
  --rp-blue-dark: #0F2A6B;
  --rp-blue-soft: #E8F0FF;
  --rp-yellow: #F4C430;
  --rp-border: #E0E4EC;
  --rp-border-soft: #EEF1F6;

  --rp-display: 'Oswald', system-ui, sans-serif;
  --rp-body: 'Inter', system-ui, sans-serif;
  --rp-mono: 'JetBrains Mono', ui-monospace, monospace;

  --rp-page-w: 8.5in;
  --rp-page-h: 11in;
  --rp-page-pad: 0.95in;
}

/* Toolbar (screen-only) */
.report-toolbar {
  position: sticky;
  top: 64px;
  z-index: 20;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  margin-bottom: 24px;
}
.toolbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.toolbar-title {
  font-family: var(--font-display);
  letter-spacing: 0.05em;
  font-size: 0.95rem;
  color: var(--text);
}
.toolbar-hint {
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Document container — gray "presentation" background around the white pages
   so the screen view looks like a print preview. */
.report-doc {
  background: #2A3654;
  padding: 32px 0;
  margin: 0 -32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* Each page is exactly letter-size on screen; the @page rule below handles print. */
.rp {
  width: var(--rp-page-w);
  height: var(--rp-page-h);
  background: var(--rp-page-bg);
  color: var(--rp-page-text);
  font-family: var(--rp-body);
  font-size: 10.5pt;
  line-height: 1.55;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
}
.rp-page-pad {
  flex: 1;
  padding: var(--rp-page-pad) var(--rp-page-pad) calc(var(--rp-page-pad) - 0.15in);
  overflow: hidden;
}

/* ============================================================
   COVER (page 1)
   ============================================================ */
.rp-cover {
  background: linear-gradient(180deg, #0A1B45 0%, #11286A 60%, #1A4FA8 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.rp-cover-mesh {
  position: absolute;
  inset: 0;
  opacity: 0.55;
}
.rp-cover-mesh svg {
  width: 100%;
  height: 100%;
  display: block;
}
.rp-cover-mesh .mesh-lines ellipse,
.rp-cover-mesh .mesh-lines line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.15);
  stroke-width: 0.4;
}
.rp-cover-mesh .mesh-radial line {
  stroke: rgba(255, 255, 255, 0.08);
}
.rp-cover-bottom-glow {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(244, 196, 48, 0.06) 60%,
    rgba(244, 196, 48, 0.30) 92%,
    rgba(244, 196, 48, 0.55) 100%);
  pointer-events: none;
  z-index: 1;
}
.rp-cover-content {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 0.7in 0.85in 0.55in;
  display: flex;
  flex-direction: column;
  color: #fff;
}

/* Brand mark */
.rp-brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rp-brand-mark {
  width: 30px; height: 30px;
  background: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rp-jet-icon {
  width: 18px;
  height: 18px;
  fill: var(--rp-cover-bg);
  stroke: var(--rp-cover-bg);
  stroke-width: 1;
  stroke-linejoin: round;
}
.rp-jet-icon-dark {
  width: 14px; height: 14px;
  fill: #1A1A1A;
}
.rp-jet-icon-blue {
  width: 22px; height: 22px;
  fill: var(--rp-blue);
}
.rp-brand-wordmark {
  font-family: var(--rp-display);
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: 18pt;
  color: #fff;
}

.rp-cover-spacer { flex: 0 0 1.6in; }
.rp-cover-spacer-grow { flex: 1; }

.rp-cover-title {
  font-family: var(--rp-display);
  font-weight: 600;
  font-size: 56pt;
  line-height: 1.02;
  margin: 0 0 0.32in;
  color: #fff;
  letter-spacing: -0.005em;
}
.rp-tm {
  font-size: 18pt;
  font-weight: 400;
  vertical-align: super;
  margin-left: 4px;
  color: rgba(255,255,255,0.85);
}
.rp-cover-sub {
  font-family: var(--rp-display);
  font-weight: 400;
  font-size: 22pt;
  line-height: 1.3;
  margin: 0 0 0.18in;
  color: #fff;
  max-width: 5.5in;
}
.rp-cover-sub-2 {
  font-family: var(--rp-body);
  font-size: 11pt;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

.rp-cover-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5in;
  font-size: 9pt;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.55;
}
.rp-cover-footer-r {
  text-align: right;
}
.rp-cover-footer-link {
  color: rgba(255, 255, 255, 0.75);
}

/* ============================================================
   INTERIOR PAGES (white)
   ============================================================ */

.rp-h1 {
  font-family: var(--rp-display);
  font-weight: 600;
  font-size: 32pt;
  line-height: 1.05;
  color: var(--rp-page-text);
  margin: 0 0 0.32in;
  letter-spacing: -0.005em;
}
.rp-h2 {
  font-family: var(--rp-display);
  font-weight: 600;
  font-size: 18pt;
  color: var(--rp-page-text);
  margin: 0.3in 0 0.12in;
}
.rp-lead {
  font-size: 11pt;
  color: var(--rp-page-text);
  margin: 0 0 0.22in;
}
.rp-intro {
  font-size: 10pt;
  color: var(--rp-page-text-2);
  margin: 0 0 0.22in;
  max-width: 6.8in;
}
.rp-body {
  font-size: 10pt;
  color: var(--rp-page-text);
  margin: 0 0 0.16in;
}
.rp-headline {
  font-family: var(--rp-display);
  font-weight: 500;
  font-size: 14pt;
  color: var(--rp-blue-dark);
  margin: 0.18in 0 0.1in;
  line-height: 1.3;
  max-width: 4.6in;
}
.rp-meta { color: var(--rp-page-text-muted); font-size: 9pt; }

/* Two-column layout for executive summary */
.rp-cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 0.4in;
  align-items: start;
}

/* Altitude readout — big number + altitude name */
.rp-altitude-readout {
  display: flex;
  align-items: center;
  gap: 0.25in;
  padding: 0.2in 0.25in;
  background: var(--rp-blue-soft);
  border-left: 4px solid var(--rp-blue);
  border-radius: 4px;
  margin: 0.2in 0;
}
.rp-altitude-pct {
  font-family: var(--rp-display);
  font-weight: 600;
  font-size: 56pt;
  line-height: 1;
  color: var(--rp-page-text);
}
.rp-altitude-pct span {
  font-family: var(--rp-mono);
  font-size: 22pt;
  color: var(--rp-page-text-muted);
}
.rp-altitude-meta { display: flex; flex-direction: column; gap: 4px; }
.rp-altitude-label {
  font-size: 8.5pt;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rp-page-text-muted);
  font-weight: 600;
}
.rp-altitude-name {
  font-family: var(--rp-display);
  font-weight: 600;
  font-size: 20pt;
  line-height: 1;
}
.rp-altitude-range {
  font-size: 9pt;
  color: var(--rp-page-text-muted);
  font-family: var(--rp-mono);
}

/* Callout boxes — match whitepaper rounded blue-bordered style */
.rp-callout {
  border: 1.2px solid var(--rp-blue);
  border-radius: 14px;
  padding: 0.22in 0.25in;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FBFF 100%);
}
.rp-callout-eyebrow {
  font-family: var(--rp-display);
  font-weight: 600;
  font-size: 14pt;
  color: var(--rp-blue);
  margin-bottom: 0.15in;
  line-height: 1.2;
}
.rp-band-list { list-style: none; padding: 0; margin: 0; }
.rp-band-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 9.5pt;
  border-bottom: 1px solid var(--rp-border-soft);
}
.rp-band-row:last-child { border-bottom: none; }
.rp-band-row-active {
  background: var(--rp-blue-soft);
  margin: 0 -10px;
  padding: 5px 10px;
  border-radius: 4px;
  font-weight: 600;
}
.rp-band-swatch {
  width: 8px;
  height: 18px;
  border-radius: 2px;
}
.rp-band-name { color: var(--rp-page-text); }
.rp-band-range { font-family: var(--rp-mono); font-size: 8.5pt; color: var(--rp-page-text-muted); }

/* Band color swatches */
.rp-band-grounded     { background: #EF6868 !important; color: #B23030 !important; }
.rp-band-taxiing      { background: #FF8E47 !important; color: #B85020 !important; }
.rp-band-climbing     { background: #FFB020 !important; color: #A06000 !important; }
.rp-band-cruising     { background: #3ECF8E !important; color: #207556 !important; }
.rp-band-stratosphere { background: #F4C430 !important; color: #8A6A0A !important; }

/* Stat row */
.rp-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.2in;
  margin-top: 0.32in;
  padding-top: 0.22in;
  border-top: 1px solid var(--rp-border);
}
.rp-stat-num {
  font-family: var(--rp-display);
  font-weight: 600;
  font-size: 16pt;
  color: var(--rp-page-text);
  line-height: 1.1;
}
.rp-stat-label {
  font-size: 8.5pt;
  color: var(--rp-page-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

/* Domain breakdown table */
.rp-domain-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9.5pt;
  margin-bottom: 0.2in;
}
.rp-domain-table thead th {
  background: var(--rp-blue-dark);
  color: #fff;
  text-align: left;
  padding: 9px 12px;
  font-family: var(--rp-display);
  font-weight: 500;
  font-size: 9pt;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.rp-domain-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--rp-border);
  vertical-align: middle;
}
.rp-domain-table tbody tr:last-child td { border-bottom: none; }
.rp-num { text-align: right; }
.rp-col-code { width: 0.5in; }
.rp-bar-col { width: 1.5in; }
.rp-cell-code {
  font-family: var(--rp-mono);
  color: var(--rp-blue);
  font-weight: 600;
  font-size: 9pt;
}
.rp-cell-name { font-weight: 500; color: var(--rp-page-text); }
.rp-row-weak { background: rgba(239, 104, 104, 0.05); }
.rp-row-strong { background: rgba(62, 207, 142, 0.05); }
.rp-flag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 7.5pt;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: middle;
}
.rp-flag-weak { background: rgba(239, 104, 104, 0.15); color: #B23030; }
.rp-flag-strong { background: rgba(62, 207, 142, 0.15); color: #207556; }

.rp-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 8pt;
  font-weight: 600;
  font-family: var(--rp-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.rp-bar {
  height: 7px;
  background: var(--rp-border-soft);
  border-radius: 999px;
  overflow: hidden;
}
.rp-bar-fill {
  height: 100%;
  border-radius: 999px;
}

/* Trend chart inside report */
.rp-trend-section { margin-top: 0.25in; }
.rp-trend-chart {
  background: #FAFBFE;
  border: 1px solid var(--rp-border);
  border-radius: 6px;
  padding: 0.15in;
}
.rp-trend-chart svg { width: 100%; height: auto; }
/* Override trend chart colors for white-page rendering */
.rp-trend-chart .trend-grid { stroke: #DDE2EA; stroke-dasharray: 2 4; opacity: 0.8; }
.rp-trend-chart .trend-axis-y, .rp-trend-chart .trend-axis-x { fill: #555; }
.rp-trend-chart .trend-line { stroke: var(--rp-blue); filter: none; }
.rp-trend-chart .trend-area { fill: var(--rp-blue); opacity: 0.08; }
.rp-trend-chart .trend-band { opacity: 0.18; }
.rp-trend-chart .trend-point { stroke: #fff; stroke-width: 2; }
.rp-trend-chart .trend-point-label { fill: #1A1A1A; font-weight: 600; }

/* --- Print-page rules for heat map + radar overlay --- */
/* These mirror the dark-theme web styles but on white pages. */
.rp-h2-spaced { margin-top: 0.28in; }

.rp-heat-wrap {
  background: #FAFBFE;
  border: 1px solid var(--rp-border);
  border-radius: 6px;
  padding: 0.15in 0.15in 0.1in;
  margin-top: 0.05in;
}
.rp-heat-wrap svg { width: 100%; height: auto; display: block; }
.rp-heat-wrap .heat-legend {
  margin-top: 0.12in;
  padding-top: 0.08in;
  border-top: 1px solid #E4EAF2;
  color: var(--rp-page-text-muted);
  font-size: 9pt;
  gap: 0.18in;
}
.rp-heat-wrap .heat-legend-range {
  color: var(--rp-page-text-muted);
  font-family: var(--rp-mono);
}

.rp-radar-wrap {
  display: grid;
  grid-template-columns: 4.2in 1fr;
  gap: 0.2in;
  background: #FAFBFE;
  border: 1px solid var(--rp-border);
  border-radius: 6px;
  padding: 0.18in;
  margin-top: 0.08in;
  align-items: center;
}
.rp-radar-wrap svg { width: 100%; height: auto; display: block; }
.rp-radar-key { font-size: 9pt; }
.rp-radar-key-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.rp-radar-key-code {
  font-family: var(--rp-mono);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--rp-blue);
  width: 26px;
  flex-shrink: 0;
}
.rp-radar-key-name { color: var(--rp-page-text); }

/* On the printable white pages, swap the dark-theme chart classes so the
   colored shapes survive but the labels / strokes look right on white. */
.rp-heat-wrap .heat-cell,
.rp-heat-wrap .matrix-cell,
.rp-radar-wrap .matrix-cell {
  stroke: #FFFFFF;
  stroke-width: 1;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.rp-heat-wrap .heat-cell-empty { fill: #E4E7EE; stroke: #CFD4DD; }
.rp-heat-wrap .heat-cell-pct,
.rp-heat-wrap .heat-cell-code,
.rp-heat-wrap .heat-cell-name {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.rp-radar-wrap .radar-grid  { stroke: #C9D2E2; opacity: 0.9; }
.rp-radar-wrap .radar-spoke { stroke: #C9D2E2; opacity: 0.7; }
.rp-radar-wrap .radar-tick  { fill: #6C7589; }
.rp-radar-wrap .radar-poly-latest { fill: var(--rp-blue); fill-opacity: 0.22; stroke: var(--rp-blue); }
.rp-radar-wrap .radar-vertex      { fill: var(--rp-blue); stroke: #FFFFFF; stroke-width: 1.5; }
.rp-radar-wrap .radar-swatch-latest { fill: var(--rp-blue); fill-opacity: 0.6; }
.rp-radar-wrap .radar-swatch-first  { fill: #8B95A8; fill-opacity: 0.45; }
.rp-radar-wrap .radar-poly-first    { fill: #8B95A8; fill-opacity: 0.12; stroke: #8B95A8; stroke-opacity: 0.55; stroke-dasharray: 4 4; }
.rp-radar-wrap .radar-axis-label  { fill: var(--rp-page-text); }
.rp-heat-wrap .heat-legend-swatch {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Recommendations */
.rp-rec-grid {
  display: flex;
  flex-direction: column;
  gap: 0.18in;
}
.rp-rec-card {
  border: 1.2px solid var(--rp-blue);
  border-radius: 12px;
  padding: 0.18in 0.22in;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FBFF 100%);
}
.rp-rec-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.rp-rec-rank {
  font-family: var(--rp-display);
  font-weight: 600;
  font-size: 13pt;
  color: var(--rp-blue);
}
.rp-rec-code {
  font-family: var(--rp-mono);
  font-size: 9pt;
  color: var(--rp-page-text-muted);
  font-weight: 600;
}
.rp-rec-pct {
  font-family: var(--rp-display);
  font-weight: 600;
  font-size: 14pt;
  color: var(--rp-page-text);
  margin-left: auto;
  margin-right: 6px;
}
.rp-rec-name {
  font-family: var(--rp-display);
  font-weight: 600;
  font-size: 13pt;
  color: var(--rp-page-text);
  margin: 4px 0 8px;
}
.rp-rec-lines {
  margin: 6px 0 0;
  padding-left: 1.2em;
  font-size: 9.5pt;
  color: var(--rp-page-text-2);
  line-height: 1.5;
}
.rp-rec-lines li { margin-bottom: 4px; }

/* Detailed responses */
.rp-domain-block {
  margin-bottom: 0.32in;
  page-break-inside: avoid;
}
.rp-domain-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 2px solid var(--rp-blue);
  margin-bottom: 6px;
}
.rp-domain-code {
  font-family: var(--rp-mono);
  font-weight: 600;
  font-size: 10pt;
  color: var(--rp-blue);
  background: var(--rp-blue-soft);
  padding: 3px 8px;
  border-radius: 4px;
}
.rp-domain-title {
  font-family: var(--rp-display);
  font-weight: 600;
  font-size: 14pt;
  margin: 0;
  flex: 1;
}
.rp-domain-pct {
  font-family: var(--rp-display);
  font-weight: 600;
  font-size: 14pt;
  color: var(--rp-page-text);
}
.rp-domain-desc {
  font-size: 9pt;
  color: var(--rp-page-text-muted);
  margin: 4px 0 8px;
  font-style: italic;
}

.rp-q-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9pt;
}
.rp-q-table thead th {
  background: var(--rp-border-soft);
  color: var(--rp-page-text-2);
  font-family: var(--rp-display);
  font-weight: 500;
  text-align: left;
  padding: 6px 10px;
  font-size: 8.5pt;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.rp-q-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--rp-border);
  vertical-align: top;
}
.rp-q-id {
  font-family: var(--rp-mono);
  font-size: 8pt;
  color: var(--rp-page-text-muted);
  width: 0.6in;
  white-space: nowrap;
}
.rp-q-text { color: var(--rp-page-text); }
.rp-q-note {
  margin-top: 4px;
  padding: 6px 9px;
  background: var(--rp-blue-soft);
  border-left: 2px solid var(--rp-blue);
  font-size: 8.5pt;
  color: var(--rp-page-text-2);
  border-radius: 2px;
}
.rp-q-score {
  text-align: center;
  font-family: var(--rp-mono);
  font-weight: 600;
  width: 0.5in;
  font-size: 10pt;
}
.rp-q-label { width: 1.1in; font-size: 9pt; color: var(--rp-page-text-2); }

/* Closing page */
.rp-closing-callout {
  margin: 0.3in 0 0.25in;
  padding: 0.3in 0.35in;
  border: 1.2px solid var(--rp-blue);
  border-radius: 14px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FBFF 100%);
  display: grid;
  grid-template-columns: 0.5in 1fr;
  gap: 0.2in;
  align-items: center;
}
.rp-closing-icon {
  background: var(--rp-blue-soft);
  border-radius: 50%;
  width: 0.5in; height: 0.5in;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rp-closing-text {
  font-family: var(--rp-display);
  font-weight: 500;
  font-size: 14pt;
  color: var(--rp-blue);
  line-height: 1.35;
}

.rp-mission-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.2in;
  margin-bottom: 0.3in;
}
.rp-mission-card {
  border: 1.2px solid var(--rp-blue);
  border-radius: 10px;
  padding: 0.22in 0.25in;
  background: #fff;
}
.rp-mission-head {
  font-family: var(--rp-display);
  font-weight: 600;
  font-size: 12pt;
  color: var(--rp-blue);
  margin-bottom: 8px;
}
.rp-mission-body {
  font-family: var(--rp-display);
  font-weight: 500;
  font-size: 11pt;
  color: var(--rp-page-text);
  line-height: 1.4;
}

.rp-contact-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 0.3in;
  margin-top: 0.4in;
  align-items: end;
}
.rp-contact-cta {
  font-family: var(--rp-display);
  font-weight: 600;
  font-size: 12pt;
  color: var(--rp-page-text);
  background: var(--rp-blue-soft);
  padding: 0.18in 0.22in;
  border-radius: 8px;
}
.rp-contact-meta {
  font-size: 9pt;
  color: var(--rp-page-text-2);
  text-align: right;
  line-height: 1.6;
}

/* ============================================================
   FOOTER BAND (every interior page)
   ============================================================ */
.rp-footer {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px 0.85in 18px;
  font-size: 8.5pt;
  color: var(--rp-page-text-2);
}
.rp-footer-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--rp-display);
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 9pt;
  color: var(--rp-page-text);
}
.rp-footer-mark svg { width: 14px; height: 14px; }
.rp-footer-copy {
  text-align: center;
  color: var(--rp-page-text-muted);
}
.rp-footer-page {
  font-family: var(--rp-mono);
  font-size: 9pt;
  color: var(--rp-page-text);
  font-weight: 600;
}
.rp-footer-accent {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--rp-blue) 0%, var(--rp-blue-dark) 35%, transparent 55%, var(--rp-yellow) 100%);
}

/* ============================================================
   PRINT
   ============================================================ */
@page {
  size: letter;
  margin: 0;
}

@media print {
  body {
    background: #fff !important;
    margin: 0 !important;
  }
  body::before { display: none !important; }
  .topbar, .site-footer, .no-print, .report-toolbar { display: none !important; }
  .main { padding: 0 !important; max-width: none !important; margin: 0 !important; }

  .report-doc {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    display: block !important;
  }
  .rp {
    box-shadow: none !important;
    page-break-after: always;
    break-after: page;
    margin: 0 !important;
    width: 8.5in !important;
    height: 11in !important;
  }
  .rp:last-child {
    page-break-after: auto;
    break-after: auto;
  }
  /* Force exact-color rendering so backgrounds/accents survive */
  .rp, .rp * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}


/* ============================================================
   PRINT REPORT — TARGETED FIXES
   ============================================================ */

/* Print-mode width: percentage instead of fixed inches so wkhtmltopdf
   and browser print engines render the page at the actual @page size.
   On screen, keep the letter-size preview look. */
@media print {
  .rp {
    width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
  }
  .rp-content {
    height: auto !important;
    min-height: 100vh;
  }
  .rp-cover {
    height: 100vh !important;
    min-height: 100vh;
  }
}

/* Stats row: switch from grid to flex (safer cross-renderer) */
.rp-stats-row {
  display: flex !important;
  justify-content: space-between;
  gap: 0.2in;
  flex-wrap: wrap;
}
.rp-stat {
  flex: 1 1 0;
  min-width: 0;
}

/* Two-column exec summary: switch to flex */
.rp-cols {
  display: flex !important;
  gap: 0.4in;
  align-items: stretch;
}
.rp-col-main { flex: 1.5; min-width: 0; }
.rp-callout { flex: 1; min-width: 0; }

/* Mission row: flex */
.rp-mission-row {
  display: flex !important;
  gap: 0.2in;
}
.rp-mission-card { flex: 1; }

/* Closing callout: flex layout */
.rp-closing-callout {
  display: flex !important;
  align-items: center;
  gap: 0.25in;
}
.rp-closing-icon { flex: 0 0 0.6in; }
.rp-closing-text { flex: 1; }

/* Recommendations rec-grid: flex */
.rp-rec-grid {
  display: flex !important;
  flex-direction: column;
  gap: 0.18in;
}

/* Contact row: flex */
.rp-contact-row {
  display: flex !important;
  gap: 0.3in;
  align-items: flex-end;
  justify-content: space-between;
}
.rp-contact-cta { flex: 1.3; }
.rp-contact-meta { flex: 1; max-width: 2.8in; }

/* Altitude readout: prevent the band class from adding background to
   the altitude name (the original rule sets background on .rp-band-*
   for use as a swatch; for the name pill we need a separate treatment). */
.rp-altitude-name.rp-band-grounded     { background: transparent !important; color: var(--band-grounded) !important; }
.rp-altitude-name.rp-band-taxiing      { background: transparent !important; color: var(--band-taxiing) !important; }
.rp-altitude-name.rp-band-climbing     { background: transparent !important; color: #B07A00 !important; }
.rp-altitude-name.rp-band-cruising     { background: transparent !important; color: #207556 !important; }
.rp-altitude-name.rp-band-stratosphere { background: transparent !important; color: #8A6A0A !important; }

/* Pills: paint them properly. The shared .rp-band-* class (used for swatches
   on the band list) sets background+color; pills inherit that, which IS the
   intended look for them. So no override needed for .rp-pill specifically. */
.rp-pill.rp-band-grounded     { background: rgba(239,104,104,0.18) !important; color: #B23030 !important; }
.rp-pill.rp-band-taxiing      { background: rgba(255,142,71,0.18) !important; color: #B85020 !important; }
.rp-pill.rp-band-climbing     { background: rgba(255,176,32,0.20) !important; color: #A06000 !important; }
.rp-pill.rp-band-cruising     { background: rgba(62,207,142,0.18) !important; color: #207556 !important; }
.rp-pill.rp-band-stratosphere { background: rgba(244,196,48,0.22) !important; color: #8A6A0A !important; }

/* Bar fills should keep the solid swatch color, that was correct */

/* Footer: stick to bottom of each .rp section */
.rp { display: flex !important; flex-direction: column; }
.rp-page-pad { flex: 1 1 auto; }
.rp-footer { flex: 0 0 auto; }

/* Trend chart inside report page — cap height so it fits below the table */
.rp-trend-chart svg {
  width: 100%;
  height: auto;
  max-height: 2.4in;
}

/* Override band swatches (keep the band-list color blocks but don't tint text) */
.rp-band-row .rp-band-name { color: var(--rp-page-text) !important; }
.rp-band-row-active .rp-band-name { color: var(--rp-page-text) !important; }

/* Cover page wireframe: simplify to make sure something visible renders */
.rp-cover-mesh {
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 22px,
      rgba(255,255,255,0.05) 22px,
      rgba(255,255,255,0.05) 23px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0,
      transparent 22px,
      rgba(255,255,255,0.04) 22px,
      rgba(255,255,255,0.04) 23px
    ),
    radial-gradient(circle at 75% 65%, rgba(70,130,255,0.35) 0%, transparent 65%);
}
.rp-cover-mesh svg { display: none; }

/* ============================================================
   PRINT REPORT — COVER FIX
   ============================================================
   The .rp { display: flex } rule above is correct for content pages
   (lets the footer stick to the bottom), but breaks the cover, which
   relies on absolute-positioned overlays + a flex content column.
   Restrict the flex layout to .rp-content / .rp-closing only.
*/
.rp { display: block !important; }
.rp-content,
.rp-closing {
  display: flex !important;
  flex-direction: column;
}
.rp-content > .rp-page-pad,
.rp-closing > .rp-page-pad { flex: 1 1 auto; }
.rp-content > .rp-footer,
.rp-closing > .rp-footer { flex: 0 0 auto; }

/* Cover: ensure it's exactly one full page */
.rp-cover {
  position: relative;
  width: 8.5in;
  height: 11in;
}
@media print {
  .rp-cover {
    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh;
    page-break-after: always;
    break-after: page;
  }
}

/* ============================================================
   PRINT REPORT — COVER ROBUST SIZING
   ============================================================
   wkhtmltopdf doesn't reliably honor 100vh in print. Use absolute
   inch units everywhere on the cover so it survives any rendering
   pipeline (browser print, wkhtmltopdf, headless Chrome, etc.).
*/
.rp-cover {
  width: 8.5in !important;
  min-height: 10.95in !important;  /* slightly under 11in to avoid overflow into a 2nd page */
  height: 10.95in !important;
  position: relative;
  page-break-after: always;
  break-after: page;
}
.rp-cover-content {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 10.95in;
  padding: 0.7in 0.85in 0.55in;
  display: flex;
  flex-direction: column;
  color: #fff;
  box-sizing: border-box;
}
.rp-cover-mesh,
.rp-cover-bottom-glow {
  position: absolute;
  pointer-events: none;
}
.rp-cover-mesh { inset: 0; opacity: 0.55; }
.rp-cover-bottom-glow { left: 0; right: 0; bottom: 0; height: 38%; }

@media print {
  .rp-cover {
    width: 100% !important;
    height: 10.95in !important;
    min-height: 10.95in !important;
  }
}

/* Reduce the cover-spacer flex-grow which may have been overriding height */
.rp-cover-spacer { flex: 0 0 1.4in; }
.rp-cover-spacer-grow { flex: 1 1 auto; min-height: 0.5in; }

/* ============================================================
   PRINT REPORT — COVER FINAL POLISH
   Lock cover typography to white, replace the overwhelming
   bottom-glow with a clean perspective wireframe + thin yellow
   accent strip that matches the whitepaper aesthetic.
   ============================================================ */

/* Force cover typography to white at maximum specificity, regardless
   of print media or other resets. */
.rp-cover .rp-cover-title,
.rp-cover .rp-cover-sub,
.rp-cover .rp-cover-sub-2,
.rp-cover .rp-cover-footer,
.rp-cover .rp-cover-footer * ,
.rp-cover .rp-brand-wordmark,
.rp-cover .rp-tm {
  color: #FFFFFF !important;
}
.rp-cover .rp-cover-sub-2 { color: rgba(255,255,255,0.85) !important; }
.rp-cover .rp-cover-footer { color: rgba(255,255,255,0.88) !important; }

@media print {
  .rp-cover .rp-cover-title,
  .rp-cover .rp-cover-sub,
  .rp-cover .rp-cover-sub-2,
  .rp-cover .rp-cover-footer,
  .rp-cover .rp-cover-footer *,
  .rp-cover .rp-brand-wordmark,
  .rp-cover .rp-tm {
    color: #FFFFFF !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* Vibrant whitepaper-style cover gradient: deep navy at top fading
   into a richer mid-blue toward the bottom, with the iconic yellow
   accent confined to a thin strip at the very bottom edge. */
.rp-cover {
  background: linear-gradient(180deg,
    #0A1F4A 0%,
    #0E2B6E 35%,
    #1843A8 75%,
    #1F55C9 95%) !important;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Replace the broad bottom-glow with a thin yellow accent strip — the
   whitepaper has just a sliver of yellow/gold at the very bottom edge,
   not a half-page wash. */
.rp-cover .rp-cover-bottom-glow {
  height: auto !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 0.42in !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(244, 196, 48, 0.0) 8%,
    rgba(244, 196, 48, 0.55) 35%,
    #F4C430 60%,
    #F4C430 90%,
    rgba(244, 196, 48, 0.65) 100%) !important;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Wireframe perspective grid — radiating lines from upper-right focal
   point, mimicking the whitepaper cover. CSS-only so it survives any
   rendering pipeline including wkhtmltopdf and headless Chrome. */
.rp-cover .rp-cover-mesh {
  background:
    /* Concentric arcs (suggested by repeating radial gradients) */
    radial-gradient(ellipse 9in 9in at 110% 30%,
      transparent 0,
      transparent 0.8in,
      rgba(255,255,255,0.08) 0.81in,
      rgba(255,255,255,0.08) 0.84in,
      transparent 0.85in,
      transparent 1.6in,
      rgba(255,255,255,0.07) 1.61in,
      rgba(255,255,255,0.07) 1.64in,
      transparent 1.65in,
      transparent 2.4in,
      rgba(255,255,255,0.06) 2.41in,
      rgba(255,255,255,0.06) 2.44in,
      transparent 2.45in,
      transparent 3.2in,
      rgba(255,255,255,0.05) 3.21in,
      rgba(255,255,255,0.05) 3.24in,
      transparent 3.25in,
      transparent 4.0in,
      rgba(255,255,255,0.045) 4.01in,
      rgba(255,255,255,0.045) 4.04in,
      transparent 4.05in,
      transparent 4.8in,
      rgba(255,255,255,0.04) 4.81in,
      rgba(255,255,255,0.04) 4.84in,
      transparent 4.85in,
      transparent 5.6in,
      rgba(255,255,255,0.035) 5.61in,
      rgba(255,255,255,0.035) 5.64in,
      transparent 5.65in,
      transparent 6.4in,
      rgba(255,255,255,0.03) 6.41in,
      rgba(255,255,255,0.03) 6.44in,
      transparent 6.45in
    ),
    /* Radiating diagonal lines from focal point */
    conic-gradient(from 165deg at 110% 30%,
      transparent 0deg, transparent 5deg,
      rgba(255,255,255,0.06) 5deg, rgba(255,255,255,0.06) 5.5deg,
      transparent 5.5deg, transparent 12deg,
      rgba(255,255,255,0.05) 12deg, rgba(255,255,255,0.05) 12.5deg,
      transparent 12.5deg, transparent 19deg,
      rgba(255,255,255,0.05) 19deg, rgba(255,255,255,0.05) 19.5deg,
      transparent 19.5deg, transparent 26deg,
      rgba(255,255,255,0.04) 26deg, rgba(255,255,255,0.04) 26.5deg,
      transparent 26.5deg, transparent 33deg,
      rgba(255,255,255,0.04) 33deg, rgba(255,255,255,0.04) 33.5deg,
      transparent 33.5deg, transparent 40deg,
      rgba(255,255,255,0.035) 40deg, rgba(255,255,255,0.035) 40.5deg,
      transparent 40.5deg, transparent 47deg,
      rgba(255,255,255,0.03) 47deg, rgba(255,255,255,0.03) 47.5deg,
      transparent 47.5deg
    ) !important;
  opacity: 1 !important;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.rp-cover .rp-cover-mesh svg { display: none !important; }

/* Slight upgrade to title weight + spacing to better match the whitepaper */
.rp-cover .rp-cover-title {
  font-weight: 600 !important;
  font-size: 60pt !important;
  line-height: 1.0 !important;
  letter-spacing: -0.01em !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
.rp-cover .rp-cover-sub {
  font-weight: 400 !important;
  font-size: 20pt !important;
  opacity: 0.95;
}

/* ============================================================
   BUSINESS VERTICAL TAG
   Compact pill used in tables and metadata blocks.
   ============================================================ */
.vertical-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 4px;
  background: rgba(244, 196, 48, 0.10);
  color: var(--accent);
  border: 1px solid rgba(244, 196, 48, 0.25);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* On the branded report (white pages), use a darker, print-safe variant */
.rp-vertical-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  background: rgba(30, 102, 224, 0.08);
  color: #1E66E0;
  border: 1px solid rgba(30, 102, 224, 0.25);
  font-size: 9.5pt;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Cover-page vertical chip — white-on-translucent */
.rp-cover-vertical {
  display: inline-block;
  margin-top: 0.25in;
  padding: 5px 14px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.30);
  font-size: 11pt;
  font-weight: 500;
  letter-spacing: 0.02em;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Trend-report vertical row spacing */
.report-vertical-row {
  margin-top: -8px;
  margin-bottom: 18px;
}

/* When the stat row is showing a text value (e.g. vertical name), shrink
   the size so it doesn't overflow the column. */
.rp-stat-num-text {
  font-size: 13pt !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
}

/* Two-column form row (e.g., First / Last side-by-side). */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) {
  .field-row { grid-template-columns: 1fr; }
}
.field-optional {
  font-weight: 400;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.78rem;
  margin-left: 4px;
}
.info-card-cta {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.info-card-hint {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ============================================================
   SCORING GUIDE PAGE
   ============================================================ */

.guide-hero { padding: 24px 0 32px; }
.guide-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.78rem;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 12px;
}
.guide-hero h1 { font-size: 2.4rem; line-height: 1.15; margin-bottom: 12px; }
.guide-sub { font-size: 1.05rem; color: var(--text-2); max-width: 700px; }
.guide-paragraph { color: var(--text-2); max-width: 800px; line-height: 1.6; }

/* Approach principles — numbered cards */
.guide-principles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (max-width: 800px) { .guide-principles { grid-template-columns: 1fr; } }
.principle {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: relative;
}
.principle-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 8px;
}
.principle h3 {
  font-size: 1.1rem;
  margin: 0 0 10px;
  color: var(--text);
}
.principle p {
  font-size: 0.92rem;
  color: var(--text-2);
  margin: 0;
  line-height: 1.55;
}

/* Maturity scale grid — one card per level (0..5) */
.maturity-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 800px) { .maturity-grid { grid-template-columns: 1fr; } }
.maturity-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  border-left: 4px solid var(--border-strong);
}
.maturity-card-0 { border-left-color: var(--band-grounded); }
.maturity-card-1 { border-left-color: var(--band-grounded); }
.maturity-card-2 { border-left-color: var(--band-taxiing); }
.maturity-card-3 { border-left-color: var(--band-climbing); }
.maturity-card-4 { border-left-color: var(--band-cruising); }
.maturity-card-5 { border-left-color: var(--band-stratosphere); }

.maturity-header {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}
.maturity-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  text-align: center;
}
.maturity-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--text);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.maturity-headline {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.maturity-desc {
  color: var(--text-2);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 14px;
}
.maturity-indicators-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.maturity-indicators {
  list-style: none;
  margin: 0;
  padding: 0;
}
.maturity-indicators li {
  font-size: 0.88rem;
  color: var(--text-2);
  line-height: 1.5;
  padding: 4px 0 4px 18px;
  position: relative;
}
.maturity-indicators li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

/* Altitude band detailed list */
.band-detail-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
}
.band-detail {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  border-left: 4px solid var(--border);
}
.band-detail-grounded     { border-left-color: var(--band-grounded); }
.band-detail-taxiing      { border-left-color: var(--band-taxiing); }
.band-detail-climbing     { border-left-color: var(--band-climbing); }
.band-detail-cruising     { border-left-color: var(--band-cruising); }
.band-detail-stratosphere { border-left-color: var(--band-stratosphere); }
.band-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.band-detail-marker {
  width: 12px;
  height: 22px;
  border-radius: 3px;
  background: currentColor;
}
.band-detail-grounded     .band-detail-marker { color: var(--band-grounded); }
.band-detail-taxiing      .band-detail-marker { color: var(--band-taxiing); }
.band-detail-climbing     .band-detail-marker { color: var(--band-climbing); }
.band-detail-cruising     .band-detail-marker { color: var(--band-cruising); }
.band-detail-stratosphere .band-detail-marker { color: var(--band-stratosphere); }
.band-detail h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  flex: 1;
}
.band-detail-range {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
}
.band-detail-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 800px) { .band-detail-body { grid-template-columns: 1fr; } }
.band-detail-section-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 6px;
}
.band-detail-section p {
  margin: 0;
  color: var(--text-2);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* Flow steps */
.guide-flow {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 800px;
}
.flow-step {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.flow-step:last-child { border-bottom: none; }
.flow-step-num {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: var(--accent);
  font-weight: 700;
  text-align: center;
  padding-top: 2px;
}
.flow-step h3 { font-size: 1rem; margin: 0 0 4px; color: var(--text); }
.flow-step p { font-size: 0.9rem; color: var(--text-2); margin: 0; line-height: 1.55; }

/* CTA card at the bottom */
.guide-cta-section { margin-top: 56px; }
.guide-cta-card {
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-elevated) 100%);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  text-align: center;
  box-shadow: 0 0 32px rgba(244, 196, 48, 0.08);
}
.guide-cta-card h2 { font-size: 1.6rem; margin: 0 0 10px; }
.guide-cta-card p {
  color: var(--text-2);
  max-width: 560px;
  margin: 0 auto 20px;
  font-size: 0.95rem;
  line-height: 1.55;
}

/* ============================================================
   BRANDED REPORT — DETAILED RECOMMENDATION ITEMS
   ============================================================ */
.rp-rec-items {
  display: flex;
  flex-direction: column;
  gap: 0.14in;
  margin-top: 0.10in;
}
.rp-rec-item {
  padding: 0.12in 0.16in;
  border-left: 3px solid #1E66E0;
  background: rgba(30, 102, 224, 0.04);
  border-radius: 0 4px 4px 0;
}
.rp-rec-item-headline {
  font-weight: 600;
  font-size: 11pt;
  color: var(--rp-page-text, #0A1A2E);
  line-height: 1.3;
  margin-bottom: 0.05in;
}
.rp-rec-item-detail {
  font-size: 9.5pt;
  color: #3A4A60;
  line-height: 1.5;
  margin-bottom: 0.06in;
}
.rp-rec-item-framework {
  font-family: var(--rp-mono, 'JetBrains Mono', monospace);
  font-size: 8pt;
  color: #1E66E0;
  letter-spacing: 0.02em;
  font-weight: 500;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ============================================================
   BRANDED REPORT — MATURITY SCALE REFERENCE PAGE
   ============================================================ */
.rp-maturity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.14in 0.20in;
  margin-top: 0.20in;
}
.rp-maturity-card {
  display: grid;
  grid-template-columns: 0.55in 1fr;
  gap: 0.12in;
  align-items: start;
  padding: 0.14in;
  border: 1px solid #D5DCE8;
  border-radius: 6px;
  background: #FAFBFD;
  border-left-width: 4px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.rp-maturity-0 { border-left-color: #EF6868; }
.rp-maturity-1 { border-left-color: #EF6868; }
.rp-maturity-2 { border-left-color: #FF8E47; }
.rp-maturity-3 { border-left-color: #FFB020; }
.rp-maturity-4 { border-left-color: #3ECF8E; }
.rp-maturity-5 { border-left-color: #F4C430; }
.rp-maturity-num {
  font-family: var(--rp-display, 'Oswald', sans-serif);
  font-size: 28pt;
  font-weight: 700;
  color: #1E66E0;
  line-height: 1;
  text-align: center;
  padding-top: 0.02in;
}
.rp-maturity-label {
  font-family: var(--rp-display, 'Oswald', sans-serif);
  font-size: 11pt;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #0A1A2E;
  margin-bottom: 0.04in;
}
.rp-maturity-desc {
  font-size: 9pt;
  color: #3A4A60;
  line-height: 1.4;
  margin: 0;
}
.rp-maturity-note {
  margin-top: 0.22in;
  padding: 0.14in 0.18in;
  background: rgba(244, 196, 48, 0.08);
  border-left: 3px solid #F4C430;
  border-radius: 0 4px 4px 0;
  font-size: 9.5pt;
  color: #3A4A60;
  line-height: 1.55;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.rp-maturity-note strong {
  color: #0A1A2E;
  font-weight: 600;
}

/* ============================================================
   JETSTREAM LOGO IMAGES
   The wordmark + arrow icon. Two PNGs (white-on-transparent for
   dark surfaces, black-on-transparent for the printed white pages
   of the branded report). Sized in CSS so we never serve more
   pixels than needed, and so users see crisp logos on retina.
   ============================================================ */

/* App topbar — contains a 384×52 white-on-transparent PNG at 26px
   tall (≈192×26 effective). Uses object-fit so the proportional
   crop stays clean if a future revision changes the bitmap. */
.brand-logo {
  height: 26px;
  width: auto;
  display: block;
  object-fit: contain;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* App footer — slightly smaller than the topbar to defer to nav. */
.footer-logo {
  height: 20px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* Branded report — the white-on-navy cover */
.rp-cover .rp-brand-logo {
  height: 0.36in;
  width: auto;
  display: block;
}

/* Branded report — the black-on-white footer (every interior page) */
.rp-footer-logo {
  height: 0.20in;
  width: auto;
  display: block;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ============================================================
   STRIP LEGACY TEXT-WORDMARK CHROME
   The .brand-mark, .brand-dot, .footer-brand text shells from the
   pre-logo era are no longer rendered, but we keep the .brand /
   .footer-brand wrapper rules above and just zero out the dot/mark
   styles so they don't reserve space if someone re-uses the markup.
   ============================================================ */
.brand-mark { display: none; }
.brand-dot { display: none; }
.footer-dot { display: none; }

/* Cover tagline — italic slogan styling, distinct from body subtitle. */
.rp-cover .rp-cover-sub-2 {
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 13pt !important;
  letter-spacing: 0.01em !important;
  opacity: 0.92 !important;
}

/* ============================================================
   INLINE MATURITY REFERENCE PANEL
   Collapsible reference card on the assessment page so people
   can consult the 0–5 scoring rubric without leaving their work.
   Default-collapsed; expands on click.
   ============================================================ */

.maturity-reference {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  margin: 0 0 24px;
  overflow: hidden;
}

.maturity-reference-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background .15s;
}
.maturity-reference-summary::-webkit-details-marker { display: none; }
.maturity-reference-summary:hover { background: var(--bg-surface); }

.mr-icon { font-size: 1.05rem; flex: 0 0 auto; }
.mr-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  color: var(--text);
  text-transform: uppercase;
}
.mr-hint {
  flex: 1;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-left: 6px;
}
.mr-chevron {
  font-size: 0.9rem;
  color: var(--accent);
  transition: transform .2s;
}
.maturity-reference[open] .mr-chevron { transform: rotate(180deg); }
.maturity-reference[open] .mr-hint { opacity: 0; }

.maturity-reference-grid {
  border-top: 1px solid var(--border);
  padding: 18px 20px 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}
@media (max-width: 800px) {
  .maturity-reference-grid { grid-template-columns: 1fr; }
}

.mr-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.mr-row:nth-last-child(-n+2) { border-bottom: none; }
@media (max-width: 800px) {
  .mr-row:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
  .mr-row:last-child { border-bottom: none; }
}

.mr-num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  line-height: 1;
  padding-top: 2px;
}
.mr-row-0 .mr-num, .mr-row-1 .mr-num { color: var(--band-grounded); }
.mr-row-2 .mr-num { color: var(--band-taxiing); }
.mr-row-3 .mr-num { color: var(--band-climbing); }
.mr-row-4 .mr-num { color: var(--band-cruising); }
.mr-row-5 .mr-num { color: var(--band-stratosphere); }

.mr-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
.mr-headline {
  font-size: 0.83rem;
  color: var(--text-2);
  font-weight: 500;
  margin-top: 1px;
  margin-bottom: 4px;
}
.mr-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.maturity-reference-footer {
  padding: 14px 20px;
  background: rgba(244, 196, 48, 0.06);
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text-2);
  line-height: 1.5;
}
.maturity-reference-footer strong { color: var(--text); }

/* ============================================================
   HOME LANDING — hero banner over space background + value cards
   ============================================================ */

.home-hero {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 8px;
}
.home-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("/static/img/altitude-bg.jpg") center / cover no-repeat;
}
.home-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg,
    rgba(10, 15, 31, 0.94) 0%,
    rgba(10, 15, 31, 0.80) 42%,
    rgba(19, 28, 48, 0.55) 100%);
}
.home-hero-inner {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: center;
  padding: 68px 52px;
}
.home-hero .hero-title { font-size: 3.2rem; margin-bottom: 20px; }
.home-hero .hero-sub { color: var(--text); max-width: 640px; }
.home-hero .hero-cta { margin-top: 32px; }
.home-hero .hero-altitude svg { max-width: 300px; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.45)); }

.btn-lg { padding: 14px 26px; font-size: 1rem; }

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 24px;
}
.value-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  transition: border-color .2s, transform .2s;
}
.value-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.value-card-accent { border-color: var(--border-glow); }
.value-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft-2);
  color: var(--accent);
  border: 1px solid var(--border-glow);
  font-size: 1.25rem;
  margin-bottom: 16px;
}
.value-card h3 {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.value-card p { color: var(--text-2); font-size: 0.92rem; margin-bottom: 12px; }
.value-list { list-style: none; padding: 0; margin: 0; }
.value-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 10px;
  color: var(--text-2);
  font-size: 0.9rem;
  line-height: 1.45;
}
.value-list li:last-child { margin-bottom: 0; }
.value-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.value-list strong { color: var(--text); font-weight: 600; }

@media (max-width: 900px) {
  .home-hero-inner { grid-template-columns: 1fr; padding: 44px 28px; gap: 28px; }
  .home-hero .hero-title { font-size: 2.3rem; }
  .value-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PRINT REPORT — MULTI-PAGE FLOW, MARGIN & FOOTER FIX
   ============================================================
   Fixes three long-standing PDF bugs:

   1. Truncation. Every .rp section had `overflow: hidden` (base
      rule) + fixed `height: 11in` (print rule) + `page-break-
      after: always`. Variable-length sections (Detailed
      Responses across ~48 question rows, Priority Recommendations,
      Maturity Scale Reference) were silently clipped once content
      passed one letter page.

   2. Margin overrun. `@page { margin: 0 }` combined with an
      internal `.rp-page-pad` 0.95in padding meant the visual
      margin only existed on the first physical page of a section.
      Any content that spilled to a second physical page ran flush
      to the paper edge.

   3. Missing footer on middle pages. The .rp-footer is a DOM
      element at the end of each section's flex column, so on
      multi-page sections it only rendered on the section's
      final physical page — pages 2..N-1 had no branding or
      page number.

   Fix: CSS named pages. Cover keeps its full-bleed @page. Content
   and closing sections use rpContentPage with a proper margin box
   and @bottom-{left,center,right} margin content — these are
   natively painted by Chrome/Safari on every physical page a
   named-@page element occupies, so the footer band repeats
   automatically. The in-flow DOM footer is hidden in print for
   content sections; it is kept visible on screen so the on-page
   preview still shows the branded footer.

   Trade-off: CSS @page margin-box content is limited to text +
   counters — no logo image, no yellow-blue accent line. Page
   numbers now come from `counter(page)` instead of the hardcoded
   Go-template values, which is strictly more accurate (the
   hardcoded numbers were already wrong: two sections were both
   labeled "Page 4" and two more "Page 5").
   ============================================================ */

/* On-screen preview: let content/closing sections grow with their
   content instead of being clipped to a fixed 11in "page" frame.
   The base .rp rule sets `height: 11in; overflow: hidden` for the
   letter-size preview metaphor, but that clipped the tail of
   variable-length sections in the preview just like it did in
   the PDF. The cover keeps its fixed frame — it's exactly one
   page by design. */
.rp.rp-content,
.rp.rp-closing {
  height: auto;
  min-height: 11in;
  overflow: visible;
}
.rp.rp-content .rp-page-pad,
.rp.rp-closing .rp-page-pad {
  overflow: visible;
}

@page rpCoverPage {
  size: letter;
  margin: 0;
}

@page rpContentPage {
  size: letter;
  margin: 0.6in 0.85in 0.9in;

  @bottom-left {
    content: "JETSTREAM  \00B7  AI ALTITUDE ASSESSMENT";
    font-family: 'Oswald', system-ui, sans-serif;
    font-size: 8pt;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: #1A1A1A;
    padding-left: 0.15in;
    padding-bottom: 0.35in;
    vertical-align: bottom;
  }
  @bottom-center {
    content: "\00A9  2026 JetStream Security, Inc. All rights reserved";
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 8pt;
    color: #777;
    padding-bottom: 0.35in;
    vertical-align: bottom;
  }
  @bottom-right {
    content: counter(page, decimal-leading-zero);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9pt;
    font-weight: 600;
    color: #1A1A1A;
    padding-right: 0.15in;
    padding-bottom: 0.35in;
    vertical-align: bottom;
  }
}

@media print {
  .rp-cover                { page: rpCoverPage; }
  .rp-content, .rp-closing { page: rpContentPage; }

  .rp-content,
  .rp-closing {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .rp-content .rp-page-pad,
  .rp-closing .rp-page-pad {
    overflow: visible !important;
    padding: 0 !important;
  }

  /* Hide the in-flow footer on content pages — the repeating
     @page margin-box footer above replaces it on every physical
     page. Kept visible on screen so the preview still shows the
     branded footer band. */
  .rp-content > .rp-footer,
  .rp-closing > .rp-footer {
    display: none !important;
  }

  .rp-domain-block,
  .rp-rec-card,
  .rp-maturity-card {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}