@font-face {
  font-family: Instrument;
  src: url("InstrumentSans-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
:root, :host {
  color-scheme: dark;
  --canvas: #0e1118;
  --surface: #181c25;
  --soft: #212632;
  --ink: #f5f6fa;
  --muted: #b0b8c9;
  --line: #363d4b;
  --accent: #abbbff;
  --control: #3b50ae;
  --focus: #9ecaff;
  --emphasis: #cfb9ff;
  --feature-ink: #ffd85b;
  --feature-surface: #272217;
  --feature-line: #ffbe0a;
  --check: #ffda49;
  --check-bed: #423a25;
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --canvas: #f5f5f7;
    --surface: #fff;
    --soft: #eceef3;
    --ink: #171b26;
    --muted: #50596c;
    --line: #cbd0da;
    --accent: #344fba;
    --control: #374caa;
    --focus: #2359be;
    --emphasis: #633b91;
    --feature-ink: #785000;
    --feature-surface: #fffaf0;
    --feature-line: #d8930b;
    --check: #ffe14f;
    --check-bed: #494026;
  }
  .identity img { filter: brightness(0) saturate(100%); }
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 18px; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 16px/1.5 Instrument, "Segoe UI", sans-serif; }
h1, h2, h3, p, ul { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
button, a { font: inherit; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .65; }
button, input { color: inherit; }
a { color: inherit; text-decoration: none; }
:where(a,button,input):focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
[hidden] { display: none !important; }
.frame { width: min(1192px, calc(100% - clamp(32px, 8vw, 120px))); margin-inline: auto; }
.masthead { border-bottom: 1px solid var(--line); }
.masthead nav { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.identity, .nav-links, .account-link, .account-actions { display: flex; align-items: center; }
.identity { gap: 13px; }
.identity .star { width: 37px; height: auto; }
.identity .wordmark { width: 117px; height: auto; }
.nav-links { gap: 24px; font-size: 14px; font-weight: 600; }
.nav-links a:hover, .site-footer a:hover { color: var(--accent); }
.account-link { gap: 10px; padding: 8px 14px; border-radius: 100px; border: 1px solid var(--line); }
.hero { isolation: isolate; position: relative; overflow: hidden; border-radius: 20px; margin: 24px 0 38px; color: #fff; background: radial-gradient(ellipse at 91% 124%,#cb16bf 0%,transparent 47%),radial-gradient(ellipse at 65% -35%,#2167ff 0%,transparent 59%),linear-gradient(112deg,#0e1a44 13%,#172a78 55%,#480a8d 94%); }
.hero-art { position: absolute; inset: 0 0 0 45%; z-index: -1; isolation: isolate; perspective: 800px; pointer-events: none; }
.hero-art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 44% 57%,#84b7ff40,transparent 38%),radial-gradient(ellipse at 75% 42%,#a886fe30,transparent 40%); }
.ribbon, .ribbon-front { width: 100%; height: 100%; position: absolute; inset: 0; }
.ribbon-front { z-index: 2; }
.sigil { position: absolute; z-index: 1; left: 50%; top: 50%; width: min(40%, 226px); aspect-ratio: 3770 / 3464; transform: translate(-50%,-50%) rotate(-7deg); filter: drop-shadow(0 9px 8px #12183f75); }
.sigil span { position: absolute; inset: 0; mask: url("/memberships/radiant-star.webp") center / contain no-repeat; }
.sigil-depth { background: linear-gradient(135deg,#79bdf3 3%,#6071b9 45%,#45336e); transform: translate(3px,6px); }
.sigil-edge { background: linear-gradient(170deg,#fefeff,#8ba7fc 52%,#c299ef 92%); transform: translate(1px,2px); }
.sigil-face { background: linear-gradient(142deg,#fff 2%,#b6dbff 21%,#dbeaff 34%,#fff 45%,#c2baf9 62%,#f1daff 80%,#cae4ff); background-size: 165% 165%; }
.hero-copy { padding: clamp(26px, 3.4vw, 44px); width: min(55%, 610px); }
.kicker, .category, .minor { font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.kicker { color: #d4ddff; display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.kicker span { height: 2px; width: 22px; background: #a9b9ff; }
h1 { font-size: clamp(40px, 4.8vw, 69px); letter-spacing: -.045em; line-height: .99; font-weight: 650; }
.hero-desc { max-width: 380px; margin-top: 15px; color: #e0e7ff; font-size: 15px; }
.hero-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; color: #fff; font-weight: 650; font-size: 14px; }
.hero-link span { transition: transform .22s ease; }
.hero-link:hover span { transform: translateY(3px); }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.plan-head h2 { font-size: clamp(27px, 2.6vw, 37px); line-height: 1.12; letter-spacing: -.047em; }
.plan-head p { margin-top: 4px; color: var(--muted); font-size: 15px; }
.terms { flex-shrink: 0; text-align: right; }
#period { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; padding: 5px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
#period button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; min-height: 52px; padding: 5px 15px; border: 0; border-radius: 13px; background: transparent; color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.2; transition: background .18s, color .18s; }
#period button span { font-size: 12px; color: var(--accent); }
#period button:hover { background: var(--soft); }
#period button[aria-pressed=true] { color: white; background: linear-gradient(120deg,#1949ed,#5030dd); box-shadow: inset 0 1px #ffffff45,0 2px 5px #1d2fb128; }
#period button[aria-pressed=true] span { color: #fff; }
#saving { display: block; margin: 7px 3px 0; color: var(--muted); font-size: 13px; }
#cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; gap: clamp(10px, 1.4vw, 20px); }
.card { --edge: #237dff; --glow: #428aff50; position: relative; min-width: 0; display: flex; flex-direction: column; isolation: isolate; border: 1px solid var(--edge); border-radius: 17px; background: var(--surface); }
.card.cheese { --edge: #ac33ff; --glow: #a454fc50; }
.card.bundle { --edge: var(--feature-line); --glow: #ffb82d66; border: 2px solid var(--edge); background: var(--feature-surface); }
.card:not(.bundle) { margin-top: 15px; }
.card-head { height: 151px; flex: none; position: relative; isolation: isolate; overflow: hidden; border-radius: 15px 15px 0 0; padding: 15px 19px; color: white; }
.optimizer .card-head { background: radial-gradient(ellipse at 81% 72%,#00caff 0%,#006cff 27%,transparent 68%),linear-gradient(138deg,#08285d,#133bac 60%,#0a35ff); }
.cheese .card-head { background: radial-gradient(ellipse at 87% 72%,#fa68ff,#ab0cff 29%,transparent 67%),linear-gradient(138deg,#301257,#7800eb 67%,#4a199e); }
.bundle .card-head { height: 179px; background: radial-gradient(ellipse at 83% 70%,#fff378 0%,#ffda00 23%,transparent 67%),linear-gradient(124deg,#5b3202,#bd7300 43%,#ff9f00 79%); }
.card-head::before { content: ""; position: absolute; z-index: -1; inset: 0; background: repeating-linear-gradient(-24deg,transparent 0 18px,#ffffff11 19px,transparent 20px 39px); mask-image: linear-gradient(90deg,transparent,#000 94%); }
.bundle .card-head::before { background: repeating-conic-gradient(from -118deg at 78% 69%,#fff3ba28 0deg 3deg, transparent 4deg 19deg); }
.category { position: relative; z-index: 2; color: white; font-size: 10px; letter-spacing: .14em; text-shadow: 0 1px 4px #12102080; }
.emblem { position: absolute; display: flex; align-items: center; pointer-events: none; }
.emblem img { display: block; object-fit: contain; filter: drop-shadow(0 4px 5px #10102245); }
.optimizer .emblem { right: 12%; bottom: 17%; width: min(34%,105px); aspect-ratio: 1; transform: rotate(-9deg); }
.optimizer .emblem img { height: 100%; width: 100%; position: relative; }
.wind { position: absolute; right: 52%; top: 16%; width: 130%; height: 78%; transform: skewY(-10deg); }
.wind i { position: absolute; right: 0; top: 9%; height: 2px; width: 88%; border-radius: 100%; background: linear-gradient(90deg,transparent,#76dfff80 30%,#c6f8ff 96%); }
.wind i:nth-child(2) { top: 27%; width: 64%; --delay: -.9s; }
.wind i:nth-child(3) { top: 48%; width: 108%; height: 3px; --delay: -.45s; }
.wind i:nth-child(4) { top: 67%; width: 75%; --delay: -1.2s; }
.wind i:nth-child(5) { top: 89%; width: 52%; --delay: -.6s; }
.cheese .emblem { right: 5%; bottom: 1%; height: 91%; max-width: 66%; }
.cheese .emblem img, .bundle .mouse { width: 100%; height: 100%; }
.bundle .emblem { left: 6%; right: 3%; height: 87%; bottom: 0; gap: 3%; }
.bundle .emblem img:first-child { width: 45%; height: auto; }
.bundle-plus { align-self: center; color: #fff8d3; font: 400 27px/1 Instrument,sans-serif; }
.bundle .emblem .mouse { flex: 1; min-width: 0; width: 0; object-position: center bottom; }
.cheese .card-motion {
  position: absolute;
  inset: 32% 50% 8% 6%;
  display: grid;
  grid-template-columns: repeat(17, minmax(0, 1fr));
  gap: clamp(2px, .24vw, 4px);
  align-items: center;
  pointer-events: none;
}
.cheese .card-motion i {
  height: var(--level, 65%);
  border-radius: 6px;
  background: #fff;
  animation: audio-level var(--tempo) ease-in-out var(--phase) infinite;
  transform-origin: center;
  --tempo: 1.12s;
  --phase: -.23s;
}
.cheese .card-motion i:nth-child(2n) { --level: 44%; --tempo: .96s; --phase: -.71s; }
.cheese .card-motion i:nth-child(3n) { --level: 88%; --phase: -.47s; }
.cheese .card-motion i:nth-child(4n + 1) { --level: 54%; --tempo: 1.34s; --phase: -.98s; }
.cheese .card-motion i:nth-child(5n + 1) { --level: 96%; --tempo: 1.21s; --phase: -.37s; }
.cheese .card-motion i:first-child, .cheese .card-motion i:last-child { --level: 32%; }
.badge { position: absolute; z-index: 3; top: -11px; right: -5px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 7px; border: 1px solid #fff6ae; color: #312003; background: linear-gradient(113deg,#ffbd15,#fff0a0 55%,#ffcf24); font-size: 12px; font-weight: 700; box-shadow: 0 3px 10px #42240055; transform: rotate(3deg); }
.badge::before { content: "★"; font-size: 13px; }
.card-body { padding: clamp(16px, 1.8vw, 25px); display: flex; flex: 1; flex-direction: column; align-items: stretch; }
.card h3 { font-size: clamp(23px, 2.2vw, 31px); line-height: 1.08; font-weight: 650; letter-spacing: -.045em; }
.description { margin-top: 8px; color: var(--muted); font-size: 14px; min-height: 3em; }
.rate { display: flex; align-items: baseline; gap: 5px; margin-top: 18px; color: var(--muted); font-size: 14px; }
.price, #total { font-variant-numeric: tabular-nums; letter-spacing: -.06em; }
.price { font-size: clamp(32px, 3.4vw, 45px); font-weight: 650; line-height: 1; color: var(--ink); }
.billed { color: var(--muted); font-size: 13px; margin-top: 4px; }
.select-plan { min-height: 43px; border-radius: 8px; font-weight: 650; font-size: 14px; transition: background-color .2s, border-color .2s, transform .2s; }
.select-plan { display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; margin: 17px 0 16px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.select-plan::after { content: "→"; }
.select-plan[aria-pressed=true]::after { content: "✓"; }
.select-plan:hover, .select-plan[aria-pressed=true] { border-color: var(--accent); color: var(--accent); }
.optimizer .select-plan { background: #2150e9; border-color: #487aff; color: white; }
.cheese .select-plan { background: #781ed1; border-color: #ad55f0; color: white; }
.card:not(.bundle) .select-plan:is(:hover,:focus-visible) { filter: brightness(1.1); }
.bundle .select-plan { min-height: 46px; background: #ffcf08; color: #312400; border-color: #bd8904; }
.bundle .select-plan:hover, .bundle .select-plan[aria-pressed=true] { background: #ffe371; color: #312400; border-color: #996500; }
.bundle h3 { font-size: clamp(30px,3.2vw,42px); }
.bundle .description { min-height: 0; }
.bundle .price { font-size: clamp(40px,4vw,54px); }
.bundle-includes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 13px 0 0; border-top: 1px solid var(--line); }
.bundle-includes h4 { margin: 0 0 11px; font-size: 14px; line-height: 1.2; letter-spacing: -.02em; }
.compatibility { margin-top: 12px; color: var(--muted); font-size: 12px; }
button:enabled:active { transform: translateY(1px); }
.card ul { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; font-size: 14px; }
.card li { position: relative; padding-left: 23px; }
.card li::before { content: ""; position: absolute; left: 0; top: .22em; width: 15px; height: 15px; border-radius: 50%; background: var(--check-bed); }
.bundle li::before { content: "★"; background: none; color: var(--feature-ink); font: 16px/1 sans-serif; }
.bundle li::after { display: none; }
.card li::after { content: ""; position: absolute; left: 5px; top: .38em; width: 5px; height: 8px; border: solid var(--check); border-width: 0 1.8px 1.8px 0; transform: rotate(42deg); }
.difference, .library-note { margin: auto 0 0; padding-top: 15px; font-size: 12px; color: var(--muted); }
.difference { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 9px; margin: 12px 0 0; padding: 9px 0 0; border-top: 1px solid var(--line); color: var(--feature-ink); }
.difference strong { font-size: clamp(21px,2vw,28px); line-height: 1.2; letter-spacing: -.04em; }
.difference span { font-size: 12px; color: var(--muted); }
.checkout, .access {
  margin-top: 26px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--surface);
}
.checkout {
  --order-edge: #2585ff;
  --order-action: #244bef;
  --ticket-bg: linear-gradient(128deg,#1641d8,#164df7 65%,#006ac9);
  --ticket-ink: #fff;
  --ticket-button: #fff;
  --ticket-button-ink: #103caf;
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(0,1fr);
  align-items: stretch;
  padding: 8px;
  border-color: color-mix(in srgb,var(--order-edge) 58%,var(--line));
}
.checkout[data-plan=bundle] {
  --order-edge: #ffb600;
  --order-action: #ffcb17;
  --action-ink: #302104;
  --ticket-bg: linear-gradient(118deg,#ffcf05,#ffdf18 62%,#ffa515);
  --ticket-ink: #302104;
  --ticket-button: #302104;
  --ticket-button-ink: #fff7d3;
}
.checkout[data-plan=cheese] {
  --order-edge: #bf48ff;
  --order-action: #7820ce;
  --ticket-bg: linear-gradient(121deg,#6820cb,#8a12dd 68%,#a21bbb);
  --ticket-button-ink: #6013aa;
}
.order-details { display: grid; align-content: center; gap: 25px; min-width: 0; padding: clamp(19px,3vw,39px); }
.order-heading .minor { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; letter-spacing: .09em; }
.order-heading .minor::before { content: ""; width: 22px; height: 4px; border-radius: 3px; background: var(--order-edge); }
.checkout h2 { margin-top: 6px; font-size: clamp(32px,3.6vw,48px); letter-spacing: -.045em; line-height: 1.07; }
#payment, .access-heading p { margin-top: 8px; font-size: 16px; color: var(--muted); }
.promo-form label, #issued label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; color: var(--ink); font-size: clamp(18px,1.7vw,22px); font-weight: 700; letter-spacing: -.025em; }
.promo-form label small { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.promo-row, .issued-key-row { display: flex; gap: 6px; margin-top: 9px; padding: 5px; background: var(--canvas); border: 1px solid var(--line); border-radius: 16px; }
.promo-row:focus-within, .issued-key-row:focus-within { border-color: var(--focus); box-shadow: 0 0 0 2px var(--focus); }
.promo-row input, .issued-key-row input { min-width: 0; flex: 1; width: 100%; min-height: 48px; padding: 5px 12px; background: transparent; color: var(--ink); font: 600 18px/1.3 Instrument,sans-serif; border: 0; border-radius: 10px; }
.promo-row input:focus-visible, .issued-key-row input:focus-visible { outline: none; }
.promo-row input::placeholder { color: var(--muted); font-weight: 500; opacity: 1; }
.promo-row:has(input[aria-invalid=true]) { border-color: #df574f; }
.promo-row button, #subscribe, .account-actions :is(a,button), .issued-key-row button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px;
  padding: 9px 21px; border: 1px solid transparent; border-radius: 12px; font-size: 16px; font-weight: 700; line-height: 1.25;
  transition: transform .18s ease, filter .18s ease;
}
.promo-row button { color: var(--action-ink,white); background: var(--order-action); }
:is(.promo-row button,#subscribe,.account-actions a,.account-actions button,.issued-key-row button):hover { filter: brightness(1.09); }
#promo-status:not(:empty), #copy-status:not(:empty) { display: block; margin: 9px 2px 0; font-size: 14px; color: var(--ink); }
.purchase { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-width: 0; padding: clamp(23px,3vw,40px); border-radius: 19px; overflow: hidden; background: var(--ticket-bg); color: var(--ticket-ink); }
.purchase::before { content: ""; position: absolute; top: -5%; right: -2%; z-index: -1; width: min(38%,155px); aspect-ratio: 1; background: currentColor; opacity: .085; mask: url("/memberships/radiant-star.webp") center/contain no-repeat; transform: rotate(9deg); pointer-events: none; }
.total { display: grid; justify-items: start; align-content: start; }
.total small { font-size: 18px; font-weight: 650; }
#total { margin: 4px 0 1px; font-size: clamp(49px,4.6vw,67px); font-weight: 700; line-height: 1.04; letter-spacing: -.06em; }
.currency-note { font-size: 13px; font-weight: 550; }
#order-saving { margin-top: 11px; font-size: 15px; font-weight: 650; }
#subscribe { justify-content: space-between; min-height: 52px; border-radius: 13px; font-size: 17px; color: var(--ticket-button-ink); background: var(--ticket-button); }
#subscribe::after { content: "→"; font-size: 22px; line-height: 1; }
#account-status:not(:empty) { grid-column: 1/-1; padding: 13px 18px 7px; font-size: 15px; }
#account-status:empty, #key-info:empty, .account-actions:not(:has(> :not([hidden]))) { display: none; }
.access { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 20px; padding: clamp(21px,3vw,36px); border-color: color-mix(in srgb,#5278ff 52%,var(--line)); background: linear-gradient(110deg,color-mix(in srgb,var(--surface) 92%,#224bff),var(--surface) 75%); }
.access-heading { display: flex; gap: clamp(12px,2vw,22px); align-items: center; min-width: 0; }
.access h2, .toolkits h2 { font-size: clamp(26px,2.7vw,36px); line-height: 1.12; letter-spacing: -.04em; }
.key-tile { flex: none; display: grid; place-items: center; width: clamp(48px,5vw,66px); aspect-ratio: 1; border-radius: 30%; color: white; background: linear-gradient(145deg,#0090ff,#3039f4 68%); box-shadow: inset 0 1px 1px #ffffff70; }
.key-tile i { position: relative; width: 30px; height: 5px; background: currentColor; transform: rotate(-40deg); border-radius: 2px; }
.key-tile i::before { content: ""; position: absolute; left: -1px; top: -8px; width: 18px; height: 18px; border-radius: 50%; border: 4px solid currentColor; background: #2457f6; }
.key-tile i::after { content: ""; position: absolute; right: 0; top: 0; width: 4px; height: 9px; background: currentColor; box-shadow: -6px 0 currentColor; border-radius: 0 0 2px 2px; }
.account-actions { gap: 8px; }
.account-actions :is(a,button), #copy-member-key { color: white; background: #274de8; }
#issued, #key-info, .permanent { grid-column: 1 / -1; min-width: 0; }
#issued { max-width: 750px; width: 100%; }
.issued-key-row input { font: 600 16px/1.4 Consolas,monospace; }
.issued-key-row #show-member-key { color: var(--ink); border-color: var(--line); background: var(--surface); }
#key-info { font-size: 15px; color: var(--ink); }
.permanent { padding-top: 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.permanent strong { color: var(--ink); }
.toolkits { padding: clamp(35px,5vw,62px) 0; }
.toolkit-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 19px; }
.toolkit-columns section { padding: 19px 23px; border-left: 4px solid #3077ff; border-radius: 0 16px 16px 0; background: var(--soft); }
.toolkit-columns section:last-child { border-color: #ab37ff; }
.toolkit-columns h3 { font-size: 20px; letter-spacing: -.025em; }
.toolkit-columns p { margin-top: 5px; color: var(--muted); font-size: 16px; max-width: 52ch; }
.site-footer { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 20px 0 28px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 14px; }
:is(html[data-membership-motion=on], .plans[data-membership-motion=on]) {
  & .hero-art.in-motion .sigil { animation: turn-sigil 6s ease-in-out infinite; }
  & .hero-art.in-motion .sigil-face { animation: foil 4s ease-in-out infinite alternate; }
  & .card { animation: edge-glow 4s ease-in-out infinite alternate; }
  & .cheese { animation-delay: -2s; }
  & .optimizer .emblem { animation: star-flight 5s ease-in-out infinite; }
  & .wind i { animation: slipstream 1.65s linear var(--delay,0s) infinite; }
  & .badge { animation: prize 3.8s ease-in-out infinite; }
  & .bundle .card-head::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg,transparent 30%,#ffffff36 48%,transparent 62%); animation: sweep 4.8s ease-in-out infinite; }
}
  @keyframes turn-sigil { 0%,100% {transform:translate(-50%,-50%) rotate(-7deg) rotateY(-13deg) rotateX(4deg)} 50% {transform:translate(-50%,-53%) rotate(-3deg) rotateY(16deg) rotateX(-5deg)} }
  @keyframes foil { from {background-position:0% 22%} to {background-position:100% 78%} }
@keyframes edge-glow { from { box-shadow: 0 0 0 1px transparent,0 3px 12px transparent; } to { box-shadow: 0 0 0 1px var(--edge),0 3px 16px var(--glow); } }
@keyframes star-flight { 0%,100% { transform: translate(-4%,7%) rotate(-12deg); } 33% { transform: translate(6%,-6%) rotate(-5deg); } 70% { transform: translate(-2%,-2%) rotate(-9deg); } }
@keyframes slipstream { 0% { transform: translateX(11%) scaleX(.55); opacity: 0; } 25% { opacity: .95; } 100% { transform: translateX(-46%) scaleX(1.12); opacity: 0; } }
@keyframes prize { 0%,100% { transform: translateY(1px) rotate(3deg); box-shadow: 0 3px 9px #74470655; } 50% { transform: translateY(-2px) rotate(1deg); box-shadow: 0 2px 14px #ffcc507d; } }
@keyframes audio-level {
  0%, 100% { transform: scaleY(var(--floor, .22)); }
  20% { transform: scaleY(1); }
  43% { transform: scaleY(var(--dip, .46)); }
  68% { transform: scaleY(.85); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-copy { animation: rise-in .48s ease-out both; }

  .emblem { transition: translate .28s ease; }
  .card:hover .emblem, .card:focus-within .emblem { translate: 0 -3px; }
  @keyframes rise-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
}
@keyframes sweep { 0%,18% { transform: translateX(-110%); } 78%,100% { transform: translateX(110%); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :is(html[data-membership-motion=on], .plans[data-membership-motion=on]) :is(.sigil,.sigil-face,.card,.optimizer .emblem,.wind i,.badge) { animation: none; }
  :is(html[data-membership-motion=on], .plans[data-membership-motion=on]) .bundle .card-head::after { animation: none; opacity: 0; }
  .cheese .card-motion i {
    --floor: .56;
    --dip: .70;
    animation-duration: calc(var(--tempo) * 1.8);
  }
  :is(html[data-membership-motion=on], .plans[data-membership-motion=on]) .wind i { animation: gentle-wake 5s ease-in-out var(--delay,0s) infinite alternate; }
  @keyframes gentle-wake { from { opacity: .45; } to { opacity: .85; } }
  *, *::before, *::after { transition: none !important; }
}
@media (max-width: 925px) {
  .plan-head { align-items: flex-start; flex-direction: column; gap: 12px; }
  .terms { text-align: left; }
}
@media (min-width: 701px) and (max-width: 925px) {
  .frame { width: calc(100% - 38px); }
  .card ul, .description { font-size: 13px; }
  #cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .bundle { grid-column: 1 / -1; grid-row: 1; }
  .card:not(.bundle) { margin-top: 0; }
}
@media (max-width: 700px) {
  .masthead nav { min-height: 62px; }
  .identity { gap: 7px; }
  .identity .star { width: 26px; }
  .identity .wordmark { width: 95px; }
  .nav-links { gap: 14px; font-size: 13px; }
  .hero { margin: 16px 0 28px; border-radius: 16px; }
  .hero-copy { width: 80%; padding: 24px 19px; }
  .hero-art { left: 49%; }
  .hero-copy { width: 55%; }
  .hero-desc { max-width: 300px; }
  .plan-head { margin-bottom: 15px; }
  #cards { grid-template-columns: 1fr; gap: 14px; }
  .bundle { grid-row: 1; }
  .card:not(.bundle) { margin-top: 0; }
  .bundle .card-head { height: 157px; }
  .card-head { height: 144px; }
  .card-body { padding: 19px; }
  .description { min-height: 0; }
  .checkout { grid-template-columns: minmax(0,1fr); }
  .order-details { padding: 18px 13px 22px; gap: 19px; }
  .purchase { gap: 17px; }
  .access { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .account-actions { justify-self: start; }
  .issued-key-row { display: grid; grid-template-columns: 1fr 1fr; }
  .issued-key-row input { grid-column: 1/-1; }
  .promo-row button { padding-inline: 16px; }
  .site-footer { flex-wrap: wrap; }
  .toolkit-columns { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .nav-links > a:first-child { display: none; }
  .terms, #period { width: 100%; }
  #period button { font-size: 14px; min-height: 50px; padding: 4px 1px; }
  .access-heading { align-items: flex-start; }
  .access-heading p { font-size: 15px; }
  .account-actions, .account-actions :is(a,button) { width: 100%; }
  .hero { display: flex; flex-direction: column; }
  .hero-copy { width: 100%; padding-bottom: 8px; }
  .hero-art { position: relative; align-self: stretch; order: 1; height: 141px; width: 100%; inset: auto; opacity: 1; }
  .sigil { width: 29%; }
  .hero-desc { max-width: 310px; }
  .rate { margin-top: 14px; }
}
@media (max-width: 370px) {
  .bundle-includes { grid-template-columns: 1fr; }
}

/* Give the bundle a lit edge without tinting its copy or the other plans. */
.card.bundle::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: 0 0 0 1px #ffda65, 0 0 9px #ffc328b0, 0 0 26px #ffab153f, 0 10px 32px #c7860d29;
}
.bundle .badge { overflow: hidden; }
.bundle .badge::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -50%;
  width: 34%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #fffbeacc, transparent);
  transform: skewX(-20deg);
}
#period button { min-height: 64px; }
#period button[data-term="12"] {
  color: #fff;
  border: 1px solid #9369e4;
  background-color: #27123e;
  background-image: radial-gradient(ellipse at 30% 98%, #a232d0 0%, transparent 45%),
    radial-gradient(ellipse at 81% 8%, #7050ff 0%, transparent 42%),
    linear-gradient(112deg,#1d1241 8%,#4e236b 48%,#211433 92%);
  background-size: 160% 180%, 180% 150%, 100% 100%;
  background-position: 0% 40%, 60% 20%, center;
  box-shadow: inset 0 1px #e9d6ff40, 0 2px 7px #45126b35;
}
#period button[data-term="12"] span { color: #f7eaff; }
#period .annual-value { display: block; min-height: 0; margin: 2px 0 0; color: #fff; font: 700 10px/1.12 Instrument,sans-serif; }
#period button[data-term="12"][aria-pressed=true] { border-color: #ffdcff; box-shadow: inset 0 0 0 1px #efc9ff, 0 0 0 2px #703cbb, 0 0 16px #af4ce38a; }
#period button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.key-shortcut { display: inline-block; margin: 14px 0 0 13px; color: #f2edff; font-weight: 650; text-decoration: underline; text-underline-offset: 4px; }
@keyframes bundle-edge-light { from { opacity: .65; } to { opacity: 1; } }
@keyframes ribbon-glint { 0%,52% { left: -50%; } 85%,100% { left: 125%; } }
@keyframes annual-current { to { background-position: 85% 70%, 4% 95%, center; } }
@media (prefers-reduced-motion: no-preference) {
  .bundle .badge::after { animation: ribbon-glint 3.7s ease-in-out infinite; }
  .card.bundle::before { animation: bundle-edge-light 3.6s ease-in-out infinite alternate; }
  #period button[data-term="12"] { animation: annual-current 5s ease-in-out infinite alternate; }
}
@media(max-width:560px) { .key-shortcut { margin-left: 0; display: table; } }

.plan-updates {
  margin: 15px 0 0;
  border-top: 1px solid var(--line);
  padding-top: 11px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
}
.card .compatibility { margin-top: 5px; }
.plan-compact { display: none; }
html:has(main .plans#plans:target), html:has(main #checkout:target) { scroll-padding-top: 90px !important; }
main .plans#plans, main #checkout { scroll-margin-top: 0 !important; }
.bundle-benefits > summary { display: none; }
.bundle-benefits summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 700px) and (max-height: 790px) {
  .bundle-benefits > summary { display: list-item; padding-block: 8px; color: var(--feature-ink); font-size: 14px; font-weight: 650; cursor: pointer; }
}
@media (max-width: 380px) and (max-height: 700px) {
  #cards .card-head { height: 78px; }
  #cards .bundle .card-head { height: 83px; }
  #cards .plan-compact > ul { display: none; }
}
.plan-compact summary { color: var(--accent); cursor: pointer; padding-block: 10px; font-size: 14px; font-weight: 600; }
.plan-compact summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 700px), (min-width: 926px) and (max-height: 900px) {
  .plan-full { display: none; }
  .plan-compact { display: block; }
}
@media (min-width: 926px) and (max-height: 900px) {
  #cards .card-head { height: 89px; }
  #cards .bundle .card-head { height: 100px; }
  .plans #period button { min-height: 50px; }
  .plans .plan-head { margin-bottom: 12px; }
  #cards .bundle-includes li { font-size: 13px; }
  #cards .bundle .price { font-size: 42px; }
  .card .difference { padding-top: 6px; margin-top: 8px; }
}
.optimizer .emblem { max-height: 73%; width: auto; }
.card .description { min-height: 0; }
.card ul { line-height: 1.34; gap: 7px; }
.plan-head > div:first-child { min-width: 0; }
.plan-head > div:first-child p { max-width: 49ch; }
@media (min-width: 926px) and (max-height: 1100px) {
  .card-head { height: 115px; }
  .bundle .card-head { height: 136px; }
  .card-body { padding: 17px 19px; }
  .card .rate { margin-top: 13px; }
  .select-plan { margin-block: 13px; }
}
@media (max-width: 700px) {
  .card-head { height: 100px; }
  .bundle .card-head { height: 115px; }
  .card-body { padding: 16px; }
  .card .rate { margin-top: 10px; }
  .card .select-plan { margin-block: 11px; }
  .card ul { gap: 5px; }
  .bundle-includes { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .bundle-includes h4 { margin-bottom: 7px; }
  .bundle-includes li { font-size: 13px; padding-left: 17px; }
  .bundle-includes li::before { font-size: 13px; top: 2px; }
  .plan-updates { margin-top: 11px; padding-top: 9px; }
}
#key-access { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(16rem,100%),1fr)); gap: .75rem; }
#key-access:empty { display: none; }
#key-access > div { display: grid; gap: .35rem; border-inline-start: 3px solid var(--ink); padding: .3rem .85rem; }
#key-access span { font-variant-numeric: tabular-nums; }