/* BeastyBike — shared stylesheet. Linked by EVERY page (money, root mirror, EEAT) so the look cannot drift.
   Palette + motif derived from the site logo (circular beast badge devouring chips/cards/dice) and from the
   domain's original design language (dark #26282b chrome, Roboto Condensed caps labels, thin rules, pill CTAs). */

/* ---------- tokens ---------- */
:root{
  --ink:#1d1e1f;          /* deepest text / darkest band */
  --chrome:#26282b;       /* masthead + footer band (legacy value) */
  --chrome-2:#32353a;     /* raised panel inside dark bands */
  --paper:#ffffff;
  --paper-2:#f4f4f5;      /* section alternation */
  --body:#33363a;         /* body copy */
  --muted:#6b7078;
  --rule:#d8dadd;         /* hairlines */
  --rule-dk:#3a3d42;      /* hairlines on dark */

  --beast:#f60409;        /* PRIMARY accent: ranks, ribbons, bonus figures, motif (legacy red) */
  --beast-dk:#c0030a;
  --beast-wash:#fff1f1;   /* faintest red tint for the bonus panel */
  --gold:#e8a600;         /* star ratings ONLY */

  /* ⛔ RESERVED CTA COLOUR (rule 19). Used on NOTHING but action buttons.
     Not on headings, ranks, bonuses, ribbons, links, borders or icons.  */
  --cta:#b6f200;
  --cta-hi:#c9ff4d;
  --cta-ink:#1d1e1f;

  --w:1120px;             /* content measure */
  --gut:20px;
}

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--body);
  font:400 17px/1.62 Roboto,-apple-system,"Segoe UI",Arial,sans-serif;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--beast-dk);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--beast)}
