/*
 * LakeRidge marketing layout (homepage). Loaded only by _layouts/marketing.html.
 * Order: tokens → base → layout → components → sections → responsive.
 * Direction: restrained "Clear and Direct". Borders over shadows, no scroll motion.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

/* The design tokens and Inter live in marketing-chrome.css, which head.html loads first. */

/* ==========================================================================
   2. Base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  font-optical-sizing: auto;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { padding: 0; list-style: none; }

h1, h2, h3 {
  color: var(--ink);
  font-weight: 600;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.75rem, 1.6rem + 4.8vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
}

h2 {
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
}

h3 {
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.012em;
}

p, li, dd, dt, figcaption { text-wrap: pretty; }

a { color: inherit; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a, button { -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.nowrap { white-space: nowrap; }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* ==========================================================================
   3. Layout
   ========================================================================== */

.container {
  width: min(var(--container), calc(100% - var(--gutter)));
  margin-inline: auto;
}

.section { padding-block: var(--section-y); }
.section--neutral { background: var(--bg-neutral); }
.section--tint { background: var(--bg-hero); }

/* Hairline between two white sections, aligned to the content column. */
.section--rule { position: relative; }
.section--rule::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(var(--container), calc(100% - var(--gutter)));
  border-top: 1px solid var(--line);
  transform: translateX(-50%);
}
/* After a tinted band, the change of background already separates the sections. */
:is(.section--tint, .section--neutral) + .section--rule::before { display: none; }

.section-head {
  max-width: 760px;
  margin-bottom: var(--head-gap);
}
.section-head h2 { margin-top: 14px; }
.section-head .lead { margin-top: 20px; max-width: 620px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }

/* ==========================================================================
   4. Components
   ========================================================================== */

/* Type helpers */
.eyebrow {
  color: var(--blue);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-feature-settings: "case";
}

.hero-frameworks { text-wrap: balance; }

.lead {
  color: var(--ink-2);
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.fineprint {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.fineprint a {
  color: var(--blue);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--ease);
}
.fineprint a:hover { color: var(--blue-hover); }

/* Buttons: pills, 44px minimum target. Older blog posts mark theirs .btn (5.29). */
.button,
.post-body .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--blue);
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease);
}
.button:hover,
.post-body .btn:hover { background: var(--blue-hover); border-color: var(--blue-hover); }

.button--secondary {
  background: #fff;
  border-color: var(--line-input);
  color: var(--ink);
}
.button--secondary:hover {
  background: #fff;
  border-color: var(--blue);
  color: var(--blue);
}

.button--white {
  background: #fff;
  border-color: #fff;
  color: var(--blue);
}
.button--white:hover { background: #eef2ff; border-color: #eef2ff; color: var(--blue-hover); }

/* Second button on the blue closing band. */
.button--outline-white {
  background: transparent;
  border-color: rgba(255, 255, 255, .7);
  color: #fff;
}
.button--outline-white:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

/* Standalone text links with an arrow. */
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--blue);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--ease);
}
.text-link::after {
  content: "→";
  content: "→" / "";
  margin-left: .3em;
}
.text-link:hover {
  color: var(--blue-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* Product frames: white, hairline border, 12px radius. */
.frame {
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-frame);
  background: #fff;
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

/* Check lists */
.checklist { display: grid; align-content: start; gap: 12px; }
.plan .checklist li { text-wrap: balance; }
.checklist li {
  position: relative;
  padding-left: 32px;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.5;
}
.checklist li::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  background: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.75' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M6.25 10.25l2.5 2.5 5-5.25' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%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 20 20'%3E%3Ccircle cx='10' cy='10' r='8.75' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M6.25 10.25l2.5 2.5 5-5.25' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
   5. Sections
   ========================================================================== */

/* 5.1 Header: marketing-chrome.css */

/* 5.2 Hero */
.hero {
  display: flow-root; /* contain the frame's negative margin so the tint ends behind it */
  padding-top: clamp(56px, 2rem + 5vw, 104px);
  background: var(--bg-hero);
}

.hero-copy {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}
.hero h1 { margin-top: 20px; }
.hero .lead { max-width: 640px; margin: 24px auto 0; }
/* The one-line promise between the headline and the lead. */
.hero-tagline {
  margin-top: 24px;
  color: var(--ink);
  font-size: clamp(1.3rem, 1rem + 1.1vw, 1.75rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.hero .hero-tagline + .lead { margin-top: 12px; }

.demo-form {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 520px;
  margin: 36px auto 0;
  padding: 5px;
  border: 1px solid var(--line-input);
  border-radius: 999px;
  background: #fff;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.demo-form:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(44, 75, 255, .16);
}
.demo-form input {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  outline: none;
}
.demo-form input::placeholder { color: #64748b; font-weight: 400; }
.demo-form .button { min-height: 46px; padding: 0 22px; }

.demo-note {
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
}

.hero-figure {
  position: relative;
  z-index: 1;
  margin-top: clamp(48px, 2rem + 3vw, 72px);
  margin-bottom: calc(-1 * var(--hero-overlap));
}
.hero-frame {
  box-shadow: var(--shadow-frame);
  aspect-ratio: 16 / 9;
}

/* 5.3 Customer logos */
.customers-strip { padding: calc(var(--hero-overlap) + 48px) 0 clamp(24px, 4vw, 40px); }
.customers-line {
  max-width: 720px;
  margin-inline: auto;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
}
.customers-line__lead,
.customers-line__since { display: block; }

.logo-wall {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 32px;
}
.logo-wall li {
  display: grid;
  place-items: center;
  min-height: 88px;
  padding: 16px 20px;
}
.logo-wall img {
  width: auto;
  height: var(--logo-h, 28px);
  max-width: 100%;
  object-fit: contain; /* files are pre-rendered monochrome slate; no filter needed */
  transition: opacity var(--ease);
}
/* A logo with a website links there; the whole cell is the link. */
.logo-wall li:has(> a) { padding: 0; }
.logo-wall a {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 16px 20px;
  border-radius: 12px;
}
.logo-wall a:hover img { opacity: .6; }

/* 5.4 Platform tiles (Mercury pattern) */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.tile {
  padding: 24px 24px 28px;
  border: 1px solid rgba(15, 23, 42, .06);
  border-radius: var(--radius-tile);
  background: var(--bg-tile);
}
.tile-window {
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-frame);
  background: #fff;
}
.tile-window img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; /* crops are exported at exactly 16:10 */
}
.tile h3 { margin-top: 24px; }
.tile p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

/* 5.5 AI agent (Beside pattern): _includes/marketing/agent.html, on the homepage and /platform. */
.agent {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(48px, 5vw, 80px);
}
.agent-copy { max-width: 540px; }
.agent-copy h2 { margin-top: 14px; }
.agent-copy .lead { margin-top: 20px; }
.agent-copy .checklist { margin-top: 32px; }
.agent-copy .fineprint { margin-top: 24px; }
.agent-copy .text-link { margin-top: 8px; }

/* The four ways to reach the agent. */
.channels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}
.channels li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.channel-icon {
  grid-row: span 2;
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--blue) 10%, #fff);
  fill: var(--blue);
}
.channels strong { color: var(--ink); font-size: 15px; line-height: 1.3; }
.channels span { color: var(--muted); font-size: 14px; line-height: 1.3; }

.agent-stage {
  display: grid;
  place-items: center;
  padding: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 48px);
  border-radius: var(--radius-panel);
  background: var(--bg-tile);
}
/* 480px shows the 960x1200 capture at exactly 2x, so its UI text stays crisp and legible.
   The capture has matching margins above and below, so it is shown whole at 4:5. */
.agent-figure { width: min(100%, 480px); }
.agent-drawer {
  width: 100%;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-frame);
}

