/* ============================================================
   FUTURE FIT CAREER CLARITY — styles.css
   Brand: Ignite Consultants
   Palette: Deep Emerald #006450 | Teal #008080 | Light Green #2ECC71
   Fonts: Cormorant Garamond (display) + DM Sans (body)
============================================================ */

/* -------- CSS VARIABLES -------- */
:root {
  /* Brand Colors */
  --color-emerald:       #006450;   /* Deep Emerald Green — primary brand */
  --color-teal:          #008080;   /* Medium Teal — secondary */
  --color-mint:          #2ECC71;   /* Light accent */
  --color-teal-light:    #e8f5f3;   /* Soft teal tint for backgrounds */
  --color-teal-mid:      #c5e8e2;   /* Mid tint */

  /* Neutrals */
  --color-white:         #ffffff;
  --color-off-white:     #f8faf9;   /* Subtle warm off-white */
  --color-cream:         #f3f7f5;   /* Very soft green-tinted cream */
  --color-text:          #1a2f2b;   /* Near-black with slight warmth */
  --color-text-muted:    #4a6963;   /* Muted teal-grey */
  --color-border:        #d4e8e3;   /* Soft border */

  /* Typography */
  --font-display:        'Cormorant Garamond', Georgia, serif;
  --font-body:           'DM Sans', -apple-system, sans-serif;

  /* Spacing */
  --section-padding:     96px;
  --container-max:       1160px;
  --container-pad:       24px;

  /* Radii */
  --radius-sm:           6px;
  --radius-md:           12px;
  --radius-lg:           20px;

  /* Shadows */
  --shadow-card:         0 4px 24px rgba(0, 100, 80, 0.08);
  --shadow-card-hover:   0 8px 40px rgba(0, 100, 80, 0.14);
  --shadow-nav:          0 2px 20px rgba(0, 100, 80, 0.10);

  /* Transitions */
  --transition:          0.25s ease;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

/* -------- CONTAINER -------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* -------- TYPOGRAPHY UTILITIES -------- */
.section-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: 14px;
}

.section-label.center { text-align: center; }
.section-label.light  { color: rgba(255,255,255,0.75); }

.section-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 400;
  line-height: 1.22;
  color: var(--color-text);
  margin-bottom: 20px;
}

.section-headline.center { text-align: center; }

.section-headline em {
  font-style: italic;
  color: var(--color-emerald);
}

.section-subtext {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  max-width: 580px;
  line-height: 1.75;
  margin-bottom: 56px;
}

.section-subtext.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* -------- BUTTONS -------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 14px 32px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-emerald);
  color: var(--color-white);
  border: 2px solid var(--color-emerald);
}
.btn-primary:hover {
  background: #004f40;
  border-color: #004f40;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 100, 80, 0.25);
}

.btn-secondary {
  background: transparent;
  color: var(--color-emerald);
  border: 2px solid rgba(0, 100, 80, 0.35);
}
.btn-secondary:hover {
  background: rgba(0, 100, 80, 0.06);
  border-color: var(--color-emerald);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--color-emerald);
  border: 2px solid var(--color-border);
}
.btn-outline:hover {
  border-color: var(--color-emerald);
  background: var(--color-teal-light);
  transform: translateY(-2px);
}

.btn-light {
  background: var(--color-white);
  color: var(--color-emerald);
  border: 2px solid var(--color-white);
  font-weight: 600;
}
.btn-light:hover {
  background: var(--color-cream);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.btn-light-outline {
  background: transparent;
  color: var(--color-white);
  border: 2px solid rgba(255,255,255,0.55);
}
.btn-light-outline:hover {
  background: rgba(255,255,255,0.12);
  border-color: var(--color-white);
  transform: translateY(-2px);
}

/* ============================================================
   NAVIGATION
============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--transition);
}

.nav.scrolled {
  box-shadow: var(--shadow-nav);
}

.nav-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: flex;
  align-items: center;
}

.nav-logo-img {
  height: 62px;
  width: auto;
  object-fit: contain;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.nav-links li a {
  transition: color var(--transition);
}

.nav-links li a:hover { color: var(--color-emerald); }

.nav-cta {
  display: inline-block;
  padding: 9px 22px;
  background: var(--color-emerald);
  color: var(--color-white) !important;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.88rem;
  transition: background var(--transition), transform var(--transition);
}
.nav-cta:hover {
  background: #004f40 !important;
  transform: translateY(-1px);
}

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: all var(--transition);
}

/* Mobile menu */
.nav-mobile {
  display: none;
  flex-direction: column;
  padding: 12px var(--container-pad) 20px;
  border-top: 1px solid var(--color-border);
  background: var(--color-white);
}
.nav-mobile.open { display: flex; }

.nav-mobile-link {
  padding: 12px 0;
  font-size: 1rem;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition);
}
.nav-mobile-link:hover { color: var(--color-emerald); }

