/* ── NAV ── */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding: 10px 0;
  transition: box-shadow 0.2s ease, background 0.2s ease;
}

@media (min-width: 1024px) {
  nav { padding: 14px 0; }
}

nav.scrolled {
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.75);
}

/* WordPress admin bar offset (logged-in users only) */
.admin-bar #site-nav {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar #site-nav {
    top: 46px;
  }
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo img,
.logo svg {
  height: 30px;
  width: auto;
  display: block;
}

@media (min-width: 1024px) {
  .logo img,
  .logo svg { height: 36px; }
}

/* ── LIVE ACTIVITY BADGE ── */
.live-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #1a3528 0%, #232f3e 100%);
  color: var(--white);
  padding: 10px 16px;
  border-radius: 100px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35), 0 2px 8px rgba(74,158,79,0.2);
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
  opacity: 0;
  min-height: 40px;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  border: 1px solid rgba(74,158,79,0.35);
}

.live-badge.live-badge-visible {
  opacity: 1;
  transform: translateY(0);
}

.live-badge.live-badge-new {
  background: linear-gradient(135deg, #2d6a31 0%, #1e4d22 100%);
  border-color: rgba(74,158,79,0.7);
  box-shadow: 0 4px 16px rgba(74,158,79,0.35), 0 2px 8px rgba(74,158,79,0.25);
}

.live-badge.live-badge-new .live-badge-dot {
  background: #6fcf74;
  box-shadow: 0 0 0 3px rgba(111,207,116,0.3);
  animation: live-pulse-new 2s ease infinite;
}

@keyframes live-pulse-new {
  0%, 100% { box-shadow: 0 0 0 3px rgba(111,207,116,0.3); }
  50%       { box-shadow: 0 0 0 6px rgba(111,207,116,0.1); }
}

.live-badge-dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(74,158,79,0.25);
  animation: live-pulse 2s ease infinite;
}

@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(74,158,79,0.25); }
  50%       { box-shadow: 0 0 0 6px rgba(74,158,79,0.08); }
}

/* Funnel nav — logo only, no menu */
.nav-inner-funnel {
  justify-content: center;
}

/* book-a-demo / thank-you: logo + step indicator share one bar instead of
   stacking a separate .book-progress section underneath. Step labels hide
   below 640px so a 3-step bar (thank-you) still fits next to the logo. */
.nav-inner-book {
  justify-content: space-between;
  gap: 16px;
}

.nav-inner-book .book-progress-inner {
  gap: 8px;
}

.nav-inner-book .book-progress-label {
  display: none;
}

.nav-inner-book .book-progress-dot {
  width: 24px;
  height: 24px;
  font-size: 11px;
}

.nav-inner-book .book-progress-line {
  width: 18px;
}

@media (min-width: 480px) {
  .nav-inner-book .book-progress-dot { width: 32px; height: 32px; font-size: 13px; }
  .nav-inner-book .book-progress-line { width: 32px; }
}

@media (min-width: 640px) {
  .nav-inner-book .book-progress-inner { gap: 16px; }
  .nav-inner-book .book-progress-label { display: inline; }
  .nav-inner-book .book-progress-line { width: 48px; }
}

/* ── HERO ── */
.hero {
  background: linear-gradient(135deg, var(--charcoal) 0%, var(--charcoal-dark) 100%);
  color: var(--white);
  padding: 64px 0 56px;
  position: relative;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .hero { padding: 96px 0 80px; }
}

.hero::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(74,158,79,0.2) 0%, transparent 70%);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: center;
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
}

/* Green gradient text — used in hero headline */
.text-gradient {
  background: linear-gradient(135deg, #6fdb74 0%, #4a9e4f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(74,158,79,0.15);
  border: 1px solid rgba(74,158,79,0.4);
  color: var(--green-mid);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 24px;
}

.hero-badge-dot {
  width: 8px;
  height: 8px;
  background: var(--green);
  border-radius: 50%;
  display: inline-block;
}

.hero h1 {
  font-size: clamp(36px, 5vw, 58px);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 24px;
  letter-spacing: -1px;
}

.hero h1 em {
  font-style: normal;
  color: var(--green);
}

.hero-sub {
  font-size: 18px;
  color: rgba(255,255,255,0.75);
  margin-bottom: 36px;
  max-width: 480px;
  line-height: 1.7;
}

.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 40px;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 100px;
  backdrop-filter: blur(4px);
}

.hero-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}

.hero-visual {
  margin-top: 40px;
}

@media (min-width: 1024px) {
  .hero-visual {
    margin-top: 0;
    padding-bottom: 32px;
  }
}

.hero-video-wrapper {
  position: relative;
  width: 100%;
}

.hero-video-clip {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 4px 16px rgba(0,0,0,0.2);
  width: 100%;
  aspect-ratio: 16 / 9;
}

.hero-video-clip wistia-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Installer quote above app mockup */
.hero-installer-msg {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 14px 18px;
  width: 100%;
  max-width: 420px;
  backdrop-filter: blur(8px);
}

.hero-installer-msg-stars {
  font-size: 14px;
  color: #f6c23e;
  letter-spacing: 2px;
  margin-bottom: 8px;
  line-height: 1;
}

.hero-installer-msg-text {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  line-height: 1.55;
  margin-bottom: 8px;
  font-style: italic;
}

.hero-installer-msg-attr {
  font-size: 12px;
  font-weight: 700;
  color: var(--green-mid);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero-live-badge {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(15,25,20,0.9);
  border: 1px solid rgba(74,158,79,0.45);
  color: rgba(255,255,255,0.9);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 100px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}

.hero-mockup-wrapper {
  position: relative;
  margin-top: 24px;
}

@media (min-width: 1024px) {
  .hero-mockup-wrapper {
    position: absolute;
    bottom: -20px;
    right: 0;
    width: 38%;
    margin-top: 0;
  }
  .hero-mockup-wrapper .app-mockup {
    width: 100%;
    max-width: 100%;
    box-shadow: 0 24px 56px rgba(0,0,0,0.7), 0 8px 20px rgba(0,0,0,0.4);
  }
}

.hero-rolling-pill {
  display: flex;
  justify-content: center;
  margin-top: 36px;
  min-height: 44px;
}

.hero-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
  animation: live-pulse 2s ease-out infinite;
}

@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
  70%  { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* ── APP MOCKUP ── */
.app-mockup {
  background: var(--app-dark);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,0.5);
  width: 100%;
  max-width: 420px;
}

.app-topbar {
  background: var(--charcoal);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.app-topbar-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
}

.diary-badge {
  background: var(--green);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
}

.app-body {
  padding: 16px;
}

.survey-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  transition: background 0.2s ease;
  cursor: pointer;
}

.survey-card-left {
  min-width: 0;
}

/* Intent signals: why this homeowner is worth a surveyor's time. */
.survey-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.survey-signal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(74,158,79,0.12);
  border: 1px solid rgba(74,158,79,0.28);
  color: rgba(255,255,255,0.82);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  padding: 4px 9px;
  border-radius: 100px;
  white-space: nowrap;
}

.survey-card:hover {
  background: rgba(255,255,255,0.09);
}

.survey-card-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.survey-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
}

.survey-card-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
}

.survey-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 100px;
  flex-shrink: 0;
}

.tag-new {
  background: rgba(74,158,79,0.2);
  color: var(--green-mid);
}

.tag-hot {
  background: rgba(239,68,68,0.2);
  color: #f87171;
}

.tag-mid {
  background: rgba(234,179,8,0.2);
  color: var(--gold);
}

.app-footer-bar {
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.app-footer-bar span {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
}

.app-footer-bar .app-view-all {
  color: var(--green);
  font-weight: 700;
  font-size: 13px;
}

/* ── CONTACT / GET STARTED ── */
.contact-section {
  background: var(--grey-bg);
  padding: 64px 0;
}

@media (min-width: 1024px) {
  .contact-section { padding: 96px 0; }
}

.contact-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.contact-header {
  max-width: 640px;
}

.contact-form-wrapper {
  width: 100%;
}

.placeholder-notice {
  font-size: 14px;
  color: var(--grey-text);
  font-style: italic;
}

/* ── TRUST BAR ── */
.trust-bar {
  background: linear-gradient(160deg, #0d1a12 0%, #111827 55%, #0f1f17 100%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 56px 0 72px;
}

/* Review badge row */
.trust-social-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 52px;
}

.trust-avatars {
  display: flex;
  align-items: center;
}

.trust-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid #111827;
  overflow: hidden;
  margin-left: -14px;
  flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5);
  position: relative;
}

.trust-avatar:first-child {
  margin-left: 0;
}

.trust-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Harvard Renewables: background-image gives precise crop control.
   The inline --hr-logo CSS variable is set via PHP in front-page.php. */
.trust-avatar-hr img {
  display: none;
}