/* 5.6 Compliance Team steps */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-bottom: 32px;
}
.steps::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  /* stop at the centre of node 03 (start of the third column + 20px) */
  right: calc((100% - 2 * var(--grid-gap)) / 3 - 20px);
  border-top: 1px solid var(--line-2);
}
.step { position: relative; padding-right: 24px; }
.step-number {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.step h3 { margin-top: 24px; }
.step p {
  margin-top: 8px;
  max-width: 320px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

/* 5.7 Testimonial (single quote) */
.quote {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}
.quote blockquote p {
  color: var(--ink);
  font-size: clamp(22px, 1rem + 1.25vw, 30px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.quote figcaption {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  text-align: left;
}
.quote figcaption img {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  object-fit: cover;
}
.quote figcaption strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}
.quote figcaption span span {
  display: block;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

/* 5.8 Frameworks carousel */
.framework-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: var(--head-gap);
}
.framework-head .section-head { margin-bottom: 0; }

/* Hidden until marketing.js wires them up; without JS the track still scrolls. */
.framework-arrows { display: flex; flex: none; gap: 12px; }
.framework-arrows[hidden] { display: none; }
.framework-arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--line-input);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  transition: border-color var(--ease), color var(--ease);
}
.framework-arrow:hover { border-color: var(--blue); color: var(--blue); }
.framework-arrow[aria-disabled="true"] { border-color: var(--line); color: var(--ink-disabled); cursor: default; }
@media (forced-colors: active) {
  .framework-arrow[aria-disabled="true"] { border-color: GrayText; color: GrayText; }
}

/* Full-bleed track: the inset matches .container's side margin, so the first card
   (and each snapped card) lines up with the content column and the row runs off
   the right edge. The 8px block padding (cancelled by the margin) leaves room for card focus rings.
   (ul.framework-track ties with the ul[role="list"] padding reset and wins by coming later.) */
ul.framework-track {
  --track-inset: max(calc(var(--gutter) / 2), calc((100% - var(--container)) / 2));
  display: flex;
  gap: var(--grid-gap);
  margin-block: -8px;
  padding: 8px var(--track-inset);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--track-inset);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.framework-track::-webkit-scrollbar { display: none; }
.framework-track:focus-visible { outline-offset: -2px; }
@media (prefers-reduced-motion: no-preference) {
  .framework-track { scroll-behavior: smooth; }
}
/* Part of the next card always shows: --in-view cards (never a whole number) fill
   --reach, the run from the column's left edge to the viewport's right edge
   (50vw + 50% of the column) plus one gap. Cards cap at 395px, except on very wide
   screens, where they grow so no more than 3.8 show. The li is a flex box so every
   card stretches to the tallest one. */
.framework-track li {
  --in-view: 3.3;
  --reach: calc(50vw + 50% + var(--grid-gap));
  display: flex;
  flex: none;
  width: clamp(var(--reach) / 3.8 - var(--grid-gap), var(--reach) / var(--in-view) - var(--grid-gap), 395px);
  scroll-snap-align: start;
}

.framework-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 280px;
  padding: 24px;
  border: 1px solid rgba(15, 23, 42, .06);
  border-radius: var(--radius-tile);
  background: var(--bg-tile);
  color: var(--ink);
  text-decoration: none;
}
a.framework-card { transition: border-color var(--ease); }
a.framework-card:hover { border-color: var(--line-input); }
a.framework-card:hover h3 { color: var(--blue); }
.framework-card h3 {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  transition: color var(--ease);
}
.framework-card p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

/* Line-art seal: a 1.5px blue ring, a fainter inner ring 6px in, and the short name
   (two-word names are split into one span per line). The outer ring is an inset
   shadow because Chromium rounds a 1.5px border down to 1px. */
.framework-seal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 104px;
  height: 104px;
  margin-top: auto;
  padding: 0 14px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--blue);
  color: var(--blue);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-align: center;
  white-space: nowrap;
  font-feature-settings: "case";
}
.framework-seal::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid;
  border-radius: inherit;
  opacity: .3;
}

/* 5.9 Audiences */
.audiences {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(6, auto);
  column-gap: var(--grid-gap);
}
/* Subgrid keeps frames, dividers, and lists aligned across both cards. */
.audience {
  display: grid;
  grid-row: span 6;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: #fff;
}
.audience h3 { font-size: 22px; }
.audience-lead {
  margin-top: 10px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.5;
}
.audience-figure { margin-top: 28px; }
.audience-frame { aspect-ratio: 16 / 10; }
.includes-label {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}
.audience .checklist { margin-top: 16px; margin-bottom: 24px; }
.audience .text-link { align-self: end; justify-self: start; }

/* 5.10 Customers: the globe (marketing-globe.css) and a link to every story. */
#customers { overflow: hidden; } /* the globe runs edge to edge on phones */
.customers-more { margin-top: 8px; text-align: center; }

/* 5.12 Plans (Contractbook pattern, no prices) */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  column-gap: var(--grid-gap);
}
/* Subgrid rows: name, promise, "plus" label, list (+ fine print), button. */
.plan {
  position: relative;
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: 32px 28px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--bg-neutral);
}
.plan h3 { grid-row: 1; font-size: 22px; }
.plan-promise {
  grid-row: 2;
  margin-top: 8px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}
.plan-inherits {
  grid-row: 3;
  align-self: end;
  margin-top: 24px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}
.plan-body { grid-row: 4; margin-top: 16px; }
.plan-fineprint { margin-top: 16px; }
.plan .button {
  grid-row: 5;
  align-self: end;
  width: 100%;
  margin-top: 32px;
}
.plan--featured {
  border: 2px solid var(--blue);
  padding: 31px 27px 27px;
  background: #fff;
  box-shadow: var(--shadow-frame);
}
.plan-flag {
  position: absolute;
  top: 0;
  left: 50%;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}
.plans-note {
  margin-top: 28px;
  text-align: center;
}

/* 5.13 Closing band */
.closing {
  padding-block: clamp(72px, 2rem + 6vw, 112px);
  background: var(--blue);
  color: #fff;
  text-align: center;
}
.closing-logo {
  width: auto;
  height: 36px;
  margin: 0 auto 28px;
}
.closing h2 { color: #fff; }
.closing p {
  max-width: 640px;
  margin: 16px auto 0;
  color: #e8ecff;
  font-size: 19px;
  line-height: 1.5;
}
.closing .button { margin-top: 32px; min-height: 48px; padding: 0 26px; }
.closing-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}
.closing-actions .button { margin-top: 0; }
.closing :focus-visible { outline-color: #fff; }

/* 5.14 Footer: marketing-chrome.css */

/* 5.15 Platform page */
/* Hero: copy beside a stack of real screens. */
.page-hero {
  padding-block: clamp(56px, 2rem + 5vw, 104px) clamp(64px, 2rem + 6vw, 112px);
  background: var(--bg-hero);
}
.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
}
.page-hero h1 {
  margin-top: 16px;
  font-size: clamp(2.4rem, 1.4rem + 2.8vw, 3.6rem);
}
.page-hero .lead { max-width: 520px; margin-top: 20px; }
.page-hero .demo-form { margin: 32px 0 0; }
.page-hero-links { display: flex; flex-wrap: wrap; column-gap: 28px; margin-top: 16px; }
.page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: 32px;
}

/* Hero facts: up to four tinted cards beside the hero copy (security, careers). */
.hero-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.hero-fact {
  --hue: var(--blue);
  --hue-ink: color-mix(in srgb, var(--hue) 60%, var(--ink));
  position: relative;
  padding: 22px 24px 24px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--hue) 24%, transparent);
  border-radius: var(--radius-tile);
  background: color-mix(in srgb, var(--hue) 8%, #fff);
}
.hero-fact::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hue), transparent);
  opacity: .7;
  pointer-events: none;
}
.hero-fact--violet { --hue: var(--violet); }
.hero-fact--green { --hue: var(--ok); }
.hero-fact--amber { --hue: var(--warn); }
.hero-fact dt {
  color: var(--hue-ink);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hero-fact dd { margin-top: 6px; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.hero-fact .hero-fact-value {
  margin-top: 8px;
  color: var(--hue-ink);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
/* Two big cards, one above the other (referral). */
.hero-facts--stack { grid-template-columns: minmax(0, 1fr); }
.hero-facts--stack .hero-fact { padding: 26px 28px 28px; }
.hero-facts--stack .hero-fact-value { font-size: 48px; }

/* Each screen sits one step down and to the right of the one behind it.
   Percentage margins resolve against the stack's width, so the steps scale with it. */
.screen-stack { display: grid; }
.stack-layer {
  --i: 0;
  grid-area: 1 / 1;
  width: 76%;
  margin-top: calc(var(--i) * 7.5%);
  margin-left: calc(var(--i) * 8%);
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-frame);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 18px 40px -20px rgba(15, 23, 42, .28);
}
.stack-layer:nth-child(2) { --i: 1; }
.stack-layer:nth-child(3) { --i: 2; }
.stack-layer:nth-child(4) { --i: 3; }
.stack-layer img {
  display: block;
  width: 100%;
  height: auto;
  border-top: 1px solid var(--line);
}
.stack-tag {
  display: inline-flex;
  margin: 10px 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tag) 12%, #fff);
  color: color-mix(in srgb, var(--tag) 62%, var(--ink));
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.stack-tag--blue { --tag: var(--blue); }
.stack-tag--amber { --tag: var(--warn); }
.stack-tag--violet { --tag: var(--violet); }
.stack-tag--green { --tag: var(--ok); }

/* Pillars: an accordion whose open item picks the screenshot beside it. */
.pillars {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
}
.pillars-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  box-shadow: var(--shadow-frame);
}
.pillars-frame img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 250ms ease;
}
.pillars-frame img.is-active { opacity: 1; }
.pillar { border-bottom: 1px solid var(--line); }
.pillar:first-child { border-top: 1px solid var(--line); }
.pillar-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 64px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 20px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color var(--ease);
}
.pillar-trigger::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--ease);
}
.pillar-trigger:hover,
.pillar-trigger[aria-expanded="true"] { color: var(--blue); }
.pillar-trigger[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.pillar-panel { padding-bottom: 24px; }
.pillar-panel[hidden] { display: none; }
.pillar-panel p {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}
.pillar-panel .checklist { margin-top: 16px; }

/* Capabilities grid. */
.capabilities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.capability {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-tile);
  background: #fff;
}
.cap-icon {
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--blue) 9%, #fff);
  fill: var(--blue);
}
.capability h3 { margin-top: 18px; font-size: 19px; }
.capability p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

