/* R11.1 homepage opening.
   Same copy, offers, conditions and destinations as R9.1, in the same DOM order
   as the rebuilt page: the builder reorders real blocks, this sheet only spaces
   them. Reading path is headline, one compact preamble line, the listing label,
   the offers, then the author detail and the long guide.
   Scale 4, 8, 12, 16, 24, 32, 48, 64. */

:root {
  --paper: #faf9f5;
  --ink: #1f2a25;
  --muted: #55635b;
  --line: #d8ded7;
  --accent: #245d42;
  --tint: #eef3ec;
  --reading: 720px;
  --strip: 1120px;
  --radius: 6px;
  --font-body: Georgia, 'Times New Roman', serif;
  --font-ui: Arial, Helvetica, sans-serif;
}

body.world { --accent: #792855; --tint: #f6eef3; }
body.blue { --accent: #245b47; --tint: #eef4ef; }

* { box-sizing: border-box; }

html { scroll-padding-top: 32px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.72 var(--font-body);
  -webkit-text-size-adjust: 100%;
}

/* Elementor's screen-reader utility must actually stay off-screen; hiding the
   icon SVG without this rule leaked the labels as bare page text. */
.elementor-screen-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

img { display: block; max-width: 100%; height: auto; }
svg { width: 20px; height: 20px; flex-shrink: 0; }
button, input, select { font: inherit; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible { outline: 3px solid #a65624; outline-offset: 3px; }

p { margin: 0 0 18px; }
h1, h2, h3, h4 { line-height: 1.22; text-wrap: balance; font-weight: 700; color: var(--ink); }
h1 { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -0.01em; margin: 0 0 10px; max-width: 30ch; }
h2 { font-size: 27px; letter-spacing: 0; margin: 32px 0 14px; }
h3 { font-size: 23px; margin: 28px 0 12px; }
h4 { font-size: 20px; margin: 24px 0 12px; }
ul, ol { padding-left: 24px; margin: 0 0 22px; }
li { margin: 0 0 8px; }

/* ---------- shell ---------- */

.recovery-skip {
  position: fixed;
  left: 16px;
  top: -120px;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 12px 16px;
  z-index: 40;
  font: 600 15px/1.4 var(--font-ui);
}
.recovery-skip:focus { top: 12px; }

.recovery-header {
  max-width: var(--strip);
  margin: auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-ui);
}
.recovery-brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 700 25px/1.2 var(--font-body);
  color: var(--ink);
  text-decoration: none;
}
.recovery-header nav { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 14px; }
.recovery-header nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }

.recovery-main {
  max-width: var(--strip);
  margin: auto;
  padding: 28px 32px 64px;
  /* The responsible-gambling note carries a bare URL; without this a narrow
     viewport scrolls sideways to fit it. */
  overflow-wrap: break-word;
}
.recovery-main > * { max-width: var(--reading); margin-left: auto; margin-right: auto; }
.recovery-main > .listing-section,
.recovery-main > .gs-cards-wrapper,
.recovery-main > .table-scroll,
.recovery-main > .casino-comparison-table { max-width: none; }

/* Section rhythm for the long article bodies without touching their markup. */
.recovery-main > h2 {
  /* Auto inline margins keep the heading box in the same 720px reading column
     as the paragraphs that follow it. */
  margin: 56px auto 16px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.recovery-main > h2:first-of-type { margin-top: 32px; }

/* The listing heading is not an article section: it labels the offers directly
   under it, so it takes no section rule and no lead-in space. */
.recovery-main > h2:has(+ p.bonus-date) {
  margin: 0 0 8px;
  padding-top: 0;
  border-top: 0;
  font-size: 27px;
}

.recovery-footer {
  max-width: var(--strip);
  border-top: 1px solid var(--line);
  margin: auto;
  padding: 22px 32px 40px;
  color: var(--muted);
  font: 14px/1.6 var(--font-ui);
}
.recovery-footer a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- opening block ---------- */

/* The jump link rides inside the attribution band: no centred floating block. */
.audit-jump {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin: 0;
  padding: 0;
  border-bottom: 0;
  font: 600 13px/1.5 var(--font-ui);
}

.byline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  border: 0;
  padding: 0;
  margin: 0;
  font: 14px/1.5 var(--font-ui);
  color: var(--muted);
}
.byline p, .byline div, .byline ul, .byline li { margin: 0; padding: 0; }
.byline ul { list-style: none; }
.byline svg { display: none; }
.byline .elementor-author-box__text { display: flex; gap: 5px; }
.byline .elementor-author-box__bio { color: var(--ink); font-weight: 600; }
.byline .elementor-post-info { display: inline; }

.wp-author-wrapper {
  display: flex;
  gap: 4px 20px;
  flex-wrap: wrap;
  font: 14px/1.5 var(--font-ui);
  color: var(--muted);
  border: 0;
  padding: 0;
  margin: 0;
}
.wp-author-block { display: flex; align-items: center; gap: 8px; }
.wp-author-img { width: 32px; height: 32px; border-radius: 50%; }
.wp-author-name { font-weight: 600; color: var(--ink); }

.social-metadata { display: flex; margin: 0; }
.social-metadata .elementor-social-icons-wrapper { display: flex; gap: 14px; margin: 0; padding: 0; }
.social-metadata .elementor-grid-item { display: block; }
.social-metadata a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -8px 0;
  color: var(--muted);
}
.social-metadata svg { width: 18px; height: 18px; fill: currentColor; }
.social-metadata a:hover { color: var(--accent); }

