/* /case-study/lootbox-case-opening-platform-case-study — AISHTMLNEWDESIGN-531
   Page-owned styles. EVERY selector is scoped to #page-case-study-lootbox-case-opening-platform-case-study or a
   csld- 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 — "OPEN PROOF"
   The record's whole case is that opening a case is a computation you can
   verify, not a spin you have to trust: provably fair algorithms, secure
   randomization, anti-fraud. So the page treats VERIFICATION as the visual
   system rather than the crate-as-object -- that territory already belongs
   to /case-study/kingston-games-case-open-platform-case-study ("HASP & HINGE",
   a fastened-crate/hasp/violet page for the same case-opening genre). This
   page deliberately does not draw a box, a lid or a hinge anywhere.
   Instead: a void-black ground with a single sapphire accent (unclaimed by
   any sibling page at the time of writing), and every NUMBER on the page --
   challenge index, why index, stat percentages, TOC index -- set in a
   monospace face against Inter prose, reading like verification-log output.
   No keyframes; motion is hover/focus/active only (rule 26).

   CTA COLOUR RULE, learned on /case-study/rummy-game-app: a button must clear
   3:1 against the surface BEHIND it (WCAG 1.4.11), its label 4.5:1 (1.4.3),
   and no button reuses a colour from the band it sits on. Re-verified live
   in the browser below, not assumed from the tokens alone. */

#page-case-study-lootbox-case-opening-platform-case-study {
  --csld-void: #10141a;        /* hero + results/challenges plate ground */
  --csld-void-2: #171d26;      /* gradient stop */
  --csld-void-3: #1d2531;      /* raised element on the void */
  --csld-azure: #2454d1;       /* the single accent -- paper-ground text/border */
  --csld-azure-dp: #1a3ea3;    /* pressed/hover state of the accent */
  --csld-sky: #7fabff;         /* on-dark readout -- --csld-azure is too dark on void */
  --csld-paper: #f6f6f4;       /* page ground, paper sections */
  --csld-bone: #ecebe6;        /* card-on-paper tone */
  --csld-ink: #171a1f;         /* text on light */
  --csld-muted: #565f6b;       /* secondary text on light */
  --csld-onvoid: #cdd3db;      /* body text on the void */
  --csld-line: #ddd9d0;        /* rules on light */
  --csld-line-void: rgba(205, 211, 219, 0.18); /* rules on the void */
  --csld-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--csld-ink);
  background: var(--csld-paper);
  -webkit-font-smoothing: antialiased;
}

#page-case-study-lootbox-case-opening-platform-case-study *,
#page-case-study-lootbox-case-opening-platform-case-study *::before,
#page-case-study-lootbox-case-opening-platform-case-study *::after { box-sizing: border-box; }

#page-case-study-lootbox-case-opening-platform-case-study p { margin: 0 0 18px; }
#page-case-study-lootbox-case-opening-platform-case-study p:last-child { margin-bottom: 0; }

#page-case-study-lootbox-case-opening-platform-case-study .csld-wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
#page-case-study-lootbox-case-opening-platform-case-study .csld-wrap--read { max-width: 760px; }

/* ---------- hero (rule 24: image-free, static gradient, one CTA) ---------- */
#page-case-study-lootbox-case-opening-platform-case-study .csld-hero {
  background: linear-gradient(160deg, #0b0d11 0%, var(--csld-void) 55%, var(--csld-void-2) 100%);
  padding: 88px 28px 64px;
}
#page-case-study-lootbox-case-opening-platform-case-study .csld-hero__inner { max-width: 900px; margin: 0 auto; text-align: center; }
#page-case-study-lootbox-case-opening-platform-case-study .csld-eyebrow {
  margin: 0 0 18px; font-size: 16px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--csld-sky);
}
#page-case-study-lootbox-case-opening-platform-case-study .csld-hero__title {
  margin: 0 0 20px; font-size: clamp(36px, 4.4vw, 54px); line-height: 1.1;
  font-weight: 800; letter-spacing: -0.02em; color: #fff;
}
#page-case-study-lootbox-case-opening-platform-case-study .csld-hero__lede { margin: 0 auto 30px; color: var(--csld-onvoid); max-width: 76ch; }
#page-case-study-lootbox-case-opening-platform-case-study .csld-hero__techlabel { margin: 0 0 14px; font-size: 18px; font-weight: 800; color: #fff; }
#page-case-study-lootbox-case-opening-platform-case-study .csld-tech {
  list-style: none; margin: 0 0 34px; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
