/* ==========================================================================
   Cove — landing page
   Built on the Lume Design System (Figma file BOf0KJx605OsvCAIcI2AQF).
   Values below are taken from the Figma source, not inferred.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Typography — Lume Font/* primitives */
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --font-size-14: 14px;   --font-lh-14: 21px;
  --font-size-16: 16px;   --font-lh-16: 24px;
  --font-size-20: 20px;   --font-lh-20: 26px;
  --font-size-24: 24px;   --font-lh-24: 28px;
  --font-size-32: 32px;   --font-lh-32: 38px;
  --font-size-40: 40px;   --font-lh-40: 58px;
  --font-size-48: 48px;   --font-lh-48: 60px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Base — Lume Tokens collection, Light mode */
  --background: #ffffff;
  --foreground: #171717;
  --card: #ffffff;
  --muted: #f5f5f5;
  --muted-foreground: #737373;
  --accent-foreground: #262626;
  --border-light: #f5f5f5;          /* Base/Border   */
  --input: #e5e5e5;                 /* Base/Input    */
  --ring: #d4d4d4;                  /* Base/Ring     */
  --btn-outline-bg: #ffffff;        /* Custom/Btn outline background */
  --primary-foreground: #ffffff;

  /* Brand — Cove overrides Lume's Purple Onion primary with its own blue */
  --brand: #5070fe;
  --brand-soft: #9aacfc;

  /* Dark surfaces used by the night sections */
  --night: #030714;
  --night-card: #141414;
  --night-badge-bg: #132637;
  --night-badge-fg: #88bbe8;
  --table-border: #323232;
  --table-row: #232323;
  --table-row-highlight: #353535;
  --panel-deep: #000022;
  --footer-bg: #070708;

  /* Radius — Lume Radius/* + Numbers/* */
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-pill: 72px;

  /* Layout */
  --page-width: 1440px;
  --container: 1240px;
  --gutter: 100px;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

/* The page never pans sideways. `clip` rather than `hidden` because it does not
   create a scroll container, so the fixed nav and anchor offsets still behave.
   Internal scrollers (the comparison table) are unaffected. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;   /* fallback for older engines */
  overflow-x: clip;
}

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

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--font-size-16);
  line-height: var(--font-lh-16);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }
p   { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: var(--weight-semibold); }
ul  { margin: 0; padding: 0; list-style: none; }
a   { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* --------------------------------------------------------------------------
   3. Shared primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

.section {
  padding-inline: var(--gutter);
}

/* Keep in-page anchors clear of the pinned nav. */
[id] { scroll-margin-top: 110px; }

/* Eyebrow — Geist Mono Medium 16/24, letter-spacing 2px */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--font-size-16);
  line-height: var(--font-lh-16);
  letter-spacing: 2px;
  color: var(--brand);
}
.eyebrow--soft  { color: var(--brand-soft); }
.eyebrow--light { color: #ffffff; }

/* Section heading — Mobile/4xl/semibold */
.h-section {
  font-size: var(--font-size-40);
  line-height: var(--font-lh-40);
  font-weight: var(--weight-semibold);
  color: var(--foreground);
}

.lede {
  font-size: var(--font-size-16);
  line-height: var(--font-lh-16);
  color: var(--muted-foreground);
}

/* Buttons — Lume Buttons, size default (h40), pill radius per Cove */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-14);
  line-height: var(--font-lh-14);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn--primary {
  background: var(--brand);
  color: var(--primary-foreground);
}
.btn--primary:hover { background: #3f5cf0; }

.btn--outline {
  padding: 12px;
  background: var(--btn-outline-bg);
  border: 1px solid var(--input);
  color: var(--accent-foreground);
}
.btn--outline:hover { background: var(--muted); }

/* Solid white, no border — the hero's primary against the dark gradient. */
.btn--white {
  background: var(--background);
  color: var(--accent-foreground);
}
.btn--white:hover { background: #ededed; }

.btn--light {
  padding: 12px;
  background: var(--btn-outline-bg);
  border: 1px solid var(--input);
  color: var(--accent-foreground);
}
.btn--light:hover { background: var(--muted); }

/* Icon boxes reproduce the Figma leaf geometry: fixed outer box, inset leaf */
.ico {
  position: relative;
  flex: none;
  overflow: hidden;
}
/* The exported SVGs already carry their Figma leaf dimensions, so they are
   placed at their intrinsic size and offset by the node's inset — never
   stretched to the outer box. */
.ico img {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
}
.ico--16 { width: 16px; height: 16px; }
.ico--20 { width: 20px; height: 20px; }
.ico--24 { width: 24px; height: 24px; }

/* --------------------------------------------------------------------------
   4. Navigation
   -------------------------------------------------------------------------- */
/* Sticky rather than fixed: it pins to the top on scroll exactly like a fixed
   bar, but stays in flow, so nothing below needs a compensating offset.
   It rides transparent over the dark hero and takes its white background once
   the hero has scrolled past — see the nav controller in script.js. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px var(--gutter);
  /* Three states, driven by the controller in script.js:
       top   — resting at the very top, fully transparent
       float — moving over the hero, dark frosted glass
       solid — hero scrolled past, plain white bar          */
  background: transparent;
  border-bottom: 1px solid transparent;
  color: #ffffff;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease,
              -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease;
}
.nav[data-nav="float"] {
  background: rgba(4, 10, 26, .55);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
          backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: rgba(255, 255, 255, .08);
}
.nav[data-nav="solid"] {
  background: var(--background);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border-bottom-color: var(--border-light);
  color: var(--foreground);
}
/* Without backdrop-filter the tint has to carry the contrast on its own. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav[data-nav="float"] { background: rgba(4, 10, 26, .82); }   /* no blur to lean on */
}

