/* HeyWeLearn / HeyWeLearn dashboard — AERA-style base (Grok Bot 2026-11-11): tokens, pill nav, pills, switch, motion states.
   High contrast: #111 on #FFF, #FFF on photos, cards #F5F5F5. Easing cubic-bezier(.22,1,.36,1). Transform/opacity only. */
body.dash2{--bg:#fff;--fg:#111;--line:#e5e5e5;--muted:#6b6b6b;--card:#f5f5f5;--e:cubic-bezier(.22,1,.36,1);
  background:#fff;color:#111;font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;
  font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.dash2 main{display:block}
.dash2 .muted{color:var(--muted);opacity:1}.dash2 .small{font-size:13px;line-height:1.55}
/* sticky pill nav, top centre */
.dnav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:2px;padding:5px;border-radius:999px;
  background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#111;font-size:13px;
  box-shadow:0 6px 30px rgba(0,0,0,.12);max-width:calc(100vw - 20px);white-space:nowrap}
.dnav a{padding:8px 12px;border-radius:999px;transition:background .3s var(--e)}.dnav a:hover{background:rgba(0,0,0,.06)}
.dnav a[aria-current]{background:rgba(0,0,0,.06)}
.dnav .brand{font-weight:600;letter-spacing:.02em}.dnav .brand span{font-weight:400;color:var(--muted)}
.dnav .cta{background:#111;color:#fff;display:inline-flex;align-items:center;gap:8px;padding:8px 16px}.dnav .cta:hover{background:#000}
.dnav .cta i,.dpill i{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}
.dnav .lang-sel{margin:0 4px}.dnav .lang-sel select{border-color:rgba(0,0,0,.18);padding:6px 8px;min-width:72px}
@media(max-width:860px){.dnav a[href="#plan"],.dnav a[href="#classes"],.dnav #login-link{display:none}}
@media(max-width:520px){.dnav{font-size:12px;gap:0}.dnav a{padding:7px 9px}.dnav .brand span,.dnav a[aria-current]{display:none}.dnav .cta{padding:7px 12px}}
/* pills */
.dpill{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;border:1px solid rgba(0,0,0,.16);background:#fff;color:#111;
  font:inherit;font-size:14px;cursor:pointer;transition:transform .5s var(--e),background .3s var(--e),color .3s var(--e)}
.dpill:hover{transform:translateY(-2px)}.dpill[hidden],[hidden]{display:none!important}.dpill:disabled{opacity:.4;cursor:default;transform:none}
.dpill.dark{background:#111;color:#fff;border-color:#111}.dpill.light{background:#fff;color:#111;border-color:#fff}
.dpill.ghost-l{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
/* toast status */
#msg{position:fixed;left:50%;bottom:22px;z-index:80;transform:translate(-50%,140%);opacity:0;background:#111;color:#fff;padding:12px 20px;border-radius:999px;
  font-size:14px;max-width:min(92vw,560px);text-align:center;transition:transform .6s var(--e),opacity .6s var(--e);pointer-events:none}
#msg.show{transform:translate(-50%,0);opacity:1}#msg.bad{background:#b91c1c}
/* labels + type */
.label{font-size:13px;letter-spacing:.02em;color:#111;margin-bottom:18px}.photo .label{color:#fff}
.eyebrow-s{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}.eyebrow-s.light{color:rgba(255,255,255,.8)}
.tag{display:inline-block;font-size:12px;padding:3px 10px;border-radius:999px;background:#e9e9e9;color:#333}
.tag-active,.tag-scheduled,.tag-approved,.tag-trialing{background:#111;color:#fff}.tag-cancelled,.tag-canceled,.tag-denied{background:#fde8e8;color:#9b1c1c}
/* auto-renew switch */
.dswitch{display:flex;align-items:center;gap:10px;cursor:pointer;margin:14px 0 8px;font-size:14px}
.dswitch input{position:absolute;opacity:0;width:1px;height:1px}
.dswitch .track{width:46px;height:26px;border-radius:999px;background:#d4d4d4;position:relative;transition:background .4s var(--e);flex:none}
.dswitch .knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:transform .45s var(--e)}
.dswitch input:checked+.track{background:#111}.dswitch input:checked+.track .knob{transform:translateX(20px)}
.dswitch input:focus-visible+.track{outline:2px solid #111;outline-offset:3px}
.dswitch input:disabled+.track{opacity:.45}.dswitch.busy .track{opacity:.6}
/* motion states (only when html.motion; reduced motion = final state) */
.motion [data-reveal]{opacity:0;transform:translate3d(0,24px,0);transition:opacity 1s var(--e),transform 1s var(--e)}
.motion [data-reveal].in{opacity:1;transform:none}
.motion [data-mask]{clip-path:inset(100% 0 0 0);transition:clip-path 1.2s var(--e)}
.motion [data-mask] img{transition:scale 1.4s var(--e);scale:1.15}
.motion [data-mask].in{clip-path:inset(0 0 0 0)}.motion [data-mask].in img{scale:1}
.motion [data-parallax]{will-change:transform}
.no-motion *,.no-motion *::before,.no-motion *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
@media (prefers-reduced-motion:reduce){[data-reveal],[data-mask]{opacity:1!important;transform:none!important;clip-path:none!important}
  [data-parallax]{transform:none!important}html{scroll-behavior:auto}}
.dfoot{padding:40px 6vw;font-size:12px;color:var(--muted);text-align:center;background:#fff}