/* /case-study/royalspin-digital-roulette-platform-development-case-study — AISHTMLNEWDESIGN-526
   Page-owned styles. EVERY selector is scoped to #page-case-study-royalspin-digital-roulette-platform-development-case-study
   or a csrd- prefixed class: this sheet must never style body, a bare element,
   #ais-header or #ais-footer. The document reset (html,body{margin:0}) is owned
   by the shared layout sheet. Font is Inter; no body/UI text below 16px.

   VISUAL DIRECTION — "LATENCY BUDGET".
   Every problem in this record is a timing problem: wheel animations lagging
   at peak, real-time sync between players and servers, deposits that stall,
   fraud caught late. So the page is set as a latency budget — the engineering
   sheet where each millisecond is allocated and accounted for. Deep indigo
   ground, instrument paper for the written record, one signal-cyan accent,
   interval indexing (01-06), hairline timing rules.
   Deliberately unlike TRUE WHEEL (AISHTMLNEWDESIGN-504, the other roulette
   case study), which reads as a bias-check on the wheel itself. This one is
   about the clock, not the rotor. No spinning wheel, no motion.

   Built carrying the corrections that AISHTMLNEWDESIGN-504 needed across six
   review rounds, so they do not have to be found again here:
     · table column dividers are a 4px accent rule, not a 1px hairline — a
       hairline does not read as a column division at this size
     · no column in the table is bold; the three are peers
     · no table caption
     · every section CTA is centred, matching the hero's
     · the ROI figure is promoted IN PLACE inside the record's own sentence and
       never restated above it. This record writes its results figure-first
       ("60% faster development achieved ..."), so the split is clean and the
       lead-in line 512 needed is unnecessary here
     · .csrd-index__item carries box-sizing:border-box — without it, height:100%
       plus padding overflows the grid cell and paints over the row gap, which
       is what hid that grid's row divider */

#page-case-study-royalspin-digital-roulette-platform-development-case-study{
  --csrd-ink:#141a26;
  --csrd-ink-2:#1d2433;
  --csrd-steel:#8994a6;
  --csrd-steel-dim:#596374;
  --csrd-paper:#f5f6f8;
  --csrd-paper-2:#e7eaee;
  --csrd-rule:#d3d8df;
  --csrd-rule-dark:#2a3346;
  --csrd-cyan:#0b6b86;         /* paper-ground accent — signal cyan */
  --csrd-cyan-lit:#49cfe8;     /* on-dark readout — --csrd-cyan is unreadable on ink */
  --csrd-text:#1e242e;
  --csrd-text-soft:#4a5462;
  --csrd-wrap:1180px;
  font-family:"Inter",system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--csrd-text);
  background:var(--csrd-paper);
}

/* ── shared shells ──────────────────────────────────────────────────── */
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-wrap{max-width:var(--csrd-wrap);margin:0 auto;padding:0 24px;}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-wrap--read{max-width:820px;}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-sec{padding:76px 0;}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-sec--paper{background:var(--csrd-paper);}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-sec--paper2{background:var(--csrd-paper-2);}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-sec--ink{background:var(--csrd-ink);}

#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-h2{
  font-size:clamp(32px,4vw,48px);line-height:1.12;font-weight:800;
  letter-spacing:-.02em;margin:0 0 22px;color:var(--csrd-ink);
}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-h2--light{color:var(--csrd-paper);}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-h2--centre{text-align:center;}

#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-kicker{
  display:flex;align-items:center;gap:10px;
  font-size:16px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--csrd-steel-dim);margin:0 0 14px;
}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-kicker--light{color:var(--csrd-steel);}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-kicker--centre{justify-content:center;}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-kicker__n{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:26px;padding:0 8px;border-radius:2px;
  background:var(--csrd-cyan);color:#fff;
  font-size:16px;font-weight:700;letter-spacing:.04em;font-variant-numeric:tabular-nums;
}

#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-prose,
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-body{
  font-size:18px;line-height:1.72;color:var(--csrd-text-soft);margin:0;
}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-link{
  color:var(--csrd-cyan);font-weight:600;box-shadow:inset 0 -1px 0 0 currentColor;
}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-link:hover{box-shadow:inset 0 -2px 0 0 currentColor;}

