:root{--ink:#172033;--muted:#667085;--line:#e5e7eb;--panel:#fff;--bg:#f6f8fb;--accent:#2563eb;--accent-dark:#1d4ed8;--accent2:#dbeafe;--good:#15803d;--warn:#b45309;--low:#b42318}
*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}
.wrap{max-width:1280px;margin:auto;padding-left:24px;padding-right:24px}
header{background:linear-gradient(135deg,#0f172a,#1e3a8a);color:white;padding:42px 0 38px}.hero{display:flex;align-items:center;justify-content:space-between;gap:24px}.eyebrow{font-size:12px;font-weight:800;letter-spacing:.18em;opacity:.75}h1{font-size:38px;margin:6px 0 8px}header p{margin:0;color:#dbeafe;font-size:17px}.hero-badge{border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.09);padding:12px 16px;border-radius:999px;font-size:13px;font-weight:800;white-space:nowrap}
.layout{display:grid;grid-template-columns:350px 1fr;gap:28px;padding-top:28px;padding-bottom:60px}.filters{background:var(--panel);border:1px solid var(--line);border-radius:16px;height:max-content;position:sticky;top:18px;overflow:hidden;box-shadow:0 4px 18px rgba(16,24,40,.04)}.filter-head{padding:18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.filter-head strong{display:block}.filter-head span{font-size:12px;color:var(--muted)}button{border:0;background:none;color:var(--accent);font-weight:700;cursor:pointer}.group{border-bottom:1px solid var(--line)}.group:last-child{border-bottom:0}.group summary{list-style:none;cursor:pointer;padding:15px 18px;font-weight:800;display:flex;justify-content:space-between}.group summary::-webkit-details-marker{display:none}.group summary:after{content:'+';color:var(--muted)}.group[open] summary:after{content:'−'}.options{padding:0 12px 12px}.group-help{font-size:12px;color:var(--muted);margin:0 7px 8px;line-height:1.4}.option{display:flex;gap:10px;padding:9px 7px;border-radius:8px;cursor:pointer;font-size:14px;line-height:1.25;align-items:flex-start}.option:hover{background:#f8fafc}.option input{margin-top:2px;accent-color:var(--accent);flex:0 0 auto}.option small{display:block;color:var(--muted);font-size:10px;margin-top:3px;font-weight:600}.radio-option{padding:8px 7px}.question-options{padding-bottom:14px}
.results-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:12px}.results h2{font-size:26px;margin:0}.results-head p{margin:4px 0 0;color:var(--muted)}.legend{font-size:12px;color:var(--muted)}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--accent);margin-right:5px}.chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 16px}.chip{background:var(--accent2);color:var(--accent-dark);border-radius:999px;padding:7px 10px;font-size:12px;font-weight:700}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.card{position:relative;background:white;border:1px solid var(--line);border-radius:15px;padding:18px;box-shadow:0 1px 2px rgba(16,24,40,.03)}.rank-badge{position:absolute;top:12px;right:12px;font-size:10px;font-weight:900;color:#98a2b3;background:#f2f4f7;border-radius:999px;padding:4px 7px}.card-top{display:flex;justify-content:space-between;gap:16px;padding-right:38px}.name{font-weight:800;font-size:17px;line-height:1.25}.price{font-size:17px;font-weight:900;white-space:nowrap}.match{margin-top:16px}.match-row{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}.match-row strong{font-size:16px}.score-excellent,.criterion-excellent{color:var(--good)}.score-good,.criterion-good{color:#39731f}.score-fair,.criterion-fair{color:var(--warn)}.score-low,.criterion-low{color:var(--low)}.bar{height:8px;background:#eef2f7;border-radius:99px;overflow:hidden}.bar>span{display:block;height:100%;background:var(--accent);border-radius:99px}.details{margin-top:12px;color:var(--muted);font-size:12px}.intro-details{margin-top:18px}.perfect{border-color:#93c5fd;box-shadow:0 0 0 2px #eff6ff inset}.why{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}.why summary{cursor:pointer;color:var(--accent-dark);font-size:12px;font-weight:800;list-style:none}.why summary::-webkit-details-marker{display:none}.why summary:after{content:' +';}.why[open] summary:after{content:' −'}.why ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:7px}.why li{display:flex;justify-content:space-between;gap:14px;font-size:11px;color:var(--muted);line-height:1.3}.why li strong{white-space:nowrap;font-size:11px}
@media(max-width:900px){.layout{grid-template-columns:1fr}.filters{position:static}.grid{grid-template-columns:1fr}.hero-badge{display:none}}@media(max-width:560px){h1{font-size:30px}.wrap{padding-left:16px;padding-right:16px}.results-head{align-items:start;gap:12px;flex-direction:column}.card-top{flex-direction:column;gap:6px}.price{font-size:15px}}

/* Match-score color coding: applied only after at least one preference is selected. */
.card.match-90{background:#d9f3df;border-color:#237a3b;box-shadow:0 2px 10px rgba(35,122,59,.13)}
.card.match-75{background:#e9f6df;border-color:#68a943}
.card.match-60{background:#f4f4d7;border-color:#a7a23a}
.card.match-40{background:#fff0cf;border-color:#d59a2e}
.card.match-20{background:#f9dfd5;border-color:#cf704e}
.card.match-0{background:#f4cccc;border-color:#b84b45}
.card.match-90 .bar>span{background:#237a3b}.card.match-75 .bar>span{background:#68a943}.card.match-60 .bar>span{background:#a7a23a}.card.match-40 .bar>span{background:#d59a2e}.card.match-20 .bar>span{background:#cf704e}.card.match-0 .bar>span{background:#b84b45}
.card.match-90 .rank-badge,.card.match-75 .rank-badge,.card.match-60 .rank-badge,.card.match-40 .rank-badge,.card.match-20 .rank-badge,.card.match-0 .rank-badge{background:rgba(255,255,255,.72);color:#475467}

/* Tablet Tech channel branding */
:root{--tt-navy:#071d49;--tt-blue:#176fc4;--tt-sky:#55bdf3;--tt-cyan:#53e6f4;--tt-yellow:#fff100}
.brand-header{padding:0;background:var(--tt-navy);color:white}.banner-wrap{background:#1b73c7;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.16)}.channel-banner{display:block;width:100%;height:auto;max-height:220px;object-fit:cover;object-position:center}.selector-hero{background:radial-gradient(circle at 78% 0%,rgba(83,230,244,.18),transparent 34%),linear-gradient(120deg,#06183d 0%,#0b3d82 54%,#1478c8 100%);border-bottom:4px solid var(--tt-cyan)}.selector-hero-inner{min-height:170px;display:flex;align-items:center;justify-content:space-between;gap:36px;padding-top:25px;padding-bottom:25px}.hero-copy{max-width:760px}.eyebrow{color:var(--tt-cyan);opacity:1}.selector-hero h1{margin:5px 0 8px;font-size:36px}.selector-hero p{color:#d8efff;max-width:700px;line-height:1.5}.host-card{display:flex;align-items:center;gap:12px;background:rgba(4,22,58,.5);border:1px solid rgba(83,230,244,.42);border-radius:16px;padding:10px 14px 10px 10px;min-width:255px;box-shadow:0 10px 30px rgba(0,0,0,.12)}.host-card img{width:68px;height:68px;border-radius:50%;object-fit:cover;border:2px solid var(--tt-cyan);background:white}.host-card strong,.host-card span{display:block}.host-card strong{font-size:14px}.host-card span{font-size:11px;color:#ccecff;margin-top:3px;line-height:1.3}
button,.why summary{color:var(--tt-blue)}.option input{accent-color:var(--tt-blue)}.filters{border-top:4px solid var(--tt-blue)}.filter-head{background:linear-gradient(180deg,#fff,#f4faff)}.results h2{color:var(--tt-navy)}.chip{background:#dff4ff;color:#075ca5;border:1px solid #bce7fb}.dot{background:var(--tt-cyan);box-shadow:0 0 0 2px #d8faff}.perfect{border-color:var(--tt-sky);box-shadow:0 0 0 2px #e9f8ff inset}
footer{background:var(--tt-navy);color:white;padding:24px 0;margin-top:10px}.footer-inner{display:flex;align-items:center;justify-content:center;gap:12px}.footer-inner img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:1px solid var(--tt-cyan)}.footer-inner strong,.footer-inner span{display:block}.footer-inner span{color:#b9d9f3;font-size:12px;margin-top:2px}
@media(max-width:900px){.selector-hero-inner{align-items:flex-start;flex-direction:column;gap:18px}.host-card{min-width:0}.channel-banner{min-height:115px;object-fit:cover}.selector-hero h1{font-size:31px}}
@media(max-width:560px){.channel-banner{height:105px;width:100%;object-fit:cover;object-position:center}.selector-hero-inner{padding-top:20px;padding-bottom:22px}.selector-hero h1{font-size:28px}.host-card img{width:56px;height:56px}}

/* Compact channel banner */
.channel-banner{height:118px;max-height:118px;object-fit:cover;object-position:center}
@media(max-width:900px){.channel-banner{height:92px;min-height:0;max-height:92px;object-fit:cover}}
@media(max-width:560px){.channel-banner{height:72px;min-height:0;max-height:72px;object-fit:cover}}

/* V5: banner removed; compact round Tablet Tech identity at upper right */
.banner-wrap,.channel-banner{display:none!important}
.selector-hero-inner{min-height:150px;padding-top:22px;padding-bottom:22px}
.host-card{margin-left:auto;flex:0 0 auto}
.host-card img{width:82px;height:82px}
@media(max-width:900px){.selector-hero-inner{flex-direction:row;align-items:center;gap:22px}.hero-copy{min-width:0}.host-card{min-width:220px}}
@media(max-width:700px){.selector-hero-inner{flex-direction:column;align-items:flex-start}.host-card{margin-left:0;min-width:0}.host-card img{width:64px;height:64px}}

/* V6: make Tablet Tech branding a prominent part of the hero */
.selector-hero{background:radial-gradient(circle at 80% 12%,rgba(83,230,244,.22),transparent 31%),linear-gradient(120deg,#ffffff 0%,#eef8ff 56%,#d9efff 100%);color:var(--tt-navy);border-bottom:4px solid var(--tt-blue)}
.selector-hero-inner{min-height:220px;padding-top:26px;padding-bottom:26px;align-items:center}
.hero-copy{max-width:780px}
.hero-copy:before{content:'David @';display:block;font-weight:900;font-size:26px;line-height:1;color:var(--tt-navy);margin-bottom:0}
.eyebrow{display:none}
.selector-hero h1{font-size:48px;line-height:1.02;margin:0 0 12px;color:var(--tt-blue);font-weight:900;letter-spacing:-.035em}
.selector-hero h1:before{content:'TABLET TECH';display:block;font-size:1.18em;line-height:.96;margin-bottom:12px;color:var(--tt-blue)}
.selector-hero p{color:#314866;font-size:16px;max-width:700px}
.host-card{background:transparent;border:0;box-shadow:none;padding:0;min-width:0;display:block}
.host-card img{width:190px;height:190px;border:5px solid white;box-shadow:0 8px 28px rgba(7,29,73,.20),0 0 0 2px var(--tt-sky)}
.host-card div{display:none}
@media(max-width:900px){.selector-hero-inner{min-height:190px;flex-direction:row;align-items:center}.selector-hero h1{font-size:38px}.hero-copy:before{font-size:22px}.host-card img{width:150px;height:150px}}
@media(max-width:700px){.selector-hero-inner{flex-direction:column;align-items:center;text-align:center}.selector-hero p{margin-left:auto;margin-right:auto}.host-card{margin:4px auto 0}.host-card img{width:135px;height:135px}.selector-hero h1{font-size:34px}}

/* Tablet Tech video library */
.videos-panel{margin-top:12px;border-top:1px solid rgba(15,44,72,.12);padding-top:10px}
.videos-panel summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:800;color:#0d4d82;padding:7px 0;user-select:none}
.videos-panel summary::-webkit-details-marker{display:none}
.play-icon{display:inline-grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#e11d2e;color:white;font-size:11px;padding-left:2px}
.video-count{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:#eaf5ff;color:#075b9b;font-size:12px}
.video-list{display:grid;gap:7px;padding:4px 0 3px}
.video-link{display:flex;align-items:center;justify-content:space-between;gap:10px;text-decoration:none;color:#16344f;background:rgba(255,255,255,.72);border:1px solid rgba(15,77,130,.13);border-radius:10px;padding:10px 11px;transition:.15s ease}
.video-link:hover{transform:translateY(-1px);border-color:rgba(0,133,214,.35);box-shadow:0 4px 12px rgba(9,52,86,.08)}
.video-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.video-copy strong{font-size:13px;line-height:1.25}
.video-copy small{font-size:11px;color:#64778a;font-weight:700;text-transform:uppercase;letter-spacing:.035em}
.video-arrow{color:#087bc1;font-weight:900}

/* Priority matching controls */
.option-row{display:grid;grid-template-columns:minmax(0,1fr) 122px;gap:6px;align-items:center;padding:2px 0}.option-row .option{min-width:0}.importance{width:122px;border:1px solid #cfd8e6;background:white;border-radius:8px;padding:6px 7px;font-size:10px;font-weight:800;color:#174f8b}.importance:disabled{opacity:.38;background:#f3f5f8}.special-row{grid-template-columns:minmax(0,1fr) 122px}.chip.must{background:#e7f8ec;border-color:#9bd2a8;color:#176b2d}.chip.important{background:#e8edff;border-color:#aab9f2;color:#334aa0}.chip b{font-size:10px}.tier-heading{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;margin:12px 0 -2px;padding:9px 12px;border-radius:10px;font-size:12px}.tier-heading strong{font-size:15px}.tier-heading span{color:#667085}.tier-best{background:#e9f7ed;color:#1f6f35;border-left:5px solid #2c8745}.tier-close{background:#fff4d8;color:#8a5a00;border-left:5px solid #d59a2e}.tier-other{background:#fbe8e4;color:#98483d;border-left:5px solid #c75b4f}.must-status{margin-top:10px;padding:7px 9px;border-radius:8px;font-size:11px;font-weight:900}.must-status.best{background:rgba(255,255,255,.6);color:#1d6f35}.must-status.close{background:rgba(255,255,255,.65);color:#8a5a00}.must-status.other{background:rgba(255,255,255,.65);color:#98483d}.why li em{font-style:normal;font-size:9px;font-weight:800;padding:2px 5px;border-radius:999px;background:rgba(255,255,255,.7);white-space:nowrap}.tier-card-close{outline:1px dashed rgba(213,154,46,.35)}.tier-card-other{opacity:.93}
@media(max-width:430px){.option-row,.special-row{grid-template-columns:1fr}.importance{width:100%;margin:0 7px 7px}.tier-heading{align-items:flex-start;flex-direction:column;gap:2px}}

/* V9 methodology + feedback */
.results-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}.method-btn{border:1px solid #b8d8f1;background:#f2f9ff;color:#0b5f9f;border-radius:999px;padding:8px 12px;font-size:11px;font-weight:900;cursor:pointer}.method-btn:hover{background:#e5f4ff}.methodology{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;background:#eef8ff;border:1px solid #b9ddf7;border-left:5px solid var(--tt-blue);border-radius:12px;padding:14px 16px;margin:0 0 16px;color:#23405c}.methodology[hidden]{display:none}.methodology strong{color:var(--tt-navy);font-size:14px}.methodology p{margin:5px 0 0;font-size:12px;line-height:1.55}.methodology button{border:0;background:transparent;font-size:22px;line-height:1;cursor:pointer;color:#5f7185}
.feedback-section{padding:30px 0 42px;background:#eef5fb;border-top:1px solid #d9e6f1}.feedback-card{display:grid;grid-template-columns:minmax(0,.85fr) minmax(340px,1.15fr);gap:34px;align-items:start}.feedback-copy{padding-top:8px}.feedback-kicker{font-size:11px;font-weight:900;letter-spacing:.09em;color:var(--tt-blue)}.feedback-copy h2{font-size:25px;color:var(--tt-navy);margin:7px 0}.feedback-copy p{font-size:13px;line-height:1.55;color:#5d7085;margin:0}.feedback-form{background:white;border:1px solid #dbe4ee;border-radius:16px;padding:18px;box-shadow:0 5px 18px rgba(7,29,73,.06);display:grid;gap:12px}.feedback-rating{display:flex;gap:8px;flex-wrap:wrap}.feedback-rating button{border:1px solid #cbd8e5;background:#fff;border-radius:999px;padding:8px 11px;font-size:11px;font-weight:800;cursor:pointer;color:#37506b}.feedback-rating button.selected{background:#e7f5ff;border-color:#4ba7df;color:#075c96;box-shadow:0 0 0 2px #e1f4ff}.feedback-form label{display:grid;gap:5px;font-size:11px;font-weight:800;color:#344b63}.feedback-form input,.feedback-form textarea{width:100%;border:1px solid #cfd9e4;border-radius:9px;padding:9px 10px;font:inherit;font-size:12px;color:#24384c;background:#fff}.feedback-form textarea{resize:vertical}.feedback-submit{justify-self:start;border:0;background:var(--tt-blue);color:white;border-radius:9px;padding:9px 14px;font-size:11px;font-weight:900;cursor:pointer}.feedback-note{font-size:10px;color:#748497;margin:0}.feedback-ready{display:grid;gap:8px;border-top:1px solid #e6ebf0;padding-top:10px}.feedback-ready[hidden]{display:none}.feedback-ready textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#f8fafc}.feedback-actions{display:flex;gap:8px}.feedback-actions button,.feedback-actions a{border:1px solid #b9c9d8;background:#fff;color:#0b5f9f;border-radius:8px;padding:7px 10px;font-size:11px;font-weight:900;text-decoration:none;cursor:pointer}
@media(max-width:800px){.feedback-card{grid-template-columns:1fr}.results-tools{justify-content:flex-start}}@media(max-width:560px){.feedback-section{padding:24px 0 30px}.feedback-card{gap:18px}.feedback-copy h2{font-size:21px}}