/* ==========================================================================
   BodyPlan marketing design system
   --------------------------------------------------------------------------
   Loaded on every page via base.html, after the Tailwind 2 CDN build so the
   token-driven rules here win over utility defaults.

   Palette lock: one accent for the whole site, --bp-accent (#4d8cff, the
   brand blue). Ink is the app's navy. Everything else is a cool slate ramp.
   No section introduces a colour of its own.

   Radius rule (documented so it can be followed consistently):
     --bp-r-xs   chips, dots, small tags
     --bp-r-sm   inputs, inline controls
     --bp-r-md   buttons
     --bp-r-lg   cards, panels, media frames
     --bp-r-xl   full-bleed feature surfaces and device frames
     9999px      avatars and status dots only
   ========================================================================== */

:root {
  /* Brand ---------------------------------------------------------------- */
  --bp-accent: #4d8cff;
  --bp-accent-strong: #3568c8;
  --bp-accent-deep: #24518f;
  /* Label colour that sits on an accent fill. */
  --bp-on-accent: #ffffff;
  --bp-accent-soft: #eff5ff;
  --bp-accent-line: rgba(77, 140, 255, 0.28);
  --bp-accent-glow: rgba(77, 140, 255, 0.22);

  /* Surfaces ------------------------------------------------------------- */
  --bp-bg: #ffffff;
  --bp-bg-sunken: #f6f8fc;
  --bp-bg-raised: #ffffff;
  --bp-bg-inverse: #0a1733;
  --bp-bg-inverse-2: #0e1f42;

  /* Ink ------------------------------------------------------------------ */
  --bp-ink: #0a1733;
  --bp-ink-2: #40506d;
  --bp-ink-3: #64728c;
  --bp-ink-inverse: #f6f8fc;
  --bp-ink-inverse-2: #a9bad6;

  /* Lines and shadows ---------------------------------------------------- */
  --bp-line: rgba(10, 23, 51, 0.10);
  --bp-line-strong: rgba(10, 23, 51, 0.18);
  --bp-shadow-sm: 0 1px 2px rgba(10, 23, 51, 0.05);
  --bp-shadow-md: 0 2px 4px rgba(10, 23, 51, 0.04), 0 12px 28px -18px rgba(10, 23, 51, 0.24);
  --bp-shadow-lg: 0 2px 6px rgba(10, 23, 51, 0.05), 0 28px 60px -30px rgba(10, 23, 51, 0.35);

  /* Radius --------------------------------------------------------------- */
  --bp-r-xs: 8px;
  --bp-r-sm: 10px;
  --bp-r-md: 14px;
  --bp-r-lg: 20px;
  --bp-r-xl: 28px;

  /* Type ----------------------------------------------------------------- */
  --bp-font-display: "Sora", "Manrope", "SF Pro Display", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --bp-font-body: "Manrope", "SF Pro Text", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --bp-fs-display: clamp(2.3rem, 1.3rem + 3.4vw, 3.85rem);
  --bp-fs-h2: clamp(1.7rem, 1.15rem + 1.9vw, 2.55rem);
  --bp-fs-h3: clamp(1.12rem, 1rem + 0.45vw, 1.38rem);
  --bp-fs-lead: clamp(1.04rem, 0.98rem + 0.3vw, 1.2rem);
  --bp-fs-body: 1rem;
  --bp-fs-sm: 0.9rem;
  --bp-fs-xs: 0.8rem;

  /* Layout --------------------------------------------------------------- */
  --bp-page-max: 1200px;
  --bp-gutter: clamp(1.25rem, 3.2vw, 2.5rem);
  --bp-inset: max(var(--bp-gutter), calc(50vw - (var(--bp-page-max) / 2) + var(--bp-gutter)));
  /* Applied top and bottom, so two stacked sections read as roughly twice
     this. Tuned against that doubling, not in isolation. */
  --bp-section-y: clamp(2.75rem, 4vw, 4rem);
  --bp-measure: 62ch;

  /* Motion --------------------------------------------------------------- */
  --bp-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --bp-dur: 0.32s;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bp-accent: #74a5ff;
    --bp-accent-strong: #8fb8ff;
    --bp-accent-deep: #b7d0ff;
    --bp-on-accent: #0a1733;
    --bp-accent-soft: rgba(77, 140, 255, 0.13);
    --bp-accent-line: rgba(116, 165, 255, 0.34);
    --bp-accent-glow: rgba(77, 140, 255, 0.3);

    --bp-bg: #070d1c;
    --bp-bg-sunken: #0b1428;
    --bp-bg-raised: #101c36;
    --bp-bg-inverse: #101c36;
    --bp-bg-inverse-2: #16264a;

    --bp-ink: #eef3fb;
    --bp-ink-2: #b3c2db;
    --bp-ink-3: #8496b5;
    --bp-ink-inverse: #eef3fb;
    --bp-ink-inverse-2: #a9bad6;

    --bp-line: rgba(160, 190, 235, 0.16);
    --bp-line-strong: rgba(160, 190, 235, 0.28);
    --bp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --bp-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 28px -18px rgba(0, 0, 0, 0.7);
    --bp-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.35), 0 28px 60px -30px rgba(0, 0, 0, 0.85);
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