.intro-media { margin: 0 auto 28px; }
.intro-media img { width: 100%; max-height: 300px; object-fit: cover; border-radius: var(--radius); }

/* ---------- R10 compact attribution band ---------- */

/* One band carries author, date, disclosure context and the jump control, so
   the offers can follow immediately. It is the only ruled block above them. */
.r10-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 24px;
  border-block: 1px solid var(--line);
  padding: 6px 0;
  margin: 0 auto 12px;
  font: 14px/1.5 var(--font-ui);
  color: var(--muted);
}
/* Standalone control: a real 44px target whose box does not inflate the band. */
.r10-meta .audit-jump {
  margin: -6px 0;
  min-height: 44px;
  padding: 0 2px;
}
.r10-meta .byline .elementor-post-info,
.r10-meta .wp-author-block { align-items: baseline; }
/* The bio card keeps header metrics now that it no longer sits in its own row. */
.r10-meta .author-card { border: 0; padding: 0; margin: 0; }
.r10-meta .author-info h3 { font: 700 15px/1.3 var(--font-ui); margin: 0 0 2px; }
.r10-meta .author-info p { font: 13px/1.4 var(--font-ui); margin: 0; color: var(--muted); }

/* Long intro, badges and the guide navigation sit below the offers and above
   the article. Emphasis is softened here only; the markup keeps its <strong>. */
.r10-intro strong, .r10-intro b { font-weight: 400; color: var(--ink); }

.r10-guide { margin: 0 auto 32px; }
.r10-guide .badges-container { border-block: 1px solid var(--line); padding: 14px 0; }
.r10-guide .header-nav-buttons { border-top: 0; margin-top: 8px; }

/* ---------- on-page contents ---------- */

.recovery-toc {
  border-block: 1px solid var(--line);
  padding: 4px 0 8px;
  margin: 0 auto 28px;
  font: 15px/1.55 var(--font-ui);
}
.recovery-toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.recovery-toc summary::-webkit-details-marker,
.e-n-accordion summary::-webkit-details-marker { display: none; }
/* One consistent disclosure affordance; the native triangle disappears once a
   summary becomes a flex container. */
