/* Press — shared site stylesheet.
   Deep navy ink, jade press accent, warm cream ground, blush secondary,
   heavy condensed display type, and the rounded press-plate frame the
   wordmark badge sits inside. */

:root{
  --ink:#1d2d45;          /* navy: masthead, headings, body ink */
  --ink-soft:#4a5872;
  --ink-faint:#8b96a8;
  --jade:#17805a;         /* brand accent: press, motifs, ranks, BONUS figure */
  --jade-dark:#10603f;
  --jade-wash:#e6f2ec;
  --cream:#f7f4ec;        /* page ground */
  --cream-deep:#eee9dc;
  --blush:#f4d9d5;        /* secondary ground, from the original mural */
  --paper:#ffffff;
  --line:#ddd6c6;
  --gold:#c8890d;         /* rating stars only */

  /* RESERVED. --cta is the complement of --jade and appears on CTA
     buttons and NOTHING else: not headings, ranks, bonuses, rules,
     borders, links or icons. Do not reuse this token. */
  --cta:#e2542f;
  --cta-dark:#c03f1d;

  --plate:10px;           /* the press-plate corner radius, from the logo badge */
  --shadow:0 1px 0 var(--line);
  --wrap:1120px;
  --display:"Oswald","Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.62;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--jade-dark);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--jade)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* ---------- the repeating press motif ----------
   Abstracted from the logo: a plate rule with a downward-pressure
   chevron, used as the section divider throughout. */
/* Section divider: a hairline across the column with a short jade plate bar
   sitting ON the line at the left. Nothing protrudes downward into the
   heading, and the heading keeps clear space beneath the rule. */
.plate-rule{position:relative;height:2px;background:var(--line);margin:0 0 24px}
.plate-rule::after{
  content:"";position:absolute;left:0;top:0;width:56px;height:2px;
  background:var(--jade);
}
.drip{display:inline-block;width:8px;height:11px;background:var(--jade);
  border-radius:0 0 50% 50%/0 0 60% 60%;vertical-align:middle}

/* ---------- masthead (non-sticky by design) ---------- */
.masthead{background:var(--paper);border-bottom:2px solid var(--ink)}
.masthead__in{display:flex;align-items:center;gap:20px;
  max-width:var(--wrap);margin:0 auto;padding:12px 20px}
.masthead__logo{flex:0 0 auto}
.masthead__logo img{width:236px}
.nav{margin-left:auto;display:flex;align-items:center;gap:22px}
.nav a{font-family:var(--display);font-size:14px;font-weight:500;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink);text-decoration:none}
.nav a:hover{color:var(--jade)}
.burger{display:none;margin-left:auto;background:none;border:2px solid var(--ink);
  border-radius:var(--plate);padding:7px 9px;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0}

/* ---------- hero: deliberately compact so the toplist clears the fold
   on BOTH desktop and mobile. No kicker above the H1,
   no hero CTA. ---------- */
.hero{padding:22px 0 14px}
h1{font-family:var(--display);font-weight:600;line-height:1.1;
  font-size:clamp(27px,4.1vw,42px);margin:0 0 8px;letter-spacing:-.005em}
.lede{margin:0;font-size:17px;color:var(--ink-soft);max-width:66ch}

