/* The plans page: cards with a quiet picture each, a tilt and shine on hover, a 7 or 30 day switch, and grouped "Start here" and "Steer the risk".
   Ported from the owner's refined mock-up (plans_page_refine1.html). Tokens come from tokens.css; every rule is scoped under .plans; no inline styles (strict CSP). */
.plans { --bev-hi: rgba(255, 255, 255, 0.10); --bev-lo: rgba(0, 0, 0, 0.38); --shade: rgba(7, 11, 20, 0.85); --art-o: 0.13; --art-on: 0.6; display: flex; flex-direction: column; gap: 28px; }
:root[data-theme="light"] .plans { --bev-hi: rgba(255, 255, 255, 0.95); --bev-lo: rgba(11, 20, 36, 0.10); --shade: rgba(255, 255, 255, 0.9); --art-o: 0.2; --art-on: 0.55; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .plans { --bev-hi: rgba(255, 255, 255, 0.95); --bev-lo: rgba(11, 20, 36, 0.10); --shade: rgba(255, 255, 255, 0.9); --art-o: 0.2; --art-on: 0.55; } }
/* the VVIP picture is the symbol, in two versions: one for the dark theme and one for the light (the other is hidden) */
.plans .art .logo-l { display: none; }
:root[data-theme="light"] .plans .art .logo-d { display: none; }
:root[data-theme="light"] .plans .art .logo-l { display: block; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .plans .art .logo-d { display: none; } :root:not([data-theme]) .plans .art .logo-l { display: block; } }

.plans .head { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: flex-end; justify-content: space-between; }
.plans .term { display: none; padding: 4px; border: 1px solid var(--line); background: var(--ink-900); border-radius: 999px; }
html.js .plans .term { display: inline-flex; }
.plans .term button { appearance: none; border: 0; background: none; color: var(--text-dim); font: 600 14px var(--font-body); padding: 0 18px; min-height: 44px; border-radius: 999px; cursor: pointer; }
.plans .term button[aria-pressed="true"] { background: var(--teal); color: var(--on-teal); }
.plans.price-7 .prices p:not(.p7), .plans.price-30 .prices p:not(.p30), .plans.price-90 .prices p:not(.p90) { display: none; }  /* the length the switch shows; with no script every length shows */
.plans .group-h { font: 700 13px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); display: flex; align-items: center; gap: 14px; margin: 0; }
.plans .group-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.plans .plan-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; perspective: 1200px; }
.plans .r1 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.plans .r2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)); }

/* the card: thin border and back glow, a tilt, a shine and a bevel */
.plans .c { --acc: var(--acc-d); --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 30%; --lift: 0px; position: relative; overflow: hidden; isolation: isolate; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--ink-900), var(--ink-950)); box-shadow: inset 0 1px 0 var(--bev-hi), inset 0 -2px 6px var(--bev-lo);
  transform: translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 0.25s ease-out, border-color 0.3s, box-shadow 0.3s; }
