* {
  box-sizing: border-box;
}
:root {
  --eyebrow-gap: 0.875rem;
  --header-height: 68px;
}
[hidden] {
  display: none !important;
}
#state-field[hidden] {
  display: none !important;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 1rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
h1,
h2,
h3,
p,
ul,
ol,
dl,
dd {
  margin: 0;
}
h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: var(--display-weight);
  line-height: 1.05;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.5rem, 4.2vw + 1rem, 4rem);
  letter-spacing: var(--display-track);
}
h2 {
  font-size: clamp(1.875rem, 1.8vw + 0.9rem, 2.5rem);
  letter-spacing: var(--display-track-sm);
}
h3 {
  font-size: 1.125rem;
  letter-spacing: var(--display-track-sm);
  line-height: 1.3;
}
a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
}
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.on-plate :focus-visible {
  outline-color: var(--focus-ring);
}
.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  background: var(--text);
  color: var(--surface);
  padding: 0.75rem 1rem;
  font-weight: 600;
  z-index: 20;
}
.skip:focus {
  top: var(--gutter);
}
.sample-note {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.8125rem;
  padding: 0.5rem var(--gutter);
  text-align: center;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.nowrap {
  white-space: nowrap;
}

/* The grid: 12 columns, one gutter, every section on it */
.wrap {
  width: min(1100px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 1.75rem;
}
.head-title {
  grid-column: 1 / -1;
}
.head-intro {
  grid-column: 1 / -1;
  color: var(--muted);
  max-width: none;
  margin-top: -0.9rem;
}
.full {
  grid-column: 1 / -1;
}
.half {
  grid-column: span 6;
}
.two-thirds {
  grid-column: span 8;
}
.third {
  grid-column: span 4;
}
.quarter {
  grid-column: span 3;
}
.hero-copy {
  grid-column: 1 / 8;
  display: grid;
  gap: 1.25rem;
  align-content: start;
}
.hero-offer {
  grid-column: 8 / 13;
}
.hero-copy.c6 {
  grid-column: 1 / 7;
}
.hero-offer.c6 {
  grid-column: 7 / 13;
}
.sec > .wrap {
  padding-block: clamp(3rem, 6vw, 5rem);
}
.hero > .wrap {
  padding-block: clamp(3rem, 7vw, 6rem);
  align-items: center;
}

/* Product hierarchy: a quiet offer, generous reading space, and a focused form. */
.hero-copy .eyebrow {
  margin-bottom: 0.25rem;
}
.offer-label {
  font-size: 0.9375rem;
  font-weight: 600;
}
.offer-price {
  display: grid;
  gap: 0.25rem;
}
.offer-price strong {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: clamp(3.5rem, 5vw, 4.5rem);
  letter-spacing: var(--display-track);
  line-height: 1;
}
.offer-price span {
  color: var(--muted);
  font-size: 0.9375rem;
}
.offer-benefits.plain-list {
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
  margin-top: 0;
  font-size: 0.9375rem;
}
.hero-offer .btn {
  margin-top: 0.25rem;
}
#why .half {
  display: grid;
  gap: 0.75rem;
  align-content: start;
}
#why .half p {
  color: var(--muted);
}
#checkout {
  background: var(--surface-2);
}
#checkout .intake-form {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
@media (min-width: 900px) {
  .split-section .head-title,
  .split-section .head-intro,
  .split-section .note {
    grid-column: 1 / 5;
  }
  .split-section .head-title {
    grid-row: 1;
  }
  .split-section .head-intro {
    grid-row: 2;
    margin-top: 0;
  }
  /* A second intro paragraph (Pricing, since the 2026-09-18 words) takes its own row and the
     right-hand column spans it; otherwise both paragraphs land in row 2 and overprint. */
  .split-section .head-intro + .head-intro {
    grid-row: 3;
  }
  .split-section .head-intro + .head-intro ~ .note,
  .split-section .head-intro + .head-intro ~ .after {
    grid-row: 4;
  }
  .split-section .head-intro + .head-intro ~ .record,
  .split-section .head-intro + .head-intro ~ .rows,
  .split-section .head-intro + .head-intro ~ .faq {
    grid-row: 1 / span 5;
  }
  .split-section > .wrap:has(.head-intro + .head-intro) {
    grid-template-rows: auto auto auto auto 1fr;
  }
  .split-section .note,
  #checkout .after {
    grid-column: 1 / 5;
    grid-row: 3;
  }
  .split-section .record,
  .split-section .rows,
  .split-section .faq,
  #checkout .intake-form {
    grid-column: 5 / -1;
    grid-row: 1 / span 4;
  }
  .split-section > .wrap {
    align-items: start;
    grid-template-rows: auto auto auto 1fr;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .checkout-step:not([hidden]) {
    animation: step-enter var(--motion) both;
  }
  @keyframes step-enter {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* Header and footer, both on the grid, the mark never reversed.
   Secondary pages wrap the header grid in .wrap; that wrapper must take the
   whole row of the header's own grid or everything inside it stacks. */
.site-header > .wrap {
  grid-column: 1 / -1;
  align-items: center;
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--line);
  row-gap: 0.5rem;
}
.brand {
  grid-column: 1 / 4;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--primary);
  justify-self: start;
}
.logo {
  width: 32px;
  height: 32px;
  display: block;
  flex: none;
}
.logo .box {
  fill: var(--mark-box);
}
.logo .glyph {
  stroke: var(--mark-glyph);
}
.wordmark {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: 1.375rem;
  letter-spacing: var(--display-track-sm);
  line-height: 1;
  color: var(--brand-a);
}
.wordmark b {
  color: var(--brand-b);
  font-weight: inherit;
}
.site-footer > .wrap {
  border-top: 1px solid var(--line);
  padding-block: 1.75rem 2.5rem;
  row-gap: 1rem;
  align-items: center;
}
.site-footer nav {
  grid-column: 5 / 13;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 1.25rem;
}
.site-footer nav a {
  color: var(--text);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 0.9375rem;
  transition:
    color var(--motion),
    text-decoration-color var(--motion);
}
.site-footer .legal {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  font-size: 0.8125rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}
.site-footer .legal p {
  max-width: 80ch;
}

