/* ==========================================================================
   Correl marketing site

   Derived from the product, not invented. Every colour below already exists in
   apps/web/src/styles/tokens.css, and NOTHING in this file may originate a
   colour outside the :root block — that rule is what stops the palette drifting
   back to the 122 ad-hoc values this stylesheet used to carry.

   Radial and conic gradients are banned (ADR 0113 keeps that ban: a radial wash
   is the clearest tell of marketing chrome). scripts/site-static.test.ts
   enforces all of it.
   ========================================================================== */

@font-face {
  font-family: "Inter var";
  src: url("fonts/InterVariable-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* ---- colour: 20 tokens, every value from apps/web/src/styles/tokens.css ---- */
  --site-surface: #ffffff;
  --site-surface-muted: #f8fbff;
  --site-surface-raised: #fbfdff;
  --site-border: #c8d5e8;
  --site-border-muted: #dde6f2;
  --site-rule: #e7edf4;
  --site-text: #10213d;
  --site-text-strong: #061a46;
  --site-text-muted: #53657f;
  --site-text-faint: #647389;
  --site-accent: #235fd6;
  --site-accent-hover: #174fb5;
  --site-accent-wash: #eef4ff;

  /* ---- type: six sizes on a 1.25 ratio anchored so one rung down is the
          product's own 13px body size. Only the h1 is fluid, and it is declared
          exactly once — no font-size may appear inside a media query. ---- */
  --site-text-caption: 11px;
  --site-text-ui: 13px;
  --site-text-body: 16px;
  --site-text-lede: 20px;
  --site-text-h2: 25px;
  --site-text-h1: clamp(30px, 4.6vw, 48px);

  --site-weight-regular: 450;
  --site-weight-medium: 560;
  --site-weight-strong: 650;

  --site-leading-flush: 1;
  --site-leading-tight: 1.2;
  --site-leading-snug: 1.3;
  --site-leading-prose: 1.5;
  --site-tracking-eyebrow: 0.06em;

  --site-font: "Inter var", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* ---- geometry: the product's four radii. It has zero above 12px. ---- */
  --site-radius-control: 6px;
  --site-radius-panel: 8px;
  --site-radius-pill: 999px;

  --site-space-2xs: 4px;
  --site-space-xs: 6px;
  --site-space-sm: 8px;
  --site-space-md: 12px;
  --site-space-lg: 16px;
  --site-space-xl: 20px;
  --site-space-2xl: 24px;
  --site-space-3xl: 32px;
  /* page rhythm only: named apart so a grep proves it never leaks into components */
  --site-section-gap: 48px;
  --site-section-pad: 64px;
  --site-section-pad-lg: 96px;

  /* ---- elevation: the product's ladder verbatim. No hand-rolled shadow may
          carry a length above 48px. ---- */
  --site-shadow-raised: 0 8px 18px rgba(15, 23, 42, 0.1);
  --site-shadow-lifted: 0 12px 28px rgba(15, 23, 42, 0.12);

  /* one structural token: the header height and the anchor offset can never
     disagree, because they are the same value */
  --site-header-h: 56px;
  --site-shell: 1200px;
  /* The CSS width every captured surface is shown at. The assets are captured at
     deviceScaleFactor 2, so their intrinsic width is double this: an image rule that resolves
     to `width: auto` renders the surface at 2x and the hero shipped that way once, showing 14%
     of itself on a phone. Never size a capture by its intrinsic width. */
  --site-shot-width: 1256px;
  --site-motion: 160ms;
  --site-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------------- reset ---------------- */

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

/* A class rule with a display value outbeats the UA sheet's [hidden] rule, which
   is how a mobile drawer once rendered open at every width. Never again. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--site-header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--site-surface);
  color: var(--site-text);
  font-family: var(--site-font);
  font-size: var(--site-text-body);
  font-weight: var(--site-weight-regular);
  line-height: var(--site-leading-prose);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
figure,
dl,
dd,
ul,
ol {
  margin: 0;
}

h1,
h2,
h3 {
  font-weight: var(--site-weight-regular);
  line-height: var(--site-leading-tight);
  letter-spacing: 0;
  color: var(--site-text-strong);
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

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

strong {
  font-weight: var(--site-weight-strong);
  color: var(--site-text-strong);
}

:focus-visible {
  outline: 2px solid var(--site-accent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  top: calc(var(--site-space-sm) * -8);
  left: var(--site-space-md);
  z-index: 20;
  padding: var(--site-space-sm) var(--site-space-md);
  border-radius: var(--site-radius-control);
  background: var(--site-accent);
  color: var(--site-surface);
  font-size: var(--site-text-ui);
  transition: top var(--site-motion) var(--site-ease);
}

.skip-link:focus {
  top: var(--site-space-md);
}

.shell {
  width: 100%;
  max-width: var(--site-shell);
  margin: 0 auto;
  padding: 0 var(--site-space-2xl);
}

/* The tape is 1256px at its natural size. Given 24px of gutter either side this
   shell is exactly wide enough to show all five cells uncut on a large display,
   which means no cell is ever sliced when there is room for it. */
/* Exactly enough content width for a captured surface to sit at 1:1. */
.shell--wide {
  max-width: calc(var(--site-shot-width) + var(--site-space-2xl) * 2);
}

/* ---------------- shared type devices ---------------- */

.eyebrow {
  font-size: var(--site-text-caption);
  font-weight: var(--site-weight-strong);
  line-height: var(--site-leading-snug);
  letter-spacing: var(--site-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--site-text-faint);
}

.lede {
  max-width: 62ch;
  font-size: var(--site-text-lede);
  line-height: var(--site-leading-snug);
  color: var(--site-text-muted);
}

.section {
  padding: var(--site-section-pad) 0;
  border-top: 1px solid var(--site-rule);
}

.section--sunken {
  background: var(--site-surface-muted);
}

.section__head {
  max-width: 68ch;
  margin-bottom: var(--site-section-gap);
}

.section__title {
  margin-top: var(--site-space-md);
  font-size: var(--site-text-h2);
}

.section__lede {
  margin-top: var(--site-space-md);
  font-size: var(--site-text-body);
  line-height: var(--site-leading-prose);
  color: var(--site-text-muted);
}

/* ---------------- buttons ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--site-space-xs);
  height: 36px;
  padding: 0 var(--site-space-lg);
  border: 1px solid transparent;
  border-radius: var(--site-radius-control);
  background: none;
  font-size: var(--site-text-ui);
  font-weight: var(--site-weight-medium);
  line-height: var(--site-leading-flush);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--site-motion) var(--site-ease), border-color var(--site-motion) var(--site-ease);
}

.btn--primary {
  background: var(--site-accent);
  color: var(--site-surface);
}

.btn--primary:hover {
  background: var(--site-accent-hover);
}

.btn--secondary {
  border-color: var(--site-border);
  background: var(--site-surface);
  color: var(--site-text-strong);
}

.btn--secondary:hover {
  border-color: var(--site-accent);
  color: var(--site-accent);
}

.btn--lg {
  height: 42px;
  padding: 0 var(--site-space-xl);
  font-size: var(--site-text-body);
}

/* ---------------- header ---------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--site-surface);
  border-bottom: 1px solid var(--site-border-muted);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--site-space-2xl);
  height: var(--site-header-h);
}

/* the brand takes the free space, so links and actions sit right in both the
   full and the collapsed header without an auto-margin fight */
.brand {
  display: flex;
  align-items: center;
  gap: var(--site-space-sm);
  margin-right: auto;
}

.brand__mark {
  width: 26px;
  height: 26px;
}

.brand__name {
  font-size: var(--site-text-body);
  font-weight: var(--site-weight-medium);
  color: var(--site-text-strong);
}

.brand__by {
  font-size: var(--site-text-caption);
  font-weight: var(--site-weight-strong);
  letter-spacing: var(--site-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--site-text-faint);
}

.nav__links {
  display: flex;
  gap: var(--site-space-xl);
  font-size: var(--site-text-ui);
  color: var(--site-text-muted);
}

/* padding, not line-height: standalone navigation links need a 24px target
   (WCAG 2.5.8), and 13px text alone is only ~17px tall */
.nav__links a {
  padding: var(--site-space-xs) 0;
  transition: color var(--site-motion) var(--site-ease);
}

.nav__links a:hover {
  color: var(--site-accent);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--site-space-md);
}

.nav__signin {
  padding: var(--site-space-sm) var(--site-space-xs);
  font-size: var(--site-text-ui);
  font-weight: var(--site-weight-medium);
  color: var(--site-text-muted);
  transition: color var(--site-motion) var(--site-ease);
}

.nav__signin:hover {
  color: var(--site-accent);
}

/* When the links collapse, actions must not also claim the auto margin. */
.nav__links + .nav__actions {
  margin-left: 0;
}

/* ---------------- hero ---------------- */

.hero {
  padding: var(--site-section-pad-lg) 0 0;
}

.hero__copy {
  max-width: 74ch;
}

.hero__title {
  margin-top: var(--site-space-lg);
  font-size: var(--site-text-h1);
  font-weight: var(--site-weight-medium);
}

.hero__lede {
  margin-top: var(--site-space-xl);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--site-space-md);
  margin-top: var(--site-space-3xl);
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--site-space-3xl);
  border-top: 1px solid var(--site-rule);
}

