/* rbsab.org shared stylesheet. Linked by EVERY page (money page, homepage mirror,
   EEAT, utility, 404) so the look cannot drift between them.

   RESERVED CTA COLOUR: --cta (#0FB5A0, teal) is the complement of the crimson accent
   and appears on NOTHING except action buttons. Not headings, not ranks, not bonuses,
   not ribbons, not links, not borders, not icons. Do not reuse it. */

:root{
  --ink:#101A34;
  --ink-soft:#3B4A6B;
  --muted:#6B7794;
  --rule:#E2E6EF;
  --paper:#FFFFFF;
  --wash:#F6F7FB;
  --accent:#B4232F;        /* crimson: brand, bonus figures, rank marks */
  --accent-dk:#8C1A24;
  --cta:#0FB5A0;           /* RESERVED. buttons only. */
  --cta-dk:#0A8F7E;
  --star:#C8901F;
  --wrap:1120px;
}

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

/* ---- layout. NOTE: never combine a `padding` SHORTHAND with .wrap on the same
   element; that clobbers the inline gutters and squashes mobile to the left. ---- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}

/* ---- masthead. non-sticky by design. ---- */
.masthead{border-bottom:1px solid var(--rule);background:var(--paper)}
.masthead .bar{display:flex;align-items:center;gap:18px;min-height:76px;padding-block:15px}
/* Masthead lockup: the RBSAB wordmark, then the expansion stacked between two
   hairlines whose width is pinned to the wordmark. The rules are what integrate the
   two halves; the type is centred between them and split at the comma so the two
   lines stay balanced. Widths are verified by measurement, not by eye. */
.brand{flex:0 0 auto;display:inline-flex;flex-direction:column;align-items:flex-start;
  gap:5px;text-decoration:none;line-height:1}
.brand img{height:50px;width:auto;display:block}
.brand .tag{
  display:flex;flex-direction:column;align-items:center;
  width:149px;                       /* pinned to the rendered wordmark width at 50px */
  border-top:1px solid #BFC7D6;
  border-bottom:1px solid #BFC7D6;
  padding:5px 0 2px;   /* optical: uppercase has no descenders, so the bottom needs less */
  font:600 11px/1.28 Inter,sans-serif;text-transform:uppercase;
  letter-spacing:.085em;color:var(--ink-soft);white-space:nowrap;
}
.brand .tag i{font-style:normal;display:block}
.nav{margin-left:auto;display:flex;align-items:center;gap:22px}
.nav a{color:var(--ink-soft);text-decoration:none;font-size:15px;font-weight:500;white-space:nowrap}
.nav a:hover{color:var(--ink)}
.btn{
  display:inline-block;background:var(--cta);color:#04211D;font-weight:700;
  text-decoration:none;border-radius:8px;padding:11px 18px;font-size:15px;
  letter-spacing:.01em;border:0;cursor:pointer;text-align:center;
}
.btn:hover{background:var(--cta-dk);color:#fff}
.btn-sm{padding:9px 14px;font-size:14px}
.navtoggle{display:none;margin-left:auto;background:none;border:1px solid var(--rule);
  border-radius:7px;padding:9px 11px;cursor:pointer}
.navtoggle span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0}

/* ---- hero. compact on BOTH views so the toplist clears the fold. ---- */
.hero{padding:26px 0 4px}
h1{
  font:700 clamp(27px,4.1vw,40px)/1.16 "Barlow Condensed",Inter,sans-serif;
  letter-spacing:-.005em;margin:0 0 10px;text-transform:none;
}
.lede{font-size:17.5px;color:var(--ink-soft);margin:0 0 14px;max-width:70ch}

