:root {
  --page-soft: #f8f6f6;
}
.page-main {
  background: var(--surface);
  color: var(--ink);
}
.page-hero {
  padding: var(--s6) 0 var(--s5);
}
.page-hero-card {
  padding: var(--s6);
  border-radius: var(--radius-panel);
  background: linear-gradient(115deg, var(--warm-gray), var(--brand-wash));
  color: var(--ink);
}
.page-hero .eyebrow {
  margin-bottom: var(--s3);
}
.page-hero h1 {
  max-width: 960px;
  margin-bottom: var(--s3);
  text-wrap: balance;
}
.page-hero .section-intro {
  margin-bottom: 0;
  color: var(--ink-soft);
}
.legal-glance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s2);
  margin-top: var(--s4);
}
.overview-card {
  min-height: 190px;
  padding: var(--s3);
  border-radius: var(--radius-card);
  background: var(--ink);
  color: var(--surface);
}
.overview-card span {
  display: block;
  margin-bottom: var(--s4);
  color: var(--brand-glow);
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.overview-card h2 {
  margin-bottom: var(--s1);
  font-size: 28px;
  font-weight: 560;
}
.overview-card p {
  margin: 0;
  color: #d7d2d9;
  font-size: var(--small);
}
.legal-body {
  padding: var(--s5) 0 var(--s7);
}
.legal-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.32fr) minmax(0, 1fr);
  gap: var(--s6);
  align-items: start;
}
.legal-aside {
  position: sticky;
  top: calc(var(--header-h) + var(--s3));
  padding: var(--s3);
  border-radius: var(--radius-card);
  background: var(--page-soft);
  color: var(--ink);
}
.legal-aside strong,
.legal-aside a {
  display: block;
}
.legal-aside strong {
  margin-bottom: var(--s2);
}
.legal-aside a {
  padding: 7px 0;
  color: var(--muted);
  font-size: var(--small);
}
.legal-copy {
  min-width: 0;
}
.legal-copy section + section {
  margin-top: var(--s5);
}
.legal-copy h2 {
  margin-bottom: var(--s3);
  font-size: var(--h2-compact);
}
.legal-copy p,
.legal-copy li {
  color: var(--ink-soft);
}
.legal-copy ul {
  padding-left: 1.2em;
}
.boundary-table {
  margin: var(--s4) 0 var(--s5);
  overflow-x: auto;
  border-radius: var(--radius-card);
  background: var(--page-soft);
  color: var(--ink);
}
.boundary-table th,
.boundary-table td {
  min-width: 150px;
}
.policy-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2);
  margin-top: var(--s4);
}
.policy-panel {
  padding: var(--s4);
  border-radius: var(--radius-card);
  background: var(--page-soft);
  color: var(--ink);
}
.policy-panel.is-closed {
  background: var(--ink);
  color: var(--surface);
}
.policy-panel.is-closed p,
.policy-panel.is-closed li {
  color: #d7d2d9;
}
.policy-panel h3 {
  margin-bottom: var(--s2);
  font-size: var(--h3-large);
}
.page-final {
  padding: 0 0 var(--s6);
}
.page-final-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4);
  border-radius: var(--radius-card);
  background: var(--brand-wash);
  color: var(--ink);
}
.page-final-card p {
  margin: 0;
}
.page-final-card .button {
  background: var(--ink);
  color: var(--surface);
}
.guide-section {
  padding: var(--s5) 0 var(--s7);
}
.guide-section + .guide-section {
  padding-top: 0;
}
.guide-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(280px, 0.45fr);
  gap: var(--s5);
  align-items: end;
  margin-bottom: var(--s4);
}
.guide-heading h2 {
  margin-bottom: 0;
  font-size: var(--h2-compact);
}
.scene-grid,
.note-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s2);
}
.scene-card,
.note-card {
  min-width: 0;
  padding: var(--s4);
  border-radius: var(--radius-card);
  background: var(--page-soft);
  color: var(--ink);
}
.scene-card svg {
  width: 42px;
  height: 42px;
  margin-bottom: var(--s4);
}
.scene-card h3,
.note-card h2 {
  margin-bottom: var(--s2);
}
.scene-card p,
.note-card p {
  color: var(--ink-soft);
}
.decision-board {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: var(--ink);
  color: var(--surface);
}
.decision-copy,
.decision-steps {
  padding: var(--s5);
}
.decision-copy {
  background: var(--brand-wash);
  color: var(--ink);
}
.decision-copy h2 {
  font-size: var(--h2-compact);
}
.decision-steps {
  display: grid;
  gap: var(--s3);
}
.decision-step {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--s2);
}
.decision-step > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: var(--surface);
  font-weight: 600;
}
.decision-step p {
  margin: 0;
  color: #d7d2d9;
}
.range-board {
  padding: var(--s5);
  border-radius: var(--radius-panel);
  background: var(--page-soft);
  color: var(--ink);
}
.range-row {
  display: grid;
  grid-template-columns: minmax(130px, 0.35fr) minmax(0, 1fr) 84px;
  gap: var(--s2);
  align-items: center;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}
.range-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}
.range-track span {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--brand);
}
.range-row strong:last-child {
  text-align: right;
}
.note-card {
  display: block;
}
.note-card time {
  display: block;
  margin-bottom: var(--s3);
  color: var(--brand-deep);
  font-size: var(--micro);
}
.note-card:hover {
  background: var(--brand-wash);
  color: var(--ink);
}
@media (max-width: 760px) {
  .page-hero-card {
    padding: var(--s4) var(--s3);
    border-radius: var(--radius-card);
  }
  .page-hero h1 {
    font-size: var(--h2-compact);
  }
  .legal-glance,
  .legal-layout,
  .policy-pair,
  .guide-heading,
  .scene-grid,
  .note-grid,
  .decision-board {
    grid-template-columns: minmax(0, 1fr);
  }
  .guide-heading h2 {
    font-size: 40px;
  }
  .decision-copy,
  .decision-steps,
  .range-board {
    padding: var(--s3);
  }
  .range-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .range-row strong:last-child {
    text-align: left;
  }
  .legal-aside {
    position: static;
  }
  .legal-copy h2 {
    font-size: 34px;
  }
  .page-final-card {
    align-items: flex-start;
    flex-direction: column;
  }
}