/* ══════════════════════════════════════════════════════════════════════════
   /card-game-development — page-isolated stylesheet
   AISHTMLNEWDESIGN-327

   Visual direction: "CUT DECK".

   This page does not sell a night at a table — it sells the PRESS that makes
   the deck: templates, white-label builds, and the option to rent, buy or
   rent-to-buy. So the register is a card-stock press room, built from two
   materials and one signal:

     · STOCK  — warm card-stock linen (#f5f1ea) and true paper (#ffffff), the
                page's DOMINANT surface. Every other converted page in this
                repo opens on a near-black ground; this one deliberately does
                not, so it is distinguishable from /blackjack-game-development
                (ink + bone + crimson) at a glance rather than on inspection.
     · SLATE  — a cool press-room slate (#151a24) used for exactly two bands,
                as punctuation, never as the page's ground.
     · VIOLET — one signal (#5b2fd6). It is the only accent that carries an
                action. No second action hue, no gradient family, no glow.

   The four-colour poker deck (spade black / heart red / diamond blue / club
   green) is a real card-software convention, and it is used here strictly as
   an INDEX system: four suit glyphs mark the four architecture pillars, and
   rank glyphs mark the five capability cards. It never becomes the palette —
   the suit colours appear only at 22px and below.

   Composition motif: the CARD CORNER INDEX (a rank over a pip, set in the
   top-left of a plate) and the DIE-CUT rule (a dashed cut line on stock).
   Sections are composed as a fanned hand, a suit-indexed pillar column, an
   asymmetric image spread, a two-column prose set and a numbered accordion,
   so no two sections repeat a layout and there is no three-up card grid.

   Every rule is scoped to #page-card-game-development, so this file can never
   touch the shared header/footer, which is owned by /assets/css/ais-*.css +
   /assets/js/ais-header.js / ais-footer.js. The UA body-margin reset is NOT
   restated here — /assets/css/ais-layout.css owns it (skill section 33).

   Design contract (docs/skills/frontend-design/SKILL.md):
     · rule  1 — Inter is the primary family
     · rule  2 — nothing below 16px, anywhere, including labels and captions
     · rule 23 — no slate-gray body copy on light surfaces (#232a36 floor)
     · rule 24 — image-free full-bleed hero, static gradient, centred column
     · rule 25 — one CTA per section, every label unique page-wide
     · rule 26 — no running animation: zero @keyframes, zero 'infinite',
                 transitions only, each a finite response to hover/focus/click
   ══════════════════════════════════════════════════════════════════════════ */

#page-card-game-development{
  /* ── palette ─────────────────────────────────────────────────────────── */
  --linen:#f5f1ea;          /* card stock — the page's ground        */
  --linen-2:#ece6db;        /* deeper stock                          */
  --paper:#ffffff;
  --line:#ded6c8;           /* hairline on stock                     */
  --line-strong:#c6bba7;
  --slate:#151a24;          /* press-room slate — punctuation only   */
  --slate-2:#1e2532;
  --slate-3:#39435a;
  --body:#232a36;           /* AA on paper and linen                 */
  --body-dark:#dfe4ee;      /* AA on slate                           */
  --strong:#111620;
  --violet:#5b2fd6;         /* the one signal                        */
  --violet-deep:#43209f;    /* the signal hue that passes AA on light */
  --violet-soft:#c3adff;    /* the signal on slate                   */
  --violet-tint:#efe9ff;

  /* four-colour deck — index marks only, never surfaces */
  --s-spade:#1b2130;
  --s-heart:#c8102e;
  --s-diamond:#1668c8;
  --s-club:#0f8a4d;

  --wrap:1240px;
  --gut:clamp(20px,4vw,40px);
  --r:14px;

  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--body);
  background:var(--linen);
  -webkit-font-smoothing:antialiased;
  font-size:17px;
  line-height:1.72;
}

#page-card-game-development *,
#page-card-game-development *::before,
#page-card-game-development *::after{box-sizing:border-box;}

