:root{
  --blue:#2F54FF; --blue-wash:#EEF1FF; --green:#0E9E76; --green-wash:#E7F6F1; --amber:#E0A33C; --amber-wash:#FBF3E4;
  --ink:#16172E; --ink-soft:#43466A; --muted:#7A7E9C; --line:#E7E9F4; --wash:#F5F6FB; --card:#FFFFFF; --bg:#FFFFFF;
  --r:14px; --shadow:0 1px 2px rgba(22,23,46,.05),0 8px 24px rgba(22,23,46,.06);
  --display:'Bricolage Grotesque',system-ui,sans-serif; --sans:'IBM Plex Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){:root{
  --blue:#6F8BFF; --blue-wash:#1C2350; --green:#36C79B; --green-wash:#12342B; --amber:#F0B85A; --amber-wash:#3A2E17;
  --ink:#EEF0FA; --ink-soft:#BFC3DE; --muted:#8C91B1; --line:#2A2D4A; --wash:#181A30; --card:#1D1F38; --bg:#121327;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--sans)}
a{color:inherit}
h1,h2,h3{font-family:var(--display);letter-spacing:-.01em;line-height:1.15;margin:0}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* header */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:20px;height:60px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand .seal{width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font:700 15px var(--display)}
.brand b{font:700 20px var(--display)}
.brand small{font:500 11px var(--mono);color:var(--muted)}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav a{text-decoration:none;color:var(--ink-soft);padding:8px 12px;border-radius:10px;font-weight:500}
.nav a:hover{background:var(--wash);color:var(--ink)}
.nav a.cta{background:var(--ink);color:var(--bg)}
.nav .count{font:600 11px var(--mono);background:var(--blue);color:#fff;border-radius:99px;padding:1px 7px;margin-left:4px}
@media (max-width:760px){.nav a.hide-sm{display:none}.brand small{display:none}}

/* buttons, chips */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:11px;padding:10px 16px;font:600 14px var(--sans);cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--ink-soft)}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.dark{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:99px;padding:5px 12px;font-size:13px;background:var(--card);color:var(--ink-soft);cursor:pointer;white-space:nowrap}
.chip[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tag{display:inline-block;font:500 11.5px var(--mono);padding:2px 8px;border-radius:6px;background:var(--wash);color:var(--ink-soft)}
.tag.mx{background:var(--green-wash);color:var(--green)}
.tag.latam{background:var(--amber-wash);color:var(--amber)}

/* letter mark (monochrome by design) */
.mark{flex:none;width:44px;height:44px;border-radius:12px;background:var(--wash);border:1px solid var(--line);display:grid;place-items:center;font:700 18px var(--display);color:var(--ink-soft)}
.mark.lg{width:72px;height:72px;border-radius:18px;font-size:30px}

/* hero */
.hero{padding:56px 0 28px;background:radial-gradient(1200px 400px at 50% -120px,var(--blue-wash),transparent)}
.hero h1{font-size:clamp(32px,5vw,54px);max-width:820px}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero p.lead{font-size:18px;color:var(--ink-soft);max-width:640px;margin:14px 0 0}
.stats{display:flex;gap:28px;flex-wrap:wrap;margin-top:24px}
.stats div b{display:block;font:700 26px var(--display)}
.stats div span{font-size:13px;color:var(--muted)}

/* advisor */
.advisor{margin-top:28px;background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden;max-width:860px}
.advisor .log{max-height:440px;overflow:auto;padding:18px 18px 4px;display:flex;flex-direction:column;gap:12px}
.advisor.full .log{max-height:none;min-height:46vh}
.msg{max-width:88%;padding:11px 14px;border-radius:14px;white-space:pre-wrap}
.msg.ai{background:var(--wash);border-top-left-radius:4px}
.msg.me{align-self:flex-end;background:var(--blue);color:#fff;border-top-right-radius:4px}
.msg.think{color:var(--muted);font-style:italic;background:none;padding-left:4px}
.quick{display:flex;gap:8px;flex-wrap:wrap;padding:4px 18px 10px}
.shortlist{display:grid;gap:8px;margin-top:4px}
.shortlist a.pick{display:flex;gap:12px;align-items:flex-start;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.shortlist a.pick:hover{border-color:var(--blue)}
.shortlist .pick .mark{width:36px;height:36px;font-size:15px;border-radius:10px}
.shortlist .pick small{display:block;color:var(--ink-soft);font-size:13px}
.advisor form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--card)}
.advisor input{flex:1;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:11px;padding:12px 14px;font:15px var(--sans);min-width:0}
.advisor input:focus,.field:focus{outline:2px solid var(--blue);outline-offset:-1px}

/* sections */
section.block{padding:40px 0}
.sec-h{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}
.sec-h h2{font-size:26px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.cat{display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;transition:border-color .15s,transform .15s}
.cat:hover{border-color:var(--blue);transform:translateY(-1px)}
.cat b{display:block;font:600 16px var(--display)}
.cat span{font:500 12px var(--mono);color:var(--muted)}
.steps{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.step{border:1px solid var(--line);border-radius:var(--r);padding:18px;background:var(--wash)}
.step .n{font:600 12px var(--mono);color:var(--blue)}
.step h3{font-size:18px;margin:6px 0}
.step p{margin:0;color:var(--ink-soft)}

/* listing */
.page-h{padding:34px 0 10px}
.page-h h1{font-size:clamp(28px,4vw,40px)}
.crumbs{font:500 12.5px var(--mono);color:var(--muted);margin-bottom:10px}
.crumbs a{color:var(--muted)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:18px 0}
.field{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:11px;padding:10px 13px;font:14px var(--sans)}
.toolbar .field{min-width:220px;flex:1}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.list{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));padding-bottom:110px}
@media (max-width:520px){.list{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:10px}
.card .head{display:flex;gap:12px;align-items:flex-start}
.card h3{font-size:17px}
.card h3 a{text-decoration:none}
.card h3 a:hover{color:var(--blue)}
.card p{margin:0;color:var(--ink-soft);font-size:14px}
.card .meta{display:flex;gap:6px;flex-wrap:wrap}
.card .foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:6px;border-top:1px dashed var(--line)}
.cmp-toggle{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-soft);cursor:pointer;user-select:none}
.cmp-toggle input{accent-color:var(--blue);width:16px;height:16px}