.trust-avatar-hr {
  /* --hr-logo set via inline style in PHP */
  background-image: var(--hr-logo);
  background-size: 320%;
  background-position: 4% 60%;
  background-repeat: no-repeat;
}

.trust-review-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.trust-stars {
  font-size: 20px;
  color: #f6c23e;
  letter-spacing: 3px;
  line-height: 1;
}

.trust-review-label {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  max-width: 220px;
}

.trust-review-label strong {
  color: var(--white);
  font-weight: 800;
}

/* Divider */
.trust-rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1) 30%, rgba(255,255,255,0.1) 70%, transparent);
  margin-bottom: 52px;
}

/* ── Partner logos ── */
.trust-partners {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 20px;
  padding: 36px 40px;
}

.trust-bar-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.35);
  margin-bottom: 32px;
  text-align: center;
}

/* Horizontal flex row — logos fill their natural width at a fixed height */
.trust-logos {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 0;
}

/* Vertical hairline between logo slots */
.trust-logo-slot {
  flex: 1;
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  height: 72px;
  position: relative;
}

.trust-logo-slot + .trust-logo-slot::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: rgba(255,255,255,0.1);
}

/* Logos render at their natural intrinsic size, capped at 60px tall.
   Wide text logos (spruce, FinMatch) stay wide; icon logos stay square. */
.trust-logo-slot img {
  height: 56px;
  width: auto;
  max-width: 100%;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.trust-logo-slot img:hover {
  opacity: 1;
  transform: scale(1.04);
}

@media (min-width: 768px) {
  .trust-logo-slot { height: 80px; padding: 0 28px; }
  .trust-logo-slot img { height: 64px; }
}

@media (min-width: 1024px) {
  .trust-bar { padding: 80px 0 100px; }
  .trust-social-proof { gap: 28px; margin-bottom: 72px; }
  .trust-avatar { width: 68px; height: 68px; }
  .trust-stars { font-size: 24px; }
  .trust-review-label { font-size: 17px; max-width: 280px; }
  .trust-rule { margin-bottom: 72px; }
  .trust-partners { padding: 48px 56px; border-radius: 24px; }
  .trust-bar-label { font-size: 12px; margin-bottom: 40px; }
  .trust-logo-slot { height: 100px; padding: 0 40px; min-width: 160px; }
  .trust-logo-slot img { height: 80px; }
}

/* ── PROBLEM SECTION ── */
.problem {
  padding: 64px 0;
  background: var(--white);
}

@media (min-width: 1024px) {
  .problem { padding: 96px 0; }
}

.problem-text {
  max-width: 680px;
  margin-bottom: 48px;
}

@media (min-width: 1024px) {
  .problem-text { margin-bottom: 64px; }
}

.problem-text .section-sub {
  margin-bottom: 32px;
}

.problem-points {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 28px;
}

.problem-point {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.problem-point-icon {
  width: 32px;
  height: 32px;
  background: rgba(239,68,68,0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

.problem-point p {
  font-size: 15px;
  color: var(--charcoal);
  line-height: 1.6;
}

.problem-point strong {
  font-weight: 700;
}

.contrast-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}

@media (min-width: 768px) {
  .contrast-cards { grid-template-columns: 1fr 1.15fr; gap: 28px; align-items: center; }
}

.contrast-before,
.contrast-after {
  border-radius: 20px;
  padding: 32px;
  position: relative;
  overflow: hidden;
}

.contrast-before {
  background: var(--white);
  border: 1.5px solid var(--grey-mid);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.04);
  opacity: 0.78;
  transform: scale(0.92);
  transform-origin: top center;
}

@media (min-width: 768px) {
  .contrast-before { transform: scale(0.96); transform-origin: center right; }
}

.contrast-after {
  background: linear-gradient(145deg, var(--charcoal) 0%, #1a202c 100%);
  border: 1.5px solid rgba(74,158,79,0.45);
  box-shadow: 0 12px 36px rgba(0,0,0,0.28), 0 32px 72px rgba(0,0,0,0.2), 0 0 0 1px rgba(74,158,79,0.15);
  z-index: 1;
}

@media (min-width: 768px) {
  .contrast-after { transform: translateY(-8px); }
}

.contrast-after::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(74,158,79,0.15) 0%, transparent 70%);
  pointer-events: none;
}

/* Floating badge */
.contrast-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border-radius: 20px;
}

.contrast-badge-before {
  background: #fee2e2;
  color: #b91c1c;
}

.contrast-badge-after {
  background: rgba(74,158,79,0.18);
  color: var(--green);
  border: 1px solid rgba(74,158,79,0.35);
}

/* Before card header */
.contrast-header {
  font-size: 14px;
  font-weight: 800;
  color: var(--charcoal);
  margin-bottom: 24px;
  margin-top: 8px;
}

/* After card logo */
.contrast-logo-wrap {
  margin-bottom: 24px;
  margin-top: 8px;
}

.contrast-logo-full {
  height: 28px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.contrast-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contrast-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.55;
}

.contrast-before .contrast-list li {
  color: var(--grey-text);
}

.contrast-after .contrast-list li {
  color: rgba(255,255,255,0.78);
}

.contrast-list li::before {
  flex-shrink: 0;
  margin-top: 1px;
  font-weight: 900;
  font-size: 13px;
}

.contrast-before .contrast-list li::before {
  content: '✕';
  color: #dc2626;
}

.contrast-after .contrast-list li::before {
  content: '✓';
  color: var(--green);
  font-size: 14px;
}

/* ── HOW IT WORKS ── */
.how-it-works {
  padding: 64px 0;
  background: var(--grey-bg);
}

@media (min-width: 1024px) {
  .how-it-works { padding: 96px 0; }
}

.how-header {
  text-align: center;
  margin-bottom: 64px;
}

.how-header .section-sub {
  margin: 0 auto;
}

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  position: relative;
}

@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(3, 1fr); }

  .steps::before {
    content: '';
    position: absolute;
    top: 36px;
    left: calc(16.66% + 16px);
    right: calc(16.66% + 16px);
    height: 2px;
    border-top: 2px dashed var(--grey-mid);
  }
}

.step {
  background: var(--white);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.step:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1), 0 16px 40px rgba(0,0,0,0.06);
}

.step-num {
  width: 72px;
  height: 72px;
  background: var(--green);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 900;
  margin: 0 auto 24px;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 16px rgba(74,158,79,0.35);
}

.step h3 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--charcoal);
}

.step p {
  color: var(--grey-text);
  font-size: 15px;
  line-height: 1.7;
}

/* ── PLATFORM PREVIEW ── */
/* Bonus chips */
/* Sits under the features grid on a white section, so these are light-theme
   colours. They were dark-theme when the block lived in the old platform preview. */
.bonus-chips-block {
  border-top: 1px solid var(--grey-mid);
  padding-top: 32px;
  margin-top: 48px;
  text-align: center;
}

.bonus-chips-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--grey-text);
  margin-bottom: 16px;
}

.bonus-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.bonus-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--grey-bg);
  border: 1px solid var(--grey-mid);
  color: var(--charcoal);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 100px;
  transition: all 0.2s ease;
}

.bonus-chip:hover {
  background: var(--green-light);
  border-color: var(--green);
  color: var(--green-dark);
}

/* Lead claim card mockup */
/* ── WHAT YOU GET ── */
.features {
  padding: 64px 0;
  background: var(--white);
}

@media (min-width: 1024px) {
  .features { padding: 96px 0; }
}

.features-header {
  text-align: center;
  margin-bottom: 64px;
}

.features-header .section-sub {
  margin: 0 auto;
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
}

.feature-card {
  background: var(--white);
  border: 1px solid var(--grey-mid);
  border-top: 4px solid var(--green);
  border-radius: 16px;
  padding: 32px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 16px 32px rgba(0,0,0,0.06);
}

.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1), 0 16px 40px rgba(0,0,0,0.06);
}

.feature-card-icon {
  width: 52px;
  height: 52px;
  background: var(--green-light);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 20px;
}

.feature-card h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--charcoal);
  margin-bottom: 10px;
}

.feature-card p {
  font-size: 15px;
  color: var(--grey-text);
  line-height: 1.6;
}

/* ── PRICING ── */
.pricing {
  padding: 64px 0;
  background: var(--grey-bg);
}

@media (min-width: 1024px) {
  .pricing { padding: 96px 0; }
}

.pricing-header {
  text-align: center;
  margin-bottom: 16px;
}

.pricing-callout {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--charcoal);
  background: var(--green-light);
  border: 1px solid var(--green-border);
  border-radius: 100px;
  display: inline-block;
  padding: 10px 28px;
  margin-bottom: 48px;
}

.pricing-callout-wrap {
  text-align: center;
}

.pricing-header .section-sub {
  margin: 0 auto 24px;
}

.pricing-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 1024px) {
  .pricing-cards { grid-template-columns: repeat(3, 1fr); }
}

