:root {
  color-scheme: light;
  --bg: #f3f7f5;
  --panel: #ffffff;
  --soft: #f7faf8;
  --ink: #12384a;
  --muted: #5b7078;
  --line: #d8e5e1;
  --green: #2f8580;
  --green-dark: #215f5a;
  --amber: #9a641d;
  --red: #9f5143;
  --blue: #267aa6;
  --blue-dark: #174f74;
  --sky: #eaf4f5;
  --shadow: 0 20px 54px rgba(26, 67, 70, 0.09);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 12% 0, rgba(0, 109, 204, 0.12), transparent 34rem),
    linear-gradient(180deg, #ffffff 0%, var(--bg) 44%, #eaf3fb 100%);
  color: var(--ink);
}

.mobile-scroll-lane,
.mobile-scroll-help {
  display: none;
}

button, input, select { font: inherit; }

button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #eef6ff;
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
  padding: 0.72rem 1rem;
}

button:hover { border-color: var(--green); }

.app-shell {
  width: min(1200px, calc(100% - 24px));
  margin: 0 auto;
  padding: 18px 0 34px;
}

.site-topbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 8px 0 22px;
}

.brand {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  color: var(--ink);
  font-weight: 950;
  text-decoration: none;
}

.brand-mark {
  width: 52px;
  height: auto;
  color: var(--blue);
}

.brand span {
  font-size: 1.15rem;
}

.utility-nav {
  display: flex;
  gap: 10px;
  align-items: center;
}

.utility-nav button {
  border-color: transparent;
  background: transparent;
  border-radius: 8px;
}

.utility-nav .signin {
  background: var(--blue-dark);
  color: white;
  border-color: var(--blue-dark);
  border-radius: 8px;
  padding-inline: 1.25rem;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 500px;
  gap: 34px;
  align-items: center;
  padding: 28px 10px 24px;
}

.hero-copy {
  min-width: 0;
}

.eyebrow {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.alpha-eyebrow {
  color: var(--blue-dark);
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  max-width: 920px;
  margin-bottom: 8px;
  font-size: clamp(3.2rem, 8vw, 5rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

h2 {
  margin-bottom: 8px;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  letter-spacing: -0.02em;
}

.lede {
  max-width: 760px;
  margin-bottom: 0;
  color: #233f62;
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.5;
}

.tagline {
  max-width: 760px;
  margin-bottom: 14px;
  color: var(--ink);
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  line-height: 1.18;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 28px;
}

.primary-action {
  display: inline-flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  min-height: 64px;
  padding: 0 1.5rem;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: white;
  font-size: 1.25rem;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(0, 79, 158, 0.22);
}

.legal-link-button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0.7rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #eef6ff;
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}

.legal-link-button:hover {
  border-color: var(--green);
}

.hero-card {
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(238, 246, 255, 0.85);
  box-shadow: var(--shadow);
}

.feature-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin-top: 18px;
}

.feature-icon {
  display: grid;
  width: 78px;
  height: 78px;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--blue-dark);
  font-size: 1.35rem;
  font-weight: 950;
}

.feature-row strong {
  display: block;
  margin-bottom: 5px;
  font-size: 1.08rem;
}

.feature-row p {
  margin-bottom: 0;
  color: #24435f;
  line-height: 1.36;
}

.section-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
}

.section-tabs a {
  position: relative;
  padding: 1rem 0.8rem;
  color: #263d5b;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.section-tabs .active {
  color: var(--ink);
  font-weight: 900;
}

.section-tabs .active::after {
  position: absolute;
  right: 20%;
  bottom: 0;
  left: 20%;
  height: 5px;
  border-radius: 999px 999px 0 0;
  background: var(--blue);
  content: "";
}

.notice, .panel, .answer-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.notice {
  display: flex;
  gap: 12px;
  align-items: start;
  margin: 24px 0 14px;
  padding: 14px 16px;
  color: #233f62;
}

.notice strong {
  color: var(--red);
  white-space: nowrap;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(340px, 0.92fr) minmax(0, 1.08fr);
  gap: 14px;
  align-items: start;
}

.panel, .answer-card {
  padding: 18px;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  margin-bottom: 12px;
}

.panel-head .eyebrow { margin-bottom: 5px; }

.progress-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.progress-list li {
  padding: 8px 6px;
  border-radius: 999px;
  background: #eef3ec;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
  text-align: center;
}

.progress-list .done {
  background: #e8f4ff;
  color: var(--blue-dark);
}

.progress-list .active {
  background: var(--blue);
  color: white;
}

.entry-safety {
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid #b9d7f0;
  border-left: 5px solid var(--blue);
  border-radius: 8px;
  background: #f3f9ff;
  color: #233f62;
  line-height: 1.45;
}

.entry-safety > strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
}

.entry-safety p {
  margin-bottom: 7px;
}

.entry-safety p:last-child {
  margin-bottom: 0;
}

fieldset {
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

legend {
  padding: 0 6px;
  font-weight: 900;
}

.field-grid, .benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

label {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: #19395c;
  font-weight: 800;
}

label span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

small {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
}

input[type="range"] {
  width: 100%;
  min-height: 34px;
  accent-color: var(--blue);
}

input[type="range"]:disabled {
  opacity: 0.35;
}

input:not([type="range"]), select {
  width: 100%;
  min-height: 44px;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  color: var(--ink);
  font-weight: 800;
}

input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--blue);
}

