/* ============================================================
   Allocra Portfolio X-Ray  ·  v1.0
   Brand v2.2: Deep Green / Amber / Surface Cream / Poppins / Inter
   ============================================================ */

:root {
  --deep-green: #1B5E20;
  --teal: #00897B;
  --amber: #FF8F00;
  --amber-soft: #FFC078;
  --surface-cream: #FAFAF7;
  --ink: #0F172A;
  --slate: #6B7280;
  --slate-soft: #9CA3AF;
  --white: #FFFFFF;
  --line: #E5E7EB;
  --hover: #F3F4F6;
  --card-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

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

html { font-size: 16px; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--surface-cream);
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

.container {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================================
   Site header
   ============================================================ */

.site-header {
  background: var(--surface-cream);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}
.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.brand-mark {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--deep-green);
}
.brand-mark-triangle {
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 16px solid var(--deep-green);
}
.brand-mark-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.2px;
}
.site-header nav {
  display: flex;
  gap: 24px;
}
.site-header nav a {
  color: var(--slate);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.15s;
}
.site-header nav a:hover { color: var(--deep-green); }

/* ============================================================
   Hero
   ============================================================ */

.hero {
  padding: 48px 0 32px;
}
.eyebrow {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--slate);
  letter-spacing: 1px;
  margin-bottom: 16px;
}
.hero h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 40px;
  line-height: 1.15;
  color: var(--deep-green);
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}
.hero .subhead {
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 16px;
  max-width: 600px;
}
.hero .meta {
  font-size: 13px;
  color: var(--slate);
}

/* ============================================================
   Cards
   ============================================================ */

.card {
  background: var(--white);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  padding: 28px;
  margin-bottom: 24px;
}
.card h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--deep-green);
  margin-bottom: 8px;
}
.card-meta {
  font-size: 13px;
  color: var(--slate);
  margin-bottom: 16px;
}

/* ============================================================
   Input card
   ============================================================ */

/* Quick start section */
.quick-start {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}

.example-portfolios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.example-portfolio-btn {
  display: block;
  text-align: left;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.example-portfolio-btn:hover {
  border-color: var(--deep-green);
  background: rgba(27, 94, 32, 0.02);
}
.example-portfolio-btn:active {
  transform: translateY(1px);
}
.example-portfolio-btn .ex-title {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--deep-green);
  margin-bottom: 2px;
}
.example-portfolio-btn .ex-tickers {
  display: block;
  font-size: 12px;
  color: var(--slate);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.example-portfolio-btn .ex-lesson {
  display: block;
  font-size: 12px;
  color: var(--ink);
  font-style: italic;
  opacity: 0.75;
}

/* Strict 3x3 grid on desktop / tablet. The POPULAR_TICKERS array in
   xray.js is intentionally ordered to lay out as three rows of three
   meaningful pairings (global / S&P 500 trackers / tech / dividend /
   emerging / UK home bias / bond ETFs). Visual rhythm matters here
   because the grid is the first thing the reader sees after the
   example portfolios and it needs to read as a curated set, not a
   shopping list. On narrower screens we drop to 2 columns at <=640px
   and 1 column at <=380px so each button stays comfortably tappable. */
.popular-etfs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
}
@media (max-width: 640px) {
  .popular-etfs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
  .popular-etfs { grid-template-columns: 1fr; }
}

.popular-etf-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.15s, background 0.15s;
  /* Removed min-width: 110px since grid columns now define the width.
     Long ETF names (e.g. "SPDR Bloomberg Global Aggregate") will
     truncate gracefully via overflow rather than push the grid wider. */
  overflow: hidden;
  text-align: left;
}
.popular-etf-btn .pop-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.popular-etf-btn:hover {
  border-color: var(--deep-green);
  background: rgba(27, 94, 32, 0.02);
}
.popular-etf-btn.added {
  border-color: var(--deep-green);
  background: rgba(27, 94, 32, 0.06);
  cursor: default;
}
.popular-etf-btn.added .pop-ticker::after {
  content: ' ✓';
  color: var(--deep-green);
}
.popular-etf-btn .pop-ticker {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--deep-green);
}
.popular-etf-btn .pop-name {
  font-size: 11px;
  color: var(--slate);
  margin-top: 2px;
}

