/* postapp2026.html — page-specific styles */
  html, body { margin: 0; padding: 0; }
  body { background: #fff; font-family: var(--font-sans); }

  /* ============================================================
     DESKTOP (≥ 900px) — 1920×1080 canvas, scaled to fit viewport
     ============================================================ */
  .mobile-home { display: none; }

  html, body { background: #ffffff; }

  .desktop-stage {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    overflow: hidden;
    background: #ffffff;
  }
  .desktop-scaler {
    transform-origin: top left;
    position: absolute;
  }
  .home {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background: #ffffff;
  }
  /* Purple geometric shape (transparent on the left, so white shows through there) */
  .home::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../img/home-bg-shape.png") center / cover no-repeat;
    z-index: 1;
    pointer-events: none;
  }

  .master-logo {
    position: absolute;
    top: 36px; left: 56px;
    z-index: 6;
  }
  .master-logo img { height: 56px; display: block; }

  .howhow-figure {
    position: absolute;
    left: -80px; bottom: 0;
    width: 760px; height: 1080px;
    z-index: 4;
    pointer-events: none;
    overflow: visible;
  }
  .howhow-figure img {
    position: absolute;
    left: 0; bottom: 0;
    height: 1020px;
    width: auto;
    display: block;
  }

  /* Wordmark — sits to the right of HOWHOW, doesn't overlap him */
  .wordmark-block {
    position: absolute;
    left: 720px; top: 80px;
    width: 920px;
    z-index: 5;
  }
  .wordmark-block img { width: 100%; height: auto; display: block; }

  /* 3 official PNG buttons — below wordmark, right of HOWHOW body */
  .cta-row {
    position: absolute;
    top: 540px; left: 720px;
    display: flex; gap: 30px;
    z-index: 6;
  }
  .cta-row a {
    display: block;
    transition: transform .15s ease;
  }
  .cta-row a:hover { transform: translateY(-4px) scale(1.02); }
  .cta-row a:active { transform: translateY(2px) scale(.98); }
  .cta-row a img {
    height: 96px; width: auto; display: block;
  }

  /* mascot 啵鴿 holding 快來登錄 — far right, disc aligned with button row */
  .mascot {
    position: absolute;
    right: 120px; top: 500px;
    width: 200px;
    z-index: 6;
  }
  .mascot img { width: 100%; height: auto; display: block; }

  /* Prize tiers — to the RIGHT of HOWHOW so no overlap, below button row */
  .tiers {
    position: absolute;
    left: 720px; top: 660px;
    right: 60px; bottom: 150px;
    z-index: 5;
  }
  .tier { margin-bottom: 10px; }
  .tier:last-child { margin-bottom: 0; }
  /* Staggered / staircase indentation per tier */
  .tier:nth-child(1) { margin-left: 0; }
  .tier:nth-child(2) { margin-left: 90px; }
  .tier:nth-child(3) { margin-left: 45px; }
  .tier-head {
    display: flex; align-items: flex-end; gap: 14px;
    margin-bottom: 4px;
  }
  .tier-head .tier-title { height: 66px; width: auto; display: block; }
  .tier-head .limit {
    font-size: 20px; font-weight: 700; color: var(--ink-ink);
    padding-bottom: 6px;
  }
  .tier-body { padding-left: 6px; }
  .tier-desc {
    font-size: 20px; font-weight: 700;
    color: var(--ink-ink); line-height: 1.5;
  }
  .tier-desc .accent { color: var(--magenta-600); font-weight: 900; }
  .check-row {
    display: flex; gap: 28px; flex-wrap: wrap; margin-top: 4px;
  }
  .check-row .check-item {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 20px; font-weight: 700; color: var(--ink-ink);
  }
  .check-row .check-item img { width: 22px; height: 22px; }
  .magenta-ribbon {
    display: inline-block;
    background: var(--magenta-600); color: #fff;
    font-weight: 900; font-size: 20px;
    padding: 4px 16px; border-radius: 6px;
    margin-left: 12px; vertical-align: middle;
  }
  .dot-row {
    display: flex; gap: 24px; flex-wrap: wrap; margin-top: 2px;
  }
  .dot-row .dot-item {
    display: inline-flex; align-items: baseline; gap: 6px;
    font-size: 20px; font-weight: 700; color: var(--ink-ink);
    line-height: 1.5;
  }
  .dot-row .dot-item::before {
    content: ""; display: inline-block;
    width: 8px; height: 8px;
    background: var(--magenta-600);
    border-radius: 999px;
    transform: translateY(-2px); flex-shrink: 0;
  }
  .closer {
    margin-top: 4px;
    font-size: 20px; font-weight: 700; color: var(--ink-ink);
  }
  .closer .accent { color: var(--magenta-600); }

  /* ============================================================
     MOBILE (< 900px) — single column stack
     ============================================================ */
  @media (max-width: 899px) {
    .desktop-stage { display: none; }
    .mobile-home {
      display: block;
      max-width: 480px;
      margin: 0 auto;
      background: #fff;
      min-height: 100vh;
      position: relative;
      /* Full-page purple shape bg — stretched to cover entire content height */
      background:
        url("../img/home-bg-shape-mobile.png") top center / 100% 100% no-repeat,
        #fff;
      padding-bottom: 0;
    }
    .m-hero {
      position: relative;
      padding: 18px 18px 20px;
      background: transparent;
    }
    .m-master-logo { margin-bottom: 6px; }
    .m-master-logo img { height: 36px; }
    .m-wordmark { width: 100%; height: auto; display: block; margin: 6px 0 18px; }

    .m-cta-row {
      display: flex; flex-direction: row; gap: 10px;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 22px;
    }
    .m-cta-row a {
      display: block; flex: 1 1 0;
      transition: transform .15s ease;
    }
    .m-cta-row a:active { transform: translate(2px, 2px); }
    .m-cta-row a img {
      width: 100%; height: auto; display: block;
    }

    .m-tiers {
      padding: 0 18px;
      display: flex; flex-direction: column;
      gap: 24px;
      margin-top: -8px;
      position: relative;
      z-index: 3;
    }
    .m-mascot {
      position: absolute;
      top: -29px; right: 8px;
      width: 57px; height: auto;
      z-index: 6;
      pointer-events: none;
    }
    .m-tier-head {
      display: flex; align-items: flex-end; gap: 10px;
      margin-bottom: 10px; flex-wrap: wrap;
    }
    .m-tier-head .m-tier-title {
      height: 46px; width: auto; display: block;
    }
    .m-tier-head .m-limit {
      font-size: 13px; font-weight: 700; color: var(--ink-ink);
      padding-bottom: 4px;
    }
    .m-tier-desc {
      font-size: 16px; font-weight: 700;
      color: var(--ink-ink); line-height: 1.55;
    }
    .m-tier-desc .accent { color: var(--magenta-600); font-weight: 900; }
    .m-check-list {
      display: flex; flex-direction: column; gap: 8px;
      margin-top: 10px;
    }
    .m-check-list .check-item {
      display: flex; align-items: center; gap: 8px;
      font-size: 16px; font-weight: 700; color: var(--ink-ink);
    }
    .m-check-list .check-item img { width: 22px; height: 22px; }
    .m-tier-ribbon {
      display: inline-block;
      background: var(--magenta-600); color: #fff;
      font-weight: 900; font-size: 13px;
      padding: 5px 12px; border-radius: 6px;
      white-space: nowrap;
    }
    .m-dot-list {
      display: flex; flex-direction: column; gap: 6px;
      margin-top: 8px; padding-left: 0;
    }
    .m-dot-list li {
      list-style: none; padding-left: 22px; position: relative;
      font-size: 16px; font-weight: 700; color: var(--ink-ink);
      line-height: 1.5;
    }
    .m-dot-list li::before {
      content: ""; position: absolute;
      left: 0; top: 9px;
      width: 10px; height: 10px;
      background: var(--magenta-600); border-radius: 999px;
    }
    .m-closer {
      font-size: 16px; font-weight: 700; color: var(--ink-ink);
      margin-top: 10px; line-height: 1.5;
    }
    .m-closer .accent { color: var(--magenta-600); font-weight: 900; }

    .m-howhow {
      width: 100%;
      display: flex; justify-content: flex-start;
      margin-top: 24px;
      padding-bottom: 0;
    }
    .m-howhow img {
      width: 64%; max-width: 280px; height: auto;
      display: block;
      margin-left: -8px;
    }
  }