.nav-mobile-cta {
  margin-top: 16px;
  text-align: center;
  background: var(--color-emerald);
  color: var(--color-white) !important;
  padding: 14px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  border-bottom: none !important;
}

/* ============================================================
   HERO
============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 96px;
  overflow: hidden;
  background: linear-gradient(155deg,
    #f0f8f5 0%,
    #e6f5f0 35%,
    #f8fcfb 70%,
    #ffffff 100%
  );
}

/* Decorative background shapes */
.hero-bg-shapes { position: absolute; inset: 0; pointer-events: none; }

.hero-shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.18;
}

.hero-shape-1 {
  width: 680px; height: 680px;
  background: radial-gradient(circle, var(--color-teal) 0%, transparent 70%);
  top: -180px; right: -160px;
}

.hero-shape-2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, var(--color-emerald) 0%, transparent 70%);
  bottom: -80px; left: -100px;
  opacity: 0.10;
}

.hero-shape-3 {
  width: 260px; height: 260px;
  background: radial-gradient(circle, var(--color-mint) 0%, transparent 70%);
  top: 40%; right: 12%;
  opacity: 0.12;
}

/* Hero content is one centered vertical group: logo mark, badge, headline,
   supporting paragraph, italic sentence, CTA buttons, credibility line. */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 740px;
  margin: 0 auto;
  text-align: center;
  padding-top: 60px;
  padding-bottom: 80px;
}

.hero-logo-mark {
  display: block;
  height: 118px;
  width: auto;
  margin: 0 auto 26px;
}

.hero-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-teal);
  background: rgba(0,128,128,0.09);
  padding: 7px 16px;
  border-radius: 100px;
  margin-bottom: 28px;
}

.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-text);
  margin-bottom: 26px;
  letter-spacing: -0.01em;
}

.hero-headline em {
  font-style: italic;
  color: var(--color-emerald);
}

.hero-sub {
  font-size: 1.12rem;
  color: var(--color-text-muted);
  line-height: 1.8;
  max-width: 600px;
  margin: 0 auto 24px;
}

/* Supporting sentence beneath the subheadline. Centered with the rest of the
   hero group; balanced wrapping keeps the sentence on two even lines, and the
   .nowrap-pair span guarantees "themselves first." is never split. */
.hero-note {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--color-emerald);
  line-height: 1.65;
  max-width: 640px;
  margin: 0 auto 38px;
  text-wrap: balance;
}

.hero-note .nowrap-pair {
  white-space: nowrap;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 32px;
}