:root[data-theme="light"] .plans .c { --acc: var(--acc-l); }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .plans .c { --acc: var(--acc-l); } }
.plans .c.free { --acc-d: #9ba6bc; --acc-l: #5f6f91; }
.plans .c.taster { --acc-d: #27e3c2; --acc-l: #00806e; }
.plans .c.starter { --acc-d: #22e27a; --acc-l: #16a959; }
.plans .c.vip { --acc-d: #ffc24d; --acc-l: #c27c00; }
.plans .c.vvip { --acc-d: #ffe45c; --acc-l: #d9a400; }
.plans .c:hover, .plans .c:focus-within { --lift: -4px; border-color: var(--acc); box-shadow: inset 0 1px 0 var(--bev-hi), inset 0 -2px 6px var(--bev-lo), 0 18px 50px -20px var(--acc); }
.plans .c::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.22), transparent 60%); mix-blend-mode: overlay; opacity: 0; transition: opacity 0.25s; }
:root[data-theme="light"] .plans .c::before { background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.9), transparent 60%); mix-blend-mode: soft-light; }
.plans .c:hover::before { opacity: 1; }
.plans .c::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, var(--ink-900) 25%, transparent 90%); pointer-events: none; opacity: 0.75; }
.plans .c { display: flex; flex-direction: column; }   /* the card fills its grid cell, so the button (margin-top: auto) sits at the bottom of every card in a row, level with its neighbours */
.plans .in { position: relative; z-index: 2; display: flex; flex: 1; flex-direction: column; gap: 16px; padding: 24px; }
.plans .in > * { text-shadow: 0 1px 10px var(--shade); }
.plans .c h2 { margin: 0; font: 800 26px var(--font-head); letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plans .c.big h2 { font-size: 32px; }
.plans .c.big .in { padding: 28px; }
.plans .c .btn { margin-top: auto; align-self: flex-start; }
.plans .c.big { border-color: color-mix(in srgb, var(--acc) 45%, var(--line)); }
.plans .free-price { font: 700 22px var(--font-head); margin: 0; }
.plans .prices { display: grid; gap: 4px; }
.plans .prices p { margin: 0; font: 700 17px/1.3 var(--font-head); font-variant-numeric: tabular-nums; }
.plans .prices em { font: 600 11px var(--font-body); font-style: normal; color: var(--text-dim); border: 1px solid var(--line); background: var(--ink-800); border-radius: 999px; padding: 3px 9px; margin-left: 6px; white-space: nowrap; vertical-align: middle; }
.plans .feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; color: var(--text-dim); font-size: 15px; }
.plans .feats li { display: flex; gap: 10px; }
.plans .feats li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 0.55em; border-radius: 50%; background: var(--acc); }
.plans .tag { font: 700 11px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-teal); background: var(--acc); padding: 4px 10px; border-radius: 999px; align-self: flex-start; }
.plans .here { font: 700 11px var(--font-body); color: var(--good-text); border: 1px solid var(--good-text); border-radius: 6px; padding: 2px 8px; letter-spacing: 0.02em; }
.plans .note { color: var(--text-dim); font-size: 13px; margin: 0; }

/* the picture: quiet until the card is hovered or focused */
.plans .art { position: absolute; z-index: 1; right: -4%; bottom: -6%; width: 62%; background: none; color: var(--acc);  /* decorative (aria-hidden): the colour is an accent, not text */ opacity: var(--art-o); filter: grayscale(1); transform: rotate(-6deg); transition: opacity 0.45s, filter 0.45s, transform 0.6s; pointer-events: none; }
.plans .art svg, .plans .art img { width: 100%; height: auto; display: block; }
.plans .c.vip .art { width: 72%; right: -17%; bottom: -16%; top: auto; }          /* the trophy: twice its first size, low and well to the right */
.plans .c.vip:hover .art, .plans .c.vip:focus-within .art { opacity: 0.36; }
.plans .c.vvip .art { width: 36%; right: 3%; top: 4%; bottom: auto; }
.plans .c:hover .art, .plans .c:focus-within .art { opacity: var(--art-on); filter: none; transform: rotate(-2deg) scale(1.06); }
@media (hover: none) { .plans .art { opacity: 0.3; filter: none; } }

