@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600;700&display=swap');

:root {
  --ink: #28302b; --charcoal: #333632; --moss: #63926d; --sage: #a8c1aa;
  --canvas: #eff0eb; --paper: #fbfbf7; --clay: #cf7655; --ochre: #d2a24e;
  --rose: #bd728c; --blue: #4b76a6; --olive: #aeb66d; --teal: #70a89a;
  --plum: #633e42; --muted: #667069; --line: #d5d8cf;
  --danger: #a94b43; --success: #397458;
  /* Compatibility aliases keep the existing component vocabulary stable. */
  --wine: var(--plum); --cream: var(--canvas); --orange: var(--clay);
  --yellow: var(--ochre); --pink: var(--rose); --lime: var(--olive);
  --mint: var(--sage); --cyan: var(--teal);
  --bg: var(--canvas); --surface: var(--paper); --surface-2: color-mix(in srgb, var(--canvas), var(--line) 38%);
  --text: var(--ink); --accent: var(--clay); --accent-strong: var(--ink);
  --accent-soft: color-mix(in srgb, var(--clay), var(--paper) 74%); --warm: #765f28;
  --tool-color: var(--clay); --tool-soft: color-mix(in srgb, var(--tool-color), var(--paper) 76%); --tool-ink: var(--ink);
  --shadow: 10px 10px 0 var(--ink); --soft-shadow: 0 24px 70px color-mix(in srgb, var(--ink), transparent 86%);
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --text-hero: clamp(4.25rem, 11vw, 9.5rem); --text-h1-tool: clamp(3.25rem, 8vw, 7rem);
  --text-h2: clamp(2.4rem, 5vw, 5rem); --text-body: clamp(1rem, 1.1vw, 1.125rem);
  --radius: 26px; --max: 1240px;
  --motion-ui: 200ms; --motion-section: 540ms; --motion-slow: 650ms;
  --ease-out: cubic-bezier(.2,.8,.2,1);
}
[data-theme="dark"] {
  --bg: var(--charcoal); --surface: var(--ink); --surface-2: color-mix(in srgb, var(--paper), transparent 91%); --text: var(--paper);
  --muted: var(--sage); --line: color-mix(in srgb, var(--sage), transparent 58%); --accent-soft: color-mix(in srgb, var(--clay), var(--ink) 74%);
  --tool-soft: color-mix(in srgb, var(--tool-color), var(--ink) 76%); --tool-ink: var(--ink);
  --shadow: 9px 9px 0 color-mix(in srgb, var(--charcoal), black 35%); --soft-shadow: 0 26px 72px color-mix(in srgb, black, transparent 62%);
}
body[data-tool="economic-model-calculator"], body[data-tool="income-goal-calculator"], body[data-tool="marketing-roi-calculator"] { --tool-color: var(--ochre); }
body[data-tool="lead-scoring-template"], body[data-tool="buyer-qualification-form"], body[data-tool="seller-qualification-form"] { --tool-color: var(--rose); }
body[data-tool="crm-template"], body[data-tool="30-day-follow-up-system"], body[data-tool="objection-tracker"] { --tool-color: var(--blue); }
body[data-tool="90-day-kpi-dashboard"] { --tool-color: var(--olive); }
body[data-tool="viewing-checklist"] { --tool-color: var(--sage); }
body[data-tool="referral-scripts"], body[data-tool="ai-prompt-library"] { --tool-color: var(--teal); }
body[data-tool="weekly-agent-ceo-dashboard"], body[data-tool="broker-business-scorecard"] { --tool-color: var(--clay); }
body[data-tool] { --tool-soft: color-mix(in srgb, var(--tool-color), var(--paper) 76%); }
[data-theme="dark"] body[data-tool] { --tool-soft: color-mix(in srgb, var(--tool-color), var(--ink) 76%); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
body {
  margin: 0; min-height: 100vh; overflow-x: hidden;
  background: radial-gradient(circle at 12% 19%, color-mix(in srgb, var(--sage), transparent 77%) 0 10rem, transparent 10.2rem), linear-gradient(90deg, color-mix(in srgb, var(--line), transparent 84%) 1px, transparent 1px), var(--bg);
  background-size: auto, 64px 64px, auto; color: var(--text); font: 400 var(--text-body)/1.65 var(--font-body);
  transition: background-color var(--motion-ui) var(--ease-out), color var(--motion-ui) var(--ease-out);
}
a { color: inherit; } button, input, select, textarea { font: inherit; } button { color: inherit; }
img, canvas { display: block; max-width: 100%; } ::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.container { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.narrow { width: min(calc(100% - 40px), 940px); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -90px; z-index: 1000; padding: 11px 16px; background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; font-weight: 800; }
.skip-link:focus { top: 14px; }

.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid color-mix(in srgb, var(--text), transparent 70%); background: color-mix(in srgb, var(--bg), transparent 8%); backdrop-filter: blur(16px); transition: background var(--motion-ui) var(--ease-out), box-shadow var(--motion-ui) var(--ease-out), border-color var(--motion-ui) var(--ease-out); }
.site-header.is-scrolled { border-color: color-mix(in srgb, var(--text), transparent 48%); background: color-mix(in srgb, var(--surface), transparent 3%); box-shadow: 0 10px 30px color-mix(in srgb, var(--ink), transparent 90%); }
.nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 800; letter-spacing: -.025em; }
.brand-mark { position: relative; display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border: 2px solid var(--text); border-radius: 14px 14px 14px 4px; background: var(--moss); color: var(--paper); font: 900 17px/.9 var(--font-display); box-shadow: 4px 4px 0 var(--text); transform: rotate(-2deg); transition: transform var(--motion-ui) var(--ease-out); }
.brand:hover .brand-mark, .brand:focus-visible .brand-mark { transform: rotate(2deg) translateY(-2px); }
.brand-mark::after { content: ""; position: absolute; width: 17px; height: 17px; right: -5px; top: -5px; border-radius: 50%; background: var(--ochre); }
.brand small { display: block; color: var(--muted); font: 600 10px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-link { color: var(--muted); text-decoration: none; font-weight: 700; font-size: 13px; }
.nav-link:hover { color: var(--text); text-decoration: underline; text-underline-offset: 5px; }
.icon-button, .button { border: 0; cursor: pointer; text-decoration: none; transition: transform var(--motion-ui) var(--ease-out), box-shadow var(--motion-ui) var(--ease-out), background var(--motion-ui) var(--ease-out), color var(--motion-ui) var(--ease-out); }
.icon-button { display: grid; place-items: center; width: 43px; height: 43px; border: 2px solid var(--text); border-radius: 50%; background: var(--surface); font-weight: 900; }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 9px; padding: 12px 20px; border: 2px solid var(--text); border-radius: 999px; background: var(--ink); color: var(--paper); box-shadow: 5px 5px 0 var(--text); font-weight: 800; line-height: 1.2; }
.button:hover, .button:focus-visible, .icon-button:hover, .icon-button:focus-visible { transform: translate(-2px, -2px); } .button:hover, .button:focus-visible { box-shadow: 7px 7px 0 var(--text); }
.button.secondary { color: var(--text); background: var(--surface); border-color: var(--text); }
.button.ghost { color: var(--text); background: var(--tool-soft); }
.button.small { min-height: 42px; padding: 9px 15px; font-size: 13px; box-shadow: 4px 4px 0 var(--text); }
.button:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.button-row { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; }
[data-theme="dark"] .button:not(.secondary):not(.ghost) { border-color: var(--ochre); background: var(--ochre); color: var(--ink); box-shadow: 5px 5px 0 color-mix(in srgb, var(--paper), transparent 40%); }
[data-theme="dark"] .button.secondary { color: var(--paper); background: transparent; border-color: var(--paper); }