h1,h2,h3,h4{
  font-family:"Roboto Condensed",Roboto,Arial,sans-serif;
  color:var(--ink);margin:0 0 .5em;line-height:1.14;letter-spacing:-.01em;
}
h1{font-size:clamp(26px,3.5vw,40px);font-weight:700;text-transform:none}
h2{font-size:clamp(23px,3vw,31px);font-weight:700;margin-top:0}
h3{font-size:clamp(19px,2.2vw,22px);font-weight:700}
h4{font-size:17px;font-weight:700}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.1em;padding-left:1.25em}
li{margin-bottom:.4em}
.wrap{max-width:var(--w);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
/* ⛔ never put `padding` SHORTHAND on a class that also carries .wrap — it clobbers the gutters
   and produces the "squashed left" mobile bug. Use padding-block / padding-top+bottom. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- MOTIF 1: the bite edge (the signature, straight off the logo's open jaw) ----------
   A repeating triangular tooth-notch used as the boundary of the dark chrome bands. */
/* ⛔ `background:inherit` here inherits the PARENT's background (usually white), not the element's own,
   so the notches rendered invisible. Bind the band colour explicitly. */
.bite-b{position:relative}
.bite-b::after{
  content:"";position:absolute;left:0;right:0;bottom:-9px;height:9px;background:var(--chrome);z-index:2;
  -webkit-mask-image:linear-gradient(135deg,#000 50%,transparent 50%),linear-gradient(225deg,#000 50%,transparent 50%);
  mask-image:linear-gradient(135deg,#000 50%,transparent 50%),linear-gradient(225deg,#000 50%,transparent 50%);
  -webkit-mask-size:18px 18px;mask-size:18px 18px;
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  -webkit-mask-position:0 0,9px 0;mask-position:0 0,9px 0;
}
.bite-t{position:relative}
.bite-t::before{
  content:"";position:absolute;left:0;right:0;top:-9px;height:9px;background:var(--chrome);z-index:2;
  -webkit-mask-image:linear-gradient(45deg,#000 50%,transparent 50%),linear-gradient(315deg,#000 50%,transparent 50%);
  mask-image:linear-gradient(45deg,#000 50%,transparent 50%),linear-gradient(315deg,#000 50%,transparent 50%);
  -webkit-mask-size:18px 18px;mask-size:18px 18px;
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  -webkit-mask-position:0 0,9px 0;mask-position:0 0,9px 0;
}

/* ---------- MOTIF 2: claw-mark rule (replaces a generic <hr>) ---------- */
.claw{border:0;height:14px;margin:34px 0;background:
  linear-gradient(105deg,transparent 46%,var(--beast) 46%,var(--beast) 52%,transparent 52%) 0 0/13px 14px repeat-x;
  opacity:.5}

/* ---------- MOTIF 3: chip/dice field — a SIGNATURE background, used only on the hero
   and the closing band. Deliberately NOT a default container treatment. ---------- */
.chipfield{position:relative;isolation:isolate}
.chipfield::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.055;
  background-image:
    radial-gradient(circle at 12px 12px,var(--beast) 3.5px,transparent 3.6px),
    radial-gradient(circle at 42px 40px,#fff 2.5px,transparent 2.6px),
    radial-gradient(circle at 68px 16px,var(--beast) 2px,transparent 2.1px);
  background-size:84px 60px,84px 60px,84px 60px;
}

/* ---------- masthead (NON-STICKY, per rule 7) ---------- */
.mast{background:var(--chrome);color:#fff}
.mast .in{max-width:var(--w);margin:0 auto;padding:16px var(--gut);display:flex;align-items:center;gap:18px}
.mast .brand{display:flex;align-items:center;flex:0 1 auto;min-width:0}
/* 2x, operator request 2026-07-29. Sized with max-height + max-width (NOT a fixed height) so a wide
   horizontal lockup scales down proportionally on narrow screens instead of shoving the hamburger
   off-canvas and creating page-level horizontal scroll. */
.mast .brand img{height:auto;width:auto;max-height:104px;max-width:100%}
.nav{margin-left:auto;display:flex;align-items:center;gap:22px}
.nav a{
  color:#e7e8ea;text-decoration:none;font:700 13px/1 "Roboto Condensed",Arial,sans-serif;
  text-transform:uppercase;letter-spacing:.07em;padding:6px 0;border-bottom:2px solid transparent;
}
.nav a:hover{color:#fff;border-bottom-color:var(--beast)}
.burger{margin-left:auto;display:none;background:none;border:1px solid var(--rule-dk);
  border-radius:4px;padding:9px 11px;cursor:pointer;flex:0 0 auto}
.burger span{display:block;width:20px;height:2px;background:#fff;margin:4px 0}

/* ---------- hero ----------
   Compacted for BOTH viewports so the toplist clears the fold (rule 1). Never by hiding content. */
.hero{background:var(--paper);padding-top:22px;padding-bottom:14px}
.hero h1{margin-bottom:.3em;max-width:30ch}
.lede{font-size:18px;color:var(--body);max-width:64ch;margin-bottom:12px}

/* byline — structured rows, never a compressed dot-run (rule 17) */
.byline{display:flex;align-items:center;gap:12px;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);padding-top:9px;padding-bottom:9px;margin-bottom:16px}
.byline img{width:40px;height:40px;border-radius:50%;flex:0 0 auto;object-fit:cover}
.byline .who{font:700 15px/1.3 Roboto,Arial,sans-serif;color:var(--ink)}
.byline .who a{color:var(--ink)}
.byline .role{font-size:13px;color:var(--muted);line-height:1.35}
.byline .meta{margin-left:auto;display:flex;gap:16px;font-size:12.5px;color:var(--muted);text-align:right}
.byline .meta b{display:block;color:var(--ink);font:700 13px/1.3 "Roboto Condensed",Arial,sans-serif;
  text-transform:uppercase;letter-spacing:.05em}

/* ---------- THE CTA (unique: acid-lime button with a bitten right edge) ----------
   The notch is the beast's tooth taken out of the button. On hover the bite closes. */
.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--cta);color:var(--cta-ink);text-decoration:none;
  font:700 15px/1 "Roboto Condensed",Arial,sans-serif;text-transform:uppercase;letter-spacing:.06em;
  padding:14px 26px;border:0;cursor:pointer;
  clip-path:polygon(0 0,100% 0,100% 34%,calc(100% - 9px) 50%,100% 66%,100% 100%,0 100%);
  transition:background .16s ease,clip-path .16s ease,transform .16s ease;
}
.cta:hover{
  background:var(--cta-hi);color:var(--cta-ink);
  clip-path:polygon(0 0,100% 0,100% 45%,calc(100% - 3px) 50%,100% 55%,100% 100%,0 100%);
}
.cta:active{transform:translateY(1px)}
.cta .chev{width:9px;height:9px;flex:0 0 auto}
.cta.block{width:100%}
.cta.sm{padding:11px 18px;font-size:14px}

/* ---------- TOPLIST: rows made of side-by-side card panels ----------
   Each rank is one row; inside it, 4 discrete panels sit side by side with hairline gaps,
   so it reads as cards-in-a-row, not a table row. */
.toplist{margin:0 0 30px;padding:0;list-style:none}
.trow{
  display:grid;grid-template-columns:68px 1fr 0.98fr 188px;gap:2px;
  background:var(--rule);border:1px solid var(--rule);margin-bottom:10px;
}
.trow>*{background:var(--paper);display:flex;flex-direction:column;justify-content:center}
.trow.top{border-color:var(--beast);box-shadow:0 0 0 1px var(--beast)}

/* panel 1 — rank */
.p-rank{align-items:center;text-align:center;padding:14px 6px;background:var(--paper-2)!important}
.p-rank .n{font:700 30px/1 "Roboto Condensed",Arial,sans-serif;color:var(--beast)}
.p-rank .rib{margin-top:6px;font:700 9px/1.25 "Roboto Condensed",Arial,sans-serif;text-transform:uppercase;
  letter-spacing:.06em;color:#fff;background:var(--beast);padding:3px 5px}

/* panel 2 — brand identity. Chip and text sit SIDE BY SIDE so the column is filled and
   the row stays short (row height is what pushes the toplist below the fold). */
.p-brand{padding:12px 15px;gap:8px}
.p-brand .id{display:flex;align-items:center;gap:12px}
.p-brand .id>div{min-width:0}
.chip{background:var(--paper);border:1px solid var(--rule);height:46px;display:flex;
  align-items:center;justify-content:center;padding:6px;width:112px;flex:0 0 auto}
.chip.tile{border-color:transparent}   /* dark tile set inline per brand for white-on-transparent logos */
.chip img{max-height:100%;max-width:100%;object-fit:contain}
.p-brand .name{font:700 18px/1.2 "Roboto Condensed",Arial,sans-serif;color:var(--ink);margin-bottom:3px}
.rate{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted)}
.rate .stars{color:var(--gold);letter-spacing:1px;font-size:14px}
.rate b{color:var(--ink);font-weight:700}
.pills{display:flex;flex-wrap:wrap;gap:5px}
.pill{font:700 10.5px/1 "Roboto Condensed",Arial,sans-serif;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink);border:1px solid var(--rule);padding:5px 7px;background:var(--paper-2)}

/* panel 3 — THE BONUS EYE-CATCHER (largest type in the row, in the accent, never black) */
.p-bonus{padding:12px 15px;background:var(--beast-wash)!important;gap:3px}
.p-bonus .lab{font:700 10px/1 "Roboto Condensed",Arial,sans-serif;text-transform:uppercase;
  letter-spacing:.11em;color:var(--muted)}
.p-bonus .amt{font:700 clamp(20px,2.3vw,26px)/1.1 "Roboto Condensed",Arial,sans-serif;color:var(--beast)}
.p-bonus .cost{font-size:12.5px;color:var(--body);line-height:1.4}
.p-bonus .code{font-size:12.5px;color:var(--body)}   /* plain inline text, no box (rule 6) */
.p-bonus .code b{font-weight:700;color:var(--ink);letter-spacing:.04em}

/* panel 4 — action */
.p-cta{padding:12px 14px;gap:8px;align-items:stretch}
.p-cta .cta{padding-left:14px;padding-right:20px;letter-spacing:.04em;white-space:nowrap}
.p-cta .rev{font:700 12px/1 "Roboto Condensed",Arial,sans-serif;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);text-decoration:none;text-align:center}
.p-cta .rev:hover{color:var(--beast)}
.p-cta .terms{font-size:10.5px;color:var(--muted);text-align:center;line-height:1.3}

/* ---------- toplist: MOBILE reflow ----------
   Same content, reflowed. Bonus stays the eye-catcher and spans full width; attribute pills sit
   BELOW the bonus amount; CTA is last and full-width. Nothing is hidden (rule 2). */
@media (max-width:860px){
  .trow{grid-template-columns:56px 1fr;gap:1px;margin-bottom:9px}
  .p-rank{flex-direction:column;gap:5px;padding:9px 4px}
  .p-rank .n{font-size:22px}
  .p-rank .rib{margin-top:0;font-size:8.5px;padding:2px 4px}
  .p-brand{padding:10px 13px}
  .p-brand .id{gap:10px}
  .p-brand .chip{width:92px;height:38px;padding:5px}
  .p-brand .name{font-size:16.5px;margin-bottom:2px}
  .p-bonus,.p-cta{grid-column:1 / -1}
  /* Bonus block and CTA read as one CENTRED unit on mobile so the card is balanced rather than
     left-ragged (operator request 2026-07-29). Desktop stays left-aligned in its column. */
  .p-bonus{align-items:center;text-align:center;padding:12px 14px}
  .p-bonus .amt{font-size:24px;line-height:1.15}
  .p-bonus .lab{letter-spacing:.13em}
  .p-bonus .cost,.p-bonus .code{max-width:34ch}
  .p-cta{padding:0 14px 13px;align-items:center}
  .p-cta .cta{width:100%;max-width:340px}
  .p-cta .terms{width:100%}
  /* attribute pills move BELOW the bonus amount on mobile, CTA last (hausstl lesson) */
  .p-brand .pills{display:none}
  .p-bonus .pills{display:flex;margin-top:9px;justify-content:center}
}
@media (min-width:861px){
  .p-bonus .pills{display:none}
}

/* ---------- generic content ---------- */
.sec{padding-top:34px;padding-bottom:34px;border-top:1px solid var(--rule)}
.sec:first-of-type{border-top:0}
.alt{background:var(--paper-2)}
.lead-in{font-size:18px}
table{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 1.2em}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
th{font:700 12px/1.3 "Roboto Condensed",Arial,sans-serif;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink);background:var(--paper-2);border-bottom:2px solid var(--ink)}
td b{color:var(--ink)}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* label/value rows — used instead of decorated cards (see no_generic_ai_containers) */
.lv{display:grid;grid-template-columns:minmax(150px,26%) 1fr;gap:0 18px;margin:0 0 1.2em}
.lv dt{font:700 12px/1.5 "Roboto Condensed",Arial,sans-serif;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);padding:10px 0;border-top:1px solid var(--rule)}
.lv dd{margin:0;padding:10px 0;border-top:1px solid var(--rule)}
@media (max-width:640px){
  .lv{grid-template-columns:1fr;gap:0}
  .lv dt{padding-bottom:0;border-top:1px solid var(--rule)}
  .lv dd{padding-top:2px;border-top:0}
}

/* review block */
.rev-h{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.rev-h .chip{width:118px;height:46px}
.scores{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 22px;margin:0 0 1.1em}
.scores div{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--rule);font-size:14px}
.scores span{color:var(--muted)}
.scores b{color:var(--ink);font-family:"Roboto Condensed",Arial,sans-serif}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.pc h4{margin-bottom:.4em}
.pc ul{list-style:none;padding-left:0;font-size:15px}
.pc li{position:relative;padding-left:17px;margin-bottom:.42em}
.pc .up li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;background:var(--ink);
  clip-path:polygon(50% 0,100% 100%,0 100%)}
