/* AareDate's original palette: turquoise buttons, blue accents and the river-wave colours. */
:root {color-scheme: light; --ink: #dcdcdc; --muted: #e0e0e0; --paper: #151515; --line: #424242; --aare: #26a69a; --aare-deep: #13554f; --blue: #3778b7;}
* {box-sizing: border-box;}
html {scroll-behavior: smooth; scroll-padding-top: 24px;}
body {margin: 0; background: var(--paper); color: var(--ink); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.65; -webkit-text-size-adjust: 100%;}
a {color: inherit; text-underline-offset: 5px;}
button, input, summary {font: inherit;}
img {display: block; max-width: 100%; height: auto;}
h1, h2, h3, p {margin: 0;}
h1, h2, h3 {font-weight: 650; text-wrap: balance;}
h1 {font-size: clamp(2.65rem, 4.5vw, 4.3rem); line-height: 1.08; letter-spacing: -.045em; max-width: 17ch;}
h2 {font-size: clamp(1.85rem, 3vw, 2.65rem); line-height: 1.18; letter-spacing: -.035em;}
h3 {font-size: 1.3rem; line-height: 1.3; letter-spacing: -.02em;}
p {text-wrap: pretty;}
a:focus-visible, summary:focus-visible {outline: 3px solid var(--blue); outline-offset: 5px; border-radius: 4px;}
.landing-header :focus-visible, .landing-hero :focus-visible, .landing-cta :focus-visible, .landing-footer :focus-visible {outline-color: white;}
.landing-wrap {width: min(1180px, calc(100% - 64px)); margin-inline: auto;}
.landing-skip {position: absolute; top: -100px; left: 20px; padding: 12px 20px; background: white; z-index: 10;}
.landing-skip:focus {top: 12px;}
.landing-header {position: absolute; top: 0; left: 0; width: 100%; z-index: 3; color: #fff; background: linear-gradient(#0006, transparent);}
.landing-nav {min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 20px;}
.landing-logo {flex-shrink: 0;}
.landing-logo img {width: 168px; height: 44px; object-fit: contain;}
.landing-nav-actions {display: flex; align-items: center; gap: 28px; font-size: .94rem;}
.landing-nav a {text-decoration: none;}
.landing-nav a:hover {text-decoration: underline;}
.landing-login {padding: 10px 20px; border-radius: 8px; background: var(--blue); white-space: nowrap;}
.landing-language {position: relative;}
.landing-language summary {cursor: pointer; padding: 11px 0; min-height: 44px; white-space: nowrap;}
.landing-language ul {position: absolute; right: 0; top: 100%; list-style: none; margin: 5px 0; padding: 8px; min-width: 180px; background: var(--aare-deep); color: var(--ink); box-shadow: 0 10px 30px #0003; border: 1px solid var(--line); border-radius: 12px; z-index: 5;}
.landing-language a {display: block; padding: 9px 14px; border-radius: 6px;}
.landing-language a:hover, .landing-language [aria-current] {background: #26a69a1a;}
.landing-language a:focus-visible {outline-color: var(--blue);}
.landing-hero {position: relative; isolation: isolate; color: white; background: #474747; min-height: 730px; display: grid; align-items: center; overflow: hidden;}
.landing-hero-image {position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 70%;}
.landing-hero::before {content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #000b 0%, #0007 44%, #0001 100%);}
.landing-hero-inner {padding-block: 160px 120px;}
.landing-hero-copy {max-width: 670px;}
.landing-eyebrow {color: var(--aare); font-size: .78rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 24px;}
.landing-hero .landing-eyebrow {color: white;}
.landing-intro {margin-top: 26px; max-width: 49ch; font-size: 1.13rem; text-shadow: 0 1px 8px #0008;}
.landing-hero-actions {display: flex; align-items: center; flex-wrap: wrap; gap: 20px 26px; margin-top: 30px;}
.landing-button {display: inline-flex; justify-content: center; align-items: center; gap: 30px; min-height: 54px; padding: 13px 25px; border-radius: 100px; background: var(--aare); color: var(--ink); font-size: 1rem; font-weight: 700; text-decoration: none; transition: background .15s, color .15s;}
.landing-button:hover {background: var(--aare-deep); color: white;}
.landing-button span {font-size: 1.35rem; line-height: 1;}
.landing-text-link {font-size: .96rem; font-weight: 650; display: inline-block; padding-block: 10px; color: var(--aare-deep);}
.landing-hero .landing-text-link {color: white;}
.landing-small {font-size: .82rem; margin-top: 16px;}
.landing-hero-caption {position: absolute; right: 32px; bottom: 25px; padding: 7px 14px; border-radius: 8px; background: #0008; font-size: .82rem;}
.landing-section {padding-block: 72px; border-top: 1px solid var(--line);}
.landing-section > h2 {max-width: 700px;}
.landing-steps {display: grid; grid-template-columns: repeat(3,1fr); gap: 46px; list-style: none; padding: 0; margin: 46px 0 0;}
.landing-step-number {display: block; font-size: .85rem; color: #286185; margin-bottom: 22px; font-weight: 750;}
.landing-steps p {color: var(--muted); font-size: 1rem; margin-top: 15px;}
.landing-policy {background: var(--aare-deep); padding-block: 80px;}
.landing-policy-grid {display: grid; grid-template-columns: 1fr 1.05fr; gap: 100px;}
.landing-policy h2 {max-width: 15ch;}
.landing-policy h2 + p {margin-top: 26px; color: var(--muted);}
.landing-policy-rules {list-style: none; margin: 0; padding: 0;}
.landing-policy-rules li {display: grid; grid-template-columns: 22px 1fr; gap: 18px; padding-block: 20px; border-bottom: 1px solid #ddd;}
.landing-policy-rules li:first-child {padding-top: 0;}
.landing-policy-rules span {color: var(--aare); font-weight: 750;}
.landing-policy-report {font-size: .88rem; color: var(--muted); margin-top: 24px;}
.landing-choice {border-top: 0; display: grid; grid-template-columns: 1fr 1.05fr; gap: 100px;}
.landing-choice h2 {max-width: 12ch;}
.landing-choice p:not(.landing-eyebrow) {color: var(--muted); margin-bottom: 12px;}
.landing-faq {display: grid; grid-template-columns: 1fr 1.7fr; gap: 70px;}
.landing-faq details {border-bottom: 1px solid var(--line);}
.landing-faq summary {cursor: pointer; padding: 20px 26px 20px 0; font-weight: 650; line-height: 1.5;}
.landing-faq details:first-child summary {padding-top: 3px;}
.landing-faq details p {padding: 0 0 24px; color: var(--muted);}
.landing-members {text-align: center;}
.landing-members > h2 {margin-inline: auto;}
.landing-members-intro {color: var(--muted); max-width: 56ch; margin: 20px auto 0;}
.landing-member-list {display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 24px; list-style: none; margin: 36px 0 22px; padding: 0;}
.landing-member-list li {width: 120px;}
.landing-member {display: block; text-decoration: none; font-size: .9rem; line-height: 1.4;}
.landing-member img {width: 112px; height: 112px; margin: 0 auto 12px; object-fit: cover; border-radius: 50%; border: 4px solid white; box-shadow: 0 0 0 2px #26a69a80; transition: box-shadow .15s;}
.landing-member span {overflow-wrap: anywhere;}
.landing-member:hover img {box-shadow: 0 0 0 4px var(--aare);}
.landing-member:hover span {text-decoration: underline;}
.landing-waves {display: block; width: 100%; height: 130px; margin-bottom: -1px; overflow: hidden;}
.landing-wave-layers > use {animation: landing-wave 25s cubic-bezier(.55,.5,.45,.5) infinite;}
.landing-wave-layers > use:nth-child(1) {animation-delay: -2s; animation-duration: 7s;}
.landing-wave-layers > use:nth-child(2) {animation-delay: -3s; animation-duration: 10s;}
.landing-wave-layers > use:nth-child(3) {animation-delay: -4s; animation-duration: 13s;}
.landing-wave-layers > use:nth-child(4) {animation-delay: -5s; animation-duration: 20s;}
@keyframes landing-wave {from {transform: translate3d(-90px,0,0);} to {transform: translate3d(85px,0,0);}}
.landing-cta {text-align: center; padding: 70px 0 90px; color: white; background: linear-gradient(180deg,#2c707a 0%,#3973c5 35%,#286185 100%);}
.landing-cta h2 {max-width: 660px; margin-inline: auto;}
.landing-cta p {margin: 18px 0 26px;}
@media (max-width: 900px) {
 .landing-policy-grid, .landing-choice {gap: 45px;}
 .landing-steps {gap: 28px;}
 .landing-faq {gap: 35px; grid-template-columns: 1fr 1.5fr;}
}
@media (max-width: 650px) {
 .landing-wrap {width: calc(100% - 40px);}
 .landing-nav {min-height: 74px; gap: 12px;}
 .landing-logo img {width: 125px; height: 38px;}
 .landing-nav-actions {gap: 14px; font-size: .82rem;}
 .landing-login {padding: 10px 12px;}
 .landing-hero {min-height: 700px;}
 .landing-hero-image {object-position: 65% center;}
 .landing-hero::before {background: linear-gradient(180deg,#0008,#0009 60%,#0002);}
 .landing-hero-inner {padding-block: 132px 110px;}
 .landing-hero-caption {left: 20px; right: auto; bottom: 20px; max-width: calc(100% - 40px); font-size: .75rem;}
 .landing-eyebrow {font-size: .72rem; margin-bottom: 20px;}
 .landing-intro {margin-top: 22px; font-size: 1rem;}
 .landing-hero-actions {gap: 14px 22px;}
 .landing-section {padding-block: 46px;}
 .landing-steps {grid-template-columns: 1fr; gap: 30px; margin-top: 32px;}
 .landing-step-number {margin-bottom: 10px;}
 .landing-policy {padding-block: 48px;}
 .landing-policy-grid, .landing-choice, .landing-faq {grid-template-columns: 1fr; gap: 30px;}
 .landing-policy h2, .landing-choice h2 {max-width: 18ch;}
 .landing-policy-rules li {gap: 12px;}
 .landing-faq details:first-child summary {padding-top: 8px;}
 .landing-member-list {gap: 25px 12px;}
 .landing-member-list li {width: calc((100% - 24px) / 3); max-width: 120px;}
 .landing-member img {width: 88px; height: 88px; max-width: 100%;}
 .landing-waves {height: 75px;}
 .landing-cta {padding-block: 38px 56px;}
}
@media (max-width: 360px) {
 .landing-wrap {width: calc(100% - 32px);}
 .landing-logo img {width: 108px;}
 .landing-nav-actions {gap: 10px; font-size: .76rem;}
 .landing-login {padding-inline: 9px;}
 .landing-member img {width: 78px; height: 78px;}
 h1 {font-size: 2.45rem;}
}
@media (prefers-reduced-motion: reduce) {html {scroll-behavior: auto;} * {transition: none !important;} .landing-wave-layers > use {animation: none;}}

/* A shallow, asymmetric river edge blends the photo into the next section. */
.landing-hero-wave {position:absolute;bottom:-1px;left:0;width:100%;height:80px;pointer-events:none;}
.landing-hero-shore {fill:var(--paper,#151515);}
.landing-hero-caption {bottom:90px;}
@media(max-width:700px) {.landing-hero-wave {height:52px;} .landing-hero-caption {bottom:64px;}}

#how-it-works {border-top:0;}
