/* ===========================================================
 * Floww.io 2026 — Shared site stylesheet
 * Loaded after assets/tokens.css on every marketing page.
 * Contains the nav, footer, hero, section, card and table
 * primitives that the eight priority pages share.
 * =========================================================== */

html, body { background: var(--background-base); color: var(--fill-base); }
/* Guides pages sit on the Up1 ground. */
body.guides-page { background: var(--background-up1); }
body { font-family: var(--font-sans); }

/* Headings: regular weight, line-height = font-size (set in the type recipes).
   H1/H2 always carry negative display tracking; component rules may override. */
h1 { letter-spacing: var(--tracking-display-tight); }
h2 { letter-spacing: var(--tracking-display); }

/* Container widths */
.container { width: min(1168px, 100% - 48px); margin-inline: auto; }
.cap1400 { width: min(1400px, 100% - 32px); margin-inline: auto; }
.cap880  { width: min(880px,  100% - 48px); margin-inline: auto; }

/* ----------------------------------------------------------
 * Nav (floating pill — injected by site-chrome.js)
 * ---------------------------------------------------------- */
.nav-wrap {
  position: fixed; top: 24px; left: 0; right: 0; z-index: 1000;
  display: block;
  padding: 0 24px;
  pointer-events: none;
}
/* Hero already pulls itself under the nav with margin-top:-64px;
   we now need a top spacer on subsequent pages so the fixed nav
   doesn't cover the first section. The hero rule still applies; for
   pages without a hero, body gets a top padding via the spacer below. */
body.has-fixed-nav { padding-top: 0; }
.nav {
  pointer-events: auto;
  width: 100%;
  display: flex; align-items: center;
  flex-wrap: nowrap;
  gap: 24px;
  padding: 8px 8px 8px 24px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  /* Nav is fixed at :root, so tokens resolve to their light values. On the dark
   * grounds it floats over, a light --border-base (White 60) reads too bright —
   * pin the default (dark) treatment to the dark theme's subtle hairline. */
  border: 0.5px solid var(--t-white-10);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  transition: background 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
}
.nav__brand { display:flex; align-items:center; gap:10px; color:#fff; flex: none; }
.nav__brand img { height: 22px; width: auto; }
.nav__links { display: flex; gap: 0; flex: 1; justify-content: center; }
.nav__links > a, .nav__links > .nav__group > .nav__top {
  color: #fff; opacity: 0.9;
  font: 500 14px/20px var(--font-sans);
  padding: 8px 14px; border-radius: 99px;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  background: transparent;
  border: 0;
}
.nav__links > a:hover, .nav__links > .nav__group > .nav__top:hover { opacity: 1; background: rgba(255,255,255,0.06); }
.nav__links .chev { width: 12px; height: 12px; opacity: .6; transition: transform 200ms ease; }
.nav__group { position: relative; }
/* Hover-bridge: the gap between the trigger and the menu was a dead
   zone that closed the menu. This pseudo extends the group's hover
   target through the gap so the cursor can travel down. */
.nav__group::after {
  content: ""; position: absolute;
  left: 0; right: 0; top: 100%; height: 14px;
  pointer-events: none;
}
.nav__group:hover::after,
.nav__group[data-open="true"]::after { pointer-events: auto; }
.nav__group[data-open="true"] .chev { transform: rotate(180deg); }
.nav__menu {
  position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%);
  min-width: 200px;
  z-index: 1100;
  /* Exact same surface as the nav bar pill (.nav): 6% white over blur(40px). */
  background: rgba(255, 255, 255, 0.06);
  border: 0.5px solid var(--t-white-10);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-radius: 16px;
  padding: 12px;
  display: none;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
}
.nav__group[data-open="true"] .nav__menu { display: flex; }
/* Portaled menus live on <body>; we drive their visibility off
   data-group-open which is mirrored from the source group. */
.nav__menu--portal { display: none; }
body[data-nav-open="true"] .nav__menu--portal[data-active="true"] { display: flex; }
.nav__menu a {
  padding: 8px 16px;
  border-radius: 99px;
  color: #fff;
  font: 500 14px/20px var(--font-sans);
  display: block;
  white-space: nowrap;
  transition: opacity 150ms ease, background 150ms ease, color 150ms ease;
}
/* Dark treatment (default) — hover + current-page accent is the lighter blue
 * that reads on the dark glass. */
.nav__menu a:hover,
.nav__menu a.is-current { background: rgba(120,173,252,0.14); color: rgb(120,173,252); opacity: 1; }
.nav__menu a .sub { display: none; }

/* Light treatment — when the nav is over a light band, the dropdown flips to a
 * light glass with ink labels and the core brand blue (#0665F4) accent.
 * data-nav-theme is mirrored onto <body> so the portaled menus match too. */
