/* =====================================================================
   CONNECTed Academia Inc. — Public Landing Page
   Visual style: workspace-like, white, thin-bordered, product-led.
   No frameworks. No external dependencies.
   ===================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html,
body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--internal-scrollbar-thumb) transparent;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: var(--internal-scrollbar-size);
  height: var(--internal-scrollbar-size);
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: transparent;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  min-height: 24px;
  background: var(--internal-scrollbar-thumb);
  border: 0;
  border-radius: var(--r-pill);
}
html::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:active {
  background: var(--internal-scrollbar-thumb-hover);
}
html::-webkit-scrollbar-button,
body::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner {
  background: transparent;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
body, h1, h2, h3, h4, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

@font-face {
  font-family: "OpenDyslexic";
  src: url("assets/fonts/opendyslexic/OpenDyslexic-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "OpenDyslexic";
  src: url("assets/fonts/opendyslexic/OpenDyslexic-Bold.otf") format("opentype");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "OpenDyslexic";
  src: url("assets/fonts/opendyslexic/OpenDyslexic-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "OpenDyslexic";
  src: url("assets/fonts/opendyslexic/OpenDyslexic-Bold-Italic.otf") format("opentype");
  font-weight: 600 700;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Surfaces */
  --page-bg: #FAFAF8;
  --page-bg-alt: #F4F2EE;
  --surface: #FFFFFF;
  --surface-2: #F4F4F2;
  --surface-3: #EFEEEA;
  --rail-bg: #FAFAF8;

  /* Lines */
  --border: #E6E4DF;
  --border-strong: #D8D6CF;
  --border-dim: #ECEAE5;

  /* Text */
  --ink: #1F2328;
  --ink-soft: #343A40;
  --text-2: #60666C;
  --text-3: #767676;

  /* Brand / accent palette (small doses, like the dashboard) */
  --black: #111111;
  --blue: #5A9FDB;
  --green: #36A56F;
  --orange: #F28C38;
  --purple: #5C4071;
  --teal: #4BB9B1;
  --red: #EA5A4F;
  --teal: #2DB0AC;

  /* Degree-map category accents, derived from the site palette. */
  --cat-core: #5b9fdb;
  --cat-foundation: color-mix(in srgb, var(--cat-core) 58%, var(--ink) 42%);
  --cat-crim-options: #f28c38;
  --cat-theory: #36a56f;
  --cat-advanced-options: #b85fa8;
  --cat-upper: #ea5b4f;
  --cat-breadth-arts: #5c4071;
  --cat-breadth-sci: #2cafab;
  --cat-nonsocial: #7fbf3f;
  --cat-skills: #5b9fdb;
  --cat-als: color-mix(in srgb, var(--purple) 68%, var(--blue) 32%);
  --cat-nonsociology: color-mix(in srgb, var(--red) 82%, var(--ink) 18%);

  /* Chip backgrounds */
  --chip-blue-bg: #DCEBFF;
  --chip-blue-fg: #1B5A99;
  --chip-green-bg: #DDF5E8;
  --chip-green-fg: #1F7349;
  --chip-purple-bg: #EEE6FF;
  --chip-purple-fg: #5B3FB0;
  --chip-orange-bg: #FFE6CC;
  --chip-orange-fg: #A04F00;
  --chip-red-bg: #FFE1DF;
  --chip-red-fg: #99332A;
  --chip-yellow-bg: #FBE9B6;
  --chip-yellow-fg: #8A6300;
  --chip-gold-bg: #EEF2F7;
  --chip-gold-fg: #4F5A6A;
  --chip-teal-bg: #D2EEED;
  --chip-teal-fg: #1B6B66;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(0,0,0,.04);
  --shadow-2: 0 8px 24px rgba(0,0,0,.06);
  --shadow-3: 0 1px 0 rgba(0,0,0,.02), 0 8px 24px rgba(0,0,0,.05);

  /* Appearance controls */
  --ui-scale: 1;
  --ui-scale-inverse: 1;
  --ui-scale-width: 100vw;
  --ui-scale-height: 100vh;
  --topbar-bg: rgba(255,255,255,.86);
  --sidebar-bg: #FFFFFF;
  --sidebar-line: #ECECEC;
  --sidebar-icon: #3D3D3D;
  --sidebar-hover: #F3F3F3;
  --sidebar-active: #F1F1F1;
  --sidebar-hairline: rgba(0,0,0,0.05);
  --appearance-overlay-bg: rgba(255,255,255,0.01);
  --appearance-panel-bg: #F7F7F6;
  --appearance-option-hover: rgba(0,0,0,0.04);
  --appearance-option-active: rgba(0,0,0,0.06);
  --primary-button-bg: #111111;
  --primary-button-fg: #FFFFFF;
  --primary-button-hover: #000000;
  --brand-filter: none;
  --internal-scrollbar-size: 3px;
  --internal-scrollbar-thumb: var(--border-strong);
  --internal-scrollbar-thumb-hover: var(--text-3);

  /* Layout */
  --rail-w: 52px;
  --topbar-h: 60px;
  --content-max: 1280px;
  --gutter: 28px;

  /* Type */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Hoefler Text", Georgia, "Times New Roman", serif;
}

:root[data-theme="paper"] {
  --page-bg: #F4ECD8;
  --page-bg-alt: #EDE4CB;
  --surface: #FBF4E0;
  --surface-2: #EEE2C2;
  --surface-3: #EDE4CB;
  --rail-bg: #F4ECD8;
  --border: #DCCFA8;
  --border-strong: #CBB886;
  --border-dim: #E8DAB7;
  --ink: #2A2520;
  --ink-soft: #514A40;
  --text-2: #6B6760;
  --text-3: #797466;
  --chip-blue-bg: #DFEAF6;
  --chip-blue-fg: #174F8B;
  --chip-green-bg: #DCEFD9;
  --chip-green-fg: #27683A;
  --chip-purple-bg: #ECE3F3;
  --chip-purple-fg: #55399C;
  --chip-orange-bg: #F6DEC3;
  --chip-orange-fg: #A04F00;
  --chip-red-bg: #F4D5CF;
  --chip-red-fg: #8D2E26;
  --chip-yellow-bg: #F1DE9F;
  --chip-yellow-fg: #72510A;
  --chip-gold-bg: #E8E5DA;
  --chip-gold-fg: #4F5A6A;
  --teal: #2DB0AC;
  --chip-teal-bg: #D5E7E5;
  --chip-teal-fg: #1F5F5C;
  /* Paper theme — header reads properly cream/paper instead of the
     near-white tint it had before. The other two surfaces that use
     this token in paper view (.policy-page .scrollspy-fixedbar and
     .scrollspy-dropdown) inherit the same paper tone for free. */
  --topbar-bg: rgba(244, 236, 216, 0.92);
  --sidebar-bg: #F7EFDB;
  --sidebar-line: #DCCFA8;
  --sidebar-icon: #4D463E;
  --sidebar-hover: #EEE2C2;
  --sidebar-active: #EDE4CB;
  --sidebar-hairline: rgba(36,33,29,0.08);
  --appearance-overlay-bg: rgba(247,242,234,0.04);
  --appearance-panel-bg: #F7EFDB;
}

:root[data-theme="night"] {
  --page-bg: #1F1E1C;
  --page-bg-alt: #26241F;
  --surface: #2B2925;
  --surface-2: #343029;
  --surface-3: #3C372F;
  --rail-bg: #1F1E1C;
  --border: #454038;
  --border-strong: #5A5248;
  --border-dim: #332F29;
  --ink: #E8E6E0;
  --ink-soft: #D0CCC2;
  --text-2: #A8A59C;
  --text-3: #8A8780;
  --blue: #84B3DD;
  --green: #94D49F;
  --orange: #E0A674;
  --purple: #B1A0D8;
  --teal: #6CC1BD;
  --red: #E09083;
  --chip-blue-bg: #364257;
  --chip-blue-fg: #99C4EE;
  --chip-green-bg: #36493D;
  --chip-green-fg: #94D49F;
  --chip-purple-bg: #443A52;
  --chip-purple-fg: #C5ACEC;
  --chip-orange-bg: #50432F;
  --chip-orange-fg: #F2B783;
  --chip-red-bg: #503A3A;
  --chip-red-fg: #F0A0A0;
  --chip-yellow-bg: #50432F;
  --chip-yellow-fg: #E3B97F;
  --chip-gold-bg: #3F4956;
  --chip-gold-fg: #B3C4DC;
  --chip-teal-bg: #2A3F3D;
  --chip-teal-fg: #9ED9D5;
  --shadow-1: 0 1px 2px rgba(0,0,0,.28);
  --shadow-2: 0 12px 28px rgba(0,0,0,.32);
  --shadow-3: 0 1px 0 rgba(255,255,255,.03), 0 12px 28px rgba(0,0,0,.32);
  --topbar-bg: rgba(31,30,28,.88);
  --sidebar-bg: #26241F;
  --sidebar-line: #454038;
  --sidebar-icon: #D8D6D0;
  --sidebar-hover: #343029;
  --sidebar-active: #3C372F;
  --sidebar-hairline: rgba(255,255,255,0.07);
  --appearance-overlay-bg: rgba(17,19,21,0.04);
  --appearance-panel-bg: #1A1D20;
  --appearance-option-hover: rgba(255,255,255,0.06);
  --appearance-option-active: rgba(255,255,255,0.10);
  --primary-button-bg: #F1F0EC;
  --primary-button-fg: #111315;
  --primary-button-hover: #FFFFFF;
  --brand-filter: brightness(0) invert(1) opacity(.92);
}

:root[data-theme="night-classic"] {
  --page-bg: #111315;
  --page-bg-alt: #171A1D;
  --surface: #1A1D20;
  --surface-2: #22262A;
  --surface-3: #2A2F34;
  --rail-bg: #111315;
  --border: #30343A;
  --border-strong: #424850;
  --border-dim: #262A2F;
  --ink: #F1F0EC;
  --ink-soft: #D5D2CA;
  --text-2: #ABA79F;
  --text-3: #777C83;
  --blue: #5A9FDB;
  --green: #36A56F;
  --orange: #F28C38;
  --purple: #8E6BE8;
  --teal: #4BB9B1;
  --red: #EA5A4F;
  --chip-blue-bg: #1A334F;
  --chip-blue-fg: #B9D8FF;
  --chip-green-bg: #173827;
  --chip-green-fg: #A7E5C2;
  --chip-purple-bg: #30244B;
  --chip-purple-fg: #D4C5FF;
  --chip-orange-bg: #442A15;
  --chip-orange-fg: #FFD3A6;
  --chip-red-bg: #46201D;
  --chip-red-fg: #FFC0BA;
  --chip-yellow-bg: #3D3212;
  --chip-yellow-fg: #F5DE8D;
  --chip-gold-bg: #352E1A;
  --chip-gold-fg: #E4CE88;
  --chip-teal-bg: #122E2C;
  --chip-teal-fg: #B0E5E0;
  --shadow-1: 0 1px 2px rgba(0,0,0,.28);
  --shadow-2: 0 12px 28px rgba(0,0,0,.32);
  --shadow-3: 0 1px 0 rgba(255,255,255,.03), 0 12px 28px rgba(0,0,0,.32);
  --topbar-bg: rgba(17,19,21,.88);
  --sidebar-bg: #151719;
  --sidebar-line: #2A2D31;
  --sidebar-icon: #D8D6D0;
  --sidebar-hover: #202327;
  --sidebar-active: #272B30;
  --sidebar-hairline: rgba(255,255,255,0.07);
  --appearance-overlay-bg: rgba(17,19,21,0.04);
  --appearance-panel-bg: #1A1D20;
  --appearance-option-hover: rgba(255,255,255,0.06);
  --appearance-option-active: rgba(255,255,255,0.10);
  --primary-button-bg: #F1F0EC;
  --primary-button-fg: #111315;
  --primary-button-hover: #FFFFFF;
  --brand-filter: brightness(0) invert(1) opacity(.92);
}

:root[data-font="system"] {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

:root[data-font="opendyslexic"] {
  --font: "OpenDyslexic", "Inter", ui-sans-serif, system-ui, sans-serif;
  --serif: "OpenDyslexic", Georgia, serif;
}

/* ---------- Base ---------- */
html, body { background: var(--page-bg); color: var(--ink); }
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

::selection { background: #DCEBFF; color: var(--ink); }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  background: var(--black);
  color: #fff;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  text-decoration: none;
  z-index: 1000;
  font-size: 13px;
}
.skip-link:focus { top: 8px; }

/* ---------- App shell ---------- */
.app-shell {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  width: var(--ui-scale-width);
  min-height: var(--ui-scale-height);
  background: var(--page-bg);
  transform: scale(var(--ui-scale));
  transform-origin: 0 0;
}

/* ---------- Collapsed sidebar menu, adapted from the transfer board ---------- */
.sidebar {
  background: var(--sidebar-bg);
  border-radius: 0;
  border: 1px solid var(--sidebar-line);
  border-top: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
  flex-shrink: 0;
}

.sidebar svg { display: block; }
.sidebar .ic {
  width: 18px;
  height: 18px;
  stroke: var(--sidebar-icon);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.font-toggle-mark {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: currentColor;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.stat-rail-mark {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: currentColor;
  font-family: var(--font);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.sidebar.collapsed {
  position: sticky;
  top: 0;
  width: var(--rail-w);
  height: 100vh;
  padding: 10px 0;
  align-items: center;
  justify-content: space-between;
  z-index: 5;
}

.sidebar.collapsed .rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
.sidebar.collapsed .rail::-webkit-scrollbar { display: none; }

.sidebar.collapsed .collapsed-logo {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--sidebar-bg);
  box-shadow: inset 0 0 0 0.5px var(--sidebar-hairline);
  box-sizing: border-box;
  padding: 5px;
  flex-shrink: 0;
  text-decoration: none;
}
.sidebar.collapsed .collapsed-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.sidebar.collapsed .icon-btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  cursor: pointer;
  color: var(--sidebar-icon);
  flex-shrink: 0;
  text-decoration: none;
  box-sizing: border-box;
}
.sidebar.collapsed .icon-btn:hover {
  background: var(--sidebar-hover);
}
.sidebar.collapsed .icon-btn.active {
  background: var(--sidebar-active);
}
.sidebar.collapsed .icon-btn:focus-visible,
.sidebar.collapsed .collapsed-logo:focus-visible {
  outline: 1px solid var(--border-strong);
  outline-offset: 2px;
}

.sidebar.collapsed .divider {
  width: 100%;
  height: 1px;
  background: var(--sidebar-line);
  margin: 8px 0;
  flex-shrink: 0;
}

.sidebar.collapsed .bottom-divider {
  width: 100%;
  height: 1px;
  background: var(--sidebar-line);
  flex-shrink: 0;
  margin-bottom: 6px;
}

.sidebar.collapsed .bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-bottom: 4px;
  flex-shrink: 0;
}

/* ---------- Appearance switcher, adapted from the transfer board ---------- */
.appearance-overlay {
  position: fixed;
  inset: 0;
  z-index: 2100;
  opacity: 0;
  pointer-events: none;
  background: var(--appearance-overlay-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transition: opacity 240ms ease;
}
.appearance-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.appearance-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 248px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.appearance-content {
  position: absolute;
  left: 8px;
  right: 8px;
  top: calc(50% - 32px);
  max-height: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 22px;
  transform: translateY(-50%);
  transition: opacity 240ms ease;
}
.appearance-overlay.is-open .appearance-content {
  transform: translateY(-50%);
}
.ap-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 240ms ease 200ms, transform 320ms cubic-bezier(0.4, 0, 0.2, 1) 200ms;
}
.ap-section[hidden] { display: none; }
.appearance-overlay.is-open .ap-section {
  opacity: 1;
  transform: translateY(0);
}
.ap-label {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.ap-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ap-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: -0.005em;
  text-align: left;
}
.ap-option .ic {
  width: 17px;
  height: 17px;
  stroke: var(--sidebar-icon);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.ap-option:hover { background: var(--appearance-option-hover); }
.ap-option.active { background: var(--appearance-option-active); }
.ap-option:focus-visible {
  outline: 1px solid var(--border-strong);
  outline-offset: 1px;
}
.ap-option .font-mark {
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--sidebar-icon);
  line-height: 1;
  flex-shrink: 0;
}
.ap-option .font-mark.connect {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}
.ap-option .font-mark.system {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.ap-option .font-mark.opendyslexic {
  font-family: "OpenDyslexic", "Inter", sans-serif;
  font-size: 12px;
  letter-spacing: -0.14em;
  transform: translateX(0.35px);
}

/* Scale dial, ported from the nested board appearance controls. */
.ap-scale-section {
  gap: 2px;
  margin-top: 20px;
}
.scale-control {
  height: 96px;
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 6px 8px 8px;
  border-radius: 6px;
  user-select: none;
  transition: background 0.12s;
}
.scale-control:hover,
.scale-control.is-static,
.scale-control.is-dragging {
  background: var(--appearance-option-hover);
}
.scale-readout {
  width: 54px;
  display: flex;
  align-items: center;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.scale-readout input {
  min-width: 2ch;
  max-width: 3ch;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}
.scale-readout input::-webkit-outer-spin-button,
.scale-readout input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}
.scale-readout small {
  margin-left: 1px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  line-height: 1;
}
.scale-dial {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border-radius: 5px;
  cursor: ns-resize;
  touch-action: none;
  outline: none;
}
.scale-dial:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
}
.scale-dial::before,
.scale-dial::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 24px;
  z-index: 3;
  pointer-events: none;
}
.scale-dial::before {
  top: 0;
  background: linear-gradient(to bottom, var(--appearance-panel-bg) 0%, color-mix(in srgb, var(--appearance-panel-bg) 0%, transparent) 100%);
}
.scale-dial::after {
  bottom: 0;
  background: linear-gradient(to top, var(--appearance-panel-bg) 0%, color-mix(in srgb, var(--appearance-panel-bg) 0%, transparent) 100%);
}
.scale-track {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: calc(50% - 4px);
  width: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 82%, var(--ink) 18%);
  pointer-events: none;
}
.scale-ruler {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 0;
  transform: translateY(var(--scale-offset));
  transition: transform 0.12s ease;
  z-index: 1;
  pointer-events: none;
}
.scale-control.is-dragging .scale-ruler {
  transition: none;
}
.scale-tick {
  position: relative;
  display: block;
  height: var(--scale-tick-gap);
  pointer-events: none;
}
.scale-tick-mark {
  position: absolute;
  top: 0;
  left: calc(50% - 4px);
  width: 14px;
  height: 1px;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--border) 74%, var(--ink) 26%);
}
.scale-tick.is-five .scale-tick-mark {
  width: 24px;
  background: color-mix(in srgb, var(--border) 58%, var(--ink) 42%);
}
.scale-tick.is-decade .scale-tick-mark {
  width: 38px;
  height: 1.5px;
  background: color-mix(in srgb, var(--text-3) 65%, var(--ink) 35%);
}
.scale-tick-number {
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  transform: translateY(-50%);
  color: var(--text-3);
  font-size: 8.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-align: right;
  white-space: nowrap;
}
.scale-current-line {
  position: absolute;
  top: 50%;
  left: 35px;
  right: 21px;
  height: 1.5px;
  transform: translateY(-50%);
  background: var(--ink);
  pointer-events: none;
  z-index: 2;
}
.scale-current-value {
  position: absolute;
  top: 50%;
  right: 0;
  min-width: 40px;
  height: 24px;
  padding: 0 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  transform: translateY(-50%);
  border-radius: 8px;
  background: var(--ink);
  color: var(--surface);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  z-index: 4;
  transition: box-shadow 0.12s ease;
}
.scale-control.is-dragging .scale-current-value {
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.22);
}
.scale-current-number,
.scale-current-percent {
  display: block;
  line-height: 1;
}

:root[data-theme="night"] .avatar {
  border-color: var(--surface);
}
:root[data-theme="night"] .atlas-user,
:root[data-theme="night"] .sec-toggle span {
  background: var(--surface);
}

/* Legacy form-page rail support. Scoped to direct app-shell children so it
   does not touch the transfer-board-style landing sidebar above. */
.app-shell > .rail {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--rail-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0;
  gap: 8px;
  z-index: 5;
}
.app-shell > .rail .rail-logo {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-1);
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.app-shell > .rail .rail-logo:hover { border-color: var(--border-strong); }
.app-shell > .rail .rail-icons {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  flex: 1 1 auto;
  align-items: center;
  width: 100%;
  padding: 0 8px;
}
.app-shell > .rail .rail-icon {
  position: relative;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--text-2);
  transition: background .15s ease, color .15s ease, border-color .15s;
  text-decoration: none;
  border: 1px solid transparent;
}
.app-shell > .rail .rail-icon:hover {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border);
}
.app-shell > .rail .rail-icon.active,
.app-shell > .rail .rail-icon[aria-current="true"] {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-1);
}
.app-shell > .rail .rail-divider {
  width: 24px;
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}

/* ---------- Main area ---------- */
.main-area {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ---------- Top bar ---------- */
.topbar {
  height: var(--topbar-h);
  position: sticky;
  top: 0;
  margin-top: 0;
  z-index: 8;
  background: var(--topbar-bg);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0 24px;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  border-radius: var(--r-sm);
}
.brand:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}
.brand-img {
  height: 32px;
  width: auto;
  display: block;
  max-width: 220px;
  object-fit: contain;
  filter: var(--brand-filter);
}

.primary-nav {
  display: flex;
  gap: 4px;
  justify-self: center;
  align-items: center;
}
.primary-nav a {
  text-decoration: none;
  color: var(--text-2);
  font-size: 13.5px;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  transition: background .15s, color .15s;
}
.primary-nav a:hover { background: var(--surface-2); color: var(--ink); }
.primary-nav a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar-appearance {
  display: none;
  align-items: center;
  gap: 4px;
}
.topbar-icon-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  flex-shrink: 0;
}
.topbar-icon-btn:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.topbar-icon-btn .ic {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.topbar-icon-btn .font-toggle-mark {
  width: 17px;
  height: 17px;
}

@media (min-width: 901px) {
  .landing-sidebar .rail {
    padding-top: calc(var(--topbar-h) + 6px);
  }

  .topbar {
    margin-left: calc(-1 * var(--rail-w));
    padding-left: 12px;
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .12s ease, background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--primary-button-bg);
  color: var(--primary-button-fg);
  border-color: var(--primary-button-bg);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 1px 1px rgba(0,0,0,.05);
}
.btn-primary:hover { background: var(--primary-button-hover); }
.btn-ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn-lg { padding: 11px 18px; font-size: 14px; line-height: 21px; min-height: 45px; box-sizing: border-box; border-radius: var(--r-md); }
.hero-ctas .btn-lg { min-height: 45px; }
.btn-block { width: 100%; }

/* mobile nav toggle (hidden on desktop) */
.nav-toggle {
  display: none;
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.nav-toggle span { display: block; width: 16px; height: 1.5px; background: var(--ink); border-radius: 2px; }

/* ---------- Thinking flower (assistant motif) ----------
   The six-petal flower from the brand kit. Spins continuously to evoke
   the in-product "thinking" indicator used by guided assistant states. */
.thinking-flower {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  line-height: 0;
}
.thinking-flower img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transform-origin: center center;
  animation: tf-spin 4.5s linear infinite;
}
:root[data-theme="night"] .thinking-flower img,
:root[data-theme="night-classic"] .thinking-flower img {
  filter: brightness(0) invert(1);
  opacity: 1;
}
:root[data-theme="night"] .aside-flower,
:root[data-theme="night-classic"] .aside-flower,
:root[data-theme="night"] .page-flower,
:root[data-theme="night-classic"] .page-flower {
  filter: brightness(0) invert(1) drop-shadow(0 6px 14px rgba(0,0,0,0.35));
}
@keyframes tf-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .thinking-flower img { animation: none; }
}

/* ---------- Dots & chips ---------- */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-blue   { background: var(--blue); }
.dot-orange { background: var(--orange); }
.dot-purple { background: var(--purple); }
.dot-green  { background: var(--green); }
.dot-red    { background: var(--red); }
.dot-teal   { background: var(--teal); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-xs);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.6;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--ink-soft);
  border: 1px solid var(--border);
}
.chip-blue   { background: var(--chip-blue-bg);   color: var(--chip-blue-fg);   border-color: transparent; }
.chip-green  { background: var(--chip-green-bg);  color: var(--chip-green-fg);  border-color: transparent; }
.chip-purple { background: var(--chip-purple-bg); color: var(--chip-purple-fg); border-color: transparent; }
.chip-orange { background: var(--chip-orange-bg); color: var(--chip-orange-fg); border-color: transparent; }
.chip-red    { background: var(--chip-red-bg);    color: var(--chip-red-fg);    border-color: transparent; }
.chip-yellow { background: var(--chip-yellow-bg); color: var(--chip-yellow-fg); border-color: transparent; }
.chip-gold   { background: var(--chip-gold-bg);   color: var(--chip-gold-fg);   border-color: transparent; }
.chip-teal   { background: var(--chip-teal-bg);   color: var(--chip-teal-fg);   border-color: transparent; }
/* Extended chip tones for the six unique degree-map colours that don't
   have legacy --chip-*-bg variables. Computed live with color-mix so
   the background tints the current theme's --surface (light pastel in
   the light themes, dim/muted in the night themes) and the foreground
   tints the current theme's --ink (dark text in light, light text in
   night) — keeping every chip's appearance consistent per theme. */
.chip-cyan    { background: color-mix(in srgb, var(--cat-breadth-sci)     18%, var(--surface)); color: color-mix(in srgb, var(--cat-breadth-sci)     65%, var(--ink)); border-color: transparent; }
.chip-magenta { background: color-mix(in srgb, var(--cat-advanced-options) 18%, var(--surface)); color: color-mix(in srgb, var(--cat-advanced-options) 65%, var(--ink)); border-color: transparent; }
.chip-indigo  { background: color-mix(in srgb, var(--cat-als)              18%, var(--surface)); color: color-mix(in srgb, var(--cat-als)              65%, var(--ink)); border-color: transparent; }
.chip-lime    { background: color-mix(in srgb, var(--cat-nonsocial)        18%, var(--surface)); color: color-mix(in srgb, var(--cat-nonsocial)        65%, var(--ink)); border-color: transparent; }
.chip-crimson { background: color-mix(in srgb, var(--cat-nonsociology)     18%, var(--surface)); color: color-mix(in srgb, var(--cat-nonsociology)     65%, var(--ink)); border-color: transparent; }
.chip-navy    { background: color-mix(in srgb, var(--cat-foundation)       18%, var(--surface)); color: color-mix(in srgb, var(--cat-foundation)       65%, var(--ink)); border-color: transparent; }

/* ---------- Section base ---------- */
main {
  display: flex;
  flex-direction: column;
}
.section {
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
  padding: 64px var(--gutter) 24px;
}
.section-head {
  max-width: 920px;
  margin: 0 auto 28px;
  text-align: center;
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: 14px;
  box-shadow: none;
}
.kicker::before {
  content: "";
  width: 34px;
  height: 1px;
  flex: 0 0 34px;
  background: var(--border-strong);
}
.kicker::after {
  content: "";
  width: 34px;
  height: 1px;
  flex: 0 0 34px;
  background: var(--border-strong);
}
.kicker-inline {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 0 4px;
}
.kicker-inline::before,
.kicker-inline::after {
  display: none;
}
.kicker-sm { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.section h1,
.section h2 {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}
/* The "Before you apply…" headline runs long because of the added
   "students and"; widen this section-head specifically so the line does
   not strand a single word like "guessing." on its own line. The lede
   underneath stays at the standard reading width. */
#why {
  padding-top: 112px;
}
#why .section-head { max-width: 980px; }
#why .section-head .lede { max-width: 920px; margin-left: auto; margin-right: auto; }
.serif-accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
}
.lede {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 14px;
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.55;
}
.muted { color: var(--text-3); }
.micro { font-size: 12px; color: var(--text-3); margin-top: 8px; }
.opt { color: var(--text-3); font-weight: 400; font-size: 11px; margin-left: 4px; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
  padding: 28px var(--gutter) 12px;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.4fr);
  gap: 36px;
  align-items: stretch;
}
.hero-copy {
  box-sizing: border-box;
  min-height: 0;
  height: 100%;
  padding: clamp(24px, 2.7vw, 39px) 0 clamp(18px, 1.55vw, 22px);
  display: grid;
  grid-template-rows: auto auto auto auto auto auto minmax(28px, 1fr) auto;
  transform: none;
}
.eyebrow {
  display: inline-flex;
  align-self: flex-start;
  justify-self: start;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 5px 11px;
  box-shadow: var(--shadow-1);
  transform: translateY(5px);
}
.hero-headline {
  margin-top: 18px;
  font-size: clamp(34px, 4.5vw, 56px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.027em;
  color: var(--ink);
}
.hero-line { display: block; }
.hero-line + .hero-line { margin-top: 4px; }
.hero-sub {
  margin-top: calc(24px * 1.02);
  color: var(--text-2);
  font-size: 17px;
  line-height: 1.55;
  max-width: 520px;
}
.hero-founder-line {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 600;
  max-width: 520px;
}
/* Click-through to the founder letter. Subtle underline-on-hover —
   the tagline itself stays unstyled so the visual remains light;
   only the cursor + hover transition signal that it's a link. */
.hero-founder-link {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  padding-bottom: 1px;
  transition: background-size .25s ease, color .15s ease;
}
.hero-founder-link:hover,
.hero-founder-link:focus-visible {
  color: var(--ink);
  background-size: 100% 1px;
}
.hero-founder-link:focus-visible {
  outline: 2px solid var(--cat-core);
  outline-offset: 3px;
  border-radius: 2px;
}
.hero-ctas {
  margin-top: calc(34px * 1.02);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.hero-note {
  margin-top: 10px;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.45;
  max-width: 520px;
}
.hero-meta {
  grid-row: 8;
  margin-top: 0;
  display: flex;
  gap: 28px;
  border-top: 1px solid var(--border);
  padding-top: 20.1px;
  flex-wrap: wrap;
}
.hero-meta li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  transform: scale(1.145);
  transform-origin: top left;
}
.meta-num { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.meta-label { font-size: 11.5px; color: var(--text-3); }

@media (min-width: 1101px) {
  .hero {
    max-width: none;
    margin: 0;
    padding-right: 0;
    padding-left: min(64px, max(var(--gutter), calc((100vw - var(--rail-w) - var(--content-max)) / 2 + var(--gutter))));
  }

  .hero-grid {
    grid-template-columns: minmax(390px, clamp(420px, 38vw, 680px)) minmax(0, 1fr);
    gap: clamp(30px, 2.1vw, 44px);
  }

  .hero-headline {
    font-size: clamp(56px, 3.45vw, 68px);
  }

  .hero-sub,
  .hero-founder-line,
  .hero-note {
    max-width: clamp(520px, 33vw, 640px);
  }

  .hero .composition-window {
    min-height: clamp(590px, 47vw, 760px);
    max-height: clamp(590px, 47vw, 760px);
  }

  .hero .mock.window {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
  }
}

/* ============================================================
   PRODUCT WINDOW (used in hero + preview)
   ============================================================ */
.window, .preview-window {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  position: relative;
}
.window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  gap: 16px;
}
.window-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.window-icon {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--ink-soft);
}
.window-title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.window-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.avatar-stack {
  display: flex;
  align-items: center;
}
.avatar {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  margin-left: -6px;
  box-shadow: var(--shadow-1);
}
.avatar:first-child { margin-left: 0; }
.window-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-3);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 5px 12px 5px 10px;
  background: var(--surface);
}
.window-add {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--primary-button-fg);
  background: var(--primary-button-bg);
  padding: 5px 12px;
  border-radius: var(--r-sm);
  letter-spacing: -0.005em;
}

