/* ==========================================================================
   DPanda — Core Design System
   Palette: ink-teal / panda-gold / paper / clay
   Type: Fraunces (display) + Inter (body) + JetBrains Mono (data/labels)

   CACHE-BUSTING: every HTML page loads this file as
   "/assets/css/main.css?v=2" — browsers and CDNs aggressively cache
   .css files, so without a version bump, visitors can keep getting an
   old cached copy after a deploy (this caused a real bug: a mobile nav
   fix landed in the CSS but some visitors kept seeing the old layout on
   some pages and not others, purely based on each page's individual
   cache state). Whenever this file changes, bump "?v=2" to "?v=3" etc.
   across every HTML file's <link> tag — see assets/js/config.js for the
   same convention applied to JS.
   ========================================================================== */

:root {
  /* Color */
  --ink:        #08303B;   /* primary dark — headers, footer, nav */
  --ink-2:      #0E3F4C;   /* lighter ink for cards on dark */
  --ink-3:      #14505F;   /* hover/border on dark */
  --gold:       #E3A33C;   /* signature accent — the "current" */
  --gold-dim:   #C98C2B;
  --clay:       #C45B3F;   /* secondary accent — alerts, contrast */
  --paper:      #F7F4EC;   /* warm off-white — light section bg */
  --paper-2:    #EFE9D8;   /* slightly deeper paper for cards */
  --slate:      #3C4A4F;   /* body text on light */
  --slate-soft: #6B7679;   /* secondary text on light */
  --cream:      #FBF9F3;
  --white:      #FFFFFF;
  --line:       rgba(8,48,59,0.12);
  --line-dark:  rgba(247,244,236,0.14);

  /* Type */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;

  /* Scale */
  --radius-sm: 6px;
  --radius: 14px;
  --radius-lg: 28px;
  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 64px);

  --shadow-soft: 0 1px 2px rgba(8,48,59,0.06), 0 12px 32px -16px rgba(8,48,59,0.18);
  --shadow-lift: 0 2px 4px rgba(8,48,59,0.08), 0 24px 48px -20px rgba(8,48,59,0.28);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--slate);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; }
button { font-family: inherit; }

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

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Typography ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin: 0;
  color: var(--ink);
}
h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); font-weight: 580; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.3rem, 2.1vw, 1.6rem); }
p { margin: 0; }
.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--slate-soft);
  max-width: 640px;
  line-height: 1.55;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dim);
  font-weight: 600;
}
.section-on-dark .eyebrow { color: var(--gold); }

