/* Shared layer for every page. Loaded after each page's own styles.
   Holds: the look that every page shares (labels, buttons, shadows, status lights),
   the top bar and its phone menu, the class progress tracker, all motion
   (page load, scroll, hover, page-to-page fade) and the footer links.
   All motion is switched off when the visitor's device asks for reduced motion. */
:root{
  /* Status colours: green = running or open, amber = ending soon, grey = coming soon */
  --up:#166534;--up-bg:#e6f5ec;--ok:#178a48;--led:#1faa59;--amber:#92400e;--amber-bg:#fcefd2;--amber-led:#e08a0b;
  /* The lab canvas: quiet dot grid, grey links (same as the lab drawing on the CCNA page) */
  --canvas:#fbfbfc;--dot:#d3d9e1;--wire:#9aa5b4;--wire-off:#c3cad4;
  /* Second typeface, used only for network text: the command line, dates and times */
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  /* Motion curves. --settle overshoots by about 2% (a soft landing); --pop by about 11% (small things only) */
  --ease:cubic-bezier(.2,.7,.2,1);
  --settle:cubic-bezier(.2,.9,.3,1.04);
  --pop:cubic-bezier(.34,1.5,.64,1);
  /* Depth: three shadow levels */
  --sh-1:0 1px 0 rgba(21,26,35,.02),0 1px 2px rgba(21,26,35,.04),0 16px 34px -22px rgba(21,26,35,.2);
  --sh-2:0 1px 0 rgba(21,26,35,.03),0 2px 5px rgba(21,26,35,.05),0 30px 56px -30px rgba(21,26,35,.36);
  --sh-3:0 2px 6px rgba(21,26,35,.08),0 34px 60px -28px rgba(21,26,35,.55);
  --shadow:var(--sh-1);
}
@supports (transition-timing-function:linear(0,1)){
  :root{
    --settle:linear(0,.002 .7%,.017 2.2%,.055 4.1%,.124 6.5%,.221 9.3%,.34 12.5%,.471 16%,.602 19.8%,.722 23.9%,.824 28.3%,.903 33%,.959 37.9%,.994 43.1%,1.012 48.5%,1.019 54.2%,1.019 60.1%,1.015 66.2%,1.011 72.5%,1.006 79.1%,1.003 85.9%,1.001 92.8%,1);
    --pop:linear(0,.004 .7%,.032 2.2%,.106 4.1%,.234 6.5%,.407 9.3%,.606 12.5%,.798 16%,.957 19.8%,1.064 23.9%,1.114 28.3%,1.115 33%,1.087 37.9%,1.048 43.1%,1.014 48.5%,.993 54.2%,.986 60.1%,.988 66.2%,.993 72.5%,.998 79.1%,1.001 85.9%,1.002 92.8%,1);
  }
}
::selection{background:var(--peach);color:var(--ink)}
h1,h2,h3{text-wrap:balance}
p,li,blockquote{text-wrap:pretty}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Small label above a heading: sentence case, no wide spacing */
.eyebrow,.vm{font-size:15px;font-weight:700;letter-spacing:0;text-transform:none}
.eyebrow{margin-bottom:12px}

/* ---------- Top bar ---------- */
nav{background:rgba(255,255,255,.8);-webkit-backdrop-filter:saturate(1.7) blur(16px);backdrop-filter:saturate(1.7) blur(16px);border-bottom-color:transparent;transition:border-color .3s,box-shadow .3s,background-color .3s}
nav.scrolled,nav.open{background:rgba(255,255,255,.92);border-bottom-color:var(--line);box-shadow:0 14px 30px -26px rgba(21,26,35,.45)}
nav .sp{position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:var(--o);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.logo{transition:opacity .2s}
.logo:hover{opacity:.82}
.nl a{position:relative;transition:color .2s}
.nl a:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--o);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease)}
.nl a:hover:after,.nl a[aria-current]:after{transform:scaleX(1)}
.nl a[aria-current]{color:var(--o)}
.nl .mo{display:none}

