:root{
      /* Shared */
      --accent:#ff8a00;   /* primary orange */
      --accent2:#ffb300;  /* warm secondary */
      --radius:16px;
      --shadow:0 10px 30px rgba(0,0,0,.18);

      /* LIGHT (default) — matches app look */
      --bg:#fbf3ec;       /* warm off‑white */
      --bg2:#f7ede4;      /* slightly deeper */
      --card:#fff6ee;     /* warm surface */
      --card2:#ffffff;    /* secondary surface */
      --text:#1c1b1a;
      --muted:#5a524c;
      --border:rgba(28,27,26,.12);

      /* Glows */
      --glow1: rgba(255,138,0,.18);
      --glow2: rgba(255,179,0,.14);
      --headerBg1: rgba(251,243,236,.78);
      --headerBg2: rgba(251,243,236,.45);
    }

    /* DARK (user-enabled) */
    html[data-theme="dark"]{
      --bg:#0b1220;
      --bg2:#060a12;
      --card:#101a2c;
      --card2:#111b2e;
      --text:#e8eefc;
      --muted:#b7c3dd;
      --border:rgba(255,255,255,.10);
      --shadow:0 10px 30px rgba(0,0,0,.35);

      --glow1: rgba(255,138,0,.18);
      --glow2: rgba(255,179,0,.14);
      --headerBg1: rgba(6,10,18,.72);
      --headerBg2: rgba(6,10,18,.30);
    }

    *{box-sizing:border-box}
    html{ scroll-behavior: smooth; }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce){
      html{ scroll-behavior: auto; }
      .card{ transition: none !important; }
      .drawer, .drawer-backdrop{ transition: none !important; }
    }
    html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      color:var(--text);
      background:
        radial-gradient(820px 520px at 10% 5%, var(--glow1), transparent 55%),
        radial-gradient(720px 480px at 90% 20%, var(--glow2), transparent 50%),
        linear-gradient(180deg, var(--bg2), var(--bg));
    }

    /* Subtle inventory pattern overlay (very low opacity) */
    body::before,
    body::after{
      content:"";
      position:fixed;
      inset:-80px;
      pointer-events:none;
      z-index:0;
      opacity:.36;
      filter: blur(.0px);
    }

    /* Large soft icons (boxes + tag) */
    body::before{
      background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520'><g fill='none' stroke='%23ff8a00' stroke-width='10' opacity='0.22'><rect x='70' y='90' width='150' height='150' rx='26'/><path d='M70 150h150'/><path d='M145 90v150'/><rect x='300' y='120' width='150' height='150' rx='26'/><path d='M300 180h150'/><path d='M375 120v150'/><path d='M150 330l120-90c14-10 34-8 45 6l70 90c12 15 9 37-7 48l-115 75c-14 9-33 6-43-7l-75-95c-11-14-8-35 5-47z'/><circle cx='245' cy='285' r='12'/></g></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520'><g fill='none' stroke='%23ffb300' stroke-width='9' opacity='0.18'><path d='M120 120h280a40 40 0 0 1 40 40v200a40 40 0 0 1-40 40H120a40 40 0 0 1-40-40V160a40 40 0 0 1 40-40z'/><path d='M150 190h220'/><path d='M150 245h170'/><path d='M150 300h200'/><path d='M150 355h140'/><rect x='330' y='230' width='60' height='120' rx='14'/></g></svg>");
      background-repeat:no-repeat;
      background-size: 520px 520px, 520px 520px;
      background-position: -20px 30px, calc(100% + 30px) 50px;
      opacity:.40;
    }

    /* Repeating light barcode-ish lines */
    body::after{
      background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'><g opacity='0.14' fill='none' stroke='%23ff8a00' stroke-width='6'><path d='M40 70v220'/><path d='M60 70v220'/><path d='M78 70v220'/><path d='M110 70v220'/><path d='M128 70v220'/><path d='M155 70v220'/><path d='M190 70v220'/><path d='M215 70v220'/><path d='M236 70v220'/><path d='M270 70v220'/><path d='M292 70v220'/><path d='M315 70v220'/></g></svg>");
      background-repeat: repeat;
      background-size: 360px 360px;
      background-position: 0 0;
      opacity:.24;
    }

    /* Ensure overlays stay behind content */
    .wrap, header, main, footer{position:relative; z-index:1;}

    html[data-theme="dark"] body::before{opacity:.24;}
    html[data-theme="dark"] body::after{opacity:.16;}

    a{color:inherit}
    a.link{color:var(--accent);text-decoration:none; position:relative}
    a.link::after{
      content:"";
      position:absolute;
      left:0;
      bottom:-2px;
      height:2px;
      width:100%;
      background: color-mix(in srgb, var(--accent) 82%, transparent);
      transform: scaleX(0);
      transform-origin:left;
      transition: transform 220ms cubic-bezier(.2,.9,.2,1);
      opacity:.85;
    }
    @media (hover: hover) and (pointer: fine){
      a.link:hover::after{ transform: scaleX(1); }
    }
    a.link:focus-visible{ outline:3px solid rgba(255,138,0,.32); outline-offset:3px; border-radius:10px; }

    .skip{
      position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;
    }
    .skip:focus{left:12px;top:12px;width:auto;height:auto;z-index:9999;background:var(--card);border:1px solid var(--border);padding:10px 12px;border-radius:12px;box-shadow:var(--shadow)}

    .wrap{max-width:1040px;margin:0 auto;padding:18px 16px 60px}

