/* Heat Check v13 polish: back navigation, the We're-all-in screen, the HOT heading,
   the hold ring and the Pick-your-poison label. Loaded last.
   Palette only: flirty accent #ff2e63, hot accent #ff7a3c, their tints, and the
   white-hot highlight #fff4e0 already used by the burn. Idle loops are transform or
   opacity only, pause offscreen / while scrolling, and stop for low-end + reduced motion. */
:root { --fl: #ff2e63; --fl-tint: #ffb3c6; --fl-deep: #d61f6e; --ht: #ff7a3c; --wh: #fff4e0; }

/* ---------- 1. Shared back control ---------- */
.view-top { display: flex; align-items: center; gap: 4px; min-height: 44px; margin: 0 0 12px calc(-10px + env(safe-area-inset-left)); }
#app > .view-top { margin: 0; padding: 8px 18px 0 calc(8px + env(safe-area-inset-left)); }
.nav-back { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 50%; border: 0; background: transparent; color: var(--fg);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-xs) var(--ease-out), background-color var(--dur-s) var(--ease-out); }
.nav-back svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nav-back:active { transform: scale(.9); background-color: #ffffff14; }
.nav-back:focus-visible { outline: 2px solid var(--fl); outline-offset: 2px; }
.setup .view-top h1 { margin: 0; }

/* Forward slides in from the right; back plays it in reverse */
html.vt-fwd::view-transition-old(root) { animation: vtOutL var(--dur-s) var(--ease-in) both; }
html.vt-fwd::view-transition-new(root) { animation: vtInR var(--dur-m) var(--ease-out) both; }
html.vt-back::view-transition-old(root) { animation: vtOutR var(--dur-s) var(--ease-in) both; }
html.vt-back::view-transition-new(root) { animation: vtInL var(--dur-m) var(--ease-out) both; }
@keyframes vtInR { from { opacity: 0; transform: translateX(28px); } }
@keyframes vtInL { from { opacity: 0; transform: translateX(-28px); } }
@keyframes vtOutL { to { opacity: 0; transform: translateX(-18px); } }
@keyframes vtOutR { to { opacity: 0; transform: translateX(18px); } }
#app.fx-back > :not(.modal-wrap):not(.controls):not(#amb) { animation: fxBack var(--dur-m) var(--ease-out) both; }
@keyframes fxBack { from { opacity: 0; transform: translateX(-18px); } }

/* ---------- 2. We're all in: one screen, no scroll ---------- */
.screen.allin { min-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding: 8px 22px 20px; overflow: hidden; }
.allin-body { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 14px; text-align: center; padding-bottom: 8vh; }
#app .allin-h { font-size: clamp(38px, 11vw, 50px); }
.allin-sub { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.4; }
.allin-names { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-height: 70px; overflow: hidden; margin: 2px 0 4px; }
.allin-names .chip { padding: 4px 11px; font-size: 13px; }
.allin-fine { margin: 0; font-size: 12px; color: var(--muted); opacity: .6; }

/* ---------- 3. "How HOT is tonight?" ---------- */
#app .hero-title { display: flex; flex-direction: column; align-items: center; gap: 0; margin: 0; line-height: 1; font-style: normal; letter-spacing: 0; }
.ht-l1 { display: flex; align-items: center; gap: .2em; }
/* Same face as the ring's level word (Flirty): heavy italic, tight */
#app .hero-title .ht-soft { font-size: clamp(28px, 8.4vw, 38px); font-weight: 900; font-style: italic; letter-spacing: -.03em; color: var(--fg); }
.ht-l2 { margin-top: -2px; }
.ht-q { display: inline-block; margin-left: .05em; color: var(--fl); font-weight: 900; transform: rotate(8deg); transform-origin: 50% 80%; }
.ht-hot { position: relative; display: inline-block; isolation: isolate; }
.ht-svg { display: block; height: clamp(64px, 19vw, 84px); width: auto; aspect-ratio: 260 / 124; overflow: visible; }
.ht-t { font-size: 104px; font-weight: 900; font-style: italic; }
/* Per-level gradients: Flirty underneath, Spicy / HOT fade in over it (opacity only) */
.ht-flow rect { opacity: 0; transition: opacity .4s var(--ease-out); }
.ht-flow .l1, .hc-hero[data-heat="2"] .ht-flow .l2, .hc-hero[data-heat="3"] .ht-flow .l3 { opacity: 1; }
.ht-flow { animation: htFlow 8s linear infinite; }
@keyframes htFlow { to { transform: translateX(-260px); } }
/* Glow strength follows the level */
.ht-glow { position: absolute; inset: -28% -22%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, #ff7a3c5c, #ff2e6324 55%, transparent 74%); opacity: .3; transition: opacity .4s var(--ease-out); }
.hc-hero[data-heat="2"] .ht-glow { opacity: .62; }
.hc-hero[data-heat="3"] .ht-glow { opacity: 1; }
/* The wave under HOT draws in once */
.ht-wave { stroke-dasharray: 100; stroke-dashoffset: 100; animation: drawIn .6s var(--ease-out) .2s forwards; }
.hero-title.drawn .ht-wave { animation: none; stroke-dashoffset: 0; }
@keyframes drawIn { to { stroke-dashoffset: 0; } }

/* ---------- 4. Hold ring ---------- */
.hold-btn::after { display: none; }              /* replaced by .ring-glow */
.ring-base { opacity: 0; }                        /* the gradient ring shows the level now */
.ring-svg .ring-fill { stroke-width: 8; }
.ring-spark { opacity: 0; transition: opacity .15s linear; }
.ring-spark.on { opacity: 1; }
.ring-rot { position: absolute; inset: -9px; border-radius: 50%; pointer-events: none; animation: ringSpin 7s linear infinite; will-change: transform; }
.ring-rot i, .ring-glow i { position: absolute; inset: 0; border-radius: 50%; opacity: 0; transition: opacity .4s var(--ease-out); }
.ring-rot i { -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5.5px)); }
.ring-rot .l1 { background: conic-gradient(var(--fl), var(--fl-deep) 35%, var(--fl-tint) 62%, var(--fl)); }
.ring-rot .l2 { background: conic-gradient(var(--fl), var(--ht) 50%, var(--fl)); }
.ring-rot .l3 { background: conic-gradient(var(--ht), var(--wh) 50%, var(--ht)); }
.ring-glow { position: absolute; inset: -36px; z-index: -1; border-radius: 50%; pointer-events: none; animation: ringBreath 3s ease-in-out infinite alternate; }
.ring-glow .l1 { background: radial-gradient(closest-side, #ff2e6352, #d61f6e1f 60%, transparent 72%); }
.ring-glow .l2 { background: radial-gradient(closest-side, #ff7a3c4d, #ff2e631f 60%, transparent 72%); }
.ring-glow .l3 { background: radial-gradient(closest-side, #ff7a3c66, #fff4e01f 58%, transparent 72%); }
/* Palette: the committed level at rest, the level being reached while holding */
.ring-rot .l1, .ring-glow .l1,
.hc-hero:not(.holding)[data-heat="2"] .ring-rot .l2, .hc-hero:not(.holding)[data-heat="2"] .ring-glow .l2,
.hc-hero:not(.holding)[data-heat="3"] .ring-rot .l3, .hc-hero:not(.holding)[data-heat="3"] .ring-glow .l3,
.hc-hero.holding[data-level="2"] .ring-rot .l2, .hc-hero.holding[data-level="2"] .ring-glow .l2,
.hc-hero.holding[data-level="3"] .ring-rot .l3, .hc-hero.holding[data-level="3"] .ring-glow .l3 { opacity: 1; }
.hc-hero.holding .ring-glow { animation: none; opacity: 1; }
@keyframes ringSpin { to { transform: rotate(360deg); } }
@keyframes ringBreath { from { opacity: .5; } to { opacity: 1; } }
/* Locked level: dim ring, small lock */
.ring-lock { position: absolute; top: -12px; right: 10px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; z-index: 2;
  background: var(--card); border: 1px solid var(--line); color: var(--fg); opacity: 0; transform: scale(.6); pointer-events: none;
  transition: opacity var(--dur-s) var(--ease-out), transform var(--dur-s) var(--spring); }
.ring-lock .ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hc-hero.locked .ring-lock { opacity: 1; transform: none; }
.hc-hero.locked .ring-rot { opacity: .35; transition: opacity var(--dur-s) var(--ease-out); }
.hc-hero.locked .ring-glow { animation: none; opacity: .25; }

/* ---------- 5. "Pick your poison": a stamp, not a gradient ---------- */
.pick-sec { position: relative; margin: 20px 18px 0; padding: 22px 0 0; border-top: 1px solid #ffffff17; display: flex; flex-direction: column; align-items: center; text-align: center; scroll-margin-top: 12px; }
#app .pick-title { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; font-style: normal; letter-spacing: 0; line-height: 1; }
#app .pick-title .pk-small { font-size: clamp(20px, 6vw, 24px); font-weight: 900; font-style: italic; letter-spacing: -.03em; color: var(--muted); }
#app .pick-title .pk-big { position: relative; display: inline-block; padding: 0 2px 13px; font-size: clamp(42px, 12.5vw, 54px); font-weight: 900; font-style: normal; letter-spacing: .02em; line-height: .9; color: var(--fl); transform: rotate(-2deg); }
.pk-line { position: absolute; left: 0; bottom: 0; width: 100%; height: 9px; overflow: visible; }
.pk-word { background: linear-gradient(105deg, #ffb3c6 0%, #ff2e63 30%, #d61f6e 58%, #ff7a3c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding: 0 .04em; }
.pk-line path { fill: none; stroke: url(#pkg); stroke-width: 8; stroke-dasharray: 100; stroke-dashoffset: 100; }
.pick-sec.go .pk-line path { animation: drawIn .42s var(--ease-out) forwards; }
.pick-sec.go .pk-line .pk-b { animation-duration: .26s; animation-delay: .36s; }
.pick-sec.drawn .pk-line path { animation: none; stroke-dashoffset: 0; }
.pk-chev { display: block; width: 22px; height: 22px; margin-top: 10px; color: var(--fl); opacity: .75; animation: pkBob 2s ease-in-out infinite; }
.pk-chev svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes pkBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ---------- Budget: pause offscreen / while scrolling; static for low-end + reduced motion ---------- */
.hc-hero.offscreen .ht-flow, .hc-hero.offscreen .ring-rot, .hc-hero.offscreen .ring-glow, .hc-hero.offscreen .ring-hot *,
html.is-scrolling .ring-hot *, html.is-scrolling .ht-flow, html.is-scrolling .pk-chev { animation-play-state: paused; }
html.low-end .ht-flow, html.low-end .ring-rot, html.low-end .ring-glow, html.low-end .pk-chev,
html[data-motion="reduce"] .ht-flow, html[data-motion="reduce"] .ring-rot, html[data-motion="reduce"] .ring-glow, html[data-motion="reduce"] .pk-chev { animation: none; }
html.low-end .ring-glow, html[data-motion="reduce"] .ring-glow { opacity: .85; }
html[data-motion="reduce"] .ht-wave, html[data-motion="reduce"] .pk-line path { animation: none; stroke-dashoffset: 0; }
html[data-motion="reduce"]::view-transition-old(root), html[data-motion="reduce"]::view-transition-new(root) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .ht-flow, html:not([data-motion="full"]) .ring-rot, html:not([data-motion="full"]) .ring-glow, html:not([data-motion="full"]) .pk-chev { animation: none; }
  html:not([data-motion="full"]) .ring-glow { opacity: .85; }
  html:not([data-motion="full"]) .ht-wave, html:not([data-motion="full"]) .pk-line path { animation: none; stroke-dashoffset: 0; }
  html:not([data-motion="full"])::view-transition-old(root), html:not([data-motion="full"])::view-transition-new(root) { animation: none; }
  html:not([data-motion="full"]) #app.fx-back > * { animation: none; }
}

/* ---------- One palette per level, shared by the ring, its glow, the progress arc,
   the heading and the level pills (v13.2) ----------
   Flirty: pink -> magenta (with the pink tint)   Spicy: pink -> orange   HOT: orange -> white-hot */
.heat-steps .hs i { background: linear-gradient(135deg, var(--fl-tint), var(--fl) 50%, var(--fl-deep)); }
.heat-steps .hs[data-step="2"] i { background: linear-gradient(135deg, var(--fl), var(--ht)); }
.heat-steps .hs[data-step="3"] i { background: linear-gradient(135deg, var(--ht), var(--wh)); }
.heat-steps .hs { transition: transform .14s ease, opacity .2s ease, background-color .4s var(--ease-out), border-color .4s var(--ease-out), color .4s var(--ease-out); }
.heat-steps .hs.on[data-step="1"] { color: var(--fg); background: linear-gradient(135deg, #ff2e632e, #d61f6e24); border-color: #ff2e6380; box-shadow: 0 0 14px -4px #ff2e6380; }
.heat-steps .hs.on[data-step="2"] { color: var(--fg); background: linear-gradient(135deg, #ff2e632e, #ff7a3c2e); border-color: #ff7a3c80; box-shadow: 0 0 14px -4px #ff7a3c80; }
.heat-steps .hs.on[data-step="3"] { color: var(--fg); background: linear-gradient(135deg, #ff7a3c33, #fff4e01f); border-color: #ffc9a3a6; box-shadow: 0 0 14px -4px #ff7a3c99; }
/* The arc and spark use the same stops (rfg1-3 in intro.js); the old flat strokes never show */
.hc-hero.burning .ring-base, .hc-hero.igniting .ring-base { animation: none; }
/* The gradient ring sits exactly on the arc's track (one ring, not two). While holding it
   dims so the bright progress arc reads on top of it. */
.ring-rot { inset: 0; }
.ring-rot i { -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8.5px)); }
.ring-svg .ring-track { opacity: 0; }
.ring-rot { transition: opacity .25s var(--ease-out); }
.hc-hero.holding .ring-rot { opacity: .38; }

/* ---------- HOT standing effect (v13.3): stays on for as long as HOT is the chosen level ----------
   A flickering white-hot corona, a breathing heat halo and embers rising off the ring.
   transform/opacity only; fades in after the one-off ignite burst. */
.ring-hot { position: absolute; inset: -40px; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .9s var(--ease-out) .25s; }
.hc-hero:not(.holding):not(.locked)[data-heat="3"] .ring-hot { opacity: 1; }
.ring-hot b { position: absolute; border-radius: 50%; }
.rh-corona { inset: 22px; background: radial-gradient(closest-side, transparent 80%, #fff4e0b3 85%, #ffb48a80 88%, #ff7a3c33 93%, transparent 100%); animation: rhFlicker 1.9s steps(1, end) infinite, rhSpin 14s linear infinite; }
.rh-halo { inset: 0; background: radial-gradient(closest-side, transparent 58%, #ff7a3c59 70%, #ff2e6326 84%, transparent 100%); animation: rhBreath 2.6s ease-in-out infinite alternate; }
.ring-hot i { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: radial-gradient(circle, #fff 0 22%, #ffd2b0 45%, #ff7a3c00 72%); transform: rotate(var(--a)) translateY(-112px) scale(var(--s)); opacity: 0; animation: rhEmber var(--d) ease-out var(--w) infinite; }
@keyframes rhEmber { 0% { opacity: 0; transform: rotate(var(--a)) translateY(-108px) scale(var(--s)); } 15% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-150px) scale(calc(var(--s) * .3)); } }
@keyframes rhBreath { from { opacity: .55; transform: scale(.97); } to { opacity: 1; transform: scale(1.04); } }
@keyframes rhSpin { to { transform: rotate(360deg); } }
@keyframes rhFlicker { 0% { opacity: .85; } 18% { opacity: 1; } 31% { opacity: .7; } 47% { opacity: .95; } 63% { opacity: .78; } 81% { opacity: 1; } }
/* HOT word inside the ring and the HOT pill glow white-hot while HOT is on */
.hc-hero:not(.holding)[data-heat="3"] #holdWord { text-shadow: 0 0 18px #ff7a3cb3, 0 0 2px #fff4e0; }
.heat-steps .hs.on[data-step="3"] { animation: rhPill 2.6s ease-in-out infinite alternate; }
@keyframes rhPill { from { box-shadow: 0 0 10px -4px #ff7a3c99; } to { box-shadow: 0 0 20px -2px #ff7a3ccc, inset 0 0 8px #fff4e026; } }
html.low-end .ring-hot *, html[data-motion="reduce"] .ring-hot *, html.low-end .heat-steps .hs.on, html[data-motion="reduce"] .heat-steps .hs.on { animation: none; }
html.low-end .ring-hot i, html[data-motion="reduce"] .ring-hot i { display: none; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .ring-hot *, html:not([data-motion="full"]) .heat-steps .hs.on { animation: none; }
  html:not([data-motion="full"]) .ring-hot i { display: none; }
}

/* ---------- In-game heat matches the home palette ---------- */
.heat-fill { background-image: linear-gradient(180deg, #ffffff55, #ffffff00 60%), linear-gradient(90deg, #ffb3c6, #ff2e63 30%, #ff7a3c 66%, #fff4e0) !important; box-shadow: 0 0 14px #ff5a3c99; }
.mring { border-color: #ff2e63; }
#app[data-heat="2"] .mring { border-color: #ff7a3c; }
#app[data-heat="3"] .mring { border-color: #fff4e0; box-shadow: 0 0 8px #ff7a3ccc; }
.h1b { background: #ff2e6333; color: #ff8fb0; }
.h2b { background: #ff7a3c33; color: #ffa577; }
.h3b { background: linear-gradient(135deg, #ff7a3c40, #fff4e026); color: #fff1e0; box-shadow: 0 0 10px -3px #ff7a3c99; }

/* ---------- Header status (v13.4): chips centred, plan pill on its own line, clear of Couples/Groups ---------- */
.session-bar { justify-content: center; margin: 4px 0 0; padding: 0 18px; }
.pass-banner-slot { margin: 12px 18px 16px; }
.pass-banner-slot[data-pill="1"] { margin: 12px 18px 16px; }
.pass-banner-slot:empty { display: none; }
.pass-banner-slot:empty + .side-switch, .session-bar + .side-switch { margin-top: 16px; }

/* ---------- Metal ring around the profile icon: titanium for Premium, gold for Lite ---------- */
.avatar.tier-premium, .avatar.tier-lite { position: relative; overflow: visible; isolation: isolate; }
.avatar .av-ch { position: relative; z-index: 1; }
.av-ring { position: absolute; inset: -5px; border-radius: 50%; z-index: -1; pointer-events: none; padding: 3px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.av-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: avSpin 6s linear infinite; }
.tier-premium .av-ring::before { background: conic-gradient(from 0deg, #f4f9ff, #a9c2db 18%, #6f879f 32%, #d9e8f7 48%, #ffffff 54%, #a9c2db 70%, #6f879f 84%, #f4f9ff); }
.tier-lite .av-ring::before { background: conic-gradient(from 0deg, #fff3c9, #e2ad48 18%, #a8741f 32%, #f6d47e 48%, #fffbe8 54%, #e2ad48 70%, #a8741f 84%, #fff3c9); }
.avatar.tier-premium { box-shadow: 0 0 16px -4px #a9c2dbaa, inset 0 1px 0 #ffffff1f; }
.avatar.tier-lite { box-shadow: 0 0 16px -4px #e2ad48aa, inset 0 1px 0 #ffffff1f; }
@keyframes avSpin { to { transform: rotate(360deg); } }
html.low-end .av-ring::before, html[data-motion="reduce"] .av-ring::before { animation: none; }
@media (prefers-reduced-motion: reduce) { html:not([data-motion="full"]) .av-ring::before { animation: none; } }

/* ---------- End Night: awards + heat mix ---------- */
.mix-bar { display: flex; height: 14px; border-radius: 99px; overflow: hidden; background: #ffffff12; gap: 2px; }
.mix-bar i { display: block; min-width: 6px; }
.mix-bar .mx1 { background: linear-gradient(90deg, #ffb3c6, #ff2e63, #d61f6e); }
.mix-bar .mx2 { background: linear-gradient(90deg, #ff2e63, #ff7a3c); }
.mix-bar .mx3 { background: linear-gradient(90deg, #ff7a3c, #fff4e0); }
.mix-legend { list-style: none; display: flex; justify-content: space-between; gap: 8px; margin: 12px 0 0; padding: 0; font-size: 13px; font-weight: 700; }
.mix-legend li { display: flex; align-items: center; gap: 6px; }
.mix-legend li i { width: 10px; height: 10px; border-radius: 50%; }
.mix-legend li b { color: var(--muted); font-weight: 700; }
.mix-legend .mx1 i { background: linear-gradient(135deg, #ffb3c6, #ff2e63); }
.mix-legend .mx2 i { background: linear-gradient(135deg, #ff2e63, #ff7a3c); }
.mix-legend .mx3 i { background: linear-gradient(135deg, #ff7a3c, #fff4e0); }
.night-grid b.h1, .night-grid b.h2, .night-grid b.h3 { -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.night-grid b.h1 { background-image: linear-gradient(100deg, #ffb3c6, #ff2e63, #d61f6e); }
.night-grid b.h2 { background-image: linear-gradient(100deg, #ff2e63, #ff7a3c); }
.night-grid b.h3 { background-image: linear-gradient(100deg, #ff7a3c, #fff4e0); }

/* ---------- Profile hero: the same metal ring, bigger (titanium Premium, gold Lite) ---------- */
.pf-ring.tier-premium::before, .pf-ring.tier-lite::before { display: none; }
.pf-ring span { position: relative; z-index: 1; }
.pf-metal { position: absolute; inset: 0; border-radius: 50%; padding: 6px; overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.pf-metal::before { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: avSpin 7s linear infinite; }
.tier-premium .pf-metal::before { background: conic-gradient(from 0deg, #f4f9ff, #a9c2db 18%, #6f879f 32%, #d9e8f7 48%, #ffffff 54%, #a9c2db 70%, #6f879f 84%, #f4f9ff); }
.tier-lite .pf-metal::before { background: conic-gradient(from 0deg, #fff3c9, #e2ad48 18%, #a8741f 32%, #f6d47e 48%, #fffbe8 54%, #e2ad48 70%, #a8741f 84%, #fff3c9); }
.pf-ring.tier-premium::after { background: radial-gradient(closest-side, #a9c2db66, transparent); }
.pf-ring.tier-lite::after { background: radial-gradient(closest-side, #e2ad4866, transparent); }
.pf-ring.tier-premium span { background: linear-gradient(160deg, #ffffff, #d9e8f7 40%, #a9c2db 70%, #f4f9ff); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.pf-ring.tier-lite span { background: linear-gradient(160deg, #fff3c9, #f6d47e 40%, #e2ad48 70%, #fff3c9); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
html.low-end .pf-metal::before, html[data-motion="reduce"] .pf-metal::before { animation: none; }
@media (prefers-reduced-motion: reduce) { html:not([data-motion="full"]) .pf-metal::before { animation: none; } }

/* "tried Premium yet?": Premium in the titanium silver of the Premium pill */
.micro-prem { font-weight: 800; background: linear-gradient(180deg, #fbfdff 0%, #dbe7f3 22%, #aebfd2 48%, #7e93aa 54%, #c9d8e7 62%, #eef4fa 82%, #9cb0c5 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 6px #a9c2db55); }