/* /case-study/sweetplay-studios-puzzle-game-case-study — AISHTMLNEWDESIGN-542
   Page-owned styles. EVERY selector is scoped to #page-case-study-sweetplay-studios-puzzle-game-case-study
   or a csss- 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 — "THE MATCH GRID".
   The record's own subject is a grid-based match-3 puzzle game: crashes at
   high levels, visual polish versus "games like Candy Crush", secure in-app
   purchases, progression that keeps players returning. So the page is set
   as the level board itself -- deep plum ground, warm confection paper for
   the written record, one sherbet-pink accent, level indexing (01-06) and
   hairline grid rules. No candy illustration, no tile animation, no motion
   of any kind.

   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
     · .csss-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-sweetplay-studios-puzzle-game-case-study{
  --csss-ink:#241226;
  --csss-ink-2:#2f1832;
  --csss-steel:#a996a8;
  --csss-steel-dim:#786175;
  --csss-paper:#f8f2f0;
  --csss-paper-2:#f1e5e2;
  --csss-rule:#e6d3ce;
  --csss-rule-dark:#3a2440;
  --csss-pink:#b23d6b;         /* paper-ground accent — sherbet pink */
  --csss-pink-lit:#e888ac;     /* on-dark readout — --csss-pink is unreadable on ink */
  --csss-text:#241a26;
  --csss-text-soft:#5a4a58;
  --csss-wrap:1180px;
  font-family:"Inter",system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--csss-text);
  background:var(--csss-paper);
}

/* ── shared shells ──────────────────────────────────────────────────── */
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-wrap{max-width:var(--csss-wrap);margin:0 auto;padding:0 24px;}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-wrap--read{max-width:820px;}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-sec{padding:76px 0;}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-sec--paper{background:var(--csss-paper);}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-sec--paper2{background:var(--csss-paper-2);}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-sec--ink{background:var(--csss-ink);}

#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-h2{
  font-size:clamp(32px,4vw,48px);line-height:1.12;font-weight:800;
  letter-spacing:-.02em;margin:0 0 22px;color:var(--csss-ink);
}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-h2--light{color:var(--csss-paper);}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-h2--centre{text-align:center;}

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

#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-prose,
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-body{
  font-size:18px;line-height:1.72;color:var(--csss-text-soft);margin:0;
}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-link{
  color:var(--csss-pink);font-weight:600;box-shadow:inset 0 -1px 0 0 currentColor;
}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-link:hover{box-shadow:inset 0 -2px 0 0 currentColor;}

