/* ==============================================================
   College dossiers (an Admission Science tool) — shared styles
   for the homepage + 209 dossier pages.

   Design language: Admission Science brand (www.admissionscience.com).
     - Fira Sans for display type (headings, stats)
     - Source Sans 3 for body copy and label furniture
     - Merriweather italic for accents (mottoes, the hero em)
     - White/light-gray surfaces, deep navy panels, AS-blue primary
       accent with green/gold/red support colors

   Sections:
     1. Tokens & base
     2. Shared furniture (labels, notes, cards, focus, selection)
     3. Dossier pages (topbar, hero, stats tray, sections, moves, CTA)
     4. Homepage (hero, search, featured, browse, footer)
     5. Motion, print

   No dark mode by design: Admission Science is always the clean
   white look, so the site renders identically in any OS appearance.
   ============================================================== */

/* ============================================================
   1. Tokens & base
   ============================================================ */

:root {
  /* surfaces */
  --paper:#f7f8fa;          /* page background — soft cool gray so white cards float */
  --card:#ffffff;           /* raised card surface */
  --panel:#23323f;          /* deep navy panel (heroes, vibe, CTA) */
  --panel-2:#1a2733;        /* darker panel edge */

  /* ink */
  --ink:#161e2a;            /* primary text — AS heading navy */
  --ink-soft:#414c57;       /* secondary text */
  --muted:#5d6874;          /* tertiary / labels on paper */
  --faint:#98a2ad;          /* hairline-adjacent text */

  /* lines */
  --line:#e6eaee;           /* hairline on paper */
  --line-strong:#d3dae0;

  /* accents */
  --blue:#0072ef;           /* AS primary blue */
  --blue-deep:#005cc4;
  --gold:#8a6100;           /* AS badge gold */
  --coral:#c0442e;          /* alert / cost */
  --green:#1c7d4d;          /* affirmative — AS badge green */
  --highlight:#faf1a2;      /* AS yellow marker highlight */

  /* AS badge pill palette (from admissionscience.com) */
  --badge-green-bg:#dff5e1;  --badge-green-ink:#14532d;
  --badge-blue-bg:#e5f0fa;   --badge-blue-ink:#1e3a8a;
  --badge-gold-bg:#fff6cc;   --badge-gold-ink:#7c5200;

  /* on-panel colors */
  --on-panel:#f4f7f9;
  --on-panel-soft:rgba(244,247,249,.78);
  --on-panel-faint:rgba(244,247,249,.55);
  --panel-line:rgba(244,247,249,.12);

  /* type */
  --display:'Fira Sans', 'Source Sans 3', system-ui, sans-serif;
  --sans:'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif;
  --serif-accent:'Merriweather', Georgia, serif;

  /* geometry — AS uses flat, gently rounded surfaces */
  --radius:10px;
  --radius-sm:8px;

  /* elevation — kept subtle; the AS look is mostly flat */
  --shadow-soft:0 1px 2px rgba(22,28,35,.05), 0 3px 10px rgba(22,28,35,.04);
  --shadow-lift:0 2px 5px rgba(22,28,35,.07), 0 10px 24px rgba(22,28,35,.07);
  --shadow-deep:0 12px 36px rgba(8,14,20,.22);
}

* { margin:0; padding:0; box-sizing:border-box }

/* Always light — the browser must not auto-darken form controls */
html { scroll-behavior:smooth; color-scheme:light }

body {
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  min-height:100vh;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a { color:inherit }

::selection { background:rgba(0,114,239,.22) }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:2px;
  border-radius:4px;
}

/* ============================================================
   2. Shared furniture
   ============================================================ */

/* Dossier label — the small uppercase furniture everywhere */
.info-label, .wide-label, .strategy-title, .insight-title, .fit-label,
.stat-label, .money-label, .multiplier-label, .hero-type,
.section-eyebrow, .home-eyebrow, .topbar-file {
  font-family:var(--sans);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.14em;
}

/* Generic raised card */
.info-card, .wide-card, .money-box, .alumni-card, .also-card {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-soft);
}

/* ============================================================
   3. Dossier pages
   ============================================================ */

