/* ===========================================================================
   Book Sales Page — page-specific styles
   Depends on css/styles.css for tokens and shared components.
=========================================================================== */

/* ---------- Hero ---------- */
.book-hero{ padding:64px 0 70px; overflow:hidden; }

.book-hero .container{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:56px;
  align-items:center;
}

.hero-title{
  font-size:clamp(34px,4.6vw,58px);
  text-transform:uppercase;
  line-height:1.05;
}
.hero-title .accent{ color:var(--turquoise); }

.hero-flourish{
  display:flex;
  align-items:center;
  gap:10px;
  margin:22px 0 20px;
  color:var(--gold);
}
.hero-flourish svg{ width:18px; height:18px; stroke:var(--gold); fill:none; }
.hero-flourish .line{
  width:60px; height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);
}

.hero-statement{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:19px;
  line-height:1.5;
  color:var(--gold-light);
  max-width:460px;
  margin-bottom:26px;
}

.hero-byline{
  font-family:var(--font-serif);
  font-size:15px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--white);
  margin-bottom:32px;
}
.hero-byline span{ color:var(--text-soft); font-family:var(--font-body); letter-spacing:0; text-transform:none; font-size:14px; }

.hero-buttons{ display:flex; gap:16px; flex-wrap:wrap; }

.book-hero-art{ position:relative; }
.book-hero-art img{
  width:100%;
  border-radius:var(--radius-md);
  box-shadow:0 30px 70px rgba(0,0,0,0.55);
}
.book-hero-art::after{
  content:"";
  position:absolute;
  inset:-40px;
  z-index:-1;
  background:radial-gradient(closest-side, rgba(31,154,148,0.20), transparent 70%);
}

@media (max-width:980px){
  .book-hero .container{ grid-template-columns:1fr; }
  .book-hero-art{ order:-1; max-width:420px; margin:0 auto; }
  .hero-statement, .hero-buttons{ max-width:none; }
}
@media (max-width:560px){
  .hero-buttons .btn{ width:100%; }
}

/* ---------- Reader Benefits ---------- */
.benefits{ background:var(--ivory); color:var(--ink); }

.benefits-layout{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:30px;
  align-items:start;
}

.benefits-heading{
  font-size:clamp(22px,2.6vw,28px);
  text-transform:uppercase;
  line-height:1.25;
}

.benefits-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
}

.benefit-item{
  padding:0 20px;
  border-left:1px solid var(--border-ivory);
}
.benefit-item:first-child{ border-left:none; padding-left:0; }

.benefit-icon{
  width:44px; height:44px;
  margin-bottom:16px;
  color:var(--teal-deep);
}
.benefit-icon svg{ width:100%; height:100%; stroke:currentColor; fill:none; }

.benefit-item h3{
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:700;
  letter-spacing:0.5px;
  text-transform:uppercase;
  margin-bottom:10px;
  line-height:1.3;
}
.benefit-item p{ font-size:13.5px; color:var(--ink-soft); }

@media (max-width:980px){
  .benefits-layout{ grid-template-columns:1fr; }
  .benefits-grid{ grid-template-columns:repeat(3,1fr); gap:28px 0; }
  .benefit-item{ border-left:none; padding:0; }
  .benefit-item:nth-child(3n+1){ }
}
@media (max-width:640px){
  .benefits-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:420px){
  .benefits-grid{ grid-template-columns:1fr; }
}

/* ---------- 5-Step Framework ---------- */
.framework{
  background:var(--bg-dark);
  position:relative;
}

.framework-layout{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:40px;
  align-items:center;
}

.framework-illustration img{
  width:100%;
  filter:drop-shadow(0 0 36px rgba(53,201,197,0.18));
}

@media (max-width:980px){
  .framework-layout{ grid-template-columns:1fr; }
  .framework-illustration{ max-width:260px; margin:0 auto 10px; }
}

/* ---------- Details band: Inside / Who-for / Formats ---------- */
.details-band{ background:var(--ivory); color:var(--ink); }

.details-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:0;
}
.details-col{ padding:0 34px; }
.details-col:first-child{ padding-left:0; }
.details-col:last-child{ padding-right:0; border-right:none; }

.details-col h3{
  font-size:16px;
  text-transform:uppercase;
  margin-bottom:6px;
}
.details-flourish{
  width:34px; height:1px;
  background:var(--gold);
  margin-bottom:20px;
}

.format-visual{ margin-bottom:20px; }
.format-visual img{
  width:100%;
  max-width:220px;
  border-radius:var(--radius-sm);
  box-shadow:0 16px 34px rgba(18,38,42,0.25);
}
.format-item{ margin-bottom:18px; }
.format-item h4{
  font-family:var(--font-body);
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.5px;
  margin-bottom:6px;
}
.format-item p{ font-size:13.5px; color:var(--ink-soft); }

.format-status{ margin-top:10px; }

@media (max-width:980px){
  .details-grid{ grid-template-columns:1fr; gap:44px; }
  .details-col{ padding:0 !important; border-right:none; }
}

/* ---------- FAQ (base .faq/.faq-grid moved to css/styles.css — shared
   with contact.html) ---------- */

/* ---------- Final CTA ---------- */
.final-cta{
  background:var(--bg-dark);
  position:relative;
  overflow:hidden;
}
.final-cta-layout{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:40px;
  align-items:center;
}
.final-cta-illustration{
  width:150px;
  opacity:0.9;
}
.final-cta-illustration img{ width:100%; }

.final-cta-title{
  font-size:clamp(24px,3vw,32px);
  text-transform:uppercase;
  color:var(--turquoise);
  margin-bottom:10px;
}
.final-cta-copy{
  font-family:var(--font-serif);
  font-style:italic;
  color:var(--gold-light);
  font-size:16.5px;
}

.final-cta-actions{
  display:flex;
  flex-direction:column;
  gap:14px;
}

@media (max-width:900px){
  .final-cta-layout{
    grid-template-columns:1fr;
    text-align:center;
    justify-items:center;
  }
  .final-cta-illustration{ width:110px; }
  .final-cta-actions{ width:100%; max-width:340px; }
  .final-cta-actions .btn{ width:100%; }
}