/* src/styles/status-pulse.css */
@keyframes status-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}


/* src/styles/tokens.css */
:root {
  /* Typography — Font families */
  --font-primary: "Overused Grotesk", sans-serif;
  --font-secondary: "Space Mono", monospace;
  --font-tertiary: "Space Grotesk", monospace;

  /* Typography — Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semi: 600;
  --font-weight-bold: 700;

  /* Typography — Line-height / letter-spacing (constant per role; font-size is fluid via the framework scale groups) */
  --text-heading-extra-line-height: 0.75;
  --text-heading-extra-letter-spacing: -0.03em;

  --text-heading-display-cap-line-height: 0.75;
  --text-heading-display-line-height: 0.85;
  --text-heading-display-letter-spacing: -0.0069em;

  --text-heading-h1-line-cap-height: 0.79;
  --text-heading-h1-line-height: 0.89;
  --text-heading-h1-letter-spacing: 0.0052em;

  --text-heading-h2-cap-line-height: 0.9;
  --text-heading-h2-line-height: 1.15;
  --text-heading-h2-letter-spacing: 0em;

  --text-heading-h3-line-height: 1.083;
  --text-heading-h3-letter-spacing: 0.0104em;

  --text-heading-h4-line-height: 1.0625;
  --text-heading-h4-letter-spacing: 0.0156em;

  --text-title-line-height: 1;
  --text-title-letter-spacing: 0.025em;

  --text-eyebrow-line-height: 1;
  --text-eyebrow-letter-spacing: 0.03125em;

  --text-btn-line-height: 1;
  --text-btn-letter-spacing: 0em;

  --text-body-sm-line-height: 1.4286;
  --text-body-sm-letter-spacing: 0px;

  --text-body-md-line-height: 1.5;
  --text-body-md-letter-spacing: 0.0156em;

  --text-body-lg-line-height: 1.3;
  --text-body-lg-letter-spacing: 0em;

  --text-body-xlg-line-height: 1.333;
  --text-body-xlg-letter-spacing: 0em;

  --text-caption-line-height: 1.143;
  --text-caption-letter-spacing: 0.0357em;

  --tag: clamp(1.2rem, calc(0.19vw + 1.14rem), 1.4rem);
  --text-tag-line-height: 1;
  --text-tag-letter-spacing: 0.0357em;

  --text-tooltip-line-height: 1.333;
  --text-tooltip-letter-spacing: 0em;

  --text-legal-line-height: 1.5;
  --text-legal-letter-spacing: 0em;
}


/* src/styles/responsive.css */
/* Ranges Instatic's breakpoint system cannot express.
   site_apply_css normalises every media query onto the three configured
   breakpoints (375 / 768 / 1440), so a range like 600-768 collapses into
   max-width:768 and overwrites the phone layout. Rules that need a real
   range live here instead, where they ship verbatim. */

/* Tablets only. Phones keep the stacked, full-width hero: an iPhone 14 Pro
   Max is 430px CSS and must not pick this up. */
@media (min-width: 600px) and (max-width: 768px) {
  .hero-title-container {
    grid-row: 3;
    grid-column-start: span 4;
    grid-column-end: auto;
  }
  .hero-text-container {
    grid-row: 3;
    grid-column-start: span 4;
    grid-column-end: auto;
  }
}

/* Footer tagline has three lengths. Instatic's 768 breakpoint only gives two,
   and tablets sit either side of it (iPad Mini 768, iPad Air 820), so the
   range lives here. Above 1024 the full desktop string fits. */
.footer .u-tablet-inline { display: none; }

@media (min-width: 600px) and (max-width: 1024px) {
  .footer .u-tablet-inline { display: inline; }
  .footer .u-desktop-inline,
  .footer .u-mobile-inline { display: none; }
}


/* Flag framing nudges. Desktop sits a little higher, phones a little lower;
   applied to the media box so the mobile scale(1.1) on the video is untouched.
   Kept here because 769+ and sub-600 are not Instatic breakpoints. */
@media (min-width: 769px) {
  /* margin, not transform: a transform moves the flag visually but leaves its
     layout box behind, which inflated the gap to the text by the same 5%. */
  .mission-media { margin-top: -2.8vw; }
}
@media (max-width: 599px) {
  .mission-media { margin-top: 2.8vw; }
}