/* ---------- View tabs ---------- */
.view-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.view-tabs::-webkit-scrollbar { display: none; }
.view-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  border: 0;
  background: transparent;
  border-bottom: 2px solid transparent;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.view-tab:hover { color: var(--ink); }
.view-tab.active,
.view-tab[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.view-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 4px; }

.view-counts {
  margin-left: auto;
  display: flex;
  gap: 6px;
  padding: 8px 0;
}
.cc {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  letter-spacing: -0.005em;
}
.cc-blue   { background: var(--chip-blue-bg);   color: var(--chip-blue-fg); }
.cc-orange { background: var(--chip-orange-bg); color: var(--chip-orange-fg); }
.cc-purple { background: var(--chip-purple-bg); color: var(--chip-purple-fg); }
.cc-green  { background: var(--chip-green-bg);  color: var(--chip-green-fg); }
.cc-red    { background: var(--chip-red-bg);    color: var(--chip-red-fg); }
.cc-multi {
  background: linear-gradient(90deg, var(--blue), var(--orange) 30%, var(--purple) 55%, var(--green) 78%, var(--red));
  color: #fff;
  padding: 2px 10px;
}

/* ---------- Hero composition preview ----------
   Window keeps its original 590–670px clamped height so full-screen looks
   unchanged. The fluid type/padding on the inner panel content (below)
   keeps the Overview tab fitting inside that window at narrower viewports
   so no inner scrollbar appears. */
.composition-window {
  display: flex;
  flex-direction: column;
  min-height: clamp(590px, 47vw, 670px);
  max-height: clamp(590px, 47vw, 670px);
  overflow: hidden;
}
.composition-window .window-title { white-space: nowrap; }
.composition-window .window-right { flex-wrap: wrap; justify-content: flex-end; }
.composition-window .chip { white-space: nowrap; }
.composition-tabs .view-tab { font-size: 12px; }
.tab-mini-count {
  min-width: 20px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}
.view-tab.active .tab-mini-count,
.view-tab[aria-selected="true"] .tab-mini-count {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}
.composition-body {
  flex: 1;
  min-height: 0;
  padding: 16px;
  background: var(--page-bg);
}
.composition-panel {
  height: 100%;
  min-height: 456px;
  overflow: hidden;
}
.composition-panel[hidden] { display: none; }
.composition-panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  padding: 13px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}
.composition-panel-head strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
}
.composition-panel-head span {
  color: var(--text-3);
  font-size: 11.5px;
  text-align: right;
  line-height: 1.35;
}
.composition-topline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  font-size: 12px;
  color: var(--text-2);
}
.composition-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composition-breadcrumb .cat-box {
  flex: 0 0 9px;
}
.composition-breadcrumb span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.composition-breadcrumb.strong {
  color: var(--ink);
  font-weight: 600;
}
.composition-arrow {
  display: none;
}
.composition-chev {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--text-3);
  flex-shrink: 0;
}

/* Rounded box (small square) — used for category indicators, source legends, etc. */
.cat-box {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2.5px;
  flex-shrink: 0;
  vertical-align: middle;
}
.composition-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.composition-stats.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.composition-stats div {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 11px 12px;
  box-shadow: var(--shadow-1);
}
.composition-stats strong {
  display: block;
  font-size: 23px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.composition-stats span {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--text-3);
}
.composition-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, .33fr);
  gap: 12px;
  margin-top: 12px;
  align-items: stretch;
}
.composition-split.detailed {
  grid-template-columns: minmax(0, 1fr) minmax(178px, .29fr);
}
.composition-table,
.composition-side-card,
.composition-condition,
.composition-note,
.composition-progress-hero,
.composition-bars {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}
.composition-table { overflow: hidden; }
.composition-table-head,
.composition-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr) auto;
  gap: 10px;
  align-items: center;
}
.composition-table-head {
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.composition-group + .composition-group { border-top: 1px solid var(--border-dim); }
.composition-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
}
.composition-group-head > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.composition-group-head > span:last-child:not(:first-child) {
  color: var(--text-3);
  font-size: 11px;
  flex-shrink: 0;
}
.composition-row {
  padding: 8.5px 12px;
  border-top: 1px solid var(--border-dim);
  font-size: 12px;
  color: var(--ink);
}
.composition-row > span {
  min-width: 0;
}
.composition-row strong,
.composition-row em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composition-row strong { font-weight: 600; }
.composition-row em {
  margin-top: 2px;
  font-size: 10.5px;
  font-style: normal;
  color: var(--text-3);
}
.composition-group.compact .composition-group-head {
  padding-top: 12px;
  padding-bottom: 12px;
}
.composition-side {
  min-width: 0;
}
.composition-side-card {
  height: 100%;
  padding: 14px;
}
.side-card-title {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
}
.composition-ring {
  width: 76px;
  height: 76px;
  position: relative;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
}
.composition-ring svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}
.composition-ring circle {
  fill: none;
  stroke: var(--border);
  stroke-width: 7;
}
.composition-ring circle:nth-child(2) {
  stroke: var(--green);
  stroke-linecap: round;
}
.composition-ring strong {
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.composition-side-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--border-dim);
  font-size: 11.5px;
  color: var(--text-2);
}
.composition-side-row strong {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}
.composition-side-note {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-dim);
  color: var(--text-2);
  font-size: 11.2px;
  line-height: 1.45;
}
.composition-detail-grid,
.composition-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  height: calc(100% - 62px);
}
.composition-condition,
.composition-note {
  padding: 14px;
}
.composition-condition {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 12px;
  align-items: start;
}
.condition-marker {
  width: 8px;
  height: 100%;
  min-height: 66px;
  border-radius: var(--r-pill);
  background: var(--green);
}
.composition-condition.warn .condition-marker { background: var(--orange); }
.composition-condition.unmet .condition-marker { background: var(--red); }
.composition-condition.wide { grid-column: 1 / -1; }
.composition-condition strong,
.composition-note strong {
  display: block;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.25;
}
.composition-condition p,
.composition-note p,
.composition-progress-hero p {
  margin-top: 7px;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.45;
}
.composition-condition .chip { margin-top: 10px; }
.composition-progress-layout {
  display: grid;
  grid-template-columns: minmax(190px, .42fr) minmax(0, 1fr);
  gap: 12px;
  height: calc(100% - 62px);
}
.composition-progress-hero {
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 18px;
  text-align: center;
}
.composition-ring.large {
  width: 104px;
  height: 104px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.composition-ring.large circle {
  stroke-width: 9;
}
.composition-ring.large strong {
  font-size: 23px;
  line-height: 0.95;
}
.composition-ring.large span {
  position: static;
  color: var(--text-3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}
.composition-bars {
  padding: 16px;
  display: grid;
  align-content: center;
  gap: 12px;
}
.composition-bar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--ink);
}
.composition-bar-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composition-bar-row b {
  color: var(--text-3);
  font-size: 11px;
  text-align: right;
}
.composition-bar-row i {
  grid-column: 1 / -1;
  display: block;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--border);
  overflow: hidden;
}
.composition-bar-row em {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.composition-next-steps {
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--border-dim);
  display: grid;
  gap: 6px;
}
.composition-next-steps strong {
  color: var(--ink);
  font-size: 12px;
}
.composition-next-steps span {
  color: var(--text-2);
  font-size: 11.5px;
  line-height: 1.25;
  display: flex;
  gap: 7px;
}
.composition-next-steps span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  margin-top: 5px;
  flex-shrink: 0;
}
.composition-note {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.composition-note .note-tag { margin-bottom: 10px; }

/* ---------- Hero composition v2 — Degree Map workspace ---------- */

/* Active avatar shows initials */
.composition-window .avatar {
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  display: grid;
  place-items: center;
  border: 2px solid var(--surface);
}

/* Topline strip with breadcrumb — single line, breadcrumb truncates first */
.composition-topline {
  flex-wrap: nowrap;
  margin: 10px 16px 0;
  min-width: 0;
}
.composition-topline > .composition-breadcrumb:first-child {
  flex-shrink: 1;
  min-width: 0;
}
.composition-topline > .composition-breadcrumb.strong {
  flex: 1 1 auto;
  min-width: 0;
}
.composition-bc-spacer { display: none; }
.composition-bc-meta {
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 12px;
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Tabs row */
.composition-window .composition-tabs {
  margin-top: 10px;
  border-top: 1px solid var(--border-dim);
  border-bottom: 1px solid var(--border);
  padding: 0 12px;
  gap: 0;
}
.composition-window .view-tab {
  height: 44px;
  min-height: 44px;
  padding: 0 12px;
  font-size: 12.5px;
  line-height: 1.15;
}
.comp-pipeline {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 0;
  flex-shrink: 0;
}
.pipe-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.pipe-pill:hover { border-color: var(--border-strong); background: var(--surface); }
.pipe-pill .pp-dot {
  width: 8px; height: 8px;
  border-radius: 2.5px;
  display: inline-block;
}

/* Body padding adjustments */
.composition-body {
  padding: 14px 16px 16px;
}

/* Stat cards in overview */
.composition-stats {
  margin-top: 0;
  gap: clamp(5px, 0.6vw, 8px);
}
.comp-stat {
  position: relative;
  cursor: default;
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Fluid padding: keeps original 10/14 at wide viewports, compresses on
     narrower ones so the four cards keep their visual identity but free up
     the few px the inner panel needs to avoid a scrollbar. */
  padding: clamp(7px, 0.7vw, 10px) clamp(10px, 1vw, 14px);
}
.comp-stat-highlight {
  border-left: 3px solid var(--cat-core);
}
.comp-stat em {
  font-style: normal;
  font-size: clamp(9px, 0.75vw, 10.5px);
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: clamp(2px, 0.3vw, 4px);
}
.comp-stat strong {
  font-size: clamp(19px, 1.7vw, 24px);
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--ink);
}
.comp-stat strong i {
  font-style: normal;
  font-size: clamp(11px, 0.9vw, 13px);
  color: var(--text-3);
  font-weight: 500;
  margin-left: 4px;
}
.comp-stat span {
  margin-top: 3px;
  font-size: clamp(9px, 0.75vw, 10.5px);
  line-height: 1.25;
  color: var(--text-2);
}
.comp-stat:focus-visible {
  outline: 1px solid var(--border-strong);
  outline-offset: -2px;
}
.comp-stat-bar {
  display: block;
  height: clamp(3px, 0.35vw, 4px);
  background: var(--border-dim);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-top: clamp(3px, 0.5vw, 6px);
}
.comp-stat-bar b { display: block; height: 100%; border-radius: inherit; }

/* Overview split: category list (left) + ring card (right) */
.comp-overview-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .54fr);
  gap: 8px;
  margin-top: clamp(4px, 0.6vw, 8px);
}
.comp-ring-card,
.comp-progress-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  padding: clamp(7px, 0.8vw, 10px) clamp(9px, 0.9vw, 12px);
}
.comp-card-title {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.comp-card-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.comp-card-row .comp-card-title { margin-bottom: 0; }
.comp-card-meta {
  font-size: 11px;
  color: var(--text-3);
}
.comp-progress-card .comp-card-title { margin-bottom: 0; }
.comp-ring-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.comp-ring-card .comp-card-title {
  text-align: center;
  margin-bottom: clamp(4px, 0.7vw, 10px);
}
.comp-ring-card .composition-ring.large {
  width: clamp(96px, 8.4vw, 126px);
  height: clamp(96px, 8.4vw, 126px);
  margin: clamp(4px, 0.55vw, 8px) auto clamp(8px, 1.1vw, 16px);
}
.comp-ring-card .composition-ring.large strong {
  font-size: clamp(22px, 1.95vw, 28px);
}
.comp-ring-meta {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  border-top: 1px solid var(--border-dim);
  padding-top: 7px;
  margin: 0;
}
.rm-row {
  display: grid;
  grid-template-columns: minmax(96px, 1fr) minmax(0, auto);
  align-items: center;
  gap: 10px;
  flex: 1 1 0;
  padding: clamp(4px, 0.5vw, 7px) 0;
  font-size: clamp(10px, 0.9vw, 11.5px);
  border-bottom: 1px solid var(--border-dim);
}
.rm-row:last-child { border-bottom: 0; }
.rm-label {
  color: var(--text-2);
  min-width: 0;
}
.rm-val {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
  line-height: 1.3;
  min-width: 0;
}
.rm-val strong {
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
}
.rm-val-inline {
  display: block;
  width: 100%;
  white-space: nowrap;
}
.rm-val-inline strong {
  margin-right: 4px;
}
.rm-val-inline span {
  color: var(--text-3);
  font-size: 10.5px;
}
.comp-status-summary {
  width: 100%;
  padding-top: 10px;
  border-top: 1px solid var(--border-dim);
  margin-top: auto;
}
.comp-status-title {
  display: block;
  margin-bottom: 7px;
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.comp-status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.comp-status-item {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 10.5px;
  line-height: 1;
  transition: border-color .12s, background .12s;
}
.comp-status-item:hover {
  background: var(--surface);
  border-color: var(--border-strong);
}
.comp-status-item b {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.comp-status-item span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comp-progress-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin-top: 2px;
}
.comp-progress-list li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) 64px 34px;
  gap: 7px;
  align-items: center;
  /* Slightly tighter row padding at narrower viewports so the 12-row list
     fits inside the (unchanged) window height. */
  padding: clamp(1px, 0.18vw, 2px) 4px;
  font-size: clamp(10px, 0.85vw, 11.3px);
  color: var(--ink);
  border-bottom: 1px solid var(--border-dim);
  cursor: pointer;
  border-radius: 4px;
  transition: background .12s;
}
.comp-progress-list li:last-child { border-bottom: 0; }
.comp-progress-list li:hover { background: var(--surface-2); }
.cp-dot { width: 9px; height: 9px; border-radius: 2.5px; flex-shrink: 0; }
.cp-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cp-bar {
  display: block;
  height: 5px;
  background: var(--border-dim);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.cp-bar.mini { width: 50px; }
.cp-bar b {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.cp-frac {
  font-size: 10.5px;
  color: var(--text-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cp-flag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--chip-orange-bg);
  color: var(--chip-orange-fg);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
}

.comp-overview-foot {
  margin-top: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.comp-overview-foot .hr-pill {
  font-size: 11px;
}

/* Degree map: filter chips + table */
.comp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding: 0 2px;
}
.comp-filters {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}
.comp-fchip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.comp-fchip:hover { border-color: var(--border-strong); }
.comp-fchip.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.comp-fchip i {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  background: rgba(0,0,0,.06);
  padding: 1px 5px;
  border-radius: var(--r-pill);
  font-weight: 600;
}
.comp-fchip.active i { background: rgba(255,255,255,.15); color: #fff; }
.comp-fchip .hr-dot { width: 6px; height: 6px; }
.comp-tool-meta {
  font-size: 10.5px;
  color: var(--text-3);
}

.comp-table-scroll {
  max-height: 360px;
  overflow-y: auto;
}
.composition-window .composition-row {
  cursor: pointer;
  transition: background .1s;
}
.composition-window .composition-row:hover { background: var(--surface-2); }
.composition-row[data-status="completed"] strong { color: var(--ink); }
.composition-row.expanded { background: var(--surface-2); }

.composition-row .comp-status { display: flex; align-items: center; }
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* ============================================================
   FOUNDER LETTER — chapter timeline (left) + letter card (right).
   The card is flush with the right edge of the page (mirroring the
   Atlas demo's flush-left layout). Chapters 01-02 are visible; an
   expand button reveals the rest. Chrome matches the modules grid
   and Atlas messages — white surface, thin border, soft shadow,
   ink-coloured prose, no avatars or coloured dots.
   ============================================================ */
.founder-section {
  /* Match the Atlas section pattern but mirrored: span full width,
     keep the standard left gutter, drop the right gutter so the
     letter card can sit flush with the page edge.
     padding-top bumped from the inherited 64px so the visual gap
     between the Principles section above and the founder letter
     reads consistently with the rest of the site's section rhythm. */
  max-width: none;
  padding-top: 112px;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}
.founder-section .section-head { display: none; }
.founder-layout {
  display: grid;
  /* Left column narrowed so the heading / lede / timeline read as
     a tighter, more balanced rail against the wide letter card on
     the right. */
  grid-template-columns: minmax(260px, .32fr) minmax(0, 1fr);
  gap: 36px;
  align-items: start;
  /* On wide viewports, push the layout's left edge inward so the
     founder-aside lines up with the standard section's content-max
     left edge (mirrors the technique used on the hero). On narrow
     viewports it collapses back to the standard --gutter. */
  padding-left: max(var(--gutter), calc((100vw - var(--rail-w) - var(--content-max)) / 2 + var(--gutter)));
}
.founder-aside {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-self: start;
  padding-top: 8px;
  position: sticky;
  top: calc(var(--topbar-h) + 24px);
  min-width: 0;
}
.founder-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  text-align: left;
  max-width: none;
}
.founder-header .kicker { margin-bottom: 12px; }
.founder-header h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-weight: 600;
  /* Override the global .section h2 auto margins so "Why CONNECT
     exists." flushes left under the "From the founder" kicker
     instead of centering within the column. */
  margin-left: 0;
  margin-right: 0;
}
.founder-header .lede {
  margin-top: 12px;
  font-size: 14.5px;
}

/* ----- Chapter timeline ----- */
.founder-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
.founder-timeline::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 17px;
  bottom: 17px;
  width: 1px;
  background: var(--border);
  pointer-events: none;
}
.founder-tl-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  position: relative;
  transition: opacity .2s ease;
}
.founder-tl-marker {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  position: relative;
  z-index: 1;
  transition: background .15s, border-color .15s;
}
.founder-tl-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 15.6px;
  line-height: 1;
  color: var(--ink);
}
.founder-tl-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.3;
}
.founder-tl-item.is-extra { opacity: 0.55; }
.founder-tl-item.is-extra .founder-tl-marker {
  background: var(--surface-2);
  border-color: var(--border);
  border-style: dashed;
}
.founder-tl-item.is-extra .founder-tl-num { color: var(--ink-soft); }
.founder-tl-item.is-revealed.is-extra { opacity: 1; }
.founder-tl-item.is-revealed.is-extra .founder-tl-marker {
  background: var(--surface);
  border-color: var(--border-strong);
  border-style: solid;
}
.founder-tl-item.is-revealed.is-extra .founder-tl-num { color: var(--ink); }

/* ----- Letter card (flush right) ----- */
.founder-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  /* Connect with the right edge of the page (mirror of atlas-demo-card) */
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  overflow: hidden;
  min-width: 0;
}
.founder-letter {
  /* Right padding bumped 15% wider so the prose has more breathing
     room on the right edge — keeps lines from running too long and
     makes the letter easier to read. Top, bottom, and left padding
     unchanged. */
  padding: 36px clamp(32.2px, 4.6vw, 55.2px) 16px clamp(28px, 4vw, 48px);
  max-width: 920px;
}
.founder-letter p {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.founder-letter p em {
  font-style: italic;
  color: var(--ink);
}
.founder-lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px !important;
  color: var(--ink) !important;
  font-weight: 500;
  letter-spacing: -0.012em !important;
  line-height: 1.5 !important;
  margin: 0 0 24px !important;
}

.founder-chapter {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border-dim);
}
.founder-chapter-label {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.founder-chapter-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0;
  color: var(--ink);
  text-transform: none;
  line-height: 1;
}
.founder-chapter p:first-of-type {
  margin-top: 0;
}

.founder-quote {
  margin: 28px 0;
  padding: 18px 22px 18px 24px;
  background: var(--surface-2);
  border-left: 3px solid var(--ink);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  font-style: italic;
}
.founder-quote .serif-accent { font-style: italic; }

/* ----- Expand button ----- */
.founder-expand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  margin: 22px 0 12px;
  transition: background .15s, border-color .15s, box-shadow .15s;
  box-shadow: var(--shadow-1);
}
.founder-expand:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2);
}
.founder-expand:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.founder-expand-meta {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  padding-left: 8px;
  border-left: 1px solid var(--border);
  margin-left: -2px;
}
.founder-expand-icon {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--ink-soft);
  transition: transform .25s ease;
}
.founder-expand[aria-expanded="true"] .founder-expand-icon {
  transform: rotate(180deg);
}

.founder-extra { display: block; }
.founder-extra[hidden] { display: none; }
.founder-extra.is-revealing {
  animation: founderReveal .35s ease both;
}
@keyframes founderReveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.founder-sign {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 22px 0 8px;
  margin-top: 28px;
  border-top: 1px solid var(--border-dim);
}
.founder-sign-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.1;
}
.founder-sign-role {
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.005em;
}

/* Tablet: stack the layout, drop the flush-right corners back to
   normal so the card fits comfortably on a single column. */
@media (max-width: 1100px) {
  .founder-layout {
    grid-template-columns: 1fr;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    gap: 24px;
  }
  .founder-aside {
    position: static;
    padding-top: 0;
    gap: 20px;
  }
  .founder-card {
    border-right: 1px solid var(--border);
    border-top-right-radius: var(--r-lg);
    border-bottom-right-radius: var(--r-lg);
  }
  .founder-timeline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 8px;
  }
  .founder-timeline::before { display: none; }
  .founder-tl-item {
    grid-template-columns: 22px auto;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
  }
  .founder-tl-marker { width: 22px; height: 22px; }
  .founder-tl-num { font-size: 11px; }
  .founder-tl-title { font-size: 11.5px; }
}

@media (max-width: 880px) {
  .founder-letter { padding: 28px 22px 8px; }
  .founder-letter p { font-size: 14px; line-height: 1.65; }
  .founder-lead { font-size: 17px !important; line-height: 1.45 !important; }
  .founder-chapter { margin-top: 22px; padding-top: 20px; }
  .founder-chapter-label { font-size: 10.5px; }
  .founder-chapter-num { font-size: 16px; }
  .founder-quote { font-size: 15.5px; padding: 16px 18px; margin: 22px 0; }
  .founder-sign-name { font-size: 20px; }
  .founder-expand { width: 100%; justify-content: center; }
}

/* Connection_17 status palette — completed (green), required (orange),
   partial (yellow), residency (teal — repurposed from prerequisite). */
