/* /case-study/spinking-online-roulette-platform-development-case-study — AISHTMLNEWDESIGN-504
   Page-owned styles. EVERY selector is scoped to #page-case-study-spinking-online-roulette-platform-development-case-study or a
   csso- 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 — "TRUE WHEEL".
   A roulette wheel is an instrument before it is entertainment, and the only
   question this case study answers is whether the wheel ran true under load.
   So the page is set as a bias-check record: machined graphite for the hero and
   the gauge board, warm workshop paper for the written record, one single-zero
   green as the sole signal colour, rotor-sector numbering (01–06) carrying the
   reader through, and hairline rules doing the work that boxes and shadows
   usually do. No felt, no chips, no neon. */

#page-case-study-spinking-online-roulette-platform-development-case-study{
  --csso-ink:#14181c;
  --csso-ink-2:#1d242a;
  --csso-steel:#8e9aa4;
  --csso-steel-dim:#5d6970;
  --csso-paper:#f7f5f0;
  --csso-paper-2:#efece4;
  --csso-rule:#ddd8cc;
  --csso-rule-dark:#2b333a;
  --csso-green:#0f7a52;
  --csso-green-lit:#3fd18b;   /* readout green — the dark --csso-green is unreadable on ink */
  --csso-text:#22282d;
  --csso-text-soft:#4d565e;
  --csso-wrap:1180px;
  font-family:"Inter",system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--csso-text);
  background:var(--csso-paper);
}

/* ── shared shells ──────────────────────────────────────────────────── */
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-wrap{
  max-width:var(--csso-wrap);margin:0 auto;padding:0 24px;
}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-wrap--read{max-width:820px;}

#page-case-study-spinking-online-roulette-platform-development-case-study .csso-sec{padding:76px 0;}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-sec--paper{background:var(--csso-paper);}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-sec--paper2{background:var(--csso-paper-2);}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-sec--ink{background:var(--csso-ink);}

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

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

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

/* ── buttons ────────────────────────────────────────────────────────── */
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-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-spinking-online-roulette-platform-development-case-study .csso-btn--green{
  background:var(--csso-green);color:#fff;
}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-btn--green:hover{background:#0c6343;}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-btn--ink{
  background:transparent;color:var(--csso-ink);border-color:var(--csso-ink);
}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-btn--ink:hover{
  background:var(--csso-ink);color:var(--csso-paper);
}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-btn:focus-visible{
  outline:3px solid var(--csso-green);outline-offset:3px;
}
/* Every section CTA is centred, matching the hero's. Previously the button
   sat left in Results and Why while the hero's was centred, so the page read
   with two different CTA positions. */
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-secact{margin-top:38px;text-align:center;}

/* ── hero (rule 24: image-free, full-bleed, static gradient) ────────── */
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-hero{
  background:linear-gradient(168deg,#1d242a 0%,#14181c 58%,#101418 100%);
  padding:clamp(72px,9vw,120px) 24px clamp(64px,8vw,104px);
  border-bottom:1px solid var(--csso-rule-dark);
}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-hero__inner{
  max-width:900px;margin:0 auto;text-align:center;
}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-hero__eyebrow{
  font-size:16px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--csso-steel);margin:0 0 20px;
}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-hero__h1{
  font-size:clamp(38px,5.2vw,64px);line-height:1.06;font-weight:800;
  letter-spacing:-.025em;color:#fff;margin:0 0 24px;
}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-hero__lede{
  font-size:19px;line-height:1.7;color:#c3ccd3;margin:0 auto;max-width:760px;
}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-hero__act{margin-top:34px;}

#page-case-study-spinking-online-roulette-platform-development-case-study .csso-hero__stack{
  margin-top:46px;padding-top:30px;border-top:1px solid var(--csso-rule-dark);
}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-hero__stackh{
  font-size:16px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--csso-steel);margin:0 0 16px;
}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-stack{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-stack__item{
  font-size:16px;font-weight:600;color:#dfe5ea;
  padding:9px 16px;border:1px solid #39434b;border-radius:2px;background:rgba(255,255,255,.03);
}

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

/* ── section index — the wheel's numbered sectors ───────────────────── */
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-index{
  background:var(--csso-paper-2);border-bottom:1px solid var(--csso-rule);padding:44px 0;
}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-index__h{
  font-size:18px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--csso-steel-dim);margin:0 0 20px;
}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-index__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--csso-rule);border:1px solid var(--csso-rule);
}
/* box-sizing is the whole reason the row divider was missing. The shared
   layout sheet does not set border-box for this element, so height:100%
   plus 18px of vertical padding measured 121px inside an 85px grid cell —
   the link overflowed its <li> by exactly its padding and painted paper
   over the 1px row gap. The column gaps survived because the overflow is
   vertical only, which is why the grid looked like it had columns but no
   rows. It also pushed the bottom row past the list's own border. */
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-index__item{
  display:flex;align-items:flex-start;gap:12px;height:100%;
  box-sizing:border-box;
  background:var(--csso-paper);padding:18px 18px;
  transition:background-color .18s ease;
}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-index__item:hover{background:#fff;}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-index__item:focus-visible{
  outline:3px solid var(--csso-green);outline-offset:-3px;
}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-index__n{
  font-size:16px;font-weight:700;color:var(--csso-green);
  font-variant-numeric:tabular-nums;padding-top:2px;
}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-index__t{
  font-size:17px;font-weight:600;line-height:1.45;color:var(--csso-ink);
}

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

