/* ==========================================================================
   Flexlio Website — Stylesheet

   PROVENANCE (corrected 01.08.26): this file was previously commented as
   "built from DESIGN_TOKENS.md", which is not accurate. DESIGN_TOKENS.md
   describes the FIGMA PLUGIN PANEL and most of its values do not appear
   here (see below). Some brand values are shared; the scales are not.

   Shared with the plugin : #131313 background · #00EFCA mint · #2a2a2a
                            raised surface · 12px card radius
   WEBSITE-only, not in    : Sora + Hanken Grotesk faces · 8px spacing base
   the plugin token file     (plugin is 4px) · display type up to 80px
                             (plugin caps at 24px) · section rhythm tokens
                             (plugin's largest step is 24px) · five
                             breakpoints (plugin has exactly one, at 600px)

   The website token set is being written separately as
   WEBSITE_DESIGN_TOKENS.md. Until it exists, THIS BLOCK is the record.
   Do not hardcode new values inline — add a token.
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { min-height: 100vh; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; }

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

/* ---------- Design Tokens ---------- */
:root {
  /* Color — pulled from Figma get_design_context (nodes 209:371, 209:83) */
  --bg: #131313;
  --bg-raised: #1A1A1A;
  --pill-bg: #2A2A2A;
  --border: #222222;
  --border-strong: #3A3A3A;
  --mint: #00EFCA;
  --mint-eyebrow-text: #B7FFEA;
  --text-primary: #E5E2E1;
  --text-secondary: #B9CAC4;
  --text-muted: #6B6B6B;
  --text-on-mint: #0D0D0D;
  --text-on-mint-button: #006857;

  /* Type */
  --font-display: 'Sora', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-hanken: 'Hanken Grotesk', sans-serif;

  --h1: clamp(2.5rem, 5.5vw + 1rem, 5rem);
  --h2: clamp(2rem, 5.2vw, 4.5rem);
  --h3: clamp(1.15rem, 1vw + 1rem, 1.375rem);
  --body-lg: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
  --body: 1rem;
  --small: 0.8125rem;

  /* Spacing (8px base) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  /* Layout */
  --nav-h: 74px;   /* 16 + 40 logo + 17 + 1px border — panel top hangs off this */
  --container-max: 1200px;
  --gutter: 1.5rem;
  --radius-card: 12px;
  --radius-image: 16px;
  --radius-pill: 999px;

  /* ---- Section rhythm (WEBSITE scale — approved 01.08.26) ----
     Three steps, no fourth. Every section uses --section-y unless it is a
     hero / final CTA (--section-y-lg) or a band that continues the one
     above it (--section-y-sm). Fluid, so no breakpoint has to redefine them.
     NOTE: this is deliberately NOT the plugin's spacing scale. The plugin
     panel's largest step is 24px; a marketing page needs section-level
     space an order of magnitude larger. Different surface, different scale. */
  --section-y:    clamp(64px,  9vw, 120px);
  --section-y-lg: clamp(88px, 12vw, 168px);
  --section-y-sm: clamp(40px,  6vw,  72px);
}

@media (max-width: 640px) {
  :root { --gutter: 1rem; }
}

/* ---------- Base ---------- */
body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }

p { color: var(--text-secondary); font-size: var(--body-lg); line-height: 1.5; }

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Sections: gap between two sections' content = 1x --section-y (each side
   contributes half), and no divider line. Approved 01.08.26 (option b):
   "remove the lines and close the gap to where the line sat". */
section { padding-block: calc(var(--section-y) / 2); border-top: none; }

/* Sections carrying their own background colour keep FULL padding: here the
   padding is what DRAWS the coloured block, so halving it would shrink the
   panel rather than close a gap. */
.section--raised,
.solution-section { padding-block: var(--section-y); }
.hero { border-top: none; } /* first section, sits under nav's own border instead */


/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Eyebrow / label ---------- */
/* Eyebrow pill: JetBrains Mono, per Figma node 209:85/86 (real values —
   this font family was completely missing from the build before) */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
  color: var(--mint-eyebrow-text);
}
.eyebrow--pill {
  background: var(--pill-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 7px 17px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.6px;
  line-height: 12px;
  color: var(--mint-eyebrow-text);
}

/* Tier badge ("FREELANCER AND ABOVE" etc.) — sampled directly from the
   supplied asset (Overlay_Border-freelancer-above.png): translucent mint
   fill (~8% opacity) and mint border (~35% opacity), not the neutral
   eyebrow-pill fill. Confirmed by pixel sampling, not guessed. */
.tier-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.6px;
  line-height: 12px;
  padding: 7px 17px;
  border-radius: var(--radius-pill);
  color: var(--mint-eyebrow-text);
  background: rgba(0, 239, 202, 0.08);
  border: 1px solid rgba(0, 239, 202, 0.35);
  white-space: nowrap;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.75rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  white-space: nowrap;
  transition: transform 0.15s ease, opacity 0.15s ease;
  border: 1px solid transparent;
}
.btn:hover { transform: translateY(-1px); }

.btn--primary {
  background: var(--mint);
  color: var(--text-on-mint);
}
.btn--primary:hover { opacity: 0.9; }

/* Hero primary CTA — real values from Figma node 209:92/93: NOT a pill,
   12px radius, larger padding, 20px bold text. Corrected after an earlier
   pass wrongly assumed pill-shape to match the footer CTA button. */
.btn--hero-primary {
  background: var(--mint);
  color: var(--text-on-mint-button);
  border-radius: 12px;
  padding: 16px 40px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.2px;
}
.btn--hero-primary:hover { opacity: 0.9; }

.btn--ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.btn--ghost:hover { border-color: var(--mint); color: var(--mint); }

.btn--outline-mint {
  background: transparent;
  border-color: var(--mint);
  color: var(--mint);
}

.btn--dark {
  background: var(--text-on-mint);
  color: var(--mint);
}

/* Nav CTA — pulled directly from Figma get_design_context (node 209:388):
   bg #00EFCA, radius 8px, padding 10px/24px, text #006857 Inter Bold 14px */
.btn--nav {
  background: var(--mint);
  color: var(--text-on-mint-button);
  border-radius: 8px;
  padding: 10px 24px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 21px;
}
.btn--nav:hover { opacity: 0.9; }

/* ---------- Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(19, 19, 19, 0.8);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 63.99px 17px 64px;
}
.nav__group {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav__logo img { height: 40px; width: auto; display: block; }
.nav__links {
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav__links a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  color: var(--text-secondary);
  transition: color 0.15s ease;
}
.nav__links a:hover { color: var(--mint); }
.nav__links a.is-current {
  position: relative;
  color: var(--text-primary);
  font-weight: 700;
  padding-bottom: 4px;
}
.nav__links a.is-current::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--mint);
  border-radius: 1px;
}
.nav__links a[aria-disabled="true"] {
  color: var(--text-muted);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.soon-tag {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.5rem;
}

.nav__toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  padding: 0.5rem;
}
.nav__toggle svg { width: 24px; height: 24px; }

/* Mobile-menu-only CTA — hidden by default, only shown inside the
   collapsed mobile nav (fixes desktop showing two CTAs at once) */
.nav__cta-mobile { display: none; }

@media (max-width: 1024px) {
  /* THE BUG (fixed 01.08.26): .site-header carried backdrop-filter: blur().
     A filtered element becomes the containing block for any position:fixed
     descendant — so the menu was being sized against the ~73px header
     instead of the viewport, collapsing to a sliver that showed one link
     and a scrollbar. Dropping the blur on mobile restores the viewport as
     the containing block. Solid background replaces it; desktop keeps the
     blur, where the menu is not fixed and nothing breaks. */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg);
  }

  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 0 0;
    background: var(--bg);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    padding: var(--space-4) var(--gutter) var(--space-6);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav__links.is-open { transform: translateX(0); }

  /* Full-width rows, comfortably tappable (48px floor, WCAG 2.5.5) */
  .nav__links a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 4px;
    font-size: 18px;
    line-height: 1.3;
    border-bottom: 1px solid var(--border);
  }
  .nav__links a.is-current { padding-bottom: 0; }
  .nav__links a.is-current::after { display: none; }
  .nav__links a.is-current { color: var(--mint); }

  .nav__toggle { display: block; }
  .nav__cta { display: none; }
  .nav__links a.nav__cta-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    margin-top: var(--space-4);
    border-bottom: none;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-on-mint);
  }

  /* Burger turns into a close cross while the menu is open, so there is an
     obvious way out. Driven by aria-expanded, which the script already sets. */
  .nav__toggle svg { transition: transform 0.25s ease; }
  .nav__toggle svg line { transition: transform 0.25s ease, opacity 0.15s ease;
                          transform-origin: 12px 12px; }
  .nav__toggle[aria-expanded="true"] svg line:nth-child(1) { transform: rotate(45deg) translateY(6px); }
  .nav__toggle[aria-expanded="true"] svg line:nth-child(2) { opacity: 0; }
  .nav__toggle[aria-expanded="true"] svg line:nth-child(3) { transform: rotate(-45deg) translateY(-6px); }

  /* Toggle must sit above the panel so it stays reachable */
  .nav__toggle { position: relative; z-index: 2; }
}

/* Page must not scroll behind an open menu */
body.nav-open { overflow: hidden; }

/* ---------- Hero ---------- */
/* Structure matches Figma node 209:83: flex column, 22.8px base gap between
   blocks, plus each block's own top padding on top of that gap. */
.hero {
  padding-top: calc(var(--section-y-lg) / 2);
  padding-bottom: calc(var(--section-y) / 2);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0,239,202,0.08) 0%, rgba(0,239,202,0) 70%);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
