/* ============================================================
   FLOWPARK MARKETING SITE — page + component layer.
   Sits on top of the design system (assets/css/styles.css).
   Every value here traces to the Claude Design source:
   `Index.dc.html`, `SiteNav.dc.html`, `SiteFooter.dc.html`.
   Design-system tokens only — no raw hex outside the token files.
   ============================================================ */

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

.fp-container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

.fp-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-brand);
}

.fp-eyebrow--muted {
  color: var(--text-muted);
  letter-spacing: 0.09em;
}

.fp-eyebrow--on-dark {
  color: var(--purple-300);
  letter-spacing: 0.14em;
}

/* the arrow-link that closes most blocks */
.fp-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-brand);
  text-decoration: none;
}
.fp-link:hover { color: var(--link-hover); text-decoration: underline; }
.fp-link svg { flex: none; }

.fp-link--lg { font-size: 15px; gap: 8px; padding: 6px 4px; }
.fp-link--on-dark { color: var(--text-on-dark); }
.fp-link--on-dark:hover { color: var(--text-on-dark); }

/* Button — mirrors FlowparkDesignSystem_b060f7.Button (variant/size/pill).
   Rendered as <a> here: these are navigations, not form actions. */
.fp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: 0;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
  transform: translateY(0);
  transition:
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.fp-btn:hover { transform: translateY(-1px); text-decoration: none; }

.fp-btn--pill { border-radius: var(--radius-pill); }

.fp-btn--sm { height: 32px; font-size: 13px; gap: 6px; padding: 0 12px; }
.fp-btn--sm.fp-btn--pill { padding: 0 22px; }   /* height/2 + 6 */
.fp-btn--lg { height: 48px; font-size: 15px; gap: 8px; padding: 0 22px; }
.fp-btn--lg.fp-btn--pill { padding: 0 30px; }   /* height/2 + 6 */

.fp-btn--primary { background: var(--brand); color: var(--text-on-brand); }
.fp-btn--primary:hover { background: var(--brand-hover); color: var(--text-on-brand); }

.fp-btn--secondary {
  background: var(--surface-card);
  color: var(--text-primary);
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-xs);
}
.fp-btn--secondary:hover {
  background: var(--surface-muted);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* ---------- site nav --------------------------------------- */

.fp-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  width: 100%;
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--surface-canvas) 88%, transparent);
  border-bottom: var(--border-width) solid
    color-mix(in srgb, var(--border-subtle) 55%, var(--surface-canvas));
  transition: border-color 160ms var(--ease-out);
}
/* the open mega-panel continues the header surface — drop the seam */
.fp-nav:has(.fp-menu:hover),
.fp-nav:has(.fp-menu:focus-within),
.fp-nav:has(.fp-menu.is-open) { border-bottom-color: transparent; }

.fp-nav__bar {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-6);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fp-nav__left { display: flex; align-items: center; gap: var(--space-8); }
.fp-nav__logo { display: inline-flex; }
/* width:auto is load-bearing — the intrinsic width/height attributes are
   presentational hints, so without it the box stays 360px wide and the SVG
   just letterboxes inside it. Same for every other height-constrained mark. */
.fp-nav__logo img { height: 24px; width: auto; display: block; }

.fp-nav__links { display: flex; align-items: center; gap: 2px; }

.fp-nav__link {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.fp-nav__link:hover,
.fp-nav__link[aria-current="page"] { color: var(--text-primary); text-decoration: none; }

.fp-nav__right { display: flex; align-items: center; gap: 14px; }

/* --- mega menu --- */
.fp-menu { position: static; }

.fp-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  padding: var(--space-2) var(--space-3);
  border: none;
  background: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  cursor: default;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.fp-menu__chev {
  opacity: 0.55;
  transition: transform var(--dur) var(--ease-out);
}
.fp-menu:hover .fp-menu__trigger,
.fp-menu:focus-within .fp-menu__trigger,
.fp-menu.is-open .fp-menu__trigger {
  color: var(--text-primary);
  background: var(--surface-subtle);
}
.fp-menu:hover .fp-menu__chev,
.fp-menu:focus-within .fp-menu__chev,
.fp-menu.is-open .fp-menu__chev { transform: rotate(180deg); }

.fp-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--surface-card);
  border-bottom: var(--border-width) solid
    color-mix(in srgb, var(--border-subtle) 55%, var(--surface-canvas));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 160ms var(--ease-out),
              transform var(--dur) var(--ease-out),
              visibility var(--dur);
}
.fp-menu:hover .fp-mega,
.fp-menu:focus-within .fp-mega,
.fp-menu.is-open .fp-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fp-mega__grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
}
.fp-mega__grid--solutions { grid-template-columns: 1fr 1fr 320px; }
.fp-mega__grid--products { grid-template-columns: 1fr; }

.fp-mega__col { padding: var(--space-8) var(--space-6) 36px; }
.fp-mega__col + .fp-mega__col {
  border-left: var(--border-width) solid
    color-mix(in srgb, var(--border-subtle) 55%, var(--surface-canvas));
}
.fp-mega__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 var(--space-3) var(--space-3);
}
.fp-mega__pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 20px; }

.fp-item {
  display: flex;
  gap: 14px;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.fp-item:hover { background: var(--surface-subtle); text-decoration: none; }
.fp-item:hover .fp-item__title { color: var(--text-brand); }
.fp-item[aria-current="page"] { background: var(--brand-subtle); }
.fp-item[aria-current="page"] .fp-item__title { color: var(--text-brand); }

.fp-item--plain { display: block; padding: 11px var(--space-3); }

.fp-item__icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--brand-subtle);
  color: var(--text-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fp-item__title {
  display: block;
  font-size: 14.5px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  transition: color var(--dur-fast) var(--ease-out);
}
.fp-item__desc {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: var(--leading-normal);
}

.fp-plain {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.fp-plain:hover { color: var(--text-primary); text-decoration: none; }

.fp-featured {
  display: block;
  text-decoration: none;
  padding: var(--space-8) var(--space-6) 36px;
  background: var(--surface-subtle);
  border-left: var(--border-width) solid
    color-mix(in srgb, var(--border-subtle) 55%, var(--surface-canvas));
  transition: border-color var(--dur-fast) var(--ease-out);
}
.fp-featured:hover { border-color: var(--border-strong); text-decoration: none; }
.fp-featured__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 14px;
}
.fp-featured__card {
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: var(--text-on-dark);
  padding: 22px var(--space-5);
}
.fp-featured__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}
.fp-featured__stat {
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: 40px;
  letter-spacing: var(--tracking-tighter);
  line-height: 1;
  margin-top: 10px;
}
.fp-featured__meta { font-size: 13px; line-height: var(--leading-normal); opacity: 0.72; margin-top: 10px; }
.fp-featured__title {
  font-size: 14.5px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-top: var(--space-4);
}
.fp-featured__desc { font-size: 13px; color: var(--text-muted); line-height: 1.55; margin-top: var(--space-1); }

/* --- hamburger + mobile drawer --- */
.fp-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-primary);
  cursor: pointer;
  padding: 0;
}

