/* ========================================
   HEX360 Virtual PM — Master Stylesheet
   ======================================== */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&display=swap');

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  min-height: 100dvh;
  line-height: 1.6;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  color: #24282b;
  background-color: #ffffff;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6 { line-height: 1.15; text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; background: none; border: none; }

::selection {
  background: rgba(1, 105, 111, 0.2);
  color: #24282b;
}

:focus-visible {
  outline: 2px solid #01696F;
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* --- Design Tokens --- */
:root {
  /* Brand Colors */
  --teal: #01696F;
  --teal-hover: #015358;
  --teal-light: rgba(1, 105, 111, 0.08);
  --navy: #1B2A4A;
  --navy-dark: #141f38;
  --charcoal: #24282b;
  --grey-bg: #f5f5f7;
  --grey-border: #e0e0e0;
  --grey-text: #6e6e73;
  --white: #ffffff;

  /* Rainbow Stripe */
  --stripe-1: #58a85f;
  --stripe-2: #7dbd38;
  --stripe-3: #ddbd40;
  --stripe-4: #d45d37;
  --stripe-5: #e30079;
  --stripe-6: #692a83;
  --stripe-7: #1f297b;
  --stripe-8: #2a79bd;

  /* Type Scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: 1rem;
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);

  /* Content widths */
  --content-narrow: 680px;
  --content-default: 960px;
  --content-wide: 1200px;

  /* Transition */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Rainbow Stripe Decorative Element --- */
.rainbow-stripe {
  display: flex;
  height: 3px;
  width: 100%;
}
.rainbow-stripe span {
  flex: 1;
}
.rainbow-stripe span:nth-child(1) { background: var(--stripe-1); }
.rainbow-stripe span:nth-child(2) { background: var(--stripe-2); }
.rainbow-stripe span:nth-child(3) { background: var(--stripe-3); }
.rainbow-stripe span:nth-child(4) { background: var(--stripe-4); }
.rainbow-stripe span:nth-child(5) { background: var(--stripe-5); }
.rainbow-stripe span:nth-child(6) { background: var(--stripe-6); }
.rainbow-stripe span:nth-child(7) { background: var(--stripe-7); }
.rainbow-stripe span:nth-child(8) { background: var(--stripe-8); }

.rainbow-stripe--thin {
  height: 2px;
}

/* --- Container --- */
.container {
  width: 100%;
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.container--narrow {
  max-width: var(--content-default);
}

/* --- Header / Navigation --- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--space-4) 0;
  transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

.header--transparent {
  background: transparent;
}

.header--scrolled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3) 0;
}

.header--scrolled .nav__link {
  color: var(--charcoal);
}

.header--scrolled .nav__logo-text {
  color: var(--charcoal);
}

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

/* The full desktop nav (10 links + CTA + toggle + demo + book-a-call) needs
   ~1536px to render without wrapping. The site-wide .container caps at
   1200px (1152px usable), which can never fit that — so the header gets its
   own wider cap, and the hamburger breakpoint below is raised to match, so
   the inline nav only ever shows once there's provably enough room for it. */
.header .container {
  max-width: 1800px !important;
}

/* Logo */
.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.nav__logo svg {
  height: 40px;
  width: auto;
}

.nav__logo-text {
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color: #fff;
  transition: color 0.3s ease;
  line-height: 1.2;
}

.nav__logo-text small {
  display: block;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* Nav links */
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.nav__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  transition: color 0.2s ease;
  white-space: nowrap;
}

.nav__link:hover {
  color: var(--teal);
}

.nav__link--cta {
  background: var(--teal);
  color: #fff !important;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: background 0.2s ease, transform 0.2s ease;
}

.nav__link--cta:hover {
  background: var(--teal-hover);
  color: #fff !important;
  transform: translateY(-1px);
}

/* Mobile nav toggle */
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  z-index: 110;
}

.nav__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  transition: all 0.3s ease;
  border-radius: 2px;
}

.header--scrolled .nav__toggle span {
  background: var(--charcoal);
}

.nav__toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav__toggle.active span:nth-child(2) {
  opacity: 0;
}

.nav__toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile nav overlay */
.nav__mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 95;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.nav__mobile-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Raised from the old 1024px: the full inline nav needs ~1490px of usable
   width to render every item without clipping (see .header .container
   above). Below this, the hamburger menu takes over instead of silently
   cutting off items like "See the demo". */
@media (max-width: 1600px) {
  .nav__links {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    height: 100dvh;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    padding: 5rem var(--space-8) var(--space-8);
    gap: var(--space-1);
    transition: right 0.3s var(--ease);
    box-shadow: var(--shadow-lg);
    z-index: 99;
    overflow-y: auto;
  }

  .nav__links.active {
    right: 0;
  }

  .nav__mobile-overlay {
    display: block;
  }

  .nav__link {
    color: var(--charcoal);
    font-size: 1rem;
    padding: var(--space-3) 0;
    width: 100%;
    border-bottom: 1px solid var(--grey-border);
  }

  .nav__link--cta {
    margin-top: var(--space-4);
    text-align: center;
    border-bottom: none;
  }

  .nav__toggle {
    display: flex;
  }
}

/* --- Members Header --- */
.header--members {
  background: var(--navy);
  position: sticky;
  top: 0;
  padding: var(--space-3) 0;
}

.header--members .nav__link {
  color: rgba(255,255,255,0.85);
}

.header--members .nav__link:hover {
  color: #fff;
}

.header--members .nav__link--logout {
  background: rgba(255,255,255,0.1);
  padding: 0.4rem 1rem;
  border-radius: var(--radius-md);
  color: rgba(255,255,255,0.9);
}

.header--members .nav__link--logout:hover {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

.header--members .nav__logo-text {
  color: #fff;
}

.header--members .nav__toggle span {
  background: #fff;
}

@media (max-width: 1024px) {
  .header--members .nav__links {
    background: var(--navy);
  }
  .header--members .nav__link {
    color: rgba(255,255,255,0.85);
    border-bottom-color: rgba(255,255,255,0.1);
  }
}

/* --- Hero Sections --- */
.hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero--full {
  min-height: 100vh;
}

.hero--short {
  min-height: 50vh;
}

.hero--gradient {
  background: linear-gradient(135deg, var(--navy) 0%, var(--teal) 100%);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(27, 42, 74, 0.7);
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding-top: var(--space-20);
}

.hero__label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: var(--space-4);
}

.hero__title {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-6);
}

.hero__subtitle {
  font-size: var(--text-lg);
  font-weight: 300;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
  max-width: 600px;
  margin-bottom: var(--space-8);
}

.hero__title--dark {
  color: var(--charcoal);
}
.hero__subtitle--dark {
  color: var(--grey-text);
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.85rem 2rem;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: all 0.25s var(--ease);
  white-space: nowrap;
  border: none;
  cursor: pointer;
}

.btn--primary {
  background: var(--teal);
  color: #fff;
}

.btn--primary:hover {
  background: var(--teal-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(1, 105, 111, 0.3);
}

.btn--white {
  background: #fff;
  color: var(--charcoal);
}

.btn--white:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn--outline {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.4);
}

.btn--outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.8);
}

.btn--outline-dark {
  background: transparent;
  color: var(--charcoal);
  border: 1.5px solid var(--grey-border);
}

.btn--outline-dark:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.btn--large {
  padding: 1rem 2.5rem;
  font-size: 1rem;
}

.btn--small {
  padding: 0.5rem 1.25rem;
  font-size: var(--text-xs);
}

.btn--full {
  width: 100%;
  justify-content: center;
}

.btn__arrow {
  transition: transform 0.2s ease;
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

/* --- Section Styles --- */
.section {
  padding: clamp(var(--space-16), 8vw, var(--space-32)) 0;
}

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

.section--dark {
  background: var(--navy);
  color: #fff;
}

.section--teal-light {
  background: rgba(1, 105, 111, 0.04);
}

.section__label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: var(--space-4);
}

/* var(--teal) is a fixed brand constant, not theme-aware. On any section
   that only turns navy via the dark-mode toggle (e.g. .section--grey,
   which resolves to var(--bg-secondary)), that leaves this eyebrow label
   at ~2.2-2.5:1 against the navy — badly fails 4.5:1. --db-accent-bright
   is already a lightened teal defined for exactly this navy-background
   case. Needs !important: a later "Section label should stay teal" rule
   pins color to var(--teal) !important, which otherwise wins regardless
   of this rule's higher specificity. */
html.dark .section__label {
  color: var(--db-accent-bright, #3FC5C5) !important;
}

.section__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--charcoal);
  margin-bottom: var(--space-4);
}

.section--dark .section__title {
  color: #fff;
}

.section__subtitle {
  font-size: var(--text-lg);
  font-weight: 300;
  color: var(--grey-text);
  max-width: 600px;
  line-height: 1.6;
}

.section--dark .section__subtitle {
  color: rgba(255,255,255,0.7);
}

.section__header {
  margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
}

.section__header--center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Card Component --- */
.card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.card--flat {
  box-shadow: none;
  border: 1px solid var(--grey-border);
}

.card--flat:hover {
  box-shadow: var(--shadow-sm);
  border-color: transparent;
}

.card--featured {
  border: 2px solid var(--teal);
  position: relative;
}

.card--dark {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
}

.card--dark:hover {
  background: rgba(255,255,255,0.08);
}

.card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--teal-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  color: var(--teal);
}

.card__icon svg {
  width: 24px;
  height: 24px;
}

.card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-3);
  color: var(--charcoal);
}

.card--dark .card__title {
  color: #fff;
}

.card__text {
  font-size: var(--text-base);
  color: var(--grey-text);
  line-height: 1.7;
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--teal);
  margin-top: var(--space-5);
  transition: gap 0.2s ease;
}

.card__link:hover {
  gap: var(--space-3);
}

/* --- Grid Layouts --- */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

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

@media (max-width: 768px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* --- Trust Bar --- */
.trust-bar {
  padding: var(--space-12) 0;
  text-align: center;
  border-bottom: 1px solid var(--grey-border);
}

.trust-bar__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--grey-text);
  margin-bottom: var(--space-8);
  letter-spacing: 0.05em;
}

.trust-bar__stats {
  display: flex;
  justify-content: center;
  gap: clamp(var(--space-8), 6vw, var(--space-16));
  flex-wrap: wrap;
}

.trust-bar__stat {
  text-align: center;
}

.trust-bar__number {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: -0.03em;
}

.trust-bar__desc {
  font-size: var(--text-sm);
  color: var(--grey-text);
  margin-top: var(--space-1);
}

/* --- Portfolio Strip --- */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.portfolio-item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
}

.portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.portfolio-item:hover img {
  transform: scale(1.05);
}

.portfolio-item__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(27, 42, 74, 0.8) 0%, transparent 60%);
  display: flex;
  align-items: flex-end;
  padding: var(--space-5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.portfolio-item:hover .portfolio-item__overlay {
  opacity: 1;
}

.portfolio-item__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: #fff;
}

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

/* --- CTA Banner --- */
.cta-banner {
  position: relative;
  padding: clamp(var(--space-16), 8vw, var(--space-32)) 0;
  overflow: hidden;
}

.cta-banner__bg {
  position: absolute;
  inset: 0;
}

.cta-banner__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-banner__overlay {
  position: absolute;
  inset: 0;
  background: rgba(27, 42, 74, 0.85);
}

.cta-banner__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.cta-banner__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-6);
}

.cta-banner__text {
  font-size: var(--text-lg);
  font-weight: 300;
  color: rgba(255,255,255,0.8);
  margin-bottom: var(--space-8);
}

/* --- Footer --- */
.footer {
  background: var(--charcoal);
  color: rgba(255,255,255,0.7);
  padding: var(--space-16) 0 var(--space-8);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-12);
}

.footer__brand {
  max-width: 300px;
}

.footer__brand-text {
  font-size: var(--text-sm);
  line-height: 1.7;
  margin-top: var(--space-4);
}

.footer__heading {
  font-size: var(--text-sm);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-5);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.footer__link {
  display: block;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  padding: var(--space-1) 0;
  transition: color 0.2s ease;
}

.footer__link:hover {
  color: #fff;
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255,255,255,0.1);
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer__copyright {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.4);
}

.footer__socials {
  display: flex;
  gap: var(--space-4);
}

.footer__social-link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
  transition: all 0.2s ease;
}

.footer__social-link:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

.footer__social-link svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 768px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* --- Scroll Reveal Animation --- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }
.reveal--delay-4 { transition-delay: 0.4s; }

/* --- Phase Cards (How It Works) --- */
.phase {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--space-8);
  padding: var(--space-10) 0;
  border-bottom: 1px solid var(--grey-border);
}

.phase:last-child {
  border-bottom: none;
}

.phase__number {
  font-size: clamp(3rem, 2rem + 3vw, 5rem);
  font-weight: 700;
  color: var(--teal);
  opacity: 0.2;
  line-height: 1;
}

.phase__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-3);
}

.phase__desc {
  font-size: var(--text-base);
  color: var(--grey-text);
  line-height: 1.7;
  margin-bottom: var(--space-5);
  max-width: 600px;
}

.phase__deliverables {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2) var(--space-6);
}

.phase__deliverable {
  font-size: var(--text-sm);
  color: var(--charcoal);
  padding-left: var(--space-5);
  position: relative;
}

.phase__deliverable::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 2px;
  background: var(--teal);
}

@media (max-width: 768px) {
  .phase {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .phase__deliverables {
    grid-template-columns: 1fr;
  }
}

/* --- Dashboard Mockup --- */
.dashboard-mockup {
  background: #f8f9fa;
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey-border);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.dashboard-mockup__header {
  background: var(--navy);
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.dashboard-mockup__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
}

.dashboard-mockup__dot--red { background: #ff5f57; }
.dashboard-mockup__dot--yellow { background: #febc2e; }
.dashboard-mockup__dot--green { background: #28c840; }

.dashboard-mockup__body {
  padding: var(--space-6);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-4);
}

.mockup-stat {
  background: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-5);
  border: 1px solid var(--grey-border);
}

.mockup-stat__label {
  font-size: 11px;
  color: var(--grey-text);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-2);
}

.mockup-stat__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--charcoal);
}

.mockup-stat__bar {
  height: 6px;
  background: var(--grey-bg);
  border-radius: 3px;
  margin-top: var(--space-3);
  overflow: hidden;
}

.mockup-stat__fill {
  height: 100%;
  border-radius: 3px;
  background: var(--teal);
}

.mockup-tasks {
  grid-column: 1 / -1;
  background: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-5);
  border: 1px solid var(--grey-border);
}

.mockup-tasks__title {
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: var(--space-4);
  color: var(--charcoal);
}

.mockup-task {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--grey-bg);
  font-size: 13px;
}

.mockup-task:last-child {
  border-bottom: none;
}

.mockup-task__check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--grey-border);
  flex-shrink: 0;
}

.mockup-task__check--done {
  background: var(--teal);
  border-color: var(--teal);
  position: relative;
}

.mockup-task__check--done::after {
  content: '✓';
  color: #fff;
  font-size: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mockup-task__text {
  color: var(--charcoal);
  flex: 1;
}

.mockup-task__status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.mockup-task__status--complete {
  background: rgba(1, 105, 111, 0.1);
  color: var(--teal);
}

.mockup-task__status--progress {
  background: rgba(221, 189, 64, 0.15);
  color: #b8960d;
}

.mockup-task__status--pending {
  background: var(--grey-bg);
  color: var(--grey-text);
}

@media (max-width: 768px) {
  .dashboard-mockup__body {
    grid-template-columns: 1fr;
  }
}

/* --- Pricing Cards --- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.pricing-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  border: 1px solid var(--grey-border);
  text-align: center;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.pricing-card--featured {
  border: 2px solid var(--teal);
  position: relative;
}

.pricing-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--teal);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.pricing-card__name {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-2);
}

.pricing-card__price {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-1);
}

.pricing-card__price span {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--grey-text);
}

.pricing-card__annual {
  font-size: var(--text-xs);
  color: var(--grey-text);
  margin-bottom: var(--space-6);
}

.pricing-card__features {
  text-align: left;
  margin-bottom: var(--space-8);
}

.pricing-card__feature {
  font-size: var(--text-sm);
  color: var(--charcoal);
  padding: var(--space-2) 0;
  padding-left: var(--space-6);
  position: relative;
  border-bottom: 1px solid var(--grey-bg);
}

.pricing-card__feature::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--teal);
  font-weight: 700;
}

@media (max-width: 768px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }
}

/* --- Form Styles --- */
.form__group {
  margin-bottom: var(--space-5);
}

.form__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: var(--space-2);
}

.form__input,
.form__select,
.form__textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: var(--text-base);
  border: 1.5px solid var(--grey-border);
  border-radius: var(--radius-md);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(1, 105, 111, 0.1);
}