.hero__eyebrow { margin-bottom: 22.8px; }
.hero h1 {
  max-width: 950px;
  margin-inline: auto;
  margin-bottom: 22.8px;
  font-size: var(--h1);
  line-height: 0.94;
  letter-spacing: -0.024em;
}
.hero h1 .accent { color: var(--mint); }
.hero__sub {
  max-width: 672px;
  margin: 0 auto 22.8px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.hero__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 22.8px;
}
.hero__actions .btn--ghost-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--text-primary);
  transition: color 0.15s ease;
}
.hero__actions .btn--ghost-link:hover { color: var(--mint); }
.hero__actions .btn--ghost-link svg { width: 16px; height: 16px; }
.hero__note {
  font-size: 14px;
  color: rgba(185, 202, 196, 0.6);
}

.hero__showcase {
  margin-top: 57.2px;
  border-radius: var(--radius-image);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
}
.hero__showcase img { width: 100%; display: block; }

/* Subpage hero (e.g. Features) — same eyebrow/h1/sub treatment, no CTA
   row, no showcase image, so less bottom padding is needed before the
   next section starts. MEASURED OFF SCREENSHOT — no Figma node available
   this session for this page; revisit on a real QC pass. */
.hero--page { padding-bottom: calc(var(--section-y) / 2); }
.hero--page .hero__sub { margin-bottom: 0; }

/* Modifier for hero headlines longer than the homepage's — the shared
   .hero h1 max-width (950px) was measured correct for the homepage's
   own two-line headline, but forces an unwanted extra wrap on longer
   phrases like the About page's. Widens without touching that shared,
   already-verified value. */
.hero--wide h1 { max-width: 1180px; }

/* ---------- Numbered feature list (section 2) ---------- */
/* Cards were missing background/border entirely — real values from
   Figma node 209:8 (get_design_context): rgba(20,20,20,0.8) bg, 1px #222
   border, 12px radius, 33px padding, backdrop-blur. */
.numbered-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 64px;
}
.numbered-item {
  background: rgba(20, 20, 20, 0.8);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 33px;
  min-width: 0;
}
.numbered-item .num {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--mint);
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.2px;
  margin-bottom: 16px;
  display: block;
}
.numbered-item h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.numbered-item p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 21px;
  color: var(--text-secondary);
}

@media (max-width: 1024px) {
  .numbered-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .numbered-grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* Section heading pattern */
.section-heading {
  text-align: center;
  max-width: 1120px;
  margin-inline: auto;
}
.section-heading h2 .accent { color: var(--mint); }

/* Problem section heading — 80px like others, but a narrower max-width
   (measured off a real screenshot: widest line 845px) so it wraps to
   3 centered lines instead of 2, matching the confirmed real layout.
   Earlier build had this wrongly left-aligned based on a blurry low-res
   reference; corrected against a clean screenshot. */
.section-heading--problem {
  max-width: 950px;
}
.section-heading--problem h2 {
  font-size: 80px;
  line-height: 1.05;
  letter-spacing: -0.008em;
}
@media (max-width: 900px) {
  .section-heading--problem h2 { font-size: clamp(2.25rem, 6vw, 3.5rem); }
}

/* ---------- Icon feature row (section 3) ---------- */
.solution-section {
  background: #0E0E0E;
  padding-block: var(--section-y);
}
.icon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 80px;
}
.icon-card {
  min-width: 0;
}
.icon-card .icon {
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-3);
}
.icon-card h3 {
  font-family: var(--font-hanken);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.2px;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.icon-card p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 21px;
  color: var(--text-secondary);
}

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

/* ---------- Live Sync split section ---------- */
/* min-width:0 on both children is required here — without it, the large
   plugin screenshot's intrinsic size can force this grid wider than its
   container, which was pushing/overlapping the section below it. */
.split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: center;
}
.split-section > * { min-width: 0; }
.split-section .copy .eyebrow { margin-bottom: var(--space-2); display: block; }
.split-section .copy h2 {
  font-size: 32px;
  line-height: 38.4px;
  letter-spacing: -0.64px;
  margin-bottom: var(--space-3);
}
.split-section .copy h2 .accent { color: var(--mint); display: block; }
.split-section .copy p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 25.6px;
  color: var(--text-secondary);
}

.check-list { display: flex; flex-direction: column; gap: 16px; margin-top: var(--space-4); }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 21px;
}
.check-list .tick {
  flex-shrink: 0;
  width: 20px; height: 20px;
  display: block;
  margin-top: 2px;
}

.split-section .media img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}
.split-section .media {
  background: rgba(20, 20, 20, 0.8);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 17px;
  box-shadow: 0px 20px 25px -5px rgba(0,0,0,0.1), 0px 8px 10px -6px rgba(0,0,0,0.1);
}

@media (max-width: 900px) {
  .split-section { grid-template-columns: 1fr; gap: var(--space-5); }
  .split-section .media { order: -1; }
}

/* ---------- Platform strip (static) ---------- */
/* Reverted from animated ticker per explicit direction — static row.
   Gap measured directly off a real screenshot: 84px between items,
   centered. Font from earlier Figma pull: Inter Bold 20px #e5e2e1,
   row at 50% opacity. */
.platform-strip {
  padding-block: 33px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.platform-strip__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 84px;
  row-gap: var(--space-2);
  opacity: 0.5;
}
.platform-strip__list li {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.2px;
  color: var(--text-primary);
}

/* ---------- Engineered for Creative Scale (dark cards) ---------- */
.section--raised { background: #201F1F; }
.modern-teams-section { background: #1C1B1B; }
.feature-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 24px;
  row-gap: 56px;
  margin-top: var(--space-6);
}
.feature-card {
  padding: 25px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #141414;
  min-width: 0;
}
.feature-card .card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: 8px;
}
.feature-card h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary);
  margin-bottom: 0;
}
.feature-card p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 21px;
  color: var(--text-secondary);
}
/* Real spec positions this absolutely (top:16/right:16) — kept as a
   flex row instead since the absolute version is what overlapped long
   headings like "Media-plan import" in the live screenshot. Colors,
   font, and radius match the real badge exactly; only the positioning
   method differs, and that's a deliberate fix, not a guess. */
.feature-card .lock-tag {
  flex-shrink: 0;
  display: block;
  height: 22px;
  width: auto;
}
.feature-card .tier-caption {
  display: block;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 16.5px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(183, 255, 234, 0.5);
  font-weight: 400;
}

@media (max-width: 1024px) {
  .feature-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .feature-cards { grid-template-columns: 1fr; row-gap: 28px; }
}

/* ---------- Features page: feature block heading ---------- */
/* Left-aligned section heading with a short mint underline mark, first
   used on the Features page. MEASURED OFF SCREENSHOT — no Figma node
   available this session (connection only returned a title/cover page);
   flag for a real QC pass once reconnected. */
.feature-block__title {
  font-size: clamp(1.75rem, 2.2vw + 1.25rem, 2.75rem);
  line-height: 1.15;
  max-width: 900px;
  margin-bottom: 0;
}
.feature-block__title::after {
  content: '';
  display: block;
  width: 88px;
  height: 4px;
  background: var(--mint);
  border-radius: 2px;
  margin-top: 20px;
}

/* ---------- Features page: bento grid (section 2) ---------- */
/* Reuses the .feature-card visual language (border, radius, #141414 fill)
   already established for bordered cards elsewhere on the site, at a
   larger scale for this showcase grid. Layout: 3 columns, the first card
   spans 2 columns x 2 rows; the other five sit one per cell. MEASURED OFF
   SCREENSHOT, NOT FIGMA-VERIFIED. */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
/* Grid-placement + size modifier only — visual treatment (border, radius,
   #141414 fill) now comes from the shared .feature-card base class,
   already applied alongside this one in the markup. Was duplicating those
   three declarations here before; consolidated per PO instruction to
   reuse shared components rather than recreate them. */
.bento-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 40px;
}
.bento-card__icon {
  display: block;
  margin-bottom: var(--space-3);
}
.bento-card h3 {
  font-size: 22px;
  line-height: 1.3;
  margin-bottom: var(--space-2);
}
.bento-card p { font-size: 16px; line-height: 1.5; margin-bottom: 0; }

.bento-card--master { grid-column: 1 / 3; grid-row: 1 / 3; }
.bento-card--speed { grid-column: 3; grid-row: 1; }
.bento-card--ratio { grid-column: 3; grid-row: 2; }
.bento-card--crop { grid-column: 1; grid-row: 3; }
.bento-card--blank { grid-column: 2; grid-row: 3; }
.bento-card--platform { grid-column: 3; grid-row: 3; }

.bento-card--master h3 { font-size: 32px; margin-bottom: var(--space-3); }
.bento-card--master p { max-width: 640px; margin-bottom: var(--space-4); }
.bento-card--master .bento-card__media {
  margin-top: auto;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
}
.bento-card--master .bento-card__media img { width: 100%; display: block; }

@media (max-width: 1024px) {
  .bento-grid { grid-template-columns: 1fr 1fr; }
  .bento-card--master { grid-column: 1 / 3; grid-row: 1; }
  .bento-card--speed { grid-column: 1; grid-row: 2; }
  .bento-card--ratio { grid-column: 2; grid-row: 2; }
  .bento-card--crop { grid-column: 1; grid-row: 3; }
  .bento-card--blank { grid-column: 2; grid-row: 3; }
  .bento-card--platform { grid-column: 1 / 3; grid-row: 4; }
}
@media (max-width: 640px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-card--master, .bento-card--speed, .bento-card--ratio,
  .bento-card--crop, .bento-card--blank, .bento-card--platform {
    grid-column: 1;
    grid-row: auto;
  }
  .bento-card { padding: var(--space-4); }
}

/* ---------- Features page: section 3 (sync + safe zones) ---------- */
/* MEASURED OFF SCREENSHOT, NOT FIGMA-VERIFIED — same standing flag as the
   bento grid above. */
