/* Direction D (remake/design-v2/make.js is the mockup source: same sizes, palette and fonts; v1 BRIEF: yellow only for % and the main action) */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:B,system-ui,sans-serif;color:#111;background:#fff;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:430px;margin:0 auto;padding:6px 20px 24px;min-height:100vh;position:relative;overflow-x:clip}
.h1{font:800 30px/1.02 C;text-transform:uppercase;margin:18px 0 12px}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.chips span,.chip{font:600 14px B;padding:8px 11px;border-radius:999px;background:#F2F2F0;white-space:nowrap}
.chip.on{background:#111;color:#fff}
.bat{margin-bottom:12px}
.badge{background:#FEBD17;font:700 14px C;padding:3px 6px 2px;border-radius:6px;letter-spacing:.02em}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.t{background:#F5F5F3;border-radius:14px;padding:8px;position:relative;height:184px;display:flex;flex-direction:column}
picture{display:contents}
.t img{flex:1;height:0;min-height:0;width:100%;object-fit:contain;mix-blend-mode:multiply;margin-top:14px}
.t .badge{position:absolute;left:7px;top:7px;z-index:1}
.t .tx{display:block;min-width:0;margin-top:auto}
.t .n{display:block;font:600 13px/1.15 B;color:#444;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t .p{display:block;font:700 16px B;margin-top:1px}
.t .vs{display:block;font:500 11px/1.3 B;color:#555}
.t .s{display:block;font:500 11px/1.3 B;color:#767676;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t.w{grid-column:span 2;flex-direction:row;align-items:center;gap:8px}
.t.w img{width:54%;flex:none;height:100%;margin-top:0}
.t.w .tx{flex:1}.t.w .n{white-space:normal;font-size:15px}.t.w .p{font-size:22px}.t.w .badge{font-size:17px}
.none{font:600 16px B;color:#767676;padding:30px 0}
.cta{position:fixed;left:0;right:0;bottom:0;padding:10px 20px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #EDEDEB}
.cta .btn{max-width:390px;margin:0 auto}
@media (max-width:699px){.cta .btn{height:48px}body:has(.wrap>.cta) .ft{padding-bottom:96px}}
body:has(.mm[open]) .cta{display:none}
.btn{display:flex;align-items:center;justify-content:center;height:56px;border-radius:14px;font:600 17px B}
.btn.y{background:#FEBD17}.btn.k{background:#111;color:#fff}
.top{display:flex;align-items:center;gap:14px;padding-top:12px}
.back{display:grid;place-items:center;width:28px;height:28px;flex:none}
.dots{flex:1;display:flex;gap:6px}.dots i{flex:1;height:4px;border-radius:2px;background:#E6E6E3}.dots i.on{background:#111}
.skip{font:600 16px B;color:#767676}
.q{font:800 40px/1 C;text-transform:uppercase;margin-top:40px}
.q.sm{font-size:34px;margin-top:26px}
.opts{margin-top:28px;display:grid;gap:10px}
.opt{border:2px solid #E6E6E3;border-radius:16px;min-height:64px;display:flex;align-items:center;justify-content:space-between;padding:8px 18px;font:600 18px B}
.opt small{display:block;font:500 13px B;color:#767676;margin-top:2px}
.opt.on{border-color:#111;background:#111;color:#fff}.opt.on small{color:#ccc}
.jobs{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.job{border:2px solid #E6E6E3;border-radius:16px;height:118px;padding:8px 12px;display:flex;flex-direction:column;position:relative}
.job img{flex:1;min-height:0;width:100%;object-fit:contain;mix-blend-mode:multiply}
.job .n{font:600 16px B;margin-top:4px}
.job svg{position:absolute;right:10px;top:10px}
.job.on{border-color:#111;background:#111;color:#fff}.job.on img{mix-blend-mode:normal;background:#fff;border-radius:8px}
.job.off{opacity:.4}
.model{font:600 14px B;color:#767676;margin:6px 0 4px}
.disc{font:500 13px/1.4 B;color:#555;margin:2px 0 10px}.disc a{color:#111;text-decoration:underline}
.ways{list-style:none}
.row{display:flex;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid #EDEDED}
.row.first{padding-top:10px}
.thumb{width:64px;height:64px;flex:none;background:#F5F5F3;border-radius:12px;display:grid;place-items:center;overflow:hidden;grid-template:100%/100%}
.thumb img{width:88%;height:88%;object-fit:contain;mix-blend-mode:multiply}
.thumb.pair{display:flex;align-items:center;justify-content:center;gap:2px}.thumb.pair img{width:46%;height:70%}
.first .thumb{width:84px;height:84px}
.nm{flex:1;min-width:0;font:600 16px B}
.first .nm{font-size:18px}
.nm small{display:block;font:500 13px B;color:#767676;margin-top:3px}
.nm small.math{color:#111;font-weight:600}.row:not(.first) .nm small.math{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#555;font-weight:500;font-size:13px}
.pr{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.pr b{font:700 19px B}.first .pr b{font-size:22px}.first .badge{font-size:17px}
.buy{font:600 14px B;border:1.5px solid #111;border-radius:10px;padding:5px 12px}
.sep{border:0;color:#555}.sep .pr b{color:#555}
.nm .parts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.parts .buy{color:#111;line-height:1.2}
@media (min-width:700px){.wrap{max-width:720px;min-height:0;padding-bottom:48px}.grid{grid-template-columns:repeat(4,minmax(0,1fr))}.h1{font-size:40px}.jobs{grid-template-columns:repeat(4,1fr)}.cta{position:static;background:none;padding:28px 0 0;border:0}.cta .btn{max-width:none}}
.nm small.add a{color:#111;text-decoration:underline}
/* Motion: transform/opacity only, nothing that moves layout; all of it off under prefers-reduced-motion (end of file) */
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
@keyframes slide{from{opacity:0;transform:translateX(28px)}}
@keyframes shimmer{to{background-position:-200% 0}}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes fade{from{opacity:0}}
.q,.opts,.jobs,.model{animation:slide .28s ease-out backwards}
.opts{animation-delay:.05s}.jobs{animation-delay:.05s}
.ways .row{animation:rise .35s ease-out backwards}
.ways .row:nth-child(2){animation-delay:.07s}.ways .row:nth-child(3){animation-delay:.14s}.ways .row:nth-child(4){animation-delay:.21s}.ways .row:nth-child(n+5){animation-delay:.28s}
.t,.opt,.job,.btn,.chip,.buy{transition:transform .12s ease-out}
.t:active,.opt:active,.job:active,.btn:active,.chip:active,.buy:active{transform:scale(.97)}
/* #why: height reserved so the streamed text does not move the page */
#why{margin-top:18px;min-height:120px;font:500 15px/1.5 B;color:#333}
.why-h{display:flex;align-items:center;gap:8px;font:600 13px B;color:#767676;height:20px;margin-bottom:8px}
.gear{width:16px;height:16px;fill:#555}
#why.load .gear,#why.busy .gear{animation:turn 5s linear infinite}
.why-sk i{display:block;height:12px;border-radius:6px;margin-bottom:10px;background:linear-gradient(90deg,#EDEDEB 25%,#F8F8F6 50%,#EDEDEB 75%) 0 0/200% 100%;animation:shimmer 1.3s linear infinite}
.why-sk i:nth-child(2){width:92%}.why-sk i:nth-child(3){width:58%}
.why-t .w{animation:fade .3s ease-out backwards}
.caret{display:inline-block;width:2px;height:1em;margin-left:-3px;vertical-align:-.15em;background:#999;animation:fade .8s ease-in-out infinite alternate}
@media (min-width:700px){#why{min-height:210px}}
.why-t p+p,.why-t p+ul,.why-t ul+p{margin-top:8px}
.why-t ul{margin:4px 0 0 18px}.why-t li{margin-top:3px}
.why-t strong{font-weight:700;color:#111}
/* follow-up thread: a question as a right-aligned bubble, the answer streamed like the explanation */
.fu{margin-top:16px;animation:fade .3s ease-out backwards}
.fu-q{margin:12px 0 8px auto;max-width:85%;width:fit-content;padding:8px 12px;border-radius:14px 14px 4px 14px;background:#EDEDEB;font:500 14px/1.4 B;color:#111}
.fu-a{min-height:24px}
.fu-c{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.chip-q{font:500 13px B;padding:7px 12px;border:1px solid #D5D5D2;border-radius:999px;background:#fff;color:#333;cursor:pointer}
.fu-f{display:flex;gap:8px}
.fu-f input{flex:1;min-width:0;font:500 15px B;padding:11px 12px;border:1px solid #D5D5D2;border-radius:10px;background:#fff}
.fu-f button{font:700 14px B;padding:0 16px;border:0;border-radius:10px;background:#111;color:#fff;cursor:pointer}
.fu-f button:disabled{opacity:.45}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Results page: the ask as chips with Edit, a hero card for the best deal, ranked cards for the other ways, the parts as the anchor */
body:has(.res){background:#F2F2F0}
.res{padding-top:14px}
.ask{display:flex;justify-content:space-between;align-items:baseline;font:600 13px B;color:#767676;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.edit{font:600 15px B;color:#111;text-transform:none;letter-spacing:0;text-decoration:underline}
.res .chips span{background:#fff;border:1.5px solid #E1E1DE}
.res .q.sm{margin-top:20px}
.res .ways .row{background:#fff;border:0;border-radius:16px;padding:12px;margin-top:8px;position:relative}
.res .ways .row.first{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:end;padding:16px;margin-top:10px;border:2px solid #111;border-radius:20px}
.row.first .tag{grid-column:1/-1;justify-self:start;font:700 12px B;text-transform:uppercase;letter-spacing:.06em;background:#111;color:#fff;border-radius:999px;padding:4px 10px}
.row.first .thumb{grid-column:1/-1;width:100%;height:170px;background:#F5F5F3;border-radius:14px;margin:10px 0 6px}
.row.first .nm{grid-column:1;font-size:19px}
.row.first .pr{grid-column:2;grid-row:3;align-items:flex-end}
.row.first .pr b{font-size:30px}
.row.first .math{grid-column:1/-1;font:600 15px B;color:#111;margin-top:6px}
.row.first .cta{grid-column:1/-1;position:static;padding:12px 0 0;background:none}.row.first .cta .btn{max-width:none}
.row.first #why{grid-column:1/-1}
.oh{list-style:none;font:800 20px C;text-transform:uppercase;margin:22px 0 2px;letter-spacing:.02em}
.rk{width:26px;height:26px;flex:none;border-radius:50%;background:#111;color:#fff;font:700 14px B;display:grid;place-items:center}
.res .ways .row.sep{background:none;border:1.5px dashed #C9C9C5;margin-top:18px}
.res .row .thumb{background:#F5F5F3}
.row.first .fit{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.row.first .fit:empty{display:none}
.row.first .fit i{font:600 13px B;font-style:normal;background:#F2F2F0;border-radius:999px;padding:5px 10px}
.row.first .shop,.row.first .box,.row.first .basis{grid-column:1/-1;font:500 13px B;color:#767676;margin-top:4px}
.why-0{font:600 15px/1.4 B;color:#111;margin-bottom:8px}
.row.first .nm{grid-row:3}
@media (min-width:700px){.res .ways .row.first{grid-template-columns:260px 1fr auto;align-items:center;padding:20px}.row.first .tag{grid-column:1/-1}.row.first .thumb{grid-column:1;grid-row:2/9;height:240px;margin:6px 0}.row.first .nm,.row.first .pr{grid-row:2}.row.first .nm{grid-column:2}.row.first .pr{grid-column:3}.row.first .fit,.row.first .math,.row.first .shop,.row.first .box,.row.first .basis,.row.first .cta{grid-column:2/-1}.row.first #why{grid-column:1/-1}}
/* grid + percent height left the photo below its box on the results page: flex + max sizes */
.res .thumb:not(.pair){display:flex;align-items:center;justify-content:center}.res .thumb:not(.pair) img{width:auto;height:auto;max-width:88%;max-height:88%}

/* Julius 11-01 15:07: % badges must not sit above the fixed Help me choose bar */
.cta{z-index:10}

@media (prefers-reduced-motion:reduce){.sx-r.pop{animation:none}.sx-i{transition:none}}
/* follow-up agent (api/explain_agent.py): one calm line per real lookup, gear while it runs and a check when done, then the answer, then one alternative card */
.fu-s:empty{display:none}
.fu-s{margin:10px 0 6px}
.fu-s p{display:flex;align-items:center;gap:8px;font:500 13px B;color:#767676;min-height:22px;animation:fade .3s ease-out backwards}
.fu-s svg{width:14px;height:14px;flex:none}
.fu-s .gear{animation:turn 2s linear infinite}
.fu-s .tick{fill:none;stroke:#1A7F37;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;animation:fade .25s ease-out}
.fu-s .ok{color:#333}
.fu-alt{margin:14px 0;animation:rise .45s ease-out backwards}
.fu-alt>p{font:600 14px/1.4 B;color:#111;margin-bottom:8px}
.fu-card{position:relative;display:flex;align-items:center;gap:12px;padding:10px;border:1px solid #D5D5D2;border-radius:14px;background:#fff;color:#111;text-decoration:none}
.fu-alt .fu-card .thumb{width:64px;height:64px;margin:0;grid-column:auto}
.fu-ct{display:flex;flex-direction:column;gap:2px;min-width:0;font:500 13px B;color:#555}
.fu-left{font:500 12px B;color:#767676}
.fu-ct b{font:700 15px/1.25 B;color:#111;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fu-card .badge{margin-left:auto;flex:none}

/* QA 11-01: Deals label, dead-end card, clipped ask chips, desktop layout */
.deals{font:800 20px C;text-transform:uppercase;letter-spacing:.02em;margin:4px 0 8px}
.lines{grid-column:1/-1;list-style:none;margin-top:8px}
.lines li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid #EDEDEB;font:600 15px B}
.lines b{font-weight:700}
.row.first .lines{grid-row:auto}
.res .chips{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);padding-right:28px}
@media (min-width:700px){.res .chips{-webkit-mask-image:none;mask-image:none;padding-right:0}.lines{grid-column:2/-1}}
@media (min-width:1024px){
body:has(.grid) .wrap{max-width:1180px;padding:6px 40px 56px}
.grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.t{height:250px;padding:12px}
.t .n{font-size:15px}.t .p{font-size:20px}
.t.w{grid-column:span 1;flex-direction:column;align-items:stretch}.t.w .tx{flex:none}.t.w img{width:100%;height:0;flex:1;margin-top:14px}.t.w .n{white-space:nowrap;font-size:15px}.t.w .p{font-size:20px}.t.w .badge{font-size:14px}
.chips.bat{margin-bottom:18px}
.wrap .all{margin-left:0}.cta{padding:20px 0 0}.cta .btn{max-width:360px;margin:0}
body:has(.res) .wrap{max-width:1180px;padding:6px 40px 64px}
.res .ways{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:32px;align-items:start}
.res .ways .row.first{grid-column:1;grid-row:1/span 40;margin-top:10px;grid-template-columns:1fr auto}
.res .ways .row.first .thumb{grid-column:1/-1;grid-row:auto;height:260px;margin:10px 0 6px}
.res .ways .row.first .nm,.res .ways .row.first .pr{grid-row:auto}
.res .ways .row.first .nm{grid-column:1}.res .ways .row.first .pr{grid-column:2}
.res .ways .row.first .fit,.res .ways .row.first .math,.res .ways .row.first .shop,.res .ways .row.first .box,.res .ways .row.first .basis,.res .ways .row.first .cta,.res .ways .row.first .lines{grid-column:1/-1}
.res .ways>li:not(.first){grid-column:2}
.res .ways .oh{margin-top:10px}
.res .ways .row.sep{margin-top:12px}
}

/* parts as the Best deal: one line per part with its photo, shop and Buy */
.pl{grid-column:1/-1;list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.pl li{display:flex;align-items:center;gap:10px}
.pl .pp{flex:none;width:56px;height:56px;background:#F5F5F3;border-radius:10px;display:grid;place-items:center;overflow:hidden;grid-template:100%/100%}
.pl .pp img{width:88%;height:88%;object-fit:contain;mix-blend-mode:multiply}
.pl .pt{flex:1;min-width:0;font:600 15px B}.pl .pt small{display:block;font:500 13px B;color:#767676}
.pl b{font:700 16px B}
.res .ways .row.first.alone .nm,.res .ways .row.first.alone .pr{grid-row:2}.res .ways .row.first.alone .pl{grid-row:3}.res .ways .row.first.alone #why{grid-row:4}

.all{display:block;max-width:360px;margin:10px auto 0;padding:12px;border:1.5px solid #111;border-radius:12px;text-align:center;font-weight:700;color:#111}