.pricing-card {
  background: var(--white);
  border: 2px solid var(--grey-mid);
  border-radius: 16px;
  padding: 36px 28px;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1), 0 24px 48px rgba(0,0,0,0.06);
}

.pricing-card.popular {
  border-color: var(--green);
  box-shadow: 0 16px 48px rgba(74,158,79,0.22), 0 4px 16px rgba(74,158,79,0.12);
  transform: translateY(-8px);
}

.pricing-card.popular:hover {
  transform: translateY(-14px);
  box-shadow: 0 24px 56px rgba(74,158,79,0.28), 0 8px 24px rgba(74,158,79,0.15);
}

.popular-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--green);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: 100px;
  white-space: nowrap;
}

.credit-amount {
  font-size: 42px;
  font-weight: 900;
  color: var(--charcoal);
  margin-bottom: 4px;
}

.credit-amount span {
  font-size: 18px;
  color: var(--grey-text);
  font-weight: 500;
}

.credit-price {
  font-size: 22px;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 8px;
}

.credit-each {
  font-size: 13px;
  color: var(--grey-text);
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--grey-mid);
}

.credit-perks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}

.credit-perks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--charcoal);
}

.credit-perks li::before {
  content: '✓';
  color: var(--green);
  font-weight: 900;
  font-size: 16px;
}

.pricing-note {
  text-align: center;
  margin-top: 32px;
  font-size: 14px;
  color: var(--grey-text);
}

.pricing-note strong {
  color: var(--charcoal);
}

/* ── TESTIMONIALS ── */
.testimonials {
  padding: 64px 0;
  background: linear-gradient(135deg, var(--charcoal) 0%, var(--charcoal-dark) 100%);
}

@media (min-width: 1024px) {
  .testimonials { padding: 96px 0; }
}

.testimonials-header {
  text-align: center;
  margin-bottom: 64px;
}

.testimonials-header .section-label {
  background: rgba(74,158,79,0.15);
  color: var(--green-mid);
}

.testimonials-header .section-title {
  color: var(--white);
}

.testimonials-header .section-sub {
  color: rgba(255,255,255,0.6);
  margin: 0 auto;
}

/* Grid layout — used in book-demo and thank-you pages */
.testi-messages {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .testi-messages { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

/* ── TESTIMONIAL CAROUSEL (homepage) ── */
.testi-carousel {
  position: relative;
}

.testi-track-wrap {
  overflow: hidden;
}

.testi-track {
  display: flex;
  align-items: stretch;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.testi-carousel-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.testi-prev,
.testi-next {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: var(--white);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.testi-prev:hover,
.testi-next:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.4);
}

.testi-prev:disabled,
.testi-next:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Frosted-card style testimonials — matching hero review aesthetic */
.testi-msg {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 20px 22px;
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.testi-msg:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.18);
}

.testi-msg-stars {
  font-size: 15px;
  color: #f6c23e;
  letter-spacing: 2px;
  line-height: 1;
}

.testi-msg-text {
  font-size: 15px;
  color: rgba(255,255,255,0.85);
  line-height: 1.65;
  font-style: italic;
  margin: 0;
  flex: 1;
}

.testi-msg-attr {
  font-size: 12px;
  font-weight: 700;
  color: var(--green-mid);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Carousel slide container — sizing only, no visual styling */
.testi-slide {
  display: flex;
  flex-direction: column;
}

.testi-slide .testi-msg {
  flex: 1;
}

/* Carousel-specific sizing — scoped so .testi-messages grid is unaffected */
.testi-track .testi-slide {
  flex-shrink: 0;
  width: 100%;
  padding: 0 10px 4px;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .testi-track .testi-slide { width: 50%; }
}

@media (min-width: 1024px) {
  .testi-track .testi-slide { width: 33.333%; }
}

/* ── FAQ ── */
.faq {
  padding: 64px 0;
  background: var(--white);
}

@media (min-width: 1024px) {
  .faq { padding: 96px 0; }
}

.faq-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

@media (min-width: 1024px) {
  .faq-inner {
    grid-template-columns: 1fr 2fr;
    gap: 80px;
  }
}

.faq-left {
  background: var(--green-light);
  border: 1px solid var(--green-border);
  border-radius: 16px;
  padding: 32px;
}

.faq-left .section-sub {
  margin-bottom: 28px;
}

.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-bottom: 1px solid var(--grey-mid);
  padding: 20px 0;
}

.faq-item:first-child {
  border-top: 1px solid var(--grey-mid);
}

.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  color: var(--charcoal);
  gap: 16px;
}

.faq-q::after {
  content: '+';
  font-size: 22px;
  color: var(--green);
  font-weight: 400;
  flex-shrink: 0;
}

.faq-a {
  font-size: 15px;
  color: var(--grey-text);
  line-height: 1.7;
  margin-top: 12px;
  display: none;
}

.faq-item.open .faq-q::after {
  content: '−';
}

.faq-item.open .faq-a {
  display: block;
}

/* ── FINAL CTA ── */
.final-cta {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}

.final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.final-cta .container {
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px) {
  .final-cta { padding: 96px 0; }
}

.final-cta-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}

@media (min-width: 1024px) {
  .final-cta-inner { grid-template-columns: 1fr 1fr; gap: 72px; }
}

.final-cta-text {
  text-align: left;
}

@media (max-width: 1023px) {
  .final-cta-text { text-align: center; }
}

.final-cta h2 {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 900;
  color: var(--white);
  margin-bottom: 20px;
  line-height: 1.15;
}

.final-cta p {
  font-size: 18px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 40px;
  max-width: 520px;
  line-height: 1.6;
}

@media (max-width: 1023px) {
  .final-cta p { margin-left: auto; margin-right: auto; }
}

/* Mini survey card in final CTA */
.cta-mini-card {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.3);
}

.cta-mini-header {
  background: rgba(0,0,0,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cta-mini-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
}

.cta-mini-count {
  background: rgba(255,255,255,0.15);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
}

.cta-mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  gap: 12px;
}

.cta-mini-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 3px;
}

.cta-mini-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
}

.cta-mini-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 100px;
  white-space: nowrap;
  flex-shrink: 0;
}

.cta-mini-footer {
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cta-mini-footer span {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
}

.cta-mini-view {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.7) !important;
}

/* ── FOOTER ── */
footer {
  background: var(--charcoal);
  padding: 40px 0 28px;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

.footer-logo img {
  height: 32px;
  width: auto;
  opacity: 0.9;
}

.footer-links {
  display: flex;
  gap: 24px;
}

.footer-links a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--white);
}

.footer-copy {
  font-size: 13px;
  color: rgba(255,255,255,0.35);
}

/* ── NAV: FULL MENU ── */
.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-left: 32px;
}

.nav-cta {
  display: none;
}

@media (min-width: 1024px) {
  .nav-cta { display: inline-block; }
}

.nav-menu {
  list-style: none;
  display: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

@media (min-width: 1024px) {
  .nav-menu { display: flex; }
}

.nav-menu li a {
  display: block;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--charcoal);
  text-decoration: none;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
}

.nav-menu li a:hover,
.nav-menu li.current-menu-item > a {
  color: var(--green-dark);
  background: transparent;
}

/* ── HAMBURGER ── */
.nav-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.nav-hamburger:hover {
  background: var(--grey-bg);
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--charcoal);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
  transform-origin: center;
}

@media (min-width: 1024px) {
  .nav-hamburger { display: none; }
}

nav.menu-open .nav-hamburger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

nav.menu-open .nav-hamburger span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

nav.menu-open .nav-hamburger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── MOBILE DRAWER ── */
@media (max-width: 1023px) {
  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--grey-mid);
    flex-direction: column;
    align-items: stretch;
    padding: 0 24px;
    gap: 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.25s ease;
  }

  nav.menu-open .nav-menu {
    display: flex;
    max-height: 480px;
    opacity: 1;
    padding: 8px 24px 16px;
  }

  .nav-menu li a {
    padding: 14px 8px;
    font-size: 16px;
    border-bottom: 1px solid var(--grey-mid);
    border-radius: 0;
  }

  .nav-menu li:last-child a {
    border-bottom: none;
  }

  .nav-mobile-cta {
    display: none;
  }
}

/* ── LANDING NAV ── */
.nav-landing .nav-inner {
  justify-content: center;
}

/* ── FOOTER: MULTI-COLUMN ── */
.site-footer {
  background: #1a202c;
  padding: 64px 0 0;
}

.footer-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  padding-bottom: 56px;
}

@media (min-width: 768px) {
  .footer-main {
    grid-template-columns: 1fr 2fr;
    gap: 64px;
  }
}

/* Force white logo on dark footer backgrounds */
.site-footer .logo-dark,
.footer-landing .logo-dark {
  fill: #ffffff;
}

/* Size the inline SVG */
.footer-logo svg,
.footer-landing .footer-logo svg {
  height: 32px;
  width: auto;
  display: block;
  opacity: 0.85;
}

