/* ══════════════════════════════════════════════════════════════════════════
   /igaming-tracking-solution — page-isolated stylesheet
   AISHTMLNEWDESIGN-568  (meta + JSON-LD from AISHTMLNEWDESIGN-201)

   Visual direction: "SIGNAL YARD".

   The page's own argument is the design brief. The record opens on a specific
   complaint — "affiliate numbers are in one place, player activity somewhere
   else, campaign results in a third tool, nothing talks to each other" — and
   the product is the thing that sorts all of it onto one line. That is a
   marshalling yard, not a dashboard, so the page is built as one:

     · TRACE RAIL  — a single 2px rule that runs down the left of the content
                     bands, with every item hung off it as a node. It is the
                     page's one repeating motif and it carries the argument:
                     scattered inputs, one line.
     · CONCRETE    — a cool concrete ground (#eef1f4) is the DOMINANT surface,
                     with true paper plates on top. Deep petrol (#0f1b21) is
                     punctuation for exactly three bands, never the ground.
     · ONE SIGNAL  — deep cyan (#0e7490) is the only hue that carries an action.
                     Rust (#c2410c) appears ONLY as small index numerals and
                     never as a surface or a button.

   Sibling avoidance: the three neighbouring iGaming pages in this repo are
   /igaming-platform-software-provider (THE OPERATING FLOOR, amber),
   /igaming-software-development-company (THE LOBBY, magenta) and
   /best-igaming-platform-software-provider (VELVET & BRASS, gold on plum).
   A cool signal palette is legible as a different page at a glance, which is
   the point of rule 6 — none of the three shares a hue family with this one.

   Composition: no two sections repeat a layout. Asymmetric prose+figure split,
   a dark statement band, a 12-node signal rail, a numbered custody ladder, a
   four-track set, a credentials card grid, a two-column reference set, a
   single-column essay, an accordion, a facade row and a regional strip.
   There is deliberately no three-up icon-card grid anywhere.

   Every rule is scoped to #page-igaming-tracking-solution, so this file can
   never touch the shared header/footer, 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 (#35424d floor)
     · rule 24 — image-free full-bleed hero, static gradient, centred column
     · rule 25 — one CTA per section, every label unique page-wide
                 (hero "Book a Demo" / collaborate "Start Your Tracking
                 Journey" / hire "iGaming Software Provider" — three, all
                 distinct. The TRY OUR DEMO buttons are app-store and demo
                 destinations, not conversion CTAs, and carry no btn/cta class.)
     · rule 26 — no running animation: zero @keyframes, zero 'infinite',
                 transitions only, each a finite response to hover/focus/click
     · rule 39A — every element that paints a background owns its foreground
                 on a tag-qualified selector, never via !important
   ══════════════════════════════════════════════════════════════════════════ */

#page-igaming-tracking-solution{
  /* ── palette ─────────────────────────────────────────────────────────── */
  --sy-ink:        #0f1b21;   /* deep petrol — band punctuation only        */
  --sy-ink-2:      #16272f;   /* raised plate on the dark bands             */
  --sy-ground:     #eef1f4;   /* cool concrete — the page's dominant ground */
  --sy-paper:      #ffffff;
  --sy-signal:     #0e7490;   /* the ONLY action hue                        */
  --sy-signal-lit: #0891b2;
  --sy-hazard:     #c2410c;   /* index numerals only, never a surface       */
  --sy-text:       #16212a;
  --sy-text-2:     #35424d;   /* 8.3:1 on concrete — rule 23 floor          */
  --sy-on-dark:    #e8eef1;
  --sy-on-dark-2:  #a9bcc4;   /* 8.6:1 on petrol                            */
  --sy-line:       #cbd5dd;
  --sy-line-dark:  #24373f;

  --sy-wrap: 1200px;
  --sy-rail: 2px;

  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--sy-text);
  background: var(--sy-ground);
  -webkit-font-smoothing: antialiased;
}

