/* ══════════════════════════════════════════════════════════════════════════
   /slot-machine-source-code — "PRESSED STEEL"
   AIS Technolabs · AISHTMLNEWDESIGN-385 [Page Preserve]

   ISOLATED PAGE STYLESHEET. Every rule is scoped under
   #page-slot-machine-source-code so nothing here can reach the shared
   header/footer injected by site-layout.js (those are owned by
   /assets/css/layout.css).

   Visual direction: "pressed steel". The first cut of this page was violet-led
   with a lime action colour, and it was wrong in CONTEXT rather than in
   isolation: the shared header's brand buttons are #3b259c, and the page ground
   was #17142b — hue 253 against hue 255. The page washed into the chrome
   instead of sitting inside it, and lime belonged to neither.

   So the ground is now hue-NEUTRAL graphite (#15171c). A neutral ground lets the
   brand colour read as deliberate rather than as a near-miss, and the single
   action colour IS the brand indigo (#3b259c), so a CTA in the page body and
   "Hire Top Talent" in the header are visibly the same system. Paper is a warm
   bone, chosen to sit against the cool chrome rather than echo it. Steel grey is
   the decorative accent for numerals and rules -- never an affordance.

   Deliberately distinct from every slot sibling in this repo:
     /slot-machine-game-source-code  espresso-graphite + burnt orange
     /slot-machine-html-code         near-black + jackpot amber
     /slot-machine-software-for-sale midnight navy + cream + crimson
     /php-slot-machine               charcoal-teal + PHP indigo
     /slot-machine-programming       baize green + brass
     /javascript-slot-machine-code   developer console, cool greys
   None pairs a neutral graphite ground with the AIS brand indigo.

   Motion policy (rule 26): no @keyframes anywhere in this file. Every
   transition is a finite response to hover, focus, press or details-open.
   ══════════════════════════════════════════════════════════════════════════ */

#page-slot-machine-source-code {
  /* ── Ink / dark surfaces ── */
  --smsc-ink:      #15171c;
  --smsc-ink-2:    #1d2027;
  --smsc-ink-3:    #292d36;
  --smsc-line-d:   rgba(255, 255, 255, .13);
  --smsc-on-ink:   #f4f5f7;
  --smsc-on-ink-2: #b6bcc7;

  /* ── Paper / light surfaces ── */
  --smsc-paper:    #ffffff;
  --smsc-paper-2:  #f8f7f4;
  --smsc-paper-3:  #eeebe4;
  --smsc-line-l:   #ddd9cf;

  /* ── Text on light (all ≥ 4.5:1 on paper, paper-2 and paper-3) ── */
  --smsc-text:     #17191e;
  --smsc-text-2:   #474d57;

  /* ── Action — the only interactive colour ── */
  --smsc-act:     #3b259c;   /* white text on this ≈ 4.6:1 */
  --smsc-act-d:   #2e1c7a;
  --smsc-act-l:   #a99cff;   /* on ink only */

  /* ── Accent: violet. Decorative only — never the sole carrier of meaning,
        never an interactive affordance. ── */
  --smsc-steel:   #5a6472;   /* on paper */
  --smsc-steel-l: #9aa6b8;   /* on ink   */

  --smsc-r:   16px;
  --smsc-r-s: 10px;

  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--smsc-text);
  background: var(--smsc-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── SELF-CONTAINED BASELINE ────────────────────────────────────────────
   Declared again in the page's inline <style> (which validate-conversion.py
   reads); repeated here so the rule survives if the inline block is ever
   trimmed. Links must not fall back to the UA underline. */
#page-slot-machine-source-code a { text-decoration: none; color: inherit; }

/* Element resets are wrapped in :where() so they carry ZERO specificity and can
   never beat a component rule — the failure mode that flattened four centred
   H3s on /make-your-own-slot-machine. */
#page-slot-machine-source-code :where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, dl, dd) {
  margin: 0;
}
#page-slot-machine-source-code :where(ul, ol) { padding: 0; list-style: none; }
#page-slot-machine-source-code :where(img) { max-width: 100%; height: auto; display: block; }
#page-slot-machine-source-code :where(button) { font: inherit; color: inherit; }
#page-slot-machine-source-code :where(h1, h2, h3, h4, h5, h6) {
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
}

#page-slot-machine-source-code *, 
#page-slot-machine-source-code *::before, 
#page-slot-machine-source-code *::after { box-sizing: border-box; }

/* Visible keyboard focus everywhere. */
#page-slot-machine-source-code :focus-visible {
  outline: 3px solid var(--smsc-act);
  outline-offset: 3px;
  border-radius: 4px;
}
#page-slot-machine-source-code .smsc-sec--ink :focus-visible { outline-color: var(--smsc-act-l); }

