/*
 * about-page.css — page-scoped styles for /about.html (s2 visual anchor).
 * Source: dev/from_kate/donors/about-the-process-v3.html (lines 10-535).
 * Strips: :root (in tokens.css), html/body (in base inline), nav and footer
 * (chrome lives in templates/base.html.j2). Remainder is verbatim from v3.
 */


/* HERO */
.hero{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;padding:7rem 2rem 5rem;
  position:relative;overflow:hidden;
  background-image:url(/img/hero-bg.png);
  background-size:cover;background-position:center;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(
    to bottom,
    rgba(60,21,96,0.18) 0%,
    rgba(60,21,96,0.08) 40%,
    rgba(60,21,96,0.22) 100%
  );
  pointer-events:none;
}
.hero-content{position:relative;z-index:1;}
.hero-eyebrow{
  font-family:var(--sans);font-size:0.72rem;font-weight:600;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--purple-deep);margin-bottom:1.8rem;
  background:rgba(255,255,255,0.55);
  display:inline-block;padding:0.3rem 1.2rem;border-radius:1px;
}
.hero h1{
  font-family:var(--serif);font-size:clamp(2.6rem,7vw,5.2rem);
  font-weight:400;line-height:1.1;
  color:var(--purple-deep);max-width:840px;
  margin:0 auto 1.5rem;letter-spacing:-0.01em;
  text-shadow:0 1px 0 rgba(255,255,255,0.5);
}
.hero h1 em{
  font-style:italic;color:var(--purple-mid);
}
.hero-sub{
  font-family:var(--body);font-size:clamp(1.1rem,2.5vw,1.4rem);
  font-weight:400;color:var(--ink-mid);max-width:560px;
  margin:0 auto 2.8rem;line-height:1.65;
  background:rgba(255,255,255,0.5);padding:1rem 1.5rem;
}
.hero-cta{
  display:inline-block;font-family:var(--sans);
  font-size:0.8rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--white);background:var(--purple-deep);
  border:none;padding:1.1rem 3rem;border-radius:2px;cursor:pointer;
  transition:background 0.2s,transform 0.15s;text-decoration:none;
}
.hero-cta:hover{background:var(--purple-mid);transform:translateY(-1px);}
.hero-note{
  margin-top:1.2rem;font-family:var(--sans);font-size:0.78rem;
  color:var(--ink-mid);letter-spacing:0.04em;
}

/* BOOK BAND — thin band showing the book */
.book-band{
  background:var(--purple-deep);
  padding:3.5rem 2rem;
  display:flex;align-items:center;justify-content:center;gap:3rem;
  flex-wrap:wrap;
}
.book-cover-img{
  width:140px;flex-shrink:0;
  box-shadow:0 12px 40px rgba(0,0,0,0.5);
}
.book-band-text{max-width:480px;}
.book-band-label{
  font-family:var(--sans);font-size:0.68rem;font-weight:600;
  letter-spacing:0.2em;text-transform:uppercase;
  color:var(--lavender);margin-bottom:0.8rem;
}
.book-band-headline{
  font-family:var(--serif);font-size:clamp(1.3rem,3vw,1.9rem);
  font-weight:400;color:var(--white);line-height:1.25;margin-bottom:0.8rem;
}
.book-band-headline em{font-style:italic;color:var(--gold-bright);}
.book-band-body{
  font-family:var(--body);font-size:1.05rem;
  color:rgba(255,255,255,0.92);line-height:1.65;
}

/* SECTION CONTAINERS */
section{padding:6rem 2rem;}
.container{max-width:820px;margin:0 auto;}
.container-wide{max-width:1100px;margin:0 auto;}
.section-label{
  font-family:var(--sans);font-size:0.7rem;font-weight:600;
  letter-spacing:0.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1.2rem;
}

/* FOR YOU */
.for-you{background:var(--parchment);}
.for-you h2{
  font-family:var(--serif);font-size:clamp(1.8rem,4vw,2.8rem);
  font-weight:400;font-style:italic;line-height:1.25;
  color:var(--purple-deep);margin-bottom:2rem;
}
.for-you p{font-size:1.18rem;color:var(--ink-mid);max-width:640px;margin-bottom:1.4rem;}
.for-you p strong{color:var(--ink);font-weight:500;}
.timeline-note{
  display:inline-block;margin-top:1.5rem;
  padding:1rem 1.8rem;
  background:var(--lavender-pale);
  border-left:3px solid var(--purple-mid);
  font-family:var(--body);font-size:1.05rem;font-style:italic;
  color:var(--purple-mid);line-height:1.6;
}