body[data-nav-theme="light"] .nav__menu {
  background: rgba(21,31,46,0.06);
  border-color: var(--border-base);
  box-shadow: 0 24px 60px rgba(21,31,46,0.16);
}
body[data-nav-theme="light"] .nav__menu a { color: var(--ocean-900); }
body[data-nav-theme="light"] .nav__menu a:hover,
body[data-nav-theme="light"] .nav__menu a.is-current { background: rgba(6,101,244,0.08); color: var(--brand-500); }
/* Hover-to-open on desktop pointers, click still works as fallback */
@media (hover: hover) and (pointer: fine) {
  .nav__group:hover .nav__menu { display: flex; }
  .nav__group:hover .chev { transform: rotate(180deg); }
}
/* The nav runs one size down from page buttons — the shared sizing mode. */
.nav__cta { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
/* Never let nav items wrap to a second line. */
.nav__cta .btn-link-light, .nav__cta .btn-light,
.nav__links > a, .nav__links > .nav__group > .nav__top { white-space: nowrap; }
/* Phones: the pill is just the logo + burger. The text CTAs don't fit beside
   the burger at phone widths, so they move into the open menu sheet (see
   .nav__sheet-cta in Nav.astro). */
@media (max-width: 600px) {
  .nav { gap: 12px; padding-left: 16px; }
  .nav__cta .btn-link-light, .nav__cta .btn-light { display: none; }
}
/* "Sign in" uses the same treatment as the nav option links: transparent pill,
 * subtle hover fill, same colour as the links (no blue hover). */
.nav__cta .btn-link-light {
  opacity: 0.9;
  padding: 8px 14px;
  border-radius: 99px;
}
.nav__cta .btn-link-light:hover {
  opacity: 1;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
.nav-wrap[data-nav-theme="light"] .nav__cta .btn-link-light:hover {
  background: rgba(21, 31, 46, 0.06);
}

/* ----------------------------------------------------------
 * Hero (default — applies on most pages)
 * ---------------------------------------------------------- */
.hero {
  position: relative;
  margin-top: 0;
  padding: 160px 0 96px;
  overflow: hidden;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/* Colour themes */
.hero--dark { background: var(--dark-ground-2); }
/* Soft brand-gradient tint over the dark ground. */
.hero--dark.hero--softgrad { background: var(--gradient-brand-soft), var(--dark-ground-2); }
.hero--light.hero--softgrad { background: var(--gradient-brand-soft), var(--background-up1); }
/* Soft-grad hero figure fades into the ground at the bottom — the same mask the
   Raise hero uses on its stage panel, so the cut-out blends rather than hard-cuts. */
.hero--softgrad .hero__aside img {
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
}
.hero--light { background: linear-gradient(135deg, #DAE5F7 0%, #EBEAF7 100%); }
.hero--light .hero__veil { display: none; }
.hero__veil {
  position: absolute; inset: 0;
  /* Single centred glow, expanded ~200%, sitting behind the UI video (z-index 1
     vs the shot's z-index 3). */
  background: radial-gradient(ellipse 120% 100% at 50% calc(60% + 300px), rgba(120,173,252,0.22), transparent 70%);
  pointer-events: none;
  z-index: 1;
}
.hero .container { position: relative; z-index: 3; width: 100%; }
/* Content column caps at 1168px. Copy sits bottom-left; the CTA sits to its
   right, bottom-aligned. */
.hero__inner { position: relative; max-width: 1168px; margin-inline: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.hero__copy { max-width: 960px; }

/* Background-video hero (<Hero video="…" />). The video fills the band; a
   left-weighted vignette scrim keeps the copy legible. The radial veil is
   dropped so the two treatments don't fight. */
.hero__video, .hero__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
}
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11,17,25,0.92) 0%, rgba(11,17,25,0.80) 45%, rgba(11,17,25,0.48) 100%),
    radial-gradient(130% 130% at 66% 32%, transparent 42%, rgba(11,17,25,0.60) 100%);
}
.hero--video .hero__veil { display: none; }
/* Right-side portrait cutout (<Hero aside="…" />) — pinned bottom-right, behind the copy. */
.hero__aside {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: flex-end; justify-content: flex-end;
  pointer-events: none; overflow: hidden;
}
.hero__aside img { height: 100%; width: auto; max-width: 62%; object-fit: contain; object-position: bottom right; display: block; }
@media (max-width: 980px) { .hero__aside { display: none; } }
/* Hero eyebrow — plain brand-blue text (no chip). --floww-blue-hi resolves to
 * the on-dark blue (#78ADFC) inside .hero so it reads on the navy ground. */
.hero__eyebrow {
  display: flex; align-items: center; width: max-content;
  margin: 0 0 20px;
  padding: 0;
  background: none;
  border: 0;
  font: var(--t-caption);
  color: var(--fill-base);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
/* Eyebrow matches the title colour: white on a dark hero. */
.hero--dark .hero__eyebrow { color: #fff; }
.hero--center .hero__eyebrow { margin-inline: auto; }
.hero__eyebrow .dot { display: none; }

.hero h1 {
  font: var(--t-h1);
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--fill-base);
  text-wrap: balance;
  max-width: none;
}
.hero--dark h1 { color: #fff; }
/* DS rule: emphasis inside any display heading is rendered as a Medium
   weight (500) accent of the same color — no italic, no gradient, no
   blue-tint. This matches the .display-highlight pattern in 01-colors-type.html. */
:where(h1, h2, h3, h4, .display, .display-medium) em,
:where(h1, h2, h3, h4, .display, .display-medium) i {
  font-style: normal;
  font-weight: 400;
  color: inherit;
  background: none;
  -webkit-text-fill-color: currentColor;
}
.hero h1 em {
  font-style: normal;
  font-weight: 400;
  color: inherit;
}
/* Highlighted <em> in headings: a 1px underline at 50% of the text colour,
   drawn left → right on load. Uses a per-line background gradient (with
   box-decoration-break) so the underline follows an <em> that wraps across
   lines, rather than an absolutely-positioned bar that only tracks one line. */
:is(h1, h2, h3, h4, h5, h6) em,
.display em {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: calc(0.16em - 2px);
  text-decoration-color: transparent;
  animation: em-underline 0.6s ease 0.35s forwards;
}
@keyframes em-underline { to { text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); } }
@media (prefers-reduced-motion: reduce) {
  :is(h1, h2, h3, h4, h5, h6) em, .display em { animation: none; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); }
}
.hero__sub {
  margin-top: 28px;
  font: 400 18px/28px var(--font-sans);
  color: var(--fill-subtle);
  max-width: 620px;
}
.hero--dark .hero__sub { color: rgba(255,255,255,0.72); }
.hero__cta { flex: 0 0 auto; padding-bottom: 6px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero__proof {
  position: relative;
  margin-top: 56px;
  /* Four equal columns spread across the full content column (matches .container);
     the divider above is a full-bleed pseudo. */
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
  padding-top: 24px;
  width: min(1168px, 100vw - 48px);
  max-width: none;
}
@media (max-width: 760px) {
  .hero__proof { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
}
/* Top divider runs the full viewport width, edge to edge. */
.hero__proof::before {
  content: "";
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 100vw; height: 0.5px;
  background: var(--border-subtle-invert);
}
.hero--dark .hero__proof::before { background: rgba(255,255,255,0.10); }
.hero__proof > div {
  display: flex; flex-direction: column; gap: 4px;
}
.hero__proof .v {
  font: 400 28px/1 var(--font-display);
  color: var(--fill-base);
  letter-spacing: -0.02em;
}
.hero--dark .hero__proof .v { color: #fff; }
.hero__proof .l {
  font: 400 13px/18px var(--font-sans);
  color: var(--fill-subtle);
}
.hero--dark .hero__proof .l { color: rgba(255,255,255,0.55); }

/* Centred hero variant — <Hero align="center" />. Copy sits in a narrower
   centred column; the proof strip stays full content-width but centres itself
   and its stat text. */
.hero--center .hero__inner { flex-direction: column; align-items: center; text-align: center; max-width: 720px; margin-inline: auto; }
.hero--center .hero__copy { max-width: 720px; }
.hero--center .hero__eyebrow { justify-content: center; }
.hero--center .hero__inner h1,
.hero--center .hero__sub { margin-inline: auto; }
.hero--center .hero__cta { justify-content: center; margin-top: 32px; padding-bottom: 0; }

/* Showcase layout — wide copy (~70%) with a full-width UI image below.
   The band grows to hold the image; no proof strip in this layout. */
/* Stacked (showcase) hero: centred copy and CTAs above the full-width media. */
.hero--showcase .hero__inner { flex-direction: column; align-items: center; text-align: center; max-width: 70%; margin-inline: auto; }
.hero--showcase .hero__copy { max-width: none; }
.hero--showcase .hero__cta { margin-top: 32px; padding-bottom: 0; }
.hero--showcase .hero__inner h1 { max-width: none; }
.hero--showcase .hero__eyebrow { margin-inline: auto; }
.hero--showcase .hero__sub { max-width: 720px; margin-inline: auto; }
.hero--showcase .hero__cta { justify-content: center; }
/* No bottom padding so the framed screen runs off the bottom edge (cropped). */
.hero--showcase { padding-bottom: 0; }
/* Device-style frame: dark #282828 bezel with a 1px metallic shimmer edge
   (gradient border via padding-box/border-box). Top corners rounded; the
   bottom is squared off and flush with the band so the screen looks cropped. */
.hero__shot {
  position: relative; z-index: 3;
  width: 90%; margin: 64px auto 0;
  padding: 16px 16px 0;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 36px 36px 0 0;
  background:
    linear-gradient(#282828, #282828) padding-box,
    linear-gradient(225deg, #000 0%, #585858 31%, #000 42%, #929292 53%, #000 100%) border-box;
  /* Broad, soft drop-shadow lifting the frame off the band. */
  box-shadow: 0 40px 90px -24px rgba(11,17,25,0.35);
}
.hero--dark .hero__shot { box-shadow: 0 50px 120px -30px rgba(0,0,0,0.65); }
.hero__shot img, .hero__shot video { display: block; width: 100%; height: auto; border-radius: 20px 20px 0 0; }
@media (max-width: 980px) {
  .hero { min-height: 960px; padding-top: 140px; }
  .hero__inner { flex-direction: column; align-items: flex-start; gap: 28px; }
  .hero__copy { max-width: 100%; }
  .hero--center .hero__inner { align-items: center; }
}
/* Tablet only: the ≤980 mobile type scale bakes --t-h1 to 40px on :root, so
   overriding --fs-h1 won't re-resolve it — re-declare the recipe on the hero
   title to restore the desktop size (72/64, the desktop --fs-h1/--lh-h1). */
@media (min-width: 761px) and (max-width: 980px) {
  .hero h1 { font: 400 72px/64px var(--font-display); }
}
@media (max-width: 760px) {
  .hero--showcase .hero__inner { max-width: none; }
  .hero__shot { width: 100%; margin-top: 40px; padding: 10px 10px 0; border-radius: 24px 24px 0 0; }
  .hero__shot img, .hero__shot video { border-radius: 14px 14px 0 0; }
}

/* Photo hero variant (homepage) — needs hero-2026.png */
.hero--photo .hero__photo {
  position: absolute; inset: 0;
  background-image: url("hero-2026.png");
  background-size: cover;
  background-position: center right;
  z-index: 0;
}
.hero--photo .hero__veil {
  background:
    /* left-to-right copy legibility */
    linear-gradient(90deg, rgba(8,9,20,0.94) 0%, rgba(8,9,20,0.82) 30%, rgba(8,9,20,0.55) 55%, rgba(8,9,20,0.28) 80%, rgba(8,9,20,0.18) 100%),
    /* top vignette + bottom fade to page bg */
    linear-gradient(180deg, rgba(8,9,20,0.55) 0%, rgba(8,9,20,0.18) 28%, rgba(8,9,20,0.55) 78%, var(--dark-ground) 100%),
    /* radial vignette for global darken */
    radial-gradient(ellipse 110% 80% at 50% 50%, transparent 35%, rgba(0,0,0,0.45) 100%);
}
@media (min-width: 981px) {
  .hero--photo .hero__veil {
    background:
      linear-gradient(90deg, rgba(8,9,20,0.78) 0%, rgba(8,9,20,0.62) 30%, rgba(8,9,20,0.38) 55%, rgba(8,9,20,0.18) 80%, rgba(8,9,20,0.10) 100%),
      linear-gradient(180deg, rgba(8,9,20,0.40) 0%, rgba(8,9,20,0.10) 28%, rgba(8,9,20,0.45) 80%, var(--dark-ground) 100%),
      radial-gradient(ellipse 110% 80% at 50% 50%, transparent 35%, rgba(0,0,0,0.35) 100%);
  }
}

/* ----------------------------------------------------------
 * Section frame
 * ---------------------------------------------------------- */
.sect {
  padding: 96px 0;
  position: relative;
}
/* Alternating section — a soft blue/purple wash over near-white, replacing the
 * old mid-grey. Stays a light ground (nav flips to its light treatment over it). */
/* Single light page background: content sections stay transparent and inherit
 * the body's one light ground. Only sections with a defined colour (dark bands,
 * gradient panels) paint on top. */
.sect--alt { background: transparent; }
/* Dark-ground section: data-ground="dark" flips the tokens; paint the ground. */
.sect--dark { background: var(--background-base); }
.sect--tight  { padding: 64px 0; }
.sect--xl     { padding: 128px 0; }
/* Half the top padding — e.g. a card grid with no section heading above it. */
.sect--flush-top { padding-top: 48px; }

.sect--flush { padding-top: 0; }
.sect__head { max-width: 760px; margin-bottom: 56px; }
/* Small-print footnote under a section's content. */
.sect__note { margin: 32px 0 0; font: var(--t-caption); color: var(--fill-subtle); max-width: 70ch; text-wrap: pretty; }
.sect__head--center { margin-inline: auto; text-align: center; }
.sect__head .eyebrow-on-dark { display: block; margin-bottom: 16px; }
.sect__head h2 {
  font: var(--t-h3);
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--fill-base);
  text-wrap: balance;
}
.sect__head h2 em {
  font-style: normal; color: var(--floww-blue-hi);
}
.sect__head .lede {
  margin-top: 20px;
  font: 400 16px/24px var(--font-sans);
  color: var(--fill-subtle);
  max-width: 620px;
}
.sect__head--center .lede { margin-inline: auto; }
/* Split variant — eyebrow + title on the left, lede on the right (50/50). The
   lede shares the title's grid row, so its top aligns with the title's first
   line (below the eyebrow) rather than the eyebrow. */
.sect__head--split {
  max-width: none;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px;
  grid-template-areas: "eyebrow ." "title body";
  align-items: start;
}
.sect__head--split .eyebrow-on-dark { grid-area: eyebrow; }
.sect__head--split h2 { grid-area: title; }
.sect__head--split .lede { grid-area: body; margin-top: 0; max-width: none; }
/* An intro opens a run of sections, so it drops its bottom padding to sit
   closer to the content that follows. */
.intro-sec { padding-bottom: 0; }
@media (max-width: 760px) {
  .sect__head--split { grid-template-columns: 1fr; grid-template-areas: "eyebrow" "title" "body"; column-gap: 0; }
  .sect__head--split .lede { margin-top: 20px; }
}

/* Highlight block — full-width navy callout */
.callout {
  background: linear-gradient(135deg, rgba(6,101,244,0.16) 0%, rgba(130,65,255,0.10) 100%);
  border: 0.5px solid rgba(120,173,252,0.30);
  border-radius: 20px;
  padding: 56px 48px;
}
.callout h3 {
  font: var(--t-h3);
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  color: #fff;
  text-wrap: balance;
}
.callout p {
  font: 400 16px/26px var(--font-sans);
  color: rgba(255,255,255,0.75);
  margin: 0 0 24px;
  max-width: 720px;
}
.callout__stats { display: flex; gap: 56px; flex-wrap: wrap; padding-top: 16px; }
.callout__stats > div { display: flex; flex-direction: column; gap: 4px; }
.callout__stats .v {
  font: 400 32px/1 var(--font-display);
  color: var(--fill-base);
  letter-spacing: -0.02em;
}
.callout__stats .l {
  font: 400 13px/18px var(--font-sans);
  color: var(--fill-subtle);
  max-width: 220px;
}

/* ----------------------------------------------------------
 * Card primitives
 * ---------------------------------------------------------- */
.fcard {
  padding: 28px;
  background: var(--surface-base);
  border: 0.5px solid var(--border-base);
  border-radius: 12px;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
  display: flex; flex-direction: column; gap: 16px;
  min-height: 220px;
}
.fcard:hover { background: var(--card-hover-fill); border-color: var(--border-base); transform: translateY(-2px); }
/* Same lift/surface hover across the other card primitives, for a consistent feel. */
.icard, .mcard, .pcard { transition: background 200ms ease, border-color 200ms ease, transform 200ms ease; }
.icard:hover, .mcard:hover, .pcard:hover { background: var(--card-hover-fill); border-color: var(--border-base); transform: translateY(-2px); }
/* Card icon/number slot — always 32px, top-left. */
.fcard__num {
  height: 32px;
  font: 400 32px/1 var(--font-display);
  color: var(--fill-highlight);
  letter-spacing: -0.02em;
}
/* Card title — H5 style. Number sits tight against the title (no gap). */
.fcard__title {
  font: var(--t-h5);
  color: var(--fill-base);
  letter-spacing: -0.01em;
}
.fcard__num + .fcard__title { margin-top: -16px; }
.fcard__body {
  font: var(--t-body-md);
  color: var(--fill-subtle);
  margin: 0;
}
.fcard__link {
  margin-top: auto;
  font: 500 13px/16px var(--font-sans);
  color: var(--floww-blue-hi);
  display: inline-flex; align-items: center; gap: 4px;
}

/* Pillar grid — 3up rich card */
.pcard {
  padding: 28px;
  background: var(--surface-base);
  border: 0.5px solid var(--border-base);
  border-radius: 16px;
  display: flex; flex-direction: column; gap: 16px;
  min-height: 280px;
}
.pcard__num {
  font: var(--t-body-sm);
  font-weight: 600;
  color: var(--fill-brand);
  letter-spacing: 0.02em;
}
.pcard__title {
  margin: 0;
  font: var(--t-h5);
  letter-spacing: -0.01em;
  color: var(--fill-base);
  text-wrap: balance;
}
.pcard__body {
  font: var(--t-body-md);
  color: var(--fill-subtle);
  margin: 0;
}
/* Optional bulleted list — hairline-divided rows with brand-blue dots.
   Ported from the deprecated .split card. */
.pcard__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
/* Extra breathing room between the subtitle and the list (32px + 16px flex gap = 48px). */
.pcard__body + .pcard__list { margin-top: 32px; }
.pcard__list li { font: var(--t-body-md); color: var(--fill-base); display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--border-subtle-invert); }
.pcard__list li:first-child { border-top: 0; padding-top: 0; }
.pcard__list li:last-child { padding-bottom: 0; }
.pcard__list li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--fill-highlight); margin-top: 9px; }
/* Accent variant — a soft brand wash over the surface. */
.pcard--accent { background: var(--gradient-brand-soft), var(--surface-base); }

/* ----------------------------------------------------------
 * Stats band
 * ---------------------------------------------------------- */
/* Stats — a soft brand-gradient container (not a full-bleed band). The section
 * sits on the page ground; the .container becomes a rounded gradient panel. */
.statband {
  padding: 24px 0;
  background: transparent;
}
.statband > .container {
  background: var(--gradient-brand-soft), var(--background-up1);
  /* 1px inside border, white at 20% (box-sizing:border-box keeps it inset). */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-2xl);
  padding: 56px 48px;
}
.statband--dark > .container { background: var(--gradient-brand-soft), var(--background-base); border-color: rgba(255, 255, 255, 0.14); }
/* Flat, lighter surface option. */
.statband--up2 > .container { background: var(--background-up2); border-color: var(--border-subtle); }
.statband__head { max-width: 720px; margin-bottom: 40px; }
.statband__head .eyebrow-on-dark { display: block; margin-bottom: 14px; color: var(--floww-blue-hi); }
.statband__head :is(h2, h3, h4) {
  font: var(--t-h4);
  letter-spacing: var(--tracking-display); margin: 0; color: var(--fill-base); text-wrap: balance;
}
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.stats--3 { grid-template-columns: repeat(3, 1fr); }
.stats--4 { grid-template-columns: repeat(4, 1fr); }
.stats--5 { grid-template-columns: repeat(5, 1fr); }
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat__n {
  font: var(--t-h4);
  letter-spacing: -0.03em;
  color: var(--fill-base);
}
.stat__l {
  font: 400 14px/20px var(--font-sans);
  color: var(--fill-subtle);
}
@media (max-width: 760px) {
  .statband > .container { padding: 36px 24px; }
}

/* ----------------------------------------------------------
 * Comparison table (Floww vs others)
 * ---------------------------------------------------------- */
.cmp {
  width: 100%;
  border-collapse: collapse;
  font: 400 14px/20px var(--font-sans);
  color: var(--fill-base);
}
.cmp th, .cmp td {
  padding: 18px 20px;
  text-align: left;
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
  vertical-align: middle;
}
.cmp thead th {
  font: 500 13px/18px var(--font-sans);
  color: var(--fill-subtle);
  text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 0.5px solid rgba(255,255,255,0.18);
}
.cmp .cmp__row-h {
  font: 500 14px/20px var(--font-sans);
  color: var(--fill-base);
}
.cmp .floww-col { background: rgba(6,101,244,0.06); }
.cmp thead th.floww-col {
  color: var(--floww-blue-hi);
  background: rgba(6,101,244,0.10);
  border-bottom-color: var(--floww-blue-hi);
}
.cmp__y, .cmp__n, .cmp__p {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font: 600 11px/1 var(--font-sans);
}
.cmp__y { background: rgba(6,101,244,0.18); color: var(--floww-blue-hi); }
.cmp__n { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.30); }
.cmp__p { background: rgba(250,190,40,0.18); color: var(--floww-amber); }
.cmp .ill {
  font: 400 11px/14px var(--font-sans);
  color: var(--fill-subtle);
  margin-top: 2px;
}

/* ----------------------------------------------------------
 * CTA footer block — light blue/purple gradient, full-width.
 * A light ground with ink copy; the primary action is the brand-blue button.
 * ---------------------------------------------------------- */
.ctablock {
  padding: 120px 0;
  background: var(--gradient-brand-soft), var(--background-up1);
}
.ctablock__inner {
  max-width: 880px;
}
.ctablock h2 {
  font: var(--t-h3);
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--fill-base);
  text-wrap: balance;
}
.ctablock p {
  margin-top: 24px;
  font: 400 17px/26px var(--font-sans);
  color: var(--fill-subtle);
  max-width: 600px;
}
.ctablock__cta { margin-top: 40px; display: flex; gap: 12px; flex-wrap: wrap; }
/* Recolour the on-dark buttons for the now-light ground. */
.ctablock .btn-light { background: var(--fill-base); color: var(--fill-invert); border-color: transparent; }
.ctablock .btn-light:hover { background: var(--fill-default-subtle); }
/* The ctablock is a light gradient band: --border-base is WHITE (glass) and
 * vanishes on it. The visible "base border" for a light ground is the ink
 * Border.Base Invert (Slate 20). */
