/* BigChange landing page — v1, responsive (desktop, laptop, tablet, mobile; see "Responsive" at the end). Built on
   tokens.css from the design system. */

/* ---------- flat design language: no drop shadows ----------
   The design system's shadow tokens are flattened here (tokens.css stays as generated), so every component that
   reads them goes flat. Kept on purpose: inset highlights (the soft-pill top light, the glass edge lights), pressed
   insets, focus rings and border rings. */
:root, [data-theme="dark"] {
  --shadow-xs: 0 0 #0000; --shadow-s: 0 0 #0000; --shadow-m: 0 0 #0000; --shadow-l: 0 0 #0000; --shadow-xl: 0 0 #0000;
  --shadow-float: 0 0 #0000; --shadow-brand-glow: 0 0 #0000; --shadow-btn-secondary: 0 0 #0000;
  --shadow-btn-primary: inset 0 2px 5px rgba(255, 255, 255, 0.45);
}
/* the page grid: the 1200px container in 12 columns of 78px with 24px gutters; --span-N is N columns and their gutters
   (desktop sizes, used as caps); --page-margin is the side margin the container keeps on smaller screens */
:root {
  --page-margin: 40px;
  --grid-col: 78px; --grid-gap: 24px;
  --span-6: calc(6 * var(--grid-col) + 5 * var(--grid-gap));     /* 588 */
  --span-8: calc(8 * var(--grid-col) + 7 * var(--grid-gap));     /* 792 */
  --span-10: calc(10 * var(--grid-col) + 9 * var(--grid-gap));   /* 996 */
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: clip;   /* decorative layers never cause a sideways scroll (clip, not hidden, so sticky still works) */
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
p, h1, h2, h3, ul { margin: 0; }
/* pixel reveal (js/main.js): hidden behind an empty mask from the first paint until the script reveals it square by
   square; if the script never runs, the head script lifts the mask after 3 s */
html.js:not(.px-safe) [data-pixel-reveal]:not(.is-revealed) { -webkit-mask-image: linear-gradient(#0000, #0000); mask-image: linear-gradient(#0000, #0000); }
@media (prefers-reduced-motion: reduce) { html.js [data-pixel-reveal] { -webkit-mask-image: none !important; mask-image: none !important; } }
/* smooth entrances (js/main.js): hidden until their turn; the words of a heading rise one by one */
.rv-wait { opacity: 0; }   /* set by the script itself, so it never strands content if the script fails */
.rv-w { display: inline-block; }
/* while a reveal runs, its one-pixel-per-square mask is drawn as crisp squares; the element's own images stay smooth */
[data-revealing] { image-rendering: pixelated; }
[data-revealing] * { image-rendering: auto; }
/* Lenis smooth scrolling (js/main.js) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
ul { padding: 0; list-style: none; }
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
b { font-weight: inherit; }
i { font-style: normal; }

.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 16px; height: 16px; }

/* ---------- Button (soft pill) — from the design system bundle ---------- */
.bc-btn {
  --bc-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  margin: 0; border: var(--border-width-1) solid transparent; border-radius: var(--radius-full);
  font-family: var(--font-body); white-space: nowrap; cursor: pointer; user-select: none; outline: none;
  transition: background-color 160ms var(--bc-ease), color 160ms var(--bc-ease), border-color 160ms var(--bc-ease), box-shadow 160ms var(--bc-ease);
}
.bc-btn--lg { height: 56px; padding: 0 calc(var(--space-32) - 1px); }
.bc-btn--md { height: 48px; padding: 0 calc(var(--space-28) - 1px); }
.bc-btn--sm { height: 36px; padding: 0 calc(var(--space-20) - 1px); gap: var(--space-6); }
.bc-btn--primary { background: var(--bg-brand); color: var(--text-on-brand); box-shadow: var(--shadow-btn-primary); }
.bc-btn--primary:hover { background: var(--bg-brand-hover); }
.bc-btn--primary:active { background: var(--bg-brand-pressed); box-shadow: var(--shadow-btn-primary-pressed); }
.bc-btn--primary:focus-visible { box-shadow: var(--shadow-focus), var(--shadow-btn-primary); }
.bc-btn--secondary { background: var(--bg-canvas); border-color: var(--border-default); color: var(--text-primary); box-shadow: var(--shadow-btn-secondary); }
.bc-btn--secondary:hover { background: var(--bg-subtle); border-color: var(--border-strong); }
.bc-btn--secondary:active { background: var(--bg-muted); box-shadow: var(--shadow-btn-secondary-pressed); }
.bc-btn--secondary:focus-visible { box-shadow: var(--shadow-focus); }
.bc-btn--secondary .icon { color: var(--icon-secondary); }
/* pixel hover (js/main.js): the hover colour lands square by square as a background image under the label, so the
   plain hover colours below only apply without script, on touch, or under reduced motion */
.bc-btn--primary { --px-hover: var(--bg-brand-hover); --px-shine: var(--color-blue-400); --px-glow: var(--bg-brand); }   /* the shine is for .bc-btn--live only */
/* the pixel glow around a hovered primary button (js/main.js): behind the pill, low opacity, fades in and out */
.px-glow { position: absolute; inset: calc(-1 * var(--ring, 16px)); width: calc(100% + 2 * var(--ring, 16px)); height: calc(100% + 2 * var(--ring, 16px)); pointer-events: none; opacity: 0; transition: opacity 240ms ease-out; image-rendering: pixelated; }
.bc-btn.is-glowing .px-glow { opacity: 0.55; }
.ps__node.is-glowing .px-glow { opacity: 0.4; }   /* the node's signal: the same glow, always on, lower */
.bc-btn--secondary { --px-hover: var(--bg-subtle); }
.bc-btn--ghost { --px-hover: var(--bg-brand-tint); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html.js .bc-btn--primary:hover { background-color: var(--bg-brand); }
  html.js .bc-btn--secondary:hover { background-color: var(--bg-canvas); }
  html.js .bc-btn--ghost:hover { background-color: transparent; }
}
/* icon button: a circle */
.bc-iconbtn { padding: 0; }
.bc-iconbtn.bc-btn--lg { width: 56px; }
.bc-iconbtn.bc-btn--md { width: 48px; }
.bc-iconbtn.bc-btn--sm { width: 36px; }

/* ---------- Navbar ---------- */
.nav {
  position: fixed; top: var(--space-16); left: 50%; z-index: 50;
  transform: translateX(-50%);
  /* logo | links | actions: the outer columns share the spare width equally, so the links sit in the true centre */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: var(--space-24);
  /* at the top of the page the bar spans the page (capped at the content width); scrolled, it tucks into a compact pill */
  width: min(calc(100% - 48px), 1200px); height: 60px; padding: 0 var(--space-12);   /* even sides keep the links centred */
  transition: width 480ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 240ms, transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 300ms ease-out;
  /* liquid glass with the buttons' 3D soft-pill light: a see-through sheen, strong blur and colour lift behind,
     a bright inner top light, a faint lower inner edge and a white rim; no drop shadow */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.5) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
  backdrop-filter: blur(22px) saturate(1.8);
  border: var(--border-width-1) solid rgba(255, 255, 255, 0.72);
  border-radius: var(--radius-full);
  box-shadow:
    inset 0 2px 6px rgba(255, 255, 255, 0.95),
    inset 0 -2px 6px rgba(10, 34, 64, 0.05),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 0 0 1px rgba(10, 34, 64, 0.07);         /* hairline ring so the glass reads on white (a border, not a shadow) */
}
/* the specular catch-light along the top edge */
.nav::before {
  content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 1px; border-radius: 1px;
  background: linear-gradient(90deg, transparent, #fff 30%, #fff 70%, transparent);
  pointer-events: none;
}
.nav__logo img { height: 22px; width: auto; mix-blend-mode: multiply; }
.nav__logo:focus-visible, .nav__link:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-md); }
.nav__logo { display: flex; justify-self: start; margin-left: var(--space-12); }   /* flex: no baseline gap under the lockup, so it sits on the bar's centre line */   /* the mark sits one mark-width (25px) in from the pill's edge */
.nav__links { display: flex; gap: var(--space-4); }
.nav__link {
  display: block; padding: var(--space-8) var(--space-12); border-radius: var(--radius-full);
  color: var(--text-secondary); transition: color 160ms, background-color 160ms;
}
.nav__link:hover { color: var(--text-primary); background: var(--bg-subtle); }
.nav__link { --px-hover: var(--bg-subtle); }   /* the buttons' pixel fill on hover (js/main.js), no glow */
@media (hover: hover) and (prefers-reduced-motion: no-preference) { html.js .nav__link:hover { background-color: transparent; } }
.nav__actions { display: flex; align-items: center; justify-self: end; gap: var(--space-8); }
.nav__login { color: var(--text-primary); }
.nav__toggle, .nav__menu-only, .nav-scrim { display: none; }   /* the menu button and the in-menu Log in: tablet and mobile only */

/* ---------- 01 · Hero ---------- */
/* on the grid: the headline over the middle 8 columns, the line under it over 6, the screen over 10 (its chat over
   the same 8 as the headline); 8px steps down from the navbar: 24 eyebrow→title→line, 40 to the buttons, 64 to the
   screen, so the screen's top shows in the first view */
.hero { position: relative; overflow: hidden; padding-top: 160px; text-align: center; }
.hero__copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 0 var(--page-margin); }
.hero__eyebrow { margin-bottom: var(--space-24); color: var(--text-brand); }
.hero__title { max-width: var(--span-8); text-wrap: balance; }
.hero__title em { font-style: normal; color: var(--text-brand); }
.hero__sub { max-width: var(--span-6); margin-top: var(--space-24); color: var(--text-secondary); text-wrap: pretty; }
.hero__ctas { display: flex; gap: var(--space-12); margin-top: var(--space-40); }

/* the stage ends part-way down the screen: the trust band below covers the rest, so the screen slides under it */
/* on smaller screens the screen scales down as a whole (data-fit, js/main.js) and the stage follows its scale */
.hero__stage { position: relative; z-index: 2; height: calc(764px * var(--fit, 1) + 40px * (1 - var(--fit, 1))); margin-top: var(--space-64); padding: 0 var(--page-margin); }

/* FilamentField: the corona behind the product screen (js/filament.js). Fades out under the headline and at the section end. */
.filament {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; opacity: 0.6;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 24%, rgba(0, 0, 0, 0.3) 32%, rgba(0, 0, 0, 0.8) 40%, #000 46%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 24%, rgba(0, 0, 0, 0.3) 32%, rgba(0, 0, 0, 0.8) 40%, #000 46%, #000 97%, transparent 100%);
  pointer-events: none;
}

