@layer components {
  body {
    overflow-x: hidden;
  }

  .skip-link {
    position: fixed;
    z-index: 100;
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--color-ink);
    color: var(--color-paper);
    translate: 0 -150%;
  }

  .skip-link:focus {
    translate: 0;
  }

  .button {
    display: inline-flex;
    min-block-size: var(--tap-size);
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.125rem;
    border: 1px solid transparent;
    border-radius: var(--radius-button);
    background: var(--color-action);
    color: var(--color-ink);
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition:
      background-color var(--duration-fast),
      translate var(--duration-fast);
  }

  .button:hover {
    background: var(--color-action-hover);
  }

  .button:active {
    translate: 0 1px;
  }

  .button:disabled {
    background: var(--color-disabled-bg);
    color: var(--color-disabled-text);
    cursor: not-allowed;
    translate: none;
  }

  .button--dark {
    background: var(--color-ink);
    color: var(--color-paper);
  }

  .button--dark:hover {
    background: var(--color-ink-raised);
  }

  .button--compact {
    min-block-size: 2.5rem;
    padding-inline: 1rem;
    font-size: var(--font-size-small);
  }

  .landing-header {
    position: sticky;
    z-index: 30;
    inset-block-start: 0;
    border-block-end: var(--line);
    background: rgb(255 255 255 / 96%);
    box-shadow: var(--shadow-header);
  }

  .landing-header__inner {
    display: flex;
    min-block-size: 4.75rem;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2.5rem);
  }

  .logo {
    display: block;
    inline-size: 8rem;
    flex: none;
  }

  .logo img,
  .landing-footer img {
    inline-size: 100%;
    block-size: auto;
  }

  .landing-nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
    margin-inline-end: auto;
  }

  .landing-nav a {
    color: var(--color-text);
    font-size: var(--font-size-small);
    font-weight: 650;
    text-decoration: none;
  }

  .landing-nav a:hover {
    color: var(--color-action-text);
  }

  .header-phone {
    display: grid;
    color: var(--color-ink);
    line-height: 1.25;
    text-align: end;
    text-decoration: none;
  }

  .header-phone span {
    color: var(--color-text-muted);
    font-size: var(--font-size-micro);
  }

  .header-phone strong {
    font-size: var(--font-size-small);
  }

  .hero {
    position: relative;
    overflow: visible;
    border-block-end: var(--line);
  }

  .hero::before {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    block-size: 0.375rem;
    background: var(--color-ink);
    content: "";
    pointer-events: none;
  }

  .hero__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-8) var(--space-6);
    padding-block: clamp(3rem, 6vw, 5.75rem) var(--space-12);
  }

  #top,
  #fitment {
    scroll-margin-block-start: 5rem;
  }

  .hero__copy {
    z-index: 1;
    grid-column: 1 / 6;
    align-self: center;
    padding-block: var(--space-4);
  }

  .hero__copy h1 {
    max-inline-size: 12ch;
    margin-block-start: var(--space-4);
    font-size: clamp(2.3rem, 4.4vw, 4.5rem);
  }

  .hero__lede {
    max-inline-size: 38rem;
    margin-block-start: var(--space-6);
    color: var(--color-text-muted);
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-6);
    margin-block-start: var(--space-8);
  }

  .hero__text-link {
    display: inline-flex;
    min-block-size: var(--tap-size);
    align-items: center;
    gap: var(--space-3);
    color: var(--color-ink);
    font-size: var(--font-size-small);
    font-weight: 700;
    text-decoration: none;
  }

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

  .hero__text-link span {
    font-size: 1.25rem;
  }

  .hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
    margin-block-start: var(--space-6);
    padding-block-start: var(--space-5);
    border-block-start: var(--line);
    list-style: none;
  }

  .hero__facts li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-small);
    font-weight: 650;
  }

  .hero__facts svg {
    inline-size: 1.25rem;
    fill: none;
    stroke: var(--color-ink);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  .hero__visual {
    position: relative;
    grid-column: 6 / -1;
    align-self: center;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--color-ink);
    background: var(--color-ink);
  }

  .hero__visual-head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    align-items: center;
    padding: 0.75rem var(--space-4);
    background: var(--color-ink);
    color: var(--color-paper);
    font-size: var(--font-size-micro);
  }

  .hero__visual-head span {
    padding: 0.25rem 0.5rem;
    background: var(--color-action);
    color: var(--color-ink);
    font-weight: 800;
    text-transform: uppercase;
  }

  .hero__visual-head strong {
    font-weight: 550;
  }

  .hero__technical-stage {
    position: relative;
    overflow: hidden;
    background: var(--color-paper);
  }

  .hero__technical-stage img {
    display: block;
    inline-size: 108%;
    max-inline-size: none;
    margin-inline: -4%;
    padding-block: clamp(3rem, 5vw, 4.5rem) clamp(1rem, 2vw, 2rem);
    mix-blend-mode: multiply;
  }

  .hero__technical-index {
    position: absolute;
    z-index: 2;
    inset-block-start: var(--space-4);
    inset-inline-end: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-micro);
    font-weight: 700;
    letter-spacing: 0.08em;
  }

  .hero__window-accent {
    position: absolute;
    z-index: 3;
    inset-block-start: 30%;
    inset-inline-start: 75.5%;
    inline-size: 7.5%;
    block-size: 13%;
    background: var(--color-action);
    clip-path: polygon(0 5%, 63% 12%, 100% 50%, 78% 94%, 0 87%);
    mix-blend-mode: multiply;
    pointer-events: none;
  }

  .hero__product-callout {
    position: absolute;
    inset-block-end: 15%;
    inset-inline-end: var(--space-4);
    display: grid;
    max-inline-size: 14rem;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    padding: 0.75rem;
    border: 1px solid var(--color-ink);
    background: rgb(255 255 255 / 94%);
    color: var(--color-ink);
  }

  .hero__product-callout > span {
    display: grid;
    inline-size: 2rem;
    block-size: 2rem;
    place-items: center;
    background: var(--color-action);
    font-size: var(--font-size-micro);
    font-weight: 800;
  }

  .hero__product-callout div {
    display: grid;
    gap: var(--space-1);
  }

  .hero__product-callout small {
    color: var(--color-text-muted);
    font-size: var(--font-size-micro);
  }

  .hero__visual figcaption {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-block-start: 1px solid var(--color-ink-raised);
    background: var(--color-ink);
    color: var(--color-paper);
  }

  .hero__visual figcaption span {
    display: flex;
    min-block-size: 3.5rem;
    align-items: center;
    gap: var(--space-2);
    padding: 0.75rem;
    border-inline-end: 1px solid var(--color-ink-raised);
    font-size: var(--font-size-micro);
    line-height: 1.3;
  }

  .hero__visual figcaption span:last-child {
    border-inline-end: 0;
  }

  .hero__visual figcaption i {
    color: var(--color-action);
    font-style: normal;
    font-weight: 800;
  }

  .fitment {
    position: relative;
    z-index: 5;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(17rem, 0.75fr) minmax(22rem, 1.25fr);
    gap: var(--space-6) var(--space-8);
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--color-ink);
    background: var(--color-paper);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.75rem), calc(100% - 1.75rem) 100%, 0 100%);
  }

  .fitment__heading {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
  }

  .fitment__step {
    display: grid;
    inline-size: 4.5rem;
    block-size: 4.5rem;
    place-items: center;
    align-self: start;
    background: var(--color-ink);
    color: var(--color-paper);
    font-size: var(--font-size-micro);
    font-weight: 750;
    line-height: 1.1;
    text-align: center;
  }

  .fitment h2 {
    max-inline-size: none;
    font-family: var(--font-body);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    letter-spacing: -0.03em;
  }

  .fitment__heading p {
    margin-block-start: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
  }

  .fitment__search-area {
    display: grid;
    align-self: center;
    gap: var(--space-2);
    min-inline-size: 0;
  }

  .fitment__search {
    position: relative;
  }

  .fitment__search input {
    inline-size: 100%;
    min-block-size: 4.25rem;
    padding-inline: 3.5rem 1rem;
    border: 2px solid var(--color-ink);
    border-radius: var(--radius-control);
    background: var(--color-paper);
    color: var(--color-ink);
    font-size: clamp(1rem, 1.5vw, 1.125rem);
  }

  .fitment__search input::placeholder {
    color: var(--color-text-faint);
  }

  .fitment__search-icon {
    position: absolute;
    z-index: 1;
    inset-block-start: 1.3rem;
    inset-inline-start: 1.125rem;
    inline-size: 1.5rem;
    fill: none;
    stroke: var(--color-ink);
    stroke-linecap: round;
    stroke-width: 1.75;
    pointer-events: none;
  }

  .fitment-results {
    position: absolute;
    z-index: 15;
    inset-block-start: calc(100% + 0.5rem);
    inset-inline: 0;
    max-block-size: min(26rem, 55dvh);
    padding: var(--space-2);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    touch-action: pan-y;
    border: 1px solid var(--color-ink);
    border-radius: var(--radius-card);
    background: var(--color-paper);
    box-shadow: var(--shadow-float);
    list-style: none;
  }

  .fitment-results[hidden] {
    display: none;
  }

  .fitment-result {
    display: grid;
    inline-size: 100%;
    min-block-size: 3.75rem;
    align-content: center;
    gap: 0.125rem;
    padding: 0.625rem 0.75rem;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    text-align: start;
  }

  .fitment-result:hover,
  .fitment-result[aria-selected="true"] {
    background: var(--color-surface-soft);
  }

  .fitment-result strong {
    color: var(--color-ink);
  }

  .fitment-result span {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
  }

  .fitment-result--empty {
    border-inline-start: 0.25rem solid var(--color-action);
  }

  .fitment__alternative {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding-inline: 0.125rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-micro);
  }

  .fitment__alternative button {
    display: inline-flex;
    min-block-size: 2rem;
    align-items: center;
    gap: var(--space-1);
    padding: 0;
    border: 0;
    border-block-end: 1px solid currentColor;
    background: transparent;
    color: var(--color-ink);
    font: inherit;
    font-weight: 700;
  }

  .fitment__alternative button:hover {
    color: var(--color-action-text);
  }

  .fitment__footer {
    display: contents;
  }

  .fitment__status {
    align-self: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
  }

  .brand-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .brand-shortcut {
    min-block-size: 2.5rem;
    padding-inline: 0.875rem;
    border: var(--line);
    border-radius: var(--radius-control);
    background: var(--color-paper);
    font-size: var(--font-size-small);
    font-weight: 650;
  }

  .brand-shortcut:hover {
    border-color: var(--color-ink);
    background: var(--color-surface-soft);
  }

  .fitment-selected {
    grid-column: 1 / -1;
    display: grid;
    gap: var(--space-6);
    padding: var(--space-6);
    border-block-start: var(--line);
    background: var(--color-surface-soft);
  }

  .fitment-selected[hidden] {
    display: none;
  }

  .fitment-selected__summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
  }

  .fitment-selected__check {
    display: grid;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-success-soft);
  }

  .fitment-selected__check svg {
    inline-size: 1.35rem;
    fill: none;
    stroke: var(--color-success);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  .fitment-selected__vehicle {
    display: grid;
    gap: 0.125rem;
  }

  .fitment-selected__vehicle > span {
    color: var(--color-text-muted);
    font-size: var(--font-size-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .fitment-selected__vehicle > strong {
    font-size: clamp(1.125rem, 2vw, 1.4rem);
    line-height: 1.15;
  }

  .fitment-selected__vehicle > small {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
  }

  .fitment-selected__change {
    min-block-size: var(--tap-size);
    padding-inline: var(--space-4);
    border: var(--line);
    border-radius: var(--radius-button);
    background: var(--color-paper);
    color: var(--color-ink);
    font: inherit;
    font-size: var(--font-size-small);
    font-weight: 700;
  }

  .fitment-selected__change:hover {
    border-color: var(--color-ink);
  }

  .fitment-selected__controls {
    display: grid;
    grid-template-columns: minmax(11rem, 0.7fr) minmax(15rem, 1.2fr) minmax(13rem, 0.85fr);
    gap: var(--space-3);
  }

  .fitment-selected__year,
  .fitment-selected__bodies,
  .fitment-selected__action {
    display: grid;
    min-inline-size: 0;
    min-block-size: 9.25rem;
    align-content: start;
    gap: var(--space-2);
    padding: var(--space-4);
    border: var(--line);
    border-radius: var(--radius-card);
    background: var(--color-paper);
  }

  .fitment-selected__field-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-ink);
    font-size: var(--font-size-micro);
    font-weight: 750;
    line-height: 1;
    text-transform: uppercase;
  }

  .fitment-selected__field-title b {
    display: grid;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-surface-muted);
    font-size: 0.6875rem;
  }

  .fitment-selected__year input {
    inline-size: 100%;
    min-block-size: 3.25rem;
    padding-inline: var(--space-3);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-control);
    background: var(--color-paper);
    color: var(--color-ink);
    font: inherit;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
  }

  .fitment-selected__year input:focus {
    border-color: var(--color-ink);
    outline: 0.1875rem solid rgb(169 73 0 / 18%);
    outline-offset: 0;
  }

  .fitment-selected__year input[aria-invalid="true"] {
    border-color: var(--color-error);
    background: var(--color-error-soft);
  }

  .fitment-selected__year small,
  .fitment-selected__bodies > small,
  .fitment-selected__action > small {
    color: var(--color-text-muted);
    font-size: var(--font-size-micro);
    line-height: 1.35;
  }

  .fitment-selected .button[aria-disabled="true"] {
    background: var(--color-disabled-bg);
    color: var(--color-disabled-text);
    cursor: not-allowed;
    pointer-events: none;
  }

  .fitment-selected__bodies {
    margin: 0;
  }

  .fitment-selected__bodies legend {
    padding: 0;
  }

  .fitment-selected__body-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .fitment-selected__body-options label {
    position: relative;
    min-inline-size: 0;
  }

  .fitment-selected__body-options input {
    position: absolute;
    opacity: 0;
  }

  .fitment-selected__body-options label span,
  .fitment-selected__body-single {
    display: grid;
    min-block-size: 3.25rem;
    place-items: center;
    padding-inline: var(--space-4);
    border: var(--line);
    border-radius: var(--radius-control);
    background: var(--color-paper);
    color: var(--color-ink);
    font-size: var(--font-size-small);
    font-weight: 650;
  }

  .fitment-selected__body-options label span {
    cursor: pointer;
  }

  .fitment-selected__body-single {
    justify-content: start;
    border-color: var(--color-ink);
    background: var(--color-ink);
    color: var(--color-paper);
  }

  .fitment-selected__body-options input:checked + span {
    border-color: var(--color-ink);
    background: var(--color-ink);
    color: var(--color-paper);
  }

  .fitment-selected__body-options input:focus-visible + span {
    outline: 0.1875rem solid var(--color-focus);
    outline-offset: 0.125rem;
  }

  .fitment-selected__action .button {
    inline-size: 100%;
    min-block-size: 3.25rem;
    margin-block-start: 0;
  }

  .hero__trust {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: var(--color-ink);
    color: var(--color-paper);
  }

  .hero__trust div {
    display: grid;
    min-block-size: 7.5rem;
    align-content: center;
    gap: var(--space-2);
    padding: var(--space-5);
    border-inline-end: 1px solid var(--color-ink-raised);
  }

  .hero__trust div:last-child {
    border-inline-end: 0;
  }

  .hero__trust dt {
    color: var(--color-paper);
    font-size: clamp(1.5rem, 2.6vw, 2.35rem);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1;
  }

  .hero__trust dd {
    max-inline-size: 15rem;
    margin: 0;
    color: #b9b9bf;
    font-size: var(--font-size-small);
    line-height: 1.35;
  }

  .legal-strip {
    background: var(--color-surface-soft);
  }

  .legal-strip__grid {
    display: grid;
    grid-template-columns: auto minmax(18rem, 1fr) minmax(18rem, 0.8fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 4rem);
    padding-block: clamp(2rem, 5vw, 4rem);
  }

  .legal-strip__icon {
    display: grid;
    inline-size: 4rem;
    block-size: 4rem;
    place-items: center;
    background: var(--color-ink);
    color: var(--color-paper);
  }

  .legal-strip__icon svg {
    inline-size: 2rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.75;
  }

  .legal-strip h2 {
    max-inline-size: 28ch;
    margin-block-start: var(--space-2);
    font-family: var(--font-body);
    font-size: clamp(1.25rem, 2.2vw, 2rem);
    letter-spacing: -0.035em;
  }

  .legal-strip__grid > p {
    color: var(--color-text-muted);
  }

  .section {
    padding-block: var(--section-space);
  }

  .section-head {
    display: grid;
    gap: var(--space-4);
    max-inline-size: 54rem;
    margin-block-end: clamp(2.5rem, 6vw, 5rem);
  }

  .section-head h2 {
    margin-block-start: var(--space-3);
  }

  .section-head > p,
  .section-head--split > p {
    max-inline-size: 40rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-body-lg);
  }

  .section-head--split {
    max-inline-size: none;
    grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
    align-items: end;
    gap: var(--space-12);
  }

  .fit-visual {
    position: relative;
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--color-line-strong);
    background: var(--color-paper);
  }

  .fit-visual::before {
    position: absolute;
    inset: var(--space-4);
    border: 1px solid var(--color-line-soft);
    content: "";
    pointer-events: none;
  }

  .fit-visual__meta {
    position: absolute;
    z-index: 3;
    inset-block-start: var(--space-5);
    inset-inline-start: var(--space-5);
    display: grid;
    gap: var(--space-1);
  }

  .fit-visual__meta span,
  .fit-visual figcaption {
    color: var(--color-text-muted);
    font-size: var(--font-size-micro);
  }

  .fit-visual img {
    display: block;
    inline-size: 100%;
    min-block-size: 34rem;
    object-fit: contain;
    padding: clamp(5rem, 9vw, 8rem) clamp(1rem, 4vw, 4rem) clamp(4rem, 6vw, 6rem);
    mix-blend-mode: multiply;
  }

  .fit-visual__callout {
    position: absolute;
    z-index: 4;
    display: grid;
    max-inline-size: 15rem;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-line-strong);
    background: var(--color-paper);
    font-size: var(--font-size-small);
  }

  .fit-visual__callout span {
    display: grid;
    inline-size: 2rem;
    block-size: 2rem;
    grid-row: 1 / 3;
    place-items: center;
    border-radius: 50%;
    background: var(--color-action);
    color: var(--color-ink);
    font-size: var(--font-size-micro);
    font-weight: 800;
  }

  .fit-visual__callout strong {
    align-self: end;
  }

  .fit-visual__callout small {
    color: var(--color-text-muted);
    line-height: 1.35;
  }

  .fit-visual__callout--front {
    inset-block-start: 15%;
    inset-inline-start: 31%;
  }

  .fit-visual__callout--pillar {
    inset-block-end: 7%;
    inset-inline-start: 50%;
  }

  .fit-visual__callout--quarter {
    inset-block-start: 18%;
    inset-inline-end: 4%;
  }

  .fit-visual figcaption {
    position: absolute;
    inset-inline-start: var(--space-5);
    inset-block-end: var(--space-5);
    max-inline-size: 31rem;
  }

  .compare-notes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-inline: var(--line);
    border-block-end: var(--line);
  }

  .compare-notes p {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4);
    border-inline-end: var(--line);
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
  }

  .compare-notes p:last-child {
    border-inline-end: 0;
  }

  .compare-notes strong {
    color: var(--color-ink);
    font-size: var(--font-size-body);
  }

  .use-cases {
    border-block-end: var(--line);
  }

  .use-cases__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-block-start: var(--line);
    border-inline-start: var(--line);
  }

  .use-cases__grid article {
    min-block-size: 17rem;
    padding: var(--space-5);
    border-inline-end: var(--line);
    border-block-end: var(--line);
  }

  .use-cases__grid article:nth-child(even) {
    background: var(--color-surface-soft);
  }

  .use-cases__grid span {
    display: block;
    margin-block-end: clamp(3rem, 7vw, 6rem);
    color: var(--color-text-muted);
    font-size: var(--font-size-micro);
  }

  .use-cases__grid h3 {
    margin-block-end: var(--space-3);
    font-size: var(--font-size-body-lg);
  }

  .use-cases__grid p {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
  }

  .constructor-section {
    border-block: var(--line);
    background: var(--color-surface-soft);
  }

  .constructor {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(20rem, 0.6fr);
    align-items: start;
    gap: var(--space-6);
  }

  .constructor__main {
    display: grid;
    gap: var(--space-4);
  }

  .car-stage {
    position: relative;
    min-block-size: clamp(31rem, 48vw, 41rem);
    overflow: hidden;
    border: 1px solid var(--color-line-strong);
    background: var(--color-paper);
    color: var(--color-ink);
  }

  .car-stage::before {
    position: absolute;
    inset: var(--space-3);
    border: 1px solid var(--color-line-soft);
    content: "";
    pointer-events: none;
  }

  .car-stage__head {
    position: relative;
    z-index: 2;
    display: grid;
    gap: var(--space-2);
    padding: clamp(1.25rem, 3vw, 2rem);
  }

  .car-stage__vehicle {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    font-weight: 650;
  }

  .constructor-car {
    position: absolute;
    inset-inline: 2%;
    inset-block-start: 24%;
    inline-size: 96%;
    block-size: 64%;
    object-fit: contain;
    mix-blend-mode: multiply;
  }

  .window-zone {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    min-block-size: 2.75rem;
    align-items: center;
    gap: 0;
    padding: 0;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-button);
    background: var(--color-paper);
    color: var(--color-ink);
    font-size: var(--font-size-micro);
    font-weight: 750;
  }

  .window-zone span {
    display: grid;
    min-inline-size: 2.75rem;
    align-self: stretch;
    place-items: center;
    border-inline-end: var(--line);
    border-radius: 0;
    background: var(--color-ink);
    color: var(--color-paper);
  }

  .window-zone strong {
    padding-inline: 0.75rem;
  }

  .window-zone strong small {
    display: block;
    margin-block-start: 0.125rem;
    color: var(--color-text-muted);
    font-size: 0.625rem;
    font-weight: 500;
    line-height: 1.1;
  }

  .window-zone[aria-pressed="true"] strong small {
    color: var(--color-ink);
  }

  .window-zone[aria-pressed="true"] {
    background: var(--color-action);
  }

  .window-zone[aria-pressed="true"] span {
    background: var(--color-action);
    color: var(--color-ink);
  }

  .window-zone:disabled {
    cursor: not-allowed;
    opacity: 0.45;
  }

  .window-zone--front {
    inset-inline-start: 32%;
    inset-block-start: 39%;
  }

  .window-zone--rear {
    inset-inline-start: 54%;
    inset-block-start: 35%;
  }

  .window-zone--quarter {
    inset-inline-start: 72%;
    inset-block-start: 43%;
  }

  .window-zone--back {
    inset-inline-end: 3%;
    inset-block-start: 54%;
  }

  .car-stage__legend {
    position: absolute;
    z-index: 5;
    inset-inline: 0;
    inset-block-end: 0;
    display: block;
    padding: 0.8rem clamp(1.25rem, 3vw, 2rem);
    border-block-start: var(--line);
    background: rgb(255 255 255 / 96%);
    color: var(--color-text-muted);
    font-size: var(--font-size-micro);
  }

  .car-stage__legend span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .car-stage__legend .car-stage__disclaimer {
    display: block;
    max-inline-size: 78rem;
    padding: 0;
    border: 0;
    line-height: 1.35;
  }

  .car-stage__legend i {
    position: relative;
    inline-size: 1.75rem;
    block-size: 0.75rem;
    border: 1px solid var(--color-ink);
  }

  .car-stage__legend i::before,
  .car-stage__legend i::after {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: -0.2rem;
    inline-size: 1px;
    block-size: 1.05rem;
    background: var(--color-ink);
    content: "";
    rotate: 55deg;
  }

  .car-stage__legend i::after {
    rotate: -55deg;
  }

  .config-lock {
    position: absolute;
    z-index: 6;
    inset: 0;
    display: grid;
    max-inline-size: 26rem;
    align-content: center;
    justify-items: start;
    gap: var(--space-3);
    padding: var(--space-8);
    background: rgb(255 255 255 / 94%);
  }

  .config-lock[hidden] {
    display: none;
  }

  .config-lock p {
    color: var(--color-text-muted);
  }

  .fitment-protocol {
    border-block-end: var(--line);
  }

  .fitment-protocol__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.65fr);
    align-items: stretch;
    gap: var(--space-6);
  }

  .fitment-protocol ol {
    margin: 0;
    padding: 0;
    border-block-start: var(--line);
    list-style: none;
  }

  .fitment-protocol li {
    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: var(--space-4);
    padding-block: var(--space-5);
    border-block-end: var(--line);
  }

  .fitment-protocol li > span {
    color: var(--color-accent-text);
    font-family: var(--font-display);
    font-size: var(--font-size-body-lg);
    font-weight: 700;
  }

  .fitment-protocol li div {
    display: grid;
    grid-template-columns: minmax(12rem, 0.7fr) minmax(16rem, 1.3fr);
    gap: var(--space-6);
  }

  .fitment-protocol li p {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
  }

  .fitment-protocol aside {
    display: grid;
    align-content: end;
    gap: var(--space-4);
    padding: clamp(1.5rem, 4vw, 3rem);
    background: var(--color-ink);
    color: var(--color-paper);
  }

  .fitment-protocol aside .eyebrow,
  .fitment-protocol aside p:last-of-type {
    color: #b9b9bf;
  }

  .fitment-protocol aside > strong {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.35rem);
    line-height: 1.08;
  }

  .fitment-protocol aside .button {
    justify-self: start;
  }

  .preset-panel {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) auto;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-4);
    border: var(--line);
    background: var(--color-paper);
  }

  .preset-panel p {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
  }

  .preset-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    gap: var(--space-2);
  }

  .preset {
    min-block-size: var(--tap-size);
    padding-inline: 1rem;
    border: var(--line);
    border-radius: var(--radius-round);
    background: var(--color-paper);
    font-weight: 650;
  }

  .preset:hover:not(:disabled) {
    border-color: var(--color-ink);
  }

  .preset[aria-pressed="true"] {
    border-color: var(--color-ink);
    background: var(--color-ink);
    color: var(--color-paper);
  }

  .preset:disabled {
    color: var(--color-disabled-text);
    cursor: not-allowed;
  }

  .zone-panel {
    border: var(--line);
    background: var(--color-paper);
  }

  .zone-panel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4);
    border-block-end: var(--line);
  }

  .zone-panel__head span {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
  }

  .zone-row {
    position: relative;
    display: grid;
    min-block-size: 4.75rem;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-block-end: var(--line);
    cursor: pointer;
  }

  .zone-row:last-child {
    border-block-end: 0;
  }

  .zone-row:hover {
    background: var(--color-surface-soft);
  }

  .zone-row:has(input:checked) {
    background: var(--color-ink);
    color: var(--color-paper);
  }

  .zone-row:has(input:disabled) {
    cursor: not-allowed;
  }

  .zone-row input {
    position: absolute;
    opacity: 0;
  }

  .zone-row__check {
    display: grid;
    inline-size: 1.375rem;
    block-size: 1.375rem;
    place-items: center;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-control);
    background: var(--color-paper);
  }

  .zone-row input:checked + .zone-row__check {
    border-color: var(--color-action);
    background: var(--color-action);
  }

  .zone-row input:checked + .zone-row__check::after {
    inline-size: 0.5rem;
    block-size: 0.25rem;
    border-block-end: 2px solid var(--color-ink);
    border-inline-start: 2px solid var(--color-ink);
    content: "";
    rotate: -45deg;
    translate: 0 -0.08rem;
  }

  .zone-row input:focus-visible + .zone-row__check {
    outline: 0.1875rem solid var(--color-focus);
    outline-offset: 0.1875rem;
  }

  .zone-row > span:nth-of-type(2) {
    display: grid;
  }

  .zone-row small {
    color: var(--color-text-muted);
  }

  .zone-row:has(input:checked) small {
    color: #b9b9bf;
  }

  .zone-row__price {
    font-variant-numeric: tabular-nums;
    font-weight: 750;
  }

  .discount {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border-inline-start: 0.25rem solid var(--color-action);
    background: var(--color-paper);
  }

  .discount__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .discount__head span {
    color: var(--color-action-text);
    font-size: 1.25rem;
    font-weight: 800;
  }

  .discount__track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
  }

  .discount__track > span {
    display: grid;
    gap: 0.35rem;
  }

  .discount__track i {
    block-size: 0.375rem;
    border-radius: var(--radius-round);
    background: var(--color-line);
    transition: background var(--duration-fast);
  }

  .discount__track small {
    color: var(--color-text-faint);
    font-size: 0.6875rem;
    line-height: 1;
    white-space: nowrap;
  }

  .discount[data-level="1"] .discount__track > span:nth-child(-n + 1) i,
  .discount[data-level="2"] .discount__track > span:nth-child(-n + 2) i,
  .discount[data-level="3"] .discount__track > span:nth-child(-n + 3) i,
  .discount[data-level="4"] .discount__track > span:nth-child(-n + 4) i {
    background: var(--color-action);
  }

  .discount[data-level="1"] .discount__track > span:nth-child(-n + 1) small,
  .discount[data-level="2"] .discount__track > span:nth-child(-n + 2) small,
  .discount[data-level="3"] .discount__track > span:nth-child(-n + 3) small,
  .discount[data-level="4"] .discount__track > span:nth-child(-n + 4) small {
    color: var(--color-ink);
    font-weight: 700;
  }

  .discount p {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
  }

  .discount__footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2) var(--space-4);
  }

  .discount__saving {
    inline-size: fit-content;
    padding: 0.35rem 0.625rem;
    border-radius: var(--radius-round);
    background: #fff1df;
    color: var(--color-action-text);
    font-size: var(--font-size-micro);
    font-weight: 800;
  }

  .discount__action {
    display: inline-flex;
    grid-column: 2;
    grid-row: 1 / span 2;
    min-block-size: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: 0.625rem 0.875rem;
    border: 0;
    border-radius: var(--radius-small);
    background: var(--color-action);
    color: var(--color-ink);
    cursor: pointer;
    font: inherit;
    font-size: var(--font-size-micro);
    font-weight: 750;
    transition:
      background var(--duration-fast),
      translate var(--duration-fast);
  }

  .discount__action:hover {
    background: var(--color-action-hover);
    translate: 0 -0.0625rem;
  }

  .discount__action strong {
    font-size: inherit;
    white-space: nowrap;
  }

  .discount__action[hidden],
  .discount__saving[hidden] {
    display: none;
  }

  .order-summary__old:empty,
  .order-summary__saving:empty {
    display: none;
  }

  .trim-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
  }

  .trim-options legend {
    display: grid;
    grid-column: 1 / -1;
    gap: var(--space-1);
    inline-size: 100%;
    margin-block-end: var(--space-2);
  }

  .trim-card {
    position: relative;
    display: grid;
    min-block-size: 0;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    align-items: start;
    column-gap: var(--space-3);
    padding: clamp(0.875rem, 1.2vw, 1rem);
    border: var(--line);
    background: var(--color-paper);
    cursor: pointer;
    transition:
      border-color var(--duration-fast),
      background var(--duration-fast),
      box-shadow var(--duration-fast),
      translate var(--duration-fast);
  }

  .trim-card + .trim-card {
    border-inline-start: 0;
  }

  .trim-card:hover {
    z-index: 1;
    border-color: var(--color-ink);
    translate: 0 -0.125rem;
  }

  .trim-card:has(input:checked) {
    z-index: 2;
    border-color: var(--color-action);
    background: #fff7ed;
    color: var(--color-ink);
    box-shadow: inset 0 0 0 0.125rem var(--color-action);
  }

  .trim-card input {
    position: absolute;
    opacity: 0;
  }

  .trim-card__select {
    margin-block-start: 0.125rem;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    border: 1px solid var(--color-line-strong);
    border-radius: 50%;
    background: var(--color-paper);
  }

  .trim-card:has(input:checked) .trim-card__select {
    border: 0.35rem solid var(--color-paper);
    background: var(--color-action);
    box-shadow: 0 0 0 0.125rem var(--color-action);
  }

  .trim-card input:focus-visible + .trim-card__select {
    outline: 0.1875rem solid var(--color-focus);
    outline-offset: 0.1875rem;
  }

  .trim-card__content {
    display: grid;
    align-content: start;
    min-inline-size: 0;
    gap: 0;
  }

  .trim-card__title {
    display: grid;
    min-block-size: 2.75rem;
    align-content: start;
    gap: 0.125rem;
    padding-block-end: var(--space-1);
  }

  .trim-card--recommended .trim-card__title {
    padding-inline-end: clamp(7.5rem, 11vw, 10rem);
  }

  .trim-card__title strong {
    font-size: clamp(1.125rem, 1.7vw, 1.5rem);
    line-height: 1.1;
  }

  .trim-card__title small {
    font-size: 0.8125rem;
  }

  .trim-card__title small,
  .trim-card__copy {
    color: var(--color-text-muted);
    line-height: 1.25;
  }

  .trim-card:has(input:checked) :is(.trim-card__title small, .trim-card__copy) {
    color: var(--color-text-muted);
  }

  .trim-card__features {
    display: grid;
    margin: 0;
    padding: 0;
    border-block-start: 1px solid var(--color-line-soft);
    color: var(--color-text-muted);
    font-size: 0.875rem;
    list-style: none;
  }

  .trim-card__features li {
    position: relative;
    display: flex;
    min-block-size: 2.5rem;
    align-items: center;
    padding: 0.25rem 0.125rem 0.25rem 1.1rem;
    border-block-end: 1px solid var(--color-line-soft);
    line-height: 1.25;
  }

  .trim-card__features li:last-child {
    border-block-end: 0;
  }

  .trim-card__features li::before {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0.1rem;
    inline-size: 0.4rem;
    block-size: 0.4rem;
    border-radius: 50%;
    background: var(--color-action);
    content: "";
    translate: 0 -50%;
  }

  .trim-card__badge {
    position: absolute;
    inset-block-start: clamp(0.875rem, 1.2vw, 1rem);
    inset-inline-end: clamp(0.875rem, 1.2vw, 1rem);
    inline-size: fit-content;
    padding: 0.3rem 0.55rem;
    border-radius: var(--radius-round);
    background: var(--color-action);
    color: var(--color-ink);
    font-size: var(--font-size-micro);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .order-summary {
    position: sticky;
    inset-block-start: 6rem;
    display: grid;
    gap: var(--space-6);
    padding: var(--space-6);
    background: var(--color-ink);
    color: var(--color-paper);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%);
  }

  .order-summary .eyebrow {
    color: #b9b9bf;
  }

  .order-summary h3 {
    margin-block-start: var(--space-2);
    color: var(--color-paper);
  }

  .order-summary__car {
    margin-block-start: var(--space-2);
    color: #b9b9bf;
    font-size: var(--font-size-small);
  }

  .order-summary__items {
    display: grid;
    gap: var(--space-2);
    color: #d9d9dd;
    font-size: var(--font-size-small);
    list-style: none;
  }

  .order-summary__items li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .order-summary__total {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid #3b3b3f;
  }

  .order-summary__total > div {
    display: grid;
  }

  .order-summary__old {
    color: #b9b9bf;
    font-size: var(--font-size-small);
    text-decoration: line-through;
  }

  .order-summary__saving {
    color: #f5ac68;
    font-size: var(--font-size-small);
  }

  .order-summary__total strong {
    font-size: clamp(2rem, 4vw, 3rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.06em;
    line-height: 1;
  }

  .order-summary__note {
    color: #b9b9bf;
    font-size: var(--font-size-micro);
  }

  .mobile-summary {
    display: none;
  }

  .engineering-layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .engineering-main {
    display: grid;
    grid-column: 1 / 8;
    grid-row: span 2;
    grid-template-rows: minmax(18rem, 1fr) auto;
    overflow: hidden;
    border: var(--line);
  }

  .mesh-specimen {
    position: relative;
    min-block-size: 24rem;
    overflow: hidden;
    background: var(--color-ink);
    color: var(--color-paper);
  }

  .mesh-specimen svg {
    position: absolute;
    inset: -20%;
    inline-size: 140%;
    max-inline-size: none;
    opacity: 0.62;
    rotate: -8deg;
  }

  .mesh-specimen__callout {
    position: absolute;
    padding: 0.45rem 0.65rem;
    border: 1px solid currentColor;
    background: var(--color-ink);
    font-size: var(--font-size-micro);
    font-weight: 700;
  }

  .mesh-specimen__callout--a {
    inset-block-start: 14%;
    inset-inline-start: 10%;
  }

  .mesh-specimen__callout--b {
    inset-inline-end: 8%;
    inset-block-end: 15%;
    background: var(--color-action);
    color: var(--color-ink);
  }

  .engineering-main__copy {
    padding: clamp(1.25rem, 3vw, 2rem);
  }

  .engineering-main__copy h3 {
    max-inline-size: 26ch;
    margin-block-start: var(--space-3);
  }

  .engineering-main__copy > p:last-child {
    max-inline-size: 42rem;
    margin-block-start: var(--space-4);
    color: var(--color-text-muted);
  }

  .spec-card {
    display: grid;
    min-block-size: 14rem;
    grid-column: span 5;
    align-content: space-between;
    gap: var(--space-8);
    padding: var(--space-6);
    border: var(--line);
  }

  .spec-card--large {
    grid-column: 8 / -1;
    background: var(--color-surface-soft);
  }

  .metric {
    color: var(--color-ink);
    font-size: clamp(3.25rem, 7vw, 6.5rem);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: -0.08em;
    line-height: 0.9;
  }

  .metric span {
    margin-inline-start: 0.1em;
    color: var(--color-action-text);
    font-size: 0.4em;
    letter-spacing: 0;
  }

  .spec-card__icon {
    inline-size: 2.5rem;
    fill: none;
    stroke: var(--color-ink);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.75;
  }

  .spec-card p {
    margin-block-start: var(--space-2);
    color: var(--color-text-muted);
  }

  .trim-explainer {
    background: var(--color-surface-soft);
  }

  .trim-comparison {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: var(--line);
    background: var(--color-paper);
  }

  .trim-comparison article {
    display: grid;
    align-content: start;
    gap: var(--space-4);
    padding: clamp(1.5rem, 4vw, 3rem);
    border-inline-end: var(--line);
  }

  .trim-comparison article:last-child {
    border-inline-end: 0;
  }

  .trim-comparison__line {
    display: block;
    inline-size: 100%;
    block-size: 1rem;
    margin-block-end: var(--space-4);
    border: 1px solid var(--color-ink);
  }

  .trim-comparison__line--standard {
    background: var(--color-surface-muted);
  }

  .trim-comparison__line--premium {
    background: var(--color-ink);
    box-shadow: inset 0 0 0 0.25rem var(--color-action);
  }

  .trim-comparison ul {
    display: grid;
    gap: var(--space-3);
    padding-inline-start: 1.25rem;
  }

  .trim-comparison li::marker {
    color: var(--color-action-text);
  }

  .trim-comparison a {
    margin-block-start: var(--space-4);
    font-weight: 700;
  }

  .compare-table-wrap {
    overflow-x: auto;
  }

  .compare-table {
    inline-size: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .compare-table th,
  .compare-table td {
    padding: clamp(1rem, 3vw, 2rem);
    border-block-end: var(--line);
    text-align: start;
    vertical-align: top;
  }

  .compare-table th {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
  }

  .compare-table :is(th, td):nth-child(2) {
    border-block-end-color: rgb(11 11 12 / 18%);
    background: var(--color-action);
    color: var(--color-ink);
  }

  .compare-table th:nth-child(2) {
    color: var(--color-ink);
  }

  .compare-table td strong,
  .compare-table td span {
    display: block;
  }

  .compare-table td strong {
    font-size: var(--font-size-body-lg);
  }

  .compare-table td span {
    margin-block-start: var(--space-2);
    color: var(--color-text-muted);
  }

  .compare-table td:nth-child(2) span {
    color: var(--color-ink-raised);
  }

  .trust-section {
    background: var(--color-ink);
    color: var(--color-paper);
  }

  .trust-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
    align-items: end;
    gap: var(--space-12);
  }

  .trust-intro .eyebrow {
    color: #b9b9bf;
  }

  .trust-intro h2 {
    margin-block-start: var(--space-3);
    color: var(--color-paper);
  }

  .trust-intro > p {
    color: #d9d9dd;
    font-size: var(--font-size-body-lg);
  }

  .trust-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-block-start: clamp(3rem, 7vw, 6rem);
    border-block: 1px solid #3b3b3f;
  }

  .trust-metrics div {
    display: grid;
    min-block-size: 12rem;
    align-content: space-between;
    gap: var(--space-6);
    padding: var(--space-6);
    border-inline-end: 1px solid #3b3b3f;
  }

  .trust-metrics div:last-child {
    border-inline-end: 0;
  }

  .trust-metrics dt {
    font-size: clamp(2.5rem, 5vw, 5rem);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: -0.08em;
    line-height: 0.9;
  }

  .trust-metrics dt span {
    margin-inline-start: 0.2em;
    color: #b9b9bf;
    font-size: 0.28em;
    letter-spacing: 0;
  }

  .trust-metrics dd {
    margin: 0;
    color: #b9b9bf;
    font-size: var(--font-size-small);
  }

  .documents-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    margin-block-start: var(--space-8);
  }

  .documents-row article {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid #3b3b3f;
  }

  .documents-row span {
    color: #f5ac68;
    font-size: var(--font-size-micro);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .process-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-block-start: var(--line);
    list-style: none;
  }

  .process-list li {
    display: grid;
    min-block-size: 18rem;
    align-content: space-between;
    gap: var(--space-6);
    padding: var(--space-6);
    border-inline-end: var(--line);
    border-block-end: var(--line);
  }

  .process-list li:first-child {
    border-inline-start: var(--line);
  }

  .process-list li > span {
    color: var(--color-action-text);
    font-size: var(--font-size-micro);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .process-list li > strong {
    font-size: var(--font-size-body-lg);
  }

  .process-list li > p {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
  }

  .reviews-section {
    background: var(--color-surface-soft);
  }

  .reviews {
    display: grid;
    grid-template-columns: 1.2fr 0.9fr 0.9fr;
    gap: var(--space-4);
  }

  .reviews article {
    display: grid;
    min-block-size: 20rem;
    align-content: space-between;
    gap: var(--space-8);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: var(--line);
    background: var(--color-paper);
  }

  .reviews article:first-child {
    border-block-start: 0.25rem solid var(--color-ink);
  }

  .reviews blockquote {
    color: var(--color-ink);
    font-size: clamp(1.125rem, 1.7vw, 1.375rem);
    font-weight: 600;
    line-height: 1.45;
  }

  .reviews footer {
    display: grid;
    gap: var(--space-1);
  }

  .reviews footer span {
    color: var(--color-action-text);
    font-size: var(--font-size-small);
    font-weight: 700;
  }

  .faq-layout {
    display: grid;
    grid-template-columns: minmax(16rem, 0.55fr) minmax(0, 1.45fr);
    align-items: start;
    gap: var(--space-12);
  }

  .faq-layout .section-head {
    position: sticky;
    inset-block-start: 7rem;
  }

  .faq {
    border-block-start: var(--line);
  }

  .faq details {
    border-block-end: var(--line);
  }

  .faq summary {
    display: grid;
    min-block-size: 5rem;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-4);
    color: var(--color-ink);
    font-size: var(--font-size-body-lg);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
  }

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

  .faq summary::after {
    display: grid;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    place-items: center;
    border: var(--line);
    content: "+";
    font-size: 1.4rem;
    font-weight: 400;
  }

  .faq details[open] summary::after {
    content: "−";
  }

  .faq details p {
    max-inline-size: 50rem;
    padding-block: 0 var(--space-6);
    color: var(--color-text-muted);
  }

  .custom-offer {
    padding-block: var(--space-12);
  }

  .custom-offer__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--space-8);
    overflow: hidden;
    padding-block: clamp(2rem, 6vw, 5rem);
    background: var(--color-ink);
    color: var(--color-paper);
  }

  .custom-offer__inner::after {
    position: absolute;
    inset-inline-end: -8%;
    inset-block-start: -80%;
    inline-size: 30%;
    aspect-ratio: 1;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 50%;
    content: "";
  }

  .custom-offer .eyebrow {
    color: #b9b9bf;
  }

  .custom-offer h2 {
    margin-block-start: var(--space-3);
    color: var(--color-paper);
  }

  .custom-offer p:last-child {
    max-inline-size: 48rem;
    margin-block-start: var(--space-4);
    color: #d9d9dd;
  }

  .custom-offer .button {
    position: relative;
    z-index: 2;
  }

  .service-section {
    border-block-end: var(--line);
  }

  .service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-block-start: var(--line);
  }

  .service-grid article {
    display: grid;
    min-block-size: 16rem;
    align-content: space-between;
    gap: var(--space-4);
    padding: var(--space-6);
    border-inline-end: var(--line);
    border-block-end: var(--line);
  }

  .service-grid article:first-child {
    border-inline-start: var(--line);
  }

  .service-grid article > span {
    color: var(--color-action-text);
    font-size: var(--font-size-micro);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .service-grid article p {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
  }

  .lead-section {
    background: var(--color-surface-soft);
  }

  .lead-layout {
    display: grid;
    grid-template-columns: minmax(18rem, 0.75fr) minmax(22rem, 1.25fr);
    align-items: start;
    gap: clamp(2rem, 8vw, 8rem);
  }

  .lead-copy {
    display: grid;
    gap: var(--space-4);
  }

  .lead-copy > p:last-of-type {
    color: var(--color-text-muted);
    font-size: var(--font-size-body-lg);
  }

  .lead-copy > a {
    margin-block-start: var(--space-8);
    color: var(--color-ink);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    text-decoration: none;
  }

  .lead-copy > span {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
  }

  .lead-form-shell {
    min-block-size: 32rem;
    padding: clamp(1.25rem, 4vw, 2.5rem);
    border: 1px solid var(--color-ink);
    background: var(--color-paper);
  }

  .lead-form {
    display: grid;
    gap: var(--space-4);
  }

  .form-field {
    display: grid;
    gap: var(--space-2);
  }

  .form-field label,
  .channel-choice legend {
    color: var(--color-ink);
    font-size: var(--font-size-small);
    font-weight: 700;
  }

  .form-field input,
  .form-field textarea {
    min-block-size: 3.5rem;
    inline-size: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-control);
    background: var(--color-paper);
    color: var(--color-ink);
    font: inherit;
  }

  .phone-input {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    min-block-size: 3.5rem;
    overflow: hidden;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-control);
    background: var(--color-paper);
    transition: border-color 160ms ease, box-shadow 160ms ease;
  }

  .phone-input:hover {
    border-color: var(--color-ink);
  }

  .phone-input:focus-within {
    border-color: var(--color-accent-text);
    box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--color-accent) 22%, transparent);
  }

  .phone-input:has(input[aria-invalid="true"]) {
    border-color: var(--color-error);
  }

  .phone-input__prefix {
    display: grid;
    align-self: stretch;
    place-items: center;
    padding-inline: 1rem 0.75rem;
    border-inline-end: 1px solid var(--color-line);
    color: var(--color-ink);
    font-weight: 700;
  }

  .form-field .phone-input input {
    min-block-size: 3.5rem;
    padding-inline: 0.875rem 1rem;
    border: 0;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
  }

  .form-field .phone-input input:hover {
    border-color: transparent;
  }

  .form-field__hint,
  .form-field__error {
    font-size: var(--font-size-micro);
    line-height: 1.4;
  }

  .form-field__hint {
    color: var(--color-text-muted);
  }

  .form-field__error {
    color: var(--color-error);
    font-weight: 650;
  }

  .form-field__error[hidden] {
    display: none;
  }

  .form-field textarea {
    min-block-size: 6.5rem;
    resize: vertical;
  }

  .form-field input:hover,
  .form-field textarea:hover {
    border-color: var(--color-ink);
  }

  .form-field label span {
    color: var(--color-text-muted);
    font-size: var(--font-size-micro);
    font-weight: 500;
  }

  .channel-choice {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .channel-choice legend {
    inline-size: 100%;
    margin-block-end: var(--space-1);
  }

  .channel-choice label {
    position: relative;
  }

  .channel-choice input {
    position: absolute;
    opacity: 0;
  }

  .channel-choice span {
    display: grid;
    min-block-size: var(--tap-size);
    place-items: center;
    padding-inline: 1rem;
    border: var(--line);
    border-radius: var(--radius-button);
    cursor: pointer;
  }

  .channel-choice input:checked + span {
    border-color: var(--color-ink);
    background: var(--color-ink);
    color: var(--color-paper);
  }

  .channel-choice input:focus-visible + span {
    outline: 0.1875rem solid var(--color-focus);
    outline-offset: 0.1875rem;
  }

  .consent {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    align-items: start;
    gap: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
  }

  .consent input {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    margin-block-start: 0.15rem;
    accent-color: var(--color-ink);
  }

  .form-legal-note {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
  }

  .consent a,
  .form-legal-note a {
    color: inherit;
    font-weight: 700;
  }

  .form-error {
    padding: var(--space-3);
    border-inline-start: 0.25rem solid var(--color-error);
    background: var(--color-error-soft);
    color: var(--color-error);
    font-size: var(--font-size-small);
  }

  .form-success {
    display: grid;
    min-block-size: 26rem;
    align-content: center;
    justify-items: start;
    gap: var(--space-4);
  }

  .form-success[hidden],
  .lead-form[hidden] {
    display: none;
  }

  .form-success__icon {
    display: grid;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-success);
    color: var(--color-paper);
    font-size: 1.5rem;
    font-weight: 800;
  }

  .landing-footer {
    background: var(--color-ink);
    color: var(--color-paper);
  }

  .landing-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 0.7fr);
    gap: var(--space-12);
    padding-block: var(--space-16);
  }

  .landing-footer__grid > div {
    display: grid;
    align-content: start;
    gap: var(--space-3);
  }

  .landing-footer__grid > div:first-child {
    max-inline-size: 24rem;
  }

  .landing-footer img {
    inline-size: 8rem;
    filter: grayscale(1) brightness(6);
  }

  .landing-footer p,
  .landing-footer span {
    color: #b9b9bf;
    font-size: var(--font-size-small);
  }

  .landing-footer a {
    color: var(--color-paper);
  }

  .landing-footer__bottom {
    display: flex;
    justify-content: space-between;
    gap: var(--space-6);
    padding-block: var(--space-4);
    border-block-start: 1px solid #3b3b3f;
  }

  .request-dialog {
    inline-size: min(calc(100% - 2rem), 42rem);
    max-block-size: calc(100dvh - 2rem);
    padding: 0;
    overflow-y: auto;
    border: 0;
    background: var(--color-paper);
    box-shadow: var(--shadow-float);
  }

  .request-dialog::backdrop {
    background: var(--color-overlay);
  }

  .request-dialog__inner {
    display: grid;
    gap: var(--space-6);
    padding: clamp(1.25rem, 5vw, 2.5rem);
  }

  .request-dialog__head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-6);
  }

  .request-dialog__head h2 {
    max-inline-size: 18ch;
    margin-block-start: var(--space-2);
    font-family: var(--font-body);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    letter-spacing: -0.04em;
  }

  .request-dialog__intro {
    max-inline-size: 34rem;
    margin-block-start: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
  }

  .dialog-close {
    display: grid;
    min-inline-size: var(--tap-size);
    min-block-size: var(--tap-size);
    place-items: center;
    border: var(--line);
    border-radius: 50%;
    background: var(--color-paper);
  }

  .dialog-close:hover {
    border-color: var(--color-ink);
    background: var(--color-surface-soft);
  }

  .dialog-close svg {
    inline-size: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.75;
  }

  .noscript {
    position: fixed;
    z-index: 100;
    inset-inline: 0;
    inset-block-end: 0;
    padding: 1rem;
    background: var(--color-error);
    color: var(--color-paper);
    text-align: center;
  }

  @media (max-width: 68rem) {
    .landing-nav,
    .header-phone {
      display: none;
    }

    .landing-header__inner .button {
      margin-inline-start: auto;
    }

    .hero__copy {
      grid-column: 1 / 7;
    }

    .hero__visual {
      grid-column: 7 / -1;
    }

    .hero__product-callout {
      display: none;
    }

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

    .hero__trust div:nth-child(2) {
      border-inline-end: 0;
    }

    .hero__trust div:nth-child(-n + 2) {
      border-block-end: 1px solid var(--color-ink-raised);
    }

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

    .fitment__footer {
      display: grid;
      gap: var(--space-3);
    }

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

    .fitment-selected__action {
      grid-column: 1 / -1;
      min-block-size: 0;
      grid-template-columns: minmax(10rem, 1fr) minmax(14rem, auto);
      align-items: center;
    }

    .fitment-selected__action .fitment-selected__field-title,
    .fitment-selected__action > small {
      grid-column: 1;
    }

    .fitment-selected__action .button {
      grid-column: 2;
      grid-row: 1 / 3;
    }

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

    .use-cases__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .fitment-protocol__grid {
      grid-template-columns: 1fr;
    }

    .order-summary {
      position: static;
    }

    .engineering-main {
      grid-column: 1 / 9;
    }

    .spec-card,
    .spec-card--large {
      grid-column: 9 / -1;
    }

    .trust-metrics,
    .documents-row,
    .process-list,
    .service-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .reviews article:first-child {
      grid-column: 1 / -1;
    }

    .landing-footer__grid {
      grid-template-columns: 1.3fr repeat(2, 1fr);
    }

    .landing-footer__grid > div:last-child {
      grid-column: 2;
    }
  }

  @media (max-width: 48rem) {
    body {
      padding-block-end: 5.25rem;
    }

    .landing-header__inner {
      min-block-size: 4rem;
    }

    .logo {
      inline-size: 6.75rem;
    }

    .landing-header__inner .button {
      min-block-size: 2.5rem;
      padding-inline: 0.75rem;
      font-size: var(--font-size-micro);
    }

    .hero__grid {
      grid-template-columns: 1fr;
      padding-block-start: var(--space-12);
    }

    .hero__copy,
    .hero__visual,
    .fitment,
    .hero__trust {
      grid-column: 1;
    }

    .hero__copy h1 {
      font-size: clamp(2.125rem, 11vw, 3.5rem);
    }

    .hero__visual {
      min-block-size: 0;
    }

    .hero__visual-head {
      grid-template-columns: 1fr;
      gap: var(--space-2);
    }

    .hero__technical-stage img {
      inline-size: 116%;
      margin-inline: -8%;
      padding-block: 3.5rem 1rem;
    }

    .hero__visual figcaption {
      grid-template-columns: 1fr;
    }

    .hero__visual figcaption span {
      min-block-size: 2.75rem;
      border-inline-end: 0;
      border-block-end: 1px solid var(--color-ink-raised);
    }

    .hero__visual figcaption span:last-child {
      border-block-end: 0;
    }

    .hero__actions {
      align-items: stretch;
    }

    .hero__actions .button {
      inline-size: 100%;
    }

    .hero__text-link {
      justify-content: space-between;
    }

    .hero__facts {
      display: grid;
    }

    .fitment {
      margin-inline: calc(-1 * var(--gutter));
      grid-template-columns: 1fr;
      clip-path: none;
    }

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

    .fitment__step {
      inline-size: auto;
      block-size: auto;
      justify-self: start;
      padding: 0.45rem 0.65rem;
      background: var(--color-action);
      color: var(--color-ink);
    }

    .fitment__search input {
      min-block-size: 3.75rem;
      font-size: 1rem;
    }

    .fitment__search-icon {
      inset-block-start: 1.05rem;
    }

    .fitment-results {
      position: fixed;
      z-index: 50;
      inset-inline: 0.5rem;
      inset-block: auto 0.5rem;
      max-block-size: min(70dvh, 34rem);
      border-radius: var(--radius-card);
    }

    .fitment-result {
      min-block-size: 3.75rem;
    }

    .fitment-selected {
      gap: var(--space-4);
      padding: var(--space-4);
    }

    .fitment-selected__summary {
      grid-template-columns: auto minmax(0, 1fr);
    }

    .fitment-selected__change {
      grid-column: 1 / -1;
      inline-size: 100%;
    }

    .fitment-selected__controls {
      grid-template-columns: 1fr;
    }

    .fitment-selected__year,
    .fitment-selected__bodies,
    .fitment-selected__action {
      min-block-size: 0;
    }

    .fitment-selected__action {
      grid-column: auto;
      grid-template-columns: 1fr;
    }

    .fitment-selected__action .fitment-selected__field-title,
    .fitment-selected__action > small,
    .fitment-selected__action .button {
      grid-column: 1;
      grid-row: auto;
    }

    .fitment-selected__body-options label {
      flex: 1 1 calc(50% - var(--space-2));
    }

    .fitment-selected__body-options label span {
      inline-size: 100%;
    }

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

    .hero__trust div {
      border-inline-end: 0;
      border-block-end: 1px solid var(--color-ink-raised);
    }

    .hero__trust div:last-child {
      border-block-end: 0;
    }

    .legal-strip__grid,
    .section-head--split,
    .trust-intro,
    .faq-layout,
    .lead-layout {
      grid-template-columns: 1fr;
    }

    .legal-strip__icon {
      inline-size: 3rem;
      block-size: 3rem;
    }

    .section-head--split {
      gap: var(--space-6);
    }

    .fit-visual img {
      min-block-size: 27rem;
      padding: 6rem 0.5rem 7rem;
    }

    .fit-visual__callout {
      max-inline-size: 9.5rem;
      padding: var(--space-2);
    }

    .fit-visual__callout small {
      display: none;
    }

    .fit-visual__callout--front {
      inset-block-start: 26%;
      inset-inline-start: 16%;
    }

    .fit-visual__callout--pillar {
      inset-block-end: 19%;
      inset-inline-start: 42%;
    }

    .fit-visual__callout--quarter {
      inset-block-start: 29%;
      inset-inline-end: 2%;
    }

    .compare-notes {
      grid-template-columns: 1fr;
    }

    .compare-notes p {
      border-inline-end: 0;
      border-block-end: var(--line);
    }

    .compare-notes p:last-child {
      border-block-end: 0;
    }

    .car-stage {
      min-block-size: 29rem;
      margin-inline: calc(-1 * var(--gutter));
    }

    .constructor-car {
      inset-inline: 0;
      inset-block-start: 25%;
      inline-size: 100%;
      block-size: 56%;
    }

    .window-zone {
      min-inline-size: var(--tap-size);
      min-block-size: var(--tap-size);
      padding: 0;
      justify-content: center;
      font-size: 0;
      border-radius: 50%;
    }

    .window-zone span {
      min-inline-size: auto;
      inline-size: 100%;
      block-size: 100%;
      border-inline-end: 0;
      border-radius: 50%;
      font-size: var(--font-size-micro);
    }

    .window-zone strong {
      display: none;
    }

    .window-zone--front {
      inset-inline-start: 24%;
      inset-block-start: 45%;
    }

    .window-zone--rear {
      inset-inline-start: 52%;
      inset-block-start: 42%;
    }

    .window-zone--quarter {
      inset-inline-start: 75%;
      inset-block-start: 48%;
    }

    .window-zone--back {
      inset-inline-start: auto;
      inset-inline-end: 4%;
      inset-block-start: 57%;
    }

    .config-lock {
      inset: auto 0 0;
      max-inline-size: none;
      padding: var(--space-6) var(--gutter);
    }

    .preset-panel {
      grid-template-columns: 1fr;
    }

    .preset-list {
      justify-content: start;
    }

    .preset {
      flex: 1;
    }

    .fitment-protocol li div {
      grid-template-columns: 1fr;
      gap: var(--space-2);
    }

    .zone-panel {
      margin-inline: calc(-1 * var(--gutter));
      border-inline: 0;
    }

    .zone-row {
      min-block-size: 5rem;
    }

    .zone-row small {
      display: none;
    }

    .trim-options,
    .trim-comparison,
    .trust-metrics,
    .documents-row,
    .process-list,
    .reviews,
    .service-grid,
    .landing-footer__grid {
      grid-template-columns: 1fr;
    }

    .use-cases__grid {
      grid-template-columns: 1fr;
    }

    .use-cases__grid article {
      min-block-size: 0;
    }

    .use-cases__grid span {
      margin-block-end: var(--space-8);
    }

    .trim-card {
      min-block-size: 0;
    }

    .trim-card + .trim-card {
      border-block-start: 0;
      border-inline-start: var(--line);
    }

    .trim-card__title {
      min-block-size: 2.75rem;
    }

    .order-summary {
      display: none;
    }

    .mobile-summary.is-visible {
      position: fixed;
      z-index: 25;
      inset-inline: 0;
      inset-block-end: 0;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: var(--space-4);
      padding: 0.75rem var(--gutter);
      border-block-start: var(--line);
      background: var(--color-paper);
      box-shadow: 0 -0.5rem 1.5rem rgb(11 11 12 / 8%);
    }

    .mobile-summary > div {
      display: grid;
    }

    .mobile-summary span {
      color: var(--color-text-muted);
      font-size: var(--font-size-micro);
    }

    .mobile-summary__old {
      margin-inline-start: 0.3rem;
      font-variant-numeric: tabular-nums;
    }

    .mobile-summary__old:empty {
      display: none;
    }

    .mobile-summary strong {
      color: var(--color-ink);
      font-size: 1.25rem;
      font-variant-numeric: tabular-nums;
    }

    .engineering-layout {
      grid-template-columns: 1fr;
    }

    .engineering-main,
    .spec-card,
    .spec-card--large {
      grid-column: 1;
    }

    .engineering-main {
      grid-row: auto;
    }

    .mesh-specimen {
      min-block-size: 18rem;
    }

    .trim-comparison article {
      border-inline-end: 0;
      border-block-end: var(--line);
    }

    .trim-comparison article:last-child {
      border-block-end: 0;
    }

    .compare-table {
      min-inline-size: 40rem;
    }

    .trust-metrics div,
    .documents-row article,
    .process-list li,
    .service-grid article {
      border-inline: var(--line);
      border-block-end: var(--line);
    }

    .trust-metrics div {
      min-block-size: 10rem;
    }

    .reviews article:first-child {
      grid-column: 1;
    }

    .faq-layout .section-head {
      position: static;
    }

    .custom-offer__inner {
      grid-template-columns: 1fr;
      align-items: start;
      padding-inline: var(--gutter);
    }

    .custom-offer .button {
      inline-size: 100%;
    }

    .lead-form-shell {
      margin-inline: calc(-1 * var(--gutter));
      border-inline: 0;
    }

    .channel-choice label {
      flex: 1;
    }

    .channel-choice span {
      inline-size: 100%;
      padding-inline: 0.5rem;
    }

    .landing-footer__grid > div:last-child {
      grid-column: 1;
    }

    .landing-footer__bottom {
      display: grid;
    }
  }
}

