/* Swarm marketing site — shared design system (decision #345).
   One stylesheet for every public page (home, product, pricing, about).
   Identity: deep navy + honey gold, generous whitespace, soft depth.
   Motion: restrained Apple-ish reveals; everything honors reduced-motion. */

:root {
  --navy: #0f2d3f;
  --navy-2: #14384e;
  --navy-3: #1a4763;
  --gold: #f0a72e;
  --gold-2: #f6c267;
  --gold-deep: #b9791a;
  --ink: #14222c;
  --muted: #5d7180;
  --line: #e3eaf0;
  --bg: #ffffff;
  --soft: #f6f9fc;
  --soft-2: #eef4f9;
  --green: #2f9e44;
  --green-bg: #eaf7ee;
  --blue: #2b6cb0;
  --blue-bg: #ebf2fb;
  --red: #c0392b;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 3px rgba(15,45,63,0.08);
  --shadow-md: 0 12px 32px rgba(15,45,63,0.12);
  --shadow-lg: 0 24px 60px rgba(15,45,63,0.18);
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.4,.44,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* belt & suspenders: no incidental horizontal scroll, ever */
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 880px; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 48px; padding: 0 22px; border-radius: 11px;
  font-size: 16px; font-weight: 650; cursor: pointer; border: 1.5px solid transparent;
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
  white-space: nowrap;
}
.btn-primary { background: var(--gold); color: #2a1c02; box-shadow: 0 6px 18px rgba(240,167,46,0.35); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(240,167,46,0.45); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--gold); background: #fffaf0; }
.btn-light { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.28); }
.btn-light:hover { background: rgba(255,255,255,0.2); }
.btn-sm { height: 42px; padding: 0 18px; font-size: 15px; }
.btn:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(240,167,46,0.55); outline-offset: 2px; border-radius: 11px;
}

/* ── Header / nav ────────────────────────────────────────────────────── */
header.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
header.nav.scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(15,45,63,0.07); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark { width: 34px; height: 34px; }
.brand-word { font-size: 23px; font-weight: 800; letter-spacing: -0.03em; color: var(--navy); }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links .lnk { color: var(--muted); font-weight: 550; font-size: 15.5px; padding: 6px 2px; position: relative; }
.nav-links .lnk:hover { color: var(--navy); }
.nav-links .lnk.on { color: var(--navy); font-weight: 700; }
.nav-links .lnk.on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2.5px;
  border-radius: 2px; background: var(--gold);
}
.nav-cta { display: flex; align-items: center; gap: 12px; }

/* Mobile menu */
.nav-burger {
  display: none; width: 44px; height: 44px; border: none; background: transparent; cursor: pointer;
  align-items: center; justify-content: center; border-radius: 10px; color: var(--navy);
}
.nav-burger:hover { background: var(--soft); }
.nav-burger svg { width: 24px; height: 24px; }
.nav-burger .x { display: none; }
.mobile-menu {
  display: none; position: fixed; inset: 70px 0 auto 0; z-index: 49;
  background: rgba(255,255,255,0.98); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line); box-shadow: 0 24px 48px rgba(15,45,63,0.14);
  padding: 10px 24px 22px;
}
.mobile-menu a.mlnk {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 6px; font-size: 17px; font-weight: 650; color: var(--navy);
  border-bottom: 1px solid var(--soft-2);
}
.mobile-menu a.mlnk svg { width: 17px; height: 17px; color: var(--muted); }
.mobile-menu .mm-ctas { display: flex; gap: 11px; margin-top: 18px; }
.mobile-menu .mm-ctas .btn { flex: 1; }
body.menu-open .mobile-menu { display: block; animation: menuDrop .28s var(--ease) both; }
body.menu-open .nav-burger .bars { display: none; }
body.menu-open .nav-burger .x { display: block; }
@keyframes menuDrop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ── Section primitives ──────────────────────────────────────────────── */
section { padding: 92px 0; }
.sec-head { text-align: center; max-width: 720px; margin: 0 auto 54px; }
.sec-head.left { text-align: left; margin-left: 0; }
.kicker { font-size: 13.5px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 12px; }
h2.sec-title { font-size: 40px; line-height: 1.1; letter-spacing: -0.03em; margin: 0 0 14px; color: var(--navy); font-weight: 800; }
.sec-sub { font-size: 18px; color: var(--muted); margin: 0; }
.soft { background: var(--soft); }