.ctablock .btn-outline-light { color: var(--fill-base); border-color: var(--border-base-invert); }
.ctablock .btn-outline-light:hover { background: var(--surface-subtle); border-color: var(--border-strong); }

/* Dark variant, with an optional UI image on the right. data-ground="dark"
   flips the text/eyebrow tokens; restore on-dark button colours here. */
.ctablock--dark { background: var(--background-base); }
.ctablock--split { padding-top: 96px; padding-bottom: 0; overflow: hidden; }
.ctablock--split .container { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; max-width: none; width: auto; margin: 0; padding-left: max(24px, calc((100vw - 1168px) / 2)); padding-right: 0; }
.ctablock--split .ctablock__inner { max-width: none; align-self: center; padding: 24px 0 96px; }
/* No frame: the screenshot sits directly on the dark ground, anchored to the
   bottom-right of its cell so it rises from the section's bottom edge. */
.ctablock__media { align-self: end; justify-self: end; }
.ctablock__media img { display: block; width: 100%; height: auto; }
.ctablock--dark .btn-light { background: #fff; color: #0b1119; border-color: transparent; }
.ctablock--dark .btn-light:hover { background: rgba(255, 255, 255, 0.88); }
.ctablock--dark .btn-outline-light { color: #fff; border-color: rgba(255, 255, 255, 0.30); }
.ctablock--dark .btn-outline-light:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.55); }
@media (max-width: 980px) { .ctablock--split .container { grid-template-columns: 1fr; gap: 0; padding-left: 24px; padding-right: 24px; } .ctablock--split .ctablock__inner { padding-bottom: 40px; } }

/* ----------------------------------------------------------
 * Footer
 * ---------------------------------------------------------- */
.footer {
  background: var(--navy-950);
  padding: 80px 0 40px;
  color: rgba(255,255,255,0.7);
}
.footer__grid {
  display: grid; grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 32px;
  padding-bottom: 56px;
  border-bottom: 0.5px solid rgba(255,255,255,0.10);
}
.footer__brand { grid-column: span 2; }
.footer__brand img { height: 24px; }
.footer__brand p {
  margin-top: 24px; max-width: 280px;
  font: 400 13px/20px var(--font-sans);
  color: rgba(255,255,255,0.5);
}
.footer__col h4 {
  font: 500 12px/16px var(--font-sans);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
  margin: 0 0 16px;
}
.footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer__col a { color: #fff; font: 400 13px/18px var(--font-sans); }
.footer__col a:hover { color: var(--floww-blue-hi); }

.footer__bot {
  padding-top: 32px;
  display: flex; justify-content: space-between; align-items: center;
  font: 400 12px/18px var(--font-sans);
  color: rgba(255,255,255,0.4);
  flex-wrap: wrap; gap: 16px;
}
.footer__badges { display: flex; gap: 16px; align-items: center; opacity: 0.7; }
.footer__badge {
  padding: 6px 10px;
  border: 0.5px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  font: 500 11px/14px var(--font-sans); color: #fff;
  letter-spacing: 0.02em;
}

/* ----------------------------------------------------------
 * Licensing strip — auto-scrolling band of credentials
 * ---------------------------------------------------------- */
.licensing {
  background: transparent;
  padding: 56px 0 64px;
  border-bottom: 0.5px solid var(--border-subtle);
  overflow: hidden;
}
.licensing__intro {
  font: 500 12px/16px var(--font-sans);
  color: var(--fill-subtle);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 32px;
  width: min(1168px, 100% - 48px);
  margin-inline: auto;
  display: flex; align-items: center; gap: 12px;
}
.licensing__intro::after {
  content: ""; flex: 1; height: 0.5px; background: var(--border-base);
}
.licensing__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.licensing__track {
  display: flex; gap: 0;
  width: max-content;
  animation: lic-scroll 50s linear infinite;
}
.licensing__viewport:hover .licensing__track { animation-play-state: paused; }
@keyframes lic-scroll {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}
.lic-item {
  flex: 0 0 240px;
  width: 240px;
  padding-right: 24px;
  display: flex; flex-direction: column; gap: 8px;
  box-sizing: border-box;
}
.lic-item__tag {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--surface-base);
  border: 0.5px solid var(--border-base);
  font: 500 11px/16px var(--font-sans);
  color: var(--fill-base);
  letter-spacing: 0.04em;
}
.lic-item__title {
  font: 400 22px/1 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--fill-base);
}
.lic-item__sub {
  font: 500 13px/18px var(--font-sans);
  color: var(--fill-subtle);
}
@media (prefers-reduced-motion: reduce) {
  .licensing__track { animation: none; }
}

/* ----------------------------------------------------------
 * Mini "deal-page" placeholder (used a lot)
 * ---------------------------------------------------------- */
.placeholder-card {
  background: linear-gradient(135deg, var(--navy-700), var(--navy-850));
  border: 0.5px solid var(--border-base);
  border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.40);
  font: 500 12px/16px var(--font-sans);
  text-transform: uppercase; letter-spacing: 0.08em;
  position: relative; overflow: hidden;
}
.placeholder-card::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(255,255,255,0.02) 8px 16px);
  pointer-events: none;
}

/* ----------------------------------------------------------
 * Inline icon flag (for jurisdictional list items)
 * ---------------------------------------------------------- */
.flag-emoji { font-size: 18px; line-height: 1; vertical-align: -2px; }

/* ----------------------------------------------------------
 * Responsive
 *
 * Breakpoint scale (max-width) — use only these values, here and in
 * component <style> blocks and any JS matchMedia:
 *   1080  xl  large-tablet / small-desktop nudges
 *    980  lg  TABLET — nav collapses to burger, brand → F symbol, big layout shifts
 *    760  md  large phone — component/grid stacks (also UiShot mobile picker)
 *    600  sm  phone
 *    374  xs  small phone — nav drops one CTA
 * (min-width: 981 pairs with lg for desktop-only rules.)
 * ---------------------------------------------------------- */