/* --- Top chrome: sticky ink bar --- */
.topbar {
  position:sticky;
  top:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:13px 22px;
  background:rgba(26,39,51,.88);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid rgba(244,247,249,.08);
}
.topbar-back {
  font-size:13px;
  font-weight:600;
  color:var(--on-panel-soft);
  text-decoration:none;
  letter-spacing:.02em;
  transition:color .15s;
  white-space:nowrap;
}
.topbar-back:hover { color:var(--on-panel) }
.topbar-brand {
  font-family:var(--display);
  font-size:17px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--on-panel);
}
.topbar-file {
  font-size:10.5px;
  color:var(--on-panel-faint);
  white-space:nowrap;
}
@media (max-width:560px) {
  .topbar-brand { display:none }
}

/* --- Hero --- */
.hero {
  /* Flat AS navy — no gradients or texture */
  background:var(--panel);
  color:var(--on-panel);
  padding:64px 24px 56px;
  position:relative;
  overflow:hidden;
}
.hero-inner { max-width:800px; margin:0 auto; position:relative }
.hero-type {
  font-size:11px;
  color:#6db4f8;
  margin-bottom:18px;
}
.hero-name {
  font-family:var(--display);
  font-size:clamp(38px, 6vw, 58px);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.01em;
  margin-bottom:10px;
  color:var(--on-panel);
}
.hero-motto {
  font-family:var(--serif-accent);
  font-size:17px;
  color:var(--on-panel-faint);
  font-style:italic;
  margin-bottom:22px;
}
.hero-loc {
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--on-panel-faint);
  margin-bottom:28px;
}
.hero-flavor {
  font-size:18px;
  line-height:1.8;
  color:var(--on-panel-soft);
  max-width:680px;
}
.hero-flavor strong { color:var(--on-panel); font-weight:600 }

/* --- Stats tray: lifted out of the hero --- */
.stats-bar { padding:0 24px; position:relative; z-index:2 }
.stats-inner {
  max-width:880px;
  margin:-30px auto 0;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lift);
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(128px, 1fr));
  padding:22px 10px;
}
.stat {
  text-align:center;
  padding:6px 14px;
  border-left:1px solid var(--line);
}
.stat:first-child, .stats-inner .stat:nth-child(1) { border-left:none }
.stat-num {
  font-family:var(--display);
  font-size:31px;
  font-weight:700;
  line-height:1.15;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
  white-space:nowrap;
}
.stat-label {
  font-size:11px;
  color:var(--muted);
  margin-top:5px;
}

/* "What does this number mean?" tooltips on the stats tray */
.stat-info { position:relative; display:inline-block; margin-left:6px }
.stat-i {
  font-family:var(--display);
  font-style:italic;
  font-weight:700;
  font-size:10px;
  line-height:1;
  width:15px; height:15px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:var(--paper);
  color:var(--muted);
  cursor:default;
  padding:0;
  vertical-align:1px;
  transition:color .12s, border-color .12s;
}
.stat-i:hover, .stat-i:focus-visible {
  color:var(--blue);
  border-color:var(--blue);
}
.stat-tip {
  position:absolute;
  bottom:calc(100% + 9px);
  left:50%;
  transform:translateX(-50%);
  width:200px;
  background:var(--panel-2);
  color:var(--on-panel-soft);
  font-family:var(--sans);
  font-size:12px;
  font-weight:400;
  line-height:1.5;
  letter-spacing:0;
  text-transform:none;
  text-align:left;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(244,247,249,.14);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  opacity:0;
  visibility:hidden;
  transition:opacity .14s ease;
  pointer-events:none;
  z-index:30;
}
.stat-tip::after {
  content:'';
  position:absolute;
  top:100%; left:50%;
  transform:translateX(-50%);
  border:5px solid transparent;
  border-top-color:var(--panel-2);
}
.stat-i:hover + .stat-tip, .stat-i:focus-visible + .stat-tip,
.stat-info:hover .stat-tip {
  opacity:1;
  visibility:visible;
}
/* Keep the bubble on-screen at the tray's edges */
.stat:first-child .stat-tip { left:0; transform:none }
.stat:first-child .stat-tip::after { left:18px; transform:none }
.stat:last-child .stat-tip { left:auto; right:0; transform:none }
.stat:last-child .stat-tip::after { left:auto; right:14px; transform:none }
.stat-num.blue { color:var(--blue) }
.stat-num.coral { color:var(--coral) }
.stat-num.green { color:var(--green) }
.stat-num.gold { color:var(--gold) }
@media (max-width:760px) {
  .stats-inner { grid-template-columns:repeat(2, 1fr); padding:14px 6px }
  .stat { border-left:none; padding:12px 8px }
  .stat-num { font-size:24px; white-space:normal }
}

