/* The public legal and help pages (website/legal/). Laid out after ufc.com's
   Fight Pass FAQ: a red "PAGE" kicker, a huge condensed headline, then one
   long column of bold uppercase questions. Self-contained on purpose -- these
   pages are read by people who are not signed in, and the site's own
   stylesheets and fonts sit behind the gate. The two faces come from the
   sign-in page's public folder. */
@font-face { font-family: bbc-display; src: url("/bbc-login/klavika.woff") format("woff");
  font-weight: 400; font-display: swap; }
@font-face { font-family: bbc-text; src: url("/bbc-login/roboto.woff2") format("woff2");
  font-weight: 400; font-display: swap; }
@font-face { font-family: bbc-text; src: url("/bbc-login/roboto-bold.woff2") format("woff2");
  font-weight: 700; font-display: swap; }

:root {
  --red: #d20a0a;
  --ink: #191919;
  --body: #3a3a3a;
  --muted: #6b6b6b;
  --line: #e2e2e2;
  --paper: #ffffff;
  --display: bbc-display, "Arial Narrow", "Roboto Condensed", arial, sans-serif;
  --text: bbc-text, Roboto, -apple-system, "Segoe UI", arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--body);
  font: 16px/1.65 var(--text); }
a { color: var(--ink); }
.skip { position: absolute; left: -999px; top: 0; padding: 10px 14px;
  background: #000; color: #fff; z-index: 10; }
.skip:focus { left: 8px; top: 8px; }

/* -------------------------------------------------------------- header */
.lg-header { background: #000; color: #fff; position: sticky; top: 0; z-index: 5; }
.lg-header__nav { max-width: 1240px; margin: 0 auto; height: 64px; padding: 0 20px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.lg-header__side { display: flex; gap: 28px; }
.lg-header__side--right { justify-content: flex-end; }
.lg-header__side a { color: #fff; text-decoration: none; text-transform: uppercase;
  font: 400 15px/1 var(--display); letter-spacing: .04em; }
.lg-header__side a:hover, .lg-header__side a:focus-visible { color: #ff5a5a; }
.lg-header__logo img { display: block; height: 30px; width: auto; }

/* ------------------------------------------------------------ masthead */
.lg-masthead { text-align: center; padding: 96px 20px 64px; }
.lg-masthead__prefix { color: var(--red); text-transform: uppercase;
  font: 400 16px/1 var(--display); letter-spacing: .06em; margin-bottom: 18px; }
.lg-masthead h1 { margin: 0 auto; max-width: 1000px; color: var(--ink);
  font: 400 clamp(44px, 8.2vw, 80px)/.95 var(--display); text-transform: uppercase;
  letter-spacing: .005em; }
.lg-masthead__date { margin: 22px 0 0; color: var(--muted); font-size: 14px; }

/* ---------------------------------------------------------------- body */
.lg-main { min-height: 50vh; }
.lg-body { max-width: 960px; margin: 0 auto; padding: 0 20px 96px; }
.lg-body p { margin: 0 0 18px; }
.lg-body .lg-lede { font-size: 18px; line-height: 1.6; color: var(--ink); margin-bottom: 30px; }
.lg-body h2 { margin: 44px 0 12px; color: var(--ink); text-transform: uppercase;
  font: 700 16px/1.35 var(--text); letter-spacing: .02em; scroll-margin-top: 84px; }
.lg-body ul, .lg-body ol { margin: 0 0 20px; padding-left: 22px; }
.lg-body li { margin: 0 0 10px; }
.lg-body strong { color: var(--ink); }
.lg-body a { color: var(--red); text-underline-offset: 2px; }
.lg-body code { font: 14px/1.4 ui-monospace, Consolas, monospace; background: #f3f3f3;
  padding: 1px 5px; border-radius: 3px; color: var(--ink); white-space: nowrap; }
.lg-table { overflow-x: auto; margin: 0 0 24px; }
.lg-table table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.lg-table th, .lg-table td { text-align: left; vertical-align: top; padding: 12px 14px;
  border-bottom: 1px solid var(--line); }
.lg-table th { color: var(--ink); text-transform: uppercase; font-size: 13px;
  letter-spacing: .04em; background: #f7f7f7; }

/* -------------------------------------------------------------- footer */
/* The same footer as the rest of the site (bbc-site.css), repeated here
   because that stylesheet is not public. */
.bbc-footer { background: #000; color: #fff; padding: 48px 24px 28px; }
.bbc-footer__main { max-width: 1240px; margin: 0 auto; display: flex;
  justify-content: space-between; align-items: flex-start; gap: 40px; }
.bbc-footer__brand { flex: 0 0 auto; }
.bbc-footer__logo { display: inline-block; }
.bbc-footer__logo img { display: block; width: auto; height: 40px; }
.bbc-footer__site { margin: 14px 0 0; color: #fff; text-transform: uppercase;
  font: 400 14px/1 var(--display); letter-spacing: .04em; }
.bbc-footer__cols { display: grid; grid-template-columns: repeat(4, minmax(110px, auto));
  gap: 28px 40px; }
.bbc-footer__col h2 { margin: 0 0 12px; color: #fff; text-transform: uppercase;
  font: 400 15px/1 var(--display); letter-spacing: .04em; }
.bbc-footer__col ul { list-style: none; margin: 0; padding: 0; }
.bbc-footer__col li { margin: 0 0 9px; }
.bbc-footer__col a { color: #8f8f8f; text-decoration: none;
  font: 400 15px/1.2 var(--display); letter-spacing: .02em; }
.bbc-footer__col a:hover, .bbc-footer__col a:focus-visible { color: #fff; }
.bbc-footer__legal { max-width: 1240px; margin: 36px auto 0; padding-top: 18px;
  border-top: 1px solid #262626; display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: 8px 24px; color: #8a8a8a; font-size: 13px; }
.bbc-footer__legal a { color: #c9c9c9; }

@media (max-width: 860px) {
  .lg-header__nav { grid-template-columns: auto 1fr; height: 56px; }
  .lg-header__side:first-child { display: none; }
  .lg-header__logo img { height: 26px; }
  .lg-header__side--right { gap: 20px; }
  .lg-masthead { padding: 56px 16px 40px; }
  .lg-body { padding: 0 16px 72px; }
  .lg-body .lg-lede { font-size: 17px; }
  .bbc-footer { padding: 40px 16px 24px; }
  .bbc-footer__main { flex-direction: column; gap: 32px; }
  .bbc-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
}

/* Download App page: the install button and the how-to sheet (install.js). */
.lg-install-wrap { margin: 6px 0 34px; }
.lg-install { min-height: 52px; padding: 0 30px; border: 0; border-radius: 6px; cursor: pointer;
  background: #d20a0a; color: #fff; font: 400 20px/1 var(--display); letter-spacing: .04em;
  text-transform: uppercase; }
.lg-install:hover, .lg-install:focus-visible { background: #a70808; }
.lg-install.is-added { background: #2f7a4b; cursor: default; }
/* The how-to sheet the button opens where the browser can't install in one tap. */
.bbc-a2hs { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: flex-end;
  justify-content: center; padding: 16px; background: rgba(0, 0, 0, .62); }
.bbc-a2hs__panel { position: relative; width: 100%; max-width: 440px; padding: 28px 24px 22px;
  border-radius: 14px; background: #fff; color: #191919; text-align: left;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45); animation: bbc-a2hs-up .22s ease-out; }
@keyframes bbc-a2hs-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 700px) { .bbc-a2hs { align-items: center; } }
.bbc-a2hs__close { position: absolute; top: 8px; right: 10px; width: 40px; height: 40px;
  border: 0; background: none; font-size: 28px; line-height: 1; color: #555; cursor: pointer; }
.bbc-a2hs__icon { display: block; width: 64px; height: 64px; border-radius: 14px;
  border: 1px solid #e3e3e3; margin-bottom: 14px; }
.bbc-a2hs h2 { margin: 0 0 6px; font-size: 26px; line-height: 1.05; text-transform: uppercase; }
.bbc-a2hs__lede { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: #4a4a4a; }
.bbc-a2hs .bbc-a2hs__steps { margin: 0 0 20px; padding: 0; list-style: none; counter-reset: bbc-step; }
.bbc-a2hs .bbc-a2hs__steps li { position: relative; margin: 0 0 12px; padding: 0 0 0 36px;
  font-size: 16px; line-height: 1.5; counter-increment: bbc-step; list-style: none; }
.bbc-a2hs .bbc-a2hs__steps li::before { content: counter(bbc-step); position: absolute; left: 0; top: 0;
  width: 25px; height: 25px; border-radius: 50%; background: #d20a0a; color: #fff;
  font: 700 14px/25px Arial, sans-serif; text-align: center; }
.bbc-a2hs__glyph { display: inline-block; width: 22px; height: 22px; vertical-align: -5px;
  color: #0a84ff; text-align: center; font-weight: 700; }
.bbc-a2hs__dots { color: #191919; font-size: 20px; line-height: 22px; }
.bbc-a2hs__plus { border: 1.5px solid #191919; border-radius: 5px; color: #191919;
  font-size: 16px; line-height: 19px; }
.bbc-a2hs__done { width: 100%; min-height: 48px; border: 0; border-radius: 6px;
  background: #d20a0a; color: #fff; font: inherit; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }