:root{--paper:#f7f6f1;--ink:#1f2420;--muted:#74766e;--line:#ddded6;--lime:#d9fc69;--dark:#25312b;--pale:#efeee6;--white:#fff;--danger:#ab363b;color-scheme:light}
*{box-sizing:border-box}html{min-height:100%;scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}button,select,textarea,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}a{color:inherit}h1,h2,p{margin-top:0}[hidden]{display:none!important}h1,h2{font-family:'Outfit',sans-serif;letter-spacing:-.055em}h1 em{color:#687e52;font-style:normal}.layout-wide{max-width:1320px;margin:auto;padding-left:46px;padding-right:46px}
.site-header{height:86px;padding:0 46px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;max-width:1536px;margin:auto}.brand{display:flex;align-items:center;gap:10px;font-family:Outfit,sans-serif;font-weight:800;font-size:26px;text-decoration:none;letter-spacing:-.055em}.brand-dot{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--dark);color:var(--lime);font-size:23px}.brand small{font-family:'DM Sans',sans-serif;letter-spacing:.16em;font-size:9px;font-weight:700;border-left:1px solid var(--line);padding-left:13px;margin-left:4px;color:var(--muted)}.header-right{display:flex;align-items:center;gap:24px}.header-tag{font-size:12px;color:var(--muted)}.language{background:transparent;border:1px solid var(--line);border-radius:30px;padding:8px 13px;font-size:12px;font-weight:700}
.intro{display:grid;grid-template-columns:minmax(0,1.13fr) minmax(380px,.87fr);gap:clamp(28px,6vw,100px);padding-top:90px;padding-bottom:100px;align-items:start;min-height:calc(100vh - 160px)}.intro-copy{padding-top:26px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.135em;text-transform:uppercase;display:flex;align-items:center;gap:10px;color:#536553}.live-dot{width:7px;height:7px;border-radius:100%;background:#8bba35;display:inline-block;box-shadow:0 0 0 4px #8bba3520}.intro h1,.finish h1{font-size:clamp(64px,8.2vw,116px);font-weight:700;line-height:.99;margin:30px 0}.lead{font-size:clamp(16px,1.65vw,20px);line-height:1.55;max-width:590px;color:#626860}.facts{display:flex;gap:28px;flex-wrap:wrap;margin:38px 0 56px}.facts>span{font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:8px}.facts svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.intro-styles{display:flex;align-items:center;gap:8px}.sample{height:77px;width:65px;display:grid;place-items:center;border-radius:11px;font:800 12px Outfit,sans-serif;transform:rotate(-8deg);transition:transform .2s}.sample:nth-child(2){transform:rotate(6deg)}.sample:nth-child(3){transform:rotate(-4deg)}.sample:nth-child(4){transform:rotate(9deg)}.sample:nth-child(5){transform:rotate(-7deg)}.sample:nth-child(6){transform:rotate(3deg)}.sample:hover{transform:translateY(-6px)}.sample.one{background:#d7c6fa;color:#462f80}.sample.two{background:#ffbe9f;color:#772d25}.sample.three{background:#f3dd4d;color:#52451c}.sample.four{background:#cdeed5;color:#2c6753}.sample.five{background:#c0d7fd;color:#2e568c}.sample.six{background:#282b52;color:#fff}
.intro-form{background:white;padding:36px;border:1px solid #eaeae4;border-radius:23px;box-shadow:0 12px 42px #343c2710}.form-step{display:flex;align-items:center;gap:11px;color:#72866b;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em}.form-step>span:first-child{flex:0 0 25px;height:1px;background:#bdc8b6}.intro-form h2{font-size:38px;line-height:1;margin:20px 0 8px}.form-blurb{font-size:13px;line-height:1.6;color:var(--muted);margin:0 0 25px}.intro-form fieldset{padding:0;border:0;margin:0}.intro-form legend,.input-label{font-size:12px;font-weight:700;display:block;margin-bottom:12px}.radio-row{padding:11px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;display:flex;align-items:center;gap:11px;font-size:13px;cursor:pointer}.radio-row:has(input:checked){background:#f3f6e8;border-color:#a8c18a}.radio-row input{accent-color:#4e7442}.radio-shape{display:none}.age-group{margin:18px 0}.age-group select{width:100%;border-radius:10px;border:1px solid var(--line);padding:11px 13px;background:var(--white)}.checkbox-row{display:flex;align-items:flex-start;gap:10px;font-size:11.5px;line-height:1.45;margin:13px 0;cursor:pointer}.checkbox-row input{accent-color:#4f7447;margin-top:2px;flex-shrink:0}.primary-button{width:100%;border:0;border-radius:12px;background:var(--dark);color:var(--lime);padding:17px 20px;font-weight:800;font-size:14px;display:flex;justify-content:space-between;align-items:center;transition:transform .12s,background .12s}.primary-button:not(:disabled):hover{transform:translateY(-2px);background:#354d3c}.primary-button span:last-child{font-size:20px}.form-footnote{font-size:10px;color:#999c93;line-height:1.5;text-align:center;margin:14px 0 0}.notice{font-size:12px;margin:12px 0;line-height:1.5;color:var(--danger)}.notice:empty{display:none}.site-footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;align-items:center;max-width:1536px;margin:auto;padding:23px 46px;color:#95998f;font-size:10px}.site-footer a{text-decoration:none}
.survey{padding-top:39px;padding-bottom:60px;max-width:1510px}.survey-topline{display:flex;align-items:center;justify-content:space-between}.progress-text{font-weight:700;font-size:14px}.progress-track{height:5px;background:#e3e5d9;border-radius:99px;overflow:hidden;margin:15px 0 34px}.progress-track>div{height:100%;background:#95af63;width:0%;transition:width .25s}.question-title{text-align:center;margin-bottom:32px}.question-title h1{font-size:clamp(27px,3.2vw,44px);letter-spacing:-.045em;margin:0 0 8px}.question-title p{font-size:13px;line-height:1.45;color:var(--muted);max-width:700px;margin:auto}.comparison-grid{display:grid;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);align-items:center;gap:12px}.design-card{min-width:0;text-align:left;display:block;background:#fff;border:2px solid #eaebe2;padding:12px;border-radius:18px;box-shadow:0 12px 28px #2c3b2712;transition:transform .15s,border-color .15s,box-shadow .15s}.design-card:not(:disabled):hover,.design-card:focus-visible{border-color:#71955b;box-shadow:0 15px 36px #364f2a22;transform:translateY(-3px)}.design-card:focus-visible{outline:3px solid #bbe889;outline-offset:2px}.card-label{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:700;letter-spacing:.12em;color:#7e897d;padding:2px 4px 12px}.card-number{font-size:11px;color:#57685b;letter-spacing:0}.image-frame{background:#f0f0ec;width:100%;aspect-ratio:4/3;display:flex;justify-content:center;align-items:center;overflow:hidden;border-radius:11px}.image-frame img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}.choice-bottom{display:flex;align-items:center;gap:12px;font-weight:700;font-size:12px;padding:16px 6px 5px}.choice-bottom .key-hint{color:#8b9486;border:1px solid #d9ded2;border-radius:5px;margin-left:auto;min-width:22px;text-align:center;line-height:20px}.choice-bottom .arrow{font-size:18px}.versus{font-family:Outfit,sans-serif;font-size:13px;letter-spacing:.03em;font-weight:700;color:#8c9983;text-align:center}.survey-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:21px;gap:12px;color:var(--muted);font-size:11px}.subtle-button{font-weight:700;border:1px solid var(--line);border-radius:30px;padding:11px 15px;background:#fff;color:var(--ink);white-space:nowrap}.error-msg{font-size:13px;color:var(--danger);text-align:center;min-height:1em}.finish{max-width:700px;text-align:center;min-height:75vh;padding-top:95px;padding-bottom:100px}.finish .eyebrow{justify-content:center}.finish h1{font-size:clamp(52px,8vw,82px);margin:20px 0}.success-icon{width:64px;height:64px;background:var(--lime);border-radius:50%;display:grid;place-items:center;margin:0 auto 30px;font-size:30px}.finish .lead{margin:0 auto 35px}.finish .input-label{text-align:left}.finish textarea{width:100%;resize:vertical;border:1px solid var(--line);border-radius:12px;padding:15px;margin-bottom:12px;font-size:13px}.finish .primary-button{max-width:320px;margin:auto}.lightbox{position:fixed;max-width:min(98vw,1700px);width:98vw;border:0;border-radius:18px;padding:16px;background:#fff;box-shadow:0 40px 140px #0005}.lightbox::backdrop{background:#101914d9}.lightbox-header{display:flex;justify-content:space-between;align-items:center;margin:0 5px 12px}.lightbox-header button{border:0;border-radius:100%;background:var(--paper);width:37px;height:37px}.lightbox-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.lightbox-grid img{width:100%;max-height:79vh;object-fit:contain;background:#f1f1eb;border-radius:8px}
@media(max-width:1000px){.intro{grid-template-columns:1fr;gap:40px;padding-top:52px}.intro-copy{padding:0}.intro h1{font-size:70px}.facts{margin-bottom:28px}.intro-form{max-width:620px}.comparison-grid{gap:5px}.design-card{padding:8px}}
@media(max-width:640px){.site-header{height:67px;padding:0 18px}.brand{font-size:22px}.brand small,.header-tag{display:none}.layout-wide{padding-left:17px;padding-right:17px}.intro{padding-top:40px;padding-bottom:50px}.intro h1{font-size:clamp(56px,14vw,78px);margin:20px 0}.lead{font-size:16px}.intro-form{padding:24px 20px}.facts{gap:15px;margin:26px 0}.sample{height:58px;width:48px}.site-footer{padding:20px 17px;font-size:9px}.site-footer>span:nth-child(2){display:none}.survey{padding-top:25px}.progress-track{margin:14px 0 25px}.question-title{margin-bottom:16px}.question-title h1{font-size:26px}.question-title p{font-size:11px}.comparison-grid{grid-template-columns:1fr;gap:8px}.versus{font-size:10px;line-height:12px}.design-card{border-radius:13px}.image-frame{aspect-ratio:1.6/1}.card-label{padding-bottom:5px}.choice-bottom{padding:8px 5px 2px;font-size:11px}.survey-bottom{font-size:10px;align-items:flex-start}.survey-bottom>span{max-width:60%}.lightbox-grid{grid-template-columns:1fr}.lightbox-grid img{max-height:40vh}.finish{padding-top:80px}}

/* Optional participant alias and comfortable mobile controls */
.participant-name-group{margin:20px 0 6px}
.participant-name-group input{width:100%;min-height:44px;border:1px solid var(--line);border-radius:10px;background:var(--white);padding:11px 13px;outline-offset:2px;font-size:16px}
.participant-name-group input:focus-visible{outline:2px solid #82a861}
.participant-name-group small{display:block;margin-top:7px;font-size:11px;color:var(--muted);line-height:1.5}
.fullscreen-toggle{white-space:nowrap;min-height:40px}
/* iPhone Safari cannot enter true arbitrary-element fullscreen; focus mode keeps the exit control accessible. */
html.focus-mode .site-footer{display:none}
html.focus-mode .site-header{position:sticky;top:0;z-index:20;height:54px;background:#f7f6f1ee;backdrop-filter:blur(10px)}
html.focus-mode .site-header .brand,html.focus-mode .header-tag{display:none}
html.focus-mode .header-right{margin-left:auto}
html.focus-mode .intro{padding-top:20px}
html.focus-mode .survey{padding-top:15px}
.lightbox{max-height:calc(100dvh - 20px);overflow:auto}
.lightbox:modal{width:min(98vw,1800px)}
@media(max-width:640px){
 .header-right{gap:7px}
 .language{padding:9px 10px;min-height:40px}
 .fullscreen-toggle{font-size:11px}
 .survey-bottom{align-items:center;flex-wrap:wrap}
 .survey-bottom>span{max-width:100%}
 .lightbox{margin:auto;width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;border-radius:0;padding:12px;background:#fff}
 .lightbox-grid{gap:8px}
 .lightbox-grid img{height:calc((100dvh - 105px)/2);max-height:none;object-fit:contain}
 .lightbox-header{min-height:45px}
 .lightbox-header button{min-width:44px;min-height:44px}
}
@media(orientation:landscape) and (max-height:600px){
 .comparison-grid{grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr)}
 .question-title{margin-bottom:9px}
 .image-frame{aspect-ratio:16/10}
 .site-header{height:56px}
 .survey{padding-top:15px}
}