.recovery-toc summary::after,
.e-n-accordion summary::after {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  margin-left: auto;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 120ms ease;
}
details[open] > summary::after { transform: rotate(225deg); }
.recovery-toc ol { columns: 2; column-gap: 32px; margin: 8px 0 12px; padding-left: 22px; }
.recovery-toc li { break-inside: avoid; margin: 0 0 6px; }

.affiliate {
  font: 14px/1.6 var(--font-ui);
  color: var(--muted);
  background: var(--tint);
  border-left: 3px solid var(--accent);
  padding: 16px 20px;
  margin: 0 auto 24px;
}
.bonus-date { font: 13px/1.55 var(--font-ui); color: var(--muted); margin: 0 auto 10px; }
.bonus-conditions { display: block; font: 14px/1.55 var(--font-ui); font-weight: 400; color: var(--muted); margin-top: 6px; }
/* Terms disclosure is a standalone control repeated once per offer: give it a
   real 44px target and take the height back out of the row rhythm. */
.bonus-terms {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 600 13px/1.6 var(--font-ui);
  margin: 0;
}
.recovery-label { font: 700 18px/1.3 var(--font-ui); color: var(--ink); }

/* ---------- tables (Muskoka listing, payment and rate tables) ---------- */

.table-scroll {
  overflow-x: auto;
  margin: 0 auto 32px;
  scrollbar-color: var(--accent) var(--tint);
}
table {
  width: 100%;
  border-collapse: collapse;
  font: 15px/1.55 var(--font-ui);
  font-variant-numeric: tabular-nums;
  text-align: left;
}
th { padding: 13px 16px; background: var(--tint); font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line); }
td { padding: 10px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:nth-child(even) { background: #ffffff80; }
th p, td p { margin: 0; }

#homepage-listings:is(table) { table-layout: fixed; }
#homepage-listings:is(table) th:first-child,
#homepage-listings:is(table) td:first-child { width: 24%; }
#homepage-listings:is(table) td:first-child a { font-weight: 700; }
#homepage-listings:is(table) strong { font-size: 17px; }

/* ---------- World Eyeglasses listing ---------- */

.gs-cards-wrapper { border-top: 2px solid var(--accent); margin: 0 auto 40px; }
/* The visit button is the last thing in the card in the document, so it is the
   last thing in the card visually: DOM order and focus order agree. */
.gs-card-container {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  grid-template-areas:
    'brand bonus'
    'brand description'
    'brand action';
  gap: 4px 24px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-ui);
}
.gs-card-title { grid-area: brand; font: 700 17px/1.35 var(--font-ui); overflow-wrap: anywhere; }
.gs-logo-wrapper { display: none; }
.gs-bonus-text { grid-area: bonus; font-size: 17px; line-height: 1.45; color: var(--ink); }
.gs-description { grid-area: description; font: 14px/1.5 var(--font-ui); color: var(--muted); margin: 0; max-width: 62ch; }
.gs-button-wrapper { grid-area: action; align-self: start; justify-self: start; }
.gs-play-btn { width: auto; overflow-wrap: anywhere; }

.gs-play-btn, .btn-visit, .casino-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font: 600 14px/1.4 var(--font-ui);
  text-align: center;
}
.gs-play-btn:hover, .btn-visit:hover, .casino-btn:hover { background: var(--ink); border-color: var(--ink); text-decoration: none; }

/* ---------- Blue Smoke identity block and listing ---------- */

.casino-header-container { margin: 0 auto 28px; font-family: var(--font-ui); }
.header-top-row { display: flex; gap: 24px; align-items: flex-start; border-block: 1px solid var(--line); padding: 14px 0; }
.header-top-row .author-card { border: 0; padding: 0; margin: 0; min-width: 180px; }
.author-info h3 { font: 700 15px/1.4 var(--font-ui); margin: 0 0 4px; }
.author-info p, .update-date { font: 13px/1.5 var(--font-ui); color: var(--muted); margin: 0; }
.badges-container { display: flex; gap: 20px; }
.badge-item { flex: 1; }
.badge-item .icon-wrapper { display: none; }
.badge-item p { font: 13px/1.5 var(--font-ui); margin: 0; }