/* ── buttons — every section CTA is centred, matching the hero's ─────── */
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:54px;padding:0 32px;border:1px solid transparent;border-radius:3px;
  font-family:inherit;font-size:17px;font-weight:700;letter-spacing:.01em;
  cursor:pointer;transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-btn--cyan{background:var(--csrd-cyan);color:#fff;}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-btn--cyan:hover{background:#08556b;}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-btn--ink{background:transparent;color:var(--csrd-ink);border-color:var(--csrd-ink);}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-btn--ink:hover{background:var(--csrd-ink);color:var(--csrd-paper);}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-btn:focus-visible{outline:3px solid var(--csrd-cyan);outline-offset:3px;}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-secact{margin-top:38px;text-align:center;}

/* ── hero — rule 24: image-free, full-bleed, static gradient ─────────── */
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-hero{
  background:linear-gradient(168deg,#1d2433 0%,#141a26 58%,#10151f 100%);
  padding:clamp(72px,9vw,120px) 24px clamp(64px,8vw,104px);
  border-bottom:1px solid var(--csrd-rule-dark);
}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-hero__inner{max-width:900px;margin:0 auto;text-align:center;}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-hero__eyebrow{
  font-size:16px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--csrd-steel);margin:0 0 20px;
}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-hero__h1{
  font-size:clamp(36px,5vw,60px);line-height:1.07;font-weight:800;
  letter-spacing:-.025em;color:#fff;margin:0 0 24px;
}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-hero__lede{
  font-size:19px;line-height:1.7;color:#c1cad1;margin:0 auto;max-width:760px;
}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-hero__act{margin-top:34px;}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-hero__stack{
  margin-top:46px;padding-top:30px;border-top:1px solid var(--csrd-rule-dark);
}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-hero__stackh{
  font-size:16px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--csrd-steel);margin:0 0 16px;
}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-stack{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-stack__item{
  font-size:16px;font-weight:600;color:#dde3e8;
  padding:9px 16px;border:1px solid #37424a;border-radius:2px;background:rgba(255,255,255,.03);
}

/* ── breadcrumb ─────────────────────────────────────────────────────── */
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-crumb{background:var(--csrd-paper);border-bottom:1px solid var(--csrd-rule);}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-crumb__bar{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  padding:16px 0;font-size:16px;color:var(--csrd-text-soft);
}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-crumb__bar a{color:var(--csrd-text-soft);font-weight:500;}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-crumb__bar a:hover{color:var(--csrd-cyan);}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-crumb__back{display:inline-flex;align-items:center;}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-crumb__back img{display:block;width:14px;height:14px;}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-crumb__sep{color:var(--csrd-steel);}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-crumb__here{color:var(--csrd-ink);font-weight:600;}

/* ── section index — the fixture list ───────────────────────────────── */
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-index{
  background:var(--csrd-paper-2);border-bottom:1px solid var(--csrd-rule);padding:44px 0;
}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-index__h{
  font-size:18px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--csrd-steel-dim);margin:0 0 20px;
}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-index__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--csrd-rule);border:1px solid var(--csrd-rule);
}
/* box-sizing is NOT optional here. The shared layout sheet does not set
   border-box for this element, and height:100% plus 18px of vertical padding
   under content-box measures taller than the grid cell — the link then overflows
   its <li> and paints paper over the 1px ROW gap, while the column gaps survive
   because the overflow is vertical only. That is exactly how 504 lost its row
   divider, and it is invisible in the CSS unless you know to look. */
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-index__item{
  display:flex;align-items:flex-start;gap:12px;height:100%;
  box-sizing:border-box;
  background:var(--csrd-paper);padding:18px 18px;
  transition:background-color .18s ease;
}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-index__item:hover{background:#fff;}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-index__item:focus-visible{outline:3px solid var(--csrd-cyan);outline-offset:-3px;}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-index__n{
  font-size:16px;font-weight:700;color:var(--csrd-cyan);font-variant-numeric:tabular-nums;padding-top:2px;
}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-index__t{font-size:17px;font-weight:600;line-height:1.45;color:var(--csrd-ink);}

/* ── challenges ─────────────────────────────────────────────────────── */
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-chlist{list-style:none;margin:34px 0 0;padding:0;counter-reset:csrd-ch;}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-chlist__item{
  counter-increment:csrd-ch;display:flex;gap:20px;padding:24px 0;border-top:1px solid var(--csrd-rule);
}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-chlist__item:last-child{border-bottom:1px solid var(--csrd-rule);}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-chlist__item::before{
  content:counter(csrd-ch,decimal-leading-zero);
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--csrd-ink);color:var(--csrd-ink);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;
}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-chlist__t{font-size:22px;font-weight:700;line-height:1.3;color:var(--csrd-ink);margin:0 0 8px;}

/* ── solution mapping table ─────────────────────────────────────────── */
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-map__scroll{
  margin-top:30px;overflow-x:auto;border:1px solid var(--csrd-rule);background:#fff;
}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-table{width:100%;border-collapse:collapse;min-width:820px;}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-table th{
  text-align:left;padding:14px 20px;background:var(--csrd-ink);color:#fff;
  font-size:16px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:2px solid var(--csrd-cyan);
}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-table td{
  padding:18px 20px;vertical-align:top;
  font-size:17px;line-height:1.62;color:var(--csrd-text-soft);
  border:1px solid var(--csrd-rule);width:33.33%;
}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-table tbody tr:nth-child(even) td{background:var(--csrd-paper);}
/* COLUMN DIVIDERS: a 4px accent rule on the left edge of Solution and Result, so
   it runs the full height of the table through header and body as one unbroken
   line. A 1px hairline was tried on 504 and is not what a reader registers as a
   column division at this size. No column is bold — the three are peers. */
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-table th:not(:first-child),
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-table td:not(:first-child){
  border-left:4px solid var(--csrd-cyan);
}

