:root{--cream:#FDFBF5;--ink:#232323;--bronze:#1F75FE;--rust:#EE204D;--verd:#1CAC78;--ember:#EE204D;--khaki:#FCE883;--marigold:#FF7538;--aqua:#1F75FE}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--cream);color:var(--ink);font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;line-height:1.55}
a{color:var(--rust)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
header.site{border-bottom:6px solid var(--ink);padding:22px 0 18px}
.logo{font-weight:900;font-size:1.35rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.logo span{color:var(--rust)}
nav.cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
nav.cats a{background:var(--khaki);color:var(--ink);text-decoration:none;font-weight:700;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;padding:7px 12px;border:2px solid var(--ink);border-radius:999px}
nav.cats a:hover{background:var(--marigold)}
.hero{padding:56px 0 30px}
.eyebrow{font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:var(--rust);font-size:.85rem}
h1{font-size:clamp(2.6rem,7vw,4.8rem);font-weight:900;line-height:1.02;letter-spacing:-.01em;text-transform:uppercase;margin:12px 0 16px}
h1 .accent{color:var(--rust)}
.sub{font-size:clamp(1.1rem,2.4vw,1.45rem);max-width:44ch;font-weight:500}
.searchbox{margin:30px 0 8px;display:flex;gap:10px;flex-wrap:wrap}
.searchbox input{flex:1;min-width:240px;font-size:1.15rem;padding:14px 16px;border:3px solid var(--ink);border-radius:10px;background:#fff;color:var(--ink)}
.search-count{font-weight:700;letter-spacing:.05em}
#results{margin:10px 0 30px;display:grid;gap:8px}
#results a{display:block;background:#fff;border:2px solid var(--ink);border-radius:10px;padding:12px 16px;text-decoration:none;color:var(--ink);font-weight:700}
#results a small{display:block;font-weight:500;color:#555555}
#results a:hover{border-color:var(--rust)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;padding:14px 0 40px}
.catcard{display:block;text-decoration:none;color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:14px;padding:24px;box-shadow:6px 6px 0 var(--khaki)}
.catcard:hover{box-shadow:6px 6px 0 var(--marigold)}
.catcard h2{font-size:1.7rem;font-weight:900;text-transform:uppercase;line-height:1.1;margin-bottom:8px}
.catcard p{font-size:1.02rem}
.catcard .count{display:inline-block;margin-top:14px;background:var(--verd);color:#fff;font-weight:800;letter-spacing:.08em;padding:4px 12px;border-radius:999px;font-size:.85rem;text-transform:uppercase}
.about{background:#14213D;color:var(--cream);padding:44px 0;margin-top:10px}
.about h2{font-size:2rem;font-weight:900;text-transform:uppercase;margin-bottom:12px}
.about p{max-width:65ch;font-size:1.08rem}
.about .accent{color:#FCE883}
footer.site{padding:26px 0 40px;font-size:.95rem}
.stack-note{background:#fff;border-left:10px solid var(--verd);padding:18px 20px;font-size:1.08rem;margin:18px 0 28px;border-radius:0 12px 12px 0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;padding-bottom:46px}
.card{background:#fff;border:3px solid var(--ink);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:10px}
.card.start{border-color:var(--ember);box-shadow:7px 7px 0 var(--marigold)}
.card-top{display:flex;justify-content:space-between;align-items:center}
.step{font-weight:900;letter-spacing:.22em;font-size:.8rem;color:var(--bronze)}
.start-badge{background:var(--ember);color:#fff;font-weight:900;letter-spacing:.08em;padding:5px 12px;border-radius:999px;font-size:.8rem}
.card h3{font-size:1.55rem;font-weight:900;line-height:1.1}
.desc{font-size:1.02rem}
.best{font-size:.98rem;color:#555555}
.note{font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:.8rem;color:var(--verd)}
.card-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:2px solid var(--khaki);padding-top:12px}
@media (min-width:700px){.card-foot{height:5rem}}
/* Fixed foot height on multi-column layouts: the yellow rule sits on top of
   the foot, so a foot that grows with price length (1-3 lines) moved the rule
   card to card. 5rem holds a 3-line price + padding + rule at any card width
   >=320px (longest price on the site is 47 chars = 3 lines there). Below
   700px cards stack one-up, so the foot stays auto and nothing clips. */
.price{font-weight:800;font-size:.95rem;line-height:1.35;min-height:2.7em;display:flex;align-items:center}
.visit{font-weight:900;text-decoration:none;background:var(--rust);color:#fff;padding:8px 14px;border-radius:8px;white-space:nowrap}
.visit:hover{background:#C8102E}
.verified{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:#777777;font-weight:700}
.startwhy{background:#fff;border:2px dashed var(--ember);border-radius:12px;padding:16px 20px;font-size:1.05rem;margin:0 0 26px}
.backlink{font-weight:800;text-decoration:none}
h1.cat{font-size:clamp(2.2rem,6vw,3.8rem)}
.hook{background:#0B4F9C;color:#FCE883;border-radius:16px;padding:34px 30px;margin:6px 0 30px}
.hook .eyebrow{color:#FCE883}
.hook h2{font-size:clamp(2.4rem,6.5vw,4.2rem);font-weight:900;line-height:1.02;letter-spacing:-.01em;text-transform:uppercase;margin:10px 0 12px;color:#FCE883}
.hook-sub{font-size:clamp(1.1rem,2.4vw,1.4rem);max-width:48ch;font-weight:500;color:#FCE883}
.hook-start{display:flex;flex-wrap:wrap;align-items:center;gap:14px;border:2px dashed #FCE883;border-radius:12px;padding:16px 20px;margin:22px 0 8px}
.hook-start p{flex:1;min-width:240px;font-size:1.05rem;color:#FCE883}
.hook-cta{margin-top:16px;font-size:1.1rem}
.hook-cta a{color:#FCE883;font-weight:900;text-decoration:none}
.hook-cta a:hover{color:#FCE883}

.workflow{background:#fff;border:2px solid var(--ink);border-radius:12px;padding:20px;margin:18px 0 10px}
.workflow h2{font-size:1.15rem;margin:0 0 12px}
.flow{list-style:none;counter-reset:f;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.flow li{counter-increment:f;background:var(--cream);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.flow li:before{content:counter(f);font-weight:900;color:var(--bronze);font-size:.85rem}
.flow a{color:var(--ink);font-weight:700}
.flow span{color:#555555}
.pickone{font-size:1.05rem;color:#555555;margin:10px 0 22px}

.why{margin:0;color:var(--ink)}
.more{margin:6px 0 40px}
.more summary{display:inline-block;list-style:none;cursor:pointer;font-weight:800;background:var(--khaki);border:2px solid var(--ink);border-radius:999px;padding:10px 20px;margin-bottom:18px}
.more summary::-webkit-details-marker{display:none}
.more summary:hover{background:var(--marigold)}
.more[open] summary{background:#fff}
.more .cards{padding-bottom:6px}