/* Roadworthy — house promo card. Shared by the site and the defect app, so every
   colour goes through var() WITH a fallback: the two apps name their tokens
   differently (--navy exists in both, --surface only on the site) and the card has
   to look native in either, in light and dark.

   Loud on purpose. The first version was a tasteful bordered link and it read as a
   footnote — John's note, and he was right. This one borrows the site's own hi-vis
   language (the hazard stripe from the page header, the amber price flash, a real
   button) so it stops the eye without needing a third-party ad network or a single
   image byte.

   Deliberately LIGHT, not another dark panel: on the guide pages it sits below a navy
   CTA and a navy-2 signup card, and a third dark block in a row just merges into one
   grey mass. Contrast is what makes it visible, not weight.

   No product imagery: only three of the eight products have a hero image and they are
   1.5MB PNGs. A promo that costs a second of load time on a page built to earn trust
   is a bad trade. */

.rw-promo:empty { display: none; }
.rw-promo { margin: 30px 0; }

.rwp {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--surface, #fff);
  border: 2px solid var(--line, #d5deee);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 6px 22px rgba(31, 56, 100, .10);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
/* The site's signature hazard stripe, straight off the page header — the one mark
   that says "this is ours" before a word is read. */
.rwp::before {
  content: "";
  display: block;
  height: 7px;
  background: repeating-linear-gradient(-45deg,
      var(--amber-2, #f5a300) 0 16px,
      var(--navy, #1f3864) 16px 32px);
}
.rwp:hover {
  transform: translateY(-2px);
  border-color: var(--amber-2, #f5a300);
  box-shadow: 0 12px 30px rgba(31, 56, 100, .18);
}

/* display:block is load-bearing, not tidiness. Every element in this card is a <span>
   (the whole card is one <a>, and a <div> inside an <a> is legal but a <span> keeps it
   unambiguous). An inline box's horizontal padding does not contain block children, so
   without this the product name and button sat flush against the card border. */
.rwp-body { display: block; padding: 15px 17px 17px; }

.rwp-top {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.rwp-kick {
  font-family: var(--mono, ui-monospace, Consolas, monospace);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint, #7d8aa3);
}
/* Only set where it says something concrete and true — "SAVE £1.99", "3 CHECKS FREE".
   A badge on everything is a badge on nothing. */
.rwp-badge {
  font-family: var(--mono, ui-monospace, Consolas, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--navy, #1f3864);
  color: #fff;
  white-space: nowrap;
}

/* The price, as a hi-vis flash rather than a line of text. */
.rwp-price {
  margin-left: auto;
  font-weight: 800;
  font-size: 14.5px;
  line-height: 1;
  padding: 7px 12px;
  border-radius: 9px;
  background: var(--amber, #ffb703);
  color: #14264a;
  white-space: nowrap;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .12);
}

.rwp-name {
  display: block;
  font-size: 18.5px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ink, #16233c);
}
.rwp-blurb {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted, #51617e);
  margin-top: 6px;
}

.rwp-go {
  display: inline-block;
  margin-top: 14px;
  padding: 11px 20px;
  border-radius: 10px;
  background: var(--amber, #ffb703);
  color: #14264a;
  font-weight: 800;
  font-size: 14.5px;
  line-height: 1;
}
.rwp:hover .rwp-go { background: var(--amber-2, #f5a300); }

@media (max-width: 420px) {
  .rwp-go { display: block; text-align: center; }
  .rwp-price { margin-left: 0; }
}

/* Dark mode (the site only — the defect app declares data-theme="light"). Amber on
   dark keeps its punch, so the flash and button stay as they are; only the plain text
   needs its tokens, which it already inherits. */
:root[data-theme="dark"] .rwp { box-shadow: 0 6px 22px rgba(0, 0, 0, .35); }
:root[data-theme="dark"] .rwp-badge { background: var(--navy-2, #24406f); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rwp { box-shadow: 0 6px 22px rgba(0, 0, 0, .35); }
  :root:not([data-theme="light"]) .rwp-badge { background: var(--navy-2, #24406f); }
}