/* ═══════════════════════════════════════════════════════════════════════════
   LEADLY — BRAND SYSTEM  ·  /assets/brand.css
   Single source of truth for colour, type, radius, spacing, shadow, motion
   across every Leadly property (leadly.sg, /for/insurance, the deck, Pulse).

   Portable: no repo-specific paths, no sibling @imports beyond the web-font.

   ── 2026 · "PAPER & STAGE" ─────────────────────────────────────────────────
   This REPLACES the all-caps / green / white-only system entirely.
   See /BRAND.md.

   The idea in one line: A WHITE PAGE, ONE DARK STAGE, ONE BLUE.

   · The page is PURE WHITE and mostly empty.
   · At the top, a single DARK ROUNDED PANEL (--panel) lifts off the paper on a
     soft blue-tinted shadow. That panel is the product. It is the only object
     on the page with weight.
   · Type is Figtree, SENTENCE CASE, weight 600, tracked tight and negative.
     Nothing shouts in caps.
   · ONE blue — cobalt #0055E8. The CTA, the emphasis line, the active state.
     Nothing else is coloured.
   · No gradients on the page. No glow. No glassmorphism. Depth is whitespace,
     hairlines, and the one shadow under the stage.

   TOKEN NAMES ARE STABLE. leadly-animations.css reads --accent / --tint /
   --on-accent / --ink etc, so re-skinning the system means changing values
   here — never names.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&display=swap');

:root{

  /* ── TYPE ──────────────────────────────────────────────────────────────
     ONE family: Figtree (400–800). Swapping to a licensed face later
     (Cera, Circular, Plus Jakarta) is a one-line change to --font. */
  --font: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font);

  --fs-display: clamp(32px, 4.4vw, 58px);  /* hero — sentence case, 600 */
  --fs-h1:      clamp(28px, 3.4vw, 42px);
  --fs-h2:      clamp(24px, 2.8vw, 34px);
  --fs-h3:      19px;
  --fs-body:    17px;
  --fs-lead:    clamp(16px, 1.4vw, 19px);
  --fs-sm:      14px;
  --fs-eyebrow: 12px;

  --lh-display: 1.12;   /* NOT the old 0.95 — this display breathes */
  --lh-tight:   1.22;
  --lh-body:    1.62;

  --tracking-display: -0.033em;  /* the signature: tight, negative */
  --tracking-h:       -0.028em;
  --tracking-tight:   -0.011em;
  --tracking-eyebrow:  0.11em;

  --weight-body: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;
  --weight-black: 800;   /* legacy alias — 800 is the ceiling now */

  /* ── CANVAS, SURFACES & THE STAGE ──────────────────────────────────────*/
  --canvas:      #FFFFFF;   /* the paper                                   */
  --canvas-sunk: #F7F8FA;   /* alternating / recessed section              */
  --surface:     #FFFFFF;   /* raised card                                 */
  --surface-2:   #F5F6F8;   /* input fill, subtle sunken                   */

  --panel:       #0E0F11;   /* THE STAGE — the one dark object on the page */
  --panel-2:     #1A1C20;   /* a raised thing sitting on the stage         */
  --panel-line:  rgba(255,255,255,.09);
  --on-panel:    #FFFFFF;
  --on-panel-2:  rgba(255,255,255,.68);
  --on-panel-3:  rgba(255,255,255,.44);
  --panel-accent:#4D8CF0;   /* the blue that reads on dark                 */

  /* ── INK & TEXT (on white) ─────────────────────────────────────────────*/
  --ink:    #0C111D;        /* near-black — text, dark pill. Never #000.   */
  --text-1: #0C111D;        /* primary            18.9:1                   */
  --text-2: #5A6473;        /* secondary body      5.99:1                  */
  --text-3: #98A2B3;        /* muted — DECORATIVE only, fails AA           */
  --text-3-aa: #667085;     /* muted where it must pass AA        4.97:1   */

  /* ── LINES ─────────────────────────────────────────────────────────────*/
  --line:         #EAECF0;
  --line-strong:  #D8DCE2;
  --feature-line: #E4E7EC;

  /* ── BLUE — the single accent ──────────────────────────────────────────
     Cobalt #0055E8 passes AA as text on white (6.06:1) AND takes white text
     on top of it (6.06:1). One value does the link and the button. */
  --blue-50:  #EBF1FE;  --blue-100: #D3E1FD;  --blue-200: #A8C3FB;
  --blue-300: #7BA2F6;  --blue-400: #4D8CF0;  --blue-500: #0055E8;
  --blue-600: #0047C4;  --blue-700: #0039A0;  --blue-800: #002E80;
  --blue-900: #002466;

  --accent:        #0055E8;  /* CTA pill fill · white text 6.06:1  */
  --accent-hover:  #0047C4;
  --accent-ink:    #0055E8;  /* blue AS TEXT / links on white      */
  --accent-strong: #0039A0;  /* deep emphasis text          9.1:1  */
  --on-accent:     #FFFFFF;  /* text ON the blue pill              */
  --tint:          #EBF1FE;  /* pale blue wash — demo / image panel */
  --tint-line:     #D3E1FD;
  --accent-soft:   var(--tint);

  /* ── SEMANTIC ──────────────────────────────────────────────────────────*/
  --success:      #147A54;  --success-soft: #ECF7F1;
  --danger:       #C4271B;  --danger-soft:  #FBEAE8;
  --warning:      #B54708;  --warning-soft: #FEF3E8;

  /* ── DATA-VIZ (Pulse charts) ───────────────────────────────────────────*/
  --chart-1: #0055E8;  --chart-2: #147A54;  --chart-3: #7C3AED;
  --chart-4: #F59E0B;  --chart-5: #0E7490;  --chart-grid: #EFF1F4;

  /* ── RADII ─────────────────────────────────────────────────────────────*/
  --r-xs:    4px;
  --r-sm:    8px;
  --r-md:    12px;
  --r-lg:    16px;
  --r-xl:    24px;
  --r-tint:  24px;
  --r-stage: 26px;   /* THE PANEL */
  --r-btn:   12px;   /* BUTTONS — a considered rectangle, not a lozenge */
  --r-pill:  999px;  /* chips and status pills only, NOT buttons */

  /* ── SPACING (4px base) ────────────────────────────────────────────────*/
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px; --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 88px; --space-10: 120px;

  /* ── LAYOUT ────────────────────────────────────────────────────────────*/
  --container:        1180px;
  --container-narrow: 760px;
  --gutter:           28px;

  /* ── SHADOWS — cool, blue-tinted. Only the stage gets the big one. ─────*/
  --shadow-sm:    0 1px 2px rgba(16,24,40,.06);
  --shadow-md:    0 6px 20px rgba(16,24,40,.08);
  --shadow-lg:    0 24px 60px rgba(12,24,60,.12);
  --shadow-stage: 0 2px 6px rgba(16,24,40,.05), 0 24px 60px rgba(12,24,60,.14), 0 60px 120px rgba(0,50,150,.08);

  /* ── MOTION ────────────────────────────────────────────────────────────*/
  --dur-1: 120ms;  --dur-2: 200ms;  --dur-3: 360ms;
  --ease:     cubic-bezier(.2,.6,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* ── COLOUR SCHEME — THIS IS NOT OPTIONAL ──────────────────────────────
     A page that never declares a colour scheme is a page the browser is free
     to darken. Chrome's Auto Dark Theme on Android, and several iOS in-app
     webviews, will invert the CANVAS of any such page while leaving the
     author's text colours alone — which turns this site into near-black text
     on a black ground. Unreadable, and entirely their doing.

     `only light` is the hard opt-out. It says: this page is light, do not
     touch it. Nothing else fixes it, because the darkening happens outside
     our stylesheet. */
  color-scheme: only light;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after{ box-sizing: border-box; }
html{
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip;
  /* The CANVAS must be painted by us, not left to the UA. <html> had NO
     background — rgba(0,0,0,0) — so whatever the browser decided to put behind
     the page showed through. */
  background: var(--canvas);
}
body{
  margin: 0;
  overflow-x: clip;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--weight-body);
  color: var(--text-1);
  background: var(--canvas);
  letter-spacing: var(--tracking-tight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* THE PAPER HAS A TOOTH.
   Flat #FFF next to a pure-black card reads as a hole punched in nothing — the
   two surfaces have no relationship. So the white gets a texture: a fine grain,
   and a very faint grid on the same 44px pitch as the one inside the dark
   stage. The page and the panel are now the same material, lit differently.
   Both layers are far below the threshold of "I can see a pattern" — you only
   notice if you take them away. */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(12,17,29,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12,17,29,.028) 1px, transparent 1px);
  background-size: 44px 44px, 44px 44px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 88%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 88%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
/* everything real sits above the tooth */
.nav, header, section, footer, main, .promise-wrap, .marquee{ position: relative; z-index: 1; }

img, svg, video, canvas{ max-width: 100%; }
a{ color: var(--accent-ink); text-decoration: none; }
a:hover{ text-decoration: underline; }
h1,h2,h3,h4{ margin: 0; font-weight: var(--weight-semibold); color: var(--text-1);
  letter-spacing: var(--tracking-h); line-height: var(--lh-tight); overflow-wrap: anywhere; }
p{ margin: 0; }
::selection{ background: var(--tint); color: var(--text-1); }

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT PRIMITIVES
   ═══════════════════════════════════════════════════════════════════════════ */
.container{ width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow{ width: 100%; max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }
.section{ padding: var(--space-9) 0; }
.section--sunk{ background: var(--canvas-sunk); }
.section--tight{ padding: var(--space-7) 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE STAGE — the signature object. One dark rounded panel lifted off the
   white page on a blue-tinted shadow. Once per page; twice at the very most.
   ═══════════════════════════════════════════════════════════════════════════ */
.stage-dark{
  position: relative;
  background: var(--panel);
  color: var(--on-panel);
  border-radius: var(--r-stage);
  box-shadow: var(--shadow-stage);
  overflow: hidden;
  padding: clamp(32px, 4.4vw, 56px);
}
.stage-dark h1, .stage-dark h2, .stage-dark h3{ color: var(--on-panel); }
.stage-dark p{ color: var(--on-panel-2); }
.stage-dark .eyebrow{ color: var(--on-panel-3); }
/* Links on the stage go blue — but a BUTTON is not a link, and an <a class="btn">
   inside here was being repainted --panel-accent: blue text on a blue button,
   2.52:1, effectively invisible. The element selector `a` (0,1,1) outranked
   `.btn-primary` (0,1,0), so the button never stood a chance. Exclude it. */
.stage-dark a:not(.btn){ color: var(--panel-accent); }
.stage-dark .accent{ color: var(--panel-accent); }
.stage-dark .rule{ border: 0; border-top: 1px solid var(--panel-line); }
@media (max-width: 820px){ .stage-dark{ border-radius: 20px; padding: 28px 22px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   TYPE PRIMITIVES — sentence case, 600, tight negative tracking.
   ═══════════════════════════════════════════════════════════════════════════ */
.display{
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--text-1);
  text-transform: none;
  margin: 0;
  overflow-wrap: anywhere;
}
.display--center{ text-align: center; }
/* The emphasis line — the second line of a display, set in the blue. */
.display .accent{ color: var(--accent-ink); }
.stage-dark .display .accent{ color: var(--panel-accent); }

.section-title{
  font-weight: var(--weight-semibold);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-h);
  color: var(--text-1);
  margin: 0;
}
.h1{ font-size: var(--fs-h1); font-weight: var(--weight-semibold); line-height: var(--lh-tight); letter-spacing: var(--tracking-h); }
.h3{ font-size: var(--fs-h3); font-weight: var(--weight-bold); line-height: 1.32; letter-spacing: var(--tracking-tight); }

.eyebrow{
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-3-aa);
  margin-bottom: var(--space-4);
}
.lead{ font-size: var(--fs-lead); line-height: 1.6; color: var(--text-2); font-weight: var(--weight-body); }
.subhead{ font-size: var(--fs-lead); line-height: 1.6; color: var(--text-2); max-width: 48ch; }
.muted{ color: var(--text-3-aa); font-size: var(--fs-sm); }

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
     <a class="btn btn-primary"><span>Book a call</span><i class="btn-ico"></i></a>
   Primary = BLUE pill, white text.
   Secondary = near-black pill that turns BLUE on hover.
   ═══════════════════════════════════════════════════════════════════════════ */
.btn{
  position: relative;
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font);
  font-size: 15px; font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight); line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-btn);              /* NOT a pill any more */
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  overflow: hidden;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease),
              transform 140ms cubic-bezier(.2,.8,.2,1),
              box-shadow 200ms cubic-bezier(.2,.8,.2,1);
}
/* the sheen, on hover — it passes OVER the label for a moment, which is the
   point of a sheen. The raking light does not: that is a background layer. */
