/* Grizz Cup — shared stylesheet. Linked by EVERY page (money, root mirror, EEAT, utility, 404)
   so the look cannot drift. Design system derived from the site logo + the legacy 2025 crest:
   varsity forest green, puck black, ice white, gold stick-tan, and the goalie-mask breathing-hole
   dot grid as the repeating motif. Reserved CTA scarlet is used on NOTHING but .cta. */

:root{
  --green:#0b5d33;        /* brand: legacy varsity green */
  --green-dk:#073d22;
  --green-lt:#e7f0ea;
  --gold:#c9a227;         /* legacy crossed-stick tan */
  --gold-lt:#f3e6bd;
  --ink:#141715;          /* puck black */
  --ink-2:#4a534d;
  --ice:#f2f6f7;          /* rink ice */
  --paper:#fff;
  --line:#d8e0dc;
  --cta:#d81e28;          /* ⛔ RESERVED. Complement of the forest green. .cta ONLY.
                             Never on headings, ranks, ribbons, bonuses, links, borders or icons. */
  --cta-dk:#ad161f;
  --wrap:1180px;
  --r:4px;                /* squared-off, athletic. Not pill-shaped. */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.65 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
img{max-width:100%;height:auto}
a{color:var(--green);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--green-dk)}

/* ---------- display type: condensed varsity-adjacent, matches the logo lockup ---------- */
h1,h2,h3,h4,.dsp{
  font-family:"Barlow Condensed","Arial Narrow",Inter,system-ui,sans-serif;
  font-weight:700;letter-spacing:.01em;line-height:1.12;color:var(--ink);margin:0 0 .5em;
  text-transform:none;
}
h1{font-size:clamp(28px,4.6vw,44px)}
h2{font-size:clamp(24px,3.4vw,33px);margin-top:0}
h3{font-size:clamp(19px,2.3vw,23px)}
h4{font-size:18px}
p,li{margin:0 0 1em}
.lede{font-size:clamp(17px,2vw,19px);color:var(--ink-2);margin:0 0 14px;max-width:70ch}

/* ---------- REPEATING MOTIF: the mask breathing-hole dot grid ----------
   Lifted straight from the goalie mask in the logo. Used as the section rule so the
   page reads as one system rather than a stack of unrelated blocks. */
.dots{
  height:9px;margin:0;border:0;
  background-image:radial-gradient(var(--green) 1.6px,transparent 1.7px);
  background-size:13px 9px;background-position:0 50%;
  opacity:.5;
}
/* rink line: the thin red/blue markings off the legacy ice background */
.rink{height:3px;border:0;margin:0;background:linear-gradient(90deg,var(--green) 0 22%,var(--gold) 22% 30%,var(--line) 30% 100%)}

/* section shell */
section{padding-block:34px 6px;border-top:1px solid var(--line)}
section:first-of-type{border-top:0}
section > .wrap > h2:first-child{margin-bottom:.35em}

/* ---------- masthead. Light/ice ONLY: the wordmark is dark green and dies on a dark bar. ---------- */
.mast{background:var(--paper);border-bottom:3px solid var(--green);position:static} /* non-sticky by rule */
.mast .wrap{display:flex;align-items:center;gap:18px;padding:12px 20px}
.mast .brand{display:flex;align-items:center;flex:0 0 auto}
.mast .brand img{height:64px;width:auto;display:block}
.nav{margin-left:auto;display:flex;align-items:center;gap:20px}
.nav a{
  font-family:"Barlow Condensed",Inter,sans-serif;font-weight:600;font-size:17px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--ink);text-decoration:none;
  white-space:nowrap;   /* condensed caps must never wrap mid-label */
}
.nav a:hover{color:var(--green)}
.burger{display:none;margin-left:auto;background:none;border:1.5px solid var(--line);border-radius:var(--r);
  padding:8px 10px;cursor:pointer;line-height:0}
.burger span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0}

/* ---------- hero: compact by design so the toplist clears the fold on BOTH views ---------- */
.hero{padding-block:22px 14px}   /* ⛔ padding-BLOCK only: the shorthand would clobber .wrap's 0 20px inline padding */
.byline{display:flex;align-items:center;gap:13px;margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--line)}
.byline img{width:52px;height:52px;border-radius:50%;flex:0 0 auto;border:2px solid var(--green)}
.byline .who{font-family:"Barlow Condensed",Inter,sans-serif;font-weight:700;font-size:17px;line-height:1.25}
.byline .who a{color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--gold)}
.byline .role{display:block;font-weight:500;font-size:14.5px;color:var(--ink-2);text-transform:none}
.byline .meta{margin-top:3px;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--ink-2)}
.byline .meta span{display:inline-flex;align-items:center;gap:5px}
.byline .meta span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}
.jump{display:inline-block;margin:14px 0 0;font-family:"Barlow Condensed",Inter,sans-serif;font-weight:700;
  font-size:16px;text-transform:uppercase;letter-spacing:.06em;color:var(--green);text-decoration:none;
  border-bottom:2px solid var(--gold)}

