/* Landing page v2 — hero card stack, community odometer, video reviews, written reviews.
   Loaded after the page's own <style>, so it reuses its variables (--cta, --line, --ink-2 …). */

/* ---------- HERO: card stack ---------- */
.hs{position:relative;display:flex;justify-content:center;padding:24px 0 30px}
.hs-wrap{position:relative;width:min(100%,400px)}
.hs-deck{position:relative;aspect-ratio:4/5}
.hs-card{position:absolute;inset:0;margin:0;border-radius:30px;overflow:hidden;cursor:pointer;
  border:7px solid #fff;background:#18202B;z-index:1;
  box-shadow:0 14px 30px rgba(16,22,40,.14);
  transition:transform .8s cubic-bezier(.2,.8,.2,1),box-shadow .8s}
.hs-card img,.hs-card video{width:100%;height:100%;object-fit:cover;display:block}
.hs-card[data-pos="0"]{transform:none;z-index:3;cursor:default;box-shadow:0 34px 70px rgba(16,22,40,.28)}
.hs-card[data-pos="1"]{transform:translate(9%,3%) rotate(6deg) scale(.93);z-index:2}
.hs-card[data-pos="2"]{transform:translate(-9%,4%) rotate(-6deg) scale(.88);z-index:1}
.hs-ui{position:absolute;inset:0;opacity:0;transition:opacity .5s;pointer-events:none}
.hs-card[data-pos="0"] .hs-ui{opacity:1;pointer-events:auto}
.hs-time{position:absolute;top:14px;left:14px;font-size:11.5px;font-weight:700;padding:6px 11px;
  border-radius:999px;background:rgba(13,17,23,.5);color:#fff}
/* Bottom-right, not top-right: the source badge took that corner and the
   two sat on top of each other. Clear of the speaker's name on the left. */
.hs-sound{position:absolute;bottom:14px;right:14px;z-index:7;display:inline-flex;align-items:center;gap:7px;
  min-height:34px;padding:0 12px;border:0;border-radius:999px;font:inherit;font-size:12px;
  font-weight:700;cursor:pointer;background:rgba(13,17,23,.5);color:#fff}
.hs-sound svg{width:14px;height:14px}
.hs-play{position:absolute;left:50%;top:46%;width:72px;height:72px;margin:-36px 0 0 -36px;
  border:0;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;
  cursor:pointer;box-shadow:0 14px 30px rgba(0,0,0,.3)}
.hs-play svg{width:24px;height:24px;margin-left:3px}
.hs-play::before{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(255,255,255,.7);animation:hsRing 2.4s ease-out infinite}
@keyframes hsRing{from{transform:scale(1);opacity:.8}to{transform:scale(1.9);opacity:0}}
.hs-who{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;
  padding:60px 18px 18px;color:#fff;background:linear-gradient(180deg,rgba(10,12,18,0),rgba(10,12,18,.8))}
.hs-av{width:36px;height:36px;flex:none;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  font-size:12px;font-weight:800;background:var(--cta);border:2px solid #fff}
.hs-av img{width:100%;height:100%;object-fit:cover}
.hs-who b{display:block;font-size:14px}
.hs-who em{display:block;font-style:normal;font-size:12px;color:rgba(255,255,255,.7)}
.hs-cap{position:relative;z-index:5;margin:22px auto 0;width:min(100%,360px);text-align:center}
.hs-q{font-size:16.5px;font-weight:700;letter-spacing:-.015em;line-height:1.4;min-height:2.8em;text-wrap:balance}
.hs-ctl{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px}
.hs-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:background .16s,color .16s}
.hs-btn:hover{background:var(--black);color:#fff}
.hs-btn svg{width:15px;height:15px}
.hs-dots{display:flex;gap:6px}
.hs-dots i{width:6px;height:6px;border-radius:4px;background:#D6D6D2;transition:all .4s}
.hs-dots i.on{width:26px;background:var(--cta)}
@media(max-width:600px){.hs-wrap{width:min(100%,320px)}}

/* ---------- COMMUNITY: odometer ---------- */
.cmty h2 em{font-style:normal;color:var(--cta)}
.odo{position:relative;display:flex;justify-content:center;align-items:flex-start;margin-top:30px;
  font-size:clamp(64px,15vw,200px);font-weight:900;letter-spacing:-.05em;line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums;user-select:none}
.odo::before{content:"";position:absolute;left:50%;top:50%;width:min(900px,100%);height:70%;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(21,113,198,.14),transparent 75%)}
/* The window has to be taller than 1em. At this weight and size the glyphs
   stand taller than their own em box, so a 1em slot showed the bottom of one
   digit and the top of the next at the same time -- which is what the roll
   looked like: two numbers in every column. The slot, the digits and the
   distance travelled all come off one measure so they cannot drift apart. */
.odo{--odo-h:1.16em}
.odo-d{position:relative;display:inline-block;height:var(--odo-h);overflow:hidden}
.odo-col{display:flex;flex-direction:column;
  transform:translateY(calc(var(--to) * var(--odo-h)))}
.odo-col span,.odo-sep,.odo-plus{display:block;height:var(--odo-h);line-height:var(--odo-h)}
.odo-plus{color:var(--cta)}
/* JS arms it (rolled back to 0) and then runs it (rolls to the real digit). */
.odo.armed .odo-col{transform:translateY(0)}
.odo.armed.run .odo-col{transform:translateY(calc(var(--to) * var(--odo-h)));
  transition:transform 2.4s cubic-bezier(.16,.84,.2,1) var(--delay)}

/* ---------- VIDEO REVIEWS: expanding strips ---------- */
.vx{position:relative;overflow:hidden;border-radius:var(--r-panel);margin-bottom:22px;
  padding:clamp(34px,5vw,64px) clamp(18px,4vw,56px);color:#fff;
  background:radial-gradient(90% 120% at 0% 0%,#1B4C7E 0%,rgba(27,76,126,0) 55%),
             radial-gradient(80% 100% at 100% 100%,#0F5BA3 0%,rgba(15,91,163,0) 55%),#0E1217}
.vx::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:56px 56px}
/* The two halves are not equal. The pitch is text and sits comfortably in
   less; the strips have to hold the clip you are watching at the shape of a
   card, and every sliver beside it eats into that. */
@media(min-width:1000px){
  .vx-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)!important}
}
.vx-grid{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));
  gap:clamp(30px,4vw,56px);align-items:center}
.vx-pill{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:#CFE4F7;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  padding:8px 14px;border-radius:999px}
.vx h2{font-size:clamp(30px,3.9vw,48px);font-weight:900;letter-spacing:-.035em;line-height:1.08;margin:16px 0 13px}
.vx h2 em{font-style:normal;color:var(--cta-lite)}
.vx-sub{color:rgba(255,255,255,.74);font-size:17px;line-height:1.6;max-width:44ch}
.vx-quote{margin-top:32px;padding-top:28px;border-top:1px solid rgba(255,255,255,.12)}
.vx-mark{display:block;font-family:Georgia,serif;font-size:70px;line-height:.6;height:32px;color:var(--cta-lite)}
.vx-quote h3{font-size:clamp(22px,2.4vw,28px);font-weight:800;letter-spacing:-.025em;line-height:1.22;min-height:2.44em}
.vx-from{margin-top:8px;font-size:14px;color:rgba(255,255,255,.6)}
.vx-who{display:flex;align-items:center;gap:12px;margin-top:20px}
.vx-who b{display:block;font-size:15px}
.vx-who em{display:block;font-style:normal;font-size:13px;color:rgba(255,255,255,.62)}
.vx-av{width:46px;height:46px;flex:none;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  font-weight:800;background:var(--cta);border:2px solid rgba(255,255,255,.85)}
.vx-av img{width:100%;height:100%;object-fit:cover}
.vx-ctl{display:flex;align-items:center;gap:12px;margin-top:30px}
.vx-btn{width:46px;height:46px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.22);
  background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;transition:all .16s}
.vx-btn:hover{background:#fff;color:var(--ink)}
.vx-btn svg{width:17px;height:17px}
.vx-num{font-size:13px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.75);padding:0 6px}
.vx-bars{flex:1;display:flex;gap:6px}
.vx-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden}
.vx-bars i b{display:block;height:100%;width:0;background:var(--cta-lite)}
.vx-bars i.done b{width:100%}
.vx-bars i.on b{animation:vxFill var(--dur,6s) linear forwards}
@keyframes vxFill{to{width:100%}}
/* The closed strips are a fixed width and the open one takes whatever is
   left. They used to share the row by flex ratio, so with eight clips the
   open one came out 182px wide against 540px tall -- a bar, not a card, and
   it got narrower with every clip the client added. A fixed sliver holds
   the same whatever the count, and the proportion of the one you are
   actually watching stops depending on how many there are. */
.vx-strips{display:flex;gap:8px;height:420px}
.vx-s{position:relative;flex:0 0 34px;min-width:0;border-radius:20px;overflow:hidden;cursor:pointer;
  background:#161D27;border:1px solid rgba(255,255,255,.1);
  transition:flex .8s cubic-bezier(.2,.8,.2,1),border-color .5s,box-shadow .5s}
.vx-s.on{flex:1 1 auto;border-radius:24px;border-color:rgba(255,255,255,.35);
  box-shadow:0 30px 60px rgba(0,0,0,.4);cursor:default}
.vx-s > img,.vx-s > video,.vx-s > iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.vx-s:not(.on) > img{filter:brightness(.55) saturate(.8)}
.vx-full{position:absolute;inset:0;opacity:0;transition:opacity .3s}
.vx-s.on .vx-full{opacity:1;transition:opacity .45s .35s}
.vx-mini{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:space-between;padding:16px 0 20px;transition:opacity .3s}
.vx-s.on .vx-mini{opacity:0}
.vx-mini span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:13px;font-weight:700;white-space:nowrap}
/* The tag has to give way to the runtime beside it. A long one -- "Coding
   Success Story" -- wrapped to two lines and ran straight under the clock
   in the opposite corner. */
