/* ═══════════════════════════════════════════════════════════
   TIERS.CSS, 1 November 2026
   The two passes (Academy and Network), the pack shelf and the
   compare table. Shared by academy.html, network.html and index.html.
   Tokens come from style.css :root. Motion is transform and opacity
   only; tiers.js drives the pass tilt and the phone shelf.
   ═══════════════════════════════════════════════════════════ */

/* ── PRICES ── set once here, 1 November 2026 (rounds nine and eleven).
   Every price on the site reads these four variables through
   <span data-price="academy"></span> (amount and period together) or
   data-price="academy-amount" / "academy-per" (the hero chips), and the
   same for "network". A change here changes every page.
   The Academy price, \00A3 349 a year, was confirmed by Uriel on 2 November 2026.
   \00A3 is the pound sign, written as an escape so the file stays ASCII. */
:root {
  --price-academy-amount: "\00A3 349";   /* confirmed by Uriel, 2 Nov 2026 */
  --price-academy-per: "/ year";
  --price-network-amount: "\00A3 95";
  --price-network-per: "/ month";
}
[data-price="academy"]::before { content: var(--price-academy-amount) " " var(--price-academy-per); }
[data-price="network"]::before { content: var(--price-network-amount) " " var(--price-network-per); }
[data-price="academy-amount"]::before { content: var(--price-academy-amount); }
[data-price="academy-per"]::before { content: var(--price-academy-per); }
[data-price="network-amount"]::before { content: var(--price-network-amount); }
[data-price="network-per"]::before { content: var(--price-network-per); }

/* the price label in the heroes (round twelve): a small, quiet glass label,
   numerals about 30px, a small "/ month" beside them */
.price-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 9px 16px 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: 0 10px 24px rgba(49, 27, 66, 0.08), inset 0 1px 0 #fff; -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); color: var(--ink); }
.price-chip-amt { font-family: var(--ff-display); font-size: clamp(28px, 2.4vw, 34px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: lining-nums; }
.price-chip-per { font-size: 13px; font-weight: 500; letter-spacing: 0.02em; opacity: 0.6; }

/* ── THE NETWORK LOGO ── round sixteen: no metal plate, just the thin
   rounded frame, the star and NETWORK (Michroma, outlined), written inline by
   _build/tier-logos-build.py. Aubergine on light grounds (.nl--ink), Mint on
   dark (.nl--mint). A light sweep runs through the frame stroke and the
   letters every few seconds, and a second highlight follows the pointer
   (tiers.js writes --px and tilts it like the passes). Paused off screen,
   still with reduced motion. */
.nl { --rx: 0deg; --ry: 0deg; --px: 0; --py: 0; position: relative; width: 100%; transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)); will-change: transform; }
.nl svg { display: block; width: 100%; height: auto; overflow: visible; }
.nl-sweep { animation: nlSweep 5.5s cubic-bezier(0.45, 0, 0.25, 1) 0.8s infinite; }
@keyframes nlSweep { 0% { transform: translateX(0); } 55%, 100% { transform: translateX(1150px); } }
.nl-point { opacity: 0.55; transform: translateX(calc(var(--px) * 900px)); transition: opacity 300ms ease; }
.nl.is-off .nl-sweep { animation-play-state: paused; }
@media (hover: none) { .nl-point { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .nl-sweep { animation: none; opacity: 0; }
  .nl-point { opacity: 0; }
  .nl { transform: none; }
}
/* the Academy logo, the same scale as the plate in the heroes */
.tier-mark { display: block; height: auto; }

/* ── TICK LIST ── round twenty: the shared "what you get" list, small Mint
   ticks, Halenoir Medium. Used in the network.html hero (.net-list, flowing
   down two columns) and the academy.html membership block. */
@font-face { font-family: 'Halenoir'; src: url('halenoir-medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
.tick-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, max-content); gap: 12px 26px; }
.tick-list li { position: relative; padding-left: 30px; font-family: var(--ff-display); font-weight: 500; font-size: 15px; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); }
.tick-list li::before { content: ''; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23311B42' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.net-list { margin-top: 4px; grid-template-rows: repeat(2, auto); grid-auto-flow: column; }
@media (max-width: 1180px) { .net-list { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; } }
@media (max-width: 560px) { .tick-list { grid-template-columns: 1fr; } }

/* ── THE PASS ──
   A card object at wallet pass proportions. The Academy pass is light
   glass, open. The Network pass is aubergine with the URAL star, members
   only. tiers.js writes --rx --ry (tilt), --sx (sheen) and --px --py
   (parallax, -0.5 to 0.5) on the .pass-wrap, so every layer inside can
   read them. */
.pass-wrap { --rx: 0deg; --ry: 0deg; --sx: 0%; --px: 0; --py: 0; }
.pass {
  position: relative;
  width: 100%;
  aspect-ratio: 86 / 54;
  border-radius: 22px;
  padding: 7% 7.5% 6.5%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  isolation: isolate;
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
  will-change: transform;
  container-type: inline-size;
}
.pass-wrap { position: relative; }
.pass-float { animation: passFloat 8s ease-in-out infinite alternate; }
@keyframes passFloat { from { transform: translateY(0); } to { transform: translateY(-10px); } }

/* the sheen: a soft band of light that follows the pointer */
.pass-sheen {
  position: absolute;
  inset: -40% -60%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.55) 47%, rgba(122, 191, 171, 0.25) 52%, transparent 62%);
  transform: translateX(calc(var(--sx) - 16%));
  mix-blend-mode: soft-light;
  opacity: 0.9;
}
.pass > :not(.pass-sheen):not(.pass-star):not(.pass-guilloche):not(.pass-fx) { position: relative; z-index: 2; }

