/* =================================================================
   Digital Snowstorm — Technical SEO page
   Page-specific styles layered on top of /css/home.css.
   Unique split hero with a live "Site Health" diagnostic panel,
   symptom cards, 4-step process, before/after, animated counters.
   ================================================================= */

/* ---------------------------------------------------------------
   Unique split hero (text left, diagnostic panel right)
   Deliberately different from the centered homepage hero.
   --------------------------------------------------------------- */
.th-hero{position:relative;overflow:visible;padding-block:clamp(2.25rem,4.5vw,4rem);}
.th-hero .wrap{position:relative;z-index:2;}
/* reposition the glow orb to sit behind the panel on the right; z-index:-1 lets the
   glow bleed past the hero instead of being hard-clipped, removing the seam */
.th-hero .orb{left:auto;right:-8rem;top:-6rem;transform:none;width:min(40rem,80vw);height:min(40rem,80vw);opacity:.55;z-index:-1;}
.th-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(2rem,4vw,3.5rem);align-items:center;}
@media (max-width:940px){.th-grid{grid-template-columns:1fr;gap:var(--s8);}}

.th-copy{text-align:left;}
.th-copy h1{font-size:clamp(2.3rem,3.2vw + 1rem,3.5rem);max-width:15ch;margin-bottom:var(--s5);}
.th-copy .lead{max-width:40rem;margin-bottom:var(--s6);}
.th-copy .btn-row{margin-bottom:var(--s5);}
.th-trust{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;font-size:var(--fs-sm);font-weight:700;color:var(--ink);}
.th-trust .dot{width:5px;height:5px;border-radius:50%;background:var(--faint);flex:none;}
.th-trust .accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ---------------------------------------------------------------
   Audit Snapshot panel (the hero focal visual)
   Compact issue cards in plain language, each with a fix.
   --------------------------------------------------------------- */