/* compare tray */
.tray{position:fixed;left:50%;bottom:16px;transform:translateX(-50%) translateY(140%);transition:transform .25s;z-index:30;background:var(--ink);color:var(--bg);border-radius:16px;padding:10px 10px 10px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 12px 40px rgba(0,0,0,.25);max-width:calc(100vw - 24px)}
.tray:not(.on){visibility:hidden}
.tray.on{transform:translateX(-50%)}
.tray .names{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.tray .btn{padding:8px 14px}
.tray button.x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:13px}

/* product */
.prod-h{display:flex;gap:18px;align-items:flex-start;padding:32px 0 18px;flex-wrap:wrap}
.prod-h h1{font-size:clamp(28px,4vw,42px)}
.prod-h .tagline{font-size:17px;color:var(--ink-soft);margin:6px 0 10px}
.prod-h .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;padding-bottom:60px}
@media (max-width:900px){.cols{grid-template-columns:1fr}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:16px}
.panel h2{font-size:19px;margin-bottom:12px}
dl.facts{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;margin:0;font-size:14px}
dl.facts dt{color:var(--muted)}
dl.facts dd{margin:0}
.unknown{color:var(--muted);font-style:italic}
.sources a{font:12.5px var(--mono);color:var(--blue);word-break:break-all}
.alts a{display:flex;gap:10px;align-items:center;text-decoration:none;padding:8px 0;border-bottom:1px solid var(--line)}
.alts a:last-child{border:0}
.alts .mark{width:32px;height:32px;font-size:14px;border-radius:9px}
.empty{border:1px dashed var(--line);border-radius:12px;padding:18px;text-align:center;color:var(--ink-soft)}
.review{border-top:1px solid var(--line);padding:14px 0}
.stars{color:var(--amber);letter-spacing:2px}
.rform{display:grid;gap:10px;margin-top:12px}
.rform textarea{min-height:110px;resize:vertical}
.rate{display:flex;gap:4px}
.rate button{background:none;border:0;font-size:26px;color:var(--line);cursor:pointer;padding:0 2px}
.rate button.on{color:var(--amber)}
.note{font-size:13px;color:var(--muted)}
.ok{background:var(--green-wash);color:var(--green);border-radius:10px;padding:10px 12px}

/* compare page */
.cmp-pick{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card);margin:18px 0}
table.cmp{border-collapse:collapse;width:100%;min-width:640px;font-size:14px}
table.cmp th,table.cmp td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
table.cmp thead th{position:sticky;top:0;background:var(--card)}
table.cmp tbody th{color:var(--muted);font-weight:500;width:170px;white-space:nowrap}
table.cmp tr.same td{color:var(--muted)}
table.cmp tr.diff th{color:var(--ink)}
table.cmp .colh{display:flex;gap:10px;align-items:center}
table.cmp .colh .mark{width:36px;height:36px;font-size:15px}
table.cmp .rm{border:0;background:none;color:var(--muted);cursor:pointer;font-size:12px;padding:0}
td.fit{font-size:13.5px}
.fitbar{height:6px;border-radius:9px;background:var(--wash);overflow:hidden;margin:6px 0}
.fitbar i{display:block;height:100%;background:var(--green)}
.fitbar.mid i{background:var(--amber)}
.fitbar.low i{background:#D6467B}
.verdict{background:var(--blue-wash);border-radius:var(--r);padding:16px 18px;margin:12px 0;white-space:pre-wrap}
.picker{position:relative}
.picker .drop{position:absolute;top:100%;left:0;right:0;z-index:10;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);max-height:320px;overflow:auto;margin-top:4px}
.picker .drop button{display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:none;border:0;padding:9px 12px;color:var(--ink);cursor:pointer;font:14px var(--sans)}
.picker .drop button:hover{background:var(--wash)}
.picker .drop .mark{width:28px;height:28px;font-size:12px;border-radius:8px}

footer{border-top:1px solid var(--line);padding:28px 0 40px;color:var(--muted);font-size:13.5px}
footer .wrap{display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between}