#page-case-study-lootbox-case-opening-platform-case-study .csld-tech li {
  border: 2px solid var(--csld-line-void); color: var(--csld-onvoid);
  padding: 9px 16px; font-weight: 600; font-size: 16px; border-radius: 100px;
}

/* ---------- breadcrumb ---------- */
#page-case-study-lootbox-case-opening-platform-case-study .csld-breadcrumb {
  background: var(--csld-void); padding: 16px 28px; font-size: 15px; color: var(--csld-onvoid);
}
#page-case-study-lootbox-case-opening-platform-case-study .csld-breadcrumb .csld-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 1120px; margin: 0 auto; padding: 0; }
#page-case-study-lootbox-case-opening-platform-case-study .csld-breadcrumb__back { display: inline-flex; filter: invert(1) brightness(1.6); }
#page-case-study-lootbox-case-opening-platform-case-study .csld-breadcrumb__leg { color: var(--csld-sky); text-decoration: none; }
#page-case-study-lootbox-case-opening-platform-case-study .csld-breadcrumb__leg:hover { text-decoration: underline; }
#page-case-study-lootbox-case-opening-platform-case-study .csld-breadcrumb__current { color: #fff; font-weight: 600; }

/* ---------- Case Study contents (TOC) — a ledger index ---------- */
#page-case-study-lootbox-case-opening-platform-case-study .csld-toc { background: var(--csld-paper); padding: 44px 0; border-bottom: 1px solid var(--csld-line); }
#page-case-study-lootbox-case-opening-platform-case-study .csld-toc__title {
  margin: 0 0 20px; font-size: 16px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--csld-azure);
}
#page-case-study-lootbox-case-opening-platform-case-study .csld-toc__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 24px;
  border-top: 1px solid var(--csld-line);
}
#page-case-study-lootbox-case-opening-platform-case-study .csld-toc__item {
  display: flex; align-items: baseline; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--csld-line);
  font-weight: 600; color: var(--csld-ink); text-decoration: none;
  transition: color 140ms ease;
}
#page-case-study-lootbox-case-opening-platform-case-study .csld-toc__n {
  font-family: var(--csld-mono); font-size: 14px; font-weight: 600;
  color: var(--csld-azure); letter-spacing: 0.02em;
}
#page-case-study-lootbox-case-opening-platform-case-study .csld-toc__item:hover,
#page-case-study-lootbox-case-opening-platform-case-study .csld-toc__item:focus-visible { color: var(--csld-azure-dp); }
#page-case-study-lootbox-case-opening-platform-case-study .csld-toc__item:focus-visible { outline: 3px solid var(--csld-azure); outline-offset: 2px; }

/* ---------- section shell ---------- */
#page-case-study-lootbox-case-opening-platform-case-study .csld-section { padding: 88px 0; }
#page-case-study-lootbox-case-opening-platform-case-study .csld-section--paper { background: var(--csld-paper); }
#page-case-study-lootbox-case-opening-platform-case-study .csld-section--void { background: var(--csld-void); }
#page-case-study-lootbox-case-opening-platform-case-study .csld-h2 {
  margin: 0 0 28px; font-size: clamp(28px, 3vw, 38px); font-weight: 800;
  letter-spacing: -0.01em; color: var(--csld-ink); text-align: center;
}
#page-case-study-lootbox-case-opening-platform-case-study .csld-h2::after {
  content: ""; display: block; width: 56px; height: 4px; margin: 16px auto 0; background: var(--csld-azure);
}
#page-case-study-lootbox-case-opening-platform-case-study .csld-h2--void { color: #fff; }
#page-case-study-lootbox-case-opening-platform-case-study .csld-h2--void::after { background: var(--csld-sky); }
#page-case-study-lootbox-case-opening-platform-case-study .csld-lede { margin: 0 auto; max-width: 80ch; color: var(--csld-muted); text-align: center; }
#page-case-study-lootbox-case-opening-platform-case-study .csld-section--void .csld-lede { color: var(--csld-onvoid); }
#page-case-study-lootbox-case-opening-platform-case-study .csld-sec__ctarow { margin: 34px 0 0; text-align: center; }

