/* THE PUBLIC WEBSITE — index.html.
   =================================================================================
   Extracted from the page's own inline `<style>` block so it gets a `?v=` stamp, can be
   shared with a second marketing page, and lets index.html be read as a document rather than
   a stylesheet with markup at the bottom.

   Deliberately does not load CSS/tokens.css (a standing decision, CSS/tokens.css:14) — that
   would drag in the z-index scale, duration tokens and OKR health aliases for a page with no
   application in it. Instead this file mirrors the application's token NAMES with its own
   measured values, so the two surfaces cannot drift apart by accident.

   The theme key is shared on purpose — `pma_theme`, the same key JS/core/theme.js uses — so a
   choice made on either surface survives the click into the other. One default is different
   and intentional: the application defaults to dark everywhere, this page defaults to light,
   because the approved design is the light one and a first-time visitor should see it. A
   stored preference always wins in both directions; only the no-preference case differs.

   Blue first: gold is emphasis and never a call to action (CSS/alt/alt-tokens.css:49). On
   this page gold appears in exactly three places — the brand mark, the hero system's core,
   and the warm nodes in the closing constellation. If a fourth appears, one of them is wrong.
   ================================================================================= */

/* ---------------------------------------------------------------- tokens: DARK */
/* :root is dark and .theme-light is light, matching the application's convention
   rather than inverting it here. The page's light DEFAULT is achieved by the boot
   script adding .theme-light when nothing is stored — not by swapping these blocks,
   which would have made every selector disagree with the rest of the repository. */
:root{
  --bg:#0a1628;
  --surface:#101f36;
  --surface-2:#16283f;
  --surface-3:#1b2f4a;

  --border:#294263;
  --border-mid:#395379;
  --border-strong:#4e71a5;

  --text:#f4f6fb;
  --text-2:#a9b6cc;
  --text-3:#8390a5;

  /* Three blue roles, not one — the application learned that white on #3b82f6 is
     3.68:1 and every primary button failed. --blue-fill is the one that carries
     white text; --blue-text is the one that IS text. */
  --blue:#3b82f6;
  --blue-fill:#1e6ff5;
  /* White on this fails AA at 3.59:1 against the 4.5:1 a 14.5px/600 label needs. Safe as a
     hover for text and borders, not safe as a fill under white — `.btn-lead:hover` and
     `.lp-signin:hover` made primary buttons LESS readable the moment the pointer landed.
     `--blue-press` is the same hue one step deeper instead, 5.38:1, so a filled primary
     darkens on hover — the same pair CSS/login.css carries, mirrored for the same reason. */
  --blue-press:#1a63e0;
  --blue-text:#70a4f8;
  --blue-soft:rgba(59,130,246,.18);
  --blue-line:rgba(59,130,246,.42);

  --cyan:#7dd3fc;
  --cyan-soft:rgba(125,211,252,.20);
  --green:#17b35e;

  --ring:#3b82f6;

  --sh-sm:0 4px 14px rgba(0,0,0,.22);
  --sh:0 10px 30px rgba(0,0,0,.34);
  --sh-lg:0 24px 60px rgba(0,0,0,.46);
  /* The primary button's own shadow is tinted with its own colour, not black — a
     black shadow under a saturated fill reads as dirt. */
  --sh-blue:0 4px 12px rgba(30,111,245,.18);

  /* A section that is dark in BOTH themes — trust, and the closing call. In dark
     mode it cannot be "the dark one", so it becomes the raised one instead and
     keeps a visible edge. */
  --dark-bg:#0f2544;
  --dark-bg-2:#16324f;
  /* A stronger edge in dark mode. On a navy page these two panels can no longer be "the
     dark ones", so the edge is what keeps them reading as statements rather than as two
     more cards. */
  --dark-line:rgba(255,255,255,.17);
  --dark-text:#f4f6fb;
  --dark-text-2:#aebdd4;
  --dark-chip:rgba(255,255,255,.07);
}

/* --------------------------------------------------------------- tokens: LIGHT */
:root.theme-light, body.theme-light{
  --bg:#e7ebf2;
  --surface:#ffffff;
  --surface-2:#f2f5fa;
  --surface-3:#e9eef7;

  --border:#dbe3ef;
  --border-mid:#c8d3e4;
  --border-strong:#aebbd0;

  --text:#0d1b2e;
  --text-2:#45536a;
  --text-3:#5d6a7e;

  --blue:#1d63f0;
  --blue-fill:#1d63f0;
  /* Light mode's --blue-hover was ALREADY safe at 6.11:1, so this is the same value. It is
     restated under its own name so the two themes cannot drift apart the next time somebody
     unifies the hover — the dark half is the one that must never go back to --blue-hover. */
  --blue-press:#1857dc;
  --blue-text:#1550cf;
  --blue-soft:rgba(29,99,240,.10);
  --blue-line:rgba(29,99,240,.30);

  --cyan:#0e8fb8;
  --cyan-soft:rgba(14,143,184,.12);
  --green:#157a3d;

  --ring:#1550cf;

  --sh-sm:0 1px 2px rgba(16,32,56,.05), 0 4px 14px rgba(16,32,56,.06);
  --sh:0 10px 30px rgba(16,32,56,.10);
  --sh-lg:0 24px 60px rgba(16,32,56,.16);
  --sh-blue:0 4px 12px rgba(29,99,240,.16);

  --dark-bg:#0b2044;
  --dark-bg-2:#14315b;
  --dark-line:rgba(255,255,255,.11);
  --dark-text:#f7f9fd;
  --dark-text-2:#b7c6dc;
  --dark-chip:rgba(255,255,255,.08);
}

/* --------------------------------------------------------------------- shared */
:root{
  /* Measured off the approved design: a panel corner is ~11px and a card corner ~6px at
     its scale. 26/14 read consumer-app soft against a page whose whole character is crisp
     and technical. */
  --r-sm:8px;
  --r:10px;
  --r-lg:14px;
  --r-xl:18px;
  --r-pill:999px;

  --t-fast:180ms;
  --t:280ms;
  /* The application's signature curve — a fast start that settles rather than
     arrives (CSS/tokens.css:55). Reused verbatim so motion here feels like motion
     there. */
  --ease:cubic-bezier(.22,.7,.28,1);

  --display:'Space Grotesk', system-ui, -apple-system, sans-serif;
  --body:'Inter', system-ui, -apple-system, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;

  --gutter:32px;
  --measure:1280px;

  /* The layer scale, mirrored from CSS/tokens.css with its canonical values — this page
     does not load that file, and a raw z-index here is the start of the drift the scale
     exists to prevent. Only the three rungs this page uses are restated. */
  --z-sticky:20;
  --z-float:60;
  --z-dialog:300;
}

