/* ai4bp.com site styles: tokens, type, layout, header, footer, buttons, section patterns, phone menu.
   Colors come from product doc 7.3. The page is charcoal, after the founder's reference (2026-11-11 16:23).
   Rules that keep the contrast checks green:
   - On charcoal and its bands: text is --white, --soft or --cyan. --edge is for borders only.
   - On a pink or cyan fill: text is --charcoal.
   - Pink is a fill or a mark, never text, except the 4 of the ai4bp name (.brand-4), which is pink wherever the name
     shows: it is the logotype.
   - The light tokens (--paper, --line, --ink-2) are for white paper inside a mockup, such as a letter, and nowhere else.
   Every other stylesheet uses these tokens, never a raw color. */

:root {
  color-scheme: dark;

  --white: #FFFFFF;
  --charcoal: #121212;
  --pink: #FF3D9A;
  --pink-hover: #FF6BB0;
  --cyan: #39DDF1;

  --paper: #F5F5F5;   /* light panel */
  --line: #EAEAEA;    /* light border */
  --ink-2: #5A5A5A;   /* secondary text on light */
  --soft: #B0B0B0;    /* secondary text on dark */
  --edge: #5A5A5A;    /* quiet borders and dividers on dark; never text there */
  --panel: #202020;
  --elev: #292929;
  --hair: #333333;

  /* Translucent fills. Text on them keeps at least 4.5:1 (checked by test/check.sh). */
  --veil: rgba(255, 255, 255, 0.06);
  --veil-2: rgba(255, 255, 255, 0.1);
  --cyan-veil: rgba(57, 221, 241, 0.12);
  --cyan-line: rgba(57, 221, 241, 0.55);
  --pink-veil: rgba(255, 61, 154, 0.16);
  /* Page bands: a little lighter than the charcoal page, and a little deeper (dark sections, the closing call). */
  --band: rgba(255, 255, 255, 0.03);
  --deep: rgba(0, 0, 0, 0.32);
  /* Negative spread keeps the shadow under the card, none in the phone gutter. On charcoal it reads as depth, not haze. */
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 24px 48px -24px rgba(0, 0, 0, 0.75);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25), 0 12px 22px -14px rgba(0, 0, 0, 0.6);

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Space Grotesk", "Inter", system-ui, sans-serif; /* headings and the logo, as in the founder's reference */
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --max: 1200px;
  --gutter: 16px;
  --section: clamp(64px, 10vw, 144px);
  --radius: 16px;
}

@media (min-width: 761px) {
  :root { --gutter: 32px; }
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--charcoal);
  color: var(--white);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (min-width: 900px) {
  body { font-size: 18px; }
}

img, svg { max-width: 100%; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; }
code, pre, kbd { font-family: var(--mono); }

/* Links on the charcoal page: cyan, as in the founder's reference. Mockups, the header and the footer set their own. */
a {
  color: var(--cyan);
  text-decoration: underline;
  text-decoration-color: var(--cyan-line);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-color: var(--cyan); }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 8px; top: -60px; background: var(--white); color: var(--charcoal); padding: 10px 14px; border-radius: 8px; z-index: 30; }
.skip-link:focus { top: 8px; }

/* ---------- Type ---------- */

.display {
  font-size: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.035em;
}
.h2, .section h2 {
  font-size: clamp(1.75rem, 1.15rem + 2.2vw, 3rem);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.h3, .section h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.lead {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.5;
  color: var(--soft);
  max-width: 34em;
}
.band-dark .copy > p, .band-dark .section-head > p { color: var(--soft); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 20px;
  font: 500 13px/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--soft);
}
.eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--pink); flex: none; }
.band-dark .eyebrow, .cta-band .eyebrow { color: var(--cyan); }

.note { font-size: 14px; line-height: 1.5; color: var(--soft); }
.mono { font-family: var(--mono); font-size: 0.9em; }

/* Short list with pink square marks. */
.ticks { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 22px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; background: var(--pink); }

/* ---------- Layout ---------- */

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}
.section { padding-block: var(--section); }
.section-tight { padding-block: clamp(56px, 7vw, 96px); }
/* Neighbours on the same background share one gap (96-160px on desktop, 56-80px on phones): the second drops its top padding.
   A change of background keeps both paddings. */
:is(.hero, .section, .section-tight):not(.band-paper, .band-dark) + :is(.section, .section-tight):not(.band-paper, .band-dark),
.band-paper + .band-paper, .band-dark + .band-dark { padding-top: 0; }
.band-paper { background: var(--band); }
.band-dark { background: var(--deep); color: var(--white); }

