/*
  Landing pages: home and Support the project.
  Source: approved concept (racing_league_tools_DESIGN/website_concepts, b1-proof.html and pricing-options.html).
  Spec: docs/superpowers/specs/2026-10-10-web-home-and-support-pages-design.md.
  Everything is scoped under .lp; the short variable names below alias the site tokens.
*/
.lp {
  --canvas: var(--color-surface-canvas);
  --raised: var(--color-surface-raised);
  --overlay: var(--color-surface-overlay);
  --deep: var(--color-surface-card-deep);
  --hairline: var(--color-border-hairline);
  --border-strong: var(--color-border-strong);
  --hover: var(--color-surface-hover);
  --text: var(--color-text-primary);
  --text-2: var(--color-text-secondary);
  --text-3: var(--color-text-placeholder);
  --orange: var(--color-brand-orange);
  --orange-hover: var(--color-brand-orange-hover);
  --orange-soft: var(--color-brand-orange-soft);
  --green: var(--color-brand-green);
  --green-soft: var(--color-brand-green-soft);
  --display: var(--font-display);
  --body: var(--font-body);
  --r-sm: var(--radius-sm);
  --r-md: var(--radius-md);
  --r-lg: var(--radius-lg);
  --wide: var(--content-wide);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
}
.lp img { max-width: 100%; display: block; }
.lp h1, .lp h2, .lp h3, .lp p { margin: 0; }
.lp a:not(.btn) { color: var(--orange); text-decoration: none; }
.lp a:not(.btn):hover { color: var(--orange-hover); }
.lp .btn svg { width: 20px; height: 20px; fill: currentColor; }

/* ---- shared ---- */
.lp 500;600;700&family=Saira+Condensed:wght@800&display=swap');

:root { --canvas: #0B0D12; --raised: #14161D; --overlay: #1C1F29; --deep: #0A0B0F; --hairline: #262B38; --border-strong: rgba(244, 245, 247, 0.14); --hover: rgba(244, 245, 247, 0.045); --text: #F4F5F7; --text-2: #B9BDC7; --text-3: #7E8496; --orange: #F2762E; --orange-hover: #FF9152; --orange-soft: rgba(242, 118, 46, 0.14); --green: #2ED47A; --green-soft: rgba(46, 212, 122, 0.14); --display: 'Saira Condensed', 'Arial Narrow', sans-serif; --body: 'Inter', system-ui, sans-serif; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --wide: 1180px; }
.lp h1, .lp h2, .lp h3, .lp p { margin: 0; }
.lp .lp-wrap { max-width: var(--wide); margin: 0 auto; padding: 0 24px; }
.lp .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }
.lp .lede { color: var(--text-2); font-size: 18px; line-height: 1.6; }
.lp .muted { color: var(--text-2); }
.lp .faint { color: var(--text-3); }
.lp .lp-section { padding: 96px 0; }
.lp .section-head { max-width: 680px; margin-bottom: 40px; }
.lp .section-head h2 { font: 700 34px/1.2 var(--body); letter-spacing: -0.02em; margin: 8px 0 12px; }
.lp .section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.lp .lp-card { background: var(--raised); border: 1px solid var(--hairline); border-radius: var(--r-lg); }
.lp .shot { border-radius: var(--r-md); border: 1px solid var(--hairline); overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.lp .games { display: flex; flex-wrap: wrap; gap: 10px; }
.lp .chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; background: var(--raised); border: 1px solid var(--hairline); color: var(--text-2); }
.lp .chip b { color: var(--text); font-weight: 600; }
.lp .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

