/* The plan action has its own space in the viewport. Only the explanation
   scrolls, so Continue is available on entry without covering any content.
   The phone step keeps its existing document scroll and submit button. */
#paywall.active{animation-name:paywall-fade}
@keyframes paywall-fade{from{opacity:0}to{opacity:1}}
#paywall.plan-selection .pw{
  --pw-gutter:22px;
  --pw-top:12px;
  display:flex;flex-direction:column;height:100vh;height:100dvh;padding:0;
}
#paywall.plan-selection .pw-content{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;
  padding:0 var(--pw-gutter) 20px;
  scroll-padding-block:16px;-webkit-overflow-scrolling:touch;
}
/* The single navigation row stays outside the scroller, in its own space. */
#paywall.plan-selection .pw-nav{
  flex:0 0 auto;margin:0;
  padding:calc(var(--pw-top) + env(safe-area-inset-top)) var(--pw-gutter) 12px;
}
#paywall.plan-selection .pw-cta{
  position:static;flex:0 0 auto;margin:0;
  padding:12px var(--pw-gutter) calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--white);
  /* At extreme zoom or in a very short viewport, both regions remain usable. */
  max-height:60%;overflow-y:auto;scroll-padding-block:12px;
}
.pw-plan-commitment{font-size:12.5px;line-height:1.4;font-weight:600;color:var(--primary);text-align:center;margin:0 0 8px}
.pw-plan-disclosure,.pw-plan-next{text-align:center;font-size:12px;line-height:1.4;color:var(--muted);margin:7px 0 0}
.pw-plan-disclosure:empty{display:none}
#paywall.plan-selection :focus-visible{outline:3px solid #b8512f;outline-offset:3px}
@media(min-width:520px){
  #paywall.plan-selection .pw{height:calc(100dvh - 56px)}
}
@media(min-width:760px){
  #paywall.plan-selection.offer-alternative .pw{--pw-gutter:42px;--pw-top:20px}
}
@media(max-width:360px){
  #paywall.plan-selection .pw{--pw-gutter:16px}
}
/* An embedded /start viewport already fits inside the homepage dialog. */
html.tuck-home-embed #paywall.plan-selection .pw{height:100dvh}
html.tuck-home-embed body.paywall-active .app{margin:0;max-width:none}
/* Landscape and browser zoom need the viewport space more than outer margins. */
@media(max-height:400px){
  body.paywall-active .app:has(> #paywall.plan-selection.active){margin-block:0}
  #paywall.plan-selection .pw{height:100dvh}
  #paywall.plan-selection .pw-nav{padding-top:env(safe-area-inset-top);padding-bottom:0}
}