/* Integrations: copy beside a capture. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
}
.split-copy { max-width: 560px; }
.split-copy h2 { margin-top: 14px; }
.split-copy .lead { margin-top: 20px; }
.split-copy .checklist { margin-top: 28px; }
.split-frame {
  aspect-ratio: 16 / 10;
  box-shadow: var(--shadow-frame);
}
.tool-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.tool-chips li {
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
}

/* Built for scale: a dark band of cards in the app palette. */
.scale {
  padding-block: var(--section-y);
  background: var(--ink);
}
.scale h2 { color: #fff; }
.scale .lead { color: #cbd5e1; }
.scale-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.scale-card {
  padding: 28px;
  border-radius: var(--radius-tile);
  background: color-mix(in srgb, var(--hue) 20%, #fff);
}
.scale-card--blue { --hue: var(--blue); }
.scale-card--violet { --hue: var(--violet); }
.scale-card--green { --hue: var(--ok); }
.scale-card--amber { --hue: var(--warn); }
.scale-card h3 {
  color: color-mix(in srgb, var(--hue) 60%, var(--ink));
  font-size: 19px;
}
.scale-card p {
  margin-top: 10px;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.55;
}

/* Logo strip without the homepage hero above it. */
.customers-strip--plain { padding-top: clamp(24px, 3vw, 40px); }
.platform-more { margin-top: 28px; }

/* 5.16 Customers page (/customers): the dark globe band, then every industry as a tile in
   the homepage's card language, with each of its customers as a logo card. */
.customers-hero {
  overflow: hidden;
  padding-top: clamp(56px, 2rem + 4vw, 96px);
  background: radial-gradient(120% 120% at 50% -10%, #1b2a6b 0%, var(--ink) 58%);
  color: #fff;
  text-align: center;
}
.customers-hero-copy { max-width: 760px; margin-inline: auto; }
.customers-hero .eyebrow { color: #8da0ff; }
.customers-hero h1 {
  margin-top: 16px;
  color: #fff;
  font-size: clamp(2.4rem, 1.4rem + 2.8vw, 3.6rem);
}
.customers-hero .lead { max-width: 600px; margin: 20px auto 0; color: #cbd5e1; }
.customers-hero .demo-form { margin: 32px auto 0; border-color: transparent; }
.customers-hero .demo-note { color: #94a3b8; }
.customers-hero .globe { margin-top: clamp(40px, 2rem + 2vw, 64px); }

.industry {
  --hue: var(--blue);
  --hue-ink: color-mix(in srgb, var(--hue) 60%, var(--ink));
  position: relative;
  padding: clamp(24px, 1rem + 2vw, 40px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--hue) 24%, transparent);
  border-radius: var(--radius-tile);
  background: color-mix(in srgb, var(--hue) 8%, #fff);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.industry + .industry { margin-top: var(--grid-gap); }
.industry::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hue), transparent);
  opacity: .7;
  pointer-events: none;
}
/* Defense's blue-to-violet tint also marks its card under "More customer stories". */
.industry--defense,
.more-story.industry--defense {
  --hue: var(--blue);
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 8%, #fff), color-mix(in srgb, var(--violet) 11%, #fff));
}
.industry--university { --hue: var(--violet); }
.industry--manufacturing { --hue: var(--ok); }
.industry--construction { --hue: var(--warn); }
.industry--msp { --hue: var(--blue); }
.industry-label {
  color: var(--hue-ink);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.industry h3 {
  margin-top: 12px;
  color: var(--ink);
  font-size: clamp(22px, 1.1rem + .9vw, 28px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.industry-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px clamp(28px, 5vw, 64px);
  margin-top: 24px;
}
.industry-stats div {
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
}
.industry-stats dd {
  color: var(--hue-ink);
  font-size: clamp(28px, 1.3rem + 1.2vw, 36px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.industry-stats dt {
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.4;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
  gap: 12px;
  margin-top: 28px;
}
.logo-grid li { display: grid; }
.logo-card {
  display: grid;
  grid-template-rows: 56px auto;
  justify-items: center;
  align-items: center;
  gap: 10px;
  padding: 18px 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-frame);
  background: #fff;
  text-align: center;
  text-decoration: none;
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
a.logo-card:hover {
  border-color: color-mix(in srgb, var(--hue) 45%, transparent);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .07);
  transform: translateY(-1px);
}
a.logo-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.logo-card-initials {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--hue) 14%, #fff);
  color: var(--hue-ink);
  font-size: 15px;
  font-weight: 600;
}
.logo-card-name {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.35;
}
.industry-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  margin-top: 24px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--hue) 22%, transparent);
  color: var(--ink-2);
  font-size: 14px;
}
.industry-foot .text-link { color: var(--hue-ink); }
.industry-note { max-width: 760px; margin-top: 24px; }

/* 5.17 Customer stories (/customers/<industry>): a hero in the industry's color, the story in a
   readable column beside a sticky summary, then the other stories. --hue comes from the layout. */
.story-hero,
.story-layout,
.more-story {
  --hue-ink: color-mix(in srgb, var(--hue) 60%, var(--ink));
}
.story-hero {
  padding-block: clamp(32px, 1.5rem + 2vw, 56px) clamp(44px, 2rem + 3vw, 80px);
  border-bottom: 1px solid color-mix(in srgb, var(--hue) 18%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--hue) 10%, #fff), color-mix(in srgb, var(--hue) 3%, #fff));
}
.story-crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; color: var(--ink-2); font-size: 14px; }
.story-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--muted); }
.story-crumbs a { color: var(--hue-ink); font-weight: 500; text-decoration: none; }
.story-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.story-eyebrow {
  margin-top: 28px;
  color: var(--hue-ink);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.story-hero h1 {
  max-width: 920px;
  margin-top: 14px;
  font-size: clamp(2.1rem, 1.3rem + 2.4vw, 3.3rem);
  line-height: 1.08;
}
.story-hero .lead { max-width: 760px; margin-top: 20px; }
.story-hero .industry-stats { margin-top: 32px; }
/* .story-hero raises this above the list-padding reset for ul[role="list"]. */
.story-hero .story-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 40px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid color-mix(in srgb, var(--hue) 18%, transparent);
}
.story-logos img { width: auto; max-width: 180px; max-height: 32px; }

.story-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: clamp(40px, 5vw, 88px);
  padding-block: clamp(48px, 2rem + 4vw, 96px);
}
.story {
  max-width: 720px;
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1.7;
}
.story > * + * { margin-top: 20px; }
.story > p:first-child { color: var(--ink); font-size: 21px; line-height: 1.6; }
.story h2 {
  margin-top: 64px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem);
  line-height: 1.2;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.story h3 { margin-top: 40px; color: var(--ink); font-size: 20px; line-height: 1.3; }
