/* divaspinitalia.com brand layer on top of the ported R2 kit.
   Loaded last: holds the drawer backdrop, scroll lock and the few components
   this site adds (checklist, step list, comparison table, FAQ). */

/* ══════════════════════════════════════════════════════════════════
   Layout corrections to the ported kit.

   The R2 kit was tuned for divspin.com's short display headlines and its
   own vertical scale. Ported as-is it produced, on this site:
     * 340px+ of empty space between sections (13vw + 11vw paddings stacking);
     * 72px section headings that wrapped and pushed their side link out;
     * a hero whose headline broke into five ragged lines while the artwork
       fell below the fold;
     * body copy pinned left in a 1440px container, leaving half the screen
       empty;
     * slot captions painted over cover art that already carries its own
       game title, which is unreadable at 390px.
   These blocks fix that. They live here rather than in the ported files so
   the port stays diffable against divspin.com.
   ══════════════════════════════════════════════════════════════════ */

/* ---------- vertical rhythm ---------- */
.r2-page .r2-section,
.r2-page .r2-slot-listing,
.r2-page .r2-data-table,
.r2-page .r2-sitemap { padding-block: clamp(3rem, 5.5vw, 5rem); }
.r2-page .r2-offers { padding-top: clamp(3rem, 5.5vw, 5rem); }
.r2-page .r2-slot-listing { padding-top: clamp(3rem, 5.5vw, 5rem); }
.r2-page .r2-author { margin: 1rem 0 clamp(2rem, 4vw, 3rem); }

/* ---------- heading scale ---------- */
.r2-page .r2-section-head h2,
.r2-page .r2-slot-listing h2,
.r2-page .r2-guide__intro h2,
.r2-page .r2-offers__top h2,
.r2-page .r2-footer h2,
.r2-page .r2-data-table h2 {
  max-width: 20ch;
  font-size: clamp(1.85rem, 3.1vw, 2.9rem);
  line-height: 1.02;
  letter-spacing: -.045em;
}
.r2-page .r2-guide__item h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); }
.r2-page .r2-section-head { margin-bottom: 2rem; }

/* The side link sat on the heading baseline and broke mid-phrase. */
.r2-page .r2-slot-listing__head { align-items: center; }
.r2-page .r2-slot-listing__head > a { flex: 0 0 auto; white-space: nowrap; }

/* ---------- hero ---------- */
/* Three children in a two-column grid pushed the artwork onto a second row,
   below the fold. Place them explicitly: copy stacks in the left column, the
   artwork holds the right column across both rows. */
.r2-page .r2-hero {
  min-height: auto;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, .8fr);
  grid-template-rows: auto auto;
  gap: clamp(1.25rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(2rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4rem);
}
/* Placement is keyed to explicit classes. An earlier :first-of-type selector
   also matched the <figure>, because :first-of-type counts per element type,
   and outranked the figure's own rule. */
.r2-page .r2-hero .r2-hero-head { grid-column: 1; grid-row: 1; }
.r2-page .r2-hero .r2-hero-copy { grid-column: 1; grid-row: 2; align-self: start; }
.r2-page .r2-hero .r2-orbit { grid-column: 2; grid-row: 1 / span 2; justify-self: center; }

@media (max-width: 900px) {
  .r2-page .r2-hero { grid-template-columns: 1fr; }
  .r2-page .r2-hero .r2-hero-head,
  .r2-page .r2-hero .r2-hero-copy,
  .r2-page .r2-hero .r2-orbit { grid-column: 1; grid-row: auto; }
  .r2-page .r2-hero .r2-orbit { order: 3; justify-self: center; }
}
.r2-page .r2-hero h1 {
  max-width: 17ch;
  font-size: clamp(2.15rem, 4.4vw, 3.9rem);
  line-height: 1;
  letter-spacing: -.045em;
}
/* The accent word was violet while every other accent on the site is gold,
   which read as a mistake rather than a choice. */
.r2-page .r2-hero h1 em { color: var(--r2-signal); }
.r2-page .r2-hero .r2-lead { font-size: clamp(1rem, 1.25vw, 1.15rem); }
.r2-page .r2-hero-copy { align-self: center; max-width: 32rem; padding-bottom: 0; }
.r2-page .r2-orbit { max-width: 26rem; align-self: center; }

/* The update stamp floated alone in the top-right corner; it now sits on the
   kicker line inside the headline cell. */
