/* ============================================================================
   Addvocate · corporate site
   The design system from usenudge.app (nudge-agent-landing), with one deliberate
   change: the accent. Everything structural — grain, layered lift, dog-ear radii,
   the spacing scale, the type ramp, the fading hairlines — is inherited unchanged,
   because parent and product should read as one family.

   Accent policy, and the whole point of the fork:
     --brand         #9878f7  the logo's purple, sampled from the supplied artwork

   ONE ACCENT, EVERYWHERE. An earlier version carried a second accent — Nudge's cobalt
   (#2447d8) — on any surface that named the product, so the product kept its own colour
   inside the parent's site. It was dropped deliberately: on a page that is mostly about
   Nudge, the exception was bigger than the rule, and the site read as two brands rather
   than one company with a flagship. The product site (usenudge.app) is still cobalt; here,
   everything wears the company's purple.

   THE BRAND PURPLE CANNOT CARRY TEXT. #9878f7 is 3.30:1 on white and 3.05:1 on the soft
   band — it fails AA for body copy and fails as a fill under white text. A logo is exempt
   from that (and it stays exactly #9878f7 in media/addvocate-mark.svg), but a link, a
   button or an eyebrow is not. So the accent is split, and the split is load-bearing:

     --accent       #9878f7  marks, dots, lit card edges, focus rings — never text
     --accent-text  #7346e0  5.70:1 on white, 5.28:1 on the soft band
     --accent-fill  #7346e0  white on it = 5.70:1
     --accent-2     #6b3fd6  hover on a fill; still 6.35:1 under white
     --accent-soft  #f4f0ff  the very light purple — where "subtle" actually lives

   The light purple is applied as GROUND, not as ink: --bg-soft carries a faint lilac cast
   instead of the old warm grey, the dot grid picks the purple up, and the .em underline is
   a soft lilac highlighter. The saturated purple appears only at small sizes.

   Follows the OS theme with no manual toggle.
   ========================================================================== */

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

