/* ============================================================
   Conveyance — Shared Stylesheet v3.1
   Colors: Onyx #1A1A1A · Cream #F2EDE3 · Gold #C9A961
   Display: Georgia (serif, brand spec — see Conveyance_Brain.md and
   brand/wordmark-dark.svg) · Body/UI: Inter (sans)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
  --onyx: #1A1A1A;
  --charcoal: #2C2C2C;
  --mid: #6B6B6B;
  --light: #9A9A9A;
  --cream: #F2EDE3;
  --cream-mid: #E8E2D6;
  --cream-dark: #D4CBBB;
  --surface: #FAFAF8;
  --white: #FFFFFF;

  --accent: #C9A961;
  --accent-dark: #9C7F3F;
  --accent-soft: #F0E6C8;

  --font-display: Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --max: 1080px;
  --nav-h: 82px;
  --radius-lg: 20px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-pill: 100px;
  --shadow-soft: 0 8px 30px rgba(26, 26, 26, 0.07);
  --shadow-card: 0 4px 24px rgba(26, 26, 26, 0.08);
  --shadow-lift: 0 16px 48px rgba(26, 26, 26, 0.12);
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  background: var(--white);
  color: var(--onyx);
  font-family: var(--font-body);
  line-height: 1.65;
  /* ── A LONG STRING MUST NOT PUSH THE PAGE SIDEWAYS ──────────────────
     No overflow-wrap was set anywhere on the public site. An email address
     or a URL inside a narrow card -- support@conveyance.dev in a 327px
     column -- is one unbreakable token, and one of those makes the whole
     document scroll horizontally, not just its own card. break-word rather
     than anywhere: ordinary words still break only when they have to. */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
ul, ol { list-style: none; }

/* TYPOGRAPHY */
h1, h2, h3, h4 { font-family: var(--font-display); text-wrap: balance; }
h1 { font-size: clamp(38px, 5.6vw, 76px); font-weight: 600; line-height: 1.04; letter-spacing: -0.02em; }
h2 { font-size: clamp(28px, 3.6vw, 46px); font-weight: 600; line-height: 1.12; letter-spacing: -0.015em; }
h3 { font-size: clamp(19px, 2.1vw, 25px); font-weight: 600; line-height: 1.3; }
h4 { font-size: 17px; font-weight: 600; font-family: var(--font-body); }
p { font-size: 16px; line-height: 1.75; color: var(--charcoal); max-width: 65ch; }
.eyebrow {
  font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent-dark); display: block;
}
.lead { font-size: clamp(16px, 1.8vw, 20px); line-height: 1.65; color: var(--mid); max-width: 60ch; }

/* CONTAINER */
.container { max-width: var(--max); margin: 0 auto; padding: 0 40px; }
@media (max-width: 640px) { .container { padding: 0 24px; } }

/* ── 9px UPPERCASE AT 0.14em IS NOT READABLE ON A PHONE ────────────────
   The eyebrow labels above card headings and section titles are set at 9px
   and 10px with heavy tracking, inline, in about twenty places across
   index, our-approach, tools, case-studies and blog. Individually they are
   decorative; collectively they are the first thing on most cards, and a
   prospect off a cold email should not have to pinch to read what a section
   is about.
   RAISED HERE RATHER THAN IN TWENTY INLINE STYLES, and only on small
   screens, so the desktop typography is exactly as designed. !important
   because the sizes it overrides are inline. */
@media (max-width: 640px) {
  .eyebrow,
  [style*="letter-spacing:0.14em"],
  [style*="letter-spacing:0.18em"] { font-size: 11px !important; letter-spacing: 0.1em !important; }
}

/* ============================================================
   NAVIGATION — a floating "liquid glass" bubble: heavy blur + saturation,
   a bright inner top highlight to sell the glass edge, a soft outer lift
   shadow, and a full pill radius. Floats with a small margin off every
   edge rather than sitting flush, but still spans almost the full width.
   .nav-inner keeps its own max-width so the logo/links/actions stay
   comfortably contained rather than stretching absurdly wide, while
   using a wider gap so they spread out across the extra room.
   ============================================================ */
