/* Cup of English — landing additions (client edits 2026-10): free resources, YouTube, tighter menu, growing level link */
/* menu: six links with icons must fit next to the buttons */
/* every menu label stays on one line */
.nav-l a{white-space:nowrap}
@media (min-width:1021px){.nav-l{gap:10px}.nav-l a{padding:8px 9px;font-size:.88rem;gap:6px}.nav-a .btn-line span{display:none}.nav-a .btn-line{padding:8px 11px}}
@media (max-width:1380px) and (min-width:1021px){.nav .brand span{display:none}.nav-a .btn-red .lg{display:none}.nav-a .btn-red .sm{display:inline}}
.yt-b{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--line);transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s}
.yt-b svg{width:24px;height:17px}.yt-b:hover{transform:translateY(-2px) scale(1.06);box-shadow:0 10px 22px -12px rgba(255,0,0,.55)}
.yt-l .yt-ic{width:20px;height:14px;flex:none}
/* "Not sure? Find your level" grows on hover */
.join-form .qz-link{display:inline-flex;align-self:flex-start;transform-origin:left center;transition:transform .45s cubic-bezier(.34,1.56,.64,1),color .25s}
.join-form .qz-link:hover,.join-form .qz-link:focus-visible{transform:scale(1.08);color:#8f342c}
.join-form .qz-link .ic{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}.join-form .qz-link:hover .ic{transform:rotate(25deg) scale(1.25)}
/* free resources */
.free{padding:clamp(56px,8vw,96px) 0 clamp(20px,3vw,32px)}
.fr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),380px));justify-content:center;gap:26px;margin-top:30px}
.fr-card{display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s;animation:frIn .7s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i)*120ms)}
.fr-card:hover{transform:translateY(-6px);box-shadow:0 34px 60px -30px rgba(31,43,71,.55)}
.fr-img{position:relative;height:230px;overflow:hidden;background:linear-gradient(160deg,#f3ead9,#e9d7c0)}
.fr-img img{position:absolute;left:50%;top:26px;width:62%;height:auto;transform:translateX(-50%) rotate(-3deg);border-radius:8px;box-shadow:0 22px 40px -18px rgba(31,43,71,.55);transition:transform .6s cubic-bezier(.16,1,.3,1)}
.fr-card:hover .fr-img img{transform:translateX(-50%) rotate(0) translateY(-6px)}
.fr-tag{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:#fff;color:var(--red);font:700 .76rem 'DM Sans',sans-serif;box-shadow:0 8px 18px -10px rgba(31,43,71,.5)}.fr-tag .ic{width:15px;height:15px}
.fr-b{display:flex;flex-direction:column;gap:10px;padding:22px 22px 24px}.fr-b h3{margin:0;font-size:1.3rem}.fr-b p{margin:0;color:var(--mut)}.fr-b .btn{align-self:flex-start;margin-top:6px}
@keyframes frIn{from{opacity:0;transform:translateY(22px)}}
.fr-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px}
.fr-bg{position:absolute;inset:0;background:rgba(29,35,51,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:frFade .3s}
.fr-box{position:relative;width:min(460px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:30px 26px 26px;border-radius:24px;background:var(--cream,#fbf6ee);box-shadow:0 40px 80px -30px rgba(0,0,0,.5);animation:frPop .45s cubic-bezier(.16,1,.3,1)}
.fr-box h3{margin:6px 0 16px;font-size:1.45rem}.fr-f{display:flex;flex-direction:column;gap:14px}.fr-f .btn{align-self:stretch;justify-content:center}
.fr-x{position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;transition:transform .3s}.fr-x:hover{transform:rotate(90deg)}.fr-x .ic{width:18px;height:18px}
.fr-done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:8px 0}.fr-done b{font:600 1.3rem 'Fraunces',Georgia,serif;color:var(--navy)}.fr-done p{margin:0;color:var(--mut)}
.fr-okic{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#e2efe6;animation:frPop .6s cubic-bezier(.34,1.56,.64,1)}.fr-okic .ic{width:30px;height:30px;stroke:#3d7a57;stroke-dasharray:30;stroke-dashoffset:30;animation:frChk .5s .25s forwards}
@keyframes frFade{from{opacity:0}}@keyframes frPop{from{opacity:0;transform:translateY(18px) scale(.96)}}@keyframes frChk{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.fr-card,.fr-box,.fr-okic,.fr-okic .ic{animation:none;stroke-dashoffset:0}}
@media (max-width:1180px) and (min-width:1021px){.yt-b{display:none}}
/* "Take a look" = the weekly rhythm + the member home page, one section */
.look-head{max-width:780px;margin:0 auto 46px;text-align:center}
.look-head .eyebrow{justify-content:center}
.look-head .lead{margin:14px auto 0;max-width:46ch;text-align:center;font-size:1.15rem}
.look-in{display:flex;flex-direction:column;align-items:center;gap:clamp(40px,6vw,70px)}
.look-week{width:min(100%,760px)}.look-shot{width:min(100%,1000px)}
.look-shot .laptop{max-width:none}
.look-shot .in-cap{color:#c9cfdd;text-align:center;min-height:0;margin-top:18px}
.look-btn{text-align:center;margin:14px 0 0}
.look-sub{display:flex;align-items:center;gap:8px;margin:0 0 16px;font-weight:700;color:#f0b9ae}.look-sub .ic{width:18px;height:18px}


/* Meet your host — a short teaser that leads to About me */
.meet{padding:clamp(20px,4vw,40px) 0 clamp(50px,7vw,80px)}
.meet-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,4vw,50px);align-items:center;max-width:980px;margin:0 auto;padding:clamp(22px,3vw,34px);border-radius:32px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.meet-ph{position:relative;display:block;width:clamp(150px,20vw,220px);aspect-ratio:1;border-radius:50%}
.meet-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;border-radius:50%;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.meet-ph:hover img{transform:scale(1.04)}
.meet-ring{position:absolute;inset:-8px;border-radius:50%;border:2px dashed rgba(176,71,61,.45);animation:hostSpin 26s linear infinite}
.meet-t h2{margin:8px 0 10px;font-size:clamp(1.7rem,3.2vw,2.4rem)}.meet-t p{margin:0 0 18px;color:var(--mut);font-size:1.05rem;line-height:1.65}
@keyframes hostSpin{to{transform:rotate(360deg)}}
@media (max-width:700px){.meet-card{grid-template-columns:1fr;text-align:center;justify-items:center}.meet-t .eyebrow{justify-content:center}}
@media (prefers-reduced-motion:reduce){.meet-ring{animation:none}}