:root { color-scheme: light; font-family: system-ui, sans-serif; color: #102b37; background: #e8efef; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; padding: clamp(1rem, 5vw, 4rem); }
.layout { display: grid; grid-template-columns: 1.2fr 1fr; width: min(100%, 68rem); border-radius: 1.5rem; overflow: hidden; box-shadow: 0 1.5rem 5rem #102b3726; }
.brand { min-height: 34rem; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: clamp(1.5rem, 5vw, 4rem); color: #f3faf8; background: radial-gradient(ellipse at bottom right, #206763, transparent 70%), #102b37; }
.wordmark, .eyebrow, small { font-size: .75rem; font-weight: 750; letter-spacing: .14em; }
.wordmark { display: flex; align-items: center; gap: .8rem; }
.wordmark span { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .45rem; background: #a5f0d9; color: #102b37; letter-spacing: 0; }
h1 { margin: 0; font-size: clamp(3.1rem, 8vw, 6rem); line-height: .96; letter-spacing: -.075em; }
.brand .eyebrow, h1 span { color: #a5f0d9; }
.brand p, .panel p { line-height: 1.6; }
.panel { background: #fff; display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 5vw, 4rem); }
.panel .eyebrow { color: #24615a; }
h2 { margin: 0; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.055em; }
.button { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-top: 1rem; padding: .95rem 1.15rem; border-radius: .65rem; color: white; background: #14584f; text-decoration: none; font-weight: 700; }
.button:hover { background: #103d39; }
a:focus-visible { outline: .2rem solid #117e70; outline-offset: .25rem; }
.hint { font-size: .875rem; color: #465e65; }
@media (max-width: 48rem) {
  .layout { grid-template-columns: 1fr; }
  .brand { min-height: auto; }
}