/*
 * Casino SEO Services page.
 *
 * Everything is scoped to .cas-page, so nothing here can reach the header, the
 * footer or another template. The page reuses, and only re-skins:
 *
 *   .lp-hero / .lp-hero-inner   landing.css   hero grid + its 960px stack order
 *   .lp-feature-grid/.lp-feature landing.css  the "why it matters" and services rows
 *   .sr-service-grid/.sr-service seo-reseller.css  the numbered benefit cards
 *   .band / .trusted-*          style.css     both dark call-to-action bands
 *   .awards / .marquee          style.css     the certification strip
 *   .faq / .faq-grid / .faq-left style.css    the accordion and its sticky column
 *
 * New markup exists only where nothing on the site draws it already: the dark
 * casino dressing, the mini flow card, the regulated/non-regulated panel, the
 * case study and the sticky-rail process section.
 */
.cas-page {
  --cas-gold: #f6b62c;
  --cas-gold-2: #e8891a;
  --cas-ink: #0b1020;
  --cas-body: #5c6779;
  --cas-soft: #f8fbfd;
  --cas-panel: #fcfcfe;
  --cas-card: #f9f9fd;
  --cas-line: #eef1f7;
  --cas-coral: #ff8080;
  --cas-violet: #7c3aed;
}

/* ---------- Hero ----------
   .lp-hero's grid, padding and 960px stacking order are kept; only the surface
   and the type colours change. The artwork is a transparent cut-out, so the
   band shows through it and no seam can appear at its edges. */
/* hero-bg.png is 1440x784 and sits UNDER the gradient rather than replacing it,
   the same arrangement .os-hero and .ais-hero use: the band still reads
   correctly while the image loads, and at viewports taller or wider than the
   artwork the gradient carries the edges. */
.cas-page .cas-hero {
  position: relative;
  overflow: hidden;
  background-color: #050109;
  background-image:
    url("../images/casino-seo/hero-bg.png"),
    radial-gradient(58% 62% at 16% 94%, rgba(134, 20, 128, 0.42) 0%, rgba(134, 20, 128, 0) 62%),
    radial-gradient(52% 58% at 84% 34%, rgba(104, 24, 62, 0.38) 0%, rgba(104, 24, 62, 0) 66%),
    linear-gradient(160deg, #17021d 0%, #0a0111 46%, #050109 100%);
  background-repeat: no-repeat;
  background-position: center top, center, center, center;
  background-size: cover, auto, auto, auto;
}

.cas-page .cas-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin: 0 0 clamp(22px, 3vw, 38px);
  padding: 10px 20px;
  border: 1px solid rgba(246, 182, 44, 0.34);
  border-radius: var(--r-pill);
  background: rgba(246, 182, 44, 0.08);
  color: var(--cas-gold);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}

.cas-page .cas-hero-spark {
  flex: none;
  font-size: 15px;
  line-height: 1;
}

.cas-page .cas-hero-title {
  color: #fff;
  margin-bottom: clamp(18px, 2vw, 28px);
}

/* Gold is a gradient fill on the glyphs; `color` is the fallback that shows if
   background-clip: text is unsupported, so the word is never invisible. */
.cas-page .cas-gold {
  color: var(--cas-gold);
  background: linear-gradient(92deg, var(--cas-gold) 0%, #ffd662 42%, var(--cas-gold-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: underline;
  text-decoration-color: var(--cas-gold);
  text-decoration-thickness: 5px;
  text-underline-offset: 0.14em;
}

.cas-page .cas-solid {
  font-weight: 800;
}

.cas-page .cas-thin {
  font-weight: 300;
  letter-spacing: -0.01em;
}

.cas-page .cas-hero .lp-hero-text {
  color: #c7ccd8;
  max-width: 52ch;
  margin-bottom: clamp(28px, 3.4vw, 44px);
}

.cas-page .cas-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
}

/* Gold pill. Modifier on the shared .btn-strategy, so the disc, the hover
   travel and every responsive rule for that button still apply. */
