/* ============================================================
   ONLINE - the approved design's own stylesheet.
   Generated by bin/build-page-template.php. Do not edit here:
   edit the design and rebuild, or the page stops matching what
   was signed off.

   Written out as authored and scoped by where it loads - only on
   the page using this template - so the selectors without a
   .pe-online prefix cannot reach anything else.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Poppins:wght@300;400;500;600;700&display=swap');

.pe-online{
--ink:#17233B;--navy:#204287;--navy-dk:#1B3873;--navy-lt:#224B9A;--navy-soft:#E8EFF8;
--blue:#2A6DF2;--blue-dk:#1F5AD4;--title:#16305F;--line:#D9E6F5;--wash:#F8FAFF;
--card:#F0F6FB;--paper:#FFFFFF;--green:#3F7A63;--green-pale:#EDF5F0;--grey:#5A6B84;
--gold:#FFBB26;--gold-dk:#E5A415;--amber:var(--gold);--r:10px;
--display:'Playfair Display',Georgia,serif;
--body:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
font-family:var(--body);color:var(--ink);line-height:1.6;font-size:16px;
-webkit-font-smoothing:antialiased}

.pe-online *,.pe-online *::before,.pe-online *::after{box-sizing:border-box}

.pe-online h1,.pe-online h2,.pe-online h3,.pe-online h4,.pe-online p,
.pe-online ul,.pe-online ol,.pe-online li,.pe-online dl,.pe-online dt,.pe-online dd,
.pe-online figure{
text-transform:none!important;letter-spacing:normal!important;color:inherit;
margin:0;padding:0;border:0;background:none}

.pe-online li{list-style:none!important}
.pe-online a{text-decoration:none!important;color:inherit;box-shadow:none!important}
.pe-online img{max-width:100%;height:auto;display:block}

.pe-online h1,.pe-online h2,.pe-online h3,.pe-online h4{
font-family:var(--display)!important;font-weight:700!important;line-height:1.22;
margin:0 0 .5em!important}

/* ---------- section shells ---------- */
.pe-online .sec{padding:58px 20px;background:var(--paper)}
.pe-online
.sec.tint{background:var(--card);border-top:1px solid var(--line);
border-bottom:1px solid var(--line)}
.pe-online
.sec.navy{background:linear-gradient(140deg,var(--navy-dk),var(--navy-lt));color:#fff}
.pe-online
.sec.navy h2,.pe-online .sec.navy h3{color:#fff}
.pe-online
.wrap{max-width:1140px;margin:0 auto}

.pe-online
.eyebrow{font-family:var(--body)!important;font-size:11.5px;font-weight:600;
letter-spacing:.15em!important;text-transform:uppercase!important;color:var(--blue);
margin:0 0 14px!important;display:block}
.pe-online
.sec.navy .eyebrow{color:var(--gold)}

.pe-online
.sec>.wrap>h2{font-size:34px;color:var(--title);max-width:24ch}
.pe-online
.sec.navy>.wrap>h2{color:#fff}
.pe-online
h2 i{font-style:italic;color:var(--navy)}
.pe-online
.sec.navy h2 i{color:var(--gold)}
.pe-online
.lede{font-size:17px;color:var(--grey);max-width:72ch;margin:0 0 34px!important}
.pe-online
.sec.navy .lede{color:#DCE8FA}

/* ---------- hero ---------- */
.pe-online .hero{background:linear-gradient(155deg,#16305F 0%,#204287 48%,#2A5AA8 100%);
color:#fff;padding:44px 20px 58px}
.pe-online
.crumb{font-size:13px;color:#B9CEEC;margin:0 0 26px!important}
.pe-online
.crumb a{color:#DCE8FA}
.pe-online
.crumb a:hover{text-decoration:underline!important}
.pe-online
.hero-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:44px;align-items:start}
.pe-online
.orgname{font-family:var(--display)!important;font-size:1.85rem;font-weight:700;
color:#fff;letter-spacing:-.005em;margin:0 0 6px!important;line-height:1}
.pe-online
.orgname span{color:var(--gold)}
.pe-online
.kicker{font-size:11.5px;font-weight:600;color:#9FBEEA;
letter-spacing:.14em!important;text-transform:uppercase!important;
margin:0 0 24px!important;padding-bottom:22px;
border-bottom:1px solid rgba(255,255,255,.18)}
.pe-online
h1{font-size:44px;color:#fff;margin:0 0 6px!important;max-width:18ch}
/* the gold lead phrase, as .reg-lead is used on the regulator pages.
   display:block puts "for healthcare professionals" on its own line; the space
   before it is still in the markup so the two do not extract as one word. */
.pe-online .h1-lead{display:block;color:var(--gold);font-weight:700}
.pe-online
.subhead{font-family:var(--display)!important;font-style:italic;font-size:27px;
color:#9FBEEA;line-height:1.25;margin:0 0 22px!important;max-width:24ch}
.pe-online
.sub{font-size:16.5px;color:#DCE8FA;max-width:56ch;margin:0 0 26px!important}
.pe-online
.pills{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 28px!important}
.pe-online
.pills li{border:1px solid rgba(255,255,255,.32);border-radius:40px;padding:9px 18px;
font-size:13px;font-weight:500;color:#DCE8FA}
.pe-online
.pills li.hl{background:var(--gold);border-color:var(--gold);color:#3D2A00;
font-weight:600}
.pe-online
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- buttons ---------- */
.pe-online .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
min-height:46px;padding:12px 24px;border-radius:var(--r);
font-family:var(--body)!important;font-size:15px;font-weight:600!important;
border:1px solid transparent}
.pe-online
.btn-p{background:#fff;color:var(--navy)!important}
.pe-online
.btn-p:hover{background:#EAF1FC}
.pe-online
.btn-s{background:transparent;color:#fff!important;border-color:rgba(255,255,255,.5)}
.pe-online
.btn-s:hover{background:rgba(255,255,255,.12)}
.pe-online
.btn-g{background:var(--gold);color:#3D2A00!important}
.pe-online
.btn-g:hover{background:var(--gold-dk)}
.pe-online
.sec:not(.navy) .btn-p{background:var(--navy);color:#fff!important}
.pe-online
.sec:not(.navy) .btn-p:hover{background:var(--navy-dk)}
.pe-online
.sec:not(.navy) .btn-s{color:var(--navy)!important;background:#fff;
border-color:var(--navy)}
.pe-online
.sec:not(.navy) .btn-s:hover{background:var(--navy-soft)}

/* ---------- hero side cards ---------- */
.pe-online .cpdcard{background:#fff;border-radius:var(--r);padding:22px;text-align:center;
margin:0 0 16px}
.pe-online
.cpdcard img{width:150px;height:63px;margin:0 auto 12px;object-fit:contain}
.pe-online
.cpdcard b{display:block;font-size:15px;color:var(--title);margin-bottom:6px}
.pe-online
.cpdcard span{font-size:13.5px;color:var(--grey);line-height:1.5}
.pe-online
.glance{background:#fff;border-radius:var(--r);padding:22px 24px}
.pe-online
.glance h2{font-family:var(--body)!important;font-size:11.5px!important;
font-weight:600!important;letter-spacing:.15em!important;
text-transform:uppercase!important;color:var(--blue);margin:0 0 16px!important}
.pe-online
.glance dt{font-size:11.5px;font-weight:600;color:var(--grey);
text-transform:uppercase!important;letter-spacing:.08em!important;margin-top:15px}
.pe-online
.glance dl>dt:first-child{margin-top:0}
.pe-online
.glance dd{font-size:14.5px;font-weight:500;color:var(--title);margin:3px 0 0!important}

/* ---------- pagenav: white band under the hero ---------- */
.pe-online .pagenav{background:#fff;border-bottom:1px solid var(--line);padding:0 20px}
.pe-online
.pagenav .wrap{padding-top:14px;padding-bottom:14px}
.pe-online
.pagenav h2{font-family:var(--body)!important;font-size:11.5px!important;
font-weight:700!important;letter-spacing:.12em!important;
text-transform:uppercase!important;color:var(--grey);margin:0 0 9px!important}
.pe-online
.pagenav ul{display:flex;flex-wrap:wrap;gap:0 22px}
/* padded to a 40px tap target while still reading as a text link */
.pe-online .pagenav a{font-size:14.6px;color:var(--navy);display:inline-flex;align-items:center;
min-height:40px;padding:8px 0;border-bottom:1.5px solid transparent}
.pe-online
.pagenav a:hover{border-bottom-color:var(--blue)}

/* ---------- stats: navy band, gradient cards ---------- */
.pe-online .sec.statband{background:var(--navy);padding:34px 20px 38px}
.pe-online
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pe-online
.stat{background:linear-gradient(150deg,#2A5AA8 0%,#204287 100%);border-radius:16px;
padding:26px 26px 28px;box-shadow:0 10px 26px rgba(6,20,45,.18)}
.pe-online
.stat b{display:block;font-family:var(--display)!important;font-size:2.3rem;
font-weight:700;color:#fff;line-height:1.05;margin-bottom:12px;
letter-spacing:-.01em!important}
.pe-online
.stat span{display:block;font-size:15px;color:#DCE7F8;line-height:1.5;max-width:24ch}

/* ---------- regulator router ---------- */
.pe-online .regs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pe-online
.reg{background:#fff;border:1px solid var(--line);border-top:4px solid var(--blue);
border-radius:var(--r);padding:26px;display:block;height:100%;
transition:transform .2s,box-shadow .2s,border-color .2s}
.pe-online
.reg:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(32,66,135,.14);
border-color:var(--blue)}
.pe-online
.reg .ab{display:block;font-family:var(--display)!important;font-size:1.95rem;
font-weight:700;color:var(--navy);line-height:1}
.pe-online
.reg .full{display:block;font-size:13.5px;color:var(--grey);margin:6px 0 14px}
.pe-online
.reg .who{display:block;font-size:15px;font-weight:500;color:var(--ink);
margin-bottom:16px}
.pe-online
.reg .go{display:block;font-size:14.5px;font-weight:600;color:var(--blue)}

/* ---------- bulk buy ---------- */
.pe-online .bulk{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
padding:30px 32px;display:grid;grid-template-columns:1fr auto;gap:28px;
align-items:center}
.pe-online
.bulk h3{font-size:21px!important;color:var(--title);margin:0 0 10px!important}
.pe-online
.bulk p{font-size:15px;color:var(--grey);margin:0 0 10px!important;max-width:70ch}
.pe-online
.bulk p:last-of-type{margin:0!important}

/* ---------- four steps ---------- */
.pe-online .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pe-online
.step{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
border-radius:var(--r);padding:24px}
.pe-online
.step .n{width:34px;height:34px;border-radius:50%;background:var(--gold);
color:#3D2A00;font-weight:700;font-size:15px;display:flex;align-items:center;
justify-content:center;margin-bottom:14px}
.pe-online
.step h3{font-size:16.5px!important;margin:0 0 8px!important}
.pe-online
.step p{font-size:13.5px;color:#DCE8FA}

/* ---------- why ---------- */
.pe-online .why{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pe-online
.whyitem{background:#fff;border:1px solid var(--line);border-radius:var(--r);
padding:24px}
.pe-online
.whyitem h3{font-size:16px!important;color:var(--title);margin:0 0 8px!important}
.pe-online
.whyitem p{font-size:14px;color:var(--grey)}

/* ---------- author ---------- */
.pe-online .author{background:#fff;border:1px solid var(--line);border-radius:var(--r);
padding:28px;display:grid;grid-template-columns:210px 1fr;gap:28px;align-items:start}
.pe-online
.author img{border-radius:var(--r);width:210px;height:auto}
.pe-online
.author h3{font-size:22px!important;color:var(--title);margin:0 0 4px!important}
.pe-online
.author .role{font-size:14px;color:var(--navy);font-weight:500;margin:0 0 14px!important}
.pe-online
.author p{font-size:14.5px;color:var(--grey);margin:0 0 12px!important}
.pe-online
.creds{font-size:13px;color:var(--grey);border-top:1px solid var(--line);
padding-top:12px}
.pe-online
.reviewed{font-size:13px;color:var(--grey);margin:10px 0 0!important}

/* ---------- faq: native details, no script ---------- */
.pe-online .faq{background:#fff;border:1px solid var(--line);border-radius:var(--r);
margin:0 0 10px}
.pe-online
.faq>summary{cursor:pointer;padding:18px 22px;display:flex;align-items:center;
justify-content:space-between;gap:16px;list-style:none;min-height:44px}
.pe-online
.faq>summary::-webkit-details-marker{display:none}
.pe-online
.faq>summary h3{font-size:16.5px!important;color:var(--title);margin:0!important}
.pe-online
.mark{flex:0 0 26px;width:26px;height:26px;border-radius:50%;
background:var(--navy-soft);color:var(--navy);font-size:17px;font-weight:600;
display:flex;align-items:center;justify-content:center;line-height:1}
.pe-online
.mark::after{content:"+"}
.pe-online
.faq[open]>summary .mark{background:var(--navy);color:#fff}
.pe-online
.faq[open]>summary .mark::after{content:"\2212"}
.pe-online
.faq[open]>summary{border-bottom:1px solid var(--line)}
.pe-online
.faq .a{padding:18px 22px 22px}
.pe-online
.faq .a p{font-size:14.5px;color:var(--ink);margin:0 0 12px!important}
.pe-online
.faq .a p:last-child{margin:0!important}
.pe-online
.faq .a a{color:var(--blue);font-weight:500}
.pe-online
.faq .a a:hover{text-decoration:underline!important}

/* ---------- regulator guidance ---------- */
.pe-online .srcnote{background:#fff;border:1px solid var(--line);border-radius:var(--r);
padding:22px 24px;margin:0 0 22px;font-size:15px;color:var(--ink);max-width:84ch}
.pe-online
.srcs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pe-online
.src{background:#fff;border:1px solid var(--line);border-radius:var(--r);
padding:16px 18px}
.pe-online
.src h3{font-size:15px!important;color:var(--title);margin:0 0 4px!important}
.pe-online
.src span{font-size:13px;color:var(--grey);display:block;margin-bottom:10px}
.pe-online
.src a{font-size:13.5px;font-weight:600;color:var(--blue)}
.pe-online
.src a:hover{text-decoration:underline!important}
.pe-online
.nonendorse{font-size:13.5px;color:var(--grey);margin:22px 0 0!important;max-width:84ch}

/* closing CTA is centred on the home and regulator pages */
.pe-online .cta{text-align:center}
.pe-online
.sec.navy>.wrap.cta>h2{max-width:23ch;margin:0 auto 16px!important}
.pe-online
.wrap.cta .lede{max-width:58ch;margin:0 auto 4px!important}
.pe-online
.close-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;
justify-content:center}

.pe-online
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}

.pe-online a:focus-visible,.pe-online summary:focus-visible{
outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}

@media (max-width:980px){
.pe-online .hero-grid{grid-template-columns:1fr;gap:32px}
.pe-online h1{font-size:34px}
.pe-online .subhead{font-size:22px}
.pe-online .sec>.wrap>h2{font-size:27px}
.pe-online .statgrid,.pe-online .regs,.pe-online .why,.pe-online .srcs,
.pe-online .steps{grid-template-columns:repeat(2,1fr)}
.pe-online .sec{padding:48px 18px}
.pe-online .sec.statband{padding:30px 18px 34px}
}

@media (max-width:640px){
.pe-online h1{font-size:29px}
.pe-online .subhead{font-size:20px}
.pe-online .sec>.wrap>h2{font-size:24px}
.pe-online .statgrid,.pe-online .regs,.pe-online .why,.pe-online .srcs,
.pe-online .steps{grid-template-columns:1fr}
.pe-online .pagenav{position:sticky;top:0;z-index:35;
box-shadow:0 2px 10px rgba(6,20,45,.09)}
.pe-online .pagenav .wrap{padding-top:10px;padding-bottom:10px}
.pe-online .pagenav h2{display:none}
.pe-online .pagenav ul{flex-wrap:nowrap;overflow-x:auto;gap:0 18px;
-webkit-overflow-scrolling:touch;scrollbar-width:none}
.pe-online .pagenav ul::-webkit-scrollbar{display:none}
.pe-online .pagenav li{flex:0 0 auto}
.pe-online .pagenav a{font-size:14px;white-space:nowrap;min-height:40px}
.pe-online .author{grid-template-columns:1fr;gap:20px}
.pe-online .author img{width:170px}
.pe-online .bulk{grid-template-columns:1fr}
.pe-online .sec{padding:42px 16px}
.pe-online .hero{padding:32px 16px 44px}
.pe-online .btn{width:100%}
}

@media (max-width:430px){
.pe-online h1{font-size:26px}
.pe-online .subhead{font-size:18px}
.pe-online .faq>summary{padding:15px 16px}
.pe-online .faq .a{padding:16px}
}

@media (prefers-reduced-motion:reduce){
.pe-online *{animation:none!important;transition:none!important}
}