/* ══════════════════════════════════════════════════════════════════════════
   /case-study/sportivaplay-fantasy-sports-app-case-study — page-isolated sheet
   AISHTMLNEWDESIGN-283   (content record: AISHTMLNEWDESIGN-555)

   Visual direction: "FLOODLIT PITCH".

   A night fixture is three things, and this page is built from those three
   and nothing else:

     · CHALK  — the pitch marking and the page's ground (#f7faf6). Every prose
                section sits on it. The hairline between sections is the same
                chalk line, one pixel wide.
     · TURF   — the pitch itself (#0e3b2c), deepening to BOARD (#0a2a20) for
                the results scoreboard. Used as punctuation between chalk
                sections, never as the page's ground.
     · FLOOD  — the floodlight (#f5a623). The single accent that carries an
                action. One action hue. No gradient family, no glow.

   Composition motif: the JERSEY NUMBER (a numbered disc, used for challenges
   and the contents list), the SCOREBOARD CELL (a dark plate carrying one
   figure) and the CHALK LINE (the hairline rule that separates every band).
   Sections are composed as a centred hero, a crumb bar, a numbered contents
   list, an asymmetric label/prose split, a vertical numbered stack, a
   three-column mapping table, a four-cell scoreboard, a two-column definition
   list, a centred quote and an address grid — no two sections repeat a
   layout, and there is no three-up feature-card grid anywhere on the page.

   Every rule is scoped to #page-case-study-sportivaplay-fantasy-sports-app-case-study,
   so this file can never touch the shared header/footer, which is owned by
   /assets/css/ais-*.css + ais-header.js / ais-footer.js. The UA body-margin
   reset is NOT restated here — /assets/css/ais-layout.css owns it.

   Design contract (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 (#1c2b24 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: zero @keyframes, zero 'infinite';
                 transitions only, each a finite response to hover/focus/click
   ══════════════════════════════════════════════════════════════════════════ */

#page-case-study-sportivaplay-fantasy-sports-app-case-study{
  /* ── palette ─────────────────────────────────────────────────────────── */
  --chalk:#f7faf6;          /* pitch marking — the page's ground        */
  --chalk-2:#eaf1e6;        /* deeper ground                            */
  --line:#d3e0cd;           /* the chalk line, hairline on chalk        */

  --turf:#0e3b2c;           /* the pitch — punctuation only             */
  --turf-2:#134a37;
  --board:#0a2a20;          /* the scoreboard, deepest                  */
  --line-dark:rgba(220,235,227,.18);

  --body:#1c2b24;           /* AA on chalk                              */
  --body-soft:#3d5147;      /* AA on chalk, secondary                   */
  --body-light:#dcebe3;     /* AA on turf                               */

  --flood:#f5a623;          /* the floodlight — the one action hue      */
  --flood-deep:#8a5000;     /* the signal that passes AA on chalk       */
  --ink-on-flood:#22160a;   /* AA on the floodlight                     */

  --wrap:1200px;
  --col:900px;

  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--body);
  background:var(--chalk);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

#page-case-study-sportivaplay-fantasy-sports-app-case-study *,
#page-case-study-sportivaplay-fantasy-sports-app-case-study *::before,
#page-case-study-sportivaplay-fantasy-sports-app-case-study *::after{box-sizing:border-box;}

#page-case-study-sportivaplay-fantasy-sports-app-case-study h1,
#page-case-study-sportivaplay-fantasy-sports-app-case-study h2,
#page-case-study-sportivaplay-fantasy-sports-app-case-study h3{
  text-align:left;
  margin:0;
  font-weight:800;
  letter-spacing:-.015em;
  line-height:1.2;
}
#page-case-study-sportivaplay-fantasy-sports-app-case-study p{margin:0;}
#page-case-study-sportivaplay-fantasy-sports-app-case-study ul,
#page-case-study-sportivaplay-fantasy-sports-app-case-study ol{margin:0;padding:0;list-style:none;}
#page-case-study-sportivaplay-fantasy-sports-app-case-study img{max-width:100%;height:auto;}

.spfs-wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px;}

