/* Service pages (/services/<slug>, generated by tools/site-build/services.js): the case pages' night hero, daylight
   sections, mission cards and call to action (case.css), plus what only a service page has: a sentence for a heading,
   the two ways in, the scope grid, the numbered steps, the proof list, the questions and the related services.
   Loaded after page.css and case.css; the tokens are page.css's. */

/* the parts of the rocket (the home page's sprite): their accent area takes --ga */
.ga{fill:var(--ga,none)}

/* ---------- hero ---------- */
.sv-h1{font:600 clamp(38px,4.4vw,64px)/1.03 var(--font);letter-spacing:-.04em;color:#fff;text-wrap:balance;max-width:13.5em}
.sv-hero .cs-sum{margin-top:clamp(16px,1.8vw,24px)}
.sv-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,2.6vw,34px)}
.sv-patch .sv-glyph{color:#fff;--ga:#82b73c}

/* links inside running text: ink with a lime underline, as in the case studies' prose */
.sv-get-i a,.sv-step a,.sv-why a,.sv-a a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--g-lg);text-decoration-thickness:1.5px;text-underline-offset:.18em}
.sv-get-i a:hover,.sv-step a:hover,.sv-why a:hover,.sv-a a:hover{text-decoration-color:var(--ink)}
.sv-hero .cs-sum a{color:#fff;text-decoration:underline;text-decoration-color:var(--lime);text-underline-offset:.18em}

/* ---------- 01 what you get: cards, three across (two when there are two or four) ---------- */
.sv-get{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(26px,2.8vw,40px)}
.sv-get--c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sv-get-i{display:flex;flex-direction:column;gap:8px;min-width:0;padding:22px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line)}
.sv-get-ic{width:30px;height:30px;margin-bottom:4px;color:var(--lime)}
.sv-get-i h3{font:600 19px/1.3 var(--font);letter-spacing:-.012em}
.sv-get-i p{font-size:16px;line-height:1.58;color:var(--ink-2)}

/* ---------- 02 how we work: the steps on one dotted course (a column on narrow screens) ---------- */
.sv-steps{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:22px;margin-top:clamp(30px,3.2vw,48px)}
.sv-step{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;padding-top:46px}
.sv-step::before{content:"";position:absolute;left:30px;right:-22px;top:14px;height:2px;background:radial-gradient(circle,var(--g-lg) 1.2px,transparent 1.6px) 0 50%/9px 2px repeat-x}
.sv-step:last-child::before{display:none}
.sv-step .sv-step-n{position:absolute;left:0;top:0;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font:500 11px/1 var(--mono);font-stretch:87.5%;letter-spacing:.04em}
.sv-step:first-child .sv-step-n{background:var(--lime);color:var(--ink)}
/* (the number is a <p>: ".sv-step .sv-step-n" outranks ".sv-step p", which styles the step's text) */
.sv-step h3{font:600 19px/1.3 var(--font);letter-spacing:-.012em}
.sv-step p{font-size:15.5px;line-height:1.58;color:var(--ink-2)}

/* ---------- 03 why geeknauts: proof points, two columns ---------- */
.sv-why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,3.4vw,52px);margin-top:clamp(24px,2.6vw,36px)}
.sv-why li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:14px;align-items:start;padding:20px 0;border-top:1px solid var(--line)}
.sv-why .i{width:26px;height:26px;margin-top:1px;color:var(--g-lg)}
.sv-why h3{font:600 18.5px/1.35 var(--font);letter-spacing:-.01em;margin-bottom:5px}
.sv-why p{font-size:16px;line-height:1.6;color:var(--ink-2)}