#page-card-game-development p{margin:0 0 18px;font-size:17px;line-height:1.78;}
#page-card-game-development p:last-child{margin-bottom:0;}
#page-card-game-development ul,
#page-card-game-development ol{margin:0;padding:0;list-style:none;}
#page-card-game-development img{max-width:100%;height:auto;display:block;}
#page-card-game-development h1,
#page-card-game-development h2,
#page-card-game-development h3,
#page-card-game-development h4,
#page-card-game-development h5{margin:0;color:var(--strong);font-weight:800;letter-spacing:-.015em;line-height:1.2;}

#page-card-game-development .cgd-wrap{
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);width:100%;
}

/* ── inline text links ───────────────────────────────────────────────────
   Not CTAs (rule 25 counts .btn/.cta and modal openers), so they must read
   as links: underlined, in the signal hue that passes AA on stock. */
#page-card-game-development .cgd-link{
  color:var(--violet-deep);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  font-weight:600;
  transition:color .18s ease,text-decoration-color .18s ease;
}
#page-card-game-development .cgd-link:hover,
#page-card-game-development .cgd-link:focus-visible{
  color:var(--violet);text-decoration-thickness:2px;
}
#page-card-game-development .cgd-link--light{color:var(--violet-soft);}
#page-card-game-development .cgd-link--light:hover,
#page-card-game-development .cgd-link--light:focus-visible{color:#ffffff;}

#page-card-game-development :focus-visible{
  outline:3px solid var(--violet);outline-offset:3px;border-radius:4px;
}

/* ══ BUTTONS ══════════════════════════════════════════════════════════════
   One shape, two weights. Motion is a finite hover/active response only. */
#page-card-game-development .cgd-btn{
  display:inline-flex;align-items:center;gap:10px;
  font:inherit;font-size:17px;font-weight:700;letter-spacing:.01em;
  padding:16px 30px;border-radius:999px;border:2px solid transparent;
  cursor:pointer;text-align:center;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease,border-color .18s ease;
}
/* The button's spade pip is drawn as a MASKED shape, not as pseudo-element
   text. `content:"\2660"` is exposed to the accessibility tree in Chromium, so
   every CTA's accessible name came out as "Get Card Game Software ♠" — the
   glyph is decoration, and a decoration must not end up in the link's name. */
#page-card-game-development .cgd-btn::after{
  content:"";width:14px;height:16px;flex:none;opacity:.6;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c3.2 4 8 6.4 8 10.4A4.6 4.6 0 0 1 15.4 17c-1.2 0-2.3-.5-3-1.3.2 2.4.9 4 2.2 5.3H9.4c1.3-1.3 2-2.9 2.2-5.3-.7.8-1.8 1.3-3 1.3A4.6 4.6 0 0 1 4 12.4C4 8.4 8.8 6 12 2z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c3.2 4 8 6.4 8 10.4A4.6 4.6 0 0 1 15.4 17c-1.2 0-2.3-.5-3-1.3.2 2.4.9 4 2.2 5.3H9.4c1.3-1.3 2-2.9 2.2-5.3-.7.8-1.8 1.3-3 1.3A4.6 4.6 0 0 1 4 12.4C4 8.4 8.8 6 12 2z'/%3E%3C/svg%3E") center/contain no-repeat;
}
#page-card-game-development .cgd-btn--ink{
  background:var(--violet);color:#ffffff;box-shadow:0 10px 24px rgba(67,32,159,.22);
}
#page-card-game-development .cgd-btn--ink:hover,
#page-card-game-development .cgd-btn--ink:focus-visible{
  background:var(--violet-deep);transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(67,32,159,.3);
}
#page-card-game-development .cgd-btn--ink:active{transform:translateY(0);box-shadow:0 6px 16px rgba(67,32,159,.24);}
#page-card-game-development .cgd-btn--paper{
  background:var(--paper);color:var(--strong);border-color:var(--paper);
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}
#page-card-game-development .cgd-btn--paper:hover,
#page-card-game-development .cgd-btn--paper:focus-visible{
  background:var(--violet-tint);border-color:var(--violet-tint);transform:translateY(-2px);
}
#page-card-game-development .cgd-btn--paper:active{transform:translateY(0);}

#page-card-game-development .cgd-cta-row{margin-top:44px;display:flex;justify-content:center;}
#page-card-game-development .cgd-cta-row--left{justify-content:flex-start;margin-top:30px;}