#page-igaming-tracking-solution *,
#page-igaming-tracking-solution *::before,
#page-igaming-tracking-solution *::after{ box-sizing: border-box; }

#page-igaming-tracking-solution .its-wrap{
  max-width: var(--sy-wrap);
  margin-inline: auto;
  padding-inline: 24px;
}

#page-igaming-tracking-solution section{
  padding-block: clamp(56px, 6vw, 96px);
}

#page-igaming-tracking-solution h1,
#page-igaming-tracking-solution h2,
#page-igaming-tracking-solution h3,
#page-igaming-tracking-solution h4{
  margin: 0 0 .5em;
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 800;
  color: var(--sy-text);
}
#page-igaming-tracking-solution h2{ font-size: clamp(30px, 3.4vw, 46px); }
#page-igaming-tracking-solution h3{ font-size: clamp(20px, 1.6vw, 24px); font-weight: 700; }
#page-igaming-tracking-solution h4{ font-size: clamp(22px, 2vw, 28px); }
#page-igaming-tracking-solution p{
  margin: 0 0 1.1em;
  font-size: 17px;
  color: var(--sy-text-2);
}
#page-igaming-tracking-solution p:last-child{ margin-bottom: 0; }
#page-igaming-tracking-solution ul,
#page-igaming-tracking-solution ol{ margin: 0; padding: 0; list-style: none; }
#page-igaming-tracking-solution img{ max-width: 100%; height: auto; display: block; }

/* The opening paragraph of a section. It reads as a lede through INK WEIGHT
   only -- not through a larger type size. Operator 2026-09-07: every paragraph
   on the page is the same size, so a section cannot look like two typefaces. */
#page-igaming-tracking-solution .its-lead{
  font-size: 17px;
  color: var(--sy-text);
  line-height: 1.65;
}

/* inline text link — the section's SECOND destination, per skill §13.
   Deliberately not a button: rule 25 allows one CTA per section only. */
#page-igaming-tracking-solution a.its-inline{
  color: var(--sy-signal);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
#page-igaming-tracking-solution a.its-inline:hover,
#page-igaming-tracking-solution a.its-inline:focus-visible{ color: var(--sy-signal-lit); }

/* ── the one button ──────────────────────────────────────────────────── */
#page-igaming-tracking-solution .its-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 30px;
  border: 0;
  border-radius: 4px;
  background: var(--sy-signal);
  color: #ffffff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background-color .16s ease, transform .16s ease;
}
#page-igaming-tracking-solution .its-btn::after{
  content: "";
  width: 18px; height: 2px;
  background: currentColor;
  flex: none;
  transition: width .16s ease;
}
#page-igaming-tracking-solution .its-btn:hover{ background: var(--sy-signal-lit); }
#page-igaming-tracking-solution .its-btn:hover::after{ width: 26px; }
#page-igaming-tracking-solution .its-btn:active{ transform: translateY(1px); }
#page-igaming-tracking-solution .its-btn:focus-visible{
  outline: 3px solid var(--sy-signal-lit);
  outline-offset: 3px;
}
#page-igaming-tracking-solution .its-btn--lit{ background: #ffffff; color: var(--sy-ink); }
#page-igaming-tracking-solution .its-btn--lit:hover{ background: #d9eef4; }