.story strong { color: var(--ink); font-weight: 600; }
.story a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Bold-led paragraphs (the journeys and the steps) read as cards. */
.story > p:has(> strong:first-child) {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.story > p:has(> strong:first-child) + p:has(> strong:first-child) { margin-top: 12px; }
.story > p:has(> strong:first-child) > strong:first-child { color: var(--hue-ink); }
.story blockquote {
  margin-top: 32px;
  padding: 28px 32px;
  border: 1px solid color-mix(in srgb, var(--hue) 20%, transparent);
  border-radius: var(--radius-tile);
  background: color-mix(in srgb, var(--hue) 7%, #fff);
}
.story blockquote p:first-child { color: var(--ink); font-size: 21px; font-weight: 500; line-height: 1.5; }
.story blockquote p + p { margin-top: 14px; color: var(--ink-2); font-size: 15px; }
/* The note on security and attribution is fine print, not a customer quote. */
.story blockquote:has(> p:first-child > strong:first-child) { border-color: var(--line); background: var(--bg-neutral); }
.story blockquote:has(> p:first-child > strong:first-child) p:first-child { color: var(--ink-2); font-size: 15px; font-weight: 400; line-height: 1.6; }

.roster > * + * { margin-top: 16px; }
.roster h3 { margin-top: 40px; }
.roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.roster-grid li { display: grid; }
.roster-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-frame);
  background: #fff;
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.story a.roster-card { color: inherit; text-decoration: none; }
a.roster-card:hover {
  border-color: color-mix(in srgb, var(--hue) 45%, transparent);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .07);
  transform: translateY(-1px);
}
a.roster-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.roster-logo { display: flex; align-items: center; height: 48px; }
.roster-logo img { width: auto; max-width: 100%; max-height: 44px; }
.roster-initials {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--hue) 14%, #fff);
  color: var(--hue-ink);
  font-size: 15px;
  font-weight: 600;
}
.roster-name { color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.3; }
a.roster-card .roster-name::after {
  content: "↗";
  content: "↗" / "";
  margin-left: 4px;
  color: var(--muted);
  font-weight: 400;
}
/* Blurbs stop at four lines so the cards line up; the full text stays in the page. */
.roster-blurb {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.story-aside {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  display: grid;
  gap: 24px;
}
.story-facts {
  display: grid;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-tile);
  background: #fff;
}
.story-facts dt,
.story-toc-title {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.story-facts dd { margin-top: 4px; color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.4; }
.story-toc ol { margin-top: 12px; }
.story-toc a {
  display: block;
  padding: 6px 0 6px 14px;
  border-left: 2px solid var(--line);
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  transition: border-color var(--ease), color var(--ease);
}
.story-toc a:hover { color: var(--ink); }
.story-toc a.is-current { border-color: var(--hue); color: var(--ink); font-weight: 500; }
.story-cta {
  padding: 24px;
  border-radius: var(--radius-tile);
  background: var(--ink);
  color: #fff;
}
.story-cta p { font-size: 17px; font-weight: 500; line-height: 1.4; }
/* A headline and a supporting line (blog posts). */
.story-cta .story-cta-title { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.story-cta .story-cta-title + p { margin-top: 8px; color: #cbd5e1; font-size: 15px; font-weight: 400; line-height: 1.5; }
.story-cta .button { width: 100%; margin-top: 16px; }

.more-stories {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.more-story {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--hue) 24%, transparent);
  border-radius: var(--radius-tile);
  background: color-mix(in srgb, var(--hue) 8%, #fff);
  transition: transform var(--ease), box-shadow var(--ease);
}
.more-story:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 23, 42, .08); }
.more-story-label {
  color: var(--hue-ink);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.more-story h3 { margin-top: 10px; color: var(--ink); font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.more-story h3 a { color: inherit; text-decoration: none; }
/* The story link covers the whole card; the focus ring moves to the card. */
.more-story h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.more-story h3 a:focus-visible { outline: none; }
.more-story:has(a:focus-visible) { outline: 2px solid var(--blue); outline-offset: 3px; }
.more-story-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  margin-top: auto;
  padding-top: 16px;
  color: var(--ink-2);
  font-size: 13px;
}
.more-story-link { color: var(--hue-ink); font-weight: 600; white-space: nowrap; }
.more-story-link::after { content: "→"; content: "→" / ""; margin-left: .3em; }

/* 5.18 Contact (/contact): sales, support and resources as homepage-style cards, then
   phone, office and social links. */
.contact-hero {
  padding-block: clamp(56px, 2rem + 4vw, 104px) clamp(40px, 2rem + 3vw, 72px);
  background: var(--bg-hero);
}
.contact-hero h1 { margin-top: 16px; font-size: clamp(2.4rem, 1.4rem + 2.8vw, 3.6rem); }
.contact-hero .lead { max-width: 620px; margin-top: 20px; }
.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.contact-card {
  --hue: var(--blue);
  --hue-ink: color-mix(in srgb, var(--hue) 60%, var(--ink));
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--hue) 24%, transparent);
  border-radius: var(--radius-tile);
  background: color-mix(in srgb, var(--hue) 8%, #fff);
}
.contact-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hue), transparent);
  opacity: .7;
  pointer-events: none;
}
.contact-card--support { --hue: var(--ok); }
.contact-card--resources { --hue: var(--violet); }
.contact-card-label {
  color: var(--hue-ink);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.contact-card h3 { margin-top: 12px; font-size: 22px; }
.contact-card h3 + p { margin-top: 10px; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.contact-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: auto;
  padding-top: 24px;
}
.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--hue-ink, var(--blue));
  font-weight: 600;
  text-decoration: none;
}
.contact-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact-icon { flex: none; width: 18px; height: 18px; fill: currentColor; }
.contact-resources { display: grid; gap: 10px; margin-top: 20px; }
/* Inline, so the arrow follows the last word when a long title wraps. */
.contact-resources a {
  color: var(--hue-ink);
  font-weight: 500;
  text-decoration: none;
}
.contact-resources a::after {
  content: "→";
  content: "→" / "";
  display: inline-block;
  margin-left: .35em;
  transition: transform var(--ease);
}
.contact-resources a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact-resources a:hover::after { transform: translateX(3px); }

.contact-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-top: clamp(48px, 5vw, 72px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--line);
}
.contact-details dt {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.contact-details dd { margin-top: 10px; color: var(--ink); font-size: 17px; line-height: 1.5; }
.contact-details .contact-link { color: var(--ink); font-size: 18px; }
.contact-details address { font-style: normal; }
.contact-social { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  transition: border-color var(--ease), color var(--ease);
}
.contact-social a:hover { border-color: var(--blue); color: var(--blue); }
.contact-social-icon { width: 20px; height: 20px; fill: currentColor; }

/* 5.19 Security (/security): hero facts, then the app and company programs as icon topics
   beside a sticky heading, then how to report a vulnerability. */
.security-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: start;
  gap: clamp(40px, 5vw, 80px);
}
.security-group-head {
  position: sticky;
  top: calc(var(--header-h) + 32px);
}
.security-group-head h2 { margin-top: 14px; font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.5rem); }
.security-group-head h2 + p { margin-top: 16px; color: var(--ink-2); font-size: 17px; line-height: 1.55; }
.security-topics {
  --hue: var(--blue);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px clamp(28px, 3vw, 48px);
}
.security-topics--violet { --hue: var(--violet); }
.security-topic {
  padding-top: 28px;
  border-top: 1px solid var(--line-2);
}
.security-icon {
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--hue) 10%, #fff);
  fill: var(--hue);
}
.security-topic h3 { margin-top: 18px; font-size: 19px; }
.security-topic h3 + p { margin-top: 8px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.security-chips-label {
  margin-top: 18px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.security-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.security-chips li {
  padding: 5px 11px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
}

.disclosure {
  --hue: var(--blue);
  --hue-ink: color-mix(in srgb, var(--hue) 60%, var(--ink));
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  margin-top: clamp(64px, 7vw, 104px);
  padding: clamp(28px, 4vw, 48px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--hue) 24%, transparent);
  border-radius: var(--radius-panel);
  background: color-mix(in srgb, var(--hue) 7%, #fff);
  scroll-margin-top: 32px;
}
.disclosure::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hue), transparent);
  opacity: .7;
  pointer-events: none;
}
.disclosure h2 { margin-top: 14px; font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.5rem); }
.disclosure h2 + p { max-width: 480px; margin-top: 16px; color: var(--ink-2); font-size: 17px; line-height: 1.55; }
.disclosure .button { margin-top: 28px; }
.disclosure-icon { flex: none; width: 18px; height: 18px; fill: currentColor; }
.disclosure-steps {
  align-self: center;
  padding: 28px;
  border: 1px solid color-mix(in srgb, var(--hue) 18%, transparent);
  border-radius: var(--radius-tile);
  background: #fff;
}
.disclosure-steps h3 {
  color: var(--hue-ink);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.disclosure-steps ol { display: grid; gap: 14px; margin-top: 18px; counter-reset: step; }
.disclosure-steps li {
  position: relative;
  min-height: 28px;
  padding-left: 42px;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.5;
  counter-increment: step;
}
.disclosure-steps li::before {
  content: counter(step);
  position: absolute;
  top: -1px;
  left: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hue) 10%, #fff);
  color: var(--hue-ink);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 5.20 Careers (/careers): hero facts, then each open role as an expandable card in its
   team's color. Native <details>, so roles open without JavaScript. */
.careers-email {
  color: var(--blue);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.careers-email:hover { color: var(--blue-hover); }
.roles { display: grid; gap: 12px; }
.role {
  --hue-ink: color-mix(in srgb, var(--hue) 60%, var(--ink));
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-tile);
  background: #fff;
  scroll-margin-top: 24px;
  transition: border-color var(--ease), background-color var(--ease);
}
.role::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hue), transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ease);
}
.role:hover,
.role[open] { border-color: color-mix(in srgb, var(--hue) 32%, transparent); }
.role[open] { background: color-mix(in srgb, var(--hue) 4%, #fff); }
.role[open]::before { opacity: .7; }
.role summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "team tags toggle" "title tags toggle";
  align-items: center;
  column-gap: 24px;
  row-gap: 6px;
  padding: 22px 24px;
  border-radius: calc(var(--radius-tile) - 1px);
  list-style: none;
  cursor: pointer;
}
.role summary::-webkit-details-marker { display: none; }
/* The card clips overflow, so the focus ring sits inside it. */
.role summary:focus-visible { outline-offset: -3px; }
.role-team {
  grid-area: team;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--hue-ink);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.role-team::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--hue);
}
.role summary h3 { grid-area: title; }
.role-tags { grid-area: tags; display: flex; flex-wrap: wrap; gap: 8px; }
.role-tags span {
  padding: 5px 11px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}