/* WHAT IS THIS */
.what-section h2{
  font-family:var(--serif);font-size:clamp(1.8rem,4vw,2.6rem);
  font-weight:400;line-height:1.2;color:var(--ink);margin-bottom:1.8rem;
}
.what-section p{font-size:1.15rem;color:var(--ink-mid);margin-bottom:1.3rem;max-width:680px;}
.definition-block{
  margin:3rem 0;padding:2.5rem 3rem;
  background:var(--lavender-pale);
  border:1px solid rgba(155,114,187,0.25);
  position:relative;
}
.definition-block::before{
  content:"C";position:absolute;top:-0.6rem;left:2.5rem;
  font-family:var(--serif);font-size:5rem;color:var(--purple-light);
  opacity:0.25;line-height:1;
}
.definition-block p{
  font-family:var(--serif);font-size:1.25rem;font-style:italic;
  color:var(--purple-deep);line-height:1.6;margin:0;max-width:100%;
}

/* BENEFITS */
.benefits{background:var(--purple-deep);}
.benefits .section-label{color:var(--lavender);}
.benefits h2{
  font-family:var(--serif);font-size:clamp(1.8rem,4vw,2.6rem);
  font-weight:400;color:var(--white);margin-bottom:1rem;line-height:1.25;
}
.benefits-intro{
  font-size:1.1rem;color:rgba(255,255,255,0.92);
  max-width:600px;margin-bottom:4rem;
}
.benefits-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px;
}
.benefit-card{
  padding:2.5rem 2.2rem;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(196,174,216,0.12);
  transition:background 0.25s;
}
.benefit-card:hover{background:rgba(255,255,255,0.08);}
.benefit-number{
  font-family:var(--serif);font-size:3rem;font-weight:400;
  color:var(--gold-bright);opacity:0.5;line-height:1;margin-bottom:1rem;
}
.benefit-card h3{
  font-family:var(--serif);font-size:1.3rem;font-weight:500;
  color:var(--white);margin-bottom:0.8rem;line-height:1.3;
}
.benefit-card p{font-size:1rem;color:rgba(255,255,255,0.92);line-height:1.7;}

/* TESTIMONIALS */
.testimonials{background:var(--cream);}
.testimonials h2{
  font-family:var(--serif);font-size:clamp(1.8rem,4vw,2.6rem);
  font-weight:400;color:var(--ink);margin-bottom:0.8rem;line-height:1.25;
}
.testimonials-intro{font-size:1.1rem;color:var(--ink-light);max-width:560px;margin-bottom:4rem;}
.testimonials-stack{display:flex;flex-direction:column;gap:3px;}
.testimonial{
  padding:2.8rem 3.2rem;background:var(--parchment);
  border-left:3px solid transparent;transition:border-color 0.25s;
}
.testimonial:hover{border-left-color:var(--purple-mid);}
.testimonial-quote{
  font-family:var(--serif);font-size:clamp(1.1rem,2.2vw,1.4rem);
  font-style:italic;color:var(--ink);line-height:1.65;margin-bottom:1.8rem;
}
.testimonial-quote em{color:var(--purple-mid);font-style:normal;}
.testimonial-meta{display:flex;align-items:center;gap:1rem;}
.testimonial-initials{
  width:40px;height:40px;border-radius:50%;
  background:var(--lavender-pale);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:0.88rem;color:var(--purple-mid);flex-shrink:0;
}
.testimonial-name{
  font-family:var(--sans);font-size:0.85rem;font-weight:500;
  color:var(--ink);letter-spacing:0.05em;
}
.testimonial-detail{
  font-family:var(--sans);font-size:0.75rem;color:var(--ink-light);
  margin-top:0.15rem;letter-spacing:0.03em;
}
.testimonial-featured{
  background:var(--lavender-pale);padding:3.5rem;
  border-left:4px solid var(--purple-mid);
}
.testimonial-featured .testimonial-quote{font-size:clamp(1.15rem,2.5vw,1.55rem);}

