/* Single committed look: night sky over the Invoker's tower. Colors come from the measured orb + grimoire palettes. */
:root {
  --void: #06070d;
  --void-2: #0d0e18;
  --ink: #efe6d6;          /* parchment white */
  --muted: #a098ab;
  --line: rgba(240, 175, 94, 0.2);
  --gold: #f0af5e;         /* grimoire metal, brightest measured */
  --gold-2: #de8839;
  --gold-deep: #994c26;
  --quas: #4fc3ff;
  --wex: #c07bff;
  --exort: #ffa23a;
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --ui: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --step-0: clamp(15px, 0.35vw + 14px, 17px);
  --step-1: clamp(18px, 0.6vw + 15px, 21px);
  --step-3: clamp(30px, 2.4vw + 18px, 48px);
  --step-5: clamp(44px, 6.2vw + 12px, 104px);
}
* { box-sizing: border-box; }
/* moving between pages cross-fades instead of flashing (browsers without view transitions just navigate) */
@view-transition { navigation: auto; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--void); color: var(--ink); font: 400 var(--step-0)/1.6 var(--body); -webkit-font-smoothing: antialiased; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
a { color: inherit; }
h1, h2 { font-family: var(--display); font-weight: 600; letter-spacing: 0.02em; text-wrap: balance; margin: 0; }
.eyebrow { font: 500 12px/1 var(--ui); letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin: 0 0 18px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; background: var(--gold); color: #1a0f08; font: 600 13px var(--ui); border-radius: 6px; }
.skip:focus { top: 12px; }

/* ---------- preloader: the three orbs circling while the page loads ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: 26px;
  background: radial-gradient(60% 60% at 50% 45%, #14121f 0%, var(--void) 70%);
  transition: opacity .4s ease, visibility .4s;
  /* if the scripts never run, it still lets the page through */
  animation: pl-failsafe 0s linear 5s forwards;
}
.preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes pl-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
/* The loader's sigil: rings, an inscribed triangle, three circles and a rune, drawn in gold and turning at
   different speeds while the outer ring fills as the page loads. Every layer moves by transform or opacity alone,
   so the whole thing runs on the GPU while the page loads behind it. */
.pl-sigil { --s: clamp(210px, 62vw, 330px); position: relative; width: var(--s); aspect-ratio: 1; color: var(--gold); }
.pl-sigil > * { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; will-change: transform; }
.pl-glow { border-radius: 50%; will-change: opacity;
  background: radial-gradient(closest-side, rgba(240, 175, 94, 0.16), rgba(240, 175, 94, 0.05) 45%, transparent 72%);
  animation: pl-breathe 4.5s ease-in-out infinite; }
.pl-frame { color: color-mix(in srgb, var(--gold) 85%, transparent); }
.pl-tri { animation: pl-turn 22s linear infinite; }
.pl-petals { color: color-mix(in srgb, var(--gold) 55%, transparent); animation: pl-turn 16s linear infinite reverse; }
.pl-dotted { color: color-mix(in srgb, var(--gold) 70%, transparent); animation: pl-turn 34s linear infinite; }
.pl-rune { color: #ffd9a3; animation: pl-breathe 1.8s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(240, 175, 94, 0.75)); }
@keyframes pl-turn { to { transform: rotate(1turn); } }
@keyframes pl-breathe { 0%, 100% { opacity: .72; transform: scale(.985); } 50% { opacity: 1; transform: scale(1.015); } }
/* the outer ring as the progress: most of the way over the intro, closed by the script once the page is ready */
.pl-track { rotate: -90deg; }
.pl-arc { stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: pl-progress 1.05s cubic-bezier(.3, .6, .35, 1) forwards; }
.preloader.is-complete .pl-arc { animation: none; stroke-dashoffset: 0; transition: stroke-dashoffset .35s ease-out; }
@keyframes pl-progress { to { stroke-dashoffset: 9; } }
@media (prefers-reduced-motion: reduce) {
  .pl-tri, .pl-petals, .pl-dotted, .pl-rune, .pl-glow { animation: none; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 16px 30px; border-radius: 10px;
  font: 600 16px/1.2 var(--ui); letter-spacing: 0.1em; text-transform: uppercase; text-align: center; text-decoration: none;
  border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s, transform .2s;
  position: relative; isolation: isolate; overflow: hidden;
}
/* hover, in the game's UI language: an angled charge sweeps in with a hot leading edge, the frame lights up, and a
   sheen runs across once it lands. The fill is one colour per button (--btn-fill). */
.btn::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; transform: scaleX(0) skewX(-14deg); transform-origin: right center;
  background:
    linear-gradient(90deg, color-mix(in srgb, #fff 55%, var(--btn-fill, var(--gold))) 0 3px, transparent 3px),
    linear-gradient(180deg, color-mix(in srgb, #fff 22%, var(--btn-fill, var(--gold))), var(--btn-fill, var(--gold)) 55%,
                    color-mix(in srgb, #000 16%, var(--btn-fill, var(--gold))));
  box-shadow: 0 0 18px color-mix(in srgb, var(--btn-fill, var(--gold)) 65%, transparent);
  transition: transform .42s cubic-bezier(.2, .8, .25, 1);
}
/* the sheen: a thin diagonal highlight that crosses the button just after the fill arrives */
.btn::after {
  content: ""; position: absolute; top: -50%; bottom: -50%; left: -60%; width: 45%; z-index: -1; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(0) skewX(-14deg);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1.06) skewX(-14deg); transform-origin: left center; }
.btn:hover::after, .btn:focus-visible::after { animation: btn-sheen .55s cubic-bezier(.3, .7, .3, 1) .16s 1; }
.btn:hover, .btn:focus-visible { transform: translateY(-1px); box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--btn-fill, var(--gold)) 85%, transparent); }
.btn:active { transform: translateY(0) scale(.99); }
@keyframes btn-sheen {
  0% { opacity: 0; transform: translateX(0) skewX(-14deg); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translateX(340%) skewX(-14deg); }
}
.btn:disabled::before, .btn[disabled]::before { transform: scaleX(0) skewX(-14deg); }
.btn:disabled::after, .btn[disabled]::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .btn::before { transition: none; }
  .btn:hover::after, .btn:focus-visible::after { animation: none; }
  .btn:hover, .btn:focus-visible, .btn:active { transform: none; }
}

.btn-gold { --btn-fill: #ffd59b; background: var(--gold); color: #1a0f08; }
.btn-gold:hover { background: var(--gold); color: #1a0f08; }
.btn-ghost { --btn-fill: var(--gold); border-color: rgba(239, 230, 214, 0.28); color: var(--ink); background: rgba(6, 7, 13, 0.25); }
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--gold); color: #1a0f08; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 30; display: flex; align-items: center; gap: 28px;
  padding: 18px clamp(18px, 4vw, 56px); transition: background .3s, border-color .3s, padding .3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled { background: rgba(6, 7, 13, 0.86); backdrop-filter: blur(12px); border-bottom-color: var(--line); padding-block: 12px; }
.logo { display: flex; align-items: baseline; gap: 12px; text-decoration: none; margin-right: auto; }
.logo-mark { font: 700 28px/1 var(--display); letter-spacing: 0.02em; }
.logo-mark b { color: var(--gold); font-weight: 700; margin-right: 1px; }
.logo-sub { font: 500 10px/1 var(--ui); letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); }
.links { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.links a { font: 500 13px/1 var(--ui); letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: var(--ink); opacity: 0.82; transition: opacity .2s, color .2s; }
.links a { white-space: nowrap; }
.links a:hover { opacity: 1; color: var(--gold); }
/* five links: tighter between phone and desktop widths, so none wraps */
@media (max-width: 1000px) { .links { gap: 16px; } .links a { font-size: 12px; letter-spacing: 0.1em; } .logo-sub { display: none; } .nav .login { flex: none; } }
.nav .login, .menu-btn { min-height: 44px; padding: 12px 20px; font-size: 14px; letter-spacing: 0.12em; }
.menu-btn { display: none; }
/* story cards: the link to each service, in that orb's colour */
.btn-el { --btn-fill: var(--el, var(--gold)); color: var(--ink); border-color: color-mix(in srgb, var(--el, var(--gold)) 55%, transparent); background: color-mix(in srgb, var(--el, var(--gold)) 12%, transparent); }
.btn-el:hover, .btn-el:focus-visible { color: #0b0c14; border-color: var(--el, var(--gold)); }

/* ---------- hero: full-width wordmark behind the 3D cast, the first beat of the story stage ---------- */
.hero-panel {
  position: absolute; inset: 0 clamp(6px, 0.8vw, 12px); z-index: 0; overflow: hidden; will-change: transform;
  border: 1px solid rgba(240, 175, 94, 0.12); border-top: 0; border-radius: 0 0 22px 22px;
  background: radial-gradient(62% 58% at 50% 64%, #1e1733 0%, #0d0d19 58%, var(--void-2) 100%);
}
.wordmark {
  position: relative; z-index: 1; margin: 0; padding: clamp(84px, 12vh, 124px) clamp(18px, 3.4vw, 56px) 0;
  font: 700 var(--wm, 15vw)/0.8 var(--display); letter-spacing: -0.03em; color: var(--ink);
}
.wm { display: inline-flex; align-items: flex-start; white-space: nowrap; }
.wm .plus { color: var(--gold); }
.wm sup { margin: 0.12em 0 0 0.3em; font: 600 clamp(11px, 1.5vw, 24px)/1 var(--ui); letter-spacing: 0.14em; color: var(--gold); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.step.step-hero { position: relative; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding: 0 clamp(18px, 3.4vw, 56px) clamp(22px, 5vh, 52px); }
.hero-copy { max-width: 25rem; }
.lede { margin: 0 0 24px; font-size: var(--step-1); line-height: 1.5; color: #d9cfc0; text-wrap: pretty; }
.lede strong { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 500; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }
.video-toggle {
  font: 500 12px/1 var(--ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  background: rgba(6,7,13,0.5); border: 1px solid rgba(239,230,214,0.18); border-radius: 999px; padding: 11px 16px; cursor: pointer;
}
.video-toggle:hover { color: var(--ink); }

/* load sequence — plays immediately, never waits on scroll */
.wordmark, .hero-copy, .step-hero .video-toggle { animation: rise 1s cubic-bezier(.2,.7,.2,1) both; }
.hero-copy { animation-delay: .35s; }
.step-hero .video-toggle { animation-delay: .5s; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wordmark, .hero-copy, .step-hero .video-toggle { animation: none; } }

/* ---------- scrollytelling ---------- */
/* overflow-x: clip (not hidden) trims the card scrims' sideways spill without making a scroll container,
   so the sticky stage still pins */
.story { position: relative; background: var(--void); overflow-x: clip; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
/* transparent canvas: the hero panel (wordmark) shows through behind Invoker; later beats sit on the void */
.stage canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .8s ease; }
.story.is-3d .stage canvas { opacity: 1; }
.stage-fade { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,7,13,0) 86%, var(--void) 100%); }
/* fallback when WebGL fails: the Invoker video under the wordmark */
.stage .fallback { position: absolute; inset: 0; display: none; }
.stage .fallback video { display: block; width: 100%; height: 100%; object-fit: cover; }
.stage .fallback::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--void) 0%, rgba(6,7,13,0.55) 40%, rgba(6,7,13,0.35) 100%); }
.story.no-webgl .stage .fallback { display: block; }
.story.no-webgl .hero-panel { background: transparent; }
.beat-rail { position: absolute; right: clamp(14px, 3vw, 40px); top: 50%; transform: translateY(-50%); display: grid; gap: 14px; pointer-events: none; z-index: 3; transition: opacity .5s; }
.story.at-hero .beat-rail { opacity: 0; }   /* the beat list appears once the orbs have come down */
.beat-rail li { list-style: none; display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  font: 500 10px/1 var(--ui); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(239,230,214,0.35); transition: color .3s; }
.beat-rail li::after { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; transition: background .3s, transform .3s; }
.beat-rail li.on { color: var(--c, var(--gold)); }
.beat-rail li.on::after { background: currentColor; transform: scale(1.4); }
.beat-rail ol { margin: 0; padding: 0; display: grid; gap: 14px; }

.steps { position: relative; margin-top: -100vh; margin-top: -100svh; z-index: 2; }
.step { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 12vh clamp(20px, 7vw, 120px); }
.step[data-align="right"] { justify-content: flex-end; padding-right: clamp(90px, 11vw, 180px); }   /* clear of the beat rail */
.step[data-align="left"] { justify-content: flex-start; }
.step[data-align="center"] { justify-content: center; align-items: flex-end; text-align: center; }
.card { position: relative; max-width: 30rem; }
.step[data-align="center"] .card { max-width: 40rem; }
.card::before { /* soft local scrim so copy reads over the glow without a boxed panel */
  content: ""; position: absolute; inset: -4rem -5rem; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(6,7,13,0.78), rgba(6,7,13,0.45) 55%, rgba(6,7,13,0)); }
.card .eyebrow { color: var(--el, var(--gold)); }
.card h2 { font-size: var(--step-3); line-height: 1.08; margin-bottom: 18px; }
.card h2 .el { color: var(--el); }
.card p { margin: 0; color: #d6ccbd; font-size: var(--step-1); line-height: 1.55; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.step[data-align="center"] .chips { justify-content: center; }
.chips li { font: 500 11px/1 var(--ui); letter-spacing: 0.14em; text-transform: uppercase; padding: 8px 11px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--el, var(--gold)) 45%, transparent); color: var(--el, var(--gold)); background: rgba(6,7,13,0.4); }
.step.quas { --el: var(--quas); }
.step.wex { --el: var(--wex); }
.step.exort { --el: var(--exort); }

/* ---------- content sections (functional pass — visual design comes later) ---------- */
.section { position: relative; padding: clamp(72px, 12vh, 140px) clamp(20px, 6vw, 96px); border-top: 1px solid var(--line); background: var(--void); }
.calc, .reviews { background: var(--void-2); }
.wrap { max-width: 1180px; margin: 0 auto; }
.sec-head { max-width: 44rem; margin-bottom: clamp(32px, 5vh, 56px); }
.sec-head-row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.section h2 { font-size: var(--step-3); line-height: 1.1; }
.sec-sub { margin: 14px 0 0; color: var(--muted); font-size: var(--step-1); }

/* calculator: compact form on the left, the grimoire arriving on the right */
/* clip sideways only (no page scroll from the book's overhang); vertical stays visible so the fade below can reach up */
.calc { overflow-x: clip; overflow-y: visible; border-top: 0; background: var(--void-2); }
/* one continuous, eased fade from the story's last frame into the calculator's navy: it ends in exactly the
   calculator's colour at the seam (no dark dip then lighter band), with many stops so the dark ramp doesn't band */
.story + .calc::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 55vh; pointer-events: none;
  background: linear-gradient(180deg, rgba(13, 14, 24, 0) 0%, rgba(13, 14, 24, 0.08) 15%, rgba(13, 14, 24, 0.22) 30%, rgba(13, 14, 24, 0.42) 45%,
    rgba(13, 14, 24, 0.64) 60%, rgba(13, 14, 24, 0.82) 75%, rgba(13, 14, 24, 0.94) 88%, var(--void-2) 100%); }