.snapshot{position:relative;z-index:2;background:linear-gradient(180deg,#11131E,#0B0D16);border:1px solid var(--line-2);border-radius:var(--radius-lg);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden;}
.snapshot .app-bar .range{color:#FFC98E;border-color:rgba(255,201,142,.32);}
.snap-list{display:grid;gap:.6rem;padding:var(--s4);}
.snap{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:.75rem .85rem;transition:border-color var(--dur);}
.snap:hover{border-color:var(--line-2);}
.snap-top{display:flex;align-items:center;gap:.45rem;margin-bottom:.45rem;}
.snap-cat{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;padding:.14rem .5rem;}
.snap-metric{margin-left:auto;font-size:var(--fs-xs);font-weight:600;color:var(--muted);white-space:nowrap;}
.snap-t{font-size:var(--fs-base);font-weight:600;color:var(--ink);line-height:1.3;margin:0 0 .25rem;}
.snap .fix{font-size:var(--fs-sm);color:var(--muted);margin:0;line-height:1.45;}
.snap .fix b{color:var(--green);font-weight:700;margin-right:.3rem;}

/* ---------------------------------------------------------------
   Symptom cards (the problem / why technical SEO)
   --------------------------------------------------------------- */
.symptom{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--s6);}
.symptom .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:var(--s4);color:#FFB4B4;background:rgba(255,120,120,.1);border:1px solid rgba(255,120,120,.22);}
.symptom .ic svg{width:22px;height:22px;}
.symptom h3{font-size:1.2rem;margin-bottom:.4rem;}
.symptom p{color:var(--muted);font-size:var(--fs-base);margin:0;}

/* ---------------------------------------------------------------
   4-up process steps
   --------------------------------------------------------------- */
.steps.four{grid-template-columns:repeat(4,1fr);}
@media (max-width:980px){.steps.four{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.steps.four{grid-template-columns:1fr;}}

/* ---------------------------------------------------------------
   Before / After case comparison
   --------------------------------------------------------------- */
.ba{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s5);align-items:stretch;}
@media (max-width:760px){.ba{grid-template-columns:1fr;}}
.ba-col{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--s6);display:flex;flex-direction:column;}
.ba-col.after{border-color:rgba(var(--accent-rgb),.4);box-shadow:0 0 0 1px rgba(var(--accent-rgb),.18),0 20px 60px rgba(var(--focus-rgb),.1);}
.ba-tag{align-self:flex-start;font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;border-radius:999px;padding:.25rem .7rem;margin-bottom:var(--s4);}
.ba-col.before .ba-tag{color:#FF8E8E;background:rgba(255,120,120,.1);border:1px solid rgba(255,120,120,.25);}
.ba-col.after .ba-tag{color:var(--green);background:rgba(91,231,176,.1);border:1px solid rgba(91,231,176,.25);}
.ba-list{list-style:none;padding:0;margin:0;display:grid;gap:var(--s3);}
.ba-list li{display:grid;grid-template-columns:auto 1fr;gap:.6rem;margin:0;color:var(--muted);font-size:var(--fs-sm);align-items:start;}
.ba-list li b{color:var(--ink);font-weight:700;}
.ba-list .mk{width:18px;height:18px;margin-top:2px;flex:none;}
.ba-col.before .mk{color:#FF8E8E;}.ba-col.after .mk{color:var(--green);}
.ba-arrow{display:grid;place-items:center;color:var(--accent);}
.ba-arrow svg{width:30px;height:30px;}
@media (max-width:760px){.ba-arrow{transform:rotate(90deg);}}
.ba-foot{margin-top:var(--s6);text-align:center;font-size:var(--fs-sm);color:var(--muted);}

/* ---------------------------------------------------------------
   Mock technical audit report (tabbed, expandable findings)
   --------------------------------------------------------------- */
.audit{max-width:60rem;margin:0 auto;background:linear-gradient(180deg,#11131E,#0B0D16);border:1px solid var(--line-2);border-radius:var(--radius-lg);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden;}
.audit .app-bar .range{color:#FFC98E;border-color:rgba(255,201,142,.32);}
.audit-tabs{display:flex;gap:.2rem;padding:.5rem .6rem 0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;}
.audit-tabs::-webkit-scrollbar{display:none;}
.audit-tab{flex:1 1 0;white-space:nowrap;background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);font:inherit;font-size:var(--fs-sm);font-weight:600;padding:.7rem .8rem;margin-bottom:-1px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;transition:color var(--dur),border-color var(--dur);}
.audit-tab:hover{color:var(--ink);}
.audit-tab .ct{font-size:var(--fs-xs);font-weight:700;color:var(--faint);background:rgba(255,255,255,.06);border-radius:999px;padding:.05rem .45rem;}
.audit-tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--blue);}
.audit-tab[aria-selected="true"] .ct{color:var(--accent);background:rgba(var(--accent-rgb),.14);}

.audit-panel{display:none;padding:var(--s4);}
.audit-panel.active{display:grid;gap:.5rem;}
.audit-note{font-size:var(--fs-xs);color:var(--faint);text-transform:uppercase;letter-spacing:.08em;font-weight:600;padding:.1rem .15rem .35rem;}

.finding{background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:border-color var(--dur);}
.finding:hover{border-color:var(--line-2);}
.finding-q{width:100%;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:.7rem;padding:.8rem 1rem;background:none;border:none;cursor:pointer;text-align:left;font:inherit;}
.prio{font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;border-radius:7px;padding:.2rem .45rem;flex:none;line-height:1;}
.prio.p1{color:#FF8E8E;background:rgba(255,120,120,.12);border:1px solid rgba(255,120,120,.3);}
.prio.p2{color:#FFC98E;background:rgba(255,180,100,.12);border:1px solid rgba(255,180,100,.32);}
.prio.p3{color:#3FB97A;background:rgba(40,160,100,.14);border:1px solid rgba(40,160,100,.34);}
.prio.p4{color:var(--accent);background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.3);}
.finding-t{font-size:var(--fs-base);font-weight:600;color:var(--ink);min-width:0;}
.finding-q:hover .finding-t{color:var(--accent);}
.finding-tag{font-size:var(--fs-xs);color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;padding:.2rem .6rem;white-space:nowrap;}
.finding-ic{width:20px;height:20px;flex:none;color:var(--accent);transition:transform var(--dur);}
.finding-q[aria-expanded="true"] .finding-ic{transform:rotate(45deg);}
@media (max-width:600px){.finding-q{grid-template-columns:auto 1fr auto;}.finding-tag{display:none;}}

.finding-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur) var(--ease);}
.finding-q[aria-expanded="true"] + .finding-a{grid-template-rows:1fr;}
.finding-a > div{overflow:hidden;}
.finding-a .inner{padding:0 1rem 1rem;display:grid;gap:var(--s4);}
.fr{display:grid;grid-template-columns:5rem 1fr;gap:var(--s4);align-items:start;}
@media (max-width:600px){.fr{grid-template-columns:1fr;gap:.3rem;}}
.frl{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);padding-top:2px;}
.fr.fix .frl{color:var(--green);}
.fr p{margin:0;color:var(--muted);font-size:var(--fs-sm);}
.fr code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82em;color:var(--cyan);background:rgba(var(--cyan-rgb),.08);border:1px solid rgba(var(--cyan-rgb),.16);border-radius:5px;padding:.05rem .35rem;word-break:break-word;}
.audit-foot{max-width:60rem;margin:var(--s5) auto 0;text-align:center;font-size:var(--fs-sm);color:var(--faint);}

/* 3-up results row (symmetric after dropping the rankings stat) */
.stats.three{grid-template-columns:repeat(3,1fr);}
@media (max-width:680px){.stats.three{grid-template-columns:1fr;}}

/* keep testimonial author rows aligned even when a role wraps to two lines */
.quotes .who .ro{line-height:1.3;}
.quotes .who > div{min-height:3.5rem;display:flex;flex-direction:column;justify-content:center;}

/* differentiators (icon cards, 2x2) */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);}
@media (max-width:680px){.why-grid{grid-template-columns:1fr;}}
.why{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--s5) var(--s6);align-items:start;}
.why .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none;color:#0A0A12;background:var(--grad);}
.why .ic svg{width:22px;height:22px;}
.why h3{font-size:1.1rem;margin-bottom:.25rem;}
.why p{color:var(--muted);font-size:var(--fs-sm);margin:0;}

