/* ══════════════════════════════════════════════════════════════════════════
   /keno-software — page-isolated stylesheet
   AISHTMLNEWDESIGN-471

   VISUAL DIRECTION — "HEAD START".

   WHY THIS AND NOT THE NUMBER FIELD. Keno hands a designer an obvious prop:
   an 80-number field, a player marking a spot card, twenty balls drawn. That
   prop is exactly where this page's neighbours already live, because lotto and
   bingo are the same act —

     lotto-software            DRAW SLIP      the PICK: a marked number in a
                                              rounded cell, plus a perforation
     lottery-software-providers DRAW REGISTRY boxed index numerals in tabular
                                              figures; grids echoing a
                                              number-selection board
     lotto-software-canada     KIOSK COUNTER  thermal stub, punched notch,
                                              dashed tear line, amber readout
     bingo-game-development    PARISH HALL    ruled card cells + printed daubs
     bingo-software-canada     CURLING HOUSE  concentric painted rings as the
                                              daub/number motif, hog-line rules
     bingo-caller-…-source-code PATCH BAY     graphite rack, bezels, screw dots

   A marked-cell grid here would be the seventh variation on one idea. So the
   page takes the OTHER thing the record actually argues. Read the H1 and the
   opening paragraph: "Launch Faster", "Revenue-Ready from Day One", "eliminates
   months of development", "in days, not months", "rent, buy, or rent-to-buy".
   Not one word about the thrill of the draw. The reader is an operator with a
   launch date, and the product's claim is that it is ALREADY BUILT and ALREADY
   EARNING. So the register is a head start — being ahead of the build, not
   being at the table.

   THE MARK. Every band opens with a DOUBLE CHEVRON at wrapper level, the
   trailing one faded: the fast-forward, two strokes of "already ahead". It is
   deliberately none of the devices in current rotation — not a bracket arm,
   not an index numeral, not a tally stroke, not a ring, not a diamond rail,
   not a tab, not an interrupted rule. It repeats at exactly one size and one
   x-position on every section, so the reader gets a single steady cadence.

   MATERIALS — two grounds and one signal, nothing else:
     · PINE   #0c2a22 / #113528 / #164034. A deep bottle green. The six
              number-draw siblings are, without exception, charcoal (kiosk
              counter), indigo (draw slip), ink-navy (parish hall), granite
              (curling house), graphite (patch bay) or ink (draw registry).
              None of them is green-grounded, so the page separates from the
              family at a glance rather than on inspection.
     · PAPER  #ffffff dominant, with #edf1ec pale sage as the second reading
              surface. The siblings are all TINTED-PAPER dominant — parchment,
              kraft, bone, ice, ticket stock. This page is white-dominant with
              deep bands cut into it: the inverse composition.
     · FLAME  #b8380f on light (5.8:1 on white, 5.1:1 on sage), #ff8a63 on pine
              (6.6:1), #8f2a09 pressed. One signal only. No second accent, no
              gradient family, no glow. Deliberately not the amber every
              neighbour reaches for (#d9822b, #ffb300, #f5a524, #D9931F).

   COMPOSITION — no two bands repeat a shape: a centred hero column, a crumb
   strip, an opening prose/plate spread, a deep band with a full-width plate,
   a ruled five-row spread (five entries do not tile into a card grid), a 2x2
   quadrant with per-CELL borders, a mirrored hire spread, a lead-plus-pair
   prose set, a chevron accordion, a facade rail and a four-up address row.
   There is no three-up icon-card grid anywhere on this page.

   Every rule is scoped to #page-keno-software or a ks- prefixed class: this
   sheet never styles body, a bare element, #ais-header or #ais-footer. The
   document reset (html,body{margin:0}) is owned by /assets/css/ais-layout.css
   and is NOT restated here (skill section 33).

   Design contract (frontend-design skill):
     · rule  1 — Inter is the primary family
     · rule  2 — nothing below 16px, anywhere, including captions and labels
     · rule 23 — no slate-gray body copy on light grounds (#3a4b44 floor)
     · rule 24 — image-free full-bleed hero, static gradient, centred column
     · rule 25 — one CTA per section, every label unique page-wide
     · rule 26 — no running animation; every transition answers hover /
                 :focus-visible / :active / [open], and prefers-reduced-motion
                 is honoured at the foot of this file
     · rule 39A — anything that paints a background owns its foreground at a
                 specificity no prose rule in this sheet can outrank
   ══════════════════════════════════════════════════════════════════════════ */

