/* ---------------------------------------------------------------- tokens */
:root{
  --ink:#141a22;
  --ink-2:#1d2630;
  --ink-3:#2b3745;
  --paper:#f6f4ef;
  --paper-2:#ebe7dd;
  --brass:#c8a032;
  --brass-soft:#e4c979;
  --cyan:#3fbfae;
  --cyan-soft:#a7e2d9;
  --rule:#3a4756;
  --muted:#8a97a6;
  --pro:#2f7d63;
  --con:#9a5b3d;
  --shell:1100px;
  --gut:18px;
  --r:10px;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  font-size:17px;
  line-height:1.62;
}
img{max-width:100%;height:auto;}
a{color:#1c6a5e;}
a:hover{color:#124c44;}

/* ------------------------------------------------------------ the wrapper */
/* Longhands only — see the module docstring. */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--gut);
  padding-right:var(--gut);
}

/* ------------------------------------------------------------------ head */
.cf-top{
  background:var(--ink);
  color:var(--paper);
  border-bottom:3px solid var(--brass);
}
.cf-top__bar{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:56px;
  flex-wrap:wrap;
  padding-top:10px;
  padding-bottom:10px;
}
.cf-top__mark{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  order:1;
}
.cf-top__mark img{display:block;width:104px;height:auto;}
.cf-nav{
  display:flex;
  flex-wrap:wrap;
  gap:4px 10px;
  /* pushes the nav AND everything after it to the right; the CTA is last in
     the DOM, so it lands at the far right of the bar. */
  margin-left:auto;
  order:2;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:13px;
  letter-spacing:0;
}
.cf-nav a{
  color:var(--paper-2);
  text-decoration:none;
  padding-top:4px;padding-bottom:4px;
  border-bottom:2px solid transparent;
}
.cf-nav a:hover,.cf-nav a[aria-current="page"]{
  color:#fff;border-bottom-color:var(--brass);
}
.cf-top__cta{
  flex:0 0 auto;
  order:3;
  background:var(--brass);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:700;
  font-size:13px;
  white-space:nowrap;
  text-decoration:none;
  border-radius:var(--r);
  padding-top:8px;padding-bottom:8px;padding-left:16px;padding-right:16px;
}
.cf-top__cta:hover{background:var(--brass-soft);color:var(--ink);}

/* --------------------------------------------------------------- burger */
/* Hidden on desktop; below the breakpoint it is the only control in the row
   besides the logo, which is exactly the shape the canonical masthead gate
   budgets (logo + burger + gap + gutters). */
.cf-burger{
  display:none;
  order:3;
  margin-left:auto;
  flex:0 0 auto;
  width:40px;
  height:34px;
  cursor:pointer;
  background:transparent;
  border:1px solid var(--rule);
  border-radius:8px;
  padding-top:8px;padding-bottom:8px;padding-left:8px;padding-right:8px;
}
.cf-burger__bar{
  display:block;
  width:100%;
  height:2px;
  background:var(--paper);
  border-radius:2px;
}
.cf-burger__bar + .cf-burger__bar{margin-top:4px;}
.cf-burger[aria-expanded="true"]{border-color:var(--brass);}
.cf-burger[aria-expanded="true"] .cf-burger__bar{background:var(--brass-soft);}

/* ------------------------------------------------------------- breadcrumb */
.cf-crumb{
  background:var(--ink-2);
  color:var(--muted);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:13px;
}
.cf-crumb ol{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0;
}
.cf-crumb li+li::before{content:"/";margin-right:8px;color:var(--rule);}
.cf-crumb a{color:var(--cyan-soft);text-decoration:none;}

/* ------------------------------------------------------------------ main */
.corenest{
  display:block;
  padding-top:26px;
  padding-bottom:40px;
}
h1{
  font-size:clamp(28px,4.4vw,42px);
  line-height:1.16;
  letter-spacing:-.01em;
  margin-top:0;margin-bottom:14px;
}
h2{
  font-size:clamp(22px,3vw,29px);
  line-height:1.24;
  margin-top:40px;margin-bottom:12px;
  padding-top:10px;
  border-top:2px solid var(--ink);
}
h3{font-size:19px;line-height:1.3;margin-top:24px;margin-bottom:8px;}
p{margin-top:0;margin-bottom:15px;}
.digestcard{
  font-size:19px;
  line-height:1.55;
  border-left:5px solid var(--brass);
  background:#fff;
  padding-top:14px;padding-bottom:14px;padding-left:18px;padding-right:18px;
  border-radius:0 var(--r) var(--r) 0;
}
main ul,main ol{margin-top:0;margin-bottom:16px;padding-left:22px;}
main li{margin-bottom:7px;}
figure{margin-top:20px;margin-bottom:20px;}
figure img{
  display:block;width:90%;height:auto;margin-left:auto;margin-right:auto;
  border-radius:var(--r);box-shadow:0 2px 14px rgba(20,26,34,.16);
}
figcaption{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:13px;color:#5c6875;text-align:center;margin-top:9px;
}