/* ══════════════════════════════════════════════════════════════════════════

/* ══════════════════════════════════════════════════════════════════════════
   THE SYSTEM

   The previous pass chased "every section must look different" and produced a
   page with no shared language: eighteen unrelated compositions, five band
   flips in a row, and a 23,903px scroll. Worse, it shipped a real defect — the
   feature "cards" were 2-column grids holding THREE children, so every
   paragraph flowed into the 58px numeral gutter and rendered 58px wide by
   788px tall. Twelve towers of one-word lines, 6,217px of them.

   So: ONE card language, ONE spacing scale, ONE heading pattern, reused
   everywhere. Variety comes from a few deliberate set-pieces (the hero plate,
   the services timeline, the screenshot mosaic, the discover panels), not from
   making every section its own invention.

   HARD RULE learned the expensive way: a card's internals are block or flex
   flow, NEVER an implicit grid. Grid containers here hold ONE child type only,
   so nothing can land in the wrong track.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── Rhythm ─────────────────────────────────────────────────────────────── */

#page-slot-machine-source-code .smsc-wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
}
#page-slot-machine-source-code .smsc-sec { width: 100%; padding-block: clamp(56px, 6vw, 92px); }
#page-slot-machine-source-code .smsc-sec--paper { background: var(--smsc-paper); }
#page-slot-machine-source-code .smsc-sec--tint  { background: var(--smsc-paper-2); }
#page-slot-machine-source-code .smsc-sec--band  { background: var(--smsc-paper-2); }
#page-slot-machine-source-code .smsc-sec--ink   { background: var(--smsc-ink); color: var(--smsc-on-ink); }
#page-slot-machine-source-code .smsc-sec--ink :where(h1,h2,h3,h4,h5,h6) { color: var(--smsc-on-ink); }
#page-slot-machine-source-code .smsc-sec--ink p { color: var(--smsc-on-ink-2); }

/* ─── Section head ───────────────────────────────────────────────────────── */

#page-slot-machine-source-code .smsc-head { max-width: 820px; margin-bottom: clamp(30px, 3.4vw, 48px); }
#page-slot-machine-source-code .smsc-head--center { margin-inline: auto; text-align: center; }
#page-slot-machine-source-code .smsc-head h2 { font-size: clamp(28px, 3.2vw, 42px); margin-top: 12px; }
#page-slot-machine-source-code .smsc-head p { font-size: 17px; line-height: 1.7; color: var(--smsc-text-2); margin-top: 16px; }
#page-slot-machine-source-code .smsc-sec--ink .smsc-head p { color: var(--smsc-on-ink-2); }

#page-slot-machine-source-code .smsc-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--smsc-act-l);
}
#page-slot-machine-source-code .smsc-eyebrow::before { content: ""; width: 20px; height: 2px; background: currentColor; flex: none; }
#page-slot-machine-source-code .smsc-eyebrow--dark { color: var(--smsc-act); }
#page-slot-machine-source-code .smsc-lede { font-size: 17px; line-height: 1.7; color: var(--smsc-text-2); }
/* Every CTA is centred in its section. This is the single place that decides it,
   so there is no per-section drift and no `--center` modifier to remember: 12 of
   the 17 buttons were left-aligned and 5 centred precisely because alignment was
   being set section by section. */
#page-slot-machine-source-code .smsc-cta-row {
  margin-top: clamp(28px, 3.4vw, 44px);
  text-align: center;
}

/* ─── THE card. One component, two surfaces. ─────────────────────────────── */

#page-slot-machine-source-code .smsc-card {
  display: block;                       /* block flow inside — never grid */
  padding: clamp(22px, 2.2vw, 30px);
  background: var(--smsc-paper);
  border: 1px solid var(--smsc-line-l);
  border-radius: var(--smsc-r);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
#page-slot-machine-source-code .smsc-card:hover {
  border-color: var(--smsc-act);
  box-shadow: 0 12px 30px rgba(23, 25, 30, .10);
  transform: translateY(-3px);
}
#page-slot-machine-source-code .smsc-sec--ink .smsc-card {
  background: var(--smsc-ink-2);
  border-color: var(--smsc-line-d);
}
#page-slot-machine-source-code .smsc-sec--ink .smsc-card:hover {
  border-color: var(--smsc-act-l);
  box-shadow: none;
}
#page-slot-machine-source-code .smsc-card__num {
  display: block;
  font-size: 15px; font-weight: 800; letter-spacing: .12em;
  color: var(--smsc-act);
  margin-bottom: 12px;
}
#page-slot-machine-source-code .smsc-sec--ink .smsc-card__num { color: var(--smsc-act-l); }
#page-slot-machine-source-code .smsc-card h3,
#page-slot-machine-source-code .smsc-card h5 { font-size: 19px; margin-bottom: 10px; line-height: 1.3; }
#page-slot-machine-source-code .smsc-card p { font-size: 16px; line-height: 1.68; color: var(--smsc-text-2); }
#page-slot-machine-source-code .smsc-sec--ink .smsc-card p { color: var(--smsc-on-ink-2); }

/* ─── Grids. Every one holds a SINGLE child type. ────────────────────────── */