/* NetworkField: the connected-system web behind the navbar and the top of the hero (js/network.js) */
.network {
  position: absolute; left: 0; top: 0; z-index: 1;
  width: 100%; height: 230px; opacity: 0.45;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 45%, transparent 100%);
  pointer-events: none;
}

/* soft backlight from behind the product screen: design-system blues, smooth falloff, no hard shadow */
.hero__backlight {
  position: absolute; left: 50%; top: -120px; z-index: 0;
  width: 1560px; height: 760px; transform: translateX(-50%);   /* larger than the screen, so the light shows around its edges */
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--bg-brand) 22%, transparent) 0%,
    color-mix(in srgb, var(--color-blue-400) 16%, transparent) 55%,
    color-mix(in srgb, var(--color-blue-300) 6%, transparent) 80%,
    transparent 100%);
  filter: blur(40px);
  pointer-events: none;
}

/* the hero's foot (after the Lightyear sample): light rising from the bottom edge in soft vertical curtains of the
   design system's blues, brightest at the base and fading upward, over a wide low glow and a fine grain; each curtain
   sways and breathes on its own slow clock. Over the screen as well (above the stage, under the trust band), so the
   light washes up across the screen's foot; softer in the middle so the composer stays readable, and it fades out
   well below the headline. Still under reduced motion. */
.hero__curtain {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 620px; pointer-events: none; overflow: hidden;
  background: radial-gradient(130% 90% at 50% 118%, color-mix(in srgb, var(--color-blue-300) 55%, transparent) 0%, transparent 70%);
  -webkit-mask-image: linear-gradient(to top, #000 0, #000 35%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0, #000 35%, transparent 100%);
}
.hero__curtain::before {   /* the pool of light under the mouse (js: --mx, --on) */
  content: ""; position: absolute; inset: 0; opacity: var(--on, 0);
  background: radial-gradient(360px 300px at var(--mx, 50%) 100%, color-mix(in srgb, var(--bg-brand) 30%, transparent) 0%, color-mix(in srgb, var(--color-blue-300) 22%, transparent) 45%, transparent 100%);
}
.hero__curtain::after {   /* the fine grain over the light */
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.04 0 0 0 0 0.13 0 0 0 0 0.25 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.12; mix-blend-mode: multiply;
}
.hero__curtain span {
  position: absolute; bottom: -4%; left: var(--x); width: var(--w); height: var(--h);
  translate: -50% 0; transform-origin: 50% 100%;
  scale: 1 calc(1 + var(--lift, 0) * 0.35);   /* the curtains near the mouse rise and brighten */
  background: linear-gradient(to top, color-mix(in srgb, var(--bg-brand) calc(var(--o) + var(--lift, 0) * 24%), transparent) 0%, color-mix(in srgb, var(--color-blue-300) calc((var(--o) + var(--lift, 0) * 24%) * 0.8), transparent) 45%, transparent 100%);
  border-radius: 50% 50% 0 0 / 18% 18% 0 0;
  filter: blur(var(--b));
  animation: curtain-sway var(--d) ease-in-out var(--t) infinite alternate;
}
@keyframes curtain-sway {
  0% { transform: translateX(-14px) scaleY(0.92); opacity: 0.75; }
  50% { opacity: 1; }
  100% { transform: translateX(14px) scaleY(1.06); opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) { .hero__curtain span { animation: none; } }

/* ---------- Product screen ---------- */
.screen {
  position: relative; z-index: 2;
  width: var(--span-10); height: 860px; margin: 0 auto;   /* taller than it shows: even tipped back, its foot runs under the trust band */
  display: flex; flex-direction: column;
  overflow: hidden; text-align: left;
  background: var(--bg-canvas);
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--radius-2xl);
}
.screen__bar {
  display: flex; align-items: center; justify-content: space-between;
  height: 52px; padding: 0 var(--space-20); flex: none;
  border-bottom: var(--border-width-1) solid var(--border-subtle);
  background: var(--bg-surface);
}
.screen__brand { display: flex; align-items: center; gap: var(--space-8); color: var(--text-primary); }
.screen__mark { width: 18px; height: 18px; fill: var(--bg-brand); }
.screen__crumb { color: var(--text-tertiary); }
.screen__tools { display: flex; align-items: center; gap: var(--space-10); }

.avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: var(--radius-full);
  background: var(--bg-brand-tint-strong); color: var(--text-brand-hover);
}
.avatar--navy { background: var(--color-neutral-900); color: var(--text-on-brand); }
.chip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 var(--space-8);
  border-radius: var(--radius-md); background: var(--bg-subtle); color: var(--text-secondary); white-space: nowrap;
}
.chip--neutral { background: var(--bg-muted); }

/* chat column */
.chat { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; }
.chat__thread { width: var(--span-8); padding-top: var(--space-20); }

.block { border: var(--border-width-1) solid var(--border-default); border-radius: var(--radius-xl); background: var(--bg-canvas); overflow: hidden; }
.block__head {
  display: flex; align-items: center; gap: var(--space-8);
  height: 40px; padding: 0 var(--space-16);
  border-bottom: var(--border-width-1) solid var(--border-subtle);
}
.block__toggle, .block__icon { color: var(--icon-secondary); }
.block__title { color: var(--text-primary); }
.block__meta { color: var(--text-secondary); }
.block__body { display: flex; flex-direction: column; padding: var(--space-14) var(--space-16); background: var(--bg-surface); }

.filters { display: flex; gap: var(--space-8); }
.filter {
  padding: var(--space-4) var(--space-10);
  border: var(--border-width-1) solid var(--border-default); border-radius: var(--radius-lg);
  background: var(--bg-canvas); color: var(--text-secondary);
}
.filter b { font-weight: 500; color: var(--text-primary); }

.plot { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-8); height: 150px; margin-top: var(--space-20); }
/* labels are 18px tall: shift by half a line so each centers on its gridline */
.plot__y { display: flex; flex-direction: column; justify-content: space-between; height: calc(100% - 26px + 18px); transform: translateY(-9px); color: var(--text-tertiary); text-align: right; font-variant-numeric: tabular-nums; }
.plot__area {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-32);
  padding: 0 var(--space-32) 26px;
  background-image: linear-gradient(to bottom, var(--border-subtle) 1px, transparent 1px);
  background-size: 100% calc((100% - 26px) / 6);
}
.plot__area::after { /* baseline */
  content: ""; position: absolute; left: 0; right: 0; bottom: 26px; height: 1px; background: var(--border-default);
}
.plot__group { position: relative; display: flex; align-items: flex-end; justify-content: center; }
.plot__bar { display: block; width: 72px; height: var(--h); }
.plot__bar--profit { background: var(--bg-brand); border-radius: var(--radius-sm) 0 0 0; }
.plot__bar--rev { background: var(--color-blue-200); border-radius: 0 var(--radius-sm) 0 0; }
.plot__group i { position: absolute; left: 0; right: 0; bottom: -26px; text-align: center; color: var(--text-secondary); }

.legend { display: flex; gap: var(--space-16); margin-top: var(--space-10); color: var(--text-secondary); }
.legend span { display: inline-flex; align-items: center; gap: var(--space-6); }
.sw { width: 10px; height: 10px; border-radius: 2px; }
.sw--profit { background: var(--bg-brand); }
.sw--rev { background: var(--color-blue-200); }

.chat__answer { margin-top: var(--space-14); color: var(--text-primary); }


/* composer, right under the answer so it stays above the trust band */
.composer {
  width: var(--span-8); margin-top: var(--space-12);
  display: flex; flex-direction: column; gap: var(--space-10);
  padding: var(--space-14) var(--space-12) var(--space-12) var(--space-20);
  border: var(--border-width-1) solid var(--border-default); border-radius: var(--radius-2xl);
  background: var(--bg-canvas); box-shadow: var(--shadow-l);
}
.composer__input { color: var(--text-tertiary); }
.composer__row { display: flex; align-items: center; gap: var(--space-12); }
.composer__tool { display: inline-flex; align-items: center; gap: var(--space-8); color: var(--text-secondary); }
.composer__send {
  display: inline-grid; place-items: center; width: 36px; height: 36px; margin-left: auto;
  border-radius: var(--radius-full); background: var(--bg-brand); color: var(--text-on-brand);
  box-shadow: var(--shadow-btn-primary);
}

/* ---------- 02 · Social proof ---------- */
.container { width: min(1200px, calc(100% - 2 * var(--page-margin))); margin: 0 auto; }

.proof {
  position: relative; z-index: 3;   /* above the hero stage, so the band's pixel edges sit over the screen and the section below */
  background: var(--bg-canvas);
}
/* the white trust band the hero screen slides under (after the Peexl sample): its top edge breaks into a skyline of
   white pixels over the screen, so the screen dissolves into the band */
.proof__band {
  position: relative;
  padding: var(--space-56) 0 var(--space-64);
  background: var(--bg-canvas);
}
.pixels--band { position: absolute; left: 0; pointer-events: none; }
.pixels--band.pixels--top { bottom: 100%; }
.pixels--band.pixels--bottom { top: 100%; }
/* solid pixels only: every pixel is the band's own white, no faded tones */
.pixels--band .px { fill: var(--bg-canvas); }
.proof__title { display: flex; align-items: center; justify-content: center; gap: var(--space-8); color: var(--text-secondary); }

.logos { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-32); padding: 0 var(--space-24); }
.logo {
  display: inline-flex; align-items: center; gap: var(--space-8);
  color: var(--text-primary); opacity: 0.65; white-space: nowrap;
  transition: opacity 160ms;
}
.logo:hover { opacity: 1; }
.logo__mark { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }
/* fictional sample wordmarks, each set differently so the row reads as distinct brands */
.logo--northline { font: 700 22px/1 var(--font-display); letter-spacing: -0.02em; }
.logo--harbour { font: 600 15px/1 var(--font-body); letter-spacing: 0.22em; }
.logo--kestrel { font: 600 21px/1 var(--font-display); font-variation-settings: "wdth" 80; }
.logo--kestrel .logo__mark { fill: currentColor; stroke: none; }
.logo--kestrel span { margin-left: -4px; font-weight: 400; }
.logo--ashby { font: italic 500 22px/1 Georgia, "Times New Roman", serif; letter-spacing: -0.01em; }
.logo--bright { font: 500 22px/1 var(--font-body); letter-spacing: -0.04em; }
.logo--fleet { font: 400 19px/1 var(--font-display); font-variation-settings: "wdth" 130; letter-spacing: 0.04em; }
.logo--fleet b { font-weight: 800; }
.logo--meridian { font: 700 19px/1 var(--font-body); letter-spacing: -0.01em; }
.logo--meridian .logo__mark { fill: currentColor; stroke: none; width: 18px; height: 18px; }