nav {
  position: fixed; top: 14px; left: 16px; right: 16px; z-index: 1000;
  /* Safe area. Inert (0px) until the viewport meta opts into the notch with
     viewport-fit=cover -- which this site deliberately does NOT do, because
     without it iOS already lays the page out below the status bar. Declared
     twice so a browser without env() keeps the 14px above. */
  top: calc(14px + env(safe-area-inset-top, 0px));
  height: 68px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  display: flex; align-items: center;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(26, 26, 26, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transition: box-shadow 0.2s;
}
.nav-inner {
  max-width: 1400px; margin: 0 auto; padding: 0 20px;
  width: 100%;
  /* auto/auto/auto with justify-content:center — NOT 1fr/auto/1fr.
     An equal 1fr/1fr split forces both flanking groups into the SAME
     width no matter how much content either one actually has. nav-links
     (~380px) and nav-actions (~490px+, three real buttons) are never
     equal, so "equal halves" mathematically guarantees the heavier side
     overflows into the logo's territory — that's not a sizing edge case,
     it happens at completely ordinary desktop widths, not just narrow
     ones. A fixed real gap between actual-content-width columns can
     never overlap, full stop; the tradeoff is the logo sits at the
     midpoint between the two groups rather than nav-inner's exact
     geometric center when they're asymmetric — a small, honest offset
     instead of an overlap bug. */
  display: grid; grid-template-columns: auto auto auto; justify-content: center;
  align-items: center; column-gap: 72px;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  flex-shrink: 0; grid-column: 2; grid-row: 1;
}
.nav-logo-mark { margin-top: 2px; }
.nav-logo-mark svg { width: 26px; height: 26px; display: block; }
.nav-logo-mark svg path { stroke: var(--onyx) !important; }
.nav-logo-mark svg circle { fill: var(--accent) !important; }
.nav-logo-word {
  font-family: var(--font-display); font-size: 15px; letter-spacing: 0.08em; font-weight: 600;
  color: var(--onyx); text-transform: uppercase;
}
.nav-links {
  display: flex; align-items: center; gap: 22px;
  grid-column: 1; grid-row: 1; justify-self: start;
}
.nav-links a {
  font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--mid); text-decoration: none; transition: color 0.15s;
  white-space: nowrap;
}
.nav-links a:hover, .nav-links a.active { color: var(--onyx); }
.nav-actions { display: flex; gap: 8px; align-items: center; grid-column: 3; grid-row: 1; justify-self: end; }
.nav-portal {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  padding: 10px 18px; border-radius: var(--radius-pill); flex-shrink: 0;
  border: 1px solid var(--cream-dark); background: var(--white); color: var(--onyx);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nav-portal:hover, .nav-portal:focus-visible { background: var(--onyx); color: var(--accent); border-color: var(--onyx); }
.nav-cta {
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  color: var(--cream); background: var(--onyx); text-decoration: none;
  padding: 10px 20px; border-radius: var(--radius-pill); flex-shrink: 0;
  transition: transform 0.15s, box-shadow 0.15s;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.nav-ghost {
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  color: var(--mid); background: transparent; text-decoration: none;
  padding: 10px 20px; border-radius: var(--radius-pill); flex-shrink: 0;
  border: 1px solid var(--cream-dark); transition: color 0.15s, border-color 0.15s;
}
.nav-ghost:hover { color: var(--onyx); border-color: var(--accent); }
/* ── 44x44, BECAUSE THIS IS THE WHOLE NAVIGATION ON A PHONE ───────────
   Three 1.5px bars with 4px margins inside 4px of padding measured about
   28 x 36 -- and 24 x 36 below 480px, where the padding was trimmed on one
   side to buy horizontal room. Under the 44px target in both dimensions,
   on the only control that opens the menu.
   The BARS are unchanged: the box around them grew, using flex to keep them
   centred, so nothing about the icon moves. */
.nav-mobile-toggle {
  display: none; background: none; border: none; cursor: pointer;
  min-width: 44px; min-height: 44px; padding: 0;
  flex-direction: column; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nav-mobile-toggle span {
  display: block; width: 20px; height: 1.5px; background: var(--onyx); margin: 4px 0;
  transition: all 0.2s;
}

/* Measured, not guessed: nav-links (~380px) + logo (~160px) + full
   nav-actions — "Audit Your Business" + "Book a Discovery Call →" +
   "Member Login" (~580px) — need just over 1240px to sit on one line
   with real gaps. Below that, hide nav-links first (the fixed-gap
   layout above never overlaps, so hiding it just needs the hamburger,
   not a cascade of column-width fixes). Full nav-actions on its own
   then comfortably carries down to ~900px; below that, shed the
   Audit ghost button, then the Discovery Call CTA, in that order —
   each threshold has real margin, not a hairline fit. */
@media (max-width: 1360px) {
  .nav-links { display: none; }
  /* flex, not block -- the box is 44x44 and the bars centre inside it. */
  .nav-mobile-toggle { display: flex; }
  .nav-inner { padding: 0 16px; gap: 10px; }
  nav { left: 10px; right: 10px; }
}
@media (max-width: 900px) {
  .nav-ghost { display: none; }
}
@media (max-width: 600px) {
  .nav-cta { display: none; }
}
@media (max-width: 480px) {
  .nav-portal { padding: 8px 10px; }
  .nav-portal-label { display: none; }
  .nav-logo-word { font-size: 12px; }
  .nav-logo { gap: 6px; }
  .nav-logo-mark svg { width: 22px; height: 22px; }
  /* The 44px box stays. It was trimmed to 24px wide here to buy horizontal
     room, which is the one place the room should not have come from. */
  .nav-mobile-toggle { margin-right: -6px; }
}

/* PAGE OFFSET */
.page-body { padding-top: calc(var(--nav-h) + 16px); }
.page-body { padding-top: calc(var(--nav-h) + 16px + env(safe-area-inset-top, 0px)); }

/* ── THE MOBILE MENU LIVES OUTSIDE <nav> ──────────────────────────────
   nav is overflow:hidden (a 999px pill has to clip its own blur), so an
   absolutely positioned dropdown inside it is clipped away entirely -- it
   opens, and none of it is visible or hittable. This is a sibling of nav on
   <body>, built from .nav-links by experience.js, so no clipping ancestor
   is involved. Sits just under the pill and matches its 10px side margins. */
.mobile-nav-menu {
  display: none;
  position: fixed;
  top: calc(var(--nav-h) + 8px);
  top: calc(var(--nav-h) + 8px + env(safe-area-inset-top, 0px));
  left: 10px; right: 10px;
  z-index: 1001;
  flex-direction: column;
  background: var(--onyx);
  border-radius: 20px;
  padding: 8px 10px;
  box-shadow: 0 18px 50px rgba(26, 26, 26, 0.28);
  max-height: calc(100vh - var(--nav-h) - 24px);
  overflow-y: auto;
}
.mobile-nav-menu.open { display: flex; }
/* 44px minimum on every row -- this menu is the whole of navigation here. */
.mobile-nav-menu a {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--cream); text-decoration: none;
  border-bottom: 1px solid rgba(242, 237, 227, 0.1);
}
.mobile-nav-menu a:last-child { border-bottom: none; }
.mobile-nav-menu a:active { color: var(--accent); }
.mobile-nav-menu .mobile-nav-cta {
  color: var(--accent); border-bottom: 1px solid rgba(242, 237, 227, 0.1);
  background: none; padding: 0 12px;
}
/* Never reachable above the breakpoint that reveals the hamburger. */
@media (min-width: 1361px) { .mobile-nav-menu { display: none !important; } }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none; border: none; cursor: pointer;
  padding: 14px 28px; border-radius: var(--radius-pill);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--onyx); color: var(--cream); }