#page-slot-machine-source-code .smsc-grid { display: grid; gap: clamp(16px, 1.8vw, 24px); }
#page-slot-machine-source-code .smsc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#page-slot-machine-source-code .smsc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#page-slot-machine-source-code .smsc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#page-slot-machine-source-code .smsc-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ══════════════════════════════════════════════════════════════════════════
   BUTTONS — the component that went MISSING.

   The stylesheet rebuild sliced tokens from lines 1-110 and dropped 111-247,
   which is where this block lived; the new system never re-declared it. All
   twelve surviving `.smsc-btn` references were positional (margin, grid-column,
   width), so the four variant classes in the HTML matched nothing and every CTA
   on the page rendered as a raw UA button: padding 1px 6px, radius 0, grey
   #efefef, and inherited light text on top of it. Nine invisible CTAs, live.

   Geometry is matched to /javascript-slot-machine-code, measured not guessed:
   60px tall, padding 14px 30px, radius 999px, 17px/700, 2px border, width
   driven by the label. Four variants, one per surface, all identical in size.
   ══════════════════════════════════════════════════════════════════════════ */

#page-slot-machine-source-code .smsc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 60px;
  padding: 14px 30px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}
#page-slot-machine-source-code .smsc-btn:active { transform: translateY(1px); }
#page-slot-machine-source-code .smsc-btn:disabled { opacity: .55; cursor: not-allowed; }

/* primary, on light surfaces — the brand indigo (white on it ~11:1) */
#page-slot-machine-source-code .smsc-btn--act {
  background: var(--smsc-act); border-color: var(--smsc-act); color: #ffffff;
}
#page-slot-machine-source-code .smsc-btn--act:hover {
  background: var(--smsc-act-d); border-color: var(--smsc-act-d); color: #ffffff;
}

/* primary, on ink surfaces — same colour at its light stop, ink text */
#page-slot-machine-source-code .smsc-btn--solid {
  background: var(--smsc-act-l); border-color: var(--smsc-act-l); color: var(--smsc-ink);
}
#page-slot-machine-source-code .smsc-btn--solid:hover {
  background: #bcb2ff; border-color: #bcb2ff; color: var(--smsc-ink);
}

/* secondary, on light surfaces */
#page-slot-machine-source-code .smsc-btn--ink {
  background: var(--smsc-ink); border-color: var(--smsc-ink); color: var(--smsc-on-ink);
}
#page-slot-machine-source-code .smsc-btn--ink:hover {
  background: var(--smsc-ink-3); border-color: var(--smsc-ink-3); color: var(--smsc-on-ink);
}

/* outline, on ink surfaces */
#page-slot-machine-source-code .smsc-btn--ghost {
  background: transparent; border-color: var(--smsc-act-l); color: var(--smsc-act-l);
}
#page-slot-machine-source-code .smsc-btn--ghost:hover {
  background: var(--smsc-act-l); border-color: var(--smsc-act-l); color: var(--smsc-ink);
}

/* inline text link — a second destination, never a second button */
#page-slot-machine-source-code .smsc-textlink {
  color: var(--smsc-act); font-weight: 700; border-bottom: 2px solid currentColor;
  transition: color .18s ease;
}
#page-slot-machine-source-code .smsc-textlink:hover { color: var(--smsc-act-d); }
#page-slot-machine-source-code .smsc-sec--ink .smsc-textlink { color: var(--smsc-act-l); }
#page-slot-machine-source-code .smsc-sec--ink .smsc-textlink:hover { color: #ffffff; }

/* The stories row carries the button AND the "View more" text link. Centring the
   row centres the PAIR, which pushed the button ~44px off the section's axis.
   Stacking puts the button on the axis and the link centred beneath it. */
#page-slot-machine-source-code .smsc-stories + .smsc-cta-row,
#page-slot-machine-source-code .smsc-sec--ink .smsc-cta-row:has(.smsc-textlink) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* ══════════════════════════════════════════════════════════════════════════
   BREADCRUMB
   ══════════════════════════════════════════════════════════════════════════ */

#page-slot-machine-source-code .smsc-crumb { background: var(--smsc-ink); border-bottom: 1px solid var(--smsc-line-d); padding-block: 16px; }
#page-slot-machine-source-code .smsc-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 16px; }
#page-slot-machine-source-code .smsc-crumb a { display: inline-flex; align-items: center; gap: 8px; color: var(--smsc-on-ink-2); transition: color .18s ease; }
#page-slot-machine-source-code .smsc-crumb a:hover { color: var(--smsc-act-l); }
#page-slot-machine-source-code .smsc-crumb svg { width: 16px; height: 16px; }
#page-slot-machine-source-code .smsc-crumb li[aria-hidden] { color: var(--smsc-on-ink-2); opacity: .45; }
#page-slot-machine-source-code .smsc-crumb [aria-current] { color: var(--smsc-on-ink); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════════
   HERO — rule 24: full-bleed, image-free, centred column, static gradient.
   ══════════════════════════════════════════════════════════════════════════ */