.form__textarea {
  resize: vertical;
  min-height: 140px;
}

.form__error {
  font-size: var(--text-xs);
  color: #d43d3d;
  margin-top: var(--space-1);
}

/* --- Login Page --- */
.login-page {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grey-bg);
  padding: var(--space-6);
}

.login-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-8);
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-md);
  text-align: center;
}

.login-card__logo {
  margin-bottom: var(--space-8);
  display: flex;
  justify-content: center;
}

.login-card__logo svg {
  height: 50px;
  width: auto;
}

.login-card__title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.login-card__subtitle {
  font-size: var(--text-sm);
  color: var(--grey-text);
  margin-bottom: var(--space-8);
}

.login-card .form__group {
  text-align: left;
}

.login-card__footer {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--grey-text);
}

.login-card__footer a {
  color: var(--teal);
  font-weight: 600;
}

.login-card__error {
  background: rgba(212, 61, 61, 0.08);
  border: 1px solid rgba(212, 61, 61, 0.2);
  color: #d43d3d;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
  display: none;
}

/* --- Member Dashboard --- */
.member-welcome {
  padding: var(--space-10) 0;
}

.member-welcome__name {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.member-welcome__date {
  font-size: var(--text-sm);
  color: var(--grey-text);
  margin-top: var(--space-1);
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.stat-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--grey-border);
}

.stat-card__value {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--charcoal);
}

.stat-card__label {
  font-size: var(--text-sm);
  color: var(--grey-text);
  margin-top: var(--space-1);
}

@media (max-width: 768px) {
  .stat-cards {
    grid-template-columns: 1fr;
  }
}

/* --- Guide Card --- */
.guide-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.guide-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.guide-card--locked {
  opacity: 0.6;
  pointer-events: none;
}

.guide-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.guide-card__badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.guide-card__badge--available {
  background: rgba(1, 105, 111, 0.1);
  color: var(--teal);
}

.guide-card__badge--coming {
  background: var(--grey-bg);
  color: var(--grey-text);
}

.guide-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.guide-card__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-5);
}

/* Blueprint subscribe pricing (real Stripe checkout links) — pinned to the
   bottom of the card via margin-top: auto, so Subscribe rows line up across
   a grid row regardless of how long each card's description/stats run. */
.guide-card__pricing {
  border-top: 1px solid var(--border-color);
  margin-top: auto;
  padding-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.guide-card__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.guide-card__price {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--text-primary);
}

.guide-card__price span {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.guide-card__price-sub {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Progress bar */
.progress-bar {
  height: 6px;
  background: var(--grey-bg);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: var(--space-3);
}

.progress-bar__fill {
  height: 100%;
  background: var(--teal);
  border-radius: 3px;
  transition: width 0.5s var(--ease);
}

.progress-bar__label {
  font-size: var(--text-xs);
  color: var(--grey-text);
}

/* --- Contact Page --- */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-12);
  align-items: start;
}

.contact-info {
  padding: var(--space-8);
  background: var(--grey-bg);
  border-radius: var(--radius-lg);
}

.contact-info__item {
  margin-bottom: var(--space-6);
}

.contact-info__item:last-child {
  margin-bottom: 0;
}

.contact-info__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--grey-text);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-2);
}

.contact-info__value {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--charcoal);
}

.contact-info__value a {
  color: var(--teal);
}

@media (max-width: 768px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* --- Form Thank You --- */
.form-success {
  display: none;
  text-align: center;
  padding: var(--space-10);
}

.form-success__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(1, 105, 111, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-5);
  color: var(--teal);
}

.form-success__title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.form-success__text {
  font-size: var(--text-base);
  color: var(--grey-text);
}

/* --- Badge --- */
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge--coming {
  background: #fff3e0;
  color: #e67e22;
}

.badge--new {
  background: rgba(1, 105, 111, 0.1);
  color: var(--teal);
}

/* --- VPM Guides Feature Card --- */
.feature-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  border: 2px solid var(--teal);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: center;
}

.feature-card__label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: var(--space-4);
}

.feature-card__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-4);
}

.feature-card__text {
  font-size: var(--text-base);
  color: var(--grey-text);
  line-height: 1.7;
  margin-bottom: var(--space-6);
}

.feature-card__visual {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.feature-card__step {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--grey-bg);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
}

.feature-card__step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.feature-card__step-text {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--charcoal);
}

@media (max-width: 768px) {
  .feature-card {
    grid-template-columns: 1fr;
    padding: var(--space-6);
  }
}

/* --- About Page --- */
.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}

.about-content p {
  font-size: var(--text-base);
  color: var(--grey-text);
  line-height: 1.8;
  margin-bottom: var(--space-5);
}

.about-content p strong {
  color: var(--charcoal);
}

.credentials {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.credential {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.credential__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--teal-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  flex-shrink: 0;
}

.credential__icon svg {
  width: 20px;
  height: 20px;
}

.credential__text {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--charcoal);
}

.credential__sub {
  font-size: var(--text-xs);
  color: var(--grey-text);
  margin-top: 2px;
}

@media (max-width: 768px) {
  .about-content {
    grid-template-columns: 1fr;
  }
  .credentials {
    grid-template-columns: 1fr;
  }
}

/* --- Utility Classes --- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* SR Only */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

/* --- Extras Grid Coming Soon --- */
.extras-item {
  position: relative;
}

.extras-item--coming .card {
  opacity: 0.7;
}

.extras-item__badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 2;
}

/* ========================================
   Audience Routing & Landing Pages
   ======================================== */

/* --- Audience Quick-Select Bar --- */
.audience-bar {
  background: var(--navy);
  padding: var(--space-2) 0;
  text-align: center;
  position: relative;
  z-index: 2;
}

.audience-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.audience-bar__label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.05em;
}

.audience-bar__link {
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  border: 1px solid rgba(255,255,255,0.12);
}

.audience-bar__link:hover,
.audience-bar__link--active {
  color: #fff;
  background: rgba(1, 105, 111, 0.5);
  border-color: var(--teal);
}

@media (max-width: 768px) {
  .audience-bar__label { display: none; }
  .audience-bar__inner { gap: var(--space-3); }
  .audience-bar__link { font-size: 11px; padding: var(--space-1) var(--space-3); }
}

/* --- Needs Assessment Section --- */
.needs-assessment {
  padding: clamp(var(--space-16), 8vw, var(--space-32)) 0;
  background: var(--grey-bg);
  position: relative;
  overflow: hidden;
}

.needs-assessment__header {
  text-align: center;
  margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
}

.needs-assessment__header .section__label {
  color: var(--teal);
}

.needs-assessment__step {
  display: none;
  animation: naFadeIn 0.5s var(--ease) forwards;
}

.needs-assessment__step.active {
  display: block;
}

@keyframes naFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Step indicator */
.na-steps-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-10);
}

.na-step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--grey-border);
  transition: all 0.3s ease;
}

.na-step-dot.active {
  background: var(--teal);
  width: 32px;
  border-radius: 5px;
}

.na-step-dot.completed {
  background: var(--teal);
}

.na-step-connector {
  width: 40px;
  height: 2px;
  background: var(--grey-border);
  transition: background 0.3s ease;
}

.na-step-connector.completed {
  background: var(--teal);
}

/* Audience Persona Cards */
.na-persona-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  max-width: 1080px;
  margin: 0 auto;
}

.na-persona-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  cursor: pointer;
  border: 2px solid var(--grey-border);
  transition: all 0.3s var(--ease);
  position: relative;
  overflow: hidden;
}

.na-persona-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(1,105,111,0.04), rgba(1,105,111,0));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.na-persona-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(1,105,111,0.3);
}

.na-persona-card:hover::before {
  opacity: 1;
}

.na-persona-card.selected {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(1,105,111,0.12), var(--shadow-md);
  transform: translateY(-4px);
}

.na-persona-card.selected::before {
  opacity: 1;
}

.na-persona-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--teal-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-5);
  color: var(--teal);
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.na-persona-card.selected .na-persona-icon {
  background: var(--teal);
  color: #fff;
}

.na-persona-icon svg {
  width: 32px;
  height: 32px;
}

.na-persona-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-2);
  position: relative;
  z-index: 1;
}

.na-persona-desc {
  font-size: var(--text-sm);
  color: var(--grey-text);
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .na-persona-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 500px;
  }
}

/* Pain Point Cards */
.na-pain-question {
  text-align: center;
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-8);
  letter-spacing: -0.02em;
}

.na-pain-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  max-width: 900px;
  margin: 0 auto;
}

.na-pain-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  border: 2px solid var(--grey-border);
  transition: all 0.25s var(--ease);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  text-align: left;
}

.na-pain-card:hover {
  border-color: rgba(1,105,111,0.3);
  box-shadow: var(--shadow-sm);
}

.na-pain-card.selected {
  border-color: var(--teal);
  background: rgba(1,105,111,0.03);
  box-shadow: 0 0 0 3px rgba(1,105,111,0.1);
}

.na-pain-check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--grey-border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  margin-top: 2px;
}

.na-pain-card.selected .na-pain-check {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

.na-pain-check svg {
  width: 14px;
  height: 14px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.na-pain-card.selected .na-pain-check svg {
  opacity: 1;
}

.na-pain-text {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .na-pain-grid {
    grid-template-columns: 1fr;
  }
}

/* CTA Button area */
.na-cta-wrap {
  text-align: center;
  margin-top: var(--space-10);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s var(--ease);
  pointer-events: none;
}

.na-cta-wrap.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.na-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--grey-text);
  margin-bottom: var(--space-6);
  cursor: pointer;
  transition: color 0.2s ease;
}

.na-back-link:hover {
  color: var(--teal);
}

/* ========================================
   Landing Page Styles
   ======================================== */

/* --- Landing Hero --- */
.landing-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.landing-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.landing-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.landing-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(27,42,74,0.85) 0%, rgba(1,105,111,0.6) 100%);
  z-index: 1;
}

.landing-hero__content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding-top: var(--space-24);
  padding-bottom: var(--space-16);
}

.landing-hero__badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--space-5);
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-sm);
}

.landing-hero__title {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-6);
  line-height: 1.1;
}

.landing-hero__subtitle {
  font-size: var(--text-lg);
  font-weight: 300;
  color: rgba(255,255,255,0.85);
  line-height: 1.7;
  max-width: 600px;
  margin-bottom: var(--space-8);
}

/* --- Pain Points Section --- */
.pain-section {
  padding: clamp(var(--space-16), 8vw, var(--space-32)) 0;
  background: var(--grey-bg);
}

.pain-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.pain-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  border-left: 4px solid var(--teal);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.pain-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.pain-card__icon {
  font-size: 1.5rem;
  margin-bottom: var(--space-3);
}

.pain-card__text {
  font-size: var(--text-base);
  color: var(--charcoal);
  line-height: 1.7;
  font-style: italic;
}

@media (max-width: 768px) {
  .pain-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Solution Section --- */
.solution-section {
  padding: clamp(var(--space-16), 8vw, var(--space-32)) 0;
}

.solution-intro {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--space-12);
}

.solution-intro__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-4);
}

.solution-intro__text {
  font-size: var(--text-lg);
  color: var(--grey-text);
  font-weight: 300;
  line-height: 1.7;
}

.solution-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.solution-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  border: 1px solid var(--grey-border);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.solution-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.solution-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--teal-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  color: var(--teal);
}

.solution-card__icon svg {
  width: 24px;
  height: 24px;
}

.solution-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-3);
}

.solution-card__text {
  font-size: var(--text-sm);
  color: var(--grey-text);
  line-height: 1.7;
}

@media (max-width: 768px) {
  .solution-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Payoff / Stats Section --- */
.payoff-section {
  padding: clamp(var(--space-16), 8vw, var(--space-24)) 0;
  background: var(--navy);
  color: #fff;
  text-align: center;
}

.payoff-section__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-4);
}

.payoff-section__text {
  font-size: var(--text-lg);
  font-weight: 300;
  color: rgba(255,255,255,0.75);
  max-width: 680px;
  margin: 0 auto var(--space-10);
  line-height: 1.7;
}

.payoff-stats {
  display: flex;
  justify-content: center;
  gap: clamp(var(--space-8), 6vw, var(--space-16));
  flex-wrap: wrap;
}

.payoff-stat__number {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
}

.payoff-stat__label {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  margin-top: var(--space-1);
}

/* --- Pricing Section --- */
.pricing-section {
  padding: clamp(var(--space-12), 6vw, var(--space-20)) 0;
  background: var(--grey-bg);
  text-align: center;
}

.pricing-section__price {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-2);
}

.pricing-section__note {
  font-size: var(--text-base);
  color: var(--grey-text);
  margin-bottom: var(--space-6);
}

/* --- Guides Teaser (Landing) --- */
.guides-teaser {
  padding: clamp(var(--space-10), 5vw, var(--space-16)) 0;
  text-align: center;
  border-top: 1px solid var(--grey-border);
}

.guides-teaser__text {
  font-size: var(--text-base);
  color: var(--grey-text);
  margin-bottom: var(--space-4);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Phase Timeline (Developer Page) --- */
.phase-timeline {
  position: relative;
  padding-left: var(--space-10);
}

.phase-timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--grey-border);
}

.phase-block {
  position: relative;
  margin-bottom: var(--space-12);
}

.phase-block:last-child {
  margin-bottom: 0;
}

.phase-block__dot {
  position: absolute;
  left: calc(-1 * var(--space-10) + 8px);
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--teal);
  border: 3px solid var(--grey-bg);
  z-index: 1;
}

.phase-block__label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: var(--space-2);
}

.phase-block__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-3);
}

.phase-block__desc {
  font-size: var(--text-base);
  color: var(--grey-text);
  line-height: 1.7;
  margin-bottom: var(--space-5);
  max-width: 600px;
}

.phase-block__deliverables {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2) var(--space-6);
}

.phase-block__item {
  font-size: var(--text-sm);
  color: var(--charcoal);
  padding-left: var(--space-5);
  position: relative;
}

.phase-block__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 2px;
  background: var(--teal);
}

@media (max-width: 768px) {
  .phase-block__deliverables {
    grid-template-columns: 1fr;
  }
}

/* --- Why Choose Us (Developer) --- */
.why-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.why-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  transition: all 0.3s var(--ease);
}

.why-card:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-2px);
}

.why-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: rgba(1,105,111,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.9);
  flex-shrink: 0;
}

.why-card__icon svg {
  width: 22px;
  height: 22px;
}

.why-card__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-1);
}

.why-card__text {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .why-cards {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   PRICING PAGE — Service Level Cards
   ======================================== */

/* Pricing Hero */
.pricing-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--teal) 100%);
  min-height: 40vh;
}

.pricing-hero .hero__title,
.pricing-hero .hero__subtitle {
  color: #fff;
}

/* Service Cards Grid */
.service-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}

.service-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--grey-border);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  position: relative;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.service-card__accent {
  height: 4px;
  width: 100%;
}

.service-card__body {
  padding: var(--space-8) var(--space-6);
}

.service-card__name {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-2);
}

.service-card__price {
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-1);
}

.service-card__price span {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--grey-text);
}

.service-card__hours {
  font-size: var(--text-sm);
  color: var(--teal);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.service-card__desc {
  font-size: var(--text-sm);
  color: var(--grey-text);
  line-height: 1.6;
  margin-bottom: var(--space-6);
  min-height: 3.2em;
}

.service-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-8);
}

.service-card__features li {
  font-size: var(--text-sm);
  color: var(--charcoal);
  padding: var(--space-2) 0;
  padding-left: var(--space-6);
  position: relative;
  border-bottom: 1px solid var(--grey-bg);
}

.service-card__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--teal);
  font-weight: 700;
}

/* Featured / Pro card */
.service-card--featured {
  border: 2px solid var(--teal);
  transform: scale(1.04);
  box-shadow: var(--shadow-lg);
  z-index: 2;
}

.service-card--featured:hover {
  transform: scale(1.04) translateY(-4px);
}

.service-card__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--teal);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  z-index: 3;
}

@media (max-width: 900px) {
  .service-cards {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin: 0 auto;
  }
  .service-card--featured {
    transform: none;
  }
  .service-card--featured:hover {
    transform: translateY(-4px);
  }
}

/* ========================================
   PRICING PAGE — Comparison Table
   ======================================== */
.comparison-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 auto;
  max-width: 960px;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  min-width: 600px;
}

.comparison-table thead th {
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  padding: var(--space-3) var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
}

.comparison-table thead th:first-child {
  background: var(--navy);
  text-align: left;
  border-radius: var(--radius-sm) 0 0 0;
}

.comparison-table thead th:last-child {
  border-radius: 0 var(--radius-sm) 0 0;
}

