/* sections.css
   Replaces the generic icon-grid + card-stack patterns
   with editorial layouts per section. Hero is untouched. */

:root{
  --warm: oklch(0.74 0.16 55);          /* amber/coral accent */
  --warm-soft: oklch(0.96 0.04 60);
  --warm-deep: oklch(0.52 0.18 35);
  --paper:#FBF8F4;                       /* warmer off-white, breaks the all-cool palette */
  --rule:#E5E1DA;
}

/* Editorial overline used in place of pill eyebrows */
.overline{
  font-family:'Inter',sans-serif;font-size:13px;font-weight:500;
  color:var(--muted);letter-spacing:0;margin:0 0 18px;
}
.overline.on-dark{color:rgba(255,255,255,.5)}
.overline em{font-style:normal;color:var(--ink)}

/* Inline gradient highlight, kept from earlier */
.hl-yes{
  background:linear-gradient(120deg,#7C3AED 0%,#A78BFA 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-style:normal;
}

/* Variable section rhythm — overrides the uniform py-120 */
.section-pain{padding:88px 0 96px;background:var(--paper)}
.section-solution{padding:120px 0 140px;background:#fff}
.section-how{padding:120px 0 140px;background:#fff;border-top:1px solid var(--rule)}
.section-features{padding:140px 0 160px;background:var(--paper);border-top:1px solid var(--rule)}
.section-day{padding:140px 0 160px}
.section-faq{padding:120px 0 140px;background:#fff;border-top:1px solid var(--rule)}

@media(max-width:700px){
  .section-pain,.section-solution,.section-how,.section-features,.section-day,.section-faq{
    padding-top:72px;padding-bottom:80px;
  }
}

/* =========================================================
   2) PAIN — asymmetric editorial
   ========================================================= */
.pain-intro{max-width:780px;margin-bottom:56px}
.pain-intro h2{font-size:clamp(36px,5vw,64px);letter-spacing:-0.025em;line-height:1.02}
.pain-num{
  font-family:'Inter',sans-serif;font-weight:800;font-style:italic;
  color:var(--primary);
  font-feature-settings:"ss01";
  padding:0 .04em;
}
.pain-num--lost{
  color:var(--warm-deep);
  text-decoration:line-through;
  text-decoration-color:rgba(190,75,40,.45);
  text-decoration-thickness:3px;
  text-underline-offset:-2px;
}
.pain-lede{margin-top:22px;max-width:62ch}
.pain-lede em{font-style:italic;color:var(--ink);font-weight:600;background:linear-gradient(transparent 62%,rgba(124,58,237,.18) 62%);padding:0 2px}

.pain-evidence{
  display:grid;grid-template-columns:1fr;gap:24px;
}
@media(min-width:880px){
  .pain-evidence{
    grid-template-columns:1.35fr 1fr;
    grid-template-rows:auto auto;
    gap:24px;
  }
  .pain-cell--lead{grid-row:span 2}
}

.pain-cell{
  display:flex;flex-direction:column;gap:22px;
  background:#fff;
  border:1px solid var(--rule);
  border-radius:18px;
  padding:28px 28px 24px;
  position:relative;
}
.pain-cell--lead{padding:32px}
.pain-cell__caption{display:flex;flex-direction:column;gap:8px;max-width:48ch}
.pain-cell__num{
  font-family:'Inter',sans-serif;font-size:12px;letter-spacing:.12em;font-weight:600;
  color:var(--warm-deep);text-transform:uppercase;
}
.pain-cell h3{font-size:22px;font-weight:700;letter-spacing:-.015em;line-height:1.2;color:var(--ink)}
.pain-cell--lead h3{font-size:28px}
.pain-cell p{font-size:14.5px;color:var(--muted);line-height:1.55;max-width:46ch}

/* =========================================================
   3) SOLUTION — flooded → LUE → sheet
   ========================================================= */
.solution-head{max-width:780px;margin-bottom:56px}
.solution-head h2{font-size:clamp(34px,4.8vw,58px);letter-spacing:-.025em;line-height:1.05}
.solution-head em{font-style:italic;font-weight:700;color:var(--warm-deep);font-feature-settings:"ss01"}

.solution-flow{
  display:grid;grid-template-columns:1fr;gap:28px;align-items:stretch;
}
@media(min-width:1000px){
  .solution-flow{grid-template-columns:1fr auto 1fr;gap:32px;align-items:center}
}
.solution-flow__col{display:flex;flex-direction:column;gap:12px}
.solution-flow__hint{
  font-family:'Inter',sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:500;
}

.solution-flow__pipe{
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:12px;
  min-height:60px;
}
@media(min-width:1000px){.solution-flow__pipe{flex-direction:column;align-self:stretch;justify-content:center}}
.solution-flow__pipe-line{
  flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--primary) 0 6px,transparent 6px 12px);
  opacity:.55;min-width:40px;
}
@media(min-width:1000px){.solution-flow__pipe-line{width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--primary) 0 6px,transparent 6px 12px);min-height:60px;flex:1}}
.solution-flow__pipe-badge{
  background:#0F0A1F;color:#fff;
  padding:10px 14px;border-radius:999px;font-size:13px;font-weight:600;
  display:inline-flex;align-items:center;gap:8px;
  white-space:nowrap;
  box-shadow:0 16px 32px -16px rgba(124,58,237,.7);
}
.solution-flow__pipe-badge .dot{
  width:8px;height:8px;border-radius:50%;background:#10B981;
  box-shadow:0 0 0 4px rgba(16,185,129,.2);
}