/* Brand column */
.footer-logo img {
  height: 32px;
  width: auto;
  opacity: 0.85;
  display: block;
  margin-bottom: 20px;
}

.footer-tagline {
  font-size: 14px;
  color: rgba(255,255,255,0.45);
  line-height: 1.7;
  max-width: 280px;
  margin-bottom: 24px;
}

.footer-social {
  display: flex;
  gap: 10px;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: all 0.2s ease;
}

.social-icon:hover {
  border-color: rgba(255,255,255,0.4);
  color: var(--white);
  background: rgba(255,255,255,0.06);
}

/* Links grid */
.footer-links-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

@media (min-width: 768px) {
  .footer-links-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.footer-col-heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.35);
  margin-bottom: 20px;
}

.footer-menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-menu a {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-menu a:hover {
  color: var(--white);
}

.footer-cta-col {
  display: flex;
  align-items: flex-start;
}

/* Copyright row */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 0;
}

.footer-bottom-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 0;
}

@media (min-width: 768px) {
  .footer-bottom-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.footer-copy {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
}

.footer-badges {
  display: flex;
  gap: 20px;
}

.footer-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255,255,255,0.3);
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.badge-dot--green { background: var(--green); }
.badge-dot--grey  { background: rgba(255,255,255,0.3); }

/* ── LANDING FOOTER ── */
.footer-landing {
  background: var(--charcoal);
  padding: 28px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.footer-landing-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-landing .footer-logo img {
  height: 28px;
  width: auto;
  opacity: 0.8;
}

/* ── ONE-PAGER FOOTER ── */
.footer-onepager {
  background: linear-gradient(160deg, #111827 0%, #1a202c 50%, #2d3748 100%);
  padding: 56px 0 32px;
}

.footer-onepager .logo-dark {
  fill: #ffffff;
}

.footer-onepager .footer-logo svg {
  height: 30px;
  width: auto;
  display: block;
  opacity: 0.9;
}

.footer-op-top {
  padding-bottom: 32px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 768px) {
  .footer-op-top {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.footer-op-tagline {
  font-size: 14px;
  color: rgba(255,255,255,0.4);
  max-width: 360px;
}

.footer-op-bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 768px) {
  .footer-op-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.footer-op-copy {
  font-size: 12px;
  color: rgba(255,255,255,0.25);
}

.footer-op-legal {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-op-legal a {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-op-legal a:hover {
  color: var(--white);
}

.footer-op-divider {
  color: rgba(255,255,255,0.2);
  font-size: 12px;
}

/* ── BOOK A DEMO PAGE ── */

/* Progress indicator */
.book-progress {
  background: var(--white);
  border-bottom: 1px solid var(--grey-mid);
  padding: 20px 0;
}

/* Dark variant of the funnel nav + step indicator, used on book-a-demo's
   dark redesign only (.book-nav-dark / .book-progress-dark modifiers, added
   alongside the base .nav-funnel / .book-progress classes so the shared
   light versions on thank-you and breakdown/resources are untouched). */
.book-nav-dark {
  background: linear-gradient(135deg, var(--charcoal) 0%, var(--charcoal-dark) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.book-progress-dark .book-progress-dot {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.6);
}

.book-progress-dark .book-progress-step.done .book-progress-dot {
  background: var(--green);
  color: var(--white);
}

.book-progress-dark .book-progress-step.active .book-progress-dot {
  background: var(--white);
  color: var(--charcoal);
}

.book-progress-dark .book-progress-label {
  color: rgba(255,255,255,0.5);
}

.book-progress-dark .book-progress-step.done .book-progress-label {
  color: var(--green-mid);
}

.book-progress-dark .book-progress-step.active .book-progress-label {
  color: var(--white);
}

.book-progress-dark .book-progress-line {
  background: rgba(255,255,255,0.15);
}

.book-progress-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.book-progress-step {
  display: flex;
  align-items: center;
  gap: 10px;
}

.book-progress-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
  background: var(--grey-mid);
  color: var(--grey-text);
}

.book-progress-step.done .book-progress-dot {
  background: var(--green);
  color: var(--white);
}

.book-progress-step.active .book-progress-dot {
  background: var(--charcoal);
  color: var(--white);
}

.book-progress-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-text);
}

.book-progress-step.done .book-progress-label {
  color: var(--green-dark);
}

.book-progress-step.active .book-progress-label {
  color: var(--charcoal);
  font-weight: 700;
}

.book-progress-line {
  width: 48px;
  height: 2px;
  background: var(--grey-mid);
  flex-shrink: 0;
}

/* Hero */
.book-hero {
  background: linear-gradient(135deg, var(--charcoal) 0%, var(--charcoal-dark) 100%);
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}

.book-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .book-hero { padding: 80px 0; }
}

/* Booking form shares this section with the pitch text and the "what to
   expect" bullets, three independent grid areas so each can move without
   dragging the others along. Mobile order: intro, then the form (CTA
   straight after the pitch), then the bullets. Desktop: intro + bullets
   stack in the left column, form fills the right column top-to-bottom. */
.book-hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "intro"
    "form"
    "expect";
  gap: 40px;
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px) {
  .book-hero-inner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "intro form"
      "expect form";
    gap: 16px 72px;
    align-items: start;
  }
}

.book-hero-intro { grid-area: intro; }
.book-expect { grid-area: expect; }
.book-hero-form { grid-area: form; }

@media (min-width: 1024px) {
  .book-hero-form {
    padding-top: 4px;
  }
}

.book-label {
  background: rgba(74,158,79,0.15);
  border-color: rgba(74,158,79,0.3);
  color: var(--green-mid);
}

.book-hero-title {
  font-size: clamp(38px, 5.4vw, 64px);
  font-weight: 900;
  color: var(--white);
  line-height: 1.05;
  letter-spacing: -1.5px;
  margin: 20px 0 22px;
}

.book-hero-sub {
  font-size: 17px;
  color: var(--white);
  margin-bottom: 14px;
  line-height: 1.75;
  max-width: 480px;
}

/* What to expect */
.book-expect {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 32px;
}

.book-expect-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.book-expect-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  margin-top: 8px;
  font-size: 0;
  line-height: 0;
}

.book-expect-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 4px;
}

.book-expect-desc {
  font-size: 14px;
  color: var(--white);
  line-height: 1.6;
}

/* Calendar section */
.book-calendar {
  background: linear-gradient(135deg, var(--charcoal) 0%, var(--charcoal-dark) 100%);
  padding: 72px 0;
  position: relative;
  overflow: hidden;
}

.book-calendar::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .book-calendar { padding: 96px 0; }
}

.book-calendar-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.book-calendar-header {
  text-align: center;
  margin-bottom: 40px;
}

.book-calendar-title {
  font-size: clamp(38px, 6vw, 68px);
  font-weight: 900;
  color: var(--white);
  line-height: 1.08;
  letter-spacing: -2px;
  margin-bottom: 18px;
}

.book-calendar-accent {
  color: var(--green-mid);
}

.book-calendar-sub {
  font-size: clamp(16px, 1.6vw, 19px);
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto;
}

.book-calendar-embed {
  width: 100%;
  min-height: 780px;
  background: var(--white);
  border-radius: 16px;
  border: 1px solid var(--grey-mid);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
  overflow: hidden;
}

/* The iframe had no height of its own, so if form_embed.js fails to resize it
   the widget collapses to the browser default of ~150px. This is the floor. */
.book-calendar-embed iframe {
  display: block;
  width: 100%;
  min-height: 780px;
  border: 0;
}

@media (max-width: 760px) {
  .book-calendar-embed { min-height: 640px; }
  .book-calendar-embed iframe { min-height: 640px; }
}

.calendar-placeholder-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 48px;
}

.calendar-placeholder-notice p {
  font-size: 16px;
  color: var(--grey-text);
  font-style: italic;
  text-align: center;
}

/* Testimonials variant on this page: white, breaking up the dark nav/hero
   above and dark footer below instead of running dark start to finish. */
.book-testimonials {
  background: var(--white);
}

.book-testimonials .testimonials-header .section-label {
  background: var(--green-light);
  color: var(--green-dark);
}

.book-testimonials .testimonials-header .section-title {
  color: var(--charcoal);
}

.book-testimonials .testimonials-header .section-sub {
  color: var(--grey-text);
}

/* book-a-demo video testimonials: same 3x2 grid as .rv-proof-videos / .rv-vid
   in css/forecast.css (used on /forecast/reveal, /webinar/thank-you),
   duplicated here rather than loading that whole stylesheet. */