/* ══ HERO — rule 24: full-bleed, static gradient, no image, one CTA ══════ */
#page-igaming-tracking-solution .its-hero{
  width: 100%;
  padding: clamp(72px, 8vw, 124px) 24px clamp(64px, 7vw, 104px);
  background:
    linear-gradient(180deg, #0f1b21 0%, #123039 62%, #0e2b34 100%);
  border-bottom: var(--sy-rail) solid var(--sy-signal);
}
#page-igaming-tracking-solution .its-hero__inner{
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}
#page-igaming-tracking-solution p.its-eyebrow{
  display: inline-block;
  margin: 0 0 22px;
  padding: 7px 16px;
  border: 1px solid #2f5a66;
  border-radius: 3px;
  background: #0c252d;
  color: #7fd4e8;                       /* rule 39A: tag-qualified, owns its fg */
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
#page-igaming-tracking-solution .its-hero h1{
  margin: 0 0 22px;
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 900;
  line-height: 1.06;
  color: #ffffff;
}
#page-igaming-tracking-solution p.its-hero__lede{
  margin: 0 auto 34px;
  max-width: 780px;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.65;
  color: var(--sy-on-dark);
}
#page-igaming-tracking-solution .its-hero__trust{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 30px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--sy-line-dark);
}
#page-igaming-tracking-solution .its-hero__trust li{
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  font-weight: 500;
  color: var(--sy-on-dark-2);
}
#page-igaming-tracking-solution .its-hero__trust li::before{
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 12px; height: 2px;
  background: var(--sy-signal-lit);
}

/* ══ BREADCRUMB ═════════════════════════════════════════════════════════ */
#page-igaming-tracking-solution .its-crumb{
  padding-block: 16px;
  background: var(--sy-paper);
  border-bottom: 1px solid var(--sy-line);
}
#page-igaming-tracking-solution .its-crumb ol{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#page-igaming-tracking-solution .its-crumb li{ font-size: 16px; color: var(--sy-text-2); }
#page-igaming-tracking-solution .its-crumb li + li::before{ content: "/"; margin-right: 10px; color: var(--sy-line); }
#page-igaming-tracking-solution .its-crumb a{ display: inline-flex; align-items: center; gap: 8px; color: var(--sy-signal); font-weight: 600; }
#page-igaming-tracking-solution .its-crumb a:hover{ color: var(--sy-signal-lit); }
#page-igaming-tracking-solution .its-crumb img{ width: 16px; height: 16px; }

/* ══ PROBLEM — asymmetric prose + figure, prose hung off the rail ════════ */
#page-igaming-tracking-solution .its-problem{ background: var(--sy-ground); }
#page-igaming-tracking-solution .its-problem__grid{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
#page-igaming-tracking-solution .its-problem__copy{
  padding-left: 28px;
  border-left: var(--sy-rail) solid var(--sy-signal);
}
#page-igaming-tracking-solution .its-problem__fig{ margin: 0; }
#page-igaming-tracking-solution .its-problem__fig img{
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--sy-line);
  background: var(--sy-paper);
}

/* ══ COLLABORATE — dark statement band ══════════════════════════════════ */
#page-igaming-tracking-solution .its-collab{
  background: var(--sy-ink);
  border-top: var(--sy-rail) solid var(--sy-signal);
  border-bottom: var(--sy-rail) solid var(--sy-signal);
}
#page-igaming-tracking-solution .its-collab__inner{ max-width: 900px; text-align: center; }
#page-igaming-tracking-solution .its-collab h2{ color: #ffffff; }
#page-igaming-tracking-solution .its-collab p{
  margin-bottom: 30px;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 500;
  color: var(--sy-on-dark);
}

/* ══ FEATURES — the 12-node signal rail ═════════════════════════════════ */
#page-igaming-tracking-solution .its-features{ background: var(--sy-paper); }
#page-igaming-tracking-solution .its-features__intro{
  max-width: 900px;
  margin-bottom: clamp(36px, 4vw, 56px);
}
#page-igaming-tracking-solution .its-sig{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 0;
  border-top: 1px solid var(--sy-line);
  border-left: 1px solid var(--sy-line);
}
#page-igaming-tracking-solution .its-sig__pt{
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 108px;
  padding: 22px 24px;
  border-right: 1px solid var(--sy-line);
  border-bottom: 1px solid var(--sy-line);
  background: var(--sy-paper);
  transition: background-color .16s ease, box-shadow .16s ease;
}
#page-igaming-tracking-solution .its-sig__pt:hover{
  background: #f6fbfc;
  box-shadow: inset var(--sy-rail) 0 0 0 var(--sy-signal);
}
#page-igaming-tracking-solution .its-sig__pt img{ width: 44px; height: 44px; flex: none; }
#page-igaming-tracking-solution .its-sig__pt h3{
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
}

