/* ==========================================================================
   Austin Nguyen — SEO & AEO services
   seo-aeo/styles.css

   Property token group: "hub". This page is a second offering under the
   Austin Nguyen brand, NOT a separate brand. Same near-black canvas, same
   single lime accent, same Archivo / Space Grotesk type as index.html, so a
   visitor moving between the two feels one continuous site.

   Anything that reads as data — the P01–P07 pillar numerals, the fact strip,
   pricing figures, report line-items — is set in Space Grotesk with
   tabular-nums and wide uppercase tracking. That is the "measurement" texture,
   achieved without adding a font. No new color, no new font is introduced.

   The token block below is GENERATED from design-system/tokens.json.
   Do not hand-edit values here — edit tokens.json, re-run
   tools/check_tokens.py, and regenerate.

   Every rule below the token block consumes var(--semantic-role) only.
   No raw color literals, no primitive references outside the token block.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS  (generated from design-system/tokens.json)
   ========================================================================== */

:root {

  /* --- primitives: primitive.hub --------------------------------------- */
  --hub-ink-950: #0A0E13;
  --hub-ink-900: #111720;
  --hub-ink-850: #161D27;
  --hub-ink-800: #1D2530;
  --hub-ink-700: #2A3441;
  --hub-ink-600: #5A6875;
  --hub-ink-400: #8D9BAA;
  --hub-ink-300: #AFBCC9;
  --hub-ink-100: #DCE4EC;
  --hub-ink-050: #EFF4F9;
  --hub-lime-300: #D4F96B;
  --hub-lime-400: #C3F53C;
  --hub-lime-600: #8FBF12;
  --hub-good-400: #57D98A;
  --hub-warn-400: #F5C451;
  --hub-bad-400: #F0776A;
  --hub-white: #FFFFFF;

  /* --- primitives: borrowed for the case-study accent roles -------------
     semantic.hub declares four case-* roles that point at the other property
     groups. They are declared here for faithful parity with the hub :root,
     lifted verbatim from primitive.terra / .iron / .lumen / .maison in
     tokens.json. This page renders no case cards, so they are declared but
     not consumed by any rule below.
     --------------------------------------------------------------------- */
  --terra-clay-600: #A8421D;
  --terra-clay-500: #C4562B;
  --terra-olive-600: #55643C;
  --iron-amber-700: #B45309;
  --iron-amber-500: #F59E0B;
  --iron-navy-800: #1E3A8A;
  --lumen-teal-700: #0E7490;
  --lumen-teal-600: #0891B2;
  --lumen-mint-200: #BFE3DD;
  --maison-gold-400: #D4BC7E;
  --maison-noir-700: #33302B;

  /* --- semantic roles: semantic.hub ------------------------------------ */
  --bg: var(--hub-ink-950);
  --surface: var(--hub-ink-900);
  --surface-raised: var(--hub-ink-850);
  --surface-inset: var(--hub-ink-800);
  --border-subtle: var(--hub-ink-700);
  --border-interactive: var(--hub-ink-600);
  --text-primary: var(--hub-ink-050);
  --text-secondary: var(--hub-ink-300);
  --text-muted: var(--hub-ink-400);
  --action-primary: var(--hub-lime-400);
  --action-primary-hover: var(--hub-lime-300);
  --on-action-primary: var(--hub-ink-950);
  --accent-graphic: var(--hub-lime-600);
  --focus-ring: var(--hub-lime-400);
  --status-good: var(--hub-good-400);
  --status-warn: var(--hub-warn-400);
  --status-bad: var(--hub-bad-400);
  --border-interactive-hover: var(--hub-ink-400);
  --text-emphasis: var(--hub-ink-100);
  --text-max: var(--hub-white);

  /* --- semantic roles: case-study accents (declared for parity) -------- */
  --case-terra-accent: var(--terra-clay-600);
  --case-terra-graphic: var(--terra-olive-600);
  --case-terra-dot: var(--terra-clay-500);
  --case-iron-accent: var(--iron-amber-700);
  --case-iron-graphic: var(--iron-navy-800);
  --case-iron-dot: var(--iron-amber-500);
  --case-lumen-accent: var(--lumen-teal-700);
  --case-lumen-graphic: var(--lumen-mint-200);
  --case-lumen-dot: var(--lumen-teal-600);
  --case-maison-accent: var(--maison-gold-400);
  --case-maison-graphic: var(--maison-noir-700);
  --case-maison-dot: var(--maison-gold-400);

  /* --- shared scale: space (scales.space, 4px grid) -------------------- */
  --space-0: 0px;
  --space-px: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* --- shared scale: type (scales.type) -------------------------------- */
  --type-xs: 12px;
  --type-sm: 14px;
  --type-base: 16px;
  --type-md: 18px;
  --type-lg: 20px;
  --type-xl: 24px;
  --type-2xl: 30px;
  --type-3xl: 36px;
  --type-4xl: 48px;
  --type-5xl: 60px;
  --type-6xl: 72px;
  --type-7xl: 96px;

  /* --- shared scale: leading (scales.leading) -------------------------- */
  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --leading-loose: 1.75;

  /* --- shared scale: weight (scales.weight) ---------------------------- */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* --- shared scale: radius (scales.radius) ----------------------------
     The hub binds md 8 and lg 12 only (MASTER section 5).
     --------------------------------------------------------------------- */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-4xl: 32px;
  --radius-full: 999px;

  /* --- shared scale: motion (scales.motion) ---------------------------- */
  --dur-instant: 120ms;
  --dur-fast: 180ms;
  --dur-base: 240ms;
  --dur-slow: 320ms;
  --dur-slower: 480ms;
  --dur-slowest: 640ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- shared scale: z (scales.z) -------------------------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 20;
  --z-overlay: 40;
  --z-modal: 100;
  --z-toast: 1000;

  /* --- shared scale: container (scales.container) ---------------------- */
  --container-prose: 680px;
  --container-narrow: 880px;
  --container-default: 1160px;
  --container-wide: 1360px;

  /* --- typography stacks (typography.hub) ------------------------------ */
  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* --- derived layout values -------------------------------------------
     Composed from the scales above, never from fresh numbers. The hairline
     is the one exception: it is deliberately one device pixel.
     --------------------------------------------------------------------- */
  --gutter: var(--space-5);
  --rule-hairline: 1px;
  --header-height: var(--space-16);

  /* Breakpoints live in the media queries themselves because custom
     properties cannot be used in media conditions. The token values from
     scales.breakpoint are 480, 768, 1024, 1280 and 1536. */
}


/* ==========================================================================
   2. RESET AND BASE
   ========================================================================== */

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

* {
  margin: 0;
}

html {
  background-color: var(--bg);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-6));
}