/* base.html carries Tailwind's bg-gray-50 / text-gray-900 on <body>, so the
   token values need element+class specificity to take over. */
body,
body.bg-gray-50 {
  font-family: var(--bp-font-body);
  background-color: var(--bp-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body,
body.text-gray-900 {
  color: var(--bp-ink);
}

/* Marketing pages lay out their own full-bleed bands, so they opt out of the
   shared .main-gradient wrapper and the <main> gutter and handle both through
   .bp-container / .bp-bleed. Set via {% block body_class %} in base.html. */
body.bp-page-marketing .main-gradient {
  background: var(--bp-bg);
}

body.bp-page-marketing .main-gradient > main {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}

::selection {
  background: var(--bp-accent-glow);
  color: var(--bp-ink);
}

/* Visible focus everywhere, never removed. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--bp-accent);
  outline-offset: 2px;
  border-radius: var(--bp-r-xs);
}

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

.bp-container {
  width: 100%;
  max-width: var(--bp-page-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--bp-gutter);
  padding-right: var(--bp-gutter);
}

/* Full-bleed band that still lines its content up on the page grid. */
.bp-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.bp-bleed-scroller {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: var(--bp-inset);
  padding-right: var(--bp-inset);
  scroll-padding-left: var(--bp-inset);
}

.bp-section {
  padding-top: var(--bp-section-y);
  padding-bottom: var(--bp-section-y);
}

.bp-section--tight {
  padding-top: calc(var(--bp-section-y) * 0.55);
  padding-bottom: calc(var(--bp-section-y) * 0.55);
}

.bp-hairline {
  border: 0;
  border-top: 1px solid var(--bp-line);
  margin: 0;
}

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

.bp-display {
  font-family: var(--bp-font-display);
  font-size: var(--bp-fs-display);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--bp-ink);
}

.bp-h2 {
  font-family: var(--bp-font-display);
  font-size: var(--bp-fs-h2);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--bp-ink);
  text-wrap: balance;
}

.bp-h3 {
  font-family: var(--bp-font-display);
  font-size: var(--bp-fs-h3);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--bp-ink);
}

.bp-lead {
  font-size: var(--bp-fs-lead);
  line-height: 1.6;
  color: var(--bp-ink-2);
  max-width: 52ch;
}

.bp-body {
  font-size: var(--bp-fs-body);
  line-height: 1.65;
  color: var(--bp-ink-2);
  max-width: var(--bp-measure);
}

.bp-small {
  font-size: var(--bp-fs-sm);
  line-height: 1.6;
  color: var(--bp-ink-3);
}