.btn-primary:hover { background: var(--charcoal); box-shadow: var(--shadow-soft); }
.btn-outline { background: transparent; color: var(--onyx); border: 1px solid var(--onyx); }
.btn-outline:hover { background: var(--onyx); color: var(--cream); }
.btn-ghost { background: transparent; color: var(--mid); border: 1px solid var(--cream-dark); }
.btn-ghost:hover { border-color: var(--accent); color: var(--onyx); }
.btn-cream { background: var(--cream); color: var(--onyx); border: 1px solid var(--cream-dark); }
.btn-cream:hover { background: var(--cream-mid); }
.btn-accent { background: var(--accent); color: var(--onyx); }
.btn-accent:hover { background: var(--accent-dark); color: var(--white); box-shadow: var(--shadow-soft); }
.btn-lg { padding: 17px 36px; font-size: 15px; }
.btn-sm { padding: 9px 18px; font-size: 12px; }

/* ============================================================
   HERO — light, centered
   ============================================================ */
.hero {
  background: var(--white);
  padding: 110px 40px 90px;
  text-align: center;
  border-bottom: 1px solid var(--cream-dark);
}
.hero .eyebrow { color: var(--accent-dark); margin-bottom: 20px; }
.hero h1 { color: var(--onyx); max-width: 820px; margin: 0 auto 24px; }
.hero .hero-sub {
  font-size: clamp(16px, 1.8vw, 20px); color: var(--mid);
  max-width: 580px; margin: 0 auto 40px; line-height: 1.65;
}
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.hero-scroll {
  display: block; text-align: center; margin-top: 64px;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--light);
  text-decoration: none;
}
.hero-scroll::after { content: '↓'; display: block; margin-top: 6px; font-size: 16px; }