/* byline: structured rows, never a compressed dot-run */
.byline{display:flex;align-items:center;gap:13px;padding:12px 0;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);margin-bottom:20px}
.byline img{width:46px;height:46px;border-radius:50%;flex:0 0 auto}
.byline .who{font-size:15px;font-weight:600;line-height:1.35}
.byline .who a{color:var(--ink);text-decoration:none}
.byline .who a:hover{text-decoration:underline}
.byline .role{display:block;font-weight:400;font-size:13.5px;color:var(--muted)}
.byline .meta{margin-left:auto;text-align:right;font-size:13px;color:var(--muted);line-height:1.5}
.byline .meta b{color:var(--ink-soft);font-weight:600}

/* ---- headings. nothing may be placed above an H1/H2/H3. ---- */
h2{
  font:700 clamp(22px,2.7vw,30px)/1.22 "Barlow Condensed",Inter,sans-serif;
  margin:44px 0 12px;letter-spacing:-.004em;
}
h2::after{content:"";display:block;width:52px;height:3px;background:var(--accent);margin-top:9px;border-radius:2px}
h3{font:600 clamp(18px,2vw,21px)/1.3 Inter,sans-serif;margin:26px 0 8px}
h4{font:600 16px/1.35 Inter,sans-serif;margin:18px 0 6px}
p{margin:0 0 14px}
ul,ol{margin:0 0 16px;padding-left:22px}
li{margin:0 0 7px}