/* ---------- shared section header ---------- */
.section-head { display: flex; flex-direction: column; align-items: center; gap: var(--space-16); text-align: center; }
.section-head .h2 { text-wrap: balance; }   /* no single word left on the last line */
.section-head__sub { max-width: 600px; color: var(--text-secondary); text-wrap: pretty; }

/* ---------- 03 · Problem → solution ---------- */
.ps { padding: var(--space-96) 0; background: var(--bg-canvas); overflow: hidden; }
.ps__stage {
  position: relative;
  display: grid; grid-template-columns: 536px 128px 536px; align-items: center;
  margin-top: calc(var(--space-64) + 56px);
}
.ps__node { position: relative; z-index: 2; justify-self: center; }   /* its signal is a looping pixel glow (js/main.js) */

.ps-card {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  height: 544px; padding: var(--space-32);   /* on the 8px grid: 32 inset, 16 label→title, 24 title→panel, 24 panel→list */
  background: var(--bg-canvas);
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-s);
}
/* the solution side reads as the answer: a soft blue edge and lift */
.ps-card--after { border-color: var(--color-blue-100); }
/* stage tags as pills */
.ps-card__label {
  align-self: flex-start;
  padding: 4px var(--space-12); border-radius: var(--radius-full);
  background: var(--bg-muted); color: var(--text-secondary);
}
.ps-card--after .ps-card__label { background: var(--bg-brand-tint); color: var(--text-brand-hover); }
.ps-card .h4 { margin: var(--space-16) 0 0; color: var(--text-primary); }

/* the two panels, flat but in the figures' language: white, on a square tile floor that fades out at the edges (the
   figures' floor, seen from above), tiles with hairline outlines in the figures' line tones, Energy Blue only where
   BigChange is */
/* drawn at 472 wide (the desktop card's inner width): kept at that width and centred when the card is wider, so the
   tiles (placed in px) and the wires (scaled by their viewBox) stay together; narrower cards scale it down (data-fit) */
.mess, .order { position: relative; width: 472px; height: 220px; margin: var(--space-24) auto 0; }
.mess::before, .order::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--color-neutral-200) 1px, transparent 1px), linear-gradient(90deg, var(--color-neutral-200) 1px, transparent 1px);
  background-size: 20px 20px; background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 46% 46% at 50% 50%, #000 15%, transparent 100%);
  mask-image: radial-gradient(ellipse 46% 46% at 50% 50%, #000 15%, transparent 100%);   /* gone before the panel edge */
  opacity: 0.7;
}
.mess__links, .order__links { position: absolute; inset: 0; width: 100%; height: 100%; }
/* before: scattered tiles, the links between them dashed and broken */
.mess__links path { fill: none; stroke: var(--color-neutral-400); stroke-width: 1; stroke-dasharray: 3 4; stroke-linecap: square; }
.tool, .mod {
  position: absolute; left: var(--x); top: var(--y);
  display: inline-flex; align-items: center; gap: var(--space-6);
  height: 34px; padding: 0 var(--space-12);
  background: var(--bg-canvas); border: var(--border-width-1) solid var(--color-neutral-300); border-radius: var(--radius-lg);
  font: 500 14px/20px var(--font-body); white-space: nowrap;   /* label-m */
}
.tool { transform: translate(-50%, -50%) rotate(var(--r)); color: var(--text-secondary); }
.tool .icon { color: var(--color-neutral-500); stroke-width: 1.5; }
/* after: the tiles squared up in two columns, wired into the hub */
.mod { transform: translate(-50%, -50%); width: 132px; color: var(--text-primary); }
.mod .icon { color: var(--icon-brand); stroke-width: 1.5; }
.order__wires path { fill: none; stroke: var(--color-neutral-300); stroke-width: 1; stroke-linecap: square; }
.order__ends rect { fill: var(--color-neutral-400); }
.order__hub { fill: var(--bg-brand); }
.order__mark { fill: var(--icon-on-brand); }
/* the traffic: a 4px Energy Blue pixel runs along each wire into the hub in turn */
.order__flow path {
  fill: none; stroke: var(--bg-brand); stroke-width: 4; stroke-linecap: butt;
  stroke-dasharray: 4 1000; stroke-dashoffset: 4;
  animation: order-flow 4.8s linear calc(var(--i) * 0.8s) infinite;
}
@keyframes order-flow { 0% { stroke-dashoffset: 4; } 40%, 100% { stroke-dashoffset: -160; } }
@media (prefers-reduced-motion: reduce) { .order__flow { display: none; } }

/* aligned pain → fix rows */
.ps-rows { display: flex; flex-direction: column; gap: var(--space-12); margin-top: auto; padding-top: var(--space-24); }
.ps-rows li { display: flex; align-items: center; gap: var(--space-12); color: var(--text-primary); }
.ps-rows__icon {
  display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px;
  border-radius: var(--radius-full); background: var(--bg-muted); color: var(--icon-secondary);
}
.ps-rows__icon .icon { stroke-width: 2.25; width: 14px; height: 14px; }
.ps-rows--after .ps-rows__icon { background: var(--bg-brand-tint-strong); color: var(--icon-brand); }

/* ---------- Ghost button (design system) ---------- */
.bc-btn--ghost { background: transparent; color: var(--text-brand); }
.bc-btn--ghost:hover { background: var(--bg-brand-tint); color: var(--text-brand-hover); }
.bc-btn--ghost:active { background: var(--bg-brand-tint-strong); color: var(--text-brand-pressed); }
.bc-btn--ghost:focus-visible { box-shadow: var(--shadow-focus); }
.bc-btn .icon { transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.bc-btn--ghost:hover .icon { transform: translateX(2px); }

/* ---------- 04 · Capabilities by stage ---------- */
.feat { padding: var(--space-96) 0; background: var(--bg-canvas); }
.feat .container { display: flex; flex-direction: column; gap: var(--space-128); }
.feat__row { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--space-24); align-items: center; }
.feat__text { grid-column: 1 / span 5; display: flex; flex-direction: column; align-items: flex-start; }
.feat__row--flip .feat__text { grid-column: 8 / span 5; grid-row: 1; }
.feat__row--flip .showcase { grid-column: 1 / span 7; grid-row: 1; }
.feat__stage { color: var(--text-brand); }
.feat__text .h2 { margin-top: var(--space-12); color: var(--text-primary); text-wrap: balance; }
.feat__body { max-width: 460px; margin-top: var(--space-16); color: var(--text-secondary); text-wrap: pretty; }
.feat__list { display: flex; flex-direction: column; gap: var(--space-12); margin-top: var(--space-28); }
.feat__list li { display: flex; align-items: center; gap: var(--space-12); color: var(--text-primary); }
.feat__list .ps-rows__icon { background: var(--bg-brand-tint-strong); color: var(--icon-brand); }
.feat__link { margin: var(--space-28) 0 0 calc(var(--space-16) * -1); }

/* the illustration slot: an isometric figure on its own tile floor (figures/build.mjs) */
.showcase {   /* the figure stands straight on the page: no box, its ground is the figure's own tile floor */
  grid-column: 6 / span 7;
  position: relative; aspect-ratio: 690 / 560;   /* 560 tall at the full 7 columns; scales with the column */
}
/* the panels hold the isometric figures (figures/build.mjs → css/figures.css, js/figures.js) */

/* ---------- 04b · Integrations (after the converging-strands sample: tools on top, hairlines into the node) ---------- */
.int { padding: var(--space-96) 0; background: var(--bg-canvas); }
.int .section-head .h2 { color: var(--text-primary); }
.int__stage { position: relative; height: 476px; margin-top: var(--space-24); padding-top: 72px; }   /* the top 72px: the lines fading in from above */
.int__tools { position: relative; z-index: 1; display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; }
/* each tool's grey mark and name in a white pill; a tool darkens (and its line lights) under the cursor */
.int__tool {
  display: inline-flex; align-items: center; gap: var(--space-10); height: 48px; padding: 0 var(--space-20) 0 var(--space-16);
  border-radius: var(--radius-full); background: var(--bg-canvas); box-shadow: 0 0 0 1px var(--border-default);
  color: var(--color-neutral-400); font: 600 15px/1 var(--font-display); letter-spacing: -0.01em; white-space: nowrap;
  cursor: default; transition: color 200ms, box-shadow 200ms;
}
.int__tool--word { padding: 0 var(--space-20); }
.int__logo { flex: none; width: 20px; height: 20px; fill: currentColor; }
.int__tool--word .int__logo { width: 34px; height: 19px; }
.int__tool.is-lit { color: var(--color-neutral-600); box-shadow: 0 0 0 1px var(--color-blue-300); }
.int__fan { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* each hairline fades in from above, runs behind its tool and on down into the node; they draw in from the top,
   outer pair first (--delay from the script), and the fade is a gradient the script lays over the top 72px */
.int__fade stop { stop-color: var(--color-neutral-300); }
.int__fade--lit stop { stop-color: var(--color-blue-400); }
.int__line {
  fill: none; stroke: url(#int-fade); stroke-width: 1;
  stroke-dasharray: 1 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1200ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--delay, 0ms), stroke 240ms;
}
.int.is-drawn .int__line { stroke-dashoffset: 0; }
.int__line.is-lit { stroke: url(#int-fade-lit); }
.int__px rect { fill: var(--bg-brand); }
/* the BigChange node the lines land on: the problem → solution node, not a button here, with the same pixel signal */
.int__node {
  position: absolute; left: 50%; bottom: 0; z-index: 2;
  display: grid; place-items: center; width: 56px; height: 56px; translate: -50% 0;
  border-radius: var(--radius-full); background: var(--bg-brand); color: var(--icon-on-brand);
  box-shadow: var(--shadow-btn-primary);
  --px-glow: var(--bg-brand);
}
.int__node.is-glowing .px-glow { opacity: 0.4; }
.int__mark { width: 22px; height: 22px; fill: currentColor; }
.int__foot { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); margin-top: var(--space-32); color: var(--text-secondary); text-align: center; }
@media (prefers-reduced-motion: reduce) { .int__line { transition: none; stroke-dashoffset: 0; } }

/* ---------- 06 · How it works ---------- */
.how { padding: var(--space-96) 0; background: var(--bg-canvas); }
.how .section-head .h2 { color: var(--text-primary); }

/* the steps (after the Framer "Steps" component), in the pricing cards' light glass: the active card grows wider and
   taller on a soft spring, lights its bottom glow, turns its icon tile Energy Blue and opens a description and an
   illustration slot. Pixel buttons on a track above the cards pick a step (js/main.js) */
.flow {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--space-16);
  margin: var(--space-56) 0 0; padding: 0; list-style: none;
  --flow-grow: 700ms cubic-bezier(0.2, 0.8, 0.2, 1);   /* one timing for a card's width and height, so it grows evenly */
  --flow-closed: 200px;                                 /* every closed card: the tallest one, a three-line title */
  --flow-open: 1.9;                                     /* the open card's share of the row (js/main.js reads it too) */
}
.flow::after {   /* the track the step pixels sit on, above the cards */
  content: ""; position: absolute; left: 0; right: 0; top: 16px; height: 1px; background: var(--border-default); z-index: 0;
}
.flow__step {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16);
  flex: 1 1 0; min-width: 0;
  transition: flex-grow var(--flow-grow);
}
.flow__step.is-active { flex-grow: var(--flow-open); }
/* the timed progress line (js/main.js): a run of 3px Energy Blue pixels along the track, from the step's marker to the
   next marker (the last step's to the end of the track), revealed pixel by pixel as the step's time runs */
