/* ════════════════════════════════════════════════════════════════════
 * SERVICE PAGE - net-new pieces (reuses tokens.css + homepage.css)
 * Hero service-overview card · CSS-only tabs · case grid · testimonials
 * ════════════════════════════════════════════════════════════════════ */

/* ── Hero service-overview card ── */
.svc-overview{ position:relative; z-index:1; background:var(--surface-dark-1); border:1px solid var(--border-dark); border-radius:var(--radius-xl); box-shadow:var(--shadow-xl); padding:var(--space-6); }
.svc-overview::before{ content:''; position:absolute; inset:-1px; border-radius:var(--radius-xl); background:var(--brand-gradient); opacity:.28; z-index:-1; filter:blur(22px); }
.svc-overview-head{ display:flex; align-items:center; justify-content:space-between; padding-bottom:var(--space-4); margin-bottom:var(--space-2); border-bottom:1px solid var(--border-dark); }
.svc-overview-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--text-low-dark); }
.svc-overview-tag{ font-family:var(--font-mono); font-size:10px; letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--brand-glow); background:rgba(167,139,250,.14); padding:2px var(--space-2); border-radius:var(--radius-sm); }
.svc-overview ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; }
.svc-overview li{ display:flex; align-items:center; gap:var(--space-3); padding-block:var(--space-3); border-bottom:1px solid var(--border-dark); font-size:var(--text-body-sm); color:var(--text-on-dark); }
.svc-overview li:last-child{ border-bottom:0; }
.svc-overview li .ck{ flex:none; width:20px; height:20px; border-radius:var(--radius-full); background:rgba(16,185,129,.16); color:var(--color-success); display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:var(--weight-bold); }

/* ── Social proof bar ── */
.social-proof{ padding-block:var(--space-12); border-bottom:1px solid var(--border-subtle); text-align:center; }
.social-proof-text{ font-size:var(--text-body-lg); color:var(--text-secondary); margin-bottom:var(--space-6); }
.social-proof-text strong{ color:var(--text-primary); font-weight:var(--weight-semibold); }
.social-proof-row{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-3); }

/* ── CSS-only tabs (radio + label) ── */
.svc-tabs{ max-width:920px; margin-inline:auto; }
.svc-tabs > input{ position:absolute; width:1px; height:1px; opacity:0; }
.svc-tablist{ display:flex; flex-wrap:wrap; gap:var(--space-2); justify-content:center; margin-bottom:var(--space-8); }
.svc-tab{ display:inline-flex; align-items:center; gap:var(--space-2); min-height:44px; padding:var(--space-2) var(--space-4); border:1px solid var(--border-default); border-radius:var(--radius-full); background:var(--bg); cursor:pointer; font-size:var(--text-body-sm); font-weight:var(--weight-medium); color:var(--text-secondary); }
.svc-tab:hover{ border-color:var(--brand-purple); color:var(--brand-purple-hover); }
.svc-panels{ position:relative; }
.svc-panel{ display:none; background:var(--bg-card); border:1px solid var(--border-subtle); border-top:3px solid var(--brand-purple); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:var(--space-8); }
.svc-panel h3{ font-size:var(--text-h3); margin-bottom:var(--space-2); }
.svc-panel .lede{ color:var(--text-secondary); font-size:var(--text-body); margin-bottom:var(--space-5); }
.svc-panel ul{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr; gap:var(--space-3); }
@media (min-width:640px){ .svc-panel ul{ grid-template-columns:1fr 1fr; gap:var(--space-3) var(--space-8); } }
.svc-panel li{ display:flex; gap:var(--space-2); font-size:var(--text-body-sm); color:var(--text-secondary); line-height:var(--leading-snug); }
.svc-panel li::before{ content:'✓'; color:var(--color-success); font-weight:var(--weight-bold); flex:none; }
/* selected tab + matching panel (instant - robust under frozen timelines) */
#tab1:checked ~ .svc-tablist label[for="tab1"], #tab2:checked ~ .svc-tablist label[for="tab2"], #tab3:checked ~ .svc-tablist label[for="tab3"], #tab4:checked ~ .svc-tablist label[for="tab4"], #tab5:checked ~ .svc-tablist label[for="tab5"], #tab6:checked ~ .svc-tablist label[for="tab6"]{ background:var(--brand-purple); border-color:var(--brand-purple); color:#fff; }
#tab1:focus-visible ~ .svc-tablist label[for="tab1"], #tab2:focus-visible ~ .svc-tablist label[for="tab2"], #tab3:focus-visible ~ .svc-tablist label[for="tab3"], #tab4:focus-visible ~ .svc-tablist label[for="tab4"], #tab5:focus-visible ~ .svc-tablist label[for="tab5"], #tab6:focus-visible ~ .svc-tablist label[for="tab6"]{ box-shadow:var(--shadow-focus-ring); }
#tab1:checked ~ .svc-panels .panel1, #tab2:checked ~ .svc-panels .panel2, #tab3:checked ~ .svc-panels .panel3, #tab4:checked ~ .svc-panels .panel4, #tab5:checked ~ .svc-panels .panel5, #tab6:checked ~ .svc-panels .panel6{ display:block; }