/* ----------------------------------------------------------------------- reset */
*, *::before, *::after{ box-sizing:border-box; }
html, body{ margin:0; padding:0; }
/* [hidden] comes from the browser's own stylesheet, so ANY author `display` outranks
   it and the element keeps painting with the attribute set. CSS/base.css settles this
   for every application page; this page does not load that file, so it settles it
   here. The mobile drawer depends on it. */
[hidden]{ display:none !important; }

html{
  /* The one place a scroll offset belongs: the sticky header is 72px and an anchor
     jump would otherwise land the heading underneath it. Doing this in CSS rather
     than in JS means it also works for a pasted #fragment URL on first load. */
  scroll-padding-top:96px;
}
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; font-size:inherit; }
img, svg{ max-width:100%; }

/* Every interactive thing on this page is a link or a button, so this rule is the
   whole keyboard story. 2px and offset so it clears the control's own border; the
   blue is the measured --ring, not the browser default, which on a navy header is
   invisible. */
:focus-visible{
  outline:2px solid var(--ring);
  outline-offset:3px;
  border-radius:6px;
}

/* The skip link. No page in this repository had one; a page whose header carries six
   section links is where one earns its place. */
.skip{
  position:absolute; left:16px; top:-100px; z-index:calc(var(--z-sticky) + 1);
  padding:12px 18px; border-radius:var(--r-sm);
  background:var(--blue-fill); color:#fff; font-weight:600; font-size:14px;
  box-shadow:var(--sh);
}
.skip:focus{ top:16px; }

.wrap{ max-width:var(--measure); margin:0 auto; padding:0 var(--gutter); }

/* ================================================================== typography */
h1, h2, h3, h4{ font-family:var(--display); margin:0; letter-spacing:-.015em; }

h1{
  font-weight:700;
  font-size:clamp(34px, 4vw, 50px);
  line-height:1.04;
  margin:0 0 22px;
}
/* The second and third lines of the headline are the promise, so they carry the
   blue. A gradient text-fill was rejected: it fails at 200% zoom in Safari and the
   flat brand blue is what the approved design shows. */
h1 .hl{ color:var(--blue-text); }

h2{
  font-weight:700;
  font-size:clamp(26px, 2.9vw, 36px);
  line-height:1.12;
  margin:0 0 16px;
}
/* h3 is the card-title level and there are forty of them, so it is the base. The two
   sections that want a bigger one say so. */
h3{ font-weight:700; font-size:15px; line-height:1.3; margin:0; letter-spacing:-.005em; }

/* The mono eyebrow. Carried over from the previous design — it is the strongest
   existing bridge between this page and the application, which uses the same mono
   token for its kind-labels. It lost the glowing gold dot: on a blue-first page the
   accent belongs to the accent colour. */
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--blue-text);
  margin:0 0 16px;
}

.lede{
  font-size:17px;
  line-height:1.6;
  color:var(--text-2);
  max-width:52ch;
  margin:0 0 26px;
}
.fine-note{ font-size:13px; color:var(--text-3); margin:0; }
/* Two modifiers, so a lede's bottom margin stops being written five times in the markup
   with two different values for the same job. */
.lede.tight{ margin-bottom:0; }
.lede.gap{ margin-bottom:32px; }

/* A long line is capped on the TEXT, never on the page. */

/* ===================================================================== buttons */
/* Three roles and one rule: exactly one primary per surface. The application learned
   this on a panel that painted five blue blocks down one column. */
.btn-lead, .btn-quiet, .btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:13px 24px;
  border-radius:var(--r-sm);
  font-family:var(--body); font-size:15px; font-weight:600; line-height:1.2;
  white-space:nowrap; cursor:pointer; text-align:center;
  border:1px solid transparent;
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease);
}
.btn-lead{
  background:var(--blue-fill); color:#fff; box-shadow:var(--sh-blue);
}
.btn-lead:hover{ background:var(--blue-press); transform:translateY(-1px); }
.btn-quiet{
  background:var(--surface); color:var(--text); border-color:var(--border-mid);
  box-shadow:var(--sh-sm);
}
.btn-quiet:hover{ border-color:var(--border-strong); }
.btn-ghost{
  background:transparent; color:var(--text-2); border-color:transparent; padding:13px 14px;
}
.btn-ghost:hover{ color:var(--text); background:var(--surface-2); }

.cta-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:0 0 18px; }

/* The quiet text action with an arrow — "See the full process", "Explore the suite".
   The arrow is a separate span rather than ::after content so a screen reader is not
   handed a bare glyph, and so it can travel on hover. */
.link-go{
  display:inline-flex; align-items:center; gap:7px;
  font-size:15px; font-weight:600; color:var(--blue-text);
  min-height:44px;
}
.link-go .arw{ transition:transform var(--t-fast) var(--ease); }
.link-go:hover .arw{ transform:translateX(3px); }

/* ==================================================================== surfaces */
/* Resting surface: --surface ground, one soft border, generous radius, NO shadow in
   dark mode. Shadows are for things that float. In light mode a card on a tinted
   ground gets the smallest one, because a 1px border alone on near-white does not
   separate the two. */
.panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:44px;
}
:root.theme-light .panel, body.theme-light .panel{ box-shadow:var(--sh-sm); }


/* An icon in a rounded square — the suite flow, the process steps, the trust rows.
   One treatment, three sizes. */
.ico{
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto; color:var(--text);
}
.ico svg{ width:22px; height:22px; flex:0 0 auto; }
.ico.tile-ico{
  width:52px; height:52px; border-radius:var(--r-sm);
  background:var(--surface); border:1px solid var(--border);
}
.ico.round{
  width:44px; height:44px; border-radius:var(--r-pill);
  background:var(--surface-2); border:1px solid var(--border);
}
.ico.plain svg{ width:26px; height:26px; }
.ico.blue{ color:var(--blue-text); }

/* Every icon on this page is drawn in the application's hand: viewBox 0 0 24 24,
   fill none, stroke currentColor, stroke-width 1.9, round caps and joins. Setting
   it here rather than on 60 elements is the only reason that stays true. */
.i{
  fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ====================================================================== header */
.lp-head{
  position:sticky; top:0; z-index:var(--z-sticky);
  /* PLAIN DECLARATION FIRST. An engine that does not know color-mix() discards the whole
     declaration, and a sticky bar with no background of its own has the page scrolling under
     its text — on the one surface no visitor signs in to see. Opaque --surface is the honest
     fallback: it loses the 14% translucency, nothing else. */
  background:var(--surface);
  background:color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--border);
}
.lp-head-in{
  max-width:var(--measure); margin:0 auto; padding:0 var(--gutter);
  height:72px; display:flex; align-items:center; gap:20px;
}