/* ── the one action hue ─────────────────────────────────────────────────── */
.spfs-cta{
  display:inline-block;
  margin-top:36px;
  padding:16px 34px;
  border:2px solid transparent;
  border-radius:999px;
  font:700 17px/1.2 Inter,system-ui,sans-serif;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.spfs-cta--flood{background:var(--flood);color:var(--ink-on-flood);box-shadow:0 6px 20px rgba(245,166,35,.30);}
.spfs-cta--flood:hover,.spfs-cta--flood:focus-visible{transform:translateY(-2px);box-shadow:0 10px 28px rgba(245,166,35,.42);}
.spfs-cta--turf{background:var(--turf);color:var(--body-light);box-shadow:0 6px 20px rgba(14,59,44,.24);}
.spfs-cta--turf:hover,.spfs-cta--turf:focus-visible{transform:translateY(-2px);background:var(--turf-2);box-shadow:0 10px 28px rgba(14,59,44,.34);}
.spfs-cta:focus-visible{outline:3px solid var(--flood-deep);outline-offset:3px;}

/* ══ HERO ══ rule 24: full-bleed, STATIC gradient, no image layer ────────── */
.spfs-hero{
  background:linear-gradient(160deg,var(--turf) 0%,var(--board) 62%,#08211a 100%);
  padding:84px 0 76px;
  border-bottom:1px solid var(--line-dark);
}
.spfs-hero__col{max-width:var(--col);text-align:center;}
/* every hero child centres explicitly — the global h1..h3 rule is left-aligned,
   so each heading in here restates it rather than relying on inheritance */
.spfs-hero__col > *{text-align:center;}
.spfs-hero__eyebrow{
  font-size:16px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--flood);margin-bottom:18px;
}
.spfs-hero__h{
  font-size:clamp(30px,4.4vw,52px);
  color:#fff;
  text-align:center;
  text-wrap:balance;
}
.spfs-hero__lede{
  margin:24px auto 0;
  max-width:760px;
  font-size:18px;
  line-height:1.75;
  color:var(--body-light);
}
.spfs-tech__h{
  margin-top:38px;   /* matches .dmbg-hero__note on the dicemasters reference */
  font-size:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--flood);
  text-align:center;
}
.spfs-tech{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin-top:0;
}
.spfs-tech li{
  padding:9px 18px;
  border:1px solid rgba(245,166,35,.42);
  border-radius:999px;
  font-size:16px;font-weight:600;
  color:var(--body-light);
  background:rgba(245,166,35,.08);
}

/* ══ BREADCRUMB ══ */
.spfs-crumbbar{background:var(--chalk-2);border-bottom:1px solid var(--line);}
.spfs-crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:16px 0;font-size:16px;color:var(--body-soft);
}
.spfs-crumb a{color:var(--flood-deep);font-weight:600;border-bottom:1px solid transparent;transition:border-color .18s ease;}
.spfs-crumb a:hover,.spfs-crumb a:focus-visible{border-bottom-color:var(--flood-deep);}
.spfs-crumb [aria-current="page"]{color:var(--body);font-weight:600;}

/* ══ CONTENTS ══ numbered jump list */
.spfs-toc{background:var(--chalk);padding:56px 0;border-bottom:1px solid var(--line);}
.spfs-toc__h{
  font-size:16px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--flood-deep);margin-bottom:24px;
}
.spfs-toc__list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 40px;}
.spfs-toc__list a{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;
  border:1px solid var(--line);border-radius:12px;
  background:#fff;
  font-size:17px;font-weight:600;color:var(--body);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.spfs-toc__list a:hover,.spfs-toc__list a:focus-visible{
  border-color:var(--flood);transform:translateX(3px);
  box-shadow:0 4px 14px rgba(14,59,44,.08);
}
.spfs-num{
  flex:0 0 auto;
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--turf);color:var(--flood);
  font-size:16px;font-weight:700;
}