#page-slot-machine-source-code .smsc-hero {
  width: 100%;
  padding: clamp(60px, 7vw, 104px) 24px clamp(56px, 6.5vw, 92px);
  background:
    radial-gradient(880px 400px at 50% -10%, rgba(169, 156, 255, .16), transparent 70%),
    linear-gradient(180deg, var(--smsc-ink-2) 0%, var(--smsc-ink) 100%);
  color: var(--smsc-on-ink);
}
#page-slot-machine-source-code .smsc-hero__inner { max-width: 900px; margin-inline: auto; text-align: center; }
#page-slot-machine-source-code .smsc-hero h1 { font-size: clamp(36px, 4.6vw, 60px); line-height: 1.08; margin-top: 18px; color: var(--smsc-on-ink); }
#page-slot-machine-source-code .smsc-hero h1 em { font-style: normal; color: var(--smsc-act-l); }
#page-slot-machine-source-code .smsc-hero__lede { font-size: clamp(16px, 1.35vw, 18px); line-height: 1.72; color: var(--smsc-on-ink-2); margin-top: 20px; }
#page-slot-machine-source-code .smsc-hero__sub { font-size: 17px; line-height: 1.7; color: var(--smsc-on-ink-2); margin-top: 14px; }
#page-slot-machine-source-code .smsc-hero .smsc-btn { margin-top: 30px; }
#page-slot-machine-source-code .smsc-hero__trust {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  margin-top: 36px; border: 1px solid var(--smsc-line-d); border-radius: var(--smsc-r-s); overflow: hidden;
}
#page-slot-machine-source-code .smsc-hero__trust li {
  display: flex; align-items: center; gap: 9px;
  padding: 15px 16px; font-size: 16px; font-weight: 600; color: var(--smsc-on-ink);
  background: rgba(255, 255, 255, .03); border-left: 1px solid var(--smsc-line-d); text-align: left;
}
#page-slot-machine-source-code .smsc-hero__trust li:first-child { border-left: 0; }
#page-slot-machine-source-code .smsc-hero__trust svg { width: 17px; height: 17px; color: var(--smsc-act-l); flex: none; }

/* ══════════════════════════════════════════════════════════════════════════
   INTRO — three compact prose columns, each under a rule and a numeral
   ══════════════════════════════════════════════════════════════════════════ */

#page-slot-machine-source-code .smsc-intro__label {
  display: block; font-size: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--smsc-act); margin-bottom: 28px;
}
#page-slot-machine-source-code .smsc-intro__cols {
  counter-reset: smsc-intro;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 40px);
}
/* Each column is a content BOX, not bare prose under a hairline. This was the
   only content block on the page without one — every other section already uses
   the card language, so the intro read as unstyled by comparison.

   The section sits on the white paper band, so the box is filled with the bone
   tint rather than paper: a white card on a white band is invisible. Border,
   radius and padding are the shared card values, so it matches the feature,
   player and logic cards exactly.

   No hover lift here on purpose — these paragraphs carry no link, and a lift
   would imply they are clickable. */
#page-slot-machine-source-code .smsc-intro__cols p {
  counter-increment: smsc-intro;
  font-size: 16px; line-height: 1.72; color: var(--smsc-text-2);
  padding: clamp(22px, 2.2vw, 30px);
  background: var(--smsc-paper-2);
  border: 1px solid var(--smsc-line-l);
  border-radius: var(--smsc-r);
}
#page-slot-machine-source-code .smsc-intro__cols p::before {
  content: counter(smsc-intro, decimal-leading-zero);
  display: block; font-size: 14px; font-weight: 800; letter-spacing: .12em;
  color: var(--smsc-act);
  margin-bottom: 12px; padding-bottom: 12px;
  border-bottom: 1px solid var(--smsc-line-l);
}

/* ══════════════════════════════════════════════════════════════════════════
   MANIFESTO — a centred plate
   ══════════════════════════════════════════════════════════════════════════ */

#page-slot-machine-source-code .smsc-split {
  max-width: 860px; margin-inline: auto; text-align: center;
  padding: clamp(30px, 3.6vw, 52px) clamp(22px, 3vw, 44px);
  background: var(--smsc-paper); border: 1px solid var(--smsc-line-l); border-radius: var(--smsc-r);
}
#page-slot-machine-source-code .smsc-split h2 { font-size: clamp(28px, 3.4vw, 42px); margin-top: 14px; }
#page-slot-machine-source-code .smsc-split p { font-size: 17px; line-height: 1.7; color: var(--smsc-text-2); margin-top: 18px; }
#page-slot-machine-source-code .smsc-split__aside p { margin-bottom: 26px; }

/* ══════════════════════════════════════════════════════════════════════════
   SCREENSHOT MOSAIC — dense, uniform, no controls
   ══════════════════════════════════════════════════════════════════════════ */

#page-slot-machine-source-code .smsc-rail__top { margin-bottom: 32px; }
#page-slot-machine-source-code .smsc-rail__top h2 { font-size: clamp(28px, 3.2vw, 42px); margin-top: 12px; }
#page-slot-machine-source-code .smsc-rail {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.7vw, 21px);
}
#page-slot-machine-source-code .smsc-shot {
  border-radius: var(--smsc-r-s); overflow: hidden;
  background: var(--smsc-ink-3); border: 1px solid var(--smsc-line-d);
  transition: border-color .18s ease, transform .18s ease;
}
#page-slot-machine-source-code .smsc-shot:hover { border-color: var(--smsc-act-l); transform: translateY(-3px); }
#page-slot-machine-source-code .smsc-shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* ══════════════════════════════════════════════════════════════════════════
   SLOT TYPES — uniform image tiles
   ══════════════════════════════════════════════════════════════════════════ */