output {
  color: var(--blue-dark);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.benefit-toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.benefit-toggle span {
  display: block;
}

.results-stack {
  display: grid;
  gap: 14px;
}

.answer-card {
  border-color: rgba(0, 109, 204, 0.22);
  background: linear-gradient(135deg, #ffffff, #eaf5ff);
}

.answer-card.warn {
  border-color: rgba(180, 83, 9, 0.35);
  background: linear-gradient(135deg, #ffffff, #fff7ed);
}

.answer-card.bad {
  border-color: rgba(180, 35, 24, 0.35);
  background: linear-gradient(135deg, #ffffff, #fff1f1);
}

.answer-card h2 {
  font-size: clamp(1.65rem, 3vw, 2.65rem);
  line-height: 1.02;
}

.answer-card p, .panel p {
  color: var(--muted);
  line-height: 1.45;
}

.mobility-summary {
  overflow: hidden;
}

.result-states {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 12px;
}

.result-state {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.035em;
}

.state-good {
  border-color: #a8ddbd;
  background: #e7f8ef;
  color: var(--green-dark);
}

.state-warning {
  border-color: #ecc985;
  background: #fff6dd;
  color: #87400a;
}

.state-info {
  border-color: #b9d7f0;
  background: #eef7ff;
  color: var(--blue-dark);
}

.state-neutral {
  border-color: #d6dee7;
  background: #f4f7fa;
  color: #4b5f76;
}

.current-position {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 22px;
  align-items: center;
  margin: 20px 0 0;
  padding: clamp(16px, 3vw, 24px);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--ink), #0757a4);
  color: white;
}

.position-label {
  display: block;
  margin-bottom: 4px;
  color: #bfe2ff;
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.current-position > div > strong {
  display: block;
  font-size: clamp(1.2rem, 3vw, 1.7rem);
}

.current-resource {
  text-align: right;
}

.current-resource strong {
  font-size: clamp(2rem, 5vw, 3.2rem) !important;
  line-height: 1;
}

.current-resource span {
  display: block;
  margin-top: 5px;
  color: #d8edff;
  font-size: 0.82rem;
  font-weight: 750;
}

.current-position #currentBasis {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  color: #d8edff;
  font-size: 0.86rem;
}

.decision-summary {
  margin: 18px 0 0;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.change-direction {
  margin: 0 0 12px;
  color: var(--ink) !important;
  font-size: 1.05rem;
  font-weight: 850;
}

.decision-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.decision-metrics > div {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.84);
}

.decision-metrics span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.decision-metrics > div > strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  letter-spacing: -0.025em;
}

.mobility-scenarios {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.scenario-step {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
}

.scenario-step.is-current {
  border-left: 5px solid var(--ink);
}

.scenario-step.is-proposed {
  border-left: 5px solid var(--blue);
}

.scenario-step > summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  min-height: 64px;
  padding: 11px 13px;
  cursor: pointer;
  list-style: none;
}

.scenario-step > summary::-webkit-details-marker,
.disclosure-layer > summary::-webkit-details-marker,
.inline-disclosure > summary::-webkit-details-marker {
  display: none;
}

.scenario-step > summary::after {
  color: var(--blue-dark);
  content: "+";
  font-size: 1.25rem;
  font-weight: 900;
}

.scenario-step[open] > summary::after {
  content: "−";
}

.scenario-hours {
  display: grid;
  gap: 3px;
}

.scenario-hours em {
  color: var(--muted);
  font-size: 0.67rem;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.06em;
}

.scenario-resource {
  display: grid;
  margin-left: auto;
  text-align: right;
}

.scenario-resource strong {
  font-size: 1.2rem;
}

.scenario-resource small {
  margin-top: 2px;
  color: #5d7278;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.035em;
}

.scenario-details {
  padding: 0 13px 13px;
}

.scenario-details dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.scenario-details dl > div,
.breakdown-list > div,
.trace-list > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.scenario-details dt,
.scenario-details dd {
  margin: 0;
  font-size: 0.85rem;
}

.scenario-details p {
  margin: 10px 0 0;
  font-size: 0.84rem;
}

.opportunity-summary,
.map-completeness,
.path-difference-note {
  margin-top: 16px;
  padding: 14px;
  border-radius: 10px;
}

.opportunity-summary {
  border: 1px solid #b9d7f0;
  background: #f3f9ff;
}

.opportunity-summary.has-gap,
.opportunity-summary.needs-info {
  border-color: #ecc985;
  background: #fff8e8;
}

.opportunity-summary strong {
  display: block;
  color: var(--ink);
}

.opportunity-summary p {
  margin: 6px 0 0;
}

.map-completeness {
  border: 1px solid var(--line);
  background: #f8fafc;
}

.map-completeness h3 {
  margin-bottom: 7px;
  font-size: 1rem;
}

.map-completeness ul {
  display: grid;
  gap: 6px;
  margin: 0 0 10px;
  padding-left: 1.15rem;
  color: #314b69;
  line-height: 1.4;
}

.text-action,
.benefit-card a {
  color: var(--blue-dark);
  font-weight: 850;
}

.path-difference-note {
  margin-bottom: 0;
  border-left: 4px solid var(--blue);
  background: #eef7ff;
  color: #294866 !important;
  font-size: 0.88rem;
}

.disclosure-layer {
  overflow: hidden;
  padding: 0;
}

.disclosure-layer > summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  min-height: 78px;
  padding: 17px 18px;
  cursor: pointer;
  list-style: none;
}

.disclosure-layer > summary strong {
  display: block;
  font-size: 1.08rem;
}

.disclosure-layer > summary .eyebrow {
  display: block;
  margin-bottom: 3px;
}

.summary-action {
  flex: 0 0 auto;
  color: var(--blue-dark);
  font-size: 0.82rem;
  font-weight: 900;
}

.summary-action::after {
  margin-left: 7px;
  content: "+";
}

.disclosure-layer[open] .summary-action::after {
  content: "−";
}

.disclosure-body {
  display: grid;
  gap: 14px;
  padding: 0 18px 18px;
  border-top: 1px solid var(--line);
}

.explanation-section,
.technical-section {
  min-width: 0;
  padding-top: 18px;
}

.explanation-section + .explanation-section,
.technical-section + .technical-section {
  border-top: 1px solid var(--line);
}

.breakdown-grid,
.benefit-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.breakdown-card,
.benefit-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f9fbfd;
}

.breakdown-kicker {
  margin-bottom: 2px;
  font-size: 0.73rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.breakdown-card h4,
.benefit-card h4 {
  margin: 0 0 11px;
  font-size: 1.05rem;
}

.breakdown-list {
  gap: 6px;
}

.breakdown-list dt,
.breakdown-list dd,
.trace-list dt,
.trace-list dd {
  margin: 0;
  font-size: 0.85rem;
}

.breakdown-total {
  margin-top: 5px;
  padding-top: 8px;
  border-top: 2px solid var(--line);
  color: var(--ink);
  font-weight: 900;
}

.snap-scenarios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.snap-scenario {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: white;
}

.snap-scenario span,
.snap-scenario strong {
  display: block;
}

.snap-scenario span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.snap-scenario strong {
  margin-top: 4px;
}

.inline-disclosure {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: white;
}

.inline-disclosure > summary {
  padding: 12px;
  color: var(--blue-dark);
  cursor: pointer;
  font-weight: 900;
  list-style: none;
}

.inline-disclosure > summary::after {
  float: right;
  content: "+";
}

.inline-disclosure[open] > summary::after {
  content: "−";
}

.inline-disclosure-body {
  padding: 0 12px 12px;
}

.trace-list {
  gap: 7px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.trace-list dd {
  text-align: right;
}

.benefit-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 12px;
}

.benefit-card-head {
  display: grid;
  gap: 7px;
  justify-items: start;
}

.benefit-card p {
  margin: 9px 0;
  font-size: 0.88rem;
}

.benefit-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 9px 0 11px;
}

.benefit-steps span {
  padding: 5px 7px;
  border-radius: 6px;
  background: #edf3f8;
  color: #314b69;
  font-size: 0.76rem;
}

.technical-layer > summary {
  background: #f8fafc;
}

.technical-callout {
  margin-top: 12px;
  padding: 12px;
  border-left: 4px solid #778ba1;
  border-radius: 6px;
  background: #f5f7f9;
}

.technical-callout h4 {
  margin: 0 0 5px;
}

.technical-callout p {
  margin: 0;
}

.answer-metrics, .benefit-impact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}

.benefit-impact {
  margin-top: 10px;
}

.answer-metrics div, .benefit-impact div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
}

.benefit-impact div {
  background: rgba(255, 255, 255, 0.55);
}

.answer-metrics span, .benefit-impact span {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.answer-metrics strong, .benefit-impact strong {
  display: block;
  margin-top: 6px;
  font-size: clamp(1.45rem, 3vw, 2.4rem);
  letter-spacing: -0.03em;
}

.benefit-impact strong {
  font-size: clamp(1.25rem, 2.4vw, 1.85rem);
}

.snap-note {
  margin: 12px 0 0;
  padding: 12px;
  border-radius: 8px;
  background: rgba(0, 109, 204, 0.08);
  color: #19395c;
  font-weight: 800;
}

.alpha-panel {
  border-color: rgba(0, 109, 204, 0.28);
}

.alpha-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0;
}

.alpha-metrics div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
}

.alpha-metrics span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.alpha-metrics strong {
  display: block;
  margin-top: 6px;
  overflow-wrap: anywhere;
  font-size: 1.05rem;
  line-height: 1.25;
}

.compact-table table {
  min-width: 520px;
}

.meter-title {
  margin: 16px 0 8px;
  font-size: 1rem;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 950;
  white-space: nowrap;
}

.status-good {
  background: #e7f8ef;
  color: var(--green-dark);
}

