@font-face { font-family: "TBFC Russo One"; src: url("./assets/russo-one-400.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
:root {
  --night: var(--site-color-canvas);
  --night-deep: var(--site-color-deep);
  --night-soft: var(--site-color-panel);
  --field: var(--site-color-inner);
  --mint: var(--site-color-accent);
  --mint-dark: var(--site-color-theme-mint-dark);
  --amber: var(--site-color-coin);
  --paper: var(--site-color-text);
  --paper-white: var(--site-color-text-bright);
  --ink: var(--site-color-theme-ink);
  --muted: var(--site-color-muted);
  --line: var(--site-line-soft);
  --content: var(--site-content-width);
  --body: var(--site-font-body);
  --display: var(--site-font-display);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; min-width: 320px; overflow-x: clip; background: var(--night); color: var(--paper); font-family: var(--body); font-size: 15px; line-height: 1.65; letter-spacing: 0; }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 100; top: -60px; left: 16px; padding: 8px 13px; background: var(--paper); color: var(--ink); }
.skip-link:focus { top: 12px; }
.content-shell { width: min(var(--content), calc(100% - 72px)); margin-inline: auto; }

.site-header { position: fixed; z-index: 50; inset: 0 0 auto; border-bottom: 1px solid var(--site-color-site-header-border-bottom); background: var(--site-color-site-header-background); backdrop-filter: blur(18px); color: var(--site-color-site-header-color); transition: background .25s ease, border-color .25s ease; }
.site-header.is-scrolled, .site-header:has(.mobile-menu:not([hidden])) { background: var(--site-color-site-header-background-2); border-color: var(--site-color-site-header-border-color); }
.nav-inner { width: min(1440px, calc(100% - 64px)); height: 72px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 9px; white-space: nowrap; }
.brand img { width: 34px; height: 34px; object-fit: contain; }
.brand-wordmark { display: inline-flex; align-items: baseline; color: var(--site-color-brand-wordmark-color); font-family: var(--site-font-brand); font-size: 27px; font-weight: 400; line-height: .9; white-space: nowrap; transform: skewX(-16deg) scaleX(1.04); transform-origin: left center; }
.brand-wordmark > span, .brand-wordmark__ls, .brand-wordmark__l, .brand-wordmark__s { display: inline-block; }
.brand-wordmark__fc { letter-spacing: -.035em; }
.brand-wordmark__tools { margin-inline-start: .08em; letter-spacing: -.025em; }
.brand-wordmark__ls { margin-inline-start: -.015em; letter-spacing: 0; }
.brand-wordmark__s { margin-inline-start: -.045em; }
.brand-wordmark__domain { margin-inline-start: .14em; color: var(--site-color-domain); letter-spacing: -.025em; }
.desktop-nav { display: flex; align-items: center; justify-content: center; gap: 32px; margin-inline: auto; font-size: 13px; font-weight: 600; }
.desktop-nav a, .nav-login { transition: color .2s ease; }
.desktop-nav a:hover, .nav-login:hover { color: var(--mint); }
.nav-actions { display: flex; align-items: center; gap: 20px; white-space: nowrap; font-size: 13px; font-weight: 700; }
.nav-install { padding: 10px 18px; border: 1px solid var(--mint); border-radius: 4px; background: var(--mint); color: var(--site-color-nav-install-color); transition: background .2s ease, transform .2s ease; }
.nav-install:hover { background: var(--site-color-nav-install-background); transform: translateY(-2px); }
.menu-toggle { display: none; padding: 8px 0; border: 0; background: none; color: var(--site-color-site-header-color); font-size: 13px; font-weight: 700; }
.mobile-menu { display: grid; gap: 0; padding: 0 24px 16px; background: var(--night-deep); }
.mobile-menu a { padding: 12px 0; border-top: 1px solid var(--line); font-weight: 600; }

.hero-story { position: relative; height: 500svh; view-timeline: --hero-scroll block; background: var(--night); }
.hero-sticky { position: sticky; top: 0; height: 100svh; overflow: clip; isolation: isolate; background: var(--night); }
.hero-sticky::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: var(--site-color-hero-sticky-background); }
.hero-scene, .hero-shade, .field-atmosphere { position: absolute; inset: 0; pointer-events: none; }
.hero-scene { z-index: -4; }
.stadium-sequence { position: absolute; inset: 0; z-index: -3; overflow: clip; isolation: isolate; pointer-events: none; opacity: 0; background: var(--site-color-stadium-sequence-background); }
.camera-frame { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 0 0; mix-blend-mode: plus-lighter; }
.hero-scene img { width: 100%; height: 100%; object-fit: cover; object-position: center 61%; }
.hero-shade { z-index: -2; background: linear-gradient(90deg, var(--site-color-hero-shade-background) 0%, var(--site-color-hero-shade-background-2) 35%, var(--site-color-hero-shade-background-3) 72%), linear-gradient(180deg, var(--site-color-hero-shade-background-4) 0%, transparent 42%, var(--site-color-hero-shade-background-5) 100%); }
.hero-content { position: absolute; top: 50%; left: max(36px, calc((100vw - 1240px) / 2)); width: min(710px, calc(100% - 72px)); transform: translateY(-39%); }
.hero-content h1.brand-wordmark { margin: 0; font-size: clamp(58px, 6.5vw, 96px); text-shadow: 0 3px 16px var(--site-color-hero-content-text-shadow); }
.hero-wordmark .hero-wordmark__ligature { display: inline-block; width: .875em; height: .71em; vertical-align: -.01em; overflow: visible; fill: currentColor; }
.hero-statement { max-width: 720px; margin: 30px 0 12px; font-size: 31px; font-weight: 700; line-height: 1.35; }
.hero-copy { max-width: 610px; margin: 0; color: var(--site-color-hero-copy-color); font-size: 17px; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; padding: 11px 24px; border: 1px solid var(--site-color-button-border); border-radius: 4px; font-weight: 700; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { border-color: var(--mint); background: var(--mint); color: var(--site-color-button-primary-color); }
.button-primary:hover { background: var(--site-color-button-primary-background); }
.button-outline { background: var(--site-color-button-outline-background); color: var(--site-color-site-header-color); }
.button-outline:hover { background: var(--site-color-button-outline-background-2); }

.field-atmosphere { z-index: -1; opacity: 0; background: var(--site-color-field-atmosphere-background); }
.story-pitch { position: absolute; top: 0; left: 0; width: 680px; height: 1050px; transform-origin: 0 0; opacity: 0; }
.story-lines { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--site-color-story-lines-color); opacity: 0; stroke: currentColor; stroke-width: 2; }
.story-cards { position: absolute; inset: 0; opacity: 0; }
.story-cards[data-cards-pending] { visibility: hidden; }
.squad-card { position: absolute; width: clamp(48px, 5.7vw, 94px); max-height: 24%; height: auto; object-fit: contain; transform: translate(-50%, -50%); filter: drop-shadow(0 10px 8px var(--site-color-squad-card-filter)); }
.sc1 { left: 20%; top: 14%; }.sc2 { left: 50%; top: 10%; }.sc3 { left: 80%; top: 14%; }
.sc4 { left: 25%; top: 39%; }.sc5 { left: 50%; top: 43%; }.sc6 { left: 75%; top: 39%; }
.sc7 { left: 14%; top: 66%; }.sc8 { left: 38%; top: 69%; }.sc9 { left: 62%; top: 69%; }.sc10 { left: 86%; top: 66%; }.sc11 { left: 50%; top: 91%; }
.pitch-label { position: absolute; top: -30px; inset-inline: 4.5%; display: flex; justify-content: space-between; color: var(--site-color-pitch-label-color); font-size: 11px; letter-spacing: .08em; opacity: 0; }
.story-copy { position: absolute; top: 50%; left: 5%; width: 23%; opacity: 0; transform: translateY(-35%); scroll-margin-top: 100px; }
.story-eyebrow { color: var(--site-color-story-eyebrow-color); font: 700 12px var(--display); letter-spacing: .11em; }
.story-copy h2 { margin: 24px 0; font-size: clamp(27px, 3vw, 48px); line-height: 1.35; font-weight: 600; letter-spacing: -.04em; }
.story-copy > p:not(.story-eyebrow) { color: var(--site-color-story-copy-color); font-size: 14px; line-height: 1.9; }
.story-copy-note { display: block; margin-top: 38px; padding-top: 17px; border-top: 1px solid var(--site-color-story-copy-note-border-top); color: var(--site-color-story-copy-note-color); font-size: 11px; }
.story-panel { position: absolute; top: 23%; right: 4%; bottom: 15%; display: flex; flex-direction: column; width: 19%; max-width: 290px; padding-left: 26px; border-left: 1px solid var(--site-color-story-copy-note-border-top); opacity: 0; transform: translateX(38px); }
.challenge-heading > span { color: var(--site-color-challenge-heading-color); font: 600 11px var(--display); letter-spacing: .15em; }.challenge-heading h3 { margin: 8px 0 4px; font-size: 24px; font-weight: 500; }.challenge-heading p { margin: 0; color: var(--site-color-challenge-heading-color-2); font-size: 11px; }
.challenge-requirements { margin-top: 28px; }.challenge-requirements h4 { margin: 0 0 11px; font-size: 12px; font-weight: 500; color: var(--site-color-challenge-requirements-color); }.challenge-requirements > div { display: flex; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--site-color-challenge-requirements-border-bottom); font-size: 12px; color: var(--site-color-challenge-requirements-color-2); }.challenge-requirements strong { font-weight: 500; color: var(--site-color-challenge-requirements-color-3); }
.challenge-actions { display: grid; gap: 9px; margin-top: auto; padding-top: 24px; }.challenge-actions > span { display: flex; justify-content: space-between; padding: 12px 15px; border: 1px solid var(--site-color-challenge-actions-border); font-size: 12px; font-weight: 600; border-radius: 3px; }.challenge-actions i { font-style: normal; }.challenge-action-primary { color: var(--site-color-challenge-action-primary-color); background: var(--mint); border-color: var(--mint) !important; }.challenge-actions small { padding-top: 3px; color: var(--site-color-challenge-actions-color); font-size: 9px; }
.story-scroll { position: absolute; bottom: 32px; left: 5%; right: 5%; display: flex; justify-content: space-between; align-items: center; color: var(--site-color-story-scroll-color); font-size: 11px; letter-spacing: .06em; }.story-scroll span:last-child { font-size: 23px; }
.story-chapter { position: absolute; inset: auto 5% 27px; display: flex; justify-content: space-between; border-top: 1px solid var(--site-color-story-copy-note-border-top); padding-top: 15px; color: var(--site-color-story-chapter-color); font-size: 10px; opacity: 0; }