/* ── tokens + this page's own box model (no global box model exists) ────── */
#page-keno-software{
  --ks-pine:#0c2a22;
  --ks-pine-2:#113528;
  --ks-pine-3:#164034;
  --ks-pine-4:#081d17;
  --ks-paper:#ffffff;
  --ks-sage:#edf1ec;
  --ks-sage-2:#e2e9e1;
  --ks-flame:#b8380f;
  --ks-flame-d:#8f2a09;
  --ks-flame-on:#ff8a63;
  --ks-text:#16241f;
  --ks-text-2:#3a4b44;
  --ks-on:#eef4f0;
  --ks-on-2:#bcd0c6;
  --ks-line:#d3ddd4;
  --ks-line-2:#c2cfc3;
  --ks-line-on:rgba(238,244,240,.17);
  --ks-pad:clamp(58px,7vw,106px);
  --ks-gut:clamp(20px,4vw,40px);
  --ks-t:170ms ease;
  font-family:"Inter", system-ui, sans-serif;
  font-size:17px;
  line-height:1.68;
  color:var(--ks-text);
  background:var(--ks-paper);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
#page-keno-software *,
#page-keno-software *::before,
#page-keno-software *::after{box-sizing:border-box;}

/* The one measure that every band shares. NEVER give this element a
   max-width override on a per-section basis: it inherits margin-inline:auto,
   so a narrower copy would re-centre while the section mark stayed put. Cap
   the measure on the paragraph instead (.ks-p--measure / .ks-p--lead). */
#page-keno-software .ks-wrap{
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  padding-inline:var(--ks-gut);
}

/* ── typography ─────────────────────────────────────────────────────────── */
#page-keno-software .ks-h1{
  margin:0 0 24px;
  font-size:clamp(38px,5vw,62px);
  line-height:1.06;
  letter-spacing:-.022em;
  font-weight:800;
  color:var(--ks-on);
}
#page-keno-software .ks-h2{
  margin:0 0 clamp(26px,3vw,44px);
  font-size:clamp(29px,3.4vw,45px);
  line-height:1.13;
  letter-spacing:-.018em;
  font-weight:800;
  color:var(--ks-text);
  max-width:20ch;
}
#page-keno-software .ks-h2--on{color:var(--ks-on);}
#page-keno-software .ks-h3{
  margin:0 0 12px;
  font-size:clamp(20px,1.7vw,25px);
  line-height:1.28;
  letter-spacing:-.01em;
  font-weight:700;
  color:var(--ks-text);
}
#page-keno-software .ks-h3--on{color:var(--ks-on);}
#page-keno-software .ks-p{
  margin:0 0 18px;
  font-size:17px;
  line-height:1.72;
  color:var(--ks-text-2);
}
#page-keno-software .ks-p:last-child{margin-bottom:0;}
#page-keno-software .ks-p--on{color:var(--ks-on);}
#page-keno-software .ks-p--lead{
  font-size:clamp(18px,1.5vw,20px);
  line-height:1.66;
  color:var(--ks-text);
}
#page-keno-software .ks-p--measure{max-width:62ch;}
#page-keno-software .ks-p--sm{font-size:16px;line-height:1.6;}

/* In-copy links. Qualified with the tag so they outrank the page's own
   inline baseline `#page-keno-software a{color:inherit}` (1,0,1): these are
   (1,1,1), which wins on both class count and element count. */
#page-keno-software a.ks-a{
  color:var(--ks-flame);
  font-weight:600;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color var(--ks-t);
}
#page-keno-software a.ks-a:hover,
#page-keno-software a.ks-a:focus-visible{color:var(--ks-flame-d);}
#page-keno-software .ks-sec--pine a.ks-a{color:var(--ks-flame-on);}
#page-keno-software .ks-sec--pine a.ks-a:hover,
#page-keno-software .ks-sec--pine a.ks-a:focus-visible{color:var(--ks-on);}
#page-keno-software a.ks-a--lead{
  font-size:clamp(17px,1.4vw,19px);
  font-weight:700;
}

/* ── the section mark: a double chevron, trailing stroke faded ──────────── */
#page-keno-software .ks-mark{
  display:flex;
  align-items:center;
  gap:5px;
  width:max-content;
  margin:0 0 20px;
}
#page-keno-software .ks-mark::before,
#page-keno-software .ks-mark::after{
  content:"";
  display:block;
  width:13px;
  height:20px;
  background:var(--ks-flame);
  clip-path:polygon(0 0,54% 0,100% 50%,54% 100%,0 100%,46% 50%);
}
#page-keno-software .ks-mark::before{opacity:.38;}
#page-keno-software .ks-mark--on::before,
#page-keno-software .ks-mark--on::after{background:var(--ks-flame-on);}