.fsync-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: start;
}
.fsync-copy h2 {
  font-size: clamp(1.75rem, 2.2vw + 1.25rem, 2.75rem);
  line-height: 1.15;
  margin-bottom: var(--space-5);
}
.fsync-feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.fsync-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.fsync-feature-list .icon {
  flex-shrink: 0;
  margin-top: 4px;
}
.fsync-feature-list h3 {
  font-family: var(--font-hanken);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.2px;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.fsync-feature-list p { font-size: 16px; line-height: 1.5; margin-bottom: 0; }

/* Pull-quote box — corrected against the supplied Blockquote.png asset by
   direct pixel sampling: solid #141414 fill, 1px mint border on 3 sides,
   3px solid mint border on the left, ~16px radius, soft drop shadow.
   Replaces the earlier glow/flourish approximation. */
.fsync-quote {
  position: relative;
  padding: 48px 56px;
  background: #141414;
  border: 1px solid var(--mint);
  border-left-width: 3px;
  border-radius: 16px;
  box-shadow: 0px 20px 25px -5px rgba(0,0,0,0.25), 0px 8px 10px -6px rgba(0,0,0,0.15);
}
.fsync-quote p {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 0;
}

.fsync-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
/* Padding-only modifier — visual treatment now comes from the shared
   .feature-card base class applied alongside this one. */
.fsync-card {
  padding: 40px;
  min-width: 0;
}
/* Qualified with .fsync-card to outrank .feature-card h3 (0,1,1) — a
   bare .fsync-card__title (0,1,0) was losing that specificity fight,
   which is why this heading was rendering at the compact feature-card
   size (16px) instead of its own 28px. Found via screenshot comparison. */
.fsync-card .fsync-card__title {
  font-size: 28px;
  line-height: 1.2;
  margin-bottom: var(--space-4);
}
.fsync-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.fsync-card__head .fsync-card__title { margin-bottom: 0; }

.fsync-inline-feature {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.fsync-inline-feature h4 {
  font-family: var(--font-hanken);
  font-weight: 700;
  font-size: 18px;
  color: var(--text-primary);
}
.fsync-card > p { font-size: 16px; line-height: 1.5; margin-bottom: 0; }

.fsync-inset {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--bg);
}
.fsync-inset .icon--warning { flex-shrink: 0; margin-top: 4px; }
.fsync-inset h4 {
  font-family: var(--font-hanken);
  font-weight: 700;
  font-size: 18px;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.fsync-inset p { font-size: 15px; line-height: 1.5; margin-bottom: 0; }

@media (max-width: 1024px) {
  .fsync-top { grid-template-columns: 1fr; gap: var(--space-5); }
  .fsync-cards { grid-template-columns: 1fr; }
}

/* ---------- Features page: section 4 (studio panel) ---------- */
/* MEASURED OFF SCREENSHOT, NOT FIGMA-VERIFIED — same standing flag as
   sections 2 and 3 above. */
.studio-panel {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 64px 72px;
}
.studio-panel__badge {
  position: absolute;
  top: 40px;
  right: 40px;
}
.studio-panel__title {
  font-size: clamp(2.25rem, 3.2vw + 1.5rem, 4.25rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  max-width: 1000px;
  margin-bottom: var(--space-6);
}
.studio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-6);
  row-gap: var(--space-5);
  max-width: 1000px;
}
.studio-item h3 {
  font-family: var(--font-hanken);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.3;
  color: var(--mint);
  margin-bottom: var(--space-2);
}
.studio-item p { font-size: 16px; line-height: 1.5; margin-bottom: 0; }

.studio-panel__note {
  margin-top: var(--space-7);
  padding: 24px 32px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
}
.studio-panel__note p {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .studio-panel { padding: 48px 32px; }
  .studio-panel__badge { position: static; display: inline-block; margin-bottom: var(--space-4); }
  .studio-grid { grid-template-columns: 1fr; }
}

/* ---------- Features page: section 5 (privacy cards) ---------- */
/* MEASURED OFF SCREENSHOT, NOT FIGMA-VERIFIED — same standing flag as
   sections 2-4 above. */
.privacy-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
/* Larger radius + padding modifier — border/background now come from the
   shared .feature-card base class applied alongside this one. */
.privacy-card {
  padding: 56px 64px;
  border-radius: 20px;
  min-width: 0;
}
.privacy-card h2 {
  font-size: clamp(1.75rem, 2.2vw + 1.25rem, 2.75rem);
  line-height: 1.15;
  margin-bottom: var(--space-4);
}
.privacy-card p { font-size: 16px; line-height: 1.6; margin-bottom: var(--space-4); }
.privacy-card__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.privacy-card__tag span {
  font-family: var(--font-hanken);
  font-weight: 700;
  font-size: 16px;
  color: var(--mint);
}
.privacy-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--mint);
  text-decoration: underline;
  text-underline-offset: 6px;
}
.privacy-card__link svg { width: 16px; height: 16px; }
.privacy-card__link:hover { opacity: 0.85; }

@media (max-width: 900px) {
  .privacy-cards { grid-template-columns: 1fr; }
  .privacy-card { padding: 40px 32px; }
}

/* ---------- Features page: section 6 (feature matrix table) ---------- */
/* MEASURED OFF SCREENSHOT, NOT FIGMA-VERIFIED — same standing flag as
   sections 2-5 above. */
.matrix-table-wrap {
  margin-top: var(--space-7);
  overflow-x: auto;
}
.matrix-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}
.matrix-table th, .matrix-table td {
  padding: 24px 16px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.matrix-table th:first-child, .matrix-table td:first-child {
  text-align: left;
  white-space: normal;
}
.matrix-table thead th {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  color: var(--text-primary);
  vertical-align: top;
}
.matrix-table thead th.matrix-table__capability {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-secondary);
  vertical-align: bottom;
}
.matrix-table thead th.matrix-table__highlight { color: var(--mint); }
.matrix-table__price {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-secondary);
  margin-top: 6px;
}
.matrix-table tbody td:first-child {
  font-size: 16px;
  color: var(--text-primary);
}
.matrix-table tbody td {
  font-size: 15px;
  color: var(--text-secondary);
}
.matrix-table .tick { display: inline-block; }
.matrix-table .dash { color: var(--text-muted); font-size: 18px; }

@media (max-width: 640px) {
  .matrix-table-wrap { margin-top: var(--space-5); }
}

/* ---------- Fast Setup page: Before You Start card ---------- */
/* MEASURED OFF SCREENSHOT, NOT FIGMA-VERIFIED — same standing flag used
   throughout the Features page build. */
.start-card { padding: 40px; }
.start-card h2 {
  font-family: var(--font-hanken);
  font-weight: 700;
  font-size: 22px;
  color: var(--mint);
  margin-bottom: var(--space-2);
}
.start-card p { font-size: 16px; line-height: 1.6; margin-bottom: 0; }

/* ---------- Fast Setup page: numbered step timeline ---------- */
.setup-steps { position: relative; }
.setup-steps::before {
  content: '';
  position: absolute;
  left: 29px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--border-strong);
  z-index: 0;
}
.setup-step {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--space-5);
  padding-bottom: var(--space-8);
}
.setup-step:last-child { padding-bottom: 0; }
.setup-step__marker { flex-shrink: 0; }
.setup-step__marker img { display: block; }
.setup-step__content { min-width: 0; flex: 1; }
.setup-step__content h2 {
  font-size: clamp(1.5rem, 1.4vw + 1.1rem, 2rem);
  line-height: 1.25;
  margin-bottom: var(--space-3);
}
.setup-step__content p { font-size: 16px; line-height: 1.6; margin-bottom: var(--space-3); }
.setup-step__content p:last-of-type { margin-bottom: 0; }
.setup-step__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--mint);
}
.setup-step__link svg { width: 16px; height: 16px; }
.setup-step__link:hover { opacity: 0.85; }

@media (max-width: 640px) {
  .setup-steps::before { left: 21px; }
  .setup-step { gap: var(--space-3); }
  .setup-step__marker img { width: 44px; height: 44px; }
}

/* ---------- Fast Setup page: Select Sizes UI mockup (decorative) ---------- */
.mockup-panel {
  margin-top: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #101010;
}
.mockup-panel__tabs {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 14px 20px;
  background: #1B1B1B;
  border-bottom: 1px solid var(--border);
}
.mockup-panel__tab {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}
.mockup-panel__tab--active { color: var(--mint-eyebrow-text); }
.mockup-panel__close {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
}
.mockup-panel__body { padding: 24px; }
.mockup-panel__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.mockup-panel__row h3 { font-size: 18px; }
.mockup-panel__select-all {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}
.mockup-chip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.mockup-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
  background: #161616;
}
.mockup-chip--checked {
  border-color: var(--mint);
  background: rgba(0, 239, 202, 0.06);
  color: var(--text-primary);
}
.mockup-chip__box {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
}
.mockup-chip__box--checked {
  background: var(--mint);
  border-color: var(--mint);
  color: var(--text-on-mint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mockup-chip__box--checked svg { width: 10px; height: 10px; }
.mockup-chip--custom { color: var(--text-muted); border-style: dashed; }
.mockup-chip__plus { color: var(--text-muted); font-size: 15px; }

@media (max-width: 560px) {
  .mockup-chip-grid { grid-template-columns: 1fr; }
}

/* ---------- Fast Setup page: run log UI mockup (decorative) ---------- */
.runlog-panel {
  margin-top: var(--space-4);
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: #101010;
}
.runlog-panel__header {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.runlog-panel__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--space-3);
}
.runlog-panel__list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
}
.runlog-panel__waiting { color: var(--text-muted); }
.runlog-tag {
  flex-shrink: 0;
  width: 42px;
  font-weight: 700;
}
.runlog-tag--done { color: var(--mint-eyebrow-text); }
.runlog-tag--run { color: var(--mint-eyebrow-text); }
.runlog-tag--wait { color: var(--text-muted); }
.runlog-time { margin-left: auto; color: var(--text-muted); }
.runlog-panel__progress {
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}
.runlog-panel__progress-fill {
  width: 65%;
  height: 100%;
  background: var(--mint);
  border-radius: 2px;
}