.hero { position: relative; padding: clamp(72px, 9vw, 126px) 0 78px; overflow: clip; }
.hero::after { content: "+  +  +  +"; position: absolute; right: 5vw; bottom: 22px; color: var(--moss); font: 700 20px/1 var(--font-mono); letter-spacing: .8em; opacity: .65; }
.hero-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: clamp(34px, 6vw, 92px); align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: color-mix(in srgb, var(--tool-color), var(--text) 30%); font: 700 12px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 30px; height: 3px; border-radius: 99px; background: currentColor; }
h1, h2, h3 { text-wrap: balance; } h1, h2 { font-family: var(--font-display); text-transform: uppercase; }
h1 { margin: 19px 0 24px; max-width: 990px; font-size: var(--text-hero); font-weight: 900; line-height: .84; letter-spacing: -.025em; }
h2 { margin: 0 0 15px; font-size: var(--text-h2); font-weight: 900; line-height: .9; letter-spacing: -.018em; }
h3 { margin: 0 0 9px; font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: 1.2; letter-spacing: -.025em; }
.hero h1 .highlight { display: inline; padding: 0 .09em .04em; background: var(--sage); color: var(--ink); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.lede { max-width: 720px; margin: 0 0 31px; color: var(--muted); font-size: clamp(1.08rem, 1.8vw, 1.38rem); line-height: 1.55; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 9px; margin: 29px 0 0; }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface); font: 600 12px/1.2 var(--font-body); }
.pill.live { color: var(--ink); border: 2px solid var(--ink); background: var(--lime); font-weight: 800; }
.pill.soon { color: var(--ink); background: var(--yellow); }
.hero-visual { position: relative; min-height: 470px; display: grid; place-items: center; isolation: isolate; }
.hero-visual::before { content: ""; position: absolute; width: min(33vw, 410px); aspect-ratio: 1; border: 3px solid var(--ink); border-radius: 46% 54% 42% 58% / 51% 36% 64% 49%; background: var(--wine); box-shadow: 13px 13px 0 var(--ink); transform: rotate(7deg); }
.system-object { position: relative; z-index: 2; display: grid; place-items: center; width: 270px; aspect-ratio: 1; border: 3px solid var(--ink); border-radius: 38% 62% 48% 52% / 58% 40% 60% 42%; background: linear-gradient(145deg, var(--sage) 0 49%, var(--moss) 50% 100%); box-shadow: inset -18px -20px 0 color-mix(in srgb, var(--ink), transparent 78%), 0 24px 26px color-mix(in srgb, var(--ink), transparent 76%); transform: rotate(-5deg); }
.system-object strong { color: var(--paper); font: 900 112px/.8 var(--font-display); text-shadow: 5px 6px 0 rgba(0,0,0,.18); }
.system-object small { color: var(--paper); font: 700 12px/1 var(--font-mono); letter-spacing: .11em; }
.visual-chip { position: absolute; z-index: 3; display: grid; place-items: center; min-width: 94px; min-height: 68px; padding: 12px; border: 3px solid var(--ink); border-radius: 23px; color: var(--ink); box-shadow: 7px 8px 0 var(--ink); font: 900 25px/1 var(--font-display); }
.visual-chip.one { left: 2%; top: 11%; background: var(--pink); transform: rotate(-12deg); } .visual-chip.two { right: 0; top: 24%; background: var(--yellow); transform: rotate(9deg); }
.visual-chip.three { left: 8%; bottom: 8%; background: var(--lime); transform: rotate(5deg); } .visual-chip.four { right: 8%; bottom: 4%; background: var(--orange); transform: rotate(-7deg); }
.brand-strip { border-block: 2px solid var(--ink); background: var(--ochre); color: var(--ink); overflow: hidden; }
.brand-strip-track { display: flex; width: max-content; gap: 32px; padding: 12px 0; font: 900 21px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.brand-strip-track span::after { content: "✦"; margin-left: 32px; }

.section { padding: clamp(72px, 9vw, 128px) 0; }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .62fr); align-items: end; gap: 32px; margin-bottom: 42px; }
.section-head p { max-width: 620px; margin: 0; color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.card { position: relative; padding: 25px; border: 2px solid var(--text); border-radius: var(--radius); background: var(--surface); box-shadow: 7px 7px 0 var(--text); }
.tool-card { --card-color: var(--clay); --card-soft: color-mix(in srgb, var(--card-color), var(--paper) 78%); min-height: 345px; display: flex; flex-direction: column; overflow: hidden; transition: transform var(--motion-ui) var(--ease-out), box-shadow var(--motion-ui) var(--ease-out); }
.tool-card:hover, .tool-card:focus-within { transform: translate(-3px,-4px) rotate(-.35deg); box-shadow: 11px 12px 0 var(--text); }
.tool-card:nth-child(3n + 2) { transform: translateY(26px); } .tool-card:nth-child(3n + 2):hover, .tool-card:nth-child(3n + 2):focus-within { transform: translate(-3px,20px) rotate(.35deg); }
.tool-card:nth-child(2), .tool-card:nth-child(3), .tool-card:nth-child(10) { --card-color: var(--ochre); }
.tool-card:nth-child(6), .tool-card:nth-child(8), .tool-card:nth-child(9) { --card-color: var(--rose); }
.tool-card:nth-child(5), .tool-card:nth-child(7), .tool-card:nth-child(13) { --card-color: var(--blue); }
.tool-card:nth-child(4) { --card-color: var(--olive); }
.tool-card:nth-child(11) { --card-color: var(--sage); }
.tool-card:nth-child(12), .tool-card:nth-child(14) { --card-color: var(--teal); }
.tool-card:nth-child(15) { --card-color: var(--clay); }
.tool-card::before { content: attr(data-icon); display: grid; place-items: center; width: 104px; height: 90px; margin: 0 0 26px auto; border: 2px solid var(--ink); border-radius: 28px 28px 13px 28px; background: var(--card-color); color: var(--ink); box-shadow: inset -8px -9px 0 rgba(36,18,15,.12), 5px 6px 0 var(--ink); font: 900 40px/.9 var(--font-display); transform: rotate(4deg); }
.tool-card::after { content: attr(data-index); position: absolute; right: 18px; bottom: -19px; color: color-mix(in srgb, var(--card-color), transparent 38%); font: 900 92px/.8 var(--font-display); letter-spacing: -.07em; pointer-events: none; }
.tool-card > * { position: relative; z-index: 1; }
.tool-card h3 { max-width: 16ch; font-family: var(--font-display); font-size: clamp(1.8rem, 2.7vw, 2.55rem); line-height: .94; text-transform: uppercase; }
.tool-card p { color: var(--muted); margin: 8px 0 25px; } .tool-card .button { align-self: flex-start; margin-top: auto; background: var(--ink); color: var(--paper); }
.card-top { position: absolute; inset: 24px auto auto 24px; display: flex; flex-direction: column; align-items: start; gap: 9px; }
.tool-number { color: color-mix(in srgb, var(--card-color), var(--ink) 42%); font: 800 11px/1 var(--font-mono); }

.tool-hero { position: relative; padding: clamp(54px, 8vw, 100px) 0 52px; border-bottom: 2px solid var(--text); overflow: hidden; }
.tool-hero::before { content: ""; position: absolute; inset: auto -7vw -42% auto; width: 34vw; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--tool-color), transparent 68%); }
.tool-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(245px,.43fr); gap: clamp(36px,7vw,92px); align-items: center; }
.tool-hero h1 { margin-top: 16px; font-size: var(--text-h1-tool); line-height: .86; } .tool-hero .lede { max-width: 680px; }
.back-link { display: inline-flex; margin-bottom: 24px; color: var(--muted); font: 700 12px/1.2 var(--font-mono); text-decoration: none; text-transform: uppercase; }
.back-link:hover { color: var(--text); }
.tool-art { position: relative; min-height: 310px; display: grid; place-items: center; isolation: isolate; }
.tool-art::before { content: ""; position: absolute; width: 260px; aspect-ratio: 1; border: 3px solid var(--ink); border-radius: 39% 61% 57% 43% / 60% 43% 57% 40%; background: var(--charcoal); box-shadow: 10px 12px 0 var(--ink); transform: rotate(8deg); }
.tool-art-main { position: relative; z-index: 2; display: grid; place-items: center; width: 176px; height: 158px; padding: 14px; border: 3px solid var(--ink); border-radius: 38px 38px 17px 38px; background: linear-gradient(145deg, color-mix(in srgb, var(--tool-color), var(--paper) 25%), var(--tool-color)); color: var(--tool-ink); box-shadow: inset -12px -14px 0 color-mix(in srgb, var(--ink), transparent 86%), 0 18px 28px color-mix(in srgb, var(--ink), transparent 76%); font: 900 clamp(2.4rem,5vw,4.8rem)/.8 var(--font-display); text-align: center; transform: rotate(-6deg); }
.tool-art-main small { display: block; margin-top: 8px; font: 700 10px/1 var(--font-mono); letter-spacing: .08em; }
.tool-art-chip { position: absolute; z-index: 3; display: grid; place-items: center; width: 74px; height: 54px; border: 3px solid var(--ink); border-radius: 18px; color: var(--ink); box-shadow: 5px 5px 0 var(--ink); font: 900 20px/1 var(--font-display); }
.tool-art-chip.a { top: 25px; right: 7px; background: var(--ochre); transform: rotate(10deg); } .tool-art-chip.b { left: 3px; bottom: 28px; background: var(--rose); transform: rotate(-10deg); } .tool-art-chip.c { right: 20px; bottom: 11px; width: 46px; height: 46px; border-radius: 50%; background: var(--olive); }