/* The one eyebrow style on the site. Rationed to three uses on the landing
   page; see the section comments there before adding a fourth. */
.bp-eyebrow {
  display: inline-block;
  font-family: var(--bp-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bp-accent-strong);
}

.bp-accent-text {
  color: var(--bp-accent-strong);
}

/* --------------------------------------------------------------------------
   Buttons
   Every variant is checked for WCAG AA text contrast against its own fill.
   -------------------------------------------------------------------------- */

.bp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--bp-r-md);
  border: 1px solid transparent;
  font-family: var(--bp-font-body);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--bp-dur) var(--bp-ease),
              border-color var(--bp-dur) var(--bp-ease),
              color var(--bp-dur) var(--bp-ease),
              transform 0.14s var(--bp-ease),
              box-shadow var(--bp-dur) var(--bp-ease);
}

.bp-btn svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Primary: white on brand blue. 4.6:1 at #3f76da. */
.bp-btn--primary {
  background: var(--bp-accent-strong);
  color: var(--bp-on-accent);
  box-shadow: 0 10px 26px -12px var(--bp-accent-glow);
}
.bp-btn--primary:hover,
.bp-btn--primary:focus-visible {
  background: var(--bp-accent-deep);
  color: var(--bp-on-accent);
  transform: translateY(-1px);
  box-shadow: 0 16px 34px -14px var(--bp-accent-glow);
}
.bp-btn--primary:active {
  transform: translateY(0) scale(0.985);
}

/* Secondary: ink on page surface, with a real border so it never dissolves. */
.bp-btn--secondary {
  background: var(--bp-bg-raised);
  color: var(--bp-ink);
  border-color: var(--bp-line-strong);
  box-shadow: var(--bp-shadow-sm);
}
.bp-btn--secondary:hover,
.bp-btn--secondary:focus-visible {
  border-color: var(--bp-accent);
  color: var(--bp-ink);
  transform: translateY(-1px);
}
.bp-btn--secondary:active {
  transform: translateY(0) scale(0.985);
}

/* On the inverse band: solid light fill, navy label. 15:1. */
.bp-btn--on-dark {
  background: #ffffff;
  color: #0a1733;
}
.bp-btn--on-dark:hover,
.bp-btn--on-dark:focus-visible {
  background: #dbe6fb;
  color: #0a1733;
  transform: translateY(-1px);
}
.bp-btn--on-dark:active {
  transform: translateY(0) scale(0.985);
}

/* Ghost on the inverse band: light label on navy, 1px stroke for the edge. */
.bp-btn--ghost-dark {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.42);
}
.bp-btn--ghost-dark:hover,
.bp-btn--ghost-dark:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.7);
  color: #ffffff;
}

.bp-btn--sm {
  padding: 0.6rem 1.05rem;
  font-size: 0.87rem;
}

.bp-btn--block {
  width: 100%;
}

/* Text link that reads as an action. */
.bp-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  font-size: 0.93rem;
  color: var(--bp-accent-strong);
  text-decoration: none;
  transition: gap 0.2s var(--bp-ease), color 0.2s var(--bp-ease);
}
.bp-link:hover,
.bp-link:focus-visible {
  gap: 0.55rem;
  color: var(--bp-accent-deep);
}
.bp-link svg {
  width: 0.85rem;
  height: 0.85rem;
}

/* --------------------------------------------------------------------------
   Surfaces
   -------------------------------------------------------------------------- */

.bp-panel {
  border-radius: var(--bp-r-lg);
  border: 1px solid var(--bp-line);
  background: var(--bp-bg-raised);
  box-shadow: var(--bp-shadow-md);
}

.bp-panel--pad {
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
}