.st-completed { background: #d4edda; color: #155724; }
.st-required  { background: #f9cb9c; color: #d84315; }
.st-partial   { background: #fff3cd; color: #856404; }
.st-residency { background: #e0f2f1; color: #00695c; }

/* Singular badge — used for required courses that are a specific named
   course (not a pool / cluster choice). Indigo from Connection_17. */
.singular-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: #e8eaf6;
  color: #5c6bc0;
}

.composition-window .composition-group-head {
  width: 100%;
  text-align: left;
  background: #fafaf9;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  padding: 10px 14px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: background .12s;
}
.composition-window .composition-group-head:hover { background: #f3f3f0; }
.cat-chev {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  color: var(--text-3);
  transition: transform .2s;
  flex-shrink: 0;
}
.composition-group-head[aria-expanded="false"] .cat-chev {
  transform: rotate(-90deg);
}
.cgh-l {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.cgh-r {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.cgh-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.cgh-l .cat-box { width: 10px; height: 10px; border-radius: 3px; }
.gh-selection {
  font-size: 10.5px;
  color: var(--ink);
  background: var(--surface-2);
  border-radius: 4px;
  padding: 2px 7px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 2px;
  text-shadow: none;
}
/* Connection_17 selection-type colours on group headers — text uses the
   chip's accent colour, never grey, so the chip always reads as a label. */
.gh-selection.gh-sel-fixed   { background: #e1f5fe; color: #0277bd; }
.gh-selection.gh-sel-cluster { background: #ede9fe; color: #5b21b6; }
.gh-selection.gh-sel-open    { background: #f3e5f5; color: #5F4478; }
.gh-residency {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #00695c;
  background: #e0f2f1;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 2px;
}

/* Degree map table v3 — Connection_10 5-column layout */
.composition-window .composition-table-head,
.composition-window .composition-row {
  grid-template-columns: minmax(0, 1.35fr) 26px minmax(0, 1.05fr) 44px auto;
  gap: 10px;
}
.composition-window .composition-table-head .dm-th-cr,
.composition-window .composition-table-head .dm-th-grade {
  text-align: center;
}
.composition-window .composition-row {
  padding: 10px 14px;
  font-size: 13px;
}
.composition-window .composition-row:hover { background: #fafaf8; }
.composition-window .composition-row.expanded { background: #f6f6f3; }
.dm-req {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dm-req .course-code {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.dm-req .course-meta {
  font-size: 11.5px;
  color: var(--text-2);
  font-weight: 500;
}
.dm-cr {
  font-size: 12px;
  color: var(--text-2);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.dm-transfer {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dm-transfer .t-from {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.dm-transfer .t-from .course-code {
  font-size: 12.5px;
  font-weight: 600;
  color: #1e5aad;
}
.dm-transfer .t-from .course-meta {
  font-size: 11px;
  color: var(--text-3);
}
.dm-transfer .t-empty {
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
  line-height: 1.4;
}
.dm-grade {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.dm-grade-empty {
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.course-code {
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.course-meta {
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.grade-badge {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
/* Connection_10 grade colour scale */
.grade-badge.gr-a { background: #d1fae5; color: #065f46; }
.grade-badge.gr-b { background: #eef2f7; color: #1a1a1a; }
.grade-badge.gr-c { background: #fff3e0; color: #c2630a; }
.grade-badge.gr-d { background: #fde8e8; color: #991b1b; }

/* Status pill — Connection_10 status-tag style */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.status-pill svg { flex-shrink: 0; }
.composition-group[data-collapsed="true"] .composition-row {
  display: none;
}

/* Degree Map table — Connection_12 column model */
.degree-map-table {
  overflow: auto;
}
.composition-window .degree-map-table .composition-table-head,
.composition-window .degree-map-table .composition-row {
  grid-template-columns:
    minmax(132px, 1.45fr)
    28px
    58px
    16px
    minmax(122px, 1.25fr)
    28px
    38px
    68px;
  gap: 6px;
  min-width: 590px;
}
.composition-window .degree-map-table .composition-table-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 7px 9px;
  font-size: 9px;
  letter-spacing: 0.045em;
}
.composition-window .degree-map-table .composition-row {
  cursor: default;
  padding: 7px 9px;
  font-size: 11px;
  align-items: start;
}
.composition-window .degree-map-table .composition-row:hover {
  background: var(--surface-2);
}
.degree-map-table .composition-group-head {
  background: var(--surface);
  color: var(--ink);
  border-top-color: var(--border);
  border-bottom-color: var(--border-dim);
  padding: 8px 10px;
}
.degree-map-table .composition-group-head:hover {
  background: var(--surface-2);
}
.degree-map-table .cgh-l {
  flex-wrap: wrap;
  row-gap: 4px;
}
.degree-map-table .cgh-r {
  gap: 7px;
}
.degree-map-table .cgh-name {
  font-size: 12.5px;
}
.degree-map-table .gh-selection,
.degree-map-table .gh-residency {
  padding: 2px 7px;
  font-size: 9px;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
}
.req-cat-count {
  font-size: 10px;
  color: var(--text-3);
  background: var(--surface-2);
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
}
.degree-map-table .course-cell {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 2px;
  min-width: 0;
  line-height: 1.16;
}
.degree-map-table .course-code {
  display: block;
  font-size: 10.8px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.degree-map-table .course-title {
  display: block;
  font-size: 9.5px;
  color: var(--text-2);
  line-height: 1.2;
  white-space: normal;
  overflow: hidden;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
.degree-map-table .cw {
  align-self: center;
  justify-self: center;
  font-size: 10px;
  color: var(--text-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.degree-map-table .match-arrow {
  align-self: center;
  justify-content: center;
  color: var(--text-3);
  font-size: 13px;
}
.degree-map-table .empty-transfer {
  align-self: center;
  min-width: 0;
  color: var(--text-3);
  font-size: 9.5px;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 8.6px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.degree-map-table .st-required {
  background: #f9cb9c;
  color: #d84315;
}
.sel-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}
/* Connection_17 selection-type colours used in rows */
.sel-fixed {
  background: #e1f5fe;
  color: #0277bd;
}
.sel-cluster {
  background: #ede9fe;
  color: #5b21b6;
}
.sel-open {
  background: #f3e5f5;
  color: #5F4478;
}
/* Legacy aliases kept for safety */
.sel-mandatory { background: #e1f5fe; color: #0277bd; }
.sel-pool      { background: #ede9fe; color: #5b21b6; }
.sel-elective  { background: #f3e5f5; color: #5F4478; }
.grade {
  align-self: center;
  justify-self: center;
  font-size: 10.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.grade-good {
  color: #065f46;
}
.grade-ok {
  color: #92600a;
}
.grade-low {
  color: #991b1b;
}
.cat-frac {
  font-style: normal;
  font-size: 10.5px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  margin-left: 6px;
}
.cat-flag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--chip-orange-bg);
  color: var(--chip-orange-fg);
  margin-left: 6px;
}

.comp-table-foot {
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-dim);
  border-radius: var(--r-sm);
  font-size: 11px;
  color: var(--text-2);
}
.comp-table-foot .hr-dot { display: inline-block; margin-right: 4px; }

/* Conditions & Notes summary header */
.comp-cond-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  flex-wrap: wrap;
}
.cs-block {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.cs-num {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
}
.cs-label {
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}
.cs-meta {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-3);
}
.comp-note-summary { gap: 8px; flex-wrap: wrap; padding: 8px 12px; }
.comp-note-summary .hr-pill { font-size: 10.5px; padding: 2px 8px; }
.comp-note-summary .cs-num { font-size: 16px; }
.comp-note-summary .cs-label { font-size: 10px; }
.comp-notes-list { gap: 6px; }

#comp-conditions,
#comp-degreemap,
#comp-notes {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#comp-overview {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding-right: 2px;
}
#comp-conditions[hidden],
#comp-degreemap[hidden],
#comp-notes[hidden] {
  display: none;
}

#comp-degreemap .comp-toolbar {
  flex: 0 0 auto;
}

#comp-degreemap .comp-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

#comp-overview .composition-stats {
  flex: 0 0 auto;
}

#comp-overview .comp-overview-split {
  flex: 1 0 auto;
  min-height: min-content;
  align-items: stretch;
}

#comp-overview .comp-progress-card,
#comp-overview .comp-ring-card {
  min-height: 0;
  height: 100%;
}

#comp-overview .comp-progress-card {
  display: flex;
  flex-direction: column;
}

#comp-overview .comp-progress-list {
  flex: 1 1 auto;
  min-height: 0;
  justify-content: space-between;
}

@media (min-width: 1500px) {
  #comp-overview .comp-ring-card {
    justify-content: center;
  }

  #comp-overview .comp-ring-meta {
    flex: 0 0 auto;
  }

  #comp-overview .rm-row {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 6px 0;
  }
}

/* Conditions v4 — landing-page card style with grouped section bars */
.comp-cond-grouped {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 12px;
  max-height: none;
  overflow-y: auto;
  padding-right: 2px;
}
.comp-cond-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cond-group-bar {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 2px 2px;
}
.cond-group-name {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-2);
}
.cond-group-count {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-3);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}
.comp-cond-group .comp-cond-grid {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

/* legacy hide */
.comp-cond-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 2px;
}
.cond-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.cond-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: #fafaf9;
  border-bottom: 1px solid var(--border);
}
.cond-section-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.cond-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  flex: 1 1 auto;
  letter-spacing: -0.005em;
}
.cond-section-count {
  font-size: 11px;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cond-section-body {
  display: flex;
  flex-direction: column;
}
.cond-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-dim);
  cursor: pointer;
  transition: background .12s;
}
.cond-item:last-child { border-bottom: 0; }
.cond-item:hover { background: #fafaf9; }
.cond-item:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}
.cond-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.cond-item-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  flex: 1 1 auto;
  letter-spacing: -0.005em;
  line-height: 1.35;
}
.cond-item-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  white-space: nowrap;
}
.cond-satisfied { background: #d1fae5; color: #065f46; }
.cond-pending { background: #fff3e0; color: #c2630a; }
.cond-blocked { background: #fde8e8; color: #991b1b; }

.cond-item-detail {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
}
.cond-item-detail strong {
  color: var(--ink);
  font-weight: 600;
}
.cond-courses {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.cond-course-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cond-course-chip.satisfied {
  background: #d1fae5;
  border-color: #a7f3d0;
  color: #065f46;
}
.cond-course-chip.pending {
  background: #fff3e0;
  border-color: #fde0a0;
  color: #c2630a;
}
.cond-chain-arrow {
  display: inline-grid;
  place-items: center;
  color: var(--text-3);
  flex-shrink: 0;
}

/* ---- Connection_13 notes layout ---- */
.comp-notes-list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 8px;
  max-height: none;
  overflow-y: auto;
  padding-right: 2px;
}
/* Notes entries — sized to match the conditions / degree-map cards
   so the panel reads at a consistent visual weight. */
.note-entry {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  cursor: pointer;
  transition: box-shadow .15s, border-color .12s;
}
.note-entry:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border-color: var(--border-strong);
}
.note-entry:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.note-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.note-code {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.note-code-origin {
  background: var(--surface-2);
  color: var(--ink);
}
.note-arr {
  display: inline-grid;
  place-items: center;
  color: var(--text-3);
  flex-shrink: 0;
}
.note-nm {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  margin-left: 2px;
  letter-spacing: -0.005em;
}
.note-body {
  font-size: 11.5px;
  color: var(--text-2);
  line-height: 1.5;
}
.note-body p {
  margin: 0 0 3px;
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.note-body p:last-child { margin-bottom: 0; }
.note-body .nl {
  font-weight: 600;
  color: var(--ink);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  min-width: 64px;
  padding-top: 1px;
}

/* Legacy comp-cond-grid kept for backwards compatibility but unused */
.comp-cond-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: none;
  overflow-y: auto;
  padding-right: 2px;
}
.comp-cond-card {
  --cond-bg: var(--chip-green-bg);
  --cond-fg: var(--chip-green-fg);
  --cond-accent: var(--green);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  box-shadow: inset 3px 0 0 var(--cond-accent);
}
.comp-cond-card::before {
  display: none;
}
.comp-cond-card:hover {
  border-color: var(--border-strong);
  box-shadow: inset 3px 0 0 var(--cond-accent), 0 2px 8px rgba(0,0,0,0.06);
}
.comp-cond-card:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.comp-cond-card.cc-met {
  --cond-bg: var(--chip-green-bg);
  --cond-fg: var(--chip-green-fg);
  --cond-accent: var(--green);
}
.comp-cond-card.cc-warn {
  --cond-bg: var(--chip-orange-bg);
  --cond-fg: var(--chip-orange-fg);
  --cond-accent: var(--orange);
}
.comp-cond-card.cc-unmet {
  --cond-bg: var(--chip-red-bg);
  --cond-fg: var(--chip-red-fg);
  --cond-accent: var(--red);
}

.cc-head {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.cc-icon-sq {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--cond-bg);
  color: var(--cond-fg);
  border: 1px solid transparent;
}
.cc-icon-sq svg {
  display: block;
  width: 14px;
  height: 14px;
}
.cc-icon-sq::after {
  content: none;
}
.cc-label,
.cc-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: var(--cond-bg);
  color: var(--cond-fg);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cc-label {
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0;
}
.cc-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-status {
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.cc-body {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-2);
  line-height: 1.45;
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.cc-body span {
  flex-shrink: 0;
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.cc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.cc-tags {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  min-width: 0;
}
.cc-tag {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--ink);
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.comp-cond-card.cc-met .cc-tag {
  background: #dbe9f9;
  color: #1e5aad;
}
.comp-cond-card.cc-warn .cc-tag {
  background: #ede9fe;
  color: #5b21b6;
}
.comp-cond-card.cc-unmet .cc-tag {
  background: #eef2f7;
  color: #4f5a6a;
}
#comp-conditions .status-pill {
  letter-spacing: 0.025em;
}
#comp-conditions .st-completed {
  background: #dbe9f9;
  color: #1e5aad;
}
#comp-conditions .st-required {
  background: #ede9fe;
  color: #5b21b6;
}
#comp-conditions .st-residency {
  background: #eef2f7;
  color: #4f5a6a;
}
.cc-confidence {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 8px;
  border-top: 1px solid var(--border-dim);
  padding-top: 7px;
}
.cc-confidence span {
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.cc-confidence strong {
  color: var(--cond-fg);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.cc-confidence i {
  grid-column: 1 / -1;
  height: 5px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--surface-2);
}
.cc-confidence b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--cond-accent);
}

/* Notes cards — keep clickable behaviour */
.composition-window .composition-note {
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s, transform .12s;
  padding: 12px;
}
.composition-window .composition-note:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2);
}
.composition-window .composition-note:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.composition-window .composition-detail-grid {
  height: auto;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 2px;
}
.composition-window .composition-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 2px;
}
.comp-note-foot {
  margin-top: 8px;
  font-size: 10.5px;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-top: 8px;
  border-top: 1px solid var(--border-dim);
  width: 100%;
}

/* Popover (info panel that slides in from right) */
.comp-popover {
  position: absolute;
  inset: auto 12px 12px auto;
  width: 320px;
  max-width: calc(100% - 24px);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: 0 14px 40px rgba(0,0,0,0.12);
  padding: 14px;
  z-index: 30;
  font-size: 12.5px;
  color: var(--ink);
  animation: compPopFade .18s ease;
}
@keyframes compPopFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.comp-popover[hidden] { display: none; }
.comp-popover.comp-popover-sample {
  inset: 128px 12px auto auto;
}
@media (max-width: 700px) {
  .comp-popover.comp-popover-sample {
    inset: 128px auto auto 12px;
  }
}
.comp-pop-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-dim);
  margin-bottom: 8px;
}
.comp-pop-head strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.comp-pop-close {
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
}
.comp-pop-close:hover { background: var(--surface-2); color: var(--ink); }
.comp-pop-body {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
}
.comp-pop-body strong { color: var(--ink); font-weight: 600; }
.comp-pop-body .pop-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-dim);
  font-size: 11.5px;
}
.comp-pop-body .pop-row:last-child { border-bottom: 0; }
.comp-pop-body .pop-row span:first-child {
  color: var(--text-3);
  font-weight: 500;
}
.comp-pop-body .pop-explanation {
  margin-top: 8px;
  padding: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-dim);
  border-radius: var(--r-sm);
  color: var(--ink-soft);
  font-size: 11.5px;
}
.comp-pop-foot {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-dim);
  font-size: 10.5px;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ---------- Board view ---------- */
.board {
  display: grid;
  grid-template-columns: repeat(5, minmax(180px, 1fr));
  gap: 12px;
  padding: 16px;
  background: var(--page-bg);
  overflow-x: auto;
}
.board-compact { grid-template-columns: repeat(5, minmax(160px, 1fr)); }
.col { min-width: 0; }
.col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px 10px;
}
.col-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.col-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  background: var(--surface);
  padding: 1px 7px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px;
  margin-bottom: 8px;
  box-shadow: var(--shadow-1);
  transition: transform .15s ease, box-shadow .15s, border-color .15s;
  position: relative;
}
.card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-3);
}
.card-title {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.3;
}
.card-title svg { margin-top: 2px; flex-shrink: 0; color: var(--text-2); }
.card-chips {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.card-desc {
  font-size: 11.5px;
  color: var(--text-2);
  line-height: 1.45;
  margin-bottom: 8px;
}
.card-foot {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--text-3);
}
.card-due { color: var(--orange); font-weight: 500; }
.card-foot .card-due.card-due-blue   { color: var(--blue); }
.card-foot .card-due.card-due-orange { color: var(--orange); }
.card-foot .card-due.card-due-purple { color: var(--purple); }
.card-foot .card-due.card-due-green  { color: var(--green); }
.card-foot .card-due.card-due-red    { color: var(--red); }
.progress-dots {
  display: flex;
  gap: 3px;
  margin-top: 8px;
}
.pd {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--border);
}
.pd.green  { background: var(--green); }
.pd.blue   { background: var(--blue); }
.pd.orange { background: var(--orange); }
.pd.purple { background: var(--purple); }
.pd.red    { background: var(--red); }

/* ============================================================
   STRIP (capabilities)
   ============================================================ */
.strip {
  max-width: var(--content-max);
  width: 100%;
  margin: 8px auto 0;
  padding: 0 var(--gutter);
}
.strip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 22px;
  box-shadow: var(--shadow-1);
}
.strip-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
}
.strip-divide {
  width: 1px; height: 16px;
  background: var(--border);
  flex-shrink: 0;
}

@media (min-width: 1450px) {
  .strip {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: min(64px, max(var(--gutter), calc((100vw - var(--rail-w) - var(--content-max)) / 2 + var(--gutter))));
    padding-right: var(--gutter);
  }
}

/* ============================================================
   DUAL PANELS (problem, audience, assistant, forms)
   ============================================================ */
.dual-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.dual-panels-lg { gap: 24px; }
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.panel-head h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.panel-count {
  font-size: 11px;
  color: var(--text-3);
  background: var(--surface-2);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  font-weight: 600;
}
.panel-head-lg {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 14px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 18px;
  margin-bottom: 18px;
}
.panel-head-lg h3 {
  display: block;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin-top: 2px;
}
.panel-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 1px solid transparent;
}
.panel-icon-blue   { background: var(--chip-blue-bg);   color: var(--chip-blue-fg); }
.panel-icon-orange { background: var(--chip-orange-bg); color: var(--chip-orange-fg); }

/* ---------- Row list (problem panels) ---------- */
.rowlist { display: flex; flex-direction: column; }
.rowlist li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border-dim);
  font-size: 13.5px;
  color: var(--ink);
}
.rowlist li:last-child { border-bottom: 0; padding-bottom: 4px; }
.row-icon {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  display: grid;
  place-items: center;
}
.row-title { font-size: 13.5px; }

/* ---------- Checklist (audience panels) ---------- */
.checklist {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.checklist li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  font-size: 14px;
  color: var(--ink);
  border-bottom: 1px solid var(--border-dim);
}
.checklist li:last-child { border-bottom: 0; }
.check {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  flex-shrink: 0;
  position: relative;
  margin-top: 2px;
}
.check::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(45deg, transparent 38%, var(--green) 38%, var(--green) 50%, transparent 50%),
                    linear-gradient(135deg, transparent 50%, var(--green) 50%, var(--green) 62%, transparent 62%);
  background-size: 7px 7px, 9px 9px;
  background-repeat: no-repeat;
  background-position: 4px 8px, 7px 4px;
  opacity: .8;
}
.panel-cta {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.panel-cta .micro { margin-top: 0; }

/* ============================================================
   HOW IT WORKS — table card
   ============================================================ */
.table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.table-head {
  display: grid;
  grid-template-columns: 70px 2.4fr 1fr 1fr;
  gap: 16px;
  padding: 14px 22px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.table-body { display: flex; flex-direction: column; }
.table-body li {
  display: grid;
  grid-template-columns: 70px 2.4fr 1fr 1fr;
  gap: 16px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border-dim);
  align-items: center;
  font-size: 13.5px;
}
.table-body li:last-child { border-bottom: 0; }
.step-num {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--text-3);
  font-style: italic;
  font-weight: 500;
}
.step-action { display: flex; flex-direction: column; gap: 2px; }
.step-action strong { font-weight: 600; color: var(--ink); }
.step-action span { font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.hr-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  color: var(--ink-soft);
}
.hr-dot { width: 8px; height: 8px; border-radius: 50%; }
.hr-dot.green  { background: var(--green); }
.hr-dot.orange { background: var(--orange); }
.hr-dot.red    { background: var(--red); }
.table-foot {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 22px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-2);
}
.table-foot svg { color: var(--orange); margin-top: 2px; flex-shrink: 0; }

/* ============================================================
   PLATFORM MODULES grid
   ============================================================ */
.modules-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.module {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.module:hover { border-color: var(--border-strong); box-shadow: var(--shadow-3); }
.module-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.module-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.module-desc {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.5;
  flex: 1 1 auto;
}
.mini-ui {
  margin-top: 8px;
  padding: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  min-height: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mini-rows { gap: 6px; }
.mr {
  display: block;
  height: 6px;
  background: var(--border);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.mr-bar { display: block; height: 100%; background: var(--blue); border-radius: inherit; }

.mini-program {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
.mp-row { display: flex; gap: 4px; }
.mp-cell { flex: 1; height: 8px; background: var(--border); border-radius: 2px; }
.mp-cell.green { background: var(--green); }

.mini-track {
  display: flex;
  align-items: center;
  gap: 6px;
}
.track-step {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: var(--r-pill);
  position: relative;
}
.track-step.done { background: var(--green); }
.track-step.now {
  background: var(--orange);
  box-shadow: 0 0 0 3px rgba(242,140,56,.18);
}

.mini-chat { gap: 6px; }
.msg {
  display: block;
  height: 8px;
  width: 70%;
  border-radius: var(--r-pill);
  background: var(--border);
}
.msg.msg-r { margin-left: auto; background: var(--cat-theory); width: 50%; }
.msg.msg-l { background: var(--surface-3); border: 1px solid var(--border); }
.msg.short { width: 40%; }

.mini-chips {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
}

/* Atlas: a tiny chat conversation. Top row = user's typed message
   bubble (right-aligned, magenta). Bottom row = Atlas thinking — the
   spinning brand flower + three pulsing rounded-square dots. */
.mini-atlas {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 8px 10px;
  justify-content: center;
}
.mini-atlas .atlas-msg {
  align-self: flex-end;
  display: block;
  height: 8px;
  width: 58%;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: 1px solid var(--border);
}
.mini-atlas .atlas-thinking {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mini-atlas .atlas-thinking .thinking-flower {
  width: 13px;
  height: 13px;
}
.mini-atlas .atlas-dots {
  display: flex;
  gap: 3px;
}
.mini-atlas .atlas-dot {
  width: 4px;
  height: 4px;
  border-radius: 1px;
  animation: atlas-think-pulse 1.4s ease-in-out infinite;
}
/* Colours mirror the three petal hues in the brand flower */
.mini-atlas .atlas-dot:nth-child(1) { background: var(--cat-core); }
.mini-atlas .atlas-dot:nth-child(2) { background: var(--cat-upper);       animation-delay: 0.18s; }
.mini-atlas .atlas-dot:nth-child(3) { background: var(--cat-breadth-arts); animation-delay: 0.36s; }
@keyframes atlas-think-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.82); }
  40% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .mini-atlas .atlas-dot { animation: none; opacity: 1; }
}

/* Coursework checklist: re-uses CONNECTion's mp-row primitives. Each
   row pairs a small grey cell on the left (the "checkbox") with a
   wider colored task bar on the right that fills the equivalent of
   three mp-cells (merged). Three rows, three task colors — reads as
   an organised semester to-do list. */
.mini-coursework {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 10px;
  justify-content: center;
}
.mini-coursework .mp-row { display: flex; gap: 4px; }
.mp-cell.mp-merged { flex: 3; }

.mini-cal {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 1fr;
  gap: 4px;
  padding: 7px 10px;
  align-content: center;
}
.cal-cell {
  width: 100%;
  height: 18px;
  background: var(--surface-3);
  border-radius: 3px;
}
/* Family-view calendar cells use a mix that includes the module's own
   lime tone plus three previously-unused degree-map colours so the
   palette stays diverse across all eight module visuals. */
.cal-cell.green  { background: var(--cat-nonsocial); }
.cal-cell.purple { background: var(--cat-advanced-options); }
.cal-cell.orange { background: var(--cat-als); }
.cal-cell.red    { background: var(--cat-foundation); }
.cal-cell.blue   { background: var(--cat-core); }

.mini-chart {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px;
}
.bar {
  flex: 1;
  background: var(--cat-upper);
  border-radius: 2px 2px 0 0;
  min-height: 8px;
}
/* Forecast palette pulls in the previously-unused degree-map colours
   (foundation / als / nonsociology) so the chart reads as a multi-source
   threshold view instead of the default rainbow. */
.mini-chart .bar:nth-child(2) { background: var(--cat-foundation); }
.mini-chart .bar:nth-child(3) { background: var(--cat-crim-options); }
.mini-chart .bar:nth-child(4) { background: var(--cat-als); }
.mini-chart .bar:nth-child(5) { background: var(--cat-nonsocial); }
.mini-chart .bar:nth-child(6) { background: var(--cat-nonsociology); }

.mini-family { gap: 6px; }
.mini-family .family-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
}
.family-key { color: var(--text-2); }
.signal-status {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.signal-status.green  { background: var(--green); }
.signal-status.orange { background: var(--orange); }
.signal-status.red    { background: var(--red); }

/* ============================================================
   PRODUCT PREVIEW (Tabbed)
   ============================================================ */
.preview-window { margin-top: 8px; }
.preview-window .view-counts { padding-right: 0; }

.view-panel { padding: 0; }
.view-panel[hidden] { display: none; }

/* Data table */
.data-table {
  background: var(--surface);
  padding: 8px 0 12px;
}
.dt-head, .dt-row {
  display: grid;
  grid-template-columns: 2.2fr 1.2fr .8fr 1.1fr 1.2fr .7fr 1fr;
  gap: 12px;
  padding: 10px 18px;
  align-items: center;
  font-size: 12.5px;
}
.dt-head {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dt-row { border-bottom: 1px solid var(--border-dim); }
.dt-row:hover { background: var(--surface-2); }
.dt-row:last-child { border-bottom: 0; }
.dt-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--ink);
}
.dt-icon {
  width: 20px; height: 20px;
  border-radius: 5px;
  display: inline-block;
  flex-shrink: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  position: relative;
}
.dt-icon::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 2px;
}
.dt-blue::after   { background: var(--blue); }
.dt-orange::after { background: var(--orange); }
.dt-purple::after { background: var(--purple); }
.dt-green::after  { background: var(--green); }
.dt-red::after    { background: var(--red); }
.due { color: var(--orange); font-weight: 500; }
.dt-prog {
  display: block;
  height: 5px;
  background: var(--border-dim);
  border-radius: var(--r-pill);
  overflow: hidden;
  width: 100%;
}
.bar-fill {
  display: block;
  height: 100%;
  background: var(--blue);
  border-radius: inherit;
}

/* Calendar view */
.cal-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  padding: 16px;
}
.cal-summary {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px;
}
.cal-summary h4 {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--ink);
}
.cal-load {
  display: flex;
  justify-content: space-between;
  margin: 14px 0 10px;
  font-size: 11.5px;
  color: var(--text-2);
}
.load-label { color: var(--ink); font-weight: 500; }
.cal-bars { display: flex; flex-direction: column; gap: 8px; }
.cal-bar {
  display: grid;
  grid-template-columns: 110px 1fr 24px;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
}
.cal-bar-label { color: var(--ink-soft); }
.cal-bar .bar-fill { height: 7px; border-radius: var(--r-pill); }
.cal-bar-num { color: var(--text-3); text-align: right; }
.cal-active {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.ka {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ka strong { font-size: 14px; }
.ka .muted { font-size: 11px; }

.cal-months {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.cal-month {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px;
  box-shadow: var(--shadow-1);
  transition: border-color .15s, box-shadow .15s;
}
.cal-month:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-3);
}
.cal-month-name {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.cal-month-name .muted { font-size: 10.5px; font-weight: 400; }
.cal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cm-cell {
  aspect-ratio: 1;
  background: var(--surface-3);
  border-radius: 2px;
}

/* List view */
.list-grouped { padding: 12px 0; background: var(--surface); }
.list-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.group-count {
  margin-left: auto;
  color: var(--text-3);
  font-weight: 400;
}
.list-rows { display: flex; flex-direction: column; }
.list-rows li {
  display: grid;
  grid-template-columns: 14px 1fr auto auto auto;
  gap: 10px;
  padding: 12px 22px;
  align-items: center;
  border-bottom: 1px solid var(--border-dim);
  font-size: 13px;
}
.list-rows li:last-child { border-bottom: 0; }
.lr-title { color: var(--ink); }
.lr-due { color: var(--orange); font-size: 12px; font-weight: 500; }

/* Tree view */
.tree {
  padding: 28px 16px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  background: var(--surface);
  overflow-x: auto;
}
.tree-root, .tree-level {
  display: flex;
  gap: 20px;
  position: relative;
  justify-content: center;
}
.tree-fork { gap: 32px; }
.tree-fork-4 { gap: 18px; }
.tree-fork-2-leaf { gap: 24px; }
.tnode {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px;
  min-width: 200px;
  max-width: 240px;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.tnode-leaf { min-width: 180px; }
.tnode-root {
  border: 2px solid var(--border-strong);
  border-radius: var(--r-md);
  align-items: flex-start;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
}
.tnode-root strong {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
}
.tnode-sub { font-size: 11px; color: var(--text-3); }
.tnode-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.tnode-meta { font-size: 11px; color: var(--text-3); }
.tree-level::before {
  content: "";
  position: absolute;
  top: -22px;
  left: 50%;
  width: 1px;
  height: 22px;
  background: var(--border-strong);
}

/* ============================================================
   ATLAS live demo — chat on the left, copy + types on the right
   ============================================================ */
.atlas-section {
  /* Make the section span all the way to the left edge of the
     content area (flush with the rail) so the demo card sits
     opposite the hero mockup. */
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}
.atlas-section .atlas-layout {
  max-width: none;
}
.atlas-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr);
  gap: 32px;
  align-items: stretch;
  padding-right: var(--gutter);
}
.atlas-demo-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 24px 28px 28px;
  height: 720px;
  overflow: hidden;
  /* Flush against the menu rail — no left border, square left corners */
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.atlas-demo-head {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
}
.atlas-demo-card .panel-icon {
  background: var(--surface-2);
  color: var(--ink);
}
.atlas-demo-icon {
  background: transparent !important;
  border: 0 !important;
  padding: 0;
}
.atlas-demo-icon .thinking-flower {
  width: 26px;
  height: 26px;
}

.atlas-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 36px;
  align-self: start;
  padding-top: 8px;
}
.atlas-side-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  margin: 0 0 6px;
  max-width: none;
}
.atlas-side-header .kicker { margin-bottom: 12px; }
.atlas-side-header h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-weight: 600;
}
.atlas-side-header .lede {
  margin-top: 12px;
  font-size: 14.5px;
}
.atlas-worked,
.atlas-worked-line {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: 0;
  margin: 4px 0 6px 2px;
  cursor: default;
}
.atlas-worked-line {
  margin: 6px 0 0;
}
.atlas-worked svg,
.atlas-worked-line svg {
  color: var(--ink);
  width: 12px;
  height: 12px;
  stroke-width: 2.2;
}
.atlas-worked:focus-visible,
.atlas-option:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--border-strong);
}
.atlas-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 0 32px 0 0;
  margin-right: -36px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.atlas-msg {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 100%;
  padding: 0;
  border-radius: var(--r-md);
  font-size: 13px;
  line-height: 1.55;
  opacity: 1;
  transform: translateY(0);
}
.atlas-msg.is-entering {
  animation: atlas-rise .22s ease-out both;
}
.atlas-msg p {
  margin: 0;
}
.atlas-user {
  align-self: flex-end;
  max-width: min(76%, 620px);
  padding: 11px 13px;
  background: var(--surface-2);
  border: 1px solid var(--border-dim);
  border-radius: var(--r-md);
  color: var(--ink);
}
.atlas-bot {
  align-self: flex-start;
  max-width: 100%;
  width: 100%;
  color: var(--ink);
}
.atlas-bot p {
  color: var(--ink);
}
.atlas-wide {
  max-width: 100%;
  width: 100%;
}
.atlas-thinking {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  font-style: italic;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.atlas-thinking .thinking-flower {
  width: 12px;
  height: 12px;
}
.atlas-thinking-dots::after {
  content: "";
  animation: atlas-dots 1.1s steps(4, end) infinite;
}

/* ----------------------------------------------------------------
   ATLAS PROMPT CARDS — OpenAI-style suggestion cards.
   Three vertically stacked cards. Each card has a small uppercase
   number tag on top, bold title, muted descriptor, and a chevron
   that slides in on hover/active. Subtle hairline border, light
   surface fill on hover, tone-colored ring on active state. Uses
   only the 12 site tokens — no custom color fills. The active
   card's accent color tracks the data-tone (blue/purple/red),
   matching the brand flower used elsewhere.
   ---------------------------------------------------------------- */
.atlas-prompts {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  /* Establish a containment context so .atlas-prompts-more's
     font-size / flower size scale with the *actual* panel width
     (cqi units), not the viewport. This keeps the tagline + flower
     bounded by the bubble column above and prevents the flower from
     overflowing the right edge of the panel on narrower viewports. */
  container-type: inline-size;
}

.atlas-prompts-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}
.atlas-prompts-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.atlas-prompts-meta {
  font-size: 11.5px;
  color: var(--text-3);
  font-style: italic;
  letter-spacing: -0.005em;
}

.atlas-prompts-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Chat-bubble prompts — each prompt is rendered as a chat message
   bubble. Asymmetric border-radius (sharp bottom-left corner)
   creates a tail pointing toward the Atlas chat demo on the left,
   so each bubble visually reads as "the message about to be sent
   to Atlas." Default fill is --surface-2 (matches the existing
   .atlas-user message bubbles in the chat). Hover nudges the
   bubble leftward (toward Atlas) and deepens the fill. Active
   bubble flips to white with a tone-colored ring around the entire
   bubble shape, picking up the scenario's brand-flower color. */
.atlas-prompt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  width: 100%;
  padding: 14px 18px 16px;
  background: var(--surface-2);
  border: 0;
  border-radius: 18px 18px 18px 4px;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  box-shadow: none;
  transition: background-color .2s ease, transform .2s ease, box-shadow .25s ease;
}

.atlas-prompt-card:hover {
  background: var(--surface-3);
  transform: translateX(-3px);
}

.atlas-prompt-card.active {
  background: var(--surface);
  transform: translateX(-3px);
}

/* Tone-colored ring on active state. Uses inset box-shadow so it
   follows the asymmetric border-radius without re-declaring it on
   a pseudo-element. */
.atlas-prompt-card[data-tone="blue"].active   { box-shadow: inset 0 0 0 1.5px var(--cat-core); }
.atlas-prompt-card[data-tone="purple"].active { box-shadow: inset 0 0 0 1.5px var(--cat-breadth-arts); }
.atlas-prompt-card[data-tone="red"].active    { box-shadow: inset 0 0 0 1.5px var(--cat-upper); }

.atlas-prompt-card:focus-visible {
  outline: 2px solid var(--cat-core);
  outline-offset: 3px;
}

.atlas-prompt-num {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
  transition: color .2s ease;
}
.atlas-prompt-card[data-tone="blue"].active   .atlas-prompt-num,
.atlas-prompt-card[data-tone="blue"]:hover    .atlas-prompt-num { color: var(--cat-core); }
.atlas-prompt-card[data-tone="purple"].active .atlas-prompt-num,
.atlas-prompt-card[data-tone="purple"]:hover  .atlas-prompt-num { color: var(--cat-breadth-arts); }
.atlas-prompt-card[data-tone="red"].active    .atlas-prompt-num,
.atlas-prompt-card[data-tone="red"]:hover     .atlas-prompt-num { color: var(--cat-upper); }

.atlas-prompt-name {
  display: block;
  font-family: var(--font);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.014em;
  color: var(--ink);
  line-height: 1.3;
  margin: 0 0 4px;
}