.pass-top, .pass-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.pass-brand {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: max(13px, 4.6cqi);
  letter-spacing: -0.02em;
  line-height: 1;
}
/* the URAL logo, the brand kit master as a mask so each card colours it:
   aubergine on the Academy, mint on the Network, light on the pack covers */
.pass-logo, .pack-logo {
  display: inline-block;
  aspect-ratio: 520 / 244;
  background: currentColor;
  -webkit-mask: url('work/academy/ural-logo-mask.png') left center / contain no-repeat;
  mask: url('work/academy/ural-logo-mask.png') left center / contain no-repeat;
}
.pass-logo { height: max(11px, 4.4cqi); vertical-align: middle; }
.pass-brand { display: inline-flex; align-items: center; }
.pass--academy .pass-logo { background: var(--ink); }
.pass--network .pass-logo { background: var(--mint); }
.pack-logo { height: max(10px, 12cqi); background: #e0e7e7; }
.pass-kind, .pass-k {
  font-size: max(9px, 2.5cqi);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.3;
}
.pass-kind { text-align: right; }
.pass-name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: max(30px, 13.5cqi);
  letter-spacing: -0.045em;
  line-height: 0.9;
}
.pass-foot > div { display: flex; flex-direction: column; gap: 4px; }
.pass-foot > div:last-child { text-align: right; }
.pass-k { opacity: 0.55; }
.pass-v { font-size: max(12px, 3.5cqi); font-weight: 500; letter-spacing: 0.01em; line-height: 1.2; }

/* Academy: the standard card beside the premium one. Rebuilt 1 November
   2026 (feedback rounds two and three). A soft pearl glass with a faint
   mint film, a light blind dot emboss, a plain rim, a gentle spot of light
   and the sheen. No star: the URAL star is the Network's mark only. Same
   tilt and drift system as the Network pass, with less travel and less
   depth. No backdrop blur, it sits on a flat ground. */
.pass--academy {
  color: var(--ink);
  background:
    radial-gradient(110% 90% at 100% 0%, rgba(122, 191, 171, 0.26), transparent 58%),
    radial-gradient(90% 80% at 0% 100%, rgba(255, 255, 255, 0.9), transparent 70%),
    linear-gradient(150deg, #f7faf9 0%, #edf3f1 55%, #e4ecea 100%);
  box-shadow:
    0 22px 50px rgba(49, 27, 66, 0.11),
    0 6px 14px rgba(49, 27, 66, 0.05),
    inset 0 1px 0 #fff;
}
.pass--academy::before {
  /* a plain rim, same gradient as .glass-card */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(49, 27, 66, 0.22), rgba(224, 231, 231, 0.1) 40%, rgba(122, 191, 171, 0.6));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}
