@import url("./design-tokens.css");

/* Shared visual contract for landing, intake and report. */
:root {
  --ds-hover: var(--ds-primary-strong);
  --ds-shadow: 0 24px 60px var(--ds-shadow-medium);
  --ink: var(--ds-ink);
  --muted: var(--ds-muted);
  --line: var(--ds-line);
  --blue: var(--ds-primary);
  --blue-dark: var(--ds-hover);
  --navy: var(--ds-ink);
  --red: var(--ds-danger);
  --amber: var(--ds-warning);
  --green: var(--ds-success);
}
html { color-scheme: light; }
body { font-family: var(--ds-font), Pretendard, system-ui, sans-serif; font-size: 16px; line-height: 24px; }
*, *::before, *::after { box-sizing: border-box; letter-spacing: 0 !important; }
h1, h2, h3, p { overflow-wrap: break-word; word-break: keep-all; }
button, input, select, textarea { font-family: inherit; }
a, button, input, select, textarea { transition-duration: 160ms; }
:is(a, button, input, select, textarea):focus-visible { outline: 3px solid #8fb0ff !important; outline-offset: 3px; }
.site-header, .topbar { background: rgb(255 255 255 / 92%); border-bottom: 1px solid var(--ds-line); backdrop-filter: blur(10px); }
.header-inner, .topbar__inner { width: min(1132px, calc(100% - 48px)); min-height: 72px; height: auto; }
.container { width: min(1132px, calc(100% - 48px)); }
.brand { font-size: 17px; line-height: 24px; font-weight: 750; }
.brand-logo { display: block; flex-shrink: 0; width: 32px; height: 32px; }
.brand-mark, .brand__mark { width: 36px; height: 36px; border-radius: 10px; font-size: 15px; line-height: 20px; background: var(--ds-ink); }
.hero-title { font-size: 68px !important; line-height: 76px !important; }
.intro h1, .report-head h1 { font-size: 52px; line-height: 60px; font-weight: 800; }
.section-heading h2, .next-copy h2 { font-size: 42px; line-height: 52px; }
.priority-finding h2 { font-size: 36px; line-height: 44px; }
.group-heading h2 { font-size: 24px; line-height: 32px; }
.intro-copy, .report-head__lead { font-size: 18px; line-height: 30px; color: var(--ds-text); }
.eyebrow { font-size: 13px; line-height: 20px; font-weight: 750; color: var(--ds-primary); }
.intro-inner, .report-head { padding-top: 80px; padding-bottom: 64px; }
.report-head { background: var(--ds-surface); }
.report-head__grid { gap: 48px; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
.evidence-grid { gap: 48px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.button, .submit-button, .result-actions button { min-height: 52px; border-radius: var(--ds-radius); padding: 0 24px; font-size: 17px; line-height: 24px; font-weight: 750; }
.button--small { min-height: 44px; font-size: 15px; padding: 0 20px; }
.button--primary, .submit-button { background: var(--ds-primary); }
.button--primary:hover, .submit-button:hover { background: var(--ds-hover); }
.button--secondary { border-color: var(--ds-input-line); }
.service-row .button { flex-shrink: 0; font-size: 15px; }
.field input, .field select, .field textarea { border-color: var(--ds-input-line); border-radius: var(--ds-radius); font-size: 16px; line-height: 24px; }
.field input, .field select { height: 52px; padding: 0 16px; }
.field textarea { padding: 16px; }
.score-panel, .screen-figure, .intake-form { border-color: var(--ds-line); border-radius: var(--ds-card-radius); box-shadow: var(--ds-shadow); }
.screen-figure { overflow: hidden; }
.finding-block--solution { background: var(--ds-tint); }
.finding-row { grid-template-columns: 64px minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr); gap: 24px; }
.directions-section { background: var(--ds-surface); color: var(--ds-ink); }
.section-heading--light .eyebrow { color: var(--ds-primary); }
.section-heading--light > p { color: var(--ds-muted); }
.direction-card { background: #fff; color: var(--ds-ink); border: 2px solid var(--ds-line); padding: 24px; border-radius: var(--ds-card-radius); }
.direction-card:hover { border-color: #8fb0ff; transform: none; }
.direction-card.is-selected { background: var(--ds-tint); border-color: var(--ds-primary); padding: 24px; }
.direction-card__letter { border-color: var(--ds-line); color: var(--ds-primary); }
.direction-card__tag, .direction-card__select, .direction-card.is-selected .direction-card__select { color: var(--ds-primary); }
.direction-card > p, .direction-card__meta { color: var(--ds-muted); border-color: var(--ds-line); }
.recommend-badge { background: var(--ds-primary); color: #fff; }
.recommendation { border-color: var(--ds-line); background: #fff; grid-template-columns: 160px minmax(0, 1fr) 180px; gap: 24px; }
.recommendation__label, .recommendation__decision strong { color: var(--ds-primary); }
.recommendation__label span { background: var(--ds-tint); color: var(--ds-primary); }
.recommendation p, .recommendation__decision span { color: var(--ds-muted); }
.recommendation__decision { border-color: var(--ds-line); }
.next-grid { gap: 48px; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.service-row { flex-wrap: wrap; gap: 24px; }
@media (max-width: 980px) {
  .hero-title { font-size: 52px !important; line-height: 60px !important; }
  .report-head__grid, .evidence-grid, .next-grid { grid-template-columns: minmax(0, 1fr); }
  .finding-row { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); }
  .recommendation { grid-template-columns: 140px minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .hero-title { font-size: 40px !important; line-height: 48px !important; }
  .intro h1, .report-head h1 { font-size: 36px; line-height: 44px; }
  .section-heading h2, .next-copy h2, .priority-finding h2 { font-size: 28px; line-height: 36px; }
  .container, .header-inner, .topbar__inner, .intro-inner, .form-section { width: calc(100% - 40px); }
  .topbar__inner, .header-inner { min-height: 64px; }
  .report-head, .intro-inner { padding-top: 48px; padding-bottom: 48px; }
  .evidence-section, .findings-section, .directions-section, .next-section { padding: 64px 0; }
  .topbar__meta, .topbar .text-link { display: none; }
  .button--small { min-height: 40px; font-size: 14px; padding: 0 16px; }
  .section-heading { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 700px) {
  .finding-row { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; }
  .recommendation { grid-template-columns: minmax(0, 1fr); }
  .recommendation__decision { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}