/* The live running sheets (Jon, 28-Oct-2026): one shared look for the three
   Brevard NEXT selling sheets, /forms/teams/, /forms/trainers/ and
   /forms/partner/. Brevard NEXT on the app's navy, NEXT red used sparingly,
   blue as the one accent. Fonts are self-hosted (the site CSP allows no
   outside hosts) and nothing here needs a script. Every feature row carries a
   chip that says "Live" or "Coming soon" in words AND in shape (a filled dot
   on a solid pill, a hollow ring on a dashed pill), never color alone. */

@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-style: normal; font-display: swap; src: url(/fonts/barlow-condensed-800.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url(/fonts/barlow-condensed-700.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 100 900; font-style: normal; font-display: swap; src: url(/fonts/inter-latin.woff2) format("woff2"); }

:root {
  --bg: #0B1220;
  --card: #16233B;
  --card-2: #111C30;
  --line: #24344F;
  --text: #F2F5F9;
  --dim: #8DA0BC;
  --red: #EB0000;
  --blue: #3E97D9;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 14px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font-family: var(--body); font-size: 16px; line-height: 1.55; }
img { max-width: 100%; height: auto; }
a { color: var(--text); text-decoration-color: var(--blue); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 16px; }

/* ---- top bar ---- */
.top { border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 36px; height: 36px; border-radius: 8px; }
.brand span { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 20px; }
.top .sheet-name { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); text-align: right; }

/* ---- display type ---- */
h1, h2, h3, .disp { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; margin: 0; }
h1 { font-size: clamp(40px, 11vw, 72px); line-height: .95; }
h2 { font-size: clamp(28px, 6vw, 38px); line-height: 1; }
h3 { font-size: 22px; line-height: 1.05; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin: 0 0 14px; }
.eyebrow .bar { display: inline-block; width: 22px; height: 3px; background: var(--red); vertical-align: middle; margin-right: 10px; }
p { margin: 0; }

/* ---- hero ---- */
.hero { padding: 48px 0 40px; }
.hero h1 .accent { color: var(--blue); }
.lead { margin-top: 18px; font-size: 18px; color: var(--dim); max-width: 40em; }
.lead strong { color: var(--text); font-weight: 600; }
.price { margin-top: 26px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: var(--radius); padding: 18px 20px; max-width: 640px; }
.price .big { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(26px, 6.5vw, 34px); line-height: 1.05; }
.price p + p { margin-top: 8px; }
.price .small { color: var(--dim); font-size: 14px; }
.actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.updated { margin-top: 22px; font-size: 13px; color: var(--dim); }
.updated b { color: var(--text); font-weight: 600; }

/* ---- buttons ---- */
.btn-main { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 12px; background: var(--red); color: #fff; font-weight: 700; font-size: 16px; text-decoration: none; border: 0; }
.btn-main:hover { background: #C80000; text-decoration: none; }
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; border-radius: 12px; border: 1px solid var(--line); color: var(--text); font-weight: 600; text-decoration: none; }
.btn-ghost:hover { border-color: var(--blue); }

/* ---- three benefits ---- */
.benefits { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 8px 0 8px; margin: 0; list-style: none; }
.benefits li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 20px; }
.benefits .disp { font-size: 22px; line-height: 1.05; display: block; }
.benefits .disp::before { content: ""; display: block; width: 28px; height: 3px; background: var(--blue); margin-bottom: 12px; }
.benefits p { margin-top: 8px; color: var(--dim); font-size: 15px; }
@media (min-width: 720px) { .benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }

/* ---- legend ---- */
.legend { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 56px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--dim); font-size: 14px; }
.legend > span { display: inline-flex; align-items: center; gap: 8px; }

/* ---- feature sections ---- */
.group { padding-top: 48px; }
.group > p.intro { margin-top: 10px; color: var(--dim); max-width: 40em; }
.feats { list-style: none; margin: 20px 0 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.feats li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: start; padding: 14px 16px; border-top: 1px solid var(--line); }
.feats li:first-child { border-top: 0; }
.feats .name { font-weight: 700; font-size: 16px; line-height: 1.35; }
.feats .line { grid-column: 1 / -1; color: var(--dim); font-size: 14.5px; line-height: 1.5; }
.feats .chip { grid-column: 2; grid-row: 1; align-self: start; }
@media (min-width: 720px) {
  .feats li { grid-template-columns: minmax(0, 15em) minmax(0, 1fr) auto; gap: 16px; padding: 14px 20px; align-items: baseline; }
  .feats .line { grid-column: 2; grid-row: 1; }
  .feats .chip { grid-column: 3; grid-row: 1; }
}

