/* ===== World Cup 2026 — mobile-first, RTL ===== */
:root {
  --bg-0: #030d17;
  --bg-1: #04121f;
  --bg-2: #072033;
  --ink: #f2f7fb;
  --ink-dim: #9db2c6;
  --ink-mute: #6b8299;
  --gold: #f4c045;
  --gold-2: #ffdd7a;
  --green: #17c964;
  --green-deep: #0b7a3d;
  --live: #ff4d5e;
  --line: rgba(255, 255, 255, 0.09);
  --card: rgba(255, 255, 255, 0.045);
  --card-2: rgba(255, 255, 255, 0.07);
  --radius: 18px;
  --shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.9);
  --font: "Tajawal", "Segoe UI", system-ui, -apple-system, "Noto Kufi Arabic", "Tahoma", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, #0b3a52 0%, transparent 55%),
    radial-gradient(900px 500px at 0% 0%, #0a2c22 0%, transparent 50%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.5;
  overflow-x: hidden;
}

.pitch-glow {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(255,255,255,.012) 46px 92px);
  mask: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%);
}

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
main.wrap { position: relative; z-index: 1; }

/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(3,13,23,.92), rgba(3,13,23,.6));
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-badge {
  font-size: 30px; line-height: 1;
  filter: drop-shadow(0 4px 10px rgba(244,192,69,.45));
}
.brand-text h1 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.2px; }
.brand-text .year {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-text .host { margin: 1px 0 0; font-size: 11.5px; color: var(--ink-mute); white-space: nowrap; }

.live-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,77,94,.14); color: #ffd9dd;
  border: 1px solid rgba(255,77,94,.4);
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
}
.live-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 rgba(255,77,94,.7); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(255,77,94,.6)} 70%{box-shadow:0 0 0 9px rgba(255,77,94,0)} 100%{box-shadow:0 0 0 0 rgba(255,77,94,0)} }

