/* Smart Chic Systems — shared design system CSS. See design.md for the source spec. */

:root {
  --noir: #0B0C0C;
  --noir-soft: #161818;
  --white: #FFFFFF;
  --ivory: #F7F5F0;
  --ink: #1B1D1D;
  --ink-muted: #5A6062;
  --teal: #0E5751;
  --teal-deep: #0A403C;
  --teal-ink: #07302D;
  --teal-bright: #4FA69C;
  --gold: #C2A15B;
  --gold-bright: #E6CD94;
  --gold-deep: #997A3D;
  --gold-ink: #826834;
  --silver: #AEB4B8;
  --silver-deep: #83898D;
  --silver-line: rgba(131,137,141,.35);
  --display: 'Playfair Display', Didot, 'Bodoni MT', Georgia, serif;
  --body: 'Montserrat', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 70px; }
body {
  margin: 0;
  padding-top: 70px;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link: hidden until keyboard-focused, lets keyboard/screen-reader users bypass the nav (WCAG 2.4.1) */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 1000;
  background: var(--gold);
  color: var(--noir);
  padding: 14px 24px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.skip-link:focus {
  top: 0;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.08;
  margin: 0;
}

.eyebrow {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-ink); /* WCAG AA: --gold fails contrast on ivory/white (2.3:1); this darker shade passes 4.5:1+ */
}

.ornament {
  display: block;
  color: var(--gold-ink); /* same contrast fix as .eyebrow */
  font-size: 14px;
  margin: 20px 0;
}

/* On dark sections, the original bright --gold already passes contrast (5.8-8:1), so restore it there */
.on-dark .eyebrow,
.on-dark .ornament {
  color: var(--gold);
}

.rule {
  width: 64px;
  height: 1px;
  background: var(--gold);
  border: 0;
  margin: 28px 0;
}
.rule.center { margin-left: auto; margin-right: auto; }

/* Buttons */
.btn {
  display: inline-block;
  padding: 16px 32px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--gold-ink); /* WCAG AA: plain --gold border is 2.3:1 on ivory/white, under the 3:1 UI-component minimum */
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.btn:hover { background: var(--gold); color: var(--noir); }
.btn--on-dark { color: var(--ivory); border-color: var(--gold); }
.btn--on-dark:hover { background: var(--gold); color: var(--noir); }
/* Filled primary. Reserve for the single most important action on a screen.
   gold-ink on ivory is the same pairing used for the critical badge, already
   verified for contrast. */
.btn--primary {
  background: var(--gold-ink);
  border-color: var(--gold-ink);
  color: var(--ivory);
}
.btn--primary:hover { background: var(--noir); border-color: var(--noir); color: var(--ivory); }
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }

/* Nav */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--noir);
  padding: 22px 0;
  z-index: 100;
}
.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.nav__brand { display: inline-flex; }
.nav__brand img { height: 26px; width: auto; display: block; }
.nav__links {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver);
  transition: color .2s ease;
}
.nav__links a:hover { color: var(--gold); }
.nav__links a.is-current { color: var(--gold); }

/* Nav dropdown ("Industries") */
.nav__dropdown { position: relative; }
.nav__dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver);
  cursor: pointer;
  transition: color .2s ease;
}
.nav__dropdown-toggle:hover,
.nav__dropdown-toggle.is-current { color: var(--gold); }
.nav__caret {
  font-size: 8px;
  line-height: 1;
  transition: transform .2s ease;
}
.nav__dropdown.is-open .nav__caret { transform: rotate(180deg); }
.nav__dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 18px;
  min-width: 240px;
  background: var(--noir-soft);
  border: 1px solid var(--silver-line);
  list-style: none;
  padding: 8px 0;
  z-index: 200;
}
.nav__dropdown.is-open .nav__dropdown-menu { display: block; }
.nav__dropdown-menu a {
  display: block;
  padding: 12px 22px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver);
  white-space: nowrap;
  transition: color .2s ease, background-color .2s ease;
}
.nav__dropdown-menu a:hover { color: var(--gold); background: rgba(194,161,91,0.06); }
.nav__dropdown-menu a.is-current { color: var(--gold); }

/* Mobile nav toggle (hidden on desktop) */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--gold);
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.nav__toggle-bar {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--gold);
  transition: transform .2s ease, opacity .2s ease;
}
.nav__toggle-bar + .nav__toggle-bar { margin-top: 5px; }
.nav.is-open .nav__toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav__toggle-bar:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Sections */
section { padding: 100px 0; }
section.tight { padding: 80px 0; }
.on-dark { color: var(--ivory); }
.on-dark .ink-muted-eq { color: var(--silver); }
/* .prose p is --ink-muted, which lands at 2.2:1 on teal-ink and noir, so any .prose
   placed inside a dark section was unreadable. Same --silver treatment as
   .ink-muted-eq above. */
.on-dark .prose p { color: var(--silver); }
.on-dark .prose p.prose__lead,
.on-dark .prose strong,
.on-dark .prose h2,
.on-dark .prose h3 { color: var(--ivory); }

.bg-ivory { background: var(--ivory); }
.bg-white { background: var(--white); }
.bg-noir { background: var(--noir); }
.bg-teal-ink { background: var(--teal-ink); }

/* Hero */
.hero { text-align: center; }
.hero__eyebrow { display: block; }
.hero h1 {
  font-size: clamp(40px, 7vw, 92px);
  color: var(--noir);
  margin-top: 4px;
}
.hero h1.on-dark-heading { color: var(--ivory); }
.hero__sub {
  max-width: 640px;
  margin: 28px auto 0;
  font-size: 18px;
  color: var(--ink-muted);
}
.hero__sub.on-dark-sub { color: var(--silver); }
.hero .btn-row { justify-content: center; margin-top: 12px; }
.hero.hero--left { text-align: left; }
.hero.hero--left .hero__sub { margin: 28px 0 0; }
.hero.hero--left .rule { margin-left: 0; }
.hero.hero--left .btn-row { justify-content: flex-start; }

/* Photographic hero. The image already carries a dark left third, but a scrim
   is still applied so the copy stays legible no matter how the image crops at
   narrow widths. */
.hero--image {
  position: relative;
  background-color: var(--noir);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  overflow: hidden;
}
.hero--image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(11, 12, 12, 0.92) 0%,
    rgba(11, 12, 12, 0.80) 34%,
    rgba(11, 12, 12, 0.45) 62%,
    rgba(11, 12, 12, 0.30) 100%
  );
}
/* Center-aligned image heroes need a vertical scrim instead of the left-weighted
   one, since the copy sits over the middle of the frame rather than the edge. */
.hero--image:not(.hero--left)::before {
  background: linear-gradient(
    180deg,
    rgba(11, 12, 12, 0.88) 0%,
    rgba(11, 12, 12, 0.74) 45%,
    rgba(11, 12, 12, 0.90) 100%
  );
}
/* The front-door photo carries its one lit doorway at ~74% across. Anchoring
   left keeps it there on wide screens so it clears the centred copy; the
   default right anchor would drag it back under the last lines. Below 900px
   the frame crops to a tall sliver, so re-centre or the doorway falls off. */
