/* ================================================================
   www.terramedia.ca — "north-ledger" skin
   Concept modelled on the gradecasinos.com single-page money-guide
   layout (hero band → showcase → long-form sections → tables → FAQ),
   palette re-derived for the Canadian market: midnight navy + maple
   red + warm paper + antique gold, sage-green CTA.
   ================================================================ */

*,*::before,*::after{box-sizing:border-box}

:root{
  --nv:#101c2c; --nv-d:#0a1421; --nv-l:#1d3350;
  --red:#c8102e; --red-d:#9c0c23;
  --gold:#d9a441; --gold-d:#a97c22;
  --paper:#f8f6f1; --line:#e3ddd1; --line-d:#cfc7b6;
  --ink:#16202c; --mut:#5c6b7a;
  --cta:#2f7d5c; --cta-h:#25664a;
  --w:1180px; --pad:20px;
  --sans:"Inter","Helvetica Neue",Helvetica,Arial,"Segoe UI",Roboto,sans-serif;
}

html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--nv-l)}
h1,h2,h3,h4{font-weight:800;line-height:1.22;color:var(--nv);margin:0 0 12px;letter-spacing:-.01em}
h2{font-size:29px;margin-top:6px}
h3{font-size:21px}
h4{font-size:17px}
p{margin:0 0 15px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--pad)}
.nrw{max-width:860px}

/* ---------- header ---------- */
.hd{background:var(--nv);position:sticky;top:0;z-index:50;
  box-shadow:0 1px 0 rgba(255,255,255,.08),0 6px 18px rgba(10,20,33,.18)}
.hd__in{max-width:var(--w);margin:0 auto;padding:11px var(--pad);
  display:flex;align-items:center;gap:14px}