/* byline: structured rather than a compressed dot-run */
.byline{display:flex;align-items:center;gap:12px;margin:14px 0 0;
  padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.byline img{width:42px;height:42px;border-radius:50%;flex:0 0 auto;
  border:2px solid var(--jade)}
.byline__who{font-weight:650;font-size:14.5px}
.byline__who a{color:var(--ink);text-decoration:none}
.byline__who a:hover{color:var(--jade)}
.byline__role{font-size:12.5px;color:var(--ink-soft)}
.byline__meta{margin-left:auto;text-align:right;font-size:12px;color:var(--ink-faint);
  line-height:1.5}
.byline__meta b{color:var(--ink-soft);font-weight:600}

/* ---------- headings. Nothing may sit above a heading in its block. ---------- */
h2{font-family:var(--display);font-weight:600;line-height:1.18;
  font-size:clamp(22px,2.7vw,30px);margin:0 0 12px;letter-spacing:-.005em}
h3{font-family:var(--display);font-weight:600;font-size:20px;line-height:1.25;margin:0 0 9px}
h4{font-family:var(--display);font-weight:600;font-size:16.5px;margin:0 0 7px}
section{padding:30px 0}
p{margin:0 0 15px}
ul,ol{margin:0 0 15px;padding-left:22px}
li{margin:0 0 7px}

/* ---------- TOPLIST: narrow rows, all key detail, above the fold ----------
   Desktop = one compact horizontal row per brand.
   Mobile  = the same fields, reflowed and centred (no hidden content). */
.toplist{margin:0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.rc{
  display:grid;align-items:center;gap:14px;
  grid-template-columns:38px 118px minmax(130px,1fr) minmax(190px,1.35fr) 96px 128px;
  padding:11px 12px;background:var(--paper);
  border-bottom:1px solid var(--line);
  border-left:2px solid transparent;
}
.rc:nth-child(odd){background:#fffdf8}
.rc--top{border-left-color:var(--jade);border-left-width:4px}

/* rank = a pressed jade coin, one of the motif marks */
.rc__rank{font-family:var(--display);font-weight:600;font-size:16px;color:var(--paper);
  background:var(--jade);width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.rc--top .rc__rank{background:var(--ink)}

.rc__logo{background:var(--paper);border:1px solid var(--line);border-radius:var(--plate);
  height:52px;display:flex;align-items:center;justify-content:center;padding:5px}
.rc__logo img{max-height:42px;width:auto}

.rc__id{min-width:0}
.rc__name{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.2}
.rc__rate{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-soft);
  margin-top:2px}
.stars{color:var(--gold);letter-spacing:1px;font-size:12px}
.rc__ribbon{display:inline-block;font-family:var(--display);font-size:10.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--paper);background:var(--ink);
  padding:2px 7px;border-radius:3px;margin-top:4px}

/* BONUS is the eye-catcher: jade and large, never flat black */
.rc__bonus{min-width:0}
.rc__bonus-lab{font-family:var(--display);font-size:10px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:1px}
.rc__bonus-amt{color:var(--jade);font-weight:700;font-size:16px;line-height:1.24;
  display:block}
.rc__bonus-sub{font-size:11.5px;color:var(--ink-soft);margin-top:2px}

/* wagering pill: the sourced number that decides whether "instant" means
   anything. Deliberately NOT a per-brand payout time, which is not data
   we hold. Method-level payout windows live in the body tables. */
.rc__pay{text-align:center}
.rc__pay-val{font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink);
  display:block;line-height:1.15}
.rc__pay-lab{font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint)}

/* ---------- the CTA: a press lever.
   The button is the press plate; pressing it drives the plate down and
   collapses the shadow, which is the brand's whole mechanic. ---------- */
.cta{
  display:block;width:100%;text-align:center;text-decoration:none;
  font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.07em;
  text-transform:uppercase;color:#fff;background:var(--cta);
  padding:11px 12px 12px;border:0;border-radius:var(--plate);
  box-shadow:0 3px 0 var(--cta-dark);
  transition:transform .08s ease,box-shadow .08s ease;
  position:relative;
}
.cta::after{ /* the plate notch: the press head coming down */
  content:"";position:absolute;left:50%;bottom:-1px;width:16px;height:5px;
  transform:translateX(-50%);background:var(--cta-dark);
  clip-path:polygon(0 100%,100% 100%,50% 0);
}
.cta:hover{transform:translateY(1px);box-shadow:0 2px 0 var(--cta-dark)}
.cta:active{transform:translateY(3px);box-shadow:0 0 0 var(--cta-dark)}
.cta--lg{font-size:15px;padding:13px 22px 14px}
.cta--inline{display:inline-block;width:auto;padding:10px 22px 11px}


/* Clickable chips and bonus figures: the whole row is actionable, but only the
   .cta button wears the reserved CTA colour. */
a.rc__logo,a.rev__logo,a.rest__logo{text-decoration:none;transition:border-color .12s ease}
a.rc__logo:hover,a.rev__logo:hover,a.rest__logo:hover{border-color:var(--jade)}
a.rc__bonus-amt{text-decoration:none;color:var(--jade)}
a.rc__bonus-amt:hover{text-decoration:underline;text-underline-offset:2px}
a.amt{text-decoration:none}
a.amt:hover{text-decoration:underline;text-underline-offset:2px}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;margin:0 0 16px;border:1px solid var(--line);
  border-radius:var(--plate);background:var(--paper)}
table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:560px}
thead th{background:var(--ink);color:var(--paper);font-family:var(--display);
  font-weight:500;letter-spacing:.05em;text-transform:uppercase;font-size:12px;
  text-align:left;padding:9px 11px}