/* ══ HIRE — mirrored asymmetric split ═══════════════════════════════════ */
#page-igaming-tracking-solution .its-hire{ background: var(--sy-ground); }
#page-igaming-tracking-solution .its-hire__grid{
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
#page-igaming-tracking-solution .its-hire__fig{ margin: 0; order: -1; }
#page-igaming-tracking-solution .its-hire__fig img{
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--sy-line);
}
#page-igaming-tracking-solution .its-hire__copy p{ margin-bottom: 28px; }

/* ══ SCREENSHOTS — offset rail, alternate plates dropped ════════════════ */
#page-igaming-tracking-solution .its-shots{
  background: var(--sy-ink);
  border-top: var(--sy-rail) solid var(--sy-signal);
}
#page-igaming-tracking-solution .its-shots h2{
  color: #ffffff;
  margin-bottom: clamp(32px, 4vw, 52px);
}
/* Six screenshots on a fixed 3-column grid rather than auto-fit. auto-fit
   resolved to 4 columns at 1200px, leaving a ragged 4+2 last row; a fixed 3
   gives two even rows of three. One gap value drives BOTH axes, so the
   distance between any two neighbouring images is identical. */
#page-igaming-tracking-solution .its-shots__rail{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}
#page-igaming-tracking-solution .its-shots__rail li{
  border: 1px solid var(--sy-line-dark);
  border-radius: 6px;
  overflow: hidden;
  background: var(--sy-ink-2);
  transition: border-color .16s ease;
}
#page-igaming-tracking-solution .its-shots__rail li:hover{ border-color: var(--sy-signal); }
#page-igaming-tracking-solution .its-shots__rail img{ width: 100%; }

/* ══ ADMIN PANEL — numbered custody ladder on the rail ══════════════════ */
#page-igaming-tracking-solution .its-admin{ background: var(--sy-paper); }
#page-igaming-tracking-solution .its-tags{
  counter-reset: sy-tag;
  max-width: 940px;
  margin-top: clamp(28px, 3vw, 44px);
  border-left: var(--sy-rail) solid var(--sy-line);
}
#page-igaming-tracking-solution .its-tags li{
  counter-increment: sy-tag;
  position: relative;
  padding: 0 0 34px 34px;
}
#page-igaming-tracking-solution .its-tags li:last-child{ padding-bottom: 0; }
#page-igaming-tracking-solution .its-tags li::before{
  content: counter(sy-tag, decimal-leading-zero);
  position: absolute;
  left: -25px; top: 0;
  display: grid;
  place-items: center;
  width: 46px; height: 30px;
  border: 1px solid var(--sy-line);
  border-radius: 3px;
  background: var(--sy-paper);
  color: var(--sy-hazard);            /* index numeral — the only rust on the page */
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
#page-igaming-tracking-solution .its-tags h3{ margin: 2px 0 8px; }
#page-igaming-tracking-solution .its-tags p{ margin: 0; }

/* ══ PLATFORM TYPES — four converging tracks ════════════════════════════ */
#page-igaming-tracking-solution .its-plat{ background: var(--sy-ground); }
#page-igaming-tracking-solution .its-plat__set{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-top: clamp(28px, 3vw, 44px);
}
#page-igaming-tracking-solution .its-plat__track{
  padding: 30px 30px 30px 28px;
  background: var(--sy-paper);
  border: 1px solid var(--sy-line);
  border-left: var(--sy-rail) solid var(--sy-signal);
  border-radius: 0 6px 6px 0;
  transition: box-shadow .16s ease;
}
#page-igaming-tracking-solution .its-plat__track:hover{ box-shadow: 0 8px 26px rgba(15,27,33,.10); }
#page-igaming-tracking-solution .its-plat__track h3{ margin-bottom: 12px; }
#page-igaming-tracking-solution .its-plat__track p{ margin: 0; }

