/* Maximo Mentor Learn preview styles. Colours and type follow the Learn brand kit (see 4max-learn-project-brief.md, section 2). */
:root{--red:#E0301E;--navred:#D72412;--ink:#1D243C;--slate:#3F4C7C;--indigo:#5B37FF;--indigo-h:#4527D1;--violet:#9C8CFF;--sky:#6E9BFF;--deep:#141830;--night:#1D2152;--green:#1F9D55;--green-bg:#E6F6EC;--green-ink:#16713D;--amber:#F0B54A;--amber-bg:#FFF6E5;--page:#FFFFFD;--border:#ECECF2;--soft:#F5F5F8;--muted:#6E7794;--lilac:#F1EEFF}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--page);color:var(--ink);font-size:16px;line-height:1.5}
a{color:var(--indigo);text-decoration:none}a:hover{color:var(--indigo-h);text-decoration:underline}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.topbar{background:#fff;border-bottom:1px solid var(--border)}
.topbar .wrap{height:72px;display:flex;align-items:center;gap:40px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none!important}
.brand img{height:30px}.brand .bar{width:2px;height:30px;background:var(--red)}
.brand a{display:flex;align-items:center;text-decoration:none!important}.brand .tag{display:flex;flex-direction:column;line-height:1.15;font-size:11px;font-weight:700;letter-spacing:.16em}
.brand .tag span:first-child{color:var(--slate)}.brand .tag span:last-child{color:var(--indigo)}
.nav{display:flex;gap:28px;font-weight:600;font-size:15px}.nav a{color:var(--slate);padding:24px 0}.nav a.on{color:var(--ink);border-bottom:2px solid var(--navred);padding-bottom:22px}
.preview-flag{margin-left:auto;font-size:12px;font-weight:700;letter-spacing:.08em;color:#8A5A00;background:var(--amber-bg);border:1px solid var(--amber);border-radius:999px;padding:4px 12px}
.hero{background:linear-gradient(135deg,var(--deep),var(--night));border-top:6px solid var(--red);color:#fff;padding:28px 0 36px}
.crumb{font-size:13px;color:rgba(255,255,255,.7)}.crumb a{color:var(--violet)}
.kicker{font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--violet)}
.pill{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;border:1px solid rgba(156,140,255,.6)}
.pill.green{background:var(--green);border-color:var(--green);color:#fff}
.pill.free{background:var(--green-bg);color:var(--green-ink);border-color:transparent}
.pill.status{background:var(--soft);color:var(--muted);border-color:transparent;text-transform:capitalize}
.pill.status.draft{background:var(--amber-bg);color:#8A5A00}.pill.status.checked,.pill.status.live{background:var(--green-bg);color:var(--green-ink)}
.hero h1{margin:10px 0 8px;font-size:44px;font-weight:800;line-height:1.1}.hero h1 em{font-style:normal;color:var(--sky)}
.hero p{margin:0;font-size:17px;color:rgba(255,255,255,.82);max-width:720px}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 26px;border-radius:12px;border:0;background:var(--indigo);color:#fff!important;font:700 16px Inter,system-ui,sans-serif;cursor:pointer;text-decoration:none!important}
.btn:hover{background:var(--indigo-h)}.btn.ghost{background:#fff;color:var(--indigo)!important;border:1px solid var(--indigo)}
.btn.small{height:40px;padding:0 16px;font-size:14px;border-radius:10px}
.cols{display:flex;gap:40px;align-items:flex-start;padding:32px 0 60px}.cols main{flex:1;min-width:0}.cols aside{width:320px;flex-shrink:0;display:flex;flex-direction:column;gap:16px}
.card{border:1px solid var(--border);border-radius:14px;background:#fff;padding:22px}
.card .lab{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--muted);display:block;margin-bottom:8px}
.module{border:1px solid var(--border);border-radius:14px;background:#fff;margin-bottom:14px;overflow:hidden}
.module summary{list-style:none;display:flex;align-items:center;gap:18px;padding:20px 24px;cursor:pointer}.module summary::-webkit-details-marker{display:none}
.num{width:40px;height:40px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;background:#F1F2F7;color:var(--slate);flex-shrink:0}
.module .mid{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--muted)}.module .mt{font-size:18px;font-weight:700}
.module ol{list-style:none;margin:0;padding:0 24px 16px 82px}.module li{border-top:1px solid var(--border)}
.module li a{display:flex;align-items:center;gap:14px;padding:13px 12px;margin:0 -12px;border-radius:8px;color:var(--ink)}.module li a:hover{background:var(--lilac);text-decoration:none}
.lid{font-size:12px;font-weight:700;color:var(--muted);width:112px;flex-shrink:0}.lt{flex:1;font-weight:500}.lm{font-size:13px;color:var(--muted)}
.dot{width:22px;height:22px;border-radius:11px;border:2px solid #C9CCDA;flex-shrink:0;display:flex;align-items:center;justify-content:center}.dot.done{background:var(--green);border-color:var(--green)}.dot.done::after{content:"";width:6px;height:10px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg) translate(-1px,-1px)}
/* lesson player */
.player-top{height:60px;background:var(--deep);border-top:4px solid var(--red);color:#fff;display:flex;align-items:center;gap:18px;padding:0 24px}
.player-top img{height:24px}.player-top .bar{width:2px;height:24px;background:var(--red)}.player-top .sp{flex:1}
.player-top a.exit{color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:10px;padding:9px 16px;font-size:14px;font-weight:600;text-decoration:none}
.player{display:flex;min-height:calc(100vh - 60px)}
.side{width:320px;flex-shrink:0;background:var(--soft);border-right:1px solid var(--border)}
.side .head{background:var(--night);color:#fff;padding:24px}.side .head .kicker{font-size:12px}
.meter{height:6px;border-radius:3px;background:rgba(255,255,255,.18);margin:10px 0 8px}.meter i{display:block;height:6px;border-radius:3px;background:var(--violet)}
.side nav{padding:12px}.side .mod{padding:12px 12px 6px;font-size:14px;font-weight:700;display:flex;justify-content:space-between}
.side nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:var(--ink);font-size:13px}.side nav a.on{background:#E7E2FF;font-weight:700}
.side nav a .d{width:16px;height:16px;border-radius:8px;border:2px solid #C9CCDA;flex-shrink:0}.side nav a.on .d{border-color:var(--indigo);background:var(--indigo)}
.stage{flex:1;min-width:0;padding:36px 64px 40px;display:flex;flex-direction:column;gap:24px}
.stage h1{margin:0;font-size:36px;font-weight:800;line-height:1.15}.stage .sub{color:var(--muted);margin:0}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.steps button{width:100%;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:#fff;font-family:inherit;text-align:left;cursor:pointer}
.steps button[aria-current="step"]{border-color:var(--indigo);background:var(--lilac)}
.steps .n{width:26px;height:26px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;background:#F1F2F7;color:var(--slate);flex-shrink:0}
.steps button[aria-current="step"] .n{background:var(--indigo);color:#fff}.steps button.done .n{background:var(--green);color:#fff}
.steps b{display:block;font-size:14px;color:var(--ink)}.steps small{font-size:12px;color:var(--muted)}
.panel{border:1px solid var(--border);border-radius:14px;background:#fff;padding:28px 32px}.panel[hidden]{display:none}
.video{height:420px;border-radius:12px;background:linear-gradient(135deg,var(--deep),var(--night));display:flex;align-items:center;justify-content:center;position:relative;color:#fff}
.video .play{width:84px;height:84px;border-radius:42px;background:var(--indigo);display:flex;align-items:center;justify-content:center}
.video .play::after{content:"";border-style:solid;border-width:15px 0 15px 24px;border-color:transparent transparent transparent #fff;margin-left:6px}
.video span:not(.play){position:absolute;left:20px;bottom:16px;font-size:13px;color:rgba(255,255,255,.8)}
.article{max-width:820px}.article h2{font-size:24px;font-weight:700;margin:28px 0 10px}.article p,.article li{font-size:16px;line-height:1.65;color:var(--slate)}
.article figure{margin:18px 0}.article img{max-width:100%;border-radius:10px;border:1px solid var(--border)}.article figcaption{font-size:13px;color:var(--muted);margin-top:6px}
.shot{border-radius:10px;background:var(--soft);border:1px dashed #C9CCDA;color:var(--muted);font-size:13px;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px 16px;min-height:160px}
.callout{border-left:4px solid var(--indigo);background:#FBFBFD;border-radius:0 12px 12px 0;padding:14px 18px;margin:18px 0}
.callout.classic{border-left:0;border:1px solid var(--border);border-radius:12px}.callout .cl{font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--indigo);display:block;margin-bottom:8px}
.callout.classic .pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.callout.think{border-left-color:var(--amber);background:var(--amber-bg)}
.callout.todo{border-left-color:var(--red);background:#FFF1EF}
.clips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.clips video,.clips .shot{width:100%;height:300px;border-radius:12px;background:var(--night)}
.check{max-width:820px;margin-bottom:28px}.check h3{font-size:20px;margin:6px 0 12px}
.opt{display:flex;width:100%;align-items:center;gap:14px;padding:14px 16px;margin:8px 0;border-radius:12px;border:2px solid var(--border);background:#fff;font:500 15px Inter,system-ui,sans-serif;color:var(--ink);text-align:left;cursor:pointer}
.opt .k{width:28px;height:28px;border-radius:14px;background:#F1F2F7;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0}
.opt.right{border-color:var(--green);background:var(--green-bg)}.opt.wrong{border-color:var(--amber);background:var(--amber-bg)}
.fb{padding:12px 16px;border-radius:10px;font-size:15px}.fb.right{background:var(--green-bg)}.fb.wrong{background:var(--amber-bg)}
.nextrow{display:flex;align-items:center;justify-content:space-between}
.foot{background:var(--soft);border-top:1px solid var(--border);font-size:12px;color:var(--muted);padding:20px 0}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
/* ---- learn.4max.co.uk site pages (added 28 Sept 2026) ---- */
.samplebar{background:var(--amber-bg);border-bottom:1px solid #F3D9A4;color:#6B4A00;font-size:14px}
.samplebar .wrap{padding:10px 32px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.samplebar b{font-weight:700}
.nav a.cta{background:var(--indigo);color:#fff!important;padding:10px 16px;border-radius:10px;text-decoration:none}
.nav{align-items:center}
.hero.big{padding:56px 0 64px}.hero.big h1{font-size:52px;max-width:880px}
.hero .row .btn.ghost{background:transparent;color:#fff!important;border-color:rgba(255,255,255,.5)}
section.band{padding:56px 0}section.band.alt{background:var(--soft)}
section.band h2{font-size:30px;font-weight:800;margin:0 0 8px}section.band .lead{color:var(--slate);font-size:17px;margin:0 0 28px;max-width:760px}
.grid6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.card h3{margin:6px 0 6px;font-size:19px}.card p{margin:0;color:var(--slate);font-size:15px}
.card .code{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--indigo)}
a.card{color:var(--ink);text-decoration:none;display:block}a.card:hover{border-color:#CFC6FF;text-decoration:none}
.stepn{width:34px;height:34px;border-radius:17px;background:var(--indigo);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:8px}
.pill.soon{background:var(--soft);color:var(--muted);border-color:transparent}
.pill.first{background:var(--green-bg);color:var(--green-ink);border-color:transparent}
table.plain{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;font-size:15px}
table.plain th{text-align:left;font-size:13px;color:var(--muted);font-weight:600;padding:12px 18px;border-bottom:1px solid var(--border)}
table.plain td{padding:12px 18px;border-bottom:1px solid var(--border)}
.kv{display:grid;grid-template-columns:180px 1fr;gap:10px 18px;font-size:15px}.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:600}
.form label{display:block;font-size:14px;font-weight:600;margin:14px 0 6px}.form input{width:100%;height:46px;border:1px solid var(--border);border-radius:10px;padding:0 14px;font:inherit}
.muted{color:var(--muted)}
@media (max-width:900px){.grid6,.grid5,.grid3,.grid2{grid-template-columns:1fr}.cols{flex-direction:column}.cols aside{width:100%}.hero.big h1{font-size:36px}.wrap{padding-left:16px;padding-right:16px}.topbar .wrap{flex-wrap:wrap;height:auto;padding:12px 16px;gap:10px 16px}.nav{gap:14px;font-size:14px;flex-wrap:wrap}.nav a{padding:6px 0}.nav a.on{padding-bottom:4px}.nav a.cta{padding:6px 12px}.steps{grid-template-columns:1fr 1fr}.side{display:none}.stage{padding:24px 16px}.kv{grid-template-columns:1fr}}
/* Mobile fixes (29 Sept 2026): four-card grids, stacked columns, wide tables, module rows */
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:900px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}.cols{align-items:stretch}.cols main{width:100%}table.plain{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}details.module summary{flex-wrap:wrap;padding:16px;gap:12px}.lid{width:auto}.module ol{padding:0 16px 12px}.module li a{display:grid;grid-template-columns:22px 1fr;gap:2px 12px;align-items:start}.module li a .dot{grid-row:span 3}.module li a .lm:empty{display:none}}
@media (max-width:520px){.grid4{grid-template-columns:1fr}}
/* Task clips and the lesson footer on phones (29 Sept 2026) */
.clips figure{margin:0}
.clips .shot{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.25)}
@media (max-width:900px){.clips{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:10px;-webkit-overflow-scrolling:touch}.clips>*{flex:0 0 68%;max-width:260px;scroll-snap-align:start}.clips video,.clips .shot{height:auto;aspect-ratio:9/16;max-height:60vh}.nextrow{flex-wrap:wrap;gap:12px}.nextrow>.row{width:100%;justify-content:space-between}.nextrow #next{flex:1}}
@media (max-width:900px){.player-top{gap:10px;padding:0 16px}.player-top>strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.player-top>span[style]{display:none}.player-top a.exit{padding:6px 12px;font-size:0;white-space:nowrap}.player-top a.exit::before{content:"Save and exit";font-size:13px}.nextrow #stepnote{flex-basis:100%}}
/* build 248: home page led by the free course */
.hero.home{padding:48px 0 56px;overflow:hidden}
.homehero{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.hero.home h1{font-size:60px;max-width:620px}.hero.home h1 em{color:var(--amber);font-style:normal}
.hh-slogan{font-size:20px!important;max-width:560px!important;margin-top:6px!important}
.hh-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.hh-badges span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:600;color:#fff}
.hh-by{font-size:13.5px!important;margin-top:20px!important;color:rgba(255,255,255,.65)!important}
.hh-art{position:relative;height:440px}
.hh-art img{position:absolute;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.45);display:block}
.hh-art .a-main{width:92%;height:auto;left:0;top:10px;transform:rotate(-2deg)}
.hh-art .a-sim{width:62%;height:auto;right:6%;bottom:0;border:3px solid #fff;transform:rotate(2deg)}
.hh-art .a-phone{width:24%;height:auto;right:-2%;top:60px;border-radius:20px;border:7px solid #111;transform:rotate(4deg)}
.a-stamp{position:absolute;font-weight:800;letter-spacing:.08em;font-size:20px;padding:6px 14px;border:4px solid;border-radius:10px;background:rgba(255,255,255,.92)}
.a-stamp.s1{color:#1F9D55;border-color:#1F9D55;left:4%;bottom:70px;transform:rotate(-8deg)}
.a-stamp.s2{color:#5B37FF;border-color:#5B37FF;left:34%;top:-6px;transform:rotate(6deg)}
.hl{font-style:normal;color:var(--indigo)}
.coursegrid{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;margin-top:22px;align-items:start}
.lessons{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lessons li{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px}
.lessons li b{flex:none;width:36px;height:36px;border-radius:50%;background:var(--indigo);color:#fff;display:grid;place-items:center;font-size:15px}
.lessons li strong{display:block;font-size:16px}.lessons li small{display:block;color:var(--muted);font-size:14px;margin-top:2px}
.coursegrid ul{margin:6px 0 0;padding-left:18px;color:var(--slate)}.coursegrid ul li{margin-bottom:6px}
.customcard{background:linear-gradient(135deg,#F1EEFF,#fff);border-color:#DCD3FF}
@media (max-width:900px){.homehero{grid-template-columns:1fr;gap:28px}.hero.home h1{font-size:40px}.hh-slogan{font-size:17px!important}.hh-art{height:300px;max-width:520px}.coursegrid{grid-template-columns:1fr}.lessons{grid-template-columns:1fr}.a-stamp{font-size:15px}}

/* build 250: the home collage builds itself once when the page opens */
@keyframes hhMain{from{opacity:0;transform:translateX(-60px) rotate(-6deg)}to{opacity:1;transform:rotate(-2deg)}}
@keyframes hhSim{from{opacity:0;transform:translateY(80px) rotate(8deg)}to{opacity:1;transform:rotate(2deg)}}
@keyframes hhPhone{from{opacity:0;transform:translateX(90px) rotate(14deg)}to{opacity:1;transform:rotate(4deg)}}
@keyframes hhS1{0%{opacity:0;transform:scale(2.4) rotate(-8deg)}70%{opacity:1;transform:scale(.92) rotate(-8deg)}100%{opacity:1;transform:scale(1) rotate(-8deg)}}
@keyframes hhS2{0%{opacity:0;transform:scale(2.4) rotate(6deg)}70%{opacity:1;transform:scale(.92) rotate(6deg)}100%{opacity:1;transform:scale(1) rotate(6deg)}}
.hh-art .a-main{animation:hhMain .8s cubic-bezier(.2,.8,.2,1) .15s both}
.hh-art .a-sim{animation:hhSim .8s cubic-bezier(.2,.8,.2,1) .7s both}
.hh-art .a-phone{animation:hhPhone .8s cubic-bezier(.2,.8,.2,1) 1.15s both}
.a-stamp.s1{animation:hhS1 .45s ease-out 1.75s both}.a-stamp.s2{animation:hhS2 .45s ease-out 2.1s both}
@media (prefers-reduced-motion:reduce){.hh-art .a-main,.hh-art .a-sim,.hh-art .a-phone,.a-stamp.s1,.a-stamp.s2{animation:none}}
/* Site switcher (build 280): 4max site | Learning Portal, on both sites. Static here; fixed on www. */
#siteswitch{background:#11152a;font:13px/1 Inter,system-ui,sans-serif;height:34px}
#siteswitch .ss-in{max-width:1160px;margin:0 auto;padding:0 16px;display:flex;align-items:stretch;gap:4px;height:34px}
#siteswitch a{display:flex;align-items:center;gap:8px;padding:0 14px;color:rgba(255,255,255,.62);text-decoration:none!important;border-bottom:3px solid transparent;box-sizing:border-box}
#siteswitch a:hover{color:#fff}#siteswitch a.on{color:#fff;border-bottom-color:#D72412}
#siteswitch b{font-weight:800}#siteswitch span{opacity:.75}#siteswitch i{width:1px;background:rgba(255,255,255,.18);margin:9px 4px}
@media(max-width:600px){#siteswitch span{display:none}#siteswitch .ss-in{justify-content:center}}
/* Build 281: one header everywhere. Sticky switcher + menu, account menu on the right of the switcher,
   phone menu behind the button, red Start free / Continue learning, footer like www. */
.sitehead{position:sticky;top:0;z-index:60}
html{scroll-padding-top:120px}
#siteswitch .acct-slot{margin-left:auto;display:flex;align-items:stretch}
#siteswitch .acct-in{color:#fff}
details.acct{position:relative;display:flex;align-items:stretch}
details.acct>summary{list-style:none;display:flex;align-items:center;gap:8px;padding:0 4px 0 12px;color:#fff;cursor:pointer;font-weight:700;height:34px}
details.acct>summary::-webkit-details-marker{display:none}
details.acct .av{width:22px;height:22px;border-radius:50%;background:var(--indigo);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;opacity:1}
details.acct .nm{opacity:1}details.acct .car{opacity:.7;font-size:11px}
details.acct .dot,.acct-menu .dot{display:inline-block;min-width:18px;height:18px;border-radius:9px;background:#E0301E;color:#fff;font-size:11px;line-height:18px;text-align:center;margin-left:6px;opacity:1}
.acct-menu{position:absolute;right:0;top:100%;width:250px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 14px 34px rgba(29,36,60,.18);padding:8px;z-index:70;font-size:14px;line-height:1.3}
.acct-menu .who{padding:10px 12px;border-bottom:1px solid var(--border);margin-bottom:4px;color:var(--muted);font-size:12.5px;word-break:break-all}
.acct-menu .who b{display:block;color:var(--ink);font-size:14px;word-break:normal}
#siteswitch .acct-menu a,.acct-menu a{display:flex!important;align-items:center;padding:10px 12px;color:var(--ink);font-weight:700;border-radius:8px;border:0;height:auto}
.acct-menu a:hover,.acct-menu button:hover{background:var(--soft)}
.acct-menu form{margin:4px 0 0;border-top:1px solid var(--border);padding-top:4px}
.acct-menu button{width:100%;text-align:left;background:none;border:0;padding:10px 12px;font:inherit;font-weight:700;color:var(--muted);border-radius:8px;cursor:pointer}
.nav a.cta{background:var(--navred)!important}.nav a.cta:hover{background:#b81e0f!important}
.navtoggle{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.navbtn{display:none}
@media (max-width:900px){
 .topbar .wrap{flex-wrap:nowrap!important;height:60px!important;padding:0 16px!important;justify-content:space-between;position:relative;gap:10px!important}
 .navbtn{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--border);border-radius:10px;cursor:pointer;color:var(--ink);background:#fff}
 .topbar .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0!important;background:#fff;border-bottom:1px solid var(--border);box-shadow:0 14px 30px rgba(29,36,60,.15);padding:6px 16px 14px;max-height:calc(100vh - 110px);overflow:auto}
 .navtoggle:checked~.nav{display:flex}
 .topbar .nav a{padding:13px 4px!important;border-bottom:1px solid var(--border);font-size:16px}
 .topbar .nav a.on{border-bottom:1px solid var(--border)!important;color:var(--navred);padding-bottom:13px!important}
 .topbar .nav a.cta{margin-top:12px;text-align:center;padding:12px!important;border:0}
 details.acct .nm,details.acct .car{display:none}
 .acct-menu{position:fixed;right:8px;left:auto;top:34px}
}
.foot2{padding:32px 0 26px;font-size:13px;color:var(--slate)}
.foot2 .brand{margin-bottom:12px}
.foot2 p{margin:0 0 12px;max-width:860px;line-height:1.6}
.foot2 .flinks a{color:var(--indigo);font-weight:600}
.foot2 .fsoc{display:flex;gap:22px;margin:8px 0 18px;flex-wrap:wrap}
.foot2 .fsoc a{display:flex;align-items:center;gap:9px;color:var(--slate);font-weight:700;font-size:12.5px;text-decoration:none}
.foot2 .fsoc .ic{display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(29,36,60,.14)}
.foot2 .flegal{border-top:1px solid var(--border);padding-top:14px;font-size:12px;color:var(--muted);max-width:none}

@media (max-width:600px){#siteswitch details.acct span.av{display:flex!important}#siteswitch .acct-menu span,#siteswitch details.acct span.dot{display:inline-block!important}#siteswitch .ss-in{justify-content:flex-start!important}#siteswitch .acct-slot{margin-left:auto}}
/* Build 284: Look inside cards with real screenshots. */
.card.look{padding:0;overflow:hidden;text-decoration:none;cursor:zoom-in}.card.look img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;border-bottom:1px solid var(--border)}.card.look h3{margin:14px 16px 4px}.card.look p{margin:0 16px 16px}
/* Build 285: the animated 4max wordmark (as on www: the Caveat M of Maximo turns into the 4 of 4max Ltd), with LEARNING PORTAL under it. */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.wmbrand{gap:0!important}.wm{display:inline-block;line-height:1;text-align:center;padding-top:8px}
.wm-word{display:inline-flex;align-items:baseline;font-weight:800;font-size:24px;letter-spacing:-.03em;color:var(--ink)}
.wm-slot{position:relative;display:inline-block;vertical-align:baseline;width:1.38em;animation:brandSlot .6s cubic-bezier(.33,1,.68,1) 1s forwards}
.wm-4{font-family:Style Script,cursive;font-size:1.95em;color:#e0301e;line-height:.55;margin-right:-.04em;display:inline-block;font-weight:400;animation:brandFadeIn .4s linear 1.15s both}
.wm-M{position:absolute;left:0;top:0;font-family:Caveat,cursive;font-weight:700;font-size:1.75em;line-height:.6;color:#e0301e;animation:brandFadeOut .4s linear 1s forwards}
.wm-m,.wm-imo,.wm-ltd{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:baseline}
.wm-m{animation:brandInM .6s cubic-bezier(.33,1,.68,1) 1.1s both}.wm-imo{animation:brandOutImo .6s cubic-bezier(.33,1,.68,1) 1.1s forwards}.wm-ltd{animation:brandInLtd .65s cubic-bezier(.33,1,.68,1) 1.4s both}
.wm-rule{display:block;height:2px;background:#e0301e;margin:4px 0 3px}
.wm-strap{display:block;overflow:hidden;height:14px}.wm-strap span{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;text-align:center;text-indent:.18em;color:var(--indigo);animation:brandDropIn .6s cubic-bezier(.33,1,.68,1) 1.75s both}
@keyframes brandFadeIn{0%{opacity:0}100%{opacity:1}}@keyframes brandFadeOut{0%{opacity:1}100%{opacity:0}}
@keyframes brandSlot{0%{width:1.38em}100%{width:.95em}}@keyframes brandDropIn{0%{transform:translateY(-150%);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes brandOutImo{0%{max-width:1.74em;opacity:1}100%{max-width:0;opacity:0}}@keyframes brandInM{0%{max-width:0;opacity:0}100%{max-width:.9em;opacity:1}}
@keyframes brandInLtd{0%{max-width:0;opacity:0}100%{max-width:1.66em;opacity:1}}
@media (prefers-reduced-motion:reduce){.wm *{animation-duration:.01s!important;animation-delay:0s!important}}
/* Build 286: the current page shows in red, as on www (menu, phone menu, account menu). */
.topbar .nav a.on{color:var(--navred)!important}.acct-menu a.on{color:var(--navred)!important}