.atlas-prompt-desc {
  display: block;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
  letter-spacing: -0.005em;
  margin: 0;
}

/* Trailing one-liner — sits below the third bubble like Atlas
   whispering back. Italic serif in the muted text color, slightly
   indented from the left to align with the bubble content above. */
/* Responsive — text + flower scale together with the actual panel
   width (via cqi container-query units on .atlas-prompts). clamp()
   keeps the size between a readable floor (13px) and a desktop max
   (36.43px). The cqi factor (~4.4%) is tuned so the whole tagline
   plus flower always fits inside the bubble column above without
   wrapping or overflowing the right edge. */
.atlas-prompts-more {
  margin: 22px 0 0 6px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18.72px, 6.34cqi, 52.46px);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.008em;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  gap: clamp(7.2px, 1.87cqi, 15.84px);
  max-width: 100%;
  white-space: nowrap;
}
/* Inherits the spinning animation from .thinking-flower (tf-spin
   4.5s linear infinite). Sized up here to match the larger
   italic-serif line and nudged down slightly to sit on the
   text baseline — scales with the container alongside the text. */
.atlas-prompts-more-flower {
  width: clamp(19.2px, 5.62cqi, 46.08px);
  height: clamp(19.2px, 5.62cqi, 46.08px);
  align-self: baseline;
  transform: translateY(clamp(2.4px, 1.06cqi, 8.64px));
}

/* Two-segment text rotator (matches .why-matters-head-rotator).
   Both segments stack into the same grid cell so the container
   sizes to the wider one (keeping the flower's position stable as
   text swaps). They cross-fade every 14s with a small vertical
   slide: ~5.6s visible each, ~0.7s fade transitions on either end.
   The flower sits beside the rotator as a separate inline-flex
   item and is unaffected by the animation. */
.atlas-prompts-more-rotator {
  display: grid;
  grid-template-areas: "stack";
  min-width: 0;
}
.atlas-prompts-more-rotator .seg {
  grid-area: stack;
  margin: 0;
  opacity: 0;
  animation: atlas-tagline-cycle 14s ease-in-out infinite both;
  white-space: nowrap;
}
.atlas-prompts-more-rotator .seg-1 { animation-delay: 0s; }
.atlas-prompts-more-rotator .seg-2 { animation-delay: 7s; }
@keyframes atlas-tagline-cycle {
  0%   { opacity: 0; transform: translateY(5px); }
  5%   { opacity: 1; transform: translateY(0); }
  45%  { opacity: 1; transform: translateY(0); }
  50%  { opacity: 0; transform: translateY(-5px); }
  100% { opacity: 0; transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .atlas-prompts-more-rotator .seg { animation: none; opacity: 1; }
  .atlas-prompts-more-rotator .seg-2 { display: none; }
}

.atlas-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 2px;
}
.atlas-result-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.atlas-result-title {
  display: block;
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.atlas-table {
  display: grid;
  max-height: 245px;
  overflow: auto;
}

#comp-overview,
.comp-table-scroll,
.degree-map-table,
.comp-cond-grouped,
.comp-cond-list,
.comp-notes-list,
.comp-cond-grid,
.composition-window .composition-detail-grid,
.composition-window .composition-notes,
.atlas-chat,
.atlas-table {
  scrollbar-width: thin;
  scrollbar-color: var(--internal-scrollbar-thumb) transparent;
}
#comp-overview::-webkit-scrollbar,
.comp-table-scroll::-webkit-scrollbar,
.degree-map-table::-webkit-scrollbar,
.comp-cond-grouped::-webkit-scrollbar,
.comp-cond-list::-webkit-scrollbar,
.comp-notes-list::-webkit-scrollbar,
.comp-cond-grid::-webkit-scrollbar,
.composition-window .composition-detail-grid::-webkit-scrollbar,
.composition-window .composition-notes::-webkit-scrollbar,
.atlas-chat::-webkit-scrollbar,
.atlas-table::-webkit-scrollbar {
  width: var(--internal-scrollbar-size);
  height: var(--internal-scrollbar-size);
}
#comp-overview::-webkit-scrollbar-track,
.comp-table-scroll::-webkit-scrollbar-track,
.degree-map-table::-webkit-scrollbar-track,
.comp-cond-grouped::-webkit-scrollbar-track,
.comp-cond-list::-webkit-scrollbar-track,
.comp-notes-list::-webkit-scrollbar-track,
.comp-cond-grid::-webkit-scrollbar-track,
.composition-window .composition-detail-grid::-webkit-scrollbar-track,
.composition-window .composition-notes::-webkit-scrollbar-track,
.atlas-chat::-webkit-scrollbar-track,
.atlas-table::-webkit-scrollbar-track {
  background: transparent;
}
#comp-overview::-webkit-scrollbar-thumb,
.comp-table-scroll::-webkit-scrollbar-thumb,
.degree-map-table::-webkit-scrollbar-thumb,
.comp-cond-grouped::-webkit-scrollbar-thumb,
.comp-cond-list::-webkit-scrollbar-thumb,
.comp-notes-list::-webkit-scrollbar-thumb,
.comp-cond-grid::-webkit-scrollbar-thumb,
.composition-window .composition-detail-grid::-webkit-scrollbar-thumb,
.composition-window .composition-notes::-webkit-scrollbar-thumb,
.atlas-chat::-webkit-scrollbar-thumb,
.atlas-table::-webkit-scrollbar-thumb {
  background: var(--internal-scrollbar-thumb);
  border-radius: var(--r-pill);
}
#comp-overview::-webkit-scrollbar-thumb:hover,
.comp-table-scroll::-webkit-scrollbar-thumb:hover,
.degree-map-table::-webkit-scrollbar-thumb:hover,
.comp-cond-grouped::-webkit-scrollbar-thumb:hover,
.comp-cond-list::-webkit-scrollbar-thumb:hover,
.comp-notes-list::-webkit-scrollbar-thumb:hover,
.comp-cond-grid::-webkit-scrollbar-thumb:hover,
.composition-window .composition-detail-grid::-webkit-scrollbar-thumb:hover,
.composition-window .composition-notes::-webkit-scrollbar-thumb:hover,
.atlas-chat::-webkit-scrollbar-thumb:hover,
.atlas-table::-webkit-scrollbar-thumb:hover {
  background: var(--internal-scrollbar-thumb-hover);
}
#comp-overview::-webkit-scrollbar-corner,
.comp-table-scroll::-webkit-scrollbar-corner,
.degree-map-table::-webkit-scrollbar-corner,
.comp-cond-grouped::-webkit-scrollbar-corner,
.comp-cond-list::-webkit-scrollbar-corner,
.comp-notes-list::-webkit-scrollbar-corner,
.comp-cond-grid::-webkit-scrollbar-corner,
.composition-window .composition-detail-grid::-webkit-scrollbar-corner,
.composition-window .composition-notes::-webkit-scrollbar-corner,
.atlas-chat::-webkit-scrollbar-corner,
.atlas-table::-webkit-scrollbar-corner {
  background: transparent;
}

:where(
  #comp-overview,
  .comp-table-scroll,
  .degree-map-table,
  .comp-cond-grouped,
  .comp-cond-list,
  .comp-notes-list,
  .comp-cond-grid,
  .composition-window .composition-detail-grid,
  .composition-window .composition-notes,
  .composition-body,
  .board,
  .tree,
  .preview-window,
  .data-table,
  .atlas-chat,
  .atlas-table,
  .atlas-doc-table-block
) {
  scrollbar-width: thin;
  scrollbar-color: var(--internal-scrollbar-thumb) transparent;
}
:where(
  #comp-overview,
  .comp-table-scroll,
  .degree-map-table,
  .comp-cond-grouped,
  .comp-cond-list,
  .comp-notes-list,
  .comp-cond-grid,
  .composition-window .composition-detail-grid,
  .composition-window .composition-notes,
  .composition-body,
  .board,
  .tree,
  .preview-window,
  .data-table,
  .atlas-chat,
  .atlas-table,
  .atlas-doc-table-block
)::-webkit-scrollbar {
  width: var(--internal-scrollbar-size) !important;
  height: var(--internal-scrollbar-size) !important;
}
:where(
  #comp-overview,
  .comp-table-scroll,
  .degree-map-table,
  .comp-cond-grouped,
  .comp-cond-list,
  .comp-notes-list,
  .comp-cond-grid,
  .composition-window .composition-detail-grid,
  .composition-window .composition-notes,
  .composition-body,
  .board,
  .tree,
  .preview-window,
  .data-table,
  .atlas-chat,
  .atlas-table,
  .atlas-doc-table-block
)::-webkit-scrollbar-track {
  background: transparent !important;
  border: 0 !important;
}
:where(
  #comp-overview,
  .comp-table-scroll,
  .degree-map-table,
  .comp-cond-grouped,
  .comp-cond-list,
  .comp-notes-list,
  .comp-cond-grid,
  .composition-window .composition-detail-grid,
  .composition-window .composition-notes,
  .composition-body,
  .board,
  .tree,
  .preview-window,
  .data-table,
  .atlas-chat,
  .atlas-table,
  .atlas-doc-table-block
)::-webkit-scrollbar-thumb {
  min-height: 24px;
  background: var(--internal-scrollbar-thumb) !important;
  border: 0 !important;
  border-radius: var(--r-pill);
  background-clip: padding-box;
}
:where(
  #comp-overview,
  .comp-table-scroll,
  .degree-map-table,
  .comp-cond-grouped,
  .comp-cond-list,
  .comp-notes-list,
  .comp-cond-grid,
  .composition-window .composition-detail-grid,
  .composition-window .composition-notes,
  .composition-body,
  .board,
  .tree,
  .preview-window,
  .data-table,
  .atlas-chat,
  .atlas-table,
  .atlas-doc-table-block
)::-webkit-scrollbar-thumb:hover,
:where(
  #comp-overview,
  .comp-table-scroll,
  .degree-map-table,
  .comp-cond-grouped,
  .comp-cond-list,
  .comp-notes-list,
  .comp-cond-grid,
  .composition-window .composition-detail-grid,
  .composition-window .composition-notes,
  .composition-body,
  .board,
  .tree,
  .preview-window,
  .data-table,
  .atlas-chat,
  .atlas-table,
  .atlas-doc-table-block
)::-webkit-scrollbar-thumb:active {
  background: var(--internal-scrollbar-thumb-hover) !important;
  border: 0 !important;
}
:where(
  #comp-overview,
  .comp-table-scroll,
  .degree-map-table,
  .comp-cond-grouped,
  .comp-cond-list,
  .comp-notes-list,
  .comp-cond-grid,
  .composition-window .composition-detail-grid,
  .composition-window .composition-notes,
  .composition-body,
  .board,
  .tree,
  .preview-window,
  .data-table,
  .atlas-chat,
  .atlas-table,
  .atlas-doc-table-block
)::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
:where(
  #comp-overview,
  .comp-table-scroll,
  .degree-map-table,
  .comp-cond-grouped,
  .comp-cond-list,
  .comp-notes-list,
  .comp-cond-grid,
  .composition-window .composition-detail-grid,
  .composition-window .composition-notes,
  .composition-body,
  .board,
  .tree,
  .preview-window,
  .data-table,
  .atlas-chat,
  .atlas-table,
  .atlas-doc-table-block
)::-webkit-scrollbar-corner {
  background: transparent !important;
}
.atlas-table-row {
  display: grid;
  grid-template-columns: minmax(112px, 1.1fr) minmax(76px, .72fr) minmax(126px, 1fr);
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-dim);
  color: var(--ink);
  font-size: 11px;
  line-height: 1.35;
}
.atlas-table-row:last-child { border-bottom: 0; }
.atlas-table-row span {
  min-width: 0;
}
.atlas-table-row span:first-child {
  color: var(--ink);
  font-weight: 600;
}
.atlas-table-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.atlas-table-head span:first-child {
  color: var(--ink);
}
.atlas-answer-list {
  display: grid;
  gap: 8px;
  margin-top: 2px;
}
.atlas-answer-item {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 9px 10px;
  border: 1px solid var(--border-dim);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
}
.atlas-answer-item .cat-box {
  margin-top: 4px;
  background: var(--text-3) !important;
  opacity: .65;
}
.atlas-answer-item strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
  font-size: 12px;
}
.atlas-doc-output {
  display: grid;
  gap: 20px;
  margin-top: 12px;
  color: var(--ink);
}
.atlas-doc-output p {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.58;
  margin: 0;
}
.atlas-doc-output p + p {
  margin-top: 8px;
}
.atlas-doc-section {
  display: grid;
  gap: 8px;
}
.atlas-doc-table-block {
  min-width: 0;
  overflow-x: auto;
  margin-left: 0;
}
.atlas-doc-table-block h4,
.atlas-doc-section h4 {
  margin: 0 0 9px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0;
}
.atlas-guidance-answer .atlas-doc-section {
  padding-top: 14px;
  border-top: 1px solid var(--border-dim);
}
.atlas-guidance-answer .atlas-doc-section:first-of-type {
  padding-top: 0;
  border-top: 0;
}
.atlas-doc-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  color: var(--ink);
}
.atlas-doc-table th,
.atlas-doc-table td {
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-dim);
  padding: 13px 18px 13px 0;
}
.atlas-doc-table th {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
  font-weight: 700;
}
.atlas-doc-table td {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}
.atlas-doc-table td:first-child {
  color: var(--ink);
  font-weight: 700;
}
.atlas-doc-table tr:last-child td {
  border-bottom: 0;
}
.atlas-doc-table-compact {
  min-width: 460px;
}
.atlas-doc-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 20px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}
.atlas-doc-list strong {
  color: var(--ink);
}
@keyframes atlas-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes atlas-dots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75%, 100% { content: "..."; }
}

.family-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.family-panel .family-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 13px;
}
.family-panel .family-key { font-weight: 500; color: var(--ink); }
.family-panel .family-val { color: var(--text-2); font-size: 12.5px; }
.family-panel .signal-status { width: 10px; height: 10px; }

/* ============================================================
   STATS
   ============================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .15s, box-shadow .15s;
}
.stat-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-3);
}
.stat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.stat-num {
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  margin-top: 6px;
}
.stat-unit {
  font-family: var(--font);
  font-size: 18px;
  color: var(--text-2);
  font-weight: 500;
  margin-left: 2px;
}
.stat-desc {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.45;
  flex: 1 1 auto;
}
.stat-bar {
  height: 6px;
  background: var(--surface-3);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-top: 4px;
}
.research-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 12.5px;
  color: var(--text-2);
  box-shadow: var(--shadow-1);
}
.research-note svg { color: var(--orange); margin-top: 2px; flex-shrink: 0; }

/* ============================================================
   PRINCIPLES
   ============================================================ */
/* Principles — compact 4-card grid. Each card is small and scannable:
   a small serif label, a tight title whose suffix flips to italic serif
   in the principle's tone colour, then a short description. A 2px
   tone-coloured top border adds a quiet visual accent without bulk. */
.principles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.principle {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px 16px 16px;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.principle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--cat-core);
}
.principle:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-3);
}
.principle-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 1;
}
.principle h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
  margin: 2px 0 0;
}
.principle h3 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cat-core);
}
.principle p {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.5;
  margin: 4px 0 0;
}

/* Per-tone wiring — only the top accent and the italic suffix carry
   colour; everything else stays neutral so the cards read cleanly. */
.principle[data-tone="blue"]::before   { background: var(--cat-core); }
.principle[data-tone="blue"]   h3 em   { color: var(--cat-core); }
.principle[data-tone="orange"]::before { background: var(--cat-crim-options); }
.principle[data-tone="orange"] h3 em   { color: var(--cat-crim-options); }
.principle[data-tone="green"]::before  { background: var(--cat-theory); }
.principle[data-tone="green"]  h3 em   { color: var(--cat-theory); }
.principle[data-tone="purple"]::before { background: var(--cat-breadth-arts); }
.principle[data-tone="purple"] h3 em   { color: var(--cat-breadth-arts); }

/* Small visual at the bottom of each principle card. Each illustration
   is a one-off SVG (not a re-used module mini-UI primitive) chosen to
   represent that principle directly:
     • Rule-aware       → a horizontal "validation axis" with a marker
                          sitting at a checkpoint tick.
     • Explainable      → an outlined "answer" card + arrow leading to a
                          "why" annotation block (reasoning revealed).
     • Advisor-centered → a small folded-corner document with prepared
                          bullet-point talking notes.
     • Governance-aware → a two-tier stack: an outlined CONNECT prep
                          layer above a filled institution-approval seal
                          with a check mark.
*/
.principle-viz {
  margin-top: auto;
  padding: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.principle-viz svg {
  width: 100%;
  height: 42px;
  display: block;
}
.principle-viz svg .pv-soft   { stroke: var(--border-strong); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.principle-viz svg .pv-soft-fill { fill: var(--border-strong); }
.principle-viz svg .pv-faint  { stroke: var(--border); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.principle-viz svg .pv-tone   { fill: var(--cat-core); }
.principle[data-tone="blue"]   .pv-tone { fill: var(--cat-core); }
.principle[data-tone="orange"] .pv-tone { fill: var(--cat-crim-options); }
.principle[data-tone="green"]  .pv-tone { fill: var(--cat-theory); }
.principle[data-tone="purple"] .pv-tone { fill: var(--cat-breadth-arts); }
.principle[data-tone="blue"]   .pv-tone-stroke { stroke: var(--cat-core); }
.principle[data-tone="orange"] .pv-tone-stroke { stroke: var(--cat-crim-options); }
.principle[data-tone="green"]  .pv-tone-stroke { stroke: var(--cat-theory); }
.principle[data-tone="purple"] .pv-tone-stroke { stroke: var(--cat-breadth-arts); }
/* Disclaimer — student → message → institution layout.
   Reads horizontally as a narrative: the student silhouette on the
   left (the person CONNECT is helping), a thin connector rule, the
   central message (heading + paragraph, center-aligned), a mirror
   rule, and the institution silhouette on the right (the deciding
   authority). Carries the same chrome as a principle tile (white
   surface, hairline border, subtle shadow, small radius, purple
   top accent stripe) so it reads as part of the same system. */
.disclaimer {
  position: relative;
  margin-top: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 22px 28px;
  box-shadow: var(--shadow-1);
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 18px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.disclaimer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--cat-foundation);
}
.disclaimer:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-3);
}

/* Flanking icons — wider footprint to hold a stacked pair of
   silhouettes (grey background + colored foreground) on each side.
   Aspect ratio (~1.6) matches the 48×30 viewBox so the pair sits
   cleanly without scaling distortion. */
.disclaimer-icon {
  flex: 0 0 auto;
  width: 90px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* The colored navy school sits at the right edge of its SVG —
   without compensation it ends up hugging the disclaimer's right
   border. Margin-right pulls the entire institution cluster
   (grey + navy) inward so the padding between the navy school and
   the disclaimer border visually matches the padding between the
   grey student and the disclaimer's left border. */
.disclaimer-icon-institution {
  margin-right: 9px;
}
.disclaimer-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.disclaimer-icon svg .pv-soft-fill   { fill: var(--border-strong); }
.disclaimer-icon svg .pv-tone        { fill: var(--cat-foundation); }
.disclaimer-icon svg .pv-tone-stroke { stroke: var(--cat-foundation); fill: none; }

/* Connector lines that bridge each icon to the edge of the central
   message. flex: 1 lets each rule fill the space between icon and
   text; min-width keeps a visible stretch even when the body claims
   most of the row. */
.disclaimer-rule {
  flex: 0 1 100px;
  height: 1px;
  min-width: 40px;
  max-width: 110px;
  background: var(--border-strong);
}

/* Central message — heading + paragraph, center-aligned to balance
   the symmetric icon/rule framing on either side. With the shorter
   paragraph the body doesn't need the previous very-wide max — back
   to a more proportionate 760px, leaving room for visible connector
   rules (max ~110px each) on either side. */
.disclaimer-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  max-width: 760px;
  min-width: 0;
}
.disclaimer-title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}
.disclaimer-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cat-foundation);
}
.disclaimer p {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.55;
  margin: 0;
}
.disclaimer strong { color: var(--ink); }

/* At narrower viewports the rules disappear and the icons sit on
   the same row as the text gets full width, then below ~600 the
   whole layout stacks vertically (icons on either side of the
   message remain, just no connector lines). */
@media (max-width: 880px) {
  .disclaimer { padding: 20px 22px; gap: 14px; }
  .disclaimer-rule { display: none; }
}
@media (max-width: 600px) {
  .disclaimer { flex-direction: column; text-align: center; }
  .disclaimer-icon { width: 72px; height: 45px; }
}

/* ============================================================
   SECURITY (settings card)
   ============================================================ */
.settings-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.settings-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.settings-head .muted { font-weight: 400; font-size: 12px; }
.settings-rows { display: flex; flex-direction: column; }
.settings-rows li {
  display: grid;
  grid-template-columns: 220px 1fr 140px;
  gap: 16px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border-dim);
  align-items: center;
}
.settings-rows li:last-child { border-bottom: 0; }
.sr-key { font-size: 13px; font-weight: 500; color: var(--ink); }
.sr-val { font-size: 13px; color: var(--text-2); line-height: 1.45; }
.sr-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  color: var(--ink-soft);
  justify-self: end;
}

/* ============================================================
   PROBLEM — backlog monitor
   ============================================================ */
.monitor {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.monitor .window-bar { padding: 12px 18px; }
.monitor-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding: 18px 22px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.ms-stat {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
.ms-num {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1;
  color: var(--ink);
}
.ms-label {
  font-size: 11.5px;
  color: var(--text-2);
}
.ms-bar {
  display: block;
  height: 5px;
  background: var(--surface-3);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-top: 4px;
}

.monitor-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
}
.monitor-pane {
  padding: 0;
  background: var(--surface);
}
.monitor-pane + .monitor-pane {
  border-left: 1px solid var(--border);
}
.mp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-dim);
}
.mp-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.queue {
  display: flex;
  flex-direction: column;
}
.queue li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 22px;
  border-bottom: 1px solid var(--border-dim);
  font-size: 13px;
}
.queue li:last-child { border-bottom: 0; }
.q-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.q-tag {
  width: auto;
  padding: 2px 8px;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: var(--r-xs);
  text-align: center;
  color: var(--chip-orange-fg);
  background: var(--chip-orange-bg);
}
.q-tag.chip-red    { background: var(--chip-red-bg);    color: var(--chip-red-fg); }
.q-tag.chip-orange { background: var(--chip-orange-bg); color: var(--chip-orange-fg); }
.q-tag.chip-gold   { background: var(--chip-gold-bg);   color: var(--chip-gold-fg); }
.q-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.q-main strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.q-main span {
  font-size: 11.5px;
  color: var(--text-2);
}
.mp-foot {
  padding: 12px 22px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}
.mp-foot .hr-dot { display: inline-block; }


/* ============================================================
   PROBLEM — two-column classes
   ============================================================ */
.why-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: stretch;
}

/* ============================================================
   "Thinking about transferring?" — redesigned to match the
   principle-tile vocabulary. Three system cards (top tone stripe,
   uppercase label, semibold heading with italic-serif accent,
   muted descriptor, small viz block) sit in a centered grid below
   the section head. A separate hero answer block follows (the
   universal first question + how CONNECT changes the starting
   point), then a clean disclaimer foot.
   ============================================================ */
/* 2-column layout: clean narrative on the left, stacked cards on
   the right. align-items: stretch (the grid default) so both
   columns naturally end at the same baseline; the right-side
   stage uses flex internally to space its cards across the full
   height so the last card aligns with the bottom of the left
   column's disclaimer. */
.why-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 36px;
  row-gap: 18px;
  align-items: stretch;
}
/* Prose row — both prose blocks are direct grid children sitting in
   row 2. Their TOPS auto-align at the row boundary, so no matter
   how tall row 1 grows (whether the right panel is in cycling mode
   with one tile, or in the taller 2x2 resolved grid), the two
   closing paragraphs always start at exactly the same Y. */
.why-grid > .why-narr-prose,
.why-grid > .why-panel-prose {
  align-self: start;
}

/* Column flip — the visual panel (tiles) lives in column 1 on the
   LEFT and the editorial narrative (intro, spotlight, rotating
   question, closing prose) lives in column 2 on the RIGHT. DOM
   order stays unchanged for accessibility/screen-reader flow; only
   the visual placement is swapped via grid-column. Explicit
   grid-row pins each block so the auto-placement cursor cannot
   spill an item into the wrong row when an earlier item already
   has an explicit column. */
.why-grid > .why-narrative { grid-column: 2; grid-row: 1; }
.why-grid > .why-panel { grid-column: 1; grid-row: 1; }
.why-grid > .why-narr-prose { grid-column: 2; grid-row: 2; }
.why-grid > .why-panel-prose { grid-column: 1; grid-row: 2; }

/* Right-side cycling panel — NO outer container chrome (no border,
   no surface fill, no rounded corners, no window-bar). The cycling
   content sits directly on the section background so the right
   column reads as a quiet companion to the LEFT editorial column,
   tying the section together with the cycle's rhythm rather than
   with framing. Each step is composed in the principle-viz visual
   language (line + fill primitives in viewBox 120x36 mini-scenes).
   Every paint resolves through --row-tone to one of the 12 approved
   --cat-* tokens. */
.why-panel {
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(14px);
  animation: why-panel-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: 0.1s;
}
@keyframes why-panel-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* Cycling content stack — four steps occupy the same grid cell during
   the walkthrough. Each one gets its own four-second beat before the
   resolved grid takes over. */
.why-panel-cycle {
  --why-cycle-visual-width: 100%;
  --why-step-text-inset: 16px;
  --why-cycle-copy-align: 0px;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.why-panel-cycle-track {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-areas: "stack";
}

.why-panel-cycle-item {
  grid-area: stack;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  opacity: 0;
  transform: translateY(8px);
}
.why-panel-cycle:not(.resolved) .why-panel-cycle-head,
.why-panel-cycle:not(.resolved) .why-panel-cycle-title,
.why-panel-cycle:not(.resolved) .why-panel-cycle-desc,
.why-panel-cycle:not(.resolved) .why-panel-cycle-viz {
  margin-left: var(--why-cycle-copy-align);
}
.why-panel-cycle:not(.resolved) .why-panel-cycle-desc {
  max-width: min(var(--why-cycle-visual-width), calc(100% - var(--why-cycle-copy-align) - 24px));
}
/* During cycling, the visual sits inside a same-width column as the
   text so its left edge anchors to the body copy above. */
.why-panel-cycle:not(.resolved) .why-panel-cycle-viz {
  width: var(--why-cycle-visual-width);
  max-width: calc(100% - var(--why-cycle-copy-align));
}
/* Animation gated by the .playing class added by the IntersectionObserver
   in index.html, so the cycle starts when the section is in view rather
   than burning through during page-load scroll. */
.why-panel-cycle.playing .why-panel-cycle-item {
  animation: why-cycle-step 4.6s 1 cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.why-panel-cycle.playing .why-panel-cycle-item:nth-child(1) { animation-delay: 0s; }
.why-panel-cycle.playing .why-panel-cycle-item:nth-child(2) { animation-delay: 4s; }
.why-panel-cycle.playing .why-panel-cycle-item:nth-child(3) { animation-delay: 8s; }
.why-panel-cycle.playing .why-panel-cycle-item:nth-child(4) { animation-delay: 12s; }

@keyframes why-cycle-step {
  0%   { opacity: 0; transform: translateY(10px) scale(0.99); }
  10%  { opacity: 1; transform: translateY(0) scale(1); }
  76%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-10px) scale(0.99); }
}

.why-panel-cycle-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.why-panel-cycle-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--row-tone, var(--cat-core));
}
.why-panel-cycle-label {
  position: relative;
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-left: 14px;
}
.why-panel-cycle-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 1px;
  background: var(--border-strong);
  transform: translateY(-50%);
}

.why-panel-cycle-title {
  font-family: var(--font);
  font-weight: 600;
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.22;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 6px 0 0;
}
.why-panel-cycle-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--row-tone, var(--cat-core));
  letter-spacing: -0.005em;
}

/* Visual zone — flows directly on the panel surface, no border or
   surface-2 fill behind it. The SVG inside is a small principle-viz-
   style illustration (clean line + fill primitives) that sits as a
   quiet supporting accent below the heading, in the same way the
   .principle-viz illustrations sit below each principle tile. */
.why-panel-cycle-viz {
  flex: 0 0 auto;
  margin-top: 4px;
  padding: 0;
  background: transparent;
  border: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 0;
}
.why-panel-cycle-viz svg {
  width: 100%;
  height: auto;
  max-height: 200px;
  max-width: 100%;
  display: block;
}

/* Paint hooks — same .pv-* vocabulary as .principle-viz, but every
   tone fill resolves through --row-tone so the illustration adopts
   the active step's colour as the cycle advances. */