/* ---- Layout helpers ---- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: clamp(56px, 9vw, 120px) 0; }
.section-on-dark { background: var(--ink); color: var(--cream); }
.section-on-dark h1, .section-on-dark h2, .section-on-dark h3 { color: var(--cream); }
.section-on-dark .lede { color: rgba(247,244,236,0.72); }
.section-tight { padding: clamp(40px, 6vw, 72px) 0; }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 920px) {
  .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr; }
}
@media (min-width: 921px) and (max-width: 1160px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-6 { grid-template-columns: repeat(3, 1fr); }
}

.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.center-text { text-align: center; margin-left: auto; margin-right: auto; }

.kicker-block { max-width: 720px; margin-bottom: 48px; }
.kicker-block.center { margin-left: auto; margin-right: auto; text-align: center; }
.kicker-block .eyebrow { display: block; margin-bottom: 14px; }
.kicker-block h2 { margin-bottom: 14px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  padding: 13px 26px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-dim); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.btn-outline-dark { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-outline-dark:hover { background: var(--ink); color: var(--cream); }
.btn-outline-light { border-color: rgba(247,244,236,0.4); color: var(--cream); background: transparent; }
.btn-outline-light:hover { background: rgba(247,244,236,0.12); border-color: var(--cream); }
.btn-ghost { color: var(--ink); padding: 13px 6px; }
.btn-ghost::after { content: '→'; transition: transform 0.18s ease; }
.btn-ghost:hover::after { transform: translateX(4px); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none !important; }

/* ---- Nav ---- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--pad); max-width: var(--maxw); margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--ink); }
.brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(227,163,60,0.18); }
.brand-logo { height: 52px; width: auto; aspect-ratio: 1.01 / 1; object-fit: contain; display: block; }
.footer-brand .brand-logo { height: 40px; }
.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-links a { font-size: 0.92rem; font-weight: 500; color: var(--slate); position: relative; padding: 9px 14px; border-radius: 999px; transition: background 0.16s ease, color 0.16s ease; }
.nav-links a:hover { color: var(--ink); background: var(--paper-2); }
.nav-links .has-dd { position: relative; }
.dd-trigger { display: flex; align-items: center; gap: 5px; cursor: pointer; background: none; border: none; color: var(--slate); font-size: 0.92rem; font-weight: 500; font-family: inherit; padding: 9px 14px; border-radius: 999px; transition: background 0.16s ease, color 0.16s ease; }
.dd-trigger:hover { color: var(--ink); background: var(--paper-2); }
.dd-trigger svg { width: 10px; height: 10px; transition: transform 0.2s ease; }
.has-dd:hover .dd-trigger svg { transform: rotate(180deg); }
.dd-menu {
  position: absolute; top: calc(100% + 10px); left: -16px; width: 300px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lift);
  padding: 10px; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}
.has-dd:hover .dd-menu, .has-dd:focus-within .dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dd-menu a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; color: var(--ink); background: none; }
.dd-menu a:hover { background: var(--paper); color: var(--ink); }
.dd-menu a strong { font-size: 0.88rem; font-weight: 600; }
.dd-menu a span { font-size: 0.78rem; color: var(--slate-soft); font-weight: 400; }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-cta .btn-outline-light { border-color: var(--ink); color: var(--ink); }
.nav-cta .btn-outline-light:hover { background: var(--ink); color: var(--cream); }
.nav-toggle { display: none; background: none; border: none; color: var(--ink); cursor: pointer; padding: 6px; }
.nav-toggle svg { width: 24px; height: 24px; }

/* ---- Mobile menu frame ----
   This is a standalone overlay, placed as a direct sibling of <header>
   in the HTML (not nested inside it), with its own isolated stacking
   context. That's deliberate: a position:fixed element nested inside
   other positioned/transformed ancestors can get visually trapped
   inside whichever ancestor creates its own stacking context (any
   parent with transform, filter, opacity<1, will-change, etc. does
   this silently) — no z-index value fixes that from the inside. Moving
   the menu to the top level of <body> and giving it `isolation: isolate`
   sidesteps the problem entirely instead of fighting it. */
.mobile-menu-frame {
  position: fixed; inset: 0; z-index: 999; isolation: isolate;
  background: var(--white);
  visibility: hidden; opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.26s ease;
  display: flex; flex-direction: column;
}
.mobile-menu-frame.open { visibility: visible; opacity: 1; transform: translateX(0); }
.mobile-menu-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--pad); border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.mobile-menu-close {
  display: flex; align-items: center; gap: 8px;
  background: var(--paper-2); border: none; border-radius: 999px;
  padding: 9px 16px; font-family: var(--font-body); font-weight: 600;
  font-size: 0.88rem; color: var(--ink); cursor: pointer;
}
.mobile-menu-close svg { width: 16px; height: 16px; }
.mobile-menu-close:hover { background: var(--line); }
.mobile-menu-body { flex: 1; overflow-y: auto; padding: 8px var(--pad) 40px; }
.mobile-menu-body .nav-links { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; }
.mobile-menu-body .nav-links a,
.mobile-menu-body .dd-trigger { width: 100%; padding: 16px 4px; border-radius: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: none; font-size: 0.98rem; }
.mobile-menu-body .nav-links a:hover,
.mobile-menu-body .dd-trigger:hover { background: var(--paper-2); }
.mobile-menu-body .has-dd { width: 100%; }
.mobile-menu-body .dd-menu { position: static; width: 100%; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; background: var(--paper); display: none; margin-top: 4px; }
.mobile-menu-body .has-dd.dd-open .dd-menu { display: block; }
.mobile-menu-body .has-dd.dd-open .dd-trigger svg { transform: rotate(180deg); }
.mobile-menu-body .dd-menu a strong, .mobile-menu-body .dd-menu a span { color: var(--ink); }
.mobile-menu-body .dd-menu a span { color: var(--slate-soft); }
.mobile-menu-body .mobile-cta { margin-top: 20px; }

@media (max-width: 880px) {
  .header-nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav-cta .btn-outline-light { display: none; }
}
@media (min-width: 881px) {
  .mobile-menu-frame { display: none !important; }
}