.calc-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.calc-panel { max-width: 32rem; }
.calc-form { display: grid; gap: 28px; }
.field label { display: block; margin-bottom: 14px; font: 500 12px/1 var(--ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.field-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.field-head label { margin-bottom: 0; }
/* current MMR: one typed box, no spinner arrows */
.mmr-row { display: flex; align-items: center; gap: 18px; }
.mmr-row .hint { margin: 0; }
/* medal icon beside a rank name (media/medals/*.svg, one per medal) */
.rank { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.medal { flex: none; width: 30px; height: 30px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); }
.mmr-box { position: relative; }
.mmr-box input { width: 11rem; padding: 12px 56px 12px 14px; background: var(--void); border: 1px solid rgba(239, 230, 214, 0.2); border-radius: 8px;
  color: var(--ink); font: 600 20px/1 var(--ui); font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; }
.mmr-box input::-webkit-outer-spin-button, .mmr-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mmr-box input:hover { border-color: rgba(240, 175, 94, 0.55); }
.mmr-box input:focus-visible { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(240, 175, 94, 0.18); }
.mmr-box .unit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: 500 11px/1 var(--ui); letter-spacing: 0.18em; color: var(--muted); pointer-events: none; }
/* desired MMR: the one slider, gold fill up to the thumb (--fill is set from JS) */
.goal { margin: 0; display: flex; align-items: center; gap: 12px; }
.goal .hint { margin: 0; }
.goal output { font: 600 24px/1 var(--ui); color: var(--ink); font-variant-numeric: tabular-nums; }
.slider { --fill: 50%; display: block; width: 100%; height: 30px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.slider:disabled { cursor: not-allowed; opacity: 0.45; }
.slider:focus-visible { outline: none; }
.slider::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--gold) var(--fill), rgba(239, 230, 214, 0.14) var(--fill)); }
.slider::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(239, 230, 214, 0.14); }
.slider::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--gold); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--gold);
  border: 4px solid var(--void-2); box-shadow: 0 0 0 1px var(--gold), 0 0 16px rgba(240, 175, 94, 0.55); transition: transform .15s; }
.slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--gold);
  border: 4px solid var(--void-2); box-shadow: 0 0 0 1px var(--gold), 0 0 16px rgba(240, 175, 94, 0.55); transition: transform .15s; }
