/* Only applies inside the new guide. Does not alter the site's existing pages. */
.ks-guide { --bg:#f5f8fb; --surface:#fff; --text:#1f2937; --heading:#172033; --muted:#64748b; --border:#dfebf1; --blue:#1ea7ea; --blue-dark:#0f95d8; --deep-blue:#0284c7; --pale:#eaf7ff; --shadow:0 14px 48px rgba(18,46,75,.065); }
.ks-guide, .ks-guide *, .ks-guide *::before, .ks-guide *::after { box-sizing:border-box }
.ks-guide { margin:0;color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);line-height:1.68;-webkit-font-smoothing:antialiased }
.ks-guide a { color:var(--deep-blue) }
.ks-guide a:focus-visible, .ks-guide button:focus-visible { outline:3px solid var(--blue);outline-offset:4px }
.ks-guide .ksg-container { max-width:1110px;margin:0 auto;padding:0 26px }
.ks-guide .breadcrumbs { font-size:.85rem;color:#7890a2;padding:25px 0 18px }
.ks-guide .breadcrumbs a { color:#668396;text-decoration:none }
.ks-guide .breadcrumbs span { margin:0 9px }
.ks-guide .hero { display:grid;grid-template-columns:1.02fr .98fr;min-height:465px;background:#fff;border:1px solid var(--border);border-radius:28px;overflow:hidden;box-shadow:var(--shadow) }
.ks-guide .hero-content { padding:55px 36px 54px 52px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start }
.ks-guide .eyebrow { letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;font-weight:800;color:var(--deep-blue);margin:0 0 19px }
.ks-guide h1, .ks-guide h2, .ks-guide h3 { color:var(--heading);line-height:1.15;letter-spacing:-.035em }
.ks-guide h1 { font-size:clamp(2.4rem,4.5vw,4rem);margin:0 0 21px;font-weight:830 }
.ks-guide .hero-lead { color:#50647b;font-size:1.08rem;max-width:470px;margin:0 0 29px;line-height:1.7 }
.ks-guide .hero-links { display:flex;gap:18px;align-items:center;flex-wrap:wrap }
.ks-guide .btn { display:inline-flex;justify-content:center;align-items:center;text-align:center;gap:9px;background:var(--blue);color:white;border:0;text-decoration:none;font-weight:760;font-size:.97rem;padding:13px 23px;border-radius:999px;box-shadow:0 9px 22px rgba(30,167,234,.2);transition:background .2s,transform .2s }
.ks-guide .btn:hover { background:var(--blue-dark);color:#fff;transform:translateY(-1px) }
.ks-guide .quiet-link { color:var(--deep-blue);text-decoration:none;font-size:.94rem;font-weight:720 }
.ks-guide .quiet-link:hover { text-decoration:underline }
.ks-guide .hero-media { position:relative;background:#a7d9f0;min-height:380px;overflow:hidden }
.ks-guide .hero-media::after { content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,36,63,.13),transparent 60%) }
.ks-guide .hero-media img { width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:50% 45%;display:block }
.ks-guide .photo-label { position:absolute;bottom:18px;left:18px;z-index:1;color:#0e4967;background:rgba(255,255,255,.92);border-radius:99px;padding:8px 13px;font-size:.75rem;font-weight:700 }
.ks-guide .intro { max-width:770px;margin:43px auto 42px;text-align:center;color:#4b6074;font-size:1.06rem }
.ks-guide .intro p { margin:0 }
.ks-guide .check { margin:0 auto 74px;padding:30px 34px;max-width:1010px;border:1px solid #d9ecf5;border-radius:24px;background:#edf7fb;display:grid;grid-template-columns:.84fr 1.16fr;gap:30px;align-items:center }
.ks-guide .check h2 { font-size:1.55rem;margin:0 0 10px }
.ks-guide .check p { margin:0;color:#577086;font-size:.94rem }
.ks-guide .check ul { margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 17px;list-style:none }
.ks-guide .check li { display:flex;gap:10px;align-items:flex-start;color:#29465a;font-size:.91rem;line-height:1.43 }
.ks-guide .check li::before { content:"✓";flex:0 0 23px;line-height:23px;text-align:center;font-size:13px;font-weight:900;background:#fff;color:#138dcc;border-radius:50%;margin-top:0px }
.ks-guide .section-header { text-align:center;margin:0 auto 34px;max-width:780px }
.ks-guide .section-header .eyebrow { margin-bottom:10px }
.ks-guide .section-header h2 { margin:0 0 10px;font-size:clamp(2rem,3.5vw,2.8rem) }
.ks-guide .section-header p { margin:0;color:var(--muted) }
.ks-guide .ideas { display:grid;gap:20px }
.ks-guide .idea { display:grid;grid-template-columns:37% 63%;border:1px solid var(--border);border-radius:23px;overflow:hidden;background:#fff;box-shadow:0 8px 30px rgba(15,45,72,.036);min-height:264px }
.ks-guide .idea-media { position:relative;min-height:264px;overflow:hidden;background:#d8edf6 }
.ks-guide .idea-media img { width:100%;height:100%;position:absolute;inset:0;object-fit:cover;display:block;transition:transform .4s ease }
.ks-guide .idea:hover img { transform:scale(1.025) }
.ks-guide .idea-media[data-kind="board"] img {
    object-fit: cover;
    object-position: center;
    background: transparent;
    padding: 0;
}
.ks-guide .idea-media[data-kind="art"] img { object-position:70% 70% }
/* .ks-guide .idea-media[data-kind="art"] img {
    object-fit: contain;
    object-position: center;
} */
.ks-guide .idea-media .fallback { position:absolute;inset:0;z-index:0;background:linear-gradient(125deg,#a7dbe9,#dceff7);display:grid;place-items:center;color:#245c7c;text-align:center;padding:32px }
.ks-guide .idea-media .fallback svg { width:135px;max-width:50%;height:auto;opacity:.8 }
.ks-guide .idea-media img { z-index:1 }
.ks-guide .idea-media.is-broken img { display:none }
.ks-guide .idea-body { padding:34px 39px 32px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start }
.ks-guide .idea-index { font-size:.73rem;letter-spacing:.14em;color:#728ca0;font-weight:800;margin:0 0 12px;text-transform:uppercase }
.ks-guide .idea h3 { font-size:1.72rem;margin:0 0 16px }
.ks-guide .idea p { font-size:.96rem;line-height:1.7;color:#4f6272;max-width:565px;margin:0 0 12px }
.ks-guide .idea p:last-child { margin-bottom:0 }
.ks-guide .idea-share { border:2px solid #8cd9fc;background:linear-gradient(140deg,#fff,#f0fafe) }
.ks-guide .idea-share .idea-index { color:#078bcd }
.ks-guide .idea-share h3 { color:#075b85 }
.ks-guide .mini-cta { margin-top:8px }
.ks-guide .image-note { font-size:.75rem !important;color:#7b8a98!important;margin-top:13px!important;line-height:1.45!important }
.ks-guide .image-note a { color:#527c98 }
.ks-guide .choice { margin:76px 0 76px;padding:37px 42px;border-radius:25px;border:1px solid var(--border);background:#fff;box-shadow:var(--shadow) }
.ks-guide .choice h2 { font-size:1.85rem;margin:0 0 9px }
.ks-guide .choice > p { color:var(--muted);margin:0 0 23px }
.ks-guide .choice-grid { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px }
.ks-guide .choice-item { border:1px solid #e2ebf0;border-radius:13px;padding:15px 12px;background:#fafcfe;line-height:1.4 }
.ks-guide .choice-item strong { display:block;font-size:.88rem;margin-bottom:7px;color:#21384c }
.ks-guide .choice-item span { color:#5a6c7a;font-size:.8rem }
.ks-guide .choice-item.featured { background:#eff9ff;border-color:#83d8f9 }
.ks-guide .cta { display:grid;grid-template-columns:1.06fr .94fr;background:linear-gradient(120deg,#09648d,#0a93cb);border-radius:28px;overflow:hidden;min-height:340px;box-shadow:0 20px 55px rgba(12,101,151,.14) }
.ks-guide .cta-copy { padding:48px 52px;color:white;display:flex;flex-direction:column;justify-content:center;align-items:flex-start }
.ks-guide .cta-copy .eyebrow { color:#a4eaff }
.ks-guide .cta h2 { color:#fff;font-size:clamp(2.1rem,3.5vw,3rem);margin:0 0 16px }
.ks-guide .cta p { color:#e0f6ff;max-width:470px;line-height:1.7;font-size:1rem;margin:0 0 23px }
.ks-guide .cta .btn { background:#fff;color:#026a9d;box-shadow:none }
.ks-guide .cta .btn:hover { background:#e8f7ff;color:#015784 }
.ks-guide .cta-media { position:relative;min-height:330px;background:#2daacf }
.ks-guide .cta-media img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover }
.ks-guide .cta-media::after { content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,104,147,.26),transparent 75%) }
.ks-guide .below-cta { text-align:center;color:#637b8c;font-size:.89rem;margin:18px 0 68px }
.ks-guide .below-cta a { font-weight:700;text-decoration:none }
.ks-guide .credits { max-width:1110px;margin:0 auto;padding:13px 26px 29px;color:#879eae;font-size:.73rem;line-height:1.7 }
.ks-guide .credits summary { cursor:pointer;width:max-content;max-width:100%;color:#a5c5da }
.ks-guide .credits a { color:#a8dfff }
.ks-guide .credits p { margin:10px 0 0 }
@media (max-width:900px) {
.ks-guide .hero { grid-template-columns:1fr 45% }
.ks-guide .hero-content { padding:38px 30px }
.ks-guide .check { grid-template-columns:1fr }
.ks-guide .choice-grid { grid-template-columns:repeat(3,1fr) }
.ks-guide .cta-copy { padding:37px 34px }
.ks-guide .idea-body { padding:28px }
}
@media (max-width:700px) {
.ks-guide .ksg-container { padding:0 16px }
.ks-guide .hero { display:flex;flex-direction:column-reverse;border-radius:20px }
.ks-guide .hero-media { min-height:250px }
.ks-guide .hero-content { padding:28px 24px 32px }
.ks-guide h1 { font-size:2.35rem }
.ks-guide .hero-lead { font-size:1rem }
.ks-guide .intro { margin:29px auto 28px;font-size:.98rem }
.ks-guide .check { padding:24px 20px;gap:21px;margin-bottom:58px }
.ks-guide .check ul { grid-template-columns:1fr }
.ks-guide .section-header { margin-bottom:23px }
.ks-guide .idea { display:flex;flex-direction:column;min-height:0;border-radius:20px }
.ks-guide .idea-media { height:210px;min-height:210px }
.ks-guide .idea-body { padding:24px 23px 26px }
.ks-guide .idea h3 { font-size:1.5rem;margin-bottom:11px }
.ks-guide .idea p { font-size:.94rem }
.ks-guide .choice { padding:25px 20px;margin:54px 0 }
.ks-guide .choice h2 { font-size:1.62rem }
.ks-guide .choice-grid { grid-template-columns:1fr 1fr }
.ks-guide .cta { display:flex;flex-direction:column-reverse;border-radius:20px }
.ks-guide .cta-media { min-height:205px }
.ks-guide .cta-copy { padding:31px 25px 36px }
.ks-guide .below-cta { margin-bottom:49px }
}
@media (max-width:430px) {
.ks-guide .choice-grid { grid-template-columns:1fr }
.ks-guide .btn { width:100% }
.ks-guide .hero-links { width:100% }
.ks-guide .quiet-link { text-align:center;width:100% }
}
@media (prefers-reduced-motion:reduce) {
.ks-guide .btn, .ks-guide .idea-media img { transition:none }
}
/* Keep image-source credits readable on the light background. */
.ks-guide .credits summary {color:#52758e}
.ks-guide .credits a {color:#0284c7}
/* Fixed navbar already gets body padding in modern.css; no duplicate navigation here. */