/* Base */
body { margin: 0; background: #0f304e; -webkit-font-smoothing: antialiased }
a { color: #c9a978 }
a:hover { color: #e0c49a }
h1, h2, h3 { text-wrap: balance }
p, li, blockquote { text-wrap: pretty }

.page { width: 100%; font-family: 'DM Sans', system-ui, sans-serif; color: rgba(255,255,255,0.88); background: #0f304e; box-sizing: border-box }

/* Text colors. Dark and light surfaces set these, and the components below read them. */
.hero, .section-navy, .cta, .offer-featured { --heading: #ffffff; --body: rgba(255,255,255,0.75); --accent: #c9a978 }
.section-mist, .section-white { --heading: #1A1A2E; --body: #4E4E68; --accent: #7a5e47 }

/* Sections and layout */
.section { padding: 112px 24px }
.hero { padding: 112px 24px 104px }
.section-navy { background: #0f304e }
.section-mist { background: #F4F6F9; color: #1A1A2E }
.section-white { background: #ffffff; color: #1A1A2E }

.container { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 48px }
.hero .container { gap: 28px }
.cta .container { align-items: center; gap: 24px; text-align: center }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px }
.grid-190 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)) }
.grid-240 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) }
.grid-280 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) }
.grid-460 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)) }
.grid-lined { gap: 1px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.1) }

/* Nav */
.nav { background: #091d31; border-bottom: 1px solid rgba(255,255,255,0.08); padding: 0 24px }
.nav-inner { max-width: 1100px; margin: 0 auto; padding: 10px 0; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px }
.nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none }
.nav-logo img { height: 72px; width: auto; display: block }

