/* ==========================================================================
   TuLern website.

   The palette starts from the learning platform's own :root, so a learner who
   signs in does not feel they have changed product. What is added here is
   weight: the platform is a working tool and can afford to be quiet, but a
   website has about two seconds to land, so the top of every page is dark,
   the headline is large, and the accent is used once, hard.
   ========================================================================== */

:root{
  /* From the platform, unchanged. */
  --pink:#FF0082;
  --pink-dark:#D6006D;
  --pink-deep:#A8005A;
  --pink-tint:#FFF0F7;
  --ink:#213236;
  --ink-deep:#162326;
  --body:#333333;
  --muted:#69727D;
  --line:#E4E7EA;
  --line-soft:#EFF1F3;
  --paper:#FFFFFF;
  --soft:#F5F6F7;
  --ok:#1E7A4C;   --ok-tint:#E7F5EE;
  --warn:#9A6400; --warn-tint:#FDF3E0;
  --bad:#C4123C;  --bad-tint:#FDECF0;
  --pill:999px;
  --r:18px;
  --font:"Gotham Rounded","GothamRounded",Nunito,"Segoe UI",Arial,sans-serif;

  /* Added for the website. */
  --night:#101B1E;          /* the dark the hero sits on */
  --night-2:#16272B;
  --night-3:#1D3238;
  --night-line:rgba(255,255,255,.12);
  --night-text:#C9D8DB;
  --night-bright:#E9F0F1;
  --hot:#FF4FA3;            /* the pink lifted for dark ground */
  --ink-soft:#41535A;
  --ink-read:#4A5B60;
  --shell:1240px;
  --gut:20px;
  --head:66px;
  --shadow:0 1px 2px rgba(16,27,30,.05), 0 10px 30px rgba(16,27,30,.07);
  --shadow-lift:0 3px 8px rgba(16,27,30,.08), 0 24px 60px rgba(16,27,30,.16);
  --shadow-night:0 30px 70px rgba(0,0,0,.45);
}