/* Buttons and fields */
.btn,
.primary-button,
.secondary-button,
.buyer-job-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  width: fit-content;
  flex-shrink: 0;
  gap: 0.5rem;
  padding: 0.75rem 1.375rem;
  border-radius: var(--r-btn);
  border: 2px solid transparent;
  font: 600 0.9375rem/1.2 var(--sans);
  text-align: center;
  text-wrap: balance;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--motion),
    color var(--motion),
    border-color var(--motion),
    box-shadow var(--motion),
    transform var(--motion);
}
.btn-action,
.primary-button {
  background: var(--action);
  color: var(--action-text);
}
.btn-action:hover,
.primary-button:hover {
  background: var(--action-hover);
}
.btn[aria-busy="true"] {
  cursor: progress;
  opacity: 0.78;
}
.btn:disabled,
.primary-button:disabled,
.secondary-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.btn-block {
  width: 100%;
}
.field {
  display: grid;
  gap: 0.375rem;
  align-content: start;
}
.field label,
.field legend,
.group-title {
  font-weight: 600;
  font-size: 0.9375rem;
}
.help {
  color: var(--muted);
  font-size: 0.875rem;
}
select,
input[type="text"],
input[type="email"],
input[type="tel"] {
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 0.875rem;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--control-line);
  border-radius: var(--r);
  transition:
    border-color var(--motion),
    box-shadow var(--motion);
}
select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-repeat: no-repeat;
  background-position:
    calc(100% - 1.125rem) calc(50% - 0.125rem),
    calc(100% - 0.875rem) calc(50% - 0.125rem);
  background-size:
    0.375rem 0.375rem,
    0.375rem 0.375rem;
  padding-right: 2.5rem;
}
select:has(option:checked[value=""]) {
  color: var(--muted);
  font-weight: 400;
}
select option[value=""] {
  color: var(--muted);
  font-weight: 400;
}
select:focus,
input:focus {
  border-color: var(--primary);
}
/* A slimmer ring on text controls and selects so it clears the label above
   (Ben, 2026-09-17: "the border is too close to the input label"). */
select:focus-visible,
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="tel"]:focus-visible {
  outline-width: 2px;
  outline-offset: 0;
}
fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
legend {
  padding: 0;
  margin-bottom: 0.375rem;
}
.choice {
  display: grid;
  gap: 0.5rem;
}
.choice label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  cursor: pointer;
}
.choice input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--primary);
  flex: none;
}
.check {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  min-height: 44px;
}
.check input {
  width: 20px;
  height: 20px;
  margin: 0.2rem 0 0;
  accent-color: var(--primary);
  flex: none;
}

/* Offer card (hero) and price rows */
.offer {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: 1.25rem;
  align-self: start;
  box-shadow: 0 12px 40px -24px color-mix(in srgb, var(--text) 18%, transparent);
}
.rows {
  display: grid;
}
.rows > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.65rem 0;
  border-top: 1px solid var(--line);
}
.rows > div > span:last-child {
  font-weight: 600;
  white-space: nowrap;
}
.rows small {
  display: block;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 400;
}
.rows .total {
  border-top: 2px solid var(--rule);
  font-weight: 700;
  font-size: 1.25rem;
}
.rows .total > span:last-child {
  font-weight: 700;
}
.fine {
  color: var(--muted);
  font-size: 0.875rem;
  text-wrap: balance;
}
.ca-note {
  border-left: 3px solid var(--danger);
  padding-left: 0.75rem;
  font-size: 0.9375rem;
}

/* Record entry, lists, notes, steps */
.record {
  display: grid;
  border-top: 2px solid var(--rule);
}
.record > div {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) 2fr;
  gap: 0.25rem 1.5rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}
