/* ============================================
   Service landing pages: Google Ads, Social Media, AI Marketing, Web Development.
   Loaded after css/seo-services.css, which supplies the shared hero, packages, comparison
   table, guide form and FAQ styling (ss- classes). Everything new here is namespaced sv-.
   Each page sets a secondary accent (--sv-a) on <body> so it has its own feel while the
   brand red stays the primary colour.
   ============================================ */

body.sv-ads  { --sv-a: #F5A524; --sv-a-rgb: 245,165,36; }
body.sv-soc  { --sv-a: #F0629B; --sv-a-rgb: 240,98,155; }
body.sv-ai   { --sv-a: #38BDF8; --sv-a-rgb: 56,189,248; }
body.sv-web  { --sv-a: #34D399; --sv-a-rgb: 52,211,153; }

/* ---------- Hero variants ---------- */
.sv-hero.ss-hero { padding: 64px 0 80px; }
.sv-ads .ss-hero {
  background:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px) 0 0 / 100% 44px,
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px) 0 0 / 44px 100%,
    radial-gradient(55% 75% at 86% 20%, rgba(203,31,44,0.28), transparent 62%),
    radial-gradient(35% 50% at 4% 100%, rgba(var(--sv-a-rgb),0.10), transparent 70%), #121212;
}
.sv-soc .ss-hero {
  background:
    radial-gradient(48% 70% at 90% 12%, rgba(var(--sv-a-rgb),0.22), transparent 62%),
    radial-gradient(50% 70% at 78% 92%, rgba(203,31,44,0.22), transparent 64%),
    radial-gradient(34% 50% at 2% 100%, rgba(203,31,44,0.10), transparent 70%), #121212;
}
.sv-ai .ss-hero {
  background:
    radial-gradient(#ffffff14 1.2px, transparent 1.4px) 0 0 / 26px 26px,
    radial-gradient(52% 72% at 86% 20%, rgba(var(--sv-a-rgb),0.20), transparent 62%),
    radial-gradient(45% 60% at 8% 100%, rgba(203,31,44,0.16), transparent 70%), #121212;
}
.sv-web .ss-hero {
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.028) 0 2px, transparent 2px 26px),
    radial-gradient(52% 72% at 86% 18%, rgba(var(--sv-a-rgb),0.16), transparent 62%),
    radial-gradient(40% 60% at 6% 100%, rgba(203,31,44,0.16), transparent 70%), #121212;
}
.sv-hero-points { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 22px 0 0; padding: 0; list-style: none; }
.sv-hero-points li { display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; color: #d2d2d2; }
.sv-hero-points svg { width: 16px; height: 16px; color: var(--sv-a); flex: none; }
.sv-illus { text-align: center; font-size: 0.72rem; color: var(--muted); margin: 14px 0 0; }

/* ---------- Shared bits ---------- */
.sv-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sv-a); border: 1px solid rgba(var(--sv-a-rgb),0.4); background: rgba(var(--sv-a-rgb),0.08); }
.sv-mock { position: relative; max-width: 500px; margin-left: auto; width: 100%; }
.sv-window { border-radius: 20px; padding: 18px; background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)), #151515; border: 1px solid var(--glass-border); box-shadow: 0 40px 80px -36px rgba(0,0,0,0.95), 0 0 90px -40px rgba(var(--sv-a-rgb),0.55); }
.sv-mock-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; font-size: 0.8rem; color: #e6e6e6; }
.sv-mock-head b { font-weight: 600; }
.sv-dots { display: inline-flex; gap: 5px; margin-right: 10px; }
.sv-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.18); }

