:root {
  color-scheme: light;
  --bg: #f3f0e9;
  --bg-deep: #e9e4d9;
  --surface: #fffdf8;
  --surface-raised: #ffffff;
  --surface-soft: #eeebe3;
  --ink: #17251f;
  --ink-soft: #35453e;
  --muted: #6c7771;
  --line: #dcd7cc;
  --line-strong: #c8c1b4;
  --primary: #285548;
  --primary-strong: #1d4036;
  --primary-soft: #dce9e1;
  --primary-pale: #edf4ef;
  --gold: #ac7933;
  --gold-soft: #f3e5cb;
  --danger: #a84437;
  --danger-soft: #f8e5e1;
  --shadow: 0 22px 60px rgba(34, 49, 41, .08);
  --shadow-small: 0 8px 28px rgba(34, 49, 41, .07);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 15px;
  --sidebar: 264px;
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: Iowan Old Style, Baskerville, "Times New Roman", serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #13201b;
  --bg-deep: #0d1814;
  --surface: #192923;
  --surface-raised: #20342c;
  --surface-soft: #263931;
  --ink: #f5f2e9;
  --ink-soft: #d7ddd8;
  --muted: #a5b0aa;
  --line: #344a41;
  --line-strong: #456257;
  --primary: #9ac5ae;
  --primary-strong: #c0ddcd;
  --primary-soft: #284a3e;
  --primary-pale: #1e382f;
  --gold: #dfb46e;
  --gold-soft: #46381f;
  --danger: #f19a8f;
  --danger-soft: #4a2926;
  --shadow: 0 22px 60px rgba(0, 0, 0, .2);
  --shadow-small: 0 8px 28px rgba(0, 0, 0, .18);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --bg: #13201b;
    --bg-deep: #0d1814;
    --surface: #192923;
    --surface-raised: #20342c;
    --surface-soft: #263931;
    --ink: #f5f2e9;
    --ink-soft: #d7ddd8;
    --muted: #a5b0aa;
    --line: #344a41;
    --line-strong: #456257;
    --primary: #9ac5ae;
    --primary-strong: #c0ddcd;
    --primary-soft: #284a3e;
    --primary-pale: #1e382f;
    --gold: #dfb46e;
    --gold-soft: #46381f;
    --danger: #f19a8f;
    --danger-soft: #4a2926;
    --shadow: 0 22px 60px rgba(0, 0, 0, .2);
    --shadow-small: 0 8px 28px rgba(0, 0, 0, .18);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--font-sans); text-rendering: optimizeLegibility; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }
.icon { width: 21px; height: 21px; flex: 0 0 auto; }

:focus-visible { outline: 3px solid color-mix(in srgb, var(--gold) 75%, white); outline-offset: 3px; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 999; padding: 11px 17px; border-radius: 10px; background: var(--ink); color: var(--surface); font-weight: 700; transition: top .2s ease; }
.skip-link:focus { top: 14px; }

.eyebrow { margin-bottom: 10px; color: var(--gold); font-size: .73rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 15px; background: var(--surface); }
.brand-mark img { width: 43px; height: 38px; object-fit: contain; }
.brand-copy { display: grid; min-width: 0; }
.brand-copy strong { font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.1; }
.brand-copy small { overflow: hidden; margin-top: 3px; color: var(--muted); font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }

.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 9px; padding: 11px 19px; border: 1px solid transparent; border-radius: 13px; cursor: pointer; font-weight: 750; line-height: 1.2; transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button-primary { background: var(--primary-strong); color: #fffdf8; box-shadow: 0 8px 24px color-mix(in srgb, var(--primary-strong) 20%, transparent); }
:root[data-theme="dark"] .button-primary { color: #10231c; background: var(--primary-strong); }
.button-primary:hover { background: color-mix(in srgb, var(--primary-strong) 88%, black); }
.button-secondary { border-color: var(--line-strong); background: var(--surface); color: var(--ink); }
.button-secondary:hover, .button-ghost:hover { border-color: var(--primary); background: var(--primary-pale); }
.button-ghost { border-color: transparent; background: transparent; color: var(--ink-soft); }
.button-danger { border-color: color-mix(in srgb, var(--danger) 20%, transparent); background: var(--danger-soft); color: var(--danger); }
.text-link, .text-button { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; color: var(--primary); cursor: pointer; font-weight: 750; }
.text-link .icon, .text-button .icon { width: 18px; height: 18px; transition: transform .18s ease; }
.text-link:hover .icon, .text-button:hover .icon { transform: translateX(3px); }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; width: var(--sidebar); flex-direction: column; padding: 28px 20px 22px; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(20px); }
.sidebar .brand { padding: 0 7px 27px; }
.main-nav { display: grid; gap: 5px; }
.nav-item { position: relative; display: flex; min-height: 50px; align-items: center; gap: 13px; padding: 11px 14px; border-radius: 13px; color: var(--muted); font-size: .93rem; font-weight: 700; transition: color .18s ease, background .18s ease; }
.nav-item::before { position: absolute; top: 13px; bottom: 13px; left: -20px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gold); content: ''; opacity: 0; }
.nav-item:hover { color: var(--ink); background: var(--surface-soft); }
.nav-item.active { color: var(--primary-strong); background: var(--primary-soft); }
.nav-item.active::before { opacity: 1; }
.sidebar-spacer { flex: 1; }
.privacy-badge { display: flex; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.privacy-badge > .icon { width: 18px; color: var(--primary); }
.privacy-badge span { display: grid; }
.privacy-badge strong { font-size: .78rem; }
.privacy-badge small { margin-top: 2px; color: var(--muted); font-size: .65rem; }
.site-link { display: flex; align-items: center; gap: 9px; margin: 13px 10px 0; color: var(--muted); font-size: .78rem; font-weight: 700; }
.site-link .icon { width: 16px; }
.content-wrap { width: min(980px, calc(100% - var(--sidebar) - 64px)); min-height: 100vh; margin-left: max(var(--sidebar), calc((100vw - var(--sidebar) - 980px) / 2 + var(--sidebar))); padding: 58px 0 28px; }
.content-wrap.content-wide { width: min(1180px, calc(100% - var(--sidebar) - 64px)); margin-left: max(var(--sidebar), calc((100vw - var(--sidebar) - 1180px) / 2 + var(--sidebar))); }
.mobile-header, .bottom-nav { display: none; }
.app-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 80px; padding: 24px 0 4px; border-top: 1px solid var(--line); color: var(--muted); font-size: .76rem; }
.app-footer nav { display: flex; gap: 20px; }
.app-footer a:hover { color: var(--ink); }