.role-toggle {
  grid-area: toggle;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-2);
  transition: border-color var(--ease), color var(--ease);
}
.role-toggle::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--ease);
}
.role summary:hover .role-toggle { border-color: var(--hue); color: var(--hue-ink); }
.role[open] .role-toggle::after { transform: translateY(2px) rotate(-135deg); }
.role-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 28px clamp(32px, 4vw, 64px);
  margin-inline: 24px;
  padding: 28px 0 32px;
  border-top: 1px solid color-mix(in srgb, var(--hue) 18%, var(--line));
}
.role-facts { display: grid; align-content: start; gap: 20px; }
.role-facts dt,
.role-work h4 {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.role-facts dd { margin-top: 6px; color: var(--ink); font-size: 16px; line-height: 1.5; }
.role-work h4 { margin: 0; }
.role-work .checklist { margin-top: 16px; }
.role-work .checklist li::before { background: var(--hue-ink); }
.role-apply {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: 28px;
  color: var(--muted);
  font-size: 15px;
}
.role-apply-icon { flex: none; width: 18px; height: 18px; fill: currentColor; }

/* 5.21 Referral (/referral): reward cards beside the hero, the three steps (5.6), the terms,
   then a closing band that applies instead of booking a demo. */
.referral-terms { max-width: 720px; margin-top: 8px; }

/* 5.22 Legal (_layouts/legal.html: privacy policy, agreements): a plain hero, then the document
   in a readable column beside the "On this page" list from 5.17 and a questions box. */
.legal-hero {
  padding-block: clamp(48px, 2rem + 3vw, 88px) clamp(36px, 1.5rem + 2.5vw, 64px);
  border-bottom: 1px solid var(--line);
  background: var(--bg-hero);
}
.legal-hero h1 { margin-top: 16px; font-size: clamp(2.4rem, 1.4rem + 2.8vw, 3.6rem); }
.legal-updated { margin-top: 16px; color: var(--muted); font-size: 16px; }
.legal-layout {
  --hue: var(--blue);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: start;
  gap: clamp(40px, 5vw, 88px);
  padding-block: clamp(48px, 2rem + 4vw, 96px);
}
.legal {
  max-width: 720px;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.7;
}
.legal > * + * { margin-top: 16px; }
.legal h2 {
  margin-top: 56px;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  scroll-margin-top: 24px;
}
.legal h3 { margin-top: 32px; font-size: 18px; line-height: 1.4; letter-spacing: -0.01em; }
.legal > h2 + *,
.legal > h3 + * { margin-top: 12px; }
.legal ul { padding-left: 22px; }
.legal li + li { margin-top: 6px; }
.legal a {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.legal a:hover { color: var(--blue-hover); }
.legal-aside {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  display: grid;
  gap: 24px;
}
.legal-contact {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-tile);
  background: #fff;
}
.legal-contact p { color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.4; }
.legal-contact .contact-link { min-height: 40px; margin-top: 4px; font-size: 15px; }
.legal-hero .eyebrow a { color: inherit; text-decoration: none; }
.legal-hero .eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }
.legal-lead { max-width: 640px; margin-top: 20px; }
/* Numbered clauses (the non-disclosure agreement). */
.legal ol { padding-left: 26px; }
.legal ol > li { padding-left: 4px; }
.legal ol > li + li { margin-top: 16px; }
.legal li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }
.legal li > p + p { margin-top: 12px; }

/* 5.23 Blog (/blog and /blog/<topic>): topic chips in the hero, the newest post as a wide card,
   then a grid of posts; /blog closes with every topic as a card. Each topic's hue comes from
   _data/blog_categories.yml. */
.blog-hero {
  padding-block: clamp(48px, 2rem + 3vw, 88px) clamp(32px, 1.5rem + 2vw, 48px);
  background: var(--bg-hero);
}
.blog-hero .eyebrow a { color: inherit; text-decoration: none; }
.blog-hero .eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }
.blog-hero h1 { max-width: 920px; margin-top: 16px; font-size: clamp(2.4rem, 1.4rem + 2.8vw, 3.6rem); }
.blog-hero .lead { max-width: 760px; margin-top: 20px; }
.blog-help { max-width: 760px; margin-top: 16px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.blog-help a {
  color: var(--blue);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.blog-help a:hover { color: var(--blue-hover); }
.blog-topics { margin-top: 32px; }
.blog-topics ul { display: flex; flex-wrap: wrap; gap: 8px; }
/* Relative, so each chip's hidden " articles" label stays inside the scrolling row on phones. */
.blog-topics a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 7px 0 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--ease), color var(--ease), background-color var(--ease);
}
.blog-topics a[style]::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--hue);
}
.blog-topics a:hover { border-color: var(--hue, var(--blue)); color: var(--ink); }
.blog-topics a[aria-current="page"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.blog-topic-count {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-tile);
  color: var(--ink-2);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.blog-topics a[aria-current="page"] .blog-topic-count { background: rgba(255, 255, 255, .16); color: #fff; }

.blog-posts { padding-top: clamp(40px, 2rem + 2vw, 64px); }
.post-card {
  --hue-ink: color-mix(in srgb, var(--hue) 60%, var(--ink));
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-tile);
  background: #fff;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.post-card:hover {
  border-color: color-mix(in srgb, var(--hue) 45%, var(--line-2));
  box-shadow: 0 18px 36px -24px rgba(15, 23, 42, .3);
}
.post-card:has(.post-card-link:focus-visible) { outline: 2px solid var(--blue); outline-offset: 3px; }
.post-card-media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--hue) 10%, var(--bg-tile));
}
.post-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}
.post-card:hover .post-card-media img { transform: scale(1.03); }
.post-card-body { display: flex; flex: 1; flex-direction: column; padding: 20px 22px 24px; }
.post-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.4;
}
.post-card-topic {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--hue-ink);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.post-card-topic::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--hue);
}
.post-card h3 {
  display: -webkit-box;
  margin-top: 12px;
  overflow: hidden;
  font-size: 19px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.post-card-link { color: inherit; text-decoration: none; }
/* The whole card is the link's hit area. */
.post-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.post-card-link:focus-visible { outline: none; }
.post-card-desc {
  display: -webkit-box;
  margin-top: 10px;
  overflow: hidden;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.post-card--feature {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  height: auto;
  margin-bottom: var(--grid-gap);
}
.post-card--feature .post-card-media { aspect-ratio: 3 / 2; border-right: 1px solid var(--line); border-bottom: 0; }
.post-card--feature .post-card-body { justify-content: center; padding: clamp(24px, 3vw, 48px); }
.post-card--feature h3 { font-size: clamp(24px, 1.1rem + 1vw, 32px); line-height: 1.2; letter-spacing: -0.018em; -webkit-line-clamp: 4; line-clamp: 4; }
.post-card--feature .post-card-desc { font-size: 17px; -webkit-line-clamp: 4; line-clamp: 4; }
.post-card-more { margin-top: 24px; color: var(--blue); font-size: 15.5px; font-weight: 600; }
.post-card-more::after { content: "→"; content: "→" / ""; display: inline-block; margin-left: .35em; transition: transform var(--ease); }
.post-card:hover .post-card-more::after { transform: translateX(3px); }
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}
/* Hubs list hundreds of posts; skip rendering the ones far off screen. */
/* Height only: a placeholder width would hold the grid open on phones. */
.post-grid > li { content-visibility: auto; contain-intrinsic-height: auto 460px; }

.topic-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.topic-card {
  --hue-ink: color-mix(in srgb, var(--hue) 60%, var(--ink));
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--hue) 24%, transparent);
  border-radius: var(--radius-tile);
  background: color-mix(in srgb, var(--hue) 8%, #fff);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--ease);
}
.topic-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hue), transparent);
  opacity: .7;
  pointer-events: none;
}
.topic-card:hover { border-color: color-mix(in srgb, var(--hue) 55%, transparent); }
.topic-card-count {
  order: -1;
  color: var(--hue-ink);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.topic-card-count span { margin-left: 4px; color: var(--ink-2); font-size: 15px; font-weight: 500; letter-spacing: 0; }
.topic-card-title { margin-top: 10px; font-size: 18px; font-weight: 600; line-height: 1.35; }
.topic-card-more { margin-top: auto; padding-top: 18px; color: var(--hue-ink); font-size: 15px; font-weight: 600; }
.topic-card-more::after { content: "→"; content: "→" / ""; display: inline-block; margin-left: .35em; transition: transform var(--ease); }
.topic-card:hover .topic-card-more::after { transform: translateX(3px); }

/* 5.24 About (/about): hero facts, the office in photos, the story, the leadership team as cards
   in the app palette, then a careers band. */
.about-photos { padding-bottom: 0; }
/* Two portraits span two rows each; the landscapes fill the four cells between them. */
.photo-mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.photo-mosaic li {
  overflow: hidden;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-tile);
  background: var(--bg-tile);
}
.photo-mosaic img { width: 100%; height: 100%; object-fit: cover; }
/* Out of flow, so a portrait never stretches the rows it spans. */
.photo-mosaic .photo-mosaic-tall { position: relative; grid-row: span 2; aspect-ratio: auto; }
.photo-mosaic-tall img { position: absolute; inset: 0; }

