/* Homepage service sections v2 (2026-11-09): Amazon sellers (light), TikTok Shop brands (dark), KDP authors (tint).
   One structure: label, headline, problems, services, proof, one next step. Built by design/build-services-v2.py.
   Tokens from the homepage :root; the .tag chip, h2 and .btn come from the homepage styles. */

.sv{padding:clamp(80px,9vw,120px) 0}
.sv-light{background:var(--white)}
.sv-tint{background:#F2F9EC}
.sv-dark{background:var(--ink-900);color:#fff}
.sv .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- label + headline ---------- */
.sv-head h2{margin:16px 0 0;max-width:20em;text-wrap:balance}
.sv-dark .sv-head h2{color:#fff}
.sv-dark .tag{background:rgba(255,255,255,.08);color:#fff}

/* ---------- problems: plain statements in our voice, never in quotation marks ---------- */
.sv-problems{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:8px 28px;margin:28px 0 0;padding:18px 0;
  border-top:1px solid var(--slate-200);border-bottom:1px solid var(--slate-200)}
.sv-k{margin:0;font:600 14px/20px var(--body);color:var(--slate-500)}
.sv-problems ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 28px;margin:0;padding:0;list-style:none}
.sv-problems li{position:relative;padding-left:16px;font-size:16px;line-height:1.45;color:var(--ink-900)}
.sv-problems li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--slate-400)}
.sv-dark .sv-problems{border-color:rgba(255,255,255,.12)}
.sv-dark .sv-k{color:var(--slate-300)}
.sv-dark .sv-problems li{color:#fff}
.sv-dark .sv-problems li::before{background:var(--slate-400)}

.sv-order{margin:28px 0 0;font-size:16px;line-height:1.5;color:var(--slate-300)}

/* ---------- service cards: equal, one idea each, outcome first ---------- */
.sv-cards{display:grid;gap:20px;margin:28px 0 0;padding:0;list-style:none}
.sv-c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sv-c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sv-card{position:relative;display:flex;flex-direction:column;padding:26px 26px 24px;border:1px solid var(--slate-200);border-radius:20px;background:#fff}
.sv-light .sv-card{background:var(--slate-50)}
.sv-dark .sv-card{background:var(--ink-800);border-color:rgba(255,255,255,.08)}
.sv-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--green-50);color:var(--green-700)}
.sv-ic svg{width:22px;height:22px}
.sv-dark .sv-ic{background:rgba(116,209,66,.14);color:var(--green-500)}
.sv-card h3{margin:18px 0 0;font:600 19px/1.3 var(--body);color:var(--ink-900);text-wrap:balance}
.sv-out{margin:8px 0 0;font-size:16px;line-height:1.5;color:var(--ink-700)}
.sv-inc{display:grid;gap:8px;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--slate-200);list-style:none}
.sv-inc li{display:flex;gap:10px;font-size:14.5px;line-height:1.45;color:var(--slate-500)}
.sv-inc svg,.sv-audit li svg{flex:none;width:16px;height:16px;margin-top:2px;color:var(--green-700)}
.sv-link{display:block;margin-top:auto;text-wrap:balance;padding-top:20px;font:600 15px/1.3 var(--body);color:var(--green-700);text-decoration:none}
.sv-link svg{display:inline-block;width:16px;height:16px;margin-left:6px;vertical-align:-3px;transition:transform .2s var(--ease)}
/* the whole card is the target for the mouse; the link stays the only element in the Tab order */
.sv-link::after{content:"";position:absolute;inset:0;border-radius:20px}
.sv-card:has(.sv-link:focus-visible){outline:3px solid var(--green-500);outline-offset:3px}
.sv-link:focus-visible{outline:none}
.sv-dark .sv-card h3{color:#fff}
.sv-dark .sv-out{color:var(--slate-200)}
.sv-dark .sv-inc{border-color:rgba(255,255,255,.1)}
.sv-dark .sv-inc li{color:var(--slate-300)}
.sv-dark .sv-inc svg,.sv-dark .sv-audit li svg{color:var(--green-500)}
.sv-dark .sv-link{color:var(--green-500)}
@media (hover:hover) and (pointer:fine){
  .sv-card{transition:border-color .2s ease}
  .sv-card:hover{border-color:var(--green-500)}
  .sv-card:hover .sv-link svg{transform:translateX(3px)}
}

/* TikTok Shop: the order of the work, shown as numbered steps joined by a line */
.sv-step{margin:0 0 18px;font:600 13px/1 var(--body);letter-spacing:.02em;color:var(--green-500)}
.sv-step span{display:inline-flex;align-items:center;height:26px;padding:0 10px;border:1px solid rgba(116,209,66,.45);border-radius:6px}
.sv-steps .sv-card:not(:last-child)::after{content:"";position:absolute;top:39px;right:-21px;width:20px;height:1px;background:rgba(116,209,66,.45)}

/* ---------- proof + next step ---------- */
.sv-foot{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px 48px;align-items:center;margin-top:28px}
.sv-proof{margin:0;padding:24px 26px;border:1px solid var(--slate-200);border-radius:20px;background:#fff}
.sv-dark .sv-proof{background:transparent;border-color:rgba(255,255,255,.14)}
.sv-proof-k{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--slate-500)}
.sv-proof .tp-stars i{width:16px;height:16px}
.sv-review blockquote{margin:12px 0 0}
.sv-review blockquote p{margin:0;font-size:17px;line-height:1.55;color:var(--ink-900)}
.sv-review figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:14px;font-size:14px;color:var(--slate-500)}
.sv-review figcaption b{color:var(--ink-900);font-weight:600}
.sv-ver{color:var(--green-700);font-weight:500}
.sv-review figcaption a{display:inline-flex;align-items:center;gap:4px;min-height:24px;color:var(--slate-500);text-decoration:underline;text-decoration-color:var(--slate-300);text-underline-offset:3px}
.sv-review figcaption a svg{width:14px;height:14px}
.sv-review figcaption a:focus-visible{outline:2px solid var(--green-700);outline-offset:2px}
.sv-audit h3{margin:0;font:600 16px/1.3 var(--body);color:#fff}
.sv-audit ul{display:flex;flex-wrap:wrap;gap:10px 24px;margin:14px 0 0;padding:0;list-style:none}
.sv-audit li{display:flex;gap:8px;font-size:15px;color:var(--slate-200)}
.sv-audit p{margin:12px 0 0;font-size:14px;color:var(--slate-300)}
.sv-cta p{margin:12px 0 0;max-width:30em;font-size:14px;line-height:1.5;color:var(--slate-500)}
.sv-dark .sv-cta p{color:var(--slate-300)}
.sv-cta .btn svg{width:18px;height:18px}

/* ---------- tablet / phone ---------- */
@media (max-width:1100px){
  .sv-c4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .sv-c3{grid-template-columns:minmax(0,1fr)}
  .sv-steps .sv-card:not(:last-child)::after{top:auto;bottom:-21px;right:auto;left:38px;width:1px;height:20px}
  .sv-foot{grid-template-columns:minmax(0,1fr)}
  .sv-problems{grid-template-columns:minmax(0,1fr)}
  .sv-problems ul{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .sv-c4{grid-template-columns:minmax(0,1fr)}
  .sv-card{padding:22px 20px 20px}
  .sv-proof{padding:20px}
  .sv-cta .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .sv-card,.sv-link svg{transition:none}
}