@media (max-width: 980px) {
  .nav__links { display: none; }
  .hero { padding: 120px 0 80px; }
  /* nav collapses to CTAs + burger below here (handled above/in Nav) */
  .hero--showcase { padding-bottom: 0; }
  .sect { padding: 72px 0; }
  .sect--flush-top { padding-top: 36px; }
  /* Tighter vertical rhythm around title-only (intro) sections on mobile. */
  .intro-sec { padding-top: 48px; }
  .stats, .stats--3, .stats--4, .stats--5 { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer__brand { grid-column: span 2; }
  .callout { padding: 32px 24px; }
}
@media (max-width: 600px) {
  .stats, .stats--3, .stats--5 { grid-template-columns: 1fr; }
  /* Four stats stay 2×2 on phones rather than one tall column. */
  .stats--4 { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__brand { grid-column: span 1; }
  .callout__stats { gap: 24px; }
  /* Tighten the gap under section titles by ~50% on phones. */
  .sect__head { margin-bottom: 28px; }
  .caphead { margin-bottom: 42px; }
  .statband__head { margin-bottom: 20px; }
  .band__head { margin-bottom: 28px; }
  /* Halve the internal padding of icon cards on phones so the 2-up grids
     (e.g. "Who are you?") aren't cramped. The wrapper selector keeps this above
     the base `.icard` padding, which is defined later in the file. */
  .cap-grid .icard { padding: 14px; }
  /* Smaller icon on phones to match the tighter cards. */
  .cap-grid .icard__icon { width: 24px; height: 24px; margin-bottom: 16px; }
}


/* ===========================================================
 * 2026 LAYER — light-first bands and page components.
 * Everything below is token-driven: a band sets the ground,
 * the tokens flip, and the components inside follow.
 * =========================================================== */

/* --- Band: the unit of page rhythm -------------------------
 * <section class="band" data-ground="page|white|navy">
 * data-ground also switches the token theme (see tokens.css),
 * so cards, text and borders resolve for that ground. */
.band { position: relative; padding: var(--band-pad) 0; background: var(--background-base); color: var(--fill-base); }
.band[data-ground="white"] { background: var(--background-up2); }
.band[data-ground="navy"]  { background: var(--ocean-900); }
.band--tight { padding-block: var(--band-pad-tight); }
.band--xl    { padding-block: var(--band-pad-xl); }
.band--flush-top    { padding-top: 0; }
.band--flush-bottom { padding-bottom: 0; }

.band__head { max-width: 720px; margin-bottom: 56px; }
.band__head .eyebrow { display: block; margin-bottom: 20px; color: var(--fill-brand); font: 500 12px/16px var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; }
.band__head h2 { font: var(--t-h3); letter-spacing: -0.02em; color: var(--fill-base); margin: 0; text-wrap: pretty; }
.band__head .lede { margin: 20px 0 0; font: 400 16px/26px var(--font-sans); color: var(--fill-subtle); max-width: 620px; text-wrap: pretty; }

/* --- Hero, photographic ------------------------------------
 * <section class="phero"> media + scrim + copy. */
.phero { position: relative; min-height: 90vh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; color: #fff; padding: 160px 0 0; }
.phero__media { position: absolute; inset: 0; z-index: 0; }
.phero__media img, .phero__media image-slot { width: 100%; height: 100%; object-fit: cover; display: block; }
.phero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11,17,25,0.92) 0%, rgba(11,17,25,0.72) 38%, rgba(11,17,25,0.28) 68%, rgba(11,17,25,0.10) 100%),
    linear-gradient(180deg, rgba(11,17,25,0.72) 0%, rgba(11,17,25,0.20) 32%, rgba(11,17,25,0.55) 82%, rgba(11,17,25,0.92) 100%); }
