/* ============================================================
   BUDDY FLIGHT — page stylesheet
   Deliberately separate from site.css: the studio shell is dark
   and runic, this game is bright and cartoon. Keeping the two
   palettes in one file would mean a specificity fight on every
   heading. site.css still supplies the shared header and footer.

   Contrast rules measured against WCAG 2.1 AA and fixed here:
     #f9d34e on #fdf9ef = 1.38:1  -> yellow is NEVER text or a
                                     thin line on the light ground
     #ffffff on #7ec8d5 = 1.89:1  -> never white type on the sky
     #e0574b on #fdf9ef = 3.54:1  -> eyebrow darkened. The first
       attempt (#c9442f) cleared 4.59:1 on --cream but only 4.10:1
       on the darker --cream-2 the privacy band uses, so the value
       is picked to clear 4.5:1 on cream, cream-2 AND white:
       #b83a28 = 5.44 / 4.86 / 5.72.
   ============================================================ */

.bf {
  --sky:      #7ec8d5;
  --cream:    #fdf9ef;
  --cream-2:  #f2ece0;
  --navy:     #1b2b45;
  --navy-2:   #4c5f80;
  --navy-3:   #54678a;
  --sun:      #f9d34e;
  --coral:    #b83a28;     /* darkened from the in-game #e0574b: AA on every ground here */
  --line:     #1b2b45;

  --bf-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --bf-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  background: var(--cream);
  color: var(--navy);
  font-family: var(--bf-body);
}
.bf h1, .bf h2, .bf h3, .bf h4 {
  font-family: var(--bf-display);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.12;
  color: var(--navy);
}
/* Scoped one level deeper than the component classes below on purpose: a bare
   `.bf p` is (0,1,1) and would beat every single-class rule that styles a <p>,
   which silently repainted the eyebrow and dropped navy-on-yellow to 4.44:1. */
.bf :where(p) { color: var(--navy-2); }
.bf a { color: #0f4d8a; text-decoration-color: rgba(15, 77, 138, .4); }
.bf a:hover { color: var(--navy); }
.bf :focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

.bf .bf-eyebrow {
  font-family: var(--bf-display); font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--coral);
  margin: 0 0 12px;
}
.bf-sec { padding-block: clamp(38px, 5vw, 64px); }
.bf-sec--tight { padding-block: clamp(28px, 3.5vw, 44px); }
.bf-h { font-size: clamp(25px, 3.4vw, 38px); margin: 0 0 18px; }
.bf-lede { font-size: clamp(16px, 1.6vw, 18.5px); line-height: 1.6; max-width: 56ch; }

/* ---------- hero ---------- */
.bf-hero { position: relative; overflow: hidden; background: var(--sky); }
.bf-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the fade keeps type off the busy art and softens the cut from the dark header */
.bf-hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 7, 13, .34), transparent 22%),
    linear-gradient(90deg, var(--cream) 26%, rgba(253, 249, 239, .72) 54%, rgba(253, 249, 239, 0) 82%);
}
.bf-hero__in { position: relative; z-index: 2; padding-block: clamp(34px, 5vw, 60px); max-width: 34em; }
.bf-hero__icon {
  width: clamp(56px, 7vw, 72px); height: auto; border-radius: 22%;
  border: 2px solid var(--navy); margin-bottom: 16px;
}
.bf-hero h1 { font-size: clamp(38px, 6.4vw, 66px); margin: 0 0 12px; }
.bf-hero .bf-lede { color: var(--navy); font-weight: 500; margin-bottom: 18px; }

.bf .bf-pill {
  display: inline-block; font-family: var(--bf-display);
  font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--navy); background: var(--sun);
  border: 2px solid var(--navy); border-radius: 999px; padding: 6px 15px;
}
.bf .bf-avail { margin: 14px 0 0; font-size: 14px; color: var(--navy); max-width: 46ch; }

/* ---------- screenshots ---------- */
.bf-shots { display: flex; gap: clamp(14px, 2vw, 26px); justify-content: center; align-items: flex-start; margin: 0; padding: 0; list-style: none; }
.bf-shots > li { flex: none; width: clamp(150px, 20vw, 210px); }
.bf-phone {
  border: 3px solid var(--navy); border-radius: 20px; overflow: hidden;
  background: var(--navy); box-shadow: 0 14px 30px -16px rgba(27, 43, 69, .7);
}
.bf-phone img { width: 100%; display: block; }
.bf-shots figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--navy-3); text-align: center; font-weight: 500; }

/* ---------- feature cards ---------- */
.bf-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(14px, 2vw, 20px); }
.bf-feat { background: #fff; border: 2px solid var(--navy); border-radius: 16px; padding: 20px 20px 18px; }
.bf .bf-feat__n {
  width: 34px; height: 34px; border-radius: 10px; background: var(--sun);
  border: 2px solid var(--navy); display: grid; place-items: center;
  font-family: var(--bf-display); font-size: 14px; font-weight: 800; color: var(--navy);
  margin: 0 0 12px;
}
.bf-feat h3 { font-size: 17px; margin: 0 0 8px; }
.bf-feat p { font-size: 14px; line-height: 1.6; margin: 0; }

/* ---------- privacy block ---------- */
.bf-privacy { background: var(--cream-2); border-top: 2px solid var(--navy); border-bottom: 2px solid var(--navy); }
.bf-privacy ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px 28px; }
.bf-privacy li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.6; color: var(--navy-2); }
.bf-privacy li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--sun); border: 2px solid var(--navy);
}

/* ---------- legal strip ---------- */
.bf-legal { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.bf .bf-legal__l {
  font-family: var(--bf-display); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--navy); margin: 0;
}
.bf-legal a {
  display: inline-block; background: #fff; border: 2px solid var(--navy); border-radius: 999px;
  padding: 6px 14px; font-size: 13px; font-weight: 500; color: var(--navy); text-decoration: none;
}
.bf-legal a:hover { background: var(--sun); }
.bf .bf-legal__note { flex-basis: 100%; margin: 2px 0 0; font-size: 13px; color: var(--navy-3); }

@media (max-width: 720px) {
  /* three phones do not fit a 360px screen — swipe them instead of shrinking them */
  .bf-shots {
    justify-content: flex-start;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 10px; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut);
    scrollbar-width: thin;
  }
  .bf-shots > li { width: 62vw; max-width: 240px; scroll-snap-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .bf-shots { scroll-behavior: auto; }
}