/* ── Hero (home) ─────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #fbfdff 0%, #f2f7fb 100%); }
.hero::before {
  content: ''; position: absolute; top: -180px; right: -160px; width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(240,167,46,0.16), transparent 62%); pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; bottom: -220px; left: -180px; width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(20,56,78,0.08), transparent 60%); pointer-events: none;
}
.hero-inner { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 56px; align-items: center; padding-top: 86px; padding-bottom: 100px; position: relative; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px;
  padding: 6px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--line);
  font-size: 13.5px; font-weight: 650; color: var(--navy); box-shadow: var(--shadow-sm);
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
h1.hero-title { font-size: 56px; line-height: 1.04; letter-spacing: -0.035em; margin: 0 0 20px; color: var(--navy); font-weight: 820; }
h1.hero-title .hl { color: var(--gold); }
.hero-sub { font-size: 19.5px; color: var(--muted); margin: 0 0 32px; max-width: 540px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-note { margin-top: 18px; font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.hero-note svg { width: 16px; height: 16px; color: var(--green); flex: none; }

/* Load-in stagger for hero children */
.rise { opacity: 0; transform: translateY(16px); animation: rise .7s var(--ease) forwards; }
.rise.d1 { animation-delay: .06s; } .rise.d2 { animation-delay: .16s; } .rise.d3 { animation-delay: .26s; }
.rise.d4 { animation-delay: .36s; } .rise.d5 { animation-delay: .48s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* Hero visual — a layered product vignette */
.hero-art { position: relative; min-height: 430px; display: flex; flex-direction: column; gap: 14px; }
.mock { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); }
.paycard { position: relative; z-index: 3; padding: 22px; transform: rotate(-1.2deg); max-width: 420px; }
.paycard-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.paycard-top .who { display: flex; align-items: center; gap: 11px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.paycard-top .nm { font-weight: 700; color: var(--navy); font-size: 15px; }
.paycard-top .rl { font-size: 12.5px; color: var(--muted); }
.pill { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--green-bg); color: var(--green); }
.paycard-amt { padding: 18px 0 6px; }
.paycard-amt .lbl { font-size: 13px; color: var(--muted); }
.paycard-amt .big { font-size: 40px; font-weight: 820; color: var(--navy); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.paycard-rows { margin-top: 8px; }
.prow { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-top: 1px dashed var(--line); font-size: 14px; }
.prow .c { color: var(--muted); }
.prow .v { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.frozen { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--blue); background: var(--blue-bg); padding: 3px 8px; border-radius: 6px; }

/* Sparkline card floating behind */
.sparkcard {
  position: absolute; z-index: 2; top: -86px; right: -14px; width: 250px; padding: 16px 16px 10px;
  transform: rotate(1.6deg);
}
.sparkcard .t { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
.sparkcard .n { font-size: 22px; font-weight: 820; color: var(--navy); letter-spacing: -0.02em; }
.sparkcard svg { width: 100%; height: 56px; margin-top: 4px; }
.sparkcard .line { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; }
.sparkcard .area { fill: url(#sparkfill); opacity: .5; }
.drawn .line { stroke-dasharray: 320; stroke-dashoffset: 320; animation: draw 1.4s .5s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Notification toast floating bottom-left */
.badge-float {
  position: absolute; z-index: 4; bottom: -18px; left: -18px; background: #fff; border: 1px solid var(--line);
  border-radius: 13px; box-shadow: var(--shadow-md); padding: 12px 15px; display: flex; align-items: center; gap: 11px;
}
.badge-float .ic { width: 34px; height: 34px; border-radius: 9px; background: #fff6e7; display: flex; align-items: center; justify-content: center; flex: none; }
.badge-float .ic svg { width: 19px; height: 19px; color: var(--gold); }
.badge-float .t1 { font-size: 13.5px; font-weight: 750; color: var(--navy); }
.badge-float .t2 { font-size: 12px; color: var(--muted); }
.float-slow { animation: floaty 7s ease-in-out 1.4s infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* ── Trust strip ─────────────────────────────────────────────────────── */
.truststrip { padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.trust-inner { display: flex; align-items: center; justify-content: center; gap: 14px 34px; flex-wrap: wrap; }
.trust-chip { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: var(--muted); }
.trust-chip svg { width: 17px; height: 17px; color: var(--gold-deep); flex: none; }

/* ── Pillar rows (alternating feature stories) ───────────────────────── */
.pillar { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 44px 0; }
.pillar + .pillar { border-top: 1px solid var(--soft-2); }
.pillar.flip .pillar-copy { order: 2; }
.pillar.flip .pillar-art { order: 1; }
.pillar h3 { font-size: 28px; line-height: 1.15; letter-spacing: -0.025em; color: var(--navy); font-weight: 800; margin: 0 0 12px; }
.pillar p.lead { font-size: 17px; color: var(--muted); margin: 0 0 18px; }
.plist { list-style: none; padding: 0; margin: 0; }
.plist li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; font-size: 15.5px; color: var(--ink); }
.plist svg { width: 18px; height: 18px; color: var(--green); flex: none; margin-top: 2px; }
.plist b { color: var(--navy); }
.pillar-art .mock { padding: 18px; }

/* Mini mockups used inside pillars */
.mrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--soft-2); background: #fff; margin-bottom: 8px; }
.mrow:last-child { margin-bottom: 0; }
.mrow .l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mrow .nm { font-size: 14px; font-weight: 700; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow .sub { font-size: 12px; color: var(--muted); }
.mrow .amt { font-size: 14.5px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.mtag { font-size: 11px; font-weight: 750; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.mtag.ok { background: var(--green-bg); color: var(--green); }
.mtag.due { background: #fff6e7; color: var(--gold-deep); }
.mtag.info { background: var(--blue-bg); color: var(--blue); }
.mbar { height: 8px; border-radius: 6px; background: var(--soft-2); overflow: hidden; margin: 10px 0 4px; }
.mbar > i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--gold), var(--gold-2)); transition: width 1.1s var(--ease); }
.in .mbar > i { width: var(--w, 70%); }
html:not(.js) .mbar > i { width: var(--w, 70%); } /* no JS → bars render full, never empty */
.mhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mhead .t { font-size: 14px; font-weight: 800; color: var(--navy); }
.mhead .btnish { font-size: 12px; font-weight: 750; color: #2a1c02; background: var(--gold); border-radius: 8px; padding: 5px 10px; box-shadow: 0 3px 10px rgba(240,167,46,.35); }
.kan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kcol { background: var(--soft); border: 1px solid var(--soft-2); border-radius: 12px; padding: 10px; }
.kcol .kt { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 8px; }
.kcard { background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px; margin-bottom: 8px; box-shadow: var(--shadow-sm); }
.kcard:last-child { margin-bottom: 0; }
.kcard .kn { font-size: 12.5px; font-weight: 700; color: var(--navy); }
.kcard .ks { font-size: 11px; color: var(--muted); }

/* Staggered rows inside a revealed mock (hidden only when JS is running — see .js .reveal) */
.js .reveal .mrow, .js .reveal .kcard { opacity: 0; transform: translateY(8px); }
.reveal.in .mrow, .reveal.in .kcard { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.in .mrow:nth-child(2), .reveal.in .kcard:nth-child(2) { transition-delay: .08s; }
.reveal.in .mrow:nth-child(3), .reveal.in .kcard:nth-child(3) { transition-delay: .16s; }
.reveal.in .mrow:nth-child(4), .reveal.in .kcard:nth-child(4) { transition-delay: .24s; }
.reveal.in .mrow:nth-child(5) { transition-delay: .32s; }

/* ── "It notices" cards ──────────────────────────────────────────────── */
.notice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* Four-item variant: 2x2 at every desktop width, so a fourth card never
   orphans on its own row the way it does in the 3-up default. */
.notice-grid.two-up { grid-template-columns: repeat(2, 1fr); }
.ncard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.ncard .from { font-size: 14.5px; color: var(--muted); padding-bottom: 12px; border-bottom: 1px dashed var(--line); margin-bottom: 12px; }
.ncard .from b { color: var(--navy); }
.ncard .then { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; color: var(--ink); }
.ncard .then svg { width: 17px; height: 17px; color: var(--gold-deep); flex: none; margin-top: 2px; }

/* ── Feature grid ────────────────────────────────────────────────────── */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* Chapter cards on the landing page — four doors into the product tour. */
.chap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.chap { display: block; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 28px 26px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.chap:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #d4e0ea; }
.chap-k { font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 10px; }
.chap h3 { font-size: 20px; margin: 0 0 8px; color: var(--navy); font-weight: 720; }
.chap p { font-size: 15px; color: var(--muted); margin: 0 0 16px; }
.chap-go { font-size: 14px; font-weight: 700; color: var(--gold-deep); display: inline-flex; align-items: center; gap: 6px; }
.chap-go svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.chap:hover .chap-go svg { transform: translateX(3px); }
.feat {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.feat:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #d4e0ea; }
.feat-ic { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, #fff4e1, #ffe7bd); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.feat-ic svg { width: 24px; height: 24px; color: var(--gold-deep); }
.feat h3 { font-size: 18.5px; margin: 0 0 8px; color: var(--navy); font-weight: 720; }
.feat p { font-size: 15px; color: var(--muted); margin: 0; }

/* ── Steps ───────────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step { position: relative; padding: 28px 24px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.step-n { width: 40px; height: 40px; border-radius: 11px; background: var(--navy); color: #fff; font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.step h3 { font-size: 18px; margin: 0 0 7px; color: var(--navy); font-weight: 720; }
.step p { font-size: 15px; color: var(--muted); margin: 0; }

/* ── Stats strip ─────────────────────────────────────────────────────── */
.strip { background: var(--navy); color: #fff; }
.strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; text-align: center; }
.stat .num { font-size: 34px; font-weight: 820; color: var(--gold-2); letter-spacing: -0.02em; }
.stat .cap { font-size: 14.5px; color: #b9cad6; margin-top: 4px; }

/* ── Pricing ─────────────────────────────────────────────────────────── */
.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.price {
  position: relative; display: flex; flex-direction: column; background: #fff; border: 1.5px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px 22px;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.price:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.price.hot { border-color: var(--gold); box-shadow: 0 14px 38px rgba(240,167,46,0.2); }
.price .flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: var(--gold); color: #2a1c02; padding: 4px 12px; border-radius: 999px; white-space: nowrap;
}
.price .pn { font-size: 17px; font-weight: 800; color: var(--navy); }
.price .pd { font-size: 13.5px; color: var(--muted); margin-top: 2px; min-height: 38px; }
.price .amt { margin: 14px 0 2px; display: flex; align-items: baseline; gap: 5px; }
.price .amt .cur { font-size: 20px; font-weight: 750; color: var(--navy); }
.price .amt .val { font-size: 42px; font-weight: 820; letter-spacing: -0.03em; color: var(--navy); font-variant-numeric: tabular-nums; }
.price .amt .per { font-size: 14px; color: var(--muted); }
.price .seats { font-size: 13.5px; font-weight: 700; color: var(--gold-deep); margin-bottom: 14px; }
.price ul { list-style: none; padding: 14px 0 18px; margin: 0; border-top: 1px solid var(--soft-2); flex: 1; }
.price li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; color: var(--ink); padding: 5px 0; }
.price li svg { width: 16px; height: 16px; color: var(--green); flex: none; margin-top: 2.5px; }
.price .btn { width: 100%; }
.price-note { text-align: center; font-size: 14px; color: var(--muted); margin-top: 22px; }
.every { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin-top: 34px; }
.every .echip {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 650; color: var(--navy);
  background: #fff; border: 1px solid var(--line); padding: 8px 14px; border-radius: 999px; box-shadow: var(--shadow-sm);
}
.every .echip svg { width: 15px; height: 15px; color: var(--gold-deep); }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq { max-width: 760px; margin: 0 auto; }
.faq details { border: 1px solid var(--line); border-radius: 13px; background: #fff; margin-bottom: 12px; overflow: hidden; }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; font-size: 16.5px; font-weight: 700; color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 18px; height: 18px; color: var(--muted); flex: none; transition: transform .25s var(--ease); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq .a { padding: 0 20px 18px; font-size: 15.5px; color: var(--muted); }
.faq .a a { color: var(--gold-deep); font-weight: 650; }

/* ── CTA band + form ─────────────────────────────────────────────────── */
.cta { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%); color: #fff; border-radius: 24px; padding: 56px; position: relative; overflow: hidden; }
.cta::before { content: ''; position: absolute; top: -120px; right: -80px; width: 360px; height: 360px; background: radial-gradient(circle, rgba(240,167,46,0.22), transparent 60%); }
.cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; position: relative; align-items: center; }
.cta h2 { font-size: 34px; line-height: 1.14; letter-spacing: -0.03em; margin: 0 0 14px; font-weight: 800; }
.cta p { font-size: 17.5px; color: #c5d4de; margin: 0 0 8px; }
.cta-list { list-style: none; padding: 0; margin: 20px 0 0; }
.cta-list li { display: flex; align-items: center; gap: 10px; font-size: 15.5px; color: #dce6ed; padding: 6px 0; }
.cta-list svg { width: 18px; height: 18px; color: var(--gold-2); flex: none; }
.form-card { background: #fff; border-radius: 18px; padding: 28px; box-shadow: var(--shadow-lg); color: var(--ink); }
.form-card h3 { margin: 0 0 4px; color: var(--navy); font-size: 21px; font-weight: 760; }
.form-card .fsub { color: var(--muted); font-size: 14.5px; margin: 0 0 18px; }
/* "(optional)" beside a field label. Was an inline style on one page. */
.form-card .fld label .opt { color: var(--muted); font-weight: 400; }

/* Quick demo band (#621c) — a low-friction repeat of the demo form. It FLOATS
   ON the hero's bottom edge rather than sitting in the gap below it: the card's
   top half overlaps the hero gradient, its bottom half sits on the page. Sitting
   under the seam read as a leftover strip; straddling it reads as the hero's
   own call to action. The hero's overflow:hidden cannot clip this, because the
   band is its SIBLING, not a child. */
.qf-band { position: relative; z-index: 5; padding: 0 0 40px; margin-top: -84px; }
.quickform {
  display: flex; align-items: flex-end; gap: 26px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow-lg); padding: 26px 28px;
}
.qf-copy { flex: 1 1 250px; min-width: 0; padding-bottom: 5px; }
.qf-copy strong { display: block; font-size: 19px; font-weight: 800; color: var(--navy); letter-spacing: -0.015em; }
.qf-copy span { display: block; font-size: 14px; color: var(--muted); margin-top: 5px; }
.qf-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; flex: 2 1 480px; min-width: 0; }
.qf-fld { flex: 1 1 145px; min-width: 0; }
.qf-fld label { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.qf-fld input {
  /* 16px is not a taste call: below it, iOS zooms the whole page on focus. */
  width: 100%; font: inherit; font-size: 16px; padding: 13px 14px;
  border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--ink);
}
.qf-fld input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(240,167,46,.18); }
.qf-form .btn { flex: none; padding: 14px 24px; font-size: 15.5px; }
/* The status line takes the whole row so a message never squeezes the fields. */
.qf-form .form-msg { flex: 1 0 100%; margin: 0; }
.qf-form .form-msg:empty { display: none; }
@media (max-width: 980px) {
  /* Less hero to overlap once the art stacks: float less, keep the seam covered. */
  .qf-band { margin-top: -72px; padding-bottom: 32px; }
  /* Too narrow to sit beside the fields: the pitch becomes a header line above
     them rather than a column squeezed next to a wrapped, ragged form. */
  .qf-copy { flex: 1 1 100%; padding-bottom: 0; }
  .qf-form { flex: 1 1 100%; }
}
@media (max-width: 760px) {
  /* A small lift only: enough to use the hero's empty bottom and keep the card
     touching the seam, never enough to reach the stacked hero mock above it. */
  .qf-band { margin-top: -40px; padding-bottom: 26px; }
  .quickform { padding: 20px; gap: 16px; }
  .qf-fld { flex: 1 1 100%; }
  .qf-form .btn { width: 100%; }
}
}
.fld { margin-bottom: 14px; }
.fld label { display: block; font-size: 13.5px; font-weight: 650; color: var(--navy); margin-bottom: 6px; }
.fld input, .fld textarea {
  width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 13px; font-size: 15px;
  font-family: inherit; color: var(--ink); transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(240,167,46,0.18); }
.fld textarea { resize: vertical; min-height: 84px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { font-size: 14.5px; margin-top: 12px; padding: 11px 13px; border-radius: 9px; display: none; }
.form-msg.ok { display: block; background: var(--green-bg); color: #226b34; border: 1px solid #bfe3c9; }
.form-msg.err { display: block; background: #fdecea; color: #9b2c20; border: 1px solid #f3c6bf; }

/* Slim CTA band variant (inner pages) */
.cta-slim { text-align: center; padding: 52px 40px; }
.cta-slim h2 { margin-bottom: 10px; }
.cta-slim .btns { display: flex; gap: 14px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }

/* ── Page hero (inner pages) ─────────────────────────────────────────── */
.page-hero { background: linear-gradient(180deg, #fbfdff 0%, #f2f7fb 100%); padding: 72px 0 56px; position: relative; overflow: hidden; }
.page-hero::before {
  content: ''; position: absolute; top: -200px; right: -140px; width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(240,167,46,0.14), transparent 62%); pointer-events: none;
}
.page-hero h1 { font-size: 46px; line-height: 1.06; letter-spacing: -0.035em; margin: 0 0 14px; color: var(--navy); font-weight: 820; }
.page-hero .sub { font-size: 19px; color: var(--muted); max-width: 640px; margin: 0; }
.page-hero .center { text-align: center; }
.page-hero .center .sub { margin: 0 auto; }

/* ── Product tour sections ───────────────────────────────────────────── */
.tour { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding: 54px 0; }
.tour + .tour { border-top: 1px solid var(--soft-2); }
.tour.flip .tour-copy { order: 2; }
.tour.flip .tour-art { order: 1; }
/* Grid children default to min-width:auto and can refuse to shrink below a
   wide child, causing sideways scroll on phones — never acceptable here. */
.tour > div, .pillar > div, .cta-grid > div, .hero-inner > div { min-width: 0; }
.tour .tnum { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 10px; }
.tour h2 { font-size: 30px; line-height: 1.12; letter-spacing: -0.025em; color: var(--navy); font-weight: 800; margin: 0 0 12px; }
.tour p.lead { font-size: 16.5px; color: var(--muted); margin: 0 0 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips .chip { font-size: 13px; font-weight: 650; color: var(--navy); background: var(--soft); border: 1px solid var(--soft-2); padding: 6px 12px; border-radius: 999px; }
.tour-art .mock { padding: 18px; }

/* Sub-nav for the tour page */
.subnav { position: sticky; top: 70px; z-index: 40; background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.subnav-inner { display: flex; gap: 8px; overflow-x: auto; padding: 12px 24px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.subnav-inner::-webkit-scrollbar { display: none; }
.subnav a { flex: none; font-size: 13.5px; font-weight: 650; color: var(--muted); padding: 7px 14px; border-radius: 999px; border: 1px solid transparent; }
.subnav a:hover { color: var(--navy); background: var(--soft); }
.subnav a.on { color: var(--navy); background: var(--soft-2); border-color: var(--line); }

/* Chapter headers inside the product tour (anchor targets for the subnav). */
.sec-head.chapter { margin: 76px auto 8px; scroll-margin-top: 132px; }

/* ── About page ──────────────────────────────────────────────────────── */
.story { max-width: 760px; margin: 0 auto; font-size: 17.5px; color: var(--ink); }
.story p { margin: 0 0 20px; }
.story .drop { font-size: 21px; color: var(--navy); font-weight: 650; }
.founder-quote { border-left: 3px solid var(--gold); padding: 4px 0 4px 26px; }
.founder-quote p { font-size: 19px; line-height: 1.7; color: var(--ink); margin: 0 0 16px; }
.founder-quote .attr { font-size: 15px; font-weight: 750; color: var(--muted); }
.principles { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.principle { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; gap: 14px; align-items: flex-start; }
.principle .pic { width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(135deg, #fff4e1, #ffe7bd); display: flex; align-items: center; justify-content: center; flex: none; }
.principle .pic svg { width: 21px; height: 21px; color: var(--gold-deep); }
.principle h3 { font-size: 16.5px; margin: 0 0 5px; color: var(--navy); font-weight: 750; }
.principle p { font-size: 14.5px; color: var(--muted); margin: 0; }

/* ── Footer ──────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--line); padding: 52px 0 36px; background: #fff; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.foot-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.foot-brand .brand-word { font-size: 19px; }
.foot-tag { font-size: 14px; color: var(--muted); max-width: 260px; }
.foot-col h4 { font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--navy); margin: 0 0 12px; }
.foot-col a { display: block; font-size: 14.5px; color: var(--muted); padding: 4.5px 0; }
.foot-col a:hover { color: var(--navy); }
.foot-base { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--soft-2); font-size: 13.5px; color: var(--muted); }

/* ── Reveal-on-scroll ────────────────────────────────────────────────── */
/* Hidden-until-revealed applies only once site.js proves it's running (it stamps
   html.js as its first act). If the script ever fails to load or run, the page
   renders fully visible instead of blank. .reveal.in must stay AFTER .js .reveal
   — same specificity, source order breaks the tie. */
.reveal { transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal { opacity: 0; transform: translateY(18px); }
.reveal.in { opacity: 1; transform: none; }
.reveal.dly1 { transition-delay: .08s; } .reveal.dly2 { transition-delay: .16s; } .reveal.dly3 { transition-delay: .24s; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .pillar, .tour { grid-template-columns: 1fr; gap: 34px; padding: 38px 0; }
  .pillar.flip .pillar-copy, .tour.flip .tour-copy { order: 1; }
  .pillar.flip .pillar-art, .tour.flip .tour-art { order: 2; }
  .price-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px) {
  .hero-inner { grid-template-columns: 1fr; gap: 44px; padding-top: 56px; padding-bottom: 64px; }
  .hero-art { max-width: 440px; margin: 0 auto; min-height: 0; }
  h1.hero-title { font-size: 44px; }
  .feat-grid, .steps, .notice-grid { grid-template-columns: 1fr 1fr; }
  .strip-grid { grid-template-columns: 1fr 1fr; }
  .cta-grid { grid-template-columns: 1fr; gap: 32px; }
  .cta { padding: 38px; }
  .nav-links, .nav-cta .btn-ghost { display: none; }
  .nav-burger { display: inline-flex; }
  .page-hero h1 { font-size: 38px; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 24px; }
  section { padding: 58px 0; }
  .sec-head { margin-bottom: 36px; }
  h1.hero-title { font-size: 35px; }
  .hero-sub { font-size: 17.5px; }
  h2.sec-title { font-size: 29px; }
  .sec-sub { font-size: 16.5px; }
  .hero-inner { padding-top: 38px; padding-bottom: 62px; gap: 34px; }
  .hero-ctas { gap: 11px; }
  .hero-ctas .btn { flex: 1; }
  .feat-grid, .steps, .strip-grid, .notice-grid, .price-grid, .principles, .chap-grid { grid-template-columns: 1fr; }
  .notice-grid.two-up { grid-template-columns: 1fr; }
  .strip-grid { gap: 30px; }
  .stat .num { font-size: 31px; }
  .feat { padding: 22px 20px; }
  .step { padding: 24px 20px; }
  .cta { padding: 32px 22px; border-radius: 20px; }
  .cta h2 { font-size: 28px; }
  .cta-slim { padding: 40px 22px; }
  .form-card { padding: 22px 20px; }
  .fld input, .fld textarea { font-size: 16px; padding: 12px 13px; } /* stops iOS zoom-on-focus */
  .paycard { transform: none; max-width: 100%; }
  .sparkcard { position: static; width: 100%; transform: none; margin-bottom: 12px; }
  .hero-art { display: flex; flex-direction: column; }
  .badge-float { position: static; margin-top: 12px; }
  .float-slow { animation: none; }
  .nav-cta .btn-primary { display: none; } /* the hero + menu carry the CTA on phones */
  .nav-inner { height: 62px; }
  .mobile-menu { inset: 62px 0 auto 0; }
  .page-hero { padding: 48px 0 42px; }
  .page-hero h1 { font-size: 31px; }
  .page-hero .sub { font-size: 16.5px; }
  .tour h2 { font-size: 25px; }
  .pillar h3 { font-size: 24px; }
  .kan { grid-template-columns: 1fr 1fr; }
  .kan .kcol:nth-child(3) { display: none; }
  .foot-grid { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 380px) { h1.hero-title { font-size: 31px; } }

/* ── Reduced motion: everything calms down ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal .mrow, .reveal .kcard { transition: none; opacity: 1; transform: none; }
  .rise { animation: none; opacity: 1; transform: none; }
  .drawn .line { animation: none; stroke-dashoffset: 0; }
  .float-slow { animation: none; }
  .mbar > i { transition: none; width: var(--w, 70%); }
  .btn:hover, .feat:hover, .price:hover, .chap:hover { transform: none; }
  body.menu-open .mobile-menu { animation: none; }
}

/* Swarm-hover (decision #372): the dots buzz on logo hover — the same delight
   as inside the app, now on every marketing page. */
@keyframes bee-buzz { 0%,100% { transform: translate(0,0); } 25% { transform: translate(0.6px,-1.4px); } 50% { transform: translate(-0.8px,0.8px); } 75% { transform: translate(0.9px,0.7px); } }
.brand:hover .brand-mark circle { animation: bee-buzz 0.6s ease infinite; transform-box: fill-box; transform-origin: center; }
.brand:hover .brand-mark circle:nth-child(2) { animation-delay: 0.08s; }
.brand:hover .brand-mark circle:nth-child(3) { animation-delay: 0.16s; }
.brand:hover .brand-mark circle:nth-child(4) { animation-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) { .brand:hover .brand-mark circle { animation: none; } }

/* The floating mark at the book-a-demo close — the same slow drift as the
   app's onboarding welcome. Used sparingly on purpose: this is its only
   always-on appearance on the site. */
.cta-mark { width: 70px; height: 70px; display: block; margin: 0 0 14px; }
.cta-mark circle { animation: mark-drift 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.cta-mark circle:nth-child(2) { animation-delay: 0.5s; }
.cta-mark circle:nth-child(3) { animation-delay: 1.1s; }
.cta-mark circle:nth-child(4) { animation-delay: 1.7s; }
@keyframes mark-drift {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(1.6px, -2.6px); }
  66% { transform: translate(-1.8px, 1.6px); }
}
@media (prefers-reduced-motion: reduce) { .cta-mark circle { animation: none; } }