:root { --ink: var(--wl-ink); --muted: var(--wl-ink-soft); --paper: var(--wl-parchment); --forest: var(--wl-forest); --ocean: var(--wl-ocean); --spark: var(--wl-spark-fire); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1rem/1.65 system-ui, sans-serif; }
.wrap { max-width: 1120px; margin: auto; padding: 1.25rem; }
.top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-bottom: 1px solid var(--wl-parchment-3); }
.brand { color: var(--ink); font-weight: 800; text-decoration: none; }
.lang { display: flex; gap: .7rem; font-size: .85rem; }
a { color: var(--forest); }
a:focus-visible { outline: 3px solid var(--ocean); outline-offset: 3px; }
.hero { padding: clamp(3rem, 9vw, 7rem) 1.25rem 3rem; text-align: center; }
.kicker { color: var(--ocean); font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1 { max-width: 800px; margin: .5rem auto 1rem; font-size: clamp(2.2rem, 6vw, 4.7rem); line-height: 1.02; letter-spacing: -.055em; }
.lede { max-width: 680px; margin: auto; color: var(--muted); font-size: 1.15rem; }
.choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.card { display: flex; flex-direction: column; padding: 2rem; border: 1px solid var(--wl-parchment-3); border-radius: 1rem; background: color-mix(in srgb, var(--paper) 84%, white); }
.card img { width: 96px; height: 96px; object-fit: contain; margin-bottom: 1rem; }
.card h2 { margin: 0 0 .5rem; font-size: 1.65rem; }
.card p { color: var(--muted); }
.button { display: inline-block; align-self: flex-start; margin-top: auto; padding: .75rem 1rem; border-radius: .45rem; background: var(--spark); color: var(--wl-forest-ink); font-weight: 800; text-decoration: none; }
.button.secondary { background: var(--forest); color: var(--paper); }
.note { margin: 2rem 0; padding: 1rem 1.25rem; border-left: 4px solid var(--spark); background: color-mix(in srgb, var(--spark) 10%, var(--paper)); }
footer { margin-top: 4rem; padding: 2rem 0; border-top: 1px solid var(--wl-parchment-3); color: var(--muted); font-size: .85rem; }
@media (max-width: 700px) { .choices { grid-template-columns: 1fr; } .top { align-items: flex-start; flex-direction: column; } }