.status-no {
  background: #f6f7f9;
  color: #5f6f82;
}

.status-maybe {
  background: #fff6dd;
  color: var(--amber);
}

.alpha-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f1f6fb;
  font-size: 0.9rem;
  font-weight: 700;
}

.policy-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: #e8f4ff;
  color: var(--blue-dark);
  font-size: 0.82rem;
  font-weight: 900;
  white-space: nowrap;
}

#resourceChart {
  display: block;
  width: 100%;
  min-height: 260px;
}

.grid-line { stroke: #e6ece3; stroke-width: 1; }
.baseline { stroke: #9aa89f; stroke-width: 2; stroke-dasharray: 7 7; }
.resource-path { fill: none; stroke: var(--blue); stroke-width: 5; }
.resource-path.current-path { stroke: #718298; stroke-width: 3; stroke-dasharray: 9 7; }
.tick { fill: var(--muted); font-size: 13px; }
.dot { fill: white; stroke: var(--blue); stroke-width: 3; }
.current-dot { fill: var(--ink); stroke: white; stroke-width: 3; }
.test-dot { fill: var(--blue); stroke: white; stroke-width: 3; }
.bad-dot { fill: var(--red); stroke: white; stroke-width: 3; }
.jump-dot { fill: var(--green); stroke: white; stroke-width: 3; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--muted);
}

.legend span {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.line {
  display: inline-block;
  width: 24px;
  height: 5px;
  border-radius: 999px;
}

.line.resources { background: var(--blue); }
.line.current-resources {
  height: 3px;
  background: repeating-linear-gradient(90deg, #718298 0 8px, transparent 8px 13px);
}

.baseline-key {
  display: inline-block;
  width: 24px;
  border-top: 2px dashed #9aa89f;
}

.legend .bad-dot, .legend .jump-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 999px;
}

.legend .bad-dot { background: var(--red); }
.legend .jump-dot { background: var(--green); }

.bridge-builder ul {
  display: grid;
  gap: 9px;
  margin: 12px 0 0;
  padding-left: 1.2rem;
  color: #19395c;
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 14px;
  margin-top: 14px;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
}

table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
}

th, td {
  padding: 0.78rem 0.65rem;
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
}

th:first-child, td:first-child { text-align: left; }
th {
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
}

dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

dt {
  color: var(--ink);
  font-weight: 900;
}

dd {
  margin: 0 0 8px;
  color: var(--muted);
  line-height: 1.42;
}

footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  padding: 14px 0;
  color: var(--muted);
}

footer strong {
  color: var(--ink);
}

footer > div {
  display: grid;
  gap: 4px;
}

.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.legal-links a {
  color: var(--blue-dark);
  font-weight: 750;
}

.legal-links button {
  padding: 0.55rem 0.8rem;
  font-size: 0.86rem;
}

.result-disclaimer {
  margin: 14px 0 0;
  padding: 12px;
  border: 1px solid #f0d8aa;
  border-radius: 8px;
  background: #fff9ed;
  color: #5b481f;
  font-size: 0.88rem;
  line-height: 1.45;
}

dialog {
  width: min(620px, calc(100% - 24px));
  border: 0;
  border-radius: 14px;
  padding: 0;
  box-shadow: var(--shadow);
}

dialog::backdrop {
  background: rgba(8, 38, 77, 0.38);
}

.dialog-card {
  padding: 20px;
}

.agreement-dialog {
  width: min(720px, calc(100% - 24px));
  max-height: calc(100vh - 32px);
  overflow: auto;
}

.agreement-dialog .dialog-card {
  padding: clamp(20px, 4vw, 32px);
}

.agreement-dialog p {
  color: #314b69;
  line-height: 1.5;
}

.agreement-warning {
  margin: 16px 0;
  padding: 14px;
  border: 1px solid #b9d7f0;
  border-left: 5px solid var(--blue);
  border-radius: 8px;
  background: #f3f9ff;
}

.agreement-warning > strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
}

.agreement-warning p:last-child {
  margin-bottom: 0;
}

.agreement-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0;
}

.agreement-links a {
  color: var(--blue-dark);
  font-weight: 800;
}

.agreement-check {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-top: 12px;
  padding: 14px;
  background: #fff;
}

.agreement-check input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--blue);
}

.agreement-check span {
  display: block;
  line-height: 1.42;
}

.agreement-optional {
  border-style: dashed;
  background: #f9fbfd;
}

.agreement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 18px;
}

.agreement-actions button {
  border-color: var(--blue-dark);
  background: var(--blue-dark);
  color: white;
}

.agreement-actions button:disabled {
  border-color: var(--line);
  background: #dbe4ec;
  color: #66788c;
  cursor: not-allowed;
}

.agreement-actions a {
  color: var(--blue-dark);
  font-weight: 800;
}

.legal-page .app-shell {
  width: min(900px, calc(100% - 24px));
}

.legal-page .site-topbar {
  border-bottom: 1px solid var(--line);
}

.legal-main {
  padding: 28px 0 10px;
}

.legal-hero {
  margin-bottom: 18px;
}

.legal-hero h1 {
  max-width: 820px;
  font-size: clamp(2.3rem, 7vw, 4rem);
}

.legal-meta {
  color: var(--muted);
  font-size: 0.9rem;
}

.legal-card {
  margin-bottom: 14px;
  padding: clamp(18px, 4vw, 30px);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
}

.legal-card h2 {
  margin-top: 1.6rem;
  font-size: 1.35rem;
}

.legal-card h2:first-child {
  margin-top: 0;
}

.legal-card h3 {
  margin: 1.2rem 0 0.45rem;
}

.legal-card p,
.legal-card li {
  color: #2b4564;
  line-height: 1.6;
}

.legal-card li + li {
  margin-top: 0.35rem;
}

.legal-callout,
.attorney-review {
  margin: 16px 0;
  padding: 14px 16px;
  border-radius: 8px;
}

.legal-callout {
  border: 1px solid #b9d7f0;
  background: #f3f9ff;
}

.attorney-review {
  border: 1px solid #e8bd78;
  background: #fff8e8;
  color: #5b481f;
}

.attorney-review strong {
  color: #713f12;
}

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.legal-nav a {
  color: var(--blue-dark);
  font-weight: 800;
}

.legal-page footer {
  border-top: 1px solid var(--line);
}

.legal-page code {
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
  background: #eef3f8;
  color: #15395e;
}

button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(0, 109, 204, 0.24);
  outline-offset: 2px;
}

@media (max-width: 960px) {
  .hero, .workspace, .detail-grid {
    grid-template-columns: 1fr;
  }

  .hero-card {
    max-width: 680px;
  }

  .notice, footer {
    align-items: stretch;
    flex-direction: column;
  }

  .legal-links {
    justify-content: flex-start;
  }

  .notice strong { white-space: normal; }
}

