/* AI LAB · Services (index + detail pages). Agent 3.
   Same environment as the legal desk and the contact desk: midnight void, electric blue, violet refraction,
   the AI Concierge's optical glass and Inter typography. Values are the ones already used by
   /concierge/concierge.css (mode ai), the footer v2 card and .ctc-v2; nothing new is invented here.
   Every rule lives under .svp-page so nothing leaks into other pages. */

/* ============================================================ tokens */
.svp-page{
  --sv-void:#04081A;--sv-void-2:#080F2A;
  --sv-ink:#F7F9FF;--sv-mute:rgba(214,224,255,.64);--sv-mute-2:rgba(200,214,255,.5);--sv-hair:rgba(190,208,255,.14);
  --sv-blue:#5FA8FF;--sv-blue-ink:#8CC0FF;--sv-blue-deep:#246BFF;--sv-vio:#8B7CFF;--sv-vio-deep:#6E4DFF;
  --sv-glass:rgba(13,20,56,.58);--sv-card:rgba(255,255,255,.065);--sv-card-h:rgba(255,255,255,.11);
  --sv-line:rgba(160,190,255,.22);--sv-line-h:rgba(160,190,255,.42);
  --sv-rim:0 0 0 1px rgba(130,170,255,.42),0 0 0 2px rgba(110,77,255,.14),0 0 46px rgba(36,107,255,.24),0 34px 90px rgba(2,6,24,.55),inset 0 1px 0 rgba(170,205,255,.42),inset 0 0 0 1px rgba(255,255,255,.06);
  --sv-spec:radial-gradient(60% 40% at 0% 0%,rgba(70,140,255,.30),transparent 62%),linear-gradient(180deg,rgba(150,190,255,.14),rgba(150,190,255,0) 22%),radial-gradient(60% 45% at 100% 100%,rgba(110,77,255,.24),transparent 62%);
  --sv-spec-alt:radial-gradient(60% 40% at 100% 0%,rgba(110,77,255,.28),transparent 62%),linear-gradient(180deg,rgba(150,190,255,.12),rgba(150,190,255,0) 22%),radial-gradient(60% 45% at 0% 100%,rgba(70,140,255,.26),transparent 62%);
  --sv-rimline:linear-gradient(200deg,rgba(150,195,255,.85),rgba(150,195,255,0) 30%,rgba(110,77,255,0) 70%,rgba(110,77,255,.7));
  --sv-signal:radial-gradient(circle at 34% 30%,#eaf5ff 0,#8cc2ff 30%,#4f9dff 58%,#1f6fe0 100%);
  --sv-signal-shadow:inset 0 -1px 1px rgba(10,40,120,.35),0 0 8px rgba(95,168,255,.7);
  --sv-font:Inter,"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  --sv-out:cubic-bezier(.2,.7,.2,1);--sv-ease:cubic-bezier(.4,0,.2,1);
  background:var(--sv-void);color:var(--sv-ink);
}
.svp{position:relative;z-index:1;font-family:var(--sv-font);letter-spacing:-.018em;font-feature-settings:"cv11","ss01","calt";-webkit-font-smoothing:antialiased;
  background:linear-gradient(180deg,var(--sv-void) 0%,var(--sv-void-2) 40%,var(--sv-void) 100%)}
.svp .wrap{position:relative;z-index:1;max-width:1240px}
.svp-page main{position:relative;z-index:1}

/* ============================================================ environment */
.svp-aura{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.95;background:
  radial-gradient(120% 70% at 50% -10%,rgba(36,107,255,.22),transparent 62%),
  radial-gradient(60% 40% at 88% 10%,rgba(110,77,255,.16),transparent 62%),
  radial-gradient(46% 30% at 12% 40%,rgba(95,168,255,.12),transparent 68%)}
.svp-aura::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(150,190,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(150,190,255,.045) 1px,transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:radial-gradient(70% 55% at 50% 30%,#000,transparent 78%);mask-image:radial-gradient(70% 55% at 50% 30%,#000,transparent 78%)}

/* ============================================================ shared type */
.svp-eyebrow{display:inline-flex;align-items:center;gap:11px;margin:0;font:500 13px/1 var(--sv-font);letter-spacing:.1em;text-transform:uppercase;color:var(--sv-blue-ink)}
.svp-eyebrow i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--sv-signal);box-shadow:0 0 10px rgba(95,168,255,.85)}
.svp-h1{margin:20px 0 0;font:600 clamp(40px,6vw,76px)/1.03 var(--sv-font);letter-spacing:-.038em;color:#fff;max-width:17ch}
.svp-h1 em,.svp-h2 em{font-style:normal;background:linear-gradient(96deg,var(--sv-blue-ink),#B7A6FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.svp-lead{margin:24px 0 0;font:400 clamp(17px,1.5vw,20px)/1.58 var(--sv-font);letter-spacing:-.012em;color:rgba(214,226,255,.74);max-width:56ch}
.svp-h2{margin:0;font:500 clamp(28px,3.2vw,40px)/1.1 var(--sv-font);letter-spacing:-.035em;color:#fff}
.svp-h3{margin:0;font:600 12px/1 var(--sv-font);letter-spacing:.14em;text-transform:uppercase;color:var(--sv-blue-ink)}
.svp-p{margin:0;font:400 16px/1.6 var(--sv-font);letter-spacing:-.012em;color:var(--sv-mute)}
.svp-p b{color:var(--sv-ink);font-weight:500}
.svp-sec-head{display:flex;flex-direction:column;gap:14px;max-width:720px}
.svp-sec-head .svp-p{max-width:56ch}

/* chips / meta */
.svp-meta{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 0;list-style:none;padding:0}
.svp-meta li{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:999px;font:500 13.5px/1 var(--sv-font);letter-spacing:-.005em;color:rgba(206,220,255,.8);
  background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(150,190,255,.18),inset 0 1px 0 rgba(255,255,255,.09)}
.svp-meta li.is-lit{color:#EAF1FF;box-shadow:inset 0 0 0 1px rgba(95,168,255,.5),inset 0 1px 0 rgba(255,255,255,.09)}
.svp-meta li.is-lit::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sv-signal);box-shadow:0 0 6px rgba(95,168,255,.7)}

/* buttons: the concierge's two capsules */
.svp-btn{display:inline-flex;align-items:center;gap:12px;height:50px;padding:0 24px;border-radius:14px;border:0;cursor:pointer;
  font:500 15px/1 var(--sv-font);letter-spacing:-.02em;color:#fff;text-decoration:none;
  background:linear-gradient(135deg,rgba(60,110,230,.55),rgba(63,42,143,.45));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px rgba(160,195,255,.35),0 0 20px rgba(36,107,255,.22);
  transition:transform .3s var(--sv-out),box-shadow .3s var(--sv-out)}
.svp-btn i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--sv-signal);box-shadow:var(--sv-signal-shadow)}
.svp-btn-primary{background:linear-gradient(135deg,#3B86FF,#246BFF);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 20px rgba(36,107,255,.32),0 0 0 1px rgba(160,195,255,.25)}
.svp-btn-primary i{background:#fff;box-shadow:0 0 8px rgba(255,255,255,.7)}
.svp-btn-ghost{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(160,190,255,.26),inset 0 1px 0 rgba(255,255,255,.1)}
.svp-btn-ghost i{display:none}
@media (hover:hover) and (pointer:fine){
  .svp-btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px rgba(160,195,255,.6),0 0 28px rgba(36,107,255,.36)}
  .svp-btn-primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 26px rgba(36,107,255,.4),0 0 0 1px rgba(160,195,255,.4)}
  .svp-btn-ghost:hover{box-shadow:inset 0 0 0 1px rgba(160,190,255,.5),inset 0 1px 0 rgba(255,255,255,.12)}
}
.svp-page .svp-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(95,168,255,.62),0 0 0 7px rgba(95,168,255,.26)}
.svp-arrow{display:inline-block;transition:transform .3s var(--sv-out)}
@media (hover:hover) and (pointer:fine){.svp-btn:hover .svp-arrow,.svp-link:hover .svp-arrow{transform:translateX(3px)}}

/* text link with arrow */
.svp-link{display:inline-flex;align-items:center;gap:8px;font:500 15px/1 var(--sv-font);letter-spacing:-.02em;color:#fff;text-decoration:none;
  padding-bottom:3px;border-bottom:1px solid rgba(160,190,255,.35);transition:color .25s,border-color .25s}
.svp-link:hover{color:var(--sv-blue-ink);border-color:var(--sv-blue-ink)}

/* ============================================================ glass slab (the concierge material) */
.svp-glass{position:relative;isolation:isolate;border-radius:28px;background:var(--sv-glass);box-shadow:var(--sv-rim);
  -webkit-backdrop-filter:blur(30px) saturate(1.4);backdrop-filter:blur(30px) saturate(1.4);overflow:hidden;color:var(--sv-ink)}
.svp-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:var(--sv-spec)}
.svp-glass::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1.5px;background:var(--sv-rimline);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:.9}
.svp-glass.alt::before{background:var(--sv-spec-alt)}
.svp-glass.alt::after{background:linear-gradient(160deg,rgba(110,77,255,.75),rgba(110,77,255,0) 30%,rgba(150,195,255,0) 70%,rgba(150,195,255,.8))}
/* embedded card inside glass */
.svp-card{border-radius:16px;background:var(--sv-card);box-shadow:inset 0 0 0 1px var(--sv-line),inset 0 1px 0 rgba(255,255,255,.08)}