header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 8px;
  position:sticky;
  top:0;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, var(--headerBg1), var(--headerBg2));
  border-bottom:1px solid rgba(255,255,255,.06);
  z-index:50;
  transition: box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
}

    /* Desktop scroll highlight */
    header.scrolled{
      box-shadow: 0 18px 44px rgba(0,0,0,.22);
      border-bottom-color: rgba(255,255,255,.14);
      background: linear-gradient(180deg, color-mix(in srgb, var(--headerBg1) 82%, #000 18%), var(--headerBg2));
    }
    html[data-theme="dark"] header.scrolled{
      box-shadow: 0 18px 44px rgba(0,0,0,.52);
      border-bottom-color: rgba(255,255,255,.16);
    }

    .brand{display:flex;align-items:center;gap:12px;text-decoration:none}
    .logo{
      width:42px;height:42px;border-radius:14px;
      background: rgba(255,138,0,.16);
      border:1px solid var(--border);
      display:grid;place-items:center;
      overflow:hidden;
    }
    .logo img{
      width: 100%;
      height: 100%;
      padding: 6px;
      object-fit: contain;
      display:block;
    }
    .logo .fallback{
      font-weight:900;
      color:var(--accent);
      letter-spacing:.5px;
      line-height:1;
    }
    .brand b{display:block;font-size:14px;line-height:1.1}
.brand small{display:block;color:var(--muted);font-size:12px}

    /* ===== Desktop header (MKBHD-style) ===== */
.header-left{display:flex;align-items:center;gap:18px;min-width:0}
.header-social{display:flex;align-items:center;gap:12px}
.header-social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 20px;
  height: 20px;
  color: rgba(255,255,255,.92);
  text-decoration:none;
  opacity:.92;
  transition: opacity 140ms ease, transform 140ms ease;
}

/* Theme toggle in the desktop header (inline after X) */
.header-theme-btn{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  width: 20px;
  height: 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color: rgba(255,255,255,.92);
  opacity:.92;
  transition: opacity 140ms ease, transform 140ms ease;
  font-size:16px;
  line-height:1;
}
html:not([data-theme="dark"]) .header-theme-btn{ color: rgba(28,27,26,.88); }
@media (hover: hover) and (pointer: fine){
  .header-theme-btn:hover{ opacity:1; transform: translateY(-1px); }
}
.header-theme-btn:focus{ outline:none; }
.header-theme-btn:focus-visible{
  outline:3px solid rgba(255,138,0,.32);
  outline-offset:6px;
  border-radius:10px;
}

    html:not([data-theme="dark"]) .header-social-link{ color: rgba(28,27,26,.88); }
    @media (hover: hover) and (pointer: fine){
      .header-social-link:hover{ opacity:1; transform: translateY(-1px); }
    }

    .header-nav{display:flex;align-items:center;gap:18px;flex-wrap:nowrap;white-space:nowrap}
    .header-link{
      font-size:13px;
      font-weight:650;
      letter-spacing:.2px;
      color: color-mix(in srgb, var(--text) 78%, var(--muted));
      text-decoration:none;
      padding:6px 0;
      position:relative;
      opacity:.95;
      transition: opacity 140ms ease;
    }
    .header-link::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:-6px;
      height:2px;
      border-radius:999px;
      background: color-mix(in srgb, var(--accent) 80%, transparent);
      transform: scaleX(0);
      transform-origin:left;
      transition: transform 180ms cubic-bezier(.2,.9,.2,1);
      opacity:.85;
    }
    @media (hover: hover) and (pointer: fine){
      .header-link:hover{ opacity:1; }
      .header-link:hover::after{ transform: scaleX(1); }
    }
    .header-link:focus-visible{ outline:3px solid rgba(255,138,0,.32); outline-offset:6px; border-radius:10px; }

    .header-center{margin:0 auto;}
    .header-center .brand-text{display:block}
    .header-right{display:flex;align-items:center;gap:10px}