/* ============================================================
   STATS BAR — light cream
   ============================================================ */
.stats-bar {
  background: var(--cream); border-top: 1px solid var(--cream-dark); border-bottom: 1px solid var(--cream-dark);
}
.stats-inner {
  max-width: var(--max); margin: 0 auto; padding: 0 40px;
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.stat-item {
  padding: 32px 32px;
  border-right: 1px solid var(--cream-dark);
  text-align: center;
}
.stat-item:last-child { border-right: none; }
.stat-number { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 4vw, 44px); color: var(--onyx); letter-spacing: -0.02em; display: block; line-height: 1; }
.stat-label { font-size: 13px; color: var(--mid); margin-top: 8px; display: block; line-height: 1.4; }

@media (max-width: 640px) {
  .stats-inner { grid-template-columns: 1fr; }
  .stat-item { border-right: none; border-bottom: 1px solid var(--cream-dark); }
  .stat-item:last-child { border-bottom: none; }
}

/* ============================================================
   SECTIONS — increased whitespace
   ============================================================ */
.section { padding: 120px 40px; }
.section-sm { padding: 56px 40px; }
.section-dark { background: var(--onyx); color: var(--cream); }
.section-dark p { color: var(--mid); }
.section-dark .eyebrow { color: var(--accent); }
.section-surface { background: var(--surface); }

.section-header { margin-bottom: 56px; }
.section-header .eyebrow { margin-bottom: 12px; }
.section-header h2 { max-width: 640px; }
.section-header p { margin-top: 16px; max-width: 560px; }
.section-header.center { text-align: center; }
.section-header.center h2, .section-header.center p { margin-left: auto; margin-right: auto; }

/* ============================================================
   STEP / PROCESS
   ============================================================ */
/* ── THE FIVE PHASES ─────────────────────────────────────────────────────
   THIS WAS FIVE EQUAL COLUMNS. At the page's own width that gave each phase
   about 200px to hold a name, a sentence-long heading, a paragraph and a tag
   -- Kade: "skinny, kind of mappy." The stagger made it worse: alternate
   cards dropped 22px and a little arrow sat in each gap, so five steps of one
   process read as a diagram of something.

   THE WORDS WERE FINE. This is the same five phases in the same order, as
   WIDE ROWS instead. A sequence reads down, each row gets the full measure,
   and the phase name sits in a rail on the left where it works as a spine.

   NOTHING IS STAGGERED AND NOTHING POINTS. The order is the order; a numbered
   rail says so without ornament. */
.steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.step {
  background: var(--surface);
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 32px;
  align-items: start;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.step:hover { box-shadow: var(--shadow-card); border-color: var(--light); }
/* The rail: phase name over its tag, so "Discovery — free, no commitment"
   reads as one thing rather than as a label and a badge at opposite ends. */
.step-rail { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.step-body { min-width: 0; }

@media (max-width: 820px) {
  /* THE RAIL GOES ON TOP rather than shrinking. A 190px column of label
     beside a paragraph is the skinny problem again, one breakpoint down. */
  .step { grid-template-columns: 1fr; gap: 14px; padding: 24px 22px; }
  .step-rail { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .step { padding: 22px 18px; }
}
.step-num {
  font-family: var(--font-display); font-size: 17px; letter-spacing: 0.02em;
  color: var(--accent-dark); margin-bottom: 0; display: block; font-weight: 600;
}
.step h3 { margin-bottom: 12px; }
.step p { font-size: 14px; line-height: 1.65; }
.step .step-tag {
  display: inline-block; margin-top: 0;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  background: var(--accent-soft); color: var(--accent-dark); padding: 4px 11px; border-radius: var(--radius-pill);
}

/* ============================================================
   CARDS / GRID
   ============================================================ */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.card-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

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

.card {
  background: var(--white); border: 1px solid var(--cream-dark); border-radius: var(--radius-lg);
  padding: 28px; transition: box-shadow 0.2s, transform 0.15s;
}
.card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.card .card-icon { font-size: 18px; margin-bottom: 14px; color: var(--accent-dark); }
.card h4 { margin-bottom: 10px; }
.card p { font-size: 14px; line-height: 1.6; color: var(--mid); }

.card-dark {
  background: var(--onyx); border-color: var(--charcoal);
}
.card-dark h4 { color: var(--cream); }
.card-dark p { color: #8a8a8a; }

/* SYSTEM CARDS */
.system-card {
  background: var(--white); border: 1px solid var(--cream-dark); border-radius: var(--radius-md);
  padding: 24px 26px; display: flex; align-items: flex-start; gap: 16px;
  transition: box-shadow 0.2s, transform 0.15s;
}
.system-card:hover { box-shadow: var(--shadow-card); transform: translateY(-1px); }
.system-num {
  font-family: var(--font-display); font-size: 13px; letter-spacing: 0.04em; color: var(--accent-dark); font-weight: 600;
  flex-shrink: 0; padding-top: 4px; width: 28px;
}
.system-content h4 { margin-bottom: 6px; }
.system-content p { font-size: 13px; color: var(--mid); line-height: 1.55; }

/* ============================================================
   MEDIA PLACEHOLDER — styled hold, not a visible "TODO"
   ============================================================ */
.media-placeholder {
  background: linear-gradient(135deg, var(--surface) 0%, var(--cream-mid) 100%);
  border: 1px solid var(--cream-dark); border-radius: var(--radius-lg);
  padding: 56px 40px; text-align: center; position: relative; overflow: hidden;
}
.media-placeholder::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(26,26,26,0.05) 1px, transparent 0);
  background-size: 22px 22px; pointer-events: none;
}
.media-placeholder-icon {
  width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
  color: var(--accent-dark); font-size: 16px; position: relative;
}
.media-placeholder-label {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-dark);
  margin-bottom: 8px; font-weight: 600; position: relative;
}
.media-placeholder-desc {
  font-size: 13px; color: var(--mid); font-style: italic; margin: 0; max-width: 440px; margin: 0 auto; position: relative;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-item { border-bottom: 1px solid var(--cream-dark); }
.faq-q {
  width: 100%; background: none; border: none; text-align: left;
  font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--onyx);
  padding: 20px 0; cursor: pointer; display: flex; justify-content: space-between;
  align-items: center; gap: 20px;
}
.faq-q:hover { color: var(--accent-dark); }
.faq-toggle { font-size: 18px; flex-shrink: 0; transition: transform 0.2s; color: var(--accent-dark); }
.faq-item.open .faq-toggle { transform: rotate(45deg); }
.faq-a {
  display: none; padding: 0 0 20px 0;
  font-size: 14px; color: var(--mid); line-height: 1.7;
}
.faq-item.open .faq-a { display: block; }

/* ============================================================
   FORM
   ============================================================ */
.wl-form { }
.wl-field { margin-bottom: 20px; }
.wl-label {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--light); margin-bottom: 8px;
}
.wl-input {
  width: 100%; padding: 14px 16px;
  border: 1px solid var(--cream-dark); border-radius: var(--radius-sm);
  background: var(--white); font-family: var(--font-body); font-size: 15px; color: var(--onyx);
  transition: border-color 0.15s;
}
.wl-input:focus { outline: none; border-color: var(--accent); }
.wl-input::placeholder { color: var(--light); }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--light); margin-bottom: 8px; }
.form-input {
  width: 100%; padding: 14px 16px;
  border: 1px solid var(--cream-dark); border-radius: var(--radius-sm);
  background: var(--white); font-family: var(--font-body); font-size: 15px; color: var(--onyx);
  transition: border-color 0.15s;
}
.form-input:focus { outline: none; border-color: var(--accent); }
.form-input::placeholder { color: var(--light); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-submit { width: 100%; margin-top: 8px; }
.form-note { font-size: 12px; color: var(--light); margin-top: 12px; }

@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }

/* ============================================================
   CTA BANNER — light cream
   ============================================================ */