/* ══ HERO ═════════════════════════════════════════════════════════════════
   Rule 24: full-bleed, image-free, STATIC gradient, centred 900px column.
   The only non-flat element is a static die-cut rule under the eyebrow. */
/* Extended hero. The skill is explicit that dropping the hero visual is a
   licence to make the type larger and the copy stronger — "a hero that loses
   its image and gains nothing reads as an unfinished page". So the vertical
   presence, the H1 ceiling and the trust block all grow; the background stays
   a STATIC gradient and the column stays capped at 900px (rule 24). */
#page-card-game-development .cgd-hero{
  width:100%;
  padding:clamp(88px,10.5vw,168px) var(--gut) clamp(76px,7.5vw,116px);
  background:linear-gradient(168deg,#ffffff 0%,#f7f3ff 34%,#f1ecff 58%,#f5f1ea 100%);
  border-bottom:1px solid var(--line);
}
#page-card-game-development .cgd-hero__inner{
  max-width:900px;margin-inline:auto;text-align:center;
}
#page-card-game-development .cgd-hero__tag{
  display:inline-block;margin:0 0 22px;
  font-size:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--violet-deep);
  padding:8px 18px;border-radius:999px;
  background:rgba(91,47,214,.09);
  border:1px dashed rgba(91,47,214,.45);   /* the die-cut rule */
}
#page-card-game-development .cgd-hero h1{
  font-size:clamp(34px,5.3vw,64px);
  font-weight:900;letter-spacing:-.03em;line-height:1.1;
  margin:0 0 30px;color:var(--strong);
  text-wrap:balance;
}
#page-card-game-development .cgd-hero__copy{
  font-size:clamp(17px,1.45vw,20px);line-height:1.78;color:var(--body);
  margin:0 auto 38px;max-width:840px;
}

/* Second trust row — a quiet label over the template names. Text only: no
   icon, no svg, nothing the hero contract would count as a visual. */
#page-card-game-development .cgd-hero__note{
  margin:52px 0 16px;font-size:16px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--violet-deep);
  opacity:.85;
}
#page-card-game-development .cgd-hero__stack{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
}
#page-card-game-development .cgd-hero__stack li{
  font-size:16px;font-weight:600;color:var(--body);
  padding:9px 18px;border-radius:999px;
  border:1px dashed var(--line-strong);      /* the die-cut rule again */
  background:rgba(255,255,255,.55);
}
#page-card-game-development .cgd-hero__modes{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  margin-top:40px;
}
#page-card-game-development .cgd-hero__modes li{
  display:flex;align-items:center;gap:12px;
  padding:12px 22px 12px 12px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:999px;
  font-size:17px;font-weight:700;color:var(--strong);
  box-shadow:0 2px 10px rgba(17,22,32,.05);
}

/* ── the card corner index: a rank over a suit pip ────────────────────── */
#page-card-game-development .cgd-idx{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  width:36px;height:44px;border-radius:6px;
  background:var(--linen);border:1px solid var(--line-strong);
  font-size:16px;font-weight:800;line-height:1;color:var(--s-spade);
}
#page-card-game-development .cgd-idx::after{font-size:16px;line-height:1;margin-top:2px;}
#page-card-game-development [data-suit="spade"] .cgd-idx,
#page-card-game-development .cgd-idx[data-suit="spade"]{color:var(--s-spade);}
#page-card-game-development .cgd-idx[data-suit="spade"]::after{content:"\2660";}
#page-card-game-development .cgd-idx[data-suit="heart"]{color:var(--s-heart);}
#page-card-game-development .cgd-idx[data-suit="heart"]::after{content:"\2665";}
#page-card-game-development .cgd-idx[data-suit="diamond"]{color:var(--s-diamond);}
#page-card-game-development .cgd-idx[data-suit="diamond"]::after{content:"\2666";}
#page-card-game-development .cgd-idx[data-suit="club"]{color:var(--s-club);}
#page-card-game-development .cgd-idx[data-suit="club"]::after{content:"\2663";}