.pass--academy .pass-name { color: var(--ink); }
.pass--academy .pass-dot { color: var(--mint); }

/* a faint mint film that slides against the tilt */
.pass-pearl { inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; }
.pass-pearl i {
  position: absolute;
  left: -60%;
  top: -60%;
  width: 220%;
  height: 220%;
  background: linear-gradient(118deg,
    transparent 28%,
    rgba(122, 191, 171, 0.16) 40%,
    rgba(170, 222, 230, 0.14) 48%,
    rgba(122, 191, 171, 0.16) 56%,
    transparent 68%);
  transform: translate3d(calc(var(--px) * -26%), calc(var(--py) * -10%), 0);
}

/* a light blind emboss: an even field of small dots, fading from the
   right, the same mask twice (shadow down and right, light up and left) */
.pass-emb { inset: 0; z-index: 1; }
.pass-emb i {
  position: absolute;
  inset: 0;
  -webkit-mask:
    radial-gradient(circle, #000 1.1px, transparent 1.6px) 0 0 / 13px 13px,
    linear-gradient(100deg, transparent 30%, #000 85%);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle, #000 1.1px, transparent 1.6px) 0 0 / 13px 13px,
    linear-gradient(100deg, transparent 30%, #000 85%);
  mask-composite: intersect;
}
.pass-emb i:first-child {
  background: rgba(49, 27, 66, 0.12);
  transform: translate3d(0.6px, 0.6px, 0);
}
.pass-emb i:last-child {
  background: rgba(255, 255, 255, 0.9);
  transform: translate3d(-0.6px, -0.6px, 0);
}

/* a soft spot of light that rides the tilt */
.pass-spec {
  z-index: 1;
  left: 10%;
  top: -30%;
  width: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.6;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.15) 55%, transparent);
  transform: translate3d(calc(var(--px) * 60%), calc(var(--py) * 40%), 0);
}
.pass--academy .pass-sheen {
  mix-blend-mode: normal;
  opacity: 0.5;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.55) 49%, transparent 58%);
  transform: translate3d(calc(var(--sx) * 1.2 - 16%), 0, 0);
}

/* depth: the type sits a little above the card, less than the Network */
.pass--academy .pass-top,
.pass--academy .pass-name,
.pass--academy .pass-foot { transform: translate3d(calc(var(--px) * 3px), calc(var(--py) * 2px), 0); }
.pass-shadow--soft { background: radial-gradient(closest-side, rgba(49, 27, 66, 0.2), rgba(49, 27, 66, 0.06) 60%, transparent); }

/* Network: members only */
.pass--network {
  color: #e0e7e7;
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(122, 191, 171, 0.32), transparent 62%),
    radial-gradient(70% 70% at 0% 100%, rgba(122, 191, 171, 0.12), transparent 70%),
    linear-gradient(150deg, #43265a 0%, #311B42 48%, #28163a 100%);
  box-shadow:
    0 34px 80px rgba(49, 27, 66, 0.34),
    0 10px 24px rgba(49, 27, 66, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.pass--network::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(122, 191, 171, 0.9), rgba(122, 191, 171, 0.05) 45%, rgba(224, 231, 231, 0.5));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}
/* the engraving: a guilloche rosette radiating from the star, built by
   _build/guilloche-build.py. The SVG fades itself out from the star, so
   it is the mask on its own. Also used on the apply panel. */
.pass-guilloche {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(122, 191, 171, 0.3);
  -webkit-mask: url('work/academy/network-guilloche.svg') center / cover no-repeat;
  mask: url('work/academy/network-guilloche.svg') center / cover no-repeat;
}
/* the URAL star, recoloured mint through a mask of the brand kit file */
.pass-star {
  position: absolute;
  z-index: 1;
  right: -6%;
  bottom: -14%;
  width: 52%;
  aspect-ratio: 475 / 493;
  background: var(--mint);
  opacity: 0.2;
  -webkit-mask: url('work/ring/star-full.png') center / contain no-repeat;
  mask: url('work/ring/star-full.png') center / contain no-repeat;
  pointer-events: none;
}
.pass-star-sm {
  display: inline-block;
  width: max(14px, 4.6cqi);
  aspect-ratio: 475 / 493;
  background: var(--mint);
  -webkit-mask: url('work/ring/star-full.png') center / contain no-repeat;
  mask: url('work/ring/star-full.png') center / contain no-repeat;
  vertical-align: -0.12em;
  margin-left: 0.3em;
}
.pass--network .pass-k { opacity: 0.6; }
.pass--network .pass-kind { color: var(--mint); }