.lp-brand{
  display:flex; align-items:center; gap:11px; padding:5px 0;
  /* NEVER SHRINK. As a shrinkable flex item with `white-space:nowrap` text, this went
     narrower than its own wordmark and the text painted outside the box, through the
     navigation. The boxes kept a 20px gap the whole time — which is why this has to be
     seen, not measured. */
  flex:0 0 auto; min-width:0;
}
.lp-brand-mark{ width:34px; height:34px; flex:0 0 auto; }
.lp-brand-txt{ display:flex; flex-direction:column; min-width:0; }
.lp-brand-name{
  font-family:var(--display); font-weight:700; font-size:17px; line-height:1.15;
  letter-spacing:-.01em; color:var(--text); white-space:nowrap;
}
.lp-brand-tag{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-3); white-space:nowrap; margin-top:2px;
}

/* Five items. `margin:0 auto` keeps the group centred between the brand and the actions
   whatever the right-hand side weighs.

   The label is "AI", not the section's longer eyebrow wording, for a measured reason: this
   row is `min-width:0` with `white-space:nowrap` links, so a long item squeezes the BOX while
   the TEXT keeps its width and spills over `.lp-right` — the document never overflows and box
   arithmetic looks fine while the real text-to-text clearance goes negative and the neighbour
   paints over the link. Neither an overflow check nor a wrap check can see that;
   `landing-probe.py` measures the clearance directly. If the longer wording is ever wanted,
   the lever is `.lp-nav a{ padding:0 16px }` — a design decision, not a tidy-up. */
.lp-nav{ display:flex; align-items:center; gap:4px; margin:0 auto; min-width:0; }
.lp-nav a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 16px;
  border-radius:var(--r-sm);
  font-size:14.5px; font-weight:500; color:var(--text-2); white-space:nowrap;
  transition:color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.lp-nav a:hover{ color:var(--text); background:var(--surface-2); }

/* THE CURRENT SECTION, MARKED, NOT JUST SCROLLED TO. A nav that reaches ten sections
   without saying which one is under the reader is a menu you get lost in. Colour AND a
   line, never colour alone — the same rule the application states for its own nav
   (sys_design-system.md §21c). Set by the IntersectionObserver at the foot of the page;
   if it never runs (no script, or a browser without one), no link ever carries
   `aria-current` and the nav stays a complete, working set of anchors regardless — this
   mark is purely additive, never load-bearing for navigation itself. */
.lp-nav a[aria-current]{
  color:var(--blue-text);
  box-shadow:inset 0 -2px 0 0 var(--blue-fill);
}

/* The theme control and ONE action. With Sign in gone there is no pair of adjacent
   buttons to keep tight, so the setting and the invitation get real air between them
   instead of reading as a two-button cluster. */
.lp-right{ display:flex; align-items:center; gap:16px; flex:0 0 auto; }

/* The theme control. Two segments, matching the approved design and matching the
   application, which has Light and Dark and no System option — inventing a third
   state here would be a second answer to a question JS/core/theme.js already
   answers. It is a radio group, not two buttons, because it is one setting. */
.lp-theme{
  display:flex; align-items:center; gap:9px;
}
.lp-theme > .lbl{
  font-size:13.5px; font-weight:500; color:var(--text-3);
}
.lp-seg{
  display:flex; align-items:center; gap:2px; padding:3px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-pill);
}
.lp-seg button{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:32px; padding:0;
  border:1px solid transparent; border-radius:var(--r-pill);
  background:transparent; color:var(--text-3); cursor:pointer;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease);
}
.lp-seg button svg{ width:15px; height:15px; }
.lp-seg button:hover{ color:var(--text); }
/* The selected segment is a raised chip AND aria-pressed — never colour alone. */
.lp-seg button[aria-pressed="true"]{
  background:var(--surface); color:var(--blue-text); border-color:var(--border-mid);
  box-shadow:var(--sh-sm);
}

/* The header's one action is Sign in: the row has always held exactly one button, since two
   buttons plus a segmented theme control is a crowded row. It reads "Sign in" and goes to
   login.html, because the people who arrive at this domain most often already have an
   account and the header is the first place anyone looks for the way in. */
.lp-signin{
  display:inline-flex; align-items:center; min-height:44px; padding:0 18px;
  border-radius:var(--r-sm); background:var(--blue-fill); color:#fff;
  font-size:14.5px; font-weight:600; white-space:nowrap;
  box-shadow:var(--sh-blue);
  transition:background var(--t-fast) var(--ease);
}
.lp-signin:hover{ background:var(--blue-press); }

/* The menu button. 44x44 because this is a touch-first control and there is no
   density argument on a marketing page to trade against it. */
.lp-burger{
  display:none;
  width:44px; height:44px; align-items:center; justify-content:center;
  border:1px solid var(--border-mid); border-radius:var(--r-sm);
  background:var(--surface); color:var(--text); cursor:pointer;
}
.lp-burger svg{ width:20px; height:20px; }

/* ------------------------------------------------------- the mobile navigation */
/* A real surface, not the desktop nav squeezed: full-width rows at 52px, the theme
   control and the two account actions all present. */
.lp-drawer{
  position:fixed; inset:0; z-index:var(--z-dialog);
  display:flex; flex-direction:column;
}
.lp-drawer-scrim{
  position:absolute; inset:0;
  background:rgba(6,14,28,.55);
  animation:lpFade var(--t) var(--ease);
}
.lp-drawer-sheet{
  position:relative; margin-top:0;
  background:var(--surface); border-bottom:1px solid var(--border);
  box-shadow:var(--sh-lg);
  padding:14px 20px 22px;
  /* Always leave a strip of scrim: in landscape the sheet filled the viewport and
     tap-outside-to-close silently stopped existing. */
  max-height:calc(100% - 56px); overflow-y:auto;
  animation:lpDrop var(--t) var(--ease);
}
@keyframes lpFade{ from{ opacity:0; } }
@keyframes lpDrop{ from{ opacity:0; transform:translateY(-10px); } }

.lp-drawer-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; min-height:48px; margin-bottom:8px;
}
.lp-drawer nav{ display:flex; flex-direction:column; }
.lp-drawer nav a{
  display:flex; align-items:center; min-height:52px;
  border-bottom:1px solid var(--border);
  font-size:17px; font-weight:600; color:var(--text);
}
.lp-drawer nav a:last-child{ border-bottom:0; }
/* The same five sections the desktop row hides behind "About" — flat here, since a
   scrolling sheet has no width to save, with this one plain label between them so the
   grouping still reads without a second disclosure to operate on a phone. Not a link, not
   a button: a row that names what the next five rows are. */
.lp-drawer-subhead{
  display:block; padding:14px 0 2px; font-size:12.5px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--text-3);
}
/* THE CURRENT SECTION — same mark as the desktop nav, colour plus a line, set by the same
   IntersectionObserver and purely additive if it never runs. */
