/* ── Paywall Overlay ─────────────────────────────────────────
   Ported from metronome-web/components/PaywallComponent.vue
   Primary colour: --pw-blue #5cc8e1  (replace to brand)
   ──────────────────────────────────────────────────────────── */

/* ── Variables ──────────────────────────────────────────────── */
.pw-overlay {
  --pw-blue:        #58C1B9;
  --pw-blue-dark:   #3fa9a1;
  --pw-blue-bg:     #e0f5f4;
  --pw-border:      #000000;
  --pw-active:      #58C1B9;
  --pw-badge-bg:    #58C1B9;
  --pw-font:        'Manrope', system-ui, sans-serif;
}

/* ── Animations ─────────────────────────────────────────────── */
@keyframes pw-slide-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes pw-slide-out {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}
@keyframes pw-slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes pw-slide-down {
  from { transform: translateY(0);    opacity: 1; }
  to   { transform: translateY(100%); opacity: 0; }
}

/* ── Overlay backdrop ───────────────────────────────────────── */
.pw-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index:         2000;
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  padding-left:    40px;
}
.pw-overlay.hidden { display: none; }

/* ════════════════════════════════════════════════════════════
   DESKTOP  (≥ 999 px)
   ════════════════════════════════════════════════════════════ */
.pw-desktop {
  display:        flex;
  height:         100vh;
  width:          100%;
  max-width:      1200px;
  background:     #ffffff;
  overflow:       hidden;
  animation:      pw-slide-in 0.35s ease-out;
  font-family:    var(--pw-font);
}
.pw-desktop.pw-closing {
  animation: pw-slide-out 0.3s ease-out forwards;
}

/* ── Left panel ─────────────────────────────────────────────── */
.pw-left {
  flex:      0 0 50%;
  max-width: 50%;
  position:  relative;
  overflow:  hidden;
}