/* ── THE NETWORK PASS, LIVE ── 1 November 2026, feedback round one.
   Layers, back to front: engraving, holographic foil running through the
   engraved lines only, the star's glow, the star with a shimmer, the
   pointer sheen, the type, then a light running round the mint rim.
   Every moving part is transform or opacity. Tilt drives parallax through
   --px --py so the star sits deeper than the type. tiers.js adds .is-off
   to the wrap off screen, which pauses all of it. */
.pass-fx { position: absolute; pointer-events: none; }

/* foil: pastel spectrum stripes drift under the engraving mask, and slide
   further with the tilt, the way foil changes colour as you turn a card */
.pass-holo {
  inset: 0;
  z-index: 1;
  overflow: hidden;
  mix-blend-mode: screen;
  opacity: 0.95;
  -webkit-mask: url('work/academy/network-guilloche.svg') center / cover no-repeat;
  mask: url('work/academy/network-guilloche.svg') center / cover no-repeat;
}
.pass-holo i {
  position: absolute;
  inset: 0;
  transform: translate3d(calc(var(--px) * 38%), calc(var(--py) * 12%), 0);
}
.pass-holo b {
  position: absolute;
  left: -60%;
  top: -70%;
  width: 320%;
  height: 240%;
  background: repeating-linear-gradient(90deg,
    #7ABFAB 0%, #4fe3bd 4.5%, #5cc6ff 9%, #9d86ff 13.5%, #f08ad6 18%, #ffcf70 22.5%, #7df0c4 27%, #7ABFAB 31.5%,
    rgba(122, 191, 171, 0.35) 35.5%, #7ABFAB 40%);
  transform: rotate(-24deg) translate3d(0, 0, 0);
  animation: passHolo 14s linear infinite;
}
@keyframes passHolo {
  from { transform: rotate(-24deg) translate3d(0, 0, 0); }
  to { transform: rotate(-24deg) translate3d(-40%, 0, 0); }
}

/* the star: mint foil with a soft glow behind it that breathes, and a band
   of light that crosses it every few seconds. It sits deepest on the tilt. */
.pass-glow {
  z-index: 1;
  right: -24%;
  bottom: -48%;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(122, 191, 171, 0.5), rgba(122, 191, 171, 0.16) 55%, transparent);
  animation: passGlow 6s ease-in-out infinite alternate;
}
@keyframes passGlow {
  from { opacity: 0.55; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1.06); }
}
.pass--network .pass-star {
  opacity: 1;
  overflow: hidden;
  background: linear-gradient(155deg, rgba(200, 245, 230, 0.62), rgba(122, 191, 171, 0.42) 42%, rgba(122, 191, 171, 0.14) 100%);
  transform: translate3d(calc(var(--px) * -22px), calc(var(--py) * -16px), 0);
}
.pass--network .pass-star i {
  position: absolute;
  inset: 0 -100%;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.85) 50%, rgba(200, 181, 255, 0.4) 53%, transparent 60%);
  transform: translate3d(-40%, 0, 0);
  animation: passShine 7s cubic-bezier(0.45, 0, 0.2, 1) 1.2s infinite;
}
@keyframes passShine {
  0% { transform: translate3d(-40%, 0, 0); }
  32%, 100% { transform: translate3d(40%, 0, 0); }
}
.pass--network .pass-star-sm { animation: passTwinkle 4.5s ease-in-out infinite; }
@keyframes passTwinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.86); }
}

/* the rim: a point of light runs round the mint edge */
.pass-rim {
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1.5px;
  overflow: hidden;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}
