/* ==================================================================
   PIPWORK — rollking-online-dice-game-platform-case-study
   AISHTMLNEWDESIGN-527 · visual direction: PIPWORK

   The serialized precision die: a porcelain casting table with cobalt-ink
   type and machined hairlines. Ordinals on list items are framed die faces
   (1–5 pips) built from CSS grid — never numerals; section indexes (TOC)
   stay as engraved numerals. Light where the sibling dice page (SIX FACES,
   graphite/bone/hot-red) is dark; no shared palette, motif or section
   treatment with any of the 36 directions already in the repo.

   Scoped: every selector starts with #page-case-study-rollking-online-dice-
   game-platform-case-study or a .csro- class that only exists inside it.
   Font: Inter only (rule 9). Body text floor 16px (rule 10). No running
   animation (rule 26) — the only motion is hover/focus state changes.
   ================================================================== */

#page-case-study-rollking-online-dice-game-platform-case-study{
  /* PIPWORK tokens */
  --csro-porcelain:#f6f5f1;   /* page field            */
  --csro-tint:#ecebe4;        /* alternating band      */
  --csro-card:#fffdf9;        /* raised card           */
  --csro-ink:#101b3c;         /* deep cobalt ink       */
  --csro-ink-soft:#3d4763;    /* muted body            */
  --csro-cobalt:#1e47c8;      /* signal                */
  --csro-cobalt-deep:#16307e; /* table heads / links   */
  --csro-bone:#f6f5f1;        /* text on ink           */
  --csro-hair:#c9c5b8;        /* machined hairline     */
  --csro-hair-strong:#8f8a7c;
  font-family:"Inter",system-ui,sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--csro-ink);
  background:var(--csro-porcelain);
  /* fix#1: page-wide center rule. The "Case Study" TOC, the breadcrumb nav,
     the Solution mapping table and the client-quote plate opt back out to
     text-align:left below — a nav strip and a multi-sentence data table read
     worse centered, and every sibling page keeps those three left-aligned
     even where its own hero/body copy is centered. */
  text-align:center;
}