.comparison-table__th--lite { background: #2a79bd !important; }
.comparison-table__th--pro { background: #e30079 !important; }
.comparison-table__th--elite { background: #692a83 !important; }

.comparison-table tbody td {
  padding: var(--space-3) var(--space-4);
  text-align: center;
  border-bottom: 1px solid var(--grey-border);
  color: var(--charcoal);
}

.comparison-table tbody tr:nth-child(even) {
  background: rgba(0,0,0,0.02);
}

.comparison-table tbody tr:hover {
  background: var(--teal-light);
}

.comparison-table__label {
  text-align: left !important;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}

.comparison-table__note {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--grey-text);
  margin-top: var(--space-6);
  font-style: italic;
}

/* ========================================
   PRICING PAGE — Urgency Section
   ======================================== */
.urgency-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin: var(--space-8) auto var(--space-10);
  max-width: 800px;
}

.urgency-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  color: rgba(255,255,255,0.9);
  font-size: var(--text-sm);
  font-weight: 500;
}

.urgency-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: #e30079;
}

.urgency-highlight {
  text-align: center;
  font-size: var(--text-lg);
  font-weight: 600;
  color: #fff;
  max-width: 600px;
  margin: 0 auto;
  padding: var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.15);
}

/* ========================================
   PRICING PAGE — What Clients Want
   ======================================== */
.wants-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: 900px;
  margin: 0 auto;
}

.wants-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--grey-bg);
  border-radius: var(--radius-md);
}

.wants-item svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  stroke: var(--teal);
}

.wants-item span {
  font-size: var(--text-sm);
  color: var(--charcoal);
  line-height: 1.5;
  font-weight: 500;
}

@media (max-width: 768px) {
  .wants-grid {
    grid-template-columns: 1fr;
  }
}

/* Pricing Final CTA */
.pricing-final-cta {
  position: relative;
}

.pricing-final-cta .cta-banner__title {
  color: #fff;
}

.pricing-phone-link {
  color: rgba(255,255,255,0.7);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.pricing-phone-link:hover {
  color: #fff;
}

/* ========================================
   PRICING PREVIEW — Homepage Compact Cards
   ======================================== */
.pricing-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: 960px;
  margin: 0 auto;
}

.pricing-preview-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--grey-border);
  text-align: center;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.pricing-preview-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.pricing-preview-card--featured {
  border: 2px solid var(--teal);
  position: relative;
}

.pricing-preview-card__name {
  font-size: var(--text-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
}

.pricing-preview-card__price {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-1);
}

.pricing-preview-card__price span {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--grey-text);
}

.pricing-preview-card__hours {
  font-size: var(--text-xs);
  color: var(--teal);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.pricing-preview-card__desc {
  font-size: var(--text-xs);
  color: var(--grey-text);
  line-height: 1.5;
  margin-bottom: var(--space-5);
}

.pricing-preview__link {
  display: inline-block;
  margin-top: var(--space-8);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--teal);
}

.pricing-preview__link:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .pricing-preview {
    grid-template-columns: 1fr;
    max-width: 360px;
  }
}

/* ========================================
   PRICING TEASER — For-* landing pages
   ======================================== */
.pricing-teaser {
  text-align: center;
  padding: var(--space-12) 0;
  background: var(--grey-bg);
}

.pricing-teaser__text {
  font-size: var(--text-base);
  color: var(--grey-text);
  margin-bottom: var(--space-6);
}

.pricing-teaser__buttons {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* ========================================
   CALENDLY — Contact Page Embed
   ======================================== */
.calendly-section {
  background: var(--grey-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin-bottom: var(--space-10);
  text-align: center;
}

.calendly-section h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-2);
}

.calendly-section p {
  font-size: var(--text-sm);
  color: var(--grey-text);
  margin-bottom: var(--space-6);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.calendly-inline-widget {
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* ========================================
   STRIPE — VPM Guides Subscription Cards
   ======================================== */
.stripe-pricing {
  max-width: 900px;
  margin: 0 auto;
}

.stripe-pricing__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.stripe-pricing__toggle-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--grey-text);
  transition: color 0.2s;
}

.stripe-pricing__toggle-label--active {
  color: var(--charcoal);
  font-weight: 600;
}

/* Apple-style toggle switch */
.billing-toggle {
  position: relative;
  width: 52px;
  height: 28px;
  cursor: pointer;
}

.billing-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.billing-toggle__track {
  position: absolute;
  inset: 0;
  background: var(--grey-border);
  border-radius: 14px;
  transition: background 0.25s;
}

.billing-toggle input:checked + .billing-toggle__track {
  background: var(--teal);
}

.billing-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  transition: transform 0.25s var(--ease);
  pointer-events: none;
}

.billing-toggle input:checked ~ .billing-toggle__thumb {
  transform: translateX(24px);
}

/* Stripe tier cards */
.stripe-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.stripe-tier {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--grey-border);
  text-align: center;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.stripe-tier:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.stripe-tier__name {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-1);
}

.stripe-tier__sub {
  font-size: var(--text-xs);
  color: var(--grey-text);
  margin-bottom: var(--space-4);
}

.stripe-tier__price {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-1);
}

.stripe-tier__price span {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--grey-text);
}

.stripe-tier__savings {
  font-size: var(--text-xs);
  color: var(--teal);
  font-weight: 600;
  margin-bottom: var(--space-6);
  min-height: 1.2em;
}

.stripe-tier__badge {
  display: inline-block;
  background: var(--teal-light);
  color: var(--teal);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
}

.stripe-powered {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--grey-text);
  margin-top: var(--space-6);
}

@media (max-width: 768px) {
  .stripe-tiers {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin: 0 auto;
  }
}


/* ========================================
   T&Cs Modal — VPM Guides Checkout Flow
   ======================================== */

/* Overlay */
.tcs-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.tcs-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Modal Card */
.tcs-modal {
  background: var(--white);
  border-radius: 12px;
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.25s ease;
  overflow: hidden;
}

.tcs-modal-overlay.active .tcs-modal {
  transform: translateY(0) scale(1);
}

/* Modal Header */
.tcs-modal__header {
  padding: var(--space-6) var(--space-8) var(--space-4);
  border-bottom: 1px solid var(--grey-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.tcs-modal__logo {
  display: block;
}

.tcs-modal__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  text-align: center;
}

.tcs-modal__plan-badge {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--teal);
  background: var(--teal-light);
  padding: 3px 12px;
  border-radius: 20px;
  letter-spacing: 0.03em;
}

/* Scrollable T&Cs Body */
.tcs-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6) var(--space-8);
  -webkit-overflow-scrolling: touch;
}

.tcs-modal__body::-webkit-scrollbar {
  width: 6px;
}

.tcs-modal__body::-webkit-scrollbar-track {
  background: var(--grey-bg);
  border-radius: 3px;
}

.tcs-modal__body::-webkit-scrollbar-thumb {
  background: var(--grey-border);
  border-radius: 3px;
}

.tcs-modal__body::-webkit-scrollbar-thumb:hover {
  background: var(--grey-text);
}

/* T&Cs Content Styles */
.tcs-content {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--charcoal);
}

.tcs-content h2 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.tcs-content h2:first-child {
  margin-top: 0;
}

.tcs-content p {
  margin-bottom: var(--space-3);
  color: var(--charcoal);
}

.tcs-content ul {
  list-style: disc;
  padding-left: var(--space-5);
  margin-bottom: var(--space-3);
}

.tcs-content ul li {
  margin-bottom: var(--space-1);
}

.tcs-content .tcs-meta {
  font-size: 0.8rem;
  color: var(--grey-text);
  border-bottom: 1px solid var(--grey-border);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
}

.tcs-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-4);
  font-size: 0.82rem;
}

.tcs-content table th {
  background: var(--grey-bg);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-weight: 600;
  border: 1px solid var(--grey-border);
  color: var(--navy);
}

.tcs-content table td {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--grey-border);
  vertical-align: top;
}

/* Modal Footer */
.tcs-modal__footer {
  padding: var(--space-5) var(--space-8) var(--space-6);
  border-top: 1px solid var(--grey-border);
  flex-shrink: 0;
  background: var(--white);
}

/* Checkbox Row */
.tcs-modal__agree {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  cursor: pointer;
}

.tcs-modal__agree input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid var(--grey-border);
  border-radius: 4px;
  margin-top: 1px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.tcs-modal__agree input[type="checkbox"]:checked {
  background-color: var(--teal);
  border-color: var(--teal);
}

.tcs-modal__agree input[type="checkbox"]:checked::after {
  content: '';
  display: block;
  position: absolute;
  top: 2px;
  left: 5px;
  width: 6px;
  height: 10px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.tcs-modal__agree input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.tcs-modal__agree-label {
  font-size: 0.875rem;
  color: var(--charcoal);
  line-height: 1.5;
}

.tcs-modal__agree-label a {
  color: var(--teal);
  text-decoration: underline;
}

/* Proceed Button */
.tcs-modal__proceed {
  display: block;
  width: 100%;
  padding: 14px var(--space-6);
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
  text-align: center;
  letter-spacing: 0.01em;
}

.tcs-modal__proceed:hover:not(:disabled) {
  background: var(--teal-hover);
}

.tcs-modal__proceed:disabled {
  background: var(--grey-border);
  color: var(--grey-text);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Cancel Link */
.tcs-modal__cancel {
  display: block;
  text-align: center;
  margin-top: var(--space-3);
  font-size: 0.875rem;
  color: var(--grey-text);
  cursor: pointer;
  transition: color 0.15s ease;
}

.tcs-modal__cancel:hover {
  color: var(--charcoal);
}

/* Mobile */
@media (max-width: 640px) {
  .tcs-modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .tcs-modal {
    border-radius: 16px 16px 0 0;
    max-height: 92vh;
  }

  .tcs-modal__header,
  .tcs-modal__body,
  .tcs-modal__footer {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
}


/* =====================================================
   DASHBOARD — "Mission Control for Construction"
   Scoped with body.dashboard
   ===================================================== */

/* --- Dashboard Design Tokens --- */
body.dashboard {
  --db-bg: #141f38;
  --db-surface: #1B2A4A;
  --db-surface-elevated: #223460;
  --db-border: rgba(1, 105, 111, 0.2);
  --db-border-subtle: rgba(1, 105, 111, 0.1);
  --db-accent: #01696F;
  --db-accent-glow: rgba(1, 105, 111, 0.4);
  --db-accent-bright: #0ea5ad;
  --db-text: #E6EDF3;
  --db-text-muted: #7D8590;
  --db-success: #3FB950;
  --db-warning: #D29922;
  --db-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  background: var(--db-bg);
  color: var(--db-text);
  overflow-x: hidden;
}

body.dashboard ::selection {
  background: rgba(1, 105, 111, 0.35);
  color: var(--db-text);
}

.db-mono {
  font-family: var(--db-mono);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* --- Dashboard Header --- */
.db-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #101a30;
  border-bottom: 1px solid var(--db-border-subtle);
}

.db-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0.7rem 1.5rem;
  gap: 1.5rem;
}

.db-header__logo svg {
  height: 36px;
  width: auto;
  display: block;
}

.db-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.db-nav__link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--db-text-muted);
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}

.db-nav__link:hover {
  color: var(--db-text);
  background: rgba(255,255,255,0.04);
}

.db-nav__link--active {
  color: var(--db-text);
  background: rgba(1, 105, 111, 0.15);
}

.db-nav__link--logout {
  color: var(--db-text-muted);
  background: rgba(255,255,255,0.05);
  margin-left: 0.5rem;
}

.db-nav__link--logout:hover {
  background: rgba(255,255,255,0.1);
  color: var(--db-text);
}

.db-header__user {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-left: auto;
}

.db-header__user-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--db-text-muted);
  white-space: nowrap;
}

.db-header__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--db-accent), #0ea5ad);
  color: var(--db-text);
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.db-header__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  cursor: pointer;
  background: none;
  border: none;
  z-index: 110;
}

.db-header__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--db-text-muted);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.db-header__toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.db-header__toggle.active span:nth-child(2) {
  opacity: 0;
}
.db-header__toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Animated rainbow line */
.db-rainbow-line {
  height: 2px;
  background: linear-gradient(
    90deg,
    #58a85f, #7dbd38, #ddbd40, #d45d37, #e30079, #692a83, #1f297b, #2a79bd, #58a85f
  );
  background-size: 200% 100%;
  animation: dbRainbowShift 6s linear infinite;
}

@keyframes dbRainbowShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Mobile overlay */
.db-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 95;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.db-mobile-overlay.active {
  opacity: 1;
}

/* --- Dashboard Layout --- */
.db-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  max-width: 1440px;
  margin: 0 auto;
  min-height: calc(100dvh - 56px);
  gap: 0;
}

.db-main {
  padding: 2rem 2rem 3rem;
  overflow: hidden;
}

.db-sidebar {
  border-left: 1px solid var(--db-border-subtle);
  padding: 2rem 1.25rem 2rem 1.5rem;
  position: sticky;
  top: 56px;
  height: calc(100dvh - 56px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}

.db-sidebar::-webkit-scrollbar {
  width: 4px;
}

.db-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
}

.db-sidebar__toggle {
  display: none;
}

/* --- Boot-up Animation --- */
.db-anim {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.db-anim.db-anim--visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Welcome Section --- */
.db-welcome {
  margin-bottom: 2rem;
}

.db-welcome__greeting {
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--db-text);
  line-height: 1.15;
}

.db-welcome__name {
  background: linear-gradient(135deg, var(--db-accent-bright), #58a85f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.db-welcome__date {
  font-family: var(--db-mono);
  font-size: 0.8rem;
  color: var(--db-text-muted);
  margin-top: 0.4rem;
  letter-spacing: 0.01em;
}

.db-welcome__tagline {
  font-size: 0.95rem;
  color: var(--db-text-muted);
  margin-top: 0.35rem;
  min-height: 1.4em;
}

/* --- Stat Cards --- */
.db-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.db-stat-card {
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: 12px;
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s ease;
}

.db-stat-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(1, 105, 111, 0.15), transparent 60%);
  z-index: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.db-stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(1, 105, 111, 0.35);
  box-shadow: 0 4px 24px rgba(1, 105, 111, 0.12);
}

.db-stat-card:hover::before {
  opacity: 1;
}

.db-stat-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
  position: relative;
  z-index: 1;
}

.db-stat-card__icon {
  width: 28px;
  height: 28px;
  color: var(--db-accent-bright);
}

.db-stat-card__icon svg {
  width: 100%;
  height: 100%;
}

.db-stat-card__sparkline {
  width: 60px;
  height: 24px;
}

.db-stat-card__sparkline svg {
  width: 100%;
  height: 100%;
}

.db-stat-card__value {
  font-family: var(--db-mono);
  font-size: 2rem;
  font-weight: 700;
  color: var(--db-text);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 0.35rem;
  position: relative;
  z-index: 1;
}

.db-stat-card__label {
  font-size: 0.8rem;
  color: var(--db-text-muted);
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.db-stat-card__sub {
  font-size: 0.75rem;
  opacity: 0.7;
}

/* Progress ring stat card */
.db-stat-card--progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.db-stat-card--progress .db-stat-card__header {
  width: 100%;
}

.db-stat-card__ring-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  margin-bottom: 0.5rem;
  z-index: 1;
}

.db-progress-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.db-progress-ring__bg {
  fill: none;
  stroke: rgba(255,255,255,0.06);
  stroke-width: 5;
}

.db-progress-ring__fill {
  fill: none;
  stroke: var(--db-accent-bright);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 213.63;
  stroke-dashoffset: 213.63;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 0 6px rgba(1, 105, 111, 0.5));
}

.db-progress-ring__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--db-mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--db-text);
}

/* --- Blueprint Cards --- */
.db-blueprints {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.db-blueprint-card {
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: 14px;
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.db-blueprint-card--active {
  animation: dbCardGlow 4s ease-in-out infinite;
}

@keyframes dbCardGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(1, 105, 111, 0); border-color: var(--db-border); }
  50% { box-shadow: 0 0 20px rgba(1, 105, 111, 0.08); border-color: rgba(1, 105, 111, 0.3); }
}

.db-blueprint-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--db-accent-bright), var(--db-accent));
  border-radius: 3px 0 0 3px;
  opacity: 0.8;
}

.db-blueprint-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(1, 105, 111, 0.12);
}

.db-blueprint-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.db-blueprint-card__title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--db-text);
  letter-spacing: -0.02em;
  margin-bottom: 0.3rem;
}

.db-blueprint-card__desc {
  font-size: 0.85rem;
  color: var(--db-text-muted);
  line-height: 1.5;
}

/* Status badges */
.db-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

.db-status--progress {
  background: rgba(1, 105, 111, 0.15);
  color: var(--db-accent-bright);
}

.db-status--started {
  background: rgba(210, 153, 34, 0.15);
  color: var(--db-warning);
}