/* --- Content column & numbered sections --- */
.content {
  max-width:840px;
  margin:0 auto;
  padding:52px 24px 88px;
  counter-reset:dossier-section;
}
.section { margin-bottom:56px }
.section-title {
  font-family:var(--display);
  font-size:clamp(26px, 3.5vw, 32px);
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.15;
  margin-bottom:22px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:baseline;
  gap:14px;
  position:relative;
}
/* short AS-blue accent bar under each section title */
.section-title::after {
  content:'';
  position:absolute;
  left:0; bottom:-2px;
  width:52px; height:3px;
  background:var(--blue);
  border-radius:2px;
}
.section-title::before {
  counter-increment:dossier-section;
  content:counter(dossier-section, decimal-leading-zero);
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:.1em;
  color:var(--blue);
  transform:translateY(-4px);
  flex-shrink:0;
}

/* --- Info cards --- */
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px }
@media (max-width:620px) { .info-grid { grid-template-columns:1fr } }
.info-card { padding:18px 20px }
.info-label { font-size:11px; color:var(--muted); margin-bottom:8px }
.info-value { font-size:18px; font-weight:600; line-height:1.45 }
.info-value-alert { color:var(--coral) }
.info-value-ok { color:var(--green) }
.info-value-bold { font-weight:700 }
.info-value-gold { color:var(--gold) }
.info-note {
  display:flex;
  gap:9px;
  font-size:15px;
  color:var(--ink-soft);
  margin-top:12px;
  line-height:1.6;
  padding-top:12px;
  border-top:1px dashed var(--line-strong);
}
.info-note::before {
  content:'›';
  color:var(--blue);
  font-weight:700;
  flex-shrink:0;
}

.wide-card { padding:22px 24px; margin-bottom:14px }
.wide-label { font-size:11px; color:var(--muted); margin-bottom:9px }
.wide-text { font-size:16.5px; line-height:1.75; color:var(--ink) }

/* --- Section-level interpretation callout --- */
.metric-note {
  display:flex;
  gap:11px;
  margin-top:16px;
  padding:15px 18px;
  background:linear-gradient(135deg, rgba(138,97,0,.07), rgba(138,97,0,.03));
  border:1px solid rgba(138,97,0,.18);
  border-left:3px solid var(--gold);
  border-radius:10px;
  font-size:15px;
  line-height:1.6;
  color:var(--ink-soft);
}
.metric-note::before {
  content:'i';
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:19px; height:19px;
  border-radius:50%;
  background:var(--gold);
  color:#fff;
  font-family:var(--display);
  font-style:italic;
  font-weight:700;
  font-size:13px;
  flex-shrink:0;
  margin-top:2px;
}

