/* ==========================================================================
   LeadBuoy marketing site
   Design tokens inlined from the LeadBuoy Design System (tokens/*.css).
   Kept as one file deliberately: chained @import would serialize requests
   and block first paint.
   ========================================================================== */

/* --- Tokens: color -------------------------------------------------------- */
:root {
  --color-black: #000000;
  --color-white: #FFFFFF;
  --gray-100: #F7F7F7;
  --gray-200: #E8E8E8;
  --gray-300: #D1D1D1;
  --gray-600: #666666;
  --gray-800: #333333;
  --action-blue: #0066CC;
  --color-success: #28A745;
  --color-warning: #FFC107;
  --color-error: #DC3545;
  --color-gold: #C9A661;

  --surface-page: #FFFFFF;
  --surface-subtle: var(--gray-100);
  --surface-card: #FFFFFF;
  --border-default: var(--gray-200);
  --border-input: var(--gray-300);
  --border-strong: #000000;
  --text-primary: #000000;
  --text-secondary: var(--gray-800);
  --text-muted: var(--gray-600);
  --text-inverse: #FFFFFF;
  --action-primary: #000000;
  --link: var(--action-blue);

  /* --- Tokens: type ------------------------------------------------------ */
  --font-sans: "Figtree", Helvetica, Arial, sans-serif;
  --text-display: 56px;
  --text-h1: 40px;
  --text-h2: 32px;
  --text-h3: 24px;
  --text-h4: 20px;
  --text-lg: 18px;
  --text-body: 16px;
  --text-sm: 14px;
  --text-caption: 12px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --tracking-tight: -0.01em;
  --tracking-caps: 0.08em;
  --tracking-kicker: 0.18em;

  /* --- Tokens: spacing --------------------------------------------------- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --container-wide: 1280px;
  --container-narrow: 960px;
  --gutter: 32px;
  --touch-target: 44px;

  /* --- Tokens: effects --------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-base: 0 2px 4px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 16px rgba(0,0,0,0.15);

  /* --- Site-level ---------------------------------------------------------
     The approved website draft lays out on 1200px rather than the design
     system's 1280px wide container. Honouring the draft; tokens unchanged. */
  --container: 1200px;
  --transition: 160ms ease;
}

/* Light-only for now. Declared so browsers do not auto-theme form controls.
   Dark tokens exist in the design system and can be enabled later. */
:root { color-scheme: light; }

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
}

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

/* Inline links are underlined by default. Colour alone is not enough: against
   muted body text (#666) the link blue sits at 1.03:1, so a reader who cannot
   distinguish hue cannot find the link at all — WCAG 1.4.1 wants a non-colour
   cue or 3:1 against surrounding text. Navigation, buttons, and list-shaped
   chrome carry their own affordance and opt out below. */
a { color: var(--link); text-decoration: underline; text-underline-offset: 0.15em;
    text-decoration-thickness: 0.07em; transition: color var(--transition); }
a:hover { color: var(--text-primary); }

.site-nav a, .site-footer a, .brand, .btn, .breadcrumb a, .legal__toc a,
.skip-link, .site-footer__list a { text-decoration: none; }
.site-nav a:not(.btn):hover, .site-footer a:hover,
.breadcrumb a:hover, .legal__toc a:hover { text-decoration: underline; }
::selection { background: var(--action-blue); color: var(--color-white); }

h1, h2, h3, h4 { margin: 0; font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); line-height: 1.15; }
p { margin: 0; }
/* Reset here rather than inline: an inline style attribute outranks every
   stylesheet rule, which would silently kill responsive margin overrides. */
figure { margin: 0; }

hr { border: 0; border-top: 1px solid var(--border-default); margin: var(--space-6) 0; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Visually hidden but available to assistive tech. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-2); top: -100px; z-index: 100;
  display: inline-flex; align-items: center; height: var(--touch-target);
  padding: 0 var(--space-3); background: var(--color-black); color: var(--color-white);
  border-radius: var(--radius-pill); font-weight: var(--weight-medium);
  transition: top var(--transition);
}
.skip-link:focus { top: var(--space-2); color: var(--color-white); }