/* ── Case study 2-card grid ── */
.cs-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-6); max-width:920px; margin-inline:auto; }
@media (min-width:760px){ .cs-grid{ grid-template-columns:1fr 1fr; } }
.cs-card{ background:linear-gradient(180deg,var(--bg) 0%, var(--bg-subtle) 100%); border:1px solid var(--border-subtle); border-radius:var(--radius-xl); padding:var(--space-8); box-shadow:var(--shadow-sm); }
.cs-alias{ display:flex; align-items:center; gap:var(--space-2); font-weight:var(--weight-semibold); color:var(--text-primary); margin-bottom:var(--space-4); }
.cs-alias .ai-badge{ position:static; transform:rotate(-3deg); }
.cs-stat{ font-family:var(--font-display); font-size:var(--text-h3); font-weight:var(--weight-black); letter-spacing:var(--tracking-tight); line-height:1.1; }
.cs-stat .from{ color:var(--text-tertiary); } .cs-stat .to{ color:var(--color-success-text); }
.cs-period{ font-family:var(--font-mono); font-size:var(--text-caption); color:var(--text-tertiary); margin-top:var(--space-1); margin-bottom:var(--space-4); }
.cs-spark{ width:100%; height:46px; display:block; margin-bottom:var(--space-4); }
.cs-quote{ font-size:var(--text-body); color:var(--text-secondary); font-style:italic; line-height:var(--leading-relaxed); margin-bottom:var(--space-4); }
.cs-link{ font-size:var(--text-body-sm); font-weight:var(--weight-semibold); color:var(--brand-blue); }
.cs-link:hover{ color:var(--brand-blue-hover); }
.cs-disclaimer{ text-align:center; font-size:var(--text-caption); color:var(--text-tertiary); font-style:italic; margin-top:var(--space-8); }

/* ── Testimonials ── */
.testi-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-6); }
@media (min-width:760px){ .testi-grid{ grid-template-columns:repeat(3,1fr); } }
.testi{ background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:var(--space-6); display:flex; flex-direction:column; }
.testi-quote{ font-size:var(--text-body); color:var(--text-primary); line-height:var(--leading-relaxed); margin-bottom:var(--space-5); }
.testi-foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-top:auto; }
.testi-alias{ font-family:var(--font-mono); font-size:var(--text-body-sm); color:var(--text-secondary); }
.testi-verified{ display:inline-flex; align-items:center; gap:var(--space-1); font-size:var(--text-caption); font-weight:var(--weight-semibold); color:var(--color-success-text); }
.testi-note{ text-align:center; font-size:var(--text-caption); color:var(--text-tertiary); font-style:italic; margin-top:var(--space-8); }

/* ── Transparency CTA strip top accent ── */
.transparency-cta{ position:relative; background:var(--bg); }
.transparency-cta::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--bg-dark); }

/* ════════════════════════════════════════════════════════════════════
 * DAY IN THE LIFE - vertical timeline
 * ════════════════════════════════════════════════════════════════════ */