.hero--front-door { background-position: center left; }
@media (max-width: 900px) {
  .hero--front-door { background-position: 74% center; }
}
.hero--image > .wrap { position: relative; z-index: 1; }
.hero--image h1 { color: var(--ivory); }
.hero--image .hero__eyebrow { color: var(--gold); }
.hero--image .hero__sub { color: var(--silver); }
.hero--image .ornament { color: var(--gold); }
.hero--image .rule { border-top-color: rgba(247, 245, 240, 0.28); }
/* Any plain .btn dropped into a photographic hero would otherwise render its
   default dark ink on a dark image and disappear. Handled here rather than by
   remembering to add .btn--on-dark at every call site. */
.hero--image .btn:not(.btn--primary) {
  color: var(--ivory);
  border-color: var(--gold);
}
.hero--image .btn:not(.btn--primary):hover {
  background: var(--gold);
  color: var(--noir);
}
/* Same problem, any dark section rather than only a photographic hero. A plain
   .btn renders --ink on --teal-ink and effectively disappears. .btn--on-dark
   exists for this but relies on remembering it at every call site, and it had
   already been missed on /sites and /main-street. Handled here instead. */
.on-dark .btn:not(.btn--primary) {
  color: var(--ivory);
  border-color: var(--gold);
}
.on-dark .btn:not(.btn--primary):hover {
  background: var(--gold);
  color: var(--noir);
}
/* ...but a light-surfaced component can sit inside a dark section, and the
   rule above would then paint ivory text on a white card. Put those buttons
   back to the on-light treatment. Any new light surface used inside .on-dark
   belongs in this list. */
.on-dark .vertical-card .btn:not(.btn--primary),
.on-dark .tier-card .btn:not(.btn--primary),
.on-dark .faq-item .btn:not(.btn--primary),
.on-dark .calc .btn:not(.btn--primary),
.on-dark .checker-result .btn:not(.btn--primary),
.on-dark .checker-gate .btn:not(.btn--primary) {
  color: var(--ink);
  border-color: var(--gold-ink);
}
.on-dark .vertical-card .btn:not(.btn--primary):hover,
.on-dark .tier-card .btn:not(.btn--primary):hover,
.on-dark .faq-item .btn:not(.btn--primary):hover,
.on-dark .calc .btn:not(.btn--primary):hover,
.on-dark .checker-result .btn:not(.btn--primary):hover,
.on-dark .checker-gate .btn:not(.btn--primary):hover {
  background: var(--gold);
  color: var(--noir);
}

/* Hero split: copy beside a live phone demo */
.hero__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 72px;
  align-items: center;
}
.hero__split .hero__sub { max-width: none; }
/* The text column is ~660px in a split hero, so full display size runs to five
   lines and towers over the phone. Scale the headline to the column it lives in. */
.hero__split h1 { font-size: clamp(36px, 4.6vw, 68px); }
.hero__split .rule { margin-left: 0; }
.hero__split .btn-row { justify-content: flex-start; }
.phone-frame {
  position: relative;
  width: 300px;
  margin: 0 auto;
  padding: 12px;
  border-radius: 46px;
  background: var(--noir);
  border: 1px solid rgba(194, 161, 91, 0.5);
  box-shadow: 0 30px 80px rgba(11, 12, 12, 0.35), 0 4px 18px rgba(11, 12, 12, 0.2);
}
.phone-frame::before {
  /* notch pill over the screen, matching the demo's simulated safe-area inset */
  content: "";
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 20px;
  border-radius: 11px;
  background: var(--noir);
  z-index: 2;
}
.phone-frame__screen {
  border-radius: 35px;
  overflow: hidden;
  aspect-ratio: 9 / 19;
  background: #141210;
}
.phone-frame__screen iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.phone-frame__caption {
  margin: 20px 0 0;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Ledger / stats */
.ledger__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
  text-align: center;
}
.ledger__grid.ledger__grid--4 { grid-template-columns: repeat(4, 1fr); }
.stat__num {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  color: var(--gold-bright);
  line-height: 1;
}
.stat__label {
  margin-top: 14px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver);
}

/* Section head */
.section-head { text-align: center; max-width: 680px; margin: 0 auto 64px; }
.section-head.section-head--left { text-align: left; margin: 0 0 48px; }
.section-head h2 { font-size: clamp(30px, 4vw, 44px); color: var(--ink); margin-top: 4px; }
.section-head--on-dark h2 { color: var(--ivory); }
.section-head p { margin-top: 20px; color: var(--ink-muted); font-size: 16px; }
.section-head--on-dark p { color: var(--silver); }

/* Method */
.method__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
/* Column-count modifiers (use these instead of inline grid styles so the mobile
   media query can still collapse them; inline styles would override it) */
.method__grid--3 { grid-template-columns: repeat(3, 1fr); }
.method__grid--2 { grid-template-columns: repeat(2, 1fr); }
/* Bento layout for 3-card offer grids (e.g. Main Street "What's Included"):
   two wide tiles stacked left, one tall featured tile on the right. Sharp
   corners and existing palette only, no rounded corners per design.md. */
.method__grid--bento {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
}
.method__grid--bento .vertical-card:nth-child(1) { grid-column: span 2; }
.method__grid--bento .vertical-card:nth-child(2) { grid-column: span 1; grid-row: span 2; }
.method__grid--bento .vertical-card:nth-child(3) { grid-column: span 2; }
.method__grid--bento .vertical-card {
  transition: transform .2s ease, box-shadow .2s ease;
}
.method__grid--bento .vertical-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(11,12,12,.16);
}
.method__step .ornament { margin: 0 0 16px; font-size: 16px; }
.method__step h3 {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 10px;
}
.method__step p { font-size: 14.5px; color: var(--ink-muted); margin: 0; }
/* Consecutive paragraphs in a step ran together with no gap. */
.method__step p + p { margin-top: 16px; }
/* On a dark section, restore light-on-dark text (same fix pattern as .principle / .cta / .proof p) */
.on-dark .method__step h3 { color: var(--ivory); }
.on-dark .method__step p { color: var(--silver); }

/* Verticals */
.verticals__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.vertical-card {
  background: var(--white);
  border: 1px solid var(--silver-line);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.vertical-card__media {
  display: block;
  width: calc(100% + 64px);
  max-width: calc(100% + 64px); /* overrides the global img{max-width:100%} reset, which otherwise clamps this bleed back to the card's padded content width */
  margin: -40px -32px 24px;
  height: auto;
  border-bottom: 1px solid var(--silver-line);
}
/* Featured tile within a bento grid: same white/silver-line surface,
   only the border reads gold and the tile centers its content vertically
   since it spans two rows worth of height. */
.vertical-card--featured {
  border-color: var(--gold-ink);
  justify-content: center;
}
.vertical-card__eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink); /* WCAG AA: gold-deep is 4.0:1 on white, under the 4.5:1 minimum for small text */
}
.vertical-card h3 {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
  margin: 10px 0 4px;
}
.vertical-card__index {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin-bottom: 18px;
}
.vertical-card p.desc {
  font-size: 14.5px;
  color: var(--ink-muted);
  flex-grow: 1;
  margin: 0 0 28px;
}
.vertical-card .btn { align-self: flex-start; }