@media (max-width: 620px) {
  .app-shell {
    width: min(100% - 18px, 560px);
    padding-top: 10px;
  }

  h1 {
    font-size: clamp(2.25rem, 12vw, 3.8rem);
  }

  .site-topbar {
    align-items: stretch;
    flex-direction: column;
    padding-bottom: 12px;
  }

  .utility-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .hero {
    padding: 16px 0;
  }

  .tagline {
    font-size: 1.35rem;
  }

  .primary-action {
    width: 100%;
    min-width: 0;
  }

  .feature-row {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .feature-icon {
    width: 56px;
    height: 56px;
  }

  .section-tabs {
    display: flex;
    overflow-x: auto;
  }

  .section-tabs a {
    flex: 0 0 auto;
    min-width: 145px;
  }

  .panel, .answer-card {
    padding: 14px;
  }

  .field-grid, .benefit-grid, .answer-metrics, .benefit-impact, .alpha-metrics,
  .decision-metrics, .breakdown-grid, .benefit-cards {
    grid-template-columns: 1fr;
  }

  .current-position {
    grid-template-columns: 1fr;
  }

  .current-resource {
    text-align: left;
  }

  .scenario-step > summary {
    gap: 8px;
    padding-inline: 10px;
  }

  .scenario-details dl {
    grid-template-columns: 1fr;
  }

  .disclosure-layer > summary {
    align-items: flex-start;
    padding: 14px;
  }

  .summary-action {
    max-width: 78px;
    text-align: right;
  }

  .disclosure-body {
    padding: 0 14px 14px;
  }

  .snap-scenarios {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #resourceChart {
    min-height: 210px;
  }

  .progress-list {
    grid-template-columns: 1fr;
  }

  label span {
    align-items: start;
    flex-direction: column;
  }

  output {
    font-size: 1.25rem;
  }

  .panel-head {
    flex-direction: column;
  }
}

/* Benefit Bridge Alpha visual system — presentation only */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 18px;
}