@keyframes hero-away { 0%, 5% { opacity: 1; transform: translateY(-39%); visibility: visible; } 23%, 100% { opacity: 0; transform: translateY(-55%); visibility: hidden; } }
@keyframes shade-away { 0%, 10% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes field-reveal { 0%, 78% { opacity: 0; } 92%, 100% { opacity: 1; } }
@keyframes cards-arrive { 0%, 89% { opacity: 0; transform: translateY(18px); } 99%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes copy-arrive { 0%, 84% { opacity: 0; transform: translateY(-25%); visibility: hidden; } 97%, 100% { opacity: 1; transform: translateY(-35%); visibility: visible; } }
@keyframes panel-arrive { 0%, 84% { opacity: 0; transform: translateX(38px); visibility: hidden; } 97%, 100% { opacity: 1; transform: translateX(0); visibility: visible; } }
@keyframes chapter-arrive { 0%, 88% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes scroll-away { 0%, 5% { opacity: 1; visibility: visible; } 18%, 100% { opacity: 0; visibility: hidden; } }
@supports ((animation-timeline: view()) and (animation-range: contain 0% contain 100%)) {
  .hero-content { animation: hero-away linear both; }
  .hero-shade { animation: shade-away linear both; }
  .field-atmosphere { animation: field-reveal linear both; }
  .story-cards, .pitch-label { animation: cards-arrive linear both; }
  .story-copy { animation: copy-arrive linear both; }
  .story-panel { animation: panel-arrive linear both; }
  .story-chapter { animation: chapter-arrive linear both; }
  .story-scroll { animation: scroll-away linear both; }
  .hero-sticky > *, .story-cards, .pitch-label { animation-timeline: --hero-scroll; animation-range: contain 0% contain var(--camera-end, 100%); }
}

.section-lead { padding: 130px 0 95px; background: var(--paper-white); color: var(--ink); }
.section-lead-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--site-color-section-lead-top-border-top); padding-top: 18px; color: var(--site-color-section-lead-top-color); font-size: 13px; }
.section-lead-top p { margin: 0; }.section-mark, .feature-count { font: 800 13px var(--display); color: var(--mint-dark); }
.section-lead h2 { max-width: 920px; margin: 56px 0 62px; font-size: 65px; line-height: 1.23; font-weight: 700; }
.feature-index { display: flex; flex-wrap: wrap; gap: 8px 28px; border-block: 1px solid var(--site-color-section-lead-top-border-top); padding: 17px 0; }
.feature-index a { color: var(--site-color-feature-index-color); font-size: 13px; font-weight: 700; }.feature-index a:hover { color: var(--site-color-feature-index-color-2); text-decoration: underline; text-underline-offset: 5px; }

.feature-section { padding: 125px 0; }
.feature-section-dark { background: var(--site-color-feature-section-dark-background); }.feature-section-light { background: var(--site-color-feature-section-light-background); color: var(--ink); }.feature-section-green { background: var(--site-color-feature-section-green-background); }
.feature-grid { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); align-items: center; gap: 72px; }
.feature-grid-reverse { grid-template-columns: minmax(0,1.18fr) minmax(0,.82fr); }
.feature-grid-reverse .feature-copy { order: 2; }.feature-grid-reverse .product-figure { order: 1; }
.feature-copy { min-width: 0; }.feature-copy .feature-count { margin: 0 0 25px; }
.feature-copy h2 { max-width: 540px; margin: 0; font-size: 53px; line-height: 1.27; font-weight: 700; }
.feature-intro { max-width: 490px; margin: 25px 0 0; color: var(--site-color-feature-intro-color); font-size: 16px; line-height: 1.85; }
.feature-section-light .feature-intro { color: var(--site-color-feature-section-light-color); }.feature-section-light .feature-count { color: var(--mint-dark); }
.feature-points { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 31px; }
.feature-points span { padding: 5px 0; border-bottom: 1px solid currentColor; color: var(--mint); font-size: 12px; font-weight: 700; }.feature-section-light .feature-points span { color: var(--site-color-feature-section-light-color-2); }
.product-figure { min-width: 0; margin: 0; padding: 18px; border: 1px solid var(--site-color-product-figure-border); border-radius: 6px; background: var(--site-color-product-figure-background); color: var(--site-color-product-figure-color); box-shadow: 0 25px 55px var(--site-color-product-figure-box-shadow); }
.product-figure figcaption { margin: 13px 3px 0; color: var(--site-color-product-figure-color-2); font-size: 11px; }
.figure-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 35px; padding: 0 8px 12px; border-bottom: 1px solid var(--line); color: var(--site-color-figure-top-color); font: 700 12px var(--display); }
.figure-top b { color: var(--mint); }

