/* =============================================================
   XPixel - reset, element defaults, layout primitives
   ============================================================= */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap");

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-inset) + var(--nav-pill) + var(--space-300));
}
html, body { margin: 0; padding: 0; }

body {
  background-color: var(--bg);
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;               /* belt and braces: no page-level horizontal scroll */
  position: relative;
}

/* A quiet editorial column grid, the width of the content container,
   fixed to the viewport so it reads as one continuous ruler behind the
   whole page rather than a strip inside each section. z-index: -1 (not
   0) because body isn't its own stacking context here - a negative
   index is what actually lands it behind in-flow content; anything
   0 or higher on a positioned box still paints after non-positioned
   content regardless of the number. Desktop only: fixed backgrounds
   are a known repaint cost on mobile Safari, and the page doesn't need
   the extra decoration at phone width. */
@media (min-width: 64em) {
  body::before {
    content: "";
    position: fixed;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(to right,
      var(--line-soft) 0, var(--line-soft) 1px,
      transparent 1px, transparent 25%);
    background-size: min(100%, var(--container)) 100%;
    background-position: center top;
    background-repeat: no-repeat;
  }
}

/* Subtle grain - a fixed, static noise layer. Not a gradient, not a
   filter on content; it is one cheap tiled image, darkened via multiply
   so it reads on the light paper background instead of disappearing. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; background: none; border: none; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote { margin: 0; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-style: normal;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
h1 {
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-hero);
}
h2 { font-size: var(--fs-h2); letter-spacing: var(--tracking-hero); line-height: 1; }
h3 { font-size: var(--fs-h3); color: var(--fg-2); }
h4 { font-size: var(--fs-h4); }

/* BYQ two-tone heading: one clause at 64% ink on its own line, the
   other at full strength. */
.h-muted { display: block; color: var(--muted); }

p { margin: 0; text-wrap: pretty; }

.lead { font-size: var(--fs-lead); line-height: var(--lh-snug); color: var(--fg-2); }
.sub { color: var(--muted); }
.tagline { font-family: var(--font-display); font-size: var(--fs-tagline); line-height: var(--lh-tight); font-weight: var(--weight-medium); letter-spacing: var(--tracking-hero); color: var(--fg); }

.label {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--fg-2);
}
/* Section eyebrows sit in BYQ's mono tag: 11px (BYQ's 10px was too small
   to read on a phone), tinted, hairline, 12px radius. */
:is(.sec-head, .rail-head, .toolkit-copy, .cta-panel, .faq, .stack-strip-head) .label {
  padding: var(--space-50) var(--space-75);
  border-radius: var(--radius-control);
  border: 1px solid var(--line);
  background: var(--line);
  font-size: 0.6875rem;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Author display rules (.btn, .chip…) must never un-hide an element that
   carries the hidden attribute. */
[hidden] { display: none !important; }

/* ---- Focus ring - always visible, never suppressed -------------- */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* Small mono metadata - one style for numbering, categories, counters */
.meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); letter-spacing: var(--tracking-mono); font-variant-numeric: tabular-nums; }

/* Hero heading - solid ink, as on BYQ (the class is kept for markup stability) */
.gradient-heading { color: var(--fg); }

/* ---- Layout primitives -------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.measure { max-width: var(--measure); }
.measure-short { max-width: var(--measure-short); }

.section { padding-block: var(--section-y); border-block-start: 1px solid var(--line-soft); }   /* BYQ full-width rule between sections */
.section--tight { padding-block: var(--section-y-tight); }
.section--loose { padding-block: var(--section-y-loose); }

/* Full-bleed bands: the band is full width, its content still sits on
   the container grid. The page has one principal background (paper);
   a warm band marks the two places the story changes register, and
   the ink scope (tokens.css) marks the close. Adjacent sections that
   share a band share a surface - the band never changes just because
   a new section begins.

   Where a band's colour actually meets a different one, it blends
   rather than cutting: each band is its own gradient, solid for most of
   its height and fading to the page colour only at an edge that has
   something different on the other side of it. Two custom properties
   control this per section, left unset (solid, no fade) by default:
     --band-edge-start: var(--bg)   blend in from the page colour at the top
     --band-edge-end:   var(--bg)   blend out to the page colour at the bottom
   A run of same-coloured sections (e.g. the tagline into the toolkit)
   sets --band-edge-start only on the first and --band-edge-end only on
   the last, so the seam between them stays one uninterrupted colour -
   only the outer edges of the group ever fade. */
.band, .band--warm, .band--surface, .band--paper {
  background: linear-gradient(to bottom,
    var(--band-edge-start, var(--band-color)) 0,
    var(--band-color) var(--band-blend),
    var(--band-color) calc(100% - var(--band-blend)),
    var(--band-edge-end, var(--band-color)) 100%);
}
.band { --band-color: var(--bg); }
.band--warm { --band-color: var(--bg-warm); }
.band--surface { --band-color: var(--surface); }
.band--paper { --band-color: var(--bg); }

/* Carries the column grid (above) through the bands too, as a second,
   topmost background layer over the same edge-blend gradient, so the
   ruler reads as one continuous line down the page instead of stopping
   wherever a band's own colour takes over from the plain page background. */
@media (min-width: 64em) {
  .band, .band--warm, .band--surface, .band--paper {
    background-image:
      repeating-linear-gradient(to right,
        var(--line-soft) 0, var(--line-soft) 1px,
        transparent 1px, transparent 25%),
      linear-gradient(to bottom,
        var(--band-edge-start, var(--band-color)) 0,
        var(--band-color) var(--band-blend),
        var(--band-color) calc(100% - var(--band-blend)),
        var(--band-edge-end, var(--band-color)) 100%);
    background-size: min(100%, var(--container)) 100%, auto;
    background-position: center top, 0 0;
    background-repeat: no-repeat, no-repeat;
  }
}

/* 12-column grid - desktop composition. Below 64em everything spans
   the full width and the source order is the reading order. */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-400);
}
.grid > * { grid-column: 1 / -1; min-width: 0; }

@media (min-width: 64em) {
  .grid > .span-3 { grid-column: span 3; }
  .grid > .span-4 { grid-column: span 4; }
  .grid > .span-5 { grid-column: span 5; }
  .grid > .span-6 { grid-column: span 6; }
  .grid > .span-7 { grid-column: span 7; }
  .grid > .span-8 { grid-column: span 8; }
  .grid > .span-9 { grid-column: span 9; }
  .grid > .start-2 { grid-column-start: 2; }
  .grid > .start-7 { grid-column-start: 7; }
  .grid > .start-8 { grid-column-start: 8; }
  .grid > .start-9 { grid-column-start: 9; }
  .grid > .span-5.start-8 { grid-column: 8 / span 5; }
  .grid > .span-4.start-9 { grid-column: 9 / span 4; }
  .grid > .span-6.start-7 { grid-column: 7 / span 6; }
  .grid > .span-7.start-6 { grid-column: 6 / span 7; }
  .grid > .span-8.start-3 { grid-column: 3 / span 8; }
}

/* Section header - heading left, one-line support right. Editorial,
   never centred. */
.sec-head { align-items: start; margin-block-end: var(--space-500); }
.sec-head h2 { margin-block-start: var(--space-100); max-width: 22ch; }
.sec-head .sec-sub { color: var(--fg-2); font-size: var(--fs-lead); line-height: var(--lh-snug); max-width: 34rem; }
@media (min-width: 64em) {
  .sec-head { margin-block-end: var(--space-600); }
  .sec-head .sec-sub { padding-block-end: var(--space-50); }
}


/* ---- Reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
}