.cas-page .cas-btn-gold {
  background-image: linear-gradient(92deg, var(--cas-gold) 0%, #ffc94d 48%, var(--cas-gold-2) 100%);
  background-color: var(--cas-gold);
  border-color: transparent;
  color: #23150a;
}

.cas-page .cas-btn-gold:hover {
  background-image: linear-gradient(92deg, var(--cas-gold-2) 0%, #ffc94d 52%, var(--cas-gold) 100%);
  background-color: var(--cas-gold-2);
  border-color: transparent;
  color: #23150a;
}

.cas-page .cas-btn-gold .icon-circle {
  background-color: #fff;
}

.cas-page .cas-btn-gold .icon-circle svg path {
  fill: #23150a;
}

/* The asset's own width. .lp-hero-art stretches to its column, which asks for
   ~800px at 1920 and past 1100px at 2560 - upscaling a 740px PNG. */
.cas-page .cas-hero-art img {
  max-width: 740px;
  margin-inline: auto;
  filter: drop-shadow(0 26px 60px rgba(0, 0, 0, 0.55));
}

/* ---------- Certifications ---------- */
.cas-page .cas-awards .heading-main {
  max-width: min(1080px, 100%);
  font-size: clamp(28px, 3.5vw, 50px);
}

/* ---------- How casino SEO works ---------- */
.cas-page .cas-how {
  background: var(--cas-soft);
}

.cas-page .cas-how-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 4.5vw, 76px);
  align-items: start;
}

.cas-page .cas-how-copy .heading-main {
  font-size: clamp(28px, 3.4vw, 48px);
  margin-bottom: clamp(20px, 2.4vw, 32px);
}

.cas-page .cas-how-copy p {
  color: var(--cas-body);
  line-height: 1.85;
  margin-bottom: 22px;
}

/* three stops on one card; the chevrons are pseudo-elements so they never
   become list items of their own */
.cas-page .cas-how-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 28px);
  margin-top: clamp(24px, 3vw, 38px);
  padding: clamp(20px, 2.4vw, 32px) clamp(14px, 2vw, 26px);
  border: 1px solid #e4e9f6;
  border-radius: 18px;
  background: var(--cas-panel);
}

.cas-page .cas-how-stop {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 8px;
  min-width: 0;
}

.cas-page .cas-how-stop + .cas-how-stop::before {
  content: "";
  position: absolute;
  top: 26px;
  left: calc(-1 * clamp(12px, 2vw, 28px) / 2 - 4px);
  width: 9px;
  height: 9px;
  border-top: 2px solid #6d5cf5;
  border-right: 2px solid #6d5cf5;
  transform: rotate(45deg);
}

.cas-page .cas-how-stop-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(46px, 4.4vw, 58px);
  height: clamp(46px, 4.4vw, 58px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 18px rgba(13, 21, 38, 0.08);
  color: #5b4bdd;
  margin-bottom: 6px;
}

.cas-page .cas-how-stop-ico .lp-icon,
.cas-page .cas-how-stop-ico img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.cas-page .cas-how-stop-title {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--cas-ink);
}

.cas-page .cas-how-stop-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--cas-body);
}

/* the reason panel: a soft plate behind the .lp-feature rows */
.cas-page .cas-how-panel {
  padding: clamp(20px, 2.4vw, 34px);
  border: 1px solid #e9edf8;
  border-radius: 22px;
  background: var(--cas-panel);
}

.cas-page .cas-how-panel-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(16px, 2vw, 24px);
  padding-bottom: 14px;
  border-bottom: 2px solid #ded9fb;
  font-size: clamp(16px, 1.5vw, 21px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cas-ink);
}

.cas-page .cas-how-panel-ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #5b4bdd;
  color: #fff;
}

.cas-page .cas-how-panel-ico .lp-icon {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* one column of rows rather than the component's two */
.cas-page .cas-how-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 0;
}

.cas-page .cas-how-item {
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 16px 20px;
  border-color: #edf0f8;
  border-radius: 14px;
}

/* The icons are brand-violet line art on transparent, so the plate stays a pale
   tint - a violet fill would swallow them. */
.cas-page .cas-how-item .lp-feature-icon {
  border-radius: 14px;
  background: #eeebff;
  color: #5b4bdd;
}

.cas-page .cas-how-item .lp-feature-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.cas-page .cas-how-item p {
  min-width: 0;
  margin: 0;
  padding-left: 18px;
  border-left: 1px solid #e6e9f2;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--cas-ink);
}

/* ---------- Benefits ----------
   The .sr-service card with its fill swapped for the mock's lavender wash and
   its border and shadow dropped; the outlined numeral is the component's. */