.record dt {
  color: var(--muted);
  font-size: 0.9375rem;
}
.record dd {
  font-weight: 600;
}
.note {
  background: var(--tint);
  border-radius: var(--r-lg);
  padding: 1.25rem;
  display: grid;
  gap: 0.5rem;
  align-self: start;
}
.note p,
.note li {
  color: var(--text);
}
.plain-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  margin-top: 0.75rem;
}
.plain-list li {
  padding-left: 1.75rem;
  position: relative;
}
.plain-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.8rem;
  height: 0.45rem;
  border-left: 3px solid var(--primary);
  border-bottom: 3px solid var(--primary);
  transform: rotate(-45deg);
}
.plain-list.not li {
  color: var(--muted);
}
.plain-list.not li::before {
  border: 0;
  height: 3px;
  width: 0.9rem;
  background: var(--muted);
  top: 0.75em;
  transform: none;
}
.step {
  display: grid;
  gap: 0.375rem;
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
  align-content: start;
}
.step .n {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--primary);
  letter-spacing: var(--display-track-sm);
}
.step p {
  color: var(--muted);
  font-size: 0.9375rem;
}
.after {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  counter-reset: a;
}
.after li {
  counter-increment: a;
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.5rem;
  font-size: 0.9375rem;
}
.after li::before {
  content: counter(a) ".";
  font-weight: 700;
  color: var(--primary);
}