.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }
.page-header > div:first-child { max-width: 760px; }
.page-header h1, .builder-header h1 { margin-bottom: 9px; font: 500 clamp(2.25rem, 4vw, 3.65rem)/1.02 var(--font-serif); letter-spacing: -.035em; }
.page-subtitle, .builder-header > div > p:last-child { max-width: 700px; margin-bottom: 0; color: var(--muted); font-size: 1.02rem; }
.page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.back-link { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 28px; color: var(--muted); font-size: .84rem; font-weight: 750; }
.back-link:hover { color: var(--primary); }
.back-link .icon { width: 18px; }
.card-surface { border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow); }

.boot-screen { display: grid; min-height: 100vh; place-content: center; justify-items: center; padding: 30px; text-align: center; }
.boot-mark { display: grid; width: 98px; height: 98px; place-items: center; margin-bottom: 22px; border: 1px solid var(--line); border-radius: 30px; background: var(--surface); box-shadow: var(--shadow); animation: float 3s ease-in-out infinite; }
.boot-mark img { width: 84px; }
.boot-screen h1 { margin: 0 0 25px; font: 500 1.8rem/1.2 var(--font-serif); }
.boot-progress { width: 180px; height: 3px; overflow: hidden; border-radius: 5px; background: var(--line); }
.boot-progress span { display: block; width: 60%; height: 100%; border-radius: inherit; background: var(--gold); animation: boot 1.5s ease-in-out infinite; }
.error-screen { max-width: 650px; margin: auto; }
.error-screen > p { color: var(--muted); }
.error-screen > small { max-width: 500px; margin-top: 15px; color: var(--danger); }
.error-icon { display: grid; width: 70px; height: 70px; place-items: center; margin-bottom: 20px; border-radius: 50%; background: var(--danger-soft); color: var(--danger); }
.error-icon .icon { width: 32px; height: 32px; }
@keyframes boot { 0% { transform: translateX(-110%); } 50% { transform: translateX(70%); } 100% { transform: translateX(190%); } }
@keyframes float { 50% { transform: translateY(-6px); } }