/* ══ TRY OUR DEMO — credentials cards ═══════════════════════════════════ */
#page-igaming-tracking-solution .its-demo{ background: var(--sy-paper); }
#page-igaming-tracking-solution .its-demo h2{ margin-bottom: clamp(28px, 3vw, 44px); }
#page-igaming-tracking-solution .its-demo__set{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 22px;
}
#page-igaming-tracking-solution .its-demo__card{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 24px;
  background: var(--sy-ground);
  border: 1px solid var(--sy-line);
  border-radius: 6px;
}
#page-igaming-tracking-solution .its-demo__card img{ width: 52px; height: 52px; }
#page-igaming-tracking-solution .its-demo__card h3{ margin: 0; font-size: 19px; }
#page-igaming-tracking-solution .its-demo__card dl{ margin: 0; flex: 1 1 auto; }
#page-igaming-tracking-solution .its-demo__card dt{
  font-size: 16px;
  font-weight: 600;
  color: var(--sy-text-2);
}
#page-igaming-tracking-solution .its-demo__card dd{
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--sy-text);
  word-break: break-word;
  font-variant-numeric: tabular-nums;
}
#page-igaming-tracking-solution .its-demo__card dd:last-child{ margin-bottom: 0; }
/* app-store / demo destinations — deliberately NOT the page's conversion CTA,
   so no btn/cta class (rule 25 counts those). Still a full 44px target. */
#page-igaming-tracking-solution a.its-demo__go{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 20px;
  border: 1.5px solid var(--sy-signal);
  border-radius: 4px;
  background: var(--sy-paper);
  color: var(--sy-signal);
  font-size: 16px;
  font-weight: 700;
  transition: background-color .16s ease, color .16s ease;
}
#page-igaming-tracking-solution a.its-demo__go:hover,
#page-igaming-tracking-solution a.its-demo__go:focus-visible{
  background: var(--sy-signal);
  color: #ffffff;
}

/* ══ TRUST — dark band, prose + checklist + figure ══════════════════════ */
#page-igaming-tracking-solution .its-trust{
  background: var(--sy-ink);
  border-top: var(--sy-rail) solid var(--sy-signal);
  border-bottom: var(--sy-rail) solid var(--sy-signal);
}
#page-igaming-tracking-solution .its-trust__grid{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(32px, 5vw, 68px);
  align-items: start;
}
#page-igaming-tracking-solution .its-trust h2{ color: #ffffff; }
#page-igaming-tracking-solution .its-trust p{ color: var(--sy-on-dark); }
#page-igaming-tracking-solution .its-trust__list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px 26px;
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--sy-line-dark);
}
#page-igaming-tracking-solution .its-trust__list li{
  position: relative;
  padding-left: 30px;
  font-size: 17px;
  font-weight: 600;
  color: var(--sy-on-dark);
}
#page-igaming-tracking-solution .its-trust__list li::before{
  content: "";
  position: absolute;
  left: 0; top: .45em;
  width: 16px; height: 8px;
  border-left: 2px solid var(--sy-signal-lit);
  border-bottom: 2px solid var(--sy-signal-lit);
  transform: rotate(-45deg);
}
#page-igaming-tracking-solution .its-trust__fig{ margin: 0; }
#page-igaming-tracking-solution .its-trust__fig img{
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--sy-line-dark);
}

/* ══ KNOW MORE — two-column reference set ═══════════════════════════════ */
#page-igaming-tracking-solution .its-know{ background: var(--sy-ground); }
#page-igaming-tracking-solution .its-know .its-lead{ max-width: 940px; }
#page-igaming-tracking-solution .its-know__set{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1px;
  margin-top: clamp(30px, 3vw, 48px);
  background: var(--sy-line);
  border: 1px solid var(--sy-line);
}
#page-igaming-tracking-solution .its-know__set article{
  padding: 30px;
  background: var(--sy-paper);
}
#page-igaming-tracking-solution .its-know__set h3{
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: var(--sy-rail) solid var(--sy-signal);
  display: inline-block;
}
#page-igaming-tracking-solution .its-know__set p{ margin: 0; }

