/* Security & deployment (builder B8; after B5): Deployment as text first with the picture it switches (se-deploy.js), the plan of the
   four controls (se-plan.js), the centred FAQ. Tokens and the six type roles only. */

/* ---------- Deployment: the comparison (the choice) beside the two layers ---------- */
.se-dg{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center}
.se-cmp{grid-column:1 / 6;grid-row:1}
.se-pinw{grid-column:6 / 13;grid-row:1;position:relative;z-index:2}
.se-opt{align-content:start}
.se-tg{display:block}
.se-opt{position:relative;display:grid;grid-template-columns:28px 1fr;padding:26px 0 30px;cursor:pointer;outline:none}
.se-opt+.se-opt{margin-top:6px}
.se-opt::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--line2)}
.se-opt::after{content:'';position:absolute;left:0;top:-1px;height:3px;width:100%;background:var(--verm);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.se-opt.on::after{transform:none}
.se-name{grid-column:1 / -1;display:grid;grid-template-columns:28px 1fr;align-items:center;font:var(--w-h2) var(--s-h2)/1.04 var(--f);letter-spacing:-.032em;color:var(--fg2);transition:color .3s}
.se-opt.on .se-name{color:#fff}
.se-dot{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);transition:background-color .25s,box-shadow .25s}
.se-opt.on .se-dot{background:var(--verm);box-shadow:0 0 0 5px rgba(226,70,42,.2)}
.se-s{grid-column:2;margin-top:14px;font:400 var(--s-lede)/1.45 var(--f);letter-spacing:-.008em;color:var(--fg2);max-width:24em;transition:color .3s}
.se-opt.on .se-s{color:var(--fg)}
.se-opt:not(.on):hover .se-name{color:var(--fg)}
.se-opt:focus-visible{outline:2px solid #fff;outline-offset:8px;border-radius:4px}
.se-dep .se-note{margin-top:20px;padding-left:28px}

/* the two layers */
.se-lay{position:relative;margin:0;aspect-ratio:760 / 540}
.se-lsvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.se-slab .se-bt{fill:rgba(255,255,255,.035);stroke:rgba(255,255,255,.36);stroke-width:1}
.se-slab .se-bf{fill:#121312;stroke:rgba(255,255,255,.24);stroke-width:1}
.se-slab .se-bf2{fill:#181918;stroke:rgba(255,255,255,.24);stroke-width:1}
.se-slab-up .se-bt{fill:rgba(255,255,255,.06)}
.se-up{transition:opacity .45s var(--ease)}
.se-up polygon{transition:fill .45s,stroke-dasharray .45s}
.se-lay[data-v="vpc"] .se-up{opacity:.55}
.se-lay[data-v="vpc"] .se-slab-up polygon{fill:none;stroke-dasharray:5 5}
.se-lay[data-v="vpc"] .se-dotg{opacity:.3}
.se-grid{stroke:rgba(255,255,255,.07);stroke-width:1}
.se-dotg{fill:rgba(255,255,255,.3);transition:opacity .4s}
.se-data .se-bt,.se-sys .se-bt{fill:#272827;stroke:rgba(255,255,255,.5);stroke-width:1}
.se-data .se-bf,.se-sys .se-bf{fill:#121312;stroke:rgba(255,255,255,.3);stroke-width:1}
.se-data .se-bf2,.se-sys .se-bf2{fill:#1b1c1b;stroke:rgba(255,255,255,.3);stroke-width:1}
.se-po{stroke:rgba(255,255,255,.3);stroke-width:1}
.se-pod{fill:rgba(255,255,255,.45)}
.se-solb .se-bt{fill:var(--verm);stroke:rgba(255,255,255,.6);stroke-width:1}
.se-solb .se-bf{fill:#6e2416;stroke:rgba(255,255,255,.3);stroke-width:1}
.se-solb .se-bf2{fill:#93301d;stroke:rgba(255,255,255,.3);stroke-width:1}
.se-soln{fill:#fff}
.se-rl{fill:none;stroke:rgba(245,245,243,.7);stroke-width:1.3;stroke-dasharray:3 4}
.se-rd{fill:#fff}
.se-pol{fill:none;stroke:var(--verm);stroke-width:1.6;stroke-dasharray:9 6;opacity:0;transition:opacity .4s var(--ease)}
.se-lay[data-v="vpc"] .se-pol{opacity:1}
.se-ll{position:absolute;white-space:nowrap;font:500 var(--s-small)/1.3 var(--f);color:var(--fg2);transform:translate(10px,-50%)}
.se-ll[data-al="r"]{transform:translate(calc(-100% - 12px),-50%)}
.se-ll-a,.se-ll-b{font:600 var(--s-body)/1.3 var(--f);color:var(--fg)}
.se-ll-s{font:600 var(--s-body)/1.3 var(--f);color:#fff}
.se-ll[data-al="b"]{transform:translate(-50%,8px)}
.se-ll[data-al="b0"]{transform:translate(0,10px)}
.se-ll[data-al="t"]{transform:translate(-50%,-160%)}
.se-ll[data-al="r0"]{transform:translate(-50%,-150%)}
.se-ll-p{color:var(--fg);opacity:0;transition:opacity .4s}
.se-lay[data-v="vpc"] .se-ll-p{opacity:1}
.js .se-lay{opacity:0;transition:opacity .7s var(--ease)}
.js .se-lay.se-in{opacity:1}

/* ---------- Control in practice: the solution as hardware (se-plan.js) ---------- */
.se-ctl .head{margin-bottom:clamp(20px,2vw,32px)}
.se-plan{position:relative;width:100%;aspect-ratio:1328 / 660;margin:0}
.se-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.se-pins{position:absolute;inset:0;pointer-events:none}
.se-pins [hidden]{display:none!important}
.se-svg .f{stroke:rgba(14,15,15,.62);stroke-width:1;stroke-linejoin:round}
.se-svg .ft{fill:#fff}.se-svg .ff{fill:#f2f3f2}.se-svg .fs{fill:#ececec}.se-svg .fs2{fill:#e4e6e5}
.se-svg .pf{stroke:rgba(14,15,15,.4);stroke-width:1;stroke-dasharray:6 5}
.se-svg .pl-a .pf{fill:rgba(14,15,15,.035)}
.se-svg .pl-b .pf{fill:rgba(255,255,255,.7)}
.se-svg .pd{fill:rgba(14,15,15,.18)}
.se-svg .ext .ft{fill:#fafafa}.se-svg .ext .f{stroke-dasharray:4 3}
.se-svg .post .f{stroke-width:.9}
.se-svg .unit{fill:none;stroke:rgba(14,15,15,.45);stroke-width:.9;stroke-linecap:round}
.se-svg .led{fill:rgba(14,15,15,.6)}
.se-svg .slot{fill:#fff;stroke:rgba(14,15,15,.45);stroke-width:.8}
.se-svg .lk{fill:none;stroke:rgba(14,15,15,.7);stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}
.se-svg .rt{fill:none;stroke:rgba(14,15,15,.7);stroke-width:1.3;stroke-dasharray:2 6;stroke-linecap:round;stroke-linejoin:round}
.se-svg .ghost{fill:none;stroke:rgba(14,15,15,.4);stroke-width:1.3;stroke-dasharray:7 6}
.se-svg .tap{fill:none;stroke:rgba(14,15,15,.6);stroke-width:1.2;stroke-dasharray:2 4;stroke-linecap:round}
.se-svg .cage{fill:none;stroke:var(--verm);stroke-width:1.4;stroke-dasharray:7 5}
.se-svg .port{fill:#fff;stroke:var(--verm);stroke-width:2.6}
.se-svg .bar{fill:none;stroke:var(--verm);stroke-width:4;stroke-linecap:round}
.se-svg .post2{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.se-svg .pivot{fill:#fff;stroke:var(--ink);stroke-width:1.5}
.se-svg .badge{fill:var(--verm)}
.se-svg .tick{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.se-svg .ldr{fill:none;stroke:rgba(14,15,15,.55);stroke-width:1}
.se-svg .ldot{fill:var(--ink)}
.se-svg .vline{fill:none;stroke:var(--verm);stroke-width:2.4;stroke-linecap:round}
.se-svg .lay{opacity:0;transition:opacity .6s var(--ease)}
.se-plan.se-in .se-svg .lay{opacity:1}
.se-svg .lay2{transition-delay:.15s} .se-svg .lay3{transition-delay:.3s}
.se-svg .mk{opacity:0;transition:opacity .35s var(--ease)}
.se-plan.se-in .se-svg .mk0{opacity:1;transition-delay:.6s}
.se-plan.se-in .se-svg .mk1{opacity:1;transition-delay:.8s}
.se-plan.se-in .se-svg .mk2{opacity:1;transition-delay:1s}
.se-plan.se-in .se-svg .mk3{opacity:1;transition-delay:1.2s}

/* the drawing's words: the grounds large, the parts small, the controls bold where each acts */
.se-pins [data-pin]{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;transition:opacity .5s var(--ease)}
.se-pins [data-al="b"]{transform:translateY(-100%)}
.se-pins [data-al="tl"]{transform:none}
.se-pins [data-al="c"]{transform:translate(-50%,-50%)}
.se-pins [data-al="bc"]{transform:translateX(-50%)}
.se-pins [data-al="tc"]{transform:translate(-50%,-100%)}
.se-pins [data-al="br"]{transform:translate(-100%,-100%)}
.se-pins [data-al="r"]{transform:translate(-100%,-50%)}
.se-pins [data-al="l"]{transform:translateY(-50%)}
.se-plan.se-in .se-pins [data-pin]{opacity:1}
.se-zone{font:var(--w-h3) var(--s-lede)/1.2 var(--f);letter-spacing:-.012em;color:var(--ink);padding:3px 0}
.se-rm{font:500 var(--s-small)/1.25 var(--f);color:var(--ink);padding:2px 7px;background:rgba(255,255,255,.88);border-radius:5px;box-shadow:0 0 0 1px rgba(14,15,15,.1)}
.se-rm.se-sub{color:var(--ink2);background:rgba(243,244,244,.9);box-shadow:none;padding:0 4px}
.se-ct{display:inline-flex;align-items:center;gap:8px;font:600 var(--s-body)/1.2 var(--f);color:var(--ink);padding:7px 12px 7px 10px;background:#fff;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--verm),0 8px 20px rgba(14,15,15,.1)}
.se-ct::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--verm)}
.se-plan.se-in .se-ct{transition-delay:.9s}

/* the key: each control's sentence, marked with the sign it carries on the plan */
.se-key{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap);margin-top:clamp(28px,3vw,44px)}
.se-key li{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;align-content:start;padding-top:18px;border-top:1px solid rgba(14,15,15,.3)}
.se-key h3{grid-column:2;color:var(--ink)}
.se-key p{grid-column:1 / -1;margin-top:10px;color:var(--ink2);max-width:24em}
.se-g{display:block;width:22px;height:12px;position:relative}
.se-g0{background:repeating-linear-gradient(90deg,var(--verm) 0 7px,transparent 7px 11px);height:2.2px;margin:5px 0}
.se-g1{width:14px;height:14px;margin:0 4px;background:var(--verm);border-radius:3px}
.se-g1::after{content:'';position:absolute;left:4px;top:2.5px;width:3.5px;height:6px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(40deg)}
.se-g2{height:4px;margin:4px 0;background:var(--verm);border-radius:2px}
.se-g2::before{content:'';position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.6px var(--ink);background:#fff}
.se-g3{width:14px;height:17px;margin:0 4px;border-radius:2px;box-shadow:inset 0 0 0 1.5px var(--ink);background:linear-gradient(var(--verm),var(--verm)) 3px 12px / 8px 2px no-repeat,linear-gradient(rgba(14,15,15,.45),rgba(14,15,15,.45)) 3px 4px / 8px 1.2px no-repeat,linear-gradient(rgba(14,15,15,.45),rgba(14,15,15,.45)) 3px 8px / 8px 1.2px no-repeat}
.se-sylo{margin-top:28px}
@media (prefers-reduced-motion:reduce){ .se-opt::after,.se-name,.se-s,.se-dot,.se-up,.se-up polygon,.se-pol,.se-ll-p,.se-lay,.se-svg .lay,.se-svg .mk,.se-pins [data-pin]{transition:none!important} }

/* ---------- Before you begin: a traditional FAQ, centred; question rows that open and close (they start open) ---------- */
.se-fq-head{text-align:center;max-width:760px;margin:0 auto}
.se-fq-head .eyebrow{margin-bottom:18px}
.se-fq{max-width:760px;margin:clamp(40px,4.4vw,64px) auto 0;border-bottom:1px solid var(--line2)}
.se-fq-i{border-top:1px solid var(--line2)}
.se-fq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px;padding:26px 0;cursor:pointer;font:var(--w-h3) var(--s-lede)/1.3 var(--f);letter-spacing:-.012em;color:#fff}
.se-fq summary::-webkit-details-marker{display:none}
.se-fq summary::after{content:'';flex:none;width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line2);
  background:linear-gradient(#fff,#fff) center / 12px 1.6px no-repeat,linear-gradient(#fff,#fff) center / 1.6px 12px no-repeat;transition:background-size .25s var(--ease),box-shadow .2s}
.se-fq details[open] summary::after{background:linear-gradient(#fff,#fff) center / 12px 1.6px no-repeat,linear-gradient(#fff,#fff) center / 1.6px 0 no-repeat}
.se-fq summary:hover::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.se-fq summary:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:4px}
.se-fq-i p{margin:-8px 56px 0 0;padding-bottom:28px;font:400 var(--s-body)/1.6 var(--f);color:var(--fg2);max-width:40em}

/* ---------- the opening (build.py's poster): the lede and Talk to us grouped and set larger (client 221); L2: sizes kept on the six type roles (lede 20/500, white) ---------- */
.poster--open .pc-bot{display:flex;flex-direction:column;align-items:flex-start;gap:26px;max-width:640px}
.poster--open .pc-bot>.lede{font:500 var(--s-lede)/1.4 var(--f);letter-spacing:-.01em;color:#fff;max-width:26em;text-shadow:0 1px 18px rgba(10,10,10,.35)}
.poster--open .pc-bot>.ctas{margin:0}
.poster--open .pc-bot .btn{height:56px;padding:0 30px;font-size:var(--s-lede)}

/* ---------- the closing: more height and air, the heading larger (client 219/220) ---------- */
.cl-word{min-height:min(100vh,980px);display:flex;align-items:center;padding:clamp(160px,16vw,240px) 0 clamp(140px,14vw,220px)}
.cl-word>.wrap{width:100%}
.cl-word .h1{max-width:12em;margin:0 auto}
.cl-word .eyebrow{margin-bottom:34px}
.cl-word .lede{margin-top:48px;font-size:var(--s-lede)}
.cl-word .mail{margin-top:40px}
.cl-word::before{width:min(1400px,140vw)}

@media (min-width:761px) and (max-width:1180px){
  .se-zone{font-size:var(--s-body)}
  .se-ct{font-size:var(--s-small);padding:4px 9px 4px 7px;gap:6px}
  .se-ct::before{width:6px;height:6px}
  .se-rm{font-size:var(--s-small);padding:1px 4px}
  .se-rm.se-sub{padding:0 3px;line-height:1.15}
}

@media (max-width:760px){
  .se-dg{display:block}
  /* client 22 Oct (phone check): the two labels under the picture sat in the fade, so the options' words showed through them while
     scrolling under the held picture; the ground now stays solid to below them and fades after */
  .se-pinw{position:sticky;top:var(--navh);padding:14px 0 74px;background:linear-gradient(var(--bg) calc(100% - 34px),rgba(10,10,10,0))}
  .se-opt{min-height:44vh}
  .se-name{font-size:var(--s-h2)}
  .se-opt{padding:22px 0 24px}
  .se-ll{font-size:var(--s-small)}
  .se-ll-a,.se-ll-b,.se-ll-s{font-size:var(--s-small)}
  .se-zone{font-size:var(--s-body)}
  .se-ct{font-size:var(--s-small);padding:4px 8px 4px 7px;gap:5px}
  .se-ct::before{width:6px;height:6px}
  .se-rm{font-size:var(--s-small);padding:1px 5px}
  .se-key{display:block}
  .poster--open .pc-bot>.lede{font-size:var(--s-lede);color:var(--fg)}
  .poster--open .pc-bot{gap:20px}
  .cl-word{min-height:0;padding:140px 0 120px}
  .cl-word .lede{font-size:var(--s-lede);margin-top:32px}
  .se-fq summary{font-size:var(--s-lede);padding:22px 0}
  .se-fq-i p{margin-right:0}
  .se-plan{margin-bottom:64px}
  .se-zone{display:inline-flex;align-items:center;gap:8px}
  .se-zone::before{content:'';width:22px;height:14px;border:1px solid rgba(14,15,15,.45)}
  .se-zone[data-pin="za"]::before{background:repeating-linear-gradient(45deg,rgba(14,15,15,.25) 0 1px,transparent 1px 5px)}
  .se-zone[data-pin="zb"]::before{background:#fff}
  .se-key li+li{margin-top:22px}
}
/* client 262 "make them look like servers not buildings": rack-unit fronts (se-plan.js): mounting ears, drive bays, a vent, status lights */
.se-svg .ear{fill:#fff;stroke:rgba(14,15,15,.5);stroke-width:.7}
.se-svg .scr{fill:rgba(14,15,15,.45)}
.se-svg .bay{fill:#fff;stroke:rgba(14,15,15,.5);stroke-width:.7}
.se-svg .hole{fill:rgba(14,15,15,.38)}
.se-svg .led-o{fill:#fff;stroke:rgba(14,15,15,.6);stroke-width:.8}
.se-svg .pwr{fill:none;stroke:rgba(14,15,15,.55);stroke-width:.9}
.se-svg .seam{fill:none;stroke:rgba(14,15,15,.35);stroke-width:.8}

/* client 384 "reduce sizes of text of vpc and cloud text, too loud": the two options one step down the type scale, the names at the h3 role
   (they are h3s), their lines at body size */
.se-name{font:var(--w-h3) var(--s-lede)/1.3 var(--f);letter-spacing:-.012em}
.se-s{font:400 var(--s-body)/1.55 var(--f);letter-spacing:-.003em}
@media (max-width:760px){.se-name{font-size:var(--s-lede)}}