/* A single, contextual recovery prompt for an interrupted configurator session. */
@layer components {
  .constructor-assist {
    position: fixed;
    z-index: 28;
    inset-inline-end: clamp(1rem, 3vw, 2.5rem);
    inset-block-end: clamp(1rem, 3vw, 2rem);
    inline-size: min(27rem, calc(100vw - 2rem));
    padding: 1.35rem;
    border: 2px solid var(--color-ink);
    background: var(--color-action);
    box-shadow: 0 1rem 3rem rgb(11 11 12 / 20%);
    color: var(--color-ink);
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .constructor-assist[hidden] {
    display: none;
  }

  .constructor-assist.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .constructor-assist .eyebrow {
    padding-inline-end: 2.5rem;
    color: var(--color-ink);
  }

  .constructor-assist h2 {
    max-inline-size: 18ch;
    margin-block-start: 0.35rem;
    font-size: clamp(1.5rem, 2.3vw, 2rem);
    line-height: 1.02;
  }

  .constructor-assist > p:last-of-type {
    max-inline-size: 38ch;
    margin-block-start: 0.75rem;
    line-height: 1.45;
  }

  .constructor-assist__close {
    position: absolute;
    inset-block-start: 0.8rem;
    inset-inline-end: 0.8rem;
    display: grid;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    padding: 0;
    place-items: center;
    border: 1px solid var(--color-ink);
    border-radius: 50%;
    background: transparent;
    color: var(--color-ink);
    cursor: pointer;
  }

  .constructor-assist__close svg {
    inline-size: 1.15rem;
    fill: none;
    stroke: currentcolor;
    stroke-linecap: round;
    stroke-width: 2;
  }

  .constructor-assist__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-block-start: 1.1rem;
  }

  .constructor-assist__actions .button {
    min-block-size: var(--tap-size);
    padding-inline: 1rem;
    white-space: nowrap;
  }

  .constructor-assist__continue {
    min-block-size: var(--tap-size);
    padding: 0;
    border: 0;
    border-block-end: 1px solid currentcolor;
    background: transparent;
    color: var(--color-ink);
    font: inherit;
    font-size: var(--font-size-small);
    font-weight: 750;
    cursor: pointer;
  }

  @media (max-width: 48rem) {
    .constructor-assist {
      inset-inline: var(--gutter);
      inset-block-end: calc(4.75rem + env(safe-area-inset-bottom, 0px));
      inline-size: auto;
      padding: 1.1rem;
    }

    .constructor-assist h2 {
      font-size: 1.45rem;
    }

    .constructor-assist > p:last-of-type {
      padding-inline-end: 0.25rem;
      font-size: var(--font-size-small);
    }

    .constructor-assist__actions {
      align-items: stretch;
      flex-direction: column;
      gap: 0.35rem;
    }

    .constructor-assist__actions .button,
    .constructor-assist__continue {
      inline-size: 100%;
    }

    .constructor-assist__actions .button {
      white-space: normal;
    }

    .constructor-assist__continue {
      border-block-end: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .constructor-assist {
      transition: none;
    }
  }
}

/* Mobile contact availability: a visible phone in the header and a persistent fallback action. */
@layer components {
  .mobile-contact-dock {
    display: none;
  }

  @media (max-width: 48rem) {
    .landing-header__inner {
      gap: 0.25rem;
    }

    .landing-header .logo {
      inline-size: clamp(5rem, 21vw, 6rem);
    }

    .landing-header .header-phone {
      display: flex;
      min-inline-size: 0;
      align-items: center;
      margin-inline-start: auto;
      color: var(--color-ink);
      text-align: start;
      white-space: nowrap;
    }

    .landing-header .header-phone span {
      display: none;
    }

    .landing-header .header-phone strong {
      font-size: clamp(0.625rem, 2.7vw, 0.8rem);
      letter-spacing: -0.045em;
    }

    .landing-header .header-channels {
      gap: 0;
      margin-inline-start: 0;
    }

    .landing-header .header-channels .header-channel-icon {
      min-inline-size: 2.4rem;
      inline-size: 2.4rem;
      min-block-size: 2.4rem;
    }

    .landing-header .header-channel-icon img {
      inline-size: 1.5rem;
      block-size: 1.5rem;
    }

    .mobile-contact-dock {
      position: fixed;
      z-index: 26;
      inset-inline: 0;
      inset-block-end: 0;
      display: grid;
      grid-template-columns: 1fr 1.25fr;
      gap: 0.5rem;
      padding: 0.625rem var(--gutter);
      border-block-start: var(--line);
      background: var(--color-paper);
      box-shadow: 0 -0.5rem 1.5rem rgb(11 11 12 / 8%);
    }

    .mobile-contact-dock :is(a, button) {
      display: grid;
      min-block-size: var(--tap-size);
      place-items: center;
      border: var(--line);
      border-radius: var(--radius-button);
      color: var(--color-ink);
      font: inherit;
      font-size: var(--font-size-small);
      font-weight: 800;
      text-decoration: none;
    }

    .mobile-contact-dock a {
      background: var(--color-paper);
    }

    .mobile-contact-dock button {
      background: var(--color-action);
      cursor: pointer;
    }

    body:has(.mobile-summary.is-visible) .mobile-contact-dock {
      display: none;
    }
  }
}

/* On touch devices, keep model matches in the visual viewport when the
   on-screen keyboard is open instead of pinning the list below it. */
@layer components {
  @media (max-width: 48rem) {
    .fitment.is-searching .fitment__alternative,
    .fitment.is-searching .fitment__footer,
    .fitment.is-searching .fitment-selected {
      display: none;
    }

    .fitment.is-searching .fitment-results {
      position: static;
      inset: auto;
      z-index: 35;
      max-block-size: min(var(--fitment-search-results-max, 20rem), 20rem);
      margin-block-start: 0.5rem;
      border-radius: var(--radius-card);
    }
  }
}

/* Configurator guidance: compact, honest bundle progress on narrow screens. */
@layer components {
  @media (max-width: 48rem) {
    .discount__head {
      align-items: flex-start;
    }

    .discount__head span {
      max-inline-size: 7rem;
      text-align: end;
    }

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

    .discount__action {
      grid-column: 1;
      grid-row: auto;
      justify-self: stretch;
    }
  }
}

/* Funnel continuity and mobile conversion layout. */
@layer components {
  .configurator-flow {
    border-block: var(--line);
    background: var(--color-surface-soft);
  }

  .configurator-flow__intro {
    padding-block: clamp(2rem, 4vw, 3.25rem);
    border-block-end: var(--line);
  }

  .configurator-flow__intro h2 {
    max-inline-size: 24ch;
    margin-block-start: var(--space-2);
    font-size: clamp(2rem, 3.4vw, 3.25rem);
  }

  .fitment-entry {
    padding-block: clamp(2.5rem, 5vw, 4.5rem) 0;
    background: transparent;
  }

  .configurator-flow .fitment-entry {
    padding-block-start: var(--space-5);
  }

  .fitment-entry .fitment {
    margin-block: 0;
  }

  .configurator-flow .constructor-section {
    padding-block-start: clamp(1.5rem, 3vw, 2.5rem);
    border-block: 0;
    background: transparent;
  }

  .constructor-help {
    padding-block: clamp(1.5rem, 3vw, 2.5rem);
    border-block-start: var(--line);
  }

  .constructor-help__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: clamp(1.25rem, 3vw, 2rem);
    border: var(--line);
    background: var(--color-paper);
  }

  .constructor-help__inner h2 {
    margin-block-start: var(--space-2);
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  }

  .constructor-help__inner p:last-child {
    max-inline-size: 48rem;
    margin-block-start: var(--space-2);
    color: var(--color-text-muted);
  }

  .constructor-help__inner .button {
    flex: none;
  }

  .constructor-help__inner {
    border-color: var(--color-ink);
    background: var(--color-action);
  }

  .constructor-help__inner :is(.eyebrow, h2),
  .constructor-help__inner p:last-child {
    color: var(--color-ink);
  }

  .section-return-link {
    display: inline-flex;
    min-block-size: var(--tap-size);
    align-items: center;
    margin-block-start: var(--space-7);
    border-block-end: 1px solid currentcolor;
    color: var(--color-ink);
    font-weight: 750;
    text-decoration: none;
  }

  .section-return-link:hover {
    color: var(--color-action-text);
  }

  @media (max-width: 48rem) {
    .header-channels button {
      min-block-size: var(--tap-size);
      padding-inline: 0.65rem;
    }

    .fitment-entry {
      padding-block-start: var(--space-8);
    }

    .configurator-flow__intro {
      padding-block: var(--space-6);
    }

    .configurator-flow .fitment-entry {
      padding-block-start: var(--space-3);
    }

    .configurator-flow .constructor-section {
      padding-block-start: var(--space-5);
    }

    .constructor-help {
      padding-block: var(--space-4);
    }

    .constructor-help__inner {
      align-items: start;
      flex-direction: column;
      gap: var(--space-4);
    }

    .constructor-help__inner .button {
      inline-size: 100%;
    }

    .fitment-entry .fitment {
      margin-inline: calc(-1 * var(--gutter));
    }

    .fitment__heading .eyebrow {
      margin-block-end: var(--space-2);
    }

    .compare-table-wrap {
      overflow: visible;
      border: 0;
    }

    .compare-table {
      display: block;
      min-inline-size: 0;
    }

    .compare-table thead {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }

    .compare-table tbody {
      display: grid;
      gap: var(--space-3);
    }

    .compare-table tr {
      display: grid;
      border: var(--line);
      background: var(--color-paper);
    }

    .compare-table td {
      display: grid;
      gap: var(--space-2);
      padding: var(--space-4);
      border-block-end: 0;
    }

    .compare-table td:first-child {
      border-block-end: var(--line);
    }

    .compare-table td::before {
      color: var(--color-text-muted);
      font-size: 0.6875rem;
      font-weight: 850;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .compare-table td:first-child::before {
      content: "Дешёвые аналоги";
    }

    .compare-table td:nth-child(2)::before {
      color: var(--color-ink);
      content: "TROKOT";
    }

    .compare-table td span {
      margin-block-start: 0;
    }

    .section-return-link {
      inline-size: 100%;
      justify-content: center;
      border: var(--line);
      border-radius: var(--radius-button);
      background: var(--color-paper);
    }
  }
}

/* Post-configurator conversion funnel and compact contact controls. */
@layer components {
  .header-channels {
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }

  .header-channels button {
    min-block-size: 2.5rem;
    padding-inline: 0.75rem;
    border: var(--line);
    border-radius: var(--radius-button);
    background: var(--color-paper);
    color: var(--color-ink);
    font: inherit;
    font-size: var(--font-size-micro);
    font-weight: 750;
    cursor: pointer;
  }

  .header-channels button:hover {
    border-color: var(--color-ink);
    background: var(--color-surface-soft);
  }

  .header-channels .header-channel-icon {
    display: grid;
    min-inline-size: 2.75rem;
    inline-size: 2.75rem;
    min-block-size: 2.75rem;
    padding: 0;
    place-items: center;
    border-color: transparent;
    background: transparent;
    color: var(--color-action);
    cursor: pointer;
    text-decoration: none;
  }

  .header-channel-icon img {
    display: block;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    object-fit: contain;
    transition:
      filter var(--duration-fast),
      scale var(--duration-fast),
      rotate var(--duration-fast);
  }

  .header-channels .header-channel-icon:hover,
  .header-channels .header-channel-icon:focus-visible {
    border-color: transparent;
    background: transparent;
    color: var(--color-action-hover);
  }

  .header-channel-icon:hover img,
  .header-channel-icon:focus-visible img {
    filter: brightness(0.86) saturate(1.2);
    scale: 1.08;
  }

  .header-channel-icon--telegram:hover img {
    rotate: -4deg;
  }

  .header-channels button:last-child {
    border-color: var(--color-ink);
    background: var(--color-ink);
    color: var(--color-paper);
  }

  .legal-strip__copy {
    display: grid;
    gap: var(--space-3);
  }

  .legal-strip__copy p {
    color: var(--color-text-muted);
  }

  .legal-strip__copy a {
    inline-size: fit-content;
    color: var(--color-ink);
    font-size: var(--font-size-small);
    font-weight: 750;
    text-underline-offset: 0.25em;
  }

  .benefits-section {
    border-block-end: var(--line);
  }

  .benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-block-start: var(--line);
    border-inline-start: var(--line);
  }

  .benefit-card {
    display: grid;
    min-block-size: 17rem;
    align-content: space-between;
    gap: var(--space-6);
    padding: clamp(1.25rem, 2.5vw, 2rem);
    border-inline-end: var(--line);
    border-block-end: var(--line);
    background: var(--color-paper);
  }

  .benefit-card--primary {
    background: var(--color-ink);
    color: var(--color-paper);
  }

  .benefit-card__number {
    color: var(--color-action-text);
    font-size: var(--font-size-micro);
    font-weight: 800;
    letter-spacing: 0.1em;
  }

  .benefit-card--primary .benefit-card__number {
    color: var(--color-action);
  }

  .benefit-card__visual {
    position: relative;
    display: block;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    align-self: start;
    border: 1px solid currentcolor;
    color: var(--color-ink);
  }

  .benefit-card--primary .benefit-card__visual {
    color: var(--color-action);
  }

  .benefit-card__visual i,
  .benefit-card__visual::before,
  .benefit-card__visual::after {
    position: absolute;
    display: block;
    content: "";
  }

  .benefit-card__visual--sun i:first-child {
    inset: 50% auto auto 50%;
    inline-size: 1.2rem;
    block-size: 1.2rem;
    border: 2px solid currentcolor;
    border-radius: 50%;
    translate: -50% -50%;
  }

  .benefit-card__visual--sun::before,
  .benefit-card__visual--sun::after {
    inset: 50% auto auto 50%;
    background: currentcolor;
    translate: -50% -50%;
  }

  .benefit-card__visual--sun::before {
    inline-size: 2.4rem;
    block-size: 1px;
  }

  .benefit-card__visual--sun::after {
    inline-size: 1px;
    block-size: 2.4rem;
  }

  .benefit-card__visual--air i {
    inset-inline-start: 0.7rem;
    inline-size: 2rem;
    border-block-start: 2px solid currentcolor;
  }

  .benefit-card__visual--air i:first-child {
    inset-block-start: 1.15rem;
  }

  .benefit-card__visual--air i:last-child {
    inset-block-start: 2.3rem;
    inline-size: 1.45rem;
  }

  .benefit-card__visual--air::before {
    inset-block-start: 1.72rem;
    inset-inline-start: 1.25rem;
    inline-size: 1.55rem;
    border-block-start: 2px solid currentcolor;
  }

  .benefit-card__visual--privacy i:first-child {
    inset: 0.85rem;
    border: 2px solid currentcolor;
    border-radius: 70% 0;
    rotate: 45deg;
  }

  .benefit-card__visual--privacy i:last-child {
    inset: 50% auto auto 50%;
    inline-size: 0.55rem;
    block-size: 0.55rem;
    border-radius: 50%;
    background: currentcolor;
    translate: -50% -50%;
  }

  .benefit-card__visual--interior i:first-child {
    inset: 0.8rem 0.75rem;
    border: 2px solid currentcolor;
    border-start-start-radius: 0.75rem;
    border-start-end-radius: 0.75rem;
  }

  .benefit-card__visual--interior i:last-child {
    inset-block-start: 0.55rem;
    inset-inline-end: 0.5rem;
    inline-size: 0.65rem;
    block-size: 0.65rem;
    border: 2px solid var(--color-action);
    border-radius: 50%;
    background: var(--color-paper);
  }

  .benefit-card__visual--family i {
    border: 2px solid currentcolor;
    border-radius: 50%;
  }

  .benefit-card__visual--family i:first-child {
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
    inline-size: 0.9rem;
    block-size: 0.9rem;
  }

  .benefit-card__visual--family i:last-child {
    inset-block-end: 0.65rem;
    inset-inline-end: 0.65rem;
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }

  .benefit-card__visual--family::before {
    inset-block-end: 0.65rem;
    inset-inline-start: 0.55rem;
    inline-size: 1.25rem;
    block-size: 0.85rem;
    border: 2px solid currentcolor;
    border-block-end: 0;
    border-radius: 1rem 1rem 0 0;
  }

  .benefit-card__visual--install i:first-child {
    inset: 0.72rem;
    border: 2px solid currentcolor;
  }

  .benefit-card__visual--install i:last-child {
    inset: 50% auto auto 50%;
    inline-size: 1.35rem;
    block-size: 2px;
    background: currentcolor;
    translate: -50% -50%;
  }

  .benefit-card__visual--install i:last-child::after {
    position: absolute;
    inset: 50% auto auto 50%;
    inline-size: 2px;
    block-size: 1.35rem;
    background: currentcolor;
    content: "";
    translate: -50% -50%;
  }

  .benefit-card h3 {
    align-self: end;
    font-size: clamp(1.125rem, 1.7vw, 1.45rem);
  }

  .benefit-card--primary h3 {
    color: var(--color-paper);
  }

  .benefit-card p {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
  }

  .benefit-card--primary p {
    color: #d9d9dd;
  }

  .fit-process-section {
    overflow: hidden;
    background: var(--color-surface-soft);
  }

  .fit-process {
    display: grid;
    padding: 0;
    margin: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
  }

  .fit-process li {
    min-inline-size: 0;
  }

  .fit-process__route {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .fit-process__route span {
    display: grid;
    inline-size: 3.25rem;
    block-size: 3.25rem;
    flex: none;
    place-items: center;
    border-radius: 50%;
    background: var(--color-ink);
    color: var(--color-action);
    font-size: var(--font-size-micro);
    font-weight: 850;
  }

  .fit-process li:last-child .fit-process__route span {
    background: var(--color-action);
    color: var(--color-ink);
  }

  .fit-process__route i {
    position: relative;
    display: block;
    block-size: 2px;
    flex: 1;
    background: var(--color-action);
  }

  .fit-process__route i::after {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 0;
    inline-size: 0.55rem;
    block-size: 0.55rem;
    border-block-start: 2px solid var(--color-action);
    border-inline-end: 2px solid var(--color-action);
    content: "";
    rotate: 45deg;
    translate: 0 -50%;
  }

  .fit-process__content {
    padding-block-start: var(--space-5);
    padding-inline-end: clamp(1.25rem, 3vw, 3rem);
  }

  .fit-process__content h3 {
    max-inline-size: 14rem;
    margin-block-end: var(--space-3);
    font-size: var(--font-size-body-lg);
  }

  .fit-process__content p {
    max-inline-size: 18rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
  }

  .fit-process__result {
    display: grid;
    margin-block-start: clamp(2.5rem, 5vw, 4.5rem);
    grid-template-columns: minmax(8rem, 0.45fr) minmax(0, 1.55fr);
    border-block-start: 2px solid var(--color-ink);
  }

  .fit-process__result :is(span, strong) {
    padding-block: var(--space-4);
  }

  .fit-process__result span {
    color: var(--color-action-text);
    font-size: var(--font-size-micro);
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .fit-process__result strong {
    font-size: clamp(1.125rem, 2vw, 1.6rem);
    line-height: 1.25;
  }

  .construction-section {
    background: var(--color-paper);
  }

  .construction-section .compare-table-wrap {
    border: var(--line);
  }

  .documents-row :is(article, a) {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid #3b3b3f;
    color: var(--color-paper);
    text-decoration: none;
  }

  .documents-row a:hover {
    border-color: var(--color-action);
  }

  .reviews-source {
    display: inline-flex;
    margin-block-start: var(--space-6);
    color: var(--color-ink);
    font-weight: 750;
    text-underline-offset: 0.25em;
  }

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

  .service-grid--three article {
    min-block-size: 14rem;
  }

  .faq-layout .section-head > p {
    margin-block-start: var(--space-3);
    font-size: var(--font-size-body);
  }

  @media (max-width: 68rem) {
    .header-channels {
      margin-inline-start: auto;
    }

    .landing-header__inner > .button {
      margin-inline-start: 0;
    }

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

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

  @media (max-width: 48rem) {
    .landing-header__inner {
      gap: 0.5rem;
    }

    .landing-header__inner > .button {
      display: none;
    }

    .header-channels button {
      min-block-size: var(--tap-size);
      padding-inline: 0.65rem;
      font-size: 0.6875rem;
    }

    .header-channels .header-channel-icon {
      min-inline-size: var(--tap-size);
      inline-size: var(--tap-size);
      min-block-size: var(--tap-size);
      padding: 0;
    }

    .header-channels button:last-child {
      display: none;
    }

    .legal-strip__grid {
      gap: var(--space-4);
    }

    .legal-strip__copy {
      grid-column: 1;
    }

    .benefit-grid,
    .service-grid--three {
      grid-template-columns: 1fr;
    }

    .benefit-card,
    .service-grid--three article {
      min-block-size: 0;
    }

    .benefit-card {
      gap: var(--space-4);
    }

    .fit-process {
      grid-template-columns: 1fr;
    }

    .fit-process li {
      display: grid;
      grid-template-columns: 3.25rem minmax(0, 1fr);
      column-gap: var(--space-4);
    }

    .fit-process__route {
      grid-row: 1;
      align-items: stretch;
      flex-direction: column;
    }

    .fit-process__route i {
      inline-size: 2px;
      min-block-size: 3rem;
      flex: 1;
    }

    .fit-process__route i::after {
      inset-block-start: auto;
      inset-block-end: 0;
      inset-inline-end: 50%;
      rotate: 135deg;
      translate: 50% 0;
    }

    .fit-process__content {
      padding-block: 0 var(--space-7);
      padding-inline-end: 0;
    }

    .fit-process__content :is(h3, p) {
      max-inline-size: none;
    }

    .fit-process__result {
      margin-block-start: var(--space-3);
      grid-template-columns: 1fr;
    }

    .fit-process__result strong {
      padding-block-start: 0;
    }

    .trust-metrics dt {
      font-size: clamp(2.1rem, 12vw, 3.75rem);
    }

    .documents-row :is(article, a) {
      border: 1px solid #3b3b3f;
    }

    .reviews article {
      min-block-size: 15rem;
    }

    .faq summary {
      min-block-size: 4.5rem;
      font-size: 1rem;
    }
  }
}

/* Configurator infographic: callouts stay outside the car and selected glass lights up. */
@layer components {
  .car-visual {
    position: absolute;
    z-index: 1;
    inset-block-start: 23%;
    inset-inline: 5%;
    inline-size: 90%;
    aspect-ratio: 1896 / 832;
  }

  .constructor-car {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
  }

  .window-highlight {
    position: absolute;
    z-index: 2;
    inset: 0;
    padding: 0;
    border: 0;
    background: rgb(242 154 56 / 82%);
    cursor: pointer;
    filter: saturate(1.08);
    font: inherit;
    mix-blend-mode: multiply;
    opacity: 0;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 180ms ease;
  }

  .window-highlight.is-active {
    opacity: 1;
  }

  .window-highlight:not(.is-active):is(:hover, :focus-visible),
  .car-stage:has(.window-zone--front:hover, .window-zone--front:focus-visible) .window-highlight--front:not(.is-active),
  .car-stage:has(.window-zone--rear:hover, .window-zone--rear:focus-visible) .window-highlight--rear:not(.is-active),
  .car-stage:has(.window-zone--quarter:hover, .window-zone--quarter:focus-visible) .window-highlight--quarter:not(.is-active),
  .car-stage:has(.window-zone--back:hover, .window-zone--back:focus-visible) .window-highlight--back:not(.is-active) {
    opacity: 0.35;
  }

  .window-highlight:focus-visible {
    outline: 0;
    filter: saturate(1.08) drop-shadow(0 0 0.2rem var(--color-ink));
  }

  .window-highlight:disabled {
    cursor: default;
    pointer-events: none;
  }

  .window-marker {
    position: absolute;
    z-index: 3;
    display: grid;
    inline-size: clamp(1.35rem, 1.65vw, 1.6rem);
    aspect-ratio: 1;
    place-items: center;
    border: 1.5px solid var(--color-paper);
    border-radius: 50%;
    background: var(--color-ink);
    color: var(--color-paper);
    box-shadow: 0 0 0 1px rgb(11 11 12 / 32%), 0 0.2rem 0.5rem rgb(11 11 12 / 14%);
    font-size: 1rem;
    font-weight: 750;
    line-height: 1;
    pointer-events: none;
    translate: -50% -50%;
    transition: background var(--duration-fast), color var(--duration-fast), scale var(--duration-fast);
  }

  .window-marker::before {
    content: "+";
    translate: 0 -0.04em;
  }

  .window-marker.is-active {
    background: var(--color-action);
    color: var(--color-ink);
    scale: 1.08;
  }

  .window-marker.is-active::before {
    content: "✓";
    font-size: 0.8rem;
    translate: 0;
  }

  .car-stage:has(.window-highlight--front:hover, .window-highlight--front:focus-visible, .window-zone--front:hover, .window-zone--front:focus-visible) .window-marker--front:not(.is-active),
  .car-stage:has(.window-highlight--rear:hover, .window-highlight--rear:focus-visible, .window-zone--rear:hover, .window-zone--rear:focus-visible) .window-marker--rear:not(.is-active),
  .car-stage:has(.window-highlight--quarter:hover, .window-highlight--quarter:focus-visible, .window-zone--quarter:hover, .window-zone--quarter:focus-visible) .window-marker--quarter:not(.is-active),
  .car-stage:has(.window-highlight--back:hover, .window-highlight--back:focus-visible, .window-zone--back:hover, .window-zone--back:focus-visible) .window-marker--back:not(.is-active) {
    background: var(--color-action);
    color: var(--color-ink);
    scale: 1.08;
  }

  .window-marker--front {
    inset-inline-start: 47%;
    inset-block-start: 30%;
  }

  .window-marker--rear {
    inset-inline-start: 65%;
    inset-block-start: 29%;
  }

  .window-marker--quarter {
    inset-inline-start: 76%;
    inset-block-start: 29%;
  }

  .window-marker--back {
    inset-inline-start: 82%;
    inset-block-start: 26%;
  }

  .window-highlight--front {
    clip-path: polygon(38.2% 38.5%, 39.2% 34.2%, 43.7% 25%, 47% 21.6%, 56.3% 20.7%, 54.5% 38.3%);
  }

  .window-highlight--rear {
    clip-path: polygon(58.7% 20.7%, 70.8% 21.8%, 72.1% 24%, 71.6% 37.7%, 58.2% 38.2%);
  }

  .window-highlight--quarter {
    clip-path: polygon(73.3% 22.3%, 76.6% 23.4%, 79.3% 26.8%, 79.7% 32.5%, 78.5% 35.4%, 73% 37.6%);
  }

  .window-highlight--back {
    clip-path: polygon(76.7% 18.9%, 80.7% 20.1%, 87.3% 30.9%, 86.1% 32.2%, 80.1% 23.8%);
  }

  .car-stage:is([data-body="crossover"], [data-body="suv"]) .window-highlight--front {
    clip-path: polygon(36.9% 40%, 38% 35%, 42.5% 26.5%, 46% 23.1%, 54.8% 22.3%, 52.8% 40%);
  }

  .car-stage:is([data-body="crossover"], [data-body="suv"]) .window-highlight--rear {
    clip-path: polygon(57.3% 22.3%, 70.8% 23.3%, 72% 26%, 71.4% 38.5%, 56.6% 39.6%);
  }

  .car-stage:is([data-body="crossover"], [data-body="suv"]) .window-highlight--quarter {
    clip-path: polygon(72.5% 23.6%, 76% 24.5%, 80.6% 27.5%, 81% 32%, 79.5% 35.3%, 73.1% 37.8%);
  }

  .car-stage:is([data-body="crossover"], [data-body="suv"]) .window-highlight--back {
    clip-path: polygon(84.9% 22.9%, 87.5% 24.5%, 93.3% 36%, 92.3% 37.3%, 87.5% 31.8%);
  }

  .car-stage:is([data-body="crossover"], [data-body="suv"]) .window-marker--front {
    inset-inline-start: 46%;
    inset-block-start: 31%;
  }

  .car-stage:is([data-body="crossover"], [data-body="suv"]) .window-marker--rear {
    inset-inline-start: 64%;
    inset-block-start: 30%;
  }

  .car-stage:is([data-body="crossover"], [data-body="suv"]) .window-marker--quarter {
    inset-inline-start: 77%;
    inset-block-start: 30%;
  }

  .car-stage:is([data-body="crossover"], [data-body="suv"]) .window-marker--back {
    inset-inline-start: 89%;
    inset-block-start: 31%;
  }

  .car-stage[data-body="hatch"] .window-highlight--front {
    clip-path: polygon(37.7% 40%, 39.5% 33%, 43.3% 25%, 47.4% 22.2%, 58.3% 21%, 56.4% 39.7%);
  }

  .car-stage[data-body="hatch"] .window-highlight--rear {
    clip-path: polygon(61.2% 21.2%, 74% 23%, 75.2% 25%, 74.8% 38%, 60.5% 39.4%);
  }

  .car-stage[data-body="hatch"] .window-highlight--quarter {
    clip-path: polygon(76% 23.9%, 79.8% 25%, 82.2% 29%, 82.4% 32.5%, 80.7% 35.5%, 76% 37.4%);
  }

  .car-stage[data-body="hatch"] .window-highlight--back {
    clip-path: polygon(87% 25.8%, 89.3% 27.6%, 95% 39%, 94.2% 40.5%, 90% 34.5%);
  }

  .car-stage[data-body="hatch"] .window-marker--front {
    inset-inline-start: 48%;
    inset-block-start: 31%;
  }

  .car-stage[data-body="hatch"] .window-marker--rear {
    inset-inline-start: 67%;
    inset-block-start: 30%;
  }

  .car-stage[data-body="hatch"] .window-marker--quarter {
    inset-inline-start: 79%;
    inset-block-start: 30%;
  }

  .car-stage[data-body="hatch"] .window-marker--back {
    inset-inline-start: 91%;
    inset-block-start: 33%;
  }

  .car-stage[data-body="wagon"] .window-highlight--front {
    clip-path: polygon(37.8% 41.8%, 39.5% 35.5%, 43.8% 27%, 46.5% 25.6%, 53.2% 25.6%, 51.6% 41.3%);
  }

  .car-stage[data-body="wagon"] .window-highlight--rear {
    clip-path: polygon(54.8% 25.7%, 67.8% 26%, 67.2% 41.2%, 55% 41.3%);
  }

  .car-stage[data-body="wagon"] .window-highlight--quarter {
    clip-path: polygon(72.3% 25.8%, 79.8% 26.2%, 84.5% 28%, 87.8% 34%, 86.2% 37.4%, 72.4% 40.1%);
  }

  .car-stage[data-body="wagon"] .window-highlight--back {
    clip-path: polygon(87.2% 26%, 89% 28%, 94% 41%, 92.5% 41.5%, 88.5% 34%);
  }

  .car-stage[data-body="wagon"] .window-marker--front {
    inset-inline-start: 46%;
    inset-block-start: 33%;
  }

  .car-stage[data-body="wagon"] .window-marker--rear {
    inset-inline-start: 61%;
    inset-block-start: 33%;
  }

  .car-stage[data-body="wagon"] .window-marker--quarter {
    inset-inline-start: 80%;
    inset-block-start: 33%;
  }

  .car-stage[data-body="wagon"] .window-marker--back {
    inset-inline-start: 91%;
    inset-block-start: 34%;
  }

  .car-stage:is([data-body="van"], [data-body="minivan"]) .window-highlight--front {
    clip-path: polygon(29.6% 40%, 30% 28.5%, 34.2% 18.7%, 38% 15.6%, 46% 15.5%, 45% 39.5%);
  }

  .car-stage:is([data-body="van"], [data-body="minivan"]) .window-highlight--rear {
    clip-path: polygon(49.8% 15.5%, 73.4% 15.4%, 73.4% 36.9%, 49.8% 37.4%);
  }

  .car-stage:is([data-body="van"], [data-body="minivan"]) .window-highlight--quarter {
    clip-path: polygon(74.5% 15.6%, 86.8% 16.2%, 89.2% 19.5%, 89.5% 36.5%, 74.5% 36.6%);
  }

  .car-stage:is([data-body="van"], [data-body="minivan"]) .window-highlight--back {
    clip-path: polygon(94.1% 10.5%, 95% 11.5%, 95.3% 37.5%, 94.3% 37.1%);
  }

  .car-stage:is([data-body="van"], [data-body="minivan"]) .window-marker--front {
    inset-inline-start: 38%;
    inset-block-start: 27%;
  }

  .car-stage:is([data-body="van"], [data-body="minivan"]) .window-marker--rear {
    inset-inline-start: 62%;
    inset-block-start: 26%;
  }

  .car-stage:is([data-body="van"], [data-body="minivan"]) .window-marker--quarter {
    inset-inline-start: 82%;
    inset-block-start: 26%;
  }

  .car-stage:is([data-body="van"], [data-body="minivan"]) .window-marker--back {
    inset-inline-start: 94.7%;
    inset-block-start: 24%;
  }

  .car-stage:is([data-body="coupe"], [data-body="convertible"]) .window-highlight--front {
    clip-path: polygon(41.7% 38.5%, 42.8% 34%, 47% 25%, 51% 21.5%, 66% 21.5%, 64.2% 38.2%);
  }

  .car-stage:is([data-body="coupe"], [data-body="convertible"]) .window-highlight--rear {
    clip-path: polygon(67.4% 22%, 72.5% 23%, 77.5% 27.8%, 78.4% 32%, 76% 35.5%, 66.6% 37.5%);
  }

  .car-stage:is([data-body="coupe"], [data-body="convertible"]) .window-highlight--quarter {
    clip-path: polygon(73% 24%, 76% 25%, 78% 29%, 78% 32%, 76% 35%, 73% 35.5%);
  }

  .car-stage:is([data-body="coupe"], [data-body="convertible"]) .window-highlight--back {
    clip-path: polygon(72.5% 22.5%, 76% 23.5%, 86% 34.5%, 84.8% 36%, 77% 27.5%);
  }

  .car-stage:is([data-body="coupe"], [data-body="convertible"]) .window-marker--front {
    inset-inline-start: 54%;
    inset-block-start: 30%;
  }

  .car-stage:is([data-body="coupe"], [data-body="convertible"]) .window-marker--rear {
    inset-inline-start: 71%;
    inset-block-start: 30%;
  }

  .car-stage:is([data-body="coupe"], [data-body="convertible"]) .window-marker--quarter {
    inset-inline-start: 75%;
    inset-block-start: 30%;
  }

  .car-stage:is([data-body="coupe"], [data-body="convertible"]) .window-marker--back {
    inset-inline-start: 80%;
    inset-block-start: 29%;
  }

  .car-stage[data-body="pickup"] .window-highlight--front {
    clip-path: polygon(32.1% 37.4%, 33% 30%, 37.5% 22.2%, 41% 20.3%, 47% 20.8%, 45.8% 37.5%);
  }

  .car-stage[data-body="pickup"] .window-highlight--rear {
    clip-path: polygon(49.5% 20.8%, 60.5% 20.9%, 60.7% 36.2%, 49.4% 37%);
  }

  .car-stage[data-body="pickup"] .window-highlight--quarter {
    clip-path: polygon(63.1% 21.5%, 65% 22%, 65.5% 32%, 63.5% 33.5%);
  }

  .car-stage[data-body="pickup"] .window-highlight--back {
    clip-path: polygon(63.2% 20.2%, 65% 20.5%, 65.3% 32.3%, 63.6% 33.4%);
  }

  .car-stage[data-body="pickup"] .window-marker--front {
    inset-inline-start: 40%;
    inset-block-start: 29%;
  }

  .car-stage[data-body="pickup"] .window-marker--rear {
    inset-inline-start: 55%;
    inset-block-start: 28%;
  }

  .car-stage[data-body="pickup"] .window-marker--quarter {
    inset-inline-start: 63.8%;
    inset-block-start: 24%;
  }

  .car-stage[data-body="pickup"] .window-marker--back {
    inset-inline-start: 64.4%;
    inset-block-start: 31%;
  }

  .window-zone {
    overflow: visible;
    box-shadow: 0 0.25rem 1rem rgb(11 11 12 / 8%);
  }

  .window-zone__leader {
    position: absolute;
    z-index: -1;
    display: block;
    block-size: 1px;
    background: var(--color-ink);
    pointer-events: none;
  }

  .window-zone__leader::after {
    position: absolute;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border: 2px solid var(--color-paper);
    border-radius: 50%;
    background: var(--color-ink);
    content: "";
  }

  .window-zone[aria-pressed="true"] .window-zone__leader,
  .window-zone[aria-pressed="true"] .window-zone__leader::after {
    background: var(--color-action);
  }

  .window-zone--front {
    inset-block-start: 28%;
    inset-inline-start: 4%;
  }

  .window-zone--front .window-zone__leader {
    inset-block-start: 52%;
    inset-inline-start: 100%;
    inline-size: clamp(9rem, 20vw, 18rem);
    rotate: 14deg;
    transform-origin: left center;
  }

  .window-zone--front .window-zone__leader::after {
    inset-block-start: -0.23rem;
    inset-inline-end: -0.2rem;
  }

  .window-zone--rear {
    inset-block-start: 12%;
    inset-inline-start: 52%;
  }

  .window-zone--rear .window-zone__leader {
    inset-block-start: 100%;
    inset-inline-start: 52%;
    inline-size: clamp(7.5rem, 12vw, 10rem);
    rotate: 64deg;
    transform-origin: left center;
  }

  .window-zone--rear .window-zone__leader::after {
    inset-block-start: -0.23rem;
    inset-inline-end: -0.2rem;
  }

  .window-zone--quarter {
    inset-block-start: 26%;
    inset-inline-end: 2%;
  }

  .window-zone--quarter .window-zone__leader {
    inset-block-start: 100%;
    inset-inline-start: 25%;
    inset-inline-end: auto;
    inline-size: clamp(3rem, 6vw, 4rem);
    rotate: 90deg;
    transform-origin: left center;
  }

  .window-zone--quarter .window-zone__leader::after {
    inset-block-start: -0.23rem;
    inset-inline-end: -0.2rem;
  }

  .window-zone--back {
    inset-block-start: 56%;
    inset-inline-end: 2%;
  }

  .window-zone--back .window-zone__leader {
    inset-block-start: 0;
    inset-block-end: auto;
    inset-inline-start: 50%;
    inset-inline-end: auto;
    inline-size: clamp(4.5rem, 8vw, 6rem);
    rotate: -90deg;
    transform-origin: left center;
  }

  .window-zone--back .window-zone__leader::after {
    inset-block-start: -0.23rem;
    inset-inline-end: -0.2rem;
  }

  @media (max-width: 48rem) {
    .car-visual {
      inset-block-start: 31%;
      inset-inline: 0;
      inline-size: 100%;
    }

    .window-zone {
      min-inline-size: auto;
      min-block-size: 2.5rem;
      justify-content: start;
      border-radius: var(--radius-button);
      font-size: 0.6875rem;
    }

    .window-zone span {
      inline-size: 2.25rem;
      min-inline-size: 2.25rem;
      block-size: auto;
      border-inline-end: var(--line);
      border-radius: 0;
      font-size: 0.6875rem;
    }

    .window-zone strong {
      display: block;
      padding-inline: 0.55rem;
      white-space: nowrap;
    }

    .window-zone--front {
      inset-block-start: 24%;
      inset-inline-start: 3%;
    }

    .window-zone--rear {
      inset-block-start: 17%;
      inset-inline: auto 3%;
    }

    .window-zone--quarter {
      inset-block-start: auto;
      inset-block-end: 17%;
      inset-inline: 3% auto;
    }

    .window-zone--back {
      inset-block-start: auto;
      inset-block-end: 8%;
      inset-inline: auto 3%;
    }

    .window-zone--front .window-zone__leader,
    .window-zone--rear .window-zone__leader {
      inset-block-start: 100%;
      inset-inline-start: 50%;
      inline-size: 4.5rem;
      rotate: 70deg;
      transform-origin: left center;
    }

    .window-zone--quarter .window-zone__leader {
      inset-block-start: auto;
      inset-block-end: 50%;
      inset-inline-start: 100%;
      inset-inline-end: auto;
      inline-size: 15rem;
      rotate: -41deg;
      transform-origin: left center;
    }

    .window-zone--back .window-zone__leader {
      inset-block-start: auto;
      inset-block-end: 100%;
      inset-inline-start: 70%;
      inset-inline-end: auto;
      inline-size: 11.5rem;
      rotate: -90deg;
      transform-origin: left center;
    }

    .window-zone--front .window-zone__leader::after,
    .window-zone--rear .window-zone__leader::after,
    .window-zone--quarter .window-zone__leader::after,
    .window-zone--back .window-zone__leader::after {
      inset-block-start: -0.23rem;
      inset-inline: auto -0.2rem;
    }
  }
}

/* Rejected glazing-map experiment retained only for a precise local rollback reference. */
@media (width < 0px) {
@layer components {
  .car-stage {
    display: grid;
    min-block-size: clamp(37rem, 46vw, 41rem);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
  }

  .glazing-map {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(9rem, 0.28fr);
    align-items: end;
    gap: clamp(1rem, 3vw, 2rem);
    padding: var(--space-2) clamp(1.25rem, 4vw, 3rem) var(--space-5);
  }

  .glazing-map__side,
  .glazing-map__rear {
    display: grid;
    min-inline-size: 0;
    gap: var(--space-2);
  }

  .glazing-map__view {
    color: var(--color-text-muted);
    font-size: var(--font-size-micro);
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .glazing-map__direction {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-micro);
  }

  .glazing-map__direction i {
    position: relative;
    display: block;
    inline-size: 2.75rem;
    block-size: 1px;
    background: var(--color-ink);
  }

  .glazing-map__direction i::before,
  .glazing-map__direction i::after {
    position: absolute;
    inset-inline-start: 0;
    inline-size: 0.45rem;
    block-size: 1px;
    background: var(--color-ink);
    content: "";
    transform-origin: left center;
  }

  .glazing-map__direction i::before {
    rotate: 42deg;
  }

  .glazing-map__direction i::after {
    rotate: -42deg;
  }

  .glazing-map__windows {
    position: relative;
    display: grid;
    min-block-size: clamp(10.5rem, 17vw, 14rem);
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.1fr) minmax(3.5rem, 0.42fr);
    align-items: stretch;
    gap: clamp(0.35rem, 0.8vw, 0.65rem);
    padding: 0.75rem 0.75rem 0.9rem;
    border-block-end: 0.22rem solid var(--color-ink);
  }

  .glazing-map__windows::before {
    position: absolute;
    inset-block-start: -0.65rem;
    inset-inline: 13% 5%;
    block-size: 1.4rem;
    border-block-start: 0.18rem solid var(--color-ink);
    border-radius: 55% 55% 0 0;
    content: "";
    pointer-events: none;
  }

  .window-highlight {
    position: relative;
    z-index: 1;
    inset: auto;
    display: grid;
    min-inline-size: 0;
    place-items: center;
    padding: 0;
    border: 0;
    background-color: var(--color-surface-muted);
    background-image:
      repeating-linear-gradient(58deg, transparent 0 0.34rem, rgb(11 11 12 / 28%) 0.36rem 0.41rem),
      repeating-linear-gradient(-58deg, transparent 0 0.34rem, rgb(11 11 12 / 28%) 0.36rem 0.41rem);
    filter:
      drop-shadow(0.1rem 0 0 var(--color-ink))
      drop-shadow(-0.1rem 0 0 var(--color-ink))
      drop-shadow(0 0.1rem 0 var(--color-ink))
      drop-shadow(0 -0.1rem 0 var(--color-ink));
    mix-blend-mode: normal;
    opacity: 1;
    pointer-events: auto;
    transition:
      background-color var(--duration-fast),
      translate var(--duration-fast);
  }

  .window-highlight.is-active,
  .window-highlight[aria-pressed="true"] {
    background-color: var(--color-action);
  }

  .window-highlight:hover:not(:disabled) {
    background-color: #f9c281;
    translate: 0 -0.125rem;
  }

  .window-highlight:disabled {
    cursor: not-allowed;
    opacity: 0.48;
  }

  .window-highlight > span {
    display: grid;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-paper);
    color: var(--color-ink);
    font-size: var(--font-size-micro);
    font-weight: 850;
    box-shadow: 0 0 0 1px rgb(11 11 12 / 18%);
    pointer-events: none;
  }

  .window-highlight.is-active > span,
  .window-highlight[aria-pressed="true"] > span {
    background: var(--color-ink);
    color: var(--color-paper);
  }

  .glazing-pane--front {
    clip-path: polygon(22% 8%, 100% 0, 91% 100%, 0 100%);
  }

  .glazing-pane--rear {
    clip-path: polygon(4% 0, 82% 5%, 100% 100%, 0 100%);
  }

  .glazing-pane--quarter {
    clip-path: polygon(0 5%, 48% 12%, 100% 70%, 76% 100%, 0 100%);
  }

  .glazing-map__rear {
    align-content: end;
  }

  .glazing-pane--back {
    min-block-size: clamp(8.5rem, 14vw, 11.5rem);
    clip-path: polygon(13% 0, 87% 0, 100% 100%, 0 100%);
  }

  .car-stage:is([data-body="wagon"], [data-body="crossover"], [data-body="suv"], [data-body="minivan"], [data-body="van"]) .glazing-pane--front {
    clip-path: polygon(17% 4%, 100% 0, 94% 100%, 0 100%);
  }

  .car-stage:is([data-body="wagon"], [data-body="crossover"], [data-body="suv"], [data-body="minivan"], [data-body="van"]) .glazing-pane--rear {
    clip-path: polygon(3% 0, 94% 2%, 100% 100%, 0 100%);
  }

  .car-stage:is([data-body="wagon"], [data-body="crossover"], [data-body="suv"], [data-body="minivan"], [data-body="van"]) .glazing-pane--quarter {
    clip-path: polygon(0 2%, 100% 8%, 92% 100%, 0 100%);
  }

  .car-stage:is([data-body="coupe"], [data-body="convertible"]) .glazing-map__windows {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.78fr) minmax(3rem, 0.34fr);
  }

  .car-stage:is([data-body="coupe"], [data-body="convertible"]) .glazing-pane--front {
    clip-path: polygon(26% 10%, 100% 0, 89% 100%, 0 100%);
  }

  .window-zone-list {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
    padding-inline: clamp(1.25rem, 4vw, 3rem);
  }

  .window-zone {
    position: relative;
    inset: auto;
    display: inline-flex;
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: 3.4rem;
    justify-content: flex-start;
    overflow: hidden;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-button);
    background: var(--color-paper);
    box-shadow: none;
    font-size: var(--font-size-micro);
  }

  .window-zone span {
    min-inline-size: 3rem;
    background: var(--color-ink);
    color: var(--color-paper);
  }

  .window-zone strong {
    min-inline-size: 0;
    overflow: hidden;
    padding-inline: var(--space-3);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .window-zone[aria-pressed="true"] {
    border-color: var(--color-action-hover);
    background: var(--color-action);
  }

  .window-zone[aria-pressed="true"] span {
    background: var(--color-ink);
    color: var(--color-paper);
  }

  .window-zone:hover:not(:disabled) {
    border-color: var(--color-ink);
    background: var(--color-surface-soft);
  }

  .window-zone[aria-pressed="true"]:hover:not(:disabled) {
    background: var(--color-action-hover);
  }

  .car-stage__notice {
    position: relative;
    z-index: 2;
    margin: var(--space-4) clamp(1.25rem, 4vw, 3rem) var(--space-5);
    padding-block-start: var(--space-3);
    border-block-start: var(--line);
    color: var(--color-text-muted);
    font-size: var(--font-size-micro);
    line-height: 1.45;
  }

  .car-stage__notice strong {
    color: var(--color-ink);
  }

  @media (max-width: 68rem) {
    .glazing-map {
      grid-template-columns: minmax(0, 1fr) minmax(8rem, 0.26fr);
    }

    .window-zone strong {
      padding-inline: var(--space-2);
    }
  }

  @media (max-width: 48rem) {
    .car-stage {
      min-block-size: 0;
    }

    .glazing-map {
      grid-template-columns: 1fr;
      align-items: stretch;
      padding: var(--space-3) var(--space-4) var(--space-5);
    }

    .glazing-map__windows {
      min-block-size: clamp(8.5rem, 39vw, 11rem);
    }

    .glazing-map__rear {
      grid-template-columns: minmax(5rem, 0.65fr) minmax(8rem, 1fr);
      align-items: center;
      gap: var(--space-3);
      padding-block-start: var(--space-2);
      border-block-start: var(--line);
    }

    .glazing-pane--back {
      min-block-size: 6.5rem;
    }

    .window-zone-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      padding-inline: var(--space-4);
    }

    .window-zone {
      min-block-size: 3.25rem;
    }

    .window-zone span {
      min-inline-size: 2.6rem;
    }

    .window-zone strong {
      display: block;
      padding-inline: var(--space-2);
      font-size: 0.6875rem;
    }

    .car-stage__notice {
      margin: var(--space-4);
    }
  }
}
}

