/* ============================================================
   Cornhole Insider — main.css
   ============================================================ */

/* ---------- 0. Fonts (self-hosted) ---------- */
/* Figtree variable (wght 300-900), SIL Open Font License 1.1 - see assets/fonts/OFL.txt.
   Served from this origin rather than fonts.gstatic.com so no visitor IP address
   reaches Google, which is what the privacy policy promises. */
@font-face{
  font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;
  src:url("../fonts/figtree-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;
  src:url("../fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Figtree";font-style:italic;font-weight:300 900;font-display:swap;
  src:url("../fonts/figtree-latin-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Figtree";font-style:italic;font-weight:300 900;font-display:swap;
  src:url("../fonts/figtree-latin-ext-italic.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- 1. Tokens ---------- */
:root{
  --paper:#efeee9;
  --card:#ffffff;
  --ink:#141a15;
  --ink-2:#2c352d;
  --muted:#6d7a6e;
  --muted-2:#8a958b;

  --green:#186a41;
  --green-deep:#0e3f27;
  --green-soft:#e2efe6;
  --lime:#c9e870;
  --corn:#f3c64a;
  --corn-soft:#f6f1cd;
  --clay:#c1553a;

  --line:rgba(20,26,21,.09);
  --line-2:rgba(20,26,21,.14);

  --r-xs:10px;
  --r-sm:14px;
  --r-md:20px;
  --r-lg:28px;
  --r-xl:36px;
  --pill:999px;

  --shadow-sm:0 1px 2px rgba(20,26,21,.04);
  --shadow-md:0 10px 30px -12px rgba(20,26,21,.16);
  --shadow-lg:0 30px 60px -28px rgba(20,26,21,.3);

  --wrap:1240px;
  --gap:20px;

  --f-display:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-body:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg,video{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
table{border-collapse:collapse;width:100%;}
h1,h2,h3,h4,h5,h6,p,ul,ol,figure{margin:0;}
ul,ol{padding:0;list-style:none;}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px;}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 var(--r-sm) 0;}
.skip-link:focus{left:0;}

/* ---------- 3. Type scale ---------- */
.d1{font-family:var(--f-display);font-size:clamp(2.35rem,5.4vw,4.15rem);line-height:1.03;letter-spacing:-.035em;font-weight:600;}
.d2{font-family:var(--f-display);font-size:clamp(1.85rem,3.6vw,2.9rem);line-height:1.08;letter-spacing:-.032em;font-weight:600;}
.d3{font-family:var(--f-display);font-size:clamp(1.35rem,2.1vw,1.7rem);line-height:1.18;letter-spacing:-.025em;font-weight:600;}
.d4{font-size:1.06rem;line-height:1.35;letter-spacing:-.014em;font-weight:600;}
.lead{font-size:clamp(1rem,1.15vw,1.09rem);line-height:1.62;color:var(--muted);}
.body-txt{color:var(--ink-2);font-size:1rem;line-height:1.72;}
.body-txt + .body-txt{margin-top:1.05em;}
.body-txt p + p{margin-top:1.05em;}
.small{font-size:.86rem;line-height:1.5;color:var(--muted);}
.tiny{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;}

/* ---------- 4. Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(14px,3vw,26px);}
.shell{padding:10px 0 0;}
.section{margin-top:clamp(28px,4.6vw,58px);}
.panel{
  background:var(--card);
  border-radius:var(--r-xl);
  padding:clamp(26px,4vw,58px);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.panel--flat{background:transparent;border:0;box-shadow:none;padding-inline:0;}
.grid{display:grid;gap:var(--gap);}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.stack-sm > * + *{margin-top:12px;}
.stack   > * + *{margin-top:18px;}
.stack-lg> * + *{margin-top:30px;}

/* ---------- 5. Chips / eyebrows ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--paper);
  border:1px solid var(--line);
  color:var(--ink-2);
  border-radius:var(--pill);
  padding:7px 14px;
  font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
}
.panel .eyebrow{background:var(--paper);}
.eyebrow--onwhite{background:var(--paper);}
.eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--green);}
.section-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;}
.section-head .lead{max-width:56ch;}
.section-head--left{align-items:flex-start;text-align:left;}

/* inline emoji token inside headings, à la reference */
.tok{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.06em;height:1.06em;border-radius:50%;
  background:var(--corn);
  vertical-align:-.09em;margin:0 .06em;
  font-size:.72em;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.08);
}
.tok svg{width:74%;height:74%;}
.tok--green{background:var(--green);}
.tok--lime{background:var(--lime);}

/* ---------- 6. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  border-radius:var(--pill);
  padding:8px 8px 8px 20px;
  font-size:.92rem;font-weight:600;letter-spacing:-.01em;
  border:1px solid transparent;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);}
.btn .ico{
  display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;
  flex:0 0 30px;
  transition:transform .18s ease;
}
.btn:hover .ico{transform:rotate(-45deg);}
.btn svg{width:13px;height:13px;}

.btn--dark{background:var(--ink);color:#fff;}
.btn--dark .ico{background:var(--lime);color:var(--ink);}
.btn--dark:hover{background:#000;}

.btn--green{background:var(--green);color:#fff;}
.btn--green .ico{background:#fff;color:var(--green);}

.btn--light{background:#fff;color:var(--ink);border-color:var(--line-2);}
.btn--light .ico{background:var(--green);color:#fff;}

.btn--ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.3);backdrop-filter:blur(8px);}
.btn--ghost .ico{background:#fff;color:var(--ink);}

.btn--plain{padding:8px 20px;}
.btn--plain .ico{display:none;}

/* text link with arrow */
.tlink{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:600;font-size:.95rem;color:var(--green);
  letter-spacing:-.01em;
}
.tlink svg{width:14px;height:14px;transition:transform .18s ease;}
.tlink:hover svg{transform:translateX(4px);}
.tlink--ink{color:var(--ink);}

/* ---------- 7. Header / nav ---------- */
.site-header{position:absolute;inset:0 0 auto 0;z-index:40;padding-top:26px;}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.brand{
  display:inline-flex;align-items:center;
  background:#fff;border-radius:var(--pill);
  padding:9px 20px;
  box-shadow:var(--shadow-md);
}
.brand-logo{display:block;width:auto;height:24px;}

.nav-pill{
  display:flex;align-items:center;gap:3px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-radius:var(--pill);
  padding:5px;
}
.nav-pill a{
  display:block;padding:8px 16px;border-radius:var(--pill);
  color:#fff;font-size:.87rem;font-weight:500;letter-spacing:-.01em;
  transition:background .18s ease,color .18s ease;
}
.nav-pill a:hover,.nav-pill .current-menu-item > a{background:#fff;color:var(--ink);}
.nav-end{display:flex;align-items:center;gap:10px;}
.nav-toggle{display:none;width:44px;height:44px;border-radius:50%;background:#fff;place-items:center;box-shadow:var(--shadow-md);}
.nav-toggle span{display:block;width:17px;height:1.8px;background:var(--ink);border-radius:2px;position:relative;}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:17px;height:1.8px;background:var(--ink);border-radius:2px;}
.nav-toggle span::before{top:-5.5px;}
.nav-toggle span::after{top:5.5px;}

/* mobile drawer */
.nav-drawer{display:none;}
body.nav-open .nav-drawer{
  display:block;position:fixed;inset:0;z-index:60;background:var(--paper);
  padding:26px clamp(14px,4vw,26px);overflow:auto;
}
.nav-drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;}
.nav-drawer .brand{box-shadow:none;border:1px solid var(--line);}
.nav-drawer ul{display:grid;gap:4px;}
.nav-drawer ul a{
  display:block;padding:14px 18px;border-radius:var(--r-md);
  background:#fff;border:1px solid var(--line);
  font-family:var(--f-display);font-size:1.15rem;font-weight:600;letter-spacing:-.02em;
}
.nav-close{width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-size:1.2rem;line-height:1;}

/* ---------- 8. Hero ---------- */
.hero{position:relative;}
.hero-frame{
  position:relative;
  border-radius:var(--r-xl);
  overflow:hidden;
  min-height:clamp(520px,74vh,700px);
  display:flex;flex-direction:column;justify-content:flex-end;
  isolation:isolate;
}
.hero-art{position:absolute;inset:0;z-index:-2;}
.hero-art svg{width:100%;height:100%;object-fit:cover;}
.hero-scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to bottom,rgba(8,20,12,.5) 0%,rgba(8,20,12,0) 34%),
    linear-gradient(to top,rgba(6,16,10,.86) 6%,rgba(6,16,10,.32) 42%,rgba(6,16,10,0) 66%);
}
.hero-inner{padding:clamp(26px,4.2vw,54px);display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(20px,3vw,40px);}
.hero-copy{flex:1 1 460px;min-width:0;color:#fff;}
.hero-copy .d1{color:#fff;text-wrap:balance;}
.hero-sub{margin-top:16px;max-width:52ch;color:rgba(255,255,255,.82);font-size:1.02rem;line-height:1.6;}
.hero-ctas{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px;}
.hero-side{
  flex:0 1 330px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-radius:var(--r-lg);
  padding:20px;
  color:#fff;
}
.hero-side p{font-size:.88rem;line-height:1.55;color:rgba(255,255,255,.86);}
.stack-avatars{display:flex;align-items:center;margin-bottom:12px;}
.stack-avatars span{
  width:28px;height:28px;border-radius:50%;
  border:2px solid rgba(255,255,255,.85);
  margin-left:-9px;display:grid;place-items:center;font-size:.72rem;
}
.stack-avatars span:first-child{margin-left:0;}
.av-1{background:var(--corn);}
.av-2{background:var(--lime);}
.av-3{background:var(--clay);}
.av-4{background:#fff;color:var(--ink);font-weight:700;font-size:.62rem!important;}
.hero-stat{
  display:flex;align-items:center;gap:10px;
  margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.2);
  font-size:.8rem;color:rgba(255,255,255,.78);
}
.hero-stat b{color:#fff;font-size:1.02rem;font-weight:700;letter-spacing:-.02em;}

/* ---------- 9. Category cards (hub grid) ---------- */
.hub-grid{margin-top:clamp(26px,3.4vw,42px);}
.hub-card{
  display:flex;flex-direction:column;gap:12px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:22px;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;
}
.hub-card:hover{transform:translateY(-3px);background:#fff;border-color:var(--line-2);box-shadow:var(--shadow-md);}
.hub-ico{
  width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;flex:0 0 42px;
  background:var(--green-soft);color:var(--green);
}
.hub-ico svg{width:21px;height:21px;}
.hub-card:nth-child(4n+2) .hub-ico{background:var(--corn-soft);color:#9a7712;}
.hub-card:nth-child(4n+3) .hub-ico{background:#f0ead9;color:#8a6b2f;}
.hub-card:nth-child(4n+4) .hub-ico{background:#e6ecf7;color:#3c5b93;}
.hub-card p{font-size:.9rem;line-height:1.58;color:var(--muted);}
.hub-card .tlink{margin-top:auto;padding-top:6px;font-size:.87rem;}

/* ---------- 10. Split / feature ---------- */
.split{display:grid;gap:clamp(24px,3.4vw,52px);grid-template-columns:1fr 1fr;align-items:center;}
.split--wide-l{grid-template-columns:1.06fr .94fr;}
.figure-card{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--green-deep);
  aspect-ratio:4/3.4;
}
.figure-card svg{width:100%;height:100%;}
.figure-badge{
  position:absolute;left:16px;bottom:16px;right:16px;
  background:#fff;border-radius:var(--r-md);
  padding:12px 16px;
  display:flex;align-items:center;gap:12px;
  box-shadow:var(--shadow-md);
}
.figure-badge b{font-family:var(--f-display);font-size:1.02rem;letter-spacing:-.02em;}
.figure-badge span{font-size:.78rem;color:var(--muted);display:block;}

.fact-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;}
.fact{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--pill);padding:8px 15px;
  font-size:.83rem;font-weight:600;color:var(--ink-2);
}
.fact svg{width:14px;height:14px;color:var(--green);}

/* ---------- 11. Steps ---------- */
.steps{margin-top:clamp(24px,3vw,40px);display:grid;gap:14px;}
.step{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-md);padding:22px 24px;
}
.step-num{
  display:inline-grid;place-items:center;
  min-width:40px;height:34px;padding:0 10px;margin-right:14px;
  border-radius:11px;vertical-align:2px;
  background:var(--ink);color:var(--lime);
  font-family:var(--f-display);font-weight:700;font-size:.9rem;letter-spacing:0;
}
.step h3{margin-bottom:8px;display:flex;align-items:center;flex-wrap:wrap;}
.step h3 .step-num{flex:0 0 auto;}
.step p{font-size:.95rem;line-height:1.68;color:var(--muted);}
.step p + p{margin-top:.7em;}

/* ---------- 12. Spec table ---------- */
.spec-wrap{
  border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;background:#fff;
}
.spec-scroll{overflow-x:auto;}
.spec{min-width:420px;font-size:.95rem;}
.spec caption{
  text-align:left;padding:18px 22px;background:var(--paper);
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--muted);
  border-bottom:1px solid var(--line);
}
.spec th,.spec td{padding:14px 22px;text-align:left;border-bottom:1px solid var(--line);}
.spec thead th{
  background:var(--green-deep);color:#fff;font-weight:600;font-size:.8rem;
  letter-spacing:.05em;text-transform:uppercase;
}
.spec tbody th{font-weight:600;color:var(--ink);width:56%;}
.spec tbody td{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--green);white-space:nowrap;}
.spec tbody tr:last-child th,.spec tbody tr:last-child td{border-bottom:0;}
.spec tbody tr:nth-child(even){background:#fbfbf9;}
.note{
  display:flex;gap:10px;align-items:flex-start;
  margin-top:16px;padding:14px 16px;
  background:var(--corn-soft);border-radius:var(--r-sm);
  font-size:.85rem;line-height:1.6;color:#6b5714;
}
.note svg{width:16px;height:16px;flex:0 0 16px;margin-top:3px;}

/* ---------- 12b. Affiliate disclosure ---------- */
.aff-disclosure{
  display:flex;gap:11px;align-items:flex-start;
  margin-top:clamp(18px,2.2vw,26px);
  padding:14px 18px;
  background:var(--corn-soft);
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  font-size:.86rem;line-height:1.6;color:#6b5714;
  max-width:78ch;
}
.aff-disclosure svg{width:17px;height:17px;flex:0 0 17px;margin-top:3px;}
.aff-disclosure p{margin:0;}
.aff-disclosure b{color:#544310;}
.aff-disclosure a{color:var(--green);text-decoration:underline;text-underline-offset:3px;}
.aff-disclosure a:hover{color:var(--green-deep);}
.price-note{
  margin-top:8px;max-width:78ch;
  font-size:.8rem;line-height:1.6;color:var(--muted);
}
.price-note a{color:var(--muted);text-decoration:underline;text-underline-offset:3px;}
.price-note a:hover{color:var(--green);}

/* ---------- 13. Scoring cards ---------- */
.score-cards{margin-top:clamp(24px,3vw,38px);}
.score-card{
  position:relative;border-radius:var(--r-lg);
  padding:30px 26px 26px;
  border:1px solid var(--line);
  text-align:center;
}
.score-card--mint{background:var(--green-soft);}
.score-card--butter{background:var(--corn-soft);}
.score-tag{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:#fff;border:1px solid var(--line);border-radius:var(--pill);
  padding:6px 16px;display:inline-flex;align-items:center;gap:7px;
  font-size:.73rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  box-shadow:var(--shadow-sm);white-space:nowrap;
}
.score-tag svg{width:12px;height:12px;color:var(--green);}
.score-ico{width:54px;height:54px;margin:6px auto 14px;border-radius:50%;background:#fff;display:grid;place-items:center;}
.score-ico svg{width:27px;height:27px;color:var(--green);}
.score-card .d2{margin-bottom:4px;}
.score-card p{font-size:.9rem;color:var(--muted);max-width:34ch;margin-inline:auto;}
.score-value{
  margin-top:16px;padding-top:16px;border-top:1px dashed rgba(20,26,21,.16);
  font-family:var(--f-display);font-size:1.5rem;font-weight:700;letter-spacing:-.03em;
}
.score-value small{display:block;font-size:.76rem;font-weight:500;color:var(--muted);letter-spacing:0;margin-top:2px;}

.example{
  margin-top:22px;
  background:var(--ink);color:#fff;border-radius:var(--r-lg);
  padding:26px clamp(22px,3vw,34px);
  display:flex;gap:18px;align-items:flex-start;
}
.example-q{font-family:var(--f-display);font-size:2.4rem;line-height:.8;color:var(--lime);flex:0 0 auto;}
.example p{font-size:1.02rem;line-height:1.6;color:rgba(255,255,255,.9);}
.example b{color:var(--lime);font-weight:600;}
.example .small{color:rgba(255,255,255,.55);margin-top:10px;}

/* ---------- 14. Equipment ---------- */
.equip{margin-top:clamp(24px,3vw,40px);}
.equip-card{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:26px;
  display:flex;flex-direction:column;gap:14px;
}
.equip-visual{
  border-radius:var(--r-md);overflow:hidden;background:var(--green-deep);
  aspect-ratio:16/9;
}
.equip-visual svg{width:100%;height:100%;}
.equip-card ul{display:grid;gap:8px;}
.equip-card li{
  display:flex;gap:9px;align-items:flex-start;
  font-size:.9rem;line-height:1.55;color:var(--muted);
}
.equip-card li svg{width:15px;height:15px;flex:0 0 15px;margin-top:4px;color:var(--green);}
.equip-card .tlink{margin-top:auto;padding-top:4px;}

/* ---------- 15. Strategy chips ---------- */
.chip-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.chip{
  display:inline-flex;align-items:center;gap:9px;
  background:#fff;border:1px solid var(--line-2);
  border-radius:var(--pill);padding:10px 18px;
  font-size:.9rem;font-weight:600;letter-spacing:-.01em;
  transition:background .18s ease,color .18s ease,transform .18s ease,border-color .18s ease;
}
.chip:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-2px);}
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--green);}
.chip:hover .dot{background:var(--lime);}
.panel--flat .chip{background:#fff;}

/* ---------- 16. Dark block ---------- */
.dark-block{
  position:relative;overflow:hidden;
  background:#12160f;color:#fff;
  border-radius:var(--r-xl);
  padding:clamp(28px,4vw,54px);
}
.dark-block .d2{color:#fff;}
.star{position:absolute;opacity:.9;pointer-events:none;}
.star-a{right:-40px;top:-30px;width:200px;color:#1c2317;}
.star-b{right:90px;bottom:-70px;width:150px;color:#1c2317;}
.dark-inner{position:relative;z-index:2;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(22px,3vw,44px);align-items:center;}
.dark-figure{border-radius:var(--r-lg);overflow:hidden;background:var(--green-deep);aspect-ratio:4/3;}
.dark-figure svg{width:100%;height:100%;}
.dark-block p{color:rgba(255,255,255,.72);font-size:1rem;line-height:1.65;margin-top:14px;max-width:52ch;}
.begin-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:24px;}
.begin-link{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--pill);padding:11px 12px 11px 20px;
  font-size:.92rem;font-weight:600;letter-spacing:-.01em;
  transition:background .18s ease,transform .18s ease;
}
.begin-link:hover{background:rgba(255,255,255,.13);transform:translateY(-2px);}
.begin-link .ico{width:26px;height:26px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;flex:0 0 26px;}
.begin-link .ico svg{width:11px;height:11px;}
.dark-block .eyebrow{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff;}

/* ---------- 17. FAQ ---------- */
.faq{margin-top:clamp(24px,3vw,40px);display:grid;gap:10px;}
.faq-item{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;
  transition:background .2s ease,border-color .2s ease;
}
.faq-item[open]{background:#fff;border-color:var(--line-2);box-shadow:var(--shadow-sm);}
.faq-item summary{
  list-style:none;cursor:pointer;
  padding:20px 22px;
  display:flex;align-items:center;gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary h3{flex:1;font-size:1.02rem;font-weight:600;letter-spacing:-.018em;line-height:1.4;}
.faq-sign{
  width:30px;height:30px;border-radius:50%;flex:0 0 30px;
  background:#fff;border:1px solid var(--line-2);
  display:grid;place-items:center;position:relative;
  transition:background .2s ease,transform .2s ease;
}
.faq-sign::before,.faq-sign::after{content:"";position:absolute;background:var(--ink);border-radius:2px;transition:opacity .2s ease,background .2s ease;}
.faq-sign::before{width:11px;height:1.7px;}
.faq-sign::after{width:1.7px;height:11px;}
.faq-item[open] .faq-sign{background:var(--ink);}
.faq-item[open] .faq-sign::before{background:var(--lime);}
.faq-item[open] .faq-sign::after{opacity:0;}
.faq-body{padding:0 22px 22px 68px;}
.faq-body p{font-size:.95rem;line-height:1.7;color:var(--muted);}
.faq-body .tlink{margin-top:10px;font-size:.88rem;}

/* ---------- 18. Explore hub ---------- */
.explore{margin-top:clamp(24px,3vw,38px);}
.explore-card{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-md);padding:20px 20px;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.explore-card b{font-family:var(--f-display);font-size:1.05rem;font-weight:600;letter-spacing:-.022em;}
.explore-card span{display:block;font-size:.78rem;color:var(--muted);font-weight:500;margin-top:2px;}
.explore-card .ico{
  width:30px;height:30px;border-radius:50%;flex:0 0 30px;
  background:#fff;border:1px solid var(--line-2);
  display:grid;place-items:center;transition:all .18s ease;
}
.explore-card .ico svg{width:12px;height:12px;}
.explore-card:hover{background:var(--ink);transform:translateY(-3px);}
.explore-card:hover b{color:#fff;}
.explore-card:hover span{color:rgba(255,255,255,.6);}
.explore-card:hover .ico{background:var(--lime);border-color:var(--lime);transform:rotate(-45deg);}

/* ---------- 19. Review stamp & Footer ---------- */
.review-stamp{margin-top:clamp(26px,3.5vw,44px);font-size:.82rem;line-height:1.5;color:var(--muted-2);}
.site-footer{margin-top:clamp(30px,4vw,58px);padding-bottom:26px;}
.footer-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(26px,4vw,52px);}
.footer-top{display:grid;grid-template-columns:1.25fr repeat(3,minmax(0,.85fr));gap:clamp(22px,3vw,40px);}
.footer-brand .brand{box-shadow:none;border:1px solid var(--line);}
.footer-brand .brand-logo{height:26px;}
.footer-brand p{margin-top:16px;font-family:var(--f-display);font-size:1.18rem;line-height:1.32;letter-spacing:-.026em;font-weight:600;max-width:24ch;}
.footer-col h2{font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2);font-weight:700;margin-bottom:14px;}
.footer-col li + li{margin-top:9px;}
.footer-col a{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;color:var(--ink-2);transition:color .16s ease;}
.footer-col a:hover{color:var(--green);}
.footer-col a svg{width:12px;height:12px;color:var(--muted-2);}
.footer-bottom{
  margin-top:clamp(26px,3vw,42px);padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  font-size:.82rem;color:var(--muted);
}
.footer-bottom nav{display:flex;gap:20px;flex-wrap:wrap;}

/* ---------- 20. Generic page/post ---------- */
.page-hero{padding:clamp(90px,12vw,140px) 0 clamp(20px,3vw,34px);}

/* Breadcrumbs — the visible half of the BreadcrumbList in the JSON-LD graph.
   Google will not accept markup for a trail the reader cannot see or click, so
   this is not decoration: it is what makes the structured data legitimate. */
.crumbs{margin-bottom:20px;font-size:.82rem;line-height:1.5;}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px;}
.crumbs li{display:flex;align-items:center;gap:9px;color:var(--muted);min-width:0;}
.crumbs li + li::before{
  content:"";flex:none;width:5px;height:5px;
  border-top:1.5px solid var(--line-2);border-right:1.5px solid var(--line-2);
  transform:rotate(45deg);
}
.crumbs a{color:var(--muted);border-radius:4px;}
.crumbs a:hover{color:var(--green);text-decoration:underline;text-underline-offset:3px;}
.crumbs [aria-current="page"]{color:var(--ink-2);font-weight:600;}
.entry{max-width:74ch;}
.entry h2{font-family:var(--f-display);font-size:1.7rem;letter-spacing:-.028em;margin:1.7em 0 .5em;}
.entry h3{font-family:var(--f-display);font-size:1.28rem;letter-spacing:-.022em;margin:1.5em 0 .4em;}
.entry p{margin:0 0 1.1em;color:var(--ink-2);line-height:1.75;}
.entry ul{list-style:disc;padding-left:1.25em;margin:0 0 1.1em;color:var(--ink-2);}
.entry li{margin-bottom:.4em;}
.entry a{color:var(--green);text-decoration:underline;text-underline-offset:3px;}

/* ---------- 21. Responsive ---------- */
@media (max-width:1080px){
  .cols-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .footer-top{grid-template-columns:1fr 1fr;}
}
@media (max-width:900px){
  .nav-pill{display:none;}
  .nav-end .btn{display:none;}
  .nav-toggle{display:grid;}
  .split,.split--wide-l{grid-template-columns:1fr;}
  .cols-3{grid-template-columns:1fr;}
  .dark-inner{grid-template-columns:1fr;}
  .equip{grid-template-columns:1fr;}
}
@media (max-width:680px){
  :root{--gap:14px;}
  .cols-2,.cols-4{grid-template-columns:1fr;}
  .score-cards{grid-template-columns:1fr;}
  .begin-links{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr;}
  .hero-inner{flex-direction:column;align-items:stretch;}
  .hero-side{flex:1 1 auto;}
  .step{grid-template-columns:1fr;gap:12px;}
  .faq-body{padding-left:22px;}
  .example{flex-direction:column;gap:8px;}
  .site-header{padding-top:16px;}
  .brand{padding:8px 16px;}
  .brand-logo{height:20px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}

/* ---------- 22b. Score calculator ---------- */
.calc-teams{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;}
.calc-team{flex:1 1 220px;min-width:180px;}
.calc-label{display:block;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--muted-2);margin-bottom:6px;}
.calc-input{
  width:100%;background:var(--paper);border:1px solid var(--line-2);
  border-radius:var(--r-sm);padding:12px 16px;
  font-family:var(--f-display);font-weight:600;font-size:1.05rem;color:var(--ink);
}
.calc-vs{flex:0 0 auto;font-family:var(--f-display);font-weight:700;color:var(--muted-2);font-size:.85rem;padding-bottom:13px;}

.calc-table-wrap{margin-top:22px;}
.calc-table th,.calc-table td{text-align:center;}
.calc-table thead th:first-child,.calc-table tbody th{text-align:left;}
.calc-score-input{
  width:76px;max-width:100%;text-align:center;
  border:1px solid var(--line-2);border-radius:var(--r-xs);
  padding:9px 6px;font-weight:700;font-size:1rem;color:var(--ink);
  background:#fff;font-variant-numeric:tabular-nums;
}
.calc-result{font-weight:700;color:var(--green);font-size:.86rem;white-space:nowrap;}
.calc-result.is-tie{color:var(--muted);font-weight:600;}
.calc-result.is-empty{color:var(--muted-2);font-weight:500;}

.calc-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start;margin-top:16px;}
.calc-actions .btn[disabled]{opacity:.45;cursor:not-allowed;}

.calc-totals{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;margin-top:24px;align-items:stretch;}
.calc-totals .score-card{display:flex;flex-direction:column;justify-content:center;}
.calc-diff{
  background:var(--ink);color:#fff;border-radius:var(--r-lg);
  padding:20px 24px;display:flex;flex-direction:column;
  justify-content:center;align-items:center;gap:6px;min-width:150px;
}
.calc-diff span{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:700;}
.calc-diff b{font-family:var(--f-display);font-size:1.7rem;color:var(--lime);letter-spacing:-.02em;}

.calc-footer-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.calc-winner-note{margin-top:18px;}

.sheet-table th,.sheet-table td{text-align:center;}
.sheet-table thead th:first-child,.sheet-table tbody th{text-align:left;}
.sheet-table tbody td{color:var(--muted-2);}
.sheet-table tbody tr:last-child th,.sheet-table tbody tr:last-child td{font-weight:700;color:var(--ink);border-top:2px solid var(--line-2);}

@media (max-width:680px){
  .calc-teams{flex-direction:column;align-items:stretch;}
  .calc-vs{padding-bottom:0;text-align:center;}
  .calc-totals{grid-template-columns:1fr;}
}

@media print{
  .site-header,.site-footer,.nav-drawer,.skip-link,.calc-actions,.calc-footer-actions{display:none!important;}
  .page-hero{padding:16px 0!important;}
  .panel{box-shadow:none!important;border:1px solid #000;}
}

/* ---------- 22. Header variants & utilities ---------- */
.hide-sm{display:inline;}
@media (max-width:760px){ .hide-sm{display:none;} }

.site-header--solid .nav-pill{
  background:#fff;border-color:var(--line);
  box-shadow:var(--shadow-md);
}
.site-header--solid .nav-pill a{color:var(--ink-2);}
.site-header--solid .nav-pill a:hover,
.site-header--solid .nav-pill .current-menu-item > a{background:var(--ink);color:#fff;}

.site-header.is-stuck{position:fixed;top:0;padding-top:14px;padding-bottom:14px;background:rgba(239,238,233,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);animation:ci-drop .28s ease both;}
.site-header.is-stuck .nav-pill{background:#fff;border-color:var(--line);}
.site-header.is-stuck .nav-pill a{color:var(--ink-2);}
.site-header.is-stuck .nav-pill a:hover{background:var(--ink);color:#fff;}
@keyframes ci-drop{from{transform:translateY(-100%);opacity:0;}to{transform:translateY(0);opacity:1;}}

.hero-art svg{width:100%;height:100%;display:block;}
.figure-card svg,.equip-visual svg,.dark-figure svg{display:block;}

/* pagination */
.pagination{display:flex;gap:8px;flex-wrap:wrap;}
.pagination .page-numbers{
  display:grid;place-items:center;min-width:40px;height:40px;padding:0 12px;
  border-radius:var(--pill);background:var(--paper);border:1px solid var(--line);
  font-size:.9rem;font-weight:600;
}
.pagination .page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink);}

/* nav menu list normalisation (wp_nav_menu output) */
.nav-pill ul{display:contents;}
.nav-pill li{display:block;}

/* ---------- 23. Mobile hero refinements ---------- */
@media (max-width:680px){
  .hero-frame{min-height:0;}
  .hero-inner{padding-top:96px;gap:22px;}
  .hero-copy .d1{font-size:clamp(2rem,8.6vw,2.6rem);}
  .hero-sub{font-size:.96rem;margin-top:12px;}
  .hero-ctas{margin-top:20px;gap:8px;}
  .hero-ctas .btn{width:100%;justify-content:space-between;}
  .hero-side{padding:18px;}
  .hero-side p{font-size:.85rem;}
  .hero-stat{margin-top:12px;padding-top:12px;}
  .panel{border-radius:var(--r-lg);}
  .dark-block{border-radius:var(--r-lg);}
  .footer-panel{border-radius:var(--r-lg);}
  .hero-frame{border-radius:var(--r-lg);}
  .example-q{font-size:1.9rem;}
  .step h3 .step-num{min-width:34px;height:30px;margin-right:10px;}
}
@media (max-width:680px){
  .hero-scrim{
    background:
      linear-gradient(to bottom,rgba(6,18,11,.68) 0%,rgba(6,18,11,.34) 34%,rgba(6,18,11,.52) 64%,rgba(6,18,11,.9) 100%);
  }
  .hero-sub{color:rgba(255,255,255,.9);}
}
@media (max-width:680px){
  .spec{min-width:0;font-size:.88rem;}
  .spec caption{padding:14px 16px;font-size:.68rem;letter-spacing:.04em;}
  .spec th,.spec td{padding:12px 14px;}
  .spec tbody th{width:auto;}
  .spec-wrap > div[style]{padding:0 16px 16px!important;}
  .split[style]{gap:20px!important;}
}

/* ---------- 25. Scoreboard tool ---------- */
.sb-panel{
  position:relative;
  background:linear-gradient(160deg,var(--green-deep) 0%,#0a2a1a 100%);
  color:#fff;
  border-radius:var(--r-xl);
  padding:clamp(20px,3.4vw,34px);
  box-shadow:var(--shadow-lg);
}
.sb-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:clamp(16px,2.6vw,26px);}
.sb-status{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  border-radius:var(--pill);padding:7px 16px;
  font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.sb-status-dot{width:7px;height:7px;border-radius:50%;background:var(--lime);}
.sb-panel.is-winner .sb-status{background:var(--corn);border-color:var(--corn);color:var(--ink);}
.sb-panel.is-winner .sb-status-dot{background:var(--ink);}
.sb-icon-btn{
  width:42px;height:42px;border-radius:50%;flex:0 0 42px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  display:grid;place-items:center;color:#fff;
  transition:background .18s ease;
}
.sb-icon-btn:hover{background:rgba(255,255,255,.22);}
.sb-icon-btn svg{width:17px;height:17px;}

.sb-teams{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(10px,2.4vw,26px);align-items:center;}
.sb-vs{font-family:var(--f-display);font-weight:700;font-size:.8rem;color:rgba(255,255,255,.4);letter-spacing:.04em;}
.sb-team{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);padding:clamp(18px,2.6vw,28px) clamp(14px,2vw,22px);
  text-align:center;
}
.sb-team--a{box-shadow:inset 0 3px 0 var(--lime);}
.sb-team--b{box-shadow:inset 0 3px 0 var(--corn);}
.sb-name-label{display:block;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.5);margin-bottom:10px;}
.sb-name{
  width:100%;max-width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.22);
  color:#fff;text-align:center;font-family:var(--f-display);font-weight:600;font-size:1.05rem;
  letter-spacing:-.01em;padding:4px 4px 8px;margin-bottom:clamp(10px,2vw,18px);
}
.sb-name:focus-visible{outline:2px solid var(--lime);outline-offset:4px;border-radius:6px;}
.sb-score{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(3.2rem,9vw,5.6rem);line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.sb-team--a .sb-score{color:var(--lime);}
.sb-team--b .sb-score{color:var(--corn);}
.sb-controls{display:flex;justify-content:center;gap:10px;margin-top:clamp(14px,2vw,20px);}
.sb-btn{
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--f-display);font-weight:700;font-size:1.5rem;line-height:1;
  background:#fff;color:var(--ink);
  transition:transform .16s ease,background .16s ease,opacity .16s ease;
}
.sb-btn:hover{transform:translateY(-2px);}
.sb-btn:active{transform:translateY(0) scale(.96);}
.sb-btn--minus{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.24);}
.sb-btn:disabled{opacity:.35;pointer-events:none;}

.sb-bottom{
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  margin-top:clamp(20px,3vw,30px);padding-top:clamp(18px,2.6vw,26px);
  border-top:1px solid rgba(255,255,255,.14);
}
.sb-round{display:flex;align-items:center;gap:10px;font-size:.85rem;color:rgba(255,255,255,.7);font-weight:600;}
.sb-round b{font-family:var(--f-display);color:#fff;font-size:1.05rem;font-variant-numeric:tabular-nums;}
.sb-round-btn{
  width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  color:#fff;display:grid;place-items:center;font-size:.9rem;font-weight:700;line-height:1;
}
.sb-round-btn:hover{background:rgba(255,255,255,.22);}
.sb-hint{text-align:center;margin-top:14px;}
.sb-settings{
  display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,28px);flex-wrap:wrap;
  margin-top:clamp(18px,2.6vw,26px);
}
.sb-setting{display:flex;align-items:center;gap:10px;font-size:.8rem;font-weight:600;color:rgba(255,255,255,.7);}
.sb-setting-label{letter-spacing:.06em;text-transform:uppercase;font-size:.68rem;font-weight:700;}
.sb-seg{display:inline-flex;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:3px;gap:2px;}
.sb-seg-btn{
  min-width:38px;padding:5px 12px;border-radius:999px;border:0;background:transparent;
  color:rgba(255,255,255,.72);font-family:var(--f-display);font-size:.9rem;font-weight:700;
  font-variant-numeric:tabular-nums;line-height:1.2;cursor:pointer;
}
.sb-seg-btn:hover{color:#fff;}
.sb-seg-btn.is-active{background:var(--lime);color:var(--ink);}
.sb-seg-btn:focus-visible{outline:2px solid var(--lime);outline-offset:2px;}
.sb-check{cursor:pointer;user-select:none;}
.sb-check input{width:16px;height:16px;accent-color:var(--lime);cursor:pointer;}

.sb-panel:fullscreen,.sb-panel.is-fullscreen{
  border-radius:0;min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(24px,5vw,60px);
}
.sb-panel:fullscreen .sb-score,.sb-panel.is-fullscreen .sb-score{font-size:clamp(4rem,14vw,9rem);}
.sb-panel:fullscreen .sb-teams,.sb-panel.is-fullscreen .sb-teams{max-width:1100px;margin-inline:auto;width:100%;}

@media (max-width:680px){
  .sb-teams{grid-template-columns:1fr;}
  .sb-vs{display:none;}
  .sb-btn{width:48px;height:48px;font-size:1.3rem;}
}

/* ---------- 26. Score sheet ---------- */
.scoresheet-teams{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:20px;}
.team-name-input{
  width:100%;background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:12px 16px;font-family:var(--f-display);font-size:1.05rem;font-weight:600;color:var(--ink);letter-spacing:-.02em;
}
.team-name-input:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.scoresheet-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;}
table.scoresheet{min-width:520px;font-size:.95rem;width:100%;}
table.scoresheet caption{
  text-align:left;padding:18px 22px;background:var(--paper);
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--muted);
  border-bottom:1px solid var(--line);
}
table.scoresheet thead th{
  background:var(--green-deep);color:#fff;font-weight:600;font-size:.8rem;
  letter-spacing:.05em;text-transform:uppercase;padding:14px 18px;text-align:left;
}
table.scoresheet thead th:not(:first-child){text-align:right;}
table.scoresheet td,table.scoresheet th{padding:9px 18px;border-bottom:1px solid var(--line);text-align:right;}
table.scoresheet tbody td:first-child{text-align:left;font-weight:700;color:var(--muted);width:70px;}
table.scoresheet tbody tr:nth-child(even){background:#fbfbf9;}
table.scoresheet input[type="number"]{
  width:66px;text-align:right;background:#fff;border:1px solid var(--line-2);border-radius:8px;
  padding:8px 10px;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);font-size:.95rem;
}
table.scoresheet input[type="number"]:focus-visible{outline:2px solid var(--green);outline-offset:1px;}
table.scoresheet .cell-total{font-variant-numeric:tabular-nums;font-weight:700;color:var(--green);}
table.scoresheet tfoot td{padding:16px 18px;border-top:2px solid var(--ink);border-bottom:0;font-weight:700;}
table.scoresheet tfoot td:first-child{color:var(--ink);}
table.scoresheet tfoot .cell-total{color:var(--green);font-size:1.1rem;}
table.scoresheet--blank tbody td{height:40px;}
.scoresheet-toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}