.cta-banner {
  background: var(--cream); padding: 110px 40px; text-align: center;
  border-top: 1px solid var(--cream-dark);
}
.cta-banner h2 { color: var(--onyx); margin-bottom: 16px; }
.cta-banner p { color: var(--mid); margin-bottom: 36px; max-width: 480px; margin-left: auto; margin-right: auto; }
.cta-banner .eyebrow { color: var(--accent-dark); margin-bottom: 12px; }
/* Buttons on cream background */
.cta-banner .btn-cream { background: var(--onyx); color: var(--cream); border-color: var(--onyx); }
.cta-banner .btn-cream:hover { background: var(--charcoal); }
.cta-banner .btn-ghost { border-color: var(--onyx); color: var(--onyx); }
.cta-banner .btn-ghost:hover { background: var(--onyx); color: var(--cream); }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background: var(--onyx); border-top: 1px solid #2C2C2C;
  padding: 44px 40px;
}
.footer-inner {
  max-width: var(--max); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
}
.footer-logo { font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: 0.02em; color: var(--cream); text-decoration: none; }
.footer-links { display: flex; gap: 24px; }
.footer-links a { font-size: 12px; letter-spacing: 0.03em; color: #8a8a8a; text-decoration: none; transition: color 0.15s; }
.footer-links a:hover { color: var(--accent); }
.footer-social { display: flex; gap: 14px; }
.footer-social a { color: #8a8a8a; display: flex; transition: color 0.15s; }
.footer-social a:hover { color: var(--accent); }
.footer-copy { font-size: 12px; color: #5a5a5a; }

/* Member Login — deliberately gold/prominent, not just another quiet nav-portal link */
.nav-portal-gold {
  border-color: var(--cream-dark) !important;
  color: var(--accent-dark) !important;
  background: transparent !important;
}
.nav-portal-gold:hover, .nav-portal-gold:focus-visible {
  background: var(--onyx) !important; color: var(--accent) !important; border-color: var(--onyx) !important;
}

/* ============================================================
   INTERIOR PAGE HERO — light
   ============================================================ */
.page-hero {
  background: var(--white); padding: 88px 40px 76px;
  border-bottom: 1px solid var(--cream-dark);
  position: relative; overflow: hidden;
}
.page-hero .eyebrow { color: var(--accent-dark); margin-bottom: 12px; }
.page-hero h1 { color: var(--onyx); max-width: 720px; margin-bottom: 16px; position: relative; }
.page-hero .lead { max-width: 560px; position: relative; }
/* Ghost number visible on light bg */
.page-hero-ghost { color: var(--cream-dark) !important; }

/* ============================================================
   DIVIDERS / UTILITIES
   ============================================================ */
.rule { width: 48px; height: 2px; background: var(--accent); margin: 28px 0; border-radius: 2px; }
.rule-dark { background: var(--accent); }
.text-mid { color: var(--mid); }
.text-light { color: var(--light); }
.italic { font-style: italic; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; }

/* ============================================================
   MARQUEE BAND — override experience.css dark styles
   ============================================================ */
.marquee-band {
  background: var(--cream-mid) !important;
  border-top: 1px solid var(--cream-dark) !important;
  border-bottom: 1px solid var(--cream-dark) !important;
}
.marquee-item { color: var(--mid) !important; }
.marquee-item span { color: var(--cream-dark) !important; }

/* ============================================================
   SCROLL PROGRESS BAR — visible on light nav
   ============================================================ */
.scroll-bar { background: var(--cream-dark) !important; }
.scroll-bar-fill { background: var(--accent) !important; }

/* ============================================================
   HERO SECTION — content-sized, two-column
   ============================================================ */
.hero-section {
  background: var(--white);
  border-bottom: 1px solid var(--cream-dark);
  min-height: 520px;
  position: relative;
  background-image:
    linear-gradient(rgba(212,203,187,0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,203,187,0.35) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 380px;
  max-width: 1400px;
  margin: 0 auto;
  gap: 48px;
  padding: 0 48px;
  min-height: 520px;
}
.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 0 88px;
  position: relative;
}
.hero-left .hero-eyebrow-wrap { margin-bottom: 22px; }
.hero-left h1 {
  font-size: clamp(46px, 5.4vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--onyx);
  margin: 0 0 44px;
}
.hero-left .hero-actions {
  display: flex; align-items: center; justify-content: flex-start; gap: 14px; flex-wrap: wrap;
}
/* ── THE SCROLL CUE ──────────────────────────────────────────────────────
   Replaced "See How We Work", which was a second button pointing off the
   page. This keeps the promise and keeps the visitor: a large arrow to the
   first thing worth reading.

   BIG ON PURPOSE. Kade: "a huge down arrow so they stay on this page." It is
   the only other thing in the hero's left column, so it has room to be the
   size it needs to be without competing with the one real button above it.

   The bob is the affordance -- it says "there is more below" without a word
   -- and it stops on prefers-reduced-motion, where the arrow is still an
   arrow and still points down. */
.hero-scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 40px;
  color: var(--mid);
  text-decoration: none;
  transition: color 0.2s;
}
.hero-scroll-cue:hover { color: var(--onyx); }
.hero-scroll-cue-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero-scroll-cue-arrow {
  display: block;
  animation: hero-cue-bob 2.4s ease-in-out infinite;
}
.hero-scroll-cue:hover .hero-scroll-cue-arrow { animation-play-state: paused; }
@keyframes hero-cue-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue-arrow { animation: none; }
}

.hero-right {
  background: var(--onyx);
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  position: relative;
}
.hero-aside-label {
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  color: var(--accent); margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #2c2c2c;
}
.hero-aside-def {
  font-family: var(--font-display); font-size: 14px; color: #ccc;
  line-height: 1.55; margin-bottom: 18px; letter-spacing: 0.005em;
}
.hero-aside-body {
  font-size: 13px; color: #aaa; line-height: 1.8;
}
/* Integration icon row */
.integration-bar  { display: flex; align-items: center; gap: 10px; margin-top: 36px; flex-wrap: wrap; }
.integration-bar-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--light); margin-right: 4px; white-space: nowrap; }
.int-icon { width: 28px; height: 28px; border: 1px solid var(--cream-dark); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--mid); letter-spacing: 0; flex-shrink: 0; transition: border-color 0.15s; }
.int-icon:hover { border-color: var(--accent); }
@keyframes fadeInBar { to { opacity: 1; } }

