:root{--bg:#FFFFFF;--ink:#0E0F12;--ink-2:#4A4E58;--ink-3:#636873;--line:#E6E7EA;--plinth:#E9EBEE;--accent:#2447F5;--accent-ink:#1A36C4;--accent-soft:#E9EDFE;--display:Unbounded,sans-serif}
:root{--toph:64px}
@media(max-width:960px){:root{--toph:52px}}
*{box-sizing:border-box}
html{font-family:Manrope,system-ui,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
body{margin:0;min-height:100dvh}
::selection{background:var(--accent);color:#fff}
button{font:inherit;cursor:pointer;color:inherit;background:none;border:0;padding:0}
input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
img{display:block}
a{color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
@media(max-width:640px){.wrap{padding:0 18px}}

/* header */
.top{display:flex;align-items:center;gap:28px;height:72px}
.logo{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.logo span{color:var(--accent)}
.top nav{margin-left:auto;display:flex;align-items:center;gap:24px;font-size:14.5px;font-weight:500}
.top nav a{color:var(--ink-2);text-decoration:none}
.top nav a[aria-current=page],.top nav a:hover{color:var(--ink)}
html.js .hsearch{width:36px;height:36px;display:grid;place-items:center;border:0;background:none;color:var(--ink);font-size:20px;cursor:pointer;padding:0;opacity:0;visibility:hidden;transition:opacity .15s,visibility .15s}
html.js .hsearch.on{opacity:1;visibility:visible}
html.js .hsearch:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
body[data-page=catalog] .top{position:sticky;top:0;z-index:50;height:var(--toph)}
body[data-page=catalog] .top::before{content:"";position:absolute;left:50%;width:100vw;transform:translateX(-50%);top:0;bottom:0;z-index:-1;background:var(--bg);border-bottom:1px solid var(--line)}
@media(max-width:640px){.top nav a:nth-of-type(n+2){display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 26px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:15.5px;text-decoration:none;transition:transform .15s,background .15s;white-space:nowrap}
.btn:hover{background:var(--accent)}
.btn:active{transform:scale(.98)}
.btn.soft{background:var(--accent-soft);color:var(--accent-ink)}
.btn.soft:hover{background:var(--accent);color:#fff}
.btn.sm{height:42px;padding:0 18px;font-size:14px}
.textlink{color:var(--ink-2);font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line)}
.textlink:hover{color:var(--ink);text-decoration-color:var(--ink)}

/* sentence (home) */
.hero{padding:72px 0 48px}
.sentence{font-family:var(--display);font-weight:700;font-size:clamp(28px,4.6vw,60px);line-height:1.25;letter-spacing:-.02em;margin:0;max-width:1100px}
.blank{position:relative;display:inline-block;vertical-align:baseline}
.blank input{font:inherit;color:var(--accent);background:none;border:0;border-bottom:4px solid var(--accent-soft);padding:0 .1em;margin:0 .05em;min-width:4ch;field-sizing:content;width:auto;max-width:100%;outline:0;transition:border-color .15s}
.blank input::placeholder{color:var(--accent);opacity:.45}
.blank input:focus{border-bottom-color:var(--accent)}
.blank .dot{margin-left:-.1em}
/* home hero: three lines (task blank on its own line, "for my" + venue blank share the last), no underline, blanks sized by the widest example (.sizer), typing demo drawn in .ghost (presentation only) */
.hero .blank{display:grid;width:max-content;max-width:100%;margin:.1em 0}
.hero .line{display:block}
.hero .for{white-space:nowrap}
.hero .line .blank{display:inline-grid;vertical-align:baseline}
.hero .blank input{border-bottom:0}
.sizer{display:none}
.hero .sizer{display:grid;grid-area:1/1;visibility:hidden;white-space:nowrap;padding:0 .1em;height:0;overflow:hidden;pointer-events:none}
.sizer span{grid-area:1/1}
/* width:0 keeps the input's default ~20ch out of the grid's max-content (Safari sized the blank by it); min-width stretches it to the sizer */
.hero .blank input{field-sizing:fixed;grid-area:1/1;width:0;min-width:100%;margin:0;box-sizing:border-box}
.hero .blank input::placeholder{color:transparent}
.ghost{position:absolute;left:0;right:0;top:0;padding:0 .1em;color:var(--accent);white-space:nowrap;overflow:hidden;pointer-events:none}
.ghost b{font-weight:inherit}
.ghost i,.sizer i{width:.07em;height:.85em;margin-left:.04em;background:var(--accent);vertical-align:-.05em}
.ghost i{display:none;animation:blink 1.06s steps(1) infinite}
.sizer i{display:inline-block}
.ghost.on i{display:inline-block}
.blank input:focus ~ .ghost,.blank input:not(:placeholder-shown) ~ .ghost{display:none}
/* Desktop cap 57px: "for my" + the widest venue (~19.1em) stays on one line inside the 1100px container.
   Phones: the venue blank wraps under "for my" when it does not fit (its width is fixed by .sizer, so no jumping);
   font only has to fit the widest task phrase + cursor (~15.4em) in viewport minus 36px gutters. */
.hero .sentence{font-size:clamp(28px,4.6vw,57px)}
@media (max-width:480px){.hero .sentence{font-size:min(21px,calc((100vw - 36px)/15.6))}}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.ghost i{display:none!important}}
@supports not (field-sizing:content){.blank input{width:var(--w,12ch)}}
.menu{position:absolute;left:0;top:calc(100% + 12px);background:#fff;border-radius:18px;box-shadow:0 24px 64px -16px rgba(14,15,18,.28),0 0 0 1px var(--line);padding:8px;min-width:300px;z-index:20;display:none;font-family:Manrope,sans-serif;font-weight:500;letter-spacing:0;font-size:16px;line-height:1.3}
.menu.on{display:block}
.menu button{display:block;width:100%;text-align:left;padding:11px 14px;border-radius:12px}
.menu button:hover{background:var(--accent-soft);color:var(--accent-ink)}
.menu .hint{padding:8px 14px 6px;font-size:12.5px;color:var(--ink-3);font-weight:500}
.hero .actions{display:flex;gap:14px;align-items:center;margin-top:36px;flex-wrap:wrap}

/* catalog: compact sentence bar */
.bar{background:var(--accent-soft);border-radius:24px;padding:22px 28px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:8px}
.bar form{display:flex;align-items:center;gap:18px;flex-wrap:wrap;flex:1}
.bar .sentence{font-size:clamp(24px,3vw,34px);line-height:1.5;flex:1 1 0;min-width:0}
.bar .blank input{border-bottom-width:3px;color:var(--accent-ink)}
.bar .blank input::placeholder{color:var(--accent-ink)}
.bar .menu{font-size:15px}
html.js .bar #sView{margin:5px 0}
html:not(.js) .bar #sView{display:none}
.sv-v{color:var(--accent-ink)}
.sv-p{color:var(--accent);opacity:.45}
.sclear{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:var(--ink-2);background:transparent;text-decoration:none}
.sclear:hover{color:var(--ink);background:var(--accent-soft)}
.tabs{display:flex;gap:6px;margin:26px 0 8px;border-bottom:1px solid var(--line)}
.tab{font-family:var(--display);font-weight:500;font-size:15px;padding:12px 4px;margin-right:22px;border-bottom:3px solid transparent;color:var(--ink-3);text-decoration:none;white-space:nowrap}
.tab[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent)}
.tab:hover{color:var(--ink)}
.tab i{font-style:normal;font-family:Manrope;font-weight:600;font-size:12.5px;background:var(--plinth);color:var(--ink-2);border-radius:999px;padding:2px 8px;margin-left:8px;vertical-align:middle}
.tab[aria-selected=true] i{background:var(--accent);color:#fff}

.split{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;padding:20px 0 120px;align-items:start}
.rail{position:sticky;top:calc(var(--toph) + 20px);max-height:calc(100vh - var(--toph) - 40px);overflow-y:auto}
.rail .h4{margin:22px 0 10px;font-size:12.5px;color:var(--ink-3);font-weight:600}
.rail .h4:first-child{margin-top:0}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{border-radius:999px;padding:8px 13px;font-size:13.5px;font-weight:500;background:var(--plinth);color:var(--ink);transition:all .15s;text-decoration:none}
.pill:hover{background:#DCDFE4}
.pill[aria-pressed=true]{background:var(--ink);color:#fff}
.rail .reset{display:block;margin-top:22px}

.group{margin-bottom:56px}
.group h2{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;margin:0 0 4px;padding:8px 0}
.group h2 span{color:var(--ink-3);font-weight:500;font-size:.5em;margin-left:12px;vertical-align:middle;letter-spacing:0}
.row{display:grid;grid-template-columns:180px minmax(0,1fr) auto;gap:26px;align-items:center;padding:22px 0;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.row:hover .thumb img{transform:scale(1.05)}
.thumb{border-radius:20px;overflow:hidden;background:var(--plinth);aspect-ratio:1}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.row h3{font-family:var(--display);font-weight:500;font-size:20px;margin:0 0 4px}
.row .task{font-size:16.5px;margin:0 0 10px}
.row .facts{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--ink-3)}
.row .facts b{display:block;color:var(--ink);font-weight:600;font-size:14.5px;font-variant-numeric:tabular-nums}
.row .match{display:inline-block;margin-bottom:10px;background:var(--accent-soft);color:var(--accent-ink);border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:600}
.row .price{text-align:right;font-family:var(--display);font-weight:500;font-size:17px;white-space:nowrap}
.row .price small{display:block;font-family:Manrope;font-weight:500;font-size:13px;color:var(--ink-3);margin-top:4px}
.row .price .go{display:inline-grid;place-items:center;margin-top:14px;margin-left:10px;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;font-size:18px;transition:background .15s,transform .25s}
.row:hover .price .go{background:var(--accent);transform:translateX(4px)}
.empty{padding:48px 0;color:var(--ink-2);font-size:17px;max-width:46ch}
.empty b{display:block;font-family:var(--display);font-weight:700;font-size:26px;color:var(--ink);margin-bottom:10px;letter-spacing:-.02em}

/* robot page */
.crumb{display:inline-flex;align-items:center;gap:8px;margin:12px 0 22px;font-weight:500;color:var(--ink-2);text-decoration:none}
.crumb:hover{color:var(--ink)}
.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:start}
.product .pic{background:var(--plinth);border-radius:32px;overflow:hidden;position:sticky;top:20px}
.product .pic img{width:100%;aspect-ratio:1;object-fit:cover}
.product h1{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.03em;margin:0 0 4px;line-height:1.05}
.product .brand{color:var(--ink-3);margin:0 0 18px;font-size:15px}
.product .task{font-size:21px;font-weight:500;margin:0 0 24px}
.product .desc{margin:6px 0 14px;font-size:14px;line-height:1.5;color:var(--ink-2,inherit)}
.seg{display:inline-flex;background:var(--plinth);border-radius:999px;padding:4px;margin-bottom:20px}
.seg button{padding:9px 16px;border-radius:999px;font-size:14px;font-weight:600;color:var(--ink-2)}
.seg button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(14,15,18,.12)}
.plain h5{margin:18px 0 8px;font-size:12.5px;color:var(--ink-3);font-weight:600}
.plain h5:first-child{margin-top:0}
.plain ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:16.5px;line-height:1.45}
.plain li{padding-left:26px;position:relative}
.plain li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;border-radius:50%;background:var(--accent-soft);border:2px solid var(--accent)}
.plain ul.needs li::before{background:var(--plinth);border-color:var(--ink-3)}
.full{display:none;grid-template-columns:1fr 1fr;gap:0 24px;font-size:14.5px}
.full.on{display:grid}
.full div{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.full span{color:var(--ink-2)}.full b{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.kv{display:flex;gap:30px;flex-wrap:wrap;margin:28px 0 22px}
.kv div{font-size:13px;color:var(--ink-3)}
.kv b{display:block;font-size:20px;color:var(--ink);font-weight:700;margin-top:3px;white-space:nowrap}
.seller{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:var(--plinth);border-radius:18px;padding:18px 20px;margin-top:24px}
.seller b{display:block;font-size:15.5px}.seller span{font-size:13.5px;color:var(--ink-2)}
.form{display:none;margin-top:16px;background:var(--accent-soft);border-radius:18px;padding:20px}
.form.on{display:block}
.form label{display:block;font-size:13px;color:var(--accent-ink);font-weight:600;margin:0 0 6px}
.form .g{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.form input,.form textarea{width:100%;border:0;border-radius:12px;padding:12px 14px;background:#fff;font-size:15px}
.form textarea{min-height:92px;resize:vertical;margin-bottom:12px}
.sent{display:none;margin-top:16px;background:var(--ink);color:#fff;border-radius:18px;padding:22px}
.sent b{font-family:var(--display);font-weight:500;display:block;margin-bottom:6px}
.sent p{margin:0;color:rgba(255,255,255,.75);font-size:14.5px}
.more{padding:72px 0 120px}
.more h2{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.6vw,32px);letter-spacing:-.02em;margin:0 0 22px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.tile{display:block;border-radius:22px;overflow:hidden;background:var(--plinth);text-decoration:none;position:relative;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.tile:hover{transform:translateY(-4px)}
.tile img{width:100%;aspect-ratio:4/3;object-fit:cover}
.tile .cap{padding:16px 18px 18px}
.tile b{display:block;font-family:var(--display);font-weight:500;font-size:16px;margin-bottom:3px}
.tile p{margin:0;color:var(--ink-2);font-size:14px}
.tile .price{position:absolute;top:12px;right:12px;background:#fff;border-radius:999px;padding:6px 11px;font-size:12.5px;font-weight:600}

@media(max-width:960px){.split{grid-template-columns:1fr;gap:24px}.rail{position:static}.product{grid-template-columns:1fr}.product .pic{position:static}.row{grid-template-columns:110px minmax(0,1fr)}.row .price{grid-column:2;text-align:left}.row .price .go{display:none}.full{grid-template-columns:1fr}.form .g{grid-template-columns:1fr}.tabs{overflow-x:auto;scrollbar-width:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* round 4 */
.pill i{font-style:normal;margin-left:7px;font-size:11.5px;color:var(--ink-3);font-weight:600}
.pill[aria-pressed=true] i{color:rgba(255,255,255,.65)}
.pill:disabled{opacity:.35;cursor:default}
.pill:disabled:hover{background:var(--plinth)}
.row h3 em{font-style:normal;font-family:Manrope;font-weight:600;font-size:12px;color:var(--ink-3);background:var(--plinth);border-radius:999px;padding:3px 9px;vertical-align:middle;margin-left:6px}
.hero.pure{min-height:calc(100dvh - 76px);display:flex;flex-direction:column;justify-content:center;padding-bottom:120px}

/* round 5: filter rail variants */
.tabs .clear{margin-left:auto;align-self:center;font-size:14px;padding-bottom:4px}
.fg{margin-bottom:26px}
.fg h4{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:13px;font-weight:600;color:var(--ink)}
.fg h4 .ph{font-size:18px;color:var(--accent)}
.fg h4 output{margin-left:auto;font-weight:500;color:var(--ink-3);font-size:12.5px}
/* C: widgets */
.formtiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ftile{position:relative;border-radius:14px;background:var(--plinth);padding:8px 8px 10px;text-align:left;transition:box-shadow .15s}
.ftile img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;mix-blend-mode:multiply}
.ftile span{display:block;font-size:12.5px;font-weight:600;margin-top:8px;line-height:1.2}
.ftile i{position:absolute;top:8px;right:8px;font-style:normal;font-size:11px;font-weight:600;background:#fff;border-radius:999px;padding:2px 7px}
.ftile:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.ftile[aria-pressed=true]{box-shadow:inset 0 0 0 2.5px var(--accent);background:var(--accent-soft)}
.range{width:100%;accent-color:var(--accent);margin:6px 0 2px}
.ticks{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-3)}
.segment{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--plinth);border-radius:12px;padding:4px;gap:4px}
.segment button{padding:9px 6px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.segment button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(14,15,18,.12)}
.switch3{display:flex;flex-direction:column;gap:6px}
.switch3 button{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:14px;font-weight:500;text-align:left}
.switch3 button::before{content:"";width:36px;height:22px;border-radius:999px;background:var(--line);position:relative;flex:none;transition:background .15s;box-shadow:inset 0 0 0 0 #fff}
.switch3 button::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;margin:2px;transition:transform .15s;box-shadow:0 1px 3px rgba(14,15,18,.25)}
.switch3 button{position:relative}
.switch3 button[aria-pressed=true]::before{background:var(--accent)}
.switch3 button[aria-pressed=true]::after{transform:translateX(14px)}
.sel{position:relative;display:block}
.sel select{appearance:none;width:100%;height:44px;border:0;background:var(--plinth);border-radius:12px;padding:0 36px 0 14px;font:inherit;font-weight:500;cursor:pointer}
.sel::after{content:"";position:absolute;right:15px;top:50%;width:7px;height:7px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.checks{display:flex;flex-direction:column;gap:4px}
.check{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:14px;font-weight:500;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--accent);margin:0}
.check i{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--ink-3);font-weight:600}
@media(max-width:960px){.formtiles{grid-template-columns:repeat(3,1fr)}}

/* round 6: C + A + B combined */
.fg.combo h4{color:var(--ink)}
.fg.combo h4::before{display:none}
.fg.combo h4 .ph{color:var(--g);font-size:19px}
.fg.combo h4 output{color:var(--g);font-weight:600}
.fg.combo .ftile{background:var(--gs)}
.fg.combo .ftile:hover{box-shadow:inset 0 0 0 1.5px var(--g)}
.fg.combo .ftile[aria-pressed=true]{box-shadow:inset 0 0 0 2.5px var(--g);background:var(--gs)}
.fg.combo .ftile i{color:var(--g)}
.fg.combo .range{accent-color:var(--g)}
.fg.combo .segment{background:var(--gs)}
.fg.combo .segment button[aria-pressed=true]{color:var(--g)}
.fg.combo .switch3 button::before{background:var(--gs);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--g) 25%,transparent)}
.fg.combo .switch3 button[aria-pressed=true]::before{background:var(--g);box-shadow:none}
.fg.combo .sel select{background:var(--gs)}
.fg.combo .sel::after{border-color:var(--g)}
.fg.combo .check input{accent-color:var(--g)}
.fg.combo .check i{color:var(--g)}

/* round 7: guided setup */
.hero .actions .btn.soft{background:var(--accent-soft);color:var(--accent-ink)}
.hero .actions .btn.soft:hover{background:var(--accent);color:#fff}
.progress{height:4px;background:var(--line);border-radius:2px;overflow:hidden;margin:4px 0 36px}
.progress i{display:block;height:100%;width:100%;background:var(--accent);border-radius:2px;transform-origin:left;transform:scaleX(0);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.setup{display:grid;grid-template-columns:300px minmax(0,1fr);gap:56px;align-items:start;padding-bottom:120px}
.brief{position:sticky;top:24px}
.brief h3{font-family:var(--display);font-weight:500;font-size:14px;margin:0 0 14px;color:var(--ink-3)}
.brief .chip{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 12px;border-radius:14px;font-size:14.5px;font-weight:500;color:var(--ink-3);transition:background .15s,transform .25s cubic-bezier(.16,1,.3,1)}
.brief .chip i{font-style:normal;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--plinth);flex:none;transition:background .2s,color .2s}
.brief .chip em{font-style:normal;margin-left:auto;font-size:12px;color:var(--ink-3);opacity:0;transition:opacity .15s}
.brief .chip.on{color:var(--ink);animation:pop .35s cubic-bezier(.16,1,.3,1)}
.brief .chip.on i{background:var(--ink);color:#fff}
.brief .chip.cur{background:var(--accent-soft);color:var(--accent-ink)}
.brief .chip.cur i{background:var(--accent);color:#fff}
.brief .chip:not(:disabled):hover{background:var(--plinth);transform:translateX(4px)}
.brief .chip:not(:disabled):hover em{opacity:1}
.brief .chip:disabled{cursor:default;opacity:.55}
.brief .total{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.brief .total b{font-family:var(--display);font-weight:700;font-size:28px;display:block;color:var(--ink);letter-spacing:-.02em}
@keyframes pop{from{transform:scale(.96);opacity:.4}to{transform:none;opacity:1}}
.card{min-height:420px}
.card.in-right{animation:inR .45s cubic-bezier(.16,1,.3,1)}
.card.in-left{animation:inL .45s cubic-bezier(.16,1,.3,1)}
@keyframes inR{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes inL{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
.stepno{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--accent-ink)}
.card h1{font-family:var(--display);font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.025em;line-height:1.1;margin:0 0 10px;max-width:22ch}
.card .hint{margin:0 0 28px;color:var(--ink-2);font-size:16px;max-width:52ch}
.opts{display:grid;gap:12px}
.opts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.opts.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.opt{text-align:left;background:var(--plinth);border-radius:18px;padding:18px 20px;min-height:76px;display:flex;flex-direction:column;justify-content:center;gap:4px;transition:box-shadow .15s,transform .2s cubic-bezier(.16,1,.3,1),background .15s}
.opt:hover{box-shadow:inset 0 0 0 1.5px var(--ink);transform:translateY(-2px)}
.opt[aria-pressed=true]{background:var(--accent-soft);box-shadow:inset 0 0 0 2.5px var(--accent)}
.opt b{font-size:16px;font-weight:600;line-height:1.25}
.opt span{font-size:13px;color:var(--ink-2)}
.opt.pic{padding:12px 12px 14px}
.opt.pic img{width:100%;aspect-ratio:1.4;object-fit:cover;border-radius:12px;mix-blend-mode:multiply;margin-bottom:8px}
.free{display:block;margin-top:18px}
.free span{display:block;font-size:13px;color:var(--ink-3);font-weight:600;margin-bottom:6px}
.free input{width:100%;border:0;border-bottom:2px solid var(--line);background:none;padding:10px 0;font-size:18px;outline:0}
.free input:focus{border-bottom-color:var(--accent)}
.card .nav{display:flex;gap:12px;margin-top:32px}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.ghost:hover{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn:disabled{opacity:.35;cursor:default}
.btn.big{height:64px;padding:0 34px;font-size:17px}
@media(max-width:900px){.setup{grid-template-columns:1fr;gap:28px}.brief{position:static}.brief .chip{padding:8px 10px}.opts.three,.opts.two{grid-template-columns:1fr 1fr}.card{min-height:0}}
@media(max-width:560px){.opts.three,.opts.two{grid-template-columns:1fr}}

/* round 8: setup with colour, glyphs and pictures */
.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8{--g:var(--accent);--gs:var(--accent-soft)}
.c1{--g:#2447F5;--gs:#E9EDFE}.c2{--g:#1B7A4E;--gs:#E3F3EA}.c3{--g:#B6680F;--gs:#FBEFDB}.c4{--g:#0F7A8A;--gs:#E0F3F6}.c5{--g:#6B3FD1;--gs:#EEE8FB}.c6{--g:#B52D6E;--gs:#FBE6EF}.c7{--g:#3F4753;--gs:#E8EAEE}.c8{--g:#8A5A00;--gs:#F7EEDC}
.progress i{background:var(--g)}
.brief .chip i.ph{font-size:16px;color:var(--g);background:var(--gs);border-radius:8px}
.brief .chip.on i.ph{background:var(--g);color:#fff}
.brief .chip.cur{background:var(--gs);color:var(--g)}
.brief .chip.cur i.ph{background:var(--g);color:#fff}
.brief .chip:disabled i.ph{background:var(--plinth);color:var(--ink-3)}
.card .stepno{display:inline-flex;align-items:center;gap:8px;color:var(--g);background:var(--gs);border-radius:999px;padding:6px 12px 6px 8px}
.card .stepno .ph{font-size:18px}
.card .opt{background:var(--gs)}
.card .opt:hover{box-shadow:inset 0 0 0 1.5px var(--g)}
.card .opt[aria-pressed=true]{background:var(--gs);box-shadow:inset 0 0 0 2.5px var(--g)}
.card .opt[aria-pressed=true] b{color:var(--g)}
.card .opt.glyph{padding-top:22px}
.card .opt.glyph .ph{font-size:30px;color:var(--g);margin-bottom:10px}
.opts.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.card .opt.pic{padding:10px 12px 14px}
.card .opt.pic img{aspect-ratio:1.5;background:var(--plinth);border-radius:12px;mix-blend-mode:normal}
.card .free input:focus{border-bottom-color:var(--g)}
.card .btn:not(.ghost){background:var(--g)}
.card .btn:not(.ghost):hover{filter:brightness(.9)}
@media(max-width:900px){.opts.four{grid-template-columns:1fr 1fr}}

/* round 9: action scenes instead of robot portraits */
.opts.art .opt.pic{padding:0 0 14px;gap:2px;overflow:hidden;justify-content:flex-start}
.opts.art .opt.pic img{aspect-ratio:3/2;border-radius:0;background:#fff;margin-bottom:10px;mix-blend-mode:normal;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.opts.art .opt.pic:hover img{transform:scale(1.03)}
.opts.art .opt.pic b,.opts.art .opt.pic span{padding:0 16px}
.opts.art .opt.pic b{font-size:15px}
.opts.four.art{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media(max-width:900px){.opts.four.art{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* round 10: drill-down, fewer and bigger tiles */
.opts.two.art .opt.pic img{aspect-ratio:2/1}
.opts.art .opt.pic b{font-size:16px}
.opts.art .opt.pic span{margin-top:2px}
.bar .editbrief{white-space:nowrap;font-size:14px;color:var(--accent-ink);text-decoration-color:var(--accent-soft)}

/* round 13: real catalog */
.row h3 .av,.product .brand .av{font-style:normal;font-family:Manrope;font-weight:700;font-size:11.5px;border-radius:999px;padding:3px 9px;margin-left:6px;vertical-align:middle;background:#FBEFDB;color:#8A4E0A}
.av.announced{background:#E8EAEE;color:#3F4753}.av.preorder{background:#E9EDFE;color:#1A36C4}
.av.discontinued{background:#EEEFF2;color:#6B7280}
.av.verified{background:#E3F4E8;color:#1E6B3A}
.formtiles{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}
.ftile span{font-size:11.5px}
.seller a{color:var(--accent-ink)}

/* round 15: active groups highlighted in the rail itself, no strip */
.rail .fg{padding:10px 12px;margin:0 -12px 16px;border-radius:16px;transition:background .2s}
.rail .fg.on{background:var(--gs,var(--accent-soft))}
.rail .fg.on h4{color:var(--g,var(--accent-ink))}
.rail .fg.on h4::after{display:none}
.rail .fg.on .ftile:not([aria-pressed=true]){opacity:.55}
.rail .fg.on .pill:not([aria-pressed=true]){opacity:.6}
.rail .fg.on .segment button:not([aria-pressed=true]){opacity:.6}
.rail .fg.on .switch3 button:not([aria-pressed=true]){opacity:.55}
.rail .fg.combo.on .ftile{background:#fff}
.rail .fg.combo.on .segment,.rail .fg.combo.on .sel select{background:#fff}
.rail .fg.combo.on .switch3 button::before{background:#fff}
.rail .fg.combo.on .switch3 button[aria-pressed=true]::before{background:var(--g)}
.bar.on .blank input{border-bottom-color:var(--accent)}

/* round 16: view transitions, notice, anchors as buttons */
@view-transition { navigation: auto; }
.notice{margin:16px 0;padding:12px 16px;border-radius:12px;background:var(--plinth);font-size:14px;color:var(--ink-2)}
.ftile,.check{text-decoration:none;color:inherit;cursor:pointer}
.pill{text-decoration:none;color:var(--ink);cursor:pointer}
.tab{text-decoration:none;color:var(--ink-3);cursor:pointer}
.segment a{padding:9px 6px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--ink-2);text-decoration:none;cursor:pointer}
.segment a[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(14,15,18,.12)}
.switch3 a{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:14px;font-weight:500;text-align:left;position:relative;color:inherit;text-decoration:none;cursor:pointer}
.switch3 a::before{content:"";width:36px;height:22px;border-radius:999px;background:var(--line);position:relative;flex:none;transition:background .15s;box-shadow:inset 0 0 0 0 #fff}
.switch3 a::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;margin:2px;transition:transform .15s;box-shadow:0 1px 3px rgba(14,15,18,.25)}
.switch3 a[aria-pressed=true]::before{background:var(--accent)}
.switch3 a[aria-pressed=true]::after{transform:translateX(14px)}
.formtiles .ftile{display:flex;flex-direction:column;justify-content:center}
.formtiles .ftile img{display:block}

.gobtn{flex:none;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--ink);color:#fff;font-size:22px;transition:background .15s,transform .15s}
.gobtn:hover{background:var(--accent)}
.gobtn:active{transform:scale(.96)}
.gobtn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* robot page: no-JS toggle and contact */
#m-plain,#m-full{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.seg label{padding:9px 16px;border-radius:999px;font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer}
#m-plain:checked ~ .seg label[for="m-plain"],#m-full:checked ~ .seg label[for="m-full"]{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(14,15,18,.12)}
#m-plain:focus-visible ~ .seg label[for="m-plain"],#m-full:focus-visible ~ .seg label[for="m-full"]{outline:2px solid var(--accent);outline-offset:2px}
#m-full:checked ~ .plain{display:none}
#m-full:checked ~ .full{display:grid}
.contact{margin:0}
.contact > summary{list-style:none;cursor:pointer}
.contact > summary::-webkit-details-marker{display:none}
.contact .form{display:block}
.sent{display:block}
.form .err{color:#b42318;font-size:14px;font-weight:600;margin:0 0 12px}

/* setup: anchors and disabled spans standing in for buttons and chips */
.brief a.chip{text-decoration:none}
.card a.opt{text-decoration:none;color:var(--ink)}
.brief span.chip[aria-disabled="true"]{cursor:default;opacity:.55}
.brief span.chip[aria-disabled="true"] i.ph{background:var(--plinth);color:var(--ink-3)}
.brief span.chip[aria-disabled="true"]:hover{background:none;transform:none}
.brief span.chip[aria-disabled="true"]:hover em{opacity:0}
span.btn[aria-disabled="true"]{opacity:.35;cursor:default}
span.btn.ghost[aria-disabled="true"]:hover{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line)}
.sovbg{display:none;position:fixed;inset:0;z-index:60;background:rgba(14,15,18,.45)}
@media (max-width:960px){
.sov{display:none;position:fixed;top:12vh;left:0;right:0;z-index:61;margin:0 auto;width:min(880px,calc(100vw - 32px));box-sizing:border-box;background:var(--accent-soft);border-radius:24px;padding:22px 28px}
}
html.js body.search-open{overflow:hidden}
@media (max-width:960px){
html.js body.search-open .sovbg{display:block}
html.js body.search-open .sov{display:block;animation:ovIn .22s ease-out}
}
.sov form{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.sov .sentence{font-size:clamp(24px,3.4vw,40px);line-height:1.25;margin:0;flex:1 1 520px;max-width:100%;overflow-wrap:anywhere}
.sov .fld{overflow-wrap:anywhere}
.sov .gobtn{display:grid;margin:18px auto 0}
.blank .fld{display:inline;font:inherit;color:var(--accent);background:none;border:0;padding:0 .1em;margin:0 .05em;outline:0;overflow-wrap:break-word;transition:border-color .15s;cursor:text}
.blank .fld:empty::before{content:attr(data-ph);color:var(--accent);opacity:.45}
@keyframes ovIn{from{opacity:0;transform:translate(var(--ox,0px),var(--oy,0px)) scale(var(--os,.6))}to{opacity:1;transform:none}}
@keyframes ovFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){html.js body.search-open .sov,html.js body.search-open .sovbg{animation:ovFade .22s ease-out}}
@media (min-width:961px){html.js .bar #sView{display:none}
html.js .bar .sov .sentence{font-size:clamp(24px,3vw,34px);line-height:1.5;flex:1 1 0;min-width:0}
html.js .bar .blank .fld{color:var(--accent-ink)}}

.fgrid{display:none}
.sheetbg{display:none}
.sheetfoot{display:none}
@media(max-width:960px){html.js .fgrid{display:block;position:sticky;top:var(--toph);z-index:20;background:var(--bg);padding:0;margin:0 -2px;border-bottom:0}html.js .fline{display:block;width:100%;min-height:40px;padding:10px 0;background:none;border:0;font:inherit;font-size:15px;line-height:1.3;color:var(--ink-2);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}html.js .fline .ph{font-size:18px;margin-right:8px;vertical-align:-3px}html.js .fline:focus-visible{outline:2px solid var(--accent);outline-offset:2px}html.js .sheetbg{position:fixed;inset:0;z-index:30;background:rgba(14,15,18,.4)}html.js body.sheet-open .sheetbg{display:block}html.js body.sheet-open{overflow:hidden}html.js .rail{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:40;max-height:85vh;overflow-y:auto;background:var(--bg);border-radius:20px 20px 0 0;box-shadow:0 -10px 40px rgba(14,15,18,.18);padding:18px 20px 0;transform:translateY(100%);visibility:hidden;transition:transform .25s ease,visibility .25s}html.js body.sheet-open .rail{transform:none;visibility:visible}html.js .rail .fg:first-child{margin-top:0}html.js .sheetfoot{display:flex;align-items:center;gap:16px;position:sticky;bottom:0;margin:0 -20px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line)}html.js .showbtn{flex:1;min-height:48px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:15px}html.js .showbtn:hover{background:var(--accent)}html.js .sheetfoot .textlink{white-space:nowrap}html.js .sheetfoot{display:flex}}
@media(max-width:960px){.row .price{white-space:normal}}
@media(max-width:960px){.row h3{overflow-wrap:anywhere}.row h3 em{display:inline-block;max-width:100%;vertical-align:middle}.bar{position:relative}.blank{position:static}.blank .menu{top:auto;margin-top:12px;left:0;right:16px;width:auto;min-width:0}}
body[data-page=catalog] .tabs{margin-top:9px}

.fline .v{color:var(--g);font-weight:700}
.fline span:not(.v){color:var(--ink-2)}
.nojs-search input{font:inherit;color:inherit;background:transparent;border:0;border-bottom:2px solid var(--ink);padding:0 4px;width:auto;max-width:100%}
.nojs-search .gobtn{display:grid;margin:18px auto 0}

.is-form,.thumb .is-form,.tile .is-form,.product .pic .is-form{object-fit:contain;padding:10%;box-sizing:border-box}