/* ═══════════════════════════════════════════════════════════════
   TLF landing.css — Landing page components
   ═══════════════════════════════════════════════════════════════ */

/* ── HERO ───────────────────────────────────────── */
.hero {
  text-align:center; padding:7rem 1.5rem 5rem;
  max-width:820px; margin:0 auto; background:var(--white);
}
.hero h1 {
  font-family:var(--font-serif); font-size:3rem; font-weight:300;
  color:var(--dark); letter-spacing:-0.03em; line-height:1.1; margin-bottom:1.5rem;
}
.hero .desc { color:var(--text-dim); font-size:1.1rem; max-width:540px; margin:0 auto 2.5rem; line-height:1.6; }
.hero-trust { margin-top:3.5rem; color:var(--text-muted); font-size:0.78rem; letter-spacing:0.06em; }
.hero-trust .divider { display:inline-block; width:32px; height:1px; background:var(--border); vertical-align:middle; margin:0 1rem; }

/* ── PAIN POINTS ────────────────────────────────── */
.pain-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:0; margin-top:3rem; border-top:1px solid var(--border); border-left:1px solid var(--border); }
.pain-card {
  background:var(--white); padding:2rem 1.5rem; text-align:left;
  transition:background 0.25s; border-right:1px solid var(--border); border-bottom:1px solid var(--border);
}
.pain-card:hover { background:var(--off-white); border-bottom-color:var(--coral); }
.pain-card:hover .pain-num { color:var(--coral); opacity:1; }
.pain-num { font-family:var(--font-serif); font-size:2rem; font-weight:400; color:var(--coral); margin-bottom:0.75rem; opacity:0.4; transition:all 0.25s; }
.pain-card .title { font-weight:500; color:var(--dark); font-size:0.88rem; letter-spacing:0.01em; }
.pain-cta { text-align:center; margin-top:2.5rem; }
.pain-cta a { color:var(--teal-dim); text-decoration:underline; font-weight:600; font-size:0.9rem; letter-spacing:0.02em; text-underline-offset:6px; }
.pain-cta a:hover { color:var(--coral); }

/* ── ASSESSMENT WIZARD ──────────────────────────── */
#wizard { background:var(--off-white); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }

/* ── HOW IT WORKS ───────────────────────────────── */
.how-grid { display:grid; grid-template-columns:1fr 40px 1fr 40px 1fr; align-items:start; margin-top:2.5rem; }
.how-step { text-align:center; padding:0 1rem; }
.how-num {
  width:44px; height:44px; border:2px solid var(--teal); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-serif); font-weight:500; color:var(--teal-dim);
  font-size:1.1rem; margin:0 auto 0.75rem; transition:all 0.25s;
}
.how-step:hover .how-num { color:var(--coral); border-color:var(--coral); }
.how-step h3 { font-family:var(--font-serif); font-weight:500; color:var(--dark); margin-bottom:0.4rem; font-size:1rem; }
.how-step p { color:var(--text-dim); font-size:0.85rem; }
.how-arrow { display:flex; align-items:center; justify-content:center; padding-top:0.5rem; color:var(--text-muted); font-size:1.3rem; }

/* ── TESTIMONIALS ───────────────────────────────── */
.testimonial-carousel { max-width:700px; margin:2.5rem auto 0; }
.testimonial-card {
  background:var(--off-white); border-radius:var(--radius);
  padding:2.5rem; text-align:center; display:none;
}
.testimonial-card.active { display:block; animation:fadeSlide 0.4s ease; }
.testimonial-card::before { content:'\201C'; font-family:Georgia,serif; font-size:5rem; color:var(--coral); opacity:0.25; position:absolute; top:-1rem; left:-0.3rem; line-height:1; pointer-events:none; }
.testimonial-card .quote { font-size:1.05rem; color:var(--text-dim); line-height:1.75; margin-bottom:1.5rem; font-style:italic; }
.testimonial-card .author { font-size:0.85rem; color:var(--text-muted); }
.testimonial-card .author strong { color:var(--dark); }
.testimonial-dots { display:flex; justify-content:center; gap:0.5rem; margin-top:1.25rem; }
.testimonial-dot { width:8px; height:8px; border-radius:50%; background:var(--border-strong); cursor:pointer; border:none; transition:background 0.2s; }
.testimonial-dot.active { background:var(--teal); }