/* Conversion pass: compact first screen and continuous vehicle-to-price flow. */
@layer components {
  .hero {
    overflow: clip;
  }

  .hero__grid {
    position: relative;
    isolation: isolate;
    align-items: center;
    gap: var(--space-5) clamp(1.5rem, 3vw, 3.5rem);
    padding-block: clamp(2rem, 3.5vw, 3.25rem) clamp(2rem, 4vw, 3.5rem);
  }

  .hero__copy {
    grid-column: 1 / 7;
    grid-row: 1;
    min-inline-size: 0;
    max-inline-size: none;
    padding-block: 0;
    position: relative;
    z-index: 2;
    background: var(--color-paper);
  }

  .hero__copy h1 {
    max-inline-size: none;
    margin-block-start: var(--space-3);
    font-size: clamp(3rem, 4.15vw, 5.25rem);
    line-height: 0.88;
  }

  .hero__copy h1 span {
    display: block;
    white-space: nowrap;
  }

  .hero__copy h1 .hero__title-tail {
    inline-size: fit-content;
    max-inline-size: calc(100% - var(--space-5));
    margin-block-start: 0.3em;
    font-size: clamp(2.35rem, 2.4vw, 3.05rem);
    letter-spacing: -0.03em;
    line-height: 1;
  }

  .hero__lede {
    max-inline-size: 34rem;
    margin-block-start: var(--space-4);
  }

  .hero__actions {
    margin-block-start: var(--space-5);
  }

  .hero__price {
    display: grid;
    gap: 0.125rem;
  }

  .hero__price strong {
    font-size: 1.45rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
  }

  .hero__price span {
    color: var(--color-text-muted);
    font-size: var(--font-size-micro);
  }

  .hero__facts {
    gap: var(--space-2) var(--space-4);
    margin-block-start: var(--space-4);
    padding-block-start: var(--space-4);
  }

  .hero__facts li {
    font-size: var(--font-size-micro);
  }

  .hero__visual--product {
    position: relative;
    z-index: 1;
    inset: auto;
    grid-column: 7 / -1;
    grid-row: 1;
    align-self: center;
    justify-self: stretch;
    inline-size: auto;
    min-block-size: 0;
    margin-block: 0;
    margin: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    pointer-events: none;
    transform: translateY(1rem);
  }

  .hero__visual--product > img {
    display: block;
    inline-size: 100%;
    max-inline-size: 100%;
    block-size: auto;
    object-fit: contain;
    object-position: center;
    mix-blend-mode: multiply;
  }

  .hero-benefits {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border-block: var(--line);
    border-inline-start: var(--line);
    background: var(--color-paper);
    list-style: none;
  }

  .hero-benefits li {
    display: grid;
    min-inline-size: 0;
    min-block-size: 5.5rem;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    padding: 0.75rem var(--space-4);
    border-inline-end: var(--line);
  }

  .hero-benefits strong {
    font-size: var(--font-size-small);
    letter-spacing: -0.02em;
    line-height: 1.25;
  }

  .hero-benefits__icon {
    display: block;
    inline-size: 3.25rem;
    block-size: 3.25rem;
    background-color: var(--color-paper);
    background-image: url("../assets/benefit-illustrations-v1.webp");
    background-repeat: no-repeat;
    background-size: 300% 200%;
  }

  .hero-benefits__icon--sun {
    background-position: 0 0;
  }

  .hero-benefits__icon--air {
    background-position: 50% 0;
  }

  .hero-benefits__icon--privacy {
    background-position: 100% 0;
  }

  .hero-benefits__icon--interior {
    background-position: 0 100%;
  }

  .hero__trust {
    grid-column: 1 / -1;
    grid-row: 3;
    position: relative;
    z-index: 3;
  }

  .hero__trust div {
    min-block-size: 5.25rem;
    gap: var(--space-1);
    padding: var(--space-4);
  }

  .hero__trust dt {
    font-size: clamp(1.35rem, 2vw, 1.9rem);
  }

  .hero__trust dd {
    font-size: var(--font-size-micro);
  }

  .fitment {
    overflow: visible;
    padding: clamp(1.25rem, 2.3vw, 1.75rem);
    clip-path: none;
  }

  .fitment-results {
    z-index: 30;
  }

  .constructor-section {
    scroll-margin-block-start: 5rem;
    padding-block: clamp(3rem, 6vw, 5.5rem);
    border-block-start: 0;
  }

  .constructor-section .section-head {
    margin-block-end: var(--space-6);
  }

  .configurator-flow .constructor-section .section-head--compact {
    max-inline-size: none;
    margin-block-end: var(--space-4);
    padding-block-start: var(--space-4);
  }

  .constructor-section .section-head--compact h2 {
    max-inline-size: 24ch;
    font-size: clamp(2rem, 3.4vw, 3.25rem);
  }

  .decision-proof {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-block-end: var(--space-6);
    border-block: var(--line);
    border-inline-start: var(--line);
    background: var(--color-paper);
  }

  .decision-proof div {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4);
    border-inline-end: var(--line);
  }

  .decision-proof strong {
    font-size: var(--font-size-small);
  }

  .decision-proof span {
    color: var(--color-text-muted);
    font-size: var(--font-size-micro);
  }

  .preset-panel {
    align-items: start;
  }

  .zone-panel__head {
    cursor: pointer;
    list-style: none;
  }

  .zone-panel__head::-webkit-details-marker {
    display: none;
  }

  .zone-panel__head::after {
    color: var(--color-action-text);
    content: "+";
    font-size: 1.35rem;
    font-weight: 800;
  }

  .zone-panel[open] .zone-panel__head::after {
    content: "−";
  }

  .zone-panel__head span {
    margin-inline-start: auto;
  }

  .fit-visual--product {
    background: var(--color-surface-soft);
  }

  .fit-visual--product img {
    min-block-size: 38rem;
    padding: 3rem 0 4rem;
    object-fit: cover;
    object-position: center;
    mix-blend-mode: normal;
  }

  @media (max-width: 68rem) {
    .hero__copy {
      grid-column: 1 / 7;
    }

    .hero__visual--product {
      grid-column: 7 / -1;
      inline-size: auto;
      margin: 0;
    }

    .hero__visual--product > img {
      inline-size: 100%;
    }

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

  @media (max-width: 56rem) {
    .hero__grid {
      grid-template-columns: 1fr;
      gap: var(--space-4);
      padding-block-start: var(--space-8);
    }

    .hero__copy,
    .hero__visual--product {
      grid-column: 1;
    }

    .hero__copy {
      grid-row: 1;
      max-inline-size: 48rem;
    }

    .hero__copy h1 {
      font-size: clamp(2.5rem, 7vw, 3.75rem);
    }

    .hero__copy h1 span {
      white-space: normal;
    }

    .hero__copy h1 .hero__title-tail {
      font-size: clamp(1.9rem, 5vw, 2.7rem);
    }

    .hero__visual--product {
      grid-row: 2;
      inline-size: min(100%, 52rem);
      margin: 0 auto;
      overflow: visible;
      transform: none;
    }

    .hero__visual--product > img {
      inline-size: 100%;
      max-inline-size: 100%;
      margin: 0;
    }

    .hero__trust {
      grid-row: 4;
    }

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

    .hero-benefits li:nth-child(-n + 2) {
      border-block-end: var(--line);
    }
  }

  @media (max-width: 48rem) {
    .configurator-flow .constructor-section .section-head--compact {
      margin-block-end: var(--space-3);
      padding-block-start: var(--space-4);
    }

    .hero__grid {
      gap: var(--space-3);
      padding-block: var(--space-6) var(--space-8);
    }

    .hero__copy,
    .hero__visual--product {
      grid-column: 1;
    }

    .hero__copy {
      grid-row: 1;
    }

    .hero__copy h1 {
      max-inline-size: none;
      font-size: clamp(2.15rem, 9vw, 3.1rem);
    }

    .hero__copy h1 .hero__title-tail {
      font-size: clamp(1.75rem, 7vw, 2.4rem);
    }

    .hero__lede {
      font-size: 1rem;
    }

    .hero__price {
      grid-template-columns: auto 1fr;
      align-items: baseline;
      gap: var(--space-2);
    }

    .hero__facts {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-2) var(--space-3);
    }

    .hero__facts li:last-child {
      grid-column: 1 / -1;
    }

    .hero__visual--product {
      position: relative;
      inset: auto;
      z-index: 1;
      grid-row: 2;
      inline-size: 100%;
      min-block-size: 0;
      margin: 0;
      overflow: visible;
      transform: none;
    }

    .hero__visual--product > img {
      inline-size: 100%;
      max-inline-size: 100%;
      block-size: auto;
      margin: 0;
      object-position: center;
    }

    .hero__trust {
      grid-row: 4;
      grid-template-columns: repeat(2, 1fr);
    }

    .hero-benefits {
      grid-row: 3;
    }

    .hero-benefits li {
      min-block-size: 5rem;
      grid-template-columns: 2.75rem minmax(0, 1fr);
      gap: var(--space-2);
      padding: 0.65rem 0.75rem;
    }

    .hero-benefits strong {
      font-size: 0.75rem;
    }

    .hero-benefits__icon {
      inline-size: 2.75rem;
      block-size: 2.75rem;
    }

    .hero__trust div {
      min-block-size: 5.5rem;
      border-inline-end: 1px solid var(--color-ink-raised);
    }

    .hero__trust div:nth-child(2n) {
      border-inline-end: 0;
    }

    .hero__trust div:nth-child(-n + 2) {
      border-block-end: 1px solid var(--color-ink-raised);
    }

    .fitment {
      margin-block-start: 0;
    }

    .constructor-section {
      padding-block: var(--space-12);
    }

    .decision-proof {
      grid-template-columns: 1fr 1fr;
      margin-inline: calc(-1 * var(--gutter));
    }

    .decision-proof div {
      min-block-size: 6.5rem;
    }

    .preset-panel {
      grid-template-columns: 1fr;
    }

    .preset-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      inline-size: 100%;
    }

    .preset {
      padding-inline: 0.5rem;
      font-size: var(--font-size-micro);
    }

    .fit-visual--product img {
      min-block-size: 28rem;
      padding: 4rem 0 6rem;
      object-position: 58% center;
    }
  }
}