/* ---------- 04 questions: native disclosure, a plus that turns into a minus ---------- */
.sv-faq-wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,72px);align-items:start}
.sv-faq{border-top:1px solid var(--line-2)}
.sv-q{border-bottom:1px solid var(--line-2)}
.sv-q summary{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:66px;padding:16px 0;cursor:pointer;list-style:none}
.sv-q summary::-webkit-details-marker{display:none}
.sv-q summary:focus-visible{outline:3px solid var(--g-lg);outline-offset:4px;border-radius:8px}
.sv-q h3{font:500 18.5px/1.38 var(--font);letter-spacing:-.01em;color:var(--ink);transition:color .2s}
.sv-q summary:hover h3{color:var(--g-sm)}
.sv-q-i{position:relative;flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line-2);background:#fff;transition:background-color .25s,border-color .25s}
.sv-q-i::before,.sv-q-i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.8px;border-radius:2px;background:var(--ink);translate:-50% -50%;transition:rotate .3s var(--out)}
.sv-q-i::after{rotate:90deg}
.sv-q[open] .sv-q-i{background:var(--lime);border-color:var(--lime)}
.sv-q[open] .sv-q-i::after{rotate:0deg}
.sv-a{display:grid;gap:10px;padding:0 48px 22px 0}
.sv-a p{max-width:40em;font-size:16.5px;line-height:1.62;color:var(--ink-2)}

/* the related services: a row of pills under the questions */
.sv-rel{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:clamp(40px,4.4vw,64px);padding-top:24px;border-top:1px solid var(--line-2)}
.sv-rel-h{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.sv-rel ul{display:flex;flex-wrap:wrap;gap:8px}
.sv-rel a{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 15px 0 17px;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:var(--ink);font:500 15px/1 var(--font);text-decoration:none;transition:border-color .2s}
.sv-rel a .i{width:15px;height:15px;color:var(--g-lg);transition:transform .3s var(--out)}
.sv-rel a:hover{border-color:var(--ink)}
.sv-rel a:hover .i{transform:translateX(3px)}
.sv-rel a:focus-visible{outline:3px solid var(--g-lg);outline-offset:2px}

/* ---------- narrower screens ---------- */
@media (max-width:1279px){
  .sv-steps{grid-template-columns:repeat(min(var(--n,5),3),minmax(0,1fr));row-gap:34px}
  .sv-step:nth-child(3n)::before{display:none}
}
@media (max-width:1023px){
  .sv-get,.sv-get--c2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sv-faq-wrap{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .sv-get,.sv-get--c2,.sv-why{grid-template-columns:minmax(0,1fr)}
  .sv-steps{grid-template-columns:minmax(0,1fr);row-gap:0}
  .sv-step,.sv-step:nth-child(3n){padding:0 0 26px 48px}
  .sv-step::before,.sv-step:nth-child(3n)::before{display:block;left:14px;right:auto;top:38px;bottom:4px;width:2px;height:auto;background:radial-gradient(circle,var(--g-lg) 1.2px,transparent 1.6px) 50% 0/2px 9px repeat-y}
  .sv-step:last-child::before{display:none}
  .sv-a{padding-right:0}
  .sv-ctas .btn{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.sv-q-i,.sv-q-i::before,.sv-q-i::after,.sv-rel a .i{transition:none}}
@media print{.sv-ctas,.sv-rel{display:none}.sv-q .sv-a{display:grid}}
/* a note under a list (e.g. hosting: what changes when we built the app ourselves) */
.sv-note{max-width:44em;margin-top:clamp(22px,2.4vw,32px);padding-left:16px;border-left:3px solid var(--lime);font-size:17px;line-height:1.6;color:var(--ink)}
.sv-note a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--g-lg);text-decoration-thickness:1.5px;text-underline-offset:.18em}

/* =====================================================================
   The richer pages (29 October 2026, hosting first): the facts as chips under the hero, a drawing in place of the patch's
   orbit, "Sound familiar?", a step log with what the client has after each step, a callout, a night band of stations and
   the audiences with their tags. A page uses them only when its Markdown has them (tools/site-build/services.js).
   ===================================================================== */
/* hero: the facts in short, as telemetry chips */
.sv-chips{display:flex;flex-wrap:wrap;gap:8px;max-width:34em;margin-top:clamp(22px,2.4vw,30px)}
.sv-chips li{display:inline-flex;align-items:center;gap:9px;min-height:32px;padding:0 13px 0 11px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);font:500 11.5px/1.2 var(--mono);font-stretch:87.5%;letter-spacing:.03em;color:var(--on-2)}
.sv-chips li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(130,183,60,.18)}

