/* /case-study/fantasy-football-app — AISHTMLNEWDESIGN-491
   Page-owned styles. EVERY selector is scoped to #page-case-study-fantasy-football-app or a
   csff- 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.

   VISUAL DIRECTION — DRAFT BOARD
   Pick-numbered plates on bone paper, ink bands, hard-offset rules and a
   printer's red strike. Everything is flat ink on paper: 2px borders, offset
   block shadows, no photography, no running animation (rule 26). Motion exists
   only as a finite hover/focus response. */

/* ---------- tokens & base ---------- */
#page-case-study-fantasy-football-app {
  --csff-bone: #f7f3ea;
  --csff-paper: #fffdf7;
  --csff-ink: #182430;
  --csff-red: #c1272d;
  --csff-text: #22303c;
  --csff-muted: #4a5764;
  --csff-line: #d9d1bd;
  --csff-shadow: rgba(24, 36, 48, 0.09);
  --csff-onink: #ece5d4;

  font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--csff-text);
  background: var(--csff-bone);
  display: block;
}
#page-case-study-fantasy-football-app img { max-width: 100%; height: auto; }
#page-case-study-fantasy-football-app h2,
#page-case-study-fantasy-football-app h3 { line-height: 1.25; }
#page-case-study-fantasy-football-app :is(a, button, summary):focus-visible {
  outline: 3px solid var(--csff-red);
  outline-offset: 2px;
}

/* ---------- shared layout ---------- */
#page-case-study-fantasy-football-app .csff-wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}
#page-case-study-fantasy-football-app .csff-wrap--narrow { max-width: 860px; }

#page-case-study-fantasy-football-app .csff-section { padding: 84px 0; }
#page-case-study-fantasy-football-app .csff-section--paper { background: var(--csff-paper); }

/* section heading — red strike over ink type */
#page-case-study-fantasy-football-app .csff-h2 {
  position: relative;
  margin: 0 0 14px;
  padding-bottom: 18px;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--csff-ink);
}
#page-case-study-fantasy-football-app .csff-h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 84px;
  height: 6px;
  background: var(--csff-red);
}
#page-case-study-fantasy-football-app .csff-h2--band { color: var(--csff-bone); }

#page-case-study-fantasy-football-app .csff-lead {
  margin: 6px 0 26px;
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--csff-ink);
}

/* buttons — printer's block, hard offset shadow; hover is a finite nudge */
#page-case-study-fantasy-football-app .csff-btn {
  /* Form cloned from the /our-values reference (.ov-btn): flat, borderless, 2px
     radius, 17px/30px, 700/16px at letter-spacing .01em, and a .18s
     background+transform response. The DRAFT BOARD 2px rule and 5px hard block
     shadow are deliberately gone -- that motif still carries the plates, cards and
     ledger rows, so the button no longer has to shout it too.
     Fill stays this page's own red, not the reference's jade: the reference is the
     button's SHAPE, and a green CTA on a red-accented page reads as a foreign part. */
  display: inline-block;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  padding: 17px 30px;
  border-radius: 2px;
  transition: background-color 0.18s, color 0.18s, transform 0.18s;
}
#page-case-study-fantasy-football-app .csff-btn--red { background: var(--csff-red); color: #fff; }
#page-case-study-fantasy-football-app .csff-btn--red:hover { background: #9d1f24; transform: translateY(-1px); }
#page-case-study-fantasy-football-app .csff-btn--bone { background: var(--csff-paper); color: var(--csff-ink); }
#page-case-study-fantasy-football-app .csff-btn--bone:hover { background: #fff; transform: translateY(-1px); }
#page-case-study-fantasy-football-app .csff-btn:active { transform: translateY(0); }

/* ---------- hero (rule 24: image-free, static gradient, ~900px column, one CTA) ---------- */
#page-case-study-fantasy-football-app .csff-hero {
  background: linear-gradient(180deg, #fbf8f0 0%, #f2ebda 100%);
  border-bottom: 2px solid var(--csff-ink);
  padding: 92px 24px 76px;
}
#page-case-study-fantasy-football-app .csff-hero__col { max-width: 900px; margin: 0 auto; text-align: center; }
#page-case-study-fantasy-football-app .csff-hero__eyebrow {
  margin: 0 0 18px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--csff-red);
}
#page-case-study-fantasy-football-app .csff-hero__title {
  margin: 0 auto 30px;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--csff-ink);
  max-width: 21ch;
}
#page-case-study-fantasy-football-app .csff-hero__techlabel {
  margin: 0 0 14px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--csff-ink);
}
#page-case-study-fantasy-football-app .csff-hero__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
/* rule 39a: the chip owns its foreground at computed specificity */
#page-case-study-fantasy-football-app .csff-hero__chips li {
  background: var(--csff-paper);
  color: var(--csff-ink);
  border: 2px solid var(--csff-ink);
  box-shadow: 3px 3px 0 var(--csff-shadow);
  padding: 7px 15px;
  font-size: 1rem;
  font-weight: 600;
}
#page-case-study-fantasy-football-app .csff-hero__ctarow { margin: 36px 0 0; }