.custom-search-wrap {
  /* purely a grouping wrapper */
}

.chips-section {
  padding-top: 8px;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}

.field-label {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--slate);
  margin-bottom: 8px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.field-meta {
  font-size: 13px;
  color: var(--slate);
  margin-bottom: 12px;
}
.search-wrap {
  position: relative;
}
#etf-search {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--ink);
  background: var(--white);
  transition: border-color 0.15s;
}
#etf-search:focus {
  outline: none;
  border-color: var(--deep-green);
}
.autocomplete-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
  list-style: none;
  margin-top: 4px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 10;
}
.autocomplete-list:empty { display: none; }
.autocomplete-list li {
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.autocomplete-list li:last-child { border-bottom: none; }
.autocomplete-list li:hover,
.autocomplete-list li.focused {
  background: var(--hover);
}
.autocomplete-list li .ac-ticker {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--deep-green);
}
.autocomplete-list li .ac-name {
  font-size: 13px;
  color: var(--slate);
}

/* ============================================================
   No-results state in the autocomplete. Different shape from a
   regular suggestion row: not selectable, not :hover-able, just
   a tier-aware explanation + the subscription value-prop.
   Used when the user types a ticker we don't carry (e.g. VUAG).
   ============================================================ */
.autocomplete-list li.ac-noresults {
  display: block;
  padding: 14px 16px;
  background: var(--surface-cream);
  cursor: default;
  white-space: normal;
  border-bottom: none;
}
.autocomplete-list li.ac-noresults:hover {
  background: var(--surface-cream);
}
.autocomplete-list li.ac-noresults .ac-noresults-headline {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--deep-green);
  margin-bottom: 6px;
}
.autocomplete-list li.ac-noresults .ac-noresults-body {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 8px;
}
.autocomplete-list li.ac-noresults .ac-noresults-upgrade {
  font-size: 12px;
  color: var(--slate);
  line-height: 1.55;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.autocomplete-list li.ac-noresults .ac-substitute-btn {
  display: inline-block;
  margin-top: 4px;
  padding: 6px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--surface-cream);
  background: var(--amber);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.autocomplete-list li.ac-noresults .ac-substitute-btn:hover {
  background: #E67E00;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
  min-height: 0;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 14px;
  background: rgba(27, 94, 32, 0.08);
  border: 1px solid rgba(27, 94, 32, 0.18);
  border-radius: 20px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--deep-green);
}
.chip button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--deep-green);
  font-size: 18px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0.6;
}
.chip button:hover {
  opacity: 1;
  background: rgba(27, 94, 32, 0.1);
}