/* the product's metric tape: cells divided by vertical hairlines, radius 0 */
.hero__proof li {
  flex: 1 1 200px;
  padding: var(--site-space-lg) var(--site-space-lg) var(--site-space-lg) 0;
  font-size: var(--site-text-ui);
  line-height: var(--site-leading-snug);
  color: var(--site-text-muted);
}

.hero__proof li + li {
  padding-left: var(--site-space-lg);
  border-left: 1px solid var(--site-rule);
}

.hero__proof b {
  display: block;
  margin-bottom: var(--site-space-2xs);
  font-size: var(--site-text-caption);
  font-weight: var(--site-weight-strong);
  letter-spacing: var(--site-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--site-text-strong);
}

/* ---------------- screenshot frames ---------------- */

.shot {
  margin: 0;
}

.shot__frame {
  overflow: hidden;
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius-panel);
  background: var(--site-surface);
  box-shadow: var(--site-shadow-lifted);
}

.shot__frame img {
  width: 100%;
  height: auto;
}

.shot__caption {
  margin-top: var(--site-space-md);
  font-size: var(--site-text-caption);
  line-height: var(--site-leading-snug);
  color: var(--site-text-muted);
}

.hero__shot {
  margin-top: var(--site-section-gap);
}

/* ---------------- workspaces ---------------- */

