/* critical.css - everything above the fold. style.css arrives asynchronously
   and may not be here yet, so nothing below depends on it. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* overflow-x:hidden on html or body silently kills position:sticky on every
   descendant. clip does the same job and leaves sticky alone. */
@supports(overflow:clip){html,body{overflow-x:clip}}

body{margin:0;background:var(--ground);color:var(--fg);
  font-family:var(--font-ui);font-size:17px;line-height:1.63;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* The stylesheet arrives late. Without this guard every transition fires at
   once the moment it lands and the page flashes. main.js removes pre-css only
   after both window load and the sheet's own onload. */
html.pre-css *,html.pre-css *::before,html.pre-css *::after{
  transition:none!important;animation:none!important}

img,picture,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.14;font-weight:700;text-wrap:balance}
h1,h2{font-family:var(--font-d);letter-spacing:-.016em}
h1{font-size:clamp(32px,5.4vw,57px)}
h2{font-size:clamp(26px,3.5vw,40px)}
h3{font-size:clamp(18px,2vw,21px);font-family:var(--font-ui);
  letter-spacing:-.012em;font-weight:700}
p{margin:0 0 1em;text-wrap:pretty}
b,strong{font-weight:700}
q{quotes:"\201C" "\201D"}
code{font-family:var(--font-num);font-size:.92em;background:var(--card-2);
  padding:.1em .34em;border-radius:5px}

.shell{width:100%;max-width:var(--wide);margin-inline:auto;
  padding-inline:var(--gut)}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.skip{position:fixed;left:8px;top:-60px;z-index:200;
  background:var(--teal);color:#fff;padding:10px 18px;border-radius:var(--pill);
  font-weight:700;transition:top var(--t-hover) var(--ease)}
.skip:focus{top:8px}

:where(a,button,input,select,summary,[tabindex]):focus-visible{
  outline:3px solid var(--brand-f);outline-offset:2px;border-radius:4px}

/* ------------------------------------------------------------- the buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-weight:650;font-size:15.5px;padding:13px 24px;
  border-radius:var(--pill);border:1.5px solid transparent;text-decoration:none;
  cursor:pointer;position:relative;
  /* colour is deliberately NOT in this transition: a mid-transition frame is a
     colour in no palette, and the contrast sweep catches it. */
  transition:transform var(--t-hover) var(--ease),
             box-shadow var(--t-hover) var(--ease),
             border-color var(--t-hover) var(--ease)}
.btn--p{background-color:var(--brand-f);color:#fff;border-color:var(--brand-f);
  box-shadow:0 1px 0 rgba(0,0,0,.12)}
.btn--p:hover{transform:translateY(-2px);
  box-shadow:0 8px 20px -8px rgba(13,90,84,.7)}
.btn--g{background-color:transparent;color:var(--fg);border-color:var(--rule-2)}
.btn--g:hover{transform:translateY(-2px);border-color:var(--fg)}
.btn:active{transform:translateY(0)}
.lnk{background:none;border:0;font:inherit;color:var(--brand);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0}

/* --------------------------------------------------------------- the strip */
.strip{background-color:var(--teal);color:var(--on-teal);font-size:13px;
  position:relative;z-index:80}
.strip__in{display:flex;align-items:center;justify-content:center;gap:11px;
  min-height:38px;flex-wrap:wrap;text-align:center}
.strip__r{font-weight:650;color:#fff}
.strip__p{color:var(--brand-t);font-weight:700;text-decoration:none;
  font-family:var(--font-num)}
.strip__p:hover{text-decoration:underline;text-underline-offset:3px}
.strip__w{font-size:10.6px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--on-teal-m);border:1px solid var(--line-t2);border-radius:var(--pill);
  padding:1px 8px}
.strip__g,.strip__s{color:var(--on-teal-m)}
.strip__d{width:4px;height:4px;border-radius:50%;background:var(--line-t2);
  flex:0 0 auto}
@media(max-width:760px){.strip__s,.strip__d--last{display:none}}
@media(max-width:520px){.strip__g,.strip__d{display:none}}

/* -------------------------------------------------------------- the header */
.hdr{position:sticky;top:0;z-index:75;border-bottom:1px solid var(--rule);
  background-color:var(--ground)}