.header-nav-buttons { display: flex; flex-wrap: wrap; gap: 4px 20px; border-top: 1px solid var(--line); }
.header-nav-buttons .nav-btn { display: inline-flex; align-items: center; min-height: 44px; font: 600 14px/1.5 var(--font-ui); }

.casino-comparison-table { border-top: 2px solid var(--accent); margin: 0 auto 40px; }
/* Same reading rule as the World card: brand column, offer column, then the
   actions, so the focus order runs top to bottom. */
.casino-item {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  grid-template-areas:
    'brand bonus'
    'brand features'
    'brand action';
  gap: 4px 24px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-ui);
}
.brand-side { grid-area: brand; position: relative; padding-left: 26px; }
.brand-rank { position: absolute; left: 0; top: 2px; color: var(--muted); font: 600 13px/1.4 var(--font-ui); }
.brand-side .recovery-label { font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; margin: 0 0 8px; }
.rating-wrapper { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 12px; color: var(--muted); }
.rating-meta { font-size: 12px; line-height: 1.4; }
.rating-meta br { display: none; }
.rating-meta strong { display: block; font-weight: 400; }
.rating-value { font: 700 13px/1.4 var(--font-ui); color: var(--ink); }

.bonus-info { grid-area: bonus; font-size: 17px; line-height: 1.45; }
.casino-item > .feature-list { grid-area: features; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--muted); margin: 0; }
.feature-point { display: flex; align-items: center; gap: 6px; }
.check-circle { font-size: 12px; color: var(--accent); }
.action-side { grid-area: action; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; align-self: start; }
/* The brand link under the button is a second standalone action in the same
   column: 44px target, no extra row height. */
.review-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  text-align: left;
  overflow-wrap: anywhere;
}

/* ---------- payments, safety and FAQ blocks ---------- */

.payment-list-wrapper { margin: 0 auto 32px; border-top: 1px solid var(--line); font-family: var(--font-ui); }
.payment-item {
  display: grid;
  grid-template-columns: 20px 110px 1.4fr 1fr 1fr 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.p-number { color: var(--muted); font-size: 12px; }
.p-cell { min-width: 0; }
.p-cell .recovery-label { font-size: 14px; }
.p-brand-name { display: none; }
.p-header-label { font-size: 11px; line-height: 1.4; color: var(--muted); margin-bottom: 4px; }
.p-data-value { font-size: 13px; font-weight: 600; line-height: 1.4; }
.p-status-icon { color: var(--accent); }

.hyab-container { padding: 24px; background: var(--tint); margin: 32px auto; }
.hyab-container h2 { font-size: 26px; margin: 0 0 16px; }
.hyab-container p:last-child { margin-bottom: 0; }
.casino-wrapper, .casino-comparison-container { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 0 auto 32px; }
.casino-card { padding: 18px 0; border-top: 2px solid var(--accent); }
.casino-card h2 { font: 700 22px/1.3 var(--font-body); margin: 0 0 14px; }
.casino-card .watermark { display: none; }
.casino-card ul { list-style: none; padding: 0; font: 14px/1.6 var(--font-ui); }
.casino-card li { margin-bottom: 10px; }
.casino-card .feature-item { display: flex; gap: 8px; }
.casino-card .icon { color: var(--accent); font-weight: 700; }
.casino-card .casino-btn { margin-top: 8px; }
.safety-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 0 auto 32px; }
.safety-card { border-top: 1px solid var(--line); padding-top: 16px; }
.safety-card h3 { font-size: 20px; margin: 0 0 8px; }
.safety-card p { font: 14px/1.65 var(--font-ui); margin: 0; }
.read-more-btn { display: inline-flex; align-items: center; min-height: 44px; font: 600 14px/1.5 var(--font-ui); margin: 4px 0 24px; }