/* ── TEAM ───────────────────────────────────────── */
.team-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:1.5rem; margin-top:2.5rem; }
.team-card {
  background:var(--off-white); border-radius:var(--radius);
  padding:2rem 1.5rem; text-align:center; transition:all 0.25s;
  display:flex; flex-direction:column; align-items:center;
}
.team-card:hover { background:var(--white); border-color:var(--green); }
.team-photo {
  width:64px; height:64px; border-radius:50%; overflow:hidden;
  margin:0 auto 0.75rem; flex-shrink:0; border:1px solid var(--border);
}
.team-photo img { width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.team-card h3 { font-family:var(--font-serif); font-weight:500; font-size:1rem; color:var(--dark); margin-bottom:0.2rem; }
.team-card .role { font-size:0.75rem; color:var(--teal-dim); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:0.75rem; font-weight:600; }
.team-card .bio { font-size:0.85rem; color:var(--text-dim); line-height:1.6; margin-bottom:1rem; }
.team-video-link { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.75rem; color:var(--coral); text-decoration:none; font-weight:500; text-transform:uppercase; letter-spacing:0.06em; transition:color 0.2s; margin-top:auto; padding-top:0.75rem; }
.team-video-link:hover { color:var(--coral-dim); }
.team-video-link .play-icon { width:20px; height:20px; border-radius:50%; border:1.5px solid var(--coral); display:inline-flex; align-items:center; justify-content:center; font-size:0.55rem; }
.team-video-link .close-icon { display:none; }
.team-video-embed { display:none; width:100%; margin-top:0.75rem; }
.team-video-embed.open { display:block; }
.team-video-embed iframe { width:100%; aspect-ratio:16/9; border:none; border-radius:var(--radius-sm); }

/* ── SERVICES GRID ──────────────────────────────── */
.svc-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:1rem; margin-top:2.5rem; }
.svc-card { background:var(--off-white); border-radius:var(--radius-sm); padding:1.75rem; border-left:3px solid var(--teal); transition:all 0.25s; }
.svc-card:hover { background:var(--white); border-left-color:var(--coral); }
.svc-card h3 { font-family:var(--font-serif); font-weight:500; color:var(--dark); font-size:1rem; margin-bottom:0.25rem; }
.svc-card .dur { font-size:0.72rem; color:var(--teal-dim); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:0.75rem; font-weight:500; }
.svc-card .svc-link { color:var(--teal-dim); text-decoration:underline; font-size:0.85rem; font-weight:600; }
.svc-card .svc-link:hover { color:var(--coral); }

/* ── RESOURCES ──────────────────────────────────── */
.res-section { margin-top:2.5rem; }
.res-podcast {
  background:linear-gradient(135deg, rgba(104,204,209,0.08) 0%, rgba(115,173,33,0.06) 100%);
  border:1px solid var(--border);
  border-left:4px solid var(--teal);
  border-radius:4px;
  padding:2rem 2.5rem;
  display:flex; align-items:center; gap:2.5rem;
  margin-bottom:2.5rem;
}
.res-podcast-icon {
  width:56px; height:56px; border-radius:50%;
  background:var(--teal); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; flex-shrink:0;
}
.res-podcast-body { flex:1; }
.res-podcast-body h3 { font-family:var(--font-serif); font-weight:500; font-size:1.2rem; color:var(--dark); margin-bottom:0.4rem; }
.res-podcast-body p { color:var(--text-dim); font-size:0.9rem; line-height:1.6; max-width:600px; }
.res-podcast-body a { display:inline-block; margin-top:0.75rem; color:var(--teal-dim); text-decoration:underline; font-weight:600; font-size:0.85rem; letter-spacing:0.02em; text-underline-offset:5px; }
.res-podcast-body a:hover { color:var(--coral); }