@media (min-width: 821px){
  /* Full-width, MKBHD-style desktop header */
  header{
    width: 100vw;
    margin-top: -18px; /* remove top "cap" above header (wrap padding) */
    margin-left: calc(50% - 50vw);
    padding-left: 28px;
    padding-right: 28px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    position: sticky;
  }

  .header-left{
    display:flex;
    align-items:center;
    gap:18px;
    flex: 1;
    min-width: 0;
    justify-content:flex-start;
  }

  /* Keep links on one line like mkbhd */
  .header-nav{
    flex-wrap: nowrap;
    overflow: hidden;
  }

  /* Logo truly centered in the viewport */
  .brand.header-center{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    justify-self: unset;
  }

  .header-right{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex: 1;
  }

  /* On desktop, the floating social column is not used */
  .social-float{ display:none !important; }

  /* Desktop logo is centered: slightly tighter */
  .brand.header-center{gap:10px}
  .brand.header-center .logo{width:40px;height:40px;border-radius:14px}
  .brand.header-center b{font-size:14px}
  .brand.header-center small{font-size:12px}

  /* Keep the hamburger hidden on desktop */
  .menu-btn{ display:none !important; }

  /* Desktop: on scroll, header becomes solid black like mkbhd.com */
  header.scrolled{
    background: #000 !important;
    border-bottom-color: rgba(255,255,255,.14) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.28);
  }

  /* Ensure all header text/icons become white on the black bar */
  header.scrolled .header-link,
  header.scrolled .header-social-link,
  header.scrolled .header-theme-btn,
  header.scrolled .brand b{
    color: rgba(255,255,255,.94) !important;
  }
  header.scrolled .brand small{
    color: rgba(255,255,255,.72) !important;
  }

  /* Keep hover/active looking crisp on the black bar */
  header.scrolled .header-link{ opacity: .98; }
  @media (hover: hover) and (pointer: fine){
    header.scrolled .header-link:hover,
    header.scrolled .header-social-link:hover,
    header.scrolled .header-theme-btn:hover{
      opacity: 1;
    }
  }

  /* Ensure underline accent remains visible on black */
  header.scrolled .header-link::after{
    background: color-mix(in srgb, var(--accent) 86%, transparent);
    opacity: .95;
  }
}

    @media (max-width: 820px){
      /* Mobile: only the centered brand remains in the sticky header */
      .header-left{display:none !important;}
      .header-right{display:none !important;}

      /* Center the logo + brand text like MKBHD mobile header */
      header{
        justify-content:center;
        gap:0;
        padding-left:16px;
        padding-right:16px;

        /* Full-bleed bar (no side gaps) */
        width: 100vw;
        margin-left: calc(50% - 50vw);

        /* Start subtle/clean; highlight only after scroll */
        background: transparent;
        border-bottom-color: transparent;
        box-shadow: none;
      }

      .brand.header-center{
        margin:0 auto;
      }

      /* On mobile, the "scrolled" highlight should only appear once user scrolls */
      header.scrolled{
        /* MKBHD-style: solid black bar on scroll */
        background: #000;
        border-bottom: 1px solid rgba(255,255,255,.12);
        box-shadow: 0 18px 44px rgba(0,0,0,.28);
      }

      /* Make the centered brand readable on the black header */
      header.scrolled .brand b{ color:#fff; }
      header.scrolled .brand small{ color:rgba(255,255,255,.72); }

      /* Dark mode: keep the same black header, slightly stronger shadow */
      html[data-theme="dark"] header.scrolled{
        background: #000;
        border-bottom-color: rgba(255,255,255,.16);
        box-shadow: 0 18px 44px rgba(0,0,0,.58);
      }
      html[data-theme="dark"] header.scrolled .brand b{ color:#fff; }
      html[data-theme="dark"] header.scrolled .brand small{ color:rgba(255,255,255,.72); }
    }

    nav{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end}

    /* Responsive header: desktop nav + mobile drawer */
    .nav-links{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
    .menu-btn{display:none}

    .drawer-backdrop{
      position:fixed;inset:0;
      background:rgba(10,12,18,.46);
      backdrop-filter: blur(6px);
      opacity:0;pointer-events:none;
      transition:opacity 180ms ease;
      z-index:80;
    }
    .drawer{
      position:fixed;
      top:0;
      right:0;
      height:100vh;
      width:min(92vw, 420px);
      background: color-mix(in srgb, var(--bg) 92%, #ffffff 8%);
      border-left:1px solid var(--border);
      transform: translateX(104%);
      transition: transform 260ms cubic-bezier(.2,.9,.2,1);
      z-index:90;
      padding:18px 16px 22px;
      display:flex;
      flex-direction:column;
      gap:14px;
      box-shadow:-18px 0 46px rgba(0,0,0,.20);
    }
    /* IMPORTANT: ensure the HTML [hidden] attribute always wins.
       Without this, `.drawer { display:flex; }` overrides the browser default and hidden drawers can appear. */
    [hidden]{
      display:none !important;
    }
    .drawer[hidden]{
      display:none !important;
      transform: translateX(104%) !important;
    }
    .drawer-backdrop[hidden]{
      display:none !important;
      opacity:0 !important;
      pointer-events:none !important;
    }
    html[data-theme="dark"] .drawer{
      background: color-mix(in srgb, var(--bg) 92%, #0b1220 8%);
      box-shadow:-18px 0 46px rgba(0,0,0,.45);
    }
    .drawer-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:6px;
      padding-bottom:10px;
      border-bottom:1px solid rgba(255,255,255,.10);
    }
    .drawer-title{display:flex;align-items:center;gap:10px}
    .drawer-title b{font-size:15px;line-height:1.1;letter-spacing:.2px}
    .drawer-title small{display:block;color:var(--muted);font-size:12px}

    .drawer-links{
      display:flex;
      flex-direction:column;
      gap:10px;
      margin-top:10px;
    }
    .drawer-links .btn{
      width:100%;
      justify-content:flex-start;
      padding:14px 14px;
      border-radius:16px;
      font-size:18px;
      font-weight:600;
      letter-spacing:.2px;
      background: color-mix(in srgb, var(--card2) 86%, transparent);
      border:1px solid color-mix(in srgb, var(--border) 85%, transparent);
      box-shadow: 0 10px 22px rgba(0,0,0,.06);
      backdrop-filter: none;
      transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
    }
    .drawer-links .btn:hover{
      transform: translateY(-1px);
      box-shadow: 0 14px 28px rgba(0,0,0,.10);
      background: color-mix(in srgb, var(--card2) 92%, transparent);
    }
    .drawer-links .btn:active{
      transform: translateY(0);
      box-shadow: 0 10px 22px rgba(0,0,0,.06);
    }
    html[data-theme="dark"] .drawer-links .btn{
      box-shadow: 0 10px 22px rgba(0,0,0,.22);
    }
    html[data-theme="dark"] .drawer-links .btn:hover{
      box-shadow: 0 14px 28px rgba(0,0,0,.32);
    }
    .drawer-sep{height:1px;background:rgba(255,255,255,.12);margin:6px 4px}


    /* Theme icon in the floating social column (we use this instead of the header icon) */
    .theme-float-btn{ display:none; }

    /* Menu drawer (hamburger) */
    body.menu-open .drawer-backdrop:not(#comingBackdrop){
      opacity:1;
      pointer-events:auto;
    }
    body.menu-open .drawer:not(#comingModal){
      transform: translateX(0);
    }

    /* Coming Soon modal (store badges) */
    body.coming-open #comingBackdrop{
      opacity:1;
      pointer-events:auto;
      display:block;
    }
    body.coming-open #comingModal{
      transform: translateX(0);
      display:flex;
    }

    @media (max-width: 820px){
      header{gap:10px}
      nav{flex-wrap:nowrap}
      .nav-links{display:none}
      .menu-btn{display:inline-flex}

      /* Mobile drawer: slide-in from LEFT (caswkids-style) */
      .drawer{
        left: 0;
        right: auto;
        width: min(86vw, 360px); /* “half-modal” feel: leaves page visible */
        border-left: 0;
        border-right: 1px solid var(--border);
        border-top-right-radius: 22px;
        border-bottom-right-radius: 22px;
        transform: translateX(-104%);
      }

      /* When menu is open, bring the drawer in from the left */
      body.menu-open .drawer:not(#comingModal){
        transform: translateX(0);
      }


      /* Slightly cleaner mobile menu link look */
      .drawer-links .btn{
        font-size: 18px;
        border-radius: 18px;
        box-shadow: 0 10px 22px rgba(0,0,0,.18);
      }

      /* Mobile: remove theme toggle row inside the drawer menu */
      #themeToggleMobile{ display:none !important; }

      /* Mobile: show the floating theme icon under X */
      .theme-float-btn{ display:inline-flex; }
    }

    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:8px;
      padding:10px 12px;
      border-radius:12px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.35);
      backdrop-filter: blur(8px);
      color:var(--text);
      text-decoration:none;
      cursor:pointer;
      user-select:none;
      -webkit-tap-highlight-color: transparent;
      transition: transform 160ms cubic-bezier(.2,.9,.2,1), box-shadow 160ms cubic-bezier(.2,.9,.2,1), background 160ms ease, filter 160ms ease;
      will-change: transform;
      position: relative;
      overflow: hidden;
    }

    /* Desktop hover (only when hover is supported) */
    @media (hover: hover) and (pointer: fine){
      .btn:hover{
        background: rgba(255,255,255,.55);
        transform: translateY(-1px);
        box-shadow: 0 14px 30px rgba(0,0,0,.12);
      }
    }

    /* Press feedback (web + mobile) */
    .btn:active{
      transform: translateY(0) scale(0.98);
      box-shadow: 0 10px 22px rgba(0,0,0,.10);
    }

    /* Accessibility: use focus-visible (keyboard) */
    .btn:focus{outline:none}
    .btn:focus-visible{
      outline:3px solid rgba(255,138,0,.38);
      outline-offset:3px;
    }

    .btn.primary{
      border-color: rgba(255,138,0,.58);
      background: linear-gradient(180deg, rgba(255,138,0,.26), rgba(255,138,0,.12));
      box-shadow: 0 14px 30px rgba(255,138,0,.14);
    }

    /* Subtle sheen on primary CTA (Cash App-ish) */
    .btn.primary::after{
      content:"";
      position:absolute;
      inset:-1px;
      background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.22) 35%, transparent 70%);
      transform: translateX(-120%);
      transition: transform 520ms cubic-bezier(.2,.9,.2,1);
      pointer-events:none;
    }
    @media (hover: hover) and (pointer: fine){
      .btn.primary:hover::after{ transform: translateX(120%); }
    }

    .btn[aria-disabled="true"],
    .btn:disabled{
      opacity:.62;
      cursor:not-allowed;
      pointer-events:none;
      box-shadow:none !important;
      transform:none !important;
    }

    /* Store badges (App Store / Google Play) — TapTap-style, but using the existing theme */
    .badge-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:14px}
    .store-badge{
      display:inline-flex;align-items:center;gap:10px;
      padding:0;
      border-radius:14px;
      background: transparent;
      color:#fff;
      text-decoration:none;
      border:none;
      box-shadow:none;
      min-height:0;
    }
    .store-badge:focus{outline:2px solid rgba(255,138,0,.45); outline-offset:3px}
    .store-badge:hover{filter:brightness(1.02)}
    .store-badge[aria-disabled="true"]{opacity:.70;cursor:not-allowed}
    .store-badge[aria-disabled="true"]:hover{filter:none}

    .store-badge img{height:52px;width:auto;max-width:100%;display:block}
    .badge-fallback{background:#0b0b0b;border-radius:14px;padding:12px 14px}
    .badge-fallback-text{display:none;color:#fff;font-weight:800;letter-spacing:.2px}
    .badge-fallback .badge-fallback-text{display:inline}
    .store-badge{border:none;box-shadow:none}
    .store-badge:focus{outline:2px solid rgba(255,138,0,.45); outline-offset:3px}
    .store-badge:hover{filter:brightness(1.02)}
    .store-badge[aria-disabled="true"]{opacity:.70;cursor:not-allowed}

    @media (max-width: 520px){
      .store-badge img{height:54px}
    }

    /* Make buttons readable in dark mode */
    html[data-theme="dark"] .btn{ background: rgba(255,255,255,.04); }
    html[data-theme="dark"] .btn:hover{ background: rgba(255,255,255,.07); }

    /* Small icon button */
    .btn.icon{ padding:10px 10px; min-width:44px; }

    .pill{
      display:inline-block;
      padding:6px 10px;border-radius:999px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.03);
      color:var(--muted);
      font-size:12px;
    }

    .hero{padding:28px 8px 10px}
    .hero-grid{display:grid;gap:16px;align-items:stretch}
    @media(min-width:900px){.hero-grid{grid-template-columns:1.2fr .8fr}}

    .hero-left{display:flex;flex-direction:column;gap:12px}

    /* Mobile: keep badges on a single row like TapTap + tighten hero spacing */
    @media (max-width: 520px){
      .hero{padding:18px 8px 8px}
      .hero-left{gap:10px}
      .card{padding:14px}
      h1{font-size:30px;line-height:1.12;margin:10px 0 8px}
      .lead{font-size:15px}

      .badge-row{flex-wrap:nowrap;gap:10px;margin-top:10px}
      .badge-row .store-badge{flex:1}
      .store-badge img{width:100%;height:auto;max-height:54px}
    }

    h1{margin:10px 0 10px;font-size:34px;line-height:1.15}
    /* Controlled mobile line break inside hero headline */
    .br-mobile{display:none}

    @media (max-width: 520px){
      .br-mobile{display:block;height:0}
    }
    
    .lead{margin:0;color:var(--muted);line-height:1.55;font-size:15px}

    .card{
      background: var(--card2);
      border:1px solid var(--border);
      border-radius: var(--radius);
      padding:16px;
      box-shadow: var(--shadow);
      transition: transform 180ms cubic-bezier(.2,.9,.2,1), box-shadow 180ms cubic-bezier(.2,.9,.2,1), border-color 180ms ease, background 180ms ease;
      will-change: transform;
      position: relative;
      overflow: hidden;
    }

    /* Subtle edge glow on interaction */
    .card::after{
      content:"";
      position:absolute;
      inset:0;
      border-radius: inherit;
      pointer-events:none;
      background: radial-gradient(800px 260px at 10% 0%, rgba(255,138,0,.10), transparent 55%);
      opacity:0;
      transition: opacity 220ms ease;
    }

    /* Desktop hover only */
    @media (hover: hover) and (pointer: fine){
      .card:hover{
        transform: translateY(-2px);
        box-shadow: 0 18px 44px rgba(0,0,0,.22);
        border-color: rgba(255,138,0,.22);
      }
      .card:hover::after{ opacity:1; }
      html[data-theme="dark"] .card:hover{
        box-shadow: 0 18px 44px rgba(0,0,0,.48);
      }
    }

    /* Keyboard focus */
    .card:focus-within{
      border-color: rgba(255,138,0,.26);
      box-shadow: 0 16px 40px rgba(0,0,0,.20);
    }
    html[data-theme="dark"] .card:focus-within{
      box-shadow: 0 16px 40px rgba(0,0,0,.46);
    }

    /* Tap feedback for touch devices */
    @media (hover: none) and (pointer: coarse){
      .card:active{
        transform: scale(0.99);
      }
    }

    .grid{display:grid;gap:14px;margin-top:16px}
    /* 3 columns desktop, 2 columns tablet, 1 column mobile */
    @media(min-width:900px){.grid{grid-template-columns:repeat(3,1fr)}}
    @media(min-width:620px) and (max-width:899px){.grid{grid-template-columns:repeat(2,1fr)}}

    .card h2{
        margin:0 0 8px;
        font-size:16px;
        display:flex;
        align-items:center;
        gap:0;
      }

      /* Small inline icon used in feature cards */
      .feature-icon{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:26px;
        height:26px;
        margin-right:8px;
        border-radius:10px;
        border:1px solid rgba(255,138,0,.22);
        background: rgba(255,138,0,.10);
        color: var(--text);
        font-size:14px;
        line-height:1;
        flex:0 0 auto;
      }
    .muted{color:var(--muted)}
    ul{margin:10px 0 0;padding-left:18px;color:var(--muted)}
    li{margin:6px 0}

.section{margin-top:18px;padding:8px;content-visibility:auto;contain-intrinsic-size:800px}
    .section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
    .section-title h2{margin:0;font-size:18px}


.two{display:grid;gap:14px}
/* FAQ: keep cards aligned and visually tidy */
.faq-grid{grid-auto-rows:1fr; align-items:stretch}
.faq-grid > *{min-width:0}
.faq-grid .card{height:100%; display:flex; flex-direction:column; justify-content:flex-start}
.faq-grid .card h3,
.faq-grid .card h4,
.faq-grid .card b{margin-top:0}
/* 2-column layout kicks in earlier so FAQ doesn't look like one long list on laptops */
@media(min-width:760px){.two{grid-template-columns:1fr 1fr}}
      /* --- Comparison (Cahier vs BokkCom) --- */
      .compare{ align-items:stretch; }
      .compare-card{ height:100%; }
      .compare-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }

      .compare-list{ list-style:none; padding-left:0; margin:10px 0 0; }
      .compare-list li{ position:relative; padding-left:28px; margin:10px 0; color: var(--muted); }

      .compare-list.good li::before,
      .compare-list.bad li::before{
        content:"";
        position:absolute;
        left:0;
        top:2px;
        width:20px;
        height:20px;
        border-radius:999px;
        border:1px solid var(--border);
      }
      .compare-list.good li::before{
        background: rgba(0, 190, 110, .14);
        border-color: rgba(0, 190, 110, .28);
      }
      .compare-list.bad li::before{
        background: rgba(255, 70, 70, .12);
        border-color: rgba(255, 70, 70, .22);
      }

      .compare-list.good li::after,
      .compare-list.bad li::after{
        position:absolute;
        left:5px;
        top:3px;
        font-weight:900;
        font-size:13px;
      }
      .compare-list.good li::after{ content:"✓"; color: rgba(0, 160, 95, .95); }
      .compare-list.bad li::after{ content:"✕"; color: rgba(220, 60, 60, .95); }

      .compare-card.featured{
        border-color: rgba(255, 122, 0, 0.30);
        background: rgba(255, 122, 0, 0.05);
      }


