/* ==========================================================================
   BetTOM.co landing — "The Shop Slip"
   Tokens, base, buttons, wordmark, stamps, paper and footer are copied from
   the main site (assets/css/main.css) so the two stay visually identical.
   Blocks follow BEM: .block, .block__element, .block--modifier.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Red Hat Mono";
  src: url("../fonts/red-hat-mono.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --paper: #ffffff;
  --paper-dim: #f6f6f4;

  --tint-sport: #f5d9de;
  --tint-sport-deep: #ecc2ca;
  --tint-racing: #f6e3a1;
  --tint-racing-deep: #eed27a;
  --tint-casino: #cfe1ef;
  --tint-casino-deep: #b6d0e4;
  --tint-info: #e3e7ea;
  --tint-info-deep: #cfd5da;

  --ink: #151515;
  --ink-soft: #3d3d3d;
  --ink-mute: #555555;
  --red: #b42318;
  --red-hover: #931c13;
  --pen: #1c3d9a;
  --ok: #1d6b35;

  --rule: rgba(180, 35, 24, 0.42);
  --rule-soft: rgba(180, 35, 24, 0.2);
  --hair: rgba(21, 21, 21, 0.12);

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Red Hat Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --gutter: clamp(16px, 3vw, 32px);
  --max: 1360px;
  --radius: 2px;

  --lift: 0 1px 1px rgba(21, 21, 21, 0.06), 0 10px 24px -14px rgba(60, 20, 20, 0.38);
  --lift-hi: 0 2px 2px rgba(21, 21, 21, 0.07), 0 18px 32px -16px rgba(60, 20, 20, 0.45);

  --tint: var(--tint-sport);
  --tint-deep: var(--tint-sport-deep);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--red) transparent; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--tint);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  font-variant-numeric: lining-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--pen); color: #fff; }
img, svg { display: block; max-width: 100%; }
a { color: var(--pen); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { margin: 0; line-height: 1.1; text-wrap: balance; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- buttons ---------- */
.btn {
  --btn-h: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-h);
  padding: 0 20px;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font);
  font-stretch: 78%;
  font-weight: 750;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.btn:active { transform: translateY(1px); }
.btn--lg { --btn-h: 54px; padding: 0 28px; font-size: 1.0625rem; }
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-hover); }
.btn--line { background: var(--paper); color: var(--red); border-color: var(--red); }
.btn--line:hover { background: var(--red); color: #fff; }
.btn .icon { width: 1.1em; height: 1.1em; }

/* ---------- header ---------- */
.site-header {
  position: relative;
  z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--red);
  box-shadow: 0 3px 0 -1px var(--paper), 0 4px 0 -1px var(--red);
}
.site-header__bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px var(--gutter);
  min-height: 68px;
}
.site-header__tag { font-stretch: 78%; font-weight: 750; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.site-header__actions { display: flex; align-items: center; gap: 10px; }

.wordmark {
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
  font-family: var(--font);
  font-stretch: 66%;
  font-weight: 900;
  font-size: 2.125rem;
  line-height: 1;
  letter-spacing: -0.01em;
}
.wordmark__bet { color: var(--red); }
.wordmark__tom {
  margin-left: 3px;
  padding: 2px 6px 1px;
  background: var(--red);
  color: #fff;
  letter-spacing: 0.02em;
}
.wordmark--static { font-size: 1.5rem; }

/* ---------- stamps, perforation, paper ---------- */
.stamp {
  display: inline-block;
  padding: 4px 7px 3px;
  border: 2px solid currentColor;
  border-radius: 3px;
  outline: 1px solid currentColor;
  outline-offset: 1px;
  font-stretch: 72%;
  font-weight: 850;
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-2.5deg);
}
.stamp--ok { color: var(--ok); }
.stamp--stop { color: var(--red); }
.stamp--lg { font-size: 1.125rem; padding: 7px 12px 6px; border-width: 3px; }

.perf {
  position: relative;
  height: 14px;
  margin: 0 -16px;
  background: radial-gradient(circle, rgba(21, 21, 21, 0.2) 1.4px, transparent 1.9px) 4px center / 9px 14px repeat-x;
}
.perf::before, .perf::after {
  content: "";
  position: absolute;
  top: 0;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--tint);
}
.perf::before { left: -7px; }
.perf::after { right: -7px; }

.paper { position: relative; background: var(--paper); box-shadow: var(--lift); }
.paper--torn { padding-top: 8px; }
.paper--torn::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 8px;
  background: radial-gradient(circle at 6px -1px, var(--tint) 5px, transparent 5.5px) 0 0 / 12px 8px repeat-x;
}