/* ===== Stats ===== */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0 6px; }
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 8px; text-align: center; box-shadow: var(--shadow);
}
.stat b { display: block; font-size: 20px; font-weight: 800; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.stat span { font-size: 11px; color: var(--ink-mute); }
.stat.updated b { font-size: 15px; color: var(--ink); }

/* ===== Tabs ===== */
.tabs {
  display: flex; gap: 4px; margin: 16px 0 4px; padding: 5px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { height: 0; }
.tab {
  flex: 1 0 auto; appearance: none; cursor: pointer; white-space: nowrap;
  border: 0; background: transparent; color: var(--ink-dim);
  font-family: inherit; font-size: 13px; font-weight: 700;
  padding: 10px 9px; border-radius: 999px; transition: .22s;
}
.tab.is-active { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #241a02; box-shadow: 0 8px 20px -10px rgba(244,192,69,.8); }

/* ===== Live strip ===== */
.live-strip { display: flex; gap: 10px; overflow-x: auto; padding: 12px 2px 4px; margin: 6px -2px 0; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.live-strip::-webkit-scrollbar { height: 0; }
.live-card {
  scroll-snap-align: start; flex: 0 0 auto; min-width: 220px;
  background: linear-gradient(180deg, rgba(255,77,94,.12), var(--card-2));
  border: 1px solid rgba(255,77,94,.35); border-radius: 14px; padding: 10px 12px;
}
.live-card .lc-top { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #ffb3ba; margin-bottom: 6px; }
.live-card .lc-min { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; }
.live-card .lc-min::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--live); animation: pulse 1.4s infinite; }
.live-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; }
.live-row .nm { display: flex; align-items: center; gap: 8px; min-width: 0; }
.live-row .nm span.f { font-size: 20px; }
.live-row .nm span.t { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-row .sc { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ===== Section titles ===== */
.view { margin-top: 8px; }
.section-title { display: flex; align-items: center; gap: 10px; margin: 22px 4px 12px; }
.section-title h2 { margin: 0; font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: .3px; }
.section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }

/* ===== Filter chips ===== */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; margin: 0 -2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.chips::-webkit-scrollbar { height: 0; }
.chip {
  flex: 0 0 auto; appearance: none; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 700; color: var(--ink-dim);
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; white-space: nowrap; transition: .18s;
}
.chip.on { background: rgba(23,201,100,.16); border-color: rgba(23,201,100,.5); color: #b9f5d2; }

/* ===== Teams grid (hero) ===== */
.teams-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 460px) { .teams-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 680px) { .teams-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 920px) { .teams-grid { grid-template-columns: repeat(6, 1fr); } }

.team-card {
  position: relative; text-align: center;
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--line); border-radius: 16px;
  padding: 14px 10px 12px; box-shadow: var(--shadow);
  animation: rise .45s both; transition: transform .18s, border-color .18s;
}
.team-card:hover { transform: translateY(-3px); border-color: rgba(244,192,69,.35); }
.team-card.q { border-color: rgba(23,201,100,.4); background: linear-gradient(180deg, rgba(23,201,100,.10), var(--card)); }
.tc-top { display: flex; align-items: center; justify-content: space-between; min-height: 20px; margin-bottom: 4px; }
.tc-grp {
  width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px;
  font-size: 11px; font-weight: 900; color: #241a02;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
}
.tc-tag { font-size: 9.5px; font-weight: 800; color: #b9f5d2; background: rgba(23,201,100,.16); border: 1px solid rgba(23,201,100,.4); padding: 2px 7px; border-radius: 999px; }
.tc-flag { font-size: 46px; line-height: 1.1; margin: 4px 0 6px; filter: drop-shadow(0 6px 12px rgba(0,0,0,.5)); }
.tc-name { font-size: 14px; font-weight: 800; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-stats { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 11px; color: var(--ink-mute); }
.tc-stats b { color: var(--ink); font-variant-numeric: tabular-nums; }
.tc-stats b.pts { color: var(--gold-2); }
.tc-stats .dotsep { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-mute); }

/* ===== Groups grid ===== */
.groups-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 560px) { .groups-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .groups-grid { grid-template-columns: 1fr 1fr 1fr; } }

.group-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
  animation: rise .5s both;
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.group-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; background: linear-gradient(180deg, rgba(23,201,100,.14), transparent);
  border-bottom: 1px solid var(--line);
}
.group-head .letter {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #241a02;
  font-weight: 900; font-size: 15px;
}
.group-head h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink-dim); }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 9px 8px; font-size: 12.5px; }
.table thead th { color: var(--ink-mute); font-weight: 600; font-size: 10.5px; text-align: center; border-bottom: 1px solid var(--line); }
.table thead th.team-col { text-align: start; padding-inline-start: 14px; }
.table tbody td { text-align: center; border-bottom: 1px solid rgba(255,255,255,.05); font-variant-numeric: tabular-nums; }
.table tbody tr:last-child td { border-bottom: 0; }
.table td.team-col { text-align: start; padding-inline-start: 14px; }
.table .team-cell { display: flex; align-items: center; gap: 9px; }
.table .team-cell .f { font-size: 20px; line-height: 1; }
.table .team-cell .t { font-size: 13px; font-weight: 700; white-space: nowrap; }
.table .pts { font-weight: 800; color: var(--gold-2); }
.table tr.qualify td { background: linear-gradient(90deg, rgba(23,201,100,.10), transparent); }
.table tr.qualify .rank::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-inline-end: 5px; vertical-align: middle; }
.table .rank { color: var(--ink-mute); font-weight: 700; }
.table tbody tr.live td { }

.empty-row { text-align: center; color: var(--ink-mute); font-size: 12.5px; padding: 16px; }

/* ===== Bracket MAP — mirrored tree, flags left & right, trophy center ===== */
/* Fits the phone width (no sideways scroll); scrolls vertically for the full map. */
.map-note { margin: 14px 4px 0; text-align: center; font-size: 11.5px; color: var(--ink-mute); }

.bmap {
  display: flex; align-items: stretch; justify-content: center;
  gap: 0; width: 100%; padding: 8px 0 6px;
  --line-c: rgba(255,255,255,0.16);
  --stub: 9px;      /* horizontal connector length */
}
.bmap .half { display: flex; flex: 1 1 0; min-width: 0; }
.bmap .half.right { flex-direction: row-reverse; }

.bm-round {
  display: flex; flex-direction: column; justify-content: space-around;
  flex: 1 1 0; min-width: 0; gap: 6px;
}

/* --- match node: two stacked flag+score slots --- */
.bm-match {
  position: relative; align-self: center; flex: 0 0 auto;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 9px; padding: 3px; margin: 3px 0;
  width: calc(100% - 4px); max-width: 60px; box-shadow: 0 6px 14px -10px rgba(0,0,0,.8);
}
.bm-match.live { border-color: rgba(255,77,94,.5); }
.bm-match.placeholder { opacity: 0; border: 0; background: transparent; box-shadow: none; }
.bm-live { position: absolute; top: -5px; inset-inline-start: -5px; color: var(--live); font-size: 9px; animation: pulse 1.4s infinite; }