/* The page's one inverse surface, used for the closing conversion band. */
.bp-inverse {
  background:
    radial-gradient(ellipse 70% 90% at 88% 8%, rgba(77, 140, 255, 0.28) 0%, transparent 62%),
    linear-gradient(158deg, var(--bp-bg-inverse) 0%, var(--bp-bg-inverse-2) 100%);
  color: var(--bp-ink-inverse);
}
.bp-inverse .bp-h2,
.bp-inverse .bp-h3 {
  color: #ffffff;
}
.bp-inverse .bp-lead,
.bp-inverse .bp-body {
  color: var(--bp-ink-inverse-2);
}
.bp-inverse .bp-eyebrow {
  color: #a8c6ff;
}

/* --------------------------------------------------------------------------
   Scroll reveal
   Driven by IntersectionObserver, never a scroll listener. Elements are
   visible by default so the page still reads with JS off or blocked.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .js-reveal[data-reveal="pending"] {
    opacity: 0;
    transform: translateY(18px);
  }
  .js-reveal[data-reveal="in"] {
    opacity: 1;
    transform: none;
    transition: opacity 0.62s var(--bp-ease), transform 0.62s var(--bp-ease);
    transition-delay: var(--bp-reveal-delay, 0ms);
  }
}

/* --------------------------------------------------------------------------
   Site chrome: header and footer.
   Retints the Tailwind 2 utilities used in base.html so the chrome follows
   the token palette in both colour schemes.
   -------------------------------------------------------------------------- */

.bp-nav {
  background: var(--bp-bg);
  border-bottom: 1px solid var(--bp-line);
}

.bp-nav-inner {
  min-height: 68px;
}

.bp-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: var(--bp-r-sm);
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--bp-ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s var(--bp-ease), background-color 0.2s var(--bp-ease);
}
.bp-nav-link:hover,
.bp-nav-link:focus-visible {
  color: var(--bp-ink);
  background: var(--bp-bg-sunken);
}
.bp-nav-link[aria-current="page"] {
  color: var(--bp-accent-strong);
}

.bp-footer {
  background: var(--bp-bg-sunken);
  border-top: 1px solid var(--bp-line);
  color: var(--bp-ink-2);
}

.bp-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-top: clamp(3rem, 5vw, 4.5rem);
  padding-bottom: 2.25rem;
}

.bp-footer-heading {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bp-ink-3);
  margin-bottom: 1rem;
}

.bp-footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bp-footer-links a,
.bp-footer-links button {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--bp-ink-2);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.2s var(--bp-ease);
}
.bp-footer-links a:hover,
.bp-footer-links a:focus-visible,
.bp-footer-links button:hover,
.bp-footer-links button:focus-visible {
  color: var(--bp-accent-strong);
}

.bp-footer-legal {
  border-top: 1px solid var(--bp-line);
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--bp-ink-3);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .bp-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bp-footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .bp-footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* --------------------------------------------------------------------------
   Dark-scheme corrections for the Tailwind 2 utilities that base.html and the
   secondary marketing templates rely on. Tailwind 2's CDN build ships no
   `dark:` variant, so the retint has to happen here.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  .bg-white { background-color: var(--bp-bg-raised) !important; }
  .bg-gray-50 { background-color: var(--bp-bg-sunken) !important; }
  .bg-gray-100 { background-color: var(--bp-bg-sunken) !important; }

  .text-gray-900 { color: var(--bp-ink) !important; }
  .text-gray-800 { color: var(--bp-ink) !important; }
  .text-gray-700 { color: var(--bp-ink-2) !important; }
  .text-gray-600 { color: var(--bp-ink-2) !important; }
  .text-gray-500 { color: var(--bp-ink-3) !important; }
  .text-gray-400 { color: var(--bp-ink-3) !important; }

  .border-gray-100,
  .border-gray-200,
  .border { border-color: var(--bp-line) !important; }

  .hover\:bg-gray-50:hover,
  .hover\:bg-gray-100:hover { background-color: var(--bp-bg-sunken) !important; }
  .hover\:text-gray-900:hover { color: var(--bp-ink) !important; }

  .shadow, .shadow-sm, .shadow-md, .shadow-lg { box-shadow: var(--bp-shadow-md) !important; }

  form input[type=text],
  form input[type=password],
  form input[type=email],
  form input[type=number],
  form select,
  form textarea {
    background: var(--bp-bg-sunken) !important;
    border-color: var(--bp-line-strong) !important;
    color: var(--bp-ink) !important;
  }
  form ::placeholder { color: var(--bp-ink-3) !important; }
  .helptext { color: var(--bp-ink-3) !important; }

  .main-gradient {
    background: linear-gradient(to bottom, var(--bp-bg-sunken) 0%, var(--bp-bg) 65%) !important;
  }

  .bp-wordmark-reg { color: var(--bp-ink-2) !important; }
  .bp-status-light:hover,
  .bp-status-light:focus-visible { background: var(--bp-bg-sunken) !important; }
}

