/* ===========================================================================
   The course page.

   Built on the same tokens as the home page -- the body carries `hm`, so the
   palette, the two faces, the ruled shell, the buttons, the header and the
   footer all come from home.css. What is here is only what this page adds.
   ========================================================================= */

/* ------------------------------------------------------- the top bar -- */
/* Named rather than decorative: it says what the discount is and what the
   two prices are, because "sale!" on its own is worth nothing. Shown only
   where there is a discount to name. */
.hm a.cs-launch{display:flex;align-items:center;justify-content:center;gap:10px;
  flex-wrap:wrap;background:var(--ink);color:#fff;font-size:13.5px;
  padding:11px 20px;text-align:center}
.cs-launch .dot{width:7px;height:7px;border-radius:50%;background:var(--sky);
  animation:csPulse 2.4s ease-in-out infinite}
@keyframes csPulse{0%,100%{opacity:1}50%{opacity:.35}}
.cs-launch .sep{color:rgba(255,255,255,.4)}
.cs-launch b{font-weight:700}
.cs-launch em{font-style:normal;font-weight:700;color:var(--sky);
  text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.cs-launch .dot{animation:none}}

/* The page's own sections. The site's nav sits above and is the same on
   every page; this one belongs to the course you are reading, and it keeps
   the price and the way in within reach of a very long page. */
.cs-jump{position:sticky;top:0;z-index:50;background:rgba(246,248,251,.92);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.cs-jump .hm-wrap{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:10px 28px}
.cs-jump-l{display:flex;align-items:center;gap:4px;min-width:0;overflow-x:auto;
  scrollbar-width:none}
.cs-jump-l::-webkit-scrollbar{display:none}
.hm .cs-jump-l a{flex:0 0 auto;font-size:14px;font-weight:600;color:var(--ink-2);
  padding:9px 14px;border-radius:999px;white-space:nowrap;transition:background .2s,color .2s}
.hm .cs-jump-l a:hover{background:#fff;color:var(--ink)}
.hm .cs-jump-go{flex:0 0 auto;display:inline-flex;align-items:center;
  background:var(--blue);color:#fff;font-size:14px;font-weight:700;
  padding:11px 20px;border-radius:999px;white-space:nowrap;
  transition:background .2s,transform .2s}
.hm .cs-jump-go:hover{background:var(--ink);transform:translateY(-1px)}

/* The three worries, answered where the button is. */
.cs-assure{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:20px}
.cs-assure span{display:inline-flex;align-items:center;gap:7px;font-size:13px;
  color:var(--muted)}
.cs-assure i{font-style:normal;font-size:13px;opacity:.75}

/* ------------------------------------------------------------------ hero -- */
/* The glow behind the card is 620px wide and hangs 120px past the right edge
   on purpose. Nothing was clipping it, so on a phone it pushed the document
   wider than the window and the whole page slid sideways. */
.cs-hero{overflow:hidden}
.cs-hero .hm-wrap{position:relative;padding:80px 28px 88px;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
.cs-glow{position:absolute;right:-120px;top:-80px;width:620px;height:520px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(114,202,234,.32),rgba(114,202,234,0) 68%)}
.cs-left{position:relative;min-width:0}
.cs-flags{display:flex;gap:8px;flex-wrap:wrap}
.cs-flag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  color:var(--blue);background:#fff;border:1px solid #DCE6F2;padding:6px 14px;
  border-radius:99px;white-space:nowrap}
.cs-flag i{width:6px;height:6px;border-radius:50%;background:var(--blue);flex:none}
.cs-flag.rate{color:var(--ink);border-color:var(--line-2)}
.cs-flag .stars{color:var(--amber);letter-spacing:1px}
.cs-hero h1{font-size:clamp(34px,4.3vw,58px);line-height:1.06;margin-top:22px;
  text-wrap:balance}
.hm p.cs-lede{font-size:18px;line-height:1.6;color:var(--ink-2);max-width:560px;
  margin-top:22px;text-wrap:pretty}
.cs-lede b{color:var(--ink)}
.cs-ticks{display:flex;flex-direction:column;gap:12px;margin-top:26px;font-size:15px;
  font-weight:500;color:var(--ink)}
.cs-ticks div{display:flex;gap:12px;align-items:flex-start}
.cs-ticks i{width:22px;height:22px;flex-shrink:0;border-radius:50%;background:#E3F6EE;
  color:var(--green);font-size:12px;font-weight:800;font-style:normal;
  display:flex;align-items:center;justify-content:center}
.cs-hero-cta{display:flex;gap:10px;margin-top:32px;flex-wrap:wrap}
.hm .cs-buy{background:var(--blue);color:#fff;font-weight:700;font-size:16px;
  padding:16px 28px;border-radius:99px;white-space:nowrap;display:inline-flex;
  align-items:center;gap:10px;border:1px solid var(--blue);cursor:pointer;
  box-shadow:0 10px 24px -8px rgba(19,98,177,.6);transition:background .2s}
.hm .cs-buy:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.hm .cs-buy s{opacity:.6;font-weight:500}

/* the card ---------------------------------------------------------------- */
.cs-card-wrap{position:relative;min-width:0}
.cs-card{background:#fff;border:1px solid var(--line-2);border-radius:28px;padding:8px;
  box-shadow:0 40px 80px -40px rgba(13,8,77,.35)}
.cs-play{position:relative;display:block;width:100%;aspect-ratio:16/10;border:none;
  padding:0;cursor:pointer;border-radius:22px;overflow:hidden;
  background:linear-gradient(160deg,var(--sky),var(--blue-deep) 55%,var(--ink))}
.cs-play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-play .scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,8,77,0) 40%,rgba(13,8,77,.8))}
.cs-play .halo{position:absolute;left:50%;top:46%;width:72px;height:72px;
  margin:-36px 0 0 -36px;border-radius:50%;background:rgba(255,255,255,.4);
  animation:csHalo 2s ease-out infinite}
