.brand-switcher{display:flex;align-items:center;gap:22px;padding:12px 4%;border-bottom:1px solid var(--line);background:var(--paper);flex-wrap:wrap}.brand-switcher>span{font-size:10px;letter-spacing:1.3px;font-weight:bold}.brand-switcher>div{display:flex;gap:6px;flex-wrap:wrap}.brand-switcher button{font:13px Arial;padding:10px 15px;border:1px solid var(--line);border-radius:30px;background:transparent;color:var(--ink)}.brand-switcher button[aria-pressed=true]{background:var(--ink);color:white;border-color:var(--ink)}.brand-switcher>a{font-size:12px;margin-left:auto}.brand-swatches{display:flex;gap:20px;margin:30px 0 45px}.brand-swatches>div{display:flex;align-items:center;gap:10px}.brand-swatches span{width:40px;height:40px;border:1px solid #8886;border-radius:50%}.training-parent{font-size:13px;color:var(--olive);padding:12px 0;border-bottom:1px solid var(--line)}
body[data-brand=verdernest]{--cream:#faf7ef;--paper:#fffefa;--ink:#173c42;--olive:#205862;--sand:#edddca;--terra:#8d4928;--line:#d4ded8;--muted:#526965;--app-bg:#f1f6f3;--app-card:#ffffff;--app-soft:#dfede7;--app-accent:#205862}
body[data-brand=naastje]{--cream:#f8f7fd;--paper:#fff;--ink:#26365b;--olive:#283c70;--sand:#e9e3f5;--terra:#9d4338;--line:#dadcec;--muted:#59627d;--app-bg:#f5f3fc;--app-card:#ffffff;--app-soft:#e8e2f6;--app-accent:#283c70}
body:not([data-brand=sterk]) .brandmark{border:0;background:var(--olive);color:white;font:italic 32px Georgia;border-radius:18px 5px 18px 5px}body[data-brand=naastje] .brandmark{font:bold 30px Arial;border-radius:16px}body[data-brand=naastje] h1,body[data-brand=naastje] h2,body[data-brand=naastje] h3,body[data-brand=naastje] .brand,body[data-brand=naastje] .footbrand{font-family:Arial,Helvetica,sans-serif;font-weight:650;letter-spacing:-1px}body[data-brand=naastje] h1{letter-spacing:-3px;line-height:1.04}body[data-brand=naastje] h2{font-size:clamp(30px,3vw,44px)}body[data-brand=naastje] .brand{font-size:30px;letter-spacing:-1.4px}body[data-brand=naastje] .brand small{letter-spacing:1.5px}body[data-brand=verdernest] .brand{font-size:30px}body:not([data-brand=sterk]) header{background:var(--cream)}body:not([data-brand=sterk]) .card,body:not([data-brand=sterk]) .panel{border-radius:22px;border-color:var(--line)}body:not([data-brand=sterk]) .card p,body:not([data-brand=sterk]) details p,body:not([data-brand=sterk]) .lead{color:var(--muted)}body:not([data-brand=sterk]) .button,body:not([data-brand=sterk]) button.primary{border-radius:30px}body:not([data-brand=sterk]) .button:hover,body:not([data-brand=sterk]) button.primary:hover{background:var(--ink);color:white}body:not([data-brand=sterk]) .feature{border-radius:30px}body:not([data-brand=sterk]) .feature p{color:#f9fafb}body:not([data-brand=sterk]) .feature .eyebrow{color:var(--sand)}body:not([data-brand=sterk]) .note{background:var(--sand);border-radius:0 16px 16px 0}body:not([data-brand=sterk]) footer{background:var(--sand)}body:not([data-brand=sterk]) .cta{border-radius:26px}body[data-brand=naastje] .ribbon{background:var(--sand);border:0;border-radius:20px;max-width:1120px;margin:20px auto}body[data-brand=verdernest] .ribbon{border-color:var(--line);letter-spacing:.5px}body[data-brand=naastje] .card{box-shadow:0 6px 0 #283c7009;border:0}body[data-brand=verdernest] .card{border-radius:40px 10px 40px 10px}.variant-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;max-width:1250px;padding:70px 40px;margin:auto;min-height:620px;align-items:center}.variant-copy h1{font-size:clamp(46px,5vw,69px);line-height:1.08}.variant-copy .lead{font-size:19px;max-width:510px}.brand-scene{position:relative;min-height:480px;background:#e4ede6;border-radius:220px 220px 24px 24px;overflow:hidden;padding:32px}.scene-orbit{position:absolute;border:40px solid #e9b38a;width:330px;height:330px;border-radius:50%;right:-140px;top:20px;opacity:.75}.scene-caption{position:relative;display:block;text-align:center;font:italic 18px Georgia;margin:20px 0 35px}.scene-card{position:relative;padding:28px;background:#fffefa;border-radius:24px;width:86%;box-shadow:0 15px 30px #20586212}.scene-card>span{font:10px Arial;letter-spacing:1.3px;text-transform:uppercase}.scene-card h2{font-size:34px;line-height:1.15;margin:14px 0 18px}.scene-card a{font-size:13px;font-weight:bold}.scene-two{margin:18px 0 0 auto;background:var(--olive);color:white;width:67%;padding:22px}.scene-two h3{font-size:25px;margin:10px 0}.scene-word{font:italic 35px Georgia;position:absolute;left:25px;bottom:24px;writing-mode:vertical-rl;transform:rotate(180deg);color:#20586299}body[data-brand=naastje] .variant-hero{grid-template-columns:1fr 1.1fr;gap:70px}body[data-brand=naastje] .variant-copy{order:2}body[data-brand=naastje] .brand-scene{background:#e9e3f5;border-radius:38px;min-height:510px;transform:rotate(-2deg)}body[data-brand=naastje] .scene-orbit{border-color:#e7a194;width:260px;height:260px;border-width:65px;right:-80px;top:175px}body[data-brand=naastje] .scene-caption{font:13px Arial;letter-spacing:.5px;text-align:left;margin:0 0 30px}body[data-brand=naastje] .scene-one{transform:rotate(3deg);width:95%;border-radius:24px 24px 24px 4px}body[data-brand=naastje] .scene-one h2{font-size:35px}body[data-brand=naastje] .scene-two{background:#283c70;border-radius:24px 24px 4px 24px;transform:rotate(3deg);margin-top:25px}body[data-brand=naastje] .scene-word{font:bold 30px Arial;color:#283c7080;writing-mode:horizontal-tb;transform:none;bottom:18px}
body:not([data-brand=sterk]) .phone-body{background:var(--ink);border-color:var(--olive)}body:not([data-brand=sterk]) .phone-top,body:not([data-brand=sterk]) .phone-bottom,body:not([data-brand=sterk]) .phone-screen,body:not([data-brand=sterk]) .mobile-app{background:var(--app-bg);color:var(--ink)}body:not([data-brand=sterk]) .phone-island,body:not([data-brand=sterk]) .phone-bottom:after{background:var(--ink)}body:not([data-brand=sterk]) .mobile-app .primary{background:var(--app-accent);border-color:var(--app-accent)}body:not([data-brand=sterk]) .family-avatar,body:not([data-brand=sterk]) .app-tab.active,body:not([data-brand=sterk]) .mobile-app .pill,body:not([data-brand=sterk]) .training-step.done,body:not([data-brand=sterk]) .privacy-pill,body:not([data-brand=sterk]) .next-step,body:not([data-brand=sterk]) .status{background:var(--app-soft);color:var(--ink)}body:not([data-brand=sterk]) .app-tab,body:not([data-brand=sterk]) .family-heading small,body:not([data-brand=sterk]) .mobile-app .eyebrow{color:var(--olive)}body:not([data-brand=sterk]) .app-welcome,body:not([data-brand=sterk]) .tip-highlight,body:not([data-brand=sterk]) .dashboard-tile:nth-child(2){background:var(--sand)}body:not([data-brand=sterk]) .dashboard-tile{background:var(--app-soft);color:var(--ink)}body:not([data-brand=sterk]) .mobile-app .day,body:not([data-brand=sterk]) .dashboard-summary,body:not([data-brand=sterk]) .support-entry,body:not([data-brand=sterk]) .training-step,body:not([data-brand=sterk]) .support-shortcut{background:var(--app-card);border-color:var(--line);color:var(--ink)}body:not([data-brand=sterk]) .mobile-app .event{background:var(--app-soft)}body:not([data-brand=sterk]) .mobile-app .event.school{background:var(--sand)}body:not([data-brand=sterk]) .dashboard-summary p,body:not([data-brand=sterk]) .training-step small{color:var(--muted)}body:not([data-brand=sterk]) progress,body:not([data-brand=sterk]) .training-step input{accent-color:var(--olive)}body:not([data-brand=sterk]) progress::-webkit-progress-value{background:var(--olive)}body:not([data-brand=sterk]) .mobile-app .chip{border-color:var(--line);color:var(--ink)}body:not([data-brand=sterk]) .mobile-app .chip.active{background:var(--olive);color:white}body:not([data-brand=sterk]) .app-welcome img{opacity:.4}body[data-brand=naastje] .app-welcome{border-radius:22px 22px 6px 22px}body[data-brand=naastje] .chat{border-radius:18px 18px 18px 3px;background:var(--sand);border:0}body[data-brand=verdernest] .app-welcome{border-radius:40px 12px 40px 12px}body:not([data-brand=sterk]) .value-list li:before{color:var(--olive)}
@media(max-width:900px){.variant-hero,body[data-brand=naastje] .variant-hero{gap:25px;padding:45px 24px;grid-template-columns:1fr}.variant-copy{max-width:650px}body[data-brand=naastje] .variant-copy{order:0}.brand-scene{max-width:570px;width:100%;margin:auto;min-height:460px}.variant-copy h1{font-size:49px}.brand-switcher{gap:10px;padding:12px 20px}.brand-switcher>span{width:100%}.brand-switcher>a{margin:0}.brand-switcher button{padding:8px 12px;font-size:12px}.brand-swatches{gap:12px;flex-wrap:wrap}.scene-word{font-size:28px}.scene-card{padding:23px}.scene-two{padding:20px}.scene-card h2{font-size:30px}}