.lp-drawer nav a[aria-current]{
  color:var(--blue-text); box-shadow:inset 3px 0 0 0 var(--blue-fill);
}
.lp-drawer-acts{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.lp-drawer-acts .btn-lead{ width:100%; }
.lp-drawer-theme .lbl{ font-size:15px; font-weight:600; color:var(--text); }
.lp-drawer-theme{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:18px; padding-top:16px; border-top:1px solid var(--border);
}
.lp-drawer-theme .lp-seg button{ width:48px; height:44px; }
.lp-close{
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border-mid); border-radius:var(--r-sm);
  background:var(--surface); color:var(--text); cursor:pointer;
}
.lp-close svg{ width:18px; height:18px; }

/* ======================================================================== hero */
.hero-sec{ padding:64px 0 0; }
.hero{
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
  gap:44px; align-items:center;
  border-radius:var(--r-xl);
  padding:56px 52px;
  background:
    radial-gradient(ellipse 620px 420px at 88% 18%, var(--blue-soft), transparent 68%),
    var(--surface);
  border:1px solid var(--border);
}
:root.theme-light .hero, body.theme-light .hero{ box-shadow:var(--sh-sm); }

/* ================= THE STRIDE HERO ==================================================
   Dark in both themes, on purpose, with the tokens that already exist for it: the brand
   boards put the headline on navy over a horizon, and a hero that flipped to white in light
   mode would be a different design twice rather than one. Everything inside it takes its
   colour from `--dark-*`, never from `--text`/`--surface`, which follow the theme.

   The scene is behind everything and reaches nobody: `aria-hidden` + `pointer-events:none`,
   since it is atmosphere and a screen reader that announced a mountain range would be reading
   furniture. */
.hero-dark{
  position:relative; isolation:isolate; overflow:hidden;
  border-color:var(--dark-line);
  background:linear-gradient(160deg, var(--dark-bg-2), var(--dark-bg) 72%);
  padding:64px 52px 58px;
  /* One column now: the scene is the backdrop, not a second column beside the words. */
  display:block;
}
.hero-scene{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  /* The ridge sits along the bottom; the copy sits above its own gradient scrim so the text
     contrast is never at the mercy of where a peak happens to land. */
  -webkit-mask-image:linear-gradient(180deg, transparent 2%, #000 26%);
          mask-image:linear-gradient(180deg, transparent 2%, #000 26%);
  opacity:1;
}
.hero-scene svg{ width:100%; height:100%; display:block; }
/* The scrim is what makes the text safe, not luck about the artwork — left-weighted, since
   the copy is left and the sunrise is deliberately right. In front of the scene, behind the
   words: an element beats a `::before` at equal z-index, so `z-index:0` with the copy at 1 is
   what actually puts it between them. */
.hero-dark::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(100deg, var(--dark-bg) 0%, rgba(11,32,68,.74) 34%, rgba(11,32,68,.04) 60%, transparent 74%);
}
.hero-dark .hero-copy{ position:relative; z-index:1; max-width:660px; }
.hero-dark h1{ color:var(--dark-text); }
.hero-dark .lede{ color:var(--dark-text-2); max-width:56ch; }
.hero-eyebrow{
  color:var(--cyan);
  /* The supporting statement, set as an eyebrow rather than a second headline — sys_branding.md
     allows one positioning line per surface and this page's headline is the other one. */
}

/* The brand gradient, used once, on the word the headline turns on: blue to cyan to green is
   the mark's own run of colour, and spending it on one word is what makes it read as the brand
   rather than decoration. A flat `--cyan` fallback is declared first for any engine without
   `background-clip:text`, which would otherwise paint the word transparent and lose it. */
.hl-grad{
  color:var(--cyan);
  background:linear-gradient(96deg, #2E8DF7 4%, #38BDF8 46%, #10B981 96%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  /* Descenders in "outcomes." get clipped by background-clip on some engines without this. */
  padding-bottom:.06em;
}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  .hl-grad{ -webkit-text-fill-color:currentColor; background:none; color:var(--cyan); }
}

.principles-dark{ color:var(--dark-text-2); }
.principles-dark .i{ color:var(--green); }
.btn-on-dark{
  color:var(--dark-text); border-color:var(--dark-line); background:var(--dark-chip);
}
.btn-on-dark:hover{ border-color:var(--cyan); color:#fff; }

/* ================= THE CAPABILITY STRIP =============================================
   Six real surfaces, each a link to the section that explains it — the boards show this as a
   band directly under the hero and it is the fastest true answer to "what is this". */
.cap-strip{
  display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:12px;
  margin-top:-30px;            /* it overlaps the hero's lower edge, as the boards show */
  position:relative; z-index:2;
}
.cap{
  display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  padding:16px 16px 14px; min-width:0;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  text-decoration:none; box-shadow:var(--sh-sm);
  transition:transform var(--dur,.18s) ease, border-color var(--dur,.18s) ease,
             box-shadow var(--dur,.18s) ease;
}
.cap b{ font-size:14px; color:var(--text); font-weight:650; }
.cap span:last-child{ font-size:12.5px; color:var(--text-3); }
.cap-ico{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px; margin-bottom:5px;
  background:linear-gradient(140deg, rgba(46,141,247,.16), rgba(16,185,129,.16));
  color:var(--blue-text);
}
.cap-ico .i{ width:18px; height:18px; }
.cap:hover{ transform:translateY(-2px); border-color:var(--blue-line); box-shadow:var(--sh); }
.cap:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
/* THE REDUCED-MOTION ANSWER FOR .cap IS NOT HERE. This sheet keeps ONE block that names
   everything that moves (see the bottom of the file) — motion-system.test.js asserts that, and a
   second local block is how a page ends up with two half-answers instead of one whole one. */

@media (max-width:1023px){
  .cap-strip{ grid-template-columns:repeat(3, minmax(0,1fr)); margin-top:-18px; }
  .hero-dark{ padding:52px 34px 46px; }
}
@media (max-width:639px){
  .cap-strip{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-top:-12px; }
  .hero-dark{ padding:40px 22px 36px; }
  .hero-dark .lede{ max-width:none; }
}

.hero-copy{ min-width:0; }

/* The three principles. Checks rather than bullets, because each is a commitment the
   rest of the page has to pay for. */
.principles{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin:22px 0 0; padding:0; list-style:none;
}
.principles li{
  display:flex; align-items:center; gap:9px;
  font-size:14.5px; font-weight:500; color:var(--text-2);
}
.principles svg{ width:17px; height:17px; flex:0 0 auto; color:var(--blue-text); }

/* =================================================================== a section */
.sec{ padding:36px 0; }
/* The two-column section: copy on the left, the thing being explained on the right. */
.split{
  display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:48px; align-items:center;
}
.split.top{ align-items:start; }

/* ============================================================== the problem */
.prob-grid{
  display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:14px;
}
.prob-card{
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r); padding:24px 16px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  min-width:0;
}
.prob-card .ico{ color:var(--text); }
.prob-card h3{ font-size:15px; min-height:39px; }
.prob-card p{ font-size:13.5px; line-height:1.5; color:var(--text-2); margin:0; }

/* ============================================================ how we think */
.think-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px;
}
.think-item{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r); padding:22px; min-width:0;
}
.think-item h3{ margin-bottom:6px; }
.think-item p{ font-size:14px; line-height:1.55; color:var(--text-2); margin:0; }
.think-close{
  margin:24px 0 0; font-family:var(--display); font-weight:700; font-size:18px;
  color:var(--text); letter-spacing:-.01em;
}