/* The band head is a BLOCK, not a flex row, at every width. A wrapping flex
   head silently changes shape with the length of its heading — short titles
   sit beside the mark, long ones drop below it — so the mark's x drifts with
   the copy. Stacked, the mark and the heading share one left edge on every
   section and at every viewport. */
#page-keno-software .ks-head{display:block;}

/* ── HERO — rule 24: full-bleed, image-free, STATIC gradient, centred ~900px
      column, exactly one CTA. Every stop below is dark, so the bone type
      clears AA against the worst of them, not merely against the average. ─ */
#page-keno-software .ks-hero{
  width:100%;
  padding:clamp(72px,9vw,132px) 24px clamp(62px,8vw,108px);
  text-align:center;
  background:linear-gradient(168deg,#0a231c 0%,#0c2a22 48%,#12362a 100%);
}
#page-keno-software .ks-hero__in{
  max-width:900px;
  margin-inline:auto;
}
#page-keno-software .ks-hero__lead{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  width:max-content;
  margin:0 auto 28px;
}
#page-keno-software .ks-hero__lead::before,
#page-keno-software .ks-hero__lead::after{
  content:"";
  display:block;
  width:17px;
  height:26px;
  background:var(--ks-flame-on);
  clip-path:polygon(0 0,54% 0,100% 50%,54% 100%,0 100%,46% 50%);
}
#page-keno-software .ks-hero__lead::before{opacity:.38;}
#page-keno-software .ks-hero__copy{
  margin:0 auto 26px;
  max-width:66ch;
  font-size:clamp(17px,1.5vw,19px);
  line-height:1.72;
  color:var(--ks-on-2);
}
/* Trust indicator. It paints a background, so it owns its foreground at
   (1,1,1) — no prose rule in this sheet can reach it (rule 39A). The ground
   is OPAQUE so the measured contrast is against the chip, not the gradient. */
#page-keno-software p.ks-hero__trust{
  display:inline-block;
  margin:0 0 32px;
  padding:11px 20px 11px 18px;
  border-left:4px solid var(--ks-flame-on);
  background:var(--ks-pine-3);
  font-size:16px;
  font-weight:600;
  line-height:1.5;
  color:var(--ks-on);
  text-align:left;
}
#page-keno-software .ks-hero__act{margin:0;}

/* ── buttons ────────────────────────────────────────────────────────────── */
#page-keno-software button.ks-btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:52px;
  padding:14px 28px;
  border:0;
  border-radius:2px;
  font-family:inherit;
  font-size:17px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.005em;
  cursor:pointer;
  transition:background-color var(--ks-t), transform 120ms ease, box-shadow var(--ks-t);
}
#page-keno-software button.ks-btn::after{
  content:"";
  display:block;
  width:10px;
  height:15px;
  background:currentColor;
  clip-path:polygon(0 0,54% 0,100% 50%,54% 100%,0 100%,46% 50%);
}
#page-keno-software button.ks-btn--flame{
  background:var(--ks-flame);
  color:#ffffff;
}
#page-keno-software button.ks-btn--flame:hover{background:var(--ks-flame-d);}
#page-keno-software button.ks-btn--pine{
  background:var(--ks-pine);
  color:#ffffff;
}
#page-keno-software button.ks-btn--pine:hover{background:var(--ks-pine-3);}
#page-keno-software button.ks-btn:active{transform:translateY(1px);}
#page-keno-software button.ks-btn:focus-visible{
  outline:3px solid var(--ks-flame-on);
  outline-offset:3px;
}

/* ── breadcrumb strip ───────────────────────────────────────────────────── */
#page-keno-software .ks-crumbs{
  width:100%;
  background:var(--ks-sage-2);
  border-bottom:1px solid var(--ks-line-2);
}
#page-keno-software .ks-crumbs__in{
  display:flex;
  align-items:center;
  gap:10px;
  padding-block:15px;
  flex-wrap:wrap;
}
#page-keno-software .ks-crumbs__back{
  display:inline-flex;
  align-items:center;
  transition:transform var(--ks-t);
}
#page-keno-software .ks-crumbs__back:hover{transform:translateX(-3px);}
#page-keno-software .ks-crumbs__back img{display:block;}
#page-keno-software a.ks-crumbs__home{
  font-size:16px;
  font-weight:600;
  color:var(--ks-text-2);
  transition:color var(--ks-t);
}
#page-keno-software a.ks-crumbs__home:hover{color:var(--ks-flame);}
#page-keno-software .ks-crumbs__here{
  font-size:16px;
  font-weight:700;
  color:var(--ks-text);
}

