@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Bowlby+One+SC&family=IBM+Plex+Mono:wght@600;700&display=swap");

:root {
  --ink: #11100d;
  --paper: #fff7c2;
  --panel: #fffef4;
  --pink: #ee91bc;
  --blue: #879ee8;
  --mint: #c9eaa9;
  --yellow: #f5e878;
  --red: #ed5d50;
  --muted: #5d5a4c;
  --line: 3px solid var(--ink);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
button, input, select { font: inherit; }
.preventive-page { min-height: 100vh; color: var(--ink); background: radial-gradient(#171611 1px, transparent 1px) 0 0 / 24px 24px, var(--paper); font-family: "Atkinson Hyperlegible", system-ui, sans-serif; }
.preventive-page a { color: inherit; }
.tool-skip { position: fixed; z-index: 20; left: 12px; top: -80px; padding: 10px 14px; background: #fff; border: var(--line); font-weight: 700; }
.tool-skip:focus { top: 12px; }
.tool-nav { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 18px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 4px solid var(--ink); }
.tool-brand { display: grid; place-items: center; width: 62px; height: 48px; text-decoration: none; background: var(--pink); border: var(--line); box-shadow: 4px 4px 0 var(--ink); font: 700 18px "IBM Plex Mono", monospace; transform: rotate(-2deg); }
.tool-nav nav { display: flex; align-items: center; gap: 20px; font-weight: 700; }
.tool-nav nav a { text-underline-offset: 4px; }
.tool-shell, .tool-hub-hero, .tool-grid, .tool-trust-strip { width: min(940px, calc(100% - 32px)); margin-inline: auto; }
.tool-shell-wide { width: min(1180px, calc(100% - 32px)); }
.tool-hero, .tool-hub-hero { padding: clamp(54px, 9vw, 100px) 0 46px; }
.tool-hub-hero { width: min(1100px, calc(100% - 32px)); }
.tool-kicker { margin: 0 0 18px; font: 700 13px "IBM Plex Mono", monospace; letter-spacing: .13em; text-transform: uppercase; }
.tool-kicker::before { content: "/// "; color: #526cd0; }
.tool-hero h1, .tool-hub-hero h1 { max-width: 1020px; margin: 0; font: 400 clamp(44px, 8vw, 88px)/.96 "Bowlby One SC", Impact, sans-serif; letter-spacing: -.035em; text-transform: uppercase; }
.tool-deck { max-width: 760px; margin: 26px 0 0; color: var(--muted); font-size: clamp(19px, 2.4vw, 24px); line-height: 1.48; }
.tool-proof { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.tool-proof span { padding: 7px 11px; border: 2px solid var(--ink); background: var(--panel); font: 700 12px "IBM Plex Mono", monospace; text-transform: uppercase; }
.tool-grid { width: min(1100px, calc(100% - 32px)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; padding: 8px 0 72px; }
.tool-card { min-height: 280px; padding: 28px; display: flex; flex-direction: column; text-decoration: none; background: var(--panel); border: var(--line); box-shadow: 7px 7px 0 var(--ink); transition: transform .15s ease, box-shadow .15s ease; }
.tool-card:nth-child(2), .tool-card:nth-child(6) { background: var(--mint); }
.tool-card:nth-child(3) { background: var(--pink); }
.tool-card:nth-child(4) { background: var(--blue); }
.tool-card:nth-child(5) { background: var(--yellow); }
.tool-card-primary { grid-column: 1 / -1; min-height: 320px; background: var(--ink); color: #fff; }
.preventive-page .tool-card-primary { color: #fff; }
.tool-card:hover { transform: translate(-2px, -2px); box-shadow: 11px 11px 0 var(--ink); }
.tool-card > span { font: 700 12px "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
.tool-card h2 { max-width: 700px; margin: 28px 0 14px; font: 400 clamp(28px, 4vw, 48px)/1.02 "Bowlby One SC", Impact, sans-serif; text-transform: uppercase; }
.tool-card p { max-width: 680px; margin: 0; font-size: 18px; line-height: 1.55; }
.tool-card strong { margin-top: auto; padding-top: 26px; font: 700 15px "IBM Plex Mono", monospace; }
.tool-trust-strip { width: min(1100px, calc(100% - 32px)); margin-bottom: 80px; padding: 30px; background: var(--panel); border: var(--line); border-left: 14px solid var(--red); }
.tool-trust-strip h2 { margin: 0 0 10px; font: 400 28px "Bowlby One SC", Impact, sans-serif; text-transform: uppercase; }
.tool-trust-strip p { margin: 0; font-size: 17px; line-height: 1.55; }

.preventive-form { margin-bottom: 40px; background: var(--panel); border: 4px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); }
.form-section { padding: clamp(24px, 5vw, 42px); border-bottom: var(--line); }
.form-section:last-of-type { border-bottom: var(--line); }
.form-section-alert { background: #ffe4de; }
.form-section h2 { margin: 0 0 24px; font: 400 clamp(24px, 4vw, 34px)/1.1 "Bowlby One SC", Impact, sans-serif; text-transform: uppercase; }
.tool-field { display: grid; gap: 8px; margin-top: 18px; }
.tool-field > span { font-weight: 700; font-size: 17px; }
.tool-field input, .tool-field select { width: 100%; min-height: 52px; padding: 12px 14px; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 0; font-size: 18px; }
.tool-field input:focus, .tool-field select:focus, .tool-submit:focus, .choice-tiles input:focus + span { outline: 4px solid #536fd6; outline-offset: 2px; }
.form-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tool-checks { display: grid; gap: 12px; }
.tool-checks label, .tool-toggle { display: flex; align-items: flex-start; gap: 12px; padding: 15px; background: #fff; border: 2px solid var(--ink); font-size: 17px; line-height: 1.35; cursor: pointer; }
.tool-checks input, .tool-toggle input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: #526cd0; }
.tool-submit { width: calc(100% - 48px); margin: 24px; padding: 18px 22px; color: #fff; background: var(--ink); border: 0; box-shadow: 5px 5px 0 #526cd0; font: 700 17px "IBM Plex Mono", monospace; cursor: pointer; }
.tool-submit:hover { background: #526cd0; box-shadow: 5px 5px 0 var(--ink); }
.form-error { margin: -10px 24px 24px; color: #981c12; font-weight: 700; }
.choice-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.choice-tiles label { position: relative; cursor: pointer; }
.choice-tiles input { position: absolute; opacity: 0; }
.choice-tiles span { min-height: 126px; display: flex; flex-direction: column; gap: 7px; padding: 18px; background: #fff; border: 2px solid var(--ink); line-height: 1.4; }
.choice-tiles input:checked + span { background: var(--mint); box-shadow: inset 0 0 0 4px #526cd0; }
.choice-tiles strong { font-size: 19px; }

.tool-result { margin: 46px 0; padding: clamp(24px, 5vw, 42px); background: var(--mint); border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.tool-result[data-category="symptom-evaluation"], .tool-result[data-category="usually-self-pay"] { background: #ffe4de; }
.tool-result[data-category="elective-uncertain"], .tool-result[data-category="verify"] { background: var(--yellow); }
.tool-result h2 { margin: 5px 0 14px; font: 400 clamp(27px, 5vw, 43px)/1.05 "Bowlby One SC", Impact, sans-serif; text-transform: uppercase; }
.tool-result p { font-size: 18px; line-height: 1.55; }
.result-label { margin: 0; font: 700 12px "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.result-action { display: inline-flex; margin-top: 12px; padding: 12px 15px; color: #fff !important; background: var(--ink); text-decoration: none; font-weight: 700; }
.result-list { display: grid; gap: 15px; margin-top: 26px; }
.result-item { padding: 20px; background: rgba(255,255,255,.75); border: 2px solid var(--ink); }
.result-item h3 { margin: 7px 0 8px; font-size: 21px; }
.result-item p { margin: 0; font-size: 16px; }
.result-status { display: inline-flex; padding: 5px 8px; background: var(--ink); color: #fff; font: 700 11px "IBM Plex Mono", monospace; text-transform: uppercase; }
.result-source { display: inline-flex; margin-top: 12px; font-size: 14px; font-weight: 700; }
.call-script, .comparison-intro, .affiliate-note, .tool-disclosure { margin: 30px 0; padding: 26px; background: var(--panel); border: var(--line); }
.call-script { background: var(--blue); box-shadow: 6px 6px 0 var(--ink); }
.call-script h2, .comparison-intro h2, .affiliate-note h2, .tool-disclosure h2 { margin: 0 0 10px; font: 400 25px "Bowlby One SC", Impact, sans-serif; text-transform: uppercase; }
.call-script p, .comparison-intro p, .affiliate-note p, .tool-disclosure p { margin: 8px 0; font-size: 17px; line-height: 1.55; }
.tool-disclosure { margin-bottom: 80px; color: var(--muted); border-width: 2px; }
.comparison-wrap { margin: 36px 0; }
.comparison-wrap > h2 { font: 400 clamp(28px, 4vw, 42px) "Bowlby One SC", Impact, sans-serif; text-transform: uppercase; }
.comparison-scroll { max-width: 100%; overflow: auto; background: var(--panel); border: var(--line); box-shadow: 7px 7px 0 var(--ink); }
.comparison-scroll table { width: 100%; min-width: 1120px; border-collapse: collapse; }
.comparison-scroll th, .comparison-scroll td { padding: 16px; text-align: left; vertical-align: top; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); line-height: 1.42; }
.comparison-scroll th { background: var(--blue); font: 700 13px "IBM Plex Mono", monospace; text-transform: uppercase; }
.comparison-scroll td:first-child { font-weight: 700; font-size: 18px; }
.comparison-scroll a { font-weight: 700; }
.affiliate-note { background: var(--pink); }
.tool-footer { min-height: 100px; padding: 30px max(16px, calc((100% - 1180px) / 2)); display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; color: #fff; background: var(--ink); font-weight: 700; }

.guides-index { padding-bottom: 80px; }
.guide-cluster { width: min(1100px, calc(100% - 32px)); margin: 0 auto; padding: 58px 0; border-top: 4px solid var(--ink); }
.guide-cluster > header { max-width: 760px; margin-bottom: 28px; }
.guide-cluster > header h2 { margin: 0 0 12px; font: 400 clamp(32px, 5vw, 54px)/1 "Bowlby One SC", Impact, sans-serif; text-transform: uppercase; }
.guide-cluster > header p:last-child { font-size: 18px; line-height: 1.55; }
.guide-index-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.guide-index-grid > a { min-height: 280px; padding: 22px; display: flex; flex-direction: column; background: var(--panel); border: var(--line); box-shadow: 5px 5px 0 var(--ink); text-decoration: none; }
.guide-index-grid > a:nth-child(3n + 2) { background: var(--mint); }
.guide-index-grid > a:nth-child(3n + 3) { background: #e8ddff; }
.guide-index-grid span { font: 700 11px "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.guide-index-grid h3 { margin: 24px 0 12px; font-size: 25px; line-height: 1.08; }
.guide-index-grid p { margin: 0; color: var(--muted); line-height: 1.5; }
.guide-index-grid strong { margin-top: auto; padding-top: 22px; font-family: "IBM Plex Mono", monospace; }

.guide-shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding-bottom: 80px; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 30px; align-items: start; }
.guide-shell > article { min-width: 0; }
.guide-hero { padding: clamp(54px, 8vw, 90px) 0 36px; }
.guide-hero h1 { max-width: 850px; margin: 0; font: 400 clamp(40px, 7vw, 72px)/.98 "Bowlby One SC", Impact, sans-serif; letter-spacing: -.03em; text-transform: uppercase; }
.guide-description { max-width: 740px; margin: 22px 0 0; color: var(--muted); font-size: 21px; line-height: 1.52; }
.guide-answer { margin: 0 0 24px; padding: 26px; background: var(--mint); border: 4px solid var(--ink); box-shadow: 7px 7px 0 var(--ink); }
.guide-answer strong { font: 700 12px "IBM Plex Mono", monospace; letter-spacing: .09em; text-transform: uppercase; }
.guide-answer p { margin: 10px 0 0; font-size: 21px; line-height: 1.5; }
.guide-body { padding: clamp(24px, 5vw, 48px); background: var(--panel); border: var(--line); }
.guide-body section + section { margin-top: 52px; padding-top: 44px; border-top: 2px solid var(--ink); }
.guide-body h2, .guide-cta h2, .guide-faq > h2, .guide-sources > h2, .guide-related h2 { margin: 0 0 18px; font: 400 clamp(27px, 4vw, 38px)/1.08 "Bowlby One SC", Impact, sans-serif; text-transform: uppercase; }
.guide-body p, .guide-body li { font-size: 18px; line-height: 1.72; }
.guide-body li { margin: 9px 0; }
.guide-cta { margin: 30px 0; padding: 30px; background: var(--pink); border: var(--line); box-shadow: 6px 6px 0 var(--ink); }
.guide-cta h2 { margin-top: 7px; }
.guide-faq, .guide-sources { margin-top: 30px; padding: clamp(24px, 5vw, 38px); background: var(--panel); border: var(--line); }
.guide-faq details { border-top: 2px solid var(--ink); }
.guide-faq details:last-child { border-bottom: 2px solid var(--ink); }
.guide-faq summary { padding: 17px 0; cursor: pointer; font-size: 18px; font-weight: 700; }
.guide-faq details p { margin: 0 0 18px; font-size: 17px; line-height: 1.6; }
.guide-sources li { margin: 10px 0; }
.guide-sources p { color: var(--muted); font-size: 15px; line-height: 1.55; }
.guide-related { position: sticky; top: 20px; margin-top: 120px; padding: 22px; background: var(--blue); border: var(--line); box-shadow: 6px 6px 0 var(--ink); }
.guide-related h2 { font-size: 23px; }
.guide-related a { display: block; padding: 13px 0; border-top: 2px solid var(--ink); font-weight: 700; }

@media (max-width: 760px) {
  .tool-nav nav a:not(:first-child) { display: none; }
  .tool-grid { grid-template-columns: 1fr; }
  .tool-card-primary { grid-column: auto; }
  .form-columns, .choice-tiles { grid-template-columns: 1fr; }
  .tool-hero h1, .tool-hub-hero h1 { font-size: clamp(42px, 13vw, 65px); }
  .tool-submit { width: calc(100% - 32px); margin: 16px; }
  .form-section { padding: 24px 18px; }
  .guide-index-grid { grid-template-columns: 1fr; }
  .guide-index-grid > a { min-height: 0; }
  .guide-shell { grid-template-columns: 1fr; }
  .guide-related { position: static; margin-top: 0; }
  .guide-hero h1 { font-size: clamp(39px, 12vw, 58px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tool-card { transition: none; }
}