.welcome { min-height: 100vh; overflow: hidden; background: var(--bg); }
.welcome-nav { position: relative; z-index: 4; display: flex; width: min(1240px, calc(100% - 64px)); align-items: center; justify-content: space-between; margin: auto; padding: 25px 0; }
.welcome-nav-actions { display: flex; align-items: center; gap: 14px; }
.privacy-pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: .75rem; font-weight: 700; }
.privacy-pill .icon { width: 15px; color: var(--primary); }
.language-compact { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; font-weight: 800; }
.language-compact .icon { width: 17px; }
.welcome-hero { position: relative; display: grid; width: min(1240px, calc(100% - 64px)); min-height: 650px; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 80px; margin: auto; padding: 58px 0 95px; }
.welcome-hero::before { position: absolute; top: -220px; right: -350px; width: 850px; height: 850px; border: 1px solid color-mix(in srgb, var(--gold) 18%, transparent); border-radius: 50%; content: ''; }
.welcome-hero::after { position: absolute; top: -55px; right: -180px; width: 550px; height: 550px; border: 1px solid color-mix(in srgb, var(--primary) 17%, transparent); border-radius: 50%; content: ''; }
.hero-copy { position: relative; z-index: 2; }
.hero-copy h1 { max-width: 640px; margin-bottom: 25px; font: 500 clamp(4.1rem, 7.6vw, 7.1rem)/.87 var(--font-serif); letter-spacing: -.065em; }
.hero-lead { max-width: 620px; margin-bottom: 30px; color: var(--ink-soft); font-size: clamp(1.05rem, 1.5vw, 1.27rem); line-height: 1.65; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 23px; }
.hero-actions .button { min-height: 56px; padding-inline: 24px; }
.trust-line { display: flex; align-items: center; gap: 8px; margin-top: 28px; color: var(--muted); font-size: .76rem; font-weight: 650; }
.trust-line .icon { width: 17px; color: var(--primary); }
.hero-visual { position: relative; z-index: 2; min-height: 550px; }
.orb { position: absolute; border-radius: 50%; filter: blur(2px); }
.orb-one { inset: 10% 0 auto auto; width: 430px; height: 430px; background: color-mix(in srgb, var(--primary-soft) 74%, transparent); }
.orb-two { right: 260px; bottom: 20px; width: 160px; height: 160px; background: color-mix(in srgb, var(--gold-soft) 80%, transparent); }
.tree-preview { position: absolute; top: 26px; right: 30px; width: min(435px, 90%); padding: 28px; border: 1px solid color-mix(in srgb, var(--line) 75%, white); border-radius: 34px; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: 0 35px 100px rgba(25, 48, 40, .16); transform: rotate(2deg); backdrop-filter: blur(18px); }
.preview-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.preview-label { color: var(--primary); }
.preview-line { height: 4px; overflow: hidden; margin: 17px 0 29px; border-radius: 4px; background: var(--surface-soft); }
.preview-line span { display: block; width: 19%; height: 100%; border-radius: inherit; background: var(--gold); }
.preview-node { display: flex; align-items: center; gap: 12px; width: 87%; padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.preview-node > span { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 50%; background: var(--primary); color: var(--surface); }
.preview-node .icon { width: 17px; }
.preview-node div { display: grid; }
.preview-node small, .preview-question small { color: var(--gold); font-size: .61rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.preview-node strong { margin-top: 2px; font-family: var(--font-serif); font-size: .95rem; }
.preview-connector { width: 2px; height: 31px; margin-left: 30px; background: var(--line-strong); }
.preview-question { padding: 24px; border-radius: 21px; background: var(--primary-strong); color: #fffdf8; box-shadow: var(--shadow-small); }
.preview-question > strong { display: block; margin-top: 6px; font: 500 1.48rem/1.17 var(--font-serif); }
.preview-options { display: flex; gap: 7px; margin-top: 22px; }
.preview-options span { width: 29%; height: 38px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 9px; background: rgba(255, 255, 255, .07); }
.preview-options span.active { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 28%, transparent); }
.preview-quote { margin-top: 22px; text-align: right; color: var(--muted); font: italic 1rem var(--font-serif); }
.welcome-features { display: grid; width: min(1240px, calc(100% - 64px)); grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; margin: 0 auto 90px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--line); }
.feature-card { position: relative; min-height: 280px; padding: 38px; background: var(--surface); }
.feature-number { position: absolute; top: 25px; right: 28px; color: var(--line-strong); font: 500 2.3rem var(--font-serif); }
.feature-icon { display: grid; width: 50px; height: 50px; place-items: center; margin-bottom: 45px; border-radius: 15px; background: var(--primary-soft); color: var(--primary); }
.feature-card h2 { margin-bottom: 12px; font: 500 1.5rem/1.15 var(--font-serif); }
.feature-card p { margin: 0; color: var(--muted); font-size: .92rem; }
.corpus-band { display: grid; grid-template-columns: 1.4fr .6fr; gap: 60px; width: min(1240px, calc(100% - 64px)); align-items: end; margin: auto; padding: 70px; border-radius: var(--radius-xl); background: var(--primary-strong); color: #f8f4ea; }
.corpus-band h2 { max-width: 760px; margin: 0; font: 500 clamp(2rem, 3vw, 3.25rem)/1.08 var(--font-serif); }
.corpus-band > p { margin: 0; color: rgba(255, 255, 255, .68); font-size: .85rem; }
.welcome > .app-footer { width: min(1240px, calc(100% - 64px)); margin: 55px auto 0; padding-bottom: 30px; }

.empty-hero { display: grid; grid-template-columns: .72fr 1.28fr; align-items: center; min-height: 420px; overflow: hidden; }
.empty-art { display: grid; align-self: stretch; place-items: center; background: var(--primary-soft); color: var(--primary); }
.empty-art .icon { width: 130px; height: 130px; stroke-width: .8; }
.empty-hero > div:last-child { max-width: 550px; padding: 50px; }
.empty-hero h2 { margin-bottom: 13px; font: 500 2.6rem/1.05 var(--font-serif); }
.empty-hero p:not(.eyebrow) { margin-bottom: 25px; color: var(--muted); }
.active-creed { display: grid; grid-template-columns: 1fr 220px; overflow: hidden; }
.active-creed-main { padding: 42px; }
.creed-meta { display: flex; align-items: center; gap: 7px; margin-bottom: 20px; color: var(--muted); font-size: .72rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px var(--gold-soft); }
.active-creed h2 { margin-bottom: 5px; font: 500 clamp(2rem, 4vw, 3.2rem)/1.03 var(--font-serif); }
.organization-name { color: var(--muted); }
.progress-block { margin: 28px 0; }
.progress-label { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 9px; font-size: .8rem; }
.progress-label span { color: var(--muted); }
.progress-track { height: 7px; overflow: hidden; border-radius: 8px; background: var(--surface-soft); }
.progress-track > span, .compatibility-track span { display: block; width: var(--progress); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--gold)); transition: width .45s ease; }
.active-creed-aside { display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 30px; background: var(--primary-strong); color: #fffdf8; text-align: center; }
.monogram { display: grid; width: 108px; height: 108px; place-items: center; border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; font: 500 2rem var(--font-serif); letter-spacing: .08em; }
.active-creed-aside p { margin: 20px 0 0; color: rgba(255, 255, 255, .65); font-size: .72rem; }
.home-lower { display: grid; grid-template-columns: 1.5fr .5fr; gap: 18px; margin-top: 18px; }
.insight-card, .quick-card { display: flex; gap: 19px; padding: 27px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.insight-icon { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border-radius: 14px; background: var(--gold-soft); color: var(--gold); }
.insight-card h2 { margin: 0 0 8px; font: 500 1.25rem var(--font-serif); }
.insight-card p:last-child { margin: 0; color: var(--muted); font-size: .85rem; }
.quick-card { justify-content: space-between; flex-direction: column; }
.quick-card > div { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 10px; }
.quick-card > div span { grid-row: 1 / 3; color: var(--gold); }
.quick-card strong { font: 500 2rem/1 var(--font-serif); }
.quick-card small { color: var(--muted); }
.quick-card a { display: flex; justify-content: space-between; color: var(--primary); font-size: .78rem; font-weight: 750; }
.quick-card a .icon { width: 16px; }

.create-form { display: grid; gap: 36px; }
.form-section { margin: 0; padding: 0 0 34px; border: 0; border-bottom: 1px solid var(--line); }
.form-section legend { display: flex; align-items: center; gap: 13px; width: 100%; margin-bottom: 18px; color: var(--ink); font: 600 1.2rem var(--font-serif); }
.form-section legend span { color: var(--gold); font: 800 .7rem var(--font-sans); letter-spacing: .12em; }
.choice-grid { display: grid; gap: 13px; }
.choice-grid.two { grid-template-columns: repeat(2, 1fr); }
.choice-tile { position: relative; display: grid; min-height: 170px; grid-template-columns: auto 1fr auto; align-content: start; gap: 8px 13px; padding: 23px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); cursor: pointer; transition: border .18s ease, background .18s ease, transform .18s ease; }
.choice-tile:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.choice-tile:has(input:checked) { border-color: var(--primary); background: var(--primary-pale); box-shadow: inset 0 0 0 1px var(--primary); }
.choice-tile input { position: absolute; opacity: 0; pointer-events: none; }
.choice-radio { grid-column: 3; width: 20px; height: 20px; border: 1px solid var(--line-strong); border-radius: 50%; }
.choice-tile:has(input:checked) .choice-radio { border: 6px solid var(--primary); background: var(--surface); }
.choice-icon { display: grid; width: 42px; height: 42px; grid-row: 1 / 4; place-items: center; border-radius: 13px; background: var(--surface-soft); color: var(--primary); }
.choice-tile strong { grid-column: 2; align-self: center; font: 600 1.18rem var(--font-serif); }
.choice-tile small { grid-column: 2 / 4; color: var(--muted); }
.choice-tile em { grid-column: 2 / 4; justify-self: start; margin-top: 5px; padding: 4px 8px; border-radius: 7px; background: var(--gold-soft); color: var(--gold); font-size: .67rem; font-style: normal; font-weight: 800; }
.field { display: grid; gap: 7px; margin-bottom: 17px; }
.field > span { color: var(--ink-soft); font-size: .78rem; font-weight: 750; }
.field input { width: 100%; min-height: 52px; padding: 12px 15px; border: 1px solid var(--line-strong); border-radius: 12px; outline: none; background: var(--surface); color: var(--ink); }
.field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent); }
.field input[aria-invalid="true"] { border-color: var(--danger); }
.field-error { color: var(--danger); }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; }