body {
  background:
    radial-gradient(circle at 8% -8%, rgba(57, 139, 133, 0.13), transparent 30rem),
    radial-gradient(circle at 96% 8%, rgba(64, 132, 173, 0.1), transparent 26rem),
    linear-gradient(180deg, #fbfdfc 0%, var(--bg) 48%, #edf4f2 100%);
  -webkit-font-smoothing: antialiased;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.app-shell {
  width: min(1220px, calc(100% - 32px));
  padding-top: 0;
}

.site-topbar {
  min-height: 76px;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(24, 79, 80, 0.1);
}

.brand {
  gap: 11px;
}

.brand-mark {
  width: 44px;
  color: var(--green-dark);
  overflow: visible;
}

.brand-mark .brand-bridge,
.brand-mark .brand-road {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-mark .brand-bridge { stroke-width: 4.5; }
.brand-mark .brand-road { stroke-width: 3; }
.brand-mark circle { fill: #db9b3d; }

.brand-copy {
  display: grid;
  gap: 1px;
}

.brand-copy strong {
  font-size: 1.08rem;
  letter-spacing: -0.025em;
}

.brand-copy small {
  color: var(--muted);
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.015em;
}

.alpha-badge {
  align-self: flex-start;
  margin-top: 2px;
  padding: 4px 7px;
  border: 1px solid #cbded9;
  border-radius: 999px;
  background: #eff7f4;
  color: var(--green-dark);
  font-size: 0.61rem !important;
  font-weight: 900;
  letter-spacing: 0.09em;
}

.utility-nav {
  gap: 4px;
}

.utility-nav a {
  min-height: 44px;
  padding: 12px 13px;
  border-radius: 999px;
  color: #395967;
  font-size: 0.86rem;
  font-weight: 750;
  text-decoration: none;
}

.utility-nav a:hover {
  background: #edf5f3;
  color: var(--ink);
}

.hero {
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.72fr);
  gap: clamp(30px, 6vw, 82px);
  min-height: 430px;
  padding: clamp(52px, 8vw, 94px) clamp(6px, 2vw, 24px) clamp(46px, 7vw, 76px);
}

.hero h1 {
  max-width: 760px;
  margin-bottom: 20px;
  color: #12394a;
  font-size: clamp(2.9rem, 6vw, 5.1rem);
  line-height: 0.98;
  letter-spacing: -0.058em;
}

.hero .lede {
  max-width: 690px;
  color: #45626c;
  font-size: clamp(1.08rem, 2vw, 1.3rem);
  line-height: 1.55;
}

.alpha-eyebrow {
  color: var(--green-dark);
}

.hero-actions {
  margin-top: 30px;
}

.primary-action,
.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 54px;
  padding: 0 1.35rem;
  border: 1px solid var(--green-dark);
  border-radius: 12px;
  background: linear-gradient(135deg, #2f837d, #215e59);
  color: #fff;
  font-weight: 850;
  text-decoration: none;
  box-shadow: 0 12px 24px rgba(33, 95, 90, 0.18);
}

.primary-action {
  min-width: 220px;
  min-height: 58px;
  font-size: 1.05rem;
}

.primary-action:hover,
.primary-button:hover {
  border-color: #194b47;
  background: linear-gradient(135deg, #28766f, #194e4a);
}

.secondary-action,
.secondary-button,
.tertiary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 1rem;
  border: 1px solid #cbdcd8;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--green-dark);
  font-weight: 800;
  text-decoration: none;
  box-shadow: none;
}

.tertiary-button {
  min-height: 40px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-size: 0.82rem;
}

.hero-path-card {
  position: relative;
  padding: 28px;
  border: 1px solid rgba(37, 105, 101, 0.16);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 24px 60px rgba(35, 76, 76, 0.1);
  backdrop-filter: blur(12px);
}

.hero-path {
  display: grid;
  gap: 0;
  margin: 12px 0 18px;
  padding: 0;
  list-style: none;
}

.hero-path li {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 13px;
  min-height: 76px;
  align-items: start;
}

.hero-path li:not(:last-child)::after {
  position: absolute;
  top: 34px;
  bottom: -2px;
  left: 18px;
  width: 2px;
  background: linear-gradient(#8ebeb8, #d9e7e3);
  content: "";
}

.path-symbol {
  position: relative;
  z-index: 1;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #c7ddd8;
  border-radius: 50%;
  background: #f8fbfa;
  color: var(--green-dark);
  font-size: 1.05rem;
  font-weight: 900;
}

.climb-symbol { color: #27769d; }
.bridge-symbol { color: #9a641d; }

.hero-path strong,
.hero-path small {
  display: block;
}

.hero-path strong {
  margin: 2px 0 5px;
  font-size: 1rem;
}

.hero-path small {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.4;
}

.hero-trust {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: #527078;
  font-size: 0.8rem;
  line-height: 1.45;
}

.hero-trust span {
  margin-right: 5px;
  color: var(--green-dark);
  font-weight: 900;
}

.notice {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  margin: 0 0 20px;
  padding: 13px 15px;
  border-color: #d9e3df;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: none;
}

.notice-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #e7f1f2;
  color: var(--blue-dark);
  font-size: 0.85rem;
  font-weight: 900;
}

.notice strong,
.notice span {
  display: block;
  white-space: normal;
}

.notice strong {
  margin-bottom: 2px;
  color: var(--ink);
  font-size: 0.86rem;
}

.notice div > span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.workspace {
  grid-template-columns: minmax(370px, 0.78fr) minmax(0, 1.22fr);
  gap: 20px;
}

.panel,
.answer-card {
  border-color: rgba(31, 88, 86, 0.14);
  border-radius: 20px;
  box-shadow: 0 16px 42px rgba(25, 65, 67, 0.075);
}

.interview {
  position: sticky;
  top: 12px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.94);
}

.calculator-topline {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.compact-alpha-notice {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.compact-alpha-notice strong { color: var(--ink); }
.compact-alpha-notice a { color: var(--blue-dark); font-weight: 800; }

.compact-alpha-icon {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  place-items: center;
  border-radius: 50%;
  background: #e7f1f2;
  color: var(--blue-dark);
  font-size: 0.72rem;
  font-weight: 900;
}

.calculator-topline .tertiary-button {
  min-height: 34px;
  flex: 0 0 auto;
  padding: 6px 8px;
  font-size: 0.7rem;
}

.panel-intro {
  margin: 0;
  font-size: 0.88rem;
}

.live-map-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 12px 0 16px;
  padding: 11px 12px;
  border: 1px solid #cfe2dc;
  border-radius: 13px;
  background: linear-gradient(135deg, #f3faf7, #f7fbfb);
  box-shadow: 0 7px 20px rgba(31, 86, 82, 0.055);
}

.live-indicator {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  color: var(--green-dark);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.live-indicator i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(47, 133, 128, 0.12);
}

.live-map-status strong,
.live-map-status small {
  display: block;
}

.live-map-status strong {
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.25;
}

.live-map-status small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.3;
}

.live-map-status > a {
  min-width: 106px;
  color: var(--blue-dark);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.2;
  text-align: right;
  text-decoration: none;
}

.live-map-status > a:hover,
.live-map-status > a:focus-visible {
  text-decoration: underline;
}

.live-map-status > a small {
  max-width: 150px;
  color: #587079;
  font-size: 0.62rem;
  font-weight: 700;
}

.entry-safety {
  margin: 0 0 12px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #dce7e4;
  border-left: 0;
  border-radius: 12px;
  background: #f7faf9;
  color: var(--muted);
}

.entry-safety > summary {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 50px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.entry-safety > summary::-webkit-details-marker { display: none; }
.entry-safety > summary > span { color: var(--green-dark); }
.entry-safety > summary strong { color: var(--ink); font-size: 0.79rem; }
.entry-safety > summary small { font-size: 0.69rem; }
.entry-safety > div { padding: 0 14px 12px 44px; }
.entry-safety p { font-size: 0.78rem; line-height: 1.45; }

.interview-steps {
  display: grid;
  gap: 10px;
}

.question-group {
  scroll-margin-top: 16px;
  overflow: hidden;
  border: 1px solid #dbe6e3;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(31, 86, 82, 0.045);
}

.question-group-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 68px;
  padding: 11px 12px;
  background: #fbfdfc;
}

.step-number {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #eaf2ef;
  color: #55736f;
  font-size: 0.69rem;
  font-weight: 900;
}

.question-group .step-number {
  background: var(--green-dark);
  color: #fff;
}

.step-title,
.step-title strong,
.step-title small {
  display: block;
}

.step-title strong {
  color: var(--ink);
  font-size: 0.91rem;
  line-height: 1.25;
}

.step-title small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.step-value {
  max-width: 118px;
  color: #587079;
  font-size: 0.69rem;
  font-weight: 750;
  line-height: 1.25;
  text-align: right;
}

.step-body {
  padding: 0 12px 14px;
}

.step-fields {
  margin: 0;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid #e6eeeb;
  border-radius: 0;
  background: transparent;
}

.interview .field-grid,
.interview .benefit-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}

.interview label {
  gap: 9px;
  padding: 13px;
  border-color: #dbe6e3;
  border-radius: 12px;
  background: #fbfdfc;
  color: var(--ink);
  font-size: 0.84rem;
}

.interview label:focus-within {
  border-color: #7eb2aa;
  box-shadow: 0 0 0 3px rgba(47, 133, 128, 0.1);
}

.interview output {
  color: var(--green-dark);
  font-size: 1rem;
}

.interview input[type="range"] {
  min-height: 38px;
  accent-color: var(--green-dark);
  touch-action: pan-y;
}

.interview input:not([type="range"]),
.interview select {
  border-color: #cfded9;
  background: #fff;
}

.benefit-toggle {
  min-height: 58px;
}

.benefit-toggle input {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  accent-color: var(--green-dark);
}

.benefit-toggle > span strong,
.benefit-toggle > span small {
  display: block;
}

.benefit-toggle > span small {
  margin-top: 2px;
  font-size: 0.7rem;
}

.conditional-field {
  margin: -2px 0 6px 30px;
  border-left: 3px solid #8abbb4 !important;
  background: #f6faf8 !important;
}

.results-stack { gap: 16px; }

.answer-card {
  scroll-margin-top: 16px;
  padding: clamp(20px, 3.5vw, 34px);
  border-color: rgba(42, 117, 112, 0.22);
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(240,248,246,.96));
}

.answer-card.warn,
.answer-card.bad {
  border-color: rgba(177, 119, 39, 0.32);
  background: linear-gradient(145deg, #fff, #fdf8ef);
}

.map-heading {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 12px;
}

.map-heading .eyebrow { margin-bottom: 3px; color: var(--green-dark); }
.map-heading > div > span { color: var(--muted); font-size: 0.76rem; font-weight: 700; }

.map-mark {
  position: relative;
  display: flex;
  gap: 13px;
  align-items: center;
  min-width: 74px;
}

.map-mark::before {
  position: absolute;
  right: 5px;
  left: 5px;
  height: 2px;
  background: #bdd6d1;
  content: "";
}

.map-mark i {
  position: relative;
  z-index: 1;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #6da8a1;
  box-shadow: 0 0 0 1px #6da8a1;
}

.map-mark i:nth-child(2) { transform: translateY(-7px); background: #267aa6; box-shadow: 0 0 0 1px #267aa6; }
.map-mark i:nth-child(3) { transform: translateY(-13px); background: #d19a46; box-shadow: 0 0 0 1px #d19a46; }

.answer-card h2 {
  max-width: 710px;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.result-state {
  min-height: 30px;
  padding: 0 11px;
  border-radius: 8px;
  font-size: 0.68rem;
  letter-spacing: 0.045em;
}

.state-good {
  border-color: #b4d8d1;
  background: #eaf6f2;
  color: var(--green-dark);
}

.state-warning {
  border-color: #e5c995;
  background: #fff7e8;
  color: #76501c;
}

.current-position {
  position: relative;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px 18px;
  margin-top: 24px;
  padding: clamp(20px, 3.5vw, 28px);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  background:
    radial-gradient(circle at 90% 8%, rgba(255,255,255,.12), transparent 13rem),
    linear-gradient(135deg, #163f4c, #226a67);
  box-shadow: 0 18px 34px rgba(25, 71, 72, 0.18);
}

.current-position-marker {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #f7d49a;
  font-size: 1.12rem;
}

.current-resource strong {
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.current-position #currentBasis { grid-column: 2 / -1; }

.decision-summary {
  position: relative;
  margin-top: 12px;
  padding: 24px 0 18px;
}

.decision-summary::before {
  position: absolute;
  top: 0;
  left: 22px;
  width: 2px;
  height: 20px;
  background: linear-gradient(#7daea8, transparent);
  content: "";
}

.section-title-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.section-title-row .eyebrow { margin: 0; }

.movement-symbol {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: #eaf5f2;
  color: var(--green-dark);
  font-weight: 900;
}

.change-direction {
  margin: 12px 0 14px;
  font-size: 1.08rem;
  line-height: 1.45;
}

.decision-metrics > div {
  padding: 15px;
  border-color: #d8e5e1;
  border-radius: 13px;
  background: rgba(255,255,255,.82);
}

.decision-metrics > div > strong {
  color: var(--green-dark);
  font-variant-numeric: tabular-nums;
}

.mobility-scenarios {
  position: relative;
  gap: 9px;
  padding-left: 4px;
}

.mobility-scenarios::before {
  position: absolute;
  top: 26px;
  bottom: 26px;
  left: 21px;
  width: 2px;
  background: #cbded9;
  content: "";
}

.scenario-step {
  position: relative;
  border-color: #d9e6e2;
  border-radius: 13px;
  background: rgba(255,255,255,.88);
}

.scenario-step.is-current,
.scenario-step.is-proposed,
.scenario-step.is-gap,
.scenario-step.is-recovery {
  border-left-width: 1px;
}

.scenario-step.is-current { border-color: #91bcb5; }
.scenario-step.is-proposed { border-color: #9dbfd2; }
.scenario-step.is-gap { border-color: #dfbd80; background: #fffaf0; }
.scenario-step.is-cliff { border-color: #d6a65d; background: #fff8ea; }
.scenario-step.is-recovery { border-color: #91bcb5; background: #f4faf8; }

.scenario-step > summary {
  grid-template-columns: 20px minmax(0, 1fr) auto;
  justify-content: initial;
  min-height: 68px;
  padding: 11px 14px 11px 10px;
}

.scenario-route-dot {
  position: relative;
  z-index: 1;
  display: block;
  width: 12px;
  height: 12px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #8aa29f;
  box-shadow: 0 0 0 2px #8aa29f;
}

.is-current .scenario-route-dot { background: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.is-proposed .scenario-route-dot { background: var(--blue); box-shadow: 0 0 0 2px var(--blue); }
.is-gap .scenario-route-dot { background: #c8892b; box-shadow: 0 0 0 2px #c8892b; }
.is-cliff .scenario-route-dot { border-radius: 2px; background: #a96b20; box-shadow: 0 0 0 2px #a96b20; clip-path: polygon(50% 100%, 0 0, 100% 0); }
.is-recovery .scenario-route-dot { background: var(--green); box-shadow: 0 0 0 2px var(--green); border-radius: 2px; transform: rotate(45deg); }

.scenario-hours em { color: #61777e; }
.scenario-step.is-current .scenario-hours em { color: var(--ink); }
.scenario-step.is-gap .scenario-hours em { color: #87581a; }
.scenario-step.is-cliff .scenario-hours em { color: #87581a; }
.scenario-step.is-recovery .scenario-hours em { color: var(--green-dark); }

.scenario-resource strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.cliff-explanation {
  padding: 10px 12px;
  border-left: 3px solid #c8892b;
  border-radius: 0 9px 9px 0;
  background: #fff8e9;
  color: #684818;
}

.opportunity-summary,
.map-completeness {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
}

.opportunity-summary {
  border-color: #bcd7d2;
  background: #f0f8f6;
}

.opportunity-summary.has-gap,
.opportunity-summary.needs-info {
  border-color: #dfc38f;
  background: #fff9ed;
}

.state-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #b9d3ce;
  border-radius: 50%;
  background: #fff;
  color: var(--green-dark);
  font-size: 1rem;
  font-weight: 900;
}

.needs-info .state-icon,
.has-gap .state-icon {
  border-color: #dfc38f;
  color: #8a5c1e;
}

.map-completeness {
  background: #f6f8f8;
}

.unknown-icon {
  border-color: #cfdadb;
  color: #5a7077;
}

.map-completeness h3 { margin-top: 4px; }
.map-completeness ul { padding-left: 1.05rem; }

.path-difference-note {
  border-left-color: #679caa;
  border-radius: 0 12px 12px 0;
  background: #eff6f6;
}

.result-disclaimer {
  border-color: #e4d3af;
  border-radius: 12px;
  background: #fffaf0;
}

.disclosure-layer {
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(25, 65, 67, 0.05);
}

.disclosure-layer > summary {
  min-height: 82px;
  padding: 18px 20px;
}

.explain-layer > summary { background: rgba(248, 252, 250, .8); }
.technical-layer { opacity: .88; }
.technical-layer[open] { opacity: 1; }
.technical-layer > summary { background: #f5f7f7; }

.breakdown-card,
.benefit-card,
.snap-scenario {
  border-color: #dbe6e3;
  border-radius: 13px;
  background: #f9fbfa;
}

.chart-frame {
  overflow: hidden;
  border: 1px solid #dbe6e3;
  border-radius: 16px;
  background: linear-gradient(180deg, #fbfdfc, #f4f8f7);
}

#resourceChart {
  min-height: 0;
  aspect-ratio: 820 / 360;
}

.grid-line { stroke: #dfe9e6; stroke-width: 1; }
.axis-label { fill: #6a7c81; font-size: 12px; font-weight: 700; }
.axis-caption { fill: #6a7c81; font-size: 12px; font-weight: 700; }
.baseline { stroke: #839a96; stroke-width: 1.5; stroke-dasharray: 7 7; }
.resource-area { fill: url(#mobilityArea); }
.hole-area { fill: #e7ad4e; opacity: .24; }
.resource-path { stroke: #2f8580; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.resource-path.current-path { stroke: #5e7c8b; stroke-width: 2.5; stroke-dasharray: 8 7; }
.chart-point { fill: #fff; stroke: #2f8580; stroke-width: 2.5; }
.gap-band { fill: #e9b55c; opacity: .11; }
.chart-marker circle { stroke: #fff; stroke-width: 3; }
.chart-marker text { fill: var(--ink); font-size: 12px; font-weight: 900; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.current-marker circle { fill: var(--ink); }
.proposed-marker circle { fill: var(--blue); }
.cliff-marker path { fill: #a96b20; stroke: #fff; stroke-width: 2; }
.gap-marker circle { fill: #c58429; }
.recovery-marker rect { fill: var(--green); stroke: #fff; stroke-width: 2; }
.tick { fill: #5f757b; font-size: 12px; font-weight: 750; }

.legend {
  margin-top: 12px;
  font-size: 0.78rem;
}

.line.resources { background: var(--green); }

.current-position-key {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}

.terrain-language { margin-top: 14px; }

.terrain-terms dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
}

.terrain-terms dl > div {
  padding: 10px;
  border: 1px solid #dce7e4;
  border-radius: 10px;
  background: #f8fbfa;
}

.terrain-terms dt {
  color: var(--ink);
  font-size: .8rem;
  font-weight: 900;
}

.terrain-terms dd {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.4;
}

#resourceChange.net-gain { color: var(--green-dark); }
#resourceChange.net-loss { color: #9a641d; }

.mobility-symbol-key {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.mobility-symbol-key span {
  padding: 6px 8px;
  border-radius: 8px;
  background: #f3f7f6;
  color: #5b7078;
  font-size: 0.72rem;
  font-weight: 700;
}

.mobility-symbol-key b {
  margin-right: 3px;
  color: var(--green-dark);
}

.policy-chip {
  background: #eaf4f2;
  color: var(--green-dark);
}

.text-action,
.benefit-card a,
.legal-links a,
.agreement-links a {
  color: var(--blue-dark);
}

footer {
  margin-top: 28px;
  padding: 22px 4px 8px;
  border-top: 1px solid rgba(24, 79, 80, 0.12);
}

@media (max-width: 960px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-path-card { max-width: none; }
  .workspace { grid-template-columns: 1fr; }
  .interview { position: static; }
  .notice { align-items: start; }
}

@media (max-width: 620px) {
  body {
    padding-right: calc(42px + env(safe-area-inset-right, 0px));
  }

  .mobile-scroll-lane {
    position: fixed;
    z-index: 20;
    top: 78px;
    right: 0;
    bottom: 18px;
    display: flex;
    width: calc(42px + env(safe-area-inset-right, 0px));
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-right: env(safe-area-inset-right, 0px);
    border: 1px solid rgba(33, 95, 90, 0.18);
    border-right: 0;
    border-radius: 15px 0 0 15px;
    background: rgba(238, 247, 244, 0.96);
    box-shadow: -5px 0 18px rgba(25, 65, 67, 0.09);
    color: var(--green-dark);
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-scroll-lane::before {
    position: absolute;
    top: 54px;
    bottom: 54px;
    left: 50%;
    width: 3px;
    border-radius: 999px;
    background: rgba(33, 95, 90, 0.16);
    content: "";
    transform: translateX(-50%);
  }

  .scroll-lane-arrow,
  .scroll-lane-label {
    position: relative;
    z-index: 1;
    background: #eef7f4;
  }

  .scroll-lane-arrow {
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
  }

  .scroll-lane-label {
    padding: 7px 0;
    font-size: .56rem;
    font-weight: 950;
    letter-spacing: .12em;
    line-height: 1;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }

  .mobile-scroll-help {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: -4px 2px 12px;
    color: var(--green-dark);
    font-size: .72rem;
    font-weight: 750;
    line-height: 1.35;
  }

  .mobile-scroll-help span {
    display: grid;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    place-items: center;
    border-radius: 50%;
    background: #e5f2ee;
    font-size: .88rem;
  }

  .app-shell {
    width: min(100% - 20px, 560px);
    padding-top: 0;
  }

  .site-topbar {
    min-height: 64px;
    flex-direction: row;
    align-items: center;
    padding: 9px 0;
  }

  .brand { gap: 8px; }
  .brand-mark { width: 36px; }
  .brand-copy strong { font-size: .96rem; }
  .brand-copy small { display: none; }
  .alpha-badge { padding: 3px 5px; font-size: .55rem !important; }
  .utility-nav { display: flex; }
  .utility-nav a { min-height: 40px; padding: 10px 8px; font-size: .72rem; }

  .hero {
    gap: 26px;
    padding: 42px 2px 34px;
  }

  .hero h1 {
    font-size: clamp(2.55rem, 12.7vw, 4.2rem);
    line-height: .98;
  }

  .hero .lede { font-size: 1rem; }
  .hero-actions { display: grid; gap: 8px; }
  .primary-action { width: 100%; min-width: 0; }
  .secondary-action { width: 100%; }
  .hero-path-card { padding: 20px; border-radius: 18px; }
  .hero-path li { min-height: 70px; }

  .notice {
    grid-template-columns: 28px minmax(0, 1fr);
    margin-bottom: 12px;
    padding: 11px;
  }

  .panel,
  .answer-card,
  .interview { padding: 16px; }

  .calculator-topline {
    align-items: flex-start;
    margin-bottom: 8px;
  }

  .compact-alpha-notice {
    align-items: flex-start;
    font-size: .68rem;
  }

  .interview .panel-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .panel-head h2 { font-size: 1.35rem; }
  .panel-intro { font-size: .8rem; }

  .entry-safety > summary {
    grid-template-columns: 22px minmax(0, 1fr);
  }

  .entry-safety > summary small { display: none; }
  .entry-safety > div { padding-left: 12px; }

  .live-map-status {
    position: sticky;
    z-index: 4;
    top: 8px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    margin: 0;
    padding: 8px 10px;
    box-shadow: 0 8px 20px rgba(25, 65, 67, 0.09);
  }

  .live-map-status > a {
    min-width: auto;
    white-space: nowrap;
    text-align: right;
  }

  .live-map-status > a small,
  .live-map-status #liveMapStatus { display: none; }

  .question-group-head {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .step-value {
    grid-column: 2;
    max-width: none;
    text-align: left;
  }
  .conditional-field { margin-left: 20px; }

  .map-heading { align-items: flex-start; }
  .map-mark { min-width: 58px; gap: 8px; transform: scale(.9); transform-origin: right top; }

  .answer-card h2 { font-size: clamp(1.75rem, 8vw, 2.35rem); }
  .current-position {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 18px;
  }

  .current-position-marker { width: 40px; height: 40px; }
  .current-resource { grid-column: 1 / -1; padding-top: 4px; text-align: left; }
  .current-resource strong { font-size: 2.5rem !important; }
  .current-position #currentBasis { grid-column: 1 / -1; }
  .decision-metrics { grid-template-columns: 1fr 1fr; }
  .decision-metrics > div { padding: 12px; }
  .decision-metrics > div > strong { font-size: 1.55rem; }

  .scenario-step > summary {
    grid-template-columns: 18px minmax(0, 1fr) auto;
    padding-inline: 9px;
  }

  .scenario-resource strong { font-size: 1.05rem; }
  .terrain-terms dl { grid-template-columns: 1fr; }
  .opportunity-summary,
  .map-completeness { grid-template-columns: 36px minmax(0, 1fr); padding: 14px; }
  .state-icon { width: 34px; height: 34px; }

  .disclosure-layer { padding: 0; }
  .disclosure-layer > summary { padding: 15px; }
  .disclosure-body { padding: 0 15px 15px; }
  .summary-action { font-size: .72rem; }
  .panel-head .policy-chip { align-self: flex-start; }

  #resourceChart { min-height: 235px; aspect-ratio: 1.3 / 1; }
  .axis-label { font-size: 10px; }
  .chart-marker text { font-size: 10px; }
  .legend { gap: 8px 12px; }
  .mobility-symbol-key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

  footer { align-items: flex-start; }
}

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

/* Self-employment Alpha path */
[hidden] { display: none !important; }

.earning-type-fieldset > legend,
.self-employment-path .step-fields > legend,
.mileage-entry > legend,
.tracker-entry-card > legend {
  margin-bottom: 10px;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 900;
}

.choice-cards {
  display: grid;
  gap: 9px;
}

.choice-cards.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice-cards.three-up { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.interview .choice-card {
  display: flex;
  min-height: 76px;
  flex-direction: row;
  align-items: center;
  border: 1px solid #cfdfdb;
  background: #fff;
  cursor: pointer;
}

.choice-card input {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  accent-color: var(--green-dark);
}

.choice-card span,
.choice-card strong,
.choice-card small { display: block; }

.choice-card strong { font-size: 0.92rem; }
.choice-card small { margin-top: 3px; color: var(--muted); font-size: 0.72rem; }
.choice-card:has(input:checked) { border-color: #68a59c; background: #eef8f5; box-shadow: inset 0 0 0 1px #68a59c; }
.interview .choice-card.choice-card-disabled {
  border-style: dashed;
  background: #f4f7f6;
  color: #6b7b79;
  cursor: not-allowed;
}
.choice-card-disabled input { opacity: 0.45; }
.choice-card-disabled small { font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }

.field-note {
  margin: 9px 2px 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.45;
}

.self-employment-path {
  display: grid;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #e6eeeb;
}

.self-path-intro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 13px;
  border: 1px solid #d9e6e3;
  border-radius: 14px;
  background: #f5faf8;
}

.self-path-intro strong { font-size: 0.86rem; }
.self-path-intro p { margin: 3px 0 0; color: var(--muted); font-size: 0.75rem; line-height: 1.45; }

.source-state,
.local-only-chip {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.61rem;
  font-weight: 950;
  letter-spacing: 0.055em;
}

.state-experimental { border: 1px solid #dfc387; background: #fff6df; color: #79521f; }
.local-only-chip { border: 1px solid #9dbfba; background: #eef8f5; color: var(--green-dark); }

.money-input {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  border: 1px solid #cfded9;
  border-radius: 10px;
  background: #fff;
}

.money-input b { padding-left: 12px; color: var(--green-dark); font-size: 1rem; }
.interview .money-input input { width: 100%; min-width: 0; border: 0; box-shadow: none; }

.calculated-field {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid #bcd9d3;
  border-radius: 12px;
  background: linear-gradient(145deg, #eff8f5, #f9fcfb);
}

.calculated-field > span { color: var(--muted); font-size: 0.76rem; font-weight: 800; }
.calculated-field > strong { color: var(--green-dark); font-size: 1.15rem; }
.calculated-field > small { color: var(--muted); font-size: 0.7rem; line-height: 1.4; }

.daily-tracker {
  padding: 16px;
  border: 1px solid #cfe0dc;
  border-radius: 16px;
  background: #f8fbfa;
}

.tracker-heading,
.calendar-head,
.tracker-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.tracker-heading h3 { margin: 0; font-size: 1.15rem; }
.tracker-heading .eyebrow { margin-bottom: 3px; }

.tracker-privacy {
  margin: 12px 0 15px;
  padding: 11px 12px;
  border-left: 3px solid #d1a153;
  border-radius: 0 10px 10px 0;
  background: #fff9ed;
  color: #624c2d;
  font-size: 0.74rem;
  line-height: 1.5;
}

.tracker-layout { display: grid; gap: 14px; }

.tracker-entry-card {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 14px;
  border: 1px solid #d8e6e2;
  border-radius: 14px;
  background: #fff;
}

.tracker-entry-card > label,
.tracker-entry-card #trackerWorkingFields > label,
.mileage-entry label {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 10px;
  border-radius: 10px;
}

#trackerWorkingFields { display: grid; gap: 8px; }

.interview .off-day-toggle,
.interview .local-storage-consent {
  display: flex;
  min-height: 58px;
  flex-direction: row;
  align-items: center;
}

.off-day-toggle input,
.local-storage-consent input { width: 21px; height: 21px; flex: 0 0 auto; accent-color: var(--green-dark); }
.off-day-toggle span,
.off-day-toggle strong,
.off-day-toggle small { display: block; }
.off-day-toggle small { margin-top: 2px; color: var(--muted); font-size: 0.68rem; }

.mileage-entry {
  margin: 2px 0;
  padding: 12px;
  border: 1px solid #d9e6e3;
  border-radius: 12px;
  background: #f7faf9;
}

.tracker-optional { border: 1px solid #dce7e4; border-radius: 11px; background: #fbfdfc; }
.tracker-optional > summary { padding: 11px; cursor: pointer; color: var(--muted); font-size: 0.74rem; font-weight: 850; }
.tracker-optional > div { display: grid; gap: 8px; padding: 0 10px 10px; }

.compact-choice-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.interview .compact-choice-row label {
  display: flex;
  min-height: 48px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 7px;
  text-align: center;
  font-size: 0.68rem;
}

.compact-choice-row input { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--green-dark); }
.control-label { display: block; margin: 10px 0 7px; color: var(--ink); font-size: 0.75rem; font-weight: 850; }

.estimate-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.estimate-chips button { min-height: 42px; padding: 5px 2px; border-radius: 9px; background: #fff; font-size: 0.69rem; }
.estimate-chips button.selected { border-color: var(--green-dark); background: #e7f5f1; color: var(--green-dark); }

.odometer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.odometer-grid p { grid-column: 1 / -1; margin: 0; padding: 8px; color: var(--muted); font-size: 0.74rem; }

.tracker-save { border-color: var(--green-dark); background: var(--green-dark); color: #fff; }
.tracker-message { min-height: 1.2em; margin: 0; color: var(--green-dark); font-size: 0.74rem; font-weight: 750; }

.tracker-history { display: grid; gap: 12px; }
.tracker-summaries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tracker-summaries article { min-width: 0; padding: 12px; border: 1px solid #d8e6e2; border-radius: 12px; background: #fff; }
.tracker-summaries span,
.tracker-summaries strong,
.tracker-summaries small { display: block; }
.tracker-summaries span { color: var(--muted); font-size: 0.65rem; font-weight: 900; text-transform: uppercase; }
.tracker-summaries strong { margin-top: 5px; font-size: 0.83rem; }
.tracker-summaries small { margin-top: 4px; color: var(--muted); font-size: 0.64rem; line-height: 1.35; }

.tracker-calendar,
.cash-summary { padding: 12px; border: 1px solid #d8e6e2; border-radius: 14px; background: #fff; }
.tracker-calendar > summary { display: flex; min-height: 38px; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; color: var(--ink); font-size: 0.82rem; font-weight: 900; }
.tracker-calendar > summary::-webkit-details-marker { display: none; }
.tracker-calendar > summary::after { content: "+"; color: var(--green-dark); font-size: 1.1rem; }
.tracker-calendar[open] > summary::after { content: "−"; }
.tracker-calendar > summary small { color: var(--muted); font-size: 0.64rem; font-weight: 750; }
.tracker-calendar-body { margin-top: 10px; padding-top: 10px; border-top: 1px solid #edf2f0; }
.calendar-head h4,
.cash-summary h4 { margin: 0; font-size: 0.92rem; }
.calendar-head button { min-width: 42px; min-height: 42px; padding: 4px; }
.calendar-weekdays,
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.calendar-weekdays { margin: 10px 0 4px; }
.calendar-weekdays span { color: var(--muted); font-size: 0.57rem; font-weight: 900; text-align: center; text-transform: uppercase; }
.calendar-blank { min-height: 50px; }
.calendar-day { display: grid; min-width: 0; min-height: 54px; align-content: space-between; padding: 5px 3px; border: 1px solid #e0e9e7; border-radius: 8px; background: #fbfdfc; color: var(--ink); }
.calendar-day span { font-size: 0.62rem; text-align: left; }
.calendar-day strong { overflow: hidden; font-size: 0.58rem; text-overflow: ellipsis; }
.calendar-day.is-income { border-color: #9dc9c0; background: #eff8f5; }
.calendar-day.is-off { border-style: dashed; background: #f2f4f4; color: #617177; }
.calendar-day.is-zero { border-color: #c5d7e2; background: #f2f8fb; color: var(--blue-dark); }
.calendar-day.is-unknown { border-color: #e2c990; background: #fff9ec; color: #72501f; }

.calendar-key { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 9px; color: var(--muted); font-size: 0.65rem; }
.calendar-key span { display: inline-flex; gap: 4px; align-items: center; }
.calendar-key i { width: 10px; height: 10px; border: 1px solid #cfd9d7; border-radius: 3px; }
.key-off { border-style: dashed !important; background: #f2f4f4; }
.key-zero { background: #f2f8fb; }
.key-none { background: #fbfdfc; }

.cash-summary dl { display: grid; gap: 0; margin: 10px 0; }
.cash-summary dl div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #edf2f0; font-size: 0.75rem; }
.cash-summary dd { margin: 0; font-weight: 850; text-align: right; }
.cash-summary p { margin: 9px 0 0; color: var(--muted); font-size: 0.69rem; line-height: 1.4; }

.danger-tertiary { width: 100%; border-color: #e3d1cc; background: #fffafa; color: #7b4d43; font-size: 0.73rem; }

@media (min-width: 860px) {
  .tracker-layout { grid-template-columns: minmax(270px, .85fr) minmax(0, 1.35fr); align-items: start; }
}

@media (max-width: 620px) {
  .choice-cards.two-up,
  .choice-cards.three-up { grid-template-columns: 1fr; }
  .daily-tracker { padding: 11px; }
  .tracker-heading { align-items: flex-start; }
  .tracker-summaries { grid-template-columns: 1fr; }
  .tracker-summaries article { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 3px 8px; }
  .tracker-summaries strong { margin: 0; }
  .tracker-summaries small { grid-column: 2; margin: 0; }
  .compact-choice-row { grid-template-columns: 1fr; }
  .estimate-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .odometer-grid { grid-template-columns: 1fr; }
  .odometer-grid p { grid-column: 1; }
  .calendar-weekdays,
  .calendar-grid { gap: 2px; }
  .calendar-day { min-height: 49px; padding-inline: 2px; }
  .calendar-day strong { font-size: 0.52rem; }
}