.solution-foot{
  margin-top:48px;max-width:64ch;
  font-size:18px;color:var(--ink);line-height:1.5;
  border-left:2px solid var(--primary);padding-left:18px;
}
.solution-foot b{font-weight:700}

/* =========================================================
   4) HOW — narrative steps, alternating, no card grid
   ========================================================= */
.how-head{max-width:680px;margin-bottom:80px}
.how-head h2{font-size:clamp(36px,5vw,60px);letter-spacing:-.025em}

.how-steps{display:flex;flex-direction:column;gap:96px}
@media(max-width:760px){.how-steps{gap:64px}}

.how-step{
  display:grid;grid-template-columns:1fr;gap:32px;align-items:center;
}
@media(min-width:880px){
  .how-step{grid-template-columns:1fr 1.1fr;gap:80px}
  .how-step[data-side="r"] .how-step__body{order:2}
  .how-step[data-side="r"] .how-step__visual{order:1}
}

.how-step__body{display:flex;flex-direction:column;gap:14px;max-width:48ch}
.how-step__kicker{
  font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
  color:var(--primary);letter-spacing:0;
  display:inline-flex;align-items:center;gap:8px;
}
.how-step__kicker::before{
  content:"";width:24px;height:1px;background:var(--primary);display:inline-block;
}
.how-step h3{font-size:30px;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
@media(max-width:760px){.how-step h3{font-size:24px}}
.how-step p{font-size:16px;color:var(--muted);line-height:1.55}

.how-step__visual{position:relative;display:flex;justify-content:center}

/* =========================================================
   5) FEATURES — bento
   ========================================================= */
.features-head{max-width:780px;margin-bottom:64px}
.features-head h2{font-size:clamp(34px,4.6vw,56px);letter-spacing:-.025em;line-height:1.05}
.features-head em{font-style:italic;color:var(--warm-deep);font-weight:700}

.bento{
  display:grid;grid-template-columns:1fr;gap:18px;
}
@media(min-width:760px){
  .bento{grid-template-columns:repeat(6,1fr);gap:20px}
}

.bento-cell{
  background:#fff;border:1px solid var(--rule);border-radius:20px;
  padding:24px;display:flex;flex-direction:column;gap:18px;
  transition:border-color .2s ease,transform .25s ease;
}
.bento-cell:hover{border-color:#d8d0e6;transform:translateY(-2px)}
@media(min-width:760px){
  .bento-cell--xl{grid-column:span 4;grid-row:span 2;padding:32px}
  .bento-cell--wide{grid-column:span 2;grid-row:span 1}
  .bento-cell--md{grid-column:span 2}
}
.bento-cell__caption{display:flex;flex-direction:column;gap:10px;max-width:44ch}
.bento-cell__tag{
  font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--primary);
}
.bento-cell h3{font-size:19px;font-weight:700;letter-spacing:-.015em;color:var(--ink);line-height:1.25}
.bento-cell--xl h3{font-size:28px;letter-spacing:-.02em}
.bento-cell p{font-size:14.5px;color:var(--muted);line-height:1.55}
.bento-cell em{font-style:italic;color:var(--ink);font-weight:500;background:linear-gradient(transparent 65%,rgba(124,58,237,.15) 65%);padding:0 2px}

/* =========================================================
   6) DAY TIMELINE
   ========================================================= */
.day-head{max-width:780px;margin-bottom:48px}
.day-head h2{font-size:clamp(36px,5vw,60px);letter-spacing:-.025em;color:#fff;line-height:1.05}
.day-head__faded{color:rgba(255,255,255,.4);font-style:italic}

/* Sem LUE / Com LUE — simple 2-col comparison table */
.cmp{
  border:1px solid rgba(255,255,255,.1);border-radius:18px;overflow:hidden;
  background:rgba(255,255,255,.02);
}
.cmp-row{display:grid;grid-template-columns:1fr 1fr}
.cmp-row + .cmp-row{border-top:1px solid rgba(255,255,255,.08)}
.cmp-c{
  padding:20px 22px;display:flex;align-items:flex-start;gap:12px;
  font-size:15px;line-height:1.45;color:rgba(255,255,255,.88);
}
.cmp-c--before{border-right:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.62)}
.cmp-c--after{background:linear-gradient(180deg,rgba(124,58,237,.12),transparent)}
.cmp-head .cmp-c{
  font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding-top:15px;padding-bottom:15px;color:rgba(255,255,255,.55);
}
.cmp-head .cmp-c--after{color:#C4B5FD}
.cmp-x{color:#FB7185;font-weight:700;flex-shrink:0;font-size:17px;line-height:1.35}
.cmp-v{color:#34D399;font-weight:700;flex-shrink:0;font-size:17px;line-height:1.35}
.cmp-foot{
  margin-top:28px;text-align:center;text-wrap:balance;
  font-size:clamp(16px,2vw,19px);color:#fff;font-weight:500;
}
@media(max-width:640px){
  .cmp-c{padding:14px 13px;font-size:13px;gap:9px}
  .cmp-head .cmp-c{font-size:11px}
  .cmp-x,.cmp-v{font-size:15px}
}
.day-head__on{
  background:linear-gradient(120deg,#C4B5FD 0%,#fff 50%,#DDD6FE 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* =========================================================
   7) FAQ — sidebar + accordion
   ========================================================= */
.faq-wrap{display:grid;grid-template-columns:1fr;gap:48px;align-items:start}
@media(min-width:880px){.faq-wrap{grid-template-columns:.85fr 1.4fr;gap:80px}}

.faq-aside{display:flex;flex-direction:column;gap:18px;position:sticky;top:96px}
.faq-aside h2{font-size:clamp(30px,3.4vw,40px);letter-spacing:-.02em;line-height:1.1}
.faq-aside .lede{font-size:16px}
.faq-aside .btn{align-self:flex-start;margin-top:8px}

/* =========================================================
   8) CTA final — strip down
   ========================================================= */
.cta-final{padding:120px 0}
.cta-final h2{font-size:clamp(36px,5.4vw,60px);max-width:22ch;text-wrap:balance}
@media(min-width:780px){.cta-final{padding:160px 0}}