/* HOW IT WORKS */
.how-it-works{background:var(--purple-mid);}
.how-it-works .section-label{color:var(--lavender);}
.how-it-works h2{
  font-family:var(--serif);font-size:clamp(1.8rem,4vw,2.6rem);
  font-weight:400;color:var(--white);margin-bottom:0.8rem;line-height:1.25;
}
.how-it-works .section-sub{
  font-size:1.1rem;color:rgba(255,255,255,0.92);
  max-width:560px;margin-bottom:3.5rem;
}
.phases-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:2px;margin-bottom:2.5rem;
}
.phase{
  padding:2rem 1.8rem;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(196,174,216,0.15);
  transition:background 0.2s;
}
.phase:hover{background:rgba(255,255,255,0.1);}
.phase-weeks{
  font-family:var(--sans);font-size:0.68rem;font-weight:600;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--gold-bright);margin-bottom:0.8rem;
}
.phase h3{
  font-family:var(--serif);font-size:1.2rem;font-weight:500;
  color:var(--white);margin-bottom:0.6rem;line-height:1.3;
}
.phase p{font-size:0.97rem;color:rgba(255,255,255,0.92);line-height:1.65;}
.format-note{
  padding:1.5rem 2rem;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(196,174,216,0.18);
  display:flex;align-items:flex-start;gap:1rem;
}
.format-note p{font-family:var(--sans);font-size:0.9rem;color:rgba(255,255,255,0.92);line-height:1.6;}
.format-note strong{color:var(--white);}

/* GUIDES */
.guides{background:var(--parchment);}
.guides .section-label{color:var(--gold);}
.guides h2{
  font-family:var(--serif);font-size:clamp(1.8rem,4vw,2.6rem);
  font-weight:400;color:var(--ink);margin-bottom:0.8rem;
}
.guides-intro{font-size:1.1rem;color:var(--ink-light);max-width:560px;margin-bottom:3.5rem;}
.guides-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;}
.guide-card{
  padding:2.5rem;
  border:1px solid rgba(155,114,187,0.2);
  background:var(--cream);
}
.guide-name{
  font-family:var(--serif);font-size:1.5rem;font-weight:500;
  color:var(--purple-deep);margin-bottom:0.4rem;
}
.guide-title{
  font-family:var(--sans);font-size:0.72rem;font-weight:600;
  letter-spacing:0.12em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1.2rem;
}
.guide-bio{font-size:1rem;color:var(--ink-mid);line-height:1.7;}

/* FINAL CTA — lavender */
.final-cta{
  background:var(--lavender-pale);
  text-align:center;padding:8rem 2rem;position:relative;overflow:hidden;
}
.final-cta::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 50%, rgba(92,42,144,0.06) 0%,transparent 70%);
  pointer-events:none;
}
.final-cta h2{
  font-family:var(--serif);font-size:clamp(2rem,5vw,3.8rem);
  font-weight:400;color:var(--purple-deep);line-height:1.15;
  max-width:680px;margin:0 auto 1.2rem;
}
.final-cta h2 em{font-style:italic;color:var(--purple-mid);}
.final-cta p{
  font-family:var(--body);font-size:1.2rem;color:var(--ink-mid);
  max-width:480px;margin:0 auto 3rem;line-height:1.65;
}
.final-cta-btn{
  display:inline-block;font-family:var(--sans);font-size:0.8rem;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--white);background:var(--purple-deep);
  border:none;padding:1.2rem 3.5rem;border-radius:2px;cursor:pointer;
  transition:background 0.2s,transform 0.15s;text-decoration:none;
}
.final-cta-btn:hover{background:var(--purple-mid);transform:translateY(-1px);}
.final-cta-sub{
  margin-top:1.5rem;font-family:var(--sans);font-size:0.78rem;
  color:var(--ink-light);letter-spacing:0.06em;
}

/* MODAL */
.modal-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(30,10,48,0.78);z-index:200;
  align-items:center;justify-content:center;padding:2rem;
}
.modal-overlay.active{display:flex;}
.modal{
  background:var(--cream);max-width:460px;width:100%;
  padding:3rem 3.5rem;position:relative;
}
.modal-close{
  position:absolute;top:1.2rem;right:1.4rem;
  background:none;border:none;font-size:1.4rem;
  color:var(--ink-light);cursor:pointer;line-height:1;padding:0.3rem;
}
.modal h3{
  font-family:var(--serif);font-size:1.8rem;font-weight:400;
  color:var(--purple-deep);margin-bottom:0.5rem;line-height:1.2;
}
.modal-sub{font-size:1rem;color:var(--ink-light);margin-bottom:2rem;line-height:1.6;}
.modal-field{margin-bottom:1.2rem;}
.modal-field label{
  display:block;font-family:var(--sans);font-size:0.7rem;font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--ink-mid);margin-bottom:0.5rem;
}
.modal-field input{
  display:block;width:100%;padding:0.85rem 1rem;
  font-family:var(--body);font-size:1rem;color:var(--ink);
  background:var(--parchment);border:1px solid rgba(155,114,187,0.3);
  border-radius:1px;outline:none;transition:border-color 0.2s;
}
.modal-field input:focus{border-color:var(--purple-mid);}
.modal-submit{
  width:100%;margin-top:1.8rem;
  font-family:var(--sans);font-size:0.8rem;font-weight:600;
  letter-spacing:0.12em;text-transform:uppercase;
  color:var(--white);background:var(--purple-deep);
  border:none;padding:1.1rem;border-radius:2px;cursor:pointer;
  transition:background 0.2s;
}
.modal-submit:hover{background:var(--purple-mid);}
.modal-privacy{
  margin-top:1rem;font-family:var(--sans);font-size:0.72rem;
  color:var(--ink-light);text-align:center;line-height:1.5;
}
.modal-success{display:none;text-align:center;padding:1rem 0;}
.modal-success .check{
  width:52px;height:52px;border-radius:50%;
  background:var(--lavender-pale);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1.5rem;font-size:1.4rem;color:var(--purple-mid);
}
.modal-success h4{
  font-family:var(--serif);font-size:1.5rem;font-weight:400;font-style:italic;
  color:var(--purple-deep);margin-bottom:0.8rem;
}
.modal-success p{font-size:1rem;color:var(--ink-light);line-height:1.65;}