.tool-shell { padding: clamp(42px,7vw,88px) 0 116px; }
.tool-shell > .container::before, .tool-shell > .narrow::before { content: "BROKEROS / INPUT → INSIGHT → ACTION"; display: block; margin-bottom: 16px; color: var(--muted); font: 600 10px/1 var(--font-mono); letter-spacing: .12em; }
.panel { padding: clamp(22px,4vw,40px); border: 2px solid var(--text); border-radius: 28px; background: var(--surface); box-shadow: var(--shadow); }
.panel + .panel { margin-top: 28px; }
.panel-head { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 28px; padding-bottom: 21px; border-bottom: 1px solid var(--line); }
.panel-head h2 { max-width: 14ch; font-size: clamp(2.45rem,4.8vw,4.5rem); } .panel-head p, .muted { color: var(--muted); }
.progress { height: 12px; overflow: hidden; border: 2px solid var(--text); border-radius: 99px; background: var(--surface-2); }
.progress > span { display: block; height: 100%; width: 0; background: var(--tool-color); transition: width var(--motion-slow) var(--ease-out); }
.progress-meta { display: flex; justify-content: space-between; margin: 11px 0 28px; color: var(--muted); font: 600 12px/1 var(--font-mono); }
.question { animation: rise .28s ease both; } .question h2 { max-width: 720px; font: 900 clamp(2rem,4.4vw,3.6rem)/.96 var(--font-display); text-transform: none; }
.answers { display: grid; gap: 12px; margin: 28px 0; }
.answer { display: grid; grid-template-columns: 42px 1fr; gap: 13px; align-items: start; width: 100%; padding: 16px; text-align: left; border: 2px solid var(--line); border-radius: 17px; background: var(--surface); color: var(--text); cursor: pointer; transition: transform var(--motion-ui) var(--ease-out), border-color var(--motion-ui) var(--ease-out), background var(--motion-ui) var(--ease-out), box-shadow var(--motion-ui) var(--ease-out); }
.answer:hover, .answer:focus-visible { border-color: var(--text); background: var(--tool-soft); transform: translateX(3px); }
.answer.selected { border-color: var(--text); background: var(--tool-soft); box-shadow: 5px 5px 0 var(--text); }
.answer-score { display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid var(--text); border-radius: 12px; background: var(--tool-soft); color: var(--text); font: 800 13px/1 var(--font-mono); }