.hero-credibility {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.65;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.hero-credibility strong {
  color: var(--color-emerald);
}

/* Scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}

.hero-scroll-line {
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, var(--color-teal), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.8); }
  50%       { opacity: 1;   transform: scaleY(1); }
}

/* ============================================================
   FOUNDER STORY
============================================================ */
.founder-story {
  padding: var(--section-padding) 0;
  background: var(--color-white);
}

.founder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.founder-visual {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.founder-card-accent {
  background: var(--color-cream);
  border-left: 3px solid var(--color-teal);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  position: relative;
}

.founder-quote-mark {
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 0.8;
  color: var(--color-teal);
  opacity: 0.35;
  margin-bottom: 12px;
}

.founder-pull-quote {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--color-emerald);
  line-height: 1.55;
}

.founder-photo-placeholder {
  background: var(--color-teal-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.founder-logo-img {
  max-height: 140px;
  width: auto;
  object-fit: contain;
  margin: 0 auto;
}

.founder-copy {
  padding: 8px 0;
}

.founder-copy p {
  color: var(--color-text-muted);
  font-size: 1.02rem;
  line-height: 1.8;
  margin-bottom: 18px;
}

.founder-sig {
  margin-top: 28px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-emerald);
  letter-spacing: 0.02em;
}

/* ============================================================
   WHAT YOU'LL WALK AWAY WITH
   Reuses the .insight-cards grid for the four Future Fit tools.
============================================================ */
.walkaway {
  padding: var(--section-padding) 0;
  background: var(--color-white);
}

.walkaway .insight-cards {
  margin-bottom: 0;
}

/* ============================================================
   THE DIFFERENCE
============================================================ */
.difference {
  padding: var(--section-padding) 0;
  background: var(--color-off-white);
}

.difference-header {
  text-align: center;
  max-width: 920px;
  margin: 0 auto 60px;
}

/* Comparison headline — each line stays intact from tablet width up so
   "You." never drops onto a line of its own. */
.difference-headline {
  font-size: clamp(1.7rem, 3.1vw, 2.55rem);
  line-height: 1.28;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.headline-line {
  display: inline-block;
}

@media (min-width: 768px) {
  .headline-line {
    white-space: nowrap;
  }
}

.difference-intro {
  font-size: 1.06rem;
  color: var(--color-text-muted);
  line-height: 1.8;
  max-width: 720px;
  margin: 0 auto;
}

.difference-intro strong {
  color: var(--color-text);
  font-weight: 500;
}

/* 4 insight cards */
.insight-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}

.insight-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 32px 24px;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition), transform var(--transition);
  border-top: 3px solid transparent;
}

.insight-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
  border-top-color: var(--color-teal);
}

.insight-icon {
  font-size: 1.4rem;
  color: var(--color-teal);
  opacity: 0.6;
  margin-bottom: 16px;
}

.insight-card h3 {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 10px;
}

.insight-card p {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}

.insight-card p + p {
  margin-top: 12px;
}

/* Compact skill list inside an insight card */
.insight-list {
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.insight-list li {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  padding-left: 16px;
  position: relative;
}

.insight-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  background: var(--color-teal);
  border-radius: 50%;
  opacity: 0.7;
}

/* Closing line that ties a card back to the Future Fit language */
.insight-card .insight-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--color-emerald);
  line-height: 1.5;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

/* Two-up variant — "where most assessments stop" vs "where Future Fit keeps going" */
.insight-cards--two {
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 60px;
}

/* ============================================================
   ECOSYSTEM FLOW — connected sequence of named stages
   Used for understanding → reflection → planning → execution
   and for the full Future Fit ecosystem timeline.
============================================================ */
.ff-flow {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  max-width: 1000px;
  margin: 0 auto 56px;
}

.ff-flow-node {
  flex: 1 1 0;
  min-width: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.ff-flow-node:hover {
  border-color: var(--color-teal-mid);
  box-shadow: var(--shadow-card);
}

.ff-flow-step {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--color-teal);
}

.ff-flow-name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-text);
}

/* Longer stage labels */
.ff-flow-name--sm {
  font-size: 0.92rem;
}