/* One SVG for both nav states: the wordmark paths are `currentColor`, so they
   follow the bar from white over the hero to Neutral/950 once scrolled, while
   the mark stays brand blue. */
.nav__brand {
  display: block;
  flex: none;
  line-height: 0;
}
.nav__logo {
  display: block;
  height: 32px;
  width: auto;
}

.nav__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.nav__list {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  font-size: var(--font-size-14);
  line-height: var(--font-lh-14);
  font-weight: var(--weight-medium);
  color: inherit;
  white-space: nowrap;
  transition: opacity .2s ease;
}
.nav__link:hover { opacity: .7; }
.nav__link--menu { padding-right: 0; }
.nav__caret { width: 8px; height: 10px; color: currentColor; opacity: .7; flex: none; }

.nav__toggle { display: none; }

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
/* The fixed nav overlaps the hero, so the gradient runs behind it; the padding
   keeps the copy clear of the bar. */
.hero {
  position: relative;
  height: 1158px;      /* tightened: halves the band under the actions */
  padding-top: 93px;   /* clears the nav that overlaps it */
  overflow: hidden;
  background: #01030a;   /* ground under the shader, and its fallback */
  color: #ffffff;
}
/* Slow mesh gradient; fades in once the first frame is drawn. */
.hero__fx {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .8s ease;
}
.hero__fx[data-ready="true"] { opacity: 1; }

/* Centred stack: eyebrow, headline, lede, actions. */
.hero__head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 68px;
}
.hero__title {
  max-width: 900px;
  margin-top: 16px;
  font-size: 56px;
  line-height: 63px;
  font-weight: var(--weight-semibold);
  color: #ffffff;
}
.hero__body {
  max-width: 680px;
  margin-top: 24px;
  font-size: var(--font-size-20);
  line-height: var(--font-lh-20);
  color: rgba(255, 255, 255, .82);
}
.hero__actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 36px;
}
.hero__actions .btn { min-width: 172px; }   /* both actions read as a pair */

/* Figma: 1078.34px wide at x=180.83 on the 1440 frame, clipped by the hero.
   The export is now the bare dashboard, so its device frame is drawn here as a
   border rather than baked into the pixels — measured off the previous export
   at 8.9px of #093f6b with a 28.5px outer radius. No more white corners. */
/* Anchored to the bottom rather than offset from the top, so the screenshot
   sits flush whatever height it computes to. The negative offset lets it bleed
   past the hero edge — kept under ~55px, which is the empty margin below the
   product thumbnails in the export, so they stay fully visible. */
.hero__shot {
  position: absolute;
  left: 12.558%;
  bottom: -24px;          /* chat thumbnails clear the crop */
  width: 74.885%;
}
.hero__shot img {
  width: 100%;
  height: auto;
  border: 9px solid #093f6b;
  border-radius: 28px;
}

/* --------------------------------------------------------------------------
   6. Key features
   -------------------------------------------------------------------------- */
.features { padding-block: 120px; }

