/* ── site.css — shared site-wide rhythm (Phase 4) + trust band (Phase 5) ──
   Linked once in base.html <head> after /fonts.css. Spacing/scale only:
   no colour, copy, or structural changes. Raises existing per-page rules
   via later-cascade specificity. Add NO new fonts/JS here. */

/* ── Phase 4 · whitespace & typographic rhythm (site-wide) ── */

/* More vertical breathing room between bands (was 72px).
   Note: page_style inline <style> loads AFTER /site.css in <head>, so we
   raise specificity (body .section) to win the cascade. Pages that set an
   inline style="padding:…" on a <section> (a deliberately tighter band)
   still win via inline specificity — left intentionally untouched. */
body .section{padding-top:108px;padding-bottom:108px}

/* Cap band content + comfortable gutters (matches existing 1100px system). */
body .section-inner{max-width:1100px;margin-left:auto;margin-right:auto}

/* Let headlines breathe — lean into Archivo size contrast vs body. */
body .section-inner h2,body .section h2{
  font-family:var(--display);
  font-size:clamp(1.7rem,3.4vw,2.6rem);
  line-height:1.18;
  letter-spacing:-0.4px;
}

/* Comfortable lead/body measure inside bands. */
body .section-inner p.lead,body .section p.lead{line-height:1.65}

/* Scale the rhythm down on mobile. */
@media(max-width:700px){
  body .section{padding-top:60px;padding-bottom:60px}
  body .section-inner h2,body .section h2{font-size:clamp(1.45rem,6vw,1.9rem)}
}

/* ── Phase 5 · trust & proof band (homepage) ── */

/* Stat strip — reuses card tokens; honest figures only. */
.proof-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  margin:8px 0 44px;
}
.proof-stat{
  background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:24px 18px;text-align:center;
}
.proof-stat-num{
  font-family:var(--display);font-weight:800;font-size:2.2rem;line-height:1;
  color:var(--navy);margin-bottom:8px;
}
.proof-stat-num .unit{font-size:1.1rem;font-weight:700;color:var(--gray-600)}
.proof-stat-lbl{font-size:0.82rem;color:var(--gray-600);line-height:1.4}

/* Comparison block — Sitetals vs Lawyer vs DIY. Styled comparison, not a spreadsheet. */
.compare-wrap{overflow-x:auto;border:1px solid var(--gray-200);border-radius:var(--radius);box-shadow:var(--shadow);background:#fff;padding:6px}
.compare-table{width:100%;border-collapse:separate;border-spacing:0;min-width:560px;text-align:left}
.compare-table th,.compare-table td{padding:20px 22px;border:none;font-size:0.92rem;vertical-align:middle}
.compare-table thead th{
  font-size:0.78rem;font-weight:700;color:var(--gray-700);
  letter-spacing:.02em;text-transform:none;padding-bottom:14px;
}
/* Quiet hairline below the header row only, not between every body row. */
.compare-table tbody tr:not(:last-child) td,
.compare-table tbody tr:not(:last-child) th{box-shadow:inset 0 -1px 0 var(--gray-100)}
/* Row labels: quiet, lighter — no filled grey cell. */
.compare-table tbody th[scope="row"]{font-weight:600;color:var(--gray-600);font-size:0.86rem}
/* Winner column: soft signal tint, elevated card with rounded corners. */
.compare-table thead th.col-us{color:var(--signal-dark);background:var(--signal-light);border-radius:10px 10px 0 0}
.compare-table td.cell-us{background:var(--signal-light);color:var(--gray-900);font-weight:600;box-shadow:none}
.compare-table tbody tr:not(:last-child) td.cell-us{box-shadow:inset 0 -1px 0 rgba(0,200,150,.18)}
.compare-table tbody tr:last-child td.cell-us{border-radius:0 0 10px 10px}
.compare-table .col-us,.compare-table .cell-us{position:relative}
/* Subtle elevation framing the winner column edges. */
.compare-table thead th.col-us{box-shadow:-1px -1px 0 rgba(0,200,150,.22),1px -1px 0 rgba(0,200,150,.22)}
.compare-yes{color:var(--green);font-weight:700}
.compare-no{color:var(--gray-400)}

@media(max-width:640px){
  .proof-strip{grid-template-columns:1fr 1fr;gap:14px}
  .proof-stat-num{font-size:1.9rem}
}

/* ===== takeaway audio player + media section (shared; used by blog articles) ===== */
/* Key-takeaways audio: clean single-line dark bar with an inline label. */
.tk-audio{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0 28px}
.tk-audio-label{display:flex;align-items:center;gap:7px;font-size:.92rem;font-weight:700;color:var(--navy);white-space:nowrap}
.tk-audio-bar{flex:1;min-width:240px;max-width:520px;display:flex;align-items:center;gap:13px;background:#222834;border-radius:999px;padding:10px 18px}
.tk-audio-bar .tk-play{flex:none;width:34px;height:34px;border-radius:50%;border:none;background:#19e3a8;color:#053d2c;font-size:.78rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:transform .12s}
.tk-audio-bar .tk-play:hover{transform:scale(1.08)}
.tk-audio-bar .tk-mute{flex:none;width:30px;height:30px;border-radius:50%;border:none;background:transparent;color:#c4cbd6;font-size:1rem;line-height:1;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
.tk-audio-bar .tk-mute:hover{color:#fff}
.tk-track{flex:1;height:5px;background:rgba(255,255,255,.22);border-radius:3px;cursor:pointer;position:relative}
.tk-fill{position:absolute;top:0;left:0;height:100%;width:0;background:var(--signal);border-radius:3px}
.tk-fill::after{content:"";position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.tk-time{font-size:.76rem;color:#aeb6c2;font-variant-numeric:tabular-nums;min-width:34px;text-align:center}
.media-note{font-size:.86rem;color:var(--gray-600,#4b5563);margin:0 0 22px}
.media-note a{font-weight:600}
.media-section{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius);padding:28px;margin:48px 0}
.media-section h2{margin-top:0;font-size:1.1rem;margin-bottom:16px}
.video-wrap{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:8px;margin:16px 0}
.video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none;border-radius:8px}
.download-btn{display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:#fff;padding:10px 22px;border-radius:7px;font-weight:600;font-size:.9rem;text-decoration:none;margin-top:12px}
.download-btn:hover{background:var(--navy-dark);text-decoration:none}