.vx-tag{position:absolute;top:14px;left:14px;max-width:calc(100% - 92px);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:11px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--ink)}
.vx-time{position:absolute;top:14px;right:14px;font-size:11.5px;font-weight:700;padding:5px 10px;
  border-radius:999px;background:rgba(13,17,23,.55)}
.vx-play{position:absolute;left:50%;top:44%;width:64px;height:64px;margin:-32px 0 0 -32px;border:0;
  border-radius:50%;background:rgba(255,255,255,.95);color:var(--ink);display:grid;place-items:center;
  cursor:pointer;box-shadow:0 14px 30px rgba(0,0,0,.35)}
.vx-play svg{width:22px;height:22px;margin-left:3px}
.vx-trust{position:relative;display:flex;justify-content:center;flex-wrap:wrap;gap:10px 24px;margin-top:34px;
  padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-size:13.5px;font-weight:600;color:rgba(255,255,255,.72)}
.vx-trust span{display:inline-flex;align-items:center;gap:7px}
.vx-trust svg{width:15px;height:15px;color:var(--cta-lite)}
@media(max-width:1100px){
  /* Fewer slivers once the column narrows, or the open card is squeezed back
     into a bar. The arrows and the dots still reach every clip. */
  .vx-s:nth-of-type(n+6){display:none}
}
@media(max-width:760px){
  .vx-strips{height:360px;gap:6px}
  .vx-s{flex:0 0 26px}
  .vx-s:nth-of-type(n+5){display:none}
}