.about-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: start;
  gap: clamp(32px, 5vw, 80px);
}
.about-story-head h2 { margin-top: 14px; }
.about-story-body {
  display: grid;
  gap: 20px;
  max-width: 720px;
  color: var(--ink-2);
  font-size: 19px;
  line-height: 1.65;
}

/* Six columns, each card two wide. The first-row people (team-card--lead) are centred by
   --lead-start (set from their count), and the first card after them starts a new row. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.team-card {
  --hue-ink: color-mix(in srgb, var(--hue) 60%, var(--ink));
  display: flex;
  flex-direction: column;
  grid-column: span 2;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-tile);
  background: #fff;
}
.team-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  border-bottom: 1px solid color-mix(in srgb, var(--hue) 18%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--hue) 5%, #fff), color-mix(in srgb, var(--hue) 14%, #fff));
}
.team-photo img {
  position: absolute;
  inset: 16px 0 0;
  width: 100%;
  height: calc(100% - 16px);
  object-fit: contain;
  object-position: center bottom;
}
.team-card--lead:first-child { grid-column: var(--lead-start, 1) / span 2; }
.team-card--lead + .team-card:not(.team-card--lead) { grid-column: 1 / span 2; }
.team-body { padding: 22px 24px 28px; }
.team-body h3 { font-size: 20px; }
.team-role {
  margin-top: 6px;
  color: var(--hue-ink);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.team-bio { margin-top: 14px; color: var(--muted); font-size: 15px; line-height: 1.6; }

.about-careers {
  --hue: var(--violet);
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  padding: clamp(28px, 4vw, 48px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--hue) 24%, transparent);
  border-radius: var(--radius-panel);
  background: color-mix(in srgb, var(--hue) 7%, #fff);
}
.about-careers::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hue), transparent);
  opacity: .7;
  pointer-events: none;
}
.about-careers .eyebrow { color: color-mix(in srgb, var(--hue) 60%, var(--ink)); }
.about-careers h2 { margin-top: 14px; font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.5rem); }
.about-careers h2 + p { max-width: 520px; margin-top: 12px; color: var(--ink-2); font-size: 17px; line-height: 1.55; }

/* 5.25 Link cards (/terms, 404): a small group title, then cards whose whole area is the link.
   The hue comes from the list or the card (style="--hue: ..."). */
.legal-groups { display: grid; gap: clamp(40px, 5vw, 64px); }
.link-cards-title {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.link-cards {
  --hue: var(--blue);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.link-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.link-card {
  --hue-ink: color-mix(in srgb, var(--hue) 60%, var(--ink));
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-tile);
  background: #fff;
  transition: border-color var(--ease);
}
.link-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hue), transparent);
  opacity: .7;
  pointer-events: none;
}
.link-card:hover { border-color: color-mix(in srgb, var(--hue) 45%, transparent); }
.link-card:has(.link-card-link:focus-visible) { outline: 2px solid var(--blue); outline-offset: 3px; }
.link-card :is(h2, h3, h4) { font-size: 18px; line-height: 1.35; letter-spacing: -0.012em; }
.link-card h4 { margin: 0; color: var(--ink); font-weight: 600; text-wrap: balance; }
.link-card :is(h2, h3, h4)::after { content: "→"; content: "→" / ""; display: inline-block; margin-left: .35em; color: var(--hue-ink); transition: transform var(--ease); }
.link-card:hover :is(h2, h3, h4)::after { transform: translateX(3px); }
.link-card-link { color: inherit; text-decoration: none; }
.link-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.link-card-link:focus-visible { outline: none; }
.link-card :is(h2, h3, h4) + p { margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.link-card-meta {
  margin-top: auto;
  padding-top: 18px;
  color: var(--hue-ink);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* 5.26 Status pages (404, /thank-you): one short hero. */
.status-hero {
  padding-block: clamp(64px, 2rem + 6vw, 128px);
  background: var(--bg-hero);
}
.status-hero h1 { margin-top: 16px; font-size: clamp(2.4rem, 1.4rem + 2.8vw, 3.6rem); }
.status-hero .lead { max-width: 620px; margin-top: 20px; }
.status-hero--center { text-align: center; }
.status-hero--center h1 { margin-top: 24px; }
.status-hero--center .lead { margin-inline: auto; }
.status-icon {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid color-mix(in srgb, var(--ok) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ok) 10%, #fff);
  color: color-mix(in srgb, var(--ok) 70%, var(--ink));
}
.status-icon svg { width: 28px; height: 28px; }
.status-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.status-social-icon { flex: none; width: 18px; height: 18px; fill: currentColor; }
.status-back { margin-top: 20px; }

/* 5.27 Business card (/business-card): no site header or footer; the logo, who you're booking
   with, then the calendar. */
.card-page {
  min-height: 100vh;
  padding-block: 28px 48px;
  background: var(--bg-hero);
}
.card-page .container { display: grid; justify-items: center; text-align: center; }
.card-page-logo { display: inline-flex; padding: 6px; }
.card-page-logo img { width: auto; height: 32px; }
.card-page-intro { max-width: 680px; margin-top: clamp(36px, 5vw, 64px); }
.card-page-person {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 20px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  text-align: left;
}
.card-page-photo {
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 6%, #fff), color-mix(in srgb, var(--blue) 18%, #fff));
}
.card-page-photo img { position: absolute; left: 50%; bottom: -14px; width: 92px; max-width: none; height: auto; transform: translateX(-50%); }
.card-page-person p { margin: 0; }
.card-page-name { display: block; color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.3; }
.card-page-role { display: block; color: var(--muted); font-size: 14px; line-height: 1.4; }
.card-page h1 { margin-top: 28px; font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem); }
.card-page .lead { margin-top: 16px; }
/* Calendly's frame has a fixed height; on phones its event details stack above the calendar. */
.card-page-calendar {
  width: 100%;
  max-width: 1060px;
  height: 720px;
  margin-top: clamp(32px, 4vw, 48px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-tile);
  background: #fff;
}
.card-page-calendar.is-error { height: auto; }
.card-page-calendar iframe { display: block; width: 100%; height: 100%; }
.card-page-status { padding: 64px 24px; color: var(--muted); font-size: 16px; }
.card-page-status a { color: var(--blue); font-weight: 500; }
.card-page-fallback { margin-top: 24px; }
.card-page-links { margin-top: 20px; }

/* 5.28 Framework pages (_includes/marketing/framework.html): the homepage hero and logos, then
   how we get you compliant as rows whose screens alternate sides, the three use cases, and quotes. */
.feature-rows { display: grid; gap: clamp(64px, 2rem + 5vw, 112px); }
.feature-row {
  --hue: var(--blue);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}
.feature-row--amber { --hue: var(--warn); }
.feature-row--violet { --hue: var(--violet); }
.feature-row--green { --hue: var(--ok); }
.feature-row:nth-child(even) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.feature-row:nth-child(even) .feature-row-figure { order: -1; }
.feature-row-copy { max-width: 480px; }
/* The step's label as an app-style tag in its own hue. */
.feature-row-label {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hue) 12%, #fff);
  color: color-mix(in srgb, var(--hue) 62%, var(--ink));
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.feature-row h3 {
  margin-top: 18px;
  font-size: clamp(26px, 1.1rem + 1vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.feature-row-text {
  margin-top: 16px;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.6;
}
/* Each screen sits on a gray stage, like the homepage tiles. */
.feature-row-figure {
  padding: clamp(20px, 3vw, 40px);
  border-radius: var(--radius-panel);
  background: var(--bg-tile);
}
.feature-row-frame {
  aspect-ratio: 16 / 10;
  box-shadow: var(--shadow-frame);
}

.use-cases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.use-case {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-tile);
  background: #fff;
}
.use-case h3 { margin-top: 18px; font-size: 19px; }
.use-case p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}
.use-case .text-link { margin-top: auto; padding-top: 12px; }

.quote-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.quote-cards li { display: flex; }
.quote-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-tile);
  background: var(--bg-neutral);
}
.quote-card blockquote p {
  color: var(--ink);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.quote-card figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 28px;
}
.quote-card figcaption img {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
}
.quote-card strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}
.quote-card figcaption span span {
  display: block;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

/* Partner and supply chain pages (framework-msp.html, framework-verify.html): one screen beside the
   hero copy, why partners use LakeRidge in two columns, and question cards that fit their number.
   Their services and outcomes reuse the security page's icon topics (5.19). */
.hero-shot { box-shadow: var(--shadow-frame); }
.hero-shot--portfolio { aspect-ratio: 16 / 10; }
.hero-shot--dashboard { aspect-ratio: 16 / 9; }
.capabilities--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.use-cases--fit { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* 5.29 Blog posts (_layouts/post.html): a hero in the topic's color, then the cover and the article
   in a readable column beside the "In this article" list and demo card from 5.17 and share links,
   then the newest posts on the topic as 5.23 cards. --hue comes from the layout. */
.post-hero,
.post-layout {
  --hue-ink: color-mix(in srgb, var(--hue) 60%, var(--ink));
}
.post-hero {
  padding-block: clamp(32px, 1.5rem + 2vw, 56px) clamp(40px, 2rem + 2.5vw, 72px);
  border-bottom: 1px solid color-mix(in srgb, var(--hue) 18%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--hue) 10%, #fff), color-mix(in srgb, var(--hue) 3%, #fff));
}
.post-hero h1 {
  max-width: 960px;
  margin-top: 28px;
  font-size: clamp(2.1rem, 1.3rem + 2.4vw, 3.3rem);
  line-height: 1.08;
}
.post-hero h1.post-title--mid { font-size: clamp(1.85rem, 1.2rem + 1.6vw, 2.75rem); line-height: 1.12; }
.post-hero h1.post-title--long { font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.25rem); line-height: 1.16; }
.post-hero .lead { max-width: 760px; margin-top: 20px; }
.post-byline { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.post-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
}
.post-avatar svg { width: 22px; height: 22px; }
.post-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.post-meta {
  display: flex;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 15px;
}
.post-meta > * + *::before { content: "·"; content: "·" / ""; margin-inline: 10px; }
.post-author { color: var(--ink); font-weight: 500; }

.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: start;
  gap: clamp(40px, 5vw, 88px);
  padding-block: clamp(40px, 2rem + 3vw, 80px) clamp(56px, 2rem + 4vw, 96px);
}
.post-main { max-width: 720px; }
.post-cover {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin-bottom: clamp(32px, 1.5rem + 2vw, 48px);
  border: 1px solid var(--line);
  border-radius: var(--radius-tile);
  background: color-mix(in srgb, var(--hue) 10%, var(--bg-tile));
}
.post-cover img { width: 100%; height: 100%; object-fit: cover; }