.custom-faq-wrapper { margin: 0 auto 32px; }
.faq-row { padding: 18px 0; border-bottom: 1px solid var(--line); }
.faq-icon-box { display: none; }
.faq-title { display: block; font: 700 19px/1.4 var(--font-body); margin-bottom: 10px; color: var(--ink); }
.faq-text { margin: 0; }

.e-n-accordion { margin: 0 auto 32px; }
.e-n-accordion-item { border-bottom: 1px solid var(--line); padding: 4px 0; }
.e-n-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  list-style: none;
  font: 700 18px/1.5 var(--font-body);
  cursor: pointer;
}
.e-n-accordion summary .e-n-accordion-item-title-header { display: block; }
.e-n-accordion-item-title-text { display: inline; }
.e-n-accordion details > div { padding: 4px 0 14px; }
.e-n-accordion details p:last-child { margin-bottom: 0; }

/* ---------- contributors ---------- */

.author-card-container, .custom-bio-card, .author-card, .bio-card, .author-end {
  border-top: 1px solid var(--line);
  padding-top: 22px;
  margin: 36px auto 0;
  font: 15px/1.65 var(--font-ui);
}
.author-card { display: block; }
.author-profile, .author-right, .bio-left-col, .bio-right-col { width: auto; min-width: 0; }
.author-name, .bio-name { font: 700 22px/1.3 var(--font-body); margin: 0 0 8px; }
.author-name span, .author-title, .bio-role { font: 14px/1.5 var(--font-ui); color: var(--muted); }
.author-content, .author-bio, .bio-description, .bio-text { font: 15px/1.65 var(--font-ui); }
.author-content h2, .bio-right-col h2 { font-size: 22px; margin: 16px 0; border: 0; padding: 0; }
.author-content p:last-child, .author-bio:last-child { margin-bottom: 0; }
.bio-avatar:empty, .author-img:empty, .author-left:empty, .social-icons:empty, .social-links:empty { display: none; }
.bio-stats { display: flex; gap: 24px; font: 14px/1.5 var(--font-ui); margin: 16px 0; }
.bio-stat-number { font-weight: 700; }
.author-end h4 { font-size: 22px; margin: 0 0 12px; }
.author-end p { font: 15px/1.65 var(--font-ui); }
.author-card-container .author-card { border: 0; padding: 0; margin: 0; }
.author-card-container h2, .author-card-container h3, .custom-bio-card h2, .custom-bio-card h3 {
  font: 700 22px/1.3 var(--font-body);
  margin: 20px 0 12px;
  border: 0;
  padding: 0;
}
.author-profile { margin-bottom: 18px; }

.elementor-nav-menu { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0; list-style: none; font: 14px/1.5 var(--font-ui); margin-top: 28px; }
.elementor-nav-menu--dropdown, .elementor-menu-toggle { display: none; }
.elementor-icon-list-items { list-style: none; padding: 0; }
.elementor-icon-list-item { display: flex; gap: 5px; }
.elementor-post-info__item { display: inline; }
.wp-caption { max-width: 100%; }

.main-logo { display: none; }

/* ---------- 800px and below ---------- */

@media (max-width: 800px) {
  .recovery-header { padding: 12px 24px; }
  .recovery-main { padding: 14px 24px 48px; }
  h1 { margin-bottom: 6px; }
  .recovery-footer { padding: 22px 24px 36px; }
  .recovery-toc ol { columns: 1; }
  .r11-preamble { padding: 3px 0; margin-bottom: 6px; }
  .affiliate { padding: 10px 14px; margin-bottom: 10px; font-size: 13px; line-height: 1.5; }
  .bonus-date { margin-bottom: 8px; }
  .gs-card-container {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 8px 20px;
  }
  .casino-item {
    grid-template-columns: 178px minmax(0, 1fr);
    gap: 8px 20px;
  }
  .payment-item { grid-template-columns: 20px 100px repeat(4, minmax(0, 1fr)); gap: 8px; }
  .header-top-row { display: block; }
  .badges-container { margin-top: 14px; }
}