.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; } .field { display: grid; gap: 8px; } .field.full { grid-column: 1 / -1; }
.field label, .label { font-weight: 800; font-size: 13px; } .field small { color: var(--muted); }
input, select, textarea { width: 100%; min-height: 51px; padding: 12px 14px; color: var(--text); background: var(--surface); border: 2px solid var(--line); border-radius: 14px; outline: none; }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { color: var(--ink); background: var(--canvas); border-color: var(--sage); }
textarea { min-height: 118px; resize: vertical; } input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb,var(--text),transparent 45%); }
input:focus, select:focus, textarea:focus { border-color: var(--text); box-shadow: 4px 4px 0 var(--tool-color); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--danger); }
.checkbox { display: grid; grid-template-columns: 22px 1fr; gap: 11px; align-items: start; color: var(--muted); font-size: 14px; }
.checkbox input { width: 18px; min-height: 18px; margin-top: 3px; accent-color: var(--tool-color); }
.form-error { color: var(--danger); font-size: 14px; margin: 12px 0 0; }
.honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

.results-hero { display: grid; grid-template-columns: 210px 1fr; gap: 36px; align-items: center; }
.score-ring { --score: 0; display: grid; place-items: center; aspect-ratio: 1; border: 3px solid var(--text); border-radius: 43% 57% 49% 51% / 51% 42% 58% 49%; background: conic-gradient(var(--tool-color) calc(var(--score)*1%), var(--surface-2) 0); position: relative; box-shadow: 8px 8px 0 var(--text); transform: rotate(-2deg); transition: --score var(--motion-slow) var(--ease-out), transform var(--motion-ui) var(--ease-out); }
.results-hero:hover .score-ring { transform: rotate(0deg) translateY(-3px); }
.score-ring::after { content: ""; position: absolute; inset: 17px; border: 2px solid var(--text); border-radius: inherit; background: var(--surface); }
.score-value { z-index: 1; text-align: center; font: 900 62px/.8 var(--font-display); } .score-value small { display: block; margin-top: 9px; color: var(--muted); font: 650 11px/1 var(--font-body); }
.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.metric { padding: 19px; border: 2px solid var(--text); border-radius: 18px; background: var(--tool-soft); } .metric:nth-child(2n) { background: var(--surface); }
.metric strong { display: block; margin-top: 8px; font: 900 clamp(1.65rem,3.5vw,2.5rem)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.metric small { color: var(--muted); } .metric.positive strong { color: var(--success); } .metric.negative strong { color: var(--danger); }
.stack { display: grid; gap: 17px; } .subgrid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.table-wrap { width: 100%; overflow-x: auto; border: 2px solid var(--text); border-radius: 18px; }
table { width: 100%; border-collapse: collapse; min-width: 720px; background: var(--surface); }
th, td { padding: 13px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { color: var(--text); font: 700 11px/1.2 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; background: var(--tool-soft); }
tr:last-child td { border-bottom: 0; } tbody tr:hover { background: color-mix(in srgb,var(--tool-soft),transparent 58%); } td input, td select { min-height: 42px; min-width: 112px; }
.range-row { display: grid; grid-template-columns: 180px 1fr 54px; gap: 15px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); } .range-row:last-child { border-bottom: 0; }
input[type="range"] { min-height: auto; padding: 0; border: 0; box-shadow: none; accent-color: var(--tool-color); }
.range-value { color: var(--text); font: 900 20px/1 var(--font-display); text-align: right; }
.tabs { display: flex; gap: 9px; overflow-x: auto; margin-bottom: 24px; padding: 3px 4px 7px; }
.tab { flex: 0 0 auto; padding: 10px 14px; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); cursor: pointer; }
.tab.active { border-color: var(--text); color: var(--text); background: var(--tool-color); box-shadow: 3px 3px 0 var(--text); font-weight: 800; }
.script-card { padding: 20px; border: 2px solid var(--text); border-radius: 20px; background: var(--tool-soft); } .script-card:nth-child(2n) { background: var(--surface); } .script-card p { white-space: pre-line; }
.check-list { display: grid; gap: 11px; } .check-item { display: grid; grid-template-columns: 22px 1fr; gap: 11px; padding: 13px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); }
.check-item:has(input:checked) { border-color: var(--text); background: var(--tool-soft); } .check-item input { width: 18px; min-height: 18px; accent-color: var(--tool-color); }
.summary { white-space: pre-wrap; padding: 20px; border-radius: 17px; background: var(--tool-soft); border: 2px solid var(--text); font: 500 14px/1.65 var(--font-mono); }
.tag { display: inline-flex; padding: 5px 9px; border: 1px solid var(--text); border-radius: 999px; background: var(--tool-soft); color: var(--text); font-size: 11px; font-weight: 800; }
.danger-link { border: 0; background: transparent; color: var(--danger); cursor: pointer; text-decoration: underline; }
.pillar-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; } .pillar { padding: 17px; border: 2px solid var(--line); border-radius: 17px; background: var(--surface); }
.pillar-head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 10px; } .pillar-bar { height: 10px; border: 1px solid var(--text); border-radius: 99px; background: var(--surface-2); overflow: hidden; } .pillar-bar span { display: block; height: 100%; border-radius: inherit; }
.status-critical { color: var(--danger); } .status-weak { color: var(--warm); } .status-developing { color: var(--moss); } .status-strong { color: var(--success); }
.status-critical .pillar-bar span { background: var(--danger); } .status-weak .pillar-bar span { background: var(--clay); } .status-developing .pillar-bar span { background: var(--ochre); } .status-strong .pillar-bar span { background: var(--success); }
.bottleneck-list { display: grid; gap: 11px; padding: 0; list-style: none; counter-reset: gaps; }
.bottleneck-list li { counter-increment: gaps; display: grid; grid-template-columns: 42px 1fr; gap: 13px; align-items: center; padding: 14px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); }
.bottleneck-list li::before { content: counter(gaps); display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--text); border-radius: 12px; background: var(--tool-color); color: var(--tool-ink); font: 900 20px/1 var(--font-display); }
.notice { padding: 17px 19px; border: 2px solid var(--text); border-radius: 17px; background: var(--tool-soft); box-shadow: 4px 4px 0 var(--text); }
.empty { padding: 48px 20px; text-align: center; color: var(--muted); } .hidden { display: none !important; }
.toast { position: fixed; right: 19px; bottom: 19px; z-index: 100; max-width: 380px; padding: 14px 17px; border: 2px solid var(--text); border-radius: 15px; background: var(--ochre); color: var(--ink); box-shadow: 6px 6px 0 var(--ink); font-weight: 700; animation: rise var(--motion-ui) var(--ease-out) both; }