/* ---------- buttons ---------- */
#page-case-study-lootbox-case-opening-platform-case-study .csld-btn {
  display: inline-block; border: 0; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 17px; font-weight: 700; padding: 15px 26px;
  transition: background-color 140ms ease, color 140ms ease, transform 140ms ease, border-color 140ms ease;
}
#page-case-study-lootbox-case-opening-platform-case-study .csld-btn--primary { background: var(--csld-azure); color: #fff; }
#page-case-study-lootbox-case-opening-platform-case-study .csld-btn--primary:hover { background: var(--csld-azure-dp); transform: translateY(-1px); }
#page-case-study-lootbox-case-opening-platform-case-study .csld-btn--ghost {
  background: transparent; color: var(--csld-azure); border: 2px solid var(--csld-azure); padding: 13px 24px;
}
#page-case-study-lootbox-case-opening-platform-case-study .csld-btn--ghost:hover { background: var(--csld-azure); color: #fff; transform: translateY(-1px); }
#page-case-study-lootbox-case-opening-platform-case-study .csld-btn:focus-visible { outline: 3px solid var(--csld-sky); outline-offset: 3px; }

/* ---------- Challenges: a numbered ledger on the void ---------- */
#page-case-study-lootbox-case-opening-platform-case-study .csld-chal-list { list-style: none; margin: 0; padding: 0; max-width: 880px; margin: 0 auto; }
#page-case-study-lootbox-case-opening-platform-case-study .csld-chal {
  display: grid; grid-template-columns: 56px 1fr; gap: 20px;
  padding: 26px 0; border-top: 1px solid var(--csld-line-void);
}
#page-case-study-lootbox-case-opening-platform-case-study .csld-chal-list .csld-chal:last-child { border-bottom: 1px solid var(--csld-line-void); }
#page-case-study-lootbox-case-opening-platform-case-study .csld-chal__n {
  font-family: var(--csld-mono); font-size: 22px; font-weight: 700; color: var(--csld-sky);
}
#page-case-study-lootbox-case-opening-platform-case-study .csld-chal__t { margin: 0 0 8px; font-size: 20px; font-weight: 800; color: #fff; }
#page-case-study-lootbox-case-opening-platform-case-study .csld-chal__b { margin: 0; color: var(--csld-onvoid); }
#page-case-study-lootbox-case-opening-platform-case-study .csld-chal__b a { color: var(--csld-sky); text-decoration: underline; }

/* ---------- Solution table ---------- */
#page-case-study-lootbox-case-opening-platform-case-study .csld-tablewrap { overflow-x: auto; border: 1px solid var(--csld-line); border-radius: 12px; }
#page-case-study-lootbox-case-opening-platform-case-study .csld-map { width: 100%; border-collapse: collapse; background: #fff; }
#page-case-study-lootbox-case-opening-platform-case-study .csld-map th {
  text-align: left; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--csld-azure); background: var(--csld-bone); padding: 16px 20px; border-bottom: 1px solid var(--csld-line);
}
#page-case-study-lootbox-case-opening-platform-case-study .csld-map td { padding: 18px 20px; vertical-align: top; border-bottom: 1px solid var(--csld-line); color: var(--csld-ink); }
#page-case-study-lootbox-case-opening-platform-case-study .csld-map tbody tr:last-child td { border-bottom: 0; }
#page-case-study-lootbox-case-opening-platform-case-study .csld-map td::before { content: none; }
/* column dividers between Challenge/Solution/Result, modelled on
   /case-study/sportivaplay-fantasy-sports-app-case-study .spfs-map */
#page-case-study-lootbox-case-opening-platform-case-study .csld-map th + th,
#page-case-study-lootbox-case-opening-platform-case-study .csld-map td + td {
  border-left: 4px solid var(--csld-azure);
}