/* ============================================================ hero (index + detail) */
.svp-hero{position:relative;padding:clamp(128px,14vw,176px) 0 clamp(48px,6vw,80px);overflow:clip}
.svp-hero .wrap{position:relative;z-index:1}
.svp-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:26px;font:500 14px/1 var(--sv-font);letter-spacing:-.01em;color:rgba(200,214,255,.7);text-decoration:none;transition:color .25s}
.svp-back:hover{color:#fff}
.svp-back .svp-arrow{transform:rotate(180deg)}
.svp-back:hover .svp-arrow{transform:rotate(180deg) translateX(3px)}
.svp-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* jump list on the index */
.svp-jump{margin-top:40px}
.svp-jump ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.svp-jump a{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 15px 0 12px;border-radius:12px;font:500 14px/1 var(--sv-font);letter-spacing:-.015em;color:var(--sv-ink);text-decoration:none;
  background:var(--sv-card);box-shadow:inset 0 0 0 1px var(--sv-line);transition:background .2s,box-shadow .2s}
.svp-jump a:hover{background:var(--sv-card-h);box-shadow:inset 0 0 0 1px var(--sv-line-h)}
.svp-jump a b{font-weight:600;font-size:11px;letter-spacing:.08em;color:var(--sv-blue-ink);font-variant-numeric:tabular-nums}

/* ============================================================ the collection (index) */
.svp-collection{padding:20px 0 40px}
.svp-collection .wrap{display:flex;flex-direction:column;gap:clamp(22px,3vw,34px)}
.svp-sys{display:grid;grid-template-columns:7fr 5fr;gap:0;scroll-margin-top:110px}
.svp-sys.alt{grid-template-columns:5fr 7fr}
.svp-sys-text{padding:clamp(30px,4vw,56px) clamp(26px,4vw,56px);display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.svp-sys.alt .svp-sys-text{order:2}
.svp-sys-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.svp-num{font:600 12px/1 var(--sv-font);letter-spacing:.12em;color:var(--sv-blue-ink);font-variant-numeric:tabular-nums}
.svp-chip{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px;border-radius:999px;font:500 12.5px/1 var(--sv-font);letter-spacing:.01em;color:rgba(214,226,255,.82);
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(150,190,255,.18)}
.svp-chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--sv-blue);box-shadow:0 0 6px rgba(95,168,255,.7)}
.svp-sys h2{margin:22px 0 0;font:500 clamp(28px,3vw,38px)/1.1 var(--sv-font);letter-spacing:-.035em;color:#fff}
.svp-sys h2 .blue{color:var(--sv-blue-ink)}
.svp-sys-line{margin:16px 0 0;font:400 17px/1.55 var(--sv-font);letter-spacing:-.014em;color:rgba(214,226,255,.78);max-width:46ch}
.svp-caps{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;width:100%;max-width:520px}
.svp-caps li{position:relative;padding-left:16px;font:400 14.5px/1.45 var(--sv-font);letter-spacing:-.012em;color:var(--sv-mute)}
.svp-caps li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--sv-blue);box-shadow:0 0 6px rgba(95,168,255,.6)}
.svp-sys .svp-link{margin-top:auto;padding-top:30px;border-bottom:0;font-size:15px}
.svp-sys .svp-link>span:first-child{border-bottom:1px solid rgba(160,190,255,.35);padding-bottom:3px;transition:border-color .25s}
.svp-sys .svp-link:hover>span:first-child{border-color:var(--sv-blue-ink)}
/* the visual window */
.svp-sys-visual{position:relative;min-height:320px;display:flex;align-items:center;justify-content:center;padding:clamp(22px,3vw,40px);
  border-left:1px solid var(--sv-hair);background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0))}
