/* Layout: sunny hero with a giant rainbow behind fanned covers, then a bright filterable shelf */
:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --soft:#F4F2F9; --soft2:#FFF1C2; color-scheme:light; --ink:#2B2142; --muted:#5F5873; --line:#EDE6F3;
  --red:#F2545B; --orange:#FF8F3F; --yellow:#FFC93C; --green:#7CC242; --blue:#2D8FD5; --purple:#7B5BB6;
  --sun:#EAF6FF; --sky:#EAF6FF; --coral:#FC7158; --teal:#1EACA7; --plum:#9160A8; --mustard:#F8B735; --cta:#E5553D; --cta-ink:#FFFFFF; --focus:#2D8FD5;
  --tint-red:#FFE9EA; --tint-orange:#FFF0E3; --tint-yellow:#FFF7DA; --tint-green:#EEF8E4; --tint-blue:#E6F2FC; --tint-purple:#F1EBFA; --tint-ink:#F2F0F6;
  --brandfont:'Fraunces', Georgia, serif; --display:'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  --body:'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius:18px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.55; margin:0}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:8px}
.stripe{height:10px; background:linear-gradient(90deg,var(--red) 0 16.66%,var(--orange) 0 33.33%,var(--yellow) 0 50%,var(--green) 0 66.66%,var(--blue) 0 83.33%,var(--purple) 0)}
.wrap{max-width:1140px; margin:0 auto; padding-inline:20px}
h1,h2,h3{font-family:var(--display); font-weight:600; line-height:1.12; text-wrap:balance; margin:0}
h2{font-size:clamp(28px,4vw,40px)}
.eyebrow{font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.top{display:flex; align-items:center; justify-content:space-between; gap:14px; padding-block:16px; flex-wrap:wrap}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--display); font-size:25px; font-weight:600; text-decoration:none}
.logo b{font-weight:700}
.logo img{width:60px; height:60px}
.logo .lt{display:grid; line-height:1}
.logo .lt b{font-family:var(--brandfont); font-weight:900; font-variation-settings:'SOFT' 100,'WONK' 1; font-size:28px; letter-spacing:-.3px}
.logo .b1{color:var(--coral)} .logo .b2{color:var(--teal)}
.logo .lt small{font-family:var(--brandfont); font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--plum); margin-top:4px}
.nav{display:flex; gap:20px; flex-wrap:wrap; font-weight:700}
.nav a{text-decoration:none; color:var(--muted)}
.nav a:hover{color:var(--ink)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; cursor:pointer; font:800 17px/1 var(--body);
  padding:15px 22px; border-radius:999px; background:var(--cta); color:var(--cta-ink); text-decoration:none; box-shadow:0 4px 0 rgba(0,0,0,.12)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px); box-shadow:0 2px 0 rgba(0,0,0,.12)}
.btn.alt{background:var(--surface); color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink)}