/* ---------- breadcrumb ---------- */
#page-case-study-fantasy-football-app .csff-breadcrumb {
  background: var(--csff-paper);
  border-bottom: 1px solid var(--csff-line);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 14px 24px;
  font-size: 1rem;
  color: var(--csff-muted);
}
#page-case-study-fantasy-football-app .csff-breadcrumb__back { display: inline-flex; align-items: center; }
#page-case-study-fantasy-football-app .csff-breadcrumb__back img { display: block; }
#page-case-study-fantasy-football-app .csff-breadcrumb__leg { color: var(--csff-muted); }
#page-case-study-fantasy-football-app .csff-breadcrumb__leg:hover { color: var(--csff-red); }
#page-case-study-fantasy-football-app .csff-breadcrumb__now { color: var(--csff-ink); font-weight: 600; }

/* ---------- TOC ---------- */
#page-case-study-fantasy-football-app .csff-toc { padding: 56px 0 0; background: var(--csff-bone); }
#page-case-study-fantasy-football-app .csff-toc__title {
  margin: 0 0 16px;
  font-size: 1.15rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--csff-ink);
}
#page-case-study-fantasy-football-app .csff-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
#page-case-study-fantasy-football-app .csff-toc__list a {
  display: block;
  background: var(--csff-paper);
  border: 2px solid var(--csff-ink);
  border-left: 6px solid var(--csff-red);
  box-shadow: 4px 4px 0 var(--csff-shadow);
  padding: 13px 18px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--csff-ink);
}
#page-case-study-fantasy-football-app .csff-toc__list a:hover { border-left-color: var(--csff-ink); color: var(--csff-red); }
#page-case-study-fantasy-football-app .csff-toc__num {
  font-weight: 900;
  color: var(--csff-red);
  margin-right: 12px;
}

/* ---------- About ---------- */
#page-case-study-fantasy-football-app .csff-reqs {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  gap: 14px;
}
#page-case-study-fantasy-football-app .csff-req {
  background: var(--csff-paper);
  border: 2px solid var(--csff-ink);
  box-shadow: 5px 5px 0 var(--csff-shadow);
  padding: 20px 24px;
  border-left: 6px solid var(--csff-ink);
}
#page-case-study-fantasy-football-app .csff-req p { margin: 0; }
#page-case-study-fantasy-football-app .csff-req__label { color: var(--csff-ink); font-weight: 800; }

#page-case-study-fantasy-football-app .csff-kicker {
  margin: 0 0 14px;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--csff-ink);
}
#page-case-study-fantasy-football-app .csff-intro {
  border-left: 6px solid var(--csff-red);
  padding: 2px 0 2px 22px;
  margin: 0 0 30px;
  max-width: 78ch;
}
#page-case-study-fantasy-football-app .csff-intro p { margin: 0 0 16px; color: var(--csff-muted); }
#page-case-study-fantasy-football-app .csff-intro p:last-child { margin-bottom: 0; }

/* ---------- Top features: the headline strip ---------- */
#page-case-study-fantasy-football-app .csff-keys {
  list-style: none;
  margin: 26px 0 26px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
#page-case-study-fantasy-football-app .csff-key {
  background: var(--csff-ink);
  color: var(--csff-bone);
  border: 2px solid var(--csff-ink);
  box-shadow: 5px 5px 0 var(--csff-shadow);
  padding: 16px 18px;
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.35;
}

/* feature plates */
#page-case-study-fantasy-football-app .csff-plates {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
#page-case-study-fantasy-football-app .csff-plate {
  position: relative;
  background: var(--csff-bone);
  border: 2px solid var(--csff-ink);
  box-shadow: 5px 5px 0 var(--csff-shadow);
  padding: 22px 24px 20px;
}
#page-case-study-fantasy-football-app .csff-plate::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 18px;
  height: 18px;
  background: var(--csff-red);
  border-left: 2px solid var(--csff-ink);
  border-bottom: 2px solid var(--csff-ink);
}
#page-case-study-fantasy-football-app .csff-plate__title {
  margin: 0 0 6px;
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--csff-ink);
}
#page-case-study-fantasy-football-app .csff-plate__line { margin: 0; color: var(--csff-muted); }