.book-testimonials .rv-proof-videos { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 32px; }
.book-testimonials .rv-vid {
  position: relative; flex: 0 1 calc(33.333% - 11px); max-width: calc(33.333% - 11px);
  aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
  background: linear-gradient(140deg, #212b3d 0%, #0f141d 100%); border: 1px solid var(--grey-mid);
  box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}
.book-testimonials .rv-vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 860px) { .book-testimonials .rv-vid { flex-basis: calc(50% - 8px); max-width: calc(50% - 8px); } }
@media (max-width: 520px) { .book-testimonials .rv-vid { flex-basis: 100%; max-width: 100%; } }

/* Portrait click-to-play testimonial row: single row of 6 */
.book-testimonials .rv-portrait-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 4px 12px;
  margin-bottom: 32px;
  scroll-snap-type: x proximity;
}

@media (min-width: 1024px) {
  .book-testimonials .rv-portrait-row { overflow: visible; justify-content: center; padding: 0 0 4px; }
}

.book-testimonials .rv-portrait-card {
  position: relative;
  flex: 0 0 auto;
  width: 200px;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  background: #0f141d;
  border: 1px solid var(--grey-mid);
  box-shadow: 0 10px 26px rgba(0,0,0,0.12);
  scroll-snap-align: start;
  cursor: pointer;
}

@media (min-width: 640px) {
  .book-testimonials .rv-portrait-card { width: 220px; }
}

@media (min-width: 1024px) {
  .book-testimonials .rv-portrait-card { width: calc((100% - 48px) / 4); }
}

.book-testimonials .rv-portrait-card img,
.book-testimonials .rv-portrait-card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}

.book-testimonials .rv-portrait-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #ff0000;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
  transition: transform 0.2s ease, background 0.2s ease;
}

.book-testimonials .rv-portrait-play svg {
  margin-left: 3px;
}

.book-testimonials .rv-portrait-card:hover .rv-portrait-play {
  background: #e60000;
  transform: scale(1.08);
}

.book-testimonials .rv-portrait-card.is-playing .rv-portrait-play,
.book-testimonials .rv-portrait-card.is-playing img {
  display: none;
}

/* ── LEGAL PAGES (Privacy, Terms) ── */
.legal-page {
  padding: 72px 0 96px;
  background: var(--white);
}

.legal-header {
  max-width: 720px;
  margin-bottom: 56px;
}

.legal-header .section-label {
  color: var(--green);
  margin-bottom: 16px;
}

.legal-header h1 {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 800;
  color: var(--charcoal);
  line-height: 1.1;
  margin-bottom: 12px;
}

.legal-meta {
  font-size: 14px;
  color: var(--grey-text);
}

.legal-body {
  max-width: 720px;
}

.legal-body h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--charcoal);
  margin-top: 40px;
  margin-bottom: 12px;
}

.legal-body h2:first-child {
  margin-top: 0;
}

.legal-body p {
  font-size: 16px;
  line-height: 1.75;
  color: #4a5568;
  margin-bottom: 16px;
}

.legal-body ul {
  margin: 0 0 16px 0;
  padding-left: 24px;
}

.legal-body ul li {
  font-size: 16px;
  line-height: 1.7;
  color: #4a5568;
  margin-bottom: 8px;
}

.legal-body a {
  color: var(--green);
  text-decoration: underline;
}

.legal-body a:hover {
  color: var(--green-dark);
}

/* ── CONTACT PAGE ── */
.contact-page-hero {
  background: linear-gradient(135deg, var(--charcoal) 0%, #1a202c 100%);
  padding: 80px 0 72px;
  text-align: center;
}

.contact-page-hero-inner {
  max-width: 640px;
  margin: 0 auto;
}

.contact-page-hero .section-label {
  color: var(--green);
  margin-bottom: 16px;
}

.contact-page-title {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 20px;
}

.contact-page-sub {
  font-size: clamp(16px, 2vw, 20px);
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
}

.contact-page-form-section {
  padding: 80px 0;
  background: var(--grey-bg);
}

.contact-page-form-inner {
  display: flex;
  gap: 64px;
  align-items: flex-start;
}

.contact-page-details {
  width: 280px;
  flex-shrink: 0;
}

.contact-page-details-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 24px;
}

.contact-page-detail-item {
  margin-bottom: 24px;
}

.contact-page-detail-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey-text);
  margin-bottom: 4px;
}

.contact-page-detail-value {
  font-size: 16px;
  color: var(--charcoal);
  text-decoration: none;
  font-weight: 500;
}

a.contact-page-detail-value:hover {
  color: var(--green);
  transition: color 0.2s ease;
}

.contact-form-wrapper {
  flex: 1;
  background: var(--white);
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.06);
}

.placeholder-notice {
  color: var(--grey-text);
  font-size: 15px;
  text-align: center;
  padding: 40px 0;
}

/* ── THANK YOU PAGE ── */
.thankyou-hero {
  background: linear-gradient(135deg, var(--charcoal) 0%, #1a202c 100%);
  color: var(--white);
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .thankyou-hero { padding: 80px 0; }
}

.thankyou-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

/* Same two-column pattern as .book-hero-inner: pitch text left, video
   placeholder right, form on mobile shows above the fold. */
.thankyou-hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px) {
  .thankyou-hero-inner {
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .thankyou-hero-video { padding-top: 4px; }
}

.thankyou-check {
  width: 72px;
  height: 72px;
  background: var(--green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--white);
  margin: 0 0 24px;
  box-shadow: 0 0 0 12px rgba(74,158,79,0.15), 0 8px 24px rgba(74,158,79,0.4);
}

.thankyou-title {
  font-size: clamp(36px, 4.4vw, 56px);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 20px;
  letter-spacing: -1.5px;
}

.thankyou-sub {
  font-size: clamp(16px, 1.8vw, 19px);
  color: rgba(255,255,255,0.68);
  line-height: 1.65;
  max-width: 520px;
  margin: 0;
}

/* What Happens Next */
.thankyou-next {
  padding: 72px 0;
  background: var(--grey-bg);
}

@media (min-width: 1024px) {
  .thankyou-next { padding: 96px 0; }
}

.thankyou-next-inner {
  max-width: 760px;
  margin: 0 auto;
}

.thankyou-next-header {
  margin-bottom: 48px;
}

.thankyou-steps {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.thankyou-step {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.thankyou-step-num {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: var(--green);
  color: var(--white);
  border-radius: 50%;
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  box-shadow: 0 4px 12px rgba(74,158,79,0.35);
}

.thankyou-step-body h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 8px;
}

.thankyou-step-body p {
  font-size: 15px;
  color: var(--grey-text);
  line-height: 1.65;
}

/* What the call covers */
.thankyou-covers {
  padding: 72px 0;
  background: var(--white);
}

@media (min-width: 1024px) {
  .thankyou-covers { padding: 96px 0; }
}

.thankyou-covers-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}

@media (min-width: 1024px) {
  .thankyou-covers-inner {
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
  }
}

.thankyou-covers-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.thankyou-cover-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.thankyou-cover-icon {
  width: 10px;
  height: 10px;
  min-width: 10px;
  background: var(--green);
  border-radius: 50%;
  margin-top: 7px;
}

.thankyou-cover-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 4px;
}

.thankyou-cover-desc {
  font-size: 14px;
  color: var(--grey-text);
  line-height: 1.6;
}

/* Testimonials variant */
.thankyou-testimonials {
  background: linear-gradient(135deg, var(--charcoal) 0%, #1a202c 100%);
}

/* Contact / reassurance */
.thankyou-contact {
  padding: 64px 0;
  background: var(--grey-bg);
  border-top: 1px solid var(--grey-mid);
}

@media (min-width: 1024px) {
  .thankyou-contact { padding: 80px 0; }
}

.thankyou-contact-inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.thankyou-contact-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.thankyou-contact-title {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  color: var(--charcoal);
}

.thankyou-contact-sub {
  font-size: 16px;
  color: var(--grey-text);
}

.thankyou-contact-form {
  background: var(--white);
  border-radius: 12px;
  padding: 32px 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Thank-you page video-first redesign (2026-09-04). Real videos not ready
   yet — .ty-video-placeholder is a dashed-box stand-in, swap for a real
   embed (see .rv-vid above for the iframe pattern) before this goes live. */
.thankyou-hero-note {
  margin: 22px 0 0;
  max-width: 480px;
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
}

.ty-section {
  padding: 64px 0;
}

@media (min-width: 1024px) {
  .ty-section { padding: 88px 0; }
}

.ty-section.ty-alt {
  background: var(--grey-bg);
}

.ty-section-header {
  max-width: 900px;
  margin: 0 auto 40px;
  text-align: center;
}

.ty-section-header .section-sub {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.ty-video-single {
  max-width: 720px;
  margin: 0 auto;
}

.ty-video-placeholder {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background: linear-gradient(140deg, #212b3d 0%, #0f141d 100%);
  border: 2px dashed rgba(255,255,255,0.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(255,255,255,0.72);
}

.ty-video-play {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.ty-video-placeholder-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0 16px;
  text-align: center;
}

.ty-video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}

.ty-video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.ty-video-caption {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--charcoal);
  text-align: center;
}

.ty-video-caption-above {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--charcoal);
  text-align: left;
}

.ty-video-caption-above::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

/* Question + video read as one card, not a loose caption floating over a
   black box, so the question has real visual weight. */
.ty-video-grid-6 > div {
  background: var(--white);
  border: 1px solid var(--grey-mid);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.ty-video-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 640px) {
  .ty-video-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* 6 FAQ clips: 3 columns x 2 rows once there's room, not just the generic
   2-column .ty-video-grid. */
@media (min-width: 860px) {
  .ty-video-grid-6 { grid-template-columns: repeat(3, 1fr); }
}

.ty-video-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 860px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .ty-video-pair { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* "What happens on the call" / "Who it's for": plain copy, not video */
.ty-copy-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 860px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .ty-copy-pair { grid-template-columns: 1fr 1fr; gap: 48px; }
}

/* Who this is / isn't for: two checklists, green ticks vs red crosses */
.ty-fit-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .ty-fit-columns { grid-template-columns: 1fr 1fr; gap: 48px; }
}

.ty-fit-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ty-fit-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--charcoal);
  line-height: 1.5;
}