.svp-sys.alt .svp-sys-visual{order:1;border-left:0;border-right:1px solid var(--sv-hair)}
.svp-win{position:relative;width:100%;max-width:440px;aspect-ratio:4/3;border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg,rgba(6,12,34,.72),rgba(10,16,44,.5));box-shadow:inset 0 0 0 1px rgba(150,190,255,.22),inset 0 1px 0 rgba(255,255,255,.08),0 20px 50px rgba(2,6,24,.45)}
.svp-win::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 50% at 30% 20%,rgba(70,140,255,.16),transparent 70%),radial-gradient(50% 40% at 80% 90%,rgba(110,77,255,.18),transparent 70%)}
.svp-win svg{position:relative;width:100%;height:100%;display:block;color:var(--sv-blue-ink)}
.svp-win .n{fill:rgba(13,20,56,.9);stroke:currentColor;stroke-width:1.2}
.svp-win .n.f{fill:var(--sv-blue)}
.svp-win .n.v{stroke:var(--sv-vio);fill:rgba(110,77,255,.28)}
.svp-win .n.h{stroke:rgba(255,255,255,.75);fill:rgba(255,255,255,.06)}
.svp-win .l{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.55}
.svp-win .l.v{stroke:var(--sv-vio)}
.svp-win .l.d{stroke-dasharray:3 4}
/* label sizes: these SVGs scale with their container, so the CSS px is not what the reader sees.
   Base is tuned for the two-column card (scale ~.9); the small-viewport step below compensates
   for the narrower stacked card, where the same glyphs would otherwise land under 6px. */
