/* =====================================================================
   /case-study/lottery-software — AISHTMLNEWDESIGN-492
   Visual direction: SYNDICATE BOARD

   The page is a lottery syndicate's operations board. Two bottle-green
   ink bands carry the claim and the answer; everything between them sits
   on warm board stock. One vermilion signal, used only where the page
   asks for something or marks a position. Draw-slip chips index the
   sections; perforation hairlines separate register rows.

   ISOLATION CONTRACT: every selector below begins with
   #page-case-study-lottery-software. No bare element selectors, no
   body/html rules (the document reset is owned by ais-layout.css — see
   frontend-design skill §33), nothing touching #ais-header / #ais-footer.

   MOTION (rule 26): the only transitions are hover / focus / open state
   on interactive elements. No keyframes, no infinite animation, no
   scroll-driven effects of any kind.
   ===================================================================== */

#page-case-study-lottery-software{
  --syn-ink:#0e2622;
  --syn-ink-2:#143630;
  --syn-board:#fbf8f3;
  --syn-board-2:#f1ebe0;
  --syn-line:#ddd3c4;
  --syn-line-2:#c8bca8;
  --syn-signal:#e0451f;         /* marks only: rules, dots, fills */
  --syn-signal-text:#a8330f;    /* the same signal, AA as TEXT (6.4:1 on board) */
  --syn-signal-hi:#ff5b38;
  --syn-text:#151b1a;
  --syn-text-2:#3d4744;
  --syn-on-ink:#f4f1ea;
  --syn-on-ink-2:#c2d6d0;
  --syn-focus:#ff8a5c;

  /* CTA palette cloned from /our-values .ov-btn--jade — every value below was
     read with design-clone tools/extract_design.py against
     http://192.168.1.4:1375/our-values, not eyeballed:
       fill #0F7A68 · text #FFFFFF · hover #0b5d50 · focus ring #57c9b4
     Jade sits in the same bottle-green family as this page's ink, so actions
     read as one system while vermilion stays what it always was: a MARK
     colour for rules, dots and numerals, never a button fill. */
  --syn-jade:#0f7a68;
  --syn-jade-dk:#0b5d50;
  --syn-jade-lt:#57c9b4;

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

/* ---------- shared scaffolding ---------------------------------- */

#page-case-study-lottery-software .syn-wrap{
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  padding-inline:24px;
  box-sizing:border-box;
}
#page-case-study-lottery-software .syn-wrap--read{max-width:840px;}

#page-case-study-lottery-software .syn-sec{
  padding-block:clamp(56px,7vw,104px);
}
#page-case-study-lottery-software .syn-sec--board{background:var(--syn-board);}
#page-case-study-lottery-software .syn-sec--board2{background:var(--syn-board-2);}
#page-case-study-lottery-software .syn-sec--ink{
  background:linear-gradient(160deg,var(--syn-ink) 0%,var(--syn-ink-2) 100%);
}

#page-case-study-lottery-software .syn-h2{
  margin:0 0 28px;
  font-size:clamp(30px,3.6vw,46px);
  line-height:1.12;
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--syn-text);
  text-wrap:balance;
}
#page-case-study-lottery-software .syn-h2--onink{color:var(--syn-on-ink);}
#page-case-study-lottery-software .syn-h2--centre{text-align:center;}

#page-case-study-lottery-software .syn-h3{
  margin:0 0 10px;
  font-size:clamp(19px,1.5vw,23px);
  line-height:1.3;
  font-weight:700;
  color:var(--syn-text);
}
#page-case-study-lottery-software .syn-h3--onink{color:var(--syn-on-ink);}

#page-case-study-lottery-software .syn-body{
  margin:0;
  font-size:17px;
  line-height:1.68;
  color:var(--syn-text-2);
}
#page-case-study-lottery-software .syn-body--onink{color:var(--syn-on-ink-2);}

/* ---------- buttons --------------------------------------------- */

/* Cloned from #page-our-values .ov-btn / .ov-btn--jade. Measured values:
   display inline-block · border 0 · radius 2px · 700 16px/1 Inter ·
   letter-spacing .01em · padding 17px 30px (= 50px tall) ·
   transition background-color/color/transform .18s ease.
   The old build had a 2px border, 17px type, min-height 52px and an ::after
   arrow — none of which the reference has, so all four are gone. */