/* ── solution mapping table ─────────────────────────────────────────── */
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-map__scroll{
  margin-top:30px;overflow-x:auto;border:1px solid var(--csso-rule);background:#fff;
}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-table{
  width:100%;border-collapse:collapse;min-width:820px;
}
/* Ruled on BOTH axes. With horizontal rules alone the mapping read as three
   loose columns of prose rather than the Challenge/Solution/Result grid it
   is — and the gridlines are the point: they carry which solution belongs to
   which challenge. The green sits on the header edge, so the accent marks the
   whole header rather than singling out one column.

   The header dividers use the SAME tone as the body's (--csso-rule), so the
   column rules run unbroken from the header through the last row. They were
   briefly rgba(255,255,255,.32): translucent white on the #14181c header
   composited to roughly #616568 and read as absent at 1px, which is what the
   staging review caught. An opaque light rule is legible at 1px; a dark-on-
   dark or translucent one is not. */
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-table th{
  text-align:left;padding:14px 20px;background:var(--csso-ink);color:#fff;
  font-size:16px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:2px solid var(--csso-green);
}
/* 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 — the treatment used on the sportivaplay case study, which
   this was reviewed against. A 1px hairline was tried first and is simply not
   what a reader registers as a column division at this table's size. */
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-table th:not(:first-child),
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-table td:not(:first-child){
  border-left:4px solid var(--csso-green);
}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-table td{
  padding:18px 20px;vertical-align:top;
  font-size:17px;line-height:1.62;color:var(--csso-text-soft);
  border:1px solid var(--csso-rule);width:33.33%;
}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-table tbody tr:nth-child(even) td{background:var(--csso-paper);}
/* No column is emphasised. Challenge, Solution and Result are peers, and
   bolding one of them implied a hierarchy the preservation record does not
   have. */

/* ── measurable results — the gauge board ───────────────────────────── */
/* GAUGE BOARD. Four readouts in a row, matching the sportivaplay layout.
   The percentage is given its own line at display size IN PLACE, inside the
   record's own sentence — one copy, original word order, not a word altered:
       Server stability improved by
       88%
       during peak hours.
   An earlier build pulled the figure out into a separate span above the
   sentence, which read better as a card but printed the number twice. That is
   a content change by any fair reading, and the brief is layout-only, so the
   figure stays in the sentence and CSS does the promoting. */
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-stats{
  list-style:none;margin:34px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-stats__item{
  background:var(--csso-ink-2);border:1px solid var(--csso-rule-dark);
  border-radius:3px;padding:30px 24px;
}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-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(--csso-green-lit);
  font-variant-numeric:tabular-nums;
}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-stats__p{
  margin:0;font-size:17px;line-height:1.6;color:#c3ccd3;
}
/* The lead-ins wrap to one or two lines depending on their length, which
   left the four figures sitting at different heights. Reserving two lines
   lands every figure on the same baseline across the row, as the reference
   does — without touching a word. */
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-stats__lead{display:block;min-height:3.2em;}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-stats__tail{display:block;}

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

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

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

/* ── CTA modal ──────────────────────────────────────────────────────── */
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-modal{
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(12,16,20,.72);
  padding: 100px 24px 24px 24px;overflow-y:auto;
}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-modal.is-open{display:flex;align-items:flex-start;justify-content:center;}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-modal__box{
  position:relative;width:100%;max-width:640px;margin:auto;
  background:#fff;border-radius:4px;padding:44px 12px 12px;
}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-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(--csso-rule);border-radius:3px;
  color:var(--csso-ink);cursor:pointer;font-size:16px;
}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-modal__x:hover{background:var(--csso-paper-2);}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-modal__x:focus-visible{outline:3px solid var(--csso-green);outline-offset:2px;}
#page-case-study-spinking-online-roulette-platform-development-case-study .csso-modal__box iframe{
  display:block;width:100%;min-height:560px;border:0;
}

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

  /* The mapping table stops being a table on a phone and becomes five
     labelled records — each cell keeps its column name via data-th. */
  #page-case-study-spinking-online-roulette-platform-development-case-study .csso-map__scroll{overflow-x:visible;background:transparent;border:0;}
  #page-case-study-spinking-online-roulette-platform-development-case-study .csso-table{min-width:0;}
  #page-case-study-spinking-online-roulette-platform-development-case-study .csso-table thead{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
  }
  #page-case-study-spinking-online-roulette-platform-development-case-study .csso-table tbody tr{
    display:block;margin-bottom:16px;background:#fff;border:1px solid var(--csso-rule);
  }
  #page-case-study-spinking-online-roulette-platform-development-case-study .csso-table tbody tr:nth-child(even) td{background:transparent;}
  #page-case-study-spinking-online-roulette-platform-development-case-study .csso-table td{
    display:block;width:auto;border:0;padding:14px 18px;
  }
  #page-case-study-spinking-online-roulette-platform-development-case-study .csso-table td+td{border-top:1px solid var(--csso-rule);}
  #page-case-study-spinking-online-roulette-platform-development-case-study .csso-table th:not(:first-child),
  #page-case-study-spinking-online-roulette-platform-development-case-study .csso-table td:not(:first-child){border-left:0;}
  #page-case-study-spinking-online-roulette-platform-development-case-study .csso-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(--csso-green);
  }
  #page-case-study-spinking-online-roulette-platform-development-case-study .csso-table td:first-child{box-shadow:none;}
}