.why-panel-cycle-viz .pv-tone        { fill: var(--row-tone, var(--cat-core)); }
.why-panel-cycle-viz .pv-tone-alt    { fill: var(--row-accent-2, var(--row-tone, var(--cat-core))); }
.why-panel-cycle-viz .pv-tone-third  { fill: var(--row-accent-3, var(--row-tone, var(--cat-core))); }
.why-panel-cycle-viz .pv-tone-fourth { fill: var(--row-accent-4, var(--row-tone, var(--cat-core))); }
.why-panel-cycle-viz .pv-tone-fifth  { fill: var(--row-accent-5, var(--row-tone, var(--cat-core))); }
.why-panel-cycle-viz .pv-tone-sixth  { fill: var(--row-accent-6, var(--row-tone, var(--cat-core))); }
.why-panel-cycle-viz .pv-tone-soft   { fill: color-mix(in srgb, var(--row-tone, var(--cat-core)) 14%, transparent); }
.why-panel-cycle-viz .pv-tone-stroke { stroke: var(--row-tone, var(--cat-core)); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.why-panel-cycle-viz .pv-tone-alt-stroke { stroke: var(--row-accent-2, var(--row-tone, var(--cat-core))); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.why-panel-cycle-viz .pv-tone-third-stroke { stroke: var(--row-accent-3, var(--row-tone, var(--cat-core))); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.why-panel-cycle-viz .pv-tone-fourth-stroke { stroke: var(--row-accent-4, var(--row-tone, var(--cat-core))); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.why-panel-cycle-viz .pv-tone-fifth-stroke { stroke: var(--row-accent-5, var(--row-tone, var(--cat-core))); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.why-panel-cycle-viz .pv-tone-sixth-stroke { stroke: var(--row-accent-6, var(--row-tone, var(--cat-core))); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.why-panel-cycle-viz .pv-soft        { stroke: var(--border-strong); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.why-panel-cycle-viz .pv-soft-fill   { fill: var(--border-strong); }
.why-panel-cycle-viz .pv-faint       { stroke: var(--border); fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Tone routing — every paint resolves through approved degree-map
   category tokens. Companion tones are used inside the SVG marks only;
   the card chrome itself stays clean. */
.why-panel-cycle-item {
  --row-tone: var(--cat-core);
  --row-accent-2: var(--cat-breadth-sci);
  --row-accent-3: var(--cat-theory);
  --row-accent-4: var(--cat-crim-options);
  --row-accent-5: var(--cat-breadth-arts);
  --row-accent-6: var(--cat-upper);
}
.why-panel-cycle-item[data-tone="navy"] {
  --row-tone: var(--cat-breadth-sci);
  --row-accent-2: var(--cat-crim-options);
  --row-accent-3: var(--cat-upper);
  --row-accent-4: var(--cat-theory);
  --row-accent-5: var(--cat-breadth-arts);
  --row-accent-6: var(--cat-core);
}
.why-panel-cycle-item[data-tone="purple"] {
  --row-tone: var(--cat-breadth-arts);
  --row-accent-2: var(--cat-core);
  --row-accent-3: var(--cat-nonsocial);
  --row-accent-4: var(--cat-advanced-options);
  --row-accent-5: var(--cat-breadth-sci);
  --row-accent-6: var(--cat-crim-options);
}
.why-panel-cycle-item[data-tone="orange"] {
  --row-tone: var(--cat-nonsociology);
  --row-accent-2: var(--cat-advanced-options);
  --row-accent-3: var(--cat-als);
  --row-accent-4: var(--cat-crim-options);
  --row-accent-5: var(--cat-theory);
  --row-accent-6: var(--cat-core);
}
.why-panel-cycle-item[data-tone="lime"] {
  --row-tone: var(--cat-theory);
  --row-accent-2: var(--cat-breadth-sci);
  --row-accent-3: var(--cat-crim-options);
  --row-accent-4: var(--cat-upper);
  --row-accent-5: var(--cat-breadth-arts);
  --row-accent-6: var(--cat-core);
}
/* Aliases retained for any other call-sites that may use the old tone
   names; they map straight through to the same brand tokens. */
.why-panel-cycle-item[data-tone="blue"]   { --row-tone: var(--cat-foundation); }
.why-panel-cycle-item[data-tone="green"]  { --row-tone: var(--cat-nonsocial); }

/* Description that lives BELOW the cycling title on the right side
   (moved here from the LEFT column so the right panel carries the
   complete step story: head → title → description → visual). */
.why-panel-cycle-desc {
  font-family: var(--font);
  font-size: clamp(13.5px, 1.1vw, 15.5px);
  line-height: 1.55;
  color: var(--text-2);
  margin: 8px 0 0;
  max-width: 48ch;
}

/* ============================================================
   RESOLVED STATE — when the cycle finishes (after one full pass
   through all 4 steps, 16s + buffer), the JS in index.html adds
   .resolved to .why-panel-cycle. The four overlapping cycle items
   spread into a 2x2 grid and each takes on the .principle tile's
   chrome: surface fill, hairline border, soft shadow, top tone
   accent stripe. The reader gets to see all four steps at once.
   ============================================================ */
.why-panel-cycle.resolved .why-panel-cycle-track {
  --why-tile-collapsed: 176px;
  --why-tile-open: 252px;
  display: grid;
  grid-template-areas:
    "a b"
    "c d";
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-left: 0;
  align-items: start;
  transition: grid-template-rows 0.72s cubic-bezier(0.65, 0, 0.35, 1);
}
.why-panel-cycle.resolved:not(.focused) .why-panel-cycle-track {
  grid-template-rows: repeat(2, var(--why-tile-open));
}
.why-panel-cycle.resolved .why-panel-cycle-item {
  position: relative;
  grid-area: auto;
  min-height: 188px;
  padding: 18px 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  animation: none;
  opacity: 1;
  transform: none;
  overflow: hidden;
  gap: 4px;
  transition: height 0.75s cubic-bezier(0.65, 0, 0.35, 1),
              min-height 0.75s cubic-bezier(0.65, 0, 0.35, 1),
              padding 0.75s cubic-bezier(0.65, 0, 0.35, 1),
              gap 0.75s cubic-bezier(0.65, 0, 0.35, 1),
              border-color 0.18s ease,
              box-shadow 0.18s ease,
              transform 0.18s ease;
}
.why-panel-cycle.resolved .why-panel-cycle-item:nth-child(1) { grid-area: a; }
.why-panel-cycle.resolved .why-panel-cycle-item:nth-child(2) { grid-area: b; }
.why-panel-cycle.resolved .why-panel-cycle-item:nth-child(3) { grid-area: c; }
.why-panel-cycle.resolved .why-panel-cycle-item:nth-child(4) { grid-area: d; }
.why-panel-cycle.resolved .why-panel-cycle-item:is(:hover, :focus, :focus-within, .is-spotlighted) {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-3);
  transform: translateY(-2px);
  z-index: 4;
}
.why-panel-cycle.resolved .why-panel-cycle-item:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--row-tone, var(--cat-core)) 42%, transparent);
  outline-offset: 3px;
}
/* Top tone accent stripe — same 2px bar pattern as .principle::before */
.why-panel-cycle.resolved .why-panel-cycle-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--row-tone, var(--cat-core));
}
/* Per-card typography scaled down for the 2x2 grid */
.why-panel-cycle.resolved .why-panel-cycle-num {
  font-size: 18px;
}
.why-panel-cycle.resolved .why-panel-cycle-label {
  font-size: 10px;
}
.why-panel-cycle.resolved .why-panel-cycle-head,
.why-panel-cycle.resolved .why-panel-cycle-title,
.why-panel-cycle.resolved .why-panel-cycle-desc {
  margin-left: var(--why-step-text-inset);
  margin-right: 4px;
}
.why-panel-cycle.resolved .why-panel-cycle-title {
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.25;
  margin-top: 2px;
}
.why-panel-cycle.resolved .why-panel-cycle-desc {
  font-size: clamp(11px, 0.9vw, 13px);
  line-height: 1.5;
  max-width: none;
  max-height: 150px;
  margin-top: 4px;
  overflow: hidden;
}
.why-panel-cycle.resolved .why-panel-cycle-viz {
  flex: 0 0 auto;
  min-height: 62px;
  margin-top: 10px;
}
/* Cued fade-in when the card lands in its grid slot. Sequenced
   staggers so the four panels resolve one after another, not all
   at once. */
.why-panel-cycle.resolved .why-panel-cycle-item {
  animation: why-cycle-resolve 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.why-panel-cycle.resolved .why-panel-cycle-item:nth-child(1) { animation-delay: 0s; }
.why-panel-cycle.resolved .why-panel-cycle-item:nth-child(2) { animation-delay: 0.08s; }
.why-panel-cycle.resolved .why-panel-cycle-item:nth-child(3) { animation-delay: 0.16s; }
.why-panel-cycle.resolved .why-panel-cycle-item:nth-child(4) { animation-delay: 0.24s; }
@keyframes why-cycle-resolve {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   FOCUSED STATE — 2.5s after the cards land, ONLY the description
   collapses. The step head (number + label) and the title stay
   visible the whole time. The viz container grows into the
   description's space and the SVG scales up — together it reads
   as "the visual takes over the description". The cards naturally
   shrink because one element collapsed, and the visual rises +
   expands inside that smaller card.

   Smoothness — all four properties (desc opacity, desc max-height,
   desc margin, viz min-height, SVG transform) ride a long 0.8s
   easeInOutCubic curve. The slow start + slow finish removes any
   abruptness; the long mid-section gives the eye time to track
   what's happening. The SVG scale rides the same clock with a
   small 0.15s delay so the description has visibly started fading
   before the visual begins its rise — sequential, not simultaneous.
   ============================================================ */

/* Transitions live on the resolved state so they apply both going
   forward (resolved → focused) and coming back (focused → hover).
   Everything is keyed off the same easeInOutCubic curve so the
   motion feels like one gesture, not three. */
.why-panel-cycle.resolved .why-panel-cycle-desc {
  transition: opacity 0.7s cubic-bezier(0.65, 0, 0.35, 1),
              max-height 0.8s cubic-bezier(0.65, 0, 0.35, 1),
              margin 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}
.why-panel-cycle.resolved .why-panel-cycle-viz {
  transition: min-height 0.8s cubic-bezier(0.65, 0, 0.35, 1),
              margin 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}
.why-panel-cycle.resolved .why-panel-cycle-viz svg {
  transform: scale(1);
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.15s;
}

/* Focused — only the description collapses. Head + title stay, and the
   original visual remains in its normal tile composition. */
.why-panel-cycle.focused .why-panel-cycle-track {
  grid-template-rows: repeat(2, var(--why-tile-collapsed));
}
.why-panel-cycle.focused .why-panel-cycle-track:has(.why-panel-cycle-item:nth-child(n + 3):is(:hover, :focus, :focus-within, .is-spotlighted)) {
  grid-template-rows: var(--why-tile-collapsed) var(--why-tile-open);
  transition: grid-template-rows 0.72s cubic-bezier(0.65, 0, 0.35, 1);
}
/* Top-row expansion — when tile 1 or 2 is spotlighted/hovered, the
   TOP row grows to --why-tile-open instead of the tile being
   transformed upward. This pushes the bottom row down (and any
   content below the panel) rather than overlapping the section
   subheading above. */
.why-panel-cycle.focused .why-panel-cycle-track:has(.why-panel-cycle-item:nth-child(-n + 2):is(:hover, :focus, :focus-within, .is-spotlighted)) {
  grid-template-rows: var(--why-tile-open) var(--why-tile-collapsed);
  transition: grid-template-rows 0.72s cubic-bezier(0.65, 0, 0.35, 1);
}
/* Top row only — anchor BOTH tiles in row 1 to the bottom of
   their row cells AT ALL TIMES (not just when spotlighted). In
   the default state the tile height equals the row height
   (176px), so this anchor is invisible. The moment the row grows
   to 252px, both tiles' bottom edges stay locked at the row's
   bottom — the expanded tile grows upward, the collapsed tile
   stays put. Applying this unconditionally avoids the abrupt
   align-self snap that happens when CSS toggles a non-animatable
   property between hover/spotlight states. The bottom row keeps
   its original behaviour and is NOT affected. */
.why-panel-cycle.focused .why-panel-cycle-item:nth-child(-n + 2) {
  align-self: end;
}
.why-panel-cycle.focused .why-panel-cycle-item {
  animation: none;
  height: var(--why-tile-collapsed);
  min-height: 0;
  padding: 14px;
  gap: 4px;
  justify-content: flex-start;
  transition: height 0.72s cubic-bezier(0.65, 0, 0.35, 1),
              padding 0.72s cubic-bezier(0.65, 0, 0.35, 1),
              gap 0.72s cubic-bezier(0.65, 0, 0.35, 1),
              transform 0.72s cubic-bezier(0.65, 0, 0.35, 1),
              border-color 0.18s ease,
              box-shadow 0.18s ease;
}
.why-panel-cycle.resolved:not(.focused) .why-panel-cycle-item {
  height: var(--why-tile-open);
  min-height: 0;
}
.why-panel-cycle.focused .why-panel-cycle-desc {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  pointer-events: none;
}
/* Keep the visual where it belongs. The card condenses because the
   description leaves, not because the illustration is relocated. */
.why-panel-cycle.focused .why-panel-cycle-viz {
  min-height: 62px;
  margin-top: 10px;
}
.why-panel-cycle.focused .why-panel-cycle-viz svg {
  transform: scale(1);
}

/* Desktop bottom-row hover/spotlight (original behaviour for
   tiles 3 and 4): reserve/release page-flow space via
   padding-bottom on the cycle. The IN and OUT transitions both
   use the same 0.72s curve as the tile's own height transition,
   so when the spotlight ends the prose row above doesn't rise
   faster than the tile shrinks — they move in lockstep. */
@media (min-width: 721px) {
  .why-panel-cycle.focused {
    padding-bottom: 0;
    transition: padding-bottom 0.72s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .why-panel-cycle.focused:has(.why-panel-cycle-item:nth-child(n + 3):is(:hover, :focus, :focus-within, .is-spotlighted)) {
    padding-bottom: 76px;
    transition: padding-bottom 0.72s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .why-panel-cycle.focused .why-panel-cycle-track:has(.why-panel-cycle-item:nth-child(n + 3):is(:hover, :focus, :focus-within, .is-spotlighted)) {
    grid-template-rows: repeat(2, var(--why-tile-collapsed));
  }
}

/* Hover — restore the description and shrink the viz back. Same
   easing, slightly faster clock (0.65s) so the reveal feels alert
   without losing its smoothness. The description reappears AFTER
   the viz starts shrinking (0.15s delay) so the layout has room
   to expand before the type lands. */
.why-panel-cycle.focused .why-panel-cycle-item:is(:hover, :focus, :focus-within, .is-spotlighted) {
  height: var(--why-tile-open);
  min-height: 0;
  padding: 18px 14px 16px;
  gap: 4px;
  justify-content: flex-start;
}
/* Both top and bottom rows now grow in their natural place — no
   upward transform on tiles 1/2 means the expansion pushes the
   bottom row (and content below the cycle) down instead of
   reaching up over the section subheading. */
.why-panel-cycle.focused .why-panel-cycle-item:nth-child(-n + 2):is(:hover, :focus, :focus-within, .is-spotlighted),
.why-panel-cycle.focused .why-panel-cycle-item:nth-child(n + 3):is(:hover, :focus, :focus-within, .is-spotlighted) {
  transform: none;
}
.why-panel-cycle.focused .why-panel-cycle-item:is(:hover, :focus, :focus-within, .is-spotlighted) .why-panel-cycle-desc {
  opacity: 1;
  max-height: 180px;
  margin-top: 4px;
  pointer-events: auto;
  transition: opacity 0.6s cubic-bezier(0.65, 0, 0.35, 1) 0.18s,
              max-height 0.65s cubic-bezier(0.65, 0, 0.35, 1) 0.1s,
              margin 0.65s cubic-bezier(0.65, 0, 0.35, 1) 0.1s;
}
.why-panel-cycle.focused .why-panel-cycle-item:is(:hover, :focus, :focus-within, .is-spotlighted) .why-panel-cycle-viz {
  min-height: 62px;
  margin-top: 10px;
  transition: min-height 0.65s cubic-bezier(0.65, 0, 0.35, 1),
              margin 0.65s cubic-bezier(0.65, 0, 0.35, 1);
}
.why-panel-cycle.focused .why-panel-cycle-item:is(:hover, :focus, :focus-within, .is-spotlighted) .why-panel-cycle-viz svg {
  transform: scale(1);
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}

@media (max-width: 720px) {
  .why-panel-cycle {
    --why-step-text-inset: 16px;
    --why-cycle-copy-align: 28px;
  }
  .why-panel-cycle-item { padding-left: 0; }
  .why-panel-cycle-title { font-size: 17px; }
  .why-panel-cycle-desc { font-size: 12.5px; }
  .why-panel-cycle-viz { min-height: 110px; }
  .why-panel-cycle.resolved .why-panel-cycle-track {
    grid-template-areas: "a" "b" "c" "d";
    grid-template-columns: 1fr;
    padding-left: 18px;
  }
  .why-panel-cycle.focused .why-panel-cycle-track {
    grid-template-rows: repeat(4, var(--why-tile-collapsed));
  }
  .why-panel-cycle.focused .why-panel-cycle-track:has(.why-panel-cycle-item:nth-child(1):is(:hover, :focus, :focus-within, .is-spotlighted)) {
    grid-template-rows: var(--why-tile-open) repeat(3, var(--why-tile-collapsed));
  }
  .why-panel-cycle.focused .why-panel-cycle-track:has(.why-panel-cycle-item:nth-child(2):is(:hover, :focus, :focus-within, .is-spotlighted)) {
    grid-template-rows: var(--why-tile-collapsed) var(--why-tile-open) repeat(2, var(--why-tile-collapsed));
  }
  .why-panel-cycle.focused .why-panel-cycle-track:has(.why-panel-cycle-item:nth-child(3):is(:hover, :focus, :focus-within, .is-spotlighted)) {
    grid-template-rows: repeat(2, var(--why-tile-collapsed)) var(--why-tile-open) var(--why-tile-collapsed);
  }
  .why-panel-cycle.focused .why-panel-cycle-track:has(.why-panel-cycle-item:nth-child(4):is(:hover, :focus, :focus-within, .is-spotlighted)) {
    grid-template-rows: repeat(3, var(--why-tile-collapsed)) var(--why-tile-open);
  }
  .why-panel-cycle.focused .why-panel-cycle-item:nth-child(-n + 2):is(:hover, :focus, :focus-within, .is-spotlighted) {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .why-panel { animation: none; opacity: 1; transform: none; }
  .why-panel-cycle.playing .why-panel-cycle-item,
  .why-panel-cycle.resolved .why-panel-cycle-item { animation: none; }
  /* In reduced-motion mode, skip the cycle entirely and show all
     four panels straight away in the resolved grid. */
  .why-panel-cycle .why-panel-cycle-item {
    opacity: 1;
    transform: none;
  }
}

/* Legacy .why-stage rules below are no longer used (the stage was
   replaced by .why-panel above). Kept short to avoid breaking any
   stale cached references. */
.why-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Ambient background — sits absolutely behind the cards; the
   questions are barely-there atmosphere, not content. */
.why-stage-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.why-bg-q {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--size, 16px);
  letter-spacing: -0.012em;
  white-space: nowrap;
  color: var(--text-3);
  transform: rotate(var(--rot, 0deg));
  opacity: 0;
  animation: why-bg-pulse var(--dur, 7s) infinite cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-delay: var(--delay, 0s);
}
@keyframes why-bg-pulse {
  0%   { opacity: 0; transform: rotate(var(--rot, 0deg)) translateY(6px); }
  18%  { opacity: 0.32; transform: rotate(var(--rot, 0deg)) translateY(0); }
  58%  { opacity: 0.32; transform: rotate(var(--rot, 0deg)) translateY(0); }
  78%  { opacity: 0; transform: rotate(var(--rot, 0deg)) translateY(-6px); }
  100% { opacity: 0; transform: rotate(var(--rot, 0deg)) translateY(-6px); }
}

/* Three foreground cards — same principle-tile chrome the user
   originally approved (top tone stripe, hairline border, surface,
   subtle shadow, viz block at the bottom). Tightened vertical
   metrics so all three cards plus the section header fit in a
   single viewport. */
.why-cards {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
.why-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 18px 12px;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
  /* Fade-up entrance — each card defers by --reveal-delay so they
     enter in sequence (set per-card via inline style). */
  opacity: 0;
  transform: translateY(14px);
  animation: why-card-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: var(--reveal-delay, 0s);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
@keyframes why-card-rise {
  to { opacity: 1; transform: translateY(0); }
}
.why-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--cat-core);
}
.why-card[data-tone="blue"]::before   { background: var(--cat-core); }
.why-card[data-tone="purple"]::before { background: var(--cat-breadth-arts); }
.why-card[data-tone="orange"]::before { background: var(--cat-crim-options); }
.why-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-3);
  transform: translateY(-2px);
}

.why-card-label {
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 1;
}
.why-card h3 {
  font-family: var(--font);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.016em;
  line-height: 1.2;
  color: var(--ink);
  margin: 4px 0 0;
}
.why-card h3 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cat-core);
}
.why-card[data-tone="blue"]   h3 em { color: var(--cat-core); }
.why-card[data-tone="purple"] h3 em { color: var(--cat-breadth-arts); }
.why-card[data-tone="orange"] h3 em { color: var(--cat-crim-options); }
.why-card p {
  font-family: var(--font);
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.5;
  margin: 2px 0 0;
}
/* Viz block redesigned — no more awkward wide gray rectangle with
   a tiny visual centered inside it. The SVG now sits directly on
   the card surface, sized small and aligned to the right like a
   subtle accent / brand mark for each scenario. */
.why-card-viz {
  margin-top: 4px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: transparent;
  border: 0;
  min-height: 0;
  padding: 0;
  overflow: visible;
}
.why-card-viz svg {
  width: auto;
  height: 26px;
  display: block;
}
.why-card-viz svg .pv-soft        { stroke: var(--border-strong); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.why-card-viz svg .pv-soft-fill   { fill: var(--border-strong); }
.why-card-viz svg .pv-faint       { stroke: var(--border); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.why-card-viz svg .pv-tone        { fill: var(--cat-core); }
.why-card-viz svg .pv-tone-stroke { stroke: var(--cat-core); fill: none; }
.why-card[data-tone="blue"]   .pv-tone        { fill: var(--cat-core); }
.why-card[data-tone="blue"]   .pv-tone-stroke { stroke: var(--cat-core); }
.why-card[data-tone="purple"] .pv-tone        { fill: var(--cat-breadth-arts); }
.why-card[data-tone="purple"] .pv-tone-stroke { stroke: var(--cat-breadth-arts); }
.why-card[data-tone="orange"] .pv-tone        { fill: var(--cat-crim-options); }
.why-card[data-tone="orange"] .pv-tone-stroke { stroke: var(--cat-crim-options); }

@media (prefers-reduced-motion: reduce) {
  .why-card { animation: none; opacity: 1; transform: none; }
  .why-bg-q { animation: none; opacity: 0.3; transform: rotate(var(--rot, 0deg)); }
}
/* The connector line sits behind the markers; runs from the center
   of the first marker to the center of the last. */
.why-journey::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 36px;
  bottom: 36px;
  width: 1px;
  background: var(--border-strong);
  pointer-events: none;
}

.why-step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px;
  gap: 16px;
  padding: 18px 0 22px;
  border-bottom: 1px dashed var(--border);
  transition: opacity .15s ease;
}
.why-step:last-child { border-bottom: 0; padding-bottom: 6px; }

/* Numbered marker — circle sits in the negative-padding area to the
   left of the body, overlapping the connector line. */
.why-step-marker {
  position: absolute;
  left: -30px;
  top: 18px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--cat-core);
  z-index: 1;
  transition: background .15s, transform .15s;
}
.why-step-num {
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--cat-core);
}
.why-step[data-tone="blue"]   .why-step-marker { border-color: var(--cat-core); }
.why-step[data-tone="blue"]   .why-step-num    { color: var(--cat-core); }
.why-step[data-tone="purple"] .why-step-marker { border-color: var(--cat-breadth-arts); }
.why-step[data-tone="purple"] .why-step-num    { color: var(--cat-breadth-arts); }
.why-step[data-tone="orange"] .why-step-marker { border-color: var(--cat-crim-options); }
.why-step[data-tone="orange"] .why-step-num    { color: var(--cat-crim-options); }

.why-step:hover .why-step-marker {
  transform: scale(1.05);
}
.why-step[data-tone="blue"]:hover   .why-step-marker { background: color-mix(in srgb, var(--cat-core) 8%, var(--surface)); }
.why-step[data-tone="purple"]:hover .why-step-marker { background: color-mix(in srgb, var(--cat-breadth-arts) 8%, var(--surface)); }
.why-step[data-tone="orange"]:hover .why-step-marker { background: color-mix(in srgb, var(--cat-crim-options) 8%, var(--surface)); }

.why-step-body {
  min-width: 0;
}
.why-step-label {
  font-family: var(--font);
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 1;
  margin-bottom: 8px;
}
.why-step-title {
  font-family: var(--font);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.22;
  color: var(--ink);
  margin: 0;
}
.why-step-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
}
.why-step[data-tone="blue"]   .why-step-title em { color: var(--cat-core); }
.why-step[data-tone="purple"] .why-step-title em { color: var(--cat-breadth-arts); }
.why-step[data-tone="orange"] .why-step-title em { color: var(--cat-crim-options); }

.why-step-desc {
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
  margin: 8px 0 0;
}

/* Inline illustration on the right of each station — smaller than
   the previous card-style viz, decorative rather than a full block.
   No background; sits on the page surface so the journey reads
   open and airy. */
