/* Kepler (0.12.0, /live-classes/): the page about Kepler Education in Kepler's own brand, inside the site's
   header and footer. Direction B of the canvas "Live Classes Page Directions v1": the logo's gradient
   (purple #5F0BAA to blue #4800FF), the K's leaf shape (a big radius on two opposite corners) on pictures,
   cards, buttons and numbers, a light violet tint and a deep violet band. Hedvig Letters Serif for headings,
   Overused Grotesk for text (both as on kepler.education), Montserrat Alternates (the wordmark's face) for
   small capitals and figures. All three are OFL and self-hosted. Loaded only on pages with this look. */

@font-face{font-family:"Hedvig Letters Serif";src:url(fonts/hedvig.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Overused Grotesk";src:url(fonts/overused-grotesk-350.woff2) format("woff2");font-weight:350;font-style:normal;font-display:swap}
@font-face{font-family:"Overused Grotesk";src:url(fonts/overused-grotesk-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat Alternates";src:url(fonts/montserrat-alt-300.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat Alternates";src:url(fonts/montserrat-alt-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

.th-kepler{
  --kp-purple:#5F0BAA;--kp-blue:#4800FF;--kp-violet:#5E0BE0;--kp-violet2:#3A0FB8;
  --kp-grad:linear-gradient(to top right,var(--kp-purple) 0%,var(--kp-blue) 100%);
  --kp-ink:#282828;--kp-text:#4A4A55;--kp-mute:#6B6B78;--kp-tint:#F3F0FF;--kp-line:#D9D0FF;
  --kp-night:#1C0B4F;--kp-night-t:#DDD6FB;--kp-night-m:#CFC6F5;--kp-night-k:#B9A8FF;
  --kp-serif:"Hedvig Letters Serif",Georgia,"Times New Roman",serif;
  --kp-sans:"Overused Grotesk","Instrument Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --kp-alt:"Montserrat Alternates","Overused Grotesk",system-ui,sans-serif;
  --kp-gap:clamp(64px,8vw,110px);
  --kp-gap2:clamp(56px,7vw,90px);
  --kp-gut:clamp(20px,4vw,40px);
}
:where(.th-kepler main){font-family:var(--kp-sans);font-weight:350;color:var(--kp-ink)}
:where(.th-kepler main) a{color:var(--kp-violet)}
.th-kepler main :focus-visible{outline:2px solid var(--kp-violet);outline-offset:3px}
.th-kepler main b,.th-kepler main strong{font-weight:500}
.kp-w{max-width:1240px;margin:0 auto;padding-inline:var(--kp-gut);box-sizing:border-box}
.kp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- grounds and rhythm ---------- */
.bg-kp-grad{background:var(--kp-grad);color:#fff}
.bg-kp-tint{background:var(--kp-tint)}
.bg-kp-night{background:var(--kp-night);color:#fff}
.th-kepler .sec.bg-white{padding-top:var(--kp-gap)}
.th-kepler .sec.bg-kp-tint,.th-kepler .sec.bg-kp-night{margin-top:var(--kp-gap2)}
.th-kepler .sec:first-child{margin-top:0;padding-top:0}
.th-kepler .sec.bg-kp-tint > .kp-w{padding-block:clamp(64px,8vw,100px) clamp(72px,9vw,110px)}
.th-kepler .sec.bg-kp-night > .kp-w{padding-block:clamp(64px,8vw,100px)}
/* the four ways and the film share one violet band */
.th-kepler .sec-kp-ways.bg-kp-night > .kp-w{padding-bottom:clamp(48px,6vw,80px)}
.th-kepler .sec-kp-ways + .sec-kp-film{margin-top:0}
.th-kepler .sec-kp-ways + .sec-kp-film > .kp-w{padding-top:0}
.th-kepler .sec-kp-cta{padding-bottom:clamp(64px,8vw,100px)}

/* ---------- type ---------- */
.kp-kick{margin:0;font:500 13px/1.3 var(--kp-alt);letter-spacing:.12em;text-transform:uppercase;color:var(--kp-violet)}
.kp-kick-light{font-size:14px;color:#DCD3FF}
.kp-kick-sm{font-size:12.5px;letter-spacing:.1em}
.kp-kick-night{color:var(--kp-night-k)}
.kp-h1{margin:0;font:400 clamp(40px,5vw,66px)/1.05 var(--kp-serif);letter-spacing:-.01em;color:#fff;text-wrap:balance}
.kp-h2{margin:0;font:400 clamp(34px,3.8vw,52px)/1.1 var(--kp-serif);color:var(--kp-ink);text-wrap:balance}
.bg-kp-night .kp-h2,.kp-cta .kp-h2{color:#fff}
.kp-h3{margin:0;font:400 clamp(28px,3vw,40px)/1.1 var(--kp-serif);color:var(--kp-ink)}
.kp-h3-sm{font-size:clamp(23px,2.2vw,26px);line-height:1.15}
.kp-lead{margin:0;max-width:560px;font:350 clamp(17px,1.5vw,20px)/1.55 var(--kp-sans);color:#ECE8FF}
.kp-p{margin:0;font:350 16.5px/1.6 var(--kp-sans);color:var(--kp-text)}
.kp-p + .kp-p{margin-top:12px}
.kp-p-lg{font-size:clamp(17px,1.4vw,19px)}
.bg-kp-night .kp-p{color:var(--kp-night-t)}
.kp-p a,.kp-lead a{color:inherit;text-decoration:underline;text-underline-offset:3px}
:where(.th-kepler main) .kp-p a.kp-more{color:var(--kp-violet);text-decoration:none}
.kp-p a.kp-more:hover{text-decoration:underline}
.kp-p em,.kp-lead em{font-style:italic}
.kp-narrow{max-width:760px}
.kp-more{display:inline-flex;align-items:center;gap:6px;color:var(--kp-violet);font:500 16px/1.4 var(--kp-sans);text-decoration:none}
.kp-more:hover{text-decoration:underline;text-underline-offset:3px}
.kp-arr{display:inline-block;transition:transform .15s}
a:hover > .kp-arr,a:hover .kp-arr{transform:translateX(3px)}

/* ---------- buttons: the K's leaf ---------- */
.kp-btns{display:flex;flex-wrap:wrap;gap:12px}
.kp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:22px 4px 22px 4px;font:500 16px/1.2 var(--kp-sans);text-decoration:none;text-align:center;box-sizing:border-box;transition:background-color .15s,color .15s,border-color .15s}
:where(.th-kepler main) .kp-btn-white{background:#fff;color:var(--kp-violet2)}
:where(.th-kepler main) .kp-btn-white:hover{background:#EFEBFF;color:var(--kp-violet2)}
:where(.th-kepler main) .kp-btn-line{border:1px solid rgba(255,255,255,.7);color:#fff}
:where(.th-kepler main) .kp-btn-line:hover{background:rgba(255,255,255,.12);color:#fff}
:where(.th-kepler main) .kp-btn-solid{background:var(--kp-violet);color:#fff}
:where(.th-kepler main) .kp-btn-solid:hover{background:var(--kp-violet2);color:#fff}

/* ---------- hero ---------- */
.sec-kp-hero{position:relative;overflow:hidden}
.kp-hero{position:relative}
.kp-hero-k{position:absolute;right:-12%;bottom:-14%;width:auto;height:118%;opacity:.07;pointer-events:none}
.kp-hero-in{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:48px 64px;padding-block:clamp(44px,7vw,96px) clamp(40px,5vw,72px)}
.kp-hero-copy{flex:1 1 460px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.kp-logo{display:block;width:190px;height:auto}
.kp-search{position:relative;margin:6px 0 0;width:100%;max-width:520px;display:flex;align-items:center;gap:8px;background:#fff;border-radius:9999px;padding:6px 6px 6px 20px;box-sizing:border-box}
.kp-search > svg{flex:none;fill:none;stroke:#6B7280;stroke-width:2;stroke-linecap:round}
.kp-search input{flex:1;min-width:0;border:0;outline:0;font:350 16px/1.3 var(--kp-sans);color:var(--kp-ink);background:transparent;padding:10px 0}
.kp-search input::placeholder{color:#6B6B78}
.kp-search input::-webkit-search-cancel-button{display:none}
.kp-search:focus-within{box-shadow:0 0 0 3px rgba(255,255,255,.45)}
.kp-search button{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--kp-blue);display:flex;align-items:center;justify-content:center;cursor:pointer}
.kp-search button:hover{background:var(--kp-violet2)}
.kp-search button svg{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.kp-hero-pic{flex:1 1 400px;min-width:0;position:relative;padding:0 0 28px 28px;box-sizing:border-box}
.kp-hero-img{display:block;width:100%;height:auto;aspect-ratio:5/6;object-fit:cover;object-position:72% 40%;border-radius:120px 10px 120px 10px;box-shadow:0 30px 60px rgba(20,0,80,.35)}
.kp-badge{position:absolute;left:0;bottom:0;max-width:calc(100% - 28px);display:flex;align-items:center;gap:12px;padding:14px 18px;background:#fff;border-radius:26px 4px 26px 4px;box-shadow:0 16px 34px rgba(20,0,80,.25);font:350 14.5px/1.35 var(--kp-sans);text-decoration:none;box-sizing:border-box}
:where(.th-kepler main) a.kp-badge{color:var(--kp-ink)}
.kp-badge:hover{box-shadow:0 18px 40px rgba(20,0,80,.32)}
.kp-faces{display:flex;flex:none}
.kp-faces .kp-av{width:40px;height:40px;border:2px solid #fff}
.kp-faces .kp-av + .kp-av{margin-left:-12px}
.kp-figs{position:relative;border-top:1px solid rgba(255,255,255,.22)}
.kp-figs-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px 20px;padding-block:30px 38px}
.kp-fig{margin:0;display:flex;align-items:baseline;gap:12px}
.kp-fig-n{font:300 clamp(40px,4vw,48px)/1 var(--kp-alt)}
.kp-fig-l{font:350 17px/1.3 var(--kp-sans);color:#DCD3FF}

/* teachers' faces */
.kp-av{display:block;flex:none;width:36px;height:36px;border-radius:50%;object-fit:cover;box-sizing:border-box;background:#EDE9FE}
.kp-av-i{display:flex;align-items:center;justify-content:center;color:#3B1FB0;font:500 13px/1 var(--kp-sans)}

/* ---------- what Kepler is ---------- */
.kp-intro{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:40px 64px;align-items:center}
.kp-intro-main{display:flex;flex-direction:column;gap:20px;min-width:0}
.kp-mark{display:block;width:44px;height:auto}
.kp-note{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:clamp(28px,3vw,44px);background:var(--kp-tint);border-radius:64px 8px 64px 8px;min-width:0}
.kp-note-h{margin:0;font:400 clamp(25px,2.4vw,30px)/1.2 var(--kp-serif);color:var(--kp-ink)}
.kp-note .kp-p{font-size:17px}

/* ---------- the Roman Roads classes ---------- */
.kp-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 48px;margin-bottom:clamp(32px,4vw,44px)}
.kp-head-t{display:flex;flex-direction:column;gap:16px;max-width:700px;min-width:0}
.kp-owc{display:flex;flex-direction:column;gap:28px;padding:clamp(24px,3vw,44px);background:#fff;border-radius:72px 10px 72px 10px;box-shadow:0 20px 50px rgba(60,20,160,.08)}
.kp-owc-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 30px}
.kp-owc-note{margin:0;font:350 16px/1.4 var(--kp-sans);color:var(--kp-text)}
.kp-years{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.kp-year{display:flex;flex-direction:column;gap:12px;min-width:0}
.kp-year-img{display:block;width:100%;max-width:240px;height:auto;aspect-ratio:520/709;object-fit:cover;border-radius:40px 6px 40px 6px;margin-bottom:4px}
.kp-year-n{margin:-4px 0 2px;font:400 24px/1.15 var(--kp-serif);color:var(--kp-ink)}
.kp-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.kp-row{display:flex;align-items:center;gap:10px;padding:6px 8px;margin-inline:-8px;border-radius:14px 3px 14px 3px;text-decoration:none;transition:background-color .15s}
:where(.th-kepler main) a.kp-row{color:var(--kp-ink)}
.kp-row:hover{background:var(--kp-tint)}
.kp-row-t{flex:1;min-width:0;display:flex;flex-direction:column;font:350 14.5px/1.35 var(--kp-sans)}
.kp-row-t b{font-weight:500}
.kp-row-t small{font-size:14px;color:var(--kp-mute)}
.kp-row .kp-arr{flex:none;color:var(--kp-violet);opacity:.55}
.kp-row:hover .kp-arr{opacity:1}
.kp-none{margin:0;font:350 14.5px/1.4 var(--kp-sans);color:var(--kp-mute)}
.kp-other{border-top:1px solid #ECE8FF;padding-top:18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px 24px}
.kp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:20px;margin-top:22px;align-items:start}
.kp-card-wide{grid-column:1/-1}
.kp-card-wide .kp-rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:6px 28px}
.kp-card{display:flex;align-items:flex-start;gap:20px;padding:26px 26px 22px;background:#fff;border-radius:48px 8px 48px 8px;box-shadow:0 14px 34px rgba(60,20,160,.07);min-width:0}
.kp-card-img{display:block;flex:none;width:88px;height:auto;border-radius:24px 4px 24px 4px}
.kp-card-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.kp-card-b .kp-rows{margin-top:6px}

/* ---------- how it works ---------- */
.kp-steps-w > .kp-kick{margin-bottom:16px}
.kp-steps-w > .kp-h2 + .kp-p{margin-top:16px}
.kp-steps{list-style:none;margin:clamp(36px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:36px}
.kp-step{display:flex;flex-direction:column;gap:16px;min-width:0}
.kp-num{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:30px 4px 30px 4px;background:var(--kp-grad);color:#fff;font:300 28px/1 var(--kp-alt)}

/* ---------- four ways in, the film (violet band) ---------- */
.kp-ways{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:24px 28px}
.kp-way{display:flex;flex-direction:column;gap:12px;height:100%;text-decoration:none;box-sizing:border-box}
:where(.th-kepler main) a.kp-way{color:#fff}
.kp-way-h{font:400 26px/1.2 var(--kp-serif)}
.kp-way-p{font:350 16px/1.6 var(--kp-sans);color:var(--kp-night-m)}
.kp-way-more{margin-top:auto;font:500 15px/1.4 var(--kp-sans);color:var(--kp-night-k)}
a.kp-way:hover .kp-way-h{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.kp-film{display:flex;flex-wrap:wrap;align-items:center;gap:40px 64px}
.kp-film-v{flex:1 1 520px;min-width:0}
.kp-film-a{position:relative;display:block;border-radius:90px 10px 90px 10px;overflow:hidden;background:#000}
.kp-film-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:opacity .2s}
.kp-film-a:hover .kp-film-img{opacity:.9}
.kp-play{position:absolute;left:50%;top:50%;width:80px;height:80px;margin:-40px 0 0 -40px;display:flex;align-items:center;justify-content:center;border-radius:38px 6px 38px 6px;background:var(--kp-grad);box-shadow:0 12px 28px rgba(72,0,255,.45);transition:transform .15s}
.kp-film-a:hover .kp-play{transform:scale(1.06)}
.kp-play svg{fill:#fff}
.kp-film-t{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:20px}

/* ---------- parents' words ---------- */
.kp-quotes-w > .kp-kick{margin-bottom:16px}
.kp-quotes{margin-top:clamp(32px,4vw,44px);columns:2 360px;column-gap:24px}
.kp-quote{margin:0 0 24px;display:flex;flex-direction:column;gap:18px;padding:36px 34px 32px;background:var(--kp-tint);border-radius:64px 8px 64px 8px;min-width:0;break-inside:avoid}
.kp-qm{font:400 64px/.6 var(--kp-serif);color:var(--kp-violet);height:30px}
.kp-quote blockquote{margin:0}
.kp-quote blockquote p{margin:0;font:400 clamp(19px,1.7vw,22px)/1.45 var(--kp-serif);color:var(--kp-ink)}
.kp-quote figcaption{font:350 15px/1.4 var(--kp-sans);color:var(--kp-text)}

/* ---------- core values ---------- */
.kp-values-w > .kp-kick{margin-bottom:16px}
.kp-values-w > .kp-h2 + .kp-p{margin-top:16px}
.kp-values{margin-top:clamp(32px,4vw,44px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:22px}
.kp-value{display:flex;flex-direction:column;gap:14px;padding:34px 32px;border:1.5px solid var(--kp-line);border-radius:56px 8px 56px 8px;min-width:0}
.kp-value .kp-h3-sm{font-size:clamp(25px,2.4vw,28px)}
.kp-value .kp-p{font-size:16px}
.kp-bar{display:block;width:40px;height:8px;border-radius:4px;background:linear-gradient(to right,var(--kp-purple),var(--kp-blue))}
.kp-after{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.kp-after .kp-p{font-size:16px}

/* ---------- closing band ---------- */
.kp-cta-w{max-width:1240px;margin:0 auto;padding-inline:clamp(16px,3vw,32px)}
.kp-cta{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 48px;padding:clamp(40px,6vw,80px) clamp(28px,6vw,80px);background:var(--kp-grad);color:#fff;border-radius:96px 12px 96px 12px}
.kp-cta-k{position:absolute;right:6%;top:-18%;width:auto;height:136%;max-width:none;opacity:.08;pointer-events:none}
.kp-cta-t{position:relative;display:flex;flex-direction:column;gap:14px;max-width:620px;min-width:0}
.kp-cta .kp-h2{font-size:clamp(38px,4.4vw,60px);line-height:1.04}
.kp-cta .kp-lead{font-size:clamp(17px,1.5vw,19px)}
.kp-cta .kp-btns{position:relative}

/* ---------- narrower screens ---------- */
@media (max-width:900px){
  .kp-years{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 22px}
}
@media (max-width:900px){
  .kp-hero-pic{flex-basis:100%;max-width:560px}
}
@media (max-width:600px){
  .kp-hero-in{gap:40px}
  .kp-logo{width:150px}
  .kp-hero-img{border-radius:80px 8px 80px 8px;aspect-ratio:4/4.4}
  .kp-hero-pic{padding:0 0 24px 14px}
  .kp-badge{padding:12px 14px;gap:10px;font-size:14px}
  .kp-figs-in{grid-template-columns:1fr;gap:12px;padding-block:24px 30px}
  .kp-fig-n{font-size:40px}
  .kp-btns{width:100%}
  .kp-btns .kp-btn{flex:1 1 100%}
  .kp-owc{border-radius:44px 8px 44px 8px;padding:24px 20px}
  .kp-years{gap:24px 16px}
  .kp-year-img{border-radius:28px 5px 28px 5px}
  .kp-year-n{font-size:21px}
  .kp-row{gap:8px}
  .kp-row .kp-arr{display:none}
  .kp-card{flex-direction:column;gap:16px;padding:24px 22px 20px;border-radius:40px 8px 40px 8px}
  .kp-card-img{width:72px}
  .kp-note{border-radius:44px 8px 44px 8px}
  .kp-quote{padding:30px 26px 26px;border-radius:48px 8px 48px 8px}
  .kp-value{padding:28px 24px;border-radius:44px 8px 44px 8px}
  .kp-film-a{border-radius:56px 8px 56px 8px}
  .kp-play{width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:30px 5px 30px 5px}
  .kp-cta{border-radius:56px 10px 56px 10px;padding:44px 24px}
  .kp-cta-k{right:-12%}
  .kp-after .kp-btn{width:100%}
}
@media (max-width:420px){
  .kp-years{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  .kp-arr,.kp-play,.kp-film-img,.kp-btn,.kp-row{transition:none}
}