/* ============================================================= how we build */
/* The process is a five-step rail. On desktop the numbers sit on one dotted line
   above the steps; below 900px the whole thing turns and the line runs down the
   left. Same markup, same order, one grid switch — a second copy of the sequence for
   the phone is a second place for the copy to drift. */
.steps{
  display:grid; grid-template-columns:repeat(5, minmax(0,1fr));
  column-gap:12px; row-gap:0;
}
.step{
  display:grid; grid-template-areas:'num' 'ico' 'txt';
  justify-items:center; align-content:start; text-align:center;
  min-width:0; position:relative;
}
.step-num{
  grid-area:num;
  width:30px; height:30px; border-radius:var(--r-pill);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface); border:1.5px solid var(--blue-line);
  font-family:var(--mono); font-size:11px; font-weight:500; color:var(--blue-text);
  position:relative; z-index:1;
}
/* The rail. A pseudo-element on the step rather than an element of its own, so it
   cannot end up orphaned at the start of a wrapped row — and the first and last
   halves are trimmed so the line starts and stops at a number. */
.step::before{
  content:''; position:absolute; top:15px; left:0; right:0; height:0;
  border-top:1.5px dashed var(--blue-line);
  z-index:0;
}
.step:first-child::before{ left:50%; }
.step:last-child::before{ right:50%; }
.step .ico{ grid-area:ico; margin:18px 0 12px; }
.step-txt{ grid-area:txt; }
.step-txt h3{ margin-bottom:6px; }
.step-txt p{ font-size:13.5px; line-height:1.5; color:var(--text-2); margin:0; }

/* The pull quote. Tinted rather than white so it reads as an aside, and the mark is
   a real glyph in the display face rather than an image. */
/* The approach row: the process panel, and the quote beside it at the same height. */
.approach-row{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,278px);
  gap:20px; align-items:stretch;
}
.quote{
  background:var(--blue-soft); border:1px solid var(--blue-line);
  border-radius:var(--r-xl); padding:34px 30px;
  display:flex; flex-direction:column; justify-content:center; min-width:0;
}
.quote-mark{
  font-family:var(--display); font-weight:700; font-size:56px; line-height:.55;
  color:var(--blue-text); margin:0 0 18px;
}
.quote blockquote{
  margin:0 0 14px; font-family:var(--display); font-weight:700;
  font-size:22px; line-height:1.22; letter-spacing:-.015em; color:var(--text);
}
.quote p{ margin:0; font-size:15px; line-height:1.55; color:var(--text-2); }

/* ================================================================ solutions */
/* `.caps` keeps its name from the previous design. It is the same idea — the grid of
   things this company does — and renaming a class because the content changed leaves
   two vocabularies in one repository. minmax(0, 1fr) and nothing else: a bare
   `minmax(340px, …)` track cannot shrink below its own floor, which is how the old
   grid pushed 55px past the right edge of a 320px phone. */
.caps{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.cap{
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r); padding:24px 22px; min-width:0;
  display:flex; flex-direction:column; gap:10px;
}
.cap > .ico{ align-self:flex-start; }
.cap h3{ font-size:17px; }
.cap p{ font-size:14px; line-height:1.55; color:var(--text-2); margin:0; }

/* ============================================ software team productivity */
.eng-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 32px; }
.eng-item{ display:flex; gap:13px; align-items:flex-start; min-width:0; }
.eng-item .dot{
  width:7px; height:7px; border-radius:50%; background:var(--blue);
  margin-top:8px; flex:0 0 auto;
}
.eng-item h3{ font-size:15px; margin-bottom:4px; }
.eng-item p{ font-size:14px; line-height:1.5; color:var(--text-2); margin:0; }
.eng-close{
  margin:30px 0 0; padding-top:24px; border-top:1px solid var(--border);
}
.eng-close b{
  display:block; font-family:var(--display); font-weight:700; font-size:21px;
  letter-spacing:-.015em; color:var(--text); margin-bottom:6px;
}
.eng-close span{ font-size:15px; color:var(--text-2); }

/* ======================================================================= AI */
.ai-cols{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.ai-col{
  border-radius:var(--r); padding:26px 24px; min-width:0;
  border:1px solid var(--border); background:var(--surface-2);
}
/* The deterministic column carries at least as much weight as the AI one — that is
   the design of the section, not a decoration. It gets the accent edge. */
.ai-col.det{ background:var(--blue-soft); border-color:var(--blue-line); }
.ai-col > .h{ display:flex; align-items:center; gap:11px; margin-bottom:4px; }
.ai-col > .h .ico{ flex:0 0 auto; }
.ai-col h3{ font-size:17px; }
.ai-col > p{ font-size:14px; color:var(--text-3); margin:0 0 16px; }
.ai-col ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.ai-col li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:14px; line-height:1.45; color:var(--text-2);
}
.ai-col li svg{ width:15px; height:15px; flex:0 0 auto; margin-top:3px; color:var(--blue-text); }
.ai-rule{
  margin:22px 0 0; padding:22px 24px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r);
}
.ai-rule b{
  display:block; font-family:var(--display); font-weight:700; font-size:19px;
  line-height:1.25; letter-spacing:-.015em; color:var(--text); margin-bottom:12px;
}
.ai-facts{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px; }
.ai-facts li{
  font-size:14px; line-height:1.5; color:var(--text-2);
  padding-left:16px; position:relative;
}
.ai-facts li::before{
  content:''; position:absolute; left:0; top:8px;
  width:5px; height:5px; border-radius:50%; background:var(--blue);
}

/* ==================================================== the STRIDE lockup ===== */
/* The mark plus live text, sat above the section's own split so #suite identifies
   itself before its content does. Live text per sys_branding.md's lockup rule — never
   a wordmark baked into a raster, so it is themeable, selectable and reaches a screen
   reader. The mark carries the brand's own blue/green gradient (it is one of the
   "small number of deliberate brand moments" sys_branding.md allows); the word stays
   on the page's ordinary heading colour rather than adding a second palette next to
   the token system. */