/* hero: the drawing (the patch stays, in its corner) */
.sv-vis{--rise:0%;--pad:0%;aspect-ratio:520/450;max-width:600px}
.sv-vis .cs-patch{left:-22px;top:-30px;width:clamp(72px,6.4vw,94px)}
.svx{position:relative;z-index:1;display:block;width:100%;height:100%;overflow:visible}
.svx-ring{fill:none;stroke:rgba(160,216,85,.34);stroke-width:1.2;stroke-dasharray:2 7}
.svx-tick{stroke:var(--lime-hi);stroke-width:2;stroke-linecap:round}
.svx-t{font:500 10px var(--mono);font-stretch:87.5%;letter-spacing:.06em;fill:var(--on-3)}
.svx-t--s{font-size:9.5px;fill:var(--on-2)}
.svx-t--k{font-size:9.5px;letter-spacing:.12em;fill:var(--lime-hi)}
.svx-hand{stroke:var(--lime-hi);stroke-width:1.4;opacity:.8}
.svx-sweep{transform-box:view-box;transform-origin:250px 225px}
.svx-link{fill:none;stroke:rgba(160,216,85,.55);stroke-width:1.6;stroke-dasharray:3 6}
.svx-halo{fill:rgba(130,183,60,.1)}
.svx-body{fill:#24252b;stroke:rgba(255,255,255,.55);stroke-width:1.3}
.svx-bay{fill:none;stroke:#fff;stroke-width:1.4;opacity:.85}
.svx-copy{fill:var(--lime)}
.svx-bk-path{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1.4}
.svx-bk{fill:none;stroke:var(--lime-hi);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:2 9}
.svx-vault{fill:#24252b;stroke:var(--lime);stroke-width:1.4}
.svx-vault-i{fill:none;stroke:#fff;stroke-width:1.6;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){
  .svx-sweep{animation:svx-turn 12s linear infinite}
  .svx-link{animation:svx-flow 1.4s linear infinite}
  .svx-bk{animation:svx-flow2 2.2s linear infinite}
  .svx-copy{animation:svx-blink 2.4s ease-in-out infinite}
  .svx-node.n2 .svx-copy{animation-delay:.8s}
  .svx-node.n3 .svx-copy{animation-delay:1.6s}
  /* now and then one server stops for a moment, and the other two carry on */
  .svx-node.n2{animation:svx-down 12s ease-in-out infinite}
  .svx-link.l12,.svx-link.l23{animation:svx-flow 1.4s linear infinite,svx-dim 12s ease-in-out infinite}
}
@keyframes svx-turn{to{transform:rotate(360deg)}}
@keyframes svx-flow{to{stroke-dashoffset:-18}}
@keyframes svx-flow2{to{stroke-dashoffset:-22}}
@keyframes svx-blink{50%{opacity:.35}}
@keyframes svx-down{0%,62%,86%,100%{opacity:1}68%,80%{opacity:.28}}
@keyframes svx-dim{0%,62%,86%,100%{opacity:1}68%,80%{opacity:.12}}

/* a section's lead, under its heading */
.sv-lead{max-width:44em;margin-top:14px;font-size:clamp(17px,1.3vw,19px);line-height:1.6;color:var(--ink-2)}

/* "Sound familiar?": what clients tell us, and the answer from mission control; the lead is the first, night card */
.sv-pains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(26px,2.8vw,40px)}
.sv-pain{display:flex;flex-direction:column;gap:12px;min-width:0;padding:20px 22px 22px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line)}
.sv-pain--lead{justify-content:flex-end;background-color:var(--space);background-image:var(--grain-d);border-color:transparent}
.sv-pain--lead p{font:400 clamp(19px,1.6vw,22px)/1.42 var(--font);letter-spacing:-.012em;color:#fff}
.sv-pain-k{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.sv-pain-k::before{content:"";width:7px;height:7px;border-radius:50%;background:#d98a1c;box-shadow:0 0 0 3px rgba(217,138,28,.18)}
.sv-pain-q{font:500 18.5px/1.4 var(--font);letter-spacing:-.01em;color:var(--ink)}
.sv-pain-q .i{display:block;width:22px;height:17px;margin-bottom:10px;color:var(--lime)}
.sv-pain-a{margin-top:auto;padding-top:14px;border-top:1px dashed var(--line-2);font-size:15.5px;line-height:1.58;color:var(--ink-2)}
.sv-pain-ak{display:block;margin-bottom:5px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--g-sm)}

/* "What you get" in four columns when there are eight */
.sv-get--c4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* steps that say what the client has after each: a log, one row per step */
.sv-log{margin-top:clamp(26px,2.8vw,40px);border-top:1px solid var(--line-2)}
.sv-log-i{display:grid;grid-template-columns:52px minmax(0,1.3fr) minmax(0,1fr);gap:clamp(16px,2.4vw,36px);align-items:start;padding-block:22px;border-bottom:1px solid var(--line-2)}
.sv-log-i .sv-log-n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font:500 11px/1 var(--mono);font-stretch:87.5%;letter-spacing:.04em}
.sv-log-i:first-child .sv-log-n{background:var(--lime);color:var(--ink)}
.sv-log-b h3{font:600 19px/1.3 var(--font);letter-spacing:-.012em}
.sv-log-b p{margin-top:6px;font-size:16px;line-height:1.6;color:var(--ink-2)}
.sv-log-get{padding:12px 14px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:15px;line-height:1.5;color:var(--ink)}
.sv-log-k{display:block;margin-bottom:4px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--g-sm)}
/* a callout under the steps: the number big, as a readout */
.sv-callout{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2.4vw,32px);align-items:center;margin-top:clamp(22px,2.4vw,32px);padding:clamp(18px,2vw,24px) clamp(20px,2.4vw,30px);border-radius:var(--r-lg);background-color:var(--space);background-image:var(--grain-d);color:var(--on-2)}
.sv-callout .sv-callout-v{font:500 clamp(22px,2.4vw,30px)/1.1 var(--mono);font-stretch:87.5%;color:var(--lime-hi);white-space:nowrap}
.sv-callout p + p{max-width:52em;font-size:16px;line-height:1.6}