/* Short description inside an ecosystem stage */
.ff-flow-desc {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Ecosystem variant — five stages, each with a short description */
.ff-flow--eco {
  max-width: 1112px;
}

.ff-flow--eco .ff-flow-node {
  padding: 22px 16px;
  justify-content: flex-start;
}

.ff-flow-arrow {
  align-self: center;
  flex: 0 0 auto;
  font-size: 1rem;
  color: var(--color-teal);
  opacity: 0.5;
}

/* Conceptual variant — the four movements of the system */
.ff-flow--concept {
  max-width: 760px;
  margin-bottom: 64px;
}

.ff-flow--concept .ff-flow-node {
  background: transparent;
  border-style: dashed;
  padding: 16px 12px;
}

.ff-flow--concept .ff-flow-name {
  color: var(--color-emerald);
}

/* Intro above the ecosystem timeline */
.ff-flow-heading {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 32px;
}

.ff-flow-heading p {
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.75;
}

/* Emotional pull quote */
.difference-pullquote {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 820px;
  margin: 0 auto;
}

.pullquote-line {
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.difference-pullquote blockquote {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-style: italic;
  color: var(--color-emerald);
  text-align: center;
  line-height: 1.6;
  flex-shrink: 0;
  max-width: 560px;
}

/* ============================================================
   HOW IT WORKS
============================================================ */
.how-it-works {
  padding: var(--section-padding) 0;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  position: relative;
}

/* Connecting line between steps */
.steps::before {
  content: '';
  position: absolute;
  top: 38px;
  left: calc(16.67% + 20px);
  right: calc(16.67% + 20px);
  height: 1px;
  background: linear-gradient(to right, var(--color-teal), var(--color-mint), var(--color-teal));
  opacity: 0.3;
  z-index: 0;
}

.step-card {
  position: relative;
  z-index: 1;
  background: var(--color-cream);
  border-radius: var(--radius-md);
  padding: 36px 28px;
  transition: box-shadow var(--transition), transform var(--transition);
}

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

.step-number {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 300;
  color: var(--color-teal);
  opacity: 0.4;
  line-height: 1;
  margin-bottom: 20px;
  display: inline-block;
  position: relative;
  z-index: 1;
  background: var(--color-cream);
}

.step-body h3 {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 12px;
  line-height: 1.3;
}

.step-body p {
  font-size: 0.96rem;
  color: var(--color-text-muted);
  line-height: 1.75;
}

/* Stacked variant — five steps with room for detail lists */
.steps--stacked {
  grid-template-columns: 1fr;
  gap: 18px;
}

.steps--stacked::before {
  display: none;
}

.steps--stacked .step-card {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 26px;
  align-items: start;
  padding: 32px 34px;
}

.step-num-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.steps--stacked .step-number {
  margin-bottom: 0;
  font-size: 3rem;
}

.steps--stacked .step-body h3 {
  margin-bottom: 10px;
}

.step-icon {
  font-size: 1.1rem;
  color: var(--color-teal);
  opacity: 0.55;
  line-height: 1;
  margin-bottom: 10px;
}

.step-num-col .step-icon {
  margin-bottom: 0;
}

/* Detail lists inside a step */
.step-bullets {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 26px;
}

.step-bullets li {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  padding-left: 16px;
  position: relative;
}

.step-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  background: var(--color-teal);
  border-radius: 50%;
  opacity: 0.7;
}

/* ============================================================
   PACKAGES / PRICING
============================================================ */
.packages {
  padding: var(--section-padding) 0;
  background: var(--color-off-white);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  /* stretch (not start) so the three cards share one height and the buttons
     line up across the row */
  align-items: stretch;
}

.pricing-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 40px 32px 36px;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition), transform var(--transition);
  position: relative;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
}

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

/* Featured / Most Popular card */
.pricing-card--featured {
  background: var(--color-emerald);
  color: var(--color-white);
  border-color: var(--color-emerald);
  transform: scale(1.03);
  box-shadow: 0 12px 48px rgba(0, 100, 80, 0.25);
}

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

.pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-mint);
  color: #0a3d30;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 18px;
  border-radius: 100px;
  white-space: nowrap;
}

.pricing-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: 8px;
}

.pricing-card--featured .pricing-label {
  color: rgba(255,255,255,0.7);
}

.pricing-name {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: 8px;
  line-height: 1.25;
}

.pricing-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--color-teal);
  margin-bottom: 18px;
  line-height: 1.4;
}

.pricing-card--featured .pricing-tagline {
  color: rgba(255,255,255,0.82);
}

.pricing-card--featured .pricing-name {
  color: var(--color-white);
}

.pricing-price {
  font-family: var(--font-display);
  font-size: 3.4rem;
  font-weight: 300;
  color: var(--color-emerald);
  line-height: 1;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
}

.pricing-card--featured .pricing-price {
  color: var(--color-white);
}

.price-dollar {
  font-size: 1.4rem;
  font-weight: 400;
  margin-top: 8px;
  margin-right: 3px;
  opacity: 0.65;
}

.pricing-desc {
  font-size: 0.93rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}

.pricing-card--featured .pricing-desc {
  color: rgba(255,255,255,0.78);
  border-bottom-color: rgba(255,255,255,0.18);
}

.pricing-features {
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* absorbs the slack in shorter cards so every button sits at the card bottom */
  flex: 1 1 auto;
}

.pricing-features li {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}

.pricing-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background: var(--color-teal);
  border-radius: 50%;
  opacity: 0.7;
}

.pricing-card--featured .pricing-features li {
  color: rgba(255,255,255,0.82);
}

.pricing-card--featured .pricing-features li::before {
  background: var(--color-mint);
  opacity: 0.85;
}

.pricing-btn {
  width: 100%;
  text-align: center;
  padding: 15px;
}