.flow__step { position: relative; }
.flow__progress {
  position: absolute; left: 12px; right: calc(var(--space-16) * -1); top: 15px; z-index: 1; height: 3px;   /* over the grey track */
  background: repeating-linear-gradient(90deg, var(--bg-brand) 0 3px, transparent 3px 5px);
  clip-path: inset(0 100% 0 0); pointer-events: none;
}
.flow__step:last-child .flow__progress { right: 0; }
.flow-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-self: stretch;
  height: auto; min-height: var(--flow-closed); padding: var(--space-28);   /* closed cards share one height; the open card is a fixed 420 */
  interpolate-size: allow-keywords;
  border-radius: var(--radius-3xl);
  background: color-mix(in srgb, var(--bg-canvas) 82%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow:
    inset 1px 1px 0 color-mix(in srgb, var(--color-blue-300) 30%, transparent),
    inset 4px 9px 22px color-mix(in srgb, var(--color-blue-200) 20%, transparent),
    inset -1px -1px 4px color-mix(in srgb, var(--color-neutral-0) 60%, transparent),
    0 0 0 1px var(--border-default);
  cursor: pointer;
  transition: height var(--flow-grow), box-shadow 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.flow__step.is-active .flow-card {
  height: 420px; cursor: default;
  box-shadow:
    inset 1px 1px 0 color-mix(in srgb, var(--color-blue-300) 55%, transparent),
    inset 4px 9px 22px color-mix(in srgb, var(--color-blue-200) 30%, transparent),
    inset -1px -1px 4px color-mix(in srgb, var(--color-neutral-0) 60%, transparent),
    0 0 0 1.5px var(--color-blue-300);
}
.flow__step.is-active .plan__glow { opacity: 0.75; }
.flow-card__title { margin: 0 0 var(--space-16); color: var(--text-primary); text-wrap: balance; }   /* the gap to the icon on a closed card */
.flow__step.is-active .flow-card__title, .flow__step.is-leaving .flow-card__title { margin-bottom: 0; }
/* the description and the illustration slot open on the active card only */
.flow-card__more { display: none; flex-direction: column; gap: var(--space-16); flex: 1; min-height: 0; margin: var(--space-10) 0 var(--space-16); }
.flow__step.is-active .flow-card__more { display: flex; animation: flow-more-in 500ms cubic-bezier(0.2, 0.8, 0.2, 1) 120ms both; }
@keyframes flow-more-in { from { opacity: 0; translate: 0 8px; } }
/* a closing card shrinks straight to the closed height, width and height together, while its figure orbits out
   (js/orbit.js): the text folds away, and the figure, pinned to the card in shares of its size (.is-pinned,
   --leave-*), scales down with it */
.flow__step.is-leaving .flow-card { height: var(--flow-closed); }
.flow__step.is-leaving .flow-card__more { display: flex; }
.flow__step.is-leaving .flow-card__text { height: 0; overflow: hidden; opacity: 0; transition: height var(--flow-grow), opacity 200ms ease-out; }
.flow__step.is-pinned .flow-card__art { position: static; }
.flow__step.is-pinned .fig { inset: auto; left: 50%; bottom: var(--leave-bottom); width: var(--leave-w); height: var(--leave-h); translate: -50% 0; }
.flow-card__text { max-width: 380px; color: var(--text-secondary); }
.flow-card__art { position: relative; flex: 1; min-height: 0; }   /* the step figure stands here on its own tile floor */
.flow-card__art .iso-svg { scale: 1.5; }   /* drawn half as large again, so the instrument reads; its faded floor runs off the slot */
.flow-card__icon {
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; margin-top: auto;   /* at the card's foot, so it glides with the height */
  border-radius: var(--radius-xl); background: var(--bg-canvas); color: var(--icon-secondary);   /* white tile on the inactive cards */
  box-shadow: 0 0 0 1px var(--border-subtle);
  transition: background-color 300ms, color 300ms, box-shadow 300ms;
}
.flow__step.is-active .flow-card__icon { background: var(--bg-brand); color: var(--icon-on-brand); box-shadow: none; }
.flow-card__icon { position: relative; z-index: 2; }   /* above the illustration, which runs past its slot */
/* the step buttons sit on the track: a square pixel and the step's name, on white so the track and the progress line
   stop at the name and carry on after it; Energy Blue on the open step */
.flow__pill {
  position: relative; z-index: 2;   /* over the progress line */
  display: inline-flex; align-items: center; gap: var(--space-8);
  height: 32px; margin: 0; padding: 0 var(--space-10) 0 0;
  border: 0; border-radius: 0; cursor: pointer;
  background: var(--bg-canvas); color: var(--text-tertiary);
  transition: color 300ms, box-shadow 300ms;
}
.flow__dot { flex: none; width: 12px; height: 12px; background: var(--color-neutral-300); transition: background-color 300ms; }
.flow__pill:hover { color: var(--text-primary); }
.flow__pill:hover .flow__dot { background: var(--color-neutral-400); }
.flow__pill:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.flow__step.is-active .flow__pill { color: var(--text-brand); }
.flow__step.is-active .flow__dot { background: var(--bg-brand); }
@media (prefers-reduced-motion: reduce) { .flow__step, .flow-card, .flow-card__icon, .flow__pill, .flow__dot { transition: none; } .flow-card__more { animation: none; } }

/* ---------- 05 · Savings calculator (white: inputs card + Energy Blue result panel) ---------- */
.savings { position: relative; overflow: hidden; padding: var(--space-96) 0; background: var(--bg-canvas); }
/* the backdrop (after the Signal sample's live graph, js/main.js): hub nodes throwing hairlines to sprays of small
   nodes, with blue pixels running along the links, across the page's width, fading out at the edges */
.savings__bg {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 55%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 70% at 50% 55%, #000 35%, transparent 100%);
}
.savings > .container { position: relative; z-index: 1; }
.savings .section-head .h2 { color: var(--text-primary); }

.calc { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--space-24); margin-top: var(--space-56); }

/* inputs */
.calc__inputs {
  grid-column: 1 / span 5;
  display: flex; flex-direction: column;
  padding: var(--space-40);
  background: var(--bg-canvas);
  border: var(--border-width-1) solid var(--border-subtle);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-s);
}
.calc__head { display: flex; flex-direction: column; gap: var(--space-4); }
.calc__head .h5 { margin: 0; color: var(--text-primary); }
.calc__head .body-s { color: var(--text-secondary); }
.calc__fields { display: flex; flex-direction: column; gap: var(--space-32); margin-top: var(--space-32); }
.calc__field { display: flex; flex-direction: column; gap: var(--space-12); }
/* the slider's ends, so people know a typed number can go past them */
.calc__scale { display: flex; justify-content: space-between; margin-top: calc(var(--space-4) * -1); font: 500 12px/16px var(--font-body); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.calc__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); }
.calc__row label { color: var(--text-primary); }
.calc__num {
  width: 96px; height: 40px; padding: 0 var(--space-16);
  border: var(--border-width-1) solid var(--border-default); border-radius: var(--radius-full);
  background: var(--bg-canvas); color: var(--text-primary);
  font: 500 14px/20px var(--font-body); text-align: right; font-variant-numeric: tabular-nums;   /* label-m */
  outline: none; transition: border-color 160ms, box-shadow 160ms;
}
.calc__num:hover { border-color: var(--border-strong); }
.calc__num:focus-visible { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--bg-brand-tint-strong); }
/* the team numbers sit in a stepper: − and + either side of the typed value, all in one pill */
.calc__stepper {
  display: inline-flex; align-items: center; gap: var(--space-2); flex: none;
  padding: var(--space-4); border: var(--border-width-1) solid var(--border-default); border-radius: var(--radius-full);
  background: var(--bg-canvas); transition: border-color 160ms, box-shadow 160ms;
}
.calc__stepper:hover { border-color: var(--border-strong); }
.calc__stepper:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--bg-brand-tint-strong); }
.calc__stepper .calc__num { width: 52px; height: 32px; padding: 0; border: 0; text-align: center; font: 600 16px/24px var(--font-body); }
.calc__stepper .calc__num:focus-visible { box-shadow: none; }
.calc__step {
  display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: var(--radius-full); background: var(--bg-subtle); color: var(--text-primary); cursor: pointer;
  transition: background-color 160ms, color 160ms, opacity 160ms; touch-action: manipulation;
}
.calc__step:hover { background: var(--bg-muted); }
.calc__step:active { background: var(--bg-brand-tint-strong); color: var(--text-brand-hover); }
.calc__step:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.calc__step:disabled { opacity: 0.35; cursor: default; background: var(--bg-subtle); }
/* touch screens: bigger targets for the steppers and the slider */
@media (pointer: coarse) {
  .calc__step { width: 40px; height: 40px; }
  .calc__range { height: 40px; }
  .calc__range::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -11px; }
  .calc__range::-moz-range-thumb { width: 20px; height: 20px; }
}
/* money fields carry a £ prefix inside the pill */
.calc__money { position: relative; display: block; }
.calc__money > span { position: absolute; left: var(--space-16); top: 50%; transform: translateY(-50%); font: 500 14px/20px var(--font-body); color: var(--text-tertiary); pointer-events: none; }
.calc__money .calc__num { width: 128px; padding-left: var(--space-28); }

/* slider: a rounded track filled in Energy Blue up to a round thumb (--fill set by js/main.js); the thumb is a blue
   dot in a white ring with a hairline blue edge, and a soft tint halo on hover and while dragging (rings, no shadow) */