.builder-header { display: grid; grid-template-columns: 1fr 150px; align-items: end; gap: 40px; margin-bottom: 34px; }
.builder-progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; }
.builder-progress > span { justify-self: end; color: var(--gold); font: 500 1.75rem var(--font-serif); }
.builder-progress > small { grid-column: 1 / -1; color: var(--muted); font-size: .66rem; text-align: right; }
.progress-ring { --value: calc(var(--progress) * 3.6deg); display: grid; width: 50px; height: 50px; grid-row: 1; grid-column: 2; place-items: center; border-radius: 50%; background: conic-gradient(var(--gold) calc(var(--progress) * 1%), var(--line) 0); }
.progress-ring i { width: 39px; height: 39px; border-radius: 50%; background: var(--bg); }
.builder-grid { display: grid; grid-template-columns: 360px 1fr; align-items: start; gap: 20px; }
.path-panel, .decision-panel, .completion-panel { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.path-panel { position: sticky; top: 30px; max-height: calc(100vh - 60px); overflow: auto; padding: 24px; }
.path-title { display: flex; align-items: center; justify-content: space-between; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.path-title h2 { margin: 0; font: 600 1.1rem var(--font-serif); }
.path-title > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: .7rem; font-weight: 800; }
.timeline { margin: 0; padding: 22px 0 0; list-style: none; }
.timeline-item { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 11px; padding-bottom: 20px; }
.timeline-marker { z-index: 2; display: grid; width: 27px; height: 27px; place-items: center; border: 4px solid var(--surface); border-radius: 50%; background: var(--primary); color: var(--surface); box-shadow: 0 0 0 1px var(--primary); }
.timeline-marker .icon { width: 13px; height: 13px; stroke-width: 2.6; }
.timeline-line { position: absolute; top: 28px; bottom: -1px; left: 13px; width: 1px; background: var(--line-strong); }
.timeline-item a { display: grid; min-width: 0; padding: 5px 8px 9px; border-radius: 10px; }
.timeline-item:not(.focused) a:not([aria-disabled="true"]):hover { background: var(--surface-soft); }
.timeline-item.focused a { background: var(--primary-soft); }
.timeline-item small { color: var(--gold); font-size: .59rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.timeline-item strong { display: -webkit-box; overflow: hidden; margin-top: 3px; color: var(--ink-soft); font-size: .76rem; font-weight: 650; line-height: 1.42; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.timeline-item em { display: flex; align-items: center; gap: 4px; margin-top: 6px; color: var(--primary); font-size: .62rem; font-style: normal; font-weight: 750; }
.timeline-item em .icon { width: 12px; height: 12px; }
.timeline-empty { display: flex; align-items: center; flex-direction: column; gap: 12px; padding: 35px 10px; color: var(--muted); font-size: .8rem; text-align: center; }
.timeline-empty .icon { width: 48px; height: 48px; color: var(--line-strong); stroke-width: 1; }
.decision-panel { overflow: hidden; }
.decision-head { display: grid; grid-template-columns: 1fr auto; padding: 31px 34px 25px; border-bottom: 1px solid var(--line); }
.decision-head > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.decision-head h2 { grid-column: 1 / -1; max-width: 750px; margin: 24px 0 10px; font: 500 clamp(1.75rem, 3vw, 2.7rem)/1.09 var(--font-serif); }
.decision-head > p { grid-column: 1 / -1; margin: 0; color: var(--muted); }
.topic-chip, .review-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 8px; background: var(--primary-soft); color: var(--primary); font-size: .65rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.topic-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.review-chip { background: var(--gold-soft); color: var(--gold); }
.review-chip .icon { width: 13px; height: 13px; }
.option-list { display: grid; gap: 10px; padding: 26px 34px; }
.option-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); transition: border .18s ease, transform .18s ease, box-shadow .18s ease; }
.option-card:hover { transform: translateY(-1px); border-color: var(--line-strong); box-shadow: var(--shadow-small); }
.option-card.selected { border-color: var(--primary); background: var(--primary-pale); box-shadow: inset 0 0 0 1px var(--primary); }
.option-select { display: grid; width: 100%; grid-template-columns: 39px 1fr 27px; align-items: center; gap: 15px; padding: 20px; border: 0; background: transparent; cursor: pointer; text-align: left; }
.option-letter { display: grid; width: 37px; height: 37px; place-items: center; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); font: 600 .86rem var(--font-serif); }
.option-card.selected .option-letter { border-color: var(--primary); background: var(--primary); color: var(--surface); }
.option-copy { display: grid; }
.option-copy strong { color: var(--ink-soft); font-size: .92rem; font-weight: 550; line-height: 1.52; }
.selected-label { display: flex; align-items: center; gap: 4px; margin-bottom: 5px; color: var(--primary); font-size: .6rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.selected-label .icon { width: 12px; height: 12px; }
.option-check { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: transparent; }
.option-card.selected .option-check { border-color: var(--primary); background: var(--primary); color: var(--surface); }
.option-check .icon { width: 14px; height: 14px; }
.option-more { display: flex; align-items: center; gap: 6px; margin: -5px 20px 15px 74px; padding: 5px 0; border: 0; background: transparent; color: var(--primary); cursor: pointer; font-size: .7rem; font-weight: 750; }
.option-more .icon { width: 15px; height: 15px; }
.decision-footer { display: flex; justify-content: flex-end; padding: 15px 34px 22px; }
.completion-panel { display: flex; min-height: 480px; align-items: center; justify-content: center; flex-direction: column; padding: 55px; text-align: center; }
.completion-icon { display: grid; width: 82px; height: 82px; place-items: center; margin-bottom: 24px; border-radius: 50%; background: var(--gold-soft); color: var(--gold); }
.completion-icon .icon { width: 38px; height: 38px; }
.completion-panel h2 { margin-bottom: 12px; font: 500 2.5rem/1.05 var(--font-serif); }
.completion-panel > p:not(.eyebrow) { max-width: 560px; color: var(--muted); }
.completion-panel .button-row { justify-content: center; margin-top: 16px; }
.pending-panel { display: grid; grid-template-columns: 260px 1fr; gap: 30px; margin-top: 20px; padding: 27px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.pending-panel p:last-child { margin: 0; color: var(--muted); font-size: .8rem; }
.pending-list { display: grid; gap: 7px; }
.pending-list a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 11px 13px; border-radius: 10px; background: var(--surface-soft); font-size: .77rem; }
.pending-list em { display: flex; align-items: center; flex: 0 0 auto; color: var(--primary); font-size: .68rem; font-style: normal; font-weight: 750; }
.pending-list .icon { width: 14px; height: 14px; }

.statement-document { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow); }
.document-cover { position: relative; min-height: 440px; padding: 65px 10%; background: var(--primary-strong); color: #fffdf8; }
.document-cover::after { position: absolute; right: -120px; bottom: -230px; width: 500px; height: 500px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%; content: ''; }
.document-logo { display: grid; width: 62px; height: 62px; place-items: center; margin-bottom: 38px; border-radius: 18px; background: #fffdf8; }
.document-logo img { width: 55px; }
.document-cover h1 { max-width: 760px; margin-bottom: 8px; font: 500 clamp(3rem, 6vw, 5.2rem)/.96 var(--font-serif); letter-spacing: -.045em; }
.document-cover h2 { color: rgba(255, 255, 255, .75); font-size: 1rem; font-weight: 600; }
.document-cover > p:not(.eyebrow) { max-width: 630px; margin: 25px 0; color: rgba(255, 255, 255, .72); }
.cover-line { width: 80px; height: 2px; margin: 35px 0 15px; background: var(--gold); }
.document-cover > small { color: rgba(255, 255, 255, .55); }
.pending-notice { display: flex; align-items: center; gap: 12px; margin: 30px 8% 0; padding: 14px 17px; border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line)); border-radius: 12px; background: var(--gold-soft); color: var(--gold); font-size: .8rem; }
.statement-section { padding: 55px 9%; border-bottom: 1px solid var(--line); }
.statement-section > header { display: grid; grid-template-columns: 55px 1fr; gap: 20px; margin-bottom: 30px; }
.statement-section > header > span { color: var(--gold); font: 500 1.25rem var(--font-serif); }
.statement-section > header h2 { margin-bottom: 4px; font: 500 2rem/1.1 var(--font-serif); }
.statement-section > header p { margin: 0; color: var(--muted); font-size: .8rem; }
.statement-items { display: grid; gap: 15px; margin-left: 75px; }
.statement-items article { padding: 22px; border-left: 2px solid var(--primary-soft); background: var(--primary-pale); }
.statement-items article > p { margin-bottom: 9px; color: var(--ink-soft); font: 500 1.02rem/1.68 var(--font-serif); }
.statement-items article > small { display: block; color: var(--muted); font-size: .68rem; }
.statement-items article > a { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; color: var(--primary); font-size: .68rem; font-weight: 750; }
.statement-items article > a .icon { width: 13px; height: 13px; }
.document-footer { padding: 28px 9%; color: var(--muted); font-size: .7rem; text-align: center; }