.cs-play .knob{position:absolute;left:50%;top:46%;width:72px;height:72px;
  margin:-36px 0 0 -36px;border-radius:50%;background:#fff;color:var(--blue);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(13,8,77,.35)}
.cs-play .knob svg{width:24px;height:24px;margin-left:4px;fill:currentColor}
.cs-play .cap{position:absolute;left:18px;bottom:16px;right:18px;text-align:left;color:#fff}
.cs-play .cap b{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;opacity:.8}
.cs-play .cap span{display:block;font-size:15px;font-weight:700;margin-top:3px}
.cs-card-b{padding:22px 18px 18px}
.cs-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cs-price b{font-size:38px;font-weight:800;letter-spacing:-.03em}
.cs-price s{font-size:18px;color:var(--faint)}
.cs-off{font-size:12px;font-weight:800;color:#fff;background:var(--blue);
  padding:5px 10px;border-radius:99px}
.cs-perday{font-size:14px;color:var(--muted);margin-top:4px}
.cs-perday b{color:var(--ink)}
.hm .cs-card-cta{display:block;text-align:center;margin-top:18px;background:var(--blue);
  color:#fff;font-weight:700;font-size:16px;padding:16px;border-radius:99px;width:100%;
  border:1px solid var(--blue);cursor:pointer;
  box-shadow:0 10px 24px -8px rgba(19,98,177,.6)}
.hm .cs-card-cta:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.cs-incl{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:18px;
  font-size:13px;color:var(--ink);font-weight:500}
.cs-refund{font-size:12px;color:var(--muted);text-align:center;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line-3)}

/* -------------------------------------------------------------- sections -- */
.cs-sec .hm-wrap{padding:96px 28px}
.cs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  flex-wrap:wrap}
.cs-head h2{font-size:clamp(32px,4vw,50px);line-height:1.06;margin-top:14px;
  max-width:620px;text-wrap:balance}
.cs-head p{font-size:16px;line-height:1.6;color:var(--ink-2);max-width:380px}

/* the roadmap ------------------------------------------------------------- */
.cs-road-lead{display:flex;align-items:center;gap:12px;margin-top:36px;flex-wrap:wrap}
.cs-road-lead .pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;
  font-weight:700;color:var(--blue);background:#EEF5FC;padding:7px 14px;border-radius:99px}