.features__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  min-height: 128px;
  margin-bottom: 56px;
}
.features__headline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 434px;
}
.features__head .h-section { line-height: 48px; }
.features__head .lede { max-width: 434px; }

.features__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.features__cell {
  border: 1px solid var(--input);
  margin: 0 -1px -1px 0;   /* collapse the shared 1px rules */
  min-height: 514px;
}
.features__cell--visual {
  padding: 0;
  overflow: hidden;
}
.features__cell--visual img { width: 100%; height: 100%; object-fit: cover; }

.features__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  height: 100%;
}
.features__title {
  font-size: var(--font-size-24);
  line-height: var(--font-lh-24);
  font-weight: var(--weight-semibold);
}
.features__text {
  font-size: var(--font-size-16);
  line-height: var(--font-lh-16);
  max-width: 448px;
}
.features__list { max-width: 448px; }
.features__list li {
  position: relative;
  padding-left: 30px;
  font-size: var(--font-size-16);
  line-height: var(--font-lh-32);
}
.features__list li::before {
  content: "•";
  position: absolute;
  left: 11px;
}

/* --------------------------------------------------------------------------
   7. More features
   -------------------------------------------------------------------------- */
.more {
  padding-block: 120px;
  border-top: 1px solid var(--input);
  background: var(--background);
}
.more__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  margin-bottom: 56px;
}
.more__head .lede { max-width: 448px; }

.more__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
/* The visual bleeds to the card's top and side edges; padding is carried by
   the copy block underneath instead of the card itself. */
.more__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  border: 1px solid var(--input);
  margin-right: -1px;
}
.more__card:last-child { margin-right: 0; }
/* Matches the source exports (748 × 568), so nothing is cropped. */
.more__shot {
  width: 100%;
  aspect-ratio: 374 / 284;
  overflow: hidden;
}
.more__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.more__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
  padding: 0 20px 20px;
}
.more__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--font-size-16);
  line-height: var(--font-lh-16);
}
.more__title { font-weight: var(--weight-medium); }

/* --------------------------------------------------------------------------
   8. How it works
   -------------------------------------------------------------------------- */
/* Dot grid: 50px pitch, dot sampled from the Figma frame fill as white at 3.1%
   over #030714. Drawn as a gradient so it stays sharp at any pixel density. */
.how {
  padding-block: 120px;
  background-color: var(--night);
  background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .031) 0 1.4px, transparent 1.7px);
  background-size: 50px 50px;
}
.how__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  margin-bottom: 112px;
}
.how__title {
  max-width: 550px;
  color: #ffffff;
}
.how__sub {
  max-width: 344px;
  font-size: var(--font-size-16);
  line-height: var(--font-lh-16);
  color: rgba(255, 255, 255, .7);
}

.how__flow {
  position: relative;
  width: 859px;
  height: 1319px;
  margin-inline: auto;
}
.how__step {
  position: absolute;
  width: 349px;
  display: flex;
  align-items: center;
  padding: 20px;
  border-radius: var(--radius-24);
  background: var(--night-card);
  transition: background-color .2s ease, transform .2s ease;
}
/* A small lift and a touch more light — enough to read as interactive,
   not enough to pull focus from the flow. */
.how__step:hover {
  background: #1a1a1a;
  transform: translateY(-2px);
}
.how__step:hover .how__num { color: rgba(255, 255, 255, .16); }
.how__step > div {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 309px;
}
.how__steprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.how__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px 5px 8px;
  border-radius: var(--radius-10);
  background: var(--night-badge-bg);
  color: var(--night-badge-fg);
  font-size: 14px;
  line-height: 22.1px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.34px;
  white-space: nowrap;
}
.how__num {
  font-size: 38px;
  line-height: 22.1px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.34px;
  color: rgba(255, 255, 255, .09);
  transition: color .2s ease;
}
.how__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-weight: var(--weight-medium);
}
.how__steptitle {
  font-size: var(--font-size-20);
  line-height: var(--font-lh-20);
  color: #ffffff;
}
.how__stepnote {
  font-size: var(--font-size-14);
  line-height: var(--font-lh-14);
  color: rgba(255, 255, 255, .6);
}

.how__link { position: absolute; }
.how__link img { width: 100%; height: 100%; }
.how__link--flip { transform: scaleX(-1); }