#page-slot-machine-source-code .smsc-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px); }
#page-slot-machine-source-code .smsc-type {
  background: var(--smsc-paper); border: 1px solid var(--smsc-line-l); border-radius: var(--smsc-r);
  overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
#page-slot-machine-source-code .smsc-type:hover { border-color: var(--smsc-act); box-shadow: 0 12px 30px rgba(23,25,30,.10); transform: translateY(-3px); }
#page-slot-machine-source-code .smsc-type img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--smsc-paper-3); }

/* ══════════════════════════════════════════════════════════════════════════
   SERVICES — a three-step timeline (the one set-piece worth keeping)
   ══════════════════════════════════════════════════════════════════════════ */

#page-slot-machine-source-code .smsc-services { position: relative; padding-left: clamp(30px, 3.4vw, 50px); }
#page-slot-machine-source-code .smsc-services::before {
  content: ""; position: absolute; left: 8px; top: 14px; bottom: 14px; width: 2px; background: var(--smsc-line-l);
}
#page-slot-machine-source-code .smsc-service { position: relative; display: block; padding-block: clamp(16px, 2vw, 24px); border: 0; }
#page-slot-machine-source-code .smsc-service::before {
  content: ""; position: absolute;
  left: calc(-1 * clamp(30px, 3.4vw, 50px) + 2px); top: clamp(22px, 2.6vw, 30px);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--smsc-paper-2); border: 3px solid var(--smsc-act);
}
#page-slot-machine-source-code .smsc-service__num { display: block; font-size: 14px; font-weight: 800; letter-spacing: .12em; color: var(--smsc-act); margin-bottom: 6px; }
#page-slot-machine-source-code .smsc-service h5 { font-size: 21px; margin-bottom: 10px; }
#page-slot-machine-source-code .smsc-service p { font-size: 16px; line-height: 1.7; color: var(--smsc-text-2); max-width: 76ch; }

/* ══════════════════════════════════════════════════════════════════════════
   PLAYER FEATURES — uniform cards on ink
   ══════════════════════════════════════════════════════════════════════════ */

#page-slot-machine-source-code .smsc-players {
  counter-reset: smsc-pl;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px);
}
#page-slot-machine-source-code .smsc-players > div {
  display: block;
  padding: clamp(22px, 2.2vw, 28px);
  background: var(--smsc-ink-2); border: 1px solid var(--smsc-line-d); border-radius: var(--smsc-r);
  transition: border-color .18s ease;
}
#page-slot-machine-source-code .smsc-players > div:hover { border-color: var(--smsc-act-l); }
#page-slot-machine-source-code .smsc-players h3 { font-size: 18px; margin-bottom: 10px; color: var(--smsc-on-ink); line-height: 1.3; }
#page-slot-machine-source-code .smsc-players h3::before {
  content: counter(smsc-pl, decimal-leading-zero); counter-increment: smsc-pl;
  display: block; font-size: 14px; font-weight: 800; letter-spacing: .12em;
  color: var(--smsc-act-l); margin-bottom: 8px;
}
#page-slot-machine-source-code .smsc-players p { font-size: 16px; line-height: 1.68; color: var(--smsc-on-ink-2); }

/* ══════════════════════════════════════════════════════════════════════════
   OFFERINGS — copy + chips beside the image
   ══════════════════════════════════════════════════════════════════════════ */

#page-slot-machine-source-code .smsc-offer {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 3.4vw, 56px); align-items: center;
}
#page-slot-machine-source-code .smsc-offer h2 { font-size: clamp(26px, 3vw, 40px); margin-top: 12px; }
#page-slot-machine-source-code .smsc-offer figure { margin: 0; border-radius: var(--smsc-r); overflow: hidden; }
#page-slot-machine-source-code .smsc-offer figure img { width: 100%; }
#page-slot-machine-source-code .smsc-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
#page-slot-machine-source-code .smsc-chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px;
  border-radius: var(--smsc-r-s); border: 1px solid var(--smsc-line-l); background: var(--smsc-paper);
  font-size: 15px; font-weight: 600; color: var(--smsc-text);
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
#page-slot-machine-source-code .smsc-chip:hover { background: var(--smsc-act); border-color: var(--smsc-act); color: #fff; }

/* ══════════════════════════════════════════════════════════════════════════
   MAIN FEATURES — twelve uniform cards.
   THIS is where the 58px-wide / 788px-tall paragraph bug lived: the card was a
   2-column grid holding three children, so <p> flowed into the numeral gutter.
   The card is now block flow. It cannot recur.
   ══════════════════════════════════════════════════════════════════════════ */

#page-slot-machine-source-code .smsc-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px); }
#page-slot-machine-source-code .smsc-feat {
  display: block;
  padding: clamp(22px, 2.2vw, 30px);
  background: var(--smsc-paper); border: 1px solid var(--smsc-line-l); border-radius: var(--smsc-r);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