/* Feature list inside a pricing tier card. */
.tier-feats {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}
.tier-feats li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.5;
  margin-bottom: 9px;
}
.tier-feats li::before {
  content: "\25C6";
  position: absolute;
  left: 0;
  top: 5px;
  color: var(--gold-ink);
  font-size: 7px;
}
.tier-feats li b { color: var(--ink); font-weight: 600; }
.tier-feats__head {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 12px;
}

/* Institutions band */
.institutions__row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  justify-content: center;
  text-align: center;
}
.institutions__row span {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver);
}

/* Believing Loyalty / principles */
.principles__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 56px;
}
.principles__grid--3 { grid-template-columns: repeat(3, 1fr); }
.principle .ornament { margin: 0 0 14px; }
.principle h3 {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: 10px;
}
.principle p { font-size: 14.5px; color: var(--ink-muted); margin: 0; }
/* On a dark section, restore light-on-dark text (same fix pattern as .proof p / .cta) */
.on-dark .principle h3 { color: var(--ivory); }
.on-dark .principle p { color: var(--silver); }

/* Tier cards (offer stacks) */
.tier-list {
  border-top: 1px solid var(--silver-line);
}
/* Single-offer tier-list (e.g. the standalone Microsite offer): no top/bottom
   rule needed since there's no adjacent card to divide from. */
.tier-list--no-divider { border-top: 0; }
.tier-list--no-divider .tier-card { border-bottom: 0; padding-bottom: 0; }
.tier-card {
  display: grid;
  /* 180px left it too narrow: the tier description wrapped to a 20-line ribbon
     while the feature list beside it ran ten. Widening to a fluid 260-340px puts
     both columns in the same readable range. Fluid rather than fixed so the
     column tracks the container instead of only working at one viewport. */
  grid-template-columns: clamp(260px, 26vw, 340px) 1fr;
  gap: 44px;
  padding: 44px 0;
  border-bottom: 1px solid var(--silver-line);
  align-items: start;
}
.tier-card__price {
  font-family: var(--display);
  font-size: 38px;
  font-weight: 500;
  color: var(--gold-deep);
  line-height: 1;
}
.tier-card__tag {
  margin-top: 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.tier-card__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.tier-card__name {
  font-family: var(--display);
  font-size: 25px;
  font-weight: 500;
  color: var(--ink);
}
.tier-card__badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-ink); /* WCAG AA: gold-deep text / gold border both under minimums on ivory */
  border: 1px solid var(--gold-ink);
  padding: 4px 10px;
}
.tier-card__meta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 16px;
}
.tier-card__desc {
  font-size: 14.5px;
  color: var(--ink-muted);
  margin: 0 0 22px;
  max-width: 640px;
}
.tier-card__desc + .tier-card__desc { margin-top: -12px; }

/* Proof / case study block */
.proof {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.proof__eyebrow { margin-bottom: 8px; }
.proof h2 { font-size: clamp(28px, 3.4vw, 38px); margin: 4px 0 20px; }
.proof p {
  font-size: 15px;
  color: var(--ivory); /* matches the on-dark heading color; 13:1+ on teal-ink */
  margin: 0 0 16px;
}
.proof__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }

/* Closing CTA */
.cta { text-align: center; }
.cta h2 { font-size: clamp(30px, 4vw, 46px); color: var(--ink); margin-top: 4px; }
.cta p { max-width: 560px; margin: 20px auto 0; color: var(--ink-muted); font-size: 16px; }
.cta .btn-row { justify-content: center; margin-top: 36px; }
/* On a dark section, restore light-on-dark text (same fix pattern as .proof p) */
.on-dark.cta h2 { color: var(--ivory); }
.on-dark.cta p { color: var(--silver); }

/* Long-form body copy (bio, etc.) */
.prose {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.prose p { color: var(--ink-muted); font-size: 16px; margin: 0; }
.prose p.prose__lead { color: var(--ink); font-size: 17px; font-weight: 500; }
.prose h2 { font-size: 24px; }

/* Legal pages (Terms, Privacy) */
.legal-header { margin-bottom: 48px; }
.legal-header h1 { font-size: clamp(32px, 4vw, 48px); margin-top: 4px; margin-bottom: 8px; }
.legal-header__date {
  color: var(--ink-muted);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Contact form */
.form { max-width: 720px; }
.form--center { margin: 0 auto; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.form-field { margin-bottom: 24px; }
.form-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--silver-line);
  border-radius: 0;
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 2px;
  border-color: var(--gold-ink);
}
/* Custom caret so its position is controllable (native carets can't take a margin).
   This is the no-JS fallback look for any <select> in a .form-field — select.js
   replaces the element itself with the .select widget below when JS runs. */
.form-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6062' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 12px;
  padding-right: 44px;
}

/* Custom select widget (select.js progressively enhances every .form-field select
   into this markup: .select > .select__trigger + .select__menu). Same tokens as
   .form-field input/select above — sharp corners, silver-line border, gold-ink focus. */
.select { position: relative; }
.select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  font-family: var(--body);
  font-size: 15px;
  text-align: left;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--silver-line);
  cursor: pointer;
}
.select__trigger[data-placeholder] { color: rgba(27,29,29,.5); }
.select__trigger:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 2px;
  border-color: var(--gold-ink);
}
.select.is-open .select__trigger { border-color: var(--gold-ink); }
.select__caret {
  flex-shrink: 0;
  width: 10px;
  height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6062' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform .2s ease;
}
.select.is-open .select__caret { transform: rotate(180deg); }
.select__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 260px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--silver-line);
  list-style: none;
  margin: 0;
  padding: 6px 0;
  box-shadow: 0 16px 32px rgba(11,12,12,.14);
}
.select__option {
  padding: 11px 16px;
  font-size: 14.5px;
  color: var(--ink);
  cursor: pointer;
}
.select__option.is-active { background: rgba(194,161,91,.1); color: var(--gold-ink); }
.select__option[aria-selected="true"] { font-weight: 600; color: var(--gold-ink); }
.select__option[aria-disabled="true"] { color: var(--silver-deep); cursor: not-allowed; }

/* Visually hides the native <select> once select.js has enhanced it, without
   removing it from the DOM — it stays the real source of value/validation/change events. */
.select-native--enhanced {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Voice dictation (voice-input.js progressively wraps each text field in
   .field-voice and adds a .mic-btn — only in browsers with SpeechRecognition
   support, so unenhanced fields elsewhere keep their normal padding). */
.field-voice { position: relative; }
.field-voice input,
.field-voice textarea { padding-right: 44px; }
.field-voice--textarea textarea { padding-right: 44px; }
.mic-btn {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid var(--silver-line);
  color: var(--ink-muted);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.mic-btn:hover { border-color: var(--gold-ink); color: var(--gold-ink); }
.mic-btn:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; }
.mic-btn.is-listening {
  color: var(--white);
  background: var(--gold-ink);
  border-color: var(--gold-ink);
  animation: mic-pulse 1.4s ease-in-out infinite;
}
.field-voice--textarea .mic-btn { top: 12px; transform: none; }
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(130,104,52,.35); }
  50% { box-shadow: 0 0 0 6px rgba(130,104,52,0); }
}