/* a night band: the stations, the first one lit */
.sv-space{position:relative;isolation:isolate;overflow:hidden;background-color:var(--space);background-image:var(--grain-d);color:var(--on-1)}
.sv-space::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--stars-img),var(--stars-img);background-size:420px 420px,290px 290px;background-position:0 0,140px 90px;opacity:.55}
.sv-space .cs-kick-l{color:var(--lime-hi)}
.sv-space .cs-h2{color:#fff}
.sv-space .sv-lead{color:var(--on-2)}
.sv-where{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(26px,2.8vw,40px)}
.sv-where-i{display:flex;flex-direction:column;gap:10px;min-width:0;padding:22px;border-radius:var(--r-lg);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12)}
.sv-where-i.is-home{background:rgba(130,183,60,.1);border-color:rgba(160,216,85,.5)}
.sv-where-i .sv-where-st{display:flex;align-items:center;gap:10px;font-size:10.5px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--on-3)}
.sv-st{position:relative;flex:none;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--lime)}
.sv-st::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--lime)}
.sv-where-i h3{font:600 19px/1.3 var(--font);letter-spacing:-.012em;color:#fff}
.sv-where-i p{font-size:15.5px;line-height:1.6;color:var(--on-2)}
.sv-where-i .sv-tags{margin-top:auto;padding-top:6px}
.sv-where-i .sv-tags li{background:rgba(255,255,255,.08);color:var(--on-1)}
.sv-where-i.is-home .sv-tags li{background:var(--lime);color:var(--ink)}

/* who it's for: cards with their tags */
.sv-who{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:clamp(26px,2.8vw,40px)}
.sv-who-i{display:flex;flex-direction:column;gap:8px;min-width:0;padding:24px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line)}
.sv-who-i h3{font:600 19.5px/1.3 var(--font);letter-spacing:-.012em}
.sv-who-i p{font-size:16px;line-height:1.6;color:var(--ink-2)}
.sv-who-i .sv-tags{margin-top:auto;padding-top:8px}
.sv-tags{display:flex;flex-wrap:wrap;gap:6px}
.sv-tags li{display:inline-flex;align-items:center;min-height:28px;padding:0 11px;border-radius:var(--r-pill);background:var(--sky);font:500 13px/1.2 var(--font);color:var(--ink-2)}
.cs-sky .sv-who-i .sv-tags li{background:var(--ground)}