/* ---- Footer ---- */
.footer { background: var(--ink); color: rgba(247,244,236,0.7); padding: 64px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.footer-brand .brand { margin-bottom: 14px; }
.footer-brand p { max-width: 320px; font-size: 0.92rem; line-height: 1.65; color: rgba(247,244,236,0.6); margin-bottom: 20px; }
.footer-col h4 { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; font-weight: 600; }
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col a { font-size: 0.9rem; color: rgba(247,244,236,0.72); transition: color 0.15s ease; }
.footer-col a:hover { color: var(--cream); }
.footer-contact { display: flex; flex-direction: column; gap: 10px; font-size: 0.88rem; }
.footer-contact a { color: rgba(247,244,236,0.85); }
.footer-contact .addr { color: rgba(247,244,236,0.6); line-height: 1.6; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 28px; border-top: 1px solid var(--line-dark); font-size: 0.82rem; color: rgba(247,244,236,0.5); }
.footer-social { display: flex; gap: 12px; }
.footer-social a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-dark); display: flex; align-items: center; justify-content: center; }
.footer-social a:hover { background: var(--ink-2); }
.footer-social svg { width: 16px; height: 16px; }
@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---- Cards ---- */
.card {
  background: var(--white); border-radius: var(--radius); padding: 30px;
  border: 1px solid var(--line); transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); border-color: transparent; }
.card .icon-tile { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; background: var(--paper-2); }
.card .icon-tile svg { width: 22px; height: 22px; color: var(--ink); }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--slate-soft); font-size: 0.95rem; line-height: 1.6; }

.card-dark { background: var(--ink-2); border: 1px solid var(--line-dark); }
.card-dark h3 { color: var(--cream); }
.card-dark p { color: rgba(247,244,236,0.66); }
.card-dark .icon-tile { background: rgba(227,163,60,0.14); }
.card-dark .icon-tile svg { color: var(--gold); }

.tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: var(--paper-2); color: var(--ink); font-weight: 600; }
.tag-gold { background: rgba(227,163,60,0.16); color: var(--gold-dim); }
.tag-dark { background: rgba(227,163,60,0.16); color: var(--gold); }

/* ---- Stat strip ---- */
.stat-strip { display: flex; flex-wrap: wrap; gap: 40px; }
.stat { min-width: 120px; }
.stat .num { font-family: var(--font-mono); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 600; color: var(--gold); display: block; }
.stat .label { font-size: 0.82rem; color: var(--slate-soft); margin-top: 4px; }
.section-on-dark .stat .label { color: rgba(247,244,236,0.6); }

/* ---- The Solution Map: mandatory gate -> 4 independent capabilities -> sell ---- */
.map-wrap { position: relative; }
.map-grid {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  align-items: center;
  gap: 0;
  min-width: 880px;
}
.map-col-gate, .map-col-sell { display: flex; flex-direction: column; justify-content: center; }
.map-col-mid { display: flex; flex-direction: column; gap: 14px; padding: 0 36px; position: relative; }

/* connecting lines, drawn as pseudo-elements off each capability card, pointing both directions */
.map-col-mid::before, .map-col-mid::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 36px;
  background-image: repeating-linear-gradient(to bottom, rgba(227,163,60,0.35) 0 2px, transparent 2px 14px);
  background-size: 2px 100%; background-position: center; background-repeat: no-repeat;
}
.map-col-mid::before { left: -36px; }
.map-col-mid::after { right: -36px; }

.map-gate {
  background: var(--gold); color: var(--ink); border-radius: var(--radius-lg);
  padding: 28px 22px; text-align: center; position: relative;
  box-shadow: var(--shadow-soft);
}
.map-gate .map-eyebrow { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); opacity: 0.7; margin-bottom: 8px; }
.map-gate h4 { font-size: 1.1rem; color: var(--ink); margin-bottom: 6px; font-family: var(--font-body); font-weight: 700; }
.map-gate p { font-size: 0.82rem; color: var(--ink); opacity: 0.75; line-height: 1.5; }
.map-gate .map-required { display: inline-block; margin-top: 12px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; background: var(--ink); color: var(--gold); padding: 4px 10px; border-radius: 999px; font-weight: 600; }
.map-gate .map-shopify-pill { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 16px; background: var(--ink); color: var(--cream); font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; padding: 9px 16px; border-radius: 999px; transition: background 0.16s ease, transform 0.16s ease; }
.map-gate .map-shopify-pill svg { width: 15px; height: 15px; flex-shrink: 0; }
.map-gate .map-shopify-pill:hover { background: var(--ink-3); transform: translateY(-1px); }