/* ---------- Fast Setup page: What's Next ---------- */
/* .next-section__divider — REMOVED 01.08.26. The <section> already draws
   its own border-top, so this hr produced a second line below it (Fast
   Setup only). Rule kept, unused, in case the standalone divider is
   wanted somewhere without a section border. */
.next-section__divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0 0 var(--space-6);
}
.next-section__title { font-size: 28px; margin-bottom: var(--space-5); }
.next-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.next-tile { padding: 24px; display: block; transition: border-color 0.15s ease; }
.next-tile:hover { border-color: var(--border-strong); }
.next-tile__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.next-tile p { font-size: 16px; line-height: 1.5; color: var(--text-primary); margin-bottom: 0; }

@media (max-width: 900px) {
  .next-tiles { grid-template-columns: 1fr; }
}

/* ---------- Pricing page: plan-header row + highlight column ---------- */
/* MEASURED OFF SCREENSHOT, NOT FIGMA-VERIFIED — same standing flag as the
   Features/Fast Setup pages. Reuses .matrix-table as its base; only the
   plan-header content, Studio-column framing, buttons and trust row
   below are new. */
/* Gap above the plan table halved on PO request 01.08.26.
   FOUR things were stacking, not two — the biggest was .matrix-table-wrap's
   96px top margin, which the first pass missed:
     hero padding-bottom  ~120px  (shared with other pages, left alone)
   + section padding-top   120px  -> 60px
   + .matrix-table-wrap     96px  -> 0 (section padding already spaces it;
                                        scoped so the Features matrix keeps its margin)
   + thead cell padding     32px  -> 16px
   ~368px -> ~196px. */
.pricing-table-section { padding-top: calc(var(--section-y) / 2); padding-bottom: 0; }
.pricing-table-section .matrix-table-wrap { margin-top: 0; }
.pricing-table thead th { vertical-align: top; padding-top: 16px; }
.pricing-table__plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.pricing-table__name {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  color: var(--text-primary);
}
.pricing-table__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  color: var(--text-primary);
}
.pricing-table__period {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  color: var(--text-secondary);
}
.pricing-table__meta {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
  margin-top: -4px;
}
.pricing-recommended-badge {
  display: inline-block;
  background: var(--mint);
  color: var(--text-on-mint);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 4px;
}
.pricing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 4px;
  padding: 10px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap;
}
.pricing-btn:hover { border-color: var(--mint); }
.pricing-btn--solid {
  background: var(--mint);
  border-color: var(--mint);
  color: var(--text-on-mint);
}
.pricing-btn--solid:hover { opacity: 0.9; }

/* Studio column framing — mint border wrapping the whole column, rounded
   top on the header cell and bottom on the last row's cell. */
.pricing-table__highlight-col {
  border-left: 1px solid var(--mint) !important;
  border-right: 1px solid var(--mint) !important;
  background: rgba(0, 239, 202, 0.03);
}
.pricing-table thead .pricing-table__highlight-col {
  border-top: 3px solid var(--mint) !important;
  border-radius: 12px 12px 0 0;
}
.pricing-table__last-row .pricing-table__highlight-col {
  border-bottom: 1px solid var(--mint) !important;
  border-radius: 0 0 12px 12px;
}

.pricing-trust-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-top: calc(var(--section-y) / 2);
}
.pricing-trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
}
.pricing-trust-row .icon { flex-shrink: 0; display: block; }

.pricing-fine-print {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-top: var(--space-4);
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .pricing-trust-row { gap: var(--space-3); flex-direction: column; align-items: flex-start; }
}

/* ---------- Pricing page: plan detail cards (For / Includes) ---------- */
/* MEASURED OFF SCREENSHOT, NOT FIGMA-VERIFIED — same standing flag as the
   rest of this page. Reuses .feature-card as its base. */
.plan-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
.plan-card {
  display: flex;
  flex-direction: column;
  padding: 32px;
  min-width: 0;
}
.plan-card--highlight { border-color: rgba(0, 239, 202, 0.35); }
.plan-card__name {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mint-eyebrow-text);
  margin-bottom: var(--space-4);
}
.plan-card__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 6px;
  margin-top: var(--space-3);
}
.plan-card__label:first-of-type { margin-top: 0; }
.plan-card p { font-size: 16px; line-height: 1.6; margin-bottom: 0; }
.plan-card__divider {
  border: none;
  border-top: 1px solid var(--border);
  width: 100%;
  margin-top: auto;
  margin-bottom: var(--space-4);
}
.plan-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--mint-eyebrow-text);
}
.plan-card__link svg { width: 16px; height: 16px; }
.plan-card__link:hover { opacity: 0.85; }

@media (max-width: 1024px) {
  .plan-cards-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .plan-cards-grid { grid-template-columns: 1fr; }
}

/* ---------- Pricing page: Need sign-off? (procurement proposal) ---------- */
/* MEASURED OFF SCREENSHOT, NOT FIGMA-VERIFIED — same standing flag as the
   rest of this page. Outer panel reuses the border/radius/fill language
   already used for large panels (.studio-panel) at a bigger radius. */
.signoff-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 64px;
}
.signoff-copy h2 {
  font-size: clamp(2.5rem, 4vw + 1rem, 4.5rem);
  line-height: 1.05;
  margin-top: var(--space-3);
  margin-bottom: 0;
}
.signoff-copy__subheading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  line-height: 1.15;
  color: var(--text-primary);
  margin-top: var(--space-3);
  margin-bottom: var(--space-4);
}
.signoff-copy > p:last-child { font-size: 18px; line-height: 1.6; margin-bottom: 0; }

.proposal-preview {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: #141414;
  padding: 28px;
}
.proposal-preview__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.proposal-preview__label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--text-muted);
}
.proposal-preview__copy-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}
.proposal-preview__copy-btn img { display: block; }
.proposal-preview__divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 20px 0 24px;
}
.proposal-preview__body p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}
.proposal-preview__body p:last-child { margin-bottom: 0; }
.proposal-preview__body strong { color: var(--text-primary); font-weight: 700; }

@media (max-width: 900px) {
  .signoff-panel { grid-template-columns: 1fr; padding: 40px 32px; gap: var(--space-5); }
}

/* ---------- Pricing page: Are you a Founding Team? ---------- */
/* MEASURED OFF SCREENSHOT, NOT FIGMA-VERIFIED — same standing flag as the
   rest of this page. Reuses the hero's radial-glow technique for the
   background rather than inventing a new gradient approach. */
.founding-panel {
  position: relative;
  overflow: hidden;
  text-align: center;
  border: 1px solid rgba(0, 239, 202, 0.25);
  border-radius: 24px;
  padding: 80px 40px;
}
.founding-panel::before {
  content: '';
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(0, 239, 202, 0.1) 0%, rgba(0, 239, 202, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
.founding-panel > * { position: relative; z-index: 1; }
.founding-panel h2 {
  font-size: clamp(2.5rem, 4vw + 1rem, 4.5rem);
  line-height: 1.05;
  margin-bottom: var(--space-4);
}
.founding-panel p {
  font-size: 18px;
  color: var(--text-secondary);
  max-width: 720px;
  margin: 0 auto var(--space-5);
}
.btn--light {
  display: inline-flex;
  padding: 16px 32px;
  border-radius: 12px;
  background: var(--text-primary);
  color: var(--bg);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
}
.btn--light:hover { opacity: 0.9; }

/* ---------- Pricing page: FAQ accordion ---------- */
/* MEASURED OFF SCREENSHOT, NOT FIGMA-VERIFIED — same standing flag as the
   rest of this page. Real interactive behaviour, see js/main.js. */
.faq-section__title {
  text-align: center;
  font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem);
  margin-bottom: var(--space-6);
}
.faq-group { max-width: 900px; margin: 0 auto var(--space-6); }
.faq-group__title {
  position: relative;
  font-size: 20px;
  padding-left: 16px;
  margin-bottom: var(--space-4);
}
.faq-group__title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 2px;
  background: var(--mint);
}
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: #141414;
  margin-bottom: var(--space-3);
  transition: border-color 0.15s ease;
}
.faq-item.is-open { border-color: rgba(0, 239, 202, 0.3); }
.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: 22px 28px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--text-primary);
  cursor: pointer;
}
.faq-item__icon { flex-shrink: 0; }
.faq-item__icon--up { display: none; }
.faq-item.is-open .faq-item__icon--down { display: none; }
.faq-item.is-open .faq-item__icon--up { display: block; }
.faq-item__answer {
  display: none;
  padding: 0 28px 24px;
}
.faq-item.is-open .faq-item__answer { display: block; }
.faq-item__answer p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 0;
}

/* ---------- About page: hero stat cards + LinkedIn link ---------- */
/* MEASURED OFF SCREENSHOT, NOT FIGMA-VERIFIED — same standing flag used
   throughout the Features/Fast Setup/Pricing pages. */
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  max-width: 1152px;
  margin: var(--space-6) auto 0;
}
.stat-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: #141414;
  padding: 32px 24px;
  text-align: center;
}
.stat-card__icon { display: block; margin: 0 auto 16px; }
.stat-card p {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 0;
}
.about-linkedin-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.8px;
  color: var(--mint-eyebrow-text);
}
.about-linkedin-link svg { width: 14px; height: 14px; }
.about-linkedin-link:hover { opacity: 0.85; }

@media (max-width: 900px) {
  .about-stats { grid-template-columns: 1fr; }
}

/* ---------- About page: The problem seen from the inside ---------- */
/* MEASURED OFF SCREENSHOT, NOT FIGMA-VERIFIED — same standing flag used
   throughout. */