/* ══ BREADCRUMB ══════════════════════════════════════════════════════════ */
#page-card-game-development .cgd-crumbbar{
  background:var(--paper);border-bottom:1px solid var(--line);
}
#page-card-game-development .cgd-crumb{
  display:flex;align-items:center;gap:10px;
  padding:15px 0;font-size:16px;font-weight:600;color:var(--body);
}
#page-card-game-development .cgd-crumb img{width:16px;height:16px;}
#page-card-game-development .cgd-crumb a{color:var(--violet-deep);}
#page-card-game-development .cgd-crumb a:hover{text-decoration:underline;text-underline-offset:3px;}
#page-card-game-development .cgd-crumb [aria-current]{color:var(--strong);font-weight:700;}

/* ══ SECTION SHELLS ══════════════════════════════════════════════════════ */
#page-card-game-development .cgd-sec{padding:clamp(58px,7vw,104px) 0;}
#page-card-game-development .cgd-sec--paper{background:var(--paper);}
#page-card-game-development .cgd-sec--linen{background:var(--linen);border-block:1px solid var(--line);}
#page-card-game-development .cgd-sec--slate{background:var(--slate);color:var(--body-dark);}
#page-card-game-development .cgd-sec--slate h2,
#page-card-game-development .cgd-sec--slate h5{color:#ffffff;}
#page-card-game-development .cgd-sec--slate p{color:var(--body-dark);}

#page-card-game-development .cgd-head{max-width:960px;margin-bottom:clamp(38px,4.4vw,60px);}
#page-card-game-development .cgd-head--centre{margin-inline:auto;text-align:center;}
#page-card-game-development .cgd-eyebrow{
  margin:0 0 14px;font-size:16px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--violet-deep);
}
#page-card-game-development .cgd-eyebrow--light{color:var(--violet-soft);}
#page-card-game-development .cgd-h2{
  font-size:clamp(26px,3.1vw,39px);line-height:1.2;letter-spacing:-.022em;
  text-wrap:balance;
}
#page-card-game-development .cgd-h2--wide{max-width:34ch;}

/* ══ LEDE — asymmetric 7:5 spread, the record's one product image ════════ */
#page-card-game-development .cgd-lede{
  background:var(--paper);padding:clamp(52px,6.5vw,92px) 0;
}
#page-card-game-development .cgd-lede__grid{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(30px,4.4vw,64px);align-items:center;
}
#page-card-game-development .cgd-lede__copy p{
  font-size:clamp(17px,1.25vw,18.5px);line-height:1.82;
}

/* ── the plate: a card-stock frame with a die-cut edge ─────────────────── */
#page-card-game-development .cgd-plate{
  margin:0;padding:14px;background:var(--linen);
  border:1px solid var(--line-strong);border-radius:var(--r);
  position:relative;
}
#page-card-game-development .cgd-plate::before{
  content:"";position:absolute;inset:6px;border-radius:9px;
  border:1px dashed var(--line-strong);pointer-events:none;
}
#page-card-game-development .cgd-plate img{
  border-radius:8px;width:100%;position:relative;
}

/* ══ COLLABORATE BANNER — the record's collaborate-bg.webp ═══════════════ */
#page-card-game-development .cgd-banner{
  background:linear-gradient(90deg,rgba(17,22,32,.93) 0%,rgba(17,22,32,.82) 46%,rgba(21,26,36,.62) 100%),
             url("https://aiscmsapi.aistechnolabs.com/product_images/collaborate-bg.webp") center/cover no-repeat;
  padding:clamp(52px,6.4vw,92px) 0;
  color:var(--body-dark);
}
#page-card-game-development .cgd-banner__grid{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(26px,3.4vw,52px);align-items:center;
}
#page-card-game-development .cgd-banner__grid h2{color:#ffffff;max-width:22ch;}
#page-card-game-development .cgd-banner__sub{
  margin:16px 0 0;font-size:18px;font-weight:600;color:var(--violet-soft);
}
#page-card-game-development .cgd-banner__act{display:flex;justify-content:flex-end;}

/* ══ THE FANNED HAND — five capability cards ═════════════════════════════
   Each card is a piece of stock with a corner index. The stagger is static:
   it is a transform on the resting state, not an animation. */