.cs-road-lead .pill i{width:6px;height:6px;border-radius:50%;background:var(--blue)}
.cs-road-lead em{font-style:normal;font-size:13px;color:var(--muted)}
.cs-road{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:20px}
.cs-step{background:#fff;border:1px solid var(--line-2);border-radius:24px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.cs-step:hover{transform:translateY(-5px);box-shadow:0 26px 50px -28px rgba(13,8,77,.3)}
.cs-step-top{position:relative;height:122px;display:flex;align-items:center;
  justify-content:center;gap:10px}
.cs-step-top .dots{position:absolute;inset:0;
  background-image:radial-gradient(rgba(13,8,77,.10) 1px,transparent 1.4px);
  background-size:16px 16px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000,transparent 72%);
  mask-image:radial-gradient(ellipse at center,#000,transparent 72%)}
.cs-step-top .ic{position:relative;width:48px;height:48px;border-radius:14px;
  background:rgba(255,255,255,.85);border:1px solid #fff;
  box-shadow:0 3px 0 rgba(13,8,77,.06),0 12px 22px -10px rgba(13,8,77,.3);
  display:flex;align-items:center;justify-content:center}
.cs-step-top .ic i{width:26px;height:26px;background-size:contain;
  background-repeat:no-repeat;background-position:center}
.cs-step .num{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;
  gap:7px;font-size:12px;font-weight:700;color:var(--ink);background:rgba(255,255,255,.9);
  padding:5px 10px;border-radius:99px}
.cs-step .num b{width:18px;height:18px;border-radius:50%;background:var(--ink);color:#fff;
  font-size:11px;display:flex;align-items:center;justify-content:center}
.cs-step .cnt{position:absolute;right:14px;top:14px;font-size:12px;font-weight:600;
  color:var(--ink);background:rgba(255,255,255,.7);padding:5px 10px;border-radius:99px}
.cs-step-b{padding:18px 18px 22px}
.cs-step-b h3{font-size:17px;line-height:1.3;font-weight:700;letter-spacing:-.01em}
.cs-step-b p{font-size:14px;line-height:1.55;color:var(--ink-2);margin-top:7px;
  text-wrap:pretty}

/* the skills panel -------------------------------------------------------- */
.cs-skills{position:relative;margin-top:28px;border:1px solid var(--line-2);
  border-radius:28px;background:#fff;overflow:hidden}
.cs-skills-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap;padding:40px 40px 0}
.cs-skills-top h3{font-size:clamp(24px,2.6vw,32px);line-height:1.1;font-family:var(--serif);
  font-weight:400;letter-spacing:-.02em}
.cs-skills-top .sub{font-size:14px;color:var(--muted);margin-top:6px}
.cs-counts{display:flex;gap:28px}
.cs-counts div b{display:block;font-family:var(--serif);font-size:34px;line-height:1;
  letter-spacing:-.03em}
.cs-counts div span{font-size:12px;color:var(--muted)}
.cs-skill-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
  padding:26px 40px 0}
/* Their card: the number, the skill, and under it what the skill gets
   you -- on a tint, so the eight read as eight things rather than as a
   list. A row would put the second line beside the first, which is where
   it stops being a consequence of it. */
.cs-skill{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;
  padding:16px 18px 18px;border-radius:16px;background:var(--tint,var(--bg));
  border:1px solid rgba(13,8,77,.07)}
.cs-skill span.n{grid-row:span 2}
.cs-skill .t{align-self:center}
.cs-skill .earn{grid-column:2;font-size:12.5px;font-weight:600;color:var(--blue);
  opacity:.9}
.cs-skill span.n{width:26px;height:26px;flex:none;border-radius:8px;background:#fff;
  border:1px solid var(--line-2);font-size:12px;font-weight:800;color:var(--blue);
  display:flex;align-items:center;justify-content:center}
.cs-skill .t{font-size:14px;font-weight:600;line-height:1.35}
.cs-more{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:24px 40px 0}
.cs-more .lead{font-size:13px;color:var(--muted)}
.cs-more .lead b{display:block;font-size:15px;color:var(--ink)}
.cs-chips{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
.cs-chips span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
  font-weight:600;color:var(--ink-2);background:var(--bg);border:1px solid var(--line-3);
  padding:6px 11px;border-radius:99px}
.cs-chips i{width:5px;height:5px;border-radius:50%;background:var(--sky)}
.cs-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:26px;
  padding:22px 40px 36px;border-top:1px solid var(--line-3)}