/* ---------- Technologies: the ink band ---------- */
#page-case-study-fantasy-football-app .csff-band {
  background: var(--csff-ink);
  border-top: 2px solid var(--csff-ink);
  border-bottom: 2px solid var(--csff-ink);
  padding: 84px 0;
}
#page-case-study-fantasy-football-app .csff-stack {
  margin: 30px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 40px;
}
#page-case-study-fantasy-football-app .csff-stack__label {
  display: inline-block;
  margin: 0 0 10px;
  background: var(--csff-red);
  color: var(--csff-paper);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 5px 14px;
}
#page-case-study-fantasy-football-app .csff-stack__body {
  margin: 0;
  color: var(--csff-onink);
}
#page-case-study-fantasy-football-app .csff-band__ctarow { margin: 44px 0 0; }

/* ---------- Challenges in Game Development: ledger rows ---------- */
#page-case-study-fantasy-football-app .csff-rows {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}
#page-case-study-fantasy-football-app .csff-row {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) 3fr;
  gap: 14px 40px;
  border-top: 2px solid var(--csff-ink);
  padding: 26px 0;
}
#page-case-study-fantasy-football-app .csff-row:last-child { border-bottom: 2px solid var(--csff-ink); }
#page-case-study-fantasy-football-app .csff-row__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--csff-ink);
}
#page-case-study-fantasy-football-app .csff-row p { margin: 0; color: var(--csff-muted); }

/* ---------- Solutions ---------- */
#page-case-study-fantasy-football-app .csff-tags {
  list-style: none;
  margin: 24px 0 30px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
#page-case-study-fantasy-football-app .csff-tag {
  border: 2px solid var(--csff-red);
  color: var(--csff-red);
  background: var(--csff-bone);
  font-size: 1.05rem;
  font-weight: 800;
  padding: 10px 20px;
}
#page-case-study-fantasy-football-app .csff-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin: 0 0 40px;
}
#page-case-study-fantasy-football-app .csff-card {
  background: var(--csff-bone);
  border: 2px solid var(--csff-ink);
  box-shadow: 6px 6px 0 var(--csff-shadow);
  padding: 26px 28px;
}
#page-case-study-fantasy-football-app .csff-card__title {
  margin: 0 0 12px;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--csff-ink);
  padding-bottom: 10px;
  border-bottom: 3px solid var(--csff-red);
  display: inline-block;
}
#page-case-study-fantasy-football-app .csff-card p { margin: 0; color: var(--csff-muted); }
#page-case-study-fantasy-football-app .csff-ctarow { margin: 0; text-align: center; }
#page-case-study-fantasy-football-app .csff-sec__ctarow { margin: 34px 0 0; }

/* ---------- FAQs ---------- */
#page-case-study-fantasy-football-app .csff-faqlist { margin-top: 26px; display: grid; gap: 14px; }
#page-case-study-fantasy-football-app .csff-faq {
  background: var(--csff-paper);
  border: 2px solid var(--csff-ink);
  box-shadow: 4px 4px 0 var(--csff-shadow);
}
#page-case-study-fantasy-football-app .csff-faq__q {
  position: relative;
  display: block;
  padding: 18px 64px 18px 22px;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--csff-ink);
  list-style: none;
}
#page-case-study-fantasy-football-app .csff-faq__q::-webkit-details-marker { display: none; }
#page-case-study-fantasy-football-app .csff-faq__num {
  font-weight: 900;
  color: var(--csff-red);
  margin-right: 4px;
}
/* plus / minus drawn as CSS bars — no glyph text for screen readers to announce */
#page-case-study-fantasy-football-app .csff-faq__q::after,
#page-case-study-fantasy-football-app .csff-faq__q::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 24px;
  width: 18px;
  height: 3px;
  background: var(--csff-ink);
  transform: translateY(-50%);
}
#page-case-study-fantasy-football-app .csff-faq__q::after {
  width: 3px;
  height: 18px;
  right: 31.5px;
}
#page-case-study-fantasy-football-app .csff-faq[open] .csff-faq__q::after { height: 0; }
#page-case-study-fantasy-football-app .csff-faq[open] .csff-faq__q { border-bottom: 1px solid var(--csff-line); }
#page-case-study-fantasy-football-app .csff-faq__a { padding: 4px 22px 22px; }
#page-case-study-fantasy-football-app .csff-faq__label {
  margin: 14px 0 4px;
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--csff-red);
}
#page-case-study-fantasy-football-app .csff-faq__a p:last-child { margin: 0; color: var(--csff-muted); }

/* ---------- Area We Serve ---------- */
#page-case-study-fantasy-football-app .csff-regions {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
#page-case-study-fantasy-football-app .csff-region {
  background: var(--csff-bone);
  border: 2px solid var(--csff-ink);
  box-shadow: 5px 5px 0 var(--csff-shadow);
  padding: 22px 22px 20px;
}
#page-case-study-fantasy-football-app .csff-region__name {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--csff-ink);
}
#page-case-study-fantasy-football-app .csff-region__name img { margin-right: 8px; vertical-align: -3px; }
#page-case-study-fantasy-football-app .csff-region__tel {
  display: inline-block;
  margin: 0 0 10px;
  font-weight: 800;
  font-size: 1rem;
  color: var(--csff-red);
  border-bottom: 2px solid transparent;
}
#page-case-study-fantasy-football-app .csff-region__tel:hover { border-bottom-color: var(--csff-red); }
#page-case-study-fantasy-football-app .csff-region__addr { margin: 0; font-size: 1rem; color: var(--csff-muted); }

