:root{
  --ink:#0B1F33;
  --muted:#42525F;
  --brand:#0B5FBF;
  --brand-deep:#0B4FA8;
  --brand-deeper:#072F66;
  --brand-tint:#EAF3FD;
  --amber-text:#7A4900;
  --amber-fill:#F5A524;
  --amber-tint:#FDF3E0;
  --green-text:#0F5A42;
  --green-tint:#E6F5EF;
  --bg:#F7FAFC;
  --card:#FFFFFF;
  --line:#DDE5ED;
  --radius:16px;
  --maxw:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 1.125rem/1.75 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
h1,h2,h3{line-height:1.25;margin:0 0 .5em;letter-spacing:-0.02em}
h1{font-size:clamp(2rem,6vw,3.1rem);font-weight:800}
h2{font-size:clamp(1.6rem,4vw,2.2rem);font-weight:800}
h3{font-size:1.25rem;font-weight:700}
p{margin:0 0 1em;max-width:68ch}
a{color:var(--brand);text-underline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 max(20px,env(safe-area-inset-left))}
.narrow{max-width:780px}
img,canvas,svg{max-width:100%}
code{overflow-wrap:anywhere;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.94em;background:#EEF3F8;padding:2px 6px;border-radius:5px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:100;background:#fff;color:var(--ink);padding:12px 16px;border-radius:8px}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

header{position:sticky;top:0;z-index:50;background:rgba(247,250,252,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:10px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.15rem;color:var(--ink);text-decoration:none}
.mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(150deg,var(--brand-deep),var(--brand-deeper));display:grid;place-items:center;flex:0 0 auto}
.mark svg{display:block}
nav.main{order:3;width:100%;display:flex;gap:20px;align-items:center;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 0 10px;margin:0}
nav.main::-webkit-scrollbar{display:none}
nav.main a{color:var(--muted);text-decoration:none;font-size:1rem;font-weight:600;white-space:nowrap;padding:8px 0;min-height:44px;display:flex;align-items:center}
nav.main a:hover{color:var(--ink)}
.nav-cta{margin-left:auto}
@media(min-width:1040px){
  .bar{flex-wrap:nowrap;height:70px;padding-top:0}
  nav.main{order:0;width:auto;margin-left:auto;overflow:visible;gap:24px;padding:0}
  nav.main a{min-height:0;padding:0}
  .nav-cta{margin-left:0}
}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;border-radius:999px;padding:14px 26px;font-weight:700;font-size:1.0625rem;text-decoration:none;border:2px solid transparent;cursor:pointer;font-family:inherit;text-align:center}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-deep)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--muted)}
.btn-sm{padding:10px 18px;min-height:46px;font-size:1rem}
.btn-white{background:#fff;color:var(--brand-deeper)}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn:disabled{opacity:.55;cursor:not-allowed}

.hero{background:linear-gradient(155deg,var(--brand-deep) 0%,var(--brand-deeper) 100%);color:#fff;padding:52px 0 60px}
.hero h1{color:#fff}
.hero .lede{font-size:clamp(1.125rem,2.4vw,1.375rem);color:#EAF2FB;max-width:36ch;margin-bottom:28px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.9375rem;font-weight:700;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);padding:8px 16px;border-radius:999px;margin-bottom:22px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.hero-note{font-size:1rem;color:#CFE3F7;margin:0;max-width:40ch}
.hero-points{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:14px}
.hero-points li{display:flex;gap:12px;align-items:flex-start;font-size:1.0625rem;color:#EAF2FB}
.tick{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;margin-top:2px}
@media(min-width:1040px){.hero{padding:84px 0 92px}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}}

section{padding:60px 0}
.sec-head{max-width:62ch;margin-bottom:34px}
.sec-head p{color:var(--muted);font-size:1.125rem;margin:0}
.kicker{font-size:.9375rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--brand);margin:0 0 10px}

.grid{display:grid;gap:16px}
@media(min-width:720px){.grid.g3{grid-template-columns:repeat(3,1fr)}.grid.g2{grid-template-columns:repeat(2,1fr)}.grid.g4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.grid.g4{grid-template-columns:repeat(4,1fr)}}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.card p{color:var(--muted);font-size:1.0625rem}
.card p:last-child{margin-bottom:0}
.card.featured{border:2px solid var(--brand);}
.step-n{width:40px;height:40px;border-radius:12px;background:var(--brand-tint);color:var(--brand-deep);font-weight:800;display:grid;place-items:center;margin-bottom:16px;font-size:1.125rem}

.tag{display:inline-block;font-size:.875rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:6px 12px;border-radius:8px}
.tag-blue{background:var(--brand-tint);color:var(--brand-deep)}
.tag-amber{background:var(--amber-tint);color:var(--amber-text)}
.tag-green{background:var(--green-tint);color:var(--green-text)}
.course-meta{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.9375rem;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}

.band{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.task{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.price{font-size:1.5rem;font-weight:800;color:var(--ink);white-space:nowrap;text-align:right}
.price span{display:block;font-size:.9375rem;font-weight:600;color:var(--muted)}

.callout{background:var(--amber-tint);border:1px solid #EDD3A2;border-radius:var(--radius);padding:22px 24px}
.callout p{margin:0;color:#4F3200;font-size:1.0625rem;max-width:none}
.callout strong{color:#3A2400}

.note{background:var(--brand-tint);border:1px solid #C6DEF7;border-radius:12px;padding:18px 20px;font-size:1rem;color:#093A78}
.note p{margin:0;color:inherit;max-width:none}
.note strong{color:#052A5A}

.plain{background:#fff;border:2px solid var(--brand-tint);border-radius:var(--radius);padding:22px 24px}
.plain h3{margin:0 0 12px}
.plain ul{margin:0;padding-left:22px}
.plain li{margin-bottom:8px;font-size:1.0625rem}
.plain li:last-child{margin-bottom:0}

.ph{border:2px dashed #B9C6D4;border-radius:12px;padding:18px 20px;color:var(--muted);font-size:1rem;background:#fff}
.ph strong{color:var(--ink)}
.ph-light{border:2px dashed rgba(255,255,255,.45);color:#D7E8F8;background:transparent}
.ph-light strong{color:#fff}

.dark-panel{background:linear-gradient(155deg,var(--brand-deep),var(--brand-deeper));color:#fff;border-radius:22px;padding:40px 28px}
.dark-panel h2,.dark-panel h3{color:#fff}
.dark-panel p{color:#EAF2FB}

details{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:10px}
summary{cursor:pointer;padding:20px 22px;font-weight:700;font-size:1.125rem;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:60px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.6rem;font-weight:600;color:var(--muted);flex:0 0 auto;line-height:1}
details[open] summary::after{content:"\2212"}
details .body{padding:0 22px 22px;color:var(--muted);font-size:1.0625rem}
details .body p:last-child{margin-bottom:0}

table{width:100%;min-width:480px;border-collapse:collapse;font-size:1rem;background:var(--card)}
th,td{text-align:left;padding:15px 16px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.9375rem;color:var(--muted);font-weight:800}
.table-wrap{border:1px solid var(--line);border-radius:12px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.scroll-hint{font-size:.9375rem;color:var(--muted);margin:8px 0 0}

footer{background:#08243F;color:#D7E8F8;padding:48px 0 36px;font-size:1rem}
footer a{color:#fff;text-decoration:none}
footer a:hover{text-decoration:underline}
footer p{max-width:none}
.f-grid{display:grid;gap:28px;margin-bottom:32px}
@media(min-width:780px){.f-grid{grid-template-columns:2fr 1fr 1fr}}
.f-grid h4{font-size:.9375rem;text-transform:uppercase;letter-spacing:.07em;color:#A8CBE8;margin:0 0 12px;font-weight:800}
.f-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.f-bottom{border-top:1px solid rgba(255,255,255,.16);padding-top:22px;font-size:.9375rem;color:#A8CBE8}
.f-bottom p{margin:0 0 6px}

/* tiers */
.tiers{display:grid;gap:16px;counter-reset:tier}
@media(min-width:720px){.tiers{grid-template-columns:repeat(3,1fr)}}
.tier{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.tier-badge{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:1rem;padding:8px 14px;border-radius:999px;margin-bottom:14px}
.t-1{background:var(--brand-tint);color:var(--brand-deep)}
.t-2{background:var(--amber-tint);color:var(--amber-text)}
.t-3{background:var(--green-tint);color:var(--green-text)}
.tier h3{margin-bottom:8px}
.tier p{color:var(--muted);font-size:1.0625rem;margin-bottom:0}
.tier .req{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:1rem;color:var(--ink);font-weight:600}

/* certificate */
.cert{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.cert-top{background:linear-gradient(150deg,var(--brand-deep),var(--brand-deeper));color:#fff;padding:30px 26px}
.cert-top .kicker{color:#B6D8F8;margin-bottom:8px}
.cert-top h2{color:#fff;margin:0 0 8px;font-size:clamp(1.5rem,4vw,2rem)}
.cert-top p{color:#EAF2FB;margin:0;font-size:1.0625rem}
.cert-body{padding:26px}
.cert-rows{display:grid;gap:0;margin:0 0 24px}
.cert-row{display:flex;justify-content:space-between;gap:18px;padding:15px 0;border-bottom:1px solid var(--line);font-size:1.0625rem}
.cert-row:last-child{border-bottom:0}
.cert-row dt{color:var(--muted);margin:0}
.cert-row dd{margin:0;font-weight:700;text-align:right}
.valid{display:inline-flex;align-items:center;gap:10px;background:var(--green-tint);color:var(--green-text);border:1px solid #BFE3D4;padding:12px 20px;border-radius:999px;font-weight:800;font-size:1.0625rem}
.skills{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.skills li{background:var(--brand-tint);color:var(--brand-deep);border-radius:8px;padding:9px 14px;font-size:1rem;font-weight:600}
.evidence{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:20px}
.ev-grid{display:grid;gap:18px}
@media(min-width:640px){.ev-grid{grid-template-columns:repeat(3,1fr)}}
.ev-num{font-size:2rem;font-weight:800;color:var(--ink);line-height:1.1}
.ev-lab{font-size:1rem;color:var(--muted);margin-top:4px}

/* share */
.share-box{margin-top:28px}
.fmt-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.fmt{border:2px solid var(--line);background:#fff;border-radius:999px;padding:12px 20px;min-height:48px;font-size:1rem;font-weight:700;cursor:pointer;color:var(--ink);font-family:inherit}
.fmt[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
#previewWrap{display:none;margin-top:20px}
#preview{width:100%;max-width:280px;border-radius:14px;border:1px solid var(--line);display:block}
.share-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.share-help{font-size:1rem;color:var(--muted);margin-top:14px}