.stride-lockup{
  display:flex; align-items:center; gap:10px; margin:0 0 26px;
}
.stride-lockup-mark{ width:28px; height:28px; flex:0 0 auto; }
.stride-lockup-word{
  font-family:var(--display); font-weight:700; font-size:19px;
  letter-spacing:.01em; color:var(--text);
}

/* ============================================================ the suite flow */
/* SEVEN NODES, BUILT FROM HTML, NOT ONE WIDE SVG. A single composition would have to
   be scaled until its labels were unreadable on a phone; a wrapping flex row simply
   becomes a column and the connector turns with it. */
.flow{
  display:flex; align-items:flex-start; gap:0;
  padding:8px 0 0;
}
.flow-step{
  flex:1 1 0; min-width:0; position:relative;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:9px;
  padding:0 4px;
}
/* The node is above the connector, and it has to say so: a positioned pseudo-element paints
   in a later layer than a static box regardless of markup order, so without
   `position:relative; z-index:1` here the line and pulsing dot would paint straight across
   the node's own face. */
.flow-node{
  width:52px; height:52px; border-radius:var(--r-sm);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border-mid);
  box-shadow:var(--sh-sm); color:var(--text);
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
  position:relative; z-index:1;
}
.flow-node svg{ width:24px; height:24px; }
.flow-label{
  font-family:var(--display); font-weight:700; font-size:13.5px; line-height:1.2;
  color:var(--text);
}
.flow-txt-wrap{ display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0; }
.flow-text{ font-size:11.5px; line-height:1.35; color:var(--text-3); margin:0; }

/* The connector between two nodes: a line and an arrowhead, drawn with borders so it needs
   no SVG and no extra node in the flex row.

   Edge to edge, not centre to centre: one step width is the distance between two node
   centres, so a naive `left:-50%; width:100%` line buries half a node at each end. The
   visible line is that span minus the node's own width — a subtraction, not a fudge factor,
   so it holds at every width the row stays horizontal. The arrowhead sits at the step
   boundary, the mid-point of the gap either way, so it needed no change. */
.flow-step + .flow-step::before{
  content:''; position:absolute; top:25px;
  left:calc(-50% + 26px); width:calc(100% - 52px); height:0;
  border-top:1.5px solid var(--border-mid);
  z-index:0;
}
.flow-step + .flow-step::after{
  content:''; position:absolute; top:21px; left:calc(-1px);
  width:7px; height:7px;
  border-top:1.5px solid var(--border-mid); border-right:1.5px solid var(--border-mid);
  transform:rotate(45deg);
  z-index:0;
}

/* The signal — the whole claim of the section made visible. One dot travels the row and
   each node answers as it passes, because the point is that one piece of work moves through
   seven contexts rather than seven things happening.

   It sits on the connector, not on the node it left: a dot centred on the previous node
   would now paint underneath it, so the dot has to move onto the line. A quarter of the way
   along the connector, derived rather than guessed — the previous node's right edge is
   `-50% + 26px`, the connector is `100% - 52px` long, so a quarter along minus half the dot's
   own width is:
     -50% + 26px + 25% - 13px - 4.5px  =  -25% + 8.5px
   A quarter, not the middle, since the middle is where the arrowhead is; a fraction, not a
   constant, so the clearance grows with the gap instead of colliding at the narrowest width. */
.flow-dot{
  position:absolute; top:22px; left:calc(-25% + 8.5px);
  width:9px; height:9px; border-radius:50%;
  background:var(--border-mid);
  animation:flowPulse 8s ease-in-out infinite;
  z-index:0;
}
.flow-step:first-child .flow-dot{ display:none; }
@keyframes flowPulse{
  0%, 100%{ background:var(--border-mid); box-shadow:0 0 0 0 var(--blue-soft); transform:scale(1); }
  6%      { background:var(--blue); box-shadow:0 0 0 5px var(--blue-soft); transform:scale(1.15); }
  20%     { background:var(--border-mid); box-shadow:0 0 0 0 var(--blue-soft); transform:scale(1); }
}
.flow-step:nth-child(2) .flow-dot{ animation-delay:0s; }
.flow-step:nth-child(3) .flow-dot{ animation-delay:.5s; }
.flow-step:nth-child(4) .flow-dot{ animation-delay:1s; }
.flow-step:nth-child(5) .flow-dot{ animation-delay:1.5s; }
.flow-step:nth-child(6) .flow-dot{ animation-delay:2s; }
.flow-step:nth-child(7) .flow-dot{ animation-delay:2.5s; }

/* THE RETURN LEG. Not a sixth arrow — a dashed path that leaves the last node,
   travels back under the row and rises into the four contexts the same task is
   already in. It carries the "same work, no copy" claim: nothing new is created on
   the way back. */
.flow-return{
  position:relative; height:46px; margin:14px 0 0;
}
.flow-return .rail{
  position:absolute; left:7.14%; right:7.14%; bottom:11px; height:0;
  border-top:1.5px dashed var(--blue-line);
}
.flow-return .riser, .flow-return .drop{
  position:absolute; bottom:11px; height:35px; width:0;
  border-left:1.5px dashed var(--blue-line);
}
/* Only the risers get an arrowhead. The drop leaves the last node and needs none — the
   work is not arriving there, it is leaving. */
.flow-return .riser::after{
  content:''; position:absolute; top:-1px; left:-4.5px;
  width:7px; height:7px;
  border-top:1.5px solid var(--blue-line); border-left:1.5px solid var(--blue-line);
  transform:rotate(45deg);
}
.flow-same{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  padding:0 12px; background:var(--surface);
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--blue-text); white-space:nowrap;
}

/* The phone's stand-in for the return leg. DECLARED HERE, not after the phone media block:
   a media query adds no specificity, so a later flat rule beats it — and when this default
   sat at the bottom of the file it won at every width, which left the phone with neither
   the dashed return path nor the sentence that replaces it. The suite section then read as
   seven disconnected apps, which is the opposite of its argument. */
.flow-same-phone{ display:none; }

/* AI inside the workflow — a strip under the flow, not a section of its own, quiet on
   purpose: the approved design shows a caption, not a card, since a bordered panel with five
   pills is louder than the flow it is annotating. AI supports the system here, it does not
   replace it. */
.ai-strip{
  margin:26px 0 0; padding:18px 0 0; border-top:1px solid var(--border);
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
}
.ai-strip .h{
  display:flex; align-items:center; gap:9px;
  font-family:var(--display); font-weight:700; font-size:15px; color:var(--text);
}
.ai-strip .h svg{ width:18px; height:18px; color:var(--blue-text); flex:0 0 auto; }
.ai-chips{
  display:flex; flex-wrap:wrap; gap:0 6px; justify-content:center;
  font-size:13.5px; color:var(--text-2);
}
.ai-chip{ white-space:nowrap; }
.ai-chip + .ai-chip::before{ content:'\00B7'; margin-right:6px; color:var(--blue); }