.db-status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.db-status--progress .db-status__dot {
  background: var(--db-accent-bright);
  animation: dbPulse 2s ease-in-out infinite;
}

.db-status--started .db-status__dot {
  background: var(--db-warning);
  animation: dbPulse 2s ease-in-out infinite;
}

.db-status--not-started {
  color: var(--text-muted, #888);
}

.db-status--not-started .db-status__dot {
  background: var(--text-muted, #888);
}

@keyframes dbPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

/* --- Phase Pipeline --- */
.db-pipeline {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 1.5rem;
  padding: 1.25rem 0;
  overflow-x: auto;
}

.db-pipeline__phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex-shrink: 0;
  min-width: 90px;
}

.db-pipeline__node {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.6rem;
  position: relative;
  transition: all 0.3s ease;
}

/* Complete phase */
.db-pipeline__phase--complete .db-pipeline__node {
  background: rgba(63, 185, 80, 0.15);
  border: 2px solid var(--db-success);
  color: var(--db-success);
  box-shadow: 0 0 12px rgba(63, 185, 80, 0.25);
}

.db-pipeline__phase--complete .db-pipeline__node svg {
  width: 16px;
  height: 16px;
}

/* Current phase */
.db-pipeline__phase--current .db-pipeline__node {
  background: rgba(1, 105, 111, 0.15);
  border: 2px solid var(--db-accent-bright);
  box-shadow: 0 0 16px rgba(1, 105, 111, 0.35);
  animation: dbNodePulse 2.5s ease-in-out infinite;
}

.db-pipeline__node-inner {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--db-accent-bright);
  animation: dbPulse 2s ease-in-out infinite;
}

@keyframes dbNodePulse {
  0%, 100% { box-shadow: 0 0 12px rgba(1, 105, 111, 0.25); }
  50% { box-shadow: 0 0 24px rgba(1, 105, 111, 0.5); }
}

/* Locked phase */
.db-pipeline__phase--locked .db-pipeline__node {
  background: rgba(255,255,255,0.03);
  border: 2px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.2);
}

.db-pipeline__phase--locked .db-pipeline__node svg {
  width: 14px;
  height: 14px;
}

.db-pipeline__label {
  max-width: 110px;
}

.db-pipeline__phase-num {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--db-text-muted);
  margin-bottom: 0.15rem;
}

.db-pipeline__phase-name {
  display: block;
  font-size: 0.72rem;
  color: var(--db-text);
  line-height: 1.3;
  font-weight: 500;
}

.db-pipeline__phase--locked .db-pipeline__phase-name {
  color: var(--db-text-muted);
  opacity: 0.5;
}

.db-pipeline__phase--locked .db-pipeline__phase-num {
  opacity: 0.5;
}

/* Connector line */
.db-pipeline__connector {
  flex: 1;
  height: 2px;
  background: rgba(255,255,255,0.06);
  margin-top: 17px;
  min-width: 24px;
  position: relative;
}

.db-pipeline__connector--complete {
  background: linear-gradient(90deg, var(--db-success), var(--db-accent-bright));
  box-shadow: 0 0 8px rgba(63, 185, 80, 0.3);
}

/* --- Progress Bar (in blueprint cards) --- */
.db-blueprint-card__progress {
  margin-bottom: 1.25rem;
}

.db-blueprint-card__progress-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.db-blueprint-card__progress-text {
  font-size: 0.82rem;
  color: var(--db-text-muted);
}

.db-blueprint-card__progress-pct {
  font-size: 0.82rem;
  color: var(--db-accent-bright);
}

.db-progress-bar {
  height: 5px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
}

.db-progress-bar__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--db-accent), var(--db-accent-bright));
  border-radius: 3px;
  transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 8px rgba(1, 105, 111, 0.4);
}

.db-progress-bar__fill.db-animated {
  width: var(--target-width);
}

/* --- Blueprint Card Activity Feed --- */
.db-blueprint-card__activity {
  margin-bottom: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--db-border-subtle);
}

.db-blueprint-card__activity-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--db-text-muted);
  margin-bottom: 0.75rem;
}

.db-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.45rem 0;
}

.db-activity-item__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-top: 0.35rem;
  flex-shrink: 0;
}

.db-activity-item__dot--complete {
  background: var(--db-success);
  box-shadow: 0 0 6px rgba(63, 185, 80, 0.4);
}

.db-activity-item__dot--view {
  background: var(--db-accent-bright);
  box-shadow: 0 0 6px rgba(1, 105, 111, 0.4);
}

.db-activity-item__content {
  flex: 1;
  min-width: 0;
}

.db-activity-item__text {
  display: block;
  font-size: 0.82rem;
  color: var(--db-text);
  line-height: 1.4;
}

.db-activity-item__time {
  font-size: 0.72rem;
  font-family: var(--db-mono);
  color: var(--db-text-muted);
  margin-top: 0.1rem;
  display: block;
}

/* --- Blueprint Card Footer --- */
.db-blueprint-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--db-border-subtle);
}

.db-blueprint-card__quick-stats {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.db-quick-stat {
  font-size: 0.78rem;
  color: var(--db-text-muted);
}

.db-quick-stat strong {
  color: var(--db-text);
}

.db-quick-stat__sep {
  color: rgba(255,255,255,0.1);
  font-size: 0.78rem;
}

/* Dashboard CTA button */
.db-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.25s var(--ease);
  white-space: nowrap;
  text-decoration: none;
}

.db-btn--primary {
  background: var(--db-accent);
  color: var(--db-text);
  box-shadow: 0 0 16px rgba(1, 105, 111, 0.2);
}

.db-btn--primary:hover {
  background: var(--db-accent-bright);
  box-shadow: 0 0 24px rgba(1, 105, 111, 0.35);
  transform: translateY(-1px);
}

.db-btn__arrow {
  transition: transform 0.25s var(--ease);
  display: inline-block;
}

.db-btn:hover .db-btn__arrow {
  transform: translateX(4px);
}

/* --- Section Title --- */
.db-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--db-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}

/* --- Coming Soon / Locked Cards --- */
.db-coming-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.85rem;
  margin-bottom: 2rem;
}

.db-locked-card {
  background: rgba(22, 27, 34, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 1.25rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s var(--ease), border-color 0.3s ease;
}

.db-locked-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.08);
}

.db-locked-card__icon {
  width: 28px;
  height: 28px;
  margin: 0 auto 0.75rem;
  color: rgba(255,255,255,0.15);
}

.db-locked-card__icon svg {
  width: 100%;
  height: 100%;
}

.db-locked-card__title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--db-text-muted);
  margin-bottom: 0.35rem;
  line-height: 1.3;
}

.db-locked-card__date {
  font-family: var(--db-mono);
  font-size: 0.7rem;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.02em;
}

/* --- Sidebar --- */
.db-sidebar__section {
  margin-bottom: 2rem;
}

.db-sidebar__section:last-child {
  margin-bottom: 0;
}

.db-sidebar__title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--db-text-muted);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--db-border-subtle);
}

/* Timeline */
.db-timeline {
  position: relative;
}

.db-timeline__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-bottom: 1rem;
  position: relative;
}

.db-timeline__item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 16px;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,0.06);
}

.db-timeline__item:last-child {
  padding-bottom: 0;
}

.db-timeline__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
}

.db-timeline__dot--complete {
  background: var(--db-success);
  box-shadow: 0 0 6px rgba(63, 185, 80, 0.3);
}

.db-timeline__dot--view {
  background: var(--db-accent-bright);
  box-shadow: 0 0 6px rgba(1, 105, 111, 0.3);
}

.db-timeline__dot--milestone {
  background: var(--db-warning);
  box-shadow: 0 0 6px rgba(210, 153, 34, 0.3);
}

.db-timeline__content {
  flex: 1;
  min-width: 0;
}

.db-timeline__text {
  display: block;
  font-size: 0.78rem;
  color: var(--db-text);
  line-height: 1.4;
}

.db-timeline__time {
  font-family: var(--db-mono);
  font-size: 0.68rem;
  color: var(--db-text-muted);
  margin-top: 0.15rem;
  display: block;
}

/* Subscription Card */
.db-sub-card {
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: 10px;
  padding: 1rem;
}

.db-sub-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0;
}

.db-sub-card__row:not(:last-child) {
  border-bottom: 1px solid var(--db-border-subtle);
}

.db-sub-card__label {
  font-size: 0.78rem;
  color: var(--db-text-muted);
}

.db-sub-card__value {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--db-text);
}

.db-sub-card__value--active {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--db-success);
}

.db-sub-card__active-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--db-success);
  box-shadow: 0 0 6px rgba(63, 185, 80, 0.5);
}

/* Quick Links */
.db-quick-links {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.db-quick-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.6rem;
  font-size: 0.8rem;
  color: var(--db-text-muted);
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
}

.db-quick-link:hover {
  color: var(--db-text);
  background: rgba(255,255,255,0.04);
}

.db-quick-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.5;
}

/* --- Dashboard Footer --- */
.db-footer {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--db-border-subtle);
  text-align: center;
  background: var(--db-bg);
}

.db-footer p {
  font-size: 0.78rem;
  color: var(--db-text-muted);
}

.db-footer a {
  color: var(--db-accent-bright);
  transition: color 0.2s ease;
}

.db-footer a:hover {
  color: var(--db-text);
}

/* ======================
   DASHBOARD RESPONSIVE
   ====================== */

@media (max-width: 1200px) {
  .db-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  .db-header__inner {
    padding: 0.6rem 1rem;
  }

  .db-nav {
    position: fixed;
    top: 0;
    right: -300px;
    width: 280px;
    height: 100dvh;
    background: #101a30;
    flex-direction: column;
    align-items: flex-start;
    padding: 4.5rem 1.5rem 2rem;
    gap: 0.25rem;
    transition: right 0.3s var(--ease);
    box-shadow: -8px 0 32px rgba(0,0,0,0.4);
    z-index: 99;
    border-left: 1px solid var(--db-border-subtle);
  }

  .db-nav.active {
    right: 0;
  }

  .db-nav__link {
    width: 100%;
    padding: 0.6rem 0.85rem;
    font-size: 0.95rem;
  }

  .db-mobile-overlay {
    display: block;
  }

  .db-header__toggle {
    display: flex;
  }

  .db-header__user {
    margin-right: 0.5rem;
  }

  .db-header__user-name {
    display: none;
  }

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

  .db-sidebar {
    border-left: none;
    border-top: 1px solid var(--db-border-subtle);
    position: static;
    height: auto;
    padding: 2rem 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2rem;
  }

  .db-sidebar__section {
    margin-bottom: 0;
  }

  .db-sidebar__section:first-child {
    grid-column: 1 / -1;
  }

  .db-sidebar__toggle {
    display: none;
  }
}

@media (max-width: 768px) {
  .db-main {
    padding: 1.25rem 1rem 2rem;
  }

  .db-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .db-stat-card {
    padding: 1rem;
  }

  .db-stat-card__value {
    font-size: 1.6rem;
  }

  .db-blueprint-card {
    padding: 1.25rem;
  }

  .db-blueprint-card__top {
    flex-direction: column;
    gap: 0.5rem;
  }

  .db-blueprint-card__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .db-pipeline {
    gap: 0;
    padding: 1rem 0;
  }

  .db-pipeline__phase {
    min-width: 70px;
  }

  .db-pipeline__node {
    width: 30px;
    height: 30px;
  }

  .db-pipeline__phase-name {
    font-size: 0.65rem;
  }

  .db-pipeline__label {
    max-width: 80px;
  }

  .db-coming-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .db-sidebar {
    grid-template-columns: 1fr;
    padding: 1.5rem 1rem;
  }

  .db-sidebar__section:first-child {
    grid-column: 1;
  }
}


/* ========================================
   Multi-Project Feature — Scoped Styles
   ======================================== */

/* --- Plan Toggle (Guides Page) --- */
.mp-plan-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(1, 105, 111, 0.08);
  border-radius: 20px;
  padding: 3px;
  margin-bottom: var(--space-4);
}

.mp-plan-toggle__btn {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 17px;
  transition: all 0.2s ease;
  color: var(--grey-text);
  background: transparent;
  cursor: pointer;
  border: none;
}

.mp-plan-toggle__btn--active {
  background: var(--teal);
  color: var(--db-text);
  box-shadow: 0 2px 8px rgba(1, 105, 111, 0.25);
}

/* --- Upgrade Nudge (Standard Plan) --- */
.mp-upgrade-nudge {
  font-size: 0.78rem;
  color: var(--grey-text);
  margin-top: var(--space-3);
}

.mp-upgrade-nudge a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mp-upgrade-nudge a:hover {
  color: var(--teal-hover);
}

/* --- My Projects Section (Guides Page) --- */
.mp-projects {
  margin-top: var(--space-5);
  display: none;
}

.mp-projects.active {
  display: block;
}

.mp-projects__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.mp-projects__title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--charcoal);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.mp-projects__count {
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--teal-light);
  color: var(--teal);
  padding: 2px 8px;
  border-radius: 10px;
}

/* + New Project Button */
.mp-new-project-btn {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--teal);
  background: transparent;
  border: 2px dashed rgba(1, 105, 111, 0.3);
  border-radius: var(--radius-md);
  padding: 5px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mp-new-project-btn:hover {
  border-color: var(--teal);
  background: rgba(1, 105, 111, 0.04);
}

.mp-new-project-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* New Project Form */
.mp-new-form {
  display: none;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  background: var(--grey-bg);
  border-radius: var(--radius-md);
  border: 1px dashed var(--grey-border);
}

.mp-new-form.active {
  display: flex;
}

.mp-new-form input {
  flex: 1;
  font-size: 0.85rem;
  padding: 6px 12px;
  border: 1px solid var(--grey-border);
  border-radius: var(--radius-sm);
  background: #fff;
  outline: none;
  transition: border-color 0.2s;
}

.mp-new-form input:focus {
  border-color: var(--teal);
}

.mp-new-form__create {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--db-text);
  background: var(--teal);
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

.mp-new-form__create:hover {
  background: var(--teal-hover);
}

.mp-new-form__cancel {
  font-size: 0.8rem;
  color: var(--grey-text);
  cursor: pointer;
  padding: 6px 8px;
  border: none;
  background: none;
}

/* Project List */
.mp-project-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Individual Project Card */
.mp-project-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: #fff;
  border: 1px solid var(--grey-border);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
  position: relative;
}

.mp-project-item:hover {
  border-color: rgba(1, 105, 111, 0.3);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

/* Status dot */
.mp-project-item__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mp-project-item__dot--active {
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(1, 105, 111, 0.15);
}

.mp-project-item__dot--stale {
  background: var(--grey-border);
}

/* Project info */
.mp-project-item__info {
  flex: 1;
  min-width: 0;
}

.mp-project-item__name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-project-item__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.72rem;
  color: var(--grey-text);
}

/* Inline progress bar */
.mp-project-item__progress-wrap {
  width: 80px;
  flex-shrink: 0;
}

.mp-project-item__progress-bar {
  height: 4px;
  background: var(--grey-bg);
  border-radius: 2px;
  overflow: hidden;
}

.mp-project-item__progress-fill {
  height: 100%;
  background: var(--teal);
  border-radius: 2px;
  transition: width 0.4s ease;
}

.mp-project-item__pct {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--charcoal);
  min-width: 32px;
  text-align: right;
  flex-shrink: 0;
}

/* Continue link */
.mp-project-item__continue {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--teal);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.2s;
}

.mp-project-item__continue:hover {
  color: var(--teal-hover);
}

/* Archive link */
.mp-project-item__archive {
  font-size: 0.68rem;
  color: var(--grey-text);
  opacity: 0;
  transition: opacity 0.2s;
  cursor: pointer;
  flex-shrink: 0;
}

.mp-project-item:hover .mp-project-item__archive {
  opacity: 1;
}

/* --- Dashboard Multi-Project View --- */
.db-mp-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.db-mp-header__count {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.db-mp-header__badge {
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(14, 165, 173, 0.15);
  color: #0ea5ad;
  padding: 2px 10px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.db-mp-project-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.db-mp-project {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.db-mp-project:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(14, 165, 173, 0.2);
}

.db-mp-project__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.db-mp-project__dot--active {
  background: #0ea5ad;
  box-shadow: 0 0 0 3px rgba(14, 165, 173, 0.2);
}

.db-mp-project__dot--stale {
  background: rgba(255, 255, 255, 0.15);
}

.db-mp-project__info {
  flex: 1;
  min-width: 0;
}

.db-mp-project__name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--db-text);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.db-mp-project__meta {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
}

.db-mp-project__progress-wrap {
  width: 80px;
  flex-shrink: 0;
}

.db-mp-project__progress-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.db-mp-project__progress-fill {
  height: 100%;
  background: #0ea5ad;
  border-radius: 2px;
  transition: width 0.5s ease;
}

.db-mp-project__pct {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  min-width: 32px;
  text-align: right;
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
}

.db-mp-project__continue {
  font-size: 0.78rem;
  font-weight: 600;
  color: #0ea5ad;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.2s;
}

.db-mp-project__continue:hover {
  color: #12c9d2;
}

.db-mp-aggregate {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  padding: var(--space-2) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: var(--space-3);
}

.db-mp-aggregate strong {
  color: rgba(255, 255, 255, 0.7);
  font-family: 'JetBrains Mono', monospace;
}

/* --- Extras Page: Single/Multi Toggle --- */
.mp-pricing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.mp-pricing-toggle__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--grey-text);
  transition: color 0.2s;
  cursor: pointer;
}