/* hero */
.hero-band{background:var(--sun); border-bottom:1px solid var(--line)}
.hero{display:grid; grid-template-columns:1.05fr .95fr; gap:36px; align-items:center; padding-block:34px 40px}
.hero h1{font-size:clamp(36px,5.6vw,62px); font-weight:700; letter-spacing:-.01em}
.hero h1 .c1{color:#159C97} .hero h1 .c2,.hero h1 .c3{color:inherit}
.launch{background:var(--soft2); text-align:center; font-size:15px; font-weight:700; padding:9px 16px}
.price-line{font-size:18px; margin:-6px 0 20px; max-width:34em}
.cartbox{display:block; text-align:left; background:var(--soft2); border-radius:14px; padding:14px 18px; margin-top:12px; font-weight:500}.cartbox ol{margin:8px 0 0 20px}.cartbox a{font-weight:700}
.code{font-family:ui-monospace,Menlo,monospace; background:var(--soft2); padding:2px 7px; border-radius:6px; letter-spacing:.04em}
.price{color:var(--ink); font-size:16px}
.was{color:var(--muted); font-weight:600}
.sale{color:var(--cta); font-weight:800}
.plans{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin-top:22px}
.plan{position:relative; padding:22px; border-radius:var(--radius); background:var(--surface); box-shadow:0 0 0 2px var(--line); display:grid; gap:6px; align-content:start}
.plan.best{box-shadow:0 0 0 3px var(--cta)}
.plan h3{font-family:var(--body); font-weight:800; font-size:18px}
.plan .amt{font-family:var(--display); font-weight:700; font-size:30px; margin:0; line-height:1.1; color:var(--ink)}
.plan .save{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-weight:700}
.plan .save span{background:var(--soft2); color:var(--ink); border-radius:999px; padding:3px 10px; font-weight:800; font-size:14px}
.plan p{margin:0; color:var(--muted)}
.plan .flag{position:absolute; top:-12px; left:18px; background:var(--cta); color:var(--cta-ink); font:800 12px/1 var(--body); padding:6px 10px; border-radius:999px; letter-spacing:.04em; text-transform:uppercase}
.lockup{display:block; width:min(100%,460px); height:auto; margin:0 0 14px -6px}
.brand-big{font-family:var(--display); font-weight:700; font-size:clamp(30px,4vw,44px); margin:0 0 10px; line-height:1}
.brand-big b{font-weight:700}
.lead{font-size:20px; color:var(--muted); max-width:33em; margin:18px 0 22px}
.badges{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px}
.badge{font:800 14px/1 var(--body); padding:9px 13px; border-radius:999px; color:#2B2142}
.cta{display:flex; gap:12px; flex-wrap:wrap}
.art{position:relative; width:min(100%,480px); aspect-ratio:600/420; margin-inline:auto}
.rainbow-art{position:absolute; left:0; bottom:0; width:100%}
.art img{position:absolute; width:31%; border-radius:6px; box-shadow:0 8px 20px rgba(43,33,66,.22); background:#fff; border:3px solid #fff}
.art img:nth-of-type(1){left:13%; top:12%; transform:rotate(-10deg)}
.art img:nth-of-type(2){left:34.5%; top:2%; transform:rotate(1deg); z-index:1}
.art img:nth-of-type(3){left:56%; top:12%; transform:rotate(10deg)}
@media (prefers-reduced-motion:no-preference){
  .art img{transition:transform .35s ease}
  .art:hover img:nth-of-type(1){transform:rotate(-14deg) translateY(-8px)}
  .art:hover img:nth-of-type(2){transform:rotate(1deg) translateY(-16px)}
  .art:hover img:nth-of-type(3){transform:rotate(14deg) translateY(-8px)}
}

/* where */
section{padding-block:48px}
.where h2{font-size:28px; margin-bottom:16px}
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{border:0; cursor:pointer; font:800 16px/1 var(--body); padding:13px 17px; border-radius:999px; color:var(--ink); text-decoration:none; background:var(--surface)!important; box-shadow:inset 0 0 0 2px var(--line)}
.chip small{font-weight:600; opacity:.75; margin-left:6px}
.chip:hover{box-shadow:inset 0 0 0 2px var(--ink)}

/* shelf */
.lib-head{display:flex; justify-content:space-between; align-items:end; gap:16px; flex-wrap:wrap; margin-bottom:20px}
.filters{display:grid; gap:12px; margin-bottom:26px}
.frow{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.frow .lbl{font-size:14px; font-weight:800; color:var(--muted); width:52px}
.pill{border:0; cursor:pointer; font:700 15px/1 var(--body); padding:10px 15px; border-radius:999px; background:var(--surface); color:var(--ink); box-shadow:inset 0 0 0 2px var(--line)}
.pill[aria-pressed="true"]{background:var(--ink); color:var(--bg); box-shadow:none}
.count{font-size:15px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:24px}
.statelist{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-top:20px}
.statelist .st{display:grid; gap:4px}
.statelist a.lt{padding:4px 14px; font-size:13px; background:#EFFAF1; color:#1E6B3A}
.statelist a{display:block; padding:12px 14px; border-radius:12px; background:var(--soft); color:var(--ink); font-weight:800; text-decoration:none; box-shadow:0 0 0 2px var(--line)}
.statelist a:hover{box-shadow:0 0 0 2px var(--ink)}
.book{display:flex; flex-direction:column; background:var(--surface); border-radius:var(--radius); box-shadow:0 0 0 2px var(--line); overflow:hidden; min-width:0}
.mat{padding:16px 16px 0}
.mat img{display:block; width:100%; height:auto; aspect-ratio:8.5/11; object-fit:cover; border-radius:6px; background:#fff; box-shadow:0 3px 10px rgba(43,33,66,.12)}
.bbody{display:flex; flex-direction:column; gap:10px; padding:16px 18px 20px; flex:1}
.tags{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.tag{font:800 13px/1 var(--body); padding:7px 10px; border-radius:8px; color:#2B2142}
.book h3{font-size:22px}
.book h3 a{text-decoration:none}
.book h3 a:hover{text-decoration:underline; text-underline-offset:3px}
.meta{font-size:14px; color:var(--muted)}
.blurb{margin:0; font-size:16px}
.inside{margin:0; padding-left:18px; font-size:15px; color:var(--muted)}
.actions{margin-top:auto; display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding-top:6px}
.actions .btn{padding:13px 17px; font-size:16px}
.linkbtn{border:0; background:none; cursor:pointer; font:800 15px var(--body); color:var(--ink); text-decoration:underline; text-underline-offset:3px; padding:8px 4px}
.peek{display:flex; gap:10px}
.peek img{width:calc(50% - 5px); border-radius:4px; box-shadow:0 0 0 1px var(--line); background:#fff}
.status{font-size:14px; color:var(--muted); min-height:1.2em; margin:0}
.empty{padding:36px; text-align:center; background:var(--tint-yellow); border-radius:var(--radius)}

/* why */
.why{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:22px}
.why div{padding:22px; border-radius:var(--radius)}
.why h3{font-size:22px; margin-bottom:6px}
.why p{margin:0}

/* picks, faq, tips */
.picks{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; margin-top:22px}
.pick{display:flex; flex-direction:column; gap:8px; padding:18px; border-radius:var(--radius); background:var(--surface); box-shadow:0 0 0 2px var(--line)}
.pick .w{align-self:flex-start; font:800 12px/1 var(--body); letter-spacing:.06em; text-transform:uppercase; padding:6px 9px; border-radius:6px; color:#2B2142}
.pick h3{font-family:var(--body); font-weight:800; font-size:17px}
.pick p{margin:0; font-size:15px; color:var(--muted)}
.pick a{margin-top:auto; font-weight:800; text-underline-offset:3px}
.fine{font-size:14px; color:var(--muted); max-width:62em}
.trust{display:flex; flex-wrap:wrap; gap:6px 16px; margin:12px 0 0; font-size:14px; font-weight:700; color:var(--muted)}
.trust span{display:inline-flex; align-items:center; gap:6px}
.trust svg,.paybar svg{color:#3d8b25; flex:none}
.paybar{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin-top:22px; padding:14px 18px; border-radius:16px; background:var(--soft2); font-weight:700; font-size:15px}
.paybar span{display:inline-flex; align-items:center; gap:7px}
.faq{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 34px; margin-top:22px}
.faq h3{font-family:var(--body); font-weight:800; font-size:18px}
.faq p{margin:4px 0 0; color:var(--muted)}
.soon{background:var(--sky); border-radius:24px; padding:28px; display:grid; grid-template-columns:1fr 1.3fr; gap:24px; align-items:center}
.soon ul{margin:0; padding-left:20px; display:grid; gap:6px; font-weight:700}
footer{padding-block:34px 46px; font-size:14px; color:var(--muted); display:grid; gap:8px}

/* book detail page */
.crumb{font-size:14px; font-weight:700; color:var(--muted); padding-top:8px}
.crumb a{color:var(--muted)}
.detail{display:grid; grid-template-columns:.9fr 1.1fr; gap:40px; padding-block:24px 40px; align-items:start}
.detail .cover-big{width:100%; height:auto; border-radius:10px; background:#fff; box-shadow:0 10px 26px rgba(43,33,66,.18)}
.detail .peek{margin-top:16px}
.detail h1{font-size:clamp(32px,4.6vw,50px); margin:12px 0 10px}
.detail .lead{margin:0 0 18px}
.detail h2{font-size:24px; margin:26px 0 10px}
.detail ul.inside{font-size:17px; color:var(--ink); display:grid; gap:4px}
.goodfor{display:flex; flex-wrap:wrap; gap:8px}
.related{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:18px; margin-top:18px}
.related a{text-decoration:none; font-weight:800; display:grid; gap:8px}
.related img{border-radius:6px; background:#fff; box-shadow:0 0 0 2px var(--line)}

@media (max-width:1100px){
  .plans{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  .hero,.detail,.soon{grid-template-columns:1fr}
  .why,.faq{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr 1fr}
  .plans .plan:last-child{grid-column:1/-1}
  .frow .lbl{width:100%}
}

.search{display:flex; gap:10px; align-items:center; margin:18px 0 6px}
.search input{flex:1; min-width:0; font:600 18px/1.2 var(--body); padding:14px 18px 14px 46px; border-radius:999px; border:0;
  box-shadow:0 0 0 2px var(--line); background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%235F5873' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 16px center; color:var(--ink)}
.search input:focus{outline:none; box-shadow:0 0 0 3px var(--blue)}
.article{max-width:760px; margin:0 auto}
.article h1{font-size:clamp(32px,4.6vw,48px); margin:12px 0 10px}
.article h2{font-size:26px; margin:34px 0 10px}
.article h3{font-size:20px; margin:22px 0 8px}
.article p, .article li{font-size:18px; line-height:1.65}
.article ul, .article ol{padding-left:22px}
.article .lead{font-size:20px; color:var(--muted)}
.article .tip{background:var(--soft2); border-radius:16px; padding:16px 20px; margin:18px 0; font-size:17px}
.article ul.checks{list-style:none; padding:0}
.article ul.checks li{padding-left:34px; position:relative; margin:6px 0}
.article ul.checks li::before{content:""; position:absolute; left:0; top:4px; width:20px; height:20px; border-radius:6px; box-shadow:inset 0 0 0 2.5px var(--ink)}
.disclose{font-size:14px; color:var(--muted); background:var(--soft); border-radius:12px; padding:10px 14px; margin:14px 0 20px}
.article .picks{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.article .pick h3{margin:0 0 6px; font-size:18px}
.article .pick p{font-size:15px; line-height:1.5; margin:0 0 10px}
.postmeta{font-size:14px; color:var(--muted); font-weight:700}
.post-hero{width:100%; max-width:760px; aspect-ratio:16/7; object-fit:cover; object-position:top; border-radius:18px; box-shadow:0 0 0 2px var(--line)}
.sources{font-size:14px; color:var(--muted)}
.sources a{color:var(--muted)}
.postlist{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:22px; margin-top:22px}
.postcard{display:grid; gap:10px; text-decoration:none; color:var(--ink); background:var(--surface); border-radius:18px; padding:14px; box-shadow:0 0 0 2px var(--line)}
.postcard img{width:100%; aspect-ratio:4/3; object-fit:cover; object-position:top; border-radius:12px}
.postcard h3{font-size:20px; margin:0}
.postcard p{margin:0; color:var(--muted); font-size:15px}
.bgroup{margin-top:8px; padding-top:28px; padding-bottom:12px}
.bundles{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px; margin-top:16px}
.bundle{position:relative; background:var(--surface); border-radius:20px; padding:18px; box-shadow:0 0 0 2px var(--line); display:grid; gap:10px; align-content:start}
.bundle.five{box-shadow:0 0 0 3px var(--cta)}
.bundle .flag{position:absolute; top:-12px; left:16px; background:var(--cta); color:var(--cta-ink); font:800 12px/1 var(--body); padding:6px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:.04em}
.fan{display:flex; justify-content:center; align-items:flex-start; height:182px; padding-top:8px}
.fan img{width:92px; border-radius:6px; background:#fff; box-shadow:0 2px 10px rgba(43,33,66,.18); margin:0 -16px; transform-origin:bottom center}
.bundle h3{margin:0; font-size:21px}
.bundle .bl{margin:0; color:var(--muted); font-size:15px}
.bundle ul{margin:0; padding-left:18px; font-size:14px; color:var(--muted)}
.bundle .bprice{font:700 26px/1 var(--display)}
.bundle .bprice s{font:600 16px var(--body); color:var(--muted); margin-left:6px}
.bundle .bprice span{font:800 13px var(--body); background:var(--soft2); padding:3px 9px; border-radius:999px; margin-left:6px; vertical-align:middle}
.bundle .status{font-size:14px; color:var(--muted); min-height:1em; margin:0}
.builder{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px; margin-top:16px}
.builder .bundle select{width:100%; font:600 16px var(--body); padding:10px 12px; border-radius:12px; border:0; box-shadow:0 0 0 2px var(--line); background:var(--surface); color:var(--ink)}
.builder label{font-weight:800; font-size:14px; color:var(--muted)}
.picker{margin-top:28px; background:var(--soft); border-radius:22px; padding:20px}
.picker[hidden]{display:none!important}
.picker-head{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between}
.picker-head h3{margin:0; font-size:22px}
.picker .search{margin:12px 0}
.pgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; max-height:560px; overflow:auto; padding:4px}
.pbook{display:grid; gap:6px; text-align:left; border:0; cursor:pointer; background:var(--surface); border-radius:12px; padding:8px; box-shadow:0 0 0 2px var(--line); font:700 13px/1.25 var(--body); color:var(--ink)}
.pbook img{width:100%; border-radius:6px}
.pbook[aria-pressed="true"]{box-shadow:0 0 0 3px var(--cta); background:var(--soft2)}
.pbook[hidden]{display:none}
.picker-foot{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:14px}
.picker-foot .count{font-size:16px}
@media (max-width:560px){ .fan img{width:74px} }

.tag.lvl-prereader,.tag.lvl-noread{background:#DFF5E3!important; color:#1E6B3A}
.tag.lvl-reader{background:#E3EEFF!important; color:#1F4E8C}
.readq{padding-bottom:8px}
.readq h2{font-size:28px; margin-bottom:14px}
.readq-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
.readq-card{display:grid; gap:6px; text-decoration:none; color:var(--ink); padding:18px 20px; border-radius:18px; box-shadow:0 0 0 2px var(--line); background:var(--surface)}
.readq-card:first-child{background:#EFFAF1} .readq-card:last-child{background:#EEF4FF}
.readq-card b{font:700 22px/1.2 var(--display)} .readq-card span{color:var(--muted)}
.readq-card:hover{box-shadow:0 0 0 2px var(--ink)}
.twin{display:flex; gap:14px; align-items:center; margin:18px 0 6px; padding:12px 14px; border-radius:16px; background:var(--soft); text-decoration:none; color:var(--ink); box-shadow:0 0 0 2px var(--line)}
.twin img{border-radius:6px; background:#fff; flex:none}
.twin:hover{box-shadow:0 0 0 2px var(--ink)}
.church-note{background:var(--soft2)}
.church-deal{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:34px; align-items:center; margin-top:18px; padding:26px; border-radius:var(--radius); background:var(--surface); box-shadow:0 0 0 3px var(--purple)}
.church-deal img{width:100%; height:auto; border-radius:14px}
.church-deal h2{font-size:clamp(26px,3.4vw,36px); margin:6px 0 4px}
.church-deal .bprice{font:800 34px/1.1 var(--display, inherit); margin:6px 0 12px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.church-deal .bprice s{font-size:20px; color:var(--muted); font-weight:600}
.church-deal .bprice span{font-size:15px; background:var(--soft2); padding:4px 10px; border-radius:999px}
.church-deal ul.inside{font-size:17px; display:grid; gap:6px; margin:0 0 18px; padding-left:20px}
@media (max-width:760px){.church-deal{grid-template-columns:1fr; padding:18px}}
.church-form{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:34px; padding:28px; border-radius:var(--radius); background:var(--soft2)}
.church-form h2{margin:6px 0 8px}
.church-form form{display:grid; gap:6px; background:var(--surface); padding:22px; border-radius:16px; box-shadow:0 0 0 2px var(--line)}
.church-form label{font-weight:800; font-size:14px; color:var(--muted); margin-top:6px}
.church-form input{font:500 17px var(--body); padding:12px 14px; border-radius:12px; border:0; box-shadow:0 0 0 2px var(--line); background:#fff; color:var(--ink); min-width:0}
.church-form input:focus{outline:3px solid var(--blue); outline-offset:1px}
.church-form .btn{margin-top:12px; justify-self:start}
@media (max-width:760px){.church-form{grid-template-columns:1fr; padding:18px}}
.church-code{display:inline-block; font:800 clamp(34px,6vw,48px)/1 ui-monospace,Menlo,monospace; letter-spacing:.08em; padding:18px 28px; margin:6px 0 14px; border-radius:18px; background:var(--soft2); box-shadow:0 0 0 3px var(--purple); color:var(--ink)}
.why.why4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.why.why4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.why.why4{grid-template-columns:1fr}}