/* ==========================================================================
   BASE — reset, document, typography, utilities
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:120px;               /* clears the sticky header on anchors */
  /* NOTE: do NOT use `overflow-x:clip` here. When one axis is `clip` the other
     axis's `visible` computes to `clip` as well, which silently kills vertical
     scrolling for the whole document. The off-canvas drawer is prevented from
     extending the page width by its own clipping wrapper instead — see
     .drawer-wrap in layout.css. */
  overflow-x:hidden;
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  min-height:100svh;
  font-family:var(--ff-body);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.7;
  color:var(--ink-2);
  background:var(--obsidian);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

img,svg,video,canvas{display:block;max-width:100%}
img,video{height:auto}
/* `display:contents` removes <picture> from the box tree, so an <img> inside it
   is sized by the real container. Without this, `height:100%` on the image has
   no resolvable parent height and every media box collapses to natural ratio. */
picture{display:contents}
/* NOTE: no global `svg{fill:currentColor}`. CSS beats presentation attributes,
   so it would override each outline icon's own fill="none" and render every
   circle/triangle as a solid blob. Filled icons carry fill="currentColor"
   on the element itself; outline icons carry stroke="currentColor". */
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
a{color:var(--blue-400);text-decoration:none}
a:hover{color:var(--blue-500)}
hr{border:0;height:1px;background:var(--slate)}
::selection{background:var(--blue-500);color:#fff}

/* ---- Headings ---------------------------------------------------------- */
h1,h2,h3,h4,h5,h6,.display{
  font-family:var(--ff-display);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--ink);
  text-wrap:balance;
}
h1,.h1{font-size:var(--fs-h1)}
h2,.h2{font-size:var(--fs-h2)}
h3,.h3{font-size:var(--fs-h3);line-height:1.15}
h4,.h4{font-size:var(--fs-h4);line-height:1.25;letter-spacing:-.01em}
p{text-wrap:pretty}
p + p{margin-top:var(--sp-4)}
strong,b{color:var(--ink);font-weight:600}

/* Chrome-gradient text fill, with a solid fallback for unsupported engines. */
.chrome-text{color:var(--ink)}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .chrome-text{
    background:var(--grad-chrome);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
}

.lead{font-size:var(--fs-lead);line-height:1.65;color:var(--ink-2)}
.muted{color:var(--ink-3)}
.tnum{font-variant-numeric:tabular-nums}

/* Section eyebrow: uppercase micro-label preceded by a gradient rule. */
.eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--ff-display);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--blue-400);
  margin-bottom:var(--sp-4);
}
.eyebrow::before{
  content:"";width:28px;height:2px;border-radius:2px;
  background:var(--grad-blue);flex:none;
}
.eyebrow--red{color:var(--red-400)}
.eyebrow--red::before{background:var(--grad-red)}
.eyebrow--center{justify-content:center}

/* ---- Layout helpers ---------------------------------------------------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:960px}
.section{position:relative;padding-block:var(--section-y);isolation:isolate}
.section--tight{padding-block:clamp(2.5rem,6vw,4.5rem)}
.section--alt{background:var(--carbon)}
.section-head{max-width:760px;margin-bottom:clamp(2rem,4vw,3.5rem)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head p{margin-top:var(--sp-4);font-size:var(--fs-lead);color:var(--ink-2)}
.stack > * + *{margin-top:var(--sp-4)}
.prose{max-width:var(--maxw-narrow)}
.prose h2{margin-top:var(--sp-7);margin-bottom:var(--sp-4)}
.prose h3{margin-top:var(--sp-6);margin-bottom:var(--sp-3)}
.prose ul{margin:var(--sp-4) 0;display:grid;gap:var(--sp-3)}
.prose ul li{position:relative;padding-left:1.75rem}
.prose ul li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  border-radius:2px;background:var(--grad-blue);transform:rotate(45deg);
}
.grid{display:grid;gap:clamp(1rem,2vw,1.75rem)}
.center{text-align:center}

/* ---- Accessibility ----------------------------------------------------- */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;top:0;left:50%;transform:translate(-50%,-120%);
  z-index:var(--z-toast);
  padding:.85rem 1.6rem;border-radius:0 0 var(--r-md) var(--r-md);
  background:var(--blue-500);color:#fff;font-weight:600;
  transition:transform var(--t-fast) var(--ease-out);
}
.skip-link:focus-visible{transform:translate(-50%,0);color:#fff}

:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:3px solid var(--blue-400);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

/* Texture + ambient glow layers used behind major sections. */
.mesh::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:var(--grad-mesh);pointer-events:none;
}
.hairlines::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.04;
  background-image:repeating-linear-gradient(115deg,
    var(--ink) 0 1px,transparent 1px 9px);
}

/* Angled section edge — a body-line crease rather than a flat boundary. */
.skew-top{clip-path:polygon(0 2.4vw,100% 0,100% 100%,0 100%)}
.skew-bottom{clip-path:polygon(0 0,100% 0,100% calc(100% - 2.4vw),0 100%)}
@media (max-width:640px){
  .skew-top{clip-path:polygon(0 4vw,100% 0,100% 100%,0 100%)}
  .skew-bottom{clip-path:polygon(0 0,100% 0,100% calc(100% - 4vw),0 100%)}
}

/* Print */
@media print{
  .topbar,.site-header,.mobile-bar,.promo-popup,.promo-scrim,
  .scroll-progress,.preloader,.to-top{display:none!important}
  body{background:#fff;color:#000}
}