/* ── section grounds ────────────────────────────────────────────────────── */
#page-keno-software .ks-sec{
  width:100%;
  padding-block:var(--ks-pad);
}
#page-keno-software .ks-sec--paper{background:var(--ks-paper);}
#page-keno-software .ks-sec--sage{
  background:var(--ks-sage);
  border-block:1px solid var(--ks-line);
}
#page-keno-software .ks-sec--pine{
  background:var(--ks-pine);
  border-top:4px solid var(--ks-flame);
}

/* ── opening spread (the record's un-headed Section 3) ──────────────────── */
#page-keno-software .ks-open__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,360px);
  gap:clamp(28px,5vw,72px);
  align-items:center;
}
#page-keno-software .ks-plate{margin:0;}
#page-keno-software .ks-plate img{
  display:block;
  width:100%;
  height:auto;
}
#page-keno-software .ks-open__plate{
  padding:clamp(18px,2.4vw,30px);
  background:var(--ks-sage);
  border:1px solid var(--ks-line);
  border-left:4px solid var(--ks-flame);
}

/* ── "Create Exceptional …" — the Collaborate plate AS the band ground ──
      The asset is a 2640x1022 decorative backdrop, not a picture of anything,
      so it is laid in behind the copy rather than stacked under it as a
      ~450px empty strip. The section keeps an OPAQUE background colour taken
      from the plate's own mid tone, so the band is readable before the bytes
      arrive and the rendered-contrast sweep has a real backdrop to measure
      rather than an image it has to skip. ── */
#page-keno-software .ks-collab{
  position:relative;
  isolation:isolate;
  background:#e7ecf3;
  border-block:1px solid var(--ks-line-2);
}
#page-keno-software .ks-collab__bg{
  position:absolute;
  inset:0;
  z-index:-1;
  margin:0;
  overflow:hidden;
}
#page-keno-software .ks-collab__bg img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
#page-keno-software .ks-collab__in{position:relative;}
#page-keno-software .ks-collab__row{
  display:grid;
  grid-template-columns:minmax(0,1fr) max-content;
  gap:clamp(24px,4vw,56px);
  align-items:center;
}
#page-keno-software .ks-collab__act{margin:0;}

/* ── "Future-Ready …" — five ruled rows, title rail left, copy right ───── */
#page-keno-software .ks-spread__rows{display:block;}
#page-keno-software .ks-row{
  display:grid;
  grid-template-columns:minmax(0,330px) minmax(0,1fr);
  gap:clamp(16px,3.4vw,56px);
  padding:clamp(22px,2.6vw,32px) clamp(12px,1.6vw,20px);
  margin-inline:clamp(-12px,-1.6vw,-20px);
  border-top:1px solid var(--ks-line-2);
  transition:background-color var(--ks-t);
}
#page-keno-software .ks-row:first-child{border-top:0;}
#page-keno-software .ks-row:hover{background:var(--ks-sage-2);}
#page-keno-software .ks-row__h{
  display:flex;
  align-items:flex-start;
  gap:13px;
}
#page-keno-software .ks-tick{
  display:block;
  flex:0 0 22px;
  width:22px;
  height:22px;
  margin-top:5px;
}
#page-keno-software .ks-row__h .ks-h3{margin:0;}
#page-keno-software .ks-row__p{margin:0;}

/* ── "Feature-Rich …" — 2x2 quadrant, per-CELL borders. Four cells fill the
      two columns exactly, so no auto-fit cell is ever left vacant and there
      is no gap:1px-over-a-coloured-container trick anywhere here. ───────── */
#page-keno-software .ks-quad__grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--ks-line-on);
  border-left:1px solid var(--ks-line-on);
}
#page-keno-software .ks-quad__cell{
  padding:clamp(26px,3vw,42px);
  border-right:1px solid var(--ks-line-on);
  border-bottom:1px solid var(--ks-line-on);
  transition:background-color var(--ks-t);
}
#page-keno-software .ks-quad__cell:hover{background:var(--ks-pine-2);}
#page-keno-software .ks-quad__cell .ks-h3{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}
#page-keno-software .ks-quad__cell .ks-h3::before{
  content:"";
  flex:0 0 11px;
  width:11px;
  height:17px;
  margin-top:7px;
  background:var(--ks-flame-on);
  clip-path:polygon(0 0,54% 0,100% 50%,54% 100%,0 100%,46% 50%);
}

