.po-screen--s27 {
  position: relative;
  max-width: 520px;
  margin-inline: auto;
}

.po-screen--s27 .po-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-top: calc(20px + env(safe-area-inset-top));
}

.po-screen--s27 .po-header { margin-top: 10px; text-align: left; }
.po-screen--s27 .po-title {
  max-width: 430px;
  margin-inline: 0;
  font-size: clamp(25px, 7.5vw, 34px);
  line-height: 1.02;
  letter-spacing: -.025em;
}

.po-screen--s27 .po-copy {
  max-width: 390px;
  margin-inline: 0;
  font-size: 13px;
  text-align: left;
}

.po-paywall-brand {
  display: flex;
  align-items: center;
  width: max-content;
  margin-inline: 0;
  gap: 8px;
  color: var(--po-fg, #f5f5f4);
  font: 800 13px/1 var(--po-display, "Space Grotesk", system-ui, sans-serif);
}

.po-paywall-brand > span {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 9px;
  background: var(--po-lime, #c9f53c);
  color: var(--po-lime-fg, #0a0a08);
  font-size: 10px;
}

.po-paywall-stars {
  margin-top: 14px;
  color: var(--po-lime, #c9f53c);
  font: 900 13px/1 var(--po-display, "Space Grotesk", system-ui, sans-serif);
  letter-spacing: .09em;
  text-align: left;
}

.po-paywall-close-form {
  position: absolute;
  z-index: 5;
  top: calc(8px + env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
}

.po-paywall-close {
  width: 44px;
  height: 44px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 50%;
  background: rgb(7 8 8 / 82%);
  color: var(--po-fg, #f5f5f4);
  cursor: pointer;
  font-size: 20px;
  visibility: hidden;
  animation: po-reveal-paywall-close .2s ease 5s both;
}

@keyframes po-reveal-paywall-close {
  0%, 99% { visibility: hidden; opacity: 0; transform: scale(.86); }
  100% { visibility: visible; opacity: 1; transform: none; }
}

.po-paywall-urgency {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding: 9px 11px;
  border-block: 1px solid rgb(201 245 60 / 22%);
  color: var(--po-lime, #c9f53c);
  font: 750 9px/1.2 var(--po-mono, "JetBrains Mono", monospace);
  letter-spacing: .07em;
}

.po-paywall-urgency b {
  font-size: 13px;
  letter-spacing: .04em;
}

.po-plan-list {
  display: grid;
  gap: 9px;
  min-width: 0;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
}

.po-plan-legend {
  margin: 0;
  padding: 0 0 8px;
  color: var(--po-muted, #989894);
  font: 700 9px/1.3 var(--po-mono, "JetBrains Mono", monospace);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.po-paywall-empty {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--po-border-strong, #363638);
  border-radius: 16px;
  color: var(--po-muted, #989894);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

.po-plan-card {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 112px;
  padding: 13px;
  border: 1px solid var(--po-border-strong, #363638);
  border-radius: 16px;
  background: rgb(21 23 23 / 92%);
  color: var(--po-fg, #f5f5f4);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.po-plan-card:hover { border-color: rgb(201 245 60 / 48%); }
.po-plan-card:has(.po-plan-radio:checked) {
  border-color: var(--po-lime, #c9f53c);
  background: linear-gradient(135deg, rgb(201 245 60 / 11%), rgb(47 185 255 / 3.5%));
  box-shadow: 0 0 0 1px rgb(201 245 60 / 18%);
}
.po-plan-card:has(.po-plan-radio:focus-visible) { outline: 2px solid var(--po-lime, #c9f53c); outline-offset: 3px; }

.po-plan-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.po-plan-selector {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 2px solid var(--po-border-strong, #363638);
  border-radius: 50%;
}

.po-plan-card:has(.po-plan-radio:checked) .po-plan-selector {
  border: 6px solid var(--po-lime, #c9f53c);
  background: var(--po-lime-fg, #0a0a08);
}

.po-plan-copy,
.po-plan-value { display: block; min-width: 0; }
.po-plan-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.po-plan-name-row strong { font: 800 16px/1.15 var(--po-display, "Space Grotesk", system-ui, sans-serif); }

.po-plan-badge {
  padding: 4px 6px;
  border-radius: 999px;
  background: var(--po-lime, #c9f53c);
  color: var(--po-lime-fg, #0a0a08);
  font: 800 7px/1 var(--po-mono, "JetBrains Mono", monospace);
  letter-spacing: .04em;
}

.po-plan-limits,
.po-plan-billing { display: block; }
.po-plan-limits { margin-top: 7px; color: var(--po-fg, #f5f5f4); font-size: 11px; font-weight: 700; }
.po-plan-billing { margin-top: 4px; color: var(--po-muted, #989894); font-size: 9px; line-height: 1.3; }

.po-plan-value { text-align: right; }
.po-plan-value > strong { display: block; color: var(--po-lime, #c9f53c); font: 850 22px/1 var(--po-display, "Space Grotesk", system-ui, sans-serif); }
.po-plan-value > span { display: block; margin-top: 4px; color: var(--po-muted, #989894); font-size: 8px; }
.po-plan-value em { display: block; margin-top: 12px; color: var(--po-muted, #989894); font: normal 750 8px/1 var(--po-mono, "JetBrains Mono", monospace); text-transform: uppercase; }
.po-plan-value em b { display: none; color: var(--po-lime, #c9f53c); }
.po-plan-card:has(.po-plan-radio:checked) .po-plan-value em span { display: none; }
.po-plan-card:has(.po-plan-radio:checked) .po-plan-value em b { display: block; }

.po-paywall-benefits {
  margin-top: 18px;
  padding: 12px 13px;
  border: 1px solid var(--po-border, #242426);
  border-radius: 13px;
  background: rgb(21 23 23 / 68%);
}

.po-paywall-benefits__label {
  display: block;
  color: var(--po-muted, #989894);
  font: 700 8px/1.2 var(--po-mono, "JetBrains Mono", monospace);
  letter-spacing: .06em;
}

.po-paywall-benefits__items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.po-paywall-benefits__items span {
  padding: 5px 7px;
  border: 1px solid rgb(201 245 60 / 20%);
  border-radius: 999px;
  color: var(--po-fg, #f5f5f4);
  font-size: 10px;
  line-height: 1.1;
}

.po-screen--s27 .po-cta-bar {
  padding-top: 4px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
}

.po-screen--s27 .po-cta-bar form { width: 100%; }
.po-screen--s27 .po-billing {
  margin: 7px 0 0;
  color: var(--po-muted, #989894);
  font-size: 9px;
  line-height: 1.35;
  text-align: center;
}

.po-screen--s28 {
  isolation: isolate;
  background: var(--po-lime, #c9f53c);
  color: var(--po-lime-fg, #0a0a08);
}

.po-screen--s28::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -28%;
  background: repeating-conic-gradient(from -12deg at 50% 46%, rgb(7 8 8 / 16%) 0 3deg, transparent 3deg 14deg);
  animation: po-offer-spin 32s linear infinite;
}

@keyframes po-offer-spin { to { transform: rotate(360deg); } }

.po-screen--s28 .po-content {
  padding-top: calc(18px + env(safe-area-inset-top));
  color: var(--po-lime-fg, #0a0a08);
}

.po-screen--s28 .po-header { margin-bottom: 0; }
.po-screen--s28 .po-eyebrow {
  display: inline-flex;
  width: max-content;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--po-cut, #2fb9ff);
  color: #04131b;
  letter-spacing: .05em;
}

.po-screen--s28 .po-title {
  max-width: 270px;
  color: var(--po-lime-fg, #0a0a08);
  font-size: 25px;
  line-height: 1.02;
}

.po-screen--s28 .po-copy { max-width: 280px; color: rgb(10 10 8 / 72%); font-size: 10.5px; line-height: 1.32; }

.po-exit-card {
  position: relative;
  width: calc(100% - 11px);
  margin-top: 13px;
  padding: 12px;
  border: 2px solid #080909;
  border-radius: 18px;
  background: #f7f8f2;
  color: #080909;
  box-shadow: 7px 7px 0 #080909;
  line-height: 1.45;
  transform: rotate(-.7deg);
}

.po-welcome-stamp {
  position: absolute;
  z-index: 3;
  top: -12px;
  right: -4px;
  padding: 6px 9px;
  border: 2px solid #080909;
  border-radius: 999px;
  background: var(--po-cut, #2fb9ff);
  font: 900 8px var(--po-mono, "JetBrains Mono", monospace);
  letter-spacing: .06em;
  transform: rotate(5deg);
}

.po-exit-grid { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 11px; align-items: center; }
.po-exit-preview { position: relative; width: 150px; aspect-ratio: 9 / 16; }
.po-exit-preview .po-video-preview {
  width: 150px;
  height: 267px;
  margin: 0;
  overflow: hidden;
  border: 2px solid #080909;
  border-radius: 13px;
  background: #080909;
  transform: none;
}

.po-exit-preview .po-video-preview video { width: 100%; height: 100%; max-height: none; border-radius: 11px; object-fit: contain; }
.po-exit-preview .po-video-preview__placeholder { height: 100%; aspect-ratio: auto; padding: 4px; border: 0; border-radius: 11px; }
.po-exit-preview .po-preview-state { padding: 4px; color: var(--po-fg, #f5f5f4); }
.po-exit-preview .po-preview-state span { display: none; }
.po-exit-price-label { font: 800 8px var(--po-mono, "JetBrains Mono", monospace); text-transform: uppercase; }
.po-exit-amount { display: block; margin-top: 3px; font: 900 52px/.9 var(--po-display, "Space Grotesk", system-ui, sans-serif); }
.po-exit-period { display: block; margin-top: 5px; font: 800 11px/1.15 var(--po-display, "Space Grotesk", system-ui, sans-serif); }
.po-exit-unit { margin-top: 8px; padding-top: 7px; border-top: 1px dashed rgb(7 8 8 / 30%); font: 700 8px var(--po-mono, "JetBrains Mono", monospace); }
.po-exit-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 10px; }
.po-exit-proof span { padding: 7px 5px; border: 1px solid rgb(7 8 8 / 18%); border-radius: 9px; background: rgb(201 245 60 / 32%); font: 700 7px/1.2 var(--po-mono, "JetBrains Mono", monospace); text-align: center; }
.po-screen--s28 .po-billing { margin: 10px 0 0; color: rgb(10 10 8 / 72%); font-size: 9px; line-height: 1.45; text-align: center; }

.po-exit-week {
  width: calc(100% - 11px);
  margin-top: 20px;
  padding: 14px;
  border: 2px solid rgb(7 8 8 / 80%);
  border-radius: 17px;
  background: #f7f8f2;
  color: #080909;
  box-shadow: 5px 5px 0 rgb(7 8 8 / 78%);
}

.po-exit-week > b { display: block; font: 900 15px/1.08 var(--po-display, "Space Grotesk", system-ui, sans-serif); }
.po-exit-week > span { display: block; margin-top: 5px; font-size: 10px; line-height: 1.35; }
.po-exit-week-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 11px; }
.po-exit-week-steps span { padding: 8px 5px; border: 1px solid rgb(7 8 8 / 18%); border-radius: 9px; background: rgb(201 245 60 / 50%); font: 800 7px/1.2 var(--po-mono, "JetBrains Mono", monospace); text-align: center; }

.po-screen--s28 .po-cta-bar {
  padding-top: 10px;
  padding-bottom: calc(13px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, var(--po-lime, #c9f53c) 24%);
}

.po-screen--s28 .po-button--primary { background: #080909; color: var(--po-lime, #c9f53c); }
.po-exit-survey,
.po-exit-decline-form { width: 100%; }
.po-exit-decline {
  display: grid;
  width: 100%;
  min-height: 44px;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #080909;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  visibility: hidden;
  animation: po-reveal-exit-link .2s ease 5s both;
}

.po-exit-survey-dialog {
  width: min(420px, calc(100% - 40px));
  max-width: none;
  max-height: calc(100dvh - 40px);
  margin: auto auto max(20px, env(safe-area-inset-bottom));
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--po-fg, #f5f5f4);
  overflow: hidden;
  overscroll-behavior: contain;
}

.po-exit-survey-dialog::backdrop {
  background: rgb(7 8 8 / 72%);
  backdrop-filter: blur(3px);
}

.po-exit-survey-sheet {
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  padding: 20px;
  border: 1px solid var(--po-border-strong, rgb(255 255 255 / 18%));
  border-radius: 24px 24px 16px 16px;
  background: var(--po-surface, #0f1010);
  box-shadow: 0 -20px 60px rgb(0 0 0 / 34%);
  animation: po-exit-survey-enter 180ms ease-out both;
}

.po-exit-survey-handle {
  display: block;
  width: 42px;
  height: 4px;
  margin: 0 auto 17px;
  border-radius: 999px;
  background: var(--po-border-strong, rgb(255 255 255 / 18%));
}

.po-exit-survey-sheet h2 {
  margin: 0;
  color: var(--po-fg, #f5f5f4);
  font: 800 22px/1.15 var(--po-display, "Space Grotesk", system-ui, sans-serif);
}

.po-exit-survey-options { display: grid; gap: 7px; margin-top: 14px; }

.po-exit-survey-option {
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid var(--po-border-strong, rgb(255 255 255 / 18%));
  border-radius: 13px;
  background: var(--po-surface-2, #171919);
  color: var(--po-fg, #f5f5f4);
  font: 800 12px var(--po-display, "Space Grotesk", system-ui, sans-serif);
  text-align: left;
}

.po-exit-survey-option:hover,
.po-exit-survey-option:focus-visible {
  border-color: var(--po-lime, #c9f53c);
  outline: 0;
}

.po-exit-survey-skip {
  width: 100%;
  min-height: 44px;
  margin-top: 7px;
  padding: 9px;
  border: 0;
  background: transparent;
  color: var(--po-muted, #a6aaa6);
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.po-exit-survey-skip:focus-visible { outline: 2px solid var(--po-lime, #c9f53c); outline-offset: -3px; }

.po-exit-survey.is-submitting button { cursor: wait; opacity: .58; }

@keyframes po-exit-survey-enter {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes po-reveal-exit-link {
  0%, 99% { visibility: hidden; opacity: 0; transform: translateY(4px); }
  100% { visibility: visible; opacity: 1; transform: none; }
}

:is(.po-screen--s27, .po-screen--s28) .po-video-preview figcaption { display: none; }

@media (max-width: 353px) {
  .po-plan-card { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; padding: 11px 10px; }
  .po-plan-value > strong { font-size: 18px; }
  .po-plan-billing { font-size: 8px; }
}

@media (max-height: 700px) {
  .po-screen--s27 .po-content { padding-top: calc(10px + env(safe-area-inset-top)); }
  .po-screen--s27 .po-paywall-stars { margin-top: 8px; }
  .po-screen--s27 .po-header { margin-top: 7px; }
  .po-screen--s27 .po-title { font-size: 23px; }
  .po-paywall-urgency { margin-top: 12px; }
  .po-plan-card { min-height: 100px; padding-block: 10px; }

  .po-screen--s28 .po-content { padding-top: calc(13px + env(safe-area-inset-top)); }
  .po-screen--s28 .po-title { font-size: 21px; }
  .po-screen--s28 .po-copy { font-size: 9.5px; }
  .po-exit-card { margin-top: 9px; padding: 9px; }
  .po-exit-grid { grid-template-columns: 116px minmax(0, 1fr); }
  .po-exit-preview,
  .po-exit-preview .po-video-preview { width: 116px; }
  .po-exit-preview .po-video-preview { height: 206px; }
  .po-exit-proof { margin-top: 7px; }
  .po-exit-week { margin-top: 12px; padding: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .po-screen--s28::before { animation: none; }
  .po-plan-card { transition: none; }
  .po-exit-survey-sheet { animation: none; }
}