/* --- Layout --------------------------------------------------------------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }

.section { padding: var(--space-10) 0; border-bottom: 1px solid var(--border-default); }
.section--band { background: var(--surface-subtle); }
.section--flush { border-bottom: 0; }

.section-head { max-width: 62ch; }
.section-head > * + * { margin-top: var(--space-2); }

.stack > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-4); }

.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* --- Typography ----------------------------------------------------------- */
.kicker {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--weight-medium);
}

/* balance beats pretty for short display headings: it evens the line
   lengths instead of only guarding against orphans. */
.display { font-size: clamp(38px, 5.4vw, 60px); line-height: 1.03; letter-spacing: -0.025em;
           text-wrap: balance; }
.h1 { font-size: clamp(30px, 3.6vw, var(--text-h1)); }
.h2 { font-size: clamp(26px, 3vw, var(--text-h2)); }
.h3 { font-size: var(--text-h3); }
.h4 { font-size: var(--text-h4); }

.lede { font-size: var(--text-lg); line-height: 1.55; color: var(--text-secondary); }
.lede--lg { font-size: var(--text-h4); }
.muted { color: var(--text-muted); }
.small { font-size: var(--text-sm); }
.caption { font-size: var(--text-caption); color: var(--text-muted); }
.tabular { font-variant-numeric: tabular-nums; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touch-target); padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  font-family: inherit; font-size: var(--text-body); font-weight: var(--weight-medium);
  line-height: 1; text-align: center; cursor: pointer;
  border: 1px solid transparent;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition);
}
.btn--primary { background: var(--action-primary); color: var(--text-inverse); }
.btn--primary:hover { background: var(--action-blue); color: var(--text-inverse); }

.btn--secondary { background: transparent; color: var(--text-primary); border-color: var(--color-black); }
.btn--secondary:hover { background: var(--color-black); color: var(--text-inverse); }

.btn--lg { min-height: 48px; padding: 0 var(--space-4); font-size: 17px; }
.btn:active { opacity: 0.85; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* --- Header / nav --------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-default);
}
.site-header__inner {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
  min-height: 72px; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 11px; color: var(--text-primary); flex-shrink: 0; }
.brand:hover { color: var(--text-primary); }
.brand__mark {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(180deg, #FFFFFF, #E9E9E7);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.95),
              inset 0 -1px 2px rgba(0,0,0,0.07),
              0 2px 6px rgba(0,0,0,0.14);
  display: inline-flex; align-items: center; justify-content: center; color: var(--color-black);
}
.brand__mark svg { width: 27px; height: 27px; }
.brand__name { font-size: var(--text-h4); font-weight: var(--weight-bold); letter-spacing: -0.02em; }

.site-nav { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: var(--weight-medium); flex-wrap: wrap; }
/* :not(.btn) so the nav link colour never leaks into a button rendered as an
   <a>. `.site-nav a` (0-1-1) would otherwise outrank `.btn--primary` (0-1-0)
   and paint white button text #333 on black. */
.site-nav a:not(.btn) { color: var(--text-secondary); }
.site-nav a:not(.btn):hover { color: var(--text-primary); }
.site-nav .btn { font-size: 15px; }

/* --- Cards ---------------------------------------------------------------- */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), border-color var(--transition);
}
.card--lift:hover { box-shadow: var(--shadow-md); border-color: var(--border-input); }
.card > * + * { margin-top: var(--space-1); }
.card__title { font-size: var(--text-h4); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }

/* --- Chips / badges ------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-default);
  font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary);
  background: var(--surface-card);
}
.chip--solid { background: var(--color-black); color: var(--text-inverse); border-color: var(--color-black); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--radius-sm);
  font-size: var(--text-caption); font-weight: var(--weight-medium);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  background: var(--surface-subtle); color: var(--text-secondary);
}

/* --- Steps ---------------------------------------------------------------- */
.step__num {
  font-size: var(--text-caption); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps); color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--color-black); color: var(--text-inverse); padding: var(--space-8) 0 var(--space-5); }
.site-footer a { color: rgba(255,255,255,0.72); }
.site-footer a:hover { color: var(--color-white); }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--space-5); }
.site-footer__heading {
  font-size: var(--text-caption); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: rgba(255,255,255,0.5);
  font-weight: var(--weight-medium); margin-bottom: var(--space-2);
}
.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list li + li { margin-top: 10px; }
.site-footer__list a { font-size: 15px; }
.site-footer__legal {
  margin-top: var(--space-6); padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.16);
  font-size: var(--text-sm); color: rgba(255,255,255,0.6);
}
.site-footer__legal p + p { margin-top: var(--space-2); }
.site-footer .brand, .site-footer .brand:hover { color: var(--color-white); }

