/* Publieke pagina's (add-public-site): landing, hoe werkt het, download, bronnen, 404, plus de voet onder privacy en voorwaarden.
   Bouwt op shell.css (tokens, knoppen, kopbalk). Geen eigen kleuren buiten die tokens. */
@import url("shell.css");

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.wrap.narrow { max-width: 860px; }
.lede { font-size: clamp(19px, 2.2vw, 24px); line-height: 1.4; max-width: 46ch; margin: 18px 0 0; }
.cta { display: flex; gap: 14px; flex-wrap: wrap; margin: 28px 0 0; }
a.btn.big { font-size: 18px; padding: 17px 26px 15px; min-height: 58px; }
.topbar nav a[aria-current="page"] { border-bottom-color: var(--accent); }
.topbar .topbar-right { margin-left: auto; }

/* beelden: omkaderde vensters met harde schaduw */
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; border: var(--bw) solid var(--ink); box-shadow: 10px 10px 0 var(--ink); background: var(--white); }
.shot figcaption { font: 600 14px/1.35 var(--f-display); color: var(--muted); margin-top: 18px; }

/* hero */
.hero { padding: clamp(36px, 7vw, 88px) 0 clamp(40px, 6vw, 72px); }
.hero h1 { max-width: 15ch; color: var(--ink); }
.hero .need { margin: 16px 0 0; max-width: 60ch; }
.hero-shot { margin-top: clamp(32px, 5vw, 56px); animation: rise .7s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) { .hero-shot { animation: none; } }

/* banden */
.band { padding: clamp(44px, 7vw, 96px) 0; border-top: var(--bw) solid var(--ink); }
.band h2 { font-size: clamp(30px, 4.4vw, 60px); }
.band p { font-size: 19px; line-height: 1.5; max-width: 52ch; margin: 18px 0 0; }
.band.steady { background: var(--go); }
.band .two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: center; }


.band.world .two, .band.app .two { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.band.chase { background: var(--paper); }
.band.app { background: var(--go); }
.band.samen { background: var(--warn); }
.band.samen h2 { font-size: clamp(36px, 6vw, 84px); }
.band.safe { background: var(--ink); color: var(--paper); }
.band.safe a { color: var(--paper); text-decoration-color: var(--accent); }
.band.safe a:hover { background: var(--warn); color: var(--ink); }
.band.final { background: var(--paper); text-align: left; }

/* tekstpagina's */
.doc-main { padding-top: clamp(28px, 5vw, 56px); padding-bottom: 64px; max-width: 860px; }
.doc-main h2 { margin: 40px 0 12px; font-size: clamp(24px, 3vw, 32px); }
.doc-main p, .doc-main li { max-width: 68ch; }
.doc-main ul.legal, .doc-main ol.steps { padding-left: 24px; line-height: 1.55; }
.doc-main li { margin: 8px 0; }
ol.steps li::marker { font: 900 20px var(--f-display); }
.faq details { background: var(--white); border: var(--bw) solid var(--ink); margin: 0 0 12px; }
.faq summary { padding: 14px 16px; font: 800 17px/1.3 var(--f-display); text-transform: none; letter-spacing: 0; }
.faq summary:hover { background: var(--warn); }
.faq details[open] summary { border-bottom: var(--bw) solid var(--ink); }
.faq details p { margin: 0; padding: 14px 16px; }
.dl-state { margin: 28px 0; }
.dl-state .soon { font: 800 22px/1.3 var(--f-display); border: var(--bw) solid var(--ink); background: var(--warn); padding: 16px 18px; max-width: 34ch; }
ul.sources { list-style: none; padding: 0; margin: 28px 0 0; }
ul.sources li { background: var(--white); border: var(--bw) solid var(--ink); padding: 14px 16px; margin: 0 0 12px; max-width: none; overflow-wrap: anywhere; }

/* voet */
.site-foot { border-top: var(--bw) solid var(--ink); background: var(--paper); padding: 28px 0 40px; margin-top: 0; }
.site-foot .foot-tag { margin: 0 0 14px; font: 800 17px/1.3 var(--f-display); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.site-foot nav a { font: 800 15px/1.2 var(--f-display); padding: 8px 0; }
.site-foot .wrap { max-width: var(--max); }

@media (max-width: 760px) { /* shell.css makes the app header nowrap (drawer); the site header wraps its nav to a second row */
  .topbar[data-site-head] { flex-wrap: wrap; padding: 10px var(--gutter) 0; }
  .topbar[data-site-head] .brand { font-size: 21px; min-width: auto; } /* shell.css lets the app brand shrink to 0 next to the drawer button */
}
@media (max-width: 420px) { .topbar[data-site-head] #site-login .btn { padding: 9px 10px 8px; font-size: 13px; } }
@media (max-width: 820px) {
  .band .two, .band.world .two, .band.app .two { grid-template-columns: 1fr; }
  .shot img { box-shadow: 6px 6px 0 var(--ink); }
  .hero h1 { max-width: none; }
}
@media (max-width: 560px) {
  .cta a.btn.big { flex: 1 1 100%; }
  .band p { font-size: 18px; }
}