.slider:hover::-webkit-slider-thumb, .slider:active::-webkit-slider-thumb { transform: scale(1.12); }
.slider:hover::-moz-range-thumb, .slider:active::-moz-range-thumb { transform: scale(1.12); }
.slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--gold), 0 0 0 6px rgba(240, 175, 94, 0.3); }
.slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--gold), 0 0 0 6px rgba(240, 175, 94, 0.3); }
.slider-scale { display: flex; justify-content: space-between; margin-top: 6px; font: 500 11px/1 var(--ui); letter-spacing: 0.12em; color: var(--muted); font-variant-numeric: tabular-nums; }
.types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.types legend { grid-column: 1 / -1; padding: 0 0 14px; font: 500 12px/1 var(--ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.types.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.types[hidden], .opt-details[hidden] { display: none; }
.type { position: relative; display: grid; cursor: pointer; }
.type input { position: absolute; opacity: 0; pointer-events: none; }
.type span { display: grid; align-content: center; gap: 6px; padding: 11px 6px; text-align: center; border: 1px solid rgba(239, 230, 214, 0.2); border-radius: 8px;
  background: var(--void); font: 600 15px/1 var(--ui); color: var(--ink); transition: border-color .2s, color .2s, background .2s; }
.type small { font: 500 11px/1.2 var(--ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.type:hover span { border-color: rgba(240, 175, 94, 0.55); }
.type input:checked + span { border-color: var(--gold); background: rgba(240, 175, 94, 0.1); color: var(--gold); }
.type input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
/* options: a 2-up grid of toggles; ones the chosen rune doesn't include are locked and name the rune that unlocks them */
.opts-set { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 16px; }
.opts-set > legend { padding: 0 0 14px; font: 500 12px/1 var(--ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.opts-set > legend span { margin-left: 8px; letter-spacing: 0.08em; text-transform: none; color: var(--gold); }
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.opt { position: relative; display: grid; cursor: pointer; }
.opt input, .pick input { position: absolute; opacity: 0; pointer-events: none; }
.opt-box { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px;
  border: 1px solid rgba(239, 230, 214, 0.16); border-radius: 8px; background: var(--void); font: 500 13px/1.25 var(--ui); color: var(--ink);
  transition: border-color .2s, background .2s, opacity .2s; }
.opt-text { display: grid; gap: 4px; min-width: 0; }
.opt-text b { font-weight: 500; }
.opt-tick { flex: none; display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid rgba(239, 230, 214, 0.35); border-radius: 4px; transition: background .2s, border-color .2s; }
.opt-tag { font: 600 11px/1 var(--ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.opt-tag:empty { display: none; }
.opt.locked .opt-tag::before { content: "with "; }
.opt:hover .opt-box { border-color: rgba(240, 175, 94, 0.5); }
.opt input:checked + .opt-box { border-color: rgba(240, 175, 94, 0.6); background: rgba(240, 175, 94, 0.08); }
.opt input:checked + .opt-box .opt-tick { background: var(--gold); border-color: var(--gold); }
.opt input:checked + .opt-box .opt-tick::after { content: ""; width: 8px; height: 4px; margin-top: -2px; border: 2px solid #1a0f08; border-top: 0; border-right: 0; transform: rotate(-45deg); }
.opt input:focus-visible + .opt-box, .pick input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.opt.locked { cursor: not-allowed; }
.opt.locked .opt-box { opacity: 0.5; border-style: dashed; }
.opt.locked .opt-tag { color: var(--muted); }
.opt-details { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: rgba(6, 7, 13, 0.5); }
.detail { margin: 0; padding: 0; border: 0; min-width: 0; }
.detail > label, .detail > legend { display: block; padding: 0; margin-bottom: 8px; font: 500 11px/1 var(--ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.detail input[type="text"], .detail select { width: 100%; padding: 11px 12px; background: var(--void); border: 1px solid rgba(239, 230, 214, 0.2); border-radius: 8px;
  color: var(--ink); font: 400 15px/1.2 var(--body); }
.detail input::placeholder { color: #6f6878; }
.detail input:focus-visible, .detail select:focus-visible { border-color: var(--gold); outline: none; }
.detail select option { background: var(--void-2); color: var(--ink); }
.picks { display: flex; flex-wrap: wrap; gap: 6px; }
.pick { position: relative; cursor: pointer; }
.pick span { display: block; padding: 8px 11px; border: 1px solid rgba(239, 230, 214, 0.2); border-radius: 999px; font: 500 12px/1 var(--ui); color: var(--ink); transition: border-color .2s, color .2s, background .2s; }
.pick input:checked + span { border-color: var(--gold); color: var(--gold); background: rgba(240, 175, 94, 0.1); }
.pick small { margin-left: 4px; font-size: 11px; letter-spacing: 0.06em; color: var(--gold); }
@media (max-width: 460px) { .opts { grid-template-columns: 1fr; } }
.sum-nudge { margin: 8px 0 0; font: 500 12px/1.4 var(--ui); letter-spacing: 0.06em; color: var(--gold); }
.sum-nudge:empty { display: none; }
.hint { margin: 10px 0 0; font: 500 12px var(--ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.calc-sum { padding-top: 22px; border-top: 1px solid var(--line); }
.sum-main { margin: 0 0 6px; font: 600 clamp(26px, 2.6vw, 36px)/1.1 var(--display); font-variant-numeric: tabular-nums; }
.sum-main .gain { color: var(--gold); }
.sum-main .dot { color: var(--muted); }
.sum-detail { margin: 0; color: #d6ccbd; font-size: 15px; font-variant-numeric: tabular-nums; }
.calc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.res-note { margin: 0; color: var(--muted); font-size: 14px; }
/* the canvas overhangs its column so the book's orbiting pages aren't clipped; the section clips the rest */
.calc-book { position: relative; min-height: clamp(420px, 62vh, 660px); }
.calc-book canvas { position: absolute; left: -10%; top: -14%; display: block; width: 120%; height: 128%; pointer-events: none; opacity: 0;
  /* feather the edges: the bloom's faint glow reaches the canvas border and would otherwise show as a box */
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }

/* pricing: one card per orb (Quas, Wex, Exort) in the story's colours, framed like the grimoire's panels */
.tiers {
  background:
    radial-gradient(38% 45% at 16% 72%, rgba(79, 195, 255, 0.06), rgba(79, 195, 255, 0) 70%),
    radial-gradient(38% 45% at 50% 62%, rgba(192, 123, 255, 0.07), rgba(192, 123, 255, 0) 70%),
    radial-gradient(38% 45% at 84% 72%, rgba(255, 162, 58, 0.06), rgba(255, 162, 58, 0) 70%),
    var(--void);
}
.tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; padding-top: 14px; }
.tier.quas  { --el: var(--quas);  --el-hi: #defdfd; --el-lo: #01317f; }
.tier.wex   { --el: var(--wex);   --el-hi: #fbd7fd; --el-lo: #270a67; }
.tier.exort { --el: var(--exort); --el-hi: #fdfba7; --el-lo: #8e2404; }
.tier {
  position: relative; isolation: isolate; display: flex; flex-direction: column; padding: 34px 30px 30px; border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--el) 24%, transparent);
  background:
    radial-gradient(120% 55% at 50% 0%, color-mix(in srgb, var(--el) 16%, transparent), transparent 62%),
    linear-gradient(180deg, #10111f 0%, #0a0b14 100%);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s;
}
.tier::before { /* inner hairline frame, with a faint rune hatch in the corner */
  content: ""; position: absolute; inset: 9px; z-index: -1; border-radius: 12px; border: 1px solid rgba(240, 175, 94, 0.09); pointer-events: none;
  background:
    radial-gradient(60% 50% at 100% 100%, color-mix(in srgb, var(--el) 10%, transparent), transparent 70%),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--el) 7%, transparent) 0 1px, transparent 1px 12px);
  -webkit-mask-image: radial-gradient(70% 60% at 100% 100%, #000, transparent 72%); mask-image: radial-gradient(70% 60% at 100% 100%, #000, transparent 72%); }
.tier::after { /* lit top edge in the element's colour */
  content: ""; position: absolute; left: 18%; right: 18%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--el), transparent); }
.tier:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--el) 55%, transparent);
  box-shadow: 0 24px 60px -24px color-mix(in srgb, var(--el) 45%, transparent); }

.tier-head { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; margin-bottom: 24px; min-height: 68px; }
.tier-orb {
  grid-row: span 2; position: relative; width: 68px; height: 68px; border-radius: 50%; transition: transform .35s cubic-bezier(.2,.7,.2,1);
  background: radial-gradient(circle at 36% 32%, var(--el-hi) 0 7%, var(--el) 32%, var(--el-lo) 74%, #05060b 100%);
  box-shadow: 0 0 18px 2px color-mix(in srgb, var(--el) 55%, transparent), 0 0 46px 10px color-mix(in srgb, var(--el) 20%, transparent),
              inset 0 0 12px color-mix(in srgb, var(--el-hi) 40%, transparent);
  transition: box-shadow .35s;
}
.tier-orb::after { /* slow swirl of light across the orb */
  content: ""; position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: screen;
  background: conic-gradient(from 0deg, transparent 0 20%, color-mix(in srgb, var(--el-hi) 55%, transparent) 28%, transparent 40% 68%,
              color-mix(in srgb, var(--el-hi) 35%, transparent) 78%, transparent 88%);
  animation: orb-swirl 7s linear infinite;
}
@keyframes orb-swirl { to { transform: rotate(1turn); } }
.tier:hover .tier-orb { transform: scale(1.06); box-shadow: 0 0 24px 4px color-mix(in srgb, var(--el) 75%, transparent), 0 0 70px 18px color-mix(in srgb, var(--el) 30%, transparent),
                                    inset 0 0 14px color-mix(in srgb, var(--el-hi) 55%, transparent); }
.tier-el { margin: 0; font: 600 12px/1 var(--ui); letter-spacing: 0.26em; text-transform: uppercase; color: var(--el); }
.tier-el i { margin: 0 4px; font-style: normal; color: var(--muted); }
.tier-tag { margin: 7px 0 0; font-size: 14px; line-height: 1.3; color: var(--muted); }

.tier-mmr { margin: 0; font: 700 clamp(44px, 4.4vw, 64px)/1 var(--display); letter-spacing: -0.01em; }
.tier-mmr span { margin-left: 8px; font: 500 12px var(--ui); letter-spacing: 0.24em; color: var(--muted); vertical-align: middle; }
.tier-wins { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 8px 14px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--el, var(--gold)) 30%, transparent); background: color-mix(in srgb, var(--el, var(--gold)) 8%, transparent);
  font: 500 13px/1.2 var(--ui); letter-spacing: 0.04em; color: #d6ccbd; }
.tier-rule { position: relative; height: 1px; margin: 24px 0; background: linear-gradient(90deg, transparent, rgba(240, 175, 94, 0.3), transparent); }
.tier-rule::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; transform: translate(-50%, -50%) rotate(45deg);
  background: #0d0e1a; border: 1px solid var(--gold); }
.tier ul { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; align-content: start; color: #d6ccbd; font-size: 15px; }
.tier li { position: relative; padding-left: 22px; }
.tier li::before { content: ""; position: absolute; left: 1px; top: 0.52em; width: 7px; height: 7px; transform: rotate(45deg);
  background: color-mix(in srgb, var(--el) 75%, transparent); box-shadow: 0 0 8px color-mix(in srgb, var(--el) 60%, transparent); }

.tier-foot { margin-top: auto; display: grid; gap: 16px; }
.tier-price { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; font: 600 46px/1 var(--display); font-variant-numeric: lining-nums; }
.tier-price sup { align-self: flex-start; margin-top: 4px; font: 600 18px/1 var(--ui); color: var(--muted); }
.tier-price small { margin-left: 10px; font: 500 11px var(--ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.tier-price small.from { margin: 0 4px 0 0; }
.tier-btn { --btn-fill: var(--el); color: var(--ink); border-color: color-mix(in srgb, var(--el) 45%, transparent); background: color-mix(in srgb, var(--el) 8%, transparent); }
.tier-btn:hover, .tier-btn:focus-visible { color: #0b0c14; border-color: var(--el); }

.tier.featured { transform: translateY(-10px); border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--el) 55%, transparent); }
.tier.featured:hover { transform: translateY(-16px); }
.tier.featured .tier-btn { --btn-fill: #ffd59b; color: #1a0f08; border-color: var(--gold); background: var(--gold); }
.tier.featured .tier-btn:hover { color: #1a0f08; }
.tier-flag { position: absolute; z-index: 2; top: -13px; left: 50%; transform: translateX(-50%); margin: 0; padding: 7px 14px; border-radius: 99px; white-space: nowrap;
  background: linear-gradient(90deg, var(--gold-2), var(--gold)); color: #1a0f08; font: 600 11px/1 var(--ui); letter-spacing: 0.16em; text-transform: uppercase;
  box-shadow: 0 6px 20px -6px rgba(240, 175, 94, 0.6); }
@media (prefers-reduced-motion: reduce) {
  .tier-orb::after { animation: none; }
  .tier, .tier:hover, .tier.featured, .tier.featured:hover { transform: none; transition: none; }
}

/* member pricing strip */
.member-bar { margin-top: 26px; display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: 14px; border: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(240, 175, 94, 0.08), rgba(240, 175, 94, 0) 60%), #0b0c16; color: #d6ccbd; text-decoration: none;
  transition: border-color .25s; }
.member-bar:hover { border-color: var(--gold); }
.member-seal { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin: 0 4px; border-radius: 6px;
  border: 1px solid rgba(240, 175, 94, 0.5); color: var(--gold); transform: rotate(45deg); }
.member-seal svg { transform: rotate(-45deg); }
.member-bar b { color: var(--ink); font-weight: 500; }
.member-bar .arrow { margin-left: auto; color: var(--gold); transition: transform .25s; }
.member-bar:hover .arrow { transform: translateX(4px); }

/* reviews: a centred headline with the row of cards running underneath */
.reviews { position: relative; overflow: hidden; border-top: 0; background: var(--void-2); }   /* no rule above the reviews headline */
.reviews::before {   /* faint rune hatch, so the backdrop isn't a flat panel */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background: repeating-linear-gradient(135deg, rgba(240, 175, 94, 0.035) 0 1px, transparent 1px 26px);
  -webkit-mask-image: radial-gradient(80% 60% at 50% 55%, #000, transparent 75%); mask-image: radial-gradient(80% 60% at 50% 55%, #000, transparent 75%); }
/* a soft handover from the section above, so the two meet without a seam */
#guide + .reviews::after, .tiers + .reviews::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: clamp(90px, 14vh, 190px); z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--void-2) 0%, rgba(13, 14, 24, 0.55) 55%, transparent 100%); }
.reviews > .wrap { position: relative; z-index: 1; }
/* the orbs, drifting behind the section (js/backdrop.js); the CSS glows above stay as the fallback */
.rev-backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(45% 55% at 12% 30%, rgba(79, 195, 255, 0.07), transparent 70%),
    radial-gradient(45% 55% at 88% 30%, rgba(192, 123, 255, 0.07), transparent 70%),
    radial-gradient(60% 60% at 50% 110%, rgba(255, 162, 58, 0.09), transparent 70%);
  /* fade the whole layer (glows, orbs and all) into the sections above and below */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 86%, transparent 100%); }
.rev-backdrop canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease;
  -webkit-mask-image: radial-gradient(75% 65% at 50% 45%, #000 40%, transparent 100%);
  mask-image: radial-gradient(75% 65% at 50% 45%, #000 40%, transparent 100%); }
.rev-backdrop.is-3d canvas { opacity: 1; }

/* trust strip: the promises under the row */
.trust-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: clamp(30px, 5vh, 52px) 0 0; padding: 22px 0 0;
  border-top: 1px solid rgba(239, 230, 214, 0.1); list-style: none; }
.trust-strip li { display: grid; gap: 4px; justify-items: center; text-align: center; }
.trust-strip b { font: 700 clamp(24px, 2.4vw, 32px)/1 var(--display); color: var(--gold); font-variant-numeric: lining-nums; }
.trust-strip span { font: 500 11px/1.3 var(--ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 700px) { .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; } }
/* the eyebrow gets arrow flourishes either side */
.rev-hero .eyebrow { display: flex; align-items: center; gap: 12px; }
.rev-hero .eyebrow::before, .rev-hero .eyebrow::after { content: "→"; color: color-mix(in srgb, var(--gold) 70%, transparent); }
.rev-hero .eyebrow::after { content: "←"; }
.rev-hero { max-width: 44rem; margin: 0 auto clamp(28px, 4vh, 48px); display: grid; justify-items: center; text-align: center; gap: 18px; }
.rev-hero .eyebrow { margin: 0; }
.rev-hero h2 { font-size: clamp(34px, 4.4vw, 62px); line-height: 1.08; letter-spacing: 0.01em; text-wrap: balance; }
.rev-hero h2 em { font-style: italic; color: var(--gold); }
.rev-lead { margin: 0; max-width: 34rem; color: var(--muted); font-size: var(--step-1); line-height: 1.55; }


/* reviews carousel */
.car-ctrl { display: flex; gap: 8px; }
.rev-row .car-ctrl { position: absolute; inset: 0 -6px; z-index: 2; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.rev-row .car-btn { pointer-events: auto; width: 52px; height: 52px; background: rgba(6, 7, 13, 0.72); backdrop-filter: blur(6px); font-size: 20px; }
@media (max-width: 760px) { .rev-row .car-ctrl { position: static; justify-content: center; margin-top: 18px; } }
.car-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(239, 230, 214, 0.25); background: transparent; color: var(--ink); font-size: 18px; cursor: pointer; transition: border-color .2s, color .2s, opacity .2s; }
.car-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.car-btn:disabled { opacity: 0.3; cursor: default; }
.rev-row { position: relative; }
.rev-track { list-style: none; margin: 28px 0 0; padding: 6px 2px 20px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 36px) / 3); gap: 18px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  /* the row fades at both edges, so it reads as continuing past the frame */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent); }
/* the row is grabbed and thrown; the progress bar below stands in for a scrollbar */
.rev-track { cursor: grab; scrollbar-width: none; }
.rev-track::-webkit-scrollbar { display: none; }
.rev-track.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; }
.rev-track img { -webkit-user-drag: none; user-select: none; }   /* dragging a medal would interrupt the pan */
.rev-track.is-dragging .rev { transition: none; }

.rev.quas { --el: var(--quas); }
.rev.wex { --el: var(--wex); }
.rev.exort { --el: var(--exort); }
.rev { --focus: 0; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 16px; padding: 26px 24px 22px;
  border: 1px solid color-mix(in srgb, var(--el, var(--gold)) calc(22% + var(--focus) * 45%), transparent); border-radius: 16px;
  background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--el, var(--gold)) calc(8% + var(--focus) * 10%), transparent), transparent 62%), var(--void);
  box-shadow: 0 0 calc(var(--focus) * 40px) calc(var(--focus) * -8px) color-mix(in srgb, var(--el, var(--gold)) 55%, transparent);
  transform: translateY(calc(var(--focus) * -6px));
  transition: border-color .3s, box-shadow .3s, transform .3s; }
/* the rank the review ended on, as a crest behind the quote */
.rev-crest { position: absolute; right: -14px; bottom: 34px; width: 132px; height: 132px; z-index: -1; opacity: 0.16; pointer-events: none;
  filter: saturate(1.1) drop-shadow(0 6px 20px rgba(0, 0, 0, 0.6)); transition: opacity .3s; }
.rev:hover .rev-crest { opacity: 0.24; }
.rev-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rev-tags li { padding: 7px 11px; border-radius: 999px; font: 500 11px/1 var(--ui); letter-spacing: 0.06em; color: #d6ccbd;
  border: 1px solid color-mix(in srgb, var(--el, var(--gold)) 28%, transparent); background: color-mix(in srgb, var(--el, var(--gold)) 8%, transparent); }
.rev::after { /* lit top edge, like the package cards */
  content: ""; position: absolute; left: 20%; right: 20%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--el, var(--gold)), transparent); opacity: .7; }
.rev:hover { border-color: color-mix(in srgb, var(--el, var(--gold)) 60%, transparent); }
.rev-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rev-quote { font: 700 56px/0.6 var(--display); color: color-mix(in srgb, var(--el, var(--gold)) 55%, transparent); }
.stars { color: var(--gold); letter-spacing: 3px; font-size: 15px; }
.rev blockquote { flex: 1; margin: 0; color: #e7ddcd; font-size: 17px; font-style: italic; line-height: 1.6; text-wrap: pretty; }
.rev-foot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding-top: 18px; border-top: 1px solid rgba(239, 230, 214, 0.1); }
.rev-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--el, var(--gold)) 45%, transparent);
  background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--el, var(--gold)) 45%, #000), #0b0c14);
  font: 600 16px/1 var(--display); color: var(--ink); }
.rev-id { display: grid; gap: 3px; min-width: 0; }
.rev .who { font: 600 14px/1.2 var(--ui); color: var(--ink); overflow-wrap: anywhere; }
.rev-line { font: 500 12px/1.3 var(--ui); letter-spacing: 0.04em; color: var(--muted); }
.rev-line i { font-style: normal; color: color-mix(in srgb, var(--el, var(--gold)) 80%, transparent); }
.rev-climb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: #d6ccbd; }
.rev-climb .medal { width: 22px; height: 22px; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5)); }
.rev-result { display: grid; justify-items: end; gap: 6px; }
.rev-rank { display: inline-flex; align-items: center; gap: 7px; font: 500 12px/1 var(--ui); letter-spacing: 0.08em; text-transform: uppercase; color: #d6ccbd; }
.rev-rank .medal { width: 26px; height: 26px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); }
.rev .gain { padding: 5px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  font: 600 12px/1 var(--ui); letter-spacing: 0.06em; color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .rev { transition: none; } }