.dayline{ background:var(--bg-subtle); }
.timeline{ max-width:760px; margin:0 auto; position:relative; padding-left:var(--space-12); }
.timeline::before{ content:''; position:absolute; left:15px; top:8px; bottom:8px; width:2px; background:var(--brand-gradient); opacity:.5; }
.tl-item{ position:relative; padding-bottom:var(--space-8); }
.tl-item:last-child{ padding-bottom:0; }
.tl-time{ position:absolute; left:calc(-1 * var(--space-12)); top:-2px; width:30px; height:30px; border-radius:var(--radius-full); background:var(--bg); border:2px solid var(--brand-purple); display:flex; align-items:center; justify-content:center; }
.tl-time::after{ content:''; width:8px; height:8px; border-radius:var(--radius-full); background:var(--brand-purple); }
.tl-clock{ font-family:var(--font-mono); font-size:var(--text-body-sm); font-weight:var(--weight-bold); color:var(--brand-purple); letter-spacing:var(--tracking-tight); display:block; margin-bottom:var(--space-1); }
.tl-text{ font-size:var(--text-body); color:var(--text-secondary); line-height:var(--leading-relaxed); }
.tl-text strong{ color:var(--text-primary); font-weight:var(--weight-semibold); }
.tl-item.is-allday .tl-time{ border-color:var(--color-success); }
.tl-item.is-allday .tl-time::after{ background:var(--color-success); }
.tl-item.is-allday .tl-clock{ color:var(--color-success-text); }
.dayline-note{ text-align:center; max-width:680px; margin:var(--space-12) auto 0; font-size:var(--text-body); color:var(--text-secondary); font-style:italic; }

/* ════════════════════════════════════════════════════════════════════
 * DEEP CASE STUDY - week-by-week
 * ════════════════════════════════════════════════════════════════════ */
.casedeep{ max-width:980px; margin-inline:auto; }
.casedeep-head{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); margin-bottom:var(--space-8); justify-content:center; }
.casedeep-head .ai-badge{ position:static; transform:rotate(-3deg); }
.cw-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-4); margin-bottom:var(--space-8); }
@media (min-width:640px){ .cw-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:980px){ .cw-grid{ grid-template-columns:repeat(5,1fr); } }
.cw-step{ background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:var(--space-5); border-top:3px solid var(--brand-purple); }
.cw-week{ font-family:var(--font-mono); font-size:var(--text-caption); font-weight:var(--weight-medium); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--brand-purple); display:block; margin-bottom:var(--space-3); }
.cw-step p{ font-size:var(--text-body-sm); color:var(--text-secondary); line-height:var(--leading-relaxed); }
.casedeep-result{ background:var(--bg-dark); border-radius:var(--radius-xl); padding:var(--space-8); display:grid; grid-template-columns:1fr; gap:var(--space-6); align-items:center; }
@media (min-width:760px){ .casedeep-result{ grid-template-columns:auto 1fr; gap:var(--space-10); } }
.cr-stat{ font-family:var(--font-display); font-size:var(--text-h2); font-weight:var(--weight-black); letter-spacing:var(--tracking-tight); color:var(--text-on-dark); white-space:nowrap; }
.cr-stat .from{ color:var(--text-low-dark); } .cr-stat .to{ background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.cr-stat-sub{ font-family:var(--font-mono); font-size:var(--text-caption); color:var(--text-low-dark); margin-top:var(--space-2); }
.cr-chart{ width:100%; height:90px; display:block; }
.casedeep-quote{ margin-top:var(--space-8); text-align:center; max-width:680px; margin-inline:auto; }
.casedeep-quote p{ font-size:var(--text-body-lg); color:var(--text-primary); font-style:italic; line-height:var(--leading-relaxed); margin-bottom:var(--space-3); }
.casedeep-quote cite{ font-size:var(--text-body-sm); color:var(--text-tertiary); font-style:normal; }
.casedeep-foot{ text-align:center; font-size:var(--text-caption); color:var(--text-tertiary); font-style:italic; margin-top:var(--space-8); }

/* ════════════════════════════════════════════════════════════════════
 * DIY vs MANAGED
 * ════════════════════════════════════════════════════════════════════ */
.diy-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-6); max-width:920px; margin-inline:auto; }
@media (min-width:760px){ .diy-grid{ grid-template-columns:1fr 1fr; align-items:start; } }
.diy-card{ padding:var(--space-8); border-radius:var(--radius-xl); border:1px solid var(--border-subtle); background:var(--bg-card); }
.diy-card.featured{ border:2px solid var(--brand-purple); box-shadow:var(--shadow-lg); position:relative; }
.diy-card.featured .badge{ position:absolute; top:calc(-1*var(--space-3)); left:var(--space-6); background:var(--brand-purple); color:#fff; padding:var(--space-1) var(--space-3); font-size:11px; font-weight:var(--weight-bold); letter-spacing:var(--tracking-wider); border-radius:var(--radius-sm); }
.diy-card h3{ font-size:var(--text-h4); margin-bottom:var(--space-5); }
.diy-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--space-3); }
.diy-list li{ display:flex; gap:var(--space-3); align-items:flex-start; font-size:var(--text-body-sm); color:var(--text-secondary); line-height:var(--leading-snug); }
.diy-list li .ic{ flex:none; width:18px; height:18px; border-radius:var(--radius-full); display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:var(--weight-bold); margin-top:1px; }
.diy-card:not(.featured) .ic{ background:var(--color-danger-bg); color:var(--color-danger-text); }
.diy-card.featured .ic{ background:var(--color-success-bg); color:var(--color-success-text); }
.diy-note{ text-align:center; max-width:680px; margin:var(--space-10) auto 0; font-size:var(--text-body); color:var(--text-secondary); font-style:italic; }