.mp-pricing-toggle__label--active {
  color: var(--charcoal);
  font-weight: 600;
}

/* Pill switch */
.mp-pricing-switch {
  position: relative;
  width: 52px;
  height: 28px;
  cursor: pointer;
}

.mp-pricing-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.mp-pricing-switch__track {
  position: absolute;
  inset: 0;
  background: var(--grey-border);
  border-radius: 14px;
  transition: background 0.25s;
}

.mp-pricing-switch input:checked + .mp-pricing-switch__track {
  background: var(--teal);
}

.mp-pricing-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  transition: transform 0.25s var(--ease);
  pointer-events: none;
}

.mp-pricing-switch input:checked ~ .mp-pricing-switch__thumb {
  transform: translateX(24px);
}

/* Multi Project tier card highlight */
.stripe-tier__mp-highlight {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--teal);
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: rgba(1, 105, 111, 0.06);
  border-radius: var(--radius-sm);
  line-height: 1.4;
}

/* 5 project slots visual */
.mp-slots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-3);
}

.mp-slot {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: rgba(1, 105, 111, 0.12);
  border: 1.5px solid rgba(1, 105, 111, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-slot svg {
  width: 10px;
  height: 10px;
  display: block;
}

/* Pricing page multi-project note */
.mp-pricing-note {
  margin-top: var(--space-8);
  padding: var(--space-5) var(--space-6);
  background: rgba(1, 105, 111, 0.05);
  border: 1px solid rgba(1, 105, 111, 0.15);
  border-radius: var(--radius-md);
  text-align: center;
}

.mp-pricing-note p {
  font-size: 0.92rem;
  color: var(--charcoal);
  line-height: 1.6;
}

.mp-pricing-note a {
  color: var(--teal);
  font-weight: 600;
}

/* Responsive adjustments for multi-project */
@media (max-width: 768px) {
  .mp-project-item {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .mp-project-item__progress-wrap {
    width: 60px;
  }

  .mp-project-item__archive {
    opacity: 1;
  }

  .db-mp-project {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .db-mp-project__progress-wrap {
    width: 60px;
  }
}


/* ========================================
   APPLE DESIGN OVERHAUL — CSS Variables & Dark/Light Mode
   ======================================== */

/* --- Light Mode (Default) --- */
:root {
  --bg-primary: #FFFFFF;
  --bg-secondary: #f5f5f7;
  --text-primary: #1d1d1f;
  --text-secondary: #86868b;
  --surface: #FFFFFF;
  --surface-elevated: #FFFFFF;
  --border-color: rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.12);
  --card-bg: #FFFFFF;
  --card-border: rgba(0,0,0,0.06);
  --card-shadow: 0 2px 12px rgba(0,0,0,0.04);
  --nav-bg: rgba(255,255,255,0.92);
  --nav-text: #1d1d1f;
  --hero-bg: linear-gradient(135deg, #1B2A4A 0%, #01696F 100%);
  --footer-bg: #1d1d1f;
  --section-divider: rgba(0,0,0,0.06);
  --input-bg: #FFFFFF;
  --input-border: rgba(0,0,0,0.12);
  --code-bg: #f5f5f7;
  --overlay-bg: rgba(0,0,0,0.5);
  --toggle-track: #e0e0e0;
  --selection-bg: rgba(1, 105, 111, 0.15);
  --selection-color: #1d1d1f;
}

/* --- Dark Mode --- */
html.dark {
  /* db-text/db-text-muted are normally only defined by body.dashboard, which
     marketing pages never carry. Without a fallback here, --text-primary and
     --nav-text below resolve to nothing on every public page, leaving body
     text black-on-near-black the instant dark mode is toggled. Defining them
     here (body.dashboard still overrides with the identical values) fixes
     contrast site-wide instead of only on dashboard-scoped pages.
     --db-text-muted is lightened from the dashboard's own #7D8590 — that
     shade only clears ~3.3-4.4:1 against the navy card backgrounds several
     marketing pages (value.html, guides.html) use, failing the 4.5:1 body
     text minimum. #A6AEB9 clears 4.5:1+ against every navy shade in use.
     --db-surface/--db-border/--db-accent* are also dashboard-only and were
     missing here entirely — any marketing-page card using them (e.g.
     value.html's .bucket/.bonus-card) had no background or border at all in
     dark mode, just bare text floating on the section colour. */
  --db-text: #E6EDF3;
  --db-text-muted: #A6AEB9;
  --db-surface: #223460;
  --db-surface-elevated: #2c3f6e;
  --db-border: rgba(255,255,255,0.12);
  --db-border-subtle: rgba(255,255,255,0.06);
  --db-accent: #01696F;
  --db-accent-bright: #3FC5C5;
  --db-success: #3FB950;
  --db-warning: #D29922;
  --bg-primary: #141f38;
  --bg-secondary: #1B2A4A;
  --text-primary: var(--db-text);
  --text-secondary: #7D8590;
  --surface: #1B2A4A;
  --surface-elevated: #223460;
  --border-color: rgba(255,255,255,0.1);
  --border-strong: rgba(255,255,255,0.15);
  --card-bg: #1B2A4A;
  --card-border: rgba(255,255,255,0.08);
  --card-shadow: 0 2px 12px rgba(0,0,0,0.3);
  --nav-bg: rgba(20,31,56,0.92);
  --nav-text: var(--db-text);
  --hero-bg: linear-gradient(135deg, #1B2A4A 0%, #01696F 100%);
  --footer-bg: #101a30;
  --section-divider: rgba(255,255,255,0.06);
  --input-bg: #1B2A4A;
  --input-border: rgba(255,255,255,0.15);
  --code-bg: #223460;
  --overlay-bg: rgba(0,0,0,0.7);
  --toggle-track: #2a3550;
  --selection-bg: rgba(1, 105, 111, 0.35);
  --selection-color: var(--db-text);
}

/* --- Apple Base Overrides --- */
body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

::selection {
  background: var(--selection-bg) !important;
  color: var(--selection-color) !important;
}

/* --- Apple Typography Overrides --- */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  line-height: 1.1;
}

.hero__title,
.landing-hero__title {
  font-size: clamp(3rem, 2rem + 5vw, 5.5rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.06 !important;
}

.section__title,
.solution-intro__title,
.payoff-section__title,
.cta-banner__title {
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.08 !important;
}

.section__title,
.solution-intro__title,
.payoff-section__title {
  color: var(--text-primary) !important;
}

.section--dark .section__title,
.payoff-section__title {
  color: var(--db-text);
}

/* .cta-banner is always a dark photo-overlay band, in both themes — it must
   never inherit the light/dark section-title colour switching above. Its own
   base rule (color: #fff) is correct as-is; this just stops it being pulled
   into the shared selector groups. */
.cta-banner__title {
  color: #fff !important;
}

.hero__subtitle,
.landing-hero__subtitle,
.section__subtitle,
.solution-intro__text,
.hero__subtitle--dark {
  font-weight: 400 !important;
  color: var(--text-secondary) !important;
  font-size: clamp(1.125rem, 0.9rem + 0.75vw, 1.375rem) !important;
  line-height: 1.55 !important;
}

.hero__subtitle,
.landing-hero__subtitle {
  color: rgba(255,255,255,0.8) !important;
}

.hero__subtitle--dark {
  color: var(--text-secondary) !important;
}

p, li, .card__text, .guide-card__desc, .phase__desc {
  color: var(--text-secondary);
  font-weight: 400;
  line-height: 1.6;
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
}

/* --- Apple Spacing Overrides --- */
.section {
  padding: clamp(5rem, 8vw, 7.5rem) 0 !important;
}

.section__header {
  margin-bottom: clamp(3rem, 5vw, 5rem) !important;
}

.container {
  max-width: 1200px !important;
}

.container--narrow {
  max-width: 980px !important;
}

/* --- Apple Hero Overrides --- */
.hero {
  min-height: 90vh !important;
}

.hero--short {
  min-height: 55vh !important;
}

.hero__content {
  max-width: 900px !important;
  padding-top: 6rem !important;
}

/* --- Apple Card Overrides --- */
.card, .solution-card, .pain-card, .guide-card, .pricing-card, .pricing-preview-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s cubic-bezier(0.16,1,0.3,1) !important;
}

.card:hover, .solution-card:hover, .pain-card:hover, .guide-card:hover, .pricing-card:hover, .pricing-preview-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--card-shadow) !important;
}

.card--flat, .card--flat:hover {
  box-shadow: none !important;
  border: 1px solid var(--card-border) !important;
}

.card__title, .card--dark .card__title {
  color: var(--text-primary) !important;
}

.card--dark {
  background: var(--surface) !important;
  border: 1px solid var(--border-color) !important;
}

.card--dark:hover {
  background: var(--surface-elevated) !important;
}

/* --- Apple Grid Overrides --- */
.grid {
  gap: 2rem !important;
}

.pricing-grid, .service-cards, .stripe-tiers {
  gap: 2rem !important;
}

/* --- Apple Nav Overrides --- */
.header--scrolled {
  background: var(--nav-bg) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid var(--border-color) !important;
  box-shadow: none !important;
}

.header--scrolled .nav__link {
  color: var(--nav-text) !important;
}

/* CTA pills carry both .nav__link and .nav__link--cta. The rule above and
   .nav__link--cta's own "color: #fff !important" are equal specificity
   (one class each), so once scrolled, source order decided the winner — and
   .nav__link--cta lost, leaving the "Book a call" / "Apply for a place"
   buttons rendering dark text on their teal fill (2.61:1, fails 4.5:1) the
   moment a visitor scrolls, in both light and dark mode. Three classes here
   outranks both, so the CTA buttons always keep their white text. */
.header--scrolled .nav__link.nav__link--cta {
  color: #fff !important;
}

.header--scrolled .nav__logo-text {
  color: var(--nav-text) !important;
}

.header--scrolled .nav__toggle span {
  background: var(--nav-text) !important;
}

/* --- Section Background Alternation --- */
.section--grey {
  background: var(--bg-secondary) !important;
}

.section--teal-light {
  background: var(--bg-secondary) !important;
}

/* --- Trust Bar --- */
.trust-bar {
  border-bottom: 1px solid var(--section-divider) !important;
  background: var(--bg-primary) !important;
}

.trust-bar__number {
  color: var(--text-primary) !important;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem) !important;
}

.trust-bar__desc {
  color: var(--text-secondary) !important;
}

.trust-bar__label {
  color: var(--text-secondary) !important;
}

/* --- Footer --- */
.footer {
  background: var(--footer-bg) !important;
}

/* --- Service Card Overrides --- */
.service-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

.service-card:hover {
  box-shadow: var(--card-shadow) !important;
}

.service-card--featured {
  border: 2px solid var(--teal) !important;
  transform: none !important;
  box-shadow: none !important;
}

.service-card--featured:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 30px rgba(1,105,111,0.12) !important;
}

.service-card__name,
.service-card__price,
.pricing-card__name,
.pricing-card__price,
.stripe-tier__name,
.stripe-tier__price {
  color: var(--text-primary) !important;
}

.service-card__desc,
.service-card__hours,
.pricing-card__annual,
.stripe-tier__sub {
  color: var(--text-secondary) !important;
}

.service-card__features li,
.pricing-card__feature {
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-color) !important;
}

/* --- Comparison Table Dark Mode --- */
.comparison-table tbody td {
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-color) !important;
}

.comparison-table tbody tr:nth-child(even) {
  background: var(--bg-secondary) !important;
}

.comparison-table tbody tr:hover {
  background: rgba(1, 105, 111, 0.06) !important;
}

.comparison-table__label {
  color: var(--text-primary) !important;
}

/* --- Apple Form Overrides --- */
.form__input,
.form__select,
.form__textarea {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
  border-radius: 12px !important;
}

.form__label {
  color: var(--text-primary) !important;
}

/* --- Apple Button Overrides --- */
.btn {
  border-radius: 980px !important;
  font-weight: 500 !important;
  padding: 0.85rem 2rem !important;
  font-size: 1rem !important;
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1) !important;
}

.btn--primary {
  background: var(--teal) !important;
  color: #ffffff !important;
}
.btn--primary:visited,
.btn--primary:active,
.btn--primary:focus {
  color: #ffffff !important;
}