.fp-drawer {
  display: none;
  border-top: var(--border-width) solid var(--border-subtle);
  background: var(--surface-card);
  padding: var(--space-3) var(--space-5) var(--space-5);
  max-height: calc(100vh - var(--nav-height));
  overflow-y: auto;
}
.fp-drawer__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px var(--space-1) 6px;
}
.fp-drawer__group {
  border-top: var(--border-width) solid var(--border-subtle);
  margin-top: var(--space-2);
}
.fp-drawer__group .fp-drawer__label { padding-top: 14px; }
.fp-drawer__link {
  display: block;
  padding: 11px var(--space-1);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  text-decoration: none;
  border-radius: var(--radius-md);
}
.fp-drawer__link:hover { background: var(--surface-muted); text-decoration: none; }

/* ---------- hero ------------------------------------------- */

.fp-hero { padding-top: 76px; }

.fp-hero__grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 56px;
  align-items: center;
}

.fp-hero__copy { display: flex; flex-direction: column; align-items: flex-start; }

.fp-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  margin-bottom: 26px;
}

.fp-hero__title {
  font-size: clamp(38px, 5vw, 64px);
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tighter);
  line-height: 1.02;
  margin: 0;
}

.fp-hero__sub {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 520px;
  margin: var(--space-6) 0 0;
}

.fp-ctarow { display: flex; gap: 14px; align-items: center; margin-top: 34px; }

.fp-hero__media {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
}
.fp-hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* ---------- logo marquee ----------------------------------- */

.fp-marquee-section { padding-top: 72px; }

.fp-marquee__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  margin: 0 0 var(--space-10);
}

.fp-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.fp-marquee__track {
  display: flex;
  width: max-content;
  animation: fpMarquee 34s linear infinite;
}
.fp-marquee:hover .fp-marquee__track { animation-play-state: paused; }

.fp-marquee__group {
  display: flex;
  align-items: center;
  gap: 84px;
  padding-right: 84px;
}
.fp-marquee__group img {
  width: auto;
  filter: grayscale(1);
  opacity: 0.55;
}
.fp-marquee__group .fp-logo--fallback {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .02em;
  opacity: .7;
  white-space: nowrap;
}
/* per-logo optical sizing, from the design source */
.fp-logo--parkify img          { height: 28px; }
.fp-logo--key-parking img      { height: 40px; }
.fp-logo--nationwide img       { height: 66px; mix-blend-mode: multiply; }
.fp-logo--park-place img       { height: 74px; mix-blend-mode: multiply; }
.fp-logo--national-parking img { height: 34px; mix-blend-mode: multiply; }

@keyframes fpMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---------- proof bar -------------------------------------- */

.fp-proof-section { padding-top: 88px; }

.fp-proof {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--border-width);
  background: var(--border-subtle);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.fp-proof__cell {
  background: var(--surface-canvas);
  padding: 36px 28px;
  text-align: center;
}
.fp-proof__stat {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: var(--weight-extra);
  letter-spacing: -0.03em;
  color: var(--text-primary);
}
.fp-proof__label { font-size: var(--text-sm); color: var(--text-muted); margin-top: 6px; }

/* ---------- section heads ---------------------------------- */

.fp-section { padding-top: 104px; }

.fp-sectionhead { max-width: 720px; margin: 0 auto; text-align: center; }
.fp-sectionhead h2 {
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: var(--weight-extra);
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin: var(--space-4) 0 0;
  text-wrap: balance;
}
.fp-sectionhead p {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: var(--space-4) auto 0;
  max-width: 600px;
}

/* ---------- the ladder ------------------------------------- */

.fp-ladder-wrap { position: relative; margin-top: 56px; }

/* dashed rule threading the three rung badges */
.fp-ladder-line {
  position: absolute;
  top: 34px;
  left: 16%;
  right: 16%;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--border-strong) 0 8px,
    transparent 8px 16px
  );
  z-index: var(--z-base);
}

.fp-ladder {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.fp-rung { display: flex; flex-direction: column; align-items: center; text-align: center; }

.fp-rung__badge {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--text-on-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--weight-extra);
  box-shadow: 0 0 0 8px var(--surface-canvas);
}

/* no border, subtle fill, gap >= padding — DESIGN.md card rule, case 1 */
.fp-rung__card {
  margin-top: 22px;
  background: var(--surface-subtle);
  border-radius: var(--radius-lg);
  padding: 26px;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fp-rung__media {
  position: relative;
  width: calc(100% + 52px);
  margin: -26px -26px 22px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface-muted);
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.fp-rung__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fp-rung__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--brand-subtle);
  color: var(--text-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fp-rung__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--space-4);
}
.fp-rung__card h3 {
  font-size: 21px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  line-height: var(--leading-snug);
  margin: var(--space-2) 0 0;
}
.fp-rung__card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 10px 0 0;
  flex: 1;
}
.fp-rung__card .fp-link { margin-top: 18px; }

/* ---------- dark band -------------------------------------- */

.fp-band {
  background: var(--surface-dark);
  margin-top: 104px;
}
.fp-band__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-24) var(--space-6);
  text-align: center;
}
.fp-band h2 {
  font-size: clamp(32px, 4.6vw, 52px);
  font-weight: var(--weight-extra);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--text-on-dark);
  margin: 18px auto 0;
  max-width: 820px;
  text-wrap: balance;
}
.fp-band__sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-on-dark-muted);
  margin: 18px auto 0;
  max-width: 600px;
  text-wrap: balance;
}

.fp-beats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--border-width);
  background: var(--border-on-dark);
  border: var(--border-width) solid var(--border-on-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: var(--space-12) auto 0;
  max-width: 820px;
}
.fp-beat { background: var(--surface-dark); padding: 30px 22px; }
.fp-beat__title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tight);
  color: var(--text-on-dark);
}
.fp-beat--paid .fp-beat__title { color: var(--purple-300); }
.fp-beat__meta { font-size: 13px; color: var(--text-on-dark-subtle); margin-top: 6px; }

/* ---------- economics + white-label ------------------------ */

.fp-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

.fp-panel {
  background: var(--surface-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-10) 36px;
}
.fp-panel h3 {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tight);
  line-height: 1.12;
  margin: 14px 0 0;
  text-wrap: balance;
}
.fp-panel p {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 14px 0 0;
}
.fp-panel .fp-link { margin-top: 18px; }

.fp-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: 18px; }
.fp-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--text-brand);
  background: var(--brand-subtle);
  border-radius: var(--radius-pill);
  padding: 5px var(--space-3);
}

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

.fp-faq {
  max-width: 820px;
  margin: 0 auto;
  padding: 104px var(--space-6) 0;
}
.fp-faq__head { text-align: center; margin-bottom: var(--space-10); }
.fp-faq__head h2 {
  font-size: clamp(30px, 4.2vw, 44px);
  font-weight: var(--weight-extra);
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin: var(--space-4) 0 0;
}
.fp-faq__head p {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: var(--space-4) 0 0;
}
.fp-faq__head .fp-link { margin-top: 18px; }

.fp-faq__list { text-align: left; }

.fp-faq__item { border-top: var(--border-width) solid var(--border-subtle); }
.fp-faq__item:last-child { border-bottom: var(--border-width) solid var(--border-subtle); }

.fp-faq__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 22px 0;
  list-style: none;
  cursor: pointer;
}
.fp-faq__item > summary::-webkit-details-marker { display: none; }