@font-face{
  font-family:"Gotham Rounded";
  src:url("fonts/GothamRounded-Book.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Gotham Rounded";
  src:url("fonts/GothamRounded-Medium.woff2") format("woff2");
  font-weight:500 600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Gotham Rounded";
  src:url("fonts/GothamRounded-Bold.woff2") format("woff2");
  font-weight:700 900; font-style:normal; font-display:swap;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:var(--font);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

img,svg{max-width:100%}
img{height:auto;border:0}
a{color:var(--pink-dark);text-decoration:none}
a:hover{color:var(--pink-deep)}

h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:800;line-height:1.1;letter-spacing:-0.03em;text-wrap:balance}
h1{font-size:clamp(36px,5.1vw,58px);line-height:1.02;letter-spacing:-0.04em;text-wrap:normal}
h2{font-size:clamp(28px,4.8vw,46px);line-height:1.06;letter-spacing:-0.035em}
h3{font-size:clamp(19px,2.3vw,23px);letter-spacing:-0.02em;line-height:1.24}
h4{font-size:17px;font-weight:700;letter-spacing:-0.012em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

:focus-visible{outline:3px solid var(--hot);outline-offset:3px;border-radius:6px}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:300;padding:12px 18px;background:var(--pink-dark);color:#fff;border-radius:0 0 12px 0}
.skip:focus{left:0;color:#fff}

/* ------------------------------------------------------------------ shell */

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.band{padding-block:clamp(26px,3vw,40px)}
.band-tight{padding-block:clamp(18px,2.2vw,26px)}
.band-soft{background:var(--soft)}
.band-night{background:var(--night);color:var(--night-text)}
.band-night h2,.band-night h3,.band-night h4{color:#fff}
.rule{height:1px;background:var(--line);border:0;margin:0}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;
  font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--pink-dark);
}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor;border-radius:2px}
.band-night .eyebrow,.hero .eyebrow{color:var(--hot)}

.lede{font-size:clamp(16.5px,1.75vw,19.5px);line-height:1.62;color:var(--ink-read)}
.band-night .lede{color:var(--night-text);font-weight:500}
.measure{max-width:56ch}

/* --------------------------------------------------------------- controls */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:0 28px;border:2px solid transparent;border-radius:var(--pill);
  font:inherit;font-size:16px;font-weight:800;letter-spacing:-0.01em;cursor:pointer;text-align:center;
  transition:transform .15s cubic-bezier(.2,.8,.3,1),background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;
}
.btn svg{transition:transform .15s cubic-bezier(.2,.8,.3,1)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--pink-dark);color:#fff;box-shadow:0 8px 22px rgba(214,0,109,.28)}
.btn-primary:hover{background:var(--pink);color:#fff;box-shadow:0 10px 30px rgba(255,0,130,.36)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--ink-deep);color:#fff}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:var(--soft);color:var(--ink)}
.btn-onink{background:#fff;color:var(--ink)}
.btn-onink:hover{background:#EFF1F3;color:var(--ink)}
.btn-onink-ghost{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.btn-onink-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1);color:#fff}
.btn-sm{min-height:42px;padding:0 18px;font-size:14.5px;border-width:1.5px}
.btn-block{width:100%}

/* A light button standing on any of the dark grounds flips itself, so a page
   that was written for a white top cannot end up with grey text on near black
   when that top turns dark. */
.hero .btn-ghost,.course-head .btn-ghost,.cat-head .btn-ghost,
.band-night .btn-ghost,.cta .btn-ghost,.contact-card .btn-ghost{
  background:transparent;border-color:rgba(255,255,255,.34);color:#fff;
}
.hero .btn-ghost:hover,.course-head .btn-ghost:hover,.cat-head .btn-ghost:hover,
.band-night .btn-ghost:hover,.cta .btn-ghost:hover,.contact-card .btn-ghost:hover{
  border-color:#fff;background:rgba(255,255,255,.1);color:#fff;
}
.hero .btn-ink,.course-head .btn-ink,.cat-head .btn-ink,
.band-night .btn-ink,.cta .btn-ink{background:#fff;color:var(--ink);border-color:#fff}
.hero .btn-ink:hover,.course-head .btn-ink:hover,.cat-head .btn-ink:hover,
.band-night .btn-ink:hover,.cta .btn-ink:hover{background:#E4EAEB;color:var(--ink)}

.tag{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:7px;
  font-size:11.5px;font-weight:800;letter-spacing:.01em;background:var(--soft);color:var(--ink-read);
}
.tag-time{background:var(--soft);color:var(--muted);font-weight:600}

.pill{
  display:inline-flex;align-items:center;gap:8px;padding:10px 17px;
  border:1.5px solid var(--line);border-radius:var(--pill);background:var(--paper);color:var(--ink);
  font:inherit;font-size:14px;font-weight:700;cursor:pointer;
  transition:border-color .14s ease,background .14s ease,color .14s ease;
}
.pill:hover{border-color:var(--ink);background:var(--soft);color:var(--ink)}
.pill[aria-pressed="true"],.pill.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* trust chips, the row under the hero buttons */
.chips-trust{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.chips-trust span{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 15px;border-radius:var(--pill);
  border:1px solid var(--night-line);background:rgba(255,255,255,.05);
  font-size:13.5px;font-weight:700;color:var(--night-bright);
}
.chips-trust b{display:block;width:6px;height:6px;border-radius:50%;background:var(--hot);flex-shrink:0}

/* ------------------------------------------------------------- announce */

.announce{
  background:var(--night-2);color:var(--night-bright);
  font-size:13.5px;font-weight:600;
}
.announce-in{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;min-height:40px;padding-block:8px}
.announce a{color:#fff;font-weight:700}
.announce a:hover{color:var(--hot)}
.announce .sp{flex-grow:1}
.announce em{font-style:normal;color:var(--hot);font-weight:800}
.announce-side{display:none;align-items:center;gap:20px}
@media (min-width:820px){.announce-side{display:flex}}

/* ------------------------------------------------------------------ header */

.top{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.93);backdrop-filter:saturate(1.7) blur(12px);
  border-bottom:1px solid var(--line);
}
.top-in{display:flex;align-items:center;gap:16px;min-height:var(--head)}
.brand{display:inline-flex;align-items:center;font-size:26px;font-weight:900;letter-spacing:-0.045em;color:var(--ink);flex-shrink:0}
.brand:hover{color:var(--ink)}
.brand em{font-style:normal;color:var(--pink-dark)}

.nav{display:none}
.nav a{
  display:inline-flex;align-items:center;height:38px;padding:0 2px;
  font-size:15px;font-weight:700;color:var(--ink);border-bottom:2.5px solid transparent;
}
.nav a:hover{color:var(--pink-dark)}
.nav a[aria-current="page"]{border-bottom-color:var(--pink-dark)}

.top-end{display:flex;align-items:center;gap:10px;margin-left:auto}
.top-login{display:none}
.top-tel{display:none;font-size:15px;font-weight:800;color:var(--ink)}
.top-tel:hover{color:var(--pink-dark)}

.burger{
  display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border:1.5px solid var(--line);border-radius:13px;background:var(--paper);color:var(--ink);cursor:pointer;
}
.burger:hover{background:var(--soft)}

.drawer{display:none;border-top:1px solid var(--line);background:var(--paper);padding:14px var(--gut) 24px}
.drawer.open{display:block}
.drawer a{
  display:flex;align-items:center;justify-content:space-between;padding:14px 2px;
  font-size:17px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--line-soft);
}
.drawer a:last-of-type{border-bottom:0}
.drawer .btn{margin-top:16px}

@media (min-width:1020px){
  :root{--head:78px}
  .nav{display:flex;align-items:center;gap:28px;margin-left:26px}
  .top-login,.top-tel{display:inline-flex}
  .burger{display:none}
  .drawer{display:none !important}
}

/* -------------------------------------------------------------------- hero */

.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--night);color:var(--night-text);
  padding-block:clamp(34px,4.2vw,56px) clamp(38px,4.6vw,62px);
}
/* the photograph, furthest back of all. The scrim over it keeps the left
   side, where the words are, almost as dark as the flat colour was. */
.hero-bg{position:absolute;inset:0;z-index:-3;overflow:hidden}
/* Flipped left to right. The people in the photograph stand on its left,
   which is where the headline sits and where the cover is heaviest, so
   mirroring it carries them across to the side that is actually open. */
.hero-bg img{
  width:100%;height:100%;object-fit:cover;object-position:50% 28%;display:block;
  transform:scaleX(-1);
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(16,27,30,.96) 0%,
    rgba(16,27,30,.93) 33%,
    rgba(16,27,30,.72) 54%,
    rgba(16,27,30,.42) 78%,
    rgba(16,27,30,.32) 100%);
}
@media (max-width:900px){
  .hero-bg::after{background:linear-gradient(180deg, rgba(16,27,30,.90) 0%, rgba(16,27,30,.95) 60%)}
}
/* the glow. one accent, used once, hard. */
.hero::before{
  content:"";position:absolute;inset:-30% -10% auto -10%;height:120%;z-index:-2;
  background:
    radial-gradient(820px 560px at 72% 2%,  rgba(255,0,130,.50) 0%, rgba(255,0,130,0) 62%),
    radial-gradient(700px 520px at 6% 86%,  rgba(96,38,132,.55) 0%, rgba(96,38,132,0) 68%),
    radial-gradient(480px 340px at 96% 74%, rgba(255,79,163,.22) 0%, rgba(255,79,163,0) 70%);
}
/* a fine dot grid, so the dark is not a flat slab */
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:linear-gradient(to bottom, #000 0%, transparent 78%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, transparent 78%);
}

.hero-grid{display:grid;gap:clamp(28px,3.4vw,44px);align-items:center}
@media (min-width:1020px){.hero-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}}

.hero h1{color:#fff;margin-bottom:20px}
.hero h1 span{display:block}
.hero h1 .said{
  color:var(--hot);
  background:linear-gradient(96deg,#FF4FA3 0%,#FF0082 48%,#FF8DC4 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero .lede{color:#D2DFE1;max-width:50ch;font-weight:500}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}

/* the stat row, inside the dark rather than a white strip under it */
.hero-stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px;
  margin-top:clamp(26px,3vw,38px);padding-top:clamp(20px,2.3vw,27px);
  border-top:1px solid var(--night-line);
}
@media (min-width:720px){.hero-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hero-stats b{
  display:block;font-size:clamp(30px,4.2vw,40px);font-weight:900;color:#fff;
  line-height:1;letter-spacing:-0.045em;font-variant-numeric:tabular-nums;
}
.hero-stats span{display:block;margin-top:8px;font-size:13.5px;font-weight:700;letter-spacing:.02em;color:#AFC3C8;max-width:19ch}

/* ------------------------------------------------- the chooser, right side */

.chooser{
  background:var(--paper);border-radius:24px;padding:26px 24px 24px;
  box-shadow:0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
}
.chooser h2{font-size:21px;letter-spacing:-0.025em;color:var(--ink)}
.chooser > p{margin:7px 0 18px;font-size:14.5px;color:var(--muted)}
.chooser-list{display:grid;gap:9px}
.chooser-list a{
  display:flex;align-items:center;gap:13px;padding:14px 15px;
  border:1.5px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);
  transition:border-color .14s ease,background .14s ease,transform .14s ease;
}
.chooser-list a:hover{border-color:var(--pink-dark);background:var(--pink-tint);color:var(--ink);transform:translateX(2px)}
.chooser-list i{
  display:grid;place-items:center;width:40px;height:40px;border-radius:12px;flex-shrink:0;
  background:var(--pink-tint);color:var(--pink-dark);
}
.chooser-list .t{flex-grow:1;min-width:0}
.chooser-list b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-0.012em}
.chooser-list small{display:block;font-size:13px;color:var(--muted);font-weight:600}
.chooser-list .n{
  flex-shrink:0;min-width:34px;height:26px;padding:0 9px;border-radius:var(--pill);
  background:var(--ink);color:#fff;font-size:13px;font-weight:800;
  display:grid;place-items:center;font-variant-numeric:tabular-nums;
}
.chooser-foot{
  margin-top:16px;padding-top:15px;border-top:1px solid var(--line-soft);
  display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted);
}
.chooser-foot a{font-weight:800}

/* -------------------------------------------------------------- the marquee */

.marq{
  background:var(--night-2);border-top:1px solid var(--night-line);
  overflow:hidden;padding-block:16px;
}
.marq-track{display:flex;gap:0;width:max-content;animation:marq 92s linear infinite}
.marq-track span{
  display:inline-flex;align-items:center;gap:34px;padding-right:34px;
  font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#C4D5D9;white-space:nowrap;
}
.marq-track span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--hot);opacity:.8}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marq-track{animation:none;flex-wrap:wrap;width:auto}}