.stack > * + * { margin-top: 1.25rem; }
.center { text-align: center; }
.center .lead { margin-inline: auto; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.center .row { justify-content: center; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* Section pattern: a short head, then one large mockup. */
.section-head { max-width: 44rem; margin-bottom: clamp(32px, 5vw, 64px); }
.section-head .lead { margin-top: 20px; }
.center .section-head, .section-head.center { margin-inline: auto; }

/* Hero: one-line headline, two-line subhead, a primary action, then the product. */
.hero { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(56px, 8vw, 112px); }
.hero .display { max-width: 15ch; }
.hero .lead { margin-top: 20px; max-width: 42em; }
.hero .row { margin-top: 28px; }
.hero-shot { margin-top: clamp(32px, 4vw, 56px); }

/* Section pattern: text beside a large mockup. The text is the narrow column. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.split.is-rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split.is-rev > .copy { order: 2; }
.split.is-wide { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.split.is-wide.is-rev { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.split .copy .lead { margin-top: 20px; }
.split .copy .row { margin-top: 28px; }
@media (max-width: 900px) {
  .split, .split.is-rev, .split.is-wide, .split.is-wide.is-rev { grid-template-columns: minmax(0, 1fr); }
  .split.is-rev > .copy { order: -1; }
}

/* Section pattern: three stages, each a number, a name, two sentences and a small mockup. */
.stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.stage { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.stage .num { font: 500 13px/1 var(--mono); letter-spacing: 0.08em; color: var(--soft); }
.stage > .copy h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.025em; }
.stage > .copy p { color: var(--soft); margin: 0; }
.stage .copy { display: grid; gap: 12px; align-content: start; min-height: 11.5rem; }
@media (max-width: 900px) {
  .stages { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .stage .copy { min-height: 0; }
}

/* Section pattern: closing call to action. */
.cta-band { background: var(--deep); border-top: 1px solid var(--hair); color: var(--white); text-align: center; padding-block: clamp(72px, 11vw, 160px); }
.cta-band h2 { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.75rem); line-height: 1.06; font-weight: 600; letter-spacing: -0.035em; max-width: 18ch; margin-inline: auto; }
.cta-band .wrap > p:not(.eyebrow) { color: var(--soft); max-width: 32em; margin: 20px auto 0; }
.cta-band .row { justify-content: center; margin-top: 36px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px;
  border: 1.5px solid transparent; border-radius: 999px;
  font: 500 16px/1 var(--sans);
  text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-pink { background: var(--pink); color: var(--charcoal); font-weight: 600; }
.btn-pink:hover { background: var(--pink-hover); }
.btn-dark { background: var(--elev); border-color: var(--edge); color: var(--white); }
.btn-dark:hover { background: var(--hair); border-color: var(--soft); }
.btn-line { border-color: var(--edge); color: var(--white); background: transparent; }
.btn-line:hover { background: var(--veil); border-color: var(--soft); }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 15px; }
.btn .arrow { transition: transform 0.15s ease; }
.btn:hover .arrow { transform: translateX(3px); }
.cta-band :focus-visible { outline-color: var(--cyan); }

/* ---------- Header and phone menu ---------- */

.site-header { position: sticky; top: 0; z-index: 20; background: var(--charcoal); border-bottom: 1px solid var(--hair); }
.site-header .bar {
  display: flex; align-items: center; gap: 12px;
  max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto;
  min-height: 68px; padding: 8px max(var(--gutter), env(safe-area-inset-right)) 8px max(var(--gutter), env(safe-area-inset-left));
}
.wordmark {
  font: 600 24px/1 var(--display); letter-spacing: -0.05em; text-decoration: none; color: var(--white);
  padding: 8px 0; margin-right: 8px;
}
.wordmark:hover { text-decoration: none; }
/* The founder's call (2026-11-11): the 4 of ai4bp is pink in the logo, the favicon and every mention. */
.brand-4 { color: var(--pink); }
.site-header .nav { display: flex; align-items: center; gap: 4px; margin-right: auto; }
.site-header .nav a {
  font-size: 15px; padding: 8px 12px; border-radius: 8px; text-decoration: none; color: var(--soft);
}
.site-header .nav a:hover { background: var(--veil); color: var(--white); }
.site-header .nav a[aria-current="page"] { color: var(--white); box-shadow: inset 0 -3px 0 var(--pink); border-radius: 8px 8px 0 0; font-weight: 500; }
.menu-toggle {
  display: none; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  background: transparent; color: var(--white); border: 1.5px solid var(--edge); border-radius: 999px;
  font: 500 15px/1 var(--sans); cursor: pointer;
}
.menu-toggle .bars { width: 14px; height: 10px; border-block: 2px solid var(--white); position: relative; }
.menu-toggle .bars::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 2px; background: var(--white); }

@media (max-width: 760px) {
  .site-header .bar { flex-wrap: wrap; min-height: 60px; }
  .wordmark { margin-right: auto; }
  /* The menu button sits just before the nav in the markup, so Tab goes from it into the links.
     CSS order puts "Try the demo" left of Menu on screen, and the open nav on its own row below. */
  .site-header .btn-pink { order: 1; }
  .js .menu-toggle { display: inline-flex; order: 2; }
  .site-header .nav { order: 9; flex: 1 0 100%; flex-direction: column; align-items: stretch; margin: 0; padding: 4px 0 12px; }
  /* Hidden only once site.js has run; without JS the links stay visible. */
  .js .site-header .nav { display: none; }
  .js .site-header[data-open] .nav { display: flex; }
  .site-header .nav a { padding: 14px 4px; font-size: 18px; border-radius: 0; border-top: 1px solid var(--hair); }
  .site-header .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--pink); padding-left: 14px; border-radius: 0; }
}

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--hair); background: var(--charcoal); color: var(--soft); font-size: 14px; line-height: 1.5; }
.site-footer .inner {
  max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto;
  padding: 40px max(var(--gutter), env(safe-area-inset-right)) 48px max(var(--gutter), env(safe-area-inset-left));
  display: grid; gap: 24px;
}
.site-footer .foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer .foot-links a { color: var(--white); text-decoration: none; padding: 4px 0; }
.site-footer .foot-links a:hover { text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 0.12em; text-underline-offset: 0.18em; }
.site-footer .fine { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; }
.site-footer p { margin: 0; }

/* ---------- Optional reveal (opted in with data-reveal; transform only, so contrast is never affected) ---------- */

.reveal-ready [data-reveal] { transform: translateY(18px); transition: transform 0.5s ease; }
.reveal-ready [data-reveal].is-in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal] { transform: none; transition: none; }
  .btn, .btn .arrow { transition: none; }
}