.bm-slot { display: flex; align-items: center; justify-content: space-between; gap: 3px; border-radius: 5px; padding: 1px 3px; }
.bm-slot .f { font-size: 17px; line-height: 1.15; }
.bm-slot .s { font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink-dim); min-width: 8px; text-align: center; }
.bm-slot.win { background: rgba(23,201,100,.14); }
.bm-slot.win .s { color: var(--green); }
.bm-slot.lose { opacity: .42; }

/* Connector lines are drawn as a measured SVG overlay (see drawConnectors in app.js). */
.bmap { position: relative; }
.bm-lines { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bmap .half, .bm-center { position: relative; z-index: 1; }

/* --- center column: final + trophy + champion --- */
.bm-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; padding: 0 2px; }
.bm-final-label { font-size: 10px; font-weight: 800; color: var(--gold-2); letter-spacing: .3px; }
.bm-trophy { font-size: 34px; line-height: 1; filter: drop-shadow(0 6px 14px rgba(244,192,69,.5)); }
.bm-trophy.won { animation: bob 2.4s ease-in-out infinite; }
.bm-center .bm-match { max-width: 66px; border-color: rgba(244,192,69,.5); background: linear-gradient(180deg, rgba(244,192,69,.12), var(--card)); }
.bm-champ { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 800; color: var(--gold-2); text-align: center; }
.bm-champ .f { font-size: 22px; }
.bm-champ .tbd { color: var(--ink-mute); font-weight: 700; }

@media (min-width: 600px) {
  .bmap { --stub: 14px; }
  .bm-match { max-width: 96px; padding: 5px; }
  .bm-slot .f { font-size: 24px; }
  .bm-slot .s { font-size: 13px; }
  .bm-trophy { font-size: 46px; }
  .bm-center .bm-match { max-width: 108px; }
  .bm-champ { font-size: 13px; }
}

/* ===== Knockout ladder + today's matches — matchup cards ===== */
.rounds-nav { margin-top: 2px; }
.rounds-nav .chip .cnt { font-size: 10px; color: var(--ink-mute); font-weight: 700; margin-inline-start: 3px; font-variant-numeric: tabular-nums; }
.rounds-nav .chip.on .cnt { color: #7ddba4; }

.ko-list, .today-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .ko-list, .today-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .ko-list, .today-list { grid-template-columns: 1fr 1fr 1fr; } }

.ko-card {
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 12px 8px; box-shadow: var(--shadow);
  animation: rise .4s both;
}
.ko-card.live {
  border-color: rgba(255,77,94,.55);
  background: linear-gradient(180deg, rgba(255,77,94,.10), var(--card));
}