.phero__inner { position: relative; z-index: 2; max-width: 1168px; padding-bottom: 88px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
/* Hero text block is capped at 960px; the heading fills it. */
.phero__copy { max-width: 960px; }
.phero h1 { font: var(--t-h1); letter-spacing: -0.03em; color: #fff; margin: 24px 0 0; text-wrap: pretty; max-width: none; }
.phero p { margin: 28px 0 0; font: 400 16px/26px var(--font-sans); color: rgba(255,255,255,0.76); max-width: 52ch; text-wrap: pretty; }
.phero__cta { flex: 0 0 auto; padding-bottom: 6px; display: flex; gap: 12px; flex-wrap: wrap; }
.tag-chip { display: inline-flex; align-items: center; gap: 8px; padding: 0; background: none; border: 0; color: var(--floww-blue-hi); font: 500 12px/16px var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; }

/* Credential ticker sitting on the hero's lower edge */
.phero .licensing { position: relative; z-index: 2; border-bottom: 0; padding: 0 0 40px; color: #fff; }
.phero .lic-item__title { color: #fff; }
.phero .lic-item__sub { color: rgba(255,255,255,0.6); }
.phero .lic-item__tag { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.24); color: #fff; }

/* --- Media card (image top, eyebrow, title, body, CTA) ------ */
.mcard { position: relative; display: flex; flex-direction: column; border-radius: 20px; background: var(--surface-base); border: 1px solid color-mix(in srgb, var(--border-base) 50%, transparent); overflow: hidden; }
/* Arrow-less linked card: the whole face is the click target. */
.mcard__link { position: absolute; inset: 0; z-index: 1; }
.mcard__media { position: relative; aspect-ratio: 16 / 10; background: var(--background-down1); }
.mcard__media img, .mcard__media image-slot { width: 100%; height: 100%; object-fit: cover; display: block; }
.mcard__media .appmock, .mcard__media .appmock svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Screen fill — a UI screenshot filling the media box, anchored top-left, on a
   soft brand gradient. object-fit: cover keeps its ratio and crops to fill. */
.mcard__media--screen { background: var(--gradient-brand-soft), var(--background-up1); overflow: hidden; }
.mcard__media--screen img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: top left;
  border-radius: 0;
}
/* Brand logos are centered artwork, not UI screens — center them in the card. */
.mcard__media--screen img[src*="/assets/brands/"] { object-position: center; }
/* Full-width artwork (e.g. the US/UK flags, SPV→fund diagram): show the whole width, centered. */
.mcard__media--screen img[src*="/spv-us-uk"],
.mcard__media--screen img[src*="/spv-progression"] { object-fit: contain; object-position: center; }
.mcard__body { padding: 28px; display: flex; flex-direction: column; align-items: stretch; }
.mcard__body .eyebrow { color: var(--fill-brand); font: 500 11px/16px var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px; }
/* Footer: text block on the left, circular chevron button on the right (stacks below on narrow cards). */
.mcard__foot { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
.mcard__text { min-width: 0; }
.mcard__body :is(h2, h3, h4) { margin: 0; font: var(--t-body-md); font-weight: 600; letter-spacing: 0; color: var(--fill-base); }
.mcard__body :is(h2, h3, h4) .sub { display: block; font-weight: 400; color: var(--fill-subtle); }
.mcard__body p { margin: 0; font: var(--t-body-md); color: var(--fill-subtle); text-wrap: pretty; }
.mcard__go { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid currentColor; color: var(--fill-base); display: grid; place-items: center; transition: background 160ms ease; }
.mcard__go::before { content: ""; width: 7px; height: 13px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1 1l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1 1l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.mcard__go:hover { background: var(--fill-brand); border-color: var(--fill-brand); color: #fff; }
/* Variant: chevron sits below the text instead of beside it. */
.mcard--stacked .mcard__foot { flex-direction: column; align-items: flex-start; gap: 24px; }
@media (max-width: 600px) {
  .mcard__foot { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* --- UI screen — the hero-shot device frame reused inside a section
   (dark #282828 bezel, 1px shimmer edge, top corners rounded, bottom cropped). */
.uiscreen {
  position: relative; width: 90%; margin: 0 auto 28px;
  padding: 16px 16px 0;
  border: 1px solid transparent; border-bottom: 0;
  border-radius: 36px 36px 0 0;
  background:
    linear-gradient(#282828, #282828) padding-box,
    linear-gradient(225deg, #000 0%, #585858 31%, #000 42%, #929292 53%, #000 100%) border-box;
  box-shadow: 0 40px 90px -24px rgba(11,17,25,0.35);
  overflow: hidden;
  /* Crop the drop-shadow at the bottom edge so it matches the cropped frame
     (shadow shows on the top and sides only). */
  clip-path: inset(-120px -120px 0 -120px);
}
.uiscreen img { display: block; width: 100%; height: auto; border-radius: 20px 20px 0 0; }
.uiscreen .appmock { position: static !important; inset: auto; display: block; padding: 0 !important; background: #fff !important; aspect-ratio: 16 / 10; border-radius: 20px 20px 0 0; overflow: hidden; }
.uiscreen .appmock svg { position: static; width: 100%; height: 100%; display: block; filter: none; }
@media (max-width: 760px) {
  .uiscreen { width: 100%; padding: 10px 10px 0; border-radius: 24px 24px 0 0; }
  .uiscreen img, .uiscreen .appmock { border-radius: 14px 14px 0 0; }
}

/* --- Full-width split card (content panel + full-bleed image) ---
   Default: content left, media right. Add .fwcard--media-left to flip. */
.fwcard { display: grid; grid-template-columns: 1fr 1fr; border-radius: 20px; background: var(--surface-subtle); border: 1px solid var(--border-base); overflow: hidden; }
.fwcard__body { grid-column: 1; grid-row: 1; padding: 32px; display: flex; flex-direction: column; align-items: flex-start; min-height: 480px; }
.fwcard__media { grid-column: 2; grid-row: 1; position: relative; background: var(--background-down1); }
.fwcard--media-left .fwcard__body { grid-column: 2; }
.fwcard--media-left .fwcard__media { grid-column: 1; }
.fwcard__media img, .fwcard__media image-slot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
/* Product mock (SVG illustration) — centred and framed rather than full-bleed. */
.fwcard__media:has(.appmock) { background: var(--gradient-brand-soft), var(--background-up1); }
.fwcard__media .appmock { position: absolute; inset: 0; display: grid; place-items: center; padding: 40px; }
.fwcard__media .appmock svg { width: 100%; height: auto; max-height: 100%; }
/* Bullet lists render as a hairline-divided list, no bullet markers. */
.fwcard__list { list-style: none; padding: 0; margin: 24px 0 0; width: 100%; align-self: stretch; }
.fwcard__list li { font: var(--t-body-md); color: var(--fill-subtle); padding: 13px 0; border-top: 1px solid var(--border-subtle-invert); }
.fwcard__list li:last-child { border-bottom: 1px solid var(--border-subtle-invert); }
/* Cost table rendered in the media panel: label left, figure right, hairline rows,
   with a stronger total and a brand-weighted headline (package) row. */
.fwcard__media--costs { background: var(--surface-subtle); display: flex; align-items: center; padding: 40px; position: static; }
.fwcard__costs { width: 100%; }
.fwcard__costslabel { display: block; font: var(--t-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fill-subtle); margin-bottom: 18px; }
.fwcard__costs ul { list-style: none; margin: 0; padding: 0; }
.fwcard__costs li { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--border-subtle-invert); }
.fwcard__costs li:first-child { border-top: 0; }
.fwcard__costk { font: var(--t-body-md); color: var(--fill-subtle); }
.fwcard__costv { font: var(--t-body-md); color: var(--fill-base); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fwcard__cost--total .fwcard__costk, .fwcard__cost--total .fwcard__costv { color: var(--fill-base); font-weight: 600; }
.fwcard__cost--package { margin-top: 6px; border-top: 1px solid var(--border-base); }
.fwcard__cost--package .fwcard__costk { color: var(--fill-base); font-weight: 600; }
.fwcard__cost--package .fwcard__costv { color: var(--fill-brand); font: var(--t-h6); letter-spacing: var(--tracking-display); }
.fwcard__costnote { display: block; margin-top: 16px; font: var(--t-caption); color: var(--fill-subtle); }
.fwcard__icon { width: 32px; height: 32px; color: var(--fill-base); margin-bottom: 32px; }
.fwcard__icon img, .fwcard__icon svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.fwcard__eyebrow { display: block; font: var(--t-caption); letter-spacing: 0.05em; text-transform: uppercase; color: var(--fill-brand); margin: 0 0 16px; }
.fwcard__title { margin: 0; font: var(--t-h5); letter-spacing: -0.01em; color: var(--fill-base); text-wrap: balance; max-width: 20ch; }
/* A card carrying the section head (eyebrow + title) gets a fuller-width title. */
.fwcard:has(.fwcard__eyebrow) .fwcard__title { max-width: none; }
.fwcard__text { margin: 12px 0 0; font: var(--t-body-md); color: var(--fill-subtle); max-width: 44ch; text-wrap: pretty; }
.fwcard__body .btn { margin-top: auto; }
/* fwsplit wrapper: full-width cards stack with a gap; vertical variant lays them
   out two-up with media stacked over copy. */
.fwsplit { display: flex; flex-direction: column; gap: 24px; }
.fwsplit--vertical { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.fwcard--vertical { grid-template-columns: 1fr; }
.fwcard--vertical .fwcard__media { grid-column: 1; grid-row: 1; aspect-ratio: 1 / 1; min-height: 0; }
.fwcard--vertical .fwcard__body { grid-column: 1; grid-row: 2; min-height: 0; }
/* A vertical card with no media: the body takes the top row. */
.fwcard--vertical:not(:has(.fwcard__media)) .fwcard__body { grid-row: 1; }
/* Vertical cards use the full card width for their text. */
.fwcard--vertical .fwcard__title, .fwcard--vertical .fwcard__text { max-width: none; }
.fwcard--vertical .fwcard__body .btn { margin-top: 24px; }
@media (max-width: 760px) { .fwsplit--vertical { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .fwcard { grid-template-columns: 1fr; }
  .fwcard__media, .fwcard--media-left .fwcard__media { grid-column: 1; grid-row: 1; min-height: 240px; }
  .fwcard__body, .fwcard--media-left .fwcard__body { grid-column: 1; grid-row: 2; min-height: 0; padding: 32px; }
  /* No tall body to push the button down, so space it explicitly; copy runs full width. */
  .fwcard__title, .fwcard__text { max-width: none; }
  .fwcard__body .btn { margin-top: 28px; }
}

/* --- Icon card (line icon, title, body, no CTA) ------------- */
.icard { display: flex; flex-direction: column; padding: 28px; min-height: 220px; border-radius: var(--r-lg); background: var(--surface-subtle); border: 1px solid var(--border-base); text-decoration: none; color: inherit; }
.icard:hover { background: var(--surface-base); }
.icard__icon { width: 40px; height: 40px; color: var(--fill-base); margin-bottom: 24px; }
.icard__icon img, .icard__icon svg { width: 100%; height: 100%; object-fit: contain; display: block; }
[data-ground="navy"] .icard__icon img, [data-ground="dark"] .icard__icon img { filter: brightness(0) invert(1); }
/* Text block anchors to the bottom of the card; title sits directly on the body (no gap), both the same size.
   The icon's margin-bottom guarantees at least a 24px gap when content fills the card; margin-top:auto opens it up further when there's room. */
.icard h3 { margin: auto 0 0; font: var(--t-body-md); font-weight: 600; letter-spacing: 0; color: var(--fill-base); text-wrap: pretty; }
.icard p { margin: 0; font: var(--t-body-md); color: var(--fill-subtle); text-wrap: pretty; }
/* Optional label above the title (comparison cards). It carries the bottom-anchor
   so label + title + body group together; a highlighted card's label reads brand. */
.icard__label { display: block; margin: auto 0 6px; font: var(--t-caption); color: var(--fill-subtle); }
.icard:has(.icard__label) h3 { margin: 0 0 8px; font: var(--t-h6); letter-spacing: var(--tracking-display); }
.icard--highlight .icard__label { color: var(--fill-brand); }
/* Optional badge above the label (comparison cards): simple caption-size type. */
.icard__badge { align-self: flex-start; margin: 0 0 12px; font: var(--t-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fill-subtle); }
.icard--highlight .icard__badge { color: var(--fill-brand); }
/* With a badge, the label + title read as a two-line H5 heading, then a gap before the body. */
.icard:has(.icard__badge) .icard__label { margin: 0; font: var(--t-h5); letter-spacing: var(--tracking-display); color: var(--fill-subtle); text-transform: none; }
.icard:has(.icard__badge) h3 { margin: 0 0 16px; font: var(--t-h5); letter-spacing: var(--tracking-display); color: var(--fill-base); }
/* Optional points under the body: a clean hairline table, top and bottom bordered, no markers. */
.icard__list { list-style: none; padding: 0; margin: 20px 0 0; border-top: 1px solid var(--border-subtle-invert); border-bottom: 1px solid var(--border-subtle-invert); }
.icard__list li { font: var(--t-body-sm); color: var(--fill-base); padding: 10px 0; border-top: 1px solid var(--border-subtle-invert); }
.icard__list li:first-child { border-top: 0; }
/* With bullets the cell is content-led, not bottom-anchored. */
.icard:has(.icard__list) .icard__label { margin-top: 0; }
.icard:has(.icard__list) h3 { margin-top: 0; }
.icard:has(.icard__badge) .icard__badge { margin-top: 0; }
/* Card variants: 'highlight' is the lifted (hover) look held on; 'reductive'
   strips the fill and border for a quiet, catch-all card. */
.icard--highlight { background: var(--surface-base); border-color: var(--border-base); }
.icard--reductive { background: transparent; border-color: var(--border-base); }

/* --- Testimonial, light, avatar overlapping the top edge ---- */
.quote { position: relative; margin-top: 40px; padding: 72px 56px 48px; border-radius: var(--r-xl); background: var(--surface-base); border: 1px solid var(--border-base); text-align: center; }
.quote__avatar { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); width: 80px; height: 80px; border-radius: 50%; overflow: hidden; border: 4px solid var(--background-base); background: var(--background-down1); }
.quote__avatar img, .quote__avatar image-slot { width: 100%; height: 100%; object-fit: cover; display: block; }
.quote blockquote { margin: 0; font: 400 clamp(22px, 2vw, 28px)/1 var(--font-display); letter-spacing: -0.015em; color: var(--fill-base); text-wrap: pretty; }
.quote__by { margin-top: 28px; font: 400 14px/22px var(--font-sans); color: var(--fill-brand); }

/* --- Form, works on any ground ------------------------------ */
.fform { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fform .full { grid-column: 1 / -1; }
/* The submit row gets a double gap so the action separates from the fields. */
.fform > :last-child { margin-top: 20px; }
.fld { display: flex; flex-direction: column; gap: 8px; }
.fld > span { font: 400 13px/18px var(--font-sans); color: var(--fill-subtle); }
.fld input, .fld select, .fld textarea {
  width: 100%; box-sizing: border-box; height: var(--input-height, 44px);
  padding: 0 14px; border-radius: var(--r-sm);
  background: var(--surface-subtle); border: 1px solid var(--border-base);
  color: var(--fill-base); font: 400 14px/20px var(--font-sans);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.fld textarea { height: auto; padding: 12px 14px; min-height: 96px; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--fill-subtle); opacity: 0.7; }
.fld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 19px) 20px, calc(100% - 14px) 20px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.fld :is(input, select, textarea):focus { outline: none; border-color: var(--fill-highlight); box-shadow: 0 0 0 3px var(--fill-blue-trans); }

/* --- Split CTA (copy left, form right) ---------------------- */
.ctasplit { display: grid; grid-template-columns: 1fr 1.05fr; gap: 80px; align-items: start; }
.ctasplit h2 { margin: 0; padding-right: 64px; font: var(--t-h3); letter-spacing: -0.02em; color: var(--fill-base); text-wrap: pretty; }
.ctasplit p { margin: 24px 0 0; font: 400 15px/25px var(--font-sans); color: var(--fill-subtle); max-width: 420px; text-wrap: pretty; }

/* --- Footer additions --------------------------------------- */
.footer { position: relative; overflow: hidden; }
.footer > .container { position: relative; z-index: 1; }
.footer__certs { display: flex; gap: 12px; align-items: center; margin-top: 32px; flex-wrap: wrap; }
.footer__cert { height: 44px; width: auto; opacity: 0.75; }
.footer__social { display: flex; gap: 16px; align-items: center; }
.footer__social a { color: rgba(255,255,255,0.7); display: flex; }
.footer__social a:hover { color: #fff; }
.footer__apps { display: flex; gap: 12px; align-items: center; }
.footer__apps img { height: 40px; width: auto; }
.footer__legal { padding-top: 28px; border-top: 0.5px solid rgba(255,255,255,0.10); margin-top: 28px; font: 400 10.5px/17px var(--font-sans); color: rgba(255,255,255,0.35); }
.footer__legal strong { color: rgba(255,255,255,0.55); font-weight: 500; }

/* --- Grids -------------------------------------------------- */
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.g4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--grid-gap); }
/* Fixed-column card rows + brand icon tile. Promoted here from per-page
   <style> blocks (were byte-identical across 11–14 pages). Pages keep their
   own responsive @media collapse rules, which override these base grids. */
.three-up { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.four-up  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.icon-tile {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(120,173,252,0.12);
  border: 0.5px solid rgba(120,173,252,0.30);
  display: grid; place-items: center;
  color: var(--floww-blue-hi);
  font: 500 14px/1 var(--font-sans);
}

@media (max-width: 1080px) {
  .ctasplit { grid-template-columns: 1fr; gap: 48px; }
  .ctasplit h2 { padding-right: 0; }
  .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .band { padding-block: var(--band-pad-tight); }
  .g2, .g3 { grid-template-columns: 1fr; }
  /* Icard (feature) grids keep two columns on phones; media/mcard grids stay 1-col. */
  .cap-grid.g2, .cap-grid.g3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .phero { min-height: 620px; padding-top: 148px; }
  .phero__inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .phero__copy { max-width: 100%; }
  .fform { grid-template-columns: 1fr; }
}


/* --- Pricing tier block ------------------------------------- */
.tiers { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; align-items: stretch; }
.tier { display: flex; flex-direction: column; padding: 28px 26px 26px; border-radius: var(--r-xl); background: var(--surface-base); border: 1px solid var(--border-base); }
/* Dark accent tier: flip the semantic tokens so all text reads on the dark ground. */
.tier--accent { background: var(--ocean-950); border-color: transparent; --fill-base: #ffffff; --fill-subtle: rgba(255,255,255,0.62); --border-subtle: rgba(255,255,255,0.12); }
.tier--accent, .tier--accent * { color-scheme: dark; }
.tier__lvl { font: 500 11px/16px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fill-subtle); }
.tier__t { margin: 14px 0 4px; font: 400 28px/1 var(--font-display); letter-spacing: -0.015em; color: var(--fill-base); }
.tier__sub { margin: 0 0 22px; font: 400 13px/19px var(--font-sans); color: var(--fill-subtle); }
.tier__price { font: var(--t-h4); letter-spacing: -0.02em; color: var(--fill-base); }
.tier__price small { font: 400 13px/1 var(--font-sans); color: var(--fill-subtle); margin-left: 6px; }
.tier__features { list-style: none; padding: 22px 0 0; margin: 22px 0 26px; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 11px; }
.tier__features li { position: relative; padding-left: 20px; font: 400 13px/20px var(--font-sans); color: var(--fill-subtle); }
.tier__features li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--fill-highlight); }
.tier .btn { margin-top: auto; width: 100%; box-sizing: border-box; justify-content: center; }

/* --- FAQ rows ----------------------------------------------- */
.faq { border-top: 1px solid var(--border-subtle); }
.faq__row { display: grid; grid-template-columns: 1fr 1.35fr; gap: 48px; padding: 26px 0; border-bottom: 1px solid var(--border-subtle); }
.faq__q { margin: 0; font: var(--t-h6); letter-spacing: -0.01em; color: var(--fill-base); text-wrap: pretty; }
.faq__a { margin: 0; font: 400 14px/23px var(--font-sans); color: var(--fill-subtle); text-wrap: pretty; }

/* --- Estimator / calculator --------------------------------- */
.calc { display: grid; grid-template-columns: 1fr 380px; gap: 0; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--border-subtle); background: var(--surface-base); }
.calc__controls { padding: 36px 40px 40px; display: flex; flex-direction: column; gap: 30px; }
.calc__out { padding: 36px 36px 40px; background: var(--ocean-950); color: var(--fill-base); display: flex; flex-direction: column; }
.calc__row { display: flex; flex-direction: column; gap: 12px; }
.calc__row > header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.calc__row label { font: 500 13px/18px var(--font-sans); color: var(--fill-base); }
.calc__row .val { font: 400 13px/18px var(--font-mono); color: var(--fill-highlight); }
.calc__row .hint { font: 400 12px/18px var(--font-sans); color: var(--fill-subtle); }
.calc input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; border-radius: 2px; background: var(--border-base); outline: none; }
.calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--brand-500); border: 3px solid var(--surface-base); box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer; }
.calc input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--brand-500); border: 3px solid var(--surface-base); cursor: pointer; }
.calc__seg { display: flex; gap: 6px; padding: 4px; border-radius: var(--r-pill); background: var(--surface-subtle); border: 1px solid var(--border-subtle); }
.calc__seg button { flex: 1; border: 0; cursor: pointer; border-radius: var(--r-pill); padding: 9px 12px; font: 500 13px/16px var(--font-sans); background: transparent; color: var(--fill-subtle); }
.calc__seg button[aria-pressed="true"] { background: var(--fill-base); color: var(--fill-invert); }
.calc__total { font: 400 clamp(40px, 4vw, 56px)/1 var(--font-display); letter-spacing: -0.03em; color: #fff; }
.calc__lines { list-style: none; padding: 22px 0 0; margin: 24px 0 0; border-top: 0.5px solid rgba(255,255,255,0.14); display: flex; flex-direction: column; gap: 12px; }
.calc__lines li { display: flex; justify-content: space-between; gap: 16px; font: 400 13px/20px var(--font-sans); color: rgba(255,255,255,0.62); }
.calc__lines li b { font-weight: 500; color: #fff; }
.calc__note { margin: auto 0 0; padding-top: 24px; font: 400 12px/19px var(--font-sans); color: rgba(255,255,255,0.45); }

/* --- Comparison table, light -------------------------------- */
.cmp-wrap { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--r-xl); background: var(--surface-base); }
.cmp-wrap .cmp { min-width: 860px; }
.cmp-wrap .cmp th, .cmp-wrap .cmp td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-subtle); }
.cmp-wrap .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp__floww { color: var(--fill-highlight) !important; }
.cmp .floww-col { background: var(--surface-brand-tint); }

@media (max-width: 1080px) {
  .tiers { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .calc { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .tiers { grid-template-columns: 1fr; }
  .faq__row { grid-template-columns: 1fr; gap: 12px; }
}


/* --- Nav: adapts to the band beneath it -----------------------
 * site-chrome.js watches which band sits under the nav and sets
 * data-nav-theme on .nav-wrap. Everything below is the light state;
 * the dark state is the default above. */
.nav__brand img,
.nav__links > a, .nav__links > .nav__group > .nav__top,
.nav__links .chev, .nav__cta .btn-light, .nav__cta .btn-link-light {
  transition: color 280ms ease, background 280ms ease, border-color 280ms ease, filter 280ms ease, opacity 280ms ease;
}
/* Same recipe as the dark nav — 6% tint over blur(40px), hairline border.
 * Only the tint inverts; transparency and blur are identical. */
.nav-wrap[data-nav-theme="light"] .nav {
  background: rgba(21,31,46,0.06);
  border-color: var(--border-base);
}
.nav-wrap[data-nav-theme="light"] .nav__brand { color: var(--ocean-900); }
.nav-wrap[data-nav-theme="light"] .nav__brand img { filter: invert(1) brightness(0.16); }
.nav-wrap[data-nav-theme="light"] .nav__links > a,
.nav-wrap[data-nav-theme="light"] .nav__links > .nav__group > .nav__top { color: var(--ocean-900); }
.nav-wrap[data-nav-theme="light"] .nav__links > a:hover,
.nav-wrap[data-nav-theme="light"] .nav__links > .nav__group > .nav__top:hover { background: rgba(21,31,46,0.06); }
.nav-wrap[data-nav-theme="light"] .nav__cta .btn-link-light { color: var(--ocean-900); }
.nav-wrap[data-nav-theme="light"] .nav__cta .btn-light { background: var(--ocean-900); border-color: var(--ocean-900); color: #fff; }
.nav-wrap[data-nav-theme="light"] .nav__cta .btn-light:hover { background: var(--ocean-800, #1d2b3f); }
@media (prefers-reduced-motion: reduce) {
  .nav, .nav *, .nav-wrap * { transition: none !important; }
}

/* ----------------------------------------------------------
 * Roadmap — a connected horizontal timeline for time/stage
 * sequences. A distinct alternative to the .steps card grid:
 * a gradient rail with nodes, the line trailing past the last
 * node to imply "ongoing".
 * ---------------------------------------------------------- */
.roadmap {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin-top: 8px;
}
.roadmap--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.roadmap--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* the rail */
.roadmap::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 10px;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--fill-highlight) 0%, var(--t-blue-hi-30) 82%, transparent 100%);
}
.roadmap__item { position: relative; padding-top: 40px; }
/* node on the rail */
.roadmap__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--background-base);
  border: 3px solid var(--fill-highlight);
  box-shadow: 0 0 0 5px var(--background-base);
}
.roadmap__wk {
  display: block;
  font: 500 12px/16px var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fill-highlight);
  margin-bottom: 10px;
}
.roadmap__t {
  margin: 0 0 8px;
  font: var(--t-h5);
  letter-spacing: var(--tracking-display);
  color: var(--fill-base);
  text-wrap: pretty;
}
.roadmap__b {
  margin: 0;
  font: 400 14px/22px var(--font-sans);
  color: var(--fill-subtle);
}
/* Vertical timeline on narrow screens. */
@media (max-width: 760px) {
  .roadmap, .roadmap--3, .roadmap--5 { grid-template-columns: 1fr; gap: 0; }
  .roadmap::before {
    top: 10px;
    bottom: 10px;
    left: 9px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--fill-highlight) 0%, var(--t-blue-hi-30) 82%, transparent 100%);
  }
  .roadmap__item { padding-top: 0; padding-left: 40px; padding-bottom: 32px; }
  .roadmap__item:last-child { padding-bottom: 0; }
}


/* ===========================================================
 * Folded in from overrides.css (previously a separate stylesheet
 * loaded right after this one — cascade position is unchanged).
 * =========================================================== */

/* Headline emphasis (<em>/<i> inside any heading, plus the named
 * section-head rules) is Founders Medium in the heading's own base
 * colour — never blue. `inherit` resolves to the base fill of whatever
 * ground the heading sits on (dark hero → white, light band → ink). */
:is(h1, h2, h3, h4, h5, h6) em,
:is(h1, h2, h3, h4, h5, h6) i,
.hero h1 em,
.sect__head h2 em,
.band__head h2 em,
.callout h3 em,
.ctablock h2 em,
.ctablock h3 em {
  font-style: normal;
  font-weight: 400;
  color: inherit !important;
  -webkit-text-fill-color: currentColor;
}

/* ---- Brand accent colour -------------------------------------------------
 * The "hi" blue (--floww-blue-hi) is a light tint meant for DARK grounds.
 * On light grounds it reads washed-out, so resolve it to the core brand blue
 * (#0665F4) there and keep the lighter tint only on dark grounds. This fixes
 * every accent that rides --floww-blue-hi (eyebrows, icon tiles, tick marks,
 * tier labels, step timings) across the marketing pages. */
:root,
[data-theme="light"],
[data-ground="page"],
[data-ground="white"],
.theme-light {
  --floww-blue-hi: #0665f4;
}
:root[data-theme="dark"],
[data-theme="dark"],
[data-ground="navy"],
[data-ground="dark"],
.phero,
.hero,
.theme-dark,
.dark {
  --floww-blue-hi: rgb(120, 173, 252);
}

/* ---- Callout: a light emphasis panel on the marketing pages --------------
 * Its gradient is a pale blue tint on the light ground, so its copy must be
 * ink, not white (overrides the dark-authored inline colours). */
.callout h3 { color: var(--fill-base) !important; }
.callout p { color: var(--fill-subtle) !important; }

/* ---- Chapter (Linear-style composition, used by PageRenderer) -------- */
.chapter { padding: 112px 0; }
.chapter + .chapter { padding-top: 0; }
.chapter__head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: end; margin-bottom: 44px; }
.chapter__lead { display: flex; flex-direction: column; gap: 20px; }
.chapter__num { font: var(--t-caption); color: var(--fill-brand); }
.chapter__head h2 { font: var(--t-h3); letter-spacing: -0.025em; color: var(--fill-base); margin: 0; text-wrap: balance; }
.chapter__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-bottom: 6px; }
.chapter__sub { font: 400 18px/28px var(--font-sans); color: var(--fill-subtle); margin: 0; max-width: 44ch; }
.chapter__cta { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fill-brand); text-decoration: none; }
.chapter__cta svg { width: 14px; height: 14px; }