/* blog */
.text-link { display: inline-block; padding-block: 12px; font: 600 15px var(--ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.post a { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid rgba(239, 230, 214, 0.12); border-radius: 14px; background: var(--void-2); text-decoration: none; transition: border-color .2s, transform .2s; }
.post a:hover { border-color: color-mix(in srgb, var(--el) 60%, transparent); transform: translateY(-2px); }
.post-art { aspect-ratio: 16 / 9;
  background: radial-gradient(34% 50% at 50% 55%, color-mix(in srgb, var(--el) 80%, white 20%) 0%, color-mix(in srgb, var(--el) 45%, transparent) 38%, transparent 72%),
              repeating-radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 22px), var(--void); }
.post-body { display: grid; gap: 10px; padding: 22px 22px 26px; }
.post-meta { margin: 0; font: 500 11px var(--ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--el); }
.post h3 { margin: 0; font: 600 20px/1.3 var(--display); color: var(--ink); text-wrap: balance; }
.post .ex { margin: 0; color: var(--muted); font-size: 15px; }

.site-foot { padding: 28px clamp(20px, 6vw, 96px) 36px; border-top: 1px solid var(--line); background: var(--void); }
.site-foot p { max-width: 1180px; margin: 0 auto; font: 400 12px/1.6 var(--ui); letter-spacing: 0.04em; color: var(--muted); }
.site-foot a { color: var(--gold); }

@media (max-width: 900px) {
  .calc-layout, .tier-grid, .post-grid { grid-template-columns: 1fr; }
  .calc-book { min-height: 380px; }
  .tier-grid { gap: 30px; }
  .tier.featured, .tier.featured:hover { transform: none; }
  .rev-track { grid-auto-columns: 86%; }
}

@media (max-width: 760px) {
  .links, .logo-sub { display: none; }
  .menu-btn { display: inline-flex; padding: 11px 14px; }
  .nav.open .links { display: grid; position: absolute; top: 100%; left: 0; right: 0; gap: 0; padding: 8px 18px 16px; background: rgba(6,7,13,0.96); border-bottom: 1px solid var(--line); }
  .nav.open .links a { display: block; padding: 14px 0; }
  .wordmark { padding-top: 84px; }
  .beat-rail { display: none; }
  .step, .step[data-align="left"], .step[data-align="right"] { justify-content: center; align-items: flex-end; text-align: center; padding-bottom: 9vh; }
  .step .chips { justify-content: center; }
  .step.step-hero { flex-direction: column; align-items: stretch; justify-content: flex-end; text-align: left; padding-bottom: 28px;
    background: linear-gradient(0deg, rgba(6, 7, 13, 0.92) 28%, rgba(6, 7, 13, 0) 55%); }
  .step-hero .video-toggle { align-self: flex-start; }
}

/* ---------- service pages (replay analysis = Quas, coaching = Wex, MMR boost = Exort) ---------- */
.el-quas  { --el: var(--quas);  --el-hi: #defdfd; --el-lo: #01317f; }
.el-wex   { --el: var(--wex);   --el-hi: #fbd7fd; --el-lo: #270a67; }
.el-exort { --el: var(--exort); --el-hi: #fdfba7; --el-lo: #8e2404; }
.links a[aria-current="page"] { opacity: 1; color: var(--gold); }

/* page header: copy on the left, the page's orb glowing on the right */
.page-hero { position: relative; overflow: hidden; padding: clamp(128px, 19vh, 190px) clamp(20px, 6vw, 96px) clamp(64px, 10vh, 110px);
  background: radial-gradient(55% 70% at 78% 45%, color-mix(in srgb, var(--el) 15%, transparent), transparent 70%), var(--void); }
.page-hero-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.page-hero .eyebrow { color: var(--el); }
.page-hero h1 { margin-bottom: 22px; font-size: clamp(44px, 6vw, 84px); line-height: 1; }
.page-hero h1 .el { color: var(--el); }
.page-hero .lede { max-width: 34rem; }
.page-hero .chips { margin: 0 0 30px; }
.tier-orb.hero-orb { grid-row: auto; justify-self: center; width: clamp(150px, 20vw, 260px); height: auto; aspect-ratio: 1;
  box-shadow: 0 0 60px 8px color-mix(in srgb, var(--el) 50%, transparent), 0 0 160px 40px color-mix(in srgb, var(--el) 18%, transparent),
              inset 0 0 40px color-mix(in srgb, var(--el-hi) 40%, transparent);
  animation: orb-float 6s ease-in-out infinite; }
@keyframes orb-float { 50% { transform: translateY(-12px); } }
.page-hero + .section { border-top: 1px solid var(--line); }

/* service overview cards: a title instead of an MMR figure */
/* two lines are reserved so the meta line, list and price sit at the same height in every card */
.tier-title { margin: 0; min-height: 2.16em; font: 700 clamp(30px, 2.8vw, 38px)/1.08 var(--display); letter-spacing: 0; display: flex; align-items: flex-start; }
.tier-price small.per { margin-left: 8px; }

/* how it works: three numbered steps */
.how-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.how { padding: 28px 26px; border: 1px solid rgba(239, 230, 214, 0.12); border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--el) 7%, transparent), transparent 60%), var(--void-2); }
.how-num { margin: 0 0 16px; font: 600 12px/1 var(--ui); letter-spacing: 0.24em; text-transform: uppercase; color: var(--el); }
.how h3 { margin: 0 0 10px; font: 600 22px/1.25 var(--display); }
.how p { margin: 0; color: #d6ccbd; font-size: 15px; }
.how .chips { margin-top: 18px; }

/* order note under package cards whose checkout isn't live yet */
.order-note { margin: 20px 0 0; text-align: center; }

/* links to the other two services, at the foot of each service page */
.more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.svc-link { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border: 1px solid color-mix(in srgb, var(--el) 30%, transparent); border-radius: 14px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--el) 10%, transparent), transparent 70%), var(--void-2); text-decoration: none; transition: border-color .2s, transform .2s; }
.svc-link:hover { border-color: var(--el); transform: translateY(-2px); }
.svc-link .tier-orb { grid-row: auto; flex: none; width: 44px; height: 44px; }
.svc-link b { display: block; font: 600 20px/1.2 var(--display); color: var(--ink); }
.svc-link small { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }
.svc-link .arrow { margin-left: auto; color: var(--el); transition: transform .2s; }
.svc-link:hover .arrow { transform: translateX(4px); }

/* story cards on the home page link to their service */
.card .btn { margin-top: 28px; }

@media (prefers-reduced-motion: reduce) { .tier-orb.hero-orb { animation: none; } .svc-link, .svc-link:hover { transform: none; } }
@media (max-width: 900px) {
  .page-hero-in, .how-grid, .more-grid { grid-template-columns: 1fr; }
  .tier-orb.hero-orb { order: -1; justify-self: start; width: 110px; }
}

/* guarantee strip: six short promises under the order panel */
.guarantee { padding-block: clamp(44px, 7vh, 76px); }
.promise-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.promise { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border: 1px solid rgba(239, 230, 214, 0.1); border-radius: 12px; background: var(--void-2); }
.promise b { display: block; font: 600 15px/1.3 var(--ui); letter-spacing: 0.02em; color: var(--ink); }
.promise small { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; line-height: 1.45; }

/* about the service: description beside a "what's included" panel */
.about-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.about-copy p { margin: 0 0 16px; color: #d6ccbd; font-size: var(--step-1); line-height: 1.6; }
.included { padding: 26px 28px; border: 1px solid color-mix(in srgb, var(--el) 28%, transparent); border-radius: 14px; background: var(--void-2); }
.included h3 { margin: 0 0 18px; font: 600 12px/1 var(--ui); letter-spacing: 0.24em; text-transform: uppercase; color: var(--el); }
.included ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; color: #d6ccbd; font-size: 15px; }
.included li { position: relative; padding-left: 22px; }
.included li::before { content: ""; position: absolute; left: 1px; top: 0.52em; width: 7px; height: 7px; transform: rotate(45deg);
  background: color-mix(in srgb, var(--el) 75%, transparent); box-shadow: 0 0 8px color-mix(in srgb, var(--el) 60%, transparent); }

/* pain points + call to action */
.pain { text-align: center; background: radial-gradient(50% 80% at 50% 100%, color-mix(in srgb, var(--el) 14%, transparent), transparent 70%), var(--void); }
.pain .wrap { max-width: 48rem; }
.pain h2 { margin-bottom: 16px; }
.pain .sec-sub { margin: 0 auto 28px; }
.pain-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 30px; padding: 0; list-style: none; }
.pain-list li { padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(239, 230, 214, 0.16); color: #d6ccbd; font: 500 14px/1.2 var(--ui);
  text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--el) 85%, transparent); text-decoration-thickness: 2px; }

