:root{--bg:#141416;--gold:#7cc0ff;--gold-hi:#8ec7ff;--text:#e9e9ec;--muted:#b6b6bd;
--line:rgba(255,255,255,.11);--ok:#8fc46a}
*{box-sizing:border-box}
html{height:100%}
body{margin:0;min-height:100vh;color:var(--text);
font:14px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
background:var(--bg)}

/* same video background as the login page */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--bg);pointer-events:none}
.bg video{width:100%;height:100%;object-fit:cover;display:block}
.bg-overlay{position:absolute;inset:0;
background-image:
linear-gradient(rgba(10,10,10,.30),rgba(10,10,10,.48)),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
background-attachment:fixed,scroll;background-repeat:no-repeat,repeat}

.glass{background:rgba(12,12,12,.26);border:1px solid var(--line);
-webkit-backdrop-filter:blur(28px) saturate(120%);backdrop-filter:blur(28px) saturate(120%);
box-shadow:0 6px 26px rgba(0,0,0,.26);border-radius:14px}

.topnav{position:fixed;top:16px;right:16px;z-index:30;display:flex;gap:8px}
.backbtn{position:fixed;top:16px;left:16px;z-index:30;display:flex;align-items:center;gap:7px;
padding:7px 14px;border-radius:999px;font-size:12.5px;color:#e6e0d2;text-decoration:none;
transition:color .14s}
.backbtn:hover{color:var(--gold-hi)}
.backbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;
stroke-linecap:round;stroke-linejoin:round}
.topnav a{padding:7px 14px;border-radius:999px;font-size:12.5px;color:#e6e0d2;
text-decoration:none;transition:color .14s}
.topnav a:hover,.topnav a[data-active]{color:var(--gold-hi)}

.corner{position:fixed;right:16px;bottom:16px;z-index:30;display:flex;align-items:center;
gap:9px;padding:7px 12px;border-radius:999px}
.corner .mark{font-size:12.5px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;color:var(--gold-hi)}
.corner .year{font-size:12px;color:var(--muted)}
.corner a{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
color:var(--muted);text-decoration:none}
.corner a:hover{color:var(--gold-hi);background:rgba(255,255,255,.08)}
.corner svg{width:17px;height:17px;fill:currentColor}

.wrap{max-width:920px;margin:0 auto;padding:76px 20px 120px}
.head{text-align:center;margin-bottom:34px}
.head h1{margin:0 0 8px;font-size:27px;letter-spacing:.06em;
background:linear-gradient(180deg,#fff6cf 0%,var(--gold-hi) 48%,#4d8ec7 100%);
-webkit-background-clip:text;background-clip:text;color:transparent}
.head p{margin:0;color:var(--muted);font-size:14px}

.group{margin-bottom:16px;padding:16px 20px}
.group h2{margin:0 0 12px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-hi)}
.item{display:flex;gap:12px;padding:9px 0;border-top:1px solid rgba(255,255,255,.055)}
.item:first-of-type{border-top:0}
.tick{flex:0 0 auto;width:17px;height:17px;margin-top:3px;color:var(--ok)}
.tick svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2.2;
stroke-linecap:round;stroke-linejoin:round}
.item b{display:block;font-size:13.5px;font-weight:600;color:var(--text)}
.item span{font-size:12.5px;color:var(--muted)}

.tiers{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.tier{padding:20px 20px 22px;position:relative}
.tier.hi{border-color:rgba(142,199,255,.42)}
.badge{position:absolute;top:-10px;left:20px;padding:3px 10px;border-radius:999px;
font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#06122b;
background:linear-gradient(180deg,#9ccfff,#4d8ec7)}
.tier h3{margin:0 0 4px;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.price{font-size:30px;font-weight:600;color:var(--gold-hi);line-height:1.1}
.price small{font-size:12px;font-weight:400;color:var(--muted);margin-left:5px}
.tier .tag{margin:8px 0 14px;font-size:12.5px;color:var(--muted)}
.tier ul{list-style:none;margin:0 0 18px;padding:0}
.tier li{display:flex;gap:9px;padding:5px 0;font-size:12.5px;color:var(--text)}
.tier li.no{color:#9c9488}
.tier li .tick{margin-top:2px;width:15px;height:15px}
.tier li.no .tick{color:#9c9488}
.buy{display:block;text-align:center;padding:11px 16px;border-radius:9px;text-decoration:none;
font-size:13px;font-weight:600;letter-spacing:.03em;color:#06122b;
background:linear-gradient(180deg,#9ccfff,#4d8ec7)}
.buy.ghost{background:none;border:1px solid var(--line);color:var(--text)}
.buy:hover{filter:brightness(1.07)}

/* CTA: same glass box as the page, with an arrow, gold text */
.cta{display:flex;align-items:center;justify-content:space-between;gap:14px;
max-width:420px;margin:22px auto 0;padding:14px 16px 14px 20px;
text-decoration:none;color:var(--gold-hi);font-size:13.5px;font-weight:600;
letter-spacing:.02em;transition:border-color .15s,color .15s}
.cta:hover{border-color:rgba(142,199,255,.55);color:#fff6cf}
.cta-arrow{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;
border-radius:50%;background:rgba(255,255,255,.07);
transition:background .15s,transform .15s}
.cta:hover .cta-arrow{background:rgba(142,199,255,.18);transform:translateX(3px)}
.cta-arrow svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.note{margin-top:22px;padding:14px 18px;font-size:12.5px;color:var(--muted)}
.note b{color:var(--text)}
/* .goldlink was never given a colour, so it rendered as the browser default
   link: blue, then #551A8B once visited. Pin it to the accent instead. */
.goldlink{color:#89BCEC;text-underline-offset:2px}
.goldlink:hover{color:#a8d4f5}
@media(max-width:520px){.wrap{padding-top:66px}.head h1{font-size:23px}}