#page-slot-machine-source-code .smsc-feat:hover { border-color: var(--smsc-act); box-shadow: 0 12px 30px rgba(23,25,30,.10); transform: translateY(-3px); }
#page-slot-machine-source-code .smsc-feat__num { display: block; font-size: 14px; font-weight: 800; letter-spacing: .12em; color: var(--smsc-act); margin-bottom: 12px; }
#page-slot-machine-source-code .smsc-feat h5 { font-size: 19px; margin-bottom: 10px; line-height: 1.3; }
#page-slot-machine-source-code .smsc-feat p { font-size: 16px; line-height: 1.68; color: var(--smsc-text-2); }

/* ══════════════════════════════════════════════════════════════════════════
   PLATFORM BAND — split on ink
   ══════════════════════════════════════════════════════════════════════════ */

/* Single column, button BELOW the copy. It was pinned to a second track with
   `grid-column: 2`, which parked it top-right, level with the eyebrow and
   detached from the sentence that earns the click. Block flow puts it after the
   paragraph, which is already its DOM order. */
#page-slot-machine-source-code .smsc-band {
  display: block; max-width: none; text-align: left;
}
#page-slot-machine-source-code .smsc-band h2 { font-size: clamp(26px, 3.2vw, 42px); margin-top: 12px; max-width: 22ch; }
#page-slot-machine-source-code .smsc-band p { font-size: 17px; line-height: 1.7; margin-top: 16px; max-width: 72ch; }
/* This band's copy is left-aligned, so the action sits on the same axis as the
   sentence that earns it rather than centred away from it. `margin-inline: 0`
   (not `auto`) is what pins it left while the button stays a block-level box of
   its own width. */
#page-slot-machine-source-code .smsc-band > .smsc-btn {
  margin-top: clamp(24px, 2.6vw, 32px);
  display: flex; width: fit-content; margin-inline: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   SOLUTIONS — checklist beside the image
   ══════════════════════════════════════════════════════════════════════════ */

#page-slot-machine-source-code .smsc-sol { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 3.4vw, 56px); align-items: start; }
#page-slot-machine-source-code .smsc-sol figure { margin: 0; border-radius: var(--smsc-r); overflow: hidden; border: 1px solid var(--smsc-line-l); background: var(--smsc-paper-2); }
#page-slot-machine-source-code .smsc-sol figure img { width: 100%; }
#page-slot-machine-source-code .smsc-sol h5 { font-size: 19px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 2px solid var(--smsc-line-l); }
#page-slot-machine-source-code .smsc-check { display: block; }
#page-slot-machine-source-code .smsc-check li {
  display: flex; gap: 12px; align-items: flex-start;
  padding-block: 10px; border-top: 1px solid var(--smsc-line-l);
  font-size: 16px; line-height: 1.6; color: var(--smsc-text-2);
}
#page-slot-machine-source-code .smsc-check li:first-child { border-top: 0; }
#page-slot-machine-source-code .smsc-check li img { width: 20px; height: 20px; margin-top: 2px; flex: none; }
#page-slot-machine-source-code .smsc-sol__close { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--smsc-line-l); font-size: 16px; line-height: 1.7; color: var(--smsc-text-2); }

/* ══════════════════════════════════════════════════════════════════════════
   LOGIC — intro then three uniform cards
   ══════════════════════════════════════════════════════════════════════════ */

#page-slot-machine-source-code .smsc-logic__intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 44px); margin-bottom: clamp(28px, 3.4vw, 44px); }
#page-slot-machine-source-code .smsc-logic__intro p { font-size: 16px; line-height: 1.72; color: var(--smsc-text-2); }
#page-slot-machine-source-code .smsc-logic__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(16px, 1.8vw, 24px); align-items: start; }
#page-slot-machine-source-code .smsc-logic__block {
  display: block;
  padding: clamp(22px, 2.2vw, 28px);
  background: var(--smsc-paper); border: 1px solid var(--smsc-line-l);
  border-top: 3px solid var(--smsc-act); border-radius: var(--smsc-r);
}
#page-slot-machine-source-code .smsc-logic__block h3 { font-size: 19px; margin-bottom: 14px; }
#page-slot-machine-source-code .smsc-logic__block li { padding-block: 9px; font-size: 15px; line-height: 1.6; color: var(--smsc-text-2); border-top: 1px solid var(--smsc-line-l); }
#page-slot-machine-source-code .smsc-logic__block li:first-child { border-top: 0; padding-top: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   DISCOVER — two panels, links in two columns each
   ══════════════════════════════════════════════════════════════════════════ */