/* Light theme overrides (variable palette lives in home.css) */
html:is([data-theme="light"],[data-theme="evening"]) .snapshot,html:is([data-theme="light"],[data-theme="evening"]) .audit{background:linear-gradient(180deg,#FFFFFF,#EEF2F9);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.7);}
html:is([data-theme="light"],[data-theme="evening"]) .snap{background:rgba(17,24,52,.025);}
html:is([data-theme="light"],[data-theme="evening"]) .snap-cat{background:rgba(17,24,52,.05);}
html:is([data-theme="light"],[data-theme="evening"]) .audit-tab .ct{background:rgba(17,24,52,.06);}
html:is([data-theme="light"],[data-theme="evening"]) .finding{background:rgba(17,24,52,.02);}
html:is([data-theme="light"],[data-theme="evening"]) .finding-tag{background:rgba(17,24,52,.04);}
html:is([data-theme="light"],[data-theme="evening"]) .why .ic{color:#fff;}
/* Darken the amber so issue counts + P2 chips stay legible on the near-white snapshot bg */
html:is([data-theme="light"],[data-theme="evening"]) .snapshot .app-bar .range,html:is([data-theme="light"],[data-theme="evening"]) .audit .app-bar .range{color:#B45309;border-color:rgba(180,83,9,.34);}
html:is([data-theme="light"],[data-theme="evening"]) .prio.p2{color:#B45309;background:rgba(180,83,9,.10);border-color:rgba(180,83,9,.32);}