/* --------------------------------------------------------------------------
   Motion opt-out
   -------------------------------------------------------------------------- */

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

/* ==========================================================================
   Shared marketing components
   --------------------------------------------------------------------------
   Promoted out of the landing page so every marketing surface uses the same
   device frame, timeline, accordion and conversion band rather than each
   template re-implementing them.
   ========================================================================== */

/* --- Device frame --------------------------------------------------------- */

.bp-device {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 9 / 19.5;
  border-radius: var(--bp-r-xl);
  padding: 0.45rem;
  background: linear-gradient(160deg, #2a3c60 0%, #131f3a 100%);
  box-shadow:
    0 0 0 1px rgba(10, 23, 51, 0.12),
    0 36px 70px -32px rgba(10, 23, 51, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.bp-device > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top;
  border-radius: calc(var(--bp-r-xl) - 0.4rem);
  background: #0a1220;
}

/* --- Checked statement list ---------------------------------------------- */

.bp-checks {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.bp-checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: var(--bp-fs-body);
  line-height: 1.55;
  color: var(--bp-ink-2);
}

.bp-checks svg {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  margin-top: 0.2rem;
  color: var(--bp-accent);
}

/* --- Step timeline -------------------------------------------------------
   The step titles carry the sequence, so there are no number chips. */

.bp-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--bp-steps-count, 4), minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.bp-steps::before {
  content: "";
  position: absolute;
  top: 1.4rem;
  left: calc(50% / var(--bp-steps-count, 4));
  right: calc(50% / var(--bp-steps-count, 4));
  height: 2px;
  background: var(--bp-accent-line);
  z-index: 0;
}

.bp-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.bp-step-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 9999px;
  background: var(--bp-bg);
  border: 2px solid var(--bp-accent-line);
  color: var(--bp-accent-strong);
  margin-bottom: 0.4rem;
}

.bp-step-marker svg { width: 1.25rem; height: 1.25rem; }

.bp-step-title {
  font-family: var(--bp-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--bp-ink);
}

.bp-step-body {
  font-size: var(--bp-fs-sm);
  line-height: 1.6;
  color: var(--bp-ink-2);
}

@media (max-width: 880px) {
  .bp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-steps::before { display: none; }
}

/* Below the two-up breakpoint the horizontal timeline has nowhere to go, and
   stacking icon over title over body turns four steps into four identical
   blocks. Rotate the timeline instead: markers run down a rail on the left
   with the copy beside them, so the sequence still reads as a sequence. */
@media (max-width: 620px) {
  .bp-steps {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: clamp(1.5rem, 4vw, 2rem);
  }
  .bp-step {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    column-gap: 1.1rem;
    row-gap: 0.35rem;
    padding-bottom: 1.9rem;
  }
  .bp-step:last-child { padding-bottom: 0; }
  .bp-step-marker {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: 0;
  }
  .bp-step-title { grid-column: 2; align-self: center; }
  .bp-step-body  { grid-column: 2; }

  /* The rail: a hairline from each marker down to the next one. */
  .bp-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 1.3rem;
    top: 2.9rem;
    bottom: 0.5rem;
    width: 2px;
    transform: translateX(-1px);
    background: var(--bp-accent-line);
  }
}