.why-step-viz {
  align-self: center;
  width: 78px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.why-step-viz svg {
  width: 100%;
  height: 100%;
  display: block;
}
.why-step-viz svg .pv-soft        { stroke: var(--border-strong); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.why-step-viz svg .pv-soft-fill   { fill: var(--border-strong); }
.why-step-viz svg .pv-faint       { stroke: var(--border); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.why-step-viz svg .pv-tone        { fill: var(--cat-core); }
.why-step-viz svg .pv-tone-stroke { stroke: var(--cat-core); fill: none; }
.why-step[data-tone="blue"]   .pv-tone        { fill: var(--cat-core); }
.why-step[data-tone="blue"]   .pv-tone-stroke { stroke: var(--cat-core); }
.why-step[data-tone="purple"] .pv-tone        { fill: var(--cat-breadth-arts); }
.why-step[data-tone="purple"] .pv-tone-stroke { stroke: var(--cat-breadth-arts); }
.why-step[data-tone="orange"] .pv-tone        { fill: var(--cat-crim-options); }
.why-step[data-tone="orange"] .pv-tone-stroke { stroke: var(--cat-crim-options); }

@media (max-width: 880px) {
  .why-step { grid-template-columns: 1fr; }
  .why-step-viz { display: none; }
}

/* WHY THIS MATTERS — full-width horizontal panel beneath the why-grid.
   Outer surface stays white per the user's request; six stat-cards are
   arranged in two grouped rows separated by a horizontal-rule divider with
   its own label. */
/* Section-head-style heading area, OUTSIDE the white panel, following the
   site convention of separating the heading from the data container.
   Top margin matches the breathing room between major in-section blocks. */
.why-matters-head {
  margin: 64px auto 28px;
  max-width: 760px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.why-matters-section .why-matters-head {
  margin-top: 0;
}
.why-matters-head .kicker {
  margin-bottom: 0;
}
.why-matters-head h3 {
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.why-matters-head p {
  text-align: center;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0;
  max-width: 760px;
}
/* Rotating two-segment subhead. Both segments stack into the same
   grid cell (so the container sizes to the taller one) and fade in
   and out in alternating sequence — first segment displays for ~6s,
   then cross-fades into the second segment for another ~6s, repeats. */
.why-matters-head-rotator {
  display: grid;
  grid-template-areas: "stack";
  width: 100%;
  max-width: 760px;
}
.why-matters-head-rotator .seg {
  grid-area: stack;
  margin: 0;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-2);
  opacity: 0;
  animation: wm-subhead-cycle 14s ease-in-out infinite both;
}
.why-matters-head-rotator .seg-1 { animation-delay: 0s; }
.why-matters-head-rotator .seg-2 { animation-delay: 7s; }
@keyframes wm-subhead-cycle {
  0%   { opacity: 0; transform: translateY(5px); }
  5%   { opacity: 1; transform: translateY(0); }
  45%  { opacity: 1; transform: translateY(0); }
  50%  { opacity: 0; transform: translateY(-5px); }
  100% { opacity: 0; transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .why-matters-head-rotator .seg { animation: none; opacity: 1; }
  .why-matters-head-rotator .seg-2 { display: none; }
}

/* Full-bleed band: breaks out of .section's max-width so the surface
   reaches the left and right edges of the main content column. The
   negative margins use 50% of the parent + half the rail width so the
   element re-centers around the viewport (minus the sticky rail). */
.why-matters {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  box-shadow: var(--shadow-1);
  padding: 0;
  margin-top: 0;
  margin-left: calc(50% - 50vw + var(--rail-w) / 2);
  margin-right: calc(50% - 50vw + var(--rail-w) / 2);
}
.why-matters-data {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 28px var(--gutter);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.why-matters-headers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.why-matters-divider {
  display: flex;
  align-items: center;
  gap: 12px;
}
.why-matters-divider::before,
.why-matters-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.why-matters-divider-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  padding: 0 4px;
  white-space: nowrap;
}
.why-matters-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
/* Compact stat-card scale for the six-across layout */
.why-matters-stats .stat-card {
  padding: 13px 14px;
  gap: 6px;
}
.why-matters-stats .stat-card .stat-head {
  gap: 4px;
  flex-wrap: wrap;
}
.why-matters-stats .stat-card .kicker-sm {
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: var(--ink);
  font-weight: 600;
}
.why-matters-stats .stat-card .chip {
  font-size: 9.5px;
  padding: 1px 6px;
}
.why-matters-stats .stat-card .stat-num {
  font-size: 26px;
  margin-top: 2px;
}
.why-matters-stats .stat-card .stat-unit {
  font-size: 13px;
  margin-left: 1px;
}
.why-matters-stats .stat-card .stat-desc {
  font-size: 11.5px;
  line-height: 1.4;
}
.why-matters-stats .stat-card .stat-bar {
  height: 5px;
}
/* Sharp solid colour per card, matching the GPA Monitor palette */
/* Stat-num adopts the bar tone; stat-unit (M, %, $) stays neutral grey */
.why-matters-stats .stat-card[data-tone="orange"]  .stat-num { color: var(--orange); }
.why-matters-stats .stat-card[data-tone="blue"]    .stat-num { color: var(--blue); }
.why-matters-stats .stat-card[data-tone="purple"]  .stat-num { color: var(--purple); }
.why-matters-stats .stat-card[data-tone="green"]   .stat-num { color: var(--green); }
.why-matters-stats .stat-card[data-tone="red"]     .stat-num { color: var(--red); }
.why-matters-stats .stat-card[data-tone="teal"]    .stat-num { color: var(--teal); }
/* Extra tones sourced from the Connection Degree Map category palette */
.why-matters-stats .stat-card[data-tone="magenta"] .stat-num { color: var(--cat-advanced-options); }
.why-matters-stats .stat-card[data-tone="lime"]    .stat-num { color: var(--cat-nonsocial); }
.why-matters-stats .stat-card[data-tone="indigo"]  .stat-num { color: var(--cat-als); }
.why-matters-stats .stat-card[data-tone="crimson"] .stat-num { color: var(--cat-nonsociology); }
.why-matters-stats .stat-card[data-tone="navy"]    .stat-num { color: var(--cat-foundation); }
.why-matters-stats .stat-card[data-tone="cyan"]    .stat-num { color: var(--cat-breadth-sci); }
.why-matters-stats .stat-card .stat-unit { color: var(--text-2); }
/* Research CTA inside the white why-matters container — borrows the
   same divider treatment as the section headings: horizontal lines on
   either side, italic text in the middle, no border (so it does not
   form a rectangle). Hovering applies only a subtle coloured glow to
   the text + arrow — the lines stay neutral, no container forms. */
.why-matters-explore {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.why-matters-explore::before,
.why-matters-explore::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.why-matters-explore-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 2px 4px;
  font-size: 13px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  white-space: nowrap;
  transition: color .25s ease, text-shadow .25s ease;
}
.why-matters-explore-link svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s ease, filter .25s ease;
}
/* Subtle coloured-blur highlight: the text picks up the indigo accent
   from the Clarity tile (same family as the "Application" chip) and
   emits a soft glow; the arrow icon picks up the same glow and nudges
   forward slightly. The divider lines stay grey. */
.why-matters-explore:hover .why-matters-explore-link,
.why-matters-explore:focus-within .why-matters-explore-link {
  color: var(--cat-als);
  text-shadow: 0 0 12px color-mix(in srgb, var(--cat-als) 55%, transparent);
}
.why-matters-explore:hover .why-matters-explore-link svg,
.why-matters-explore:focus-within .why-matters-explore-link svg {
  transform: translateX(3px);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--cat-als) 50%, transparent));
}
@media (prefers-reduced-motion: reduce) {
  .why-matters-explore-link,
  .why-matters-explore-link svg { transition: none; }
  .why-matters-explore:hover .why-matters-explore-link svg,
  .why-matters-explore:focus-within .why-matters-explore-link svg { transform: none; }
}

/* Single-column divider header — full-width row above all six cards. The
   label sits dead-center over the grid (between cards 3 and 4) with
   equally-sized divider lines on either side. */
.why-matters-headers.why-matters-headers--single {
  display: flex;
  grid-template-columns: none;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.why-matters-headers.why-matters-headers--single .why-matters-divider {
  flex: 1 1 100%;
  width: 100%;
  justify-content: center;
}
.why-matters-headers.why-matters-headers--single .why-matters-divider-label {
  white-space: normal;
  max-width: 620px;
  text-align: center;
  padding: 0 16px;
  flex: 0 0 auto;
}
@media (max-width: 1100px) {
  .why-matters-stats { grid-template-columns: repeat(3, 1fr); }
  .why-matters-headers { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 720px) {
  .why-matters-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .why-matters-stats { grid-template-columns: 1fr; }
  .why-matters-data { padding: 22px var(--gutter); }
}

/* Narrative is one continuous editorial piece, read top-to-bottom.
   No nested boxes — typography alone carries the hierarchy:
     1. small kicker        (orient the reader)
     2. lead paragraph      (the personal opening, large italic serif)
     3. bridge sentence     (lighter, sets up the question)
     4. hero quote          (the question itself, biggest type, red rule)
     5. answer paragraph    (resolves the question)
     6. footer disclaimer   (small, muted, with shield icon)
   The block is right-aligned to the column gutter and held together by
   a single vertical rail on the left so the eye tracks the reading order
   without anything feeling "packaged". */
/* LEFT-side narrative — cleaner version. Single vertical flow with
   only the essential beats: a small uppercase label, the hero
   question as an italic-serif pull quote, the CONNECT answer in
   plain prose, and a soft disclaimer row at the bottom. No heavy
   left rail, no oversized quote glyph, no red side-rule — the
   typography itself carries the hierarchy. */
/* Single editorial flow on the left side. Tighter base gap so
   sibling sections sit in a clear rhythm (eyebrow + content,
   eyebrow + content, body) rather than equidistant from each
   other like an unrelated list. Kickers get a little more breath
   above them via margin-top so they read as section openers, not
   afterthoughts. */
.why-narrative {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--ink);
  padding-top: 4px;
}
/* Segway intro — one paragraph that opens the left column.
   Three highlighter accents pick up three different colours from
   the 12-colour degree-map palette so the rhythm reads as variety
   rather than a single repeated key. */
.why-narr-intro {
  margin: 0 0 6px;
  max-width: 62ch;
  font-size: 16.5px;
  line-height: 1.65;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: pretty;
}
/* Marker-style highlighter behind each em — same sans body face,
   weight 600, ink-coloured text; only the backing stripe colour
   changes between the three accents. Each em pulls its own
   colour-mix via a CSS variable so the same gradient template
   handles all three. */
.why-narr-intro em {
  font-family: inherit;
  font-style: normal;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0;
  background: linear-gradient(
    180deg,
    transparent 0,
    transparent 62%,
    color-mix(in srgb, var(--intro-mark, var(--cat-theory)) 26%, transparent) 62%,
    color-mix(in srgb, var(--intro-mark, var(--cat-theory)) 26%, transparent) 96%,
    transparent 96%
  );
  padding: 0 2px;
  border-radius: 1px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* Three distinct marker colours from the 12-colour palette —
   green (theory), magenta (advanced-options), orange
   (crim-options). The three "options" inside the body now read as
   three independent choices instead of one repeated emphasis. */
.why-narr-intro em:nth-of-type(1) { --intro-mark: var(--cat-theory); }
.why-narr-intro em:nth-of-type(2) { --intro-mark: var(--cat-advanced-options); }
.why-narr-intro em:nth-of-type(3) { --intro-mark: var(--cat-crim-options); }
.why-narr-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 1;
  margin-bottom: -10px; /* pull next item closer to the kicker */
}
.why-narr-kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
/* --no-line variant: drop the trailing hairline entirely. */
.why-narr-kicker--no-line::after {
  display: none;
}
.why-narr-quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.why-narr-quote em {
  font-style: italic;
  color: var(--cat-core);
}

/* Spotlight block — the dramatic "What happens to the credits I
   already earned?" feature. Sits flush with the intro paragraph
   above; no rail, no extra padding — just a spinning flower beside
   a small kicker, then the oversized italic question on the next
   line. Typography carries the weight, not chrome. */
.why-narr-spotlight {
  margin: 6px 0;
  padding: 0;
}
.why-narr-spotlight-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.why-narr-spotlight-flower {
  width: 22px;
  height: 22px;
}
.why-narr-spotlight-kicker {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 1;
}
.why-narr-spotlight-quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(44px, 5.4vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin: 0;
  padding: 0;
  text-wrap: balance;
}
.why-narr-spotlight-quote em {
  font-style: italic;
  /* --cat-foundation is the Social Science Skills key in the
     degree-map palette — a deepened ink-mixed core that reads as
     emphasis without falling back to the bright core blue. */
  color: var(--cat-foundation);
  position: relative;
}
/* A subtle hand-drawn underline under the colour accent — visually
   answers the "earned?" question with a small flourish. */
.why-narr-spotlight-quote em::after {
  content: "";
  position: absolute;
  left: 2%;
  right: 6%;
  bottom: 0.06em;
  height: 0.12em;
  background: color-mix(in srgb, var(--cat-foundation) 32%, transparent);
  border-radius: 2px;
  z-index: -1;
}
/* Body prose — two static paragraphs as plain editorial copy (no
   card, no border, no shadow). A single hairline divider sits in the
   negative space above the prose to visually break it from the
   rotating-question block; margin/padding are balanced so the divider
   reads as centred between the two regions. */
.why-narr-prose {
  /* Plain stacked prose — sits in row 2 of .why-grid alongside the
     closing CONNECT prose. Both fade in together when the panel
     cycle resolves into the 2x2 grid, so the closing-thought row
     appears as one coordinated beat rather than one side hanging
     alone during the cycling phase. */
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 62ch;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 700ms ease 300ms, transform 700ms ease 300ms;
  will-change: opacity, transform;
}
.why-grid:has(.why-panel-cycle.resolved) .why-narr-prose {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.why-narr-prose em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  /* --cat-nonsociology = deep red, matches the "burdensome" pain
     point on the right column (separate from the spotlight quote's
     --cat-upper red so the two reds remain distinct). */
  color: var(--cat-nonsociology);
}
/* Lede line — a serif phrase set a step up in size. Italic accents
   (em) carry the colour key. */
.why-narr-prose-lede {
  margin: 0;
  font-family: var(--serif);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.014em;
  color: var(--ink);
  text-wrap: balance;
}
/* Main body line — quieter, lower contrast than the lede. */
.why-narr-prose-body {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  letter-spacing: -0.003em;
  color: var(--ink-soft);
  max-width: 56ch;
}
/* In-line highlight on the body — bolder ink accent referencing
   the body's most important phrase. */
.why-narr-prose-mark {
  color: var(--ink);
  font-weight: 600;
}
/* RIGHT-side closing prose — sits in column 2 of row 2 in
   .why-grid, sharing the same row as .why-narr-prose so their
   tops auto-align regardless of viewport width. Hidden during the
   cycling phase; fades in once the tiles resolve into the 2x2 grid. */
.why-panel-prose {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  max-width: 62ch;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 700ms ease 300ms, transform 700ms ease 300ms;
  will-change: opacity, transform;
}
.why-panel-prose p {
  margin: 0;
}
.why-panel-prose .why-narr-prose-lede em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  /* --cat-breadth-sci = teal — distinct from the right column's
     --cat-nonsociology red, and unrelated to the blue everything
     used to rely on. */
  color: var(--cat-breadth-sci);
}
/* Show when the panel-cycle has resolved. :has() lets us key off
   a nested element since the panel-prose is no longer adjacent
   to .why-panel-cycle. */
.why-grid:has(.why-panel-cycle.resolved) .why-panel-prose {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Respect reduced-motion: skip the slide, keep the fade. */
@media (prefers-reduced-motion: reduce) {
  .why-panel-prose {
    transition: opacity 400ms ease;
    transform: none !important;
  }
}

/* Right-panel cycle sits at the top of its column — there is no
   longer a summary lede above it. The small top offset matches the
   .why-narrative padding-top so the cycle's first card aligns with
   the segway intro on the left column. */
.why-panel .why-panel-cycle {
  margin-top: 4px;
}
/* Follow-up questions — a clean two-column italic list, replacing the
   rapid cloud cycler. All ten questions are visible at once so the
   reader can scan them. */
.why-narr-followups {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.why-narr-qlist {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 28px;
  row-gap: 8px;
}
.why-narr-qlist li {
  position: relative;
  padding-left: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-2);
}
.why-narr-qlist li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--cat-core);
  opacity: 0.6;
}
@media (max-width: 700px) {
  .why-narr-qlist { grid-template-columns: 1fr; }
}

/* Rapid question rotator — quick follow-up questions, sized
   intentionally below the hero pull quote so the typographic
   hierarchy reads quote → questions → body rather than two
   competing serif lines at the same scale. */
.why-rapid-cloud {
  display: grid;
  grid-template-areas: "stack";
  margin: 4px 0 8px;
  min-height: 42px;
  pointer-events: none;
}
.why-rapid-q {
  grid-area: stack;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.014em;
  color: var(--text-2);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  animation: why-rapid-cycle 6s infinite cubic-bezier(0.22, 0.61, 0.36, 1);
}
.why-rapid-q::before {
  content: "\201C";
  font-style: normal;
  margin-right: 2px;
  opacity: 0.45;
}
.why-rapid-q::after {
  content: "\201D";
  font-style: normal;
  margin-left: 2px;
  opacity: 0.45;
}
/* 10 questions x 0.6s = 6s total cycle. */
.why-rapid-q:nth-child(1)  { animation-delay: 0s;    }
.why-rapid-q:nth-child(2)  { animation-delay: 0.6s;  }
.why-rapid-q:nth-child(3)  { animation-delay: 1.2s;  }
.why-rapid-q:nth-child(4)  { animation-delay: 1.8s;  }
.why-rapid-q:nth-child(5)  { animation-delay: 2.4s;  }
.why-rapid-q:nth-child(6)  { animation-delay: 3.0s;  }
.why-rapid-q:nth-child(7)  { animation-delay: 3.6s;  }
.why-rapid-q:nth-child(8)  { animation-delay: 4.2s;  }
.why-rapid-q:nth-child(9)  { animation-delay: 4.8s;  }
.why-rapid-q:nth-child(10) { animation-delay: 5.4s;  }
@keyframes why-rapid-cycle {
  0%   { opacity: 0; transform: translateY(8px); }
  1%   { opacity: 0.85; transform: translateY(0); }
  9.4% { opacity: 0.85; transform: translateY(0); }
  10%  { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 0; transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .why-rapid-q { animation: none; }
  .why-rapid-q:first-child { opacity: 0.85; transform: translateY(0); }
}
/* CONNECT prose — three paragraphs cycling in the same slot, no
   marginalia. Earlier passes had a dot + vertical-line decoration
   on the left edge that made this block read like a sidebar quote
   instead of flowing editorial body; that's been removed so the
   prose lives at the same alignment as the eyebrow, the pull
   quote, and the rotating questions above it. The blur on the
   fade transition was also pulled — opacity + a small vertical
   translate carries the swap on its own and reads cleaner. */
.why-connect-fade {
  display: grid;
  grid-template-areas: "stack";
  min-height: 178px;
  max-width: 62ch;
  margin-top: 12px;
  padding: 16px 0 0;
  border-top: 1px solid var(--border);
}
.why-connect-fade-item {
  grid-area: stack;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--text-2);
  opacity: 0;
  transform: translateY(10px);
  animation: why-connect-fade 33s infinite cubic-bezier(0.22, 0.61, 0.36, 1);
}
.why-connect-fade-item em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cat-core);
}
.why-connect-fade-item:nth-child(1) { animation-delay: 0s; }
.why-connect-fade-item:nth-child(2) { animation-delay: 11s; }
.why-connect-fade-item:nth-child(3) { animation-delay: 22s; }
@keyframes why-connect-fade {
  0%   { opacity: 0; transform: translateY(10px); }
  4%   { opacity: 1; transform: translateY(0); }
  27%  { opacity: 1; transform: translateY(0); }
  33%  { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 0; transform: translateY(10px); }
}
@media (prefers-reduced-motion: reduce) {
  .why-connect-fade { display: block; min-height: 0; }
  .why-connect-fade-item {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .why-connect-fade-item + .why-connect-fade-item { margin-top: 14px; }
}
/* CTAs at the bottom of the left narrative — same .btn shapes
   the hero uses (.btn-primary + .btn-ghost in the .btn-lg size),
   so the section visually loops back to the top of the page. */
.why-narr-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 0;
}

/* Stat callout — italic-serif percentage + short editorial line.
   Echoes the typographic treatment used on the .stat-card numbers
   elsewhere on the site. Fills the vertical column with a concrete
   data point that grounds the emotion above. */
.why-narr-stat {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 6px 0 0;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}
.why-narr-stat-num {
  flex: 0 0 auto;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(36px, 4vw, 48px);
  line-height: 1;
  letter-spacing: -0.022em;
  color: var(--cat-core);
}
.why-narr-stat-num i {
  font-size: 0.55em;
  font-style: italic;
  margin-left: 2px;
  color: var(--cat-core);
}
.why-narr-stat-text {
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.55;
}

.why-narr-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 0;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.why-narr-foot-icon {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--cat-foundation);
}
.why-narr-foot p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-2);
}

@media (max-width: 880px) {
  .why-grid { grid-template-columns: 1fr; gap: 24px; }
}

.why-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Three question cards — built to match the modules grid:
   sharp solid colours, white surface, thin border, mini-UI visual.
   Stacked vertically inside the narrower right-side column. */
.why-questions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.why-q-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-1);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  align-items: start;
  gap: 18px;
  transition: border-color .15s, box-shadow .15s;
}
/* Right column of each card: chip pinned to the top (aligned with the
   name+dot label across the gap) and the mini-UI visual pushed to the
   bottom so it sits flush with the last line of the description. */
.why-q-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  min-width: 0;
  height: 100%;
}
.why-q-side > .chip {
  align-self: flex-end;
}
.why-q-side > .mini-ui {
  margin-top: auto;
  align-self: stretch;
  min-height: 92px;
  padding: 14px 12px;
}
.why-q-side > .mini-rows { gap: 9px; }
.why-q-side > .mini-rows .mr { height: 8px; }
.why-q-side > .mini-program { gap: 7px; }
.why-q-side > .mini-program .mp-cell { height: 12px; }
.why-q-side > .mini-chat { gap: 9px; }
.why-q-side > .mini-chat .msg { height: 11px; }
.why-q-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-3);
}
.why-q-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.why-q-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.why-q-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.why-q-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
  margin: 4px 0 0;
}
.why-q-desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-2);
  margin: 0;
}

/* Scope problem-cost + problem-evidence overrides for the narrower sidebar */
.why-side .problem-cost {
  grid-template-columns: 1fr;
  gap: 18px;
}
.why-side .problem-cost-stats {
  grid-template-columns: repeat(3, 1fr);
}
.why-side .problem-evidence-grid {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1100px) {
  .why-grid { grid-template-columns: 1fr; gap: 24px; }
  .why-q-card { grid-template-columns: minmax(0, 1fr) 100px; }
  /* Single-column collapse — the kicker no longer needs to span past
     its column, so reset the width back to 100%. */
  .why-narr-kicker--full { width: 100%; }
}
@media (max-width: 720px) {
  .why-q-card { grid-template-columns: 1fr; gap: 10px; }
  .why-q-card > .mini-ui { align-self: stretch; }
  .why-side .problem-cost-stats { grid-template-columns: 1fr; }
  .why-side .problem-evidence-grid { grid-template-columns: 1fr; }
}

.problem-cost {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  padding: 24px 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 28px;
  align-items: center;
}
.problem-cost-copy { min-width: 0; }
.problem-cost-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 10px;
}
.problem-cost-copy h3 {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: 0;
}
.problem-cost-copy p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
  margin: 10px 0 0;
}
.problem-cost-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.problem-cost-stats article {
  background: var(--surface-2);
  border: 1px solid var(--border-dim);
  border-radius: var(--r-sm);
  padding: 14px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.problem-cost-stats strong {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.01em;
}
.problem-cost-stats article[data-tone="blue"] strong   { color: var(--blue); }
.problem-cost-stats article[data-tone="orange"] strong { color: var(--orange); }
.problem-cost-stats article[data-tone="red"] strong    { color: var(--red); }
.problem-cost-bar {
  display: block;
  height: 5px;
  width: 100%;
  background: var(--surface-3);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-top: auto;
}
.problem-cost-bar .bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.problem-cost-unit {
  font-family: var(--font);
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  margin-left: 1px;
  letter-spacing: 0;
}
.problem-cost-stats p {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink);
}

.problem-evidence {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.problem-evidence summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background .12s;
}
.problem-evidence summary:hover { background: var(--surface-2); }
.problem-evidence summary::-webkit-details-marker { display: none; }
.problem-evidence-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.problem-evidence-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--ink);
  transition: transform .2s;
}
.problem-evidence[open] .problem-evidence-icon { transform: rotate(180deg); }
.problem-evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 4px 22px 22px;
  border-top: 1px solid var(--border-dim);
}
.problem-evidence-grid article {
  background: var(--surface-2);
  border: 1px solid var(--border-dim);
  border-radius: var(--r-sm);
  padding: 12px 14px;
}
.problem-evidence-grid strong {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  color: var(--ink);
  line-height: 1;
}
.problem-evidence-grid p {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink);
}

@media (max-width: 1100px) {
  .problem-questions { grid-template-columns: 1fr; }
  .problem-cost { grid-template-columns: 1fr; gap: 20px; }
  .problem-evidence-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .problem-cost { padding: 20px; }
  .problem-cost-stats { grid-template-columns: 1fr; }
  .problem-evidence-grid { grid-template-columns: 1fr; padding: 4px 18px 18px; }
  .problem-evidence summary { padding: 14px 18px; }
}


/* ============================================================
   COMPARE PATHS — Two stacked horizontal-timeline panels.
   Top panel (Today) packs 10 colour-coded pins along a hairline
   track; bottom panel (CONNECT) places 4 large icon pins along a
   solid track. The visual contrast IS the comparison — density
   of stops vs spacing of stages.
   ============================================================ */
.journey-board {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.journey-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: 20px 28px 30px;
  overflow: hidden;
}
.journey-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-dim);
  margin-bottom: 44px;
}
.journey-head-id {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.journey-head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.journey-head-kicker {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}
.journey-head-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.journey-head-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Track + nodes */
.journey-track {
  position: relative;
  padding: 0 12px;
}
.journey-track-big {
  padding: 0 24px;
}
.journey-line {
  position: absolute;
  top: 50%;
  left: 12px;
  right: 12px;
  height: 1px;
  background: var(--border-strong);
  transform: translateY(-50%);
}
.journey-track-big .journey-line {
  left: 24px;
  right: 24px;
}
.journey-line.solid {
  height: 2px;
  background: var(--ink-soft);
}
.journey-nodes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.journey-nodes > li {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.jn-pin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-3);
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 2px var(--text-3);
  z-index: 1;
}
.journey-nodes > li[data-phase="discovery"] .jn-pin { background: var(--blue);   box-shadow: 0 0 0 2px var(--blue); }
.journey-nodes > li[data-phase="verify"] .jn-pin    { background: var(--orange); box-shadow: 0 0 0 2px var(--orange); }
.journey-nodes > li[data-phase="apply"] .jn-pin     { background: var(--purple); box-shadow: 0 0 0 2px var(--purple); }

.journey-nodes.big > li .jn-pin {
  width: 40px;
  height: 40px;
  background: var(--surface);
  border: 2px solid;
  box-shadow: 0 0 0 4px var(--surface);
  display: grid;
  place-items: center;
}
.journey-nodes.big > li[data-tone="blue"]   .jn-pin { color: var(--blue);   border-color: var(--blue); }
.journey-nodes.big > li[data-tone="purple"] .jn-pin { color: var(--purple); border-color: var(--purple); }
.journey-nodes.big > li[data-tone="orange"] .jn-pin { color: var(--orange); border-color: var(--orange); }
.journey-nodes.big > li[data-tone="green"]  .jn-pin { color: var(--green);  border-color: var(--green); }

.jn-step {
  font-family: var(--serif);
  font-style: italic;
  font-size: 11px;
  color: var(--text-2);
  position: absolute;
  top: -24px;
  white-space: nowrap;
}
.journey-nodes.big > li .jn-step {
  font-size: 11.5px;
  font-weight: 500;
  top: -28px;
}
.jn-label {
  font-size: 11px;
  color: var(--ink);
  text-align: center;
  position: absolute;
  top: 22px;
  width: 100%;
  max-width: 110px;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.jn-label-big {
  text-align: center;
  position: absolute;
  top: 50px;
  width: 100%;
  max-width: 160px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.jn-label-big strong {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

@media (max-width: 1000px) {
  .journey-track { padding: 0 6px; }
  .jn-label { max-width: 90px; font-size: 10.5px; }
}
@media (max-width: 720px) {
  .journey-panel { padding: 18px 18px 24px; }
  .journey-nodes,
  .journey-nodes.big {
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
  }
  .journey-line { display: none; }
  .journey-nodes > li,
  .journey-nodes.big > li {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
  }
  .jn-step {
    position: static;
    min-width: 50px;
  }
  .jn-label,
  .jn-label-big {
    position: static;
    width: auto;
    max-width: none;
    text-align: left;
  }
  .jn-label-big {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    flex: 1;
  }
}

/* ============================================================
   TRANSFER COMPARISON — visual side-by-side of TODAY vs CONNECT.

   Layout: two stages (.compare-side) split by a small vs marker.
   Each side has a label header + a fixed-height stage.

   The TODAY stage uses absolutely-positioned, slightly rotated UI
   fragments (.cs-piece) — browser tabs, an unread email, a marked
   academic-calendar PDF, a sticky note, a peek of a calendar — to
   convey the felt experience: many tools, scattered, but still readable.

   The CONNECT stage is a single clean app window (.cs-app) with
   four numbered step rows, a progress bar, and a short timer.

   Custom properties --x / --y / --rot place each TODAY fragment;
   if you want to tweak the composition, edit those inline.
   ============================================================ */

/* Section padding: keep the section's existing rhythm. */
.compare-section {
  padding-bottom: 24px;
  scroll-margin-top: clamp(60px, 5.8vh, 76px);
}

/* ============================================================
   COMPARISON TOGGLE — Today / With CONNECT.
   Two plain-text labels with a slash between, framed by thin
   horizontal rules on either side (same flanking-rule pattern
   used on the "Explore the research" link). Active label gets a
   thin tone-colored underline with a soft glow BELOW only — the
   glow lives on the underline (box-shadow), not on the text.
   ============================================================ */
.compare-toggle-wrap {
  display: flex;
  justify-content: center;
  margin: 0 auto 32px;
  padding: 0 16px;
}
.compare-toggle {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 580px;
}
.compare-toggle::before,
.compare-toggle::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
  border-radius: var(--r-pill);
  transition: box-shadow .3s ease;
}
/* Glow effect moves onto the flanking lines based on which option
   is active. Lines stay grey; only the colored halo changes. */
.compare-toggle:has(.compare-toggle-btn[data-tone="red"][aria-selected="true"])::before,
.compare-toggle:has(.compare-toggle-btn[data-tone="red"][aria-selected="true"])::after {
  box-shadow: 0 0 6px 0 color-mix(in srgb, var(--red) 35%, transparent);
}
.compare-toggle:has(.compare-toggle-btn[data-tone="green"][aria-selected="true"])::before,
.compare-toggle:has(.compare-toggle-btn[data-tone="green"][aria-selected="true"])::after {
  box-shadow: 0 0 6px 0 color-mix(in srgb, var(--cat-theory) 35%, transparent);
}
.compare-toggle-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px 0 10px;
  cursor: pointer;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  color: var(--text-3);
  letter-spacing: 0;
  position: relative;
  white-space: nowrap;
  transition: color .25s ease;
}
.compare-toggle-btn:hover { color: var(--ink-soft); }
.compare-toggle-btn:focus-visible {
  outline: 2px solid var(--cat-core);
  outline-offset: 2px;
  border-radius: 2px;
}
.compare-toggle-btn[aria-selected="true"] { color: var(--ink); }
/* Active underline + glow below. The glow is a box-shadow on the
   underline pseudo-element, so it sits BELOW the text only — the
   text itself stays clean (no text-shadow). */
.compare-toggle-btn[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2px;
  border-radius: var(--r-pill);
}
.compare-toggle-btn[data-tone="red"][aria-selected="true"]::after {
  background: var(--red);
}
.compare-toggle-btn[data-tone="green"][aria-selected="true"]::after {
  background: var(--cat-theory);
}
/* Slash between the two options. */
.compare-toggle-sep {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  font-size: 22px;
  color: var(--border-strong);
  line-height: 1;
  user-select: none;
}

/* ============================================================
   VIEW + PAIR — each tabpanel holds a two-column pair (left
   panel + right panel). Heads, stages, and panels share the
   same shell so the Today and CONNECT views are visually kin.
   ============================================================ */
.compare-view {
  display: block;
}
.compare-view[hidden] { display: none; }
.compare-pair {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.compare-side {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* Today view experiment: the visual process board and the phase list
   share one large white panel instead of reading as two separate cards. */
#cmp-view-today .compare-pair {
  gap: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  isolation: isolate;
}
#cmp-view-today .compare-pair::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  z-index: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-2);
}
#cmp-view-today .compare-side {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
#cmp-view-today .compare-today {
  position: relative;
  z-index: 2;
}
#cmp-view-today .compare-side-text {
  position: relative;
  z-index: 1;
  border-left: 1px solid var(--border);
}
#cmp-view-today .compare-stage {
  overflow: visible;
}
#cmp-view-today .compare-stage-list {
  background: transparent;
}
#cmp-view-today .compare-side-head {
  background: transparent;
  border-bottom: 0;
  position: relative;
}
#cmp-view-today .compare-side-head::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 1px;
  background: var(--border);
  pointer-events: none;
}
#cmp-view-today .compare-today .compare-side-head::after {
  left: calc(50% - 50vw);
  right: 0;
}
#cmp-view-today .compare-side-text .compare-side-head::after {
  left: 0;
  right: calc(50% - 50vw);
}

/* With CONNECT mirrors the Today panel treatment: the two halves
   read as one viewport-wide surface, with the inner gap removed and
   each side's content allowed to run into the outer page edges. */
#cmp-view-connect .compare-pair {
  gap: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  isolation: isolate;
}
#cmp-view-connect .compare-pair::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  z-index: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-2);
}
#cmp-view-connect .compare-side {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
#cmp-view-connect .compare-side-text {
  position: relative;
  z-index: 1;
}
#cmp-view-connect .compare-connect-visuals {
  position: relative;
  z-index: 2;
  border-left: 1px solid var(--border);
}
#cmp-view-connect .compare-stage {
  overflow: visible;
}
#cmp-view-connect .compare-stage-text,
#cmp-view-connect .compare-stage-visuals {
  background: transparent;
}
#cmp-view-connect .compare-side-head {
  background: transparent;
  border-bottom: 0;
  position: relative;
}
#cmp-view-connect .compare-side-head::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 1px;
  background: var(--border);
  pointer-events: none;
}
#cmp-view-connect .compare-side-text .compare-side-head::after {
  left: calc(50% - 50vw);
  right: 0;
}
#cmp-view-connect .compare-connect-visuals .compare-side-head::after {
  left: 0;
  right: calc(50% - 50vw);
}

/* Side header — a label with a coloured dot + summary chips.
   flex-wrap: wrap lets the chip cluster drop to its own line below
   the label when the header can't fit both side-by-side; the chips
   themselves stay together (flex-wrap: nowrap on the meta) so they
   never split across lines. */
.compare-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.compare-side-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.018em;
  color: var(--ink);
  white-space: nowrap;
}
.compare-side-label .dot {
  display: none;
}
.compare-side-meta {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 6px;
}


/* Shared stage frame. isolation:isolate forces a new stacking context
   so children with z-index:-1 (e.g., the 88.2% stat sitting behind
   the browser tabs / email) stay contained within the stage instead
   of going behind the panel's own surface background. */
.compare-stage {
  position: relative;
  flex: 1;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
}

/* ============================================================
   TODAY STAGE — paper-tone surface with organized UI fragments.
   Subtle radial tints in the corners hint at "stress / heat".
   A faint grid texture sells the "desk" feeling.
   ============================================================ */