.res-split { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-bottom:2rem; }
.res-col { padding:1.5rem 0; }
.res-col h4 { font-family:var(--font-serif); font-weight:500; font-size:0.85rem; color:var(--dark); margin-bottom:1rem; padding-bottom:0.6rem; border-bottom:2px solid var(--teal); display:inline-block; }
.res-item { display:flex; align-items:center; gap:0.8rem; padding:0.55rem 0; border-bottom:1px solid var(--border); font-size:0.88rem; color:var(--text-dim); }
.res-item:last-child { border-bottom:none; }
.res-item .dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.dot-teal { background:var(--teal); }
.dot-green { background:var(--green); }
.dot-coral { background:var(--coral); }

.res-social {
  display:flex; align-items:center; gap:1.5rem;
  padding:1.25rem 2rem; background:var(--off-white);
  border-radius:4px; flex-wrap:wrap;
}
.res-social .label { font-size:0.8rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.08em; font-weight:500; flex-shrink:0; }
.res-social a { color:var(--teal-dim); text-decoration:underline; font-weight:500; font-size:0.85rem; text-underline-offset:4px; }
.res-social a:hover { color:var(--coral); }

/* ── ABOUT ──────────────────────────────────────── */
.about-row { display:flex; gap:3rem; align-items:flex-start; margin-top:2.5rem; }
.about-photo { width:180px; height:180px; border-radius:50%; overflow:hidden; border:1px solid var(--border); flex-shrink:0; }
.about-photo img { width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.about-text { flex:1; }
.about-text p { color:var(--text-dim); font-size:0.95rem; margin-bottom:0.75rem; line-height:1.7; }

/* ── CTA BOTTOM ─────────────────────────────────── */
.cta-bottom {
  text-align:center; padding:4rem 1.5rem;
  background:var(--off-white); border-radius:var(--radius);
}
.cta-bottom h2 { font-family:var(--font-serif); font-weight:300; font-size:1.5rem; color:var(--dark); margin-bottom:0.75rem; }
.cta-bottom p { color:var(--text-dim); max-width:500px; margin:0 auto 1.75rem; }

/* ── SUBSCRIPTION MODAL ─────────────────────────── */
.subscription-overlay {
  display:none; position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.5); z-index:1000;
  align-items:center; justify-content:center; backdrop-filter:blur(4px);
}
.subscription-overlay.show { display:flex; }
.subscription-modal {
  box-shadow:0 20px 60px rgba(0,0,0,0.12);
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius); padding:2.5rem; max-width:420px; width:90%;
  text-align:center; animation:fadeSlide 0.3s ease;
}
.lock-logo { height:32px; width:auto; display:block; margin:0 auto 1rem; }
.subscription-modal .lock-icon {
  width:48px; height:48px; border:1px solid var(--teal);
  border-radius:50%; margin:0 auto 1rem;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
}
.subscription-modal h3 { font-family:var(--font-serif); font-weight:500; font-size:1.1rem; color:var(--dark); margin-bottom:0.75rem; }
.subscription-modal p { color:var(--text-dim); font-size:0.9rem; margin-bottom:1.25rem; }
.subscription-modal .plan-card {
  background:var(--off-white); border-radius:var(--radius-sm); padding:1rem;
  text-align:left; cursor:pointer; transition:background 0.2s; margin-bottom:0.75rem;
}
.subscription-modal .plan-card:hover { background:rgba(0,0,0,0.03); }
.subscription-modal .plan-card .plan-name { font-weight:600; color:var(--dark); margin-bottom:0.2rem; }
.subscription-modal .plan-card .plan-price { color:var(--dark); font-size:1rem; font-weight:600; }
.subscription-modal .plan-card .plan-desc { font-size:0.78rem; color:var(--text-muted); margin-top:0.2rem; }
.subscription-modal .close-modal {
  background:transparent; color:var(--text-muted); border:1px solid var(--border);
  padding:0.5rem 1.25rem; border-radius:1px; font-size:0.72rem; cursor:pointer;
  text-transform:uppercase; letter-spacing:0.06em;
}
.subscription-modal .close-modal:hover { color:var(--dark); border-color:var(--border-strong); }

