/* ===========================================================================
   The home page.

   This is the design the team settled on, rebuilt as a stylesheet. It arrived
   as one file of inline styles with every value repeated at each use; the
   values here are the same ones, named once, so a colour or a radius can be
   changed in a single place.

   The palette is deliberately single-theme: the brand is a navy and a blue on
   a near-white ground, and the page is photographed, printed and shown on
   projectors in that form. There is no dark variant to get wrong.
   ========================================================================= */

.hm{
  --ink:#0D084D;          /* headings, and the darkest thing on the page */
  --ink-2:#55597A;        /* body copy */
  --muted:#696C89;        /* captions */
  --faint:#8A8DA5;        /* labels inside cards */
  --blue:#1362B1;         /* the one accent: links, buttons, the italic word */
  --blue-deep:#0970C4;
  --sky:#72CAEA;          /* only ever a gradient partner or a glow */
  --navy-line:#1C1760;    /* the drawn outline in the hero scene */
  --bg:#F6F8FB;
  --line:#E4E8EF;         /* the page's rules, including the two side rails */
  --line-2:#E1E6EE;       /* card borders */
  --line-3:#EDF0F5;       /* dividers inside cards */
  --amber:#F5A14F;
  --green:#22B07D;
  --red:#E5484D;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --shell:1200px;         /* the width the two vertical rules sit at */

  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
}

/* The design carried overflow:hidden on a wrapper inside the body. Put on the
   body itself it propagates to the viewport, and the page stops scrolling
   altogether -- which is exactly what happened. Each band that has something
   sticking out of it clips its own overflow instead: the hero's scene, the
   marquee's rail, the review wall and the ring behind the closing call. */
html{scroll-behavior:smooth}
/* The browser's own 8px margin on the body, which the design never had: it
   put a white edge down both sides and held the sticky header eight pixels
   clear of the top of the window. And border-box, which the design assumed
   throughout -- every padding on this page is written as though it sits
   inside the width it is given. */
body.hm{overflow:visible;margin:0}
.hm *,.hm *::before,.hm *::after{box-sizing:border-box}

/* The ruled shell. Every band on the page is the same width with a hairline
   down each side, which is what makes the layout read as one sheet rather
   than a stack of unrelated sections. */
.hm-wrap{max-width:var(--shell);margin:0 auto;border-left:1px solid var(--line);
  border-right:1px solid var(--line)}
.hm-band{border-bottom:1px solid var(--line)}

/* A `display` on a class beats the browser's own [hidden] rule, so anything
   this page hides with the attribute needs saying again. The close button on
   the story card was laid out as flex and stayed on screen from first paint,
   which read as a clip already playing. */
.hm [hidden]{display:none!important}
.hm a{color:var(--blue);text-decoration:none}
.hm a:hover{color:var(--ink)}
.hm h1,.hm h2,.hm h3,.hm p,.hm figure,.hm blockquote{margin:0}
.hm img{display:block;max-width:100%}
.hm button{font-family:inherit}
.hm :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px}

/* Display type is the serif; everything else is the grotesque. The italic is
   the only place a second colour appears in a heading. */
.hm-serif{font-family:var(--serif);font-weight:400;letter-spacing:-.025em}
.hm-em{font-style:italic;color:var(--blue)}
.hm-eyebrow{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--blue);
  text-transform:uppercase}

.hm-pill{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}
.hm-pill i{width:6px;height:6px;border-radius:50%;background:var(--blue);flex:none}
.hm-pill .live{background:var(--green);animation:hmGlow 1.6s infinite}

/* buttons ---------------------------------------------------------------- */
.hm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:15px;font-weight:600;padding:14px 24px;border-radius:99px;
  white-space:nowrap;border:1px solid transparent;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,box-shadow .2s}
/* Held above `.hm a`, which sets the link colour and scores the same as a
   bare class -- without this the label is drawn in the link blue on the
   button's blue and the button reads as empty. */
.hm .hm-btn-primary{background:var(--blue);color:#fff;
  box-shadow:0 8px 20px -8px rgba(19,98,177,.6)}
