/* Desktop has a viewport budget, while short or zoomed windows keep natural scrolling. */
@media (min-width:900px) {
  body.consumer-experience {
    --home-desktop-width:1240px;
    --home-header-height:clamp(72px,8.15dvh,88px);
    --home-card-height:clamp(470px,calc(100dvh - var(--home-header-height) - 178px),740px);
  }

  .consumer-experience .consumer-header {
    width:min(var(--home-desktop-width),calc(100% - 64px));
    max-width:none;
    height:var(--home-header-height);
    padding:0;
  }
  .consumer-experience .repair-home {
    width:min(var(--home-desktop-width),calc(100% - 64px));
    max-width:none;
    margin:0 auto;
    padding:12px 0 104px;
    grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
    gap:18px 22px;
    align-items:stretch;
  }
  .consumer-experience .identity-row {min-height:44px;display:flex;align-items:center}
  .consumer-experience .home-vehicle {gap:17px}
  .consumer-experience .proper-plate {font-size:24px}
  .consumer-experience .vehicle-caption strong {font-size:13px}
  .consumer-experience .vehicle-caption small {font-size:11px;margin-top:4px}

  .consumer-experience .home-feature {
    min-height:var(--home-card-height);
    width:auto;
    margin:0;
    padding:26px;
    align-self:stretch;
    grid-template-columns:minmax(0,1fr) 194px;
    grid-template-rows:auto minmax(min-content,1fr) auto auto auto auto;
    column-gap:18px;
  }
  .consumer-experience .feature-top {grid-row:1;margin-bottom:18px;min-height:18px}
  .consumer-experience .status-label,.consumer-experience .journey-link {font-size:12px}
  .consumer-experience .feature-copy {grid-column:1;grid-row:2;min-width:0}
  .consumer-experience .chapter-caption {font-size:10px;margin-bottom:10px;letter-spacing:1.3px}
  .consumer-experience .home-feature h1 {font-size:clamp(34px,3vw,43px);line-height:1.09;max-width:none;letter-spacing:-1.3px}
  .consumer-experience .feature-copy>p {max-width:480px;font-size:14px;line-height:1.6;margin-top:13px}
  .consumer-experience .stage-art {grid-column:2;grid-row:2;height:190px;scale:1;translate:0;margin:0;width:auto}
  .consumer-experience .stage-art:before {width:170px;height:170px}
  .consumer-experience .stage-progress {grid-row:3;margin:18px 0 16px}

  .consumer-experience .home-feature #keyInfo {grid-column:1/-1;grid-row:4;align-self:stretch}
  .consumer-experience .home-feature #personInfo {grid-column:1/-1;grid-row:4;align-self:stretch}
  .consumer-experience .home-feature #personInfo:empty {display:none}
  .consumer-experience .home-feature .key-info {padding:12px 15px;margin-bottom:14px;min-height:65px}
  .consumer-experience .home-feature .key-info small {font-size:11px;margin-bottom:4px}
  .consumer-experience .home-feature .key-info strong {font-size:24px;line-height:1.2}
  .consumer-experience .home-feature .key-info .secondary-value strong {font-size:16px}
  .consumer-experience .home-feature .repairer-info {min-height:65px;padding:8px 0 14px;margin:0 0 14px}
  .consumer-experience .home-feature .repairer-info .person strong {font-size:13px}
  .consumer-experience .home-feature .repairer-info .person small {font-size:11px;line-height:1.4;margin-top:4px}

  /* Booking and arrival use one detail row for appointment/ETA and the technician. */
  .consumer-experience:is([data-stage="5"],[data-stage="6"]) .home-feature #keyInfo {grid-column:1}
  .consumer-experience:is([data-stage="5"],[data-stage="6"]) .home-feature #personInfo {grid-column:2}
  .consumer-experience:is([data-stage="5"],[data-stage="6"]) .home-feature .repairer-info {gap:8px;border-bottom:0;padding:8px 0 14px}
  .consumer-experience:is([data-stage="5"],[data-stage="6"]) .repairer-info .avatar {width:32px;height:32px;flex:none}
  .consumer-experience:is([data-stage="5"],[data-stage="6"]) .repairer-info .contact-icon {width:30px;height:30px;flex:none}
  .consumer-experience:is([data-stage="5"],[data-stage="6"]) .repairer-info .person small {font-size:10px}

  .consumer-experience .home-feature .feature-action {grid-column:1/-1;grid-row:5;min-height:48px;font-size:13px}
  .consumer-experience .feature-next {grid-column:1;grid-row:6;margin-top:13px;font-size:12px;line-height:1.5}
  .consumer-experience .home-feature .card-footer {
    grid-column:2;grid-row:6;align-self:end;display:flex;flex-direction:column;
    align-items:flex-end;gap:5px;text-align:right;border:0;padding:0;margin:13px 0 0;font-size:10px;line-height:1.4;
  }

  .consumer-experience .home-aside {
    display:grid;grid-template-rows:minmax(min-content,1fr) auto;
    min-height:var(--home-card-height);gap:16px;align-self:stretch;
  }
  .consumer-experience .essentials-card {display:flex;flex-direction:column;padding:23px}
  .consumer-experience .section-label {padding-bottom:12px}
  .consumer-experience .section-label h2 {font-size:21px}
  .consumer-experience .section-label>span {display:block;font-size:10px}
  .consumer-experience .essential-row {flex:1;gap:12px;padding:15px 0;min-height:67px}
  .consumer-experience .essential-row:last-child {padding-bottom:3px}
  .consumer-experience .essential-row strong {font-size:13px;line-height:1.4}
  .consumer-experience .essential-row small {font-size:11px;line-height:1.5;margin-top:4px}
  .consumer-experience .row-tag {font-size:9px;flex:none}
  .consumer-experience .about-card {min-height:clamp(152px,18dvh,190px);padding:24px 27px}
  .consumer-experience .about-copy small {font-size:9px;margin-bottom:10px}
  .consumer-experience .about-copy strong {font-size:26px;line-height:1.13}
  .consumer-experience .about-copy>span {font-size:11px;margin-top:15px}
  .consumer-experience .about-card img {width:65px;top:25px;right:25px}
  .consumer-experience .example-caption {font-size:10px;line-height:1.4;margin:0}

  /* The unchanged 296px launcher lives in the clear band beneath the cards. */
  .consumer-experience .consumer-dock {right:24px;bottom:24px}
}