/* Phone menu (the button is added by js/site.js) */
.mb{display:none;order:3;flex:none;position:relative;width:42px;height:42px;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .2s}
.mb:hover{border-color:var(--ink)}
.mb:before,.mb:after{content:"";position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:var(--ink);transition:transform .3s var(--settle)}
.mb:before{top:14px}
.mb:after{bottom:14px}
nav.open .mb:before{transform:translateY(5px) rotate(45deg)}
nav.open .mb:after{transform:translateY(-5px) rotate(-45deg)}
nav.has-mb .mb{display:block}
nav.has-mb .nl{display:none}
nav.has-mb.open .nl{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 26px 40px -26px rgba(21,26,35,.4);padding:6px 20px 14px;max-height:calc(100vh - 70px);overflow:auto;animation:drop .28s var(--settle) backwards}
nav.has-mb.open .nl a{display:block;padding:14px 4px;font-size:17px;font-weight:600;border-top:1px solid var(--line);animation:rise .4s var(--settle) backwards}
nav.has-mb.open .nl a:nth-child(2){animation-delay:.03s}
nav.has-mb.open .nl a:nth-child(3){animation-delay:.06s}
nav.has-mb.open .nl a:nth-child(4){animation-delay:.09s}
nav.has-mb.open .nl a:nth-child(5){animation-delay:.12s}
nav.has-mb.open .nl a:nth-child(6){animation-delay:.15s}
nav.has-mb.open .nl a:nth-child(7){animation-delay:.18s}
nav.has-mb.open .nl a:first-child{border-top:0}
nav.has-mb.open .nl a:after{content:none}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}}
@media (max-width:560px){nav.lite.has-mb .btn{display:none}nav.lite.has-mb .mb{margin-left:auto}}
@media (max-width:480px){nav.has-mb:not(.lite) .logo .dc{display:none}}
@media (max-width:380px){nav.has-mb:not(.lite) .btn .xs{display:none}}

/* ---------- Buttons and text links ---------- */
.btn{transition:background-color .2s,border-color .2s,box-shadow .25s,transform .25s var(--settle)}
.btn:after{display:inline-block;transition:transform .3s var(--settle)}
.btn:hover:after{transform:translateX(3px)}
.btn:active{transform:scale(.975)}
.btn:not(.ghost):not(.light){box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 1px 2px rgba(154,52,18,.35),0 14px 24px -16px rgba(194,65,12,.9)}
.btn:not(.ghost):not(.light):hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2px 4px rgba(154,52,18,.35),0 18px 28px -16px rgba(194,65,12,.95)}
.btn.ghost{box-shadow:0 1px 2px rgba(21,26,35,.04)}
.tx,.ask,.vl{text-decoration-thickness:1.5px;transition:color .2s,text-underline-offset .2s}
.tx:hover,.ask:hover{color:var(--o-d);text-underline-offset:5px}