.pass-rim i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 130%;
  aspect-ratio: 1;
  background: conic-gradient(from 0deg,
    transparent 0deg, transparent 240deg, rgba(122, 191, 171, 0.35) 285deg, #7ABFAB 325deg, #effff9 346deg, #a8f0dc 352deg, transparent 360deg);
  transform: translate(-50%, -50%) rotate(0deg);
  animation: passRim 7.5s linear infinite;
}
@keyframes passRim {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* depth: the type floats above the engraving and the star */
.pass--network .pass-top,
.pass--network .pass-mid,
.pass--network .pass-foot { transform: translate3d(calc(var(--px) * 8px), calc(var(--py) * 6px), 0); }

/* Founding member, engraved into the card */
.pass-engrave {
  display: flex;
  align-items: center;
  gap: 1.6cqi;
  margin-top: 2.4cqi;
  font-size: max(9px, 2.5cqi);
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  line-height: 1;
  color: rgba(214, 236, 229, 0.62);
  text-shadow: 0 -1px 0 rgba(10, 4, 16, 0.75), 0 1px 0 rgba(255, 255, 255, 0.12);
}
.pass-engrave::before {
  content: '';
  width: 5cqi;
  height: 1px;
  background: rgba(122, 191, 171, 0.7);
  box-shadow: 0 -1px 0 rgba(10, 4, 16, 0.6);
}

/* a floor shadow that slides against the tilt */
.pass-shadow {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -7%;
  height: 34%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(49, 27, 66, 0.42), rgba(49, 27, 66, 0.12) 60%, transparent);
  filter: blur(14px);
  transform: translate3d(calc(var(--px) * -30px), calc(var(--py) * -12px), 0);
  pointer-events: none;
}

/* network.html: the pass arrives turning in from below, then a band of
   light crosses it once */
.pass-wrap.pass-enter {
  animation: passEnter 1700ms cubic-bezier(0.16, 1, 0.3, 1) 150ms both, passFloat 8s ease-in-out 1850ms infinite alternate;
}
@keyframes passEnter {
  0% { opacity: 0; transform: perspective(1400px) translate3d(0, 90px, 0) rotateX(40deg) rotateY(-26deg) rotateZ(-7deg) scale(0.84); }
  45% { opacity: 1; }
  100% { opacity: 1; transform: perspective(1400px) translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); }
}
.pass-flash {
  inset: 0 -40%;
  z-index: 4;
  mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 38%, rgba(214, 255, 240, 0.6) 47%, rgba(200, 181, 255, 0.4) 51%, transparent 60%);
  transform: translate3d(-70%, 0, 0);
}
.pass-enter .pass-flash { animation: passFlash 1300ms cubic-bezier(0.3, 0, 0.2, 1) 1100ms both; }
@keyframes passFlash {
  from { transform: translate3d(-70%, 0, 0); }
  to { transform: translate3d(70%, 0, 0); }
}

/* off screen, everything holds still */
.pass-wrap.is-off,
.pass-wrap.is-off .pass *,
.pass-wrap.is-off .pass *::before { animation-play-state: paused !important; }