.fp-faq__q {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
}
.fp-faq__chev {
  flex: none;
  color: var(--text-brand);
  display: inline-flex;
  transition: transform var(--dur) var(--ease-out);
}
.fp-faq__item[open] .fp-faq__chev { transform: rotate(45deg); }

.fp-faq__a {
  padding: 0 0 22px;
  font-size: 15px;
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 640px;
}

/* ---------- closing CTA ------------------------------------ */

.fp-close {
  max-width: var(--container);
  margin: 104px auto var(--space-24);
  padding: 0 var(--space-6);
}
.fp-close__panel {
  background: var(--surface-dark);
  border-radius: var(--radius-2xl);
  padding: 88px var(--space-10);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.fp-close__logo { height: 26px; width: auto; opacity: 0.95; margin-bottom: var(--space-6); }
.fp-close__panel h2 {
  font-size: clamp(34px, 5vw, 58px);
  font-weight: var(--weight-extra);
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--text-on-dark);
  margin: 0;
  text-wrap: balance;
}
.fp-close__sub {
  font-size: 19px;
  line-height: var(--leading-normal);
  color: var(--text-on-dark-muted);
  margin: 18px auto 0;
  max-width: 560px;
}
.fp-close__panel .fp-ctarow { justify-content: center; }

/* ============================================================
   SOLUTION-PAGE COMPONENTS
   Source: ScanToPay.dc.html, FlowLane.dc.html, PARCS.dc.html
   ============================================================ */

/* --- hero variant: bigger headline, 3:2 media --- */
.fp-hero--wide { padding-top: 72px; }
.fp-hero--wide .fp-hero__title { font-size: clamp(44px, 6vw, 80px); line-height: 1; }
.fp-hero--wide .fp-hero__sub { font-size: 19px; margin-top: 22px; }
.fp-hero--wide .fp-ctarow { flex-wrap: wrap; gap: var(--space-3); margin-top: 30px; }
.fp-hero--wide .fp-hero__media {
  aspect-ratio: 3 / 2;
  background: var(--surface-muted);
  border: var(--border-width) solid var(--border-subtle);
  box-shadow: var(--shadow-xl);
}
.fp-hero--wide .fp-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- borderless proof row (dividers instead of a boxed grid) --- */
.fp-proofrow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
}
.fp-proofrow > div { padding: var(--space-2) 26px; }
.fp-proofrow > div + div { border-left: var(--border-width) solid var(--border-subtle); }
.fp-proofrow__stat {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.6vw, 56px);
  font-weight: var(--weight-extra);
  letter-spacing: -0.03em;
  line-height: 1;
}
.fp-proofrow__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 14px;
}

/* --- full-bleed light band (how it works) --- */
.fp-band--subtle {
  background: var(--surface-subtle);
  border-top: var(--border-width) solid var(--border-subtle);
  border-bottom: var(--border-width) solid var(--border-subtle);
  margin-top: var(--space-24);
}
.fp-band--subtle .fp-band__inner { text-align: left; padding: var(--space-24) var(--space-6); }
/* .fp-band sets on-dark type; this variant sits on a light surface, so the
   heading colour has to be put back or it renders near-white on near-white */
.fp-band--subtle h2 { color: var(--text-primary); max-width: none; }

/* left-aligned section head, used inside bands and on solution pages */
.fp-head { max-width: 640px; }
.fp-head--wide { max-width: 680px; }
.fp-head h2 {
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: var(--weight-extra);
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin: var(--space-4) 0 0;
}
.fp-head p {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: var(--space-4) 0 0;
}

/* --- numbered step cards --- */
.fp-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 44px;
}
.fp-step {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.fp-step__num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--text-brand);
}
.fp-step h3 {
  font-size: 21px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  margin: var(--space-3) 0 0;
}
.fp-step p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin: var(--space-2) 0 0; }

/* --- inline note callout --- */
.fp-note {
  margin-top: 22px;
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  background: var(--surface-card);
  border-radius: var(--radius-md);
  padding: 18px var(--space-5);
}
.fp-note__icon { flex: none; color: var(--text-brand); margin-top: 1px; display: inline-flex; }
.fp-note p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
  font-style: italic;
}
.fp-note a { font-weight: var(--weight-semibold); font-style: normal; }

/* --- comparison table (them vs Flowpark) --- */
.fp-compare {
  margin-top: var(--space-10);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-card);
}
.fp-compare__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; }
.fp-compare__grid > * { border-bottom: var(--border-width) solid var(--border-subtle); }
/* last row keeps the container's own edge instead of doubling it */
.fp-compare__grid > :nth-last-child(-n + 3) { border-bottom: 0; }
.fp-compare__head {
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.fp-compare__head--them { color: var(--text-muted); border-left: var(--border-width) solid var(--border-subtle); }
.fp-compare__head--us { color: var(--text-brand); border-left: var(--border-width) solid var(--border-subtle); }
.fp-compare__label {
  padding: 18px var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.fp-compare__cell {
  padding: 18px var(--space-6);
  font-size: var(--text-sm);
  border-left: var(--border-width) solid var(--border-subtle);
  display: flex;
  gap: 10px;
  align-items: center;
}
.fp-compare__cell svg { flex: none; }
.fp-compare__cell--them { color: var(--text-muted); }
.fp-compare__cell--them svg { color: var(--text-muted); }
.fp-compare__cell--us { font-weight: var(--weight-semibold); color: var(--text-primary); }
.fp-compare__cell--us svg { color: var(--brand); }

.fp-compare__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
}
.fp-compare__foot p {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin: 0;
  max-width: 620px;
}
.fp-compare__foot .fp-link { font-size: 15px; white-space: nowrap; }

/* --- product cards (2-up) --- */
.fp-prodgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: var(--space-10);
}
.fp-prodcard {
  display: flex;
  gap: var(--space-4);
  background: var(--surface-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.fp-prodcard:hover { text-decoration: none; box-shadow: var(--shadow-md); }
.fp-prodcard:hover .fp-prodcard__title { color: var(--text-brand); }
.fp-prodcard__icon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: var(--brand-subtle);
  color: var(--text-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fp-prodcard__title {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  transition: color var(--dur-fast) var(--ease-out);
}
.fp-prodcard__desc {
  display: block;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-secondary);
  margin-top: var(--space-1);
}
.fp-closingline {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin: var(--space-6) 0 0;
  text-align: center;
}

/* --- migration step list --- */
.fp-migration {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}
.fp-migration h2 {
  font-size: clamp(30px, 4.2vw, 44px);
  font-weight: var(--weight-extra);
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin: var(--space-4) 0 0;
}
.fp-migration > div > p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: var(--space-4) 0 0;
}
.fp-steplist {
  display: flex;
  flex-direction: column;
  gap: var(--border-width);
  background: var(--border-subtle);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.fp-steplist > div {
  background: var(--surface-card);
  padding: var(--space-6) 26px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.fp-steplist__num {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-brand);
}
.fp-steplist p { font-size: 15px; line-height: 1.55; color: var(--text-primary); margin: 0; }

/* --- side-by-side pilot panel --- */
.fp-pilot {
  background: var(--brand-subtle);
  border-radius: var(--radius-xl);
  padding: 56px var(--space-12);
}
.fp-pilot__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 36px;
}
.fp-pilot__card {
  background: var(--surface-subtle);
  border-radius: var(--radius-lg);
  padding: 26px;
}
.fp-pilot__card > div {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--weight-extra);
  letter-spacing: -0.01em;
}
.fp-pilot__card p { font-size: var(--text-sm); line-height: 1.55; color: var(--text-secondary); margin: var(--space-2) 0 0; }
.fp-pilot__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-8);
}
.fp-pilot__foot p {
  font-size: 17px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin: 0;
  max-width: 560px;
}

