/* ============================================================ CAELION — PRECISION INTELLIGENCE design system (shared) Graphite canvas · restrained red accent · monospaced telemetry Used by pages with . Complements style.css (utilbar / nav / footer / cookie remain in style.css). ============================================================ */ /* ============================================================ PRECISION INTELLIGENCE — page-scoped design system (studio) Graphite canvas · restrained red · monospaced telemetry ============================================================ */ .pi{ --g0:#0b0b10; --g1:#111118; --g2:#17171f; --g3:#1e1e28; --pap:#fbfaf8; --pink:#12121a; --pi-red:#e8493c; --pi-blue:#8fa3e8; --ok:#65d2a4; --wln:rgba(255,255,255,.10); --wln2:rgba(255,255,255,.18); --dln:rgba(18,18,26,.14); --dln2:rgba(18,18,26,.26); --wtx:rgba(255,255,255,.92); --wtx2:rgba(255,255,255,.62); --wtx3:rgba(255,255,255,.42); --dtx:#12121a; --dtx2:rgba(18,18,26,.68); --dtx3:rgba(18,18,26,.46); --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --disp:'Fraunces',Georgia,serif; --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:var(--g0); } .pi .wrapx{max-width:1200px;margin:0 auto;padding:0 32px} .pi .mono{font-family:var(--mono)} .pi .kick{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500} .pi .kick .kn{color:var(--pi-red);margin-right:10px} .pi section{position:relative} .pi .sec-dark{background:var(--g0);color:var(--wtx)} .pi .sec-dark2{background:var(--g1);color:var(--wtx)} .pi .sec-light{background:var(--pap);color:var(--dtx)} .pi h1,.pi h2{font-family:var(--disp);font-weight:500;letter-spacing:-.015em;margin:0} .pi p{font-family:var(--sans)} /* ---------- 01 HERO ---------- */ .pi-hero{background: radial-gradient(1100px 520px at 78% -10%, rgba(143,163,232,.07), transparent 60%), linear-gradient(180deg,var(--g0) 0%,var(--g1) 100%); color:var(--wtx);border-bottom:1px solid var(--wln);overflow:hidden} .pi-hero .hgrid{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:56px;align-items:center;padding:88px 0 84px} .pi-hero .kick{color:var(--wtx3)} .pi-hero h1{font-size:clamp(40px,4.6vw,64px);line-height:1.06;margin:26px 0 0} .pi-hero h1 .hl-agents{color:var(--pi-blue)} .pi-hero h1 .hl-ev{color:var(--pi-red)} .pi-hero .hsub{margin:26px 0 0;max-width:46ch;font-size:17px;line-height:1.65;color:var(--wtx2);font-weight:450} .pi-hero .hcta{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px} .pi .btnx{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:600;font-size:15px;padding:14px 26px;border-radius:3px;text-decoration:none;transition:transform .18s ease,background .18s ease,border-color .18s ease;border:1px solid transparent} .pi .btnx:hover{transform:translateY(-1px)} .pi .btnx-solid{background:var(--pi-red);color:#fff} .pi .btnx-solid:hover{background:#f05b4e} .pi .btnx-line{border-color:var(--wln2);color:var(--wtx)} .pi .btnx-line:hover{border-color:rgba(255,255,255,.4)} .pi .btnx-dline{border-color:var(--dln2);color:var(--dtx)} .pi .btnx-dline:hover{border-color:rgba(18,18,26,.5)} .pi-hero .hcred{margin-top:44px;padding-top:22px;border-top:1px solid var(--wln);font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--wtx3);display:flex;gap:22px;flex-wrap:wrap} .pi-hero .hcred b{color:var(--wtx2);font-weight:500} /* hero fabric SVG */ .fabric{width:100%;height:auto;display:block} .fabric text{font-family:var(--mono);letter-spacing:.14em} .fabric .lb{fill:rgba(255,255,255,.40);font-size:9.5px} .fabric .lb2{fill:rgba(255,255,255,.78);font-size:10.5px} .fabric .lbr{fill:var(--pi-red)} .fabric .lbb{fill:var(--pi-blue)} .fabric .frame{fill:none;stroke:var(--wln2);stroke-width:1} .fabric .frame-dash{fill:none;stroke:rgba(255,255,255,.26);stroke-width:1;stroke-dasharray:3 5} .fabric .cell{fill:rgba(255,255,255,.03);stroke:var(--wln);stroke-width:1} .fabric .cell-r{stroke:rgba(232,73,60,.55);fill:rgba(232,73,60,.06)} .fabric .cell-b{stroke:rgba(143,163,232,.5);fill:rgba(143,163,232,.05)} .fabric .wire{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1} .fabric .sig{fill:none;stroke-width:1.4;stroke-linecap:round;stroke-dasharray:5 90} .fabric .sig-b{stroke:var(--pi-blue)} .fabric .sig-r{stroke:var(--pi-red)} .fabric .sig-g{stroke:var(--ok)} .fabric .np{fill:var(--pi-blue)} .fabric .np-r{fill:var(--pi-red)} @keyframes sigflow{from{stroke-dashoffset:95}to{stroke-dashoffset:0}} @keyframes npulse{0%,100%{opacity:.25}50%{opacity:1}} .js .fabric .sig{animation:sigflow 3.2s linear infinite} .js .fabric .sig.s2{animation-delay:-1.1s} .js .fabric .sig.s3{animation-delay:-2.2s} .js .fabric .np{animation:npulse 2.8s ease-in-out infinite} .js .fabric .np.p2{animation-delay:-.9s} .js .fabric .np.p3{animation-delay:-1.8s} /* ---------- 02 TRUST RAIL ---------- */ .trail{background:var(--g1);border-bottom:1px solid var(--wln);padding:42px 0 46px} .trail .tr-lead{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--wtx3);margin:0 0 26px} .trail .tr-marks{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--wln)} .trail .tr-marks span{flex:1 1 auto;text-align:center;padding:16px 13px;border-right:1px solid var(--wln);font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.01em;color:rgba(255,255,255,.5);white-space:nowrap;transition:color .2s ease;cursor:default} .trail .tr-marks span:last-child{border-right:0} .trail .tr-marks span:hover{color:rgba(255,255,255,.9)} /* NOTE: replace text marks with official monochrome vendor SVGs in /assets/vendors/ (aws.svg, bedrock.svg, entra.svg, sentinel.svg, okta.svg, cyberark.svg, sailpoint.svg, splunk.svg, servicenow.svg, terraform.svg, kubernetes.svg) once official brand assets are downloaded. Never redraw vendor marks. */ /* ---------- 03 PLATFORM MODULES ---------- */ .plats{padding:110px 0 40px} .plats .sec-head2{max-width:720px;margin-bottom:26px} .plats h2{font-size:clamp(32px,3.4vw,48px);line-height:1.1;margin-top:22px} .plats .sec-head2 p{color:var(--dtx2);font-size:17px;line-height:1.65;margin:20px 0 0} .pmod{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:64px;align-items:center;padding:72px 0;border-top:1px solid var(--dln)} .pmod:first-of-type{border-top:0} .pmod .cat{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--pi-red);font-weight:500} .pmod h3{font-family:var(--disp);font-weight:500;font-size:clamp(26px,2.6vw,36px);line-height:1.15;letter-spacing:-.01em;margin:16px 0 0} .pmod .pdesc{color:var(--dtx2);font-size:16px;line-height:1.7;margin:18px 0 0;max-width:48ch} .pmod .ptags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px} .pmod .ptags span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:6px 12px;border:1px solid var(--dln);color:var(--dtx2);border-radius:2px} .pmod .pcta{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-family:var(--sans);font-weight:600;font-size:15px;color:var(--dtx);text-decoration:none;border-bottom:1px solid var(--dtx);padding-bottom:3px;transition:color .18s,border-color .18s} .pmod .pcta:hover{color:var(--pi-red);border-color:var(--pi-red)} .pmod .pviz{background:var(--g0);border:1px solid rgba(18,18,26,.9);border-radius:4px;padding:26px 24px 20px;box-shadow:0 24px 60px -32px rgba(18,18,26,.45)} .pmod .pviz .pv-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px} .pmod .pviz .pv-head .pv-t{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45)} .pmod .pviz .pv-head .pv-dot{width:7px;height:7px;border-radius:50%;background:var(--ok)} .js .pmod .pviz .pv-dot{animation:npulse 2.4s ease-in-out infinite} .mini{width:100%;height:auto;display:block} .mini text{font-family:var(--mono);letter-spacing:.1em} .mini .lb{fill:rgba(255,255,255,.42);font-size:9px} .mini .lb2{fill:rgba(255,255,255,.8);font-size:10px} .mini .lbr{fill:var(--pi-red)} .mini .lbb{fill:var(--pi-blue)} .mini .lbg{fill:var(--ok)} .mini .cell{fill:rgba(255,255,255,.03);stroke:rgba(255,255,255,.14);stroke-width:1} .mini .cell-r{stroke:rgba(232,73,60,.6);fill:rgba(232,73,60,.07)} .mini .cell-b{stroke:rgba(143,163,232,.55);fill:rgba(143,163,232,.06)} .mini .cell-g{stroke:rgba(101,210,164,.5);fill:rgba(101,210,164,.05)} .mini .wire{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1} .mini .wire-r{stroke:rgba(232,73,60,.5);stroke-dasharray:3 4} .mini .sig{fill:none;stroke-width:1.3;stroke-linecap:round;stroke-dasharray:4 70} .mini .sig-b{stroke:var(--pi-blue)} .mini .sig-g{stroke:var(--ok)} .js .mini .sig{animation:sigflow 2.8s linear infinite} .js .mini .sig.s2{animation-delay:-1.4s} /* ---------- 04 FOUR QUESTIONS / CONTRACT ---------- */ .contract-sec{padding:110px 0} .contract-sec .sec-head2{max-width:760px;margin:0 auto 56px;text-align:center} .contract-sec h2{font-size:clamp(30px,3.2vw,46px);line-height:1.12;margin-top:22px} .contract-sec .sec-head2 p{color:var(--dtx2);font-size:17px;line-height:1.65;margin:18px 0 0} .contract{max-width:920px;margin:0 auto;background:var(--g0);border:1px solid rgba(18,18,26,.9);border-radius:4px;color:var(--wtx);box-shadow:0 32px 80px -40px rgba(18,18,26,.5)} .contract .c-head{display:flex;justify-content:space-between;align-items:center;padding:18px 28px;border-bottom:1px solid var(--wln)} .contract .c-head .c-id{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--wtx2)} .contract .c-head .c-id b{color:var(--wtx);font-weight:500} .contract .c-head .c-state{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--ok);display:flex;align-items:center;gap:8px} .contract .c-head .c-state i{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block} .js .contract .c-state i{animation:npulse 2.4s ease-in-out infinite} .contract .quads{display:grid;grid-template-columns:1fr 1fr} .contract .quad{padding:30px 28px;border-bottom:1px solid var(--wln)} .contract .quad:nth-child(odd){border-right:1px solid var(--wln)} .contract .quad .q-n{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--pi-red);font-weight:500} .contract .quad h4{font-family:var(--sans);font-weight:600;font-size:17px;letter-spacing:.01em;margin:10px 0 8px;color:var(--wtx)} .contract .quad p{font-size:14px;line-height:1.6;color:var(--wtx2);margin:0} .contract .cmeta{display:flex;flex-wrap:wrap;padding:14px 28px;gap:26px;font-family:var(--mono);font-size:11px;letter-spacing:.08em} .contract .cmeta span{color:var(--wtx3)} .contract .cmeta b{color:var(--wtx);font-weight:500;margin-left:8px} .contract .cmeta b.ok{color:var(--ok)} .contract-sec .c-note{max-width:920px;margin:22px auto 0;text-align:center;font-size:14px;color:var(--dtx3)} /* ---------- 05 EVIDENCE ---------- */ .evid{padding:110px 0;border-top:1px solid var(--wln);border-bottom:1px solid var(--wln)} .evid .egrid{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);gap:72px;align-items:center} .evid h2{font-size:clamp(32px,3.4vw,50px);line-height:1.1;color:var(--wtx);margin-top:22px} .evid h2 .ev2{display:block;color:var(--pi-red)} .evid .kick{color:var(--wtx3)} .evid .elead{color:var(--wtx2);font-size:16px;line-height:1.7;margin:22px 0 0;max-width:44ch} .epanel{border:1px solid var(--wln2);border-radius:4px;background:var(--g1)} .epanel .ep-head{display:flex;justify-content:space-between;padding:14px 22px;border-bottom:1px solid var(--wln);font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--wtx3)} .erow{display:grid;grid-template-columns:190px 1fr;gap:18px;padding:11px 22px;border-bottom:1px solid var(--wln);font-family:var(--mono);font-size:12px} .erow .es{color:var(--pi-blue);letter-spacing:.04em} .erow .ed{color:var(--wtx2)} .estats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--wln2)} .estat{padding:18px 20px;border-right:1px solid var(--wln)} .estat:last-child{border-right:0} .estat .ev{font-family:var(--mono);font-size:20px;color:var(--wtx);font-weight:500} .estat .ev.evg{color:var(--ok)} .estat .ek{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--wtx3);margin-top:6px} .evid .edisc{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--wtx3);padding:12px 22px} /* ---------- 06 GOVERNED AUTONOMY ---------- */ .auton-sec{padding:110px 0} .auton-sec .sec-head2{max-width:720px;margin-bottom:58px} .auton-sec h2{font-size:clamp(30px,3.2vw,46px);line-height:1.12;margin-top:22px} .auton-sec .sec-head2 p{color:var(--dtx2);font-size:17px;line-height:1.65;margin:18px 0 0} .auton{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--dln2);border-radius:4px;overflow:hidden;background:#fff} .astage{padding:26px 24px 28px;border-right:1px solid var(--dln)} .astage:last-child{border-right:0} .astage .as-n{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--dtx3)} .astage h4{font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.14em;margin:8px 0 16px;color:var(--dtx)} .astage.live h4{color:var(--pi-red)} .astage .abar{height:3px;background:rgba(18,18,26,.08);border-radius:2px;overflow:hidden;margin-bottom:20px} .astage .abar i{display:block;height:100%;background:var(--pi-red);border-radius:2px} .astage dl{margin:0;font-size:12.5px} .astage dl div{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--dln)} .astage dt{color:var(--dtx3);font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding-top:2px} .astage dd{margin:0;color:var(--dtx);font-weight:500;text-align:right} .auton-sec .a-note{margin-top:22px;font-size:14px;color:var(--dtx3)} /* ---------- 07 BOUNDARIES ---------- */ .bound{padding:110px 0} .bound .bgrid{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:72px;align-items:start} .bound h2{font-size:clamp(30px,3.2vw,46px);line-height:1.12;color:var(--wtx);margin-top:22px} .bound .kick{color:var(--wtx3)} .bound .blead{color:var(--wtx2);font-size:16px;line-height:1.7;margin:22px 0 0;max-width:44ch} .bound .bprin{margin:34px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0} .bound .bprin li{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--wtx2);padding:11px 0;border-top:1px solid var(--wln);display:flex;gap:10px;align-items:center} .bound .bprin li::before{content:"";width:5px;height:5px;background:var(--ok);border-radius:50%;flex:0 0 auto} .bviz{border:1px solid var(--wln2);border-radius:4px;background:var(--g1);padding:26px} .bviz .cb{border:1px dashed rgba(255,255,255,.35);border-radius:4px;padding:20px} .bviz .cb-t{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--wtx2);margin-bottom:16px} .bviz .cb-chips{display:flex;flex-wrap:wrap;gap:8px} .bviz .cb-chips span{font-family:var(--mono);font-size:11px;letter-spacing:.05em;padding:9px 14px;border:1px solid var(--wln2);border-radius:2px;color:var(--wtx2);background:rgba(255,255,255,.03)} .bviz .b-link{display:flex;flex-direction:column;align-items:center;padding:14px 0} .bviz .b-link .bl-line{width:1px;height:26px;background:linear-gradient(180deg,var(--pi-blue),transparent);position:relative} .bviz .b-link .bl-lb{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--pi-blue);margin:8px 0} .bviz .agents{border:1px solid rgba(143,163,232,.4);background:rgba(143,163,232,.05);border-radius:4px;padding:18px 20px;text-align:center} .bviz .agents .ag-t{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--pi-blue)} .bviz .agents p{font-family:var(--sans);font-size:13px;color:var(--wtx2);margin:8px 0 0;line-height:1.55} /* ---------- 08 ACCOUNTABILITY ---------- */ .acct{padding:110px 0} .acct .sec-head2{max-width:760px;margin-bottom:54px} .acct h2{font-size:clamp(30px,3.2vw,46px);line-height:1.12;margin-top:22px} .acct .aquote{font-family:var(--disp);font-style:italic;font-size:20px;color:var(--dtx2);margin:20px 0 0} .hand{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--dln2);border-radius:4px;overflow:hidden;background:#fff} .hstep{padding:26px 22px 28px;border-right:1px solid var(--dln);position:relative} .hstep:last-child{border-right:0} .hstep .h-n{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--dtx3)} .hstep h4{font-family:var(--sans);font-weight:600;font-size:15px;line-height:1.35;margin:10px 0 8px;color:var(--dtx)} .hstep p{font-size:13px;line-height:1.55;color:var(--dtx2);margin:0} .hstep .h-arr{position:absolute;right:-7px;top:32px;width:13px;height:13px;color:var(--dtx3);z-index:2;background:#fff;border-radius:50%} .hstep.owner{background:var(--g0);color:var(--wtx)} .hstep.owner .h-n{color:var(--pi-red)} .hstep.owner h4{color:#fff} .hstep.owner p{color:var(--wtx2)} .hstep.owner .h-arr{background:var(--g0)} /* ---------- 09 PROOF ---------- */ .proof{padding:100px 0;border-top:1px solid var(--dln)} .proof h2{font-size:clamp(30px,3.2vw,44px);margin-top:22px} .proof3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:54px;border-top:1px solid var(--dln2)} .proof3 .pcol{padding:30px 34px 6px;border-right:1px solid var(--dln)} .proof3 .pcol:first-child{padding-left:0} .proof3 .pcol:last-child{border-right:0} .proof3 .pk{font-family:var(--mono);font-size:12px;letter-spacing:.24em;color:var(--pi-red);font-weight:500} .proof3 h4{font-family:var(--sans);font-weight:600;font-size:18px;margin:14px 0 10px;color:var(--dtx)} .proof3 p{font-size:14.5px;line-height:1.65;color:var(--dtx2);margin:0} .proof .pfoot{display:flex;flex-wrap:wrap;gap:12px 34px;margin-top:58px;padding-top:22px;border-top:1px solid var(--dln);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dtx3)} .proof .pfoot b{color:var(--dtx2);font-weight:500} /* Official AWS Select Tier Services Partner badge: drop the OFFICIAL asset at assets/badges/aws-select-partner.png — the below auto-appears; never redraw or approximate the AWS badge. */ .proof .pbadge{display:flex;align-items:center;gap:18px;margin-top:34px} .proof .pbadge img{height:74px;width:auto} .proof .pbadge .pb-t{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dtx2)} /* ---------- 10 FINAL CTA ---------- */ .finale{padding:130px 0 120px;text-align:center;background: radial-gradient(900px 420px at 50% 120%, rgba(232,73,60,.08), transparent 60%),var(--g0)} .finale h2{font-size:clamp(38px,4.6vw,62px);color:var(--wtx);line-height:1.06} .finale .fsub{max-width:56ch;margin:24px auto 0;font-size:17px;line-height:1.65;color:var(--wtx2)} .finale .fcta{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:40px} .finale .fline{margin-top:52px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--wtx3)} /* ---------- reveal (reuses IntersectionObserver in main.js via .reveal) ---------- */ /* ---------- responsive ---------- */ @media(max-width:960px){ .pi-hero .hgrid{grid-template-columns:1fr;gap:48px;padding:64px 0 60px} .pmod{grid-template-columns:1fr;gap:36px;padding:56px 0} .pmod .pviz{order:2} .evid .egrid,.bound .bgrid{grid-template-columns:1fr;gap:44px} .auton{grid-template-columns:1fr 1fr} .astage:nth-child(2){border-right:0} .astage:nth-child(1),.astage:nth-child(2){border-bottom:1px solid var(--dln)} .hand{grid-template-columns:1fr 1fr} .hstep{border-bottom:1px solid var(--dln)} .hstep .h-arr{display:none} .hstep:nth-child(2n){border-right:0} .proof3{grid-template-columns:1fr} .proof3 .pcol{border-right:0;border-bottom:1px solid var(--dln);padding:26px 0 22px} .estats{grid-template-columns:1fr 1fr} .estat:nth-child(2){border-right:0} .estat:nth-child(1),.estat:nth-child(2){border-bottom:1px solid var(--wln)} } @media(max-width:560px){ .pi .wrapx{padding:0 20px} .plats,.contract-sec,.evid,.auton-sec,.bound,.acct{padding:72px 0} .contract .quads{grid-template-columns:1fr} .contract .quad:nth-child(odd){border-right:0} .contract .cmeta{gap:12px 22px} .auton{grid-template-columns:1fr} .astage{border-right:0;border-bottom:1px solid var(--dln)} .astage:last-child{border-bottom:0} .hand{grid-template-columns:1fr} .hstep{border-right:0} .erow{grid-template-columns:1fr;gap:4px} .trail .tr-marks{border:0;gap:8px} .trail .tr-marks span{border:1px solid var(--wln);flex:0 0 auto;padding:10px 14px;font-size:12.5px} .bound .bprin{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){ .js .fabric .sig,.js .mini .sig{animation:none;stroke-dasharray:none;opacity:.5} .js .fabric .np,.js .pmod .pviz .pv-dot,.js .contract .c-state i{animation:none;opacity:1} .pi .btnx:hover{transform:none} }