/* Override outline button on featured card */
.pricing-card--featured .btn-primary {
  background: var(--color-white);
  color: var(--color-emerald);
  border-color: var(--color-white);
}
.pricing-card--featured .btn-primary:hover {
  background: var(--color-cream);
  box-shadow: 0 6px 20px rgba(0,0,0,0.14);
}

/* ------------------------------------------------------------
   INFORMATION PANEL — one merged panel above the three package cards.
   Section 1 states the ChatGPT requirement (it applies to every package,
   so it is never attached to a single card); a hairline divider separates
   it from Section 2, the Founding Family invitation. Deliberately calm:
   soft mint wash, hairline border, centred, no urgency, no sale graphics.
------------------------------------------------------------ */
.info-panel {
  /* ~13% wider than the original 780px, so the panel sits closer to the width
     of the three-card group beneath it while staying clearly inset from it
     (the grid is 1112px at full container width) */
  max-width: 880px;
  margin: 0 auto 56px;
  padding: 44px 48px 40px;
  text-align: center;
  background: rgba(46, 204, 113, 0.07);
  border: 1px solid rgba(46, 204, 113, 0.24);
  border-radius: var(--radius-lg);
}

/* Information mark, centred above the requirement heading */
.info-panel-icon {
  width: 34px;
  height: 34px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--color-emerald);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 34px;
  text-align: center;
}

.info-panel-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-emerald);
  line-height: 1.3;
  margin-bottom: 14px;
}

/* Slightly larger than body copy so neither section is skimmed past */
.info-panel-body {
  max-width: 620px;
  margin: 0 auto;
  font-size: 1.04rem;
  line-height: 1.75;
  color: var(--color-text);
}

.info-panel-body + .info-panel-body {
  margin-top: 8px;
}

/* Subtle divider between the requirement and the invitation */
.info-panel-divider {
  height: 1px;
  max-width: 220px;
  margin: 38px auto;
  border: 0;
  background: rgba(0, 100, 80, 0.16);
}

/* The two offers — equal width side by side, stacked on narrow screens */
.founding-offers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin: 28px 0 24px;
}

.founding-offer-item {
  flex: 1 1 250px;
  /* grows with the wider panel so the row stays balanced rather than leaving a
     wide gutter either side */
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 26px 24px;
  background: var(--color-white);
  border: 1px solid rgba(0, 100, 80, 0.16);
  border-radius: var(--radius-md);
}

.founding-offer-pkg {
  font-family: var(--font-display);
  font-size: 1.14rem;
  color: var(--color-emerald);
  line-height: 1.3;
  margin-bottom: 8px;
}

/* One step up from the surrounding copy so the saving is the first thing read */
.founding-offer-save {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.3;
}

.founding-offer-use {
  margin-top: 14px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* The code is the only bold text, and one click selects it for copying */
.founding-offer-code {
  margin-top: 4px;
  font-size: 1.04rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-emerald);
  white-space: nowrap;
  -webkit-user-select: all;
  user-select: all;
}

.info-panel-note {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* Guidance beneath the pricing grid */
.pricing-footnote {
  margin: 44px auto 0;
  max-width: 560px;
  text-align: center;
  font-size: 0.92rem;
  color: var(--color-text-muted);
  line-height: 1.75;
}

/* ============================================================
   TESTIMONIALS
============================================================ */
.testimonials {
  padding: var(--section-padding) 0;
  background: var(--color-white);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 12px;
}

.testimonial-card {
  background: var(--color-cream);
  border-radius: var(--radius-md);
  padding: 36px 28px;
  position: relative;
  transition: box-shadow var(--transition), transform var(--transition);
}

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

.testimonial-quote-icon {
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 0.8;
  color: var(--color-teal);
  opacity: 0.25;
  margin-bottom: 16px;
}

.testimonial-text {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-style: italic;
  color: var(--color-text);
  line-height: 1.7;
  margin-bottom: 20px;
}

.testimonial-attribution {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--color-teal);
  letter-spacing: 0.04em;
}

/* ============================================================
   FAQ
============================================================ */
.faq {
  padding: var(--section-padding) 0;
  background: var(--color-off-white);
}

.faq-inner {}

.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--color-border);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--color-text);
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: color var(--transition);
}

.faq-question:hover { color: var(--color-emerald); }

/* Custom + / – icon */
.faq-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  flex-shrink: 0;
  position: relative;
  transition: border-color var(--transition), background var(--transition);
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: var(--color-text-muted);
  border-radius: 2px;
  transition: all var(--transition);
}