@media (max-width:1279px){
  .sv-get--c4,.sv-pains{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1023px){
  .sv-where{grid-template-columns:minmax(0,1fr)}
  .sv-log-i{grid-template-columns:44px minmax(0,1fr);row-gap:12px}
  .sv-log-get{grid-column:2}
}
@media (max-width:760px){
  .sv-get--c4,.sv-pains,.sv-who{grid-template-columns:minmax(0,1fr)}
  .sv-callout{grid-template-columns:minmax(0,1fr)}
  .sv-vis .cs-patch{left:-8px;top:-24px}
}

/* prices: the plans, the amounts in the visitor's currency (assets/js/gn.js), a switcher shown only with JS */
.sv-pr-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px}
.sv-cur{display:inline-flex;flex-wrap:wrap;gap:3px;padding:4px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--line)}
.sv-cur[hidden]{display:none}
.sv-cur-b{min-height:36px;min-width:50px;padding:0 11px;border:0;border-radius:var(--r-pill);background:none;font-size:12px;letter-spacing:.05em;color:var(--ink-2);cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease)}
.sv-cur-b:hover{color:var(--ink);background:var(--sky)}
.sv-cur-b[aria-pressed="true"]{background:var(--ink);color:#fff}
.sv-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(28px,3vw,40px)}
.sv-plan{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:26px 24px 24px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line)}
.sv-plan.is-pick{border-color:var(--lime);box-shadow:0 0 0 3px rgba(130,183,60,.16),0 18px 40px rgba(46,47,55,.08)}
.sv-plan .sv-plan-badge{position:absolute;top:-12px;left:22px;padding:5px 10px;border-radius:var(--r-pill);background:var(--lime);color:var(--ink);font-size:10.5px;line-height:1;letter-spacing:.1em;text-transform:uppercase}
.sv-plan h3{font:600 21px/1.2 var(--font);letter-spacing:-.014em}
.sv-plan .sv-plan-for{min-height:3em;font-size:15px;line-height:1.5;color:var(--ink-2)}
.sv-plan .sv-plan-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 7px;margin-top:4px;padding-bottom:16px;border-bottom:1px solid var(--line-soft)}
.sv-price{font:500 clamp(32px,2.8vw,40px)/1 var(--font);letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.sv-from,.sv-per{font-size:14px;color:var(--ink-3)}
.sv-price-q{font:500 21px/1.25 var(--font);letter-spacing:-.014em;color:var(--ink)}
.sv-plan-pts{display:grid;gap:8px;margin-block:6px 18px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.sv-plan-pts li{position:relative;padding-left:21px}
.sv-plan-pts li::before{content:"";position:absolute;left:1px;top:.5em;width:8px;height:8px;border-radius:50%;border:2px solid var(--lime)}
.sv-plan .btn{margin-top:auto;align-self:flex-start;--h:46px;padding:0 20px;font-size:15px}
.sv-plan .sv-btn-line{border:1px solid var(--line-2);color:var(--ink);background:#fff}
.sv-plan .sv-btn-line:hover{border-color:var(--ink)}
.sv-pr-note{max-width:62em;margin-top:clamp(20px,2.2vw,28px);font-size:15.5px;line-height:1.65;color:var(--ink-2)}
.sv-pr-note .sv-price--s{font:600 15.5px/1 var(--font);letter-spacing:0;color:var(--ink)}
@media (max-width:1023px){.sv-plans{grid-template-columns:minmax(0,1fr)}.sv-plan .sv-plan-for{min-height:0}}