/* Microsoft 365 page identity: NIGHT HUB. Dark navy hero, a light workspace section with one sticky dark hub that builds as you scroll,
   navy demo panels with cyan light. Colors come from the hero picture: navy #07142e, glow cyan #19a4ff, royal #0877ff, white glass.
   No amber, no green, no arrows on buttons. */
.m3-lead,.m3-run,.m3-how,.m3-cta{--ink:#07142e;--royal:#0877ff;--cyan:#19a4ff;--glow:#7fd0ff;--line:rgba(7,20,46,.14)}

/* hero */
.is-m3 .rb-stage-inner::after{display:none}
.m3-title{position:absolute;left:4vw;top:27%;z-index:3;width:34vw}
.m3-title h1{margin:0;text-transform:uppercase;color:#fff}
.m3-t1,.m3-t2{display:block;font:700 3.9vw/1 var(--rb-display);letter-spacing:-.04em;white-space:nowrap}
.m3-t1{color:#fff}
.m3-t2{color:var(--glow)}
.m3-t2 .w,.m3-t1 .w{display:inline-block}
.m3-title .hot{color:var(--cyan);text-shadow:0 0 28px rgba(25,164,255,.55)}
.m3-title .w{opacity:0;transform:translateY(36px);filter:blur(8px);animation:rb-wordin .85s var(--rb-ease) forwards;animation-delay:calc(var(--i) * .09s + .2s)}
.m3-sub{margin:1.4vw 0 1.6vw;font:500 1.25vw/1.35 var(--rb-display);color:#cfe6ff}
.m3-cue.rb-btn{background:linear-gradient(135deg,#0877ff,#19a4ff);color:#fff}

/* lead */
.m3-lead{background:#fff;color:var(--ink);padding:clamp(64px,9vw,130px) 0}
.m3-lead-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,80px);align-items:end}
.m3-lead-h{margin:0;font:700 clamp(2.6rem,6.4vw,6.4rem)/.98 var(--rb-display);letter-spacing:-.05em}
.m3-lead-p{margin:0;font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.55;color:#33466b}

/* run: light editorial page; each image sits in a framed window; one royal cable ties the three packages together */
.m3-run{position:relative;background:linear-gradient(180deg,#f3f8ff 0%,#e2eefb 100%);color:var(--ink);padding:clamp(24px,4vw,60px) 0}
.m3-cable{position:absolute;left:clamp(14px,3.2vw,56px);top:0;bottom:0;width:2px;background:linear-gradient(180deg,transparent,rgba(8,119,255,.45) 6%,rgba(8,119,255,.45) 94%,transparent)}
.m3-stage{position:relative;padding:clamp(48px,7vw,104px) 0}
.m3-stage+.m3-stage{border-top:1px solid var(--line)}
.m3-pin{position:absolute;left:clamp(14px,3.2vw,56px);top:clamp(70px,9vw,128px);width:16px;height:16px;margin-left:-7px;border-radius:50%;background:#fff;border:2px solid rgba(8,119,255,.5);transition:all .5s var(--rb-ease)}
.m3-stage.is-lit .m3-pin{background:var(--royal);border-color:#fff;box-shadow:0 0 0 8px rgba(8,119,255,.18),0 0 26px 4px rgba(8,119,255,.55)}
.m3-row{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(24px,4.5vw,72px);align-items:center;padding-left:clamp(14px,3vw,48px)}
.m3-stage.is-flip .m3-row{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
.m3-stage.is-flip .m3-frame{order:-1}
.m3-frame{margin:0;border-radius:28px;overflow:hidden;aspect-ratio:1.5;background:#07142e;box-shadow:0 34px 70px rgba(7,20,46,.32),0 0 0 1px rgba(7,20,46,.08)}
.m3-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:right center}
.m3-stage.is-flip .m3-frame img{object-position:left center}
.m3-num{display:block;margin-bottom:8px;font:700 clamp(3.6rem,7vw,6.6rem)/.85 var(--rb-display);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px rgba(8,119,255,.55)}
.m3-demo{margin:clamp(24px,3vw,44px) 0 0 clamp(14px,3vw,48px)}
.m3-pk-name{margin:0 0 12px;font:700 clamp(2.4rem,4.6vw,4.4rem)/.98 var(--rb-display);letter-spacing:-.045em;color:var(--ink)}
.m3-pk-line{margin:0 0 22px;font:600 clamp(1rem,1.3vw,1.2rem)/1.35 var(--rb-display);color:var(--royal);letter-spacing:-.01em}
.m3-pk-inc{margin:0 0 10px;font:700 .72rem/1 var(--rb-display);letter-spacing:.18em;text-transform:uppercase;color:#4a5d82}
.m3-pk-list{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:9px}
.m3-pk-list li{position:relative;padding-left:26px;font-size:1rem;line-height:1.45;color:#27375a}
.m3-pk-list li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:12px;border-radius:3px;background:var(--royal);box-shadow:0 0 0 4px rgba(8,119,255,.14)}
.m3-stage .rb-btn.is-primary{background:var(--royal);color:#fff;box-shadow:0 14px 30px rgba(8,119,255,.3)}
.m3-stage .rb-btn.is-primary:hover{filter:brightness(1.08);transform:translateY(-2px)}

.m3-demo{border-radius:22px;border:1px solid rgba(127,208,255,.25);background:linear-gradient(160deg,#0d2a56 0%,#07142e 70%);color:#fff;padding:clamp(18px,2.2vw,28px)}
.m3-demo-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;margin-bottom:18px}
.m3-demo-tag{margin:0;font:700 .72rem/1 var(--rb-display);letter-spacing:.18em;text-transform:uppercase;color:var(--glow)}
.m3-demo .rb-chips{margin:0}
.m3-demo .rb-chip{background:rgba(255,255,255,.06);border:1.5px solid rgba(127,208,255,.3);color:#e6f3ff}
.m3-demo .rb-chip:hover{border-color:var(--cyan)}
.m3-demo .rb-chip[aria-pressed="true"]{background:var(--cyan);border-color:var(--cyan);color:#04132b;box-shadow:none}
.m3-demo .rb-btn.is-line{border:1.5px solid rgba(127,208,255,.4);background:transparent;color:#fff}
.m3-demo .rb-btn.is-line:hover:not(:disabled){border-color:var(--cyan);color:var(--glow)}
.m3-demo .rb-btn:disabled{opacity:.5;cursor:default}
.m3-fine{margin:14px 0 0;font-size:12.5px;color:#9db8de}

.m3-user{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.m3-av{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font:700 1rem/1 var(--rb-display);background:linear-gradient(135deg,#0877ff,#19a4ff)}
.m3-user b{display:block;font:700 1.1rem/1.2 var(--rb-display)}
.m3-user small{color:var(--glow);font-size:.9rem}
.m3-steps{list-style:none;margin:0;padding:0;display:grid;gap:9px;min-height:200px;align-content:start}
.m3-steps li{padding:11px 14px 11px 40px;position:relative;border-radius:12px;background:rgba(255,255,255,.06);font-size:.97rem;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s var(--rb-ease)}
.m3-steps li::before{content:"";position:absolute;left:14px;top:50%;margin-top:-7px;width:14px;height:14px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.m3-steps li.is-on{opacity:1;transform:none}

.m3-req{margin:0 0 16px;color:#d4e8ff}
.m3-req b{color:#fff}
.m3-flow{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.m3-flow li{padding:12px 10px;border-radius:14px;border:1.5px dashed rgba(127,208,255,.28);color:#7f98c0;transition:all .45s var(--rb-ease)}
.m3-flow li b{display:block;font:700 .92rem/1.2 var(--rb-display);margin-bottom:4px}
.m3-flow li span{display:block;font-size:.78rem;line-height:1.3}
.m3-flow li.is-on{border:1.5px solid var(--cyan);background:rgba(25,164,255,.18);color:#fff;box-shadow:0 0 18px rgba(25,164,255,.35)}

.m3-perm{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}
.m3-perm li{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-radius:12px;background:rgba(255,255,255,.06)}
.m3-perm b{font:600 1rem/1 var(--rb-display)}
.m3-perm em{font:700 .72rem/1 var(--rb-display);font-style:normal;letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border-radius:999px;transition:all .3s}
.m3-perm li[data-a=edit] em{background:var(--cyan);color:#04132b}
.m3-perm li[data-a=view] em{background:rgba(127,208,255,.2);color:var(--glow);border:1px solid var(--glow)}
.m3-perm li[data-a=none] em{background:transparent;color:#7f98c0;border:1px dashed #5b739b}
.m3-perm li[data-a=none] b{opacity:.5}
.m3-mig{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}
.m3-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.m3-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#0877ff,#7fd0ff);transition:width .2s linear}
.m3-mig span{font-size:.85rem;color:#cfe6ff;min-width:15ch}

/* how + cta */
.m3-how{background:#fff;color:var(--rb-text);padding:clamp(64px,9vw,120px) 0}
.m3-note{max-width:90ch;margin:34px 0 0;font-size:13.5px;line-height:1.6;color:#4a5a73}
.m3-cta{background:radial-gradient(120% 140% at 50% 0%,#12356b 0%,#050f26 70%);color:#fff;text-align:center;padding:clamp(72px,10vw,150px) 0}
.m3-cta h2{margin:0 auto 32px;max-width:20ch;font:700 clamp(2.2rem,5.2vw,4.4rem)/1.02 var(--rb-display);letter-spacing:-.04em}
.m3-cta .rb-btn.is-light{background:var(--cyan);color:#04132b;box-shadow:0 0 40px rgba(25,164,255,.45)}

@media(max-width:900px){
  .m3-title{position:static;width:auto;padding:26px 16px 22px;background:#07142e}
  .m3-t1,.m3-t2{font-size:clamp(2.2rem,11vw,3.2rem);white-space:normal}
  .m3-sub{font-size:1rem;margin:12px 0 16px}
  .is-m3 .rb-stagewrap{display:flex;flex-direction:column}
  .is-m3 .m3-title{order:-1}
  .is-m3 .rb-swipe{position:static;align-self:flex-end;margin:-46px 16px 0 0;z-index:2}
  .m3-lead-grid{grid-template-columns:1fr}
  .m3-demo{margin-left:clamp(14px,3vw,48px)}
  .m3-flow{grid-template-columns:1fr}
  .m3-mig{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .m3-title .w{animation:none;opacity:1;transform:none;filter:none}
  .m3-steps li,.m3-flow li,.m3-pin,.m3-bar i{transition:none}
}


@media(max-width:1000px){
  .m3-row,.m3-stage.is-flip .m3-row{grid-template-columns:1fr}
  .m3-stage.is-flip .m3-frame{order:0}
  .m3-frame{order:-1;aspect-ratio:1.6}
}