/* Buttons. Each variant repeats its color on :hover so the global a:hover doesn't recolor it. */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 30px; font-size: 16px; text-decoration: none }
.btn-sm { min-height: 44px; padding: 0 22px; font-size: 14px; letter-spacing: 0.3px }
.btn-md { min-height: 48px; padding: 0 24px; font-size: 15px }
.btn-lg { min-height: 54px; padding: 0 34px }
.btn-gold, .btn-gold:hover { background: #9d7a5d; color: #ffffff; font-weight: 600 }
.btn-ghost, .btn-ghost:hover { border: 1px solid rgba(201,169,120,0.6); color: #ffffff; font-weight: 500 }
.btn-outline, .btn-outline:hover { border: 1px solid #7a5e47; color: #1A1A2E; font-weight: 600 }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px }
.cta .actions { justify-content: center }

/* Shared type */
.eyebrow { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--accent) }
.eyebrow span { display: block; width: 28px; height: 1px; background: #9d7a5d }
.intro { display: flex; flex-direction: column; gap: 20px; max-width: 880px }
.section-title { margin: 0; font-family: Prata, Georgia, serif; font-weight: 400; font-size: clamp(32px, 4.2vw, 54px); line-height: 1.15; color: var(--heading) }
.lead { margin: 0; font-size: 18px; line-height: 1.7; color: var(--body) }
.lead a, .lead a:hover { color: var(--accent) }
.list-group { display: flex; flex-direction: column; gap: 20px }
.list-label { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.5; color: var(--heading) }
.text { margin: 0; font-size: 16px; line-height: 1.7; color: var(--body) }
.closing { margin: 0; font-family: Prata, Georgia, serif; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.45; color: var(--heading) }
.card-title { margin: 0; font-family: Prata, Georgia, serif; font-weight: 400; font-size: 24px; line-height: 1.3; color: var(--heading) }
.card-title-sm { font-size: 22px }
.kicker { font-size: 12px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent) }
.num { font-family: Prata, Georgia, serif; font-size: 30px; color: var(--accent) }
.num-lg { font-size: 40px }

/* Cards */
.panel { background: #ffffff; border: 1px solid rgba(16,49,79,0.12); padding: 32px; display: flex; flex-direction: column; gap: 12px }
.panel-index { font-size: 13px; font-weight: 600; letter-spacing: 2px; color: var(--accent) }
.plan-step .card-title { line-height: normal }
.tile { background: #112b45; padding: 32px; display: flex; flex-direction: column; gap: 12px }
.point { display: flex; flex-direction: column; gap: 12px }
.point-ruled { border-top: 1px solid rgba(201,169,120,0.5); padding-top: 24px }

/* Hero */
.hero-title { margin: 0; font-family: Prata, Georgia, serif; font-weight: 400; font-size: clamp(38px, 5.4vw, 72px); line-height: 1.1; letter-spacing: -0.01em; color: var(--heading) }
.hero-lead { margin: 0; max-width: 680px; font-size: 20px; line-height: 1.65; color: var(--body) }
.stats { display: flex; flex-wrap: wrap; gap: 1px; margin-top: 40px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.1) }
.stat { flex: 1 1 220px; padding: 28px; background: #0f304e; display: flex; flex-direction: column; gap: 8px }
.stat-value { font-family: Prata, Georgia, serif; font-size: 38px; color: var(--accent) }
.stat-label { font-size: 15px; line-height: 1.5; color: var(--body) }

/* Framework */
.pillar { background: #F4F6F9; padding: 36px 32px; display: flex; flex-direction: column; gap: 14px }
.pillar-icon { width: 52px; height: 52px; display: block }
.pillar-icon-wide { width: 58px }
.pillar .card-title { font-size: 30px; line-height: normal }
.pillar-tagline { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.5; color: var(--heading) }
.looks { margin-top: 8px; padding-top: 18px; border-top: 1px solid rgba(16,49,79,0.12); display: flex; flex-direction: column; gap: 10px }
.looks .kicker { letter-spacing: 2px }
.looks ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.6; color: var(--body) }

/* How it works */
.step { border-top: 2px solid #9d7a5d; padding-top: 20px; display: flex; flex-direction: column; gap: 10px }
.step h3 { margin: 0; font-size: 18px; font-weight: 600; color: var(--heading) }
.step p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--body) }

/* Why Illuminated and Why now */
.why-grid { gap: 40px 56px }
.now-grid { gap: 40px }

/* Proof */
.proof-band { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 64px; padding: 48px; background: #0f304e }
.proof-stat { display: flex; flex-direction: column; gap: 4px }
.proof-value { font-family: Prata, Georgia, serif; font-size: clamp(64px, 9vw, 112px); line-height: 1; color: #c9a978 }
.proof-label { font-size: 22px; color: rgba(255,255,255,0.8) }
.proof-band p { margin: 0; flex: 1 1 360px; font-size: 18px; line-height: 1.7; color: rgba(255,255,255,0.85) }
.quote { margin: 0; justify-content: space-between; gap: 24px }
.quote blockquote { margin: 0; font-size: 16px; line-height: 1.75; color: var(--heading) }
.quote figcaption { display: flex; flex-direction: column; gap: 4px }
.quote-name { font-weight: 600; color: var(--heading) }
.quote-role { font-size: 14px; color: var(--body) }

/* Paths */
.offer { background: #F4F6F9; padding: 36px 32px; display: flex; flex-direction: column; gap: 16px; border: 1px solid rgba(16,49,79,0.12) }
.offer-featured { background: #0f304e; color: rgba(255,255,255,0.88); border: 2px solid #9d7a5d; --body: rgba(255,255,255,0.8) }
.offer .card-title { font-size: 28px; line-height: normal }
.offer .btn { margin-top: auto }
.price { font-family: Prata, Georgia, serif; font-size: 36px; color: var(--accent) }
.price-group { display: flex; flex-direction: column; gap: 2px }
.price-monthly { line-height: 1.2; white-space: nowrap }
.price-monthly span { font-size: 18px }
.price-note { font-size: 15px; color: var(--body) }

/* Final call to action */
.cta { padding: 120px 24px 96px; background: #091d31 }
.cta .section-title { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.12 }
.cta .lead { max-width: 640px }
.fine-print { margin: 0; max-width: 600px; font-size: 14px; line-height: 1.65; color: rgba(255,255,255,0.7) }
.quiz { margin: 0; font-size: 15px; line-height: 1.6; color: var(--body) }
.quiz a, .quiz a:hover { color: #c9a978 }
.contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; margin-top: 48px }
.contact { display: flex; align-items: center; gap: 16px; text-align: left }
.contact img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block }
.contact-text { display: flex; flex-direction: column; gap: 2px }
.contact-name { font-weight: 600; color: #ffffff }
.contact-role { font-size: 14px; color: rgba(255,255,255,0.7) }
.badges { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 56px }
.badges-label { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.6) }
.badges img { width: 100%; max-width: 520px; height: auto; display: block }

.footer { padding: 28px 24px; background: #091d31; border-top: 1px solid rgba(255,255,255,0.08); text-align: center; font-size: 13px; color: rgba(255,255,255,0.6) }