.ko-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11px; color: var(--ink-mute); margin-bottom: 7px;
  padding-bottom: 7px; border-bottom: 1px dashed rgba(255,255,255,.08);
}
.ko-head .ko-when { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ko-head .tm { font-size: 16px; font-weight: 800; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.ko-head .stg {
  background: var(--card-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 9px; font-weight: 700; font-size: 10px; color: var(--ink-dim); white-space: nowrap;
}
.ko-head .st { font-weight: 800; white-space: nowrap; }
.ko-head .st.done { color: var(--ink-dim); }
.ko-head .st.soon { color: var(--gold-2); }
.ko-head .st.live { color: #ffb3ba; display: inline-flex; align-items: center; gap: 6px; }
.ko-head .st.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: pulse 1.4s infinite; }

.ko-row { display: flex; align-items: center; gap: 10px; padding: 5px 4px; border-radius: 9px; }
.ko-row .f { font-size: 25px; line-height: 1; filter: drop-shadow(0 3px 8px rgba(0,0,0,.5)); }
.ko-row .t { flex: 1; font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ko-row .t.tbd { color: var(--ink-mute); font-weight: 600; }
.ko-row .sc { font-size: 16.5px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 20px; text-align: center; color: var(--ink-dim); }
.ko-row.win { background: linear-gradient(-90deg, rgba(23,201,100,.13), transparent 70%); }
.ko-row.win .t { color: var(--ink); }
.ko-row.win .sc { color: var(--green); }
.ko-row.lose { opacity: .55; }

.day-head { margin: -4px 4px 10px; font-size: 13.5px; font-weight: 800; color: var(--gold-2); }
.map-note.top { margin: -2px 4px 12px; text-align: start; }

/* ===== Map sub-view toggle (cards / drawn tree) ===== */
.subtabs { display: flex; gap: 6px; margin: 2px 0 12px; }
.subtab {
  appearance: none; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 800; color: var(--ink-dim);
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 18px; transition: .18s;
}
.subtab.on { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #241a02; border-color: transparent; box-shadow: 0 8px 20px -10px rgba(244,192,69,.8); }

/* ===== Drawn bracket tree — horizontal pan, generous columns ===== */
.btree-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none;
}
.btree-scroll::-webkit-scrollbar { height: 0; }
.btree {
  direction: ltr; position: relative;
  display: flex; align-items: stretch; gap: 0;
  min-width: 860px; padding: 6px 0 4px;
}
.bt-lines { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bt-half { display: flex; flex: 1 1 0; position: relative; z-index: 1; min-width: 0; }
.bt-half.R { flex-direction: row-reverse; } /* mirror: outer round at the far edge */
.bt-col { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; }
.bt-cap { text-align: center; font-size: 10px; font-weight: 800; color: var(--ink-mute); padding: 2px 0 8px; white-space: nowrap; }
.bt-cap.small { margin-top: 12px; padding-bottom: 4px; }
.bt-stack { flex: 1; display: flex; flex-direction: column; justify-content: space-around; }

.bt-match {
  position: relative; align-self: center; flex: 0 0 auto;
  width: 76px; display: flex; flex-direction: column; gap: 2px;
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 4px; margin: 4px 0;
  box-shadow: 0 6px 14px -10px rgba(0,0,0,.8);
}
.bt-match.live { border-color: rgba(255,77,94,.55); }
.bt-match.tbd { opacity: .45; border-style: dashed; }
.bt-live { position: absolute; top: -6px; left: -5px; color: var(--live); font-size: 9px; animation: pulse 1.4s infinite; }

.bt-slot { display: flex; align-items: center; justify-content: space-between; gap: 4px; border-radius: 6px; padding: 2px 5px; }
.bt-slot .f { font-size: 20px; line-height: 1.15; }
.bt-slot .s { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink-dim); min-width: 10px; text-align: center; }
.bt-slot.win { background: rgba(23,201,100,.16); }
.bt-slot.win .s { color: var(--green); }
.bt-slot.lose { opacity: .42; }

.bt-center {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; flex: 0 0 auto; padding: 0 10px;
}
.bt-center .bt-match.final { width: 88px; border-color: rgba(244,192,69,.5); background: linear-gradient(180deg, rgba(244,192,69,.12), var(--card)); }
.bt-trophy { font-size: 38px; line-height: 1; filter: drop-shadow(0 6px 14px rgba(244,192,69,.5)); }
.bt-trophy.won { animation: bob 2.4s ease-in-out infinite; }
.bt-champ { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; font-weight: 800; color: var(--gold-2); text-align: center; }
.bt-champ .f { font-size: 24px; }
.bt-champ .tbd { color: var(--ink-mute); font-weight: 700; }

@media (min-width: 700px) {
  .btree { min-width: 1040px; }
  .bt-match { width: 96px; }
  .bt-slot .f { font-size: 24px; }
  .bt-slot .s { font-size: 13px; }
  .bt-center .bt-match.final { width: 108px; }
  .bt-trophy { font-size: 46px; }
}

/* ===== Empty / loading ===== */
.empty { text-align: center; padding: 48px 16px; color: var(--ink-dim); }
.empty-emoji { font-size: 44px; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px); } }
.empty p { margin: 12px 0; font-size: 14px; }
.retry { margin-top: 6px; background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #241a02; border: 0; font-family: inherit; font-weight: 800; font-size: 14px; padding: 10px 22px; border-radius: 999px; cursor: pointer; }

.skeleton { background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04)); background-size: 200% 100%; animation: sh 1.3s infinite; border-radius: 8px; }
@keyframes sh { to { background-position: -200% 0; } }

/* ===== Footer ===== */
.site-footer { margin-top: 34px; border-top: 1px solid var(--line); padding: 20px 0 34px; position: relative; z-index: 1; }
.site-footer p { margin: 3px 0; text-align: center; font-size: 12px; color: var(--ink-mute); }
.site-footer .muted { color: var(--gold); font-weight: 700; }

@media (min-width: 560px) {
  .brand-text h1 { font-size: 22px; }
  .stat b { font-size: 23px; }
}