/* --- Screenshots slider (Cash App-ish) --- */
:root{
  /* Tune these values if needed to match the PNG frame perfectly */
  --phone-inset-left: 7.5%;
  --phone-inset-top: 3.8%;
  --phone-inset-right: 7.5%;
  --phone-inset-bottom: 3.8%;
  --phone-screen-radius: 24px;
}

.device{
  position: relative;
  width: clamp(240px, 78vw, 320px);
  aspect-ratio: 9 / 19.5;
  height: auto;
  margin: 0;
  flex: 0 0 auto;
  scroll-snap-align: center;
}

@media (min-width: 920px){
  .device{ width: 360px; }
}

@media (max-width: 520px){
  .device{
    width: min(82vw, 340px);
    height: min(62vh, 520px);
  }
}

.device-frame{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 3;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

  .device-screen{
    position: absolute;
    left: var(--phone-inset-left);
    top: var(--phone-inset-top);
    right: var(--phone-inset-right);
    bottom: var(--phone-inset-bottom);
    border-radius: var(--phone-screen-radius);
    overflow: hidden;
    z-index: 2;

    /* Light mode: let the frame do the visual work (prevents “black box” look) */
    background: transparent;
    border: 0;
    box-shadow: none;
  }

html[data-theme="dark"] .device-screen{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
}

.device-tap{
  all: unset;
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

.device-screen img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;      /* keep full screenshot visible */
  object-position: center;

  /* If a screenshot has transparency, don’t show a dark/dirty fill behind it */
  background: transparent;
}

/* If a screenshot has empty margins (rare), match the page theme behind it */
html:not([data-theme="dark"]) .device-screen img{ background: var(--card2); }
html[data-theme="dark"] .device-screen img{ background: rgba(255,255,255,.02); }

.shots-track img{ max-width: none; }

/* Slider layout: horizontal scroll, no wrapping */
.shots{
  overflow: hidden;
}

.shots-track{
  display: flex;
  flex-wrap: nowrap;
  gap: 22px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 18px 8px 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* Keep each phone as a fixed slide */
.shots-track .device{
  flex: 0 0 auto;
}

/* Hide scrollbar (still scrollable) */
.shots-track::-webkit-scrollbar{ height: 0; }
.shots-track{ scrollbar-width: none; }

/* Ensure images inside slides never shrink weirdly */
.shots-track img{ max-width: none; }

@media (max-width: 520px){
  .shots-track{
    gap: 16px;
    padding: 14px 6px 10px;
  }
}

/* Frame: always use the dark frame (works in both light + dark modes) */
.device .frame-light{ display:none !important; }
.device .frame-dark{ display:block !important; }

/* Tiny shadow under each phone (Cash App-ish) */
html:not([data-theme="dark"]) .device{
  filter: drop-shadow(0 16px 34px rgba(0,0,0,.16));
}
html[data-theme="dark"] .device{
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.42));
}

