/* /bingo-software — AISHTMLNEWDESIGN-443
   Page-owned styles. EVERY selector is scoped to #page-bingo-software or a
   bs- prefixed class: this sheet must never style body, a bare
   element, #ais-header or #ais-footer. The document reset
   (html,body{margin:0}) is owned by the shared layout sheet.
   Font is Inter; no body/UI text below 16px.

   ── BROADSHEET ──────────────────────────────────────────────────────────────
   Newsprint ground, near-black editorial type, deep-felt-green accent, hairline
   and double rules. Motif: the broadsheet page — small-caps kickers, numbered
   column heads, drop caps, tabular blocks, squared corners.

   Deliberately the inverse of the previous DAUBER INK treatment on every axis:
   light ground not dark, green not magenta, 2px corners not 999px pills, ruled
   columns not circular blots, flat bordered blocks not drop-shadowed cards.
   The audience is a casino operator buying software, so this reads as a trade
   publication rather than a game skin.
   ───────────────────────────────────────────────────────────────────────────── */

#page-bingo-software{
  --bs-ink:#0f141b;            /* near-black — headline ink */
  --bs-ink-2:#1c2430;
  --bs-paper:#ffffff;
  --bs-news:#f5f2ea;           /* newsprint */
  --bs-news-2:#ece7db;
  --bs-rule:#dcd4c4;           /* hairline rule */
  --bs-rule-2:#c3b9a4;
  --bs-accent:#0b5d4e;         /* deep felt green */
  --bs-accent-lt:#0f7a66;
  --bs-ochre:#a8762c;          /* secondary mark */
  --bs-text:#12181f;           /* body on light — 14.8:1 */
  --bs-text-2:#3a4550;         /* supporting on light — 8.9:1, never #64748b */
  --bs-on-ink:#f4f1e9;
  --bs-on-ink-2:#c8cdd4;
  --bs-r:3px;                  /* squared, not pill */
  --bs-wrap:1220px;

  font-family:"Inter",system-ui,sans-serif;
  font-size:16px;
  line-height:1.62;
  color:var(--bs-text);
  background:var(--bs-paper);
  overflow-x:hidden;
}

#page-bingo-software *,
#page-bingo-software *::before,
#page-bingo-software *::after{box-sizing:border-box;}


/* Base element resets. Wrapped in :where() so they contribute ZERO specificity
   while STILL being scoped to this page (they cannot leak out).

   Why this matters: written bare, `#page-bingo-software p` is (1,0,1) — an id
   plus an element — which outranks every `.bs-*` component rule and even
   `.bs-strip__row p` (0,1,1). The result is that every component margin and
   font-size override in this sheet is silently discarded: the hero deck lost
   `margin-inline:auto` and sat 107px off-centre, and every 16px supporting
   paragraph rendered at 17px. :where() removes the id from the specificity
   calculation and lets the component rules win, which is what they were
   written to do. */