.compare-stage-today {
  --cs-stat-width: 225px;
  background: transparent;
}
#cmp-view-today .compare-stage-today::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: 0;
  z-index: -3;
  background:
    radial-gradient(circle at 12% 12%, rgba(242,140,56,0.07), transparent 42%),
    radial-gradient(circle at 88% 86%, rgba(234,90,79,0.07), transparent 42%),
    repeating-linear-gradient(90deg, transparent 0 23px, color-mix(in srgb, var(--border) 35%, transparent) 23px 24px),
    repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in srgb, var(--border) 35%, transparent) 23px 24px),
    var(--surface-2);
}

/* Fragment — absolutely positioned, lightly rotated, drop-shadowed.
   Each child defines its own width via the specific .cs-* rule. */
.cs-piece {
  position: absolute;
  left: var(--x, 0);
  top:  var(--y, 0);
  transform: rotate(var(--rot, 0deg));
  transform-origin: center;
  filter: drop-shadow(0 6px 14px rgba(20,18,12,0.08));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  transition: border-color .15s ease, filter .25s ease, transform .25s ease;
}
/* Module-style hover lift — border deepens, shadow grows, the tile
   rises by 2px while preserving its existing rotation. The hovered
   piece is also promoted to the top of the stacking order so it sits
   above any overlapping siblings. */
.cs-piece:hover {
  border-color: var(--border-strong);
  filter: drop-shadow(0 14px 28px rgba(20,18,12,0.18));
  transform: rotate(var(--rot, 0deg)) translateY(-2px);
  z-index: 20;
}
.cs-piece-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -22px;
  z-index: 6;
  pointer-events: none;
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  text-shadow:
    0 1px 0 var(--surface-2),
    0 -1px 0 var(--surface-2),
    1px 0 0 var(--surface-2),
    -1px 0 0 var(--surface-2);
}

/* Generic short line — reused inside tabs body, email body, PDF body */
.cs-line {
  display: block;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--border-strong);
  opacity: 0.55;
}
.cs-line.short { width: 60%; }
.cs-line-hl {
  background: color-mix(in srgb, var(--orange) 55%, transparent);
  opacity: 0.85;
}

/* Browser-tab piece */
.cs-tabs {
  width: 305px;
  border-radius: 10px 10px 8px 8px;
  overflow: hidden;
  background: var(--surface);
  transform-origin: left center;
}
.cs-tabs-row {
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 6px 6px 0;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.cs-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px 7px;
  font-size: 10.5px;
  color: var(--text-2);
  background: color-mix(in srgb, var(--surface-2) 100%, var(--ink) 0%);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  white-space: nowrap;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-tab-on {
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  z-index: 2;
}
.cs-tab-fav {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
.cs-tab-overflow {
  background: transparent;
  border: 0;
  color: var(--text-3);
  padding-left: 6px;
  padding-right: 6px;
}
.cs-tabs-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.cs-tabs-url {
  flex: 1;
  height: 7px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
}
.cs-tabs-spin {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--orange);
  border-top-color: transparent;
  animation: csSpin 2.4s linear infinite;
}
@keyframes csSpin { to { transform: rotate(360deg); } }
.cs-tabs-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 12px 14px;
}

/* Email piece */
.cs-email {
  width: 272px;
  padding: 12px 13px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transform-origin: left center;
}
.cs-email-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  color: var(--text-3);
}
.cs-email-from { font-weight: 600; color: var(--ink); }
.cs-email-subj {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.cs-email-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 0 4px;
}
.cs-email-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--text-3);
  padding-top: 4px;
  border-top: 1px solid var(--border-dim);
}
.cs-email-badge {
  background: var(--chip-red-bg);
  color: var(--chip-red-fg);
  padding: 2px 7px;
  border-radius: var(--r-pill);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.cs-email-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* PDF piece — academic calendar with highlighter strokes. Widened so the
   uppercase head "ACADEMIC CALENDAR — 700PP" stays on one line. */
.cs-pdf {
  width: 320px;
  padding: 11px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  background:
    linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 92%, var(--surface-3)) 100%);
}
.cs-pdf-head {
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border-dim);
}
.cs-pdf-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Sticky note. Row layout: question-mark icon sits at the top-left
   and the text flows beside it; wrapped lines align to the start of
   the first line of text (next to the icon, not under it). */
.cs-sticky {
  width: 180px;
  padding: 14px 14px 16px;
  background: #FBE9B6;
  border: 1px solid color-mix(in srgb, #FBE9B6 70%, #8A6300);
  border-radius: 4px;
  filter: drop-shadow(0 8px 14px rgba(106,80,10,0.18));
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 9px;
}
.cs-sticky-text { flex: 1; min-width: 0; }
.cs-sticky-mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.06);
  color: #8A6300;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 15px;
}
.cs-sticky-text {
  font-size: 12px;
  color: #4a3500;
  line-height: 1.4;
}
.cs-sticky-text em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: #2f2300;
}

/* Tiny month calendar peek. transform-origin pinned to the left so
   width increases extend the right edge only — won't eat into
   neighboring pieces on the left. */
.cs-cal {
  width: 216px;
  padding: 12px 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  transform-origin: left center;
}
.cs-cal-head {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink);
}
.cs-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.cs-cal-grid span {
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--surface-2);
}
.cs-cal-grid span.ev.red    { background: color-mix(in srgb, var(--red) 65%, transparent); }
.cs-cal-grid span.ev.orange { background: color-mix(in srgb, var(--orange) 65%, transparent); }

/* Single stat piece — stacked: big serif-italic number on top, short
   description below. Stacked instead of a 2-col grid so the description
   doesn't leave a wide gap on the right; padding stays symmetric
   horizontally. Two of these are placed on the today stage: one below
   the browser tabs (red, "overwhelmed") and one near the timer (orange,
   "anxious"). */
.cs-stat-single {
  width: var(--cs-stat-width);
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.cs-stat-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--red);
}
.cs-stat-num i {
  font-style: italic;
  font-size: 18px;
  margin-left: 1px;
}
.cs-stat-single[data-tone="red"]    .cs-stat-num { color: var(--red); }
.cs-stat-single[data-tone="orange"] .cs-stat-num { color: var(--orange); }
.cs-stat-desc {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink);
  /* Balance line lengths so the ragged right doesn't read as extra padding.
     Falls back gracefully in browsers that don't support text-wrap: balance. */
  text-wrap: balance;
  -webkit-text-wrap: balance;
}
.cs-stat-desc em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
}

/* Reddit-style post — header / title / body / vote + comment foot */
.cs-reddit {
  width: 325px;
  padding: 11px 13px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transform-origin: top right;
}
.cs-reddit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--text-3);
}
.cs-reddit-sub {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  color: var(--ink);
}
.cs-reddit-avatar {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--orange);
}
.cs-reddit-title {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.cs-reddit-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 2px 0 2px;
}
.cs-reddit-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 6px;
  border-top: 1px solid var(--border-dim);
  font-size: 10.5px;
  color: var(--text-3);
}
.cs-reddit-vote,
.cs-reddit-replies {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cs-reddit-vote { color: var(--orange); font-weight: 600; }

/* Handwritten-feeling todo list — checkboxes, one done with strike-through */
.cs-todo {
  width: 240px;
  padding: 14px 16px 16px;
  transform-origin: top left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Slight notebook tint */
  background:
    repeating-linear-gradient(180deg, transparent 0 20px, color-mix(in srgb, var(--blue) 12%, transparent) 20px 21px),
    var(--surface);
}
.cs-todo-head {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink);
  letter-spacing: -0.01em;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-dim);
}
.cs-todo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cs-todo-list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink);
  line-height: 1.4;
}
.cs-todo-check {
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--text-2);
  border-radius: 3px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--surface);
}
.cs-todo-check.on {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.cs-todo-list li.done {
  color: var(--text-3);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--text-3) 75%, transparent);
}

/* Timer pill — bottom-right of each stage */
.cs-timer {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 12px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  z-index: 5;
}
.cs-timer strong { font-weight: 600; }
.cs-timer-today {
  color: var(--chip-red-fg);
  border-color: color-mix(in srgb, var(--red) 30%, var(--border));
}
.cs-timer-connect {
  color: var(--chip-green-fg);
  border-color: color-mix(in srgb, var(--green) 30%, var(--border));
}

/* ============================================================
   TODAY · RIGHT — the 10-step phase list panel.
   Phases are spaced tightly so the closing tagline can be large.
   ============================================================ */
.compare-stage-list {
  --today-line-left: 24px;
  --today-line-right: calc(50vw - 50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px;
  min-height: 620px;
  background: var(--surface);
}
#cmp-view-today .cmp-phase-head,
#cmp-view-today .cmp-phase-steps li,
#cmp-view-today .cmp-list-foot-strong {
  margin-left: calc(-1 * var(--today-line-left));
  margin-right: calc(-1 * var(--today-line-right));
  padding-left: var(--today-line-left);
  padding-right: var(--today-line-right);
}
.cmp-phase {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cmp-phase-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-dim);
}
.cmp-phase-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.cmp-phase-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cmp-phase-steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 7px 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.cmp-phase-steps li + li { border-top: 1px dashed var(--border-dim); }
.cmp-phase-steps .ph-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  flex-shrink: 0;
  min-width: 22px;
  color: var(--text-2);
}
/* Today phase colors use darker approved category tones and red-family
   approved accents to reinforce the friction of the current path. */
.cmp-phase[data-phase="discovery"] .ph-num { color: var(--cat-breadth-arts); }
.cmp-phase[data-phase="verification"] .ph-num { color: var(--cat-nonsociology); }
.cmp-phase[data-phase="apply"] .ph-num { color: var(--cat-upper); }
.cmp-phase[data-phase="discovery"] .cmp-phase-name .dot { background: var(--cat-breadth-arts); }
.cmp-phase[data-phase="verification"] .cmp-phase-name .dot { background: var(--cat-nonsociology); }
.cmp-phase[data-phase="apply"] .cmp-phase-name .dot { background: var(--cat-upper); }
.cmp-phase[data-phase="discovery"] .chip {
  background: color-mix(in srgb, var(--cat-breadth-arts) 16%, var(--surface));
  color: color-mix(in srgb, var(--cat-breadth-arts) 70%, var(--ink));
}
.cmp-phase[data-phase="verification"] .chip {
  background: color-mix(in srgb, var(--cat-nonsociology) 15%, var(--surface));
  color: color-mix(in srgb, var(--cat-nonsociology) 72%, var(--ink));
}
.cmp-phase[data-phase="apply"] .chip {
  background: color-mix(in srgb, var(--cat-upper) 15%, var(--surface));
  color: color-mix(in srgb, var(--cat-upper) 72%, var(--ink));
}

/* ============================================================
   CONNECT · LEFT — product-style visuals (one per step).
   Each .cv-slot frames a single visual card. Slot left edge
   bar uses the matching tone, echoing the step number on the
   right.
   ============================================================ */
/* CONNECT view: swap the two panels so the text steps appear on
   the LEFT and the product visuals on the RIGHT (Today view is
   unaffected — uses its natural HTML order). */
#cmp-view-connect .compare-side-text { order: 1; }
#cmp-view-connect .compare-connect-visuals { order: 2; }

/* ============================================================
   CONNECT LEFT — 4 stacked product cards.
   Each card corresponds 1:1 with a cmp-step on the right (in the
   same order). Visual aesthetic borrowed from the hero composition
   window: kicker labels, italic serif meta, --cat-* color bars,
   surface-2 backgrounds. Sleek, restrained, on-brand.
   ============================================================ */
.compare-stage-visuals {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  min-height: 620px;
  background: var(--page-bg);
}
#cmp-view-connect .compare-stage-visuals {
  position: relative;
}
#cmp-view-connect .compare-stage-visuals::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: calc(50% - 50vw);
  z-index: -3;
  background: var(--page-bg);
}
.compare-stage-visuals .cv-slot + .cv-slot {
  margin-top: 2px;
}

/* Post-CONNECT stepper — bottom of the LEFT panel.
   Vertical pipeline: rounded square boxes in a row with a
   connecting line behind them, labels below. Boxes use the same
   cat-box/chip language as the rest of the site. */
.cv-journey {
  flex: 0 0 auto;
  margin-top: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--border-dim);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cv-journey-kicker {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.cv-journey-steps {
  list-style: none;
  margin: 0;
  padding: 0 4px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  position: relative;
}
.cv-journey-steps::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 16.67%;
  right: 16.67%;
  height: 2px;
  background: var(--border);
  z-index: 0;
}
.cv-journey-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
}
.cv-journey-box {
  width: 18px;
  height: 18px;
  border-radius: var(--r-xs);
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  display: grid;
  place-items: center;
  color: transparent;
  box-shadow: 0 0 0 3px var(--page-bg);
  position: relative;
}
.cv-journey-done .cv-journey-box {
  background: var(--cat-theory);
  border-color: var(--cat-theory);
  color: var(--surface);
}

/* Pending state — the Enrolled square. Two staggered concentric
   ripples emerge from the box and fade, like a soft signal pulse. */
.cv-journey-step:last-child .cv-journey-box::before,
.cv-journey-step:last-child .cv-journey-box::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--cat-theory);
  border-radius: var(--r-xs);
  pointer-events: none;
  animation: cv-pending-ripple 2.4s ease-out infinite;
}
.cv-journey-step:last-child .cv-journey-box::after {
  animation-delay: 1.2s;
}
@keyframes cv-pending-ripple {
  0%   { transform: scale(1);   opacity: 0.55; }
  100% { transform: scale(2.4); opacity: 0;    }
}

.cv-journey-label {
  font-size: 11.5px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.cv-journey-step:last-child .cv-journey-label {
  color: var(--text-2);
}
.cv-slot {
  flex: 1 1 0;
  display: flex;
  align-items: stretch;
  min-height: 0;
}
.cv-slot > .cv-card { width: 100%; }
/* Equal flex weights so the CONNECT cards follow the same stage
   height as the Today panel. */

/* Shared card chrome — content starts near the top with a consistent
   internal gap, leaving real bottom padding even in dense cards. */
.cv-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
/* Module-style hover lift on each CONNECT step card (Upload,
   Explore, Understand, Decide). Border deepens, shadow grows —
   matches the .module:hover effect on the 1/8 modules grid. */
.cv-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-3);
}
.cv-card-upload {
  gap: 19px;
}
.cv-card-explore {
  gap: 12px;
}
.cv-card-progress .cv-progress-split {
  transform: translateY(-4px);
}

/* Kicker — small uppercase label at the top of every card */
.cv-card-kicker {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* Card head — kicker (left) + italic serif meta (right) on the same row */
.cv-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.cv-card-meta {
  font-size: 11.5px;
  color: var(--text-2);
  font-family: var(--serif);
  font-style: italic;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

/* --- Card 01: Upload — file-result row -------------------- */
.cv-upload-result {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 18px;
  gap: 9px;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border-dim);
  border-radius: var(--r-sm);
  padding: 6px 9px;
}
.cv-upload-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--cat-foundation);
}
.cv-upload-icon svg {
  stroke-width: 1.25;
}
.cv-upload-info { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cv-upload-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cv-upload-stats {
  font-size: 10.5px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cv-upload-check {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--cat-theory);
  color: var(--surface);
}

/* --- Card 02: Explore — destination list ------------------ */
.cv-dest-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cv-dest-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  padding: 0 9px;
  border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border-dim);
  font-size: 10.5px;
  line-height: 1.22;
  color: var(--ink);
  cursor: default;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.cv-dest-row .cat-box {
  width: 18px;
  height: 6px;
  border-radius: 3px;
  margin-left: -3px;
}
.cv-dest-row:hover {
  background: var(--surface);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-1);
  transform: translateX(2px);
}
.cv-dest-row:hover .cv-dest-name {
  font-weight: 600;
}
.cv-dest-row:hover .cv-dest-meta {
  color: var(--cat-core);
}
.cv-dest-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.005em;
  transition: font-weight .18s ease;
}
.cv-dest-meta {
  font-family: var(--serif);
  font-style: italic;
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: -0.005em;
  transition: color .18s ease;
}

/* --- Card 03: Understand — two columns of categories (3 + 3) -
   Mirrors the degree-map category list on the hero composition
   window: each row gets a --cat-* color, name, bar, fraction. -- */
.cv-progress-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.cv-cats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cv-cats li {
  display: grid;
  grid-template-columns: 11px minmax(0, 1fr) 56px 32px;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: var(--ink);
  padding: 1px 0;
}
.cv-cat-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.005em;
}
.cv-cat-bar {
  display: block;
  height: 6px;
  background: var(--surface-3);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.cv-cat-bar b {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.cv-cat-frac {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  color: var(--text-2);
  text-align: right;
  letter-spacing: -0.005em;
}

/* --- Card 04: Decide — neutral side-by-side school comparison.
   CONNECT presents data; the student decides. No "best fit" badge,
   no ranking — just each school's credit-applicability shown
   plainly so the reader can compare. ----------------------------- */
.cv-schools-cmp {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.cv-school-card {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 3px 8px 4px;
  background: var(--surface-2);
  border: 1px solid var(--border-dim);
  border-radius: var(--r-sm);
  min-width: 0;
}
.cv-school-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cv-school-pct {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.025em;
}
.cv-school-pct i {
  font-style: normal;
  font-size: 10.5px;
  color: var(--text-2);
  font-weight: 500;
  margin-left: 1px;
}
.cv-school-bar {
  display: block;
  height: 3px;
  background: var(--surface-3);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.cv-school-bar b {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.cv-school-program {
  font-family: var(--serif);
  font-style: italic;
  font-size: 9.5px;
  color: var(--text-2);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Visual 01 — upload card (drop zone + success row).
   Pairs with step 01 "Upload your transcript" on the right. */
.cv-upload {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
}
.cv-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 14px 10px;
  background:
    repeating-linear-gradient(0deg, transparent 0 11px, color-mix(in srgb, var(--border) 25%, transparent) 11px 12px),
    var(--surface-2);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-md);
  text-align: center;
}
.cv-upload-glyph {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  margin-bottom: 2px;
}
.cv-upload-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.cv-upload-sub {
  font-size: 11px;
  color: var(--text-3);
}
.cv-upload-success {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 2px solid var(--green);
  border-radius: var(--r-sm);
}
.cv-upload-check {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green);
  color: var(--surface);
  flex-shrink: 0;
}
.cv-upload-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cv-upload-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.cv-upload-stats {
  font-size: 11px;
  color: var(--text-2);
}
.cv-upload-progress {
  display: block;
  width: 56px;
  height: 4px;
  background: var(--surface-3);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.cv-upload-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--green);
}

/* Visual 02 — school chips */
.cv-schools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 14px;
}
.cv-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.cv-chip-on {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}
.cv-chip-add {
  background: transparent;
  border-style: dashed;
  color: var(--text-3);
}

/* Visual 03 — degree-requirement bars */
.cv-bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 14px;
}
.cv-bar-row {
  display: grid;
  grid-template-columns: 100px 1fr 38px;
  gap: 12px;
  align-items: center;
}
.cv-bar-name {
  font-size: 12px;
  color: var(--ink);
}
.cv-bar {
  display: block;
  height: 5px;
  background: var(--surface-3);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.cv-bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
}
.cv-bar-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  color: var(--text-2);
  text-align: right;
  letter-spacing: -0.005em;
}

/* (Old .cv-compare / .cv-cmp-row / .cv-cmp-num rules removed —
   replaced by the new .cv-cmp + .cv-cmp-row + .cv-cmp-rank +
   .cv-cmp-name design above.) */

/* ============================================================
   CONNECT · RIGHT — four numbered step descriptions.
   ============================================================ */
.compare-stage-text {
  --connect-line-left: calc(50vw - 50%);
  --connect-line-right: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 24px;
  min-height: 620px;
  background: var(--surface);
}
#cmp-view-connect .cmp-step,
#cmp-view-connect .cmp-list-foot-strong {
  margin-left: calc(-1 * var(--connect-line-left));
  margin-right: calc(-1 * var(--connect-line-right));
  padding-left: var(--connect-line-left);
  padding-right: var(--connect-line-right);
}
.cmp-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: center;
  flex: 1 1 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-dim);
  min-height: 0;
  overflow: hidden;
}
.cmp-step:first-of-type { padding-top: 6px; }
.cmp-step:last-of-type  { border-bottom: 0; }
.cmp-step-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  line-height: 1;
  color: var(--text-3);
  padding-top: 4px;
}
.cmp-step[data-tone="blue"]   .cmp-step-num { color: var(--cat-core); }
.cmp-step[data-tone="purple"] .cmp-step-num { color: var(--cat-breadth-arts); }
.cmp-step[data-tone="orange"] .cmp-step-num { color: var(--cat-crim-options); }
.cmp-step[data-tone="green"]  .cmp-step-num { color: var(--cat-theory); }
.cmp-step-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.cmp-step-title {
  font-family: var(--font);
  font-style: normal;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
}
.cmp-step p {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-2);
  margin: 0;
}

/* Closing taglines for each view */
.cmp-list-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border-dim);
  font-size: 12.5px;
  color: var(--text-3);
  font-style: italic;
}
.cmp-list-foot .serif-accent { color: var(--red); }

.cmp-list-foot-strong {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--border-dim);
  font-style: normal;
}
.cmp-list-foot-kicker {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}
.cmp-list-foot-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.cmp-list-foot-strong .serif-accent { color: var(--green); }
/* Today-side modifier: "after" reads red to mark the late timing */
.cmp-list-foot-after .serif-accent { color: var(--red); }
.cmp-list-foot-after .cmp-list-foot-line { color: var(--ink); }

/* ============================================================
   RESPONSIVE — stack the two panels vertically on narrow viewports.
   ============================================================ */
@media (max-width: 1100px) {
  .compare-pair {
    grid-template-columns: 1fr;
  }
  #cmp-view-today .compare-today .compare-side-head::after,
  #cmp-view-today .compare-side-text .compare-side-head::after,
  #cmp-view-today .compare-stage-today::before,
  #cmp-view-connect .compare-side-text .compare-side-head::after,
  #cmp-view-connect .compare-connect-visuals .compare-side-head::after,
  #cmp-view-connect .compare-stage-visuals::before {
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
  }
  #cmp-view-today .compare-side-text {
    border-left: 0;
    border-top: 0;
  }
  #cmp-view-connect .compare-connect-visuals {
    border-left: 0;
    border-top: 0;
  }
  #cmp-view-today .compare-side-text::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    height: 1px;
    background: var(--border);
    pointer-events: none;
  }
  #cmp-view-connect .compare-connect-visuals::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    height: 1px;
    background: var(--border);
    pointer-events: none;
  }
  #cmp-view-today .compare-stage-list {
    --today-line-left: calc(50vw - 50%);
    --today-line-right: calc(50vw - 50%);
  }
  #cmp-view-connect .compare-stage-text {
    --connect-line-left: calc(50vw - 50%);
    --connect-line-right: calc(50vw - 50%);
  }
  .compare-stage         { min-height: 420px; }
  .compare-stage-list,
  .compare-stage-text,
  .compare-stage-visuals { min-height: 0; }
}
@media (max-width: 700px) {
  #cmp-view-today .compare-stage {
    overflow: hidden;
  }
  /* Drop the calendar peek on very small screens — too dense to read */
  .compare-stage-today { --cs-stat-width: 200px; }
  .cs-cal { display: none; }
  .cs-tabs    { width: 230px; }
  .cs-email       { width: 220px; }
  .cs-pdf         { width: 280px; }
  .cs-sticky      { width: 160px; }
  .cs-stat-single { width: var(--cs-stat-width); }
  .cs-reddit      { width: 220px; }
  .cs-todo        { width: 195px; }
  .compare-side-head { padding: 12px 14px; }
  .compare-side-label { white-space: normal; }
  .compare-stage-list,
  .compare-stage-text,
  .compare-stage-visuals { padding: 18px 18px; }
  .cv-bar-row {
    grid-template-columns: 88px 1fr auto;
    gap: 12px;
  }
  .cv-alts {
    grid-template-columns: 1fr;
  }
  .compare-toggle { gap: 14px; }
  .compare-toggle-btn { font-size: 17px; }
  .compare-toggle-sep { font-size: 19px; }
}


/* ============================================================
   AUDIENCE — role workspaces
   ============================================================ */
.role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.role-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.role-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.role-id {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.role-icon-sq {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.role-id-text { display: flex; flex-direction: column; line-height: 1.1; }
.role-kicker {
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.role-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  margin-top: 1px;
}
.role-tabs {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 2px;
  gap: 0;
}
.role-tab {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-2);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.role-tab.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}

.role-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 auto;
}
.role-section {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.role-section-title {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.role-section-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
  background: transparent;
  border: 0;
}
.role-mini {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.role-section-split .role-mini:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
.role-section-split .role-mini:last-child  { border-top-left-radius: 0;  border-bottom-left-radius: 0; }
.role-mini-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}
.role-mini-q {
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 4px;
}
.role-mini-a {
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.45;
}
.role-mini-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.role-mini-rows span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-soft);
}

.role-gpa {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 4px;
}
.role-gpa-num {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.role-gpa-bar {
  display: block;
  height: 6px;
  background: var(--surface-3);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.role-log {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.role-log li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink-soft);
}
.log-time {
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  font-size: 11px;
}
.log-text { color: var(--ink-soft); }

.reqlist { display: flex; flex-direction: column; gap: 8px; }
.req {
  display: grid;
  grid-template-columns: 110px 1fr 60px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.req-label { color: var(--ink-soft); }
.req-bar {
  display: block;
  height: 6px;
  background: var(--surface-3);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.req-num {
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--text-3);
  text-align: right;
}

.staff-queue {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.staff-queue li {
  display: grid;
  grid-template-columns: 56px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 12px;
}
.staff-id {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--text-3);
  letter-spacing: -0.005em;
}
.staff-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.staff-main strong {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.staff-main span {
  font-size: 11px;
  color: var(--text-2);
}

.role-rows {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 4px;
}
.role-rows li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
  font-size: 13.5px;
  color: var(--ink);
  border-bottom: 1px solid var(--border-dim);
}
.role-rows li:last-child { border-bottom: 0; }

.role-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 18px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
}
.role-foot .micro { margin-top: 0; }

/* ============================================================
   SECURITY — settings workspace
   ============================================================ */
.security-workspace {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.sec-side {
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 14px;
  gap: 12px;
}
.sec-side-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 8px;
  border-bottom: 1px solid var(--border);
}
.sec-side-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
}
.sec-side-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sec-side-list li {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--ink-soft);
  cursor: default;
}
.sec-side-list li.active {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
  font-weight: 500;
  box-shadow: var(--shadow-1);
}
.sec-side-list li:hover:not(.active) { background: rgba(0,0,0,.02); }
.sec-side-foot {
  margin-top: auto;
  padding-top: 8px;
}

.sec-main {
  padding: 0;
  display: flex;
  flex-direction: column;
}
.sec-main-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
}
.sec-controls {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.sec-row {
  display: grid;
  grid-template-columns: 1fr 44px 110px;
  gap: 16px;
  align-items: center;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border-dim);
}
.sec-row:last-child { border-bottom: 0; }
.sec-row-l { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sec-row-l strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.sec-row-l span {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.45;
}
.sec-toggle {
  width: 36px;
  height: 20px;
  background: var(--border-strong);
  border-radius: var(--r-pill);
  position: relative;
  flex-shrink: 0;
  display: inline-block;
  transition: background .15s;
}
.sec-toggle span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--shadow-1);
  transition: left .15s;
}
.sec-toggle.on { background: var(--green); }
.sec-toggle.on span { left: 18px; }
.sec-toggle.plan { background: var(--orange); opacity: .55; }
.sec-toggle.plan span { left: 10px; }
.sec-toggle.off { background: var(--border-strong); }
.sec-row .hr-pill { justify-self: end; }

.sec-log {
  padding: 14px 22px 18px;
  background: var(--surface-2);
}
.sec-log-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.sec-log ul { display: flex; flex-direction: column; gap: 6px; }
.sec-log li {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* ============================================================
   CTA — workspace launcher
   ============================================================ */
.launcher {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.launcher-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.launcher-app {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
  transition: background .15s, border-color .15s;
}
.launcher-app + .launcher-app { border-left: 1px solid var(--border); }
.launcher-app:hover { background: var(--surface-2); }
.launcher-app:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}
.app-head {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 12px;
  align-items: center;
}
.app-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}
.app-id { display: flex; flex-direction: column; line-height: 1.1; }
.app-kicker {
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.app-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
  margin-top: 2px;
}
.app-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.app-preview-row {
  display: flex;
  gap: 6px;
}
.app-input {
  flex: 1;
  height: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.app-input.short { flex: 0 0 35%; }
.app-input.third { flex: 1 1 0; }
.app-preview-checks { gap: 8px; padding: 4px 0; }
.app-check {
  width: 14px; height: 14px;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  background: var(--surface);
}
.app-check.on {
  background: var(--blue);
  border-color: var(--blue);
  position: relative;
}
.app-check.on::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 6px; height: 4px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg);
}
.app-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.app-meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.app-foot {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.app-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.launcher-app:hover .app-action {
  color: var(--blue);
}

.launcher-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 22px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--ink-soft);
}
.launcher-foot .hr-dot { display: inline-block; margin-right: 4px; }
.launcher-foot .muted { color: var(--text-3); }

/* ============================================================
   CTA TWO-PATH PANELS (legacy — kept for class re-use)
   ============================================================ */
.cta-panel { gap: 0; }
.cta-desc {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: 16px;
}
.cta-points {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 18px;
}
.cta-points li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  font-size: 13.5px;
  color: var(--ink);
  border-bottom: 1px solid var(--border-dim);
}
.cta-points li:last-child { border-bottom: 0; }
.cta-actions {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.cta-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ============================================================
   FORMS (used on dedicated form pages)
   ============================================================ */
.form-card { padding-bottom: 24px; }
.form { display: flex; flex-direction: column; gap: 14px; }
.role-toggle-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.role-toggle-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
}
.role-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.role-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--ink);
  text-align: center;
  transition: border-color .15s, background .15s, color .15s;
}
.role-option:hover { border-color: var(--border-strong); background: var(--surface-2); }
.role-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.role-option span {
  font-weight: 500;
  transition: color .15s;
}
.role-option:has(input:checked) {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--surface);
}
.role-option:has(input:checked) span { color: var(--surface); }
.parent-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (max-width: 520px) {
  .role-toggle { grid-template-columns: 1fr; }
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label,
.field-legend {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
}
.field-legend {
  display: block;
  margin-bottom: 4px;
  padding: 0;
}
.form fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}
.field-help {
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.45;
}