/* Editorial benefit illustrations generated as one lightweight sprite sheet. */
@layer components {
  .benefit-card__visual {
    inline-size: clamp(7.5rem, 10vw, 9.5rem);
    block-size: clamp(7.5rem, 10vw, 9.5rem);
    border: 0;
    background-color: var(--color-paper);
    background-image: url("../assets/benefit-illustrations-v1.webp");
    background-repeat: no-repeat;
    background-size: 300% 200%;
  }

  .benefit-card__visual i,
  .benefit-card__visual::before,
  .benefit-card__visual::after {
    display: none;
  }

  .benefit-card__visual--sun {
    background-position: 0 0;
  }

  .benefit-card__visual--air {
    background-position: 50% 0;
  }

  .benefit-card__visual--privacy {
    background-position: 100% 0;
  }

  .benefit-card__visual--interior {
    background-position: 0 100%;
  }

  .benefit-card__visual--family {
    background-position: 50% 100%;
  }

  .benefit-card__visual--install {
    background-position: 100% 100%;
  }

  @media (max-width: 48rem) {
    .benefit-card__visual {
      inline-size: 7.5rem;
      block-size: 7.5rem;
    }
  }
}

/* Final mobile hardening after all component layers and legacy overrides. */
@layer components {
  @media (max-width: 48rem) {
    html,
    body {
      max-inline-size: 100%;
      overflow-x: clip;
    }

    body {
      padding-block-end: 0;
    }

    body:has(.mobile-summary.is-visible) {
      padding-block-end: 5.25rem;
    }

    .fitment__alternative button,
    .brand-shortcut,
    .window-zone,
    .zone-panel__head,
    .mobile-summary .button {
      min-block-size: var(--tap-size);
    }

    .fitment__alternative button {
      padding-block: 0.45rem;
      text-align: start;
    }

    .brand-shortcut {
      flex: 1 1 calc(33.333% - var(--space-2));
      padding-inline: 0.625rem;
    }

    .car-stage {
      min-block-size: 29rem;
    }

    .window-zone--quarter {
      inset-block-end: 23%;
    }

    .window-zone--back {
      inset-block-end: 13%;
    }

    .car-stage__legend {
      padding: 0.65rem var(--space-4);
      font-size: 0.6875rem;
    }

    .trim-card--recommended .trim-card__title {
      padding-inline-end: 6.75rem;
    }

    .trim-card__badge {
      max-inline-size: 6.25rem;
      font-size: 0.625rem;
      line-height: 1.15;
      text-align: center;
    }

    .compare-table td {
      overflow-wrap: anywhere;
    }

    .landing-footer__bottom {
      gap: var(--space-3);
    }
  }

  @media (max-width: 22.49rem) {
    :root {
      --gutter: 0.75rem;
      --section-space: 3.5rem;
    }

    .landing-header__inner {
      min-block-size: 3.75rem;
      gap: 0.5rem;
    }

    .logo {
      inline-size: 5.5rem;
    }

    .landing-header__inner .button {
      min-block-size: 2.25rem;
      padding-inline: 0.625rem;
      font-size: 0.6875rem;
    }

    .hero__grid {
      padding-block-start: var(--space-4);
    }

    .hero__copy h1 {
      font-size: clamp(1.9rem, 10.8vw, 2.35rem);
    }

    .hero__copy h1 .hero__title-tail {
      font-size: clamp(1.45rem, 8.2vw, 1.85rem);
    }

    .hero__actions {
      gap: var(--space-3);
    }

    .hero__price {
      grid-template-columns: 1fr;
      gap: 0;
    }

    .hero-benefits li {
      min-block-size: 4.5rem;
      grid-template-columns: 2.25rem minmax(0, 1fr);
      padding: 0.5rem;
    }

    .hero-benefits__icon {
      inline-size: 2.25rem;
      block-size: 2.25rem;
    }

    .hero-benefits strong {
      font-size: 0.6875rem;
      line-height: 1.25;
    }

    .hero__trust dt {
      font-size: 1.25rem;
    }

    .hero__trust dd {
      font-size: 0.625rem;
    }

    .fitment {
      margin-inline: calc(-1 * var(--gutter));
      padding: var(--space-4) var(--gutter);
    }

    .fitment__search {
      min-inline-size: 0;
    }

    .fitment__search input {
      padding-inline: 2.75rem 2.5rem;
      font-size: 0.9375rem;
    }

    .fitment-selected {
      padding: var(--space-3);
    }

    .fitment-selected__body-options label {
      flex-basis: 100%;
    }

    .decision-proof {
      grid-template-columns: 1fr;
    }

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

    .preset {
      justify-content: flex-start;
      padding-inline: var(--space-3);
    }

    .constructor-shell,
    .constructor-main,
    .constructor-sidebar,
    .trim-card,
    .discount,
    .lead-card,
    .request-dialog__inner {
      min-inline-size: 0;
    }

    .car-stage {
      min-block-size: 25rem;
    }

    .window-zone {
      max-inline-size: calc(100% - 1rem);
    }

    .window-zone__label {
      font-size: 0.6875rem;
    }

    .trim-card--recommended .trim-card__title {
      padding-inline-end: 0;
    }

    .trim-card__badge {
      position: static;
      justify-self: start;
      max-inline-size: none;
      margin-block-end: var(--space-2);
    }

    .discount__head,
    .discount__footer {
      align-items: flex-start;
      gap: var(--space-2);
    }

    .discount__action {
      inline-size: 100%;
    }

    .request-dialog {
      inline-size: calc(100% - 1rem);
      max-inline-size: none;
      max-block-size: calc(100dvh - 1rem);
    }

    .request-dialog__inner {
      padding: var(--space-4);
    }

    .request-dialog__head {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: var(--space-2);
    }

    .request-dialog h2 {
      font-size: 1.45rem;
    }

    .channel-choice {
      grid-template-columns: 1fr;
    }

    .channel-choice label,
    .channel-choice label span {
      inline-size: 100%;
    }

    .mobile-summary {
      padding-inline: var(--gutter);
    }
  }
}