/* ---------- Measurable Results: stat plates on the void ---------- */
#page-case-study-lootbox-case-opening-platform-case-study .csld-stats {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
#page-case-study-lootbox-case-opening-platform-case-study .csld-stat {
  background: var(--csld-void-3); border-top: 3px solid var(--csld-sky);
  padding: 26px 20px; text-align: center; border-radius: 4px;
}
#page-case-study-lootbox-case-opening-platform-case-study .csld-stat__n {
  display: block; font-family: var(--csld-mono); font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 700; color: var(--csld-sky); margin-bottom: 10px;
}
#page-case-study-lootbox-case-opening-platform-case-study .csld-stat__b { display: block; color: var(--csld-onvoid); font-size: 15px; }

/* ---------- Why AIS Technolabs: ruled columns ---------- */
#page-case-study-lootbox-case-opening-platform-case-study .csld-whys {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  max-width: 1000px; margin: 0 auto;
}
#page-case-study-lootbox-case-opening-platform-case-study .csld-why { border-top: 3px solid var(--csld-azure); padding-top: 18px; text-align: left; }
#page-case-study-lootbox-case-opening-platform-case-study .csld-why__t { margin: 0 0 8px; font-size: 19px; font-weight: 800; color: var(--csld-ink); }
#page-case-study-lootbox-case-opening-platform-case-study .csld-why__b { margin: 0; color: var(--csld-muted); font-size: 15px; }

/* ---------- Client Quote ---------- */
#page-case-study-lootbox-case-opening-platform-case-study .csld-quote {
  margin: 0; padding: 36px 40px; border-left: 4px solid var(--csld-sky);
  background: var(--csld-void-3); border-radius: 4px;
}
#page-case-study-lootbox-case-opening-platform-case-study .csld-quote p {
  margin: 0; font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; line-height: 1.5; color: #fff;
}

/* ---------- Area We Serve ---------- */
#page-case-study-lootbox-case-opening-platform-case-study .csld-regions {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
#page-case-study-lootbox-case-opening-platform-case-study .csld-region {
  background: #fff; border: 1px solid var(--csld-line); border-radius: 12px; padding: 24px 22px;
}
#page-case-study-lootbox-case-opening-platform-case-study .csld-region__t { margin: 0 0 10px; font-size: 17px; font-weight: 800; color: var(--csld-ink); }
#page-case-study-lootbox-case-opening-platform-case-study .csld-region__phone {
  display: inline-block; margin-bottom: 10px; font-family: var(--csld-mono); font-size: 15px;
  font-weight: 700; color: var(--csld-azure); text-decoration: none;
}
#page-case-study-lootbox-case-opening-platform-case-study .csld-region__phone:hover { text-decoration: underline; }
#page-case-study-lootbox-case-opening-platform-case-study .csld-region__addr { margin: 0; font-size: 14px; color: var(--csld-muted); line-height: 1.55; }

