:root {
  /* ------------------------------------------------------------------
     CANON PALETTE — RE-POINTED TO THE DIRECTORY SYSTEM (2026-07-26).

     These token NAMES are kept (198 var() usages across this file depend on
     them) but their VALUES now resolve to the directory palette in
     directory.css. The original values came from
     CSDP-CARTOON-ANIMATION-COMPONENT-SYSTEM-2026-07-23.md, the cartoon
     direction that the owner's 2026-07-22 light-Apple-minimal lock
     superseded.

     Why this mattered: 18 live pages load only v4.css — all six city hubs,
     /find/, /check/, five templates and five homeowner tools. They rendered
     on a #E7F6FF light-blue ground with #07366F blue headings and radii up
     to 24px, while every directory page rendered white/navy/teal at 6-10px.
     The site was two design systems sharing a domain. Re-pointing ten values
     converges them without touching a line of markup.
     ------------------------------------------------------------------ */
  --pacific-900: #17202a; /* ink — headings, body text, contours */
  --pacific-700: #5f6368; /* muted — secondary text and quiet surfaces */
  --ocean-600: #147d80;   /* teal — primary action */
  --sky-400: #d8d9dc;     /* hairline — interface faces and rules */
  --aqua-400: #147d80;    /* teal — live state */
  --foam-50: #ffffff;     /* page ground — white, as the directory */
  --foam-100: #f7f6f2;    /* paper — quiet sections */
  --sand-200: #f3f4f5;    /* neutral band */
  --sun-300: #d95745;     /* coral — attention cue */
  --coral-400: #d95745;   /* coral — error cue */

  /* Pure white is a neutral page/card face, not a palette hue. */
  --white: #ffffff;

  /* ------------------------------------------------------------------
     LEGACY ALIASES — do not extend this list.
     Every token name that had drifted off canon, or was invented outright,
     is kept alive here and re-pointed at its nearest canon token, so no
     existing rule breaks and no off-canon hex survives. New rules should
     use the canon names above; aliases are retired as usages are migrated.
     ------------------------------------------------------------------ */
  --pacific: var(--pacific-900);    /* was #07366f — already canon Pacific 900 */
  --pacific-2: var(--pacific-700);  /* was #0a4f95 — invented mid-navy */
  --ink: var(--pacific-900);        /* was #082d54 — invented body ink */
  --ink-soft: var(--pacific-700);   /* was #244d6d — invented soft ink */
  --muted: var(--pacific-700);      /* was #61798a — invented blue-grey */
  --ocean: var(--ocean-600);        /* was #0b7ed1 — drift off Ocean 600 */
  --ocean-dark: var(--pacific-700); /* was #0862ad — drift, lands on Pacific 700 */
  --sky: var(--sky-400);            /* was #dceff7 — the sitewide wash */
  --aqua: var(--aqua-400);          /* was #49ddc7 — drift off Aqua 400 */
  --aqua-dark: var(--aqua-400);     /* was #087c73 — invented; live-state cue */
  --foam: var(--foam-50);           /* was #f7fbfc — drift off Foam 50 */
  --paper: var(--foam-100);         /* was #eef4f5 — drift off Foam 100 */
  --sand: var(--sand-200);          /* was #f3e4bf — drift off Sand 200 */
  --line: var(--sky-400);           /* was #bfd0d9 — invented grey hairline */
  --line-dark: #b9bdc2;             /* grey hairline; must NOT follow the teal action token */
  --review: var(--pacific-900);     /* was #86610f — invented amber ink */
  --review-bg: var(--sand-200);     /* was #fff2c8 — invented amber wash */

  --shadow-1: 0 4px 14px rgba(23, 32, 42, .06);
  --shadow-2: 0 8px 22px rgba(23, 32, 42, .08);
  /* One radius, as the directory uses. 10/16/24px was a third of the site
     rounding differently from the other two thirds. */
  --radius-sm: 8px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --shell: 1180px;
  --z-skip: 100;
  --z-header: 40;
  --z-nav: 50;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  background: var(--white);
  scroll-behavior: auto;
  overflow-x: clip;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: clip;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
select {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p,
li,
dd {
  text-wrap: pretty;
}

strong,
b,
dd,
.status,
.source-rail {
  font-variant-numeric: tabular-nums;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--aqua);
  outline-offset: 3px;
}

.sr-only {
  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;
}

.shell {
  width: min(calc(100% - 40px), var(--shell));
  margin-inline: auto;
}

.section {
  padding: clamp(48px, 6vw, 84px) 0;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: var(--z-skip);
  padding: 11px 15px;
  color: var(--white);
  background: var(--pacific);
  border-radius: var(--radius-sm);
  transform: translateY(-140%);
}

.skip-link:focus {
  transform: translateY(0);
}

.source-rail {
  display: none;
}

.source-rail__inner {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
}

.source-rail__inner span + span {
  position: relative;
}

.source-rail__inner span + span::before {
  position: absolute;
  top: 50%;
  left: -14px;
  width: 3px;
  height: 3px;
  content: "";
  background: var(--aqua);
  border-radius: 50%;
  transform: translateY(-50%);
}

.site-header {
  position: relative;
  top: 0;
  z-index: var(--z-header);
  color: var(--ink);
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.site-header.is-scrolled {
  box-shadow: none;
}

.site-header__inner {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}

.brand {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0;
  color: var(--pacific-900);
  text-decoration: none;
}

.brand > span:last-child {
  display: grid;
  line-height: 1.08;
}

.brand strong {
  font-size: 18px;
  font-weight: 700;
}

.brand small {
  display: none;
}

.csdp-brand__accent {
  color: var(--sun-300);
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 23px;
}

.primary-nav > a:not(.button) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
}

.primary-nav > a:not(.button):hover {
  color: var(--ocean-dark);
}

.menu-button {
  width: 48px;
  height: 48px;
  display: none;
  place-items: center;
  padding: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.menu-button span {
  width: 20px;
  height: 2px;
  display: block;
  margin: 2px 0;
  background: var(--ink);
  border-radius: 2px;
}

.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 19px;
  color: var(--white);
  background: var(--pacific);
  border: 1px solid var(--pacific);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
  transition: background-color 160ms ease-out, border-color 160ms ease-out;
}

.button:hover {
  background: var(--pacific-2);
  border-color: var(--pacific-2);
}

.button:active {
  background: var(--pacific-900);
}

.button--small {
  min-height: 44px;
  padding: 10px 15px;
}

.button--aqua {
  color: var(--pacific);
  background: var(--aqua);
  border-color: var(--aqua);
}

.button--aqua:hover {
  color: var(--pacific);
  background: #74e7d6;
  border-color: #74e7d6;
}

.button--light {
  color: var(--pacific);
  background: var(--white);
  border-color: var(--white);
}

.button--light:hover {
  color: var(--pacific);
  background: var(--sky);
  border-color: var(--sky);
}

.button--outline-light {
  color: var(--white);
  background: transparent;
  border-color: rgba(255, 255, 255, .55);
}

.button--outline-light:hover {
  background: rgba(255, 255, 255, .1);
  border-color: var(--white);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--ocean-dark);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.eyebrow i {
  width: 8px;
  height: 8px;
  display: inline-block;
  background: var(--aqua);
  border: 2px solid currentColor;
  border-radius: 50%;
}

.eyebrow--light {
  color: #c7eaf3;
}

.hero {
  color: var(--white);
  background: var(--pacific);
  border-bottom: 1px solid #052955;
}

.hero__layout {
  min-height: 720px;
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  align-items: center;
  gap: clamp(30px, 4vw, 64px);
  padding-block: clamp(62px, 7vw, 94px);
}

.hero__copy {
  min-width: 0;
}

.hero h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(3.1rem, 5vw, 5.5rem);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: .98;
}