/* Real customer media: visual proof before written reviews. */
@layer components {
  .review-media {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    margin-block-end: var(--space-6);
  }

  .review-media__item {
    display: grid;
    min-inline-size: 0;
    align-content: start;
    overflow: hidden;
    border: var(--line);
    background: var(--color-paper);
  }

  .review-media__visual {
    position: relative;
    block-size: clamp(15rem, 20vw, 19rem);
    overflow: hidden;
    border-block-end: var(--line);
    background: var(--color-ink);
  }

  .review-media__visual :is(img, video) {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .review-media__item--video .review-media__visual video {
    object-fit: contain;
  }

  .review-media__item--rain .review-media__visual img {
    object-position: center 45%;
  }

  .review-media__item--owner .review-media__visual img {
    object-position: center 53%;
  }

  .review-media figcaption {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4) var(--space-4);
  }

  .review-media figcaption span {
    color: var(--color-action-text);
    font-size: var(--font-size-micro);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .review-media figcaption strong {
    font-size: var(--font-size-body);
    line-height: 1.2;
  }

  .review-media figcaption small {
    color: var(--color-text-muted);
    font-size: var(--font-size-micro);
    line-height: 1.4;
  }

  @media (max-width: 68rem) {
    .review-media {
      gap: var(--space-3);
    }
  }

  @media (max-width: 48rem) {
    .review-media {
      grid-auto-columns: min(78vw, 20rem);
      grid-auto-flow: column;
      grid-template-columns: none;
      gap: var(--space-3);
      margin-inline: calc(-1 * var(--gutter));
      padding-inline: var(--gutter);
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      scroll-padding-inline: var(--gutter);
      scroll-snap-type: inline mandatory;
      scrollbar-width: none;
    }

    .review-media::-webkit-scrollbar {
      display: none;
    }

    .review-media__item {
      scroll-snap-align: start;
    }

    .review-media__visual {
      block-size: 18rem;
    }

    .review-media figcaption {
      padding: var(--space-3);
    }
  }
}

/* Keep direct calling visible even in the most compact header layout. */
@layer components {
  @media (max-width: 48rem) {
    .landing-header__inner {
      gap: 0.25rem;
    }

    .landing-header .logo {
      inline-size: clamp(5rem, 21vw, 5.5rem);
    }

    .landing-header .header-phone {
      display: flex;
      min-inline-size: 0;
      align-items: center;
      margin-inline-start: auto;
      text-align: start;
      white-space: nowrap;
    }

    .landing-header .header-phone span {
      display: none;
    }

    .landing-header .header-phone strong {
      font-size: clamp(0.625rem, 2.7vw, 0.8rem);
      letter-spacing: -0.045em;
    }

    .landing-header .header-channels {
      gap: 0;
      margin-inline-start: 0;
    }

    .landing-header .header-channels .header-channel-icon {
      min-inline-size: 2.4rem;
      inline-size: 2.4rem;
      min-block-size: 2.4rem;
    }

    .landing-header .header-channel-icon img {
      inline-size: 1.5rem;
      block-size: 1.5rem;
    }
  }
}