.btn--primary:hover {
  background: var(--teal-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(1,105,111,0.25) !important;
}

.btn--large {
  padding: 1rem 2.5rem !important;
  font-size: 1.0625rem !important;
}

.btn--outline-dark {
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}

.btn--outline-dark:hover {
  border-color: var(--teal) !important;
  color: var(--teal) !important;
}

.btn--white {
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

/* --- Login Page --- */
.login-page {
  background: var(--bg-secondary) !important;
}

.login-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 20px !important;
  box-shadow: none !important;
}

.login-card__title {
  color: var(--text-primary) !important;
}

.login-card__subtitle {
  color: var(--text-secondary) !important;
}

.login-card__footer {
  color: var(--text-secondary) !important;
}

/* --- Contact Page --- */
.contact-info {
  background: var(--bg-secondary) !important;
  border-radius: 18px !important;
}

.contact-info__label {
  color: var(--text-secondary) !important;
}

.contact-info__value {
  color: var(--text-primary) !important;
}

/* --- About Page --- */
.about-content p {
  color: var(--text-secondary) !important;
}

.about-content p strong {
  color: var(--text-primary) !important;
}

.credential__text {
  color: var(--text-primary) !important;
}

.credential__sub {
  color: var(--text-secondary) !important;
}

/* --- Phase Styles --- */
.phase {
  border-bottom-color: var(--border-color) !important;
}

.phase__title {
  color: var(--text-primary) !important;
}

.phase__desc {
  color: var(--text-secondary) !important;
}

.phase__deliverable {
  color: var(--text-primary) !important;
}

/* --- Landing Page Dark Mode --- */
.pain-card {
  border-left-color: var(--teal) !important;
}

.pain-card__text {
  color: var(--text-primary) !important;
}

.solution-card__title {
  color: var(--text-primary) !important;
}

.solution-card__text {
  color: var(--text-secondary) !important;
}

/* --- Needs Assessment --- */
.needs-assessment {
  background: var(--bg-secondary) !important;
}

.na-persona-card {
  background: var(--card-bg) !important;
  border-color: var(--border-strong) !important;
}

.na-persona-title {
  color: var(--text-primary) !important;
}

.na-persona-desc {
  color: var(--text-secondary) !important;
}

.na-pain-card {
  background: var(--card-bg) !important;
  border-color: var(--border-strong) !important;
}

.na-pain-text {
  color: var(--text-primary) !important;
}

.na-pain-question {
  color: var(--text-primary) !important;
}

.na-pain-check {
  border-color: var(--border-strong) !important;
}

/* --- Dashboard Mockup --- */
.dashboard-mockup {
  border-color: var(--border-color) !important;
}

.mockup-stat, .mockup-tasks {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
}

.mockup-stat__label {
  color: var(--text-secondary) !important;
}

.mockup-stat__value {
  color: var(--text-primary) !important;
}

.mockup-task__text {
  color: var(--text-primary) !important;
}

/* --- Audience Bar --- */
html.dark .audience-bar {
  background: var(--bg-secondary);
}

/* --- Stripe Pricing Dark Mode --- */
.stripe-pricing__toggle-label {
  color: var(--text-secondary) !important;
}

.stripe-pricing__toggle-label--active {
  color: var(--text-primary) !important;
}

.stripe-tier {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  border-radius: 18px !important;
}

.stripe-powered {
  color: var(--text-secondary) !important;
}

/* --- Billing Toggle Dark Mode --- */
.billing-toggle__track {
  background: var(--toggle-track) !important;
}

/* --- Feature Card --- */
.feature-card {
  background: var(--card-bg) !important;
  border-color: var(--teal) !important;
  border-radius: 18px !important;
}

.feature-card__title {
  color: var(--text-primary) !important;
}

.feature-card__text {
  color: var(--text-secondary) !important;
}

.feature-card__step {
  background: var(--bg-secondary) !important;
}

.feature-card__step-text {
  color: var(--text-primary) !important;
}

/* --- Guide Card Dark Mode --- */
.guide-card {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  border-radius: 18px !important;
}

.guide-card__title {
  color: var(--text-primary) !important;
}

.guide-card__desc {
  color: var(--text-secondary) !important;
}

.progress-bar {
  background: var(--bg-secondary) !important;
}

.progress-bar__label {
  color: var(--text-secondary) !important;
}

/* --- Stat Cards --- */
.stat-card {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  border-radius: 18px !important;
}

.stat-card__value {
  color: var(--text-primary) !important;
}

.stat-card__label {
  color: var(--text-secondary) !important;
}

/* --- Member Welcome --- */
.member-welcome__name {
  color: var(--text-primary) !important;
}

.member-welcome__date {
  color: var(--text-secondary) !important;
}

/* --- Pricing Preview Cards --- */
.pricing-preview-card__name {
  color: var(--text-primary) !important;
}

.pricing-preview-card__price {
  color: var(--text-primary) !important;
}

.pricing-preview-card__hours {
  color: var(--teal) !important;
}

.pricing-preview-card__desc {
  color: var(--text-secondary) !important;
}

/* --- Pricing Teaser --- */
.pricing-teaser {
  background: var(--bg-secondary) !important;
}

.pricing-teaser__text {
  color: var(--text-secondary) !important;
}

/* --- Pricing Section --- */
.pricing-section {
  background: var(--bg-secondary) !important;
}

.pricing-section__price {
  color: var(--text-primary) !important;
}

.pricing-section__note {
  color: var(--text-secondary) !important;
}

/* --- Guides Teaser --- */
.guides-teaser {
  border-top-color: var(--border-color) !important;
}

.guides-teaser__text {
  color: var(--text-secondary) !important;
}

/* --- CTA Banner --- */
.cta-banner__text {
  color: rgba(255,255,255,0.8) !important;
}

/* --- T&Cs Modal --- */
.tcs-modal {
  background: var(--card-bg) !important;
  border-radius: 18px !important;
}

.tcs-modal__header {
  border-bottom-color: var(--border-color) !important;
}

.tcs-modal__title {
  color: var(--text-primary) !important;
}

.tcs-modal__footer {
  background: var(--card-bg) !important;
  border-top-color: var(--border-color) !important;
}

.tcs-modal__agree-label {
  color: var(--text-primary) !important;
}

.tcs-content {
  color: var(--text-primary) !important;
}

.tcs-content h2 {
  color: var(--text-primary) !important;
}

.tcs-content p {
  color: var(--text-primary) !important;
}

.tcs-content table th {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.tcs-content table td {
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.tcs-content .tcs-meta {
  color: var(--text-secondary) !important;
  border-bottom-color: var(--border-color) !important;
}

/* --- Mobile Nav Dark Mode ---
   Matches the 1600px breakpoint the slide-out panel itself uses (raised
   from 1024px so the inline desktop nav never clips its own content) —
   this block was left at the old 1024px threshold, so the panel stayed
   hardcoded white/light in dark mode for any viewport 1025-1600px wide. */
@media (max-width: 1600px) {
  .nav__links {
    background: var(--card-bg) !important;
    box-shadow: -8px 0 32px rgba(0,0,0,0.15) !important;
  }
  
  html.dark .nav__links {
    box-shadow: -8px 0 32px rgba(0,0,0,0.5) !important;
  }

  .nav__link {
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
  }

  /* CTA buttons keep white text on their teal fill regardless of theme —
     .nav__link's color override above ties with this on specificity, so
     without this rule coming after it, the buttons lose their white text
     to whatever --text-primary resolves to (dark text in light mode, an
     off-white in dark mode) instead of pure white against the teal. */
  .nav__link--cta {
    color: #fff !important;
  }

  .header--members .nav__links {
    background: var(--surface-elevated) !important;
  }
  
  .header--members .nav__link {
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
  }
}

/* --- MP Multi Project Overrides --- */
.mp-projects__title {
  color: var(--text-primary) !important;
}

.mp-project-item {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
}

.mp-project-item__name {
  color: var(--text-primary) !important;
}

.mp-project-item__meta {
  color: var(--text-secondary) !important;
}

.mp-new-form {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

.mp-new-form input {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

.mp-pricing-toggle__label {
  color: var(--text-secondary) !important;
}

.mp-pricing-toggle__label--active {
  color: var(--text-primary) !important;
}

.mp-pricing-switch__track {
  background: var(--toggle-track) !important;
}

.mp-pricing-note {
  background: rgba(1,105,111,0.04) !important;
  border-color: rgba(1,105,111,0.1) !important;
}

.mp-pricing-note p {
  color: var(--text-primary) !important;
}

/* --- Phase Timeline Dark Mode --- */
.phase-timeline::before {
  background: var(--border-color) !important;
}

.phase-block__title {
  color: var(--text-primary) !important;
}

.phase-block__desc {
  color: var(--text-secondary) !important;
}

.phase-block__item {
  color: var(--text-primary) !important;
}

/* --- Wants Grid --- */
.wants-item {
  background: var(--bg-secondary) !important;
}

.wants-item span {
  color: var(--text-primary) !important;
}

/* --- Urgency Items --- */
html.dark .urgency-item {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}

/* --- Extras Item --- */
.extras-item .card {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
}

/* --- Why Cards Dark Mode --- */
html.dark .why-card {
  background: var(--surface);
  border-color: var(--border-color);
}

/* --- Calendly Section --- */
.calendly-section {
  background: var(--bg-secondary) !important;
}

.calendly-section h3 {
  color: var(--text-primary) !important;
}

.calendly-section p {
  color: var(--text-secondary) !important;
}

/* --- Dashboard Page with body.dashboard in Dark Mode should work as-is --- */

/* --- Members Header Dark Mode --- */
.header--members {
  background: var(--surface-elevated) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

html:not(.dark) .header--members {
  background: var(--surface-elevated) !important;
}

html:not(.dark) .header--members .nav__link {
  color: var(--text-secondary);
}

html:not(.dark) .header--members .nav__link:hover {
  color: var(--text-primary);
}

/* Keep members header dark-styled on light mode for now; override: */
.header--members {
  background: #1B2A4A !important;
}

.header--members .nav__link {
  color: rgba(255,255,255,0.85) !important;
}

html.dark .header--members {
  background: var(--surface-elevated) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

html.dark .header--members .nav__link {
  color: var(--text-secondary) !important;
}

html.dark .header--members .nav__link:hover {
  color: var(--text-primary) !important;
}

/* --- Guides Library Page --- */
html.dark .member-page main,
html.dark main[style*="background:var(--grey-bg)"] {
  background: var(--bg-primary) !important;
}

/* ========================================
   DARK/LIGHT MODE TOGGLE BUTTON
   ======================================== */

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
  flex-shrink: 0;
  color: inherit;
  padding: 0;
}

.theme-toggle:hover {
  background: rgba(128,128,128,0.12);
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}

.theme-toggle:hover svg {
  transform: rotate(15deg);
}

/* Sun icon hidden by default (light mode shows moon) */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

html.dark .theme-toggle .icon-sun { display: block; }
html.dark .theme-toggle .icon-moon { display: none; }

/* In transparent header, toggle is white */
.header--transparent .theme-toggle {
  color: rgba(255,255,255,0.85);
}

.header--scrolled .theme-toggle {
  color: var(--nav-text);
}

.header--members .theme-toggle {
  color: rgba(255,255,255,0.85);
}

/* Dashboard header toggle */
.db-header .theme-toggle {
  color: var(--db-text-muted);
}

.db-header .theme-toggle:hover {
  color: var(--db-text);
  background: rgba(255,255,255,0.06);
}

/* ========================================
   BLUEPRINT PREVIEW MODE
   ======================================== */

/* Preview banner */
.preview-banner {
  position: sticky;
  top: 0;
  z-index: 200;
  background: linear-gradient(135deg, #1d1d1f, #2d2d30);
  color: var(--db-text);
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.preview-banner__text {
  opacity: 0.9;
}

.preview-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--teal);
  color: var(--db-text);
  padding: 0.4rem 1.25rem;
  border-radius: 980px;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background 0.2s ease;
  white-space: nowrap;
}

.preview-banner__cta:hover {
  background: var(--teal-hover);
}

/* Preview mode: disabled checkboxes */
.preview-mode .step-checkbox,
.preview-mode input[type="checkbox"] {
  pointer-events: none !important;
  opacity: 0.5 !important;
}

/* Preview mode: blurred templates */
.preview-mode .template-content,
.preview-mode .template-download,
.preview-mode [data-template] {
  position: relative;
  overflow: hidden;
}

.preview-mode .template-content::after,
.preview-mode .template-download::after,
.preview-mode [data-template]::after {
  content: '';
  position: absolute;
  inset: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(255,255,255,0.6);
  z-index: 5;
}

html.dark .preview-mode .template-content::after,
html.dark .preview-mode .template-download::after,
html.dark .preview-mode [data-template]::after {
  background: rgba(13,17,23,0.7);
}

.preview-mode .template-lock-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: transparent;
}

.preview-mode .template-lock-overlay svg {
  width: 28px;
  height: 28px;
  color: var(--teal);
}

.preview-mode .template-lock-overlay span {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* Preview mode: disable decision interactivity */
.preview-mode .decision-btn,
.preview-mode .decision-option {
  pointer-events: none !important;
  opacity: 0.65 !important;
}

/* --- Preview/Open buttons on guide cards --- */
.guide-card__actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}

.guide-card__actions .btn {
  flex: 1;
  min-width: 140px;
  text-align: center;
  justify-content: center;
}

/* ========================================
   COMPREHENSIVE PRICING — Apple Style
   ======================================== */

/* Pricing Section Labels */
.pricing-section-label {
  font-size: clamp(2.5rem, 1.5rem + 3vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 0.75rem;
  line-height: 1.08;
}

.pricing-section-desc {
  font-size: clamp(1rem, 0.9rem + 0.35vw, 1.25rem);
  font-weight: 400;
  color: var(--text-secondary);
  text-align: center;
  max-width: 600px;
  margin: 0 auto 3.5rem;
  line-height: 1.55;
}

/* Apple-style pricing cards — generous internal padding */
.apple-pricing-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  text-align: center;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s cubic-bezier(0.16,1,0.3,1);
  position: relative;
}

.apple-pricing-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow);
}

.apple-pricing-card--featured {
  border-top: 3px solid var(--teal);
}

.apple-pricing-card__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--teal);
  color: var(--db-text);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: 980px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.apple-pricing-card__name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.apple-pricing-card__price {
  font-size: clamp(2.5rem, 2rem + 1.5vw, 3.5rem);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.apple-pricing-card__price-suffix {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-secondary);
  display: block;
  margin-top: 0.25rem;
}

.apple-pricing-card__hours {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--teal);
  margin-top: 0.75rem;
  margin-bottom: 1.5rem;
}

.apple-pricing-card__features {
  text-align: left;
  margin-bottom: 2rem;
}

.apple-pricing-card__feature {
  font-size: 0.95rem;
  color: var(--text-secondary);
  padding: 0.5rem 0;
  padding-left: 1.75rem;
  position: relative;
  border-bottom: 1px solid var(--border-color);
  line-height: 1.5;
}

.apple-pricing-card__feature:last-child {
  border-bottom: none;
}

.apple-pricing-card__feature::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--teal);
  font-weight: 700;
}

/* Apple pricing grid */
.apple-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
}

@media (max-width: 900px) {
  .apple-pricing-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
  }
}

/* --- Scroll Reveal (enhanced) --- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1) !important;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Rainbow stripe subtle --- */
.rainbow-stripe {
  height: 2px !important;
}

.rainbow-stripe--thin {
  height: 1px !important;
}

/* --- Generic background fixes for member pages --- */
html.dark .member-page {
  background: var(--bg-primary);
  color: var(--text-primary);
}

html.dark main {
  background: var(--bg-primary);
}

/* --- Pain section bg --- */
.pain-section {
  background: var(--bg-secondary) !important;
}

/* --- Payoff section remains dark --- */

/* Badge dark mode */
.badge--coming {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
}

.badge--new {
  background: rgba(1,105,111,0.1) !important;
  color: var(--teal) !important;
}

/* --- Terms page --- */
html.dark .terms-content h2,
html.dark .terms-content h3 {
  color: var(--text-primary);
}

html.dark .terms-content p,
html.dark .terms-content li {
  color: var(--text-secondary);
}

/* Section label should stay teal */
.section__label {
  color: var(--teal) !important;
}

/* Misc fixes */
.card__icon {
  background: rgba(1,105,111,0.08) !important;
}

.solution-card__icon {
  background: rgba(1,105,111,0.08) !important;
}

/* Ensure dashboard body.dashboard overrides work properly */
body.dashboard {
  background: var(--db-bg) !important;
  color: var(--db-text) !important;
}

html.dark body.dashboard {
  background: var(--db-bg) !important;
}

/* Extras page VPM Guides section dark mode */
html.dark .section--grey {
  background: var(--bg-secondary) !important;
}

/* Form success */
.form-success__title {
  color: var(--text-primary) !important;
}

.form-success__text {
  color: var(--text-secondary) !important;
}

/* =============================================
   DASHBOARD LIGHT MODE OVERRIDES
   When html does NOT have .dark class, dashboard shows in light mode
   ============================================= */
html:not(.dark) body.dashboard {
  --db-bg: #f5f5f7;
  --db-surface: #FFFFFF;
  --db-surface-elevated: #FFFFFF;
  --db-text: #1d1d1f;
  --db-text-muted: #86868b;
  --db-border: rgba(0,0,0,0.08);
  --db-glow: rgba(1, 105, 111, 0.15);
  background: var(--db-bg);
  color: var(--db-text);
}

html:not(.dark) body.dashboard .db-header {
  background: #FFFFFF;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

html:not(.dark) body.dashboard .db-header .db-nav-link,
html:not(.dark) body.dashboard .db-header .db-avatar-name {
  color: #1d1d1f;
}

html:not(.dark) body.dashboard .db-header .db-nav-link.active {
  background: rgba(1, 105, 111, 0.1);
  color: #01696F;
}

html:not(.dark) body.dashboard .db-stat-card,
html:not(.dark) body.dashboard .db-mission-card,
html:not(.dark) body.dashboard .db-sidebar-card {
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.08);
  color: #1d1d1f;
}

html:not(.dark) body.dashboard .db-stat-value,
html:not(.dark) body.dashboard .db-stat-label,
html:not(.dark) body.dashboard .db-mission-title,
html:not(.dark) body.dashboard .db-mission-desc,
html:not(.dark) body.dashboard h1, 
html:not(.dark) body.dashboard h2,
html:not(.dark) body.dashboard h3 {
  color: #1d1d1f;
}

html:not(.dark) body.dashboard .db-text-muted,
html:not(.dark) body.dashboard .db-activity-time,
html:not(.dark) body.dashboard .db-stat-sub {
  color: #86868b;
}