#page-slot-machine-source-code .smsc-discover { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.4vw, 32px); align-items: start; }
#page-slot-machine-source-code .smsc-discover > div { padding: clamp(22px, 2.2vw, 30px); background: var(--smsc-paper); border: 1px solid var(--smsc-line-l); border-radius: var(--smsc-r); }
#page-slot-machine-source-code .smsc-discover h3 {
  font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--smsc-act); padding-bottom: 14px; margin-bottom: 4px; border-bottom: 2px solid var(--smsc-line-l);
}
#page-slot-machine-source-code .smsc-discover li { border-bottom: 1px solid var(--smsc-line-l); }
#page-slot-machine-source-code .smsc-discover li:last-child { border-bottom: 0; }
#page-slot-machine-source-code .smsc-discover li a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding-block: 11px; font-size: 15px; font-weight: 600; color: var(--smsc-text);
  transition: color .18s ease, padding-left .18s ease;
}
#page-slot-machine-source-code .smsc-discover li a::after { content: "→"; color: var(--smsc-act); opacity: 0; transition: opacity .18s ease; }
#page-slot-machine-source-code .smsc-discover li a:hover { color: var(--smsc-act); padding-left: 6px; }
#page-slot-machine-source-code .smsc-discover li a:hover::after { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════════
   FAQ — two columns of native <details>
   ══════════════════════════════════════════════════════════════════════════ */

#page-slot-machine-source-code .smsc-faq { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px clamp(16px, 2vw, 26px); align-items: start; }
#page-slot-machine-source-code .smsc-faq details { background: var(--smsc-paper); border: 1px solid var(--smsc-line-l); border-radius: var(--smsc-r-s); margin: 0; transition: border-color .18s ease; }
#page-slot-machine-source-code .smsc-faq details[open] { border-color: var(--smsc-act); }
#page-slot-machine-source-code .smsc-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; padding: 16px 20px; cursor: pointer; list-style: none; }
#page-slot-machine-source-code .smsc-faq summary::-webkit-details-marker { display: none; }
#page-slot-machine-source-code .smsc-faq summary h3 { font-size: 17px; font-weight: 700; line-height: 1.4; }
#page-slot-machine-source-code .smsc-faq summary::after {
  content: "+"; flex: none; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: var(--smsc-r-s);
  background: var(--smsc-paper-3); color: var(--smsc-act); font-size: 20px; font-weight: 700; line-height: 1;
  transition: background-color .18s ease, color .18s ease;
}
#page-slot-machine-source-code .smsc-faq details[open] summary::after { content: "−"; background: var(--smsc-act); color: #fff; }
#page-slot-machine-source-code .smsc-faq details > p { padding: 0 20px 18px; font-size: 16px; line-height: 1.7; color: var(--smsc-text-2); }

/* ══════════════════════════════════════════════════════════════════════════
   SUCCESS STORIES — three uniform cards, click-to-load facades
   ══════════════════════════════════════════════════════════════════════════ */

#page-slot-machine-source-code .smsc-stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px); align-items: stretch; }
#page-slot-machine-source-code .smsc-story { display: flex; flex-direction: column; background: var(--smsc-ink-2); border: 1px solid var(--smsc-line-d); border-radius: var(--smsc-r); overflow: hidden; }
#page-slot-machine-source-code .smsc-vid { position: relative; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; background: var(--smsc-ink-3); cursor: pointer; display: block; }
#page-slot-machine-source-code .smsc-vid img { width: 100%; height: 100%; object-fit: cover; }
#page-slot-machine-source-code .smsc-vid::after {
  content: "▶"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 26px; color: #fff; background: rgba(21,23,28,.45); transition: background-color .18s ease;
}
#page-slot-machine-source-code .smsc-vid:hover::after { background: rgba(21,23,28,.2); }
#page-slot-machine-source-code .smsc-story iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
#page-slot-machine-source-code .smsc-story blockquote { margin: 0; flex: 1 1 auto; padding: 20px 22px 14px; font-size: 16px; line-height: 1.68; color: var(--smsc-on-ink-2); }
#page-slot-machine-source-code .smsc-story figcaption { margin-top: auto; padding: 0 22px 20px; font-size: 15px; font-weight: 700; color: var(--smsc-act-l); }

/* ══════════════════════════════════════════════════════════════════════════
   AREA WE SERVE — four cells in a bordered strip
   ══════════════════════════════════════════════════════════════════════════ */

#page-slot-machine-source-code .smsc-areas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--smsc-line-d); border-radius: var(--smsc-r); overflow: hidden; }
#page-slot-machine-source-code .smsc-area { padding: clamp(20px, 2.2vw, 28px); border-left: 1px solid var(--smsc-line-d); background: rgba(255,255,255,.02); }
#page-slot-machine-source-code .smsc-area:first-child { border-left: 0; }
#page-slot-machine-source-code .smsc-area h3 { font-size: 14px; letter-spacing: .12em; margin-bottom: 12px; color: var(--smsc-act-l); }
#page-slot-machine-source-code .smsc-area a { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; font-weight: 700; color: var(--smsc-on-ink); transition: color .18s ease; }
#page-slot-machine-source-code .smsc-area a:hover { color: var(--smsc-act-l); }
#page-slot-machine-source-code .smsc-area address { font-style: normal; font-size: 15px; line-height: 1.65; color: var(--smsc-on-ink-2); }

/* ══════════════════════════════════════════════════════════════════════════
   FINAL CTA — copy left, action right
   ══════════════════════════════════════════════════════════════════════════ */