@media (max-width:680px){
  .scoresheet-teams{grid-template-columns:1fr;}
  table.scoresheet{min-width:0;font-size:.86rem;}
  table.scoresheet caption{padding:14px 16px;font-size:.68rem;letter-spacing:.04em;}
  table.scoresheet td,table.scoresheet th{padding:8px 10px;}
  table.scoresheet input[type="number"]{width:48px;padding:6px 8px;}
}

/* ---------- 27. Buying guide (comparison table + product cards) ---------- */
.rank-wrap{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;}
.rank-scroll{overflow-x:auto;}
table.rank{min-width:680px;width:100%;font-size:.92rem;}
table.rank caption{
  text-align:left;padding:18px 22px;background:var(--paper);
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--muted);
  border-bottom:1px solid var(--line);
}
table.rank thead th{
  background:var(--green-deep);color:#fff;font-weight:600;font-size:.78rem;
  letter-spacing:.05em;text-transform:uppercase;padding:14px 20px;text-align:left;
}
table.rank td,table.rank th{padding:16px 20px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;}
table.rank tbody tr:nth-child(even){background:#fbfbf9;}
table.rank tbody tr:last-child td,table.rank tbody tr:last-child th{border-bottom:0;}
.rank-name{font-family:var(--f-display);font-weight:700;font-size:1rem;letter-spacing:-.01em;color:var(--ink);display:block;}
.rank-tag{display:block;font-size:.78rem;color:var(--muted);margin-top:2px;font-weight:500;}
.rank-cta{white-space:nowrap;text-align:right;}
.rank-cta .btn{padding:7px 7px 7px 16px;font-size:.84rem;}
.rank-cta .btn .ico{width:26px;height:26px;flex:0 0 26px;}

.prod-card{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(24px,3.4vw,38px);margin-top:26px;
}
.prod-card:first-child{margin-top:0;}
.prod-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:6px;}
.prod-badge{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--corn);color:var(--ink);
  border-radius:var(--pill);padding:6px 14px;
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
}
.prod-name{font-family:var(--f-display);font-weight:700;font-size:1.35rem;letter-spacing:-.024em;margin-top:14px;}
.prod-photo-wrap{display:block;}
.prod-photo{
  display:block;width:100%;max-width:260px;aspect-ratio:1/1;object-fit:cover;
  border:1px solid var(--line);border-radius:var(--r-md);background:#fff;margin-bottom:18px;
}
.prod-specs{margin-top:20px;}
.pros-cons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:20px;}
.pc-box{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px;}
.pc-box h3,.pc-box h4{font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;margin-bottom:12px;}
.pc-pros h3,.pc-pros h4{color:var(--green);}
.pc-cons h3,.pc-cons h4{color:var(--clay);}
.pc-box ul{display:grid;gap:9px;}
.pc-box li{display:flex;gap:9px;align-items:flex-start;font-size:.9rem;line-height:1.55;color:var(--ink-2);}
.pc-box li svg{flex:0 0 14px;width:14px;height:14px;margin-top:3px;}
.pc-pros li svg{color:var(--green);}
.pc-cons li svg{color:var(--clay);}
.best-for{
  margin-top:16px;padding:14px 16px;background:var(--green-soft);
  border-radius:var(--r-sm);font-size:.9rem;line-height:1.55;color:var(--green-deep);
}
.best-for b{font-weight:700;}
/* Icon sizing guards: theme SVGs ship without width/height attrs */
.best-for svg{width:16px;height:16px;flex:0 0 16px;vertical-align:-3px;margin-right:6px;}
.prod-badge svg{width:14px;height:14px;flex:0 0 14px;}
table.rank td svg,table.spec td svg{width:15px;height:15px;flex:0 0 15px;vertical-align:-3px;}
.panel > ul > li svg{width:15px;height:15px;flex:0 0 15px;margin-top:4px;}
.explore-card b svg{width:15px;height:15px;flex:0 0 15px;vertical-align:-3px;}
.prod-cta{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.prod-cta .small{color:var(--muted-2);}

.price-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px;}
.price-tier{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:22px;}
.price-tier .tiny{color:var(--muted-2);}
.price-tier b{display:block;font-family:var(--f-display);font-size:1.1rem;letter-spacing:-.02em;margin-top:6px;}
.price-tier p{margin-top:10px;font-size:.86rem;line-height:1.55;color:var(--muted);}