/* FAQ accordion */
.faq-list { max-width: 50rem; display: grid; gap: 10px; }
.faq-list details { border: 1px solid rgba(239, 230, 214, 0.12); border-radius: 12px; background: var(--void-2); transition: border-color .2s; }
.faq-list details[open] { border-color: color-mix(in srgb, var(--el, var(--gold)) 40%, transparent); }
.faq-list summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font: 600 16px/1.35 var(--ui); color: var(--ink); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; color: var(--el, var(--gold)); font-size: 22px; line-height: 1; transition: transform .2s; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { margin: 0; padding: 0 22px 20px; color: #d6ccbd; }

/* order panel (replay analysis, coaching): choices on the left, a sticky summary on the right */
.order { background: var(--void-2); }
.order-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.order-fields { display: grid; gap: 28px; min-width: 0; }
.field-set { margin: 0; padding: 0; border: 0; min-width: 0; }
.field-set > legend { padding: 0 0 14px; font: 500 12px/1 var(--ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.field textarea, .field select, .field input[type="text"] { display: block; width: 100%; padding: 11px 12px; background: var(--void); border: 1px solid rgba(239, 230, 214, 0.2); border-radius: 8px;
  color: var(--ink); font: 400 15px/1.5 var(--body); }
.field textarea { min-height: 96px; resize: vertical; }
.field textarea::placeholder, .field input[type="text"]::placeholder { color: #6f6878; }
.field textarea:focus-visible, .field select:focus-visible, .field input[type="text"]:focus-visible { border-color: var(--gold); outline: none; }
.field select option { background: var(--void-2); color: var(--ink); }
.field-note { margin: 8px 0 0; font: 500 12px/1.4 var(--ui); letter-spacing: 0.04em; color: var(--muted); }
.field-note.warn { color: var(--gold); }
.order-sum { position: sticky; top: 96px; display: grid; gap: 16px; padding: 26px 28px; border: 1px solid color-mix(in srgb, var(--el) 30%, transparent); border-radius: 16px;
  background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--el) 12%, transparent), transparent 60%), #0a0b14; }
.order-sum .eyebrow { margin: 0; color: var(--el); }
.order-lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 15px; color: var(--muted); }
.order-lines li { display: flex; justify-content: space-between; gap: 16px; }
.order-lines li span:last-child { color: var(--ink); text-align: right; }
.order-total { margin: 0; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font: 600 clamp(28px, 2.6vw, 36px)/1 var(--display); font-variant-numeric: tabular-nums; }
.order-total small { font: 500 11px var(--ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.order-sum .btn { justify-content: center; }
.order .types { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .promise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-grid, .order-layout { grid-template-columns: 1fr; }
  .order-sum { position: static; }
}
@media (max-width: 560px) { .promise-grid { grid-template-columns: 1fr; } }

/* home: the grimoire's service guide, one row per orb */
.guide-list { display: grid; gap: 10px; }
.guide-list .svc-link { padding: 18px 20px; }
.guide-list .svc-link b { font-size: 18px; }
.guide-foot { margin: 22px 0 0; color: var(--muted); font-size: 15px; }
.guide-foot .text-link { margin-left: 6px; }

/* service page header: the page's orb in 3D; the CSS orb shows until it has loaded (and stays if WebGL can't run) */
.hero-orb3d { position: relative; justify-self: center; width: clamp(280px, 34vw, 500px); aspect-ratio: 1; max-width: 100%; display: grid; place-items: center; }
.hero-orb3d canvas { position: absolute; inset: -12%; width: 124%; height: 124%; display: block; pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
  /* feather the edges: bloom reaches the canvas border and would otherwise show as a box */
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); }
/* while the 3D orb loads only a soft glow shows (no flat circle that then swaps for the real orb); the CSS orb appears
   only if WebGL can't run (js/site.js adds .no-3d) */
.hero-orb3d::before { content: ''; position: absolute; inset: 14%; border-radius: 50%; pointer-events: none; transition: opacity 1.2s ease;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--el) 26%, transparent), color-mix(in srgb, var(--el) 8%, transparent) 55%, transparent); }
.hero-orb3d .hero-orb { opacity: 0; transition: opacity .8s ease; }
.hero-orb3d.no-3d .hero-orb { opacity: 1; }
.hero-orb3d.is-3d canvas { opacity: 1; }
.hero-orb3d.is-3d::before, .hero-orb3d.no-3d::before { opacity: 0; }
.hero-orb3d.is-3d .hero-orb { opacity: 0; }
/* lite (phones and tablets): a still render of the orb, floating, feathered like the canvas */
.orb-still { position: absolute; inset: -12%; width: 124%; height: 124%; max-width: none; object-fit: contain; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
  animation: orb-float 6s ease-in-out infinite; will-change: transform; }
.hero-orb3d.is-still::before, .hero-orb3d.is-still canvas, .hero-orb3d.is-still .hero-orb { display: none; }

/* lite: the story as stills (crossfaded from the page script), the grimoire as a still that rises in */
.stills { display: none; }
.lite .stills { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.lite .stills img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0;
  will-change: opacity, transform; animation: still-drift 9s ease-in-out infinite alternate; }
.lite .stills img:first-child { opacity: 1; }
@keyframes still-drift { from { transform: scale(1); } to { transform: scale(1.035) translateY(-6px); } }
/* the beat stills already carry their framing (a smaller orb, feathered onto the page's dark), so they fill the screen as they are */
/* story copy on desktop: each card fades in with its beat and out as it leaves (index.html toggles .is-shown).
   Scoped to .cards-live, which that script sets, so the cards are never hidden unless it is running. */
.story.cards-live .step:not(.step-hero) .card { opacity: 0; visibility: hidden; translate: 0 40px;
  transition: opacity .35s ease-in, translate .35s ease-in, visibility 0s linear .35s; }
.story.cards-live .step:not(.step-hero) .card.is-above { translate: 0 -30px; }
.story.cards-live .step:not(.step-hero) .card.is-shown { opacity: 1; visibility: visible; translate: 0 0;
  transition: opacity .5s cubic-bezier(.2, .7, .2, 1), translate .5s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
/* phones: the story flows as ordinary sections — Invoker at the top, then each beat's picture with its words under it */
.lite .story .stage { position: relative; height: 84svh; }
.lite .steps { margin-top: 0; }
.lite .step { min-height: 0; display: block; padding: 0 0 clamp(36px, 5vh, 60px); }
.lite .step .card { max-width: none; padding-inline: clamp(20px, 6vw, 40px); }
.lite .step .card::before { display: none; }          /* the scrim belonged to copy sitting over the scene */
.lite .step-hero { min-height: 0; padding: clamp(22px, 3vh, 34px) clamp(20px, 6vw, 40px) clamp(40px, 6vh, 64px); background: none; }
.lite .step .card { padding-top: clamp(18px, 3vh, 30px); }
.lite .stage canvas, .lite .step-hero .video-toggle, .lite .calc-book { display: none; }
/* phones: Invoker stands under the wordmark rather than over it, and the wordmark stays in front */
.lite .wordmark { z-index: 2; }
.lite .stills { top: clamp(96px, 16svh, 132px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 70px); mask-image: linear-gradient(180deg, transparent, #000 70px); }
.lite .stills img { object-position: 50% 0; }
/* phones: the story's copy reads left-aligned, like the opening lines */
.lite .step, .lite .step[data-align] { justify-content: flex-start; text-align: left; }
.lite .step .chips { justify-content: flex-start; }
@media (prefers-reduced-motion: reduce) {
  .orb-still, .lite .stills img { animation: none; }
}
@media (max-width: 900px) {
  .hero-orb3d { order: -1; justify-self: center; width: min(78vw, 320px); margin: -20px 0 -10px; }
  .hero-orb3d .tier-orb.hero-orb { width: 46%; }
}

/* ---------- login and account pages ---------- */
.auth-page { min-height: 100vh; padding: clamp(110px, 16vh, 150px) clamp(20px, 6vw, 96px) clamp(60px, 10vh, 100px);
  background: radial-gradient(50% 50% at 50% 30%, rgba(240, 175, 94, 0.07), transparent 70%), var(--void); }
.auth-card { max-width: 30rem; margin: 0 auto; padding: clamp(28px, 4vw, 40px); border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(180deg, #10111f 0%, #0a0b14 100%); display: grid; gap: 18px; }
.auth-card .eyebrow { margin: 0; }
.auth-card h1 { font-size: clamp(30px, 3.4vw, 40px); line-height: 1.1; }
.auth-sub { margin: 0; color: var(--muted); }
.auth-providers { display: grid; gap: 10px; }
.auth-btn { --btn-fill: var(--gold); gap: 12px; color: var(--ink); border-color: rgba(239, 230, 214, 0.22); background: var(--void); text-transform: none; letter-spacing: 0.04em; font-size: 16px; }
.auth-btn:hover, .auth-btn:focus-visible { color: #1a0f08; border-color: var(--gold); }
.auth-btn svg { flex: none; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.auth-or { margin: 0; display: flex; align-items: center; gap: 12px; color: var(--muted); font: 500 12px/1 var(--ui); letter-spacing: 0.14em; text-transform: uppercase; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-email { display: grid; gap: 10px; }
.auth-email label { font: 500 11px/1 var(--ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.auth-email input, .name-form input { width: 100%; padding: 12px 14px; background: var(--void); border: 1px solid rgba(239, 230, 214, 0.2); border-radius: 8px; color: var(--ink); font: 400 16px/1.2 var(--body); }
.auth-email input:focus-visible, .name-form input:focus-visible { border-color: var(--gold); outline: none; }
.auth-email .btn { justify-content: center; }
.auth-msg { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--gold); }
.auth-msg:empty { min-height: 0; }
.auth-msg.is-error, .account-loading.is-error { color: #ff8a7a; }
.auth-fine { margin: 0; font-size: 13px; color: var(--muted); }

.account .wrap { max-width: 60rem; }
.account-loading { color: var(--muted); }
.account-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.account-avatar { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--line); object-fit: cover; }
.account-who { flex: 1; min-width: 0; }
.account-who .eyebrow { margin-bottom: 10px; }
.account-who h1 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; overflow-wrap: anywhere; }
.account-email { margin: 6px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 40px; }
.account-card { padding: 22px 24px; border: 1px solid rgba(239, 230, 214, 0.12); border-radius: 14px; background: var(--void-2); display: grid; gap: 12px; align-content: start; }
.account-card h2, .account-orders h2 { margin: 0; font: 600 12px/1 var(--ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.member-status { margin: 0; color: #d6ccbd; }
.member-status.is-member { color: var(--gold); }
.name-form { display: flex; gap: 10px; }
.name-form .btn { flex: none; }
.account-orders { display: grid; gap: 16px; }
.order-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.order-list:empty { display: none; }
.order-item { padding: 18px 22px; border: 1px solid color-mix(in srgb, var(--el, var(--gold)) 28%, transparent); border-radius: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--el, var(--gold)) 8%, transparent), transparent 60%), var(--void-2); display: grid; gap: 8px; }
.order-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.order-service { font: 600 18px/1.2 var(--display); color: var(--ink); }
.order-status { padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(239, 230, 214, 0.2); font: 500 11px/1 var(--ui); letter-spacing: 0.1em; text-transform: uppercase; color: #d6ccbd; }
.order-status.is-in_progress, .order-status.is-paid { border-color: var(--el, var(--gold)); color: var(--el, var(--gold)); }
.order-status.is-completed { border-color: #6fd39a; color: #6fd39a; }
.order-status.is-cancelled { opacity: 0.6; }
.order-summary { margin: 0; color: #d6ccbd; }
.order-meta { margin: 0; font-size: 13px; color: var(--muted); }
.order-progress { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--el, var(--gold)) var(--p, 0%), rgba(239, 230, 214, 0.12) var(--p, 0%)); }
.orders-empty { padding: 24px; border: 1px dashed rgba(239, 230, 214, 0.18); border-radius: 12px; display: grid; gap: 16px; }
.orders-empty p { margin: 0; color: var(--muted); }
@media (max-width: 700px) {
  .account-grid { grid-template-columns: 1fr; }
  .account-head .btn { width: 100%; justify-content: center; }
}

/* ======================================================================================================================
   service pages, crafted pass: every section below the header gets the landing page's care (orb light, ornament,
   motion). Scoped to main.svc; --el / --el-hi / --el-lo come from the page's orb (el-quas, el-wex, el-exort).
   ==================================================================================================================== */
.svc .section { border-top: 0; }
/* a lit hairline with a diamond marks where each section begins, instead of a flat rule */
.svc .section:not(.reviews):not(.pain)::before {
  content: ""; position: absolute; top: 0; left: 50%; width: min(620px, 72%); height: 1px; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--el) 45%, transparent), transparent); }
.svc .section:not(.reviews):not(.pain)::after {
  content: ""; position: absolute; top: -4px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; transform: rotate(45deg); pointer-events: none;
  background: var(--void); border: 1px solid color-mix(in srgb, var(--el) 70%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--el) 60%, transparent); }
.svc .section h2 { font-size: clamp(34px, 4.2vw, 58px); line-height: 1.06; }
.svc .sec-head .eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--el); }
.svc .sec-head .eyebrow::before, .svc .sec-head .eyebrow::after { content: ""; width: 30px; height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
.svc .sec-head .eyebrow::after { transform: scaleX(-1); }
.svc .sec-sub { max-width: 40rem; }
.svc :is(.order, .how-it-works, .guarantee, .tiers, .more) .sec-head { margin-inline: auto; text-align: center; }
.svc :is(.order, .how-it-works, .guarantee, .tiers, .more) .sec-sub { margin-inline: auto; }

/* ---------- order / calculator: a framed panel of numbered steps, and a glowing summary ---------- */
.svc .order, .svc .calc { background: radial-gradient(45% 55% at 88% 30%, color-mix(in srgb, var(--el) 9%, transparent), transparent 70%),
  radial-gradient(40% 50% at 8% 90%, color-mix(in srgb, var(--el) 6%, transparent), transparent 70%), var(--void); }
.svc .order-fields, .svc .calc-form {
  position: relative; gap: 0; counter-reset: step; padding: clamp(22px, 3vw, 40px); border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--el) 22%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--el) 6%, #0c0d18), #08090f 70%);
  box-shadow: 0 40px 90px -60px color-mix(in srgb, var(--el) 70%, transparent); }
/* gilded corners */
.svc .order-fields::before, .svc .order-fields::after, .svc .calc-form::before, .svc .calc-form::after {
  content: ""; position: absolute; width: 26px; height: 26px; border: 2px solid var(--gold); opacity: .6; pointer-events: none; }
.svc .order-fields::before, .svc .calc-form::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: 20px; }
.svc .order-fields::after, .svc .calc-form::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: 20px; }
.svc .order-fields > *, .svc .calc-form > * { padding-block: 24px; }
.svc .order-fields > :first-child, .svc .calc-form > :first-child { padding-top: 0; }
.svc .order-fields > :last-child, .svc .calc-form > :last-child { padding-bottom: 0; }
/* the separator is a background line: a border on a fieldset would be drawn through its legend */
.svc .order-fields > * + *, .svc .calc-form > * + * { background: linear-gradient(rgba(239, 230, 214, 0.07), rgba(239, 230, 214, 0.07)) top / 100% 1px no-repeat; }
.svc .calc-form > .calc-actions, .svc .calc-form > .res-note { background: none; padding-top: 0; }
/* each step numbered */
.svc :is(.order-fields, .calc-form) > fieldset > legend::before,
.svc :is(.order-fields, .calc-form) > .field > label::before,
.svc .calc-form > .field > .field-head > label::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  display: inline-grid; place-items: center; min-width: 30px; height: 22px; margin-right: 12px; padding: 0 6px; border-radius: 5px; vertical-align: middle;
  border: 1px solid color-mix(in srgb, var(--el) 50%, transparent); background: color-mix(in srgb, var(--el) 10%, transparent);
  font: 600 11px/1 var(--ui); letter-spacing: 0.08em; color: var(--el); }