.founder-story {
  display: grid;
  grid-template-columns: 393px 1fr;
  gap: var(--space-6);
  align-items: center;
}
.founder-story__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 8px;
}
.founder-story__copy h2 {
  color: var(--mint);
  font-size: clamp(1.75rem, 2.2vw + 1.25rem, 2.75rem);
  line-height: 1.15;
  margin-bottom: var(--space-4);
}
.founder-story__copy p { font-size: 17px; line-height: 1.6; margin-bottom: var(--space-3); max-width: 640px; }
.founder-story__copy p:last-child { margin-bottom: 0; }

@media (max-width: 800px) {
  .founder-story { grid-template-columns: 1fr; }
  .founder-story__photo { max-width: 320px; }
}

/* ---------- About page: What that actually costs ---------- */
/* MEASURED OFF SCREENSHOT, NOT FIGMA-VERIFIED — same standing flag used
   throughout. Reuses the radial-glow panel technique already established
   (hero, founding-panel), with a neutral tint instead of mint to match
   this section's more muted look. */
.cost-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 80px 72px;
}
.cost-panel::before {
  content: '';
  position: absolute;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 500px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
.cost-panel > * { position: relative; z-index: 1; }
.cost-panel__title {
  text-align: center;
  font-size: clamp(2.5rem, 4vw + 1rem, 4rem);
  line-height: 1.05;
  margin-bottom: var(--space-4);
}
.cost-panel__lede {
  text-align: center;
  font-size: 20px;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 780px;
  margin: 0 auto var(--space-7);
}
.cost-panel__body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 900px;
  margin: 0 0 var(--space-6);
}
.cost-panel__inset {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 32px 40px;
  margin-bottom: var(--space-6);
  max-width: 900px;
}
.cost-panel__inset p { font-size: 17px; line-height: 1.7; color: var(--text-secondary); margin-bottom: 0; }
.cost-panel__callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 900px;
}
.cost-panel__callout img { flex-shrink: 0; margin-top: 2px; }
.cost-panel__callout p { font-size: 17px; line-height: 1.7; color: var(--text-secondary); margin-bottom: 0; }

@media (max-width: 800px) {
  .cost-panel { padding: 48px 32px; }
}

/* ---------- About page: Why I built Flexlio ---------- */
/* MEASURED OFF SCREENSHOT, NOT FIGMA-VERIFIED — same standing flag used
   throughout. Reuses the same bordered-panel language as .cost-panel,
   without the radial glow since none was visible in this section. */
.built-panel {
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 80px 72px;
}
.built-panel__title {
  color: var(--mint);
  font-size: clamp(2rem, 2.6vw + 1.25rem, 3rem);
  margin-bottom: var(--space-6);
}
.built-panel__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: center;
}
.built-panel__copy p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
}
.built-panel__copy p:last-child { margin-bottom: 0; }
.built-panel__media img { display: block; width: 100%; }

@media (max-width: 900px) {
  .built-panel { padding: 48px 32px; }
  .built-panel__grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .built-panel__media { order: -1; }
}

/* ---------- About page: checklist sections (What it does/doesn't do) ---------- */
/* MEASURED OFF SCREENSHOT, NOT FIGMA-VERIFIED — same standing flag used
   throughout. */
.about-checklist-section { text-align: center; }
.about-checklist-section--gives-back { margin-top: var(--space-2); }
.about-checklist__badge { display: block; margin: 0 auto var(--space-4); }
.about-checklist__title {
  font-size: clamp(2.25rem, 3.2vw + 1.25rem, 3.5rem);
  line-height: 1.1;
  margin-bottom: var(--space-6);
}
.about-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}
.about-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 28px 32px;
  border-radius: var(--radius-card);
  background: #1A1A1A;
}
.about-checklist__icon { flex-shrink: 0; margin-top: 3px; }
.about-checklist__item p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 0;
}
.about-checklist__item p strong { color: var(--text-primary); font-weight: 700; }

/* ---------- About page: closing quote / CTA panel ---------- */
.about-quote-panel {
  position: relative;
  overflow: hidden;
  text-align: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 64px 40px;
}
.about-quote-panel::before {
  content: '';
  position: absolute;
  top: -140px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 239, 202, 0.08) 0%, rgba(0, 239, 202, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
.about-quote-panel > * { position: relative; z-index: 1; }
.about-quote-panel__mark { display: block; margin: 0 auto var(--space-3); }
.about-quote-panel__quote { margin: 0 0 var(--space-5); }
.about-quote-panel__quote p {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 2.6vw + 1rem, 2.75rem);
  line-height: 1.25;
  max-width: 960px;
  margin: 0 auto;
}
.about-quote-panel__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------- Legal document pages (Terms, Privacy, Refund) ---------- */
/* MEASURED OFF SCREENSHOT, NOT FIGMA-VERIFIED — same standing flag used
   throughout. */
.legal-doc {
  max-width: 800px;
  padding-block: var(--section-y);
}
.legal-doc h1 {
  font-size: clamp(2rem, 3vw + 1rem, 3rem);
  margin-bottom: var(--space-2);
}
.legal-doc__updated {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: var(--space-6);
}
.legal-doc__section { margin-bottom: var(--space-5); }
.legal-doc__section h3 { font-size: 20px; margin-bottom: var(--space-2); }
.legal-doc__section p { font-size: 16px; line-height: 1.7; color: var(--text-secondary); margin-bottom: 0; }

.legal-doc__updated--iconed {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.legal-doc__updated--iconed img { display: block; }
.legal-doc__updated--plain { text-transform: none; letter-spacing: normal; }
.legal-doc__divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-5) 0 var(--space-5);
}
.legal-doc__section p + p { margin-top: var(--space-3); }
.legal-doc__section strong { color: var(--text-primary); font-weight: 700; }
.legal-doc a { color: var(--mint-eyebrow-text); }

.legal-doc__section-title--accent { color: var(--mint); }
.legal-doc__dash-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.legal-doc__dash-list li {
  position: relative;
  padding-left: 24px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.legal-doc__dash-list li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--mint);
}

/* ---------- Support page ---------- */
/* MEASURED OFF SCREENSHOT, NOT FIGMA-VERIFIED — same standing flag used
   throughout. Left-aligned page header, distinct from the shared
   centered .hero component. */
.support-header { padding-top: calc(var(--section-y) / 2); padding-bottom: var(--section-y-sm); }
.support-header h1 {
  max-width: 900px;
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: clamp(2rem, 3vw + 1rem, 3rem);
  line-height: 1.15;
}
.support-header__sub {
  max-width: 78ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 0;
}

.support-grid-section { padding-top: 0; }
.support-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-4);
  align-items: start;
}

.support-main-card { padding: 40px; }
.support-main-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.support-main-card__icon { flex-shrink: 0; border-radius: 8px; }
.support-main-card__head h3 { font-size: 22px; margin-bottom: 8px; }
.support-main-card__head p { font-size: 16px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 0; }

.support-subcard {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  margin-bottom: var(--space-3);
}
.support-subcard img { flex-shrink: 0; margin-top: 3px; }
.support-subcard h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.support-subcard p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 0; }

.support-main-card__divider { border: none; border-top: 1px solid var(--border); margin: var(--space-3) 0 var(--space-4); }
.support-main-card__note { font-size: 15px; color: var(--text-secondary); margin-bottom: 0; }
.support-main-card__note em { font-style: italic; }

.support-side { display: flex; flex-direction: column; gap: var(--space-4); }

.support-contact-card { padding: 32px; }
.support-contact-card__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}
.support-field { margin-bottom: var(--space-3); }
.support-field__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--mint-eyebrow-text);
  margin-bottom: 6px;
}
.support-field__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.support-field__value { font-size: 17px; color: var(--text-primary); word-break: break-all; }
.support-field__value--strong { font-family: var(--font-hanken); font-weight: 700; font-size: 18px; }
.support-field--underline { padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.support-copy-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 4px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 0;
}
.support-copy-btn svg { width: 15px; height: 15px; }
.support-copy-btn:hover { color: var(--text-primary); }
.support-copy-btn.is-copied { color: var(--mint); }
/* Confirmation state for the Pricing proposal copy button — without this
   the button copies silently and reads as broken. */
.proposal-preview__copy-btn.is-copied { opacity: 0.55; }
.support-contact-card__divider { border: none; border-top: 1px solid var(--border); margin: var(--space-4) 0 var(--space-3); }
.support-contact-card p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 0; }

.support-billing-card {
  padding: 32px;
  border-radius: var(--radius-card);
  background: #1A1A1A;
}
.support-billing-card__label {
  display: block;
  font-size: 16px;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}
.support-billing-card p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin-bottom: var(--space-4); }
.support-billing-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
}
.support-billing-card__link svg { width: 14px; height: 14px; }
.support-billing-card__link:hover { color: var(--text-primary); }

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

/* ---------- 404 page ---------- */
/* MEASURED OFF SCREENSHOT, NOT FIGMA-VERIFIED — same standing flag used
   throughout. */
.error-404 {
  text-align: center;
  padding-block: var(--section-y);
}
.error-404__code {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 6vw + 1rem, 5.5rem);
  line-height: 1;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.error-404 h1 {
  font-size: clamp(2.25rem, 4vw + 1rem, 4rem);
  line-height: 1.1;
  margin-bottom: var(--space-4);
}
.error-404__sub {
  font-size: 18px;
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 auto var(--space-6);
}
.error-404__panel {
  position: relative;
  overflow: hidden;
  max-width: 620px;
  margin: 0 auto var(--space-6);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 40px;
}
.error-404__panel::before {
  content: '';
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 239, 202, 0.08) 0%, rgba(0, 239, 202, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
.error-404__panel > * { position: relative; z-index: 1; }
.error-404__panel-intro {
  font-size: 16px;
  color: var(--text-secondary);
  max-width: 460px;
  margin: 0 auto var(--space-4);
}
.error-404__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.error-404__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 16px;
  color: var(--text-primary);
}
.error-404__link img { flex-shrink: 0; }
.error-404__link:hover { border-color: var(--mint); }
.error-404__cta { display: inline-flex; }
.error-404__cta svg { width: 16px; height: 16px; }

