:root{--coral-x:#B4332A;--coral:#EF5A4C;--coral-d:#CC3D31;--plum:#2B2130;--yellow:#FFC93C;--cream:#FFF6EE;--ink:#2B2130;--mut:#6B5F70;--line:#EADFD5;--green:#1E7A4F;--red:#B3362B}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:Montserrat,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-weight:500;font-size:17px;line-height:1.55;color:var(--ink);background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:var(--coral-d)}
h1,h2,h3{line-height:1.15;margin:0 0 .5em;font-weight:800;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(30px,5.2vw,50px);font-weight:900}
h2{font-size:clamp(24px,3.6vw,34px);text-align:center}
h3{font-size:19px}
p{margin:0 0 1em}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px}
.center{text-align:center}
.left{text-align:left}
[hidden]{display:none!important}

/* header */
.top{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px}
.logo{font-weight:800;color:var(--plum);text-decoration:none;font-size:17px;white-space:nowrap}
.logo b{color:var(--coral);font-weight:900}
.nav{display:flex;gap:22px}
.nav a{color:var(--plum);text-decoration:none;font-weight:700;font-size:15px}
.nav a:hover{color:var(--coral-d)}
.back{font-weight:700;font-size:15px;text-decoration:none}
.mnav{display:none;position:relative}
.mnav summary{list-style:none;cursor:pointer;font-weight:800;border:2px solid var(--plum);border-radius:999px;padding:6px 16px;font-size:14px}
.mnav summary::-webkit-details-marker{display:none}
.mnav div{position:absolute;right:0;top:46px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 30px rgba(43,33,48,.18);padding:8px;min-width:210px}
.mnav div a{display:block;padding:11px 14px;color:var(--plum);text-decoration:none;font-weight:700;border-radius:8px}
.mnav div a:hover{background:var(--cream)}
@media(max-width:860px){.nav{display:none}.mnav{display:block}}