/* Stacked, not side by side. These surfaces are 1256 px wide with 12px text; in a
   half-width column they land at 0.46 scale and the type becomes a grey smear —
   the same failure as tilting a dense screenshot. Full width is 0.92 scale, which
   the type survives. */
.wk {
  padding: var(--site-section-gap) 0;
  border-top: 1px solid var(--site-rule);
}

.wk:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.wk__copy {
  display: grid;
  gap: var(--site-space-3xl);
  align-items: start;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.wk__shot {
  margin-top: var(--site-space-2xl);
}

.wk__index {
  font-size: var(--site-text-caption);
  font-weight: var(--site-weight-strong);
  letter-spacing: var(--site-tracking-eyebrow);
  color: var(--site-accent);
}

.wk__name {
  margin-top: var(--site-space-sm);
  font-size: var(--site-text-lede);
}

.wk__body {
  margin-top: var(--site-space-md);
  font-size: var(--site-text-body);
  color: var(--site-text-muted);
}

.wk__facts {
  border-top: 1px solid var(--site-rule);
}

.wk__facts div {
  display: flex;
  justify-content: space-between;
  gap: var(--site-space-md);
  padding: var(--site-space-sm) 0;
  border-bottom: 1px solid var(--site-rule);
  font-size: var(--site-text-ui);
  color: var(--site-text-muted);
}

.wk__facts dt {
  color: var(--site-text-faint);
}

.wk__facts dd {
  color: var(--site-text-strong);
  text-align: right;
}

/* ---------------- refusals ---------------- */

.refuse {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border-top: 1px solid var(--site-border-muted);
}

.refuse > div {
  padding: var(--site-space-3xl) var(--site-space-2xl) var(--site-space-3xl) 0;
  border-bottom: 1px solid var(--site-border-muted);
}

.refuse > div + div {
  padding-left: var(--site-space-2xl);
  border-left: 1px solid var(--site-border-muted);
}

.refuse h3 {
  margin-top: var(--site-space-md);
  font-size: var(--site-text-lede);
}

.refuse p {
  margin-top: var(--site-space-md);
  font-size: var(--site-text-ui);
  line-height: var(--site-leading-prose);
  color: var(--site-text-muted);
}

/* ---------------- migration ---------------- */

/* stacked for the same reason as .wk — a 1256px surface in a half-width column
   is illegible */
.mig__head {
  display: grid;
  gap: var(--site-space-3xl);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: start;
}

.mig__shot {
  margin-top: var(--site-space-2xl);
}

.mig__steps {
  counter-reset: mig;
}

.mig__steps li {
  position: relative;
  padding: var(--site-space-md) 0 var(--site-space-md) var(--site-space-3xl);
  border-bottom: 1px solid var(--site-rule);
  font-size: var(--site-text-ui);
  line-height: var(--site-leading-snug);
  color: var(--site-text-muted);
  counter-increment: mig;
}

.mig__steps li::before {
  content: counter(mig, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-size: var(--site-text-caption);
  font-weight: var(--site-weight-strong);
  letter-spacing: var(--site-tracking-eyebrow);
  color: var(--site-accent);
}

/* ---------------- closing call to action ---------------- */

.cta {
  padding: var(--site-section-pad-lg) 0;
  border-top: 1px solid var(--site-rule);
  background: var(--site-surface-muted);
}

.cta__title {
  font-size: var(--site-text-h2);
}

.cta__lede {
  margin-top: var(--site-space-md);
  max-width: 60ch;
  color: var(--site-text-muted);
}

.cta__scenarios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--site-space-sm);
  margin-top: var(--site-space-2xl);
}