.r2-page .r2-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem .9rem;
  margin-bottom: 1.1rem !important;
}
.r2-page .r2-route-banner__date {
  position: static;
  display: inline-block;
  inset: auto;
  margin: 0;
  padding: .32rem .55rem;
  border: 1px solid var(--r2-line);
  border-radius: .35rem;
  color: var(--r2-dim);
  font: 500 .58rem var(--r2-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Conversion routes start with the decision, not with a poster. */
.r2-page .r2-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(18rem, .82fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(1.4rem, 3vw, 2.5rem);
}
.r2-page .r2-intro h1 {
  max-width: 15ch;
  font: 700 clamp(2.45rem, 5.6vw, 5.6rem)/.92 var(--r2-display);
  letter-spacing: -.07em;
  text-wrap: balance;
}
.r2-page .r2-intro h1 em { color: var(--r2-signal); font-style: normal; }
.r2-page .r2-intro__copy { max-width: 34rem; padding-bottom: .25rem; }
.r2-page .r2-intro .r2-route-link { margin-top: 1.2rem; }
.r2-page .r2-intro + .r2-offers {
  padding-top: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid var(--r2-line);
}
.r2-page .r2-intro + .r2-offers::before { top: .8rem; }
.r2-page .r2-feature-visual {
  position: relative;
  min-height: clamp(18rem, 38vw, 34rem);
  margin: clamp(2.5rem, 6vw, 5rem) 0 1rem;
  overflow: hidden;
  border: 1px solid var(--r2-line);
  border-radius: 1.25rem;
  background: #171526;
}
.r2-page .r2-feature-visual img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; }
.r2-page .r2-feature-visual::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(7,8,14,.78)); }
.r2-page .r2-feature-visual figcaption {
  position: absolute; z-index: 1; inset: auto 1.2rem 1.1rem;
  color: var(--r2-warm); font: 500 .65rem/1.45 var(--r2-mono); letter-spacing: .04em;
}
@media (max-width: 800px) {
  .r2-page .r2-intro { grid-template-columns: 1fr; gap: 1rem; padding-top: 1.5rem; }
  .r2-page .r2-intro h1 { font-size: clamp(2.35rem, 12vw, 3.7rem); }
  .r2-page .r2-intro__copy { max-width: none; }
  .r2-page .r2-intro + .r2-offers { padding-top: 2rem; }
  .r2-page .r2-intro + .r2-offers .r2-offers__top { margin-bottom: 1rem; }
  .r2-page .r2-intro + .r2-offers .r2-offers__top > p { display: none; }
  .r2-page .r2-intro + .r2-offers .r2-offers__top h2 { font-size: 1.85rem; }
  .r2-page .r2-feature-visual { min-height: 16rem; border-radius: .9rem; }
}
@media (min-width: 801px) {
  .r2-page .r2-offer[data-edge-card="2"] { order: 1; }
  .r2-page .r2-offer[data-edge-card="1"] { order: 2; }
  .r2-page .r2-offer[data-edge-card="3"] { order: 3; }
}

/* ---------- editorial column ---------- */
.r2-page .content-block.r2-prose {
  max-width: 48rem;
  margin-inline: auto;
  padding-block: clamp(2rem, 4vw, 3.5rem);
}
.r2-page .content-block.r2-prose > * { max-width: none; }
.r2-page .content-block.r2-prose p,
.r2-page .content-block.r2-prose ul,
.r2-page .content-block.r2-prose ol { max-width: 68ch; }
.r2-page .content-block.r2-prose .r2-figure { max-width: none; }