/* ================= TOPLIST: rows of side-by-side cards =================
   Operator brief: "rows of the side-by-side cards, but still having all prominent and
   necessary details." 2-up rows on desktop, 1-up on mobile, every detail retained. */
.toplist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:18px 0 8px}
.bk{
  position:relative;display:grid;
  grid-template-columns:52px 1fr;grid-template-areas:"rank head" "spec spec" "cta cta";
  gap:10px 12px;padding:14px 14px 14px 0;
  background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--green);
  border-radius:var(--r);
}
.bk.top{border-left-color:var(--gold);box-shadow:0 1px 0 var(--gold-lt),0 6px 18px rgba(11,93,51,.07)}
/* rank in a roundel, echoing the legacy circular crest */
.bk .rank{
  grid-area:rank;align-self:start;justify-self:center;margin-top:2px;
  width:38px;height:38px;border-radius:50%;background:var(--green);color:#fff;
  display:grid;place-items:center;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:19px;
}
.bk.top .rank{background:var(--ink);box-shadow:0 0 0 2px var(--gold)}
.bk .head{grid-area:head;min-width:0;padding-right:4px}
.bk .ribbon{
  display:inline-block;margin:0 0 5px;padding:2px 8px;background:var(--green-lt);color:var(--green-dk);
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:12.5px;text-transform:uppercase;
  letter-spacing:.07em;border-radius:2px;
}
.bk.top .ribbon{background:var(--gold-lt);color:#6b5310}
/* fixed chip box so square logos (BetOnline 512x512) and wide wordmarks (150x80)
   both render at a comparable optical size instead of the square one shrinking to a dot */
.bk .chip{background:#fff;border:1px solid var(--line);border-radius:3px;
  width:112px;height:42px;display:grid;place-items:center;margin:0 0 6px;padding:4px}
.bk .chip img{max-height:34px;max-width:100px;width:auto;height:auto;display:block}
/* paired cards in a row: FIXED head height so the bonus panels share a baseline.
   min-height was not enough - a wider ribbon nudged one card 7px out of line. */
.bk .head{min-height:126px}   /* ribbon 22 + chip 48 + name 23 + rating 20 + slack. NEVER overflow:hidden here: it clipped the star rating. */
.bk .name{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:21px;line-height:1.1;margin:0}
.bk .rate{display:flex;align-items:baseline;gap:7px;margin-top:3px;font-size:13.5px;color:var(--ink-2)}
.bk .stars{color:var(--gold);letter-spacing:1px;font-size:15px}

/* spec block: bonus is the eye-catcher, in GOLD on the dark puck panel (never the reserved CTA red) */
.bk .spec{grid-area:spec;margin:2px 0 0}
.bk .bonus{background:var(--ink);border-radius:3px;padding:10px 12px}
.bk .bonus .lbl{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.14em;color:#9fb0a6;margin:0 0 1px;display:block;
}
.bk .bonus .amt{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:clamp(24px,3vw,29px);
  line-height:1.05;color:var(--gold);margin:0;
}
.bk .bonus .code{display:block;margin-top:3px;font-size:13px;color:#cfdad3}
.bk .bonus .code b{color:#fff;font-weight:600;letter-spacing:.03em}
.bk .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:9px 0 0;
  border:1px solid var(--line);border-radius:3px;overflow:hidden}
.bk .facts div{padding:7px 9px;border-right:1px solid var(--line);min-width:0}
.bk .facts div:last-child{border-right:0}
.bk .facts dt{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:11px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-2);margin:0}
.bk .facts dd{margin:1px 0 0;font-weight:600;font-size:14.5px}
.tier{display:inline-block;margin:8px 6px 0 0;padding:3px 8px;border:1px solid var(--green);border-radius:2px;
  font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:12.5px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--green-dk);background:var(--green-lt)}
.tier.warn{border-color:var(--gold);background:var(--gold-lt);color:#6b5310}
.note{margin:7px 0 0;font-size:13px;color:var(--ink-2)}

/* ---------- CTA: the ONLY place --cta appears. Squared, athletic, notched corner. ---------- */
.bk .ctawrap{grid-area:cta;margin-top:10px}
.cta{
  display:block;width:100%;text-align:center;padding:13px 18px;
  background:var(--cta);color:#fff;text-decoration:none;border:0;cursor:pointer;
  font-family:"Barlow Condensed",Inter,sans-serif;font-weight:700;font-size:18px;
  text-transform:uppercase;letter-spacing:.08em;
  border-radius:var(--r);
  clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,11px 100%,0 calc(100% - 11px));
}
.cta:hover{background:var(--cta-dk);color:#fff}
.cta.sm{display:inline-block;width:auto;padding:10px 20px;font-size:16px}
.nav .cta{padding:9px 16px;font-size:15px;border-radius:var(--r)}
.terms{margin:6px 0 0;font-size:12px;color:var(--ink-2);text-align:center}

/* ---------- tables ---------- */
.tw{overflow-x:auto;margin:14px 0 18px;border:1px solid var(--line);border-radius:var(--r)}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:660px}
thead th{background:var(--green);color:#fff;font-family:"Barlow Condensed",sans-serif;font-weight:600;
  font-size:13px;text-transform:uppercase;letter-spacing:.07em;text-align:left;padding:10px 12px;white-space:nowrap}
