/* © 2026 Wannlabs. wl-skin.css: puts the older wannlabs.com pages (apps, pricing, school, legal, Ember,
   Store, Prime, ...) on the home-page look, using the tokens in /assets/wl-theme.css.
   Loaded after site.css on every public page. Light flat panels, solid dark nav and footer, no video. */
:root{--bg:var(--wl-bg);--bg2:var(--wl-bg-alt);--ink:var(--wl-ink);--mut:var(--wl-mut);--dim:var(--wl-mut);--line:var(--wl-line);
  --glass:var(--wl-card);--e1:var(--wl-acc);--e2:var(--wl-acc);--e3:var(--wl-acc-2);--g1:var(--wl-ok);
  --wl-mood-tint:var(--wl-card);--wl-mood-edge:var(--wl-line);color-scheme:light}
html,[data-wl-mood]{background:var(--wl-bg)!important}
body,body.prime-page{background:var(--wl-bg)!important;color:var(--wl-ink);text-shadow:none!important;font:var(--wl-body)}
.scene,.mood{display:none!important}

/* nav: same solid bar as the home page. Nav, mega-menu and drawer keep the dark-chrome text colours */
body>nav,.sn-drawer,.sn-layer,.sn-mega,wl-apps{--ink:var(--wl-chrome-ink);--mut:#d6cdc4;--dim:#d0c6bc;--e1:#ffb36b;--line:rgba(255,240,225,.09);--glass:rgba(255,245,235,.045)}
body>nav,nav:has(>.wrap>.brand){background:var(--wl-chrome)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom:1px solid var(--wl-chrome-line)!important;color:var(--wl-chrome-ink)}
body>nav a,body>nav .brand{color:var(--wl-chrome-ink)}
body>nav .links,body>nav .links a{color:#efe4d9}
body>nav .links a:hover,body>nav .links a[aria-current]{color:#fff}
body>nav .btn{min-height:36px;box-sizing:border-box;font:600 14px var(--wl-font);padding:8px 16px}
body>nav .btn.pri{background:var(--wl-chrome-acc)!important;color:var(--wl-chrome-on-acc)!important;box-shadow:none!important}
body>nav .btn.pri:hover{background:#ff9a5c!important}
body>nav .btn.gho{background:transparent!important;border:1px solid rgba(255,255,255,.22)!important;color:var(--wl-chrome-ink)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
body>nav a:focus-visible,body>nav button:focus-visible{outline:2px solid var(--wl-chrome-focus);outline-offset:2px}

/* type scale */
.d{font-family:var(--wl-display);letter-spacing:-.02em}
.hero h1{font:var(--wl-h1);letter-spacing:-.02em}
h2.h2,.h2{font:var(--wl-h2);letter-spacing:-.015em}
.grad{background:none!important;-webkit-background-clip:border-box;background-clip:border-box;color:var(--wl-ink)!important}
.fire{background:none!important;-webkit-background-clip:border-box;background-clip:border-box;color:var(--wl-acc)!important}
.mint{background:none!important;-webkit-background-clip:border-box;background-clip:border-box;color:var(--wl-ok)!important}
body.prime-page .mint{color:var(--wl-gold)!important}
.eyebrow{color:var(--wl-acc-2);letter-spacing:.06em}
.lead,.sub,.cap,.meta,.crumb,.note,.ptag,.price span{color:var(--wl-mut)}
.hero{padding:clamp(48px,8vw,96px) 0 32px}
section{padding:clamp(56px,8vw,96px) 0}
section:nth-of-type(even):not(.hero):not(.final){background:var(--wl-bg-alt)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,:focus-visible{outline:3px solid var(--wl-focus);outline-offset:2px}

/* buttons */
.btn{min-height:var(--wl-btn-h);padding:0 22px;font:600 16px/1 var(--wl-font);border:2px solid transparent;justify-content:center;transition:background .2s,border-color .2s}
.btn-sm{min-height:40px;padding:0 16px;font-size:14px}
.pri{background:var(--wl-acc)!important;color:var(--wl-on-acc)!important;box-shadow:none!important}
.pri:hover{background:var(--wl-acc-2)!important;transform:none}
.gho{background:var(--wl-card)!important;color:var(--wl-ink)!important;border:2px solid var(--wl-line)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.gho:hover{border-color:var(--wl-line-2)!important}
.mintbtn{background:var(--wl-ink)!important;color:#fff!important;box-shadow:none!important}
body.prime-page .mintbtn{background:#c8b27e!important;color:#1a1612!important}

/* flat panels: no glass, no blur, no glow */
.card,details,.lesson,.plan,.adv,.calc,.out div,.next a,.legal,.prose ol>li,.cmsx .cmp,.cmsx .own,.pp,.primeprice,.sd,.ap-tiers .card{
  background:var(--wl-card)!important;background-image:none!important;border:1px solid var(--wl-line)!important;
  box-shadow:var(--wl-shadow)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;color:var(--wl-ink);text-shadow:none}
.card{border-radius:var(--wl-r-card)}
a.card:hover,.lesson:hover,.next a:hover{border-color:var(--wl-line-2)!important;background:var(--wl-soft-2)!important}
.card h3,.plan h3{color:var(--wl-ink);font-family:var(--wl-display)}
.card p,details p,.adv small,.lesson small,.next small,.time,.out small{color:var(--wl-mut)}
.ic{background:var(--wl-soft)!important;border:1px solid var(--wl-line)!important;color:var(--wl-acc)!important}
body.prime-page .ic{color:var(--wl-gold)!important}
body.prime-page .card{border-color:var(--wl-line)!important}
summary:after{color:var(--wl-acc)}
.final:before,body.prime-page .final:before,.scene:after{display:none!important}
.final{background:var(--wl-soft)}
.shot{border:1px solid var(--wl-line)!important;box-shadow:var(--wl-shadow)!important;background:var(--wl-card)!important}

/* pricing */
.plan.best{border:2px solid var(--wl-acc)!important;background:var(--wl-card)!important}
.ribbon{background:var(--wl-acc)!important;color:#fff!important}
.plan li,.pp li{color:var(--wl-ink)}
.plan li svg,.pp li svg,.cmp td.us svg{color:var(--wl-ok)}
.easy{color:var(--wl-ok)}
.draftnote,.draft,.pill2{color:var(--wl-acc-2)!important;background:var(--wl-soft)!important;border-color:var(--wl-line-2)!important}
.price+.yr{color:var(--wl-mut)}
.cmp{border-color:var(--wl-line)!important;background:var(--wl-card)}
.cmp thead th{background:var(--wl-soft)!important;color:var(--wl-ink)}
.cmp td{color:var(--wl-mut)}
.cmp td.us{color:var(--wl-ink);background:#fff4ea!important}
.fields input,.fields select{background:#fff!important;border:1px solid var(--wl-line-2)!important;color:var(--wl-ink)!important}
.fields input:focus,.fields select:focus{border-color:var(--wl-acc)!important;box-shadow:0 0 0 3px rgba(194,65,12,.18)!important}
.fields select option{background:#fff;color:var(--wl-ink)}
.out .tot{background:var(--wl-soft)!important;border-color:var(--wl-line-2)!important}
.pbadge2{color:var(--wl-gold)!important;background:#f7f0df!important;border-color:#e3d3a8!important}

/* school */
.search{background:#fff!important;border:1px solid var(--wl-line-2)!important}
.search input{color:var(--wl-ink)}
.search input::placeholder{color:#7a6a5e}
.num{background:var(--wl-soft)!important;border-color:var(--wl-line)!important;color:var(--wl-ink)}
.lesson.done .num{background:var(--wl-ok)!important;color:#fff!important}
.bar{background:var(--wl-line)!important}
.bar i{background:var(--wl-acc)!important}
.prose p,.prose li{color:#3a2c22}
.prose strong{color:var(--wl-ink)}
.prose ol>li:before{background:var(--wl-acc)!important;color:#fff!important}
.prose img{border-color:var(--wl-line)!important;box-shadow:var(--wl-shadow)!important}
.prose blockquote{background:var(--wl-soft)!important;border-color:var(--wl-line-2)!important;color:var(--wl-ink)!important}
.prose a,.legal a,.crumb a{color:var(--wl-acc-2);text-decoration:underline;text-underline-offset:2px}
.next .n{background:var(--wl-soft)!important;border-color:var(--wl-line-2)!important}

/* legal */
.legal h2{color:var(--wl-ink)!important}
.legal p,.legal li{color:#3a2c22!important}

/* Ember page */
.cmsx .row{border-top-color:var(--wl-line)!important}
.cmsx .row>div{color:var(--wl-mut)!important}
.cmsx .row>div:first-child{color:var(--wl-ink)!important}
.cmsx .row>div:last-child{color:var(--wl-ink)!important;background:#fff4ea!important}
.cmsx .hd>div{color:var(--wl-mut)!important}
.cmsx .hd>div:last-child{color:var(--wl-acc-2)!important}
.cmsx .row>div:nth-child(2):before{color:var(--wl-mut)!important}
.cmsx .row>div:last-child:before{color:var(--wl-acc-2)!important}
.cmsx .ask{background:var(--wl-card)!important;border:1px solid var(--wl-line)!important;color:var(--wl-ink)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.cmsx .ask:before,.cmsx .ask:after{color:var(--wl-acc)!important}
.cmsx .own{color:var(--wl-mut)!important}
.cmsx .own b{color:var(--wl-ink)!important}
.sdn,.sdl{color:var(--wl-mut)!important}
.sdq{background:var(--wl-soft)!important;border:1px solid var(--wl-line)!important;color:var(--wl-ink)!important}
.sdq svg{color:var(--wl-acc)!important}
.sdq:hover{border-color:var(--wl-acc)!important}

/* app pages */
.ap-ill{border:1px solid var(--wl-line)!important;box-shadow:var(--wl-shadow)!important}
.ap-soon{background:var(--wl-soft)!important;color:var(--wl-acc-2)!important}

/* sign-up card (dash.css) */
.lcard{background:var(--wl-card)!important;border:1px solid var(--wl-line)!important;box-shadow:var(--wl-shadow)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;color:var(--wl-ink)}
.lcard p,.sterms{color:var(--wl-mut)!important}
.snote{color:var(--wl-mut)!important}
.lcard input:not([type=checkbox]){background:#fff!important;border:1px solid var(--wl-line-2)!important;color:var(--wl-ink)!important}
.lcard input::placeholder{color:#7a6a5e}
.lrow a,.lrow button,.sterms a,.snote a{color:var(--wl-acc-2)!important}
#serr{color:#b91c1c!important}
.lcard .btn{background:var(--wl-acc)!important;color:#fff!important}

/* footer: same dark band as the home page */
body>footer{background:var(--wl-chrome);color:var(--wl-chrome-mut);border-top:0!important;margin-top:40px;padding:48px 0 28px}
body>footer a,body>footer .brand{color:var(--wl-chrome-ink)}
body>footer .fg a{color:#e9ded3}
body>footer .fg a:hover{color:#fff;text-decoration:underline}
body>footer .fg h5,body>footer .fg .fh{color:var(--wl-chrome-head);text-transform:uppercase;letter-spacing:.06em;font:600 13px var(--wl-font)}
body>footer p,body>footer [style*="--mut"]{color:var(--wl-chrome-mut)!important}
body>footer .fb{border-top:1px solid var(--wl-chrome-line-2)!important;color:var(--wl-chrome-mut)}
body>footer a:focus-visible{outline:2px solid var(--wl-chrome-focus)}
body>footer [style*="--g1"]{color:#86efac!important}

/* inline accents written as var(--g1) in page bodies */
main [style*="color:var(--g1)"],section [style*="color:var(--g1)"]{color:var(--wl-ok)!important}

/* /download page (standalone layout) */
body.wl-dl{font:16px/1.55 var(--wl-font)}
body.wl-dl>header{max-width:none;background:var(--wl-chrome);border-bottom:1px solid var(--wl-chrome-line);padding:14px max(20px,calc((100% - 1040px)/2 + 20px))}
body.wl-dl>header a,body.wl-dl .brand{color:var(--wl-chrome-ink)}
body.wl-dl>header a:focus-visible{outline:2px solid var(--wl-chrome-focus)}
body.wl-dl h1{background:none!important;-webkit-background-clip:border-box;background-clip:border-box;color:var(--wl-ink)!important;font:var(--wl-h1)}
body.wl-dl main a:not(.btn){color:var(--wl-acc-2)}
body.wl-dl .lead,body.wl-dl .meta,body.wl-dl .note,body.wl-dl details{color:var(--wl-mut)}
body.wl-dl summary,body.wl-dl .card h2{color:var(--wl-ink)}
body.wl-dl .btn{border-radius:var(--wl-r-pill)}
body.wl-dl>footer{max-width:none;margin:40px 0 0;padding:24px max(20px,calc((100% - 1040px)/2 + 20px))}
body.wl-dl details{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin-top:18px}

/* Prime keeps its champagne-gold identity, in a shade that passes AA on light */
body.prime-page{--bg:var(--wl-bg)!important;--g1:var(--wl-gold)!important}
body.prime-page main [style*="color:var(--g1)"],body.prime-page section [style*="color:var(--g1)"]{color:var(--wl-gold)!important}
body.prime-page .plan li svg,body.prime-page .pp li svg{color:var(--wl-gold)}

/* phones: the nav must fit 360-430px; "Log in" stays in the menu drawer */
@media (max-width:480px){body>nav wl-auth-cta [data-wlg=login],body>nav .navsignin{display:none!important}body>nav .wrap{gap:8px}body>nav .navr{gap:6px!important}}
.card.soon{opacity:1!important;border-style:dashed!important}
.sterms a,.snote a,.lrow a,main p a:not(.btn){text-decoration:underline;text-underline-offset:2px}
body>nav wl-auth-cta .wlg-pri{color:var(--wl-chrome-on-acc)}