/* ── measurable results — the ledger board ──────────────────────────── */
/* Four readouts in a row. The percentage is promoted to its own line at display
   size IN PLACE, inside the record's own sentence — one copy, original word
   order, not a word altered. Restating the figure above the sentence prints the
   number twice, which is a content change; the record is verbatim. */
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-stats{
  list-style:none;margin:34px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-stats__item{
  background:var(--csrd-ink-2);border:1px solid var(--csrd-rule-dark);
  border-radius:3px;padding:30px 24px;
}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-stats__p{margin:0;font-size:17px;line-height:1.6;color:#c1cad1;}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-stats__tail{display:block;}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-stats__fig{
  display:block;margin:2px 0 4px;
  font-size:clamp(38px,4vw,54px);line-height:1.04;font-weight:800;
  letter-spacing:-.03em;color:var(--csrd-cyan-lit);font-variant-numeric:tabular-nums;
}

/* ── why AIS ────────────────────────────────────────────────────────── */
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-whylist{
  list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:26px;
}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-whylist__item{
  padding:26px 26px 28px;background:#fff;border:1px solid var(--csrd-rule);
  border-top:3px solid var(--csrd-cyan);border-radius:2px;
}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-whylist__t{font-size:21px;font-weight:700;line-height:1.3;color:var(--csrd-ink);margin:0 0 10px;}

/* ── client quote ───────────────────────────────────────────────────── */
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-quote__fig{margin:28px 0 0;}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-quote__bq{margin:0;padding:30px 0 0;border-top:2px solid var(--csrd-ink);}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-quote__p{
  margin:0;font-size:clamp(22px,2.6vw,30px);line-height:1.5;
  font-weight:600;letter-spacing:-.01em;color:var(--csrd-ink);
}

/* ── area we serve ──────────────────────────────────────────────────── */
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-servelist{
  list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-servelist__item{
  padding:24px 22px;background:var(--csrd-paper-2);border:1px solid var(--csrd-rule);border-radius:2px;
}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-servelist__r{
  display:flex;align-items:center;gap:8px;margin:0 0 12px;
  font-size:16px;font-weight:700;letter-spacing:.1em;color:var(--csrd-ink);
}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-servelist__r img{display:block;width:14px;height:14px;flex:0 0 auto;}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-tel{display:inline-block;margin:0 0 10px;font-size:18px;font-weight:700;color:var(--csrd-cyan);}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-tel:hover{color:#08556b;}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-servelist__item .csrd-body{font-size:16px;line-height:1.62;}

/* ── CTA modal ──────────────────────────────────────────────────────── */
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-modal{
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(11,15,18,.72);padding: 100px 24px 24px 24px;overflow-y:auto;
}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-modal.is-open{display:flex;align-items:flex-start;justify-content:center;}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-modal__box{
  position:relative;width:100%;max-width:640px;margin:auto;
  background:#fff;border-radius:4px;padding:44px 12px 12px;
}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-modal__x{
  position:absolute;top:10px;right:10px;
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--csrd-rule);border-radius:3px;
  color:var(--csrd-ink);cursor:pointer;font-size:16px;
}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-modal__x:hover{background:var(--csrd-paper-2);}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-modal__x:focus-visible{outline:3px solid var(--csrd-cyan);outline-offset:2px;}
#page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-modal__box iframe{display:block;width:100%;min-height:560px;border:0;}

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width:1024px){
  #page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-index__list{grid-template-columns:repeat(2,1fr);}
  #page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-servelist{grid-template-columns:repeat(2,1fr);}
  #page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-stats{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px){
  #page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-sec{padding:56px 0;}
  #page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-index__list{grid-template-columns:1fr;}
  #page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-stats{grid-template-columns:1fr;}
  #page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-whylist{grid-template-columns:1fr;}
  #page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-servelist{grid-template-columns:1fr;}
  #page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-btn{width:100%;}
  #page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-stack{justify-content:flex-start;}
  #page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-hero__inner{text-align:left;}
  #page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-hero__lede{margin-left:0;}

  /* the mapping table becomes labelled records; the desktop rules would be noise */
  #page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-map__scroll{overflow-x:visible;background:transparent;border:0;}
  #page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-table{min-width:0;}
  #page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-table thead{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
  }
  #page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-table tbody tr{
    display:block;margin-bottom:16px;background:#fff;border:1px solid var(--csrd-rule);
  }
  #page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-table tbody tr:nth-child(even) td{background:transparent;}
  #page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-table td{display:block;width:auto;border:0;padding:14px 18px;}
  #page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-table td+td{border-top:1px solid var(--csrd-rule);}
  #page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-table th:not(:first-child),
  #page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-table td:not(:first-child){border-left:0;}
  #page-case-study-royalspin-digital-roulette-platform-development-case-study .csrd-table td::before{
    content:attr(data-th);display:block;margin-bottom:6px;
    font-size:16px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--csrd-cyan);
  }
}