.post-body {
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1.7;
  overflow-wrap: break-word;
}
.post-body > * + * { margin-top: 20px; }
/* A post or handbook page that opens with a heading starts at the top of its column. */
.post-body > :first-child { margin-top: 0; }
/* Posts open with the answer; it reads as the lead. */
.post-body > p:first-child { color: var(--ink); font-size: 20px; line-height: 1.6; }
.post-body h2 {
  margin-top: 56px;
  font-size: clamp(1.5rem, 1.2rem + .8vw, 1.875rem);
  line-height: 1.2;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.post-body h3 { margin-top: 36px; }
.post-body h4 { margin-top: 28px; color: var(--ink); font-size: 18px; font-weight: 600; line-height: 1.4; }
.post-body :is(h2, h3, h4) + * { margin-top: 12px; }
.post-body strong { color: var(--ink); font-weight: 600; }
.post-body a:not(.btn) {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.post-body a:not(.btn):hover { color: var(--blue-hover); }
.post-body :is(ul, ol) { padding-left: 24px; }
.post-body li + li,
.post-body li > :is(ul, ol) { margin-top: 8px; }
.post-body li::marker { color: var(--muted); }
.post-body img { border-radius: var(--radius-frame); }
.post-body hr { margin-block: 40px; border: 0; border-top: 1px solid var(--line); }
.post-body pre {
  overflow-x: auto;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-frame);
  background: var(--bg-neutral);
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.6;
  tab-size: 2;
}
.post-body code { font-family: var(--font-mono); font-size: .875em; }
.post-body pre code { font-size: inherit; }
.post-body :not(pre) > code { padding: .15em .4em; border-radius: 6px; background: var(--bg-tile); color: var(--ink); }
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-frame);
}
.post-body table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.post-body :is(th, td) {
  min-width: 128px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.post-body th { background: var(--bg-neutral); color: var(--ink); font-weight: 600; }
.post-body tr:last-child > td { border-bottom: 0; }
/* Older posts' Bootstrap markup: rows and columns read as paragraphs, list groups as a bordered
   list, .btn as a button (4. Components), and YouTube embeds at 16:9. */
.post-body .container { width: auto; }
.post-body .text-center { text-align: center; }
.post-body .text-center img { margin-inline: auto; }
.post-body .list-group {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-frame);
  list-style: none;
}
.post-body .list-group-item { padding: 12px 16px; }
.post-body .list-group-item + .list-group-item { margin-top: 0; border-top: 1px solid var(--line); }
.post-body .d-grid { display: grid; }
/* Their button labels are whole sentences, so they wrap on phones. */
.post-body .btn { padding-block: 10px; white-space: normal; text-align: center; }
.post-body iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-frame);
}

.post-related {
  margin-top: 56px;
  padding: 24px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-tile);
  background: var(--bg-neutral);
}
.post-related h2 { font-size: 18px; line-height: 1.4; letter-spacing: -0.01em; }
.post-related ul { margin-top: 8px; }
.post-related a {
  display: inline-block;
  padding-block: 5px;
  color: var(--blue);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  text-decoration: none;
}
.post-related a::after { content: "→"; content: "→" / ""; margin-left: .35em; }
.post-related a:hover { color: var(--blue-hover); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* A long "In this article" list scrolls inside the aside rather than running off screen; the
   padding keeps focus rings inside the scroll box. */
.post-aside {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  display: grid;
  gap: 24px;
  max-height: calc(100vh - var(--header-h) - 40px);
  margin: -4px;
  padding: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.post-share ul { display: flex; gap: 8px; margin-top: 12px; }
.post-share a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-2);
  transition: border-color var(--ease), color var(--ease);
}
.post-share a:hover { border-color: var(--blue); color: var(--blue); }
.post-share-icon { width: 18px; height: 18px; fill: currentColor; }
.post-more-link { margin-top: 24px; }

/* 5.30 Compliance handbooks (_layouts/handbook.html; compliance-app generates the pages): the blog
   post hero (5.29) in the handbook's color. Index and domain pages list link cards (5.25) across
   the page; a control reads in the blog post column (5.29) beside "On this page". */
.handbook-eyebrow { margin-top: 0; }
.handbook-label {
  display: block;
  margin-bottom: 14px;
  color: var(--hue-ink);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* The cards take the handbook's color from the page. */
.link-cards.handbook-cards { --hue: inherit; margin-top: 0; }
.handbook-section { padding-top: clamp(40px, 2rem + 2vw, 64px); }
.handbook-section .blog-help { margin-top: 40px; }
.post-body .handbook-requirement { color: var(--ink); font-size: 20px; line-height: 1.6; }
.handbook-objective {
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.handbook-objective + .handbook-objective { margin-top: 12px; }
.handbook-objective > * + * { margin-top: 10px; }
.post-body .handbook-objective h3 { margin-top: 0; font-size: 18px; }
.post-body .handbook-objective :is(p, li) { font-size: 16px; line-height: 1.6; }
.handbook-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 56px;
}
.handbook-pager-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-tile);
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  transition: border-color var(--ease);
}
.handbook-pager-link span { color: var(--muted); font-size: 13px; font-weight: 500; }
.handbook-pager-link span::before { content: "←"; content: "←" / ""; margin-right: .35em; }
.handbook-pager-link--next { grid-column: 2; align-items: flex-end; text-align: right; }
.handbook-pager-link--next span::before { content: none; }
.handbook-pager-link--next span::after { content: "→"; content: "→" / ""; margin-left: .35em; }
.handbook-pager-link:hover { border-color: color-mix(in srgb, var(--hue) 45%, var(--line-2)); }
.post-main > .blog-help { margin-top: 32px; }

/* ==========================================================================
   6. Responsive
   ========================================================================== */

/* Tiles go to two columns before their windows drop below ~420px. */
@media (max-width: 1120px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .framework-track li { --in-view: 2.3; }
}