.chapter__media { border-radius: 16px; overflow: hidden; margin-bottom: 48px; position: relative; aspect-ratio: 16 / 9; background: var(--background-down1); }
.chapter__media--shot { aspect-ratio: auto; border: 1px solid var(--border-subtle-invert); background: var(--ocean-100); }
.chapter__media img { display: block; width: 100%; height: auto; }
.chapter__media .appmock, .chapter__media image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }

.chapter__index { display: grid; gap: 36px 48px; padding-top: 40px; border-top: 1px solid var(--border-subtle-invert); }
.chapter__index.three-up { grid-template-columns: repeat(3, 1fr); }
.chapter__index.four-up { grid-template-columns: repeat(4, 1fr); }
.chapter__feat { display: flex; flex-direction: column; gap: 0; }
.chapter__fnum { font: var(--t-caption); color: var(--fill-brand); margin-bottom: 10px; }
.chapter__ft { font: 500 16px/22px var(--font-sans); color: var(--fill-base); margin: 0; }
.chapter__fb { font: 400 15px/23px var(--font-sans); color: var(--fill-subtle); margin: 0; text-wrap: pretty; }

.chapter.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.chapter.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .chapter.reveal { opacity: 1; transform: none; transition: none; } }

@media (max-width: 980px) {
  .chapter { padding: 72px 0; }
  .chapter__head { grid-template-columns: 1fr; gap: 20px; align-items: start; margin-bottom: 32px; }
  .chapter__index.three-up, .chapter__index.four-up { grid-template-columns: 1fr 1fr; gap: 28px 32px; }
}
@media (max-width: 600px) { .chapter__index.three-up, .chapter__index.four-up { grid-template-columns: 1fr; } }