/* Order form on a subgrid so its fields sit on the page columns */
.intake {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: 1.25rem;
  align-content: start;
}
@supports not (grid-template-columns: subgrid) {
  .intake {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
}
.f-full {
  grid-column: 1 / -1;
}
.f-half {
  grid-column: span 6;
}
.f-third {
  grid-column: span 3;
}
.f-two {
  grid-column: span 6;
}
.group {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: 1.25rem;
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
}
@supports not (grid-template-columns: subgrid) {
  .group {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
}
.note.full .after {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem var(--gutter);
}
.note.full .after li {
  grid-template-columns: 1.5rem 1fr;
}
.group .group-title {
  grid-column: 1 / -1;
  font-size: 1.0625rem;
}

/* FAQ */
.faq details {
  border-top: 1px solid var(--line);
}
.faq details:last-child {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 1rem 0;
  font-weight: 600;
  min-height: 48px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after,
.question-list summary::after {
  content: "";
  width: 1.0625rem;
  height: 1.0625rem;
  border-right: 2px solid var(--text);
  border-bottom: 2px solid var(--text);
  transform: rotate(45deg);
  transition: transform var(--motion);
  flex: none;
  margin-right: 0.25rem;
}
.faq details[open] summary::after,
.question-list details[open] summary::after {
  transform: rotate(225deg);
}
.faq .answer {
  padding: 0 0 1.25rem;
  color: var(--muted);
  max-width: 80ch;
}
.faq .answer,
.question-list details > :not(summary) {
  overflow: hidden;
  transition:
    height var(--motion),
    padding-top var(--motion),
    padding-bottom var(--motion),
    opacity var(--motion),
    transform var(--motion);
}
.contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  align-items: baseline;
  margin-top: -0.5rem;
}
.contact h3 {
  margin-right: 0.25rem;
}
@media (max-width: 899px) {
  .grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .head-title,
  .head-intro,
  .half,
  .two-thirds,
  .hero-copy,
  .hero-offer,
  .hero-copy.c6,
  .hero-offer.c6,
  .intake,
  .brand,
  .site-footer nav {
    grid-column: 1 / -1;
  }
  .third,
  .quarter {
    grid-column: span 3;
  }
  .site-footer nav {
    justify-content: flex-start;
  }
  .f-half,
  .f-third {
    grid-column: span 3;
  }
  .f-two {
    grid-column: 1 / -1;
  }
  .note.full .after {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 599px) {
  :root {
    --gutter: 16px;
  }
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 1.25rem;
  }
  .third,
  .quarter,
  .f-half,
  .f-two {
    grid-column: 1 / -1;
  }
  .f-third {
    grid-column: span 2;
  }
  .head-intro {
    margin-top: -0.5rem;
  }
  .note.full .after {
    grid-template-columns: 1fr;
  }
  .record > div {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Theme menu (Light / Dark / System) */
.header-actions {
  position: relative;
}
.header-actions {
  grid-column: 11 / -1;
  grid-row: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.25rem;
}
.theme-toggle {
  display: inline-grid;
  min-width: 44px;
  min-height: 44px;
  margin-left: 0.5rem;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition:
    background-color var(--motion),
    color var(--motion),
    border-color var(--motion),
    box-shadow var(--motion),
    transform var(--motion);
}
.theme-toggle:hover {
  background: var(--tint);
}
.theme-toggle:focus-visible {
  outline-color: var(--focus-ring);
  outline-offset: 2px;
}
.theme-icon {
  display: block;
  width: 22px;
  height: 22px;
}
.theme-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 11rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: 0 0.75rem 1.5rem -1rem
    color-mix(in srgb, var(--text) 45%, transparent);
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity var(--motion),
    transform var(--motion);
}
.theme-menu[data-open="true"] {
  opacity: 1;
  transform: translateY(0);
}
.theme {
  display: grid;
  gap: 2px;
  border-radius: var(--r);
  padding: 2px;
  margin: 0;
  border: 0;
}
.theme label {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0.3rem 0.65rem;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--text);
}
.theme label:has(input:checked) {
  background: var(--tint);
  color: var(--primary-deep);
}
.theme label:has(input:checked)::after {
  content: "✓";
  margin-left: auto;
  font-weight: 700;
}
.theme label:has(input:focus-visible) {
  outline-color: var(--focus-ring);
  outline-offset: 2px;
}
.theme input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.legal-review-pending {
  display: inline-flex;
  margin: 0 0 1.5rem;
  padding: 0.35rem 0.625rem;
  border-radius: var(--r);
  background: var(--tint);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Progress timeline: one continuous line behind the markers, markers masked with the ground */
.timeline {
  --tl-bg: var(--ground);
  list-style: none;
  display: grid;
  position: relative;
  padding: 0;
  margin: 0;
}
.timeline::before {
  content: "";
  position: absolute;
  left: calc(0.625rem - 1px);
  top: 1rem;
  bottom: 1rem;
  width: 2px;
  background: var(--line);
}
.timeline li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  column-gap: 0.875rem;
  row-gap: 0.1rem;
  padding: 0.55rem 0;
}
.timeline li::before {
  content: "";
  grid-row: 1 / span 2;
  width: 1rem;
  height: 1rem;
  margin-top: 0.3rem;
  justify-self: center;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--tl-bg);
  box-shadow: 0 0 0 3px var(--tl-bg);
  position: relative;
  z-index: 1;
}
.timeline li[data-state="complete"]::before {
  background: var(--primary);
  border-color: var(--primary);
}
.timeline li[data-state="current"]::before {
  border-color: var(--primary);
  box-shadow:
    0 0 0 3px var(--tint),
    0 0 0 5px var(--tl-bg);
}
.timeline li[data-state="skipped"]::before {
  border-style: dashed;
}
.timeline li[data-state="skipped"],
.timeline li[data-state="pending"] {
  color: var(--muted);
}
.timeline b {
  font-weight: 600;
}
.timeline span {
  grid-column: 2;
  color: var(--muted);
  font-size: 0.9375rem;
}
.ex-body .timeline,
.status-card .timeline,
.card .timeline {
  --tl-bg: var(--surface);
}

body {
  padding-bottom: 5.5rem;
}
.offer.plate {
  background: var(--plate);
  border-color: var(--line);
  color: var(--on-plate);
}
.offer.plate .field label,
.offer.plate legend {
  color: var(--on-plate);
}
.offer.plate .rows > div {
  border-top-color: color-mix(in srgb, var(--on-plate) 14%, transparent);
}
.offer.plate .rows .total {
  border-top-color: var(--on-plate);
}
.offer.plate .rows small,
.offer.plate .fine {
  color: color-mix(in srgb, var(--on-plate) 80%, transparent);
}
.offer.plate .ca-note {
  border-left-color: var(--action);
}
.segment {
  grid-template-columns: 1fr 1fr;
  background: color-mix(in srgb, var(--on-plate) 14%, transparent);
  border-radius: 6px;
  padding: 4px;
  gap: 4px;
}
.segment label {
  position: relative;
  justify-content: center;
  text-align: center;
  padding: 0.5rem 0.6rem;
  border-radius: 4px;
  color: var(--on-plate);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.25;
}
.segment input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.offer.plate .segment label:has(input:checked) {
  background: var(--on-plate);
  color: var(--plate);
  font-weight: 600;
}
.segment label:has(input:focus-visible) {
  outline-color: var(--focus-ring);
  outline-offset: 2px;
}
.hero .lede {
  font-size: 1.1875rem;
  max-width: 60ch;
}
.hero .sub {
  color: var(--muted);
  max-width: var(--measure);
}
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 0.625rem var(--gutter)
    calc(0.625rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  z-index: 10;
  transition:
    background-color var(--motion),
    border-color var(--motion),
    transform var(--motion);
}
.sticky-cta .sum {
  display: grid;
  line-height: 1.2;
}
.sticky-cta .sum strong {
  font-size: 1.125rem;
}
.sticky-cta .sum span {
  color: var(--muted);
  font-size: 0.8125rem;
}
.sticky-cta .btn {
  min-height: 44px;
  padding-inline: 1rem;
}
@media (min-width: 700px) {
  body {
    padding-bottom: 0;
  }
  .sticky-cta {
    display: none;
  }
}

:root {
  --gutter: 24px;
  --measure: 60ch;
  --r: 10px;
  --r-lg: 20px;
  --r-btn: 999px;
  --control-height: 48px;
  --sans: "Avenir Next", Avenir, "Instrument Sans", Arial, sans-serif;
  --display: var(--sans);
  --display-weight: 600;
  --display-track: -0.04em;
  --display-track-sm: -0.025em;
  --motion-duration: 220ms;
  --motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --motion: var(--motion-duration) var(--motion-ease);
}

/* Temporary contract aliases retained while the homepage moves to the shared shell. */
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  background: var(--text);
  color: var(--surface);
  padding: 0.75rem 1rem;
  font-weight: 600;
  z-index: 20;
}
.skip-link:focus {
  top: var(--gutter);
}
.field-error[data-visible="true"] {
  display: flex;
  padding-left: 0.25rem;
  color: var(--danger);
}
.field-error {
  display: none;
}
[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: inset 0 0 0 1px var(--danger);
}