/* --- Multiplier hero callout --- */
.multiplier-callout {
  display:flex;
  align-items:center;
  gap:30px;
  background:var(--panel);
  color:var(--on-panel);
  border:1px solid rgba(0,114,239,.25);
  border-radius:var(--radius);
  padding:30px 34px;
  margin-bottom:16px;
  box-shadow:var(--shadow-lift);
}
.multiplier-num {
  font-family:var(--display);
  font-size:66px;
  font-weight:700;
  line-height:1;
  color:#6db4f8;
  flex-shrink:0;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
.multiplier-body { flex:1; min-width:0 }
.multiplier-label {
  font-size:12px;
  color:#6db4f8;
  margin-bottom:9px;
}
.multiplier-note {
  font-size:16px;
  line-height:1.65;
  color:var(--on-panel-soft);
}
@media (max-width:560px) {
  .multiplier-callout { flex-direction:column; align-items:flex-start; gap:14px; padding:26px }
  .multiplier-num { font-size:54px }
}

/* --- Workshop callout: bright yellow marker box in the strategy section --- */
.workshop-callout {
  display:flex;
  align-items:center;
  gap:22px;
  margin-top:16px;
  padding:22px 24px;
  background:linear-gradient(135deg, #fdf7c0, var(--highlight));
  border:1px solid #e9d668;
  border-radius:var(--radius-sm);
  text-decoration:none;
  color:var(--ink);
  box-shadow:var(--shadow-soft);
  transition:transform .15s, box-shadow .15s;
}
.workshop-callout:hover { transform:translateY(-2px); box-shadow:var(--shadow-lift) }
.workshop-body { flex:1; min-width:0 }
.workshop-hook {
  font-family:var(--display);
  font-size:18.5px;
  font-weight:700;
  line-height:1.4;
  margin-bottom:6px;
}
.workshop-sub { font-size:14.5px; color:var(--ink-soft); line-height:1.55 }
.workshop-btn {
  flex-shrink:0;
  padding:13px 26px;
  background:var(--blue);
  color:#fff;
  border-radius:6px;
  font-weight:700;
  font-size:15px;
  white-space:nowrap;
}
.workshop-callout:hover .workshop-btn { background:var(--blue-deep) }
@media (max-width:620px) {
  .workshop-callout { flex-direction:column; align-items:flex-start; gap:16px }
}

/* --- Strategy panel --- */
.strategy {
  background:linear-gradient(160deg, rgba(0,114,239,.07), rgba(0,114,239,.025));
  border:1px solid rgba(0,114,239,.20);
  border-left:3px solid var(--blue);
  border-radius:var(--radius-sm);
  padding:22px 24px;
  margin-bottom:14px;
}
.strategy-title { font-size:12px; color:var(--blue-deep); margin-bottom:11px }
.strategy-text { font-size:16.5px; line-height:1.75; color:var(--ink) }
.strategy-text strong { font-weight:700 }

/* --- Insider read --- */
.insight { border-radius:var(--radius-sm); padding:24px 26px; margin-bottom:14px }
.insight.wins {
  background:linear-gradient(160deg, rgba(28,125,77,.07), rgba(28,125,77,.025));
  border:1px solid rgba(28,125,77,.20);
  border-left:3px solid var(--green);
}
.insight.wins .insight-title { color:var(--green) }
.insight.tradeoffs {
  background:linear-gradient(160deg, rgba(192,68,46,.06), rgba(192,68,46,.02));
  border:1px solid rgba(192,68,46,.17);
  border-left:3px solid var(--coral);
}
.insight.tradeoffs .insight-title { color:var(--coral) }
.insight-title { font-size:12px; margin-bottom:12px }
.insight-text { font-size:17px; line-height:1.8; color:var(--ink) }

/* --- Fit card --- */
.fit-card {
  border-radius:var(--radius-sm);
  padding:22px 24px;
  background:linear-gradient(160deg, rgba(28,125,77,.07), rgba(28,125,77,.025));
  border:1px solid rgba(28,125,77,.20);
  border-left:3px solid var(--green);
}
.fit-label { font-size:12px; margin-bottom:12px; color:var(--green) }
.fit-list { list-style:none; padding:0; margin:0 }
.fit-list li {
  font-size:16px;
  line-height:1.7;
  color:var(--ink);
  padding:7px 0 7px 26px;
  position:relative;
}
.fit-list li::before {
  content:'';
  position:absolute; left:2px; top:15px;
  width:9px; height:9px;
  border-radius:50%;
  background:rgba(28,125,77,.22);
  box-shadow:inset 0 0 0 2px rgba(28,125,77,.45);
}

/* --- Tags --- */
.tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:8px }
.tag {
  padding:5px 13px;
  background:var(--paper);
  border:1px solid var(--line-strong);
  border-radius:999px;
  font-size:13.5px;
  font-weight:600;
  color:var(--ink-soft);
}

/* --- Money --- */
.money-compare { display:flex; gap:12px; margin-bottom:12px; flex-wrap:wrap }
.money-box {
  flex:1;
  min-width:148px;
  padding:18px 14px 15px;
  text-align:center;
}
.money-amount {
  font-family:var(--display);
  font-size:28px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.money-label { font-size:10.5px; color:var(--muted); margin-top:6px }
.money-amount.green { color:var(--green) }
.money-amount.coral { color:var(--coral) }

/* --- Vibe panel --- */
.vibe-card {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  color:var(--ink);
  box-shadow:var(--shadow-soft);
}
.vibe-text { font-size:16.5px; line-height:1.8; color:var(--ink) }
.vibe-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px }
.vibe-tag {
  padding:5px 13px;
  background:var(--paper);
  border:1px solid var(--line-strong);
  border-radius:999px;
  font-family:var(--sans);
  font-size:12.5px;
  letter-spacing:.04em;
  color:var(--ink-soft);
}

/* --- Alumni / also-consider --- */
.alumni-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width:620px) { .alumni-grid { grid-template-columns:1fr } }
.alumni-card { padding:16px 18px }
.alumni-name { font-weight:700; font-size:16.5px; margin-bottom:4px }
.alumni-note { font-size:15px; color:var(--ink-soft); line-height:1.55 }

