/* Plans: four lanyard passes on the red page, the "Backstage only" prompt that opens when
   something needs a bigger plan, the Paid tags on the newest styles and the plan meters. */

/* ---------- Plans page ---------- */
.plans { padding: 120px 24px 96px; max-width: 1240px; margin: 0 auto; }
.pl-hero { max-width: 760px; }
.pl-title { font: 900 clamp(60px, 9vw, 140px)/.84 var(--poster); letter-spacing: -.045em; color: #fff; margin: 14px 0 22px; }
.pl-title:focus { outline: none; }
.pl-switch { display: inline-flex; gap: 4px; margin-top: 26px; padding: 4px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px #fff; }
.pl-switch button { min-height: 44px; border: 0; border-radius: 999px; padding: 0 20px; background: transparent; color: #fff; font: 700 15px var(--ui); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.pl-switch button[aria-checked="true"] { background: #fff; color: var(--ink); }
.pl-switch i { font-style: normal; font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: var(--lime); color: var(--on-lime); }
.pl-test { margin: 18px 0 0; max-width: 620px; padding: 10px 14px; border-radius: 12px; background: rgba(10, 10, 10, .3); color: #fff; font: 600 14px/1.45 var(--ui); }
.pl-status { color: var(--ink); font: 800 16px var(--ui); min-height: 1.4em; margin-top: 20px; }

.pl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(5, auto) 1fr auto; column-gap: 22px; margin-top: 64px; }
/* Rows line up across the four passes, so they read side by side. */
.pl-grid > .pl-pass { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; }
.pl-pass { position: relative; display: flex; flex-direction: column; padding: 46px 22px 22px; border-radius: 22px; background: #fff; color: var(--ink); transform: rotate(var(--tilt, 0deg)); transition: transform .45s var(--ease), box-shadow .45s var(--ease); box-shadow: 0 30px 50px -28px rgba(70, 6, 0, .75); }
.pl-pass:hover, .pl-pass:focus-within { transform: rotate(0deg) translateY(-6px); box-shadow: 0 40px 60px -26px rgba(70, 6, 0, .85); }
/* The strap the pass hangs from, and the punched slot it goes through. */
.pl-strap { position: absolute; left: 50%; top: -44px; width: 34px; height: 58px; translate: -50% 0; border-radius: 4px 4px 0 0; background: repeating-linear-gradient(90deg, var(--ink) 0 6px, #2a2a2a 6px 8px); }
.pl-hole { position: absolute; left: 50%; top: 16px; width: 58px; height: 12px; translate: -50% 0; border-radius: 999px; background: var(--red); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35); }
.pl-tier { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 10px; min-height: 26px; font: 800 12px var(--ui); letter-spacing: .16em; text-transform: uppercase; color: #5c5c5c; }
.pl-tier span { margin-left: auto; }
.pl-tier i { font-style: normal; padding: 5px 10px; border-radius: 999px; background: var(--ink); color: var(--lime); letter-spacing: .1em; }
.pl-name { margin: 0; font: 900 34px/.92 var(--poster); letter-spacing: -.04em; text-transform: uppercase; }
.pl-pitch { margin: 10px 0 18px; min-height: 2.9em; font: 600 15px/1.4 var(--ui); color: #3d3d3d; }
.pl-price { display: flex; align-items: baseline; gap: 6px; margin: 0; padding-top: 16px; border-top: 2px dashed rgba(10, 10, 10, .2); }
.pl-price b { font: 900 52px/1 var(--poster); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.pl-price small { font: 700 15px var(--ui); color: #4a4a4a; }
.pl-bill { margin: 6px 0 18px; font: 600 13px var(--ui); color: #4a4a4a; }
.pl-perks { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; font: 600 14.5px/1.35 var(--ui); }
.pl-perks li { position: relative; padding-left: 24px; }
.pl-perks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 15px; height: 15px; border-radius: 50%; background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.pl-perks li.big { font-weight: 800; font-size: 15.5px; }
.pl-perks b, .pw-perks b { font: 900 17px var(--poster); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pl-perks li.no { color: #5c5c5c; }
.pl-perks li.no::before { background: none; box-shadow: inset 0 0 0 2px #5c5c5c; }
.pl-pass.pop .pl-perks li.no::before { box-shadow: inset 0 0 0 2px var(--ink); }
.plans .pl-pass.pop :focus-visible { box-shadow: 0 0 0 6px #fff; }
.plans .pl-pass .pl-pick { margin-top: auto; width: 100%; min-height: 48px; }
.plans .pl-pass .btn-ghost { color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.plans .pl-pass .btn-ghost:hover { --c: var(--ink); color: #fff; }
.plans .pl-pass .pl-pick:disabled { cursor: default; transform: none; --c: transparent; color: #4a4a4a; box-shadow: inset 0 0 0 2px #bdbdbd; }
.plans .pl-pass :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--lime); }
/* Headliner: the lime pass. */
.pl-pass.pop { background: var(--lime); }
.pl-pass.pop :is(.pl-pitch, .pl-bill, .pl-price small, .pl-tier) { color: var(--on-lime); }
.pl-pass.pop .pl-perks li.no { color: var(--on-lime); }
.pl-pass.pop .pl-price { border-color: rgba(10, 10, 10, .35); }
.plans .pl-pass.pop .btn-red { --c: var(--ink); color: var(--lime); box-shadow: 4px 4px 0 var(--red); }
.plans .pl-pass.pop .btn-red:hover { box-shadow: 6px 6px 0 var(--red); }
.pl-pass.mine::after { content: "Your plan"; position: absolute; right: 16px; top: -14px; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--lime); font: 800 12px var(--ui); letter-spacing: .08em; text-transform: uppercase; rotate: 4deg; }

.pl-fine { margin-top: 96px; max-width: 900px; color: #fff; }
.pl-fine h2 { font: 900 clamp(32px, 4vw, 52px)/.95 var(--poster); letter-spacing: -.04em; margin: 0 0 22px; }
.pl-fine dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; margin: 0; padding: 8px 24px; border-radius: 22px; background: rgba(10, 10, 10, .28); }
.pl-fine dl div { padding: 16px 0; border-top: 1.5px solid rgba(255, 255, 255, .3); }
.pl-fine dl div:nth-child(-n+2) { border-top: 0; }
.pl-fine dt { font: 800 17px var(--ui); margin-bottom: 6px; }
.pl-fine dd { margin: 0; font: 600 15.5px/1.5 var(--ui); }

@media (max-width: 1080px) { .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; row-gap: 70px; } .pl-grid > .pl-pass { display: flex; grid-row: auto; } }
@media (max-width: 640px) {
  .plans { padding: 104px 16px 72px; }
  .pl-grid { grid-template-columns: 1fr; row-gap: 64px; }
  .pl-fine dl { grid-template-columns: 1fr; }
  .pl-switch button { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) { .pl-pass { transform: none; transition: none; } .pl-pass:hover, .pl-pass:focus-within { transform: none; } }

/* ---------- Backstage only: the upgrade prompt ---------- */
.paywall { position: fixed; inset: 0; z-index: 140; display: grid; place-items: safe center; padding: 24px 16px; overflow-y: auto; background: rgba(5, 5, 5, .82); backdrop-filter: blur(14px); animation: pw-in .3s var(--ease) both; }
.paywall[hidden] { display: none; }
body.pw-open { overflow: hidden; }
.pw-box { position: relative; width: min(460px, 100%); padding: 40px 28px 26px; border-radius: 26px; background: var(--red); color: #fff; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9); animation: pw-drop .5s var(--ease) both; font-family: var(--ui); }
.pw-close { position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(10, 10, 10, .25); color: #fff; font-size: 16px; cursor: pointer; }
.pw-close:hover { background: rgba(10, 10, 10, .45); }
.pw-kicker { position: absolute; left: -10px; top: -16px; margin: 0; rotate: -4deg; }
.pw-kicker span { display: inline-block; padding: 8px 16px; background: var(--lime); color: var(--on-lime); font: 900 14px var(--poster); letter-spacing: .02em; text-transform: uppercase; box-shadow: 3px 3px 0 var(--ink); }
.pw-title { margin: 6px 0 10px; font: 900 clamp(38px, 8vw, 54px)/.9 var(--poster); letter-spacing: -.045em; text-transform: uppercase; }
.pw-title:focus, .pw-title:focus-visible { outline: none; box-shadow: none; }
.pw-why { margin: 0 0 20px; font: 700 19px/1.4 var(--ui); }
.pw-card { position: relative; padding: 30px 20px 18px; border-radius: 18px; background: #fff; color: var(--ink); }
.pw-card[hidden] { display: none; }
.pw-hole { position: absolute; left: 50%; top: 11px; width: 46px; height: 9px; translate: -50% 0; border-radius: 999px; background: var(--red); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35); }
.pw-plan { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.pw-plan span { font: 900 26px/1 var(--poster); letter-spacing: -.04em; text-transform: uppercase; }
.pw-plan b { font: 900 28px/1 var(--poster); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pw-plan small { font: 700 13px var(--ui); color: #4a4a4a; margin-left: 2px; }
.pw-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font: 600 14.5px/1.35 var(--ui); }
.pw-perks li { padding-left: 22px; position: relative; }
.pw-perks li::before { content: ""; position: absolute; left: 0; top: .25em; width: 13px; height: 13px; border-radius: 50%; background: var(--red); }
.pw-msg { min-height: 1.3em; margin: 12px 0 0; font: 800 14px var(--ui); color: var(--ink); }
.pw-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.pw-go { width: 100%; margin-top: 16px; }
.paywall .btn { font: 700 15px var(--ui); min-height: 48px; }
.paywall .btn-red { --c: var(--lime); color: var(--on-lime); box-shadow: 0 0 0 1.5px var(--on-lime), 4px 4px 0 var(--on-lime); }
.paywall .btn-red::after { display: none; }
.paywall .btn-red:hover { filter: none; transform: translate(-2px, -2px); box-shadow: 0 0 0 1.5px var(--on-lime), 6px 6px 0 var(--on-lime); }
.paywall .btn-ghost { --c: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.paywall .btn-ghost:hover { --c: #fff; color: var(--ink); }
.pw-later { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--ink); font: 800 15px var(--ui); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.pw-later:last-child { margin-left: auto; }
.paywall :focus-visible:not(.pw-title) { outline: 3px solid var(--on-lime); outline-offset: 3px; box-shadow: 0 0 0 6px var(--lime); }
@keyframes pw-in { from { opacity: 0; } }
@keyframes pw-drop { from { opacity: 0; transform: translateY(-40px) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .paywall, .pw-box { animation: none; } }
@media (max-height: 700px) { .pw-box { padding-top: 32px; } .pw-title { font-size: 34px; } }

/* ---------- Paid tags on the newest styles (free plan only) ---------- */
.paid-tag { display: none; }
body.on-free [data-pro] { position: relative; }
body.on-free [data-pro] .paid-tag { display: inline-block; position: absolute; top: 6px; right: 6px; padding: 4px 8px; border-radius: 999px; background: var(--lime); color: var(--on-lime); font: 800 11px var(--ui); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
body.on-free .r2-vlook[data-pro] .paid-tag { position: static; margin-left: 6px; vertical-align: 1px; }

/* ---------- Plan meters in Settings ---------- */
.set-plan-note { margin: -6px 0 14px; line-height: 1.5; }
.set-meters { display: grid; gap: 14px; }
.set-meter { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font: 700 14px var(--ui); }
.set-meter b { font-variant-numeric: tabular-nums; }
.set-meter i { grid-column: 1 / -1; display: block; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.set-meter s { display: block; height: 100%; border-radius: inherit; background: var(--red); }
.set-meter.hot s { background: var(--lime); }
.set-meter.hot b { color: var(--lime); }

/* ---------- Under the Studio export button ---------- */
.export-plan { margin: 10px 0 0; font: 600 13px/1.4 var(--ui); color: var(--muted); }
.export-plan b { color: var(--lime); font-variant-numeric: tabular-nums; }
.export-plan a { color: #fff; text-decoration-color: var(--lime); text-underline-offset: 3px; }

/* ---------- Plan changed ---------- */
.plan-toast { position: fixed; left: 50%; bottom: 24px; z-index: 150; translate: -50% 0; max-width: calc(100% - 32px); margin: 0; padding: 12px 18px; border-radius: 999px; background: var(--lime); color: var(--on-lime); font: 800 14.5px var(--ui); box-shadow: 4px 4px 0 var(--ink); animation: pw-in .3s var(--ease) both; }
.plan-toast[hidden] { display: none; }

/* ---------- Credits ---------- */
.pw-credits { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: rgba(10, 10, 10, .28); }
.pw-credits[hidden] { display: none; }
.pw-credits p { margin: 0; flex: 1 1 200px; font: 600 14.5px/1.45 var(--ui); }
.pw-credits b { color: var(--lime); font-variant-numeric: tabular-nums; }
.pw-credits .btn { min-height: 44px; }

.pl-credits { margin-top: 96px; color: #fff; }
.pl-credits-head { max-width: 720px; }
.pl-credits h2 { font: 900 clamp(40px, 6vw, 84px)/.88 var(--poster); letter-spacing: -.045em; margin: 0 0 14px; }
.pl-credits-head p { margin: 0; font: 700 19px/1.45 var(--ui); }
.pl-balance { margin-top: 14px !important; display: inline-block; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: #fff; }
.pl-balance b { color: var(--lime); font-variant-numeric: tabular-nums; }
.pl-credit-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px; margin-top: 34px; align-items: start; }
.pl-credits h3 { font: 900 13px var(--ui); letter-spacing: .16em; text-transform: uppercase; margin: 0 0 12px; color: var(--ink); }
.pl-costs { margin: 0; padding: 4px 18px; border-radius: 18px; background: rgba(10, 10, 10, .28); }
.pl-costs div { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1.5px solid rgba(255, 255, 255, .3); font: 700 16px var(--ui); }
.pl-costs div:first-child { border-top: 0; }
.pl-costs dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pl-pack { position: relative; display: grid; justify-items: start; gap: 2px; min-height: 140px; padding: 16px 14px; border: 0; border-radius: 18px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; font-family: var(--ui); box-shadow: 4px 4px 0 var(--ink); transition: transform .2s var(--ease), box-shadow .2s; }
.pl-pack:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.pl-pack:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.pl-pack:disabled { opacity: .6; cursor: progress; }
.pl-pack b { font: 900 34px/1 var(--poster); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.pl-pack span { font: 700 13px var(--ui); color: #4a4a4a; }
.pl-pack em { margin-top: auto; font: 900 20px var(--poster); font-style: normal; }
.pl-pack i { font: 800 12px/1.25 var(--ui); font-style: normal; padding: 4px 8px; border-radius: 999px; background: var(--lime); color: var(--on-lime); margin-top: 6px; }
.pl-pack:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--lime); }
@media (max-width: 900px) { .pl-credit-cols { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .pl-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.set-credits { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); display: grid; gap: 12px; }
.set-credits p { margin: 0; display: flex; align-items: baseline; gap: 10px; font: 700 14px var(--ui); }
.set-credits p b { font: 900 26px/1 var(--poster); color: var(--lime); font-variant-numeric: tabular-nums; }
.set-credits p a { margin-left: auto; }
.set-auto { justify-content: space-between; width: 100%; font-size: 14px; min-height: 44px; }
.set-auto .set-auto-t { width: auto; height: auto; background: none; box-shadow: none; border-radius: 0; }

.set-credits a, .set-plan .set-card-head .linkish { min-height: 44px; display: inline-flex; align-items: center; }