.cta__scenarios li {
  padding: var(--site-space-xs) var(--site-space-md);
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius-pill);
  background: var(--site-surface);
  font-size: var(--site-text-ui);
  color: var(--site-text-muted);
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--site-space-md);
  margin-top: var(--site-space-3xl);
}

.cta__fine {
  margin-top: var(--site-space-xl);
  font-size: var(--site-text-ui);
  color: var(--site-text-muted);
}

.cta__fine a {
  color: var(--site-accent);
}

.cta__fine a:hover {
  color: var(--site-accent-hover);
}

/* ---------------- footer ---------------- */

.footer {
  padding: var(--site-section-pad) 0 var(--site-space-3xl);
  border-top: 1px solid var(--site-border-muted);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--site-section-gap);
  justify-content: space-between;
}

.footer__line {
  margin-top: var(--site-space-md);
  max-width: 34ch;
  font-size: var(--site-text-ui);
  color: var(--site-text-muted);
}

.footer__nav {
  display: flex;
  gap: var(--site-section-gap);
}

.footer__label {
  margin-bottom: var(--site-space-md);
  font-size: var(--site-text-caption);
  font-weight: var(--site-weight-strong);
  letter-spacing: var(--site-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--site-text-faint);
}

.footer__nav a {
  display: block;
  padding: var(--site-space-2xs) 0;
  margin-bottom: var(--site-space-2xs);
  font-size: var(--site-text-ui);
  color: var(--site-text-muted);
  transition: color var(--site-motion) var(--site-ease);
}

.footer__nav a:hover {
  color: var(--site-accent);
}

.footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--site-space-md);
  margin-top: var(--site-section-pad);
  padding-top: var(--site-space-xl);
  border-top: 1px solid var(--site-rule);
  font-size: var(--site-text-ui);
  color: var(--site-text-faint);
}

/* ==========================================================================
   stage — the interactive centrepiece (apps/site/stage.js)
   ========================================================================== */

.stage {
  position: relative;
}

.stage__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius-panel);
  background: var(--site-surface);
  box-shadow: var(--site-shadow-raised);
}

.stage__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* The tape is shown at its natural size and clipped by the frame, so the
   product's own type stays its own size. stage.js slides it horizontally to
   bring the selected cell into the window rather than scaling it down. */
.stage__tapewrap {
  overflow: hidden;
  border-bottom: 1px solid var(--site-rule);
}

/* Pinned, not `width: auto`. At auto this happened to come out right only because the height
   attribute pinned the height and the width followed the aspect ratio — one rule setting
   `height: auto` on it would have doubled it, which is exactly how the hero broke. */
.stage__tape {
  display: block;
  width: var(--site-shot-width);
  max-width: none;
  will-change: transform;
  transition: transform calc(var(--site-motion) * 2) var(--site-ease);
}

/* the band the receding gate plane and the callout leaders are drawn through */
.stage__plate {
  padding: 156px var(--site-space-2xl) var(--site-space-2xl);
}

.stage__notes {
  display: grid;
  gap: var(--site-space-lg);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.stage__note {
  padding: var(--site-space-md) var(--site-space-lg);
  border: 1px solid var(--site-border-muted);
  border-left: 3px solid var(--site-accent);
  border-radius: var(--site-radius-control);
  background: var(--site-surface-raised);
}

.stage__note-value {
  margin-top: var(--site-space-2xs);
  font-size: var(--site-text-body);
  font-weight: var(--site-weight-medium);
  color: var(--site-text-strong);
}

.stage__note-body {
  margin-top: var(--site-space-xs);
  font-size: var(--site-text-ui);
  line-height: var(--site-leading-snug);
  color: var(--site-text-muted);
}

.stage__picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--site-space-sm);
  margin-top: var(--site-space-xl);
}

.stage__picker button {
  padding: var(--site-space-xs) var(--site-space-md);
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius-control);
  background: var(--site-surface);
  font-size: var(--site-text-ui);
  color: var(--site-text-muted);
  cursor: pointer;
  transition: border-color var(--site-motion) var(--site-ease), color var(--site-motion) var(--site-ease);
}

.stage__picker button[aria-selected="true"] {
  border-color: var(--site-accent);
  background: var(--site-accent-wash);
  color: var(--site-accent);
  font-weight: var(--site-weight-medium);
}

.stage__readout {
  margin-top: var(--site-space-xl);
  padding-top: var(--site-space-lg);
  border-top: 1px solid var(--site-rule);
  font-size: var(--site-text-ui);
  line-height: var(--site-leading-snug);
  color: var(--site-text-muted);
}

/* ---------------- responsive ---------------- */

@media (max-width: 1040px) {
  .wk__copy,
  .mig__head {
    grid-template-columns: minmax(0, 1fr);
  }

  .refuse > div + div {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 760px) {
  :root {
    --site-section-pad: 48px;
    --site-section-pad-lg: 56px;
    --site-section-gap: 32px;
  }

  .shell {
    padding: 0 var(--site-space-lg);
  }

  .nav__links {
    display: none;
  }

  /* no receding plane at this width, so the band it needed goes back */
  .stage__plate {
    padding-top: 84px;
  }

  .footer__nav {
    gap: var(--site-space-3xl);
  }
}

/* Motion is suppressed through a data attribute so a query string can override
   it. main.js sets [data-motion] as its first statement. The media query only
   sets the custom property — no !important, no universal selector — so a
   no-JS visitor is still covered without breaking ?motion=on. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --site-motion: 0s;
  }

  html {
    scroll-behavior: auto;
  }
}

[data-motion="reduce"] {
  --site-motion: 0s;
  scroll-behavior: auto;
}