.how__outro {
  max-width: 602px;
  margin: 56px auto 0;
  text-align: center;
  font-size: var(--font-size-16);
  line-height: var(--font-lh-16);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   9. Why Cove
   -------------------------------------------------------------------------- */
.why {
  position: relative;
  min-height: 816px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--night);
  overflow: hidden;
}
.why__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Animated dot-matrix backdrop. Sits over the static image and fades in once
   the first frame is drawn, so a WebGL failure just leaves the PNG in place. */
.why__fx {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .6s ease;
}
.why__fx[data-ready="true"] { opacity: 1; }
/* Narrower than the Figma frame (1333px) so more of the animated matrix
   reads down either side. */
.why__panel {
  position: relative;
  width: 1040px;
  max-width: calc(100% - 48px);
  min-height: 707px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 56px 24px;
  background: var(--panel-deep);
  border: 1px solid #000000;
}
.why__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.why__head .h-section { color: #ffffff; }
.why__sub {
  max-width: 344px;
  font-size: var(--font-size-16);
  line-height: var(--font-lh-16);
  color: rgba(255, 255, 255, .7);
}

/* Table — Lume Table-primitive on a dark surface */
.cmp {
  width: 806px;
  max-width: 100%;
  padding: 0 4px 4px;
  border: 1px solid var(--table-border);
  border-radius: var(--radius-16);
  background: var(--night-card);
}
/* Head and body share one column ratio (228 : 229 : 341 of the 798px inner
   width), so the table scales down intact instead of scrolling. */
.cmp__head,
.cmp__body {
  display: grid;
  grid-template-columns: minmax(0, 228fr) minmax(0, 229fr) minmax(0, 341fr);
}
.cmp__headcell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 8px 12px;
  font-size: var(--font-size-14);
  line-height: var(--font-lh-14);
  font-weight: var(--weight-medium);
  color: #ffffff;
  border-right: 1px solid var(--table-border);
}
.cmp__headcell:last-child { border-right: 0; }
/* The mark on its own — no longer a crop out of the full wordmark bitmap. */
.cmp__logo {
  width: 22px;
  height: 22px;
  flex: none;
}
.cmp__logo img { width: 100%; height: 100%; }

.cmp__headcell:nth-child(2) { padding-left: 14px; }

.cmp__body {
  border: 1px solid var(--table-border);
  border-radius: var(--radius-14);
  background: var(--table-row);
  overflow: hidden;
}
.cmp__cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 8px 12px;
  font-size: var(--font-size-14);
  line-height: var(--font-lh-14);
  color: #ffffff;
  border-bottom: 1px solid var(--table-border);
}
/* Column roles by position within each row of three. */
.cmp__cell:nth-child(3n + 1) {
  border-right: 1px solid var(--table-border);
  font-weight: var(--weight-regular);
}
.cmp__cell:nth-child(3n + 2) {
  border-right: 1px solid var(--table-border);
  padding-left: 14px;
  font-weight: var(--weight-medium);
}
.cmp__cell:nth-child(3n) {
  background: var(--table-row-highlight);
  font-weight: var(--weight-medium);
}
.cmp__cell:nth-last-child(-n + 3) { border-bottom: 0; }

/* --------------------------------------------------------------------------
   10. Testimonials
   -------------------------------------------------------------------------- */
.stories {
  padding-block: 120px;
  background: var(--background);
}
.stories__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  margin-bottom: 56px;
}
.stories__head .h-section { max-width: 548px; }

.stories__grid { display: grid; grid-template-columns: repeat(3, 1fr); }

/* The -1px right margin pulls each card over its neighbour so the shared
   border renders once, not twice. It also cancels the <figure> UA margin. */
.story {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9.26px;
  min-height: 223px;
  padding: 30.865px 24.692px;
  border: 1px solid var(--input);
  margin: 0 -1px 0 0;
}
.story:last-child { margin-right: 0; }
.story__mark { width: 18.519px; height: 17.747px; flex: none; }
.story__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30.865px;
  width: 100%;
}
.story__quote {
  margin: 0;
  max-width: 346px;
  text-align: center;
  font-size: var(--font-size-16);
  line-height: var(--font-lh-16);
  color: var(--accent-foreground);
}
.story__quote--narrow { max-width: 308.651px; }
.story__person {
  display: flex;
  align-items: center;
  gap: 10.031px;
}
.story__avatar {
  width: 55.557px;
  height: 55.557px;
  border-radius: 92.595px;
  object-fit: cover;
  flex: none;
}
.story__name,
.story__role { display: block; }
.story__name {
  font-size: 12.346px;
  line-height: 18.519px;
  font-weight: var(--weight-medium);
  color: var(--accent-foreground);
}
.story__role {
  font-size: 10.803px;
  line-height: 16.204px;
  color: var(--muted-foreground);
}