/* ---------- Status lights and labels ---------- */
@keyframes led{0%{box-shadow:0 0 0 0 rgba(31,170,89,.55)}70%,100%{box-shadow:0 0 0 7px rgba(31,170,89,0)}}
@keyframes ring{0%{box-shadow:inset 0 0 0 2px var(--o),0 0 0 0 rgba(194,65,12,.45)}70%,100%{box-shadow:inset 0 0 0 2px var(--o),0 0 0 7px rgba(194,65,12,0)}}
.pill.live{color:var(--ink)}
.pill.live i{background:var(--led);animation:led 2.4s ease-out infinite}
.st{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;line-height:1;padding:7px 12px;border-radius:999px;white-space:nowrap}
.st:before{content:"";width:7px;height:7px;border-radius:50%;flex:none}
.st.run{background:var(--up-bg);color:var(--up)}
.st.run:before{background:var(--led);animation:led 2.4s ease-out infinite}
.st.end{background:var(--amber-bg);color:var(--amber)}
.st.end:before{background:var(--amber-led)}
.st.soon{background:var(--soft);color:var(--mute);box-shadow:inset 0 0 0 1px var(--line)}
.st.soon:before{box-shadow:inset 0 0 0 1.5px #8a96a6}
.st.off{background:#eceff3;color:var(--ink)}
.st.off:before{background:#8a96a6}
.st.free{background:var(--dark);color:#fff}
.st.free:before{background:var(--o-tint)}

/* ---------- Class progress tracker ----------
   The numbers, the week rows and the next class are filled in by js/site.js. */
.pg{position:relative;text-align:left;background:#fff;border:1px solid var(--line);border-radius:28px;padding:24px 24px 22px;box-shadow:var(--sh-2)}
.pg-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.pg-top small{color:var(--mute);font-size:13px;font-weight:600;line-height:1.2}
.pg-n{display:flex;align-items:baseline;gap:10px;margin-top:18px;color:var(--mute);font-size:17px;line-height:1.3}
.pg-n b{color:var(--ink);font-size:60px;font-weight:800;letter-spacing:-.05em;line-height:.85;font-variant-numeric:tabular-nums}
.pg-w{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--line)}
.pg-w li{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:14px;padding:11px 2px;border-bottom:1px solid var(--line);font-size:16px;line-height:1.3}
.pg-w b{min-width:62px;font-weight:700;white-space:nowrap}
.pg-w .tk{display:inline-flex;align-items:center;min-width:52px}
.pg-w i{position:relative;flex:none;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #c6cdd8}
.pg-w i+i{margin-left:12px}
.pg-w i+i:before{content:"";position:absolute;left:-12px;top:9px;width:12px;height:2px;background:#c6cdd8}
.pg-w i.ok{background:var(--ok);box-shadow:none}
.pg-w i.ok:after{content:"";position:absolute;left:7px;top:4px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pg-w i.ok+i:before{background:var(--ok)}
.pg-w i.nx{box-shadow:inset 0 0 0 2px var(--o);animation:ring 2.2s ease-out infinite}
.pg-w i.live{background:var(--led);box-shadow:none;animation:led 1.6s ease-out infinite}
.pg-w li>span:last-child{color:var(--mute)}
.pg-w li.now>span:last-child{color:var(--ink);font-weight:600}
.pg-next{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;margin-top:16px;padding:14px 16px 15px;border-radius:18px;background:var(--soft)}
.pg-next small{grid-column:1;color:var(--mute);font-size:13px;font-weight:600;line-height:1.3}
.pg-next b{grid-column:1;font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1.2}
.pg-next em{grid-column:2;grid-row:1/3;font:600 13px/1 var(--f);color:var(--o-d);background:var(--peach);padding:7px 11px;border-radius:999px;white-space:nowrap}
.pg-next em:empty{display:none}
.pg-next>span{grid-column:1/-1;margin-top:3px;color:var(--mute);font:500 13px/1.5 var(--mono)}
.pg-f{margin-top:14px;color:var(--mute);font-size:15px;line-height:1.5}
.pg-f b{color:var(--ink);font-weight:600}
/* The ticks pop in one after another the first time the tracker is seen */
.js .pg.wait .pg-w i{opacity:0}
.pg.seen .pg-w i{animation:pop .6s var(--pop) backwards;animation-delay:calc(var(--n,0)*80ms + .1s)}
.pg.seen .pg-w i.nx{animation:pop .6s var(--pop) backwards,ring 2.2s ease-out infinite;animation-delay:calc(var(--n,0)*80ms + .1s),1.4s}
.pg.seen .pg-w i.live{animation:pop .6s var(--pop) backwards,led 1.6s ease-out infinite;animation-delay:calc(var(--n,0)*80ms + .1s),1.4s}
@keyframes pop{from{opacity:0;transform:scale(.4)}}
@media (max-width:640px){.pg{padding:20px 18px 18px;border-radius:22px}.pg-n b{font-size:52px}.pg-w li{gap:12px;font-size:15px}.pg-w b{min-width:56px}}
@media (max-width:360px){.pg-next em{grid-column:1;grid-row:auto;justify-self:start;margin-top:6px}}

/* Timeline on the CCNA page: a finished step gets a green tick */
.tl li.done:before{background:var(--ok)}
.tl li.done:after{background:var(--ok)}
.tl li.done time:after{content:"";position:absolute;left:5.5px;top:10px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ---------- Motion: page load ----------
   The first screen settles into place once. In the HTML, a block marked data-rise
   brings in its children one after another. */
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
@keyframes fade{from{opacity:0}}
[data-rise]>*,.hero .pg,.hero .join,.hero .shot,.hero .stats{animation:rise .8s var(--settle) backwards}
[data-rise]>:nth-child(2){animation-delay:.07s}
[data-rise]>:nth-child(3){animation-delay:.14s}
[data-rise]>:nth-child(4){animation-delay:.21s}
[data-rise]>:nth-child(5){animation-delay:.28s}
[data-rise]>:nth-child(6){animation-delay:.35s}
[data-rise]>:nth-child(7){animation-delay:.42s}
.hero .pg,.hero .join{animation-delay:.24s}
.hero .shot{animation-delay:.38s}
.hero .stats{animation-delay:.46s}
.wa{animation:rise .7s var(--settle) 1.2s backwards}

/* ---------- Motion: blocks settle into place when scrolled into view (classes set by js/site.js) ---------- */
.rv{opacity:0;transform:translateY(18px)}
.rv.in{opacity:1;transform:none;transition:opacity .6s var(--ease) var(--d,0ms),transform .9s var(--settle) var(--d,0ms)}

/* ---------- Motion: cards lift a little under the mouse ---------- */
@media (hover:hover){
  .cc,.card,.how3 li,.qs figure,.tile,.bn article,.tm figure,.who>div,.links a,.nry a,.inc li{transition:transform .45s var(--settle),box-shadow .35s var(--ease),border-color .3s}
  .cc:hover,.card:hover,.how3 li:hover,.qs figure:hover,.tile:hover,.bn article:hover,.tm figure:hover,.who>div:hover,.links a:hover,.nry a:hover,.inc li:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
  .badges img,.ib img{transition:transform .45s var(--pop)}
  .badges li:hover img,.ib li:hover img{transform:translateY(-3px) rotate(-3deg)}
  .zoom img{transition:transform .6s var(--ease)}
  .zoom:hover img{transform:scale(1.02)}
}

/* ---------- Motion: a soft fade when moving from one page to the next (browsers that support it) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.24s;animation-timing-function:ease}

/* ---------- "Not ready yet?" links (CCNA page) ---------- */
.nry{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.nry a{position:relative;display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:26px 56px 26px 26px;text-decoration:none;box-shadow:var(--shadow)}
.nry a:after{content:"\2192";position:absolute;right:24px;top:26px;color:var(--o);font-weight:700;transition:transform .3s var(--settle)}
.nry a:hover:after{transform:translateX(3px)}
.nry b{display:block;font-size:20px;letter-spacing:-.02em;line-height:1.25}
.nry span{display:block;margin-top:6px;color:var(--mute);font-size:16px;line-height:1.5}
@media (max-width:900px){.nry{grid-template-columns:1fr;gap:14px}}

/* ---------- WhatsApp chat button: one soft ring, once, a few seconds after the page opens ---------- */
.wa{transition:border-color .2s,box-shadow .3s,transform .35s var(--settle)}
.wa:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(21,26,35,.45)}
.wa:before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;animation:hail 1.8s ease-out 5s 2 backwards}
@keyframes hail{0%{box-shadow:0 0 0 0 rgba(18,140,74,.4)}100%{box-shadow:0 0 0 14px rgba(18,140,74,0)}}

/* ---------- Footer links ---------- */
footer .fl{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
footer .fl a{color:var(--ink);font-weight:600;text-decoration:none;transition:color .2s}
footer .fl a:hover{color:var(--o)}
footer .fl+.legal{margin-top:18px;padding-top:0;border-top:0}
.soc a{transition:border-color .2s,color .2s,transform .35s var(--settle)}
@media (hover:hover){.soc a:hover{transform:translateY(-2px)}}

/* ---------- Reduced motion: everything is shown at once and stays still ---------- */
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  .js .pg.wait .pg-w i{opacity:1}
  .wires .pk{display:none}
  @view-transition{navigation:none}
}