
:root{--paper:#F2F6F6;--ink:#0F2229;--muted:#4C6168;--line:#C9D3D6;--deep:#0D3440;--deep-ink:#E9F2F3;--plate:#D6DDE0;--plate-hi:#EEF2F3;--plate-edge:#9FADB3;--stamp:#1B2E35;--buoy:#D9480F;--buoy-ink:#fff;--focus:#2B8BA6;--note:#E3EEF0}
@media (prefers-color-scheme:dark){:root{--paper:#0B1A1F;--ink:#E4ECEE;--muted:#9AB0B6;--line:#24393F;--deep:#06222A;--deep-ink:#E4ECEE;--plate:#22353B;--plate-hi:#2C4148;--plate-edge:#41575E;--stamp:#E4ECEE;--buoy:#F06A2E;--buoy-ink:#160800;--note:#13292F}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 "Barlow",system-ui,sans-serif}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.wrap{max-width:980px;margin:0 auto;padding:0 16px}
.disp{font-family:"Barlow Condensed","Barlow",sans-serif;letter-spacing:.01em}

/* header */
.top{background:var(--deep);color:var(--deep-ink)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px}
.mark{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:23px;text-decoration:none;letter-spacing:.02em;display:flex;align-items:center;gap:9px}
.mark svg{flex:none}
.top nav a{text-decoration:none;font-weight:500;font-size:15px;margin-left:18px;opacity:.85}
@media (max-width:640px){.top .wrap{flex-wrap:wrap;padding-top:10px;padding-bottom:8px}.top nav{width:100%;display:flex;justify-content:space-between}.top nav a{margin:0;font-size:15px}}
.top nav a:hover{opacity:1;text-decoration:underline}
.disc{font-size:13px;color:var(--muted);padding:10px 0 0}
.disc a{color:var(--muted)}

/* home hero */
.hero{background:var(--deep);color:var(--deep-ink);padding:26px 0 40px}
.hero h1{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:clamp(44px,9vw,84px);line-height:.95;margin:6px 0 14px;max-width:12ch}
.hero p.lede{font-size:19px;max-width:44ch;margin:0 0 22px;opacity:.9}
.finder{background:var(--paper);color:var(--ink);border-radius:6px;padding:16px;max-width:620px;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.finder label{display:block;font-weight:600;font-size:15px;margin-bottom:6px}
.finder input,.finder select{width:100%;font:inherit;font-size:18px;padding:12px;border:2px solid var(--line);border-radius:4px;background:var(--paper);color:var(--ink)}
.finder input:focus,.finder select:focus{border-color:var(--focus);outline:none}
.or{display:flex;gap:10px;margin-top:12px}
.or select{flex:1;font-size:16px;padding:10px}
#results{margin-top:6px}
#results a{display:flex;justify-content:space-between;gap:10px;padding:11px 4px;border-bottom:1px solid var(--line);text-decoration:none;font-weight:500}
#results a span{color:var(--muted);font-weight:400;font-size:15px}
#results p{margin:10px 4px;color:var(--muted)}

/* capacity plate */
.plate{position:relative;background:linear-gradient(160deg,var(--plate-hi),var(--plate) 55%);border:1px solid var(--plate-edge);border-radius:8px;padding:22px 22px 18px;color:var(--stamp);max-width:620px}
.plate::before,.plate::after,.plate .r1,.plate .r2{content:"";position:absolute;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--plate-hi),var(--plate-edge) 70%);box-shadow:inset 0 0 0 1px var(--plate-edge)}
.plate::before{top:9px;left:9px}.plate::after{top:9px;right:9px}.plate .r1{bottom:9px;left:9px}.plate .r2{bottom:9px;right:9px}
.plate .pt{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;text-align:center;border-bottom:2px solid var(--stamp);padding-bottom:8px;margin:0 8px 6px}
.plate .pn{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:clamp(26px,6vw,38px);line-height:1.05;text-align:center;margin:6px 0 12px}
.plate dl{display:grid;grid-template-columns:1fr 1fr;margin:0;border-top:1px dashed var(--plate-edge)}
.plate dl div{padding:9px 6px;border-bottom:1px dashed var(--plate-edge)}
.plate dl div:nth-child(odd){border-right:1px dashed var(--plate-edge)}
.plate dt{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.plate dd{margin:0;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:24px;line-height:1.15}
.plate dd.na{font-family:"Barlow",sans-serif;font-size:15px;font-weight:500;opacity:.7;padding-top:4px}
.plate .src{font-size:12px;text-align:center;margin:10px 0 0;opacity:.75}
a.plate{display:block;text-decoration:none}
a.plate:hover{border-color:var(--stamp)}

/* boat page */
.boathead{padding:18px 0 6px}
.crumb{font-size:14px;color:var(--muted);margin:4px 0 10px}
.crumb a{color:var(--muted)}
.boathead h1{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:clamp(34px,7vw,56px);line-height:1;margin:0 0 12px}
.answer{font-size:20px;line-height:1.45;max-width:46ch;margin:0 0 20px}
.boatgrid{display:grid;gap:24px}
@media (min-width:860px){.boatgrid{grid-template-columns:360px 1fr;align-items:start}.boatgrid .plate{position:sticky;top:16px}}
.jump{display:flex;gap:8px;overflow-x:auto;padding:4px 0 14px;margin:0}
.jump a{flex:none;text-decoration:none;font-weight:600;font-size:15px;padding:8px 14px;border:1.5px solid var(--ink);border-radius:999px}
.jump a:hover{background:var(--ink);color:var(--paper)}
.fit{padding:4px 0 26px;border-top:2px solid var(--ink);margin-top:6px;scroll-margin-top:12px}
.fit h2{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:30px;margin:12px 0 4px}
.fit .why{color:var(--muted);margin:0 0 10px;max-width:60ch}
.picks{list-style:none;margin:0;padding:0}
.pick{display:grid;grid-template-columns:1fr auto;gap:2px 14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center}
.pick .nm{font-weight:600;font-size:18px;line-height:1.3}
.pick .sp{color:var(--muted);font-size:15px;grid-column:1}
.pick .pr{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:24px;grid-column:2;grid-row:1;text-align:right}
.pick .buy{grid-column:1/-1;justify-self:start;margin-top:8px}
@media (min-width:600px){.pick{grid-template-columns:1fr auto auto}.pick .buy{grid-column:3;grid-row:1/3;margin:0}.pick .pr{grid-row:1/3}}
.buy{display:inline-block;background:var(--buoy);color:var(--buoy-ink);text-decoration:none;font-weight:700;padding:11px 18px;border-radius:4px;white-space:nowrap}
.buy:hover{filter:brightness(1.08)}
.note{background:var(--note);border-left:4px solid var(--deep);padding:12px 14px;margin:12px 0 0;font-size:15.5px;max-width:64ch}
.dark .note{border-left-color:var(--focus)}
.sources{font-size:14px;color:var(--muted)}
.sources a{word-break:break-all}

/* lists */
h1.page{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:clamp(38px,8vw,64px);line-height:1;margin:22px 0 10px}
.sub{color:var(--muted);margin:0 0 18px;max-width:60ch}
table.models{width:100%;border-collapse:collapse;font-size:16px}
table.models th{text-align:left;font-weight:600;font-size:14px;color:var(--muted);border-bottom:2px solid var(--ink);padding:8px 6px}
table.models td{border-bottom:1px solid var(--line);padding:11px 6px}
table.models td a{font-weight:600;text-decoration:none}
table.models td a:hover{text-decoration:underline}
table.models .n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:520px){table.models .hide-s{display:none}}
.brandwall{display:flex;flex-wrap:wrap;gap:6px 28px;margin:8px 0 10px;padding:0;list-style:none}
.brandwall a{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:clamp(30px,6vw,44px);line-height:1.15;text-decoration:none}
.brandwall a:hover{color:var(--buoy)}
.brandwall small{font-family:"Barlow",sans-serif;font-weight:500;font-size:14px;color:var(--muted);margin-left:4px}
.section{padding:34px 0 8px}
.section h2{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:34px;margin:0 0 10px}
.lines{display:grid;gap:0;margin:0;padding:0;list-style:none}
@media (min-width:760px){.lines{grid-template-columns:1fr 1fr;column-gap:36px}}
.lines li{padding:14px 0;border-top:1px solid var(--line)}
.lines b{display:block;font-size:18px}
.lines span{color:var(--muted)}
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:14px}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{counter-increment:s;padding-left:46px;position:relative}
.steps li::before{content:counter(s);position:absolute;left:0;top:-4px;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:38px;line-height:1;color:var(--buoy)}
.prose{max-width:64ch}
.prose h2{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:28px;margin:26px 0 6px}
.demo{margin-top:30px}
.herogrid{display:grid;gap:36px}.hero-plate{display:none}
@media (min-width:900px){.herogrid{grid-template-columns:1fr 380px;align-items:end}.hero-plate{display:block}.demo{display:none}}
.hero-plate .cap{font-size:14px;opacity:.75;margin:0 0 8px}
.demo p{color:var(--muted);font-size:15px;margin:0 0 8px}

/* footer */
.foot{background:var(--deep);color:var(--deep-ink);margin-top:48px;padding:28px 0 36px;font-size:15px}
.foot p{max-width:62ch;opacity:.85}
.foot a{margin-right:16px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
html{scroll-behavior:smooth}

.tiles{display:grid;gap:12px;margin:0;padding:0;list-style:none}
@media (min-width:700px){.tiles{grid-template-columns:1fr 1fr}}
.tiles a{display:block;text-decoration:none;border:2px solid var(--ink);border-radius:6px;padding:16px 18px;background:var(--paper)}
.tiles a:hover{background:var(--ink);color:var(--paper)}
.tiles b{display:block;font-family:"Barlow Condensed",sans-serif;font-size:30px;line-height:1.1}
.tiles span{font-size:15.5px;opacity:.8}
.cat{width:100%;border-collapse:collapse;font-size:15.5px;margin:6px 0 4px}
.cat caption{text-align:left;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:22px;padding:16px 0 4px}
.cat th{text-align:left;font-weight:600;font-size:13.5px;color:var(--muted);border-bottom:2px solid var(--ink);padding:7px 6px}
.cat td{border-bottom:1px solid var(--line);padding:9px 6px;vertical-align:middle}
.cat td.n,.cat th.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.cat td.p{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:19px;text-align:right;white-space:nowrap}
.cat a.go{display:inline-block;background:var(--buoy);color:var(--buoy-ink);text-decoration:none;font-weight:700;font-size:14px;padding:7px 12px;border-radius:4px;white-space:nowrap}
.cat a.lk{font-size:14px;white-space:nowrap}
.cat tr.best td{background:var(--note)}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:560px){.cat .hide-s{display:none}.cat{font-size:14.5px}}
.count{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:20px;margin:4px 0 0}
.other{margin:26px 0 0;padding:16px 0 0;border-top:2px solid var(--ink)}
.other a{margin-right:18px;font-weight:600}
.bybrand h3{font-family:"Barlow Condensed",sans-serif;font-size:24px;margin:18px 0 4px}
.bybrand ul{list-style:none;padding:0;margin:0;columns:2 220px;column-gap:28px}
.bybrand li{padding:4px 0;break-inside:avoid}
.bybrand a{text-decoration:none;font-weight:500}.bybrand a:hover{text-decoration:underline}
