:root { --deep: var(--navy-deep); }
body { background: var(--paper); color: var(--body); }

/* Hero: the app's dark brand panel, framed by a hairline */
.free-hero { position: relative; overflow: hidden; padding: clamp(4.5rem, 8vw, 7.2rem) 0; background: radial-gradient(circle at 85% 0, rgba(169,130,53,.13), transparent 30rem), radial-gradient(circle at 10% 100%, rgba(169, 130, 53, .1), transparent 26rem), var(--navy-deep); color: #fff; text-align: center; border-bottom: 1px solid rgba(216, 197, 154, .45); }
.free-hero::after { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(216, 197, 154, .28); border-radius: 4px; pointer-events: none; }
.free-hero .shell { position: relative; z-index: 1; }
.page-eyebrow { margin: 0 0 1rem; color: var(--gold-deep); font: 700 .74rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.free-hero .page-eyebrow, .final-invitation .page-eyebrow { display: flex; align-items: center; justify-content: center; gap: .9rem; color: var(--gold-soft); }
.free-hero .page-eyebrow::before, .free-hero .page-eyebrow::after { content: ""; width: 44px; height: 1px; background: var(--gold-soft); opacity: .7; }
.free-hero h1 { max-width: 920px; margin: 0 auto 1.5rem; font-size: clamp(2.5rem, 5.4vw, 4.6rem); color: var(--cream); }
.free-hero h1 span { display: block; }
.free-hero h1 .hero-gold { margin-top: .1em; color: var(--gold-soft); font-style: italic; }
.free-hero p { max-width: 760px; margin: 0 auto; font-size: clamp(1.02rem, 1.5vw, 1.14rem); line-height: 1.85; color: rgba(244, 239, 228, .82); }

/* Before you begin */
.before { padding: clamp(4.5rem, 8vw, 6.5rem) 0; text-align: center; background: var(--paper); }
.before h2 { max-width: 820px; margin: 0 auto 1.4rem; font-size: clamp(2rem, 3.8vw, 3.1rem); }
.before-copy { max-width: 820px; margin: 0 auto; font-size: clamp(1.02rem, 1.3vw, 1.12rem); line-height: 1.85; color: var(--text-soft); }
.pillars { width: min(1120px, calc(100% - 2rem)); margin: clamp(2.8rem, 5vw, 4rem) auto 0; display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-book); }
.pillar { padding: clamp(2rem, 3vw, 2.6rem); text-align: left; background: var(--paper); }
.pillar + .pillar { border-left: 1px solid var(--line-soft); }
.pillar h3 { margin: 0 0 .8rem; font-size: clamp(1.35rem, 2vw, 1.6rem); line-height: 1.25; }
.pillar h3::after { content: ""; display: block; width: 40px; height: 1px; margin-top: 16px; background: var(--gold); }
.pillar p { margin: 0; color: var(--text-soft); line-height: 1.72; }

/* Course library */
.courses { padding: clamp(4rem, 6.5vw, 5.8rem) 0; background: radial-gradient(circle at 50% 0, rgba(169, 130, 53, .08), transparent 30rem), var(--warm); border-top: 1px solid var(--line-soft); }
.course-heading { text-align: center; margin-bottom: clamp(2.6rem, 5vw, 3.6rem); }
.course-heading h2 { max-width: 820px; margin: 0 auto; font-size: clamp(2.1rem, 4vw, 3.3rem); }
.course-grid { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.course-card { position: relative; display: flex; flex-direction: column; min-height: 100%; padding: clamp(2rem, 3.3vw, 2.6rem); overflow: hidden; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: 0 18px 50px rgba(20, 47, 73, .07); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.course-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-book); border-color: var(--gold-soft); }
.course-card.featured { grid-column: 1 / -1; width: calc(50% - .75rem); justify-self: center; }
.course-card h3 { margin: 0; font-size: clamp(1.55rem, 2.4vw, 2rem); line-height: 1.2; }
.course-title-accent { width: 48px; height: 1px; background: var(--gold); margin: 1rem 0 1.35rem; }
.course-card > .course-question { margin: 0 0 .6rem; color: var(--gold-deep); font: 700 .72rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.course-card > p { margin: 0; color: var(--text-soft); line-height: 1.75; font-size: 1rem; }
.card-bottom { margin-top: auto; padding-top: 1.7rem; }
.course-button { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 44px; padding: 0 1.25rem; border: 1px solid var(--navy); border-radius: 8px; background: var(--navy); color: #fff; text-decoration: none; font-weight: 600; font-size: .92rem; box-shadow: 0 1px 2px rgba(20, 47, 73, .14); transition: background-color .18s ease, border-color .18s ease; }
.course-button span { transition: transform .18s ease; }
.course-button:hover, .course-button:focus-visible { background: var(--deep); border-color: var(--deep); }
.course-button:hover span { transform: translateX(3px); }
.course-languages { margin: 1.3rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: .86rem; line-height: 1.65; }
.course-languages strong { color: var(--navy); font-weight: 600; }

.languages { padding: clamp(3.4rem, 6vw, 5.2rem) 0; background: var(--paper); text-align: center; }
.language-table { width: min(930px, calc(100% - 2rem)); margin: clamp(2.4rem, 4vw, 3.4rem) auto 0; text-align: left; border-top: 1px solid var(--line-soft); }
.language-row { display: grid; grid-template-columns: minmax(200px, .8fr) 2fr; gap: 2rem; padding: 1.4rem .5rem; border-bottom: 1px solid var(--line-soft); }
.language-row strong { color: var(--navy); font-family: var(--serif); font-weight: 400; font-size: 1.1rem; line-height: 1.45; }
.language-row span { color: var(--muted); line-height: 1.65; }

/* Closing invitation */
.final-invitation { padding: clamp(3.6rem, 6vw, 5rem) 0; text-align: center; background: radial-gradient(circle at 50% 0, rgba(169, 130, 53, .12), transparent 30rem), var(--navy-deep); color: #fff; }
.final-invitation h2 { max-width: 760px; margin: 0 auto 1.1rem; color: var(--cream); font-size: clamp(1.9rem, 3vw, 2.6rem); }
.final-invitation p { max-width: 680px; margin: 0 auto 1.8rem; color: rgba(244, 239, 228, .8); font-size: 1.04rem; line-height: 1.75; }
.final-invitation .button { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }
.final-invitation .button:hover { background: var(--gold); border-color: var(--gold); }
.final-invitation .button.button-outline { background: transparent; border-color: rgba(216, 197, 154, .55); color: var(--cream); }
.final-invitation .button.button-outline:hover { background: rgba(216, 197, 154, .12); border-color: var(--gold-soft); }
.site-footer { margin-top: 0; }

@media (max-width: 820px) {
  .free-hero::after { inset: 10px; }
  .pillars, .course-grid { grid-template-columns: 1fr; }
  .pillar + .pillar { border-left: 0; border-top: 1px solid var(--line-soft); }
  .course-card.featured { grid-column: auto; width: 100%; }
}
@media (max-width: 700px) { .final-invitation .button-row { flex-direction: column; align-items: center; } }