/* buttons */
.btn{display:inline-block;background:var(--coral);color:#fff;text-decoration:none;font-weight:800;padding:13px 24px;border-radius:999px;border:2px solid var(--coral);font-size:16px;line-height:1.2;text-align:center;transition:transform .12s,background .12s}
.btn:hover{background:var(--coral-d);border-color:var(--coral-d);transform:translateY(-1px)}
.btn.big{padding:16px 30px;font-size:18px}
.btn.wide{display:block;width:100%}
.btn.dark{background:var(--plum);border-color:var(--plum)}
.btn.dark:hover{background:#000;border-color:#000}
.btn.ghost{background:transparent;color:var(--plum);border-color:var(--plum)}
.btn.ghost:hover{background:var(--plum);color:#fff}
.btn.light{background:#fff;color:var(--plum);border-color:#fff}
.btn.light:hover{background:var(--cream);border-color:var(--cream)}
.note{font-size:14px;color:var(--mut)}
.go{font-weight:800;color:var(--coral-d);text-decoration:none}

/* hero */
.hero{background:var(--coral);color:#fff;padding:54px 0 60px}
.hero.small{padding:40px 0 44px}
.hero h1 b{color:var(--yellow);font-weight:900}
.hero .lead{font-size:clamp(17px,2.2vw,20px);max-width:36em}
.hero .note{color:#fff;opacity:.92}
.hero .btn{background:var(--plum);border-color:var(--plum)}
.hero .btn:hover{background:#000;border-color:#000}
.hero .btn.light{background:#fff;border-color:#fff;color:var(--plum)}
.hero .btn.light:hover{background:var(--cream)}
.kick{text-transform:uppercase;letter-spacing:.12em;font-weight:800;font-size:13px;margin:0 0 10px;color:var(--yellow)}
.kick.dark{color:var(--coral-d)}
.lead{font-size:19px}
.lead.dark{color:var(--mut)}
.two{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.optin{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:22px 0 14px}
.optin .note{flex-basis:100%;margin:0}
.proof{font-size:14px;opacity:.95;border-left:3px solid var(--yellow);padding-left:12px;max-width:34em;margin-top:18px}
.bubbles{position:relative}
.bubbles .lab{text-transform:uppercase;letter-spacing:.14em;font-weight:800;font-size:12px;color:var(--yellow);margin:0 0 10px}
.bub{background:#fff;color:var(--plum);font-weight:800;font-size:17px;padding:11px 18px;border-radius:20px 20px 20px 5px;display:table;margin:0 0 10px;box-shadow:0 5px 0 rgba(43,33,48,.16)}
.bub.b2,.bub.b4{margin-left:44px}
.bub.b3{margin-left:14px}
.bub.b5{margin-left:26px}
.hand{font-family:"Caveat Brush",cursive;font-size:34px;line-height:1;color:var(--yellow);transform:rotate(-3deg);margin:16px 0 0 30px;display:table}
.sheet{border-radius:10px;box-shadow:0 18px 40px rgba(43,33,48,.35);transform:rotate(2deg);max-width:320px;margin:0 auto}
@media(max-width:860px){.two{grid-template-columns:1fr;gap:28px}.hero{padding:36px 0 40px}.bub{font-size:15px}}

/* sections */
.sec{padding:56px 0}
.sec.first{padding-top:36px}
.sec.alt{background:var(--cream)}
.sub{text-align:center;color:var(--mut);margin:-4px auto 26px;max-width:40em}
.sub.left{text-align:left;margin:-4px 0 0}

/* problem tiles */
.probs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.prob{display:block;background:var(--cream);border:2px solid var(--line);border-radius:16px;padding:18px;text-decoration:none;color:var(--plum);transition:border-color .12s,transform .12s}
.prob:hover{border-color:var(--coral);transform:translateY(-2px)}
.prob b{display:block;font-weight:800;font-size:17px;margin-bottom:4px}
.prob b::after{content:"\00a0→";color:var(--coral-d)}
.prob span{font-size:14px;color:var(--mut);line-height:1.4;display:block}
.prob.all{background:var(--plum);border-color:var(--plum);color:#fff}
.prob.all span{color:#E7DDEA}
.prob.all b::after{color:var(--yellow)}
@media(max-width:900px){.probs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.prob{padding:14px}.prob b{font-size:15px}.prob span{font-size:13px}}

/* featured pair */
.start2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.feat{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;text-decoration:none;color:var(--plum);box-shadow:0 6px 18px rgba(43,33,48,.06)}
.feat img{border-radius:6px;box-shadow:0 8px 18px rgba(43,33,48,.22)}
.feat p{font-size:15px;color:var(--mut)}
.feat:hover{border-color:var(--coral)}
@media(max-width:860px){.start2{grid-template-columns:1fr}}
@media(max-width:460px){.feat{grid-template-columns:104px 1fr;gap:14px;padding:16px}.feat .btn{padding:10px 16px;font-size:15px}}

/* product cards */
.tag{display:inline-block;align-self:flex-start;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;padding:4px 10px;border-radius:999px;background:var(--cream);color:var(--plum);margin-bottom:8px;border:1px solid var(--line)}
.tag.t-free{background:#E4F4EA;border-color:#BFE3CD;color:var(--green)}
.tag.t-course{background:var(--plum);border-color:var(--plum);color:var(--yellow)}
.tag.t-book{background:#FDE3DF;border-color:#F8C4BD;color:#A8281D}
.pc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--plum);box-shadow:0 4px 14px rgba(43,33,48,.05);transition:transform .12s,box-shadow .12s,border-color .12s}
.pc:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(43,33,48,.13);border-color:var(--coral)}
.pimg{background:var(--cream);padding:18px 18px 0;display:flex;justify-content:center;align-items:flex-end;aspect-ratio:1/1;overflow:hidden}
.pimg img{height:100%;width:auto;border-radius:5px 5px 0 0;box-shadow:0 8px 20px rgba(43,33,48,.25)}
.pimg .cv{height:100%;border-radius:8px 8px 0 0}
.pb{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.pb h3{font-size:17px;margin-bottom:6px}
.pb p{font-size:14px;color:var(--mut);line-height:1.45;margin-bottom:12px}
.pf{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.price{font-weight:900;font-size:19px}
.price.free{color:var(--green)}
.price.sm{font-size:12px;font-weight:800;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
.price.soon{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;background:var(--yellow);padding:4px 10px;border-radius:999px}
.pf .go{font-size:14px;white-space:nowrap}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:980px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.grid{grid-template-columns:repeat(2,1fr);gap:12px}.pb{padding:12px}.pb h3{font-size:15px}.pb p{font-size:13px}.pimg{padding:12px 12px 0}}

/* course covers */
.cv{aspect-ratio:480/621;background:var(--plum);color:#fff;padding:9% 9%;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 8px 20px rgba(43,33,48,.25);container-type:inline-size;position:relative;overflow:hidden}
.cv::before{content:"";position:absolute;right:-22%;bottom:-16%;width:70%;aspect-ratio:1;border-radius:50%;background:var(--coral);opacity:.9}
.cv span{font-size:6cqw;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:var(--yellow);position:relative}
.cv b{font-size:12.5cqw;line-height:1.08;font-weight:900;position:relative}
.cv i{font-size:5.4cqw;font-style:normal;font-weight:700;opacity:.92;position:relative}
.cv2::before,.cv5::before{background:var(--yellow)}
.cv3{background:#1F2A44}.cv4{background:#3B2A4A}.cv6{background:#3A2B2B}
.cv2 span,.cv5 span{color:var(--coral)}

/* shelves */
.shelfhead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:0 0 18px}
.shelf + .shelfhead{margin-top:52px}
.shelfhead h2{margin-bottom:8px}
.more{font-weight:800;text-decoration:none;white-space:nowrap;font-size:15px}
.shelf{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);gap:16px;overflow-x:auto;padding:4px 20px 16px;margin:0 -20px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.shelf .pc{scroll-snap-align:start}
@media(max-width:700px){.shelf{grid-auto-columns:62vw}.shelfhead{align-items:flex-start;flex-direction:column;gap:2px}}
@media(min-width:1161px){.shelf{grid-auto-columns:minmax(0,1fr);overflow:visible}
.shelf.courses{grid-auto-flow:row;grid-template-columns:repeat(3,1fr)}.shelf.courses .pimg{aspect-ratio:auto;padding:0;display:block}
.shelf.courses .cv{aspect-ratio:2.3/1;width:100%;height:auto;border-radius:0;box-shadow:none;padding:5% 6%}
.shelf.courses .cv span{font-size:3.1cqw}.shelf.courses .cv b{font-size:7.2cqw;max-width:72%}.shelf.courses .cv i{font-size:3cqw}
.shelf.courses .cv::before{width:36%;right:-7%;bottom:-42%}
.shelf.n3{grid-auto-flow:row;grid-template-columns:repeat(4,1fr)}.shelf.n4{grid-auto-flow:row;grid-template-columns:repeat(4,1fr)}}

/* filters */
.filters{background:var(--cream);border-radius:18px;padding:18px 18px 8px;margin-bottom:18px}
.flab{font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.1em;margin:0 0 8px;color:var(--mut)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chip{font:inherit;font-weight:700;font-size:14px;background:#fff;border:2px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer;color:var(--plum)}
.chip:hover{border-color:var(--coral)}
.chip.on{background:var(--plum);border-color:var(--plum);color:#fff}
.grid + .empty + .note,.grid ~ p.note{margin-top:28px}
.count{font-weight:800;color:var(--mut);font-size:14px;margin:0 0 14px}
.empty{background:var(--cream);border-radius:14px;padding:24px;text-align:center}

/* product page */
.crumbs{font-size:14px;color:var(--mut);margin-bottom:18px}
.crumbs a{color:var(--mut);font-weight:700}
.prod{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:start}
.pcover{background:var(--cream);border-radius:20px;padding:34px;position:sticky;top:84px}
.pcover img,.pcover .cv{margin:0 auto;max-width:320px;width:100%;border-radius:6px;box-shadow:0 16px 36px rgba(43,33,48,.28)}
.pinfo h1{font-size:clamp(28px,4.4vw,42px);margin-bottom:.3em}
.facts{font-size:14px;font-weight:700;color:var(--mut)}
.buy{border:2px solid var(--plum);border-radius:18px;padding:20px;margin:18px 0 26px;background:#fff}
.buy p:last-child{margin-bottom:0}
.bigprice{font-size:34px;font-weight:900;line-height:1.1;margin-bottom:12px}
.bigprice small{font-size:14px;font-weight:700;color:var(--mut)}
.bigprice.sm{font-size:20px}
.winbox{background:var(--yellow);border-radius:14px;padding:14px 16px;margin:0 0 16px}
@media(max-width:860px){.prod{grid-template-columns:1fr;gap:22px}.pcover{position:static;padding:22px}.pcover img,.pcover .cv{max-width:200px}}

/* moments */
.moment{border:1px solid var(--line);border-radius:14px;margin-bottom:10px;background:#fff;overflow:hidden}
.moment summary{cursor:pointer;font-weight:800;padding:16px 46px 16px 18px;list-style:none;position:relative;font-size:17px}
.moment summary::-webkit-details-marker{display:none}
.moment summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:24px;color:var(--coral-d);font-weight:800}
.moment[open] summary::after{content:"–"}
.swap{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 18px 12px}
.swap div{border-radius:12px;padding:12px 14px}
.swap span{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px}
.swap p{margin:0;font-weight:700}
.say{background:#E4F4EA}.say span{color:var(--green)}
.not{background:#FDE3DF}.not span{color:var(--red)}
.why{padding:0 18px;font-size:15px;margin-bottom:10px}
.moment .why:last-child{padding-bottom:8px}
@media(max-width:520px){.swap{grid-template-columns:1fr}}

/* misc blocks */
.ticks{list-style:none;padding:0;margin:0 0 20px}
.ticks li{padding-left:30px;position:relative;margin-bottom:9px}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--green);font-weight:900;font-size:18px}
.ticks.big li{font-size:18px;margin-bottom:14px}
.bookrow{grid-template-columns:.7fr 1.3fr}
.bookimg{max-width:300px;margin:0 auto;filter:drop-shadow(0 16px 26px rgba(43,33,48,.3))}
.aboutrow{grid-template-columns:.7fr 1.3fr}
.hero .aboutrow{grid-template-columns:1.3fr .7fr}
.photo{border-radius:20px;max-width:340px;width:100%;margin:0 auto;box-shadow:0 14px 32px rgba(43,33,48,.2)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px}
.card p{color:var(--mut)}
.callout{background:var(--cream);border-radius:18px;padding:26px;margin-top:34px;text-align:center}
.callout p{max-width:38em;margin-left:auto;margin-right:auto}
.prose h1{margin-bottom:.6em}
.prose h2{margin-top:1.4em}
.prose li{margin-bottom:8px}
@media(max-width:860px){.bookrow,.aboutrow,.hero .aboutrow,.split{grid-template-columns:1fr}.bookimg{max-width:220px}.photo{max-width:260px}}

/* start page */
body.start{background:var(--coral)}
.startpg{padding:36px 0 40px;color:#fff}
.startpg h1{font-size:26px}
.startpg .wrap{max-width:460px}
.avatar{width:120px;height:120px;border-radius:50%;object-fit:cover;object-position:50% 18%;border:4px solid #fff;margin:0 auto 16px}
.startpg .btn{background:var(--plum);border-color:var(--plum)}
.startpg .btn.dark{background:var(--yellow);border-color:var(--yellow);color:var(--plum)}
.startpg .btn.light{background:#fff;border-color:#fff;color:var(--plum)}
.startpg .note,.startpg .note a{color:#fff}
body.start .foot{background:transparent;border-top:1px solid rgba(255,255,255,.35)}

/* footer */
.foot{background:var(--plum);color:#D9CEDD;padding:34px 0 40px;font-size:14px}
.foot a{color:#fff;text-decoration:none;font-weight:700}
.foot a:hover{text-decoration:underline}
.fl{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:16px}
.foot p{margin:0 0 8px}

/* ---- v2: contrast, shelves without swiping, product page details ---- */
.logo b{color:var(--coral-d)}
.btn{background:var(--coral-d);border-color:var(--coral-d)}
.btn:hover{background:var(--coral-x);border-color:var(--coral-x)}
.hero{background:var(--coral-d)}
body.start{background:var(--coral-d)}
.kick{color:#fff}
.kick.dark{color:var(--coral-d)}
.hero .note{opacity:1}
.bubbles .lab{color:#fff}
.go,.more{color:var(--coral-d)}
.by{display:flex;gap:14px;align-items:center;margin-top:22px;max-width:36em}
.byimg{width:60px;height:60px;border-radius:50%;object-fit:cover;object-position:50% 18%;border:3px solid #fff;flex:none}
.by p{margin:0;font-size:14.5px;line-height:1.45}
@media(max-width:860px){.bubbles{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.bubbles .lab{flex-basis:100%;margin-bottom:2px}
.bub,.bub.b2,.bub.b3,.bub.b4,.bub.b5{margin:0;font-size:14px;padding:8px 13px;border-radius:16px 16px 16px 4px;box-shadow:0 3px 0 rgba(43,33,48,.2)}
.hand{flex-basis:100%;font-size:28px;margin:6px 0 0;transform:rotate(-2deg)}}

/* problem tiles: white on a dark outline */
.prob{background:#fff;border:2px solid var(--plum);box-shadow:0 4px 0 var(--plum);padding:16px 16px 18px}
.prob:hover{background:var(--yellow);border-color:var(--plum);transform:translateY(-2px)}
.prob b{font-size:17px;color:var(--plum)}
.prob b::after{color:var(--coral-d)}
.prob span{color:#3F3446;font-size:14.5px;font-weight:600}
.prob.all{background:var(--plum);box-shadow:0 4px 0 var(--coral-d)}
.prob.all:hover{background:#000}
.prob.all b,.prob.all span{color:#fff}
.prob.all b::after{color:var(--yellow)}
.probs{gap:16px}

/* shelves: everything visible, no sideways swiping */
.shelf{grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;margin:0;padding:0;scroll-snap-type:none;grid-template-columns:repeat(3,1fr)}
@media(min-width:1161px){.shelf{grid-template-columns:repeat(5,1fr)}.shelf.courses{grid-template-columns:repeat(3,1fr)}.shelf.n3,.shelf.n4{grid-template-columns:repeat(4,1fr)}}
@media(max-width:700px){.shelf,.shelf.courses{grid-template-columns:1fr;gap:10px}
.shelf .pc{flex-direction:row;align-items:stretch}
.shelf .pimg{width:84px;flex:none;aspect-ratio:auto;padding:10px 0 10px 10px;background:none;align-items:center;display:flex}
.shelf .pimg img,.shelf .pimg img.wide{width:100%;height:auto;border-radius:4px;box-shadow:0 3px 8px rgba(43,33,48,.2);margin:0}
.shelf .pimg .cv{height:auto;width:100%;border-radius:4px;box-shadow:none;aspect-ratio:480/621;padding:9%}
.shelf .pimg .cv span,.shelf .pimg .cv i{display:none}
.shelf .pimg .cv b{font-size:15cqw}
.shelf .pb{padding:10px 12px;justify-content:center}
.shelf .pb p,.shelf .tag,.shelf .flag{display:none}
.shelf .pb h3{margin-bottom:6px;font-size:16px}
.shelf .pf{margin-top:0}
.prob{padding:14px 13px 16px}.prob b{font-size:16px}.prob span{font-size:13.5px}
.bub,.bub.b2,.bub.b3,.bub.b4,.bub.b5{font-size:13px;padding:7px 11px}}
.zoom{display:block;font-size:13px}

/* cards */
.pimg{position:relative}
.pimg img.wide{height:auto;width:100%;align-self:center;border-radius:6px;box-shadow:none;margin-bottom:14px}
.pcover img.wide{max-width:100%;box-shadow:none}
.flag{position:absolute;top:10px;left:10px;background:var(--yellow);color:var(--plum);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:4px 10px;border-radius:999px;box-shadow:0 2px 0 rgba(43,33,48,.25)}
.price.sm{color:#4A3F50}
.pb p{color:#55495B}

/* product page */
.trust{list-style:none;padding:0;margin:14px 0 10px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;font-weight:700}
.trust li{padding-left:22px;position:relative}
.trust li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:900}
.gallery{display:grid;gap:16px;margin:0 0 26px}
.gallery figure{margin:0}
.gallery img{border:1px solid var(--line);border-radius:12px;width:100%}
.gallery figcaption{font-size:14px;color:var(--mut);margin-top:6px}
.steps{padding:0;margin:0 0 20px;list-style:none;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:2px 0 14px 46px}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--plum);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
.pinfo h2{margin-top:1.3em}
.qa .why{padding-bottom:14px;margin:0}
.pinfo .moments{margin-bottom:20px}

/* ---- Calm Plan: questions ---- */
.quizsec{padding-top:34px}
.quiz{background:#fff;border:2px solid var(--plum);border-radius:22px;padding:22px 22px 26px;box-shadow:0 6px 0 var(--plum)}
.qbar{height:8px;background:var(--line);border-radius:99px;overflow:hidden;margin-bottom:18px}
.qbar i{display:block;height:100%;width:25%;background:var(--coral-d);border-radius:99px;transition:width .25s}
.qnum{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--coral-d);margin:0 0 6px;text-align:center}
.qstep h2{font-size:clamp(22px,3.4vw,28px);margin-bottom:16px}
.qstep .sub{margin-top:-6px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opts.one{grid-template-columns:1fr}
.opt{font:inherit;font-weight:800;font-size:16px;line-height:1.25;text-align:left;text-decoration:none;color:var(--plum);background:#fff;border:2px solid var(--plum);border-radius:14px;padding:15px 14px;cursor:pointer;display:flex;align-items:center;min-height:58px;transition:background .1s,transform .1s}
.opt:hover,.opt:focus-visible{background:var(--yellow);transform:translateY(-1px)}
.opt.other{border-style:dashed;font-weight:700}
.backb{font:inherit;font-weight:700;font-size:15px;background:none;border:0;color:var(--mut);cursor:pointer;margin-top:16px;text-decoration:underline}
.gate{display:grid;gap:12px;max-width:440px;margin:0 auto}
.gate label{font-weight:800;font-size:14px;display:grid;gap:5px}
.gate input{font:inherit;font-size:17px;padding:13px 14px;border:2px solid var(--plum);border-radius:12px;width:100%}
.gate input:focus{outline:3px solid var(--yellow);outline-offset:1px}
.gate .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.err{color:#A01F16;font-weight:700;font-size:15px;margin:0}
.by.dark{margin:22px auto 0;color:var(--plum)}
.by.dark .byimg{border-color:var(--line)}
@media(max-width:460px){.quiz{padding:18px 14px 22px}.opt{font-size:15px;padding:13px 12px}}

/* plan art (small picture of a plan) */
.planart{aspect-ratio:480/621;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 8px 20px rgba(43,33,48,.22);padding:9% 9%;display:flex;flex-direction:column;gap:5%;container-type:inline-size;height:100%}
.feat .planart{height:auto;width:100%}
.pcover .planart{max-width:320px;margin:0 auto;height:auto}
.planart span{font-size:6cqw;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--coral-d)}
.planart b{font-size:10.5cqw;line-height:1.1;font-weight:900;color:var(--plum)}
.planart i{font-style:normal;font-size:5.4cqw;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:2.5% 5%;border-radius:99px;align-self:flex-start}
.planart i.g{background:#E4F4EA;color:var(--green)}.planart i.p{background:var(--plum);color:#fff}.planart i.y{background:var(--yellow);color:var(--plum)}
.planart u{display:block;height:3.2%;min-height:4px;background:var(--line);border-radius:99px;text-decoration:none}
.planart u.s{width:62%}
@media(max-width:700px){.shelf .pimg .planart{height:auto;width:100%;padding:8%;gap:4%;box-shadow:0 3px 8px rgba(43,33,48,.2)}.shelf .pimg .planart i,.shelf .pimg .planart u{display:none}.shelf .pimg .planart b{font-size:13cqw}.shelf .pimg .planart span{font-size:9cqw}}

/* ---- Calm Plan: the plan itself ---- */
.plan h1{margin-bottom:.35em}
.plan h2{margin-top:1.25em;font-size:24px}
.notebox{background:var(--yellow);border-radius:14px;padding:14px 16px;margin:0 0 12px}
.notebox.soft{background:var(--cream);border:2px solid var(--line)}
.whybox{background:var(--cream);border-radius:14px;padding:14px 16px;margin:14px 0 0}
.says{display:grid;gap:8px}
.sayit{background:#E4F4EA;border-radius:12px;padding:13px 16px;margin:0;font-weight:800;font-size:18px}
.notit{background:#FDE3DF;border-radius:12px;padding:11px 16px;margin:8px 0 0;font-weight:700}
.notit span{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--red)}
.crosses,.arrows{list-style:none;padding:0;margin:0 0 20px}
.crosses li,.arrows li{padding-left:30px;position:relative;margin-bottom:9px}
.crosses li::before{content:"✕";position:absolute;left:2px;top:0;color:var(--red);font-weight:900}
.arrows li::before{content:"→";position:absolute;left:0;top:0;color:var(--coral-d);font-weight:900}
.docbox{border:2px solid var(--plum);border-radius:14px;padding:14px 16px;margin:22px 0 12px}
.tipbox{background:#FFE9A8;border-radius:6px;padding:16px 18px;margin:0 0 22px;font-weight:700;transform:rotate(-.6deg);box-shadow:0 6px 14px rgba(43,33,48,.12)}
.tipbox span{display:block;font-family:"Caveat Brush",cursive;font-size:26px;line-height:1;color:var(--coral-d);margin-bottom:4px;font-weight:400}
.printrow{display:flex;flex-wrap:wrap;gap:10px}
.bookimg.flat{filter:none;border-radius:6px;box-shadow:0 14px 30px rgba(43,33,48,.25);max-width:230px}
@media print{.top,.foot,.noprint{display:none!important}
body{font-size:9.6pt;line-height:1.3}.sec,.sec.first{padding:0}.wrap{padding:0;max-width:none}
.plan h1{font-size:19pt;margin-bottom:.2em}.plan .kick{margin-bottom:4pt;font-size:8pt}.plan .lead{font-size:11pt;margin-bottom:6pt}
.plan h2{font-size:12pt;margin:.55em 0 .25em;break-after:avoid}
.plan p{margin-bottom:5pt}
.notebox,.whybox,.docbox{padding:6pt 9pt;margin:0 0 5pt;border-radius:8pt}.whybox{margin-top:0}
.says{gap:3pt}.sayit{font-size:10.5pt;padding:4pt 9pt;border-radius:7pt}.notit{padding:4pt 9pt;margin-top:3pt;border-radius:7pt}.notit span{font-size:7pt}
.plan .ticks,.crosses,.arrows{margin:0 0 4pt}.plan .ticks li,.crosses li,.arrows li{margin-bottom:2.5pt;padding-left:18pt}.plan .ticks li::before{font-size:10pt}
.docbox{margin-top:8pt}.tipbox{padding:7pt 10pt;margin:0 0 6pt;transform:none;box-shadow:none}.tipbox span{font-size:15pt}
.plan .note{font-size:8pt;margin:0}
.sayit,.notit,.notebox,.whybox,.tipbox,.docbox{break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}a{color:inherit;text-decoration:none}}
@media(max-width:700px){.hero.small{padding:26px 0 30px}.hero.small .lead{font-size:16px}}

/* ---- v3: benefit first, title second ---- */
.ttl{font-size:13px;font-weight:800;color:#4A3F50;margin:-2px 0 8px}
.pb .ttl{color:#4A3F50;font-size:13px;margin:-2px 0 8px}
.feat .ttl{color:#4A3F50;font-size:14px;margin:-4px 0 8px}
.ptitle{font-weight:800;font-size:18px;color:var(--coral-d);margin:-4px 0 10px}
.heroart{display:block;width:300px;max-width:100%;margin:0 auto;transform:rotate(3deg);text-decoration:none}
.heroart .planart{height:auto;width:100%;box-shadow:0 18px 40px rgba(43,33,48,.35)}
@media(max-width:860px){.heroart{display:none}}
@media(max-width:700px){.shelf .pb p.ttl{display:block;margin:0 0 6px;font-size:13px}.shelf .pb h3{margin-bottom:3px;line-height:1.2}}

/* ---- v4: home page organised by problem ---- */
html{scroll-padding-top:76px}
.cat{padding:8px 0 44px}
.cat + .cat{border-top:2px solid var(--line);padding-top:36px}
.cat .shelfhead h2{font-size:clamp(22px,3vw,28px)}
.cats .pc{background:#fff}
@media(min-width:1161px){.shelf.n1,.shelf.n2,.shelf.n3,.shelf.n4{grid-template-columns:repeat(4,1fr)}}
.collrow{grid-template-columns:260px 1fr;margin-top:8px}
.collrow img{box-shadow:none;border-radius:10px}
.start2.one{grid-template-columns:minmax(0,600px);justify-content:center}
.heroart img{border-radius:8px;box-shadow:0 18px 40px rgba(43,33,48,.35)}
@media(max-width:700px){.collrow{grid-template-columns:1fr}.collrow img{max-width:260px}.cat{padding-bottom:30px}.cat + .cat{padding-top:26px}}

/* category lists: compact rows at every width */
.cats .shelf,.cats .shelf.courses{grid-template-columns:1fr 1fr;gap:12px}
.cats .shelf .pc{flex-direction:row;align-items:stretch}
.cats .shelf .pimg{width:104px;flex:none;aspect-ratio:auto;padding:12px 0 12px 12px;background:none;align-items:center;display:flex}
.cats .shelf .pimg img{width:100%;height:auto;border-radius:4px;box-shadow:0 3px 8px rgba(43,33,48,.2);margin:0}
.cats .shelf .pimg .cv{height:auto;width:100%;border-radius:4px;box-shadow:none;aspect-ratio:480/621;padding:9%}
.cats .shelf .pimg .cv span,.cats .shelf .pimg .cv i{display:none}
.cats .shelf .pimg .cv b{font-size:15cqw}
.cats .shelf .pb{padding:12px 14px;justify-content:center}
.cats .shelf .tag,.cats .shelf .flag{display:none}
.cats .shelf .pb h3{font-size:17px;margin-bottom:3px;line-height:1.2}
.cats .shelf .pb p{margin-bottom:8px}
.cats .shelf .pb p.ttl{display:block;margin:0 0 5px}
.cats .shelf .pf{margin-top:2px}
@media(max-width:860px){.cats .shelf,.cats .shelf.courses{grid-template-columns:1fr;gap:10px}}
@media(max-width:700px){.cats .shelf .pimg{width:84px;padding:10px 0 10px 10px}.cats .shelf .pb h3{font-size:16px}.cats .shelf .pb p:not(.ttl){display:none}}

/* ---- v5: hero with the benefits ---- */
.hgrid{display:grid;grid-template-columns:1.05fr .95fr;grid-template-areas:"text card" "btns card";gap:8px 48px;align-items:center}
.htext{grid-area:text;align-self:end}.hbtns{grid-area:btns;align-self:start;margin-top:10px}
.hcard{grid-area:card;background:#fff;color:var(--plum);border-radius:20px;padding:24px 26px 18px;box-shadow:0 8px 0 rgba(43,33,48,.28)}
.hlab{font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--coral-d);margin:0 0 12px}
.hcard ul{list-style:none;margin:0;padding:0}
.hcard li{border-top:1px solid var(--line)}
.hcard li:first-child{border-top:0}
.hcard a{display:block;position:relative;padding:11px 26px 11px 34px;color:var(--plum);text-decoration:none;font-weight:800;font-size:18px;line-height:1.25}
.hcard a::before{content:"✓";position:absolute;left:2px;top:10px;color:var(--green);font-weight:900;font-size:20px}
.hcard a::after{content:"→";position:absolute;right:2px;top:11px;color:var(--coral-d);font-weight:900}
.hcard a:hover{color:var(--coral-d)}
.probs{grid-template-columns:repeat(5,1fr)}
.growing{margin:12px 0 0;font-weight:700}
@media(max-width:1000px){.probs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.hgrid{grid-template-columns:1fr;grid-template-areas:"text" "card" "btns";gap:16px}.htext{align-self:auto}
.hcard{padding:16px 18px 10px;border-radius:16px}.hcard a{font-size:16px;padding:9px 22px 9px 30px}.hcard a::before{top:8px;font-size:18px}.hcard a::after{top:9px}.hlab{font-size:12.5px;margin-bottom:6px}.hbtns{margin-top:4px}}
.hbtns .btn.big{padding:16px 24px}
@media(min-width:1001px){.probs{grid-template-columns:repeat(3,1fr)}}

/* ---- v6: the problem boxes are the first thing on the page ---- */
.hero.picker{padding:40px 0 46px}
.hero.picker h1{max-width:18em;margin-bottom:.35em}
.hero.picker .lead{margin-bottom:22px}
.hero.picker .prob{box-shadow:0 4px 0 rgba(43,33,48,.55);border-color:var(--plum)}
.pbtns{margin:26px 0 0}
@media(max-width:860px){.hero.picker{padding:20px 0 30px}.hero.picker .kick{display:none}.hero.picker h1{font-size:25px;line-height:1.15}.hero.picker .lead{font-size:16px;margin-bottom:14px}
.hero.picker .probs{gap:10px}.hero.picker .prob{padding:12px 12px 14px}.hero.picker .prob span{font-size:13px;line-height:1.35}}

.ask{font-size:clamp(20px,2.6vw,26px);font-weight:800;margin:0 0 18px;color:#fff}
@media(max-width:860px){.ask{font-size:19px;margin-bottom:12px}}