/* --- Forms ---------------------------------------------------------------- */
.field { display: block; }
.field + .field { margin-top: var(--space-2); }
.field__label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 6px; }
.field__hint { display: block; font-size: var(--text-caption); color: var(--text-muted); margin-top: 6px; }

.input, .select, .textarea {
  width: 100%; min-height: var(--touch-target);
  padding: 10px var(--space-2);
  font-family: inherit; font-size: var(--text-body); color: var(--text-primary);
  background: var(--surface-card);
  border: 1px solid var(--border-input); border-radius: var(--radius-md);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.textarea { min-height: 120px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--color-black); box-shadow: 0 0 0 3px rgba(0,102,204,0.15);
}
.input::placeholder { color: var(--text-muted); }

.checkbox-row { display: flex; gap: 12px; align-items: flex-start; }
.checkbox-row input[type="checkbox"] {
  width: 20px; height: 20px; margin: 2px 0 0; flex-shrink: 0;
  accent-color: var(--action-blue); cursor: pointer;
}
.checkbox-row label { font-size: var(--text-sm); line-height: 1.5; color: var(--text-secondary); }

/* --- Tables --------------------------------------------------------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.table th, .table td { text-align: left; padding: 14px var(--space-2); border-bottom: 1px solid var(--border-default); vertical-align: top; }
.table th {
  font-size: var(--text-caption); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--text-muted); font-weight: var(--weight-medium);
}
.table tbody tr:last-child td { border-bottom: 0; }

/* --- Callouts ------------------------------------------------------------- */
.callout {
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--color-black);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  padding: var(--space-3);
}
.callout > * + * { margin-top: var(--space-1); }
.callout--strong { border-left-color: var(--action-blue); }

/* --- Legal document layout ------------------------------------------------ */
.legal { padding: var(--space-8) 0 var(--space-10); }
.legal__layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-8); align-items: start; }
/* min-width:0 on both grid items: `1fr` means minmax(auto, 1fr), and that
   `auto` floor is the item's min-content. `.table` sets min-width:520px, so
   without this the track inflates to 520px and BOTH items overflow a narrow
   container — clipping the legal text on mobile. Zeroing the floor lets
   `.table-wrap`'s overflow-x:auto absorb the table instead. */
.legal__toc { position: sticky; top: 104px; min-width: 0; }
.legal__toc-heading {
  font-size: var(--text-caption); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--text-muted);
  font-weight: var(--weight-medium); margin-bottom: var(--space-2);
}
.legal__toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.legal__toc li { counter-increment: toc; margin-bottom: 10px; }
.legal__toc a { font-size: var(--text-sm); color: var(--text-secondary); display: block; }
.legal__toc a::before { content: counter(toc) ". "; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.legal__toc a:hover { color: var(--text-primary); }

.legal__body { max-width: 72ch; min-width: 0; overflow-wrap: break-word; }
.legal__body section { scroll-margin-top: 96px; }
.legal__body section + section { margin-top: var(--space-6); }
.legal__body h2 { font-size: var(--text-h3); margin-bottom: var(--space-2); }
.legal__body h3 { font-size: var(--text-h4); margin: var(--space-3) 0 var(--space-1); }
.legal__body p + p { margin-top: var(--space-2); }
.legal__body ul, .legal__body ol { margin: var(--space-2) 0; padding-left: var(--space-3); }
.legal__body li + li { margin-top: var(--space-1); }
.legal__body strong { font-weight: var(--weight-bold); }

.legal__meta { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }

.doc-quote {
  border: 1px solid var(--border-input); border-radius: var(--radius-md);
  background: var(--surface-card); padding: var(--space-3);
  font-size: 15px; line-height: 1.6;
}

/* --- Breadcrumb ----------------------------------------------------------- */
.breadcrumb { font-size: var(--text-sm); color: var(--text-muted); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: var(--space-1); color: var(--border-input); }

/* --- Message samples (SMS specimens) -------------------------------------- */
.msg-list { display: grid; gap: var(--space-2); }
.msg {
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-3); background: var(--surface-card); max-width: 62ch;
}
.msg--inbound { background: var(--surface-subtle); }
.msg__meta {
  font-size: var(--text-caption); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--text-muted);
  font-weight: var(--weight-medium); margin-bottom: 6px;
}
.msg__body { font-size: 15px; line-height: 1.55; }

