/* Styles for the home page, the free courses list and the free course pages.
   Same tokens and look as the CCNA page (ccna.html keeps its own styles inside the page).
   css/site.css is loaded after this file on every page and holds the shared layer (motion, top bar, tracker). */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Fallback";src:local("Arial");size-adjust:107.12%;ascent-override:90.44%;descent-override:22.52%;line-gap-override:0%}

:root{
  --o:#c2410c;--o-d:#9a3412;--o-tint:#ff9a63;--peach:#fde3d4;--peach-2:#fbb597;
  --ink:#151a23;--mute:#536072;--grey:#5f6d80;--line:#e3e7ec;--page:#fff;--soft:#f7f8fa;--dark:#222a33;--dark-ink:#c3ccd7;
  --r-lg:36px;--r-md:28px;--r-sm:18px;
  --shadow:0 1px 0 rgba(21,26,35,.02),0 14px 34px -22px rgba(21,26,35,.18);
  --f:Inter,"Inter Fallback",system-ui,-apple-system,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font:400 18px/1.65 var(--f);-webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--o);outline-offset:3px}
h1,h2,h3{margin:0;font-family:var(--f);font-weight:800;letter-spacing:-.035em;line-height:1.08}
p{margin:0}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
section{padding:96px 0}
.soft{background:var(--soft)}
.eyebrow{display:block;margin:0 0 14px;color:var(--o);font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.h2{font-size:clamp(32px,4.4vw,50px);max-width:20ch}
.lead{margin-top:18px;color:var(--mute);font-size:19px;max-width:60ch}
.head{margin-bottom:44px}
.note{color:var(--mute);font-size:15px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--o);color:#fff;font:700 17px/1.2 var(--f);padding:16px 28px;border-radius:8px;text-decoration:none;border:0;cursor:pointer;transition:background .15s,transform .15s}
.btn:hover{background:var(--o-d);transform:translateY(-1px)}
.btn:after{content:"\2192"}
.btn.sm{padding:10px 18px;font-size:15px}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:after{content:none}
.btn.ghost:hover{border-color:var(--ink);transform:none}
.btn.light{background:#fff;color:var(--ink)}
.btn.light:hover{background:#fff3ec}

/* Top bar */
nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
nav .wrap{display:flex;align-items:center;gap:24px;height:64px}
.logo{font:700 23px var(--f);letter-spacing:-.03em;color:var(--ink);text-decoration:none;white-space:nowrap}
.logo .mo{color:var(--o)}
.logo .dc{color:var(--grey);font-weight:500}
nav .btn{margin-left:auto;white-space:nowrap;gap:0}
nav .btn:after{margin-left:8px}
nav .btn .xs{white-space:pre}

/* Hero with form */
.hero{padding:64px 0 88px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:start}
.pill{display:inline-flex;align-items:center;gap:8px;max-width:100%;background:#fff;border:1px solid var(--line);color:var(--o);font-weight:700;font-size:15px;padding:9px 18px;border-radius:999px;box-shadow:var(--shadow);margin-bottom:26px}
.pill i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--o)}
.hero h1{font-size:clamp(40px,5.4vw,66px);letter-spacing:-.045em;max-width:13ch;text-wrap:balance}
.hero .sub{margin:22px 0 0;color:var(--mute);font-size:20px;max-width:34ch}
.ticks{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
.ticks li{position:relative;padding-left:34px;font-weight:600;line-height:1.45}
.ticks li:before{content:"";position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:50%;background:var(--peach)}
.ticks li:after{content:"";position:absolute;left:8px;top:8px;width:5px;height:9px;border:solid var(--o);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}

/* Form card */
.join{background:linear-gradient(160deg,var(--peach),var(--peach-2));border-radius:var(--r-lg);padding:28px}
.join .in{background:#fff;border-radius:var(--r-md);padding:28px 24px 20px;box-shadow:var(--shadow)}
.join h2{font-size:28px;letter-spacing:-.03em;line-height:1.15}
.join .steps{list-style:none;margin:14px 0 6px;padding:0;color:var(--mute);font-size:16px;line-height:1.5;counter-reset:s}
.join .steps li{counter-increment:s;padding-left:30px;position:relative;margin-top:6px}
.join .steps li:before{content:counter(s);position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--o);color:#fff;font-size:12px;font-weight:700;line-height:20px;text-align:center}
.join iframe{display:block;width:100%;height:860px;border:0;margin:0 auto;overflow:hidden}
.join .agree{margin:10px 0 0;font-size:15px;color:var(--mute);line-height:1.5}
.join .agree a{color:var(--o);font-weight:700}
.join .note{margin-top:6px;text-align:center;font-size:14px}

/* Cards */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:30px 30px 32px;box-shadow:var(--shadow)}
.soft .card{background:#fff}
.card .ic{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:var(--peach);color:var(--o);font-weight:800;font-size:20px;margin-bottom:18px}
.card .ic img{width:48px;height:48px}
.card h3{font-size:22px;letter-spacing:-.03em;line-height:1.2}
.card p{margin-top:8px;color:var(--mute);font-size:17px;line-height:1.55}

/* Skill chips */
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-size:16px;font-weight:600}

/* Name note */
.aside{margin-top:40px;display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-left:4px solid var(--o);border-radius:var(--r-sm);padding:20px 24px;max-width:780px}
.aside p{color:var(--mute);font-size:17px;line-height:1.55}
.aside b{color:var(--ink)}

/* Course rules */
.rules{background:#fff;border:1px solid var(--line);border-top:5px solid var(--o);border-radius:var(--r-md);padding:34px 36px;box-shadow:var(--shadow);max-width:900px}
.rules h2{font-size:clamp(26px,3.2vw,36px)}
.rules>p{margin-top:10px;color:var(--mute)}
.rules ol{margin:22px 0 0;padding:0;list-style:none;counter-reset:r;display:grid;gap:16px}
.rules li{counter-increment:r;position:relative;padding-left:46px;line-height:1.55}
.rules li:before{content:counter(r);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--peach);color:var(--o);font-weight:800;line-height:30px;text-align:center}
.rules li>b{display:block}
.rules li span{color:var(--mute);font-size:17px}
.rules .warn{margin-top:24px;background:#fff3ec;border-radius:var(--r-sm);padding:16px 20px;font-weight:600;font-size:17px;line-height:1.5}
.rules .btn{margin-top:22px}
.done .rules{margin:0 auto;text-align:left}

/* Instructor */
.me{display:flex;gap:28px;align-items:center;max-width:860px}
.me img{width:120px;height:120px;border-radius:50%;flex:none;object-fit:cover}
.me h2{font-size:30px}
.me p{margin-top:8px;color:var(--mute)}
.me .row{display:flex;gap:10px;margin-top:14px}
.me .row img{width:52px;height:52px;border-radius:0}

/* Dark cross-sell card */
.dk{background:var(--dark);color:#fff;border-radius:var(--r-lg);padding:56px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:center}
.dk .eyebrow{color:var(--o-tint)}
.dk h2{font-size:clamp(28px,3.6vw,42px);max-width:22ch}
.dk p{margin-top:12px;color:var(--dark-ink);max-width:56ch}

/* Access page */
.done{padding:72px 0 88px;text-align:center}
.done .ok{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:var(--peach);margin-bottom:24px}
.done .ok:after{content:"";width:16px;height:28px;border:solid var(--o);border-width:0 5px 5px 0;transform:translateY(-3px) rotate(45deg)}
.done h1{font-size:clamp(36px,5vw,60px);letter-spacing:-.045em;max-width:16ch;margin:0 auto;text-wrap:balance}
.done .sub{max-width:620px;margin:20px auto 30px;color:var(--mute);font-size:20px}
.done .cta{display:flex;flex-direction:column;align-items:center;gap:14px}
.how{list-style:none;margin:0 auto;padding:0;max-width:760px;display:grid;gap:14px;counter-reset:h;text-align:left}
.how li{counter-increment:h;position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:20px 24px 20px 72px;box-shadow:var(--shadow)}
.how li:before{content:counter(h);position:absolute;left:22px;top:20px;width:32px;height:32px;border-radius:50%;background:var(--o);color:#fff;font-weight:800;line-height:32px;text-align:center}
.how li>b{display:block;font-size:19px}
.how span b{color:var(--ink)}
.how span{color:var(--mute);font-size:17px}
.help{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}

/* Footer */
footer{border-top:1px solid var(--line);color:var(--mute);padding:44px 0 56px;font-size:15px}
.ft{display:flex;justify-content:space-between;align-items:flex-start;gap:24px 40px;flex-wrap:wrap}
.ft p{margin-top:10px}
.soc{display:flex;flex-wrap:wrap;gap:10px}
.soc a{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border:1px solid var(--line);border-radius:999px;color:var(--ink);font-weight:700;text-decoration:none}
.soc a:hover{border-color:var(--o);color:var(--o)}
.legal{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);font-size:14px}

@media (max-width:960px){
  .hero .wrap{grid-template-columns:1fr;gap:40px}
  .hero h1,.hero .sub{max-width:none}
  .grid3{grid-template-columns:1fr}
  .dk{grid-template-columns:1fr;padding:40px 32px}
}
@media (max-width:640px){
  .wrap{padding:0 20px}
  section{padding:72px 0}
  body{font-size:17px}
  .hero{padding:40px 0 64px}
  .hero .sub,.done .sub,.lead{font-size:18px}
  .join{padding:14px;border-radius:var(--r-md)}
  .join .in{padding:22px 16px 16px;border-radius:22px}
  .join h2{font-size:24px}
  .join .in{padding:22px 10px 16px}
  .join h2,.join .steps,.join .agree{padding:0 6px}
  .card{padding:24px}
  .rules{padding:26px 20px}
  .rules li{padding-left:42px}
  .rules .btn{width:100%}
  .me{flex-direction:column;align-items:flex-start;gap:18px}
  .me img{width:96px;height:96px}
  .dk{padding:32px 24px;border-radius:var(--r-md)}
  .dk .btn,.done .cta .btn{width:100%}
  .how li{padding:18px 18px 18px 62px}
  .how li:before{left:16px;top:18px}
  .soc a{flex:1 1 auto;justify-content:center}
  .logo{font-size:20px}
}
@media (max-width:480px){nav .wrap{gap:12px}nav .btn .xs{display:none}}
@media (max-width:640px){.pill{font-size:14px;padding:8px 15px}}
@media (max-width:420px){.pill{border-radius:20px;line-height:1.35}}
@media (max-width:360px){.logo .dc{display:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

/* ================= Home page and free courses list ================= */
/* Top bar links (below 1100px they move into the phone menu, see css/site.css and data-menu on <nav>) */
.nl{display:flex;gap:28px;flex:1}
.nl a{font-size:16px;font-weight:500;text-decoration:none;white-space:nowrap}
.nl a:hover{color:var(--o)}
@media (max-width:1100px){.nl{display:none}}
@media (max-width:400px){nav .btn.sm{padding:9px 12px;font-size:14px}nav .btn.sm:after{content:none}}

/* ---------- Hero: text on the left, the course map on the right ---------- */
.hm{position:relative;overflow:hidden;padding:60px 0 88px}
.hm.has-creds{padding-bottom:0}
.hm .wrap{position:relative}
.hm-grid{display:grid;grid-template-columns:minmax(0,1fr) 540px;gap:56px;align-items:center}
.hm-text{position:relative;z-index:1;min-width:0}
.hm h1{font-size:clamp(38px,5.2vw,66px);letter-spacing:-.045em;max-width:13ch}
.hm .sub{margin-top:22px;color:var(--mute);font-size:20px;max-width:46ch}
.hm a.pill{text-decoration:none;transition:border-color .2s,transform .35s var(--settle)}
.hm a.pill:hover{border-color:var(--ink);transform:translateY(-1px)}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.proof{margin-top:20px;color:var(--mute);font-size:15px}
.proof a{color:var(--ink);font-weight:700;text-underline-offset:3px}

/* ---------- Course map ----------
   A network drawing that is also the list of courses: Muhammad Moosa in the middle, one box per course.
   A solid link with a green light and moving dots = running or open now. Amber light = ending soon.
   Dashed link with an empty light = coming soon.
   On phones the same list turns into a short tree (see "Phones" below).
   Box positions are the --x / --y numbers on each <li> (pixels inside the 540px-wide drawing);
   the links in the <svg> must be redrawn to match if a box moves. */
.map{position:relative;width:540px;max-width:100%;justify-self:end;--mx:0;--my:0}
.cli{display:inline-flex;align-items:center;gap:.6ch;margin:0 0 12px;padding:8px 12px;border-radius:10px;background:var(--ink);color:#e9edf2;font:500 13px/1.2 var(--mono);box-shadow:0 12px 24px -14px rgba(21,26,35,.7);animation:rise .6s var(--settle) .1s backwards}
.cli span{color:var(--o-tint)}
.cli b{display:inline-block;overflow:hidden;white-space:nowrap;width:calc(var(--len,12)*1ch);font-weight:500;animation:type .7s steps(var(--len,12),end) .35s backwards}
.cli i{width:.55ch;height:1.15em;background:#e9edf2;opacity:0;animation:caret 1s steps(1,end) .35s 3}
@keyframes type{from{width:0}}
@keyframes caret{0%{opacity:1}50%{opacity:0}}
.map-box{position:relative;height:480px}
.map.mini .map-box{height:300px}
.map-box:after{content:"";position:absolute;z-index:-1;inset:-200px -260px;border-radius:50%;background:radial-gradient(closest-side,rgba(251,181,151,.4),rgba(251,181,151,0));pointer-events:none}
.map-box:before{content:"";position:absolute;inset:-50px -70px;background:radial-gradient(var(--dot) 1.1px,transparent 1.4px) 0 0/18px 18px;-webkit-mask-image:radial-gradient(closest-side,#000 50%,transparent 100%);mask-image:radial-gradient(closest-side,#000 50%,transparent 100%);pointer-events:none;translate:calc(var(--mx)*-10px) calc(var(--my)*-10px);transition:translate .5s var(--ease)}
.wires{position:absolute;left:0;top:0;width:540px;height:100%;overflow:visible;translate:calc(var(--mx)*3px) calc(var(--my)*3px);transition:translate .5s var(--ease)}
.wires .w{fill:none;stroke:var(--wire);stroke-width:2;stroke-linecap:round;transition:stroke .3s}
.wires .w.on{stroke-dasharray:1;animation:draw .5s var(--ease) calc(1.05s + var(--i)*.09s) backwards}
.wires .w.soon{stroke:var(--wire-off);stroke-dasharray:5 7;animation:fade .5s ease calc(1.05s + var(--i)*.09s) backwards}
.wires .pk{fill:none;stroke:var(--o);stroke-width:5;stroke-linecap:round;stroke-dasharray:.1 62;animation:flow 2.6s linear infinite,fade .6s ease 2s backwards}
.wires .pk.b{animation-duration:3.1s,.6s}
.wires .pk.c{animation-duration:3.6s,.6s}
.wires .led{stroke:var(--canvas);stroke-width:2.5;animation:fade .4s ease calc(1.1s + var(--i)*.09s) backwards}
.wires .led.up{fill:var(--led);animation:lit .9s ease calc(1.1s + var(--i)*.09s) backwards}
.wires .led.end{fill:var(--amber-led)}
.wires .led.soon{fill:#fff;stroke:#aab3c0;stroke-width:2}
@keyframes draw{from{stroke-dashoffset:1}}
@keyframes flow{to{stroke-dashoffset:-62.1}}
@keyframes lit{0%{opacity:0;fill:var(--amber-led)}40%{opacity:1;fill:var(--amber-led)}}
.map.rest .pk{animation-play-state:paused,running}
.map.rest .n .nb>span:before{animation-play-state:paused}
.core{position:absolute;left:calc(var(--cx,270)*1px - 162px);top:calc(var(--cy,240)*1px - 56px);z-index:1;display:flex;align-items:center;gap:14px;width:324px;height:112px;padding:0 18px;border-radius:26px;background:linear-gradient(180deg,#28313b,#1e252d);color:#fff;box-shadow:0 30px 50px -26px rgba(21,26,35,.75),inset 0 1px 0 rgba(255,255,255,.1);translate:calc(var(--mx)*5px) calc(var(--my)*5px);transition:translate .5s var(--ease);animation:rise .8s var(--settle) .2s backwards}
.core img{display:block;width:68px;height:68px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px #232b34,0 0 0 4px var(--o-tint)}
.core b{display:block;font-size:21px;font-weight:800;letter-spacing:-.03em;line-height:1.15;white-space:nowrap}
.core span{display:block;margin-top:5px;color:var(--o-tint);font-size:13.5px;font-weight:700;line-height:1.3;text-wrap:balance}
.nodes{list-style:none;margin:0;padding:0}
.nodes .cap{display:none}
.n{position:absolute;left:calc(var(--x)*1px);top:calc(var(--y)*1px);z-index:2;transform:translate(-50%,-50%);translate:calc(var(--mx)*8px) calc(var(--my)*8px);transition:translate .5s var(--ease);animation:nodein .6s var(--pop) calc(1.3s + var(--i)*.09s) backwards}
@keyframes nodein{from{opacity:0;scale:.86}}
.n .nb{display:block;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px 14px 11px;box-shadow:var(--sh-1);color:var(--ink);text-decoration:none;white-space:nowrap;transition:transform .4s var(--settle),box-shadow .3s,border-color .3s}
.n b{display:block;font-size:15.5px;letter-spacing:-.015em;line-height:1.2}
.n .nb>span{display:block;position:relative;margin-top:5px;padding-left:13px;color:var(--mute);font-size:12.5px;font-weight:600;line-height:1.1}
.n .nb>span:before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%}
.n[data-s=up] .nb>span{color:var(--up)}
.n[data-s=up] .nb>span:before{background:var(--led);animation:led 2.4s ease-out infinite}
.n[data-s=end] .nb>span{color:var(--amber)}
.n[data-s=end] .nb>span:before{background:var(--amber-led)}
.n[data-s=soon] .nb>span:before{box-shadow:inset 0 0 0 1.5px #8a96a6}
@media (hover:hover){
  .n a.nb:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:#c9d0d9}
  .map-box:has(.k1 a.nb:hover) .w.k1,.map-box:has(.k2 a.nb:hover) .w.k2,.map-box:has(.k3 a.nb:hover) .w.k3,.map-box:has(.k4 a.nb:hover) .w.k4,.map-box:has(.k5 a.nb:hover) .w.k5,.map-box:has(.k6 a.nb:hover) .w.k6{stroke:var(--ink)}
}

/* ---------- Badges under the hero ---------- */
.creds{list-style:none;margin:60px 0 0;padding:26px 0 34px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px 20px}
.creds li{display:flex;align-items:center;gap:12px;min-width:0;animation:rise .8s var(--settle) calc(.5s + var(--i,0)*.07s) backwards}
.creds img{flex:none;width:58px;height:58px;padding:5px;background:#fff;border-radius:16px;box-shadow:0 0 0 1px var(--line),0 10px 18px -12px rgba(21,26,35,.3);transition:transform .45s var(--pop)}
.creds b{display:block;font-size:15px;line-height:1.25;letter-spacing:-.01em;white-space:nowrap}
.creds span{display:block;margin-top:2px;color:var(--mute);font-size:13.5px;line-height:1.3;white-space:nowrap}
@media (hover:hover){.creds li:hover img{transform:translateY(-3px) rotate(-3deg)}}
.creds-cap{display:none}

/* ---------- Course cards ---------- */
.cc{display:flex;flex-direction:column;align-items:flex-start;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:28px 28px 30px;box-shadow:var(--shadow);min-width:0}
.cc h3{font-size:26px;letter-spacing:-.03em;line-height:1.15}
.cc p{color:var(--mute);font-size:17px;line-height:1.55}
.cc .chips li{background:var(--soft);font-size:14px;padding:6px 13px}
.tx{color:var(--o);font-weight:700;font-size:16px;text-underline-offset:3px}
/* Card footer: one main button, then a row of text links under a thin line */
.cc .foot{margin-top:auto;padding-top:12px;display:flex;flex-direction:column;align-items:flex-start;gap:18px;width:100%}
.cc .foot .lk{display:flex;flex-wrap:wrap;gap:10px 28px;width:100%;padding-top:16px;border-top:1px solid var(--line)}
/* Wide card with the button on the right (CCNP ENCOR on the home page, the free courses list) */
.cc.row{flex-direction:row;align-items:center;gap:36px;padding:30px 32px}
.cc.row>div:first-child{display:flex;flex-direction:column;align-items:flex-start;gap:12px;flex:1;min-width:0}
.cc.row .foot{width:auto;flex:none;align-items:stretch;gap:14px;margin:0;padding:0;text-align:center}
.cc.row .foot .lk{justify-content:center;padding-top:14px}
.after{margin-top:26px}

/* The class that is running now: the card and its progress tracker side by side */
.feat{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:44px;align-items:center;margin-bottom:20px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:38px;box-shadow:var(--shadow);overflow:hidden}
.feat:before{content:"";position:absolute;right:-180px;top:-220px;width:700px;height:700px;border-radius:50%;background:radial-gradient(closest-side,rgba(253,227,212,.95),rgba(253,227,212,0));pointer-events:none}
.feat>*{position:relative;min-width:0}
.feat-b{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.feat h3{font-size:clamp(28px,3.2vw,38px);letter-spacing:-.035em;line-height:1.1}
.feat p{color:var(--mute);font-size:18px;line-height:1.55;max-width:44ch}
.feat .chips li{background:#fff;font-size:14px;padding:6px 13px}
.feat .foot{display:flex;flex-direction:column;align-items:flex-start;gap:18px;width:100%;margin-top:10px}
.feat .foot .lk{display:flex;flex-wrap:wrap;gap:10px 28px;width:100%;padding-top:16px;border-top:1px solid var(--line)}
.feat .pg{box-shadow:var(--sh-1)}

/* "Every live class includes": four small drawings */
.inc{margin-top:64px}
.inc h3{font-size:clamp(24px,2.6vw,30px);letter-spacing:-.03em}
.inc ul{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.inc li{background:#fff;border:1px solid var(--line);border-radius:24px;padding:10px 10px 22px;box-shadow:var(--shadow)}
.inc li>b{display:block;padding:0 12px;font-size:17px;line-height:1.3}
.inc li>span:last-child{display:block;margin-top:5px;padding:0 12px;color:var(--mute);font-size:16px;line-height:1.5}
.sc{position:relative;display:block;height:124px;margin-bottom:18px;border-radius:16px;overflow:hidden;background:var(--canvas) radial-gradient(var(--dot) 1px,transparent 1.3px) 8px 8px/16px 16px}
.sc :where(span,i,u,em,svg){position:absolute;display:block}
/* 1. A student record with a green "Enrolled" label */
.sc-reg .c{left:50%;top:50%;width:160px;height:82px;margin:-41px 0 0 -80px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 22px -16px rgba(21,26,35,.45)}
.sc-reg .a{left:12px;top:12px;width:26px;height:26px;border-radius:50%;background:var(--peach)}
.sc-reg .l1{left:48px;top:14px;width:76px;height:7px;border-radius:4px;background:#d9dfe6}
.sc-reg .l2{left:48px;top:27px;width:48px;height:7px;border-radius:4px;background:#e8ecf0}
.sc-reg em{left:12px;top:50px;padding:4px 9px 4px 22px;border-radius:999px;background:var(--up-bg);color:var(--up);font:700 11px/1.2 var(--f)}
.sc-reg em:before{content:"";position:absolute;left:9px;top:5px;width:4px;height:7px;border:solid var(--ok);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}
/* 2. A question and an answer in a chat */
.sc-chat .g{left:50%;top:50%;width:164px;height:84px;margin:-42px 0 0 -82px}
.sc-chat .q{left:0;top:0;width:108px;height:34px;border-radius:13px 13px 13px 4px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 16px -12px rgba(21,26,35,.35)}
.sc-chat .q:before,.sc-chat .q:after{content:"";position:absolute;left:12px;height:6px;border-radius:3px;background:#d9dfe6}
.sc-chat .q:before{top:8px;width:78px}
.sc-chat .q:after{top:19px;width:52px;background:#e8ecf0}
.sc-chat .r{left:86px;top:46px;width:78px;height:34px;border-radius:13px 13px 4px 13px;background:var(--o);box-shadow:0 10px 18px -12px rgba(194,65,12,.8)}
.sc-chat .r u{top:14px;width:6px;height:6px;border-radius:50%;background:#fff}
.sc-chat .r u:nth-child(1){left:24px}
.sc-chat .r u:nth-child(2){left:36px}
.sc-chat .r u:nth-child(3){left:48px}
/* 3. A small lab: three devices with their links up */
.sc-lab svg{left:50%;top:50%;width:160px;height:92px;margin:-46px 0 0 -80px;overflow:visible}
.sc-lab .lk{fill:none;stroke:var(--wire);stroke-width:2;stroke-linecap:round}
.sc-lab rect{fill:#fff;stroke:var(--line);stroke-width:1}
.sc-lab .gl{fill:none;stroke:#3b4656;stroke-width:1.6;stroke-linecap:round}
.sc-lab circle{fill:var(--led);stroke:var(--canvas);stroke-width:2}
/* 4. A recording: player with its progress bar */
.sc-rec .p{left:50%;top:50%;width:160px;height:90px;margin:-45px 0 0 -80px;border-radius:12px;background:linear-gradient(180deg,#2a333d,#1e252d);box-shadow:0 12px 22px -14px rgba(21,26,35,.7)}
.sc-rec .b{left:50%;top:26px;width:30px;height:30px;margin-left:-15px;border-radius:50%;background:#fff}
.sc-rec .b:before{content:"";position:absolute;left:12px;top:9px;border-left:9px solid var(--o);border-top:6px solid transparent;border-bottom:6px solid transparent}
.sc-rec .t{left:14px;right:14px;top:72px;height:4px;border-radius:2px;background:rgba(255,255,255,.22)}
.sc-rec .t u{left:0;top:0;width:42%;height:4px;border-radius:2px;background:var(--o-tint)}
.sc-rec .t u:after{content:"";position:absolute;right:-5px;top:-3px;width:10px;height:10px;border-radius:50%;background:#fff}
/* The drawings come alive once, when their card scrolls into view (js/site.js adds .seen) */
.inc li.seen .sc-reg em{animation:pop2 .6s var(--pop) .45s backwards}
.inc li.seen .sc-chat .r{animation:pop2 .6s var(--pop) .5s backwards}
.inc li.seen .sc-chat .r u{animation:typing .5s ease-in-out 1s 3}
.inc li.seen .sc-chat .r u:nth-child(2){animation-delay:1.12s}
.inc li.seen .sc-chat .r u:nth-child(3){animation-delay:1.24s}
.inc li.seen .sc-lab .lk{stroke-dasharray:1;animation:draw .5s var(--ease) .4s backwards}
.inc li.seen .sc-lab circle{animation:lit .9s ease .8s backwards}
.inc li.seen .sc-rec .t u{animation:fill 1.1s var(--ease) .45s backwards}
@keyframes pop2{from{opacity:0;scale:.6}}
@keyframes typing{50%{transform:translateY(-3px)}}
@keyframes fill{from{width:0}}

/* ---------- Sample class videos, in a dark panel ---------- */
.theatre{background:linear-gradient(180deg,#27303a,#1c232b);color:#fff;border-radius:var(--r-lg);padding:56px 56px 48px;box-shadow:0 40px 70px -44px rgba(21,26,35,.8),inset 0 1px 0 rgba(255,255,255,.08)}
.theatre .lead{color:var(--dark-ink)}
.theatre .tx{color:var(--o-tint)}
.theatre .tx:hover{color:#fff}
.vgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.vt{margin:0}
.vt .vf{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#11161c;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 30px 50px -30px rgba(0,0,0,.9);transition:transform .45s var(--settle),box-shadow .35s}
@media (hover:hover){.vt:hover .vf{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(255,255,255,.18),0 36px 56px -30px rgba(0,0,0,.95)}}
.ytl{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:#11161c;cursor:pointer;text-align:left}
.ytl img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.ytl:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,26,35,0) 35%,rgba(21,26,35,.72))}
.ytl .play{position:absolute;left:50%;top:50%;z-index:1;display:grid;place-items:center;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:#fff;box-shadow:0 14px 30px -8px rgba(0,0,0,.55);transition:transform .4s var(--pop)}
.ytl .play:before{content:"";margin-left:5px;border-left:18px solid var(--o);border-top:11px solid transparent;border-bottom:11px solid transparent}
.ytl .cap{position:absolute;left:22px;right:22px;bottom:18px;z-index:1;color:#fff;font:800 22px/1.2 var(--f);letter-spacing:-.025em}
.ytl .cap small{display:block;margin-bottom:3px;color:#e3e8ee;font:600 13px/1.3 var(--f);letter-spacing:0}
.ytl:hover .play{transform:scale(1.08)}
.ytl:hover img{transform:scale(1.03)}
.ytl:focus-visible{outline:3px solid var(--o);outline-offset:-3px}
.vt .vf iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vt figcaption{margin-top:14px}

/* ---------- Upcoming classes and the waitlist form ---------- */
.wl{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start;scroll-margin-top:96px}
.up{list-style:none;margin:0 0 40px;padding:0;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
.up li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-top:1px dashed #d5dbe3}
.up li:first-child{border-top:0}
.up b{font-size:19px;letter-spacing:-.02em;line-height:1.25}
.wl h3{font-size:clamp(26px,3vw,34px)}
.wl>div>p{margin-top:12px;color:var(--mute);max-width:44ch}
.wl .steps{list-style:none;margin:22px 0 18px;padding:0;counter-reset:s;display:grid;gap:10px}
.wl .steps li{counter-increment:s;position:relative;padding-left:34px;line-height:1.5}
.wl .steps li:before{content:counter(s);position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:50%;background:var(--o);color:#fff;font-size:13px;font-weight:700;line-height:22px;text-align:center}
.wl .join .in{padding:12px 10px}
@media (min-width:961px){.wl>div:first-child{position:sticky;top:96px}}

/* ---------- Free course band (peach) with a small code window ---------- */
.band{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:40px;background:linear-gradient(135deg,var(--peach),var(--peach-2));border-radius:var(--r-lg);padding:44px}
.band>div:first-child{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.band h3{font-size:clamp(28px,3.4vw,40px)}
.band p{max-width:46ch;color:#3a2a22;font-size:18px}
.band .foot{display:flex;flex-direction:column;gap:14px;text-align:center}
.band .tx{color:var(--ink)}
.snip{width:296px;margin:-8px 0;border-radius:16px;background:linear-gradient(180deg,#232b34,#1a2028);box-shadow:0 30px 50px -24px rgba(72,26,6,.55),inset 0 1px 0 rgba(255,255,255,.08);rotate:2.5deg;transition:rotate .6s var(--settle),translate .6s var(--settle)}
.band:hover .snip{rotate:0deg;translate:0 -4px}
.snip .bar{display:flex;gap:6px;padding:12px 14px 2px}
.snip .bar i{width:9px;height:9px;border-radius:50%;background:#46515e}
.snip pre{margin:0;padding:10px 16px 18px;color:#dfe5ec;font:500 12.5px/1.75 var(--mono);white-space:pre;overflow:hidden}
.snip .k{color:#ffb38a}
.snip .s{color:#9fe3b9}
.snip .c{color:#8a96a6}

/* How free courses work */
.how3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:w}
.how3 li{counter-increment:w;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:26px 26px 28px}
.how3 li:before{content:counter(w);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--peach);color:var(--o-d);font-weight:800;font-size:16px;margin-bottom:16px}
.how3 b{display:block;font-size:19px;line-height:1.3}
.how3 span{display:block;margin-top:6px;color:var(--mute);font-size:17px;line-height:1.55}

/* ---------- Student quotes ---------- */
.qs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.qs figure{margin:0;display:flex;flex-direction:column;gap:18px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:28px;box-shadow:var(--shadow)}
.qs .won{align-self:flex-start;background:var(--peach);color:var(--o-d);font-weight:700;font-size:13px;line-height:1;padding:7px 12px;border-radius:999px}
.qs blockquote{margin:0;font-size:19px;font-weight:500;line-height:1.5;letter-spacing:-.01em;flex:1}
.qs figcaption{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:center;padding-top:16px;border-top:1px solid var(--line);font-size:15px;color:var(--mute)}
.qs .av{grid-row:1/3;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--peach);color:var(--o-d);font-weight:800;font-size:15px}
.qs figcaption b{display:block;color:var(--ink);font-size:17px}
.qs figcaption .tx{grid-column:2;font-size:15px}

/* ---------- Contact card ---------- */
.dk .who-me{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.dk .who-me img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px var(--dark),0 0 0 4px var(--o-tint)}
.dk .who-me b{display:block;font-size:18px;letter-spacing:-.02em;line-height:1.2}
.dk .who-me span{display:block;margin-top:3px;color:var(--o-tint);font-size:14px;font-weight:700;line-height:1.3}
.dk .ct{display:grid;gap:10px;min-width:280px}
.dk .ct .btn{width:100%;overflow-wrap:anywhere}
.dk .ch{margin-top:18px;font-size:16px}
.dk .ch a{color:var(--o-tint);font-weight:700;text-underline-offset:3px}

/* ---------- WhatsApp chat button (fixed, bottom right). Not used on the free course pages. ---------- */
.wa{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:30;display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:11px 18px 11px 13px;font:700 15px/1 var(--f);text-decoration:none;box-shadow:0 12px 30px -10px rgba(21,26,35,.4)}
.wa svg{width:26px;height:26px;fill:#128c4a;flex:none}
.wa:hover{border-color:#128c4a}
.has-wa footer{padding-bottom:104px}

/* ---------- Page not found ---------- */
.e404{padding:88px 0 104px}
.e404 h1{font-size:clamp(38px,5.2vw,62px);letter-spacing:-.045em;max-width:16ch}
.e404 .sub{margin-top:20px;color:var(--mute);font-size:20px;max-width:52ch}
.e404 .cli{margin-bottom:26px}

/* ---------- Smaller screens ---------- */
@media (max-width:1139px){.creds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1039px){
  .theatre{padding:44px 40px 38px}
  .hm-grid{grid-template-columns:minmax(0,1fr);gap:48px}
  .hm h1{max-width:16ch}
  .map{justify-self:center}
  .creds{margin-top:52px}
  .feat{grid-template-columns:1fr;gap:30px;padding:32px}
  .inc ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .band{grid-template-columns:minmax(0,1fr) auto}
  .snip{display:none}
}
@media (max-width:960px){
  .how3{grid-template-columns:1fr}
  .wl{grid-template-columns:1fr;gap:36px}
  .cc.row{flex-direction:column;align-items:flex-start;gap:20px}
  .cc.row .foot{width:100%;align-items:flex-start;text-align:left}
  .cc.row .foot .lk{justify-content:flex-start}
  .dk .ct{min-width:0}
}
@media (max-width:760px){
  .vgrid{grid-template-columns:1fr}
  .band{grid-template-columns:1fr;gap:24px;padding:36px 32px}
  .band .foot{flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px 24px;text-align:left}
  /* Quotes become a row you swipe sideways */
  .qs{display:flex;gap:14px;margin:0 -20px;padding:4px 20px 18px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .qs::-webkit-scrollbar{display:none}
  .qs figure{flex:0 0 84%;scroll-snap-align:center}
}
/* Phones: the course map becomes a short tree under the instructor */
@media (max-width:639px){
  .hm{padding:40px 0 72px}
  .hm.has-creds{padding-bottom:0}
  .hm .sub{font-size:18px}
  .hm-grid{gap:40px}
  .map{width:100%;justify-self:stretch}
  .map-box{height:auto}
  .map-box:before,.map-box:after,.wires{display:none}
  .core{position:relative;left:auto;top:auto;width:100%;height:auto;gap:12px;padding:14px 16px;border-radius:20px;translate:none}
  .core img{width:56px;height:56px}
  .core b{font-size:19px}
  .nodes{position:relative;display:flex;flex-wrap:wrap;gap:8px;padding:14px 0 0 40px}
  .n{position:relative;left:auto;top:auto;transform:none;translate:none;animation:rise .6s var(--settle) calc(.5s + var(--i)*.07s) backwards}
  .n[data-s=up],.n[data-s=end],.nodes .cap{flex:1 1 100%}
  /* the tree lines: a trunk down the left side with a branch to each row */
  .n[data-s=up]:before,.n[data-s=end]:before,.nodes .cap:before{content:"";position:absolute;left:-16px;top:-14px;bottom:50%;width:16px;border:solid var(--wire);border-width:0 0 2px 2px;border-bottom-left-radius:10px}
  .n[data-s=up]:after,.n[data-s=end]:after{content:"";position:absolute;left:-16px;top:50%;bottom:-8px;border-left:2px solid var(--wire)}
  .nodes .cap:before{border-style:dashed;border-color:var(--wire-off)}
  .n .nb{white-space:normal}
  .n[data-s=up] .nb,.n[data-s=end] .nb{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px;padding:12px 14px 13px}
  .n[data-s=up] a.nb:after,.n[data-s=end] a.nb:after{content:"\203A";grid-column:2;grid-row:1/3;color:var(--o);font-size:24px;line-height:1}
  .n b{font-size:16px}
  .n .nb>span{font-size:13.5px;line-height:1.2}
  .nodes .cap{display:block;position:relative;margin-top:4px;padding:4px 0 0;color:var(--mute);font-size:14px;font-weight:700;line-height:1.3;animation:rise .6s var(--settle) .7s backwards}
  .n[data-s=soon] .nb{display:flex;align-items:center;gap:7px;padding:8px 12px 9px;border-radius:999px;box-shadow:none}
  .n[data-s=soon] .nb:before{content:"";flex:none;width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #8a96a6}
  .n[data-s=soon] b{font-size:13px}
  .n[data-s=soon] .nb>span{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0)}
  .creds{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:44px;padding:22px 0 10px}
  .creds li{justify-content:center}
  .creds li>div{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .creds img{width:100%;max-width:60px;height:auto;aspect-ratio:1;padding:4px;border-radius:14px}
  .creds-cap{display:block;padding:0 0 28px;color:var(--mute);font-size:14px;line-height:1.5;text-align:center}
  .acts .btn,.cc .foot .btn,.feat .foot .btn,.band .foot .btn{width:100%}
  .cc,.cc.row,.qs figure{padding:24px 22px}
  .feat{padding:24px 20px;border-radius:var(--r-md);gap:24px}
  .feat p{font-size:17px}
  .inc{margin-top:48px}
  .inc ul{gap:12px}
  .inc li{padding:8px 8px 18px;border-radius:20px}
  .inc li>b{padding:0 8px;font-size:16px}
  .inc li>span:last-child{padding:0 8px;font-size:15px}
  .sc{height:104px;margin-bottom:14px;border-radius:14px}
  .sc>*{scale:.8}
  .dk .ct .btn{font-size:15px;padding:14px 12px;white-space:nowrap}
  .dk .ct .btn:after{content:none}
  .up li{padding:16px 18px}
  .up b{font-size:17px}
  .band{padding:28px 22px;border-radius:var(--r-md)}
  .vt .vf{border-radius:16px}
  .theatre{padding:32px 20px 28px;border-radius:var(--r-md)}
  .ytl .cap{left:16px;right:16px;bottom:14px;font-size:19px}
  .wa{padding:12px;right:14px}
  .wa span{display:none}
  .wa svg{width:30px;height:30px}
  .e404{padding:56px 0 72px}
}
@media (max-width:380px){.inc ul{grid-template-columns:1fr}.sc{height:120px}.sc>*{scale:1}}

/* ================= The Cyber Six (cyber-six.html, cyber-six-access.html) ================= */
/* Totals under the hero text */
.tot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:30px 0 0;max-width:520px}
.tot div{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 14px 15px;box-shadow:var(--sh-1)}
.tot dt{font-size:30px;font-weight:800;letter-spacing:-.04em;line-height:1}
.tot dd{margin:6px 0 0;color:var(--mute);font-size:14px;line-height:1.3}
.c6 .sub{max-width:40ch}
/* Placeholder shown until the Brevo form is added */
.form-wait{display:grid;gap:4px;place-items:center;text-align:center;min-height:300px;margin-top:16px;border:2px dashed #d5dbe3;border-radius:18px;color:var(--mute);padding:24px}
.form-wait b{color:var(--ink)}
/* The six courses as one path: numbered stops on a line, ending in a dashed "coming next" stop */
.path{list-style:none;margin:0;padding:0;max-width:860px;counter-reset:none}
.path>li{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:20px;padding-bottom:20px}
.path>li:before{content:"";position:absolute;left:23px;top:48px;bottom:0;width:2px;background:var(--wire)}
.path>li:last-child{padding-bottom:0}
.path>li:last-child:before{content:none}
.path>li:nth-last-child(2):before{background:none;border-left:2px dashed var(--wire-off);width:0}
.path .no{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--dark);color:#fff;font-weight:800;font-size:18px;box-shadow:0 0 0 5px var(--soft)}
.path>li>div{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px 24px 24px;box-shadow:var(--sh-1);min-width:0}
.path h3{font-size:22px;letter-spacing:-.025em;line-height:1.2}
.path .mt{margin-top:4px;color:var(--o-d);font-size:14px;font-weight:700}
.path p{margin-top:8px;color:var(--mute);font-size:17px;line-height:1.55}
.path .chips{margin-top:14px}
.path .chips li{background:var(--soft);font-size:14px;padding:6px 12px}
.path .next .no{background:#fff;box-shadow:inset 0 0 0 2px var(--wire-off),0 0 0 5px var(--soft)}
.path .next>div{background:transparent;border:2px dashed #d5dbe3;box-shadow:none;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.path .next p{margin:0}
@media (hover:hover){.path>li>div{transition:transform .45s var(--settle),box-shadow .35s var(--ease)}.path>li:not(.next)>div:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}}
/* Enrollment links page */
.elinks{list-style:none;margin:0 auto;padding:0;max-width:860px;display:grid;gap:12px}
.elinks li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px 18px;box-shadow:var(--sh-1)}
.elinks .no{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--dark);color:#fff;font-weight:800}
.elinks b{display:block;font-size:18px;line-height:1.3}
.elinks div>span{display:block;margin-top:2px;color:var(--mute);font-size:14px}
@media (max-width:900px){.tot{max-width:none}}
@media (max-width:560px){
  .tot{grid-template-columns:repeat(2,minmax(0,1fr))}
  .path>li{grid-template-columns:36px minmax(0,1fr);gap:12px}
  .path>li:before{left:17px;top:36px}
  .path .no{width:36px;height:36px;font-size:15px}
  .path>li>div{padding:18px 18px 20px}
  .path h3{font-size:19px}
  .elinks li{grid-template-columns:32px minmax(0,1fr);row-gap:12px;padding:16px}
  .elinks .no{width:32px;height:32px;font-size:14px}
  .elinks .btn{grid-column:1/-1;width:100%}
}
/* Cyber Six: badges on the course cards, the "one at a time" note, the Webex support box */
.path>li>div{position:relative}
.path .bdg{float:right;width:84px;height:auto;margin:0 0 10px 18px;border-radius:12px;filter:drop-shadow(0 8px 14px rgba(21,26,35,.18))}
.path .chips{clear:right}
.calm{max-width:860px;margin:0 0 28px;background:var(--up-bg);border-radius:20px;padding:20px 24px}
.calm b{display:block;color:var(--up);font-size:18px}
.calm p{margin-top:6px;color:#25432f;font-size:17px;line-height:1.55}
.card .cl{margin-top:12px}
.elinks li{grid-template-columns:40px 56px minmax(0,1fr) auto}
.elinks .bdg{width:56px;height:auto;border-radius:9px}
.sup{max-width:860px;margin:28px auto 0;display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;background:var(--dark);color:#fff;border-radius:22px;padding:22px 26px}
.sup b{display:block;font-size:19px}
.sup span{display:block;margin-top:4px;color:var(--dark-ink);font-size:16px;line-height:1.5}
@media (max-width:560px){
  .path .bdg{width:64px;margin-left:12px}
  .elinks li{grid-template-columns:32px 44px minmax(0,1fr)}
  .elinks .bdg{width:44px}
  .sup .btn{width:100%}
}
/* Announcement banner above the top bar (home page). Same look as the one on the CCNA page. */
.ann{display:block;background:var(--ink);color:#fff;text-decoration:none;font-size:15px;line-height:1.4;padding:11px 0}
.ann .wrap{display:flex;align-items:center;justify-content:center;gap:12px;text-align:center}
.ann .tag{flex:none;background:var(--o);color:#fff;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.ann .msg b{font-weight:700}
.ann .go{flex:none;color:var(--o-tint);font-weight:700;white-space:nowrap}
.ann .go:after{content:" \2192"}
.ann:hover .go{text-decoration:underline}
.ann .short{display:none}
@media (max-width:640px){.ann{font-size:14px;padding:10px 0}.ann .wrap{gap:10px}.ann .long{display:none}.ann .short{display:inline}}