/* ------------------------------------------------------------- path cards */

.paths{display:grid;gap:20px}
@media (min-width:900px){.paths{grid-template-columns:repeat(2,minmax(0,1fr))}}
.path{
  position:relative;isolation:isolate;overflow:hidden;
  border:1px solid var(--night-line);border-radius:26px;padding:clamp(28px,3.4vw,42px);
  display:flex;flex-direction:column;gap:16px;justify-content:flex-end;
  min-height:330px;background:var(--night-2);color:#fff;
}
.path-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.path-bg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.path:hover .path-bg img{transform:scale(1.045)}
.path-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(12,21,23,.95) 14%, rgba(12,21,23,.78) 52%, rgba(12,21,23,.42) 100%);
}
.path-b .path-bg::after{
  background:linear-gradient(to top, rgba(14,20,34,.95) 14%, rgba(14,20,34,.78) 52%, rgba(14,20,34,.40) 100%);
}
.path .eyebrow{color:var(--hot)}
.path h3{font-size:clamp(24px,3.2vw,33px);line-height:1.1;letter-spacing:-0.035em;color:#fff}
.path p{margin:0;font-size:15.5px;line-height:1.6;color:#D5E1E3;font-weight:500;max-width:42ch}
.path-cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:6px}
.path .btn-ghost{background:transparent;border-color:rgba(255,255,255,.34);color:#fff}
.path .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55);color:#fff}
.path .btn-ink{background:#fff;color:var(--ink);border-color:#fff}
.path .btn-ink:hover{background:#E4EAEB;color:var(--ink)}
.path-num{
  position:absolute;right:-14px;top:-30px;font-size:150px;font-weight:900;
  letter-spacing:-0.06em;color:rgba(255,255,255,.075);pointer-events:none;user-select:none;
}

/* ------------------------------------------------------------ section head */

.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 32px;margin-bottom:clamp(16px,1.9vw,22px)}
.sec-head > div:first-child{flex:1 1 340px;min-width:0}
.sec-head p{margin:12px 0 0;max-width:56ch}
.sec-head .btn{flex-shrink:0}
.sec-head-center{flex-direction:column;align-items:center;text-align:center}
.sec-head-center p{margin-inline:auto}

/* ------------------------------------------------------------ course tiles */

.tiles{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(256px,1fr))}
.tiles-4{grid-template-columns:repeat(auto-fill,minmax(244px,1fr))}

.tile{
  display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:20px;overflow:hidden;color:var(--ink);
  transition:border-color .16s ease,box-shadow .18s ease,transform .18s cubic-bezier(.2,.8,.3,1);
}
.tile:hover{border-color:#CDD5D9;box-shadow:var(--shadow-lift);transform:translateY(-4px);color:var(--ink)}
.tile-shot{position:relative;display:block;width:100%;aspect-ratio:16/9;background:var(--soft);flex-shrink:0;overflow:hidden}
.tile-shot img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.tile:hover .tile-shot img{transform:scale(1.045)}
.tile-mono{
  display:grid;place-items:center;width:100%;height:100%;
  background:radial-gradient(120% 120% at 18% 12%, #2E464D 0%, #16272B 62%);
  color:#fff;font-size:36px;font-weight:900;letter-spacing:-0.02em;
}
.tile-body{display:flex;flex-direction:column;gap:11px;padding:19px 19px 21px;flex-grow:1}
.tile-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.tile h3{font-size:17.5px;font-weight:800;line-height:1.3;letter-spacing:-0.022em}
.tile p{margin:0;flex-grow:1;font-size:14px;line-height:1.58;color:var(--muted)}
.tile-foot{display:flex;align-items:center;gap:10px;padding-top:13px;margin-top:2px;border-top:1px solid var(--line-soft)}
.tile-price{font-size:15.5px;font-weight:900;color:var(--ink);letter-spacing:-0.02em}
.tile-price small{font-size:11.5px;font-weight:700;color:var(--muted);margin-left:4px}
.tile-go{margin-left:auto;font-size:13px;font-weight:900;color:var(--pink-dark)}

/* ---------------------------------------------------------------- catalogue */

.cat-head{background:var(--night);color:var(--night-text);padding-block:clamp(28px,3.4vw,42px);position:relative;overflow:hidden}
.cat-head::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(640px 360px at 84% -10%, rgba(255,0,130,.3) 0%, rgba(255,0,130,0) 68%);
}
.cat-head-in{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;gap:22px 44px}
.cat-head-in > div:first-child{flex:1 1 340px}
.cat-head h1{color:#fff;font-size:clamp(34px,5.4vw,56px)}
.cat-head .lede{color:#D2DFE1;margin-top:12px;font-weight:500}

.search{
  display:flex;align-items:center;gap:11px;width:100%;max-width:450px;
  height:58px;padding:0 8px 0 18px;background:var(--paper);border:0;border-radius:var(--pill);
  box-shadow:var(--shadow-night);
}
.search svg{color:var(--muted);flex-shrink:0}
.search input{flex-grow:1;min-width:0;border:0;background:transparent;outline:none;font:inherit;font-size:15.5px;color:var(--ink)}

.cat-layout{display:grid;gap:clamp(24px,3vw,44px);padding-block:clamp(22px,2.6vw,32px) clamp(36px,4.4vw,54px)}
@media (min-width:1000px){.cat-layout{grid-template-columns:262px minmax(0,1fr);align-items:start}}

.rail{display:flex;flex-direction:column;gap:24px}
.rail-top{display:flex;align-items:center;gap:10px}
.rail-top b{font-size:15px;color:var(--ink)}
.rail-clear{margin-left:auto;border:0;background:transparent;padding:0;font:inherit;font-size:13.5px;font-weight:800;color:var(--pink-dark);cursor:pointer}
.rail-group{display:flex;flex-direction:column;gap:11px}
.rail-group > b{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.check{display:flex;align-items:center;gap:11px;cursor:pointer}
.check input{width:18px;height:18px;margin:0;accent-color:var(--pink-dark);flex-shrink:0}
.check span{flex-grow:1;font-size:15px;color:var(--ink)}
.check em{font-style:normal;font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.rail-note{background:var(--night);color:var(--night-text);border-radius:20px;padding:22px}
.rail-note b{display:block;font-size:16px;color:#fff}
.rail-note p{margin:9px 0 15px;font-size:14.5px;line-height:1.55;color:#BDD0D4;font-weight:500}
.rail-note a{color:var(--hot);font-weight:800;font-size:14px}
.rail-note a:hover{color:#fff}

.rail-toggle{display:flex;margin-bottom:18px}
@media (min-width:1000px){.rail-toggle{display:none}}
@media (max-width:999px){.rail{display:none}.rail.open{display:flex}}

.results-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-bottom:16px}
.results-count{font-size:15px;color:var(--ink-read)}
.results-count b{color:var(--ink);font-weight:800}
.results-sort{display:flex;align-items:center;gap:9px;margin-left:auto}
.results-sort label{font-size:14px;color:var(--muted)}
select.input,select{
  height:44px;padding:0 12px;border:1.5px solid var(--line);border-radius:11px;
  background:var(--paper);font:inherit;font-size:14.5px;color:var(--ink);
}

.chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:20px}
.chips > span{font-size:13.5px;color:var(--muted)}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:8px 10px 8px 15px;border-radius:var(--pill);
  background:var(--ink);color:#fff;font-size:13.5px;font-weight:700;
}
.chip:hover{color:#fff;background:var(--ink-deep)}
.chip i{display:grid;place-items:center;width:20px;height:20px;border-radius:var(--pill);background:#34484C;font-style:normal;font-size:13px;line-height:1}

.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:34px}
.pager a,.pager span{
  display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:46px;padding:0 15px;
  border:1.5px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font-size:14.5px;font-weight:800;
}
.pager a:hover{border-color:var(--ink);color:var(--ink)}
.pager .now{background:var(--ink);border-color:var(--ink);color:#fff}
.pager .gap{border:0;background:transparent;min-width:0;padding:0 2px;color:var(--muted)}

.empty{padding:52px 24px;text-align:center;border:1.5px dashed var(--line);border-radius:20px;background:var(--soft)}
.empty b{display:block;font-size:19px;color:var(--ink);margin-bottom:7px}
.empty p{margin:0 0 18px;color:var(--muted)}

/* ------------------------------------------------------------- course page */

.course-head{background:var(--night);color:var(--night-text);padding-block:clamp(28px,3.4vw,44px);position:relative;overflow:hidden}
.course-head::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(700px 420px at 88% 0%, rgba(255,0,130,.3) 0%, rgba(255,0,130,0) 66%);
}
.course-head-grid{position:relative;display:grid;gap:clamp(26px,3.4vw,46px);align-items:center}
@media (min-width:900px){.course-head-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.course-head h1{color:#fff;margin-bottom:14px;font-size:clamp(31px,4.6vw,50px)}
.course-head .lede{color:#D2DFE1;font-weight:500}
.course-head .tile-tags{margin-bottom:18px}
.course-head .tag{background:rgba(255,255,255,.14);color:#EAF2F3}
.course-shot{border-radius:22px;overflow:hidden;background:var(--night-3);box-shadow:var(--shadow-night);aspect-ratio:16/9}
.course-shot img{display:block;width:100%;height:100%;object-fit:cover}

.course-layout{display:grid;gap:clamp(28px,3.4vw,48px);padding-block:clamp(28px,3.4vw,44px)}
@media (min-width:980px){.course-layout{grid-template-columns:minmax(0,1fr) 350px;align-items:start}}

.buybox{
  position:sticky;top:calc(var(--head) + 20px);
  border:1.5px solid var(--line);border-radius:22px;background:var(--paper);box-shadow:var(--shadow);padding:26px;
}
.buybox .price{display:flex;align-items:baseline;gap:9px;margin-bottom:5px}
.buybox .price b{font-size:44px;font-weight:900;color:var(--ink);letter-spacing:-0.045em}
.buybox .price span{font-size:14px;font-weight:700;color:var(--muted)}
.buybox ul{list-style:none;margin:20px 0 22px;padding:0;display:grid;gap:12px}
.buybox li{display:flex;gap:11px;font-size:14.5px;line-height:1.5;color:var(--ink-read)}
.buybox li svg{color:var(--ok);flex-shrink:0;margin-top:3px}
.buybox .btn + .btn{margin-top:10px}
.buybox small{display:block;margin-top:15px;font-size:12.5px;color:var(--muted);text-align:center}

.facts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:30px}
.facts div{background:var(--paper);padding:16px 17px}
.facts dt{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:5px 0 0;font-size:15px;font-weight:700;color:var(--ink)}
@media (min-width:620px){.facts{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------------------------------------------------------- the long pages

   About, Sectors and For employers are mostly writing. A single column of it
   leaves two thirds of a desktop screen empty, so each section puts its
   heading in its own column on the left and the writing on the right. The
   line length stays comfortable, the page stops looking half finished, and on
   a phone the two simply stack. */

.longform{display:grid;gap:clamp(22px,2.6vw,32px)}
.longform-row{display:grid;gap:12px 48px;align-items:start}
@media (min-width:900px){
  .longform-row{grid-template-columns:minmax(0,7fr) minmax(0,11fr)}
  .longform-row h2{position:sticky;top:calc(var(--head) + 26px)}
}
.longform-row h2{font-size:clamp(24px,3.1vw,34px);letter-spacing:-0.03em;text-wrap:balance}
.longform-row .prose{max-width:none;font-size:16.5px;line-height:1.76}
.longform-row .prose p + p{margin-top:0}
.longform-sep{height:1px;background:var(--line);border:0;margin:0}

/* The writing pages open on the first section and keep the rest folded, so
   a reader sees the shape of the page before the words. Built on <details>,
   so it works with no script and the text is still in the page for search. */
.fold{border-top:1px solid var(--line);margin:0}
.fold:last-of-type{border-bottom:1px solid var(--line)}
.fold > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:20px;
  padding:clamp(16px,1.9vw,22px) 0;
}
.fold > summary::-webkit-details-marker{display:none}
.fold > summary h2{
  flex:1 1 auto;margin:0;font-size:clamp(19px,2.1vw,24px);
  letter-spacing:-0.025em;text-wrap:balance;
}
.fold-mark{
  flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--pink-tint);color:var(--pink-dark);transition:transform .25s ease, background .2s ease;
}
.fold-mark svg{display:block}
.fold[open] > summary .fold-mark{transform:rotate(180deg);background:var(--pink-dark);color:#fff}
.fold > summary:hover h2{color:var(--pink-dark)}
.fold > summary:focus-visible{outline:2px solid var(--pink-dark);outline-offset:3px;border-radius:8px}
.fold-body{padding:0 0 clamp(18px,2.2vw,26px);max-width:74ch}
.fold-body .prose{font-size:16.5px;line-height:1.72;color:var(--body);max-width:none}

/* On a wide screen a closed row is just the heading across the full width.
   Opening it moves the heading into a left column and puts the writing
   beside it, so the row is filled rather than trailing off two thirds in. */
@media (min-width:900px){
  .fold{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,11fr);gap:0 clamp(32px,3.4vw,54px)}
  .fold > summary{grid-column:1 / -1;align-items:flex-start}
  .fold[open] > summary{grid-column:1}
  .fold[open] > summary h2{padding-top:2px}
  .fold-body{grid-column:2;max-width:none;padding-top:clamp(16px,1.9vw,22px)}
}

/* the first block reads as the opening statement, so it is set larger */
.longform-row .prose,.longform-row:first-child .prose{font-size:16.5px;line-height:1.72;color:var(--body)}

/* ------------------------------------------------------------------- prose */

.prose{max-width:66ch;font-size:16.5px;line-height:1.75;color:var(--body)}
.prose h2{margin:1.7em 0 .5em;font-size:clamp(22px,2.7vw,29px)}
.prose h3{margin:1.5em 0 .4em}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul,.prose ol{margin:0 0 1em;padding-left:1.25em}
/* The points under a course heading. Short module names go two up so the
   list does not run down the page; longer sentences stay in one column. */
.prose-points{list-style:none;margin:0 0 1.2em;padding:0;display:grid;gap:9px 30px}
.prose-points li{position:relative;padding-left:21px;margin:0;line-height:1.55}
.prose-points li::before{
  content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--hot);
}
@media (min-width:780px){
  .prose-points:has(li:nth-child(7)){grid-template-columns:repeat(2,minmax(0,1fr))}
}
.prose li{margin-bottom:.45em}
.prose ul.ticks{list-style:none;padding:0;display:grid;gap:13px}
.prose ul.ticks li{display:flex;gap:12px;margin:0}
.prose ul.ticks svg{color:var(--ok);flex-shrink:0;margin-top:5px}

/* --------------------------------------------------------------- the reasons */

.reasons{display:grid;gap:18px}
.reason{
  padding:28px 24px 30px;border:1px solid var(--line);border-radius:20px;background:var(--paper);
  transition:border-color .16s ease,transform .18s cubic-bezier(.2,.8,.3,1);
}
.reason:hover{border-color:#CDD5D9;transform:translateY(-3px)}
.reason i{display:grid;place-items:center;width:50px;height:50px;border-radius:15px;background:var(--pink-tint);color:var(--pink-dark);margin-bottom:18px}
.reason h3{margin-bottom:9px}
.reason p{margin:0;font-size:15px;line-height:1.62;color:var(--ink-read)}
@media (min-width:700px){.reasons{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1060px){.reasons{grid-template-columns:repeat(4,minmax(0,1fr))}}
.band-night .reason{background:rgba(255,255,255,.04);border-color:var(--night-line)}
.band-night .reason:hover{border-color:rgba(255,255,255,.25)}
.band-night .reason i{background:rgba(255,0,130,.17);color:var(--hot)}
.band-night .reason p{color:#BDD0D4;font-weight:500}

/* ----------------------------------------------------------------- sectors */

.sectors{display:grid;gap:20px}
@media (min-width:700px){.sectors{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1060px){.sectors{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* A sector with nothing in it is hidden, so the row can end up short. Two or
   four cards go two up and stand taller, rather than leaving a hole on the
   right of a three column row. */
@media (min-width:1060px){
  .sectors:has(> :last-child:nth-child(2)),
  .sectors:has(> :last-child:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
  .sectors:has(> :last-child:nth-child(2)) .sector{min-height:380px}
}
.sector{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:300px;border-radius:22px;overflow:hidden;color:#fff;isolation:isolate;
  background:var(--night-3);
}
.sector img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.sector::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top, rgba(12,21,23,.93) 8%, rgba(12,21,23,.55) 46%, rgba(12,21,23,.15) 100%);
}
.sector:hover{color:#fff}
.sector:hover img{transform:scale(1.05)}
.sector-body{padding:24px;display:flex;flex-direction:column;gap:9px}
.sector-body h3{color:#fff;font-size:24px;letter-spacing:-0.03em}
.sector-body p{margin:0;font-size:15px;line-height:1.55;color:#D2DFE1;font-weight:500}
.sector-body .tile-go{margin-left:0;color:var(--hot);margin-top:4px}

/* -------------------------------------------------------------- the split */

.split{display:grid;gap:clamp(26px,3.2vw,44px);align-items:center}
@media (min-width:920px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.split-art{border-radius:22px;overflow:hidden;background:var(--night-3);box-shadow:var(--shadow-night)}
.split-art img{display:block;width:100%}

.steps{list-style:none;margin:0;padding:0;display:grid;gap:22px;counter-reset:s}
.steps li{display:flex;gap:18px;counter-increment:s}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border-radius:14px;
  background:rgba(255,0,130,.16);color:var(--hot);font-size:15px;font-weight:900;letter-spacing:-0.02em;
}
.steps b{display:block;color:#fff;font-size:17.5px;font-weight:800;letter-spacing:-0.02em;margin-bottom:4px}
.steps p{margin:0;font-size:15.5px;font-weight:500;line-height:1.62;color:#BDD0D4}
.band:not(.band-night) .steps li::before{background:var(--pink-tint);color:var(--pink-dark)}
.band:not(.band-night) .steps b{color:var(--ink)}
.band:not(.band-night) .steps p{color:var(--ink-read)}

/* ------------------------------------------------------------ testimonials */

.quotes{display:grid;gap:20px}
@media (min-width:860px){.quotes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.quote{
  position:relative;padding:32px 28px;border-radius:22px;background:var(--paper);
  border:1px solid var(--line);display:flex;flex-direction:column;gap:20px;
}
.quote::before{
  content:"\201C";position:absolute;top:6px;right:22px;
  font-size:90px;line-height:1;color:var(--pink-tint);font-weight:900;pointer-events:none;
}
.quote blockquote{position:relative;margin:0;font-size:19px;line-height:1.55;color:var(--ink);font-weight:700;letter-spacing:-0.018em}
.quote figcaption{display:flex;align-items:center;gap:13px;margin-top:auto}
.quote figcaption img,.quote-mono{width:48px;height:48px;border-radius:var(--pill);object-fit:cover;flex-shrink:0}
.quote-mono{display:grid;place-items:center;background:var(--ink);color:#fff;font-size:16px;font-weight:900}
.quote figcaption b{display:block;font-size:15px;color:var(--ink);font-weight:800}
.quote figcaption span{display:block;font-size:13px;color:var(--muted)}

/* ----------------------------------------------------------------- pricing */

.plans{display:grid;gap:20px}
@media (min-width:720px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.plans{grid-template-columns:repeat(3,minmax(0,1fr))}}
.plan{
  display:flex;flex-direction:column;gap:15px;padding:30px 26px 32px;
  border:1.5px solid var(--line);border-radius:22px;background:var(--paper);
}
.plan-on{border:2.5px solid var(--pink-dark);box-shadow:var(--shadow-lift);position:relative}
.plan-flag{
  position:absolute;top:-13px;left:26px;padding:6px 14px;border-radius:var(--pill);
  background:var(--pink-dark);color:#fff;font-size:11.5px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;
}
.plan-sub{font-size:11.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.plan h3{font-size:21px}
.plan-price{display:flex;align-items:baseline;gap:8px}
.plan-price b{font-size:46px;font-weight:900;color:var(--ink);letter-spacing:-0.05em;font-variant-numeric:tabular-nums}
.plan-price span{font-size:13.5px;font-weight:700;color:var(--muted)}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;flex-grow:1}
.plan li{display:flex;gap:11px;font-size:14.5px;line-height:1.5;color:var(--ink-read)}
.plan li svg{color:var(--ok);flex-shrink:0;margin-top:3px}

/* --------------------------------------------------------------------- CTA */

.cta{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:clamp(22px,2.8vw,30px);background:var(--night);color:var(--night-text);
  padding:clamp(28px,3.6vw,46px);display:grid;gap:22px;align-items:center;
}
.cta::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(620px 420px at 88% 12%, rgba(255,0,130,.36) 0%, rgba(255,0,130,0) 66%),
    radial-gradient(520px 380px at 6% 96%, rgba(88,40,120,.44) 0%, rgba(88,40,120,0) 70%);
}
@media (min-width:880px){.cta{grid-template-columns:minmax(0,1fr) auto}}
.cta h2{color:#fff;margin-bottom:12px;font-size:clamp(26px,3.7vw,40px)}
.cta p{margin:0;color:#D2DFE1;max-width:50ch;font-weight:500;font-size:16.5px}
.cta-buttons{display:flex;flex-wrap:wrap;gap:13px}

/* ------------------------------------------------------------------- forms */

.form{display:grid;gap:19px}
.field{display:grid;gap:7px}
.field label{font-size:14px;font-weight:800;color:var(--ink)}
.field .hint{font-size:12.5px;color:var(--muted)}
.input,input[type=text],input[type=email],input[type=tel],input[type=password],input[type=search],input[type=number],textarea{
  width:100%;min-height:52px;padding:13px 16px;border:1.5px solid var(--line);border-radius:14px;
  background:var(--paper);font:inherit;font-size:15.5px;color:var(--ink);
}
textarea{min-height:140px;resize:vertical;line-height:1.6}
.input:focus,input:focus,textarea:focus,select:focus{outline:none;border-color:var(--ink)}
.row2{display:grid;gap:19px}
@media (min-width:620px){.row2{grid-template-columns:1fr 1fr}}

/* ------------------------------------------------------- on a phone

   Three things a small screen needs that a desktop does not. A form field
   under 16px makes iOS zoom the whole page the moment it is tapped, which
   is the single most common reason a mobile form feels broken. The small
   uppercase labels need a point back to stay legible. And anything a
   thumb has to hit needs room around it. */

@media (max-width:820px){
  /* 16px exactly, so Safari leaves the zoom alone */
  .input,input[type=text],input[type=email],input[type=tel],input[type=password],
  input[type=search],input[type=number],textarea,select{font-size:16px}

  /* the small uppercase labels, a point larger */
  .tag,.facts dt,.plan-sub,.contact-card dt{font-size:12.5px}
  .plan-flag{font-size:12px}

}

/* A tablet is a touch screen too, so the thumb sized targets go up to the
   width where the full navigation takes over. */
@media (max-width:1100px){
  .foot-end{gap:4px 18px}
  .foot-end a{display:inline-block;padding:9px 2px;font-size:14px}
  .contact-card dd a{display:inline-block;padding:6px 0;min-height:34px}
  .chooser-foot{padding-block:4px}
  .chooser-foot a{display:inline-block;padding:8px 2px}
  .foot ul a{display:inline-block;padding:4px 0}
  .announce-side a{display:inline-block;padding:4px 0}
  .sec-head .btn-quiet,.cat-head a{min-height:34px;display:inline-flex;align-items:center}
  .top-tel{min-height:34px;display:inline-flex;align-items:center}
  /* an iPad in landscape is still a touch screen, so the small uppercase
     labels get the same extra point they get on a phone */
  .tag,.facts dt,.plan-sub,.contact-card dt{font-size:12.5px}
  .plan-flag{font-size:12px}
}

.notice{padding:15px 17px;border-radius:14px;font-size:14.5px;font-weight:700;border:1px solid transparent}
.notice-ok{background:var(--ok-tint);border-color:#BFE3D0;color:#14603B}
.notice-bad{background:var(--bad-tint);border-color:#F3C3CF;color:#9B0F30}
.notice-warn{background:var(--warn-tint);border-color:#EDD6A6;color:#7A5000}

.contact-grid{display:grid;gap:clamp(26px,3.2vw,44px)}
@media (min-width:920px){.contact-grid{grid-template-columns:minmax(0,1fr) 340px;align-items:start}}
.contact-card{
  border-radius:22px;background:var(--night);color:var(--night-text);padding:28px;
  position:sticky;top:calc(var(--head) + 24px);
}
@media (max-width:919px){.contact-card{position:static}}
.contact-card dl{margin:0;display:grid;gap:20px}
.contact-card dt{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--hot)}
.contact-card dd{margin:6px 0 0;font-size:16px;color:#fff;line-height:1.55;font-weight:500}
.contact-card dd a{color:#fff}
.contact-card dd a:hover{color:var(--hot)}

/* ------------------------------------------------------------------ footer */

.foot{background:var(--night);color:#DCE7E9;padding-block:clamp(36px,4.2vw,52px) 22px}
.foot-grid{display:grid;gap:28px}
@media (min-width:760px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr}}
@media (min-width:1060px){.foot-grid{grid-template-columns:2fr 1fr 1fr 1.2fr}}
.foot .brand{color:#fff;font-size:25px}
.foot .brand em{color:var(--hot)}
.foot p{font-size:15px;line-height:1.6;color:#D6E3E5;font-weight:500;max-width:38ch}
.foot h4{color:#fff;font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;margin-bottom:13px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot a{color:#E8F0F1;font-size:15px;font-weight:500}
.foot a:hover{color:var(--hot)}
.foot-end{margin-top:28px;padding-top:20px;border-top:1px solid var(--night-line);display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13.5px;color:#C2D3D7}
.foot-end a{font-size:13.5px}

/* The social marks carry each platform's own colour on hover, so there is no
   guessing which is which. At rest they sit light on the dark so the row
   reads as one thing. */
.foot-social{display:flex;gap:10px;margin-top:16px}
.foot .foot-social a{
  display:grid;place-items:center;width:42px;height:42px;border-radius:13px;
  background:rgba(255,255,255,.08);color:#E3EDEE;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.foot .foot-social a:hover,.foot .foot-social a:focus-visible{color:#fff;transform:translateY(-2px)}
.foot .foot-social a:hover,
.foot .foot-social a.s-instagram:hover,
.foot .foot-social a.s-facebook:hover,
.foot .foot-social a.s-linkedin:hover,
.foot .foot-social a.s-tiktok:hover{background:var(--pink-dark);color:#fff}

/* --------------------------------------------------------------- utilities */

.stack{display:grid;gap:14px}
.stack-lg{display:grid;gap:28px}
.center{text-align:center}
.center .lede{margin-inline:auto}
.nowrap{white-space:nowrap}
.tabular{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .tile:hover,.reason:hover{transform:none}
  html{scroll-behavior:auto}
}

@media print{
  .top,.announce,.foot,.cta,.buybox,.rail,.marq{display:none !important}
  body{font-size:12pt}
  .hero,.course-head,.cat-head{background:#fff !important;color:#000 !important}
  .hero h1,.course-head h1,.cat-head h1{color:#000 !important}
}

/* The TuLern CPD mark. One class, sized from --cpd, so the same markup works
   at badge size on a course page and small in a footer. TuLern is inside the
   mark rather than beside it, because the mark has to say who certified. */
.cpdmark{--cpd:76px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  width:var(--cpd);height:var(--cpd);border-radius:calc(var(--cpd)*.16);background:var(--ink,#17262B);
  box-shadow:inset 0 0 0 calc(var(--cpd)*.035) rgba(255,255,255,.09);
  text-decoration:none;line-height:1;flex:none}
.cpdmark:hover{box-shadow:inset 0 0 0 calc(var(--cpd)*.035) rgba(255,255,255,.2)}
.cpd-brand{font-weight:700;font-size:calc(var(--cpd)*.115);color:#fff;letter-spacing:-.01em}
.cpd-brand span{color:var(--pink,#FF0082)}
.cpd-tick{width:calc(var(--cpd)*.20);height:calc(var(--cpd)*.20);border-radius:50%;background:var(--pink,#FF0082);
  display:flex;align-items:center;justify-content:center;margin:calc(var(--cpd)*.05) 0 calc(var(--cpd)*.035)}
.cpd-tick svg{width:60%;height:60%;display:block}
.cpd-big{font-weight:700;font-size:calc(var(--cpd)*.30);color:#fff;letter-spacing:-.01em}
.cpd-sub{font-weight:500;font-size:calc(var(--cpd)*.078);color:#fff;letter-spacing:.16em;margin-top:calc(var(--cpd)*.05)}
.buybox .cpdmark{margin-bottom:16px}