.faq-icon::before {
  width: 10px; height: 1.5px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

.faq-icon::after {
  width: 1.5px; height: 10px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

.faq-question[aria-expanded="true"] .faq-icon {
  border-color: var(--color-teal);
  background: var(--color-teal-light);
}

.faq-question[aria-expanded="true"] .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.faq-question[aria-expanded="true"] .faq-icon::before {
  background: var(--color-teal);
}

.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease, padding 0.25s ease;
}

.faq-answer.open {
  /* Headroom for the longest answer (the package comparison) at narrow
     mobile widths, so no answer is ever clipped when expanded. */
  max-height: 1200px;
  padding-bottom: 24px;
}

.faq-answer p {
  font-size: 0.97rem;
  color: var(--color-text-muted);
  line-height: 1.8;
}

.faq-answer p + p {
  margin-top: 14px;
}

.faq-answer p strong {
  color: var(--color-text);
  font-weight: 600;
}

/* ============================================================
   FINAL CTA
============================================================ */
.final-cta {
  position: relative;
  padding: var(--section-padding) 0;
  background: linear-gradient(135deg,
    var(--color-emerald) 0%,
    #005546 40%,
    #004a3e 100%
  );
  overflow: hidden;
}

.final-cta-shapes { position: absolute; inset: 0; pointer-events: none; }

.cta-shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.12;
}

.cta-shape-1 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, var(--color-mint) 0%, transparent 70%);
  top: -180px; right: -100px;
}

.cta-shape-2 {
  width: 360px; height: 360px;
  background: radial-gradient(circle, var(--color-teal) 0%, transparent 70%);
  bottom: -100px; left: -80px;
  opacity: 0.18;
}

.final-cta-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

.final-cta-headline {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.5vw, 3.4rem);
  font-weight: 400;
  color: var(--color-white);
  line-height: 1.22;
  margin-bottom: 20px;
}

.final-cta-headline em {
  font-style: italic;
  color: var(--color-mint);
}

.final-cta-sub {
  font-size: 1.06rem;
  color: rgba(255,255,255,0.75);
  max-width: 540px;
  margin: 0 auto 40px;
  line-height: 1.75;
}

.final-cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.final-cta-note {
  font-size: 0.86rem;
  color: rgba(255,255,255,0.55);
}

.final-cta-note a {
  color: rgba(255,255,255,0.8);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}

.final-cta-note a:hover { color: var(--color-white); }

/* ============================================================
   FOOTER
============================================================ */
.footer {
  background: var(--color-text);
  padding: 52px 0 36px;
  color: rgba(255,255,255,0.65);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.footer-logo-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-logo {
  height: 54px;
  width: auto;
  object-fit: contain;
}

.footer-wordmark {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-white);
}

.footer-brand-text {
  font-size: 0.88rem;
  line-height: 1.85;
  color: rgba(255,255,255,0.6);
}

.footer-brand-text strong {
  color: rgba(255,255,255,0.9);
  font-weight: 500;
}

.footer-links {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-links a {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  transition: color var(--transition);
}

.footer-links a:hover { color: rgba(255,255,255,0.9); }

.footer-coming-soon {
  font-size: 0.85rem;
  font-style: italic;
  color: rgba(255,255,255,0.38);
  max-width: 480px;
}

.footer-copy {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.28);
}

/* ============================================================
   ANIMATIONS — Fade-in on scroll
============================================================ */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

.fade-up-delay-1 { transition-delay: 0.1s; }
.fade-up-delay-2 { transition-delay: 0.2s; }
.fade-up-delay-3 { transition-delay: 0.3s; }

