:root {
    --bg: #f4f0f1;
    --card: #ffffff;
    --text: #1a1a1a;
    --muted: #667085;
    --line: #dde4ee;
    --primary: #4A6FA5;
    --primary-dark: #1F2A44;
}
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body { margin: 0; font: 16px/1.45 Inter, Arial, sans-serif; color: var(--text); background: var(--bg); }
.page-shell { max-width: 820px; margin: 0 auto; padding: 16px; }
.page-home .page-shell {
    min-height: 100svh;
    display: grid;
    align-content: center;
}
.site-header.centered { display:flex; justify-content:center; align-items:center; }
.home-header { padding: clamp(14px, 2.8vh, 26px) 0 clamp(10px, 1.8vh, 16px); }
.subpage-header { padding: 8px 0 6px; }
.brand { color: var(--primary-dark); font-weight:700; text-decoration:none; font-size:1.15rem; }
.logo { width:auto; max-width:min(92vw, 540px); }
.logo-home {
    height: clamp(92px, 18svh, 150px);
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.10));
}
.logo-sub {
    height: clamp(52px, 8svh, 72px);
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.08));
}
.page-content { display:grid; gap:16px; margin-top: 4px; }
.card { background: var(--card); border-radius:16px; padding:18px; box-shadow:0 10px 25px rgba(16,24,40,0.05); }
.hero h1, .prose h1 { margin:0 0 10px; font-size:1.75rem; line-height:1.15; }
.hero p { margin: 0 0 10px; }
.prose h2, .question-card h2 { margin:0 0 8px; font-size:1.05rem; }
.question-card h3 { margin:10px 0 8px; font-size:0.95rem; }
.muted { color: var(--muted); }
.small { font-size:0.9rem; }
.stack-actions, .stack-form { display:grid; gap:12px; }
.link-stack + .stack-actions { margin-top: 16px; }
.trust-grid, .results-summary, .score-breakdown, .results-items, .hero-points { display:grid; gap:10px; }
.btn, .category-card, .filter-pill, .answer-chip span, .top-nav-link { transition: transform 0.15s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; }
.btn {
    display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:12px 16px;
    border-radius:12px; text-decoration:none; border:0; cursor:pointer; font-weight:600;
    box-shadow: 0 3px 8px rgba(16,24,40,0.06);
}
.btn.primary { background: var(--primary); color:white; }
.btn.secondary { background:#edf2f8; color: var(--primary-dark); }
.btn.tertiary { background:#fff; color: var(--primary-dark); border:1px solid var(--line); min-height:40px; padding:10px 12px; box-shadow:none; }
.btn:hover, .category-card:hover, .filter-pill:hover, .top-nav-link:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(16,24,40,0.12); }
.btn:active, .top-nav-link:active { transform: translateY(0) scale(0.98); box-shadow: 0 4px 10px rgba(16,24,40,0.14); }
input[type="text"] { width:100%; min-height:44px; border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-top:6px; }
label span, legend { font-weight:600; display:block; }
.fieldset { border:1px solid var(--line); border-radius:14px; padding:12px; }
.check-row { display:flex; align-items:center; gap:10px; line-height:1.2; }
.check-row input { width:18px; height:18px; margin:0; flex-shrink:0; accent-color:#22c55e; }
.check-row span { display:inline; font-weight:500; }
.check-row.with-tooltip { justify-content:space-between; align-items:flex-start; gap:12px; }
.check-main { display:flex; align-items:flex-start; gap:10px; flex:1; }
.check-copy { display:grid; gap:4px; }
.consent-box { padding:10px; border:1px solid var(--line); border-radius:12px; background:#fbfcfe; align-items:flex-start; }
.notice.error, .notice.info { padding:12px; border-radius:12px; }
.notice.error { background:#fff1f1; color:#8f1d1d; border:1px solid #f1c1c1; }
.notice.info { background:#eef4fb; color: var(--primary-dark); border:1px solid #cfdff2; }
.progress-head, .result-row, .nav-row, .result-item-top, .category-hero { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.progress-meta { color: var(--muted); font-weight:600; }
.progress-bar { width:100%; height:10px; border-radius:999px; background:#e8edf5; overflow:hidden; margin:10px 0 16px; }
.progress-bar span { display:block; height:100%; background: var(--primary); }
.question-card { display:grid; gap:10px; border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:14px; }
.answer-block { margin-top:8px; }
.answer-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.lifestyle-grid { grid-template-columns:1fr 1fr; }
.answer-chip { position:relative; }
.answer-chip input { position:absolute; opacity:0; pointer-events:none; }
.answer-chip span { display:flex; align-items:center; justify-content:center; min-height:44px; border:1px solid var(--line); border-radius:12px; padding:10px; text-align:center; background:#fff; font-weight:500; }
.answer-chip input:checked + span { border-color: var(--primary); background:#eef4fb; color: var(--primary-dark); }
.answer-chip span:hover { box-shadow: 0 6px 14px rgba(16,24,40,0.08); border-color: var(--primary); }
.badge { background:#edf2f8; color: var(--primary-dark); border-radius:999px; padding:8px 12px; white-space:nowrap; font-size:0.92rem; }
.simple-list { padding-left:18px; }
.top-nav {
    display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:center;
    padding: 10px; position: sticky; top: 8px; z-index: 20;
}
.top-nav-link {
    text-decoration:none; color: var(--primary-dark); font-weight:700; font-size:0.92rem;
    padding:10px 14px; border:1px solid var(--line); border-radius:999px; background:#fff;
}
.top-nav-link.active { background:#eef4fb; border-color: var(--primary); color: var(--primary-dark); }
.info-wrapper { position:relative; }
.info-button {
    display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px;
    border-radius:999px; border:1px solid #cfdff2; background:#eef4fb; color:#1F2A44;
    font-size:12px; font-weight:700; cursor:pointer; flex-shrink:0;
}
.tooltip {
    display:none; position:absolute; right:0; top:calc(100% + 8px); background:white; border:1px solid #dde4ee;
    border-radius:10px; padding:10px; font-size:0.85rem; line-height:1.4; width:min(260px, calc(100vw - 64px));
    box-shadow:0 10px 25px rgba(0,0,0,0.1); z-index:100;
}
.info-wrapper:hover .tooltip,
.info-wrapper:focus-within .tooltip,
.info-wrapper.is-open .tooltip { display:block; }
.eyebrow { font-size:0.85rem; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; color: var(--muted); margin-bottom:8px; }
.results-hero .subhead { margin-top:0; color: var(--muted); }
.score-row { display:grid; gap:16px; margin-top:16px; }
.score-circle { border:1px solid var(--line); border-radius:18px; padding:18px; background:linear-gradient(180deg,#fbfdff 0%,#f2f6fb 100%); }
.score-number { font-size:2rem; font-weight:800; color: var(--primary-dark); }
.score-caption { color: var(--muted); font-size:0.95rem; }
.metric { padding:10px 12px; border-radius:12px; background:#f8fafc; border:1px solid var(--line); font-weight:600; }
.insight-row { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; padding:12px 0; border-top:1px solid var(--line); }
.insight-row:first-of-type { border-top:0; }
.insight-badge { display:inline-flex; align-items:center; justify-content:center; min-width:84px; padding:8px 10px; border-radius:999px; font-size:0.82rem; font-weight:700; }
.insight-badge.match { background:#eef8ef; color:#256b2d; }
.insight-badge.explore { background:#fff7e8; color:#8a5b00; }
.insight-badge.mismatch { background:#fff3eb; color:#9a4f12; }
.insight-badge.boundary { background:#fff0f0; color:#8f1d1d; }
.category-card { display:flex; justify-content:space-between; align-items:center; gap:14px; text-decoration:none; color: var(--text); padding:14px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.category-meta { display:grid; justify-items:end; gap:6px; }
.category-percent { font-size:1.2rem; font-weight:800; color: var(--primary-dark); }
.category-percent.large { font-size:2rem; }
.filter-row { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.filter-pill { text-decoration:none; border:1px solid var(--line); border-radius:999px; padding:8px 12px; color: var(--primary-dark); background:#fff; font-weight:600; }
.filter-pill.active { background:#eef4fb; border-color: var(--primary); }
.result-item { border:1px solid var(--line); border-radius:14px; padding:14px; background:#fff; }
.result-item.match { background:#fbfffb; }
.result-item.explore { background:#fffdfa; }
.result-item.mismatch { background:#fffdfb; }
.result-item.boundary { background:#fffafa; }
.compare-grid { display:grid; gap:10px; margin-top:10px; }
.compare-card { border:1px solid var(--line); border-radius:12px; padding:12px; background:#fff; }
.compare-name { font-weight:700; margin-bottom:6px; }
.result-note { margin-top:10px; }
.link-actions { display:grid; gap:12px; margin-top:16px; }
.link-actions .btn { width:100%; }
@media (max-width: 480px) {
    .answer-grid, .lifestyle-grid { grid-template-columns:1fr; }
    .top-nav { justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; }
    .top-nav-link { white-space:nowrap; }
}
@media (min-width: 600px) {
    .hero-points { grid-template-columns:1fr 1fr; }
}
@media (min-width: 700px) {
    .score-row { grid-template-columns:220px 1fr; align-items:stretch; }
    .compare-grid { grid-template-columns:1fr 1fr; }
}
@media (min-width: 760px) {
    .trust-grid { grid-template-columns:1fr 1fr; }
}

.link-stack { display:grid; gap:14px; }
.link-field span { margin-bottom:6px; }
.inline-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.inline-actions .btn { flex:0 0 auto; }

.site-footer { margin-top: 16px; padding: 8px 4px 0; text-align: center; color: var(--muted); font-size: 0.88rem; }
.top-nav { margin-bottom: 4px; }
.answer-block + .answer-block { margin-top: 12px; }
.question-card .muted + .answer-block { margin-top: 4px; }
.compare-line { line-height: 1.45; }
.conversation-prompt { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #f8fafc; border: 1px solid var(--line); font-size: 0.95rem; }

.hero .stack-actions { margin-top: 8px; }
.trust-grid > div::first-letter { color: #22c55e; }


.summary-callout { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fbfcfe; margin: 12px 0 14px; display: grid; gap: 6px; }
.category-insights { display: grid; gap: 10px; margin-bottom: 14px; }
.insight-row.compact { padding: 12px 0; }
.insight-badge { min-width: 176px; text-align: center; line-height: 1.15; padding: 10px 12px; white-space: normal; }
.result-item-top { align-items: flex-start; }
.result-item-top .insight-badge { flex: 0 0 176px; }
.result-item-top strong { flex: 1 1 auto; }
@media (max-width: 699px) {
  .insight-row { grid-template-columns: 1fr; }
  .insight-badge, .result-item-top .insight-badge { min-width: 0; flex-basis: auto; width: fit-content; max-width: 100%; }
  .result-item-top { flex-direction: column; }
}

/* Trust pages */
.trust-page h2 {
    font-size: 1.35rem;
    margin-top: 1.75rem;
    margin-bottom: 0.7rem;
}

.trust-page h3 {
    font-size: 1rem;
    margin-top: 1rem;
    margin-bottom: 0.35rem;
}

.trust-page p,
.trust-page ul {
    margin-top: 0;
}

.trust-page ul {
    padding-left: 1.2rem;
}