.sbc-figure-body { display: grid; grid-template-columns: minmax(0,1fr) 165px; min-height: 360px; }
.sbc-field { position: relative; min-height: 360px; overflow: hidden; background: var(--site-color-sbc-field-background); }
.sbc-field::before { content: ""; position: absolute; inset: 24px 15px; border: 1px solid var(--site-color-sbc-field-border); }
.sbc-field::after { content: ""; position: absolute; top: 24px; bottom: 24px; left: 50%; border-left: 1px solid var(--site-color-sbc-field-border); }
.field-center { position: absolute; top: 50%; left: 50%; width: 105px; height: 105px; border: 1px solid var(--site-color-sbc-field-border); border-radius: 50%; transform: translate(-50%,-50%); }
.field-goal { position: absolute; top: 32%; bottom: 32%; right: 15px; width: 48px; border: 1px solid var(--site-color-sbc-field-border); border-right: 0; }
.sbc-card { position: absolute; z-index: 2; display: grid; align-content: center; justify-items: center; width: 42px; height: 56px; border: 1px solid var(--site-color-sbc-card-border); border-radius: 4px; background: var(--site-color-sbc-card-background); color: var(--site-color-sbc-card-color); font-family: var(--display); line-height: 1; box-shadow: 0 4px 12px var(--site-color-sbc-card-box-shadow); }
.sbc-card b { font-size: 19px; }.sbc-card small { margin-top: 4px; font-size: 12px; }
.card-a { left: 12%; top: 45%; }.card-b { left: 28%; top: 16%; }.card-c { left: 48%; top: 57%; }.card-d { right: 27%; top: 25%; }.card-e { right: 10%; top: 45%; }
.sbc-tools { display: grid; align-content: start; gap: 12px; padding: 20px 14px; border-left: 1px solid var(--line); font-size: 11px; }.sbc-tools b { font-size: 17px; }.sbc-tools small { color: var(--site-color-sbc-tools-color); }
.sbc-tools span:not(.tool-action) { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }.sbc-tools strong { color: var(--mint); }
.sbc-tools .tool-action { display: block; padding: 8px; border-radius: 3px; background: var(--mint); color: var(--site-color-sbc-tools-color-2); font-weight: 700; text-align: center; }.sbc-tools .tool-action-muted { background: var(--site-color-sbc-tools-background); color: var(--site-color-sbc-tools-color-3); }