/* ---------- shared column + section rhythm ---------- */
#page-case-study-rollking-online-dice-game-platform-case-study .csro-wrap{
  /* fix#6: widened to match the 1160px content column used by every other
     converted case-study page (rollking shipped narrower at 900px). */
  max-width:1160px;margin:0 auto;padding:0 24px;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-section{
  padding:72px 0;
  /* The shared site header is position:sticky, top:0, 77px tall. Without this,
     a TOC jump parks the heading 5px under the header — verified via
     getBoundingClientRect() before this fix (top:72px vs header height 77px).
     This sheet may not style html, so scroll-padding-top on the scroller is
     unavailable; scroll-margin on each target is the scoped equivalent. */
  scroll-margin-top:96px;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-section--tint{
  background:var(--csro-tint);
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-h2{
  margin:0 0 28px;
  font-size:34px;line-height:1.2;font-weight:800;letter-spacing:-0.01em;
  padding-bottom:18px;
  border-bottom:2px solid var(--csro-ink);
  position:relative;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-h2::after{
  /* machined joint: short second stitch offset from the rule — recentred
     under the now-centred heading (fix#1) instead of pinned to the left edge */
  content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  width:64px;height:2px;background:var(--csro-cobalt);
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-lede{
  /* readability cap: the 1160px wrap (fix#6) is too wide for a comfortable
     line length on running prose, so lede copy keeps the same ~780px
     measure every sibling page uses for body text and centers as a block */
  margin:0 auto 28px;max-width:780px;font-size:18px;color:var(--csro-ink-soft);
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-sec__ctarow{
  margin:36px 0 0;
  text-align:center; /* fix#2 */
}

/* ---------- buttons (one per section, labels unique) ---------- */
#page-case-study-rollking-online-dice-game-platform-case-study .csro-btn{
  display:inline-block;
  font-family:inherit;font-size:17px;font-weight:700;line-height:1;
  padding:17px 30px;border-radius:4px;cursor:pointer;
  border:2px solid var(--csro-ink);
  transition:background-color .15s ease,color .15s ease,transform .15s ease;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-btn--ink{
  background:var(--csro-ink);color:var(--csro-bone);
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-btn--ink:hover{
  background:var(--csro-cobalt-deep);border-color:var(--csro-cobalt-deep);transform:translateY(-1px);
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-btn--bone{
  background:var(--csro-bone);color:var(--csro-ink);border-color:var(--csro-bone);
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-btn--bone:hover{
  background:#fff;border-color:#fff;transform:translateY(-1px);
}
#page-case-study-rollking-online-dice-game-platform-case-study :focus-visible{
  outline:3px solid var(--csro-cobalt);outline-offset:3px;
}

/* ---------- pip faces: ordinals as dice, via grid-area placement ---------- */
#page-case-study-rollking-online-dice-game-platform-case-study .csro-pip{
  display:inline-grid;vertical-align:-6px;margin-right:14px;
  grid-template-columns:repeat(3,9px);grid-template-rows:repeat(3,9px);
  gap:2px;padding:6px;
  width:41px;height:41px;box-sizing:border-content;
  border:2px solid var(--csro-ink);border-radius:7px;
  background:var(--csro-card);
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-pip i{
  width:6px;height:6px;border-radius:50%;
  background:var(--csro-cobalt-deep);
  place-self:center;
}
/* pip layouts — classic die faces 1..6 */
#page-case-study-rollking-online-dice-game-platform-case-study .csro-pip--1 i:nth-child(1){grid-area:2/2;}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-pip--2 i:nth-child(1){grid-area:1/1;}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-pip--2 i:nth-child(2){grid-area:3/3;}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-pip--3 i:nth-child(1){grid-area:1/1;}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-pip--3 i:nth-child(2){grid-area:2/2;}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-pip--3 i:nth-child(3){grid-area:3/3;}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-pip--4 i:nth-child(1){grid-area:1/1;}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-pip--4 i:nth-child(2){grid-area:1/3;}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-pip--4 i:nth-child(3){grid-area:3/1;}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-pip--4 i:nth-child(4){grid-area:3/3;}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-pip--5 i:nth-child(1){grid-area:1/1;}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-pip--5 i:nth-child(2){grid-area:1/3;}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-pip--5 i:nth-child(3){grid-area:2/2;}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-pip--5 i:nth-child(4){grid-area:3/1;}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-pip--5 i:nth-child(5){grid-area:3/3;}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-pip--6 i:nth-child(1){grid-area:1/1;}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-pip--6 i:nth-child(2){grid-area:2/1;}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-pip--6 i:nth-child(3){grid-area:3/1;}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-pip--6 i:nth-child(4){grid-area:1/3;}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-pip--6 i:nth-child(5){grid-area:2/3;}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-pip--6 i:nth-child(6){grid-area:3/3;}
/* inverted faces on the ink band */
#page-case-study-rollking-online-dice-game-platform-case-study .csro-pip--onink{
  border-color:var(--csro-bone);background:transparent;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-pip--onink i{
  background:var(--csro-bone);
}

/* ---------- hero (rule 24: image-free, static pip-dot field + wash) ---------- */
#page-case-study-rollking-online-dice-game-platform-case-study .csro-hero{
  /* engraved pip field — static radial-gradient dots on porcelain, no image */
  background-color:var(--csro-porcelain);
  background-image:
    radial-gradient(circle at center,rgba(30,71,200,.16) 2.2px,transparent 2.6px),
    radial-gradient(circle at center,rgba(16,27,60,.05) 2.2px,transparent 2.6px),
    linear-gradient(180deg,#fbfaf7 0%,#f6f5f1 55%,#eeece5 100%);
  background-size:34px 34px,34px 34px,100% 100%;
  background-position:0 0,17px 17px,0 0;
  border-bottom:2px solid var(--csro-ink);
  padding:96px 0 84px;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-hero__inner{
  max-width:1160px;margin:0 auto;padding:0 24px; /* fix#6 */
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-eyebrow{
  /* flex, not inline text + vertical-align: the pip's 42px border-box never
     lined up cleanly against the text baseline via vertical-align at every
     zoom/font-load timing — flex centering makes the alignment exact and
     robust instead of a hand-tuned offset. justify-content re-centers the
     icon+text pair as a group now that .csro-eyebrow is a block-level flex
     container (text-align on the hero no longer reaches it). */
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin:0 0 22px;
  font-size:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--csro-cobalt-deep);
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-eyebrow__pip{
  display:inline-grid;flex:0 0 auto;
  grid-template-columns:repeat(3,8px);grid-template-rows:repeat(3,8px);gap:2px;
  padding:5px;border:2px solid var(--csro-cobalt-deep);border-radius:6px;
  background:var(--csro-card);
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-eyebrow__pip i{
  width:5px;height:5px;border-radius:50%;background:var(--csro-cobalt-deep);place-self:center;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-eyebrow__pip i:nth-child(1){grid-area:1/1;}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-eyebrow__pip i:nth-child(2){grid-area:2/2;}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-eyebrow__pip i:nth-child(3){grid-area:3/3;}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-hero__title{
  margin:0 0 22px;
  font-size:clamp(32px,4.6vw,52px);line-height:1.12;font-weight:900;letter-spacing:-0.02em;
  color:var(--csro-ink);
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-hero__lede{
  /* keeps its own 780px readability cap but must self-center now that its
     parent (.csro-hero__inner) is wider than that cap (fix#1 + fix#6) */
  margin:0 auto 30px;max-width:780px;
  font-size:19px;line-height:1.7;color:var(--csro-ink-soft);
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-hero__techlabel{
  margin:0 0 10px;
  font-size:16px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--csro-ink);
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-tech{
  margin:0 0 34px;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:10px;
  justify-content:center; /* fix#1: text-align doesn't reach flex children */
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-tech li{
  font-size:16px;font-weight:600;color:var(--csro-cobalt-deep);
  padding:9px 16px;
  background:var(--csro-card);
  border:1px solid var(--csro-hair-strong);border-bottom-width:3px;border-radius:4px;
}

/* ---------- breadcrumb ---------- */
#page-case-study-rollking-online-dice-game-platform-case-study .csro-breadcrumb{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:14px 24px;max-width:1160px;margin:0 auto; /* fix#6 */
  font-size:16px;color:var(--csro-ink-soft);
  border-bottom:1px solid var(--csro-hair);
  /* nav strip stays left-aligned under fix#1's page-wide center rule — every
     sibling page keeps its breadcrumb left/flex-start even when its body is
     centered, and a centered "Home / Case Study / ..." trail reads as broken */
  text-align:left;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-breadcrumb__back{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border:1px solid var(--csro-hair-strong);border-radius:50%;
  background:var(--csro-card);
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-breadcrumb__leg{
  color:var(--csro-cobalt-deep);font-weight:600;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-breadcrumb__leg:hover{
  text-decoration:underline;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-breadcrumb__now{
  color:var(--csro-ink);font-weight:700;
}

/* ---------- table of contents (sections keep engraved numerals) ---------- */
#page-case-study-rollking-online-dice-game-platform-case-study .csro-toc{
  padding:56px 0;
  border-bottom:1px solid var(--csro-hair);
  text-align:left; /* fix#1: the explicit "Case Study" exception */
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-toc__title{
  margin:0 0 20px;
  font-size:16px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--csro-cobalt-deep);
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-toc__list{
  margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--csro-hair);
  border:1px solid var(--csro-hair);
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-toc__list a{
  display:flex;align-items:baseline;gap:16px;
  padding:18px 20px;background:var(--csro-porcelain);
  font-size:17px;font-weight:600;color:var(--csro-ink);
  transition:background-color .15s ease,color .15s ease;
  /* fix#3: .csro-toc__list is a grid with gap-as-hairline (background shows
     through the 1px gaps). Grid items default to align-items:stretch, so the
     <li> stretches to match a taller neighbouring row, but this <a> — not
     itself a grid item — only sized to its own content and left the <li>'s
     transparent background (the grid's --csro-hair khaki) exposed as a solid
     band under the shorter "04 Measurable Results/ROI" cell. Filling the
     stretched <li> height keeps --csro-porcelain covering the whole cell. */
  height:100%;box-sizing:border-box;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-toc__list a:hover{
  background:var(--csro-card);color:var(--csro-cobalt-deep);
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-toc__num{
  font-size:16px;font-weight:800;color:var(--csro-cobalt);
  font-variant-numeric:tabular-nums;
}

/* ---------- challenges: machined docket / ledger rows ----------
   Redesigned off the 2x2-card-plus-one-wide-card grid (which read as an
   unbalanced 2x2+1 layout and duplicated the "icon + heading + paragraph
   card" pattern the Why band already uses below). A single bordered ledger
   of five rows — each a die-face pip anchoring its own title + body — reads
   as a "docket" of open issues, echoes the page's "casting table" framing
   note at the top of this file, and reuses the hairline/zebra/cobalt-rule
   language already established by the Solution table and the Client Quote
   accent instead of introducing a second card style. */
#page-case-study-rollking-online-dice-game-platform-case-study .csro-chals{
  margin:0;padding:0;list-style:none;
  border:1px solid var(--csro-hair-strong);border-radius:6px;
  overflow:hidden;background:var(--csro-card);
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-chal{
  display:flex;align-items:flex-start;gap:22px;
  padding:26px 28px;
  border-top:1px solid var(--csro-hair);
  border-left:3px solid var(--csro-cobalt);
  /* row layout reads left-to-right like a table row — same left-align
     exception already made for the Solution table under fix#1's page-wide
     centering, for the same reason: a leading icon plus centered text
     would look broken rather than considered. */
  text-align:left;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-chal:first-child{
  border-top:0;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-chal:nth-child(even){
  background:var(--csro-porcelain);
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-chal__pip{
  flex:0 0 auto;padding-top:3px;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-chal__pip .csro-pip{
  margin-right:0; /* base .csro-pip reserves 14px for inline text that follows it; not needed as a standalone flex item */
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-chal__copy{
  display:block;flex:1 1 auto;min-width:0;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-chal__t{
  margin:0 0 10px;
  font-size:20px;font-weight:800;line-height:1.3;color:var(--csro-ink);
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-chal__b{
  margin:0;
  font-size:16px;color:var(--csro-ink-soft);
}

/* ---------- solution: restored mapping table ---------- */
#page-case-study-rollking-online-dice-game-platform-case-study .csro-tablewrap{
  border:1px solid var(--csro-hair-strong);border-radius:4px;
  overflow:hidden;background:var(--csro-card);
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-map{
  width:100%;border-collapse:collapse;
  font-size:16px;
  /* fix#1 exception: multi-sentence data-table prose reads worse centered
     than left-aligned; every sibling table (incl. the sportivaplay reference
     used for fix#4) keeps its cells left-aligned regardless of page-wide
     centering. */
  text-align:left;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-map th{
  text-align:left;
  font-size:16px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--csro-bone);background:var(--csro-cobalt-deep);
  padding:15px 20px;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-map td{
  padding:18px 20px;vertical-align:top;line-height:1.6;
  border-top:1px solid var(--csro-hair);
  color:var(--csro-ink-soft);
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-map tr:nth-child(even) td{
  background:var(--csro-porcelain);
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-map td[data-label="Result"]{
  color:var(--csro-cobalt-deep); /* fix#5: bold removed, color-only emphasis kept */
}
/* fix#4: column dividers between Challenge / Solution / Result, same
   border-left-on-adjacent-cell technique as the sportivaplay reference page. */
#page-case-study-rollking-online-dice-game-platform-case-study .csro-map th + th,
#page-case-study-rollking-online-dice-game-platform-case-study .csro-map td + td{
  border-left:4px solid var(--csro-cobalt);
}

/* ---------- results: stat cards with corner ticks ---------- */
#page-case-study-rollking-online-dice-game-platform-case-study .csro-stats{
  margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-stat{
  position:relative;
  padding:30px 22px 26px;
  background:var(--csro-card);
  border:1px solid var(--csro-hair-strong);border-radius:4px;
  display:flex;flex-direction:column;gap:12px;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-stat::before,
#page-case-study-rollking-online-dice-game-platform-case-study .csro-stat::after{
  /* registration ticks in opposite corners */
  content:"";position:absolute;width:14px;height:14px;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-stat::before{
  top:8px;left:8px;border-top:3px solid var(--csro-cobalt);border-left:3px solid var(--csro-cobalt);
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-stat::after{
  bottom:8px;right:8px;border-bottom:3px solid var(--csro-cobalt);border-right:3px solid var(--csro-cobalt);
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-stat__n{
  font-size:46px;line-height:1;font-weight:900;letter-spacing:-0.02em;
  color:var(--csro-cobalt);font-variant-numeric:tabular-nums;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-stat__b{
  font-size:16px;line-height:1.55;color:var(--csro-ink-soft);
}

/* ---------- why: ink band ---------- */
#page-case-study-rollking-online-dice-game-platform-case-study .csro-band{
  background:var(--csro-ink);
  /* faint oversized pip field, static */
  background-image:radial-gradient(circle at center,rgba(246,245,241,.07) 2.4px,transparent 2.9px);
  background-size:38px 38px;
  padding:76px 0;
  /* #why is a TOC jump target sitting in this band, not .csro-section — needs
     the same clearance from the 77px sticky header as the other five. */
  scroll-margin-top:96px;
  color:var(--csro-bone);
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-h2--band{
  color:var(--csro-bone);border-bottom-color:var(--csro-bone);
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-h2--band::after{
  background:var(--csro-cobalt);
}
/* ---------- why: a divided "signature strip", not a card grid ----------
   Redesigned off the translucent 2x2 card grid: with Challenges now a
   ledger (see above) this was the page's last "icon + heading + paragraph
   card" instance. A single strip of four centred tiles, separated by
   hairline dividers instead of individual boxes, reads as one continuous
   measure — like a punch-card or scorecard — rather than four repeated
   card widgets, and gives the page a third distinct "group of things"
   composition (ledger rows / cornered stat tiles / divided strip) instead
   of two card grids that only differ by background colour. */
#page-case-study-rollking-online-dice-game-platform-case-study .csro-whys{
  margin:0;padding:0;list-style:none;
  display:flex;align-items:stretch;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-why{
  flex:1 1 0;min-width:0;
  padding:0 28px;
  border-left:1px solid rgba(246,245,241,.22);
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-why:first-child{
  border-left:0;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-why__pip{
  display:block;margin:0 0 18px;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-why__pip .csro-pip{
  margin-right:0; /* base .csro-pip reserves 14px for inline text that follows it — not needed on its own line */
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-why__t{
  margin:0 0 12px;
  font-size:20px;font-weight:800;line-height:1.3;color:var(--csro-bone);
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-why__b{
  margin:0;
  font-size:16px;line-height:1.6;color:#c9cddb;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-link--onink{
  color:#ffffff;font-weight:700;text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.5);text-underline-offset:3px;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-band__ctarow{
  margin:36px 0 0;
  text-align:center; /* fix#2 */
}

/* ---------- client quote ---------- */
#page-case-study-rollking-online-dice-game-platform-case-study .csro-quote{
  /* centered as a block (fix#1) so the accent bar sits against the now-
     narrower, centered text measure instead of floating at the far-left
     edge of the full 1160px wrap with the quote text floating centered
     far away from it */
  margin:0 auto;max-width:760px;padding:8px 0 8px 32px;
  border-left:4px solid var(--csro-cobalt);
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-quote__text{
  margin:0;
  font-size:24px;line-height:1.6;font-weight:600;font-style:italic;
  color:var(--csro-ink);
}

/* ---------- area we serve ---------- */
#page-case-study-rollking-online-dice-game-platform-case-study .csro-regions{
  margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-region{
  padding:26px 22px;
  background:var(--csro-card);
  border:1px solid var(--csro-hair-strong);border-radius:4px;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-region__t{
  margin:0 0 14px;
  font-size:16px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--csro-cobalt-deep);
  padding-bottom:12px;border-bottom:1px solid var(--csro-hair);
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-region__tel{
  margin:0 0 10px;font-size:17px;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-region__tel a{
  display:inline-block;
  font-weight:800;color:var(--csro-cobalt);
  text-decoration:underline;text-decoration-color:rgba(30,71,200,.35);text-underline-offset:3px;
  /* tap target: 20px line + 12px padding clears the 44px minimum */
  padding:12px 0;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-region__addr{
  margin:0;font-size:16px;line-height:1.6;color:var(--csro-ink-soft);
}

/* ---------- enquiry modal ---------- */
#page-case-study-rollking-online-dice-game-platform-case-study .csro-modal{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items: flex-start;justify-content:center;
  padding:100px 24px 24px 24px; overflow-y: auto;
  background:rgba(16,27,60,.66);
  opacity:0;visibility:hidden;
  transition:opacity .18s ease,visibility .18s ease;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-modal.is-open{
  opacity:1;visibility:visible;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-modal__box{
  position:relative;
  width:min(520px,100%);
  max-height:calc(100vh - 48px);
  background:var(--csro-card);
  border:1px solid var(--csro-hair-strong);border-top:4px solid var(--csro-cobalt);
  border-radius:6px;
  padding:14px;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-modal__x{
  position:absolute;top:10px;right:10px;z-index:2;
  width:44px;height:44px;
  border:2px solid var(--csro-ink);border-radius:50%;
  background:var(--csro-porcelain);cursor:pointer;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-modal__x::before,
#page-case-study-rollking-online-dice-game-platform-case-study .csro-modal__x::after{
  content:"";position:absolute;top:50%;left:50%;
  width:18px;height:2px;background:var(--csro-ink);border-radius:1px;
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-modal__x::before{
  transform:translate(-50%,-50%) rotate(45deg);
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-modal__x::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-modal__x:hover{
  background:var(--csro-tint);
}
#page-case-study-rollking-online-dice-game-platform-case-study .csro-modal__frame{
  display:block;width:100%;height:520px;
  border:0;background:transparent;
}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  #page-case-study-rollking-online-dice-game-platform-case-study .csro-stats,
  #page-case-study-rollking-online-dice-game-platform-case-study .csro-regions{
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width:900px){
  /* .csro-chals is a bordered ledger, not a grid, since the Challenges
     redesign — nothing to reset here for it any more */
  #page-case-study-rollking-online-dice-game-platform-case-study .csro-toc__list{
    grid-template-columns:1fr;
  }
  /* the Why strip drops to a 2x2 divided grid: a 4-across flex row gets too
     cramped for full paragraphs at tablet width */
  #page-case-study-rollking-online-dice-game-platform-case-study .csro-whys{
    display:grid;grid-template-columns:1fr 1fr;
  }
  #page-case-study-rollking-online-dice-game-platform-case-study .csro-why{
    padding:24px 28px;
    border-left:1px solid rgba(246,245,241,.22);
    border-top:1px solid rgba(246,245,241,.22);
  }
  #page-case-study-rollking-online-dice-game-platform-case-study .csro-why:nth-child(odd){
    border-left:0;
  }
  #page-case-study-rollking-online-dice-game-platform-case-study .csro-why:nth-child(-n+2){
    border-top:0;
  }
  #page-case-study-rollking-online-dice-game-platform-case-study .csro-section{
    padding:56px 0;
  }
  #page-case-study-rollking-online-dice-game-platform-case-study .csro-h2{
    font-size:28px;
  }
}
@media (max-width:760px){
  /* mapping table reflows to stacked, labelled rows */
  #page-case-study-rollking-online-dice-game-platform-case-study .csro-map thead{
    display:none;
  }
  #page-case-study-rollking-online-dice-game-platform-case-study .csro-map tr{
    display:block;padding:16px 18px;
  }
  #page-case-study-rollking-online-dice-game-platform-case-study .csro-map tr + tr{
    border-top:2px solid var(--csro-hair);
  }
  #page-case-study-rollking-online-dice-game-platform-case-study .csro-map td{
    display:block;border:0;padding:0 0 14px;
    background:transparent !important;
  }
  #page-case-study-rollking-online-dice-game-platform-case-study .csro-map td::before{
    content:attr(data-label);
    display:block;margin-bottom:4px;
    font-size:16px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    color:var(--csro-cobalt-deep);
  }
  #page-case-study-rollking-online-dice-game-platform-case-study .csro-map td[data-label="Result"]{
    padding-bottom:0;
  }
  /* fix#4 specificity trap: .csro-map td + td (2 type selectors) is MORE
     specific than the plain .csro-map td rule above, so its border-left
     survives that rule's border:0 reset regardless of source order — this
     override restates at the same td+td specificity, later in the cascade,
     to actually kill the divider on the stacked mobile rows (same pattern
     the sportivaplay reference page uses for its own mobile table reset). */
  #page-case-study-rollking-online-dice-game-platform-case-study .csro-map td + td{
    border-left:0;
  }
  /* Why strip goes fully single-column below 560px (own breakpoint further
     down); Challenges rows stack pip-above-copy at that same 560px tier
     rather than here, since the flex row still has comfortable room for
     both columns down to phone width. */
  #page-case-study-rollking-online-dice-game-platform-case-study .csro-quote__text{
    font-size:20px;
  }
}
@media (max-width:560px){
  #page-case-study-rollking-online-dice-game-platform-case-study .csro-stats,
  #page-case-study-rollking-online-dice-game-platform-case-study .csro-regions{
    grid-template-columns:1fr;
  }
  #page-case-study-rollking-online-dice-game-platform-case-study .csro-hero{
    padding:72px 0 64px;
  }
  #page-case-study-rollking-online-dice-game-platform-case-study .csro-stat__n{
    font-size:38px;
  }
  #page-case-study-rollking-online-dice-game-platform-case-study .csro-modal__frame{
    height:560px;
  }
  /* Challenges ledger: stack pip above copy so body text keeps the full
     row width instead of squeezing next to a 41px icon on phone screens */
  #page-case-study-rollking-online-dice-game-platform-case-study .csro-chal{
    flex-direction:column;gap:12px;padding:22px 22px;
  }
  /* Why strip: single column, hairlines become horizontal only */
  #page-case-study-rollking-online-dice-game-platform-case-study .csro-whys{
    display:block;
  }
  #page-case-study-rollking-online-dice-game-platform-case-study .csro-why{
    padding:24px 0;
    border-left:0;border-top:1px solid rgba(246,245,241,.22);
  }
  #page-case-study-rollking-online-dice-game-platform-case-study .csro-why:first-child{
    border-top:0;padding-top:0;
  }
}