/* ============================================== trust + who we help (dark row) */
/* `start`, not `stretch`: the approved design's who-we-help card is genuinely shorter
   than the trust card, and stretching it to match opened a 150px void above its button. */
.trust-row{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:20px;
  align-items:start;
}
/* Dark in both themes. In light mode this is the page's contrast section and it is
   what gives the scroll its rhythm; in dark mode it becomes the raised panel with a
   visible edge, so it is still a panel and not a hole. */
.trust{
  background:linear-gradient(160deg, var(--dark-bg-2), var(--dark-bg));
  border:1px solid var(--dark-line);
  border-radius:var(--r-xl); padding:40px;
  color:var(--dark-text);
}
.trust h2{ color:var(--dark-text); }
.trust > p{ color:var(--dark-text-2); font-size:16px; line-height:1.6; margin:0 0 28px; max-width:46ch; }
.trust-list{ display:flex; flex-direction:column; gap:22px; }
.trust-item{ display:flex; gap:16px; align-items:flex-start; }
.trust-item .ico{
  width:44px; height:44px; border-radius:var(--r-pill);
  background:var(--dark-chip); border:1px solid var(--dark-line);
  color:var(--dark-text);
}
.trust-item .ico svg{ width:21px; height:21px; }
.trust-item h3{ color:var(--dark-text); margin-bottom:5px; }
.trust-item p{ color:var(--dark-text-2); font-size:14px; line-height:1.5; margin:0; max-width:42ch; }

.who{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:40px;
  display:flex; flex-direction:column;
}
:root.theme-light .who, body.theme-light .who{ box-shadow:var(--sh-sm); }
.who h2{ font-size:28px; margin-bottom:26px; }
.who-list{ display:flex; flex-direction:column; gap:24px; }
.who-item{ display:flex; gap:15px; align-items:flex-start; }
.who-item .ico{ color:var(--blue-text); }
.who-item .ico svg{ width:24px; height:24px; }
.who-item h3{ margin-bottom:5px; }
.who-item p{ font-size:14px; line-height:1.5; color:var(--text-2); margin:0; }
.who .btn-lead{ width:100%; margin-top:28px; }

/* =============================================================== the closer */
.closer{
  margin:36px 0 0;
  background:linear-gradient(150deg, var(--dark-bg-2), var(--dark-bg) 62%);
  border:1px solid var(--dark-line);
  border-radius:var(--r-xl);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0.92fr);
  gap:32px; align-items:center;
  padding:52px 48px;
  overflow:hidden;
}
.closer h2{ color:var(--dark-text); max-width:26ch; }
.closer > div > p{
  color:var(--dark-text-2); font-size:17px; line-height:1.6; max-width:44ch; margin:0 0 28px;
}
.closer .fine-note{ color:var(--dark-text-2); opacity:.8; }
/* One action, sized like one: signing in is the only thing this panel can actually do, so it
   takes the lead treatment rather than reading as the leftover half of a two-button row — the
   fine note under it still says what the alternative is. */
.cta-row.one{ gap:0; margin-bottom:20px; }
.cta-row.one .btn-lead{ min-height:54px; padding:15px 34px; font-size:16px; }
.closer-art{ min-width:0; display:flex; justify-content:center; }
.closer-art svg{ width:100%; height:auto; max-width:460px; overflow:visible; }
.cn-link{ fill:none; stroke:rgba(148,190,255,.26); stroke-width:.9; }
.cn-link.warm{ stroke:rgba(249,192,105,.28); }
.cn-dim{ fill:rgba(190,214,255,.34); }

/* ==================================================================== footer */
.lp-foot{
  border-top:1px solid var(--border);
  margin-top:56px; padding:48px 0 40px;
}
.foot-grid{
  display:grid; grid-template-columns:minmax(0,1.3fr) repeat(3, minmax(0,1fr));
  gap:36px 32px;
}
.foot-brand .lp-brand{ margin-bottom:14px; }
.foot-brand p{ font-size:14px; line-height:1.6; color:var(--text-2); margin:0 0 6px; max-width:32ch; }
.foot-brand .dom{ font-family:var(--mono); font-size:12.5px; color:var(--text-3); }
.foot-col h3{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--text-3); margin:0 0 14px;
}
.foot-col ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; }
.foot-col a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:14.5px; color:var(--text-2);
  transition:color var(--t-fast) var(--ease);
}
.foot-col a:hover{ color:var(--text); }
/* Four of these destinations ask an anonymous visitor to sign in. Saying so before
   the click is the difference between a footer and a trap. */
.foot-note{ font-size:12px; color:var(--text-3); margin:8px 0 0; }
.foot-base{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px; margin-top:40px; padding-top:24px; border-top:1px solid var(--border);
}
.foot-base p{ margin:0; font-size:12.5px; color:var(--text-3); }

/* ============================================================== RESPONSIVE
   Four shapes, and nothing between them — a marketing page with a wide, drifting ladder of
   breakpoints is a page nobody can reason about. */