.cas-page .cas-benefits {
  background: var(--white);
}

.cas-page .cas-benefit-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cas-page .cas-benefit {
  padding: clamp(22px, 2.4vw, 34px) clamp(20px, 2.2vw, 32px) clamp(28px, 3vw, 42px);
  border: 0;
  border-radius: 4px;
  box-shadow: none;
  background: linear-gradient(150deg, #f1f0f7 0%, #f5f3f7 55%, #f2f2f8 100%);
}

.cas-page .cas-benefit:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(13, 21, 38, 0.09);
}

.cas-page .cas-benefit .sr-service-num {
  -webkit-text-stroke-color: #dcdbe6;
  margin-bottom: 18px;
}

.cas-page .cas-benefit h3 {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.35;
  margin-bottom: 12px;
}

.cas-page .cas-benefit p {
  font-size: 15px;
  line-height: 1.7;
  /* seo-reseller.css justifies .sr-service p; the measure here is ~28 characters
     and justifying it opened visible word gaps. */
  text-align: left;
  hyphens: manual;
}

/* ---------- Dark call-to-action bands ----------
   .band's light gradient replaced; the decorations are backgrounds on the
   section, never elements, so they cannot be tabbed to, read out or overflow
   the band (background-position clamps where an absolute child would not). */
.cas-page .cas-band {
  background:
    radial-gradient(46% 120% at 88% 8%, rgba(150, 78, 26, 0.5) 0%, rgba(150, 78, 26, 0) 62%),
    radial-gradient(52% 130% at 12% 96%, rgba(60, 44, 18, 0.55) 0%, rgba(60, 44, 18, 0) 60%),
    linear-gradient(120deg, #16160f 0%, #0e1414 48%, #17110c 100%);
}

.cas-page .cas-band::before,
.cas-page .cas-band::after {
  content: "";
  position: absolute;
  pointer-events: none;
  /* .band's own pseudo-elements are two blurred white glows: reset the fill,
     the radius and the blur, or the artwork rides on a white blob. */
  background-color: transparent;
  background-repeat: no-repeat;
  border-radius: 0;
  filter: none;
  /* .band sizes both glows explicitly (420x200 / 480x220); an `inset: 0` alone
     does not undo that — a set width wins over the right offset — so the
     right-hand artwork would position inside a 420px box near the left edge. */
  width: auto;
  height: auto;
  opacity: 0.95;
}

/* dice top-left + coin top-right */
.cas-page .cas-band::before {
  inset: 0;
  background-image:
    url("../images/casino-seo/dice.png"),
    url("../images/casino-seo/coin.png");
  background-position:
    left clamp(-40px, 2vw, 40px) top clamp(10px, 3vw, 40px),
    right clamp(-30px, 2vw, 40px) top clamp(6px, 2vw, 26px);
  background-size:
    clamp(96px, 11vw, 156px) auto,
    clamp(72px, 8vw, 118px) auto;
}

/* chip stack bottom-right */
.cas-page .cas-band::after {
  inset: 0;
  background-image: url("../images/casino-seo/chips.png");
  background-position: right clamp(-24px, 3vw, 56px) bottom clamp(6px, 2vw, 30px);
  background-size: clamp(96px, 11vw, 150px) auto;
}

.cas-page .cas-band-inner {
  position: relative;
  z-index: 1;
}

.cas-page .cas-band .trusted-heading {
  color: #fff;
  font-size: clamp(28px, 4vw, 55px);
  margin-bottom: 18px;
}

.cas-page .cas-band .trusted-lead {
  color: #c9ccd2;
  font-size: clamp(15px, 1.4vw, 19px);
  margin-bottom: 10px;
}

.cas-page .cas-band .trusted-lead:last-of-type {
  margin-bottom: clamp(28px, 3.4vw, 44px);
}

/* the mock's blue-to-violet pill */
.cas-page .cas-band .btn-strategy {
  background-image: linear-gradient(92deg, #1668ff 0%, #4f46e5 62%, #7c3aed 100%);
  background-color: #1668ff;
  border-color: transparent;
  text-transform: none;
  font-size: clamp(14px, 1.2vw, 17px);
}

.cas-page .cas-band .btn-strategy .icon-circle {
  background-color: #fff;
}

.cas-page .cas-band .btn-strategy .icon-circle svg path {
  fill: #12142a;
}

/* ---------- Services ---------- */
.cas-page .cas-services {
  background: var(--white);
}

.cas-page .cas-service-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cas-page .cas-service {
  grid-template-columns: 66px minmax(0, 1fr);
  gap: clamp(16px, 1.8vw, 26px);
  align-items: start;
  padding: clamp(22px, 2.4vw, 32px);
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  background: var(--cas-card);
}

.cas-page .cas-service:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(13, 21, 38, 0.08);
}

.cas-page .cas-service .lp-feature-icon {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--cas-coral);
  color: #fff;
}

