/* Landing token scope — generated from ds/tokens/*.

  The app defines its own palette on :root globally (amber risk, warm accent).
  Those are the same variable NAMES the design uses, so on the landing's paper
  sections the app's values win and the lime/hot-orange turn to grey/amber.

  Re-declaring the design's :root tokens on .tw-root fixes it: a custom property
  set on the landing root is what its whole subtree inherits, so it beats the
  html-level :root regardless of load order. The class scopes (.tw-ink,
  .tw-section-ink, .tw-section-accent) already win by proximity and are left to
  ds/styles.css. */

/* from colors.css */
.tw-root {
  --background: 60 10% 94%; /* @kind color */
  --foreground: 80 10% 6%; /* @kind color */
  --card: 0 0% 100%; /* @kind color */
  --card-foreground: 80 10% 6%; /* @kind color */
  --popover: 0 0% 100%; /* @kind color */
  --popover-foreground: 80 10% 6%; /* @kind color */
  --primary: 80 10% 6%; /* @kind color */
  --primary-foreground: 60 10% 96%; /* @kind color */
  --accent: 75 86% 62%; /* @kind color */
  --accent-foreground: 80 20% 8%; /* @kind color */
  --secondary: 60 8% 91%; /* @kind color */
  --secondary-foreground: 80 10% 6%; /* @kind color */
  --muted: 60 9% 92%; /* @kind color */
  --muted-foreground: 80 6% 41%; /* @kind color */
  --destructive: 358 75% 59%; /* @kind color */
  --destructive-foreground: 0 0% 100%; /* @kind color */
  --risk: 16 100% 56%; /* @kind color */
  --risk-foreground: 0 0% 100%; /* @kind color */
  --success: 152 77% 39%; /* @kind color */
  --success-foreground: 0 0% 100%; /* @kind color */
  --border: 60 8% 88%; /* @kind color */
  --input: 60 8% 85%; /* @kind color */
  --ring: 75 86% 45%; /* @kind color */
  --ink: 75 8% 7%; /* @kind color */
  --ink-foreground: 60 10% 95%; /* @kind color */
  --ink-surface: 75 7% 11%; /* @kind color */
  --ink-border: 75 6% 18%; /* @kind color */
  --ink-muted: 75 5% 62%; /* @kind color */

  --color-bg: hsl(var(--background));
  --color-fg: hsl(var(--foreground));
  --color-card: hsl(var(--card));
  --color-card-fg: hsl(var(--card-foreground));
  --color-popover: hsl(var(--popover));
  --color-primary: hsl(var(--primary));
  --color-primary-fg: hsl(var(--primary-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-fg: hsl(var(--accent-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-fg: hsl(var(--secondary-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-fg: hsl(var(--muted-foreground));
  --color-risk: hsl(var(--risk));
  --color-risk-fg: hsl(var(--risk-foreground));
  --color-success: hsl(var(--success));
  --color-success-fg: hsl(var(--success-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-fg: hsl(var(--destructive-foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-ink: hsl(var(--ink));
  --color-ink-fg: hsl(var(--ink-foreground));
  --color-ink-surface: hsl(var(--ink-surface));
  --color-ink-border: hsl(var(--ink-border));
  --color-ink-muted: hsl(var(--ink-muted));
}

/* from typography.css */
.tw-root {
  --font-sans: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-accent: "Instrument Serif", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Display sizes are fluid clamps. Leading goes below 1 at the top of the
     scale and tracking goes sharply negative — that density is the look. */
  --text-display-xl: clamp(2.75rem, 1.9rem + 4.2vw, 6rem); /* @kind spacing */
  --leading-display-xl: 0.94; /* @kind other */
  --tracking-display-xl: -0.045em; /* @kind other */
  --text-display-lg: clamp(2.25rem, 1.7rem + 2.8vw, 4rem); /* @kind spacing */
  --leading-display-lg: 0.98; /* @kind other */
  --tracking-display-lg: -0.038em; /* @kind other */
  --text-display-md: clamp(1.875rem, 1.5rem + 1.8vw, 2.875rem); /* @kind spacing */
  --leading-display-md: 1.04; /* @kind other */
  --tracking-display-md: -0.03em; /* @kind other */
  --text-display-sm: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem); /* @kind spacing */
  --leading-display-sm: 1.12; /* @kind other */
  --tracking-display-sm: -0.022em; /* @kind other */

  /* Text scale */
  --text-xs: 0.75rem; /* @kind spacing */    --leading-xs: 1rem; /* @kind other */
  --text-sm: 0.875rem; /* @kind spacing */   --leading-sm: 1.35rem; /* @kind other */
  --text-base: 1rem; /* @kind spacing */     --leading-base: 1.55rem; /* @kind other */
  --text-lg: 1.125rem; /* @kind spacing */   --leading-lg: 1.7rem; /* @kind other */
  --text-xl: 1.375rem; /* @kind spacing */   --leading-xl: 1.75rem; /* @kind other */
  --text-2xl: 1.625rem; /* @kind spacing */  --leading-2xl: 2rem; /* @kind other */
  --text-3xl: 2rem; /* @kind spacing */      --leading-3xl: 2.25rem; /* @kind other */
  --text-4xl: 2.5rem; /* @kind spacing */    --leading-4xl: 2.6rem; /* @kind other */
  --text-5xl: 3.25rem; /* @kind spacing */   --leading-5xl: 1; /* @kind other */

  --weight-regular: 400; /* @kind other */
  --weight-medium: 500; /* @kind other */
  --weight-semibold: 600; /* @kind other */
  --weight-bold: 700; /* @kind other */
  --weight-black: 800; /* @kind other */

  /* Small caps label inside a pill — this system's section marker. */
  --tracking-label: 0.06em; /* @kind other */
  --tracking-wide: 0.08em; /* @kind other */
}

/* from spacing.css */
.tw-root {
  --space-0-5: 0.125rem; /*  2px */
  --space-1: 0.25rem;    /*  4px */
  --space-1-5: 0.375rem; /*  6px */
  --space-2: 0.5rem;     /*  8px */
  --space-2-5: 0.625rem; /* 10px */
  --space-3: 0.75rem;    /* 12px */
  --space-3-5: 0.875rem; /* 14px */
  --space-4: 1rem;       /* 16px */
  --space-5: 1.25rem;    /* 20px */
  --space-6: 1.5rem;     /* 24px */
  --space-7: 1.75rem;    /* 28px — card padding */
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;      /* section padding, mobile  */
  --space-32: 8rem;      /* section padding, desktop */

  /* Radius — one root value; cards and blocks are much rounder than controls. */
  --radius: 1.25rem;                       /* 20px */
  --radius-sm: 0.5rem;                     /*  8px — nested chips */
  --radius-md: 0.875rem;                   /* 14px — inputs, small tiles */
  --radius-lg: var(--radius);              /* 20px — panels */
  --radius-xl: 1.5rem;                     /* 24px — cards */
  --radius-2xl: 2rem;                      /* 32px — bento tiles, hero blocks */
  --radius-full: 9999px;                   /* every button, every label */

  /* Layout */
  --container-max: 1280px; /* @kind spacing */
  --container-pad: 1.5rem; /* @kind spacing */
  --header-height: 5rem; /* @kind spacing */
  --header-height-condensed: 4rem; /* @kind spacing */
  --touch-target: 2.75rem; /* @kind spacing */
  --scroll-padding-top: 6rem; /* @kind spacing */
}

/* from motion.css */
.tw-root {
  --dur-1: 120ms; /* @kind other */ /* state flips: hover, focus ring */
  --dur-2: 200ms; /* @kind other */ /* the default — colour, small movement */
  --dur-3: 340ms; /* @kind other */ /* something entering or leaving */
  --dur-4: 560ms; /* @kind other */ /* a full panel or orchestrated beat */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1); /* @kind other */

  /* Scroll entrance: one vocabulary everywhere. */
  --reveal-distance: 20px; /* @kind other */
  --reveal-duration: 620ms; /* @kind other */
  --reveal-stagger: 80ms; /* @kind other */

  --press-scale: 0.97; /* @kind other */
}

/* from elevation.css */
.tw-root {
  --shadow-sm: 0 1px 2px hsl(80 10% 6% / 0.04), 0 2px 8px -2px hsl(80 10% 6% / 0.05);
  --shadow-md: 0 2px 6px -2px hsl(80 10% 6% / 0.05), 0 10px 28px -6px hsl(80 10% 6% / 0.09);
  --shadow-lg: 0 4px 12px -4px hsl(80 10% 6% / 0.06), 0 28px 60px -12px hsl(80 10% 6% / 0.16);
  /* The lime CTA gets a coloured halo instead of a grey shadow. */
  --shadow-accent: 0 6px 24px -6px hsl(75 86% 40% / 0.45);

  --border-width: 1px; /* @kind spacing */
  --ring-width: 2px; /* @kind spacing */
  --ring-offset: 2px; /* @kind spacing */
}

/* Short highlight marks never break mid-word. */
.tw-root .tw-mark { white-space: nowrap; }

/* ── Anchor landing offset ────────────────────────────────────────────────
   Clicking a nav link (#how, #evidence, #pricing…) is a native fragment jump,
   so the browser parks the target's top `scroll-padding-top` below the viewport
   top. The app's global rule sets that to 5rem and the design token wants 6rem,
   but the fixed header *condenses* to --header-height-condensed (4rem) the
   instant the page is scrolled — which is always true at any section. So the
   old 5–6rem left a 16–32px strip of the previous section showing above the
   header. Match the condensed header exactly (4rem) so a section lands flush
   under it with no gap. Targeted at `:root` (specificity 0,1,0) so it beats the
   app's `html { scroll-padding-top: 5rem }` (0,0,1) regardless of load order —
   Tailwind's `@layer base` is a build-time directive and compiles to a plain
   unlayered rule, so an equal-specificity `html` override can't be relied on. */
:root { scroll-padding-top: 4rem; }

/* ── Content overrides (not from the design export) ───────────────────────
   Centre the section header + sub on the "Radar, not a retainer" and
   "Priced like a tool" sections. Scoped by section id so the other headers
   (e.g. the proof block) keep their left-aligned layout. */

/* Radar, not a retainer. */
#why .tw-section-head {
  align-items: center;
  text-align: center;
  max-width: 52rem;
  margin-inline: auto;
}
#why .tw-section-sub {
  max-width: 54ch;
  margin-inline: auto;
}

/* Priced like a tool, not a retainer. — stack the copy centered, billing below. */
#pricing .tw-pricing-head {
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
}
/* No column cap on the copy: the heading needs the full container width to sit on
   one line. The sub keeps its own readable measure and stays centred. */
#pricing .tw-pricing-head-copy {
  align-items: center;
  max-width: none;
}
#pricing .tw-pricing-sub {
  max-width: 62ch;
  margin-inline: auto;
}
#pricing .tw-billing {
  justify-content: center;
}

/* Heading line-breaks:
   - Default (mobile / tablet): two lines — "Priced like a tool" / "not a retainer."
     with the comma hidden and a forced break after "tool".
   - Desktop (>=1200px, where the full line fits the container): one line, comma
     shown, no forced break, nowrap so it never breaks awkwardly. */
.ph-comma { display: none; }        /* mobile / tablet: no comma */
@media (min-width: 1200px) {
  .ph-comma { display: inline; }    /* desktop: comma shown */
  .ph-break { display: none; }      /* desktop: drop the forced break — one line */
  #pricing .tw-pricing-head h2 { white-space: nowrap; }
}

/* ── Footer CTA — the message is the hero, the ballpit is the backdrop ─────
   The ballpit custom element sets its own inline `position: relative`, which
   beat the stylesheet's `absolute` and left it an in-flow grid item — so grid
   auto-placement stacked the pit and the copy into two rows instead of layering
   them, and the export's display-md copy read as a footnote under a big field
   of spheres. Force the pit back to a full-bleed absolute backdrop (only
   `!important` beats the inline style); that makes the copy the sole in-flow
   item, so `place-items: center` floats it over the pit. Then scale the title
   and buttons up so the CTA plainly dominates, and set a soft radial scrim
   behind the words so dark type stays legible over the black-and-lime pile. */
.tw-footer-cta {
  min-height: clamp(28rem, 46vw, 40rem);
}
.tw-footer-ballpit {
  position: absolute !important;
  inset: 0;
  z-index: 0;
}
.tw-footer-cta-inner {
  gap: 1.25rem;
  /* Legibility bed: a soft paper glow that fades out before the section edges,
     so the type reads over the pit without a visible box. */
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--radius-2xl);
  background: radial-gradient(
    120% 120% at 50% 50%,
    hsl(var(--background) / 0.92) 0%,
    hsl(var(--background) / 0.82) 46%,
    hsl(var(--background) / 0) 78%
  );
}
.tw-footer-cta-title {
  font-size: clamp(2.5rem, 1.8rem + 3.4vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  max-width: 16ch;
}
.tw-footer-cta-copy {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem);
  color: var(--color-fg);
  padding-top: 1rem;
}
.tw-footer-cta-btns { gap: 1rem; padding-top: 1.5rem; }
.tw-footer-cta-btns .tw-btn {
  height: 3.5rem;
  padding-inline: 2.25rem;
  font-size: 1.0625rem;
}
/* The outline button is transparent by default; over the pit the spheres show
   through it and it reads as a hole. Sit it on solid paper so it's a real pill. */
.tw-footer-cta-btns .tw-btn-outline { background: hsl(var(--background)); }
.tw-footer-cta-btns .tw-btn-arrow > .tw-arrow { width: 2.5rem; height: 2.5rem; }

/* ══ Mobile / tablet responsiveness ═══════════════════════════════════════════
   All gated behind max-width so desktop and laptops (>=1024px) are untouched. */

/* Mobile-only line breaks in the section headings (evidence, why). Hidden from
   ~tablet up so desktop wraps as before. */
.tw-m-break { display: inline; }
@media (min-width: 640px) { .tw-m-break { display: none; } }

/* Section display headings, sized per-heading as large as each one's own line
   structure allows (measured at 360–639px). Most headings share one big size;
   only the report heading — whose first line "The artifact you forward" is the
   longest unbroken run — is capped lower so it doesn't wrap further. The word-safe
   split keeps whole words together, so nothing breaks mid-word. */
@media (max-width: 639px) {
  .tw-display-lg { font-size: clamp(1.7rem, 9.4vw, 3.5rem); line-height: 1.05; max-width: 100%; }
  #report .tw-display-lg { font-size: clamp(1.5rem, 7.6vw, 3rem); }
}

/* FAQ sub-line: the two clauses split onto their own lines (the markup <br>).
   Fit "The questions counsel asks first," on one line at every phone width. */
@media (max-width: 639px) {
  .tw-faq-sub { max-width: none; font-size: clamp(0.9rem, 3.9vw, 1.0625rem); }
}

/* Hero: below iPad-landscape, one column with the robot in its own space beneath
   the copy. The WebGL aurora is built for a wide frame — on a tall portrait phone
   it stretches into vertical streaks (the "stretched" look). Swap it for a clean
   CSS lime glow on the right that can't distort. */
@media (max-width: 1023px) {
  .tw-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .tw-hero-figure { height: clamp(16rem, 60vw, 26rem); margin-top: clamp(0.5rem, 2vw, 1.5rem); }
  .tw-hero-robot { top: 0; left: 0; width: 100%; height: 100%; }
  .tw-hero-aurora hero-aurora { display: none !important; }
  .tw-hero-aurora {
    opacity: 1;
    background:
      radial-gradient(58% 38% at 84% 22%, hsl(78 60% 42% / 0.40), transparent 62%),
      radial-gradient(90% 62% at 80% 34%, hsl(96 45% 12% / 0.55), transparent 80%);
  }
}
/* Desktop keeps the WebGL aurora, mirrored so the glow sits on the right. */
@media (min-width: 1024px) {
  .tw-hero-aurora { transform: scaleX(-1); }
}

/* Pinned beats keep their rotate-in animation on phones (readStep eases the angle
   down on narrow screens); give the panels a little extra height so the incoming
   panel fills the frame instead of leaving a white wedge. */
@media (max-width: 639px) {
  .tw-beat-panel { min-height: 108svh; }
}

/* Footer: three link columns side by side on phones (were stacked → very tall);
   brand blurb spans the full width above and is no longer capped narrow. */
@media (max-width: 639px) {
  .tw-footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 1rem; }
  .tw-footer-cols > :first-child { grid-column: 1 / -1; }
  .tw-footer-nav a { font-size: 0.8125rem; }
  .tw-footer-blurb { max-width: none; font-size: clamp(0.68rem, 2.95vw, 0.8125rem); line-height: 1.55; }
}

/* Force one line on phones: the case-study tag and the reveal-gate title. */
@media (max-width: 639px) {
  .tw-proof-tag { white-space: nowrap; letter-spacing: 0.02em; font-size: clamp(0.5rem, 2.6vw, 0.6875rem); }
  .tw-gate-title { white-space: nowrap; font-size: clamp(0.9rem, 4vw, 1.15rem); }
}

/* Tap feedback for buttons. Inline transforms from the desktop magnet effect beat
   this (no !important), so it only applies where there's no magnet — i.e. touch. */
.tw-btn:active { transform: scale(0.97); }