/* ---- Inline field validation state ----
   Set by the form handler in script.js when a required field is empty or
   invalid at submit. Marks the label red, the input/combo red, and shows
   a small message right under the field so the user immediately knows
   where the problem is. */
.field.is-invalid > label,
.field.is-invalid > .field-legend {
  color: var(--red);
}
/* Plain inputs/selects/textareas directly inside the .field (NOT inside a
   .combo wrapper) — style the element itself, since it has its own border
   and border-radius. */
.field.is-invalid > input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.field.is-invalid > select,
.field.is-invalid > textarea {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(234, 90, 79, 0.14);
}
/* .combo and .combo-select wrappers have NO border/radius themselves —
   the visual frame lives on the inner .combo-input. Apply the red ring
   to that input so the rounded corners are preserved. */
.field.is-invalid .combo:not(.combo-multi) > .combo-input {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(234, 90, 79, 0.14);
}
/* .combo-multi has its own border + border-radius on the wrapper — apply
   the red ring to the wrapper, and explicitly do NOT style the inner
   .combo-input (which would otherwise produce a double red frame /
   pink-looking tint inside the box). */
.field.is-invalid .combo-multi {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(234, 90, 79, 0.14);
}
.field.is-invalid .combo-multi > .combo-input {
  border-color: var(--border);
  box-shadow: none;
}
.field.is-invalid .field-check {
  color: var(--red);
}
.field-error {
  display: block;
  margin-top: 4px;
  color: var(--red);
  font-size: 12px;
  line-height: 1.4;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 14px;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
}
.field textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.5;
}
.field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%236E7378' stroke-width='1.6'><path d='M2 4l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}
.field select[multiple] {
  background-image: none;
  padding: 6px 8px;
  cursor: default;
  min-height: 156px;
}
.field select[multiple] option {
  padding: 6px 8px;
  border-radius: 4px;
}
.field select[multiple] option:checked {
  background: var(--purple) linear-gradient(0deg, var(--purple), var(--purple));
  color: #ffffff;
}

/* Combobox (input with filterable dropdown) */
.combo {
  position: relative;
}
.combo .combo-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 14px;
  color: var(--ink);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.combo .combo-input:focus {
  outline: 0;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(92,64,113,.18);
}

/* Chevron sits inside .combo-select fields so they read as dropdowns
   without leaving the calm, theme-aligned text-input look. */
.combo-chev {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-3);
  display: inline-grid;
  place-items: center;
  transition: transform .18s ease, color .18s ease;
}
.combo-select .combo-input {
  padding-right: 34px;
  cursor: pointer;
  caret-color: transparent;
}
.combo-select .combo-input::selection { background: transparent; }
.combo.combo-open .combo-chev {
  transform: translateY(-50%) rotate(180deg);
  color: var(--purple);
}
.combo-select.combo-open .combo-input {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(92,64,113,.18);
}
.combo-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-2);
  list-style: none;
}
.combo-list li {
  padding: 8px 10px;
  font-size: 13px;
  color: var(--ink);
  border-radius: 4px;
  cursor: pointer;
  line-height: 1.35;
}
.combo-list li:hover,
.combo-list li[aria-selected="true"] {
  background: var(--surface-2);
}
.combo-list li.combo-active {
  background: var(--purple);
  color: #fff;
}
.combo-list li.combo-empty {
  color: var(--text-3);
  cursor: default;
  background: transparent;
}
.combo-multi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  transition: border-color .15s, box-shadow .15s;
}
.combo-multi:focus-within {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(92,64,113,.18);
}
.combo-multi .combo-input {
  flex: 1;
  min-width: 160px;
  border: 0;
  padding: 4px 4px;
  background: transparent;
  font-size: 13px;
}
.combo-multi .combo-input:focus { outline: 0; box-shadow: none; }
.combo-chips {
  display: contents;
}
.combo-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  background: var(--purple);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  line-height: 1.2;
  max-width: 100%;
}
.combo-chip-remove {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.combo-chip-remove:hover { background: rgba(255, 255, 255, 0.32); }
.combo-chip-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}
.combo-chip-remove {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,0.06);
  color: inherit;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}
.combo-chip-remove:hover { background: rgba(0,0,0,0.12); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(92,64,113,.18);
}
.field-checks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.field-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--ink);
  transition: border-color .15s, background .15s;
}
.field-check:hover { border-color: var(--border-strong); background: var(--surface-2); }
.field-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  background: var(--surface);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  margin: 0;
  transition: border-color .15s;
}
.field-check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5.5px;
  height: 10px;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: translate(-55%, -65%) rotate(45deg);
}
.field-check input:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.field-check-consent {
  align-items: flex-start;
  background: transparent;
  border: 0;
  padding: 6px 0;
  cursor: default;
  transition: none;
}
.field-check-consent:hover { background: transparent; border: 0; }
.field-check-consent input[type="checkbox"] { margin-top: 2px; }
.field-check-consent input[type="checkbox"]:checked {
  background: var(--green);
  border-color: var(--green);
}
.field-check-consent input[type="checkbox"]:checked::after {
  border-color: #ffffff;
}
.field-check-consent span { cursor: pointer; }
.row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.form-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 2px;
  padding-top: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.form-section-head::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border-dim);
}
.form-section-head .form-step-num {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink-soft);
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}
.form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 18px;
  margin-top: 10px;
  border-top: 1px solid var(--border);
}
.form-actions-split {
  align-items: stretch;
  gap: 14px;
  flex-wrap: nowrap;
}
.form-actions-split .btn-submit-wide {
  flex: 1 1 55%;
  min-width: 0;
  justify-content: center;
  font-size: 15px;
  padding: 14px 22px;
}
.btn-support {
  flex: 0 1 45%;
  white-space: normal;
  text-align: center;
  line-height: 1.35;
}
@media (max-width: 640px) {
  .form-actions-split { flex-wrap: wrap; }
  .form-actions-split .btn-submit-wide,
  .btn-support { flex: 1 1 100%; max-width: 100%; }
}
.form-status {
  margin-top: 6px;
  font-size: 13px;
  min-height: 20px;
}
.form-status.success {
  color: var(--chip-green-fg);
  background: var(--chip-green-bg);
  padding: 12px 14px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}
.form-status.error {
  color: var(--chip-red-fg);
  background: var(--chip-red-bg);
  padding: 10px 12px;
  border-radius: var(--r-sm);
}
.form-status.loading {
  color: var(--text-2);
  background: var(--surface-2, #F7F6F2);
  padding: 10px 12px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-status.loading::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  border-top-color: var(--ink);
  animation: form-status-spin 0.7s linear infinite;
  flex: 0 0 auto;
}
@keyframes form-status-spin {
  to { transform: rotate(360deg); }
}

/* Form-page layout */
.form-page {
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
  padding: 28px var(--gutter) 64px;
}
.student-waitlist-page {
  padding-bottom: clamp(180px, 17vw, 260px);
  overflow: visible;
}
.student-waitlist-page + .site-footer {
  margin-top: 0;
}
.form-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.form-page-head {
  margin-bottom: 22px;
}
.form-page-head .kicker {
  margin-bottom: 12px;
  display: flex;
  width: 100%;
  max-width: calc((100% - 28px) * 1.6 / 2.6);
  position: relative;
  z-index: 1;
}
.form-page-head .kicker::after {
  flex: 1 1 auto;
}
.form-page-head h1 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.form-page-head h1 .serif-accent { display: inline; }
/* The global .lede rule centers via auto margins (intended for
   marketing section heroes); the form page is left-aligned, so the
   lede needs to flush-left under the h1 with margin-left: 0. */
.form-page-head .lede {
  margin-top: 12px;
  margin-left: 0;
  margin-right: 0;
  max-width: 560px;
  text-align: left;
}
.breadcrumb,
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-2);
  text-decoration: none;
  margin-bottom: 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  transition: color .15s;
}
.breadcrumb:hover,
.back-link:hover { color: var(--ink); background: transparent; border-color: transparent; }
.breadcrumb svg,
.back-link svg {
  color: var(--text-3);
  transition: transform .15s, color .15s;
}
.breadcrumb:hover svg,
.back-link:hover svg {
  color: var(--ink);
  transform: translateX(-2px);
}
.back-link span {
  padding-bottom: 1px;
}
.form-card-head {
  margin-bottom: 8px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.form-card-head h2 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 6px;
}
.form-card-sub {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
  margin: 0;
  max-width: 520px;
}
.aside-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--shadow-1);
  position: sticky;
  top: calc(var(--topbar-h) + 16px);
}
.aside-timeline {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: start;
  padding: 8px 0 clamp(230px, 24vw, 310px);
  position: sticky;
  top: calc(var(--topbar-h) + 24px);
  min-width: 0;
  isolation: isolate;
  overflow: visible;
}
.aside-timeline > * { position: relative; z-index: 1; }
.aside-timeline > .aside-flower { z-index: 0; }
.aside-timeline-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.aside-timeline-header .kicker { margin-bottom: 14px; }
.aside-timeline-header h3 {
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-weight: 600;
}
.aside-tl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.aside-tl-list::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: var(--border);
  pointer-events: none;
}
.aside-tl-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  position: relative;
}
.aside-tl-marker {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  position: relative;
  z-index: 1;
}
.aside-tl-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  color: var(--ink);
}
.aside-tl-title {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.55;
}
.aside-timeline-foot {
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
}
.aside-timeline-foot strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 6px;
}
.aside-flower {
  position: absolute;
  width: 280px;
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  filter: drop-shadow(0 6px 14px rgba(31,35,40,0.08));
  opacity: 0.95;
}
.aside-flower-bottom-a {
  bottom: 0;
  right: 0;
  width: clamp(220px, 24vw, 320px);
  transform: translate(35%, 10%) rotate(18deg);
}
.aside-flower-bottom-b {
  bottom: 34px;
  right: clamp(210px, 23vw, 300px);
  width: clamp(130px, 13vw, 170px);
  transform: translateY(-20%) rotate(-22deg);
}
.main-area { position: relative; }
.page-flower {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  filter: drop-shadow(0 6px 14px rgba(31,35,40,0.08));
  opacity: 0.95;
}
.page-flower-top {
  top: 42px;
  right: 54px;
  width: clamp(180px, 18vw, 260px);
  height: auto;
  transform: rotate(-14deg);
}
.aside-card .aside-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}
.aside-card h3 {
  display: block;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 14px;
}
.aside-card .aside-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.aside-card .aside-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  font-size: 13px;
  color: var(--ink);
  border-bottom: 1px solid var(--border-dim);
  line-height: 1.45;
}
.aside-card .aside-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.aside-card .aside-foot {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  margin-top: 56px;
  padding: 28px var(--gutter);
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.footer-bar {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.footer-emblem {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}
.footer-emblem img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: var(--brand-filter);
}
.footer-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.footer-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 4px 10px;
}
.footer-links {
  display: flex;
  gap: 4px;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
}
.footer-links a {
  text-decoration: none;
  color: var(--text-2);
  font-size: 13px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
}
.footer-links a:hover { color: var(--ink); background: var(--surface-2); }
.footer-bottom {
  max-width: var(--content-max);
  margin: 18px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--border-dim);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-3);
}
.footer-email {
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px dotted var(--border-strong);
  padding-bottom: 1px;
  transition: color .15s, border-color .15s;
}
.footer-email:hover { color: var(--ink); border-bottom-color: var(--ink); }
.footer-email:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; }

/* Social icons + copyright, grouped on the right of the footer-bottom row */
.footer-end {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer-social a {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  box-shadow: var(--shadow-1);
  text-decoration: none;
  transition: color .15s, background .15s, border-color .15s;
}
.footer-social a:hover {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--border-strong);
}
.footer-social a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.footer-social svg {
  width: 13px;
  height: 13px;
}
.footer-social i {
  font-size: 13px;
  line-height: 1;
}
/* On institutions.html the footer uses .footer-bar instead of .footer-bottom */
.footer-bar .footer-end { gap: 14px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 1400px) {
  :root { --content-max: 1320px; }
}

@media (max-width: 1260px) and (min-width: 1101px) {
  .comp-overview-split {
    grid-template-columns: 1fr;
  }
  .comp-ring-card {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 12px 16px;
    align-items: center;
  }
  .comp-ring-card .comp-card-title,
  .comp-ring-card .comp-ring-meta,
  .comp-ring-card .comp-status-summary {
    grid-column: 2;
  }
  .comp-ring-card .composition-ring.large {
    grid-row: 1 / 4;
    margin: 0 auto;
  }
}

/* Compress the Overview panel content when the window starts shrinking below
   its full-size max (47vw < 670px → viewport < 1425px). This range is where
   the panel content would otherwise need a scrollbar; the compressions below
   trade a few pixels of padding/font for a continuous fit-to-window layout. */
@media (min-width: 1101px) and (max-width: 1425px) {
  /* Keep the progress list + ring card side-by-side at narrower widths so the
     vertical stack doesn't push past the window height. Override the
     1101–1260 stacking rule that exists in the older breakpoint above. */
  #comp-overview .comp-overview-split {
    grid-template-columns: minmax(0, 1fr) minmax(180px, .5fr);
    margin-top: 5px;
    gap: 6px;
  }
  #comp-overview .comp-ring-card {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
  }
  #comp-overview .comp-ring-card .comp-card-title,
  #comp-overview .comp-ring-card .comp-ring-meta,
  #comp-overview .comp-ring-card .comp-status-summary {
    grid-column: auto;
  }
  #comp-overview .comp-ring-card .composition-ring.large {
    grid-row: auto;
  }

  #comp-overview .comp-stat { padding: 6px 10px; }
  #comp-overview .comp-stat em { font-size: 9px; margin-bottom: 2px; }
  #comp-overview .comp-stat strong { font-size: 20px; }
  #comp-overview .comp-stat strong i { font-size: 11px; }
  #comp-overview .comp-stat span { font-size: 9px; margin-top: 2px; }
  #comp-overview .comp-stat-bar { height: 3px; margin-top: 4px; }
  #comp-overview .composition-stats { gap: 6px; }

  #comp-overview .comp-progress-card,
  #comp-overview .comp-ring-card { padding: 7px 10px; }

  #comp-overview .comp-progress-list li {
    padding: 1px 4px;
    font-size: 10.2px;
  }

  #comp-overview .comp-ring-card .comp-card-title {
    text-align: center;
    margin-bottom: 4px;
  }
  #comp-overview .comp-ring-card .composition-ring.large {
    width: 92px;
    height: 92px;
    margin: 4px auto 6px;
  }
  #comp-overview .comp-ring-card .composition-ring.large strong { font-size: 20px; }
  #comp-overview .rm-row { padding: 3px 0; font-size: 10px; }
}

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-copy {
    display: block;
    min-height: 0;
    height: auto;
    padding: 4px 0 0;
    transform: none;
  }
  .hero-meta { margin-top: 32px; }
  .modules-grid { grid-template-columns: repeat(3, 1fr); }
  .principles-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .table-head, .table-body li { grid-template-columns: 60px 2fr 1fr 1fr; }
  .cal-grid { grid-template-columns: 1fr; }
  .cal-months { grid-template-columns: repeat(3, 1fr); }
  .form-page-grid { grid-template-columns: 1fr; }
  .aside-card { position: static; }
  .aside-timeline { position: static; }
  .brand-img { height: 28px; }
  .monitor-summary { grid-template-columns: repeat(2, 1fr); }
  .role-grid { grid-template-columns: 1fr; }
  .security-workspace { grid-template-columns: 200px 1fr; }
  .launcher-grid { grid-template-columns: 1fr; }
  .launcher-app + .launcher-app { border-left: 0; border-top: 1px solid var(--border); }
  .composition-window {
    min-height: 600px;
    max-height: 600px;
  }
  .atlas-layout {
    grid-template-columns: 1fr;
    padding-right: var(--gutter);
    padding-left: var(--gutter);
    gap: 24px;
  }
  .atlas-demo-card {
    height: 620px;
    padding: 24px;
  }
  .atlas-side { padding-top: 0; }
}

@media (max-width: 900px) {
  :root { --rail-w: 0px; --gutter: 20px; }
  .landing-sidebar { display: none; }
  .app-shell > .rail { display: none; }
  .app-shell { grid-template-columns: 1fr; }

  .topbar { padding: 0 16px; gap: 10px; grid-template-columns: auto 1fr auto; }
  .primary-nav {
    position: fixed;
    top: var(--topbar-h);
    left: 0; right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    transform: translateY(-110%);
    transition: transform .2s ease;
    box-shadow: var(--shadow-2);
  }
  .primary-nav.open { transform: translateY(0); }
  .primary-nav a { padding: 10px 12px; font-size: 14px; }
  .topbar-right .btn-ghost { display: none; }
  .topbar-appearance { display: flex; }
  .nav-toggle { display: inline-flex; }
  .brand-img { height: 26px; max-width: 180px; }
  .row-3 { grid-template-columns: 1fr; }
  .field-checks { grid-template-columns: 1fr; }

  .dual-panels, .dual-panels-lg { grid-template-columns: 1fr; }
  .clarity-decision-grid,
  .clarity-loss-row,
  .clarity-focus-grid,
  .clarity-evidence { grid-template-columns: 1fr; }
  .clarity-brief + .clarity-brief,
  .clarity-loss-copy,
  .clarity-focus-copy,
  .clarity-evidence-col + .clarity-evidence-col {
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--border);
  }
  .clarity-proof-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clarity-proof-metrics article:nth-child(odd) { border-left: 0; }
  .clarity-proof-metrics article:nth-child(n + 3) { border-top: 1px solid var(--border-dim); }
  .atlas-layout {
    grid-template-columns: 1fr;
    padding-right: var(--gutter);
    padding-left: var(--gutter);
    gap: 20px;
  }
  .atlas-demo-card {
    height: 560px;
    padding: 22px;
  }
  .atlas-side { padding-top: 0; }
  .atlas-result-grid { grid-template-columns: 1fr; }

  .table-head, .table-body li { grid-template-columns: 50px 2fr 1.4fr; }
  .table-head > span:nth-child(4),
  .table-body li > span:nth-child(4) { display: none; }

  .settings-rows li { grid-template-columns: 1fr; gap: 6px; }
  .sr-state { justify-self: start; }

  .data-table { overflow-x: auto; }
  .data-table .dt-head, .data-table .dt-row { min-width: 760px; }

  .stat-num { font-size: 30px; }
  .hero-meta { gap: 18px; }
  .atlas-msg { max-width: 100%; }
  .footer-bar { gap: 10px; }
  .footer-links {
    flex-basis: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .composition-window .window-right .chip:nth-child(2) { display: none; }
  .comp-overview-split { grid-template-columns: 1fr; }
  .composition-split { grid-template-columns: 1fr; }
  .composition-side-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 16px;
    align-items: center;
  }
  .composition-side-card .side-card-title,
  .composition-side-card .composition-side-row { grid-column: 2; }
  .composition-side-card .composition-ring {
    grid-row: 1 / 5;
    margin: 0;
  }
  .composition-detail-grid,
  .composition-notes,
  .composition-progress-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .hero { padding-top: 16px; }
  .hero-headline { font-size: 32px; line-height: 1.08; }
  .hero-sub { font-size: 15px; }
  .hero-ctas .btn { flex: 1 1 auto; }
  .strip-row { padding: 12px 14px; }
  .strip-divide { display: none; }

  .modules-grid { grid-template-columns: 1fr; }
  .principles-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }

  .section { padding: 44px var(--gutter) 12px; }
  .section h2 { font-size: 26px; }

  .window-bar { padding: 10px 12px; gap: 8px; }
  .window-search { display: none; }
  .avatar-stack .avatar:nth-child(n+3) { display: none; }
  .window-title { font-size: 14px; }
  .composition-window {
    min-height: 0;
    max-height: none;
    overflow: visible;
  }
  .composition-window .window-right { display: none; }
  .composition-tabs .view-tab { padding: 11px 10px; }
  .composition-tabs .view-counts { display: none; }
  .composition-body {
    padding: 12px;
    overflow-x: auto;
  }
  .composition-panel {
    min-height: 0;
  }
  .composition-topline,
  .composition-stats,
  .composition-split,
  .composition-detail-grid,
  .composition-notes,
  .composition-progress-layout {
    min-width: 560px;
  }
  .composition-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .composition-table-head,
  .composition-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }
  .composition-side-card {
    display: block;
  }
  .composition-side-card .composition-ring {
    margin: 0 auto 12px;
  }
  .atlas-table-row {
    min-width: 560px;
  }

  .board { grid-template-columns: 280px 280px 280px 280px 280px; }
  .board-compact { grid-template-columns: 240px 240px 240px 240px 240px; }
  .preview-window { overflow-x: auto; }

  .row-2 { grid-template-columns: 1fr; }

  .cal-months { grid-template-columns: repeat(2, 1fr); }
  .brand-img { height: 24px; max-width: 160px; }

  .section-head { margin-bottom: 22px; }
  .lede { font-size: 14px; }

  .tnode { min-width: 160px; padding: 10px; }

  .monitor-summary { grid-template-columns: 1fr 1fr; padding: 14px 16px; gap: 12px; }
  .clarity-workspace .window-right { display: none; }
  .clarity-mini-map,
  .clarity-cost-grid,
  .clarity-reader-row,
  .clarity-proof-metrics { grid-template-columns: 1fr; }
  .clarity-reader-row article + article,
  .clarity-proof-metrics article + article {
    border-left: 0;
    border-top: 1px solid var(--border-dim);
  }
  .clarity-mini-map span,
  .clarity-cost-grid span,
  .clarity-mini-map span:nth-child(odd),
  .clarity-cost-grid span:nth-child(odd) {
    border-right: 0;
  }
  .clarity-mini-map span:nth-last-child(2),
  .clarity-cost-grid span:nth-last-child(2) {
    border-bottom: 1px solid var(--border-dim);
  }
  .evidence-row,
  .evidence-row.wide {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .monitor-split { grid-template-columns: 1fr; }
  .monitor-pane + .monitor-pane { border-left: 0; border-top: 1px solid var(--border); }
  .queue li { padding: 12px 16px; }
  .mp-head { padding: 12px 16px; }
  .mp-foot { padding: 12px 16px; }

  .role-section-split { grid-template-columns: 1fr; gap: 8px; }
  .role-section-split .role-mini:first-child { border-radius: var(--r-md); border-right: 1px solid var(--border); }
  .role-section-split .role-mini:last-child { border-radius: var(--r-md); }
  .role-tabs { display: none; }
  .reqlist .req { grid-template-columns: 90px 1fr 50px; }
  .staff-queue li { grid-template-columns: 50px 1fr auto; }
  .staff-queue li > .chip:nth-child(4) { display: none; }

  .security-workspace { grid-template-columns: 1fr; }
  .sec-side { border-right: 0; border-bottom: 1px solid var(--border); }
  .sec-side-list { flex-direction: row; flex-wrap: wrap; }
  .sec-side-list li { grid-template-columns: 14px auto auto; padding: 6px 10px; font-size: 12px; }
  .sec-side-foot { display: none; }
  .sec-row { grid-template-columns: 1fr; gap: 8px; padding: 14px 16px; }
  .sec-row .hr-pill { justify-self: start; }
  .sec-toggle { justify-self: start; }
  .sec-log li { grid-template-columns: 50px 1fr; }
  .sec-log li .chip { display: none; }
}

@media (max-width: 380px) {
  .topbar-right .btn-primary { display: none; }
  .hero-headline { font-size: 28px; }
  .table-head, .table-body li { grid-template-columns: 40px 1fr; }
  .table-head > span:nth-child(3),
  .table-body li > span:nth-child(3) { display: none; }
}

button:focus-visible,
a:focus-visible,
[role="tab"]:focus-visible,
input:focus-visible,
select:focus-visible {
  outline-offset: 2px;
}

/* =========================================================================
   POLICY PAGES (Terms of Service / Privacy Policy / Cookie Policy)
   These pages use the same .app-shell + .sidebar + .topbar + .site-footer
   chrome as the landing page. The styles below are scoped to the policy-
   specific containers only (.document-header, .toc-section, .scrollspy-*,
   .document-content). No serif anywhere — body, headings, accents, all
   use var(--font) (Inter). Colors, radii, gutters, and shadows pull
   directly from the landing page tokens so the visual system is unified.
   ========================================================================= */

/* ---------- Document hero ---------- */
.policy-page .document-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 56px var(--gutter) 40px;
}
.policy-page .document-header-content {
  max-width: 1100px;
  margin: 0 auto;
}
.policy-page .document-title {
  font-family: var(--font);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.12;
  color: var(--ink);
  margin-bottom: 22px;
}
.policy-page .document-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: 22px;
}
.policy-page .document-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.policy-page .document-meta-label {
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.policy-page .document-meta-item > span:last-child {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.policy-page .document-description {
  font-family: var(--font);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 1100px;
}

/* ---------- Table of contents ---------- */
.policy-page .toc-section {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 36px var(--gutter);
}
.policy-page .toc-content {
  max-width: 1100px;
  margin: 0 auto;
}
.policy-page .toc-title {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 18px;
}
.policy-page .toc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}
.policy-page .toc-item {
  display: flex;
  align-items: center;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.policy-page .toc-item:hover {
  border-color: var(--border-strong);
  transform: translateX(3px);
}
.policy-page .toc-number {
  font-family: var(--font);
  font-weight: 600;
  color: var(--text-3);
  margin-right: 12px;
  min-width: 26px;
}

/* ---------- Sticky in-page scrollspy bar ---------- */
.policy-page .scrollspy-fixedbar {
  position: fixed;
  top: var(--topbar-h);
  left: var(--rail-w);
  right: 0;
  background: var(--topbar-bg);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border);
  z-index: 40;
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
.policy-page .scrollspy-fixedbar.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.policy-page .scrollspy-inner {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
}
.policy-page .scrollspy-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
}
.policy-page .scrollspy-current {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
}
.policy-page .scrollspy-fixedbar.is-open .scrollspy-current { color: var(--ink); }
.policy-page .scrollspy-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 160ms ease;
}
.policy-page .scrollspy-chevron svg path { stroke: var(--text-3); }
.policy-page .scrollspy-fixedbar.is-open .scrollspy-chevron { transform: rotate(180deg); }
.policy-page .scrollspy-dropdown {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
  max-height: 0;
  overflow: hidden;
  transition: max-height 160ms ease;
}
.policy-page .scrollspy-fixedbar.is-open .scrollspy-dropdown {
  max-height: var(--scrollspy-dropdown-max, 220px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.policy-page .scrollspy-dropdown-inner {
  padding: 8px var(--gutter);
}
.policy-page .scrollspy-item {
  display: block;
  padding: 7px 0;
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.policy-page .scrollspy-item:hover { color: var(--ink); }

/* ---------- Document content ---------- */
.policy-page .document-content {
  padding: 56px var(--gutter) 72px;
  background: var(--page-bg);
}
.policy-page .content-wrapper {
  max-width: 1100px;
  margin: 0 auto;
}
.policy-page .document-content .section {
  /* Pulled the line further up — tight against the previous
     section's last line — and pushed more breathing room between
     the line and the next heading so the rhythm reads "content,
     line close, then a clear gap before the next heading." */
  margin-bottom: 8px;
  scroll-margin-top: 124px;
  padding-top: 52px;
  border-top: 1px solid var(--border);
}
.policy-page .document-content .section:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.policy-page .section-title {
  font-family: var(--font);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.18;
  color: var(--ink);
  margin: 0 0 22px;
  /* Block-level, flush left — no flex layout (which previously
     introduced a gap between the section number and the heading
     text that read as an indent). The number now sits inline as
     part of the heading line. */
  display: block;
  text-align: left;
  text-indent: 0;
  padding-left: 0;
}
.policy-page .section-number {
  font-family: var(--font);
  font-weight: 600;
  color: var(--text-3);
  font-size: 0.85em;
  letter-spacing: -0.005em;
  margin-right: 6px;
}
.policy-page .subsection { margin-bottom: 30px; }
.policy-page .subsection-title {
  font-family: var(--font);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-bottom: 14px;
}
.policy-page .content-text {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.policy-page .content-list {
  margin: 14px 0 16px;
  padding-left: 24px;
}
.policy-page .content-list li {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

/* Notice + info boxes — restyled to brand chrome */
.policy-page .notice-box,
.policy-page .info-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 20px;
  margin: 20px 0;
  font-family: var(--font);
}
.policy-page .notice-box { border-left: 3px solid var(--cat-upper); }
.policy-page .info-box   { border-left: 3px solid var(--cat-core); }
.policy-page .notice-title,
.policy-page .info-title {
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}
.policy-page .notice-title { color: var(--cat-upper); }
.policy-page .info-title   { color: var(--cat-core); }

/* The original policy markup includes <div class="divider"></div>
   elements between sections. Those collided with the section's own
   border-top, producing a double-line look. Hide them — the single
   border-top + 14px padding above each section title is enough
   separation. */
.policy-page .divider {
  display: none;
}

.policy-page .contact-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 28px 32px;
  margin: 48px 0;
  box-shadow: var(--shadow-1);
}
.policy-page .contact-title {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-bottom: 16px;
}
.policy-page .contact-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 10px;
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.6;
}
.policy-page .contact-label {
  font-family: var(--font);
  font-weight: 600;
  color: var(--text-3);
  min-width: 150px;
  letter-spacing: 0.005em;
}
.policy-page .contact-value { color: var(--ink); }
.policy-page .contact-link  { color: var(--cat-core); text-decoration: none; }
.policy-page .contact-link:hover { text-decoration: underline; }

/* Policy pages don't have a left rail in mobile; collapse scrollspy left
   offset so the bar spans full viewport width. */
@media (max-width: 880px) {
  .policy-page .scrollspy-fixedbar { left: 0; }
  .policy-page .document-header,
  .policy-page .toc-section,
  .policy-page .document-content { padding-left: 18px; padding-right: 18px; }
}

/* Force Inter (var(--font)) on every text node inside the policy main
   content. This catches inline <em>, <strong>, <span>, <a>, <li>, and
   any UA-default serif that might leak through. */
.policy-page .document-header,
.policy-page .document-header *,
.policy-page .toc-section,
.policy-page .toc-section *,
.policy-page .scrollspy-fixedbar,
.policy-page .scrollspy-fixedbar *,
.policy-page .document-content,
.policy-page .document-content * {
  font-family: var(--font);
}