/* ---------- section heads ---------- */
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--red); margin-bottom: 16px; }
.section__title { font-stretch: 70%; font-weight: 800; font-size: 1.5rem; letter-spacing: 0.02em; text-transform: uppercase; }
.section__link { display: inline-flex; align-items: center; gap: 4px; font-weight: 650; font-size: 0.875rem; color: var(--red); text-decoration: none; white-space: nowrap; }
.section__link:hover { text-decoration: underline; }
.section__link .icon { width: 1em; height: 1em; }

/* ---------- screen 1: hero ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.85fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  min-height: calc(100vh - 68px);
  min-height: calc(100svh - 68px);
  padding: clamp(28px, 5vh, 56px) 0 clamp(32px, 6vh, 64px);
}
.hero__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-bottom: 22px; }
.hero__kicker-text { font-size: 0.875rem; font-weight: 600; color: var(--ink-soft); }
.hero__title {
  font-stretch: 64%;
  font-weight: 850;
  font-size: clamp(2.75rem, 1.6rem + 4.2vw, 5.25rem);
  line-height: 0.92;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  max-width: 14ch;
}
.hero__lede { max-width: 54ch; margin-top: 20px; font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem); color: var(--ink-soft); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.hero__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; margin-top: 30px; padding-top: 18px; border-top: 1px dashed var(--rule); }
.hero__facts li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.9375rem; font-weight: 550; }
.hero__facts .icon { width: 20px; height: 20px; color: var(--red); margin-top: 1px; }

/* the example slip */
.slip { padding: 18px 16px 20px; box-shadow: var(--lift-hi); transform: rotate(1.2deg); }
.slip__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--red); }
.slip__ref { display: inline-flex; align-items: center; gap: 10px; font-size: 0.75rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.slip__lines { margin: 0; padding: 0; }
.slip__line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "sport price" "pick price" "event price";
  gap: 2px 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.slip__line:last-child { border-bottom: 0; }
.slip__sport { grid-area: sport; display: flex; align-items: center; gap: 6px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); }
.slip__sport .icon { width: 16px; height: 16px; }
.slip__pick { grid-area: pick; font-weight: 750; font-size: 1.0625rem; line-height: 1.2; }
.slip__event { grid-area: event; font-size: 0.8125rem; color: var(--ink-mute); }
.slip__price {
  grid-area: price;
  display: grid; place-items: center;
  min-width: 62px; height: 44px;
  padding: 0 10px;
  border: 1.5px solid var(--ink);
  font-weight: 600;
  font-size: 1.125rem;
}
.slip__totals { display: grid; gap: 6px; margin-top: 14px; }
.slip__totals > div { display: flex; justify-content: space-between; gap: 12px; font-size: 0.9375rem; }
.slip__totals dt { color: var(--ink-soft); }
.slip__totals dd { font-weight: 600; }
.slip__return { padding-top: 8px; border-top: 1px solid var(--rule); font-weight: 750; }
.slip__return dt { color: var(--ink); }
.slip__return dd { font-size: 1.375rem; color: var(--red); }
.slip__note { margin-top: 16px; padding-top: 10px; border-top: 1px dashed var(--rule); font-size: 0.75rem; color: var(--ink-mute); }

/* ---------- screen 2: offer, steps, trust ---------- */
.offer { padding: clamp(28px, 5vh, 56px) 0 clamp(36px, 6vh, 64px); }
.offer__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.offer__card { --card: var(--tint-info); --card-deep: var(--tint-info-deep); }
.offer__card--sport { --card: var(--tint-sport); --card-deep: var(--tint-sport-deep); }
.offer__card--racing { --card: var(--tint-racing); --card-deep: var(--tint-racing-deep); }
.offer__card--casino { --card: var(--tint-casino); --card-deep: var(--tint-casino-deep); }
.offer__link {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  height: 100%;
  padding: 20px 20px 22px;
  background: var(--paper);
  border-top: 4px solid var(--card-deep);
  box-shadow: var(--lift);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.offer__link::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 96px;
  background: linear-gradient(var(--card), transparent);
  opacity: 0.55;
  pointer-events: none;
}
.offer__link:hover { transform: translateY(-2px); box-shadow: var(--lift-hi); }
.offer__link > * { position: relative; }
.offer__icon { display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid var(--red); border-radius: 50%; color: var(--red); background: var(--paper); }
.offer__icon .icon { width: 26px; height: 26px; stroke-width: 1.5; }
.offer__name { margin-top: 6px; font-stretch: 72%; font-weight: 850; font-size: 1.5rem; letter-spacing: 0.02em; text-transform: uppercase; }
.offer__text { font-size: 0.9375rem; color: var(--ink-soft); }
.offer__games { display: flex; gap: 6px; margin-top: 4px; }
.offer__games img { width: 56px; height: 56px; border: 1px solid var(--hair); }
.offer__more { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 10px; font-weight: 700; font-size: 0.875rem; color: var(--red); }
.offer__more .icon { width: 1em; height: 1em; }