/* ════════════════════════════════════════════════════════════════════
 * FIRST 30 DAYS - horizontal stepper
 * ════════════════════════════════════════════════════════════════════ */
.first30{ background:var(--bg-subtle); }
.f30-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-5); counter-reset:f30; position:relative; }
@media (min-width:820px){ .f30-grid{ grid-template-columns:repeat(4,1fr); gap:var(--space-4); } }
.f30-step{ position:relative; background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:var(--space-6); counter-increment:f30; }
.f30-day{ font-family:var(--font-mono); font-size:var(--text-caption); font-weight:var(--weight-bold); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--brand-purple); display:block; margin-bottom:var(--space-3); }
.f30-step h3{ font-size:var(--text-h4); margin-bottom:var(--space-2); }
.f30-step p{ font-size:var(--text-body-sm); color:var(--text-secondary); line-height:var(--leading-relaxed); }
.first30-note{ text-align:center; max-width:680px; margin:var(--space-10) auto 0; font-size:var(--text-body); color:var(--text-secondary); font-style:italic; }

/* ════════════════════════════════════════════════════════════════════
 * PRICING REMINDER
 * ════════════════════════════════════════════════════════════════════ */
.price-reminder{ max-width:760px; margin-inline:auto; background:linear-gradient(180deg,var(--bg) 0%, var(--bg-subtle) 100%); border:1px solid var(--border-subtle); border-radius:var(--radius-2xl); padding:var(--space-10); text-align:center; box-shadow:var(--shadow-sm); }
.pr-headline{ font-family:var(--font-mono); font-size:var(--text-h4); font-weight:var(--weight-medium); color:var(--text-primary); margin-bottom:var(--space-2); }
.pr-headline .grad{ font-weight:var(--weight-bold); }
.pr-sub{ font-size:var(--text-body-sm); color:var(--text-tertiary); margin-bottom:var(--space-6); }
.pr-list{ list-style:none; padding:0; margin:0 0 var(--space-8); display:grid; grid-template-columns:1fr; gap:var(--space-2); text-align:left; max-width:420px; margin-inline:auto; }
@media (min-width:560px){ .pr-list{ grid-template-columns:1fr 1fr; } }
.pr-list li{ display:flex; gap:var(--space-2); font-size:var(--text-body-sm); color:var(--text-secondary); }
.pr-list li::before{ content:'✓'; color:var(--color-success); font-weight:var(--weight-bold); flex:none; }