.btn::before{
  content:""; position:absolute; top:0; bottom:0; left:-45%; width:32%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.20), rgba(255,255,255,0));
  transform: skewX(-18deg);
  transition: left .6s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.btn:hover::before{ left: 125%; }
.btn > *{ position: relative; z-index: 1; }
.btn:hover{ text-decoration: none; transform: translateY(-2px); }
.btn:active{ transform: translateY(0); transition-duration: 60ms; }
.btn:focus-visible{ outline: 3px solid var(--accent); outline-offset: 3px; }
.btn:disabled, .btn[disabled]{
  opacity: .42; cursor: not-allowed; transform: none;
  box-shadow: 0 1px 0 0 rgba(0,0,0,.12) inset;   /* flat: it is not pressable */
}
.btn:disabled:hover::before, .btn[disabled]:hover::before{ left: -45%; }  /* no sheen */

.btn-ico{
  --arrow: #FFFFFF;
  width: 22px; height: 22px; flex: none; margin-left: 2px;
  border-radius: 7px;                       /* squared off, like the button */
  background: rgba(255,255,255,.20);
  display: inline-grid; place-items: center; position: relative;
  transition: transform 220ms cubic-bezier(.16,1,.3,1), background var(--dur-2) var(--ease);
}
.btn:hover .btn-ico{ transform: translateX(3px); background: rgba(255,255,255,.30); }
.btn-ico::before{
  content: "";
  width: 11px; height: 11px;
  background: var(--arrow);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* DEPTH. Three layers, all doing different work:
     1. a hard 1px lip underneath  — the button has thickness
     2. a soft coloured cast       — it is floating above the paper
     3. a bright inner top edge    — light is falling on it from above
   On press the lip collapses and the button drops. That is the whole trick. */
/* A BUTTON OWNS ITS OWN COLOUR. Never inherited, never left to an ancestor.
   The raking light is a BACKGROUND LAYER, not a ::after overlay — an overlay
   paints on top of a raw text node (buttons whose label isn't wrapped in a
   span), which is what made "Continue" render at 3.34:1. */
.btn-primary{
  background:
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0) 46%),
    linear-gradient(180deg, #2A6BF0 0%, var(--accent) 55%, #0049CC 100%);
  color: #FFFFFF !important;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.22) inset,
    0 -1px 0 0 rgba(0,0,0,.20) inset,
    0 2px 0 0 #0039A0,
    0 6px 14px -2px rgba(0,85,232,.42),
    0 12px 26px -6px rgba(0,85,232,.34);
}
.btn-primary:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 46%),
    linear-gradient(180deg, #3B79F5 0%, #0B5CF0 55%, #0049CC 100%);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.26) inset,
    0 -1px 0 0 rgba(0,0,0,.20) inset,
    0 3px 0 0 #0039A0,
    0 10px 22px -2px rgba(0,85,232,.50),
    0 20px 40px -8px rgba(0,85,232,.38);
}
.btn-primary:active{
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.14) inset,
    0 1px 0 0 #0039A0,
    0 3px 8px -2px rgba(0,85,232,.40);
}