.cs-tools .lbl{font-size:11.5px;font-weight:800;letter-spacing:.07em;color:var(--faint)}
.cs-tools .set{display:flex;gap:8px;flex-wrap:wrap}
.cs-tools .set span{display:inline-flex;align-items:center;gap:8px;font-size:13px;
  font-weight:600;background:#fff;border:1px solid var(--line-2);padding:7px 12px;
  border-radius:99px}
.cs-tools .set i{width:17px;height:17px;background-size:contain;background-repeat:no-repeat;
  background-position:center}

/* the curriculum ---------------------------------------------------------- */
.cs-cur .hm-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:56px;align-items:start;padding:96px 28px}
.cs-cur-aside{position:sticky;top:96px}
.cs-cur-aside h2{font-size:clamp(30px,3.4vw,44px);line-height:1.08;margin-top:14px}
.cs-cur-aside p{font-size:16px;line-height:1.6;color:var(--ink-2);margin-top:14px}
.cs-figs{display:flex;gap:26px;margin-top:24px}
.cs-figs div b{display:block;font-family:var(--serif);font-size:32px;line-height:1;
  letter-spacing:-.03em}
.cs-figs div span{font-size:12.5px;color:var(--muted)}
.cs-mod{border:1px solid var(--line-2);border-radius:20px;background:#fff;
  margin-bottom:12px;overflow:hidden}
.cs-mod-head{width:100%;display:flex;align-items:center;gap:16px;padding:20px 22px;
  background:none;border:none;cursor:pointer;text-align:left;font-family:inherit}