/* ---- landing blocks ---- */
.lp .tour { display: grid; grid-template-columns: 340px 1fr; gap: 40px; align-items: start; }
.lp .tabs { display: flex; flex-direction: column; gap: 6px; }
.lp .tab { text-align: left; background: transparent; border: 1px solid transparent; border-radius: var(--r-md); padding: 16px 18px; color: var(--text-2); cursor: pointer; font: inherit; }
.lp .tab b { display: block; color: var(--text); font-weight: 600; font-size: 16px; margin-bottom: 4px; }
.lp .tab span { font-size: 14px; display: none; }
.lp .tab:hover { background: var(--hover); }
.lp .tab.is-active { background: var(--raised); border-color: var(--hairline); box-shadow: inset 3px 0 0 var(--orange); }
.lp .tab.is-active span { display: block; }
.lp .stage { position: sticky; top: 80px; }
.lp .stage img { display: none; }
.lp .stage img.is-active { display: block; }
.lp .counters { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.lp .counters div { padding: 28px 24px; border-right: 1px solid var(--hairline); }
.lp .counters div:last-child { border-right: 0; }
.lp .counters b { display: block; font: 800 44px/1 var(--display); letter-spacing: .01em; }
.lp .counters b em { font-style: normal; color: var(--orange); }
.lp .counters span { display: block; margin-top: 8px; font-size: 14px; color: var(--text-2); }
.lp .discord { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid rgba(88,101,242,.35); background: radial-gradient(80% 120% at 100% 0%, rgba(88,101,242,.35), transparent 60%), var(--raised); padding: 48px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.lp .discord h2 { font: 700 34px/1.2 var(--body); letter-spacing: -.02em; margin: 10px 0 12px; }
.lp .discord .btn-discord { background: #5865F2; color: #fff !important; }
.lp .discord .btn-discord:hover { background: #6D78F5; }
.lp .discord-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lp .discord-stats div { background: rgba(11,13,18,.6); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 18px; }
.lp .discord-stats b { display: block; font: 800 36px/1 var(--display); }
.lp .discord-stats span { font-size: 13px; color: var(--text-2); }
.lp .discord-stats .on b { color: var(--green); }
.lp .channels { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.lp .channels span { font-size: 13px; color: var(--text-2); background: rgba(11,13,18,.6); border: 1px solid var(--hairline); border-radius: 6px; padding: 4px 10px; }
.lp .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp .mini { padding: 24px; }
.lp .mini h3 { font-size: 16px; font-weight: 600; margin: 14px 0 6px; }
.lp .mini p { font-size: 14px; color: var(--text-2); }
.lp .ico { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--orange-soft); color: var(--orange); font-weight: 700; }
.lp .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp .plan { padding: 28px; }
.lp .plan.pop { border-color: rgba(242,118,46,.5); box-shadow: 0 0 0 1px rgba(242,118,46,.25); }
.lp .plan h3 { font-size: 18px; font-weight: 600; }
.lp .plan .price { font: 700 32px/1 var(--body); margin: 14px 0 4px; }
.lp .plan .price small { font-size: 14px; color: var(--text-3); font-weight: 500; }
.lp .plan ul { list-style: none; padding: 0; margin: 18px 0 24px; font-size: 14px; color: var(--text-2); }
.lp .plan li { padding: 5px 0; }
.lp .plan li::before { content: "✓"; color: var(--green); margin-right: 10px; }
.lp .credit { font-size: 12px; color: var(--text-3); }
.lp .credit b { color: var(--text-2); font-weight: 600; }
@media (max-width: 900px) {
  .lp .tour, .lp .discord { grid-template-columns: 1fr; }
  .lp .counters, .lp .grid3, .lp .plans { grid-template-columns: 1fr 1fr; }
  .lp .discord { padding: 28px; }
}

/* ---- home ---- */
.lp .hero { text-align: center; padding: 72px 0 0; position: relative; }
.lp .hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 640px; background: radial-gradient(60% 60% at 50% 0%, rgba(242,118,46,.16), transparent 70%); pointer-events: none; }
.lp .pill { display: inline-flex; gap: 8px; align-items: center; padding: 5px 13px; border-radius: 999px; background: rgba(20,22,29,.55); border: 1px solid var(--hairline); font-size: 13px; color: var(--text-3); }
.lp .pill:hover { color: var(--text-2); border-color: var(--border-strong); }
.lp .pill b { color: var(--text-2); font-weight: 500; }
.lp .pill .dot { width: 6px; height: 6px; }
.lp .hero h1 { font: 800 84px/1.0 var(--display); margin: 22px auto 10px; }
.lp .slogan { font: 600 21px/1.3 var(--body); color: var(--orange); margin-bottom: 16px; }
.lp .hero .lede { max-width: 640px; margin: 0 auto; }
.lp .hero .actions { display: flex; gap: 12px; justify-content: center; margin: 32px 0 14px; flex-wrap: wrap; }
.lp .hero .note { font-size: 13px; color: var(--text-3); }
.lp .scene { position: relative; max-width: 1180px; margin: 56px auto 48px; height: 560px; }
.lp .card-img { position: absolute; margin: 0; --rot: 0deg; transform: rotate(var(--rot)); transition: transform .25s ease; cursor: zoom-in; }
.lp .card-img img { width: 100%; border-radius: 10px; border: 1px solid var(--hairline); box-shadow: 0 30px 80px rgba(0,0,0,.6); transition: box-shadow .25s; }
.lp .card-img figcaption { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%) translateY(6px); white-space: nowrap; font-size: 12px; color: var(--text-2); background: rgba(20,22,29,.94); border: 1px solid var(--border-strong); border-radius: 999px; padding: 5px 11px; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; }
.lp .card-img figcaption b { color: var(--text); font-weight: 600; }
.lp .card-img:hover { transform: rotate(0deg) scale(1.04); z-index: 20 !important; }
.lp .card-img:hover img { box-shadow: 0 40px 100px rgba(0,0,0,.8), 0 0 0 1px rgba(242,118,46,.55); }
.lp .card-img:hover figcaption { opacity: 1; transform: translateX(-50%) translateY(0); }
.lp .scene .app { left: 50%; top: 40px; width: 70%; z-index: 2; transform: translateX(-50%); }
.lp .scene .app:hover { transform: translateX(-50%) scale(1.01); }
.lp .scene .app img { border-radius: 12px; box-shadow: 0 40px 120px rgba(0,0,0,.75); }
.lp .p1 { width: 24%; left: 0; top: 0; --rot: -5deg; z-index: 1; }
.lp .p2 { width: 24%; right: 0; top: 24px; --rot: 5deg; z-index: 3; }
.lp .p3 { width: 22%; left: 3%; bottom: 30px; --rot: 3deg; z-index: 3; }
.lp .p4 { width: 23%; right: 3%; bottom: 110px; --rot: -3deg; z-index: 4; }
.lp .scene .fade { position: absolute; left: 0; right: 0; bottom: -2px; height: 130px; background: linear-gradient(transparent, var(--canvas)); z-index: 6; pointer-events: none; }
.lp .lb { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 48px 72px; background: rgba(6,7,10,.86); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.lp .lb.open { opacity: 1; pointer-events: auto; }
.lp .lb figure { margin: 0; display: grid; gap: 14px; justify-items: center; transform: scale(.94) translateY(8px); transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.lp .lb.open figure { transform: none; }
.lp .lb img { max-width: min(1400px, calc(100vw - 144px)); max-height: calc(100vh - 150px); border-radius: 12px; border: 1px solid var(--border-strong); box-shadow: 0 40px 140px rgba(0,0,0,.8); cursor: zoom-out; }
.lp .lb figcaption { font-size: 14px; color: var(--text-2); }
.lp .lb figcaption b { color: var(--text); font-weight: 600; }
.lp .lb-btn { position: fixed; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(28,31,41,.9); border: 1px solid var(--border-strong); color: var(--text); font-size: 20px; cursor: pointer; }
.lp .lb-btn:hover { border-color: var(--orange); }
.lp .lb-close { top: 20px; right: 20px; }
.lp .lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lp .lb-next { right: 20px; top: 50%; transform: translateY(-50%); }
.lp .lb-count { position: fixed; top: 30px; left: 50%; transform: translateX(-50%); font-size: 13px; color: var(--text-3); }
.lp .why { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: center; padding: 64px 0; border-top: 1px solid var(--hairline); }
.lp .section-head + .why { border-top: 0; padding-top: 8px; }
.lp .why.flip { grid-template-columns: 1.15fr 1fr; }
.lp .why.flip .text { order: 2; }
.lp .why.stacked { display: block; }
.lp .why.stacked .text { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; margin-bottom: 36px; }
.lp .why h3 { font: 700 30px/1.2 var(--body); letter-spacing: -.02em; margin: 8px 0 12px; }
.lp .why ul { list-style: none; padding: 0; margin: 20px 0 0; }
.lp .why.stacked ul { margin: 0; }
.lp .why li { padding: 7px 0 7px 28px; position: relative; color: var(--text-2); }
.lp .why li b { color: var(--text); font-weight: 600; }
.lp .why li::before { content: ""; position: absolute; left: 0; top: 16px; width: 14px; height: 2px; background: var(--orange); }
.lp .games-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.lp .games-table th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 14px 20px; border-bottom: 1px solid var(--hairline); }
.lp .games-table td { padding: 13px 20px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.lp .games-table tr:last-child td { border-bottom: 0; }
.lp .games-table td:first-child { font-weight: 600; }
.lp .games-table small { display: block; font-weight: 400; font-size: 12px; color: var(--text-3); margin-top: 2px; }
.lp .yes { color: var(--green); font-weight: 600; }
.lp .no { color: var(--text-3); }
.lp .tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 5px; background: var(--orange-soft); color: var(--orange); margin-left: 6px; vertical-align: 1px; }
.lp .panels { display: grid; grid-template-columns: 1.45fr 1fr; gap: 20px; }
.lp .panel { padding: 0; overflow: hidden; font-size: 14px; }
.lp .panel-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--hairline); }
.lp .panel-head b { font-weight: 600; font-size: 15px; }
.lp .chips { display: flex; gap: 6px; padding: 14px 20px 4px; flex-wrap: wrap; }
.lp .chips span { padding: 6px 12px; border-radius: 7px; border: 1px solid var(--hairline); background: var(--deep); color: var(--text-2); font-weight: 500; text-align: center; line-height: 1.2; }
.lp .chips span small { display: block; font-size: 11px; color: var(--text-3); font-weight: 400; }
.lp .chips span.on { background: var(--orange-soft); border-color: rgba(242,118,46,.45); color: var(--text); }
.lp .pa-grid { display: grid; grid-template-columns: 1fr 1.15fr; }
.lp .pa { padding: 12px 20px 18px; font-variant-numeric: tabular-nums; }
.lp .pa .row { display: grid; grid-template-columns: 1fr 64px 64px; padding: 6px 0; border-bottom: 1px solid rgba(38,43,56,.7); color: var(--text-2); }
.lp .pa .row:last-child { border-bottom: 0; }
.lp .pa .row b { color: var(--text); text-align: right; font-weight: 600; }
.lp .pa .row.h { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.lp .pa .row.h span:not(:first-child) { text-align: right; }
.lp .pa .row.bonus span:first-child { color: var(--orange); }
.lp .pa .gap { text-align: center; color: var(--text-3); padding: 2px 0; }
.lp .options { border-left: 1px solid var(--hairline); padding: 14px 20px 18px; display: grid; gap: 8px; align-content: start; }
.lp .options h4 { margin: 4px 0 2px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.lp .opt { display: flex; gap: 10px; align-items: flex-start; color: var(--text-2); font-size: 13px; line-height: 1.4; }
.lp .cb { flex: none; width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--border-strong); margin-top: 1px; }
.lp .cb.on { background: var(--orange); border-color: var(--orange); position: relative; }
.lp .cb.on::after { content: ""; position: absolute; left: 5px; top: 1px; width: 4px; height: 9px; border: solid var(--canvas); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.lp .opt .val { margin-left: auto; color: var(--text); font-weight: 600; background: var(--deep); border: 1px solid var(--hairline); border-radius: 5px; padding: 0 8px; }
.lp .pen { padding: 14px 20px 18px; display: grid; gap: 8px; }
.lp .pen h4 { margin: 6px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.lp .off { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--deep); }
.lp .off b { font-weight: 600; color: var(--text); }
.lp .off span { color: var(--text-2); font-size: 13px; }
.lp .off em { font-style: normal; color: var(--orange); font-weight: 600; font-size: 13px; text-align: right; }
.lp .thr { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 13px; }
.lp .thr .pts { flex: none; width: 46px; text-align: center; font-weight: 700; color: var(--text); background: rgba(229,72,77,.14); border-radius: 6px; padding: 3px 0; }
.lp .stats-card { padding: 22px; display: grid; gap: 18px; }
.lp .stats-top { display: flex; justify-content: space-between; align-items: baseline; }
.lp .stats-top b { font-size: 17px; font-weight: 600; }
.lp .meter { display: grid; grid-template-columns: 120px 1fr 44px; gap: 12px; align-items: center; font-size: 14px; color: var(--text-2); }
.lp .meter i { height: 8px; border-radius: 4px; background: var(--hairline); position: relative; overflow: hidden; }
.lp .meter i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); background: linear-gradient(90deg, var(--orange), var(--orange-hover)); border-radius: 4px; }
.lp .meter.g i::after { background: linear-gradient(90deg, #22a862, var(--green)); }
.lp .meter b { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.lp .h2h { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px 16px; padding-top: 16px; border-top: 1px solid var(--hairline); font-size: 14px; font-variant-numeric: tabular-nums; }
.lp .h2h .l { text-align: right; }
.lp .h2h .c { color: var(--text-3); text-align: center; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.lp .h2h .w { color: var(--green); font-weight: 700; }
.lp .stat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline); border-radius: var(--r-md); overflow: hidden; }
.lp .stat-tiles div { background: var(--deep); padding: 14px; }
.lp .stat-tiles b { display: block; font: 800 26px/1 var(--display); }
.lp .stat-tiles span { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.lp .themes-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.lp .stage-cap { margin-top: 12px; font-size: 13px; color: var(--text-3); text-align: center; min-height: 20px; }
.lp .stage-cap b { color: var(--text-2); font-weight: 600; }
.lp .t { overflow: hidden; }
.lp .t img { aspect-ratio: 4/5; object-fit: cover; object-position: top; width: 100%; }
.lp .t div { padding: 12px 14px; }
.lp .t b { display: block; font-size: 14px; }
.lp .t .credit b { display: inline; font-size: 12px; }
.lp .beyond { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lp .beyond .lp-card { padding: 28px; display: flex; flex-direction: column; }
.lp .beyond h3 { font: 700 24px/1.25 var(--body); letter-spacing: -.01em; margin: 8px 0 8px; }
.lp .beyond .visual { margin-top: 22px; border-radius: var(--r-md); border: 1px solid var(--hairline); background: var(--deep); padding: 16px; flex: 1; }
.lp .dmsg { display: grid; grid-template-columns: 36px 1fr; gap: 12px; font-size: 14px; }
.lp .dmsg .av { width: 36px; height: 36px; border-radius: 50%; background: #5865F2; display: grid; place-items: center; }
.lp .dmsg .av img { width: 26px; height: 26px; border-radius: 50%; }
.lp .dmsg .who { font-weight: 600; }
.lp .dmsg .who em { font-style: normal; font-size: 10px; background: #5865F2; color: #fff; border-radius: 3px; padding: 1px 4px; margin-left: 6px; vertical-align: 1px; }
.lp .dmsg .cmd { color: var(--text-3); font-size: 13px; margin: 2px 0 8px; }
.lp .dmsg .cmd b { color: #8C95FF; font-weight: 500; }
.lp .embed { border-left: 4px solid var(--orange); background: #1a1c24; border-radius: 4px; padding: 10px 14px; font-variant-numeric: tabular-nums; }
.lp .embed .title { font-weight: 600; margin-bottom: 6px; }
.lp .embed .r { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; color: var(--text-2); font-size: 13px; padding: 2px 0; }
.lp .embed .r b { color: var(--text); }
.lp pre.code { margin: 0; font: 13px/1.6 'Cascadia Code', Consolas, monospace; color: var(--text-2); white-space: pre; overflow: hidden; }
.lp pre.code .k { color: #8C95FF; }
.lp pre.code .s { color: var(--green); }
.lp pre.code .n { color: var(--orange); }
.lp pre.code .m { color: var(--text-3); }
.lp .more-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.lp .more-row .lp-card { padding: 22px 24px; }
.lp .more-row h4 { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.lp .more-row p { font-size: 14px; color: var(--text-2); }
.lp .more-row a { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 600; }
.lp .support-band { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; padding: 44px 48px; border-radius: var(--r-lg); border: 1px solid rgba(242,118,46,.35); background: radial-gradient(90% 140% at 0% 0%, rgba(242,118,46,.16), transparent 60%), var(--raised); }
.lp .support-band h2 { font: 700 32px/1.2 var(--body); letter-spacing: -.02em; margin: 10px 0 12px; }
.lp .sb-actions { margin-top: 24px; }
.lp .sb-levels { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lp .sb-levels li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--deep); font-size: 14px; color: var(--text-2); }
.lp .sb-levels .k { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.lp .sb-levels .m { color: var(--text-2); }
.lp .sb-levels .g { color: var(--green); }
.lp .sb-levels .o { color: var(--orange); }
@media (max-width: 900px) {
  .lp .support-band { grid-template-columns: 1fr; padding: 28px; }
}
@media (max-width: 900px) {
  .lp .hero h1 { font-size: 52px; }
  .lp .scene { height: 340px; }
  .lp .why, .lp .why.flip, .lp .why.stacked .text, .lp .panels, .lp .pa-grid, .lp .beyond, .lp .more-row { grid-template-columns: 1fr; }
  .lp .why.flip .text { order: 0; }
  .lp .options { border-left: 0; border-top: 1px solid var(--hairline); }
  .lp .themes-row { grid-template-columns: 1fr 1fr; }
}

/* ---- support page ---- */
.lp h1.page { font: 800 var(--fs-display-md)/var(--lh-display-md) var(--display); letter-spacing: var(--ls-display-md); margin: 48px 0 0; }
.lp .page-lede { color: var(--text-2); font-size: 18px; line-height: 1.6; margin-top: 12px; max-width: 720px; }
.lp .support { margin: 24px 0 40px; padding: 22px 26px; border-radius: var(--r-md); border: 1px solid var(--hairline); border-left: 3px solid var(--orange); background: var(--raised); }
.lp .support h2 { font: 600 18px/1.35 var(--body); margin-bottom: 8px; }
.lp .support h2 em { font-style: normal; color: var(--orange); }
.lp .support p { color: var(--text-2); font-size: 15px; line-height: 1.6; max-width: 860px; }
.lp .support p + p { margin-top: 6px; }
.lp .support b { color: var(--text); }
.lp .support .steps { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.lp .support .steps span { font-size: 14px; color: var(--text); padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: rgba(11,13,18,.5); }
.lp .support .steps span i { font-style: normal; color: var(--orange); margin-right: 6px; font-weight: 700; }
.lp .key { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.lp .g { color: var(--green); }
.lp .o { color: var(--orange); }
.lp .m { color: var(--text-2); }
.lp .p { color: #B57CFF; }
.lp .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp .tier { padding: 26px; display: flex; flex-direction: column; }
.lp .tier.adv { border-color: rgba(46,212,122,.35); }
.lp .tier.pro { border-color: rgba(242,118,46,.5); }
.lp .tier h3 { font: 700 21px/1.25 var(--body); margin: 6px 0 0; }
.lp .ul { list-style: none; padding: 0; margin: 14px 0 18px; font-size: 14px; color: var(--text-2); flex: 1; }
.lp .ul li { padding: 4px 0 4px 22px; position: relative; }
.lp .ul li::before { content: "✓"; position: absolute; left: 0; color: var(--green); }
.lp .ways { border-top: 1px solid var(--hairline); padding-top: 14px; display: grid; gap: 8px; font-size: 13px; color: var(--text-3); }
.lp .ways div { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lp .ways a { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.lp .ways a:hover { color: var(--orange); }
.lp h2.sec { font: 700 26px/1.2 var(--body); margin: 64px 0 18px; }
.lp .matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; background: var(--raised); border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; }
.lp .matrix th, .lp .matrix td { padding: 12px 18px; border-bottom: 1px solid var(--hairline); text-align: center; }
.lp .matrix th:first-child, .lp .matrix td:first-child { text-align: left; color: var(--text-2); }
.lp .matrix thead th { padding-top: 18px; background: var(--overlay); }
.lp .matrix tr.grp td { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); background: var(--deep); }
.lp .matrix .y { color: var(--green); font-weight: 700; }
.lp .matrix .n { color: var(--text-3); }
.lp .matrix .col-pro { background: rgba(242,118,46,.05); }
.lp .matrix tbody tr:last-child td { border-bottom: 0; }
.lp .fine { font-size: 13px; color: var(--text-3); margin: 14px 0 80px; }
@media (max-width: 900px) {
  .lp .tiers { grid-template-columns: 1fr; }
  .lp .support { padding: 26px; }
  .lp .matrix { font-size: 12px; }
  .lp .matrix th, .lp .matrix td { padding: 8px; }
}

/* ---- site adjustments ---- */
.lp .counters { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.lp a.lp-card, .lp a.lp-card:hover { color: var(--text); }
.lp a.lp-card:hover { border-color: rgba(242,118,46,.5); }
.lp + .site-footer { margin-top: 0; }
.lp .beyond > *, .lp .more-row > *, .lp .why > *, .lp .panels > * { min-width: 0; }
.lp pre.code { overflow-x: auto; }
.lp .hero { overflow-x: clip; }
@media (max-width: 900px) { .lp .lp-card-img figcaption { display: none; } }

/* ---- tools page ---- */
.lp .tl-group { display: flex; align-items: center; gap: 14px; margin: 72px 0 0; }
.lp .tl-group h2 { display: flex; align-items: center; gap: 12px; font: 700 15px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.lp .tl-group h2::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--orange); box-shadow: 0 0 0 4px var(--orange-soft); }
.lp .tl-group.community h2::before { background: #8FB8FF; box-shadow: 0 0 0 4px rgba(143,184,255,.14); }
.lp .tl-group .count { font: 600 12px/1 var(--body); color: var(--text-3); padding: 4px 8px; border-radius: 999px; border: 1px solid var(--hairline); }
.lp .tl-group::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border-strong), transparent); }
.lp .tl-tool { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding: 56px 0; border-bottom: 1px solid var(--hairline); }
.lp .tl-tool > * { min-width: 0; }
.lp .tl-tool.flip .tl-visual { order: 2; }
.lp .tl-tool h3 { font: 700 34px/1.15 var(--body); letter-spacing: -.02em; margin: 0 0 6px; }
.lp .tl-by { font-size: 13px; color: var(--text-3); }
.lp .tl-by b { color: var(--text-2); font-weight: 600; }
.lp .tl-lead { color: var(--text-2); font-size: 17px; margin: 14px 0 18px; }
.lp .tl-tool .ul { margin: 0 0 22px; }
.lp .tl-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 22px; }
.lp .tl-steps div { padding: 12px 14px; border-radius: var(--r-md); background: var(--raised); border: 1px solid var(--hairline); font-size: 13px; color: var(--text-2); }
.lp .tl-steps b { display: block; color: var(--orange); font-size: 12px; letter-spacing: .08em; margin-bottom: 4px; }
.lp .tl-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.lp .tl-note { font-size: 13px; color: var(--text-3); margin-top: 14px; }
.lp .tl-disclaimer { font-size: 13px; color: var(--text-3); border-left: 2px solid var(--border-strong); padding: 2px 0 2px 12px; margin-top: 16px; }
.lp .tl-os { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.lp .tl-os span { font-size: 12px; padding: 3px 9px; border-radius: 6px; background: var(--overlay); color: var(--text-2); border: 1px solid var(--hairline); }
.lp .tl-collage { position: relative; height: 430px; }
.lp .tl-collage img { position: absolute; border-radius: 12px; border: 1px solid var(--hairline); box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.lp .tl-collage .c1 { width: 62%; left: 0; top: 0; height: 430px; object-fit: cover; object-position: top; }
.lp .tl-collage .c2 { width: 58%; right: 0; top: 70px; }
.lp .tl-collage .c3 { width: 50%; right: 6%; bottom: 0; }
.lp .tl-panel { padding: 30px; border-radius: var(--r-lg); border: 1px solid var(--hairline); background: radial-gradient(80% 120% at 100% 0%, rgba(242,118,46,.18), transparent 60%), var(--raised); }
.lp .tl-panel img { width: 100%; border-radius: 10px; border: 1px solid var(--hairline); box-shadow: 0 20px 40px rgba(0,0,0,.45); }
.lp .tl-flow { display: flex; justify-content: space-between; gap: 8px; margin-top: 18px; font-size: 12px; color: var(--text-3); text-align: center; }
.lp .tl-flow span { flex: 1; padding: 8px; border-radius: 8px; background: rgba(11,13,18,.6); border: 1px solid var(--hairline); }
.lp .tl-flow em { font-style: normal; align-self: center; color: var(--orange); }
.lp .tl-banner img { width: 100%; border-radius: 12px; border: 1px solid var(--hairline); box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.lp .tl-submit { margin: 72px 0 88px; padding: 30px 34px; border-radius: var(--r-lg); border: 1px dashed var(--border-strong); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: var(--raised); }
.lp .tl-submit h3 { font: 700 22px/1.25 var(--body); margin-bottom: 6px; }
.lp .tl-submit p { color: var(--text-2); max-width: 680px; }
@media (max-width: 900px) {
  .lp .tl-tool { grid-template-columns: 1fr; gap: 28px; padding: 40px 0; }
  .lp .tl-tool.flip .tl-visual { order: 0; }
  .lp .tl-collage { height: auto; } .lp .tl-collage .c1 { position: static; width: 100%; height: 360px; } .lp .tl-collage .c2, .lp .tl-collage .c3 { display: none; }
  .lp .tl-steps { grid-template-columns: 1fr; }
  .lp .tl-submit { padding: 24px; }
}
@media (max-width: 600px) { .lp .tl-panel { padding: 16px; } .lp .tl-flow { flex-direction: column; } .lp .tl-flow em { transform: rotate(90deg); } }

/* ---- pricing: the tier name is the title, a price slot says where the price is ---- */
.lp .tier h3.tn { font: 700 22px/1.2 var(--body); margin: 0; color: var(--text); }
.lp .tier h3.tn.g { color: var(--green); }
.lp .tier h3.tn.o { color: var(--orange); }
.lp .tier .free-note { margin: 14px 0 0; font-size: 14px; color: var(--text-3); }
.lp .price-slot { margin-top: 16px; }
.lp .price-slot .lbl { font-size: 13px; color: var(--text-3); margin-bottom: 8px; }
.lp .price-slot .plats { display: flex; gap: 8px; }
.lp .price-slot .plats .btn { flex: 1; }
.lp .price-slot .once { margin-top: 10px; font-size: 13px; color: var(--text-3); }
.lp .price-slot .once a { color: var(--text-2); font-weight: 600; }
.lp .price-slot .once a:hover { color: var(--orange); }

/* ---- home: the project numbers stand out more ---- */
.lp .counters { border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--raised); overflow: hidden; }
.lp .counters div { padding: 26px 28px; }
.lp .counters b { font-size: 40px; }
.lp .counters span { font-size: 15px; }

/* ---- game pages (/games/{slug}); text comes from Content/games/{slug}/{lang}.md ---- */
.lp a.game-link { color: var(--text); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.lp a.game-link:hover { color: var(--orange); }
.lp .game { padding-bottom: 96px; }
.lp .game .crumb { margin-top: 40px; font-size: 14px; color: var(--text-3); }
.lp .game .crumb a { color: var(--text-2); }
.lp .game .game-head h1 { font: 800 var(--fs-display-md)/var(--lh-display-md) var(--display); letter-spacing: var(--ls-display-md); margin: 10px 0 0; }
.lp .game .game-head p { color: var(--text-2); font-size: 18px; line-height: 1.6; margin-top: 12px; max-width: 720px; }
.lp .game .game-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; margin-top: 32px; }
.lp .game .game-hero figure { margin: 0; }
.lp .game .game-hero img { width: 100%; max-height: 420px; object-fit: cover; object-position: top; border-radius: var(--r-md); border: 1px solid var(--hairline); box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.lp .game .game-hero figcaption { margin-top: 10px; font-size: 13px; color: var(--text-3); text-align: right; }
.lp .game .vers ul { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lp .game .vers li { padding: 6px 12px; border-radius: 999px; background: var(--raised); border: 1px solid var(--hairline); font-size: 13px; font-weight: 600; }
.lp .game .works ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.lp .game .works.missing ul { margin-top: 12px; }
.lp .game .works li { position: relative; padding-left: 34px; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.lp .game .works li strong { color: var(--text); }
.lp .game .works li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--green-soft); color: var(--green); }
.lp .game .works.missing li::before { content: "—"; background: var(--overlay); color: var(--text-3); }
.lp .game .cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 26px; }
.lp .game .cta small { color: var(--text-3); font-size: 13px; }
.lp .game .game-sec { margin-top: 72px; scroll-margin-top: 80px; }
.lp .game .game-sec > h2 { font: 700 24px/1.25 var(--body); letter-spacing: -.01em; margin-bottom: 18px; }
.lp .game .feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lp .game .feat { padding: 22px; }
.lp .game .feat h3 { font: 600 17px/1.3 var(--body); margin: 0 0 6px; }
.lp .game .feat p { color: var(--text-2); font-size: 15px; }
.lp .game .feat p > em:only-child { display: inline-block; margin-top: 8px; font-style: normal; font-size: 12px; font-weight: 600; color: var(--orange); }
.lp .game .connect { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.lp .game .steps { padding: 22px 24px 10px; }
.lp .game .steps h2 { font: 700 24px/1.25 var(--body); letter-spacing: -.01em; margin: 0 0 6px; }
.lp .game .steps ol { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.lp .game .steps ol li { counter-increment: s; position: relative; padding: 14px 0 14px 44px; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.lp .game .steps ol li + li { border-top: 1px solid var(--hairline); }
.lp .game .steps ol li::before { content: counter(s); position: absolute; left: 0; top: 13px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--orange-soft); color: var(--orange); font-weight: 700; font-size: 14px; }
.lp .game .steps strong { color: var(--text); }
.lp .game .tips { display: grid; gap: 12px; }
.lp .game .tip { padding: 18px 20px; font-size: 14px; color: var(--text-2); }
.lp .game .tip p + p { margin-top: 6px; }
.lp .game .tip strong { color: var(--text); font-size: 15px; }
.lp .game .themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lp .game .themes.t2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
.lp .game .themes.t4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp .game a.lp-card.theme { overflow: hidden; display: block; }
.lp .game .theme img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-bottom: 1px solid var(--hairline); }
.lp .game .theme span { display: block; padding: 12px 14px; font-size: 14px; color: var(--text-3); }
.lp .game .theme span b { color: var(--text); font-weight: 600; }
.lp .game .help { text-align: center; margin-top: 56px; color: var(--text-3); font-size: 14px; }
.lp .game .others { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; font-size: 14px; color: var(--text-3); }
.lp .game .others a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--hairline); color: var(--text-2); }
.lp .game .others a:hover { color: var(--text); border-color: var(--border-strong); }
@media (max-width: 900px) {
  .lp .game .game-hero, .lp .game .connect, .lp .game .feats, .lp .game .themes, .lp .game .themes.t2, .lp .game .themes.t4 { grid-template-columns: 1fr; }
}