/* services-1..6 are PURE WHITE on transparent - invisible on any light
   surface, which is why this disc must stay a solid coral fill. */
.cas-page .cas-service .lp-feature-icon .lp-icon,
.cas-page .cas-service .lp-feature-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.cas-page .cas-service > div {
  min-width: 0;
}

.cas-page .cas-service h3 {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.3;
  margin-bottom: 10px;
}

.cas-page .cas-service p {
  font-size: 14.5px;
  line-height: 1.6;
}

/* ---------- Process ----------
   The sticky stack from the casino app development page on the new-iapp site
   (`.cas-proc__panel`), renamed to this theme's single-dash convention. Each
   step pins at the same offset with an opaque fill, so the next one rides up
   and covers the one before it. Pure CSS — no scroll handler, no scroll
   jacking, and it degrades to a plain numbered list without sticky. */
.cas-page .cas-process {
  /* the fixed header pill, same allowance .faq-left makes */
  --cas-proc-stick: clamp(96px, 9vw, 124px);

  background: var(--cas-soft);
  padding-block: clamp(50px, 6vw, 90px) 0;
}

.cas-page .cas-process .heading-main {
  font-size: clamp(28px, 3.8vw, 52px);
}

.cas-page .cas-proc-panel {
  padding-top: clamp(30px, 4.5vw, 75px);
}

.cas-page .cas-proc-items {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The opaque fill is what makes the stack read: without it the covered step
   shows through the one riding over it. */
.cas-page .cas-proc-item {
  position: sticky;
  top: var(--cas-proc-stick);
  width: 100%;
  background: var(--cas-soft);
}

.cas-page .cas-proc-flex {
  display: flex;
  min-width: 0;
  padding: clamp(26px, 3.4vw, 45px) 0 clamp(34px, 4.6vw, 65px);
  border-top: 1px solid #e3e8f2;
}

/* Oversized and heavily faded: a watermark for the step rather than a label.
   The box stretches to the row's height, so centring inside it lines the
   numeral up with the copy beside it. */
.cas-page .cas-proc-num {
  display: flex;
  align-items: center;
  flex: none;
  width: clamp(120px, 14vw, 200px);
  max-width: 100%;
  font-family: var(--lp-num-font);
  font-size: clamp(84px, 11vw, 160px);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: rgba(22, 104, 255, 0.2);
}

/* min-width: 0 lets this flex child shrink below the paragraph's intrinsic
   width; without it the row overflows wherever the desktop layout still
   applies but the container has already narrowed. */
.cas-page .cas-proc-detail {
  flex: 1;
  min-width: 0;
  border-left: 1px solid #e3e8f2;
  padding-left: clamp(22px, 3.4vw, 52px);
}

.cas-page .cas-proc-title {
  margin: 0;
  font-size: clamp(19px, 1.9vw, 26px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--cas-ink);
  overflow-wrap: break-word;
}

.cas-page .cas-proc-text {
  margin: clamp(14px, 1.8vw, 24px) 0 0;
  width: 100%;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.85;
  color: var(--cas-body);
}

/* ---------- Why gambling SEO works differently ---------- */
.cas-page .cas-why {
  background: linear-gradient(120deg, #f4f7fe 0%, #f7f6ff 55%, #fbfaff 100%);
}

.cas-page .cas-why-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 60px);
  margin-top: clamp(34px, 4vw, 58px);
}

/* the hairline between the two columns, drawn on the second so it never hangs
   off the end of a single-column stack */
.cas-page .cas-why-col + .cas-why-col {
  border-left: 1px solid #e6e2f3;
  padding-left: clamp(24px, 3vw, 60px);
}