.pw-left-bg {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.pw-close-btn {
  position:   absolute;
  top:        20px;
  left:       20px;
  z-index:    10;
  display:    flex;
  align-items:     center;
  justify-content: center;
  background:  none;
  border:      none;
  cursor:      pointer;
  padding:     0;
  opacity:     0.85;
  transition:  opacity 0.15s;
}
.pw-close-btn:hover { opacity: 1; }

.pw-left-content {
  position:        absolute;
  inset:           0;
  display:         flex;
  flex-direction:  column;
  justify-content: flex-start;
  align-items:     center;
  padding:         46px 48px 76px;
  pointer-events:  none;
  text-align:      center;
}

.pw-left-title {
  color:       #ffffff;
  font-weight: 700;
  font-size:   42px;
  line-height: 1.1;
  text-align:  center;
  margin:      0;
}

.pw-features {
  display:        flex;
  flex-direction: column;
  gap:            24px;
  width:          100%;
  margin-top:     48px;
}
.pw-feature-row {
  display:     flex;
  align-items: flex-start;
  gap:         16px;
}

.pw-feature-icon {
  width:       34px;
  height:      34px;
  flex-shrink: 0;
  object-fit:  contain;
}

.pw-feature-text {
  margin:      0;
  color:       #ffffff;
  font-size:   21px;
  font-weight: 500;
  line-height: 1.3;
  text-align:  left;
}
.pw-feature-text b { font-weight: 700; }

.pw-testimonial {
  width:           100%;
  display:         flex;
  justify-content: center;
  margin-top:      24px;
}
.pw-testimonial-card {
  background:     rgba(255, 255, 255, 0.5);
  border-radius:  24px;
  padding:        18px 32px 22px;
  width:          100%;
  max-width:      398px;
  display:        flex;
  flex-direction: column;
  align-items:    center;
}
.pw-stars {
  font-size:      20px;
  color:          #f5a623;
  margin-bottom:  14px;
  letter-spacing: 3px;
}
.pw-testimonial-text {
  margin:      0;
  font-weight: 600;
  font-size:   15px;
  line-height: 1.4;
  color:       #2278ae;
  text-align:  center;
}

/* Left auth-welcome (shown when auth panel is open) */
.pw-left-auth {
  position:            absolute;
  inset:               0;
  display:             flex;
  flex-direction:      column;
  align-items:         center;
  justify-content:     center;
  padding-bottom:      45%;
  text-align:          center;
  background-image:    url('../assets/asset-login-panel.webp');
  background-size:     cover;
  background-position: center;
}

.pw-left-auth-content {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            16px;
}

.pw-left-auth-welcome {
  margin:      0;
  font-family: var(--pw-font);
  font-size:   40px;
  font-weight: 700;
  color:       #000000;
}

.pw-left-auth-img {
  width:      420px;
  height:     auto;
  object-fit: contain;
}


/* ── Right panel ────────────────────────────────────────────── */
.pw-right-stain {
  position:      absolute;
  top:           0;
  right:         0;
  width:         120px;
  pointer-events: none;
  z-index:       0;
}

.pw-right {
  flex:            0 0 50%;
  position:        relative;
  max-width:       50%;
  display:         flex;
  flex-direction:  column;
  justify-content: flex-start;
  align-items:     center;
  padding:         80px 20px 0;
  overflow-y:      auto;
  font-family:     var(--pw-font);
}

.pw-right--auth {
  background: linear-gradient(180deg, #6FD1F00D 0%, #3A36F00D 100%);
  padding-top: 64px;
}

/* Plans view */
.pw-right-plans {
  width:          100%;
  max-width:      520px;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  flex:           1;
  user-select:    none;
  position:       relative;
  z-index:        1;
}

.pw-right-top {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  gap:            16px;
}

/* [ASSET: app icon — replace .pw-right-app-icon with <img src="assets/paywall-app-icon.png" style="width:140px;height:140px;object-fit:contain;border-radius:28px">] */
.pw-right-app-icon {
  width:         100%;
  max-width:     320px;
  height:        auto;
  object-fit:    contain;
}

.pw-right-title {
  margin:      0;
  font-size:   28px;
  font-weight: 700;
  color:       #000000;
}
.pw-right-subtitle {
  margin:      0;
  font-size:   16px;
  font-weight: 500;
  color:       #000000;
  line-height: 1.3;
}
.pw-right-subtitle b { font-weight: 600; }

/* Trial toggle row */
.pw-trial {
  width:          100%;
  display:        flex;
  flex-direction: column;
  margin-top:     56px;
  margin-bottom:  44px;
  position:       relative;
}
.pw-trial-box {
  height:          78px;
  border-radius:   14px;
  border:          2px solid var(--pw-border);
  padding:         0 24px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  cursor:          pointer;
  background:      #ffffff;
  box-sizing:      border-box;
  transition:      border-color 0.2s;
}
.pw-trial-box.active { border-color: var(--pw-active); }

.pw-trial-text {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}
.pw-trial-title {
  margin:      0;
  font-size:   18px;
  font-weight: 700;
  color:       #000000;
}
.pw-trial-subtitle {
  margin:      0;
  font-size:   16px;
  font-weight: 500;
  color:       #000000;
}

/* [ASSET: trial icons — ic-paywall-trial-off.png / ic-paywall-trial-on.png
   Replace .pw-trial-check with <img id="pw-trial-icon" src="assets/ic-paywall-trial-off.png" width="34" height="34"> ] */
.pw-trial-check {
  width:         34px;
  height:        34px;
  border-radius: 50%;
  border:        2.5px solid var(--pw-border);
  flex-shrink:   0;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    all 0.2s;
  font-size:     18px;
  color:         transparent;
}
.pw-trial-box.active .pw-trial-check {
  background:   var(--pw-blue);
  border-color: var(--pw-blue);
  color:        #ffffff;
}

.pw-trial-extra {
  position:   absolute;
  left:       0;
  right:      0;
  top:        calc(100% + 10px);
  display:    flex;
  justify-content: space-between;
  padding:    0 20px;
  font-size:  15px;
  font-weight: 500;
  opacity:    0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.pw-trial-extra.visible { opacity: 1; }
.pw-trial-extra p { margin: 0; }
.pw-trial-extra .pw-blue { color: #000000; }

/* Plan boxes */
.pw-products {
  width:          100%;
  display:        flex;
  flex-direction: column;
  gap:            14px;
}
.pw-product {
  border-radius:   14px;
  border:          2px solid var(--pw-border);
  padding:         0 24px;
  height:          78px;
  position:        relative;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  cursor:          pointer;
  background:      #ffffff;
  box-sizing:      border-box;
  transition:      border-color 0.2s, background 0.2s;
}
.pw-product.active {
  border-color: var(--pw-active);
  background:   rgba(92, 200, 225, 0.08);
}
.pw-product-name {
  margin:      0;
  font-size:   18px;
  font-weight: 700;
  color:       #000000;
}
.pw-product-badge {
  position:    absolute;
  left:        20px;
  top:         -13px;
  padding:     5px 12px;
  border-radius: 30px;
  background:  var(--pw-badge-bg);
  color:       #ffffff;
  font-size:   12px;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1;
}
.pw-product-price-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            2px;
}
.pw-product-price,
.pw-product-trial-top {
  margin:      0;
  font-size:   14px;
  font-weight: 700;
  color:       #000000;
}
.pw-product-trial-bottom {
  margin:      0;
  font-size:   13px;
  font-weight: 500;
  color:       #000000;
}

/* CTA */
.pw-cta {
  width:      100%;
  margin-top: 28px;
}
.pw-continue-btn {
  width:         100%;
  height:        58px;
  border-radius: 10px;
  border:        none;
  background:    var(--pw-blue);
  color:         #ffffff;
  font-family:   var(--pw-font);
  font-size:     18px;
  font-weight:   700;
  cursor:        pointer;
  transition:    background 0.2s;
}
.pw-continue-btn:hover { background: var(--pw-blue-dark); }

#pw-auth-submit {
  background: #58C1B9;
}
#pw-auth-submit:hover { background: #3fa9a1; }

.pw-right-footer {
  width:           100%;
  margin-top:      auto;
  padding:         16px 0;
  display:         flex;
  justify-content: center;
}
.pw-footer-text {
  margin:      0;
  font-size:   13px;
  color:       rgba(0, 0, 0, 0.6);
  text-align:  center;
}
.pw-footer-cancel { text-decoration: underline; }

/* Hidden everywhere by default — only shown in mobile landscape via media query */
.pw-mobile-top-logo { display: none; }

/* Auth panel (right side desktop) */
.pw-right-auth {
  width:          100%;
  max-width:      480px;
  display:        flex;
  flex-direction: column;
  gap:            28px;
  padding-top:    0;
  align-items:    center;
  flex:           1;
  min-height:     0;
}
.pw-auth-header {
  display:       flex;
  flex-direction: column;
  gap:           6px;
  text-align:    center;
  margin-bottom: 28px;
}
.pw-auth-title {
  margin:      0;
  font-size:   28px;
  font-weight: 700;
  line-height: 1.2;
}
.pw-auth-title .pw-blue { color: var(--pw-blue); }
.pw-auth-title-black { color: #000000; font-weight: 700; }
.pw-auth-title-pink  { color: #E852AC; font-weight: 700; }

.pw-auth-form {
  display:        flex;
  flex-direction: column;
  gap:            20px;
  width:          100%;
  margin-bottom:  -18px; /* reduces 28px parent gap to 10px, matching OR→button spacing */
}
.pw-auth-input {
  width:         100%;
  padding:       18px 16px;
  border-radius: 14px;
  border:        2px solid #000000;
  outline:       none;
  font-family:   var(--pw-font);
  font-size:     14px;
  box-sizing:    border-box;
  transition:    border-color 0.2s;
}
.pw-auth-input:focus { border-color: var(--pw-blue); }
.pw-auth-input::placeholder { color: #757B96; font-size: 16px; font-weight: 700; }

.pw-auth-error {
  margin:     0;
  color:      #d33;
  font-size:  13px;
  text-align: center;
}

.pw-or {
  display:   flex;
  flex-direction: column;
  gap:       10px;
  width:     100%;
  text-align: center;
}
.pw-or-text {
  margin:         0;
  font-size:      13px;
  font-weight:    700;
  opacity:        0.85;
  text-transform: lowercase;
}

/* [ASSET: google-logo.svg / apple-logo.svg — add <img class="pw-social-icon" src="assets/…"> inside .pw-social-btn] */
.pw-social-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  width:           100%;
  padding:         12px 20px;
  border-radius:   10px;
  border:          1px solid #ccc;
  background:      #ffffff;
  cursor:          pointer;
  font-family:     var(--pw-font);
  font-size:       14px;
  font-weight:     600;
  transition:      background 0.15s;
  box-sizing:      border-box;
}
.pw-social-btn:hover { background: #f0f0f0; }
.pw-social-btn--apple { background: #000; color: #fff; border-color: #000; }
.pw-social-btn--apple:hover { background: #222; }
.pw-social-icon {
  width:      24px;
  height:     24px;
  object-fit: contain;
}

.pw-auth-footer {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  text-align:     center;
  padding-bottom: 24px;
  margin-top:     auto;
}
.pw-auth-toggle {
  margin:    0;
  font-size: 15px;
  opacity:   0.85;
}
.pw-auth-link {
  margin-left:     6px;
  font-weight:     700;
  text-decoration: underline;
  color:           var(--pw-blue);
  cursor:          pointer;
}
.pw-auth-back {
  font-size:       14px;
  text-decoration: underline;
  color:           inherit;
  opacity:         0.7;
  cursor:          pointer;
}

/* ════════════════════════════════════════════════════════════
   MOBILE  (< 999 px)
   ════════════════════════════════════════════════════════════ */
.pw-mobile {
  display: none;
}

@media (max-width: 998px) {
  .pw-overlay {
    padding-left: 0;
  }
  .pw-desktop {
    display: none;
  }
  .pw-mobile {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    height:          100vh;
    height:          100dvh;
    width:           100vw;
    padding:         clamp(52px, 9dvh, 70px) 30px clamp(16px, 3.5dvh, 40px);
    gap:             clamp(16px, 3.5dvh, 32px);
    box-sizing:      border-box;
    overflow-y:      auto;
    position:        relative;
    font-family:     var(--pw-font);
    animation:       pw-slide-up 0.35s ease-out;
  }
  .pw-mobile.pw-closing {
    animation: pw-slide-down 0.3s ease-out forwards;
  }
  .pw-mobile.pw-no-scroll {
    overflow: hidden;
    padding:  0;
  }

  /* [ASSET: paywall-mobile-bg — replace .pw-mobile-bg with <img class="pw-mobile-bg" src="assets/paywall-mobile-bg.svg">] */
  .pw-mobile-bg {
    position:   absolute;
    inset:      0;
    z-index:    -1;
    background: linear-gradient(180deg, #a8e6f0 0%, #e2f2f7 60%, #ffffff 100%);
  }
  .pw-mobile-bg img {
    width:      100%;
    height:     100%;
    object-fit: cover;
  }

  .pw-mobile-top {
    display:         flex;
    width:           100%;
    align-items:     center;
    justify-content: center;
  }
  .pw-mobile-top .pw-close-btn {
    position:  absolute;
    top:       40px;
    left:      30px;
    color:     #000000;
    font-size: 28px;
  }
  .pw-already-purchased {
    font-size:       14px;
    font-weight:     700;
    text-decoration: underline;
    margin:          8px 0 0;
    cursor:          pointer;
  }

  .pw-mobile-app {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
  }
  .pw-mobile-app-icon {
    width:      calc(100% - 48px);
    height:     auto;
    object-fit: contain;
  }
  .pw-mobile-app h1 {
    font-size:   26px;
    font-weight: 800;
    margin:      14px 0 8px;
  }
  .pw-mobile-app-bullets {
    list-style:  none;
    padding:     0;
    margin:      0;
    display:     flex;
    flex-direction: column;
    align-items: center;
    gap:         4px;
    text-align:  center;
  }
  .pw-mobile-app-bullets li {
    font-size:   15px;
    font-weight: 700;
  }
  .pw-mobile-app-bullets li::before {
    content: '• ';
  }

  /* Mobile trial */
  .pw-mobile-trial { width: 100%; }
  .pw-mobile-trial-box {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         8px 16px;
    border-radius:   10px;
    background:      #ffffff;
    border:          1px solid #000000;
    cursor:          pointer;
    transition:      border-color 0.2s;
  }
  .pw-mobile-trial-box.active { border-color: var(--pw-blue); }
  .pw-mobile-trial-text {
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    min-height:      36px;
  }
  .pw-mobile-trial-text h3 {
    margin:      0;
    font-size:   15px;
    font-weight: 700;
    line-height: 1.2;
  }
  .pw-mobile-trial-text p {
    margin:      2px 0 0;
    font-size:   12px;
    line-height: 1.2;
  }
  /* [ASSET: circular-blue-check.svg — replace .pw-mobile-trial-check with <img src="assets/circular-blue-check.svg" width="26" height="26">] */
  .pw-mobile-trial-check {
    width:         26px;
    height:        26px;
    border-radius: 50%;
    border:        1px solid #000000;
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     16px;
    color:         transparent;
    flex-shrink:   0;
    transition:    all 0.2s;
  }
  .pw-mobile-trial-box.active .pw-mobile-trial-check {
    background:   var(--pw-blue);
    border-color: var(--pw-blue);
    color:        #ffffff;
  }
  .pw-mobile-trial-extra {
    display:         flex;
    justify-content: space-between;
    padding:         10px 16px 0;
  }
  .pw-mobile-trial-extra p { margin: 0; font-size: 13px; font-weight: 700; }
  .pw-mobile-trial-extra .pw-blue { color: var(--pw-blue); }

  /* Mobile plans */
  #pw-mobile-trial {
    margin-bottom: 0;
  }
  .pw-mobile-plans-list {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    width:          100%;
  }
  .pw-mobile-plan {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    background:      #ffffff;
    border-radius:   10px;
    padding:         8px 16px;
    position:        relative;
    cursor:          pointer;
    border:          1px solid #000000;
    transition:      border-color 0.2s, background 0.2s;
  }
  .pw-mobile-plan.active {
    border-color: var(--pw-active);
    background:   rgba(92, 200, 225, 0.1);
  }
  .pw-mobile-plan-name {
    margin:      0;
    font-size:   16px;
    font-weight: 700;
  }
  .pw-mobile-plan-price {
    display:        flex;
    flex-direction: column;
    align-items:    flex-end;
    justify-content: center;
    min-height:     36px; /* reserves space for 2 trial lines — prevents layout shift on toggle */
  }
  .pw-mobile-plan-price p { margin: 0; font-size: 13px; }
  .pw-mobile-plan-badge {
    position:      absolute;
    top:           -10px;
    left:          12px;
    background:    var(--pw-blue);
    border-radius: 10px;
    color:         #ffffff;
    font-size:     11px;
    padding:       2px 10px;
    font-weight:   700;
  }
  .pw-mobile-plan-price p[id$="-trial-top"] {
    font-weight: 700;
  }

  /* Mobile CTA */
  #pw-mobile-cta {
    margin-top: calc(10px - clamp(16px, 3.5dvh, 32px)); /* keep spacing = plan-box gap (10px) at all viewport sizes */
  }
  .pw-mobile-cta {
    width:         100%;
    padding:       16px 0;
    border-radius: 12px;
    border:        none;
    background:    var(--pw-blue);
    color:         #ffffff;
    font-family:   var(--pw-font);
    font-size:     17px;
    font-weight:   700;
    cursor:        pointer;
    transition:    background 0.2s;
  }
  .pw-mobile-cta:hover { background: var(--pw-blue-dark); }

  /* Mobile auth */
  .pw-mobile-auth {
    width:           100%;
    height:          100vh;
    height:          100dvh;
    position:        relative;
    overflow:        hidden;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: flex-start;
    gap:             28px;
    padding:         40px 30px;
    box-sizing:      border-box;
  }
  .pw-mobile-auth .pw-mobile-bg {
    position: absolute;
    inset:    0;
    z-index:  -1;
  }
  .pw-mobile-auth .pw-mobile-bg img {
    width:      100%;
    height:     100%;
    object-fit: cover;
  }
  /* Close button — absolute top-right, #58C1B9 icon */
  .pw-mobile-auth-close-btn {
    position: absolute;
    top:      24px;
    right:    12px;
    left:     auto;
    width:    40px;
    height:   40px;
    display:  flex;
    align-items:     center;
    justify-content: center;
    padding:  0;
    background: none;
    border:   none;
    cursor:   pointer;
  }
  .pw-mobile-auth-close-btn img {
    width:  24px;
    height: 24px;
    filter: brightness(0) saturate(100%) invert(72%) sepia(19%) saturate(758%) hue-rotate(133deg) brightness(93%) contrast(90%);
  }

  .pw-mobile-auth .pw-auth-header {
    text-align: center;
  }
  .pw-mobile-auth .pw-auth-title {
    font-size:   26px;
    text-align:  center;
    line-height: 1.2;
  }
  .pw-mobile-auth .pw-auth-form {
    gap: 16px;
  }
  .pw-mobile-auth .pw-auth-input {
    padding:      16px 14px;
    border-width: 1px;
  }
  .pw-mobile-auth .pw-continue-btn {
    height:  auto;
    padding: 16px 0;
  }
  .pw-mobile-auth .pw-auth-toggle {
    text-align: center;
  }
}

/* ── Mobile paywall — landscape phones ───────────────────── */
@media (max-width: 767px) and (orientation: landscape) {
  /* Fill viewport exactly — use 100% since parent overlay is position:fixed;inset:0
     This handles Safari multi-tab correctly without needing viewport units */
  .pw-mobile {
    height:     100%;
    overflow-y: hidden;
    padding:    10px 20px 8px;
    gap:        8px;
  }

  /* Landscape background image */
  .pw-mobile-bg {
    background: url('../assets/paywall/asset-paywall-background-mobile-landscape.webp') center / cover no-repeat;
  }
  .pw-mobile-bg img { display: none; }

  /* X button: vertically centered in the top row, pinned left */
  .pw-mobile-top .pw-close-btn {
    top:       50%;
    transform: translateY(-50%);
    left:      20px;
  }

  /* Top row: position:relative so X and "Already purchased?" anchor here; logo is only in-flow item → centers */
  .pw-mobile-top {
    position:        relative;
    justify-content: center;
    align-items:     center;
  }

  /* Logo: scales with viewport height, capped to prevent wide images from overflowing */
  .pw-mobile-top-logo {
    display:    block;
    height:     clamp(30px, 12dvh, 52px);
    max-width:  40vw;
    width:      auto;
    object-fit: contain;
  }

  /* "Already purchased?" pinned to right, out of flex flow */
  #pw-already-purchased {
    position:  absolute;
    right:     0;
    top:       50%;
    transform: translateY(-50%);
    margin:    0;
  }

  /* Hide 24px spacer so logo is truly centered */
  .pw-mobile-top > div {
    display: none;
  }

  /* Hide the logo from its original position inside .pw-mobile-app */
  .pw-mobile-app-icon {
    display: none;
  }

  /* Smaller title */
  .pw-mobile-app h1 {
    font-size: 16px;
    margin:    3px 0 2px;
  }

  /* Bullets in a single row */
  .pw-mobile-app-bullets {
    flex-direction:  row;
    flex-wrap:       wrap;
    justify-content: center;
  }
  .pw-mobile-app-bullets li { font-size: 12px; }

  /* Compact trial extra row */
  .pw-mobile-trial-extra {
    padding: 2px 16px 0;
  }
  .pw-mobile-trial-extra p { font-size: 12px; }

  /* Plans side by side */
  .pw-mobile-plans-list {
    flex-direction: row;
  }
  .pw-mobile-plan { flex: 1; }

  /* Compact CTA */
  .pw-mobile-cta    { padding:    8px 0; }
  #pw-mobile-cta    { margin-top: 2px;  } /* gap is 8px, plan-gap is 10px → 10-8=2px */
}

/* ── Mobile landscape compact — Safari multi-tab / iPhone SE (viewport ≤ 320px) ── */
/* Chrome iPhone 14+ is ~334px dvh so never triggers. Saves ~32px total height.      */
@media (max-width: 767px) and (orientation: landscape) and (max-height: 320px) {
  .pw-mobile {
    padding-top:    5px;
    padding-bottom: 4px;
    gap:            5px;
  }
  .pw-mobile-top-logo {
    height: 22px;
  }
  .pw-mobile-plan-badge {
    top: -5px; /* prevent overlap into trial box at reduced 5px gap */
  }
}