#page-case-study-lottery-software .syn-btn{
  display:inline-block;
  border:0;
  cursor:pointer;
  font-family:inherit;
  font-size:16px;
  font-weight:700;
  line-height:1;
  letter-spacing:.01em;
  padding:17px 30px;
  border-radius:2px;
  text-align:center;
  text-decoration:none;
  transition:background-color .18s ease,color .18s ease,transform .18s ease;
}
#page-case-study-lottery-software .syn-btn--jade{
  background:var(--syn-jade);
  color:#fff;
}
#page-case-study-lottery-software .syn-btn--jade:hover{
  background:var(--syn-jade-dk);
  transform:translateY(-1px);
}
#page-case-study-lottery-software .syn-btn:focus-visible,
#page-case-study-lottery-software a:focus-visible,
#page-case-study-lottery-software summary:focus-visible{
  outline:3px solid var(--syn-jade-lt);
  outline-offset:3px;
}

/* Cloned from #page-our-values .ov-cta-row: the row is the LAST child of the
   section's own wrap, so it inherits that section's ground rather than
   introducing a band of its own. */
#page-case-study-lottery-software .syn-act{
  margin-top:clamp(26px,3.2vw,42px);
  display:flex;
}
#page-case-study-lottery-software .syn-hero__act{
  margin-top:clamp(26px,3.2vw,42px);
  display:flex;
  justify-content:center;
}

/* ---------- hero (rule 24: full-bleed, image-free, static) ------- */

#page-case-study-lottery-software .syn-hero{
  width:100%;
  padding:clamp(64px,8vw,116px) 24px clamp(52px,6vw,88px);
  background:linear-gradient(168deg,#0b1f1c 0%,var(--syn-ink) 46%,var(--syn-ink-2) 100%);
  box-sizing:border-box;
}
#page-case-study-lottery-software .syn-hero__inner{
  max-width:900px;
  margin-inline:auto;
  text-align:center;
}
#page-case-study-lottery-software p.syn-hero__eyebrow{
  display:inline-block;
  margin:0 0 22px;
  padding:7px 16px;
  border:1px solid rgba(255,91,56,.55);
  border-radius:2px;
  background:rgba(224,69,31,.16);
  color:#ffc4b2;
  font-size:16px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
#page-case-study-lottery-software .syn-hero__h1{
  margin:0 0 18px;
  font-size:clamp(38px,5.4vw,66px);
  line-height:1.05;
  font-weight:900;
  letter-spacing:-0.03em;
  color:#fff;
  text-wrap:balance;
}
#page-case-study-lottery-software p.syn-hero__kicker{
  margin:0 0 20px;
  font-size:18px;
  font-weight:700;
  color:var(--syn-signal-hi);
}
#page-case-study-lottery-software p.syn-hero__lede{
  margin:0 auto 16px;
  max-width:760px;
  font-size:18px;
  line-height:1.66;
  color:#dfeae6;
}

#page-case-study-lottery-software .syn-hero__stack{
  margin-top:44px;
  padding-top:28px;
  border-top:1px dashed rgba(194,214,208,.38);
}
#page-case-study-lottery-software .syn-hero__stackh{
  margin:0 0 16px;
  font-size:16px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--syn-on-ink-2);
}
#page-case-study-lottery-software .syn-stack{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
/* chip owns its foreground at (1,2,0) — beats any (1,1,1) prose rule (§39A) */
#page-case-study-lottery-software .syn-stack li.syn-stack__item{
  padding:9px 16px;
  border:1px solid rgba(194,214,208,.42);
  border-radius:2px;
  background:rgba(255,255,255,.07);
  color:#eef5f2;
  font-size:16px;
  font-weight:600;
}

/* ---------- breadcrumb ------------------------------------------ */

#page-case-study-lottery-software .syn-crumb{
  background:var(--syn-board);
  border-bottom:1px solid var(--syn-line);
  padding-block:18px;
}
#page-case-study-lottery-software .syn-crumb__bar{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
  font-size:16px;
  color:var(--syn-text-2);
}
#page-case-study-lottery-software .syn-crumb__back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border:1px solid var(--syn-line-2);
  border-radius:2px;
  background:#fff;
  transition:border-color .16s ease;
}
#page-case-study-lottery-software .syn-crumb__back:hover{border-color:var(--syn-signal);}
#page-case-study-lottery-software .syn-crumb__bar a{color:var(--syn-text-2);}
#page-case-study-lottery-software .syn-crumb__bar a:hover{color:var(--syn-signal-text);}
#page-case-study-lottery-software .syn-crumb__slash{color:#6f6558;}
#page-case-study-lottery-software .syn-crumb__here{
  color:var(--syn-text);
  font-weight:600;
}