:root {
  --bg:         #ffffff;
  /* A whisper of the brand purple rather than the old warm grey. Measured, not nudged:
     --ink-faint clears 4.78:1 on it, exactly what it cleared on #f6f6f4, so the lilac
     cast costs nothing in legibility. */
  --bg-soft:    #f7f5fc;
  --card:       #ffffff;
  --card-2:     #ffffff;
  --ink:        #10131c;
  --ink-soft:   #4d5364;
  --ink-faint:  #676d7d;   /* 4.5:1+ on BOTH white and the soft band — it carries real copy */
  --rule:       color-mix(in srgb, var(--ink) 8%, transparent);
  --rule-firm:  color-mix(in srgb, var(--ink) 15%, transparent);

  /* The logo's purple, sampled from the supplied artwork. Decorative use only. */
  --brand:      #9878f7;
  --accent:     #9878f7;   /* non-text: marks, dots, lit edges, focus rings */
  --accent-2:   #6b3fd6;   /* hover on a fill; white on it = 6.35:1 */
  --accent-text:#7346e0;   /* 5.70:1 on white, 5.28:1 on --bg-soft */
  --accent-soft:#f4f0ff;   /* the very light purple; --accent-text on it = 5.09:1 */
  --accent-ink: #ffffff;
  --accent-fill:#7346e0;   /* solid-button fill; white on it = 5.70:1 */

  --good:       #0d7050;
  --good-soft:  #e4f4ee;
  --warn:       #b4530a;
  --warn-soft:  #fdeee0;

  /* layered light, not a single uniform blur — this is what reads as material */
  --lift-1: 0 1px 2px -1px color-mix(in srgb, var(--ink) 16%, transparent),
            0 2px 6px -2px color-mix(in srgb, var(--ink) 10%, transparent);
  --lift-2: 0 1px 2px -1px color-mix(in srgb, var(--ink) 18%, transparent),
            0 6px 14px -6px color-mix(in srgb, var(--ink) 16%, transparent),
            0 18px 34px -20px color-mix(in srgb, var(--ink) 22%, transparent);
  --lift-3: 0 1px 2px -1px color-mix(in srgb, var(--ink) 20%, transparent),
            0 10px 22px -8px color-mix(in srgb, var(--ink) 18%, transparent),
            0 30px 56px -28px color-mix(in srgb, var(--ink) 28%, transparent);

  --grain-opacity: .035;
  /* The drafting-paper dots pick up the brand purple instead of neutral ink, which is
     most of what makes the soft bands read as lilac at all. Purely decorative. */
  --grid-dot: color-mix(in srgb, var(--accent) 26%, transparent);

  --display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --shell: 1180px;
  --pad: 40px;

  /* One vertical rhythm for the whole site. Four steps, and every gap snaps to one:
     between sections, under a section heading, between blocks inside a section, and
     between rows inside a block. Hand-set gaps drift into near-misses — 104 here,
     108 there, 42, 34, 30 — and near-misses read as sloppiness rather than intent. */
  --space-section: 104px;
  --space-head:    48px;
  --space-block:   32px;
  --space-row:     20px;

  /* The dog-ear IS the geometry: one soft corner, three sharp. Anything rounder
     reads as a leftover from a different system. */
  --radius:    4px 4px 4px 14px;
  --radius-sm: 3px 3px 3px 11px;
  --radius-xs: 2px 2px 2px 7px;
  --radius-btn:4px 4px 4px 12px;

  --nav-h: 66px;
  --spring: cubic-bezier(.22, 1, .28, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Shifted off neutral-blue onto the brand's violet axis, by a few points only. */
    --bg:         #0a0912;
    --bg-soft:    #100e1c;
    --card:       #151426;
    --card-2:     #110f1e;
    --ink:        #eaedf6;
    --ink-soft:   #a2a9bd;
    --ink-faint:  #7c8498;   /* 5.29:1 on the dark ground, 4.84:1 on the card */

    /* The accent has to LIGHTEN for text on a dark ground and DEEPEN for a fill under
       white text. One token cannot do both jobs, which is why there are three. */
    --brand:      #9878f7;   /* the logo never changes between themes */
    --accent:     #9878f7;   /* 5.92:1 on the ground — decorative, and brand-exact */
    --accent-2:   #6b3fd6;   /* hover fill; white on it = 6.35:1 */
    --accent-text:#b4a2fa;   /* 8.95:1 on the ground, 8.18:1 on the card */
    --accent-soft:#1b1630;   /* --accent-text on it = 7.88:1 */
    --accent-ink: #ffffff;
    --accent-fill:#7346e0;   /* white on it = 5.70:1; the brand purple gives only 3.30 */

    --good:       #5fd3a6;
    --good-soft:  #10281f;
    --warn:       #e8a262;
    --warn-soft:  #2a1d10;

    /* re-authored for the dark card, not flipped from the light values */
    --lift-1: 0 1px 2px -1px rgba(0,0,0,.6), 0 2px 8px -3px rgba(0,0,0,.5);
    --lift-2: 0 1px 2px -1px rgba(0,0,0,.7), 0 8px 18px -8px rgba(0,0,0,.6),
              0 22px 40px -24px rgba(0,0,0,.8);
    --lift-3: 0 1px 2px -1px rgba(0,0,0,.8), 0 12px 26px -10px rgba(0,0,0,.7),
              0 34px 62px -30px rgba(0,0,0,.9);

    --grain-opacity: .06;
    --grid-dot: color-mix(in srgb, var(--accent) 30%, transparent);
  }
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ------------------------------------------------------------------ grain -- */
/* One fixed film-grain film over the whole page. Inline SVG turbulence, so it costs
   no request and cannot 404. Very low opacity — it should be felt, not seen. This is
   what stops large flat fills reading as digital slop. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='140' height='140' filter='url(%23n)'/></svg>");
  background-size: 140px 140px;
  mix-blend-mode: multiply;
}
@media (prefers-color-scheme: dark) {
  body::before { mix-blend-mode: screen; }
}

/* Everything else sits above the grain. POSITION ONLY — no z-index, or each of these
   becomes a stacking context and traps the mobile drawer beneath the sticky nav.
   A positioned auto-z element paints above a z-0 sibling in DOM order without
   creating a context, so overlays can still compete at the root. */
.nav-drawer, main, footer, section, .foot { position: relative; }

/* ----------------------------------------------------------------- motion -- */
/* Reveal-on-scroll is OPT-IN via the js-motion class, which only the bootstrap adds.
   With JS off, or for a crawler, nothing is ever hidden — the prerendered HTML has to
   stay fully readable, and prerender.cjs fails the build if it isn't. */
.js-motion .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .62s var(--spring), transform .62s var(--spring);
  transition-delay: var(--rd, 0ms);
  will-change: opacity, transform;
}
.js-motion .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  /* The safety valve: if motion is reduced the hook never arms, but should it ever
     run anyway, nothing may be left invisible. */
  html { scroll-behavior: auto; }
  .js-motion .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------- helpers -- */
.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad); }

.sect { padding: var(--space-section) 0; }
/* the soft band carries a fine dot grid — texture that reads as drafting paper, and
   it makes the white cards sitting on it feel like objects */
