:root {
  --forest: #102f27;
  --forest-2: #173c32;
  --mint: #d9eee6;
  --cream: #f7f3ec;
  --paper: #fffdf9;
  --beige: #eadcc8;
  --ink: #122d25;
  --muted: #5f7068;
  --line: #d9e2dd;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; }

.gateway { min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; }
.gateway-inner { width: min(960px, 100%); }
.brand-block { text-align: center; margin: 0 auto 56px; }
.brand-block img { display: block; width: min(250px, 68vw); height: auto; margin: 0 auto 18px; }
.brand-block p { margin: 0; color: var(--muted); font-size: clamp(1rem, 2vw, 1.15rem); }

.choice { text-align: center; }
.eyebrow, .card-kicker { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 800; }
.eyebrow { color: var(--forest-3, #2b6c5b); margin: 0 0 10px; }
h1 { margin: 0 0 28px; color: var(--forest); font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -.04em; line-height: 1.05; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; text-align: left; }
.choice-card { display: flex; flex-direction: column; min-height: 270px; padding: clamp(24px, 4vw, 38px); border: 1px solid var(--line); border-radius: 22px; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.choice-card:hover, .choice-card:focus-visible { transform: translateY(-4px); box-shadow: 0 16px 35px rgba(16, 47, 39, .12); outline: none; }
.choice-card:focus-visible { box-shadow: 0 0 0 4px rgba(43, 108, 91, .28), 0 16px 35px rgba(16, 47, 39, .12); }
.personal { background: var(--mint); }
.parcelkind { background: var(--paper); }
.card-kicker { color: #2b6c5b; margin-bottom: 16px; }
h2 { margin: 0 0 12px; color: var(--forest); font-size: clamp(1.6rem, 3vw, 2.15rem); letter-spacing: -.03em; }
.choice-card p { max-width: 34ch; margin: 0; color: var(--muted); line-height: 1.55; }
.card-action { margin-top: auto; padding-top: 28px; color: var(--forest); font-weight: 850; }
.card-action span { display: inline-block; margin-left: 5px; transition: transform .18s ease; }
.choice-card:hover .card-action span, .choice-card:focus-visible .card-action span { transform: translateX(4px); }

footer { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px 26px; margin-top: 56px; color: var(--muted); font-size: .86rem; }
footer a { text-decoration: none; }
footer a:hover, footer a:focus-visible { color: var(--forest); text-decoration: underline; }

@media (max-width: 680px) {
  .gateway { padding: 28px 16px; align-items: start; }
  .brand-block { margin-bottom: 44px; }
  .choice-grid { grid-template-columns: 1fr; gap: 14px; }
  .choice-card { min-height: 220px; }
  footer { margin-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}