/* ══ GROWTH — single-column essay ═══════════════════════════════════════ */
#page-igaming-tracking-solution .its-growth{ background: var(--sy-paper); }
#page-igaming-tracking-solution .its-growth__col{ max-width: 900px; }
/* was 18px -- folded into the single 17px paragraph size (operator, 2026-09-07) */

/* ══ FAQ — numbered Q/Ans. ledger ═══════════════════════════════════════
   Operator 2026-09-07: number every question and label every answer "Ans.",
   with the two markers sharing ONE gutter so they sit on a single vertical
   axis down the whole list.

   Both markers are generated content, not markup: the page text stays exactly
   the preservation record's wording, and the numbering renumbers itself if a
   question is ever added or removed. The gutter width is a variable used by
   both rules -- the alignment cannot drift because there is only one number
   to change. */
#page-igaming-tracking-solution .its-faq{
  background: var(--sy-ground);
  --sy-faq-gutter: 68px;          /* ONE source of truth for the Q/Ans. axis */
}
#page-igaming-tracking-solution .its-faq__col{ max-width: 940px; }
#page-igaming-tracking-solution #its-faqlist{
  counter-reset: sy-faq;
  margin-top: clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--sy-line);
}
#page-igaming-tracking-solution #its-faqlist details{
  counter-increment: sy-faq;
  border-bottom: 1px solid var(--sy-line);
  background: var(--sy-paper);
}
#page-igaming-tracking-solution #its-faqlist summary{
  display: grid;
  grid-template-columns: var(--sy-faq-gutter) 1fr auto;
  align-items: start;
  gap: 0 12px;
  padding: 22px 24px;
  cursor: pointer;
  list-style: none;
  transition: background-color .16s ease;
}
#page-igaming-tracking-solution #its-faqlist summary::-webkit-details-marker{ display: none; }
#page-igaming-tracking-solution #its-faqlist summary:hover{ background: #f6fbfc; }
#page-igaming-tracking-solution #its-faqlist summary:focus-visible{
  outline: 3px solid var(--sy-signal-lit);
  outline-offset: -3px;
}
/* Q marker — column 1, same column the Ans. marker uses below */
#page-igaming-tracking-solution #its-faqlist summary::before{
  content: "Q" counter(sy-faq) ".";   /* Q1. Q2. ... -- operator 2026-09-07, no leading zero */
  font-size: 17px;
  font-weight: 800;
  line-height: 1.45;
  color: var(--sy-signal);
  font-variant-numeric: tabular-nums;
}
#page-igaming-tracking-solution #its-faqlist summary h3{
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
}
#page-igaming-tracking-solution #its-faqlist summary::after{
  content: "";
  width: 14px; height: 14px;
  margin-top: 6px;
  border-right: var(--sy-rail) solid var(--sy-signal);
  border-bottom: var(--sy-rail) solid var(--sy-signal);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
#page-igaming-tracking-solution #its-faqlist details[open] summary::after{
  transform: rotate(-135deg);
  margin-top: 11px;
}
/* answer — same grid, so "Ans." lands in the same column as "Qnn." */
#page-igaming-tracking-solution .its-faq__a{
  display: grid;
  grid-template-columns: var(--sy-faq-gutter) 1fr;
  gap: 0 12px;
  padding: 0 24px 24px;
}
#page-igaming-tracking-solution .its-faq__a::before{
  content: "Ans.";
  font-size: 17px;
  font-weight: 800;
  line-height: 1.65;
  color: var(--sy-text-2);
}
#page-igaming-tracking-solution .its-faq__a p{ margin: 0; }