.ty-fit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
  margin-top: 1px;
}

.ty-fit-yes-icon {
  background: var(--green-light);
  color: var(--green-dark);
}

.ty-fit-no-icon {
  background: var(--red-light);
  color: var(--red-header);
}

.ty-copy-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.ty-copy-icon {
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
  background: var(--green);
  margin-top: 8px;
  font-size: 0;
  line-height: 0;
}

.ty-copy-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 6px;
}

.ty-copy-desc {
  font-size: 15px;
  color: var(--grey-text);
  line-height: 1.65;
}

/* Brad's YouTube videos, 4 columns x 2 rows on desktop */
.ty-yt-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 40px;
}

@media (min-width: 640px) {
  .ty-yt-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .ty-yt-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

.ty-yt-vid {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(140deg, #212b3d 0%, #0f141d 100%);
  border: 1px solid var(--grey-mid);
  box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}

.ty-yt-vid iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.ty-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.ty-link-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px 10px 10px;
  border-radius: 100px;
  border: 2px solid var(--charcoal);
  color: var(--charcoal);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.ty-link-pill:hover {
  background: var(--charcoal);
  color: var(--white);
  transform: translateY(-2px);
}

.ty-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
}

.ty-link-icon-linkedin { background: #0a66c2; }
.ty-link-icon-youtube { background: #ff0000; }
.ty-link-icon-youtube svg { margin-left: 2px; }


/* ── BLOG ARCHIVE ── */
.blog-archive {
  padding: 64px 0 80px;
  background: var(--white);
}

@media (min-width: 1024px) {
  .blog-archive { padding: 96px 0; }
}

.blog-archive-header {
  margin-bottom: 56px;
}

.blog-category-section {
  margin-bottom: 72px;
}

.blog-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--green);
}

.blog-category-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--charcoal);
}

.blog-view-all {
  font-size: 14px;
  font-weight: 700;
  color: var(--green);
  text-decoration: none;
  transition: color 0.2s ease;
}

.blog-view-all:hover {
  color: var(--green-dark);
}

.blog-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .blog-card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .blog-card-grid { grid-template-columns: repeat(3, 1fr); }
}

.blog-card {
  background: var(--white);
  border: 1px solid var(--grey-mid);
  border-top: 3px solid var(--green);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1), 0 16px 40px rgba(0,0,0,0.06);
}

.blog-card-thumb {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.blog-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  display: block;
}

.blog-card:hover .blog-card-thumb img {
  transform: scale(1.04);
}

.blog-card-body {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.blog-card-meta {
  font-size: 13px;
  color: var(--grey-text);
}

.blog-card-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

.blog-card-title a {
  color: var(--charcoal);
  text-decoration: none;
  transition: color 0.2s ease;
}

.blog-card-title a:hover {
  color: var(--green);
}

.blog-card-excerpt {
  font-size: 14px;
  color: var(--grey-text);
  line-height: 1.6;
  flex: 1;
}

.blog-card-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--green);
  text-decoration: none;
  transition: color 0.2s ease;
  margin-top: 4px;
}

.blog-card-link:hover {
  color: var(--green-dark);
}

.blog-empty {
  text-align: center;
  padding: 64px 0;
  color: var(--grey-text);
}

/* ── SINGLE POST ── */
.single-post {
  padding: 48px 0 80px;
  background: var(--white);
}

@media (min-width: 1024px) {
  .single-post { padding: 64px 0 96px; }
}

.breadcrumb {
  font-size: 13px;
  color: var(--grey-text);
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.breadcrumb a {
  color: var(--grey-text);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb a:hover {
  color: var(--green);
}

.breadcrumb-sep {
  color: var(--grey-mid);
}

.post-hero-image {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 40px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1), 0 16px 40px rgba(0,0,0,0.06);
  aspect-ratio: 21 / 9;
}

.post-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.post-header {
  margin-bottom: 40px;
  max-width: 720px;
}

.post-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  line-height: 1.15;
  color: var(--charcoal);
  margin-bottom: 16px;
}

.post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 14px;
  color: var(--grey-text);
}

.post-meta-sep {
  color: var(--grey-mid);
}

.post-category a {
  color: var(--green-dark);
  font-weight: 700;
  text-decoration: none;
  background: var(--green-light);
  padding: 2px 10px;
  border-radius: 100px;
  border: 1px solid var(--green-border);
  transition: background 0.2s ease;
}

.post-category a:hover {
  background: var(--green-border);
}

.post-content {
  max-width: 720px;
  font-size: 17px;
  line-height: 1.8;
  color: var(--charcoal);
  /* Pasted content can carry unbreakable strings (long URLs, runs of  ).
     Without this they overflow the column instead of wrapping. */
  overflow-wrap: break-word;
}
.post-content img,
.post-content iframe,
.post-content table {
  max-width: 100%;
}

.post-content h2 {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  margin: 40px 0 16px;
  color: var(--charcoal);
}

.post-content h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 32px 0 12px;
  color: var(--charcoal);
}

.post-content p { margin-bottom: 20px; }

.post-content ul,
.post-content ol {
  padding-left: 24px;
  margin-bottom: 20px;
}

.post-content li { margin-bottom: 8px; }

.post-content a {
  color: var(--green);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.post-content a:hover { color: var(--green-dark); }

.post-content blockquote {
  border-left: 4px solid var(--green);
  padding: 16px 24px;
  margin: 32px 0;
  background: var(--green-light);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--green-dark);
}

.post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 24px 0;
  display: block;
}

.post-nav {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--grey-mid);
  max-width: 720px;
}

.post-nav a {
  font-size: 14px;
  font-weight: 700;
  color: var(--green);
  text-decoration: none;
  transition: color 0.2s ease;
}

.post-nav a:hover { color: var(--green-dark); }

.post-nav-prev { text-align: left; }
.post-nav-next { text-align: right; }


/* ═══════════════════════════════════════════
   CAREERS PAGE
   ═══════════════════════════════════════════ */

/* Hero */
.careers-hero {
  background: linear-gradient(135deg, #1a2a3a 0%, var(--charcoal) 100%);
  padding: 100px 0 88px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.careers-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.careers-hero-inner {
  max-width: 760px;
  margin: 0 auto;
}

.section-label-white {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.2);
}

.careers-hero-title {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.15;
  margin: 0 0 20px;
}

.careers-hero-sub {
  font-size: 20px;
  color: rgba(255,255,255,0.75);
  line-height: 1.65;
  max-width: 600px;
  margin: 0 auto 36px;
}

.careers-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0 auto 32px;
}

.careers-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid rgba(74,158,79,0.4);
  background: rgba(74,158,79,0.15);
  color: var(--green-mid, #5db562);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Open positions */
.careers-openings {
  padding: 80px 0;
  background: var(--white);
}

.careers-openings-header {
  margin-bottom: 40px;
}

.job-card {
  border: 1px solid var(--grey-mid);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.job-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border-color: var(--green);
}

.job-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  gap: 16px;
}

.job-card-toggle {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: background 0.15s ease;
  border-radius: 12px 12px 0 0;
}

.job-card-toggle:hover {
  background: var(--grey-bg);
}

.job-card-toggle-open {
  border-radius: 12px 12px 0 0;
}

.job-card-chevron {
  width: 20px;
  height: 20px;
  color: var(--grey-text);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.job-card-chevron svg {
  width: 100%;
  height: 100%;
}

.job-card-toggle-open .job-card-chevron {
  transform: rotate(180deg);
}

.job-card-apply-row {
  padding-top: 16px;
  border-top: 1px solid var(--grey-mid);
  margin-top: 4px;
}

.job-card-apply-row-full {
  grid-column: 1 / -1;
}

.job-card-title {
  font-weight: 700;
  font-size: 18px;
  color: var(--charcoal);
  margin-bottom: 5px;
}

.job-card-meta {
  font-size: 14px;
  color: var(--grey-text);
}

.job-card-salary {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--green-light);
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 700;
}