/* ---------- CTA modal ---------- */
#page-case-study-lootbox-case-opening-platform-case-study .csld-modal { display: none; position: fixed; inset: 0; z-index: 1000; padding: 20px; overflow-y: auto; background: rgba(16, 20, 26, 0.78); }
#page-case-study-lootbox-case-opening-platform-case-study .csld-modal.is-open { display: flex; align-items: flex-start; justify-content: center; }
#page-case-study-lootbox-case-opening-platform-case-study .csld-modal__box { position: relative; width: 100%; max-width: 620px; margin: auto; border-radius: 16px; background: #fff; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7); overflow: hidden; }
#page-case-study-lootbox-case-opening-platform-case-study .csld-modal__x { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--csld-line); border-radius: 50%; background: #fff; color: var(--csld-ink); cursor: pointer; transition: background-color 0.16s, color 0.16s; }
#page-case-study-lootbox-case-opening-platform-case-study .csld-modal__x::before,
#page-case-study-lootbox-case-opening-platform-case-study .csld-modal__x::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; background: currentColor; }
#page-case-study-lootbox-case-opening-platform-case-study .csld-modal__x::before { transform: translate(-50%, -50%) rotate(45deg); }
#page-case-study-lootbox-case-opening-platform-case-study .csld-modal__x::after { transform: translate(-50%, -50%) rotate(-45deg); }
#page-case-study-lootbox-case-opening-platform-case-study .csld-modal__x:hover { background: var(--csld-void); color: #fff; }
#page-case-study-lootbox-case-opening-platform-case-study .csld-modal__x:focus-visible { outline: 3px solid var(--csld-azure); outline-offset: 2px; }
#page-case-study-lootbox-case-opening-platform-case-study .csld-modal__frame { display: block; width: 100%; min-height: 860px; border: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  #page-case-study-lootbox-case-opening-platform-case-study .csld-stats { grid-template-columns: repeat(2, 1fr); }
  #page-case-study-lootbox-case-opening-platform-case-study .csld-whys { grid-template-columns: repeat(2, 1fr); }
  #page-case-study-lootbox-case-opening-platform-case-study .csld-regions { grid-template-columns: repeat(2, 1fr); }
  #page-case-study-lootbox-case-opening-platform-case-study .csld-toc__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  #page-case-study-lootbox-case-opening-platform-case-study { font-size: 16px; }
  #page-case-study-lootbox-case-opening-platform-case-study .csld-wrap { padding: 0 18px; }
  #page-case-study-lootbox-case-opening-platform-case-study .csld-section { padding: 56px 0; }
  #page-case-study-lootbox-case-opening-platform-case-study .csld-hero { padding: 60px 18px 44px; }
  #page-case-study-lootbox-case-opening-platform-case-study .csld-breadcrumb { padding: 12px 18px; }
  #page-case-study-lootbox-case-opening-platform-case-study .csld-toc__list { grid-template-columns: 1fr; }
  #page-case-study-lootbox-case-opening-platform-case-study .csld-chal { grid-template-columns: 1fr; gap: 10px; }
  #page-case-study-lootbox-case-opening-platform-case-study .csld-stats { grid-template-columns: 1fr; }
  #page-case-study-lootbox-case-opening-platform-case-study .csld-whys { grid-template-columns: 1fr; }
  #page-case-study-lootbox-case-opening-platform-case-study .csld-regions { grid-template-columns: 1fr; }
  #page-case-study-lootbox-case-opening-platform-case-study .csld-quote { padding: 24px 22px; }
  #page-case-study-lootbox-case-opening-platform-case-study .csld-btn { width: 100%; text-align: center; padding: 16px 22px; }

  /* the mapping table reflows to labelled cards -- no sideways scrolling */
  #page-case-study-lootbox-case-opening-platform-case-study .csld-tablewrap { overflow-x: visible; border: 0; border-radius: 0; }
  #page-case-study-lootbox-case-opening-platform-case-study .csld-map thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  #page-case-study-lootbox-case-opening-platform-case-study .csld-map, #page-case-study-lootbox-case-opening-platform-case-study .csld-map tbody, #page-case-study-lootbox-case-opening-platform-case-study .csld-map tr, #page-case-study-lootbox-case-opening-platform-case-study .csld-map td { display: block; box-sizing: border-box; max-width: 100%; }
  #page-case-study-lootbox-case-opening-platform-case-study .csld-map tr { border: 1px solid var(--csld-line); border-top: 4px solid var(--csld-azure); margin-bottom: 16px; background: #fff; }
  #page-case-study-lootbox-case-opening-platform-case-study .csld-map td { border-bottom: 0; padding: 14px 18px; }
  /* stacked cards have no columns, so no vertical divider. MUST reuse the
     base rule's exact "td + td" selector, not a bare "td" reset: the base
     rule's specificity beats a plain ".csld-map td { border-left:0 }" here
     regardless of source order -- same trap the sportivaplay reference's
     own stylesheet documents for this identical pattern. */
  #page-case-study-lootbox-case-opening-platform-case-study .csld-map td + td { border-left: 0; }
  #page-case-study-lootbox-case-opening-platform-case-study .csld-map td::before {
    content: attr(data-label); display: block; font-size: 13px; font-weight: 800; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--csld-azure); margin-bottom: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #page-case-study-lootbox-case-opening-platform-case-study .csld-btn,
  #page-case-study-lootbox-case-opening-platform-case-study .csld-btn:hover { transition: none; transform: none; }
  #page-case-study-lootbox-case-opening-platform-case-study .csld-modal__x,
  #page-case-study-lootbox-case-opening-platform-case-study .csld-modal__x:hover { transition: none; }
  #page-case-study-lootbox-case-opening-platform-case-study .csld-toc__item { transition: none; }
}