/* --- PARCS hero: longer headline, 4:3 media --- */
.fp-hero--parcs .fp-hero__grid { grid-template-columns: 1.05fr 0.95fr; }
.fp-hero--parcs .fp-hero__title { font-size: clamp(38px, 4.9vw, 64px); line-height: 1.02; }
.fp-hero--parcs .fp-hero__sub { max-width: 540px; }
.fp-hero--parcs .fp-hero__media { aspect-ratio: 4 / 3; background: var(--surface-muted); }

/* --- FlowLane hero: annotated camera view --- */
.fp-hero--lpr .fp-hero__grid { grid-template-columns: 1fr 1fr; }
.fp-hero--lpr .fp-hero__media {
  aspect-ratio: 4 / 3;
  background: var(--neutral-900);
  border: var(--border-width) solid var(--border-subtle);
  box-shadow: var(--shadow-xl);
}
.fp-lpr__badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-on-dark);
  background: rgba(23, 23, 28, 0.62);
  backdrop-filter: blur(6px);
  border: var(--border-width) solid var(--border-on-dark);
  border-radius: var(--radius-pill);
  padding: 6px var(--space-3);
}
.fp-lpr__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--purple-300); }
.fp-lpr__box {
  position: absolute;
  left: 52.6%;
  top: 52.9%;
  width: 6.2%;
  height: 6.6%;
  border: 2px solid var(--purple-400);
  border-radius: var(--radius-xs);
  box-shadow: 0 0 0 1px rgba(23, 23, 28, 0.35), 0 0 22px rgba(83, 50, 243, 0.55);
}
.fp-lpr__plate {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + var(--space-2));
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  color: var(--white);
  background: var(--brand);
  border-radius: var(--radius-xs);
  padding: var(--space-1) var(--space-2);
  white-space: nowrap;
}
.fp-lpr__status {
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: rgba(23, 23, 28, 0.72);
  backdrop-filter: blur(10px);
  border: var(--border-width) solid var(--border-on-dark);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
}
.fp-lpr__status > div { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.fp-lpr__tick {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--brand);
  color: var(--text-on-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fp-lpr__label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-on-dark); }
.fp-lpr__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-on-dark-subtle);
  margin-top: 2px;
}
.fp-lpr__time {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--purple-300);
}

/* --- two-up feature cards with an icon --- */
.fp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: var(--space-10); }
.fp-pair__card {
  background: var(--surface-subtle);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-sm);
}
.fp-pair__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--brand-subtle);
  color: var(--text-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fp-pair__card h3 {
  font-size: 22px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  margin: 18px 0 0;
}
.fp-pair__card p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin: 10px 0 0; }

/* --- product-family row ("Every product runs on every solution") ---
   Treatment fixed by the design project's CLAUDE.md — copy it, don't re-author. */
.fp-productrow {
  margin-top: 22px;
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-subtle);
  padding: 22px 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-3);
  justify-content: space-between;
}
.fp-productrow__pills { display: flex; flex-wrap: wrap; gap: 10px; }
.fp-productrow__pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  text-decoration: none;
}
.fp-productrow__pill:hover { color: var(--text-primary); border-color: var(--border-strong); text-decoration: none; }
.fp-productrow__pill svg { color: var(--text-muted); flex: none; }
.fp-productrow > p {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin: 0;
}

/* --- centered brand block --- */
.fp-brandblock {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 104px var(--space-6) 0;
  text-align: center;
}
.fp-brandblock__icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--brand-subtle);
  color: var(--text-brand);
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
}
.fp-brandblock h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.fp-brandblock p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: var(--space-4) auto 0;
  max-width: 600px;
}

/* --- economics cards --- */
.fp-econ { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 44px; }
.fp-econ__card { background: var(--surface-card); border-radius: var(--radius-lg); padding: 28px; }
.fp-econ__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--brand-subtle);
  color: var(--text-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fp-econ__icon--accent { background: var(--accent-subtle); color: var(--accent-text); }
.fp-econ__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tight);
  margin-top: var(--space-4);
}
.fp-econ__card p { font-size: var(--text-sm); line-height: 1.55; color: var(--text-secondary); margin: var(--space-2) 0 0; }
.fp-econ__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
  justify-content: space-between;
  margin-top: 26px;
}
.fp-econ__foot p { font-size: 15px; color: var(--text-muted); margin: 0; max-width: 560px; }
.fp-econ__foot .fp-link { font-size: 15px; white-space: nowrap; }

/* --- three-up feature grid with icons (what's in the box) --- */
.fp-featuregrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 44px;
}
.fp-featuregrid > div {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-sm);
}
.fp-featuregrid h3 {
  font-size: 19px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  margin: var(--space-4) 0 0;
}
.fp-featuregrid p { font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); margin: var(--space-2) 0 0; }

/* --- two-column comparison (no row-label column) --- */
.fp-compare--duo .fp-compare__grid { grid-template-columns: 1fr 1fr; }
.fp-compare--duo .fp-compare__grid > :nth-last-child(-n + 2) { border-bottom: 0; }
.fp-compare--duo .fp-compare__head--them { border-left: 0; }

/* --- wide callout with a leading icon --- */
.fp-callout {
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--surface-subtle);
  padding: var(--space-12);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 36px;
  align-items: center;
}
.fp-callout__icon {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  color: var(--text-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}
.fp-callout h2 {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.fp-callout p {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: var(--space-3) 0 0;
  max-width: 760px;
}

/* --- right-sizing ladder cards (the last one is "you are here") --- */
.fp-rungs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: var(--space-10);
  align-items: stretch;
}
.fp-rungcard {
  text-decoration: none;
  background: var(--surface-subtle);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
a.fp-rungcard:hover { text-decoration: none; box-shadow: var(--shadow-md); }
.fp-rungcard__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.fp-rungcard__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-extra);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-top: 10px;
}
.fp-rungcard p { font-size: var(--text-sm); line-height: 1.55; color: var(--text-secondary); margin: var(--space-2) 0 0; flex: 1; }
.fp-rungcard .fp-link { font-size: 13px; margin-top: 14px; }

.fp-rungcard--here { background: var(--ink); box-shadow: none; }
.fp-rungcard--here .fp-rungcard__kicker { color: var(--purple-300); }
.fp-rungcard--here .fp-rungcard__name { color: var(--text-on-dark); }
.fp-rungcard--here p { color: var(--text-on-dark-muted); }

/* --- wide banner (live in production) --- */
.fp-banner {
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--surface-subtle);
  padding: var(--space-10) 44px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
  justify-content: space-between;
}
.fp-banner__lead { display: flex; gap: var(--space-4); align-items: center; }
.fp-banner__icon {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--accent-subtle);
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fp-banner__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tight);
}
.fp-banner p { font-size: 15px; color: var(--text-secondary); margin: var(--space-1) 0 0; }