.hero__lede {
  max-width: 660px;
  margin: 24px 0 0;
  color: #d9eaf3;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.5;
}

.finder {
  max-width: 720px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 31px;
  padding: 8px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
}

.finder__field {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 4px 12px;
}

.finder__field + .finder__field {
  border-left: 1px solid var(--line);
}

.finder label {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.finder select {
  width: 100%;
  min-height: 32px;
  padding: 0 24px 0 0;
  color: var(--ink);
  background: var(--white);
  border: 0;
  outline: 0;
  font-size: 13px;
  font-weight: 700;
}

.finder__submit {
  min-width: 156px;
}

.finder:focus-within {
  outline: 3px solid var(--aqua);
  outline-offset: 3px;
}

.finder:focus-within :focus-visible {
  outline: 0;
}

.finder__status {
  min-height: 24px;
  margin: 10px 0 0;
  color: #b8d9e7;
  font-size: 12px;
  font-weight: 700;
}

.finder__status.is-held {
  color: #ffe3a0;
}

.hero__micro {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 15px;
}

.hero__micro span {
  padding: 6px 9px;
  color: #cae4ef;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
}

.proof-rail {
  max-width: 720px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 27px 0 0;
  overflow: hidden;
  color: var(--white);
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
}

.proof-rail div {
  min-width: 0;
  padding: 13px 14px;
  background: rgba(5, 42, 89, .68);
}

.proof-rail dt {
  color: #a9cad9;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.proof-rail dd {
  margin: 5px 0 0;
  font-size: 11px;
  font-weight: 700;
}

.proof-rail strong {
  color: var(--aqua);
  font-size: 16px;
}

.hero-board {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--foam);
  border: 1px solid #82a3b6;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}

.hero-board__top {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.hero-board__top > div {
  display: grid;
  gap: 4px;
}

.hero-board__top strong {
  font-size: 12px;
}

.hero-board__top strong b {
  color: var(--ocean);
}

.signal {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.signal i {
  width: 8px;
  height: 8px;
  display: inline-block;
  background: var(--aqua);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(73, 221, 199, .2);
}

.hero-board__date {
  padding: 7px 9px;
  color: var(--pacific);
  background: var(--sky);
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
}

.hero-board__body {
  min-height: 554px;
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
}

.hero-art {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  margin: 0;
  padding: clamp(16px, 2.2vw, 28px);
  background: var(--sky);
  border-right: 1px solid var(--line);
}

.hero-art picture {
  min-height: 0;
  display: grid;
  place-items: center;
}

.hero-art img {
  width: 100%;
  height: 100%;
  max-height: 480px;
  object-fit: contain;
}

.hero-art figcaption {
  padding-top: 11px;
  color: var(--muted);
  border-top: 1px solid rgba(141, 168, 184, .55);
  font-size: 9px;
  font-weight: 700;
  text-align: center;
}

.hero-tools {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 18px;
  background: var(--foam);
}

.hero-tools__head {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
}

.hero-tools__head span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.hero-tools__head a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  color: var(--ocean-dark);
  font-size: 10px;
  font-weight: 700;
}

.hero-tools__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 7px;
}

.hero-tools__grid a {
  min-height: 54px;
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: transform 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.hero-tools__grid a:hover {
  border-color: var(--ocean);
  box-shadow: var(--shadow-1);
}

.hero-tools__grid a > span {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  color: var(--pacific);
  background: var(--sky);
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
}

.hero-tools__grid strong {
  min-width: 0;
  font-size: 10px;
  line-height: 1.2;
}

.hero-tools__grid em {
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.section-heading {
  margin-bottom: clamp(34px, 5vw, 58px);
}

.section-heading--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 470px);
  align-items: end;
  gap: 38px;
}

.section-heading--center {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}

.section-heading h2,
.same-scope h2,
.decision-notebook h2,
.final-action h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.35rem, 4.4vw, 4.7rem);
  font-weight: 700;
  letter-spacing: -.052em;
  line-height: 1;
}

