/* M33: interactive sector illustration. Scope exclusively to .m33. */
.m33 { background: #fff; color:#12233e; overflow:clip; }
.m33, .m33 * { box-sizing:border-box; }
.m33-shell { width:min(100% - 3rem,1220px); margin-inline:auto; }
.m33 h1,.m33 h2,.m33 h3,.m33 p { margin-block:0; }
.m33 h2 { font-size:clamp(1.65rem,2.9vw,2.65rem); line-height:1.36; letter-spacing:-.035em; font-weight:800; }
.m33 a { text-decoration:none; }
.m33-kicker { font-size:.79rem; font-weight:800; letter-spacing:.035em; color:#2b77e1; }
.m33-hero { background:#101f38; color:#fff; padding:clamp(3.2rem,6vw,6.3rem) 0 clamp(3.3rem,6vw,6rem); position:relative; }
.m33-hero::before { content:""; position:absolute; inset:0 0 auto; height:1px; background:rgba(255,255,255,.1); }
.m33-hero__layout { display:grid; grid-template-columns:minmax(0,1.27fr) minmax(290px,.73fr); align-items:center; gap:clamp(2rem,7vw,7rem); }
.m33-crumb { color:#b4c4dc; display:flex; gap:.6rem; font-size:.85rem; margin-bottom:2.5rem; }
.m33-crumb a { color:#b4c4dc; }
.m33-crumb a:hover { color:#fff; }
.m33-hero .m33-kicker { color:#8cc0ff; }
.m33-hero h1 { font-size:clamp(2.3rem,4.1vw,4.35rem); letter-spacing:-.05em; font-weight:820; line-height:1.23; max-width:14ch; margin:.6rem 0 1.15rem; color:#fff; }
.m33-hero__lead { max-width:57ch; font-size:1.02rem; color:#ccd8e9; line-height:1.95; }
.m33-hero__actions,.m33-end__actions { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; margin-top:2rem; }
.m33-button { display:inline-flex; gap:.6rem; align-items:center; justify-content:center; min-height:47px; padding:.75rem 1.25rem; font-size:.9rem; line-height:1.35; font-weight:740; border:1px solid transparent; border-radius:10px; text-align:center; transition:transform .12s,background .12s; }
.m33-button:focus-visible { outline:3px solid #82baff; outline-offset:3px; }
.m33-button--primary { background:#236bec; color:#fff; box-shadow:0 12px 23px -18px #4c92ff; }
.m33-button--primary:hover { background:#0c59da; color:#fff; transform:translateY(-1px); }
.m33-button--outline { background:transparent; color:#f1f5ff; border-color:rgba(228,240,255,.43); }
.m33-button--outline:hover { color:#fff; border-color:#fff; }
.m33-button--dark { background:#101f38; color:#fff; margin-top:1.3rem; }
.m33-button--dark:hover { background:#203d62; color:#fff; }
.m33-button--muted { color:#203b60; border-color:#d4dfef; background:#fff; }
.m33-button--muted:hover { border-color:#8ab5ed; }
.m33-hero__facts { border:1px solid rgba(188,210,238,.24); border-radius:17px; background:rgba(255,255,255,.045); padding:clamp(1.45rem,3vw,2.3rem); box-shadow:0 25px 55px -45px #000; }
.m33-hero__signal { display:block; width:29px; height:4px; background:#65aeff; border-radius:5px; margin-bottom:1.3rem; }
.m33-hero__facts h2 { font-size:1.45rem; color:#fff; line-height:1.55; margin-bottom:.6rem; }
.m33-hero__facts p { font-size:.9rem; color:#c2d2e8; line-height:1.9; }
.m33-facts__list { display:flex; justify-content:space-between; gap:1rem; padding-top:1rem; margin-top:1rem; border-top:1px solid rgba(188,210,238,.17); font-size:.79rem; }
.m33-facts__list span { color:#a7bddb; }
.m33-facts__list strong { color:#fff; font-weight:720; }
.m33-experience { padding:clamp(3.5rem,6.5vw,6.5rem) 0 clamp(3.7rem,6vw,6rem); background:#f5f7fb; }
.m33-section-head { max-width:800px; }
.m33-section-head h2 { margin:.7rem 0 .65rem; }
.m33-section-head>p:last-child { font-size:.98rem; color:#566783; line-height:1.85; }
.m33-sector-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.55rem; margin-top:2.2rem; }
.m33-sector-tabs button { font:inherit; display:flex; align-items:center; justify-content:center; gap:.55rem; text-align:center; min-height:58px; padding:.8rem .5rem; background:#fff; border:1px solid #dbe4f0; border-radius:10px; color:#334763; font-weight:710; font-size:.87rem; cursor:pointer; }
.m33-sector-tabs button span { color:#7b8da4; font-size:.75rem; font-weight:800; font-family:Arial,sans-serif; }
.m33-sector-tabs button[aria-selected="true"] { background:#152743; border-color:#152743; color:#fff; }
.m33-sector-tabs button[aria-selected="true"] span { color:#8cb9fb; }
.m33-sector-tabs button:focus-visible { outline:3px solid #226bec; outline-offset:3px; }
.m33-workspace { display:grid; grid-template-columns:minmax(240px,.4fr) minmax(0,.6fr); gap:0; min-height:420px; margin-top:1rem; background:#fff; border:1px solid #dde4ee; border-radius:15px; box-shadow:0 18px 36px -36px #1b3e72; overflow:hidden; }
.m33-steps { padding:1.25rem; background:#edf2f9; border-inline-end:1px solid #dce4ef; display:grid; gap:.52rem; align-content:start; }
.m33-step { font:inherit; display:flex; align-items:center; gap:.85rem; min-height:68px; padding:.85rem .9rem; border:1px solid transparent; border-radius:9px; cursor:pointer; text-align:right; background:transparent; color:#445774; font-size:.91rem; font-weight:690; }
.m33-step__num { font-family:Arial,sans-serif; font-size:.76rem; color:#758baa; background:#e1e9f4; border-radius:8px; min-width:32px; min-height:32px; display:grid; place-items:center; }
.m33-step:hover { background:rgba(255,255,255,.7); }
.m33-step[data-active="true"] { background:#fff; border-color:#cfdaeb; color:#142a4b; box-shadow:0 6px 14px -14px #16294e; }
.m33-step[data-active="true"] .m33-step__num { background:#dceaff; color:#1059bc; }
.m33-step:focus-visible { outline:2px solid #226bec; outline-offset:2px; }
.m33-stage { padding:clamp(1.65rem,4vw,3.1rem); display:flex; flex-direction:column; align-items:stretch; }
.m33-stage__eyebrow { display:flex; justify-content:space-between; align-items:center; gap:1rem; font-size:.82rem; color:#40628b; font-weight:790; }
.m33-tag { padding:.4rem .7rem; border:1px solid #d8e6f6; border-radius:99px; background:#f2f7fd; color:#406083; font-size:.72rem; }
.m33-stage h3 { font-size:clamp(1.6rem,2.5vw,2.1rem); font-weight:800; line-height:1.42; margin:1.4rem 0 .8rem; letter-spacing:-.035em; }
.m33-stage>[data-m33-description] { color:#51647f; font-size:1rem; line-height:1.95; max-width:58ch; }
.m33-stage__proof { display:flex; gap:.9rem; background:#f5f8fc; border-inline-start:3px solid #7eacf1; border-radius:9px; padding:1.05rem 1.1rem; margin:1.6rem 0; }
.m33-proof__icon { font-family:Arial,sans-serif; font-weight:800; background:#e2efff; color:#1453a6; border-radius:50%; flex:0 0 26px; height:26px; display:grid; place-items:center; }
.m33-stage__proof b { font-size:.85rem; color:#223e5e; }
.m33-stage__proof p { font-size:.86rem; margin-top:.32rem; color:#4f627d; line-height:1.8; }
.m33-stage__actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem; margin-top:auto; padding-top:1rem; border-top:1px solid #e8edf5; }
.m33-stage__actions a { color:#155ac1; font-size:.86rem; font-weight:770; }
.m33-stage__pager { display:flex; gap:.5rem; }
.m33-stage__pager button { font:inherit; color:#17335c; background:#fff; border:1px solid #ccd8e8; border-radius:8px; padding:.6rem .9rem; min-height:40px; cursor:pointer; font-size:.85rem; font-weight:750; }
.m33-stage__pager button:last-child { background:#17335c; color:#fff; border-color:#17335c; }
.m33-stage__pager button:disabled { opacity:.38; cursor:default; }
.m33-stage__pager button:focus-visible { outline:2px solid #226bec; outline-offset:3px; }
.m33-integrity { margin:1.3rem 0 0; color:#5c708b; font-size:.83rem; line-height:1.8; }
.m33-integrity a { color:#175dba; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.m33-transition { padding:clamp(3.5rem,6.6vw,6.4rem) 0; background:#fff; }
.m33-transition__grid { display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); gap:clamp(1.6rem,6vw,6rem); align-items:start; }
.m33-transition__intro { padding-top:.6rem; }
.m33-transition__intro h2 { margin:.65rem 0 .85rem; }
.m33-transition__intro>p:not(.m33-kicker) { color:#536985; line-height:1.9; font-size:.97rem; }
.m33-progress { display:flex; align-items:end; flex-wrap:wrap; gap:1rem; margin-top:2.2rem; }
.m33-progress strong { font:800 2.75rem/1 Arial,sans-serif; letter-spacing:-.04em; color:#14345d; }
.m33-progress strong small { font:600 .85rem/1.6 inherit; letter-spacing:0; color:#546781; }
.m33-progress>span { color:#60748f; font-size:.82rem; line-height:1.75; max-width:25ch; }
.m33-progress__track { height:7px; border-radius:50px; background:#e6ecf5; margin-top:.75rem; overflow:hidden; }
.m33-progress__track span { width:0; height:100%; display:block; background:#276fe0; transition:width .18s; }
.m33-transition__disclosure { display:block; max-width:48ch; font-size:.8rem; color:#7587a0; line-height:1.9; margin-top:.9rem; }
.m33-checklist { border:1px solid #dfe6f0; border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 22px 45px -45px #234878; }
.m33-checklist__heading { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.15rem 1.35rem; background:#f4f7fb; border-bottom:1px solid #dce6f3; }
.m33-checklist__heading h3 { font-size:1.13rem; font-weight:800; }
.m33-checklist__heading button { border:none; background:transparent; color:#125db5; cursor:pointer; font:700 .8rem/1.5 inherit; white-space:nowrap; }
.m33-checklist__heading button:focus-visible { outline:2px solid #246ce2; outline-offset:4px; }
.m33-checklist label { display:flex; gap:1rem; align-items:flex-start; padding:1.05rem 1.35rem; cursor:pointer; border-bottom:1px solid #edf0f5; }
.m33-checklist label:last-child { border-bottom:0; }
.m33-checklist label:hover { background:#f9fbfe; }
.m33-checklist input { appearance:auto; width:19px; height:19px; margin-top:.35rem; accent-color:#236be7; flex:none; cursor:pointer; }
.m33-checklist label span { display:grid; gap:.2rem; }
.m33-checklist label b { font-size:.94rem; font-weight:780; color:#263d5b; }
.m33-checklist label small { font-size:.82rem; line-height:1.75; color:#657b96; }
.m33-checklist label:has(input:checked) { background:#f5faff; }
.m33-checklist label:has(input:checked) b { color:#1557a9; }
.m33-end { padding:clamp(2.5rem,5vw,4.2rem) 0; background:#eaf1fb; border-top:1px solid #d9e5f5; }
.m33-end__layout { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.5rem 3rem; }
.m33-end h2 { max-width:28ch; margin:.55rem 0 .6rem; font-size:clamp(1.5rem,2.2vw,2.3rem); }
.m33-end p:last-child { max-width:72ch; font-size:.93rem; color:#566b85; line-height:1.85; }
.m33-end__actions { margin:0; flex-shrink:0; }
@media (max-width:900px){
  .m33-hero__layout,.m33-transition__grid { grid-template-columns:minmax(0,1fr); }
  .m33-hero__facts { max-width:560px; }
  .m33-sector-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .m33-workspace { grid-template-columns:minmax(0,1fr); }
  .m33-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.4rem; padding:.8rem; border-inline-end:0; border-bottom:1px solid #dce4ef; }
  .m33-step { flex-direction:column; justify-content:center; gap:.45rem; min-height:88px; padding:.7rem .4rem; text-align:center; font-size:.78rem; }
  .m33-stage { min-height:370px; }
}
@media (max-width:520px){
 .m33-shell { width:calc(100% - 2rem); }
 .m33-hero { padding:2.7rem 0 3rem; }
 .m33-crumb { margin-bottom:1.8rem; }
 .m33-hero h1 { max-width:17ch; }
 .m33-hero__lead { font-size:.92rem; }
 .m33-hero__actions { align-items:stretch; }
 .m33-hero__actions .m33-button { flex:1 1 100%; }
 .m33-hero__facts { padding:1.2rem; }
 .m33-sector-tabs button { min-height:68px; font-size:.77rem; flex-direction:column; gap:.2rem; }
 .m33-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .m33-step { flex-direction:row; min-height:56px; text-align:right; font-size:.75rem; justify-content:flex-start; }
 .m33-step__num { width:26px; min-width:26px; min-height:26px; }
 .m33-stage { padding:1.3rem; }
 .m33-stage__actions { align-items:stretch; }
 .m33-stage__pager { width:100%; }
 .m33-stage__pager button { flex:1; }
 .m33-end__actions { width:100%; }
 .m33-end__actions .m33-button { flex:1 1 100%; }
}
@media (prefers-reduced-motion:reduce) { .m33 *, .m33 *::before,.m33 *::after {transition:none!important;animation:none!important;} }