.job-card-body {
  padding: 20px 28px 24px;
  border-top: 1px solid var(--grey-mid);
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.job-card-body[hidden],
.job-card-form-wrap[hidden] {
  display: none !important;
}

.job-card-body.has-video {
  grid-template-columns: 1fr 420px;
  align-items: start;
}

.job-card-body-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.job-card-video-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.job-card-video-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey-text);
}

.job-card-video-wrap {
  border-radius: 8px;
  overflow: hidden;
  background: var(--grey-mid);
}

.job-card-desc {
  font-size: 15px;
  color: var(--grey-text);
  line-height: 1.65;
  margin-bottom: 16px;
}

.job-card-requirements {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.job-card-requirements li {
  font-size: 14px;
  color: var(--charcoal);
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}

.job-card-requirements li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}

.job-card-video {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
  border: none;
  display: block;
}

.job-card-form-wrap {
  border-top: 1px solid var(--grey-mid);
  background: var(--grey-bg);
  border-radius: 0 0 12px 12px;
}

.job-card-form-inner {
  padding: 28px;
}

.job-card-form-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 20px;
}

.job-card-form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 4px;
}

.careers-empty {
  text-align: center;
  padding: 56px 24px;
  border: 2px dashed var(--grey-mid);
  border-radius: 12px;
}

.careers-empty-icon {
  font-size: 32px;
  margin-bottom: 16px;
}

.careers-empty-text {
  color: var(--grey-text);
  font-size: 16px;
  max-width: 400px;
  margin: 0 auto;
  line-height: 1.6;
}

/* General application */
.careers-general {
  padding: 88px 0;
  background: var(--grey-bg);
  scroll-margin-top: 72px;
}

.careers-general-header {
  text-align: center;
  margin-bottom: 56px;
}

.careers-general-header .section-sub {
  margin: 0 auto;
}

.careers-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

/* Role cards */
.careers-roles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.careers-role-card {
  background: var(--white);
  border: 2px solid var(--grey-mid);
  border-radius: 12px;
  padding: 20px 20px 16px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  width: 100%;
  font-family: var(--font);
}

.careers-role-card:hover {
  border-color: var(--green);
  box-shadow: 0 4px 16px rgba(74,158,79,0.12);
}

.careers-role-card-active {
  border-color: var(--green);
  background: var(--green-light);
  box-shadow: 0 4px 20px rgba(74,158,79,0.18);
}

.careers-role-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
  color: var(--green);
  display: block;
}

.careers-role-icon svg {
  width: 100%;
  height: 100%;
}

.careers-role-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--charcoal);
  margin: 0 0 6px;
}

.careers-role-desc {
  font-size: 13px;
  color: var(--grey-text);
  line-height: 1.55;
  margin: 0 0 10px;
}

.careers-role-select {
  font-size: 12px;
  font-weight: 700;
  color: var(--green-dark);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.careers-role-card-active .careers-role-select {
  color: var(--green-dark);
}

/* Application form */
.careers-form-wrap {
  position: sticky;
  top: 80px;
}

.careers-form-card {
  background: var(--white);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
}

.careers-form-header {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--grey-mid);
}

.careers-form-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--charcoal);
  margin-bottom: 6px;
}

.careers-form-selected {
  font-size: 14px;
  color: var(--grey-text);
  line-height: 1.5;
}

.careers-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Honeypot: kept in the DOM for bots to fill, hidden from real users.
   Off-screen rather than display:none so naive bots still see it. */
.careers-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.careers-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.careers-field-row {
  display: flex;
  gap: 16px;
}

.careers-field-row .careers-field {
  flex: 1;
}

.careers-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--charcoal);
}

.careers-label-optional {
  font-weight: 400;
  color: var(--grey-text);
}

.careers-input {
  font-family: var(--font);
  font-size: 15px;
  color: var(--charcoal);
  background: var(--white);
  border: 1.5px solid var(--grey-mid);
  border-radius: 8px;
  padding: 10px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.careers-input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(74,158,79,0.12);
}

.careers-select {
  cursor: pointer;
  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='%23718096' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.careers-textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.6;
}

.careers-submit {
  width: 100%;
  text-align: center;
  margin-top: 4px;
}

.careers-file-input {
  padding: 8px 12px;
  cursor: pointer;
  color: var(--grey-text);
  font-size: 14px;
}

.careers-file-input::file-selector-button {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--charcoal);
  background: var(--grey-bg);
  border: 1.5px solid var(--grey-mid);
  border-radius: 6px;
  padding: 6px 14px;
  margin-right: 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.careers-file-input::file-selector-button:hover {
  background: var(--grey-mid);
}

/* Thank-you page */
.careers-thankyou {
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  padding: 100px 0;
  background: linear-gradient(135deg, #1a2a3a 0%, var(--charcoal) 100%);
  position: relative;
  overflow: hidden;
}

.careers-thankyou::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.careers-thankyou .container {
  position: relative;
  z-index: 1;
}

.careers-thankyou-inner {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}

.careers-thankyou-icon {
  width: 72px;
  height: 72px;
  background: var(--green-light);
  color: var(--green-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
  margin: 0 auto 24px;
}

.careers-thankyou-title {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 800;
  color: var(--white);
  margin: 16px 0 16px;
  line-height: 1.2;
}

.careers-thankyou-sub {
  font-size: 17px;
  color: rgba(255,255,255,0.7);
  line-height: 1.65;
  margin-bottom: 36px;
}

/* ═══════════════════════════════════════════
   MOBILE — max-width 767px overrides
   ═══════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── Hero ── */
  .hero { padding: 36px 0 48px; }

  .hero h1 { font-size: clamp(30px, 8vw, 42px); letter-spacing: -0.5px; }

  .hero-sub { font-size: 16px; }

  .hero-ctas {
    flex-direction: column;
    gap: 12px;
  }

  .hero-ctas .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .hero-pills { gap: 8px; }

  .hero-visual { margin-top: 32px; }

  .app-mockup { max-width: 100%; }

  .hero-live-badge { font-size: 12px; }

  /* ── Trust bar ── */
  .trust-bar { padding: 40px 0 48px; overflow: hidden; }

  .trust-social-proof {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
  }

  .trust-review-label { white-space: normal; font-size: 14px; }

  .trust-rule { margin-bottom: 36px; }

  .trust-partners { padding: 20px 16px; overflow: hidden; }

  /* 2×2 grid on mobile — prevents logo overflow completely */
  .trust-logos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  .trust-logo-slot {
    flex: none;
    height: 72px;
    padding: 0 12px;
    min-width: 0;
  }

  /* Remove vertical dividers on mobile — they don't work in grid */
  .trust-logo-slot + .trust-logo-slot::before { display: none; }

  /* Add horizontal divider between rows */
  .trust-logo-slot:nth-child(3),
  .trust-logo-slot:nth-child(4) {
    border-top: 1px solid rgba(255,255,255,0.08);
  }

  /* Add vertical divider between columns */
  .trust-logo-slot:nth-child(even) {
    border-left: 1px solid rgba(255,255,255,0.08);
  }

  .trust-logo-slot img { height: 44px; max-width: 100%; width: auto; }

  /* ── Contact section ── */
  .contact-section { padding: 48px 0; }

  .contact-form-wrapper { padding: 0; }

  /* ── Problem section ── */
  .problem { padding: 48px 0; }

  /* ── How it works ── */
  .how-it-works { padding: 48px 0; }

  .how-header { margin-bottom: 32px; }

  .steps { gap: 24px; }

  .step { padding: 24px 20px; }

  /* ── Features ── */
  .features { padding: 48px 0; }

  .features-grid { grid-template-columns: 1fr; gap: 16px; }

  .feature-card { padding: 24px 20px; }

  /* ── Testimonials ── */
  .testimonials { padding: 48px 0; }

  .testi-messages { grid-template-columns: 1fr; gap: 16px; }
  .testi-track .testi-slide { width: 100%; padding: 0 6px 4px; }

  .testi-msg-bubble { padding: 14px 16px; }

  /* ── FAQ ── */
  .faq { padding: 48px 0; }

  .faq-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .faq-q { font-size: 15px; }

  .faq-a { font-size: 15px; }

  /* ── Final CTA ── */
  .final-cta { padding: 56px 0; }

  .final-cta h2 { font-size: clamp(24px, 7vw, 32px); }

  .final-cta p { font-size: 16px; }

  .btn-xl { font-size: 15px; padding: 14px 28px; }

  /* ── Section typography ── */
  .section-title { font-size: clamp(22px, 6vw, 32px); }

  .section-sub { font-size: 15px; }

  .section-label { font-size: 11px; }

  /* ── Contact page ── */
  .contact-page-form-inner { flex-direction: column; gap: 40px; }
  .contact-page-details { width: 100%; }

  /* ── Careers page ── */
  .careers-hero { padding: 72px 0 64px; }
  .careers-hero-title { font-size: clamp(28px, 7vw, 38px); }
  .careers-hero-sub { font-size: 16px; }

  .careers-general-header h2 { font-size: clamp(22px, 6vw, 32px); }

  .careers-layout { grid-template-columns: 1fr; }

  .careers-roles-grid { grid-template-columns: 1fr; }

  .careers-form-card { padding: 24px 20px; }

  .careers-field-row { flex-direction: column; gap: 0; }

  .careers-thankyou { padding: 80px 0; }
  .careers-thankyou-title { font-size: clamp(24px, 7vw, 36px); }

}

/* ══ FORECAST BAND ══════════════════════════════════════════════════════════
   Full-bleed green lead-magnet band between the hero and the trust bar, linking
   to the /forecast funnel. Deliberately NOT a CTA in the nav: a second button
   there stacked against Get Started on the same right edge and the two fought.
   The locked figure mirrors the funnel's own reveal, so the click and the
   landing page tell one story. */

.fcast-band {
  position: relative;
  overflow: hidden;
  padding: 78px 0;
  background: linear-gradient(135deg, #47a04d 0%, #3a8a41 48%, #2d6b34 100%);
  border-top: 1px solid rgba(255,255,255,0.16);
  border-bottom: 1px solid rgba(0,0,0,0.22);
}

@media (max-width: 780px) {
  .fcast-band { padding: 52px 0; }
}

/* Same grid the hero uses, so this introduces no new texture language */
.fcast-band-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* White orbs lift the flat green into something with depth */
.fcast-orb {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 860px;
  height: 860px;
  right: -180px;
  top: 50%;
  transform: translateY(-50%);
  background: radial-gradient(closest-side, rgba(255,255,255,0.28), rgba(255,255,255,0.10) 46%, transparent 72%);
  filter: blur(12px);
}

.fcast-orb-sm {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 420px;
  height: 420px;
  left: -120px;
  bottom: -200px;
  background: radial-gradient(closest-side, rgba(255,255,255,0.14), transparent 70%);
  filter: blur(10px);
}

.fcast-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}

@media (min-width: 940px) {
  .fcast-inner { grid-template-columns: 1.1fr 0.9fr; gap: 64px; }
}

.fcast-band a { text-decoration: none; }

.fcast-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--white);
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.3);
}