@media(max-width:640px){
  section{padding:4rem 1.5rem;}
  .hero{padding:6rem 1.5rem 4rem;}
  .testimonial{padding:2rem 1.8rem;}
  .testimonial-featured{padding:2.5rem 2rem;}
  .definition-block{padding:2rem 1.8rem;}
  .modal{padding:2.5rem 2rem;}
  .final-cta{padding:6rem 1.5rem;}
  .book-band{gap:2rem;padding:2.5rem 1.5rem;}
}

/* WHY KATE & MIA */
.why-guides{background:var(--purple-deep);}
.why-guides .section-label{color:var(--lavender);}
.why-guides h2{
  font-family:var(--serif);font-size:clamp(1.8rem,4vw,2.6rem);
  font-weight:400;color:var(--white);margin-bottom:1rem;line-height:1.25;
}
.why-intro{
  font-size:1.1rem;color:rgba(255,255,255,0.92);
  max-width:640px;margin-bottom:3.5rem;line-height:1.7;
}
.why-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:2px;margin-bottom:2px;
}
.why-card{
  padding:2.8rem 2.5rem;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(196,174,216,0.12);
}
.why-card-name{
  font-family:var(--serif);font-size:1.5rem;font-weight:500;
  color:var(--gold-bright);margin-bottom:0.3rem;
}
.why-card-role{
  font-family:var(--sans);font-size:0.68rem;font-weight:600;
  letter-spacing:0.15em;text-transform:uppercase;
  color:var(--lavender);margin-bottom:1.5rem;
}
.why-card p{
  font-size:1rem;color:rgba(255,255,255,0.92);
  line-height:1.75;margin-bottom:1.2rem;
}
.why-card p em{color:var(--gold-bright);font-style:italic;}
.why-card-quote{
  margin-top:1.8rem;
  padding:1.2rem 1.5rem;
  border-left:2px solid var(--gold);
  font-family:var(--serif);font-size:1rem;font-style:italic;
  color:rgba(255,255,255,0.92);line-height:1.65;
}
.why-attribution{
  display:block;margin-top:0.6rem;
  font-family:var(--sans);font-size:0.72rem;font-style:normal;
  color:var(--lavender);letter-spacing:0.06em;
}
.why-together{
  padding:2.5rem 2.5rem 2.5rem;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(196,174,216,0.12);
  margin-top:2px;
}
.why-together-label{
  font-family:var(--sans);font-size:0.68rem;font-weight:600;
  letter-spacing:0.2em;text-transform:uppercase;
  color:var(--gold-bright);margin-bottom:1.2rem;
}
.why-together-text{
  font-size:1.05rem;color:rgba(255,255,255,0.92);
  line-height:1.75;max-width:720px;margin-bottom:1.2rem;
}
.why-together-quote{
  margin:2rem 0 2.5rem;
  padding:1.2rem 1.5rem;
  border-left:2px solid var(--gold);
  font-family:var(--serif);font-size:1rem;font-style:italic;
  color:rgba(255,255,255,0.92);line-height:1.65;
  max-width:680px;
}
.why-stat-row{
  display:flex;gap:3rem;flex-wrap:wrap;
  margin-top:0.5rem;padding-top:2rem;
  border-top:1px solid rgba(196,174,216,0.12);
}
.why-stat-number{
  font-family:var(--serif);font-size:3rem;font-weight:400;
  color:var(--gold-bright);line-height:1;margin-bottom:0.4rem;
}
.why-stat-label{
  font-family:var(--sans);font-size:0.8rem;color:rgba(255,255,255,0.5);
  line-height:1.5;letter-spacing:0.03em;
}
.why-stat-label em{font-style:italic;color:rgba(255,255,255,0.65);}