.points-figure { padding: 20px 24px 18px; }.points-meter { padding: 23px 6px 17px; }.points-meter b { color: var(--mint); font-size: 30px; }.points-meter span { color: var(--site-color-points-meter-color); }.points-meter small { color: var(--site-color-points-meter-color-2); }
.meter-bar { height: 8px; margin: 11px 0 9px; overflow: hidden; border-radius: 5px; background: var(--site-color-meter-bar-background); }.meter-bar span { display: block; width: 92%; height: 100%; background: var(--mint); }
.points-candidates { display: flex; justify-content: space-between; gap: 9px; padding: 12px 0 20px; }.mini-player { width: 23%; aspect-ratio: 4/5; display: grid; align-content: center; justify-items: center; border: 1px solid var(--site-color-mini-player-border); border-radius: 4px; background: var(--site-color-mini-player-background); color: var(--site-color-mini-player-color); }.mini-player b { font: 800 31px var(--display); }.mini-player span { font: 700 13px var(--display); }.mini-player-ghost { border-style: dashed; border-color: var(--site-color-mini-player-ghost-border-color); background: var(--site-color-mini-player-ghost-background); color: var(--site-color-mini-player-ghost-color); }
.points-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding: 17px 0 0; font-size: 11px; }.points-foot strong { display: block; color: var(--site-color-site-header-color); font-size: 13px; }.points-foot em { padding: 9px 13px; border-radius: 4px; background: var(--mint); color: var(--site-color-points-foot-color); font-style: normal; font-weight: 700; white-space: nowrap; }

.purchase-figure { padding: 0; overflow: hidden; }.purchase-head { display: grid; gap: 2px; padding: 20px 23px; background: var(--site-color-purchase-head-background); }.purchase-head span { color: var(--site-color-purchase-head-color); font: 700 11px var(--display); }.purchase-head strong { font-size: 18px; }
.purchase-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 18px 20px; }.purchase-controls div { display: grid; gap: 5px; min-width: 0; }.purchase-controls small { color: var(--site-color-purchase-controls-color); }.purchase-controls b { padding: 10px 12px; border: 1px solid var(--site-color-purchase-controls-border); border-radius: 3px; background: var(--site-color-purchase-controls-background); font-size: 12px; }
.purchase-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin: 0 20px 16px; background: var(--site-color-purchase-summary-background); }.purchase-summary span { display: grid; gap: 4px; padding: 11px 9px; background: var(--site-color-purchase-summary-background-2); color: var(--site-color-purchase-summary-color); font-size: 10px; }.purchase-summary b { color: var(--amber); font-size: 13px; }
.purchase-table { margin: 0 20px; }.purchase-table > div { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--site-color-purchase-table-border-bottom); font-size: 11px; }.purchase-table > div:nth-child(even) { background: var(--site-color-purchase-table-background); }.purchase-table b { text-align: right; font-weight: 600; }.purchase-table .table-head { color: var(--site-color-purchase-table-color); font-size: 10px; }.purchase-table .table-head span:not(:first-child) { text-align: right; }
.purchase-footer { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-top: 16px; padding: 12px 20px; background: var(--site-color-purchase-footer-background); color: var(--site-color-purchase-footer-color); font-size: 10px; }.purchase-footer em { padding: 8px 12px; border-radius: 3px; background: var(--mint); color: var(--site-color-purchase-footer-color-2); font-style: normal; font-weight: 700; white-space: nowrap; }.purchase-figure figcaption { margin: 0; padding: 8px 20px; background: var(--site-color-product-figure-background); }

