/* =================================================================
   Digital Snowstorm — SEO Audits page
   Page-specific styles layered on /css/home.css + /css/technical-seo.css.
   Reuses the technical-SEO design system (split hero, snapshot panel,
   symptom cards, tabbed mock audit, before/after, counters, why-grid)
   and adds only what's unique to the audits page: a 5-phase process row
   and the 12-month roadmap "strategic pillars" module.
   ================================================================= */

/* ---------------------------------------------------------------
   Process: Mark's published 5-phase audit framework, as a numbered
   vertical timeline. Full-width rows give each phase room to breathe
   (the old 5-column layout made each card tall and cramped) and a
   connector line ties the phases into one flowing sequence.
   --------------------------------------------------------------- */
.phases{list-style:none;counter-reset:ph;max-width:54rem;margin:0 auto;padding:0;}
.phase{position:relative;display:grid;grid-template-columns:40px 1fr;gap:var(--s5);padding-bottom:var(--s6);counter-increment:ph;}
.phase:last-child{padding-bottom:0;}
/* connector line running down through the number badges */
.phase:not(:last-child)::before{content:"";position:absolute;left:19px;top:44px;bottom:-2px;width:2px;background:linear-gradient(var(--accent),rgba(var(--accent-rgb),.08));}
.phase-num{position:relative;z-index:1;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:1rem;color:#0A0A12;background:var(--grad);}
.phase-num::before{content:counter(ph);}
.phase-main{padding-top:.2rem;min-width:0;}
.phase-main h4{font-size:1.18rem;margin:0 0 .4rem;}
.phase-main p{color:var(--muted);font-size:var(--fs-base);margin:0;}

/* ---------------------------------------------------------------
   Deliverable split: top-align the two columns so the first
   checkmark lines up with the intro paragraph on the left.
   --------------------------------------------------------------- */
#deliverable .split{align-items:start;}
#deliverable .check{margin-bottom:0;}

/* ---------------------------------------------------------------
   Give the "published method" callout room to breathe after the
   phase timeline — match the section's own block padding.
   --------------------------------------------------------------- */
#process .callout{margin-top:clamp(3.5rem,6vw,6.5rem);}

/* ---------------------------------------------------------------
   Audit snapshot: one finding per dimension (hero panel).
   .snap-cat gets a per-dimension accent so the four layers read at a glance.
   --------------------------------------------------------------- */
.snap-cat.d-tech{color:#9FE3FF;}
.snap-cat.d-content{color:#B69CFF;}
.snap-cat.d-auth{color:#FFC98E;}
.snap-cat.d-geo{color:#74E0F2;}

/* ---------------------------------------------------------------
   The deliverable: 12-month roadmap "strategic pillars".
   Five business-language pillars, each with a gradient accent bar.
   --------------------------------------------------------------- */
.pillars{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s4);margin-top:var(--s6);}
@media (max-width:1080px){.pillars{grid-template-columns:repeat(3,1fr);}}
@media (max-width:760px){.pillars{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.pillars{grid-template-columns:1fr;}}
.pillar{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--s5);overflow:hidden;transition:border-color var(--dur),transform var(--dur) var(--ease);}
.pillar:hover{border-color:var(--line-2);transform:translateY(-3px);}
.pillar::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad);}
.pillar .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:var(--s4);color:#0A0A12;background:var(--grad);}
.pillar .ic svg{width:21px;height:21px;}
.pillar h3{font-size:1.02rem;line-height:1.25;margin-bottom:.35rem;}
.pillar p{color:var(--muted);font-size:var(--fs-sm);margin:0;}

html:is([data-theme="light"],[data-theme="evening"]) .pillar .ic,html:is([data-theme="light"],[data-theme="evening"]) .phase-num{color:#fff;}

/* ---------------------------------------------------------------
   Roadmap callout list (what the roadmap contains) — reuses .check,
   shown beside the pillars intro via .split, no new rules needed.
   --------------------------------------------------------------- */