/* ---------- WRITTEN REVIEWS (also used on course + course-detail pages) ---------- */
.rvs{display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,48px);align-items:flex-start}
.rvs-side{flex:1 1 280px;min-width:0}
.rvs-grid{flex:3 1 560px;min-width:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:16px;align-items:start}
.rvs-sum{margin-top:26px;padding:24px;border-radius:24px;background:var(--panel-2);border:1px solid var(--line)}
.rvs-top{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.rvs-avg{font-size:54px;font-weight:900;letter-spacing:-.04em;line-height:1}
.rvs-top em{display:block;font-style:normal;font-size:13px;color:var(--ink-2);margin-top:4px}
.rvs-bar{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2);margin-top:9px}
.rvs-bar b{width:30px;flex:none;color:var(--ink)}
.rvs-bar i{flex:1;height:8px;border-radius:5px;background:#E4E4E0;overflow:hidden}
.rvs-bar i span{display:block;height:100%;border-radius:5px;background:var(--gold);width:var(--w);
  transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.rvs-sum:not(.in) .rvs-bar i span{width:0}
.rvs-bar small{width:34px;text-align:right;flex:none;font-size:13px}

.rv{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;gap:12px;
  padding:22px 22px 18px;border:1px solid var(--line);border-radius:22px;
  background:linear-gradient(170deg,var(--tint,#EAF3FC) 0%,#fff 55%);
  box-shadow:0 1px 2px rgba(20,24,40,.04),0 10px 26px rgba(20,24,40,.05);
  transition:transform .22s,box-shadow .22s,border-color .22s}
.rv:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(20,24,40,.12);border-color:#D7E6FA}
.rv::before{content:"\201C";position:absolute;top:-22px;right:12px;z-index:-1;font-family:Georgia,serif;
  font-size:120px;line-height:1;color:var(--cta);opacity:.08}
.rv-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rv-head .stars svg{width:15px;height:15px}
.rv-head .stars .off{color:#E4E4E0}
.rv-when{font-size:12px;color:var(--ink-2)}
.rv-text{font-size:14.5px;line-height:1.62;color:var(--ink-2);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.rv.open .rv-text{-webkit-line-clamp:unset;display:block}
.rv-more{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;border:0;background:none;padding:0;
  cursor:pointer;font:inherit;font-size:13.5px;font-weight:700;color:var(--cta)}
.rv-more svg{width:13px;height:13px;transform:rotate(90deg);transition:transform .25s}
.rv.open .rv-more svg{transform:rotate(-90deg)}
/* Pushed to the bottom of the card. A grid row is as tall as its tallest
   card -- one with a "See more" under it, say -- and without this the
   shorter cards left their reviewer floating halfway up with dead space
   beneath. Now every person sits on the same line across the row. */
.rv-who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:14px;
  border-top:1px solid rgba(20,24,40,.07)}
.rv-av{width:46px;height:46px;flex:none;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  font-size:15px;font-weight:800;color:#fff;background:linear-gradient(140deg,var(--c,#1571C6),#0F5BA3);
  border:2.5px solid #fff;box-shadow:0 3px 10px rgba(20,24,40,.18)}
.rv-av img{width:100%;height:100%;object-fit:cover}
.rv-n{flex:1;min-width:0}
.rv-n b{display:flex;align-items:center;gap:6px;font-size:14.5px;font-weight:800}
.rv-n b svg{width:15px;height:15px;color:var(--cta);flex:none}
.rv-n em{display:block;font-style:normal;font-size:12.5px;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media(prefers-reduced-motion:reduce){
  .hs-card,.vx-s,.rv,.odo.armed.run .odo-col,.rvs-bar i span{transition:none}
  .hs-play::before{animation:none}
}

/* The sound control on an open review strip. Same shape as the hero's, and
   the same rule: it names the state it is in, because a speaker glyph on
   its own leaves people guessing which way it reads. */
.vx-sound{position:absolute;left:14px;bottom:14px;z-index:5;display:inline-flex;
  align-items:center;gap:7px;min-height:36px;padding:0 13px;border:0;border-radius:999px;
  font:inherit;font-size:12px;font-weight:700;cursor:pointer;
  background:rgba(13,17,23,.6);color:#fff;backdrop-filter:blur(8px);
  transition:background .2s}
.vx-sound:hover{background:rgba(13,17,23,.82)}
.vx-sound:focus-visible{outline:2px solid #fff;outline-offset:2px}
.vx-sound svg{width:14px;height:14px}
/* Only on the open one -- a row of sound buttons down the closed slivers
   would be eight controls for one clip. */
.vx-s:not(.on) .vx-sound{display:none}

/* --- where a clip came from -------------------------------------------- */
/* A learner's clip hosted on YouTube should say so. Somebody deciding
   whether to believe a testimonial can go and watch it in its own place,
   with its own comments and view count, which is worth more than the
   clip sitting here unattributed. */
.vx-src,.hs-src{position:absolute;z-index:6;display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:999px;text-decoration:none;
  font-size:11px;font-weight:700;letter-spacing:.01em;
  background:rgba(13,17,23,.62);color:#fff;backdrop-filter:blur(8px);
  transition:background .18s}
.vx-src:hover,.hs-src:hover{background:#FF0000;color:#fff}
.vx-src svg,.hs-src svg{width:14px;height:14px;flex:none}
/* Opposite corner from the clock, and clear of the sound control below. */
.vx-src{left:14px;top:14px}
.hs-src{right:12px;top:12px}
/* The title under the stage, so a visitor reads what they are about to
   watch rather than only who is in it. */
.vx-srcline{display:flex;align-items:center;gap:7px;margin-top:10px;
  font-size:12.5px;color:rgba(255,255,255,.62)}
.vx-srcline a{color:rgba(255,255,255,.85);text-decoration:underline;
  text-underline-offset:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vx-srcline a:hover{color:#fff}
.vx-srcline svg{width:13px;height:13px;flex:none;color:#FF4444}