/* Floating activity bubbles — CSS-only, no image assets */
.hero-bubble {
  position: absolute; background: var(--white); border: 1px solid var(--cream-dark);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lift);
  padding: 10px 16px; font-size: 12px; color: var(--onyx);
  display: flex; align-items: center; gap: 8px;
  animation: bubbleFloat 6s ease-in-out infinite;
  z-index: 2;
}
.hero-bubble .bubble-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.hero-bubble-1 { top: 3%; right: 2%; animation-delay: 0s; }
.hero-bubble-2 { top: 13%; right: 12%; animation-delay: 2s; }
@keyframes bubbleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@media (max-width: 1080px) { .hero-bubble { display: none; } }

@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; min-height: auto; padding: 0; gap: 0; }
  .hero-left { padding: 60px 40px 48px; }
  .hero-right { min-height: 260px; }
}
@media (max-width: 640px) {
  .hero-left { padding: 52px 24px 40px; }
  .hero-left h1 { font-size: clamp(36px, 9vw, 56px); }
  .hero-left .hero-actions { flex-direction: column; width: 100%; }
  .hero-left .hero-actions .btn { width: 100%; justify-content: center; }
  /* CENTRED ON A PHONE, where the column is the full width and a
     left-aligned arrow under a full-width button reads as misplaced. */
  .hero-scroll-cue { align-self: center; margin-top: 32px; }
}
/* ── THE PRICING CALLOUT ─────────────────────────────────────────────────
   Kade: "it needs to be huge, right there." It was a paragraph with the
   audit link buried in its last sentence, styled identically to every other
   note box on the page -- so the one action that answers "what does this
   cost" looked like a footnote.

   The button is the point. Full width on a phone, and never smaller than the
   thing it replaced was long. */
.pricing-callout {
  background: var(--surface);
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius-lg, 8px);
  padding: 34px 36px;
  margin-top: 36px;
  text-align: center;
}
.pricing-callout-title {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.6vw, 27px);
  color: var(--onyx);
  margin: 0 0 12px;
}
.pricing-callout-body {
  font-size: 15px;
  line-height: 1.75;
  color: var(--mid);
  max-width: 560px;
  margin: 0 auto 24px;
}
.pricing-callout-btn { font-size: 16px; padding: 16px 34px; }
@media (max-width: 640px) {
  .pricing-callout { padding: 28px 20px; }
  .pricing-callout-btn { width: 100%; justify-content: center; }
}

/* ── FOUNDER PHOTO ───────────────────────────────────────────────────────
   Noah: "I don't care if it's a selfie of us at the Xbox, we need our faces
   on this thing."

   THE PLACEHOLDER IS DELIBERATELY UGLY. A neat grey box reads as a design
   choice and ships; a dashed box naming the exact file it is waiting for does
   not survive a single look at the page. It carries the path so nobody has to
   go and find this comment.

   Sized for a landscape shot and NOT cropped: object-fit is contain, so
   whatever is in frame is what shows. A face cropped out by a container is
   worse than a photo that does not fill it. */