.cs-mod-head .n{width:34px;height:34px;flex:none;border-radius:11px;background:var(--bg);
  border:1px solid var(--line-2);font-size:14px;font-weight:800;color:var(--ink-2);
  display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.cs-mod[open] .cs-mod-head .n,.cs-mod.open .cs-mod-head .n{background:var(--ink);
  border-color:var(--ink);color:#fff}
.cs-mod-head .tx{flex:1;min-width:0}
.cs-mod-head .ti{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em}
.cs-mod-head .me{display:block;font-size:13px;color:var(--muted);margin-top:3px}
.cs-mod-head .pm{width:30px;height:30px;flex:none;border-radius:50%;border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;color:var(--ink-2);
  transition:transform .3s,background .2s}
.cs-mod.open .cs-mod-head .pm{transform:rotate(45deg);background:var(--bg)}
.cs-mod-body{display:none;padding:0 22px 18px}
.cs-mod.open .cs-mod-body{display:block}
.cs-les{display:flex;align-items:center;gap:12px;padding:11px 0;
  border-top:1px solid var(--line-3);font-size:14.5px}
.cs-les .ic{width:26px;height:26px;flex:none;border-radius:8px;background:var(--bg);
  color:var(--blue);display:flex;align-items:center;justify-content:center}
.cs-les .ic svg{width:12px;height:12px;fill:currentColor}
.cs-les .t{flex:1;min-width:0}
.cs-les .d{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.cs-les .free{font-size:11px;font-weight:700;color:var(--green);background:#E3F6EE;
  padding:3px 8px;border-radius:99px;white-space:nowrap}
/* A row you can open, and a row you cannot. Without the second half both
   look the same and only the badge tells them apart, which is not enough to
   stop somebody pressing a locked one. */
button.cs-les{width:100%;background:none;border:none;border-top:1px solid var(--line-3);
  font-family:inherit;color:inherit;text-align:left;cursor:pointer}
button.cs-les:hover{background:var(--bg)}
button.cs-les:hover .ic{background:var(--blue);color:#fff}
.cs-les.free-row .ic{background:#E3F6EE;color:var(--green)}
.cs-les.locked{color:var(--ink-2)}
.cs-les.locked .ic{color:var(--faint)}
.cs-les.locked .ic svg{width:13px;height:13px;fill:none}

/* How many lessons are open before you pay, said where the curriculum is. */
.cs-freebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px;
  padding:13px 16px;border-radius:16px;background:#E3F6EE;border:1px solid #BFE8D8}
.cs-freebar i{font-style:normal;color:var(--green);font-weight:800}
.cs-freebar b{font-size:14.5px}
.cs-freebar span{font-size:13px;color:var(--ink-2)}

/* the featured story ------------------------------------------------------ */
.cs-story{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  border:1px solid var(--line-2);border-radius:28px;overflow:hidden;background:#fff}
.cs-story-v{position:relative;min-height:560px;background:var(--ink)}
.cs-story-v img,.cs-story-v video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover}
.cs-story-t{padding:48px 52px;display:flex;flex-direction:column;justify-content:center}
.cs-story-t blockquote{font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);
  line-height:1.3;letter-spacing:-.01em;text-wrap:pretty}
.cs-story-t .who{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:22px;
  border-top:1px solid var(--line-3)}
.cs-story-t .av{width:48px;height:48px;border-radius:50%;background:var(--blue);color:#fff;
  font-weight:700;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cs-story-t .av img{width:100%;height:100%;object-fit:cover}
.cs-story-t .nm{font-size:16px;font-weight:700}
.cs-story-t .rl{font-size:13.5px;color:var(--muted)}

/* the problem / the fix --------------------------------------------------- */
.cs-pains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px}
.cs-pain{background:#fff;border:1px solid var(--line-2);border-radius:24px;padding:26px}
.cs-pain .lbl{font-size:12px;font-weight:800;letter-spacing:.05em;color:#C2404A}
.cs-pain .q{font-size:18px;font-weight:700;line-height:1.3;margin-top:10px}
.cs-pain .n{font-size:14px;line-height:1.55;color:var(--ink-2);margin-top:7px}
.cs-pain hr{border:none;border-top:1px solid var(--line-3);margin:20px 0}
.cs-pain .lbl.good{color:var(--green)}
.cs-pain .a{font-size:14.5px;line-height:1.55;color:var(--ink);margin-top:9px}

/* the comparison ---------------------------------------------------------- */
.cs-cmp{margin-top:40px;border:1px solid var(--line-2);border-radius:24px;overflow:hidden;
  background:#fff}
.cs-cmp-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr)}
.cs-cmp-row>div{padding:17px 22px;border-top:1px solid var(--line-3);font-size:14.5px}
.cs-cmp-row:first-child>div{border-top:none;font-size:13px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;color:var(--faint);background:var(--bg)}
.cs-cmp-row>div:first-child{font-weight:600}
.cs-cmp-row>div:nth-child(2){color:var(--muted)}
.cs-cmp-row>div:last-child{color:var(--ink);font-weight:600;background:rgba(21,113,198,.04)}
.cs-cmp-row:first-child>div:last-child{color:var(--blue);background:rgba(21,113,198,.07)}

/* what you get, and the price --------------------------------------------- */
.cs-offer .hm-wrap{position:relative;overflow:hidden}
.cs-offer-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px;
  margin-top:40px;align-items:start}
.cs-stack{background:#fff;border:1px solid var(--line-2);border-radius:26px;padding:12px}
/* Direct children only. Matching every div inside laid the row's own text
   wrapper out as a flex row too, so the headline and its explanation sat
   side by side instead of stacking. */
.cs-stack>div{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;
  border-radius:18px}
.cs-stack>div:nth-child(odd){background:var(--bg)}
.cs-stack i{width:24px;height:24px;flex:none;border-radius:50%;background:#E3F6EE;
  color:var(--green);font-style:normal;font-size:13px;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.cs-stack b{display:block;font-size:15px;font-weight:700}
.cs-stack span{display:block;font-size:13.5px;color:var(--ink-2);margin-top:3px}
.cs-buybox{background:var(--ink);color:#fff;border-radius:26px;padding:34px 30px;
  box-shadow:0 40px 80px -40px rgba(13,8,77,.5);position:sticky;top:96px}
.cs-buybox .was{font-size:14px;color:rgba(255,255,255,.6)}
.cs-buybox .was s{margin-left:6px}
.cs-buybox .now{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:6px}
.cs-buybox .now b{font-size:46px;font-weight:800;letter-spacing:-.03em;line-height:1}
.cs-buybox .save{font-size:12px;font-weight:800;background:rgba(255,255,255,.16);
  padding:6px 11px;border-radius:99px}
.cs-buybox .terms{font-size:13.5px;color:rgba(255,255,255,.7);margin-top:10px}
.hm .cs-buybox .go{display:block;width:100%;text-align:center;margin-top:22px;
  background:#fff;color:var(--ink);font-weight:700;font-size:16px;padding:16px;
  border-radius:99px;border:none;cursor:pointer}
.hm .cs-buybox .go:hover{background:var(--sky);color:var(--ink)}
.cs-buybox .safe{font-size:12.5px;color:rgba(255,255,255,.6);text-align:center;margin-top:14px}
.cs-guarantee{display:flex;align-items:center;gap:20px;margin-top:28px;padding:22px 26px;
  background:#fff;border:1px solid var(--line-2);border-radius:22px}
.cs-guarantee .badge{width:62px;height:62px;flex:none;border-radius:50%;background:#E3F6EE;
  color:var(--green);font-weight:800;font-size:13px;line-height:1.1;text-align:center;
  display:flex;align-items:center;justify-content:center}
.cs-guarantee b{font-size:16px;font-weight:700}
.cs-guarantee p{font-size:14px;line-height:1.55;color:var(--ink-2);margin-top:4px}

/* the questions ------------------------------------------------------------ */
.cs-faq .hm-wrap{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
  gap:56px;align-items:start;padding:96px 28px}
.cs-faq-aside{position:sticky;top:96px}
.cs-faq-aside h2{font-size:clamp(30px,3.4vw,44px);line-height:1.08;margin-top:14px}
.cs-faq-aside p{font-size:16px;line-height:1.6;color:var(--ink-2);margin-top:14px}
.cs-faq-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.cs-q{border-bottom:1px solid var(--line);}
.cs-q-head{width:100%;display:flex;align-items:center;gap:18px;padding:22px 2px;
  background:none;border:none;cursor:pointer;text-align:left;font-family:inherit;
  font-size:17px;font-weight:600;color:var(--ink)}
.cs-q-head span{flex:1;min-width:0}
.cs-q-head .pm{width:28px;height:28px;flex:none;border-radius:50%;
  border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;
  color:var(--ink-2);transition:transform .3s,background .2s}
.cs-q.open .pm{transform:rotate(45deg);background:var(--bg)}
.cs-q-body{display:none;padding:0 46px 22px 2px;font-size:15.5px;line-height:1.65;
  color:var(--ink-2);text-wrap:pretty}
.cs-q.open .cs-q-body{display:block}

/* the last word ------------------------------------------------------------ */
.cs-final .hm-wrap{padding:0 28px 96px}
.cs-final-in{position:relative;border-radius:34px;overflow:hidden;padding:96px 48px;
  text-align:center;background:linear-gradient(150deg,var(--ink),#16116b 55%,var(--blue))}
.cs-final-in h2{font-size:clamp(34px,4.6vw,60px);line-height:1.05;color:#fff;
  max-width:760px;margin:0 auto;text-wrap:balance}
.cs-final-in h2 .hm-em{color:var(--sky)}
.cs-final-in p{font-size:17px;line-height:1.6;color:rgba(255,255,255,.76);
  max-width:520px;margin:18px auto 0}
.hm .cs-final-in .go{display:inline-flex;align-items:center;gap:12px;margin-top:30px;
  background:#fff;color:var(--ink);font-weight:700;font-size:17px;padding:17px 32px;
  border-radius:99px;border:none;cursor:pointer}
.hm .cs-final-in .go:hover{background:var(--sky);color:var(--ink)}
.hm .cs-final-in .go s{opacity:.5;font-weight:500;font-size:15px}
.cs-final-in .ticks{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;
  margin-top:22px;font-size:13.5px;color:rgba(255,255,255,.7)}
.cs-final-deco{position:absolute;left:50%;top:50%;border-radius:50%;
  border:1px solid rgba(255,255,255,.12);transform:translate(-50%,-50%);pointer-events:none}

/* the bar that follows you ------------------------------------------------- */
.cs-sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(13,8,77,.97);
  backdrop-filter:blur(12px);color:#fff;transform:translateY(110%);
  transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.cs-sticky.on{transform:none}
.cs-sticky-in{max-width:var(--shell);margin:0 auto;padding:13px 28px;display:flex;
  align-items:center;gap:20px}
.cs-sticky .t{flex:1;min-width:0}
.cs-sticky .ti{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.cs-sticky .pr{font-size:13px;color:rgba(255,255,255,.72);margin-top:2px}
.cs-sticky .pr b{color:#fff;font-size:15px}
.cs-sticky .pr s{margin-left:6px}
.hm .cs-sticky .go{background:#fff;color:var(--ink);font-weight:700;font-size:15px;
  padding:12px 24px;border-radius:99px;white-space:nowrap;border:none;cursor:pointer}
.hm .cs-sticky .go:hover{background:var(--sky);color:var(--ink)}

/* already in ---------------------------------------------------------------- */
.cs-have{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:18px;
  background:#E3F6EE;border:1px solid #BFE8D8;margin-top:18px}
.cs-have i{width:30px;height:30px;flex:none;border-radius:50%;background:var(--green);
  color:#fff;font-style:normal;font-weight:800;display:flex;align-items:center;
  justify-content:center}
.cs-have b{display:block;font-size:15px}
.cs-have span{display:block;font-size:13px;color:var(--ink-2)}

/* the clip, full size ------------------------------------------------------- */
.cs-modal{position:fixed;inset:0;z-index:60;background:rgba(13,8,77,.84);
  backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;
  padding:24px}
.cs-modal[hidden]{display:none}
.cs-modal-box{position:relative;width:min(100%,980px);aspect-ratio:16/9;border-radius:22px;
  overflow:hidden;background:#000}
.cs-modal-box video,.cs-modal-box iframe{width:100%;height:100%;border:0;display:block}
.cs-modal-x{position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:50%;
  border:none;background:#fff;color:var(--ink);cursor:pointer;display:flex;
  align-items:center;justify-content:center}
.cs-modal-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round}

@keyframes csHalo{0%{transform:scale(.8);opacity:.7}100%{transform:scale(1.9);opacity:0}}

/* ---------------------------------------------------------------- widths -- */
@media (max-width:1040px){
  .cs-road{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-skill-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .cs-hero .hm-wrap{grid-template-columns:1fr;gap:36px}
  .cs-cur .hm-wrap{grid-template-columns:1fr;gap:34px}
  .cs-cur-aside,.cs-faq-aside,.cs-buybox{position:static}
  .cs-faq .hm-wrap{grid-template-columns:1fr;gap:34px}
  .cs-offer-grid{grid-template-columns:1fr}
  .cs-pains{grid-template-columns:1fr}
}
@media (max-width:860px){
  .cs-story{grid-template-columns:1fr}
  .cs-story-v{min-height:460px}
  .cs-story-t{padding:32px 24px}
}
@media (max-width:640px){
  .cs-hero .hm-wrap{padding:48px 20px 56px}
  .cs-launch{font-size:12.5px;padding:10px 16px;gap:7px}
  /* The two prices are the point of the bar; the invitation can go. */
  .cs-launch em{display:none}
  .cs-jump .hm-wrap{padding:8px 20px;gap:10px}
  .hm .cs-jump-l a{font-size:13px;padding:8px 11px}
  .hm .cs-jump-go{font-size:13px;padding:10px 15px}
  .cs-assure{gap:14px}
  .cs-sec .hm-wrap,.cs-cur .hm-wrap,.cs-faq .hm-wrap{padding:64px 20px}
  .cs-road{grid-template-columns:1fr}
  .cs-skill-grid{grid-template-columns:1fr;padding:22px 22px 0}
  .cs-skills-top,.cs-more{padding-left:22px;padding-right:22px}
  .cs-tools{padding:20px 22px 28px}
  .cs-final-in{padding:64px 24px;border-radius:26px}
  .cs-cmp-row{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr)}
  .cs-cmp-row>div{padding:14px 12px;font-size:13px}
  .cs-sticky-in{padding:11px 18px;gap:12px}
  .cs-sticky .pr{font-size:12px}
  .cs-guarantee{flex-direction:column;text-align:center}
}

/* ---------------------------------------------------------------- phones -- */
/* A tablet is a touch screen too: the hit sizes below follow the
   pointer, not the width, so a 768px iPad gets them as a 390px
   phone does while a 1024px laptop keeps its own proportions. */
@media (max-width:760px), (max-width:1024px) and (pointer:coarse){
  /* Three figures side by side would not fit a 320px column and would not
     shrink either, so the page slid sideways. They wrap now. */
  .cs-figs,.cs-counts{flex-wrap:wrap;gap:18px 26px}
  /* A grid item will not go narrower than its content unless it is told it
     may. Once these stack into one column, the widest thing inside the
     curriculum's aside was setting the column's width -- 322px on a 320px
     screen -- and taking the whole page sideways with it. */
  .cs-cur .hm-wrap>*,.cs-faq .hm-wrap>*,.cs-hero .hm-wrap>*,
  .cs-offer-grid>*,.cs-story>*{min-width:0}
  .cs-cur-aside h2,.cs-faq-aside h2,.cs-hero h1{overflow-wrap:anywhere}
  .cs-hero-cta .cs-buy,.cs-hero-cta .hm-btn{flex:1 1 100%;justify-content:center}
  .cs-buy,.cs-card-cta,.cs-buybox .go,.cs-final-in .go{min-height:52px}
  .hm .cs-jump-l a,.hm .cs-jump-go{min-height:42px;display:inline-flex;align-items:center}
  .hm a.cs-launch{min-height:44px}
  .cs-assure span{font-size:12.5px}
  .cs-mod-head,.cs-q-head{min-height:56px}
  .cs-les{min-height:46px}
  button.cs-les{padding:12px 0}
  /* Nothing under 12px. */
  .cs-flag,.cs-les .d,.cs-les .free,.cs-step .num,.cs-step .num b,
  .cs-step .cnt,.cs-refund,.cs-perday,.cs-tools .lbl,.cs-chips span,
  .cs-sticky .pr,.cs-guarantee p,.cs-story-t .rl,.cs-buybox .safe,
  .cs-skill span.n{font-size:12.5px}
  /* The number badge grows with its text or the digit is clipped. */
  .cs-step .num b{width:20px;height:20px}
  /* A link in the middle of a sentence is read, not aimed at -- but it is
     still pressed, so it gets room above and below. */
  .cs-refund a{display:inline-block;padding:6px 2px}
  /* The bar at the foot of the screen covers the end of the page unless the
     page is told to stop short of it. */
  .cs-sticky~*{padding-bottom:0}
  body.hm:has(.cs-sticky.on) .hm-foot{padding-bottom:76px}
}
@media (max-width:380px){
  .cs-hero .hm-wrap{padding:36px 16px 44px}
  .cs-sec .hm-wrap,.cs-cur .hm-wrap,.cs-faq .hm-wrap{padding:52px 16px}
  .cs-final .hm-wrap{padding:0 16px 56px}
  .cs-skills-top,.cs-more{padding-left:16px;padding-right:16px}
  .cs-skill-grid{padding-left:16px;padding-right:16px}
  .cs-tools{padding:18px 16px 24px}
  .cs-story-t{padding:26px 18px}
  .cs-card-b{padding:18px 14px 14px}
  .cs-price b{font-size:32px}
  .cs-buybox{padding:26px 20px}
  /* Three columns of comparison in 320px is three words a line; the key
     column keeps its space and the other two share what is left. */
  .cs-cmp-row{grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,.9fr)}
  .cs-cmp-row>div{padding:12px 9px;font-size:12.5px}
}