/* Velance — clean brand polish (loaded last on every public page).
   Reduction pass: orange becomes a signature accent (nav CTA, key headline words, submit, hover/focus),
   shapes get softer on one radius scale, buttons become pills. No new colours, gradients, shadows or borders. */

:root{
  --r-pill:999px;     /* buttons, small controls */
  --r-field:14px;     /* form fields */
  --r-card:20px;      /* standard cards / framed images */
  --r-feature:24px;   /* large feature / image cards */
  --r-hero:28px;      /* large split-section media */
  --ds-r-lg:var(--r-hero);
  --ds-r-sm:var(--r-feature);
}

/* ───────── Radius ───────── */
.wwd-card{border-radius:var(--r-feature)}
html{background:#fff}                                                               /* index had a navy canvas that could peek through at edges */
.abt-origin-photo{border-radius:var(--r-card)}
.fo-card{border-radius:var(--r-card)}
.fo-poster{border-radius:var(--r-card)}
.apply-card{border-radius:var(--r-card)}
.finput{border-radius:var(--r-field)}
[class$="-strip-img"]{border-radius:var(--r-card);overflow:hidden}

/* Split-section media bleeds to the viewport edge: only the free (inner) corners are rounded.
   (Membership's two split images fade into the page, so they stay as they are.) */
.intro-visual{border-radius:var(--r-hero) 0 0 var(--r-hero)}
.abt-idea-photo{border-radius:0 var(--r-hero) var(--r-hero) 0}
@media(max-width:900px){
  .intro-visual,.abt-idea-photo{border-radius:var(--r-feature)}
}

/* ───────── Buttons ───────── */
/* Bottom CTA bands (dark photo): white pill, navy text; orange only appears on hover as text colour */
.cta-flyout-btn{background:#fff;color:var(--lt-heading);border:1.5px solid #fff;border-radius:var(--r-pill);padding:14px 32px}
.cta-flyout-btn:hover,.cta-flyout-btn:focus-visible{background:#fff;border-color:#fff;color:var(--lt-accent)}
/* same CTA on the one light section: navy pill */
#mem-free .cta-flyout-btn{background:var(--lt-heading);border-color:var(--lt-heading);color:#fff}
#mem-free .cta-flyout-btn:hover,#mem-free .cta-flyout-btn:focus-visible{background:var(--ch);border-color:var(--ch);color:var(--deep,#03111F)}

/* Secondary outlined CTA ("Lees ons verhaal"): navy, pill */
.intro-cta{color:var(--lt-heading);border:1px solid rgba(7,27,51,.32);border-radius:var(--r-pill);padding:14px 28px}
.intro-cta:hover,.intro-cta:focus-visible{color:var(--lt-accent);border-color:var(--lt-accent)}

/* Forms & confirmation pages */
.btn-submit,.btn-contact-submit{border-radius:var(--r-pill)}                       /* conversion buttons keep the orange fill */
.btn-next,.btn-result-p,.btn-confirm-p{background:var(--lt-heading);color:#fff;border:1.5px solid var(--lt-heading);border-radius:var(--r-pill)}
.btn-next:hover,.btn-result-p:hover,.btn-confirm-p:hover{background:var(--ch);border-color:var(--ch);color:var(--deep,#03111F)}
.btn-prev,.btn-result-s,.btn-confirm-s{border-radius:var(--r-pill)}

/* Fly-out detail pages (white pills on the brand colour) */
.az-btn,.cr-btn,.ap-btn,.oe-btn{border-radius:var(--r-pill)}

/* ───────── Orange → neutral (secondary / decorative details) ───────── */
.join-link,.join-link-arrow{color:var(--lt-heading)}
.join-link:hover,.join-link:focus-visible{color:var(--lt-accent)}

.faq-icon::before,.faq-icon::after{background:var(--lt-heading);transition:background .3s}
.faq-q:hover .faq-icon::before,.faq-q:hover .faq-icon::after,
.faq-item.open .faq-icon::before,.faq-item.open .faq-icon::after{background:var(--ch)}

.join-step:not(:first-child)::before{background:linear-gradient(to bottom,transparent,rgba(7,27,51,.2) 50%,transparent)}
@media(max-width:900px){
  .join-step:not(:first-child)::before{background:linear-gradient(to right,transparent,rgba(7,27,51,.2) 50%,transparent)}
}
.mem-includes-col:not(:nth-child(3n+1))::before{background:linear-gradient(to bottom,transparent 0%,rgba(7,27,51,.2) 18%,rgba(7,27,51,.2) 82%,transparent 100%)}
.abt-origin-quote-mark{background:rgba(7,27,51,.35)}

/* text links inside copy / contact / legal: navy + underline, orange on hover */
.contact-value a,.consent-item a,.doc-p a{color:var(--lt-heading);text-decoration:underline;text-underline-offset:3px}
.contact-value a:hover,.consent-item a:hover,.doc-p a:hover{color:var(--lt-accent)}

/* small orange labels / markers → muted neutral */
.page-hero-label,.step-head-label,.apply-result-next,.confirm-next,.doc-table th,.lv-list>li::before{color:var(--lt-muted)}
.doc-list li::before{color:var(--lt-muted)}

/* apply progress + result icons */
.prog-step.active .prog-dot,.prog-step.done .prog-dot{border-color:var(--lt-heading);color:var(--lt-heading);background:#fff;box-shadow:none}
.prog-step.active .prog-label,.prog-step.done .prog-label{color:var(--lt-heading)}
.apply-result-icon,.confirm-icon,.pl-result-icon{border-color:rgba(7,27,51,.28)}
.apply-result-icon svg path,.confirm-icon svg path,.pl-result-icon svg path{stroke:var(--lt-heading)}

/* native checkbox / radio tint */
.cf-consent input,.consent-item input,.radio-opt input{accent-color:var(--lt-heading)}

/* ── OUTLINE-ONLY CTAs ─────────────────────────────────────────────────────────
   No filled buttons anywhere: every CTA is a thin outline with a barely-there tint on hover.
   Dark sections (closing banners, fly-out pages) → white outline; light sections → navy outline. */
html body .cta-flyout-btn,
html body .az-btn-solid,html body .oe-btn-solid,html body .ap-btn-solid,html body .cr-btn-solid{
  background:transparent;color:#fff;border:1.5px solid #fff;box-shadow:none}
html body .cta-flyout-btn:hover,html body .cta-flyout-btn:focus-visible,
html body .az-btn-solid:hover,html body .oe-btn-solid:hover,html body .ap-btn-solid:hover,html body .cr-btn-solid:hover{
  background:rgba(255,255,255,.12);color:#fff;border-color:#fff;opacity:1}
html body .cta-flyout-btn:hover .cta-flyout-arrow,html body .cta-flyout-btn:focus-visible .cta-flyout-arrow{color:#fff}
html body #mem-free .cta-flyout-btn{background:transparent;color:var(--lt-heading);border:1.5px solid var(--lt-heading)}
html body #mem-free .cta-flyout-btn:hover,html body #mem-free .cta-flyout-btn:focus-visible{background:rgba(7,27,51,.06);color:var(--lt-heading);border-color:var(--lt-heading)}
html body .btn-p,html body .price-cta,html body .btn-next,html body .btn-submit,html body .btn-result-p,
html body .btn-confirm-p,html body .btn-contact-submit,html body .pl-submit{
  background:transparent;color:var(--lt-heading);border:1.5px solid var(--lt-heading);box-shadow:none}
html body .btn-p:hover,html body .price-cta:hover,html body .btn-next:hover,html body .btn-submit:hover,html body .btn-result-p:hover,
html body .btn-confirm-p:hover,html body .btn-contact-submit:hover,html body .pl-submit:hover,
html body .btn-next:focus-visible,html body .btn-submit:focus-visible,html body .btn-contact-submit:focus-visible{
  background:rgba(7,27,51,.06);color:var(--lt-heading);border-color:var(--lt-heading);transform:none}

/* ── CLOSING CTA BARS: a straight bar with rounded corners and a little air around it ── */
#abt-cta,#cta-flyout,.az-cta,.oe-cta,.ap-cta,.cr-cta{margin:10px 10px 46px;border-radius:28px;overflow:hidden}   /* 46 = 10 of air + the 36 the footer tucks over */
@media(max-width:620px){#abt-cta,#cta-flyout,.az-cta,.oe-cta,.ap-cta,.cr-cta{border-radius:24px;margin-bottom:38px}}