/* Laptop height: trade excess spacing for the complete repair, keeping text readable. */
@media (min-width:900px) and (min-height:640px) and (max-height:800px) {
  .consumer-experience .consumer-header {height:72px}
  .consumer-experience .home-feature {padding:20px;grid-template-columns:minmax(0,1fr) 180px;column-gap:16px}
  .consumer-experience .feature-top {margin-bottom:12px;min-height:17px}
  .consumer-experience .status-label,.consumer-experience .journey-link {font-size:11px}
  .consumer-experience .chapter-caption {font-size:9px;margin-bottom:8px}
  .consumer-experience .home-feature h1 {font-size:36px;line-height:1.08;letter-spacing:-1.1px}
  .consumer-experience .feature-copy>p {font-size:13px;line-height:1.5;margin-top:10px}
  .consumer-experience .stage-art {height:160px;scale:.9}
  .consumer-experience .stage-progress {margin:12px 0}
  .consumer-experience .home-feature .key-info {padding:9px 12px;margin-bottom:10px;min-height:58px}
  .consumer-experience .home-feature .key-info small {font-size:10px;margin-bottom:3px}
  .consumer-experience .home-feature .key-info strong {font-size:23px}
  .consumer-experience .home-feature .key-info .secondary-value strong {font-size:15px}
  .consumer-experience .home-feature .repairer-info {min-height:58px;margin-bottom:10px;padding:5px 0 10px}
  .consumer-experience .home-feature .feature-action {min-height:44px;padding:11px 15px;font-size:12px}
  .consumer-experience .feature-next {font-size:11px;line-height:1.5;margin-top:10px}
  .consumer-experience .home-feature .card-footer {font-size:9px;margin-top:10px;gap:4px}
  .consumer-experience .home-aside {gap:13px}
  .consumer-experience .essentials-card {padding:20px}
  .consumer-experience .section-label {padding-bottom:9px}
  .consumer-experience .section-label h2 {font-size:20px}
  .consumer-experience .section-label>span {font-size:9px}
  .consumer-experience .essential-row {min-height:61px;padding:11px 0}
  .consumer-experience .essential-row strong {font-size:12px}
  .consumer-experience .essential-row small {font-size:10px}
  .consumer-experience .about-card {min-height:145px;padding:21px 24px}
  .consumer-experience .about-copy strong {font-size:24px}
  .consumer-experience .about-copy>span {margin-top:13px}
  .consumer-experience .about-card img {width:58px;top:22px;right:23px}
  .consumer-experience .example-caption {font-size:9px}
}

@media (min-width:900px) and (max-width:1099px) {
  .consumer-experience .consumer-header,.consumer-experience .repair-home {width:calc(100% - 48px)}
  .consumer-experience .repair-home {grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);column-gap:18px}
  .consumer-experience .home-feature {grid-template-columns:minmax(0,1fr) 140px;padding:20px;column-gap:10px}
  .consumer-experience .home-feature h1 {font-size:32px}
  .consumer-experience .stage-art {scale:.78}
  .consumer-experience .section-label>span {display:none}
  .consumer-experience .essentials-card {padding:18px}
  .consumer-experience .essential-row {gap:9px}
  .consumer-experience .essential-row strong {font-size:12px}
  .consumer-experience .essential-row small {font-size:10px}
  .consumer-experience .essential-icon,.consumer-experience .essential-image,.consumer-experience .essential-image img {width:34px;height:34px}
  .consumer-experience .row-tag {font-size:8px;padding:5px}
  .consumer-experience .about-copy strong {font-size:23px}
  .consumer-experience .about-card img {width:48px;right:18px}
  .consumer-experience:is([data-stage="5"],[data-stage="6"]) .repairer-info .avatar {display:none}
  .consumer-experience:is([data-stage="5"],[data-stage="6"]) .repairer-info .person strong {font-size:12px}
}

/* Do not squash or clip content when zoom or a short window reduces available space. */
@media (min-width:900px) and (max-height:639px) {
  .consumer-experience .home-feature,.consumer-experience .home-aside {min-height:0}
  .consumer-experience .repair-home {padding-bottom:118px}
}