.calc__range {
  --fill: 0%;
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 24px; margin: 0;
  background: transparent; cursor: pointer; outline: none;
}
.calc__range::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--bg-brand) var(--fill), var(--bg-muted) var(--fill));
}
.calc__range::-moz-range-track { height: 6px; border-radius: var(--radius-full); background: var(--bg-muted); }
.calc__range::-moz-range-progress { height: 6px; border-radius: var(--radius-full); background: var(--bg-brand); }
.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -8px;
  border: 4px solid var(--bg-canvas); border-radius: 50%;
  background: var(--bg-brand); box-shadow: 0 0 0 1px var(--bg-brand);
  transition: background-color 160ms, box-shadow 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.calc__range::-moz-range-thumb {
  width: 14px; height: 14px;
  border: 4px solid var(--bg-canvas); border-radius: 50%;
  background: var(--bg-brand); box-shadow: 0 0 0 1px var(--bg-brand);
  transition: background-color 160ms, box-shadow 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.calc__range:hover::-webkit-slider-thumb { background: var(--bg-brand-hover); box-shadow: 0 0 0 1px var(--bg-brand), 0 0 0 7px var(--bg-brand-tint); }
.calc__range:hover::-moz-range-thumb { background: var(--bg-brand-hover); box-shadow: 0 0 0 1px var(--bg-brand), 0 0 0 7px var(--bg-brand-tint); }
.calc__range:active::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--bg-brand), 0 0 0 9px var(--bg-brand-tint-strong); }
.calc__range:active::-moz-range-thumb { box-shadow: 0 0 0 1px var(--bg-brand), 0 0 0 9px var(--bg-brand-tint-strong); }
.calc__range:active { cursor: grabbing; }
.calc__range:focus-visible::-webkit-slider-thumb { box-shadow: var(--shadow-focus); }
.calc__range:focus-visible::-moz-range-thumb { box-shadow: var(--shadow-focus); }

/* "More options" and "How we calculate this" disclosures */
.calc__more { margin-top: auto; padding-top: var(--space-32); }
.calc__more::before { content: ""; display: block; height: 1px; margin-bottom: var(--space-16); background: var(--border-subtle); }
.calc__toggle {
  display: inline-flex; align-items: center; gap: var(--space-6);
  margin: 0 0 0 calc(var(--space-12) * -1); padding: var(--space-8) var(--space-12);
  border: 0; border-radius: var(--radius-full); background: none; cursor: pointer;
  font-family: var(--font-body); color: var(--text-brand);
  transition: background-color 160ms, color 160ms;
}
.calc__toggle:hover { background: var(--bg-brand-tint); color: var(--text-brand-hover); }
.calc__toggle:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.calc__toggle .icon { transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.calc__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.calc__extra { display: flex; flex-direction: column; gap: var(--space-12); margin-top: var(--space-12); }
.calc__extra[hidden] { display: none; }
.calc__extra label { color: var(--text-secondary); }

/* result: the capability panels' Energy Blue with its dot grid; all text white for contrast */
.calc__result {
  grid-column: 6 / span 7;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: var(--space-40);
  border-radius: var(--radius-3xl);
  background: var(--bg-brand);
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.45);
  color: var(--text-on-brand);
}
.calc__result-head { display: flex; align-items: center; justify-content: space-between; }
.calc__total { display: flex; align-items: baseline; gap: var(--space-12); margin-top: var(--space-16); }
.calc__total b { font-variant-numeric: tabular-nums; }
.calc__hours { margin-top: var(--space-4); }
.calc__hours b, .calc__or b { font-weight: 600; }

/* breakdown: solid pixel bars, white for the share of the total, a darker solid blue for the rest (no faded pixels) */
.calc__bars { display: flex; flex-direction: column; gap: var(--space-20); margin-top: var(--space-32); }
.calc__bar-head { display: flex; justify-content: space-between; }
.calc__bar-head b { font-variant-numeric: tabular-nums; }
.calc__bar { display: grid; grid-template-columns: repeat(32, 1fr); gap: 4px; margin-top: var(--space-10); }
.calc__bar i { aspect-ratio: 1; background: var(--color-blue-600); }
.calc__bar i.is-on { background: var(--color-neutral-0); }

.calc__or {
  display: flex; align-items: flex-start; gap: var(--space-12);
  margin-top: var(--space-32); padding: var(--space-16) var(--space-20);
  border-radius: var(--radius-2xl); background: var(--color-blue-600);
}
.calc__or .icon { margin-top: 3px; }
.calc__foot { display: flex; align-items: center; gap: var(--space-20); margin-top: auto; padding-top: var(--space-32); }
.calc__foot .bc-btn--secondary .icon { color: var(--icon-brand); }

/* assumptions, under the two cards */
.calc__note { display: flex; flex-direction: column; align-items: center; margin-top: var(--space-24); text-align: center; }
.calc__note > p { display: flex; align-items: center; gap: var(--space-8); color: var(--text-secondary); }
.calc__toggle--inline { margin: 0; }
.calc__how {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-24);
  width: 100%; margin-top: var(--space-16); padding: var(--space-32);
  border: var(--border-width-1) solid var(--border-subtle); border-radius: var(--radius-3xl);
  background: var(--bg-canvas); text-align: left;
}
.calc__how[hidden] { display: none; }
.calc__how .h6 { margin: 0 0 var(--space-6); color: var(--text-primary); }
.calc__how .body-s { color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) { .calc__toggle .icon, .calc__range::-webkit-slider-thumb { transition: none; } }

/* ---------- 07 · Pricing (after the Framer sample: glass card, pill tag, faded divider, price at the foot) ---------- */
.pricing { padding: var(--space-96) 0; background: var(--bg-canvas); }
.pricing .section-head .h2 { color: var(--text-primary); }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); align-items: center; margin-top: var(--space-56); }
.plan {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 500px; padding: var(--space-32);
  color: var(--text-primary);
  border-radius: var(--radius-3xl);
  /* the sample's light glass: translucent white, a blue inner edge light and a soft top-left highlight */
  background: color-mix(in srgb, var(--bg-canvas) 82%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow:
    inset 1px 1px 0 color-mix(in srgb, var(--color-blue-300) 30%, transparent),
    inset 4px 9px 22px color-mix(in srgb, var(--color-blue-200) 20%, transparent),
    inset -1px -1px 4px color-mix(in srgb, var(--color-neutral-0) 60%, transparent),
    0 0 0 1px var(--border-default),
    var(--shadow-s);
  transition: box-shadow 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* glow rising from the bottom: off at rest, fades in on hover (as in the Gradient Pricing sample) */
.plan__glow {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--color-blue-100) 70%, transparent) 55%, color-mix(in srgb, var(--color-blue-300) 70%, transparent) 100%);
  opacity: 0; transition: opacity 400ms ease-out;
  pointer-events: none;
}
/* fine grain over the glow */
.plan__glow::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.04 0 0 0 0 0.13 0 0 0 0 0.25 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.18; mix-blend-mode: multiply;
}
/* while hovered, big pixels drift up through the card at very low strength (js/main.js), above the glow */
.plan { --px-field: var(--bg-brand); }
/* the hover pixel field (js/main.js): the pricing cards only */
.px-field { position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity 420ms ease-out; image-rendering: pixelated; }
.is-pixel > .px-field { opacity: 0.07; }
/* hover keeps the fill exactly as at rest (Mahdi); the card gains only a low glow, below */
.plan:hover, .plan:focus-within, .flow-card:hover { box-shadow:
    inset 1px 1px 0 color-mix(in srgb, var(--color-blue-300) 30%, transparent),
    inset 4px 9px 22px color-mix(in srgb, var(--color-blue-200) 20%, transparent),
    inset -1px -1px 4px color-mix(in srgb, var(--color-neutral-0) 60%, transparent),
    0 0 0 1px var(--color-blue-200),
    0 0 36px -10px color-mix(in srgb, var(--bg-brand) 28%, transparent); }   /* the low glow */

.plan__head { display: flex; align-items: center; gap: var(--space-10); }
.plan__head .h5 { margin: 0; color: var(--text-primary); }
.plan__sub { margin-top: var(--space-6); color: var(--text-secondary); }
/* divider that fades at both ends */
.plan__rule {
  height: 1px; margin: var(--space-24) 0; border: 0;
  background: linear-gradient(90deg, transparent, var(--border-default) 20%, var(--border-default) 80%, transparent);
}
.plan__features { display: flex; flex-direction: column; gap: var(--space-14); }
.plan__features li { display: flex; align-items: center; gap: var(--space-12); color: var(--text-primary); }
.price__px { flex: none; width: 6px; height: 6px; background: var(--bg-brand); }   /* square pixel bullet */
.plan__foot { display: flex; flex-direction: column; gap: var(--space-20); margin-top: auto; padding-top: var(--space-32); }
.plan__price { display: flex; align-items: baseline; gap: var(--space-8); }
.plan__price b { color: var(--text-primary); }
.plan__price span { color: var(--text-secondary); }
.plan__cta { width: 100%; }

/* the centre plan is the bold one: larger, a brand edge and glow, and its bottom glow is already on at rest */
.plan--featured {
  min-height: 548px; padding: var(--space-32);   /* the same inset on every side, as the other plans */
  box-shadow:
    inset 1px 1px 0 color-mix(in srgb, var(--color-blue-300) 55%, transparent),
    inset 4px 9px 22px color-mix(in srgb, var(--color-blue-200) 30%, transparent),
    inset -1px -1px 4px color-mix(in srgb, var(--color-neutral-0) 60%, transparent),
    0 0 0 1.5px var(--color-blue-300),
    var(--shadow-brand-glow);
}
.plan--featured .plan__glow { opacity: 0.75; }
.plan--featured:hover { box-shadow:
    inset 1px 1px 0 color-mix(in srgb, var(--color-blue-300) 60%, transparent),
    inset 4px 9px 22px color-mix(in srgb, var(--color-blue-200) 35%, transparent),
    inset -1px -1px 4px color-mix(in srgb, var(--color-neutral-0) 60%, transparent),
    0 0 0 1.5px var(--color-blue-400),
    0 0 40px -10px color-mix(in srgb, var(--bg-brand) 30%, transparent); }   /* the low glow; the fill stays as at rest */
