/* ===== Base (mobile-first) ===== */
    *,*::before,*::after{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{
      background:#000;color:#fff;
      font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
      line-height:1.4;
    }
    :root{
      --yellow:#ffd21a;
      --muted:#d1d5db;
      --maxw:1200px;
    }
    .wrap{max-width:var(--maxw);margin-inline:auto;padding:24px}
    a{color:inherit;text-decoration:none}

/* ===== Brand ===== */
    .brand{display:grid;gap:16px;justify-content:center}
    .brandmark{width:180px;max-width:45vw;height:auto;margin-left:5px}
    .tagline{font-weight:800;line-height:1.2;text-align:center}

/* ===== Billboard (SVG bulbs overlay the outside) ===== */
    .billboard{
      position:relative;background:#000;
      border-radius:22px; padding:35px 10px 35px 35px;
    }
    .bulb-frame{position:absolute;inset:-14px;width:100%;height:100%;pointer-events:none}
    .bulb-frame rect{
      fill:none; stroke:var(--yellow); stroke-linecap:round;
      stroke-width:20; stroke-dasharray:0 28; /* perfected by JS below */
      vector-effect:non-scaling-stroke;
    }

/* ===== Typographic mapping (fluid via clamp) ===== */
    .stay-tuned{
      font-family:'Oswald',sans-serif;font-weight:400;letter-spacing:.08em;
      font-size:clamp(16px,4.5vw,24px); margin:0 0 2px; text-align:center;
    }
    .coming-soon{
      font-family:'Oswald',sans-serif;font-weight:900;color:#ea0000;letter-spacing:-.03em;
      line-height:.9; margin:8px 0 0; text-align:center;
      font-size:clamp(42px,12vw,90px);
    }
    .price{
      font-family:'Oswald',sans-serif;font-weight:900;letter-spacing:-.05em;text-align:center;margin-top:15px;
      font-size:clamp(64px,18vw,135px);
    }
    .bullets{font-family:'Oswald',sans-serif;font-weight:700;line-height:1.2;margin:15px 0 45px;text-align:center;}
    .bullets li{margin:6px 0}
    .copyright{font-family:'Oswald',sans-serif;color:#b0b0b0;font-weight:400;font-size:14px;margin-top:18px;width:320px;text-align:center}

/* ===== App art & badge ===== */
    .app-art{width:min(600px,90vw); justify-self:center}
    .app-art img{width:100%;height:auto;display:block;margin:0}
    .store-btn{display:inline-block;margin-top:30px;justify-self:center}
    .store-btn img{display:block;margin:0 auto;height:auto;max-width:clamp(150px,50vw,220px);width:100%}

/* ===== Outer grid (brand + billboard) ===== */
    .grid{display:grid;gap:28px}

/* ===== Inner grid (billboard content) ===== */
    .billboard-grid{display:grid;gap:22px}
    /* Mobile-first: flatten columns so we can interleave items */
    .col-left,.col-right{display:contents}
    /* Mobile order: stay → soon → app-art → badge → price → bullets */
    .stay-tuned{order:1}
    .coming-soon{order:2}
    .app-art{order:3}
    .store-btn{order:4}
    .price{order:5}
    .bullets{order:6}

/* ===== Breakpoints (common set) ===== */

    /* ≥480px (small phones) — demo hook (no layout change needed) */
    @media (min-width:480px){
      /* no-op: keep mobile stack */
    }

    /* ≥768px (tablets) — optional small spacing/padding bumps */
    @media (min-width:768px){
      .wrap{padding:32px}
      .billboard{padding:40px 16px 40px 40px}
    }

    /* ≥1024px (desktops) — switch to two columns inside billboard & brand+billboard split */
    @media (min-width:1024px){
      .grid{grid-template-columns:320px 1fr;align-items:start}

      .billboard-grid{grid-template-columns:1.1fr .9fr;align-items:start}
      .col-left,.col-right{display:block}          /* restore wrappers */
      .app-art img{margin-top:-12px;margin-bottom:25px;margin-left:-25px} /* your desktop offsets */
      .store-btn img{max-width:220px}
    }

    /* ≥1200px (xl) — optional breathing room */
    @media (min-width:1200px){
      .wrap{padding:40px}
    }

    /* ≥1440px (xxl) — optional max width tweak */
    @media (min-width:1440px){
      :root{ --maxw:1280px; } /* gentle widen if desired */
    }
	
	/* 320 fix */
	/* ==== 320–360px hardening (phones) ==== */
@media (max-width: 360px) {
  /* Prevent any accidental horizontal scroll from absolute elements */
  html, body { overflow-x: hidden; }

  /* Give the layout a smidge more usable width */
  .wrap { padding: 16px; }

  /* Tighten the billboard padding & clip the negative-inset SVG bulbs */
  .billboard {
    padding: 18px 12px 20px 18px;  /* L/T/R/B */
    overflow: hidden;              /* CLIP the bulb frame overflow */
  }

  /* Keep bulbs visible but clipped cleanly by the card */
  .bulb-frame { inset: -16px; }    /* can be -14 to -18; -16 is safe */

  /* Type sizes: keep the vibe, but guarantee fit */
  .stay-tuned  { font-size: clamp(14px, 4.5vw, 22px); }
  .coming-soon { font-size: clamp(34px, 11vw, 90px); letter-spacing: -0.02em; }
  .price       { font-size: clamp(52px, 18vw, 135px); }

  /* Bullets: slightly smaller + better line-height on tiny screens */
  .bullets     { margin: 12px 0 28px; }
  .bullets li  { font-size: clamp(14px, 4.2vw, 20px); line-height: 1.25; }

  /* App art & badge: keep them inside comfortably */
  .app-art     { width: min(480px, 88vw); }
  .store-btn img { max-width: clamp(140px, 48vw, 200px); }

  /* If the inline tagline sizes are pushing too wide, force a safe cap */
  /* (Inline styles win by default, so use !important to protect small screens) */
  .tagline > div { font-size: clamp(18px, 6.2vw, 32px) !important; }
}

/* ==== Tablet breathing room (optional) ==== */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .wrap { padding: 28px; }
  .billboard { padding: 32px 14px 32px 32px; }
}