/* ── buttons — every section CTA is centred, matching the hero's ─────── */
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-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-sweetplay-studios-puzzle-game-case-study .csss-btn--pink{background:var(--csss-pink);color:#fff;}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-btn--pink:hover{background:#8f2f53;}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-btn--ink{background:transparent;color:var(--csss-ink);border-color:var(--csss-ink);}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-btn--ink:hover{background:var(--csss-ink);color:var(--csss-paper);}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-btn:focus-visible{outline:3px solid var(--csss-pink);outline-offset:3px;}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-secact{margin-top:38px;text-align:center;}

/* ── hero — rule 24: image-free, full-bleed, static gradient ─────────── */
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-hero{
  background:linear-gradient(170deg,#2f1832 0%,#241226 58%,#1c0e1e 100%);
  padding:clamp(72px,9vw,120px) 24px clamp(64px,8vw,104px);
  border-bottom:1px solid var(--csss-rule-dark);
}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-hero__inner{max-width:900px;margin:0 auto;text-align:center;}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-hero__eyebrow{
  font-size:16px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--csss-steel);margin:0 0 20px;
}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-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-sweetplay-studios-puzzle-game-case-study .csss-hero__lede{
  font-size:19px;line-height:1.7;color:#c1cad1;margin:0 auto;max-width:760px;
}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-hero__act{margin-top:34px;}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-hero__stack{
  margin-top:46px;padding-top:30px;border-top:1px solid var(--csss-rule-dark);
}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-hero__stackh{
  font-size:16px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--csss-steel);margin:0 0 16px;
}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-stack{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-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-sweetplay-studios-puzzle-game-case-study .csss-crumb{background:var(--csss-paper);border-bottom:1px solid var(--csss-rule);}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-crumb__bar{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  padding:16px 0;font-size:16px;color:var(--csss-text-soft);
}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-crumb__bar a{color:var(--csss-text-soft);font-weight:500;}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-crumb__bar a:hover{color:var(--csss-pink);}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-crumb__back{display:inline-flex;align-items:center;}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-crumb__back img{display:block;width:14px;height:14px;}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-crumb__sep{color:var(--csss-steel);}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-crumb__here{color:var(--csss-ink);font-weight:600;}

/* ── section index — the fixture list ───────────────────────────────── */
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-index{
  background:var(--csss-paper-2);border-bottom:1px solid var(--csss-rule);padding:44px 0;
}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-index__h{
  font-size:18px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--csss-steel-dim);margin:0 0 20px;
}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-index__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--csss-rule);border:1px solid var(--csss-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-sweetplay-studios-puzzle-game-case-study .csss-index__item{
  display:flex;align-items:flex-start;gap:12px;height:100%;
  box-sizing:border-box;
  background:var(--csss-paper);padding:18px 18px;
  transition:background-color .18s ease;
}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-index__item:hover{background:#fff;}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-index__item:focus-visible{outline:3px solid var(--csss-pink);outline-offset:-3px;}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-index__n{
  font-size:16px;font-weight:700;color:var(--csss-pink);font-variant-numeric:tabular-nums;padding-top:2px;
}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-index__t{font-size:17px;font-weight:600;line-height:1.45;color:var(--csss-ink);}

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

/* ── solution mapping table ─────────────────────────────────────────── */
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-map__scroll{
  margin-top:30px;overflow-x:auto;border:1px solid var(--csss-rule);background:#fff;
}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-table{width:100%;border-collapse:collapse;min-width:820px;}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-table th{
  text-align:left;padding:14px 20px;background:var(--csss-ink);color:#fff;
  font-size:16px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:2px solid var(--csss-pink);
}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-table td{
  padding:18px 20px;vertical-align:top;
  font-size:17px;line-height:1.62;color:var(--csss-text-soft);
  border:1px solid var(--csss-rule);width:33.33%;
}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-table tbody tr:nth-child(even) td{background:var(--csss-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-sweetplay-studios-puzzle-game-case-study .csss-table th:not(:first-child),
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-table td:not(:first-child){
  border-left:4px solid var(--csss-pink);
}

/* ── 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-sweetplay-studios-puzzle-game-case-study .csss-stats{
  list-style:none;margin:34px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-stats__item{
  background:var(--csss-ink-2);border:1px solid var(--csss-rule-dark);
  border-radius:3px;padding:30px 24px;
}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-stats__p{margin:0;font-size:17px;line-height:1.6;color:#c1cad1;}
/* The lead-ins wrap to different lengths across the four cards, which left
   the figures at different heights. Reserving two lines lands every figure
   on the same baseline across the row -- without touching a word. This
   record's ROI sentences keep the figure in natural mid-sentence position
   ("Returning users increased by 68% within..."), unlike some sibling
   pages whose records lead with the figure, so lead+fig+tail is used here
   rather than the figure-first fig+tail pattern. */
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-stats__lead{display:block;min-height:3.2em;}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-stats__tail{display:block;}
#page-case-study-sweetplay-studios-puzzle-game-case-study .csss-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(--csss-pink-lit);font-variant-numeric:tabular-nums;
}

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

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

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

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

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

  /* the mapping table becomes labelled records; the desktop rules would be noise */
  #page-case-study-sweetplay-studios-puzzle-game-case-study .csss-map__scroll{overflow-x:visible;background:transparent;border:0;}
  #page-case-study-sweetplay-studios-puzzle-game-case-study .csss-table{min-width:0;}
  #page-case-study-sweetplay-studios-puzzle-game-case-study .csss-table thead{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
  }
  #page-case-study-sweetplay-studios-puzzle-game-case-study .csss-table tbody tr{
    display:block;margin-bottom:16px;background:#fff;border:1px solid var(--csss-rule);
  }
  #page-case-study-sweetplay-studios-puzzle-game-case-study .csss-table tbody tr:nth-child(even) td{background:transparent;}
  #page-case-study-sweetplay-studios-puzzle-game-case-study .csss-table td{display:block;width:auto;border:0;padding:14px 18px;}
  #page-case-study-sweetplay-studios-puzzle-game-case-study .csss-table td+td{border-top:1px solid var(--csss-rule);}
  #page-case-study-sweetplay-studios-puzzle-game-case-study .csss-table th:not(:first-child),
  #page-case-study-sweetplay-studios-puzzle-game-case-study .csss-table td:not(:first-child){border-left:0;}
  #page-case-study-sweetplay-studios-puzzle-game-case-study .csss-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(--csss-pink);
  }
}