/* VVIP: brighter gold, gold lettering, a slow sheen */
.plans .c.vvip { box-shadow: inset 0 1px 0 var(--bev-hi), inset 0 -2px 6px var(--bev-lo), 0 14px 46px -18px var(--acc); }
.plans .c.vvip:hover, .plans .c.vvip:focus-within { box-shadow: inset 0 1px 0 var(--bev-hi), inset 0 -2px 6px var(--bev-lo), 0 20px 56px -12px var(--acc), 0 0 44px -6px color-mix(in srgb, var(--acc) 55%, transparent); }
.plans .c.vvip h2 .nm { background: linear-gradient(90deg, #fff6c2, #ffe45c 55%, #ffc933); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
:root[data-theme="light"] .plans .c.vvip h2 .nm { background: linear-gradient(90deg, #b98b00, #d9a400 55%, #8f6a00); -webkit-background-clip: text; background-clip: text; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .plans .c.vvip h2 .nm { background: linear-gradient(90deg, #b98b00, #d9a400 55%, #8f6a00); -webkit-background-clip: text; background-clip: text; } }
.plans .sheen { position: absolute; z-index: 4; top: 0; bottom: 0; left: -40%; width: 30%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 244, 190, 0.28), transparent); transform: skewX(-18deg); animation: plsheen 7s ease-in-out infinite; }
@keyframes plsheen { 0%, 55% { left: -40%; } 100% { left: 130%; } }

/* Starter: from where it rests the ball is kicked to the right-hand corner of the card, rebounds up to the top, goes back left, drops to the bottom and settles where it started.
   The numbers are the ball's own width (100% = one ball), so it follows the card at any size. */
.plans .c .ball { transform-box: fill-box; transform-origin: center; }
.plans .c.starter:hover .ball, .plans .c.starter:focus-within .ball { animation: plkick 3s cubic-bezier(0.3, 0.6, 0.4, 1) both; }
@keyframes plkick {
  0% { transform: translate(0, 0) rotate(0); }
  5% { transform: translate(-6%, 3%) rotate(-12deg) scale(1.05, 0.95); }
  24% { transform: translate(98%, -30%) rotate(380deg); }
  28% { transform: translate(104%, -28%) rotate(420deg) scale(0.94, 1.05); }
  50% { transform: translate(-8%, -135%) rotate(640deg); }
  67% { transform: translate(-75%, -30%) rotate(860deg); }
  69% { transform: translate(-78%, -28%) rotate(880deg) scale(1.05, 0.94); }
  85% { transform: translate(12%, 52%) rotate(1080deg); }
  93% { transform: translate(-3%, -8%) rotate(1130deg); }
  100% { transform: translate(0, 0) rotate(1170deg); }
}

/* The order pop-up (opens over the page from "Choose a pass"): the pass length, the way to pay and the order. Its colours are the page tokens. */
.plans [hidden] { display: none !important; }
.plans .buy { width: min(94vw, 860px); max-height: none; overflow: hidden; padding: 0; border: 1px solid color-mix(in srgb, var(--teal) 55%, var(--line)); border-radius: var(--r-lg); background: var(--ink-900); color: var(--text); box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.7); }
.plans .buy::backdrop { background: color-mix(in srgb, var(--ink-950) 78%, transparent); backdrop-filter: blur(3px); }
.plans .buy[open] { animation: plbuy 0.18s ease-out; }
/* The scrolling is on the inner panel, never on the dialog itself: iPhone browsers (all of them run WebKit) sized a dialog that was "fit to content" with its own overflow and an animated transform at about 40 px, its padding, with the real content scrolling inside that sliver. */
.plans .buy:not(.static) .buy-in { max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* On a phone the pop-up is a bottom sheet: full width, fixed to the bottom edge, with a height the browser is TOLD (no "fit to content" to get wrong). It is still over the page, with the page dimmed behind it. */
@media (max-width: 760px) {
  .plans .buy:not(.static) { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; height: 88vh; height: 88dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0; }
  .plans .buy:not(.static) .buy-in { height: 100%; max-height: none; padding-bottom: calc(clamp(18px, 3vw, 32px) + env(safe-area-inset-bottom, 0px)); }
}
/* drawn by the server (no script): in the page, under the cards, not a pop-up */
.plans .buy.static { position: static; margin: 8px auto; }
@keyframes plbuy { from { opacity: 0; } to { opacity: 1; } }        /* a fade only: it used to also slide up 14 px and grow from 98 percent, and a transform on the dialog is what WebKit mis-measured */
.plans .buy-in { padding: clamp(18px, 3vw, 32px); }
.plans .buy-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.plans .buy-head h2 { margin: 0; font: 800 clamp(24px, 4vw, 32px) var(--font-head); letter-spacing: -0.02em; }
.plans .buy-head h2:focus { outline: none; }
.plans .buy-back { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; min-height: 44px; min-width: 44px; background: none; border: 1px solid var(--line); color: var(--text-dim); border-radius: 999px; font: 600 14px var(--font-body); padding: 0 18px; cursor: pointer; }
.plans .buy-back:hover { color: var(--text); border-color: var(--text-dim); }
.plans .seg { display: flex; width: fit-content; max-width: 100%; padding: 4px; gap: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--ink-800); margin-top: 18px; }
.plans .seg a, .plans .seg span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: none; color: var(--text-dim); font: 700 14px var(--font-body); cursor: pointer; text-decoration: none; }
.plans .seg a[aria-current="true"] { background: var(--teal); color: var(--on-teal); }
.plans .seg span[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.plans .seg { flex-wrap: wrap; }
.plans .seg em.save { font-style: normal; font-weight: 600; font-size: 12px; margin-left: 8px; }
@media (max-width: 420px) { .plans .seg a, .plans .seg span { padding: 0 12px; } .plans .seg em.save { margin-left: 6px; } }
.plans .buy-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; margin-top: 22px; align-items: start; }
@media (max-width: 760px) { .plans .buy-cols { grid-template-columns: minmax(0, 1fr); } .plans .invoice { order: -1; } }
.plans .buy h3 { margin: 0 0 12px; font: 700 16px var(--font-head); }
.plans .methods { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.plans .method { color: var(--text); text-decoration: none; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-800); cursor: pointer; min-height: 64px; }
.plans .method.off { opacity: 0.55; cursor: not-allowed; }
.plans .method > span:not(.mark):not(.m-tag) { flex: 1 1 11ch; min-width: 0; }   /* the words may wrap, and the tag drops under them, rather than push the row wider than the pop-up */
.plans .m-tag { margin-left: auto; font: 700 11px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.plans .method[aria-current="true"] { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
.plans .method:focus-visible, .plans .seg a:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.plans .mark { flex: none; width: 36px; height: 36px; border-radius: 10px; background: center / contain no-repeat; }
.plans .mk-flutterwave { background-image: url("../img/pay/flutterwave.0987d76fcd26.svg"); }
.plans .mk-squad { background-image: url("../img/pay/squad.6d1e137b98da.svg"); }
.plans .mk-usdt_solana { background-image: url("../img/pay/usdt.5838d41c0ec9.svg"); }
.plans .method.off .mark { filter: grayscale(1); }
.plans .m-name { font: 700 16px var(--font-head); }
.plans .m-sub { font-size: 13px; color: var(--text-dim); }
.plans .buy .go { margin-top: 16px; width: 100%; }
.plans .buy .after { font-size: 13px; color: var(--text-dim); margin: 10px 0 0; }
.plans .invoice { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-800); padding: 20px; }
.plans .invoice dl { margin: 0; display: grid; gap: 12px; }
.plans .invoice .row { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; font-size: 15px; }
.plans .invoice dt { color: var(--text-dim); }
.plans .invoice dd { margin: 0; text-align: right; }
.plans .invoice .total { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; font: 700 18px var(--font-head); }
.plans .invoice .total dd { font-size: 24px; color: var(--gold-text); }
.plans .invoice .fine { font-size: 12.5px; color: var(--text-dim); margin: 14px 0 0; }
@media (prefers-reduced-motion: reduce) { .plans .buy[open] { animation: none; } }

/* VVIP spark dust, fired once per page load by plans.js, from the word VVIP */
.dust { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.dust i { position: absolute; display: block; will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) { .plans .c { transform: none !important; } .plans .sheen { display: none; } .plans .c .ball { animation: none !important; } .dust { display: none; } }
/* a feature line that carries the credits coin shows the coin in place of the dot */
.plans .feats li.has-icon::before { display: none; }
.plans .feats li.has-icon .coin { margin-top: 0.15em; }

/* the credits card: a gold card with the two packs as rows */
.plans .c.credits { --acc-d: #ffc24d; --acc-l: #c27c00; }
.plans .c.credits .art { position: absolute; right: 24px; bottom: 16px; opacity: 0.18; z-index: 1; }
.plans .c.credits .plan-name { display: flex; align-items: center; gap: 10px; }
.plans .credits-sub, .plans .credits-have { margin: 0; color: var(--text-dim); }
.plans .credits-have { color: var(--text); font-weight: 600; }
.plans .packs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.plans .packs li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md, 12px); background: var(--ink-900); }
.plans .packs .pack-text { font: 700 17px var(--font-head); }
.plans .packs .pack-price { font: 700 17px var(--font-head); font-variant-numeric: tabular-nums; color: var(--gold-text); margin-right: auto; }
.plans .packs .btn { margin-top: 0; align-self: center; }