.section-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

.market-section {
  background: var(--foam);
  border-bottom: 1px solid var(--line);
}

.trade-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}

.trade-tabs button {
  min-height: 76px;
  display: grid;
  gap: 4px;
  padding: 13px 15px;
  color: var(--ink);
  text-align: left;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: transform 150ms ease-out, border-color 150ms ease-out, background-color 150ms ease-out;
}

.trade-tabs button:hover {
  border-color: var(--ocean);
}

.trade-tabs button[aria-selected="true"] {
  color: var(--white);
  background: var(--pacific);
  border-color: var(--pacific);
}

.trade-tabs span {
  font-size: 13px;
  font-weight: 700;
}

.trade-tabs small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.trade-tabs button[aria-selected="true"] small {
  color: #bcd9e7;
}

.market-panel {
  padding: clamp(18px, 3vw, 30px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

.market-panel__summary {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.market-panel__summary > div {
  display: grid;
  gap: 5px;
}

.market-panel__summary span {
  color: var(--ocean-dark);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.market-panel__summary strong {
  font-size: clamp(20px, 2.5vw, 30px);
  line-height: 1.1;
}

.market-panel__summary p {
  max-width: 430px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

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

.city-card {
  min-width: 0;
  min-height: 195px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 18px;
  background: var(--foam);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.city-card.is-live {
  background: var(--white);
  border-color: #70a8c5;
}

.city-card__top {
  display: grid;
  gap: 10px;
}

.city-card__top strong {
  font-size: 20px;
}

.status {
  width: max-content;
  display: inline-flex;
  align-items: center;
  padding: 5px 7px;
  border-radius: 8px;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
}

.status--open {
  color: #075f58;
  background: #ccf7ed;
}

.status--review {
  color: var(--review);
  background: var(--review-bg);
}

.city-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.city-card__action,
.city-card__held {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
}

.city-card__action {
  color: var(--white);
  background: var(--ocean-dark);
}

.city-card__action:hover {
  background: var(--pacific);
}

.city-card__held {
  color: var(--muted);
  background: #e7eef0;
}

.toolkit {
  background: var(--paper);
}

.tool-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}

.tool-card {
  min-width: 0;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 2vw, 26px);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform 160ms ease-out, border-color 160ms ease-out, box-shadow 160ms ease-out;
}

.tool-card:hover {
  border-color: var(--ocean);
  box-shadow: var(--shadow-1);
}

.tool-card--license,
.tool-card--cost,
.tool-card--snapshot {
  grid-column: span 4;
}

.tool-card--quotes {
  grid-column: span 7;
}

.tool-card--contract {
  grid-column: span 5;
}

.tool-card--compare {
  grid-column: span 6;
}

.tool-card--emergency,
.tool-card--maintenance {
  grid-column: span 3;
}

.tool-card--large {
  min-height: 360px;
}

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

.tool-card__meta span {
  color: var(--ocean-dark);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.tool-card__meta em {
  padding: 5px 7px;
  color: var(--muted);
  background: var(--paper);
  border-radius: 8px;
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  text-align: right;
}

.tool-card h3 {
  margin: 0;
  font-size: clamp(20px, 2vw, 29px);
  font-weight: 700;
  letter-spacing: -.032em;
  line-height: 1.05;
}

.tool-card p {
  max-width: 590px;
  margin: 12px 0 20px;
  color: var(--muted);
  font-size: 13px;
}

.section-action {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
}

.section-action > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.text-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ocean-dark);
  font-size: 12px;
  font-weight: 700;
}

.text-link:hover {
  color: var(--pacific);
}

.text-link--light {
  color: #d8edf4;
}

.text-link--light:hover {
  color: var(--white);
}

.same-scope {
  background: var(--foam);
}

.same-scope__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(42px, 7vw, 100px);
  padding: clamp(34px, 6vw, 76px);
  color: var(--white);
  background: var(--pacific);
  border-radius: 8px;
  box-shadow: var(--shadow-2);
}

.same-scope h2 {
  color: var(--white);
}

.same-scope__copy > p {
  max-width: 650px;
  margin: 22px 0 0;
  color: #c8e0eb;
  font-size: 17px;
}

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

.decision-notebook {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.decision-notebook__layout {
  display: grid;
  grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr);
  align-items: start;
  gap: clamp(48px, 8vw, 120px);
}

.decision-notebook__intro {
  position: sticky;
  top: 116px;
}

.decision-notebook__intro p {
  max-width: 520px;
  margin: 20px 0 12px;
  color: var(--muted);
}

.question-list {
  display: grid;
  gap: 9px;
}

.question-list details {
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.question-list summary {
  min-height: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 15px 18px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.question-list summary::-webkit-details-marker {
  display: none;
}

.question-list summary span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--pacific);
  background: var(--sky);
  border-radius: 8px;
  font-size: 18px;
  transition: transform 160ms ease-out, background-color 160ms ease-out;
}

.question-list details[open] summary span {
  background: var(--aqua);
  transform: rotate(45deg);
}

.question-list details p {
  margin: 0;
  padding: 0 18px 18px;
  color: var(--muted);
  font-size: 13px;
}

.evidence {
  background: var(--foam);
}

.evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.evidence-card {
  min-height: 315px;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 3vw, 30px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.evidence-card__number {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--pacific);
  background: var(--aqua);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
}

.evidence-card h3 {
  margin: 22px 0 0;
  font-size: 26px;
  font-weight: 700;
}

.evidence-card > p {
  margin: 10px 0 22px;
  color: var(--muted);
  font-size: 13px;
}

.evidence-city,
.evidence-record,
.evidence-compare {
  margin-top: auto;
}

.evidence-city {
  min-height: 54px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px;
  background: var(--sky);
  border-radius: 8px;
}

.evidence-city i {
  width: 9px;
  height: 9px;
  background: var(--aqua-dark);
  border-radius: 50%;
}

.evidence-city span,
.evidence-city strong {
  font-size: 9px;
}

.evidence-record {
  padding: 12px;
  background: var(--foam);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.evidence-record div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 13px;
  padding: 7px 0;
}

.evidence-record div + div {
  border-top: 1px solid var(--line);
}

.evidence-record dt {
  color: var(--ocean-dark);
  font-size: 8px;
  font-weight: 700;
}

.evidence-record dd {
  margin: 0;
  font-size: 9px;
  text-align: right;
}

.evidence-compare {
  display: grid;
  grid-template-columns: 1fr 42px 1fr;
  align-items: center;
  gap: 8px;
}

.evidence-compare span {
  padding: 12px 8px;
  background: var(--sky);
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
}

.evidence-compare i {
  height: 2px;
  display: block;
  background: var(--aqua-dark);
}

.rules {
  background: var(--paper);
}

.rules-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}

.rule-card {
  min-height: 260px;
  grid-column: span 5;
  padding: clamp(22px, 3vw, 34px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.rule-card--wide {
  grid-column: span 7;
  color: var(--white);
  background: var(--pacific);
  border-color: var(--pacific);
}

.rule-card > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--pacific);
  background: var(--aqua);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
}

.rule-card h3 {
  margin: 34px 0 0;
  font-size: clamp(23px, 2.6vw, 34px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.05;
}

.rule-card p {
  max-width: 650px;
  margin: 13px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.rule-card--wide p {
  color: #c7dfeb;
}

.final-action {
  padding: clamp(52px, 7vw, 88px) 0;
  color: var(--white);
  background: var(--ocean-dark);
}

.final-action__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
}

.final-action h2 {
  max-width: 830px;
  color: var(--white);
}

.final-action p {
  margin: 16px 0 0;
  color: #d5e9f2;
}

.final-action__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.site-footer {
  padding: 64px 0 28px;
  color: #c5dce7;
  background: #052a59;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, minmax(130px, 1fr));
  gap: 46px;
}

.brand--footer {
  color: var(--white);
}

.brand--footer small {
  color: #9fc3d2;
}

.site-footer__brand p {
  max-width: 380px;
  margin: 17px 0 0;
  color: #9fc3d2;
  font-size: 12px;
}

.site-footer h3 {
  margin: 0 0 15px;
  color: var(--white);
  font-size: 11px;
}

.site-footer__grid > div:not(.site-footer__brand) {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.site-footer__grid > div:not(.site-footer__brand) a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  color: #a9c9d7;
  font-size: 11px;
}

.site-footer__grid a:hover {
  color: var(--white);
}

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 42px;
  padding-top: 21px;
  color: #8db3c4;
  border-top: 1px solid rgba(255, 255, 255, .13);
  font-size: 9px;
}

.mobile-dock {
  display: none;
}

@media (max-width: 1180px) {
  .primary-nav {
    gap: 16px;
  }

  .primary-nav > a:not(.button) {
    font-size: 11px;
  }

  .hero__layout {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 62px;
  }

  .hero__copy {
    max-width: 920px;
  }

  .hero h1 {
    max-width: 900px;
  }

  .hero-board__body {
    grid-template-columns: minmax(0, 39fr) minmax(0, 61fr);
  }

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

  .hero-tools__grid a {
    grid-template-columns: 29px minmax(0, 1fr);
  }

  .hero-tools__grid em {
    display: none;
  }

  .tool-card--emergency,
  .tool-card--maintenance {
    grid-column: span 6;
  }

  .site-footer__grid {
    grid-template-columns: 1.3fr repeat(3, 1fr);
    gap: 28px;
  }
}

@media (max-width: 940px) {
  .menu-button {
    display: block;
  }

  .primary-nav {
    position: fixed;
    top: 112px;
    right: 24px;
    left: 24px;
    z-index: var(--z-nav);
    display: none;
    align-items: stretch;
    gap: 2px;
    padding: 12px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
  }

  .primary-nav.is-open {
    display: grid;
  }

  .primary-nav > a:not(.button) {
    min-height: 48px;
    padding: 9px 11px;
    border-radius: 8px;
  }

  .primary-nav > a:not(.button):hover {
    background: var(--sky);
  }

  .section-heading--split {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 18px;
  }

  .section-heading--split p {
    max-width: 680px;
  }

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

  .tool-card--license,
  .tool-card--cost,
  .tool-card--snapshot {
    grid-column: span 6;
  }

  .tool-card--snapshot {
    grid-column: span 12;
  }

  .tool-card--quotes,
  .tool-card--contract,
  .tool-card--compare {
    grid-column: span 12;
  }

  .decision-notebook__layout {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .decision-notebook__intro {
    position: static;
  }

  .evidence-grid {
    grid-template-columns: 1fr;
  }

  .evidence-card {
    min-height: 260px;
  }

  .rule-card,
  .rule-card--wide {
    grid-column: span 6;
  }

  .final-action__inner {
    grid-template-columns: 1fr;
  }

  .final-action__buttons {
    justify-content: flex-start;
  }

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

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  .shell {
    width: min(calc(100% - 28px), var(--shell));
  }

  .source-rail__inner {
    min-height: 44px;
    justify-content: flex-start;
    gap: 12px;
    overflow: hidden;
    white-space: nowrap;
  }

  .source-rail__inner span {
    font-size: 9px;
  }

  .source-rail__inner span:nth-child(3) {
    display: none;
  }

  .source-rail__inner span + span::before {
    left: -7px;
  }

  .site-header__inner {
    min-height: 70px;
  }

  .brand small {
    display: none;
  }

  .primary-nav {
    top: 100px;
    right: 14px;
    left: 14px;
  }

  .hero__layout {
    min-height: auto;
    gap: 30px;
    padding-block: 50px 58px;
  }

  .hero h1 {
    font-size: clamp(2.45rem, 12vw, 3.65rem);
    letter-spacing: -.05em;
  }

  .hero__lede {
    margin-top: 19px;
    font-size: 16px;
  }

  .finder {
    grid-template-columns: 1fr;
    margin-top: 24px;
  }

  .finder__field {
    min-height: 56px;
    padding: 6px 10px;
  }

  .finder__field + .finder__field {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .finder__submit {
    width: 100%;
  }

  .hero__micro {
    gap: 6px;
  }

  .hero__micro span {
    font-size: 9px;
  }

  .proof-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .proof-rail div {
    padding: 11px 9px;
  }

  .proof-rail dt {
    font-size: 7px;
  }

  .proof-rail dd {
    font-size: 9px;
  }

  .proof-rail strong {
    display: block;
    font-size: 14px;
  }

  .hero-board {
    border-radius: 8px;
  }

  .hero-board__top {
    min-height: 62px;
    padding: 12px 13px;
  }

  .hero-board__date {
    display: none;
  }

  .hero-board__body {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .hero-art {
    grid-template-rows: auto;
    padding: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .hero-art picture {
    aspect-ratio: 16 / 9;
  }

  .hero-art img {
    max-height: none;
    object-fit: contain;
  }

  .hero-art figcaption {
    display: none;
  }

  .hero-tools {
    padding: 13px;
  }

  .hero-tools__head {
    min-height: 38px;
    padding-bottom: 9px;
  }

  .hero-tools__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .hero-tools__grid a {
    min-height: 72px;
    grid-template-columns: 24px minmax(0, 1fr);
    align-content: center;
    gap: 7px;
    padding: 8px;
  }

  .hero-tools__grid a > span {
    width: 24px;
    height: 24px;
    font-size: 8px;
  }

  .hero-tools__grid strong {
    font-size: 9px;
  }

  .section {
    padding: 72px 0;
  }

  .section-heading h2,
  .same-scope h2,
  .decision-notebook h2,
  .final-action h2 {
    font-size: clamp(2.25rem, 11vw, 3.5rem);
  }

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

  .trade-tabs button {
    min-height: 74px;
  }

  .market-panel {
    padding: 13px;
  }

  .market-panel__summary {
    display: grid;
    align-items: start;
    gap: 12px;
  }

  .city-grid {
    grid-template-columns: 1fr;
  }

  .city-card {
    min-height: 184px;
  }

  .tool-bento {
    display: grid;
    grid-template-columns: 1fr;
  }

  .tool-card,
  .tool-card--license,
  .tool-card--cost,
  .tool-card--snapshot,
  .tool-card--quotes,
  .tool-card--contract,
  .tool-card--compare,
  .tool-card--emergency,
  .tool-card--maintenance {
    min-height: 270px;
    grid-column: 1;
  }

  .tool-card--large {
    min-height: 340px;
  }

  .tool-card__meta {
    margin-bottom: 21px;
  }

  .section-action {
    align-items: stretch;
    flex-direction: column;
  }

  .same-scope__panel {
    gap: 44px;
    padding: 28px 18px 32px;
    border-radius: 8px;
  }

  .scope-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .scope-actions .button {
    width: 100%;
  }

  .decision-notebook__intro p {
    font-size: 14px;
  }

  .question-list summary {
    font-size: 12px;
  }

  .rules-bento {
    grid-template-columns: 1fr;
  }

  .rule-card,
  .rule-card--wide {
    min-height: 240px;
    grid-column: 1;
  }

  .final-action__buttons {
    display: grid;
    grid-template-columns: 1fr;
  }

  .site-footer {
    padding-top: 52px;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .site-footer__brand {
    grid-column: auto;
  }

  .site-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .mobile-dock {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-header);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    background: var(--pacific);
    border-top: 1px solid rgba(255, 255, 255, .17);
  }

  .mobile-dock a {
    min-height: 56px;
    display: grid;
    align-content: center;
    gap: 2px;
    padding: 7px 10px;
    color: var(--white);
    background: var(--pacific-2);
    border-radius: 8px;
  }

  .mobile-dock a:last-child {
    color: var(--pacific);
    background: var(--aqua);
  }

  .mobile-dock span {
    font-size: 7px;
    font-weight: 700;
  }

  .mobile-dock strong {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}