.form-submit { margin-bottom: 40px; }
.form-note { font-size: 13px; color: var(--ink-muted); margin-top: 4px; }
.form-status {
  font-size: 13px;
  margin-top: 16px;
  color: var(--teal);
}

/* Friction Checker */
.checker-form {
  max-width: 640px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 16px;
  align-items: end;
}
.checker-form .form-field { margin-bottom: 0; }
.checker-form .btn { padding: 15px 28px; white-space: nowrap; }
.checker-status {
  max-width: 640px;
  margin: 16px auto 0;
  font-size: 13px;
  color: var(--ink-muted);
  text-align: center;
}
.checker-status[data-state="error"] { color: var(--gold-ink); }

.checker-result {
  max-width: 720px;
  margin: 56px auto 0;
  border: 1px solid var(--silver-line);
  background: var(--white);
}
.checker-result__head {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 36px 40px;
  border-bottom: 1px solid var(--silver-line);
}
.checker-result__grade {
  font-family: var(--display);
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
  color: var(--teal);
  flex-shrink: 0;
}
.checker-result__grade[data-tier="watch"] { color: var(--gold-deep); }
.checker-result__grade[data-tier="leak"] { color: var(--gold-ink); }
.checker-result__headline h3 {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 6px;
}
.checker-result__headline p { font-size: 14px; color: var(--ink-muted); margin: 0; }

.finding-list { list-style: none; margin: 0; padding: 32px 40px; }
.finding {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--silver-line);
}
.finding:last-child { border-bottom: 0; }
.finding__icon {
  flex-shrink: 0;
  width: 20px;
  font-size: 13px;
  color: var(--teal);
  margin-top: 2px;
}
.finding--flag .finding__icon { color: var(--gold-ink); }
.finding__body h4 {
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px;
}
.finding__body p { font-size: 13.5px; color: var(--ink-muted); margin: 0; }

.finding--locked { position: relative; }
.finding--locked .finding__body {
  filter: blur(3.5px);
  user-select: none;
  pointer-events: none;
}
.finding--locked .finding__icon { color: var(--silver-deep); }

.checker-gate {
  padding: 36px 40px 40px;
  background: var(--ivory);
  border-top: 1px solid var(--silver-line);
  text-align: center;
}
.checker-gate p { font-size: 14px; color: var(--ink-muted); margin: 0 0 20px; max-width: 480px; margin-left: auto; margin-right: auto; }
.checker-gate .checker-form { grid-template-columns: 1fr auto; }

/* Score explainer: a number out of 100 always reads as a percentage grade,
   so the meaning has to be stated outright or a 75 lands as "fine". */
.checker-meaning {
  margin: 0 40px;
  padding: 20px 24px;
  background: var(--ivory);
  border-left: 3px solid var(--gold);
}
.checker-meaning h4 {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 8px;
}
.checker-meaning p {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.6;
  margin: 0;
}
.checker-meaning p + p { margin-top: 10px; color: var(--ink-muted); }

/* Severity badge. The label is derived from the signal's score weight, so
   "Critical" always means it cost the most points. */
.finding__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.finding__head h4 { margin: 0 !important; }
.finding__severity {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  white-space: nowrap;
}
.finding__severity[data-severity="critical"] {
  background: var(--gold-ink);
  color: var(--ivory);
}
.finding__severity[data-severity="warning"] {
  color: var(--gold-ink);
  border: 1px solid var(--gold-ink);
}
.finding__severity[data-severity="minor"] {
  color: var(--ink-muted);
  border: 1px solid var(--silver-line);
}
/* "Not found" / "Not checked" state chip, shown alongside severity so a
   missing item reads as missing and not merely broken. */
.finding__state {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  white-space: nowrap;
  color: var(--ink-muted);
  border: 1px dashed var(--silver-deep);
}

/* Legend: explains every badge the reader just saw, including why a missing
   item can be Critical. */
.checker-legend {
  margin: 0 40px 36px;
  padding: 24px 26px;
  background: var(--ivory);
  border: 1px solid var(--silver-line);
}
.checker-legend h4 {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 16px;
}
.checker-legend dl {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 12px 18px;
  margin: 0;
  align-items: start;
}
.checker-legend dt { margin: 0; }
.checker-legend dd {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-muted);
  line-height: 1.55;
}
.checker-legend dd b { color: var(--ink); font-weight: 600; }

/* Purchase block replacing the email-only gate */
.checker-buy__price {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 500;
  color: var(--teal-ink);
  line-height: 1;
  margin-bottom: 6px;
}
.checker-buy__meta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 18px;
}
.checker-buy__or {
  font-size: 12px;
  color: var(--ink-muted);
  margin: 22px 0 14px;
}
.checker-redirect__title {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 12px;
}

.checker-disclaimer {
  max-width: 640px;
  margin: 24px auto 0;
  font-size: 12.5px;
  color: var(--ink-muted);
  text-align: center;
}

/* ---------------------------------------------------------------
   Budget table (the $10,000 build cost breakdown)
   --------------------------------------------------------------- */
.budget-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--silver-line);
}
.budget-table th,
.budget-table td {
  padding: 14px 18px;
  font-size: 14.5px;
  border-bottom: 1px solid var(--silver-line);
  text-align: left;
}
.budget-table th {
  background: var(--teal-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  border-bottom-color: var(--teal-ink);
}
.budget-table td.desc { color: var(--ink-muted); font-size: 13px; }
.budget-table td.amt {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  white-space: nowrap;
}
.budget-table tr.total td {
  background: var(--teal-ink);
  color: var(--ivory);
  font-weight: 600;
  font-size: 16px;
  border-bottom: none;
}
.budget-table tr.total td.amt {
  color: var(--gold-bright);
  font-family: var(--display);
  font-weight: 500;
  font-size: 20px;
}

/* ---------------------------------------------------------------
   Membership revenue calculator
   --------------------------------------------------------------- */
.vtabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.vtab {
  padding: 12px 24px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--white);
  border: 1px solid var(--silver-line);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.vtab:hover { border-color: var(--gold-ink); color: var(--ink); }
.vtab.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ivory);
}
.calc {
  background: var(--white);
  border: 1px solid var(--silver-line);
  padding: 40px;
}
.calc-inputs {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--silver-line);
}
.calc-field { flex: 1; min-width: 220px; }
.calc-field--wide { flex: 2; min-width: 340px; }
.calc-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 10px;
}
/* Invisible spacer matching .tm .tmn's box height exactly, so the customer-count
   input lines up with the tier-mix inputs beside it (which have an extra tier-name
   label line the customer field doesn't need). */
.calc-field__spacer {
  display: block;
  font-size: 12.5px;
  margin-bottom: 8px;
  visibility: hidden;
}
.calc-field input[type="number"] {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink);
  background: var(--ivory);
  border: 1px solid var(--silver-line);
}
.calc-field input:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 2px;
  border-color: var(--gold-ink);
}
/* Range input, used where a value is an estimate the reader should see and
   move rather than a figure we are asserting. */