.founders-photo-wrap { max-width: 720px; margin: 0 auto; }
.founders-photo,
.founders-photo-placeholder {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg, 8px);
}
.founders-photo { height: auto; object-fit: contain; }
.founders-photo-placeholder {
  aspect-ratio: 3 / 2;
  border: 2px dashed var(--cream-dark);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 24px;
}
.founders-photo-label {
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--light);
}
.founders-photo-file {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--mid); word-break: break-all;
}
.founders-caption {
  font-size: 13px; color: var(--light); text-align: center; margin-top: 14px;
}

/* ============================================================
   STATEMENT SECTION — one big centered thought
   ============================================================ */
.statement-section {
  padding: 100px 40px;
  background: var(--white);
  border-bottom: 1px solid var(--cream-dark);
  text-align: center;
}
.statement-text {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(22px, 3vw, 40px);
  line-height: 1.4;
  color: var(--onyx);
  max-width: 820px;
  margin: 0 auto;
  letter-spacing: -0.01em;
}
@media (max-width: 640px) { .statement-section { padding: 64px 24px; } }

/* ============================================================
   PROCESS TIMELINE
   ============================================================ */
.process-timeline { display: flex; flex-direction: column; }
.process-step {
  display: grid; grid-template-columns: 32px 1fr; gap: 20px;
  padding: 24px 0; border-bottom: 1px solid var(--cream-dark);
  align-items: start;
}
.process-step:last-child { border-bottom: none; }
.process-num {
  font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-dark); padding-top: 5px;
}
.process-content h4 { font-size: 16px; margin-bottom: 6px; }
.process-content p { font-size: 13px; color: var(--mid); line-height: 1.6; margin: 0; }

/* ============================================================
   CONVEYANCE CONFIGURATOR — public live pricing slider
   ============================================================ */
.rate-chip {
  background: var(--surface); border: 1px solid var(--cream-dark); border-radius: var(--radius-pill);
  padding: 10px 18px; font-family: var(--font-display); font-weight: 500; font-size: 15px; color: var(--onyx);
  display: flex; align-items: baseline; gap: 6px;
}
.rate-chip span { font-family: var(--font-body); font-size: 11px; color: var(--mid); }
.rate-chip-soon { background: var(--cream-mid); opacity: 0.75; }
.rate-chip-soon span { text-transform: uppercase; letter-spacing: 0.06em; }

.configurator {
  display: grid; grid-template-columns: 1fr 300px; gap: 40px;
  background: var(--white); border: 1px solid var(--cream-dark); border-radius: var(--radius-lg);
  padding: 44px; align-items: center;
  box-shadow: var(--shadow-card);
}
.configurator-controls { display: flex; flex-direction: column; gap: 28px; }
.config-group-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-dark); margin-bottom: -12px;
}
.config-group-label:not(:first-child) {
  margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--cream-dark);
}
.config-group-label .config-group-sub {
  text-transform: none; letter-spacing: normal; font-weight: 400; color: var(--light); font-size: 11px;
}
.config-slider-row { display: flex; flex-direction: column; gap: 8px; }
.config-slider-label { display: flex; justify-content: space-between; font-size: 14px; color: var(--onyx); }
.config-slider-label span:last-child { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--accent-dark); }
.config-slider-row input[type="range"] { width: 100%; accent-color: var(--accent); cursor: pointer; }
.config-slider-hint { font-size: 11px; color: var(--light); }

.configurator-total {
  background: var(--onyx); border-radius: var(--radius-md); padding: 32px 28px;
  display: flex; flex-direction: column; gap: 6px; text-align: center;
}
.configurator-total-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.configurator-total-amount { font-family: var(--font-display); font-weight: 600; font-size: 42px; color: var(--cream); }
.configurator-total-sub { font-size: 12px; color: #999; }
.configurator-total-note { font-size: 11px; color: #777; margin-top: 10px; line-height: 1.5; }

@media (max-width: 768px) {
  .configurator { grid-template-columns: 1fr; padding: 28px 24px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .section { padding: 84px 32px; }
  .hero { padding: 76px 32px 64px; }
  .stats-inner { padding: 0 32px; }
  .cta-banner { padding: 84px 32px; }
}
@media (max-width: 640px) {
  .section { padding: 56px 24px; }
  .hero { padding: 56px 24px 48px; }
  h1 { font-size: clamp(30px, 8vw, 44px); }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  footer { padding: 32px 24px; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-links { flex-wrap: wrap; row-gap: 10px; }
  .cta-banner { padding: 56px 24px; }
}