.cas-page .cas-why-pill {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 auto clamp(22px, 2.6vw, 34px);
  padding: 14px clamp(22px, 3vw, 46px);
  border-radius: var(--r-pill);
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 700;
  text-align: center;
  color: #fff;
}

.cas-page .cas-why-col--blue .cas-why-pill {
  background: linear-gradient(92deg, #1c7bff 0%, #2f8bff 100%);
}

.cas-page .cas-why-col--violet .cas-why-pill {
  background: linear-gradient(92deg, #7c3aed 0%, #9333ea 100%);
}

.cas-page .cas-why-intro {
  margin: 0 0 clamp(16px, 2vw, 24px);
  padding-top: clamp(18px, 2.4vw, 28px);
  border-top: 1px solid #e6e2f3;
  font-size: clamp(15px, 1.3vw, 16.5px);
  line-height: 1.75;
  color: var(--cas-body);
}

.cas-page .cas-why-label {
  margin: 0 0 clamp(14px, 1.8vw, 20px);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.cas-page .cas-why-list {
  display: grid;
  gap: clamp(14px, 1.8vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cas-page .cas-why-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(12px, 1.4vw, 20px);
  min-width: 0;
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.5;
  color: #2c3444;
}

.cas-page .cas-why-ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  color: #fff;
}

.cas-page .cas-why-col--blue .cas-why-ico {
  background: linear-gradient(150deg, #1c7bff 0%, #1668ff 100%);
}

.cas-page .cas-why-col--violet .cas-why-ico {
  background: linear-gradient(150deg, #8b5cf6 0%, #7c3aed 100%);
}

/* why-1..5 are PURE WHITE on transparent and are shared by both columns - the
   plate is what tells the two apart, so it must stay a solid fill. */
.cas-page .cas-why-ico .lp-icon,
.cas-page .cas-why-ico img {
  width: 21px;
  height: 21px;
  object-fit: contain;
}

/* ---------- Case study ----------
   The ORM page's case slider: the photograph is the track, the copy is a
   cross-faded .slider-panels block beside it. slider.js appends the dots to
   the slider ROOT, so the root is the grid and every child is placed on it
   explicitly rather than by source order. */
.cas-page .cas-case {
  background: var(--white);
}

.cas-page .cas-case-slider {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  column-gap: clamp(24px, 3.4vw, 56px);
  row-gap: 22px;
  align-items: start;
  margin-top: clamp(30px, 4vw, 52px);
}

.cas-page .cas-case-stage {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  width: min(100%, 560px);
  margin-inline: auto;
}

.cas-page .cas-case-slider .slider-dots {
  grid-column: 1;
  grid-row: 2;
}

.cas-page .cas-case-panels {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 0;
}

/* Over the photograph's edges rather than under it: the stage is only as tall
   as the image, and a row of controls beneath would push the dots down. */
.cas-page .cas-case-slider .slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.cas-page .cas-case-slider .slider-prev {
  left: -18px;
}

.cas-page .cas-case-slider .slider-next {
  right: -18px;
}

/* The three placeholders are 652-663px wide against a fixed 659px height, so
   a fixed ratio plus a cover crop is what keeps the stage from resizing as the
   track moves. */
.cas-page .cas-case-figure {
  margin: 0;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--cas-card);
}

.cas-page .cas-case-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
}

.cas-page .cas-case-card {
  padding: clamp(24px, 3vw, 42px);
  border: 1px solid var(--cas-line);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 14px 40px rgba(13, 21, 38, 0.07);
}

.cas-page .cas-case-card h3 {
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 700;
  color: var(--cas-ink);
}

.cas-page .cas-case-meta {
  margin: 0 0 clamp(18px, 2.2vw, 28px);
  font-size: 14px;
  color: var(--muted-2);
}

.cas-page .cas-case-blocks {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  margin-top: 28px;
}

.cas-page .cas-case-block {
  min-width: 0;
}

.cas-page .cas-case-block dt {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 700;
  color: var(--cas-ink);
}

.cas-page .cas-case-block dd {
  margin: 0;
  padding-left: 44px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--cas-body);
}

.cas-page .cas-case-ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--blue);
}

.cas-page .cas-case-block:nth-child(2) .cas-case-ico {
  color: #16a34a;
}