.sect.is-soft {
  background:
    radial-gradient(circle at center, var(--grid-dot) .9px, transparent 1px) 0 0 / 22px 22px,
    var(--bg-soft);
}
/* hairlines fade at the ends instead of stopping dead — a small, real detail */
.sect::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule) 14%, var(--rule) 86%, transparent);
}
.sect.is-flush::before { display: none; }
.sect.is-tight { padding: calc(var(--space-section) * .62) 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-text); background: var(--accent-soft);
  padding: 7px 13px 7px 11px; border-radius: var(--radius-sm);
  margin: 0 0 22px;
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.eyebrow.is-plain { color: var(--ink-soft); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.eyebrow.is-plain::before { background: var(--ink-faint); }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -.028em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(38px, 4.5vw, 59px); line-height: 1.06; }
h2 { font-size: clamp(31px, 3.9vw, 50px); line-height: 1.08; }
h3 { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.25; letter-spacing: -.018em; }
h4 { font-size: 15px; line-height: 1.35; letter-spacing: -.01em; font-weight: 650; }

.lede { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.58; color: var(--ink-soft); margin: 18px 0 0; max-width: 60ch; }
.sect-head { max-width: 68ch; margin-bottom: var(--space-head); }
.sect-head.is-center { max-width: 62ch; margin-left: auto; margin-right: auto; text-align: center; }
.sect-head.is-center .lede { margin-left: auto; margin-right: auto; }
/* A section whose head IS its content — a thesis band, not an introduction. Without
   this the head keeps its 48px trailing gap and the band reads as a section whose
   content failed to load. */
.sect-head.is-only { margin-bottom: 0; }
.sect-head.is-only .eyebrow { margin-bottom: 18px; }
.note { font-size: 13.5px; color: var(--ink-faint); margin: 16px 0 0; max-width: 62ch; }

/* -------------------------------------------------------------- emphasis -- */
/* One word per title carries it. Not text-decoration: a ruled line under a 50px
   display face reads like a form field. This is a single hand-drawn pass that dips
   and lifts, stretched to whatever word it marks (preserveAspectRatio=none), so no
   two headings get an identical curve. background-image rather than an absolutely
   positioned ::after, because box-decoration-break: clone then gives every line
   fragment its own stroke if the phrase wraps — an ::after would smear one line
   across both. */
/* Drawn in the BRAND purple, not the deeper text purple: at this weight under a 50px
   display face it reads as a soft highlighter pass rather than a rule, which is the
   subtle-light-purple idea doing real work. It is decoration over ink that already
   passes on its own, so the stroke's own contrast is not a legibility question. */
:root {
  --em-stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M4 9.4 C 40 4.1, 72 11.6, 108 7.6 C 142 3.8, 176 10.4, 236 5.6' fill='none' stroke='%239878f7' stroke-width='4.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root { --em-stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M4 9.4 C 40 4.1, 72 11.6, 108 7.6 C 142 3.8, 176 10.4, 236 5.6' fill='none' stroke='%23b4a2fa' stroke-width='4.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
}
.em {
  background-image: var(--em-stroke);
  background-repeat: no-repeat;
  /* Kept tight to the baseline. Real padding-bottom here pushes the stroke into the
     line below, which on a display face with 1.06 leading crosses the tops of the
     next line's letters. */
  background-position: 0 98%;
  background-size: 100% .22em;
  padding-bottom: .02em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ------------------------------------------------------------------- CTAs -- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 22px; border-radius: var(--radius-btn); border: 1px solid transparent;
  font-family: var(--sans); font-size: 15.5px; font-weight: 600;
  letter-spacing: -.008em; white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, color .2s ease,
              transform .3s var(--spring), box-shadow .3s var(--spring);
}
.btn-primary {
  background: var(--accent-fill); color: var(--accent-ink);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 40%, transparent),
              0 6px 16px -6px color-mix(in srgb, var(--accent) 55%, transparent);
}
.btn-primary:hover {
  background: var(--accent-2); transform: translateY(-2px);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 44%, transparent),
              0 12px 26px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--rule-firm); box-shadow: var(--lift-1); }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--lift-2); }
.btn-text { padding: 14px 4px; color: var(--ink); background: none; }
.btn-text:hover { color: var(--accent-text); }
.btn-sm { padding: 9px 15px; font-size: 14px; border-radius: var(--radius-sm); }
.btn .arw { transition: transform .16s; }
.btn:hover .arw { transform: translateX(3px); }
.cta-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: var(--space-block); }
.cta-note { font-size: 13.5px; color: var(--ink-faint); margin: 14px 0 0; }
.arw { display: inline-block; }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px;
}

/* ----------------------------------------------------------------- brand -- */
/* The supplied logo, loaded as ONE cacheable asset rather than inlined.
   The traced path is ~7KB; inlining it would have put it in the nav and the footer of
   all 12 prerendered pages — around 170KB of duplicated markup, on pages that are
   currently 12–30KB each. An <img> costs one request, caches, and scales identically.
   It also keeps the logo's own colour out of the cascade, which is correct: the mark is
   #9878f7 on both themes and must never inherit a page accent. */