/* ---------- 540px and below ---------- */

@media (max-width: 540px) {
  body { font-size: 16px; line-height: 1.7; }
  h1 { font-size: 28px; line-height: 1.12; margin-bottom: 8px; }
  h2 { font-size: 27px; }
  h3 { font-size: 22px; }
  p { margin-bottom: 16px; }
  .recovery-header { display: block; padding: 6px 20px 8px; }
  .recovery-header nav { margin-top: 2px; gap: 0 16px; font-size: 13px; }
  .recovery-main { padding: 12px 20px 40px; }
  .recovery-footer { padding: 20px 20px 32px; }
  .recovery-main > h2 { margin-top: 40px; padding-top: 20px; }
  .recovery-main > h2:has(+ p.bonus-date) { margin: 0 0 4px; padding-top: 0; }
  /* Attribution is metadata, not body copy: 12px is the band's own scale and
     it lets the author block stay on one line at 390px. Paper body stays 16px. */
  .r11-preamble { gap: 0 12px; padding: 1px 0; margin-bottom: 4px; font-size: 12px; }
  .r11-preamble .audit-jump { min-height: 44px; margin: -6px 0; font-size: 13px; }
  .r11-author { gap: 2px 12px; padding: 2px 0; margin-bottom: 18px; font-size: 12px; }
  .r11-author .social-metadata a { width: 44px; height: 44px; margin: -6px 0; }
  .byline { gap: 2px 12px; font-size: 12px; }
  .recovery-toc { font-size: 14px; }
  .intro-media img { max-height: 200px; }
  .wp-author-wrapper { gap: 2px 12px; font-size: 12px; }
  .affiliate { padding: 6px 10px; margin-bottom: 6px; font-size: 13px; line-height: 1.4; }
  .bonus-date { margin-bottom: 6px; line-height: 1.45; }
  .gs-bonus-text, .bonus-info { font-size: 16px; line-height: 1.35; }
  .gs-description { line-height: 1.45; }
  .table-scroll { margin: 0 auto 26px; }
  th, td { padding: 12px 10px; font-size: 14px; }
  #homepage-listings:is(table) th:first-child,
  #homepage-listings:is(table) td:first-child { width: 38%; }
  #homepage-listings:is(table) strong { font-size: 15px; }
  #homepage-listings:is(table) td:first-child a { font-size: 14px; }
  .bonus-conditions { font-size: 13px; }

  .gs-card-container { grid-template-columns: 1fr; grid-template-areas: 'brand' 'bonus' 'description' 'action'; gap: 4px; padding: 10px 0; }
  .gs-card-title { font-size: 17px; }
  .gs-bonus-text { font-size: 17px; }
  .gs-description { font-size: 14px; line-height: 1.4; }
  .gs-play-btn { width: 100%; justify-self: stretch; padding-inline: 14px; }

  .casino-item { grid-template-columns: 1fr; grid-template-areas: 'brand' 'bonus' 'features' 'action'; gap: 8px; padding: 10px 0; }
  .brand-side { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; padding-left: 22px; }
  .brand-side .recovery-label { font-size: 16px; margin: 0; }
  .rating-wrapper { flex-shrink: 0; justify-content: flex-end; text-align: right; gap: 2px 6px; font-size: 11px; }
  .rating-value { font-size: 12px; }
  .bonus-info { font-size: 17px; }
  .action-side { gap: 12px; }
  .action-side .btn-visit { min-width: 132px; }

  .header-top-row { padding: 14px 0; }
  .badges-container { gap: 12px; }
  .badge-item p { font-size: 12px; }
  .payment-item { grid-template-columns: 16px 1fr 1fr; gap: 12px; }
  .p-brand-box { grid-column: 2 / 4; }
  .p-cell:not(.p-brand-box) { grid-column: auto; }
  .payment-item .p-cell:nth-child(3), .payment-item .p-cell:nth-child(5) { grid-column: 2; }
  .p-header-label { font-size: 11px; }
  .p-data-value { font-size: 13px; }
  .casino-wrapper, .casino-comparison-container, .safety-grid { grid-template-columns: 1fr; gap: 24px; }
  .hyab-container { padding: 20px; }
  .hyab-container h2 { font-size: 24px; }
  .faq-title { font-size: 18px; }
  .author-card-container, .custom-bio-card, .author-card, .author-end { margin-top: 28px; padding-top: 18px; }
  .custom-casino-table, .custom-slot-table { min-width: 480px; }
}

