/* ============================================================
   /inschrijven/ : NL email course signup, two versions (A/B).
   Tokens copied from online-pt-cursus-nederlands/styles.css so the
   page reads as the same brand. Minimum readable text: 16px.
   ============================================================ */
:root{
  --bg:#0a0a0c; --bg-alt:#0f0f13; --surface:#141519; --surface-2:#1b1d23;
  --ink:#f4f5f7; --ink-soft:#c8cdd6; --ink-mute:#a8adb5;
  --accent:#2f86f0; --accent-2:#6aa3ee; --accent-deep:#1f5fc0;
  --accent-btn:#2674d2; --accent-btn-hi:#3a8bef; --link:#9cc4f7;
  --err:#ff8a80;
  --border:rgba(255,255,255,.09); --border-2:rgba(255,255,255,.17);
  --r-btn:10px; --r-card:16px;
  --ease:cubic-bezier(.32,.72,0,1);
  --shadow-card:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 44px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{font-size:16px; overflow-x:clip; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:'Inter',system-ui,-apple-system,sans-serif; font-size:1.0625rem; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip}
img{max-width:100%; height:auto; display:block}
h1,h2,h3{font-family:'Hanken Grotesk','Inter',sans-serif; margin:0; text-wrap:balance}
p{margin:0; text-wrap:pretty}
a{color:var(--link)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent-2); outline-offset:3px; border-radius:6px}
.tnum{font-variant-numeric:tabular-nums lining-nums}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip{position:absolute; left:-9999px; top:0; z-index:100; padding:12px 18px; background:#fff; color:#0a0a0c; border-radius:var(--r-btn); font-weight:700}
.skip:focus{left:16px; top:16px}

/* ---------- A/B switch. No JS = version 1. ---------- */
.v2{display:none}
html[data-v="2"] .v1{display:none}
html[data-v="2"] .v2{display:block}

/* ---------- shared form ---------- */
.sform{width:100%}
.sform-row{display:flex; flex-direction:column; gap:10px}
.sform input{width:100%; min-height:56px; padding:0 18px; font:inherit; font-size:1.0625rem; border-radius:var(--r-btn); border:1.5px solid transparent; outline:none; transition:border-color .15s var(--ease), box-shadow .15s var(--ease)}
.sform input:focus-visible{border-color:var(--accent-2); box-shadow:0 0 0 4px rgba(106,163,238,.28)}
.sform input[aria-invalid="true"]{border-color:var(--err)}
.sbtn{min-height:56px; padding:0 26px; font:inherit; font-weight:700; font-size:1.1875rem; color:#fff; border:0; border-radius:var(--r-btn); cursor:pointer; white-space:nowrap; transition:transform .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease)}
.sbtn:active{transform:translateY(1px)}
.sbtn[disabled]{cursor:progress; opacity:.75}
.sbtn.is-busy .sbtn-label::after{content:""; display:inline-block; width:1em; height:1em; margin-left:10px; vertical-align:-.15em; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sform-msg{min-height:0; margin-top:8px; font-size:1rem; color:var(--err)}
.sform-msg:empty{display:none}
@media(min-width:520px){.sform-row{flex-direction:row}.sform input{flex:1}}

/* ============================================================
   VERSION 1: the existing page, rebuilt. Same copy and order,
   brand type, real contrast, no site chrome.
   ============================================================ */
.v1{background:#fff}
.v1-top{background:#000; padding:18px 16px; display:flex; justify-content:center}
.v1-logo{height:34px; width:auto}
.v1-hero{background:#1b1b1d; padding:44px 20px 40px; text-align:center}
.v1-hero h1{max-width:820px; margin:0 auto; font-size:clamp(1.85rem,1.3rem + 2.4vw,2.9rem); font-weight:800; line-height:1.15; letter-spacing:-.015em; color:#fff}
.v1-sub{max-width:620px; margin:18px auto 26px; font-size:1.1875rem; color:#e9eaee}
.sform--v1{max-width:560px; margin:0 auto}
.sform--v1 .sform-row{flex-direction:column}
.sform--v1 input{background:#f4f6f8; color:#14161a; text-align:center}
.sform--v1 input::placeholder{color:#474c54}
.sform--v1 .sbtn{background:#c62828}
.sform--v1 .sbtn:hover{background:#b71c1c}
.v1-legal{max-width:560px; margin:18px auto 0; font-size:1rem; color:#d5d8de}
.v1-legal a{color:#9cc4f7}
.v1-list{max-width:720px; margin:0 auto; padding:52px 20px 64px; color:#1b1d22}
.v1-list h2{text-align:center; font-size:clamp(1.75rem,1.4rem + 1.4vw,2.25rem); font-weight:800; color:#1d3a6e; margin-bottom:28px}
.v1-list ol{list-style:none; margin:0; padding:0}
.v1-list li{display:grid; grid-template-columns:2.2em 1fr; gap:6px; padding:12px 0; border-bottom:1px solid #e7e9ee; font-size:1.0625rem; line-height:1.5}
.v1-num{font-weight:700; color:#1d3a6e}
.v1-tag{display:table; margin-top:6px; padding:1px 10px; font-size:1rem; font-weight:600; color:#1d3a6e; background:#e7eef9; border-radius:999px; white-space:nowrap}
.v1-foot{background:#000; color:#c8cdd6; text-align:center; padding:24px 16px; font-size:1rem}

/* ============================================================
   VERSION 2: the new page
   ============================================================ */
.v2-wrap{max-width:1160px; margin:0 auto; padding:0 20px}
.v2-narrow > *{max-width:720px}
.v2-top{position:relative; z-index:2; padding:18px 20px; display:flex; justify-content:center}
.v2-logo{height:30px; width:auto}
@media(min-width:960px){.v2-top{justify-content:flex-start; max-width:1160px; margin:0 auto; padding:26px 20px}}

/* hero */
.v2-hero{position:relative; padding:14px 0 56px; overflow:hidden; background:radial-gradient(900px 760px at 88% 18%,rgba(47,134,240,.2),rgba(47,134,240,0) 70%)}
.v2-hero-in{position:relative; display:grid; gap:34px}
.v2-eyebrow{display:inline-flex; align-items:center; gap:10px; font-size:1rem; font-weight:600; color:var(--accent-2); margin-bottom:14px}
.v2-eyebrow::before{content:""; width:24px; height:2px; background:var(--accent); border-radius:2px}
.v2-hero h1{font-size:clamp(2.05rem,1.35rem + 3.1vw,3.85rem); font-weight:800; line-height:1.06; letter-spacing:-.025em; color:#fff}
.v2-sub{margin:18px 0 26px; max-width:34em; font-size:1.125rem; color:var(--ink-soft)}
.sform--v2 input{background:var(--surface-2); color:var(--ink); border-color:var(--border-2)}
.sform--v2 input::placeholder{color:var(--ink-mute)}
.sform--v2 .sbtn{padding:0 36px; background:var(--accent-btn); box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 8px 20px rgba(0,0,0,.45)}
.sform--v2 .sbtn:hover{background:var(--accent-btn-hi)}
.v2-hero .sform--v2{max-width:540px}
.v2-micro{margin-top:12px; font-size:1rem; color:var(--ink-mute)}
.v2-micro a{color:var(--link)}
.v2-proof{list-style:none; margin:24px 0 0; padding:18px 0 0; border-top:1px solid var(--border); display:grid; gap:10px; max-width:540px; font-size:1rem; color:var(--ink-soft)}
.v2-proof li{display:flex; align-items:baseline; gap:10px}
@media(max-width:519px){.v2-proof li{display:block}.v2-proof strong{display:block; min-width:0}}
.v2-proof strong{flex:none; min-width:4.6em; color:#fff; font-family:'Hanken Grotesk',sans-serif; font-size:1.25rem}
.v2-duo{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-self:center}
.v2-person{position:relative; margin:0; border-radius:var(--r-card); overflow:hidden; border:1px solid var(--border); background:var(--surface); aspect-ratio:4/5; box-shadow:var(--shadow-card)}
.v2-person img{width:100%; height:100%; object-fit:cover}
.v2-person figcaption{position:absolute; left:0; right:0; bottom:0; padding:40px 12px 12px; background:linear-gradient(to top,rgba(10,10,12,.92) 30%,rgba(10,10,12,0)); display:flex; flex-direction:column; gap:2px}
.v2-person figcaption strong{font-size:1rem; color:#fff}
.v2-person figcaption > span{font-size:1rem; line-height:1.35; color:var(--ink-soft)}
.v2-person .narrow{display:none}
@media(max-width:519px){.v2-person .wide{display:none}.v2-person .narrow{display:inline}.v2-person figcaption{padding:36px 10px 10px}}
@media(max-width:959px){.v2-duo{max-width:520px}}
@media(min-width:960px){
  .v2-hero{padding:24px 0 96px}
  .v2-hero-in{grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:center; gap:48px}
}

/* sections */
.v2-sec{padding:72px 0}
.v2-sec h2{font-size:clamp(1.75rem,1.3rem + 1.9vw,2.6rem); font-weight:700; line-height:1.1; letter-spacing:-.02em; color:#fff; max-width:22em}
.v2-lead{margin-top:12px; font-size:1.125rem; color:var(--ink-soft); max-width:36em}
@media(max-width:760px){.v2-sec{padding:52px 0}}

/* three lesson cards: one big, two small */
.v2-taste{background:var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.v2-cards{display:grid; gap:14px; margin-top:30px}
.v2-card{padding:24px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-card)}
.v2-card-les{font-size:1rem; font-weight:600; color:var(--accent-2); margin-bottom:8px}
.v2-card h3{font-size:1.3125rem; font-weight:700; line-height:1.2; color:#fff; margin-bottom:10px}
.v2-card p:last-child{color:var(--ink-soft)}
.v2-card strong{color:#fff}
.v2-card--big{background:linear-gradient(160deg,#16243b 0%,var(--surface) 62%); border-color:rgba(106,163,238,.28)}
.v2-bignum{font-family:'Hanken Grotesk',sans-serif; font-weight:800; font-size:clamp(4.5rem,3rem + 7vw,9rem); line-height:.9; letter-spacing:-.04em; margin:4px 0 14px; color:#fff}
.v2-bignum span{display:block; margin-top:8px; font-size:1.25rem; font-weight:700; letter-spacing:0; line-height:1.2; color:var(--accent-2)}
.v2-card--big h3{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem)}
@media(min-width:860px){
  .v2-cards{grid-template-columns:7fr 5fr; grid-template-rows:auto auto}
  .v2-card--big{grid-row:span 2; padding:36px; display:flex; flex-direction:column; justify-content:flex-end; min-height:100%}
}

/* inbox */
.v2-inbox-in{display:grid; gap:28px}
.v2-midcta{display:inline-flex; align-items:center; min-height:52px; margin-top:22px; padding:0 28px; font-weight:700; font-size:1.1875rem; color:#fff; text-decoration:none; background:var(--accent-btn); border-radius:var(--r-btn); transition:background .15s var(--ease)}
.v2-midcta:hover{background:var(--accent-btn-hi)}
.v2-inbox{list-style:none; margin:0; padding:8px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-card)}
.v2-mail{display:flex; gap:14px; align-items:flex-start; padding:12px 12px; border-radius:12px}
.v2-mail + .v2-mail{border-top:1px solid var(--border); border-top-left-radius:0; border-top-right-radius:0}
.v2-mail-from{flex:none; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--surface-2); border:1px solid var(--border-2); font-size:1rem; font-weight:700; letter-spacing:.02em; color:var(--ink-soft)}
.v2-mail-body{min-width:0; display:flex; flex-direction:column; gap:2px}
.v2-mail-meta{display:flex; gap:10px; font-size:1rem; line-height:1.35; color:var(--ink-mute)}
.v2-mail-subj{font-size:1rem; line-height:1.4; color:var(--ink)}
.v2-mail.is-today{background:rgba(47,134,240,.1)}
.v2-mail.is-today .v2-mail-from{background:#1a4fa3; border-color:transparent; color:#fff}
.v2-mail.is-today .v2-mail-meta span:last-child{color:var(--link); font-weight:600}
.v2-mail.is-today .v2-mail-subj{font-weight:600; color:#fff}
.v2-tag{display:inline-block; margin-left:6px; padding:0 10px; font-size:1rem; font-weight:600; color:#0a0a0c; background:var(--accent-2); border-radius:999px; white-space:nowrap}
@media(min-width:960px){
  .v2-inbox-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:56px; align-items:start}
  .v2-inbox-copy{position:sticky; top:40px}
}

/* who */
.v2-who{background:var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.v2-bios{display:grid; gap:14px; margin-top:30px}
.v2-bio{padding:24px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card)}
.v2-face{width:80px; height:80px; border-radius:50%; object-fit:cover; margin-bottom:16px; border:1px solid var(--border-2)}
.v2-bio h3{font-size:1.3125rem; font-weight:700; color:#fff; margin-bottom:8px}
.v2-bio p{color:var(--ink-soft)}
@media(min-width:760px){.v2-bios{grid-template-columns:1fr 1fr}}

/* faq */
.v2-faq details{border-bottom:1px solid var(--border)}
.v2-faq h2{margin-bottom:18px}
.v2-faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:16px; align-items:center; padding:18px 0; font-weight:600; font-size:1.125rem; color:#fff}
.v2-faq summary::-webkit-details-marker{display:none}
.v2-faq summary::after{content:""; flex:none; width:12px; height:12px; border-right:2px solid var(--ink-soft); border-bottom:2px solid var(--ink-soft); transform:rotate(45deg) translateY(-3px); transition:transform .2s var(--ease)}
.v2-faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.v2-faq details p{padding:0 0 18px; color:var(--ink-soft)}

/* end cta */
.v2-end{text-align:left}
.v2-end .sform--v2{margin-top:24px}
.v2-foot{border-top:1px solid var(--border); padding:26px 20px; text-align:center; font-size:1rem; color:var(--ink-mute)}
.v1-foot p,.v2-foot p{display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important; animation:none !important}
}

.v2-tag--video{background:transparent; color:var(--accent-2); border:1px solid rgba(106,163,238,.5)}

/* quote */
.v2-quote{margin:28px 0 0; padding:24px; border-left:3px solid var(--accent); background:var(--surface); border-radius:0 var(--r-card) var(--r-card) 0}
.v2-quote blockquote{margin:0; font-size:1.125rem; line-height:1.55; color:#fff}
.v2-quote figcaption{margin-top:12px; font-size:1rem; color:var(--ink-mute)}

/* Trustpilot stars, same as the course page */
.stars{display:inline-flex; gap:3px; vertical-align:-4px}
.v2-proof-tp .stars{display:flex; margin-top:6px}
.stars svg{width:20px; height:20px; fill:#fff; background:#00b67a; border-radius:4px; padding:2.5px; box-sizing:border-box}