.listing-section { padding: 120px 0 125px; background: var(--site-color-listing-section-background); color: var(--ink); }.listing-head { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 52px; }.listing-head h2 { margin: 18px 0 0; font-size: 53px; line-height: 1.3; }.listing-head > p { max-width: 400px; margin: 0; color: var(--site-color-listing-head-color); }
.listing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }.listing-mode { min-width: 0; border-top: 1px solid var(--site-color-listing-mode-border-top); padding-top: 24px; }.listing-copy { min-height: 170px; }.listing-copy > span { color: var(--site-color-listing-copy-color); font: 800 13px var(--display); }.listing-copy h3 { margin: 10px 0 8px; font-size: 28px; line-height: 1.3; }.listing-copy p { max-width: 430px; margin: 0; color: var(--site-color-listing-copy-color-2); font-size: 14px; }
.listing-visual { min-height: 350px; overflow: hidden; border: 1px solid var(--site-color-listing-visual-border); border-radius: 5px; background: var(--site-color-listing-visual-background); color: var(--site-color-listing-visual-color); }.listing-visual .figure-top { padding: 13px 18px; background: var(--site-color-listing-visual-background-2); }.single-visual > strong { display: block; padding: 17px 20px; font-size: 18px; }.single-meta { display: flex; justify-content: space-between; gap: 15px; margin: 0 20px; padding: 12px 0; border-block: 1px solid var(--line); color: var(--site-color-single-meta-color); font-size: 12px; }.single-meta b { display: block; color: var(--site-color-single-meta-color-2); font-size: 15px; }.single-prices { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 19px 20px; }.single-prices span { min-width: 0; padding: 11px; border: 1px solid var(--site-color-single-prices-border); border-radius: 3px; color: var(--site-color-single-prices-color); font-size: 10px; }.single-prices b { display: block; margin-top: 4px; color: var(--site-color-site-header-color); font-size: 17px; }.single-action { width: fit-content; margin: 25px 20px; padding: 9px 15px; border-radius: 3px; background: var(--mint); color: var(--site-color-single-action-color); font-size: 12px; font-weight: 700; }
.bulk-stats { display: flex; gap: 20px; padding: 19px; }.bulk-stats span { flex: 1; padding: 8px 11px; background: var(--site-color-bulk-stats-background); color: var(--site-color-bulk-stats-color); font-size: 10px; }.bulk-stats b { display: block; color: var(--site-color-bulk-stats-color-2); font-size: 18px; }.positive { color: var(--mint) !important; }.bulk-table { padding: 0 19px; }.bulk-table > div { display: grid; grid-template-columns: 1.5fr .8fr 1fr; gap: 5px; padding: 8px 9px; border-bottom: 1px solid var(--line); font-size: 11px; }.bulk-table > div:first-child { color: var(--site-color-bulk-table-color); font-size: 10px; }.bulk-table b { font-weight: 600; text-align: right; }.bulk-table > div:first-child span:not(:first-child) { text-align: right; }.bulk-progress { display: flex; align-items: center; gap: 13px; margin: 19px; color: var(--site-color-bulk-progress-color); font-size: 11px; }.bulk-progress i { flex: 1; height: 5px; border-radius: 5px; background: linear-gradient(90deg,var(--mint) 75%,var(--site-color-bulk-progress-background) 75%); }

.pack-section { background: var(--site-color-pack-section-background); }.pack-figure { padding: 20px 24px 17px; }.pack-list { display: grid; gap: 0; padding: 12px 0; }.pack-list > div { display: grid; grid-template-columns: 50px 1fr 40px; align-items: center; gap: 13px; padding: 12px 4px; border-bottom: 1px solid var(--line); }.pack-list b,.pack-list small { display: block; }.pack-list small { color: var(--site-color-pack-list-color); font-size: 11px; }.pack-list strong { color: var(--mint); font-size: 18px; }.pack-icon { display: grid; place-items: center; width: 42px; height: 56px; border: 2px solid var(--site-color-pack-icon-border); background: var(--site-color-pack-icon-background); color: var(--site-color-pack-icon-color); font: 800 16px var(--display); transform: skewY(-4deg); }.pack-icon-gold { border-color: var(--site-color-pack-icon-gold-border-color); background: var(--site-color-pack-icon-gold-background); color: var(--site-color-pack-icon-gold-color); }
.pack-routing { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 15px 0; color: var(--site-color-pack-routing-color); font-size: 11px; }.pack-routing b { padding: 6px 9px; border: 1px solid var(--site-color-pack-routing-border); border-radius: 3px; color: var(--site-color-pack-routing-color-2); font-size: 11px; }.pack-routing i { font-style: normal; }.pack-result { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px 17px; padding: 15px 0 4px; border-top: 1px solid var(--line); }.pack-result span { color: var(--site-color-pack-result-color); font-size: 11px; }.pack-result b { color: var(--mint); font-size: 20px; }.pack-result strong { width: 100%; color: var(--site-color-pack-result-color-2); font-size: 12px; font-weight: 500; }