/* --- Pill links ----------------------------------------------------------- */

.bp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.bp-pills a {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.9rem;
  border-radius: 9999px;
  border: 1px solid var(--bp-line-strong);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bp-ink-2);
  text-decoration: none;
  transition: border-color 0.2s var(--bp-ease), color 0.2s var(--bp-ease), background-color 0.2s var(--bp-ease);
}

.bp-pills a:hover,
.bp-pills a:focus-visible {
  border-color: var(--bp-accent);
  color: var(--bp-accent-strong);
  background: var(--bp-accent-soft);
}

/* --- FAQ accordion -------------------------------------------------------- */

.bp-faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.bp-faq-item {
  border-radius: var(--bp-r-md);
  border: 1px solid var(--bp-line);
  background: var(--bp-bg-raised);
  padding: 1.1rem 1.25rem;
  align-self: start;
  transition: border-color 0.2s var(--bp-ease);
}

.bp-faq-item[open] { border-color: var(--bp-accent-line); }

.bp-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--bp-ink);
}

.bp-faq-item summary::-webkit-details-marker { display: none; }

.bp-faq-icon {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--bp-ink-3);
  transition: transform 0.25s var(--bp-ease), color 0.2s var(--bp-ease);
}

.bp-faq-item[open] .bp-faq-icon {
  transform: rotate(45deg);
  color: var(--bp-accent-strong);
}

.bp-faq-item p {
  margin-top: 0.85rem;
  font-size: var(--bp-fs-sm);
  line-height: 1.65;
  color: var(--bp-ink-2);
}

@media (max-width: 760px) {
  .bp-faq { grid-template-columns: 1fr; }
}

/* --- Card grid ------------------------------------------------------------ */

.bp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(0.85rem, 1.6vw, 1.15rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.bp-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.35rem 1.45rem;
  border-radius: var(--bp-r-lg);
  border: 1px solid var(--bp-line);
  background: var(--bp-bg-raised);
  text-decoration: none;
  box-shadow: var(--bp-shadow-sm);
  transition: transform var(--bp-dur) var(--bp-ease),
              border-color var(--bp-dur) var(--bp-ease),
              box-shadow var(--bp-dur) var(--bp-ease);
}

a.bp-card:hover,
a.bp-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--bp-accent-line);
  box-shadow: var(--bp-shadow-md);
}

.bp-card-title {
  font-family: var(--bp-font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--bp-ink);
}

.bp-card-body {
  font-size: var(--bp-fs-sm);
  line-height: 1.55;
  color: var(--bp-ink-2);
}

/* --- Store badges --------------------------------------------------------- */

.bp-store-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.bp-store-badge {
  display: inline-flex;
  border-radius: var(--bp-r-sm);
  overflow: hidden;
  transition: transform 0.18s var(--bp-ease);
}

.bp-store-badge:hover,
.bp-store-badge:focus-visible { transform: translateY(-2px); }

.bp-store-badge img { display: block; height: 44px; width: auto; }

@media (max-width: 560px) {
  .bp-store-badge img { height: 40px; }
}

/* --- Conversion band ------------------------------------------------------
   The single inverse surface a marketing page is allowed. */

.bp-convert {
  position: relative;
  overflow: hidden;
  padding-top: clamp(3rem, 5vw, 4.5rem);
  padding-bottom: clamp(3rem, 5vw, 4.5rem);
}

.bp-convert-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}

@media (max-width: 900px) {
  .bp-convert-inner { grid-template-columns: 1fr; }
}

/* --- Breadcrumb ----------------------------------------------------------- */

.bp-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--bp-ink-3);
}

.bp-breadcrumb a {
  color: var(--bp-ink-2);
  text-decoration: none;
  font-weight: 600;
}