/* ══ CUSTOMER SUCCESS STORIES — facades ═════════════════════════════════ */
#page-igaming-tracking-solution .its-stories{ background: var(--sy-paper); }
#page-igaming-tracking-solution .its-stories h4{ margin-bottom: clamp(26px, 3vw, 40px); }
#page-igaming-tracking-solution .its-stories__set{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
}
#page-igaming-tracking-solution .its-stories__set li{
  display: flex;
  flex-direction: column;
  gap: 18px;
}
#page-igaming-tracking-solution button.its-vid{
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--sy-line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--sy-ink);
  color: #ffffff;
  cursor: pointer;
  transition: border-color .16s ease;
}
#page-igaming-tracking-solution button.its-vid:hover{ border-color: var(--sy-signal); }
#page-igaming-tracking-solution button.its-vid:focus-visible{
  outline: 3px solid var(--sy-signal-lit);
  outline-offset: 3px;
}
#page-igaming-tracking-solution button.its-vid img{ width: 100%; }
#page-igaming-tracking-solution .its-vid__play{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  padding-left: 5px;
  border-radius: 50%;
  background: rgba(14,116,144,.94);
  color: #ffffff;
  transition: background-color .16s ease;
}
#page-igaming-tracking-solution button.its-vid:hover .its-vid__play{ background: var(--sy-signal-lit); }
#page-igaming-tracking-solution .its-story__frame{
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--sy-line);
  border-radius: 6px;
}
#page-igaming-tracking-solution .its-stories blockquote{
  margin: 0;
  padding-left: 20px;
  border-left: var(--sy-rail) solid var(--sy-signal);
}
#page-igaming-tracking-solution .its-stories blockquote p{ margin: 0; font-size: 17px; }
#page-igaming-tracking-solution .its-stories__more{ margin-top: 30px; }

/* ══ AREA WE SERVE — regional strip (page content, not the shared footer) ═ */
#page-igaming-tracking-solution .its-areas{
  background: var(--sy-ink);
  border-top: var(--sy-rail) solid var(--sy-signal);
}
#page-igaming-tracking-solution .its-areas h2{ color: #ffffff; margin-bottom: clamp(26px, 3vw, 42px); }
#page-igaming-tracking-solution .its-areas__set{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 26px;
}
#page-igaming-tracking-solution .its-areas__set li{
  padding: 24px 22px;
  background: var(--sy-ink-2);
  border: 1px solid var(--sy-line-dark);
  border-top: var(--sy-rail) solid var(--sy-signal);
  border-radius: 0 0 6px 6px;
}
#page-igaming-tracking-solution .its-areas__set h3{
  margin-bottom: 14px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--sy-on-dark-2);
}
#page-igaming-tracking-solution p.its-areas__tel{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
#page-igaming-tracking-solution .its-areas__tel img{ width: 18px; height: 18px; flex: none; }
#page-igaming-tracking-solution .its-areas__tel a{
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
}
#page-igaming-tracking-solution .its-areas__tel a:hover{ color: #7fd4e8; }
#page-igaming-tracking-solution .its-areas address{
  font-style: normal;
  font-size: 16px;
  line-height: 1.6;
  color: var(--sy-on-dark-2);
}

/* ══ RESPONSIVE ═════════════════════════════════════════════════════════ */
@media (max-width: 1024px){
  /* the shots grid is a FIXED 3 columns (for even rows), so it must be stepped
     down by hand -- it cannot collapse itself the way auto-fit did */
  #page-igaming-tracking-solution .its-shots__rail{ grid-template-columns: repeat(2, 1fr); }
  #page-igaming-tracking-solution .its-problem__grid,
  #page-igaming-tracking-solution .its-hire__grid,
  #page-igaming-tracking-solution .its-trust__grid{ grid-template-columns: 1fr; }
  #page-igaming-tracking-solution .its-hire__fig{ order: 0; }
}