/* ---------- case-study index (draw slips) ----------------------- */

#page-case-study-lottery-software .syn-index{
  background:var(--syn-board);
  padding-block:clamp(44px,5vw,72px);
}
#page-case-study-lottery-software .syn-index__h{
  margin:0 0 24px;
  font-size:clamp(22px,2.2vw,30px);
  font-weight:800;
  letter-spacing:-0.01em;
  color:var(--syn-text);
}
#page-case-study-lottery-software .syn-index__list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--syn-line);
  border-left:1px solid var(--syn-line);
}
#page-case-study-lottery-software .syn-index__list > li{
  border-right:1px solid var(--syn-line);
  border-bottom:1px solid var(--syn-line);
}
#page-case-study-lottery-software .syn-index__list a{
  display:flex;
  align-items:center;
  gap:18px;
  min-height:76px;
  padding:16px 20px;
  color:var(--syn-text);
  background:#fff;
  transition:background-color .16s ease,color .16s ease;
}
#page-case-study-lottery-software .syn-index__list a:hover{
  background:var(--syn-ink);
  color:var(--syn-on-ink);
}
#page-case-study-lottery-software .syn-index__list a:hover .syn-slip{
  background:var(--syn-signal-hi);
  color:#210a03;
  border-color:var(--syn-signal-hi);
}
#page-case-study-lottery-software .syn-index__list .syn-slip{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border:1px solid var(--syn-line-2);
  border-radius:50%;
  background:var(--syn-board-2);
  color:var(--syn-text);
  font-size:16px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
#page-case-study-lottery-software .syn-index__t{
  font-size:17px;
  font-weight:600;
  line-height:1.35;
}

/* ---------- about ------------------------------------------------ */

#page-case-study-lottery-software .syn-about .syn-wrap{
  border-left:4px solid var(--syn-signal);
  padding-left:28px;
}
/* 2026-09-24 — operator asked for ONE text size across the About section.
   There was a `.syn-prose--lead` opening paragraph at 20px / weight 500 /
   darker ink; it is removed rather than resized, so the stylesheet is not
   left carrying a rule nothing uses. Every About paragraph is now this one
   rule: 17px, weight 400, --syn-text-2. */
#page-case-study-lottery-software p.syn-prose{
  margin:0 0 20px;
  font-size:17px;
  line-height:1.72;
  color:var(--syn-text-2);
}
#page-case-study-lottery-software p.syn-prose:last-child{margin-bottom:0;}

/* ---------- key features (board register) ----------------------- */

#page-case-study-lottery-software .syn-reg{
  margin:0;
  border-top:2px solid var(--syn-text);
}
#page-case-study-lottery-software .syn-reg__row{
  display:grid;
  grid-template-columns:minmax(220px,300px) 1fr;
  gap:24px;
  padding:22px 4px;
  border-bottom:1px dashed var(--syn-line-2);
}
#page-case-study-lottery-software .syn-reg__t{
  margin:0;
  font-size:19px;
  font-weight:700;
  line-height:1.35;
  color:var(--syn-text);
}
#page-case-study-lottery-software .syn-reg__d{
  margin:0;
  min-height:1px;
}

/* ---------- elevate (numbered stack) ---------------------------- */

#page-case-study-lottery-software .syn-stacklist{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}
#page-case-study-lottery-software .syn-stackitem{
  display:grid;
  grid-template-columns:92px 1fr;
  gap:22px;
  align-items:start;
  padding:26px 0;
  border-top:1px solid var(--syn-line);
}
#page-case-study-lottery-software .syn-stackitem:first-child{border-top:0;}
#page-case-study-lottery-software .syn-ghost{
  font-size:54px;
  font-weight:900;
  line-height:1;
  font-variant-numeric:tabular-nums;
  color:#8a7f6d;
  letter-spacing:-0.04em;
}

/* ---------- challenges (notched plates) ------------------------- */