@media (prefers-reduced-motion: reduce){
  html:not([data-theme="dark"]) .device,
  html[data-theme="dark"] .device{
    filter:none !important;
  }
}

/* Hide screenshot dots (removes the black indicator row on mobile) */
.shots-dots{
  display: none !important;
}
.shots-dot{
  display: none !important;
}

/* --- Screenshot Lightbox (tap to full screen) --- */
.lightbox-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(6px);
  opacity:0;
  pointer-events:none;
  transition: opacity 180ms ease;
  z-index:120;
}
.lightbox{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  z-index:130;
  opacity:0;
  pointer-events:none;
  transition: opacity 180ms ease;
}
.lightbox-panel{
  width: min(96vw, 980px);
  max-height: min(88vh, 860px);
  border-radius: 22px;
  overflow:hidden;
  background: color-mix(in srgb, var(--bg) 92%, #000 8%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  display:flex;
  flex-direction:column;
}
html[data-theme="dark"] .lightbox-panel{
  background: color-mix(in srgb, var(--bg) 92%, #000 8%);
}
.lightbox-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.lightbox-title{
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
  opacity: .92;
}
.lightbox-close{
  border-radius: 16px;
  padding: 10px 12px;
  font-size: 18px;
}
.lightbox-body{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 12px;
}
.lightbox-img{
  width: 100%;
  height: 100%;
  max-height: min(78vh, 780px);
  object-fit: contain;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
}

/* Open state */
body.lightbox-open{ overflow:hidden; }
body.lightbox-open .lightbox-backdrop{
  opacity:1;
  pointer-events:auto;
}
body.lightbox-open .lightbox{
  opacity:1;
  pointer-events:auto;
}

/* Make screenshots feel tappable */
.shot{ cursor: zoom-in; }


    .k{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      background: rgba(255,255,255,.05);
      border:1px solid var(--border);
      padding:2px 6px;
      border-radius: 10px;
      color: var(--text);
    }

    .notice{
      border-left:4px solid rgba(255,138,0,.55);
      background: rgba(255,138,0,.10);
      padding:12px 12px;
      border-radius: 12px;
      color: var(--muted);
      border: 1px solid rgba(255,138,0,.18);
    }

        /* --- Waitlist form --- */
    .form{ margin-top:10px; }
    .form-row{ display:grid; gap:12px; }
    @media(min-width:760px){ .form-row{ grid-template-columns:1fr 1fr; } }

    .field{ display:block; }
    .field span{
      display:block;
      font-size:12px;
      font-weight:700;
      color:var(--muted);
      margin:0 0 6px;
    }

    .field input{
      width:100%;
      padding:12px 12px;
      border-radius:14px;
      border:1px solid var(--border);
      background: color-mix(in srgb, var(--card2) 92%, transparent);
      color:var(--text);
      outline:none;
      transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    }

    .field input:focus{
      border-color: rgba(255,138,0,.35);
      box-shadow: 0 0 0 4px rgba(255,138,0,.14);
    }

    .field input::placeholder{ color: color-mix(in srgb, var(--muted) 70%, transparent); }



/* --- Footer layout --- */

/* ===== MKBHD-style Footer (minimal white) ===== */
.mkbhd-footer{
  margin-top:90px;
  padding:78px 20px 44px;
  background:#ffffff;
  border-top:1px solid rgba(0,0,0,.06);
  color:#111111; /* keep footer readable even if site theme is dark */
}

/* Keep the footer minimal + white even in dark theme (MKBHD feel) */
html[data-theme="dark"] .mkbhd-footer{
  background:#ffffff;
  border-top:1px solid rgba(0,0,0,.06);
  color:#111111;
}

.mkbhd-footer-inner{
  max-width:980px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:26px;
  text-align:center;
}

.mkbhd-footer-logo .logo{
  background:transparent;
  border:1px solid rgba(0,0,0,.08);
}

.mkbhd-footer-social{
  display:flex;
  gap:22px;
  align-items:center;
  justify-content:center;
}

.mkbhd-footer-social a{
  color:rgba(0,0,0,.70);
  transition:opacity 140ms ease, transform 140ms ease;
}

@media (hover: hover) and (pointer: fine){
  .mkbhd-footer-social a:hover{
    opacity:1;
    transform:translateY(-2px);
  }
}

.mkbhd-footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:28px;
  justify-content:center;
  font-size:14px;
  font-weight:500; /* softer, more mkbhd */
  letter-spacing:.2px;
}

.mkbhd-footer-links a{
  text-decoration:none;
  color:rgba(0,0,0,.72);
  transition:opacity 140ms ease;
}

.mkbhd-footer-links a:hover{
  opacity:.92;
}

.mkbhd-footer-copy{
  font-size:13px;
  color:rgba(0,0,0,.55);
}

.mkbhd-footer-copy a{
  text-decoration:none;
  font-weight:600;
  color:rgba(0,0,0,.72);
}
.mkbhd-footer-copy a:hover{ opacity:.92; }

@media (max-width:640px){
  .mkbhd-footer{
    margin-top:72px;
    padding:64px 16px 36px;
  }
  .mkbhd-footer-links{
    gap:18px;
    font-size:13px;
  }
}

/* --- Social icons (shared: CSS mask so SVG fill doesn't matter) --- */
.social-ic{
  width:18px;
  height:18px;
  display:block;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.social-ic.ig{
  -webkit-mask-image: url('/assets/icon/instagram.svg');
  mask-image: url('/assets/icon/instagram.svg');
}
.social-ic.tt{
  -webkit-mask-image: url('/assets/icon/tiktok.svg');
  mask-image: url('/assets/icon/tiktok.svg');
}
.social-ic.x{
  -webkit-mask-image: url('/assets/icon/x.svg');
  mask-image: url('/assets/icon/x.svg');
}

/* --- Floating social bar (top-right like caswkids.org) --- */
.social-float{
  position: fixed;
  top: 126px; /* sits below sticky header */
  right: 18px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.social-float-link{
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  text-decoration: none;

  color: rgba(255,255,255,.92);
  background: rgba(10,12,18,.55);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 34px rgba(0,0,0,.22);

  transition: transform 120ms ease, opacity 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

@media (hover: hover) and (pointer: fine){
  .social-float-link:hover{
    transform: translateY(-2px);
    opacity: .88;
    box-shadow: 0 20px 46px rgba(0,0,0,.28);
    background: rgba(10,12,18,.68);
  }
}

.social-float-link:active{
  transform: scale(0.98);
}

.social-float-link:focus{ outline:none; }
.social-float-link:focus-visible{
  outline:3px solid rgba(255,138,0,.38);
  outline-offset:3px;
}

/* Light mode: keep it subtle but visible */
html:not([data-theme="dark"]) .social-float-link{
  color: rgba(28,27,26,.90);
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(28,27,26,.12);
  box-shadow: 0 16px 34px rgba(0,0,0,.12);
}
html:not([data-theme="dark"]) .social-float-link:hover{
  background: rgba(255,255,255,.72);
}

/* Mobile: align floating social bar with header padding and style hamburger */
@media (max-width: 820px){
  /* Align floating social bar with the page padding (same as .wrap) */
  .social-float{
    right: 16px;
    top: 112px;
  }

  /* Hamburger now lives INSIDE the floating column, so it inherits .social-float-link styling */
  .menu-float-btn{
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    border: none;
  }
  header nav{ min-height: 44px; }
  
  /* Hide the floating social column while the menu is open (prevents overlap on small screens) */
  body.menu-open .social-float{
    display: none !important;
  }
}

/* Never hide the floating social column on mobile */
/* (Intentionally no max-width hiding rule) */

.card.plan .price-block{
  padding:16px 16px;
  border-radius:20px;
  background: linear-gradient(180deg, rgba(255,138,0,.12), rgba(255,138,0,.05));
  border: 1px solid rgba(255,138,0,.22);
}

.card.plan .price-usd{
  font-size:44px;
  font-weight:950;
  letter-spacing:-1px;
  line-height:1.02;
  color: var(--text);
  text-shadow: 0 2px 0 rgba(255,255,255,.45);
}

.card.plan .price-usd::after{
  content:"USD";
  margin-left:10px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.6px;
  vertical-align:middle;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.65);
  color: var(--muted);
}

.card.plan .price-fcfa{
  margin-top:10px;
  font-weight:850;
  font-size:15px;
}

.card.plan .price-save{
  margin-top:8px;
  font-size:13px;
  font-weight:900;
  color: var(--text);
  opacity:.92;
}

.card.plan .price-fcfa::before{
  width:28px;
  height:28px;
  font-size:15px;
  font-weight:950;
  background: rgba(255,255,255,.70);
}

/* Mobile sizing */
@media (max-width: 720px){
  .card.plan .price-usd{ font-size:38px; }
  .card.plan .price-block{ padding:14px 14px; }
}

/* --- FORCE Pricing mobile polish --- */

@media (max-width: 720px){
  .card.plan .price-block{
    padding:16px 14px;
    border-radius:20px;
    background: linear-gradient(180deg, rgba(255,138,0,.14), rgba(255,138,0,.06));
    border: 1px solid rgba(255,138,0,.28);
  }

  .card.plan .price-usd{
    font-size:42px !important;
    font-weight:950;
    letter-spacing:-1px;
    line-height:1.02;
  }

  .card.plan .price-usd::after{
    font-size:11px;
    padding:4px 9px;
  }

  .card.plan .price-fcfa{
    font-size:16px;
    font-weight:900;
  }

  .card.plan .price-save{
    font-size:13px;
    font-weight:900;
  }

  .card.plan .price-fcfa::before{
    width:26px;
    height:26px;
    font-size:14px;
  }
}

/* --- Pricing highlight (Annual = best choice) --- */
.card.plan.featured{
  border: 2px solid rgba(255, 122, 0, 0.70);
  background: rgba(255, 122, 0, 0.08);
  box-shadow: 0 14px 38px rgba(0,0,0,.24);
  position: relative;
}

/* One-time attention cue (no looping) */
@keyframes annualPulseOnce{
  0%{ box-shadow: 0 14px 38px rgba(0,0,0,.24); transform: translateY(0); }
  35%{ box-shadow: 0 24px 64px rgba(255,122,0,.20), 0 18px 52px rgba(0,0,0,.22); transform: translateY(-2px); }
  65%{ box-shadow: 0 24px 64px rgba(255,122,0,.20), 0 18px 52px rgba(0,0,0,.22); transform: translateY(-2px); }
  100%{ box-shadow: 0 14px 38px rgba(0,0,0,.24); transform: translateY(0); }
}
.card.plan.featured.pulse-once{
  animation: annualPulseOnce 900ms cubic-bezier(.2,.9,.2,1) 1;
}

.card.plan .plan-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  line-height: 1;
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 122, 0, 0.55) !important;
  background: rgba(255, 122, 0, 0.10) !important;
  color: rgba(255, 122, 0, 0.98) !important;
  margin-bottom: 8px;
}

.card.plan.featured .plan-badge{
  background: rgba(255, 122, 0, 0.14) !important;
}

@media (max-width: 520px){
  .card.plan .plan-badge{
    font-size: 11px;
    padding: 5px 9px;
  }
}

/* --- Scroll reveal (safe fallback: never blank) --- */
/* Default: visible. We only hide when JS adds `.reveal` on <html>. */
[data-reveal]{
  opacity: 1;
  transform: none;
}

html.reveal [data-reveal]{
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition: opacity 0.45s cubic-bezier(.2,.9,.2,1), transform 0.45s cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform;
}

html.reveal [data-reveal].in-view{
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce){
  html.reveal [data-reveal]{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .btn{ transition:none !important; }
  .card.plan.featured.pulse-once{ animation: none !important; }
}



/* --- Logo: make the icon look “full” in the header (no tiny padding) --- */
/* NOTE: The app icon already has its own internal padding/glow.
   So we do NOT add extra CSS padding, otherwise it looks like it “doesn’t fit”. */
.brand .logo,
.drawer-title .logo,
.logo{
  width:42px;
  height:42px;
  border-radius:14px;
  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.06);
}

/* Fill the container more aggressively (looks better with rounded app icons) */
.logo img{
  width:100%;
  height:100%;
  display:block;
  padding:0;           /* IMPORTANT: remove extra padding */
  object-fit: cover;   /* makes the icon feel “full” */
}

/* Dark mode polish */
html[data-theme="dark"] .brand .logo,
html[data-theme="dark"] .drawer-title .logo,
html[data-theme="dark"] .logo{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.14);
}