/* ══ SECTION SHELLS ══ */
.spfs-sec{padding:76px 0;}
.spfs-sec--chalk{background:var(--chalk);border-bottom:1px solid var(--line);}
.spfs-sec--turf{background:var(--turf);}
.spfs-sec--board{background:var(--board);}
.spfs-h2{font-size:clamp(25px,3vw,36px);color:var(--body);}
.spfs-h2--onturf{color:#fff;}

/* ══ ABOUT ══ asymmetric label / prose split */
.spfs-split{display:grid;grid-template-columns:1fr 2fr;gap:56px;align-items:start;}
.spfs-split__meta{
  margin-top:16px;font-size:16px;font-weight:600;color:var(--flood-deep);
  display:flex;flex-direction:column;gap:2px;
}
.spfs-split__meta span{color:var(--body-soft);font-weight:400;}
.spfs-split__prose p{font-size:18px;line-height:1.8;color:var(--body);}

/* ══ CHALLENGES ══ vertical numbered stack */
.spfs-chal{margin-top:40px;display:flex;flex-direction:column;gap:4px;}
.spfs-chal__item{display:flex;gap:22px;align-items:flex-start;padding:24px 0;border-top:1px solid var(--line-dark);}
.spfs-chal__item:first-child{border-top:0;}
.spfs-jersey{
  flex:0 0 auto;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(245,166,35,.12);
  border:1px solid rgba(245,166,35,.45);
  color:var(--flood);
  font-size:20px;font-weight:800;
}
.spfs-chal__h{font-size:21px;color:#fff;margin-bottom:6px;}
.spfs-chal__body p{font-size:17px;line-height:1.75;color:var(--body-light);}
.spfs-inlink{color:var(--flood);font-weight:600;border-bottom:1px solid rgba(245,166,35,.5);transition:border-color .18s ease;}
.spfs-inlink:hover,.spfs-inlink:focus-visible{border-bottom-color:var(--flood);}

/* ══ SOLUTION MAPPING ══ three-column table */
.spfs-tablewrap{margin-top:36px;overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#fff;}
.spfs-map{width:100%;border-collapse:collapse;font-size:16px;}
.spfs-map__cap{
  caption-side:top;text-align:left;padding:20px 22px 0;
  font-size:16px;color:var(--body-soft);
}
.spfs-map th{
  text-align:left;padding:18px 22px;
  background:var(--turf);color:var(--flood);
  font-size:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border-bottom:1px solid var(--line);
}
.spfs-map td{
  padding:20px 22px;vertical-align:top;
  border-top:1px solid var(--line);
  font-size:16px;line-height:1.7;color:var(--body);
}
.spfs-map tbody tr:nth-child(even){background:var(--chalk);}

/* ══ SCOREBOARD ══ four cells, one figure each */
.spfs-board{
  margin-top:40px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.spfs-board__cell{
  padding:30px 24px;
  border:1px solid var(--line-dark);border-radius:14px;
  background:rgba(255,255,255,.045);
  display:flex;flex-direction:column;gap:12px;
}
.spfs-board__fig{
  font-size:clamp(36px,4vw,50px);font-weight:800;line-height:1;
  color:var(--flood);letter-spacing:-.02em;
}
.spfs-board__txt{font-size:16px;line-height:1.65;color:var(--body-light);}

/* ══ WHY AIS ══ two-column definition pairs */
.spfs-why{margin-top:40px;display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px;}
.spfs-why__pair{padding:26px 0;border-top:1px solid var(--line);}
.spfs-why__pair:nth-child(1),.spfs-why__pair:nth-child(2){border-top:0;}
.spfs-why dt{font-size:20px;font-weight:700;color:var(--body);margin-bottom:6px;}
.spfs-why dd{margin:0;font-size:17px;line-height:1.7;color:var(--body-soft);}

/* ══ CLIENT QUOTE ══ centred band */
.spfs-quote__col{max-width:var(--col);text-align:center;}
.spfs-quote .spfs-h2{text-align:center;}
.spfs-area .spfs-h2{text-align:center;}
.spfs-quote__q{margin:28px 0 0;}
.spfs-quote__q p{
  font-size:clamp(20px,2.4vw,28px);line-height:1.6;font-weight:600;
  color:#fff;text-wrap:balance;
}

/* ══ AREA WE SERVE ══ address grid */
.spfs-regions{
  margin-top:40px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:24px;
}
/* each region is a card — bordered panel on the chalk ground, so the four
   countries read as four objects rather than four columns of loose text */
.spfs-region{
  padding:28px 26px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:0 2px 10px rgba(14,59,44,.05);
}
.spfs-region h3{
  display:flex;align-items:center;gap:9px;
  font-size:16px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--flood-deep);margin-bottom:12px;
}
.spfs-region h3 img{width:14px;height:20px;flex:0 0 auto;}
.spfs-tel{display:inline-block;font-size:17px;font-weight:700;color:var(--body);margin-bottom:8px;border-bottom:1px solid transparent;transition:border-color .18s ease;}
.spfs-tel:hover,.spfs-tel:focus-visible{border-bottom-color:var(--body);}
.spfs-region p{font-size:16px;line-height:1.7;color:var(--body-soft);}

/* ══ CTA MODAL ══ */
.spfs-modal{
  display:none;position:fixed;inset:0;z-index:100000;
  background:rgba(10,42,32,.72);
  padding:24px 16px;overflow-y:auto;
}
/* The OVERLAY scrolls, never the box. A scrolling box draws its scrollbar in a
   square track pinned to its right edge, so the panel would render rounded on
   the left and squared on the right the moment the form got taller than the
   viewport. flex + margin:auto centres it without that. */
.spfs-modal.is-open{display:flex;}
.spfs-modal__box{
  position:relative;width:100%;max-width:620px;margin:auto;
  background:#fff;border-radius:16px;
  overflow:hidden;   /* hidden, not auto — clips the embed's square corners */
  box-shadow:0 24px 70px rgba(8,33,26,.42);
}
.spfs-modal__x{
  position:absolute;top:12px;right:14px;z-index:2;
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--line);background:#fff;color:var(--body);
  cursor:pointer;transition:background-color .18s ease,color .18s ease;
}
.spfs-modal__x:hover,.spfs-modal__x:focus-visible{background:var(--turf);color:#fff;}
.spfs-modal__box iframe{display:block;width:100%;min-height:860px;border:0;}

/* ══ RESPONSIVE ══ tested at 1280 / 768 / 375 ─────────────────────────────── */
@media (max-width:1024px){
  .spfs-board{grid-template-columns:repeat(2,1fr);}
  .spfs-regions{grid-template-columns:repeat(2,1fr);}
  .spfs-split{grid-template-columns:1fr;gap:24px;}
}
@media (max-width:768px){
  .spfs-sec{padding:56px 0;}
  .spfs-hero{padding:64px 0 56px;}
  .spfs-toc__list{grid-template-columns:1fr;}
  .spfs-why{grid-template-columns:1fr;}
  .spfs-why__pair:nth-child(2){border-top:1px solid var(--line);}

  /* the mapping table becomes five stacked records — each cell keeps its
     column name via data-h, so the three-way mapping survives the reflow */
  .spfs-tablewrap{overflow-x:visible;border:0;background:transparent;}
  .spfs-map thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .spfs-map,.spfs-map tbody,.spfs-map tr,.spfs-map td{display:block;width:100%;}
  .spfs-map tr{
    margin-bottom:16px;border:1px solid var(--line);border-radius:14px;
    background:#fff;overflow:hidden;
  }
  .spfs-map tbody tr:nth-child(even){background:#fff;}
  .spfs-map td{border-top:1px solid var(--line);}
  .spfs-map tr td:first-child{border-top:0;}
  .spfs-map td::before{
    content:attr(data-h);
    display:block;margin-bottom:6px;
    font-size:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--flood-deep);
  }
}
@media (max-width:520px){
  .spfs-wrap{padding:0 18px;}
  .spfs-board{grid-template-columns:1fr;}
  .spfs-regions{grid-template-columns:1fr;}
  .spfs-chal__item{gap:16px;}
  .spfs-jersey{width:44px;height:44px;font-size:18px;}
  .spfs-cta{width:100%;text-align:center;}
  .spfs-modal{padding:12px;}
  .spfs-modal__box{max-width:none;border-radius:14px;}
}

/* ── heading alignment overrides ──────────────────────────────────────────
   The reset above is ID-scoped (1,0,1), so a bare .class rule (0,1,0) cannot
   override its text-align/margin. These restate at ID specificity. */
#page-case-study-sportivaplay-fantasy-sports-app-case-study .spfs-hero__col > *,
#page-case-study-sportivaplay-fantasy-sports-app-case-study .spfs-hero__h,
#page-case-study-sportivaplay-fantasy-sports-app-case-study .spfs-tech__h{text-align:center;}
#page-case-study-sportivaplay-fantasy-sports-app-case-study .spfs-tech__h{margin-top:38px;margin-bottom:14px;}
#page-case-study-sportivaplay-fantasy-sports-app-case-study .spfs-quote .spfs-h2,
#page-case-study-sportivaplay-fantasy-sports-app-case-study .spfs-area .spfs-h2{text-align:center;}

/* ── spacing restated at ID specificity ───────────────────────────────────
   The reset at the top of this file sets `margin:0` on h1-h3/p/ul/ol at ID
   specificity (1,0,1). Every 0,1,0 class rule below it that declared a margin
   was therefore silently discarded — measured on staging, ten of them were
   resolving to 0px. Restated here so they actually apply. Verify with
   getComputedStyle, never by eye: a tight layout looks deliberate. */
#page-case-study-sportivaplay-fantasy-sports-app-case-study .spfs-hero__eyebrow{margin-bottom:18px;}
#page-case-study-sportivaplay-fantasy-sports-app-case-study .spfs-hero__lede{margin:24px auto 0;}
#page-case-study-sportivaplay-fantasy-sports-app-case-study .spfs-tech{margin-top:0;}   /* the 14px gap is the label's margin-bottom, per the dicemasters reference */
#page-case-study-sportivaplay-fantasy-sports-app-case-study .spfs-toc__h{margin-bottom:24px;}
#page-case-study-sportivaplay-fantasy-sports-app-case-study .spfs-split__meta{margin-top:16px;}
#page-case-study-sportivaplay-fantasy-sports-app-case-study .spfs-chal{margin-top:40px;}
#page-case-study-sportivaplay-fantasy-sports-app-case-study .spfs-chal__h{margin-bottom:6px;}
#page-case-study-sportivaplay-fantasy-sports-app-case-study .spfs-board{margin-top:40px;}
#page-case-study-sportivaplay-fantasy-sports-app-case-study .spfs-regions{margin-top:40px;}
#page-case-study-sportivaplay-fantasy-sports-app-case-study .spfs-region h3{margin-bottom:12px;}