/* Hero · the loud one, round 4 (5 Oct 2026; owner: the idea is good; keep one colour, show alert icons instead of
   flooding the panel; nothing tilted, everything straight; the finish of the reference boards).
   One blue panel with a fine dot grid. In it, flat and on one grid: the shared case in the middle, three parties in a
   straight column either side (two straight rows above it on small screens). Tonal cards, one radius family, one
   accent, no depth tricks. wow.js builds and runs the stage. The tilted version is kept as wow-3d.*. Classes are wow-. */
/* clear air under the blue before the next section, the same gap the old hero left */
.wow{padding:0;margin-bottom:136px}
/* the blue runs the full width of the page, edge to edge; the copy and the stage keep the site's measure */
.wow-panel{position:relative;overflow:hidden;isolation:isolate;color:#fff;text-align:center;
  background:radial-gradient(ellipse 70% 80% at 50% 0%,#4BA6EC 0,#2B8FD9 42%,#1B6FB4 100%);padding:80px var(--gut,24px) 96px}
.wow-copy{position:relative;z-index:2;max-width:980px;margin:0 auto}
.wow-h1{margin:0;font:500 clamp(40px,6.2vw,90px)/1.0 "Inter","Inter Display",system-ui,sans-serif;font-variation-settings:"opsz" 32;letter-spacing:-.045em;text-wrap:balance}
.wow-h1 span{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.06em}
.wow-h1 em{display:inline-block;font-style:normal}
.wow-lede{max-width:700px;margin:24px auto 0;font:400 18px/1.5 "Instrument Sans",system-ui,sans-serif;color:rgba(255,255,255,.88)}
.wow-ctas{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:32px}
.wow-btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;font:600 15px/1 "Instrument Sans",system-ui,sans-serif;text-decoration:none;white-space:nowrap;transition:transform .25s cubic-bezier(.2,.8,.2,1),background-color .25s}
.wow-btn .ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wow-btn-light{background:#fff;color:#111}.wow-btn-light:hover{transform:translateY(-2px)}
.wow-btn-ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}.wow-btn-ghost:hover{background:rgba(255,255,255,.12)}
.wow-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.wow-dots{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.26) 1px,transparent 1.4px);background-size:22px 22px;background-position:50% 0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 46%,#000 100%);mask-image:linear-gradient(180deg,transparent 0,#000 46%,#000 100%)}
/* before wow.js has run (and only when scripts run at all): hold the opening's first frame, so nothing flashes then hides */
/* visibility, not transform: GSAP would keep a CSS transform as a permanent offset and the headline would stay hidden */
.wow-js:not(.wow-ready) .wow-h1 em{visibility:hidden}
.wow-js:not(.wow-ready) .wow-lede,.wow-js:not(.wow-ready) .wow-ctas{opacity:0}
/* the stage: flat, one grid */
.wow-stage{position:relative;z-index:1;max-width:1344px;margin-inline:auto;margin-top:64px;min-height:311px;-webkit-user-select:none;user-select:none;color:#111;text-align:left}
.wow-stage svg use{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wow-world{position:absolute;inset:0}
.wow-case{position:absolute;left:50%;top:0;width:560px;margin-left:-280px;border-radius:28px;background:#fff;padding:24px 28px 14px;box-shadow:0 24px 48px -28px rgba(6,40,80,.6)}
.wow-head{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid rgba(17,17,17,.10)}
.wow-home{flex:none;width:48px;height:48px;border-radius:14px;background:#E6F1FB;color:#1C6FB0;display:grid;place-items:center}
.wow-home svg{width:24px;height:24px}
.wow-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.wow-id b{font:500 21px/1.1 "Inter","Inter Display",system-ui,sans-serif;font-variation-settings:"opsz" 24;letter-spacing:-.015em;white-space:nowrap}
.wow-id small{font:400 14px/1.1 "Instrument Sans",system-ui,sans-serif;color:#6F6F74;white-space:nowrap}
.wow-pillbox{position:relative;flex:none;height:32px;width:170px}
.wow-pill{position:absolute;right:0;top:0;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:10px;font:600 14px/1 "Instrument Sans",system-ui,sans-serif;white-space:nowrap;opacity:0}
.wow-pill svg{width:16px;height:16px}.wow-pill svg use{stroke-width:2}
.wow-pill.p-day{background:#E6F1FB;color:#1C6FB0}.wow-pill.p-track{background:#E4F3EA;color:#1F7A4D}.wow-pill.p-risk{background:#FBF0E3;color:#8F4E10}.wow-pill.p-done{background:#1F7A4D;color:#fff}
.wow-steps{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(4,50px);column-gap:32px;margin-top:6px}
.wow-step{display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(17,17,17,.08)}
.wow-step:nth-child(4n){border-bottom:0}
.wow-dot{position:relative;flex:none;width:24px;height:24px}
.wow-dot>i{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;opacity:0}
.wow-dot .d-wait{opacity:1;border:1.5px dashed #B9BEC5}
.wow-dot .d-spin{border:2.5px solid rgba(43,143,217,.22);border-top-color:#2B8FD9}
.wow-dot .d-ok{background:#1F7A4D;color:#fff}
.wow-dot .d-ok svg{width:14px;height:14px}.wow-dot .d-ok svg use{stroke-width:3.4}
.wow-dot .d-risk{border-radius:0;color:#B0641A}
.wow-dot .d-risk svg{width:24px;height:24px}.wow-dot .d-risk svg use{stroke-width:2}
.wow-step b{font:400 17px/1.15 "Instrument Sans",system-ui,sans-serif;white-space:nowrap;color:#6F6F74}
/* a party: no card. An icon disc with the name and its state set straight on the panel; a small mark on the disc's corner.
   Left column is mirrored (text, then disc), so the two rows of discs flank the case. Only the case is a card. */
.wow-party{position:absolute;left:50%;top:0;display:flex;align-items:center;gap:14px;height:60px;color:#fff;white-space:nowrap}
.wow-party.is-left{flex-direction:row-reverse}
.wow-av{position:relative;flex:none;width:60px;height:60px}
.wow-ic{position:absolute;inset:0;border-radius:50%;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);color:#fff;display:grid;place-items:center}
.wow-ic svg{width:26px;height:26px}
.wow-pt{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.wow-party.is-left .wow-pt{align-items:flex-end}
.wow-pt b{font:500 18px/1 "Inter","Inter Display",system-ui,sans-serif;letter-spacing:-.012em;color:#fff}
.wow-ps{position:relative;display:block;height:16px;width:100%}
.wow-ps span{position:absolute;left:0;top:0;font:400 14.5px/16px "Instrument Sans",system-ui,sans-serif;color:rgba(255,255,255,.8);white-space:nowrap;opacity:0}
.wow-party.is-left .wow-ps span{left:auto;right:0}
.wow-ps .ps-act,.wow-ps .ps-done{color:#fff;font-weight:600}
.wow-g{position:absolute;right:-5px;bottom:-5px;width:24px;height:24px;z-index:1}
.wow-g>i{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;opacity:0;background:#fff;box-shadow:0 0 0 2.5px #2585D2}
.wow-ps span.ps-wait{opacity:1}
.wow-g>i.g-wait{opacity:1;background:#2585D2;border:1.5px dashed rgba(255,255,255,.7)}
.wow-g .g-ok{color:#1C6FB0}.wow-g .g-done{color:#1F7A4D}.wow-g .g-alert{color:#B0641A}
.wow-g .g-ok svg,.wow-g .g-done svg{width:13px;height:13px}.wow-g .g-ok svg use,.wow-g .g-done svg use{stroke-width:3.6}
.wow-g .g-alert svg{width:15px;height:15px;margin-top:-1px}.wow-g .g-alert svg use{stroke-width:2.3}
.wow-stage[data-plan="m"] .wow-case{width:460px;margin-left:-230px;padding:20px 22px 10px}
.wow-stage[data-plan="m"] .wow-id b{font-size:18.5px}.wow-stage[data-plan="m"] .wow-id small{font-size:13px}
.wow-stage[data-plan="m"] .wow-home{width:42px;height:42px;border-radius:12px}
.wow-stage[data-plan="m"] .wow-pillbox{width:142px}.wow-stage[data-plan="m"] .wow-pill{font-size:12.5px;height:28px;padding:0 10px;gap:5px}
.wow-stage[data-plan="m"] .wow-steps{grid-template-rows:repeat(4,46px);column-gap:20px}.wow-stage[data-plan="m"] .wow-step b{font-size:15px}
.wow-stage[data-plan="m"] .wow-party{height:50px;gap:12px}
.wow-stage[data-plan="m"] .wow-av{width:50px;height:50px}.wow-stage[data-plan="m"] .wow-ic svg{width:22px;height:22px}
.wow-stage[data-plan="m"] .wow-pt{gap:6px}.wow-stage[data-plan="m"] .wow-pt b{font-size:15.5px}.wow-stage[data-plan="m"] .wow-ps span{font-size:13px}
.wow-stage[data-plan="m"] .wow-g{width:21px;height:21px;right:-4px;bottom:-4px}.wow-stage[data-plan="m"] .wow-g .g-ok svg,.wow-stage[data-plan="m"] .wow-g .g-done svg{width:11px;height:11px}.wow-stage[data-plan="m"] .wow-g .g-alert svg{width:13px;height:13px}
/* small screens: the six are two (or three) straight rows of name chips above the case */
.wow-stage[data-plan="s"] .wow-case,.wow-stage[data-plan="xs"] .wow-case{width:440px;margin-left:-220px;padding:20px 20px 8px;border-radius:24px}
.wow-stage[data-plan="s"] .wow-party,.wow-stage[data-plan="xs"] .wow-party{height:36px;gap:10px}
.wow-stage[data-plan="s"] .wow-av,.wow-stage[data-plan="xs"] .wow-av{width:36px;height:36px}
.wow-stage[data-plan="s"] .wow-ic svg,.wow-stage[data-plan="xs"] .wow-ic svg{width:17px;height:17px}
.wow-stage[data-plan="s"] .wow-pt b,.wow-stage[data-plan="xs"] .wow-pt b{font-size:15px}
.wow-stage[data-plan="s"] .wow-ps,.wow-stage[data-plan="xs"] .wow-ps{display:none}
.wow-stage[data-plan="s"] .wow-g,.wow-stage[data-plan="xs"] .wow-g{width:17px;height:17px;right:-4px;bottom:-4px}
.wow-stage[data-plan="s"] .wow-g>i,.wow-stage[data-plan="xs"] .wow-g>i{box-shadow:0 0 0 2px #2585D2}
.wow-stage[data-plan="s"] .wow-g svg,.wow-stage[data-plan="xs"] .wow-g svg{width:10px!important;height:10px!important}
.wow-stage[data-plan="s"] .wow-id b{font-size:18px}.wow-stage[data-plan="s"] .wow-step b{font-size:15px}
.wow-stage[data-plan="s"] .wow-steps{grid-template-rows:repeat(4,44px);column-gap:18px}
.wow-stage[data-plan="s"] .wow-pillbox{width:142px}.wow-stage[data-plan="s"] .wow-pill{font-size:12.5px;height:28px;padding:0 10px}
.wow-stage[data-plan="xs"] .wow-case{width:min(330px,100%);left:0;right:0;margin:0 auto;padding:16px 14px 6px;border-radius:20px}
.wow-stage[data-plan="xs"] .wow-home{width:38px;height:38px;border-radius:11px}.wow-stage[data-plan="xs"] .wow-home svg{width:20px;height:20px}
.wow-stage[data-plan="xs"] .wow-head{gap:10px;padding-bottom:14px}
.wow-stage[data-plan="xs"] .wow-id b{font-size:14.5px}.wow-stage[data-plan="xs"] .wow-id small{font-size:10.5px}
.wow-stage[data-plan="xs"] .wow-pillbox{width:104px;height:24px}.wow-stage[data-plan="xs"] .wow-pill{font-size:10px;height:24px;padding:0 6px;gap:4px;border-radius:8px}
.wow-stage[data-plan="xs"] .wow-pill svg{width:12px;height:12px}
.wow-stage[data-plan="xs"] .wow-steps{column-gap:10px;grid-template-rows:repeat(4,40px)}
.wow-stage[data-plan="xs"] .wow-step{gap:8px}.wow-stage[data-plan="xs"] .wow-step b{font-size:12.5px;white-space:normal;line-height:1.1}
.wow-stage[data-plan="xs"] .wow-dot{width:20px;height:20px}.wow-stage[data-plan="xs"] .wow-dot .d-risk svg{width:20px;height:20px}
.wow-stage[data-plan="xs"] .wow-pt b{font-size:14px}
/* the stage's height before wow.js sets it, so the page below does not move */
@media (max-width:1259px){.wow-stage{min-height:281px}}
@media (max-width:1007px){.wow-stage{min-height:435px}}
@media (max-width:579px){.wow-stage{min-height:391px}}
@media (max-width:1099px){.wow{margin-bottom:112px}}
@media (max-width:767px){.wow{margin-bottom:88px}}
@media (max-width:899px){.wow-panel{padding-top:64px;padding-bottom:64px}.wow-stage{margin-top:48px}.wow-lede{font-size:17px}}
@media (max-width:519px){.wow-panel{padding:48px 16px 44px}.wow-btn{height:48px;padding:0 20px}.wow-stage{margin-top:36px}}
@media (prefers-reduced-motion:reduce){.wow-btn{transition:none}}