.also-card {
  padding:16px 20px;
  margin-bottom:10px;
  display:flex;
  flex-direction:column;
  gap:3px;
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.also-name { font-weight:700; font-size:16.5px }
.also-why { font-size:15px; color:var(--ink-soft); line-height:1.6 }
/* Linked peers open that school's dossier */
a.also-card {
  position:relative;
  text-decoration:none;
  color:var(--ink);
  padding-right:44px;
}
a.also-card::after {
  content:'→';
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  color:var(--blue);
  font-weight:700;
  font-size:16px;
  opacity:.45;
  transition:opacity .15s, transform .15s;
}
a.also-card:hover {
  transform:translateY(-2px);
  border-color:rgba(0,114,239,.45);
  box-shadow:0 10px 26px rgba(0,114,239,.10), var(--shadow-soft);
}
a.also-card:hover .also-name { color:var(--blue-deep) }
a.also-card:hover::after { opacity:1; transform:translate(3px, -50%) }

/* --- CTA --- */
.cta {
  position:relative;
  overflow:hidden;
  background:var(--panel);
  border:1px solid rgba(244,247,249,.07);
  border-radius:var(--radius);
  color:var(--on-panel);
  text-align:center;
  padding:40px 28px 34px;
  margin-top:48px;
  box-shadow:var(--shadow-deep);
}
.cta h3 {
  font-family:var(--display);
  color:var(--on-panel);
  font-size:28px;
  font-weight:700;
  letter-spacing:-.01em;
  margin-bottom:10px;
}
/* AS yellow-marker highlight (the "Distilled to a science" treatment) */
.cta h3 em {
  font-style:normal;
  background:var(--highlight);
  color:var(--ink);
  padding:1px 8px;
  border-radius:4px;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.cta p {
  color:var(--on-panel-soft);
  font-size:15.5px;
  line-height:1.65;
  margin-bottom:22px;
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
}
.btn-cta {
  padding:15px 38px;
  background:var(--blue);
  color:#fff;
  border:none;
  border-radius:6px;
  font-family:var(--sans);
  font-size:15px;
  font-weight:700;
  letter-spacing:.01em;
  cursor:pointer;
  transition:transform .15s, box-shadow .15s;
  box-shadow:0 6px 22px rgba(0,0,0,.25);
}
.btn-cta:hover { transform:translateY(-1px); background:var(--blue-deep); box-shadow:0 10px 30px rgba(0,0,0,.3) }
.btn-cta-link { display:inline-block; text-decoration:none }

/* --- Head-to-head compare table (compare/*.html experiment) --- */
.cmp-table {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.cmp-row {
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr;
  border-bottom:1px solid var(--line);
}
.cmp-row:last-child { border-bottom:none }
.cmp-row > div { padding:13px 18px; font-size:15.5px; line-height:1.5 }
.cmp-row:nth-child(odd):not(.cmp-head) { background:var(--paper) }
.cmp-head {
  background:var(--panel);
}
.cmp-head > div {
  font-family:var(--display);
  font-weight:700;
  font-size:17px;
  color:var(--on-panel);
}
.cmp-head a { color:var(--on-panel); text-decoration:none }
.cmp-head a:hover { text-decoration:underline }
.cmp-metric {
  font-size:12.5px !important;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  align-self:center;
}
.cmp-val { font-weight:600 }
.cmp-more { margin-top:12px; font-size:14.5px; font-weight:700 }
.cmp-more a { color:var(--blue-deep); text-decoration:none }
.cmp-more a:hover { text-decoration:underline }
@media (max-width:560px) {
  .cmp-row > div { padding:10px 10px; font-size:13.5px }
  .cmp-metric { font-size:10.5px !important }
  .cmp-head > div { font-size:14px }
}

/* --- Bottom back link --- */
.profile-back-bottom {
  display:inline-block;
  margin-top:26px;
  padding:13px 26px;
  border:1.5px solid var(--line-strong);
  border-radius:6px;
  font-size:13px;
  font-weight:700;
  color:var(--blue-deep);
  text-decoration:none;
  transition:background-color .15s, border-color .15s;
}
.profile-back-bottom:hover {
  background:rgba(0,114,239,.06);
  border-color:var(--blue);
}

/* ============================================================
   4. Homepage
   ============================================================ */

body.home { background:var(--paper) }

/* --- Hero --- */
.home-hero {
  /* Flat AS navy — no gradients or texture. No overflow:hidden here:
     the search dropdown must be able to extend past the hero's bottom. */
  background:var(--panel);
  color:var(--on-panel);
  padding:92px 24px 110px;
  position:relative;
}
.home-hero-inner {
  max-width:800px;
  margin:0 auto;
  position:relative;
  z-index:1;
  text-align:center;
}
.home-eyebrow {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  color:#6db4f8;
  margin-bottom:26px;
  padding:8px 18px;
  border:1px solid rgba(109,180,248,.30);
  border-radius:999px;
  background:rgba(109,180,248,.07);
}
.home-eyebrow::before, .home-eyebrow::after {
  content:'';
  width:4px; height:4px;
  border-radius:50%;
  background:rgba(109,180,248,.7);
}
.home-title {
  font-family:var(--display);
  font-size:clamp(33px, 6.4vw, 66px);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.015em;
  color:var(--on-panel);
  margin-bottom:20px;
}
/* The manual line break only helps once the headline has room to breathe. */
@media (max-width:680px) { .br-wide { display:none } }
/* Echo the admissionscience.com headline: underlined italic serif accent */
.home-title em {
  font-family:var(--serif-accent);
  font-style:italic;
  font-weight:700;
  font-size:.92em;
  color:var(--on-panel);
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:7px;
}
.home-sub {
  font-size:18px;
  color:var(--on-panel-soft);
  line-height:1.7;
  max-width:580px;
  margin:0 auto 44px;
}

/* --- Search --- */
.search-shell {
  position:relative;
  max-width:580px;
  margin:0 auto 42px;
  text-align:left;
}
.search-bar {
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--card);
  border:2px solid transparent;
  border-radius:10px;
  padding:4px 14px 4px 20px;
  box-shadow:0 14px 38px rgba(0,0,0,.26), 0 2px 8px rgba(0,0,0,.14);
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.search-bar:focus-within {
  border-color:var(--blue);
  box-shadow:0 18px 56px rgba(0,114,239,.38), 0 2px 8px rgba(0,0,0,.18);
  transform:translateY(-1px);
}
.search-icon { width:20px; height:20px; color:var(--muted); flex-shrink:0 }
#search-input {
  flex:1;
  border:none;
  background:transparent;
  font-family:var(--sans);
  font-size:17px;
  font-weight:500;
  color:var(--ink);
  padding:19px 0;
  outline:none;
  min-width:0;
}
#search-input::placeholder { color:var(--muted); font-weight:400 }
.search-clear {
  background:transparent;
  border:none;
  font-size:24px;
  line-height:1;
  color:var(--muted);
  cursor:pointer;
  padding:8px 10px;
  margin:0;
  border-radius:50%;
  transition:background-color .12s, color .12s;
}
.search-clear:hover { background:var(--line); color:var(--ink) }

.search-dropdown {
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  left:0; right:0;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 28px 70px rgba(0,0,0,.30);
  overflow:hidden;
  overflow-y:auto;
  z-index:10;
  max-height:444px;
}
.sr-row {
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 20px;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  color:var(--ink);
  transition:background-color .12s;
  cursor:pointer;
}
.sr-row:last-child { border-bottom:none }
.sr-row:hover, .sr-row-selected { background:rgba(0,114,239,.07) }
.sr-row-main { flex:1; min-width:0 }
.sr-row-name {
  font-family:var(--display);
  font-size:18px;
  font-weight:600;
  line-height:1.25;
  margin-bottom:2px;
  color:var(--ink);
}
.sr-row-meta {
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.03em;
  color:var(--muted);
}
.sr-row-arrow {
  color:var(--blue);
  font-weight:700;
  font-size:16px;
  flex-shrink:0;
  transition:transform .12s;
}
.sr-row:hover .sr-row-arrow, .sr-row-selected .sr-row-arrow { transform:translateX(3px) }
.sr-empty { padding:18px 20px; font-size:14px; color:var(--muted) }

/* --- Trust signals --- */
.trust-signals {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px 30px;
  list-style:none;
  padding:0;
  margin:0 auto;
  max-width:700px;
}
/* AS-style pastel badge pills (mirrors the admissionscience.com hero) */
.trust-signal {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.01em;
  padding:8px 18px;
  border-radius:999px;
}
.trust-signal:nth-child(1) { background:var(--badge-green-bg); color:var(--badge-green-ink) }
.trust-signal:nth-child(2) { background:var(--badge-blue-bg); color:var(--badge-blue-ink) }
.trust-signal:nth-child(3) { background:var(--badge-gold-bg); color:var(--badge-gold-ink) }
.trust-check { font-weight:700; font-size:14px }

/* --- Featured section --- */
.featured { padding:84px 24px 72px; background:var(--paper) }
.featured-inner { max-width:1040px; margin:0 auto }
.section-eyebrow { font-size:11px; color:var(--blue); margin-bottom:10px }
.section-h {
  font-family:var(--display);
  font-size:clamp(28px, 4vw, 40px);
  font-weight:700;
  letter-spacing:-.01em;
  margin-bottom:34px;
  color:var(--ink);
}
.featured-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
  counter-reset:fcard;
}
@media (max-width:1100px) { .featured-grid { grid-template-columns:repeat(3, 1fr) } }
@media (max-width:760px) { .featured-grid { grid-template-columns:repeat(2, 1fr) } }
@media (max-width:480px) { .featured-grid { grid-template-columns:1fr } }

.fcard {
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:178px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:42px 18px 18px;
  text-decoration:none;
  color:var(--ink);
  box-shadow:var(--shadow-soft);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  overflow:hidden;
}
.fcard::before {
  counter-increment:fcard;
  content:'PLAYBOOK ' counter(fcard, decimal-leading-zero);
  position:absolute;
  top:14px; left:18px;
  font-family:var(--sans);
  font-size:9.5px;
  font-weight:500;
  letter-spacing:.16em;
  color:var(--faint);
  transition:color .18s;
}
.fcard::after {
  content:'↗';
  position:absolute;
  top:10px; right:14px;
  font-size:14px;
  color:var(--blue);
  opacity:0;
  transform:translate(-3px, 3px);
  transition:opacity .18s, transform .18s;
}
.fcard:hover {
  transform:translateY(-3px);
  border-color:rgba(0,114,239,.45);
  box-shadow:0 14px 34px rgba(0,114,239,.12), var(--shadow-soft);
}
.fcard:hover::before { color:var(--blue) }
.fcard:hover::after { opacity:1; transform:translate(0,0) }
.fcard-name {
  font-family:var(--display);
  font-size:21px;
  font-weight:600;
  line-height:1.22;
  letter-spacing:-.005em;
  margin-bottom:5px;
}
.fcard-meta {
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:.06em;
  color:var(--muted);
  margin-bottom:11px;
}
.fcard-flavor {
  font-size:14.5px;
  line-height:1.6;
  color:var(--ink-soft);
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Skeleton loading state */
.fcard-skeleton { background:var(--card); pointer-events:none }
.fcard-skeleton::before, .fcard-skeleton::after { content:none }
.fcard-name-skel, .fcard-meta-skel, .fcard-flavor-skel {
  background:linear-gradient(90deg, var(--line) 0%, rgba(231,223,208,.35) 50%, var(--line) 100%);
  background-size:200% 100%;
  animation:skeleton 1.6s ease-in-out infinite;
  border-radius:6px;
}
.fcard-name-skel { height:18px; margin-bottom:8px; width:70% }
.fcard-meta-skel { height:12px; margin-bottom:14px; width:45% }
.fcard-flavor-skel { height:48px; width:100% }
@keyframes skeleton {
  0% { background-position:200% 0 }
  100% { background-position:-200% 0 }
}
.fcard-error {
  grid-column:1 / -1;
  padding:24px;
  text-align:center;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--coral);
  font-size:14px;
}

/* --- Head-to-head links on the homepage --- */
.cmp-shell { margin-top:48px; text-align:center }
.cmp-shell-label {
  font-family:var(--sans);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:11.5px;
  color:var(--muted);
  margin-bottom:14px;
}
.cmp-links { display:flex; flex-wrap:wrap; justify-content:center; gap:9px }
.cmp-pill {
  padding:8px 17px;
  background:var(--card);
  border:1px solid var(--line-strong);
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  color:var(--ink-soft);
  text-decoration:none;
  transition:border-color .15s, color .15s, box-shadow .15s;
}
.cmp-pill:hover {
  border-color:var(--blue);
  color:var(--blue-deep);
  box-shadow:var(--shadow-soft);
}

/* --- Browse all --- */
.browse-shell { margin-top:44px; text-align:center }
.browse-toggle {
  background:transparent;
  border:1.5px solid var(--line-strong);
  border-radius:6px;
  padding:14px 30px;
  font-family:var(--sans);
  font-size:14px;
  font-weight:600;
  color:var(--ink-soft);
  cursor:pointer;
  transition:border-color .15s, color .15s, background-color .15s;
}
.browse-toggle:hover, .browse-toggle:focus-visible {
  border-color:var(--blue);
  color:var(--blue);
  outline:none;
}
.browse-list {
  display:none;
  margin-top:28px;
  text-align:left;
  grid-template-columns:repeat(3, 1fr);
  gap:4px 20px;
}
@media (max-width:900px) { .browse-list { grid-template-columns:repeat(2, 1fr) } }
@media (max-width:520px) { .browse-list { grid-template-columns:1fr } }
.browse-row {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  padding:11px 10px;
  border-bottom:1px dashed var(--line-strong);
  text-decoration:none;
  color:var(--ink);
  font-size:15px;
  border-radius:6px;
  transition:background-color .12s;
}
.browse-row:hover { background:rgba(0,114,239,.05) }
.browse-row:hover .browse-name { color:var(--blue) }
.browse-name { font-weight:600; transition:color .12s }
.browse-meta {
  font-family:var(--sans);
  font-size:10.5px;
  letter-spacing:.02em;
  color:var(--muted);
  white-space:nowrap;
  text-align:right;
}

/* --- Footer --- */
.home-foot {
  background:var(--panel);
  color:var(--on-panel-faint);
  padding:38px 24px;
  text-align:center;
  border-top:1px solid rgba(244,247,249,.06);
}
.home-foot-inner { max-width:780px; margin:0 auto }
.home-foot-brand {
  display:inline-block;
  font-family:var(--display);
  font-size:21px;
  font-weight:600;
  color:var(--on-panel);
  margin-bottom:7px;
  letter-spacing:.01em;
  text-decoration:none;
  transition:color .15s;
}
.home-foot-brand:hover { color:#6db4f8 }
.home-foot-tag { font-size:13px; color:var(--on-panel-faint) }
.foot-links {
  margin-top:10px;
  display:flex;
  justify-content:center;
  gap:10px;
  font-size:13px;
  color:var(--on-panel-faint);
}
.foot-links a {
  color:var(--on-panel-faint);
  text-decoration:none;
  transition:color .15s;
}
.foot-links a:hover { color:var(--on-panel); text-decoration:underline }

/* ============================================================
   5. Motion & print
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto }
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

@media print {
  .topbar, .cta, .profile-back-bottom, .search-shell, .browse-shell, .workshop-callout { display:none !important }
  body { background:#fff; color:#000 }
  .hero, .vibe-card, .multiplier-callout { background:#fff !important; color:#000 !important; border:1px solid #999; box-shadow:none }
  .hero-name, .hero-flavor, .hero-flavor strong, .multiplier-note, .vibe-text { color:#000 !important }
  .stats-inner, .info-card, .wide-card, .money-box, .alumni-card, .also-card { box-shadow:none }
}