/* ── "Want to Dominate …" — mirrored hire spread ────────────────────────── */
#page-keno-software .ks-hire__grid{
  display:grid;
  grid-template-columns:minmax(0,440px) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);
  align-items:center;
}
#page-keno-software .ks-hire__plate{
  padding:clamp(16px,2vw,26px);
  background:var(--ks-sage);
  border:1px solid var(--ks-line);
  border-bottom:4px solid var(--ks-flame);
}
#page-keno-software .ks-hire__copy{min-width:0;}
#page-keno-software .ks-hire__link{margin:0 0 24px;}
#page-keno-software .ks-hire__act{margin:0;}

/* ── "Why Choose …" — a lead at full measure, then a ruled column pair ─── */
#page-keno-software .ks-why__lead{max-width:78ch;}
#page-keno-software .ks-why__pair{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(26px,4vw,60px);
  margin-top:clamp(28px,3.4vw,46px);
}
#page-keno-software .ks-why__pair .ks-p{
  margin:0;
  padding-top:22px;
  border-top:3px solid var(--ks-flame);
}

/* ── FAQ — one panel open at a time, all closed at rest ─────────────────── */
#page-keno-software .ks-faq__list{
  border-top:1px solid var(--ks-line-on);
}
#page-keno-software .ks-q{border-bottom:1px solid var(--ks-line-on);}
#page-keno-software .ks-q__s{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:clamp(20px,2.2vw,26px) 0;
  cursor:pointer;
  list-style:none;
}
#page-keno-software .ks-q__s::-webkit-details-marker{display:none;}
#page-keno-software .ks-q__h{
  margin:0;
  font-size:clamp(18px,1.5vw,21px);
  line-height:1.34;
  font-weight:700;
}
#page-keno-software .ks-q__sign{
  flex:0 0 12px;
  width:12px;
  height:18px;
  background:var(--ks-flame-on);
  clip-path:polygon(0 0,54% 0,100% 50%,54% 100%,0 100%,46% 50%);
  transition:transform var(--ks-t);
}
#page-keno-software .ks-q[open] .ks-q__sign{transform:rotate(90deg);}
#page-keno-software .ks-q__s:hover .ks-q__h{color:var(--ks-flame-on);}
#page-keno-software .ks-q__s:focus-visible{
  outline:3px solid var(--ks-flame-on);
  outline-offset:-3px;
}
#page-keno-software .ks-q__a{
  padding:0 0 clamp(22px,2.4vw,30px);
  max-width:88ch;
}

/* ── testimonial facades — the iframe is built on click, never before ───── */
#page-keno-software .ks-stories__rail{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,3vw,44px);
}
#page-keno-software .ks-story{min-width:0;}
#page-keno-software .ks-vid{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  font:inherit;
  color:inherit;
}
#page-keno-software .ks-vid img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--ks-line);
}
#page-keno-software .ks-vid__play{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:rgba(12,42,34,.34);
  transition:background-color var(--ks-t);
}
#page-keno-software .ks-vid__play i{
  position:relative;
  display:block;
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--ks-paper);
  transition:transform var(--ks-t);
}
#page-keno-software .ks-vid__play i::after{
  content:"";
  position:absolute;
  top:17px;
  left:22px;
  width:16px;
  height:22px;
  background:var(--ks-flame);
  clip-path:polygon(0 0,100% 50%,0 100%);
}
#page-keno-software .ks-vid:hover .ks-vid__play{background:rgba(12,42,34,.12);}
#page-keno-software .ks-vid:hover .ks-vid__play i{transform:scale(1.07);}
#page-keno-software .ks-vid:focus-visible{
  outline:3px solid var(--ks-flame);
  outline-offset:3px;
}
#page-keno-software .ks-story__frame{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  border:1px solid var(--ks-line);
}
#page-keno-software .ks-quote{
  margin:18px 0 0;
  padding-left:17px;
  border-left:3px solid var(--ks-flame);
}
#page-keno-software .ks-stories__more{margin:clamp(28px,3vw,40px) 0 0;}

