/* 22Academy public.css v1.0, 25 September 2026 (package three, part 1).
   Loads on every page that is not an app page: fonts.css, tokens.css, base.css, then this file.
   It holds the public shell (header, footer, mobile menu) and the block library the public
   pages are built from (package three handover, section 5). Page templates add nothing
   inline; page-only rules come in the parts that carry those pages, at the end of this file.

   Every colour, size and radius comes from tokens.css. Class names follow the approved
   mockups so Denis can match class for class. Mockup-only helpers (frames, state labels)
   are not carried over. */

/* ======================================================================
   0. Page-wide rules (log 188: no word alone on a line; log 150: eyebrows)
   ====================================================================== */
main{overflow-x:clip}
main p,main li,main dd,main summary,main span,main em{text-wrap:pretty}
main h1,main h2,main h3,main b{text-wrap:balance}
.a22-display{text-wrap:balance}
.dm{overflow:visible}
[hidden]{display:none!important}

/* Eyebrow: 14 px, tracked .08em, the diamond at 18 by 10 (log 150). The word is not orange text on white
   in the accessibility sense: it is a label at 14 px bold, which the brief allows for orange from 24 px bold only.
   The mockups use orange here; the token is kept so one change moves every page. */
.kick{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--a22-orange)}
.kick .dm{width:18px;height:10px}
.kick--dark{color:var(--a22-orange)}
.lead{font-size:18px;color:var(--a22-soft);margin-left:auto;margin-right:auto}