.map-capability {
  background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: var(--radius);
  padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.map-capability:hover { transform: translateX(4px); border-color: var(--gold); background: var(--ink); }
.map-capability .map-cap-text h4 { font-size: 0.95rem; color: var(--cream); margin-bottom: 3px; font-family: var(--font-body); font-weight: 600; }
.map-capability .map-cap-text p { font-size: 0.76rem; color: rgba(247,244,236,0.55); }
.map-capability .map-cap-sub { display: flex; gap: 6px; flex-shrink: 0; }
.map-capability .map-cap-sub span { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.02em; padding: 4px 9px; border-radius: 999px; background: rgba(227,163,60,0.14); color: var(--gold); white-space: nowrap; }

.map-sell {
  background: var(--ink); border: 2px solid var(--gold); border-radius: var(--radius-lg);
  padding: 26px 22px; text-align: center; position: relative;
}
.map-sell .map-eyebrow { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.map-sell h4 { font-size: 1.1rem; color: var(--cream); margin-bottom: 10px; font-family: var(--font-body); font-weight: 700; }
.map-sell .map-sell-sub { display: flex; flex-direction: column; gap: 6px; }
.map-sell .map-sell-sub span { font-family: var(--font-mono); font-size: 0.68rem; background: rgba(227,163,60,0.14); color: var(--gold); padding: 5px 10px; border-radius: 999px; transition: background 0.16s ease; }
.map-sell .map-sell-sub span:hover { background: rgba(227,163,60,0.28); }

.map-note {
  display: flex; align-items: flex-start; gap: 12px; margin-top: 28px;
  background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: var(--radius);
  padding: 18px 22px;
}
.map-note svg { width: 20px; height: 20px; color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.map-note p { font-size: 0.86rem; color: rgba(247,244,236,0.75); line-height: 1.6; }
.map-note strong { color: var(--cream); }

@media (max-width: 880px) {
  .map-grid { grid-template-columns: 1fr; min-width: 0; gap: 16px; }
  .map-col-mid { padding: 16px 0; gap: 12px; }
  .map-col-mid::before, .map-col-mid::after { display: none; }
  .map-capability { flex-direction: column; align-items: flex-start; }
}

/* Compact rail used as service-page breadcrumb */
.rail-mini { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 4px 0; overflow-anchor: none; }
.rail-mini a, .rail-mini span.current-step { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; white-space: nowrap; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line-dark); color: rgba(247,244,236,0.55); transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease; }
.rail-mini a:hover { color: var(--cream); border-color: rgba(247,244,236,0.4); background: rgba(247,244,236,0.08); }
.rail-mini span.current-step { background: var(--gold); color: var(--ink); border-color: var(--gold); font-weight: 600; }
.rail-mini .arrow { color: rgba(247,244,236,0.3); font-size: 0.8rem; }
/* rail-mini also appears on light backgrounds ("where this leads" sections) */
.bg-paper2 .rail-mini a, .section:not(.section-on-dark) .rail-mini a { color: var(--slate-soft); border-color: var(--line); }
.bg-paper2 .rail-mini a:hover, .section:not(.section-on-dark) .rail-mini a:hover { color: var(--ink); background: var(--paper); border-color: var(--ink); }
.bg-paper2 .rail-mini .arrow, .section:not(.section-on-dark) .rail-mini .arrow { color: var(--slate-soft); opacity: 0.5; }

/* ---- Hero ---- */
.hero { padding-top: clamp(56px, 9vw, 96px); padding-bottom: clamp(56px, 9vw, 96px); position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }
.hero h1 { margin-bottom: 22px; }
.hero h2 { font-size: clamp(1.2rem, 2vw, 1.6rem); color: var(--gold); font-weight: 500; margin-bottom: 22px; font-family: var(--font-body); }
.hero .lede { margin-bottom: 32px; font-size: clamp(1.05rem, 1.5vw, 1.2rem); }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }
.hero-glow { position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(227,163,60,0.16), transparent 70%); top: -200px; right: -150px; z-index: 0; pointer-events: none; }