#page-case-study-lottery-software .syn-plates{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin:0;
  padding:0;
  list-style:none;
}
#page-case-study-lottery-software .syn-plate{
  position:relative;
  padding:28px 26px;
  background:#fff;
  border:1px solid var(--syn-line);
  border-radius:2px;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);
}
#page-case-study-lottery-software .syn-plate::before{
  content:"";
  position:absolute;
  left:26px;
  top:0;
  width:46px;
  height:3px;
  background:var(--syn-signal);
}

/* ---------- solutions (ink band) -------------------------------- */

#page-case-study-lottery-software .syn-sollist{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid rgba(194,214,208,.28);
}
#page-case-study-lottery-software .syn-sol__item{
  padding:28px 30px 28px 0;
  border-bottom:1px solid rgba(194,214,208,.28);
}
#page-case-study-lottery-software .syn-sol__item:nth-child(even){
  padding-left:30px;
  border-left:1px solid rgba(194,214,208,.28);
}

/* ---------- FAQ --------------------------------------------------- */

#page-case-study-lottery-software .syn-faqlist{
  border-top:2px solid var(--syn-text);
}
#page-case-study-lottery-software .syn-faq__item{
  border-bottom:1px solid var(--syn-line-2);
}
#page-case-study-lottery-software .syn-faq__q{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:22px 4px;
  cursor:pointer;
  list-style:none;
}
#page-case-study-lottery-software .syn-faq__q::-webkit-details-marker{display:none;}
#page-case-study-lottery-software .syn-faq__qt{
  margin:0;
  font-size:19px;
  line-height:1.4;
  font-weight:700;
  color:var(--syn-text);
}
#page-case-study-lottery-software .syn-faq__q:hover .syn-faq__qt{color:var(--syn-signal-text);}
#page-case-study-lottery-software .syn-faq__mark{
  position:relative;
  flex:0 0 auto;
  width:26px;
  height:26px;
  margin-top:2px;
  border:1px solid var(--syn-line-2);
  border-radius:50%;
  background:#fff;
  transition:background-color .16s ease,border-color .16s ease;
}
#page-case-study-lottery-software .syn-faq__mark::before,
#page-case-study-lottery-software .syn-faq__mark::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:11px;
  height:2px;
  margin:-1px 0 0 -5.5px;
  background:var(--syn-text);
  transition:transform .16s ease,opacity .16s ease;
}
#page-case-study-lottery-software .syn-faq__mark::after{transform:rotate(90deg);}
#page-case-study-lottery-software .syn-faq__item[open] .syn-faq__mark{
  background:var(--syn-signal);
  border-color:var(--syn-signal);
}
#page-case-study-lottery-software .syn-faq__item[open] .syn-faq__mark::before{background:#fff;}
#page-case-study-lottery-software .syn-faq__item[open] .syn-faq__mark::after{opacity:0;}
#page-case-study-lottery-software .syn-faq__a{
  padding:0 4px 26px;
}
#page-case-study-lottery-software p.syn-faq__ans{
  margin:0 0 10px;
  font-size:16px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--syn-signal-text);
}
#page-case-study-lottery-software .syn-ticks,
#page-case-study-lottery-software .syn-costs{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}
#page-case-study-lottery-software .syn-ticks li,
#page-case-study-lottery-software .syn-costs li{
  position:relative;
  padding-left:26px;
  font-size:17px;
  line-height:1.6;
  color:var(--syn-text-2);
}
#page-case-study-lottery-software .syn-ticks li::before{
  content:"";
  position:absolute;
  left:0;
  top:11px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--syn-signal);
}
#page-case-study-lottery-software .syn-costs li{
  padding:10px 0 10px 26px;
  border-bottom:1px dashed var(--syn-line-2);
  font-variant-numeric:tabular-nums;
}
#page-case-study-lottery-software .syn-costs li::before{
  content:"";
  position:absolute;
  left:0;
  top:19px;
  width:12px;
  height:2px;
  background:var(--syn-signal);
}
#page-case-study-lottery-software .syn-costs li:last-child{border-bottom:0;}

/* ---------- area we serve ---------------------------------------- */

#page-case-study-lottery-software .syn-servelist{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  margin:0;
  padding:0;
  list-style:none;
}
#page-case-study-lottery-software .syn-servelist__item{
  padding:26px 22px;
  background:#fff;
  border:1px solid var(--syn-line);
  border-top:3px solid var(--syn-ink);
  border-radius:2px;
}
#page-case-study-lottery-software .syn-servelist__r{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 12px;
  font-size:16px;
  font-weight:800;
  letter-spacing:.08em;
  color:var(--syn-text);
}
#page-case-study-lottery-software a.syn-tel{
  display:inline-block;
  margin-bottom:10px;
  font-size:17px;
  font-weight:700;
  color:var(--syn-signal-text);
}
#page-case-study-lottery-software a.syn-tel:hover{color:var(--syn-ink);}