/* ---------- slot cards: caption below the cover, not on top of it ---------- */
.r2-page .r2-slot-card {
  display: grid;
  grid-template-rows: auto auto;
  min-height: 0;
  align-content: start;
}
.r2-page .r2-slot-card,
.r2-page .r2-slot-card:nth-child(1),
.r2-page .r2-slot-card:nth-child(2),
.r2-page .r2-slot-card:nth-child(3),
.r2-page .r2-slot-card:nth-child(4),
.r2-page .r2-slot-card:nth-child(5),
.r2-page .r2-slot-card:nth-child(n+6) { grid-column: span 3; min-height: 0; }
.r2-page .r2-slot-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.r2-page .r2-slot-card::after { content: none; }
.r2-page .r2-slot-card__label {
  position: static;
  inset: auto;
  display: block;
  padding: .85rem .95rem 1rem;
  border-top: 1px solid var(--r2-line);
  background: rgba(12, 9, 22, .92);
}
.r2-page .r2-slot-card__label strong {
  display: block;
  font-size: 1.02rem;
  line-height: 1.2;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.r2-page .r2-slot-card__label small { font-size: .56rem; }

@media (max-width: 1100px) {
  .r2-page .r2-slot-card,
  .r2-page .r2-slot-card:nth-child(n) { grid-column: span 4; }
}
@media (max-width: 800px) {
  .r2-page .r2-slot-card,
  .r2-page .r2-slot-card:nth-child(n) { grid-column: span 6; }
  .r2-page .r2-hero h1 { max-width: 14ch; }
  .r2-page .content-block.r2-prose { max-width: none; }
}

/* ---------- drawer: backdrop + scroll lock ---------- */
.r2-drawer-open,
.r2-drawer-open body { overflow: hidden; }

.r2-backdrop {
  position: fixed;
  inset: 0;
  z-index: 14;
  background: rgba(6, 4, 12, .68);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
.r2-drawer[data-open="true"] ~ .r2-backdrop,
.r2-backdrop[data-open="true"] { opacity: 1; visibility: visible; }

.r2-drawer [data-r2-close] {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: .5rem .75rem;
  border-radius: .5rem;
  border: 1px solid var(--r2-line);
}
.r2-drawer [data-r2-close]:hover { color: var(--r2-signal); border-color: var(--r2-signal); }

/* ---------- breadcrumb ---------- */
.r2-breadcrumb {
  max-width: 90rem;
  margin: auto;
  padding: 1rem 1.5rem 0;
  font: 500 .68rem/1.4 var(--r2-mono);
  letter-spacing: .05em;
  color: var(--r2-dim);
}
.r2-breadcrumb ol { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.r2-breadcrumb li + li::before { content: "/"; margin-right: .45rem; opacity: .55; }
.r2-breadcrumb a:hover { color: var(--r2-signal); }
.r2-breadcrumb [aria-current] { color: var(--r2-paper); }

/* ---------- checklist ---------- */
.r2-checklist {
  display: grid;
  gap: .75rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.r2-checklist li {
  position: relative;
  padding: 1rem 1.1rem 1rem 3rem;
  border: 1px solid var(--r2-line);
  border-radius: .85rem;
  background: rgba(20, 16, 36, .6);
  color: var(--r2-warm);
  font-size: .89rem;
  line-height: 1.6;
}
.r2-checklist li::before {
  content: "✓";
  position: absolute;
  left: 1.1rem;
  top: 1rem;
  color: var(--r2-signal);
  font-weight: 700;
}
.r2-checklist strong { display: block; margin-bottom: .25rem; color: var(--r2-paper); }

/* ---------- numbered steps ---------- */
.r2-steps { counter-reset: r2step; display: grid; gap: .85rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.r2-steps li {
  counter-increment: r2step;
  position: relative;
  padding: 1.1rem 1.2rem 1.1rem 3.4rem;
  border: 1px solid var(--r2-line);
  border-left: 2px solid var(--r2-signal);
  border-radius: .85rem;
  background: rgba(20, 16, 36, .5);
  color: var(--r2-warm);
  font-size: .89rem;
  line-height: 1.6;
}
.r2-steps li::before {
  content: counter(r2step);
  position: absolute;
  left: 1.15rem;
  top: 1.05rem;
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: var(--r2-signal);
  color: var(--r2-ink);
  font: 700 .74rem var(--r2-mono);
}
.r2-steps strong { display: block; margin-bottom: .25rem; color: var(--r2-paper); }

/* ---------- comparison table ---------- */
.r2-table-wrap { margin: 2rem 0 0; overflow-x: auto; border: 1px solid var(--r2-line); border-radius: 1rem; }
.r2-table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .85rem; }
.r2-table caption { padding: 1rem 1.2rem; text-align: left; color: var(--r2-dim); font: 500 .66rem var(--r2-mono); letter-spacing: .09em; text-transform: uppercase; }
.r2-table th, .r2-table td { padding: .9rem 1.2rem; text-align: left; border-top: 1px solid var(--r2-line); vertical-align: top; line-height: 1.55; }
.r2-table thead th { color: var(--r2-signal); font: 600 .66rem var(--r2-mono); letter-spacing: .09em; text-transform: uppercase; }
.r2-table tbody th { color: var(--r2-paper); font-weight: 600; }
.r2-table td { color: var(--r2-warm); }

/* ---------- FAQ ---------- */
.r2-faq { display: grid; gap: .6rem; margin: 2rem 0 0; }
.r2-faq details {
  border: 1px solid var(--r2-line);
  border-radius: .85rem;
  background: rgba(20, 16, 36, .5);
}
.r2-faq summary {
  padding: 1rem 1.2rem;
  cursor: pointer;
  color: var(--r2-paper);
  font: 600 .95rem var(--r2-body);
  list-style: none;
}
.r2-faq summary::-webkit-details-marker { display: none; }
.r2-faq summary::after { content: "+"; float: right; color: var(--r2-signal); font-weight: 700; }
.r2-faq details[open] summary::after { content: "–"; }
.r2-faq details[open] summary { border-bottom: 1px solid var(--r2-line); }
.r2-faq p { padding: 1rem 1.2rem; margin: 0; color: var(--r2-warm); font-size: .88rem; line-height: 1.65; }

/* ---------- help callout (responsible play) ---------- */
.r2-help {
  margin: 2rem 0 0;
  padding: 1.4rem 1.5rem;
  border: 1px solid rgba(242, 198, 92, .38);
  border-radius: 1rem;
  background: rgba(242, 198, 92, .07);
}
.r2-help h3 { margin-bottom: .5rem; color: var(--r2-signal); font: 700 1.05rem var(--r2-display); }
.r2-help p { color: var(--r2-paper); font-size: .9rem; line-height: 1.65; }
.r2-help a { border-bottom: 1px solid var(--r2-signal); color: var(--r2-signal); }

/* ---------- prose rhythm inside the editorial block ---------- */
.r2-prose h2 { margin: 3rem 0 .9rem; font: 800 clamp(1.5rem, 2.6vw, 2.1rem)/1.05 var(--r2-display); letter-spacing: -.045em; }
.r2-prose h3 { margin: 2rem 0 .7rem; font: 700 clamp(1.1rem, 1.8vw, 1.35rem)/1.2 var(--r2-display); letter-spacing: -.02em; }
.r2-prose p { margin: 0 0 1.05rem; max-width: 74ch; color: var(--r2-warm); font-size: .95rem; line-height: 1.72; }
.r2-prose ul, .r2-prose ol { margin: 0 0 1.4rem; padding-left: 1.3rem; max-width: 74ch; color: var(--r2-warm); font-size: .93rem; line-height: 1.7; }
.r2-prose li { margin-bottom: .5rem; }
.r2-prose strong { color: var(--r2-paper); }
.r2-prose a { border-bottom: 1px solid rgba(242, 198, 92, .5); color: var(--r2-signal); }
.r2-prose a:hover { border-bottom-color: var(--r2-signal); }

@media (max-width: 800px) {
  .r2-prose p, .r2-prose ul, .r2-prose ol { font-size: .92rem; }
  .r2-checklist li, .r2-steps li { font-size: .88rem; }
}

/* ---------- editorial figures inside the prose ---------- */
.r2-figure {
  margin: 2.5rem 0 2.75rem;
  max-width: 46rem;
}
.r2-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--r2-line);
  border-radius: 1rem;
  background: rgba(20, 16, 36, .55);
}
.r2-figure img[src$=".svg"] {
  aspect-ratio: 16 / 7;
  object-fit: contain;
  padding: 1.25rem;
}
.r2-figure figcaption {
  margin-top: .8rem;
  padding-left: .9rem;
  border-left: 2px solid var(--r2-signal);
  color: var(--r2-dim);
  font-size: .82rem;
  line-height: 1.6;
}

/* ---------- thematic icon row ---------- */
.r2-icon-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  /* Overrides the .r2-prose ul reading measure: this row is a layout band,
     not body copy, so it spans the content column instead of 74ch. */
  max-width: none;
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
}
.r2-icon-row li {
  display: grid;
  gap: .55rem;
  place-items: center;
  padding: 1.1rem .7rem;
  border: 1px solid var(--r2-line);
  border-radius: .9rem;
  background: rgba(20, 16, 36, .5);
  text-align: center;
}
.r2-icon-row img { width: 1.9rem; height: 1.9rem; }
.r2-icon-row span {
  color: var(--r2-warm);
  font: 500 .68rem/1.35 var(--r2-mono);
  letter-spacing: .03em;
}

/* ---------- payment category strip ---------- */
.r2-payment-strip {
  max-width: 90rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) 1.5rem;
}
.r2-payment-strip ul {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.r2-payment-strip li {
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 3.25rem;
  padding: .55rem;
  border: 1px solid var(--r2-line);
  border-radius: .7rem;
  background: rgba(244, 241, 234, .93);
}
.r2-payment-strip img { max-width: 100%; max-height: 100%; object-fit: contain; }
.r2-payment-strip__note {
  margin-top: 1rem;
  max-width: 60ch;
  color: var(--r2-dim);
  font-size: .8rem;
  line-height: 1.6;
}

@media (max-width: 800px) {
  .r2-icon-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r2-figure { margin: 2rem 0 2.25rem; }
  .r2-payment-strip li { width: 4.6rem; height: 2.9rem; }
}

/* ---------- visually hidden ---------- */
.r2-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}