#page-card-game-development .cgd-hand{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(18px,1.9vw,28px);align-items:start;
}
/* Three across, then two centred under them — a dealt hand, not a five-up
   strip. Five equal columns on a 1240px wrap left each card ~215px wide,
   which is too narrow for this much copy to read as anything but a list. */
#page-card-game-development .cgd-card{grid-column:span 2;}
#page-card-game-development .cgd-card:nth-child(4){grid-column:2/span 2;}
#page-card-game-development .cgd-card:nth-child(5){grid-column:4/span 2;}
#page-card-game-development .cgd-card{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  border-top:4px solid var(--s-spade);
  border-radius:var(--r);
  padding:34px 24px 28px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  box-shadow:0 2px 10px rgba(17,22,32,.05);
}
#page-card-game-development .cgd-card[data-suit="heart"]{border-top-color:var(--s-heart);}
#page-card-game-development .cgd-card[data-suit="diamond"]{border-top-color:var(--s-diamond);}
#page-card-game-development .cgd-card[data-suit="club"]{border-top-color:var(--s-club);}
/* the fan: a static resting offset, the middle card standing proud. This is
   a resting transform, NOT an animation (rule 26) — nothing moves on load. */
#page-card-game-development .cgd-card:nth-child(1){transform:translateY(18px);}
#page-card-game-development .cgd-card:nth-child(2){transform:translateY(0);}
#page-card-game-development .cgd-card:nth-child(3){transform:translateY(18px);}
#page-card-game-development .cgd-card:nth-child(4),
#page-card-game-development .cgd-card:nth-child(5){transform:translateY(0);}
#page-card-game-development .cgd-card:hover{
  box-shadow:0 16px 34px rgba(17,22,32,.12);border-color:var(--line-strong);
  transform:translateY(-8px);
}
#page-card-game-development .cgd-card:nth-child(1):hover,
#page-card-game-development .cgd-card:nth-child(3):hover{transform:translateY(10px);}
#page-card-game-development .cgd-card__idx{
  display:inline-flex;flex-direction:column;align-items:center;line-height:1;
  font-size:19px;font-weight:900;color:var(--s-spade);margin-bottom:16px;
}
#page-card-game-development .cgd-card__idx::after{font-size:17px;margin-top:3px;content:"\2660";}
#page-card-game-development .cgd-card[data-suit="heart"] .cgd-card__idx{color:var(--s-heart);}
#page-card-game-development .cgd-card[data-suit="heart"] .cgd-card__idx::after{content:"\2665";}
#page-card-game-development .cgd-card[data-suit="diamond"] .cgd-card__idx{color:var(--s-diamond);}
#page-card-game-development .cgd-card[data-suit="diamond"] .cgd-card__idx::after{content:"\2666";}
#page-card-game-development .cgd-card[data-suit="club"] .cgd-card__idx{color:var(--s-club);}
#page-card-game-development .cgd-card[data-suit="club"] .cgd-card__idx::after{content:"\2663";}
#page-card-game-development .cgd-card h5{
  font-size:19px;line-height:1.3;margin-bottom:14px;
}
#page-card-game-development .cgd-card p{font-size:16px;line-height:1.72;}

/* ══ PILLARS — the four-colour deck as an index, on slate ════════════════ */
#page-card-game-development .cgd-pillars{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.4vw,34px);
  counter-reset:pillar;
}
#page-card-game-development .cgd-pillar{
  position:relative;
  background:var(--slate-2);
  border:1px solid var(--slate-3);
  border-radius:var(--r);
  padding:32px clamp(24px,2.4vw,34px);
  transition:border-color .2s ease,background-color .2s ease;
}
#page-card-game-development .cgd-pillar:hover{background:#232b3b;border-color:#4b5771;}
#page-card-game-development .cgd-pillar__suit{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:10px;margin-bottom:18px;
  background:rgba(255,255,255,.06);border:1px solid var(--slate-3);
  color:#ffffff;
}
#page-card-game-development .cgd-pillar[data-suit="spade"] .cgd-pillar__suit{color:#ffffff;}
#page-card-game-development .cgd-pillar[data-suit="heart"] .cgd-pillar__suit{color:#ff7a8c;}
#page-card-game-development .cgd-pillar[data-suit="diamond"] .cgd-pillar__suit{color:#79b4ff;}
#page-card-game-development .cgd-pillar[data-suit="club"] .cgd-pillar__suit{color:#5fd39a;}
#page-card-game-development .cgd-pillar h5{font-size:20px;margin-bottom:14px;line-height:1.3;}
#page-card-game-development .cgd-pillar p{font-size:16.5px;line-height:1.76;}

