/* ═══════════════════════════════════════════════════════════════
   FlexProtect — shared public-site styles
   ---------------------------------------------------------------
   Design language: Flex family, dark variant.
   Anchored to flexembedded.com — same navy #0A3C5D, same gold
   #D9B328, same GeistSans typography, on a dark background.

   This file is progressively extracted from home.html as we
   redesign section-by-section. Order of contents:
     1. Design tokens (:root vars)
     2. Layout helpers
     3. .site-nav — the shared header (partial: public/_nav.html)
        3a. Desktop layout
        3b. Dropdown menu (About)
        3c. Hamburger toggle
        3d. Tablet + mobile drawer
     4. .btn family — the shared buttons
   ═══════════════════════════════════════════════════════════════ */

/* iOS Safari font boosting inflated blocks unpredictably (hero text
   rendered ~30% larger on real iPhones than authored, wrapping lines
   and distorting the break. fracture). Render exactly what the CSS
   says on every device. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body { overflow-x: hidden; }

/* ── 0. Fonts — self-hosted, preloaded ────────────────────────── */
/* Variable woff2 shipped from our own origin (app/static/fonts/,
   from the official `geist` npm package, OFL license). Both
   templates <link rel="preload"> these files, so they are fetched
   with the document and ready at first paint. font-display: block
   means text NEVER flashes in a fallback face: the same pixels on
   every load, every page, every refresh. */
@font-face {
  font-family: 'Geist';
  src: url('/static/fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/static/fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

/* ── 1. Design tokens ─────────────────────────────────────────── */
:root {
  /* Ink (text on dark surfaces) */
  --ink:       #FFFFFF;
  --ink-2:     rgba(255, 255, 255, 0.72);
  --ink-3:     rgba(255, 255, 255, 0.55);
  --ink-4:     rgba(255, 255, 255, 0.28);

  /* Flex brand colors — shared with flexembedded.com */
  --navy:      #0A3C5D;    /* Flex family primary navy */
  --navy-deep: #0A1D2C;    /* dark background variant of navy */
  --gold:      #D9B328;    /* Flex family primary accent (gold) */
  --gold-2:    #FCD34D;    /* Flex family bright yellow (pills) */
  --cream:     #FAF7F1;    /* Flex family cream (light bg on siblings) */

  /* Surfaces */
  --site-bg:   var(--navy-deep);
  --surface:   rgba(255, 255, 255, 0.03);
  --line:      rgba(255, 255, 255, 0.08);
  --line-gold: rgba(217, 179, 40, 0.18);

  /* Type — matches flexembedded.com */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --wrap-max:    1240px;
  --wrap-pad:    40px;
  --wrap-pad-sm: 20px;
}

/* Shared chrome — identical on every page so the viewport width
   (and therefore the nav position) never shifts between pages. */
html { scroll-behavior: smooth; }
::selection { background: rgba(217, 179, 40, 0.28); }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--navy-deep); }
::-webkit-scrollbar-thumb { background: var(--navy); }

/* ── 2. Layout helpers ────────────────────────────────────────── */
.wrap-narrow {
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--wrap-pad);
}
@media (max-width: 768px) {
  .wrap-narrow { padding-inline: var(--wrap-pad-sm); }
}

/* ═══════════════════════════════════════════════════════════════
   3. Shared site nav — partial: app/templates/public/_nav.html
   =============================================================== */

/* 3a. Desktop layout (≥ 861px is the "full nav" mode) ─────────── */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10000;
  padding: 18px 0;
  /* Fully opaque and constant: the header is identical on every page,
     regardless of what scrolls beneath it. No blur, no scroll state. */
  background: var(--navy-deep);
  border-bottom: 1px solid var(--line-gold);
  -webkit-font-smoothing: antialiased;
}

.site-nav__inner {
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--wrap-pad);
  display: flex;
  align-items: flex-end;                       /* bottoms align with the wordmark */
  gap: 48px;
}
@media (max-width: 768px) {
  .site-nav__inner { padding-inline: var(--wrap-pad-sm); gap: 20px; }
}

.site-nav__logo { display: block; flex-shrink: 0; }
.site-nav__logo img { display: block; height: 46px; width: auto; }

.site-nav__drawer {
  display: flex;
  align-items: flex-end;
  gap: 48px;
  flex: 1;                                     /* wrapper takes the remaining row space */
}

.site-nav__links {
  display: flex;
  align-items: baseline;
  gap: 28px;
  list-style: none;
  margin: 0 0 -6px;                            /* link baseline onto the wordmark baseline (= logo bottom edge) */
  padding: 0;
  flex: 1;                                     /* pushes utility to the right */
}
.site-nav__links > li { list-style: none; position: relative; }