.plan--featured .plan__head .h5 { font-size: 24px; line-height: 32px; }   /* h4 token */
.plan--featured .plan__rule { background: linear-gradient(90deg, transparent, var(--color-blue-200) 20%, var(--color-blue-200) 80%, transparent); }
.plan__badge {
  position: relative; overflow: hidden; isolation: isolate; margin-left: auto;   /* at the right end of the plan's head */
  padding: 3px var(--space-10); border-radius: var(--radius-full);
  background: radial-gradient(90% 170% at 6% 0%, color-mix(in srgb, var(--color-blue-300) 35%, transparent) 0%, color-mix(in srgb, var(--color-neutral-0) 60%, transparent) 100%);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-blue-300) 45%, transparent);
  color: var(--text-brand-hover);
}
/* its loop: a band of 2px pixels sweeps across under the label in pixel steps every few seconds (the lead buttons'
   shine, small) */
.plan__badge::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: conic-gradient(from 90deg at 1px 1px, var(--color-blue-300) 90deg, transparent 0) 0 0 / 3px 3px;   /* 2px squares, 1px apart */
  -webkit-mask: linear-gradient(100deg, transparent 38%, #000 47%, #000 53%, transparent 62%) 0 0 / 320% 100% no-repeat;
  mask: linear-gradient(100deg, transparent 38%, #000 47%, #000 53%, transparent 62%) 0 0 / 320% 100% no-repeat;
  animation: badge-shine 3.6s steps(18) infinite;
}
@keyframes badge-shine { 0% { -webkit-mask-position: 100% 0; mask-position: 100% 0; } 40%, 100% { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .plan__badge::after { animation: none; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .plan, .plan__glow { transition: none; } }

.pricing__note { display: flex; align-items: center; justify-content: center; gap: var(--space-8); margin-top: var(--space-40); color: var(--text-secondary); text-align: center; }
.pricing__note a { color: var(--text-brand); font-weight: 500; }
.pricing__note a:hover { color: var(--text-brand-hover); }

/* ---------- 08 · FAQ (white) ---------- */
.faq { padding: var(--space-96) 0 calc(var(--space-96) + 120px); background: var(--bg-canvas); color: var(--text-primary); }   /* 96px clear of the CTA's pixels, which rise up to 120px */
.faq__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--space-24); align-items: start; }
.faq__intro { grid-column: 1 / span 5; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-20); position: sticky; top: 120px; }
.faq__intro .h2 { color: var(--text-primary); }
.faq__lede { max-width: 420px; color: var(--text-secondary); }
/* "Still have questions?" — the section's one call to action */
.faq__help {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-10);
  align-self: stretch; max-width: 420px;
  margin-top: var(--space-28); padding-top: var(--space-32);
  border-top: var(--border-width-1) solid var(--border-subtle);
}
.faq__help .h5 { margin: 0; color: var(--text-primary); }
.faq__help .body-m { color: var(--text-secondary); }
.faq__help .bc-btn { margin-top: var(--space-10); }

/* FAQ boxes (after the motion-accordion reference): every answer is its own rounded box; the open one springs to
   full size and its height springs open while the answer slides up and fades in (js/main.js) */
.faq__list { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: 10px; }
/* grey boxes with no stroke; hovering one deepens its grey */
.qa {
  overflow: hidden;
  background: var(--bg-subtle);
  border-radius: var(--radius-3xl);
  transform: scale(0.985); transform-origin: 50% 0;
  transition: background-color 200ms ease-out;
}
.qa:hover { background: var(--bg-muted); }
.qa.is-open { transform: none; }
.qa__h { margin: 0; }
.qa__btn {
  display: flex; align-items: center; gap: var(--space-12); width: 100%;
  padding: var(--space-16) var(--space-16) var(--space-16) var(--space-28);
  border: 0; background: none; cursor: pointer; text-align: left;
  font: 600 18px/26px var(--font-display); color: var(--text-primary);   /* h6 token */
  border-radius: var(--radius-3xl);
}
.qa__btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--border-focus); }
.qa__q { flex: 1; }
.qa__btn .chip { flex: none; border-radius: var(--radius-full); }
/* plus that turns into a minus: the whole icon turns half a turn with a little overshoot, its upright stroke folds away */
.qa__toggle {
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px;
  border-radius: var(--radius-full); color: var(--text-primary);
  transition: transform 460ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 160ms;
}
.qa__toggle svg { width: 14px; height: 14px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
.qa__vert { transform-origin: 7px 7px; transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.qa__btn[aria-expanded="true"] .qa__toggle { transform: rotate(180deg) scale(1.05); }
.qa__btn[aria-expanded="true"] .qa__vert { transform: scaleY(0); }
.qa__panel { overflow: hidden; transition: opacity 200ms ease-out; }
.qa__panel[hidden] { display: none; }
.qa__inner { padding: 0 var(--space-28) var(--space-28); }
.qa__panel p { max-width: 520px; color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) { .qa__toggle, .qa__vert, .qa__panel { transition: none; } }

/* ---------- 09 · Closing CTA (Energy Blue band, pixel-skyline edges, booking form) ---------- */
.cta { position: relative; z-index: 3; padding: var(--space-128) 0; background: var(--bg-brand); color: var(--text-on-brand); }
/* the band's floor (js/main.js): the 3D figures' square tile floor seen flat, in faint white hairlines, with the
   tile under the cursor lighting up and fading, as on the figures; faded out toward the top and bottom */
.cta__floor {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%);   /* fades out at the top and bottom */
}
.cta__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--space-24); align-items: center; }
.cta__copy { grid-column: 1 / span 7; padding-right: var(--space-24); }
.cta .h1 { color: var(--text-on-brand); }
.cta__list { display: flex; flex-direction: column; gap: var(--space-16); margin-top: var(--space-40); }
.cta__list li { display: flex; align-items: center; gap: var(--space-14); color: var(--text-on-brand); }
.cta__list .icon { stroke-width: 2.25; }

.cta__form {
  grid-column: 8 / span 5;
  display: flex; flex-direction: column; gap: var(--space-16);
  padding: var(--space-40);
  background: var(--bg-canvas); border-radius: var(--radius-3xl);
}
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* fields after the wireframe: a small label above each, a softly rounded box, two short fields side by side */
.field { position: relative; display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.field__label { color: var(--text-tertiary); }
.field__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); }
.field__control { position: relative; display: block; }
.field input, .field select {
  display: block; width: 100%; height: 52px; padding: 0 var(--space-16);
  border: var(--border-width-1) solid var(--border-default); border-radius: var(--radius-xl);
  background: var(--bg-canvas); color: var(--text-primary);
  font-family: var(--font-body);
  outline: none; transition: border-color 160ms, box-shadow 160ms;
  -webkit-appearance: none; appearance: none;
}
.field input::placeholder { color: var(--text-tertiary); }
.field select:invalid { color: var(--text-tertiary); }
.field select option { color: var(--text-primary); }
.field input:hover, .field select:hover { border-color: var(--border-strong); }
.field input:focus-visible, .field select:focus-visible { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--bg-brand-tint-strong); }
.field--select select { padding-right: var(--space-40); cursor: pointer; }
.field--select .icon { position: absolute; right: var(--space-16); top: 50%; transform: translateY(-50%); color: var(--icon-secondary); pointer-events: none; }
.cta__submit { width: 100%; margin-top: var(--space-8); }
.cta__submit:disabled { opacity: 0.7; cursor: progress; }
.cta__status { min-height: 0; color: var(--text-secondary); }
.cta__status:empty { display: none; }
.cta__status.is-ok { color: var(--text-success); }
.cta__status.is-error { color: var(--text-danger); }

/* the maker's credit (as on nuvora.mahdigzh.com): a white pill fixed to the bottom right, linking to the portfolio */
.credit {
  position: fixed; right: 24px; bottom: 24px; z-index: 50;
  display: flex; align-items: center; gap: 12px; padding: 6px 20px 6px 6px;
  border-radius: var(--radius-full); background: var(--bg-canvas); color: var(--text-primary); text-decoration: none;
  font-family: var(--font-body); box-shadow: 0 0 0 1px var(--border-default);
  transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 200ms;
}
.credit:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--border-strong); }
.credit:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.credit__mark { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--color-neutral-950); }
.credit__text { display: flex; flex-direction: column; }
.credit__title { font-size: 15px; line-height: 20px; }
.credit__title b { font-weight: 600; }
.credit__sub { font-size: 13px; line-height: 18px; color: var(--text-secondary); }
.credit__arrow { margin-left: 8px; color: var(--text-brand); transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.credit:hover .credit__arrow { transform: translate(2px, -2px); }
@media (max-width: 767px) {
  .credit { right: 16px; bottom: 16px; gap: 10px; padding: 4px 14px 4px 4px; }
  .credit__mark { width: 40px; height: 40px; }
  .credit__title { font-size: 14px; }
  .credit__sub { font-size: 12px; line-height: 16px; }
  .credit__arrow { margin-left: 4px; }
}
@media (prefers-reduced-motion: reduce) { .credit, .credit__arrow { transition: none; } .credit:hover { transform: none; } }   /* centred label with a white arrow after it */

/* pixel edges in the band's own blue: rising into the FAQ above, hanging into the footer below */
.pixels--cta { position: absolute; left: 0; pointer-events: none; }
.pixels--cta.pixels--top { bottom: 100%; }
.pixels--cta.pixels--bottom { top: 100%; }
/* solid pixels only: every pixel is the band's own Energy Blue, no faded tones */
.pixels--cta .px { fill: var(--bg-brand); }

.pixels { display: block; width: 100%; shape-rendering: crispEdges; }   /* no seams between neighbouring pixels */
.px-strip, .px { fill: var(--pixel-solid); }   /* one solid colour per field, set per band below */
.px--half { opacity: 0.5; }                     /* the soft cap pixel on top of each column */

/* ---------- 10 · Footer ---------- */
/* black footer: Dark-theme tokens on the darkest neutral */
.footer { position: relative; overflow: hidden; padding: calc(var(--space-96) + 120px) 0 var(--space-40);   /* 96px clear of the CTA's falling pixels */
  background: var(--color-neutral-950); color: var(--text-primary); }
/* the footer's background (after the Arachne Spider sample, js/web.js): a field of blue pixels and a white node that
   follows the cursor, throwing hairline legs to the nearest pixels */
.footer__web { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.footer > .container { position: relative; z-index: 1; }
.footer__top { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--space-24); }
.footer__brand { grid-column: 1 / span 4; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); }
/* the only lockup file is blue on white: render it white for the dark footer (swap for the official reversed SVG in Step 11) */
.footer__brand img { height: 24px; width: auto; filter: grayscale(1) invert(1) brightness(1.7); mix-blend-mode: screen; }
.footer__brand a:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
.footer__brand p { max-width: 280px; color: var(--text-secondary); }
.footer__cols { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-24); }
.footer__col .h6 { margin: 0 0 var(--space-16); color: var(--text-primary); }
.footer__col ul { display: flex; flex-direction: column; gap: var(--space-12); }
.footer a { color: var(--text-secondary); transition: color 160ms; }
.footer a:hover { color: var(--text-primary); }
.footer__col a:focus-visible, .footer__bottom a:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }
.footer__bottom {
  display: flex; align-items: center; gap: var(--space-32);
  margin-top: var(--space-64); padding-top: var(--space-24);
  border-top: var(--border-width-1) solid var(--border-default);
  color: var(--text-secondary);
}
.footer__legal, .footer__social { display: flex; gap: var(--space-24); }
.footer__social { margin-left: auto; }