/* ---- toplist ---- */
.toplist{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:12px}
.card{
  display:grid;grid-template-columns:44px 168px 1fr 200px 156px;align-items:center;gap:18px;
  border:1px solid var(--rule);border-radius:12px;padding:14px 16px;background:var(--paper);
}
.card.top{border-color:#C9CFDD;box-shadow:0 1px 0 #EDF0F6,0 6px 22px -14px rgba(16,26,52,.5)}
.rank{font:700 21px/1 "Barlow Condensed",Inter,sans-serif;color:var(--accent);text-align:center}
.chip{
  height:62px;border:1px solid var(--rule);border-radius:9px;background:#fff;
  display:flex;align-items:center;justify-content:center;padding:8px;
}
.chip img{max-height:44px;width:auto;object-fit:contain}
/* Brand-coloured tile (rule 12). Some real logos are white-on-transparent and would
   vanish on a white chip, so they sit on a dark tile taken from the operator's own
   site instead of being recoloured. Background is set inline per brand. */
.chip.tile{border:0}
.chip.tile img{max-height:40px}
/* wordmark fallback for brands with no logo asset. swap in a real file when available. */
.chip.word{padding:0;border:0}
.chip.word span{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  border-radius:9px;font:700 15px/1.1 "Barlow Condensed",Inter,sans-serif;
  letter-spacing:.03em;text-align:center;padding:6px 8px;
}
.who-b{min-width:0}
.who-b .nm{font-weight:700;font-size:17px;margin:0 0 3px}
.who-b .lbl{font-size:13px;color:var(--muted);margin:0}
.rate{display:flex;align-items:center;gap:7px;margin-top:5px;font-size:13px;color:var(--muted)}
.stars{color:var(--star);letter-spacing:1px;font-size:13px}
/* The bonus is the eye-catcher (rule 6). It sits in a tinted panel with a crimson
   edge so it reads as the dominant element in the card, and it scales UP on mobile
   rather than down, because that is where the decision is actually made. */
.bonus{
  text-align:left;background:#FDF4F5;border-left:3px solid var(--accent);
  border-radius:0 9px 9px 0;padding:9px 12px 10px;
}
.bonus .k{display:block;font-size:10px;letter-spacing:.11em;color:#9B6A70;font-weight:700;margin-bottom:4px}
.bonus .v{
  display:block;font:700 clamp(19px,2.1vw,24px)/1.14 "Barlow Condensed",Inter,sans-serif;
  color:var(--accent);letter-spacing:-.004em;
}
.bonus .t{display:block;font-size:12.5px;line-height:1.4;color:var(--ink-soft);margin-top:5px;font-weight:500}
.bonus .none{font-size:13px;color:var(--muted);font-style:normal}
.act{display:grid;gap:6px;justify-items:stretch}
.act .sub{font-size:12px;color:var(--muted);text-align:center}

/* ---- reviews ---- */
.review{border:1px solid var(--rule);border-radius:12px;padding:20px;margin:0 0 18px;background:var(--paper)}
.review .rhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.review .rhead .chip{height:54px;min-width:132px}
/* Contained bonus block inside a review. Mentions of bonus detail are boxed rather
   than left loose in prose, and each review carries its own CTA. */
.review .terms{
  display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;
  background:#FDF4F5;border:1px solid #F0D8DC;border-left:3px solid var(--accent);
  border-radius:0 10px 10px 0;padding:14px 16px;margin:18px 0 4px;
}
.review .terms .k{display:block;font-size:10px;letter-spacing:.11em;color:#9B6A70;font-weight:700;margin-bottom:5px}
.review .terms .v{
  display:block;font:700 clamp(20px,2.2vw,26px)/1.15 "Barlow Condensed",Inter,sans-serif;color:var(--accent);
}
.review .terms .meta{display:block;font-size:13px;line-height:1.45;color:var(--ink-soft);margin-top:6px;font-weight:500}
.review .terms .src{display:block;font-size:11.5px;color:var(--muted);margin-top:5px}
.review .terms .go{display:grid;gap:6px;justify-items:center;min-width:168px}
.review .terms .go .sub{font-size:11.5px;color:var(--muted)}
.scores{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:16px 0}
.scores div{background:var(--wash);border-radius:9px;padding:10px 12px}
.scores .n{font:700 19px/1 "Barlow Condensed",Inter,sans-serif;color:var(--ink)}
.scores .l{font-size:12px;color:var(--muted);margin-top:3px}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:6px}
.pc h4{margin-top:0}
.pc ul{list-style:none;padding:0;margin:0}
.pc li{padding-left:20px;position:relative;font-size:15.5px}
.pros li::before{content:"";position:absolute;left:2px;top:8px;width:9px;height:5px;
  border-left:2px solid #1E7A4C;border-bottom:2px solid #1E7A4C;transform:rotate(-45deg)}
.cons li::before{content:"";position:absolute;left:3px;top:9px;width:10px;height:2px;background:var(--accent)}

/* ---- tables ---- */
.tw{overflow-x:auto;margin:0 0 18px}
table{border-collapse:collapse;width:100%;font-size:15.5px;min-width:560px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{background:var(--wash);font-weight:600;font-size:13.5px;color:var(--ink-soft);white-space:nowrap}

/* ---- misc blocks ---- */
.note{background:var(--wash);border-left:3px solid var(--accent);border-radius:0 9px 9px 0;padding:15px 17px;margin:0 0 18px}
.note p:last-child{margin-bottom:0}
.faq{border-top:1px solid var(--rule)}
.faq .q{border-bottom:1px solid var(--rule);padding:16px 0}
.faq .q h3{margin:0 0 7px}
.faq .q p:last-child{margin-bottom:0}
.authorbox{display:flex;gap:16px;align-items:flex-start;background:var(--wash);border-radius:12px;padding:18px;margin:26px 0}
.authorbox img{width:74px;height:74px;border-radius:50%;flex:0 0 auto}
.authorbox p:last-child{margin-bottom:0}

/* ---- footer. the #ad / affiliate disclosure lives HERE, at the very bottom,
   never above a heading. ---- */
.foot{margin-top:52px;border-top:1px solid var(--rule);background:var(--wash);padding:30px 0 34px}
.foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:26px}
.foot h4{margin:0 0 9px;font-size:14px;letter-spacing:.02em}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:6px}
.foot a{color:var(--ink-soft);text-decoration:none;font-size:14.5px}
.foot a:hover{color:var(--ink);text-decoration:underline}
.foot .small{font-size:13px;color:var(--muted);line-height:1.6}
.rg{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule);font-size:13px;color:var(--muted)}
.rg b{color:var(--ink-soft)}
.disclosure{margin-top:14px;font-size:12.5px;color:var(--muted)}

/* ---------------- responsive. same content on every viewport, reflowed only.
   No display:none on real content. ---------------- */
@media (max-width:900px){
  .card{grid-template-columns:38px 132px 1fr;grid-template-areas:"r c w" "b b b" "a a a";row-gap:12px}
  .rank{grid-area:r}.chip{grid-area:c}.who-b{grid-area:w}.bonus{grid-area:b}.act{grid-area:a}
  .scores{grid-template-columns:repeat(3,1fr)}
  .foot .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .nav{display:none}
  .nav.open{display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:static;width:100%;margin:0;padding:8px 0 12px;border-top:1px solid var(--rule)}
  .nav.open a{padding:12px 2px;border-bottom:1px solid var(--rule)}
  .nav.open .btn{margin-top:12px;border-bottom:0}
  .navtoggle{display:block}
  .masthead .bar{flex-wrap:wrap;min-height:64px;padding-block:10px}
  .hero{padding:18px 0 2px}
  .lede{font-size:16.5px;margin-bottom:12px}
  .byline{gap:11px;padding:10px 0;margin-bottom:16px;flex-wrap:wrap}
  /* keep the avatar and the name on ONE row: without this the long role string pushes
     .who onto a new line and strands the avatar by itself, costing ~50px of fold */
  .byline .who{flex:1 1 0;min-width:0}
  .byline .meta{margin-left:0;text-align:left;width:100%;padding-top:8px}
  h2{margin:34px 0 10px}
  /* cards: centred, bonus above the CTA, full-width action */
  .card{grid-template-columns:1fr;grid-template-areas:"r" "c" "w" "b" "a";text-align:center;
    justify-items:center;row-gap:9px;padding:16px 14px}
  .chip{width:100%;max-width:210px}
  .who-b{text-align:center}
  .rate{justify-content:center}
  /* mobile: the bonus becomes a full-width band and the figure grows, because this
     is where the reader actually decides */
  .bonus{
    text-align:center;width:100%;border-left:0;border-top:3px solid var(--accent);
    border-radius:0 0 10px 10px;padding:11px 12px 12px;
  }
  .bonus .k{font-size:10.5px}
  .bonus .v{font-size:25px;line-height:1.1}
  .bonus .t{font-size:13px;margin-top:6px}
  .review .terms{grid-template-columns:1fr;gap:12px;text-align:center;
    border-left:0;border-top:3px solid var(--accent);border-radius:0 0 10px 10px}
  .review .terms .v{font-size:26px}
  .review .terms .go{width:100%;min-width:0}
  .review .terms .go .btn{width:100%}
  .act{width:100%}
  .act .btn{width:100%}
  .pc{grid-template-columns:1fr;gap:10px}
  .pc li{text-align:left}
  .scores{grid-template-columns:repeat(2,1fr)}
  .review .rhead{justify-content:center;text-align:center}
  .authorbox{flex-direction:column;align-items:center;text-align:center}
  .foot .cols{grid-template-columns:1fr}
}

/* Narrow phones (360px and below). Purely responsive spacing and type tightening so the
   first toplist card still clears the fold at 360x640. No content is hidden or removed:
   every element present at 390px is present here, just tighter. */
@media (max-width:400px){
  h1{font-size:25px;line-height:1.13}
  .hero{padding:8px 0 2px}
  .lede{font-size:16px;line-height:1.5;margin-bottom:10px}
  .byline{gap:10px;padding:7px 0;margin-bottom:9px}
  .byline img{width:42px;height:42px}
  .byline .meta{padding-top:6px;font-size:12.5px;line-height:1.45}
  h2{margin:19px 0 8px}
  h2::after{margin-top:7px}
}