.hd__logo{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.hd__logo img{width:40px;height:40px;border-radius:9px}
.hd__wm{display:block;font-weight:900;font-size:21px;letter-spacing:-.02em;color:#fff;line-height:1.05}
.hd__wm i{font-style:normal;color:var(--gold)}
.hd__wm small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#8fa2b6;margin-top:2px}
.hd__toggle{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.hd__burger{display:none;align-items:center;gap:8px;cursor:pointer;color:#fff;
  font-weight:700;font-size:14px;border:1px solid rgba(255,255,255,.28);
  border-radius:8px;padding:7px 12px}
.hd__burger span{display:block;width:16px;height:2px;background:#fff;position:relative}
.hd__burger span::before,.hd__burger span::after{content:"";position:absolute;left:0;
  width:16px;height:2px;background:#fff}
.hd__burger span::before{top:-5px}.hd__burger span::after{top:5px}
.nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav a{display:block;padding:8px 11px;color:#dbe4ee;text-decoration:none;font-size:14.5px;
  font-weight:700;border-radius:7px}
.nav a:hover{background:rgba(255,255,255,.09);color:#fff}

/* ---------- hero ---------- */
.hero{background:var(--nv);color:#fff;position:relative;overflow:hidden;
  border-bottom:3px solid var(--gold)}
.hero__bg{position:absolute;inset:0;left:38%;background-size:cover;background-position:center left;
  opacity:.95}
.hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--nv) 0%,rgba(16,28,44,.72) 26%,rgba(16,28,44,0) 62%)}
.hero__in{position:relative;max-width:var(--w);margin:0 auto;padding:52px var(--pad) 46px}
.hero__col{max-width:620px}
.hero h1{color:#fff;font-size:41px;margin:0 0 14px;letter-spacing:-.025em}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero__lead{font-size:17px;color:#d5dee8;margin:0 0 18px}
.pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:5px 13px;
  font-size:13px;color:#cdd8e4;margin:0 0 16px}
.pill b{color:#fff}
.hero__facts{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px;padding:0;list-style:none}
.hero__facts li{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:9px;padding:8px 13px;font-size:13.5px;color:#e6edf5}
.hero__facts b{color:var(--gold)}

/* ---------- generic blocks ---------- */
.sec{padding:34px 0}
.sec--paper{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lede{font-size:17.5px;color:#33414f}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center}
.fig{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper)}
.fig img{width:100%}
.fig figcaption{font-size:12.5px;color:var(--mut);padding:8px 12px;border-top:1px solid var(--line);
  background:#fff}
.note{border-left:4px solid var(--red);background:#fdf4f4;border-radius:0 10px 10px 0;
  padding:13px 16px;margin:0 0 18px;font-size:15px}
.note b{color:var(--red-d)}
.tip{border-left:4px solid var(--cta);background:#f0f7f3;border-radius:0 10px 10px 0;
  padding:13px 16px;margin:0 0 18px;font-size:15px}
ul.tick{list-style:none;padding:0;margin:0 0 16px}
ul.tick li{position:relative;padding:0 0 0 26px;margin-bottom:8px}
ul.tick li::before{content:"";position:absolute;left:2px;top:8px;width:11px;height:11px;
  border-radius:3px;background:var(--gold)}
ul.cross li::before{background:var(--red)}

/* ---------- showcase (toplist) ---------- */
.tl{margin:0 0 8px}
.tl__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:6px}
.tl__lead{color:var(--mut);font-size:15.5px;margin:0 0 14px}
.fi{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.filters label{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;
  border:1px solid var(--line-d);border-radius:999px;background:#fff;cursor:pointer;
  font-size:14px;font-weight:700;color:var(--nv)}
.filters label:hover{border-color:var(--gold)}
.filters label b{font-weight:500;color:var(--mut);font-size:13px}
#f-cad:checked~.filters label[for=f-cad],
#f-int:checked~.filters label[for=f-int],
#f-cry:checked~.filters label[for=f-cry],
#f-fast:checked~.filters label[for=f-fast]{background:var(--nv);color:#fff;border-color:var(--nv)}
#f-cad:checked~.filters label[for=f-cad] b,
#f-int:checked~.filters label[for=f-int] b,
#f-cry:checked~.filters label[for=f-cry] b,
#f-fast:checked~.filters label[for=f-fast] b{color:#a9bbcd}

.list{list-style:none;margin:0;padding:0;counter-reset:none}
.list>li{background:#fff;border:1px solid var(--line);border-radius:12px;margin:0 0 10px;
  box-shadow:0 1px 3px rgba(16,28,44,.06);overflow:hidden}
.list>li.top{border-color:var(--gold);box-shadow:0 2px 10px rgba(217,164,65,.22)}
.row{display:grid;grid-template-columns:46px 96px minmax(150px,1fr) minmax(230px,300px) 156px;
  align-items:center;gap:14px;padding:13px 15px}
.rank{width:40px;height:44px;display:flex;align-items:center;justify-content:center;
  background:var(--nv);color:#fff;font-weight:900;font-size:16px;
  clip-path:polygon(50% 0%,100% 16%,100% 68%,50% 100%,0% 68%,0% 16%)}
.list>li.top .rank{background:var(--red);color:#fff}
.plate{width:82px;height:82px;border:1px solid var(--line);border-radius:12px;background:#fff;
  display:flex;align-items:center;justify-content:center;overflow:hidden;padding:8px}
.plate img{max-width:64px;max-height:64px;width:auto;height:auto}
.main{min-width:0}
.nm{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:6px}
.nm b{font-size:18px;font-weight:900;color:var(--nv)}
.score{display:inline-flex;align-items:center;justify-content:center;min-width:42px;padding:2px 8px;
  border-radius:6px;background:var(--nv);color:#fff;font-weight:900;font-size:13.5px}
.list>li.top .score{background:var(--red)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12.5px;font-weight:700;
  line-height:1.45;background:var(--paper);color:var(--nv);border:1px solid var(--line-d)}
.chip--eco{background:#eef3fb;color:#1b4a86;border-color:#c9d9ef}
.chip--int{background:#fdf0f2;color:#9c0c23;border-color:#f0ccd3}
.chip--cad{background:#eef7f2;color:#1f6146;border-color:#c6e2d4}
.offer{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:9px;padding:9px 13px;min-width:0}
.offer b{display:block;font-size:15px;font-weight:900;color:var(--ink)}
.offer i{display:block;font-style:normal;font-size:12.5px;color:var(--mut);margin-top:2px}
.act{display:flex;flex-direction:column;gap:6px}
.cta{display:block;text-align:center;background:var(--cta);color:#fff;text-decoration:none;
  font-weight:800;font-size:15px;padding:11px 12px;border-radius:9px;border:0;cursor:pointer}
.cta:hover{background:var(--cta-h)}
.act small{text-align:center;font-size:12px;color:var(--mut)}
.more{text-align:center;margin:14px 0 6px}
.more label{display:inline-block;cursor:pointer;border:1px solid var(--nv);color:var(--nv);
  font-weight:800;font-size:15px;padding:10px 22px;border-radius:9px;background:#fff}
.more label:hover{background:var(--nv);color:#fff}
.more label::after{content:"Show all 18 ecoPayz casinos"}
/* default: collapsed to six rows */
.list>li:nth-child(n+7){display:none}
/* any active filter, or "show all", opens the full list first … */
#tl-all:checked~.list>li,
#f-cad:checked~.list>li,
#f-int:checked~.list>li,
#f-cry:checked~.list>li,
#f-fast:checked~.list>li{display:block}
#tl-all:checked~.more label::after{content:"Show fewer casinos"}
/* … then the filters subtract (they intersect when several are on) */
#f-cad:checked~.list>li:not(.c-cad),
#f-int:checked~.list>li:not(.c-int),
#f-cry:checked~.list>li:not(.c-cry),
#f-fast:checked~.list>li:not(.c-fast){display:none}

.disclosure{font-size:12.8px;color:var(--mut);background:var(--paper);border:1px solid var(--line);
  border-radius:10px;padding:12px 15px;margin:12px 0 0;line-height:1.6}
.disclosure b{color:var(--nv)}

/* ---------- quick nav ---------- */
.qnav{background:var(--nv-l);color:#fff;border-radius:12px;padding:15px 18px;margin:26px 0 8px}
.qnav strong{display:block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);margin-bottom:9px}
.qnav ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.qnav a{display:inline-block;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  border-radius:999px;padding:5px 12px;color:#fff;text-decoration:none;font-size:13.5px;font-weight:600}
.qnav a:hover{background:var(--gold);color:var(--nv-d);border-color:var(--gold)}

/* ---------- payment strip ---------- */
.pays{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:6px 0 4px}
.pays div{background:#fff;border:1px solid var(--line);border-radius:10px;height:74px;
  display:flex;align-items:center;justify-content:center;padding:12px}
.pays img{max-height:40px;max-width:132px;width:auto}
.pays span{font-size:12px;color:var(--mut);font-weight:700}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;margin:0 0 18px;border:1px solid var(--line);border-radius:12px;background:#fff}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:14.5px}
caption{text-align:left;font-size:13px;color:var(--mut);padding:10px 14px;border-bottom:1px solid var(--line)}
th,td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
thead th{background:var(--nv);color:#fff;font-size:13.5px;letter-spacing:.02em;border-bottom:0}
tbody tr:nth-child(even){background:var(--paper)}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--nv)}

/* ---------- faq ---------- */
.faq{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;padding:14px 16px;font-weight:800;color:var(--nv);font-size:16.5px;
  list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:20px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding:0 16px 14px;color:#33414f;font-size:15.5px}
.faq .ans p:last-child{margin-bottom:0}

/* ---------- responsible / footer ---------- */
.rg{background:var(--nv-l);color:#e7eef6;border-radius:12px;padding:20px 22px}
.rg h2{color:#fff}
.rg a{color:var(--gold)}
.ft{background:var(--nv-d);color:#a9b8c8;margin-top:34px;padding:32px 0 22px;font-size:14px}
.ft h4{color:#fff;font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.ft__cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:26px}
.ft ul{list-style:none;margin:0;padding:0}
.ft li{margin-bottom:6px}
.ft a{color:#c6d3e0;text-decoration:none}
.ft a:hover{color:var(--gold)}
.ft__bar{border-top:1px solid rgba(255,255,255,.12);margin-top:24px;padding-top:16px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:12.8px;color:#8a9aac}
.age{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:2px solid var(--gold);color:var(--gold);border-radius:50%;font-weight:900;font-size:12px}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .row{grid-template-columns:40px 74px minmax(0,1fr);grid-template-areas:
    "rank plate main" "offer offer offer" "act act act";row-gap:11px}
  .rank{grid-area:rank}.plate{grid-area:plate;width:70px;height:70px}
  .main{grid-area:main}.offer{grid-area:offer}.act{grid-area:act}
  .act{flex-direction:row;align-items:center;justify-content:space-between}
  .cta{flex:1}
  .grid2{grid-template-columns:1fr}
  .ft__cols{grid-template-columns:1fr 1fr}
  .pays{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .hd__burger{display:inline-flex}
  .nav{display:none;width:100%}
  .hd__toggle:checked~.nav{display:block}
  .nav ul{flex-direction:column;padding:8px 0 4px}
  .hd__in{flex-wrap:wrap}
  .hero__bg{left:0;opacity:.32}
  .hero h1{font-size:31px}
  .hero__in{padding:38px var(--pad) 34px}
  h2{font-size:24px}
  .ft__cols{grid-template-columns:1fr}
  .pays{grid-template-columns:repeat(2,1fr)}
}