.mark { display: inline-flex; align-items: center; gap: 9px; flex: none; }
.mark-glyph { width: 21px; height: 21px; flex: none; }
.mark-word {
  font-family: var(--display); font-weight: 700; font-size: 19px;
  letter-spacing: -.032em; line-height: 1;
}
.foot-col .mark-word { font-size: 18px; }

/* --------------------------------------------------------------- nav ------ */
.nav {
  position: sticky; top: 0; z-index: 60;
  height: var(--nav-h); display: flex; align-items: center;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow .3s var(--spring), background .3s ease;
}
.nav.is-stuck { box-shadow: var(--lift-1); background: color-mix(in srgb, var(--bg) 96%, transparent); }
.nav-in { display: flex; align-items: center; gap: 28px; width: 100%; }
.nav-logo { display: flex; align-items: center; gap: 10px; }
.nav-links { display: flex; gap: 4px; margin-left: 12px; }
.nav-links a { padding: 8px 12px; border-radius: 8px; font-size: 15px; color: var(--ink-soft); }
.nav-links a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.nav-links a.on { color: var(--ink); font-weight: 550; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.nav-burger {
  display: none; position: relative; width: 34px; height: 32px;
  background: none; border: 1px solid var(--rule-firm); border-radius: var(--radius-sm);
}
.nav-burger span {
  position: absolute; left: 8px; width: 16px; height: 1.6px; background: var(--ink);
  transition: transform .24s var(--spring), opacity .18s ease;
}
.nav-burger span:nth-child(1) { top: 11px; }
.nav-burger span:nth-child(2) { top: 15px; }
.nav-burger span:nth-child(3) { top: 19px; }
.nav-burger.is-open span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

.nav-scrim {
  position: fixed; inset: var(--nav-h) 0 0; z-index: 55;
  background: color-mix(in srgb, var(--ink) 34%, transparent);
  backdrop-filter: blur(2px);
}
.nav-drawer {
  position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 58;
  background: var(--card); border-bottom: 1px solid var(--rule-firm);
  box-shadow: var(--lift-2); padding: 12px var(--pad) 20px;
}
.nav-drawer a { display: block; padding: 13px 0; font-size: 17px; border-bottom: 1px solid var(--rule); }
.nav-drawer a:last-of-type { border-bottom: none; }
.nav-drawer .btn { margin-top: 14px; width: 100%; justify-content: center; }

/* ------------------------------------------------------------------ hero -- */
.hero { padding: clamp(56px, 8vw, 96px) 0 clamp(52px, 7vw, 88px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; align-items: center; }
.hero h1 { max-width: 20ch; }
.hero .lede { margin-top: 22px; max-width: 54ch; }
.hero-note { font-size: 13.5px; color: var(--ink-faint); margin: 26px 0 0; }
.hero.is-narrow .hero-grid { grid-template-columns: minmax(0, 1fr); }
.hero.is-narrow h1 { max-width: 26ch; }
/* A hero whose second column is a machine rather than copy. The picture gets the
   larger half: a product screen loses its type long before a paragraph does. */
.hero.is-figure .hero-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; }

/* The showcase hero — home only. Copy centred and narrow, product wide underneath.
   The inner pages keep the two-column hero; this one is different because what it has
   to show is a whole team's pipeline on one board, and no 480px column renders that at
   a size where the labels are still words. */
.hero.is-showcase {
  position: relative; padding-bottom: clamp(40px, 5vw, 64px); text-align: center;
  /* A wash rather than a band: the top of the page is lit by the brand instead of
     being a flat white sheet, and it fades out before the machine so the window has
     something to sit against without a hard edge anywhere. */
  background: radial-gradient(128% 78% at 50% -14%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%);
}
.hero-copy { max-width: 60ch; margin: 0 auto clamp(38px, 5vw, 58px); }
.hero.is-showcase h1 { max-width: none; }
.hero.is-showcase .lede { margin-left: auto; margin-right: auto; max-width: 58ch; }
.hero.is-showcase .cta-row { justify-content: center; }

/* The two readings of the same deal, side by side: the argument the company makes,
   drawn rather than described. It sits under the thesis it illustrates. */
.split-read {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px; margin-top: var(--space-head); text-align: left;
}
.read-card {
  position: relative; background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 20px 22px 22px; box-shadow: var(--lift-2);
}
/* the lit top edge — the one hover-independent flourish the system keeps */
.read-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(90deg, var(--edge-hue), color-mix(in srgb, var(--edge-hue) 10%, transparent));
}
.read-card.is-crm  { --edge-hue: var(--ink-faint); }
.read-card.is-buyer { --edge-hue: var(--accent); }
.read-kicker {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
  margin: 0 0 12px;
}
.read-card.is-buyer .read-kicker { color: var(--accent-text); }
.read-claim { font-family: var(--display); font-weight: 650; font-size: 17.5px; letter-spacing: -.018em; line-height: 1.34; margin: 0; }
.read-body { font-size: 14.2px; line-height: 1.58; color: var(--ink-soft); margin: 12px 0 0; }