@media (max-width: 768px){
  #page-igaming-tracking-solution .its-shots__rail{ grid-template-columns: 1fr; }
  #page-igaming-tracking-solution section{ padding-block: clamp(44px, 9vw, 64px); }
  #page-igaming-tracking-solution .its-wrap{ padding-inline: 18px; }
  #page-igaming-tracking-solution .its-sig{ grid-template-columns: 1fr; }
  #page-igaming-tracking-solution .its-know__set{ grid-template-columns: 1fr; }}

@media (max-width: 480px){
  #page-igaming-tracking-solution .its-hero{ padding-inline: 18px; }
  #page-igaming-tracking-solution .its-btn{ width: 100%; justify-content: center; }
  #page-igaming-tracking-solution .its-hero__trust{ justify-content: flex-start; text-align: left; }
  #page-igaming-tracking-solution .its-problem__copy{ padding-left: 18px; }
  #page-igaming-tracking-solution .its-tags{ margin-left: 12px; }
  #page-igaming-tracking-solution .its-tags li{ padding-left: 26px; }
  #page-igaming-tracking-solution .its-tags li::before{ left: -24px; width: 42px; }
  #page-igaming-tracking-solution .its-faq{ --sy-faq-gutter: 54px; }
  #page-igaming-tracking-solution #its-faqlist summary{ padding: 18px 16px; gap: 0 8px; }
  #page-igaming-tracking-solution .its-faq__a{ padding: 0 16px 20px; gap: 0 8px; }
  #page-igaming-tracking-solution .its-know__set article,
  #page-igaming-tracking-solution .its-plat__track{ padding: 22px 18px; }
  #page-igaming-tracking-solution a.its-demo__go{ width: 100%; }}

/* Rule 26 — the only motion here is a finite response to hover/focus/click.
   Honour the user's stated preference anyway. */
@media (prefers-reduced-motion: reduce){
  #page-igaming-tracking-solution *,
  #page-igaming-tracking-solution *::before,
  #page-igaming-tracking-solution *::after{
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── CTA modal — shared shell, identical on every CTA page ──────────────────
   Replicated from /case-study/dicemasters-backgammon-platform-case-study.
   Values were read off that page with design-clone's extract_design.py; do not
   re-tune them per page — the enquiry form must present the same on all URLs. */
#page-igaming-tracking-solution .its-modal{
  color:#2c2419;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.72;
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding: 100px 20px 20px 20px;
  overflow-y:auto;
  background:rgba(20,13,7,.72);
}
#page-igaming-tracking-solution .its-modal.is-open{display:flex;}
#page-igaming-tracking-solution .its-modal__box{
  /* Pinned so the panel does not inherit each page's own type scale or ink —
     the enquiry shell must present identically on every URL. */
  color:#2c2419;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.72;
  position:relative;
  width:100%;
  max-width:620px;
  margin:auto;
  border-radius:16px;
  background:#fff;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7);
  /* hidden, not auto: this clips the embedded form's square-cornered white
     document to the panel radius, so all FOUR corners stay rounded. */
  overflow:hidden;
}
#page-igaming-tracking-solution .its-modal__x{
  position:absolute;
  top:12px;right:12px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  border:1px solid #ddd2ba;
  border-radius:50%;
  background:#fff;
  color:#1d1509;
  cursor:pointer;
  transition:background-color .16s ease,color .16s ease;
}
#page-igaming-tracking-solution .its-modal__x:hover{background:#2b1c12;color:#fbf6ec;}
#page-igaming-tracking-solution .its-modal iframe{
  display:block;
  width:100%;
  min-height:860px;
  border:0;
}
@media (max-width:640px){
  /* Keep the radius on phones too — the panel is a card at every width. */
  #page-igaming-tracking-solution .its-modal{padding: 100px 12px 12px 12px;}
  #page-igaming-tracking-solution .its-modal__box{max-width:none;border-radius:14px;}
}