/* Dark button (navbar CTA): the design system's darkest neutral, with the same soft top highlight */
.bc-btn--dark { background: var(--color-neutral-950); color: var(--text-on-brand); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.22); }
.bc-btn--dark { --px-hover: var(--color-neutral-800); --px-glow: var(--color-neutral-400); }   /* a grey pixel glow round the dark pill */
.bc-btn--dark:hover { background: var(--color-neutral-800); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { html.js .bc-btn--dark:hover { background-color: var(--color-neutral-950); } }
.bc-btn--dark:active { background: var(--color-neutral-900); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35); }
.bc-btn--dark:focus-visible { box-shadow: var(--shadow-focus); }

/* problem → solution flow: hairline bundles leave the "Today" card edges, run along the cards, pinch into the BigChange node and land on "With BigChange" — grey before the node, blue after */
.ps__flow { position: absolute; left: 0; top: -68px; z-index: 0; width: 1200px; height: 680px; overflow: visible; pointer-events: none; }   /* top: 12px lower with the 544px cards, so the bundles still meet at the node */
.ps__lines path { fill: none; stroke-width: 0.8; }
/* the reveal in order (js/main.js): cards, then the node lands, then the cables draw out from it, then the traffic */
.ps__stage.is-sequenced .ps__node { opacity: 0; scale: 0.6; transition: opacity 260ms ease-out, scale 520ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.ps__stage.is-node .ps__node { opacity: 1; scale: 1; }
.ps__stage.is-sequenced .ps__lines path { stroke-dasharray: 1 1; stroke-dashoffset: var(--from, 1); transition: stroke-dashoffset 900ms cubic-bezier(0.45, 0, 0.25, 1); }
.ps__stage.is-drawn .ps__lines path { stroke-dashoffset: 0; }
.ps__stage.is-sequenced .ps__ring, .ps__stage.is-sequenced .ps__dots { opacity: 0; transition: opacity 500ms ease-out; }
.ps__stage.is-live .ps__ring, .ps__stage.is-live .ps__dots { opacity: 1; }
.ps__ring rect { fill: var(--color-blue-300); }
.ps__dot { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 0.01 100; stroke-dashoffset: 0; animation: ps-travel 4.8s linear infinite; }
@keyframes ps-travel { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@media (prefers-reduced-motion: reduce) {
  .ps__dots { display: none; }
}

.nav.is-compact { width: 840px; }
/* tucked up out of the way while the visitor reads down (js/main.js) */
.nav.is-tucked { transform: translate(-50%, calc(-100% - var(--space-24))); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }

/* the node carries the BigChange mark: everything passes through the platform */
.ps__mark { width: 22px; height: 22px; fill: currentColor; }

/* ---------- Section ruler (fixed, left) — a pixel gauge: the track slides with the scroll under a fixed pointer ---------- */
.railnav {
  --rail-tick: var(--color-neutral-200);
  --rail-mark: var(--color-neutral-400);
  --rail-active: var(--bg-brand);
  --rail-gap: 56px;                         /* distance between section marks on the track */
  --rail-pad: var(--space-8);               /* inner padding: the parts below sit inside it */
  position: fixed; left: var(--space-16); top: 50%; z-index: 40;   /* 16px from the window edge */
  width: 88px; height: 280px; padding: var(--rail-pad); transform: translateY(-50%);
  pointer-events: none;
}
/* the moving part, faded out at both ends */
.railnav__window {
  position: absolute; inset: var(--rail-pad);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
}
.railnav__track {
  position: absolute; left: 0; top: 50%; margin: 0; padding: 0; list-style: none;
  width: 40px; height: calc(var(--rail-gap) * 9);
  transform: translateY(calc(var(--rail-offset, 0px) * -1));
  will-change: transform;
}
/* minor ticks: a column of solid 3px pixels along the track, from the first mark to the last */
.railnav__track::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;   /* first mark to last: nothing before the hero or after the end */
  background: repeating-linear-gradient(to bottom, var(--rail-tick) 0 3px, transparent 3px 8px);
  background-position: 0 1px;
}
.railnav__track li { position: absolute; left: 0; top: calc(var(--rail-gap) * var(--i)); transform: translateY(-50%); }
/* section marks: a row of 3px pixels, clickable */
.railnav__mark {
  display: block; width: 13px; height: 3px; padding: 6px 0; box-sizing: content-box; background-clip: content-box;
  background-image: repeating-linear-gradient(90deg, var(--rail-mark) 0 3px, transparent 3px 5px);
  pointer-events: auto; outline: none;
  transition: width 200ms steps(3, end);
}
.railnav__mark:hover, .railnav__mark:focus-visible { width: 23px; }
.railnav__mark:focus-visible { box-shadow: var(--shadow-focus); }
/* the fixed pointer: a long row of Energy Blue pixels at the centre line */
.railnav__pointer {
  position: absolute; left: var(--rail-pad); top: 50%; width: 33px; height: 3px; transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, var(--rail-active) 0 3px, transparent 3px 5px);
}
/* the label stays in its place beside the pointer; only its text changes */
.railnav__label {
  position: absolute; left: calc(var(--rail-pad) + 36px); top: 50%; transform: translateY(-50%);   /* tucked against the pointer's end */
  padding: 3px var(--space-6); border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--bg-canvas) 85%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--text-primary); white-space: nowrap;
  transition: opacity 140ms ease-out, filter 140ms ease-out;
}
.railnav__label.is-swapping { opacity: 0; filter: blur(2px); }
/* over the blue CTA: solid light pixels and a white pointer */
.railnav.is-inverse { --rail-tick: var(--color-blue-300); --rail-mark: var(--color-blue-100); --rail-active: var(--color-neutral-0); }
@media (prefers-reduced-motion: reduce) { .railnav__mark, .railnav__label { transition: none; } }

/* ==========================================================================
   Responsive. The design system's grid, spacing and type scale, stepped down:
   desktop  >= 1280  as designed: the 1200 container, 12 columns of 78 with 24 gutters
   laptop   1024-1279  a fluid container with 40px margins, the same 12 columns; the ruler hides
   tablet   768-1023  32px margins; two-column sections stack; the links fold into a menu
   mobile   <= 767  20px margins; type one step down the scale; full-width actions; 16px inputs
   Spacing stays on the 8px scale and touch targets stay 40px or more.
   ========================================================================== */

/* ---------- laptop and below ---------- */
@media (max-width: 1279px) {
  .railnav { display: none; }   /* it would sit on the content once the margins are narrow */

  /* problem -> solution: the hairline bundles are drawn for the 1200 layout; a single line through the node instead */
  .ps__flow { display: none; }
  .ps__stage { grid-template-columns: 1fr 112px 1fr; margin-top: var(--space-64); }
  .ps__stage::before {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; z-index: 0;
    background: linear-gradient(90deg, var(--color-neutral-300), var(--color-blue-300));
  }

  /* integrations: the tools wrap onto rows and the fan gives way to one line down into the node */
  .int__stage { height: auto; padding-top: 0; margin-top: var(--space-40); }
  .int__tools { flex-wrap: wrap; justify-content: center; gap: var(--space-12); }
  .int__fan { display: none; }
  .int__node { position: relative; left: auto; bottom: auto; translate: none; margin: var(--space-80) auto 0; }
  .int__node::before {
    content: ""; position: absolute; left: 50%; bottom: calc(100% + var(--space-8)); width: 1px; height: var(--space-64);
    background: linear-gradient(to bottom, transparent, var(--color-blue-300));
  }

  .plan, .plan--featured { padding: var(--space-28); }
}