/* ---- Capabilities: large media cards + detail modals ---------------- */
.capgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.featurecard { display: flex; flex-direction: column; text-align: left; padding: 0; cursor: pointer; font: inherit; color: inherit; text-decoration: none; background: var(--surface-base); border: 1px solid color-mix(in srgb, var(--border-base) 50%, transparent); border-radius: 20px; overflow: hidden; transition: transform 200ms ease, border-color 200ms ease; }
.featurecard:hover { transform: translateY(-2px); border-color: var(--border-base); }
/* Arrow matches the media card: a bordered circle that fills brand on card
   hover. Always visible — no fade-in. */
.featurecard:hover .featurecard__go { background: var(--fill-brand); border-color: var(--fill-brand); color: #fff; }
/* Media: full-width image (no inset) anchored to the top, on a soft brand
   gradient that shows through below wider screenshots. */
.featurecard__media { position: relative; display: block; aspect-ratio: 16 / 10; background: linear-gradient(135deg, #DBE5F7 0%, #EBEAF7 100%); overflow: hidden; }
.featurecard__media img { position: absolute; top: 0; left: 0; width: 100%; height: auto; max-width: none; object-fit: contain; display: block; }
.featurecard__body { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 28px; }
.featurecard__text { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.featurecard__t { font: var(--t-body-md); font-weight: 600; color: var(--fill-base); }
.featurecard__d { font: var(--t-body-md); color: var(--fill-subtle); text-wrap: pretty; }
.featurecard__go { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid currentColor; color: var(--fill-base); display: grid; place-items: center; transition: background 160ms ease, border-color 160ms ease, color 160ms ease; }
.featurecard__go::before { content: ""; width: 7px; height: 13px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1 1l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1 1l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
/* Modal cards use a '+' glyph instead of the chevron. */
.featurecard__go--plus::before { width: 14px; height: 14px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }
/* Arrow below the text instead of beside it. */
.featurecard--stacked .featurecard__body { flex-direction: column; align-items: flex-start; gap: 24px; }
.capsec__icons { margin-top: 24px; }
/* Dark-themed capabilities section: data-ground="dark" flips the tokens; paint
   the ground and invert the (ink) feature pictos so they read on dark. */
.capsec--dark { background: var(--background-base); }
[data-ground="dark"] .ifeature__icon img { filter: brightness(0) invert(1); }

/* Large detail dialog opened by a feature card's + arrow. Stripe-style: the
   dialog is a full-viewport scroll layer and the whole card scrolls within it
   (rather than an inner scrollbox), so the card can be taller than the screen. */
.featuremodal { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: 100%; margin: 0; padding: 56px 0; border: 0; background: transparent; overflow-y: auto; overscroll-behavior: contain; }
.featuremodal::backdrop { background: rgba(8,9,20,0.55); backdrop-filter: blur(2px); }
.featuremodal__inner { position: relative; width: min(1080px, calc(100vw - 160px)); margin: 0 auto; background: #fff; color: var(--fill-base); border-radius: 24px; overflow: hidden; box-shadow: 0 40px 120px -20px rgba(11,17,25,0.5); padding: 48px 56px 56px; }
.featuremodal__close { position: absolute; top: 32px; right: 32px; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 0; background: none; color: var(--fill-base); cursor: pointer; transition: background 160ms ease; }
.featuremodal__close:hover { background: var(--surface-subtle); }

.featuremodal__head { max-width: calc(100% - 48px); }
.featuremodal__eyebrow { display: block; font: var(--t-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fill-brand); margin-bottom: 16px; }
.featuremodal__t { margin: 0; font: var(--t-h3); letter-spacing: var(--tracking-display); color: var(--fill-base); text-wrap: balance; max-width: 18ch; }

/* Intro + CTA on one row (the intro-split header). */
.featuremodal__introrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; margin: 24px 0 40px; }
.featuremodal__intro { margin: 0; font: var(--t-body-md); color: var(--fill-subtle); max-width: 52ch; }
.featuremodal__cta { flex: none; }

/* Gallery: a bento grid of framed UI screens. The arrangement is driven by the
   image count (data-count, 1–5); each tile fills its cell edge-to-edge. */
.featuremodal__gallery { display: grid; gap: 16px; margin: 0 0 44px; grid-auto-rows: minmax(0, 228px); }
.featuremodal__shot { border-radius: 16px; overflow: hidden; background: var(--gradient-brand-soft), var(--background-up1); }
.featuremodal__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* 1 image — a single wide tile. */
.featuremodal__gallery[data-count="1"] { grid-template-columns: 1fr; grid-auto-rows: minmax(0, 432px); }
/* 2 images — side by side. */
.featuremodal__gallery[data-count="2"] { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, 360px); }
/* 3 images — a tall tile beside two stacked.  [ A | B ]
                                                [ A | C ] */
.featuremodal__gallery[data-count="3"] { grid-template-columns: 1.4fr 1fr; }
.featuremodal__gallery[data-count="3"] .featuremodal__shot:nth-child(1) { grid-row: span 2; }
/* 4 images — a wide hero, a tall side and two below.  [ A A | B ]
                                                        [ C D | B ] */
.featuremodal__gallery[data-count="4"] { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(0, 274px); }
.featuremodal__gallery[data-count="4"] .featuremodal__shot:nth-child(1) { grid-column: span 2; }
.featuremodal__gallery[data-count="4"] .featuremodal__shot:nth-child(2) { grid-row: span 2; }
/* 5 images — a wide hero up top, three across below.  [ A A | B ]
                                                        [ C D | E ] */
.featuremodal__gallery[data-count="5"] { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(0, 274px); }
.featuremodal__gallery[data-count="5"] .featuremodal__shot:nth-child(1) { grid-column: span 2; }

/* Legacy bullet list (string features). */
.featuremodal__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.featuremodal__list li { position: relative; padding-left: 26px; font: 400 15px/22px var(--font-sans); color: var(--fill-base); }
.featuremodal__list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: rgba(6,101,244,0.12); }
.featuremodal__list li::after { content: ""; position: absolute; left: 5px; top: 8px; width: 5px; height: 3px; border-left: 1.5px solid var(--fill-brand); border-bottom: 1.5px solid var(--fill-brand); transform: rotate(-45deg); }
/* Title + body feature grid — up to six, three across (icon + title + body). */
/* Rotating word in a heading. Width tracks the current word and eases between,
   so trailing punctuation stays snug. Written by emph() from a {one|two|three}
   token and driven by RotateWord.astro. */
/* Typewriter token: the word types/deletes in place; the trailing period is
   lifted into .rotw__cursor, which stays solid (no blink). */
.rotw { display: inline-block; vertical-align: baseline; text-align: left; }
.rotw__word { display: inline-block; white-space: nowrap; }
.rotw__cursor { display: inline-block; }

.featuremodal__list--pairs { grid-template-columns: repeat(3, 1fr); gap: 44px 40px; }
.featuremodal__list--pairs li { padding-left: 0; }
.featuremodal__list--pairs li::before,
.featuremodal__list--pairs li::after { content: none; }
.featuremodal__featmedia { display: block; margin-bottom: 14px; border-radius: 12px; overflow: hidden; background: var(--surface-subtle); }
.featuremodal__featmedia img { display: block; width: 100%; height: auto; }
.featuremodal__featicon { display: block; width: 32px; height: 32px; margin-bottom: 16px; color: var(--fill-base); }
.featuremodal__featicon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.featuremodal__feattext { display: block; }
.featuremodal__feath { display: block; font: var(--t-body-md); font-weight: 600; color: var(--fill-base); margin-bottom: 4px; }
.featuremodal__featb { display: block; font: var(--t-body-md); color: var(--fill-subtle); }


@media (max-width: 980px) {
  .featuremodal { padding: 20px 0; }
  .featuremodal__inner { width: calc(100vw - 32px); padding: 40px 24px 44px; }
  .featuremodal__close { top: 20px; right: 20px; }
  .featuremodal__introrow { flex-direction: column; gap: 20px; margin-bottom: 32px; }
  .featuremodal__gallery { margin: 0 0 36px; }
  .featuremodal__list, .featuremodal__list--pairs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  /* Bento collapses to a simple 2-up; spans reset so tiles flow in order. */
  .featuremodal__gallery[data-count] { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, 180px); }
  .featuremodal__gallery[data-count="1"] { grid-template-columns: 1fr; }
  .featuremodal__gallery[data-count="3"] .featuremodal__shot:nth-child(1),
  .featuremodal__gallery[data-count="4"] .featuremodal__shot:nth-child(1),
  .featuremodal__gallery[data-count="4"] .featuremodal__shot:nth-child(2),
  .featuremodal__gallery[data-count="5"] .featuremodal__shot:nth-child(1) { grid-column: auto; grid-row: auto; }
  .featuremodal__list, .featuremodal__list--pairs { grid-template-columns: 1fr; }
}

/* ===== Horizontal title divider (caphead) — number/heading left, sentence right ===== */
.caphead { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; row-gap: 20px; align-items: start; padding-top: 80px; border-top: 1px solid var(--border-subtle-invert); margin-bottom: 84px; }
.caphead__eyebrow { grid-column: 1 / -1; font: 500 12px/1 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fill-brand); }
.caphead__t { grid-column: 1; font: var(--t-h3); letter-spacing: -0.02em; color: var(--fill-base); margin: 0; text-wrap: balance; }
.caphead__r { grid-column: 2; align-self: start; font: 400 18px/28px var(--font-sans); color: var(--fill-subtle); margin: 0; }
/* Stacked variant: heading and sentence in one column, sentence beneath. */
.caphead--stacked { grid-template-columns: 1fr; }
.caphead--stacked .caphead__t { grid-column: 1; max-width: 20ch; }
.caphead--stacked .caphead__r { grid-column: 1; max-width: 60ch; }

/* ===== Lead-in (small label left ~25%, large display statement right ~75%) ===== */
.leadin__grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.leadin__label { font: 500 12px/1.4 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fill-brand); }
.leadin__t { font: var(--t-h3); letter-spacing: -0.02em; color: var(--fill-base); margin: 0; text-wrap: pretty; max-width: 960px; }

/* ===== Feature section — titled, de-boxed cells with a left rule ===== */
.featsec { margin-top: 72px; }
.featsec__head { margin-bottom: 44px; }
.featsec__eyebrow { display: block; font: 500 12px/1 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fill-brand); margin-bottom: 14px; }
.featsec__t { font: var(--t-h4); letter-spacing: -0.02em; color: var(--fill-base); margin: 0; text-wrap: balance; }
.featgrid { display: grid; gap: 40px; }
.featgrid.three-up { grid-template-columns: repeat(3, 1fr); }
.featgrid.four-up { grid-template-columns: repeat(4, 1fr); }
.ifeature { display: flex; flex-direction: column; gap: 24px; padding: 2px 0; }
.ifeature__icon { display: block; width: 42px; height: 42px; color: var(--fill-base); }
/* Icon size options — sm 24 / md 32 / lg 48 (default is 42). */
.ifeature--icon-sm .ifeature__icon { width: 24px; height: 24px; }
.ifeature--icon-md .ifeature__icon { width: 32px; height: 32px; }
.ifeature--icon-lg .ifeature__icon { width: 48px; height: 48px; }
.ifeature__icon img { width: 100%; height: 100%; object-fit: contain; }
.ifeature__body { display: flex; flex-direction: column; gap: 0; }
.ifeature__t { font: var(--t-body-sm); font-weight: 600; color: var(--fill-base); margin: 0; }
.ifeature__d { font: var(--t-body-sm); color: var(--fill-subtle); margin: 0; max-width: 34ch; }