/* Line icons (design assets, icons/). Stroke follows the surface. */
.ic{width:24px;height:24px;fill:none;stroke:var(--a22-navy);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic--s{width:18px;height:18px}
.ic--l{width:36px;height:36px;stroke:var(--a22-orange);stroke-width:1.6}
.ic--xl{width:56px;height:56px;stroke:var(--a22-orange);stroke-width:1.4}
.ic--w{width:40px;height:40px;stroke:var(--a22-orange)}
.ic--fill{fill:currentColor;stroke:none}

/* Buttons on navy: the secondary button gets a white border (handover 4.4). */
.on-dark{background:transparent!important;color:#fff!important;border-color:var(--a22-on-dark-border)!important}
.btns{display:flex;flex-wrap:wrap;gap:var(--a22-s3);justify-content:center}
.btns--l{justify-content:flex-start}
.lnk{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--a22-navy)}

.a22-imgph{background:var(--a22-surface-2);border-radius:var(--a22-r-card);width:100%;aspect-ratio:16/9;min-height:120px}
.contact .a22-imgph,.author .a22-imgph{aspect-ratio:1;border-radius:50%;min-height:0}
.contact .a22-imgph{width:120px;height:120px}
.author .a22-imgph{width:96px;height:96px}
.cc__i .a22-imgph,.tebox__ph .a22-imgph{height:100%;aspect-ratio:auto;border-radius:0}

/* Diamond bullets: the shape as a data URI, so no file lookup and one rule per list (base.css pointed at a
   file that is not in assets/; this replaces it on public pages). Ratio 1.776 to 1, always both sizes. */
.a22-list li::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1648 928'%3E%3Cpolygon points='168.1,464 824,94.7 1479.9,464 824,833.3' fill='none' stroke='%23000' stroke-width='165' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1648 928'%3E%3Cpolygon points='168.1,464 824,94.7 1479.9,464 824,833.3' fill='none' stroke='%23000' stroke-width='165' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
.tlist{margin:0 0 var(--a22-s4)}

/* ======================================================================
   1. Header (log 140, 145, 157, 206)
   88 px from 900 px, 64 px after 40 px of scroll (site.js adds .is-small) and on phones.
   ====================================================================== */
.a22-header{position:sticky;top:0;z-index:50;transition:height .2s ease}
.a22-header .a22-logo{height:48px;width:auto}
@media(min-width:900px){
  .a22-header{height:var(--a22-header-lg)}
  .a22-header.is-small{height:var(--a22-header)}
  .a22-header .a22-logo{height:56px;transition:height .2s ease}
  .a22-header.is-small .a22-logo{height:44px}
}
.a22-nav summary{display:inline-flex;align-items:center;gap:4px}
.caret{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.a22-nav__login{font-weight:600}
.a22-nav .a22-menu a b{font-weight:700}
/* Logged in: CONTINUE, capitals, orange underline (log 145) */
.nav-cont{font-weight:700!important;letter-spacing:.06em;text-decoration:underline!important;text-underline-offset:6px;text-decoration-thickness:2px!important;text-decoration-color:var(--a22-orange)!important}
/* Mobile menu: the same items; the certifications as a group */
.a22-mobile-menu .a22-mobile-menu__h{display:block;padding:12px 0 4px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--a22-on-dark-mut)}
.a22-mobile-menu .a22-btn{display:inline-flex;margin-top:var(--a22-s3);padding:0 var(--a22-s5);border-bottom:0;color:var(--a22-navy-deep)}
.a22-mobile-menu .nav-cont{color:#fff}

/* ======================================================================
   2. Footer (log 155, 206): four columns, one grid for both rows
   ====================================================================== */
.a22-footer{margin-top:0}
.a22-footer p{max-width:none}
.a22-footer a{text-decoration:none}
.a22-footer a:hover{text-decoration:underline}
.a22-footer .a22-logo{height:64px;margin-bottom:12px}
.fh{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:10px}
.fgrid{gap:var(--a22-s6)}
.soc{display:flex;gap:10px;margin-top:var(--a22-s3)}
.soc a{width:40px;height:40px;border-radius:50%;background:var(--a22-on-dark-fill);display:grid;place-items:center}
.soc svg{width:18px;height:18px;fill:#fff}
.a22-footer .wa{display:inline-flex;align-items:center;gap:6px}
.a22-footer .wa svg{width:16px;height:16px;fill:#fff}
.fbot{border-top:1px solid var(--a22-on-dark-line);margin-top:var(--a22-s6);padding-top:var(--a22-s4);display:grid;gap:var(--a22-s2);font-size:13px;color:var(--a22-on-dark-mut)}
.a22-footer .fgrid{grid-template-columns:1fr}
@media(min-width:900px){
  .a22-footer .fgrid,.a22-footer .fbot{grid-template-columns:1.2fr 1fr 1fr 1.2fr;gap:var(--a22-s6)}
  .a22-footer .fbot>*:nth-child(2){grid-column:2 / span 2}
}

/* ======================================================================
   3. Bands: the vertical rhythm of every public page (log 143: 144 px desktop, 96 px phone)
   ====================================================================== */
.band{padding:96px 0}
@media(min-width:900px){.band{padding:120px 0}}
.band--white{background:#fff}
.band--grey{background:var(--a22-surface)}
.band--navy{background:var(--a22-navy);color:var(--a22-on-dark)}
.band--navy h2,.band--navy h3{color:#fff}
.band h2{margin-top:0}
.band .lead{font-size:17px;color:var(--a22-soft);max-width:60ch;margin-bottom:var(--a22-s5)}
@media(min-width:900px){.band .lead{font-size:19px}}
.band--navy .lead{color:var(--a22-on-dark)}
.band--q{padding:72px 0}
@media(min-width:900px){.band--q{padding:96px 0}}
.band--q .deco--c{opacity:.08}
.band.deco-host,.deco-host,.strip-band{position:relative;overflow:hidden}
.strip-band .a22-wrap,.deco-host>.a22-wrap{position:relative}
.pick{padding:72px 0}
@media(min-width:900px){.pick{padding:96px 0}}
.pick--navy{background:var(--a22-navy)}
.pick--navy .picker h2{color:#fff}.pick--navy .picker p{color:var(--a22-on-dark)}
.picker{text-align:center}.picker h2{margin:6px 0 8px}.picker p{margin:0 auto var(--a22-s4);color:var(--a22-soft)}

/* The outlined pair behind a band (brief 11, log 94, 95): about 9 percent, never a photo */
.deco{position:absolute;pointer-events:none;height:auto}
.deco--r{width:62%;right:-12%;top:50%;transform:translateY(-50%);opacity:.09}
.deco--l{width:58%;left:-14%;bottom:-20%;opacity:.09}
.deco--c{width:min(820px,70%);left:50%;top:50%;transform:translate(-50%,-50%);opacity:.14}
.deco--pr{position:absolute;right:-18%;top:50%;transform:translateY(-50%);width:78%;max-width:1100px;opacity:.09;pointer-events:none}
@media(max-width:899px){.deco--pr{width:160%;right:-70%}}
@media(max-width:599px){.deco--r,.deco--l{width:130%;opacity:.07}.deco--c{width:130%;opacity:.07}}

/* ======================================================================
   4. Heroes
   ====================================================================== */
/* hero: navy, text left, image or panel right (home, how it works, pricing, career plan, role page) */
.hero{background:var(--a22-navy);color:#fff;padding:var(--a22-s7) 0;overflow:hidden;position:relative}
@media(min-width:900px){.hero{padding:var(--a22-s8) 0 var(--a22-s9)}}
.hero__in{display:grid;gap:var(--a22-s6);align-items:center;position:relative}
@media(min-width:900px){.hero__in{grid-template-columns:1.25fr 1fr}}
.hero .kick{margin-bottom:10px}
.hero .a22-display{color:#fff;max-width:none;margin-bottom:var(--a22-s4)}
.hero p{color:var(--a22-on-dark);font-size:17px;max-width:44ch}
@media(min-width:900px){.hero p{font-size:19px}}
.hero__p{text-wrap:balance}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--a22-s3);margin:var(--a22-s5) 0 var(--a22-s4)}
.hero__cta .a22-btn--secondary{background:transparent;color:#fff;border-color:var(--a22-on-dark-border)}
.hero__cta .a22-btn--secondary:hover{background:var(--a22-on-dark-fill)}
@media(max-width:599px){.hero__cta .a22-btn{width:100%}}
.hero__img{position:relative}
.hero__img img{width:100%;height:auto;display:block}
/* Every hero with the diamond photo (home, certification pages, career plan; Denis, 1 Oct): the photo takes the larger column and runs close to the text. Heroes with a chart or panel instead keep their layout. */
@media(min-width:900px){.hero__in:has(> .hero__img){grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:var(--a22-s5)}}
.hero__chart img{width:100%;height:auto;display:block;border-radius:14px;box-shadow:var(--a22-shadow-deep)}
.genlbl{position:absolute;right:8px;bottom:0;font-size:11px;color:var(--a22-on-dark-mut);letter-spacing:.04em}
.band--white .genlbl{color:var(--a22-muted)}
/* hero--c: centred navy with the outlined pair behind (certifications, FAQ) */
.hero--c{padding:var(--a22-s7) 0;position:relative;overflow:hidden;text-align:center}
@media(min-width:900px){.hero--c{padding:var(--a22-s8) 0}}
.hero--c .hero__c{position:relative;max-width:820px;margin:0 auto}
.hero--c .a22-micro{color:var(--a22-on-dark-mut);display:block;margin-bottom:8px}
.hero--c .a22-display{max-width:none}
.hero--c p{margin-left:auto;margin-right:auto;color:var(--a22-on-dark);font-size:19px;max-width:56ch}
@media(max-width:599px){.hero--c .a22-display{font-size:27px}}
.assess{display:flex;flex-wrap:wrap;gap:var(--a22-s3);margin-top:var(--a22-s5);justify-content:center}
@media(max-width:599px){.assess{flex-direction:column}.assess .a22-btn{width:100%}}

/* ======================================================================
   5. Prose block (home "What 22Academy is", how it works "Why we rebuilt it")
   ====================================================================== */
.prose{position:relative;overflow:hidden}
.prose .prose__in{position:relative;max-width:760px}
.prose__lead{font-size: 24px !important;line-height: 1.45 !important;color:var(--a22-soft);margin:10px 0 var(--a22-s5);text-wrap:balance;max-width:none}
@media(min-width:900px){.prose__lead{font-size: 28px !important;}}
.prose__lead b{color:var(--a22-navy)}
.prose__lead--end{margin-top:var(--a22-s5)!important;margin-bottom:var(--a22-s5)!important}
.prose p{font-size:18px;line-height:1.7;max-width:68ch}
.stmt{padding:96px 0}
.stmt__p{font-size:24px;line-height:1.45;color:var(--a22-soft);text-align:center;max-width:36ch;margin:0 auto var(--a22-s5);text-wrap:balance}
@media(min-width:900px){.stmt__p{font-size:30px}}
.stmt__p b{color:var(--a22-navy);font-weight:700}
.pull{margin:var(--a22-s5) 0;padding:0 0 0 var(--a22-s5);border-left:4px solid var(--a22-orange);font-size:22px;line-height:1.35;font-weight:600;color:var(--a22-navy);max-width:34ch}
@media(min-width:900px){.pull{font-size:26px;max-width:40ch}}

/* ======================================================================
   6. USP rows, screenshots, feature bands
   ====================================================================== */
.usp{display:grid;gap:var(--a22-s6);align-items:center}
@media(min-width:900px){.usp{grid-template-columns:1.05fr 1fr;gap:var(--a22-s8)}.usp--flip .shot,.usp--flip .shot2{order:2}}
.usp h2{margin:8px 0 var(--a22-s3);text-wrap:balance}
.usp p{color:var(--a22-soft)}
.usp__t p{font-size:19px}
.usp--port{grid-template-columns:1fr}
@media(min-width:900px){.usp--port{grid-template-columns:420px 1fr}}
.usp--port img{border-radius:var(--a22-r-card);width:100%;height:auto;display:block}
.shot2{margin:0}
.shot2 img{width:100%;height:auto;display:block;border-radius:var(--a22-r-card)}
.shot2--win img{border-radius:14px;box-shadow:var(--a22-shadow-deep);border:1px solid var(--a22-line)}
.cap{margin-top:10px;font-size:14px;color:var(--a22-muted);font-style:italic}
.ph{width:100%;height:auto;display:block;border-radius:var(--a22-r-card)}
.split{display:grid;gap:var(--a22-s5);align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:var(--a22-s7)}}
.split .pair{width:48px;height:23px}
/* fshot: the whole app screenshot with the message in a framed white box over it; stacks on a phone (log 143) */
.fshot{position:relative;max-width:1100px;margin:0 auto;border-radius:14px;overflow:hidden;box-shadow:var(--a22-shadow-deep);border:1px solid var(--a22-line);background:#fff}
.fshot img{width:100%;height:auto;display:block}
.fshot::after{content:"";position:absolute;left:0;right:0;top:22%;height:48%;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);background:rgba(255,255,255,.35);pointer-events:none}
.fshot__over{position:absolute;z-index:2;left:50%;transform:translateX(-50%);top:26%;width:min(560px,70%);padding:var(--a22-s5) var(--a22-s7);text-align:center;background:#fff;border:2px solid var(--a22-navy);border-radius:14px;box-shadow:var(--a22-shadow-deep)}
.fshot__over h2{margin:8px 0 var(--a22-s2)}
.fshot__over p{color:var(--a22-soft);font-size:18px;max-width:46ch;margin-left:auto;margin-right:auto}
.fshot__over .btns--l{justify-content:center}
@media(max-width:899px){.fshot::after{display:none}.fshot__over{position:relative;left:auto;transform:none;width:auto;top:auto;margin:-40px 12px 12px;border-radius:12px;padding:var(--a22-s5)}}
/* orncard: a card with the pair in its corner (feature text beside a photo) */
.orncard{position:relative;background:var(--a22-surface);border-radius:var(--a22-r-card);padding:var(--a22-s5);max-width:520px}
.orncard .pair{position:absolute;right:16px;top:16px;width:64px;height:31px}
.orncard h3{margin-top:0}
.feat3{display:grid;gap:var(--a22-s5)}
@media(min-width:900px){.feat3{grid-template-columns:repeat(3,1fr);gap:var(--a22-s6)}}
.feat3 h3{margin:var(--a22-s3) 0 4px}.feat3 p{margin:0;color:var(--a22-soft)}

/* ======================================================================
   7. Claims, numbers, steps
   ====================================================================== */
.claims3{display:grid;gap:var(--a22-s5);margin-top:var(--a22-s5)}
@media(min-width:900px){.claims3{grid-template-columns:repeat(3,1fr);gap:var(--a22-s7)}}
.claims3 h3{margin:var(--a22-s3) 0 6px;font-size:21px}
.claims3 p{color:var(--a22-soft);margin:0}
.claims3 .ic{stroke:var(--a22-orange)}
.usps{display:grid;gap:var(--a22-s5)}
@media(min-width:600px){.usps{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.usps{grid-template-columns:repeat(4,1fr)}}
.usps .dm{width:22px;height:12.4px;margin-bottom:8px}
.usps h3{margin:0 0 4px;font-size:18px}.usps p{margin:0;color:var(--a22-soft);font-size:16px}
.usps--3{grid-template-columns:1fr}
@media(min-width:600px){.usps--3{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.usps--3{grid-template-columns:repeat(3,1fr);gap:var(--a22-s6) var(--a22-s5)}}
.usps--3 h3{font-size:19px}
/* navy number strip (home) */
.strip{display:grid;grid-template-columns:1fr 1fr;gap:var(--a22-s5);text-align:center}
@media(min-width:900px){.strip{grid-template-columns:repeat(4,1fr)}}
.strip>div{display:grid;justify-items:center;align-content:start}
.strip b{display:block;font-size:44px;line-height:1.1;color:#fff;margin-top:8px;font-variant-numeric:tabular-nums}
.strip span{color:var(--a22-on-dark-mut);font-size:14px}
@media(max-width:599px){.strip span{white-space:nowrap;font-size:13px}}
/* stat tiles with an icon, a number and a unit (exam facts) */
.stats{display:grid;gap:var(--a22-s3)}
@media(min-width:600px){.stats{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.stats{grid-template-columns:repeat(3,1fr);gap:var(--a22-s4)}}
.stat{display:grid;grid-template-columns:40px 1fr auto;gap:var(--a22-s3);align-items:center;background:var(--a22-surface);border-radius:var(--a22-r-card);padding:var(--a22-s4) var(--a22-s5)}
.stat b{font-size:36px;line-height:1;color:var(--a22-navy);font-variant-numeric:tabular-nums}
.stat .u{display:block;font-weight:600;color:var(--a22-ink);font-size:15px}.stat .s{display:block;font-size:13px;color:var(--a22-soft)}
.facts{list-style:none;padding:0;margin:0 0 var(--a22-s3);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--a22-s3);max-width:none}
.facts li{background:#fff;border:1px solid var(--a22-line);border-radius:var(--a22-r-card);padding:14px 12px;text-align:center}
.facts b{display:block;font-size:30px;line-height:1.1;color:var(--a22-navy)}
.facts span{font-size:13px;color:var(--a22-soft)}
.bignum{background:var(--a22-blue-soft);border-radius:var(--a22-r-card);padding:var(--a22-s6);text-align:center}
.bignum b{display:block;font-size:88px;line-height:1;color:var(--a22-navy);font-variant-numeric:tabular-nums}
.bignum span{color:var(--a22-soft)}
.ncards{display:grid;gap:var(--a22-s4)}
@media(min-width:600px){.ncards{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.ncards{grid-template-columns:repeat(4,1fr)}}
.ncards>div{background:#fff;border-radius:var(--a22-r-card);padding:var(--a22-s5)}
.nc{display:block;font-size:40px;font-weight:700;color:var(--a22-orange);line-height:1}
.ncards b{display:block;margin:8px 0 4px;color:var(--a22-navy)}.ncards p{margin:0;color:var(--a22-soft);font-size:15px}
/* bars and rings that fill once (site.js), on the darker track (log 130) */
.tb{width:56px;height:8px;border-radius:4px;background:var(--a22-track);overflow:hidden;align-self:center}
.tb i{display:block;height:100%;width:0;background:var(--a22-orange);transition:width .9s ease-out}
.ring{width:48px;height:48px}.ring__v{transition:stroke-dasharray 1s ease-out}
.wbars{display:grid;gap:var(--a22-s3);max-width:760px}
.wb{display:grid;grid-template-columns:32px minmax(0,1fr) 90px;gap:4px var(--a22-s3);align-items:center}
@media(min-width:600px){.wb{grid-template-columns:32px 220px 1fr 90px}}
.wb__n{width:32px;height:32px;border-radius:50%;background:var(--a22-navy);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.wb__t{font-weight:600}
.wb__v{white-space:nowrap;text-align:right;font-weight:700;color:var(--a22-navy);font-variant-numeric:tabular-nums}
.wb__b{height:12px;border-radius:6px;background:var(--a22-track);overflow:hidden;grid-column:2/-1}
@media(min-width:600px){.wb__b{grid-column:auto}}
.wb__b i{display:block;height:100%;width:0;background:var(--a22-navy);border-radius:6px;transition:width .9s ease-out}
.wb--hi .wb__b i{background:var(--a22-orange)}
/* steps: four across (steps5), stacked with the number beside (steps6); the last step is orange (Certify) */
.steps5{list-style:none;padding:0;margin:var(--a22-s4) 0 var(--a22-s6);display:grid;gap:var(--a22-s5);counter-reset:s;max-width:none;align-items:start}
@media(min-width:900px){.steps5{grid-template-columns:repeat(4,1fr);gap:var(--a22-s6)}}
.steps5 li{counter-increment:s;display:grid;gap:8px;align-content:start}
.steps5 li::before{content:counter(s);width:52px;height:52px;border-radius:50%;background:var(--a22-navy);color:#fff;display:grid;place-items:center;font-weight:700;font-size:20px}
.steps5 li.is-last::before{background:var(--a22-orange)}
.steps5 b{font-size:24px;color:var(--a22-navy)}.steps5 span{color:var(--a22-soft);font-size:17px}
.steps6{list-style:none;padding:0;margin:var(--a22-s4) 0 var(--a22-s5);display:grid;gap:var(--a22-s5);counter-reset:s;max-width:none}
.steps6 li{counter-increment:s;display:grid;grid-template-columns:52px 1fr;gap:4px var(--a22-s4);align-items:start}
.steps6 li::before{content:counter(s);grid-row:1/3;width:52px;height:52px;border-radius:50%;background:var(--a22-navy);color:#fff;display:grid;place-items:center;font-weight:700;font-size:20px}
.steps6 li.is-last::before{background:var(--a22-orange)}
.steps6 b{font-size:24px;color:var(--a22-navy);line-height:1.2}.steps6 span{color:var(--a22-soft);font-size:17px}
/* step marker for the how-it-works sections (log 172): a large orange circle with the number and the step name */
.stepmark{display:inline-flex;align-items:center;gap:var(--a22-s3);margin-bottom:var(--a22-s3)}
.stepmark i{width:52px;height:52px;border-radius:50%;background:var(--a22-orange);color:var(--a22-navy-deep);display:grid;place-items:center;font-style:normal;font-weight:700;font-size:22px}
.stepmark b{font-size:20px;color:var(--a22-navy)}

/* ======================================================================
   8. Slim banners (log 161): full width; icon left and button right mark the edges of a centred row
   ====================================================================== */
.slim{background:var(--a22-navy);color:#fff;padding:var(--a22-s5) 0}
.slim__in{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:var(--a22-s6);max-width:1080px;margin:0 auto;text-align:center}
.slim p{flex:1;min-width:0;margin:0;font-size:20px;font-weight:600;color:#fff;max-width:none;text-wrap:balance}
@media(min-width:900px){.slim p{font-size:24px}}
.slim .ic{stroke:var(--a22-orange)}
.slim .a22-btn{flex:none}
@media(max-width:699px){.slim__in{flex-direction:column;gap:var(--a22-s3)}.slim .a22-btn{width:100%}}
.slim--light{background:var(--a22-surface-2)}
.slim--light p{color:var(--a22-navy)}
.slim--light .ic{stroke:var(--a22-orange)}

/* ======================================================================
   9. Closing band (C1) and the saying band
   ====================================================================== */
.ctab{text-align:center;position:relative}
.ctab h2{margin:0 0 var(--a22-s2)}
.ctab p{color:var(--a22-on-dark);max-width:60ch;margin:0 auto var(--a22-s4)}
.ctab .a22-row,.ctab .btns{justify-content:center;position:relative}
.ctab .a22-btn--secondary{background:transparent;color:#fff;border-color:var(--a22-on-dark-border)}
.saying{text-align:center}
.saying__p{font-size:30px;line-height:1.25;font-weight:700;color:#fff;max-width:22ch;margin:0 auto var(--a22-s5);text-wrap:balance;position:relative}
@media(min-width:900px){.saying__p{font-size:44px}}
.saying .btns{position:relative}
.saying--light .saying__p{color:var(--a22-navy)}

/* ======================================================================
   10. Reviews (log 75, 142): three side by side, real quotes only; one big quote; the small review
   ====================================================================== */
.rv3{position:relative;display:grid;gap:var(--a22-s5)}
@media(min-width:900px){.rv3{grid-template-columns:repeat(3,1fr)}}
.rv3__i{margin:0;background:#fff;border-radius:var(--a22-r-card);box-shadow:var(--a22-shadow);padding:var(--a22-s5);display:flex;flex-direction:column;gap:var(--a22-s3)}
.rv3__i blockquote{margin:0}
.rv3__i p{font-size:18px;line-height:1.45;font-weight:600;color:var(--a22-navy);margin:0}
.rv3__i figcaption{color:var(--a22-soft);font-size:15px}
.rv3__i .a22-btn{margin-top:auto;align-self:flex-start}
.bq{margin:0 auto var(--a22-s4);max-width:760px;text-align:center}
.bq p{font-size:24px;line-height:1.4;font-weight:600;color:var(--a22-navy);margin:0 0 10px;max-width:none;text-wrap:balance}
@media(min-width:900px){.bq p{font-size:28px}}
.bq footer{color:var(--a22-soft);font-size:15px}
.rev{margin:var(--a22-s4) 0 0;padding:var(--a22-s4) var(--a22-s5);background:#fff;border-left:4px solid var(--a22-orange);border-radius:0 var(--a22-r-card) var(--a22-r-card) 0;max-width:60ch}
.rev p{margin:0 0 6px;font-weight:500}
.rev footer{font-size:14px;color:var(--a22-soft)}
.rev--big{max-width:none;background:var(--a22-blue-soft)}
.rev--big p{font-size:20px}

/* ======================================================================
   11. Author, contact and organisation blocks (log 138, 172, 216)
   ====================================================================== */
.author{display:grid;gap:var(--a22-s5);align-items:center;max-width:820px;margin:0 auto}
@media(min-width:600px){.author{grid-template-columns:96px 1fr}}
.author img{width:96px;height:96px;border-radius:50%;object-fit:cover;display:block}
.author h3{margin:6px 0 6px;font-size:22px}
.author p{color:var(--a22-soft);margin:0 0 var(--a22-s3)}
.author--s{max-width:none;margin:0}
.contact{display:grid;grid-template-columns:120px 1fr;gap:var(--a22-s6);align-items:center;max-width:860px;margin:0 auto}
.contact img{width:120px;height:120px;border-radius:50%;object-fit:cover}
.contact h2{margin:0 0 var(--a22-s2)}
.contact p{color:var(--a22-soft);font-size:18px}
.contact .a22-btn .ic{width:18px;height:18px;stroke:currentColor}
.contact .a22-btn.wa svg{width:18px;height:18px;fill:currentColor}
.contact .btns .a22-btn{gap:8px}
@media(max-width:599px){.contact{grid-template-columns:1fr;justify-items:start}}

/* ======================================================================
   12. Grids of certifications and roles (home, career plan)
   ====================================================================== */
.cg{display:grid;gap:var(--a22-s3)}
@media(min-width:600px){.cg{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.cg{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.cg{grid-template-columns:repeat(3,1fr)}}
.cg__i{display:grid;gap:4px;background:#fff;border:2px solid var(--a22-navy);border-radius:var(--a22-r-card);padding:var(--a22-s4);text-decoration:none;transition:border-color .15s,background .15s}
.cg__i:hover{border-color:var(--a22-orange)}
.cg__i b{font-size:21px;color:var(--a22-navy)}
.cg__i span{color:var(--a22-soft);font-size:15px}
.cg__i em{font-style:normal;font-size:13px;font-weight:600;color:var(--a22-navy);text-decoration:underline;text-underline-offset:3px}
.cg__i--navy{background:var(--a22-navy);border-color:var(--a22-navy)}
.cg__i--navy b,.cg__i--navy em{color:#fff}
.cg__i--navy span{color:var(--a22-on-dark)}
.cg__i.is-soon{border-style:dashed;border-color:var(--a22-line);cursor:default}
.cg__i.is-soon:hover{border-color:var(--a22-line)}
.cg__i.is-soon em{color:var(--a22-muted)}
.rl{display:grid;gap:8px;margin:var(--a22-s3) 0 var(--a22-s4)}
@media(min-width:600px){.rl{grid-template-columns:1fr 1fr}}
.rl--3{grid-template-columns:1fr}
@media(min-width:600px){.rl--3{grid-template-columns:repeat(3,1fr)}}
.rl--stack{grid-template-columns:1fr!important}
.rl__i{display:flex;flex-direction:column;background:var(--a22-surface);border-radius:var(--a22-r-control);padding:14px 16px;text-decoration:none;border:1.5px solid transparent;transition:background .15s,border-color .15s}
.rl__i b{color:var(--a22-navy);font-size:16px;line-height:1.25;white-space:nowrap}
.rl__i span{font-size:15px;color:var(--a22-soft);font-weight:600;margin-top:auto;padding-top:4px}
.rl__pay{font-size:20px!important;font-weight:700;color:var(--a22-navy)!important}
.rl__i:hover{background:#fff;border-color:var(--a22-navy)}
.rl__i:hover b{text-decoration:underline;text-underline-offset:3px}

/* ======================================================================
   13. Content structures instead of tables (log 96): definition pairs, timeline, comparison, tips, traps, sample question
   ====================================================================== */
.dl2{display:grid;gap:var(--a22-s4);margin:0}
@media(min-width:900px){.dl2{grid-template-columns:1fr 1fr;gap:var(--a22-s4) var(--a22-s7)}}
.dl2 div{border-left:3px solid var(--a22-orange);padding-left:var(--a22-s4)}
.dl2 dt{font-weight:700;color:var(--a22-navy)}.dl2 dd{margin:4px 0 0;color:var(--a22-soft)}
.tl{list-style:none;margin:0;padding:0 0 0 28px;position:relative;max-width:none}
.tl::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--a22-line)}
.tl li{position:relative;display:grid;grid-template-columns:1fr auto;gap:2px var(--a22-s3);margin-bottom:var(--a22-s4)}
.tl li::before{content:"";position:absolute;left:-27px;top:5px;width:20px;height:11px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1648 928'%3E%3Cpolygon points='168.1,464 824,94.7 1479.9,464 824,833.3' fill='%23fff' stroke='%23E8641C' stroke-width='165' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
.tl b{color:var(--a22-ink);font-weight:600}
.tl__d{grid-column:1/-1;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--a22-orange)}
.tl__h{font-weight:700;color:var(--a22-navy)}
.cmp3{display:grid;gap:var(--a22-s4)}
@media(min-width:900px){.cmp3{grid-template-columns:repeat(3,1fr)}}
.cmp3>div{background:var(--a22-surface);border-radius:var(--a22-r-card);padding:var(--a22-s5)}
.cmp3>div.hi{background:var(--a22-blue-soft)}
.cmp3 .kick{font-size:20px;letter-spacing:0;text-transform:none;color:var(--a22-navy)}
.cmp3 b{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--a22-muted)}
.tips{display:grid;gap:var(--a22-s4);margin:0 0 var(--a22-s5)}
@media(min-width:600px){.tips{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.tips{grid-template-columns:repeat(4,1fr)}}
.tips div{background:#fff;border-radius:var(--a22-r-card);padding:var(--a22-s4)}
.tips .dm{width:18px;height:10px;margin-bottom:6px}
.tips b{display:block;color:var(--a22-navy)}
.tips p{margin:4px 0 0;color:var(--a22-soft);font-size:15px}
.trap{display:flex;gap:var(--a22-s3);background:var(--a22-warm);border-radius:var(--a22-r-card);padding:var(--a22-s3) var(--a22-s4);margin:0 0 var(--a22-s3)}
.trap .dm{width:18px;height:10px;flex:none;margin-top:6px}
.trap .ic{stroke:var(--a22-orange)}
.trap b{color:var(--a22-navy)}
.trap p{margin:2px 0 0;font-size:15px;color:var(--a22-soft)}
.qt{background:#fff;border-radius:var(--a22-r-card);padding:var(--a22-s5);max-width:760px;box-shadow:var(--a22-shadow)}
.qt .stem{font-weight:600;margin:8px 0 var(--a22-s3)}
.qt__o{display:flex;gap:8px;margin-bottom:var(--a22-s3)}
.qt__o span{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--a22-line);display:grid;place-items:center;font-weight:700;color:var(--a22-soft)}
.istrip{display:flex;flex-wrap:wrap;align-items:center;gap:var(--a22-s3);background:var(--a22-blue-soft);border-radius:var(--a22-r-card);padding:var(--a22-s4) var(--a22-s5)}
.istrip span{flex:1;min-width:200px}
.pcard{display:grid;gap:var(--a22-s4);align-items:center;background:#fff;border:2px solid var(--a22-orange);border-radius:var(--a22-r-card);padding:var(--a22-s5);max-width:720px;position:relative;margin-top:var(--a22-s5)}
@media(min-width:600px){.pcard{grid-template-columns:auto 1fr auto}}
.pcard .pair{width:56px;height:27px}
.pp{display:block;font-size:40px;color:var(--a22-navy);line-height:1.1}.pp small{font-size:16px;color:var(--a22-soft);font-weight:500}
.pcard p{margin:0;color:var(--a22-soft)}
.pcta{position:relative}
.pcta .ph{min-height:320px;object-fit:cover}
.pcta__p{background:var(--a22-navy-deep);color:var(--a22-on-dark);border-radius:var(--a22-r-card);padding:var(--a22-s5);margin:-60px var(--a22-s4) 0;position:relative}
@media(min-width:900px){.pcta__p{position:absolute;right:var(--a22-s6);bottom:var(--a22-s6);margin:0;max-width:380px}}
.pcta__p h3{color:#fff;margin-top:0}.pcta__p p{color:var(--a22-on-dark)}

/* ======================================================================
   14. Fold-outs (FAQ, guide FAQ, role FAQ): details elements; one open at a time (site.js); answers stay in the HTML
   ====================================================================== */
.fq{background:#fff;border:var(--a22-border);border-radius:var(--a22-r-card);padding:0 var(--a22-s5);margin:0 0 var(--a22-s2)}
.fq summary{cursor:pointer;font-weight:600;min-height:52px;display:flex;align-items:center;color:var(--a22-navy);list-style:none}
.fq summary::-webkit-details-marker{display:none}
.fq p{margin:0 0 var(--a22-s4);color:var(--a22-soft)}
.fq2{background:#fff;border-radius:var(--a22-r-card);padding:var(--a22-s4) var(--a22-s5);box-shadow:var(--a22-shadow);margin:0 0 var(--a22-s3)}
.fq2 summary{cursor:pointer;font-weight:700;color:var(--a22-navy);list-style:none;display:flex;justify-content:space-between;gap:var(--a22-s3);min-height:44px;align-items:center}
.fq2 summary::-webkit-details-marker{display:none}
.fq2 summary::after{content:"+";color:var(--a22-orange);font-size:22px;line-height:1}
.fq2[open] summary::after{content:"\2212"}
.fq2 p{margin:var(--a22-s3) 0 0;color:var(--a22-soft);font-size:16px;line-height:1.65}
.fq2 p a{color:var(--a22-navy);font-weight:600}
.jump{border:var(--a22-border);border-radius:var(--a22-r-control);max-width:360px;background:#fff}
.jump summary{display:flex;align-items:center;gap:8px;padding:10px 14px;cursor:pointer;font-weight:600;color:var(--a22-navy);list-style:none}
.jump summary::-webkit-details-marker{display:none}
.jump div{display:grid;padding:0 14px 10px}.jump div a{padding:6px 0}

/* ======================================================================
   15. Popup (choose how you pay, state C; log 211) and the sticky bar (guide)
   ====================================================================== */
.a22-popup{position:fixed;inset:0;z-index:70;display:none;place-items:center;background:rgba(15,29,51,.72);padding:var(--a22-gutter)}
.a22-popup[data-open="1"]{display:grid}
.a22-popup__box{background:#fff;border-radius:var(--a22-r-card);padding:var(--a22-s6);max-width:440px;width:100%;text-align:center;box-shadow:var(--a22-shadow)}
.a22-popup__box h2{margin:0 0 var(--a22-s3)}
.stickybar{position:sticky;bottom:0;z-index:40;background:var(--a22-white);border-top:var(--a22-border);padding:10px var(--a22-gutter);display:flex;flex-wrap:wrap;align-items:center;gap:var(--a22-s2) var(--a22-s3);font-size:14px}
.stickybar span{flex:1;min-width:160px}

/* ======================================================================
   16. Reduced motion: bars, rings and the header keep their end state
   ====================================================================== */
@media(prefers-reduced-motion:reduce){.tb i,.wb__b i,.ring__v,.a22-header,.a22-header .a22-logo,.cg__i,.rl__i{transition:none}}

/* ======================================================================
   P2. /start-free/ (r18, package three part 2)
   ====================================================================== */
.rg{background:var(--a22-surface);padding:var(--a22-s8) 0}
.rg__in{display:grid;gap:var(--a22-s7);align-items:start;grid-template-areas:"h" "f" "s"}
.rg__h{grid-area:h}.rg__f{grid-area:f}.rg__st{grid-area:s}
@media(min-width:900px){.rg__in{grid-template-columns:1fr 480px;gap:var(--a22-s8);grid-template-areas:"h f" "s f";grid-template-rows:auto 1fr;row-gap:0}}
.rg h1{margin:8px 0 var(--a22-s3)}
.rg__lead{font-size:19px;color:var(--a22-soft)}
.rg__s{list-style:none;padding:0;margin:var(--a22-s5) 0;display:grid;gap:var(--a22-s4);max-width:none}
.rg__s li{display:grid;grid-template-columns:40px 1fr;gap:var(--a22-s3);align-items:start}
.rg__s .ic{stroke:var(--a22-orange)}
.rg__s b{display:block;color:var(--a22-navy);font-size:18px}
.rg__s span{color:var(--a22-soft)}
.rg__f{background:#fff;border-radius:var(--a22-r-card);box-shadow:var(--a22-shadow);padding:var(--a22-s6)}
.rg__f .a22-check span{color:var(--a22-soft)}
.rg__sel{appearance:auto;font-weight:600;color:var(--a22-navy)}
.rg__in2{text-align:center;color:var(--a22-soft);font-size:15px;margin:var(--a22-s3) 0 0}

/* ======================================================================
   P3. Choose how you pay (r19), the paywall (r20), 404 (r25), FAQ (r22), legal (r23)
   ====================================================================== */
/* choose how you pay */
.sp{background:var(--a22-surface);padding:var(--a22-s8) 0}
.sp__in{max-width:860px}
.sp h1{margin:8px 0 var(--a22-s3)}
.sp__lead{color:var(--a22-soft);font-size:18px;max-width:60ch}
.sp__info{background:var(--a22-blue-soft);border-radius:var(--a22-r-control);padding:var(--a22-s3) var(--a22-s4);margin:var(--a22-s3) 0}
.sp__info a{color:var(--a22-navy);font-weight:600}
.sp__o{display:grid;gap:var(--a22-s4);margin-top:var(--a22-s5)}
@media(min-width:700px){.sp__o{grid-template-columns:1fr 1fr}}
.sp__foot{text-align:center;color:var(--a22-muted);font-size:14px;margin:var(--a22-s5) auto 0;max-width:none}
.po{position:relative;background:#fff;border:1.5px solid var(--a22-line);border-radius:var(--a22-r-card);padding:var(--a22-s5);display:flex;flex-direction:column;gap:6px}
.po--hl{border:2px solid var(--a22-blue);background:var(--a22-blue-soft)}
.po__tag{position:absolute;top:-12px;right:var(--a22-s4);background:var(--a22-orange);color:#fff;font-size:13px;font-weight:700;border-radius:var(--a22-r-pill);padding:3px 10px}
.po>b{font-size:19px;color:var(--a22-navy)}
.po__p{font-size:36px;font-weight:700;color:var(--a22-navy);margin:0;line-height:1.1}
.po__p span{font-size:17px;font-weight:500;color:var(--a22-soft)}
.po p{margin:0 0 var(--a22-s2);color:var(--a22-soft)}
.po__inc{color:var(--a22-navy)!important;font-weight:600}
.po .a22-btn{margin-top:auto}
.spm{max-width:420px}
.spm .btns{justify-content:center}
/* paywall */
.pw{background:var(--a22-surface);padding:var(--a22-s8) 0}
.pw__in{max-width:640px;background:#fff;border-radius:var(--a22-r-card);box-shadow:var(--a22-shadow);padding:var(--a22-s6)}
@media(max-width:599px){.pw__in{margin:0 var(--a22-gutter);padding:var(--a22-s5)}}
.pw h1{margin:8px 0 var(--a22-s4);font-size:30px}
.pw__c{display:flex;justify-content:space-between;gap:var(--a22-s3);background:var(--a22-surface);border-radius:var(--a22-r-control);padding:var(--a22-s3) var(--a22-s4);margin-bottom:var(--a22-s4)}
.pw__c span{color:var(--a22-soft)}
.pw__c b{color:var(--a22-navy)}
@media(max-width:599px){.pw__c{flex-direction:column;gap:2px}}
.pw__t{color:var(--a22-ink);font-size:17px;max-width:none}
.pw .a22-btn--block{margin-top:var(--a22-s2)}
.pw__n{text-align:center;color:var(--a22-muted);font-size:14px;margin:var(--a22-s3) 0 0;max-width:none}
/* 404 */
.nf{position:relative;overflow:hidden;background:var(--a22-surface);padding:var(--a22-s9) 0;text-align:center}
.nf .deco--c{opacity:.08}
.nf__in{position:relative;max-width:640px}
.nf h1{margin:8px 0 var(--a22-s3)}
.nf p{color:var(--a22-soft);font-size:19px;margin:0 auto var(--a22-s5)}
.nf .btns{justify-content:center}
.nf__legacy{margin-top:var(--a22-s6)!important;font-size:16px!important;background:#fff;border-radius:var(--a22-r-control);padding:var(--a22-s3) var(--a22-s4)}
.nf__legacy a{color:var(--a22-navy);font-weight:700}
/* FAQ */
.faqp{max-width:860px}
.faqp__toc{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--a22-s6)}
.faqp__toc a{background:#fff;border-radius:var(--a22-r-pill);padding:8px 14px;color:var(--a22-navy);font-weight:600;text-decoration:none;font-size:15px}
.fqs{margin-bottom:var(--a22-s7)}
.fqs:last-child{margin-bottom:0}
.fqs h2{margin:0 0 var(--a22-s3)}
.fqs__l{display:grid;gap:var(--a22-s3)}
.fqs__l .fq2{margin:0}
.fq2 p{max-width:none}
.faqp__more p{text-align:center;color:var(--a22-soft);max-width:none}
.faqp__more a{color:var(--a22-navy);font-weight:600}
.fshot-band{padding:72px 0}
@media(min-width:900px){.fshot-band{padding:96px 0}}
/* legal */
.lglh{background:var(--a22-navy);padding:var(--a22-s7) 0}
.lglh h1{color:#fff;margin:8px 0 0}
.lgl{padding:var(--a22-s7) 0!important}
.lgl__in{display:grid;gap:var(--a22-s6)}
@media(min-width:900px){.lgl__in{grid-template-columns:220px 1fr;gap:var(--a22-s8)}}
.lgl__nav{display:grid;gap:6px;align-content:start}
.lgl__nav a{color:var(--a22-navy);text-decoration:none;padding:6px 0;font-weight:500}
.lgl__nav a[aria-current="page"]{font-weight:700;border-left:3px solid var(--a22-orange);padding-left:10px}
.lgl__a{max-width:68ch}
.lgl__a p{color:var(--a22-ink)}
.lgl__a h2{font-size:22px;margin:var(--a22-s6) 0 var(--a22-s3)}
.cd{margin:0;display:grid;gap:0;border-top:var(--a22-border)}
.cd__r{display:grid;grid-template-columns:200px 1fr;gap:var(--a22-s4);padding:12px 0;border-bottom:var(--a22-border)}
@media(max-width:599px){.cd__r{grid-template-columns:1fr;gap:2px}}
.cd dt{color:var(--a22-soft);font-weight:600}
.cd dd{margin:0;color:var(--a22-ink)}

/* ======================================================================
   P4. Public pages (package three, part 4): home, certifications, the certification page
   ====================================================================== */
/* home */
.curhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--a22-s2) var(--a22-s5);margin-bottom:var(--a22-s5)}
.curhead__h{margin:6px 0 0}
.curprice{margin:0;color:var(--a22-soft);font-size:15px;max-width:none}
.cgrid{display:grid;gap:var(--a22-s4)}
@media(min-width:900px){.cgrid--3{grid-template-columns:repeat(3,1fr)}}
.ccard{background:#fff;border:2px solid var(--a22-navy);border-radius:var(--a22-r-card);padding:var(--a22-s5);display:flex;flex-direction:column;gap:var(--a22-s2)}
.ccard>svg{width:22px;height:12.4px;color:var(--a22-orange)}
.ccard h3{margin:0;font-size:24px}
.ccard .what{margin:0;color:var(--a22-soft)}
.ccard .hours{margin:0 0 var(--a22-s2);font-weight:500}
.acts2{display:grid;grid-template-columns:1fr 1fr;gap:var(--a22-s2);margin-top:auto}
.acts2 .a22-btn{width:100%}
.curmore{margin-top:var(--a22-s5)}
.strip__cta{margin-top:var(--a22-s6)}
.cg__h{margin:6px 0 var(--a22-s5)}
.cpb{position:relative;overflow:hidden}
.cpb__in{position:relative;display:grid;gap:var(--a22-s6);align-items:center}
@media(min-width:900px){.cpb__in{grid-template-columns:1fr 1.2fr;gap:var(--a22-s8)}}
.cpb__btn{display:grid;place-items:center}
.cpb__pill{display:inline-flex;align-items:center;gap:16px;border:2px solid var(--a22-on-dark-border);border-radius:16px;padding:22px 34px;font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:34px;font-weight:600;color:#fff;background:var(--a22-navy-deep)}
@media(max-width:599px){.cpb__pill{font-size:24px;padding:16px 22px}}
.cpb__pill svg{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:2}
.cpb h2{color:#fff;margin:8px 0 var(--a22-s3);text-wrap:balance}
.cpb p{color:var(--a22-on-dark)}
.mhalf{display:grid;gap:var(--a22-s7);align-items:start}
@media(min-width:900px){.mhalf{grid-template-columns:1fr 1fr;gap:var(--a22-s8)}}
.mhalf--c{align-items:stretch;overflow:visible}
.mbas{position:relative;display:flex;align-items:center;min-height:100%;padding:0;overflow:visible}
.mbas .why__mark{position:absolute;left:38%;top:50%;transform:translate(-50%,-50%);height:78%;width:auto;opacity:.12;pointer-events:none}
.mbas .why__mark .pair{height:100%;width:auto;max-width:none;display:block}
.mbas .author{position:relative}
/* certifications */
.cc__in{display:grid;gap:var(--a22-s5)}
@media(min-width:900px){.cc__in{grid-template-columns:1fr 1fr 1fr;gap:var(--a22-s6);align-items:stretch}.cc__in--2{grid-template-columns:1.4fr 1fr}}
.cc h2{font-size:34px;margin:8px 0 var(--a22-s3)}
@media(min-width:900px){.cc h2{font-size:44px}}
.cc__a p{color:var(--a22-soft);font-size:18px}
.cc__q{color:var(--a22-navy)!important;font-weight:600}
.fa{justify-content:flex-start;padding:0;font-weight:700}
.fa .ic{stroke:var(--a22-navy)}
.cc__b{display:grid;gap:var(--a22-s2);align-content:start}
.cc__t{color:var(--a22-soft);font-size:16px;margin:0 0 var(--a22-s2)}
.cc__p{font-size:14px;color:var(--a22-soft);margin:2px 0 0}
.cc__b .a22-btn--quiet{justify-content:flex-start;padding:4px 0}
.cc__i{margin:0;border-radius:var(--a22-r-card);overflow:hidden;min-height:420px}
.cc__i img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:899px){.cc__i{order:-1;min-height:0;height:220px}}
.rvh{position:relative;margin:6px 0 var(--a22-s5)}
/* the certification page */
.gtoc{background:#fff;border-bottom:var(--a22-border);padding:14px 0}
.gtoc .a22-wrap{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px}
.gtoc span{font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--a22-muted)}
.gtoc a{color:var(--a22-navy)}
.gs h2{margin:8px 0 var(--a22-s4);text-wrap:balance}
.gs--c{text-align:center}
.gs--c .kick{justify-content:center}
.gs--c h2{margin-left:auto;margin-right:auto;max-width:28ch}
.onecol{max-width:68ch}
.onecol p{color:var(--a22-soft);font-size:18px}
.onecol--after{margin-top:var(--a22-s6)}
.gsub{font-weight:700;color:var(--a22-navy);font-size:19px;margin:0 0 var(--a22-s3)}
.gsub--ft{margin-top:var(--a22-s7)}
.ntiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--a22-s3)}
@media(min-width:600px){.ntiles{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.ntiles--6{grid-template-columns:repeat(6,1fr)}}
.nt{display:grid;grid-template-columns:1fr;gap:10px;align-content:start;align-items:start;background:#fff;border:1px solid var(--a22-line);border-radius:var(--a22-r-card);padding:var(--a22-s5)}
.nt .ic{stroke:var(--a22-orange)}
.nt b{display:block;font-size:36px;line-height:1.05;color:var(--a22-navy)}
.nt__u{display:block;font-weight:600;color:var(--a22-ink);font-size:15px;margin-top:2px}
.nt__s{display:block;font-size:14px;color:var(--a22-muted)}
.gnote{font-size:14px;color:var(--a22-muted);margin-top:var(--a22-s3)}
.gnote p{font-size:14px;color:var(--a22-muted)}
.glede{color:var(--a22-soft);font-size:18px;max-width:68ch;margin-bottom:var(--a22-s6)}
.glede p{color:var(--a22-soft);font-size:18px}
.glede--c{margin-left:auto;margin-right:auto}
.istrip{margin-top:-48px;position:relative;z-index:2}
.dcard{background:#fff;border-radius:var(--a22-r-card);padding:var(--a22-s6);box-shadow:var(--a22-shadow)}
.dcard__h{display:grid;grid-template-columns:48px 1fr auto;gap:var(--a22-s4);align-items:center;margin-bottom:var(--a22-s3)}
.dcard__n{width:48px;height:48px;border-radius:50%;background:var(--a22-navy);color:#fff;display:grid;place-items:center;font-weight:700;font-size:20px}
.dcard h3{margin:0;font-size:24px}
.dcard__q{text-align:right;color:var(--a22-soft);font-size:13px}
.dcard__q b{display:block;font-size:24px;color:var(--a22-navy)}
.dcard>p{color:var(--a22-soft);font-size:18px;max-width:68ch}
@media(max-width:599px){.dcard{padding:var(--a22-s5)}.dcard__h{grid-template-columns:40px 1fr;grid-template-rows:auto auto;row-gap:6px}.dcard__n{width:40px;height:40px;font-size:17px}.dcard h3{font-size:20px;line-height:1.25}.dcard__q{grid-column:2;grid-row:2;text-align:left;display:flex;align-items:baseline;gap:6px}.dcard__q b{display:inline;font-size:18px}}
.qband{margin:var(--a22-s5) 0 var(--a22-s7);padding:0 var(--a22-s6)}
@media(max-width:599px){.qband{padding:0}}
.qband__in{border-left:4px solid var(--a22-blue);background:var(--a22-blue-soft);border-radius:0 var(--a22-r-card) var(--a22-r-card) 0;padding:var(--a22-s4) var(--a22-s5);max-width:860px;margin-left:auto}
.qband p{font-size:18px;font-weight:600;color:var(--a22-navy);margin:6px 0 var(--a22-s3)}
.cc4s{display:grid;gap:var(--a22-s5)}
@media(min-width:600px){.cc4s{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.cc4s{grid-template-columns:repeat(4,1fr)}}
.cc4{text-align:center;display:grid;justify-items:center;gap:6px}
.cc4 h3{margin:var(--a22-s2) 0 0;font-size:20px}
.cc4__s{font-weight:700;color:var(--a22-orange);font-size:14px}
.cc4 p{color:var(--a22-soft);margin:0}
.gl3{display:grid;gap:var(--a22-s5);text-align:center}
@media(min-width:600px){.gl3{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.gl3{grid-template-columns:repeat(3,1fr)}}
.gl3>div{display:grid;justify-items:center;gap:4px;align-content:start;background:#fff;border-radius:var(--a22-r-card);padding:var(--a22-s5)}
.gl3 .ic{stroke:var(--a22-orange);width:28px;height:28px}
.gl3 b{color:var(--a22-navy)}
.gl3 p{margin:0;color:var(--a22-soft);font-size:15px}
.cases{display:grid;gap:var(--a22-s5);align-items:start}
@media(min-width:900px){.cases{grid-template-columns:repeat(3,1fr)}}
.case{display:grid;justify-items:center;gap:6px;align-content:start}
.case .ic{stroke:var(--a22-navy);width:28px;height:28px}
.case b{color:var(--a22-navy);font-size:19px}
.case p{margin:0;color:var(--a22-soft)}
.f3{position:relative;overflow:hidden}
.f3 h2{color:#fff;margin:8px 0 var(--a22-s3)}
.f3 p{color:var(--a22-on-dark);font-size:18px}
.f3 img{width:100%;height:auto;display:block}
.twocol{display:grid;gap:var(--a22-s6)}
@media(min-width:900px){.twocol{grid-template-columns:1fr 1fr;gap:var(--a22-s8);align-items:start}}
.twocol p{color:var(--a22-soft);font-size:18px}
.dl1{margin:var(--a22-s4) 0 0;display:grid;gap:var(--a22-s3)}
.dl1 div{border-left:3px solid var(--a22-orange);padding-left:var(--a22-s4)}
.dl1 dt{font-weight:700;color:var(--a22-navy)}
.dl1 dd{margin:2px 0 0;color:var(--a22-soft)}
.a22-table tr.us td{font-weight:600;color:var(--a22-navy);background:var(--a22-blue-soft)}
.mis{list-style:none;padding:0;margin:0;display:grid;gap:var(--a22-s4);counter-reset:m;max-width:none}
@media(min-width:900px){.mis{grid-template-columns:1fr 1fr;gap:var(--a22-s4) var(--a22-s7)}}
.mis li{counter-increment:m;display:grid;grid-template-columns:44px 1fr;gap:2px var(--a22-s3)}
.mis li::before{content:counter(m);grid-row:1/3;width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid var(--a22-orange);color:var(--a22-navy);display:grid;place-items:center;font-weight:700}
.mis b{color:var(--a22-navy)}
.mis span{color:var(--a22-soft)}
.dayc{display:grid;gap:var(--a22-s4)}
@media(min-width:600px){.dayc{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.dayc{grid-template-columns:repeat(4,1fr)}}
.dayc__i{background:#fff;border-radius:var(--a22-r-card);padding:var(--a22-s5);display:grid;gap:8px;align-content:start}
.dayc__i .ic{stroke:var(--a22-orange)}
.dayc__i b{color:var(--a22-navy);font-size:19px}
.dayc__i p{margin:0;color:var(--a22-soft)}
.gb{display:grid;grid-template-columns:auto 1fr;gap:var(--a22-s5);align-items:start;max-width:860px;margin:0 auto;border:2px solid var(--a22-orange);border-radius:var(--a22-r-card);padding:var(--a22-s6)}
.gb .pair{width:64px;height:31px;margin-top:8px}
.gb h2{margin:0 0 var(--a22-s3)}
.gb p{color:var(--a22-soft);font-size:18px}
@media(max-width:599px){.gb{grid-template-columns:1fr}}
.faqs{display:grid;gap:var(--a22-s3);max-width:880px} /* one wider column (Denis, 1 Oct): two columns went uneven when one question was open */
/* Certification page FAQ: heading and block centred; the questions and answers themselves stay left-aligned for reading. */
section#faq{text-align:center}
section#faq .faqs{margin:0 auto;text-align:left}
.faqs .fq2{margin:0}
/* how it works */
.stepm{display:inline-flex;align-items:center;gap:14px;margin-bottom:var(--a22-s3)}
.stepm span{width:56px;height:56px;border-radius:50%;background:var(--a22-orange);color:#fff;display:grid;place-items:center;font-weight:800;font-size:26px}
.stepm b{font-size:26px;color:var(--a22-orange);letter-spacing:.02em}
.stepm--c{justify-content:center}
.stepm--dark b{color:#fff}
.mh2{margin:8px 0 var(--a22-s5)}
.claims3__cta{margin-top:var(--a22-s6)}
.cpb--light h2{color:var(--a22-navy)}
.cpb--light p{color:var(--a22-soft)}
.cpb--light .cpb__pill{background:var(--a22-navy);border-color:var(--a22-navy)}
.org{display:grid;grid-template-columns:auto 1fr;gap:var(--a22-s6);align-items:start;max-width:980px}
.org__i .ic{stroke:var(--a22-orange);width:56px;height:56px}
.org h2{margin:8px 0 var(--a22-s3)}
.org p{color:var(--a22-soft);font-size:18px;max-width:68ch}
.org__mail{align-self:center;color:var(--a22-soft);font-size:15px}
@media(max-width:599px){.org{grid-template-columns:1fr}}
/* pricing */
.ptags{display:grid;gap:var(--a22-s3)}
.ptag{display:grid;grid-template-columns:128px 1fr;align-items:baseline;gap:12px;border:1.5px solid var(--a22-on-dark-border);border-radius:var(--a22-r-card);padding:var(--a22-s4) var(--a22-s5)}
.ptag b{font-size:44px;line-height:1;color:#fff;text-align:left}
.ptag span{color:var(--a22-on-dark)}
.ptag--hl{border-color:var(--a22-orange);background:rgba(232,100,28,.1)}
.ptag--free b{color:var(--a22-blue)}
.pl3{display:grid;gap:var(--a22-s5);align-items:stretch}
@media(min-width:900px){.pl3{grid-template-columns:repeat(3,1fr)}}
.plan{position:relative;background:#fff;border:1px solid var(--a22-line);border-radius:var(--a22-r-card);padding:var(--a22-s6) var(--a22-s5);display:flex;flex-direction:column;gap:var(--a22-s2)}
.plan--hl{border:2px solid var(--a22-navy);box-shadow:var(--a22-shadow)}
.plan__tag{position:absolute;top:-14px;left:var(--a22-s5);background:var(--a22-orange);color:#fff;font-size:13px;font-weight:700;border-radius:var(--a22-r-pill);padding:4px 12px}
.plan h3{margin:0;font-size:22px}
.plan__p{margin:0;display:flex;align-items:baseline;gap:8px}
.plan__p b{font-size:48px;line-height:1;color:var(--a22-navy)}
.plan__p span{color:var(--a22-soft);font-size:20px}
.plan__n{color:var(--a22-soft);margin:0 0 var(--a22-s2)}
.plan ul{list-style:none;padding:0;margin:0 0 var(--a22-s4);display:grid;gap:10px;max-width:none}
.plan li{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;color:var(--a22-ink)}
.plan li .ic{stroke:var(--a22-ok);margin-top:3px}
.plan .a22-btn{margin-top:auto}
.plans__vat{text-align:center;color:var(--a22-soft);font-size:15px;margin:var(--a22-s5) auto 0;max-width:none}
.addon{display:grid;grid-template-columns:auto 1fr auto;gap:var(--a22-s4);align-items:center;background:#fff;border-radius:var(--a22-r-card);padding:var(--a22-s4) var(--a22-s5);margin-top:var(--a22-s5)}
.addon .ic{stroke:var(--a22-orange)}
.addon b{display:block;color:var(--a22-navy)}
.addon span{color:var(--a22-soft)}
@media(max-width:699px){.addon{grid-template-columns:1fr}}
.tebox__in{display:grid;gap:var(--a22-s6);align-items:center}
@media(min-width:900px){.tebox__in{grid-template-columns:1.2fr 1fr;gap:var(--a22-s8)}}
.tebox h2{color:#fff;margin:8px 0 var(--a22-s3)}
.tebox p{color:var(--a22-on-dark)}
.tebox__ph{margin:0}
.tebox__ph img{width:100%;height:auto;display:block;border-radius:var(--a22-r-card)}
.tebox__ph--port img{aspect-ratio:4/5;object-fit:cover;max-height:620px}
.tebox__cl{font-size:20px;font-weight:700;color:#fff!important}
.tebox__g a,.tebox__g b{color:#fff}
.ana{list-style:none;padding:0;margin:var(--a22-s3) 0 var(--a22-s4);display:grid;gap:12px;max-width:none}
.ana li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start}
.ana .ic{stroke:var(--a22-orange);width:24px;height:24px}
.ana b{display:block;color:#fff}
.ana span{color:var(--a22-on-dark-mut);font-size:15px}
.tex{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--a22-s3);margin:var(--a22-s4) 0}
.tex--btn a{display:block;background:var(--a22-on-dark-fill);border:1.5px solid var(--a22-on-dark-border);border-radius:var(--a22-r-card);padding:var(--a22-s4);text-align:center;text-decoration:none;transition:background .15s,border-color .15s}
.tex--btn a:hover{background:var(--a22-on-dark-line);border-color:var(--a22-blue)}
.tex--btn b{display:block;font-size:30px;color:#fff}
.tex--btn span{font-size:14px;color:var(--a22-on-dark)}
@media(max-width:599px){.tex{grid-template-columns:1fr}}
.ao{display:grid;gap:var(--a22-s6);align-items:center}
@media(min-width:900px){.ao{grid-template-columns:1fr 1.2fr;gap:var(--a22-s8)}}
.ao h2{margin:8px 0 var(--a22-s3)}
.ao p{color:var(--a22-soft);font-size:18px}
.ao__c{display:grid;gap:var(--a22-s4)}
@media(min-width:600px){.ao__c{grid-template-columns:1fr 1fr}}
.ao__k{border-radius:var(--a22-r-card);padding:var(--a22-s5);display:grid;gap:8px;align-content:start}
.ao__k b{font-size:21px}
.ao__k--o{background:var(--a22-surface-2)}
.ao__k--o .ic{stroke:var(--a22-muted)}
.ao__k--o b{color:var(--a22-soft)}
.ao__k--a{background:var(--a22-navy)}
.ao__k--a .ic{stroke:var(--a22-orange)}
.ao__k--a b{color:#fff}
.ao__k--a p{color:var(--a22-on-dark)!important}
.tsel{display:flex;flex-wrap:wrap;gap:var(--a22-s3);align-items:center;margin:var(--a22-s4) 0}
.tsel label{font-weight:600;color:var(--a22-on-dark);font-size:15px}
.tsel select{width:auto;min-width:160px;padding:11px 14px}
@media(max-width:599px){.tsel .a22-btn,.tsel select{width:100%}}
.freel{list-style:none;padding:0;margin:0 auto var(--a22-s5);display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;color:#fff;max-width:none}
.freel li{display:inline-flex;align-items:center;gap:8px}
.freel .ic{stroke:var(--a22-orange)}
/* career plan and the role page */
.rcs{display:grid;gap:var(--a22-s4)}
@media(min-width:600px){.rcs{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.rcs{grid-template-columns:repeat(3,1fr)}}
.rc{display:grid;gap:10px;align-content:start;background:#fff;border:1.5px solid transparent;border-radius:var(--a22-r-card);box-shadow:var(--a22-shadow);padding:var(--a22-s5);text-decoration:none;transition:border-color .15s}
.rc:hover{border-color:var(--a22-navy)}
.rc b{font-size:21px;color:var(--a22-navy)}
.rc p{margin:0;color:var(--a22-soft)}
.rc__m{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:14px;font-weight:600;color:var(--a22-navy);border-top:var(--a22-border);padding-top:10px}
.rc__m span{white-space:nowrap}
.rc__m span:last-child{color:var(--a22-soft);font-weight:500}
.rc--s{padding:var(--a22-s4);box-shadow:none;gap:8px}
.rc--s b{font-size:16px}
.rc--s .rc__m{font-size:13px;flex-direction:column;gap:2px}
.pchips{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.pchips .ic{stroke:var(--a22-muted);width:14px;height:14px}
.pchip{background:var(--a22-blue-soft);color:var(--a22-navy);font-weight:700;font-size:13px;border-radius:var(--a22-r-pill);padding:4px 10px}
.areas{display:grid;gap:var(--a22-s4)}
@media(min-width:600px){.areas{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.areas{grid-template-columns:repeat(3,1fr)}}
.area{background:var(--a22-surface);border-radius:var(--a22-r-card);padding:var(--a22-s5);display:grid;gap:8px;align-content:start}
.area .ic{stroke:var(--a22-orange)}
.area b{font-size:20px;color:var(--a22-navy)}
.area p{margin:0 0 4px;color:var(--a22-soft)}
.area__l{font-size:15px;border-top:var(--a22-border);padding-top:8px}
.area__l span{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--a22-muted);margin-bottom:2px}
.area__l a{color:var(--a22-navy);font-weight:600}
.rh{display:grid;gap:var(--a22-s6);align-items:center;position:relative}
@media(min-width:900px){.rh{grid-template-columns:1.2fr 1fr;gap:var(--a22-s8)}}
.rsum{display:grid;gap:var(--a22-s3)}
.rsum__i{border:1.5px solid var(--a22-on-dark-border);border-radius:var(--a22-r-card);padding:var(--a22-s4) var(--a22-s5);display:grid;gap:6px}
.rsum__i>span{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--a22-on-dark-mut)}
.rsum__i b{font-size:30px;color:#fff;line-height:1.1}
.rsum__i em{font-style:normal;color:var(--a22-on-dark)}
.rsum .pchip{background:var(--a22-on-dark-line);color:#fff;font-size:16px;padding:6px 14px}
.rsum .pchips .ic{stroke:var(--a22-on-dark-mut)}
.others{background:var(--a22-surface-2);padding:var(--a22-s5) 0}
.others__h{font-weight:700;color:var(--a22-navy);margin:0 0 var(--a22-s3)}
.others__l{display:grid;gap:var(--a22-s3)}
@media(min-width:600px){.others__l{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.others__l{grid-template-columns:repeat(5,1fr)}}
.ps{list-style:none;padding:0;margin:var(--a22-s5) 0;display:grid;gap:var(--a22-s3);max-width:none}
.ps li{display:grid;grid-template-columns:48px 1fr auto;gap:var(--a22-s4);align-items:center;background:#fff;border-radius:var(--a22-r-card);padding:var(--a22-s4)}
.ps__n{width:44px;height:44px;border-radius:50%;background:var(--a22-orange);color:#fff;display:grid;place-items:center;font-weight:800;font-size:19px}
.ps b{display:block;font-size:22px;color:var(--a22-navy)}
.ps div span{color:var(--a22-soft)}
.ps__t{font-weight:600;color:var(--a22-navy)}
@media(max-width:599px){.ps li{grid-template-columns:44px 1fr}.ps__t{grid-column:2}}
.skip{margin-top:var(--a22-s4);font-weight:600;color:var(--a22-navy)}
.skip a{color:var(--a22-navy);text-decoration:underline;text-underline-offset:3px}
.cc3w{display:grid;gap:var(--a22-s4)}
@media(min-width:900px){.cc3w{grid-template-columns:repeat(3,1fr)}}
.payb{display:grid;gap:var(--a22-s6);align-items:center}
@media(min-width:900px){.payb{grid-template-columns:1.4fr 1fr;gap:var(--a22-s8)}}
.payb h2{margin:8px 0 var(--a22-s3)}
.payb p{color:var(--a22-soft);font-size:18px;max-width:60ch}
.payb__n{background:var(--a22-navy);border-radius:var(--a22-r-card);padding:var(--a22-s6);display:grid;gap:4px;justify-items:start}
.payb__n span,.payb__n em{color:var(--a22-on-dark);font-style:normal}
.payb__n b{font-size:52px;line-height:1;color:#fff}
.payt{display:grid;gap:10px;margin:var(--a22-s4) 0}
.payt__r{display:grid;grid-template-columns:120px 1fr;gap:var(--a22-s4);background:#fff;border-radius:var(--a22-r-control);padding:14px 16px}
.payt__r b{color:var(--a22-navy)}
.payt__r span{color:var(--a22-ink)}
@media(max-width:599px){.payt__r{grid-template-columns:1fr;gap:2px}}

@media(min-width:900px) {
    .band {
        padding: 144px 0;
    }
}

p { text-wrap: pretty; }

/* Home: the band with four numbers on a phone (B98) */
@media(max-width:599px){ .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a22-s4); } .strip b { font-size: 32px; } .strip span { white-space: normal; } }

/* Anchors land under the header (B95), so /faq/#guarantee shows the question */
html { scroll-padding-top: 96px; }