:where(#page-bingo-software) p{margin:0 0 16px;font-size:17px;}
:where(#page-bingo-software) ul,
:where(#page-bingo-software) ol{margin:0;padding:0;list-style:none;}
:where(#page-bingo-software) img{max-width:100%;height:auto;display:block;}
:where(#page-bingo-software) figure{margin:0;}
:where(#page-bingo-software) blockquote{margin:0;}

#page-bingo-software :focus-visible{
  outline:3px solid var(--bs-accent);
  outline-offset:2px;
  border-radius:2px;
}

.bs-wrap{max-width:var(--bs-wrap);margin-inline:auto;padding-inline:28px;}

/* ── Editorial headings ───────────────────────────────────────────────── */
.bs-h2{
  margin:0;
  font-size:clamp(29px,3.3vw,44px);
  line-height:1.12;
  letter-spacing:-.021em;
  font-weight:800;
  color:var(--bs-ink);
}
.bs-h2--wide{max-width:24ch;}
/* Base light-ground modifier. MUST exist: without it, `.bs-h2--light` on the
   dark `.bs-sec--ink` band falls back to `.bs-h2{color:var(--bs-ink)}` and
   renders ink-on-ink — measured contrast 1.00, i.e. an invisible heading.
   That is exactly what happened to "Highly Competitive Electronic Bingo Game
   Software Solutions". The light-GROUND overrides further down are more
   specific and still win where a section was flipped to newsprint. */
.bs-h2--light{color:var(--bs-on-ink);}

/* Kicker: small caps over a hairline, the broadsheet section mark. */
.bs-eyebrow{
  margin:0 0 14px;
  padding-bottom:9px;
  border-bottom:1px solid var(--bs-rule-2);
  display:inline-block;
  font-size:16px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--bs-accent);
}

.bs-head{margin-bottom:46px;max-width:920px;}
.bs-head--centre{margin-inline:auto;text-align:center;max-width:840px;}
.bs-head--centre .bs-h2--wide{max-width:none;}
.bs-head__sub{margin:18px 0 0;font-size:18px;color:var(--bs-text-2);max-width:72ch;}

:where(#page-bingo-software) h3{
  margin:0 0 12px;
  font-size:clamp(22px,1.9vw,28px);
  line-height:1.2;
  font-weight:750;
  color:var(--bs-ink);
}
:where(#page-bingo-software) h5{
  margin:0 0 8px;
  font-size:19px;
  line-height:1.32;
  font-weight:700;
  letter-spacing:-.005em;
  color:var(--bs-ink);
}

/* ── Section grounds. BROADSHEET runs light; one ink band for contrast. ── */
.bs-sec{padding:clamp(58px,6.6vw,100px) 0;}
.bs-sec--paper{background:var(--bs-paper);}
.bs-sec--linen,
.bs-sec--news,
.bs-sec--offer{background:var(--bs-news);}
.bs-sec--linen,
.bs-sec--news{border-block:1px solid var(--bs-rule);}
.bs-sec--ink{background:var(--bs-ink);color:var(--bs-on-ink);}
.bs-sec--ink h5,
.bs-sec--ink h3{color:var(--bs-on-ink);}
.bs-sec--ink p{color:var(--bs-on-ink-2);}
.bs-sec--ink .bs-eyebrow{color:#7fd3c0;border-bottom-color:rgba(244,241,233,.34);}
.bs-sec--offer{border-block:1px solid var(--bs-rule);}

/* Sections that used to sit on a dark ground now sit on newsprint: pull the
   inherited --light modifiers back to ink rather than editing the markup. */
.bs-sec--news .bs-h2--light,
.bs-stories--light .bs-h2--light{color:var(--bs-ink);}
.bs-sec--news .bs-eyebrow--light,
.bs-sec--offer .bs-eyebrow--light,
.bs-stories--light .bs-eyebrow--light{color:var(--bs-accent);border-bottom-color:var(--bs-rule-2);}
.bs-sec--offer .bs-h2--light{color:var(--bs-ink);}
.bs-stories--light .bs-link--light{color:var(--bs-accent);}
.bs-stories--light .bs-link--light:hover{color:var(--bs-ink);}

/* ── Buttons — squared, weighty, no pill ─────────────────────────────── */
.bs-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:14px 30px;
  border:2px solid var(--bs-ink);
  border-radius:var(--bs-r);
  background:var(--bs-ink);
  color:var(--bs-on-ink);
  font:inherit;
  font-size:17px;
  font-weight:700;
  letter-spacing:.005em;
  text-align:center;
  cursor:pointer;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease,transform .16s ease;
}
.bs-btn:hover{background:var(--bs-accent);border-color:var(--bs-accent);color:#fff;transform:translateY(-1px);}
.bs-btn:active{transform:translateY(0);}

.bs-btn--daub{background:var(--bs-accent);border-color:var(--bs-accent);color:#fff;}
.bs-btn--daub:hover{background:var(--bs-ink);border-color:var(--bs-ink);color:var(--bs-on-ink);}

.bs-btn--ink{background:var(--bs-ink);border-color:var(--bs-ink);color:var(--bs-on-ink);}

.bs-btn--paper{background:var(--bs-paper);border-color:var(--bs-paper);color:var(--bs-ink);}
.bs-btn--paper:hover{background:var(--bs-ochre);border-color:var(--bs-ochre);color:#fff;}

.bs-btn--wire{
  background:transparent;
  color:var(--bs-ink);
  border-color:var(--bs-rule-2);
  width:100%;
  padding:12px 20px;
  font-size:16px;
}
.bs-btn--wire:hover{background:var(--bs-ink);border-color:var(--bs-ink);color:var(--bs-on-ink);}

/* Every CTA is centred in its own section (requested). One rule covers all of
   them because each sits in a .bs-cta-row; the demo-card buttons are centred
   by the card, and the two image bands are centred below. */
.bs-cta-row{margin-top:46px;text-align:center;}

.bs-link{color:var(--bs-accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;font-weight:600;}
.bs-link:hover{color:var(--bs-ink);}
.bs-link--light{color:#8fdcc8;}
.bs-link--light:hover{color:#fff;}

/* ── Hero — rule 24: full-bleed, image-free, static, centred column ───── */
.bs-hero{
  width:100%;
  padding:clamp(64px,7.5vw,108px) 28px clamp(52px,6vw,84px);
  background:
    linear-gradient(180deg,#faf8f3 0%,var(--bs-news) 58%,var(--bs-news-2) 100%);
  border-bottom:1px solid var(--bs-rule-2);
  color:var(--bs-text);
}
.bs-hero__inner{max-width:900px;margin-inline:auto;text-align:center;}

/* masthead rule above the kicker */
.bs-hero__tag{
  position:relative;
  display:inline-block;
  margin:0 0 26px;
  padding-top:18px;
  font-size:16px;
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--bs-accent);
}
.bs-hero__tag::before{
  content:"";
  position:absolute;
  top:0;left:50%;
  transform:translateX(-50%);
  width:132px;
  height:4px;
  border-top:1px solid var(--bs-ink);
  border-bottom:1px solid var(--bs-ink);   /* the double rule */
}
#page-bingo-software .bs-hero h1{
  margin:0 0 24px;
  font-size:clamp(37px,5vw,67px);
  line-height:1.04;
  letter-spacing:-.033em;
  font-weight:850;
  color:var(--bs-ink);
}
.bs-hero__copy{
  margin:0 auto 34px;
  max-width:64ch;
  font-size:clamp(17px,1.45vw,20px);
  line-height:1.6;
  color:var(--bs-text-2);
}
/* standfirst rule under the deck */
.bs-hero__copy::after{
  content:"";
  display:block;
  width:64px;
  margin:30px auto 0;
  border-top:2px solid var(--bs-rule-2);
}
.bs-hero__built{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch;
  gap:0;
  margin-top:44px;
  border-top:1px solid var(--bs-rule-2);
  padding-top:22px;
}
.bs-hero__built li{
  display:flex;
  align-items:center;
  gap:11px;
  padding:4px 26px;
  font-size:16px;
  font-weight:600;
  color:var(--bs-text);
}
.bs-hero__built li + li{border-left:1px solid var(--bs-rule-2);}
/* numeral index, not a coloured ball */
.bs-ball{
  font-size:16px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  color:var(--bs-ochre);
  letter-spacing:.02em;
}

/* ── Breadcrumb ───────────────────────────────────────────────────────── */
.bs-crumbbar{background:var(--bs-paper);border-bottom:1px solid var(--bs-rule);}
.bs-crumb{display:flex;align-items:center;gap:9px;padding:15px 0;font-size:16px;color:var(--bs-text-2);}
.bs-crumb a{color:var(--bs-accent);font-weight:600;}
.bs-crumb a:hover{text-decoration:underline;}
.bs-crumb img{width:16px;height:16px;}

/* ── Lede — column rule between deck and plate, drop cap ─────────────── */
.bs-lede{padding:clamp(54px,6vw,90px) 0;background:var(--bs-paper);}
.bs-lede__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,4.6vw,64px);align-items:center;}
.bs-lede__copy{position:relative;padding-right:clamp(0px,2.6vw,34px);border-right:1px solid var(--bs-rule);}
.bs-lede__copy p{font-size:19px;line-height:1.68;color:var(--bs-text);margin-bottom:30px;}
.bs-lede__copy p:first-of-type::first-letter{
  float:left;
  font-size:66px;
  line-height:.84;
  font-weight:800;
  padding:8px 12px 0 0;
  color:var(--bs-accent);
}

.bs-plate{
  border:1px solid var(--bs-rule-2);
  border-radius:var(--bs-r);
  overflow:hidden;
  background:var(--bs-news);
}
.bs-plate img{width:100%;height:auto;}
.bs-plate--tall{align-self:start;}

/* ── Column set (gameplay capabilities) ──────────────────────────────── */
.bs-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0 34px;
  border-top:2px solid var(--bs-ink);
  padding-top:6px;
}
.bs-strip__row{
  display:block;
  padding:26px 0;
  border-bottom:1px solid var(--bs-rule);
}
.bs-strip__row p{margin:0;font-size:16px;color:var(--bs-text-2);}
/* small inline mark, not a filled circle */
.bs-daub{
  display:block;
  width:42px;height:42px;
  margin-bottom:14px;
}
.bs-daub img{width:42px;height:42px;}

/* ── Tabular rail (varieties) ────────────────────────────────────────── */
/* THREE columns, not six. The icons are specified at 206px wide, and six
   columns across the 1164px content box gives a 194px cell -- 162px usable
   after padding, so a 206px icon cannot fit and would overflow its cell.
   Five columns (201px usable) still does not fit. Four is the first that
   does, but six items across four columns leaves a ragged 4+2 last row;
   three gives an even 3+3 with 356px usable. */
.bs-rail{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border:1px solid var(--bs-rule-2);
  border-radius:var(--bs-r);
  background:var(--bs-paper);
  overflow:hidden;
}
.bs-rail li{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:32px 16px;text-align:center;
  transition:background-color .16s ease;
}
.bs-rail li + li{border-left:1px solid var(--bs-rule);}
.bs-rail li:nth-child(3n+1){border-left:0;}
.bs-rail li:nth-child(n+4){border-top:1px solid var(--bs-rule);}
.bs-rail li:hover{background:var(--bs-news);}
/* Format icons sized to the cell rather than a fixed 74px. They were rendering
   74x41 inside a 194px cell (28px of side padding, so 166px usable) -- under
   half the available width, with ~92px of headroom going unused. Their
   intrinsic box is 214x120 and they are SVG, so scaling up is lossless.
   Percentage + cap so they stay proportionate as the rail drops from 6 to 3
   to 2 columns instead of being pinned to one pixel value. */
/* Icons at the specified 206x112. Note this is a ~3% vertical squash against
   their intrinsic 214x120 box; height:auto would give 206x115.5. Set as
   requested, with a max-width guard so a narrow cell scales them down
   rather than letting them overflow. */
.bs-rail__ball{display:block;width:100%;}
.bs-rail__ball img{width:206px;height:112px;max-width:100%;margin-inline:auto;}
.bs-rail__name{font-size:17px;font-weight:700;color:var(--bs-ink);}

/* ── Banner / hire bands (keep their record images, editorial overlay) ── */
.bs-banner{
  padding:clamp(50px,5.6vw,80px) 0;
  background:linear-gradient(90deg,rgba(15,20,27,.93) 0%,rgba(15,20,27,.70) 100%),
             url("/assets/images/_shared/collaborate-bg.webp") center/cover no-repeat;
  color:var(--bs-on-ink);
  border-block:1px solid var(--bs-ink);
}
.bs-banner__grid{display:grid;grid-template-columns:1fr;gap:28px;justify-items:center;text-align:center;}
.bs-banner .bs-eyebrow--light{color:#7fd3c0;border-bottom-color:rgba(244,241,233,.34);}
.bs-banner .bs-h2--light{color:#fff;}
.bs-banner__sub{margin:16px auto 0;font-size:19px;font-weight:600;color:#e4e8ec;}

.bs-hire{
  padding:clamp(54px,6vw,88px) 0;
  background:linear-gradient(90deg,rgba(15,20,27,.94) 0%,rgba(28,36,48,.76) 100%),
             url("/assets/images/_shared/markin-gaming-bg.webp") center/cover no-repeat;
  color:var(--bs-on-ink);
}
.bs-hire__grid{display:grid;grid-template-columns:1fr;gap:28px;justify-items:center;text-align:center;}
.bs-hire .bs-eyebrow--light{color:#7fd3c0;border-bottom-color:rgba(244,241,233,.34);}
.bs-hire .bs-h2--light{color:#fff;}
.bs-hire__sub{margin:18px auto 0;font-size:18px;color:#e4e8ec;max-width:62ch;}
.bs-hire__act{text-align:center;}
#page-bingo-software .bs-hire__h3{color:var(--bs-ochre);font-size:23px;margin-bottom:18px;}

/* ── Plate gallery (screenshots) ─────────────────────────────────────── */
.bs-shots{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.bs-shots li{
  border:1px solid var(--bs-rule-2);
  border-radius:var(--bs-r);
  overflow:hidden;
  background:var(--bs-paper);
}

/* ── Numbered ledger (admin panel) ───────────────────────────────────── */
.bs-ledger{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px;
  border-top:2px solid var(--bs-ink);
}
.bs-ledger > li{display:flex;gap:20px;padding:24px 0;border-bottom:1px solid var(--bs-rule);}
.bs-ledger__n{
  flex:0 0 auto;
  min-width:38px;
  font-size:17px;font-weight:800;
  font-variant-numeric:tabular-nums;
  color:var(--bs-ochre);
  padding-top:2px;
}
.bs-ledger p{margin:0;font-size:16px;color:var(--bs-text-2);}


/* ── Link index (chip clouds become an editorial index) ──────────────── */
.bs-chips{
  display:block;
  columns:3;
  column-gap:42px;
  margin-top:26px;
}
.bs-chips li{break-inside:avoid;padding:7px 0;border-bottom:1px solid var(--bs-rule);}
.bs-chips li a{
  font-size:16px;
  font-weight:600;
  color:var(--bs-text);
  border-radius:0;
  transition:color .14s ease;
}
.bs-chips li a:hover{color:var(--bs-accent);text-decoration:underline;text-underline-offset:3px;}

/* ── Boost Your Business — redesigned ─────────────────────────────────────
   Was: a 3-column rule-separated index squeezed into a 1.5fr column, with the
   plate stranded in a 279px sidebar and ~200px of dead space under it.
   Now: a heading + plate band across the top, then the 20 offerings as a
   full-width THREE-column BULLETED index. Three, not four: measured at four,
   every one of the 20 items wrapped to two lines and the section grew from
   749px to 1132px. Full width gives three columns ~50% more room than the old
   three did inside the narrow copy column, which is where the win actually is.
   Scoped to .bs-sec--offer so the "Our Other Casino & Poker Offerings" list,
   which shares .bs-chips, is untouched.
   ───────────────────────────────────────────────────────────────────────── */
/* The plate has been removed from this section, so the heading band is no
   longer a two-column grid -- it is a single full-width block. The
   .bs-boost__plate rules are deleted rather than left as dead CSS. */
.bs-boost{display:block;}

.bs-sec--offer .bs-chips{
  columns:3;
  column-gap:44px;
  margin-top:clamp(30px,3.4vw,46px);
  padding-top:26px;
  border-top:2px solid var(--bs-ink);
}
.bs-sec--offer .bs-chips li{
  position:relative;
  break-inside:avoid;
  padding:9px 0 9px 24px;   /* 24px indent clears the bullet */
  border-bottom:0;          /* bullets carry the rhythm now; rules too were noisy */
}
/* Bullet: a small rotated square, matching BROADSHEET's squared geometry
   rather than a round dot. Decorative, so it is drawn in CSS and never
   announced to a screen reader. */
.bs-sec--offer .bs-chips li::before{
  content:"";
  position:absolute;
  left:2px;
  top:1.02em;
  width:7px;height:7px;
  background:var(--bs-accent);
  transform:rotate(45deg);
}
.bs-sec--offer .bs-chips li a{display:inline;}
.bs-sec--offer .bs-chips li:hover::before{background:var(--bs-ochre);}

/* ── Ruled columns (player features) ─────────────────────────────────── */
.bs-offset{display:grid;grid-template-columns:repeat(3,1fr);gap:0 34px;}
.bs-offset > li{
  padding:24px 0;
  border-top:2px solid var(--bs-ink);
  background:none;
  border-left:0;
  border-radius:0;
  box-shadow:none;
}
.bs-offset > li p{margin:0;font-size:16px;color:var(--bs-text-2);}

/* ── Demo cards — composed to follow the LIVE page (measured, not eyeballed):
   card radius 16px, 1px rgba(0,0,0,.08), shadow 0 2px 14px rgba(0,0,0,.07),
   24px padding, centred text; a 100px icon pulled up to straddle the card's
   top edge; title 21px/600; label stacked over value; a solid square-cornered
   brand-indigo button (#393185 — the same indigo as the site header CTA, so
   this stays inside the brand system rather than importing a foreign colour).
   ────────────────────────────────────────────────────────────────────────── */
/* row-gap must clear the icon's -70px overhang, or a wrapped row's icon lands
   on top of the card above it (measured: 3 collisions at 375px). Harmless at
   4-up, where there is only one row. */
.bs-demos{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;row-gap:86px;padding-top:52px;}
.bs-demo{
  display:flex;flex-direction:column;align-items:center;gap:0;
  padding:24px;
  text-align:center;
  background:var(--bs-paper);
  border:1px solid rgba(0,0,0,.08);
  border-top:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  box-shadow:0 2px 14px rgba(0,0,0,.07);
}
.bs-demo__top{display:flex;flex-direction:column;align-items:center;gap:0;margin-bottom:4px;}
.bs-demo__top img{width:100px;height:100px;margin:-70px 0 10px;}
#page-bingo-software .bs-demo__top h5{
  margin:0 0 14px;
  font-size:21px;font-weight:600;line-height:1.3;
  color:#333;
}
.bs-demo__row{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  width:100%;margin:0 0 14px;padding:0;
  border-bottom:0;
  font-size:16px;
}
.bs-demo__k{color:var(--bs-text-2);font-weight:400;}
.bs-demo__v{color:var(--bs-ink);font-weight:600;text-align:center;word-break:break-word;}
.bs-demo .bs-btn--wire{
  /* display:block, NOT the inherited inline-flex: .bs-btn carries gap:10px and
     justify-content:center, which on the two-line "Download Now for Android"
     label threw the qualifier onto its own line with a gap across the button.
     As a block the label just wraps and centres like normal text. */
  display:block;
  margin-top:auto;
  width:100%;max-width:204px;
  padding:15px 10px;
  border:0;border-radius:0;
  background:#393185;color:#fff;
  font-size:16px;font-weight:600;line-height:1.3;
  text-align:center;
}
.bs-demo .bs-btn--wire .bs-demo__plat{white-space:nowrap;}

/* An ANCHOR styled as a button has to out-rank the page's mandated baseline
   block, which is `#page-bingo-software a{color:inherit}` — id + element,
   (1,0,1). That beats `.bs-demo .bs-btn--wire` (0,2,0), so `color:inherit`
   won and the label rendered in the card's ink on the indigo fill: measured
   contrast 1.66. The bug was LATENT before this change (the button was
   transparent, so inheriting ink looked right) and only became visible once
   the fill went dark. Scoped with the id here so the baseline cannot win.
   The general rule keeps any future anchor-CTA from being flattened the
   same way; <button> CTAs are unaffected, the baseline only targets `a`. */
#page-bingo-software a.bs-btn{color:var(--bs-on-ink);}
#page-bingo-software .bs-demo a.bs-btn--wire,
#page-bingo-software .bs-demo a.bs-btn--wire .bs-demo__plat{color:#fff;}
#page-bingo-software .bs-demo a.bs-btn--wire:hover{color:#fff;}
.bs-demo .bs-btn--wire:hover{background:var(--bs-ink);color:#fff;}
.bs-demo__plat{font-weight:600;}

/* ── Index tiles (growth features) ───────────────────────────────────── */
.bs-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 34px;}
.bs-tile{
  padding:26px 0;
  border-top:1px solid var(--bs-rule-2);
  background:none;border:0;border-top:1px solid var(--bs-rule-2);border-radius:0;
}
.bs-tile:nth-child(-n+3){border-top:2px solid var(--bs-ink);}
.bs-tile__n{
  display:block;
  width:auto;height:auto;
  margin-bottom:12px;
  background:none;
  color:var(--bs-ochre);
  font-size:16px;font-weight:800;
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
}
.bs-tile p{margin:0;font-size:16px;color:var(--bs-text-2);}

/* ── Speciality — recomposed. It was three full-width alternating image/text
   rows: ~2,000px of near-identical rhythm that the reader has to scroll past
   to compare three sibling products. Now a 3-up column set — plate, ruled
   head, copy — so the three variants can be read side by side, which is what
   a comparison section is for. Same content, same order.
   ────────────────────────────────────────────────────────────────────────── */
.bs-alt{display:grid;grid-template-columns:repeat(3,1fr);gap:0 34px;}
.bs-alt__row{
  display:flex;flex-direction:column;align-items:stretch;
  gap:20px;
  padding:26px 0 0;
  border-top:2px solid var(--bs-ink);
}
.bs-alt__row--flip figure{order:0;}          /* the alternation is gone */
.bs-alt__row figure{
  order:-1;
  border:1px solid var(--bs-rule-2);
  border-radius:var(--bs-r);
  overflow:hidden;background:var(--bs-paper);
}
.bs-alt__row figure img{width:100%;height:auto;aspect-ratio:16/11;object-fit:cover;}
/* Content box (requested): the head + copy of each speciality variant now sit
   in their own bordered, filled box under the plate, so the three columns read
   as three discrete products rather than loose text under three images. The
   box stretches to equal height across the row, so the boxes bottom-align. */
.bs-alt__row > div{
  flex:1;
  display:flex;flex-direction:column;
  padding:22px 22px 24px;
  background:var(--bs-paper);
  border:1px solid var(--bs-rule-2);
  border-top:3px solid var(--bs-accent);
  border-radius:var(--bs-r);
}
#page-bingo-software .bs-alt__row h3{font-size:clamp(20px,1.6vw,24px);margin-bottom:10px;}
.bs-alt__row p{margin:0;font-size:16px;color:var(--bs-text-2);}

/* ── Ruled list on the ink band (competitive solutions) ──────────────── */
.bs-ruled{display:grid;grid-template-columns:repeat(3,1fr);gap:0 36px;border-top:2px solid rgba(244,241,233,.5);}
.bs-ruled li{padding:26px 0;border-bottom:1px solid rgba(244,241,233,.17);}
.bs-ruled p{margin:0;font-size:16px;}

/* ── Preferred choice ────────────────────────────────────────────────── */
.bs-prefer{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,4.4vw,60px);align-items:center;}
.bs-prefer__copy .bs-h2{margin-bottom:22px;}
.bs-prefer__copy p{font-size:17px;color:var(--bs-text-2);}
.bs-prefer__copy .bs-btn{margin-top:16px;}

/* ── Prose column (why AIS) ──────────────────────────────────────────── */
.bs-prose{max-width:74ch;margin-inline:auto;columns:1;}
.bs-prose p{font-size:17px;line-height:1.76;color:var(--bs-text);}
.bs-prose p:first-child::first-letter{
  float:left;
  font-size:64px;line-height:.84;font-weight:800;
  padding:8px 13px 0 0;
  color:var(--bs-accent);
}
.bs-prose + .bs-cta-row{text-align:center;}

/* ── FAQ — ruled, squared ────────────────────────────────────────────── */
.bs-faq{max-width:920px;margin-inline:auto;border-top:2px solid var(--bs-ink);}
.bs-faq details{
  background:none;
  border:0;
  border-bottom:1px solid var(--bs-rule);
  border-radius:0;
}
.bs-faq details[open]{background:var(--bs-paper);}
.bs-faq summary{
  display:flex;align-items:flex-start;gap:16px;
  padding:22px 18px 22px 0;
  cursor:pointer;list-style:none;
}
.bs-faq summary::-webkit-details-marker{display:none;}
#page-bingo-software .bs-faq summary h2{
  margin:0;flex:1;
  font-size:19px;line-height:1.4;font-weight:700;
  color:var(--bs-ink);
}
.bs-faq details[open] summary h2{color:var(--bs-accent);}
.bs-faq__n{
  flex:0 0 auto;
  min-width:34px;
  font-size:16px;font-weight:800;
  font-variant-numeric:tabular-nums;
  color:var(--bs-ochre);
  padding-top:2px;
}
.bs-faq__pm{position:relative;flex:0 0 auto;width:20px;height:20px;margin-top:3px;}
.bs-faq__pm::before,
.bs-faq__pm::after{
  content:"";position:absolute;left:50%;top:50%;
  background:var(--bs-ink);
  transform:translate(-50%,-50%);
  transition:transform .18s ease,opacity .18s ease;
}
.bs-faq__pm::before{width:14px;height:2px;}
.bs-faq__pm::after{width:2px;height:14px;}
.bs-faq details[open] .bs-faq__pm::after{transform:translate(-50%,-50%) scaleY(0);opacity:0;}
.bs-faq__a{display:flex;gap:16px;padding:0 18px 24px 0;}
.bs-faq__ans{flex:0 0 auto;min-width:34px;font-size:16px;font-weight:800;color:var(--bs-accent);}
.bs-faq__a p{margin:0;font-size:16px;color:var(--bs-text-2);}

/* ── Stories — light in BROADSHEET ───────────────────────────────────── */
.bs-stories{padding:clamp(58px,6.6vw,100px) 0;background:var(--bs-news);border-block:1px solid var(--bs-rule);color:var(--bs-text);}
.bs-storylist{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.bs-story{display:flex;flex-direction:column;gap:18px;}
.bs-vid{
  position:relative;display:block;width:100%;
  padding:0;border:1px solid var(--bs-rule-2);
  border-radius:var(--bs-r);overflow:hidden;cursor:pointer;
  background:#000;aspect-ratio:3/2;
}
.bs-vid img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:opacity .16s ease;}
.bs-vid:hover img{opacity:1;}
.bs-vid__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;
  width:60px;height:60px;
  border-radius:2px;                 /* squared play mark */
  background:var(--bs-accent);
  color:#fff;padding-left:3px;
}
.bs-story__frame{width:100%;aspect-ratio:3/2;border:0;border-radius:var(--bs-r);display:block;}
.bs-stories--light .bs-story blockquote p{color:var(--bs-text-2);}
.bs-story blockquote{border-left:2px solid var(--bs-rule-2);padding-left:16px;}
.bs-story blockquote p{margin:0;font-size:16px;}
.bs-more{margin:38px 0 0;text-align:center;font-size:17px;}

/* ── Area we serve — tabular ─────────────────────────────────────────── */
.bs-regions{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--bs-ink);}
.bs-region{
  padding:26px 24px 26px 0;
  background:none;border-radius:0;border-top:0;
}
.bs-region + .bs-region{border-left:1px solid var(--bs-rule);padding-left:24px;}
#page-bingo-software .bs-region h3{
  display:flex;align-items:center;gap:9px;
  font-size:16px;letter-spacing:.11em;text-transform:uppercase;
  margin-bottom:12px;color:var(--bs-accent);
}
.bs-region h3 img{width:14px;height:20px;}
/* 44px minimum touch target (skill s.13) — the bare inline-block was 28px */
.bs-tel{display:inline-flex;align-items:center;min-height:44px;margin-bottom:4px;font-size:17px;font-weight:700;color:var(--bs-ink);font-variant-numeric:tabular-nums;}
.bs-tel:hover{color:var(--bs-accent);text-decoration:underline;}
.bs-region p{margin:0;font-size:16px;color:var(--bs-text-2);}

/* ── CTA modal ───────────────────────────────────────────────────────── */
.bs-modal{
  position:fixed;inset:0;z-index:9999;
  display:none;align-items: flex-start;justify-content:center;
  padding:100px 24px 24px 24px; overflow-y: auto;background:rgba(15,20,27,.74);
}
.bs-modal.is-open{display:flex;}
.bs-modal__box{
  position:relative;width:100%;max-width:640px;max-height:92vh;overflow:auto;
  background:#fff;border-radius:var(--bs-r);
  box-shadow:0 26px 70px rgba(0,0,0,.4);
}
.bs-modal__x{
  position:absolute;top:12px;right:12px;z-index:2;
  display:grid;place-items:center;
  width:44px;height:44px;
  border:0;border-radius:2px;
  background:var(--bs-ink);color:#fff;cursor:pointer;
  transition:background-color .16s ease;
}
.bs-modal__x:hover{background:var(--bs-accent);}
/* min-height = form content + 100px buffer; form_embed.js resizes per slide */
.bs-modal__box iframe{display:block;width:100%;min-height:860px;border:0;border-radius:var(--bs-r);}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .bs-rail{grid-template-columns:repeat(2,1fr);}
  .bs-rail li:nth-child(3n+1){border-left:1px solid var(--bs-rule);}
  .bs-rail li:nth-child(2n+1){border-left:0;}
  .bs-rail li:nth-child(n+3){border-top:1px solid var(--bs-rule);}
  .bs-shots{grid-template-columns:repeat(2,1fr);}
  .bs-demos{grid-template-columns:repeat(2,1fr);}
  .bs-alt{grid-template-columns:1fr;gap:0;}
  .bs-alt__row{padding-bottom:30px;}
  .bs-strip,.bs-offset,.bs-grid3,.bs-ruled{grid-template-columns:repeat(2,1fr);}
  .bs-tile:nth-child(-n+3){border-top:1px solid var(--bs-rule-2);}
  .bs-tile:nth-child(-n+2){border-top:2px solid var(--bs-ink);}
  .bs-chips{columns:2;}
  .bs-sec--offer .bs-chips{columns:2;}
  .bs-regions{grid-template-columns:repeat(2,1fr);}
  .bs-region:nth-child(2n+1){border-left:0;padding-left:0;}
  .bs-region:nth-child(n+3){border-top:1px solid var(--bs-rule);}
}

@media (max-width:860px){
  .bs-lede__grid,.bs-prefer,.bs-alt__row{grid-template-columns:1fr;}
  .bs-lede__copy{border-right:0;padding-right:0;}
  .bs-alt__row--flip figure{order:0;}
  .bs-ledger{grid-template-columns:1fr;}
  .bs-storylist{grid-template-columns:1fr;}
  .bs-prefer .bs-plate--tall{order:2;}
}

@media (max-width:600px){
  .bs-sec{padding:50px 0;}
  .bs-wrap{padding-inline:20px;}
  .bs-head{margin-bottom:32px;}
  .bs-hero__built{flex-direction:column;align-items:flex-start;gap:0;}
  .bs-hero__built li{width:100%;padding:12px 0;justify-content:flex-start;}
  .bs-hero__built li + li{border-left:0;border-top:1px solid var(--bs-rule-2);}
  .bs-rail{grid-template-columns:repeat(2,1fr);}
  .bs-rail li:nth-child(2n+1){border-left:0;}
  .bs-rail li:nth-child(n+3){border-top:1px solid var(--bs-rule);}
  /* Below ~600px the cell is 167px, narrower than the 206px icon. max-width
     scales the WIDTH down but a fixed height:112px does not follow, which
     squashed them to 134x112 -- an aspect ratio of 1.20 against the
     intended 1.84. Release the height here so they scale proportionally. */
  .bs-rail__ball img{height:auto;}
  .bs-shots,.bs-demos,.bs-strip,.bs-offset,.bs-grid3,.bs-ruled,.bs-regions{grid-template-columns:1fr;}
  .bs-demos{padding-top:52px;row-gap:86px;}
  .bs-chips{columns:1;}
  .bs-sec--offer .bs-chips{columns:1;}
  .bs-tile:nth-child(-n+2){border-top:1px solid var(--bs-rule-2);}
  .bs-tile:first-child{border-top:2px solid var(--bs-ink);}
  .bs-region + .bs-region{border-left:0;padding-left:0;border-top:1px solid var(--bs-rule);}
  .bs-btn{width:100%;}
  .bs-demo__row{flex-direction:column;gap:2px;}
  .bs-demo__v{text-align:left;}
  .bs-lede__copy p:first-of-type::first-letter,
  .bs-prose p:first-child::first-letter{font-size:50px;}
  .bs-modal{padding:100px 12px 12px 12px; overflow-y: auto;}
  .bs-modal__box iframe{min-height:820px;}
}

/* ── Reduced motion — rule 26 ────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  #page-bingo-software *,
  #page-bingo-software *::before,
  #page-bingo-software *::after{
    animation:none !important;
    transition-duration:.01ms !important;
  }
}