/* ---------- CTA modal --------------------------------------------
   Geometry cloned from #page-our-values .ov-modal (measured with
   design-clone tools/extract_design.py, exit 0). That shell in turn
   adopts /about-us's au-modal deliberately: the enquiry panel is the
   SAME embedded GHL survey on every URL, so it must present identically
   everywhere. Only the close button's hover / focus colour follows this
   page's own accent, which is what the reference does too.

   The previous shell here carried the four defects the reference's own
   comment documents. The first two were MEASURED on this page first
   (1440x700, GHL resizer settled, iframe 870px):

     · align-items:center + max-height:92vh — box 644px around an 870px
       form, so 226px of the form hung below the panel;
     · overflow:auto on the BOX — the panel got its own scrollbar while
       the form had another, two scroll surfaces fighting one drag
       (measured: boxHasOwnScrollbar true, overlayHasScrollbar false);
     · radius 4px / shadow at full opacity — not the house shell;
     · iframe min-height 900px on mobile — the house value is 860
       everywhere, and diverging only shifts where the form gets clipped.

   Now: the OVERLAY scrolls, the box never does; start-aligned with
   margin:auto, so it centres when it fits and scrolls from the top when
   it does not; overflow:hidden on the box clips the form's square
   corners to the panel radius, which is the only way all four stay round.
   ------------------------------------------------------------------ */
#page-case-study-lottery-software .syn-modal{
  /* Pinned so the panel does not inherit this page's 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: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(9,18,16,.72);
}
#page-case-study-lottery-software .syn-modal.is-open{display:flex;}
#page-case-study-lottery-software .syn-modal__box{
  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);
  overflow:hidden;
}
#page-case-study-lottery-software .syn-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;
}
/* the one place the shell follows THIS page's accent, per the reference */
#page-case-study-lottery-software .syn-modal__x:hover{
  background:var(--syn-ink);
  color:#fff;
}
#page-case-study-lottery-software .syn-modal__x:focus-visible{
  outline:3px solid var(--syn-jade);
  outline-offset:2px;
}
#page-case-study-lottery-software .syn-modal iframe{
  display:block;
  width:100%;
  min-height:860px;
  border:0;
}

/* ---------- responsive -------------------------------------------- */

@media (max-width:1024px){
  #page-case-study-lottery-software .syn-servelist{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:860px){
  #page-case-study-lottery-software .syn-index__list{grid-template-columns:1fr;}
  #page-case-study-lottery-software .syn-plates{grid-template-columns:1fr;}
  #page-case-study-lottery-software .syn-sollist{grid-template-columns:1fr;}
  #page-case-study-lottery-software .syn-sol__item{
    padding:24px 0;
  }
  #page-case-study-lottery-software .syn-sol__item:nth-child(even){
    padding-left:0;
    border-left:0;
  }
  #page-case-study-lottery-software .syn-reg__row{
    grid-template-columns:1fr;
    gap:10px;
  }
  #page-case-study-lottery-software .syn-reg__d:empty{display:none;}
  #page-case-study-lottery-software .syn-stackitem{
    grid-template-columns:1fr;
    gap:10px;
  }
  #page-case-study-lottery-software .syn-ghost{font-size:40px;}
}

@media (max-width:640px){
  #page-case-study-lottery-software .syn-servelist{grid-template-columns:1fr;}
  #page-case-study-lottery-software .syn-about .syn-wrap{
    padding-left:20px;
    border-left-width:3px;
  }
  /* reference: .ov-btn{width:100%;text-align:center;padding:16px 22px} */
  #page-case-study-lottery-software .syn-btn{
    width:100%;
    text-align:center;
    padding:16px 22px;
  }
  #page-case-study-lottery-software .syn-act,
  #page-case-study-lottery-software .syn-hero__act{margin-top:24px;}
}

@media (prefers-reduced-motion:reduce){
  #page-case-study-lottery-software *,
  #page-case-study-lottery-software *::before,
  #page-case-study-lottery-software *::after{
    animation:none !important;
    transition-duration:.01ms !important;
  }
}