/* --------------------------------------------------------------- the hero */
.cf-hero{
  background:var(--ink);
  color:var(--paper);
  border-radius:var(--r);
  padding-top:22px;padding-bottom:22px;padding-left:20px;padding-right:20px;
  margin-bottom:24px;
}
.cf-hero h1{color:#fff;}
.cf-hero__sub{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;
  color:var(--brass-soft);
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.cf-hero__grid{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;
}
.cf-hero__stat{
  flex:1 1 150px;
  background:var(--ink-3);
  border-radius:var(--r);
  border-left:4px solid var(--cyan);
  padding-top:11px;padding-bottom:11px;padding-left:13px;padding-right:13px;
}
.cf-hero__num{
  display:block;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:700;font-size:22px;color:#fff;line-height:1.1;
}
.cf-hero__lbl{
  display:block;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:12.5px;color:var(--muted);margin-top:3px;
}

/* ------------------------------------------------- widget: measuring scale */
.cf-scale{
  background:#fff;
  border:1px solid var(--paper-2);
  border-radius:var(--r);
  padding-top:16px;padding-bottom:16px;padding-left:16px;padding-right:16px;
  margin-top:20px;margin-bottom:20px;
}
.cf-scale__h{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:#5c6875;margin-bottom:14px;
}
.cf-scale__row{margin-bottom:16px;}
.cf-scale__row:last-child{margin-bottom:0;}
.cf-scale__name{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;font-weight:700;margin-bottom:6px;
}
.cf-scale__track{
  position:relative;height:12px;border-radius:6px;background:var(--paper-2);
  overflow:hidden;
}
.cf-scale__fill{
  position:absolute;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(90deg,var(--cyan),var(--brass));
  border-radius:6px;
  transition:width .9s ease;
}
.cf-scale__mark{
  position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink);
}
.cf-scale__legend{
  display:flex;justify-content:space-between;gap:10px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:12.5px;color:#5c6875;margin-top:6px;
}

/* -------------------------------------------------- widget: verdict tiles */
.cf-verdicts{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;margin-bottom:20px;}
.cf-verdict{
  flex:1 1 210px;
  background:#fff;
  border:1px solid var(--paper-2);
  border-top:4px solid var(--brass);
  border-radius:var(--r);
  padding-top:14px;padding-bottom:14px;padding-left:15px;padding-right:15px;
}
.cf-verdict__area{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:#5c6875;
}
.cf-verdict h3{margin-top:5px;margin-bottom:7px;font-size:17px;}
.cf-verdict__note{font-size:15px;margin-bottom:0;}

/* ------------------------------------------- widget: two-rail comparison */
.cf-versus{
  display:flex;flex-wrap:wrap;gap:0;
  border:1px solid var(--paper-2);border-radius:var(--r);overflow:hidden;
  margin-top:20px;margin-bottom:20px;
}
.cf-versus__side{
  flex:1 1 260px;
  padding-top:15px;padding-bottom:15px;padding-left:17px;padding-right:17px;
  background:#fff;
}
.cf-versus__side+.cf-versus__side{
  background:var(--ink);color:var(--paper);
}
.cf-versus__side+.cf-versus__side .cf-versus__lbl{color:var(--brass-soft);}
.cf-versus__lbl{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
  color:#5c6875;margin-bottom:8px;
}
.cf-versus ul{margin-bottom:0;}

/* ------------------------------------------- widget: wagering calculator */
.cf-calc{
  background:var(--ink-2);color:var(--paper);
  border-radius:var(--r);
  padding-top:18px;padding-bottom:18px;padding-left:18px;padding-right:18px;
  margin-top:22px;margin-bottom:22px;
}
.cf-calc h3{margin-top:0;color:#fff;}
.cf-calc__row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;}
.cf-calc__field{flex:1 1 170px;}
.cf-calc label{
  display:block;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:13px;color:var(--cyan-soft);margin-bottom:5px;
}
.cf-calc input{
  width:100%;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  border:1px solid var(--rule);border-radius:8px;background:var(--ink);
  color:#fff;
  padding-top:9px;padding-bottom:9px;padding-left:11px;padding-right:11px;
}
.cf-calc__out{
  flex:1 1 100%;
  background:var(--ink);border-radius:8px;border-left:4px solid var(--brass);
  padding-top:12px;padding-bottom:12px;padding-left:14px;padding-right:14px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;
}
.cf-calc__out b{color:var(--brass-soft);font-size:19px;}
.cf-calc__note{font-size:13.5px;color:var(--muted);margin-top:10px;margin-bottom:0;}

/* -------------------------------------------------- widget: promo code box */
.cf-code{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  background:#fff;border:2px dashed var(--brass);border-radius:var(--r);
  padding-top:14px;padding-bottom:14px;padding-left:16px;padding-right:16px;
  margin-top:20px;margin-bottom:20px;
}
.cf-code__val{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:22px;font-weight:700;letter-spacing:.08em;color:var(--ink);
}
.cf-code__btn{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;font-weight:700;cursor:pointer;
  background:var(--ink);color:#fff;border:0;border-radius:8px;
  padding-top:9px;padding-bottom:9px;padding-left:15px;padding-right:15px;
}
.cf-code__btn:hover{background:var(--ink-3);}
.cf-code__note{flex:1 1 220px;font-size:14px;margin-bottom:0;}

/* ------------------------------------------------- widget: pro / contro */
.cf-pc{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;margin-bottom:20px;}
.cf-pc__col{
  flex:1 1 260px;background:#fff;border-radius:var(--r);
  border:1px solid var(--paper-2);
  padding-top:14px;padding-bottom:14px;padding-left:16px;padding-right:16px;
}
.cf-pc__col h3{margin-top:0;}
.cf-pc--pro{border-left:5px solid var(--pro);}
.cf-pc--con{border-left:5px solid var(--con);}
.cf-pc ul{margin-bottom:0;}

/* ----------------------------------------------------------- note callout */
.cf-note{
  background:var(--paper-2);border-radius:var(--r);border-left:5px solid var(--ink);
  padding-top:13px;padding-bottom:13px;padding-left:16px;padding-right:16px;
  margin-top:18px;margin-bottom:18px;
}
.cf-note p{margin-bottom:0;font-size:15.5px;}

/* ------------------------------------------------------------- the tables */
.gridpan{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin-top:18px;margin-bottom:18px;
  border:1px solid var(--paper-2);border-radius:var(--r);background:#fff;
}
table{border-collapse:collapse;width:100%;font-size:15px;}
th,td{
  text-align:left;
  padding-top:10px;padding-bottom:10px;padding-left:12px;padding-right:12px;
  border-bottom:1px solid var(--paper-2);
}
th{
  background:var(--ink);color:var(--paper);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:13.5px;font-weight:700;
  white-space:normal;
}
tbody tr:last-child td{border-bottom:0;}

/* -------------------------------------------------------------- the CTAs */
.cf-cta{
  display:block;text-align:center;
  margin-top:22px;margin-bottom:22px;
}
.cf-cta a{
  display:inline-block;
  background:var(--brass);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:700;font-size:16px;text-decoration:none;
  border-radius:var(--r);
  padding-top:13px;padding-bottom:13px;padding-left:28px;padding-right:28px;
  box-shadow:0 2px 0 #9c7a1d;
}
.cf-cta a:hover{background:var(--brass-soft);color:var(--ink);}

/* --------------------------------------------------------------- the FAQ */
.enquirybox{margin-top:20px;}
.query-card{
  background:#fff;border:1px solid var(--paper-2);border-radius:var(--r);
  margin-bottom:9px;
  padding-top:11px;padding-bottom:11px;padding-left:15px;padding-right:15px;
}
.enquiry-head{
  cursor:pointer;font-weight:700;list-style:none;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
}
.enquiry-head::-webkit-details-marker{display:none;}
.enquiry-head::after{content:"+";float:right;color:var(--brass);font-size:20px;line-height:1;}
.query-card[open] .enquiry-head::after{content:"\2212";}
.qa-panel{margin-top:9px;margin-bottom:0;}

/* ----------------------------------------------------- the table of contents */
.indexcue{
  background:#fff;border:1px solid var(--paper-2);border-left:5px solid var(--cyan);
  border-radius:var(--r);
  padding-top:14px;padding-bottom:14px;padding-left:17px;padding-right:17px;
  margin-top:18px;margin-bottom:20px;
}
.indexcue__title{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#5c6875;
  margin-bottom:8px;
}
.indexcue__list{margin:0;padding-left:0;list-style:none;counter-reset:toc;}
.indexcue__list li{margin-bottom:7px;padding-left:26px;position:relative;counter-increment:toc;}
.indexcue__list li:last-child{margin-bottom:0;}
.indexcue__list li::before{content:counter(toc);position:absolute;left:0;top:1px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:12px;font-weight:700;color:var(--cyan);}
.indexcue a{text-decoration:none;}
.indexcue a:hover{text-decoration:underline;}
html{scroll-behavior:smooth;}
main h2{scroll-margin-top:14px;}

/* ------------------------------------------------------------ back to top */
.cf-up{
  position:fixed;right:16px;bottom:16px;z-index:20;
  width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
  background:var(--ink);color:#fff;font-size:20px;line-height:1;
  box-shadow:0 2px 10px rgba(20,26,34,.3);
  opacity:0;visibility:hidden;transition:opacity .25s ease;
}
.cf-up.is-on{opacity:1;visibility:visible;}

/* ------------------------------------------------------------------ foot */
.cf-foot{
  background:var(--ink);color:var(--paper-2);
  padding-top:30px;padding-bottom:26px;
  font-size:15px;
}
.cf-foot__top{display:flex;flex-wrap:wrap;gap:22px;margin-bottom:20px;}
.cf-foot__mark{flex:1 1 200px;}
.cf-foot__mark img{display:block;width:120px;height:auto;}
.cf-foot__cols{flex:2 1 420px;display:flex;flex-wrap:wrap;gap:22px;}
.cf-foot__col{flex:1 1 170px;}
.cf-foot h2{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brass-soft);border-top:0;
  margin-top:0;margin-bottom:9px;padding-top:0;
}
.cf-foot ul{list-style:none;margin:0;padding-left:0;}
.cf-foot li{margin-bottom:6px;}
.cf-foot a{color:var(--paper-2);text-decoration:none;}
.cf-foot a:hover{color:#fff;text-decoration:underline;}
.cf-foot__legal{
  border-top:1px solid var(--rule);padding-top:16px;
  font-size:13.5px;color:var(--muted);
}
.cf-foot__legal p{margin-bottom:8px;}
.cf-age{
  display:inline-block;border:2px solid var(--brass);color:var(--brass-soft);
  border-radius:50%;width:38px;height:38px;line-height:34px;text-align:center;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:700;font-size:13px;margin-right:10px;vertical-align:middle;
}

/* -------------------------------------------------------------------- 404 */
.cf-404{text-align:center;}
.cf-404 ul{list-style:none;padding-left:0;}

/* ------------------------------------------------------------ small screens */
/* Below this width the row cannot hold logo + CTA + seven links at any legible
   size (the links alone need ~377px in a 332px box at 360). So the nav folds
   behind a burger and opens as a full-width panel UNDER the bar — never beside
   it. `flex:0 0 100%` is what makes it a row of its own: display:block on a
   flex child would leave it sitting next to the burger. */
@media (max-width:720px){
  .cf-burger{display:block;}
  .cf-nav{display:none;}
  .cf-nav--open{
    display:flex;
    flex:0 0 100%;
    width:100%;
    order:5;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin-left:0;
    margin-top:8px;
    border-top:1px solid var(--rule);
  }
  .cf-nav--open a{
    padding-top:11px;padding-bottom:11px;
    border-bottom:1px solid var(--rule);
    border-left:3px solid transparent;
    padding-left:10px;
    font-size:15px;
  }
  .cf-nav--open a:hover,.cf-nav--open a[aria-current="page"]{
    border-bottom-color:var(--rule);
    border-left-color:var(--brass);
  }
  /* The CTA leaves the row so the budget is logo + burger only, and reappears
     inside the opened panel rather than being duplicated. */
  .cf-top__cta{display:none;}
  .cf-top[data-open="1"] .cf-top__cta{
    display:block;
    order:6;
    flex:0 0 100%;
    width:100%;
    text-align:center;
    margin-top:10px;
    font-size:15px;
  }
}
@media (max-width:760px){
  body{font-size:16px;}
  .cf-top__bar{min-height:0;}
  figure img{width:100%;}
  th,td{padding-left:10px;padding-right:10px;font-size:14px;}
}
@media (min-width:721px){
  /* If the panel was opened on a phone and the viewport then widens, the open
     class must stop claiming a full row. */
  .cf-nav--open{flex:0 0 auto;width:auto;flex-direction:row;margin-top:0;border-top:0;}
}
@media (max-width:420px){
  :root{--gut:14px;}
  .cf-top__mark img{width:92px;}
  .cf-code__val{font-size:19px;}
  .cf-hero__stat{flex-basis:100%;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .cf-scale__fill{transition:none;}
}