/* ---------- CTA modal ---------- */
/* ---------- CTA modal ----------
   Shell cloned from the /our-values reference (.ov-modal), measured off the
   running staging page: 20px overlay gutter, a 620px box with a 16px radius and
   a soft drop shadow, the close control moved INSIDE the box as a 44px circle,
   and the iframe floored at 860px instead of pinned to 540px.

   The DRAFT BOARD 2px rule and 8px hard offset shadow are gone from the box for
   the same reason they left the button: the motif is carried by the page's
   plates, cards and ledger rows, and a dialog that reads as one more paper card
   competes with the form inside it rather than framing it.

   The form itself is a cross-origin GoHighLevel survey iframe -- the same survey
   the reference embeds. Nothing in this sheet can reach its fields; they are
   edited in GHL, not here. */
#page-case-study-fantasy-football-app .csff-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  padding: 100px 20px 20px 20px;
  overflow-y: auto;
  background: rgba(9, 14, 20, 0.72);
}
#page-case-study-fantasy-football-app .csff-modal.is-open { display: flex; align-items: flex-start; justify-content: center; }
#page-case-study-fantasy-football-app .csff-modal__box {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: auto;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}
#page-case-study-fantasy-football-app .csff-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 var(--csff-line);
  border-radius: 50%;
  background: #fff;
  color: var(--csff-ink);
  cursor: pointer;
  transition: background-color 0.16s, color 0.16s;
}
#page-case-study-fantasy-football-app .csff-modal__x::before,
#page-case-study-fantasy-football-app .csff-modal__x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background: currentColor;
}
#page-case-study-fantasy-football-app .csff-modal__x::before { transform: translate(-50%, -50%) rotate(45deg); }
#page-case-study-fantasy-football-app .csff-modal__x::after { transform: translate(-50%, -50%) rotate(-45deg); }
#page-case-study-fantasy-football-app .csff-modal__x:hover { background: var(--csff-red); color: #fff; }
#page-case-study-fantasy-football-app .csff-modal__x:focus-visible { outline: 3px solid var(--csff-red); outline-offset: 2px; }
#page-case-study-fantasy-football-app .csff-modal__frame {
  display: block;
  width: 100%;
  min-height: 860px;
  border: 0;
}

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  #page-case-study-fantasy-football-app .csff-plates { grid-template-columns: repeat(2, 1fr); }
  #page-case-study-fantasy-football-app .csff-keys { grid-template-columns: repeat(2, 1fr); }
  #page-case-study-fantasy-football-app .csff-regions { grid-template-columns: repeat(2, 1fr); }
  #page-case-study-fantasy-football-app .csff-stack { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  #page-case-study-fantasy-football-app { font-size: 16px; }
  #page-case-study-fantasy-football-app .csff-section { padding: 56px 0; }
  #page-case-study-fantasy-football-app .csff-band { padding: 56px 0; }
  #page-case-study-fantasy-football-app .csff-hero { padding: 60px 18px 52px; }
  #page-case-study-fantasy-football-app .csff-wrap { padding: 0 18px; }
  #page-case-study-fantasy-football-app .csff-breadcrumb { padding: 12px 18px; }
  #page-case-study-fantasy-football-app .csff-toc__list { grid-template-columns: 1fr; }
  #page-case-study-fantasy-football-app .csff-plates { grid-template-columns: 1fr; }
  #page-case-study-fantasy-football-app .csff-keys { grid-template-columns: 1fr; }
  #page-case-study-fantasy-football-app .csff-cards { grid-template-columns: 1fr; }
  #page-case-study-fantasy-football-app .csff-row { grid-template-columns: 1fr; gap: 8px; }
  #page-case-study-fantasy-football-app .csff-regions { grid-template-columns: 1fr; }
  #page-case-study-fantasy-football-app .csff-card { padding: 20px 18px; }
  #page-case-study-fantasy-football-app .csff-btn { width: 100%; text-align: center; padding: 16px 22px; }
  #page-case-study-fantasy-football-app .csff-hero__title { max-width: none; }
}

/* ---------- reduced motion: even the finite nudges go away ---------- */
@media (prefers-reduced-motion: reduce) {
  #page-case-study-fantasy-football-app .csff-btn,
  #page-case-study-fantasy-football-app .csff-btn:hover {
    transition: none;
    transform: none;
  }
}