/* ─────────────────────────────────────────────────────────────────────────────
   Shared design system for the per-vertical certification pages.

   Each page sets three colours on :root and everything else follows:
     --tone       accent for borders, numbers and headings (light theme)
     --tone-dk    the lifted variant used under body.theme-dark
     --band       a deep, fixed colour for the hero band — always carries white
                  text, so it must stay dark enough in BOTH themes
   ───────────────────────────────────────────────────────────────────────────── */

:root {
	--aw-blue:#0078d4;
	--mono:'Cascadia Code','JetBrains Mono','SF Mono','Consolas',monospace;
	--ink:var(--theme-text,#1b1a22);
	--card:var(--theme-card-background,#ffffff);
	--line:var(--theme-border, rgba(128,128,128,0.24));
	--sub:var(--theme-text-subtle,#5b6270);
	--tone-live:var(--tone);
	--lv-beg:#0e7c4a; --lv-int:#0b6bcb; --lv-adv:#b3400c;
	--shadow:0 1px 2px rgba(16,18,32,0.05), 0 6px 18px rgba(16,18,32,0.07);
}
body.theme-dark {
	--ink:#ffffff; --card:#2a2b34; --sub:#a8adba;
	--tone-live:var(--tone-dk);
	--lv-beg:#4ecf8b; --lv-int:#6cb2f5; --lv-adv:#f5a06a;
	--shadow:0 1px 2px rgba(0,0,0,0.3), 0 8px 22px rgba(0,0,0,0.32);
}

* { box-sizing:border-box; }
html { font-size:100%; scroll-behavior:smooth; }
body { margin:0; min-height:100vh; color:var(--ink);
	font-family:'Segoe UI','Helvetica Neue',Arial,sans-serif;
	background:var(--theme-body-background,#f5f4f8); }
a { color:inherit; }
.wrap { max-width:1120px; margin:0 auto; padding:0 1.6rem; }

/* ── HEADER ──────────────────────────────────────────── */
.site-head { position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:1rem;
	padding:0.85rem 1.6rem; backdrop-filter:blur(12px) saturate(1.3); -webkit-backdrop-filter:blur(12px) saturate(1.3);
	background:var(--theme-body-background-translucent, rgba(255,255,255,0.72)); border-bottom:1px solid var(--line); }
body.theme-dark .site-head { background:var(--theme-body-background-translucent, rgba(24,24,30,0.74)); }
.brand { display:inline-flex; align-items:center; gap:0.55rem; font-size:1rem; font-weight:600; text-decoration:none; white-space:nowrap; }
.head-title { margin-left:auto; margin-right:auto; font-size:1.05rem; font-weight:600; white-space:nowrap; }
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:2.3rem; height:2.3rem; padding:0;
	background:transparent; border:1px solid var(--line); border-radius:999px; color:var(--ink); cursor:pointer; }
.theme-toggle:hover { border-color:var(--tone-live); color:var(--tone-live); }
.theme-toggle .ico { display:none; }
.theme-toggle[data-theme="dark"] .ico-sun { display:block; }
.theme-toggle[data-theme="light"] .ico-moon { display:block; }

/* ── HERO BAND ───────────────────────────────────────── */
.band { background:var(--band); color:#fff; padding:3.2rem 0 2.6rem; }
.band .wrap { display:grid; grid-template-columns:1.35fr 1fr; gap:2.6rem; align-items:center; }
.band-back { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.86rem; font-weight:600;
	color:rgba(255,255,255,0.82); text-decoration:none; margin-bottom:1.1rem; }
.band-back:hover { color:#fff; text-decoration:underline; }
.band-kick { display:inline-block; font-family:var(--mono); font-size:0.76rem; letter-spacing:0.14em;
	text-transform:uppercase; padding:0.32rem 0.7rem; border-radius:999px;
	background:rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.28); margin-bottom:0.9rem; }
.band h1 { margin:0 0 0.7rem; font-size:clamp(2rem,4.2vw,3.05rem); line-height:1.06; font-weight:700; letter-spacing:-0.02em; }
.band .tag { margin:0 0 1.2rem; font-size:1.12rem; line-height:1.6; color:rgba(255,255,255,0.9); max-width:34rem; }
.who { display:flex; flex-wrap:wrap; gap:0.5rem; }
.who span { font-size:0.85rem; padding:0.36rem 0.8rem; border-radius:999px;
	background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.26); }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:0.7rem; }
.stat { padding:1.05rem 0.8rem; border-radius:14px; text-align:center;
	background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.24); }
.stat b { display:block; font-size:1.7rem; font-weight:700; line-height:1.1; }
.stat span { display:block; margin-top:0.2rem; font-size:0.8rem; color:rgba(255,255,255,0.85); }

/* ── SECTION SHELL ───────────────────────────────────── */
.sec { padding:3rem 0 0; }
.sec-head { margin-bottom:1.4rem; }
.sec-head .rail { display:inline-flex; align-items:center; gap:0.6rem; font-size:0.76rem; font-weight:600;
	letter-spacing:0.14em; text-transform:uppercase; color:var(--tone-live); }
.sec-head .rail::before { content:""; width:26px; height:3px; border-radius:2px; background:var(--tone-live); }
.sec-head h2 { margin:0.5rem 0 0.35rem; font-size:clamp(1.45rem,2.6vw,1.95rem); font-weight:700; letter-spacing:-0.01em; }
.sec-head p { margin:0; color:var(--sub); font-size:1.02rem; max-width:46rem; line-height:1.55; }

/* ── OUTCOME CARDS ───────────────────────────────────── */
.outcomes { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0.9rem; }
.oc { padding:1.2rem 1.25rem 1.3rem; border-radius:16px; background:var(--card);
	border:1.5px solid var(--line); box-shadow:var(--shadow); }
.oc .oc-no { display:inline-flex; align-items:center; justify-content:center; width:2.1rem; height:2.1rem;
	border-radius:9px; font-family:var(--mono); font-size:0.92rem; font-weight:600;
	color:#fff; background:var(--tone-live); margin-bottom:0.7rem; }
body.theme-dark .oc .oc-no { color:#16171d; }
.oc h3 { margin:0 0 0.35rem; font-size:1.02rem; font-weight:600; line-height:1.3; }
.oc p { margin:0; font-size:0.92rem; line-height:1.5; color:var(--sub); }

/* ── START HERE ──────────────────────────────────────── */
.start { display:grid; grid-template-columns:auto 1fr auto; gap:1.4rem; align-items:center;
	padding:1.6rem 1.7rem; border-radius:18px; background:var(--card);
	border:2.5px solid var(--tone-live); box-shadow:var(--shadow); }
.start-badge { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.15rem;
	width:5.4rem; height:5.4rem; border-radius:16px; background:var(--tone-live); color:#fff; }
body.theme-dark .start-badge { color:#16171d; }
.start-badge b { font-size:1.5rem; font-weight:700; line-height:1; }
.start-badge span { font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; }
.start-body h3 { margin:0 0 0.25rem; font-size:1.2rem; font-weight:600; }
.start-body .code { font-family:var(--mono); font-size:0.95rem; font-weight:600; color:var(--tone-live); }
.start-body p { margin:0.45rem 0 0; font-size:0.96rem; line-height:1.55; color:var(--sub); }
.start-go { display:inline-flex; align-items:center; gap:0.4rem; white-space:nowrap; padding:0.7rem 1.2rem;
	border-radius:11px; font-size:0.95rem; font-weight:600; text-decoration:none;
	color:#fff; background:var(--tone-live); }
body.theme-dark .start-go { color:#16171d; }
.start-go:hover { filter:brightness(1.1); }

/* ── THE PATH (timeline) ─────────────────────────────── */
.path { position:relative; padding-left:3.4rem; }
.path::before { content:""; position:absolute; left:1.28rem; top:0.6rem; bottom:2.2rem; width:3px;
	border-radius:2px; background:var(--tone-live); opacity:0.28; }
.node { position:relative; margin-bottom:1rem; }
.node-dot { position:absolute; left:-3.4rem; top:1.15rem; display:flex; align-items:center; justify-content:center;
	width:2.65rem; height:2.65rem; border-radius:50%; font-family:var(--mono); font-size:1rem; font-weight:600;
	color:#fff; background:var(--tone-live); border:4px solid var(--theme-body-background,#f5f4f8); }
body.theme-dark .node-dot { color:#16171d; }
.node.is-cred .node-dot { background:var(--card); color:var(--tone-live); border-color:var(--tone-live); border-width:3px; font-size:1.15rem; }

.step { padding:1.25rem 1.35rem 1.35rem; border-radius:16px; background:var(--card);
	border:1.5px solid var(--line); box-shadow:var(--shadow); }
.step-top { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem; margin-bottom:0.5rem; }
.pill { font-size:0.74rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase;
	padding:0.26rem 0.6rem; border-radius:7px; border:1.5px solid currentColor; }
.pill.k-course { color:var(--tone-live); }
.pill.k-days { color:var(--sub); }
.pill.lv-beginner { color:var(--lv-beg); }
.pill.lv-intermediate { color:var(--lv-int); }
.pill.lv-advanced { color:var(--lv-adv); }
.step h3 { margin:0 0 0.15rem; font-size:1.14rem; font-weight:600; line-height:1.3; }
.step .code { font-family:var(--mono); font-size:0.92rem; font-weight:600; color:var(--tone-live); }
.step .blurb { margin:0.5rem 0 0; font-size:0.96rem; line-height:1.55; color:var(--sub); }
.learn { margin:0.9rem 0 0; padding:0; list-style:none; display:grid; gap:0.4rem; }
.learn li { position:relative; padding-left:1.5rem; font-size:0.94rem; line-height:1.5; }
.learn li::before { content:""; position:absolute; left:0.15rem; top:0.6rem; width:0.5rem; height:0.5rem;
	border-radius:2px; background:var(--tone-live); }
.after { margin-top:0.95rem; padding:0.75rem 0.9rem; border-radius:11px; font-size:0.94rem; line-height:1.5;
	background:color-mix(in srgb, var(--tone-live) 11%, transparent);
	border-left:3px solid var(--tone-live); }
.after b { font-weight:600; color:var(--tone-live); }
.step-go { display:inline-flex; align-items:center; gap:0.35rem; margin-top:0.9rem;
	font-size:0.92rem; font-weight:600; color:var(--tone-live); text-decoration:none; }
.step-go:hover { text-decoration:underline; }

/* a credential node reads as the reward, so it is filled */
.cred { padding:1.25rem 1.35rem 1.35rem; border-radius:16px; color:#fff;
	background:var(--band); border:2px solid var(--band); box-shadow:var(--shadow); }
.cred .ctop { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem; margin-bottom:0.5rem; }
.cred .ctop .pill { color:rgba(255,255,255,0.92); }
.cred h3 { margin:0 0 0.15rem; font-size:1.16rem; font-weight:600; }
.cred .code { font-family:var(--mono); font-size:0.95rem; font-weight:600; color:rgba(255,255,255,0.92); }
.cred p { margin:0.5rem 0 0; font-size:0.95rem; line-height:1.55; color:rgba(255,255,255,0.9); }
.cred .facts { display:flex; flex-wrap:wrap; gap:0.45rem; margin-top:0.85rem; }
.cred .facts span { font-size:0.8rem; padding:0.3rem 0.65rem; border-radius:7px;
	background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.26); }
.cred-go { display:inline-flex; align-items:center; gap:0.35rem; margin-top:0.9rem; padding:0.55rem 1rem;
	border-radius:10px; font-size:0.9rem; font-weight:600; text-decoration:none;
	color:var(--band); background:#fff; }
.cred-go:hover { filter:brightness(0.94); }

/* ── WHAT'S NEXT ─────────────────────────────────────── */
.nexts { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:0.9rem; }
.nx { display:block; padding:1.15rem 1.25rem 1.25rem; border-radius:15px; text-decoration:none;
	background:var(--card); border:2px solid var(--nc,var(--line)); box-shadow:var(--shadow); }
.nx:hover { transform:translateY(-2px); }
.nx .nx-k { font-family:var(--mono); font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--nc,var(--sub)); }
.nx h3 { margin:0.35rem 0 0.3rem; font-size:1.04rem; font-weight:600; }
.nx p { margin:0; font-size:0.9rem; line-height:1.5; color:var(--sub); }

/* ── FAQ ─────────────────────────────────────────────── */
.faq { display:grid; gap:0.7rem; }
.qa { padding:1.05rem 1.2rem; border-radius:14px; background:var(--card); border:1.5px solid var(--line); }
.qa h3 { margin:0 0 0.35rem; font-size:1rem; font-weight:600; }
.qa p { margin:0; font-size:0.94rem; line-height:1.55; color:var(--sub); }
.qa a { color:var(--tone-live); font-weight:600; }

/* ── FOOTER ──────────────────────────────────────────── */
footer.site-foot { max-width:1120px; margin:3rem auto 0; padding:2rem 1.6rem 3rem; text-align:center;
	font-size:0.9rem; color:var(--sub); border-top:1px solid var(--line); }
footer.site-foot a { color:var(--aw-blue); font-weight:600; }

@media (max-width:900px) {
	.band .wrap { grid-template-columns:1fr; }
	.start { grid-template-columns:1fr; text-align:left; }
	.path { padding-left:2.9rem; }
	.node-dot { left:-2.9rem; width:2.3rem; height:2.3rem; }
	.path::before { left:1.05rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition:none !important; animation:none !important; } html { scroll-behavior:auto; } }