.cas-page .cas-case-block:nth-child(3) .cas-case-ico {
  color: var(--cas-violet);
}

/* ---------- Core casino marketing services (spec section 4) ----------
   The shared .lp-feature, three across instead of the component's two. Icons
   are inline glyphs, so the plate is the component's own coral tint - there is
   no white-on-transparent artwork here to force a solid fill. */
.cas-page .cas-marketing {
  background: var(--white);
}

.cas-page .cas-marketing-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---------- Casino SEO by game type (spec section 5) ----------
   Eleven numbered cards plus a CTA cell, two across, so the grid fills six
   rows exactly.

   Thumbnail left, copy right, the numeral on a pill overlapping the
   photograph's bottom-left corner. The copy is always visible - the hover only
   adds a shadow, fills the pill and draws a rule down the inside edge of the
   text, so a touch screen loses nothing.

   Two earlier passes are gone: a ruled table reusing .cas-choose-item, whose
   two-column dividers fought a three-column grid at every breakpoint, and a
   photo card that hid its description behind the hover. */
.cas-page .cas-games {
  background: linear-gradient(120deg, #f7f9ff 0%, #f9f7ff 100%);
}

.cas-page .cas-games-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
  margin-top: clamp(32px, 4vw, 52px);
  padding: 0;
  list-style: none;
}

.cas-page .cas-game {
  display: grid;
  grid-template-columns: clamp(150px, 15vw, 215px) minmax(0, 1fr);
  gap: clamp(16px, 1.8vw, 26px);
  align-items: center;
  min-width: 0;
  padding: clamp(14px, 1.4vw, 18px);
  border: 1px solid var(--cas-line);
  border-radius: 16px;
  background: var(--white);
  transition:
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.cas-page .cas-game:hover,
.cas-page .cas-game:focus-within {
  border-color: rgba(22, 104, 255, 0.28);
  box-shadow: 0 14px 34px rgba(22, 104, 255, 0.16);
}

/* overflow: visible so the numeral pill can hang off the corner; the rounded
   clip therefore belongs to the <img>, not the figure */
.cas-page .cas-game-figure {
  position: relative;
  margin: 0;
  min-width: 0;
}

.cas-page .cas-game-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 43 / 30;
  object-fit: cover;
  border-radius: 12px;
}

/* Sits ON the photograph's bottom-left corner rather than beside it, which is
   why it is a real element and not a ::before on the card. */
.cas-page .cas-game-num {
  position: absolute;
  left: 10px;
  bottom: -12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--blue);
  font-family: var(--lp-num-font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(13, 21, 38, 0.14);
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.cas-page .cas-game:hover .cas-game-num,
.cas-page .cas-game:focus-within .cas-game-num {
  background: var(--blue);
  color: #fff;
}

/* The rule is a transparent border at rest rather than one that appears on
   hover: a border coming into existence would shift the copy sideways. */
.cas-page .cas-game-body {
  min-width: 0;
  padding-left: clamp(12px, 1.2vw, 18px);
  border-left: 2px solid transparent;
  transition: border-color 0.3s ease;
}

.cas-page .cas-game:hover .cas-game-body,
.cas-page .cas-game:focus-within .cas-game-body {
  border-left-color: var(--blue);
}

.cas-page .cas-game-body h3 {
  margin: 0 0 8px;
  font-family: var(--heading-font);
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 700;
  color: var(--cas-ink);
}

.cas-page .cas-game-body p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--cas-body);
}

/* The twelfth cell: a call to action rather than an empty gap. No thumbnail,
   so it drops the card's two-column track. */
.cas-page .cas-game-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  padding: clamp(22px, 2.2vw, 30px);
  border-color: transparent;
  background: linear-gradient(150deg, #0d2f6b 0%, #1668ff 100%);
}

.cas-page .cas-game-cta:hover {
  border-color: transparent;
}

.cas-page .cas-game-cta h3 {
  margin: 0;
  color: #fff;
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.35;
}

/* The pill is white-on-blue here rather than the page's blue-on-light.
   COLOURS ONLY - .btn-strategy's padding is load-bearing geometry, not
   decoration: .icon-circle is a 45px disc absolutely positioned at
   right: 10px, so the 65px right padding is what keeps the label clear of it.
   Trimming it to 56px ran the text under the disc, and :hover restores the
   component's own padding anyway, so the button also changed size on hover. */