.bp-breadcrumb a:hover,
.bp-breadcrumb a:focus-visible { color: var(--bp-accent-strong); }

.bp-breadcrumb [aria-current] { color: var(--bp-ink); font-weight: 600; }

/* --- Figure row -----------------------------------------------------------
   Real counts set as type on a hairline grid rather than boxed into cards. */

.bp-figures {
  display: grid;
  grid-template-columns: repeat(var(--bp-figures-count, 3), minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}

.bp-figure {
  padding-top: 1.4rem;
  border-top: 2px solid var(--bp-ink);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.bp-figure-value {
  font-family: var(--bp-font-display);
  font-size: clamp(1.9rem, 1.25rem + 2.2vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--bp-ink);
  font-variant-numeric: tabular-nums;
}

.bp-figure-label { font-size: var(--bp-fs-body); font-weight: 700; color: var(--bp-ink); }
.bp-figure-caption { font-size: var(--bp-fs-sm); line-height: 1.5; color: var(--bp-ink-3); }

.bp-figure-skeleton {
  height: clamp(1.9rem, 1.25rem + 2.2vw, 2.9rem);
  width: 60%;
  border-radius: var(--bp-r-xs);
  background: var(--bp-bg-sunken);
}

@media (max-width: 760px) {
  .bp-figures { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* --------------------------------------------------------------------------
   Chrome alignment
   The header and footer predate .bp-container and still size themselves with
   content-width / landing-nav-width, which put the logo at 100px and the
   footer at 116px while every heading on the page sat at 160px. On marketing
   pages both are pulled onto the page grid so the logo, the headlines and the
   footer columns share one left edge. App pages keep the old geometry.
   -------------------------------------------------------------------------- */

body.bp-page-marketing .bp-nav-inner,
body.bp-page-marketing .bp-footer > div {
  width: 100%;
  max-width: var(--bp-page-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--bp-gutter);
  padding-right: var(--bp-gutter);
}

/* --------------------------------------------------------------------------
   Page header
   Inner pages without a hero of their own were dropping a bare h1 straight
   under the nav with no separation, which is what made them read as unstyled.
   This gives them the same opening band the landing and SEO pages have.
   -------------------------------------------------------------------------- */

.bp-pagehead {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--bp-line);
  background:
    radial-gradient(ellipse 55% 65% at 88% 8%, var(--bp-accent-soft) 0%, transparent 70%),
    linear-gradient(170deg, var(--bp-bg) 0%, var(--bp-bg-sunken) 100%);
}

.bp-pagehead-inner {
  position: relative;
  z-index: 1;
  padding-top: clamp(2rem, 3.5vw, 3rem);
  padding-bottom: clamp(2.5rem, 4.5vw, 3.75rem);
}

.bp-pagehead .bp-breadcrumb { margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }

.bp-pagehead h1 {
  font-family: var(--bp-font-display);
  font-size: clamp(1.95rem, 1.2rem + 2.5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.06;
  color: var(--bp-ink);
  max-width: 20ch;
}

.bp-pagehead-lead {
  margin-top: 1rem;
  font-size: var(--bp-fs-lead);
  line-height: 1.6;
  color: var(--bp-ink-2);
  max-width: 56ch;
}

/* Clearance for pages that open with ordinary content. Pages whose first
   element is, or wraps, a full-width band of its own (the landing hero, a page
   header, the status banner, the releases hero) are excluded: those sit flush
   under the nav, and padding above them reads as a stray gap.

   `.bp-flush` is the general opt-out. Use it on new pages rather than adding a
   sixth page-specific class to this list. It is needed when the band is not
   the first element itself but the first thing inside a theme wrapper, which
   is why the tag alone cannot decide this. */
body.bp-page-marketing .main-gradient > main > *:first-child:not(.bp-flush):not(.bp-bleed):not(.bp-pagehead):not(.st-page):not(.rn-page) {
  padding-top: clamp(2rem, 3.5vw, 3rem);
}