/* Laptop — the nav is the first thing to run out of room. */
@media (max-width:1180px){
  :root{ --gutter:24px; }
  .hero{ padding:44px 36px; gap:36px; }
  .panel{ padding:36px 32px; }
  .split{ grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:36px; }
  .lp-nav a{ padding:0 10px; font-size:14px; }
  .lp-theme > .lbl{ display:none; }
  /* Five across a 1024 panel is a 110px card: three-line titles and five-line bodies. */
  .prob-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

/* Tablet — the desktop navigation stops fitting, so it stops being the navigation.
   Cards collapse deliberately: two-up, not an awkward half-width third. */
/* The header collapses before the layout does, deliberately: the drawer is still the better
   answer than a nav with slack in it, and it carries every nav item, the action and the
   theme. The page itself is happy in two and three columns down to 1024, so its own
   breakpoint stays there independently. */
@media (max-width:1279px){
  .lp-nav, .lp-theme{ display:none; }
  .lp-burger{ display:inline-flex; }
  .lp-head-in{ height:68px; justify-content:space-between; }
  .lp-right{ margin-left:auto; }
  /* There is room for it again once the nav has gone — but not on a phone, where 250px
     of nowrap mono is most of the screen. */
  .lp-brand-tag{ display:block; }
}
@media (max-width:639px){
  .lp-brand-tag{ display:none; }
}

@media (max-width:1023px){
  .hero{ grid-template-columns:1fr; padding:40px 30px; gap:30px; }
  .hero-copy{ order:1; }
  .split{ grid-template-columns:1fr; gap:28px; }
  .split.top{ align-items:stretch; }
  .caps{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .trust-row{ grid-template-columns:1fr; }
  .closer{ grid-template-columns:1fr; padding:40px 32px; }
  .closer-art{ order:2; }
  .foot-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .foot-brand{ grid-column:1 / -1; }

  /* The process turns. One dotted line down the left, the number on it, the icon and
     the words to the right — the same five steps, read downward. */
  .steps{ grid-template-columns:1fr; row-gap:4px; }
  .step{
    grid-template-areas:'num ico txt';
    grid-template-columns:30px 52px minmax(0,1fr);
    column-gap:16px; align-items:start; justify-items:start; text-align:left;
    padding:14px 0;
  }
  .step::before{
    top:0; bottom:0; left:14.25px; right:auto; width:0; height:auto;
    border-top:0; border-left:1.5px dashed var(--blue-line);
  }
  .step:first-child::before{ left:14.25px; top:15px; }
  .step:last-child::before{ right:auto; bottom:auto; height:15px; }
  .step .ico{ margin:0; }
  .approach-row{ grid-template-columns:1fr; }
  .quote{ padding:28px 26px; }
}

/* Phone — one column, and the diagrams simplify rather than shrink. */
@media (max-width:639px){
  :root{ --gutter:18px; }
  /* Brand and menu only. Both account actions live in the drawer, which is where the
     approved mobile design puts them — and at 390px this button was overpainting the
     wordmark. */
  .lp-signin{ display:none; }
  .lp-brand-txt{ overflow:hidden; }
  .lp-brand-name{ overflow:hidden; text-overflow:ellipsis; }
  .hero-sec{ padding:28px 0 0; }
  .hero{ padding:30px 22px; border-radius:var(--r-lg); }
  .panel{ padding:28px 22px; border-radius:var(--r-lg); }
  .sec{ padding:22px 0; }
  h1{ font-size:clamp(31px, 8.6vw, 40px); }
  h1 .h1-br{ display:none; }
  .lede{ font-size:16px; }

  /* Full-width, stacked, in the approved order. */
  .cta-row{ flex-direction:column; align-items:stretch; gap:10px; }
  .cta-row .btn-lead, .cta-row .btn-quiet{ width:100%; }
  /* The principles are the first thing to go on a phone: three commitments the
     visitor has not yet been given a reason to care about, between the buttons and
     the graphic. They stay in the markup for every other width. */
  .principles{ display:none; }


  .prob-grid{ grid-template-columns:1fr; gap:10px; }
  .prob-card{
    flex-direction:row; align-items:center; text-align:left; gap:14px; padding:16px 16px;
  }
  .prob-card h3{ min-height:0; }
  .think-grid{ grid-template-columns:1fr; }
  .caps{ grid-template-columns:1fr; }
  .eng-grid{ grid-template-columns:1fr; gap:16px; }
  .ai-cols{ grid-template-columns:1fr; }
  .trust{ padding:30px 24px; border-radius:var(--r-lg); }
  .who{ padding:30px 24px; border-radius:var(--r-lg); }
  .who h2{ font-size:25px; }
  .closer{ padding:32px 24px; border-radius:var(--r-lg); }
  .closer > div > p{ font-size:16px; }

  /* The flow stacks. The connector turns with it: a short tick above each node
     instead of a long arm beside it, and the return leg becomes a plain statement
     because a dashed path drawn down a phone is a scribble. */
  .flow{ flex-direction:column; gap:6px; }
  .flow-step{ flex:1 1 100%; flex-direction:row; align-items:center; text-align:left; gap:14px; padding:8px 0; }
  /* The label and the caption are one block on a phone, so every caption starts at the
     same x instead of trailing its own label. */
  .flow-txt-wrap{ align-items:flex-start; gap:1px; }
  .flow-txt-wrap .flow-label{ line-height:1.2; }
  /* The tick has to cross the whole gap between two nodes, not just this step's own
     padding — turned vertical, that gap is the padding above, the column gap, and the
     previous step's padding below, summed, and it starts above this step's box. */
  .flow-step + .flow-step::before{
    top:-14px; left:25px; width:0; height:22px; border-top:0; border-left:1.5px solid var(--border-mid);
  }
  .flow-step + .flow-step::after{ display:none; }
  /* Centred in that same 22px run: (-14 + 22/2) - 9/2 = -7.5. */
  .flow-dot{ top:-7.5px; left:21px; }
  .flow-txt-wrap{ min-width:0; }
  .flow-return{ display:none; }
  .flow-same-phone{
    display:block; margin:16px 0 0; padding:14px 16px;
    background:var(--blue-soft); border:1px solid var(--blue-line); border-radius:var(--r-sm);
    font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.1em;
    text-transform:uppercase; color:var(--blue-text); text-align:center;
  }
  .ai-strip{ flex-direction:column; gap:12px; }

  .foot-grid{ grid-template-columns:1fr; gap:28px; }
  .foot-base{ margin-top:30px; }
}

/* The smallest phone still in use. Nothing is hidden and nothing is resized; the
   gutters give back the 16px the brand row needs. */
@media (max-width:379px){
  :root{ --gutter:14px; }
  .lp-brand-name{ font-size:16px; }
  .hero{ padding:26px 18px; }
  .panel{ padding:24px 18px; }
}

/* ============================================================= REDUCED MOTION
   One block, and it names everything that moves on this page.

   It settles rather than stopping: the hero graphic is complete without motion because
   every element is in the markup, the flow's dots settle lit so the chain still reads as
   connected rather than a row of dead grey, and the drawer still opens, it just does not
   travel. Missing content is the reduced-motion failure that matters, not missing movement. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }

  /* The hero system. The travelling signal and the answering rings have no resting
     job, so they go; the core stops breathing and sits at its lit opacity. */

  /* The suite signal settles lit, in the page's own accent. */
  .cap{ transition:none; }
  .cap:hover{ transform:none; }
  .flow-step .flow-dot{ animation:none; background:var(--blue); }

  /* Buttons and links respond; they do not travel. */
  .btn-lead{ transition:none; }
  .btn-lead:hover{ transform:none; }
  .link-go .arw{ transition:none; }
  .link-go:hover .arw{ transform:none; }

  /* Everything that transitions on hover, focus or open. 1ms rather than 0s: a
     zero-duration transition does not reliably fire transitionend, and this page's
     drawer script does not listen for it today but the next edit might. */
  .btn-quiet, .btn-ghost, .lp-nav a, .lp-signin, .lp-seg button,
  .foot-col a, .flow-node{
    transition-duration:1ms !important;
  }
  /* The drawer arrives instantly, and it still arrives. */
  .lp-drawer-scrim, .lp-drawer-sheet{ animation-duration:1ms !important; }
}

/* Print. Nobody prints a marketing page on purpose, but a saved PDF should not be
   fourteen pages of navy. */
@media print{
  .lp-head, .lp-drawer, .skip{ display:none !important; }
  body{ background:#fff; color:#000; }
  .flow-dot{ animation:none !important; }
}