/* Service v2 "chart" block (template-parts/svc2-blocks.php type "chart"; first user Email & SMS, Mike 2026-09-28):
   dark chart card left (flat dashed sending cost vs gold compounding revenue curve), stacked heading right. Enqueued
   by page-templates/tpl-service-v2.php only when the page config has a chart block. Motion: one 600 ms line draw on
   first paint (CSS only, not scroll-triggered); the chart is complete without it and under prefers-reduced-motion. */

.svcc__in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px;align-items:center}
.svcc__copy{display:grid;gap:18px;align-content:center}
.svcc__proof{margin-top:6px;font-size:16px;color:var(--ink2)}
.svcc__proof a{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--ss-line-strong);padding-bottom:3px;transition:border-color .15s,color .15s}
.svcc__proof b{font-weight:700;color:var(--ss-blue)}
.svcc__proof svg{width:14px;height:14px}

/* inside the extras band (slot in_extras): a divider-free step down from the showcase card */
.svcc--in{margin-top:88px}
@media (max-width:900px){.svcc--in{margin-top:56px}}

/* card */
.svcc__card{margin:0;border-radius:24px;padding:30px 30px 24px;color:#fff;background:radial-gradient(120% 90% at 85% 0%,var(--ss-navy) 0%,var(--ss-navy) 35%,var(--ss-navy-deep) 80%);border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 70px rgba(var(--ss-navy-deep-rgb),.28)}
.svcc__plot{position:relative}
.svcc__svg{display:block;width:100%;height:auto;overflow:visible}
.svcc__grid{stroke:rgba(255,255,255,.08);stroke-width:1}
.svcc__cost{stroke:rgba(255,255,255,.3);stroke-width:2;stroke-dasharray:.012 .012;fill:none}
.svcc__rev{stroke:var(--ss-gold);stroke-width:3.5;stroke-linecap:round;fill:none}
.svcc__glow{stroke:var(--ss-gold);stroke-width:10;stroke-opacity:.45;fill:none}
.svcc__dot--rev{fill:var(--ss-gold)}
.svcc__halo{fill:var(--ss-gold);fill-opacity:.2}
.svcc__dot--cost{fill:rgba(255,255,255,.55)}

/* labels (HTML over the SVG, placed in viewBox %) */
.svcc__lab{position:absolute;margin:0;font-size:16px;font-weight:700;line-height:1.2;letter-spacing:-.005em;text-align:right;white-space:nowrap}
.svcc__lab--rev{color:#fff}
.svcc__lab--rev .hl{color:var(--gold,var(--ss-gold))}
.svcc__lab--cost{color:rgba(255,255,255,.6);font-weight:600;font-size:14px}
.svcc__lab--cost .hl{color:rgba(255,255,255,.85)}

/* caption */
.svcc__cap{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);font-size:14px;line-height:1.45;color:rgba(255,255,255,.62)}
.svcc__cap b{color:#fff;font-weight:600}
.svcc__cap i{font-style:normal;color:var(--gold,var(--ss-gold))}

/* first-paint draw (<= 600 ms); dashoffset 0 is the resting state, so no-animation = fully drawn */
@media (prefers-reduced-motion:no-preference){
	.svcc__rev,.svcc__glow{stroke-dasharray:1 1;animation:svcc-draw .6s cubic-bezier(.3,.6,.3,1) both}
	.svcc__area,.svcc__halo,.svcc__dot--rev{animation:svcc-in .2s ease-out .4s both}
}
@keyframes svcc-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes svcc-in{from{opacity:0}to{opacity:1}}

@media (max-width:1000px){
	.svcc__in{grid-template-columns:minmax(0,1fr);gap:36px}
	.svcc__copy{order:-1}
}
@media (max-width:600px){
	.svcc__card{padding:20px 16px 16px;border-radius:20px}
	.svcc__lab{font-size:13px}
	.svcc__lab--cost{font-size:11.5px}
	.svcc__cap{font-size:13px;margin-top:12px;padding-top:12px}
}