/* Served-page contract aliases: preserve the existing DOM while applying the shared system. */
button,
input,
select,
textarea {
  font: inherit;
}
.section-shell {
  width: min(1100px, calc(100% - (2 * var(--gutter))));
  margin-inline: auto;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  min-height: var(--header-height);
  padding: 0 max(1.5rem, calc((100% - 1100px) / 2));
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: blur(12px);
}
.site-header > .brand {
  position: relative;
  z-index: 43;
  flex: none;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--r);
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color var(--motion),
    color var(--motion),
    text-decoration-color var(--motion);
}
.nav-links a:hover {
  background: var(--tint);
}
.header-actions {
  position: relative;
  z-index: 43;
  display: flex;
  align-items: center;
  flex: none;
  gap: 0.75rem;
  margin-left: 0.5rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--line);
}
.header-actions .nav-start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  border: 2px solid transparent;
  border-radius: var(--r-btn);
  background: var(--action);
  color: var(--action-text);
  font-weight: 600;
  padding-inline: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--motion),
    color var(--motion);
}
.header-actions .nav-start:hover {
  background: var(--action-hover);
}
.site-header .theme-toggle {
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  border-color: transparent;
  background: transparent;
}
.site-header .theme-toggle:hover {
  border-color: var(--line);
  background: var(--tint);
}
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition:
    background-color var(--motion),
    color var(--motion),
    border-color var(--motion),
    box-shadow var(--motion),
    transform var(--motion);
}
.nav-toggle:hover {
  border-color: var(--line);
  background: var(--tint);
}
.nav-toggle-icon {
  width: 24px;
  height: 24px;
}
.nav-toggle-icon--close {
  display: none;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon--menu {
  display: none;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon--close {
  display: block;
}
.drawer-foot,
.nav-scrim {
  display: none;
}
.drawer-theme-form,
.desktop-theme-form {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.hero.section-shell,
.process.section-shell,
.pricing.section-shell,
.checkout.section-shell,
.buyer-job-choice.section-shell,
.questions.section-shell {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 1.75rem;
  padding-block: clamp(3rem, 6vw, 5rem);
}
.hero.section-shell {
  padding-top: clamp(2rem, 4vw, 3.5rem);
  border-top: 0;
}
.lander-hero {
  align-items: start;
}
.lander-hero .hero-copy,
.lander-hero .hero-offer {
  grid-column: 1 / -1;
}
.process-intro,
.section-heading,
.checkout-copy {
  grid-column: 1 / -1;
  display: grid;
  gap: 1.25rem;
  align-content: start;
}
.lander-heading {
  display: grid;
  gap: var(--eyebrow-gap);
}
.hero-copy {
  max-width: 60ch;
}
.hero-lede {
  max-width: 60ch;
  color: var(--muted);
  font-size: 1.1875rem;
}
.eyebrow,
.card-kicker {
  color: var(--primary);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  color: var(--muted);
}
.price strong {
  color: var(--text);
  font-family: var(--display);
  font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  line-height: 1;
}
.fee-region,
.state-note {
  color: var(--muted);
  font-size: 0.9375rem;
}
.state-note {
  border-left: 3px solid var(--danger);
  padding-left: 0.75rem;
}
.hero-quick-start {
  display: none;
}
@media (max-width: 899px) {
  .hero-quick-start {
    display: inline-flex;
  }
  .hero > .wrap {
    padding-block: 2rem 3rem;
  }
  .hero .lede {
    font-size: 1.0625rem;
  }
}
.secondary-button {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
}
.secondary-button:not(:disabled):hover {
  background: var(--surface-2);
  border-color: var(--primary);
}
.secondary-button::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.buyer-job-button {
  background: transparent;
  border-color: var(--primary);
  color: var(--primary);
}
.buyer-job-button:hover {
  background: var(--tint);
}
.service-grid,
/* Lander sections are 12-column grids; their headings and FAQ block take the
   whole row, and the two job cards share it. */
.buyer-job-choice.section-shell > *,
.questions.section-shell > * {
  grid-column: 1 / -1;
}
.buyer-job-options {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--gutter);
}
.service-card,
.buyer-job-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  align-content: start;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.service-card.featured {
  border-top: 3px solid var(--primary);
}
.service-card p,
.buyer-job-card p,
.checkout-copy > p:not(.eyebrow),
.process-intro > p:not(.eyebrow) {
  color: var(--muted);
}
.card-button {
  width: fit-content;
  min-height: 44px;
  padding: 0.625rem 0;
  border: 0;
  background: transparent;
  color: var(--primary);
  font-weight: 700;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 0.14em;
}
.intake-form {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.5rem var(--gutter);
  align-content: start;
}
.intake-form > * {
  grid-column: 1 / -1;
  min-width: 0;
}
/* The progress list is a segmented bar: each step owns a segment of the top
   rule, filled with the primary colour once reached, with its number in a disc.
   Four segments share the row at every width; nothing scrolls sideways. */
.checkout-progress {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.checkout-progress li {
  flex: 1 1 0;
  min-width: 0;
}
.checkout-progress button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 0 0.25rem;
  border: 0;
  border-top: 2px solid var(--line);
  border-radius: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.checkout-progress button:hover {
  color: var(--text);
}
.checkout-progress button[aria-disabled="true"],
.checkout-progress button[aria-disabled="true"]:hover {
  color: var(--muted);
  cursor: not-allowed;
}
.checkout-progress-index {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 0.8rem;
  line-height: 1;
}
.checkout-progress button[aria-current="step"] {
  border-top-color: var(--primary);
  color: var(--text);
}
.checkout-progress li[data-complete="true"] button {
  border-top-color: var(--primary);
  color: var(--primary);
}
.checkout-progress button[aria-current="step"] .checkout-progress-index,
.checkout-progress li[data-complete="true"] button .checkout-progress-index {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--surface);
}
.review-group-heading button {
  min-height: 44px;
  padding: 0.5rem 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--primary);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.checkout-step {
  display: grid;
  gap: 1.5rem var(--gutter);
}
.checkout-step > h3 {
  margin: 0;
}
.checkout-step > label:not(.checkbox-row) {
  display: grid;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
}
.checkout-step input,
.checkout-step select {
  font-size: 1rem;
  font-weight: 400;
}
.after ol {
  display: grid;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
}
#checkout .after {
  margin-top: 0.5rem;
  gap: 1rem;
  color: var(--muted);
}
#checkout .after h3 {
  color: var(--text);
}
.checkout-step-actions,
.review-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
}
.checkout-step-actions {
  padding-top: 1.5rem;
}
.checkout-step-actions .primary-button {
  margin-left: auto;
}
.review-group {
  display: grid;
  gap: 0.75rem;
  padding-block: 1rem;
  border-top: 1px solid var(--line);
}
.review-group h4 {
  margin: 0;
}
.review-group dl {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}
.review-group dl > div {
  display: grid;
  gap: 0.25rem;
}
.review-group dt {
  color: var(--muted);
}
.review-group dd {
  margin: 0;
  white-space: pre-line;
}
.intake-form > label:not(.checkbox-row),
.intake-form fieldset:not(.theme) {
  display: grid;
  gap: 0.5rem;
}
.intake-form > label:not(.checkbox-row),
.intake-form fieldset:not(.theme) > label,
.intake-form .field > label,
.intake-form fieldset:not(.theme) > legend {
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 600;
}
.intake-form fieldset:not(.theme) {
  gap: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.intake-form legend {
  /* Floated so the title sits below the fieldset rule instead of on it
     (Ben, 2026-09-17: "these titles and lines are touching"). */
  float: left;
  width: 100%;
  margin: 0;
  color: var(--text);
  font-weight: 600;
}
.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem var(--gutter);
}
.form-row .field {
  min-width: 0;
}
.checkbox-row {
  display: flex;
  cursor: pointer;
  gap: 0.75rem;
  align-items: flex-start;
  min-height: 44px;
}
.checkbox-row input {
  appearance: none;
  cursor: pointer;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.2rem 0 0;
  border: 1.5px solid var(--primary);
  border-radius: 4px;
  background: var(--surface);
  flex: none;
}
/* Checked: one solid box with a check mark, no inner ring (Ben, 2026-09-17:
   "don't have the double lines"). The mark is drawn on the label text's
   pseudo-element and positioned over the box, because generated content on
   an input is not rendered everywhere and the page's CSP has no data: images. */