/* ---------- tablet and below ---------- */
@media (max-width: 1023px) {
  :root { --page-margin: 32px; }
  .display-xl { font-size: 56px; line-height: 60px; }
  .display-l { font-size: 48px; line-height: 52px; }
  .h1 { font-size: 40px; line-height: 48px; }
  .h2 { font-size: 34px; line-height: 42px; }
  .h3 { font-size: 28px; line-height: 36px; }

  .ps, .feat, .int, .how, .savings, .pricing { padding: var(--space-80) 0; }
  .faq { padding: var(--space-80) 0 calc(var(--space-80) + 120px); }
  .cta { padding: var(--space-96) 0; }
  .footer { padding-top: calc(var(--space-80) + 120px); }

  /* navbar: logo and actions in the bar; the links in a panel under it, opened by the menu button */
  .nav, .nav.is-compact { grid-template-columns: 1fr auto; width: calc(100% - 2 * var(--space-16)); }
  .nav__toggle { display: inline-flex; }
  .nav-scrim { display: block; }
  .nav__toggle-close, .nav.is-open .nav__toggle-open { display: none; }
  .nav.is-open .nav__toggle-close { display: block; }
  .nav__login { display: none; }
  .nav__menu-only { display: block; margin-top: var(--space-8); padding-top: var(--space-8); border-top: var(--border-width-1) solid var(--border-subtle); }
  .nav__menu-login { width: 100%; }   /* the design system's secondary button, full width under the links */
  .nav__menu {
    position: absolute; left: 0; right: 0; top: calc(100% + var(--space-8));
    padding: var(--space-8); border-radius: var(--radius-3xl);
    background: var(--bg-canvas);
    box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.95), 0 0 0 1px rgba(10, 34, 64, 0.07);
    opacity: 0; visibility: hidden; translate: 0 calc(-1 * var(--space-8));
    transition: opacity 200ms ease-out, translate 260ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 260ms;
  }
  .nav.is-open .nav__menu { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
  /* the page behind the open menu softens: a faint navy veil with a soft blur, fading in with the panel */
  .nav-scrim {
    position: fixed; inset: 0; z-index: 49;   /* just under the bar */
    background: color-mix(in srgb, var(--color-neutral-900) 5%, transparent);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);   /* soft: the page still reads behind it */
    opacity: 0; visibility: hidden; transition: opacity 260ms ease-out, visibility 0s linear 260ms;
  }
  .is-menu-open .nav-scrim { opacity: 1; visibility: visible; transition-delay: 0s; }
  /* the bar keeps the desktop glass; only while the menu is open do the bar and its panel turn solid white, since the
     bar's blur would wash over the panel hanging below it (Chrome) and let the page show through the links */
  .nav.is-open { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg-canvas); }
  .nav__links { flex-direction: column; gap: var(--space-2); }
  .nav__link { display: flex; align-items: center; min-height: 48px; padding: 0 var(--space-16); border-radius: var(--radius-2xl); font-size: 16px; line-height: 24px; color: var(--text-primary); }

  .hero { padding-top: 136px; }
  .hero__curtain { height: 480px; }

  .logos { flex-wrap: wrap; justify-content: center; gap: var(--space-24) var(--space-40); padding: 0; }

  /* problem -> solution: the two cards stack, the node between them on a line running down */
  .ps__stage { display: flex; flex-direction: column; align-items: center; margin-top: var(--space-56); }
  .ps__stage::before { left: 50%; right: auto; top: var(--ps-line-top, 0); bottom: var(--ps-line-bottom, 0); width: 1px; height: auto; background: linear-gradient(to bottom, var(--color-neutral-300), var(--color-blue-300)); }
  /* the stacked reveal (js/main.js): the line draws down from the Today card, the node lands half-way */
  .ps__stage.is-sequenced::before { scale: 1 0; transform-origin: 50% 0; transition: scale 900ms cubic-bezier(0.45, 0, 0.25, 1); }
  .ps__stage.is-drawn::before { scale: 1 1; }

  .ps-card { width: 100%; max-width: 600px; height: auto; }
  .ps__node { margin: var(--space-32) 0; }

  /* capabilities: the text, then its figure */
  .feat .container { gap: var(--space-160); }   /* clear air between the two capabilities */
  .feat__row { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-8); }   /* the figure's own floor fade is the space above the text */
  .feat__text { max-width: 640px; }
  .feat__body { max-width: none; }
  .showcase { order: -1; width: 100%; max-width: 600px; margin-inline: auto; }   /* the figure first, then its title and text */

  .calc { display: flex; flex-direction: column; gap: var(--space-24); margin-top: var(--space-48); }
  .calc__how { grid-template-columns: repeat(2, 1fr); }

  /* how it works: the steps run down the page on a vertical track (Mahdi's sketch): a square marker at the top of
     each card, joined to the next marker by a hairline that fills with the progress pixels as the step's time runs
     (js/main.js turns the fill vertical here); every card shows, the open one grown. The cards' titles name the steps,
     and the markers keep their "Step n: name" labels for screen readers */
  .flow { flex-direction: column; align-items: stretch; gap: var(--space-16); margin-top: var(--space-48); --flow-closed: 144px; }
  /* closed cards share one fixed height (a one-line title and the icon), the same height a closing card shrinks to, so it
     lands without a bounce */
  .flow__step:not(.is-active) .flow-card { height: var(--flow-closed); min-height: 0; }
  .flow::after { display: none; }
  .flow__step, .flow__step.is-active { flex: none; display: grid; grid-template-columns: 24px 1fr; column-gap: var(--space-16); align-items: start; }
  .flow__pill { grid-column: 1; grid-row: 1; justify-content: center; width: 24px; height: 24px; padding: 0; background: transparent; }
  .flow__name { display: none; }
  .flow-card { grid-column: 2; grid-row: 1; }
  .flow__step::after {   /* the track: from under this marker to the top of the next one */
    content: ""; position: absolute; left: 11.5px; top: 18px; bottom: calc(-1 * (var(--space-16) + 6px)); width: 1px; z-index: 0;
    background: var(--border-default);
  }
  .flow__progress {
    left: 10.5px !important; right: auto; top: 18px; bottom: calc(-1 * (var(--space-16) + 6px)); width: 3px; height: auto;
    background: repeating-linear-gradient(180deg, var(--bg-brand) 0 3px, transparent 3px 5px);
  }
  .flow__step:last-child::after, .flow__step:last-child .flow__progress { display: none; }   /* the track ends at the last marker */
  .flow-card__text { max-width: 520px; }

  .plans { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; margin-top: var(--space-48); }
  .plan, .plan--featured { min-height: 0; }

  /* FAQ: heading and line, the questions, then "Still have questions?" */
  .faq__grid { display: flex; flex-direction: column; align-items: stretch; }   /* full width (desktop's grid aligns to the top, which shrank the list to its text) */
  .faq__intro { display: contents; }
  .faq__lede { margin-top: var(--space-16); }
  .faq__list { order: 1; margin-top: var(--space-40); }
  .faq__help { order: 2; max-width: none; margin-top: var(--space-48); }

  .cta__grid { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-48); }
  .cta__copy { padding-right: 0; }

  .footer__top { display: flex; flex-direction: column; gap: var(--space-48); }
}

/* ---------- mobile ---------- */
@media (max-width: 767px) {
  :root { --page-margin: 20px; }
  .display-xl { font-size: 40px; line-height: 44px; }
  .display-l { font-size: 36px; line-height: 40px; }
  .h1 { font-size: 32px; line-height: 40px; }
  .h2 { font-size: 28px; line-height: 36px; }
  .h3 { font-size: 24px; line-height: 32px; }
  .h4 { font-size: 22px; line-height: 30px; }
  .body-xl { font-size: 18px; line-height: 28px; }
  .body-l { font-size: 16px; line-height: 26px; }

  .ps, .feat, .int, .how, .savings, .pricing { padding: var(--space-64) 0; }
  .faq { padding: var(--space-64) 0 calc(var(--space-64) + 120px); }
  .cta { padding: var(--space-80) 0; }
  .footer { padding-top: calc(var(--space-64) + 120px); }
  .section-head { gap: var(--space-12); }

  .nav, .nav.is-compact { top: var(--space-12); width: calc(100% - 2 * var(--space-12)); height: 56px; padding: 0 var(--space-8); column-gap: var(--space-12); }
  .nav__logo { margin-left: var(--space-16); }   /* 25px in from the edge, as on desktop */
  .nav__logo img { height: 20px; }
  .nav__actions { gap: var(--space-6); }
  .nav__actions .bc-btn--sm { height: 40px; }
  .nav__actions .nav__toggle { width: 40px; height: 40px; }   /* 40×40: beats the 36px small icon-button size */
  .nav.is-tucked { transform: translate(-50%, calc(-100% - var(--space-12))); }

  .hero { padding-top: 112px; }
  .hero__eyebrow { margin-bottom: var(--space-16); text-wrap: balance; }
  .hero__sub { margin-top: var(--space-16); }
  .hero__ctas { flex-direction: column; align-self: stretch; margin-top: var(--space-32); }
  .hero__ctas .bc-btn { width: 100%; }
  .hero__stage { margin-top: var(--space-48); }
  .hero__curtain { height: 360px; }

  .proof__band { padding: var(--space-48) 0; }
  .logos { zoom: 0.85; gap: var(--space-20) var(--space-32); margin-top: var(--space-24); }

  .ps__stage { margin-top: var(--space-40); }
  .ps-card { padding: var(--space-24); }
  .ps__node { margin: var(--space-24) 0; }

  .feat .container { gap: var(--space-128); }
  .feat__row { gap: 0; }
  .feat__list { margin-top: var(--space-24); }

  .int__tool { height: 44px; padding: 0 var(--space-16) 0 var(--space-12); font-size: 14px; }
  .int__tools { gap: var(--space-8); }
  .int__node { margin-top: var(--space-64); }
  .int__node::before { height: var(--space-48); }

  .calc { margin-top: var(--space-40); }
  .calc__inputs, .calc__result { padding: var(--space-24); }
  .calc__num { width: 88px; font-size: 16px; }   /* 16px so phones don't zoom into the field */
  .calc__money .calc__num { width: 120px; }
  .calc__or { padding: var(--space-16); }
  .calc__foot { flex-direction: column; align-items: stretch; gap: var(--space-12); }
  .calc__foot .bc-btn { width: 100%; }
  .calc__how { grid-template-columns: 1fr; padding: var(--space-24); }
  .calc__bar { gap: 3px; }
  .calc__note > p { flex-direction: column; gap: var(--space-4); }

  .flow { --flow-closed: 164px; }   /* a two-line title on a phone */
  .flow__step, .flow__step.is-active { column-gap: var(--space-12); }
  .flow-card { padding: var(--space-24); }
  .flow__step.is-active .flow-card { height: 400px; }

  .plan, .plan--featured { padding: var(--space-24); }
  .pricing__note { flex-direction: column; gap: var(--space-4); }

  .qa__btn { padding: var(--space-12) var(--space-12) var(--space-12) var(--space-20); font-size: 16px; line-height: 24px; }
  .qa__inner { padding: 0 var(--space-20) var(--space-20); }
  .qa__btn .chip { display: none; }   /* the topic tags give the question its full width on a phone */

  .cta__form { padding: var(--space-24); }
  .field__row { grid-template-columns: 1fr; }
  .cta__list { margin-top: var(--space-32); gap: var(--space-12); }

  .footer__cols { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-32); }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-16); margin-top: var(--space-48); }
  .footer__legal { flex-wrap: wrap; gap: var(--space-16); }
  .footer__social { margin-left: 0; }
}

/* ---------- PixelPath brand: the pixel mark and the Montserrat wordmark, drawn in code ---------- */
/* the Get paid figure faces left to right (Mahdi): mirrored on screen; js/main.js turns its text back so it reads */
[data-figure="getpaid"] .iso-svg { scale: -1 1; }

/* proportions from the master lockup: the mark is 2.76× the wordmark's cap height (Montserrat caps are 0.7em, so the
   mark is 1.93em), the gap is 1.68 of the mark's 5 grid units (0.65em), and the word sits on the mark's centre line */
.brandmark { display: inline-flex; align-items: center; gap: 0.65em; color: var(--bg-brand); line-height: 1; }
.brandmark__mark { width: 1.93em; height: 1.93em; flex: none; fill: currentColor; shape-rendering: crispEdges; }
.brandmark__word { font: 800 1em/1 Montserrat, var(--font-body); letter-spacing: 0; }
/* the top bar's lockup, set to Mahdi's reference: a 25px mark (whole 5px pixels) beside a 15px word, 14px apart */
.brandmark--nav { font-size: 15px; gap: 14px; }
.brandmark--nav .brandmark__mark { width: 25px; height: 25px; }
.brandmark--footer { font-size: 17px; color: var(--color-neutral-0); }