/* The blur lives on a pseudo-element, never on .hdr itself. backdrop-filter
   (like filter, transform, perspective, contain:paint and will-change) makes
   its element the containing block for every position:fixed descendant, which
   laid an entire mobile drawer out inside the header for one release. */
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(251,248,242,.88);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);
  backdrop-filter:saturate(1.5) blur(14px)}
.hdr__in{display:flex;align-items:center;gap:18px;min-height:68px}

.brand{display:flex;align-items:center;gap:11px;text-decoration:none;
  flex:0 0 auto;margin-right:auto}
.brand__m{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;
  background-color:var(--teal);color:#fff;font-family:var(--font-d);
  font-weight:700;font-size:20px;border-radius:50%}
.brand__t{display:flex;flex-direction:column;line-height:1.1}
.brand__t b{font-family:var(--font-d);font-size:19px;font-weight:700;
  letter-spacing:-.012em}
.brand__t i{font-style:normal;font-size:10.4px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-m);font-weight:600}

.nav{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.nav a:not(.btn){text-decoration:none;font-size:14.6px;font-weight:600;
  padding:9px 12px;border-radius:var(--pill);color:var(--fg);white-space:nowrap;
  transition:background-color var(--t-hover) var(--ease)}
.nav a:not(.btn):hover{background-color:var(--card-2)}
.nav a:not(.btn)[aria-current]{color:var(--brand);background-color:var(--wash)}
.nav .btn{margin-left:8px;padding:11px 20px;font-size:14.6px}
.nav__x{display:none;background:none;border:0;cursor:pointer;font-size:30px;
  line-height:1;color:var(--fg);padding:4px 10px}
.burger{display:none;background:none;border:1px solid var(--rule-2);
  border-radius:var(--pill);width:46px;height:42px;cursor:pointer;
  align-items:center;justify-content:center;flex:0 0 auto}
.burger span,.burger span::before,.burger span::after{display:block;width:19px;
  height:2px;background:var(--fg);border-radius:2px;position:relative;
  transition:transform var(--t-hover) var(--ease),opacity 90ms linear}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.scrim{position:fixed;inset:0;z-index:70;background:rgba(6,26,25,.52);border:0;
  opacity:0;transition:opacity 200ms linear}
.scrim.is-on{opacity:1}

@media(max-width:1150px){
  /* With script off there is no drawer to open, so the nav stays in the
     document: it wraps under the brand and every link remains reachable. */
  html:not(.js) .hdr__in{flex-wrap:wrap;padding-block:10px;gap:10px}
  html:not(.js) .nav{width:100%;gap:2px}
  html:not(.js) .nav .btn{margin-left:auto}

  html.js .burger{display:inline-flex}
  html.js .nav{position:fixed;inset:0 0 0 auto;z-index:90;width:min(340px,86vw);
    background-color:var(--card);border-left:1px solid var(--rule);
    flex-direction:column;align-items:stretch;gap:2px;flex-wrap:nowrap;
    padding:64px 18px 26px;overflow-y:auto;
    box-shadow:-18px 0 44px -22px rgba(0,0,0,.4);
    transform:translateX(102%);visibility:hidden;
    transition:transform 260ms var(--ease-out),visibility 0s linear 260ms}
  html.js .nav.is-open{transform:translateX(0);visibility:visible;
    transition:transform 260ms var(--ease-out),visibility 0s linear 0s}
  html.js .nav a:not(.btn){padding:13px 14px;font-size:16.5px;
    border-radius:var(--r-sm);border-bottom:1px solid var(--rule)}
  html.js .nav .btn{margin:16px 0 0;width:100%}
  html.js .nav__x{display:inline-flex;position:absolute;top:13px;right:12px}
}

/* ---------------------------------------------------------------- the hero -
   Composition: SPLIT DIAGONAL. A teal wedge is cut across the right of the
   hero; the product stands in it, the argument sits on the paper beside it,
   and the twenty-one names run up the seam between the two. */
.hero{position:relative;overflow:hidden;isolation:isolate;
  background-color:var(--paper);
  padding:clamp(32px,4.6vw,58px) 0 clamp(28px,3.6vw,44px);
  border-bottom:1px solid var(--rule)}
.hero__wedge{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-color:var(--teal);overflow:hidden;
  /* the diagonal itself: from just past the middle at the top, down and left */
  clip-path:polygon(63% 0,100% 0,100% 100%,45% 100%)}
/* The seam lives INSIDE the wedge on purpose. Floating it over the whole hero
   put the same aqua type on the paper half at 1.5:1, where it was neither
   decoration nor text. Inside, it is always on teal, at 6.3:1. */
.hero__seam{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero__seam span{position:absolute;left:50%;top:50%;width:190%;
  transform:translate(-50%,-50%) rotate(-27.5deg);
  font-family:var(--font-num);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand-t);white-space:nowrap;
  text-align:center}
@media(max-width:900px){
  .hero__wedge{clip-path:polygon(0 62%,100% 42%,100% 100%,0 100%)}
  .hero__seam span{transform:translate(-50%,-50%) rotate(-6.5deg);top:70%}
}

.hero__in{display:grid;gap:clamp(22px,4vw,40px);grid-template-columns:1fr;
  align-items:center}
/* 1.1/0.9 rather than 1/1: at an even split the two hero buttons landed one
   pixel over the column and stacked. */
@media(min-width:900px){.hero__in{grid-template-columns:1.1fr .9fr}}

.hero__eb{font-size:12.2px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand);margin:0 0 14px;
  display:flex;align-items:center;gap:9px}