.pc .dn li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;background:var(--muted);
  clip-path:polygon(0 0,100% 0,50% 100%)}
@media (max-width:640px){.pc{grid-template-columns:1fr}}

/* FAQ */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;padding:15px 0;font:700 17px/1.35 "Roboto Condensed",Arial,sans-serif;
  color:var(--ink);list-style:none;display:flex;gap:12px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"";flex:0 0 auto;width:10px;height:10px;margin-top:7px;background:var(--beast);
  clip-path:polygon(0 0,100% 50%,0 100%);transition:transform .16s ease}
.faq details[open] summary::before{transform:rotate(90deg)}
.faq .a{padding-bottom:15px}
.faq .a p:last-child{margin-bottom:0}

/* closing band — the second signature moment */
.band{background:var(--chrome);color:#e7e8ea;padding-top:36px;padding-bottom:36px}
.band h2,.band h3{color:#fff}
.band a{color:#fff}

/* author box */
.abox{display:flex;gap:18px;align-items:flex-start;border-top:2px solid var(--ink);padding-top:18px}
.abox img{width:88px;height:88px;border-radius:50%;flex:0 0 auto;object-fit:cover}
.abox .nm{font:700 19px/1.2 "Roboto Condensed",Arial,sans-serif;color:var(--ink);margin-bottom:2px}
.abox .rl{font-size:13px;color:var(--muted);margin-bottom:9px}
@media (max-width:560px){.abox{flex-direction:column;gap:12px}}

/* ---------- footer ---------- */
.foot{background:var(--chrome);color:#a8adb4;padding-top:34px;padding-bottom:26px;font-size:14px}
.foot h4{color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.8em}
.foot a{color:#c9ced4;text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:26px;margin-bottom:24px}
.foot ul{list-style:none;padding-left:0}
.foot li{margin-bottom:.5em}
.foot .logo img{height:40px;margin-bottom:12px}
.foot .rg{border-top:1px solid var(--rule-dk);padding-top:16px;font-size:12.5px;line-height:1.6}
/* #ad / affiliate disclosure lives HERE, at the very bottom — never above a heading (rule 5) */
.foot .disc{margin-top:12px;font-size:12px;color:#8b9197;line-height:1.6}
@media (max-width:760px){.foot .cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot .cols{grid-template-columns:1fr}}

/* ---------- mobile nav (ALL items reachable, incl. the action) ---------- */
@media (max-width:900px){
  .mast .in{padding-top:12px;padding-bottom:12px;gap:12px}
  /* 2x mobile. Reserve room for the hamburger (44px + gap) so the lockup can never push it out. */
  .mast .brand img{max-height:68px;max-width:calc(100vw - 2*var(--gut) - 58px)}
  .burger{display:block}
  .nav{
    display:none;position:static;margin:0;order:3;width:100%;
    flex-direction:column;align-items:stretch;gap:0;
    border-top:1px solid var(--rule-dk);padding-top:6px;margin-top:12px;
  }
  .mast.open .in{flex-wrap:wrap}
  .mast.open .nav{display:flex}
  .nav a{padding:13px 2px;border-bottom:1px solid var(--rule-dk)}
  .nav a:hover{border-bottom-color:var(--rule-dk)}
  .nav .cta{margin-top:12px;width:100%}
}
@media (max-width:640px){
  body{font-size:16.5px}
  /* hero compaction for the fold — smaller type + tighter rhythm, NOTHING hidden (rule 2) */
  .hero{padding-top:16px;padding-bottom:10px}
  h1{font-size:26px;line-height:1.16}
  .hero h1{max-width:none;margin-bottom:.34em}
  .lede{font-size:16px;line-height:1.5;margin-bottom:10px}
  .sec{padding-top:16px;padding-bottom:22px}
  h2{font-size:22px;margin-bottom:.42em}
  .byline{gap:10px;padding-top:8px;padding-bottom:8px;margin-bottom:12px}
  .byline img{width:36px;height:36px}
  .byline .who{font-size:14px}
  .byline .role{font-size:12px}
  /* keep the meta on the same row, just smaller — wrapping it added ~60px of fold */
  .byline .meta{gap:11px;font-size:11px}
  .byline .meta b{font-size:10.5px;letter-spacing:.04em}
}
/* Small phones (360x640 class). Squeeze spacing ONLY — every element stays present and
   full-size enough to read, so the whole first card incl. its CTA clears a 640px fold.
   ⛔ do NOT display:none anything here — rule 2 forbids hiding real content on mobile. */
@media (max-width:400px){
  /* Tightened again after the masthead logo doubled (+34px). Spacing only: the logo size is an
     operator decision and every element stays present and legible (rule 2). */
  .mast .in{padding-top:9px;padding-bottom:9px}
  .hero{padding-top:9px;padding-bottom:6px}
  h1{font-size:24px}
  .lede{margin-bottom:7px}
  .byline{padding-top:5px;padding-bottom:5px;margin-bottom:8px}
  .sec{padding-top:10px}
  .p-rank{padding:6px 4px}
  .p-brand{padding:7px 12px}
  .p-bonus{padding:8px 12px;gap:2px}
  .p-bonus .amt{font-size:22px}
  .p-bonus .pills{margin-top:6px}
  .p-cta{padding:0 12px 9px}
  .cta{padding-top:11px;padding-bottom:11px}
  /* the 3 meta values were breaking mid-value ("29 July / 2026"). Give them their own tidy
     row under the author instead — costs ~22px, which the fold budget can absorb. */
  .byline{flex-wrap:wrap}
  .byline .meta{width:100%;margin-left:0;margin-top:7px;padding-top:6px;text-align:left;
    border-top:1px solid var(--rule);gap:14px}
  .byline .meta div{white-space:nowrap}
  .byline .meta b{display:inline;margin-right:5px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}