.calc-range {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--silver-line);
  outline: none;
  margin: 18px 0 6px;
}
.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold-ink);
  cursor: pointer;
}
.calc-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold-ink);
  border: 0;
  cursor: pointer;
}
.calc-range:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 4px; }
.calc-range__val {
  font-family: var(--display);
  font-size: 22px;
  color: var(--teal-ink);
  font-weight: 500;
}
/* Distinguishes a measured result from a projected one. */
.calc-col__note {
  font-size: 11.5px;
  color: var(--ink-muted);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--silver-line);
  line-height: 1.5;
}
.calc-cite {
  font-size: 11.5px;
  color: var(--ink-muted);
  margin-top: 6px;
  line-height: 1.5;
}
.calc-cite a { text-decoration: underline; }

.calc-hint { font-size: 12px; color: var(--ink-muted); margin-top: 8px; }
.calc-hint b { color: var(--ink); }
.tiermix { display: flex; gap: 16px; flex-wrap: wrap; }
.tm { flex: 1; min-width: 140px; }
.tm .tmn {
  display: block;
  font-size: 12.5px;
  color: var(--ink-muted);
  margin-bottom: 8px;
  white-space: nowrap;
}
.tm .tminputwrap { position: relative; }
.tm input[type="number"] {
  width: 100%;
  padding: 14px 30px 14px 16px;
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink);
  background: var(--ivory);
  border: 1px solid var(--silver-line);
}
.tm input:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 2px;
  border-color: var(--gold-ink);
}
.tm .tmsfx {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--ink-muted);
  pointer-events: none;
}
/* Price field sits above the mix field in each tier column. The visitor sets
   their own price, so the per-industry defaults are a starting point rather
   than a figure we are asserting. */
.tminputwrap--price { margin-bottom: 8px; }
.tminputwrap--price input[type="number"] {
  padding-left: 26px;
  padding-right: 46px;
  font-weight: 600;
}
.tm .tmpfx {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--ink-muted);
  pointer-events: none;
}
.calc-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 32px;
}
.calc-col {
  border: 1px solid var(--silver-line);
  padding: 28px;
}
.calc-col.std { border-color: var(--gold-ink); }
.calc-col .tag {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 6px;
}
.calc-col .rate { font-size: 13px; color: var(--ink-muted); margin-bottom: 20px; }
.calc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--silver-line);
  font-size: 14px;
}
.calc-row .k { color: var(--ink-muted); }
.calc-row .v { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-hero { margin-top: 20px; text-align: center; }
.calc-hero .lbl { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 6px; }
.calc-hero .big { font-family: var(--display); font-size: 34px; font-weight: 500; color: var(--teal-ink); }
.calc-takeaway {
  margin-top: 28px;
  background: var(--ivory);
  border-left: 3px solid var(--gold);
  padding: 20px 24px;
}
.calc-takeaway h3 { margin: 0 0 8px; font-size: 15px; font-family: var(--display); font-weight: 500; }
.calc-takeaway p { margin: 0; font-size: 14px; color: var(--ink-muted); line-height: 1.6; }
.calc-note { font-size: 12px; color: var(--ink-muted); margin-top: 16px; }

/* ---------------------------------------------------------------
   Single-offer pages (Revenue Leak Report, Customer Walkthrough Audit)
   --------------------------------------------------------------- */
.offer-facts {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 30px;
}
.offer-facts li {
  position: relative;
  padding-left: 18px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.offer-facts li::before {
  content: "\25C6";
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 8px;
  color: var(--gold-ink);
}
.on-dark .offer-facts li { color: var(--silver); }
.on-dark .offer-facts li::before { color: var(--gold); }
/* The sample breakdown carries five numeric columns, which will not compress
   on a phone. Let it scroll inside its own box rather than squeezing the page. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.offer-note {
  max-width: 720px;
  margin: 28px auto 0;
  text-align: center;
  font-size: 13px;
  color: var(--ink-muted);
}
.on-dark .offer-note { color: var(--silver); }

/* .tier-card is a two-column grid, so a .btn-row or .offer-note dropped in as a
   direct child auto-places into the next free cell and lands beside the button
   instead of below it. Pin them to their own full rows. */
.tier-card > .btn-row { grid-column: 2; margin-top: 4px; }
.tier-card > .offer-note {
  grid-column: 1 / -1;
  max-width: none;
  margin: 14px 0 0;
  text-align: left;
}
@media (max-width: 900px) {
  .tier-card > .btn-row { grid-column: 1; }
}

/* ---------------------------------------------------------------
   Offer-page data visuals
   Used by /revenue-leak-report (calculator, reasons chart, stat band)
   and /customer-walkthrough-audit (scroll-driven walkthrough).
   The walkthrough phone is namespaced .wtphone so it cannot be confused
   with the unrelated .phone-frame component used for microsite embeds.
   --------------------------------------------------------------- */

/* Scroll reveal, shared */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* Live leak calculator output */
.leak-out {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--silver-line);
  background: var(--white);
  margin-top: 28px;
}
.leak-out__cell { padding: 26px 24px; border-right: 1px solid var(--silver-line); }
.leak-out__cell:last-child { border-right: 0; }
.leak-out__cell--hero { background: var(--teal-ink); }
.leak-out__k {
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 10px;
}
.leak-out__cell--hero .leak-out__k { color: var(--silver); }
.leak-out__v {
  font-family: var(--display); font-size: 34px; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.leak-out__cell--hero .leak-out__v { color: var(--gold-bright); font-size: 40px; }
.leak-out__sub { font-size: 12.5px; color: var(--ink-muted); margin-top: 10px; }
.leak-out__cell--hero .leak-out__sub { color: var(--silver); }

/* Reasons bar chart */
.bars { max-width: 780px; margin: 0 auto; }
.bar-row { margin-bottom: 26px; }
.bar-row__top {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; margin-bottom: 9px;
}
.bar-row__label { font-size: 14.5px; color: var(--ink); }
.bar-row__pct {
  font-family: var(--display); font-size: 21px; color: var(--gold-ink);
  font-variant-numeric: tabular-nums;
}
.bar-track { height: 10px; background: var(--ivory); border: 1px solid var(--silver-line); }
.bar-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--gold-ink), var(--gold));
  transition: width 1.05s cubic-bezier(.22,.61,.36,1);
}
.headline-stat { text-align: center; margin-bottom: 52px; }
.headline-stat__v {
  font-family: var(--display); font-size: clamp(52px, 8vw, 76px); line-height: 1;
  color: var(--teal-ink); font-variant-numeric: tabular-nums;
}
.headline-stat__k { font-size: 14px; color: var(--ink-muted); margin-top: 12px; }

/* Cited stat figures */
.statfig { text-align: center; }
.statfig__v {
  font-family: var(--display); font-size: 54px; line-height: 1;
  color: var(--gold-ink); font-variant-numeric: tabular-nums; margin-bottom: 14px;
}
.statfig__k { font-size: 15px; color: var(--ink); line-height: 1.55; margin-bottom: 12px; }
.statfig__src { font-size: 11.5px; color: var(--ink-muted); letter-spacing: .02em; }
.on-dark .statfig__v { color: var(--gold); }
.on-dark .statfig__k { color: var(--ivory); }
.on-dark .statfig__src { color: var(--silver); }