/* ============================================================
   RESPONSIVE — TABLET (< 1024px)
============================================================ */
@media (max-width: 1023px) {
  :root { --section-padding: 72px; }

  .founder-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

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

  .insight-cards--two {
    max-width: 620px;
  }

  /* Flows stack vertically — arrows rotate to point down */
  .ff-flow {
    flex-direction: column;
    max-width: 420px;
    gap: 8px;
  }

  .ff-flow-arrow {
    transform: rotate(90deg);
  }

  .steps {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .steps::before { display: none; }

  .steps--stacked {
    gap: 16px;
  }

  .steps--stacked .step-card {
    grid-template-columns: 72px 1fr;
    gap: 20px;
    padding: 30px 26px;
  }

  .steps--stacked .step-number { font-size: 2.7rem; }

  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin: 0 auto;
  }

  /* Information panel aligns with the single-column card stack; the two offer
     cards stack rather than squeeze */
  .info-panel {
    max-width: 460px;
    padding: 36px 30px 32px;
  }

  .founding-offers {
    flex-direction: column;
  }

  .founding-offer-item {
    max-width: none;
  }

  .pricing-card--featured {
    transform: none;
  }
  .pricing-card--featured:hover {
    transform: translateY(-4px);
  }

  .testimonial-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin: 0 auto;
  }
}

/* ============================================================
   RESPONSIVE — MOBILE (< 768px)
============================================================ */
@media (max-width: 767px) {
  :root {
    --section-padding: 56px;
    --container-pad: 20px;
  }

  /* Nav */
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }

  /* Hero */
  .hero { min-height: auto; padding-top: 88px; }
  .hero-content { padding-top: 52px; padding-bottom: 64px; }
  .hero-logo-mark { height: 92px; margin-bottom: 22px; }
  .hero-buttons { flex-direction: column; }
  .hero-buttons .btn { width: 100%; text-align: center; }
  .hero-scroll { display: none; }

  /* Insight cards */
  .insight-cards {
    grid-template-columns: 1fr;
  }

  .insight-cards--two {
    grid-template-columns: 1fr;
  }

  /* Hero supporting sentence */
  .hero-note {
    font-size: 1.05rem;
  }

  /* Pull quote */
  .difference-pullquote {
    flex-direction: column;
    gap: 16px;
  }
  .pullquote-line { width: 60px; height: 1px; }

  /* Steps — number stacks above the copy, detail lists go single column */
  .steps--stacked .step-card {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 30px 24px;
  }

  .step-num-col {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
  }

  .steps--stacked .step-number { font-size: 2.4rem; }

  .step-bullets {
    grid-template-columns: 1fr;
  }

  /* Information panel — full width, generous but tighter padding */
  .info-panel {
    max-width: none;
    padding: 32px 22px 28px;
    margin-bottom: 42px;
  }

  .info-panel-icon {
    width: 30px;
    height: 30px;
    font-size: 1.08rem;
    line-height: 30px;
    margin-bottom: 14px;
  }

  .info-panel-title { font-size: 1.32rem; }
  /* still a step above mobile body copy (0.92–0.95rem) */
  .info-panel-body { font-size: 1.01rem; }
  .info-panel-divider { margin: 30px auto; }
  .founding-offers { gap: 14px; margin: 24px 0 20px; }
  .founding-offer-item { padding: 22px 20px 20px; }
  .founding-offer-pkg { font-size: 1.08rem; }
  .founding-offer-save { font-size: 1.14rem; }
  .founding-offer-code { font-size: 1rem; }
  .info-panel-note { font-size: 0.92rem; }

  /* FAQ */
  .faq-question { font-size: 0.96rem; }

  /* Final CTA buttons */
  .final-cta-buttons { flex-direction: column; align-items: center; }
  .final-cta-buttons .btn { width: 100%; max-width: 320px; text-align: center; }

  /* Footer links */
  .footer-links { gap: 16px; }

  /* Section headline sizing */
  .section-headline { font-size: 1.85rem; }

  /* Comparison headline — balanced wrapping keeps "You." off a line by itself */
  .difference-headline { font-size: 1.6rem; }
}

@media (max-width: 480px) {
  .hero-headline { font-size: 2.2rem; }
  .final-cta-headline { font-size: 1.9rem; }
  .pricing-card { padding: 32px 22px; }
}

/* ============================================================
   EMAIL ADDRESS CONFIRMATION
   Brief confirmation shown when an email link is tapped, so the
   address is available even when the device has no mail app to
   hand the link off to. Overlays the page; shifts no layout.
============================================================ */
.email-toast {
  position: fixed;
  z-index: 200;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 12px);
  max-width: calc(100% - 32px);
  padding: 14px 22px;
  border-radius: var(--radius-md);
  background: var(--color-emerald);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 8px 32px rgba(0, 100, 80, 0.28);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-white);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
}

.email-toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  .email-toast { transition: opacity var(--transition); }
  .email-toast,
  .email-toast.visible { transform: translate(-50%, 0); }
}