.start { margin-top: clamp(28px, 4vh, 44px); }
.getting-started { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: gs; }
.getting-started__step { position: relative; padding: 16px 18px 18px 0; counter-increment: gs; }
.getting-started__step + .getting-started__step { padding-left: 18px; border-left: 1px dashed var(--rule); }
.getting-started__step::before {
  content: counter(gs);
  display: grid; place-items: center;
  width: 34px; height: 34px; margin-bottom: 10px;
  border: 2px solid var(--red); border-radius: 50%;
  font-stretch: 70%; font-weight: 850; font-size: 1.125rem; color: var(--red);
}
.getting-started__title { font-weight: 750; font-size: 1.0625rem; margin-bottom: 4px; }
.getting-started__text { font-size: 0.9375rem; color: var(--ink-soft); }

.band {
  position: relative;
  margin-top: clamp(28px, 4vh, 44px);
  padding: 26px clamp(16px, 2.5vw, 28px) 28px;
  background: var(--band, var(--paper));
}
.band::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -1px; height: 8px;
  background: radial-gradient(circle at 6px -1px, var(--tint) 5px, transparent 5.5px) 0 0 / 12px 8px repeat-x;
}
.band--info { --band: var(--tint-info); }
.trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 24px 28px; align-items: center; }
.trust__item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; }
.trust__item > .icon { width: 30px; height: 30px; color: var(--red); stroke-width: 1.5; }
.trust__item strong { display: block; font-weight: 750; margin-bottom: 4px; }
.trust__item p { font-size: 0.875rem; color: var(--ink-soft); }
.trust__cta { display: flex; align-items: center; gap: 16px; padding-left: 24px; border-left: 1px dashed var(--rule); }
.trust__age { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border: 3px solid var(--red); border-radius: 50%; font-stretch: 66%; font-weight: 900; font-size: 1.375rem; color: var(--red); }

/* ---------- footer (from the main site) ---------- */
.site-footer {
  position: relative;
  background: var(--paper);
  border-top: 1px solid var(--red);
  box-shadow: 0 -3px 0 -1px var(--paper), 0 -4px 0 -1px var(--red);
  margin-top: 8px;
}
.site-footer__inner { max-width: var(--max); margin: 0 auto; padding: 34px var(--gutter) 40px; }
.site-footer__primary, .site-footer__secondary { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-footer__primary a { color: var(--ink); font-stretch: 80%; font-weight: 750; font-size: 0.9375rem; letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none; }
.site-footer__primary a:hover { color: var(--red); }
.site-footer__secondary { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--rule); }
.site-footer__secondary a { color: var(--ink-soft); font-size: 0.875rem; }
.site-footer__legal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 26px; font-size: 0.8125rem; color: var(--ink-soft); }
.site-footer__company strong { color: var(--ink); }
.reg-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin: 26px 0 0; padding: 20px 0 0; border-top: 1px solid var(--rule-soft); }
.reg-marks img { height: auto; }
.reg-marks a[href*="gamcare"] { display: grid; place-items: center; width: 42px; height: 42px; background: var(--ink); }
.reg-marks__age img { filter: brightness(0.35); }
.reg-marks__text { padding: 6px 10px; border: 1.5px solid var(--ink); color: var(--ink); font-stretch: 78%; font-weight: 800; font-size: 0.8125rem; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; }
.site-footer__copy { margin-top: 18px; font-size: 0.75rem; color: var(--ink-mute); }

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr); gap: 32px; }
  .trust { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trust__cta { grid-column: 1 / -1; padding-left: 0; padding-top: 18px; border-left: 0; border-top: 1px dashed var(--rule); }
}
@media (max-width: 839px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .slip { max-width: 440px; transform: none; }
  .offer__grid { grid-template-columns: 1fr; }
  .offer__link { padding: 18px 18px 20px; }
  .trust { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 719px) {
  .site-header__bar { grid-template-columns: auto auto; justify-content: space-between; gap: 12px; }
  .site-header__tag { display: none; }
  .wordmark { font-size: 1.75rem; }
  .btn { padding: 0 14px; font-size: 0.875rem; }
  .btn--lg { --btn-h: 50px; padding: 0 20px; font-size: 1rem; }
  .hero__title { font-size: clamp(2.5rem, 1.5rem + 6vw, 3.5rem); }
  .hero__facts { grid-template-columns: 1fr; }
  .getting-started { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .getting-started__step:nth-child(3) { padding-left: 0; border-left: 0; }
  .getting-started__step:nth-child(n + 3) { border-top: 1px dashed var(--rule); }
  .site-footer__legal { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 400px) {
  .hero__actions .btn { width: 100%; }
  .site-header__actions .btn { padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .offer__link, .btn { transition: none; }
}