/* ---- chips: words plus shape ---- */
.chip { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; border-radius: 999px; padding: 3px 11px 3px 9px; font-size: 12px; font-weight: 700; letter-spacing: .04em; line-height: 1.5; color: var(--text); }
.chip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.chip.live { background: rgba(62, 151, 217, .16); border: 1px solid var(--blue); }
.chip.live::before { background: var(--blue); }
.chip.soon { background: transparent; border: 1px dashed var(--dim); color: var(--dim); }
.chip.soon::before { border: 2px solid var(--dim); width: 7px; height: 7px; }

/* ---- the Brevard block: the one warm highlight ---- */
.brevard { margin-top: 64px; position: relative; border-radius: 18px; padding: 26px 20px 24px; background: linear-gradient(135deg, rgba(235, 0, 0, .16), rgba(235, 0, 0, .04) 55%, rgba(62, 151, 217, .08)); border: 1px solid rgba(235, 0, 0, .45); }
.brevard h2 { font-size: clamp(28px, 7vw, 42px); }
.brevard p { margin-top: 12px; max-width: 42em; }
.brevard p.dimmed { color: #C4CFDF; }
.contact { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.contact li { background: rgba(11, 18, 32, .6); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.contact .k { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.contact .v { display: block; margin-top: 2px; font-size: 16px; font-weight: 600; user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; }
.contact a { font-size: 13px; color: var(--dim); }
@media (min-width: 720px) { .brevard { padding: 34px 32px 32px; } .contact { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- pricing block (Trainers) ---- */
.pricing { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.pricing .box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.pricing .box.main { border-left: 4px solid var(--red); }
.pricing .amount { font-family: var(--display); font-weight: 800; font-size: 52px; line-height: 1; }
.pricing .amount small { font-size: 22px; color: var(--dim); }
.pricing ul { margin: 12px 0 0; padding-left: 20px; }
.pricing li { margin: 6px 0; }
.pricing .box p { margin-top: 10px; color: var(--dim); }
.pricing .box p.amount { color: var(--text); }   /* the $5 itself reads in full white, not the dim of the lines under it */
@media (min-width: 720px) { .pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }

/* ---- closing call to action ---- */
.cta { margin: 64px 0 0; padding: 40px 0 8px; border-top: 1px solid var(--line); text-align: left; }
.cta p { margin-top: 12px; color: var(--dim); max-width: 36em; }
.cta .actions { margin-top: 22px; }
.actions .updated { margin-top: 0; }

.foot { margin-top: 48px; padding: 22px 0 48px; border-top: 1px solid var(--line); color: var(--dim); font-size: 13px; }
.foot p + p { margin-top: 6px; }

/* ---- the partner request form, restyled in place (its markup is untouched) ---- */
.apply { margin-top: 24px; max-width: 640px; }
.apply form.card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 18px; overflow: hidden; }
.apply label { display: grid; gap: 6px; font-size: 13px; color: var(--dim); font-weight: 600; margin-top: 14px; }
.apply form.card > label:first-child { margin-top: 0; }
.apply input, .apply select, .apply textarea { width: 100%; font: inherit; font-size: 16px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; min-height: 46px; }
.apply input:focus, .apply select:focus, .apply textarea:focus { outline: 3px solid var(--blue); outline-offset: 1px; }
.apply textarea { min-height: 110px; resize: vertical; }
.apply .row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 12px; }
@media (min-width: 520px) { .apply .row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.apply .hint { font-weight: 400; font-size: 12px; }
.apply .hp { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }
.apply .btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin-top: 20px; padding: 0 20px; border: 0; border-radius: 12px; background: var(--red); color: #fff; font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; }
.apply .btn:hover { background: #C80000; }
.apply .btn:disabled { opacity: .6; cursor: default; }
.apply .btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.apply .msg { display: none; margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-size: 15px; }
.apply .msg.ok { display: block; background: rgba(62, 151, 217, .14); border: 1px solid var(--blue); color: var(--text); }
.apply .msg.err { display: block; background: rgba(235, 0, 0, .14); border: 1px solid var(--red); color: var(--text); }
.apply .after { margin-top: 14px; color: var(--dim); font-size: 14px; }
.sample { margin-top: 20px; max-width: 640px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.sample .lab { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--dim); }
.sample .lab b { color: var(--text); }
.sample p { margin-top: 6px; font-size: 15px; }

/* ---- motion: one gentle entrance, and none for anyone who asks for none ---- */
@media (prefers-reduced-motion: no-preference) {
  .hero { animation: rise .45s ease-out both; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---- print: each sheet on at most 3 Letter pages, every word kept (Jon,
   28-Oct-2026: "reduced to 3 pages long so I can send them to people").
   The dark look prints as it shows. Hero, price and the Brevard block share
   page 1 (flex order, no markup change); features run in two columns of
   compact rows. Only what paper cannot use is hidden: the in-page jump
   buttons, the "Send an email" and "Call now" link labels (the email and
   number print beside them), and the partner form's fields, which become
   one line pointing at the web page. The chips keep their words, so Live
   and Coming soon still read apart in black and white. ---- */
@media print {
  @page { size: letter; margin: 0.45in; background: #0B1220; }
  *, *::before, *::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; animation: none !important; transition: none !important; }
  html, body { background: var(--bg); }
  body { font-size: 9.25pt; line-height: 1.38; }
  a { text-decoration: none; }
  .wrap { max-width: none; padding: 0; }

  /* top bar */
  .top .wrap { min-height: 0; padding: 0 0 5pt; }
  .brand { gap: 7pt; }
  .brand img { width: 20pt; height: 20pt; border-radius: 5pt; }
  .brand span { font-size: 13pt; }
  .top .sheet-name { font-size: 7.5pt; }

  /* page 1 order: hero, then the Brevard block, then the rest as written */
  main.wrap { display: flex; flex-direction: column; }
  main > .hero { order: -2; }
  main > .brevard { order: -1; }

  h1, h2, h3, .disp { break-after: avoid; page-break-after: avoid; }
  h1 { font-size: 23pt; line-height: .95; text-wrap: balance; }
  h2 { font-size: 14.5pt; line-height: 1; }
  h3 { font-size: 11pt; }
  .eyebrow { font-size: 7pt; margin: 0 0 5pt; }
  .eyebrow .bar { width: 14pt; height: 2pt; margin-right: 6pt; }

  /* hero: words left, price right */
  .hero { padding: 11pt 0 8pt; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 16pt; align-items: start; }
  .hero > * { grid-column: 1; }
  .hero .price { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin: 0; max-width: none; padding: 9pt 11pt; border-radius: 9pt; border-left-width: 3pt; }
  .hero .actions { display: none; }
  .lead { margin-top: 6pt; font-size: 9.5pt; max-width: none; }
  .price .big { font-size: 15pt; }
  .price p + p { margin-top: 4pt; }
  .price .small { font-size: 8.25pt; }
  .updated { margin-top: 6pt; font-size: 7.75pt; }

  /* the Brevard block, compact, on page 1 */
  .brevard { margin: 2pt 0 0; padding: 10pt 13pt 11pt; border-radius: 10pt; break-inside: avoid; }
  .brevard h2 { font-size: 16pt; }
  .brevard p { margin-top: 5pt; max-width: none; }
  .contact { margin-top: 7pt; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6pt; }
  .contact li { padding: 5pt 8pt; border-radius: 7pt; }
  .contact .k { font-size: 6.75pt; }
  .contact .v { font-size: 9.5pt; margin-top: 1pt; }
  .contact a { display: none; }

  /* benefits in a row of three */
  .benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7pt; padding: 9pt 0 0; break-inside: avoid; }
  .benefits li { padding: 8pt 10pt 9pt; border-radius: 9pt; }
  .benefits .disp { font-size: 11.5pt; }
  .benefits .disp::before { width: 18pt; height: 2pt; margin-bottom: 5pt; }
  .benefits p { margin-top: 3pt; font-size: 8.5pt; line-height: 1.35; }

  .legend { margin-top: 9pt; padding: 5pt 0; gap: 4pt 14pt; font-size: 8pt; break-after: avoid; }

  /* feature sections: two columns of compact rows */
  .group { padding-top: 10pt; }
  .group > h2 { break-after: avoid; page-break-after: avoid; }
  .group > p.intro { margin-top: 3pt; max-width: none; font-size: 9pt; }
  .feats { break-before: avoid; page-break-before: avoid; -webkit-box-decoration-break: clone; box-decoration-break: clone; margin-top: 5pt; border-radius: 8pt; display: flex; flex-wrap: wrap; overflow: visible; }
  .feats li { width: 50%; grid-template-columns: minmax(0, 1fr) auto; gap: 1pt 8pt; padding: 5pt 9pt 6pt; align-items: start; align-content: start; break-inside: avoid; page-break-inside: avoid; }
  .feats li:nth-child(2) { border-top: 0; }
  .feats li:nth-child(-n+2) { break-before: avoid; page-break-before: avoid; }
  .feats li:nth-child(even) { border-left: 1px solid var(--line); }
  .feats .name { font-size: 9.25pt; line-height: 1.3; grid-column: 1; grid-row: 1; }
  .feats .line { grid-column: 1 / -1; grid-row: 2; font-size: 8.5pt; line-height: 1.35; }
  .feats .chip { grid-column: 2; grid-row: 1; }
  .chip { font-size: 6.75pt; gap: 4pt; padding: 0 6pt 0 5pt; line-height: 1.55; }
  .chip::before { width: 5pt; height: 5pt; }
  .chip.soon::before { width: 3.5pt; height: 3.5pt; border-width: 1px; }

  /* Trainers pricing */
  .pricing { margin-top: 6pt; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8pt; break-inside: avoid; }
  .pricing .box { padding: 9pt 11pt; border-radius: 9pt; }
  .pricing .box .amount { font-size: 26pt; color: var(--text); }
  .pricing .amount small { font-size: 11pt; }
  .pricing ul { margin-top: 5pt; padding-left: 14pt; }
  .pricing li { margin: 1pt 0; }
  .pricing .box p { margin-top: 5pt; }

  /* closing call to action */
  .cta { margin: 12pt 0 0; padding: 10pt 0 0; break-inside: avoid; }
  .cta p { margin-top: 4pt; max-width: none; }
  .cta .actions { margin-top: 7pt; gap: 8pt; }
  .btn-main, .btn-ghost { min-height: 0; padding: 4pt 11pt; border-radius: 7pt; font-size: 9pt; }
  .cta .updated { font-size: 9pt; }

  /* partner: the example card prints, the form becomes one line */
  .sample { margin-top: 7pt; max-width: none; padding: 7pt 10pt; border-radius: 8pt; }
  .sample .lab { font-size: 7.5pt; }
  .sample p { margin-top: 2pt; font-size: 9pt; }
  .apply { margin-top: 7pt; max-width: none; }
  .apply form.card { display: none; }
  .apply::before { content: "Apply at next.youthfirstathletics.com/forms/partner/"; display: block; font-weight: 700; font-size: 10.5pt; padding: 7pt 10pt; border: 1px solid var(--line); border-left: 3pt solid var(--red); border-radius: 8pt; background: var(--card); }
  .apply .after { margin-top: 5pt; font-size: 8.5pt; }

  /* footer with the sheet's address */
  .foot { margin-top: 12pt; padding: 7pt 0 0; font-size: 7.5pt; break-inside: avoid; }
  .foot p + p { margin-top: 2pt; }
  .foot .wrap::after { display: block; margin-top: 2pt; color: var(--text); font-weight: 600; }
  body:has(#g-home) .foot .wrap::after { content: "next.youthfirstathletics.com/forms/teams/"; }
  body:has(#g-page) .foot .wrap::after { content: "next.youthfirstathletics.com/forms/trainers/"; }
  body:has(#g-profile) .foot .wrap::after { content: "next.youthfirstathletics.com/forms/partner/"; }
}