/* ----------------------------------------------------------------- cards -- */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

.card {
  position: relative; background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 26px 24px 28px; box-shadow: var(--lift-1);
  /* equal-height rows: a board of cards whose tops align but whose bottoms don't
     reads as broken, and stretch is cheaper than a fixed min-height */
  display: flex; flex-direction: column;
  transition: transform .3s var(--spring), box-shadow .3s var(--spring), border-color .2s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--lift-2); border-color: var(--rule-firm); }
.card h3 { margin: 0 0 10px; }
.card p { font-size: 14.6px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.card-num {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .1em;
  color: var(--accent-text); display: block; margin-bottom: 14px;
}

/* ------------------------------------------------------------- timeline -- */
/* The road that led here. A rail rather than a set of cards, because the point is
   the ORDER — each step is only interesting as the reason for the next one. */
.rail { display: grid; gap: 0; }
.rail-row {
  display: grid; grid-template-columns: 132px 1fr; gap: 28px;
  padding: 26px 0; border-top: 1px solid var(--rule);
}
.rail-row:first-child { border-top: none; }
.rail-when { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-faint); padding-top: 3px; }
.rail-status {
  display: inline-block; margin-top: 8px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px;
  border-radius: var(--radius-xs); background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink-soft);
}
.rail-row.is-current .rail-status { background: var(--accent-soft); color: var(--accent-text); }
.rail-row.is-current .rail-name { color: var(--accent-text); }
.rail-name { font-family: var(--display); font-weight: 680; font-size: 20px; letter-spacing: -.02em; margin: 0 0 8px; }
.rail-body { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0; max-width: 64ch; }
.rail-learned {
  font-size: 13.8px; line-height: 1.5; color: var(--ink); margin: 12px 0 0;
  padding-left: 14px; border-left: 2px solid var(--accent); max-width: 58ch;
}
.rail-learned b { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); display: block; font-weight: 500; margin-bottom: 3px; }
/* The customer's half of each row. Ink-faint and unruled, so the three beats read as
   ask -> ship -> what happened rather than three equal claims: the ask is context, the
   body is fact, and only the last beat gets the accent rule. */
.rail-asked {
  font-size: 13.8px; line-height: 1.55; color: var(--ink-faint); margin: 0 0 10px;
  max-width: 62ch;
}
.rail-asked b {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); display: block; font-weight: 500; margin-bottom: 3px;
}

/* --------------------------------------------------------------- ledger -- */
/* The four systems of record, as a ledger rather than cards. Cards would invite the
   eye to pick one; a ledger makes you read down the column and notice that the same
   thing is absent from every line, which is the only reason the section exists. */
.ledger { display: grid; gap: 0; }
.ledger-row {
  display: grid; grid-template-columns: 260px 1fr; gap: 28px;
  padding: 22px 0; border-top: 1px solid var(--rule);
}
.ledger-row:first-child { border-top: none; }
.ledger-what {
  font-family: var(--display); font-weight: 660; font-size: 17px; letter-spacing: -.018em;
  margin: 0; color: var(--ink);
}
.ledger-holds { font-size: 15px; line-height: 1.62; color: var(--ink-soft); margin: 0; max-width: 70ch; }
.gap-closer { font-size: 16.4px; line-height: 1.66; color: var(--ink); margin: var(--space-block) 0 0; max-width: 74ch; }
.gap-verdict {
  font-family: var(--display); font-weight: 640; font-size: clamp(19px, 2.1vw, 23px);
  line-height: 1.4; letter-spacing: -.02em; margin: 20px 0 var(--space-block);
  padding-left: 18px; border-left: 3px solid var(--accent); max-width: 62ch;
}

/* ------------------------------------------------------------ shots ------ */
/* Real screenshots of Nudge. The in-page frame is deliberately the site's own geometry —
   same dog-ear radii, same rule, same lift as a card — rather than a mock browser chrome
   with a fake URL bar, which would be a second piece of invented UI on a page whose whole
   point is that this one is not invented.
   The hero is the single exception (.is-mac) and it is not a contradiction: a device
   bezel is the machine, not made-up product UI. Nothing inside it is drawn. */
