.hp-page {
  --hp-line: var(--rule);
  --hp-action: var(--blue);
  --hp-ink: var(--ink);
  --hp-muted: var(--secondary);
  --hp-section-gap: clamp(2rem, 4vw, 3.5rem);
  color: var(--hp-ink);
}
.hp-page h2, .hp-page h3, .hp-page h4 { color: var(--hp-ink); line-height: 1.2; }
.hp-page h2 { margin: 0; font-size: var(--section-title); letter-spacing: -.032em; }
.hp-page h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); letter-spacing: -.02em; }
.hp-page p { color: var(--hp-muted); }
.hp-page a:focus-visible, .hp-page summary:focus-visible { outline: 3px solid var(--hp-action); outline-offset: 3px; }

.hp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  padding-block: clamp(2.25rem, 4.8vw, 4rem);
}
.hp-intro h1 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(2.35rem, 1.65rem + 2.8vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.1;
  text-wrap: balance;
}
.hp-intro > p:not(.page-updated) { max-width: 51ch; margin: 1.2rem 0; font-size: clamp(1.05rem, 1.5vw, 1.21rem); line-height: 1.55; }
.hp-hero-actions { margin-top: 1.4rem; }
.hp-primary {
  display: inline-flex; min-height: var(--control-height);
  align-items: center; justify-content: center; gap: .65rem;
  padding: .6rem 1.15rem; border: 1px solid var(--hp-action); border-radius: var(--control-radius);
  background: var(--hp-action); color: var(--night-on-action, white);
  font: inherit; font-weight: 650; line-height: 1.35; text-decoration: none;
}
.hp-primary:hover { background: var(--blue-hover); color: var(--night-on-action, white); }
.hp-text-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 620; }
.hp-example {
  min-width: 0; margin: 0;
  border: 1px solid var(--blue-mid); border-radius: var(--panel-radius);
  background: var(--surface);
}
.hp-example-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: 11px 11px 0 0; background: var(--night-banner, var(--navy)); color: white;
}
.hp-example-title { display: grid; gap: .3rem; }
.hp-example-context { color: #d6e6ff; font-size: .85rem; }
.hp-example-title strong { color: white; font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 650; letter-spacing: -.03em; line-height: 1.2; }
.hp-house { width: clamp(4rem, 7.5vw, 6.8rem); height: auto; flex: none; color: #c2d9ff; }
.hp-comparison { margin: 0; padding: clamp(1rem,2vw,1.5rem); }
.hp-comparison dt, .hp-comparison dd { margin: 0; }
.hp-comparison-row, .hp-difference { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; font-size: .94rem; }
.hp-comparison-row {
  padding-bottom: .6rem;
  background: linear-gradient(var(--hp-action), var(--hp-action)) left bottom / 100% 4px no-repeat;
}
.hp-comparison-row dt { color: var(--hp-muted); }
.hp-comparison-row dd { font-weight: 650; }
.hp-comparison-row.hp-limit {
  margin-top: .8rem;
  background: linear-gradient(var(--night-chart, #5678b1), var(--night-chart, #5678b1)) left bottom / 94.11765% 4px no-repeat,
    linear-gradient(var(--night-track, #e0e8f3), var(--night-track, #e0e8f3)) left bottom / 100% 4px no-repeat;
}
.hp-comparison dd { font-variant-numeric: tabular-nums; }
.hp-difference { margin-top: .85rem; padding-top: .7rem; border-top: 1px solid var(--hp-line); }
.hp-difference dt, .hp-difference dd { font-weight: 650; }
.hp-difference dd { font-size: clamp(1.35rem, 2.4vw, 1.8rem); letter-spacing: -.035em; color: var(--hp-action); line-height: 1.1; }

.hp-directory, .hp-review, .hp-renewal, .hp-state-guide, .hp-faq, .hp-method-note {
  padding-block: var(--hp-section-gap);
  border-top: 1px solid var(--hp-line);
}
.hp-directory { scroll-margin-top: 1rem; }
.hp-directory-heading, .hp-section-heading { max-width: 70ch; }
.hp-directory-heading p, .hp-section-heading p { margin: .65rem 0 0; }
.hp-catalog {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  align-items: start; gap: clamp(2rem, 6vw, 5.25rem); margin-top: clamp(1.25rem, 2.5vw, 2rem);
}
.hp-catalog-column { min-width: 0; }
.hp-catalog section + section { margin-top: 1.25rem; }
.hp-catalog h3 { margin: 0; padding-bottom: .65rem; border-bottom: 2px solid var(--blue-mid); }
.hp-catalog a { display: block; min-height: 44px; padding: .7rem 0; border-bottom: 1px solid var(--hp-line); text-decoration: none; }
.hp-catalog strong { display: block; color: var(--hp-action); font-size: 1.03rem; font-weight: 650; line-height: 1.35; }
.hp-catalog small { display: block; margin-top: .15rem; color: var(--hp-muted); font-size: .91rem; line-height: 1.45; }
.hp-catalog a:hover strong { text-decoration: underline; text-underline-offset: .2em; }

.hp-bundle-tool {
  min-width: 0; margin-top: 1.5rem; padding: clamp(1rem, 2.8vw, 2rem);
  border: 1px solid var(--hp-line); border-radius: var(--panel-radius); background: var(--surface);
  scroll-margin-top: 1rem;
}
.hp-bundle-tool h3 { margin: 0; }
.hp-bundle-tool p { margin: .65rem 0; }
.hp-bundle-offers { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(1.15rem,3vw,2rem); margin-block: 1.25rem; }
.hp-bundle-offers fieldset { min-width: 0; border: 0; padding: 0; margin: 0; }
.hp-bundle-offers legend { padding: 0; margin: 0 0 .5rem; color: var(--hp-action); font-size: 1.08rem; font-weight: 680; }
.hp-bundle-offers label { display: block; font-size: .9rem; font-weight: 600; margin: .5rem 0 .2rem; }
.hp-bundle-offers input,.hp-bundle-offers select {
  display: block; width: 100%; min-height: var(--control-height); padding: .45rem .65rem;
  border: 1px solid var(--control-border); border-radius: var(--control-radius);
  background: var(--surface); color: var(--hp-ink); font: inherit; font-size: 1rem;
}
.hp-bundle-error { color: var(--error); font-size: .875rem; }
.hp-bundle-match { display: flex; gap: .6rem; max-width: 76ch; align-items: start; margin: 0 0 1rem; cursor: pointer; }
.hp-bundle-match input, .hp-checklist input { width: 1.15rem; height: 1.15rem; flex: none; margin: .2rem 0 0; accent-color: var(--hp-action); }
.hp-bundle-tool #bundle-result:not(:empty) { margin-top: 1.25rem; padding: 1rem 1.15rem; border-inline-start: 3px solid var(--hp-action); background: var(--blue-soft); }
.hp-bundle-tool h4, .hp-bundle-tool dl { margin: 0; }
.hp-bundle-tool dl > div { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .3rem; }
.hp-bundle-tool dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 650; }
.hp-bundle-tool .hp-bundle-method { font-size: .91rem; margin-bottom: 0; }
.hp-review-extras { margin-top: 1rem; }
.hp-page :is(.hp-review-extra, .hp-quote-details, .hp-method-list, .hp-faq-items details) { border-bottom: 1px solid var(--hp-line); }
.hp-page :is(.hp-review-extra, .hp-quote-details, .hp-method-list, .hp-faq-items details) > summary {
  min-height: 44px; padding: .9rem 0; color: var(--hp-ink); font-size: 1rem; font-weight: 630; line-height: 1.45;
}
.hp-page summary::marker { color: var(--hp-action); }
.hp-page details[open] > summary { color: var(--hp-action); }
.hp-checklist { min-width: 0; border: 0; margin: .4rem 0 1rem; padding: 0; }
.hp-checklist legend { font-weight: 650; padding: 0; margin: 0 0 .5rem; }
.hp-check-items { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem clamp(1.5rem,4vw,3rem); }
.hp-checklist label { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: .65rem; padding-top: .5rem; color: var(--hp-muted); cursor: pointer; }
.hp-checklist label strong { display: block; color: var(--hp-ink); font-weight: 650; }
.hp-check-source { margin: .25rem 0 0 1.9rem; font-size: .87rem; }
.hp-bundle-example { padding-block: .3rem 1rem; }
.hp-bundle-example h3 { margin: 0 0 .5rem; }

.hp-case-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: clamp(1.5rem,5vw,4.5rem); margin-top: 1.5rem; }
.hp-case h3 { margin: 0; }
.hp-case p, .hp-bundle-example p, .hp-quote-intro p { margin: .65rem 0; }
.hp-case-table { width: 100%; margin: 1rem 0; border-collapse: collapse; font-size: .9rem; line-height: 1.45; font-variant-numeric: tabular-nums; }
.hp-case-table caption { padding-bottom: .5rem; text-align: left; color: var(--hp-muted); font-size: .875rem; }
.hp-case-table th, .hp-case-table td { padding: .6rem .5rem; border-bottom: 1px solid var(--hp-line); text-align: left; vertical-align: top; }
.hp-case-table thead th { color: var(--ink); background: var(--blue-soft); font-size: .85rem; font-weight: 650; }
.hp-case-table tbody th { font-weight: 600; }
.hp-case-table tfoot td { color: var(--hp-muted); }
.hp-quote-details { margin-top: 1.25rem; border-top: 1px solid var(--hp-line); }
.hp-quote-story { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; gap: clamp(1.5rem,4vw,3rem); padding: .6rem 0 1.2rem; }
.hp-quote-story h3, .hp-quote-table { margin: 0; }

.hp-state-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(1.5rem,5vw,4.5rem); align-items: start; margin-top: 1.5rem; }
.hp-state-grid section { min-width: 0; }
.hp-state-grid h3 { margin: 0; }
.hp-data-intro p, .hp-survey p { margin: .7rem 0; }
.hp-data-values, .hp-survey-profile { padding-top: 1rem; margin-top: 1rem; border-top: 2px solid var(--blue-mid); }
.hp-data-values .hp-data-scope, .hp-survey-profile h4 { margin: 0 0 .35rem; color: var(--navy); font-size: .95rem; font-weight: 660; }
.hp-data-values dl, .hp-survey-profile dl { margin: 0; }
.hp-data-values dl > div, .hp-survey-profile dl > div { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: .5rem 1rem; align-items: baseline; padding-block: .65rem; border-bottom: 1px solid var(--hp-line); }
.hp-data-values dt, .hp-survey-profile dt { color: var(--hp-muted); }
.hp-data-values dd { margin: 0; color: var(--navy); font-size: clamp(1.3rem,2.35vw,1.8rem); font-weight: 675; font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
.hp-data-values dd span { font-size: .83rem; font-weight: 500; letter-spacing: normal; white-space: nowrap; }
.hp-survey-profile dd { margin: 0; color: var(--hp-ink); }
.hp-data-values > a { display: inline-flex; align-items: center; min-height: 44px; margin-top: .35rem; font-size: .87rem; }
.hp-faq-items { display: grid; align-items: start; gap: 1.5rem clamp(2rem,6vw,5.25rem); margin-top: 1.4rem; }
.hp-faq-items h3 { margin: 0; padding-bottom: .65rem; border-bottom: 2px solid var(--blue-mid); }
.hp-faq-items p { max-width: var(--reading-measure); margin: 0 0 1rem; line-height: var(--reading-leading); }
.hp-method-copy { margin-block: 1rem; }
.hp-method-copy p { margin: .4rem 0 .8rem; }
.hp-method-list { border-top: 1px solid var(--hp-line); }
.hp-method-list nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 1.5rem; padding-bottom: 1rem; }
.hp-method-list a { display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--hp-line); }

@media screen and (min-width: 681px) {
  .hp-directory-heading, .hp-review > .hp-section-heading, .hp-renewal > .hp-section-heading {
    display: grid; grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr);
    align-items: start; gap: 1rem clamp(1.5rem,5vw,4.5rem); max-width: none;
  }
  .hp-directory-heading p, .hp-review > .hp-section-heading p, .hp-renewal > .hp-section-heading p { margin: 0; }
  .hp-bundle-example { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .1rem clamp(1.5rem,4vw,3rem); align-items: start; }
  .hp-bundle-example h3 { grid-column: 1 / -1; }
  .hp-bundle-example p { grid-column: 1; }
  .hp-bundle-example table { grid-column: 2; grid-row: 2 / span 3; margin-top: .65rem; }
  .hp-faq-items { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hp-method-note {
    display: grid;
    grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr);
    align-items: start;
    gap: 0 clamp(1.5rem,5vw,4.5rem);
  }
  .hp-method-copy { margin-top: 0; }
  .hp-method-copy > p:first-child { margin-top: 0; }
  .hp-method-list { grid-column: 2; }
}
@media screen and (min-width: 960px) {
  .hp-bundle-tool {
    display: grid; grid-template-columns: minmax(0,.74fr) minmax(0,1.26fr);
    grid-template-areas: "heading fields" "intro fields" "method fields" "result result" "stale stale";
    grid-template-rows: auto auto 1fr auto auto; column-gap: clamp(1.5rem,4vw,3.5rem); align-items: start;
  }
  .hp-bundle-tool h3 { grid-area: heading; }
  .hp-bundle-tool h3 + p { grid-area: intro; }
  .hp-bundle-tool form { grid-area: fields; min-width: 0; }
  .hp-bundle-tool .hp-bundle-offers { margin-top: 0; }
  .hp-bundle-tool .hp-bundle-method { grid-area: method; padding-top: 1rem; border-top: 1px solid var(--hp-line); margin: 0; }
  .hp-bundle-tool #bundle-result { grid-area: result; }
  .hp-bundle-tool #bundle-stale { grid-area: stale; }
}
@media (max-width: 780px) {
  .hp-hero { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 1.4rem; }
  .hp-house { width: 3.4rem; }
}
@media (max-width: 680px) {
  .hp-hero { grid-template-columns: minmax(0,1fr); gap: 1.45rem; padding-block: 1.85rem; }
  .hp-hero-actions { margin-top: .85rem; }
  .hp-example-heading { padding: .75rem .95rem; }
  .hp-example-context { font-size: .78rem; }
  .hp-example-title { gap: .15rem; }
  .hp-example-title strong { font-size: 1.05rem; }
  .hp-house { width: 3.4rem; }
  .hp-comparison { padding: .7rem .95rem; }
  .hp-comparison-row { font-size: .86rem; padding-bottom: .3rem; }
  .hp-comparison-row.hp-limit { margin-top: .45rem; }
  .hp-difference { margin-top: .6rem; padding-top: .5rem; }
  .hp-catalog, .hp-state-grid, .hp-case-grid, .hp-quote-story, .hp-check-items { grid-template-columns: minmax(0,1fr); gap: 1.5rem; }
  .hp-catalog { margin-top: 1.3rem; }
  .hp-catalog a { padding-block: .65rem; }
  .hp-bundle-offers { grid-template-columns: minmax(0,1fr); }
  .hp-state-grid > section + section, .hp-case + .hp-case { padding-top: 1.35rem; border-top: 1px solid var(--hp-line); }
  .hp-case-table th, .hp-case-table td { padding: .5rem .35rem; }
}
@media (max-width: 420px) {
  .hp-method-list nav { grid-template-columns: minmax(0,1fr); }
  .hp-data-values dl > div { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); }
  .hp-data-values dd { font-size: 1.25rem; }
}
@media print {
  .hp-hero, .hp-catalog, .hp-case-grid, .hp-state-grid, .hp-bundle-offers { display: block; }
  .hp-hero-actions, .hp-bundle-tool button { display: none; }
  .hp-example { max-width: 32rem; margin-top: 1rem; break-inside: avoid; }
  .hp-example-heading { background: white; color: #101c30; }
  .hp-example-title strong, .hp-example-context { color: #101c30; }
  .hp-house { display: none; }
  .hp-catalog-column, .hp-case-table tr, .hp-checklist label, .hp-faq-items details { break-inside: avoid; }
}