.profile-hero { display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: 35px; min-height: 300px; padding: 45px; border-radius: var(--radius-xl); background: var(--primary-strong); color: #fffdf8; }
.profile-compass { position: relative; display: grid; width: 150px; height: 150px; place-items: center; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; }
.profile-compass::before, .profile-compass::after { position: absolute; border-radius: 50%; content: ''; }
.profile-compass::before { inset: 14px; border: 1px dashed rgba(255, 255, 255, .2); }
.profile-compass::after { top: 4px; width: 7px; height: 7px; background: var(--gold); }
.profile-compass .icon { width: 60px; height: 60px; stroke-width: .9; opacity: .8; }
.profile-compass span { position: absolute; right: -4px; bottom: 15px; padding: 5px 8px; border-radius: 8px; background: var(--gold); color: #17251f; font-size: .7rem; font-weight: 850; }
.profile-hero h2 { max-width: 820px; margin: 10px 0 8px; font: 500 clamp(2rem, 4vw, 3.6rem)/1.04 var(--font-serif); }
.profile-hero h2 span { color: var(--gold); }
.profile-hero > div:last-child > p:last-child { max-width: 720px; margin: 13px 0 0; color: rgba(255, 255, 255, .64); }
.preliminary-badge { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 8px; color: rgba(255, 255, 255, .76); font-size: .62rem; font-weight: 750; }
.preliminary-badge .icon { width: 13px; height: 13px; }
.map-section, .detail-section { margin-top: 55px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 17px; }
.section-heading .eyebrow { margin-bottom: 5px; }
.section-heading h2 { margin: 0; font: 500 2rem var(--font-serif); }
.section-heading > span { color: var(--muted); font: 500 1.35rem var(--font-serif); }
.section-note { max-width: 760px; margin: -8px 0 20px; color: var(--muted); font-size: .8rem; }
.axis-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.axis-card { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.axis-index { color: var(--gold); font: 500 .75rem var(--font-serif); }
.axis-card h3 { margin: 0 0 3px; font: 600 .96rem var(--font-serif); }
.axis-card p { margin: 0; color: var(--muted); font-size: .76rem; }
.axis-status { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 7px; background: var(--surface-soft); color: var(--muted); font-size: .55rem; font-weight: 800; text-transform: uppercase; }
.axis-status.classified { background: var(--primary-soft); color: var(--primary); }
.axis-status.mixed { background: var(--gold-soft); color: var(--gold); }
.axis-status .icon { width: 11px; height: 11px; }
.ranking-list { display: grid; gap: 9px; }
.ranking-card { display: grid; grid-template-columns: 42px 1fr 80px 20px; align-items: center; gap: 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); transition: transform .18s ease, border .18s ease, box-shadow .18s ease; }
.ranking-card:hover { transform: translateX(3px); border-color: var(--primary); box-shadow: var(--shadow-small); }
.rank-number { color: var(--line-strong); font: 500 1.25rem var(--font-serif); }
.rank-copy h3 { margin: 0 0 9px; font: 600 1rem var(--font-serif); }
.compatibility-track { height: 5px; overflow: hidden; margin-bottom: 6px; border-radius: 5px; background: var(--surface-soft); }
.rank-copy small { color: var(--muted); font-size: .65rem; }
.ranking-card > strong { color: var(--primary); font: 500 1.8rem var(--font-serif); text-align: right; }
.ranking-card > strong em { font-size: .8rem; font-style: normal; }
.ranking-card > .icon { width: 18px; color: var(--muted); }
.demographic-card { display: grid; grid-template-columns: 55px 1fr auto; align-items: center; gap: 22px; margin-top: 55px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.demographic-card > span { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 15px; background: var(--gold-soft); color: var(--gold); }
.demographic-card h2 { margin: 0 0 5px; font: 500 1.3rem var(--font-serif); }
.demographic-card p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: .8rem; }
.demographic-card > a { display: flex; align-items: center; gap: 5px; color: var(--primary); font-size: .75rem; font-weight: 750; }
.demographic-card > a .icon { width: 16px; }

.compatibility-hero { display: grid; grid-template-columns: 260px 1fr; align-items: center; gap: 55px; padding: 45px; border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow); }
.score-orbit { display: grid; width: 220px; height: 220px; place-items: center; border-radius: 50%; background: conic-gradient(var(--gold) calc(var(--progress) * 1%), var(--surface-soft) 0); }
.score-orbit::before { position: absolute; width: 184px; height: 184px; border-radius: 50%; background: var(--surface); content: ''; }
.score-orbit > div { z-index: 1; display: grid; justify-items: center; }
.score-orbit strong { color: var(--primary); font: 500 3.9rem/1 var(--font-serif); }
.score-orbit strong span { font-size: 1.25rem; }
.score-orbit small { margin-top: 4px; color: var(--muted); font-size: .64rem; font-weight: 750; text-transform: uppercase; }
.compatibility-summary > span { color: var(--gold); font-size: .65rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.compatibility-summary h2 { margin: 7px 0 25px; font: 500 clamp(2rem, 3vw, 3rem)/1.05 var(--font-serif); }
.coverage-meter { max-width: 540px; }
.coverage-meter > div:first-child { display: flex; justify-content: space-between; margin-bottom: 7px; color: var(--muted); font-size: .75rem; }
.coverage-meter strong { color: var(--ink); }
.compatibility-summary > p { max-width: 620px; margin: 19px 0 0; color: var(--muted); font-size: .76rem; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.metric-grid article { display: flex; align-items: baseline; gap: 9px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.metric-grid strong { color: var(--primary); font: 500 2rem var(--font-serif); }
.metric-grid span { color: var(--muted); font-size: .7rem; }
.detail-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.detail-row { display: flex; align-items: center; gap: 13px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.detail-row > span { display: grid; width: 31px; height: 31px; flex: 0 0 31px; place-items: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary); }
.detail-row > span .icon { width: 16px; }
.detail-row small, .difference-card small { color: var(--gold); font-size: .57rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.detail-row p { margin: 3px 0 0; font-size: .79rem; }
.difference-list { display: grid; gap: 10px; }
.difference-card { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.difference-card h3 { margin: 0 0 15px; font: 600 1rem var(--font-serif); }
.difference-card > div { display: grid; grid-template-columns: 1fr 25px 1fr; align-items: center; gap: 15px; }
.difference-card section { padding: 13px; border-radius: 10px; background: var(--surface-soft); }
.difference-card section p { margin: 4px 0 0; font-size: .75rem; }
.difference-card > div > span { color: var(--muted); }
.source-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.source-card { display: grid; grid-template-columns: 39px 1fr 20px; align-items: center; gap: 13px; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.source-card > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: var(--gold-soft); color: var(--gold); }
.source-card div { display: grid; }
.source-card strong { font: 600 .85rem var(--font-serif); }
.source-card small { color: var(--muted); font-size: .65rem; }
.source-card > .icon { width: 16px; color: var(--muted); }

.method-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.method-card { position: relative; min-height: 300px; padding: 31px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.method-index { position: absolute; top: 25px; right: 27px; color: var(--line-strong); font: 500 2rem var(--font-serif); }
.method-icon { display: grid; width: 50px; height: 50px; place-items: center; margin-bottom: 38px; border-radius: 15px; background: var(--primary-soft); color: var(--primary); }
.method-card h2 { margin-bottom: 12px; font: 500 1.45rem var(--font-serif); }
.method-card p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.7; }
.transparency-note { display: flex; align-items: center; gap: 16px; margin-top: 15px; padding: 21px; border-radius: var(--radius-md); background: var(--primary-strong); color: #fffdf8; }
.transparency-note .icon { width: 28px; height: 28px; color: var(--gold); }
.transparency-note p { margin: 0; color: rgba(255, 255, 255, .73); font-size: .8rem; }

.creed-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.creed-card { padding: 25px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.creed-card-top { display: grid; grid-template-columns: 48px 1fr 34px; align-items: start; gap: 14px; }
.creed-type-icon { display: grid; width: 47px; height: 47px; place-items: center; border-radius: 14px; background: var(--primary-soft); color: var(--primary); }
.creed-card-top > div > span { color: var(--gold); font-size: .61rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.creed-card h2 { margin: 4px 0 2px; font: 600 1.3rem var(--font-serif); }
.creed-card p { margin: 0; color: var(--muted); font-size: .75rem; }
.icon-button { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 9px; background: var(--surface-soft); color: var(--muted); cursor: pointer; }
.icon-button .icon { width: 16px; }
.progress-block.compact { margin: 24px 0 20px; }
.creed-card-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.creed-card-actions .button { min-height: 40px; padding: 8px 12px; font-size: .72rem; }
.danger-text { margin-left: auto; color: var(--danger); font-size: .7rem; }
.danger-text .icon { width: 15px; }
.empty-state { display: flex; min-height: 330px; align-items: center; justify-content: center; flex-direction: column; padding: 45px; text-align: center; }
.empty-state > span { display: grid; width: 70px; height: 70px; place-items: center; margin-bottom: 20px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); }
.empty-state > span .icon { width: 31px; height: 31px; }
.empty-state h1, .empty-state h2 { font: 500 2rem var(--font-serif); }
.empty-state p { color: var(--muted); }
.empty-state.inline { min-height: 220px; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); }

.settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.settings-card { padding: 25px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.settings-card.settings-wide { grid-column: 1 / -1; }
.settings-card > header { display: flex; gap: 13px; margin-bottom: 19px; }
.settings-card > header > span { display: grid; width: 41px; height: 41px; flex: 0 0 41px; place-items: center; border-radius: 12px; background: var(--primary-soft); color: var(--primary); }
.settings-card header h2 { margin: 2px 0 3px; font: 600 1.15rem var(--font-serif); }
.settings-card header p { max-width: 720px; margin: 5px 0 0; color: var(--muted); font-size: .78rem; }
.preference-list { display: grid; gap: 5px; }
.preference-option { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px; border-radius: 10px; cursor: pointer; font-size: .82rem; }
.preference-option:hover { background: var(--surface-soft); }
.preference-option input { position: absolute; opacity: 0; }
.preference-radio { width: 18px; height: 18px; border: 1px solid var(--line-strong); border-radius: 50%; }
.preference-option:has(input:checked) .preference-radio { border: 5px solid var(--primary); }
.settings-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.settings-links { display: grid; }
.settings-links a { display: flex; align-items: center; justify-content: space-between; padding: 13px 4px; border-top: 1px solid var(--line); font-size: .82rem; font-weight: 650; }
.settings-links a .icon { width: 16px; color: var(--muted); }
.version-label { display: block; margin-top: 14px; color: var(--muted); font-size: .68rem; }

.legal-page > header { max-width: 810px; padding: 15px 0 45px; }
.legal-page > header h1 { margin-bottom: 18px; font: 500 clamp(3.2rem, 6vw, 5.4rem)/.96 var(--font-serif); letter-spacing: -.05em; }
.legal-page > header > p:not(.eyebrow) { color: var(--ink-soft); font-size: 1.15rem; line-height: 1.7; }
.legal-page > header > small { color: var(--muted); }
.legal-sections { border-top: 1px solid var(--line); }
.legal-sections section { display: grid; grid-template-columns: 65px 1fr; gap: 25px; padding: 38px 0; border-bottom: 1px solid var(--line); }
.legal-sections section > span { display: grid; width: 53px; height: 53px; place-items: center; border-radius: 15px; background: var(--primary-soft); color: var(--primary); }
.legal-sections section > div > small { color: var(--gold); font-size: .65rem; font-weight: 850; letter-spacing: .08em; }
.legal-sections h2 { margin: 5px 0 8px; font: 600 1.4rem var(--font-serif); }
.legal-sections p { max-width: 780px; margin: 0; color: var(--muted); line-height: 1.75; }
.legal-sections a { color: var(--primary); font-weight: 700; }
.about-page { display: flex; align-items: center; flex-direction: column; max-width: 750px; margin: 25px auto; text-align: center; }
.about-logo { display: grid; width: 135px; height: 135px; place-items: center; margin-bottom: 30px; border: 1px solid var(--line); border-radius: 40px; background: var(--surface); box-shadow: var(--shadow); }
.about-logo img { width: 115px; }
.about-page h1 { margin-bottom: 18px; font: 500 clamp(3rem, 6vw, 5rem)/.95 var(--font-serif); }
.about-lead { max-width: 620px; color: var(--ink-soft); font-size: 1.1rem; }
.about-stats { display: flex; gap: 1px; overflow: hidden; margin: 25px 0; border: 1px solid var(--line); border-radius: 16px; background: var(--line); }
.about-stats > span { display: grid; min-width: 130px; padding: 17px; background: var(--surface); }
.about-stats strong { color: var(--primary); font: 500 1.8rem var(--font-serif); }
.about-stats small { color: var(--muted); font-size: .65rem; }
.about-page > p:not(.eyebrow):not(.about-lead) { max-width: 600px; color: var(--muted); font-size: .8rem; }
.about-page > .button { margin: 15px 0; }
.about-page > small { color: var(--muted); }

.app-dialog { width: min(600px, calc(100% - 28px)); max-height: min(800px, calc(100vh - 30px)); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: 0 30px 100px rgba(0, 0, 0, .28); }
.app-dialog::backdrop { background: rgba(9, 19, 15, .58); backdrop-filter: blur(3px); }
.dialog-card { position: relative; margin: 0; padding: 33px; border: 0; background: var(--surface); color: var(--ink); }
.dialog-close { position: absolute; top: 14px; right: 15px; display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 50%; background: var(--surface-soft); color: var(--muted); cursor: pointer; font-size: 1.4rem; line-height: 1; }
.dialog-icon { display: grid; width: 52px; height: 52px; place-items: center; margin-bottom: 20px; border-radius: 15px; background: var(--primary-soft); color: var(--primary); }
.dialog-icon.danger { background: var(--danger-soft); color: var(--danger); }
.dialog-card h2 { margin-bottom: 10px; font: 600 1.75rem/1.14 var(--font-serif); }
.dialog-card > p:not(.eyebrow) { color: var(--muted); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 25px; }
.explanation-dialog { max-height: min(800px, calc(100vh - 30px)); overflow: auto; }
.explanation-dialog h2 { padding-right: 25px; font-size: 1.55rem; }
.dialog-lead { color: var(--ink-soft) !important; font: 500 1.02rem/1.65 var(--font-serif); }
.explanation-section { margin-top: 25px; padding-top: 22px; border-top: 1px solid var(--line); }
.explanation-section h3 { margin: 0 0 10px; font: 600 1rem var(--font-serif); }
.explanation-section p { color: var(--muted); }
.explanation-section > small { display: block; margin-top: 10px; color: var(--muted); font-size: .68rem; }
.reference-list { display: flex; flex-wrap: wrap; gap: 6px; }
.reference-list span { padding: 5px 8px; border-radius: 7px; background: var(--gold-soft); color: var(--gold); font-size: .68rem; font-weight: 700; }
.toast-region { position: fixed; right: 22px; bottom: 22px; z-index: 1000; }
.toast { display: flex; align-items: center; gap: 10px; max-width: 390px; padding: 13px 17px; border-radius: 13px; background: var(--ink); color: var(--surface); box-shadow: var(--shadow); font-size: .78rem; font-weight: 700; animation: toast-in .22s ease-out; }
.toast .icon { width: 17px; color: var(--gold); }
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } }

@media (max-width: 1100px) {
  :root { --sidebar: 224px; }
  .content-wrap, .content-wrap.content-wide { width: calc(100% - var(--sidebar) - 44px); margin-left: calc(var(--sidebar) + 22px); }
  .builder-grid { grid-template-columns: 310px 1fr; }
  .welcome-hero { gap: 35px; }
  .hero-copy h1 { font-size: clamp(3.8rem, 7vw, 5.6rem); }
  .tree-preview { right: 0; }
}

@media (max-width: 820px) {
  body { padding-bottom: 72px; }
  .sidebar { display: none; }
  .mobile-header { position: sticky; top: 0; z-index: 20; display: flex; height: 67px; align-items: center; justify-content: space-between; padding: 9px 18px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(18px); }
  .brand-mobile { gap: 8px; }
  .brand-mobile .brand-mark { width: 39px; height: 39px; flex-basis: 39px; border-radius: 12px; }
  .brand-mobile .brand-mark img { width: 34px; }
  .brand-mobile strong { font-family: var(--font-serif); }
  .mobile-private { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: .62rem; font-weight: 700; }
  .mobile-private .icon { width: 14px; }
  .bottom-nav { position: fixed; inset: auto 0 0; z-index: 30; display: grid; height: calc(65px + env(safe-area-inset-bottom)); grid-template-columns: repeat(4, 1fr); padding: 5px 7px env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(18px); }
  .bottom-nav .nav-item { min-height: 55px; justify-content: center; flex-direction: column; gap: 2px; padding: 4px; border-radius: 9px; font-size: .56rem; }
  .bottom-nav .nav-item::before { display: none; }
  .bottom-nav .nav-item .icon { width: 19px; height: 19px; }
  .content-wrap, .content-wrap.content-wide { width: auto; min-height: calc(100vh - 67px); margin: 0; padding: 31px 20px 10px; }
  .page-header { align-items: flex-start; flex-direction: column; margin-bottom: 26px; }
  .page-header h1, .builder-header h1 { font-size: clamp(2.3rem, 9vw, 3.6rem); }
  .page-actions { justify-content: flex-start; }
  .app-footer { margin-top: 55px; }
  .welcome { padding-bottom: 0; }
  .welcome-nav, .welcome-hero, .welcome-features, .corpus-band, .welcome > .app-footer { width: min(100% - 36px, 650px); }
  .welcome-nav { padding: 18px 0; }
  .welcome-nav .brand-copy small, .privacy-pill { display: none; }
  .welcome-hero { min-height: auto; grid-template-columns: 1fr; gap: 30px; padding: 55px 0 65px; }
  .hero-copy h1 { font-size: clamp(3.8rem, 17vw, 5.5rem); }
  .hero-visual { min-height: 500px; }
  .tree-preview { left: 50%; right: auto; width: min(435px, 96%); transform: translateX(-50%) rotate(1deg); }
  .welcome-features { grid-template-columns: 1fr; }
  .feature-card { min-height: auto; }
  .corpus-band { grid-template-columns: 1fr; gap: 25px; padding: 40px 30px; }
  .empty-hero { grid-template-columns: 1fr; }
  .empty-art { min-height: 190px; }
  .empty-art .icon { width: 90px; height: 90px; }
  .active-creed { grid-template-columns: 1fr; }
  .active-creed-aside { display: none; }
  .home-lower { grid-template-columns: 1fr; }
  .choice-grid.two, .axis-grid, .creed-list, .settings-grid, .method-grid, .source-list, .detail-list { grid-template-columns: 1fr; }
  .settings-card.settings-wide { grid-column: auto; }
  .builder-header { grid-template-columns: 1fr; }
  .builder-progress { width: 145px; }
  .builder-grid { grid-template-columns: 1fr; }
  .path-panel { position: static; max-height: 320px; }
  .pending-panel { grid-template-columns: 1fr; }
  .statement-section { padding-inline: 6%; }
  .statement-items { margin-left: 0; }
  .profile-hero, .compatibility-hero { grid-template-columns: 1fr; }
  .profile-compass, .score-orbit { justify-self: center; }
  .metric-grid { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .content-wrap, .content-wrap.content-wide { padding-inline: 14px; }
  .page-actions { width: 100%; }
  .page-actions .button { flex: 1; min-width: 140px; }
  .button-row { align-items: stretch; flex-direction: column; }
  .button-row .button { width: 100%; }
  .welcome-nav, .welcome-hero, .welcome-features, .corpus-band, .welcome > .app-footer { width: calc(100% - 28px); }
  .welcome-nav .brand-mark { width: 42px; height: 42px; flex-basis: 42px; }
  .welcome-nav .brand-copy strong { font-size: 1rem; }
  .hero-copy h1 { font-size: clamp(3.25rem, 18vw, 4.7rem); }
  .hero-lead { font-size: 1rem; }
  .hero-visual { min-height: 450px; }
  .tree-preview { padding: 22px; }
  .feature-card { padding: 30px; }
  .corpus-band { padding: 34px 25px; }
  .welcome > .app-footer, .app-footer { align-items: flex-start; flex-direction: column; }
  .empty-hero > div:last-child, .active-creed-main { padding: 29px 23px; }
  .empty-hero h2 { font-size: 2.1rem; }
  .progress-label { align-items: flex-start; flex-direction: column; gap: 3px; }
  .insight-card { flex-direction: column; }
  .choice-tile { min-height: 150px; padding: 18px; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .button { width: 100%; }
  .builder-header { gap: 20px; }
  .decision-head, .option-list { padding-inline: 19px; }
  .decision-head { grid-template-columns: 1fr; }
  .decision-head > .text-link { margin-top: 10px; }
  .option-select { grid-template-columns: 34px 1fr 22px; gap: 10px; padding: 16px 13px; }
  .option-letter { width: 33px; height: 33px; }
  .option-more { margin-left: 57px; }
  .completion-panel { min-height: 400px; padding: 35px 22px; }
  .document-cover { min-height: 400px; padding: 45px 8%; }
  .document-cover h1 { font-size: 2.75rem; }
  .statement-section > header { grid-template-columns: 1fr; gap: 8px; }
  .profile-hero, .compatibility-hero { padding: 30px 22px; }
  .profile-compass { width: 125px; height: 125px; }
  .axis-card { grid-template-columns: 28px 1fr; }
  .axis-status { grid-column: 2; justify-self: start; }
  .ranking-card { grid-template-columns: 32px 1fr 60px; gap: 10px; padding: 15px 12px; }
  .ranking-card > .icon { display: none; }
  .ranking-card > strong { font-size: 1.5rem; }
  .demographic-card { grid-template-columns: 45px 1fr; }
  .demographic-card > a { grid-column: 2; }
  .score-orbit { width: 185px; height: 185px; }
  .score-orbit::before { width: 154px; height: 154px; }
  .score-orbit strong { font-size: 3.2rem; }
  .difference-card > div { grid-template-columns: 1fr; }
  .difference-card > div > span { transform: rotate(90deg); justify-self: center; }
  .settings-actions { flex-direction: column; }
  .settings-actions .button { width: 100%; }
  .legal-page > header h1 { font-size: 3rem; }
  .legal-sections section { grid-template-columns: 45px 1fr; gap: 16px; }
  .legal-sections section > span { width: 43px; height: 43px; }
  .about-stats { width: 100%; }
  .about-stats > span { min-width: 0; flex: 1; padding: 13px 7px; }
  .dialog-card { padding: 28px 22px; }
  .dialog-actions { align-items: stretch; flex-direction: column-reverse; }
  .toast-region { right: 13px; bottom: 78px; left: 13px; }
  .toast { max-width: none; }
}

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

@media print {
  @page { size: A4; margin: 16mm; }
  :root { color-scheme: light; --surface: #fff; --ink: #111; --ink-soft: #222; --muted: #555; --line: #ddd; --primary-pale: #f5f7f5; }
  body { padding: 0; background: #fff; color: #111; font-size: 10pt; }
  .sidebar, .mobile-header, .bottom-nav, .app-footer, .print-hidden, .toast-region { display: none !important; }
  .content-wrap, .content-wrap.content-wide { width: 100%; margin: 0; padding: 0; }
  .statement-document { overflow: visible; border: 0; border-radius: 0; box-shadow: none; }
  .document-cover { min-height: 0; break-after: auto; padding: 18mm 14mm 14mm; border-bottom: 2px solid #b98a2e; background: #fff !important; color: #17342c !important; }
  .document-cover::after { display: none; }
  .document-cover h1 { color: #17342c !important; font-size: 30pt; }
  .document-cover h2, .document-cover > p:not(.eyebrow), .document-cover > small { color: #444 !important; }
  .document-logo { margin-bottom: 12mm; border: 1px solid #ddd; }
  .cover-line { background: #b98a2e !important; }
  .statement-section { padding: 12mm 0; break-inside: avoid; }
  .statement-section > header h2 { font-size: 18pt; }
  .statement-items article { break-inside: avoid; border: 1px solid #ddd; border-left: 2px solid #376f5f; background: #fff !important; }
  .document-footer { padding-inline: 0; }
}