/* --- closing CTA variant used by the solution pages --- */
.fp-close__panel--tight { padding: var(--space-20) var(--space-10); }
.fp-close__panel--tight h2 { font-size: clamp(34px, 5vw, 56px); line-height: 1.03; }
.fp-close__panel--tight .fp-close__sub { max-width: 620px; margin-top: var(--space-4); }

/* ============================================================
   PRODUCT-PAGE COMPONENTS
   Source: ParkingHourlyDaily / ParkingPermits /
   ParkingReservations / ParkingValidations .dc.html
   ============================================================ */

/* --- sticky product strip under the main nav --- */
.fp-subnav {
  position: sticky;
  top: var(--nav-height);
  z-index: var(--z-dropdown);
  background: color-mix(in srgb, var(--surface-canvas) 90%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.fp-subnav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  gap: var(--space-2);
  align-items: center;
  height: 52px;
  overflow-x: auto;
}
.fp-subnav__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: var(--space-2);
  white-space: nowrap;
}
.fp-subnav__link {
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  text-decoration: none;
}
.fp-subnav__link:hover { color: var(--text-primary); text-decoration: none; }
.fp-subnav__link[aria-current="page"] {
  font-weight: var(--weight-semibold);
  color: var(--text-brand);
  background: var(--brand-subtle);
}

/* --- centered product hero --- */
.fp-hero--center {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: var(--space-20) var(--space-6) 0;
  text-align: center;
}
.fp-hero--center h1 {
  font-size: clamp(42px, 5.6vw, 72px);
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tighter);
  line-height: 1.02;
  margin: 0 auto;
  max-width: 860px;
}
.fp-hero--center > p {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 620px;
  margin: 22px auto 0;
}
.fp-hero--center .fp-ctarow { justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.fp-hero__traction {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 22px 0 0;
}

/* --- app screenshot mock --- */
.fp-appmock {
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  background: var(--surface-card);
}
.fp-appmock__chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--border-subtle);
  background: var(--surface-subtle);
}
.fp-appmock__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--border-strong); }
.fp-appmock__url {
  margin-left: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.fp-appmock__body { padding: 28px; background: var(--surface-canvas); }
.fp-appmock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.fp-appmock__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tight);
}
.fp-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-text);
  background: var(--accent-subtle);
  border-radius: var(--radius-pill);
  padding: 5px 11px;
  white-space: nowrap;
}
.fp-live__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.fp-rategrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--border-width);
  background: var(--border-subtle);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.fp-rategrid > div { background: var(--surface-card); padding: 18px var(--space-5); }
.fp-rategrid__label { font-size: var(--text-xs); color: var(--text-muted); }
.fp-rategrid__value {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  margin-top: 6px;
}

.fp-override {
  margin-top: var(--space-4);
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--brand-subtle);
  border: var(--border-width) solid var(--brand-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) 18px;
}
.fp-override__icon { color: var(--text-brand); display: inline-flex; flex: none; }
.fp-override__body { flex: 1; min-width: 0; }
.fp-override__title { font-size: 13.5px; font-weight: var(--weight-semibold); color: var(--text-primary); }
.fp-override__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-brand); }
.fp-override__state {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--text-brand);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex: none;
}

/* --- week inventory calendar inside the app mock --- */
.fp-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); }
.fp-week__day {
  border: var(--border-width) solid var(--border-subtle);
  background: var(--surface-card);
  border-radius: var(--radius-md);
  padding: 14px 10px;
  text-align: center;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.fp-week__day--soldout { border-color: var(--brand-border); background: var(--brand-subtle); }
.fp-week__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fp-week__value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}
.fp-week__soldout {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--weight-extra);
  color: var(--text-brand);
}
.fp-week__note { font-size: 10.5px; color: var(--text-brand); }

.fp-presold {
  margin-top: var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  background: var(--surface-subtle);
  border-radius: var(--radius-md);
  padding: 14px 18px;
}
.fp-presold__label { font-size: 13px; color: var(--text-secondary); }
.fp-presold__value {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--accent-text);
}

/* --- roster table inside the app mock --- */
.fp-tablescroll { overflow-x: auto; border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-md); }
.fp-roster { min-width: 620px; }
.fp-roster__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 0.8fr;
  align-items: center;
}
.fp-roster__row + .fp-roster__row { border-top: var(--border-width) solid var(--border-subtle); }
.fp-roster__row--head {
  background: var(--surface-subtle);
  border-bottom: var(--border-width) solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fp-roster__row--head > div { padding: var(--space-3) 18px; }
.fp-roster__row:not(.fp-roster__row--head) > div { padding: 14px 18px; }
.fp-roster__name { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.fp-roster__mono { font-family: var(--font-mono); font-size: 13px; color: var(--text-secondary); }

.fp-status {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  white-space: nowrap;
}
/* ledger variant: four roughly even columns instead of the roster's 0.8fr tail */
.fp-roster--ledger .fp-roster__row { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.fp-roster__value { font-size: 13px; font-weight: var(--weight-semibold); color: var(--text-brand); }
.fp-roster__src { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }

.fp-status--active { color: var(--green-600); background: color-mix(in srgb, var(--green-600) 12%, transparent); }
.fp-status--lapsed { color: var(--amber-600); background: color-mix(in srgb, var(--amber-600) 12%, transparent); }
.fp-status--pending { color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 12%, transparent); }

/* callout variant: top-aligned, with its own eyebrow + heading */
.fp-callout--start { align-items: start; gap: var(--space-8); }
.fp-callout--start .fp-callout__icon {
  width: 56px;
  height: 56px;
  border: var(--border-width) solid var(--border-subtle);
}
.fp-callout--start h2 { font-size: clamp(24px, 3vw, 34px); margin: var(--space-3) 0 0; }
.fp-callout__note {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  font-style: italic;
  margin: 14px 0 0;
}

/* --- four-step timeline --- */
.fp-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-top: 52px;
}
.fp-timeline__rule {
  position: absolute;
  top: 19px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: var(--border-subtle);
}
/* three-step variant: the rule spans between the outer two badges */
.fp-timeline--three { grid-template-columns: repeat(3, 1fr); }
.fp-timeline--three .fp-timeline__rule { left: 16.6667%; right: 16.6667%; }

.fp-timeline__step { position: relative; text-align: center; }
.fp-timeline__num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--text-on-brand);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  border: 4px solid var(--surface-canvas);
}
.fp-timeline__step h3 {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  margin: var(--space-4) 0 0;
}
.fp-timeline__step p {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-secondary);
  margin: var(--space-2) auto 0;
  max-width: 240px;
}

/* --- warm stone band --- */
.fp-band--stone {
  background: var(--surface-stone);
  border-top: var(--border-width) solid var(--border-subtle);
  border-bottom: var(--border-width) solid var(--border-subtle);
  margin-top: 104px;
}
.fp-band--stone .fp-band__inner { text-align: left; padding: var(--space-24) var(--space-6); }
.fp-band--stone h2 { color: var(--text-primary); max-width: none; }

/* --- simple three-card row --- */
.fp-cardrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-10); }
.fp-cardrow > div { background: var(--surface-subtle); border-radius: var(--radius-lg); padding: var(--space-6); }
.fp-cardrow__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
}
.fp-cardrow p { font-size: var(--text-sm); line-height: 1.55; color: var(--text-secondary); margin: var(--space-2) 0 0; }

