/* Products page: shared page-level tokens and the dark contact surface.
   The three product folds and the closing fold are composed in
   products-page.css, which loads last. Roles, colours and buttons come from
   base.css and typography.css (locked tokens).

   The earlier per-fold layers (.story/.s1/.s2/.s3/.evid/.one and the .hero,
   .phero, .pnames and .shows experiments) were removed with the redesign:
   they styled markup this page no longer contains, and the overlap between
   them was what made the type scale inconsistent across the page. */

:root{--dark-sec:#141210;--pad:clamp(3.5rem,8vw,8rem)}
html{scroll-behavior:smooth}
body{overflow-x:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.sec{padding-block:var(--pad)}
.tlink{min-height:44px}
.crumb{color:var(--ink-3);margin-bottom:2rem}
.crumb a{color:inherit;text-decoration:none}
.crumb a:hover{color:var(--red)}

/* ---- closing contact surface, consistent with the footer below it ---- */
.close{background:var(--dark-sec);color:#fff}
.close h2{color:#fff;max-width:17.5ch}
.close .eyebrow{color:#ff8c8f;text-transform:uppercase}
.close .sup{color:#cfc9bf;max-width:30rem}
.close .tlink{color:#fff}
.close .tlink:hover{color:#ff8c8f}

@media(max-width:900px){
  .sec{padding-block:3.25rem}
  .close h2{max-width:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}