/* The Perfect Join – redesign Oct 2026. Same palette, more life. Mobile first. No frameworks. */
@font-face{font-family:"Archivo Black";src:url(/assets/fonts/archivo-black-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Archivo";src:url(/assets/fonts/archivo-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"DM Serif Display";src:url(/assets/fonts/dmserif-italic-latin.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}
:root{--ink:#16191d;--ink2:#23272d;--ink3:#2b3036;--muted:#5b626c;--bg:#f8f1e5;--birch:#efe3cf;--line:#e3d6c1;--card:#fff;
--or:#c8742c;--orl:#f39a4b;--ord:#a85a17;--ordd:#8a4b17;--peach:#f0b07a;--ok:#2f7d4f;--warn:#b5462f;--r:18px;
--display:"Archivo Black","Arial Black",Impact,system-ui,sans-serif;--serif:"DM Serif Display",Georgia,serif;
--ply:repeating-linear-gradient(180deg,#f1dfbd 0 3px,#d6b37c 3px 5px,#f5e7cc 5px 8px,#c49a5e 8px 9px);
--sh:0 1px 0 #e0d0b6,0 6px 18px rgba(60,40,20,.08);--sh2:0 2px 0 #e0d0b6,0 18px 40px rgba(60,40,20,.16);
--ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.56,.64,1)}
[hidden]{display:none!important}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;font:17px/1.55 "Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);overflow-x:hidden}
a{color:var(--ordd)}button{font:inherit;cursor:pointer;color:inherit}img,svg{max-width:100%}
.wrap{max-width:1160px;margin:0 auto;padding:0 18px}.narrow{max-width:780px;padding-bottom:20px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ic{width:24px;height:24px;flex:none}.ic.s{width:16px;height:16px;vertical-align:-3px}.ic.l{width:30px;height:30px}.ic.xl{width:56px;height:56px}
h1,h2,.h2,.h3,.sec,.ptitle,.logo span{font-family:var(--display);font-weight:400;letter-spacing:-.01em}
:focus-visible{outline:3px solid var(--orl);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:#fff;color:var(--ink);padding:8px 14px;border-radius:8px;font-weight:800}.skip:focus{left:8px}
.linkbtn{border:0;background:none;color:var(--ordd);text-decoration:underline;padding:0;font-weight:700}
.small{font-size:.86rem;color:var(--muted)}.src a,.small a{word-break:break-all}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:60;background:rgba(22,25,29,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid rgba(255,255,255,.06);transition:background .3s}
.bar{display:flex;align-items:center;gap:10px;height:62px;transition:height .3s var(--ease)}.top.scrolled .bar{height:54px}
.logo{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-size:1.06rem;margin-right:auto}.logo-img,.logo-img img{display:block}.logo-img img{height:44px;width:auto;transition:transform .4s var(--spring)}.logo:hover .logo-img img{transform:translateY(-1px) scale(1.03)}.top.scrolled .logo-img img{height:40px}
.logo b{color:var(--orl);font-weight:400}.logo span{white-space:nowrap}
.nav{display:flex;gap:2px;align-items:center}
.nav a{position:relative;color:#d6dbe0;text-decoration:none;padding:8px 12px;border-radius:10px;font-size:.95rem;font-weight:600;transition:color .2s,background .2s}
.nav a:not(.nav-ab):after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--orl);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover{color:#fff}.nav a:hover:after,.nav a.on:after{transform:scaleX(1)}.nav a.on{color:#fff}
.nav-ab{display:inline-flex!important;align-items:center;gap:7px;background:var(--or);color:#fff!important;padding:4px 12px 4px 4px!important;border-radius:999px!important;font-weight:800!important;text-decoration:none;font-size:.92rem;animation:abpulse 3s infinite}
.nav-ab .bimg{border-radius:50%;background:#f8e3cc;width:26px;height:26px}.nav-ab:hover{background:var(--ord)}.nav-ab.on{box-shadow:0 0 0 2px #fff}
@keyframes abpulse{0%,70%,100%{box-shadow:0 0 0 0 rgba(243,154,75,0)}80%{box-shadow:0 0 0 6px rgba(243,154,75,.35)}}
.nav-ab-m{display:none!important}.nav-only-m{display:none!important}
.menu-btn{display:none;width:44px;height:44px;border:0;background:transparent;border-radius:12px;padding:0;align-items:center;justify-content:center}
.mb-i{display:grid;gap:5px;width:22px}.mb-i i{display:block;height:2.5px;border-radius:2px;background:#fff;transition:transform .3s var(--ease),opacity .2s}
.menu-open .mb-i i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}.menu-open .mb-i i:nth-child(2){opacity:0}.menu-open .mb-i i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.prog{position:absolute;left:0;right:0;bottom:-3px;height:3px}.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--or),var(--orl));transform:scaleX(0);transform-origin:left}
@media(max-width:899px){
 .js .menu-btn{display:inline-flex}.js .nav-ab-m{display:inline-flex!important;padding:3px 15px 3px 3px!important;font-size:.82rem;white-space:nowrap;line-height:1.1}
 .js .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:#16191d;padding:8px 18px 18px;border-bottom:3px solid var(--or);
  transform:translateY(-8px);opacity:0;visibility:hidden;transition:transform .3s var(--ease),opacity .25s,visibility 0s .3s;box-shadow:0 20px 40px rgba(0,0,0,.35)}
 .menu-open .nav{transform:none!important;opacity:1!important;visibility:visible!important;transition:transform .3s var(--ease),opacity .25s!important}
 .js .nav a{font-family:var(--display);font-weight:400;font-size:1.35rem;padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.08);border-radius:0;color:#fff}
 .js .nav a:after{display:none}.js .nav .nav-ab{display:none!important}.js .nav-only-m{display:block!important}
 .menu-open .nav a{animation:navin .4s var(--ease) both}.nav a:nth-child(2){animation-delay:.03s}.nav a:nth-child(4){animation-delay:.06s}.nav a:nth-child(5){animation-delay:.09s}.nav a:nth-child(6){animation-delay:.12s}
 html:not(.js) .bar{flex-wrap:wrap;height:auto;padding-top:8px;padding-bottom:8px}html:not(.js) .nav{width:100%;overflow-x:auto}
}
@keyframes navin{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@media(max-width:380px){.logo{font-size:.92rem;gap:6px}.logo-img img,.top.scrolled .logo-img img{height:36px}.js .nav-ab-m span{display:none}.js .nav-ab-m{padding:3px!important}}

/* ---------- motion helpers ---------- */
.js [data-rv]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.js [data-rv].in{opacity:1;transform:none}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}.w>span{display:inline-block}
.js .h-big .w>span,.js .gh-t .w>span,.js .ptitle .w>span{transform:translateY(110%);transition:transform .8s var(--ease);transition-delay:calc(var(--i)*60ms + .05s)}
.js .h-big .ln.acc .w>span{transition-delay:calc(var(--i)*60ms + .3s)}
.js .h-big.in .w>span,.js .gh-t.in .w>span,.js .ptitle.in .w>span{transform:none}
.rip{position:absolute;border-radius:50%;background:currentColor;opacity:.18;transform:scale(0);animation:rip .65s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(1);opacity:0}}
.btn,.gcard,.tile,.role,.fchip,.stat,.pcard,.jx-tab,.hj-b,.qchips a,.chip-q,.send,.ph-btn,.ttile,.gmini,.askcard,.pn-a,.news-f button,.copy,.tick,.word summary,.jump a,.quick a{position:relative;overflow:hidden}
.cur{visibility:hidden;position:fixed;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;border:2px solid var(--orl);border-radius:50%;pointer-events:none;z-index:300;opacity:.55;transition:width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease),opacity .25s,background .25s}
.cur.on{visibility:visible}.cur.big{width:52px;height:52px;margin:-26px 0 0 -26px;background:rgba(243,154,75,.12);opacity:.8}

/* ---------- buttons, labels ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ord);color:#fff;border:0;border-radius:12px;padding:12px 20px;font-weight:800;text-decoration:none;transition:background .2s,transform .25s var(--ease),box-shadow .25s}
.btn:hover{background:var(--ordd);box-shadow:0 10px 26px rgba(168,90,23,.35)}.btn:active{transform:scale(.97)}
.btn .ic{transition:transform .3s var(--spring)}.btn:hover .ic{transform:translateX(4px)}
.btn.big{font-size:1.08rem;padding:15px 24px;border-radius:14px}
.btn.ghost{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.28);padding:6px 18px 6px 6px}.btn.ghost:hover{background:rgba(255,255,255,.16);border-color:#fff;box-shadow:none}
.btn.ghost .bimg{border-radius:50%;width:38px;height:38px}
.demo{display:inline-block;font:800 .66rem/1 "Archivo",sans-serif;letter-spacing:.08em;text-transform:uppercase;background:#fff3cc;color:#6b4e00;padding:4px 7px;border-radius:6px;vertical-align:middle}
.eyebrow{font:800 .8rem/1.2 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--ord);margin:0 0 10px}.eyebrow.light{color:var(--peach)}
.h2{font-size:clamp(1.75rem,6vw,2.9rem);line-height:1.05;margin:0 0 12px;text-wrap:balance}
.h3{font-size:1.2rem;margin:34px 0 12px}
.lead{font-size:clamp(1.02rem,2.6vw,1.18rem);color:var(--muted);max-width:60ch;margin:0 0 20px}
.sechead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 20px;margin-bottom:22px}.sechead .lead{margin-bottom:0}
.more-link{display:inline-flex;align-items:center;gap:6px;font-weight:800;text-decoration:none;color:var(--ordd);padding:8px 0;border-bottom:2px solid currentColor}.more-link .ic{transition:transform .3s var(--spring)}.more-link:hover .ic{transform:translateX(5px)}
.sec{font-size:clamp(1.35rem,4vw,1.8rem);margin:44px 0 16px;display:flex;align-items:center;gap:12px}
.sec:before{content:"";width:28px;height:16px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'%3E%3Crect x='0' y='0' width='9' height='16' rx='1.5' fill='%2323272d'/%3E%3Crect x='9' y='4' width='19' height='8' rx='1.5' fill='%23c8742c'/%3E%3C/svg%3E") center/contain no-repeat}
.bp-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(243,154,75,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(243,154,75,.09) 1px,transparent 1px),linear-gradient(rgba(243,154,75,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(243,154,75,.045) 1px,transparent 1px);
background-size:96px 96px,96px 96px,24px 24px,24px 24px;-webkit-mask-image:radial-gradient(120% 90% at 60% 40%,#000 30%,transparent 85%);mask-image:radial-gradient(120% 90% at 60% 40%,#000 30%,transparent 85%)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:radial-gradient(90% 70% at 75% 30%,#2b241d 0%,#16191d 60%);color:#fff;--gx:70%;--gy:30%}
.hero-fx{position:absolute;inset:0;pointer-events:none}.hero-fx .bp-grid{animation:gridmove 28s linear infinite}
@keyframes gridmove{to{background-position:96px 96px,96px 96px,24px 24px,24px 24px}}
.hero-glow{position:absolute;inset:0;background:radial-gradient(420px circle at var(--gx) var(--gy),rgba(243,154,75,.2),transparent 70%)}
.dust i{position:absolute;bottom:-10px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:#f0d9b5;opacity:0;animation:dust var(--t) linear infinite;animation-delay:var(--dl)}
@keyframes dust{0%{transform:translate(0,0);opacity:0}10%{opacity:.55}90%{opacity:.35}100%{transform:translate(40px,-640px);opacity:0}}
.hero-in{position:relative;display:grid;gap:28px;padding:34px 18px 30px}
.kicker{display:inline-flex;align-items:center;gap:7px;background:rgba(243,154,75,.14);color:var(--peach);border:1px solid rgba(243,154,75,.35);font-weight:800;font-size:.76rem;text-transform:uppercase;letter-spacing:.07em;padding:6px 12px;border-radius:999px;margin:0 0 18px}
.h-big{font-size:clamp(2.6rem,11.5vw,5.4rem);line-height:.98;margin:0 0 16px;letter-spacing:-.02em}.h-big .ln{display:block}.h-big .acc{color:var(--orl)}
.hero .sub{color:#e7dccb;font-size:clamp(1.05rem,3.6vw,1.28rem);font-weight:500;margin:0 0 24px;max-width:34ch;line-height:1.45}
.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.tagl{display:flex;align-items:center;gap:10px;margin:22px 0 0;color:#a9a196;font-family:var(--serif);font-style:italic;font-size:1.1rem}.tagl span{width:28px;height:2px;background:var(--or)}
.hero-art{position:relative}
.hj{margin:0;position:relative}
.hj-card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:34px 8px 4px;box-shadow:0 30px 60px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08)}
.hj-tag{position:absolute;top:13px;left:14px;font:700 .72rem/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--peach);opacity:.9}
.hj-svg{display:block;width:100%;height:auto;overflow:visible}
.hj-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px;position:relative;padding-bottom:10px}
.hj-b{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:8px 9px;color:#cfc6b8;font-size:.76rem;font-weight:700;line-height:1.15;transition:background .25s,color .25s,border-color .25s}
.hj-b b{font-family:var(--display);font-weight:400;font-size:.9rem;color:#fff;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;transition:background .3s}
.hj-b:hover{border-color:var(--orl);color:#fff}.hj-b.on{background:rgba(243,154,75,.18);border-color:var(--orl);color:#fff}.hj-b.on b{background:var(--or)}
.hj-bar{position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}.hj-bar i{display:block;height:100%;background:var(--orl);transform-origin:left;transition:transform .6s var(--ease)}
.hj-play{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.25);color:#fff;display:flex;align-items:center;justify-content:center}
.hj-play.paused svg{display:none}.hj-play.paused:after{content:"";border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.hb-L,.hb-R,.hb-b,.hb-clamp path,.hb-badge,.hb-line,.hb-glue circle,.hb-bf,.hb-bh,.hb-slot,.hb-dim{transition:transform .9s var(--ease),opacity .5s,stroke-dashoffset .9s var(--ease)}
.hb-slot{opacity:0}.st1 .hb-slot{opacity:1}
.hb-b{transform:translateY(-120px);opacity:0;transition-delay:var(--d)}.st2 .hb-b{transform:none;opacity:1}
.hb-glue circle{opacity:0;transform:scale(.2);transform-box:fill-box;transform-origin:center}.st2 .hb-glue circle{opacity:1;transform:none}
.hb-L{transform:translateX(-14px)}.hb-R{transform:translateX(14px)}.st3 .hb-L{transform:translateX(20px)}.st3 .hb-R{transform:translateX(-20px)}
.hb-clamp path{opacity:0}.hb-clamp path:first-child{transform:translateX(-30px)}.hb-clamp path:last-child{transform:translateX(30px)}.st3 .hb-clamp path{opacity:1;transform:none}.st4 .hb-clamp path{opacity:0}
.hb-bh{opacity:0}.st3 .hb-bh{opacity:.9}.st3 .hb-bf{opacity:0}.st3 .hb-glue circle{opacity:0}
.hb-line{opacity:0;stroke-dasharray:200;stroke-dashoffset:200}.st4 .hb-line{opacity:.9;stroke-dashoffset:0}
.hb-badge{opacity:0;transform:translateY(16px) scale(.8);transform-box:fill-box;transform-origin:center}.st4 .hb-badge{opacity:1;transform:none;transition-timing-function:var(--spring)}
.hb-dim{opacity:.35}.st4 .hb-dim{opacity:1}
.bteaser{display:flex;align-items:flex-end;gap:10px;margin-top:16px;text-decoration:none;color:var(--ink)}
.bt-av{flex:none;width:56px;height:56px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px #16191d,0 0 0 5px var(--orl);animation:bob 3.2s ease-in-out infinite}.bt-av img{display:block;width:100%;height:100%}
.bt-bub{position:relative;background:#fff;border-radius:18px 18px 18px 4px;padding:10px 14px;font-size:.92rem;line-height:1.35;box-shadow:0 12px 30px rgba(0,0,0,.3);transition:transform .3s var(--spring)}
.bt-bub u{color:var(--ord);font-weight:800;text-decoration-thickness:2px}.bt-bub small{display:inline-block;margin-left:4px;font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;background:#fff3cc;color:#6b4e00;padding:2px 6px;border-radius:5px}
.bteaser:hover .bt-bub{transform:translateY(-3px) rotate(-1deg)}
.js .bteaser{animation:pop .6s var(--spring) 1.6s both}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.9)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-3deg)}}
.ticker{position:relative;display:flex;overflow:hidden;border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.25);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tk-track{display:flex;flex:none;animation:tick 70s linear infinite}.ticker:hover .tk-track,.ticker:focus-within .tk-track{animation-play-state:paused}
.ticker a{flex:none;color:#e7dccb;text-decoration:none;font-weight:700;font-size:.92rem;padding:13px 0 13px 18px;white-space:nowrap;display:flex;align-items:center}
.ticker a:after{content:"";width:14px;height:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'%3E%3Crect x='0' y='0' width='9' height='16' rx='1.5' fill='%23efe3cf'/%3E%3Crect x='9' y='4' width='19' height='8' rx='1.5' fill='%23c8742c'/%3E%3C/svg%3E") center/contain no-repeat;margin-left:18px;opacity:.7}
.ticker a:hover{color:var(--orl)}
@keyframes tick{to{transform:translateX(-100%)}}
@media(min-width:900px){.hero-in{grid-template-columns:1.05fr 1fr;align-items:center;gap:48px;padding:72px 18px 70px}.hero .sub{max-width:40ch}
 .bteaser{margin:18px 0 0 auto;max-width:340px;justify-content:flex-end}.hj-card{padding:40px 14px 8px}}


/* ---------- stats ---------- */
.stats{position:relative;background:var(--ink);padding:0 0 26px}.stats:after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:var(--ply)}
.stats-in{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:4px}
.stat{display:flex;flex-direction:column;gap:2px;background:linear-gradient(160deg,#23272d,#1b1e22);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:14px 16px;text-decoration:none;color:#cfc6b8;font-weight:700;font-size:.88rem;line-height:1.25;transition:transform .3s var(--ease),border-color .3s}
.stat b{font-family:var(--display);font-weight:400;font-size:clamp(2rem,8vw,2.8rem);line-height:1;color:#fff;font-variant-numeric:tabular-nums;transition:color .3s}
.stat:hover{border-color:var(--orl);transform:translateY(-3px)}.stat:hover b{color:var(--orl)}
@media(min-width:760px){.stats-in{grid-template-columns:repeat(4,1fr);gap:14px}.stats{padding-bottom:34px}}

/* ---------- start path ---------- */
.start{padding:56px 0 24px}
.path{list-style:none;margin:0;padding:0;display:grid;gap:12px;position:relative}
.path-line{position:absolute;left:31px;top:20px;bottom:20px;width:3px;background:var(--line);border-radius:2px}
.path-line i{display:block;width:100%;height:100%;background:linear-gradient(180deg,var(--or),var(--orl));transform:scaleY(0);transform-origin:top;transition:transform 1.6s var(--ease) .3s}
.path.in .path-line i,html:not(.js) .path-line i{transform:none}
.pcard{display:grid;grid-template-columns:44px 1fr;grid-template-areas:"n t" "n c";gap:6px 14px;align-items:center;background:#fff;border-radius:var(--r);padding:16px 50px 16px 10px;text-decoration:none;color:var(--ink);box-shadow:var(--sh);transition:transform .35s var(--ease),box-shadow .35s;transform:perspective(800px) rotateX(var(--rx,0)) rotateY(var(--ry,0))}
.pcard:before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(243,154,75,.12),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.pcard:hover{box-shadow:0 0 0 2px var(--cc,var(--or)),var(--sh2)}.pcard:hover:before{opacity:1}
.pnum{grid-area:n;align-self:start;position:relative;z-index:1;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--display);display:flex;align-items:center;justify-content:center;font-size:1rem;box-shadow:0 0 0 5px var(--bg);transition:background .3s,transform .4s var(--spring)}
.pcard:hover .pnum{background:var(--or);transform:scale(1.1) rotate(-6deg)}
.part{display:none}.pt{grid-area:t;display:flex;flex-direction:column;gap:2px}.pt b{font-size:1.12rem;line-height:1.2;font-weight:800}.pt small{color:var(--muted);font-size:.92rem;line-height:1.35}
.pprob{display:block;margin-top:6px;font-size:.86rem;color:var(--muted);border-left:3px solid var(--line);padding-left:10px}
.pcard .chips{grid-area:c;display:flex;gap:6px;flex-wrap:wrap}
.pgo{position:absolute;right:12px;top:50%;margin-top:-17px;width:34px;height:34px;border-radius:50%;background:var(--birch);color:var(--ordd);display:flex;align-items:center;justify-content:center;transition:transform .35s var(--spring),background .3s,color .3s}.pgo .ic{width:18px;height:18px}
.pcard:hover .pgo{background:var(--or);color:#fff;transform:translateX(4px)}
@media(min-width:900px){
 .path{grid-template-columns:repeat(4,1fr);gap:16px}.path-line{left:20px;right:20px;top:39px;bottom:auto;width:auto;height:3px}.path-line i{transform:scaleX(0);transform-origin:left}.path.in .path-line i{transform:none}
 .pcard{grid-template-columns:1fr;grid-template-areas:"n" "a" "t" "c";padding:18px 18px 20px;height:100%;align-content:start;gap:10px}
 .part{display:block;grid-area:a}.part svg{display:block;width:100%;height:auto;border-radius:14px;transition:transform .5s var(--ease)}.pcard:hover .part svg{transform:scale(1.04) rotate(-1deg)}
 .pgo{top:24px;margin-top:0}}

/* ---------- guide finder ---------- */
.finder{padding:44px 0 30px}
.search{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--line);border-radius:999px;padding:4px 8px 4px 18px;max-width:620px;box-shadow:0 8px 26px rgba(60,40,20,.08);transition:border-color .2s,box-shadow .3s}
.search:focus-within{border-color:var(--or);box-shadow:0 0 0 5px rgba(200,116,44,.15),0 8px 26px rgba(60,40,20,.08)}.search .ic{color:var(--or);width:26px;height:26px}.search input{border:0;outline:0;font:inherit;font-size:1.06rem;padding:13px 0;width:100%;background:transparent;color:var(--ink)}
.quick{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 0;font-size:.9rem;color:var(--muted);font-weight:600}
.quick a{color:var(--ink);text-decoration:none;background:#fff;border:1.5px solid var(--line);padding:6px 13px;border-radius:999px;font-weight:700;transition:background .2s,border-color .2s,color .2s,transform .2s}.quick a:hover{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-2px)}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}@media(min-width:620px){.tiles{grid-template-columns:repeat(4,1fr);gap:14px}}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:3px;border:0;border-radius:18px;padding:10px 10px 14px;text-align:left;color:var(--ink);background:#fff;box-shadow:var(--sh);transition:transform .35s var(--ease),box-shadow .35s;transform:perspective(700px) rotateX(var(--rx,0)) rotateY(var(--ry,0))}
.tile .tart{display:block;width:100%;overflow:hidden;border-radius:12px}.tile .tart svg{display:block;width:100%;height:auto;transition:transform .5s var(--ease)}
.tile b{font-family:var(--display);font-weight:400;font-size:1.08rem;margin-top:6px;padding:0 4px}.tile small{color:var(--muted);font-weight:700;padding:0 4px}
.tile:hover{box-shadow:var(--sh2)}.tile:hover .tart svg{transform:scale(1.07) rotate(-1.5deg)}
.tile[aria-pressed=true]{background:#fff4e8;box-shadow:0 0 0 3px var(--or),0 12px 28px rgba(200,116,44,.25)}
.tile[aria-pressed=true]:after{content:"✓";position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;background:var(--or);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;animation:pop .4s var(--spring)}
.rstrip{display:flex;flex-wrap:wrap;gap:8px}
.role{display:flex;align-items:center;gap:8px;background:#fff;border:0;border-radius:999px;padding:5px 13px 5px 5px;color:var(--ink);box-shadow:var(--sh);transition:transform .2s var(--ease),box-shadow .2s,background .2s}
.role .rI{display:flex;width:32px;height:32px;border-radius:50%;align-items:center;justify-content:center;background:var(--birch);color:var(--ordd);transition:transform .4s var(--spring)}.role .rI .ic{width:18px;height:18px}
.role b{font-weight:800;font-size:.9rem;white-space:nowrap}.role small{font-weight:800;font-size:.72rem;color:var(--muted);background:var(--bg);border-radius:999px;padding:1px 7px}
.role:hover{transform:translateY(-2px)}.role:hover .rI{transform:rotate(-12deg) scale(1.1)}
.role[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:0 0 0 2px var(--or)}.role[aria-pressed=true] .rI{background:var(--or);color:#fff}.role[aria-pressed=true] small{background:#3a3f46;color:#fff}
.fbar{display:flex;flex-wrap:wrap;gap:8px 18px;margin:22px 0 6px}.chiprow{display:flex;gap:6px;overflow-x:auto}
.fchip{border:1.5px solid #d9c9ae;background:#fff;border-radius:999px;padding:7px 14px;font-size:.88rem;font-weight:700;color:var(--ink);white-space:nowrap;transition:background .2s,color .2s}.fchip:hover{border-color:var(--ink)}.fchip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.count{color:var(--muted);font-size:.9rem;font-weight:600;margin:8px 0 12px}
.ggrid{display:grid;grid-template-columns:1fr;gap:12px}@media(min-width:620px){.ggrid{grid-template-columns:1fr 1fr;gap:14px}}@media(min-width:980px){.ggrid{grid-template-columns:repeat(3,1fr)}}
.gcard{display:grid;grid-template-columns:76px 1fr;grid-template-rows:auto auto auto auto;column-gap:14px;row-gap:4px;align-items:center;background:#fff;border-radius:16px;padding:18px 42px 14px 14px;text-decoration:none;color:var(--ink);box-shadow:var(--sh);transition:transform .35s var(--ease),box-shadow .35s;transform:perspective(800px) rotateX(var(--rx,0)) rotateY(var(--ry,0))}
.gcard:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--cc,var(--or));transition:height .3s var(--ease)}
.gcard:after{content:"";position:absolute;inset:0;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(243,154,75,.13),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.gcard:hover{box-shadow:0 0 0 2px var(--cc),var(--sh2)}.gcard:hover:before{height:9px}.gcard:hover:after{opacity:1}
.gcard .gthumb{grid-row:1/5;align-self:start}.gcard .gthumb svg{display:block;width:76px;height:auto;transition:transform .5s var(--spring)}.gcard:hover .gthumb svg{transform:rotate(-5deg) scale(1.08)}
.gcat{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--cc,var(--or))}
.gcard h3{margin:0;font-weight:800;font-size:1.08rem;line-height:1.25}.gcard .chips{display:flex;gap:6px;flex-wrap:wrap}
.gfor{grid-column:2;font-size:.78rem;color:var(--muted);font-weight:600;line-height:1.3}
.ggo{position:absolute;right:12px;top:50%;margin-top:-13px;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--ordd);transition:transform .35s var(--spring),background .3s,color .3s}
.gcard:hover .ggo,.gmini:hover .ggo{background:var(--or);color:#fff;transform:translateX(3px)}
.gcard.pop{animation:cardin .5s var(--ease)}@keyframes cardin{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:.78rem;font-weight:800;padding:3px 9px;border-radius:999px}
.lv-easy{background:#e2f2e8;color:#246640}.lv-medium{background:#fbeed9;color:#7f520c}.lv-hard{background:#f8e1dc;color:var(--warn)}.pr{background:#eef1f5;color:#34506f}.chip.st{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.none{text-align:center;color:var(--muted);padding:20px}
.c-quotes{--cc:#c8742c}.c-drawings{--cc:#2f5b80}.c-office{--cc:#5a4a8a}.c-marketing{--cc:#c03a54}.c-safety{--cc:#a87200}.c-hiring{--cc:#2f7d4f}.c-workshop{--cc:#2f6f6a}.c-site{--cc:#8a4b17}
.gic{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px}.gic .ic{width:26px;height:26px}.gic.sm{width:32px;height:32px;border-radius:9px}.gic.sm .ic{width:18px;height:18px}.gic.big{width:64px;height:64px;border-radius:18px}.gic.big .ic{width:34px;height:34px}
.gic.c-quotes{background:#fbecdd;color:#a85a17}.gic.c-drawings{background:#e4edf5;color:#2f5b80}.gic.c-office{background:#ece8f5;color:#5a4a8a}.gic.c-marketing{background:#fde7ea;color:#a8384c}.gic.c-safety{background:#fff3cc;color:#8a6500}.gic.c-hiring{background:#e2f2e8;color:#2f7d4f}.gic.c-workshop{background:#dcefec;color:#2f6f6a}.gic.c-site{background:#f5e6d6;color:#8a4b17}

/* ---------- joint explorer ---------- */
.jx{position:relative;padding:56px 0;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.jx-box{display:grid;gap:14px;margin-top:20px}
.jx-tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;scroll-snap-type:x proximity;scrollbar-width:none}.jx-tabs::-webkit-scrollbar{display:none}
.jx-tab{flex:none;scroll-snap-align:start;display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:var(--bg);border-radius:999px;padding:9px 16px 9px 9px;font-weight:800;font-size:.95rem;color:var(--ink);transition:background .25s,color .25s,border-color .25s}
.jx-ti{width:26px;height:26px;border-radius:50%;background:#fff;color:var(--ord);display:flex;align-items:center;justify-content:center;transition:transform .4s var(--spring)}
.jx-tab:hover{border-color:var(--ink)}.jx-tab:hover .jx-ti{transform:rotate(-15deg)}
.jx-tab[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff}.jx-tab[aria-selected=true] .jx-ti{background:var(--or);color:#fff}
.jx-panel{display:grid;gap:16px;animation:fadeup .45s var(--ease)}
@keyframes fadeup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.jx-art{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#f8f1e5;background-image:linear-gradient(rgba(47,91,128,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(47,91,128,.08) 1px,transparent 1px);background-size:20px 20px}
.jx-svg{display:block;width:100%;height:auto}
.jx-lab{position:absolute;left:14px;top:12px;font:800 .72rem/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;background:var(--or);color:#fff;padding:6px 9px;border-radius:6px}
.jB,.jC,.jH{transition:transform .9s var(--spring),opacity .5s}
.js .jx-art:not(.joined) .jB,.js .jx-art:not(.joined) .jC{transform:translate(var(--dx),var(--dy))}
.js .jx-art:not(.joined) .jH{opacity:0}.jx-art.joined .jB{transition-delay:.3s}
.jx-art.joined .jC{opacity:0;transition:transform .9s var(--spring),opacity .4s .8s}.jx-art.joined .jH{transition-delay:.9s}
.jx-txt h3{font-family:var(--display);font-weight:400;font-size:1.5rem;margin:0 0 6px}.jx-txt p{margin:0 0 12px}
.jx-txt dl{margin:0 0 12px;display:grid;gap:8px}.jx-txt dt{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--ord)}.jx-txt dd{margin:0;font-weight:600}
.jx-replay{display:inline-flex;align-items:center;gap:6px}
.jx-note{margin-top:14px}
@media(min-width:900px){.jx-box{grid-template-columns:220px 1fr;gap:26px;align-items:start}.jx-tabs{flex-direction:column;overflow:visible}.jx-tab{width:100%}
 .jx-panel{grid-template-columns:1.25fr 1fr;align-items:center;gap:26px}}

/* ---------- meet Barry ---------- */
.meet{position:relative;overflow:hidden;background:linear-gradient(135deg,#1d1f23 0%,#2b241d 100%);color:#fff;padding:60px 0}
.meet:before{content:"";position:absolute;inset:0;background:radial-gradient(500px circle at 20% 40%,rgba(243,154,75,.18),transparent 70%)}
.meet-in{position:relative;display:grid;gap:30px;align-items:center}
.meet-av{position:relative;justify-self:center;width:min(220px,58vw)}
.meet-av .barry{position:relative;display:block;width:100%;height:auto;filter:drop-shadow(0 22px 26px rgba(0,0,0,.45));animation:bob 4s ease-in-out infinite}.meet-av:before{content:"";position:absolute;inset:4% 2% 8%;border-radius:50%;background:radial-gradient(closest-side,rgba(243,154,75,.32),rgba(243,154,75,0))}
.meet-ring{position:absolute;inset:-20px;border-radius:50%;border:2px dashed rgba(243,154,75,.4);animation:spin 30s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.meet-tag{position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);white-space:nowrap;background:#fff3cc;color:#6b4e00;font-weight:800;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;padding:5px 10px;border-radius:999px}
.meet .lead{color:#d9cfbf}
.peek{display:grid;gap:8px;margin:0 0 18px;max-width:520px}
.peek p{margin:0;font-size:.95rem;line-height:1.4}
.pk-u{justify-self:end;background:var(--or);color:#fff;border-radius:18px 18px 4px 18px;padding:11px 14px;max-width:85%}
.pk-b{display:flex;gap:10px;align-items:flex-end}.pk-b .bimg{border-radius:50%;flex:none}.pk-b span{background:#fff;color:var(--ink);border-radius:18px 18px 18px 4px;padding:11px 14px}
.qchips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 16px}.qchips span{color:#a9a196;font-weight:700;font-size:.88rem}
.qchips a{color:#fff;text-decoration:none;font-weight:700;font-size:.9rem;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.22);border-radius:999px;padding:7px 13px;transition:background .2s,border-color .2s,transform .2s}.qchips a:hover{background:var(--or);border-color:var(--or);transform:translateY(-2px)}
.demo-note{font-size:.86rem;color:#cfc6b8;border-left:3px solid #f2c14e;padding-left:10px;max-width:520px}
@media(min-width:900px){.meet-in{grid-template-columns:320px 1fr;gap:60px}.meet-av{width:270px}}

/* ---------- how it works ---------- */
.how{padding:56px 0}
.hsteps{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}@media(min-width:760px){.hsteps{grid-template-columns:repeat(3,1fr);gap:18px}}
.hsteps li{display:grid;grid-template-columns:64px 1fr;column-gap:14px;row-gap:2px;align-items:center;background:#fff;border-radius:18px;padding:16px;box-shadow:var(--sh);transition:transform .3s var(--ease)}
.hsteps li:hover{transform:translateY(-4px)}
.hart{grid-row:1/4}.hart svg{width:64px;height:64px;display:block;transition:transform .5s var(--spring)}.hsteps li:hover .hart svg{transform:rotate(-8deg) scale(1.08)}
.hsteps b{font-family:var(--display);font-weight:400;font-size:1.1rem;line-height:1.15}.hsteps small{color:var(--muted);font-weight:600}.hlink{font-weight:800;font-size:.88rem}

/* ---------- perfect join band ---------- */
.pj{position:relative;color:#fff;background:radial-gradient(120% 70% at 50% 58%,#3a2a1b 0%,#1d1d1e 55%,#141517 100%);padding:76px 0 84px;overflow:hidden;isolation:isolate}
.pj:before,.pj:after{content:"";position:absolute;left:0;right:0;height:12px;background:var(--ply);z-index:1}.pj:before{top:0}.pj:after{bottom:0}
.pj-in{max-width:1080px;margin:0 auto;padding:0 22px;text-align:center}
.pj-eye{display:inline-flex;align-items:center;gap:12px;margin:0 0 14px;color:var(--peach);font-weight:800;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase}.pj-eye span{width:34px;height:2px;background:currentColor;opacity:.6}
.pj-h{font-size:clamp(2.1rem,6.4vw,3.6rem);line-height:1.02;margin:0 0 14px;color:#fff;text-wrap:balance}.pj-h em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--orl);letter-spacing:0}
.pj-lead{color:#cfc6b8;font-size:clamp(1.02rem,2.6vw,1.2rem);max-width:44ch;margin:0 auto;line-height:1.5}
.pj-fig{position:relative;margin:44px auto 0;max-width:1000px}.pj-svg{display:block;width:100%;height:auto;overflow:visible}
.pjA,.pjB{transition:transform 1.3s var(--spring)}.pjJ,.pjC{transition:opacity .6s .9s}
.js .pj-fig:not(.in) .pjA{transform:translateX(-90px)}.js .pj-fig:not(.in) .pjB{transform:translateX(90px)}.js .pj-fig:not(.in) .pjJ,.js .pj-fig:not(.in) .pjC{opacity:0}
.pj-l,.pj-out{transition:opacity .6s,transform .8s var(--spring)}.js .pj-fig:not(.in) .pj-l,.js .pj-fig:not(.in) .pj-out{opacity:0}
.pj-fig.in .pj-out{transition-delay:1.1s}.pj-fig.in .pj-l{transition-delay:.4s}
.pj-l{position:absolute;top:44%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:9px;background:rgba(18,19,21,.86);color:#fff;font-weight:800;font-size:1rem;padding:8px 16px 8px 8px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.35);white-space:nowrap}
.pj-l i{display:flex;width:30px;height:30px;border-radius:50%;align-items:center;justify-content:center;flex:none}.pj-l .ic{width:17px;height:17px}
.pj-human{left:24.5%}.pj-human i{background:#efe3cf;color:#23272d}.pj-ai{left:75.5%}.pj-ai i{background:#c8742c;color:#fff}
.pj-out{display:inline-flex;align-items:center;gap:8px;margin-top:2px;background:#fff;color:var(--ink);font-family:var(--display);font-size:clamp(1rem,2.6vw,1.25rem);padding:10px 22px;border-radius:999px;box-shadow:0 0 0 2px #f0b07a,0 10px 26px rgba(0,0,0,.45)}.pj-out .ic{width:18px;height:18px;color:var(--or);stroke-width:3}
.pj-labels{display:block}
.pj-q{position:relative;max-width:860px;margin:64px auto 0;padding-top:36px}
.pj-q:before{content:"\201C";position:absolute;top:-34px;left:50%;transform:translateX(-50%);font-family:var(--serif);font-style:italic;font-size:7rem;line-height:1;color:var(--or)}
.pj-q p{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(1.65rem,4.4vw,2.75rem);line-height:1.22;color:#f7efe2;text-wrap:balance}
.pj-q footer{display:inline-flex;align-items:center;gap:12px;margin-top:26px;text-align:left}.pj-q footer svg{width:38px;height:23px;flex:none}
.pj-q footer span{display:flex;flex-direction:column;color:#bdb4a6;font-size:.92rem;line-height:1.3}.pj-q footer b{color:#fff;font-size:1.05rem}
.pj-svg-m{display:none!important}
@media(max-width:699px){.pj{padding:56px 0 64px}.pj-svg-m{display:block!important}.pj-svg:not(.pj-svg-m){display:none!important}
 .pj-fig{display:grid;grid-template-columns:41fr 59fr;justify-items:center;row-gap:12px;margin-top:32px}.pj-fig .pj-svg-m{grid-column:1/-1;grid-row:2}
 .pj-labels{display:contents}.pj-l{position:static;transform:none;font-size:.82rem;white-space:nowrap;box-shadow:none;background:transparent;padding:0;gap:7px}.pj-l i{width:22px;height:22px}.pj-l .ic{width:13px;height:13px}
 .pj-human{grid-column:1;grid-row:1}.pj-ai{grid-column:2;grid-row:1}.pj-out{grid-column:1/-1;grid-row:3;font-size:1rem;padding:8px 18px}
 .js .pj-fig:not(.in) .pjA{transform:translateX(-50px)}.js .pj-fig:not(.in) .pjB{transform:translateX(50px)}
 .pj-q{margin-top:44px;padding-top:30px}.pj-q:before{font-size:5.5rem;top:-26px}}

/* ---------- tools ---------- */
.tools-sec{padding-top:50px}
.tstrip-w{position:relative}
.tstrip{display:flex;gap:10px;overflow-x:auto;padding:6px 2px 14px;scroll-snap-type:x mandatory;scrollbar-width:thin}.tstrip .ttile{flex:0 0 210px;scroll-snap-align:start}
.ts-btn{position:absolute;top:50%;margin-top:-30px;width:44px;height:44px;border-radius:50%;border:0;background:var(--ink);color:#fff;font-size:1.6rem;line-height:1;z-index:2;box-shadow:0 8px 20px rgba(0,0,0,.25);display:none}
.ts-btn.prev{left:-10px}.ts-btn.next{right:-10px}@media(hover:hover) and (pointer:fine){.ts-btn{display:block}}.ts-btn:hover{background:var(--or)}
.tgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:26px}@media(min-width:760px){.tgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ttile{display:flex;align-items:center;gap:10px;min-width:0;background:#fff;border-radius:14px;padding:11px 12px;text-decoration:none;color:var(--ink);box-shadow:var(--sh);transition:transform .3s var(--ease),box-shadow .3s;transform:perspective(600px) rotateX(var(--rx,0)) rotateY(var(--ry,0))}
.ttile:hover{box-shadow:0 0 0 2px var(--or),var(--sh2)}.ttile:hover .mono{transform:rotate(-8deg) scale(1.08)}
.ttile span{display:flex;flex-direction:column;min-width:0}.ttile b{font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ttile small{color:var(--muted);font-size:.78rem}
.mono{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;color:#fff;font-weight:800;font-size:.9rem;letter-spacing:.02em;flex:none;transition:transform .4s var(--spring)}
.mono.sm{width:26px;height:26px;border-radius:7px;font-size:.66rem}.mono.big{width:64px;height:64px;border-radius:18px;font-size:1.3rem}

/* ---------- newsletter (Kit form markup unchanged; styling only) ---------- */
.news{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;background:#16191d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cpath d='M0 4H18V9L12 7V17L18 15V20H0Z' fill='%23c8742c' fill-opacity='.14'/%3E%3C/svg%3E");color:#fff;border-radius:var(--r);padding:20px;margin:44px 0 10px;border-bottom:6px solid var(--or)}
.news>.ic{color:var(--orl);animation:bob 3s ease-in-out infinite}.news>p{margin:0;flex:1 1 200px;color:#d6dbe0;font-size:1.05rem}.news b{color:#fff}
.news-f{display:flex;flex:1 1 300px;gap:8px;flex-wrap:wrap}.news-f input{flex:1 1 180px;border:2px solid transparent;border-radius:12px;padding:12px 14px;font:inherit;transition:border-color .2s,box-shadow .2s}.news-f input:focus{outline:0;border-color:var(--orl);box-shadow:0 0 0 4px rgba(243,154,75,.3)}
.news-f button{background:var(--ord);color:#fff;border:0;border-radius:12px;padding:12px 20px;font-weight:800;transition:background .2s,transform .2s}.news-f button:hover{background:var(--ordd);transform:translateY(-2px)}
.news .news-c{flex:1 1 100%;width:100%;margin:2px 0 0;font-size:.85em;color:#c3c9cf}.news .news-c a{color:var(--peach)}
.ok{display:none;color:#9fe0b5;width:100%}.done .ok{display:block}.form .ok{color:var(--ok)}.news-f.done input,.news-f.done button{display:none}

/* ---------- page heroes ---------- */
.phero,.ghero,.ab-head{position:relative;overflow:hidden;background:radial-gradient(90% 90% at 80% 20%,#2b241d 0%,#16191d 65%);color:#fff;padding:34px 0 38px}
.phero:after,.ghero:after,.ab-head:after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--ply)}
.phero .wrap,.ghero .wrap,.ab-head .wrap{position:relative}
.phero .sub,.ghero .sub,.ab-head .sub{color:#e0d6c6;font-size:1.08rem;max-width:56ch;margin:0 0 18px}
.ptitle{font-size:clamp(2.1rem,8vw,3.6rem);line-height:1.02;margin:0 0 12px}
.phero.sm{padding:22px 0 34px}.phero .crumb a{color:var(--peach)}
.phero-in{display:grid;gap:22px;align-items:center}.ph-av{justify-self:start;width:120px}.ph-av .barry,.ab-av .barry{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,.4));animation:bob 4s ease-in-out infinite}
@media(min-width:800px){.phero-in{grid-template-columns:1fr 200px}.ph-av{width:200px;justify-self:end}}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin:0}.jump a{color:#fff;text-decoration:none;font-weight:700;font-size:.9rem;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.22);border-radius:999px;padding:7px 13px;transition:background .2s,border-color .2s}.jump a:hover{background:var(--or);border-color:var(--or)}
.pband{position:relative;height:56px;overflow:hidden;background:#16191d}.pband:after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--ply)}
.phero .search{margin-top:6px}
.narrow>.ptitle:first-child,.narrow>.about-logo:first-child{margin-top:28px}.narrow .ptitle{font-size:clamp(1.9rem,7vw,2.8rem)}.narrow>.sub{color:var(--muted);font-size:1.1rem}

/* ---------- guide page ---------- */
.ghero{padding:20px 0 44px}.ghero-in{display:grid;grid-template-columns:1fr;position:relative}
.crumb{color:#cfc6b8;font-size:.9rem;font-weight:700;margin:0 0 14px}.crumb a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}.crumb a:hover{border-color:var(--orl)}
.ghero .crumb{display:inline-block;background:rgba(255,255,255,.08);padding:6px 12px;border-radius:999px;justify-self:start}
.gh-art{position:absolute;right:4px;top:4px;width:60px;animation:float 5s ease-in-out infinite;filter:drop-shadow(0 12px 22px rgba(0,0,0,.35))}.gh-art svg{display:block;width:100%;height:auto}
@keyframes float{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-8px)}}
.gh-t{font-size:clamp(2rem,8.5vw,3.4rem);line-height:1.02;margin:6px 0 12px;max-width:22ch}
.ghero .chips{display:flex;gap:6px;flex-wrap:wrap}
.ghero:before{content:"";position:absolute;left:0;top:0;bottom:10px;width:6px;background:var(--cc)}
@media(min-width:800px){.gh-art{width:190px;right:30px;top:30px}.gh-t{padding-right:230px}.ghero{padding:28px 0 56px}}
.gpage{padding-bottom:10px;max-width:860px}
.ghead{display:flex;gap:16px;align-items:flex-start}.ghead h1{font-size:clamp(1.9rem,7vw,2.8rem);line-height:1.05;margin:4px 0 6px}.ghead .sub{margin:0}
.sumbar{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-radius:var(--r);overflow:hidden;margin:-24px 0 6px;position:relative;z-index:2;box-shadow:var(--sh2)}
.sumbar>div{display:flex;gap:10px;align-items:center;background:#fff;padding:12px 14px}.sumbar .ic{color:var(--or)}.sumbar span{display:flex;flex-direction:column}
.sumbar small{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700}.sumbar b{font-size:.98rem}
.sumbar .tl{grid-column:1/-1}.tlinks{display:flex!important;flex-direction:row!important;flex-wrap:wrap;gap:6px;margin-top:4px}
.tlinks a{display:inline-flex;align-items:center;gap:5px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:2px 10px 2px 2px;text-decoration:none;color:var(--ink);font-size:.84rem;font-weight:700;transition:border-color .2s,transform .2s}.tlinks a:hover{border-color:var(--or);transform:translateY(-1px)}
@media(min-width:760px){.sumbar{grid-template-columns:repeat(3,1fr)}}@media(max-width:759px){.sumbar>div:nth-child(3){grid-column:1/-1}}
.gprog{position:sticky;top:54px;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;background:rgba(248,241,229,.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:10px 2px;margin:18px 0 -18px;border-bottom:1px solid var(--line);font-size:.9rem;font-weight:700}
.gp-t b{font-family:var(--display);font-weight:400;color:var(--ord);font-size:1.05rem}.gp-bar{flex:1 1 120px;height:8px;border-radius:99px;background:var(--line);overflow:hidden}.gp-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--or),var(--orl));transform:scaleX(0);transform-origin:left;transition:transform .6s var(--spring)}
.gprog.all .gp-bar i{background:var(--ok)}.gprog.all .gp-t b{color:var(--ok)}
html:not(.js) .gprog,html:not(.js) .tick,html:not(.js) .tip-tick{display:none}
.tip-tick{margin:-6px 0 12px}
.steps{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.step{display:flex;gap:14px;background:#fff;border-radius:var(--r);padding:16px 14px 16px 16px;box-shadow:var(--sh);transition:box-shadow .3s,background .3s}
.step p{margin:0}.step>div{flex:1;min-width:0}
.js .steps .step{opacity:0;transform:translateX(-16px);transition:opacity .6s var(--ease),transform .6s var(--ease),box-shadow .3s,background .3s}.js .steps.in .step,.js .steps .step.in{opacity:1;transform:none}
.num{flex:none;width:36px;height:36px;border-radius:50%;background:var(--ord);color:#fff;font-family:var(--display);display:flex;align-items:center;justify-content:center;transition:background .3s,transform .4s var(--spring)}
.tick{flex:none;align-self:flex-start;width:40px;height:40px;border-radius:50%;border:2px dashed #c9b28d;background:#fff;color:#d8c8ae;display:flex;align-items:center;justify-content:center;transition:background .25s,border-color .25s,color .25s,transform .3s var(--spring)}
.tick:hover{border-color:var(--ok);color:#7dbb95}.tick[aria-pressed=true]{background:var(--ok);border:2px solid var(--ok);color:#fff;transform:scale(1.08)}.tick .ic{width:20px;height:20px;stroke-width:3}
.step.done{background:#f1f8f3;box-shadow:0 0 0 2px #bfe0cb}.step.done .num{background:var(--ok);transform:rotate(-10deg)}
.chipfx{position:fixed;width:9px;height:5px;border-radius:2px;z-index:400;pointer-events:none;animation:chipfly 1s cubic-bezier(.2,.7,.4,1) forwards}
@keyframes chipfly{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}
details.prd{margin-top:10px}details.prd summary{cursor:pointer;color:var(--ordd);font-weight:800;font-size:.92rem;list-style:none;display:inline-flex;align-items:center;gap:6px;background:#fff8f1;border:1px solid #f0d9c3;border-radius:999px;padding:6px 13px;transition:background .2s}
details.prd summary:hover{background:#fdebd8}details.prd summary::-webkit-details-marker{display:none}details.prd[open] summary{background:var(--ink);color:#fff;border-color:var(--ink)}
.prompt{position:relative;background:var(--ink2);border-radius:12px;padding:14px;margin-top:10px;animation:fadeup .35s var(--ease)}.prompt pre{margin:0 0 10px;white-space:pre-wrap;color:#ece7de;font:14px/1.5 ui-monospace,Menlo,Consolas,monospace}
.copy{background:var(--ord);color:#fff;border:0;border-radius:8px;padding:7px 15px;font-weight:800;font-size:.85rem;transition:background .2s}.copy:hover{background:var(--ordd)}.copy.ok{background:var(--ok);display:inline-block;width:auto}
.careful{background:#fff6ed;border:2px solid #f1c79d;border-radius:var(--r);padding:6px 18px 8px;margin:26px 0}.careful h2{display:flex;align-items:center;gap:8px;color:var(--warn);font-size:1.15rem;margin:12px 0 4px}.careful li{margin:6px 0}
details.more{border-top:1px solid var(--line);padding:12px 0}details.more summary{cursor:pointer;font-weight:800;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px}details.more summary::-webkit-details-marker{display:none}
details.more summary:after{content:"+";flex:none;font-family:var(--display);width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);display:flex;align-items:center;justify-content:center;transition:transform .3s var(--spring),background .2s}
details.more[open] summary:after{transform:rotate(45deg);background:var(--birch)}details.more p,details.more li{color:var(--muted);font-size:.95rem}
.askcard{display:flex;align-items:center;gap:14px;margin:30px 0 14px;background:linear-gradient(135deg,#1d1f23,#2b241d);color:#e7dccb;border-radius:var(--r);padding:14px 16px;text-decoration:none;line-height:1.35;transition:transform .3s var(--ease),box-shadow .3s}
.askcard b{color:#fff;display:block;font-family:var(--display);font-weight:400;font-size:1.15rem}.askcard small{display:inline-block;margin-top:4px;font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;background:#fff3cc;color:#6b4e00;padding:2px 6px;border-radius:5px}
.ac-av{flex:none;width:56px;height:56px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px var(--orl)}.ac-av img{display:block;width:100%;height:100%}.askcard:hover .ac-av{animation:bob 1.2s ease-in-out infinite}
.ac-go{margin-left:auto;flex:none;width:38px;height:38px;border-radius:50%;background:var(--or);color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .3s var(--spring)}.askcard:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(0,0,0,.25)}.askcard:hover .ac-go{transform:translateX(4px)}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.pn-a{display:flex;flex-direction:column;gap:2px;background:#fff;border-radius:14px;padding:12px 14px;text-decoration:none;color:var(--ink);box-shadow:var(--sh);transition:transform .3s var(--ease),box-shadow .3s}.pn-a.nx{text-align:right}
.pn-a small{color:var(--ord);font-weight:800;font-size:.78rem}.pn-a b{font-size:.95rem;line-height:1.25}.pn-a:hover{transform:translateY(-3px);box-shadow:0 0 0 2px var(--or),var(--sh2)}
.upd{color:var(--muted);font-size:.88rem;margin-top:18px}
.two{display:grid;grid-template-columns:1fr;gap:12px;margin:18px 0}@media(min-width:680px){.two{grid-template-columns:1fr 1fr}}
.box{background:#fff;border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh);transition:transform .3s var(--ease)}.box:hover{transform:translateY(-3px)}.box h2{font-size:1.05rem;margin:8px 0 6px}.box p,.box ul{margin:0}
.gminis{display:grid;gap:8px}.gmini{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:700;background:#fff;border-radius:12px;padding:9px 44px 9px 10px;box-shadow:var(--sh);transition:transform .2s}.gmini:hover{transform:translateX(4px)}
.about-logo{max-width:100%;height:auto}
.ticks{list-style:none;padding:0}.ticks li{padding-left:30px;position:relative;margin:9px 0}.ticks li:before{content:"✓";position:absolute;left:2px;top:2px;width:20px;height:20px;border-radius:50%;background:#e2f2e8;color:var(--ok);font-weight:900;font-size:.8rem;display:flex;align-items:center;justify-content:center}
.form{display:grid;gap:12px;background:#fff;border-radius:var(--r);padding:18px;box-shadow:var(--sh)}.form label{display:grid;gap:4px;font-weight:700}
.form input,.form select,.form textarea{font:inherit;padding:11px 12px;border:1.5px solid var(--line);border-radius:10px;background:#fff;transition:border-color .2s,box-shadow .2s}.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--or);box-shadow:0 0 0 4px rgba(200,116,44,.15)}.form .btn{justify-self:start}
.aq{margin:18px 0 6px;padding:14px 18px;border-left:5px solid var(--or);background:#fff;border-radius:0 12px 12px 0}.aq p{margin:0;font-family:var(--serif);font-style:italic;font-size:1.35rem;line-height:1.3}.aq footer{color:var(--muted);font-size:.9rem;margin-top:6px}

/* ---------- start here: flip cards + words ---------- */
.tips{padding:46px 0;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.flips{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(min-width:900px){.flips{grid-template-columns:repeat(4,1fr);gap:16px}}
.flip{display:block;width:100%;height:200px;padding:0;border:0;background:transparent;perspective:900px;text-align:left}
.fl-in{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s var(--spring)}
.flip[aria-pressed=true] .fl-in{transform:rotateY(180deg)}
.fl-f,.fl-b{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;border-radius:18px;padding:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:var(--sh)}
.fl-f{background:var(--bg);color:var(--ink)}.fl-f .ic{color:var(--or)}.fl-f b{font-family:var(--display);font-weight:400;font-size:1.1rem;line-height:1.15}.fl-f small{margin-top:auto;color:var(--ord);font-weight:800;font-size:.78rem}
.fl-n{font:800 .7rem/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--ord)}
.fl-b{background:var(--ink);color:#e7dccb;transform:rotateY(180deg);font-size:.95rem;line-height:1.4}.fl-b b{color:var(--orl);font-family:var(--display);font-weight:400}
.flip:hover .fl-f{box-shadow:0 0 0 2px var(--or),var(--sh2)}
@media(max-width:400px){.flip{height:220px}.fl-f,.fl-b{padding:13px}.fl-b{font-size:.9rem}}
.words{padding:46px 0}
.wgrid{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px}@media(min-width:700px){.wgrid{grid-template-columns:1fr 1fr}}@media(min-width:1000px){.wgrid{grid-template-columns:1fr 1fr 1fr}}
.word{background:#fff;border-radius:14px;box-shadow:var(--sh);transition:box-shadow .3s;align-self:start}
.word summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:13px 16px;font-weight:800;font-size:1.02rem;border-radius:14px}.word summary::-webkit-details-marker{display:none}
.word summary:after{content:"?";width:26px;height:26px;border-radius:50%;background:var(--birch);color:var(--ordd);font-family:var(--display);display:flex;align-items:center;justify-content:center;transition:transform .4s var(--spring),background .2s}
.word[open]{box-shadow:0 0 0 2px var(--or),var(--sh)}.word[open] summary:after{content:"✓";background:var(--or);color:#fff;transform:rotate(360deg)}
.word p{margin:0;padding:0 16px 14px;color:var(--muted);animation:fadeup .35s var(--ease)}

/* ---------- Ask Barry page ---------- */
.ab-head{padding:22px 0 32px}.ab-head-in{display:flex;gap:16px;align-items:center}
.ab-av{flex:none;width:110px}
.ab-head .ptitle{margin-bottom:6px}.ab-head .sub{margin:0;font-size:1rem}
@media(min-width:800px){.ab-av{width:170px}.ab-head-in{gap:28px}.ab-head{padding:30px 0 42px}}
.ab-wrap{max-width:860px;padding-bottom:20px}
.demo-banner{display:flex;gap:10px;align-items:flex-start;background:#fff3cc;color:#4d3a00;border:2px solid #f2c14e;border-radius:14px;padding:11px 14px;margin:20px 0 14px;font-size:.95rem;line-height:1.4}.demo-banner .ic{margin-top:2px;color:#8a6500}
.chat{display:flex;flex-direction:column;background:#fff;border-radius:22px;box-shadow:var(--sh2);overflow:hidden;height:min(78svh,720px);min-height:480px}
.chat-top{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--ink);color:#fff}
.ct-av{width:40px;height:40px;border-radius:50%;overflow:hidden;flex:none;box-shadow:0 0 0 2px var(--orl)}.ct-av img{display:block}
.ct-n{display:flex;flex-direction:column;line-height:1.2;margin-right:auto}.ct-n small{color:#b9c0c7;font-size:.76rem;display:flex;align-items:center;gap:6px}
.dot{width:8px;height:8px;border-radius:50%;background:#f2c14e;animation:dotp 2s infinite}@keyframes dotp{0%{box-shadow:0 0 0 0 rgba(242,193,78,.6)}70%,100%{box-shadow:0 0 0 7px rgba(242,193,78,0)}}
.chat-reset{color:var(--peach)!important;font-size:.85rem}
.chat-log{position:relative;flex:1;overflow-y:auto;padding:16px 12px;display:flex;flex-direction:column;gap:12px;background:var(--bg);background-image:radial-gradient(rgba(200,116,44,.13) 1px,transparent 1px);background-size:18px 18px;overscroll-behavior:contain}
.msg{display:flex;gap:8px;align-items:flex-end;max-width:100%;animation:msgin .45s var(--spring)}
@keyframes msgin{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.msg.u{justify-content:flex-end}.msg.u .bub{background:var(--or);color:#fff;border-radius:18px 18px 4px 18px;max-width:82%}
.msg .bub{background:#fff;border-radius:18px 18px 18px 4px;padding:10px 14px;box-shadow:0 2px 8px rgba(60,40,20,.08);max-width:calc(100% - 46px);line-height:1.45;min-width:0}
.msg .bub p{margin:0 0 8px}.msg .bub p:last-child{margin-bottom:0}
.mav{flex:none;width:36px;height:36px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px #fff}.mav img{display:block}
.uph{display:block;max-width:180px;max-height:180px;border-radius:12px;margin:2px 0 8px;object-fit:cover}
.typing .bub{display:flex;gap:5px;padding:14px 16px}.typing .bub i{width:8px;height:8px;border-radius:50%;background:#c9bba5;animation:typ 1s infinite}.typing .bub i:nth-child(2){animation-delay:.15s}.typing .bub i:nth-child(3){animation-delay:.3s}
@keyframes typ{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-5px);opacity:1}}
.typing .mav{animation:bob 1s ease-in-out infinite}
.atags{display:flex;flex-wrap:wrap;gap:6px}.abadge,.acls{font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 8px;border-radius:6px}
.abadge{background:var(--ink);color:#fff}.acls.ok{background:#e2f2e8;color:#246640}.acls.warn{background:#fff3cc;color:#6b4e00}.acls.stop{background:#fbe1dc;color:#8e2f1d}
.aintro{font-weight:700}.asub{font-size:.85rem;color:var(--muted);font-weight:700}
.asteps{list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:6px}
.asteps li{display:flex;gap:10px;align-items:flex-start;background:var(--bg);border-radius:12px;padding:9px 11px;font-size:.95rem;animation:msgin .5s var(--ease) both;animation-delay:var(--d)}
.an{flex:none;width:24px;height:24px;border-radius:50%;background:var(--ord);color:#fff;font-family:var(--display);font-size:.8rem;display:flex;align-items:center;justify-content:center;margin-top:1px}
.gv{margin:6px 0 10px;animation:msgin .6s var(--ease) both;animation-delay:.4s}.gv figcaption{font-size:.76rem;color:var(--muted);font-weight:700;margin-top:4px}
.gv-svg{display:block;width:100%;max-width:460px;height:auto;border-radius:14px;border:1px solid var(--line)}
.gv-pin{animation:pinpop .6s var(--spring) both;animation-delay:calc(.6s + var(--d,0s));transform-box:fill-box;transform-origin:center}@keyframes pinpop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
.gv-draw{stroke-dasharray:120;stroke-dashoffset:120;animation:draw 1.4s var(--ease) 1s forwards}@keyframes draw{to{stroke-dashoffset:0}}
.gv-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px}.gv-card{position:relative;margin:0;background:var(--bg);border-radius:12px;padding:6px;font-size:.8rem;font-weight:700;line-height:1.3}
.gv-card svg{display:block;width:100%;height:auto;border-radius:10px}.gv-card figcaption{padding:6px 4px 2px}.gv-n{position:absolute;left:10px;top:10px;width:22px;height:22px;border-radius:50%;background:var(--or);color:#fff;font-family:var(--display);font-size:.75rem;display:flex;align-items:center;justify-content:center;z-index:1}
@media(min-width:700px){.gv-cards{grid-template-columns:repeat(4,1fr)}}
.awarn{background:#fff6ed;border:1.5px solid #f1c79d;border-radius:12px;padding:9px 11px;font-size:.92rem}.awarn.stop{background:#fdecea;border-color:#efb3a8}
.anote{font-size:.86rem;color:var(--muted)}.anote.ph{background:#eef1f5;border-radius:10px;padding:7px 10px;color:#34506f}
.fb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);font-size:.86rem;font-weight:700;color:var(--muted)}
.fbb{width:42px;height:38px;border-radius:10px;border:1.5px solid var(--line);background:#fff;font-size:1.1rem;transition:transform .25s var(--spring),background .2s,border-color .2s}.fbb:hover:not(:disabled){transform:scale(1.12) rotate(-6deg);border-color:var(--or)}
.fbb[aria-pressed=true]{background:#fff4e8;border-color:var(--or);transform:scale(1.1)}.fbb:disabled:not([aria-pressed=true]){opacity:.4}.fbt{flex:1 1 100%;color:var(--ink);font-weight:600;animation:fadeup .3s}
.chat-chips{display:flex;gap:8px;overflow-x:auto;padding:10px 12px 4px;background:#fff;border-top:1px solid var(--line);scrollbar-width:none}.chat-chips::-webkit-scrollbar{display:none}.chat-chips:empty{padding:0;border:0}
.chip-q{flex:none;border:1.5px solid var(--or);background:#fff8f1;color:var(--ordd);border-radius:999px;padding:8px 14px;font-weight:800;font-size:.88rem;animation:msgin .4s var(--spring) both;transition:background .2s,color .2s}.chip-q:hover{background:var(--or);color:#fff}
.chip-q:nth-child(2){animation-delay:.05s}.chip-q:nth-child(3){animation-delay:.1s}.chip-q:nth-child(4){animation-delay:.15s}.chip-q:nth-child(5){animation-delay:.2s}.chip-q:nth-child(6){animation-delay:.25s}
.chat-in{background:#fff;padding:8px 10px 10px}
.ph-prev{display:flex;align-items:center;gap:10px;background:var(--bg);border-radius:12px;padding:6px;margin-bottom:8px;animation:fadeup .3s}.ph-prev img{width:56px;height:56px;object-fit:cover;border-radius:9px;flex:none}
.ph-prev span{display:flex;flex-direction:column;font-size:.78rem;line-height:1.3;color:var(--muted)}.ph-prev b{color:var(--ink);font-size:.86rem}
.ph-x{margin-left:auto;flex:none;width:34px;height:34px;border-radius:50%;border:0;background:#fff;font-size:1.2rem;line-height:1}
.ci-row{display:flex;align-items:flex-end;gap:8px}
.ph-btn{flex:none;display:flex;align-items:center;gap:6px;height:46px;padding:0 12px;border-radius:14px;background:var(--bg);border:1.5px solid var(--line);cursor:pointer;font-weight:800;font-size:.85rem;transition:border-color .2s,background .2s}.ph-btn:hover{border-color:var(--or)}.ph-btn:focus-within{outline:3px solid var(--orl);outline-offset:2px}
.ph-btn>span[aria-hidden]{font-size:1.25rem}.ph-l{display:none}@media(min-width:560px){.ph-l{display:inline}}
#askq{flex:1;min-width:0;resize:none;font:inherit;font-size:1rem;line-height:1.35;padding:12px 14px;border-radius:14px;border:1.5px solid var(--line);background:#fff;max-height:120px;transition:border-color .2s,box-shadow .2s}#askq:focus{outline:0;border-color:var(--or);box-shadow:0 0 0 4px rgba(200,116,44,.15)}
.send{flex:none;width:46px;height:46px;border-radius:14px;border:0;background:var(--ord);color:#fff;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s}.send:hover{background:var(--ordd)}.send:active{transform:scale(.92)}.send:disabled{opacity:.5}
.privacy-note{display:flex;gap:8px;align-items:flex-start;font-size:.86rem;color:var(--muted);margin:12px 4px}.privacy-note .ic{margin-top:3px;color:var(--ord)}
.ab-more{margin-top:34px}.ab-steps{list-style:none;margin:16px 0 30px;padding:0;display:grid;gap:10px}@media(min-width:700px){.ab-steps{grid-template-columns:repeat(3,1fr)}}
.ab-steps li{display:flex;flex-direction:column;gap:4px;background:#fff;border-radius:16px;padding:14px 16px;box-shadow:var(--sh)}.ab-steps b{font-family:var(--display);font-weight:400;font-size:1.05rem}.ab-steps span{color:var(--muted);font-size:.94rem}

/* ---------- floating Ask Barry ---------- */
.fab{position:fixed;right:14px;bottom:14px;z-index:70;display:flex;align-items:center;gap:8px;background:var(--ink);color:#fff;text-decoration:none;border-radius:999px;padding:5px 16px 5px 5px;box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 2px var(--orl);transition:transform .45s var(--spring),opacity .3s,padding .35s var(--ease)}
.js .fab{animation:fabin .7s var(--spring) 1.2s both}@keyframes fabin{from{opacity:0;transform:translateY(40px) scale(.6)}to{opacity:1;transform:none}}
.fab-av{width:46px;height:46px;border-radius:50%;overflow:hidden;flex:none}.fab-av{background:#f39a4b}.fab-img{display:block;width:100%;height:100%;transform-origin:50% 90%;animation:bwob 6s ease-in-out 2.4s infinite}
.fab-t{display:flex;flex-direction:column;font-family:var(--display);font-size:.95rem;line-height:1.05;white-space:nowrap;max-width:120px;overflow:hidden;transition:max-width .4s var(--ease),opacity .3s,margin .3s}
.fab-t small{font-family:"Archivo",sans-serif;font-weight:800;font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;color:var(--peach)}
.fab:hover{transform:translateY(-4px) scale(1.03)}.fab:hover .bb-head{animation:nod .8s ease-in-out}
@keyframes nod{30%{transform:rotate(-6deg)}60%{transform:rotate(4deg)}}
.bb-head{transform-box:fill-box;transform-origin:50% 90%}
.far .fab{padding-right:5px;gap:0}.far .fab .fab-t{max-width:0;opacity:0}.far .fab:hover,.far .fab:focus-visible{padding-right:16px;gap:8px}.far .fab:hover .fab-t,.far .fab:focus-visible .fab-t{max-width:120px;opacity:1}
.fab.away{transform:translateY(130px);opacity:0;pointer-events:none}
@media(min-width:900px){.fab{right:22px;bottom:22px}}
@keyframes blink{0%,92%,100%{transform:none}95%{transform:scaleY(.1)}}

/* ---------- footer ---------- */
.foot{position:relative;background:#16191d;color:#b9c0c7;margin-top:56px;padding:34px 0 24px;font-size:.92rem}.foot:before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px;background:var(--ply)}
.foot-in{display:grid;gap:24px}.foot-brand img{max-width:100%;height:auto}.foot-brand p{margin:10px 0 0;max-width:40ch}
.foot-col{display:flex;flex-direction:column;gap:6px}.foot-col b{color:#fff;font-family:var(--display);font-weight:400;margin-bottom:4px}
.foot a{color:#f0b07a;text-decoration:none}.foot a:hover{text-decoration:underline}.foot-col a{word-break:break-word;padding:2px 0}
.foot-end{margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}.totop{font-weight:800}
body:not(.askpage) .foot-end{padding-bottom:64px}
@media(min-width:760px){.foot-in{grid-template-columns:1.6fr 1fr 1fr 1fr}body:not(.askpage) .foot-end{padding-bottom:0}}

/* ---------- reduced motion: no movement, everything visible ---------- */
@media (prefers-reduced-motion: reduce){
 *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
 html{scroll-behavior:auto}
 .js [data-rv],.js .steps .step{opacity:1;transform:none}.js .h-big .w>span,.js .gh-t .w>span,.js .ptitle .w>span{transform:none}
 .dust,.cur{display:none}.tk-track{animation:none!important}.ticker{overflow-x:auto}.tk-track.clone{display:none}
 .js .pj-fig:not(.in) .pjA,.js .pj-fig:not(.in) .pjB{transform:none}.js .pj-fig:not(.in) .pjJ,.js .pj-fig:not(.in) .pjC,.js .pj-fig:not(.in) .pj-l,.js .pj-fig:not(.in) .pj-out{opacity:1}
 .nav-ab,.fab-img,.bt-av,.barry,.typing .mav{animation:none!important}
}
@media print{.top,.fab,.hero-fx,.ticker,.news,.cur{display:none!important}}

/* ---------- hero paths (round 2) ---------- */
.paths{display:grid;gap:10px;max-width:520px}
@media(min-width:520px){.paths{grid-template-columns:1fr 1fr}}
.path-b{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:10px;text-decoration:none;border-radius:16px;padding:13px 16px 14px;transition:transform .25s var(--ease),background .2s,border-color .2s,box-shadow .25s}
.path-b small{grid-column:1;font-size:.84rem;font-weight:700;line-height:1.2}
.path-b b{grid-column:1;font-family:var(--display);font-weight:400;font-size:1.12rem;line-height:1.15;margin-top:2px}
.path-b .ic{grid-column:2;grid-row:1/3;width:20px;height:20px;transition:transform .3s var(--spring)}
.path-b:hover .ic{transform:translateX(4px)}.path-b:active{transform:scale(.98)}
.p-new{background:var(--ord);color:#fff}.p-new small{color:#ffe2c8}.p-new:hover{background:var(--ordd);box-shadow:0 10px 26px rgba(168,90,23,.35)}
.p-pro{background:rgba(255,255,255,.06);color:#fff;border:1.5px solid rgba(243,154,75,.55)}.p-pro small{color:var(--peach)}.p-pro:hover{background:rgba(243,154,75,.14);border-color:var(--orl)}

/* ---------- know the trade (round 2) ---------- */
.share{position:relative;background:linear-gradient(160deg,#23272d 0%,#16191d 70%);color:#fff;padding:56px 0 60px;overflow:hidden}
.share:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(243,154,75,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(243,154,75,.07) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:radial-gradient(70% 80% at 85% 20%,#000,transparent);mask-image:radial-gradient(70% 80% at 85% 20%,#000,transparent);pointer-events:none}
.share-in{position:relative;display:grid;gap:26px}
.share .h2{color:#fff}.share .lead{color:#e0d6c6;max-width:58ch}
.sh-flow{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:f;position:relative}
.sh-flow li{position:relative;display:grid;grid-template-columns:34px 1fr;column-gap:12px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:12px 14px;transition:background .25s,border-color .25s,transform .3s var(--ease)}
.sh-flow li:hover{background:rgba(243,154,75,.12);border-color:rgba(243,154,75,.5);transform:translateX(4px)}
.sh-flow li span{grid-row:1/3;width:34px;height:34px;border-radius:50%;background:var(--or);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:.95rem;box-shadow:0 0 0 4px rgba(200,116,44,.2)}
.sh-flow li b{font-weight:800;font-size:.98rem;line-height:1.25}.sh-flow li small{color:#c9c0b2;font-size:.85rem}
.sh-flow li+li:before{content:"";position:absolute;left:30px;top:-11px;width:2px;height:10px;background:var(--orl)}
.sh-cards{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sh-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;height:100%;box-sizing:border-box;background:#fff;color:var(--ink);text-decoration:none;border-radius:var(--r);padding:18px;box-shadow:0 18px 40px rgba(0,0,0,.25);transition:transform .3s var(--ease),box-shadow .3s}
.sh-card:hover{transform:translateY(-5px);box-shadow:0 24px 50px rgba(0,0,0,.35)}
.sh-card b{font-family:var(--display);font-weight:400;font-size:1.15rem}.sh-card>span:not(.sh-ic){color:var(--muted);font-size:.95rem;flex:1}
.sh-card em{font-style:normal;font-weight:800;color:var(--ordd);display:inline-flex;align-items:center;gap:6px}.sh-card em .ic{transition:transform .3s var(--spring)}.sh-card:hover em .ic{transform:translateX(4px)}
.sh-ic{width:44px;height:44px;border-radius:14px;background:var(--birch);color:var(--ordd);display:flex;align-items:center;justify-content:center;transition:transform .45s var(--spring)}.sh-card:hover .sh-ic{transform:rotate(-8deg) scale(1.08)}
.nobr{white-space:nowrap;font-weight:700;color:var(--ink)}
.sh-soon{margin:0;color:#e0d6c6;font-size:.95rem}.sh-soon a{color:var(--peach);font-weight:700}
.soon{display:inline-block;background:#fff3cc;color:#6b4e00;font-weight:800;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:6px;margin-right:6px}
@media(min-width:760px){.sh-cards{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.share-in{grid-template-columns:1.15fr 1fr;column-gap:56px;align-items:center}.sh-cards,.sh-soon{grid-column:1/-1}}

.h-big .ln{white-space:nowrap}@media(min-width:900px){.h-big{font-size:clamp(3.4rem,5.3vw,4.7rem)}}
.phero .sub a,.ghero .sub a,.ab-head .sub a,.share a:not(.sh-card){color:var(--peach);font-weight:700}

/* ================= LEARN (round 3) ================= */
/* animation utilities for Learn art: still picture = end state; plays when wrapper gets .on */
.an{transform-box:fill-box}
.an-out{opacity:0}
.js .on .an{animation-duration:var(--t,.9s);animation-delay:var(--d,0s);animation-fill-mode:both;animation-timing-function:var(--ease)}
.js .on .an-in{animation-name:an-in}.js .on .an-out{animation-name:an-out}.js .on .an-drop{animation-name:an-drop;animation-timing-function:var(--spring)}
.js .on .an-slide{animation-name:an-slide}.js .on .an-draw{animation-name:an-draw}
.js .on .an-loop{animation-name:an-loop;animation-iteration-count:infinite;animation-direction:alternate;animation-timing-function:ease-in-out}
.js .on .an-spin{animation:an-spin 2.4s linear infinite;transform-box:view-box}
@keyframes an-in{from{opacity:0}to{opacity:1}}@keyframes an-out{from{opacity:1}to{opacity:0}}
@keyframes an-drop{from{opacity:0;transform:translateY(var(--y,-40px))}to{opacity:1;transform:none}}
@keyframes an-slide{from{transform:translate(var(--x,0),var(--y,0))}to{transform:none}}
@keyframes an-draw{from{stroke-dasharray:0 1}to{stroke-dasharray:1 0}}
@keyframes an-loop{from{transform:none}to{transform:translate(var(--x,0),var(--y,0))}}
@keyframes an-spin{to{transform:rotate(360deg)}}
.lx-svg,.card-svg,.qz-svg{display:block;width:100%;height:auto}

/* hero art + check banner */
.lh-art{width:130px;justify-self:end;filter:drop-shadow(0 14px 24px rgba(0,0,0,.35));animation:float 5s ease-in-out infinite}.lh-art svg{border-radius:16px}
@media(max-width:799px){.lh-art{display:none}}
@media(min-width:800px){.lh-art{width:220px}}
.lhero .chips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}.lhero .crumb a{color:var(--peach)}
.lcheck{display:flex;gap:10px;align-items:flex-start;background:#fff3cc;border:2px solid #f2c14e;color:#4a3a00;border-radius:14px;padding:12px 14px;margin:24px 0 0;font-size:.95rem}.lcheck .ic{flex:none;margin-top:2px;color:#8a6500}
.lsec{padding:44px 0}.lsec:nth-of-type(even){background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lsec.tips{background:#fff}

/* hub cards */
.lcards{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px}@media(min-width:700px){.lcards{grid-template-columns:1fr 1fr}}@media(min-width:1100px){.lcards{grid-template-columns:repeat(4,1fr)}}
.lcard{position:relative;overflow:hidden;display:flex;flex-direction:column;height:100%;box-sizing:border-box;background:#fff;border-radius:22px;box-shadow:var(--sh);color:var(--ink);text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s}
a.lcard:hover{transform:translateY(-6px);box-shadow:var(--sh2)}
.lc-art{display:block;padding:12px 12px 0}.lc-art svg{border-radius:14px}
.lc-b{display:flex;flex-direction:column;gap:6px;padding:14px 18px 20px}.lc-b b{font-family:var(--display);font-weight:400;font-size:1.4rem;line-height:1.1}
.lc-k{font:800 .74rem/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--ord)}
.lc-d{color:var(--muted);font-size:.95rem}.lc-m{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.lcard .ggo{top:auto;bottom:18px;margin:0;width:34px;height:34px}a.lcard:hover .ggo{background:var(--or);color:#fff;transform:translateX(3px)}
.lcard .cd-b{transition:transform .6s var(--spring)}a.lcard:hover .cd-b{transform:translate(8px,0)}.lcard .cd-r{transition:transform .8s var(--ease)}a.lcard:hover .cd-r{transform:translateX(30px)}
.lcard.is-soon{background:transparent;box-shadow:none;border:2px dashed #cdbfa8}.lcard.is-soon .lc-art{opacity:.55;filter:grayscale(.6)}.lcard.is-soon .soon{align-self:flex-start}
.why{background:var(--ink);color:#fff;border-radius:24px;padding:26px 22px;display:grid;gap:18px;position:relative;overflow:hidden}
.why:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(243,154,75,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(243,154,75,.08) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:radial-gradient(80% 90% at 90% 10%,#000,transparent);mask-image:radial-gradient(80% 90% at 90% 10%,#000,transparent);pointer-events:none}
.why-big{position:relative;font-family:var(--display);font-size:clamp(1.5rem,5vw,2.2rem);line-height:1.1;margin:0}
.why .sh-flow{position:relative}
@media(min-width:900px){.why{grid-template-columns:1fr 1.1fr;align-items:center;padding:36px}}
.sug{background:linear-gradient(150deg,#23272d,#16191d);color:#fff;border-radius:24px;padding:24px 22px;display:grid;gap:14px}.sug .h2{color:#fff;margin-bottom:6px}.sug p{color:#e0d6c6;margin:0}
.sug-b{display:flex;flex-wrap:wrap;gap:10px}
.btn.ghost2{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}.btn.ghost2:hover{background:rgba(255,255,255,.1);border-color:#fff;box-shadow:none}
@media(min-width:900px){.sug{grid-template-columns:1.4fr 1fr;align-items:center;padding:32px}}
.lsec.lsug,.lsec.lbarry{background:transparent!important;border:0!important;padding:26px 0}
.lbarry .askcard{margin-top:0}.qchips.light-bg span{color:var(--muted)}.qchips.light-bg a{color:var(--ordd);background:#fff8f1;border-color:#f0d9c3}.qchips.light-bg a:hover{background:var(--or);border-color:var(--or);color:#fff}
.lbarry .demo-note{color:var(--muted)}

/* step player */
.lx{margin-top:18px}
.lx-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.lx-play{display:inline-flex;align-items:center;gap:6px;font-weight:800}.lx.playing .lx-play .ic{animation:pulse 1s ease-in-out infinite}
.lx-count{margin:0;font-weight:700;color:var(--muted);font-size:.92rem}.lx-count b{color:var(--ink)}
.lx-grid{display:grid;gap:12px}
.lx-nav{list-style:none;margin:0;padding:4px 2px 8px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}.lx-nav::-webkit-scrollbar{display:none}
.lx-tab{flex:none;scroll-snap-align:center;display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:var(--bg);border-radius:999px;padding:6px 14px 6px 6px;font-weight:800;font-size:.9rem;color:var(--ink);text-align:left;transition:background .25s,color .25s,border-color .25s}
.lx-tab .n{flex:none;width:28px;height:28px;border-radius:50%;background:#fff;color:var(--ord);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:.85rem;transition:background .25s,color .25s,transform .4s var(--spring)}
.lx-tab .t{white-space:nowrap}
.lx-tab:hover{border-color:var(--ink)}.lx-tab[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff}.lx-tab[aria-selected=true] .n{background:var(--or);color:#fff;transform:rotate(-8deg) scale(1.05)}
.lx-stage{background:#fff;border-radius:22px;box-shadow:var(--sh);padding:12px;position:relative}
.lx-panel{display:grid;gap:14px}.js .lx-panel:not(.is-on){display:none}.js .lx-panel.is-on{animation:fadeup .4s var(--ease)}
.lx-art{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#f8f1e5;background-image:linear-gradient(rgba(47,91,128,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(47,91,128,.07) 1px,transparent 1px);background-size:20px 20px}
.lx-txt{padding:2px 6px 4px}.lx-k{font:800 .74rem/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--ord);margin:0 0 6px}
.lx-txt h3{font-family:var(--display);font-weight:400;font-size:1.45rem;line-height:1.1;margin:0 0 8px}.lx-txt>p{margin:0 0 10px}
.lx-check,.lx-warn{display:flex;gap:8px;align-items:flex-start;border-radius:12px;padding:10px 12px;font-size:.95rem}.lx-check .ic,.lx-warn .ic{flex:none;margin-top:3px}
.lx-check{background:#eef7f1;color:#1f4f33}.lx-check .ic{color:var(--ok)}
.lx-warn{background:#fdece7;color:#7a2a18}.lx-warn .ic{color:var(--warn)}
.lx-ctl{display:flex;align-items:center;gap:10px;margin-top:12px}
.lx-prev,.lx-next{flex:none;border:0;border-radius:12px;padding:10px 16px;font-weight:800;background:var(--ord);color:#fff;transition:background .2s,transform .2s}.lx-prev{background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.lx-prev:hover:not(:disabled){box-shadow:inset 0 0 0 1.5px var(--ink)}.lx-next:hover:not(:disabled){background:var(--ordd)}.lx-prev:disabled,.lx-next:disabled{opacity:.4;cursor:default}
.lx-bar{flex:1;height:6px;border-radius:3px;background:var(--birch);overflow:hidden}.lx-bar i{display:block;height:100%;background:var(--or);transform-origin:left;transform:scaleX(.1);transition:transform .5s var(--ease)}
html:not(.js) .lx-ctl,html:not(.js) .lx-top{display:none}
@media(min-width:900px){.lx-grid{grid-template-columns:260px 1fr;gap:20px;align-items:start}.lx-nav{flex-direction:column;overflow:visible;padding:0}.lx-tab{width:100%}.lx-tab .t{white-space:normal}
 .lx-panel{grid-template-columns:1.15fr 1fr;align-items:center;gap:22px}.lx-stage{padding:16px}}
@keyframes pulse{50%{transform:scale(1.25)}}

/* mistakes */
.mx{margin-top:18px;display:grid;gap:12px}
.mx-tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none}.mx-tabs::-webkit-scrollbar{display:none}
.mx-tab{flex:none;display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px 6px 6px;font-weight:800;font-size:.92rem;color:var(--ink);transition:background .25s,color .25s,border-color .25s}
.mx-dot{width:24px;height:24px;border-radius:50%;background:#fbe1da;color:var(--warn);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:.8rem}
.mx-tab:hover{border-color:var(--ink)}.mx-tab[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff}.mx-tab[aria-selected=true] .mx-dot{background:var(--warn);color:#fff}
.mx-stage{background:var(--bg);border-radius:22px;padding:12px;border:1px solid var(--line)}
.mx-panel{display:grid;gap:14px}.js .mx-panel:not(.is-on){display:none}.js .mx-panel.is-on{animation:fadeup .4s var(--ease)}
.mx-art{border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.mx-art .mb,.mx-art .mf{transition:opacity .5s var(--ease),transform .6s var(--spring);transform-box:fill-box;transform-origin:center}
.mx-art .mf{opacity:0;transform:scale(.96)}.mx-art.fixed .mf{opacity:1;transform:none}.mx-art.fixed .mb{opacity:0}
html:not(.js) .mx-art .mf{opacity:0}
.mx-txt{padding:2px 6px 4px}.mx-txt h3{font-family:var(--display);font-weight:400;font-size:1.4rem;margin:0 0 8px}
.mx-txt dl{margin:0 0 12px;display:grid;gap:4px}.mx-txt dt{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--warn);margin-top:6px}.mx-txt dt.dt-ok{color:var(--ok)}.mx-txt dd{margin:0;font-weight:600}
.mx-fix .s2{display:none}.mx-fix[aria-pressed=true]{background:var(--ok)}.mx-fix[aria-pressed=true] .s1{display:none}.mx-fix[aria-pressed=true] .s2{display:inline}
.js .mx-fixtxt{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}.js .mx-fixtxt>dl{overflow:hidden;margin:0}.js .show .mx-fixtxt{grid-template-rows:1fr}.js .show .mx-fixtxt>dl{margin-top:12px}
html:not(.js) .mx-fix{display:none}
@media(min-width:900px){.mx-panel{grid-template-columns:1.15fr 1fr;align-items:center;gap:22px}.mx-stage{padding:16px}}

/* quiz */
.qz{margin-top:18px;background:#fff;border-radius:22px;box-shadow:var(--sh);padding:18px;max-width:820px}
.qz-prog{margin:0 0 12px;font-weight:700;color:var(--muted);font-size:.92rem}.qz-prog b{color:var(--ink)}
.js .qz-round:not(.is-on),.js .qz-end:not(.is-on){display:none}.js .qz-round.is-on,.js .qz-end.is-on{animation:fadeup .4s var(--ease)}
.qz-round+.qz-round{margin-top:24px}.js .qz-round+.qz-round{margin-top:0}
.qz-q{font-family:var(--display);font-size:1.2rem;margin:0 0 12px;display:flex;align-items:center;gap:10px}.qz-n{font:800 .74rem/1 ui-monospace,Menlo,monospace;background:var(--ink);color:#fff;padding:5px 8px;border-radius:6px}
.qz-pic{max-width:420px;margin:0 0 12px}.qz-pic .jx-art{display:block}
.qz-opts{display:grid;gap:10px}.qz-opts:not(.pics){grid-template-columns:1fr}@media(min-width:600px){.qz-opts:not(.pics){grid-template-columns:repeat(3,1fr)}}
.qz-opts.pics{grid-template-columns:1fr 1fr}
.qz-o{position:relative;overflow:hidden;border:2px solid var(--line);background:var(--bg);border-radius:14px;padding:12px 14px;font-weight:800;font-size:1rem;color:var(--ink);text-align:left;transition:border-color .2s,background .2s,transform .25s var(--spring)}
.qz-o:hover:not(:disabled){border-color:var(--ink);transform:translateY(-2px)}.qz-o:disabled{cursor:default}
.qz-o.pic{display:flex;flex-direction:column;gap:8px;padding:8px}.qz-o.pic svg{border-radius:10px;background:#fff}.qz-o.pic span{padding:0 4px 4px;font-size:.9rem;line-height:1.25}
.qz-o.right{border-color:var(--ok);background:#eef7f1}.qz-o.wrong{border-color:var(--warn);background:#fdece7;animation:shake .45s}
.qz-o.right:after,.qz-o.wrong:after{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;animation:pop .4s var(--spring)}
.qz-o.right:after{content:"✓";background:var(--ok)}.qz-o.wrong:after{content:"✕";background:var(--warn)}
.qz-o.pic.right:after{content:"✓ the mistake";width:auto;padding:0 9px;border-radius:999px;font-size:.78rem}
.qz-why{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:var(--bg)}.js .qz-why{display:none}.js .is-done .qz-why{display:block;animation:fadeup .35s var(--ease)}.is-done.is-right .qz-why{background:#eef7f1}
.qz-next{margin-top:12px}.js .qz-next{display:none}.js .is-done .qz-next{display:inline-flex}html:not(.js) .qz-next,html:not(.js) .qz-end,html:not(.js) .qz-prog{display:none}
.qz-big{font-family:var(--display);font-size:1.8rem;margin:0 0 6px}.qz-big b{color:var(--ord)}
@keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

/* checklist */
.ck{margin-top:18px;background:#fff;border-radius:22px;box-shadow:var(--sh);padding:18px;max-width:820px}
.ck-top{display:flex;align-items:center;gap:12px;margin-bottom:8px}.ck-prog{margin:0;font-weight:800;white-space:nowrap}.ck-bar{flex:1;height:8px;border-radius:4px;background:var(--birch);overflow:hidden}.ck-bar i{display:block;height:100%;background:var(--ok);transform-origin:left;transform:scaleX(0);transition:transform .45s var(--spring)}
.ck ul{list-style:none;margin:0;padding:0}.ck li+li{border-top:1px solid var(--line)}
.ck label{display:flex;align-items:center;gap:12px;padding:12px 4px;cursor:pointer;font-weight:600}
.ck input{position:absolute;opacity:0;width:1px;height:1px}
.ck-box{flex:none;width:28px;height:28px;border-radius:9px;border:2px dashed #c9b28d;display:flex;align-items:center;justify-content:center;color:transparent;transition:background .25s,border-color .25s,transform .3s var(--spring)}
.ck input:checked+.ck-box{background:var(--ok);border:2px solid var(--ok);color:#fff;transform:rotate(-6deg) scale(1.05)}.ck input:checked~span:last-child{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(47,125,79,.5)}
.ck input:focus-visible+.ck-box{outline:3px solid var(--orl);outline-offset:2px}
.ck-done{display:none;margin:12px 0 0;padding:12px 14px;border-radius:12px;background:#eef7f1;color:#1f4f33;font-weight:800;align-items:center;gap:8px}.ck.all .ck-done{display:flex;animation:pop .5s var(--spring)}

/* chooser */
.ch{margin-top:18px}.ch-btns{display:flex;flex-wrap:wrap;gap:8px}
.ch-b{position:relative;overflow:hidden;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:9px 15px;font-weight:800;font-size:.92rem;color:var(--ink);transition:background .25s,color .25s,border-color .25s,transform .2s}
.ch-b:hover{border-color:var(--ink)}.ch-b[aria-pressed=true]{background:var(--or);border-color:var(--or);color:#fff}
.ch-ans{margin-top:14px;background:#fff;border-radius:18px;box-shadow:var(--sh);padding:16px 18px;max-width:820px}.ch-ans p{margin:0 0 10px}
.js .ch-a:not(.is-on){display:none}.js .ch-a.is-on{animation:fadeup .35s var(--ease)}html:not(.js) .ch-a+.ch-a{border-top:1px solid var(--line);padding-top:10px}
.ch-js{display:flex;flex-wrap:wrap;gap:8px}.ch-j{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:#fff;text-decoration:none;font-weight:800;border-radius:999px;padding:7px 13px;font-size:.9rem;transition:background .2s,transform .2s}.ch-j:hover{background:var(--ord);transform:translateY(-2px)}

/* safety */
.safe-box{background:#fff6ed;border:2px solid #f1c79d;border-radius:22px;padding:20px}
.safe-list{list-style:none;margin:14px 0 10px;padding:0;display:grid;gap:10px}@media(min-width:760px){.safe-list{grid-template-columns:1fr 1fr}}
.safe-list li{display:flex;flex-direction:column;gap:2px;background:#fff;border-radius:14px;padding:12px 14px 12px 44px;position:relative;box-shadow:0 1px 0 var(--line)}
.safe-list li:before{content:"!";position:absolute;left:12px;top:12px;width:22px;height:22px;border-radius:50%;background:var(--warn);color:#fff;font-family:var(--display);font-size:.8rem;display:flex;align-items:center;justify-content:center}
.safe-list b{font-weight:800}.safe-list span{color:#4b3a30;font-size:.95rem}
.lsec.lsafe{background:transparent!important;border:0!important}
.sh-flow.light li{background:rgba(255,255,255,.06)}
.alink{margin:8px 0 0}.alink a{font-weight:800;color:var(--ordd)}

@media (prefers-reduced-motion: reduce){.an,.lh-art,.lx.playing .lx-play .ic{animation:none!important}.js .on .an{animation:none!important}.mx-art .mb,.mx-art .mf{transition:none}}
@media(max-width:699px){.lcard{flex-direction:row;align-items:flex-start}.lc-art{flex:none;width:112px;padding:14px 0 14px 14px}.lc-b{padding:14px 16px 52px 14px}.lc-b b{font-size:1.25rem}.lcard.is-soon .lc-b{padding-bottom:16px}}
/* ---------- LEARN round 4: Fixing to walls ---------- */
.an-turn{transform-box:fill-box;transform-origin:center}.js .on .an-turn{animation-name:an-turn;animation-timing-function:var(--spring)}
@keyframes an-turn{from{transform:rotate(var(--r,90deg))}to{transform:none}}
.slink{color:var(--ordd);font-weight:700;font-size:.92em;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}.slink:after{content:" ↗";font-size:.85em}
.draft-tag{display:inline-block;margin:6px 0 4px;background:#f2c14e;color:#3a2c00;font-weight:800;font-size:.85rem;border-radius:8px;padding:5px 10px;background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.07) 0 8px,transparent 8px 16px)}
.draft-tag.sm{font-size:.72rem;padding:3px 8px;margin:4px 0 2px;align-self:flex-start}
.draft-bar{margin:20px 0 0;background:#fff3cc;border:2px dashed #c99a14;border-radius:14px;padding:12px 14px;color:#3a2c00;font-size:.95rem}.draft-bar b{display:block;font-size:1.02rem;margin-bottom:2px}.draft-bar a{color:var(--ordd);font-weight:800}
.lrule{padding:24px 0 6px}
.rule{display:flex;gap:14px;align-items:flex-start;background:var(--warn);color:#fff;border-radius:22px;padding:20px 18px;box-shadow:0 10px 30px rgba(181,70,47,.28);position:relative;overflow:hidden}
.rule:before{content:"";position:absolute;inset:0 0 auto;height:8px;background:repeating-linear-gradient(135deg,#f2c14e 0 14px,#16191d 14px 28px)}
.rule-ic{flex:none;width:52px;height:52px;border-radius:50%;background:#fff;color:var(--warn);display:flex;align-items:center;justify-content:center;margin-top:6px}.rule-ic .ic{width:30px;height:30px}
.rule-k{margin:6px 0 2px;font:800 .74rem/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:#ffd9cf}
.rule-t{margin:0;font-family:var(--display);font-size:clamp(1.45rem,5.6vw,2.4rem);line-height:1.08}
.rule-s{margin:8px 0 10px;color:#ffe9e3;max-width:62ch}
.rule-a{display:inline-flex;align-items:center;gap:6px;color:#fff;font-weight:800;border-bottom:2px solid #fff;text-decoration:none;padding:4px 0}
.safe-list li.is-pro{background:#fff;box-shadow:inset 0 0 0 2px #f1b8a8}
.safe-list em.pro{font-style:normal;align-self:flex-start;display:inline-flex;gap:6px;align-items:center;margin-top:6px;background:var(--ink);color:#fff;border-radius:8px;padding:4px 9px;font-weight:800;font-size:.8rem}.safe-list em.pro .ic{color:#f2c14e}
.safe-list .more-link{align-self:flex-start;margin-top:4px;font-size:.92rem}
/* wall picker */
.wp{margin-top:18px;background:#fff;border-radius:24px;box-shadow:var(--sh);padding:14px}
.wp-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}@media(min-width:900px){.wp-tiles{grid-template-columns:repeat(6,1fr)}}
.wp-tile{display:flex;flex-direction:column;align-items:center;gap:6px;border:2px solid var(--line);background:var(--bg);border-radius:16px;padding:10px 6px;font-weight:800;font-size:.9rem;line-height:1.15;text-align:center;color:var(--ink);transition:transform .25s var(--spring),border-color .2s,background .2s}
.wp-tile:hover{transform:translateY(-2px);border-color:var(--or)}
.wp-tile[aria-selected=true]{background:var(--ink);color:#fff;border-color:var(--ink)}.wp-tile[aria-selected=true] .wp-ic{background:#fff}
.wp-ic{width:44px;height:44px;border-radius:12px;background:#fff;padding:6px}
.wp-unsure{display:flex;align-items:center;gap:8px;margin:10px 2px 0;font-weight:800;color:var(--ordd);text-decoration:none;width:max-content;max-width:100%}.wp-unsure:hover span:nth-child(2){text-decoration:underline}
.wp-q{width:26px;height:26px;border-radius:50%;background:var(--birch);display:flex;align-items:center;justify-content:center;font-family:var(--display)}
.wp-stage{margin-top:12px}.js .wp-panel:not(.is-on){display:none}.wp-panel+.wp-panel{margin-top:28px}.js .wp-panel+.wp-panel{margin-top:0}
.js .wp-panel.is-on{animation:fadeup .4s var(--ease)}
.wp-top{display:grid;gap:14px}@media(min-width:860px){.wp-top{grid-template-columns:1.1fr 1fr;align-items:start}}
.wp-art{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#f8f1e5;background-image:linear-gradient(rgba(47,91,128,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(47,91,128,.07) 1px,transparent 1px);background-size:20px 20px}
.wp-art svg{display:block;width:100%;height:auto}.wp-art figcaption{font-size:.78rem;color:var(--muted);padding:0 12px 8px}
.wp-k{margin:0;font:800 .72rem/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--ord)}
.wp-sum h3{font-family:var(--display);font-weight:400;font-size:1.45rem;margin:6px 0 6px;line-height:1.1}.wp-sum>p{margin:0 0 10px}
.wp-drill{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;border-radius:14px;padding:10px 12px;margin:0 0 10px;font-size:.93rem}
.wp-dm{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 11px;font-size:.95rem;color:#fff}
.wp-drill.is-ham{background:#fbeed9}.wp-drill.is-ham .wp-dm{background:var(--ord)}
.wp-drill.no-ham{background:#eef1f5}.wp-drill.no-ham .wp-dm{background:#34506f}
.wp-never,.wp-pro{display:flex;gap:8px;align-items:flex-start;margin:0 0 10px;border-radius:12px;padding:10px 12px;font-weight:700;font-size:.94rem;background:#fdece7;color:#7a2a18;border:2px solid #f1b8a8}.wp-never .ic,.wp-pro .ic{flex:none;margin-top:3px;color:var(--warn)}
.wp-pro{background:#16191d;color:#fff;border-color:#16191d}.wp-pro .ic{color:#f2c14e}
.wp-cards{display:grid;gap:10px;margin-top:14px}@media(min-width:860px){.wp-cards{grid-template-columns:repeat(3,1fr)}}
.wp-card{background:var(--bg);border-radius:16px;padding:14px}.wp-card h4,.wp-data h4{margin:0 0 6px;font-size:1rem;font-weight:800}
.wc-watch{background:#fdf1ec}.wc-watch h4{color:var(--warn)}
.wp-ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:.95rem}.wp-ul li::marker{color:var(--or)}
.wp-data{margin-top:10px;border:1.5px dashed var(--line);border-radius:16px;padding:12px 14px}.wp-data ul{margin:0 0 6px;padding-left:18px;display:grid;gap:4px}.wp-data .small{margin:4px 0 0}
.wp-scan{display:flex;gap:8px;align-items:center;margin-top:12px;background:var(--warn);color:#fff;font-weight:800;border-radius:12px;padding:11px 14px;text-decoration:none}.wp-scan span{flex:1}.wp-scan .ic{flex:none}
/* finder */
.fd-checks{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}@media(min-width:900px){.fd-checks{grid-template-columns:repeat(5,1fr)}}
.fd-checks li{background:#fff;border-radius:14px;box-shadow:0 1px 0 var(--line);padding:12px 14px;display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:start}
.fd-checks li span:last-child{grid-column:2;color:var(--muted);font-size:.92rem}
.fd-n{grid-row:span 2;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--display);display:flex;align-items:center;justify-content:center;font-size:.85rem}
.fd{margin-top:16px;background:#fff;border-radius:22px;box-shadow:var(--sh);padding:18px;max-width:860px}
.fd-h{margin:0 0 8px;font-family:var(--display);font-size:1.2rem}
.fd-q{display:flex;gap:10px;align-items:flex-start;font-weight:800;margin:10px 0 8px}.fd-qn{flex:none;width:26px;height:26px;border-radius:8px;background:var(--or);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:.85rem}
.fd-if{font-style:normal;font-weight:600;color:var(--muted)}.js .fd-if{display:none}
.fd-a1{display:flex;flex-wrap:wrap;gap:8px}
.fd-b{border:2px solid var(--line);background:var(--bg);border-radius:12px;padding:11px 14px;font-weight:800;text-align:left;color:var(--ink);transition:border-color .2s,background .2s,transform .25s var(--spring)}
.fd-b:hover{border-color:var(--or)}.fd-b[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.fd-opts{list-style:none;margin:0;padding:0;display:grid;gap:8px}.fd-opts .fd-b{width:100%}
.fd-res{padding:10px 4px 4px}.js .fd-s2:not(.is-on){display:none}.js .fd-opts li:not(.is-on) .fd-res{display:none}
.js .fd-opts li.is-on .fd-res{animation:fadeup .35s var(--ease)}
.fd-r{margin:0 0 8px}.fd-reset{margin-top:12px;display:none}.js .fd.step2 .fd-reset{display:inline-block}
html:not(.js) .fd-reset,html:not(.js) .fd-go{display:none}
.fd-stop{margin-top:14px;max-width:860px}
/* cabinets */
.cab-warn{display:flex;gap:12px;align-items:flex-start;background:#fdece7;border:2px solid var(--warn);color:#5e2112;border-radius:18px;padding:14px 16px;margin:14px 0 0;max-width:900px}.cab-warn>.ic{flex:none;color:var(--warn);width:28px;height:28px}.cab-warn b{display:block;font-size:1.1rem;color:var(--warn)}
.cab-grid{display:grid;gap:16px;margin-top:16px;align-items:start}@media(min-width:900px){.cab-grid{grid-template-columns:1fr 1fr}}
.cab-grid .ck{margin-top:0}
.cab-art{margin:0;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#fff}.cab-art svg{display:block;width:100%;height:auto}.cab-art figcaption{font-size:.78rem;color:var(--muted);padding:0 12px 8px}
.cab-cards{display:grid;gap:12px;margin-top:16px}@media(min-width:900px){.cab-cards{grid-template-columns:repeat(3,1fr)}}
.cab-card{background:#fff;border-radius:18px;box-shadow:var(--sh);padding:16px}.cab-card h3{margin:0 0 8px;font-size:1.08rem;font-weight:800}
/* sources */
.srcs{margin-top:14px;background:#fff;border-radius:18px;box-shadow:var(--sh)}.srcs summary{cursor:pointer;padding:14px 16px;font-weight:800}
.src-grid{display:grid;gap:14px;padding:0 16px 16px}@media(min-width:800px){.src-grid{grid-template-columns:1fr 1fr}}
.src-g h3{font-size:.95rem;margin:0 0 4px}.src-g ul{margin:0;padding-left:18px;display:grid;gap:4px;font-size:.93rem}
@media (prefers-reduced-motion: reduce){.js .wp-panel.is-on,.js .fd-opts li.is-on .fd-res{animation:none}.wp-tile{transition:none}}

/* ================= LEARN round 5: Curves ================= */
/* an-orbit: turns from --r back to 0 around a set point = moves along a circle. still picture = end */
.an-orbit{transform-box:view-box}.js .on .an-orbit{animation-name:an-orbit;animation-timing-function:cubic-bezier(.45,.05,.35,1)}
@keyframes an-orbit{from{transform:rotate(var(--r,180deg))}to{transform:none}}
.rt-bad{display:none}.rt.wrong .rt-bad{display:inline}.rt.wrong .rt-ok{display:none}
.rt-svg .rt-bad{display:none}.rt.wrong .rt-svg .rt-bad{display:inline}.rt.wrong .rt-svg .rt-ok{display:none}
.js .rt.wrong .on .an-shake{animation:an-shake .5s 1.1s 2 ease-in-out;transform-box:view-box}
@keyframes an-shake{0%,100%{transform:none}25%{transform:translate(-5px,2px) rotate(-2deg)}75%{transform:translate(5px,-2px) rotate(2deg)}}
.rt{margin-top:16px;background:#fff;border-radius:24px;box-shadow:var(--sh);padding:16px}
.rt-top{display:grid;gap:10px}@media(min-width:860px){.rt-top{grid-template-columns:1fr auto;align-items:center}}
.rt-say{margin:0;font-size:1.02rem;border-radius:14px;padding:12px 14px;background:#e8f3ec;border:2px solid #b8dcc6}.rt.wrong .rt-say{background:#fdece7;border-color:#f1b8a8}
.rt-say .ic{vertical-align:-3px}.rt-okb{color:#1f6b42}.rt-badb{color:#9a3420}
.rt-btns{margin:0;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.rt-wrong .s2{display:none}.rt-wrong[aria-pressed=true] .s1{display:none}.rt-wrong[aria-pressed=true] .s2{display:inline}.rt-wrong[aria-pressed=true]{background:var(--warn)}
html:not(.js) .rt-btns{display:none}
.rt-grid{display:grid;gap:12px;margin-top:12px}@media(min-width:760px){.rt-grid{grid-template-columns:1fr 1fr}}
.rt-art,.kf-art,.kf-r{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#f8f1e5}
.rt-art svg,.kf-art svg,.kf-r svg{display:block;width:100%;height:auto}.rt-art figcaption,.kf-art figcaption{font-size:.78rem;color:var(--muted);padding:0 12px 8px}
.rt-tips{margin:12px 0 0;padding-left:18px;display:grid;gap:6px;font-size:.95rem}.rt-tips li::marker{color:var(--or)}
.wp{scroll-margin-top:80px}.wp-5{grid-template-columns:repeat(2,1fr)}.wp-5 .wp-tile:last-child{grid-column:span 2}
@media(min-width:600px){.wp-5{grid-template-columns:repeat(3,1fr)}.wp-5 .wp-tile:last-child{grid-column:auto}}
@media(min-width:900px){.wp-tiles.wp-5{grid-template-columns:repeat(5,1fr)}}
.wp-lv{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.lmeth .wp-cards{align-items:start}@media(min-width:860px){.lmeth .wp-cards{grid-template-columns:1fr 1.4fr 1fr}}
.wp-ol{padding-left:22px}.wp-ol li::marker{font-weight:800}
.rad{margin-top:12px;background:#fbf3e4;border-radius:16px;padding:14px;scroll-margin-top:80px}.rad h4{margin:0 0 4px;font-size:1.05rem;font-weight:800}.rad>p{margin:0 0 10px;font-size:.95rem}
.rad-wrap{overflow-x:auto;border-radius:12px;background:#fff;border:1px solid var(--line)}.rad-wrap:focus-visible{outline:3px solid var(--or)}
.rad-t{width:100%;border-collapse:collapse;font-size:.9rem;min-width:520px}.rad-t th,.rad-t td{text-align:left;vertical-align:top;padding:9px 10px;border-bottom:1px solid var(--line)}
.rad-t thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:#faf7f2}.rad-t tbody th{font-weight:800}.rad-t tr:last-child>*{border-bottom:0}
.rad-lesson{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;font-weight:800;color:#7a2a18}.rad-lesson .ic{flex:none;margin-top:3px}
@media(max-width:599px){.rad-t{min-width:0}.rad-t thead{display:none}.rad-t tr{display:block;padding:10px;border-bottom:1px solid var(--line)}.rad-t tr:last-child{border-bottom:0}.rad-t th,.rad-t td{display:block;padding:2px 0;border:0}}
.fd-a3{display:grid;gap:8px}@media(min-width:700px){.fd-a3{grid-template-columns:repeat(3,1fr)}}
.fd-ic{display:flex;align-items:center;gap:10px}.fd-ic .wp-ic{flex:none}.fd-ic span{display:grid;gap:2px}.fd-ic small{font-weight:600;color:var(--muted);font-size:.85rem}
.fd-ic[aria-pressed=true] small{color:#d9dde2}
.fd-rt{display:flex;gap:8px;align-items:flex-start;margin:0 0 10px;background:var(--warn);color:#fff;font-weight:800;border-radius:12px;padding:9px 12px;font-size:.92rem}.fd-rt .ic{flex:none;margin-top:2px}
.pk-tight{display:flex;gap:8px;align-items:flex-start;max-width:860px;margin:14px 0 0;background:#fbeed9;border-radius:14px;padding:12px 14px}.pk-tight .ic{flex:none;margin-top:3px;color:var(--ord)}
.pk-tight a{color:var(--ordd);font-weight:800}.pk-note{max-width:860px}
.kf{margin-top:16px;background:#fff;border-radius:24px;box-shadow:var(--sh);padding:16px}
.kf-grid{display:grid;gap:14px}@media(min-width:860px){.kf-grid{grid-template-columns:1.2fr 1fr;align-items:start}}
.kf-txt .wp-ul{font-size:1rem}.kf-play{margin-top:12px}html:not(.js) .kf-play{display:none}
.kf-h{font-size:1.05rem;font-weight:800;margin:16px 0 8px}
.kf-res{display:grid;gap:10px;grid-template-columns:1fr}@media(min-width:520px){.kf-res{grid-template-columns:repeat(3,1fr)}}
.kf-r figcaption{font-size:.85rem;font-weight:700;padding:0 10px 10px}
.kf-cap{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;font-size:.92rem}.kf-cap .ic{flex:none;margin-top:3px;color:var(--ord)}
.gv-an svg{display:block;width:100%;max-width:460px;height:auto;border-radius:14px;border:1px solid var(--line);background:#f8f1e5}
.gv-2{grid-template-columns:1fr 1fr!important}.gv-card .mx-art{display:block}
@media (prefers-reduced-motion: reduce){.js .on .an-orbit,.js .rt.wrong .on .an-shake{animation:none!important}}
@media(max-width:519px){.kf-r{display:grid;grid-template-columns:44% 1fr;align-items:center}.kf-r figcaption{padding:10px 12px 10px 4px}}

/* ================= round 6: raster logo ================= */
picture{display:contents}.foot-logo img,.about-logo img{display:block;max-width:100%;height:auto}
.pj-q footer .pj-qmark img{display:block;width:62px;height:auto;flex:none}
.ab-mark img{display:block;width:87px;height:auto;margin-bottom:6px}
.pj-logo img{display:block;width:min(560px,86vw);height:auto;margin:0 auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}
.pj-logo img{transition:opacity .9s var(--ease),transform 1.1s var(--spring)}.js .pj-fig:not(.in) .pj-logo img{opacity:0;transform:translateY(18px) scale(.98)}
.pj-fig .pj-human{left:0;top:62%;transform:translateY(-50%)}.pj-fig .pj-ai{left:auto;right:0;top:62%;transform:translateY(-50%)}
@media(min-width:700px) and (max-width:1059px){.pj-fig{display:grid;grid-template-columns:1fr 1fr;row-gap:16px;column-gap:24px}.pj-fig .pj-labels{display:contents}.pj-fig .pj-l{position:static;transform:none;grid-row:1}.pj-fig .pj-human{grid-column:1;justify-self:end}.pj-fig .pj-ai{grid-column:2;justify-self:start}.pj-logo img{grid-column:1/-1;grid-row:2;width:min(520px,70vw)}.pj-fig .pj-out{grid-column:1/-1;grid-row:3;justify-self:center}}
@media(max-width:699px){.pj-fig .pj-logo img{grid-column:1/-1;grid-row:2}.pj-fig picture.pj-logo{display:contents}}
@media (prefers-reduced-motion: reduce){.pj-logo img{transition:none}.js .pj-fig:not(.in) .pj-logo img{opacity:1;transform:none}.logo-img img{transition:none}}
.logo{flex-shrink:0}.logo-img img{max-width:none;aspect-ratio:199/44}
@media(max-width:400px){.logo-img img,.top.scrolled .logo-img img{height:40px}}
@media(max-width:380px){.logo-img img,.top.scrolled .logo-img img{height:36px}}
.narrow .about-logo img{margin:32px 0 24px;width:min(330px,100%)}

/* round 7: Barry Biscuit raster art */
@keyframes bwob{0%,78%,100%{transform:rotate(0)}83%{transform:rotate(-7deg)}88%{transform:rotate(5deg)}93%{transform:rotate(-3deg)}}
.bt-av,.ac-av,.ct-av,.mav,.pk-b .bimg{background:#f39a4b}
.bt-av img,.ac-av img,.ct-av img,.mav img{display:block;width:100%;height:100%}
.ac-body .ac-av{width:92px;height:auto;border-radius:0;overflow:visible;box-shadow:none;background:none}.ac-body .ac-av img{height:auto;filter:drop-shadow(0 6px 8px rgba(0,0,0,.18))}
.msg.is-careful .mav{box-shadow:0 0 0 2px #fff,0 0 0 4px #e0b23a}
.w-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}.w-av{flex:none;width:96px}.w-av img{display:block;width:100%;height:auto}
@media(min-width:700px){.w-av{width:130px}}
.nf-av{display:block;width:150px;margin:6px 0 8px}.nf-av img{display:block;width:100%;height:auto}

/* round 7b */
.meet-tag{position:relative;left:50%;bottom:auto;transform:translateX(-50%);display:inline-block;margin-top:16px}
@media(min-width:700px){.ac-body .ac-av{width:130px}}
.js .nav-ab-m{flex-shrink:0}
@media(max-width:400px){.logo-img img,.top.scrolled .logo-img img{height:38px}}
@media(max-width:380px){.logo-img img,.top.scrolled .logo-img img{height:36px}}

/* ---- Round 9: quick start + first-visit welcome card ---- */
.qs{padding:48px 0 18px}
.qs .h2:focus{outline:none}.qs .h2:focus-visible{outline:3px solid var(--or);outline-offset:4px;border-radius:6px}
.qs-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.qs-step{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start;background:#fff;border-radius:var(--r);padding:16px 16px 16px 14px;text-decoration:none;color:var(--ink);box-shadow:var(--sh);height:100%;transition:transform .25s var(--ease),box-shadow .25s}
.qs-step:hover,.qs-step:focus-visible{transform:translateY(-3px);box-shadow:var(--sh2)}
.qs-n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ord);color:#fff;font-family:var(--display);font-size:1.05rem}
.qs-t{display:grid;gap:4px}.qs-t b{font-size:1.08rem}.qs-t small{color:var(--muted);font-size:.95rem;line-height:1.45}
.qs-go{display:inline-flex;align-items:center;gap:6px;color:var(--ordd);font-weight:800;font-size:.95rem;margin-top:4px}
.qs-roles{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.qs-role{background:var(--birch);border-radius:14px;padding:12px 14px}
.qs-role b{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.qs-role span{display:flex;flex-wrap:wrap;gap:8px}
.qs-role a{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border-radius:999px;background:#fff;border:1.5px solid var(--line);color:var(--ordd);font-weight:700;text-decoration:none;font-size:.95rem}
.qs-role a:hover,.qs-role a:focus-visible{border-color:var(--or);background:#fff7ee}
@media(min-width:700px){.qs-steps{grid-template-columns:repeat(2,1fr)}.qs-roles{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.qs-steps{grid-template-columns:repeat(4,1fr)}}
.wcard{position:fixed;left:12px;right:12px;bottom:12px;z-index:80;display:grid;grid-template-columns:48px 1fr 32px;gap:12px;align-items:start;background:var(--ink);color:#fff;border-radius:18px;padding:14px;box-shadow:0 18px 50px rgba(0,0,0,.4);opacity:0;transform:translateY(24px);transition:opacity .25s,transform .35s var(--ease)}
.wcard.in{opacity:1;transform:none}
.wc-av img,.wc-av picture{display:block;width:48px;height:48px}
.wc-h{margin:0 0 4px;font-weight:800;font-size:1.05rem}.wc-p{margin:0 0 10px;font-size:.95rem;color:#e6dccd;line-height:1.45}
.wc-b{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0}.wc-b .btn{padding:10px 16px}
.wc-skip{background:none;border:0;color:#f0b07a;text-decoration:underline;font-weight:700;padding:10px 6px;min-height:40px}
.wc-x{background:none;border:0;color:#fff;width:32px;height:32px;display:grid;place-items:center;border-radius:8px;padding:0}
.wc-x:hover,.wc-x:focus-visible{background:var(--ink3)}
.wcard :focus-visible{outline:3px solid var(--orl);outline-offset:2px}
.wc-open .fab{transform:translateY(130px);opacity:0;pointer-events:none}
@media(min-width:700px){.wcard{left:auto;right:22px;bottom:22px;max-width:420px}}
@media(prefers-reduced-motion:reduce){.wcard{transition:none;transform:none}.qs-step{transition:none}}
@media(max-width:640px){.h-big .ln:first-child{white-space:normal}}