/* comparison variant with a narrower label column */
.fp-compare--narrow .fp-compare__grid { grid-template-columns: 1.1fr 1fr 1fr; }

/* --- "runs on all three solutions" list --- */
.fp-solutionlist {
  margin-top: 36px;
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-card);
}
.fp-solutionlist a {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6) 28px;
  text-decoration: none;
}
.fp-solutionlist a + a { border-top: var(--border-width) solid var(--border-subtle); }
.fp-solutionlist a:hover { background: var(--surface-subtle); text-decoration: none; }
.fp-solutionlist__name {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-extra);
  color: var(--text-primary);
  width: 130px;
}
.fp-solutionlist__desc { flex: 1; font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); }
.fp-solutionlist__arrow { flex: none; color: var(--text-brand); display: inline-flex; }

/* --- closing CTA on warm stone (product pages) --- */
.fp-close__panel--stone {
  background: var(--surface-stone);
  border: var(--border-width) solid var(--border-subtle);
  padding: 72px var(--space-10);
}
.fp-close__panel--stone h2 {
  color: var(--text-primary);
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.04;
}
.fp-close__panel--stone .fp-close__sub { color: var(--text-secondary); max-width: 600px; }
.fp-close__panel--stone .fp-close__logo { height: 24px; }

/* ============================================================
   DEMO-PAGE COMPONENTS — source: BookDemo.dc.html
   ============================================================ */

.fp-demo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  padding-top: 72px;
}
.fp-demo__copy { padding-top: var(--space-6); }
.fp-demo__copy h1 {
  font-size: clamp(42px, 5.2vw, 68px);
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tighter);
  line-height: 1.02;
  margin: 0;
}
.fp-demo__sub {
  font-size: 19px;
  line-height: 1.58;
  color: var(--text-secondary);
  max-width: 480px;
  margin: 22px 0 0;
  text-wrap: pretty;
}

.fp-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: 36px;
  max-width: 440px;
  list-style: none;
  padding: 0;
}
.fp-checklist li { display: flex; gap: var(--space-3); align-items: flex-start; }
.fp-checklist li::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--brand-subtle) no-repeat center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234522D6' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.fp-checklist span { font-size: 15px; line-height: var(--leading-normal); color: var(--text-secondary); }

/* --- the form card --- */
.fp-formcard {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 88px;
}
.fp-formcard__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-brand);
  margin-bottom: 10px;
}
.fp-formcard__title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
  margin-bottom: var(--space-6);
}
.fp-formcard form { display: flex; flex-direction: column; gap: 18px; }
.fp-formtrap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.fp-label { display: block; }
.fp-label > span {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.fp-field {
  width: 100%;
  padding: 0 15px;
  height: 48px;
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: 15px;
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--surface-card);
  transition: border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.fp-field:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-subtle);
}
.fp-field::placeholder { color: var(--text-muted); }
select.fp-field {
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px 14px;
}
.fp-submit {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: var(--text-on-brand);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  margin-top: 6px;
  transition: background var(--dur) var(--ease-out);
}
.fp-submit:hover { background: var(--brand-hover); }
.fp-submit[disabled] { opacity: 0.7; cursor: progress; }
.fp-formnote {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 2px 0 0;
  text-align: center;
  text-wrap: pretty;
}
.fp-formerror { font-size: 13px; color: var(--danger); margin: 0; }

.fp-thanks { text-align: center; padding: var(--space-5) var(--space-1) var(--space-3); }
.fp-thanks__tick {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-subtle);
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
}
.fp-thanks__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
}
.fp-thanks p {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 320px;
  margin: 0 auto;
  text-wrap: pretty;
}

/* --- what happens next --- */
.fp-next { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: var(--space-12); }
.fp-next > div { background: var(--surface-subtle); border-radius: var(--radius-lg); padding: 30px; }
.fp-next__num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--text-brand);
  margin-bottom: var(--space-4);
}
.fp-next__title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.fp-next p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin: 0; text-wrap: pretty; }

/* --- inline proof strip --- */
.fp-proofstrip {
  background: var(--surface-subtle);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 26px var(--space-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px var(--space-10);
  text-align: center;
}
.fp-proofstrip span { font-size: 15px; color: var(--text-secondary); }
.fp-proofstrip strong { color: var(--text-primary); }
.fp-proofstrip__live { display: inline-flex; align-items: center; gap: var(--space-2); }
.fp-proofstrip__live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: fpPulse 2.4s var(--ease-out) infinite;
}
.fp-proofstrip__rule { width: 1px; height: 20px; background: var(--border-subtle); }
@media (prefers-reduced-motion: reduce) {
  .fp-proofstrip__live::before { animation: none; }
}

/* ============================================================
   ABOUT-PAGE COMPONENTS — source: About.dc.html
   ============================================================ */

/* live-status eyebrow with a pulsing dot */
.fp-livedot {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 22px;
}
.fp-livedot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: fpPulse 1.8s var(--ease-in-out) infinite;
}
@keyframes fpPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.72); }
}
@media (prefers-reduced-motion: reduce) {
  .fp-livedot::before { animation: none; }
}

/* long-form prose column on About */
.fp-prose { max-width: 720px; }
.fp-prose h2 {
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: var(--weight-extra);
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin: var(--space-4) 0 0;
  text-wrap: balance;
}
.fp-prose p {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin: 18px 0 0;
  text-wrap: pretty;
}
.fp-prose p:first-of-type { margin-top: 22px; }
.fp-prose strong { color: var(--text-primary); font-weight: var(--weight-semibold); }
.fp-prose__lead {
  font-size: var(--text-lg) !important;
  line-height: 1.55 !important;
  color: var(--text-primary) !important;
  font-weight: var(--weight-semibold);
  margin-top: 22px !important;
}

/* the two bad options */
.fp-problems { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: 34px; }
.fp-problem {
  background: var(--surface-subtle);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.fp-problem__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: 14px; }
.fp-problem__icon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--text-muted);
  align-items: center;
  justify-content: center;
  flex: none;
}
.fp-problem__title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--weight-extra);
  letter-spacing: -0.01em;
}
.fp-problem p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin: 0; }

/* the stance trio */
.fp-stances { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 34px; }
.fp-stance { background: var(--surface-card); border-radius: var(--radius-lg); padding: 28px; }
.fp-stance__icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: var(--brand-subtle);
  color: var(--text-brand);
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.fp-stance__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-extra);
  letter-spacing: -0.01em;
}
.fp-stance p { font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); margin: 10px 0 0; }
.fp-stance__kicker {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-10) 0 0;
  text-wrap: balance;
}

/* payment-network diagram */
.fp-netgrid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.fp-network {
  background: var(--surface-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-10) 34px;
  box-shadow: var(--shadow-lg);
}
.fp-network__brands { display: flex; flex-direction: column; gap: 14px; }
.fp-network__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--surface-card);
  border-radius: var(--radius-md);
  padding: var(--space-4) 18px;
}
.fp-network__name {
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: 15px;
  letter-spacing: -0.01em;
}
.fp-network__tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.fp-network__join {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 2px 0;
  color: var(--text-on-dark-muted);
}
.fp-network__join > i { flex: 1; height: 1px; background: var(--border-strong); opacity: 0.4; }
.fp-network__rail {
  margin-top: 18px;
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--brand);
  color: var(--text-on-brand);
  border-radius: var(--radius-pill);
  padding: 14px 18px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}