@media (max-width:680px){
  .pros-cons{grid-template-columns:1fr;}
  .price-tiers{grid-template-columns:1fr;}
  table.rank{min-width:0;font-size:.85rem;}
  table.rank td,table.rank th{padding:12px 14px;}
  .rank-cta{text-align:left;}
}

@media print{
  body.ci-printing .site-header,
  body.ci-printing .site-footer,
  body.ci-printing .nav-drawer,
  body.ci-printing .page-hero{display:none!important;}
  body.ci-printing .section{display:none!important;}
  body.ci-printing .section.ci-print-active{display:block!important;margin:0!important;}
  body.ci-printing .section.ci-print-active .panel{box-shadow:none;border:0;padding:0;border-radius:0;}
  body.ci-printing table.scoresheet input{border-color:#000;background:#fff;color:#000;}
}

/* ---------- 24. Mega menu dropdown ---------- */
.nav-pill li{position:relative;}

.nav-pill .menu-item-has-children > a{padding-right:26px;}

/* Invisible hover bridge: keeps :hover alive across the gap between the
   pill item and the floating dropdown, so the pointer never "loses" the
   parent while travelling down into the sub-menu. Out of flow (absolute),
   so it never affects the flex row's layout. */
.nav-pill .menu-item-has-children::before{
  content:"";
  position:absolute;
  top:100%;left:0;
  width:100%;height:14px;
}

.nav-pill .menu-item-has-children > a::after{
  content:"";position:absolute;right:10px;top:50%;
  width:6px;height:6px;margin-top:-5px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);opacity:.7;
  transition:transform .18s ease,margin-top .18s ease;
}
.nav-pill .menu-item-has-children:hover > a::after,
.nav-pill .menu-item-has-children:focus-within > a::after{transform:rotate(225deg);margin-top:-2px;}