/* ══ HIRE BAND — 6:5 spread with the record's hire-dev-img.webp ══════════ */
#page-card-game-development .cgd-hire{
  background:var(--linen);border-block:1px solid var(--line);
  padding:clamp(58px,7vw,100px) 0;
}
#page-card-game-development .cgd-hire__grid{
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(30px,4.4vw,66px);align-items:center;
}
#page-card-game-development .cgd-hire__grid h2{max-width:20ch;}
#page-card-game-development .cgd-hire__sub{
  margin:16px 0 0;font-size:18px;font-weight:600;color:var(--body);
}
#page-card-game-development .cgd-aside{margin:18px 0 0;font-size:16px;color:var(--body);}
#page-card-game-development .cgd-plate--hire{background:var(--paper);}

/* ══ PROSE SPREAD ════════════════════════════════════════════════════════ */
#page-card-game-development .cgd-prose{
  columns:2;column-gap:clamp(30px,4vw,60px);
  max-width:1080px;
}
#page-card-game-development .cgd-prose p{
  break-inside:avoid;font-size:17px;line-height:1.82;margin-bottom:20px;
}

/* ══ FAQ — numbered accordion, single-open, user-initiated only ══════════ */
#page-card-game-development .cgd-faq{
  --faq-col:52px;
  max-width:980px;margin-inline:auto;
  border-top:1px solid var(--line);
}
#page-card-game-development .cgd-faq details{border-bottom:1px solid var(--line);}
#page-card-game-development .cgd-faq summary{
  display:grid;grid-template-columns:var(--faq-col) minmax(0,1fr) 32px;
  align-items:start;gap:0;
  padding:22px 4px;cursor:pointer;list-style:none;
  transition:background-color .16s ease;
}
#page-card-game-development .cgd-faq summary::-webkit-details-marker{display:none;}
#page-card-game-development .cgd-faq summary:hover{background:var(--violet-tint);}
#page-card-game-development .cgd-faq__n{
  font-size:16px;font-weight:800;color:var(--violet-deep);
  line-height:1.5;letter-spacing:.02em;
}
#page-card-game-development .cgd-faq summary h2{
  font-size:19px;font-weight:700;line-height:1.5;letter-spacing:-.01em;
  color:var(--strong);margin:0;
}
#page-card-game-development .cgd-faq__pm{
  position:relative;width:22px;height:22px;margin-top:4px;justify-self:end;
}
#page-card-game-development .cgd-faq__pm::before,
#page-card-game-development .cgd-faq__pm::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--violet);
  transform:translate(-50%,-50%);border-radius:2px;
}
#page-card-game-development .cgd-faq__pm::before{width:16px;height:2.5px;}
#page-card-game-development .cgd-faq__pm::after{
  width:2.5px;height:16px;transition:transform .2s ease,opacity .2s ease;
}
#page-card-game-development .cgd-faq details[open] .cgd-faq__pm::after{
  transform:translate(-50%,-50%) rotate(90deg);opacity:0;
}
/* The answer row is its OWN grid, and it is driven by the SAME --faq-col
   token as the summary row above it. That shared token is the whole trick:
   if each grid sized its own `auto` first column they would align the two
   labels but NOT the copy beside them, because "Ans." is wider than "Q1".
   One token means the two rows cannot drift apart.
   Indenting with padding — the previous approach here — could only ever
   align the copy, never the label. Both grids also use gap:0 and the same
   4px left padding, so column 1 starts at the same x on both rows.
   (Solution ported from /blackjack-software-script, AISHTMLNEWDESIGN-326.) */
#page-card-game-development .cgd-faq__a{
  display:grid;grid-template-columns:var(--faq-col) minmax(0,1fr);
  gap:0;align-items:baseline;
  padding:0 58px 24px 4px;
}
#page-card-game-development .cgd-faq__ans{
  font-size:16px;font-weight:800;color:var(--violet-deep);letter-spacing:.02em;
}
#page-card-game-development .cgd-faq__a p{font-size:17px;line-height:1.8;margin:0;}

