html, body, #root { margin: 0; min-height: 100%; }
body { background:#faf8f4; font-family:Arial, Helvetica, sans-serif; line-height:1.45; }
* { box-sizing:border-box; }
main { max-width:1040px; margin:0 auto; padding:24px; }
a:focus-visible { outline:3px solid #c9a44c; outline-offset:5px; }
@media(max-width:480px) { main { padding:14px; } }
@media(prefers-reduced-motion:reduce) { .kr-btn { transition:none; } }
.kr { --navy:#0e1f33; --navy2:#16304d; --gold:#c9a44c; --cream:#f3ece0; color: var(--navy); display:flex; flex-direction:column; gap:20px; }
.kr h1,.kr h2,.kr h3,.kr p { margin:0; }
.kr-hero { background: radial-gradient(120% 120% at 85% 0%, var(--navy2), var(--navy) 60%); color: var(--cream); border-radius: 20px; padding: 28px 22px; display:flex; flex-direction:column-reverse; gap: 28px; align-items:center; }
.kr-copy { width:100%; }
.kr-eyebrow { color: var(--gold); letter-spacing:.18em; text-transform:uppercase; font-size:12px; margin-bottom:12px !important; }
.kr h1 { font-size: clamp(42px, 9vw, 76px); line-height:1; letter-spacing:-.02em; }
.kr-sub { font-size: 19px; line-height:1.4; margin-top:14px !important; opacity:.9; max-width: 28ch; }
.kr-bars { display:flex; gap:6px; height:46px; margin-top:26px; max-width:360px; }
.kr-bars span { flex:1; border:1.5px solid rgba(243,236,224,.35); border-radius:3px; }
.kr-bars span.on { background: var(--gold); border-color: var(--gold); }
.kr-bars-label { display:flex; justify-content:space-between; max-width:360px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; opacity:.6; margin-top:8px !important; }
.kr-buttons { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.kr-btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px; border-radius:999px; text-decoration:none; font-weight:600; transition: transform .15s ease, background .15s ease; }
.kr-btn:hover { transform: translateY(-2px); }
.kr-gold { background: var(--gold); color: var(--navy); }
.kr-ghost { border:1.5px solid currentColor; color: inherit; }
.kr-by { margin-top:22px !important; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color: var(--gold); }
.kr-cover { flex: 0 0 auto; width: min(260px, 70%); }
.kr-cover img { display:block; width:100%; height:auto; border-radius:6px; box-shadow: 0 30px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08); transform: rotate(-2deg); }
.kr-quote { background: var(--cream); border-radius:20px; padding: 32px 24px; text-align:center; }
.kr-quote p { font-size: clamp(22px, 4vw, 32px); line-height:1.3; font-weight:600; max-width: 24ch; margin: 0 auto !important; }
.kr-quote span { display:block; margin-top:14px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#8a6d22; }
.kr-section { padding: 16px 4px; }
.kr-section h2, .kr-cta h2 { font-size: clamp(26px,5vw,38px); letter-spacing:-.01em; }
.kr-lead { margin-top:10px !important; font-size:18px; opacity:.75; }
.kr-grid { display:grid; grid-template-columns:1fr; gap:14px; margin-top:22px; }
.kr-tile { background: var(--navy); color: var(--cream); border-radius:16px; padding:22px; }
.kr-tile b { color: var(--gold); font-size:14px; letter-spacing:.14em; }
.kr-tile h3 { font-size:22px; margin:8px 0 8px !important; }
.kr-tile p { opacity:.8; line-height:1.5; }
.kr-cta { text-align:center; background: linear-gradient(135deg, var(--navy), var(--navy2)); color: var(--cream); border-radius:20px; padding:36px 22px; }
.kr-cta .kr-buttons { justify-content:center; }
.kr-foot { margin-top:28px !important; font-size:13px; opacity:.55; }
@media (min-width: 768px) {
  .kr-hero { flex-direction:row; padding: 48px 44px; gap:48px; justify-content:space-between; }
  .kr-grid { grid-template-columns: repeat(3,1fr); }
  .kr-cover { width: 300px; }
}
.kr a.kr-ghost { color: var(--cream) !important; border-color: rgba(243,236,224,.6); background: rgba(255,255,255,.06); }
.kr a.kr-ghost:hover { background: rgba(255,255,255,.14); }
.kr a.kr-gold { color: var(--navy) !important; }