.fp-network__rail::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-on-brand);
  flex: none;
}

/* bordered traction row */
.fp-numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-top: 34px;
  background: var(--surface-card);
}
.fp-numbers > div { padding: 34px 30px; }
.fp-numbers > div + div { border-left: var(--border-width) solid var(--border-subtle); }
.fp-numbers__stat {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.6vw, 56px);
  font-weight: var(--weight-extra);
  letter-spacing: -0.03em;
  line-height: 1;
}
.fp-numbers__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 14px;
}

/* ============================================================
   SWITCH-PAGE COMPONENTS — source: Switch.dc.html
   ============================================================ */

/* centered narrative block between sections */
.fp-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: var(--space-24) var(--space-6) 0;
  text-align: center;
}
.fp-narrow h2 {
  font-size: clamp(28px, 3.8vw, 40px);
  font-weight: var(--weight-extra);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
.fp-narrow p {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 18px auto 0;
  max-width: 600px;
  text-wrap: pretty;
}

/* --- vertical numbered stepper --- */
.fp-stepper { position: relative; }
.fp-stepper__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-6);
  padding-bottom: 36px;
  position: relative;
}
.fp-stepper__step:last-child { padding-bottom: 0; }
.fp-stepper__rail { display: flex; flex-direction: column; align-items: center; }
.fp-stepper__num {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--text-on-brand);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.fp-stepper__line { flex: 1; width: 2px; background: var(--border-strong); margin-top: 6px; }
.fp-stepper__card {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6) 26px;
}
.fp-stepper__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.fp-stepper__head h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  margin: 0;
}
.fp-stepper__when {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-brand);
  background: var(--brand-subtle);
  border-radius: var(--radius-pill);
  padding: var(--space-1) 10px;
}
.fp-stepper__card p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin: 10px 0 0; }
.fp-stepper__note { font-size: 15px; color: var(--text-muted); margin: 28px 0 0; text-align: center; }

/* outlined pair cards (no fill — these sit on the white canvas) */
.fp-pair--outline { gap: 18px; }
.fp-pair--outline .fp-pair__card {
  background: none;
  border: var(--border-width) solid var(--border-subtle);
  box-shadow: none;
  padding: var(--space-8);
}
.fp-pair--outline .fp-pair__card h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tight);
  margin: 18px 0 0;
}
.fp-pair--outline .fp-pair__card p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin: var(--space-3) 0 0; }

/* the risk ledger's cells run a little roomier than a spec table */
.fp-compare--ledger .fp-compare__cell { padding: var(--space-5) var(--space-6); font-size: 14.5px; }

/* ============================================================
   PRICING-PAGE COMPONENTS — source: Pricing.dc.html
   ============================================================ */

/* --- the two revenue "shapes" --- */
.fp-shapes { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: var(--space-10); }
.fp-shape {
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-subtle);
  padding: 30px;
}
.fp-shape--us { border-color: var(--brand-border); background: var(--brand-subtle); }
.fp-shape__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}
.fp-shape--us .fp-shape__label { color: var(--text-brand); }
.fp-shape__bars {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  height: 90px;
  margin-bottom: 18px;
}
.fp-shape__bars > i { flex: 1; border-radius: var(--radius-xs) var(--radius-xs) 0 0; }
.fp-shape__title { font-size: 15px; font-weight: var(--weight-semibold); color: var(--text-primary); }
.fp-shape p { font-size: var(--text-sm); line-height: 1.55; color: var(--text-secondary); margin: 6px 0 0; }

/* --- per-rung model cards --- */
.fp-planrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: var(--space-10); }
.fp-plan {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.fp-plan__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-extra);
  letter-spacing: -0.01em;
}
.fp-plan__kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  color: var(--text-brand);
  margin-top: 10px;
}
.fp-plan p { font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); margin: var(--space-3) 0 0; flex: 1; }
.fp-plan .fp-link { margin-top: 18px; }

/* --- "what we don't do" 2×2 --- */
.fp-dontgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: var(--space-10); }
.fp-dont {
  background: var(--surface-subtle);
  border-radius: var(--radius-lg);
  padding: 26px;
  display: flex;
  gap: var(--space-4);
}
.fp-dont__icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fp-dont__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
}
.fp-dont p { font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); margin: 6px 0 0; }

/* --- deliberate candor note --- */
.fp-honest {
  margin-top: 22px;
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-subtle);
  padding: var(--space-6) 26px;
}
.fp-honest p { font-size: 15px; line-height: var(--leading-relaxed); color: var(--text-secondary); margin: 0; }
.fp-honest strong { color: var(--text-primary); font-weight: var(--weight-semibold); }

/* --- category pricing-model table --- */
.fp-models {
  margin-top: var(--space-10);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-card);
}
.fp-models__grid { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr; }
.fp-models__grid > * { border-bottom: var(--border-width) solid var(--border-subtle); }
.fp-models__grid > :nth-last-child(-n + 3) { border-bottom: 0; }
.fp-models__head {
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.fp-models__grid > * + .fp-models__head,
.fp-models__cell { border-left: var(--border-width) solid var(--border-subtle); }
.fp-models__name {
  padding: 18px var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  font-family: var(--font-display);
  color: var(--text-primary);
}
.fp-models__cell { padding: 18px var(--space-6); font-size: var(--text-sm); color: var(--text-secondary); }
.fp-models__row--us .fp-models__name,
.fp-models__row--us.fp-models__name {
  background: var(--brand-subtle);
  font-weight: var(--weight-extra);
  color: var(--text-brand);
}
.fp-models__cell--us {
  background: var(--brand-subtle);
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

/* ============================================================
   LEGAL PAGES — source: Privacy / Terms / Refunds .dc.html
   Sticky left-sidebar outline, numbered sections, long measure.
   ============================================================ */

.fp-backlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  text-decoration: none;
}
.fp-backlink:hover { color: var(--text-primary); text-decoration: none; }

.fp-legal__title {
  font-size: clamp(32px, 4.4vw, 44px);
  font-weight: var(--weight-extra);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 22px 0 0;
}
.fp-legal__date {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-muted);
  margin: var(--space-3) 0 0;
}

.fp-legal-grid {
  padding-top: var(--space-12);
  padding-bottom: 120px;
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  gap: var(--space-16);
  align-items: start;
}

.fp-legal-toc { position: sticky; top: 88px; }
.fp-legal-toc__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.fp-legal-toc a {
  display: block;
  font-size: 13.5px;
  color: var(--text-muted);
  padding: 6px 0;
  line-height: 1.4;
  text-decoration: none;
}
.fp-legal-toc a:hover { color: var(--text-brand); text-decoration: none; }

