:root{--navy:#13294b;--red:#b3262e;--ink:#1c2230;--mut:#5b6475;--line:#e3e6ec;--gray:#f4f5f7;--warm:#f3efe8;--r:10px;--serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;--sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:16px/1.6 var(--sans);color:var(--ink);background:#fff}
img{max-width:100%;display:block}a{color:var(--navy)}
h1,h2,h3{font-family:var(--serif);line-height:1.15;color:var(--navy);margin:0 0 .5em}
h1{font-size:clamp(2.2rem,7vw,3.9rem);letter-spacing:-.01em}h2{font-size:clamp(1.6rem,4vw,2.25rem)}h3{font-size:1.15rem}
.wrap{width:min(1180px,100% - 2rem);margin-inline:auto}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
section{padding:3.5rem 0}.alt{background:var(--gray)}.warm{background:var(--warm)}
.lead{font-size:1.15rem;color:var(--mut);max-width:60ch}
/* header */
.hd{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.hd::after{content:"";display:block;height:5px;background:repeating-linear-gradient(90deg,var(--navy) 0 28px,#fff 28px 56px)}
.hd .wrap{display:grid;grid-template-areas:"brand tog" "search search" "nav nav";grid-template-columns:1fr auto;gap:.5rem 1rem;align-items:center;padding:.6rem 0}
.brand{grid-area:brand;text-decoration:none;color:var(--navy);line-height:1.1}
.brand b{display:block;font:700 1.15rem var(--serif);letter-spacing:.14em}.brand small{font-size:.75rem;color:var(--mut)}
.tog{grid-area:tog;min-height:44px;min-width:44px;border:1px solid var(--line);background:#fff;border-radius:var(--r);font-size:1.3rem;color:var(--navy)}
.sf{grid-area:search;display:flex}.sf input{flex:1;min-height:44px;border:1px solid var(--line);border-radius:var(--r) 0 0 var(--r);padding:0 .9rem;font:inherit}
.sf button{min-height:44px;padding:0 1rem;border:0;background:var(--navy);color:#fff;border-radius:0 var(--r) var(--r) 0;font:inherit;cursor:pointer}
.nav{grid-area:nav;display:none}.hd.open .nav{display:block}
.nav a{display:block;padding:.7rem 0;text-decoration:none;color:var(--ink);font-weight:600;border-top:1px solid var(--line)}
.nav a[aria-current]{color:var(--red)}
@media(min-width:960px){.hd .wrap{grid-template-areas:"brand nav search";grid-template-columns:auto 1fr minmax(200px,280px)}.tog{display:none}
.nav{display:flex;gap:1.4rem;justify-content:center}.nav a{border:0;padding:.4rem 0;font-size:.95rem}.nav a:hover{color:var(--red)}}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 1.5rem;border-radius:var(--r);font:700 .85rem var(--sans);letter-spacing:.07em;text-decoration:none;border:2px solid var(--navy);color:var(--navy);background:#fff;cursor:pointer;transition:background .15s,color .15s}
.btn:hover{background:var(--navy);color:#fff}.btn-red{background:var(--red);border-color:var(--red);color:#fff}.btn-red:hover{background:#8f1d24;border-color:#8f1d24}
.btn-navy{background:var(--navy);color:#fff}.btn-navy:hover{background:#0c1c36}.btn-off{background:var(--gray);border-color:var(--line);color:var(--mut);cursor:default}.btn-off:hover{background:var(--gray);color:var(--mut)}
.row{display:flex;flex-wrap:wrap;gap:.8rem}
/* hero */
.hero{padding:3rem 0 3.5rem;background:linear-gradient(180deg,var(--warm),#fff)}
.hero .wrap{display:grid;gap:2.5rem;align-items:center}
.win{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;padding:.7rem;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -24px rgba(19,41,75,.35)}
.win a{display:flex;flex-direction:column;justify-content:flex-end;min-height:118px;padding:.9rem;border-radius:8px;text-decoration:none;background:var(--gray);color:var(--navy);font:700 1rem var(--serif)}
.win a:nth-child(3n+1){background:var(--navy);color:#fff}.win a:nth-child(3n+2){background:var(--warm)}
.win small{font:400 .75rem var(--sans);opacity:.8;margin-top:.2rem}
@media(min-width:900px){.hero .wrap{grid-template-columns:1.1fr .9fr}.win a{min-height:150px}}
/* grids */
.cols{display:grid;gap:1.2rem;grid-template-columns:1fr}
@media(min-width:620px){.cols.c2,.cols.c3,.cols.c4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.cols.c3{grid-template-columns:repeat(3,1fr)}.cols.c4{grid-template-columns:repeat(4,1fr)}}
.trust{display:grid;gap:.4rem}.trust svg{width:30px;height:30px;stroke:var(--red);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tile{display:block;padding:1.3rem;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink);background:#fff;transition:border-color .15s,transform .15s}
.tile:hover{border-color:var(--navy);transform:translateY(-2px)}.tile h3{margin-bottom:.3rem}.tile p{margin:0;color:var(--mut);font-size:.95rem}
.tile.col{border-left:4px solid var(--red)}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.grid{grid-template-columns:repeat(3,1fr)}}@media(min-width:1040px){.grid{grid-template-columns:repeat(4,1fr)}}
.card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:box-shadow .15s}
.card:hover{box-shadow:0 10px 26px -14px rgba(19,41,75,.4)}
.im{aspect-ratio:1;background:var(--gray)}.im img{width:100%;height:100%;object-fit:contain}
.ph{height:100%;display:grid;place-items:center;color:var(--mut);font-size:.85rem;background:repeating-linear-gradient(45deg,var(--gray) 0 12px,#eceef2 12px 24px)}
.cb{display:flex;flex-direction:column;gap:.35rem;padding:.8rem;flex:1}.cb .btn{margin-top:auto;min-height:44px;font-size:.78rem;padding:0 .8rem}
.cb h3{font:600 1rem/1.3 var(--sans);color:var(--ink);margin:0}.brandn{font-weight:700;font-size:.85rem;margin:0}.catn{font-size:.8rem;color:var(--mut);margin:0}
.desc{font-size:.88rem;color:var(--mut);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.badge{align-self:flex-start;font-size:.72rem;font-weight:700;padding:.2rem .55rem;border-radius:99px}
.badge.ok{background:var(--navy);color:#fff}.badge.warn{background:#fdf0d5;color:#6b4a00}.badge.mute{background:var(--gray);color:var(--mut)}
.src{font-size:.75rem;color:var(--mut);margin:0}.pr{display:flex;flex-wrap:wrap;gap:.2rem .6rem;align-items:baseline;font-size:.9rem}.price{font-weight:700}.stars{color:#9a6b00}.pr small{color:var(--mut);font-size:.72rem}
.demo{position:absolute;top:8px;right:8px;z-index:1;background:var(--red);color:#fff;font:700 .7rem var(--sans);padding:.2rem .5rem;border-radius:99px}
.empty{grid-column:1/-1;padding:2rem;text-align:center;color:var(--mut);background:var(--gray);border-radius:var(--r)}
.disc{font-size:.85rem;color:var(--mut);margin:0 0 1rem}
/* filters */
.filters{display:grid;gap:.7rem;grid-template-columns:1fr 1fr;margin:1rem 0}.filters label{display:grid;gap:.2rem;font-size:.8rem;font-weight:600;color:var(--mut)}
.filters input,.filters select{min-height:44px;border:1px solid var(--line);border-radius:var(--r);padding:0 .7rem;font:inherit;color:var(--ink);background:#fff;width:100%}
.filters label:first-child{grid-column:1/-1}@media(min-width:960px){.filters{grid-template-columns:2fr 1fr 1fr 1fr 1fr}.filters label:first-child{grid-column:auto}}
#count{color:var(--mut);font-size:.9rem}
/* misc */
.crumbs{font-size:.85rem;padding:1rem 0 0;color:var(--mut)}.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0}.crumbs li+li::before{content:"/";margin-right:.4rem}
.page-h{padding:1.5rem 0 1rem}.prose{max-width:70ch}.prose h2{margin-top:2rem;font-size:1.5rem}.prose li{margin:.3rem 0}
.note{background:#fdf0d5;border-left:4px solid #c58a00;padding:.8rem 1rem;border-radius:6px;font-size:.92rem;max-width:70ch}
.faq details{border-bottom:1px solid var(--line);padding:.8rem 0;max-width:70ch}.faq summary{cursor:pointer;font-weight:600;color:var(--navy)}.faq p{margin:.5rem 0 0;color:var(--mut)}
.signup{background:var(--navy);color:#fff}.signup h2{color:#fff}.signup .lead{color:#cdd6e6}
.sform{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1rem;max-width:560px}.sform input[type=email]{flex:1 1 240px;min-height:48px;border:0;border-radius:var(--r);padding:0 1rem;font:inherit}
.hp{position:absolute;left:-9999px}.fmsg{margin:.6rem 0 0;font-size:.9rem}
.cform{display:grid;gap:1rem;max-width:560px}.cform label{display:grid;gap:.25rem;font-weight:600;font-size:.9rem}.cform input,.cform textarea{border:1px solid var(--line);border-radius:var(--r);padding:.7rem;font:inherit}
.banner{background:var(--red);color:#fff;text-align:center;padding:.5rem 1rem;font-size:.85rem}
.ft{background:#0d1d36;color:#c3cde0;padding:3rem 0 1.5rem;font-size:.92rem}.ft a{color:#fff;text-decoration:none}.ft a:hover{text-decoration:underline}
.ft .cols{margin-bottom:1.5rem}.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}.ft b{color:#fff;font-family:var(--serif);letter-spacing:.1em}
.ft .fine{border-top:1px solid #22385c;padding-top:1rem;font-size:.8rem}
.legend{display:grid;gap:.8rem;margin:1rem 0}.legend div{display:flex;gap:.8rem;align-items:flex-start}
.post-meta{color:var(--mut);font-size:.9rem}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}