tbody td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:top}
tbody tr:nth-child(even) td{background:var(--ice)}
tbody td:first-child{font-weight:600}

/* ---------- reviews / prose blocks ---------- */
.rev{border:1px solid var(--line);border-left:5px solid var(--gold);border-radius:var(--r);padding:16px 18px;margin:0 0 18px;background:var(--paper)}
.rev h3{margin-bottom:.35em}
.scores{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:12px 0}
.scores div{background:var(--ice);border-radius:3px;padding:8px 10px}
.scores dt{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-2);margin:0}
.scores dd{margin:2px 0 0;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:19px;color:var(--green-dk)}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:12px 0 0}
.pc h4{margin-bottom:.3em}
.pc ul{margin:0;padding-left:0;list-style:none}
.pc li{position:relative;padding-left:22px;margin-bottom:.5em;font-size:15.5px}
.pc .pro li::before,.pc .con li::before{position:absolute;left:0;top:.05em;font-weight:700}
.pc .pro li::before{content:"+";color:var(--green)}
.pc .con li::before{content:"\2013";color:var(--gold)}

.panel{background:var(--ice);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin:14px 0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:14px 0}
.stats div{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--green);border-radius:var(--r);padding:12px 14px}
.stats b{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:30px;line-height:1;color:var(--green-dk)}
.stats span{font-size:13.5px;color:var(--ink-2)}
ol.steps{counter-reset:s;list-style:none;padding-left:0;margin:14px 0}
ol.steps li{counter-increment:s;position:relative;padding-left:46px;margin-bottom:1em}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:50%;
  background:var(--green);color:#fff;display:grid;place-items:center;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:16px}
.faq{border-top:1px solid var(--line)}
.faq h3{margin:16px 0 .3em}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#c3cec7;margin-top:34px;padding:30px 0 24px;font-size:14.5px}
footer h4{color:#fff;font-size:15px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.6em}
footer a{color:#e5ece8}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:26px}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:.45em}
.rg{border-top:1px solid #2c332e;margin-top:22px;padding-top:16px;font-size:13px;color:#9aa8a0}
.rg strong{color:#fff}
.disc{margin-top:12px;font-size:12.5px;color:#8b9992}

/* ================= mobile: SAME content, reflowed. Never display:none on real content. ========= */
@media (max-width:860px){
  .toplist{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  body{font-size:16.5px}
  .nav{display:none;order:3;width:100%;flex-direction:column;align-items:stretch;gap:0;
    border-top:1px solid var(--line);margin:10px -20px -12px;padding:4px 20px 12px}
  .nav.open{display:flex}
  .nav a{padding:12px 0;border-bottom:1px solid var(--line)}
  .nav .cta{margin-top:12px;text-align:center}
  .burger{display:block}
  .mast .wrap{flex-wrap:wrap}
  .mast .brand img{height:48px}
  /* HERO COMPACTION (rule 1): the toplist must clear a 640-700px mobile fold.
     Achieved by shrinking the hero for mobile, never by hiding real content. */
  .hero{padding-block:10px 6px}
  h1{font-size:clamp(23px,6.2vw,30px)}
  .hero .lede{font-size:16px;margin-bottom:8px}
  .byline{gap:10px;margin-top:9px;padding-top:9px}
  .byline img{width:42px;height:42px}
  .byline .who{font-size:16px}
  .byline .role{font-size:13.5px}
  .byline .meta{margin-top:2px;gap:3px 11px;font-size:12px}
  .jump{margin-top:9px;font-size:15px}
  section{padding-block:20px 6px}
  #toplist h2{font-size:22px;margin-bottom:.25em}
  #toplist > .wrap > p{font-size:15px;margin-bottom:.7em}
  .toplist{margin-top:10px;gap:14px}
  /* cards centre-align on mobile and the CTA goes full width */
  .bk{grid-template-columns:1fr;grid-template-areas:"rank" "head" "spec" "cta";text-align:center;
      padding:14px;border-left-width:1px;border-top:5px solid var(--green)}
  .bk.top{border-top-color:var(--gold)}
  .bk .rank{justify-self:center}
  .bk .head{padding:0;height:auto;overflow:visible}   /* single column, nothing to align against */
  .bk .chip{margin-inline:auto}
  .bk .rate{justify-content:center}
  /* attribute pills sit BELOW the bonus amount, CTA last (hausstl lesson) */
  .bk .facts{grid-template-columns:1fr 1fr;text-align:left}
  .bk .facts div:nth-child(2){border-right:0}
  .bk .facts div:nth-child(3){grid-column:1/-1;border-top:1px solid var(--line)}
  .pc{grid-template-columns:1fr}
  .pc li{text-align:left}
  footer .cols{grid-template-columns:1fr}
}