.nav-pill .sub-menu{
  position:absolute;top:calc(100% + 12px);left:50%;
  transform:translateX(-50%) translateY(6px);
  min-width:230px;background:var(--card);
  border-radius:var(--r-md);box-shadow:var(--shadow-lg);
  padding:8px;display:grid;gap:2px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;
  z-index:60;
}
.nav-pill .menu-item-has-children:hover > .sub-menu,
.nav-pill .menu-item-has-children:focus-within > .sub-menu{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
  transition:opacity .16s ease,transform .16s ease;
}
.nav-pill .sub-menu a{
  display:block;padding:10px 14px;border-radius:var(--r-sm);
  color:var(--ink-2);font-size:.86rem;font-weight:500;
  white-space:nowrap;background:transparent;
}
.nav-pill .sub-menu a:hover,.nav-pill .sub-menu a:focus{background:var(--green-soft);color:var(--green);}
.nav-pill .sub-menu .current-menu-item > a{background:var(--green-soft);color:var(--green);}

/* mobile drawer accordion */
.nav-drawer li.menu-item-has-children{position:relative;}
.nav-drawer li.menu-item-has-children > a{padding-right:56px;}
.nav-drawer .submenu-toggle{
  position:absolute;top:6px;right:6px;width:44px;height:44px;
  display:grid;place-items:center;
}
.nav-drawer .submenu-toggle svg{width:14px;height:14px;transition:transform .2s ease;color:var(--ink-2);}
.nav-drawer li.is-open .submenu-toggle svg{transform:rotate(180deg);}

.nav-drawer .sub-menu{
  display:grid;gap:4px;overflow:hidden;
  max-height:0;opacity:0;margin-top:0;padding-left:6px;
  visibility:hidden;
  transition:max-height .28s ease,opacity .2s ease,margin-top .28s ease,visibility 0s linear .28s;
}
.nav-drawer li.is-open > .sub-menu{
  max-height:900px;opacity:1;margin-top:6px;
  visibility:visible;
  transition:max-height .28s ease,opacity .2s ease,margin-top .28s ease;
}
.nav-drawer .sub-menu a{
  background:transparent;border:0;padding:10px 14px;
  font-size:.95rem;font-weight:500;color:var(--ink-2);
}
.nav-drawer .sub-menu a:hover{color:var(--green);}

@media (max-width:900px){
  .nav-pill .sub-menu{display:none;}
}