body {
  background-color: transparent;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--type-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  min-height: 100%;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

svg {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

/* Scoped to classed lists so an unclassed <ul> in prose keeps its markers.
   Every classed list in the markup carries role="list", because Safari with
   VoiceOver drops list semantics from any list whose list-style is none. */
ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

a {
  color: var(--action-primary);
  text-decoration-color: var(--action-primary);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-thickness var(--dur-fast) var(--ease-out);
}

a:hover {
  color: var(--action-primary-hover);
  text-decoration-thickness: 2px;
}

strong,
b {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

/* No border-radius here: a bare :focus-visible radius reshapes every element
   that does not declare its own. Elements that want a rounded ring carry
   their own radius in their own rule. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

::selection {
  background-color: var(--action-primary);
  color: var(--on-action-primary);
}


/* ==========================================================================
   3. TYPOGRAPHY ROLES
   ========================================================================== */

h1, h2, h3, h4 {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: var(--leading-snug);
  text-wrap: balance;
}

/* MASTER section 9 item 5: Space Grotesk stays on headings and UI, long-form
   body copy is set in Archivo. --font-display is Archivo, so the prose
   selectors below take it and everything else stays on --font-body. */
.hero__lede,
.t-lead,
.job__text,
.job__lede,
.pillar__text,
.spotlight__text,
.spotlight__points li,
.cycle__text,
.cycle__loop,
.study__text,
.study__result-text,
.study__result-note,
.measure__item-text,
.measure__note,
.terms-card__text,
.terms-card__list li,
.tier__who,
.setup__text,
.answer__reply-text,
.contact__direct-text,
.form__intro,
.form__success-text,
.site-footer__blurb {
  font-family: var(--font-display);
}

.t-h2 {
  font-size: var(--type-2xl);
  letter-spacing: -0.025em;
  line-height: var(--leading-snug);
}

.t-h3 {
  font-size: var(--type-xl);
  letter-spacing: -0.02em;
}

.t-lead {
  color: var(--text-emphasis);
  font-size: var(--type-md);
  line-height: var(--leading-relaxed);
  max-width: var(--container-prose);
}

.t-eyebrow {
  align-items: center;
  color: var(--text-muted);
  display: flex;
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  gap: var(--space-3);
  letter-spacing: 0.16em;
  line-height: var(--leading-normal);
  text-transform: uppercase;
}

.t-eyebrow__num {
  color: var(--action-primary);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-bold);
}

.t-eyebrow__num::after {
  background-color: var(--border-subtle);
  content: "";
  display: inline-block;
  height: 1px;
  margin-inline-start: var(--space-3);
  vertical-align: middle;
  width: var(--space-6);
}

/* Hero kicker: the "measurement" texture — Space Grotesk, tabular figures,
   wide uppercase tracking, lime. */
.t-kicker {
  color: var(--action-primary);
  font-family: var(--font-body);
  font-size: var(--type-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-bold);
  letter-spacing: 0.22em;
  line-height: var(--leading-normal);
  text-transform: uppercase;
}

code {
  background-color: var(--surface-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
  padding: var(--space-px) var(--space-2);
  white-space: nowrap;
}

.t-num {
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */

.container {
  margin-inline: auto;
  max-width: var(--container-default);
  padding-inline: var(--gutter);
  width: 100%;
}

.section {
  padding-block: var(--space-16);
  position: relative;
}

.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

.section__head .t-lead {
  margin-top: var(--space-1);
}

.section--surface {
  background-color: var(--surface);
}

/* The AEO spotlight sits between two surfaces and gets a faint lime wash so
   the differentiator pillar reads as an emphasized band. */
.section--spotlight {
  background-color: var(--bg);
  position: relative;
}

.section--spotlight::before {
  background-image:
    radial-gradient(60% 60% at 82% 8%, var(--accent-graphic) 0%, transparent 60%);
  content: "";
  inset: 0;
  opacity: 0.14;
  pointer-events: none;
  position: absolute;
}

.section--spotlight > .container {
  position: relative;
  z-index: var(--z-raised);
}


/* ==========================================================================
   5. UTILITIES
   ========================================================================== */

.skip-link {
  background-color: var(--action-primary);
  border-radius: var(--radius-md);
  color: var(--on-action-primary);
  font-family: var(--font-body);
  font-size: var(--type-sm);
  font-weight: var(--weight-bold);
  left: var(--space-4);
  padding: var(--space-3) var(--space-5);
  position: fixed;
  text-decoration: none;
  top: var(--space-4);
  transform: translateY(-200%);
  z-index: var(--z-toast);
}

.skip-link:focus-visible {
  color: var(--on-action-primary);
  transform: translateY(0);
}

.visually-hidden {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.grain {
  inset: 0;
  mix-blend-mode: overlay;
  opacity: 0.05;
  pointer-events: none;
  position: fixed;
  z-index: -1;
}


/* ==========================================================================
   6. COMPONENT — BUTTON
   Contract: MASTER section 6. Every state declared, never defaulted.
   Sizes: sm 36 (desktop only), md 44, lg 52. Touch floor is 44px.
   ========================================================================== */

.btn {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  display: inline-flex;
  font-family: var(--font-body);
  font-size: var(--type-base);
  font-weight: var(--weight-semibold);
  gap: var(--space-2);
  justify-content: center;
  letter-spacing: -0.01em;
  line-height: var(--leading-normal);
  min-height: 44px;
  padding-inline: var(--space-5);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
}

.btn--lg {
  font-size: var(--type-md);
  min-height: 52px;
  padding-inline: var(--space-6);
}

.btn--sm {
  font-size: var(--type-sm);
  min-height: 36px;
  padding-inline: var(--space-3);
}

.btn--primary {
  background-color: var(--action-primary);
  color: var(--on-action-primary);
}

.btn--primary:hover {
  background-color: var(--action-primary-hover);
  color: var(--on-action-primary);
}

.btn--primary:active {
  transform: scale(0.98);
}

.btn--secondary {
  background-color: transparent;
  border-color: var(--action-primary);
  color: var(--action-primary);
}

.btn--secondary:hover {
  background-color: var(--surface-raised);
  color: var(--action-primary-hover);
}

.btn--secondary:active {
  transform: scale(0.98);
}

.btn--ghost {
  background-color: transparent;
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

.btn--ghost:hover {
  background-color: var(--surface-raised);
  border-color: var(--border-interactive);
  color: var(--text-primary);
}

.btn--ghost:active {
  transform: scale(0.98);
}

.btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.45;
  transform: none;
}

.btn__arrow {
  flex: none;
  height: 14px;
  transition: transform var(--dur-base) var(--ease-out);
  width: 14px;
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}


/* ==========================================================================
   7. COMPONENT — LINK, SURFACE
   ========================================================================== */

.link-inline {
  color: var(--action-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.link-quiet {
  color: var(--text-secondary);
  text-decoration: none;
}

.link-quiet:hover {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Shared checkmark glyph for the pricing and setup lists. */
.tick {
  color: var(--action-primary);
  flex: none;
  height: 16px;
  margin-top: 4px;
  width: 16px;
}


/* ==========================================================================
   8. SITE HEADER AND NAV
   ========================================================================== */

.site-header {
  background-color: var(--bg);
  border-bottom: var(--rule-hairline) solid var(--border-subtle);
  position: sticky;
  top: 0;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  z-index: var(--z-sticky);
}

/* Sticky-header state: main.js adds .is-scrolled once the page is scrolled
   past the hero lip, deepening the bar so it separates from the content. */
.site-header.is-scrolled {
  background-color: var(--surface);
  border-bottom-color: var(--border-interactive);
}

.site-header__inner {
  align-items: center;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  min-height: var(--header-height);
}

.brand {
  align-items: center;
  color: var(--text-primary);
  display: inline-flex;
  gap: var(--space-3);
  min-height: 44px;
  text-decoration: none;
}

.brand:hover {
  color: var(--text-primary);
}

.brand__mark {
  flex: none;
  height: 32px;
  width: 32px;
}

.brand__mark-frame {
  fill: none;
  stroke: var(--border-interactive);
  stroke-width: 2;
}

.brand__mark-glyph {
  fill: var(--action-primary);
}

.brand__name {
  font-family: var(--font-display);
  font-size: var(--type-base);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
}

.brand__role {
  color: var(--text-muted);
  display: block;
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-regular);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav-toggle {
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  display: inline-flex;
  gap: var(--space-2);
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  justify-content: center;
  min-height: 44px;
  padding-inline: var(--space-4);
}

.nav-toggle:hover {
  background-color: var(--surface-raised);
  border-color: var(--border-interactive);
}

.nav-toggle__bars {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-1);
  width: var(--space-5);
}

.nav-toggle__bars span {
  background-color: currentColor;
  display: block;
  height: var(--space-px);
  transition: transform var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
  width: 100%;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.site-nav {
  background-color: var(--surface);
  border-bottom: var(--rule-hairline) solid var(--border-subtle);
  border-top: var(--rule-hairline) solid var(--border-subtle);
  display: none;
  left: 0;
  padding-block: var(--space-2);
  position: absolute;
  right: 0;
  top: 100%;
  z-index: var(--z-overlay);
}

.site-nav.is-open {
  display: block;
}

.site-nav__list {
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  max-width: var(--container-default);
  padding-inline: var(--gutter);
  width: 100%;
}

.site-nav__link {
  align-items: center;
  border-bottom: var(--rule-hairline) solid var(--border-subtle);
  color: var(--text-secondary);
  display: flex;
  font-size: var(--type-base);
  font-weight: var(--weight-medium);
  min-height: 52px;
  text-decoration: none;
  width: 100%;
}

.site-nav__list li:last-child .site-nav__link {
  border-bottom: 0;
}

.site-nav__link:hover {
  color: var(--text-primary);
}

.site-nav__link[aria-current="true"] {
  color: var(--action-primary);
}

.site-header__cta {
  display: none;
}


/* ==========================================================================
   9. HERO
   ========================================================================== */

.hero {
  overflow: hidden;
  padding-block: var(--space-16);
  position: relative;
}

.hero__backdrop {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: var(--z-base);
}

.hero__grid {
  background-image:
    repeating-linear-gradient(to right, var(--border-subtle) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(to bottom, var(--border-subtle) 0 1px, transparent 1px 80px);
  inset: 0;
  -webkit-mask-image: radial-gradient(120% 90% at 12% 0%, var(--bg) 0%, transparent 72%);
  mask-image: radial-gradient(120% 90% at 12% 0%, var(--bg) 0%, transparent 72%);
  opacity: 0.55;
  position: absolute;
}

.hero__glow {
  background-image:
    radial-gradient(58% 48% at 8% 4%, var(--accent-graphic) 0%, transparent 62%),
    radial-gradient(46% 40% at 96% 22%, var(--surface-inset) 0%, transparent 68%);
  inset: -20% -10% auto -10%;
  height: 120%;
  opacity: 0.28;
  position: absolute;
}

.hero__inner {
  position: relative;
  z-index: var(--z-raised);
}

.hero__grid-2 {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: 1fr;
}

.hero__lead-col,
.hero__art-col {
  min-width: 0;
}

.hero__title {
  margin-top: var(--space-5);
}

.hero__title-top {
  color: var(--text-primary);
  display: block;
  font-size: var(--type-3xl);
  font-weight: var(--weight-black);
  letter-spacing: -0.04em;
  line-height: var(--leading-tight);
}

.hero__title-accent {
  color: var(--action-primary);
  display: block;
  font-size: var(--type-3xl);
  font-weight: var(--weight-black);
  letter-spacing: -0.04em;
  line-height: var(--leading-tight);
  margin-top: var(--space-2);
}

.hero__rule {
  background-color: var(--action-primary);
  height: var(--space-1);
  margin-block: var(--space-6);
  width: var(--space-20);
}

.hero__lede {
  color: var(--text-secondary);
  font-size: var(--type-md);
  line-height: var(--leading-relaxed);
  max-width: 52ch;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.hero__facts {
  border-top: var(--rule-hairline) solid var(--border-subtle);
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  margin-top: var(--space-10);
  padding-top: var(--space-6);
}

.hero__fact {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.hero__fact-key {
  color: var(--text-muted);
  font-size: var(--type-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  order: 1;
  text-transform: uppercase;
}

.hero__fact-val {
  color: var(--action-primary);
  font-family: var(--font-body);
  font-size: var(--type-4xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  line-height: var(--leading-tight);
  order: 2;
}

.hero__fact-unit {
  color: var(--text-primary);
  font-size: var(--type-lg);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
}

.hero__fact-note {
  color: var(--text-secondary);
  font-size: var(--type-sm);
  line-height: var(--leading-normal);
  order: 3;
}


/* ==========================================================================
   10. TREND MOTIF  (hero, spotlight, measurement)
   The ascending trend line: lime over an ink grid. Monochrome-plus-lime,
   no second accent color. Hand-authored inline SVG, no image file.
   ========================================================================== */

.trend {
  background-color: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow: hidden;
  padding: var(--space-5);
}

.trend__svg {
  display: block;
  height: auto;
  width: 100%;
}

.trend__grid line {
  stroke: var(--border-subtle);
  stroke-width: 1;
}

.trend__axis {
  stroke: var(--border-interactive);
  stroke-width: 1;
}

.trend__line {
  stroke: var(--action-primary);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.trend__area {
  stroke: none;
}

.trend__dot {
  fill: var(--action-primary);
}

.trend__dot--head {
  fill: var(--action-primary-hover);
  stroke: var(--bg);
  stroke-width: 2;
}

.trend__stop-top {
  stop-color: var(--action-primary);
}

.trend__stop-bottom {
  stop-color: var(--action-primary);
}

.trend__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.trend__tag {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-muted);
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  padding: var(--space-1) var(--space-3);
  text-transform: uppercase;
}

.trend__tag--lit {
  border-color: var(--action-primary);
  color: var(--action-primary);
}

.trend__cap {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--type-xs);
  letter-spacing: 0.02em;
  line-height: var(--leading-normal);
}

.trend--panel {
  gap: var(--space-3);
}


/* ==========================================================================
   11. THE TWO JOBS
   ========================================================================== */

.jobs__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

.job {
  background-color: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  border-top: 4px solid var(--border-interactive);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
}

.job--accent {
  border-top-color: var(--action-primary);
}

.job__num {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.job__title {
  font-size: var(--type-2xl);
  font-weight: var(--weight-black);
  letter-spacing: -0.03em;
}

.job__lede {
  color: var(--text-emphasis);
  font-size: var(--type-md);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.job__text {
  color: var(--text-secondary);
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
}

.job__list {
  border-top: var(--rule-hairline) solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-4);
}

.job__list li {
  color: var(--text-secondary);
  display: flex;
  font-size: var(--type-base);
  gap: var(--space-3);
  line-height: var(--leading-normal);
}

.job__list li::before {
  color: var(--action-primary);
  content: "\002B";
  flex: none;
  font-weight: var(--weight-bold);
  line-height: inherit;
}


/* ==========================================================================
   12. THE SEVEN PILLARS
   ========================================================================== */

.pillars {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
}

.pillar {
  border-top: var(--rule-hairline) solid var(--border-subtle);
  display: grid;
  gap: var(--space-3) var(--space-5);
  grid-template-columns: 1fr;
  padding-block: var(--space-6);
}

.pillar:last-child {
  border-bottom: var(--rule-hairline) solid var(--border-subtle);
}

.pillar__num {
  color: var(--action-primary);
  font-family: var(--font-body);
  font-size: var(--type-lg);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  line-height: var(--leading-tight);
}

.pillar__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pillar__flag {
  color: var(--action-primary);
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pillar__title {
  font-size: var(--type-xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

.pillar__q {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--type-md);
  font-style: italic;
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.pillar__text {
  color: var(--text-secondary);
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
  max-width: 68ch;
}

/* P04 is the differentiator — give it an emphasized inset card. */
.pillar--feature {
  background-color: var(--surface-raised);
  border: 1px solid var(--action-primary);
  border-radius: var(--radius-lg);
  margin-block: var(--space-4);
  padding: var(--space-6) var(--space-5);
}

.pillar--feature + .pillar {
  border-top: 0;
}

.pillar--feature .pillar__num {
  color: var(--action-primary);
}


/* ==========================================================================
   13. AEO SPOTLIGHT
   ========================================================================== */

.spotlight__grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}

.spotlight__explain {
  min-width: 0;
}

/* --- the illustrative AI-answer mockup -------------------------------- */
.answer {
  background-color: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.answer__bar {
  align-items: center;
  background-color: var(--surface-inset);
  border-bottom: var(--rule-hairline) solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.answer__badge {
  background-color: var(--action-primary);
  border-radius: var(--radius-sm);
  color: var(--on-action-primary);
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.16em;
  padding: var(--space-1) var(--space-2);
  text-transform: uppercase;
}

.answer__app {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--type-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.answer__prompt {
  border-bottom: var(--rule-hairline) solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
}

.answer__prompt-label,
.answer__reply-label {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.answer__prompt-text {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--type-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  line-height: var(--leading-snug);
}

.answer__reply {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}

.answer__reply-text {
  color: var(--text-secondary);
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
}

.answer__mark {
  background-color: transparent;
  color: var(--action-primary);
  font-weight: var(--weight-semibold);
}

.answer__cites {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.answer__cites li {
  background-color: var(--surface-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--type-xs);
  letter-spacing: 0.04em;
  padding: var(--space-1) var(--space-3);
}

.answer__cap {
  background-color: var(--surface-inset);
  border-top: var(--rule-hairline) solid var(--border-subtle);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--type-xs);
  line-height: var(--leading-normal);
  padding: var(--space-3) var(--space-5);
}

/* --- the explanation column ------------------------------------------- */
.spotlight__subtitle {
  font-size: var(--type-xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

.spotlight__text {
  color: var(--text-secondary);
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-3);
  max-width: 60ch;
}

.spotlight__text--muted {
  color: var(--text-muted);
}

.spotlight__points {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.spotlight__points li {
  border-left: 2px solid var(--action-primary);
  color: var(--text-secondary);
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
  padding-left: var(--space-4);
}

.spotlight__point-title {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}


/* ==========================================================================
   14. HOW MAINTENANCE WORKS  (the monthly cycle)
   ========================================================================== */

.cycle {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

.cycle__step {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: auto 1fr;
}

.cycle__marker {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cycle__num {
  align-items: center;
  background-color: var(--surface-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--action-primary);
  display: flex;
  flex: none;
  font-family: var(--font-body);
  font-size: var(--type-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-bold);
  height: 44px;
  justify-content: center;
  width: 44px;
}

.cycle__spine {
  background-color: var(--border-subtle);
  flex: 1;
  min-height: var(--space-6);
  width: 1px;
}

.cycle__step:last-child .cycle__spine {
  display: none;
}

.cycle__content {
  padding-bottom: var(--space-4);
}

.cycle__title {
  font-size: var(--type-lg);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

.cycle__text {
  color: var(--text-secondary);
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-2);
  max-width: 64ch;
}

.cycle__loop {
  background-color: var(--surface);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--action-primary);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-8);
  padding: var(--space-5);
}


/* ==========================================================================
   15. CASE STUDY — ASCEND
   ========================================================================== */

.study {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

.study__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.study__block {
  border-top: 2px solid var(--border-subtle);
  padding-top: var(--space-4);
}

.study__block:first-child {
  border-top-color: var(--action-primary);
}

.study__label {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.study__text {
  color: var(--text-secondary);
  font-size: var(--type-md);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-3);
  max-width: 64ch;
}

.study__result {
  background-color: var(--surface-raised);
  border: 1px solid var(--action-primary);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
}

.study__result-eyebrow {
  color: var(--action-primary);
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.study__result-title {
  font-size: var(--type-xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

.study__result-text {
  color: var(--text-secondary);
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
}

.study__pending {
  align-items: center;
  background-color: var(--surface-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  display: flex;
  font-family: var(--font-body);
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  gap: var(--space-3);
  letter-spacing: 0.04em;
  margin-block: var(--space-1);
  padding: var(--space-3) var(--space-4);
}

.study__pending-dot {
  background-color: var(--action-primary);
  border-radius: var(--radius-full);
  flex: none;
  height: 10px;
  width: 10px;
}

.study__pending-text {
  font-family: var(--font-body);
}

.study__result-note {
  border-top: var(--rule-hairline) solid var(--border-subtle);
  color: var(--text-muted);
  font-size: var(--type-sm);
  line-height: var(--leading-relaxed);
  padding-top: var(--space-3);
}


/* ==========================================================================
   16. PRICING
   ========================================================================== */

/* --- one-time setup band --------------------------------------------- */
.setup {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  overflow: hidden;
}

.setup__lead {
  background-color: var(--surface-raised);
  border-bottom: 4px solid var(--action-primary);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-5);
}

.setup__tag {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.setup__name {
  font-size: var(--type-xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

.setup__price {
  display: flex;
  align-items: baseline;
  margin-top: var(--space-1);
}

.setup__amount {
  color: var(--text-max);
  font-family: var(--font-display);
  font-size: var(--type-4xl);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-black);
  letter-spacing: -0.04em;
  line-height: var(--leading-tight);
}

.setup__credit {
  color: var(--action-primary);
  font-family: var(--font-body);
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
}

.setup__detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 0 var(--space-5) var(--space-6);
}

.setup__text {
  color: var(--text-secondary);
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
}

.setup__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.setup__list li {
  color: var(--text-secondary);
  display: flex;
  font-size: var(--type-base);
  gap: var(--space-3);
  line-height: var(--leading-normal);
}

.pricing__plans-label {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  margin-top: var(--space-10);
  text-transform: uppercase;
}

/* --- the three monthly tiers ----------------------------------------- */
.pricing__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  margin-top: var(--space-5);
}

.tier {
  background-color: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-5);
  position: relative;
}

.tier--featured {
  background-color: var(--surface-raised);
  border-color: var(--action-primary);
  border-width: 2px;
}

.tier__flag {
  background-color: var(--action-primary);
  border-radius: var(--radius-full);
  color: var(--on-action-primary);
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  left: var(--space-5);
  letter-spacing: 0.1em;
  line-height: var(--leading-tight);
  padding: var(--space-2) var(--space-3);
  position: absolute;
  text-transform: uppercase;
  top: 0;
  transform: translateY(-50%);
}

.tier__name {
  font-size: var(--type-lg);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

.tier__price {
  align-items: baseline;
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.tier__amount {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--type-4xl);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-black);
  letter-spacing: -0.04em;
  line-height: var(--leading-tight);
}

.tier--featured .tier__amount {
  color: var(--text-max);
}

.tier__unit {
  color: var(--text-muted);
  font-size: var(--type-md);
}

.tier__who {
  border-bottom: var(--rule-hairline) solid var(--border-subtle);
  color: var(--text-emphasis);
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-4);
  padding-bottom: var(--space-5);
}

.tier__scope {
  color: var(--text-muted);
  font-size: var(--type-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  margin-top: var(--space-5);
  text-transform: uppercase;
}

.tier__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.tier__list li {
  color: var(--text-secondary);
  display: flex;
  font-size: var(--type-base);
  gap: var(--space-3);
  line-height: var(--leading-normal);
}

.tier__cta {
  margin-top: var(--space-6);
  width: 100%;
}

.tier--featured .tier__cta {
  margin-top: auto;
}

/* --- not-included card ------------------------------------------------ */
.terms-card {
  background-color: var(--surface-inset);
  border-radius: var(--radius-lg);
  margin-top: var(--space-10);
  padding: var(--space-6) var(--space-5);
}

.terms-card__title {
  font-size: var(--type-md);
  font-weight: var(--weight-bold);
  letter-spacing: -0.015em;
}

.terms-card__text {
  color: var(--text-secondary);
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-3);
}

.terms-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.terms-card__list li {
  color: var(--text-muted);
  display: flex;
  font-size: var(--type-base);
  gap: var(--space-3);
  line-height: var(--leading-normal);
}

.terms-card__list li::before {
  color: var(--text-muted);
  content: "\2014";
  flex: none;
}


/* ==========================================================================
   17. WHAT YOU GET / MEASUREMENT
   ========================================================================== */

.measure__grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}

.measure__list-col,
.measure__art-col {
  min-width: 0;
}

.measure__list {
  border-top: var(--rule-hairline) solid var(--border-subtle);
}

.measure__item {
  border-bottom: var(--rule-hairline) solid var(--border-subtle);
  padding-block: var(--space-4);
}

.measure__item-title {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--type-md);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
}

.measure__item-text {
  color: var(--text-muted);
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-1);
  max-width: 60ch;
}

.measure__note {
  color: var(--text-muted);
  font-size: var(--type-sm);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-4);
}


/* ==========================================================================
   18. CONTACT
   ========================================================================== */

.contact__layout {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: 1fr;
}

.contact__direct {
  background-color: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
}

.contact__direct-title {
  font-size: var(--type-lg);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

.contact__direct-text {
  color: var(--text-secondary);
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-3);
}

.contact__mail {
  margin-top: var(--space-5);
  width: 100%;
}

.contact__address {
  color: var(--text-muted);
  display: block;
  font-size: var(--type-sm);
  margin-top: var(--space-4);
  overflow-wrap: anywhere;
}

.contact__promises {
  border-top: var(--rule-hairline) solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
}

.contact__promises li {
  color: var(--text-muted);
  display: flex;
  font-size: var(--type-base);
  gap: var(--space-3);
  line-height: var(--leading-normal);
}

.contact__promises li::before {
  color: var(--action-primary);
  content: "\2192";
  flex: none;
}


/* --- Field primitive (MASTER section 6) -------------------------------- */

.form {
  background-color: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
}

.form[hidden] {
  display: none;
}

.form__legend {
  font-family: var(--font-display);
  font-size: var(--type-lg);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  padding: 0;
}

.form__intro {
  color: var(--text-muted);
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-3);
}

.form__grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-top: var(--space-6);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field--wide {
  grid-column: 1 / -1;
}

.field__label {
  color: var(--text-primary);
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
}

.field__hint {
  color: var(--text-muted);
  font-size: var(--type-xs);
  font-weight: var(--weight-regular);
}

.field__control {
  background-color: var(--surface-inset);
  border: 1px solid var(--border-interactive);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--type-base);
  line-height: var(--leading-normal);
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
  width: 100%;
}

.field__control::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.field__control:hover {
  border-color: var(--border-interactive-hover);
}

.field__control:focus-visible {
  border-color: var(--action-primary);
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.field__control[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
}

.field__control[readonly] {
  background-color: var(--surface-raised);
}

textarea.field__control {
  line-height: var(--leading-relaxed);
  min-height: var(--space-32);
  resize: vertical;
}

/* The hub group in tokens.json ships no danger role, and MASTER section 8
   says not to invent a primitive for it. Validation messages therefore use
   the accent, which already carries "look here" on this page, and never rely
   on color alone: the message is text, tied to the field by aria-describedby,
   and announced with role="alert". */
.field__error {
  color: var(--action-primary);
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}

.field__error[hidden] {
  display: none;
}

.field__control[aria-invalid="true"] {
  border-color: var(--action-primary);
}

.form__foot {
  align-items: flex-start;
  border-top: var(--rule-hairline) solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
}

.form__note {
  color: var(--text-muted);
  font-size: var(--type-sm);
  line-height: var(--leading-relaxed);
}

.form__submit {
  width: 100%;
}

.form__success {
  align-items: flex-start;
  background-color: var(--surface-inset);
  border: 1px solid var(--action-primary);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
}

.form__success[hidden] {
  display: none;
}

.form__success-icon {
  color: var(--action-primary);
  height: var(--space-8);
  width: var(--space-8);
}

.form__success-title {
  font-size: var(--type-lg);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

.form__success-text {
  color: var(--text-secondary);
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
}


/* ==========================================================================
   19. FOOTER
   ========================================================================== */

.site-footer {
  background-color: var(--surface);
  border-top: var(--rule-hairline) solid var(--border-subtle);
  padding-block: var(--space-12) var(--space-8);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}

.site-footer__blurb {
  color: var(--text-muted);
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-4);
  max-width: 46ch;
}

.site-footer__heading {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-3);
}

.site-footer__list a {
  align-items: center;
  color: var(--text-secondary);
  display: flex;
  font-size: var(--type-sm);
  min-height: 44px;
  text-decoration: none;
}

.site-footer__list a:hover {
  color: var(--action-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-footer__bottom {
  align-items: flex-start;
  border-top: var(--rule-hairline) solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-10);
  padding-top: var(--space-6);
}

.site-footer__legal {
  color: var(--text-muted);
  font-size: var(--type-xs);
  line-height: var(--leading-relaxed);
  max-width: 76ch;
}


/* ==========================================================================
   20. SCROLL REVEAL
   Applied only when JS is running, so the page is fully readable without it.
   ========================================================================== */

.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ==========================================================================
   21. IMAGERY
   All art on this page is hand-authored inline SVG plus layered CSS
   gradients. There are no image files anywhere in this build. The ascending
   trend motif — lime line over an ink grid — is redrawn at the hero, the AEO
   spotlight wash, and the measurement panel. Monochrome-plus-lime only.

   --- PHOTO SWAP POINTS -------------------------------------------------
   Replace the gradient/SVG art on these selectors with real photography:
     .hero__backdrop   -> 1920x1080 backdrop, dark, low detail behind type
     .hero__grid       -> remove entirely once a photo backdrop is in
     .trend            -> keep as SVG; it is data art, not a photo slot
     .answer           -> keep as-is; this is an illustrative mockup, never a
                          real screenshot (services.md honesty rule)
     .brand__mark      -> keep as SVG; it is the logotype, not an image
   Each swap point reserves its own aspect ratio, so dropping a real asset in
   does not move the layout. Set width and height attributes on the
   replacement and add loading="lazy" to anything below the fold.
   ---------------------------------------------------------------------- */


/* ==========================================================================
   22. RESPONSIVE — mobile-first, at the token breakpoints
   scales.breakpoint: sm 480, md 768, lg 1024, xl 1280, 2xl 1536
   ========================================================================== */

/* --- sm: 480px -------------------------------------------------------- */
@media (min-width: 480px) {

  :root {
    --gutter: var(--space-6);
  }

  .hero__title-top,
  .hero__title-accent {
    font-size: var(--type-4xl);
  }

  .hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .hero__actions .btn {
    flex: 1 1 auto;
    min-width: var(--space-40);
  }

  .hero__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .t-h2 {
    font-size: var(--type-3xl);
  }

  .jobs__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .setup__list,
  .tier__cta,
  .form__submit,
  .contact__mail {
    width: auto;
  }

  .tier__cta,
  .form__submit,
  .contact__mail {
    align-self: flex-start;
  }
}

/* --- md: 768px -------------------------------------------------------- */
@media (min-width: 768px) {

  :root {
    --gutter: var(--space-8);
    --header-height: calc(var(--space-16) + var(--space-2));
  }

  .section {
    padding-block: var(--space-20);
  }

  .hero {
    padding-block: var(--space-20);
  }

  .hero__title-top,
  .hero__title-accent {
    font-size: var(--type-5xl);
  }

  .hero__lede {
    font-size: var(--type-lg);
  }

  .t-h2 {
    font-size: var(--type-4xl);
  }

  .t-h3 {
    font-size: var(--type-2xl);
  }

  .t-lead {
    font-size: var(--type-lg);
  }

  .pillar {
    grid-template-columns: var(--space-20) minmax(0, 1fr);
    gap: var(--space-6);
    padding-block: var(--space-8);
  }

  .pillar__num {
    font-size: var(--type-xl);
  }

  .pillar--feature {
    padding: var(--space-8) var(--space-6);
  }

  .pillar__title {
    font-size: var(--type-2xl);
  }

  .spotlight__grid {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .cycle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8) var(--space-10);
  }

  .study {
    align-items: start;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-8);
  }

  .setup {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: stretch;
  }

  .setup__detail {
    padding: var(--space-6) var(--space-6) var(--space-6) 0;
  }

  .pricing__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .terms-card {
    padding: var(--space-8) var(--space-6);
  }

  .measure__grid {
    align-items: start;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .contact__layout {
    align-items: start;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-8);
  }

  .form {
    padding: var(--space-8) var(--space-6);
  }

  .form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form__foot {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
  }

  .form__note {
    max-width: 46ch;
  }

  .site-footer__grid {
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
    gap: var(--space-10);
  }

  .site-footer__bottom {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
  }
}

/* --- lg: 1024px ------------------------------------------------------- */
@media (min-width: 1024px) {

  :root {
    --gutter: var(--space-10);
  }

  .section {
    padding-block: var(--space-24);
  }

  .nav-toggle {
    display: none;
  }

  .site-nav,
  .site-nav.is-open {
    background-color: transparent;
    border: 0;
    display: block;
    padding: 0;
    position: static;
  }

  .site-nav__list {
    align-items: center;
    flex-direction: row;
    gap: var(--space-1);
    max-width: none;
    padding-inline: 0;
    width: auto;
  }

  .site-nav__link {
    border-bottom: 0;
    border-radius: var(--radius-md);
    font-size: var(--type-sm);
    min-height: 44px;
    padding-inline: var(--space-3);
    width: auto;
  }

  .site-nav__link:hover {
    background-color: var(--surface-raised);
  }

  .site-header__cta {
    display: inline-flex;
  }

  .hero {
    padding-block: var(--space-24);
  }

  .hero__grid-2 {
    align-items: center;
    gap: var(--space-16);
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .hero__title-top,
  .hero__title-accent {
    font-size: var(--type-6xl);
  }

  .hero__lede {
    max-width: 46ch;
  }

  .section__head {
    margin-bottom: var(--space-12);
  }

  .jobs__grid {
    gap: var(--space-8);
  }

  .cycle {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .cycle__step {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .cycle__marker {
    align-items: flex-start;
    flex-direction: row;
    width: 100%;
  }

  .cycle__spine {
    height: 1px;
    min-height: 0;
    min-width: var(--space-6);
    width: auto;
    flex: 1;
    align-self: center;
  }

  .pricing__grid {
    gap: var(--space-6);
  }

  .tier--featured {
    margin-block: calc(var(--space-4) * -1);
    padding-block: var(--space-10);
  }

  .tier {
    padding-inline: var(--space-6);
  }

  .contact__layout {
    gap: var(--space-12);
  }

  .site-footer__grid {
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  }
}

/* --- xl: 1280px ------------------------------------------------------- */
@media (min-width: 1280px) {

  :root {
    --gutter: var(--space-12);
  }

  .hero__grid-2 {
    gap: var(--space-20);
  }
}

/* --- 2xl: 1536px ------------------------------------------------------ */
@media (min-width: 1536px) {

  .section {
    padding-block: var(--space-32);
  }

  .hero {
    padding-block: var(--space-32) var(--space-24);
  }
}


/* ==========================================================================
   23. REDUCED MOTION
   Disables every transform and animation, per BRIEF section 4.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-delay: 0ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-delay: 0ms !important;
    transition-duration: 1ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn:active,
  .btn--primary:active,
  .btn--secondary:active,
  .btn--ghost:active {
    transform: none;
  }

  .btn:hover .btn__arrow {
    transform: none;
  }

  /* The nav-toggle's X is a state shape cue, not decoration. The
     transition-duration override above already makes it instantaneous, which
     is what prefers-reduced-motion asks for, so the end state stays. */

  .grain {
    display: none;
  }
}


/* ==========================================================================
   24. PRINT
   Browsers suppress background painting when printing, so the dark surfaces
   this page is built on do not arrive on paper. Reset colors to print dark
   ink on white. --bg is the near-black the page paints behind everything,
   which makes it the correct print foreground.
   ========================================================================== */

@media print {

  .site-header,
  .site-nav,
  .nav-toggle,
  .grain,
  .hero__backdrop,
  .skip-link,
  .trend,
  .form {
    display: none !important;
  }

  html,
  body {
    background: none !important;
  }

  body,
  h1, h2, h3, h4,
  p, li, dt, dd, span, strong, code,
  a, button, .btn, mark {
    color: var(--bg) !important;
  }

  .section--surface,
  .section--spotlight,
  .site-footer,
  .job,
  .pillar--feature,
  .answer,
  .cycle__loop,
  .study__result,
  .study__pending,
  .setup__lead,
  .tier,
  .terms-card,
  .contact__direct,
  .form__success,
  .cycle__num,
  .tier__flag,
  .answer__badge,
  .btn {
    background: none !important;
  }
}

/* Cross-link between the build pricing and the SEO & AEO monthly pricing */
.pricing-crosslink{
  margin-top: var(--space-4);
  max-width: var(--container-prose);
  color: var(--text-secondary);
  font-size: var(--type-base);
}
.pricing-crosslink a{
  color: var(--action-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  font-weight: 500;
}
.pricing-crosslink a:hover{ color: var(--action-primary-hover); }

/* Service switcher — Web Design / SEO & AEO, present on both pages */
.svc-switch{
  display:inline-flex; align-items:center; gap:2px; padding:2px;
  margin:var(--space-2) var(--space-4) var(--space-1);
  background:var(--surface-raised);
  border:1px solid var(--border-subtle);
  border-radius:999px; width:max-content;
}
.svc-switch__item{
  display:inline-flex; align-items:center; min-height:44px; padding:0 14px;
  border-radius:999px; font-size:var(--type-sm); font-weight:500; line-height:1;
  color:var(--text-secondary); text-decoration:none; white-space:nowrap;
  transition:color .16s ease, background-color .16s ease;
}
.svc-switch__item:hover{ color:var(--text-primary); }
.svc-switch__item.is-active{ background:var(--action-primary); color:var(--on-action-primary); font-weight:600; }
@media (min-width:1024px){
  .site-nav{ display:flex; align-items:center; gap:var(--space-4); }
  .svc-switch{ margin:0; }
}

/* ==========================================================================
   INSTANT VISIBILITY CHECK
   ========================================================================== */
.section--check { background: var(--surface); border-block: 1px solid var(--border-subtle); }
.check { max-width: 920px; margin-inline: auto; }
.check__intro { text-align: center; }
.check__intro .t-lead { margin-inline: auto; }

.check__form {
  margin-top: var(--space-8);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.check__label {
  display: block; font-size: var(--type-sm); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-secondary); margin-bottom: var(--space-3);
}
.check__row { display: flex; align-items: stretch; gap: var(--space-3); flex-wrap: wrap; }
.check__scheme {
  display: inline-flex; align-items: center; padding-inline: var(--space-3);
  border: 1px solid var(--border-interactive); border-right: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: var(--surface-inset); color: var(--text-muted);
  font-family: var(--font-body); font-size: var(--type-base); white-space: nowrap;
}
.check__input {
  flex: 1 1 220px; min-width: 0; min-height: 52px;
  border: 1px solid var(--border-interactive);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--surface-inset); color: var(--text-primary);
  font-family: var(--font-body); font-size: var(--type-base); padding-inline: var(--space-4);
}
.check__input::placeholder { color: var(--text-muted); }
.check__input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: var(--action-primary); }
.check__submit { flex: 0 0 auto; min-height: 52px; }
.check__hint { margin-top: var(--space-3); font-size: var(--type-sm); color: var(--text-muted); }

.check__status {
  margin-top: var(--space-5); padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md); background: var(--surface-raised);
  border: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: var(--type-base);
}
.check__status--error { border-color: var(--status-bad); color: var(--status-bad); }
.check__status a { color: var(--action-primary); }
.check__status .spin {
  display: inline-block; width: 16px; height: 16px; margin-right: 8px;
  border: 2px solid var(--border-interactive); border-top-color: var(--action-primary);
  border-radius: 50%; vertical-align: -3px; animation: check-spin .8s linear infinite;
}
@keyframes check-spin { to { transform: rotate(360deg); } }

.check__result { margin-top: var(--space-6); }
.check__result-for { font-size: var(--type-sm); color: var(--text-muted); margin-bottom: var(--space-4); }
.check__result-for strong { color: var(--text-primary); }

.check__scores { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.gauge {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-5) var(--space-3);
}
.gauge__svg { width: 96px; height: 96px; }
.gauge__track { fill: none; stroke: var(--surface-inset); stroke-width: 9; }
.gauge__arc {
  fill: none; stroke-width: 9; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset .9s var(--ease-out);
}
.gauge--good .gauge__arc { stroke: var(--status-good); }
.gauge--warn .gauge__arc { stroke: var(--status-warn); }
.gauge--bad .gauge__arc { stroke: var(--status-bad); }
.gauge__num { fill: var(--text-primary); font-family: var(--font-display); font-weight: 700; font-size: 28px; }
.gauge__label { font-size: var(--type-sm); color: var(--text-secondary); text-align: center; line-height: 1.25; }

.check__vitals { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.vital {
  flex: 1 1 160px; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-raised);
}
.vital__name { font-size: var(--type-sm); color: var(--text-secondary); }
.vital__val { font-family: var(--font-body); font-variant-numeric: tabular-nums; font-weight: 600; font-size: var(--type-base); color: var(--text-primary); }
.vital--good .vital__val { color: var(--status-good); }
.vital--warn .vital__val { color: var(--status-warn); }
.vital--bad .vital__val { color: var(--status-bad); }

.check__aeo {
  display: flex; align-items: center; gap: var(--space-4); justify-content: space-between;
  flex-wrap: wrap; margin-top: var(--space-5); padding: var(--space-5);
  border: 1px dashed var(--border-interactive); border-radius: var(--radius-lg);
}
.check__aeo-label { font-size: var(--type-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-primary); margin-bottom: var(--space-2); }
.check__aeo-text { font-size: var(--type-base); color: var(--text-secondary); max-width: 52ch; }
.check__aeo-flag { flex: 0 0 auto; padding: var(--space-2) var(--space-3); border-radius: 999px; background: var(--surface-inset); color: var(--text-secondary); font-size: var(--type-sm); font-weight: 600; white-space: nowrap; }

.check__cta { margin-top: var(--space-5); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface-inset); border: 1px solid var(--border-subtle); }
.check__cta-text { font-size: var(--type-md); color: var(--text-primary); }
.check__cta-text strong { color: var(--action-primary); }
.check__cta-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }

@media (max-width: 640px) {
  .check__scores { grid-template-columns: repeat(2, 1fr); }
  .check__submit { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .gauge__arc { transition: none; }
  .check__status .spin { animation: none; }
}


/* ==========================================================================
   LOAD CHOREOGRAPHY, AMBIENT MOTION, VIEW TRANSITIONS
   Progressive enhancement only. An inline <head> script adds .is-loading,
   which hides the [data-load] hero pieces; main.js removes the class on its
   first frame and builds the hero in under a second at the hub's 240ms /
   40ms-stagger tempo. If the script never runs, the failsafe animation
   shows everything at 2.5s. Mirrors section 23 of assets/css/portfolio.css,
   so the two pages move as one site.
   ========================================================================== */

@view-transition {
  navigation: auto;
}

/* Shared with the hub, so both stay put while the content crossfades.
   Scoped to the header: the footer carries a second .brand, and a
   transition name must be unique on the page. */
.site-header .brand {
  view-transition-name: site-brand;
}

.svc-switch {
  view-transition-name: service-switch;
}

/* "Stays put" needs the switcher at the same x on both pages. Under
   space-between it floated with each page's link count and CTA width, so
   on desktop it now sits a fixed gap after the brand while the links take
   the free space; from xl up the brand also reserves a width that fits
   either page's role line. */
@media (min-width: 1024px) {
  .site-nav {
    flex: 1 1 auto;
  }

  .site-nav__list {
    margin-inline: auto 0;
  }
}

@media (min-width: 1280px) {
  .site-header .brand {
    min-width: 14rem;
  }
}

::view-transition-group(*) {
  animation-duration: var(--dur-slow);
  animation-timing-function: var(--ease-out);
}

/* The shared pieces keep their snapshot size, so a small width change (the
   active pill's weight, the brand's role line) never scales their text. */
::view-transition-old(site-brand),
::view-transition-new(site-brand),
::view-transition-old(service-switch),
::view-transition-new(service-switch) {
  height: 100%;
  object-fit: none;
  object-position: left;
  width: auto;
}

.is-loading [data-load] {
  opacity: 0;
  animation: load-failsafe 0s 2.5s forwards;
}

/* A view-transition arrival from the hub captures the hero as it stands,
   so nothing is hidden while the transition runs; the script then skips
   the build and the content really crossfades to content. */
.is-loading:active-view-transition [data-load] {
  opacity: 1;
}

@keyframes load-failsafe {
  to { opacity: 1; }
}

/* Sections that scroll-reveal while the hero is still building wait for
   it to land, instead of competing with it. */
.is-load-running .reveal {
  transition-delay: calc(var(--reveal-delay, 0ms) + 720ms);
}

/* The headline is split into words only for the length of its wipe, then
   restored to plain text, unless restoring would change its height. */
.load-word {
  display: inline-block;
}

.hero__rule {
  transform-origin: left center;
}

/* Count-up figures. While counting, data-hold carries the final figure into
   a zero-height ::before, so the box keeps that width in whichever font is
   live; tabular digits keep every step the same width. The "days" unit
   beside 30 never moves, even if a webfont swaps in mid-count. */
.count {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.count[data-hold]::before {
  content: attr(data-hold);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.hero__canvas {
  color: var(--action-primary);
  height: 100%;
  inset: 0;
  -webkit-mask-image: linear-gradient(to bottom, var(--bg) 55%, transparent);
  mask-image: linear-gradient(to bottom, var(--bg) 55%, transparent);
  pointer-events: none;
  position: absolute;
  width: 100%;
}

/* The hero trend plots itself: each vertex dot pops as the line reaches
   it, so the dots scale about their own centres. */
.trend__dot {
  transform-box: fill-box;
  transform-origin: center;
}

/* Slow lime ring off the trend's head dot (the circle sits in the hero SVG,
   invisible at rest). The script adds .is-live once the plot has landed and
   drops it when the hero leaves the screen or the tab is hidden, so without
   the script the ring never runs at all. */
.trend__pulse {
  fill: none;
  opacity: 0;
  pointer-events: none;
  stroke: var(--action-primary);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  vector-effect: non-scaling-stroke;
}

.trend__pulse.is-live {
  animation: trend-pulse 2.8s var(--ease-out) var(--dur-slow) infinite;
}

@keyframes trend-pulse {
  0% { opacity: 0.8; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(3.2); }
}

/* Magnetic CTAs (fine pointers only). main.js writes the cursor's offset
   from centre as --mx / --my, clamped to the unit circle, and adds
   .is-leaning. While tracking, a short ease-out smooths each update; on
   leave the spring easing brings the button home with a slight overshoot.
   The pull tops out at 6px in any direction, diagonals included; the
   individual translate property leaves the :active scale intact. */
.btn.lean-ready {
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform var(--dur-instant) var(--ease-out),
              translate var(--dur-slow) var(--ease-spring);
}

.btn.lean-ready.is-leaning {
  transition-duration: var(--dur-base), var(--dur-base), var(--dur-base), var(--dur-instant), var(--dur-fast);
  transition-timing-function: var(--ease-out);
  translate: calc(var(--mx, 0) * 6px) calc(var(--my, 0) * 6px);
}

@media (prefers-reduced-motion: reduce) {

  @view-transition {
    navigation: none;
  }

  .hero__canvas,
  .trend__pulse,
  .trend__pulse.is-live {
    animation: none;
    display: none;
  }

  .btn.lean-ready.is-leaning {
    translate: none;
  }
}