#page-slot-machine-source-code .smsc-final {
  max-width: none; text-align: left;
  display: block;
  padding: clamp(28px, 3.4vw, 48px) clamp(24px, 3vw, 48px);
  background: var(--smsc-paper); border: 1px solid var(--smsc-line-l); border-left: 5px solid var(--smsc-act);
  border-radius: var(--smsc-r);
}
/* Same correction: the action follows the copy instead of floating beside it. */
#page-slot-machine-source-code .smsc-final h2 { font-size: clamp(25px, 3vw, 38px); margin-top: 10px; max-width: 24ch; }
#page-slot-machine-source-code .smsc-final p { margin-top: 14px; max-width: 70ch; }
#page-slot-machine-source-code .smsc-final > .smsc-btn {
  margin-top: clamp(24px, 2.6vw, 32px);
  display: flex; width: fit-content; margin-inline: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   CTA MODAL — close control + iframe only (skill §14)
   ══════════════════════════════════════════════════════════════════════════ */

#page-slot-machine-source-code .smsc-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(12, 13, 17, .74);
}
#page-slot-machine-source-code .smsc-modal.open { display: flex; }
#page-slot-machine-source-code .smsc-modal__box {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--smsc-paper);
  border-radius: var(--smsc-r);
  padding: 52px 20px 20px;
}
#page-slot-machine-source-code .smsc-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--smsc-line-l);
  border-radius: 50%;
  background: var(--smsc-paper-2);
  color: var(--smsc-text);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
#page-slot-machine-source-code .smsc-modal__close:hover { background: var(--smsc-ink); color: var(--smsc-on-ink); }
#page-slot-machine-source-code .smsc-modal iframe {
  width: 100%;
  min-height: 860px;
  border: 0;
  display: block;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — recomposed, not shrunk
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  #page-slot-machine-source-code .smsc-rail { grid-template-columns: repeat(4, 1fr); }
  #page-slot-machine-source-code .smsc-rail > :nth-child(5n + 2),
  #page-slot-machine-source-code .smsc-rail > :nth-child(5n + 4) { margin-top: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — one collapse ladder, applied consistently.
   Any rule that pins a child to an explicit track MUST be reset when its grid
   collapses, or the explicit track is re-created and the child overflows.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  #page-slot-machine-source-code .smsc-logic__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  #page-slot-machine-source-code .smsc-feats,
  #page-slot-machine-source-code .smsc-players,
  #page-slot-machine-source-code .smsc-types,
  #page-slot-machine-source-code .smsc-stories,
  #page-slot-machine-source-code .smsc-intro__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #page-slot-machine-source-code .smsc-offer,
  #page-slot-machine-source-code .smsc-sol { grid-template-columns: 1fr; }
  #page-slot-machine-source-code .smsc-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #page-slot-machine-source-code .smsc-area:nth-child(3) { border-left: 0; }
  #page-slot-machine-source-code .smsc-area:nth-child(n + 3) { border-top: 1px solid var(--smsc-line-d); }

  /* collapse + reset the pinned children together */

}

@media (max-width: 860px) {
  #page-slot-machine-source-code .smsc-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #page-slot-machine-source-code .smsc-discover,
  #page-slot-machine-source-code .smsc-faq,
  #page-slot-machine-source-code .smsc-logic__intro,
  #page-slot-machine-source-code .smsc-logic__grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  #page-slot-machine-source-code .smsc-wrap { padding-inline: 18px; }
  #page-slot-machine-source-code .smsc-feats,
  #page-slot-machine-source-code .smsc-players,
  #page-slot-machine-source-code .smsc-types,
  #page-slot-machine-source-code .smsc-stories,
  #page-slot-machine-source-code .smsc-intro__cols,
  #page-slot-machine-source-code .smsc-areas { grid-template-columns: 1fr; }
  #page-slot-machine-source-code .smsc-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #page-slot-machine-source-code .smsc-area { border-left: 0; }
  #page-slot-machine-source-code .smsc-area:nth-child(n + 2) { border-top: 1px solid var(--smsc-line-d); }
  #page-slot-machine-source-code .smsc-hero__trust { grid-template-columns: 1fr; }
  #page-slot-machine-source-code .smsc-hero__trust li { border-left: 0; border-top: 1px solid var(--smsc-line-d); }
  #page-slot-machine-source-code .smsc-hero__trust li:first-child { border-top: 0; }
  #page-slot-machine-source-code .smsc-services { padding-left: 24px; }
  #page-slot-machine-source-code .smsc-service::before { left: -22px; }
  #page-slot-machine-source-code .smsc-btn { width: 100%; }
  #page-slot-machine-source-code .smsc-modal__box { padding: 48px 12px 12px; }
  #page-slot-machine-source-code .smsc-modal iframe { min-height: 900px; }
}

}

/* Rule 26 — honour the OS-level reduced-motion preference for what remains. */
@media (prefers-reduced-motion: reduce) {
  #page-slot-machine-source-code *,
  #page-slot-machine-source-code *::before,
  #page-slot-machine-source-code *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}