.fp-legal { max-width: 680px; }
.fp-legal section { margin-bottom: 44px; scroll-margin-top: 88px; }
.fp-legal section:last-child { margin-bottom: 0; }
.fp-legal__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-brand);
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 6px;
}
.fp-legal h2 {
  font-size: 23px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0 0 14px;
}
.fp-legal h3 {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  margin: var(--space-6) 0 10px;
}
.fp-legal p { font-size: 15.5px; line-height: 1.75; color: var(--text-secondary); margin: 0 0 var(--space-4); }
.fp-legal ul { margin: 0 0 var(--space-4); padding-left: 22px; }
.fp-legal li { font-size: 15.5px; line-height: 1.7; color: var(--text-secondary); margin-bottom: 10px; }
.fp-legal p:last-child, .fp-legal ul:last-child { margin-bottom: 0; }
.fp-legal a { color: var(--text-brand); font-weight: var(--weight-semibold); }
.fp-legal strong { color: var(--text-primary); font-weight: var(--weight-semibold); }

@media (max-width: 860px) {
  .fp-legal-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .fp-legal-toc { position: static; }
}

/* ---------- footer ----------------------------------------- */

.fp-footer {
  border-top: var(--border-width) solid var(--border-subtle);
  background: var(--surface-canvas);
}
.fp-footer__grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px var(--space-6) var(--space-10);
  display: grid;
  /* 3 link columns; goes back to repeat(4, 1fr) when the Compare column
     returns with the /compare/* pages */
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--space-8);
}
.fp-footer__brand a { display: inline-flex; }
.fp-footer__brand img { height: 24px; width: auto; display: block; }
.fp-footer__tagline {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: var(--space-4);
  max-width: 230px;
  line-height: 1.6;
}
.fp-footer__title {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: 14px;
}
.fp-footer__links { display: flex; flex-direction: column; gap: 10px; }
.fp-footer__links a { font-size: 13px; color: var(--text-muted); }

.fp-footer__bottom {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-5) var(--space-6) var(--space-12);
  border-top: var(--border-width) solid var(--border-subtle);
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}
.fp-footer__legal { display: flex; gap: 18px; }
.fp-footer__legal a { color: var(--text-muted); }

/* skip link — keyboard entry point ahead of the mega menus */
.fp-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-modal);
  background: var(--surface-card);
  color: var(--text-primary);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.fp-skip:focus { left: var(--space-4); top: var(--space-2); }

/* ============================================================
   RESPONSIVE
   Breakpoints follow DESIGN.md: 1040px collapses the nav,
   900px stacks the multi-column marketing grids.
   ============================================================ */

@media (max-width: 1040px) {
  .fp-nav__links { display: none; }
  .fp-nav__right .fp-btn--sm { display: none; }
  .fp-hamburger { display: inline-flex; }
  .fp-drawer.is-open { display: block; }
}

@media (max-width: 900px) {
  .fp-hero__grid { grid-template-columns: 1fr; text-align: center; }
  .fp-hero__copy { align-items: center; }
  .fp-hero__sub { margin-left: auto; margin-right: auto; }

  .fp-ladder { grid-template-columns: 1fr; }
  .fp-ladder-line { display: none; }

  .fp-proof { grid-template-columns: 1fr; }
  .fp-beats { grid-template-columns: 1fr; }
  .fp-duo { grid-template-columns: 1fr; }

  /* the design lets these headlines break naturally below 900 */
  .fp-nowrap br { display: none; }

  /* solution-page grids */
  .fp-steps { grid-template-columns: 1fr; }
  .fp-prodgrid { grid-template-columns: 1fr; }
  .fp-pilot__cards { grid-template-columns: 1fr; }
  .fp-migration { grid-template-columns: 1fr; gap: var(--space-8); }
  .fp-proofrow { grid-template-columns: 1fr; }
  .fp-proofrow > div + div {
    border-left: 0;
    border-top: var(--border-width) solid var(--border-subtle);
    padding-top: var(--space-8);
    margin-top: var(--space-8);
  }
  .fp-pilot { padding: var(--space-10) var(--space-6); }
  .fp-pair { grid-template-columns: 1fr; }
  .fp-econ { grid-template-columns: 1fr; }
  .fp-hero--lpr .fp-hero__grid { grid-template-columns: 1fr; }
  .fp-hero--parcs .fp-hero__grid { grid-template-columns: 1fr; }
  .fp-banner { padding: var(--space-8) var(--space-6); }
  /* the row's closing line reads as a caption once the pills wrap */
  .fp-productrow { justify-content: flex-start; }
  .fp-featuregrid { grid-template-columns: 1fr; }
  .fp-rungs { grid-template-columns: 1fr; }
  .fp-callout { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-8) var(--space-6); }
  .fp-cardrow { grid-template-columns: 1fr; }
  .fp-shapes { grid-template-columns: 1fr; }
  .fp-problems { grid-template-columns: 1fr; }
  .fp-demo { grid-template-columns: 1fr; gap: var(--space-10); }
  .fp-demo__copy { padding-top: 0; }
  /* stop the form card sticking once it's stacked under the copy */
  .fp-formcard { position: static; }
  .fp-next { grid-template-columns: 1fr; }
  .fp-stances { grid-template-columns: 1fr; }
  .fp-netgrid { grid-template-columns: 1fr; gap: var(--space-8); }
  .fp-numbers { grid-template-columns: 1fr; }
  .fp-numbers > div + div {
    border-left: 0;
    border-top: var(--border-width) solid var(--border-subtle);
  }
  .fp-planrow { grid-template-columns: 1fr; }
  .fp-dontgrid { grid-template-columns: 1fr; }
  /* the timeline stacks; its connecting rule only makes sense in a row */
  .fp-timeline { grid-template-columns: 1fr; gap: var(--space-8); }
  .fp-timeline__rule { display: none; }
  .fp-rategrid { grid-template-columns: repeat(2, 1fr); }
  .fp-week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fp-solutionlist a { flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
  .fp-solutionlist__name { width: auto; }
  .fp-solutionlist__desc { flex: 1 1 100%; }
}

/* Comparison table on narrow screens: the row label spans the full width and
   the two value columns sit side by side underneath it. */
@media (max-width: 700px) {
  .fp-compare__grid { grid-template-columns: 1fr 1fr; }
  .fp-compare__grid > * { padding: 13px 14px; font-size: 13px; }
  .fp-compare__grid > :nth-child(3n + 1) {
    grid-column: 1 / -1;
    border-left: 0;
    background: var(--surface-subtle);
    font-weight: var(--weight-bold);
    font-size: 13.5px;
  }
  /* the empty top-left corner cell has nothing to say once stacked */
  .fp-compare__grid > :nth-child(1) { display: none; }
  .fp-compare__grid > :nth-child(3n) { background: var(--brand-subtle); }
  .fp-compare__foot .fp-link { white-space: normal; }
  /* the model table has no single "label" column to collapse, so it scrolls */
  .fp-models { overflow-x: auto; }
  .fp-models__grid { min-width: 660px; }
}

@media (max-width: 820px) {
  .fp-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px var(--space-6); }
  .fp-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .fp-mega__pairs { grid-template-columns: 1fr; }
  .fp-marquee__group { gap: 56px; padding-right: 56px; }
  .fp-close__panel { padding: 64px var(--space-6); }
}

@media (max-width: 560px) {
  .fp-ctarow { flex-direction: column; align-items: stretch; }
  .fp-ctarow .fp-btn { width: 100%; }
  .fp-ctarow .fp-link { justify-content: center; }
}

@media (max-width: 480px) {
  .fp-week { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fp-footer__grid { grid-template-columns: 1fr; }
  .fp-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
  .fp-marquee__track { animation: none; }
  .fp-btn:hover { transform: none; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}