/* ---- Mock dashboard / device frame ---- */
.mock-frame { background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-lift); }
.mock-frame .mock-head { display: flex; gap: 6px; margin-bottom: 16px; }
.mock-frame .mock-head span { width: 9px; height: 9px; border-radius: 50%; background: rgba(247,244,236,0.18); }
.mock-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line-dark); }
.mock-row:last-child { border-bottom: none; }
.mock-row .mock-label { font-size: 0.84rem; color: rgba(247,244,236,0.6); }
.mock-row .mock-value { font-family: var(--font-mono); font-size: 0.95rem; color: var(--cream); font-weight: 600; }
.mock-value.up { color: #7FBF8E; }
.mock-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.72rem; color: #7FBF8E; }
.mock-chip .blip { width: 6px; height: 6px; border-radius: 50%; background: #7FBF8E; box-shadow: 0 0 0 3px rgba(127,191,142,0.25); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }

/* ---- Process steps ---- */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
@media (max-width: 1020px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } }
.step .step-no { font-family: var(--font-mono); color: var(--gold-dim); font-size: 0.8rem; margin-bottom: 10px; display: block; }
.step h4 { font-size: 1.02rem; margin-bottom: 8px; color: var(--ink); }
.step p { font-size: 0.88rem; color: var(--slate-soft); }

/* ---- Lead form ---- */
.lead-form-section { background: var(--ink); }
.lead-form-card { background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 48px); max-width: 620px; margin: 0 auto; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field label { font-size: 0.82rem; font-weight: 600; color: rgba(247,244,236,0.8); }
.field input, .field select, .field textarea {
  background: rgba(247,244,236,0.06); border: 1px solid var(--line-dark); color: var(--cream);
  padding: 13px 15px; border-radius: 10px; font-family: var(--font-body); font-size: 0.95rem;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(247,244,236,0.35); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: rgba(247,244,236,0.1); }
.field textarea { resize: vertical; min-height: 90px; }
.field-error { font-size: 0.78rem; color: #E89884; display: none; }
.field.has-error input, .field.has-error textarea { border-color: #C45B3F; }
.field.has-error .field-error { display: block; }
.turnstile-slot { margin: 6px 0 20px; min-height: 65px; }
.form-msg { padding: 13px 16px; border-radius: 10px; font-size: 0.88rem; margin-bottom: 16px; display: none; }
.form-msg.success { display: block; background: rgba(127,191,142,0.14); color: #9FD4AB; border: 1px solid rgba(127,191,142,0.3); }
.form-msg.error { display: block; background: rgba(196,91,63,0.16); color: #E89884; border: 1px solid rgba(196,91,63,0.35); }
.form-note { font-size: 0.78rem; color: rgba(247,244,236,0.45); margin-top: 14px; text-align: center; }

/* ---- CTA band ---- */
.cta-band { background: linear-gradient(135deg, var(--ink) 0%, #0B3C49 100%); border-radius: var(--radius-lg); padding: clamp(40px, 6vw, 72px); text-align: center; position: relative; overflow: hidden; }
.cta-band::before { content:''; position:absolute; width:400px; height:400px; background: radial-gradient(circle, rgba(227,163,60,0.18), transparent 70%); top:-150px; left:-100px; }
.cta-band h2 { color: var(--cream); margin-bottom: 16px; }
.cta-band p { color: rgba(247,244,236,0.7); max-width: 520px; margin: 0 auto 32px; }
.cta-band .hero-ctas { justify-content: center; margin-bottom: 0; }

/* ---- Logo strip ---- */
.logo-strip { display: flex; gap: 40px; flex-wrap: wrap; align-items: center; }
.logo-strip span { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600; color: var(--slate); letter-spacing: 0.01em; }
.img-logo-strip img { height: 28px; width: auto; object-fit: contain; filter: grayscale(100%); opacity: 0.75; transition: filter 0.2s ease, opacity 0.2s ease; }
.img-logo-strip img:hover { filter: grayscale(0%); opacity: 1; }
.section-on-dark .img-logo-strip img { filter: grayscale(100%) brightness(1.6); opacity: 0.6; }
.section-on-dark .img-logo-strip img:hover { filter: grayscale(0%) brightness(1); opacity: 1; }

/* ---- Utility ---- */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.divider { height: 1px; background: var(--line); margin: 48px 0; }
.section-on-dark .divider { background: var(--line-dark); }
.pill-list { display: flex; gap: 10px; flex-wrap: wrap; }
.bg-paper2 { background: var(--paper-2); }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--gold); color: var(--ink); padding: 10px 16px; z-index: 200; }
.skip-link:focus { left: 12px; top: 12px; }

/* Legal page typography */
.legal-content h2 { font-size: 1.4rem; margin: 36px 0 12px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p, .legal-content li { color: var(--slate); font-size: 0.96rem; line-height: 1.75; margin-bottom: 14px; }
.legal-content ul { padding-left: 22px; margin-bottom: 14px; }
.legal-content strong { color: var(--ink); }
.legal-meta { font-family: var(--font-mono); font-size: 0.8rem; color: var(--slate-soft); margin-bottom: 8px; }

/* ---- Brand Marquee (auto-moving carousel, 3 rows, CSS-only) ---- */
.brand-marquee { display: flex; flex-direction: column; gap: 22px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.brand-marquee-row { display: flex; width: max-content; }
.brand-marquee-track { display: flex; align-items: center; gap: 48px; padding-right: 48px; animation: marquee-scroll 38s linear infinite; }
.brand-marquee-row.reverse .brand-marquee-track { animation-direction: reverse; animation-duration: 44s; }
.brand-marquee-row:nth-child(3) .brand-marquee-track { animation-duration: 32s; }
.brand-marquee-track img { height: 32px; width: auto; max-width: 140px; object-fit: contain; filter: grayscale(100%); opacity: 0.7; transition: filter 0.2s ease, opacity 0.2s ease; flex-shrink: 0; }
.brand-marquee-track img:hover { filter: grayscale(0%); opacity: 1; }
.section-on-dark .brand-marquee-track img { filter: grayscale(100%) brightness(1.7); opacity: 0.55; }
.section-on-dark .brand-marquee-track img:hover { filter: grayscale(0%) brightness(1); opacity: 1; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .brand-marquee-track { animation: none; } }

/* ---- Brand Word Cloud (text-only brands, no logo on file) ---- */
.brand-cloud { display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; }
.brand-cloud span { font-family: var(--font-mono); color: var(--slate-soft); white-space: nowrap; transition: color 0.16s ease; }
.brand-cloud span:hover { color: var(--ink); }
.section-on-dark .brand-cloud span { color: rgba(247,244,236,0.45); }
.section-on-dark .brand-cloud span:hover { color: var(--cream); }
.brand-cloud span.size-lg { font-size: 1.05rem; font-weight: 600; }
.brand-cloud span.size-md { font-size: 0.88rem; font-weight: 500; }
.brand-cloud span.size-sm { font-size: 0.74rem; }

/* ---- Flywheel diagram (mobile-first viewBox, scales up on desktop) ---- */
.flywheel-wrap {
  max-width: 420px; margin: 0 auto; display: block; position: relative;
  background: none; border: none; padding: 0; cursor: pointer;
  border-radius: 16px; transition: transform 0.18s ease;
}
.flywheel-wrap:hover { transform: scale(1.015); }
.flywheel-wrap:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
.flywheel-wrap svg { display: block; pointer-events: none; }
.flywheel-expand-hint {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--gold); background: rgba(227,163,60,0.12);
  padding: 6px 14px; border-radius: 999px; pointer-events: none;
}
.flywheel-expand-hint svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ---- Flywheel modal (expanded, fully-labeled view) ---- */
.flywheel-modal {
  position: fixed; inset: 0; z-index: 999; isolation: isolate;
  background: rgba(8,48,59,0.92);
  visibility: hidden; opacity: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
.flywheel-modal.open { visibility: visible; opacity: 1; }
.flywheel-modal-inner {
  background: var(--white); border-radius: 20px; padding: 28px 20px 24px;
  max-width: 560px; width: 100%; max-height: calc(100vh - 48px); overflow-y: auto;
  position: relative;
}
.flywheel-modal-close {
  display: flex; align-items: center; gap: 6px; margin-left: auto; margin-bottom: 12px;
  background: var(--paper-2); border: none; border-radius: 999px;
  padding: 8px 16px; font-family: var(--font-mono); font-size: 0.78rem;
  color: var(--ink); cursor: pointer;
}
.flywheel-modal-close svg { width: 14px; height: 14px; flex-shrink: 0; }
.flywheel-modal-inner > svg[viewBox] { width: 100%; height: auto; display: block; }