.fcast-kicker i {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 10px 2px rgba(255,255,255,0.8);
}

.fcast-h {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 20px 0 14px;
  text-shadow: 0 2px 14px rgba(0,0,0,0.16);
}

.fcast-p {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.6;
  color: rgba(255,255,255,0.88);
  margin: 0 0 28px;
  max-width: 45ch;
}

/* White button: a green one would vanish against the band */
.fcast-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  color: #235527;
  font-weight: 800;
  font-size: 16px;
  padding: 16px 30px;
  border-radius: 10px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.24);
  transition: all 0.2s ease;
}

.fcast-btn:hover {
  background: #f2fff4;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}

.fcast-btn svg { width: 17px; height: 17px; transition: transform 0.2s ease; }
.fcast-btn:hover svg { transform: translateX(4px); }

.fcast-meta {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.fcast-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: rgba(255,255,255,0.8);
}

.fcast-meta svg { width: 15px; height: 15px; color: var(--white); flex: none; }

/* Dark card on green so the withheld figure stays legible */
.fcast-card {
  position: relative;
  z-index: 2;
  background: linear-gradient(160deg, rgba(10,18,14,0.55), rgba(8,14,11,0.68));
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 18px;
  padding: 30px 28px;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 22px 50px rgba(0,0,0,0.3);
  backdrop-filter: blur(10px);
}

.fcast-card-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

.fcast-card-num {
  font-size: clamp(38px, 5vw, 54px);
  font-weight: 900;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 16px 0 20px;
}

/* 5.5px keeps the digit shapes perceptible. Heavier blur turns them into grey
   smears that read as a rendering fault rather than a withheld number. */
.fcast-blur { filter: blur(5.5px); user-select: none; }

.fcast-rows {
  display: grid;
  gap: 10px;
  margin: 0 0 22px;
  text-align: left;
}

.fcast-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 15px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 9px;
}

.fcast-row b { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.7); }

/* Skeleton bar, not blurred glyphs: small blurred text reads as dirt */
.fcast-skel {
  display: block;
  flex: none;
  width: 46px;
  height: 11px;
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(255,255,255,0.22), rgba(255,255,255,0.42), rgba(255,255,255,0.22));
}

.fcast-skel-sm { width: 34px; }

.fcast-lock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.82);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  padding: 9px 16px;
  border-radius: 999px;
}

.fcast-lock svg { width: 13px; height: 13px; flex: none; }

/* ── IN-HOUSE CONTACT FORMS ───────────────────────────────────────────────
   Replaced the Fillout embeds on the homepage and /contact. Styled to match
   the forecast funnel's inputs so the site has one form language, and sized
   to the same visual weight the 500px iframe occupied so surrounding layout
   did not shift. */
.ih-form {
  display: block;
  /* .contact-form-wrapper centres its contents for the old iframe; form labels
     must read left-aligned or the whole thing looks like a landing-page hero. */
  text-align: left;
}

.ih-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 640px) {
  .ih-form-row { grid-template-columns: 1fr 1fr; gap: 16px; }
}

.ih-field { margin-bottom: 16px; }

.ih-field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 6px;
}

.ih-field label span { color: var(--green); }

.ih-field input,
.ih-field select,
.ih-field textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 16px; /* 16px stops iOS zooming the page on focus */
  color: var(--charcoal);
  background: var(--white);
  border: 1px solid var(--grey-mid);
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: all 0.2s ease;
}

.ih-field textarea { resize: vertical; min-height: 104px; }

.ih-field input:focus,
.ih-field select:focus,
.ih-field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(74,158,79,0.18);
}

.ih-submit {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
  cursor: pointer;
  border: none;
}

.ih-submit:disabled { opacity: 0.65; cursor: default; transform: none; }

.ih-form-error {
  font-size: 14px;
  color: #c53030;
  min-height: 20px;
  margin-bottom: 4px;
}

.ih-form-error:empty { min-height: 0; margin-bottom: 0; }

.ih-form-privacy {
  font-size: 13px;
  line-height: 1.5;
  color: var(--grey-text);
  margin-top: 12px;
}

.ih-form-privacy a { color: var(--green-dark); }


/* Honeypot: off-screen rather than display:none, which some bots skip */
.ih-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ih-form-success {
  text-align: center;
  padding: 40px 24px;
  background: var(--green-light);
  border: 1px solid rgba(74,158,79,0.3);
  border-radius: 12px;
}

.ih-form-success svg {
  width: 44px;
  height: 44px;
  color: var(--green);
  margin-bottom: 12px;
}

.ih-form-success h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--charcoal);
  margin-bottom: 6px;
}

.ih-form-success p {
  font-size: 15px;
  color: var(--grey-text);
}

.ih-form-success:focus { outline: none; }

/* Chip radios on the homepage form. Mirrors the forecast funnel's .fc-chip so
   the two forms read as the same product, and beats a native select on mobile:
   one tap instead of a scrolling wheel, and every option visible at a glance. */
.ih-fieldset { border: 0; padding: 0; margin: 0 0 16px; }

.ih-fieldset legend {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 8px;
  padding: 0;
}

.ih-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.ih-chip-wrap { display: inline-flex; cursor: pointer; }

/* Visually hidden, NOT display:none, so the radio stays keyboard focusable
   and screen readers still announce the group. */
.ih-chip-wrap input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.ih-chip {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: var(--charcoal);
  background: var(--white);
  border: 1px solid var(--grey-mid);
  border-radius: 999px;
  padding: 9px 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: all 0.2s ease;
}

.ih-chip-wrap:hover .ih-chip { border-color: var(--green); }

.ih-chip-wrap input:checked + .ih-chip {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
  box-shadow: 0 3px 10px rgba(74,158,79,0.35);
}

/* Focus ring has to sit on the chip, since the input itself is invisible */
.ih-chip-wrap input:focus-visible + .ih-chip {
  outline: none;
  box-shadow: 0 0 0 3px rgba(74,158,79,0.3);
}

.ih-other { margin-top: 10px; }

.ih-other input {
  width: 100%;
  font-family: var(--font);
  font-size: 16px;
  color: var(--charcoal);
  background: var(--white);
  border: 1px solid var(--grey-mid);
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: all 0.2s ease;
}

.ih-other input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(74,158,79,0.18);
}

/* Screen-reader-only. Defined in css/forecast.css too, but that file is only
   loaded by the funnel pages and the homepage form needs it as well. */
.ih-form .sr-only,
.contact-form-wrapper .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}