.shot { margin: 0; display: grid; gap: 14px; }
.shot-frame {
  position: relative; background: var(--card-2); border: 1px solid var(--rule-firm);
  border-radius: var(--radius); box-shadow: var(--lift-2); overflow: hidden;
}
.shot-bar {
  position: relative; display: flex; align-items: center; gap: 6px;
  padding: 9px 12px; border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.shot-bar i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 16%, transparent); }
.shot-screen {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); margin-left: 8px;
}
.shot-img { display: block; width: 100%; height: auto; }
.shot-cap { font-size: 13.5px; line-height: 1.55; color: var(--ink-faint); max-width: 74ch; }
.shot-stack { display: grid; gap: calc(var(--space-section) * .58); }

/* Named before shown. Three unlabelled app screenshots stacked down a page are texture:
   the reader has no reason to work out what they are looking at, and the one that would
   have convinced them goes past unread. The screen's name, the one thing it proves, and
   the sentence that says why — then the picture. */
.shot.is-labelled { gap: 22px; }
.shot-head { max-width: 64ch; display: grid; gap: 10px; justify-items: start; }
.shot-head .eyebrow { margin: 0 0 4px; }
.shot-head h3 { font-size: clamp(21px, 2vw, 27px); }
.shot-head .shot-cap { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* ---- the machine ---- */
/* A laptop window: bezel, traffic lights, centred screen name. The lights keep their
   real colours in both themes, exactly as macOS does — they are the only element on the
   site allowed outside the palette, because they are a picture of hardware. */
.shot.is-mac { gap: 18px; position: relative; }
.shot.is-mac .shot-frame {
  position: relative; z-index: 1;
  border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
  box-shadow:
    0 2px 4px -2px color-mix(in srgb, var(--ink) 22%, transparent),
    0 18px 38px -14px color-mix(in srgb, var(--ink) 26%, transparent),
    0 48px 90px -40px color-mix(in srgb, var(--ink) 34%, transparent);
}
.shot.is-mac .shot-bar {
  height: 36px; padding: 0 14px; gap: 8px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ink) 7%, var(--card)),
    color-mix(in srgb, var(--ink) 3%, var(--card)));
  border-bottom: 1px solid var(--rule-firm);
}
.shot.is-mac .shot-bar i { width: 10px; height: 10px; }
.shot.is-mac .shot-bar i:nth-of-type(1) { background: #ff5f57; }
.shot.is-mac .shot-bar i:nth-of-type(2) { background: #febc2e; }
.shot.is-mac .shot-bar i:nth-of-type(3) { background: #28c840; }
.shot.is-mac .shot-screen {
  position: absolute; left: 50%; transform: translateX(-50%); margin: 0;
  max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shot.is-mac .shot-cap { text-align: center; margin: 0 auto; }

/* The hero machine sits over a soft pool of the brand purple — carried as a fourth
   shadow on the frame rather than a blurred pseudo-element, so it cannot end up behind
   the caption when the figure grows. It is the only place the accent is used as light
   rather than as ink, and it is what stops a white window on a white page from floating
   with nothing under it. */
.hero.is-showcase .shot.is-mac .shot-frame {
  box-shadow:
    0 2px 4px -2px color-mix(in srgb, var(--ink) 22%, transparent),
    0 18px 38px -14px color-mix(in srgb, var(--ink) 26%, transparent),
    0 48px 90px -40px color-mix(in srgb, var(--ink) 34%, transparent),
    0 46px 90px -28px color-mix(in srgb, var(--accent) 42%, transparent);
}
/* Cut the window rather than shrink it: the board continues below the fold, which is
   both true and the reason the screenshot is legible at all at this width. */
.hero.is-showcase .shot.is-mac picture { display: block; max-height: 585px; overflow: hidden; }

/* ------------------------------------------------------------ quotes ----- */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.quote {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 26px 24px; box-shadow: var(--lift-1); margin: 0;
  display: flex; flex-direction: column;
}
.quote-theme {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 14px;
}
.quote-body {
  font-family: var(--display); font-weight: 600; font-size: 17px; line-height: 1.45;
  letter-spacing: -.016em; margin: 0 0 auto; padding-bottom: 22px;
}
.quote-who { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--rule); }
.quote-av {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-text);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
}
.quote-name { font-size: 14.4px; font-weight: 600; }
.quote-role { font-size: 12.8px; color: var(--ink-faint); }

/* -------------------------------------------------------------- flagship -- */
/* The Nudge surface. Same card, same radii, same lift, same accent as everything
   else — the flagship is part of the company, not a guest with its own palette. */
.flag {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--lift-2); padding: 40px 38px; position: relative; overflow: hidden;
}
.flag::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 8%, transparent));
}
.flag-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: 44px; align-items: center; }
/* The stage variant: claim across the top, one product screen at full band width
   underneath. A screenshot in the .82fr column is 440px wide, and at 440px a 1440px
   app view is texture — which is the opposite of what a flagship band is for. */