.discovery-section { padding: 126px 0 140px; background: var(--site-color-discovery-section-background); color: var(--ink); }.discovery-section h2 { margin: 20px 0 58px; font-size: 53px; line-height: 1.28; }.discovery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }.discovery-story { min-width: 0; border-top: 1px solid var(--site-color-discovery-story-border-top); padding-top: 24px; }.discovery-copy { min-height: 120px; }.discovery-copy h3 { margin: 0 0 8px; font-size: 29px; }.discovery-copy p { max-width: 460px; margin: 0; color: var(--site-color-discovery-copy-color); font-size: 14px; }
.gallery-visual, .evolution-visual { min-height: 340px; border: 1px solid var(--site-color-gallery-visual-border); border-radius: 5px; background: var(--site-color-gallery-visual-background); color: var(--site-color-gallery-visual-color); }.gallery-visual .figure-top, .evolution-visual .figure-top { padding: 13px 18px; background: var(--site-color-gallery-visual-background-2); }
.grade-track { position: relative; display: flex; justify-content: space-between; margin: 32px 30px 25px; }.grade-track::before { content: ""; position: absolute; z-index: 0; top: 50%; left: 0; right: 0; height: 1px; background: var(--site-color-grade-track-background); }.grade-track span { z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--site-color-grade-track-border); transform: rotate(45deg); background: var(--site-color-grade-track-background-2); color: var(--site-color-grade-track-color); font: 800 13px var(--display); }.grade-track span::first-letter { transform: rotate(-45deg); }.grade-track .grade-active { background: var(--mint); color: var(--site-color-grade-track-color-2); }
.gallery-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin: 0 18px; background: var(--site-color-gallery-stats-background); }.gallery-stats span { padding: 12px; background: var(--site-color-gallery-stats-background-2); color: var(--site-color-gallery-stats-color); font-size: 10px; }.gallery-stats b { display: block; color: var(--site-color-site-header-color); font-size: 17px; }.gallery-cards { display: flex; gap: 9px; padding: 24px 24px 20px; }.gallery-cards i { display: grid; place-items: center; width: 48px; height: 60px; border: 1px solid var(--site-color-gallery-cards-border); border-radius: 3px; background: var(--site-color-gallery-cards-background); color: var(--site-color-gallery-cards-color); font: normal 800 17px var(--display); }.gallery-cards i:nth-child(even) { background: var(--site-color-gallery-cards-background-2); }
.evolution-cards { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 24px 10px 16px; }.evolution-cards > div { display: grid; align-content: center; justify-items: center; width: 104px; height: 145px; border: 1px solid var(--site-color-evolution-cards-border); border-radius: 5px; background: var(--site-color-evolution-cards-background); }.evolution-cards .evolution-final { border-color: var(--mint); background: var(--site-color-evolution-cards-background-2); }.evolution-cards small { color: var(--site-color-evolution-cards-color); font-size: 10px; }.evolution-cards b { font: 800 49px var(--display); line-height: 1.1; }.evolution-cards span { color: var(--site-color-evolution-cards-color-2); font: 700 12px var(--display); }.evolution-cards > strong { color: var(--mint); font-size: 28px; }.evolution-steps { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 7px 16px 22px; }.evolution-steps span { padding: 6px 8px; border: 1px solid var(--site-color-evolution-steps-border); border-radius: 3px; color: var(--site-color-evolution-steps-color); font-size: 10px; }

.more-section { padding: 99px 0; background: var(--site-color-more-section-background); }.more-header { display: flex; justify-content: space-between; align-items: end; gap: 32px; }.more-header h2 { margin: 12px 0 0; font-size: 43px; }.more-header > p { margin: 0; color: var(--site-color-more-header-color); }.more-details { margin-top: 45px; border-top: 1px solid var(--line); }.more-details summary { padding: 18px 0; cursor: pointer; list-style: none; color: var(--mint); font-size: 14px; font-weight: 700; }.more-details summary::after { content: "+"; float: right; font-size: 23px; line-height: 1; }.more-details[open] summary::after { content: "−"; }.more-details summary::-webkit-details-marker { display: none; }.more-list { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }.more-list span { min-height: 95px; padding: 17px 12px 17px 0; border-bottom: 1px solid var(--line); }.more-list b,.more-list small { display: block; }.more-list b { font-size: 15px; }.more-list small { margin-top: 4px; color: var(--site-color-more-list-color); font-size: 12px; }

.install-section { padding: 112px 0 122px; background: var(--site-color-install-section-background); color: var(--ink); }.install-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 85px; align-items: center; }.install-inner h2 { margin: 17px 0 19px; font-size: 58px; line-height: 1.25; }.install-inner p:not(.feature-count) { max-width: 490px; margin: 0; color: var(--site-color-install-inner-color); }.install-links { border-top: 1px solid var(--site-color-install-links-border-top); }.install-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 73px; border-bottom: 1px solid var(--site-color-install-links-border-top); font-weight: 700; }.install-links a span { color: var(--site-color-install-links-color); font-size: 12px; }.install-links a:hover span { text-decoration: underline; }
.site-footer { padding: 55px 0 32px; background: var(--site-color-site-footer-background); color: var(--site-color-site-footer-color); }.footer-inner { display: flex; align-items: center; gap: 32px; }.footer-brand { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }.footer-brand img { width: 38px; height: 38px; }.footer-brand .brand-wordmark { font-size: 30px; }.footer-inner > span { margin-right: auto; font-size: 13px; }.footer-inner nav { display: flex; flex-wrap: wrap; gap: 12px 20px; font-size: 12px; }.footer-inner nav a:hover { color: var(--mint); }.preview-note { width: min(var(--content), calc(100% - 72px)); margin: 30px auto 0; border-top: 1px solid var(--line); padding-top: 14px; color: var(--site-color-preview-note-color); font-size: 11px; }