/* ---------- Google Ads: search term console ---------- */
.sv-term { display: flex; align-items: center; gap: 12px; padding: 11px 14px; margin-bottom: 8px; border-radius: 12px; font-size: 0.84rem; color: #e8e8e8; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.08); opacity: 0; transform: translateY(8px); animation: svIn .5s ease forwards; }
.sv-term:nth-of-type(2) { animation-delay: .15s; } .sv-term:nth-of-type(3) { animation-delay: .3s; } .sv-term:nth-of-type(4) { animation-delay: .45s; } .sv-term:nth-of-type(5) { animation-delay: .6s; }
.sv-term .ico { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 0.72rem; font-weight: 800; }
.sv-term.keep .ico { background: rgba(62,207,122,0.18); color: #3ecf7a; }
.sv-term.cut .ico { background: rgba(203,31,44,0.2); color: #ff6b75; }
.sv-term .q { flex: 1; min-width: 0; }
.sv-term.cut .q { color: #a9a9a9; text-decoration: line-through; text-decoration-color: rgba(255,107,117,0.6); }
.sv-term .tag { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.sv-term.keep .tag { color: #3ecf7a; } .sv-term.cut .tag { color: #ff6b75; }
.sv-flow { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: rgba(var(--sv-a-rgb),0.07); border: 1px solid rgba(var(--sv-a-rgb),0.22); }
.sv-flow small { display: block; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sv-a); font-weight: 700; margin-bottom: 9px; }
.sv-bar { height: 10px; border-radius: 6px; background: rgba(255,255,255,0.08); overflow: hidden; margin-bottom: 7px; }
.sv-bar i { display: block; height: 100%; border-radius: 6px; width: 0; animation: svBar 1.2s .8s ease forwards; }
.sv-bar.good i { background: linear-gradient(90deg, #2f9e5c, #3ecf7a); --w: 78%; }
.sv-bar.bad i { background: linear-gradient(90deg, #8a1720, #cb1f2c); --w: 22%; }
.sv-flow-l { display: flex; justify-content: space-between; font-size: 0.74rem; color: #cfcfcf; }
@keyframes svIn { to { opacity: 1; transform: none; } }
@keyframes svBar { to { width: var(--w); } }

/* ---------- Social: phone + week ---------- */
.sv-phone { width: min(280px, 72%); margin: 0 auto; padding: 12px; border-radius: 34px; background: #0c0c0c; border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 40px 80px -30px rgba(0,0,0,0.95), 0 0 100px -30px rgba(var(--sv-a-rgb),0.5); position: relative; z-index: 1; }
.sv-phone-in { border-radius: 24px; overflow: hidden; background: #161616; }
.sv-post-h { display: flex; align-items: center; gap: 9px; padding: 11px 12px; font-size: 0.72rem; font-weight: 600; color: #fff; }
.sv-post-h i { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--sv-a)); flex: none; }
.sv-post-img { aspect-ratio: 1 / 1; background: linear-gradient(135deg, rgba(203,31,44,0.55), rgba(var(--sv-a-rgb),0.45)), #222; position: relative; display: grid; place-items: center; }
.sv-post-img span { font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; color: #fff; text-align: center; padding: 0 22px; line-height: 1.25; text-shadow: 0 2px 14px rgba(0,0,0,0.4); }
.sv-post-a { display: flex; gap: 12px; padding: 10px 12px 4px; color: #e8e8e8; }
.sv-post-a svg { width: 19px; height: 19px; }
.sv-post-t { padding: 4px 12px 14px; }
.sv-post-t .sv-line { height: 7px; margin-top: 6px; }
.sv-chip { position: absolute; z-index: 2; padding: 9px 13px; border-radius: 12px; font-size: 0.74rem; font-weight: 600; color: #fff; background: rgba(22,22,22,0.92); border: 1px solid var(--glass-border); box-shadow: 0 16px 34px -14px rgba(0,0,0,0.8); backdrop-filter: blur(6px); display: flex; align-items: center; gap: 8px; animation: svFloat 6s ease-in-out infinite; }
.sv-chip b { color: var(--sv-a); font-weight: 700; }
.sv-chip.c1 { top: 8%; left: -2%; } .sv-chip.c2 { top: 42%; right: -4%; animation-delay: -2s; } .sv-chip.c3 { bottom: 8%; left: 2%; animation-delay: -4s; }
@keyframes svFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.sv-soc .sv-mock { display: grid; place-items: center; padding: 10px 0; min-height: 430px; }
.sv-line { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.12); margin-top: 7px; }
.sv-line.s { width: 62%; }

/* ---------- AI: text-back thread ---------- */
.sv-thread { display: grid; gap: 10px; }
.sv-call { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(203,31,44,0.12); border: 1px solid rgba(203,31,44,0.32); font-size: 0.82rem; color: #ffd6d9; }
.sv-call svg { width: 18px; height: 18px; color: #ff6b75; flex: none; }
.sv-call small { margin-left: auto; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: #ff9aa2; }
.sv-msg { max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: 0.84rem; line-height: 1.45; opacity: 0; transform: translateY(8px); animation: svIn .5s ease forwards; }
.sv-msg.them { justify-self: start; background: rgba(255,255,255,0.08); color: #f0f0f0; border-bottom-left-radius: 5px; }
.sv-msg.us { justify-self: end; background: linear-gradient(135deg, rgba(var(--sv-a-rgb),0.9), rgba(var(--sv-a-rgb),0.62)); color: #04212e; font-weight: 500; border-bottom-right-radius: 5px; }
.sv-thread > :nth-child(2) { animation-delay: .5s; } .sv-thread > :nth-child(3) { animation-delay: 1.3s; } .sv-thread > :nth-child(4) { animation-delay: 2.1s; } .sv-thread > :nth-child(5) { animation-delay: 2.9s; } .sv-thread > :nth-child(6) { animation-delay: 3.7s; }
.sv-booked { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; background: rgba(62,207,122,0.12); border: 1px solid rgba(62,207,122,0.32); color: #b8f0d0; font-size: 0.82rem; font-weight: 600; opacity: 0; animation: svIn .5s 4.5s ease forwards; }
.sv-booked svg { width: 17px; height: 17px; color: #3ecf7a; flex: none; }

/* ---------- Web: browser + gauges ---------- */
.sv-browser-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sv-url { flex: 1; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); font-size: 0.76rem; color: #dcdcdc; }
.sv-site { border-radius: 12px; overflow: hidden; background: #101010; border: 1px solid rgba(255,255,255,0.09); }
.sv-site-nav { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.sv-site-nav i { width: 54px; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.18); }
.sv-site-nav span { display: flex; gap: 8px; } .sv-site-nav span i { width: 26px; }
.sv-site-hero { padding: 24px 18px 20px; background: linear-gradient(135deg, rgba(203,31,44,0.22), rgba(var(--sv-a-rgb),0.10)); }
.sv-site-hero .h { height: 13px; border-radius: 6px; background: rgba(255,255,255,0.85); width: 78%; margin-bottom: 9px; }
.sv-site-hero .h.s { width: 52%; }
.sv-site-hero .sv-line { width: 66%; }
.sv-site-cta { display: inline-block; margin-top: 16px; padding: 9px 18px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.74rem; font-weight: 700; box-shadow: 0 0 0 0 rgba(203,31,44,0.6); animation: svPulse 2.4s infinite; }
@keyframes svPulse { 0% { box-shadow: 0 0 0 0 rgba(203,31,44,0.55); } 70% { box-shadow: 0 0 0 14px rgba(203,31,44,0); } 100% { box-shadow: 0 0 0 0 rgba(203,31,44,0); } }
.sv-gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.sv-gauge { padding: 12px 8px; border-radius: 12px; text-align: center; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.09); }
.sv-gauge .ring { --ring: 0; width: 46px; height: 46px; margin: 0 auto 7px; border-radius: 50%; background: conic-gradient(var(--sv-a) calc(var(--ring) * 1%), rgba(255,255,255,0.1) 0); display: grid; place-items: center; animation: svRing 1.4s .4s ease forwards; }
.sv-gauge .ring::after { content: ""; width: 34px; height: 34px; border-radius: 50%; background: #151515; display: block; }
.sv-gauge b { display: block; font-size: 0.72rem; color: #fff; line-height: 1.25; }
.sv-gauge span { display: block; font-size: 0.64rem; color: var(--muted); margin-top: 2px; }
@property --ring { syntax: '<number>'; initial-value: 0; inherits: false; }
@keyframes svRing { to { --ring: var(--to, 92); } }

/* ---------- Steps ---------- */
.sv-steps { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 22px; position: relative; counter-reset: sv; }
.sv-steps::before { content: ""; position: absolute; top: 25px; left: 6%; right: 6%; height: 2px; background: linear-gradient(90deg, rgba(var(--sv-a-rgb),0.6), rgba(203,31,44,0.5)); opacity: .5; }
.sv-step { position: relative; padding: 0 4px; text-align: left; }
.sv-step .num { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; color: #fff; background: #1a1a1a; border: 2px solid var(--sv-a); box-shadow: 0 0 0 6px var(--bg, #0b0b0b); position: relative; z-index: 1; margin-bottom: 16px; }
.sv-step .when { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sv-a); margin-bottom: 6px; }
.sv-step h3 { font-size: 1.1rem; margin-bottom: 8px; }
.sv-step p { font-size: 0.9rem; line-height: 1.65; margin: 0; }

/* ---------- Generic card grids ---------- */
.sv-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 20px; }
.sv-card { padding: 26px 24px; display: flex; flex-direction: column; }
.sv-card .ss-icon { margin-bottom: 16px; background: rgba(var(--sv-a-rgb),0.13); color: var(--sv-a); }
.sv-card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.sv-card p { font-size: 0.9rem; line-height: 1.65; margin: 0; }
.sv-card .fix { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 0.84rem; color: #d2d2d2; line-height: 1.55; }
.sv-card .fix b { color: var(--sv-a); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; display: block; margin-bottom: 3px; }

/* ---------- Versus ---------- */
.sv-versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.sv-side { padding: 30px 28px; border-radius: 20px; background: var(--glass-bg); border: 1px solid var(--glass-border); }
.sv-side.hl { border-color: rgba(var(--sv-a-rgb),0.5); background: linear-gradient(180deg, rgba(var(--sv-a-rgb),0.09), transparent 70%), var(--glass-bg); }
.sv-side h3 { font-size: 1.25rem; margin: 10px 0 8px; }
.sv-side > p { font-size: 0.94rem; line-height: 1.7; }
.sv-side ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.sv-side li { display: flex; gap: 10px; font-size: 0.9rem; color: #d6d6d6; line-height: 1.5; }
.sv-side li svg { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--sv-a); }
.sv-versus-note { text-align: center; max-width: 760px; margin: 26px auto 0; font-size: 1rem; color: #cfcfcf; line-height: 1.7; }

/* ---------- Interactive tools ---------- */
.sv-tool { max-width: 920px; margin: 0 auto; padding: 34px 34px 30px; border-radius: 24px; border: 1px solid rgba(var(--sv-a-rgb),0.35); background: radial-gradient(80% 90% at 100% 0%, rgba(var(--sv-a-rgb),0.12), transparent 65%), #141414; box-shadow: 0 30px 70px -40px rgba(var(--sv-a-rgb),0.5); }
.sv-tool-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 34px; align-items: start; }
.sv-field { margin-bottom: 22px; }
.sv-field label { display: flex; justify-content: space-between; gap: 12px; font-size: 0.86rem; font-weight: 600; color: #fff; margin-bottom: 10px; }
.sv-field label output { color: var(--sv-a); font-family: var(--font-head); font-weight: 700; }
.sv-field small { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--muted); margin-top: 6px; }
.sv-range { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 6px; outline: none; background: linear-gradient(90deg, var(--accent) var(--p, 0%), rgba(255,255,255,0.13) var(--p, 0%)); cursor: pointer; }
.sv-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 4px solid var(--accent); box-shadow: 0 2px 10px rgba(0,0,0,0.5); cursor: grab; }
.sv-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--accent); cursor: grab; }
.sv-range:focus-visible { outline: 2px solid var(--sv-a); outline-offset: 6px; }
.sv-result { padding: 24px; border-radius: 18px; background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border); }
.sv-result .k { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sv-a); margin-bottom: 6px; }
.sv-result .big { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.3rem); color: #fff; line-height: 1.1; margin-bottom: 6px; }
.sv-result p { font-size: 0.88rem; line-height: 1.6; margin: 0 0 12px; }
.sv-result dl { margin: 14px 0 0; display: grid; gap: 0; }
.sv-result dl > div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 0.86rem; }
.sv-result dt { color: var(--muted); } .sv-result dd { margin: 0; color: #fff; font-weight: 600; text-align: right; }
.sv-tool-note { margin: 18px 0 0; font-size: 0.76rem; color: var(--muted); line-height: 1.55; }
.sv-tool .btn { margin-top: 6px; }

.sv-options { display: grid; gap: 10px; }
.sv-option { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 14px; border: 1px solid var(--glass-border); background: rgba(255,255,255,0.04); cursor: pointer; font-size: 0.92rem; color: #eaeaea; transition: border-color .2s, background .2s; }
.sv-option:hover { border-color: rgba(var(--sv-a-rgb),0.5); }
.sv-option input { accent-color: var(--accent); width: 18px; height: 18px; flex: none; }
.sv-option:has(input:checked) { border-color: var(--accent); background: rgba(203,31,44,0.12); }
.sv-option small { margin-left: auto; color: var(--muted); font-size: 0.76rem; }

/* ---------- Tabs ---------- */
.sv-tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 28px; }
.sv-tab { padding: 10px 20px; border-radius: 999px; font: 600 0.88rem var(--font-body, inherit); color: #ddd; background: var(--glass-bg); border: 1px solid var(--glass-border); cursor: pointer; transition: all .2s; }
.sv-tab:hover { border-color: rgba(var(--sv-a-rgb),0.6); color: #fff; }
.sv-tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.sv-panel { max-width: 920px; margin: 0 auto; }
.sv-panel[hidden] { display: none; }
.sv-panel-in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 34px; padding: 32px; border-radius: 22px; background: var(--glass-bg); border: 1px solid var(--glass-border); }
.sv-panel h3 { font-size: 1.3rem; margin-bottom: 10px; }
.sv-panel p { font-size: 0.95rem; line-height: 1.7; }
.sv-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-self: start; }
.sv-cal b { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; color: var(--muted); padding-bottom: 4px; }
.sv-cal span { aspect-ratio: 1 / 1.05; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); display: grid; place-items: center; font-size: 0.7rem; color: #777; }
.sv-cal span.on { background: linear-gradient(160deg, rgba(203,31,44,0.55), rgba(var(--sv-a-rgb),0.4)); border-color: transparent; color: #fff; font-weight: 700; }
.sv-examples { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.sv-examples li { font-size: 0.9rem; color: #d6d6d6; padding-left: 18px; position: relative; line-height: 1.5; }
.sv-examples li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--sv-a); }

/* ---------- Proof strip ---------- */
.sv-proofband { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 34px; padding: 34px; border-radius: 24px; border: 1px solid var(--glass-border); background: radial-gradient(70% 90% at 0% 0%, rgba(var(--sv-a-rgb),0.10), transparent 60%), var(--glass-bg); align-items: center; }
.sv-proofband h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 12px; }
.sv-proofband p { font-size: 0.98rem; line-height: 1.7; }
.sv-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sv-stat { padding: 18px 16px; border-radius: 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); text-align: center; }
.sv-stat b { display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.9rem; color: #fff; line-height: 1; }
.sv-stat span { display: block; margin-top: 6px; font-size: 0.76rem; color: var(--muted); }

/* ---------- Add-ons / price list ---------- */
.sv-addons { max-width: 760px; margin: 0 auto; border: 1px solid var(--glass-border); border-radius: 20px; overflow: hidden; background: var(--glass-bg); }
.sv-addons h3 { padding: 20px 26px 6px; font-size: 1.15rem; }
.sv-addons > p { padding: 0 26px 12px; margin: 0; font-size: 0.86rem; color: var(--muted); }
.sv-addons ul { list-style: none; margin: 0; padding: 0; }
.sv-addons li { display: flex; justify-content: space-between; gap: 18px; padding: 13px 26px; border-top: 1px solid var(--border); font-size: 0.92rem; color: #e2e2e2; }
.sv-addons li b { color: #fff; font-family: var(--font-head); white-space: nowrap; }

/* ---------- Tier meta on package cards ---------- */
.sv-tier-meta { margin: 8px 0 4px; display: grid; gap: 6px; }
.sv-tier-meta div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,0.045); border: 1px solid var(--border); font-size: 0.8rem; color: #d2d2d2; }
.sv-tier-meta b { color: #fff; text-align: right; }
.sv-quote-tag { display: block; font-family: var(--font-head); font-size: 1.7rem; font-weight: 800; color: #fff; margin: 16px 0 2px; }
.sv-quote-sub { font-size: 0.82rem; color: var(--muted); margin: 0 0 8px; }

/* ---------- Web: audit tool ---------- */
.sv-checks { display: grid; gap: 9px; }
.sv-verdict { min-height: 5.2em; }
.sv-meter { height: 10px; border-radius: 6px; background: rgba(255,255,255,0.1); overflow: hidden; margin: 8px 0 14px; }
.sv-meter i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--sv-a)); transition: width .4s ease; }

/* ---------- Tables: extra alignment for this template ---------- */
.sv-note { text-align: center; font-size: 0.84rem; color: var(--muted); margin: 22px 0 0; }
.sv-note a { color: var(--accent-text, #ff3b47); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .sv-grid { --cols: 2 !important; }
  .sv-tool-grid, .sv-proofband { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .sv-mock { margin: 0 auto; }
  .sv-steps { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .sv-steps::before { display: none; }
  .sv-step { display: grid; grid-template-columns: 50px minmax(0, 1fr); column-gap: 16px; }
  .sv-step .num { grid-row: 1 / span 3; margin: 0; }
  .sv-versus { grid-template-columns: minmax(0, 1fr); }
  .sv-panel-in { grid-template-columns: minmax(0, 1fr); }
  .sv-soc .sv-mock { min-height: 0; padding-bottom: 30px; }
}
@media (max-width: 640px) {
  .sv-hero.ss-hero { padding: 40px 0 56px; }
  .sv-grid { --cols: 1 !important; }
  .sv-tool { padding: 24px 18px; border-radius: 20px; }
  .sv-panel-in, .sv-proofband { padding: 22px 18px; }
  .sv-chip { display: none; }
  .sv-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sv-addons li { padding: 12px 18px; flex-wrap: wrap; }
  .sv-gauges { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-term, .sv-msg, .sv-booked { animation: none; opacity: 1; transform: none; }
  .sv-bar i { animation: none; width: var(--w); }
  .sv-chip, .sv-site-cta { animation: none; }
  .sv-gauge .ring { animation: none; --ring: var(--to, 92); }
}

/* Tier bands under the budget slider */
.sv-bands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.sv-band { padding: 10px 8px; border-radius: 12px; text-align: center; font-size: 0.74rem; color: var(--muted); background: rgba(255,255,255,0.04); border: 1px solid var(--border); transition: all .25s; }
.sv-band b { display: block; font-size: 0.8rem; color: #ddd; margin-bottom: 2px; }
.sv-band.on { border-color: var(--accent); background: rgba(203,31,44,0.14); color: #f0d0d3; }
.sv-band.on b { color: #fff; }

/* Service package cards: tighter than the SEO defaults */
@media (min-width: 981px) {
  .sv-ads .ss-packages .ss-tagline, .sv-soc .ss-packages .ss-tagline, .sv-ai .ss-packages .ss-tagline, .sv-web .ss-packages .ss-tagline { min-height: 3em; }
  .sv-ads .ss-packages .ss-best, .sv-soc .ss-packages .ss-best, .sv-ai .ss-packages .ss-best, .sv-web .ss-packages .ss-best { min-height: 5.6rem; }
}

/* Quote card */
.sv-quote { margin: 0; padding: 26px 26px 22px; border-radius: 18px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); border-left: 3px solid var(--sv-a); }
.sv-quote p { font-size: 1.02rem; line-height: 1.7; color: #e8e8e8; font-style: italic; margin: 0; }
.sv-quote cite { display: block; margin-top: 14px; font-style: normal; font-size: 0.84rem; color: var(--muted); }