.flag.is-stage { display: grid; gap: 34px; padding-bottom: 34px; }
.flag-copy { max-width: 64ch; }
.flag-copy .lede { max-width: 62ch; }
.flag h2 { font-size: clamp(27px, 3vw, 38px); }
.flag-word { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -.03em; color: var(--accent-text); }
.flag-site { font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); }

/* The agent-team figure: eleven marks in three motion groups. Counted from the
   catalog, never typed — see content/site.json → nudge.agentCount. */
.team-fig { display: grid; gap: 16px; }
.team-group { display: grid; gap: 8px; }
.team-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.team-dots { display: flex; gap: 6px; flex-wrap: wrap; }
.team-dot {
  width: 26px; height: 26px; border-radius: var(--radius-xs);
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 10.5px; color: var(--accent-text);
}
.team-count { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }

/* ------------------------------------------------------------- offices --- */
.offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.office { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 24px; box-shadow: var(--lift-1); }
.office-role { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 10px; }
.office h3 { margin: 0 0 8px; }
.office address { font-style: normal; font-size: 14.6px; line-height: 1.62; color: var(--ink-soft); }
.office a { color: var(--accent-text); }
.office a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- forms -- */
.form { display: grid; gap: 16px; max-width: 640px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 13.4px; font-weight: 600; color: var(--ink); }
.field .opt { font-weight: 400; color: var(--ink-faint); }
.field input, .field textarea {
  font-family: var(--sans); font-size: 15.5px; color: var(--ink);
  background: var(--card); border: 1px solid var(--rule-firm); border-radius: var(--radius-sm);
  padding: 12px 14px; width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.field-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.form-note { font-size: 13px; color: var(--ink-faint); margin: 0; }
.form-msg { font-size: 14.4px; margin: 0; padding: 12px 14px; border-radius: var(--radius-sm); }
.form-msg.is-ok { background: var(--good-soft); color: var(--good); }
.form-msg.is-bad { background: var(--warn-soft); color: var(--warn); }
/* the honeypot — off-screen rather than display:none, which some bots skip */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------------- faq -- */
.faq { max-width: 820px; }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-q {
  display: flex; align-items: flex-start; gap: 16px; width: 100%; padding: 20px 0;
  background: none; border: none; text-align: left;
  font-family: var(--display); font-weight: 620; font-size: 17.5px; letter-spacing: -.018em;
}
.faq-q:hover { color: var(--accent-text); }
.faq-sign { margin-left: auto; flex: none; font-family: var(--mono); font-size: 17px; color: var(--ink-faint); transition: transform .2s; line-height: 1.2; }
.faq-item.open .faq-sign { transform: rotate(45deg); color: var(--accent-text); }
.faq-a { padding: 0 44px 22px 0; font-size: 15.2px; line-height: 1.62; color: var(--ink-soft); margin: 0; max-width: 72ch; }
/* Collapsed with display:none, NOT unmounted. The FAQPage JSON-LD asserts these
   answers are on the page, and the build guard fails if they aren't — which is the
   defect the old site shipped: six questions, no answers anywhere in the DOM. */
.faq-item:not(.open) .faq-a { display: none; }

/* --------------------------------------------------------------- legal --- */
/* Long-form statutory prose. Measure is the whole design here. */
.legal { max-width: 76ch; }
.legal-intro { font-size: 16px; line-height: 1.68; color: var(--ink-soft); margin: 0 0 var(--space-block); }
.legal h2 {
  font-size: clamp(21px, 2vw, 26px); line-height: 1.2; letter-spacing: -.02em;
  margin: 46px 0 14px; padding-top: 22px; border-top: 1px solid var(--rule);
}
.legal h3 { font-size: 17.5px; margin: 28px 0 10px; }
.legal h4 { font-size: 15px; margin: 22px 0 8px; color: var(--ink-soft); }
.legal p { font-size: 15.4px; line-height: 1.72; color: var(--ink-soft); margin: 0 0 14px; }
.legal ul { margin: 0 0 16px; padding-left: 20px; }
.legal li { font-size: 15.4px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 7px; }
.legal-meta {
  font-family: var(--mono); font-size: 12px; color: var(--ink-faint);
  padding: 14px 16px; background: var(--bg-soft); border-radius: var(--radius-sm);
  margin: 0 0 var(--space-block);
}

/* ---------------------------------------------------------------- blog --- */
.post-list { display: grid; gap: 16px; }
.post-card {
  display: block; background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--lift-1);
  transition: transform .3s var(--spring), box-shadow .3s var(--spring), border-color .2s ease;
}
.post-card:hover { transform: translateY(-2px); box-shadow: var(--lift-2); border-color: var(--rule-firm); }
.post-card-title { font-size: clamp(21px, 2.2vw, 28px); line-height: 1.18; margin: 10px 0 0; }
.post-card:hover .post-card-title { color: var(--accent-text); }
.post-card-dek { font-size: 15.4px; line-height: 1.58; color: var(--ink-soft); margin: 12px 0 0; max-width: 68ch; }
.post-card-more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-size: 14px; font-weight: 600; color: var(--accent-text);
}
.post-card:hover .post-card-more .arw { transform: translateX(3px); }
.post-card-more .arw { transition: transform .16s; }
.post-list.is-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.post-list.is-compact .post-card { padding: 22px 24px; }