tbody td{padding:9px 11px;border-top:1px solid var(--line);vertical-align:top}
tbody tr:nth-child(even){background:#fffdf8}
td.amt,td .amt,.amt{color:var(--jade);font-weight:650}

/* ---------- reviews ---------- */
.rev{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--jade);
  border-radius:var(--plate);padding:20px;margin:0 0 20px}
.rev__head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.rev__logo{background:var(--paper);border:1px solid var(--line);border-radius:var(--plate);
  height:56px;min-width:112px;display:flex;align-items:center;justify-content:center;padding:6px}
.rev__logo img{max-height:44px;width:auto}
.scores{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:9px 18px;
  margin:0 0 14px;padding:0;list-style:none}
.scores li{display:flex;align-items:center;gap:8px;margin:0;font-size:13px}
.scores span{margin-left:auto;font-weight:650;color:var(--ink)}
.bar{flex:1;height:5px;background:var(--cream-deep);border-radius:3px;overflow:hidden;
  max-width:76px}
.bar i{display:block;height:100%;background:var(--jade)}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 15px}
.pc ul{list-style:none;padding:0;margin:0;font-size:14px}
.pc li{position:relative;padding-left:20px;margin-bottom:5px}
.pc__y li::before{content:"";position:absolute;left:0;top:7px;width:11px;height:6px;
  border-left:2px solid var(--jade);border-bottom:2px solid var(--jade);
  transform:rotate(-45deg)}
.pc__n li::before{content:"";position:absolute;left:2px;top:9px;width:11px;height:2px;
  background:var(--ink-faint)}
.pc h4{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}

/* rest-of-field: compact, deliberately not another card grid */
.rest{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.rest li{display:grid;grid-template-columns:92px 1fr;gap:14px;align-items:start;
  padding:13px 0;border-bottom:1px solid var(--line)}
.rest__logo{background:var(--paper);border:1px solid var(--line);border-radius:var(--plate);
  height:44px;display:flex;align-items:center;justify-content:center;padding:4px}
.rest__logo img{max-height:34px;width:auto}
.rest b{font-family:var(--display);font-size:16px;font-weight:600}

/* callout: a pressed plate, not a generic tinted box */
.note{border-left:3px solid var(--jade);padding:2px 0 2px 16px;margin:0 0 16px;
  font-size:15.5px;color:var(--ink-soft)}

/* steps */
.steps{counter-reset:s;list-style:none;padding:0;margin:0 0 16px}
.steps li{counter-increment:s;position:relative;padding-left:44px;margin-bottom:13px}
.steps li::before{content:counter(s);position:absolute;left:0;top:-1px;
  width:30px;height:30px;border-radius:var(--plate);background:var(--ink);color:var(--paper);
  font-family:var(--display);font-weight:600;font-size:15px;
  display:flex;align-items:center;justify-content:center}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:13px 0}
.faq summary{font-family:var(--display);font-weight:600;font-size:17.5px;cursor:pointer;
  list-style:none;display:flex;align-items:flex-start;gap:11px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"";flex:0 0 auto;width:10px;height:10px;margin-top:7px;
  border-right:2px solid var(--jade);border-bottom:2px solid var(--jade);
  transform:rotate(45deg);transition:transform .15s ease}
.faq details[open] summary::before{transform:rotate(225deg)}
.faq details > *:not(summary){margin-top:10px}

/* author box */
.authorbox{display:flex;gap:18px;align-items:flex-start;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--plate);padding:20px}
.authorbox img{width:96px;height:96px;border-radius:50%;flex:0 0 auto;
  border:3px solid var(--jade)}
.profile img{width:168px;height:168px;border-radius:50%;border:4px solid var(--jade)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#c9d2e0;margin-top:36px;
  font-size:14px;padding:30px 0 22px}