.site-nav__links a,
.site-nav__dropdown-trigger {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-3);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s;
}
.site-nav__links a:hover,
.site-nav__dropdown-trigger:hover,
.site-nav__dropdown.is-open .site-nav__dropdown-trigger { color: var(--ink); }

.site-nav__external { display: inline-flex; align-items: center; gap: 4px; }

.site-nav__utility {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}
.site-nav__merchant {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
}
.site-nav__merchant:hover { color: var(--ink); }

/* 3b. Dropdown menu (About) ─────────────────────────────────── */
.site-nav__dropdown { position: relative; }
.site-nav__dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.site-nav__caret { transition: transform 0.2s ease; }
.site-nav__dropdown.is-open .site-nav__caret { transform: rotate(180deg); }

.site-nav__dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -14px;
  min-width: 220px;
  background: rgba(10, 29, 44, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--line-gold);
  border-radius: 8px;
  padding: 8px;
  list-style: none;
  margin: 0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s 0.18s;
}
.site-nav__dropdown.is-open .site-nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.site-nav__dropdown-menu li { list-style: none; }
.site-nav__dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.site-nav__dropdown-menu a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
}

/* 3c. Hamburger toggle (hidden on desktop) ─────────────────── */
.site-nav__toggle {
  display: none;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 10px 9px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: border-color 0.2s, background 0.2s;
  margin-left: auto;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}
.site-nav__toggle:hover { border-color: rgba(255, 255, 255, 0.3); }
.site-nav__toggle-bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 0.25s cubic-bezier(.4,0,.2,1), opacity 0.15s;
}
.site-nav.is-open .site-nav__toggle-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.site-nav.is-open .site-nav__toggle-bar:nth-child(2) { opacity: 0; }
.site-nav.is-open .site-nav__toggle-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* 3d. Tablet + mobile drawer (≤ 860px) ─────────────────────── */
@media (max-width: 860px) {
  .site-nav__toggle {
    display: inline-flex;
    position: relative;
    z-index: 10002;                            /* stay tappable above the open drawer (10001) */
  }
  .site-nav__inner { gap: 0; justify-content: space-between; }

  /* Drawer becomes a fixed slide-in panel from the right. */
  .site-nav__drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 88vw);
    background: rgba(5, 11, 20, 0.98);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-left: 1px solid var(--line-gold);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 100px 24px 32px;
    gap: 32px;
    transform: translateX(100%);
    /* visibility flips after the slide-out finishes; while closed the
       drawer is fully hidden, not just off-screen. iOS Safari counts
       transformed off-viewport fixed layers in its scroll canvas,
       which showed up as a tall blank void after the footer. Hidden
       layers are excluded (and closed-drawer links can't be tabbed). */
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(.4,0,.2,1), visibility 0s 0.3s;
    z-index: 10001;                            /* above the fixed nav bar */
    overflow-y: auto;
    flex: 0 0 auto;
  }
  .site-nav.is-open .site-nav__drawer {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.3s cubic-bezier(.4,0,.2,1);
  }

  /* Links become a vertical stack. */
  .site-nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    flex: 0 0 auto;
  }
  .site-nav__links > li { border-bottom: 1px solid var(--line); }
  .site-nav__links > li:first-child { border-top: 1px solid var(--line); }
  .site-nav__links a,
  .site-nav__dropdown-trigger {
    display: flex;
    padding: 18px 4px;
    font-size: 16px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }

  /* Dropdown becomes an inline accordion (no popover). */
  .site-nav__dropdown-menu {
    position: static;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0 0 8px 16px;
    box-shadow: none;
    opacity: 1;
    visibility: hidden;
    transform: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease, visibility 0s 0.2s;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .site-nav__dropdown.is-open .site-nav__dropdown-menu {
    max-height: 240px;
    visibility: visible;
    transition: max-height 0.25s ease;
  }
  .site-nav__dropdown-menu a {
    padding: 12px 4px;
    font-size: 15px;
    border-radius: 0;
  }
  .site-nav__dropdown-menu a:hover {
    background: none;
    color: var(--ink);
  }

  /* Utility area (Merchant sign in + CTA) stacks vertically at the bottom. */
  .site-nav__utility {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid var(--line);
  }
  .site-nav__utility .btn {
    justify-content: center;
    padding: 14px 20px;
    font-size: 14px;
    width: 100%;
  }
  .site-nav__merchant {
    padding: 6px 4px;
    justify-content: flex-start;
    font-size: 15px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   4. Buttons — Flex family
   ---------------------------------------------------------------
   These class names (.btn, .btn-accent, .btn-ghost, .btn-sm) are
   inherited from the old inline styles so existing React callsites
   keep working; the *values* here are Flex-family (6px radius,
   sentence case, GeistSans, no letter-spacing, no uppercase).
   =============================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}

.btn-accent {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
}
.btn-accent:hover {
  background: #E8C33F;
  border-color: #E8C33F;
  box-shadow: 0 0 24px rgba(217, 179, 40, 0.35);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.20);
}
.btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.40);
}

