:root{
      --navy:#0A2A66;
      --navy-2:#0b1d4b;
      --crimson:#B1002E;
      --cream:#f7f7f2;
      --ink:#0b1020;
      --muted:#6b7280;
      --shadow:0 10px 30px rgba(10,42,102,.18);
      --radius:18px;
      --alt:#f4f7ff; /* soft blue band */
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;color:var(--ink);background:#ffffff}
    .container{max-width:1100px;margin:0 auto;padding:0 18px}
    .btn{appearance:none;border:none;cursor:pointer;font-weight:800;letter-spacing:.3px;border-radius:999px;padding:14px 20px;background:var(--crimson);color:#fff;box-shadow:0 6px 16px rgba(177,0,46,.28)}
    .btn.secondary{background:var(--navy)}
    .btn.link{background:transparent;color:var(--navy);border:2px solid var(--navy)}
    header{position:sticky;top:0;z-index:40;background:var(--navy);color:#fff}
    .nav{display:flex;align-items:center;justify-content:space-between;min-height:72px;position:relative}
    .nav .left{display:flex;align-items:center;gap:12px}
    .nav .left .brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
    .nav .left .brand strong{color:#fff}
    .nav img.logo{height:42px;width:auto;border-radius:8px}
    .nav a{color:#e5e7eb;text-decoration:none;font-weight:700;margin:0 10px}

    /* HERO */
    .hero{position:relative;overflow:hidden;padding:60px 0;background:linear-gradient(180deg,var(--navy-2) 0%, var(--navy) 100%);color:#fff}
    .hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:center}
    h1{font-size:clamp(36px,4.8vw,64px);line-height:1.03;margin:0 0 10px}
    .deck{font-size:clamp(16px,1.4vw,20px);opacity:.95;margin:0 0 16px}
    .pills{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 14px}
    .pill{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#0A2A66;border-radius:999px;padding:8px 12px;font-weight:800}
    .cta-row{display:flex;gap:12px;flex-wrap:wrap}
    .headshot{background:#fff;border-radius:24px;box-shadow:var(--shadow);padding:14px;display:flex;align-items:center;justify-content:center}
    .headshot img{width:100%;height:auto;border-radius:18px;object-fit:cover;aspect-ratio:4/5}

    section{padding:44px 0}
    .sub{color:var(--muted);margin-top:-8px}

    /* CARD GRID */
    .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;align-items:stretch}
    .card{background:#fff;border:1px solid #edf0f6;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column}
    .card h3{margin:.3rem 0 .3rem;font-size:20px}
    .card .spacer{flex:1}

    /* BILLS SECTION (red) */
    .bills{position:relative;overflow:hidden;background:var(--crimson);color:#fff}
    .bills h2{color:#fff;font-size:clamp(34px,4.2vw,52px);line-height:1.1;margin-bottom:.4rem}
    .bills .sub{color:#ffe6ec}
    .bills .card{background:#fff;color:#111827}
    .bills .btn.link{color:#fff;border-color:#fff}

    /* PODCAST BAND (replaces RCV) */
    .band{background:linear-gradient(180deg,var(--navy) 0%, #08193f 100%);color:#fff;padding:56px 0}
    .pod-wrap{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
    .pod-art{width:110px;height:110px;border-radius:16px;object-fit:cover;box-shadow:0 10px 24px rgba(0,0,0,.35);background:#fff}
    .band h2{color:#fff;font-size:clamp(30px,3.6vw,46px);margin:0 0 .5rem}
    .band p{color:#e4ecff;max-width:800px}

    /* WEB GAMES band */
    .alt{background:var(--alt)}

    footer{background:#0b142e;color:#a7b3d9;padding:28px 0 60px}
    footer a{color:#e5e7eb}

    /* dots canvas */
    .dots{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.6;filter:drop-shadow(0 0 6px rgba(255,255,255,.25))}
    .with-dots{position:relative}

    @media (max-width: 920px){
      .hero .wrap{grid-template-columns:1fr}
      .pod-wrap{grid-template-columns:1fr;gap:14px}
    }
    @media (prefers-reduced-motion: reduce){
      .dots{display:none}
    }

    /* === BUTTON FIXES: sizing, spacing, contrast, states === */
:root{
  --btn-fs: 16px;
  --btn-py: 12px;
  --btn-px: 18px;
  --btn-radius: 999px;
}

/* Base */
.btn{
  -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  text-decoration:none; user-select:none;
  font: 800 var(--btn-fs)/1 Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  letter-spacing:.2px;
  padding: var(--btn-py) var(--btn-px);
  border-radius: var(--btn-radius);
  border: 0;
  background: var(--crimson);
  color:#fff;
  box-shadow: 0 6px 16px rgba(177,0,46,.28);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease;
  vertical-align:middle;
  white-space:nowrap;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.04); }
.btn:active{ transform: translateY(0); filter: none; }
.btn:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }

/* Secondary (default for light backgrounds) */
.btn.secondary{
  background: var(--navy);
  color:#fff;
  box-shadow: 0 6px 16px rgba(10,42,102,.28);
}

/* Link-style (bordered) */
.btn.link{
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
  box-shadow: none;
}

/* Sizes */
.btn.sm{ --btn-fs: 14px; --btn-py: 9px;  --btn-px: 14px; }
.btn.lg{ --btn-fs: 17px; --btn-py: 14px; --btn-px: 22px; }

/* Make icons inside buttons behave nicely */
.btn svg{ width: 18px; height: 18px; }

/* === CONTEXTUAL CONTRAST FIXES === */
/* Dark hero band: make secondary = white outline; link = white outline */
.hero .btn.secondary,
.band .btn.secondary{
  background: transparent;
  color:#fff;
  border:2px solid #fff;
  box-shadow:none;
}
.hero .btn.link,
.band  .btn.link{
  color:#fff;
  border-color:#fff;
}

/* Red bills band: keep your white link buttons for contrast */
.bills .btn.link{
  color:#fff;
  border-color:#fff;
}

/* Footer (dark): ensure link variant is readable if used there */
footer .btn.link{
  color:#fff;
  border-color:#fff;
}

/* Tighten mobile spacing so rows don’t look oversized */
@media (max-width: 520px){
  :root{ --btn-fs: 15px; }
  .cta-row .btn{ width: 100%; }
}

/* === Footer buttons: lock equal circular size & alignment === */
footer .btn{
  /* circle size (desktop scales down on small screens) */
  --footer-btn-d: clamp(72px, 10vw, 120px);

  display:flex; align-items:center; justify-content:center;
  width: var(--footer-btn-d);
  min-width: var(--footer-btn-d);
  height: var(--footer-btn-d);
  padding: 0;                 /* ignore previous padding so circles match */
  border-radius: 9999px;      /* perfect circle */
  line-height: 1;             /* no extra vertical space */
  text-align: center;
  font-weight: 800;
  font-size: clamp(14px, 1.3vw, 18px);
  letter-spacing: .2px;
  box-sizing: border-box;     /* border won’t change outer size */
}

/* Keep the white-outline variant perfectly matched */
footer .btn.link{
  border-width: 3px;          /* stronger ring to match solids visually */
}

/* Optional: tighten their spacing and align nicely */
footer .container > div:last-child{
  display:flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end;
}

/* Optional: subtle consistent shadow on filled circles only */
footer .btn:not(.link){
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}

/* On very small screens, make them a touch smaller so three fit side-by-side */
@media (max-width: 420px){
  footer .btn{ --footer-btn-d: 64px; font-size: 13px; }
}

    /* === MOBILE NAV (hamburger dropdown) === */
    .menu-toggle{display:none;align-items:center;justify-content:center;gap:8px;background:transparent;border:0;color:#fff;cursor:pointer;padding:10px;border-radius:10px}
    .menu-toggle svg{width:24px;height:24px}
    .menu-toggle:focus-visible{outline:2px solid #fff;outline-offset:3px}

    /* make the nav identifiable for aria-controls */
    header nav#primary-nav{display:flex;align-items:center;gap:0}

    /* Mobile layout */
    @media (max-width: 860px){
      header .nav{min-height:64px}
      /* show hamburger */
      .menu-toggle{display:inline-flex}
      /* dropdown panel */
      header nav#primary-nav{
        position:absolute;left:0;right:0;top:100%;
        background:var(--navy);
        border-top:1px solid rgba(255,255,255,.12);
        display:none;flex-direction:column;align-items:stretch;gap:0;
        padding:10px 12px 14px;z-index:50
      }
      /* open state */
      header.open nav#primary-nav{display:flex}
      /* links stacked full-width with bigger targets */
      header nav#primary-nav a{display:block;margin:8px 0;padding:12px 10px}
      header nav#primary-nav a.btn{width:100%;text-align:center;margin-top:4px}
    }

    .bill-band{
      position:relative; overflow:hidden;
      background:#B1002E; color:#fff; padding:54px 0;
    }
    .bill-band h1{
      color:#fff; font-size:clamp(30px,4.2vw,48px);
      line-height:1.1; margin:0 0 14px;
    }
    .bill-card{
      position:relative; z-index:1;
      background:#fff; color:#111827; border:1px solid #edf0f6;
      border-radius:18px; box-shadow:0 10px 30px rgba(10,42,102,.18);
      padding:22px; width:100%; max-width:none; margin:0;
    }
    .bill-card h2{ margin:.2rem 0 .6rem; font-size:22px }
    .bill-card p{ margin:.6rem 0 0; line-height:1.65 }
 
    
    /* =========================================================
       [PAGE-SPECIFIC STYLES] — Bills intro + cards grid
       (Header/footer/nav/button/dots base live in styles.css)
       ========================================================= */
    :root{
      --navy:#0A2A66;
      --crimson:#B1002E;
      --ink:#0b1020;
      --muted:#6b7280;
      --shadow:0 10px 30px rgba(10,42,102,.18);
      --radius:18px;
    }
    .intro{background:#fff;color:var(--ink);padding:60px 0;text-align:center}
    .intro h1{
      color:var(--navy);
      position:relative;
      display:inline-block;
      padding-bottom:8px;
      font-size:clamp(34px,4.5vw,56px);
      line-height:1.1;
      margin:0 0 12px;
    }
    .intro h1::after{
      content:"";
      position:absolute;
      left:0; bottom:0;
      width:100%; height:6px; border-radius:3px;
      background:var(--crimson);
    }
    .intro p{max-width:800px;margin:10px auto;font-size:18px;line-height:1.55;color:var(--ink)}

    /* Red band behind the bills grid; dots canvas sits behind content */
    .bills-band{background:var(--crimson);color:#fff;padding:60px 0;position:relative}
    .bills-band h2, .bills-band h3{color:#fff}

    .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:32px}
    .card{
      background:#fff;border:1px solid #edf0f6;border-radius:var(--radius);
      padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column
    }
    .card h3{margin:0;font-size:22px;font-weight:800;color:var(--navy)}
    .card h4{margin:6px 0 12px;font-size:16px;font-weight:700;color:var(--crimson)}
    .divider{height:2px;width:40px;background:var(--crimson);margin:0 0 14px}
    .card p{margin:0;font-size:16px;line-height:1.45;color:#1f2937}

    /* Dots helpers (base styles also exist in styles.css; harmless to repeat) */
    .with-dots{ position:relative; }
    .dots{
      position:absolute; inset:0; pointer-events:none; z-index:0;
      opacity:.6; filter:drop-shadow(0 0 6px rgba(255,255,255,.25));
    }
    @media (prefers-reduced-motion: reduce){
      .dots{ display:none; }
    }

/* Remove default underline from clickable cards */
a.card-link {
  text-decoration: none;
  color: inherit;   /* keep text using the card’s styles */
  display: block;   /* makes the whole card clickable */
}

/* Optional: add a hover effect for clarity */
a.card-link:hover .card {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}


    .video-container {
      background-color: #000;
      border-radius: 12px;
      overflow: hidden;
      /* stretch to card edges by offsetting typical card padding (fallback 22px) */
      margin-left: calc(-1 * var(--card-padding, 22px));
      margin-right: calc(-1 * var(--card-padding, 22px));
      
       margin-bottom: 20px; /* pushes space after the black video block */

    }
    .video-container .video-wrapper {
      max-width: none;
      margin: 0;
    }
    .video-wrapper {
      position: relative;
      padding-bottom: 56.25%; /* 16:9 ratio */
      height: 0;
      overflow: hidden;
      max-width: none;
      margin: 0;
    }
    .bill-card h2 + .video-container { margin-top: 8px; }

    .video-wrapper iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

     .bill-card.bill-card--accent{
      background: var(--navy, #0A2A66);
      color:#fff;
      border: 2px solid rgba(255,255,255,.25);
    }
    .bill-card.bill-card--accent a{ color:#fff; text-decoration: underline; }
    .bill-card + .bill-card{ margin-top: 22px; }
    .bill-card.bill-card--accent h2,
    .bill-card.bill-card--accent h3,
    .bill-card.bill-card--accent h4,
    .bill-card.bill-card--accent h5{ color:#fff; }

  
  /* Section background + heading contrast */
  .band.alt{ background:#f5f8ff; }
  .band.alt h2{ color:#0A2A66; }
  .band.alt .sub{ color:#526180; }

  /* Two-column layout on desktop, stack on mobile */
  .receipts-grid{
    display:grid; gap:20px; grid-template-columns:1fr;
  }
  @media (min-width: 960px){
    .receipts-grid{ grid-template-columns: 1fr 1fr; }
  }

  /* Card look */
  .receipt{
    background:#fff; color:#0b1a3a;
    border-radius:16px; padding:18px 16px 14px;
    box-shadow:0 12px 30px rgba(10,42,102,.12);
  }
  .receipt h3{ margin:6px 6px 12px; color:#0A2A66; font-size:1.08rem; letter-spacing:-0.01em }

  /* Chart sizing: lock the box; canvas fills it */
  .receipt .chart-box{
    position:relative; width:100%;
    aspect-ratio:16/9; min-height:300px; max-height:520px; margin:4px 0 8px;
  }
  @media (max-width:700px){ .receipt .chart-box{ aspect-ratio: 4/5; } }
  .receipt canvas.chart{
    position:absolute; inset:0; width:100% !important; height:100% !important;
    display:block; border-radius:10px;
  }

  /* Fix meta text under graphs */
.receipt .meta {
  color: #334155;   /* dark slate */
  font-size: 0.85rem;
  margin-top: 6px;
}

/* Navy dots for receipts */
#dots-receipts {
  opacity: 0.35;             /* more visible */
  background: transparent;   /* keep section bg */
}
.band.with-dots > .dots {
  filter: none; /* prevent unwanted blending */
}

  /* Chart layout & cards */
  .chart-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    padding: 2rem 0;
  }

  .chart-card {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    padding: 1.5rem;
    width: clamp(300px, 45%, 700px); /* flexible but nice proportions */
    flex: 1 1 45%;
  }

  .chart-card h2 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    text-align: center;
  }

  .chart-card canvas {
    width: 100% !important;
    height: 100% !important;
  }

  .chart-source {
    font-size: 0.8rem;
    color: #555;
    margin-top: 0.5rem;
    text-align: center;
  }

  /* background section for contrast */
  body {
    background-color: #f7f9fb;
  }