/* ══ STORIES — slate band, click-to-load video facades ═══════════════════ */
#page-card-game-development .cgd-stories{
  background:var(--slate);padding:clamp(58px,7vw,100px) 0;color:var(--body-dark);
}
#page-card-game-development .cgd-stories h4{color:#ffffff;}
#page-card-game-development .cgd-storylist{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.4vw,32px);
}
#page-card-game-development .cgd-story{
  background:var(--slate-2);border:1px solid var(--slate-3);
  border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;
}
#page-card-game-development .cgd-vid{
  position:relative;display:block;width:100%;padding:0;border:0;
  background:#0d1119;cursor:pointer;line-height:0;
}
#page-card-game-development .cgd-vid img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:opacity .2s ease;}
#page-card-game-development .cgd-vid:hover img{opacity:.78;}
#page-card-game-development .cgd-vid__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--violet);color:#ffffff;padding-left:4px;
  box-shadow:0 8px 22px rgba(0,0,0,.4);
  transition:transform .2s ease,background-color .2s ease;
}
#page-card-game-development .cgd-vid:hover .cgd-vid__play,
#page-card-game-development .cgd-vid:focus-visible .cgd-vid__play{
  transform:translate(-50%,-50%) scale(1.08);background:#6f45ea;
}
#page-card-game-development .cgd-story__frame{
  width:100%;aspect-ratio:3/2;border:0;display:block;
}
#page-card-game-development .cgd-story blockquote{margin:0;padding:26px 24px 28px;}
#page-card-game-development .cgd-story blockquote p{
  font-size:16.5px;line-height:1.76;color:var(--body-dark);margin:0;
}
#page-card-game-development .cgd-more{margin:36px 0 0;text-align:center;font-size:17px;font-weight:600;}

/* ══ AREA WE SERVE ═══════════════════════════════════════════════════════ */
#page-card-game-development .cgd-regions{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2.2vw,30px);
}
#page-card-game-development .cgd-region{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:28px 24px;
}
#page-card-game-development .cgd-region h3{
  display:flex;align-items:center;gap:10px;
  font-size:17px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px;
}
#page-card-game-development .cgd-region h3 img{width:14px;height:20px;flex:none;}
#page-card-game-development .cgd-tel{
  display:inline-block;font-size:17px;font-weight:700;color:var(--violet-deep);margin-bottom:12px;
}
#page-card-game-development .cgd-tel:hover{text-decoration:underline;text-underline-offset:3px;}
#page-card-game-development .cgd-region p{font-size:16px;line-height:1.7;margin:0;}

/* ══ CTA MODAL ═══════════════════════════════════════════════════════════ */
#page-card-game-development .cgd-modal{
  display:none;position:fixed;inset:0;z-index:9999;
  padding: 100px 20px 20px 20px;overflow-y:auto;background:rgba(10,13,20,.72);
}
#page-card-game-development .cgd-modal.is-open{display:flex;align-items:flex-start;justify-content:center;}
#page-card-game-development .cgd-modal__box{
  position:relative;width:100%;max-width:640px;margin:auto;
  background:var(--paper);border-radius:18px;overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.45);
}
#page-card-game-development .cgd-modal__x{
  position:absolute;top:12px;right:12px;z-index:2;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:var(--paper);color:var(--strong);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .18s ease,color .18s ease;
}
#page-card-game-development .cgd-modal__x:hover{background:var(--violet);color:#ffffff;border-color:var(--violet);}
/* rule 20 — the GHL widget is a TWO-SLIDE survey whose slides are different
   heights, and it never posts its own height (it emits only
   ["iframeLoaded"]), so ANY fixed iframe height either wastes space under
   slide 1 or clips slide 2's SUBMIT bar. This is the fix already landed on
   /blackjack-software-script under AISHTMLNEWDESIGN-326, reused verbatim
   rather than re-derived: GHL's own form_embed.js starts their iFrameResizer
   and sizes the iframe per slide, and it is loaded on FIRST MODAL OPEN so no
   third-party JS reaches the critical path.
   The resizer overshoots the widget's own scrollHeight by exactly 5px; the
   negative margin cancels ONLY that, and .cgd-modal__box's overflow:hidden
   clips it, leaving bottom space equal to the widget's own 90px top inset.
   Do NOT raise it to -95px — that eats the widget's intended padding and the
   SUBMIT bar sits flush against the modal's rounded edge.
   Until the resizer initialises (or if the script is blocked) the iframe
   keeps a floor tall enough for the WORST slide and drops the negative
   margin, so a failed script degrades to "a little roomy", never to a
   clipped SUBMIT. */