.post-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  color: var(--ink-faint); margin: 0;
}
.post-meta .sep { color: var(--rule-firm); }
.hero .post-meta { margin-top: 24px; }
.post-title { max-width: 30ch; }
.eyebrow a { color: inherit; }
.eyebrow a:hover { text-decoration: underline; }

/* Long-form article measure. Same rule as the legal pages: the design is the measure. */
.post-body { max-width: 72ch; }
.post-body h2 { font-size: clamp(23px, 2.3vw, 30px); line-height: 1.2; margin: 48px 0 14px; }
.post-body h3 { font-size: 19px; margin: 32px 0 10px; }
.post-body h4 { font-size: 15.5px; margin: 24px 0 8px; color: var(--ink-soft); }
.post-body p { font-size: 16.6px; line-height: 1.72; color: var(--ink-soft); margin: 0 0 18px; }
.post-body ul { margin: 0 0 20px; padding-left: 22px; }
.post-body li { font-size: 16.4px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 9px; }
.post-body > h2:first-child { margin-top: 0; }

@media (max-width: 860px) {
  .post-list.is-compact { grid-template-columns: minmax(0, 1fr); }
  .post-body h2 { margin-top: 36px; }
}

/* --------------------------------------------------------- close + foot -- */
.close { text-align: center; padding: var(--space-section) 0; background: var(--bg-soft); }
.close h2 { max-width: 24ch; margin: 0 auto; }
.close .lede { margin-left: auto; margin-right: auto; }
.close .cta-row { justify-content: center; }

.foot { padding: 30px 0 24px; border-top: 1px solid var(--rule); font-size: 13.4px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr .8fr .9fr .8fr; gap: 26px; }
.foot-col h4 { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; margin-bottom: 9px; }
.foot-col a { display: block; padding: 2.5px 0; color: var(--ink-soft); font-size: 13.2px; }
.foot-col a:hover { color: var(--accent-text); }
.foot-blurb { font-size: 13.2px; color: var(--ink-soft); line-height: 1.5; margin: 9px 0 0; max-width: 34ch; }
.foot-entity { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); line-height: 1.6; margin: 14px 0 0; max-width: 40ch; }
.foot-base {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule);
  font-size: 12.2px; color: var(--ink-faint);
}

/* ---------------------------------------------------------------- mobile -- */
@media (max-width: 1000px) {
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .flag-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .quotes, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero.is-showcase .shot.is-mac picture { max-height: 460px; }
}
@media (max-width: 860px) {
  :root { --pad: 22px; --space-section: 74px; --space-head: 34px; }
  .nav-links { display: none; }
  .nav-burger { display: block; }
  .nav-right .btn-sm { display: none; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 38px; }
  .grid-3, .grid-2, .quotes, .offices, .field-2 { grid-template-columns: minmax(0, 1fr); }
  .rail-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .rail-when { display: flex; align-items: center; gap: 12px; padding-top: 0; }
  .rail-status { margin-top: 0; }
  .ledger-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  /* On a phone the hero window has nothing left to cut — the whole screen is already
     small. Letting it run full height beats an arbitrary crop. */
  .hero.is-showcase .shot.is-mac picture { max-height: none; }
  .split-read { grid-template-columns: minmax(0, 1fr); }
  .flag { padding: 28px 22px; }
  .legal h2 { margin-top: 34px; }
}
@media (max-width: 620px) {
  h1 { font-size: clamp(31px, 8.4vw, 40px); }
  h2 { font-size: clamp(26px, 7.4vw, 34px); }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ----------------------------------------------------------------- print -- */
@media print {
  .nav, .nav-drawer, .nav-scrim, .close, body::before { display: none !important; }
  body { font-size: 12pt; }
  .legal h2 { break-after: avoid; }
}