/* ============================================================================
   CVN Computers — Service landing pages (SEO)
   Shared component styles for the individual high-intent service pages.
   Built on the tokens in styles.css; loaded after it.
   ========================================================================== */
.svc-lead{max-width:70ch}
.svc-body{display:grid;gap:clamp(2.4rem,5vw,3.6rem)}

/* two-column: main + sticky aside */
.svc-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(1.6rem,4vw,3rem);align-items:start}
.svc-aside{position:sticky;top:96px;display:grid;gap:1rem}
@media (max-width:900px){.svc-layout{grid-template-columns:1fr}.svc-aside{position:static}}

/* symptom / bullet cards */
.svc-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.7rem;margin-top:1.3rem}
.svc-check{display:flex;gap:.7rem;align-items:flex-start;padding:.95rem 1.1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm)}
.svc-check svg{width:20px;height:20px;flex:none;color:var(--brand-ink);margin-top:.1rem}
.svc-check span{font-size:.92rem;color:var(--ink-2);line-height:1.45}

/* numbered steps */
.svc-steps{display:grid;gap:.9rem;margin-top:1.3rem;counter-reset:step}
.svc-step{display:flex;gap:1rem;align-items:flex-start;padding:1.1rem 1.3rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm)}
.svc-step::before{counter-increment:step;content:counter(step);flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-mono);font-weight:600;font-size:.9rem;background:var(--brand);color:var(--on-brand)}
.svc-step b{display:block;color:var(--ink);font-size:1rem}
.svc-step p{color:var(--ink-3);font-size:.9rem;margin-top:.2rem;line-height:1.5}

/* price / booking card */
.svc-pricecard{padding:1.5rem 1.6rem;background:linear-gradient(150deg,var(--brand-soft),var(--surface-2));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.svc-pricecard .lab{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.svc-pricecard .amt{font-family:var(--font-mono);font-weight:700;font-size:2rem;color:var(--brand-ink);line-height:1.1;margin:.2rem 0}
.svc-pricecard .amt small{font-size:.9rem;font-weight:500;color:var(--ink-3)}
.svc-pricecard .fine{font-size:.82rem;color:var(--ink-2);margin:.5rem 0 1rem;line-height:1.5}
.svc-pricecard .btn{width:100%;justify-content:center;margin-bottom:.55rem}
.svc-trustcard{padding:1.3rem 1.4rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.svc-trustcard li{display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem;color:var(--ink-2);padding:.4rem 0;line-height:1.45}
.svc-trustcard li+li{border-top:1px solid var(--line)}
.svc-trustcard svg{width:18px;height:18px;flex:none;color:var(--ok,#12a150);margin-top:.1rem}

/* FAQ (crawlable, no JS required) */
.svc-faq{display:grid;gap:.6rem;margin-top:1.3rem}
.svc-faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.svc-faq summary{cursor:pointer;list-style:none;padding:1rem 1.2rem;font-weight:600;color:var(--ink);display:flex;justify-content:space-between;gap:1rem;align-items:center}
.svc-faq summary::-webkit-details-marker{display:none}
.svc-faq summary::after{content:"+";font-family:var(--font-mono);font-size:1.3rem;color:var(--brand-ink);transition:transform .2s}
.svc-faq details[open] summary::after{transform:rotate(45deg)}
.svc-faq details>div{padding:0 1.2rem 1.15rem;color:var(--ink-2);font-size:.92rem;line-height:1.6}

/* related services */
.svc-related{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.8rem;margin-top:1.3rem}
.svc-related a{display:flex;flex-direction:column;gap:.35rem;padding:1.1rem 1.25rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);transition:.2s var(--ease)}
.svc-related a:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.svc-related b{color:var(--ink);font-size:.98rem}
.svc-related span{color:var(--ink-3);font-size:.82rem}
.svc-related .go{margin-top:.15rem;color:var(--brand-ink);font-size:.82rem;font-weight:700}

.svc-prose p{color:var(--ink-2);line-height:1.7;max-width:72ch}
.svc-prose p+p{margin-top:1rem}
.svc-sec-h{font-size:clamp(1.35rem,2.6vw,1.8rem);margin-bottom:.2rem}
.svc-sec-lead{color:var(--ink-3);font-size:.95rem}