/* --------------------------------------------------------------------------
   11. FAQs
   -------------------------------------------------------------------------- */
/* Top padding trimmed: stacked against the testimonials' 120px bottom it made
   a 240px gap between the two white sections. */
.faq {
  padding-block: 56px 120px;
  background: var(--background);
}
.faq__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  margin-bottom: 56px;
}
.faq__head .h-section { line-height: 60px; }
.faq__head .lede { max-width: 272px; }

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 612px;
  max-width: 100%;
  margin-inline: auto;
}
.faq__item {
  background: var(--card);
  border: 1px solid var(--input);
}
/* Padding is identical in both states so the +/− control never moves; only
   the panel below it grows. */
.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 8px 8px 8px 12px;
  text-align: left;
}
.faq__q {
  font-size: var(--font-size-16);
  line-height: var(--font-lh-16);
  font-weight: var(--weight-medium);
  color: var(--foreground);
}
.faq__icon {
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 6.667px;
  background: var(--muted);
  transition: background-color .2s ease;
}
.faq__trigger:hover .faq__icon { background: var(--input); }

/* Both glyphs are stacked in the same spot and cross-faded, so the swap
   costs no layout. */
.faq__icon .ico--20 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -10px 0 0 -10px;
  transition: opacity .2s ease, transform .28s cubic-bezier(.32, .72, 0, 1);
}
.faq__plus  { opacity: 1; transform: rotate(0deg); }
.faq__minus { opacity: 0; transform: rotate(-90deg); }
.faq__item[data-open="true"] .faq__plus  { opacity: 0; transform: rotate(90deg); }
.faq__item[data-open="true"] .faq__minus { opacity: 1; transform: rotate(0deg); }

/* 0fr → 1fr animates to the panel's natural height without measuring it in JS. */
.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .34s cubic-bezier(.32, .72, 0, 1);
}
.faq__item[data-open="true"] .faq__panel { grid-template-rows: 1fr; }
.faq__panel > div {
  overflow: hidden;
  min-height: 0;
}
.faq__a {
  max-width: 556px;   /* 532px text column + 24px horizontal padding */
  padding: 12px 12px 16px;
  font-size: var(--font-size-16);
  line-height: var(--font-lh-16);
  color: var(--muted-foreground);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .22s ease, transform .22s ease;
}
.faq__item[data-open="true"] .faq__a {
  opacity: 1;
  transform: none;
  transition-delay: .07s;
}

@media (prefers-reduced-motion: reduce) {
  .faq__panel,
  .faq__a,
  .faq__icon,
  .faq__icon .ico--20 { transition: none; }
  .how__step,
  .how__num { transition: none; }
  .how__step:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   12. Closing CTA
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  background: var(--panel-deep);
  overflow: hidden;
  padding-block: 88px;
  display: flex;
  align-items: center;
}
/* Figma: 1151px panel inset 144px left / 145px right on the 1440 frame —
   i.e. centred at 79.93% of the frame width. */
.cta__panel {
  position: relative;
  width: min(1151px, 79.93%);
  margin-inline: auto;
  padding: 56px 48px;
  background: var(--panel-deep);
  display: flex;
  flex-direction: column;
  gap: 40px;
}
/* Tile matrix across the whole band; the card sits on top of it. */
.cta__fx {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .8s ease;
}
.cta__fx[data-ready="true"] { opacity: 1; }

.cta__copy { display: flex; flex-direction: column; gap: 8px; }
.cta__title {
  max-width: 651px;
  color: #ffffff;
}
/* Held to a readable measure so the longer copy sets as 3–4 lines rather than
   running the full 1055px width of the panel. */
.cta__sub {
  max-width: 640px;
  font-size: var(--font-size-16);
  line-height: var(--font-lh-16);
  color: rgba(255, 255, 255, .96);
}
.cta__actions { display: flex; gap: 17px; }
.cta__actions .btn { width: 158px; }   /* Figma pairs these at a fixed width */

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  padding: 80px var(--gutter);
  background: var(--footer-bg);
  overflow: hidden;
  min-height: 845px;
}
.footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 119px;
}
/* flex-start, not the default stretch: an inline SVG stretched to the column
   width centres its own artwork (preserveAspectRatio), which pushed the logo
   away from the tagline's left edge. */