.svp-win .t{font:500 11.5px/1 var(--sv-font);letter-spacing:.02em;fill:rgba(214,226,255,.78)}
.svp-win .t.s{font-size:9.5px;fill:rgba(200,214,255,.55);letter-spacing:.06em;text-transform:uppercase}
.svp-win .g{fill:none;stroke:rgba(150,190,255,.12);stroke-width:1}
.svp-win .a{fill:rgba(95,168,255,.14)}
.svp-win .a.v{fill:rgba(110,77,255,.16)}
.svp-win .spark{fill:none;stroke:var(--sv-blue-ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.svp-win .beat{transform-box:fill-box;transform-origin:center;animation:svBeat 4.2s var(--sv-ease) infinite}
.svp-win .beat.d2{animation-delay:1.4s}
.svp-win .beat.d3{animation-delay:2.8s}
@keyframes svBeat{0%,72%,100%{opacity:1;transform:scale(1)}80%{opacity:.6;transform:scale(1.35)}90%{opacity:1;transform:scale(.95)}}
.svp-win .flow{stroke-dasharray:4 6;animation:svFlow 6s linear infinite}
@keyframes svFlow{to{stroke-dashoffset:-60}}

/* ============================================================ how we think (index) */
.svp-think{padding:clamp(40px,6vw,88px) 0}
.svp-think .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:start}
.svp-think ol{list-style:none;margin:0;padding:0;counter-reset:th}
.svp-think li{display:grid;grid-template-columns:34px 1fr;gap:4px 12px;padding:18px 0;border-top:1px solid var(--sv-hair)}
.svp-think li:last-child{border-bottom:1px solid var(--sv-hair)}
.svp-think li span{grid-row:1/3;font:600 11.5px/1 var(--sv-font);letter-spacing:.06em;color:var(--sv-blue-ink);padding-top:5px;font-variant-numeric:tabular-nums}
.svp-think li b{font:500 19px/1.3 var(--sv-font);letter-spacing:-.025em;color:#fff}
.svp-think li small{font:400 14.5px/1.5 var(--sv-font);letter-spacing:-.01em;color:var(--sv-mute)}

/* ============================================================ close (index + detail) */
.svp-close{padding:clamp(20px,4vw,40px) 0 clamp(80px,9vw,120px)}
.svp-close .svp-glass{padding:clamp(34px,4.6vw,60px) clamp(28px,4.6vw,60px);display:grid;grid-template-columns:1fr auto;gap:30px 50px;align-items:center}
.svp-close .svp-h2{max-width:20ch}
.svp-close .svp-p{margin-top:14px;max-width:48ch}
.svp-close-actions{display:flex;flex-wrap:wrap;gap:12px}
.svp-close-note{margin:18px 0 0;font:400 13px/1.5 var(--sv-font);color:var(--sv-mute-2)}
.svp-person{display:flex;align-items:center;gap:12px;margin-top:26px}
.svp-person img{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(13,20,56,.9),0 0 0 3px rgba(130,170,255,.5)}
.svp-person strong{display:block;font:600 15px/1.2 var(--sv-font);letter-spacing:-.02em;color:#fff}
.svp-person span{font:400 13px/1.2 var(--sv-font);color:var(--sv-mute)}

/* ============================================================ detail: bands */
.svp-band{padding:clamp(10px,2vw,20px) 0 clamp(30px,4vw,44px)}
.svp-band .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,28px);align-items:start}
.svp-pane{padding:clamp(28px,3.4vw,44px) clamp(24px,3.4vw,44px);display:flex;flex-direction:column;gap:14px}
.svp-pane .svp-h2{font-size:clamp(24px,2.4vw,30px)}
.svp-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column}
.svp-list li{position:relative;padding:12px 0 12px 22px;border-top:1px solid var(--sv-hair);font:400 15px/1.5 var(--sv-font);letter-spacing:-.012em;color:rgba(224,232,255,.86)}
.svp-list li:last-child{border-bottom:1px solid var(--sv-hair)}
.svp-list li::before{content:"";position:absolute;left:0;top:20px;width:6px;height:6px;border-radius:50%;background:var(--sv-blue);box-shadow:0 0 6px rgba(95,168,255,.6)}
.svp-list li b{font-weight:500;color:#fff}
.svp-list.human li::before{background:rgba(255,255,255,.85);box-shadow:0 0 6px rgba(255,255,255,.4)}

/* connects: tool chips */
.svp-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.svp-tools span{display:inline-flex;align-items:center;height:34px;padding:0 13px;border-radius:12px;font:500 13.5px/1 var(--sv-font);letter-spacing:-.01em;color:var(--sv-ink);background:var(--sv-card);box-shadow:inset 0 0 0 1px var(--sv-line)}
.svp-tools span.own{color:var(--sv-blue-ink);box-shadow:inset 0 0 0 1px rgba(95,168,255,.45)}

/* ============================================================ detail: workflow */
.svp-flow{padding:clamp(20px,3vw,40px) 0}
.svp-flow .svp-glass{padding:clamp(28px,3.6vw,52px) clamp(24px,3.6vw,52px)}
.svp-steps{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative}
.svp-steps li{position:relative;padding:22px 22px 0 0;border-top:1px solid var(--sv-hair)}
.svp-steps li::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--sv-signal);box-shadow:0 0 8px rgba(95,168,255,.7)}
.svp-steps li[data-who="human"]::before{background:radial-gradient(circle at 34% 30%,#fff 0,#e6eeff 40%,#b9c8ea 100%);box-shadow:0 0 8px rgba(255,255,255,.5)}
.svp-steps li[data-who="ai"]::before{background:radial-gradient(circle at 34% 30%,#efe9ff 0,#c4b5ff 35%,#8B7CFF 60%,#5f46d8 100%);box-shadow:0 0 8px rgba(139,124,255,.7)}
.svp-steps small{display:block;font:600 11px/1 var(--sv-font);letter-spacing:.12em;text-transform:uppercase;color:var(--sv-blue-ink);margin-bottom:10px}
.svp-steps li[data-who="human"] small{color:rgba(255,255,255,.75)}
.svp-steps li[data-who="ai"] small{color:#B7A6FF}
.svp-steps b{display:block;font:500 16px/1.3 var(--sv-font);letter-spacing:-.02em;color:#fff}
.svp-steps p{margin:8px 0 0;font:400 14px/1.5 var(--sv-font);letter-spacing:-.01em;color:var(--sv-mute)}
.svp-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;font:400 13px/1 var(--sv-font);color:var(--sv-mute)}
.svp-legend span{display:inline-flex;align-items:center;gap:8px}
.svp-legend span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sv-signal);box-shadow:0 0 6px rgba(95,168,255,.6)}
.svp-legend span.ai::before{background:radial-gradient(circle at 34% 30%,#efe9ff 0,#c4b5ff 35%,#8B7CFF 60%,#5f46d8 100%);box-shadow:0 0 6px rgba(139,124,255,.6)}
.svp-legend span.human::before{background:radial-gradient(circle at 34% 30%,#fff 0,#e6eeff 40%,#b9c8ea 100%);box-shadow:0 0 6px rgba(255,255,255,.4)}

/* ============================================================ detail: proof element */
.svp-proof{padding:clamp(20px,3vw,40px) 0}
.svp-proof .svp-sec-head{margin-bottom:26px}
.svp-proof .svp-glass{padding:clamp(22px,3vw,40px)}
.svp-proof-note{margin:16px 0 0;font:400 12.5px/1.5 var(--sv-font);color:var(--sv-mute-2)}
.svp-proof-note b{color:var(--sv-mute);font-weight:500}
/* option chips (buttons) */
.svp-opts{display:flex;flex-wrap:wrap;gap:8px}
.svp-opt{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:8px 15px;border-radius:14px;border:0;cursor:pointer;
  font:500 14px/1.2 var(--sv-font);letter-spacing:-.015em;color:var(--sv-ink);text-align:left;
  background:var(--sv-card);box-shadow:inset 0 0 0 1px var(--sv-line);transition:background .14s,box-shadow .14s}
.svp-opt:hover{background:var(--sv-card-h);box-shadow:inset 0 0 0 1px var(--sv-line-h)}
.svp-opt[aria-pressed="true"]{background:var(--sv-card-h);box-shadow:inset 0 0 0 1px var(--sv-blue)}
.svp-opt[aria-pressed="true"]::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--sv-signal);box-shadow:0 0 6px rgba(95,168,255,.7)}
.svp-opt small{font-weight:400;color:var(--sv-mute);font-size:12.5px}
.svp-page .svp-opt:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--sv-blue),0 0 0 3px rgba(95,168,255,.35)}
.svp-q{font:600 11px/1 var(--sv-font);letter-spacing:.14em;text-transform:uppercase;color:var(--sv-blue-ink);margin:0 0 10px}
/* who badges */
.svp-who{display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 10px;border-radius:999px;font:600 11px/1 var(--sv-font);letter-spacing:.1em;text-transform:uppercase;color:var(--sv-blue-ink);background:rgba(95,168,255,.1);box-shadow:inset 0 0 0 1px rgba(95,168,255,.35)}
.svp-who::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sv-signal)}
.svp-who.ai{color:#C4B5FF;background:rgba(110,77,255,.14);box-shadow:inset 0 0 0 1px rgba(139,124,255,.4)}
.svp-who.ai::before{background:radial-gradient(circle at 34% 30%,#efe9ff 0,#c4b5ff 35%,#8B7CFF 60%,#5f46d8 100%)}
.svp-who.human{color:#fff;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.svp-who.human::before{background:radial-gradient(circle at 34% 30%,#fff 0,#e6eeff 40%,#b9c8ea 100%)}

/* --- generic two-column demo layout: controls/stage left, readout right --- */
.svp-demo{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.9fr);gap:clamp(20px,3vw,36px);align-items:start}
.svp-readout{padding:22px 24px;display:flex;flex-direction:column;gap:12px;min-height:200px}
.svp-readout .svp-who{align-self:flex-start}
.svp-readout h3{margin:4px 0 0;font:500 20px/1.25 var(--sv-font);letter-spacing:-.028em;color:#fff;text-transform:none}
.svp-readout p{margin:0;font:400 14.5px/1.55 var(--sv-font);letter-spacing:-.012em;color:var(--sv-mute)}
.svp-readout p b{color:#fff;font-weight:500}
.svp-readout .why{padding-top:12px;border-top:1px solid var(--sv-hair);font-size:13.5px}

/* --- strategy: decision map --- */
.svp-map-q{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.svp-map-svg{width:100%;height:auto;display:block;border-radius:16px;background:rgba(6,12,34,.6);box-shadow:inset 0 0 0 1px var(--sv-line)}
.svp-map-svg .ax{stroke:rgba(150,190,255,.18);stroke-width:1}
.svp-map-svg .zone{fill:rgba(95,168,255,.05);stroke:rgba(150,190,255,.12)}
.svp-map-svg .zone.on{fill:rgba(95,168,255,.16);stroke:rgba(95,168,255,.6)}
.svp-map-svg .zone.on.v{fill:rgba(110,77,255,.2);stroke:rgba(139,124,255,.7)}
.svp-map-svg .zone.on.h{fill:rgba(255,255,255,.08);stroke:rgba(255,255,255,.55)}
.svp-map-svg .zt{font:600 9px/1 var(--sv-font);letter-spacing:.08em;text-transform:uppercase;fill:rgba(200,214,255,.55)}
.svp-map-svg .zone.on+.zt{fill:#fff}
.svp-map-svg .al{font:500 9px/1 var(--sv-font);letter-spacing:.06em;text-transform:uppercase;fill:rgba(200,214,255,.6)}
.svp-map-svg .dot{fill:#fff;stroke:var(--sv-blue);stroke-width:2;filter:drop-shadow(0 0 6px rgba(95,168,255,.9));transition:cx .5s var(--sv-out),cy .5s var(--sv-out)}
.svp-map-svg .dot-halo{fill:rgba(95,168,255,.18);transition:cx .5s var(--sv-out),cy .5s var(--sv-out)}

/* --- automation: workflow map --- */
.svp-wf-track{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;position:relative}
.svp-wf-track::before{content:"";position:absolute;left:8%;right:8%;top:22px;height:1px;background:linear-gradient(90deg,transparent,rgba(150,190,255,.35) 10%,rgba(150,190,255,.35) 90%,transparent)}
.svp-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px 4px 6px;border:0;border-radius:14px;background:none;cursor:pointer;color:var(--sv-ink);text-align:center;transition:background .2s}
.svp-node:hover{background:rgba(255,255,255,.04)}
.svp-node .dotn{width:28px;height:28px;border-radius:50%;background:rgba(13,20,56,.95);box-shadow:inset 0 0 0 1.5px var(--sv-blue),0 0 0 4px rgba(4,8,26,.9);display:grid;place-items:center;transition:box-shadow .25s,transform .25s}
.svp-node .dotn::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--sv-signal)}
.svp-node[data-who="ai"] .dotn{box-shadow:inset 0 0 0 1.5px var(--sv-vio),0 0 0 4px rgba(4,8,26,.9)}
.svp-node[data-who="ai"] .dotn::after{background:radial-gradient(circle at 34% 30%,#efe9ff 0,#c4b5ff 35%,#8B7CFF 60%,#5f46d8 100%)}
.svp-node[data-who="human"] .dotn{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.8),0 0 0 4px rgba(4,8,26,.9)}
.svp-node[data-who="human"] .dotn::after{background:radial-gradient(circle at 34% 30%,#fff 0,#e6eeff 40%,#b9c8ea 100%)}
.svp-node[aria-pressed="true"] .dotn{transform:scale(1.12);box-shadow:inset 0 0 0 1.5px var(--sv-blue),0 0 0 4px rgba(4,8,26,.9),0 0 18px rgba(95,168,255,.7)}
.svp-node[aria-pressed="true"][data-who="ai"] .dotn{box-shadow:inset 0 0 0 1.5px var(--sv-vio),0 0 0 4px rgba(4,8,26,.9),0 0 18px rgba(139,124,255,.7)}
.svp-node[aria-pressed="true"][data-who="human"] .dotn{box-shadow:inset 0 0 0 1.5px #fff,0 0 0 4px rgba(4,8,26,.9),0 0 18px rgba(255,255,255,.45)}
.svp-node small{font:600 10px/1 var(--sv-font);letter-spacing:.1em;color:var(--sv-blue-ink)}
.svp-node b{font:500 13px/1.3 var(--sv-font);letter-spacing:-.015em;color:var(--sv-ink);max-width:11ch}
.svp-node[aria-pressed="true"] b{color:#fff}
.svp-page .svp-node:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sv-blue-ink)}
.svp-wf-branch{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--sv-line);font:400 13.5px/1.4 var(--sv-font);color:var(--sv-mute)}
.svp-wf-branch button{flex:none}

/* --- agents: handoff simulation --- */
.svp-sim-scen{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.svp-sim-scen .svp-opt{flex-direction:column;align-items:flex-start;gap:6px;padding:12px 14px}
.svp-sim-scen .svp-opt small{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--sv-blue-ink);font-weight:600}
.svp-sim-scen .svp-opt[aria-pressed="true"]::after{position:absolute;right:12px;top:14px}
.svp-sim-scen .svp-opt{position:relative}
.svp-sim-lane{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding-top:6px}
.svp-sim-lane::before{content:"";position:absolute;left:12%;right:12%;top:20px;height:1px;background:rgba(150,190,255,.22)}
.svp-sim-lane>div{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;opacity:.42;transition:opacity .35s var(--sv-out)}
.svp-sim-lane>div.on{opacity:1}
.svp-sim-lane .dotn{width:28px;height:28px;border-radius:50%;background:rgba(13,20,56,.95);box-shadow:inset 0 0 0 1.5px var(--sv-blue),0 0 0 4px rgba(4,8,26,.9);display:grid;place-items:center;transition:box-shadow .3s}
.svp-sim-lane .dotn::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--sv-signal);transform:scale(.6);transition:transform .3s var(--sv-out)}
.svp-sim-lane>div.on .dotn::after{transform:scale(1)}
.svp-sim-lane>div.on .dotn{box-shadow:inset 0 0 0 1.5px var(--sv-blue),0 0 0 4px rgba(4,8,26,.9),0 0 16px rgba(95,168,255,.6)}
.svp-sim-lane>div.human .dotn{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85),0 0 0 4px rgba(4,8,26,.9)}
.svp-sim-lane>div.human.on .dotn{box-shadow:inset 0 0 0 1.5px #fff,0 0 0 4px rgba(4,8,26,.9),0 0 16px rgba(255,255,255,.4)}
.svp-sim-lane>div.human .dotn::after{background:radial-gradient(circle at 34% 30%,#fff 0,#e6eeff 40%,#b9c8ea 100%)}
.svp-sim-lane b{font:500 13px/1.3 var(--sv-font);letter-spacing:-.015em;color:#fff}
.svp-sim-lane small{font:400 12px/1.4 var(--sv-font);color:var(--sv-mute);max-width:16ch}
.svp-sim-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;min-height:120px}
.svp-sim-log li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font:400 14px/1.5 var(--sv-font);letter-spacing:-.012em;color:rgba(224,232,255,.86);animation:svIn .3s var(--sv-out) both}
.svp-sim-log li .svp-who{margin-top:2px;height:22px;font-size:10px}
.svp-sim-log li.out{padding-top:10px;border-top:1px solid var(--sv-hair);color:#fff}
@keyframes svIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.svp-sim-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.svp-sim-actions .svp-btn{height:42px;padding:0 18px;font-size:14px}

/* --- dashboards: preview --- */
.svp-dash{display:flex;flex-direction:column;gap:18px}
.svp-dash-bar{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between}
.svp-dash-bar .svp-opts{gap:6px}
.svp-dash-bar .svp-opt{min-height:36px;padding:6px 13px;font-size:13.5px}
.svp-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.svp-tile{padding:16px 18px 14px;display:flex;flex-direction:column;gap:6px;min-height:104px;position:relative;overflow:hidden}
.svp-tile small{font:500 11.5px/1 var(--sv-font);letter-spacing:.06em;text-transform:uppercase;color:var(--sv-mute-2)}
.svp-tile b{font:500 26px/1.1 var(--sv-font);letter-spacing:-.035em;color:#fff;font-variant-numeric:tabular-nums}
.svp-tile em{font:400 12.5px/1.3 var(--sv-font);font-style:normal;color:var(--sv-mute)}
.svp-tile em.up{color:var(--sv-blue-ink)}
.svp-tile em.dn{color:#C4B5FF}
.svp-tile.alert{box-shadow:inset 0 0 0 1px rgba(139,124,255,.55),inset 0 1px 0 rgba(255,255,255,.08);background:linear-gradient(160deg,rgba(110,77,255,.16),rgba(255,255,255,.04))}
.svp-tile.alert::before{content:"";position:absolute;right:14px;top:14px;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#efe9ff 0,#c4b5ff 35%,#8B7CFF 60%,#5f46d8 100%);box-shadow:0 0 10px rgba(139,124,255,.9)}
.svp-dash-main{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(240px,1fr);gap:10px}
.svp-chart{padding:16px 18px 12px;display:flex;flex-direction:column;gap:8px}
.svp-chart-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.svp-chart-h small{font:500 11.5px/1 var(--sv-font);letter-spacing:.06em;text-transform:uppercase;color:var(--sv-mute-2)}
.svp-chart-h b{font:500 13px/1 var(--sv-font);color:var(--sv-blue-ink)}
.svp-chart svg{width:100%;height:auto;display:block}
.svp-chart .grid{stroke:rgba(150,190,255,.12);stroke-width:1}
.svp-chart .area{fill:url(#svArea)}
.svp-chart .line{fill:none;stroke:var(--sv-blue-ink);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;transition:d .5s var(--sv-out)}
.svp-chart .mark{fill:#fff;stroke:var(--sv-vio);stroke-width:1.5}
.svp-chart .mark-l{font:500 8.5px/1 var(--sv-font);fill:#C4B5FF;letter-spacing:.02em}
.svp-alerts{padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.svp-alerts small{font:500 11.5px/1 var(--sv-font);letter-spacing:.06em;text-transform:uppercase;color:var(--sv-mute-2)}
.svp-alerts ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.svp-alerts li{position:relative;padding-left:16px;font:400 13.5px/1.45 var(--sv-font);letter-spacing:-.012em;color:rgba(224,232,255,.86)}
.svp-alerts li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--sv-signal);box-shadow:0 0 6px rgba(95,168,255,.6)}
.svp-alerts li.v::before{background:radial-gradient(circle at 34% 30%,#efe9ff 0,#c4b5ff 35%,#8B7CFF 60%,#5f46d8 100%);box-shadow:0 0 6px rgba(139,124,255,.6)}
.svp-alerts li b{color:#fff;font-weight:500}
.svp-dash-tag{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 11px;border-radius:999px;font:500 11.5px/1 var(--sv-font);letter-spacing:.06em;text-transform:uppercase;color:var(--sv-mute);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--sv-line)}

/* --- systems: module map --- */
.svp-mod{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:clamp(20px,3vw,36px);align-items:start}
.svp-mod-map{position:relative;border-radius:16px;background:rgba(6,12,34,.6);box-shadow:inset 0 0 0 1px var(--sv-line);padding:14px}
.svp-mod-map svg{width:100%;height:auto;display:block;color:var(--sv-blue-ink)}
.svp-mod-map .link{fill:none;stroke:rgba(150,190,255,.25);stroke-width:1.2;transition:stroke .3s,opacity .3s}
.svp-mod-map .link.on{stroke:var(--sv-blue);stroke-width:1.6;stroke-dasharray:4 5;animation:svFlow 4s linear infinite}
.svp-mod-map .link.dim{opacity:.35}
.svp-mod-map .core{fill:rgba(13,20,56,.95);stroke:var(--sv-blue);stroke-width:1.4}
.svp-mod-map .core-t{font:600 9.5px/1 var(--sv-font);letter-spacing:.14em;fill:#fff;text-anchor:middle}
.svp-mod-map .core-s{font:500 8.5px/1 var(--sv-font);letter-spacing:.06em;fill:rgba(200,214,255,.6);text-anchor:middle}
.svp-mod-btn{cursor:pointer}
.svp-mod-btn rect{fill:rgba(255,255,255,.05);stroke:rgba(150,190,255,.3);stroke-width:1.2;transition:fill .25s,stroke .25s}
.svp-mod-btn text{font:500 10.5px/1 var(--sv-font);letter-spacing:-.01em;fill:#fff;text-anchor:middle;pointer-events:none}
.svp-mod-btn .sub{font:500 8.5px/1 var(--sv-font);letter-spacing:.06em;text-transform:uppercase;fill:rgba(200,214,255,.6)}
.svp-mod-btn:hover rect{fill:rgba(255,255,255,.09);stroke:rgba(150,190,255,.5)}
.svp-mod-btn[aria-pressed="true"] rect{fill:rgba(95,168,255,.16);stroke:var(--sv-blue)}
.svp-mod-btn:focus{outline:none}
.svp-mod-btn:focus-visible rect{stroke:#fff;stroke-width:2}
.svp-mod-btn.dim{opacity:.62}
.svp-mod-btn.dim rect{fill:rgba(255,255,255,.03)}
.svp-mod-btn.dim text{opacity:.7}
.svp-mod-btn,.svp-mod-btn rect{transition:opacity .3s}
.svp-mod-ext .ext{fill:rgba(13,20,56,.9);stroke:rgba(139,124,255,.6);stroke-width:1.2;stroke-dasharray:3 3}
.svp-mod-ext .sub{font:500 8.5px/1 var(--sv-font);letter-spacing:.06em;text-transform:uppercase;fill:rgba(200,214,255,.6)}
.svp-mod-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.svp-mod-list li{display:grid;grid-template-columns:96px 1fr;gap:12px;font:400 14px/1.5 var(--sv-font);letter-spacing:-.012em;color:rgba(224,232,255,.86)}
.svp-mod-list li small{font:600 10.5px/1.6 var(--sv-font);letter-spacing:.12em;text-transform:uppercase;color:var(--sv-blue-ink);padding-top:2px}
.svp-mod-list li.h small{color:rgba(255,255,255,.75)}
.svp-mod-list li.a small{color:#B7A6FF}

/* --- growth: journey timeline --- */
.svp-jrn{display:flex;flex-direction:column;gap:20px}
.svp-jrn-tl{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding-top:6px}
.svp-jrn-tl::before{content:"";position:absolute;left:10%;right:10%;top:20px;height:1px;background:rgba(150,190,255,.22)}
.svp-jrn-tl>div{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;opacity:.35;transition:opacity .35s var(--sv-out)}
.svp-jrn-tl>div.on{opacity:1}
.svp-jrn-tl .dotn{width:28px;height:28px;border-radius:50%;background:rgba(13,20,56,.95);box-shadow:inset 0 0 0 1.5px var(--sv-blue),0 0 0 4px rgba(4,8,26,.9);display:grid;place-items:center}
.svp-jrn-tl .dotn::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--sv-signal)}
.svp-jrn-tl>div[data-who="ai"] .dotn{box-shadow:inset 0 0 0 1.5px var(--sv-vio),0 0 0 4px rgba(4,8,26,.9)}
.svp-jrn-tl>div[data-who="ai"] .dotn::after{background:radial-gradient(circle at 34% 30%,#efe9ff 0,#c4b5ff 35%,#8B7CFF 60%,#5f46d8 100%)}
.svp-jrn-tl>div[data-who="human"] .dotn{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85),0 0 0 4px rgba(4,8,26,.9)}
.svp-jrn-tl>div[data-who="human"] .dotn::after{background:radial-gradient(circle at 34% 30%,#fff 0,#e6eeff 40%,#b9c8ea 100%)}
.svp-jrn-tl>div.on .dotn{box-shadow:inset 0 0 0 1.5px var(--sv-blue),0 0 0 4px rgba(4,8,26,.9),0 0 16px rgba(95,168,255,.6)}
.svp-jrn-tl>div.on[data-who="ai"] .dotn{box-shadow:inset 0 0 0 1.5px var(--sv-vio),0 0 0 4px rgba(4,8,26,.9),0 0 16px rgba(139,124,255,.6)}
.svp-jrn-tl>div.on[data-who="human"] .dotn{box-shadow:inset 0 0 0 1.5px #fff,0 0 0 4px rgba(4,8,26,.9),0 0 16px rgba(255,255,255,.4)}
.svp-jrn-tl small{font:600 10.5px/1 var(--sv-font);letter-spacing:.1em;text-transform:uppercase;color:var(--sv-blue-ink)}
.svp-jrn-tl>div[data-who="ai"] small{color:#B7A6FF}
.svp-jrn-tl>div[data-who="human"] small{color:rgba(255,255,255,.75)}
.svp-jrn-tl b{font:500 13.5px/1.3 var(--sv-font);letter-spacing:-.015em;color:#fff}
.svp-jrn-tl p{margin:0;font:400 12.5px/1.45 var(--sv-font);color:var(--sv-mute);max-width:18ch}
.svp-jrn-stop{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--sv-line);font:400 13.5px/1.4 var(--sv-font);color:var(--sv-mute)}
.svp-jrn-stop b{color:#fff;font-weight:500}
.svp-jrn-stop::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;background:radial-gradient(circle at 34% 30%,#fff 0,#e6eeff 40%,#b9c8ea 100%);box-shadow:0 0 8px rgba(255,255,255,.5)}

/* ============================================================ detail: prev / next */
.svp-nextprev{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:clamp(18px,2.4vw,28px)}
.svp-nextprev a{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border-radius:18px;background:var(--sv-card);box-shadow:inset 0 0 0 1px var(--sv-line);text-decoration:none;color:var(--sv-ink);transition:background .2s,box-shadow .2s}
.svp-nextprev a:hover{background:var(--sv-card-h);box-shadow:inset 0 0 0 1px var(--sv-line-h)}
.svp-nextprev a small{font:600 11px/1 var(--sv-font);letter-spacing:.12em;text-transform:uppercase;color:var(--sv-blue-ink)}
.svp-nextprev a b{font:500 17px/1.25 var(--sv-font);letter-spacing:-.025em;color:#fff}
.svp-nextprev a.next{text-align:right;align-items:flex-end}

/* ============================================================ responsive */
@media (max-width:1100px){
  .svp-sys,.svp-sys.alt{grid-template-columns:1fr 1fr}
  .svp-caps{grid-template-columns:1fr}
  /* 5 steps wrap to 3 columns here: the row gap has to clear the second row's hairline and its dot */
  .svp-steps{grid-template-columns:repeat(3,1fr);gap:34px 18px}
  .svp-steps li{padding:22px 0 0}
  .svp-tiles{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .svp-sys,.svp-sys.alt{grid-template-columns:1fr}
  .svp-sys .svp-sys-text,.svp-sys.alt .svp-sys-text{order:1}
  .svp-sys .svp-sys-visual,.svp-sys.alt .svp-sys-visual{order:2;border-left:0;border-right:0;border-top:1px solid var(--sv-hair);min-height:0}
  .svp-win{max-width:520px}
  .svp-think .wrap,.svp-band .wrap{grid-template-columns:1fr}
  .svp-close .svp-glass{grid-template-columns:1fr}
  .svp-demo,.svp-mod{grid-template-columns:1fr}
  .svp-dash-main{grid-template-columns:1fr}
  .svp-wf-track{grid-template-columns:repeat(3,1fr);gap:14px 8px}
  .svp-wf-track::before{display:none}
  .svp-sim-scen{grid-template-columns:1fr}
  .svp-sim-lane{grid-template-columns:repeat(2,1fr);gap:16px 8px}
  .svp-sim-lane::before{display:none}
  .svp-jrn-tl{grid-template-columns:repeat(2,1fr);gap:16px 8px}
  .svp-jrn-tl::before{display:none}
  .svp-jrn-tl p{max-width:none}
}
@media (max-width:640px){
  .svp-hero{padding-top:112px}
  .svp-h1{max-width:none}
  .svp-steps{grid-template-columns:1fr;gap:0}
  .svp-steps li{padding-top:16px;padding-bottom:16px}
  .svp-tiles{grid-template-columns:1fr 1fr}
  .svp-tile b{font-size:22px}
  .svp-map-q{grid-template-columns:1fr}
  .svp-nextprev{grid-template-columns:1fr}
  .svp-nextprev a.next{text-align:left;align-items:flex-start}
  .svp-close-actions .svp-btn{width:100%;justify-content:center}
  .svp-mod-list li{grid-template-columns:1fr;gap:2px}
  .svp-glass{border-radius:22px}
  .svp-jump a{height:38px;padding:0 12px 0 10px;font-size:13.5px}
  /* the diagrams render below their viewBox width here, so the labels are stepped up to stay readable */
  .svp-win .t{font-size:14px}
  .svp-win .t.s{font-size:11.5px}
  .svp-map-svg .zt{font-size:11px}
  .svp-map-svg .al{font-size:12px}
  .svp-mod-btn text{font-size:13px}
  .svp-mod-map{padding:10px}
  .svp-mod-btn .sub,.svp-mod-ext .sub{font-size:11.5px}
  .svp-mod-map .core-t,.svp-mod-map .core-s{font-size:12px}
  .svp-chart .mark-l{font-size:10px}
}

/* ============================================================ motion respect */
@media (prefers-reduced-motion:reduce){
  .svp-win .beat,.svp-win .flow,.svp-mod-map .link.on{animation:none}
  .svp-sim-log li{animation:none}
  .svp-map-svg .dot,.svp-map-svg .dot-halo,.svp-chart .line,.svp-sim-lane>div,.svp-jrn-tl>div,.svp-btn,.svp-opt,.svp-node .dotn,.svp-mod-btn,.svp-mod-btn rect{transition:none}
}