@media (max-width: 1100px) {
  .desktop-nav { gap: 18px; }.feature-grid,.feature-grid-reverse { gap: 34px; }.feature-copy h2,.listing-head h2,.discovery-section h2 { font-size: 43px; }
  .story-panel { padding-left: 16px; }.sbc-figure-body { grid-template-columns: minmax(0,1fr) 140px; }.sbc-tools { padding-inline: 9px; }
}
@media (max-width: 780px) {
  html, body { scrollbar-width: none; }
  html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .content-shell { width: min(620px, calc(100% - 36px)); }.nav-inner { width: calc(100% - 36px); height: 64px; }.desktop-nav { display: none; }.menu-toggle { display: block; }.nav-actions { gap: 14px; }.nav-install { display: none; }
  .hero-story { height: 300svh; }.hero-scene img { object-position: center 49%; }.hero-shade { background: linear-gradient(180deg, var(--site-color-hero-shade-background-6) 0%, var(--site-color-hero-shade-background-7) 37%, var(--site-color-hero-shade-background-3) 72%, var(--site-color-hero-shade-background-8) 100%); }.hero-content { width: calc(100% - 36px); left: 18px; top: 26%; }.hero-content h1.brand-wordmark { font-size: 56px; }.hero-statement { margin-top: 20px; font-size: 27px; }.hero-copy { font-size: 14px; line-height: 1.7; }.hero-actions { gap: 8px; margin-top: 25px; }.hero-actions .button { min-height: 44px; padding: 8px 14px; font-size: 13px; }
  .story-copy { top: 17%; left: 6%; width: 88%; }.story-eyebrow { font-size: 10px; }.story-copy h2 { margin: 10px 0; font-size: 29px; }.story-copy h2 br { display: none; }.story-copy > p:not(.story-eyebrow) { margin: 8px 0; font-size: 12px; }.story-copy > p br { display: none; }.story-copy-note { display: none; }
  .squad-card { width: 17%; max-height: 24%; }.pitch-label { top: -24px; font-size: 16px; }
  .story-panel { top: 37%; bottom: 17%; right: 5%; width: 31%; padding-left: 12px; }.challenge-heading > span { font-size: 8px; letter-spacing: .07em; }.challenge-heading h3 { font-size: 18px; }.challenge-heading p { display: none; }.challenge-requirements { margin-top: 18px; }.challenge-requirements h4 { font-size: 10px; }.challenge-requirements > div { font-size: 10px; padding: 8px 0; }.challenge-actions { gap: 8px; padding-top: 16px; }.challenge-actions > span { padding: 10px 7px; font-size: 10px; }.challenge-actions small { font-size: 8px; line-height: 1.6; }.story-chapter { font-size: 9px; }
  .section-lead { padding: 85px 0 70px; }.section-lead h2 { margin: 33px 0 37px; font-size: 41px; }.section-lead-top { font-size: 11px; }.feature-index { gap: 9px 17px; }.feature-index a { font-size: 12px; }
  .feature-section { padding: 84px 0; }.feature-grid,.feature-grid-reverse { grid-template-columns: 1fr; gap: 28px; }.feature-grid-reverse .feature-copy,.feature-grid-reverse .product-figure { order: initial; }.feature-copy h2 { font-size: 39px; }.feature-intro { margin-top: 18px; font-size: 14px; }.feature-points { margin-top: 22px; }.product-figure { max-width: 620px; }
  .listing-section,.discovery-section { padding: 83px 0 92px; }.listing-head { display: block; margin-bottom: 31px; }.listing-head h2,.discovery-section h2 { font-size: 40px; }.listing-head > p { margin-top: 16px; font-size: 14px; }.listing-grid,.discovery-grid { grid-template-columns: 1fr; gap: 43px; }.listing-copy,.discovery-copy { min-height: 0; padding-bottom: 20px; }
  .more-section { padding: 75px 0; }.more-header { display: block; }.more-header h2 { font-size: 33px; }.more-header > p { margin-top: 13px; font-size: 13px; }.more-list { grid-template-columns: repeat(2,1fr); }
  .install-section { padding: 78px 0 90px; }.install-inner { grid-template-columns: 1fr; gap: 36px; }.install-inner h2 { font-size: 42px; }.footer-inner { display: block; }.footer-inner > span { display: block; margin-top: 12px; }.footer-inner nav { margin-top: 25px; }.preview-note { width: calc(100% - 36px); }
}
@media (max-width: 480px) {
  .brand img { width: 28px; height: 28px; }.brand .brand-wordmark { font-size: 22px; }.nav-actions { gap: 12px; }.nav-login { font-size: 12px; }.menu-toggle { font-size: 12px; }
  .hero-scene img { object-position: center 45%; }.hero-content { top: 27%; }.hero-content h1.brand-wordmark { font-size: 46px; }.hero-statement { font-size: 24px; }.hero-copy { max-width: 350px; font-size: 13px; }.hero-actions { display: grid; grid-template-columns: 1fr 1fr; }.hero-actions .button { width: 100%; padding-inline: 8px; }
  .section-lead h2 { font-size: 33px; }.feature-copy h2 { font-size: 32px; }.feature-intro { font-size: 13px; }.feature-points span { font-size: 11px; }
  .product-figure { padding: 10px; }.product-figure figcaption { font-size: 10px; }.figure-top { font-size: 10px; }.sbc-figure-body { grid-template-columns: minmax(0,1fr) 105px; min-height: 255px; }.sbc-field { min-height: 255px; }.sbc-tools { gap: 6px; padding: 10px 6px; font-size: 8px; }.sbc-tools b { font-size: 11px; }.sbc-tools .tool-action { padding: 5px; font-size: 9px; }.sbc-card { width: 26px; height: 34px; }.sbc-card b { font-size: 12px; }.sbc-card small { margin-top: 2px; font-size: 7px; }.field-center { width: 65px; height: 65px; }
  .points-figure { padding: 14px; }.points-meter { padding: 15px 3px; }.points-meter b { font-size: 22px; }.mini-player b { font-size: 24px; }.mini-player span { font-size: 10px; }.points-foot { flex-wrap: wrap; }.points-foot em { margin-left: auto; }
  .purchase-head { padding: 14px; }.purchase-controls { padding: 10px; }.purchase-summary { margin-inline: 10px; }.purchase-summary span { padding: 7px 4px; font-size: 8px; }.purchase-summary b { font-size: 10px; }.purchase-table { margin-inline: 10px; }.purchase-table > div { padding: 7px 4px; font-size: 9px; }.purchase-footer { margin-top: 10px; padding: 9px; font-size: 8px; }
  .listing-head h2,.discovery-section h2 { font-size: 33px; }.listing-copy h3,.discovery-copy h3 { font-size: 24px; }.listing-copy p,.discovery-copy p { font-size: 13px; }.single-meta { margin-inline: 10px; }.single-prices { margin-inline: 10px; }.bulk-stats { gap: 8px; padding: 10px; }.bulk-stats b { font-size: 14px; }.bulk-table { padding-inline: 10px; }
  .pack-figure { padding: 13px; }.gallery-stats span { padding: 8px 5px; font-size: 8px; }.gallery-stats b { font-size: 13px; }.grade-track { margin-inline: 21px; }.evolution-cards { gap: 13px; }
  .more-list { grid-template-columns: 1fr; }.more-list span { min-height: 68px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .hero-story { height: auto; }.hero-sticky { height: auto; min-height: 180svh; perspective: none; }
  .hero-sticky > *, .story-cards, .pitch-label { animation: none !important; }
  .hero-scene, .hero-shade { height: 100svh; }.hero-content { top: 50svh; visibility: visible; }
  .stadium-sequence { display: none; }.field-atmosphere { top: 100svh; opacity: 1; }.story-pitch { top: 143svh; left: 57%; width: 42svh; height: 65svh; opacity: 1; transform: translate(-50%, -50%); }.story-lines { opacity: .4; }
  .story-cards, .pitch-label, .story-panel, .story-copy { opacity: 1; visibility: visible; }.story-panel { top: 117svh; bottom: 15svh; transform: none; }.story-copy { top: 143svh; }.story-scroll { display: none; }.story-chapter { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 780px) { .story-copy { top: 116svh; }.story-pitch { top: 150svh; left: 33%; width: 52vw; height: 43svh; }.story-panel { top: 128svh; bottom: 12svh; } }
@media (max-width: 780px) and (prefers-reduced-motion: no-preference) { .hero-story { height: 480svh; } }

/* Multilingual navigation and content flow. */
.desktop-nav{gap:clamp(10px,1.4vw,24px)}.nav-actions{gap:12px}.nav-inner{min-height:72px;height:auto}.language-picker select{width:112px;max-width:112px}.hero-copy{max-width:640px}.hero-actions,.ui-demo-heading,.listing-mode-tabs,.pack-source-tabs,.pack-step-tabs,.points-workspace-footer,.pack-demo-footer{flex-wrap:wrap}.product-copy{min-width:0}.product-copy h2,.product-intro h2,.product-install h2{overflow-wrap:break-word;hyphens:auto}.product-copy p,.product-copy li{overflow-wrap:break-word}.ui-demo-heading{gap:8px}.ui-demo-heading>strong,.ui-demo-heading>span{min-width:0;white-space:normal}.ui-sbc-summary{flex-wrap:wrap;white-space:normal}.ui-input-grid b{min-height:40px;height:auto;padding-block:8px}.pack-demo-footer .ui-action{white-space:normal}.listing-mode-tabs [role=tab],.pack-source-tabs [role=tab],.pack-step-tabs [role=tab]{height:auto;white-space:normal;text-align:start}.purchase-bottom{flex-wrap:wrap;gap:12px}.purchase-bottom>span{min-width:0}.ui-action{white-space:normal;text-align:center}.single-listing-bottom{gap:12px;flex-wrap:wrap}
.sg-card-native,.pitch-card,.points-concept-card,.purchase-card-art,.listing-card-art,.pack-result-art,.gallery-player-art{direction:ltr;unicode-bidi:isolate}
html[dir=rtl] .hero-content{left:auto;right:max(40px,calc(50% - 620px));text-align:right}html[dir=rtl] .hero-content .brand-wordmark{direction:ltr;transform-origin:right center}html[dir=rtl] .hero-showcase{text-align:right}html[dir=rtl] .product-copy li{padding-left:0;padding-right:14px}html[dir=rtl] .product-copy li::before{left:auto;right:0}html[dir=rtl] .demo-points .points-workspace-actions{margin-left:0;margin-right:auto}html[dir=rtl] .demo-points .points-workspace-actions .ui-action{margin-left:0}html[dir=rtl] .bulk-listing-table{text-align:right}
@media(max-width:1320px){.desktop-nav{display:none}.menu-toggle{display:block;min-height:44px}.mobile-menu{padding-inline:var(--site-page-gutter)}}
@media(max-width:780px){.nav-inner{min-height:64px}.nav-actions{gap:8px}.nav-actions .nav-login{display:none}.language-picker select{width:78px;max-width:78px;font-size:11px}.nav-actions .nav-discord{width:38px;min-width:38px;padding:8px}.nav-actions .nav-discord span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.mobile-menu .mobile-discord{display:flex;justify-content:flex-start;margin-bottom:12px}.mobile-menu a{min-height:44px;align-content:center}.hero-content{width:calc(100% - 36px)}html[dir=rtl] .hero-content{right:18px;left:auto}.pack-owned-row{grid-template-columns:16px 30px minmax(0,1fr) 84px}.pack-owned-quantity strong{padding-inline:8px}}
@media(max-width:380px){.nav-inner{width:calc(100% - 24px);gap:8px}.brand .brand-wordmark{font-size:18px}.brand img{width:24px;height:24px}.brand{gap:6px}.nav-actions{gap:6px}.language-picker select{width:67px;max-width:67px;padding-inline:4px}.nav-actions .nav-discord{width:32px;min-width:32px}.menu-toggle{font-size:11px}.hero-actions .button{overflow-wrap:anywhere}.community-action{max-width:100%}}