.svc :is(.order-fields, .calc-form) .field > label, .svc :is(.order-fields, .calc-form) .field-head > label, .svc :is(.order-fields, .calc-form) fieldset > legend { color: #cfc6d8; }
.svc .type span { gap: 8px; padding: 16px 8px; font-size: 16px; background: rgba(6, 7, 13, 0.6); transition: border-color .2s, color .2s, background .2s, box-shadow .2s; }
.svc .type input:checked + span { color: var(--ink); border-color: var(--el); background: color-mix(in srgb, var(--el) 13%, transparent);
  box-shadow: inset 0 0 0 1px var(--el), 0 12px 30px -18px var(--el); }
.svc .type input:checked + span small { color: var(--el); }

.svc .order-sum { top: 104px; gap: 18px; padding: clamp(24px, 2.6vw, 34px); border-radius: 20px; overflow: hidden;
  border-color: color-mix(in srgb, var(--el) 38%, transparent);
  background: radial-gradient(120% 45% at 50% 0%, color-mix(in srgb, var(--el) 20%, transparent), transparent 62%), linear-gradient(180deg, #0f101d, #08090f);
  box-shadow: 0 40px 90px -45px color-mix(in srgb, var(--el) 65%, transparent); }
.svc .order-sum::before { content: ""; position: absolute; left: 15%; right: 15%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--el), transparent); }
.sum-head { display: flex; align-items: center; gap: 14px; }
.sum-head .tier-orb { grid-row: auto; flex: none; width: 42px; height: 42px; }
.sum-head .eyebrow { margin: 0; font-size: 13px; }
.svc .order-lines li { padding-bottom: 10px; border-bottom: 1px solid rgba(239, 230, 214, 0.06); }
.svc .order-total { padding-top: 8px; border-top: 0; font-size: clamp(34px, 3.2vw, 46px); }
.svc .order-total span { text-shadow: 0 0 28px color-mix(in srgb, var(--el) 55%, transparent); }

/* ---------- how it works: three orb nodes on a line that fills as the section scrolls past ---------- */
.svc .how-it-works { background: radial-gradient(60% 45% at 50% 38%, color-mix(in srgb, var(--el) 7%, transparent), transparent 70%), var(--void); }
.svc .how-grid { --g: clamp(20px, 3vw, 44px); position: relative; gap: var(--g); view-timeline: --how block; }
.svc .how-grid::before, .svc .how-grid::after {
  content: ""; position: absolute; top: 40px; left: calc((100% - 2 * var(--g)) / 6); right: calc((100% - 2 * var(--g)) / 6); height: 2px; margin-top: -1px;
  border-radius: 2px; background: rgba(239, 230, 214, 0.1); pointer-events: none; }
.svc .how-grid::after { background: linear-gradient(90deg, color-mix(in srgb, var(--el) 30%, transparent), var(--el) 50%, color-mix(in srgb, var(--el) 30%, transparent));
  box-shadow: 0 0 14px color-mix(in srgb, var(--el) 70%, transparent); transform-origin: left center; }
@supports (animation-timeline: view()) {
  .svc .how-grid::after { animation: how-fill linear both; animation-timeline: --how; animation-range: entry 60% cover 55%; }
}
@keyframes how-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes how-fill-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.svc .how { position: relative; padding: 0 clamp(4px, 1vw, 14px); border: 0; background: none; text-align: center; }
.svc .how-num {
  position: relative; z-index: 1; display: grid; place-items: center; width: 80px; height: 80px; margin: 0 auto 28px; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, var(--el-hi) 0 6%, var(--el) 32%, var(--el-lo) 74%, #05060b 100%);
  box-shadow: 0 0 22px 3px color-mix(in srgb, var(--el) 55%, transparent), 0 0 60px 14px color-mix(in srgb, var(--el) 18%, transparent);
  font: 700 24px/1 var(--display); letter-spacing: 0; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6); }
.svc .how-num span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.svc .how-num::before { /* a slow dashed ring around each node */
  content: ""; position: absolute; inset: -11px; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--el) 50%, transparent);
  animation: ring-spin 24s linear infinite; }
