/* PearlHelix Learn: the blueprint world shared by every Learn page (sites/DESIGN-LANGUAGE.md section 2), the reels,
   the course card and the live-class pages. Sections below a hero stay on paper. */
.bp{--bp:#0B1D2E;--bp-2:#10283F;--chalk:#EAF2F8;--chalk-2:rgb(234 242 248/.74);--sky:var(--brand-glow);--grid:rgb(140 203 245/.07);
  --ok:#9BE3B0;--warn:#E8C38A;--ease-out:cubic-bezier(.22,1,.36,1);--ease-in-out:cubic-bezier(.65,0,.35,1);
  background:radial-gradient(120% 80% at 75% 35%,var(--bp-2),var(--bp) 70%);color:var(--chalk-2);position:relative;overflow:hidden}
.bp::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(90% 90% at 70% 40%,#000 30%,transparent 80%);mask-image:radial-gradient(90% 90% at 70% 40%,#000 30%,transparent 80%)}
.bp h1,.bp h2,.bp h3{color:#fff}
.bp h1 em,.bp h2 em{color:var(--sky)}
.bp a:not(.btn){color:var(--sky)}
header.top.bp-top{background:rgb(11 29 46/.86);border-bottom-color:rgb(234 242 248/.08)}
.bp-top .btn.small{background:var(--brand-glow);color:#0B1D2E;box-shadow:none}
.bp-top .btn.small:hover{background:#B5DDF8}
.bp .btn{background:var(--sky);color:#0B1D2E;min-height:52px;box-shadow:0 10px 30px -12px rgb(140 203 245/.6)}
.bp .btn:hover{background:#B5DDF8}
.bp .eyebrow{color:var(--sky);font-weight:600;letter-spacing:.12em;font-size:.75rem;margin:0 0 .9rem}
.bp .line{font-size:clamp(1.05rem,1rem + .4vw,1.25rem);max-width:32em;margin:1.1rem 0 1.5rem;color:var(--chalk-2)}
.bp .quiet{color:var(--sky);font-weight:600;text-decoration:none;align-self:center;padding:.75rem .25rem}
.bp .quiet:hover{text-decoration:underline}
.lab-s{font:600 .6875rem/1.3 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0}
.bp .lab-s{color:var(--chalk-2)}

/* A page hero (the reels page, the live-class page) */
.phero{position:relative;z-index:1;padding-block:clamp(2rem,1.5rem + 4vw,4.5rem)}
.phero h1{font-size:clamp(2.5rem,1.4rem + 4.4vw,4.75rem);line-height:1;letter-spacing:-.035em;max-width:14ch;text-wrap:balance}
.phero h1 em{font-size:1.06em;letter-spacing:-.01em;text-shadow:0 0 40px rgb(140 203 245/.45)}
.phero .actions{gap:1rem}

/* Seen Differently: the reel cards (covers are 9:16, the hook sits inside them) */
.reels{list-style:none;margin:1.75rem 0 0;padding:0 0 .5rem;display:grid;grid-auto-flow:column;grid-auto-columns:min(42vw,13.5rem);gap:.9rem;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.reels::-webkit-scrollbar{display:none}
.reels--all{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(min(42vw,12.5rem),1fr));overflow:visible}
.reels li{scroll-snap-align:start;min-width:0}
.reel{display:flex;flex-direction:column;gap:.45rem;text-decoration:none;color:inherit}
.reel img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:18px;background:#10283F;
  border:1px solid rgb(140 203 245/.16);box-shadow:0 24px 40px -26px rgb(0 0 0/.8)}
.reel .rno{font:600 .6875rem/1.3 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--sky)}
.reel .rt{color:var(--chalk);font-weight:600;line-height:1.3;font-size:.98rem}
.reel:hover .rt{text-decoration:underline;text-underline-offset:.18em}
.reel:focus-visible{outline:2px solid var(--sky);outline-offset:4px;border-radius:18px}
@media (prefers-reduced-motion:no-preference){.reel img{transition:transform .32s var(--ease-out)}.reel:hover img{transform:translateY(-4px)}}
.follow{margin:1.5rem 0 0;color:var(--chalk-2)}
.rowhead{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:.5rem 1.5rem}

/* the course card */
.course{display:grid;gap:1.25rem;align-items:center;background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.25rem,1rem + 1.5vw,2rem);margin-top:1.75rem}
@media (min-width:52rem){.course{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}}
.course h3 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--brand-ink)}
.course ol{margin:.75rem 0 1.1rem;padding-left:1.2rem;color:var(--ink-2)}
.course ol li{margin:.3rem 0}
.course .sub{margin:.5rem 0 0;color:var(--ink-2);max-width:34em}
.course .play{display:grid;place-items:center;aspect-ratio:16/9;border-radius:var(--r-md);text-decoration:none;color:#fff;
  background:radial-gradient(90% 90% at 70% 30%,#1F4C72,#0B1D2E 75%);position:relative;overflow:hidden}
.course .play::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgb(140 203 245/.08) 1px,transparent 1px),
  linear-gradient(90deg,rgb(140 203 245/.08) 1px,transparent 1px);background-size:22px 22px}
.course .play b{position:relative;display:flex;align-items:center;gap:.7rem;font-size:1.05rem;font-weight:600}
.course .play b::before{content:"";width:3.2rem;height:3.2rem;border-radius:50%;background:var(--brand-glow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%230B1D2E'/%3E%3C/svg%3E") center/1.6rem no-repeat;
  box-shadow:0 10px 30px -10px rgb(140 203 245/.7)}
.course .play small{position:absolute;left:1rem;bottom:.8rem;color:rgb(234 242 248/.7);font-size:.85rem}

/* the live class: the screens, its steps, inside, packages */
.screens{position:relative;z-index:1;margin-top:clamp(2rem,1.5rem + 3vw,3.5rem);padding-bottom:clamp(2.5rem,2rem + 6vw,6rem)}
.screens .desk{display:block;width:min(100%,58rem);border-radius:16px;border:1px solid rgb(140 203 245/.22);background:#F3F1EA;
  box-shadow:0 50px 90px -40px rgb(0 0 0/.85),0 0 0 8px rgb(234 242 248/.04)}
.screens .desk img,.screens .phone img{display:block;width:100%;height:auto;border-radius:inherit}
.screens .phone{position:absolute;right:0;bottom:0;width:clamp(9.5rem,26vw,15.5rem);border-radius:26px;border:6px solid #06111C;background:#F3F1EA;
  box-shadow:0 40px 70px -30px rgb(0 0 0/.9),0 0 0 1px rgb(140 203 245/.3)}
.screens figcaption{position:relative;margin-top:1rem;color:var(--chalk-2);font:600 .75rem/1.4 var(--font);letter-spacing:.08em;text-transform:uppercase;max-width:62%}
@media (max-width:40rem){.screens .phone{position:relative;margin:-5rem 0 0 auto}.screens figcaption{max-width:none}}
.inside{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));margin-top:2rem}
.inside div{border-top:2px solid var(--brand-ink);padding-top:.85rem}
.inside h3{font-size:1.1rem}
.inside p{margin:.4rem 0 0;font-size:.98rem}
.packs{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));margin-top:2rem}
.pack{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem;display:flex;flex-direction:column;gap:.7rem}
.pack .lab-s{color:var(--brand-ink)}
.pack h3 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--brand-ink)}
.pack p{margin:0}
.pack ul{margin:0;padding-left:1.1rem}
.pack li{margin:.25rem 0}
.pack--lead{background:#0B1D2E;border-color:#0B1D2E;color:rgb(234 242 248/.78)}
.pack--lead h3{color:#fff}.pack--lead h3 em,.pack--lead .lab-s{color:var(--brand-glow)}
.band--bp{background:radial-gradient(120% 120% at 80% 0%,#1F4C72,#0B1D2E 70%);color:rgb(234 242 248/.8)}
.band--bp h2 em{color:var(--brand-glow)}
.band--bp .btn{background:var(--brand-glow);color:#0B1D2E}
.band--bp .btn:hover{background:#B5DDF8}
.band--bp a:not(.btn){color:#fff}
.pack--lead a{color:var(--brand-glow)}
.band--bp .btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgb(234 242 248/.45)}
.band--bp .btn.ghost:hover{background:rgb(234 242 248/.08)}