.cas-page .cas-game-cta .btn-strategy {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--cas-ink);
}

.cas-page .cas-game-cta .btn-strategy:hover {
  background-color: var(--cas-ink);
  border-color: var(--cas-ink);
  color: var(--white);
}

@media (prefers-reduced-motion: reduce) {
  .cas-page .cas-game,
  .cas-page .cas-game-num,
  .cas-page .cas-game-body {
    transition: none;
  }
}

/* ---------- Why choose iApp ---------- */
.cas-page .cas-choose {
  background: var(--white);
}

.cas-page .cas-choose-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 4vw, 70px);
  align-items: start;
}

.cas-page .cas-choose-copy .heading-main {
  font-size: clamp(28px, 3.4vw, 46px);
  margin-bottom: 22px;
}

.cas-page .cas-choose-copy p {
  margin-bottom: clamp(26px, 3vw, 38px);
  color: var(--cas-body);
  line-height: 1.8;
}

/* ruled, not carded: the design draws these as a table of points */
.cas-page .cas-choose-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(20px, 2.6vw, 44px);
  row-gap: clamp(24px, 3vw, 40px);
}

.cas-page .cas-choose-item {
  min-width: 0;
  padding-bottom: clamp(20px, 2.4vw, 34px);
  border-bottom: 1px solid var(--cas-line);
}

.cas-page .cas-choose-item:nth-child(odd) {
  padding-right: clamp(16px, 2vw, 34px);
  border-right: 1px solid var(--cas-line);
}

.cas-page .cas-choose-item:nth-last-child(-n + 2) {
  border-bottom: 0;
  padding-bottom: 0;
}

.cas-page .cas-choose-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: #eaf0ff;
  color: #4f46e5;
}

/* choose-1..6 are indigo line art on transparent, so this plate stays a pale
   tint. choose-6.png is 29x20, not square - contain, never stretch. */
.cas-page .cas-choose-ico .lp-icon,
.cas-page .cas-choose-ico img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.cas-page .cas-choose-item h3 {
  margin: 0 0 10px;
  font-size: clamp(15px, 1.35vw, 18px);
  font-weight: 700;
  color: var(--cas-ink);
}

.cas-page .cas-choose-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--cas-body);
}