.svc .how:nth-child(2) .how-num::before { animation-direction: reverse; }
.svc .how h3 { margin-bottom: 12px; font-size: clamp(22px, 1.9vw, 27px); }
.svc .how p:not(.how-num) { max-width: 22rem; margin-inline: auto; color: #cfc6bb; font-size: 16px; line-height: 1.6; }
.svc .how .chips { justify-content: center; }
@keyframes ring-spin { to { transform: rotate(1turn); } }

/* with illustrations (replay analysis): the art stands on the line, the step number is a small seal beneath it */
.svc .how-art { position: relative; z-index: 1; display: block; width: clamp(160px, 16vw, 200px); height: auto; aspect-ratio: 360 / 344; object-fit: contain; margin: 0 auto;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 26px color-mix(in srgb, var(--el) 28%, transparent));
  transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.svc .how:hover .how-art { transform: translateY(-6px) scale(1.03); }
.svc .has-art .how-num { width: 44px; height: 44px; margin: -6px auto 20px; font-size: 15px;
  background: #0a0b14; border: 1px solid color-mix(in srgb, var(--el) 70%, transparent); color: var(--el); text-shadow: none;
  box-shadow: 0 0 18px -2px color-mix(in srgb, var(--el) 70%, transparent); }
.svc .has-art .how-num::before { display: none; }
/* ---------- about: an editorial column, and what's included on an ornate panel ---------- */
.svc .about { overflow: hidden; background: radial-gradient(40% 60% at 78% 50%, color-mix(in srgb, var(--el) 9%, transparent), transparent 70%), var(--void); }
.svc .about-grid { position: relative; align-items: center; }
.svc .about-grid > * { position: relative; z-index: 1; }
.svc .about-copy > p:first-of-type { color: var(--ink); font-size: clamp(20px, 1.7vw, 24px); line-height: 1.55; }
.svc .about-copy > p { max-width: 36rem; }
.about-copy .sec-head .eyebrow { font-size: 12px; line-height: 1; margin-bottom: 18px; }   /* not the body paragraph size */
.svc .included { position: relative; margin: 44px 0 0; padding: 62px clamp(22px, 3vw, 36px) 26px; border-radius: 20px;
  border-color: color-mix(in srgb, var(--el) 34%, transparent);
  background: radial-gradient(90% 40% at 50% 0%, color-mix(in srgb, var(--el) 14%, transparent), transparent 70%), linear-gradient(180deg, #0f101d, #08090f);
  box-shadow: 0 40px 90px -50px color-mix(in srgb, var(--el) 60%, transparent); }
.inc-orb { position: absolute; top: -40px; left: 50%; width: 80px; height: 80px; margin-left: -40px; }
.svc .included h3 { margin-bottom: 14px; text-align: center; font: 600 clamp(22px, 2vw, 28px)/1.2 var(--display); letter-spacing: 0.02em; text-transform: none; color: var(--ink); }
.svc .included ul { gap: 0; }
.svc .included li { padding: 15px 0 15px 40px; border-top: 1px solid rgba(239, 230, 214, 0.08); font-size: 16px; }
.svc .included li::before { left: 3px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: color-mix(in srgb, var(--el) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--el) 60%, transparent); box-shadow: 0 0 12px -2px color-mix(in srgb, var(--el) 60%, transparent); }
.svc .included li::after { content: ""; position: absolute; left: 10px; top: 50%; width: 7px; height: 3px; margin-top: -3px;
  border: 2px solid var(--el); border-top: 0; border-right: 0; transform: rotate(-45deg); }

/* ---------- guarantee: six glass cards in the package cards' language, lit where the cursor is ---------- */
.svc .guarantee { padding-block: clamp(72px, 12vh, 140px); background: radial-gradient(55% 60% at 50% 55%, color-mix(in srgb, var(--el) 7%, transparent), transparent 70%), var(--void); }
.svc .promise-grid { gap: clamp(14px, 1.6vw, 20px); }
.svc .promise { position: relative; isolation: isolate; overflow: hidden; display: block; padding: clamp(26px, 2.8vw, 36px) clamp(22px, 2.4vw, 30px) clamp(28px, 3vw, 38px);
  text-align: left; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--el) 18%, transparent);
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--el) 80%, transparent), transparent) 50% 0 / 70% 1px no-repeat,
    radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--el) 11%, transparent), transparent 60%),
    linear-gradient(180deg, #10111f 0%, #0a0b14 100%);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), border-color .4s, box-shadow .4s; }
.svc .promise::before { /* a soft light that follows the cursor (js/site.js sets --mx / --my) */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--el) 16%, transparent), transparent 70%); }
.svc .promise::after { /* faint rune hatch fading out of the lower right corner */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--el) 9%, transparent) 0 1px, transparent 1px 11px);
  -webkit-mask-image: radial-gradient(60% 70% at 100% 100%, #000, transparent 75%); mask-image: radial-gradient(60% 70% at 100% 100%, #000, transparent 75%); }
.svc .promise > span { display: grid; }
.svc .promise > span::before { /* a lit accent that stretches on hover */
  content: ''; width: 34px; height: 2px; margin-bottom: 20px; border-radius: 2px; background: var(--el);
  box-shadow: 0 0 12px var(--el); transition: width .45s cubic-bezier(.2, .7, .2, 1); }
.svc .promise:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--el) 45%, transparent);
  box-shadow: 0 36px 70px -36px color-mix(in srgb, var(--el) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.svc .promise:hover::before { opacity: 1; }
.svc .promise:hover > span::before { width: 72px; }
.svc .promise b { font: 600 clamp(19px, 1.6vw, 23px)/1.25 var(--display); letter-spacing: 0.01em; }
.svc .promise small { max-width: 22rem; margin-top: 10px; font-size: 15px; line-height: 1.55; }
@media (prefers-reduced-motion: reduce) { .svc .promise, .svc .promise:hover { transform: none; } .svc .promise > span::before { transition: none; } }

/* ---------- packages and reviews ---------- */
.svc .tier-head { grid-template-columns: 1fr; min-height: 0; row-gap: 0; }
.svc .tiers { padding-bottom: clamp(90px, 14vh, 160px); }
.svc .tiers + .reviews::after { display: none; }
.svc .reviews { background: var(--void); }

/* ---------- FAQ: heading and a way forward on the left, the questions on the right ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-side { position: sticky; top: 120px; }
.faq-side .sec-head { margin-bottom: 20px; }
.faq-more { margin: 0 0 28px; max-width: 24rem; color: var(--muted); font-size: var(--step-1); line-height: 1.55; }
.svc .faq { background: radial-gradient(40% 60% at 10% 40%, color-mix(in srgb, var(--el) 7%, transparent), transparent 70%), var(--void); }
.svc .faq-list { max-width: none; gap: 0; counter-reset: faq; border-top: 1px solid rgba(239, 230, 214, 0.1); }
.svc .faq-list details { position: relative; border: 0; border-bottom: 1px solid rgba(239, 230, 214, 0.1); border-radius: 0; background: none; transition: background .3s; }
.svc .faq-list details::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--el);
  box-shadow: 0 0 12px var(--el); transform: scaleY(0); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.svc .faq-list details[open] { background: linear-gradient(90deg, color-mix(in srgb, var(--el) 7%, transparent), transparent 70%); }
.svc .faq-list details[open]::before { transform: scaleY(1); }
.svc .faq-list summary { justify-content: flex-start; gap: 20px; padding: 26px 8px 26px 22px; font: 600 clamp(17px, 1.4vw, 20px)/1.35 var(--ui); transition: color .2s; }
.svc .faq-list summary:hover { color: var(--el); }
.svc .faq-list summary::before { counter-increment: faq; content: counter(faq, decimal-leading-zero); flex: none; min-width: 26px;
  font: 600 12px/1 var(--ui); letter-spacing: 0.16em; color: var(--el); }
.svc .faq-list summary::after { display: grid; place-items: center; width: 36px; height: 36px; margin-left: auto; border-radius: 50%;
  border: 1px solid rgba(239, 230, 214, 0.2); transition: transform .3s, background .3s, color .3s, border-color .3s; }
.svc .faq-list details[open] summary::after { background: var(--el); border-color: var(--el); color: #0b0c14; }
.svc .faq-list details p { padding: 0 64px 26px 68px; font-size: 16px; line-height: 1.65; }
@supports (interpolate-size: allow-keywords) {
  .svc .faq-list { interpolate-size: allow-keywords; }
  .svc .faq-list details::details-content { height: 0; overflow: clip; transition: height .4s cubic-bezier(.2, .7, .2, 1), content-visibility .4s allow-discrete; }
  .svc .faq-list details[open]::details-content { height: auto; }
}

/* ---------- closing call: a huge line, and the pain points struck out ---------- */
.svc .pain { overflow: hidden; padding-block: clamp(110px, 18vh, 200px);
  background: radial-gradient(42% 55% at 50% 50%, color-mix(in srgb, var(--el) 16%, transparent), transparent 72%), var(--void); }
.svc .pain .wrap { position: relative; z-index: 1; max-width: 58rem; }
.svc .pain h2 { margin-bottom: 20px; font-size: clamp(40px, 6.4vw, 88px); line-height: 1.02; }
.svc .pain .sec-sub { max-width: 36rem; margin-bottom: 36px; }
.svc .pain .btn { min-width: min(300px, 100%); min-height: 62px; font-size: 18px; }
.svc .pain-list { margin-bottom: 40px; }
.svc .pain-list li { position: relative; text-decoration: none; background: rgba(6, 7, 13, 0.55); transition: color .4s calc(.5s + var(--i, 0) * .18s); }
.svc .pain-list li::after { content: ""; position: absolute; left: 12px; right: 12px; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px;
  background: var(--el); box-shadow: 0 0 10px var(--el); transform: scaleX(0); transform-origin: left center;
  transition: transform .55s cubic-bezier(.6, 0, .2, 1) calc(.3s + var(--i, 0) * .18s); }
.svc .pain.in .pain-list li { color: var(--muted); }
.svc .pain.in .pain-list li::after { transform: scaleX(1); }
.svc .pain-list li:nth-child(2) { --i: 1; }
.svc .pain-list li:nth-child(3) { --i: 2; }
.svc .pain-list li:nth-child(4) { --i: 3; }
.svc .pain-list li:nth-child(5) { --i: 4; }

/* ---------- the other two services ---------- */
.svc .more { padding-top: clamp(80px, 12vh, 130px); }
.svc .more-grid { gap: 22px; }
.svc .more .svc-link { position: relative; overflow: hidden; gap: clamp(16px, 2vw, 26px); padding: clamp(24px, 3vw, 36px); border-radius: 20px;
  background: radial-gradient(70% 130% at 0% 50%, color-mix(in srgb, var(--el) 16%, transparent), transparent 62%), linear-gradient(180deg, #0f101d, #08090f);
  transition: border-color .3s, transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.svc .more .svc-link::before { content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--el), transparent); }
.svc .more .svc-link .tier-orb { width: clamp(64px, 6vw, 84px); height: clamp(64px, 6vw, 84px); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.svc .more .svc-link b { font-size: clamp(22px, 2vw, 28px); }
.svc .more .svc-link small { margin-top: 6px; font-size: 15px; }
.svc .more .svc-link .arrow { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; font-size: 18px;
  border: 1px solid color-mix(in srgb, var(--el) 45%, transparent); transition: background .3s, color .3s, transform .3s; }
.svc .more .svc-link:hover { transform: translateY(-5px); box-shadow: 0 30px 70px -35px var(--el); }
.svc .more .svc-link:hover .tier-orb { transform: scale(1.08); }
.svc .more .svc-link:hover .arrow { background: var(--el); color: #0b0c14; transform: translateX(4px); }

/* ---------- sections settle in as they arrive (js/site.js adds .rv, then .in) ---------- */
/* They only slide, never fade: text is at full strength the whole time, so a late script (a busy page, a fast
   scroll) can leave it a few pixels low for a moment but never blank. translate, not transform, so hover lifts on
   the same elements still work. */
.rv { translate: 0 28px; }
.rv.in { translate: 0 0; animation: rv-in .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }
.rv.rv-now { animation: none; }
/* an animation rather than a transition, so it never replaces the cards' own hover transitions */
@keyframes rv-in { from { translate: 0 28px; } to { translate: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  .svc .how-num::before { animation: none; }
  .svc .pain-list li, .svc .pain-list li::after { transition: none; }
  .svc .more .svc-link, .svc .more .svc-link:hover { transform: none; }
}
@media (max-width: 900px) {
  .faq-grid { grid-template-columns: 1fr; }
  .faq-side { position: static; }
  .svc .promise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc .included { margin-top: 60px; }
  /* how it works: the line runs down the left, beside each step */
  .svc .how-grid { gap: 36px; }
  .svc .how-grid::before, .svc .how-grid::after { top: 40px; bottom: 40px; left: 39px; right: auto; width: 2px; height: auto; margin: 0; }
  .svc .how-grid::after { background: linear-gradient(180deg, color-mix(in srgb, var(--el) 30%, transparent), var(--el) 50%, color-mix(in srgb, var(--el) 30%, transparent));
    transform-origin: center top; }
  @supports (animation-timeline: view()) { .svc .how-grid::after { animation-name: how-fill-y; } }
  .svc .how { display: grid; grid-template-columns: 80px minmax(0, 1fr); column-gap: 24px; padding: 0; text-align: left; }
  .svc .how > :not(.how-num) { grid-column: 2; }
  .svc .how-num { grid-row: 1 / span 3; margin: 0; }
  .svc .how h3 { margin-top: 14px; }
  .svc .how p:not(.how-num) { margin-inline: 0; }
  .svc .how .chips { justify-content: flex-start; }
  .svc .has-art .how { grid-template-columns: 120px minmax(0, 1fr); }
  .svc .has-art .how-art { grid-row: 1 / span 3; width: 120px; margin: 0; }
  .svc .has-art .how-num { display: none; }
}
@media (max-width: 560px) {
  .svc .promise-grid { grid-template-columns: 1fr; }
  .svc .faq-list summary { padding-left: 14px; gap: 14px; }
  .svc .faq-list details p { padding: 0 16px 22px 54px; }
  .svc .more .svc-link .arrow { width: 40px; height: 40px; }
}

/* ---------- revisions: calmer steps, no orbs in the panels, package cards built around a medallion ---------- */
/* how it works: the step art smaller (the illustrations stay crisp), no numbered orbs; pages without art mark each step
   with a small lit diamond on the line */
.svc .how-art { width: clamp(118px, 11vw, 148px); }
.svc .how-grid.has-art::before, .svc .how-grid.has-art::after { display: none; }   /* the illustrations carry the steps: no connecting line */
.svc .has-art .how-art { margin-bottom: 22px; }
/* each step sits above the line: the scroll-in fade gives every step its own layer, which would otherwise put the line on top */
.svc .how { z-index: 1; }
.svc .has-art .how-num { display: none; }
.svc .how-grid:not(.has-art)::before, .svc .how-grid:not(.has-art)::after { top: 9px; }
.svc .how-grid:not(.has-art) .how-num { width: 18px; height: 18px; margin: 0 auto 30px; border-radius: 3px; rotate: 45deg; font-size: 0;
  background: #0a0b14; border: 1px solid var(--el); box-shadow: 0 0 14px color-mix(in srgb, var(--el) 80%, transparent), inset 0 0 6px color-mix(in srgb, var(--el) 60%, transparent); }
.svc .how-grid:not(.has-art) .how-num::before { display: none; }
.svc .included { padding-top: clamp(28px, 3vw, 36px); }

/* package cards: centred on the count, the list on an inset panel that fills down to the price */
.svc .tier { text-align: center; padding: 34px clamp(20px, 2.2vw, 28px) 28px; }
.svc .tier-head { justify-items: center; margin-bottom: 22px; }
.svc .tier-mmr { display: grid; justify-items: center; gap: 10px; margin: 6px auto 0; font-size: clamp(64px, 5.6vw, 84px); line-height: .9; }
.svc .tier-mmr span { display: block; margin: 0; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--el); }
.svc .tier[data-gain] .tier-mmr { font-size: clamp(44px, 4vw, 56px); }
.svc .tier-wins { align-self: center; margin-top: 18px; }
.svc .tier-rule { margin: 22px 0 18px; }
.svc .tier ul { flex: 1; margin: 0 0 24px; padding: 18px 20px; gap: 12px; text-align: left; border-radius: 12px;
  background: rgba(6, 7, 13, 0.45); border: 1px solid rgba(239, 230, 214, 0.07); }
.svc .tier-foot { gap: 18px; }
.svc .tier-price { justify-content: center; }
.svc .tier-price small:not(.from) { margin-left: 8px; }
@media (max-width: 900px) {
  .svc .has-art .how { grid-template-columns: 100px minmax(0, 1fr); }
  .svc .has-art .how-art { width: 100px; margin: 0; }
  .svc .how-grid:not(.has-art)::before, .svc .how-grid:not(.has-art)::after { left: 8px; top: 9px; bottom: 9px; }
  .svc .how-grid:not(.has-art) .how { grid-template-columns: 18px minmax(0, 1fr); }
  .svc .how-grid:not(.has-art) .how-num { margin: 16px 0 0; }
}

/* ---------- phones: a tighter header, swipeable packages, comfortable tap targets, no zoom on form focus ---------- */
@media (max-width: 760px), (pointer: coarse) {
  .nav.scrolled { background: rgba(6, 7, 13, 0.96); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .rev-row .car-btn { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(6, 7, 13, 0.9); }
}
@media (pointer: coarse) { .slider { height: 44px; } }
@media (max-width: 760px) {
  .logo { padding-block: 8px; }
  .pick span { padding: 13px 15px; }
  /* 16px text in fields stops iPhones zooming the page when one is tapped */
  .field textarea, .field select, .field input[type='text'], .detail input[type='text'], .detail select, .auth-email input, .name-form input { font-size: 16px; }

  /* service page header: the title and main button fit on the first screen */
  .page-hero { padding-top: 92px; padding-bottom: 56px; }
  .hero-orb3d { width: min(58vw, 230px); margin: 0 auto 4px; }
  .page-hero h1 { margin-bottom: 16px; }
  .page-hero .chips { margin-bottom: 24px; }
  .page-hero .cta-row { flex-direction: column; gap: 10px; }
  .page-hero .cta-row .btn { width: 100%; }

  /* packages: a row you swipe through, the next card peeking in (js/site.js centres the featured card and runs the dots) */
  .svc .tier-grid { --pad: clamp(20px, 6vw, 96px); display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 14px;
    margin-inline: calc(-1 * var(--pad)); padding: 22px var(--pad) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
    overscroll-behavior-x: contain; scrollbar-width: none; }
  .svc .tier-grid::-webkit-scrollbar { display: none; }
  .svc .tier { scroll-snap-align: center; }
  .svc .tier:hover, .svc .tier.featured, .svc .tier.featured:hover { transform: none; }
  .tier-dots { display: flex; justify-content: center; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; }
  .tier-dots button { width: 32px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
  .tier-dots button::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: rgba(239, 230, 214, 0.25); transition: background .25s, transform .25s; }
  .tier-dots button[aria-current='true']::before { background: var(--el, var(--gold)); transform: scale(1.35); box-shadow: 0 0 10px var(--el, var(--gold)); }
}
@media (min-width: 761px) { .tier-dots { display: none; } }


/* the intro loader plays when the site is opened or refreshed; moving between pages skips it (flag set in each page's head) */
.seen-intro .preloader { display: none; }

/* ---------- phones: tighter spacing, so sections meet instead of leaving long empty stretches ---------- */
@media (max-width: 760px) {
  /* the story's beats: a beat no longer needs a whole screen to itself */
  .steps .step:not(.step-hero) { min-height: 76svh; padding-block: 7vh; }
  /* …and with no picture of its own (lite), a beat is only as tall as its words */
  .lite .steps .step:not(.step-hero) { min-height: 0; padding-block: 0 clamp(34px, 5vh, 56px); }
  .section { padding-block: clamp(48px, 7vh, 84px); }
  .sec-head { margin-bottom: 26px; }
  .svc .guarantee { padding-block: clamp(48px, 7vh, 84px); }
  .svc .pain { padding-block: clamp(64px, 9vh, 110px); }
  .svc .tiers { padding-bottom: clamp(56px, 8vh, 90px); }
  .svc .more { padding-top: clamp(52px, 7vh, 88px); }
  .calc-book { min-height: 300px; }
  .about-grid, .order-layout, .calc-layout { gap: 28px; }
}

/* ---------- checkout: confirm the order carried over from the service page, then on to Discord ---------- */
.checkout-page .co-card { max-width: 34rem; }
.co-card[hidden] { display: none; }
.co-sum:not([class*="el-"]) { --el: var(--gold); }
.co-sum { position: static; padding: 22px 22px 18px; }
.co-sum .order-lines li span:last-child { overflow-wrap: anywhere; }
.co-edit { justify-self: start; font: 500 12px/1 var(--ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.co-edit:hover, .co-edit:focus-visible { color: var(--ink); }
.co-opt { margin-left: 6px; letter-spacing: 0.1em; text-transform: none; color: #6f6878; }
.auth-email textarea { width: 100%; min-height: 84px; resize: vertical; padding: 12px 14px; background: var(--void); border: 1px solid rgba(239, 230, 214, 0.2);
  border-radius: 8px; color: var(--ink); font: 400 16px/1.4 var(--body); }
.auth-email textarea:focus-visible { border-color: var(--gold); outline: none; }
.auth-email .field-note { margin: 0; }
.co-links { display: flex; flex-wrap: wrap; gap: 10px; }
.co-ref { margin: 0; color: var(--muted); }
.co-ref b { display: block; margin-top: 6px; font: 600 clamp(26px, 3vw, 34px)/1 var(--display); letter-spacing: 0.06em; color: var(--gold); }
.co-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; counter-reset: co; }
.co-steps li { position: relative; display: grid; gap: 6px; padding-left: 44px; counter-increment: co; }
.co-steps li::before { content: counter(co); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); border-radius: 50%; font: 600 14px/1 var(--ui); color: var(--gold); }
.co-steps b { color: var(--ink); font-weight: 600; }
.co-steps span { color: var(--muted); font-size: 15px; }
.co-steps .btn { justify-self: start; margin-top: 6px; }
.co-discord[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
.checkout-page h1:focus { outline: none; }

/* ---------- footer: service and legal links, the storage note and the Valve notice (written by scripts/build.mjs) ---------- */
.site-foot .foot-in { max-width: 1180px; margin: 0 auto; display: grid; gap: 10px; }
.site-foot p { margin: 0; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-bottom: 8px; }
.foot-nav ul { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0; padding: 0; list-style: none; }
.foot-nav a { display: inline-block; padding-block: 12px; font: 500 12px/1 var(--ui); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: var(--ink); opacity: 0.82; }
.foot-nav a:hover, .foot-nav a:focus-visible, .foot-nav a[aria-current="page"] { opacity: 1; color: var(--gold); }

/* ---------- phones: the page's main action in a bar along the bottom (hidden while the page's own button or form is on screen) ---------- */
.sticky-cta { display: none; }
@media (max-width: 760px) {
  .sticky-cta { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: block;
    padding: 10px clamp(20px, 6vw, 96px) calc(10px + env(safe-area-inset-bottom));
    background: rgba(6, 7, 13, 0.94); border-top: 1px solid var(--line); transition: transform .3s ease, visibility .3s; }
  .sticky-cta .btn { width: 100%; justify-content: center; }
  .sticky-cta.is-hidden { transform: translateY(110%); visibility: hidden; }
  /* room under the footer, so the bar never sits on top of its last line */
  body:has(.sticky-cta) .site-foot { padding-bottom: calc(36px + 68px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }

/* ---------- live chat: a Discord button in the corner, above the phone bar ---------- */
.chat-fab { position: fixed; z-index: 31; right: clamp(14px, 2vw, 28px); bottom: calc(clamp(14px, 2vw, 28px) + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px 0 14px; border: 1px solid rgba(240, 175, 94, 0.45); border-radius: 999px;
  background: #5865f2; color: #fff; text-decoration: none; font: 600 13px/1 var(--ui); letter-spacing: 0.08em; text-transform: uppercase;
  box-shadow: 0 14px 34px -14px rgba(88, 101, 242, 0.9); transition: transform .2s, box-shadow .2s; }
.chat-fab:hover, .chat-fab:focus-visible { transform: translateY(-2px); box-shadow: 0 18px 40px -14px rgba(88, 101, 242, 1); }
.chat-fab:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 760px) {
  .chat-fab { width: 52px; padding: 0; justify-content: center; }
  .chat-fab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body:has(.sticky-cta) .chat-fab { bottom: calc(80px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .chat-fab, .chat-fab:hover { transition: none; transform: none; } }

/* ---------- pages of reading: privacy, terms, contact, careers ---------- */
.doc-page { max-width: 46rem; margin: 0 auto; padding: clamp(110px, 16vh, 150px) clamp(20px, 6vw, 40px) clamp(60px, 10vh, 100px); }
.doc-head { margin-bottom: clamp(28px, 5vh, 48px); }
.doc-head h1 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08; margin-bottom: 18px; }
.doc-head .lede { margin-bottom: 0; }
.doc-head .cta-row { margin-top: 26px; }
.doc-date { margin: 0 0 16px; font: 500 12px/1 var(--ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.doc-section { padding-block: 26px; border-top: 1px solid var(--line); }
.doc-section h2 { font-size: clamp(22px, 2.4vw, 28px); margin-bottom: 14px; }
.doc-section p, .doc-section li, .doc-section dd { color: #d9cfc0; }
.doc-section p { margin: 0 0 14px; }
.doc-section p:last-child { margin-bottom: 0; }
.doc-section a:not(.btn) { color: var(--gold); }
.doc-section ul:not(.doc-cards):not(.picks) { margin: 0 0 14px; padding-left: 1.2em; display: grid; gap: 8px; }
.doc-section b { color: var(--ink); font-weight: 600; }
.doc-list { margin: 0 0 14px; display: grid; gap: 6px; }
.doc-list dt { font: 600 15px/1.3 var(--ui); letter-spacing: 0.04em; color: var(--ink); margin-top: 10px; }
.doc-list dd { margin: 0; }
.doc-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.doc-cards li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 4px 16px; align-items: start; padding: 18px; border: 1px solid color-mix(in srgb, var(--el) 30%, transparent);
  border-radius: 14px; background: color-mix(in srgb, var(--el) 6%, transparent); }
.doc-cards .tier-orb { grid-row: span 2; width: 42px; height: 42px; }
.doc-cards b { font: 600 16px/1.3 var(--ui); letter-spacing: 0.04em; }
.doc-cards span:not(.tier-orb) { color: #d9cfc0; font-size: 15px; }
.err-links { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 4px 0 0; padding: 0; list-style: none; }
.err-links a { display: inline-block; padding-block: 12px; color: var(--gold); font: 500 13px/1 var(--ui); letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- careers: the application form ---------- */
.apply-form { display: grid; gap: 22px; }
.apply-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 560px) { .apply-row { grid-template-columns: 1fr; } }
.field input[type="email"], .field input[type="url"], .field input[type="number"] { display: block; width: 100%; padding: 11px 12px; background: var(--void);
  border: 1px solid rgba(239, 230, 214, 0.2); border-radius: 8px; color: var(--ink); font: 400 16px/1.3 var(--body); }
.field input[type="email"]:focus-visible, .field input[type="url"]:focus-visible, .field input[type="number"]:focus-visible { border-color: var(--gold); outline: none; }
.field input::placeholder { color: #6f6878; }
.apply-form .field label { margin-bottom: 10px; }
.apply-form .btn { justify-self: start; }
.apply-done h3 { margin: 0 0 10px; font: 600 24px/1.2 var(--display); color: var(--gold); }
.apply-done h3:focus { outline: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- form states: errors tied to their fields, a summary on top, a busy button ---------- */
.form-errors { padding: 14px 16px; border: 1px solid #ff8a7a; border-left-width: 4px; border-radius: 10px; background: rgba(255, 138, 122, 0.08); color: var(--ink); font-size: 15px; }
.form-errors[hidden] { display: none; }
.form-errors:focus { outline: 2px solid #ff8a7a; outline-offset: 2px; }
.form-errors p { margin: 0 0 6px; font-weight: 500; }
.form-errors p:only-child { margin: 0; }
.form-errors ul { margin: 0; padding-left: 1.2em; }
.form-errors a { color: #ffb4a8; }
.field-error { margin: 8px 0 0; font: 500 13px/1.4 var(--ui); color: #ff8a7a; }
.field-error::before { content: "! "; font-weight: 700; }
:is(input, select, textarea)[aria-invalid="true"] { border-color: #ff8a7a !important; box-shadow: 0 0 0 1px #ff8a7a; }
.field-set:has([aria-invalid="true"]) .pick span { border-color: rgba(255, 138, 122, 0.6); }
.text-btn { padding: 0; border: 0; background: none; color: var(--gold); font: inherit; text-decoration: underline; cursor: pointer; }
.spinner { display: inline-block; width: 1em; height: 1em; margin-right: 10px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  vertical-align: -0.15em; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }

/* ---------- phones: the calculator's price stays in view beside the slider while you set your goal ---------- */
@media (max-width: 760px) {
  .svc .calc-form > .calc-sum { position: sticky; z-index: 5; bottom: 0; margin-inline: calc(-1 * clamp(22px, 3vw, 40px)); padding: 14px clamp(22px, 3vw, 40px) calc(14px + env(safe-area-inset-bottom));
    background: rgba(12, 13, 24, 0.96); border-top: 1px solid color-mix(in srgb, var(--el) 40%, transparent); box-shadow: 0 -18px 30px -18px rgba(0, 0, 0, 0.8); }
  .svc .calc-form > .calc-sum .sum-main { font-size: 26px; }
}