/* Hamburger: only visible on mobile (it lives in the floating social column) */
.menu-btn{ display:none !important; }
@media (max-width: 820px){
  .menu-btn{ display:inline-flex !important; }
}

/* --- Mobile Sticky Bottom CTA --- */
.mobile-cta{
  display:none;
}

@media (max-width: 820px){
  /* Mobile bottom CTA: Cash.app-style pills (no bar background behind)
     Hidden until user scrolls, then slides up + fades in. */
  .mobile-cta{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:95;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));

    /* IMPORTANT: no background container behind the buttons */
    background: transparent;
    backdrop-filter: none;
    border-top: 0;
    box-shadow: none;

    display:flex;
    gap:12px;

    /* Hidden by default (revealed by body.scrolled) */
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 200ms ease, transform 220ms cubic-bezier(.2,.9,.2,1);

    /* allow only the buttons to be clickable */
    pointer-events: none;
  }

  /* Reveal after user starts scrolling */
  body.scrolled .mobile-cta{
    opacity: 1;
    transform: translateY(0);
  }

  /* Hide the bottom CTA when the user reaches the bottom of the page */
  body.at-bottom .mobile-cta{
    opacity: 0;
    transform: translateY(18px);
    pointer-events: none;
  }

  .mobile-cta .btn{
    pointer-events: auto;
    flex:1;
    min-height:56px;
    font-weight:800;
    font-size:16px;
    padding:16px 16px;
    border-radius:999px;

    /* Light mode: use the site theme surface (warm) */
    background: var(--card2);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: 0 16px 38px rgba(0,0,0,.14);
    backdrop-filter: none;
  }


  /* Subtle press feedback */
  .mobile-cta .btn:active{
    transform: scale(0.98);
    box-shadow: 0 14px 36px rgba(0,0,0,.24);
  }


  /* Dark mode: BOTH buttons are solid black like Cash App */
  html[data-theme="dark"] .mobile-cta .btn{
    background:#000;
    color:#fff;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 18px 46px rgba(0,0,0,.30);
  }

  /* Keep content from hiding behind the pills */
  body{
    padding-bottom:104px; /* prevent content from hiding behind CTA */
  }
}