@media (max-width: 560px) {
  .error-404__links { grid-template-columns: 1fr; }
}

/* ---------- Resources page: light theme override ---------- */
/* This is the ONLY page on the site with a light theme — scoped entirely
   to body.page-light so nothing else is affected. Overrides the shared
   color tokens; most components already read these via var(), so this
   cascades correctly. Components with hardcoded dark hex values (rather
   than tokens) get explicit overrides below where they're actually used
   on this page. MEASURED OFF SCREENSHOT, NOT FIGMA-VERIFIED. */
body.page-light {
  --bg: #FFFFFF;
  --bg-raised: #FAFAFA;
  --pill-bg: #F0F0F0;
  --border: #E5E5E5;
  --border-strong: #D0D0D0;
  --mint-eyebrow-text: #006B59;
  --text-primary: #111111;
  --text-secondary: #333333;
  --text-muted: #6B6B6B;
  background: var(--bg);
  color: var(--text-primary);
}
body.page-light .site-header {
  background: rgba(255, 255, 255, 0.85);
  border-bottom-color: var(--border);
}
/* BUG FIX: CSS custom properties inherit to all descendants, so the
   light-theme override above was silently reaching the footer too,
   making it render light-themed instead of matching the standard dark
   footer used on every other page. Reset back to the real defaults,
   scoped to the footer only. */
body.page-light .site-footer {
  --bg: #131313;
  --bg-raised: #1A1A1A;
  --pill-bg: #2A2A2A;
  --border: #222222;
  --border-strong: #3A3A3A;
  --mint-eyebrow-text: #B7FFEA;
  --text-primary: #E5E2E1;
  --text-secondary: #B9CAC4;
  --text-muted: #6B6B6B;
  background: var(--bg);
  color: var(--text-primary);
}

.resources-header { padding-top: calc(var(--section-y) / 2); padding-bottom: var(--section-y-sm); }
.resources-header__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}
.resources-header h1 {
  font-size: clamp(2rem, 3.2vw + 1rem, 3.25rem);
  line-height: 1.15;
  max-width: 1100px;
  color: var(--text-primary);
}

.resources-grid-section { padding-top: 0; padding-bottom: calc(var(--section-y) / 2); }
.resources-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-4);
  align-items: start;
}
.resources-col { display: flex; flex-direction: column; gap: var(--space-4); }
.resources-panel {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px;
}
.resources-panel h2 {
  color: var(--text-primary);
  font-size: 28px;
  margin-bottom: var(--space-3);
}
.resources-panel > p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}
.resources-panel > p:last-child { margin-bottom: 0; }

.resources-table-wrap { overflow-x: auto; margin-bottom: var(--space-4); }
.resources-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.resources-table th, .resources-table td {
  text-align: left;
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.resources-table th:nth-child(1), .resources-table td:nth-child(1) { width: 18%; }
.resources-table th:nth-child(2), .resources-table td:nth-child(2) { width: 58%; }
.resources-table th:nth-child(3), .resources-table td:nth-child(3) { width: 24%; }
.resources-table thead th {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.resources-table tbody td { font-size: 15px; line-height: 1.5; color: var(--text-primary); }
.resources-table__element { color: var(--mint-eyebrow-text); font-weight: 500; }
.resources-table__code {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
}

.resources-subgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-3);
}
.resources-subgrid__item h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.resources-subgrid__item h4 img { flex-shrink: 0; }
.resources-subgrid__item p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 0; }

.resources-panel--video h2 { font-size: 26px; }
.video-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: var(--space-4);
  box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.08);
}
.video-card__thumb { display: block; width: 100%; height: auto; }
.resources-panel--video p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 0; }

.resources-panel--figma h2 { font-size: 26px; }
.resources-figma-tile {
  display: block;
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: var(--space-4);
  overflow: hidden;
  line-height: 0;
}
.resources-figma-tile img { display: block; width: 100%; height: auto; }
.resources-panel--figma__intro { font-size: 15px; color: var(--text-secondary); margin-bottom: var(--space-3) !important; }
.resources-link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.resources-link-list li { display: flex; align-items: center; gap: 10px; }
.resources-link-list img { flex-shrink: 0; }
.resources-link-list a { font-size: 15px; color: var(--text-primary); text-decoration: underline; }
.resources-link-list a:hover { color: var(--mint-eyebrow-text); }

@media (max-width: 900px) {
  .resources-grid { grid-template-columns: 1fr; }
  .resources-panel { padding: 32px 24px; }
  .resources-subgrid { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* ---------- Four steps ---------- */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
  margin-top: 80px;
}
.step { position: relative; min-width: 0; }
.step .ghost-num {
  position: absolute;
  top: 12px;
  left: -16px;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 80px;
  line-height: 120px;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
  z-index: 0;
}
.step h3 {
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.2px;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.step p {
  position: relative;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 21px;
  color: var(--text-secondary);
}
.steps-cta { text-align: center; margin-top: var(--space-5); }
.steps-cta .btn--figma-dark {
  background: #141414;
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 12px;
  padding: 13px 33px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
}
.steps-cta .btn--figma-dark:hover { border-color: var(--mint); color: var(--mint); }

@media (max-width: 900px) {
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .steps-grid { grid-template-columns: 1fr; }
}

/* ---------- Privacy statement ---------- */
/* Real design (node 209:217): left-aligned inside a bordered, blurred
   card — not centered plain text like the earlier build had. */
.privacy-section {
  background: rgba(20, 20, 20, 0.8);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 81px;
  text-align: center;
  max-width: none;
  margin-inline: 0;
  position: relative;
  overflow: hidden;
}
.privacy-section::before {
  content: '';
  position: absolute;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0,239,202,0.08) 0%, rgba(0,239,202,0) 70%);
  pointer-events: none;
  z-index: 0;
}
.privacy-section > * { position: relative; z-index: 1; }
.privacy-section .icon-badge {
  display: block;
  width: 64px; height: 64px;
  margin: 0 auto 23px;
}
.privacy-section h2 {
  font-size: 80px;
  line-height: 1;
  margin-bottom: 24px;
  max-width: 720px;
  margin-inline: auto;
}
.privacy-section p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 25.6px;
  color: var(--text-secondary);
  max-width: 950px;
  margin-inline: auto;
}
@media (max-width: 900px) {
  .privacy-section { padding: var(--space-5); }
  .privacy-section h2 { font-size: clamp(2rem, 6vw, 3.5rem); }
}

/* ---------- Testimonial (Founder Story) ---------- */
/* Real layout: photo + quote side-by-side with a large photo circle and
   an extra 100px indent — not the centered/stacked layout built earlier.
   Later removed the extra indent: it made this section start 100px
   further right than every other section on the page, breaking the
   consistent left-alignment rhythm the rest of the page uses. */
.testimonial {
  max-width: fit-content;
  margin-inline: auto;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
}
.testimonial blockquote {
  font-family: var(--font-hanken);
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.2px;
  color: var(--text-primary);
  line-height: 32.5px;
  margin-bottom: 32px;
}
.testimonial blockquote p {
  font: inherit;
  color: inherit;
}
.testimonial blockquote p + p { margin-top: var(--space-2); }
.testimonial__photo {
  width: 192px; height: 192px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(183, 255, 234, 0.2);
  padding: 2px;
  flex-shrink: 0;
}
.testimonial__quote-block { display: flex; flex-direction: column; max-width: 628px; }
.testimonial__author { display: flex; flex-direction: column; gap: 0; }
.testimonial__author .name { font-family: var(--font-body); font-weight: 700; font-size: 16px; color: var(--mint-eyebrow-text); }
.testimonial__author .role { font-family: var(--font-body); font-size: 14px; color: var(--text-secondary); }

@media (max-width: 900px) {
  .testimonial { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .testimonial__photo { width: 120px; height: 120px; }
}

/* ---------- Audience grid ---------- */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 64px;
}
.audience-grid > div {
  border-top: 1px solid var(--mint-eyebrow-text);
  padding-top: 33px;
  min-width: 0;
}
.audience-grid h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.audience-grid p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 21px;
  color: var(--text-secondary);
}

@media (max-width: 900px) {
  .audience-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .audience-grid { grid-template-columns: 1fr; }
}

/* ---------- Pricing teaser ---------- */
.pricing-teaser {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 64px;
}
.pricing-teaser h2 { font-size: 80px; margin-bottom: var(--space-2); }
.pricing-teaser__intro { font-family: var(--font-body); font-size: 16px; line-height: 25.6px; color: var(--text-secondary); max-width: 405px; }

.pricing-teaser__upgrade {
  background: #141414;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px;
}
.pricing-teaser__upgrade h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.2px;
  color: var(--text-primary);
  margin-bottom: 32px;
}
.upgrade-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 0;
  margin-bottom: 25px;
}
.upgrade-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 21px;
  color: var(--text-primary);
}
.upgrade-list li img {
  flex-shrink: 0;
  height: 20px;
  width: auto;
  display: block;
}
.pricing-teaser__upgrade .see-pricing {
  font-family: var(--font-body);
  color: var(--mint);
  font-weight: 700;
  font-size: 16px;
}