/* ── PASS PANEL ── a pass with its copy under it */
.tier {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tier .pass { margin-bottom: 30px; }
.tier-head {
  font-family: var(--ff-display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 10px;
}
.tier-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  opacity: 0.78;
  max-width: 44ch;
}
.tier-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
/* each fact is its own small pill (round twelve, no middle dots) */
.meta-pill {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border-radius: 99px;
  border: 1px solid rgba(49, 27, 66, 0.16);
  background: rgba(255, 255, 255, 0.35);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(49, 27, 66, 0.72);
}
.tier-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: 22px;
}
.tier-links .founder-more { margin-top: 0; }
.cta-btn.cta-ink { background: var(--ink); color: #e0e7e7; }
.cta-btn.cta-ink:hover { background: #45285c; }

/* ── THE PACK SHELF ──
   Each pack is a case: a cover, a spine and a Coming soon seal, turned
   on the shelf until you point at it. Covers mix client stills (Jelle,
   Harrison, approved 1 Nov 2026), Hidden Champions, and type covers. */
.shelf { position: relative; margin-top: 10px; }
.shelf-row {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 26px;
  padding: 26px 6px 0;
  margin: 0;
  position: relative;
  z-index: 2;
}
.pack {
  outline: none;
  min-width: 0;
}
.pack-box {
  position: relative;
  aspect-ratio: 4 / 5;
  transform-style: preserve-3d;
  transform: rotateY(24deg) translateZ(0);
  transform-origin: 50% 100%;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pack:hover .pack-box,
.pack-link:focus-visible .pack-box,
.pack.is-front .pack-box {
  transform: rotateY(0deg) translateY(-12px) translateZ(20px);
}
.pack-link { display: block; color: inherit; text-decoration: none; outline: none; }
.pack-link:focus-visible .pack-front { outline: 2px solid var(--mint); outline-offset: 3px; }
.pack-front {
  position: absolute;
  inset: 0;
  border-radius: 4px 10px 10px 4px;
  overflow: hidden;
  transform: translateZ(9px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 11% 11% 10%;
  color: #e0e7e7;
  background: var(--ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset;
  container-type: inline-size;
}
.pack-front img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.pack-front::before {
  /* legibility wash over the still */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(49, 27, 66, 0.86) 0%, rgba(49, 27, 66, 0.25) 46%, rgba(49, 27, 66, 0.1) 70%, rgba(49, 27, 66, 0.45) 100%);
}
.pack-front::after {
  /* the shrink wrap: one diagonal catch of light across the case */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(118deg, transparent 30%, rgba(255, 255, 255, 0.22) 40%, transparent 52%);
  pointer-events: none;
}
.pack-front > * { position: relative; z-index: 2; }
.pack-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: max(8px, 6cqi);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pack-top b {
  font-family: var(--ff-display);
  font-size: max(11px, 9cqi);
  letter-spacing: -0.01em;
  text-transform: none;
}
.pack-title {
  font-family: var(--ff-display);
  font-size: max(18px, 17cqi);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.92;
  overflow-wrap: anywhere;
}
/* long names (Masterclasses) set smaller so they never break mid word */
.pack-title--long { font-size: max(15px, 13.2cqi); overflow-wrap: normal; }
.pack-contents {
  margin-top: 8px;
  font-size: max(9px, 6.4cqi);
  line-height: 1.35;
  opacity: 0.82;
}
.pack-spine {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 100%;
  transform-origin: 0 50%;
  transform: translateZ(-9px) rotateY(-90deg);
  background: linear-gradient(to right, #24132f, #3a2150);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px 0 0 3px;
}
.pack-spine span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(224, 231, 231, 0.7);
  white-space: nowrap;
}
/* the Coming soon seal, a glass sticker on the wrap */
.pack-seal {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 4;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 20px rgba(49, 27, 66, 0.18), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transform: translateZ(12px) rotate(-12deg);
}
/* the shelf bar under the cases was removed in round nine; each case
   stands on its own */
.shelf-row { --gap: 26px; gap: var(--gap); }
.pack-stage { position: relative; }
.pack-stage { isolation: isolate; perspective: 900px; }

/* ── PACK PAGES ── packs/*.html, one per pack, built by
   _build/pack-pages-build.py. The case is the shelf case, larger, turned. */
.packpage { max-width: 1280px; margin: 0 auto; padding: 150px 52px 30px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.packpage-case { width: min(100%, 380px); justify-self: center; perspective: 1400px; }
/* the big case: pack-case.js writes --ry and --rx as you drag or point,
   with inertia and a spring back to rest. The sticker sits in front of the
   front face (translateZ above the face's 16px) so it never slides behind. */
.packpage-case { position: relative; cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.packpage-case.is-drag { cursor: grabbing; }
.packpage-case .pack-stage { animation: packIn 1100ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both; }
@keyframes packIn { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.packpage-case .pack-box { transform: rotateY(var(--ry, -22deg)) rotateX(var(--rx, 4deg)); transition: none; }
.packpage-case .pack-seal { transform: translateZ(30px) rotate(-12deg); }
.packpage-hint { margin-top: 26px; text-align: center; font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); opacity: 0.45; }
.packpage-case .pack-front { transform: translateZ(16px); box-shadow: 0 40px 80px rgba(49, 27, 66, 0.28), 0 1px 0 rgba(255, 255, 255, 0.25) inset; }
.packpage-case .pack-spine { width: 32px; transform: translateZ(-16px) rotateY(-90deg); }
.packpage-case .pack-spine span { font-size: 10px; }
.packpage-case .pack-seal { width: 84px; height: 84px; font-size: 10px; top: -16px; right: -16px; }
.packpage-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.pack-soon { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 99px; background: var(--mint); color: var(--ink); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.packpage > * { min-width: 0; }
.packpage-capture { max-width: min(100%, 440px); margin-top: 26px; }
.packpage-capture .capture-row { min-width: 0; }
.packpage-capture .capture-row input { min-width: 0; }
.packpage-back { display: inline-block; margin-top: 26px; }
.shelf--small .shelf-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.packpage .page-intro { max-width: 40ch; }
@media (max-width: 900px) {
  .packpage { grid-template-columns: 1fr; padding: 120px 24px 10px; gap: 40px; }
  .packpage-case { width: min(72%, 300px); }
}
@media (prefers-reduced-motion: reduce) { .packpage-case .pack-stage { animation: none; } .packpage-case { cursor: default; } .packpage-hint { display: none; } }

/* ── COMPARE ── two columns, the Network one set in ink */
.compare {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr);
  border-radius: 22px;
  overflow: hidden;
}
.compare > div {
  padding: 18px 24px;
  border-top: 1px solid rgba(49, 27, 66, 0.08);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  display: flex;
  align-items: center;
}
.compare .c-head {
  border-top: 0;
  padding-top: 26px;
  padding-bottom: 22px;
  font-family: var(--ff-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px;
}
.compare .c-head small {
  font-family: var(--ff);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.55;
}
.compare .c-net { background: var(--ink); color: #e0e7e7; border-top-color: rgba(224, 231, 231, 0.1); }
.compare .c-net small { color: var(--mint); opacity: 1; }
.compare .c-feat { font-weight: 500; }
.compare .c-yes::before {
  content: '';
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23311B42' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  flex: none;
}
.compare .c-no::before {
  content: '';
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.22;
}
.compare .c-text { font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em; }
.compare-key { display: none; }

/* ── LAYOUT HELPERS ── */
.tiers-hero {
  max-width: 1280px;
  margin: 0 auto;
  padding: 150px 52px 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 70px;
  align-items: center;
}
.tiers-hero .pass-wrap { justify-self: center; width: min(100%, 500px); }
.tiers-hero .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 28px; }
.tiers-hero .btn-row .founder-more { margin-top: 0; }
.tiers-lede {
  font-family: var(--ff-display);
  font-size: clamp(22px, 2.5vw, 34px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.22;
  color: var(--ink);
  max-width: 860px;
  margin: 6px 0 44px;
}

@media (max-width: 1100px) {
  .shelf-row { --gap: 20px; }
}
@media (max-width: 900px) {
  .tiers-hero { grid-template-columns: 1fr; padding: 120px 24px 20px; gap: 44px; }
  .tiers-hero .pass-wrap { width: min(100%, 420px); }
  /* the shelf becomes a row you swipe, the centred case turns to face you */
  .shelf { margin: 10px -24px 0; }
  .shelf-row {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 30px 24px 6px;
    --gap: 22px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }
  .shelf-row::-webkit-scrollbar { display: none; }
  .pack { flex: 0 0 min(46vw, 210px); scroll-snap-align: center; }
  .pack-box { transform: rotateY(20deg) scale(0.94); }
  .compare > div { padding: 14px 14px; font-size: 13.5px; }
  .compare .c-head { font-size: 16px; padding-top: 20px; }
  .compare .c-text { font-size: 12px; }
}
@media (max-width: 560px) {
  .compare { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr) minmax(0, 0.8fr); }
  .compare > div { padding: 13px 10px; font-size: 13px; }
  .compare .c-feat { padding-left: 16px; }
  .compare .c-head small { font-size: 8.5px; letter-spacing: 0.1em; }
  .pass { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .pass-float { animation: none; }
  .pass-wrap.pass-enter { animation: none; opacity: 1; }
  .pass-holo b, .pass-glow, .pass--network .pass-star i, .pass--network .pass-star-sm, .pass-flash { animation: none; }
  .pass-rim i { animation: none; transform: translate(-50%, -50%) rotate(200deg); }
  .pass--network .pass-star i, .pass-flash { display: none; }
  .pack-box { transition: none; }
  .pass { transform: none; }
}