@media (max-width: 1080px) {
  .agent { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
}

/* Side by side below ~1040px, each product frame drops under ~420px and its table
   text to ~7px. Stacked, the column is centred like the stacked plans and the
   frames stay ~560-580px wide. */
@media (max-width: 1040px) {
  .audiences { grid-template-columns: 1fr; grid-template-rows: none; row-gap: var(--grid-gap); max-width: 640px; margin-inline: auto; }
  .audience { grid-row: auto; grid-template-rows: none; }
}

@media (max-width: 1000px) {
  .logo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Tablets and phones (the header's own 900px rules live in marketing-chrome.css). */
@media (max-width: 900px) {
  .contact-cards { grid-template-columns: 1fr; }
  .security-group, .disclosure { grid-template-columns: 1fr; }
  .role-body { grid-template-columns: 1fr; }
  .role-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; }
  .security-group { gap: 40px; }
  .security-group-head { position: static; max-width: 640px; }
  .story-layout { grid-template-columns: 1fr; }
  .legal-layout { grid-template-columns: 1fr; }
  .post-grid, .topic-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-card--feature { grid-template-columns: 1fr; }
  .post-card--feature .post-card-media { border-right: 0; border-bottom: 1px solid var(--line); }
  .legal-aside { position: static; max-width: 720px; }
  .story-aside { position: static; }
  .post-layout { grid-template-columns: minmax(0, 1fr); }
  .post-aside { position: static; max-width: 728px; max-height: none; overflow: visible; }
  .story-toc { display: none; }
  .more-stories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-hero-grid, .pillars, .split { grid-template-columns: 1fr; }
  .page-hero-copy, .screen-stack { max-width: 640px; }
  .capabilities, .scale-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .hero-frame { aspect-ratio: 4 / 3; }
  .hero-figure { max-width: 640px; margin-inline: auto; }

  .agent { grid-template-columns: 1fr; }
  .agent-copy { max-width: 640px; }
  .agent-stage { max-width: none; }


  .plans { grid-template-columns: 1fr; grid-template-rows: none; max-width: 560px; margin-inline: auto; row-gap: 32px; }
  .plan { grid-row: auto; grid-template-rows: none; }

  .about-story { grid-template-columns: 1fr; gap: 24px; }
  /* Two columns; a last card on its own sits in the middle. */
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-card,
  .team-card--lead:first-child,
  .team-card--lead + .team-card:not(.team-card--lead) { grid-column: auto; }
  .team-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--grid-gap)) / 2); }
  .link-cards, .link-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Framework pages: copy above its screen, and the cards one per row. */
  .feature-row, .feature-row:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .feature-row:nth-child(even) .feature-row-figure { order: 0; }
  .feature-row-copy { max-width: 640px; }
  .use-cases, .quote-cards { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; }
  .page-hero-figure { max-width: 640px; }
  .hero-shot--dashboard { aspect-ratio: 4 / 3; }

}

@media (max-width: 700px) {
  .capabilities, .scale-cards { grid-template-columns: 1fr; }
  .industry-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 16px; }
  .more-stories { grid-template-columns: 1fr; }
  .contact-details { grid-template-columns: 1fr; }
  .security-topics { grid-template-columns: 1fr; gap: 32px; }
  .hero-fact { padding: 18px 18px 20px; }
  .hero-fact dd { font-size: 14.5px; }
  .hero-fact .hero-fact-value { font-size: 28px; }
  .disclosure-steps { padding: 22px 20px; }
  .role summary {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "team toggle" "title toggle" "tags toggle";
    column-gap: 16px;
    padding: 18px;
  }
  .role-tags { margin-top: 6px; }
  .role-body { margin-inline: 18px; padding: 22px 0 24px; }
  .role-facts { grid-template-columns: 1fr; gap: 16px; }
  .story { font-size: 17px; }
  .post-body { font-size: 17px; }
  .post-body > p:first-child { font-size: 19px; }
  .post-body h2 { margin-top: 44px; }
  .post-body pre { padding: 14px 16px; font-size: 13.5px; }
  .post-body .handbook-requirement { font-size: 19px; }
  .handbook-objective { padding: 18px; }
  .post-related { padding: 20px; }
  .legal { font-size: 16px; }
  .legal h2 { margin-top: 44px; font-size: 22px; }
  /* Topic chips scroll sideways instead of stacking six rows deep. */
  .blog-topics ul {
    flex-wrap: nowrap;
    margin-inline: calc(var(--gutter) / -2);
    padding: 2px calc(var(--gutter) / 2);
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .blog-topics ul::-webkit-scrollbar { display: none; }
  .post-card-body { padding: 18px 18px 20px; }
  .post-card--feature .post-card-body { padding: 22px 20px 24px; }
  .story > p:first-child, .story blockquote p:first-child { font-size: 19px; }
  .story blockquote { padding: 22px 20px; }
  .story > p:has(> strong:first-child) { padding: 18px; }
  .story-logos { gap: 16px 28px; }
  .story-logos img { max-height: 30px; }
  .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .logo-card { padding: 16px 10px 12px; }
  .capability, .scale-card { padding: 24px; }
  .stack-layer { width: 82%; margin-top: calc(var(--i) * 12%); margin-left: calc(var(--i) * 6%); }
  .pillar-trigger { font-size: 18px; }

  .lead { font-size: 18px; }
  h3 { font-size: 20px; }

  .hero-copy { text-align: left; }
  .hero .lead { margin-left: 0; }
  .demo-form { margin-left: 0; }
  .hero-figure { max-width: none; }

  .customers-line { text-align: left; margin-left: 0; }
  .logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; }
  .logo-wall li { min-height: 72px; padding: 12px 10px; }
  .logo-wall a { padding: 12px 10px; }
  .logo-wall img { height: calc(var(--logo-h, 28px) * .85); }

  /* Two columns from ~650px so 960px captures are not upscaled; one column on phones. */
  .tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
  .tile { padding: 20px 20px 24px; }
  .tile h3 { margin-top: 20px; }

  .agent-stage { padding: 16px; }

  .steps { grid-template-columns: 1fr; gap: 28px; }
  /* Vertical connectors run node to node and stop at node 03. */
  .steps::before { display: none; }
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 32px;
    bottom: -20px;
    left: 20px;
    border-left: 1px solid var(--line-2);
  }
  .step { padding: 0 0 0 64px; }
  .step-number { position: absolute; top: -8px; left: 0; }
  .step h3 { margin-top: 0; }

  .quote { text-align: left; }
  .quote figcaption { margin-top: 24px; }

  /* Swipe instead of arrows; one card plus a peek of the next. */
  .framework-arrows { display: none; }
  .framework-track li { --in-view: 1.25; }
  .framework-card { min-height: 240px; padding: 20px; }
  .framework-card h3 { font-size: 24px; }
  .framework-card p { font-size: 15px; }
  .framework-seal { width: 88px; height: 88px; padding: 0 10px; font-size: 12px; }

  .audiences { max-width: none; }



  .section-head--center { margin-left: 0; text-align: left; }
  .section-head--center .lead { margin-left: 0; }
  #customers .globe { justify-items: start; text-align: left; }
  #customers .globe-stats,
  #customers .globe-legend { justify-content: flex-start; }
  .customers-more { text-align: left; }
  .plans-note { text-align: left; }
  .plans { max-width: none; }
  .plan { padding: 28px 24px 24px; }
  .plan--featured { padding: 27px 23px 23px; }

  .closing { text-align: left; }
  .closing-logo { margin-left: 0; height: 32px; }
  .closing p { margin-left: 0; font-size: 18px; }
  .closing-actions { justify-content: flex-start; }

  .feature-row-figure { padding: 14px; border-radius: var(--radius-tile); }
  .use-cases, .quote-cards { max-width: none; }
  .use-case, .quote-card { padding: 24px; }

  .photo-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .about-story-body { font-size: 17px; }
  .card-page-calendar { height: 1180px; }

}

@media (max-width: 520px) {
  .audience-frame--msp,
  .hero-shot--portfolio { aspect-ratio: 1 / 1; }

  .demo-form {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .demo-form:focus-within { box-shadow: none; }
  .demo-form input {
    height: 52px;
    border: 1px solid var(--line-input);
    background: #fff;
  }
  .demo-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(44, 75, 255, .16); }
  .demo-form .button { min-height: 52px; font-size: 16px; }
  .closing .button { width: 100%; }
  .post-grid, .topic-cards { grid-template-columns: minmax(0, 1fr); }
  .team-grid { grid-template-columns: minmax(0, 1fr); }
  .team-card:last-child:nth-child(odd) { grid-column: auto; width: auto; justify-self: stretch; }
  .link-cards, .link-cards--4 { grid-template-columns: minmax(0, 1fr); }
  .handbook-pager { grid-template-columns: minmax(0, 1fr); }
  .handbook-pager-link--next { grid-column: auto; }
}

@media (max-width: 420px) {
  .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Narrowest phones: let "evidence-backed" break at its hyphen rather than
   leave "perfect," and "110s" on lines of their own. */
@media (max-width: 380px) {
  .channels { grid-template-columns: 1fr; }
  .industry-stats { column-gap: 10px; }
  .industry-stats dd { font-size: 22px; }
  .hero-facts { grid-template-columns: 1fr; }
  #platform-title .nowrap { white-space: normal; }
  .hero h1 .nowrap { white-space: normal; }
}