/* Guides (articles) on the hub. Loaded after market.css, which supplies the header, footer and tokens. */
.guide main{padding:0}
.guide .find-btn{border:0;cursor:pointer;padding:0}
.crumb{font-size:15px;color:var(--muted)}.crumb a{text-decoration:none}.crumb a:hover{text-decoration:underline}.crumb b{color:var(--red);font-weight:500}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:99px;background:var(--red);color:#fff;text-decoration:none;font-weight:500;transition:background .2s}.btn:hover{background:var(--red2)}
.price b{color:var(--red);font-size:24px;font-weight:600}.price s{color:var(--muted);margin-left:6px}

/* hero */
.g-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--m);padding:var(--m);align-items:center;max-width:1500px;margin:0 auto}
.g-hero h1{font-size:clamp(36px,5vw,70px);line-height:1;letter-spacing:-.03em;font-weight:600;margin:14px 0 18px;text-wrap:balance}
.g-hero .dek{font-size:clamp(19px,1.7vw,23px);line-height:1.45;color:var(--muted);max-width:36ch}
.g-hero .meta{margin-top:20px;font-size:15px;color:var(--muted)}
.g-ph{border-radius:24px;overflow:hidden;aspect-ratio:4/3.4;background:var(--step)}.g-ph>img{width:100%;height:100%;object-fit:cover}
.g-page{background:#ffc94a;position:relative;display:grid;place-items:center}
.g-page img.pg{width:58%;height:auto;border-radius:12px;border:3px solid var(--ink);box-shadow:0 26px 50px rgba(0,0,0,.25);transform:rotate(-4deg)}
.logos{position:absolute;left:16px;right:16px;bottom:16px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.logos span{display:inline-flex;align-items:center;gap:7px;background:#fff;border:2.5px solid var(--ink);border-radius:99px;padding:5px 13px;font-weight:500;font-size:15px}.logos img{width:20px;height:20px}

/* views and likes */
.stats{display:flex;gap:10px;align-items:center;margin-top:16px;flex-wrap:wrap}
.stat{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 16px;border-radius:99px;background:#fff;color:var(--muted);font:500 16px "Clash Grotesk",sans-serif;border:0}
.like{cursor:pointer;color:var(--ink);transition:transform .15s}.like svg path{fill:none;stroke:var(--red);stroke-width:2;transition:fill .2s}
.like .lc::before{content:"·";margin:0 6px 0 2px}
.like:active{transform:scale(.94)}.like[aria-pressed=true]{background:#fde9e6;color:var(--red)}.like[aria-pressed=true] svg path{fill:var(--red)}
.like.pop svg{animation:zs-pop .45s cubic-bezier(.16,1,.3,1)}@keyframes zs-pop{40%{transform:scale(1.45)}}
.helpful{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:#fff;border-radius:20px;padding:18px 22px;margin:44px 0 0}.helpful b{font-size:20px;font-weight:600}
.helpful .like{background:var(--ground);height:50px;padding:0 22px;font-size:17px}.helpful .like[aria-pressed=true]{background:#fde9e6}
@media (prefers-reduced-motion:reduce){.like.pop svg{animation:none}}

/* body: reading column and the buy box that stays on screen */
.g-body{display:grid;grid-template-columns:minmax(0,680px) 320px;gap:clamp(24px,5vw,80px);justify-content:center;padding:20px var(--m) 60px}.g-body.solo{grid-template-columns:minmax(0,720px)}
.art{font-size:18px;line-height:1.65;counter-reset:step}.art p,.art ul,.art ol{margin:0 0 22px}.art ul,.art ol{padding-left:1.3em}.art li{margin:6px 0}
.art h2{font-size:clamp(26px,3vw,32px);letter-spacing:-.02em;line-height:1.1;margin:46px 0 14px}
.art h2.n{display:flex;gap:14px;align-items:baseline}.art h2.n::before{counter-increment:step;content:counter(step);color:var(--red)}
.art h3{font-size:22px;margin:30px 0 10px;font-weight:600}
.art a{color:var(--red)}.art img{border-radius:14px}.art figure{margin:0 0 22px}.art figcaption{font-size:15px;color:var(--muted);margin-top:6px}
.art .do{background:#fff;border-left:6px solid var(--red);border-radius:0 14px 14px 0;padding:14px 18px;margin:0 0 22px;font-weight:500}
.art .prompt{background:#e3f2f1;border:3px solid #0f5c66;border-radius:18px;padding:12px 18px;margin:0 0 22px;font-size:20px;font-weight:500;line-height:1.4}
.art .prompt b{display:block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#0f5c66;margin-bottom:2px}
.art .quote,.art blockquote{font-size:clamp(24px,2.6vw,30px);line-height:1.2;letter-spacing:-.02em;font-weight:500;margin:40px 0;padding:20px 0 0;border-top:3px solid var(--ink)}
.art blockquote p{margin:0}
.art .next{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 10px}.art .next div{background:#fff;border-radius:16px;padding:14px 16px;font-weight:500;line-height:1.3}.art .next span{display:block;font-size:26px;margin-bottom:6px}
.gshelf-h{font-weight:600;font-size:22px;margin:40px 0 0}
.gshelf{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0 34px}
.prod{display:flex;flex-direction:column;background:#fff;border-radius:16px;padding:12px;text-decoration:none;color:var(--ink);line-height:1.3;transition:box-shadow .2s}.prod:hover{box-shadow:0 0 0 2px var(--step)}
.prod img{border-radius:10px;aspect-ratio:1;object-fit:cover;width:100%}.prod .pn{font-weight:500;margin-top:10px}.prod .ps{font-size:14px;color:var(--muted);margin-top:2px}.prod .price{margin-top:auto;padding-top:8px}.prod .price b{font-size:20px}
.art .prod{color:var(--ink)}
.box{position:sticky;top:20px;align-self:start;background:#fff;border-radius:20px;padding:18px}.box img.cv{border-radius:12px;width:100%}
.box .pn{font-weight:600;font-size:20px;line-height:1.15;margin:14px 0 4px}.box .btn{width:100%;margin:14px 0 10px}.box .note{color:var(--muted);font-size:15px;line-height:1.4}
.box .pages{display:flex;gap:6px;margin-top:12px}.box .pages a{flex:1}.box .pages img{width:100%;border-radius:6px;border:1px solid var(--step)}

/* Guides page */
.gi-head{padding:clamp(24px,4vw,48px) var(--m) 8px;max-width:1500px;margin:0 auto}.gi-head h1{font-size:clamp(40px,6vw,76px);letter-spacing:-.03em;line-height:1;font-weight:600}
.gi-head p{font-size:20px;color:var(--muted);margin-top:10px;max-width:52ch}
.gi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:20px var(--m);max-width:1500px;margin:0 auto}
.gcard{display:flex;flex-direction:column;background:#fff;border-radius:20px;overflow:hidden;text-decoration:none;color:var(--ink);transition:box-shadow .2s}.gcard:hover{box-shadow:0 0 0 3px var(--step)}
.gcard.big{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.gpic{display:block;aspect-ratio:4/3;background:var(--step);overflow:hidden}.gpic>img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}.gcard:hover .gpic>img{transform:scale(1.03)}
.gpic.g-page{display:grid;place-items:center;background:#ffc94a}.gpic.g-page img.pg{width:52%;height:auto}.gcard:hover .gpic.g-page img.pg{transform:rotate(-4deg) scale(1.03)}
.gtx{display:flex;flex-direction:column;gap:8px;padding:18px 20px 22px}.gcard.big.flip .gpic{order:2}.gcard.big .gtx{justify-content:center;padding:clamp(22px,4vw,56px)}
.gcat{font-size:14px;color:var(--red);font-weight:500}.gt{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.1}.gcard.big .gt{font-size:clamp(30px,3.6vw,50px);line-height:1.02}
.gd{font-size:19px;color:var(--muted);line-height:1.45}.gm{font-size:15px;color:var(--muted);margin-top:auto}
.gi-shelf{padding:0 var(--m) 40px;max-width:1500px;margin:0 auto}.gi-shelf .gshelf{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.gi-none{padding:20px var(--m) 60px}

@media(max-width:900px){.gcard.big.flip .gpic{order:0}.g-hero,.g-body{grid-template-columns:1fr}.box{position:static}.gshelf{grid-template-columns:repeat(2,1fr)}.gi-grid{grid-template-columns:1fr 1fr}.gcard.big{grid-template-columns:1fr}}
@media(max-width:600px){.gi-grid{grid-template-columns:1fr}.art .next{grid-template-columns:1fr}.g-page img.pg{width:64%}.art{font-size:17px}}

/* closing questions that lead to the book */
.ask{margin:48px 0 0;padding:26px;border-radius:24px;background:var(--pine);color:#fff}
.ask-q+.ask-q{margin-top:22px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18)}
.art .ask h2{margin:0 0 8px;font-size:clamp(24px,2.6vw,30px);color:#fff}.ask p{margin:0;color:#d9e6e2}
.ask-buy{display:grid;grid-template-columns:140px minmax(0,1fr);gap:18px;align-items:center;margin-top:26px;padding:14px;border-radius:18px;background:#fff;color:var(--ink);text-decoration:none}
.art .ask-buy{color:var(--ink)}.ask-buy img{border-radius:12px;width:100%;aspect-ratio:1;object-fit:cover}
.ask-tx{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.ask-k{font-size:14px;font-weight:500;color:var(--red)}.ask-n{font-size:20px;font-weight:600;line-height:1.15}
.ask-buy .btn{margin-top:8px}.ask-buy:hover .btn{background:var(--red2)}
@media(max-width:600px){.ask{padding:20px}.ask-buy{grid-template-columns:96px minmax(0,1fr);gap:12px}.ask-n{font-size:17px}}
.ask-h{margin:0 0 14px!important;font-size:14px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#f4c95d!important}
.ask-q+.ask-q{margin-top:14px;padding-top:14px}.art .ask .ask-q h2{margin:0}

/* % OFF badges */
.prod,.box,.ask-buy{position:relative}
.off{position:absolute;z-index:1;top:8px;left:8px;padding:5px 10px;border-radius:99px;background:var(--red);color:#fff;font-weight:600;font-size:14px;letter-spacing:.02em;box-shadow:0 4px 10px rgba(0,0,0,.18)}
.off.big{top:-12px;left:-10px;padding:10px 16px;font-size:20px;background:#f4c95d;color:var(--ink);border:3px solid var(--ink);transform:rotate(-6deg);box-shadow:0 6px 14px rgba(0,0,0,.2)}
.ask-buy .off.big{top:-14px;left:-8px}
.save{display:inline-block;margin:6px 0 0;padding:3px 10px;border-radius:8px;background:#fde9e6;color:var(--red);font-weight:600;font-size:15px}
.box .save{margin-top:8px}
.off.big{text-align:center;line-height:1.05}.off.big small{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-bottom:2px}