/* Section fade-in. Gated on .js-anim, set by an inline snippet in <head>, so a
   page without JS never gets stuck at opacity 0. */
.js-anim main > section {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s ease, transform .65s ease;
}
.js-anim main > section.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-anim main > section { opacity: 1; transform: none; transition: none; }
}

/* Radial gauges for cited figures.
   The arc encodes a real proportion. Where a statistic is a ratio rather than
   a share (the 60x lead-response figure), the arc is drawn at the inverse it
   actually implies, 1/60, and labelled as the odds that survive the delay.
   Never draw a full decorative ring around a number that is not a percentage. */
.radial { display: flex; flex-direction: column; align-items: center; text-align: center; }
.radial__ring { position: relative; width: 176px; height: 176px; margin-bottom: 22px; }
.radial__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.radial__track { fill: none; stroke: rgba(174,180,184,.22); stroke-width: 8; }
.radial__arc {
  fill: none; stroke: var(--gold-ink); stroke-width: 8; stroke-linecap: butt;
  /* The circle carries pathLength="100", so the dash scale is 0-100 whatever
     the radius. Starting empty matters: if the reveal never fires (JS blocked,
     observer unsupported, visitor lands mid-page) the ring must read as no
     data, not as a full circle claiming 100%. */
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.15s cubic-bezier(.22,.61,.36,1);
}
.on-dark .radial__arc { stroke: var(--gold); }
.radial__mid {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 42px; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.on-dark .radial__mid { color: var(--ivory); }
.radial__k { font-size: 15px; color: var(--ink); line-height: 1.55; margin-bottom: 12px; max-width: 300px; }
.radial__src { font-size: 11.5px; color: var(--ink-muted); max-width: 320px; }
.on-dark .radial__k { color: var(--ivory); }
.on-dark .radial__src { color: var(--silver); }
@media (prefers-reduced-motion: reduce) {
  .radial__arc { transition: none; }
}

/* Waffle: one cell per unit, for ratios that are not percentages.
   The 60x lead-response figure is 60 cells with one filled, which states the
   ratio literally instead of forcing it onto a percentage arc. */
.waffle-slot { height: 176px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.waffle {
  display: grid;
  grid-template-columns: repeat(10, 12px);
  grid-auto-rows: 12px;
  gap: 5px;
}
.waffle i {
  display: block;
  background: rgba(174,180,184,.20);
  border: 1px solid rgba(174,180,184,.16);
}
.waffle i.is-on { background: var(--gold); border-color: var(--gold); }
.on-dark .waffle i.is-on { background: var(--gold); }
.waffle-cap {
  font-family: var(--display); font-size: 30px; line-height: 1;
  color: var(--ink); margin-bottom: 14px; font-variant-numeric: tabular-nums;
}
.on-dark .waffle-cap { color: var(--ivory); }

/* Scroll-driven walkthrough */
.wt { display: grid; grid-template-columns: 380px 1fr; gap: 72px; align-items: start; }
.wt__stage { position: sticky; top: 90px; }
.wtphone {
  width: 300px; margin: 0 auto;
  border: 10px solid #14181a; border-radius: 34px;
  background: #14181a; box-shadow: 0 26px 60px rgba(11,12,12,.34);
  position: relative; overflow: hidden;
}
.wtphone__notch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 78px; height: 14px; background: #14181a; border-radius: 0 0 9px 9px; z-index: 4;
}
.wtphone__screen { height: 520px; overflow: hidden; background: #fff; position: relative; }
.wtphone__scroll { transition: transform .85s cubic-bezier(.4,0,.2,1); }
.wtphone__hl {
  position: absolute; z-index: 3; border: 2px solid var(--gold);
  background: rgba(194,161,91,.14);
  opacity: 0; transition: opacity .45s ease, top .6s ease, height .6s ease;
  pointer-events: none; left: 8px; right: 8px;
}
.wtphone__hl.is-on { opacity: 1; }

/* The illustrative site rendered inside the phone */
.wtmock { font-size: 11px; color: #2a2a26; }
.wtmock__bar { background: #1d2b2a; color: #fff; padding: 22px 14px 12px; }
.wtmock__logo { font-family: var(--display); font-size: 14px; }
.wtmock__nav { display: flex; gap: 10px; margin-top: 8px; font-size: 8.5px; opacity: .72; }
.wtmock__hero { padding: 20px 14px; background: #eceae5; }
.wtmock__h1 { font-family: var(--display); font-size: 17px; line-height: 1.15; margin-bottom: 8px; }
.wtmock__p { font-size: 9.5px; color: #63635c; line-height: 1.55; }
.wtmock__btn {
  display: inline-block; margin-top: 12px; background: #1d2b2a; color: #fff;
  padding: 8px 14px; font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
}
.wtmock__sec { padding: 18px 14px; border-top: 1px solid #e2e0da; }
.wtmock__h2 { font-family: var(--display); font-size: 13px; margin-bottom: 10px; }
.wtmock__li {
  display: flex; justify-content: space-between; padding: 8px 0;
  border-bottom: 1px solid #eeece7; font-size: 10px;
}
.wtmock__li span:last-child { color: #9a9a92; }
.wtmock__field { height: 22px; border: 1px solid #d8d5ce; background: #fbfaf7; margin-bottom: 7px; }
.wtmock__foot { padding: 16px 14px; background: #1d2b2a; color: #9fb0ae; font-size: 8.5px; }

.wt__steps { padding: 40px 0 0; }
.wt-step { min-height: 74vh; display: flex; align-items: center; }
.wt-step__card {
  border: 1px solid var(--silver-line); border-left: 3px solid var(--silver);
  background: var(--white); padding: 30px 32px;
  opacity: .34; transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease, border-left-color .5s ease;
}
.wt-step.is-active .wt-step__card { opacity: 1; transform: none; border-left-color: var(--gold-ink); }
.wt-step__time {
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-ink); margin-bottom: 12px;
}
.wt-step__h { font-family: var(--display); font-size: 25px; color: var(--ink); line-height: 1.2; margin-bottom: 12px; }
.wt-step__p { font-size: 14.5px; color: var(--ink-muted); line-height: 1.65; margin: 0; }
.wt-step__said {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--silver-line);
  font-size: 13.5px; color: var(--ink); font-style: italic;
}

@media (max-width: 900px) {
  .leak-out { grid-template-columns: 1fr; }
  .leak-out__cell { border-right: 0; border-bottom: 1px solid var(--silver-line); }
  .wt { grid-template-columns: 1fr; gap: 32px; }
  /* Sticky plus a moving frame does not survive a short viewport, so on a
     phone the steps simply stack under a static frame. */
  .wt__stage { position: relative; top: 0; }
  .wt-step { min-height: auto; margin-bottom: 28px; }
  .wt-step__card { opacity: 1; transform: none; border-left-color: var(--gold-ink); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .bar-fill,
  .wtphone__scroll,
  .wtphone__hl,
  .wt-step__card { transition: none; }
  .wt-step__card { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------
   FAQ accordion
   --------------------------------------------------------------- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 780px;
  margin: 0 auto;
}
.faq-item {
  border: 1px solid var(--silver-line);
  background: var(--white);
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-chevron {
  width: 16px;
  height: 16px;
  color: var(--gold-ink);
  transition: transform .2s ease;
  flex-shrink: 0;
}
.faq-item[open] summary .faq-chevron { transform: rotate(180deg); }
.faq-item .faq-answer {
  padding: 0 24px 22px;
  font-size: 14.5px;
  color: var(--ink-muted);
  line-height: 1.65;
}

@media (max-width: 900px) {
  .checker-form,
  .checker-gate .checker-form { grid-template-columns: 1fr; }
  .checker-result__head { flex-direction: column; text-align: center; padding: 32px 24px; }
  .finding-list { padding: 24px; }
  .checker-gate { padding: 28px 24px 32px; }
  .checker-meaning { margin: 0 24px; padding: 18px 20px; }
  .checker-legend { margin: 0 24px 28px; padding: 20px; }
  .checker-legend dl { grid-template-columns: 1fr; gap: 4px 0; }
  .checker-legend dd { margin-bottom: 12px; }

  .calc { padding: 28px 22px; }
  .calc-cols { grid-template-columns: 1fr; }
  .budget-table { font-size: 13px; }
  .budget-table td.desc { display: none; }
  .budget-table th:nth-child(2) { display: none; }
}

/* Footer */
.footer { padding: 64px 0 32px; }
.footer__top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer__brand { display: inline-flex; }
.footer__brand img { height: 30px; width: auto; display: block; }
.footer__cols {
  display: flex;
  gap: 64px;
  flex-wrap: wrap;
}
.footer__col h4 {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 16px;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li { margin-bottom: 2px; }
.footer__col a {
  display: inline-block;
  padding: 6px 0; /* enlarges the tap target to ~27px tall without changing the visual line-height */
  font-size: 12.5px;
  color: var(--silver);
  transition: color .2s ease;
}
.footer__col a:hover { color: var(--gold); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 28px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--silver-deep);
}
.footer__bottom a { display: inline-block; padding: 6px 0; color: var(--silver-deep); }
.footer__bottom a:hover { color: var(--gold); }
.footer__legal { display: flex; gap: 20px; }

@media (max-width: 900px) {
  section { padding: 72px 0; }
  .wrap { padding: 0 22px; }

  .hero__split { grid-template-columns: 1fr; gap: 56px; }

  /* Mobile nav: hamburger + dropdown panel instead of wrapping the row */
  .nav__toggle { display: inline-flex; }
  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--noir-soft);
    border-top: 1px solid var(--silver-line);
    padding: 8px 0;
  }
  .nav.is-open .nav__links { display: flex; }
  .nav__links li { width: 100%; }
  .nav__links a {
    display: block;
    padding: 16px 22px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  /* Mobile nav dropdown: inline accordion instead of a floating panel */
  .nav__dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 16px 22px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .nav__dropdown-menu {
    display: none;
    position: static;
    width: 100%;
    min-width: 0;
    margin: 0;
    border: 0;
    background: rgba(255,255,255,0.03);
    padding: 0;
  }
  .nav__dropdown.is-open .nav__dropdown-menu { display: block; }
  .nav__dropdown-menu a {
    padding: 14px 22px 14px 36px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  .ledger__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .ledger__grid.ledger__grid--4 { grid-template-columns: repeat(2, 1fr); }
  .method__grid,
  .method__grid--3,
  .method__grid--2,
  .method__grid--bento { grid-template-columns: 1fr; gap: 48px; }
  .method__grid--bento .vertical-card:nth-child(1),
  .method__grid--bento .vertical-card:nth-child(2),
  .method__grid--bento .vertical-card:nth-child(3) { grid-column: span 1; grid-row: span 1; }
  .verticals__grid { grid-template-columns: 1fr; }
  .principles__grid,
  .principles__grid--3 { grid-template-columns: 1fr; gap: 36px; }
  .tier-card { grid-template-columns: 1fr; gap: 12px; padding: 32px 0; }
  .proof { grid-template-columns: 1fr; gap: 40px; }
  .proof__stats { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .hero.hero--left { text-align: center; }
  .hero.hero--left .rule { margin-left: auto; margin-right: auto; }
  .hero.hero--left .btn-row { justify-content: center; }
  .hero.hero--left .hero__sub { margin: 28px auto 0; }
  .footer__top { flex-direction: column; }
  .footer__cols { gap: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------------------------------------------------------------
   Tier quiz — /buyer-credibility
   Six questions, routed to a recommended tier. Lives on a dark
   section, so every colour here is the on-dark variant.
   --------------------------------------------------------------- */
.tq {
  max-width: 720px;
  margin: 0 auto;
  background: rgba(247,245,240,.04);
  border: 1px solid rgba(174,180,184,.28);
  border-radius: 2px;
  padding: 36px 34px 32px;
}
.tq__prog { height: 2px; background: rgba(174,180,184,.22); margin-bottom: 28px; position: relative; }
.tq__prog i {
  position: absolute; inset: 0; background: var(--gold);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.tq__step {
  font-size: 10.5px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--silver); margin: 0 0 12px;
}
.tq__q {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(21px, 3vw, 27px); line-height: 1.25;
  color: var(--ivory); margin: 0 0 24px;
}
.tq__opt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: rgba(247,245,240,.05); border: 1px solid rgba(174,180,184,.3);
  color: var(--ivory); font-family: var(--body); font-size: 15.5px;
  line-height: 1.45; padding: 15px 18px; margin-bottom: 10px;
  min-height: 52px; transition: background .18s, border-color .18s;
}
.tq__opt:hover { background: rgba(247,245,240,.11); border-color: var(--gold); }
.tq__opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.tq__opt small { display: block; margin-top: 4px; color: var(--silver); font-size: 13px; }
.tq__back {
  background: none; border: 0; cursor: pointer; padding: 10px 2px; min-height: 44px;
  font-family: var(--body); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--silver);
  text-decoration: underline; text-underline-offset: 4px;
}
.tq__back:hover { color: var(--ivory); }
.tq__badge {
  display: inline-block; font-size: 10.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 7px 14px; margin-bottom: 16px;
  background: var(--gold); color: var(--noir);
}
.tq__badge[data-tone="hold"] { background: var(--silver); }
.tq__rtitle {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(24px, 3.4vw, 32px); line-height: 1.2;
  color: var(--ivory); margin: 0 0 14px;
}
.tq__rbody { color: var(--silver); font-size: 16px; line-height: 1.6; margin: 0 0 20px; }
.tq__why { list-style: none; padding: 0; margin: 0 0 26px; }
.tq__why li {
  position: relative; padding-left: 22px; margin-bottom: 9px;
  color: var(--silver); font-size: 15px; line-height: 1.5;
}
.tq__why li::before {
  content: "\25C6"; position: absolute; left: 0; top: 0;
  color: var(--gold); font-size: 9px; line-height: 1.7;
}
/* The two result CTAs have different label lengths per tier, so left to their
   natural widths they wrap into a ragged stack. Sharing the row makes them sit
   side by side when there is room and stack at equal width when there is not. */
#tqCta { gap: 12px; }
#tqCta .btn {
  flex: 1 1 240px; text-align: center;
  white-space: normal; padding-left: 20px; padding-right: 20px;
}

@media (max-width: 700px) {
  .tq { padding: 28px 22px 26px; }
}

/* ---------------------------------------------------------------
   Mega menu
   nav.js upgrades a plain .nav__dropdown-menu into this when it has
   copy for the items. The simple list stays the fallback, so a page
   with no JS, or an unmapped dropdown, still gets a working menu.
   --------------------------------------------------------------- */
/* Anchor the panel to .nav itself, not to the <li> and not to .wrap. Centring on
   the li pushed a right-hand dropdown off the viewport, and .wrap sits inside the
   nav's 22px padding, so the panel started above the bar's real bottom edge.
   .nav is position:fixed, so it is already a containing block. */
.nav__dropdown.has-mega { position: static; }
.nav__dropdown-menu.is-mega {
  display: none;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: min(1060px, calc(100vw - 48px));
  min-width: 0;
  padding: 0;
  margin-top: 0;
  border-top: 0;
}
.nav__dropdown.is-open .nav__dropdown-menu.is-mega { display: grid; }
.mega {
  display: grid;
  grid-template-columns: 1fr 1fr 300px;
  gap: 0;
}
.mega__cols {
  display: contents;
}
.mega__col { padding: 34px 30px 32px; }
.mega__col:first-child { padding-left: 36px; }
.mega__group {
  font-family: var(--body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--silver-deep);
  margin: 0 0 20px;
}
.mega__item {
  display: block;
  padding: 11px 12px;
  margin: 0 -12px 2px;
  transition: background-color .18s ease;
}
.mega__item:hover { background: rgba(194,161,91,.07); }
.mega__item:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.mega__ico {
  width: 18px; height: 18px; margin-top: 2px;
  color: var(--gold); flex-shrink: 0;
}
.mega__t {
  display: block;
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--ivory);
  line-height: 1.35;
  white-space: normal;
}
.mega__item:hover .mega__t { color: var(--gold); }
.mega__item.is-current .mega__t { color: var(--gold); }
.mega__d {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--silver-deep);
  line-height: 1.45;
  white-space: normal;
}
.mega__feat {
  background: rgba(11,12,12,.55);
  border-left: 1px solid var(--silver-line);
  padding: 34px 30px 32px;
}
.mega__feat .mega__group { margin-bottom: 18px; }
.mega__card {
  display: block;
  padding: 0;
  white-space: normal;
}
.mega__card + .mega__card { margin-top: 22px; }
.mega__card img,
.mega__card .mega__ph {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--noir);
  border: 1px solid var(--silver-line);
  margin-bottom: 12px;
}
.mega__card .mega__t { font-size: 13.5px; }
.mega__card:hover .mega__t { color: var(--gold); }
.mega__more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  padding: 14px 0;
  min-height: 44px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
.mega__more:hover { color: var(--gold-bright); background: transparent; }

@media (max-width: 1024px) {
  .nav__dropdown-menu.is-mega {
    position: static;
    transform: none;
    width: auto;
    border: 0;
    background: transparent;
  }
  .mega { grid-template-columns: 1fr; }
  .mega__col,
  .mega__feat { padding: 8px 0 14px; }
  .mega__col:first-child { padding-left: 0; }
  .mega__feat { border-left: 0; border-top: 1px solid var(--silver-line); background: transparent; }
  .mega__card img,
  .mega__card .mega__ph { display: none; }
  .mega__item { margin-left: 0; padding-left: 0; }
}

/* Twelve-month payment option under a tier price. */
.tier-card__pay {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
  padding-top: 10px;
  border-top: 1px solid var(--silver-line);
}
.tier-card__pay strong { color: var(--ink); font-weight: 600; }
.on-dark .tier-card__pay { color: var(--silver); }
.on-dark .tier-card__pay strong { color: var(--ivory); }

/* Expandable detail inside a tier card. Sits in the feature column, not beside it. */
.tier-card > .tier-detail { grid-column: 2; margin-top: 4px; }
.tier-detail__lead {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 12px;
}
.tier-detail .faq-item + .faq-item { margin-top: 10px; }
.tier-detail .faq-item summary { padding: 15px 18px; font-size: 15px; }
.tier-detail .faq-answer { padding: 0 18px 18px; }
.tier-detail .faq-answer p { margin: 0 0 12px; }
.tier-detail .faq-answer p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .tier-card > .tier-detail { grid-column: 1; }
}


/* ---------------------------------------------------------------
   CTA split: closing copy beside the index report
   The base .cta is centred. When a figure sits alongside it, the copy
   goes left-aligned so the two columns share an edge instead of the
   text drifting away from the image.
   --------------------------------------------------------------- */
.cta--split { text-align: left; }
.cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 64px;
  align-items: center;
}
.cta--split p { margin-left: 0; margin-right: 0; max-width: 46ch; }
.cta--split .btn-row { justify-content: flex-start; }
.cta__figure { margin: 0; }
/* The render is a dark product shot on a dark section, so it needs an edge to
   sit against or it reads as a hole in the page rather than an image. */
.cta__figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid rgba(212, 175, 55, 0.22);
}
@media (max-width: 860px) {
  .cta__grid { grid-template-columns: 1fr; gap: 40px; }
  .cta--split { text-align: center; }
  .cta--split p { margin-left: auto; margin-right: auto; }
  .cta--split .btn-row { justify-content: center; }
  /* Image last on a phone: the ask should be readable without scrolling past
     a picture to reach it. */
  .cta__figure { order: 2; }
  .cta__copy { order: 1; }
}


/* ---------------------------------------------------------------
   Bio block: portrait beside the "why me" copy
   --------------------------------------------------------------- */
.bio {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 52px;
  align-items: start;
}
.bio__copy { max-width: 62ch; }
.bio__portrait { margin: 0; position: sticky; top: 100px; }
.bio__portrait img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(1) contrast(1.04);
  transition: filter .5s ease;
}
/* Greyscale by default so the photo sits inside the noir and gold system
   instead of fighting it, and returns to colour on hover. She is a real
   person and the real photo is one gesture away, not hidden. */
.bio__portrait:hover img { filter: none; }
.bio__portrait figcaption {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--silver-line);
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.5;
}
.bio__portrait figcaption strong { display: block; letter-spacing: .02em; }
.bio__portrait figcaption span { display: block; color: var(--ink-muted); font-size: 12px; }

@media (max-width: 820px) {
  .bio { grid-template-columns: 1fr; gap: 28px; }
  .bio__portrait { position: static; max-width: 190px; }
}


/* Mega menu intro line. Sits above the columns and spans the panel, so the
   term is defined before the links that use it. */
.mega__intro {
  grid-column: 1 / -1;
  margin: 0 0 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--silver-line);
  max-width: 74ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-muted);
}
@media (max-width: 900px) {
  .mega__intro { font-size: 13px; margin-bottom: 16px; padding-bottom: 14px; }
}


/* Company positioning line, under the mark in every footer. It names the
   category rather than describing a service, which is the point: a Digital
   Front Door and a Buyer Credibility OS are two instances of the same thing. */
.footer__positioning {
  max-width: 42ch;
  margin: 18px 0 0;
  font-family: var(--display);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.4;
  color: var(--ivory);
}