/* The header follows the reader down these very long single-page articles. */
@media (min-width: 801px) {
  html { scroll-padding-top: 92px; }
  .recovery-header { position: sticky; top: 0; z-index: 30; background: var(--paper); }

  /* One left edge for the whole opening: headline, attribution band, listing
     heading and note line up with the first column of the wider offer band
     instead of sitting in the centred 720px reading column. */
  .recovery-main > h1,
  .recovery-main > .r11-preamble,
  .recovery-main > .affiliate,
  .recovery-main > h2:has(+ p.bonus-date),
  .recovery-main > p.bonus-date {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  .recovery-main > h1 { max-width: 26ch; }
  /* The disclosure keeps the 65-75ch measure but starts on the opening edge. */
  .recovery-main > .affiliate { max-width: var(--reading); margin-bottom: 12px; }
  .r11-preamble { margin-bottom: 8px; }
}

/* ---------- R11 opening: preamble, listing label, author detail ---------- */

/* The jump control, the material bonus terms and (on World Eyeglasses) the
   affiliate disclosure share one compact band directly under the headline, so
   the offers start as high up the page as the disclosures allow. */
.r11-preamble {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 20px;
  border-block: 1px solid var(--line);
  padding: 2px 0;
  margin: 0 auto 6px;
  font: 13px/1.5 var(--font-ui);
  color: var(--muted);
}
/* The jump control keeps its 44px target; the negative block margin stops
   it from inflating the band it rides in. */
.r11-preamble .audit-jump { min-height: 44px; margin: -6px 0; }
.r11-preamble .bonus-date { flex: 1 1 260px; margin: 0; font: 13px/1.45 var(--font-ui); }
/* R11.1: the disclosure is a disclosure first. It keeps a readable 14px
   measure even though a larger block pushes the first offer further down. */
.r11-preamble .affiliate { flex: 1 1 100%; margin: 4px 0 2px; padding: 10px 14px; font: 14px/1.5 var(--font-ui); }

/* The listings heading keeps its element for the outline but reads as a label
   on the table below it, not as a second title competing with the h1. */
body.homepage-layout .recovery-main > h2.r11-listing-label {
  margin: 0 0 4px;
  padding: 0;
  border: 0;
  max-width: none;
  font: 700 14px/1.4 var(--font-ui);
  color: var(--muted);
  text-transform: none;
}

/* Author detail sits under the offers: it is provenance, not part of the
   comparison the reader came for. */
.r11-author {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 24px;
  border-block: 1px solid var(--line);
  padding: 4px 0;
  margin: 0 auto 24px;
  font: 13px/1.5 var(--font-ui);
  color: var(--muted);
}
.r11-author .author-card { border: 0; padding: 0; margin: 0; }
.r11-author .author-info h3 { font: 700 14px/1.3 var(--font-ui); margin: 0 0 2px; }
.r11-author .author-info p { font: 12px/1.4 var(--font-ui); margin: 0; color: var(--muted); }
.r11-author .update-date { font-size: 12px; }
.r11-author .byline .elementor-post-info,
.r11-author .wp-author-block { align-items: baseline; }

/* A heading promoted only to repair the outline keeps the size it had. */
.author-end h4,
.author-end h3.r11-from-h4 { font-size: 22px; margin: 0 0 12px; }