/* v31 — align the reusable client proof to the site-wide layout grid. */
.v21-proof > .product-shell {
  width:min(calc(100% - 8.8vw), var(--shell, 1440px));
  max-width:none;
  margin-inline:auto;
  padding-inline:0;
  box-sizing:border-box;
}
.v21-proof .v21-section-top {padding-inline:0!important;margin-inline:0!important}
.v21-proof .v21-carousel, .v21-proof .v21-carousel-controls {max-width:100%;margin-inline:0}
.v21-proof .v21-section-top h2 {max-width:100%;}
/* The Why Autonomy headline shares a scale, rhythm and responsive wrapping. */
.why-page .why-hero-copy h1 {font-size:clamp(42px,5vw,90px);line-height:1.08;letter-spacing:-.05em;max-width:100%;overflow-wrap:normal;text-wrap:balance}
.why-page .why-hero-copy h1 em {font-size:inherit;line-height:inherit;font-weight:inherit}
.why-page .why-hero-copy > p,
.why-page .why-hero-copy > p.why-hero-secondary {font-size:clamp(17px,1.35vw,22px);line-height:1.56;color:#4a5e52;max-width:64ch;margin:0 0 19px}
.why-page .why-hero-buttons {gap:clamp(16px,2vw,30px);align-items:center}
.why-page .why-hero-buttons a {min-height:50px;display:inline-flex;align-items:center;justify-content:center;line-height:1.25}
.why-page .why-hero-buttons .text-btn {padding:12px 0}
/* Avoid competing legacy styles on the floating architectural shutter when going TO Tomorrow. */
.arch-shutter.tomorrow-warp {
  background:transparent!important;
  contain:paint;
}
.arch-shutter.tomorrow-warp::before,
.arch-shutter.tomorrow-warp::after,
.arch-shutter.tomorrow-warp .arch-leaf,
.arch-shutter.tomorrow-warp .arch-transition-seam,
.arch-shutter.tomorrow-warp .arch-transition-mark {display:none!important}
.arch-shutter.tomorrow-warp .v31-pigment-canvas {display:block}
.arch-shutter .v31-pigment-canvas {display:none;position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.arch-shutter.tomorrow-warp .arch-transition-caption {z-index:5;color:#fff;filter:drop-shadow(0 1px 16px #02160ca6)}
.arch-shutter.tomorrow-warp .arch-transition-caption::before {background:radial-gradient(ellipse,rgba(0,22,12,.35) 0%,transparent 66%)}
.arch-shutter.tomorrow-warp .arch-transition-caption strong {color:#ebfff3;font-size:clamp(37px,6.4vw,94px);letter-spacing:-.055em;line-height:1.02;text-transform:none}
.arch-shutter.tomorrow-warp .arch-transition-caption .micro {color:#b2f5ce}
.arch-shutter.tomorrow-warp .arch-transition-caption .arch-foot {color:#c4ead2}
/* On small screens the social proof heading, carousel and control follow one gutter. */
@media(max-width:740px){
  .v21-proof > .product-shell {width:calc(100% - 40px)}
  .v21-proof .v21-section-top {padding-inline:0!important}
  .why-page .why-hero-copy h1 {font-size:clamp(40px,9.1vw,64px)!important;line-height:1.12!important}
  .why-page .why-hero-copy > p,.why-page .why-hero-copy > p.why-hero-secondary {font-size:clamp(17px,4.1vw,20px)}
  .why-page .why-hero-buttons {align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){.arch-shutter.tomorrow-warp .v31-pigment-canvas{display:none!important}}
/* Treat every grid track as shrinkable: no clipped hero headline at 390px / 320px. */
@media(max-width:950px){
 .why-page .why-hero-grid {grid-template-columns:minmax(0,1fr)!important}
 .why-page .why-hero-grid > * {min-width:0;max-width:100%}
 .why-page .why-hero-art {width:100%;max-width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}
}