/* v4 (2026-11-10): Cammie asked for a white background instead of grey, a brighter feel, and 2-3 sections on the
   home page that stand out like extra hero sections. Loaded after custom.css on every page. */
:root { --bg: #FFFFFF; --tint: #F3F7FC; --deep: #1F4F8C; }
.notice { background: var(--accent); }

/* Standout 1: "Where do you want to grow next?" on a full-width light blue band */
.finder-wrap, [data-layout="editorial"] .finder-wrap { margin-top: 0; padding: 96px 0; background: linear-gradient(180deg, #E6F0FB 0%, #F5F9FE 100%); }
.finder-ask h2 { font-size: clamp(1.9rem, 2.8vw, 2.6rem); }
.finder { box-shadow: 0 30px 70px -30px rgba(44, 92, 152, .45); }

/* Standout 2: the free cheat sheet on a full-width logo-yellow band */
.section:has(> .wrap[data-r="guide-teaser"]) { background: linear-gradient(135deg, #FFF5CC 0%, #F9D555 100%); }
.guide-teaser h2 { font-size: clamp(2.2rem, 3vw, 3.1rem); }
.guide-cover { border-color: rgba(19, 32, 46, .12); box-shadow: 0 34px 70px -24px rgba(19, 32, 46, .45); }

/* Standout 3: proof numbers on a bright logo-blue band, each number its own framed tile */
.band-stats { --band-bg: transparent; --band-line: transparent; background: linear-gradient(135deg, #2C5C98 0%, #3E7DC9 100%); }
.band-stats .stats { gap: 14px; background: none; overflow: visible; }
.band-stats .stat { background: rgba(255, 255, 255, .1); border: 1.5px solid rgba(255, 255, 255, .28); border-radius: var(--r-md); }

/* Closing call to action in logo blue, not near-black */
.cta-panel { background-image: linear-gradient(rgba(44, 92, 152, .9), rgba(31, 79, 140, .94)), url("custom/steel-texture.webp"); }

@media (max-width: 720px) { .finder-wrap, [data-layout="editorial"] .finder-wrap { padding: 56px 0; } }

/* The cheat sheet teaser shows the real PDF cover */
.guide-cover.guide-cover-img { padding: 0; overflow: hidden; aspect-ratio: 210 / 297; display: block; transform: rotate(-2deg); transition: transform .25s ease, box-shadow .25s ease; }
.guide-cover.guide-cover-img:hover { transform: rotate(0deg) translateY(-4px); }
.guide-cover.guide-cover-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) { .guide-cover.guide-cover-img, .guide-cover.guide-cover-img:hover { transform: none; transition: none; } }