.vo-hub,.vo-finder,.vo-picks,.vo-compare-wrap,.vo-chart,.vo-brands,.vo-tip{--vf-ink:var(--vo-ink,#1E2B35);--vf-text:var(--vo-text,#34424D);--vf-muted:var(--vo-muted,#5E6B74);--vf-line:var(--vo-line,#DCE3DA);--vf-surface:#fff;--vf-sunk:var(--vo-sunk,#E9EEE7);--vf-forest:var(--vo-forest,#436430);--vf-chip:var(--vo-chip,#EAF0E6);--vf-chip-ink:var(--vo-chip-ink,#35521F);--vf-sun:var(--vo-sun,#F5B43B);--vf-sun-soft:var(--vo-sun-soft,#FCEBC6);--vf-mono:var(--vo-mono,ui-monospace,Menlo,Consolas,monospace)}
.vo-finder{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:var(--vf-surface);border:1px solid var(--vf-line);border-radius:18px;overflow:hidden;margin:32px 0;box-shadow:0 12px 32px -16px rgba(19,28,35,.25)}
@media (max-width:820px){.vo-finder{grid-template-columns:1fr}}
.vo-f-ask{padding:24px;background:linear-gradient(180deg,var(--vf-sunk),var(--vf-surface) 70%);border-right:1px solid var(--vf-line)}
@media (max-width:820px){.vo-f-ask{border-right:0;border-bottom:1px solid var(--vf-line)}}
.vo-f-eyebrow{font:500 11px/1.4 var(--vf-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--vf-forest);margin:0}
.vo-f-title{margin:4px 0 6px!important;font-size:26px!important;line-height:1.1}
.vo-f-intro{margin:0 0 16px;color:var(--vf-muted);font-size:15px}
.vo-f-q{border:0;margin:0 0 14px;padding:0}
.vo-f-q legend{font-weight:700;font-size:14px;margin-bottom:6px;color:var(--vf-ink)}
.vo-f-chips{display:flex;flex-wrap:wrap;gap:6px}
.vo-f-chips input{position:absolute;opacity:0;pointer-events:none}
.vo-f-chips label{padding:7px 12px;border:1px solid var(--vf-line);border-radius:999px;font-size:14px;cursor:pointer;background:var(--vf-surface);color:var(--vf-ink);line-height:1.2}
.vo-f-chips label:hover{border-color:var(--vf-forest)}
.vo-f-chips input:checked+label{background:var(--vf-ink);border-color:var(--vf-ink);color:#fff;font-weight:600}
.vo-f-chips input:focus-visible+label{outline:2px solid var(--vf-sun);outline-offset:2px}
.vo-f-go{width:100%;margin-top:4px;padding:13px;border:0;border-radius:999px;background:var(--vf-sun);color:#1B1406;font-weight:700;font-size:16px;cursor:pointer}
.vo-f-go:disabled{opacity:.7;cursor:wait}
.vo-f-out{padding:24px;display:flex;flex-direction:column;gap:14px;min-width:0}
.vo-f-placeholder{color:var(--vf-muted);margin:auto 0}
.vo-f-notice{background:var(--vf-sun-soft);border-radius:10px;padding:10px 14px;margin:0;font-size:14px;color:var(--vf-ink)}
.vo-f-alt{font-size:14px;color:var(--vf-muted);margin:0;border-top:1px solid var(--vf-line);padding-top:12px}

/* Finder with results: answers collapse to a summary bar, results take the full width. */
.vo-finder.has-results{grid-template-columns:1fr}
.vo-finder.has-results .vo-f-ask{display:none}
.vo-f-summary{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 24px;background:var(--vf-sunk);border-bottom:1px solid var(--vf-line);scroll-margin-top:90px}
.vo-f-summary[hidden]{display:none}
.vo-f-summary-text{margin:0;font-size:14px;color:var(--vf-ink);flex:1 1 240px}
.vo-f-edit{border:1px solid var(--vf-ink);background:transparent;color:var(--vf-ink);border-radius:999px;padding:7px 14px;font-weight:700;font-size:14px;cursor:pointer}
.vo-f-edit:hover{background:var(--vf-ink);color:#fff}
.vo-finder:not(.has-results) .vo-f-summary{display:none}

/* Best match: featured card */
.vo-feat{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);border:2px solid var(--vf-forest);border-radius:16px;overflow:hidden;background:var(--vf-surface)}
.vo-feat-media{background:var(--vf-sunk);min-height:220px}
.vo-feat-media img{width:100%;height:100%;object-fit:cover;display:block}
.vo-feat-media.is-icon{display:grid;place-items:center;color:var(--vf-forest);background:var(--vf-chip)}
.vo-feat-media.is-icon svg{width:88px;height:88px}
.vo-feat-body{padding:20px 22px;display:flex;flex-direction:column;gap:10px;min-width:0}
.vo-feat-title{margin:0!important;font-size:clamp(22px,2.6vw,28px)!important;line-height:1.15}
.vo-feat-specs{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px;margin:2px 0 0}
.vo-feat-specs>div{background:var(--vf-sunk);border-radius:10px;padding:8px 10px}
.vo-feat-specs dt{font-size:12px;color:var(--vf-muted);margin:0}
.vo-feat-specs dd{margin:0;font-weight:700;color:var(--vf-ink);font-variant-numeric:tabular-nums}
.vo-feat-sub{margin:4px 0 4px;font-weight:700;font-size:14px;color:var(--vf-ink)}
.vo-feat-btn{font-size:16px;padding:12px 20px}
.vo-feat-chart{grid-column:1/-1;border-top:1px solid var(--vf-line);padding:16px 18px;background:#FAFBF9}
.vo-feat-chart .vo-chart{border:0;padding:0;background:transparent;margin:0}
@media (max-width:640px){.vo-vs-table .vo-compare th,.vo-vs-table .vo-compare td{padding:8px 6px;font-size:13px}.vo-feat{grid-template-columns:1fr}.vo-feat-media{min-height:140px;max-height:240px}.vo-feat-body{padding:16px}.vo-f-out{padding:16px}.vo-f-summary{padding:12px 16px}.vo-vs{padding:14px}}

/* Runner-ups: smaller cards that never compete with the best match */
.vo-runners{margin-top:6px}
.vo-runners-title{margin:0 0 2px!important;font-size:18px!important}
.vo-runners-intro{margin:0 0 12px;color:var(--vf-muted);font-size:14px}
.vo-runners-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:760px){.vo-runners-grid{grid-template-columns:1fr}}
.vo-mini{border:1px solid var(--vf-line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;background:var(--vf-surface);min-width:0}
.vo-mini.is-clickable{cursor:pointer}
.vo-mini.is-clickable:hover{border-color:var(--vf-forest)}
.vo-mini.is-open{border-color:var(--vf-forest);box-shadow:0 0 0 1px var(--vf-forest) inset;background:var(--vf-chip)}
.vo-mini-top{display:flex;align-items:center;gap:8px}
.vo-mini-label{font-size:12px;font-weight:700;color:var(--vf-forest)}
.vo-mini-label.is-alt{color:#8A5A0B}
.vo-mini .vo-score{font-size:16px}
.vo-mini-title{margin:0!important;font-size:15px!important;line-height:1.3}
.vo-mini-line{margin:0;font-size:13px;color:var(--vf-muted)}
.vo-mini-actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px;padding-top:4px}
.vo-mini-cmp{border:0;background:none;padding:0;color:var(--vf-forest);font-weight:700;font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.vo-mini-price{font-size:13px;font-weight:700;color:var(--vf-ink)!important;border:1px solid var(--vf-line);border-radius:999px;padding:4px 10px;text-decoration:none!important}
.vo-mini-price:hover{border-color:var(--vf-ink)}

/* Also consider: one slim line, never a card */
.vo-also{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-top:14px;padding:10px 14px;border-top:1px dashed var(--vf-line);border-bottom:1px dashed var(--vf-line)}
.vo-also-label{font:500 11px/1.9 var(--vf-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--vf-muted);white-space:nowrap}
.vo-also-list{list-style:none!important;margin:0!important;padding:0!important;display:grid;gap:6px;flex:1;min-width:0}
.vo-also-item{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;padding:2px 6px;border-radius:8px;font-size:14px}
.vo-also-item.is-open{background:var(--vf-chip)}
.vo-also-tag{font-size:12px;font-weight:700;color:#8A5A0B;white-space:nowrap}
.vo-also-name{color:var(--vf-ink);flex:1 1 200px;min-width:0}
.vo-also-actions{display:inline-flex;gap:10px;align-items:center}
.vo-also .vo-mini-price{padding:2px 9px;font-size:12px}

/* Head-to-head panel */
.vo-vs-slot:empty{display:none}
.vo-vs{margin-top:14px;border:1px solid var(--vf-forest);border-radius:14px;padding:16px 18px;background:var(--vf-surface);outline:none}
.vo-vs-head{display:flex;align-items:flex-start;gap:12px}
.vo-vs-title{margin:0!important;font-size:17px!important;flex:1}
.vo-vs-close{border:0;background:var(--vf-sunk);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700;cursor:pointer;color:var(--vf-ink)}
.vo-vs-verdict{margin:8px 0 12px;font-size:15px;color:var(--vf-text)}
.vo-vs-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:760px){.vo-vs-grid{grid-template-columns:1fr}}
.vo-vs-table{overflow-x:auto}
.vo-vs-table .vo-compare th,.vo-vs-table .vo-compare td{white-space:normal;font-size:14px;min-width:0}
.vo-vs-table .vo-compare tbody th{min-width:0}
.vo-vs-table td.is-better{font-weight:700;color:var(--vf-forest)}
.vo-vs-table td.is-better::after{content:" ✓"}
.vo-vs-chart .vo-chart{margin:0}
.vo-vs-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* Existing cards */
.vo-picks{display:grid;gap:16px;margin:28px 0}
.vo-card{display:grid;grid-template-columns:auto 1fr;gap:0;border:1px solid var(--vf-line);border-radius:14px;background:var(--vf-surface);overflow:hidden}
.vo-card-top-pick{border-color:var(--vf-forest);box-shadow:0 0 0 1px var(--vf-forest) inset}
.vo-card-img{width:180px;height:100%;min-height:160px;object-fit:cover;background:var(--vf-sunk)}
@media (max-width:640px){.vo-card{grid-template-columns:1fr}.vo-card-img{width:100%;height:200px}}
.vo-card-body{padding:16px 18px;display:flex;flex-direction:column;gap:8px;min-width:0}
.vo-card-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vo-rank{font:500 11px/1 var(--vf-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--vf-forest)}
.vo-score{margin-left:auto;font-weight:800;font-size:22px;color:var(--vf-forest);font-variant-numeric:tabular-nums}
.vo-score small{font-size:11px;font-weight:600;color:var(--vf-muted);margin-left:2px}
.vo-card-title{margin:0!important;font-size:20px!important;line-height:1.2}
.vo-verdict{margin:0;color:var(--vf-text);font-style:italic}
.vo-badge{font-size:12px;font-weight:700;border-radius:999px;padding:3px 9px;white-space:nowrap}
.vo-badge-tested{background:var(--vf-chip);color:var(--vf-chip-ink)}
.vo-badge-spec{background:var(--vf-sunk);color:var(--vf-muted)}
.vo-chips{display:flex;flex-wrap:wrap;gap:6px}
.vo-chip{font:500 12px/1.4 var(--vf-mono);background:var(--vf-sunk);border-radius:6px;padding:3px 8px;color:var(--vf-ink)}
.vo-why{list-style:none!important;margin:0!important;padding:0!important;display:grid;gap:4px;font-size:15px}
.vo-why li{margin:0;padding-left:22px;position:relative}
.vo-why li::before{position:absolute;left:0;font-weight:700}
.vo-why .vo-good::before{content:"✓";color:var(--vf-forest)}
.vo-why .vo-warn::before{content:"△";color:#B7791F}
.vo-card-btn{align-self:flex-start;margin-top:4px;background:var(--vf-forest);color:#fff!important;text-decoration:none!important;font-weight:700;font-size:14px;padding:10px 16px;border-radius:999px}
.vo-card-btn:hover{background:#2F4A21}
.vo-disclosure{font-size:12px;color:var(--vf-muted);margin:0}
.vo-compare-wrap{overflow-x:auto;margin:24px 0;border:1px solid var(--vf-line);border-radius:12px}
.vo-compare{width:100%;border-collapse:collapse;font-size:15px;margin:0!important}
.vo-compare th,.vo-compare td{padding:10px 12px;border-bottom:1px solid var(--vf-line);text-align:left;white-space:nowrap}
.vo-compare thead th{background:var(--vf-sunk);font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--vf-muted)}
.vo-compare tbody th{white-space:normal;min-width:180px;color:var(--vf-ink)}
.vo-compare td{font-variant-numeric:tabular-nums}
.vo-compare a{color:var(--vf-forest);font-weight:700}

/* Hub */
.vo-hub{margin:8px 0 40px}
.vo-hub-title{margin:4px 0 18px!important;font-size:clamp(24px,3vw,32px)!important;line-height:1.15}
.vo-hub-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:820px){.vo-hub-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

.vo-hub-tile{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;text-align:left;padding:16px 18px;border-radius:14px;border:1px solid var(--vf-line);background:var(--vf-surface);color:var(--vf-ink);cursor:pointer;font:inherit;transition:transform .15s,box-shadow .15s,border-color .15s}
.vo-hub-tile:hover:not([disabled]){transform:translateY(-2px);box-shadow:0 12px 28px -14px rgba(19,28,35,.3);border-color:transparent}
.vo-hub-tile:focus-visible{outline:2px solid var(--vf-sun);outline-offset:3px}
.vo-hub-tile[aria-pressed="true"]{border-color:var(--vf-forest);box-shadow:0 0 0 1px var(--vf-forest) inset;background:var(--vf-chip)}
.vo-hub-tile.is-soon{opacity:.6;cursor:not-allowed}
.vo-hub-icon{grid-row:span 2;width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--vf-chip);color:var(--vf-chip-ink)}
.vo-hub-tile[aria-pressed="true"] .vo-hub-icon{background:var(--vf-forest);color:#fff}
.vo-hub-icon svg{width:26px;height:26px}
.vo-hub-name{font-weight:700;font-size:17px;line-height:1.2}
.vo-hub-meta{font:500 12px/1.4 var(--vf-mono);color:var(--vf-muted)}
.vo-hub-stage{margin-top:22px;scroll-margin-top:90px}
.vo-hub-stage .vo-finder{margin-top:0}
.vo-hub-hint{color:var(--vf-muted);text-align:center;padding:28px;border:1px dashed var(--vf-line);border-radius:14px;margin:0}
.vo-hub-step[hidden],.vo-hub-stage[hidden]{display:none}
.vo-hub-step{scroll-margin-top:90px}
.vo-hub.is-focused .vo-hub-step{margin-bottom:8px}
.vo-hub-current{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.vo-hub-current .vo-hub-icon{background:var(--vf-forest);color:#fff}
.vo-hub-current-text{display:flex;flex-direction:column;line-height:1.2;flex:1}
.vo-hub-current-label{font-size:13px;color:var(--vf-muted)}
.vo-hub-current strong{font-size:19px;color:var(--vf-ink)}
.vo-hub-change{border:1px solid var(--vf-line);background:var(--vf-surface);color:var(--vf-ink);border-radius:999px;padding:7px 14px;font-weight:700;font-size:14px;cursor:pointer}
.vo-hub-change:hover{border-color:var(--vf-ink)}

/* Charts */
.vo-chart{margin:24px 0;border:1px solid var(--vf-line);border-radius:14px;padding:14px 16px;background:var(--vf-surface)}
.vo-chart-title{margin:0 0 8px;font-weight:700;font-size:16px;color:var(--vf-ink)}
.vo-chart-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:6px}
.vo-chart-legend{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.vo-leg{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--vf-line);background:var(--vf-surface);border-radius:999px;padding:4px 10px;font-size:13px;font-weight:600;color:var(--vf-ink);cursor:pointer}
.vo-leg i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.vo-leg[aria-pressed="true"]{border-color:var(--c);box-shadow:0 0 0 1px var(--c) inset}
.vo-leg:focus-visible,.vo-chart-views button:focus-visible{outline:2px solid var(--vf-sun);outline-offset:2px}
.vo-chart-views{display:inline-flex;border:1px solid var(--vf-line);border-radius:999px;overflow:hidden}
.vo-chart-views button{border:0;background:var(--vf-surface);padding:4px 12px;font-size:13px;font-weight:600;color:var(--vf-muted);cursor:pointer}
.vo-chart-views button[aria-pressed="true"]{background:var(--vf-ink);color:#fff}
.vo-chart[data-mode="radar"] .vo-bars,.vo-chart[data-mode="bars"] .vo-radar{display:none}
.vo-radar{display:block;width:100%;max-width:480px;height:auto;margin:0 auto;overflow:visible}
.vo-ring{fill:none;stroke:var(--vf-line);stroke-width:1}
.vo-spoke{stroke:var(--vf-line);stroke-width:1}
.vo-axis{font-size:13px;font-weight:600;fill:var(--vf-muted)}
.vo-area{fill:var(--c);fill-opacity:.14;stroke:var(--c);stroke-width:2;stroke-linejoin:round;transition:fill-opacity .2s,opacity .2s}
.vo-ser:hover .vo-area{fill-opacity:.3}
.vo-dot{fill:var(--c);stroke:#fff;stroke-width:1.5;cursor:pointer;outline:none}
.vo-dot.is-missing{fill:#fff;stroke:var(--c);stroke-dasharray:2 2}
.vo-dot:hover,.vo-dot:focus{stroke:var(--vf-ink);stroke-width:2.5}
.vo-bars{display:grid;gap:2px}
.vo-bars-row{display:grid;grid-template-columns:minmax(90px,150px) minmax(0,1fr);gap:12px;align-items:center;padding:7px 0;border-bottom:1px solid var(--vf-sunk)}
.vo-bars-row:last-child{border-bottom:0}
.vo-bars-label{font-size:14px;font-weight:600;color:var(--vf-ink)}
.vo-bars-set{display:grid;gap:4px}
.vo-bar{display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:8px;align-items:center;outline:none;cursor:default;transition:opacity .2s}
.vo-bar-track{height:12px;background:var(--vf-sunk);border-radius:6px;overflow:hidden}
.vo-bar-fill{display:block;height:100%;background:var(--c);border-radius:6px}
.vo-bar b{font:600 12px/1 var(--vf-mono);color:var(--vf-ink);text-align:right}
.vo-bar:hover .vo-bar-track,.vo-bar:focus .vo-bar-track{box-shadow:0 0 0 2px var(--vf-ink)}
@media (max-width:520px){.vo-bars-row{grid-template-columns:1fr;gap:4px}}
.vo-chart[data-focus="0"] .vo-ser:not([data-s="0"]),.vo-chart[data-focus="1"] .vo-ser:not([data-s="1"]),.vo-chart[data-focus="2"] .vo-ser:not([data-s="2"]),.vo-chart[data-focus="3"] .vo-ser:not([data-s="3"]){opacity:.15}
.vo-chart-note{margin:8px 0 0;font-size:12px;color:var(--vf-muted)}
.vo-tip{position:fixed;z-index:99999;transform:translate(-50%,calc(-100% - 10px));background:var(--vf-ink);color:#fff;font-size:13px;line-height:1.35;padding:6px 10px;border-radius:8px;max-width:260px;pointer-events:none;opacity:0;transition:opacity .12s}
.vo-tip.is-on{opacity:1}
.vo-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media (prefers-reduced-motion:reduce){.vo-area,.vo-bar,.vo-tip,.vo-hub-tile{transition:none}}

/* Brand comparison */
.vo-brands{margin:32px 0}
.vo-brands-title{margin:0 0 4px!important}
.vo-brands .vo-chart{margin:12px 0 16px}
.vo-brands-table th,.vo-brands-table td{white-space:normal!important;min-width:110px;vertical-align:top;font-size:14px}
.vo-brand-notes p{margin:0 0 10px;color:var(--vf-text)}

/* Phones: categories two per row, icon above name (kept last so it overrides the base tile rules) */
@media (max-width:460px){.vo-hub-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.vo-hub-tile{grid-template-columns:1fr;grid-template-rows:auto;row-gap:6px;padding:12px;align-items:start}.vo-hub-tile .vo-hub-icon{grid-row:auto;width:36px;height:36px;border-radius:10px}.vo-hub-tile .vo-hub-icon svg{width:20px;height:20px}.vo-hub-name{font-size:15px}.vo-hub-meta{font-size:11px}}