/* --- Specimen (non-live UI illustration) ---------------------------------- */
.specimen { border: 2px dashed var(--border-input); border-radius: var(--radius-lg); padding: var(--space-3); background: var(--surface-subtle); }
.specimen__caption {
  display: flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-caption); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--text-muted);
  font-weight: var(--weight-medium); margin-bottom: var(--space-2);
}
.specimen__frame { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-4); }

/* --- Utilities ------------------------------------------------------------ */
.flow > * + * { margin-top: var(--space-3); }
.row { display: flex; gap: var(--space-1); flex-wrap: wrap; align-items: center; }
.row--gap2 { gap: var(--space-2); }
.mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); }
.measure { max-width: 62ch; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
  .legal__layout { grid-template-columns: 1fr; gap: var(--space-4); }
  .legal__toc { position: static; }
  .legal__toc ol { columns: 2; column-gap: var(--space-4); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
}

@media (max-width: 720px) {
  :root { --gutter: 20px; }
  .section { padding: var(--space-6) 0; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-header__inner { min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
  .site-nav { gap: var(--space-2); font-size: 14px; }
  .legal__toc ol { columns: 1; }
  .legal { padding: var(--space-5) 0 var(--space-8); }
}

@media print {
  .site-header, .site-footer, .skip-link, .legal__toc { display: none; }
  body { font-size: 11pt; }
  a { color: #000; }
  .legal__body { max-width: none; }
}

/* ==========================================================================
   Page components
   ========================================================================== */

/* --- Hero ----------------------------------------------------------------- */
.hero { border-bottom: 1px solid var(--border-default); }
.hero__inner {
  max-width: var(--container); margin: 0 auto; padding: var(--space-10) var(--gutter) 0;
  display: grid; grid-template-columns: 1.08fr 0.92fr; gap: var(--space-8); align-items: start;
}
.hero__copy { padding-bottom: var(--space-10); }
.hero__media { position: relative; align-self: stretch; min-height: 560px; }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.45) 100%); }
.hero__card {
  position: absolute; left: 28px; right: 28px; bottom: 28px;
  background: var(--surface-card); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: 20px 22px;
}

/* Sample-record card internals */
.rec__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1); margin-bottom: 14px; }
.rec__flag {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px;
  border-radius: 6px; background: var(--color-warning); color: var(--color-black);
  font-size: var(--text-caption); font-weight: 600;
}
.rec__flag svg { width: 13px; height: 13px; flex-shrink: 0; }
.rec__addr { font-size: 19px; font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); margin-bottom: 3px; }
.rec__sub { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-2); }
.rec__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-1);
  padding: 14px 0; border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default);
}
.rec__k { font-size: 11px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); font-weight: var(--weight-medium); }
.rec__v { font-size: var(--text-sm); font-weight: var(--weight-medium); margin-top: 3px; }
.rec__v--blue { color: var(--action-blue); }
.rec__actions { display: flex; gap: var(--space-1); margin-top: var(--space-2); }
.rec__action {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  height: 40px; border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  border: 1px solid var(--border-input); color: var(--text-primary);
}
.rec__action--primary { background: var(--color-black); color: var(--text-inverse); border-color: var(--color-black); }

/* --- Fact strip ----------------------------------------------------------- */
.fact-strip { background: var(--surface-subtle); border-bottom: 1px solid var(--border-default); }
.fact-strip__inner {
  max-width: var(--container); margin: 0 auto; padding: 36px var(--gutter);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4);
}
.fact__t { font-size: 15px; font-weight: 600; }
.fact__d { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; margin-top: 5px; }

/* --- Section heading block ------------------------------------------------ */
.eyebrow {
  font-size: var(--text-caption); letter-spacing: var(--tracking-kicker);
  text-transform: uppercase; color: var(--action-blue); font-weight: var(--weight-medium);
  margin-bottom: 10px;
}
.section-title { font-size: clamp(28px, 3.6vw, var(--text-h1)); letter-spacing: -0.02em; margin-bottom: 14px; }
.section-intro { font-size: var(--text-lg); color: var(--text-secondary); line-height: 1.6; max-width: 64ch; }