.checkbox-row {
  position: relative;
}
.checkbox-row input:checked {
  background: var(--primary);
}
.checkbox-row input:checked + span::before {
  content: "";
  position: absolute;
  left: 0.45rem;
  top: 0.42rem;
  width: 0.32rem;
  height: 0.66rem;
  border: solid var(--surface);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  pointer-events: none;
}
.checkbox-row input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.order-summary {
  display: grid;
  gap: 0.75rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.order-summary > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.order-summary small {
  display: block;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 400;
}
.order-summary__total {
  font-weight: 700;
}
#intake-error-summary,
.order-status {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--tint);
  transition:
    background-color var(--motion),
    border-color var(--motion),
    box-shadow var(--motion),
    transform var(--motion);
}
#intake-error-summary {
  border: 0;
  border-left: 3px solid var(--danger);
  border-radius: 0;
  background: var(--ground);
}
#intake-error-summary strong,
#intake-error-summary h2 {
  color: var(--danger);
}
#intake-error-summary [data-intake-error-list] {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.375rem;
}
#consent-error {
  margin-top: -1.125rem;
}
#form-message:not(:empty) {
  color: var(--danger);
}
.order-status h2 {
  font-size: 1.25rem;
}
.status-page {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  column-gap: var(--gutter);
  min-height: calc(100vh - 12rem);
  padding-block: clamp(2.5rem, 5vw, 5rem);
}
.status-card {
  grid-column: 3 / 11;
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-top: 3px solid var(--primary);
  border-radius: var(--r-lg);
  background: var(--surface);
  outline: none;
}
.status-card:focus,
.status-card:focus-visible {
  outline: none;
}
.status-card > p {
  color: var(--muted);
}
.order-status__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  color: var(--muted);
}
/* The separator travels with the item that follows it, so a wrapped line
   never ends in a hanging dot (M2). */
