
/* ===== security page, v3: colour, air, own type scale ===== */
.secx{--tint:#E9EFF7;--tint2:#F3F6FB;--edge:rgba(45,74,116,.13)}
.secx .wrap.wide{max-width:1520px!important;width:auto!important;padding-left:var(--gut)!important;padding-right:var(--gut)!important}
.secx .sx-sec{padding:clamp(66px,7.5vw,118px) 0;position:relative}
.secx .sx-sec.tint{background:var(--tint)}
.secx .sx-head{max-width:none;margin:0 0 clamp(26px,3vw,42px);padding:0}
.secx .sx-h+.sx-sub{margin-top:8px}
.pghero h1{margin-bottom:14px!important}
.secx .sx-h{font-family:var(--f-display);font-weight:400;font-size:clamp(29px,3.2vw,44px);line-height:1.08;letter-spacing:-.015em;color:var(--ink);margin:0;max-width:26ch;text-wrap:pretty}
.secx .sx-sub{margin:8px 0 0;font-family:var(--f-ui);font-size:clamp(15.5px,1.15vw,17px);line-height:1.55;color:var(--stone-6);max-width:52ch;font-weight:400}
.secx .kicker{color:#4E6B95;margin-bottom:12px}
.secx .sx-card{background:#fff;border:1px solid var(--edge);border-radius:24px;padding:clamp(20px,2.2vw,32px);position:relative}
.secx .sx-card.dk{background:var(--ld-olive);border-color:transparent}

/* A. standards */
.st-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:stretch;grid-auto-rows:1fr}
.st-card{background:#fff;border:1px solid var(--edge);border-radius:22px;padding:clamp(20px,2vw,28px);cursor:pointer;outline:none;transition:box-shadow .3s,border-color .3s,transform .3s;display:flex;flex-direction:column;height:100%;min-height:clamp(296px,24vw,326px);position:relative;overflow:hidden}
.st-card:hover{border-color:rgba(45,74,116,.3);box-shadow:0 16px 40px rgba(30,50,80,.07)}
.st-card:focus-visible{border-color:var(--sky-deep)}
.st-card.open{background:linear-gradient(180deg,#fff 0%,#F7FAFD 100%);box-shadow:0 22px 54px rgba(30,50,80,.1)}
.st-ico{display:flex;align-items:flex-start;min-height:82px;margin:0 0 18px}
.secx .st-ico .sbadge{transform:scale(.8);transform-origin:left top;margin:0!important}
.st-card{justify-content:flex-start}
.st-t{margin-top:auto}
.st-t{font-family:var(--f-display);font-weight:450;font-size:19.5px;letter-spacing:-.01em;color:var(--ink);margin:0}
.st-p{margin:8px 0 0;font-family:var(--f-ui);font-size:14.5px;line-height:1.55;color:var(--stone-6)}
.st-more{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,#F1F6FC 0%,#E7EFF9 100%);border-top:1px solid rgba(45,74,116,.18);padding:15px clamp(20px,2vw,28px) 18px;transform:translateY(101%);transition:transform .5s cubic-bezier(.3,.8,.2,1)}
.st-card.open .st-more{transform:none}
.st-p{transition:opacity .35s}
.st-card.open .st-p{opacity:0}
.st-more-in{opacity:1}
.st-more-in b{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#4E6B95;font-weight:600}
.st-more-in span{display:block;margin-top:6px;font-family:var(--f-ui);font-size:13px;line-height:1.5;color:#4C5763}
.st-plus{position:absolute;top:22px;right:22px;width:22px;height:22px;border-radius:50%;border:1px solid var(--edge);display:grid;place-items:center;transition:background .3s,border-color .3s,transform .4s}
.st-plus i{position:absolute;background:#4E6B95;transition:opacity .3s,background .3s}
.st-plus i:first-child{width:9px;height:1.4px}
.st-plus i:last-child{width:1.4px;height:9px}
.st-card.open .st-plus{background:var(--ink);border-color:var(--ink);transform:rotate(90deg)}
.st-card.open .st-plus i{background:#fff}
.st-card.open .st-plus i:last-child{opacity:0}


/* standards: editorial, like the homepage security element */
#standards .st-grid{gap:clamp(20px,2.2vw,32px);grid-auto-rows:auto;align-items:start}
#standards .st-card{background:none!important;border:0!important;border-top:1px solid rgba(27,27,27,.14)!important;border-radius:0!important;box-shadow:none!important;padding:clamp(26px,2.4vw,36px) 0 0!important;min-height:0!important;overflow:visible;height:auto}
#standards .st-card:hover{border-top-color:rgba(27,27,27,.34)!important}
#standards .st-card.open{background:none!important}
#standards .st-ico{min-height:0;margin:0 0 22px}
#standards .st-ico .sbadge{transform:none;background:none!important;border:0!important;padding:0!important;width:auto;height:auto;display:inline-flex}
#standards .st-ico .certb{width:clamp(46px,3.8vw,58px)!important;height:clamp(46px,3.8vw,58px)!important;display:block}
#standards .st-t{margin-top:0;font-size:clamp(20px,1.5vw,24px)}
#standards .st-p{font-size:15px;line-height:1.6;max-width:32ch}
#standards .st-card.open .st-p{opacity:1}
#standards .st-more{position:static;transform:none;background:none;border:0;padding:0;max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.3,.8,.2,1),margin .5s}
#standards .st-card.open .st-more{max-height:220px;margin-top:16px}
#standards .st-more-in{border-top:1px dashed rgba(27,27,27,.16);padding-top:14px}
#standards .st-plus{top:clamp(26px,2.4vw,36px);right:0;transform:translateY(-50%);border-color:rgba(27,27,27,.22)}
#standards .st-card.open .st-plus{transform:translateY(-50%) rotate(90deg)}

/* B. deployment */
.dp{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.7fr);gap:clamp(16px,1.8vw,26px);align-items:stretch}
.dp-list{background:#fff;border:1px solid var(--edge);border-radius:24px;padding:8px;display:flex;flex-direction:column;gap:2px;box-shadow:0 18px 44px rgba(30,50,80,.06)}
.dpo{display:flex;align-items:center;gap:13px;padding:15px 14px;border-radius:17px;cursor:pointer;outline:none;transition:background .28s}
.dpo:hover{background:#F4F7FB}
.dpo.on{background:#E9EFF7}
.dpo:focus-visible{box-shadow:inset 0 0 0 2px var(--sky-deep)}
.dpo-i{width:34px;height:34px;flex:0 0 auto;border-radius:10px;background:#F1F4F9;color:#3D5F8E;display:grid;place-items:center;transition:background .28s,color .28s}
.dpo-i svg{width:18px;height:18px}
.dpo.on .dpo-i{background:var(--sky-deep);color:#fff}
.dpo-t{min-width:0}
.dpo-t b{display:block;font-family:var(--f-ui);font-size:15px;font-weight:560;color:var(--ink);line-height:1.25}
.dpo-t span{display:block;font-family:var(--f-ui);font-size:12.5px;color:var(--stone-4);margin-top:2px}
.dpo-c{margin-left:auto;width:20px;height:20px;flex:0 0 auto;border-radius:50%;background:var(--sky-deep);color:#fff;display:grid;place-items:center;opacity:0;transform:scale(.6);transition:opacity .28s,transform .28s}
.dpo-c svg{width:11px;height:11px}
.dpo.on .dpo-c{opacity:1;transform:none}
.dp-stagex{background:#fff;border:1px solid var(--edge);border-radius:24px;padding:clamp(22px,2.4vw,34px);display:flex;flex-direction:column;gap:clamp(20px,2.4vw,32px);box-shadow:0 18px 44px rgba(30,50,80,.06)}
.dp-slider{position:relative;padding:6px 0 30px}
.dp-track{position:absolute;left:0;right:0;top:16px;height:4px;border-radius:999px;background:#E7EBF1}
.dp-fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--sky-deep);transition:width .5s cubic-bezier(.3,.8,.2,1)}
.dp-stops{position:absolute;left:0;right:0;top:16px;height:4px;display:flex;justify-content:space-between;pointer-events:none}
.dp-stops i{width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #E7EBF1;transform:translateY(0)}
.dp-slider input{position:relative;z-index:2;-webkit-appearance:none;appearance:none;width:100%;height:36px;background:transparent;margin:0;cursor:grab}
.dp-slider input:active{cursor:grabbing}
.dp-slider input::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--sky-deep);box-shadow:0 6px 18px rgba(45,74,116,.28);cursor:grab}
.dp-slider input::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--sky-deep);box-shadow:0 6px 18px rgba(45,74,116,.28);cursor:grab}
.dp-slider input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(77,134,194,.3)}
.dp-ends{position:absolute;left:0;right:0;bottom:4px;display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone-4)}
.dp-ends em{font-style:normal}
.dp-zones{position:relative;display:grid;grid-template-columns:1fr 40px 1fr 40px 1fr;align-items:stretch;padding:30px 0 8px;flex:1;min-height:180px}
.dp-zone{position:relative;z-index:2;background:#FBFCFD;border:1px solid #E2E7EE;border-radius:16px;padding:16px 15px;display:flex;flex-direction:column;gap:8px;transition:border-color .5s,background .5s,box-shadow .5s}
.dp-zone .zl{font-family:var(--f-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--stone-4)}
.dp-zone .zt{font-family:var(--f-ui);font-size:14.5px;font-weight:520;color:var(--ink);line-height:1.35}
.dp-flow{position:relative;z-index:2;display:flex;align-items:center;justify-content:center}
.dp-flow::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.5px dashed rgba(45,74,116,.25)}
.dp-flow i{position:absolute;top:50%;left:0;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--sky-deep);animation:dpflow 2.6s linear infinite}
.dp-flow i:nth-child(2){animation-delay:.85s}.dp-flow i:nth-child(3){animation-delay:1.7s}
@keyframes dpflow{0%{transform:translateX(0);opacity:0}18%{opacity:1}82%{opacity:1}100%{transform:translateX(38px);opacity:0}}
.dp-perim{position:absolute;z-index:1;top:8px;bottom:0;left:-10px;border:2px dashed var(--sky-deep);border-radius:22px;background:rgba(77,134,194,.07);pointer-events:none;transition:width .6s cubic-bezier(.3,.8,.2,1)}
.dp-perim span{position:absolute;top:-10px;left:16px;background:#fff;padding:0 9px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#2F5D94;white-space:nowrap}
.dp-zones[data-n="1"] .dp-perim{width:calc(33.33% - 26.6px + 20px)}
.dp-zones[data-n="2"] .dp-perim{width:calc(66.66% - 13.3px + 20px)}
.dp-zones[data-n="3"] .dp-perim{width:calc(100% + 20px)}
.dp-zones[data-n="1"] .dp-zone:nth-child(1),.dp-zones[data-n="2"] .dp-zone:nth-child(-n+3),.dp-zones[data-n="3"] .dp-zone{border-color:rgba(77,134,194,.45);background:#fff;box-shadow:0 8px 22px rgba(45,74,116,.07)}
.dp-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;border-top:1px solid var(--edge);padding-top:18px}
.dp-facts b{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--stone-4);font-weight:600;margin-bottom:6px}
.dp-facts span{font-family:var(--f-ui);font-size:14.5px;color:var(--ink);line-height:1.35}

/* shared two-column */
.sx-two{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(30px,5vw,84px);align-items:center}
.sx-two.rev{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.sx-seg{display:inline-flex;gap:4px;background:#fff;border:1px solid var(--edge);border-radius:999px;padding:4px;margin-top:24px}
.sx-seg.center{display:flex;width:max-content;margin:0 auto clamp(20px,2.4vw,32px)}
.sx-seg button{appearance:none;border:0;background:transparent;border-radius:999px;padding:10px 18px;font-family:var(--f-ui);font-size:14px;color:var(--stone-6);cursor:pointer;display:inline-flex;align-items:center;gap:9px;transition:background .25s,color .25s}
.sx-seg button i{font-style:normal;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;color:var(--stone-4)}
.sx-seg button.on{background:var(--sky-deep);color:#fff}
.sx-seg button.on i{color:rgba(255,255,255,.7)}
.sx-princ{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column}
.sx-princ li{display:grid;grid-template-columns:minmax(140px,.72fr) minmax(0,1.28fr);gap:16px;padding:15px 0;border-top:1px solid var(--edge)}
.sx-princ li:last-child{border-bottom:1px solid var(--edge)}
.sx-princ b{font-family:var(--f-ui);font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.sx-princ span{font-family:var(--f-ui);font-size:14.5px;line-height:1.55;color:var(--stone-6)}

/* widgets */
.secx .stk{background:transparent!important;border:0!important;padding:0!important;min-height:0!important;height:auto!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;display:flex!important;flex-direction:column;flex:1;min-width:0}
.secx .stk.dk{gap:18px}
.secx .st-ico .sbadge,.secx .st-ico .badge-soc,.secx .st-ico .badge-gdpr{background:#F4F7FB!important;border:1px solid var(--edge)!important;box-shadow:none!important;color:var(--ink)!important}
.secx .sx-permcard .dp-card{transform:none!important;width:100%!important;background:transparent!important;box-shadow:none!important;border:0!important;padding:0!important}
.secx .sx-permcard .dp-head{display:none!important}
.secx .sx-permcard .rl-grid{font-size:15.5px}
.secx .sx-permcard .rl-grid>*{transition:opacity .35s}
.secx .sx-permcard[data-role="1"] .rl-grid>:nth-child(4n+3),.secx .sx-permcard[data-role="1"] .rl-grid>:nth-child(4n+4),.secx .sx-permcard[data-role="2"] .rl-grid>:nth-child(4n+2),.secx .sx-permcard[data-role="2"] .rl-grid>:nth-child(4n+4),.secx .sx-permcard[data-role="3"] .rl-grid>:nth-child(4n+2),.secx .sx-permcard[data-role="3"] .rl-grid>:nth-child(4n+3){opacity:.26}
.sx-runwrap{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(270px,.75fr);gap:16px;align-items:stretch}
.sx-runcard{overflow:hidden;display:flex;flex-direction:column}
.secx .sx-runcard .runs{background:transparent!important;color:var(--ink)!important;padding:0!important;width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;display:flex!important;flex-direction:column}
.secx .sx-runcard .runs h3{font-family:var(--f-ui);font-size:18px;font-weight:600}
.secx .sx-runcard .runs .sub{color:var(--stone-6)!important}
.secx .sx-runcard .dg-lane,.secx .sx-runcard .dg-hud{color:var(--stone-4)!important}
.secx .sx-runcard .dg-scroll{width:100%!important;max-width:100%!important;overflow:hidden!important;height:auto!important;display:flex!important;justify-content:center!important;align-items:flex-start!important;margin-top:12px!important}
.secx .sx-runcard .diagram{margin:0!important;transform:none!important;flex:0 0 auto}
.secx .sx-runcard .dg-node .dg-run{display:none}
.secx .sx-runcard .dg-node.on .dg-run{display:inline-flex}
.sx-ledger{display:flex;flex-direction:column;gap:12px;font-family:var(--f-mono);background:#F7FAFD!important}
.sx-lh{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--stone-6);padding-bottom:12px;border-bottom:1px solid var(--edge)}
.sx-lh .live{width:8px;height:8px;border-radius:50%;background:var(--live);animation:sxp 1.8s ease-out infinite}
@keyframes sxp{0%{box-shadow:0 0 0 0 rgba(62,155,108,.5)}100%{box-shadow:0 0 0 9px rgba(62,155,108,0)}}
.sx-lh em{margin-left:auto;font-style:normal;color:var(--stone-4);text-transform:none;letter-spacing:.02em}
.sx-ledger ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;flex:1}
.sx-l{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:12.5px;line-height:1.45;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.sx-l.in{opacity:1;transform:none}
.sx-l time{color:var(--stone-4);font-variant-numeric:tabular-nums}
.sx-l span{color:var(--ink)}
.sx-l.perm span::before{content:"✓ ";color:var(--live)}
.sx-l.src span::before{content:"▤ ";color:var(--sky-deep)}
.sx-l.wait span{color:#8A5A18}
.sx-l.wait span::before{content:"◌ ";animation:sxb 1s steps(1) infinite}
@keyframes sxb{50%{opacity:.3}}
.sx-lf{margin:0;padding-top:12px;border-top:1px solid var(--edge);font-family:var(--f-ui);font-size:12.5px;line-height:1.5;color:var(--stone-4)}
.sx-loopcard{height:clamp(400px,38vw,520px);overflow:hidden;display:flex;flex-direction:column}
.secx .sx-loopcard .lp-body{width:min(100%,660px)!important;margin:0 auto!important;flex:1}
.secx .sx-loopcard .lp-screen,.secx .sx-loopcard .lp-sug,.secx .sx-loopcard .lp-done{transition:opacity .5s,filter .5s,transform .5s}
.secx .sx-loopcard.step-1 .lp-sug,.secx .sx-loopcard.step-1 .lp-done,.secx .sx-loopcard.step-2 .lp-screen,.secx .sx-loopcard.step-2 .lp-done,.secx .sx-loopcard.step-3 .lp-screen,.secx .sx-loopcard.step-3 .lp-sug{opacity:.3;filter:saturate(.5)}
.secx .sx-loopcard.step-2 .lp-sug,.secx .sx-loopcard.step-3 .lp-done{transform:scale(1.03)}
.sx-ckcard{background:#F7FAFD!important;min-height:440px;display:flex;flex-direction:column;overflow:hidden}

.sx-vmcard{display:flex;flex-direction:column;gap:18px;justify-content:center;min-height:420px;overflow:hidden}
.secx .sx-vmcard .vm-inner{margin-top:0!important}

@media(max-width:1080px){
  .st-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dp,.sx-two,.sx-two.rev,.sx-runwrap{grid-template-columns:minmax(0,1fr)}
  .sx-two.rev .sx-ckcard{order:2}
  .dp-facts{grid-template-columns:repeat(2,1fr)}
  .dp-zones{grid-template-columns:1fr;gap:10px;padding:30px 0 6px}
  .dp-flow{height:30px}
  .dp-flow::before{left:50%;right:auto;top:0;bottom:0;border-top:0;border-left:1.5px dashed rgba(45,74,116,.25)}
  .dp-flow i{left:50%;top:0;margin-left:-3px;animation-name:dpflowv}
  @keyframes dpflowv{0%{transform:translateY(0);opacity:0}18%{opacity:1}82%{opacity:1}100%{transform:translateY(26px);opacity:0}}
  .dp-perim{left:-8px;right:-8px;width:auto!important;top:12px;bottom:auto;transition:height .6s cubic-bezier(.3,.8,.2,1)}
  .dp-zones[data-n="1"] .dp-perim{height:calc(33.33% - 4px)}
  .dp-zones[data-n="2"] .dp-perim{height:calc(66.66% + 6px)}
  .dp-zones[data-n="3"] .dp-perim{height:calc(100% - 8px)}
}
@media(max-width:700px){
  .st-grid{grid-template-columns:minmax(0,1fr)}
  .st-card{min-height:0}
  .st-ico{height:64px}
  .sx-princ li{grid-template-columns:1fr;gap:6px}
  .sx-seg.center{width:100%;overflow-x:auto}
  .dp-facts{grid-template-columns:1fr 1fr}
}

/* ---- where it lives: colour pass ---- */
#deployment{background:linear-gradient(180deg,#F5F9FD 0%,#E7EFF9 100%)}
.dp-list{background:linear-gradient(180deg,#fff 0%,#F8FBFE 100%);border-color:rgba(45,74,116,.16)}
.dpo.on{background:linear-gradient(90deg,#E2ECF8 0%,#F0F6FC 100%);box-shadow:inset 0 0 0 1px rgba(77,134,194,.22)}
.dpo:nth-child(1) .dpo-i{background:#E4EDF9;color:#2F5D94}
.dpo:nth-child(2) .dpo-i{background:#E7E9F7;color:#4A4F8F}
.dpo:nth-child(3) .dpo-i{background:#E3F1EE;color:#2C6C60}
.dpo:nth-child(4) .dpo-i{background:#F4EDE1;color:#8A5A18}
.dpo:nth-child(1).on .dpo-i{background:#2F5D94;color:#fff}
.dpo:nth-child(2).on .dpo-i{background:#4A4F8F;color:#fff}
.dpo:nth-child(3).on .dpo-i{background:#2C6C60;color:#fff}
.dpo:nth-child(4).on .dpo-i{background:#8A5A18;color:#fff}
.dpo:nth-child(1).on .dpo-c{background:#2F5D94}
.dpo:nth-child(2).on .dpo-c{background:#4A4F8F}
.dpo:nth-child(3).on .dpo-c{background:#2C6C60}
.dpo:nth-child(4).on .dpo-c{background:#8A5A18}
.dp-stagex{background:linear-gradient(158deg,#fff 0%,#F4F9FD 52%,#E9F1FB 100%);border-color:rgba(45,74,116,.16)}
.dp-fill{background:linear-gradient(90deg,#7FB0E0 0%,#2F5D94 100%)}
.dp-slider input::-webkit-slider-thumb{border-color:#2F5D94}
.dp-slider input::-moz-range-thumb{border-color:#2F5D94}
.dp-ends em{color:#5C7799}
.dp-zone{min-height:104px;justify-content:flex-start;gap:6px}
.dp-zone .zl{display:inline-flex;align-items:center;gap:7px}
.dp-zone .zl::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.dp-zones .dp-zone:nth-child(1){background:linear-gradient(160deg,#F5F7FA,#EDF1F6);border-color:rgba(60,80,105,.16)}
.dp-zones .dp-zone:nth-child(1) .zl{color:#5A6B80}
.dp-zones .dp-zone:nth-child(3){background:linear-gradient(160deg,#EBF3FC,#DFEAF8);border-color:rgba(47,93,148,.24)}
.dp-zones .dp-zone:nth-child(3) .zl{color:#2F5D94}
.dp-zones .dp-zone:nth-child(5){background:linear-gradient(160deg,#E9F4F1,#DCEDE8);border-color:rgba(44,108,96,.24)}
.dp-zones .dp-zone:nth-child(5) .zl{color:#2C6C60}
.dp-zones[data-n="1"] .dp-zone:nth-child(1),.dp-zones[data-n="2"] .dp-zone:nth-child(-n+3),.dp-zones[data-n="3"] .dp-zone{background-image:linear-gradient(160deg,rgba(255,255,255,.75),rgba(255,255,255,.4));box-shadow:0 10px 26px rgba(45,74,116,.1)}
.dp-perim{background:rgba(77,134,194,.11);border-color:#4D86C2}
.dp-perim span{background:#F8FBFE;color:#2F5D94}
.dp-flow:nth-of-type(2) i{background:#2F5D94}
.dp-flow i{background:#3F7FB8;box-shadow:0 0 0 3px rgba(63,127,184,.14)}
.dp-facts{border-top-color:rgba(45,74,116,.16)}
.dp-facts b{color:#5C7799}
.dp-facts span{color:#22303F}



.dpo-lg{display:inline-flex;align-items:center;gap:6px;margin-left:auto;flex:0 0 auto;opacity:.5;filter:saturate(.25);transition:opacity .3s,filter .3s}
.dpo.on .dpo-lg{opacity:1;filter:none}
.dpo-lg img{width:19px;height:19px;object-fit:contain;display:block}
.dpo-lg img[alt^="Amazon"]{width:25px}
.dpo-lg.on-prem em{font-style:normal;font-family:var(--f-ui);font-size:10.5px;font-weight:560;color:var(--ink);border:1.4px solid var(--ink);border-radius:999px;padding:3px 9px;white-space:nowrap}
.dpo-c{margin-left:10px}
@media(max-width:1200px){.dpo-lg img{width:17px;height:17px}}

/* ---- untrusted by default: source map ---- */
.ub{display:flex;flex-direction:column;flex:1;min-width:0}
.ub-groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.ub-g{position:relative;background:#fff;border:1px solid rgba(45,74,116,.16);border-radius:16px;padding:22px 10px 16px;cursor:pointer;outline:none;transition:opacity .4s,filter .4s,box-shadow .3s,border-color .3s}
.ub-g:hover{border-color:rgba(45,74,116,.34);box-shadow:0 10px 26px rgba(45,74,116,.09)}
.ub-g.off{opacity:.4;filter:grayscale(1)}
.ub-lb{position:absolute;top:-10px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#fff;border:1px solid rgba(45,74,116,.16);border-radius:999px;padding:3px 9px;font-family:var(--f-ui);font-size:10px;font-weight:520;color:#3B4A5C;z-index:3}
.ub-row{display:flex;align-items:center;justify-content:center;gap:7px}
.ub-i{width:26px;height:26px;display:grid;place-items:center;flex:0 0 auto}
.ub-i svg{width:100%;height:100%}
.ub-avs{display:inline-flex;align-items:center}
.ub-av{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;margin-left:-6px;border:2px solid #fff}
.ub-av:first-child{margin-left:0}
.ub-av svg{width:14px;height:14px}
.ub-node{position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);width:18px;height:18px;border-radius:50%;background:var(--ink);color:#F7F5F2;display:grid;place-items:center;border:2px solid #fff}
.ub-g.off .ub-node{background:var(--stone-4)}
.ub-wires{display:block;width:100%;height:52px;color:rgba(45,74,116,.36);margin-top:2px}
.ub-agent{display:flex;flex-direction:column;align-items:center;gap:5px;margin:-6px 0 0}
.ub-anode{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#F7F5F2;display:grid;place-items:center;box-shadow:0 0 0 5px rgba(77,134,194,.16)}
.ub-agent em{font-style:normal;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone-4)}
.ub-comp{margin-top:14px;background:#fff;border:1px solid rgba(45,74,116,.16);border-radius:18px;padding:15px 16px 13px;box-shadow:0 14px 34px rgba(45,74,116,.08)}
.ub-ph{display:block;font-family:var(--f-ui);font-size:14px;color:var(--stone-4)}
.ub-chips{display:flex;align-items:center;gap:8px;margin-top:14px}
.ub-plus{width:26px;height:26px;border-radius:50%;border:1px solid rgba(45,74,116,.2);display:grid;place-items:center;color:var(--stone-6);font-size:14px;flex:0 0 auto}
.ub-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(45,74,116,.18);border-radius:999px;padding:6px 11px;font-family:var(--f-ui);font-size:12px;color:var(--stone-6);white-space:nowrap}
.ub-chip.on{background:#E6EEF9;border-color:transparent;color:#2F5D94;font-weight:520}
.ub-mic{margin-left:auto;width:17px;color:var(--stone-6);flex:0 0 auto}
.ub-mic svg{width:100%;height:100%}
.ub-send{width:28px;height:28px;border-radius:50%;background:var(--sky-deep);color:#fff;display:grid;place-items:center;font-size:13px;flex:0 0 auto}
.ub-fan{display:block;width:100%;height:40px;color:rgba(45,74,116,.3)}
.ub-models{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:2px}
.ub-models{margin-top:4px;padding:0 4px}
.ub-m{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 auto;transition:transform .25s,filter .25s}
.ub-m img{width:100%;height:100%;object-fit:contain;display:block}
.ub-m:hover{transform:translateY(-2px)}
@media(max-width:900px){.ub-m{width:30px;height:30px}}
.secx .sx-ckcard .ub{margin-top:0}
.sx-ckcard{background:linear-gradient(170deg,#F7FAFD 0%,#EDF3FA 100%)!important;min-height:0!important;height:auto!important}
@media(max-width:900px){
  .ub-groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 9px}
  .ub-wires{display:none}
  .ub-agent{margin-top:20px}
  .ub-models{flex-wrap:wrap;justify-content:center}
  .ub-fan{height:26px}
}


.hl2{display:grid;grid-template-columns:minmax(240px,.78fr) minmax(0,1.22fr);gap:clamp(20px,2.4vw,38px);padding:clamp(20px,2.2vw,30px)!important;align-items:stretch;overflow:hidden}
.hl2-rail{display:flex;flex-direction:column}
.hl2-s{appearance:none;text-align:left;background:transparent;border:0;border-top:1px solid var(--edge);padding:15px 2px 15px 0;display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:12px;cursor:pointer;position:relative;font:inherit;color:var(--stone-6)}
.hl2-s:first-of-type{border-top:0}
.hl2-n{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;color:var(--stone-4);padding-top:4px}
.hl2-t{font-family:var(--f-ui);font-size:16.5px;font-weight:560;letter-spacing:-.01em;color:var(--stone-6);transition:color .3s}
.hl2-s.on .hl2-t{color:var(--ink)}
.hl2-s.on .hl2-n{color:#2F5D94}
.hl2-d{grid-column:2;font-family:var(--f-ui);font-size:13.5px;line-height:1.55;color:var(--stone-6);max-height:0;opacity:0;overflow:hidden;transition:max-height .45s cubic-bezier(.3,.8,.2,1),opacity .3s,margin-top .3s}
.hl2-s.on .hl2-d{max-height:130px;opacity:1;margin-top:7px}
.hl2-bar{position:absolute;left:0;right:0;top:-1px;height:2px;background:transparent}
.hl2-s.on .hl2-bar{background:rgba(45,74,116,.14)}
.hl2-bar i{display:block;height:100%;width:0;background:#2F5D94}
.hl2-foot{margin:auto 0 0;padding-top:16px;border-top:1px solid var(--edge);font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone-4)}
.hl2-stage{position:relative;min-height:clamp(280px,25vw,330px);background:linear-gradient(165deg,#F7FAFD,#EEF3FA);border:1px solid var(--edge);border-radius:18px;padding:clamp(16px,1.8vw,24px);display:flex}
.hl2-p{position:absolute;inset:clamp(16px,1.8vw,24px);display:flex;flex-direction:column;justify-content:center;gap:12px;opacity:0;transform:translateY(8px) scale(.985);pointer-events:none;transition:opacity .45s,transform .55s cubic-bezier(.3,.8,.2,1)}
.hl2.step-1 .hl2-p[data-p="1"],.hl2.step-2 .hl2-p[data-p="2"],.hl2.step-3 .hl2-p[data-p="3"]{opacity:1;transform:none;pointer-events:auto}
.hl2-note{margin:0;font-family:var(--f-ui);font-size:12.5px;line-height:1.5;color:var(--stone-4);text-align:center}
/* step 1: pattern log */
.hl2-log{background:#fff;border:1px solid var(--edge);border-radius:14px;padding:12px 14px 8px;box-shadow:0 14px 34px rgba(45,74,116,.07);overflow:hidden}
.hl2-lh{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone-4);padding-bottom:9px;border-bottom:1px solid var(--edge)}
.hl2-lh .live{width:7px;height:7px;border-radius:50%;background:var(--live);animation:sxp 1.8s ease-out infinite}
.hl2-lh em{margin-left:auto;font-style:normal;color:#2F5D94;letter-spacing:.1em}
.hl2-r{display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid rgba(45,74,116,.07);font-family:var(--f-ui);font-size:13px}
.hl2-r:last-child{border-bottom:0}
.hl2-r .dt{font-family:var(--f-mono);font-size:10.5px;color:var(--stone-4)}
.hl2-r .tx{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hl2-r .rp{font-family:var(--f-mono);font-size:10px;color:#2F5D94;background:#E8EFF8;border-radius:999px;padding:3px 7px}
.hl2-r.ghost{opacity:0;animation:hl2in 4.2s ease-in-out infinite}
@keyframes hl2in{0%,12%{opacity:0;transform:translateY(6px)}30%,72%{opacity:.55;transform:none}92%,100%{opacity:0;transform:translateY(-4px)}}
/* step 2: proposal */
.secx .hl2-p .lp-sug{position:static!important;width:100%!important;max-width:440px;margin:0 auto!important;transform:none!important;background:#fff!important;border:1px solid var(--edge)!important;border-radius:16px!important;padding:14px 16px 16px!important;box-shadow:0 20px 46px rgba(45,74,116,.12)!important;opacity:1!important;filter:none!important}
.secx .hl2-p .lp-sug .lp-yes{cursor:pointer}
/* step 3: result */
.hl2-done{display:flex;flex-direction:column;gap:12px;max-width:460px;margin:0 auto;width:100%}
.secx .hl2-done .lp-done{position:static!important;transform:none!important;opacity:1!important;filter:none!important;width:100%!important;background:#fff!important;border:1px solid var(--edge)!important;border-radius:14px!important;padding:14px!important;box-shadow:0 18px 42px rgba(45,74,116,.1)!important;display:flex!important;align-items:center;gap:12px}
.hl2.step-3 .lp-done-ic{animation:hl2pop .6s cubic-bezier(.2,1.5,.3,1) both}
@keyframes hl2pop{0%{transform:scale(.4);opacity:0}100%{transform:none;opacity:1}}
.hl2-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hl2-meta span{display:block;background:#fff;border:1px solid var(--edge);border-radius:12px;padding:11px 12px;font-family:var(--f-ui);font-size:12px;line-height:1.45;color:var(--stone-6)}
.hl2-meta b{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:2px}
@media(max-width:1080px){
  .hl2{grid-template-columns:minmax(0,1fr)}
  .hl2-stage{min-height:340px}
  .hl2-foot{display:none}
}
@media(max-width:700px){
  .hl2-r{grid-template-columns:56px minmax(0,1fr);row-gap:2px}
  .hl2-r .rp{grid-column:2;justify-self:start}
  .hl2-meta{grid-template-columns:1fr}
}