/* ---------- FAQ ---------- */
.cas-page .lp-faq {
  background: linear-gradient(180deg, #f7f9fd 0%, #f1f4fb 100%);
}

/* ---------- Responsive ----------
   The theme's ladder: 1200 / 1100 / 960 / 768 / 640 / 560 / 380. Every
   multi-column grid on this page collapses on the way down, and every sticky
   column is released at the same 960px the shared components stack at:
   stacked, a column is its own grid row with no travel to sit still through,
   and pinning it there parks the copy over the block scrolling past it.

   The process stack is the exception — it pins at every width, because each
   step is its own sticky box rather than one column of a two-column grid. */

/* Sticky only while there are two columns to be sticky against. Which column
   actually moves is decided by their heights: the shorter one pins and the
   taller one supplies the travel, so both carry the rule and whichever has
   nothing to sit still through simply does not move.

   Measured travel at 1440px — the difference between the two columns, which is
   all a sticky column ever gets: .cas-choose-copy 371px (373 vs 744),
   .cas-case-panels 110px (444 vs 554), .cas-how-copy only 64px (863 vs 927).
   The last one works but barely reads; the fix if it ever needs to is
   lengthening the panel beside it, not touching this rule. */
@media (min-width: 961px) {
  .cas-page .cas-how-copy,
  .cas-page .cas-choose-copy,
  .cas-page .cas-case-stage,
  .cas-page .cas-case-panels {
    position: sticky;
    top: clamp(96px, 9vw, 124px);
    align-self: start;
  }
}

@media (max-width: 1100px) {
  .cas-page .cas-benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .cas-page .cas-marketing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .cas-page .cas-how-inner,
  .cas-page .cas-choose-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .cas-page .cas-service-grid,
  .cas-page .cas-marketing-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stacked slider: photograph, then dots, then the card. */
  .cas-page .cas-case-slider {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stacked, the stage fills the container, so arrows hung outside its edges
     sit in the page gutter — 18px of it against a 14px gutter at 320px, which
     was 4px of horizontal overflow. Inside the photograph from here down. */
  .cas-page .cas-case-slider .slider-prev {
    left: 10px;
  }

  .cas-page .cas-case-slider .slider-next {
    right: 10px;
  }

  .cas-page .cas-case-stage,
  .cas-page .cas-case-slider .slider-dots,
  .cas-page .cas-case-panels {
    grid-column: 1;
  }

  .cas-page .cas-case-stage {
    grid-row: 1;
  }

  .cas-page .cas-case-slider .slider-dots {
    grid-row: 2;
  }

  .cas-page .cas-case-panels {
    grid-row: 3;
  }

  .cas-page .cas-why-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cas-page .cas-why-col + .cas-why-col {
    border-left: 0;
    padding-left: 0;
  }

  .cas-page .cas-hero-art img {
    max-width: 560px;
    margin-inline: auto;
  }

  /* landing.css dissolves .lp-hero-copy here so the artwork can sit between the
     H1 and the body copy, ordering the title to -2 and the art to -1. Anything
     else added to that wrapper keeps source order and lands under the artwork —
     the eyebrow has to be pulled above the title explicitly. */
  .cas-page .cas-hero-eyebrow {
    order: -3;
  }
}

@media (max-width: 768px) {
  .cas-page .cas-benefit-grid,
  .cas-page .cas-choose-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* with one column there is no second column to rule against */
  .cas-page .cas-choose-item:nth-child(odd) {
    padding-right: 0;
    border-right: 0;
  }

  .cas-page .cas-choose-item:nth-last-child(2) {
    border-bottom: 1px solid var(--cas-line);
    padding-bottom: clamp(20px, 2.4vw, 34px);
  }

  /* A 120px numeral gutter plus its indent leaves no measure for the copy on a
     phone, so the numeral moves above the detail and the divider goes with it. */
  .cas-page .cas-proc-flex {
    display: block;
  }

  .cas-page .cas-proc-num {
    width: auto;
    margin-bottom: 2px;
  }

  .cas-page .cas-proc-detail {
    border-left: 0;
    padding-left: 0;
  }

  .cas-page .cas-how-item {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
  }

  .cas-page .cas-how-item .lp-feature-icon {
    width: 48px;
    height: 48px;
  }

  .cas-page .cas-how-item p {
    padding-left: 14px;
  }
}

@media (max-width: 640px) {
  .cas-page .cas-how-flow {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  /* the chevron pointed across the row; stacked, it points down */
  .cas-page .cas-how-stop + .cas-how-stop::before {
    top: -16px;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }

  .cas-page .cas-case-block dd {
    padding-left: 0;
  }
}

@media (max-width: 640px) {
  .cas-page .cas-games-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* the thumbnail track is dead weight at a phone measure */
  .cas-page .cas-game {
    grid-template-columns: minmax(0, 1fr);
  }

  .cas-page .cas-game-figure img {
    aspect-ratio: 16 / 9;
  }

  .cas-page .cas-game-body {
    padding-left: 0;
    padding-top: 6px;
    border-left: 0;
    border-top: 2px solid transparent;
  }

  .cas-page .cas-game:hover .cas-game-body,
  .cas-page .cas-game:focus-within .cas-game-body {
    border-left-color: transparent;
    border-top-color: var(--blue);
  }
}

@media (max-width: 560px) {
  .cas-page .cas-hero-actions {
    gap: 16px;
  }

  /* the decorations are the first thing to give up room on a phone */
  .cas-page .cas-band::before {
    background-size:
      clamp(64px, 18vw, 96px) auto,
      clamp(48px, 14vw, 72px) auto;
  }

  .cas-page .cas-band::after {
    background-size: clamp(64px, 18vw, 96px) auto;
  }

  .cas-page .cas-how-panel,
  .cas-page .cas-case-card {
    padding: 18px 16px;
  }

  .cas-page .cas-how-item {
    padding: 16px 14px;
  }
}

@media (max-width: 380px) {
  .cas-page .cas-hero-eyebrow {
    padding: 9px 14px;
    letter-spacing: 0.03em;
  }

  .cas-page .cas-service {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .cas-page .cas-how-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .cas-page .cas-how-item p {
    border-left: 0;
    padding-left: 0;
  }

  .cas-page .cas-why-list li {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
}