.allocation-controls {
  margin: 16px 0;
  padding: 16px;
  background: rgba(15, 23, 42, 0.02);
  border-radius: 8px;
}
.allocation-inputs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.allocation-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.allocation-row .alloc-ticker {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: var(--deep-green);
  font-size: 14px;
  flex: 0 0 80px;
}
.allocation-row input[type="number"] {
  width: 80px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  text-align: right;
}
.allocation-row .alloc-pct { color: var(--slate); }
.allocation-total {
  margin-top: 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--slate);
}
.allocation-total.invalid { color: #DC2626; }

.btn-primary {
  display: block;
  width: 100%;
  padding: 14px 24px;
  background: var(--amber);
  color: var(--white);
  border: none;
  border-radius: 8px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.15s, opacity 0.15s;
}
.btn-primary:hover:not(:disabled) { background: #E67E00; }
.btn-primary:disabled {
  background: var(--slate-soft);
  cursor: not-allowed;
  opacity: 0.5;
}
.helper-text {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--slate);
}

/* ============================================================
   Results section
   ============================================================ */

.results { margin-top: 32px; }

/* Score card (the synthesised hero) */
.score-card {
  background: linear-gradient(135deg, rgba(27, 94, 32, 0.04), rgba(255, 143, 0, 0.04));
  border: 1px solid rgba(27, 94, 32, 0.12);
  padding: 36px 28px;
}
.score-eyebrow {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--slate);
  letter-spacing: 1.5px;
  text-align: center;
  margin-bottom: 16px;
}
.score-row {
  text-align: center;
  margin-bottom: 8px;
}
.score-number {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 88px;
  line-height: 1;
  color: var(--deep-green);
  letter-spacing: -3px;
}
.score-out-of {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 28px;
  color: var(--slate);
  margin-left: 4px;
}
.score-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 18px;
  text-align: center;
  margin-bottom: 20px;
}
.score-label.tone-good { color: #1B5E20; }
.score-label.tone-fair { color: #00897B; }
.score-label.tone-warn { color: #C66E00; }
.score-label.tone-bad { color: #B45309; }

.score-bar {
  position: relative;
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(to right,
    #B45309 0%,
    #C66E00 20%,
    #FF8F00 40%,
    #FFA722 50%,
    #00897B 70%,
    #1B5E20 100%
  );
  margin: 0 0 28px 0;
}
.score-bar-marker {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 4px;
  background: var(--ink);
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.score-components {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.score-component {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  text-align: center;
}
.score-component .comp-label {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  color: var(--slate);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.score-component .comp-value {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: var(--deep-green);
  margin-bottom: 4px;
}
.score-component .comp-detail {
  display: block;
  font-size: 12px;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.35;
}
.score-component .comp-weight {
  display: block;
  font-size: 11px;
  color: var(--slate-soft);
}

.score-overlap-meta {
  font-size: 13px;
  color: var(--slate);
  text-align: center;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

/* Risks card */
.risks-card .risk-item {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.risks-card .risk-item:last-child { border-bottom: none; }
.risk-icon {
  flex: 0 0 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--white);
}
.risk-icon.severity-high { background: #B45309; }
.risk-icon.severity-medium { background: #C66E00; }
.risk-icon.severity-low { background: #5A8B5C; }
.risk-text {
  flex: 1;
}
.risk-text h4 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 4px;
}
.risk-text p {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.55;
}
.risk-text .risk-detail {
  font-size: 13px;
  color: var(--slate-soft);
  margin-top: 4px;
  font-style: italic;
}

.summary-card .summary-text {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table thead th {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--slate);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.data-table thead th.num { text-align: right; }
.data-table tbody td {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink);
}
.data-table tbody td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .ticker-cell {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: var(--deep-green);
}
.data-table .name-cell {
  color: var(--slate);
  font-size: 13px;
}
.data-table .pct-cell {
  font-weight: 600;
  color: var(--ink);
}

/* Stacked bar visualisation */
.bar-stack {
  display: flex;
  width: 100%;
  height: 32px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--hover);
}
.bar-segment {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--white);
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.bar-segment[data-tiny="true"] { color: transparent; }

/* Per-ETF decomposition */
.etf-decomp-row {
  margin-bottom: 20px;
}
.etf-decomp-row:last-child { margin-bottom: 0; }
.etf-decomp-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.etf-decomp-ticker {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: var(--deep-green);
  font-size: 14px;
}
.etf-decomp-name {
  font-size: 12px;
  color: var(--slate);
  margin-left: 8px;
}
.etf-decomp-pct {
  font-size: 13px;
  color: var(--slate);
}

/* ============================================================
   Inline beta-signup card
   ------------------------------------------------------------
   Replaces the old static .cta-card. Posts to /api/beta/signup
   on the same Cloudflare Worker the homepage widget uses.

   Visual register: white card on cream page (not the dark
   green CTA the previous version used) so it reads as
   "next action" rather than "informational panel". Amber
   submit button anchors the eye after the data scroll above.
   ============================================================ */
.signup-card {
  /* Sits inside the .card pattern, but a touch more breathing room
     to mark it as a destination rather than a data card. */
  padding: 32px 28px;
  border: 1px solid var(--line);
  background: var(--white);
  /* Soft amber wash on the top border to nudge attention upward
     from the data cards without competing with the score card. */
  border-top: 3px solid var(--amber);
}

.signup-eyebrow {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--amber);
  margin-bottom: 12px;
}

.signup-headline {
  font-family: 'Poppins', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--deep-green);
  line-height: 1.25;
  margin-bottom: 12px;
}

.signup-subhead {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.65;
  margin-bottom: 24px;
  max-width: 580px;
}

.signup-form {
  display: block;
}

.signup-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}

.signup-input {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.signup-input:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(255, 143, 0, 0.18);
}
.signup-input[aria-invalid="true"] {
  border-color: #C62828;
}

/* Honeypot: visually hidden, still in the DOM for headless bots
   that read inputs out of the source rather than rendered DOM. */
.signup-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.signup-turnstile {
  margin: 16px 0 0;
  min-height: 65px;
}

.signup-error {
  margin: 12px 0 0;
  padding: 10px 12px;
  font-size: 14px;
  color: #C62828;
  background: #FEE8E8;
  border-radius: 6px;
  border-left: 3px solid #C62828;
}

.signup-submit {
  margin-top: 16px;
  width: 100%;
}

.signup-helper {
  margin-top: 12px;
  font-size: 12px;
  color: var(--slate);
  line-height: 1.55;
}

/* Success state replaces the form (same card, animated in). */
.signup-success {
  text-align: center;
  padding: 8px 0 4px;
}
.signup-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--deep-green);
  color: var(--surface-cream);
  margin: 0 auto 16px;
}
.signup-success-headline {
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--deep-green);
  margin-bottom: 10px;
}
.signup-success-body {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.65;
  margin-bottom: 8px;
}
.signup-success-meta {
  font-size: 13px;
  color: var(--slate);
  line-height: 1.55;
  margin: 0;
}

.signup-fallback {
  margin-top: 12px;
  font-size: 14px;
  color: var(--slate);
}
.signup-fallback a {
  color: var(--deep-green);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--amber);
  text-underline-offset: 3px;
}

/* Mobile tuning. The form lives inside .container which already
   handles outer padding; we just compact internals. */
@media (max-width: 640px) {
  .signup-card { padding: 24px 20px; }
  .signup-headline { font-size: 20px; }
  .signup-subhead { font-size: 14px; }
}
@media (max-width: 380px) {
  .signup-card { padding: 20px 16px; }
  .signup-headline { font-size: 19px; }
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  background: var(--white);
  border-top: 1px solid var(--line);
  padding: 32px 0;
  margin-top: 64px;
}
.footer-disclaimer {
  font-size: 13px;
  color: var(--slate);
  margin-bottom: 8px;
  line-height: 1.6;
}
.footer-meta {
  font-size: 12px;
  color: var(--slate-soft);
  margin-bottom: 16px;
}
.footer-links {
  font-size: 12px;
  color: var(--slate);
}
.footer-links a {
  color: var(--slate);
  text-decoration: none;
}
.footer-links a:hover { color: var(--deep-green); }
.footer-links .dot { margin: 0 6px; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 640px) {
  .hero { padding: 32px 0 24px; }
  .hero h1 { font-size: 30px; }
  .hero .subhead { font-size: 16px; }
  .container { padding: 0 16px; }
  .card { padding: 20px; }
  .site-header nav { display: none; }

  /* Score card sized for mobile */
  .score-card { padding: 24px 18px; }
  .score-number { font-size: 64px; letter-spacing: -2px; }
  .score-out-of { font-size: 22px; }
  .score-eyebrow { letter-spacing: 1px; font-size: 11px; }
  .score-bar { margin-bottom: 20px; }
  .score-components { gap: 8px; }
  .score-component { padding: 12px 10px; }

  /* Risks card: tighter icon spacing on narrow widths */
  .risks-card .risk-item { gap: 12px; padding: 14px 0; }
  .risk-icon { flex: 0 0 32px; height: 32px; font-size: 16px; }

  /* Tables: allow horizontal scroll if content overflows */
  .data-table { font-size: 13px; }
  .card:has(.data-table) { overflow-x: auto; }
  .data-table .name-cell { font-size: 12px; }

  /* Allocation rows: keep horizontal at mobile, but compact */
  .allocation-row .alloc-ticker { flex: 0 0 64px; font-size: 13px; }
  .allocation-row input[type="number"] { width: 72px; }

  /* Geo + sector bars: hide segment labels on mobile (table below carries names).
     Per-ETF bars keep their "Unique X% / Shared Y%" labels (readable at 25%+ widths). */
  #geo-stack .bar-segment,
  #sector-stack .bar-segment { color: transparent; }
}

/* Extra-narrow phones (iPhone SE, older Android) */
@media (max-width: 380px) {
  .hero h1 { font-size: 26px; }
  .hero .subhead { font-size: 15px; }
  .score-number { font-size: 56px; }
  .score-out-of { font-size: 20px; }
  .card { padding: 16px; }
  .score-card { padding: 20px 14px; }
}