.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 307px;
}
.footer__logo { display: block; height: 40px; width: auto; color: #ffffff; }
.footer__tagline {
  font-size: var(--font-size-16);
  line-height: var(--font-lh-16);
  color: rgba(255, 255, 255, .8);
}
.footer__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: var(--font-size-16);
  line-height: var(--font-lh-16);
  white-space: nowrap;
}
.footer__coltitle { font-weight: var(--weight-semibold); color: #ffffff; }
.footer__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: rgba(255, 255, 255, .7);
}
.footer__links a:hover { color: #ffffff; }

.footer__bottom {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, .07);
  padding-top: 32px;
}
.footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: var(--font-size-16);
  line-height: var(--font-lh-16);
  color: rgba(255, 255, 255, .8);
}
/* Figma: 1467.99px wordmark centred on the 1240px content block (118.39%),
   so it bleeds ~14px past each edge of the 1440 frame. The glyphs are painted
   as a masked box rather than an <img> so the fill can be recoloured on hover;
   the 16% white the export carried now lives here instead. */
.footer__wordmark {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 89px;
  width: 105.077%;              /* 1302.95 of the 1240 content block */
  aspect-ratio: 1302.95 / 369;
  max-width: none;
}

@supports (mask-image: url("assets/img/wordmark-footer.svg")) or
          (-webkit-mask-image: url("assets/img/wordmark-footer.svg")) {
  .footer__wordmark {
    overflow: hidden;
    background: #ffffff;
    -webkit-mask: url("assets/img/wordmark-footer.svg") no-repeat center / 100% 100%;
            mask: url("assets/img/wordmark-footer.svg") no-repeat center / 100% 100%;
  }

  /* Brand gradient, held just off to the left so it slides into place as it
     fades up. Inset wider than the box so the travel never exposes an edge. */
  .footer__wordmark::after {
    content: "";
    position: absolute;
    inset: 0 -8%;
    background: linear-gradient(105deg,
                var(--brand) 0%, var(--brand-soft) 38%, var(--brand) 72%, #3f5cf0 100%);
    opacity: 0;
    transform: translateX(-5%);
    transition: opacity .45s ease, transform .75s cubic-bezier(.32, .72, 0, 1);
  }
  .footer__wordmark:hover::after {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer__wordmark::after { transition: opacity .01s linear; transform: none; }
}

/* --------------------------------------------------------------------------
   14. Appear transitions

   Blocks marked [data-reveal] fade and rise into place the first time they
   cross into the viewport; the ones above the fold play on load. The hidden
   start state is gated on html[data-reveal-ready], which reveal.js sets in the
   head — so if the script never runs, the page simply renders as normal.

   The offset uses the standalone `translate` property, not `transform`, so it
   composes with the transforms the cards and connectors already carry (the
   step-card hover lift, the flipped connector) instead of overwriting them.
   -------------------------------------------------------------------------- */
html[data-reveal-ready] [data-reveal] {
  opacity: 0;
  translate: 0 18px;
  transition: opacity .6s cubic-bezier(.32, .72, 0, 1),
              translate .6s cubic-bezier(.32, .72, 0, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
/* Backdrop layers and connectors fade only — moving them would break the
   geometry they are positioned into. */
html[data-reveal-ready] [data-reveal="fade"] { translate: none; }

html[data-reveal-ready] [data-reveal].is-in {
  opacity: 1;
  translate: none;
}

@media (prefers-reduced-motion: reduce) {
  html[data-reveal-ready] [data-reveal] {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   15. Responsive — the source design is a fixed 1440px desktop composition.
   Below that the gutters compress, the fixed layers (hero shot, flow diagram)
   drop into normal flow, and every multi-column grid collapses in stages.
   -------------------------------------------------------------------------- */
@media (max-width: 1439px) {
  :root { --gutter: clamp(20px, 6.94vw, 100px); }
}

/* Hero: the absolutely-placed screenshot can't survive a narrow viewport, so
   it joins the flow beneath the copy and the section sizes to its content. */
@media (max-width: 1200px) {
  .hero {
    height: auto;
    padding-bottom: 0;
  }
  /* `relative`, not `static`: a static box paints beneath the absolutely
     positioned shader canvas, which hid the screenshot entirely. */
  .hero__shot {
    position: relative;
    z-index: 1;
    left: auto;
    bottom: auto;
    width: 100%;
    margin-top: 64px;
    /* Bleed past the hero's edge so the frame's bottom border and corners are
       cropped rather than floating. The hero clips it. */
    margin-bottom: -16px;
  }
  .hero__shot img { border-width: 6px; border-radius: 18px; }

  .how__flow {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }
  .how__step {
    position: static !important;
    width: 100%;
    max-width: 480px;
  }
  .how__step > div { width: 100%; }
  .how__link { display: none; }
}

@media (max-width: 1000px) {
  .features__head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .features__grid { grid-template-columns: 1fr; }
  /* Source order is text,img / img,text / text,img. Reorder so each card reads
     image-then-copy, rather than `order:-1` hoisting all three images first. */
  .features__grid > :nth-child(1) { order: 2; }
  .features__grid > :nth-child(2) { order: 1; }
  .features__grid > :nth-child(3) { order: 3; }
  .features__grid > :nth-child(4) { order: 4; }
  .features__grid > :nth-child(5) { order: 6; }
  .features__grid > :nth-child(6) { order: 5; }
  .more__grid { grid-template-columns: 1fr; }
  .more__card { margin-right: 0; margin-bottom: -1px; }
  .stories__grid { grid-template-columns: 1fr; }
  .story { margin-right: 0; margin-bottom: -1px; }
  .why__panel { width: 100%; padding: 40px 16px; }
  .cta__panel { width: calc(100% - 32px); padding: 40px 24px; }
}

/* Below this the desktop nav is replaced by a disclosure menu. */
@media (max-width: 860px) {
  .nav { padding: 16px var(--gutter); }
  .nav__list,
  .nav > .nav__right > .btn { display: none; }

  .nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: inherit;
    border: 1px solid currentColor;
    border-radius: var(--radius-8);
    opacity: .8;
  }

  .nav[data-open="true"] .nav__list {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 20px;
    background: var(--background);
    color: var(--foreground);
    border-bottom: 1px solid var(--border-light);
  }
  .nav[data-open="true"] .nav__list .nav__link { justify-content: flex-start; padding: 12px; }

  .hero { padding-top: 76px; }
  .hero__head { padding-top: 56px; }
  .hero__title  { font-size: clamp(30px, 6.4vw, 44px); line-height: 1.12; }
  .hero__break  { display: none; }   /* let the headline reflow naturally */
  .hero__body   { font-size: 17px; line-height: 26px; margin-top: 20px; }
  .hero__actions { margin-top: 28px; }
  .hero__shot { margin-top: 48px; }

  .h-section { font-size: clamp(26px, 5.4vw, 34px); line-height: 1.2; }
  .features__head .h-section,
  .faq__head .h-section { line-height: 1.2; }

  .features, .more, .stories, .faq { padding-block: 72px; }
  .how { padding-block: 72px; }
  .how__head { margin-bottom: 56px; }
  .why { padding-block: 64px; min-height: 0; }
  .cta { padding-block: 64px; }

  .features__copy { padding: 24px; }
  .features__cell { min-height: 0; }

  .footer { padding-block: 56px; min-height: 0; }
  .footer__top { flex-direction: column; gap: 40px; margin-bottom: 56px; }
  .footer__wordmark { position: static; transform: none; width: 100%; margin-top: 48px; }
  .footer__legal { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Phones: single-column everything, and the comparison table wraps its cells
   rather than shrinking the type. */
@media (max-width: 620px) {
  /* Side by side, but sized to their labels — flexing them to equal widths
     squeezed the text against the pill edges. */
  .hero__actions,
  .cta__actions { gap: 10px; flex-wrap: wrap; }
  .hero__actions .btn,
  .cta__actions .btn {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    padding-inline: 20px;
  }

  /* Too narrow to wrap legibly — let the table keep its real widths and scroll. */
  .cmp {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .cmp__head,
  .cmp__body { min-width: 660px; }

  .story { padding: 28px 20px; }
  .faq__q { font-size: 15px; }
  .faq__list { width: 100%; }

  .how__step { padding: 16px; border-radius: var(--radius-16); }
  .how__steptitle { font-size: 18px; line-height: 24px; }
  .how__num { font-size: 30px; }

  .features__list li { line-height: 30px; }
}

/* Touch devices get no hover state on the footer wordmark. */
@media (hover: none) {
  .footer__wordmark::after { display: none; }
}