#page-card-game-development .cgd-modal iframe{
  display:block;width:100%;border:0;margin-bottom:-5px;
}
#page-card-game-development .cgd-modal iframe:not([data-iframe-resizer-initialized]){
  min-height:1290px;margin-bottom:0;
}

/* ══ RESPONSIVE ══════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  /* two across; the odd fifth card centres itself rather than hanging left */
  #page-card-game-development .cgd-hand{grid-template-columns:repeat(4,minmax(0,1fr));}
  #page-card-game-development .cgd-card:nth-child(4){grid-column:span 2;}
  #page-card-game-development .cgd-card:nth-child(5){grid-column:2/span 2;}
  #page-card-game-development .cgd-card:nth-child(n){transform:none;}
  #page-card-game-development .cgd-card:hover{transform:translateY(-6px);}
  #page-card-game-development .cgd-regions{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:960px){
  #page-card-game-development .cgd-lede__grid,
  #page-card-game-development .cgd-hire__grid{grid-template-columns:minmax(0,1fr);}
  #page-card-game-development .cgd-lede__grid .cgd-plate,
  #page-card-game-development .cgd-hire__grid .cgd-plate{order:-1;}
  #page-card-game-development .cgd-pillars{grid-template-columns:minmax(0,1fr);}
  #page-card-game-development .cgd-banner__grid{grid-template-columns:minmax(0,1fr);}
  #page-card-game-development .cgd-banner__act{justify-content:flex-start;}
  #page-card-game-development .cgd-banner__grid h2{max-width:none;}
  #page-card-game-development .cgd-hire__grid h2{max-width:none;}
  #page-card-game-development .cgd-storylist{grid-template-columns:minmax(0,1fr);}
  #page-card-game-development .cgd-prose{columns:1;}
}
@media (max-width:720px){
  #page-card-game-development{font-size:16px;}
  #page-card-game-development .cgd-hand{grid-template-columns:minmax(0,1fr);}
  #page-card-game-development .cgd-card,
  #page-card-game-development .cgd-card:nth-child(4),
  #page-card-game-development .cgd-card:nth-child(5){grid-column:auto;}
  #page-card-game-development .cgd-regions{grid-template-columns:minmax(0,1fr);}
  #page-card-game-development .cgd-hero__modes{flex-direction:column;align-items:stretch;}
  #page-card-game-development .cgd-hero__modes li{justify-content:flex-start;}
  #page-card-game-development .cgd-hero__note{margin-top:40px;}
  #page-card-game-development .cgd-hero__stack li{padding:8px 14px;}
  #page-card-game-development .cgd-btn{width:100%;justify-content:center;padding:16px 24px;}
  #page-card-game-development .cgd-cta-row,
  #page-card-game-development .cgd-cta-row--left{justify-content:stretch;}
  #page-card-game-development .cgd-faq{--faq-col:44px;}
  #page-card-game-development .cgd-faq summary{grid-template-columns:var(--faq-col) minmax(0,1fr) 26px;padding:20px 2px;}
  #page-card-game-development .cgd-faq summary h2{font-size:17.5px;}
  #page-card-game-development .cgd-faq__a{padding:0 8px 22px 2px;}
}

/* Respect a reader who has asked the OS for less motion. Rule 26 already
   forbids running animation; this removes the remaining hover transforms. */
@media (prefers-reduced-motion:reduce){
  #page-card-game-development *{transition-duration:.01ms !important;}
  #page-card-game-development .cgd-card:hover,
  #page-card-game-development .cgd-btn:hover{transform:none;}
}