/* Adier — brief wizard (/start/ EN, /fi/aloita/ FI). Shared by both pages; the footage picker has its own footage.css. */
html{scroll-padding-bottom:110px}
body{min-height:100dvh;display:flex;flex-direction:column}
.q:focus{outline:none}
/* the attribution banner would sit on top of the fixed Back / Next bar: lift it above */
.consent{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
.top{position:sticky;top:0;z-index:20;background:rgba(247,243,236,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px}
.top .tr{display:flex;align-items:center;gap:14px}
.prog{height:3px;background:var(--line)}
.prog i{display:block;height:100%;background:var(--sig);transform:scaleX(0);transform-origin:left;transition:transform 450ms var(--ease-out)}
.count{font-size:13px;font-weight:700;color:var(--mute);letter-spacing:.04em}
main{flex:1;position:relative;z-index:2}
.step{display:none;padding:clamp(30px,5vw,60px) 0 140px}
.step.on{display:block;animation:stepin 520ms var(--ease-out)}
@keyframes stepin{from{opacity:0;transform:translateY(16px)}}
@media (prefers-reduced-motion:reduce){.step.on{animation:none}}
.q{font-size:clamp(34px,5.4vw,64px);margin:14px 0 10px}
.hint{color:var(--mute);margin:0 0 26px;font-size:16px;max-width:62ch}
.mailalt{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 28px;padding:12px 16px;border-radius:16px;background:var(--sun-soft);font-size:15px;color:var(--ink-2);max-width:760px}
.mailalt a{font-weight:800;color:var(--ink);word-break:break-all}
.mailalt svg{flex:none}
.opts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:900px){.opts{grid-template-columns:repeat(2,1fr)}}
.opt{position:relative;text-align:left;cursor:pointer;border:0;padding:6px;border-radius:22px;background:rgba(14,14,18,.035);box-shadow:0 0 0 1px var(--line);transition:transform 160ms var(--ease-out),box-shadow 200ms ease}
.opt .in{display:grid;gap:6px;align-content:start;height:100%;padding:18px 18px 16px;border-radius:16px;background:var(--card);box-shadow:inset 0 1px 0 #fff}
.opt b{font-size:16.5px;font-weight:800;letter-spacing:-.015em;line-height:1.2}
.opt .in,.opt .cap{color:var(--ink)}
.opt .in>span:not(.gly),.opt .cap>span{font-size:13.5px;color:var(--mute);line-height:1.4}
.opt .gly{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--paper-2);color:var(--ink);margin-bottom:6px;transition:background-color 200ms ease,transform 260ms var(--ease-pop)}
.opt[aria-pressed="true"] .gly{background:var(--sun)}
@media (hover:hover) and (pointer:fine){.opt:hover .gly{transform:rotate(-8deg)}}
.opt::after{content:"";position:absolute;top:16px;right:16px;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-2);background:var(--card) center/12px no-repeat;transition:background-color 160ms ease,box-shadow 160ms ease}
.opt[aria-pressed="true"]{box-shadow:0 0 0 2.5px var(--ink)}
.opt[aria-pressed="true"]::after{background-color:var(--sig);box-shadow:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5 9.5 3.5' fill='none' stroke='%230E0E12' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.opt:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.opt:hover{transform:translateY(-2px);box-shadow:0 0 0 1.5px var(--ink),0 12px 24px -16px rgba(14,14,18,.4)}.opt[aria-pressed="true"]:hover{box-shadow:0 0 0 2.5px var(--ink)}}
.opt.lookopt{padding:0;overflow:hidden;border-radius:22px}
.opt.lookopt .look{aspect-ratio:1/1;border-radius:0}
.opt.lookopt .look .art{transform:scale(.8)}
.opt.lookopt .cap{padding:12px 16px 14px;background:var(--card);display:grid;gap:2px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{cursor:pointer;border:0;display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;background:var(--card);box-shadow:0 0 0 1.5px var(--line-2);font-weight:800;font-size:15px;transition:transform 160ms var(--ease-out),box-shadow 160ms ease}
@media (hover:hover) and (pointer:fine){.chip:not([aria-pressed="true"]):hover{box-shadow:0 0 0 2px var(--ink)}}
.chip .ratio i{border-color:currentColor}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);box-shadow:none}
.chip:active{transform:scale(.97)}
.sub-q{margin:30px 0 12px;font-size:18px;font-weight:800;letter-spacing:-.015em}
.sub-q:first-child{margin-top:4px}
.field{display:grid;gap:8px;margin-bottom:16px}
.field label{font-size:14px;font-weight:700}
.field label small{font-weight:500;color:var(--mute)}
.inp{width:100%;padding:15px 16px;border-radius:14px;border:0;background:var(--card);box-shadow:0 0 0 1px var(--ui);font-size:16px;outline:none;transition:box-shadow 160ms ease}
.inp:focus{box-shadow:0 0 0 2.5px var(--ink)}
.inp[aria-invalid="true"]{box-shadow:0 0 0 2.5px var(--sig-deep)}
textarea.inp{min-height:130px;resize:vertical}
.chk{display:flex;gap:10px;align-items:flex-start;margin:4px 0 6px;font-size:15px;color:var(--ink-2);cursor:pointer}
.chk input{flex:none;width:18px;height:18px;margin:3px 0 0;accent-color:var(--sig-deep)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:640px){.two{grid-template-columns:1fr}}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:14px var(--gut) calc(14px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--paper) 70%,rgba(247,243,236,0))}
.bar .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0}
.back{background:none;border:0;cursor:pointer;font-weight:700;color:var(--ink-2);padding:12px 6px}
.back[hidden]{visibility:hidden;display:block}
#next[disabled]{opacity:.75;cursor:progress}
.err{font-size:14.5px;min-height:1.4em;margin-top:12px}
.err:not(:empty){display:inline-flex;align-items:flex-start;gap:8px;padding:9px 14px;border-radius:12px;background:var(--sig-soft);color:#9E2A12;font-weight:700;transform:rotate(-1deg)}
.err:not(:empty)::before{content:"Retake:";font:600 14px/1.45 var(--hand);color:#9E2A12}
html[lang="fi"] .err:not(:empty)::before{content:"Otto 2:"}
.samp{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:14px;border-radius:22px;background:var(--card);box-shadow:0 0 0 1px var(--line);margin-bottom:22px;max-width:760px}
.samp img{width:84px;border-radius:12px}
.samp.noimg{grid-template-columns:1fr}
.samp b{display:block;font-size:17px}
.samp span{color:var(--mute);font-size:14px}
.more{margin-top:26px;border-radius:22px;background:var(--card);box-shadow:0 0 0 1px var(--line)}
.more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;font-weight:800;font-size:17px;letter-spacing:-.01em;border-radius:22px}
.more>summary::-webkit-details-marker{display:none}
.more>summary small{display:block;font-weight:500;font-size:14px;color:var(--mute);letter-spacing:0;margin-top:2px}
.more>summary .pm{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--paper-2);transition:transform 260ms var(--ease-out),background-color 160ms ease}
.more[open]>summary .pm{transform:rotate(45deg);background:var(--sun)}
.more .mb{padding:0 20px 22px}
.qrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.qb2{width:52px;height:52px;border-radius:50%;border:0;display:grid;place-items:center;padding:0;background:var(--card);box-shadow:0 0 0 1.5px var(--line-2);cursor:pointer;transition:background-color 160ms ease}
@media (hover:hover){.qb2:hover{background:var(--sun)}}
.qb2:active{transform:scale(.94)}
#qVal{min-width:48px;text-align:center;font-size:34px;font-weight:900;letter-spacing:-.03em}
.done{text-align:center;padding:clamp(60px,12vw,140px) 0}
.done .done-mascot{margin:0 auto 18px;width:120px}
.done .scrawl{margin:16px 0 0}
.done .lede{margin:0 auto}
.done .got{margin:18px auto 0;font-size:15px;color:var(--ok);font-weight:700}
[hidden]{display:none!important}
@media (max-width:640px){.q{font-size:clamp(32px,9vw,44px)}.hint{font-size:15px}.opt .in{padding:14px 14px 12px}.more>summary{padding:16px}.more .mb{padding:0 16px 18px}}