:root{--disp:'Archivo Black', 'Arial Black', Impact, sans-serif;--body:Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;--mono:'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
 font-size:16px;line-height:1.62;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--link)}
h1,h2,h3,h4{font-family:var(--disp);line-height:1.16;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(1.95rem,3.4vw,2.7rem)}
h2{font-size:clamp(1.35rem,2.3vw,1.85rem)}
h3{font-size:1.12rem}
h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.09em}
p{margin:0 0 1.05em}
ul{margin:0 0 1.05em;padding-left:1.15em}

:root{--bg:#ffffff;--panel:#f4f2ea;--ink:#17212b;--muted:#5b6770;--bd:#dcd7c9;
 --pri:#0f5132;--sec:#2b5f75;--link:#0f5132;--cta:#e11d63;--ctad:#ad0c4b;
 --plate:#fdf6e3;--plateink:#8a6410;--plated:#d8b24a}

.co-wrap{max-width:1120px;margin:0 auto;padding-left:20px;padding-right:20px}
.co-sec{padding-top:56px;padding-bottom:56px}
.co-alt{background:var(--panel)}
.co-prose{max-width:760px}

/* nav: floating pill on white, one line */
.co-nav{background:#fff;border-bottom:1px solid var(--bd);position:relative;z-index:5}
.co-navin{display:flex;align-items:center;justify-content:space-between;gap:14px;
 padding-top:9px;padding-bottom:9px}
.co-logo img{max-height:62px;max-width:300px;width:auto;height:auto;background:transparent;padding:0}
.co-links{display:flex;flex-wrap:nowrap;gap:6px}
.co-links a{white-space:nowrap;font-size:.78rem;font-weight:600;text-decoration:none;
 color:var(--ink);padding:7px 12px;border:1px solid var(--bd);border-radius:999px;background:#fff}
.co-links a:hover{border-color:var(--pri);color:var(--pri)}
.co-mob{display:none}

/* hero: left text + right selection column */
.co-hero{background:linear-gradient(180deg,#fff 0%,var(--panel) 100%);
 border-bottom:1px solid var(--bd);padding-top:26px;padding-bottom:26px}
.co-herogrid{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:34px;align-items:start}
.co-herotx h1{margin-bottom:.42em}
.co-selcol{display:flex;flex-direction:column;align-items:center;gap:9px;background:#fff;
 border:2px solid var(--ink);border-radius:18px;padding:16px 15px 15px;
 box-shadow:7px 7px 0 var(--pri)}
.co-selcode{font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.14em;
 color:#fff;background:var(--pri);border-radius:9px;padding:4px 11px}
.co-selhead{font-family:var(--disp);font-size:.72rem;text-transform:uppercase;
 letter-spacing:.13em;color:var(--muted)}
.co-selplate{background:#fff;border:1px solid var(--bd);border-radius:10px;padding:8px;width:100%}
.co-selname{font-family:var(--disp);font-size:1.02rem}
.co-seltc{font-size:.66rem;color:var(--muted)}

/* toplist rows — one border per row, no table */
.co-rows{display:flex;flex-direction:column;gap:10px}
.co-row{display:grid;grid-template-columns:52px 152px minmax(0,1fr) 218px 190px;
 gap:16px;align-items:center;background:#fff;border:1px solid var(--bd);
 border-radius:14px;padding:13px 15px}
.co-row.is-first{border:2px solid var(--pri);box-shadow:5px 5px 0 rgba(15,81,50,.16)}
.co-code{font-family:var(--mono);font-weight:700;font-size:.82rem;color:#fff;
 background:var(--pri);border-radius:10px;padding:9px 0;text-align:center}
.co-row.is-first .co-code{background:var(--ink)}
.co-plate{background:#fff;border:1px solid var(--bd);border-radius:9px;padding:6px;display:block}
.co-nm{font-family:var(--disp);font-size:.95rem;display:block}
.co-award{font-family:var(--mono);font-size:.63rem;text-transform:uppercase;
 letter-spacing:.11em;color:var(--pri);font-style:normal}
.co-tc{display:block;font-size:.63rem;color:var(--muted);margin-top:5px;line-height:1.4}

/* bonus plate: notched, mustard on cream (hue absent from palette, not the CTA hue) */
.co-bonus{background:var(--plate);border:1px solid var(--plated);padding:9px 13px;
 clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
 box-shadow:0 2px 0 rgba(138,100,16,.18)}
.co-blab{display:block;font-family:var(--mono);font-size:.6rem;text-transform:uppercase;
 letter-spacing:.13em;color:#8a6410;opacity:.85}
.co-bval{display:block;font-family:var(--disp);font-size:1.12rem;line-height:1.2;color:var(--plateink)}

.co-cta{display:block;text-align:center;background:var(--cta);color:#fff;
 font:700 .88rem/1 var(--body);text-decoration:none;padding:15px 14px;border-radius:11px;
 min-height:46px;box-shadow:0 3px 0 var(--ctad)}
.co-cta:hover{background:var(--ctad)}

.co-intro{max-width:760px}
.co-lmore{display:inline}
.co-ltog{display:none;background:none;border:0;padding:0;margin-left:6px;color:var(--pri);
 font:700 1rem/1 var(--body);cursor:pointer;text-decoration:underline}
.co-morewrap{margin-top:16px;text-align:center}
.co-more{font:700 .84rem/1 var(--body);padding:14px 26px;border:2px solid var(--ink);
 background:#fff;border-radius:11px;cursor:pointer;color:var(--ink)}

.co-byline{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;margin:0 0 12px}
.co-bl-av img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid var(--pri)}
.co-bl-tx{font-size:.74rem;color:var(--muted);white-space:nowrap}
.co-bl-tx a{color:var(--pri);font-weight:700}

.co-take{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:11px}
.co-take li{background:#fff;border:1px solid var(--bd);border-left:5px solid var(--pri);
 border-radius:0 11px 11px 0;padding:13px 15px;font-size:.94rem}

.co-ctable{display:flex;flex-direction:column;gap:9px}
.co-chead,.co-crow{display:grid;grid-template-columns:1.1fr 1.5fr .7fr 1fr 1.1fr;
 gap:14px;align-items:center}
.co-chead{font-family:var(--mono);font-size:.63rem;text-transform:uppercase;
 letter-spacing:.12em;color:var(--muted);padding:0 14px}
.co-crow{background:#fff;border:1px solid var(--bd);border-radius:12px;padding:12px 14px}
.co-crow:nth-child(odd){background:#fbfaf6}
.co-cnm{font-family:var(--disp);font-size:.95rem}
.co-cr,.co-cw{font-family:var(--mono);font-size:.76rem;color:var(--muted)}

.co-rev{background:#fff;border:1px solid var(--bd);border-radius:16px;padding:22px;
 margin-bottom:18px;max-width:820px}
.co-revhead{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.co-revrank{font-family:var(--disp);font-size:1.5rem;color:#fff;background:var(--pri);
 width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto}
.co-revhead h3{margin:0}
.co-verdict{font-size:1.06rem;font-weight:600;border-left:4px solid var(--sec);padding-left:13px}
.co-anec{background:var(--panel);border-radius:12px;padding:14px 16px;font-size:.95rem}
.co-anec span{display:block;font-family:var(--mono);font-size:.62rem;text-transform:uppercase;
 letter-spacing:.13em;color:var(--sec);margin-bottom:5px}
.co-pc{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:16px 0}
.co-pc h4{color:var(--sec)}
.co-pc ul{font-size:.9rem}
.co-revcta{max-width:280px}

.co-faqgrid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.co-q{background:#fff;border:1px solid var(--bd);border-radius:12px;padding:15px 17px}
.co-qn{font-family:var(--mono);font-size:.68rem;color:var(--pri);font-weight:700}
.co-q h3{font-size:.99rem;margin:4px 0 7px}
.co-q p{margin:0;font-size:.9rem;color:#3d474f}

.co-authorbox{display:flex;gap:22px;align-items:flex-start;max-width:880px}
.co-abimg{width:112px;height:112px;border-radius:50%;object-fit:cover;
 border:3px solid var(--pri);flex:0 0 auto}
.co-abrole{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;
 letter-spacing:.1em;color:var(--muted)}
.co-ablink{font-weight:700}

.co-foot{background:var(--pri);color:#e8f0ea;padding-top:44px;padding-bottom:30px}
.co-footgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:26px}
.co-foot h3{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:#fff}
.co-foot ul{list-style:none;padding:0;font-size:.86rem}
.co-foot a{color:#cfe3d6}
.co-footname{font-family:var(--disp);color:#fff;margin:9px 0 5px}
.co-footnote{font-size:.8rem;color:#b9d2c3}
.co-disc{font-size:.73rem;color:#a9c8b6;border-top:1px solid rgba(255,255,255,.18);
 padding-top:16px;margin-top:24px}
.co-copy{font-size:.73rem;color:#9dbfab;margin:0}

@media(max-width:940px){
 .co-herogrid{grid-template-columns:1fr}
 .co-selcol{display:none}
 .co-row{grid-template-columns:1fr;justify-items:center;text-align:center;gap:9px;
  position:relative;padding-top:19px}
 .co-row>div:last-child{width:100%}
 .co-code{position:absolute;top:9px;left:11px;padding:5px 9px;font-size:.68rem}
 .co-plate{max-width:190px}
 .co-bonus{width:100%;text-align:center}
 .co-chead{display:none}
 .co-crow{grid-template-columns:1fr;justify-items:center;text-align:center;gap:9px}
 .co-crow>div:last-child{width:100%}
 .co-take,.co-faqgrid,.co-pc{grid-template-columns:1fr}
 .co-footgrid{grid-template-columns:1fr 1fr}
 .co-authorbox{flex-direction:column;align-items:center;text-align:center}
 .co-links{display:none}
 .co-mob{display:block}
 .co-mob summary{list-style:none;width:44px;height:44px;display:grid;place-content:center;
  gap:5px;cursor:pointer;border:1px solid var(--bd);border-radius:11px}
 .co-mob summary::-webkit-details-marker{display:none}
 .co-mob summary span{display:block;width:20px;height:2px;background:var(--ink)}
 .co-mobpanel{position:absolute;right:20px;top:62px;background:#fff;border:1px solid var(--bd);
  border-radius:12px;padding:9px;display:flex;flex-direction:column;gap:5px;min-width:190px;
  box-shadow:0 12px 30px rgba(0,0,0,.12)}
}
@media(max-width:768px){
 .co-sec{padding-top:40px;padding-bottom:40px}
 .co-hero{padding-top:15px;padding-bottom:16px}
 h1{font-size:26px}
 h2{font-size:22px}
 .co-logo img{max-height:44px;max-width:62vw}
 .co-navin{padding-top:7px;padding-bottom:7px}
 .co-byline{margin-bottom:9px}
 .co-bl-tx{font-size:.6rem}
 .co-bl-av img{width:24px;height:24px}
 .co-lmore{display:none}
 .co-lede.is-open .co-lmore,.co-intro.is-open .co-lmore{display:inline}
 .co-ltog{display:inline-block;font-size:.9rem}
 .co-lede{font-size:.94rem;margin-bottom:.6em}
 .co-bval{font-size:1.1rem}
 .co-sec{padding-top:26px}
 .co-rev{padding:16px}
 .co-revcta{max-width:none}
}