@font-face {
  font-family: Pathway;
  src: url("/resources/inter-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --canvas: #161616;
  --card: #1f1f1f;
  --surface: #2a2a2a;
  --line: #303030;
  --ink: #ffffff;
  --body: #dde0e2;
  --muted: #a8aaad;
  --action: #fc6719;
  --pressed: #d9530e;
  --tint: #3a2110;
  --warning: #e8c547;
  --error: #f0413e;
  --effort: #2bd4d9;
  --complete: #57c84d;
  font-family: Pathway, Arial, sans-serif;
  font-synthesis: none;
  font-size: 18px;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 24px; }
body { margin: 0; background: var(--canvas); color: var(--ink); }
body, input, button { font-family: Pathway, Arial, sans-serif; }
main { max-width: 1280px; margin: 0 auto; padding: 0 24px 80px; }
p, li, td, th, label, legend, figcaption, caption { font-size: 18px; line-height: 1.65; }
p { margin: 0 0 20px; color: var(--body); max-width: 68ch; }
strong { font-weight: 750; }
h1, h2, h3, button, [data-action], [data-identity] { font-variant-numeric: tabular-nums; }
h1 { font-size: 64px; font-weight: 850; line-height: 1.06; letter-spacing: -0.05em; margin: 20px 0 28px; max-width: 19ch; text-wrap: balance; }
h2 { font-size: 32px; line-height: 1.2; letter-spacing: -0.025em; font-weight: 750; margin: 0 0 24px; text-wrap: balance; }
h3 { font-size: 24px; line-height: 1.3; letter-spacing: -0.015em; font-weight: 750; margin: 0 0 16px; }
a { color: inherit; font-size: 16px; line-height: 1.5; text-underline-offset: 5px; text-decoration-thickness: 1px; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; gap: 16px; padding: 10px 0; }
a span[aria-hidden] { text-decoration: none; font-size: 24px; line-height: 1; }
a:hover { color: var(--action); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--effort); outline-offset: 5px; }
button { border: 1px solid #737579; color: var(--ink); background: var(--surface); padding: 12px 20px; min-height: 48px; border-radius: 12px; font-size: 16px; font-weight: 750; line-height: 1.5; cursor: pointer; }
button:hover { border-color: var(--action); }
button:active { background: var(--tint); }
button:disabled { cursor: default; opacity: 0.6; }
[hidden] { display: none !important; }
[data-skip] { position: absolute; top: 12px; left: 24px; z-index: 10; background: var(--ink); color: var(--canvas); padding: 12px 20px; transform: translateY(-200%); border-radius: 12px; }
[data-skip]:focus { transform: translateY(0); }

[data-shell] { max-width: 1440px; margin: auto; padding: 16px 32px; min-height: 108px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; border-bottom: 1px solid var(--line); }
[data-shell] nav { display: flex; gap: 24px; }
[data-shell] nav:last-child { justify-content: flex-end; }
[data-shell] nav a { text-decoration: none; color: var(--muted); position: relative; font-weight: 550; }
[data-shell] nav a:hover, [data-shell] nav a[aria-current] { color: var(--ink); }
[data-shell] nav a[aria-current]::after { content: ""; height: 3px; border-radius: 4px; background: var(--action); position: absolute; bottom: 0; left: 0; right: 0; }
[data-identity] { gap: 12px; text-decoration: none; line-height: 1.3; font-weight: 700; letter-spacing: 0.06em; padding: 8px; }
[data-identity] > span:first-child { width: 40px; height: 40px; border: 2px solid var(--action); border-radius: 12px; display: grid; place-items: center; font-size: 32px; color: var(--action); }
[data-identity] strong { display: block; letter-spacing: 0.03em; }
[data-kicker], [data-label], [data-intro] > p:first-child { text-transform: uppercase; letter-spacing: 0.08em; font-size: 16px; line-height: 1.5; font-weight: 650; color: var(--muted); }
[data-date] { padding-left: 12px; border-left: 3px solid var(--action); margin-bottom: 28px; }
[data-date] p { color: var(--muted); font-size: 16px; line-height: 1.55; margin: 0; }
[data-action="primary"] { background: var(--action); color: #161616; border-radius: 12px; font-weight: 800; padding: 14px 20px; min-height: 52px; text-decoration: none; }
[data-action="primary"]:hover { background: #ff813b; color: var(--canvas); }
[data-action="primary"]:active { background: var(--pressed); color: #0c0c0c; }
[data-actions] { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }

#start { min-height: 620px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 44px; align-items: center; padding: 64px 0 48px; position: relative; }
#start h1 { font-size: 72px; line-height: 1.08; max-width: none; margin: 24px 0; letter-spacing: -0.055em; font-weight: 850; }
#start h1 span { display: block; color: var(--action); font-size: 48px; letter-spacing: -0.03em; margin-top: 20px; }
#start > div > p:not([data-kicker]) { font-size: 20px; max-width: 46ch; }
#pathway { margin: 0; min-height: 492px; border-radius: 20px; position: relative; overflow: hidden; padding: 28px; border: 1px solid rgba(255, 255, 255, 0.1); background: radial-gradient(ellipse at 80% 40%, #3a2110 0, transparent 65%), repeating-linear-gradient(0deg, transparent 0 39px, #ffffff06 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, #ffffff06 39px 40px), #191919; }
#pathway figcaption { position: relative; z-index: 1; background: #191919; color: var(--muted); font-size: 16px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 20px; }
#pathway svg { position: absolute; inset: 40px 0 0; width: 100%; height: calc(100% - 40px); fill: none; }
#pathway svg path:first-child { stroke: var(--action); stroke-width: 5; }
#pathway svg path:last-child { stroke: #ffffff0a; stroke-width: 1; }
#pathway ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; position: relative; z-index: 1; }
#pathway li { background: #111111; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 16px 20px; max-width: 92%; }
#pathway li:nth-child(2) { margin-left: auto; }
#pathway li > span { font-size: 16px; color: var(--muted); display: block; }
#pathway strong { display: block; font-size: 26px; font-weight: 800; letter-spacing: -0.025em; }
#pathway p { font-size: 16px; margin: 4px 0 0; line-height: 1.5; }
#state-rules { margin-top: 8px; padding-bottom: 64px; border-bottom: 1px solid var(--line); }
#state-rules > header { display: grid; grid-template-columns: 1fr auto; gap: 0 24px; align-items: end; margin-bottom: 24px; }
#state-rules > header > p { grid-column: 1 / -1; margin-bottom: 12px; }
#state-rules h2 { font-size: 40px; margin-bottom: 0; }
#state-rules [data-date] { margin: 0; }
[data-panels] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
[data-panels] article { background: var(--card); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 28px; }
[data-panels] [data-label] { color: var(--action); margin-bottom: 12px; }
[data-panels] p { font-size: 17px; margin-bottom: 12px; }
[data-panels] p:last-child { margin-bottom: 0; }
[data-editorial] { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(280px, 1fr); gap: 72px; margin-top: 64px; align-items: start; }
[data-editorial] > article { min-width: 0; }
[data-editorial] > article > section { margin-bottom: 48px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
[data-editorial] > article > section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
[data-editorial] > article > section > a:last-child { font-weight: 650; }
[data-intro] { padding: 64px 0 44px; border-bottom: 1px solid var(--line); }
[data-intro] > p:last-child { font-size: 20px; line-height: 1.65; margin: 0; max-width: 62ch; }
[data-note], #choose-path, #visit-notes { padding: 28px; background: var(--card); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; }
[data-note] h2, #choose-path h2, #visit-notes h2 { font-size: 28px; }
[data-note] p, #visit-notes p { font-size: 17px; }
[data-note] { border-top: 3px solid var(--action); }
#choose-path > a { position: relative; width: 100%; display: block; padding: 20px 24px 20px 0; text-decoration: none; border-top: 1px solid var(--line); }
#choose-path a strong { font-size: 20px; display: block; margin-bottom: 8px; }
#choose-path a span { font-size: 16px; color: var(--muted); display: block; }
#choose-path a b { position: absolute; right: 0; top: 16px; font-size: 24px; font-weight: 500; }
[data-next] { margin-top: 64px; padding: 32px; background: var(--tint); border: 1px solid #6d3618; border-radius: 20px; display: grid; grid-template-columns: 1fr auto; gap: 0 36px; align-items: center; }
[data-next] > p:first-child { font-size: 16px; text-transform: uppercase; letter-spacing: 0.06em; color: #ffc6a7; grid-column: 1; margin-bottom: 12px; }
[data-next] > h2 { grid-column: 1; margin: 0 0 12px; }
[data-next] > p { grid-column: 1; margin-bottom: 0; }
[data-next] > a { grid-column: 2; grid-row: 1 / 4; max-width: 24ch; background: var(--action); color: var(--canvas); font-weight: 800; text-decoration: none; padding: 12px 20px; border-radius: 12px; min-height: 52px; }
[data-next] > a:hover { background: #ff813b; }
[data-next] > a:active { background: var(--pressed); color: #0c0c0c; }

[data-steps] { list-style: none; padding: 0; margin: 28px 0 0; }
[data-steps] > li { margin-bottom: 32px; border-left: 2px solid var(--line); padding: 0 0 0 24px; position: relative; }
[data-steps] > li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--action); position: absolute; left: -7px; top: 10px; }
table { border-collapse: collapse; width: 100%; margin: 24px 0; table-layout: fixed; }
caption { text-align: left; margin: 0 0 12px; color: var(--muted); font-size: 16px; }
th, td { text-align: left; vertical-align: top; padding: 16px 12px; border-bottom: 1px solid #454545; font-size: 16px; overflow-wrap: break-word; }
thead { background: var(--surface); }
tbody th { font-weight: 550; }
th:first-child { width: 44%; }

fieldset { border: none; margin: 24px 0; padding: 0; min-width: 0; }
legend { font-size: 16px; margin-bottom: 16px; color: var(--muted); }
label { cursor: pointer; display: flex; align-items: flex-start; gap: 16px; background: var(--card); padding: 20px; border: 1px solid #454545; border-radius: 12px; margin-bottom: 12px; min-height: 64px; }
label:hover { border-color: var(--effort); }
label:has(input:checked) { border-color: var(--complete); background: #19261a; }
input[type="checkbox"] { flex: 0 0 44px; width: 44px; height: 44px; margin: 2px 0 0; accent-color: var(--complete); cursor: pointer; }
[data-tools] { display: flex; gap: 12px; flex-wrap: wrap; }
#visit-notes { position: sticky; top: 24px; border-top: 3px solid var(--effort); }
#visit-notes ul { padding-left: 24px; margin-bottom: 24px; }
#visit-notes li { margin-bottom: 16px; font-size: 16px; }
#visit-notes button { width: 100%; }
#copy-notes { background: var(--action); border-color: var(--action); color: var(--canvas); }
#copy-notes:active { background: var(--pressed); border-color: var(--pressed); color: #0c0c0c; }
progress { width: 100%; height: 12px; appearance: none; border: none; border-radius: 8px; overflow: hidden; margin-bottom: 16px; }
progress::-webkit-progress-bar { background: var(--surface); }
progress::-webkit-progress-value { background: var(--effort); }
progress::-moz-progress-bar { background: var(--effort); }
#selection-status { color: var(--muted); }
#copy-status { margin: 16px 0 0; }
#copy-status:empty { display: none; }
#copy-status[data-state="success"] { color: var(--complete); }
#copy-status[data-state="error"] { color: #ff9c99; border-left: 3px solid var(--error); padding-left: 12px; }

#cost-parts { margin: 32px 0 0; padding: 24px; background: var(--card); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; }
#cost-parts figcaption { font-size: 16px; color: var(--muted); margin-bottom: 16px; }
#cost-parts ul { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 0; margin: 0; }
#cost-parts li { background: var(--surface); border-radius: 12px; padding: 16px; font-size: 24px; font-weight: 750; position: relative; }
#cost-parts li + li::before { content: "+"; color: var(--action); position: absolute; left: -14px; top: 19px; background: var(--card); width: 16px; text-align: center; font-size: 18px; }
[data-price] { padding: 20px 24px; background: var(--tint); border-left: 4px solid var(--action); border-radius: 0 12px 12px 0; margin-bottom: 24px; }
[data-price] p { font-size: 18px; line-height: 1.5; margin: 0; }
[data-metric] { display: block; font-size: 46px; font-weight: 850; line-height: 1.3; font-variant-numeric: tabular-nums; letter-spacing: -0.035em; color: var(--action); margin: 8px 0; }
[data-caution] { background: #282414; border: 1px solid #796729 !important; border-radius: 16px; padding: 28px !important; }
[data-caution] h2, [data-caution] [data-kicker] { color: var(--warning); }
[data-caution] [data-date] { border-color: var(--warning); }

[data-reading] { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(260px, 1fr); gap: 72px; padding-top: 56px; align-items: start; }
[data-reading] article > section { margin-bottom: 56px; scroll-margin-top: 24px; }
[data-records] { list-style: none; padding: 0; margin: 28px 0 0; border-top: 1px solid var(--line); }
[data-records] li { padding: 16px 0; border-bottom: 1px solid var(--line); }
[data-records] li > a { display: flex; justify-content: space-between; font-size: 19px; font-weight: 650; text-decoration: none; gap: 24px; }
[data-records] li p { font-size: 17px; color: var(--muted); margin: 4px 36px 4px 0; }
[data-reading] > nav { position: sticky; top: 24px; padding: 24px; background: var(--card); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; }
[data-reading] > nav p { color: var(--muted); font-size: 16px; margin-bottom: 12px; }
[data-reading] > nav a { display: flex; min-height: 48px; border-top: 1px solid var(--line); text-decoration: none; padding: 12px 0; }
#missing-path { margin-top: 48px; max-width: 72ch; min-height: 320px; }
footer { max-width: 1392px; border-top: 1px solid var(--line); margin: 0 auto; padding: 40px 32px 48px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 72px; }
footer p { font-size: 16px; color: var(--muted); }
footer > div > p:first-child { color: var(--ink); font-size: 16px; letter-spacing: 0.03em; font-weight: 750; }
footer nav { display: grid; justify-items: start; align-content: start; }
footer a { min-height: 48px; font-size: 16px; padding: 12px 0; }

@media (max-width: 1100px) {
  [data-shell] { gap: 12px; padding: 16px 24px; }
  [data-shell] nav { gap: 16px; }
  [data-identity] { letter-spacing: 0; font-size: 16px; }
  [data-identity] > span:first-child { display: none; }
  #start { gap: 24px; }
  #start h1 { font-size: 62px; }
  #start h1 span { font-size: 40px; }
  [data-editorial], [data-reading] { gap: 36px; }
  [data-panels] article { padding: 24px; }
  #state-rules > header { display: block; }
  #state-rules [data-date] { margin-top: 20px; }
}

@media (max-width: 820px) {
  [data-shell] { grid-template-columns: 1fr 1fr; padding: 12px 24px 16px; gap: 4px 20px; }
  [data-identity] { grid-row: 1; grid-column: 1 / -1; justify-self: center; }
  [data-identity] > span:first-child { display: grid; }
  [data-shell] nav { grid-row: 2; justify-content: space-evenly; gap: 12px; }
  [data-shell] nav:last-child { justify-content: space-evenly; }
  #start { grid-template-columns: 1fr; padding-top: 44px; gap: 40px; }
  #start h1 { max-width: 12ch; font-size: 72px; }
  #pathway { min-height: 470px; }
  #pathway ol { grid-template-columns: 1fr 1fr 1fr; gap: 12px; align-items: start; margin-top: 88px; }
  #pathway li { max-width: none; padding: 16px; }
  #pathway li:nth-child(2) { margin-top: 36px; }
  #pathway li:nth-child(3) { margin-top: 72px; }
  #pathway strong { font-size: 23px; }
  #pathway svg { transform: rotate(-12deg); }
  [data-panels] { grid-template-columns: 1fr; }
  [data-editorial], [data-reading] { grid-template-columns: 1fr; gap: 36px; margin-top: 44px; }
  [data-note], #visit-notes { position: static; }
  [data-note] { max-width: 68ch; }
  [data-reading] { margin-top: 0; }
  [data-reading] > nav { position: static; grid-row: 1; }
  [data-reading] > nav a { display: inline-flex; margin-right: 24px; border: none; }
  [data-next] { display: block; padding: 28px; }
  [data-next] > a { margin-top: 24px; max-width: 100%; }
  footer { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 520px) {
  :root { font-size: 17px; }
  main { padding: 0 20px 56px; }
  p, li, td, th, label, legend, figcaption, caption { font-size: 17px; }
  [data-shell] { display: grid; grid-template-columns: 1fr; gap: 0; padding: 12px 20px 16px; }
  [data-identity] { grid-column: 1; grid-row: 1; justify-self: start; margin-bottom: 8px; padding-left: 0; }
  [data-shell] nav, [data-shell] nav:last-child { grid-column: 1; grid-row: 2; justify-content: space-between; gap: 12px; }
  [data-shell] nav:last-child { grid-row: 3; }
  [data-shell] nav a { width: 31%; min-height: 48px; justify-content: center; font-size: 16px; }
  #start { padding: 40px 0 40px; gap: 32px; }
  #start h1 { font-size: 50px; letter-spacing: -0.055em; line-height: 1.08; }
  #start h1 span { font-size: 30px; letter-spacing: -0.03em; margin-top: 20px; }
  #start > div > p:not([data-kicker]) { font-size: 18px; }
  [data-actions] { display: grid; grid-template-columns: 1fr; gap: 12px; }
  [data-actions] a { width: fit-content; max-width: 100%; }
  [data-actions] [data-action="primary"] { width: 100%; justify-content: space-between; }
  #pathway { min-height: 488px; padding: 24px 20px; }
  #pathway ol { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  #pathway li { max-width: 92%; }
  #pathway li:nth-child(2) { margin: 0 0 0 auto; }
  #pathway li:nth-child(3) { margin: 0; }
  #pathway strong { font-size: 24px; }
  #pathway svg { transform: none; }
  #state-rules { padding-bottom: 40px; }
  #state-rules h2 { font-size: 32px; }
  [data-panels] article { padding: 24px; }
  h1 { font-size: 44px; max-width: 14ch; letter-spacing: -0.045em; }
  h2 { font-size: 28px; margin-bottom: 20px; }
  h3 { font-size: 23px; }
  [data-intro] { padding: 36px 0 32px; }
  [data-intro] > p:last-child { font-size: 18px; }
  [data-editorial] { gap: 32px; }
  [data-editorial] > article > section { margin-bottom: 36px; padding-bottom: 24px; }
  [data-note], #choose-path, #visit-notes { padding: 24px; }
  [data-next] { margin-top: 40px; padding: 24px; }
  [data-next] h2 { font-size: 27px; }
  [data-next] > a { width: 100%; justify-content: space-between; font-size: 16px; }
  [data-steps] > li { padding-left: 16px; }
  th, td { padding: 12px 8px; font-size: 16px; }
  label { padding: 16px; gap: 12px; }
  #question-kit [data-tools] { display: grid; }
  #cost-parts { padding: 20px; }
  #cost-parts ul { grid-template-columns: 1fr 1fr; }
  #cost-parts li { font-size: 20px; padding: 12px; }
  #cost-parts li + li::before { content: none; }
  [data-price] { padding: 20px; }
  [data-price] p { font-size: 17px; }
  [data-metric] { font-size: 38px; }
  [data-caution] { padding: 24px !important; }
  [data-reading] { padding-top: 32px; gap: 40px; }
  [data-records] li > a { font-size: 18px; gap: 12px; }
  [data-records] li p { margin-right: 0; font-size: 17px; }
  [data-reading] article > section { margin-bottom: 40px; }
  footer { padding: 32px 20px 40px; }
  footer a { min-height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

@media print {
  :root { color-scheme: light; }
  body { background: white; color: black; }
  [data-shell], footer, [data-next], [data-tools], [data-note], [data-skip] { display: none !important; }
  main { max-width: none; padding: 0; }
  p, li { color: black; }
  [data-intro] > p:first-child { color: #333333; }
  label { background: white; color: black; border-color: #aaaaaa; }
  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
  [data-editorial] { display: block; margin: 24px 0 0; }
  [data-page="questions"] [data-editorial] > article { display: none; }
  [data-page="questions"] [data-editorial]:has(#visit-notes[hidden]) > article { display: block; }
  #visit-notes { border: none; padding: 0; background: white; position: static; }
  #visit-notes > [data-kicker], #selection-status, #copy-status, progress { display: none; }
  #visit-notes li { font-size: 18px; break-inside: avoid; }
  [data-date] { border-color: black; }
}