.btn-sm {
  font-size: 13px;
  padding: 8px 16px;
}

/* ═══════════════════════════════════════════════════════════════
   5. Shared layout wrapper (used by the shared partials)
   =============================================================== */
.wrap {
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--wrap-pad);
}
@media (max-width: 768px) {
  .wrap { padding-inline: var(--wrap-pad-sm); }
}

/* ═══════════════════════════════════════════════════════════════
   6. Closing band — partial: app/templates/public/_footer.html
   =============================================================== */
.closing {
  position: relative;
  padding: 96px 0 104px;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(ellipse 60% 70% at 50% 100%, rgba(217, 179, 40, 0.10) 0%, transparent 70%),
    linear-gradient(180deg, transparent 0%, rgba(10, 60, 93, 0.18) 100%);
  text-align: center;
}
.closing__inner { max-width: 760px; }
.closing__eyebrow {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--gold);
  margin-bottom: 18px;
}
.closing__title {
  font-family: var(--font-sans);
  font-size: clamp(40px, 5.2vw, 72px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 22px;
}
.closing__accent { color: var(--gold); }
.closing__lead {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 600px;
  margin: 0 auto 36px;
}
.closing__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════
   7. Site footer — partial: app/templates/public/_footer.html
   =============================================================== */
.site-footer {
  -webkit-font-smoothing: antialiased;
  border-top: 1px solid var(--line);
  padding: 64px 0 40px;
  font-family: var(--font-sans);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line);
}
.site-footer__brand img { display: block; height: 32px; width: auto; margin-bottom: 16px; }
.site-footer__brand p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 300px;
}
.site-footer__col h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 16px;
}
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.site-footer__col a {
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.2s;
}
.site-footer__col a:hover { color: var(--ink); }
.site-footer__legal {
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.site-footer__legal p {
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-4);
  margin: 0;
}
.site-footer__legal p:first-child { max-width: 560px; }
@media (max-width: 860px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .closing { padding: 72px 0 80px; }
}

/* ═══════════════════════════════════════════════════════════════
   8. Fractured "break." — hero headline + closing band
   =============================================================== */
/* "break." — outlined word literally fractured into three shifted pieces */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.break-word {
  position: relative;
  display: inline-block;
  /* room for the displaced pieces so they don't clip against neighbors */
  padding-right: 0.06em;
  padding-bottom: 0.06em;
}
.break-piece {
  -webkit-text-stroke: 2px var(--ink);
  color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.break-piece--1 {
  clip-path: polygon(0 -10%, 40% -10%, 28% 110%, 0 110%);
}
.break-piece--2 {
  position: absolute;
  inset: 0;
  clip-path: polygon(40% -10%, 70% -10%, 58% 110%, 28% 110%);
  /* px, not em: the closing band's fracture is the reference look.
     em offsets grew with the hero's larger type and made the top
     "break." read messier than the bottom one. Same pixels for both. */
  transform: translate(1.4px, -4px) rotate(-0.6deg);
}
.break-piece--3 {
  position: absolute;
  inset: 0;
  clip-path: polygon(70% -10%, 110% -10%, 110% 110%, 58% 110%);
  transform: translate(3.2px, 5px) rotate(0.9deg);
}


/* ═══════════════════════════════════════════════════════════════
   9. Content pages — base: app/templates/public/_base.html
   =============================================================== */
*, *::before, *::after { box-sizing: border-box; }
body.page {
  margin: 0;
  background: var(--site-bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.page__main a:not([class*="btn"]) { color: var(--gold); text-decoration: none; }
.page__main a:not([class*="btn"]):hover { text-decoration: underline; }
.page__main { padding: 0 0 96px; }
.content-reading { max-width: 860px; }

/* Page hero band — home-style backdrop behind every page header */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 176px 0 56px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 56px;
}
.page-hero__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 72% 10%, rgba(217, 179, 40, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 70% at 15% 90%, rgba(10, 60, 93, 0.45) 0%, transparent 70%);
}
.page-hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(217, 179, 40, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 179, 40, 0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.page-hero .wrap { position: relative; z-index: 2; }

/* Page header — mirrors the home page's eyebrow + headline voice */
.page-header { margin-bottom: 0; }
.page-header__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 16px;
}
.accent { color: var(--gold); }
.page-header__title {
  font-size: clamp(36px, 4.4vw, 60px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 16px;
}
.page-header__intro {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 680px;
  margin: 0;
}
.page-header__meta {
  font-size: 13px;
  color: var(--ink-3);
  margin: 14px 0 0;
}

/* Prose (policies, terms) */
.prose > h2 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 52px 0 16px;
  scroll-margin-top: 110px;
}
.prose > h2::after {
  content: '';
  display: block;
  width: 36px;
  height: 2px;
  border-radius: 1px;
  background: var(--gold);
  margin-top: 10px;
}
.prose h3 { font-size: 16px; font-weight: 600; color: var(--ink); margin: 26px 0 10px; }
.prose p, .prose li { font-size: 15.5px; line-height: 1.75; color: var(--ink-2); }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 18px 22px; padding: 0; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }

.callout {
  border: 1px solid rgba(217,179,40,.35);
  background: rgba(217,179,40,.06);
  border-radius: 10px;
  padding: 18px 20px;
  margin: 0 0 40px;
}
.callout p { font-size: 14.5px; margin: 0; }
.callout p + p { margin-top: 10px; }
.form-id { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); margin: 0 0 28px; }

.toc { border: 1px solid var(--line); border-radius: 10px; padding: 22px 24px; margin: 0 0 24px; }
.toc h2 { font-size: 13px; font-weight: 600; color: var(--gold); margin: 0 0 14px; padding: 0; border: 0; }
.toc ol { list-style: none; counter-reset: toc; column-count: 2; column-gap: 32px; margin: 0; padding: 0; }
.toc li { counter-increment: toc; font-size: 14px; padding: 4px 0; break-inside: avoid; margin: 0; }
.toc li::before { content: counter(toc) ". "; color: var(--ink-3); font-family: var(--font-mono); font-size: 12px; }
.toc a { color: var(--ink-2); }
.toc a:hover { color: var(--ink); text-decoration: none; }
@media (max-width: 640px) { .toc ol { column-count: 1; } }

/* FAQ accordion */
.faq-section { margin-bottom: 40px; }
.faq-section > h2 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 14px;
  scroll-margin-top: 110px;
}
.faq-section > h2::after {
  content: '';
  display: block;
  width: 36px;
  height: 2px;
  border-radius: 1px;
  background: var(--gold);
  margin-top: 10px;
}
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  background: none;
  border: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  padding: 20px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  transition: color 0.2s;
}
.faq-q:hover { color: var(--gold); }
.faq-toggle {
  width: 26px; height: 26px; flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1;
  color: var(--gold);
  transition: transform 0.25s ease, background 0.2s;
}
.faq-item.open .faq-toggle { transform: rotate(45deg); background: rgba(217,179,40,.12); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.25s ease;
}
.faq-item.open .faq-a { max-height: 1200px; padding-bottom: 22px; }
.faq-a p { font-size: 15.5px; line-height: 1.7; color: var(--ink-2); margin: 0 0 12px; max-width: 760px; }
.faq-a p:last-child { margin-bottom: 0; }

/* Screencast */
.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 768px) {
  .page__main { padding: 0 0 64px; }
  .page-hero { padding: 130px 0 44px; margin-bottom: 40px; }
}

/* ═══════════════════════════════════════════════════════════════
   10. Scroll-reveal (shared) — observer lives in _footer.html
   =============================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in { opacity: 1; transform: none; }
.no-reveal-anim .reveal { transition: none; }
.d1 { transition-delay: 0.1s; }
.d2 { transition-delay: 0.22s; }
.d3 { transition-delay: 0.38s; }
.d4 { transition-delay: 0.52s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Mobile polish (Aug 2026 pass) ─────────────────────────────── */
/* Wordmark was 264px wide on a 375px screen — 70% of the viewport.
   Scale it down and tighten the bar. width:auto keeps the ratio. */
@media (max-width: 700px) {
  .site-nav__logo img { height: 34px; }
  .site-nav { padding: 14px 0; }
  /* The closing lead's hard <br> makes a lone "for." orphan line on
     small screens; let the text flow and wrap naturally instead. */
  .closing__lead br { display: none; }
  .closing__lead { text-wrap: pretty; }
}
/* At phone sizes the 2px stroke is proportionally chunky and the
   fracture offsets read as a typo instead of a slice. Thinner stroke,
   half the displacement: still broken, no longer scrambled. */
@media (max-width: 560px) {
  /* Phone fracture: one seam, and a REAL displacement. Sub-2px offsets
     at this size read as a misprint (parallel doubled strokes), not a
     break. A 3-4px shift opens a visible gap along the seam so the
     right shard reads as deliberately snapped off. Full 2px stroke
     keeps the outline dense. Applies identically to hero and closing:
     both render at 40px on phones. */
  .break-piece--1 { clip-path: polygon(0 -10%, 70% -10%, 58% 110%, 0 110%); }
  .break-piece--2 { display: none; }
  .break-piece--3 { transform: translate(3px, 4px) rotate(1.1deg); }
}