/* ── Area We Serve — four cells across four columns: an exact tiling ────── */
#page-keno-software .ks-areas__grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--ks-line-2);
  border-left:1px solid var(--ks-line-2);
}
#page-keno-software .ks-area{
  padding:clamp(20px,2.4vw,30px);
  border-right:1px solid var(--ks-line-2);
  border-bottom:1px solid var(--ks-line-2);
}
#page-keno-software .ks-area__h{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
  font-size:clamp(17px,1.3vw,19px);
  letter-spacing:.05em;
}
#page-keno-software .ks-area__pin{display:block;flex:0 0 14px;}
#page-keno-software a.ks-tel{
  display:inline-block;
  margin-bottom:10px;
  font-size:16px;
  font-weight:700;
  color:var(--ks-flame);
  transition:color var(--ks-t);
}
#page-keno-software a.ks-tel:hover{color:var(--ks-flame-d);}

/* ── CTA modal — close control + the embedded widget, nothing else ──────── */
#page-keno-software .ks-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding: 100px 16px 24px 16px;
  overflow-y:auto;
  background:rgba(8,29,23,.72);
}
#page-keno-software .ks-modal.is-open{display:flex;}
#page-keno-software .ks-modal__box{
  position:relative;
  width:100%;
  max-width:620px;
  padding:52px 12px 12px;
  background:var(--ks-paper);
  border-top:4px solid var(--ks-flame);
}
#page-keno-software .ks-modal__x{
  position:absolute;
  top:12px;
  right:12px;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid var(--ks-line-2);
  border-radius:2px;
  background:var(--ks-paper);
  color:var(--ks-text);
  cursor:pointer;
  transition:background-color var(--ks-t), color var(--ks-t);
}
#page-keno-software .ks-modal__x:hover{
  background:var(--ks-flame);
  color:#ffffff;
}
#page-keno-software .ks-modal__x:focus-visible{
  outline:3px solid var(--ks-flame);
  outline-offset:2px;
}
#page-keno-software .ks-modal iframe{
  display:block;
  width:100%;
  min-height:860px;
  border:0;
}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1040px){
  #page-keno-software .ks-h2{max-width:24ch;}
  #page-keno-software .ks-open__grid{grid-template-columns:minmax(0,1fr) minmax(0,300px);}
  #page-keno-software .ks-hire__grid{grid-template-columns:minmax(0,360px) minmax(0,1fr);}
  #page-keno-software .ks-areas__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  #page-keno-software .ks-stories__rail{gap:22px;}
}
@media (max-width:880px){
  #page-keno-software .ks-open__grid,
  #page-keno-software .ks-hire__grid,
  #page-keno-software .ks-collab__row,
  #page-keno-software .ks-why__pair,
  #page-keno-software .ks-row{grid-template-columns:minmax(0,1fr);}
  #page-keno-software .ks-open__plate{max-width:420px;}
  #page-keno-software .ks-hire__plate{max-width:480px;}
  #page-keno-software .ks-collab__row{gap:26px;}
  #page-keno-software .ks-collab__act{justify-self:start;}
  #page-keno-software .ks-row{gap:10px;}
  #page-keno-software .ks-quad__grid{grid-template-columns:minmax(0,1fr);}
  #page-keno-software .ks-stories__rail{grid-template-columns:minmax(0,1fr);gap:34px;}
  #page-keno-software .ks-quote{max-width:60ch;}
}
@media (max-width:600px){
  #page-keno-software{font-size:16px;}
  #page-keno-software .ks-h2{max-width:none;}
  #page-keno-software .ks-areas__grid{grid-template-columns:minmax(0,1fr);}
  #page-keno-software .ks-hero{padding-inline:20px;}
  #page-keno-software p.ks-hero__trust{display:block;}
  #page-keno-software button.ks-btn{width:100%;justify-content:center;}
  #page-keno-software .ks-row{margin-inline:0;padding-inline:0;}
  /* the band's action stretches with every other CTA on the page: an 880px
     rule pins it to max-content, which would leave this one button short */
  #page-keno-software .ks-collab__act{justify-self:stretch;}
  #page-keno-software .ks-modal__box{padding:48px 8px 8px;}
  #page-keno-software .ks-q__s{gap:16px;}
}

/* ── rule 26: nothing above is self-starting, and what remains is opt-out ── */
@media (prefers-reduced-motion: reduce){
  #page-keno-software *,
  #page-keno-software *::before,
  #page-keno-software *::after{
    animation:none !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}