.pricing-rows {
  margin-top: 30px;
}
.pricing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 16px 0 17px;
  border-bottom: 1px solid rgba(227, 226, 224, 0.2);
}
.pricing-row .tier {
  font-family: var(--font-hanken);
  font-weight: 400;
  font-size: 16px;
  color: #F9F8F6;
  flex-shrink: 0;
}
.pricing-row .detail {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 16px;
  color: var(--mint);
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .pricing-teaser { grid-template-columns: 1fr; gap: var(--space-4); }
  .pricing-row { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
}

/* ---------- Final CTA band ---------- */
.cta-band {
  background: var(--mint);
  color: #0A0A0A;
  text-align: center;
  padding-block: var(--section-y-lg);
  padding-inline: clamp(var(--gutter), 43vw - 363px, 256px);
}
.cta-band h2 { color: #0A0A0A; font-size: 80px; }
.cta-band p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 25.6px;
  color: #0A0A0A;
  max-width: 672px;
  margin: var(--space-2) auto var(--space-4);
}
.cta-band .btn--dark {
  background: #0A0A0A;
  color: var(--mint-eyebrow-text);
  border-radius: 16px;
  padding: 20px 48px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.2px;
}
.cta-band__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.cta-band .btn--outline-dark {
  background: transparent;
  border: 1px solid #0A0A0A;
  color: #0A0A0A;
  border-radius: 16px;
  padding: 20px 48px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.2px;
}
.cta-band .btn--outline-dark:hover { background: rgba(10, 10, 10, 0.06); }
@media (max-width: 900px) {
  .cta-band h2 { font-size: clamp(2rem, 6vw, 3.5rem); }
}

/* ---------- Footer ---------- */
/* Rebuilt from Figma get_design_context (node 209:332) — real values:
   distinct footer bg (#1C1B1B, not page bg), true 4-column grid where
   Legal is its own column (not an inline row — earlier build guessed
   wrong from the flat locked-copy text listing). */
.site-footer {
  background: #1C1B1B;
  padding-block: var(--section-y) 0;
  border-top: 1px solid var(--border);
}
.footer-top {
  display: grid;
  grid-template-columns: 4fr 2fr 2fr 2fr;
  gap: 24px;
  padding-bottom: 64px;
}
.footer-brand img { height: 32px; margin-bottom: 24px; }
.footer-brand p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 21px;
  color: var(--text-secondary);
  max-width: 320px;
}
.footer-col h4 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary);
  margin-bottom: 24px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 16px; }
.footer-col a {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 21px;
  color: var(--text-secondary);
  transition: color 0.15s ease;
}
.footer-col a:hover { color: var(--mint); }

.footer-mark { text-align: center; padding-block: 0 0; }
.footer-mark img { width: 64px; margin-inline: auto; display: block; }

.footer-bottom {
  border-top: 1px solid rgba(34, 34, 34, 0.3);
  padding-top: var(--section-y-sm);
  padding-bottom: 40px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 19.5px;
  color: rgba(185, 202, 196, 0.4);
}
.footer-bottom a { color: inherit; text-decoration: underline; }
.footer-bottom a:hover { color: var(--mint); }

@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--space-4); row-gap: var(--space-5); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer-top { grid-template-columns: 1fr; }
}

/* ==========================================================================
   MOBILE PASS — 01.08.26 (PO review)
   One consolidated block, deliberately last in the file so it wins the
   cascade without needing !important. Everything here is <= 640px only;
   desktop is untouched.

   THE ALIGNMENT RULE (the "use this throughout" ask):
   Card text sits at gutter + card padding. Bare text sat at gutter alone,
   so bare sections looked closer to the edge than carded ones. Fixed by
   giving every bare-text block the same inset a card's padding provides,
   and trimming card padding to the same number. Both now land on ONE left
   edge: 16px gutter + 20px inset = 36px.
   ========================================================================== */
@media (max-width: 640px) {

  :root {
    --mobile-inset: 20px;   /* the shared inset — change here, changes everywhere */
    --mobile-gap: 28px;     /* the shared gap between stacked blocks */
  }

  /* ---- Bare-text blocks: inset to the shared left edge ---- */
  .section-heading,
  .audience-grid,
  .icon-grid,
  .testimonial,
  .split-section .copy,
  .pricing-teaser__copy,
  .steps-cta,
  .footer-top,
  .footer-bottom,
  .cta-band > * {
    padding-inline: var(--mobile-inset);
  }

  /* ---- Cards: trim padding to the same number so their text lands there too ---- */
  .numbered-item,
  .feature-card,
  .step,
  .pricing-teaser__upgrade { padding: var(--mobile-inset); }
  /* Full-bleed panel: pull it in to the gutter so its border sits where
     every other card's border sits, then inset its text to match. */
  .privacy-section {
    margin-inline: var(--gutter);
    padding: var(--space-5) var(--mobile-inset);
  }

  /* ---- Gaps between stacked blocks: all one value ---- */
  .numbered-grid,
  .icon-grid,
  .steps-grid,
  .audience-grid,
  .feature-cards { gap: var(--mobile-gap); row-gap: var(--mobile-gap); }
  .icon-grid, .steps-grid { margin-top: var(--space-5); }

  /* ---- Icon cards centred (icon, heading and body) ---- */
  .icon-card { text-align: center; }
  .icon-card .icon { margin-inline: auto; }

  /* ---- "Let's get set up": more air before the next section, matching
          the shield's own inset inside the panel below it ---- */
  .steps-cta { margin-bottom: var(--space-3); }

  /* ---- Founder quote: fit-content was letting it hug the edge ---- */
  .testimonial { max-width: 100%; }
  .testimonial__quote-block { max-width: 100%; }

  /* ---- Pricing teaser: centred, and off the hard-coded 80px ---- */
  .pricing-teaser { text-align: center; }
  .pricing-teaser h2 { font-size: clamp(2.25rem, 11vw, 3.25rem); }
  .pricing-teaser__intro { max-width: 100%; margin-inline: auto; }
  .pricing-teaser__upgrade { text-align: center; }
  .pricing-teaser__upgrade ul,
  .pricing-teaser__upgrade li { justify-content: center; }

  /* ---- Green sign-off band: bigger headline, smaller buttons that are
          still a comfortable thumb target (48px min, WCAG 2.5.5) ---- */
  .cta-band h2 { font-size: clamp(2.5rem, 10vw, 3.25rem); }
  .cta-band .btn--dark,
  .cta-band .btn--outline-dark {
    padding: 14px 32px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ==========================================================================
   MOBILE PASS — round 2 (01.08.26 PO review)
   ========================================================================== */
@media (max-width: 640px) {

  /* ---- CTA band: both buttons the same width ---- */
  .cta-band__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
  }
  .cta-band .btn--dark,
  .cta-band .btn--outline-dark {
    width: 100%;
    max-width: 320px;
    padding-inline: var(--space-2);
  }

  /* ---- Founder section fully centred ---- */
  .testimonial { align-items: center; text-align: center; }
  .testimonial__photo { margin-inline: auto; }
  .testimonial__quote-block { align-items: center; text-align: center; }
  .testimonial__author { text-align: center; }

  /* ---- Numbered steps as thin boxes, matching every other card ---- */
  .step {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: rgba(20, 20, 20, 0.6);
    overflow: hidden;          /* ghost numeral was hanging outside the box */
  }
  .step .ghost-num { left: 0; top: 42px; font-size: 64px; line-height: 84px; }

  /* ---- Footer centred: logo, blurb, columns and small print ---- */
  .site-footer { text-align: center; }
  .footer-brand img { margin-inline: auto; }
  /* The blurb has max-width: 320px. text-align: center was centring the
     WORDS inside that 320px box, but the box itself was still hugging the
     left of a much wider cell — so the paragraph sat ~95px left of the
     logo above it. Auto margins centre the box, not just its contents. */
  .footer-brand p { margin-inline: auto; }
  .footer-col ul { padding: 0; }
  .footer-bottom { text-align: center; }

  /* ---- Homepage tier rows centred ---- */
  .pricing-rows { text-align: center; }
  .pricing-row { align-items: center; }
  .pricing-row .tier,
  .pricing-row .detail { text-align: center; width: 100%; }
}

/* ==========================================================================
   MOBILE PASS — round 3: Features + Fast Setup (01.08.26 PO review)
   Same two root causes as the homepage, on new components.
   ========================================================================== */
@media (max-width: 640px) {

  /* ---- THE ALIGNMENT RULE, extended to this page's components ----
     Bare-text blocks get the shared inset; cards get it as padding.
     Both land on the same 36px left edge as the homepage. */
  .feature-block > .bento-grid,
  .fsync-top,
  .fsync-copy,
  .fsync-feature-list,
  .fsync-cards,
  .matrix-section > *,
  .setup-steps,
  .next-section,
  .resources-header,
  .support-header { padding-inline: var(--mobile-inset); }

  .bento-card,
  .studio-panel,
  .fsync-quote,
  .fsync-inset,
  .start-card,
  .resources-panel,
  .support-subcard,
  .support-billing-card { padding: var(--mobile-inset); }

  /* Headline sits inside the same inset as the grid below it */
  .feature-block__title { padding-inline: var(--mobile-inset); }

  /* ---- "Verified speed" was stretched to the tallest card ----
     grid-auto-rows: 1fr forces every row to match the tallest. Fine in a
     3-across desktop grid, wrong in a single mobile column, where it left
     a short card with a screenful of dead space below its text. */
  .bento-grid { grid-auto-rows: auto; gap: var(--mobile-gap); }
  .bento-card { height: auto; }

  /* ---- Centred headings on Features ---- */
  .feature-block__title { text-align: center; }
  /* The mint rule under the headline is a block element with a fixed 88px
     width. text-align: center does nothing to it — it needs auto margins
     to follow the headline. Anything decorative sitting under a centred
     heading has to be centred as a BOX, not as text. */
  .feature-block__title::after { margin-inline: auto; }
  .studio-panel { text-align: center; }
  .studio-panel__badge { display: inline-block; margin-inline: auto; }
  .studio-panel__title { margin-inline: auto; }
  .studio-grid, .studio-panel__note { text-align: left; }

  /* ---- Accuracy note: gap above halved ---- */
  .studio-panel__note { margin-top: calc(var(--space-7) / 2); }

  /* ---- Fast Setup ---- */
  .start-card { text-align: center; }
  .next-section__title { text-align: center; }
  /* Steps were 8rem apart at the bottom and 0 at the top — uneven and
     twice the rhythm used everywhere else. Even, and halved. */
  .setup-step { padding-bottom: var(--space-6); gap: var(--space-3); }
  .setup-step:last-child { padding-bottom: 0; }
}

/* ==========================================================================
   Comparison tables on narrow screens — INTERIM TREATMENT (01.08.26)
   A 720px-wide matrix cannot fit a phone, so it scrolls sideways. That is
   workable but weak: scroll far enough and the row labels are gone, so a
   tick no longer tells you what it is a tick FOR.

   This makes the existing scroll behave properly rather than replacing it:
     - the feature-name column pins to the left, so context never leaves
     - the scrollbar chrome is hidden (it auto-hides on touch anyway)
     - a fade on the right edge signals there is more to the side
   The structural fix (one card per plan, no sideways scroll at all) is a
   separate proposal — it needs new markup, not new CSS.
   ========================================================================== */
@media (max-width: 900px) {
  .matrix-table-wrap {
    position: relative;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .matrix-table-wrap::-webkit-scrollbar { display: none; }

  .matrix-table th:first-child,
  .matrix-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bg);
  }
  .matrix-table thead th:first-child { z-index: 2; }

  /* Right-edge fade: the affordance that replaces the visible scrollbar */
  .matrix-section,
  .pricing-table-section { position: relative; }
  .matrix-section::after,
  .pricing-table-section::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, rgba(19,19,19,0), var(--bg));
  }
}