.hero__eb::before{content:"";width:26px;height:2px;
  background-color:var(--brand-f);flex:0 0 auto}
.hero__h{margin:0 0 18px;font-size:clamp(34px,5.4vw,60px);line-height:1.04;
  letter-spacing:-.022em;max-width:16ch}
.hero__h em{font-style:italic;color:var(--brand);display:block}
/* The copy sits on paper and the wedge is teal. The measure is capped so that
   no line of transparent body text ever crosses the diagonal, where it would
   be dark type on a dark ground. */
.hero__s{font-size:clamp(16px,1.55vw,18.5px);color:var(--fg-m);max-width:46ch;
  margin:0 0 24px}
.hero__s b{color:var(--fg)}
.hero__a{display:flex;flex-wrap:wrap;gap:11px;margin:0 0 26px}

.hero__m{position:relative;display:grid;place-items:center;min-height:240px}
.hero__prod{position:relative;width:min(100%,380px)}
.hero__prod img{width:100%;height:auto;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.4))}
.hero__badge{position:absolute;right:0;bottom:2%;z-index:2;
  background-color:var(--paper-2);color:var(--on-paper);border-radius:var(--r);
  padding:13px 17px;text-align:center;min-width:116px;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.5)}
.hero__badge b{display:block;font-family:var(--font-d);font-size:33px;
  font-weight:700;line-height:1;color:var(--brand-p)}
.hero__badge span{display:block;font-size:11px;color:var(--on-paper-m);
  margin-top:4px}
.hero__badge u{display:block;font-size:9.4px;text-decoration:none;
  color:var(--on-paper-m);letter-spacing:.07em;text-transform:uppercase;
  margin-top:3px}

/* fact chips */
.kr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background-color:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden}
@media(min-width:620px){.kr{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kr__i{background-color:var(--card);padding:14px 15px}
.kr__f{display:block;font-family:var(--font-num);
  font-size:clamp(18px,2.1vw,23px);font-weight:700;line-height:1.1;
  letter-spacing:-.02em}
.kr__l{display:block;font-size:12.2px;color:var(--fg-m);margin-top:5px;
  line-height:1.36}

/* trust row */
.trow{display:grid;grid-template-columns:1fr;gap:1px;
  margin-top:clamp(22px,3vw,34px);background-color:var(--rule);
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
@media(min-width:560px){.trow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.trow{grid-template-columns:repeat(4,minmax(0,1fr))}}
.trow__i{background-color:var(--card);padding:15px 17px;display:flex;
  align-items:baseline;gap:10px}
.trow__i b{font-family:var(--font-num);font-size:18px;font-weight:700;
  color:var(--brand);flex:0 0 auto}
.trow__i span{font-size:13px;color:var(--fg-m);line-height:1.38}