.foot a{color:#fff;text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot__top{display:flex;gap:34px;flex-wrap:wrap;align-items:flex-start}
.foot__logo img{width:210px;margin-bottom:10px}
.foot__cols{display:flex;gap:44px;flex-wrap:wrap;margin-left:auto}
.foot h4{color:#fff;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  margin:0 0 9px}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:6px}
.foot__legal{border-top:1px solid #33415c;margin-top:22px;padding-top:16px;
  font-size:12.5px;color:#9aa7ba;line-height:1.65}
.foot__legal strong{color:#fff}

/* ---------- mobile: same content and structure, reflowed. No display:none
   on real content. ---------- */
@media (max-width:860px){
  .nav{display:none}
  .nav.open{display:flex;flex-direction:column;align-items:stretch;gap:0;
    width:100%;order:3;margin:8px 0 4px;border-top:2px solid var(--ink)}
  .nav.open a{padding:11px 2px;border-bottom:1px solid var(--line)}
  .nav.open .cta{margin-top:10px}
  .burger{display:block}
  .masthead__in{flex-wrap:wrap;padding:8px 20px}
  .masthead__logo img{width:142px}

  .hero{padding:10px 0 5px}
  h2{font-size:20px}
  .lede{font-size:14px;line-height:1.45}
  .byline{gap:9px;margin-top:8px;padding:6px 0;flex-wrap:wrap}
  .byline__meta{margin-left:0;text-align:left;flex:1 0 100%;
    padding-top:5px;border-top:1px solid var(--line)}
  .byline__meta br{display:none}
  .byline__meta b::before{content:""}
  .byline img{width:36px;height:36px}
  .byline__meta{font-size:9.5px;line-height:1.3}
  section{padding:20px 0}

  /* toplist row -> a genuinely NARROW three-band card, not a tall stack:
     band 1 = rank, logo and name on ONE line; band 2 = the bonus (the
     eye-catcher) with wagering inline beside it; band 3 = the full-width CTA.
     Every desktop field is still present, just reflowed. */
  /* The bonus is the reason the row exists, so on mobile it gets its OWN
     full-width centred band in large jade type. Identity compresses to one
     line above it; wagering drops to the small print below it. */
  .rc{grid-template-columns:30px 88px 1fr;
    grid-template-areas:"rank logo id" "bonus bonus bonus" "pay pay pay" "cta cta cta";
    gap:8px 10px;padding:9px 12px 11px;text-align:left}
  .rc__rank{grid-area:rank;width:28px;height:28px;font-size:14px;align-self:center}
  .rc__logo{grid-area:logo;height:38px;padding:3px;align-self:center}
  .rc__logo img{max-height:30px}
  /* name on its own line, rating and ribbon wrapping onto one line beneath it */
  .rc__id{grid-area:id;align-self:center;display:flex;flex-wrap:wrap;
    align-items:center;gap:1px 8px}
  .rc__name{font-size:16px;flex:0 0 100%}
  .rc__rate{margin-top:0;font-size:11.5px}
  .rc__ribbon{margin-top:0;font-size:9.5px;padding:1px 6px}
  /* bonus band: centred, because it is the thing the eye should land on */
  .rc__bonus{grid-area:bonus;text-align:center;background:var(--jade-wash);
    border-radius:var(--plate) var(--plate) 0 0;padding:8px 10px 6px}
  .rc__bonus-lab{display:block;font-size:9.5px;letter-spacing:.13em;color:var(--jade-dark);
    opacity:.85;margin-bottom:1px}
  .rc__bonus-amt{font-size:21px;line-height:1.18;font-weight:800;letter-spacing:-.01em;
    display:block;padding:4px 0}
  .rc__bonus-sub{margin-top:3px;font-size:11.5px}
  /* wagering shares the bonus band instead of claiming a row of its own */
  /* wagering reads as one small centred line, not a competing column */
  /* wagering rides in the same jade band as the bonus so it costs no extra row */
  .rc__pay{grid-area:pay;background:var(--jade-wash);margin-top:-8px;
    border-radius:0 0 var(--plate) var(--plate);padding:0 10px 8px;
    display:flex;justify-content:center;align-items:baseline;gap:5px}
  .rc__pay-val{font-size:13px;font-family:var(--body);font-weight:700;color:var(--ink-soft)}
  .rc__pay-lab{font-size:10px}
  .rc__cta{grid-area:cta}
  .rc__cta .cta{padding:8px 12px 9px}

  .pc{grid-template-columns:1fr;gap:10px}
  .rev{padding:16px}
  .rev__head{gap:11px}
  .authorbox{flex-direction:column;gap:13px}
  .foot__cols{margin-left:0;gap:30px}
  .rest li{grid-template-columns:76px 1fr;gap:11px}
  .profile img{width:132px;height:132px}
}
@media (max-width:420px){
  body{font-size:16.5px}
  .masthead__logo img{width:168px}
  h1{font-size:25px}
  .rc__logo{width:120px}
}