.btn-secondary{
  background:
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,0) 46%),
    linear-gradient(180deg, #232A38 0%, var(--ink) 60%, #05080F 100%);
  color: #FFFFFF !important;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.14) inset,
    0 2px 0 0 #000,
    0 6px 14px -2px rgba(12,17,29,.34),
    0 12px 26px -6px rgba(12,17,29,.26);
}
.btn-secondary:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0) 46%),
    linear-gradient(180deg, #2A6BF0 0%, var(--accent) 60%, #0049CC 100%);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.22) inset,
    0 3px 0 0 #0039A0,
    0 10px 22px -2px rgba(0,85,232,.46);
}
.btn-secondary:active{ box-shadow: 0 1px 0 0 #000, 0 3px 8px -2px rgba(12,17,29,.34); }

.btn-ghost{
  background: transparent; color: var(--text-2);
  padding-left: 12px; padding-right: 12px;
  box-shadow: none;
}
.btn-ghost::after, .btn-ghost::before{ display: none; }
.btn-ghost:hover{ color: var(--text-1); transform: none; background: var(--surface-2); }
.btn-ghost .btn-ico{ background: transparent; border: 1.5px solid var(--line-strong); --arrow: var(--text-1); }

/* On the stage, secondary inverts to a light translucent pill */
.stage-dark .btn-secondary{ background: rgba(255,255,255,.10); color: #fff; }
.stage-dark .btn-secondary:hover{ background: rgba(255,255,255,.20); }

/* ═══════════════════════════════════════════════════════════════════════════
   FEATURE ROW — a line of text and a hairline. No bullets. No icons.
   ═══════════════════════════════════════════════════════════════════════════ */
.feature-list{ border-top: 1px solid var(--feature-line); margin: 0; padding: 0; list-style: none; }
.feature-row{
  display: block; padding: var(--space-4) 0;
  border-bottom: 1px solid var(--feature-line);
  font-size: 16px; line-height: 1.45;
  color: var(--text-1); font-weight: var(--weight-medium);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TINT PANEL — pale-blue container for product / demo imagery.
   ═══════════════════════════════════════════════════════════════════════════ */
.tint-panel{
  background: var(--tint);
  border-radius: var(--r-tint);
  padding: clamp(24px, 4vw, 56px);
  display: grid; place-items: center;
}
.tint-panel > img{ border-radius: var(--r-lg); }

/* ═══════════════════════════════════════════════════════════════════════════
   TWO-COL-ALT
   ═══════════════════════════════════════════════════════════════════════════ */
.two-col-alt{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
.two-col-alt .tca-media{ order: 2; }
.two-col-alt.is-flip .tca-copy{ order: 2; }
.two-col-alt.is-flip .tca-media{ order: 1; }
@media (max-width: 860px){
  .two-col-alt{ grid-template-columns: 1fr; gap: var(--space-6); }
  .two-col-alt .tca-media,
  .two-col-alt.is-flip .tca-copy,
  .two-col-alt.is-flip .tca-media{ order: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAV — white, minimal. Mark + wordmark left; meta + one pill right.
   ═══════════════════════════════════════════════════════════════════════════ */
.nav{
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-in{
  max-width: var(--container); margin: 0 auto;
  padding: 13px var(--gutter);
  display: flex; align-items: center; gap: var(--space-3);
}
.nav-logo{ display: flex; align-items: center; gap: 11px; font-weight: var(--weight-semibold);
  font-size: 18px; letter-spacing: -.02em; color: var(--text-1); text-decoration: none; }
.nav-logo:hover{ text-decoration: none; }
.nav-logo .dot{ color: var(--accent); }
.nav-mark{
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: var(--panel); display: grid; place-items: center;
}
.nav-mark svg{ width: 18px; height: 18px; }
.nav-links{ display: flex; align-items: center; gap: var(--space-5); }
.nav-links a{ color: var(--text-2); font-size: 15px; font-weight: var(--weight-medium); text-decoration: none; }
.nav-links a:hover{ color: var(--text-1); }
.nav-right{ margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }

/* ═══════════════════════════════════════════════════════════════════════════
   CARD · PILL · STAT
   ═══════════════════════════════════════════════════════════════════════════ */
.card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.card--flat{ box-shadow: none; }

.pill{ display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 14px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  background: var(--surface-2); color: var(--text-2); }
.pill--accent{ background: var(--tint); color: var(--accent-strong); }
.dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.stat{ display: flex; flex-direction: column; gap: var(--space-1); }
.stat-value{ font-size: clamp(32px,3.8vw,48px); font-weight: var(--weight-heavy); line-height: 1; letter-spacing: var(--tracking-display); color: var(--text-1); }
.stat-value--accent{ color: var(--accent-ink); }
.stat-label{ font-size: var(--fs-eyebrow); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-3-aa); }
.stat-sub{ font-size: var(--fs-sm); color: var(--text-3-aa); }

/* ═══════════════════════════════════════════════════════════════════════════
   FORM CONTROLS — blue focus ring
   ═══════════════════════════════════════════════════════════════════════════ */
.input, .select, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea, select{
  width: 100%;
  font-family: var(--font); font-size: 15px; color: var(--text-1);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.input:focus, .select:focus, input:focus, textarea:focus, select:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
label{ font-size: 13px; color: var(--text-3-aa); display: block; margin-bottom: var(--space-1); }

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */
footer{ border-top: 1px solid var(--line); padding: var(--space-7) 0; }
.foot-in{
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--text-3-aa);
}
.foot-in a{ color: var(--text-2); margin-left: var(--space-5); }
.foot-in span:last-child a:first-child{ margin-left: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION — respect reduced motion globally
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE MOTION LAYER — paired with /assets/leadly-fx.js

   Note the default: .fx-rise is INVISIBLE. That is only safe because the JS
   adds the class itself. If the script never runs, the class is never added,
   and the content is simply there — visible, unstyled, fine. Never hide
   content in the HTML and rely on JS to reveal it.
   ═══════════════════════════════════════════════════════════════════════════ */
.fx-rise{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  will-change:opacity, transform;
}
.fx-rise.fx-in{ opacity:1; transform:none; }

/* the nav detaches from the page once you leave the top */
.nav{ transition:padding var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease), background var(--dur-3) var(--ease); }
.nav.is-stuck{
  background:rgba(255,255,255,.94);
  box-shadow:0 1px 0 rgba(12,17,29,.06), 0 8px 28px -12px rgba(12,17,29,.24);
}
.nav.is-stuck .nav-in{ padding-top:9px; padding-bottom:9px; }
.nav-in{ transition:padding var(--dur-3) var(--ease); }
.nav-mark{ transition:transform var(--dur-3) var(--ease); }
.nav.is-stuck .nav-mark{ transform:scale(.9); }

/* the tilt needs a transition for the RELEASE, not the track */
.funnel-card, .sci-card{ transform-style:preserve-3d; }
.funnel-card{ transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow var(--dur-2) var(--ease); }
/* a soft light follows the cursor across the dark cards */
.sci-card::after, .funnel-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%), rgba(157,192,255,.10), transparent 62%);
  opacity:0; transition:opacity var(--dur-2) var(--ease);
}
.sci-card:hover::after, .funnel-card:hover::after{ opacity:1; }

/* links pull a line under themselves rather than just switching colour */
.foot-note{ color:var(--text-3-aa); }

/* the marquee pauses when you look at it — already true; make it obvious */
.marquee .mq-track{ will-change:transform; }

@media (prefers-reduced-motion: reduce){
  .fx-rise{ opacity:1 !important; transform:none !important; }
  .nav, .nav-in, .nav-mark, .funnel-card, .sci-card{ transition:none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE DARK TEXTURE — ONE GRID, ONE PITCH, EVERYWHERE.

   Before this, five dark surfaces each drew their own grid: 44px, 38px and 34px
   pitches at two different opacities. Side by side they read as different
   materials, which is exactly the thing a brand system exists to prevent.

   Now there is ONE rule. A surface opts in by adding .tex-dark, and may tune
   only the BLOOM — its strength and where it is thrown from. The grid itself is
   not negotiable: 44px, the same pitch as the tooth on the white paper. Page
   and panel are the same material, lit differently.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --grid:       44px;
  --grid-ink:   rgba(255,255,255,.055);
  --grid-fade:  radial-gradient(130% 105% at 50% 0%, #000 32%, transparent 94%);
}

.tex-dark{ position:relative; overflow:hidden; }
.tex-dark::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(var(--bloom-size, 62% 46%) at var(--bloom-at, 50% -8%),
                    rgba(0,85,232, var(--bloom, .30)), transparent 70%),
    linear-gradient(var(--grid-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-ink) 1px, transparent 1px);
  background-size: 100% 100%, var(--grid) var(--grid), var(--grid) var(--grid);
  -webkit-mask: var(--grid-fade);
          mask: var(--grid-fade);
}
/* content rides above the texture, always */
.tex-dark > *{ position:relative; z-index:1; }

/* per-surface bloom — the ONLY thing a surface is allowed to change */
.stage-dark        { --bloom:.34; --bloom-at:20% -6%; --bloom-size:52% 46%; }
.promise           { --bloom:.26; --bloom-at:50% -6%; --bloom-size:66% 44%; }
.funnel-card:nth-child(1){ --bloom:.34; }
.funnel-card:nth-child(2){ --bloom:.24; }
.funnel-card:nth-child(3){ --bloom:.16; }
.sci-card          { --bloom:.16; --bloom-size:80% 60%; }
.an-prio           { --bloom:.40; --bloom-at:0% 0%;   --bloom-size:80% 100%; }
.bk-top            { --bloom:.42; --bloom-at:0% 0%;   --bloom-size:70% 100%; }
.demo-stage        { --bloom:.18; --bloom-at:50% 50%; --bloom-size:60% 60%; }