/* ==========================================================================
   MOBILE PASS — round 4: Features detail (01.08.26 PO review)
   ========================================================================== */
@media (max-width: 640px) {

  /* Page headline was 40px on a 318px column, so a 24-character sentence
     could not hold a line. Brought down so each sentence sits whole. */
  .hero--page h1 { font-size: clamp(1.75rem, 7.5vw, 2.25rem); }

  /* ---- Tier chip stacks ABOVE the headline instead of beside it.
          Side by side, the chip was squeezing the headline into a narrow
          column and colliding with it. ---- */
  .fsync-card__head {
    flex-direction: column-reverse;   /* chip first visually, headline under */
    align-items: center;
    gap: var(--space-2);
  }
  .fsync-card__head .tier-badge { align-self: center; }

  /* ---- Centring across this section ---- */
  .fsync-quote { text-align: center; padding: var(--mobile-inset); }
  .fsync-card { text-align: center; }
  .fsync-card__title { text-align: center; }
  .fsync-inline-feature { justify-content: center; }
  .fsync-inset { text-align: left; }   /* long body copy stays ranged left */

  /* Studio panel feature list (A/B variants, naming, import, export) */
  .studio-grid { text-align: center; }
  .studio-item h3, .studio-item p { text-align: center; }

  /* ---- The two cards below: Normal Figma frames / Your work never leaves ---- */
  .privacy-card { text-align: center; }
  .privacy-card__tag,
  .privacy-card__link { justify-content: center; margin-inline: auto; }
}

/* ==========================================================================
   Button shape — consistency fix (01.08.26)
   The site has five button radii: 8px (nav), 10px (pricing), 12px (hero,
   light, figma-dark), 16px (CTA band) and a full pill on the .btn base.
   12px is the dominant shape, so the pill is the outlier — which is why
   "Talk to us" on About read as a different component. Scoped to the
   ghost variant rather than changing the .btn base, which would move
   every button on the site at once.
   ========================================================================== */
.btn--ghost { border-radius: 12px; }

/* ==========================================================================
   MOBILE PASS — round 5: Fast Setup, Pricing, About, Resources
   ========================================================================== */
@media (max-width: 640px) {

  /* ---- Fast Setup: copy centred inside the three "from here" tiles ---- */
  .next-tile { text-align: center; }

  /* ---- Pricing: sign-off card ---- */
  .signoff-copy { text-align: center; }
  .signoff-copy .eyebrow { display: inline-block; }
  /* The proposal itself stays ranged left — it is an email, and centring
     an email body makes it unreadable as an email. */
  .proposal-preview,
  .proposal-preview__body { text-align: left; }

  /* ---- About: founder photo small and centred, copy beneath centred ---- */
  .founder-story__photo { max-width: 120px; margin-inline: auto; }
  .founder-story { text-align: center; }
  .founder-story__copy p { max-width: 100%; margin-inline: auto; }

  /* ---- About: the two long passages ---- */
  .cost-panel__body { text-align: center; margin-inline: auto; }
  .built-panel__copy { text-align: center; }
  .built-panel__copy p { margin-inline: auto; }

  /* ==========================================================================
     Resources: the naming table stops being a table.
     Three fixed columns (18% / 58% / 24%) inside a ~280px column gives the
     first column about 50px — narrower than the word "Background", which is
     what was overlapping. Narrowing the middle column does not fix it:
     three columns in 280px is ~90px each, roughly ten characters. Stacked,
     each row reads top to bottom with no collision and no sideways scroll.
     ========================================================================== */
  .resources-table,
  .resources-table tbody,
  .resources-table tr,
  .resources-table td { display: block; width: 100%; }
  .resources-table thead { display: none; }
  .resources-table tr {
    border-bottom: 1px solid var(--border);
    padding-block: var(--space-3);
  }
  .resources-table td {
    border-bottom: none;
    padding: 0 0 6px 0;
  }
  .resources-table td:last-child { padding-bottom: 0; }
  .resources-table th:nth-child(1), .resources-table td:nth-child(1),
  .resources-table th:nth-child(2), .resources-table td:nth-child(2),
  .resources-table th:nth-child(3), .resources-table td:nth-child(3) { width: 100%; }
  .resources-table-wrap { overflow-x: visible; }
}

/* ==========================================================================
   MOBILE PASS — round 6 (01.08.26 PO review)
   ========================================================================== */
@media (max-width: 640px) {

  /* Founder photo up 25% (120 -> 150) */
  .founder-story__photo { max-width: 150px; }

  /* ---- Ticks centred, copy beneath, centred ----
     Features: the Live Sync list had its icon beside the text.
     Pricing: the trust row was ranged left. */
  .fsync-feature-list li {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .fsync-feature-list li > div { text-align: center; }
  .pricing-trust-row { align-items: center; text-align: center; }
  .pricing-trust-row span { justify-content: center; }

  /* ---- About: both buttons the same width, as on the green band ---- */
  .about-quote-panel__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
  }
  .about-quote-panel__actions .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  /* ==========================================================================
     Resources: stacked rows now carry their column label.
     Labels come from data-label on each cell, which repeats the table's own
     <thead> wording — no new copy was written. Label sits ABOVE its value
     rather than beside it: "WHAT FLEXLIO DOES WITH IT" is 24 characters, so
     a side column wide enough to hold it would leave ~150px for the
     description it is labelling.
     ========================================================================== */
  .resources-table td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin-bottom: 3px;
  }
  .resources-table td { padding-bottom: 12px; }
}

/* ==========================================================================
   Feature matrix — plan cards (mobile) / table (desktop)
   Exactly one of the two is visible at any width, and the hidden one is
   taken out of the accessibility tree too, so a screen reader never hears
   the same eleven capabilities twice.
   ========================================================================== */
.matrix-cards { display: none; }

@media (max-width: 640px) {
  .matrix-table-wrap { display: none; }
  .matrix-cards { display: block; margin-top: var(--space-5); }

  .matrix-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: var(--mobile-inset);
    margin-bottom: 12px;
    background: rgba(20, 20, 20, 0.6);
  }
  .matrix-card--highlight { border-color: var(--mint); }

  .matrix-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
  }
  .matrix-card__name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 20px;
    color: var(--text-primary);
  }
  .matrix-card__price {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    color: var(--mint);
    text-align: right;
  }
  .matrix-card__price small {
    display: block;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.4px;
    color: var(--text-muted);
  }

  .matrix-card__list { display: flex; flex-direction: column; gap: 8px; }
  .matrix-card__list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-secondary);
    text-align: left;
  }

  /* Included / not included, marked with a glyph rather than colour alone
     so it still reads without colour vision. */
  .matrix-card__list li.is-on::before {
    content: '✓';
    color: var(--mint);
    font-weight: 700;
    flex-shrink: 0;
  }
  .matrix-card__list li.is-off::before {
    content: '–';
    color: var(--text-muted);
    flex-shrink: 0;
  }
  .matrix-card__list li.is-off { color: var(--text-muted); }

  /* Rows that carry a value rather than a yes/no */
  .matrix-card__list li.is-value {
    justify-content: space-between;
    gap: var(--space-2);
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
  }
  .matrix-card__list li.is-value span { color: var(--text-secondary); }
  .matrix-card__list li.is-value em {
    font-style: normal;
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
  }
}

/* ==========================================================================
   Trust row — tick above its line, both centred (01.08.26)
   The tick sat inline to the left of each sentence. With the rows centred,
   every tick landed at a different x, which is what made the column look
   ragged. Stacking the tick above its own sentence puts every tick on the
   same centre line.
   ========================================================================== */
@media (max-width: 640px) {
  .pricing-trust-row { gap: var(--space-4); }
  .pricing-trust-row span {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }
}

/* Plan-card CTA (pricing page cards) */
@media (max-width: 640px) {
  .matrix-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-top: 14px;
    text-align: center;
  }
  .matrix-card--highlight .matrix-card__cta {
    background: var(--mint);
    color: var(--text-on-mint-button);
    border-color: var(--mint);
  }
}