/* Phone only: drop the hero block so it clears the top of the screen. */
@media (max-width: 599px) {
  .splash-hero { padding-top: 5dvh; }
}

/* Pull the right edge in above phone width so the manifesto reads as a column
   rather than running the full 1344px measure. Left edge stays on the gutter,
   since the copy is left-aligned. */
@media (min-width: 600px) {
  .mission-stanza { max-width: 90%; }
}

/* Better last-line breaks on running copy site-wide. Ignored by browsers that
   do not support it, so it is safe as a progressive enhancement. */
p, .mission-line, .pay-lede, .pay-callout-text, .splash-statement-text {
  text-wrap: pretty;
}


/* ==========================================================================
   Payloads responsive pass.
   Every two-column block on this page was authored at fixed pixel widths that
   only resolve at 1440 - below that the spec table collapsed to 0px and the
   evidence panels overflowed their container. Columns now hold their intended
   proportions on desktop and stack cleanly below it.
   ========================================================================== */

/* --- Rhythm. The section padding was hardcoded 160px, so it never scaled and
   ate a third of a phone screen. --padding-4xl clamps 48 -> 160. */
.pay-keyfigure,
.pay-domains {
  padding-top: var(--padding-4xl);
  padding-bottom: var(--padding-4xl);
}
/* Product sections take top padding only: the following section supplies its
   own, and stacking both doubled the run-in to the next rule to 320px. */
.pay-product {
  padding-top: var(--padding-4xl);
  padding-bottom: 0;
}
/* The map foot occupies the same band as the VERDICT row so the plot ends on
   that rule and the legend lines up beside it. */
.tr-map-foot { min-height: 92px; padding-top: 20px; }
.pay-eyebrow { padding-top: var(--padding-4xl); }
.pay-cols { margin-top: var(--padding-4xl); }
.pay-evidence { margin-top: var(--padding-4xl); }
.pay-lede-wrap { margin-top: var(--section-row-gap); }
.pay-col { row-gap: var(--section-row-gap); }
.pay-quote { margin-top: var(--padding-xl); }

/* --- Line-height. 32px set on 34px is 1.06 and reads as a solid block. */
.page-hero-lede { line-height: 1.25; }
.pay-gen-name { line-height: 1.2; }
.domain-name { line-height: 1.2; }

/* --- Fluid caps instead of fixed widths. */
.pay-quote { max-width: min(574px, 100%); }
.pay-lede-wrap .pay-lede { max-width: min(658px, 100%); }
.tr-map { width: 100%; }
.hv-stage { width: 100%; }

/* --- Product columns: image beside the gen list only where both fit. */
@media (max-width: 1023px) {
  .pay-cols { grid-template-columns: minmax(0, 1fr); row-gap: var(--section-row-gap); }
  .pay-panel { grid-template-columns: minmax(0, 1fr); row-gap: var(--section-row-gap); }
  .pay-callout {
    align-self: auto;
    border-left: 0;
    border-top: 1px solid var(--color-neutral-dark);
    padding: var(--padding) 0 0;
  }
  .tr-wrap { grid-template-columns: minmax(0, 1fr); row-gap: var(--section-row-gap); }
  .hv-wrap { grid-template-columns: minmax(0, 1fr); row-gap: var(--section-row-gap); }
  .domain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Data rows. Three rigid columns crushed the description to nothing; below
   desktop the key sits above its value as a stacked pair. */
@media (max-width: 1023px) {
  .pay-spec-row,
  .tr-row,
  .hv-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
  }
  .tr-value-big { min-width: 0; }
}

/* --- Phone. */
@media (max-width: 599px) {
  .domain-grid { grid-template-columns: minmax(0, 1fr); }
  .pay-tabs { flex-direction: column; row-gap: var(--p-gap); }
  .pay-tab { grid-template-columns: auto 1fr; }
  .pay-evidence { padding-left: var(--p-gap); padding-right: var(--p-gap); }
  .pay-gen { padding-left: var(--p-gap); padding-right: var(--p-gap); }
  .pay-quote { max-width: 100%; margin-right: 0; }
}