.hm .hm-btn-primary:hover{background:var(--ink);color:#fff}
.hm .hm-btn-ghost{background:#fff;color:var(--ink);border-color:#D7DCE6}
.hm .hm-btn-ghost:hover{border-color:var(--ink);color:var(--ink)}

/* The header and the menu sheet live in nav.css: every public page carries
   them, including the ones that are not built on this stylesheet, so they
   cannot live in here. */

/* ------------------------------------------------------------------ hero -- */
.hm-hero{overflow:hidden}
.hm-hero > .hm-wrap{position:relative;padding:84px 24px 0;text-align:center}
.hm-hero h1{position:relative;z-index:2;font-size:clamp(44px,6.4vw,84px);line-height:1.02;
  margin:26px auto 0;max-width:900px;text-wrap:balance}
/* Written as `p.hm-lede` on purpose: the reset above sets margin:0 on every
   p inside .hm, and a bare class loses to it -- which left this paragraph
   pinned to the left of the hero instead of centred under the headline. */
.hm p.hm-lede{position:relative;z-index:2;font-size:18px;line-height:1.6;
  color:var(--ink-2);max-width:600px;margin:22px auto 0;text-wrap:pretty}
.hm-hero-cta{position:relative;z-index:2;display:flex;gap:10px;justify-content:center;
  margin-top:32px;flex-wrap:wrap}
/* Each line of the hero arrives just behind the one above it. */
.hm-rise{animation:hmUp .8s cubic-bezier(.2,.7,.2,1) both}
.hm-rise-1{animation-delay:.08s}
.hm-rise-2{animation-delay:.16s}
.hm-rise-3{animation-delay:.24s}

/* the flow scene ---------------------------------------------------------- */
/* A fixed 1120x520 drawing, scaled down to whatever width the page has. The
   scale is set on --hm-stage by the script; the height follows it so the
   section does not keep a tall empty gap on a phone. */
.hm-stage{position:relative;margin:24px 0;height:calc(530px * var(--hm-stage,1))}
.hm-stage-in{position:absolute;left:50%;top:0;width:1120px;height:520px;
  transform:translateX(-50%) scale(var(--hm-stage,1));transform-origin:top center;
  text-align:left}
.hm-glow{position:absolute;left:310px;top:60px;width:500px;height:420px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(114,202,234,.35),rgba(114,202,234,0) 68%);
  pointer-events:none}
.hm-wires{position:absolute;inset:0}
.hm-wires path{stroke:var(--navy-line);stroke-width:1.4;stroke-linecap:round;
  stroke-linejoin:round;opacity:.9;fill:none}
/* A dot travelling the wire, so the diagram reads as something flowing
   rather than a static map. */
.hm-pulse{position:absolute;left:0;top:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px rgba(19,98,177,.18);
  offset-rotate:0deg;animation:hmFlow 2.8s cubic-bezier(.45,0,.55,1) infinite}

.hm-tool{position:absolute;left:150px;width:68px;height:68px;border-radius:18px;
  overflow:hidden;background:#fff;border:1.4px solid var(--navy-line);
  display:flex;align-items:center;justify-content:center;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.hm-tool.on{transform:scale(1.08);
  box-shadow:0 0 0 6px rgba(19,98,177,.12),0 14px 28px -12px rgba(13,8,77,.3)}
.hm-tool span{position:absolute;left:17px;top:17px;width:32px;height:32px;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  opacity:0;transform:scale(.4) rotate(-30deg);
  transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.hm-tool span.on{opacity:1;transform:scale(1) rotate(0deg)}

.hm-out{position:absolute;left:900px;display:flex;align-items:center;gap:12px}
.hm-out .box{width:68px;height:68px;border-radius:18px;background:#fff;
  border:1.4px solid var(--navy-line);color:var(--navy-line);
  display:flex;align-items:center;justify-content:center;
  transition:background .5s,border-color .5s,color .5s,transform .5s}
.hm-out .box svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.hm-out b{font-size:14px;font-weight:600;color:var(--ink);opacity:.55;transition:opacity .5s}
.hm-out.on .box{background:var(--blue);border-color:var(--blue);color:#fff;transform:scale(1.08)}
.hm-out.on b{opacity:1}

/* the phone in the middle */
.hm-app{position:absolute;left:400px;top:30px;width:320px;height:490px;
  border-radius:34px 34px 0 0;background:#fff;border:1.4px solid var(--navy-line);
  border-bottom:none;padding:22px 22px 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent);
  mask-image:linear-gradient(180deg,#000 80%,transparent)}
.hm-app-top{display:flex;align-items:center;justify-content:space-between}
.hm-app-top .who{display:flex;align-items:center;gap:8px}
.hm-app-top img{width:28px;height:28px;object-fit:contain}
.hm-app-top b{font-size:16px;font-weight:700;letter-spacing:-.01em}
.hm-av{width:30px;height:30px;border-radius:50%;background:#EEF5FC;color:var(--blue);
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.hm-app-search{margin-top:16px;display:flex;align-items:center;gap:8px;height:36px;
  padding:0 12px;border-radius:12px;background:#F5F7FB;border:1px solid var(--line-3);
  font-size:12px;color:var(--faint)}
.hm-app-chips{display:flex;gap:6px;margin-top:10px}
.hm-app-chips span{font-size:11px;font-weight:600;padding:5px 10px;border-radius:99px;
  background:#F1F3F8;color:var(--ink-2)}
.hm-app-chips span:first-child{background:var(--ink);color:#fff}
.hm-rule{height:1px;background:#E6E9F0;margin:16px 0}
.hm-app-label{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--faint)}

.hm-lessons{position:relative;height:50px}
.hm-lesson{position:absolute;inset:0;display:flex;align-items:center;gap:12px;
  opacity:0;transform:translateY(16px);
  transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.hm-lesson.on{opacity:1;transform:translateY(0)}
.hm-lesson.was{transform:translateY(-16px)}
.hm-lesson .ic{position:relative;width:44px;height:44px;flex-shrink:0;border-radius:11px;
  background:var(--ink);display:flex;align-items:center;justify-content:center}
.hm-lesson .ic span{width:24px;height:24px;border-radius:6px;background-color:#fff;
  background-size:18px;background-repeat:no-repeat;background-position:center}
.hm-lesson .tx{flex:1;min-width:0}
.hm-lesson .hd{display:flex;align-items:center;gap:6px}
.hm-lesson .lv{font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--red)}
.hm-lesson .ti{font-size:13px;font-weight:700;white-space:nowrap}
.hm-lesson .sb{font-size:11px;color:var(--faint);margin-top:2px;white-space:nowrap}
.hm-bar{height:5px;border-radius:99px;background:#EEF0F5;margin-top:6px;overflow:hidden}
.hm-bar i{display:block;height:100%;width:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--sky),var(--blue));transform-origin:left;
  animation:hmLoad 2.8s ease-in-out infinite}

.hm-skill{display:flex;align-items:center;gap:10px}
.hm-skill .ic{width:30px;height:30px;flex-shrink:0;border-radius:8px;
  border:1px solid #E6EAF1;background-size:16px;background-repeat:no-repeat;
  background-position:center}
.hm-skill .tx{flex:1;min-width:0}
.hm-skill .hd{display:flex;justify-content:space-between;font-size:12px;font-weight:600}
.hm-skill .pc{color:var(--faint);font-weight:700}
.hm-skill .pc.done{color:var(--green)}
.hm-skill .tr{height:4px;border-radius:99px;background:#EEF0F5;margin-top:6px;overflow:hidden}
.hm-skill .tr i{display:block;height:100%;border-radius:99px;background:var(--blue)}
.hm-skill .tr i.done{background:var(--green)}
.hm-next{display:flex;align-items:center;gap:12px}
.hm-next .ic{width:38px;height:38px;border-radius:10px;border:1px solid #E6EAF1;
  display:flex;align-items:center;justify-content:center}
.hm-next .ic span{width:20px;height:20px;background-size:contain;
  background-repeat:no-repeat;background-position:center}
.hm-next b{font-size:12px;font-weight:700;display:block}
.hm-next em{font-style:normal;font-size:11px;color:var(--faint)}

.hm-cards{position:absolute;left:356px;top:396px;width:408px;height:80px}
.hm-card{position:absolute;inset:0;border-radius:18px;background:var(--blue);color:#fff;
  display:flex;align-items:center;gap:16px;padding:0 20px 0 16px;
  box-shadow:0 24px 40px -16px rgba(19,98,177,.55);opacity:0;
  transform:translateY(26px) scale(.96);
  transition:opacity .55s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.hm-card.cert{background:linear-gradient(120deg,var(--ink),var(--blue))}
.hm-card.on{opacity:1;transform:translateY(0) scale(1)}
.hm-card.was{transform:translateY(-26px) scale(.96)}
.hm-card .ic{width:50px;height:50px;flex-shrink:0;border-radius:12px;background:#fff;
  display:flex;align-items:center;justify-content:center}
.hm-card .ic span{width:28px;height:28px;background-size:contain;
  background-repeat:no-repeat;background-position:center}
.hm-card .tx{flex:1;min-width:0}
.hm-card .ti{font-size:16px;font-weight:700;white-space:nowrap}
.hm-card .sb{font-size:13px;color:rgba(255,255,255,.72);margin-top:3px;white-space:nowrap}
.hm-card .tg{font-size:11px;font-weight:700;letter-spacing:.04em;
  background:rgba(255,255,255,.18);padding:5px 9px;border-radius:99px;white-space:nowrap}

.hm-twinkle{position:absolute;fill:none;animation:hmTwinkle 3.2s ease-in-out infinite}
.hm-twinkle path{stroke:var(--navy-line);stroke-width:1.5;stroke-linejoin:round}

/* who learns here ---------------------------------------------------------- */
.hm-marq{position:relative;z-index:3;border-top:1px solid var(--line);background:var(--bg)}
.hm-marq .hm-wrap{display:flex;align-items:center}
.hm-marq-lead{flex-shrink:0;padding:22px 24px 22px 28px;border-right:1px solid var(--line);
  font-size:13px;line-height:1.35;color:var(--ink-2);white-space:nowrap}
.hm-marq-lead b{display:block;font-size:15px;color:var(--ink)}
.hm-marq-rail{flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.hm-marq-track{display:flex;align-items:center;width:max-content;
  animation:hmMarq 60s linear infinite}
.hm-marq-track span{display:flex;align-items:center;gap:28px;padding-right:28px;
  white-space:nowrap;font-family:var(--serif);font-size:22px;color:#6E7491}
.hm-marq-track span:nth-child(3n+2){color:var(--blue);font-style:italic}
.hm-marq-track i{width:5px;height:5px;border-radius:50%;background:#B8CBE2}

/* ----------------------------------------------------------------- stats -- */
.hm-sec-head{padding:96px 28px 44px;display:flex;justify-content:space-between;
  align-items:flex-end;gap:24px;flex-wrap:wrap}
.hm-sec-head h2{font-size:clamp(32px,3.6vw,46px);line-height:1.08;max-width:620px;
  text-wrap:balance}
.hm-sec-head p{font-size:16px;line-height:1.6;color:var(--ink-2);max-width:380px}
.hm-stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;
  border:1px solid var(--line-2);border-radius:24px;overflow:hidden;margin:0 28px 96px}
.hm-stat{padding:30px 28px 32px;border-right:1px solid var(--line-3);
  border-bottom:1px solid var(--line-3);margin:0 -1px -1px 0;
  display:flex;flex-direction:column}
.hm-stat-top{height:30px;display:flex;align-items:center}
.hm-stat-n{font-family:var(--serif);font-size:clamp(46px,4.4vw,58px);line-height:1;
  letter-spacing:-.03em;margin-top:22px;font-variant-numeric:tabular-nums}
/* Two of these four boxes hold a phrase rather than a figure, because the
   admin can type anything into them. At the display size a phrase overflows
   its card; set smaller, it still reads as the headline of the box. */
.hm-stat-n.words{font-size:clamp(26px,2.4vw,32px);line-height:1.12;
  letter-spacing:-.02em;margin-top:18px;text-wrap:balance}
.hm-stat-l{font-size:15px;font-weight:700;margin-top:12px}
.hm-stat-s{font-size:14px;line-height:1.55;color:var(--muted);margin-top:4px;
  text-wrap:pretty}
.hm-faces{display:flex}
.hm-faces span{width:28px;height:28px;border-radius:50%;margin-right:-7px;
  border:2px solid #fff;font-size:11px;font-weight:700;display:flex;
  align-items:center;justify-content:center;overflow:hidden}
.hm-faces img{width:100%;height:100%;object-fit:cover}
.hm-stars{font-size:17px;color:var(--amber);letter-spacing:3px}
.hm-tools{display:flex;gap:6px}
.hm-tools span{width:28px;height:28px;border-radius:8px;border:1px solid #E6EAF1;
  background:#fff;display:flex;align-items:center;justify-content:center}
.hm-tools i{width:16px;height:16px;background-size:contain;background-repeat:no-repeat;
  background-position:center}
.hm-meter{display:block;width:120px;height:6px;border-radius:99px;background:#EEF2F7;
  overflow:hidden}
.hm-meter i{display:block;height:100%;width:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--sky),var(--blue))}

/* ----------------------------------------------------------- avatars -- */
/* Initials when there is no photograph, which is what every address book
   worth copying does. What makes them read as finished rather than as a
   placeholder: two letters, a colour that belongs to the name rather than
   to a position in a list, a gradient instead of a flat fill, and a
   hairline ring so the circle holds its edge on any ground. */
.hm-face{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:none;border-radius:50%;overflow:hidden;
  color:#fff;user-select:none}
/* The figure fills a fixed share of the disc, so it stays the same shape
   at 30px and at 52px rather than being a different drawing at each. */
.hm-face-i{width:72%;height:72%;display:block;fill:currentColor;opacity:.92}
/* Inside, not around: a border would change the circle's size wherever one
   is laid over another. */
.hm-face::after{content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),
             inset 0 -2px 6px rgba(0,0,0,.18)}
.hm-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hm-face.sm{width:30px;height:30px}
.hm-face.lg{width:52px;height:52px}

/* ------------------------------------------------------- trusted by -- */
/* Drawn by HM.trust(), which the About page and the courses page both
   call -- so the styles live here, in the sheet every page in the
   theme loads, rather than in one page's own. */
.ab-trust{border-top:1px solid var(--line);background:var(--bg);padding:30px 0 34px}
.ab-trust-l{text-align:center;padding:0 28px;font-family:var(--serif);
  font-size:clamp(20px,2vw,24px);line-height:1.3;color:var(--ink-2);text-wrap:balance}
.ab-trust-l i{font-style:italic;color:var(--blue)}
/* A pale glow behind the middle, and both ends faded into the page. */
.ab-trust-rows{display:flex;flex-direction:column;gap:22px;margin-top:34px;
  padding:14px 0;overflow:hidden;
  background:radial-gradient(ellipse 22% 90% at 50% 50%,
    rgba(114,202,234,.22),rgba(114,202,234,0) 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}

/* Each row is drawn twice. Underneath, the whole row greyed and softened;
   on top, the same row in full colour, masked down to a band across the
   middle -- so a logo arrives in colour, passes through, and leaves again.
   Both copies carry the same animation, which is what keeps them in step. */
.ab-trust-rail{position:relative}
.ab-trust-rail .dim{filter:grayscale(1) blur(.4px);opacity:.42}
.ab-trust-rail .lit{position:absolute;inset:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 44%,#000 56%,transparent 70%);
  mask-image:linear-gradient(90deg,transparent 30%,#000 44%,#000 56%,transparent 70%)}

.ab-trust-track{display:flex;align-items:center;width:max-content;
  animation:hmMarq 90s linear infinite}
.ab-trust-track.rev{animation-duration:95s;animation-direction:reverse}
.ab-trust-track .it{display:flex;align-items:center;gap:44px;padding-right:44px;
  white-space:nowrap}
.ab-trust-track .m{display:flex;align-items:center;gap:12px;letter-spacing:-.01em;
  color:var(--ink)}
.ab-trust-track .sep{width:4px;height:4px;border-radius:50%;background:#C9D5E4}
.ab-trust-track i{flex-shrink:0;width:var(--sz);height:var(--sz);
  background-size:contain;background-repeat:no-repeat;background-position:center}
.ab-trust-track.serif .m{font-family:var(--serif);font-size:22px;font-weight:400}
.ab-trust-track.sans .m{font-size:17px;font-weight:700}
/* Stop it where it is, so a name you half-read can be read. */
.ab-trust-rows:hover .ab-trust-track{animation-play-state:paused}

/* --------------------------------------------------------------- courses -- */
.hm-courses .hm-wrap{padding:96px 28px}
.hm-center{text-align:center}
.hm-center h2{font-size:clamp(34px,4.2vw,54px);line-height:1.06;margin:14px auto 0;
  max-width:640px;text-wrap:balance}
.hm-center p{font-size:16px;line-height:1.6;color:var(--ink-2);margin:16px auto 0;
  max-width:460px}
.hm-tabs{display:flex;justify-content:center;margin-top:36px}
/* A row, never a wrapped blob. Wrapping inside a 99px radius made a
   lozenge with pills stacked in it, which is the shape of nothing. Past the
   width it has, it scrolls. */
.hm-tabs-in{display:flex;gap:4px;padding:5px;background:#fff;border:1px solid var(--line-2);
  border-radius:99px;justify-content:flex-start;max-width:100%;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.hm-tabs-in::-webkit-scrollbar{display:none}
.hm-tabs-in>*{flex:0 0 auto}
.hm-tab{border:none;cursor:pointer;font-size:14px;font-weight:600;padding:10px 18px;
  border-radius:99px;white-space:nowrap;background:transparent;color:var(--ink-2);
  transition:background .25s,color .25s}
.hm-tab:hover{color:var(--ink)}
.hm-tab[aria-selected="true"]{background:var(--ink);color:#fff}

.hm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));
  gap:18px;margin-top:40px}
/* The courses rail. Three cards on a laptop, two on a tablet, one and a
   glimpse of the next on a phone -- the glimpse is what tells a thumb the
   row moves sideways, so it is a part of the design and not a rounding
   error. The width is set here; everything else the rail brings itself. */
.hm-rail{margin-top:40px}
/* Three across, two rows, as the design draws it. The rail underneath is
   the same markup: below 1040 the track goes back to being a flex row that
   scrolls, which is what the client asked for when the cards were stacking
   one under another on a phone. */
.hm-rail .rl-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;overflow:visible;padding:0}
.hm-rail .rl-track>.rl-item{width:auto}
.hm-rail .hm-course{height:auto}
.hm-rail .hm-empty{flex:1 0 100%;width:100%}
/* Room for the shadow the cards lift into, which a clipping row would cut. */
.hm-rail .rl-track{padding-bottom:20px}
.hm-rail .rl-dots{margin-top:2px}
/* The whole card is the link. The button inside it stretches an invisible
   layer over the card, so pressing anywhere on it opens the course without
   nesting one anchor inside another -- which is invalid, and which browsers
   resolve by silently closing the outer one. */
.hm-course{position:relative;background:#fff;border:1px solid var(--line-2);
  border-radius:26px;padding:8px;display:flex;flex-direction:column;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.hm-course .hm-cta-sm::after{content:"";position:absolute;inset:0;border-radius:26px}
/* Anything that has its own job sits above that layer. */
.hm-course .hm-flag,.hm-course .hm-len{z-index:1}
.hm-course:hover{transform:translateY(-6px);
  box-shadow:0 30px 60px -30px rgba(13,8,77,.28)}
.hm-course-art{position:relative;height:190px;border-radius:20px;overflow:hidden;
  background:linear-gradient(140deg,#DDF1FB,#B9DDF3 60%,#9CC8EC)}
/* The dotted field behind the floating tool tiles, faded at the edges. */
.hm-dots{position:absolute;inset:0;
  background-image:radial-gradient(rgba(13,8,77,.10) 1px,transparent 1.4px);
  background-size:18px 18px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000,transparent 75%);
  mask-image:radial-gradient(ellipse at center,#000,transparent 75%)}
.hm-course-art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hm-tiles{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:12px}
.hm-tiles span{width:60px;height:60px;border-radius:18px;background:rgba(255,255,255,.82);
  backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.95);
  box-shadow:0 4px 0 rgba(13,8,77,.06),0 14px 26px -10px rgba(13,8,77,.3);
  display:flex;align-items:center;justify-content:center}
.hm-tiles i{width:32px;height:32px;background-size:contain;background-repeat:no-repeat;
  background-position:center}
.hm-flag{position:absolute;left:14px;top:14px;display:flex;align-items:center;gap:7px;
  font-size:12px;font-weight:700;color:var(--ink);background:rgba(255,255,255,.9);
  padding:6px 11px;border-radius:99px}
.hm-flag i{width:7px;height:7px;border-radius:50%;background:var(--green)}
.hm-flag.soon i{background:var(--amber)}
.hm-len{position:absolute;right:14px;top:14px;font-size:12px;font-weight:600;
  color:var(--ink);background:rgba(255,255,255,.7);padding:6px 11px;border-radius:99px}
.hm-course-b{padding:20px 16px 14px;display:flex;flex-direction:column;flex:1}
.hm-track{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--blue)}
.hm-course-b h3{font-size:20px;line-height:1.25;font-weight:700;letter-spacing:-.015em;
  margin-top:8px}
.hm-course-b p{font-size:14px;line-height:1.6;color:var(--ink-2);margin-top:8px;
  text-wrap:pretty}
.hm-foot-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:20px}
.hm-price{display:flex;align-items:baseline;gap:8px}
.hm-price b{font-size:22px;font-weight:700;letter-spacing:-.02em}
.hm-price s{font-size:14px;color:var(--faint)}
.hm-meta{font-size:12px;color:var(--muted);margin-top:2px}
.hm .hm-cta-sm{font-size:14px;font-weight:600;padding:11px 18px;border-radius:99px;
  white-space:nowrap;background:var(--blue);color:#fff;border:1px solid var(--blue)}
.hm .hm-cta-sm:hover{opacity:.88;color:#fff}
.hm .hm-cta-sm.quiet{background:#fff;color:var(--ink);border-color:#D7DCE6}
.hm-more{display:flex;justify-content:center;margin-top:36px}
.hm-empty{grid-column:1/-1;text-align:center;color:var(--muted);font-size:15px;
  padding:40px 0}

/* --------------------------------------------------------------- stories -- */
.hm-stories .hm-wrap{padding:96px 28px}
.hm-stories-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  flex-wrap:wrap}
.hm-stories-head h2{font-size:clamp(34px,4.2vw,54px);line-height:1.06;margin-top:14px;
  max-width:600px;text-wrap:balance}
.hm-stories-head p{font-size:16px;line-height:1.6;color:var(--ink-2);max-width:380px}
.hm-stories-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:18px;
  margin-top:48px;align-items:stretch}

.hm-stage-card{position:relative;border-radius:28px;overflow:hidden;background:var(--ink);
  color:#fff;min-height:680px;box-shadow:0 40px 80px -40px rgba(13,8,77,.5)}
.hm-story{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.hm-story.on{opacity:1}
.hm-story video,.hm-story img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover}
.hm-scrim{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(13,8,77,.35) 0%,rgba(13,8,77,0) 25%,rgba(13,8,77,0) 55%,rgba(13,8,77,.9) 100%)}
.hm-ticks{position:absolute;left:20px;right:20px;top:18px;display:flex;gap:6px;z-index:2}
.hm-ticks div{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.28);
  overflow:hidden}
.hm-ticks i{display:block;height:100%;background:#fff;transform:scaleX(0);
  transform-origin:left}
.hm-ticks div.done i{transform:scaleX(1)}
/* Glassy, but tinted dark rather than clear. A clear white-on-white button
   is invisible the moment a clip has a pale frame behind it, which is most
   of them -- somebody filming indoors against a wall. */
.hm-play{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:78px;
  height:78px;border-radius:50%;border:1px solid rgba(255,255,255,.7);cursor:pointer;
  background:rgba(13,8,77,.42);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);color:#fff;z-index:2;
  box-shadow:0 10px 30px -10px rgba(13,8,77,.6);
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s,background .3s}
.hm-play svg{width:26px;height:26px;margin-left:4px;fill:currentColor;
  filter:drop-shadow(0 1px 2px rgba(13,8,77,.5))}
.hm-play:hover{transform:translate(-50%,-50%) scale(1.08);background:rgba(13,8,77,.62)}
.hm-story-foot{position:absolute;left:0;right:0;bottom:0;padding:0 22px 22px;z-index:2;
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.hm-story-foot .nm{font-size:20px;font-weight:700}
.hm-story-foot .rl{font-size:14px;color:rgba(255,255,255,.8);margin-top:2px}
.hm-thumbs{display:flex;gap:6px}
.hm-thumbs button{width:42px;height:42px;border-radius:50%;cursor:pointer;color:#fff;
  border:2px solid transparent;overflow:hidden;padding:0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2px rgba(13,8,77,.6);transition:transform .3s,border-color .3s}
.hm-thumbs button img{width:100%;height:100%;object-fit:cover}
.hm-thumbs button[aria-current="true"]{border-color:#fff;transform:scale(1.1)}
/* While a clip is playing with sound, everything laid over it goes away. */
.hm-stage-card.playing .hm-scrim,
.hm-stage-card.playing .hm-ticks,
.hm-stage-card.playing .hm-play,
.hm-stage-card.playing .hm-story-foot{display:none}
.hm-live{position:absolute;inset:0;z-index:3;width:100%;height:100%;border:0;
  background:#000;object-fit:cover}
.hm-close{position:absolute;top:16px;right:16px;z-index:4;width:38px;height:38px;
  border-radius:50%;border:none;cursor:pointer;background:rgba(255,255,255,.92);
  color:var(--ink);display:flex;align-items:center;justify-content:center}
.hm-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round}

.hm-wall{position:relative;height:680px;overflow:hidden;display:grid;
  grid-template-columns:1fr 1fr;gap:16px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
/* The duration is set on the element, from how many cards are in the column.
   What is here is only a floor for a column rendered without it. */
.hm-col{display:flex;flex-direction:column;gap:16px;animation:hmScroll 60s linear infinite}
.hm-col.rev{animation-direction:reverse}
/* The wall is a loop of the same cards; pausing on hover lets somebody
   finish reading the one they stopped on. */
.hm-wall:hover .hm-col{animation-play-state:paused}
.hm-rev{background:#fff;border:1px solid #E6EAF1;border-radius:22px;padding:24px}
.hm-rev .out{display:inline-flex;font-size:12px;font-weight:700;color:var(--blue);
  background:#EEF5FC;padding:5px 10px;border-radius:99px}
.hm-rev blockquote{margin-top:14px;font-family:var(--serif);font-size:19px;line-height:1.45;
  color:var(--ink);text-wrap:pretty}
.hm-rev figcaption{display:flex;align-items:center;gap:12px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line-3)}
.hm-rev .av{width:36px;height:36px;flex-shrink:0;border-radius:50%;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;
  overflow:hidden}
.hm-rev .av img{width:100%;height:100%;object-fit:cover}
/* The tick beside a reviewer's name: they bought the course. It is the
   difference between a quote and a quote somebody can check. */
.hm-rev .nm{font-size:14px;font-weight:700;display:flex;align-items:center;gap:5px}
.hm-ver{display:inline-flex;width:14px;height:14px;flex:none;color:var(--blue)}
.hm-ver svg{width:100%;height:100%;fill:currentColor}
.hm-rev .rl{font-size:12px;color:var(--muted)}
.hm-rev .st{font-size:12px;color:var(--amber);letter-spacing:1px}

/* ------------------------------------------------------------------- cta -- */
.hm-cta .hm-wrap{position:relative;padding:120px 28px;text-align:center;overflow:hidden}
.hm-ring{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);
  pointer-events:none}
.hm-ring.r1{width:420px;height:420px;border:1px solid #DCE6F2}
.hm-ring.r2{width:680px;height:680px;border:1px solid #E4EBF4}
.hm-ring.r3{width:940px;height:940px;border:1px solid #EBF0F6}
.hm-cta-glow{position:absolute;left:50%;top:50%;width:520px;height:320px;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(ellipse,rgba(114,202,234,.3),rgba(114,202,234,0) 70%)}
.hm-orbit{position:absolute;left:50%;top:50%;width:680px;height:680px;margin:-340px 0 0 -340px;
  animation:hmSpin 60s linear infinite;pointer-events:none}
.hm-orbit span{position:absolute;width:56px;height:56px;margin:-28px 0 0 -28px;
  border-radius:16px;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);
  border:1px solid #fff;box-shadow:0 4px 0 #E3E8F0,0 16px 30px -12px rgba(13,8,77,.25);
  display:flex;align-items:center;justify-content:center;
  animation:hmSpin 60s linear infinite reverse}
.hm-orbit i{width:28px;height:28px;background-size:contain;background-repeat:no-repeat;
  background-position:center}
.hm-cta-in{position:relative}
.hm-cta-in h2{font-size:clamp(40px,5.6vw,72px);line-height:1.02;margin:22px auto 0;
  max-width:760px;text-wrap:balance}
.hm-cta-in>p{font-size:17px;line-height:1.6;color:var(--ink-2);margin:20px auto 0;
  max-width:480px}
.hm-cta-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.hm-proof{display:inline-flex;align-items:center;gap:14px;margin-top:30px;
  padding:8px 18px 8px 8px;background:#fff;border:1px solid var(--line-2);
  border-radius:99px;box-shadow:0 10px 24px -14px rgba(13,8,77,.25)}
.hm-proof .faces span{width:32px;height:32px;margin-right:0;margin-left:-9px}
.hm-proof .faces span:first-child{margin-left:0}
.hm-proof .tx{font-size:14px;color:var(--ink-2);text-align:left;line-height:1.35}
.hm-proof .tx b{color:var(--ink)}
.hm-proof .tx i{font-style:normal;color:var(--amber)}
.hm-ticks-row{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:22px;
  font-size:13px;font-weight:500;color:var(--muted)}

/* ---------------------------------------------------------------- footer -- */
.hm-foot{background:#fff}
.hm-foot .hm-wrap{padding:64px 28px 0}
.hm-foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap:40px}
.hm-foot-brand{grid-column:span 2;min-width:0;max-width:360px}
.hm-foot-brand p{font-size:14px;line-height:1.6;color:var(--muted);margin-top:16px}
.hm-social{display:flex;gap:20px;margin-top:20px;font-size:14px;font-weight:600}
.hm-social a{color:var(--ink)}
.hm-foot-col b{font-size:13px;font-weight:700}
.hm-foot-col div{display:flex;flex-direction:column;gap:11px;margin-top:16px;font-size:14px}
.hm-foot-col a{color:var(--muted)}
.hm-foot-col a:hover{color:var(--ink)}
.hm-foot-col a.strong{color:var(--ink);font-weight:600}
.hm-foot-col a.blue{color:var(--blue);font-weight:600}
.hm-foot-col span{color:var(--muted)}
.hm-foot-end{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:56px;padding:22px 0 28px;border-top:1px solid var(--line-3);
  font-size:13px;color:var(--muted)}
.hm-foot-end div{display:flex;gap:20px}
.hm-foot-end a{color:var(--muted)}

/* ----------------------------------------------------------------- modal -- */
.hm-modal{position:fixed;inset:0;z-index:60;background:rgba(13,8,77,.8);
  backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;
  padding:24px}
.hm-modal[hidden]{display:none}
.hm-modal-box{position:relative;height:min(82vh,760px);aspect-ratio:9/16;max-width:100%;
  border-radius:22px;overflow:hidden;
  background:linear-gradient(160deg,var(--sky),var(--blue-deep) 55%,var(--ink))}
.hm-modal-box video,.hm-modal-box iframe{width:100%;height:100%;border:0;display:block;
  object-fit:cover}
.hm-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}
.hm-modal-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round}

/* the bar above everything, when there is something to announce */
.hm-announce{display:flex;align-items:center;justify-content:center;gap:9px;
  background:var(--ink);color:#fff;font-size:13.5px;font-weight:600;
  padding:10px 18px;text-align:center}
.hm-announce svg{width:15px;height:15px;fill:currentColor;flex:none}

/* ------------------------------------------------------------ animations -- */
@keyframes hmUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes hmSpin{to{transform:rotate(360deg)}}
@keyframes hmGlow{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes hmScroll{to{transform:translateY(-50%)}}
@keyframes hmMarq{to{transform:translateX(-50%)}}
@keyframes hmFlow{0%{offset-distance:0%;opacity:0}8%{opacity:1}92%{opacity:1}
  100%{offset-distance:100%;opacity:0}}
@keyframes hmTwinkle{0%,100%{transform:scale(1) rotate(0);opacity:1}
  50%{transform:scale(.7) rotate(20deg);opacity:.5}}
@keyframes hmLoad{0%{transform:scaleX(.08)}70%,100%{transform:scaleX(1)}}

/* --------------------------------------------------------------- widths -- */
@media (max-width:1000px){
  /* back to a rail */
  .hm-rail .rl-track{display:flex;overflow-x:auto;padding:6px 2px 20px;
    --rl-w:calc((100% - 18px) / 2)}
  .hm-rail .rl-track>.rl-item{width:var(--rl-w)}
  .hm-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .hm-stories-grid{grid-template-columns:1fr}
  .hm-stage-card{min-height:620px}
  .hm-wall{height:620px}
}
@media (max-width:860px){
}
@media (max-width:760px){
  .hm-orbit{display:none}
  .hm-hero > .hm-wrap{padding-top:56px}
  .hm-sec-head{padding:64px 22px 32px}
  .hm-stats-grid{margin:0 22px 64px}
  .hm-courses .hm-wrap,.hm-stories .hm-wrap{padding:64px 22px}
  .hm-cta .hm-wrap{padding:84px 22px}
  .hm-marq-lead{display:none}
}
@media (max-width:640px){
  /* Two, not one: the design drops to two columns below 760 and stays
     there. Four figures down a single column is four screens of scrolling
     for the shortest section on the page. */
  .hm-wall{grid-template-columns:1fr}
  .hm-foot-brand{grid-column:span 1}
  .hm-stat{padding:24px 22px 26px}
}

@media (prefers-reduced-motion:reduce){
  .hm *,.hm *::before,.hm *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .hm-marq-track,.hm-col,.hm-orbit,.hm-orbit span{animation:none!important}
}

/* ---------------------------------------------------------------- phones --
   Hit size and reading size, measured at 320 through 430. Last in the file
   so it wins over the component rules above it. */
/* 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){
  .ab-trust-l{padding:0 20px;font-size:19px}
  /* A narrow screen is nearly all "middle", so the lit band covers most of
     it and the fade has less room to work in. */
  .ab-trust-rail .lit{-webkit-mask-image:linear-gradient(90deg,transparent 12%,#000 34%,#000 66%,transparent 88%);
    mask-image:linear-gradient(90deg,transparent 12%,#000 34%,#000 66%,transparent 88%)}
  .ab-trust-track .it{gap:30px;padding-right:30px}

  /* 44px is Apple's floor and 48 is Google's. Everything here was between
     34 and 38, which is where people start missing and assume it is them. */
  /* Only the button that is still on screen. Setting display here as well
     put the "Log in" link back on a narrow phone -- it is hidden above by
     display:none, and inline-flex beat it -- which pushed the header past
     the right edge of a 320px screen. */
  .hm-tab{min-height:44px}
  .hm-btn{min-height:46px}
  .hm-cta-sm{min-height:44px;display:inline-flex;align-items:center;
    justify-content:center}
  .hm-thumbs button{width:46px;height:46px}
  .hm-foot-col a,.hm-social a,.hm-foot-end a{display:inline-flex;align-items:center;
    padding:10px 0;min-height:40px}

  /* Nothing under 12px. The chips, tags and small print were set at 11,
     which is a size you can see but not read. */
  .hm-app-chips span,.hm-course .hm-flag,.hm-course .hm-len,
  .hm-rev .out,.hm-rev .rl,.hm-rev .st,.hm-faces span,
  .hm-eyebrow,.hm-stat-s,.hm-meta,.hm-ticks-row,.hm-proof .tx,
  .hm-foot-end,.hm-marq-lead{font-size:12.5px}
  .hm-eyebrow{letter-spacing:.06em}

  /* The hero scene is decoration and it is the tallest thing on the page.
     At phone size it is scaled so far down that none of it can be read, so
     it keeps its shape but stops eating two screens of scrolling. */
  .hm-stage{margin:12px 0 4px}

  /* The rail scrolls inside the column rather than being pulled out to the
     screen edges: the column's padding changes at three breakpoints, and a
     negative margin that matches one of them overflows at the other two. */
  .hm-tabs{justify-content:flex-start}
  .hm-tabs-in{border-radius:16px;padding:5px 6px;width:100%}
  /* One card and the edge of the next. */
  .hm-rail .rl-track{--rl-w:min(78vw,330px);gap:14px}
}
@media (max-width:380px){
  /* The narrowest screens: the logo and the one button have to share 320px
     with the menu, so the lock-up steps down a size. */
  .hm-hero > .hm-wrap{padding-top:40px}
  .hm-sec-head,.hm-courses .hm-wrap,.hm-stories .hm-wrap{padding-left:16px;
    padding-right:16px}
  .hm-stats-grid{margin-left:16px;margin-right:16px}
  .hm-cta .hm-wrap{padding-left:16px;padding-right:16px}
  .hm-foot .hm-wrap{padding-left:16px;padding-right:16px}
}