html:not(.dark) body.dashboard .db-welcome-name {
  background: linear-gradient(135deg, #01696F, #028A92);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

html:not(.dark) body.dashboard .db-progress-bar-bg {
  background: rgba(0,0,0,0.06);
}

html:not(.dark) body.dashboard .db-phase-line {
  background: rgba(0,0,0,0.1);
}

html:not(.dark) body.dashboard .db-phase-line.active {
  background: linear-gradient(90deg, #3FB950, #01696F);
}

html:not(.dark) body.dashboard .db-locked-card {
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.06);
}

html:not(.dark) body.dashboard .db-locked-card h4,
html:not(.dark) body.dashboard .db-locked-card p {
  color: #86868b;
}

html:not(.dark) body.dashboard .db-sidebar {
  border-left: 1px solid rgba(0,0,0,0.08);
}

html:not(.dark) body.dashboard .db-sidebar-section-title {
  color: #86868b;
}

html:not(.dark) body.dashboard .db-activity-text {
  color: #1d1d1f;
}

html:not(.dark) body.dashboard .db-quick-link {
  color: #1d1d1f;
}

html:not(.dark) body.dashboard .db-quick-link:hover {
  color: #01696F;
}

html:not(.dark) body.dashboard .db-rainbow-line {
  opacity: 0.6;
}

/* Multi-project items in light mode */
html:not(.dark) body.dashboard .mp-project-item,
html:not(.dark) .mp-project-item {
  background: #f5f5f7;
  border-color: rgba(0,0,0,0.06);
  color: #1d1d1f;
}

html:not(.dark) body.dashboard .mp-project-name {
  color: #1d1d1f;
}

html:not(.dark) body.dashboard .mp-project-meta {
  color: #86868b;
}

/* Sparkline in light mode */
html:not(.dark) body.dashboard .db-sparkline path {
  stroke: #01696F;
}

/* Circular progress in light mode */
html:not(.dark) body.dashboard .db-progress-ring-bg {
  stroke: rgba(0,0,0,0.08);
}

/* Three column grid with mobile responsive */
.three-col-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
}

@media (max-width: 768px) {
  .three-col-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* Catch-all: ensure ALL dashboard text uses the variable in light mode */
html:not(.dark) body.dashboard,
html:not(.dark) body.dashboard *:not(svg):not(svg *) {
  --db-text: #1d1d1f;
  --db-text-muted: #86868b;
}

html:not(.dark) body.dashboard .db-header .db-logo-svg text {
  fill: #1d1d1f;
}

html:not(.dark) body.dashboard .db-phase-label,
html:not(.dark) body.dashboard .db-phase-name,
html:not(.dark) body.dashboard .db-steps-count,
html:not(.dark) body.dashboard .db-mission-stats,
html:not(.dark) body.dashboard .db-btn,
html:not(.dark) body.dashboard p,
html:not(.dark) body.dashboard span,
html:not(.dark) body.dashboard li,
html:not(.dark) body.dashboard td,
html:not(.dark) body.dashboard th,
html:not(.dark) body.dashboard label {
  color: var(--db-text);
}

html:not(.dark) body.dashboard .db-btn.db-btn--primary {
  color: #fff;
}

/* ============================================================
   MESSAGING REWORK V2 — new components
   ============================================================ */

/* Hero refinements */
.hero--tight .hero__content { max-width: 760px; }
.hero--short { min-height: 360px; padding: var(--space-16) 0 var(--space-12); }
.hero__overlay--solid { background: linear-gradient(135deg, var(--navy) 0%, var(--teal) 100%); position: absolute; inset: 0; }
.hero__content--center { text-align: center; margin: 0 auto; }
.hero__title--med { font-size: clamp(2.2rem, 5vw, 3.5rem); }
.hero__audience {
  color: rgba(255,255,255,0.85);
  font-size: 1rem;
  letter-spacing: 0.5px;
  margin: 0 0 var(--space-6);
  font-weight: 500;
}
.hero__buttons {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

/* Header demo link */
.nav__link--demo {
  color: var(--db-text-muted);
  font-weight: 500;
}
.nav__link--demo:hover { color: var(--color-accent, #e30079); }
/* The current page used to be marked in magenta, which against navy and
   teal was the loudest thing on the page. Teal plus the weight bump says
   the same thing without shouting. */
.nav__link--active { color: var(--teal) !important; font-weight: 700; }
html.dark .nav__link--active { color: var(--db-accent-bright, #3FC5C5) !important; }

/* Audience grid (homepage) */
.aud-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-10);
}
.aud-card {
  display: block;
  padding: var(--space-8);
  border-radius: 20px;
  text-decoration: none;
  color: inherit;
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}
.aud-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: #333;
}
.aud-card--green::before { background: #58a85f; }
.aud-card--pink::before { background: #e30079; }
.aud-card--purple::before { background: #692a83; }
.aud-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
  border-color: transparent;
}
.aud-card__tag {
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 600;
}
.aud-card__line {
  font-size: 1.5rem;
  font-weight: 700;
  margin: var(--space-3) 0 var(--space-3);
  letter-spacing: -0.5px;
}
.aud-card__sub {
  color: var(--db-text-muted);
  margin: 0 0 var(--space-5);
  font-size: 1rem;
  line-height: 1.5;
}
.aud-card__link {
  font-weight: 600;
  color: var(--color-accent, #e30079);
  font-size: 0.95rem;
}

/* What you get */
.get-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-10);
}
.get-card {
  padding: var(--space-8);
  background: var(--db-surface);
  border-radius: 16px;
  border: 1px solid var(--db-border);
}
.get-card__num {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--color-accent, #e30079);
  margin-bottom: var(--space-3);
}
.get-card__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 var(--space-3);
  letter-spacing: -0.5px;
}
.get-card__text {
  color: var(--db-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* How it works rows */
.how-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-10);
}
.how-step {
  padding: var(--space-6);
  border-left: 3px solid var(--color-accent, #e30079);
  background: var(--surface-elevated);
  border-radius: 0 12px 12px 0;
}
.how-step__num {
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-accent, #e30079);
  margin-bottom: var(--space-2);
}
.how-step__title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 var(--space-2);
}
.how-step__text {
  color: var(--db-text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

/* Proof / Trust Pack */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-10);
}
.proof-card {
  display: block;
  padding: var(--space-8);
  background: var(--db-surface);
  border-radius: 16px;
  border: 1px solid var(--db-border);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
}
.proof-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.06);
}
.proof-card__tag {
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 600;
}
.proof-card__title {
  font-size: 1.3rem;
  font-weight: 700;
  margin: var(--space-2) 0 var(--space-3);
  letter-spacing: -0.5px;
}
.proof-card__text {
  color: var(--db-text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 var(--space-4);
}
.proof-card__link {
  font-weight: 600;
  color: var(--color-accent, #e30079);
  font-size: 0.9rem;
}
.proof-note {
  text-align: center;
  margin: var(--space-8) auto 0;
  max-width: 700px;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* Packages */
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-6);
  max-width: 920px;
  margin: var(--space-10) auto 0;
}
.pkg-card {
  padding: var(--space-8);
  background: var(--db-surface);
  border-radius: 20px;
  border: 1px solid var(--db-border);
  position: relative;
}
.pkg-card--featured {
  border-color: var(--color-accent, #e30079);
  border-width: 2px;
  box-shadow: 0 12px 40px rgba(227, 0, 121, 0.12);
}
.pkg-card__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent, #e30079);
  color: #fff;
  padding: 6px 16px;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.pkg-card__name {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.pkg-card__price {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -1px;
  margin: var(--space-3) 0 var(--space-2);
}
.pkg-card__price span {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
}
.pkg-card__hours {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}
.pkg-card__for {
  font-size: 0.95rem;
  color: var(--db-text-muted);
  margin: 0 0 var(--space-5);
  line-height: 1.5;
}
.pkg-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
}
.pkg-card__list li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--db-border);
  font-size: 0.95rem;
  color: var(--text-primary);
}
.pkg-card__list li::before {
  content: '✓';
  color: var(--color-accent, #58a85f);
  font-weight: 700;
  margin-right: var(--space-2);
}
.pkg-note {
  text-align: center;
  margin: var(--space-8) auto 0;
  max-width: 760px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* FAQ */
.faq-list {
  max-width: 760px;
  margin: var(--space-10) auto 0;
}
.faq-item {
  border-bottom: 1px solid var(--db-border);
  padding: var(--space-5) 0;
}
.faq-item summary {
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  padding: var(--space-2) 0;
  list-style: none;
  position: relative;
  padding-right: 40px;
  color: var(--text-primary);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--text-secondary);
  transition: transform 0.2s;
}
.faq-item[open] summary::after {
  content: '−';
}
.faq-item p {
  color: var(--db-text-muted);
  line-height: 1.6;
  margin: var(--space-3) 0 var(--space-2);
}

/* Final CTA strip */
.cta-strip {
  padding: var(--space-16) 0;
  background: var(--db-surface);
  border-top: 1px solid var(--db-border);
}
.cta-strip__inner {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.cta-strip__title {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -1px;
  margin: 0 0 var(--space-3);
  color: var(--db-text);
}
.cta-strip__text {
  color: var(--db-text-muted);
  font-size: 1.05rem;
  margin: 0 0 var(--space-6);
}
.cta-strip__buttons {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* Audience bar (sticky on audience pages) */
.aud-bar {
  background: var(--surface-elevated);
  border-bottom: 1px solid var(--db-border);
  padding: var(--space-3) 0;
}
.aud-bar .container {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.aud-bar__label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.aud-bar__link {
  padding: var(--space-2) var(--space-4);
  border-radius: 99px;
  text-decoration: none;
  color: var(--db-text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s;
}
.aud-bar__link:hover {
  background: var(--db-surface);
  color: var(--color-accent, #e30079);
}
.aud-bar__link--active {
  background: var(--color-accent, #e30079);
  color: #fff;
}

/* Solution rows (concrete actions) */
.solution-list {
  max-width: 860px;
  margin: var(--space-10) auto 0;
}
.solution-row {
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--db-border);
}
.solution-row:last-child { border-bottom: none; }
.solution-row__title {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 var(--space-2);
  letter-spacing: -0.3px;
}
.solution-row__text {
  color: var(--db-text-muted);
  line-height: 1.6;
  margin: 0;
  font-size: 1rem;
}

/* Worked example */
.worked-ex {
  max-width: 860px;
  margin: 0 auto;
  text-align: left;
}
.worked-ex__title {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.8px;
  margin: var(--space-2) 0 var(--space-6);
}
.worked-ex__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-5);
  margin: var(--space-6) 0;
  padding: var(--space-6);
  background: var(--surface-elevated);
  border-radius: 16px;
  border-left: 4px solid var(--color-accent, #e30079);
}
.worked-ex__stat { text-align: left; }
.worked-ex__num {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--color-accent, #e30079);
}
.worked-ex__lbl {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: var(--space-1);
  line-height: 1.4;
}
.worked-ex__text {
  color: var(--db-text-muted);
  line-height: 1.65;
  font-size: 1rem;
  margin: 0;
}

/* Package fit block */
.pkg-fit {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.pkg-fit__title {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.8px;
  margin: var(--space-2) 0 var(--space-4);
}
.pkg-fit__text {
  color: var(--db-text-muted);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 var(--space-4);
}
.pkg-fit__note {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0 0 var(--space-6);
}
.pkg-fit__buttons {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* Compare table */
.compare-wrap {
  max-width: 920px;
  margin: var(--space-8) auto 0;
  overflow-x: auto;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: var(--db-surface);
  border-radius: 12px;
  overflow: hidden;
}
.compare-table thead th {
  text-align: left;
  padding: var(--space-4);
  font-weight: 700;
  background: var(--surface-elevated);
  border-bottom: 2px solid var(--db-border);
}
.compare-table thead th:nth-child(2),
.compare-table thead th:nth-child(3) {
  text-align: center;
  width: 25%;
}
.compare-table tbody td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--db-border);
  color: var(--db-text-muted);
}
.compare-table tbody td:nth-child(1) {
  font-weight: 600;
  color: var(--text-primary);
}
.compare-table tbody td:nth-child(2),
.compare-table tbody td:nth-child(3) {
  text-align: center;
}

/* --- Fit quiz -------------------------------------------------------------
   This rendered as a bare list of text on the pricing page, and the reason was
   in the variables rather than the markup: .quiz-card and .quiz-opt asked for
   --db-surface and --db-border, which are only defined under body.dashboard
   and html.dark. On a light marketing page they resolve to nothing, so the
   whole declaration is dropped and the card lost its background and every
   border. --surface-elevated did exist but is #FFFFFF, invisible on a white
   page. It now uses the tokens these pages actually define, plus the brand
   teal, so it reads as a quiz you are invited to answer. */
.quiz-card {
  max-width: 680px;
  margin: var(--space-8) auto 0;
  padding: clamp(24px, 4vw, 40px);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  box-shadow: 0 10px 34px rgba(27, 42, 74, 0.08);
  /* Steps differ in height; a floor stops the card jumping as you answer. */
  min-height: 360px;
}

.quiz-step { display: none; }
.quiz-step.active { display: block; animation: quizStepIn 0.28s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .quiz-step.active { animation: none; }
}

@keyframes quizStepIn {
  from { opacity: 0; transform: translateY(6px); }
}

/* Where you are, and how much is left. Each step carries its own bar width,
   so the progress needs no JavaScript. */
.quiz-step__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.quiz-step__count {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #01696F;
  white-space: nowrap;
}

.quiz-progress {
  flex: 1;
  height: 5px;
  border-radius: 99px;
  background: rgba(27, 42, 74, 0.10);
  overflow: hidden;
}

.quiz-progress i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #01696F, #0ea5ad);
}

.quiz-step__q {
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 var(--space-5);
}

.quiz-step__opts {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.quiz-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 16px 46px 16px 18px;
  background: var(--card-bg);
  border: 1.5px solid rgba(27, 42, 74, 0.14);
  border-radius: 14px;
  text-align: left;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease,
              transform 0.18s ease, box-shadow 0.18s ease;
}

/* The empty circle that says "this is a thing you pick". */
.quiz-opt::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(27, 42, 74, 0.22);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.quiz-opt::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 2px solid rgba(27, 42, 74, 0.28);
  border-top: 2px solid rgba(27, 42, 74, 0.28);
  transform: rotate(45deg);
  transition: border-color 0.18s ease;
}

.quiz-opt:hover,
.quiz-opt:focus-visible {
  border-color: #01696F;
  background: rgba(1, 105, 111, 0.05);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(1, 105, 111, 0.13);
  outline: none;
}

.quiz-opt:hover::before,
.quiz-opt:focus-visible::before {
  border-color: #01696F;
  box-shadow: inset 0 0 0 4px #01696F;
}

.quiz-opt:hover::after,
.quiz-opt:focus-visible::after { border-color: #01696F; }

/* The payoff. */
.quiz-result__badge {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: 5px 12px;
  border-radius: 99px;
  background: rgba(1, 105, 111, 0.10);
  color: #01696F;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.quiz-result__pkg {
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 0 0 var(--space-3);
  color: #01696F;
}

.quiz-result__why {
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0 0 var(--space-6);
}

.quiz-result__buttons {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.quiz-note {
  margin: var(--space-5) 0 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Teal is locked and stays dark in both themes, so on a dark surface the
   brighter stand-in does the work, the same swap the rest of the site makes. */
html.dark .quiz-step__count,
html.dark .quiz-result__pkg { color: #3FC5C5; }

html.dark .quiz-result__badge {
  background: rgba(63, 197, 197, 0.14);
  color: #3FC5C5;
}

html.dark .quiz-progress { background: rgba(255, 255, 255, 0.12); }
html.dark .quiz-progress i { background: linear-gradient(90deg, #01696F, #3FC5C5); }
html.dark .quiz-opt { border-color: rgba(255, 255, 255, 0.14); }
html.dark .quiz-opt::before { border-color: rgba(255, 255, 255, 0.28); }
html.dark .quiz-opt::after {
  border-right-color: rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.35);
}

html.dark .quiz-opt:hover,
html.dark .quiz-opt:focus-visible {
  border-color: #3FC5C5;
  background: rgba(63, 197, 197, 0.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

html.dark .quiz-opt:hover::before,
html.dark .quiz-opt:focus-visible::before {
  border-color: #3FC5C5;
  box-shadow: inset 0 0 0 4px #3FC5C5;
}

html.dark .quiz-opt:hover::after,
html.dark .quiz-opt:focus-visible::after { border-color: #3FC5C5; }

@media (max-width: 600px) {
  .quiz-step__head { flex-wrap: wrap; gap: var(--space-2); }
  .quiz-progress { flex-basis: 100%; }
}

/* Section tight */
.section--tight { padding-top: var(--space-12); padding-bottom: var(--space-12); }

/* Footer brand/tagline */
.footer__brand-tag {
  color: #fff;
  font-weight: 600;
  margin: var(--space-3) 0 var(--space-1);
  font-size: 0.95rem;
}
.footer__brand-aud {
  color: rgba(255,255,255,0.7);
  margin: 0 0 var(--space-4);
  font-size: 0.85rem;
}

/* Outline-light button on dark hero */
.btn--outline-light {
  background: rgba(255,255,255,0.1);
  border: 1.5px solid rgba(255,255,255,0.6);
  color: #fff;
}
.btn--outline-light:hover {
  background: rgba(255,255,255,0.2);
  border-color: #fff;
}

/* Demo banner (inside dashboard) */
.demo-banner {
  background: linear-gradient(90deg, #e30079, #692a83);
  color: #fff;
  padding: var(--space-3) var(--space-6);
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  position: sticky;
  top: 0;
  z-index: 100;
}
.demo-banner a {
  color: #fff;
  text-decoration: underline;
  font-weight: 600;
}

/* Mobile */
@media (max-width: 768px) {
  .aud-grid, .get-grid, .pkg-grid { grid-template-columns: 1fr; }
  .pkg-card__price { font-size: 1.8rem; }
  .worked-ex__title, .pkg-fit__title { font-size: 1.5rem; }
  .compare-table { font-size: 0.85rem; }
  .compare-table thead th, .compare-table tbody td { padding: var(--space-3); }
}

/* Demo link visibility fix on transparent (dark) header */
.header--transparent .nav__link--demo { color: rgba(255,255,255,0.92); }
.header--transparent .nav__link--demo:hover { color: #fff; text-decoration: underline; }

/* Three-package grid */
.pkg-grid--three {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: 1100px;
}
@media (max-width: 900px) {
  .pkg-grid--three { grid-template-columns: 1fr; }
}

/* Clickable project rows on member dashboard */
a.db-mp-project--link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  background: var(--db-card-bg, #fff);
  border: 1px solid var(--db-border, rgba(0,0,0,0.08));
  margin-bottom: 10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}
a.db-mp-project--link:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.07);
  border-color: var(--color-accent, #01696F);
}
a.db-mp-project--link:hover .db-mp-project__continue {
  color: var(--color-accent, #01696F);
  font-weight: 700;
}
.db-mp-project__dot--new {
  background: #58a85f;
  box-shadow: 0 0 0 4px rgba(88,168,95,0.18);
}

/* Force project link rows to inherit the intended text colors, not link blue */
a.db-mp-project--link,
a.db-mp-project--link:visited {
  color: inherit;
}
a.db-mp-project--link .db-mp-project__name,
a.db-mp-project--link .db-mp-project__meta,
a.db-mp-project--link .db-mp-project__pct {
  color: inherit;
}
a.db-mp-project--link .db-mp-project__name {
  font-weight: 600;
  color: var(--db-text-primary, #1d1d1f);
}
a.db-mp-project--link .db-mp-project__meta {
  color: var(--db-text-secondary, #6e6e73);
  font-size: 0.85rem;
}
a.db-mp-project--link .db-mp-project__pct {
  font-weight: 700;
  color: var(--db-text-primary, #1d1d1f);
}
a.db-mp-project--link .db-mp-project__continue {
  color: var(--color-accent, #01696F);
  font-weight: 600;
  white-space: nowrap;
  font-size: 0.9rem;
}

/* ============================================================
   MOBILE FIXES — DASHBOARD PROJECTS, PIPELINE, BLUEPRINT HEADER
   ============================================================ */

@media (max-width: 640px) {
  /* Project rows: stack vertically so name/meta gets the full width */
  a.db-mp-project--link {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 6px 12px;
    padding: 14px;
    align-items: center;
  }
  a.db-mp-project--link .db-mp-project__dot {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    margin-top: 4px;
  }
  a.db-mp-project--link .db-mp-project__info {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  a.db-mp-project--link .db-mp-project__name {
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    line-height: 1.3;
  }
  a.db-mp-project--link .db-mp-project__meta {
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    line-height: 1.4;
  }
  a.db-mp-project--link .db-mp-project__progress-wrap {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
  }
  a.db-mp-project--link .db-mp-project__pct {
    grid-column: 3;
    grid-row: 1;
    font-size: 0.95rem;
  }
  a.db-mp-project--link .db-mp-project__continue {
    grid-column: 3;
    grid-row: 2;
    text-align: right;
  }

  /* Phase pipeline: wrap to two rows if it can't fit 4 across */
  .db-pipeline {
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 14px;
  }
  .db-pipeline__phase {
    flex: 0 0 calc(50% - 14px);
    min-width: 0;
  }
  .db-pipeline__connector {
    flex: 1 1 auto;
    min-width: 20px;
  }
  .db-pipeline__label {
    text-align: center;
  }
  .db-pipeline__phase-name {
    font-size: 0.7rem;
    line-height: 1.25;
    display: block;
    word-break: normal;
  }

  /* Blueprint app-header: stack title vertically, smaller font */
  header.app-header {
    height: auto !important;
    min-height: 70px;
  }
  .demo-mode header.app-header {
    /* sit below the demo banner */
    top: 64px !important;
  }
  header.app-header .header-content,
  header.app-header > div {
    padding: 8px 12px;
    flex-wrap: wrap;
  }
  .header-logo,
  .header-title {
    font-size: 0.85rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw;
  }

  /* Demo banner: increase height to fit two lines and the button */
  #demo-banner {
    height: auto !important;
    min-height: 60px;
    padding: 8px 12px !important;
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
  }
  #demo-banner a {
    font-size: 0.75rem !important;
    padding: 5px 12px !important;
    margin-left: 4px;
  }
  .demo-mode .phase-header {
    top: 134px !important;
  }
}

@media (max-width: 420px) {
  /* Phase pipeline on very narrow screens: 1 per row */
  .db-pipeline__phase {
    flex: 0 0 100%;
  }
  .db-pipeline__connector {
    display: none;
  }
}

/* --- Custom cursor tracker ---
   Decorative only: layered on top of the native cursor, not a replacement
   (we don't set cursor:none anywhere). The trailing look on the ring comes
   entirely from the CSS transition on its own transform — main.js just sets
   a new transform on every mousemove, and the transition interpolates
   toward it. The dot has no transform transition, so it snaps to the
   pointer instantly while the ring visibly catches up. */
.hex-cursor {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999991;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.hex-cursor--active {
  opacity: 1;
}
.hex-cursor--ring {
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--teal);
  transition: transform 0.15s ease-out, width 0.2s, height 0.2s, background 0.2s, opacity 0.2s;
}
.hex-cursor--ring.is-hover {
  width: 46px;
  height: 46px;
  background: rgba(1, 105, 111, 0.08);
}
.hex-cursor--dot {
  width: 6px;
  height: 6px;
  background: var(--teal);
  transition: width 0.2s, height 0.2s, opacity 0.2s;
}
.hex-cursor--dot.is-hover {
  width: 0;
  height: 0;
}
@media (hover: none), (pointer: coarse) {
  .hex-cursor {
    display: none !important;
  }
}

/* "Let's see if we can work together" is a much longer label than the
   "Book a 30-minute call" it replaced. On a 375px screen the hero and
   closing-strip buttons sized to their content and ran past the right edge,
   which the section's overflow then hid rather than fixed. */
.hero__buttons .btn,
.cta-strip__buttons .btn,
.pkg-fit__buttons .btn {
  max-width: 100%;
}


/* --- Header: solid and readable on every page ---------------------------
   The nav links were rgba(255,255,255,0.9), which only works over a dark
   hero. On any page with a light top (the homepage, the case study, the
   Blueprint and terms pages) that put white text on a white background: the
   links were invisible until you scrolled, and the only one you could see
   was whichever carried .nav__link--active in magenta. Hovering revealed
   them one at a time.

   Rather than tag each page with whether its hero happens to be dark, the
   header now carries its own background everywhere. It is the same treatment
   the header already switched to on scroll, so this is what most visitors
   were seeing within a second of landing anyway, and it is now identical on
   all pages. */
.header {
  background: var(--nav-bg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--border-color);
}

.header .nav__link { color: var(--nav-text); }
.header .nav__link:hover { color: var(--teal); }
.header .nav__link.nav__link--cta,
.header .nav__link.nav__link--cta:hover { color: #fff; }
.header .nav__logo,
.header .nav__logo-text { color: var(--nav-text); }
.header .nav__toggle span { background: var(--nav-text); }

/* The nav is a single row that has to stay legible as it fills up. The CTA
   is the last thing in it, so it reads as the end of the line rather than
   sitting in the middle with links after it. */
.nav__links { gap: var(--space-4); }
.nav__link--cta { margin-left: var(--space-2); }


/* --- Pain quotes as speech bubbles --------------------------------------
   These are the words clients actually use, so they should read as someone
   speaking rather than as another card. They were losing their styling to the
   blanket ".card, .solution-card, .pain-card, ..." rule further up, which
   forces a flat white fill, an 18px radius and no shadow with !important on
   every one of them. That is what left them washed out on a white section.

   These rules carry the same weight so the bubble treatment survives it, and
   they are scoped to .pain-card so no other card type is affected. */
.pain-grid {
  /* Three quotes in a two-column grid left the third stranded on its own
     row, which is most of why they read as loose rather than as a set. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-8) var(--space-6);
  align-items: stretch;
}

.pain-card {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--space-6) var(--space-6) !important;
  background: var(--pain-bubble-bg, rgba(1, 105, 111, 0.06)) !important;
  border: 1px solid var(--pain-bubble-border, rgba(1, 105, 111, 0.2)) !important;
  border-radius: 20px 20px 20px 6px !important;
  box-shadow: 0 10px 26px rgba(25, 46, 49, 0.08) !important;
}

/* The tail: a square rotated so its corner points down and left, with only
   the two outward-facing borders kept so it continues the bubble's edge. */
.pain-card::after {
  content: "";
  position: absolute;
  left: 22px;
  bottom: -9px;
  width: 16px;
  height: 16px;
  background: var(--pain-bubble-bg, rgba(1, 105, 111, 0.06));
  border-left: 1px solid var(--pain-bubble-border, rgba(1, 105, 111, 0.2));
  border-bottom: 1px solid var(--pain-bubble-border, rgba(1, 105, 111, 0.2));
  border-bottom-left-radius: 4px;
  transform: rotate(45deg);
}

.pain-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 18px 36px rgba(25, 46, 49, 0.13) !important;
}

.pain-card__text {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-primary) !important;
  font-style: normal;
}

/* On a grey section the tint would sink into the background, so the bubble
   goes lighter than the section rather than darker. */
.section--grey .pain-card,
.section--grey .pain-card::after {
  --pain-bubble-bg: var(--card-bg);
  --pain-bubble-border: var(--border-strong);
}

html.dark .pain-card,
html.dark .pain-card::after {
  --pain-bubble-bg: var(--surface-elevated);
  --pain-bubble-border: rgba(255, 255, 255, 0.16);
}

html.dark .pain-card {
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.36) !important;
}

@media (max-width: 768px) {
  .pain-grid { grid-template-columns: 1fr; }
}


/* --- About page: numbers first, imagery as a breather ---------------------
   The page opened with a dark hero and then a 520px photograph of Plymouth,
   so a visitor scrolled through more than a thousand pixels of imagery before
   reaching a single fact. The numbers now sit directly under the hero, and
   the photograph moves down the page where it works as a pause between
   sections rather than a barrier in front of them. */
.about-proof {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--section-divider);
  padding: var(--space-12) 0;
}

.about-proof__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-8) var(--space-6);
}

.about-proof__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: var(--space-5);
  border-left: 2px solid var(--teal);
  min-width: 0;
}

.about-proof__num {
  font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.about-proof__lab {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tan, #B58B5C);
  margin-top: var(--space-2);
}

.about-proof__note {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* The founder quote, pulled out of a grey box into something that reads as a
   statement rather than a sidebar widget. */
.about-quote {
  margin: 0;
  position: sticky;
  top: 7rem;
  padding: var(--space-8);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-top: 3px solid var(--teal);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(25, 46, 49, 0.06);
}

.about-quote blockquote {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--text-primary);
  quotes: none;
}

.about-quote blockquote::before { content: "\201C"; }
.about-quote blockquote::after { content: "\201D"; }

.about-quote figcaption {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-color);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

/* Eight credentials read better across four columns than stacked two-up in a
   sidebar, which is where they were competing with the story for width. */
.credentials--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-6);
}

.about-insurance {
  margin-top: var(--space-10);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.about-place {
  position: relative;
  height: 320px;
  overflow: hidden;
  background: var(--navy);
}

.about-place img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-place__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(27,42,74,0.88) 0%, rgba(27,42,74,0.35) 45%, rgba(27,42,74,0.05) 100%);
}

.about-place__inner {
  position: absolute;
  left: 50%;
  bottom: var(--space-6);
  transform: translateX(-50%);
  width: 100%;
}

.about-place__text {
  color: #fff;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

@media (max-width: 900px) {
  .about-content { grid-template-columns: 1fr; }
  .about-quote { position: static; }
}


/* --- How It Works: what / how / why -------------------------------------
   Each purchasable area is a .phase (the big ghost numeral and content
   column, already defined above). These add the price line and the three
   labelled blocks that carry the what, the how and the why, which is the
   thing the old page never had. */
.hiw-price {
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--teal);
  margin: 0 0 var(--space-6);
}

.hiw-price span {
  display: block;
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

html.dark .hiw-price { color: var(--db-accent-bright, #3FC5C5); }

.hiw-blocks {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
  padding-left: var(--space-5);
  border-left: 2px solid var(--border-color);
}

.hiw-block__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #B58B5C;
  margin: 0 0 var(--space-2);
}

.hiw-block__label--items {
  margin-top: var(--space-2);
  margin-bottom: var(--space-4);
}

.hiw-block__text {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--text-secondary);
}

.hiw-problem p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-top: var(--space-5);
  max-width: 44rem;
}

/* The credit conditions are a commitment, so they get a panel of their own
   rather than being set as small print at the foot of something else. */
.hiw-credit {
  padding: var(--space-10);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-top: 3px solid var(--teal);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(25, 46, 49, 0.06);
}

.hiw-credit__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-5);
}

.hiw-credit p {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.hiw-credit__note {
  font-size: var(--text-sm) !important;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-color);
}

.hiw-credit .btn { margin-top: var(--space-4); }

.hiw-who p {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.hiw-who__ins {
  font-size: var(--text-sm) !important;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-color);
  margin-bottom: var(--space-5) !important;
}

@media (max-width: 768px) {
  .hiw-blocks { padding-left: var(--space-4); }
  .hiw-credit { padding: var(--space-6); }
}


/* --- Pricing: the two flat-priced rungs before a retainer -----------------
   The pricing page's own meta description advertised the £3,000 Coordination
   Service, and the body never mentioned it or the £500 site visit. Anyone
   arriving from search found three retainers and no way in below £450. */
.pricing-before {
  margin: var(--space-12) 0 var(--space-8);
  padding: var(--space-8);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-top: 3px solid #B58B5C;
  border-radius: var(--radius-lg);
}

.pricing-before__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-6);
}

.pricing-before__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-8);
}

.pricing-before__item { min-width: 0; }

.pricing-before__price {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--teal);
  margin: 0;
}

.pricing-before__price span {
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-secondary);
}

html.dark .pricing-before__price { color: var(--db-accent-bright, #3FC5C5); }

.pricing-before__name {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #B58B5C;
  margin: var(--space-2) 0 var(--space-3);
}

.pricing-before__text {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}

.pricing-before__note {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-color);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.pricing-before__note a { color: var(--teal); text-decoration: underline; }
html.dark .pricing-before__note a { color: var(--db-accent-bright, #3FC5C5); }

/* The mechanism section describes what a retainer buys. Without this note a
   reader could reasonably assume the dashboard and the RFI cycle arrive with
   a Blueprints subscription or a one-off site visit. They do not. */
.hiw-tiers {
  max-width: 860px;
  margin: var(--space-10) auto 0;
  padding: var(--space-5) var(--space-6);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-left: 3px solid #B58B5C;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text-secondary);
}

.hiw-tiers strong { color: var(--text-primary); }


/* --- Brand watermark -----------------------------------------------------
   Several pages land on a lot of white. Rather than putting a photograph on
   each one, they carry the Hex360 mark itself as a watermark: the same eight
   bars as the logo, scaled up and bottom-aligned so they climb left to right
   and read as a programme bar chart, which is what we sell. Faint enough to
   be texture rather than an image.

   The side alternates page to page, starting with the homepage on the right,
   so it never feels like the same furniture on every screen. */
.brand-watermark {
  position: absolute;
  z-index: 0;
  opacity: 0.18;
  pointer-events: none;
  /* Dissolve into the page rather than stopping on a hard edge. */
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 92%);
  mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 92%);
}

.brand-watermark svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* The bars climb towards their own outer edge, so a left-hand watermark is
   mirrored. That keeps the tall bars out in the margin and the short ones,
   which start lower and fade out first, nearest the copy. Unmirrored, the
   tall end would land squarely behind the heading. */
.brand-watermark--left svg {
  transform: scaleX(-1);
}

/* Colour on a dark ground reads weaker, so lift it slightly. */
html.dark .brand-watermark {
  opacity: 0.26;
}

/* On the homepage it lives inside the hero and fills it. .hero already sets
   position: relative and overflow: hidden, so it can bleed off the edge. */
.hero .brand-watermark {
  top: 0;
  width: clamp(320px, 34vw, 520px);
  height: 100%;
}

.hero .brand-watermark--right { right: -3%; }
.hero .brand-watermark--left { left: -3%; }

/* The copy has to sit in front of it. A positioned element with z-index 0
   paints above in-flow content, so the container has to be lifted rather
   than the watermark pushed back. */
.hero .brand-watermark ~ .container {
  position: relative;
  z-index: 1;
}

/* Everywhere else it sits in the page body rather than a hero. Those hosts
   are not clipped, one of them contains a sticky element, and overflow:
   hidden would break it, so the watermark stays inside the edge instead of
   bleeding past it. */
.wm-host {
  position: relative;
}

.wm-host > .brand-watermark {
  /* Clear the fixed header. */
  top: 84px;
  width: clamp(340px, 33vw, 520px);
  height: clamp(500px, 72vh, 760px);
}

.wm-host > .brand-watermark--right { right: 0; }
.wm-host > .brand-watermark--left { left: 0; }

.wm-host > *:not(.brand-watermark) {
  position: relative;
  z-index: 1;
}

@media (max-width: 1099px) {
  /* Below this the copy runs close to full width, so the bars would sit
     under the text instead of beside it. */
  .brand-watermark { display: none; }
}