/* ============================================================
   bt-mobile-compress.css — audit P1 (homepage compression)
   ============================================================
   The original audit flagged a 29,000 px scroll on mobile.
   This stylesheet brings that down by:
     - Hiding 7 redundant sections (handled inline via bt-mobile-hide)
     - Compacting padding/margins/type on every kept section
     - Collapsing some grids that read as a single tall column on phones
   No desktop styles are modified. Every rule lives inside
   @media (max-width: 768px).
   ============================================================ */

@media (max-width: 768px) {

  /* --- Master section padding compression --- */
  /* Most homepage sections use 80-110px padding top/bottom on desktop.
     On mobile that's 160-220px of dead space PER section across 14 sections.
     Cut to a uniform 56px top / 56px bottom. */
  body > section.bt-section,
  body > section[class*="bt-section"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  /* Keep the hero at its own padding — it already has its own styles */
  body > .bt-home-hero,
  body > section.bt-home-hero {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* --- Stat strip ("BY THE NUMBERS — STAT STRIP") --- */
  /* Already compact, just trim padding */
  #bt-stat-strip {
    padding: 48px 0 32px !important;
  }
  #bt-stat-strip > .bt-container > div > div:first-child {
    margin-bottom: 32px !important;
  }
  /* The footnote paragraph — make it smaller */
  #bt-stat-strip > .bt-container > div > p {
    font-size: 10.5px !important;
    line-height: 1.55 !important;
  }
  /* Four-stat grid — go to 2x2 instead of 1x4 */
  #bt-stat-strip > .bt-container > div > div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    padding-top: 24px !important;
  }

  /* --- FY1 NAV chart section --- */
  .bt-fy1-chart-section {
    padding: 24px 0 56px !important;
  }
  .bt-fy1-chart-head {
    margin-bottom: 28px !important;
  }
  .bt-fy1-chart-frame {
    padding: 18px 14px 16px !important;
  }
  .bt-fy1-chart-stats {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .bt-fy1-chart-stat-vrule { display: none !important; }

  /* --- CEO Video --- */
  .bt-ceo-video-section {
    padding: 56px 0 !important;
  }
  .bt-ceo-video-wrap {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .bt-ceo-video-points {
    margin-bottom: 16px !important;
  }
  .bt-ceo-video-disclosure {
    font-size: 12px !important;
    padding: 14px 16px !important;
  }

  /* --- Two Doors --- */
  /* Already responsive but the cards stack with a lot of vertical padding */
  body > section.bt-section.light section,
  body > .bt-section.light > .bt-container > div > div[style*="display: grid; grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* The "two doors" cards specifically */
  .bt-fork-card {
    padding: 28px 22px !important;
  }
  .bt-fork-card h3 {
    font-size: 22px !important;
    margin-bottom: 10px !important;
  }
  .bt-fork-card p {
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin-bottom: 16px !important;
  }

  /* --- About BettorToken — compact two-column to single --- */
  /* Find the section right after Two Doors that has the "What We Actually Do" header */
  body > section.bt-section[style*="padding: 96px 0"][style*="background: var(--bt-paper)"] {
    padding: 56px 0 !important;
  }
  /* The two-column "thesis + pull-quote" grid */
  body > section.bt-section[style*="background: var(--bt-paper)"] div[style*="grid-template-columns: 1.15fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* --- Credibility Rail — collapse 4-card grid to 2x2 then compact --- */
  /* Already has a media-query going to 2-col at 880px and 1-col at 540px.
     We strengthen to make sure cards are tight at phone widths. */
  .bt-cred-rail > div {
    padding: 22px 18px !important;
  }
  .bt-cred-rail > div > div:nth-child(2) {
    font-size: 17px !important;
  }
  .bt-cred-rail > div > div:nth-child(3) {
    font-size: 12.5px !important;
  }

  /* --- Insights Teaser — show only the lead card, hide the other two --- */
  /* The teaser uses a 3-column rail. Cut to 1 featured card. */
  .bt-insights-rail > a:nth-child(n+2) {
    display: none !important;
  }
  .bt-insights-rail {
    grid-template-columns: 1fr !important;
  }
  .bt-insights-rail > a {
    padding: 24px 22px !important;
  }
  .bt-insights-rail > a h4 {
    font-size: 21px !important;
  }
  .bt-insights-rail > a p {
    font-size: 14px !important;
  }

  /* --- Qualifier Widget — keep as-is, just trim --- */
  .bt-qual-card {
    padding: 28px 22px !important;
  }
  .bt-qual-title {
    font-size: 22px !important;
    margin-bottom: 18px !important;
  }
  .bt-qual-q-label {
    font-size: 14px !important;
    margin-bottom: 12px !important;
  }
  .bt-qual-options {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .bt-qual-opt {
    width: 100% !important;
    text-align: center !important;
  }

  /* --- Offerings (the FYN/SPLT cards) --- */
  /* The current desktop layout shows two big offering cards side-by-side.
     On mobile they should stack tight and the 3D coin/page in each card
     should be smaller. */
  body > section[id="offerings"],
  body > section[class*="bt-section"]:has(> .bt-container > div > div > a[href*="offerings-fyn"]) {
    padding: 56px 0 !important;
  }
  /* The offering-card grids — force single column */
  body > section .bt-container > div > div[style*="grid-template-columns: repeat(2, 1fr)"]:has(a[href*="offerings-"]) {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* 3D coin canvas — cap height on mobile */
  body canvas[data-bt-3d-size="mini"] {
    max-height: 220px !important;
  }

  /* --- Operating Principles — list compaction --- */
  body > section[id="principles"] {
    padding: 56px 0 !important;
  }
  body > section[id="principles"] li,
  body > section[id="principles"] .bt-principle {
    margin-bottom: 14px !important;
  }
  body > section[id="principles"] h3 {
    font-size: 18px !important;
  }
  body > section[id="principles"] p {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  /* --- Origin paragraph — keep readable, trim padding --- */
  body > section .bt-container > div[class*="bt-origin"],
  body > section[class*="origin"] {
    padding: 0 !important;
  }

  /* --- Team preview --- */
  body > section[id="team"] {
    padding: 56px 0 !important;
  }

  /* --- CTA Band --- */
  body > .bt-cta-band,
  body > section.bt-cta-band {
    padding: 56px 0 !important;
  }
  .bt-cta-band-title {
    font-size: 30px !important;
    line-height: 1.1 !important;
    margin-bottom: 18px !important;
  }
  .bt-cta-band-sub {
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin-bottom: 24px !important;
  }

  /* --- Footer --- */
  .bt-footer {
    padding: 56px 0 32px !important;
  }
  .bt-footer-grid {
    gap: 28px !important;
  }
  .bt-footer-col h5 {
    font-size: 12px !important;
    margin-bottom: 12px !important;
  }
  .bt-footer-col li {
    margin-bottom: 6px !important;
    font-size: 13px !important;
  }

  /* --- All h2 headings sitewide compact on mobile --- */
  body > section h2 {
    font-size: clamp(26px, 7vw, 36px) !important;
    line-height: 1.1 !important;
  }
  body > section .bt-h2 {
    font-size: clamp(26px, 7vw, 36px) !important;
    line-height: 1.1 !important;
  }
  body > section .bt-eyebrow {
    font-size: 10px !important;
    margin-bottom: 8px !important;
  }
  body > section .bt-lede {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  /* --- Reduce all generous padding on inner divs --- */
  body > section > .bt-container {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* --- Defensive: nothing should overflow horizontally on mobile --- */
  body, html {
    overflow-x: hidden !important;
  }
}

/* ============================================================
   Tighter ticker on mobile (audit also flagged 11px ticker)
   ============================================================ */
@media (max-width: 768px) {
  .bt-ticker, .bt-ticker-item, .bt-ticker-content {
    font-size: 10.5px !important;
    letter-spacing: 0.04em !important;
  }
  /* Tighter REG D label on mobile so it doesn't crowd ticker stream */
  .bt-ticker-label {
    padding: 0 12px !important;
    font-size: 9px !important;
    letter-spacing: 0.14em !important;
  }
  .bt-ticker-symbol { font-size: 10.5px !important; }
  .bt-ticker-price { font-size: 10.5px !important; }
  .bt-ticker-change { font-size: 9.5px !important; }
  /* Slow ticker on mobile to save battery */
  .bt-ticker-track {
    animation-duration: 90s !important;
    gap: 28px !important;
    padding: 0 24px !important;
  }
  .bt-ticker-item {
    gap: 6px !important;
  }
}


/* ============================================================
   AGGRESSIVE compression of heavy sections (audit P1, deeper pass)
   ============================================================ */
@media (max-width: 768px) {

  /* ── HERO: hide the right-side data box on mobile (its contents
     are repeated in the body and the trust-anchor strip) ── */
  .bt-home-hero-data {
    display: none !important;
  }
  .bt-home-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  /* Make hero compact */
  .bt-home-hero {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  .bt-home-hero-title {
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1.08 !important;
  }
  .bt-home-hero-sub {
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin-top: 14px !important;
  }
  .bt-home-hero-eyebrow {
    font-size: 9.5px !important;
  }
  .bt-home-hero-ctas {
    margin-top: 18px !important;
    gap: 10px !important;
    flex-direction: column !important;
  }
  .bt-home-hero-ctas .bt-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 18px !important;
  }

  /* ── ABOUT BETTORTOKEN: hide the right column (pull-quote + product
     bridge) on mobile. Both pieces of content appear elsewhere. ── */
  body > section.bt-section[style*="background: var(--bt-paper)"]
    > .bt-container > div > div[style*="grid-template-columns: 1.15fr 1fr"]
    > div:nth-child(2) {
    display: none !important;
  }

  /* ── OFFERINGS section: compact the FYN/SPLT product cards.
     Hide the 3D coin canvases on mobile - they're heavy and the static
     version doesn't add much. ── */
  body > section[id="offerings"] canvas[data-bt-3d],
  body > section .bt-container canvas[data-bt-3d-size="mini"] {
    display: none !important;
  }
  /* The wrapper of each canvas - collapse height */
  body > section .bt-container div:has(> canvas[data-bt-3d-size="mini"]) {
    display: none !important;
  }

  /* ── CEO VIDEO: tighten the side text + smaller bullets ── */
  .bt-ceo-video-title {
    font-size: 28px !important;
    line-height: 1.1 !important;
  }
  .bt-ceo-video-lede {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
  .bt-ceo-video-points li {
    font-size: 13px !important;
    padding: 6px 0 !important;
  }
  .bt-ceo-video-time {
    font-size: 10px !important;
  }

  /* ── WCG section: keep the stage but trim the head ── */
  .bt-wcg {
    padding: 56px 0 64px !important;
  }
  .bt-wcg-head {
    margin-bottom: 28px !important;
  }
  .bt-wcg-head h2 {
    font-size: clamp(26px, 7vw, 36px) !important;
    line-height: 1.1 !important;
  }
  .bt-wcg-head p {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
  .bt-wcg-foot {
    font-size: 8px !important;
    line-height: 1.5 !important;
    margin-top: 12px !important;
  }

  /* ── ORIGIN: compact ── */
  body section[class*="origin"],
  body section:has(> .bt-container [class*="bt-origin"]) {
    padding: 56px 0 !important;
  }

  /* ── Trim the "trust anchor" pills in the hero ── */
  .bt-home-hero-lead > div[style*="border-top: 1px solid"] {
    margin-top: 18px !important;
    padding-top: 14px !important;
    font-size: 9px !important;
    gap: 8px 12px !important;
  }

  /* ── Footer: collapse columns to 2 on phone ── */
  .bt-footer-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  /* The newsletter column spans both */
  .bt-footer-col.bt-footer-newsletter {
    grid-column: 1 / -1 !important;
  }

  /* ── Reduce vertical-rhythm gaps everywhere ── */
  body > section .bt-eyebrow + h2,
  body > section .bt-eyebrow + .bt-h2 {
    margin-top: 10px !important;
  }
  body > section .bt-h2 + p,
  body > section h2 + p {
    margin-top: 14px !important;
  }

  /* ── Cap container max-padding (some sections have inline 96px) ── */
  body > section[style*="padding: 96px 0"],
  body > section[style*="padding: 100px 0"],
  body > section[style*="padding: 110px 0"],
  body > section[style*="padding: 120px 0"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
}