/* ── WORKBOOK PILLS ─────────────────────────────── */
.workbook-pill {
  display:inline-block; margin-top:0.75rem; padding:0.4rem 0.9rem;
  border-radius:var(--radius-sm); font-size:0.72rem;
  text-transform:uppercase; letter-spacing:0.06em;
  text-decoration:none; transition:all 0.2s;
  font-weight:600; font-family:var(--font-serif);
}
.workbook-free { border:1px solid var(--green); color:var(--green-dim); background:transparent; cursor:pointer; }
.workbook-free:hover { background:var(--green); color:var(--white); border-color:var(--green); }
.workbook-locked { border:1px solid var(--coral-dim); color:var(--coral-dim); background:transparent; cursor:pointer; }
.workbook-locked:hover { border-color:var(--coral); color:var(--coral); }

/* ── LANDING RESPONSIVE ─────────────────────────── */
@media (max-width:768px) {
  .hero h1 { font-size:1.8rem; }
  .hero .desc { font-size:0.95rem; max-width:100%; }
  .hero { padding:4rem 1rem 2rem; }

  .pain-grid { grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
  .pain-card { padding:1.25rem 1rem; }

  .how-grid { grid-template-columns:1fr; gap:1.25rem; }
  .how-arrow { display:none; }

  .team-grid { grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:1rem; }
  .team-photo { width:56px; height:56px; margin:0 auto 0.6rem; }
  .team-card { text-align:center; padding:1.25rem; }
  .team-card .bio { font-size:0.8rem; }
  .team-video-link { font-size:0.7rem; }

  .svc-grid { grid-template-columns:1fr; max-width:500px; margin-left:auto; margin-right:auto; }

  .about-row { flex-direction:column; gap:1.5rem; text-align:center; }
  .about-photo { margin:0 auto; width:160px; height:160px; }
  .about-text p { font-size:0.88rem; }

  .cta-bottom { padding:3rem 0; }
  .cta-bottom h2 { font-size:1.3rem; }

  .res-podcast { flex-direction:column; text-align:center; gap:1rem; padding:1.5rem; }
  .res-split { grid-template-columns:1fr; gap:0; }
  .res-col { padding:0.75rem 0; }
  .res-social { flex-direction:column; align-items:flex-start; gap:0.75rem; }

  .testimonial-carousel { max-width:100%; }
  .testimonial-card { padding:1rem; }
  .testimonial-card::before { font-size:3.5rem; top:-0.5rem; left:-0.2rem; opacity:0.15; }
  .testimonial-card .quote { font-size:0.92rem; }
}

@media (max-width:480px) {
  .hero h1 { font-size:1.5rem; }
  .hero .desc { font-size:0.85rem; }
  .pain-grid { grid-template-columns:1fr 1fr; }
  .pain-card { padding:1rem 0.75rem; }
  .pain-num { font-size:1.5rem; margin-bottom:0.5rem; }
  .pain-card .title { font-size:0.78rem; }
  .how-num { width:36px; height:36px; font-size:0.95rem; }
  .team-grid { grid-template-columns:1fr; max-width:320px; margin-left:auto; margin-right:auto; }
  .team-photo { width:48px; height:48px; }
  .team-card { padding:0.85rem 0.75rem; }
  .team-card h3 { font-size:0.92rem; }
  .team-card .role { font-size:0.68rem; }
  .about-photo { width:140px; height:140px; }
  .svc-grid { grid-template-columns:1fr; }
  .svc-card { padding:1.25rem; }
}