/* ===== Full-width platform UI shot =====
   A soft background panel holds a UI screenshot that floats separately (its own
   shadow), with a segmented toggle sitting in the space beneath it. */
.uishot-sec { padding: 8px 0 40px; }
.uishot-panel {
  --pad-x: 108px;
  border-radius: 24px;
  padding: 56px var(--pad-x) 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #DAE5F7 0%, #EBEAF7 100%);
}
/* The screenshot fills the panel edge-to-edge (bleeds past the side padding). */
.uishot { display: block; width: calc(100% + 2 * var(--pad-x)); margin-inline: calc(-1 * var(--pad-x)); max-width: none; height: auto; }
/* Segmented view toggle, sitting within the panel beneath the UI. A pill slides
   between segments; labels sit above it. */
.uitabs-wrap { position: relative; display: inline-flex; margin-top: 48px; }
.uitabs__pill { display: none; }
.uitabs { position: relative; display: inline-flex; gap: 4px; padding: 5px; border-radius: var(--r-pill); border: 1px solid var(--border-subtle-invert); background: var(--surface-base); }
.uitabs__slider { position: absolute; top: 5px; left: 0; width: 0; height: calc(100% - 10px); border-radius: var(--r-pill); background: var(--fill-base); z-index: 0; }
.uitabs.is-ready .uitabs__slider { transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), width 300ms cubic-bezier(0.4, 0, 0.2, 1); }
.uitab { position: relative; z-index: 1; border: 0; background: none; font: 500 14px/1 var(--font-sans); color: var(--fill-subtle); padding: 11px 20px; border-radius: var(--r-pill); cursor: pointer; white-space: nowrap; transition: color 220ms ease; }
.uitab:hover { color: var(--fill-base); }
.uitab.is-on, .uitab.is-on:hover { color: var(--fill-invert); }
@media (max-width: 760px) {
  .uishot-panel { --pad-x: 20px; padding: 32px var(--pad-x) 28px; }
  /* Camera-style swipe picker. The row of titles is a full-bleed, centre-snapping
     strip; a fixed dark pill sits in the middle and the titles swipe through it. */
  .uitabs-wrap { display: block; width: calc(100% + 2 * var(--pad-x)); margin: 28px calc(-1 * var(--pad-x)) 0; }
  .uitabs {
    display: flex; gap: 0; width: 100%;
    padding: 6px 50%;
    border: 0; background: none; border-radius: 0;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
  }
  .uitabs::-webkit-scrollbar { display: none; }
  .uitabs__slider { display: none; }
  .uitab {
    flex: 0 0 auto; scroll-snap-align: center; white-space: nowrap;
    padding: 8px 18px; color: var(--fill-subtle);
    background: none; opacity: 0.55;
  }
  .uitab.is-on { color: var(--fill-subtle); background: none; opacity: 0.55; } /* the fixed pill shows the active title */

  /* Fixed centre pill + white, position-synced copy of the titles. */
  .uitabs__pill {
    display: block; position: absolute; z-index: 2; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: var(--r-pill); background: var(--fill-base);
    overflow: hidden; pointer-events: none;
    transition: width 260ms cubic-bezier(0.4, 0, 0.2, 1), height 260ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .uitabs__pillrow { display: flex; width: max-content; will-change: transform; }
  .uitab--ghost { flex: 0 0 auto; white-space: nowrap; padding: 8px 18px; color: var(--fill-invert); opacity: 1; }
}

/* ===== New experimental header (layout: header) — media fades into the dark
   ground; eyebrow/title/sub bottom-left, CTA bottom-right. ===== */
.hero--header { position: relative; padding: 0; min-height: 90vh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
/* Credentials ticker on the hero's lower edge (homepage). */
.hero--header .licensing { position: relative; z-index: 2; border-bottom: 0; padding: 32px 0 40px; color: #fff; }
.hero--header .lic-item__title { color: #fff; }
.hero--header .lic-item__sub { color: rgba(255,255,255,0.6); }
.hero--header .lic-item__tag { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.24); color: #fff; }
.hero--header .container { position: relative; z-index: 2; }
.hh__media { position: absolute; inset: 0; z-index: 1; }
.hh__media video, .hh__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.hh__fade { position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, transparent 45%, color-mix(in srgb, var(--dark-ground-2) 45%, transparent) 78%, color-mix(in srgb, var(--dark-ground-2) 70%, transparent) 100%),
    linear-gradient(to right, transparent 86%, var(--dark-ground-2)); }
.hh__inner { max-width: 1216px; margin-inline: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding: 0 24px 84px; }
/* Homepage hero sits tighter to the band (half the bottom padding). */
.is-home .hh__inner { padding-bottom: 42px; }
.hh__copy { max-width: 960px; }
.hh__eyebrow { display: inline-block; font: var(--t-caption); color: #fff; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 26px; }
.hero--header .hh__inner h1 { font: var(--t-h1); letter-spacing: -0.02em; color: #fff; margin: 0; text-wrap: balance; max-width: 960px; }
.hh__sub { font: 400 18px/28px var(--font-sans); color: rgba(255,255,255,0.72); margin: 22px 0 0; max-width: 52ch; }
/* Light header hero (e.g. framed fund hero on the soft gradient): ink copy, brand
   eyebrow, and no dark vignette — the device's own alpha fade blends it instead. */
.hero--light .hh__eyebrow { color: var(--fill-brand); }
.hero--header.hero--light .hh__inner h1 { color: var(--fill-base); }
.hero--header.hero--light .hh__sub { color: var(--fill-subtle); }
.hero--framed.hero--light .hh__fade { display: none; }
/* Light header hero with a full-bleed (self-framed) render: fade the lower band
   into the page ground so the ink copy stays legible over it. */
.hero--header.hero--light:not(.hero--framed) .hh__media video,
.hero--header.hero--light:not(.hero--framed) .hh__media img { object-position: center top; }
.hero--header.hero--light:not(.hero--framed) .hh__fade {
  background: linear-gradient(to bottom,
    transparent 30%,
    color-mix(in srgb, var(--background-base) 72%, transparent) 58%,
    var(--background-base) 90%);
}
.hh__cta { flex: 0 0 auto; padding-bottom: 8px; display: flex; gap: 16px; flex-wrap: wrap; }

/* Framed header hero: three stacked layers — a background image, a device
   frame (bezel) floated over it, and the UI video inset into the frame's
   screen. Screen insets are measured from the frame asset (6.6/6.3/86.7/78.77%). */
.hh__stage { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
/* Framed hero with no bg image falls back to the soft brand gradient. */
.hero--framed .hh__stage { background: var(--gradient-brand-soft), var(--background-up1); }
.hh__bg { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; }
.hero--framed .hh__device { position: absolute; left: 50%; top: 15%; width: 68%; transform: translateX(-50%);
  /* Fade the device into the ground near its base so the title reads over it. */
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 97%); }
.hh__frame { display: block; width: 100%; height: auto; }
/* Fit the whole UI inside the screen (the capture is wider than the 16:9 screen),
   anchored to the top; the frame's navy screen shows as a thin letterbox. */
.hh__screen { position: absolute; left: 6.6%; top: 6.3%; width: 86.7%; height: 78.77%;
  object-fit: contain; object-position: center top; border-radius: clamp(6px, 0.7vw, 14px); }
/* Bottom vignette: darken the lower band so the copy stays readable over the device. */
.hero--framed .hh__fade {
  background: linear-gradient(to bottom,
    transparent 46%,
    color-mix(in srgb, var(--dark-ground-2) 55%, transparent) 72%,
    color-mix(in srgb, var(--dark-ground-2) 90%, transparent) 100%);
}

/* Frameless staged hero: a bare UI panel floating on the soft brand gradient
   (no bezel), faded into the ground with a mask so the headline reads over it. */
.hero--stage .hh__stage { background: var(--gradient-brand-soft), var(--background-up1); }
.hh__panel {
  position: absolute; left: 50%; top: 13%; width: 72%; transform: translateX(-50%);
  border: 16px solid var(--t-black-10); border-radius: calc(var(--r-xl) + 16px);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 94%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 94%);
}
.hh__panel-media { display: block; width: 100%; height: auto; border-radius: var(--r-xl); }
.hero--stage .hh__fade { display: none; }

@media (max-width: 980px) {
  .hero--framed .hh__device { width: 92%; top: 7%; }
  .hero--stage .hh__panel { width: 92%; top: 8%; }
}

@media (max-width: 980px) {
  .caphead { grid-template-columns: 1fr; gap: 14px; }
  .caphead__t, .caphead__r { grid-column: 1; }
  .leadin__grid { grid-template-columns: 1fr; gap: 14px; }
  .leadin__label { padding-top: 0; }
  .hero--header { min-height: 600px; }
  .hh__inner { flex-direction: column; align-items: flex-start; gap: 28px; padding-bottom: 56px; }
  /* Homepage hero sits flush to the band on mobile. */
  .is-home .hh__inner { padding-bottom: 0; }
  .hh__copy { max-width: 100%; }
}

/* Phones (md and below): heroes fill the viewport. svh avoids the browser-chrome
   overflow that 100vh causes; 100vh is the fallback for older browsers. */
@media (max-width: 760px) {
  .hero { min-height: 100vh; min-height: 100svh; }
}

@media (max-width: 760px) {
  .capgrid { grid-template-columns: 1fr; }
  .featgrid.three-up, .featgrid.four-up { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px 16px; }
  .ifeature { gap: 20px; }
}


/* --- Logo wall (PageRenderer `logos` block) --------------------------- */
.logos-sec__t { max-width: 26ch; }
/* Scrolling logo marquee: an overflow-clipped viewport with a track that holds
   the set twice and translates -50% for a seamless loop. Edges fade out. */
.logowall {
  margin: 32px 0 0;
  /* A real horizontal scroll container: the user can drag/swipe it, and a
     script auto-advances scrollLeft (see Logos.astro). */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.logowall::-webkit-scrollbar { display: none; }
.logowall__track {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; width: max-content;
}
/* Spacing between logos (was 48px column-gap; +50% = 72px). Padding on every
   item (not flex gap) keeps the -50% loop point exact. */
.logowall__item { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding-right: 72px; }
.logowall__item img { max-width: none; max-height: 34px; width: auto; opacity: 1; }
@keyframes logowall-scroll { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  /* No motion: show the real set, wrapped and centred; drop the duplicate. */
  .logowall { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .logowall__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 32px 72px; }
  .logowall__item { padding-right: 0; }
  .logowall__item[aria-hidden="true"] { display: none; }
}


/* --- Linked icon card (IFeature with an href) ------------------------- */
a.ifeature--link {
  text-decoration: none;
  color: inherit;
  display: flex;
  transition: transform 160ms ease, border-color 160ms ease;
}
a.ifeature--link:hover { transform: translateY(-2px); }
a.ifeature--link:hover .ifeature__t { text-decoration: underline; text-underline-offset: 3px; }
a.ifeature--link:focus-visible { outline: 2px solid var(--floww-blue, #0665F4); outline-offset: 4px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { a.ifeature--link { transition: none; } a.ifeature--link:hover { transform: none; } }