/* --- Steps ---------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.step { border-top: 2px solid var(--color-black); padding-top: 20px; }
.step h3 { font-size: 22px; margin: 10px 0; }
.step p { font-size: 15px; color: var(--text-muted); line-height: 1.6; }

/* --- Signals -------------------------------------------------------------- */
.signal-groups { display: flex; flex-direction: column; gap: 44px; }
.signal-group { display: grid; grid-template-columns: 190px 1fr; gap: var(--space-4); align-items: start; }
.signal-group__head { border-top: 2px solid var(--color-black); padding-top: var(--space-2); }
.signal-group__head h3 { font-size: 17px; margin-bottom: 4px; }
.signal-group__head p { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; }
.signal-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.signal-card {
  background: var(--surface-subtle); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  /* Design system: transitions are restricted to colour and shadow, so the
     hover "lift" is a deeper shadow rather than a transform. --transition is
     160ms, inside the 150-200ms the system allows. */
  transition: box-shadow var(--transition), border-color var(--transition),
              background-color var(--transition);
}
.signal-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-input);
  background: var(--surface-card);
}
.signal-card h4 { font-size: var(--text-body); font-weight: 600; margin-bottom: 7px; letter-spacing: 0; }
.signal-card p { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.55; }

/* --- Features ------------------------------------------------------------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.feature {
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: var(--space-3); background: var(--surface-card);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), border-color var(--transition);
}
.feature:hover { box-shadow: var(--shadow-md); border-color: var(--border-input); }
.feature h3 { font-size: var(--text-h4); margin-bottom: 10px; }
.feature p { font-size: 15px; color: var(--text-muted); line-height: 1.6; }
.feature__demo { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border-default); }

/* --- App mock ------------------------------------------------------------- */
.mock {
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  background: var(--surface-card); box-shadow: var(--shadow-md); overflow: hidden;
}
.mock__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-default);
}
.mock__title { font-size: var(--text-h4); font-weight: var(--weight-bold); }
.mock__tabs { display: flex; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-default); flex-wrap: wrap; }
.mock__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 14px var(--space-3); border-bottom: 1px solid var(--border-default); }
.mock__row:last-child { border-bottom: 0; }
.mock__sig { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); font-weight: var(--weight-medium); }
.mock__addr { font-size: 15px; font-weight: 600; margin-top: 3px; }
.mock__meta { font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; }
.mock__val { font-size: 15px; font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- Split (for-agents) --------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
.point + .point { margin-top: var(--space-3); }
.point h3 { font-size: var(--text-h4); margin-bottom: 6px; }
.point p { font-size: 15px; color: var(--text-muted); line-height: 1.6; }

/* --- Demo form ------------------------------------------------------------ */
.demo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
.demo__form { border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-4); background: var(--surface-card); }

/* --- Responsive additions ------------------------------------------------- */
@media (max-width: 1000px) {
  .hero__inner { grid-template-columns: 1fr; padding-top: var(--space-6); }
  .hero__copy { padding-bottom: var(--space-5); }
  .hero__media { min-height: 420px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .signal-cards { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .fact-strip__inner { grid-template-columns: repeat(2, 1fr); }
  .split, .demo { grid-template-columns: 1fr; gap: var(--space-5); }
}

@media (max-width: 720px) {
  .steps { grid-template-columns: 1fr; }
  .signal-group { grid-template-columns: 1fr; gap: var(--space-2); }
  .signal-cards { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .fact-strip__inner { grid-template-columns: 1fr; gap: var(--space-3); }
  /* Return the sample-record card to normal flow. Absolutely positioned it
     does not contribute height, so once its content reflows taller than the
     media box it overflows upward and paints over the hero copy. In flow, the
     card cannot collide; a negative top margin keeps the overlap look. */
  .hero__inner { gap: var(--space-4); }
  .hero__copy { padding-bottom: 0; }
  .hero__media { min-height: 0; }
  .hero__media img { position: static; width: 100%; height: 240px; }
  .hero__scrim { display: none; }
  .hero__card {
    position: relative; z-index: 1;
    left: auto; right: auto; bottom: auto;
    margin: -40px var(--space-2) 0;
    padding: var(--space-2);
  }
  .rec__actions { flex-wrap: wrap; }
  .rec__action { flex: 1 1 100%; }
}