.order-status__meta-line:not(:first-child)::before {
  content: "·";
  margin-right: 0.5rem;
}
.order-status__meta-label {
  display: none;
}
.order-status__reference {
  font-variant-numeric: tabular-nums;
}
.status-card h1 {
  font-size: clamp(2rem, 2vw + 1rem, 2.5rem);
}
.status-card h1,
.status-card h2 {
  max-width: 20ch;
}
.status-card > .order-status__message {
  color: var(--text);
}
.status-card > .btn,
.status-card > p > .btn {
  width: fit-content;
}
.order-status__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
}
.order-status__agent {
  display: grid;
  gap: 0.25rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--tint);
  color: var(--text);
  font-style: normal;
}
.order-status__agent-heading {
  font-size: 1.25rem;
}
.order-status__agent-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
}
.order-status__copy {
  min-height: 40px;
  padding: 0.375rem 0.75rem;
  background: var(--surface);
}
.order-status__agent-line {
  display: block;
}
.order-status__guidance {
  display: grid;
  gap: 0.625rem;
  padding-top: 0.75rem;
}
.order-status__guidance h3 {
  margin-top: 1.125rem;
  font-size: 1.25rem;
}
.order-status__guidance h3:first-child {
  margin-top: 0;
}
.order-status__guidance-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding-left: 1.25rem;
}
[data-download-receipt] {
  display: inline-flex;
  width: fit-content;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1rem;
  border: 2px solid var(--primary);
  border-radius: var(--r);
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}
[data-download-receipt]:hover {
  background: var(--tint);
}
.legal-page {
  display: grid;
  gap: 1.25rem;
  max-width: var(--measure);
  margin-inline: auto;
  padding-block: clamp(2.5rem, 5vw, 5rem);
}
.legal-page h2 {
  margin-top: 1rem;
  font-size: clamp(1.375rem, 1.2vw + 0.9rem, 1.5rem);
}
.legal-page h1 {
  font-size: clamp(2.25rem, 2.5vw + 1rem, 2.5rem);
}
.legal-page .legal-review-pending + p {
  color: var(--muted);
  font-size: 0.875rem;
}
.legal-page p {
  max-width: 70ch;
}
.question-list {
  grid-column: 1 / -1;
}
.question-list details {
  border-top: 1px solid var(--line);
}
.question-list details:last-child {
  border-bottom: 1px solid var(--line);
}
.question-list summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  cursor: pointer;
  font-weight: 600;
  text-wrap: balance;
}
.question-list p {
  max-width: 70ch;
  padding-bottom: 1.25rem;
  color: var(--muted);
}
.site-footer.section-shell {
  margin-top: clamp(2.5rem, 5vw, 5rem);
  padding-block: 1.75rem 2.5rem;
  border-top: 1px solid var(--rule);
}
.site-footer .logo {
  width: 24px;
  height: 24px;
}
.footer-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: 1rem var(--gutter);
}
.footer-row .brand {
  grid-column: 1 / 5;
}
.footer-row nav {
  grid-column: 5 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 1.25rem;
}
.footer-row nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--text);
  font-size: 0.9375rem;
}
.footer-legal {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.8125rem;
}
.footer-copyright {
  white-space: nowrap;
}
@media (min-width: 900px) {
  .hero.section-shell .hero-copy {
    grid-column: 1 / 8;
  }
  /* Three classes so this beats ".hero.section-shell .hero-copy" above. */
  .hero.section-shell.lander-hero .hero-copy {
    grid-column: 1 / 8;
    align-items: start;
  }
  .lander-hero .hero-offer {
    grid-column: 8 / -1;
  }
  .hero.section-shell.intent-hero .hero-copy {
    grid-column: 1 / 10;
  }
}
/* State-lander information stays in one rhythm block instead of three stubs. */
.lander-details {
  display: grid;
  gap: 2.5rem;
  padding-block: clamp(3rem, 6vw, 5rem);
}
.lander-details__item {
  display: grid;
  gap: 0.75rem;
}
.lander-details__item h3 {
  font-size: 1.25rem;
}
.lander-intent-content,
.switch-quote {
  display: grid;
  gap: 1.25rem;
}
.lander-intent-content:empty {
  display: none;
}
.switch-quote {
  max-width: 42rem;
  padding-bottom: 2.5rem;
}
.switch-state-field {
  display: grid;
  gap: 0.5rem;
}
.switch-quote .price-summary {
  display: grid;
  gap: 0.75rem;
  padding-block: 1rem;
  border-block: 1px solid var(--line);
}
.switch-quote .price-summary p {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
}
@media (max-width: 899px) {
  .hero.section-shell,
  .process.section-shell,
  .pricing.section-shell,
  .checkout.section-shell,
  .buyer-job-choice.section-shell,
  .questions.section-shell,
  .footer-row {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .footer-row .brand,
  .footer-row nav {
    grid-column: 1 / -1;
  }
  .footer-row nav {
    justify-content: flex-start;
  }
  .service-grid,
  .buyer-job-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .status-card {
    grid-column: 1 / -1;
  }
}
@media (max-width: 899px) {
  :root {
    --header-height: 64px;
  }
  .site-header {
    gap: 0.5rem;
    height: var(--header-height);
    min-height: var(--header-height);
    padding: 0 1rem;
  }
  .header-actions {
    gap: 0.5rem;
    margin-left: auto;
    padding-left: 0;
    border-left: 0;
  }
  .site-header .theme-toggle,
  .site-header .theme-menu {
    display: none;
  }
  .header-actions .nav-start {
    min-height: 40px;
    padding-inline: 1rem;
    font-size: 0.9rem;
  }
  .nav-toggle {
    display: inline-flex;
  }
  .nav-links {
    position: absolute;
    z-index: 42;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.375rem;
    width: 100%;
    margin: 0;
    padding: 0.5rem 1rem 1rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 1.125rem 2.5rem -1.375rem
      color-mix(in srgb, var(--text) 55%, transparent);
    opacity: 0;
    transform: translateY(-0.5rem);
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity var(--motion),
      transform var(--motion),
      visibility 0s linear var(--motion-duration);
  }
  .nav-links[data-open="true"],
  #primary-navigation[data-open="true"] {
    display: flex;
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity var(--motion),
      transform var(--motion),
      visibility 0s;
  }
  .nav-links a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding-inline: 0.75rem;
    font-size: 1.05rem;
  }
  .drawer-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.375rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.85rem;
  }
  .drawer-theme-switcher {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: var(--r-btn);
    background: var(--surface);
  }
  .drawer-theme-switcher label {
    position: relative;
    display: inline-grid;
    place-items: center;
    min-width: 36px;
    min-height: 32px;
    border-radius: var(--r-btn);
    color: var(--muted);
    cursor: pointer;
  }
  .drawer-theme-switcher label:has(input:checked) {
    background: var(--action);
    color: var(--action-text);
  }
  .drawer-theme-switcher label:has(input:focus-visible) {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
  }
  .drawer-theme-switcher input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
  }
  .drawer-theme-switcher svg {
    width: 16px;
    height: 16px;
  }
  .nav-scrim {
    position: absolute;
    z-index: 41;
    top: 100%;
    left: 0;
    display: block;
    width: 100%;
    height: calc(100vh - var(--header-height));
    padding: 0;
    border: 0;
    background: var(--scrim);
    cursor: default;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity var(--motion),
      visibility 0s;
  }
  .nav-scrim[hidden] {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity var(--motion),
      visibility 0s linear var(--motion-duration);
  }
}
@media (max-width: 599px) {
  .checkout-progress {
    gap: 0.375rem;
  }
  .checkout-progress button {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    font-size: 0.8rem;
  }
  .checkout-progress-index {
    width: 1.35rem;
    height: 1.35rem;
    font-size: 0.72rem;
  }
  .hero.section-shell,
  .process.section-shell,
  .pricing.section-shell,
  .checkout.section-shell,
  .buyer-job-choice.section-shell,
  .questions.section-shell,
  .footer-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .primary-button,
  .buyer-job-button {
    width: 100%;
  }
  .checkout-step-actions .primary-button {
    width: auto;
  }
  .service-grid,
  .buyer-job-options,
  .form-row {
    grid-template-columns: 1fr;
  }
  .footer-row nav {
    display: grid;
    gap: 0.25rem;
  }
  .theme label {
    min-height: 44px;
  }
  /* Pricing rows only: the label's text and its sub-label become grid items
     of the row, so the sub-label spans under the value instead of wrapping in
     the label column (B19) and the label can still wrap at 375 without
     overflow. The hero offer rows keep the flex layout because their label
     holds a nested span. */
  #pricing .rows > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1rem;
  }
  #pricing .rows > div > span:first-child {
    display: contents;
  }
  #pricing .rows > div > span:last-child {
    grid-column: 2;
    grid-row: 1;
  }
  #pricing .rows small {
    grid-column: 1 / -1;
  }
  .contact {
    display: grid;
    gap: 0.5rem;
  }
  .eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
  }
}
@media (max-width: 768px) {
  .order-status__meta {
    display: grid;
    gap: 0.375rem;
  }
  .order-status__meta-line {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0.5rem;
  }
  .order-status__reference {
    display: block;
  }
  /* Must match the base selector's specificity or the dots survive at
     mobile widths (M1). */
  .order-status__meta-line:not(:first-child)::before {
    content: none;
  }
  .order-status__meta-label {
    display: block;
    color: var(--text);
    font-weight: 600;
  }
}
@media (max-width: 480px) {
  .status-card {
    padding: 1.5rem;
  }
  .status-card h1 {
    font-size: 1.875rem;
  }
  .order-status__agent {
    padding: 0.75rem;
  }
  .status-card > .btn,
  .status-card > p > .btn {
    width: 100%;
  }
}