/* Homepage: UX-ontwerp van 2 oktober 2026. */
.homepage{--tile:#cfcbff;--line:#ffbdac;--muted:#796495}
.homepage .header{padding:32px max(7.5%,calc((100% - 1224px)/2));max-width:none;height:129px;gap:16px;border-color:var(--line)}
.homepage .logo{width:144px;height:64px;margin-left:-24px;display:block}
.homepage .header-note{font-size:17px;line-height:1.45;margin-left:-10px}
.homepage .season{font-size:21px;letter-spacing:0;font-weight:400;gap:18px;white-space:nowrap}
.homepage .tree{width:44px;height:51px;display:block}
.homepage main{width:85%;max-width:1224px;padding:0}
.homepage .intro{padding:86px 0 112px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.homepage .eyebrow{font-size:16px;letter-spacing:0;font-weight:400;line-height:1.8}
.homepage .intro h1{font-size:100px;line-height:1;margin:10px 0 0;letter-spacing:0;color:var(--orange);white-space:nowrap}
.homepage .intro-copy{padding:0;min-width:0;font-size:25px;line-height:1.3}
.homepage .intro-copy p{margin:2px 0 20px}
.homepage .tag{border:0;background:var(--coral);border-radius:4px 28px 28px 4px;padding:11px 15px;font-size:16px;line-height:1.5;margin:0;transform:none}
.homepage .choices{gap:24px}
.homepage .gift-card{background:var(--tile);color:var(--blue);border-radius:24px;min-height:448px;outline:none;border:2px solid transparent;transition:border-color .15s}
.homepage .gift-card:hover{transform:none;border-color:#8f7abe}
.homepage .gift-card:has(input:checked){border-color:var(--blue);outline:none}
.homepage .gift-card:has(input:focus-visible){outline:3px dashed var(--blue);outline-offset:4px}
.homepage .card-top{padding:15px 14px 0;gap:10px;align-items:center;font-size:14px;font-weight:700;letter-spacing:0;line-height:1.35}
.homepage .tile-number{display:grid;place-items:center;position:relative;flex:0 0 38px;height:46px;color:white;font-size:22px;isolation:isolate}
.homepage .tile-number:before{content:'';position:absolute;inset:0;background:var(--blue);border-radius:3px;transform:rotate(3deg);z-index:-1}
.homepage .tile-kicker{flex:1}
.homepage .radio{width:24px;height:24px;background:#fff;border:3px solid #fff;border-radius:8px;flex-shrink:0;margin:0}
.homepage .gift-card input:checked~.card-top .radio{background:var(--blue);color:var(--blue)}
.homepage .gift-card input:checked~.card-top .radio:after{content:none}
.homepage .gift-art{height:195px;flex:0 0 195px;padding:0;font-size:104px;line-height:1;align-items:center}
.homepage .card-copy{padding:4px 14px 18px;display:flex;flex-direction:column;flex:1}
.homepage .card-copy strong{font-size:26px;line-height:1.2;letter-spacing:-.7px;margin-bottom:4px}
.homepage .card-copy>span{font-size:17px;line-height:1.4}
.homepage .card-copy br{display:none}
.homepage .card-bottom{border:0;justify-content:center;text-align:center;font-size:12px;font-weight:400;line-height:1.6;color:#65507e;margin:0;padding:10px 12px 14px;min-height:45px}
.homepage .submit-panel{margin-top:38px;border-color:var(--line);padding:36px 0;gap:50px;align-items:center}
.homepage .submit-panel .eyebrow{font-size:14px}
.homepage .submit-panel h2{font-size:34px;line-height:1.3;margin:2px 0 20px}
.homepage .submit-panel p{font-size:21px;line-height:1.7;margin:0}
.homepage .change-note{color:var(--muted);opacity:1}
.homepage .submit-action{min-width:288px;gap:9px}
.homepage .submit-action .button{font-size:21px;border-radius:4px 36px 36px 4px;padding:13px 22px;min-height:60px}
.homepage .submit-action>span{font-size:12px}
.homepage .text-button{font-size:12px;padding:0}
.homepage .test-banner{font-size:12px;margin:0 0 22px;padding:8px 12px;color:#65507e;border-color:#b0a0c3}
.homepage footer{width:85%;max-width:1224px;border-color:var(--line);position:relative;padding:40px 0;justify-content:center;min-height:170px}
.homepage footer .tree{width:80px;height:92px}
.homepage footer a{position:absolute;right:0;bottom:24px;font-size:12px}
@media(max-width:1250px){
.homepage .intro{gap:35px;padding-bottom:90px}.homepage .intro h1{font-size:82px}.homepage .intro-copy{font-size:22px}
.homepage .choices{gap:16px}.homepage .tile-number{flex-basis:30px;height:38px;font-size:20px}.homepage .card-top{gap:7px;font-size:12px;padding:14px 10px 0}.homepage .radio{width:22px;height:22px}
.homepage .card-copy{padding:4px 12px 18px}.homepage .card-copy strong{font-size:23px}.homepage .card-copy>span{font-size:16px}.homepage .submit-panel p{font-size:17px}.homepage .submit-panel h2{font-size:29px}
}
@media(max-width:1050px){
.homepage .intro{padding:60px 0 64px;gap:28px}.homepage .intro h1{font-size:70px}.homepage .intro-copy{font-size:20px}.homepage .intro .eyebrow{font-size:13px}
.homepage .choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.homepage .gift-card{min-height:410px}.homepage .card-top{font-size:14px;padding:15px 16px 0}.homepage .tile-number{flex-basis:36px;height:43px}.homepage .gift-art{height:178px;flex-basis:178px}.homepage .card-copy{padding:4px 18px 18px}.homepage .card-copy strong{font-size:26px}.homepage .card-bottom{font-size:13px}.homepage .submit-panel{gap:24px}.homepage .submit-action{min-width:250px}.homepage .submit-action .button{font-size:17px}
}
@media(max-width:740px){
.homepage .header{height:95px;padding:20px 6%;gap:0}.homepage .logo{width:110px;height:49px;margin-left:-18px}.homepage .header-note{display:none}.homepage .season{font-size:17px;gap:12px}.homepage .tree{width:30px;height:36px}
.homepage main,.homepage footer{width:88%}.homepage .intro{display:block;padding:42px 0 46px}.homepage .intro h1{font-size:clamp(60px,12vw,86px);margin-top:8px}.homepage .intro .eyebrow{font-size:14px}.homepage .intro-copy{max-width:none;margin-top:22px;font-size:20px}.homepage .intro-copy p{display:block;margin-bottom:18px}.homepage .tag{font-size:14px}
.homepage .choices{gap:16px}.homepage .card-top{font-size:12px;padding:12px 10px 0;gap:8px}.homepage .tile-number{flex-basis:29px;height:36px;font-size:18px}.homepage .radio{width:20px;height:20px;border-radius:6px}.homepage .gift-art{height:155px;flex-basis:155px;font-size:90px}.homepage .card-copy{padding:4px 12px 18px}.homepage .card-copy strong{font-size:22px}.homepage .gift-card{min-height:400px}.homepage .card-bottom{font-size:12px}
.homepage .submit-panel{display:block;padding:30px 0}.homepage .submit-panel h2{font-size:29px;margin-bottom:14px}.homepage .submit-panel p{font-size:17px;line-height:1.6}.homepage .submit-action{margin-top:25px;min-width:0;align-items:stretch;text-align:center}.homepage .submit-action .button{font-size:19px}.homepage footer a{position:static}.homepage footer{flex-direction:column;gap:25px;padding:30px 0}.homepage footer .tree{width:58px;height:67px}
}
@media(max-width:460px){.homepage .choices{grid-template-columns:1fr}.homepage .gift-card{min-height:420px}.homepage .card-top{padding:16px 16px 0;font-size:15px;gap:12px}.homepage .tile-number{flex-basis:36px;height:43px;font-size:21px}.homepage .radio{width:24px;height:24px;border-radius:8px}.homepage .gift-art{height:190px;flex-basis:190px;font-size:110px}.homepage .card-copy{padding:4px 17px 18px}.homepage .card-copy strong{font-size:27px}.homepage .card-copy>span{font-size:17px}.homepage .card-bottom{font-size:13px}.homepage .intro h1{font-size:clamp(48px,14vw,65px)}}
.homepage .lavender .gift-art{font-size:146px;transform:rotate(15deg)}
@media(min-width:461px) and (max-width:740px){.homepage .lavender .gift-art{font-size:118px}}