/* Mobile web uses the native paywall's comparison, artwork and purchase cards.
   Light-mode plan selection is shared with desktop at the end of this sheet. */
html[data-mweb] .mpw-design {
  --mpw-page: #121118; --mpw-premium-fill: #141319; --mpw-card: #22212A;
  --mpw-text: #F2F0EC; --mpw-muted: #888899; --mpw-hair: rgba(255,255,255,.07);
  --mpw-border: rgba(255,255,255,.09); --mpw-accent: #FFB94A; --mpw-close: rgba(255,255,255,.07);
  --mpw-selected: rgba(245,158,11,.06); --mpw-cta: #F2F0EC; --mpw-cta-text: #1A1206;
  --mpw-row: 52px; --mpw-head: 40px; --mpw-top-ext: 14px; --mpw-bottom-ext: 12px;
  --mpw-hero-top: 44px; --mpw-emblem: 76px; --mpw-emblem-gap: 16px;
  --mpw-headline: 29px; --mpw-headline-line: 38px; --mpw-table-top: 48px; --mpw-table-bottom: 24px;
  --mpw-plan-padding: 16px; --mpw-plan-gap: 24px;
  background: var(--mpw-page); color: var(--mpw-text);
  font-family: Nunito, -apple-system, BlinkMacSystemFont, sans-serif;
}
html[data-theme="light"][data-mweb] .mpw-design {
  --mpw-page: #FFFFFF; --mpw-premium-fill: #F7F7F7; --mpw-card: #FFFFFF;
  --mpw-text: #4B4B4B; --mpw-muted: #777777; --mpw-hair: #E5E5E5; --mpw-border: #E5E5E5;
  --mpw-accent: #B45309; --mpw-close: #F7F7F7; --mpw-selected: #FFF8EC;
  --mpw-cta: #F59E0B; --mpw-cta-text: #1A1304;
}
html[data-mweb] .mpw-design::before {
  inset: 0 0 auto; height: 380px;
  background: radial-gradient(ellipse 78% 62% at 50% 0%,rgba(245,166,35,.13),transparent);
}
html[data-theme="light"][data-mweb] .mpw-design.paywall-overlay { background: var(--mpw-page) !important; }
html[data-theme="light"][data-mweb] .mpw-design.paywall-overlay::before {
  background: radial-gradient(ellipse 78% 62% at 50% 0%,rgba(245,166,35,.13),transparent) !important;
}
html[data-mweb] .mpw-design :is(.paywall-modal,.lrn-pw-modal) {
  height: 100dvh; min-height: 0; max-height: 100%; padding: 0; border-radius: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
html[data-mweb] .mpw-design :is(.paywall-close,.lrn-pw-close) {
  top: max(14px,env(safe-area-inset-top,0px)); right: 20px; width: 30px; height: 30px;
  border: 1px solid var(--mpw-border); border-radius: 50%; background: var(--mpw-close); color: var(--mpw-muted);
}
html[data-mweb] .mpw-design :is(.paywall-scroll-content,.lrn-pw-scroll-content) {
  display: block; flex: 1 1 auto; min-height: 0; padding: 0 22px; width: 100%; overflow-y: auto;
}
html[data-mweb] .mpw-design .mpw-main {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  min-height: 100%; box-sizing: border-box; padding: max(var(--mpw-hero-top),env(safe-area-inset-top,0px)) 0 var(--mpw-table-bottom);
}
html[data-mweb] .mpw-design :is(.pw-emblem,.lrn-pw-emblem) {
  width: var(--mpw-emblem); height: var(--mpw-emblem); margin: 0 0 var(--mpw-emblem-gap);
  flex: 0 0 auto; position: relative; animation: mpw-float 3.2s ease-in-out infinite;
  background: none; box-shadow: none; filter: none;
}
html[data-mweb] .mpw-design :is(.pw-emblem,.lrn-pw-emblem)::after { content: none; }
html[data-mweb] .mpw-design .mpw-emblem-art { display: block; width: 100%; height: 100%; overflow: visible; }
html[data-mweb] .mpw-design .mpw-emblem-sheen { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; pointer-events: none; }
html[data-mweb] .mpw-design .mpw-emblem-sheen::after {
  content: ''; position: absolute; inset: -15% auto -15% -40%; width: 22%; opacity: 0;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  transform: rotate(20deg); animation: mpw-sheen 4.1s ease-in-out infinite;
}
html[data-mweb] .mpw-design :is(.pw-hero,.mpw-main > div:not(.mpw-table):has(.lrn-pw-headline)) { width: 100%; }
html[data-mweb] .mpw-design :is(.pw-headline,.lrn-pw-headline) {
  margin: 0; max-width: none; width: 100%; color: var(--mpw-text); font-family: inherit;
  font-size: var(--mpw-headline); line-height: var(--mpw-headline-line); font-weight: 800;
  letter-spacing: -.3px; text-align: center; font-style: normal;
}
html[data-mweb] .mpw-design .mpw-emphasis { color: var(--mpw-accent); }
html[data-mweb] .mpw-design :is(.pw-sub,.lrn-pw-sub) { display: none; }
html[data-mweb] .mpw-design .mpw-table {
  position: relative; display: block; flex: 0 0 auto; width: 100%; max-width: none;
  margin: var(--mpw-table-top) 0 0; padding: 0; gap: 0; isolation: isolate;
}
html[data-mweb] .mpw-design .mpw-table table {
  position: relative; width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed;
  font-family: inherit; color: var(--mpw-text); text-align: left;
}
html[data-mweb] .mpw-design .mpw-free-col { width: 56px; }
html[data-mweb] .mpw-design .mpw-premium-col { width: 92px; }
html[data-mweb] .mpw-design .mpw-premium-panel {
  position: absolute; z-index: -1; right: 0; top: calc(-1 * var(--mpw-top-ext)); bottom: calc(-1 * var(--mpw-bottom-ext)); width: 92px;
  border: 1.6px solid transparent; border-radius: 18px;
  background: linear-gradient(var(--mpw-premium-fill),var(--mpw-premium-fill)) padding-box,linear-gradient(#FFD089,#F59E0B 50%,#B45309) border-box;
  box-shadow: 0 6px 18px rgba(245,158,11,.22); pointer-events: none;
}
html[data-mweb] .mpw-design .mpw-table :is(th,td) { box-sizing: border-box; border: 0; padding: 0; vertical-align: middle; }
html[data-mweb] .mpw-design .mpw-table thead th { height: var(--mpw-head); }
html[data-mweb] .mpw-design .mpw-benefit-head { text-align: left; font-size: 15px; font-weight: 600; }
html[data-mweb] .mpw-design .mpw-free-head { text-align: center; color: var(--mpw-muted); font-size: 12px; font-weight: 700; letter-spacing: .3px; }
html[data-mweb] .mpw-design .mpw-premium-head { text-align: center; color: var(--mpw-accent); font-size: 12.5px; font-weight: 800; letter-spacing: .3px; }
html[data-mweb] .mpw-design .mpw-table tbody :is(th,td) { height: var(--mpw-row); }
html[data-mweb] .mpw-design .mpw-table tbody th { text-align: left; padding-right: 8px; font-size: 13.5px; line-height: 18px; font-weight: 400; }
html[data-mweb] .mpw-design .mpw-table tbody tr:not(:last-child) > :is(th,.mpw-free-cell) { border-bottom: 1px solid var(--mpw-hair); }
html[data-mweb] .mpw-design :is(.mpw-free-cell,.mpw-premium-cell) { position: relative; text-align: center; }
html[data-mweb] .mpw-design .mpw-table tbody tr:not(:last-child) > .mpw-premium-cell::after {
  content: ''; position: absolute; bottom: 0; left: 10px; right: 10px; height: 1px; background: var(--mpw-hair);
}
html[data-mweb] .mpw-design .mpw-check { display: inline-block; vertical-align: middle; }
html[data-mweb] .mpw-design .mpw-check-free { color: var(--mpw-accent); }
html[data-mweb] .mpw-design .mpw-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
html[data-mweb] .mpw-design :is(.paywall-purchase-footer,.lrn-pw-purchase-footer) {
  display: block; flex: 0 0 auto; width: 100%; padding: 10px 22px max(10px,env(safe-area-inset-bottom,0px)); box-sizing: border-box;
}
html[data-mweb] .mpw-design :is(.paywall-plans,.lrn-pw-plans) {
  display: flex; flex-direction: row; align-items: stretch; gap: 12px; width: 100%; max-width: none;
  margin: 0 auto var(--mpw-plan-gap);
}
html[data-mweb] .mpw-design :is(.paywall-plan,.lrn-pw-plan) {
  flex: 1 1 0; min-width: 0; padding: var(--mpw-plan-padding) 12px; border: 1.5px solid var(--mpw-border);
  border-radius: 16px; background: var(--mpw-card); box-shadow: none; color: var(--mpw-text); font: inherit;
}
html[data-mweb] .mpw-design :is(.paywall-plan,.lrn-pw-plan).selected {
  border: 2px solid #F59E0B; background: var(--mpw-selected); box-shadow: 0 4px 16px rgba(245,158,11,.20);
}
html[data-mweb] .mpw-design :is(.pw-plan-label,.lrn-pw-plan-label) { margin: 0 0 7px; color: var(--mpw-muted); font-size: 12.5px; line-height: 17px; font-weight: 700; }
html[data-mweb] .mpw-design :is(.paywall-plan,.lrn-pw-plan).selected :is(.pw-plan-label,.lrn-pw-plan-label) { color: var(--mpw-accent) !important; }
html[data-mweb] .mpw-design :is(.pw-plan-price,.lrn-pw-price) { color: var(--mpw-text); font-size: 25px; font-weight: 800; line-height: 32px; letter-spacing: -.4px; }
html[data-mweb] .mpw-design :is(.pw-plan-period,.lrn-pw-period) { margin: 3px 0 0; color: var(--mpw-muted); font-size: 11px; line-height: 15px; }
html[data-mweb] .mpw-design .mpw-annual-equivalent { margin-top: 4px; color: var(--mpw-text); font-size: 13.5px; line-height: 18px; font-weight: 600; }
html[data-mweb] .mpw-design :is(.pw-pop-tag,.lrn-pw-pop,.pw-save-badge,.lrn-pw-save) {
  left: 50%; transform: translateX(-50%); padding: 3.5px 11px; border-radius: 100px;
  background: #F59E0B; color: #1c1206; font-size: 8.5px; line-height: 11px; font-weight: 800; letter-spacing: .4px; box-shadow: none;
}
html[data-mweb] .mpw-design :is(.pw-pop-tag,.lrn-pw-pop) { top: -9px; }
html[data-mweb] .mpw-design :is(.pw-save-badge,.lrn-pw-save) { bottom: -9px; padding: 3px 10px; letter-spacing: .3px; }
html[data-mweb] .mpw-design :is(#paywallCta,.lrn-pw-cta) {
  width: 100%; max-width: none; min-height: 58px; margin: 0; padding: 14px 16px;
  border: 0 !important; border-bottom: 4px solid rgba(0,0,0,.18) !important; border-radius: 100px !important;
  background: var(--mpw-cta) !important; color: var(--mpw-cta-text) !important; -webkit-text-fill-color: var(--mpw-cta-text) !important;
  font-family: inherit; font-size: 16px; line-height: 22px; font-weight: 800 !important; letter-spacing: -.2px;
  box-shadow: 0 6px 18px rgba(245,158,11,.18); transform: none;
}
html[data-mweb] .mpw-design .mpw-legal { padding: 16px 0 24px; }
html[data-mweb] .mpw-design :is(.paywall-trial,.lrn-pw-trial) { font-size: 11px; line-height: 16px; margin: 0 auto 20px; color: var(--mpw-muted); }
html[data-mweb] .mpw-design :is(.pw-footer,.lrn-pw-footer) { margin: 4px 0 0; }
html[data-mweb] .mpw-design :is(.pw-footer a,.lrn-pw-footer a,.lrn-pw-manage) { font-size: 13px; color: var(--mpw-muted); }
@media (max-height: 885px) {
  html[data-mweb] .mpw-design[data-mpw-rows="6"] {
    --mpw-row: 44px; --mpw-head: 36px; --mpw-hero-top: 22px; --mpw-emblem: 64px; --mpw-emblem-gap: 12px;
    --mpw-headline: 27px; --mpw-headline-line: 34px; --mpw-table-top: 32px; --mpw-table-bottom: 20px; --mpw-plan-padding: 13px;
  }
}
@media (max-height: 830px) {
  html[data-mweb] .mpw-design {
    --mpw-row: 44px; --mpw-head: 36px; --mpw-hero-top: 22px; --mpw-emblem: 64px; --mpw-emblem-gap: 12px;
    --mpw-headline: 27px; --mpw-headline-line: 34px; --mpw-table-top: 32px; --mpw-table-bottom: 20px; --mpw-plan-padding: 13px;
  }
}
@media (max-height: 755px) {
  html[data-mweb] .mpw-design[data-mpw-rows="6"] {
    --mpw-row: 38px; --mpw-head: 32px; --mpw-top-ext: 10px; --mpw-bottom-ext: 8px;
    --mpw-hero-top: 20px; --mpw-emblem: 48px; --mpw-emblem-gap: 8px;
    --mpw-headline: 25px; --mpw-headline-line: 29px; --mpw-table-top: 20px; --mpw-table-bottom: 16px; --mpw-plan-padding: 10px; --mpw-plan-gap: 22px;
  }
}
@media (max-height: 710px) {
  html[data-mweb] .mpw-design {
    --mpw-row: 38px; --mpw-head: 32px; --mpw-top-ext: 10px; --mpw-bottom-ext: 8px;
    --mpw-hero-top: 20px; --mpw-emblem: 48px; --mpw-emblem-gap: 8px;
    --mpw-headline: 25px; --mpw-headline-line: 29px; --mpw-table-top: 20px; --mpw-table-bottom: 16px; --mpw-plan-padding: 10px; --mpw-plan-gap: 22px;
  }
}
@media (max-height: 620px) {
  html[data-mweb] .mpw-design, html[data-mweb] .mpw-design[data-mpw-rows="6"] {
    --mpw-row: 36px; --mpw-head: 28px; --mpw-hero-top: 20px; --mpw-emblem: 32px; --mpw-emblem-gap: 6px;
    --mpw-headline: 22px; --mpw-headline-line: 26px; --mpw-table-top: 18px; --mpw-table-bottom: 12px; --mpw-plan-padding: 8px; --mpw-plan-gap: 22px;
  }
}
@keyframes mpw-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes mpw-sheen { 0%,32%,100% { opacity: 0; transform: translateX(0) rotate(20deg); } 6%,26% { opacity: .5; } 32% { transform: translateX(640%) rotate(20deg); } }
@media (prefers-reduced-motion: reduce) {
  html[data-mweb] .mpw-design :is(.pw-emblem,.lrn-pw-emblem), html[data-mweb] .mpw-design .mpw-emblem-sheen::after { animation: none; }
}

/* Keep a plan's selection distinct from its promotional badges in every light paywall. */
html[data-theme="light"] :is(.paywall-overlay,.lrn-pw-overlay) :is(.paywall-plan,.lrn-pw-plan) {
  border-width: 2px; border-style: solid;
  border-color: #E5E5E5 !important; background: #FFFFFF !important;
}
html[data-theme="light"] :is(.paywall-overlay,.lrn-pw-overlay) :is(.paywall-plan,.lrn-pw-plan).selected {
  border-color: #B45309 !important; background: #FFF1D6 !important;
  box-shadow: 0 0 0 1px #B45309, 0 6px 18px rgba(180,83,9,.12);
}
html[data-theme="light"] :is(.paywall-overlay,.lrn-pw-overlay) :is(.paywall-plan,.lrn-pw-plan).selected :is(.pw-plan-label,.lrn-pw-plan-label) {
  color: #92400E !important;
}
html[data-theme="light"] :is(.paywall-overlay,.lrn-pw-overlay) :is(.paywall-plan,.lrn-pw-plan)::before {
  content: ''; position: absolute; top: 12px; right: 12px;
  width: 18px; height: 18px; box-sizing: border-box;
  border: 2px solid #8B8172; border-radius: 50%; background: #FFFFFF;
  pointer-events: none;
}
html[data-theme="light"] :is(.paywall-overlay,.lrn-pw-overlay) :is(.paywall-plan,.lrn-pw-plan).selected::before {
  border-color: #B45309; background: #B45309;
}
html[data-theme="light"] :is(.paywall-overlay,.lrn-pw-overlay) :is(.paywall-plan,.lrn-pw-plan).selected::after {
  content: ''; position: absolute; top: 16px; right: 18px;
  width: 5px; height: 9px; box-sizing: border-box;
  border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: rotate(45deg);
  pointer-events: none;
}