.site-footer { padding: 60px 0; border-top: 2px solid var(--ink); background: var(--charcoal); color: var(--paper); }
.footer-grid { display: flex; justify-content: space-between; align-items: end; gap: 26px; }
.footer-brand { font: 900 clamp(2.5rem,5vw,4.8rem)/.82 var(--font-display); text-transform: uppercase; }
.footer-kicker { display: block; margin-top: 13px; color: var(--sage); font: 600 10px/1.4 var(--font-mono); letter-spacing: .1em; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 18px; } .footer-links a { color: var(--paper); text-decoration: none; } .footer-links a:hover { color: var(--ochre); }

@property --score { syntax: "<number>"; inherits: false; initial-value: 0; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.motion-ready .motion-reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--motion-section) var(--ease-out), transform var(--motion-section) var(--ease-out); transition-delay: var(--motion-delay, 0ms); }
.motion-ready .motion-reveal.is-visible { opacity: 1; transform: none; }
.motion-ready .hero-copy > *, .motion-ready .tool-hero-copy > *, .motion-ready .hero-visual, .motion-ready .tool-art { opacity: 0; transform: translateY(18px); }
.motion-ready .hero-copy h1, .motion-ready .tool-hero-copy h1 { clip-path: inset(0 0 100% 0); transform: translateY(26px); }
.motion-loaded .hero-copy > *, .motion-loaded .tool-hero-copy > *, .motion-loaded .hero-visual, .motion-loaded .tool-art { opacity: 1; transform: none; transition: opacity var(--motion-section) var(--ease-out), transform var(--motion-section) var(--ease-out), clip-path var(--motion-slow) var(--ease-out); }
.motion-loaded .hero-copy h1, .motion-loaded .tool-hero-copy h1 { clip-path: inset(0 0 0 0); }
.motion-loaded .hero-copy > :nth-child(1), .motion-loaded .tool-hero-copy > :nth-child(1) { transition-delay: 60ms; }
.motion-loaded .hero-copy > :nth-child(2), .motion-loaded .tool-hero-copy > :nth-child(2) { transition-delay: 130ms; }
.motion-loaded .hero-copy > :nth-child(3), .motion-loaded .tool-hero-copy > :nth-child(3) { transition-delay: 210ms; }
.motion-loaded .hero-copy > :nth-child(4), .motion-loaded .tool-hero-copy > :nth-child(4) { transition-delay: 280ms; }
.motion-loaded .hero-copy > :nth-child(5), .motion-loaded .tool-hero-copy > :nth-child(5), .motion-loaded .hero-visual, .motion-loaded .tool-art { transition-delay: 340ms; }
.tool-card::before, .tool-art-main, .tool-art-chip { transition: transform var(--motion-ui) var(--ease-out); }
.tool-card:hover::before, .tool-card:focus-within::before { transform: rotate(2deg) translateY(-4px); }
.tool-art:hover .tool-art-main { transform: rotate(-4deg) translateY(-4px); }
.tool-art:hover .tool-art-chip.a { transform: rotate(8deg) translateY(-3px); }
.tool-art:hover .tool-art-chip.b { transform: rotate(-8deg) translateY(-3px); }
.tool-art:hover .tool-art-chip.c { transform: translateY(-3px); }
@media (max-width: 980px) {
  .hero-layout, .tool-hero-grid { grid-template-columns: 1fr; } .hero-visual { min-height: 400px; } .hero-visual::before { width: 360px; }
  .tool-art { min-height: 280px; max-width: 390px; } .grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tool-card:nth-child(3n + 2), .tool-card:nth-child(3n + 2):hover { transform: none; } .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .container, .narrow { width: min(calc(100% - 32px), var(--max)); } .nav { min-height: 66px; gap: 12px; } .nav-actions { gap: 9px; } .brand > span:last-child, .nav-link { display: none; }
  .hero { padding-top: 58px; } .hero h1 { font-size: clamp(4rem,21vw,6.5rem); } .hero-visual { min-height: 320px; margin-top: 6px; } .hero-visual::before { width: 270px; }
  .system-object { width: 190px; } .system-object strong { font-size: 82px; } .visual-chip { min-width: 75px; min-height: 54px; font-size: 20px; }
  .brand-strip-track { font-size: 18px; } .section-head { grid-template-columns: 1fr; align-items: start; }
  .grid, .form-grid, .pillar-list, .subgrid { grid-template-columns: 1fr; } .field.full { grid-column: auto; } .tool-card { min-height: 330px; }
  .tool-hero { padding-top: 44px; } .tool-hero h1 { font-size: clamp(3.65rem,18vw,6rem); } .tool-art { min-height: 250px; margin: -4px auto 0; } .tool-art::before { width: 220px; } .tool-art-main { width: 148px; height: 134px; }
  .panel { border-radius: 22px; box-shadow: 6px 6px 0 var(--text); } .panel-head, .footer-grid { display: grid; align-items: start; } .footer-links { justify-content: flex-start; }
  .results-hero { grid-template-columns: 130px 1fr; gap: 20px; } .score-value { font-size: 40px; } .metric-grid { grid-template-columns: 1fr 1fr; }
  .range-row { grid-template-columns: 1fr 52px; } .range-row label { grid-column: 1 / -1; }
}
@media (max-width: 420px) { .grid, .metric-grid { grid-template-columns: 1fr; } .button { width: 100%; } .nav .button { width: auto; } .results-hero { grid-template-columns: 1fr; } .score-ring { width: 150px; } }
@media print {
  :root, [data-theme="dark"] { --bg:var(--paper); --surface:var(--paper); --surface-2:var(--canvas); --text:var(--ink); --muted:var(--muted); --line:var(--line); --tool-color:var(--ochre); --tool-soft:var(--canvas); }
  body { background:var(--paper); } .site-header, .site-footer, .no-print, .button-row, form, .tool-art { display:none !important; } .tool-hero { padding:20px 0; } .tool-hero-grid { grid-template-columns:1fr; } .tool-shell { padding:16px 0; } .panel { box-shadow:none; break-inside:avoid; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
  .motion-ready .motion-reveal, .motion-ready .hero-copy > *, .motion-ready .tool-hero-copy > *, .motion-ready .hero-visual, .motion-ready .tool-art { opacity:1 !important; transform:none !important; clip-path:none !important; }
}