/* Total AI Sports ecosystem portal. Light pricing layout, system font stack. */
:root {
  --ink: #1b1b1b;
  --muted: #4d4d4d;
  --line: #c0c0c0;
  --wash: #f5f5f5;
  --blue: #101830;
  --orange: #f85008;
  --ember: #f85008;
  --link: #f85008;
  --check: #0b6a0b;
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: "Segoe UI", "Segoe UI Web (West European)", Segoe, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
h1, h2, h3, .plan .price, .summaries .price, table.compare caption, .addons caption {
  color: var(--blue);
}
a { color: var(--orange); }
a:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.skip {
  position: absolute;
  left: 12px;
  top: -40px;
  background: #fff;
  color: var(--blue);
  padding: 8px 12px;
  z-index: 20;
}
.skip:focus { top: 8px; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  border-bottom: 1px solid var(--line);
  overflow: visible;
}
.bar {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  gap: 28px;
  overflow: visible;
}
.logo {
  position: static;
  display: block;
  width: 146px;
  height: 64px;
  flex: 0 0 146px;
  line-height: 0;
}
.logo img {
  position: absolute;
  left: 24px;
  bottom: -40px;
  height: 112px;
  width: auto;
  z-index: 2;
}
.nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.nav a {
  color: var(--orange);
  text-decoration: none;
  font-size: 15px;
  padding: 10px 0 8px;
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--blue); }
.nav a[aria-current="page"] {
  font-weight: 600;
  border-bottom-color: var(--blue);
}
.hero, .section { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px 40px;
  padding-top: 76px;
  padding-bottom: 28px;
}
.hero-copy {
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
}
.hero-copy h1 { white-space: nowrap; }
/* The heading sets the column width. width:0 + min-width:100% wraps the lede to that line. */
.hero-copy .lede {
  width: 0;
  min-width: 100%;
  max-width: none;
}
.hero .ask-ai {
  flex: 0 1 500px;
  width: min(500px, 100%);
  max-width: 500px;
  margin: 0;
  padding: 0;
}
.hero h1, .section h1 {
  margin: 0 0 16px;
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
}
.lede, .section > .lede {
  margin: 0;
  max-width: 44rem;
  color: var(--muted);
  font-size: 18px;
}
.actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  text-decoration: none;
  padding: 10px 18px;
  font-weight: 600;
  border: 1px solid var(--orange);
  line-height: 1.3;
}
.btn:hover { background: #e04804; color: #fff; border-color: #e04804; }
.btn.secondary { background: #fff; color: var(--orange); }
.btn.secondary:hover { background: #fff4ee; color: var(--orange); border-color: var(--orange); }
.section { padding-top: 36px; padding-bottom: 28px; }
.section h2 {
  margin: 0 0 8px;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.kicker {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.band {
  border-top: 1px solid var(--line);
  padding: 28px 0 8px;
}
.band h3 { margin: 0; font-size: 24px; font-weight: 600; }
.band h3 a { color: var(--blue); text-decoration: none; }
.band h3 a:hover { text-decoration: underline; }
.band .summary { margin: 8px 0 0; max-width: 44rem; color: var(--muted); }
.band .more { display: inline-block; margin-top: 12px; font-weight: 600; }
.summaries {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.summaries li {
  background: var(--wash);
  padding: 16px;
  min-height: 132px;
}
.summaries .name { display: block; font-weight: 600; color: var(--ink); }
.summaries .price { display: block; margin: 6px 0 4px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.summaries .line { display: block; color: var(--muted); font-size: 14px; }
.summaries li:only-child { max-width: 280px; }
.summaries .badge, .plan .badge {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--orange);
}
.plans {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  align-items: stretch;
}
.plans.plans-1 { grid-template-columns: minmax(0, 360px); }
.plans.plans-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.plan {
  border: 1px solid #a3a3a3;
  padding: 22px 18px 18px;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.plan::before {
  content: "";
  display: block;
  height: 18px;
  margin-bottom: 8px;
}
.plan.featured { border-top: 4px solid var(--orange); }
.plan.featured::before { content: none; }
.plan .badge {
  margin: 0 0 8px;
  letter-spacing: 0.06em;
}
.plan h3 { margin: 0 0 12px; font-size: 20px; font-weight: 600; }
.plan .price {
  margin: 0;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
.plan .price span {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
}
.plan .blurb { margin: 12px 0 0; color: var(--muted); min-height: 4.5em; }
.plan .btn { margin: 16px 0; text-align: center; }
.plan ul { list-style: none; margin: 0; padding: 0; }
.plan li {
  position: relative;
  padding: 8px 0 8px 22px;
  border-top: 1px solid #c8c8c8;
}
.plan li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--check);
  font-weight: 700;
}
.table-wrap { overflow-x: auto; margin-top: 12px; }
table.compare { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 14px; }
table.compare th:first-child {
  min-width: 11rem;
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 1;
}
table.compare thead th:first-child { background: #fafafa; z-index: 2; }
.plans-5 .btn { font-size: 13px; padding: 8px 10px; }
table.compare caption {
  text-align: left;
  font-size: 20px;
  font-weight: 600;
  caption-side: top;
  padding: 0 0 12px;
}
table.compare th, table.compare td {
  border-bottom: 1px solid var(--line);
  text-align: left;
  padding: 12px 10px;
  vertical-align: top;
}
table.compare thead th { background: #fafafa; }
.note {
  margin-top: 28px;
  background: var(--wash);
  padding: 18px 20px;
}
.note h2 { font-size: 20px; margin-bottom: 8px; }
.note p, .note li { color: var(--ink); }
.note ul { margin: 8px 0 0; padding-left: 18px; }
.addons { width: 100%; border-collapse: collapse; margin-top: 12px; }
.addons th, .addons td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
}
.addons caption { caption-side: top; text-align: left; font-weight: 600; padding: 0 0 8px; }
.addons th { background: #fafafa; }
.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 24px;
  padding: 28px 24px 48px;
  color: var(--muted);
  font-size: 13px;
}
.site-footer .inner { max-width: var(--max); margin: 0 auto; }
.site-footer p { margin: 0 0 8px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.site-footer a { color: var(--orange); }
@media (max-width: 1100px) {
  .plans.plans-5 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
@media (max-width: 980px) {
  .hero { flex-direction: column; align-items: stretch; gap: 28px; }
  .hero .ask-ai { flex-basis: auto; width: 100%; max-width: 560px; }
}
@media (max-width: 420px) {
  .hero-copy { width: auto; }
  .hero-copy h1 { white-space: normal; }
  .hero-copy .lede { width: auto; min-width: 0; }
}
@media (max-width: 720px) {
  .bar { gap: 14px; padding: 8px 16px; }
  .logo { width: 120px; height: 64px; flex-basis: 120px; }
  .logo img { left: 16px; height: 104px; bottom: -36px; }
  .nav { flex: 1; gap: 2px 14px; }
  .nav a { font-size: 14px; padding: 6px 0; }
  .hero, .section { padding-left: 16px; padding-right: 16px; }
  .hero { padding-top: 68px; }
  .hero h1, .section h1 { font-size: 34px; }
  .lede, .section > .lede { font-size: 16px; }
  .plan .price { font-size: 32px; }
  .plans.plans-1 { grid-template-columns: 1fr; }
}
/* Home page hero banner art (index.html only: .hero.hero-banner + .hero-art).
   One square art file at every width, shown with the same crop (1080/600, trims the white top and bottom)
   and the same 520px max. 981px and up: two columns inside the 1180px page column, art on the right in its
   own column (shrinks below 520px when space is short), so it never sits under the text.
   980px and below (the existing .hero breakpoint): the art stacks under the copy. */
.hero-art { display: block; margin: 0; line-height: 0; width: 100%; max-width: 520px; }
.hero-art img { display: block; width: 100%; height: auto; aspect-ratio: 1080 / 600; object-fit: cover; }
@media (min-width: 981px) {
  .hero.hero-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 520px);
    justify-content: space-between;
    align-items: center;
  }
}
/* Home page package cards (index.html #packages .summaries only): the same border as the
   inside-page cards, .plan { border: 1px solid #a3a3a3; } and .plan.featured { border-top: 4px solid var(--orange); }. */
#packages .summaries li { border: 1px solid #a3a3a3; }
#packages .summaries li:has(> .badge) { border-top: 4px solid var(--orange); }