:root {
    --bg: #080809;
    --bg-2: #0E0E10;
    --surface: #141416;
    --surface-2: #1A1A1D;
    --surface-3: #1F1F23;
    --border: #24242A;
    --border-2: #2E2E35;
    --text: #F2F2F5;
    --text-2: #9A9AA4;
    --text-3: #5F5F68;

    --lime: #C8FF3E;
    --lime-soft: #A8D932;
    --lime-deep: #6B8B1F;
    --violet: #A78BFA;
    --violet-soft: #8B6FE8;
    --violet-deep: #4C3D8F;

    --win: #6EE27A;
    --loss: #FF6B6B;
    --warn: #F5A524;

    /* tier gradient from app */
    --t-rookie: #B8B8BE;
    --t-scout:  #B8B8BE;
    --t-prospect: #6AA7F5;
    --t-analyst:#4A86E0;
    --t-edge:   #6E7BFF;
    --t-res:    #8B6FE8;
    --t-strat:  #A063F2;
    --t-tact:   #B24EE8;
    --t-gambit: #9333EA;
    --t-pro:    #C23CE0;
    --t-shot:   #DE2FCC;
    --t-spec:   #F124A8;
    --t-elite:  #F11E6A;
    --t-mav:    #F32E2E;
    --t-king:   #F87010;
    --t-prod:   #F8A310;
    --t-ace:    #F8C410;
    --t-legend: #F7D417;
    --t-titan:  #EDE11C;
    --t-apex:   #E8EF26;

    --radius: 14px;
    --radius-lg: 20px;
    --gap: 20px;
    --pad: 20px;
    --section-gap: 88px;
  }

  [data-density="compact"] {
    --gap: 14px;
    --pad: 16px;
    --section-gap: 64px;
  }

  [data-accent="violet"] {
    --lime: var(--violet);
    --lime-soft: var(--violet-soft);
    --lime-deep: var(--violet-deep);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body {
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    overflow-x: clip;
    max-width: 100%;
  }
  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* noise overlay */
  body::before {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 100;
    opacity: 0.035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }

  a { color: inherit; text-decoration: none; }
  button { font: inherit; background: none; border: none; color: inherit; cursor: pointer; }
  img { display: block; max-width: 100%; }

  .display { font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.02em; }
  .mono { font-family: 'JetBrains Mono', monospace; letter-spacing: -0.02em; }

  .container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
  }

  /* ============ NAV ============ */
  nav.top {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  }
  .nav-row {
    display: flex; align-items: center; justify-content: space-between;
    height: 64px;
  }
  .brand {
    display: inline-flex; align-items: baseline;
    font-family: 'Inter', sans-serif;
    font-weight: 700; font-size: 20px;
    letter-spacing: -0.02em;
  }
  .brand .dot { color: var(--lime); }
  .brand-chip {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; font-weight: 600;
    padding: 3px 8px;
    border: 1px solid var(--border-2);
    border-radius: 999px;
    color: var(--text-2);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .nav-links {
    display: none;
    gap: 28px;
    font-size: 14px;
    color: var(--text-2);
  }
  .nav-links a:hover { color: var(--text); }
  .nav-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    background: var(--lime);
    color: #0A0A0A;
    border-radius: 10px;
    font-weight: 600; font-size: 14px;
    transition: transform .15s, filter .15s;
  }
  .nav-cta svg { width: 15px; height: 15px; flex-shrink: 0; }
  .nav-cta { white-space: nowrap; flex-shrink: 0; }
  .nav-cta:hover { filter: brightness(1.05); transform: translateY(-1px); }

  @media (min-width: 820px) {
    .nav-links { display: inline-flex; }
  }

  /* ============ HERO ============ */
  .hero {
    position: relative;
    padding: 56px 0 80px;
    overflow: hidden;
  }
  .hero::before {
    content: '';
    position: absolute;
    top: -200px; left: 50%;
    width: 900px; height: 900px;
    transform: translateX(-50%);
    background: radial-gradient(circle at center, color-mix(in srgb, var(--lime) 12%, transparent), transparent 55%);
    pointer-events: none;
  }
  .hero-inner {
    position: relative;
    display: grid;
    gap: 48px;
  }
  @media (min-width: 900px) {
    .hero { padding: 88px 0 120px; }
    .hero-inner { grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; }
  }

  .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 500;
    color: var(--text-2);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 7px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
  }
  .eyebrow .live {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--lime) 22%, transparent);
    animation: pulse 2s ease-in-out infinite;
  }
  @keyframes pulse {
    0%,100% { opacity: 1; } 50% { opacity: .4; }
  }

  h1.headline {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(42px, 7.2vw, 84px);
    font-weight: 500;
    line-height: 0.96;
    letter-spacing: -0.035em;
    margin: 20px 0 24px;
  }
  h1.headline .strike {
    position: relative;
    color: var(--text-3);
  }
  h1.headline .strike::after {
    content: '';
    position: absolute;
    left: -2%; right: -2%;
    top: 52%;
    height: 4px;
    background: var(--loss);
    transform: rotate(-8deg);
  }
  h1.headline em {
    font-style: normal;
    color: var(--lime);
  }

  .hero-sub {
    font-size: 17px;
    color: var(--text-2);
    max-width: 520px;
    line-height: 1.6;
  }
  .hero-sub b { color: var(--text); font-weight: 500; }

  .cta-row {
    margin-top: 32px;
    display: flex; flex-wrap: wrap; gap: 12px;
  }
  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 22px;
    border-radius: 12px;
    font-weight: 600; font-size: 15px;
    transition: all .18s ease;
    border: 1px solid transparent;
    white-space: nowrap;
  }
  .btn-primary {
    background: var(--lime);
    color: #0A0A0A;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--lime) 40%, transparent);
  }
  .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 32px -4px color-mix(in srgb, var(--lime) 45%, transparent);
  }
  .btn-ghost {
    background: transparent;
    border-color: var(--border-2);
    color: var(--text);
  }
  .btn-ghost:hover {
    border-color: color-mix(in srgb, var(--lime) 55%, var(--border-2));
    background: var(--surface);
  }
  .btn svg { width: 16px; height: 16px; }

  .trust-row {
    margin-top: 32px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-2);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .trust-row span { display: inline-flex; align-items: center; gap: 8px; }
  .trust-row span::before {
    content: ''; width: 5px; height: 5px; border-radius: 50%;
    background: var(--lime);
  }

  /* Hero right: phone + podium card */
  .hero-visual {
    position: relative;
    min-height: 520px;
  }
  .phone-stack {
    position: relative;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }
  .hero-visual { overflow: hidden; }
  @media (min-width: 900px) {
    .hero-visual { overflow: visible; }
  }
  .phone {
    position: relative;
    aspect-ratio: 9 / 19.5;
    border-radius: 44px;
    padding: 7px;
    background: linear-gradient(160deg, #2A2A30, #0A0A0C 65%);
    box-shadow:
      0 40px 80px -24px rgba(0,0,0,0.8),
      0 0 0 1px color-mix(in srgb, var(--border-2) 80%, transparent),
      inset 0 0 0 1.5px rgba(255,255,255,0.03);
    overflow: hidden;
  }
  .phone::before {
    content: '';
    position: absolute;
    top: 14px; left: 50%; transform: translateX(-50%);
    width: 84px; height: 26px;
    background: #000;
    border-radius: 999px;
    z-index: 4;
  }
  .phone-inner {
    position: relative;
    width: 100%; height: 100%;
    border-radius: 38px;
    overflow: hidden;
    background: #000;
  }
  .phone-inner img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top center;
  }

  /* Floating podium card */
  .float-card {
    position: absolute;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px 16px;
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.6);
    animation: floaty 5s ease-in-out infinite;
  }
  @keyframes floaty {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }
  .float-card.card-score {
    top: 8%;
    right: -4%;
    width: 220px;
    animation-delay: .4s;
  }
  .float-card.card-ai {
    bottom: 10%;
    left: -6%;
    width: 240px;
    animation-delay: 1.2s;
  }

  .score-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--text-3);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .score-val {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 22px;
    color: var(--win);
    letter-spacing: -0.02em;
  }
  .score-meta {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-2);
  }
  .score-meta .rank {
    color: var(--lime);
    font-weight: 600;
  }

  .ai-row {
    display: flex; align-items: center; gap: 10px;
  }
  .ai-dot {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--violet) 65%, transparent), var(--violet-deep));
    display: grid; place-items: center;
    flex-shrink: 0;
    box-shadow: 0 0 20px -4px var(--violet);
  }
  .ai-dot svg { color: #fff; width: 16px; height: 16px; }
  .ai-name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 13px;
  }
  .ai-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--text-2);
    letter-spacing: 0.05em;
  }
  .ai-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; font-weight: 600;
    color: var(--violet);
    padding: 2px 6px;
    background: color-mix(in srgb, var(--violet) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--violet) 40%, transparent);
    border-radius: 4px;
    margin-top: 4px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* ============ MARQUEE ============ */
  .marquee {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 20px 0;
    background: var(--bg-2);
    overflow: hidden;
    position: relative;
  }
  .marquee-track {
    display: flex; gap: 56px;
    animation: slide 40s linear infinite;
    white-space: nowrap;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--text-2);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .marquee-track span { display: inline-flex; align-items: center; gap: 12px; }
  .marquee-track b { color: var(--text); font-weight: 600; }
  .marquee-track .pos { color: var(--win); }
  .marquee-track .neg { color: var(--loss); }
  .marquee-track em {
    font-style: normal;
    color: var(--text-3);
  }
  @keyframes slide {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* ============ SECTION ============ */
  section.band {
    padding: var(--section-gap) 0;
    position: relative;
  }
  .eyebrow-center {
    text-align: center;
    margin-bottom: 16px;
  }
  .section-head {
    text-align: center;
    margin-bottom: 56px;
  }
  .section-head h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(30px, 4.2vw, 50px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.04;
    max-width: 760px;
    margin: 0 auto;
  }
  .section-head h2 em { font-style: normal; color: var(--lime); }
  .section-head p {
    margin-top: 18px;
    color: var(--text-2);
    font-size: 17px;
    max-width: 560px;
    margin-left: auto; margin-right: auto;
  }

  /* ============ PROMISE BAND ============ */
  .promise {
    background: var(--bg-2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .promise-grid {
    display: grid;
    gap: 0;
  }
  @media (min-width: 780px) {
    .promise-grid { grid-template-columns: repeat(3, 1fr); }
  }
  .promise-cell {
    padding: 40px 24px;
    border-top: 1px solid var(--border);
  }
  @media (min-width: 780px) {
    .promise-cell { border-top: none; border-left: 1px solid var(--border); }
    .promise-cell:first-child { border-left: none; }
  }
  .promise-cell:first-child { border-top: none; }
  .promise-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: 0.14em;
    margin-bottom: 14px;
  }
  .promise-cell h2,
  .promise-cell h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 12px;
  }
  .promise-cell h2 em,
  .promise-cell h3 em {
    font-style: normal;
    color: var(--lime);
  }
  .promise-cell p {
    color: var(--text-2);
    font-size: 15px;
    line-height: 1.6;
  }

  /* ============ FEATURE SPLIT ============ */
  .split {
    display: grid;
    gap: 40px;
    align-items: center;
  }
  @media (min-width: 900px) {
    .split { grid-template-columns: 1fr 1fr; gap: 72px; }
    .split.reverse { direction: rtl; }
    .split.reverse > * { direction: ltr; }
  }

  .split-text .eyebrow { margin-bottom: 20px; }
  .split-text h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.08;
    margin-bottom: 18px;
  }
  .split-text h3 em {
    font-style: normal;
    color: var(--lime);
  }
  .split-text h3 .vio { color: var(--violet); font-style: normal; }
  .split-text > p {
    color: var(--text-2);
    font-size: 16px;
    line-height: 1.65;
    max-width: 480px;
    margin-bottom: 24px;
  }

  .bullet-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
  .bullet-list li {
    display: flex; gap: 12px;
    font-size: 15px; color: var(--text);
    padding-left: 0;
  }
  .bullet-list li::before { content: none; }
  .bullet-list .tick {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--lime) 18%, transparent);
    color: var(--lime);
    display: grid; place-items: center;
    margin-top: 1px;
  }
  .bullet-list .tick svg { width: 12px; height: 12px; }
  .bullet-list li b {
    font-weight: 600;
    color: var(--text);
  }
  .bullet-list li span {
    color: var(--text-2);
    margin-left: 6px;
  }

  /* ============ ANALYSIS MOCK CARD ============ */
  .analysis-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px;
    position: relative;
    overflow: hidden;
  }
  .analysis-card::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 240px; height: 240px;
    background: radial-gradient(circle, color-mix(in srgb, var(--violet) 22%, transparent), transparent 70%);
    pointer-events: none;
  }
  .ac-row {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
  }
  .ac-fixture {
    display: flex; align-items: center; gap: 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 15px;
    flex-wrap: wrap;
    min-width: 0;
  }
  .ac-fixture .team-name { white-space: nowrap; }
  .ac-fixture .vs { color: var(--text-3); margin: 0 2px; }
  .ac-fixture .crest {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--surface-3);
    display: grid; place-items: center;
    font-size: 11px; color: var(--text);
    flex-shrink: 0;
  }
  @media (max-width: 480px) {
    .ac-fixture { font-size: 13.5px; gap: 6px; }
    .ac-fixture .crest { width: 20px; height: 20px; font-size: 10px; }
  }
  .ac-fixture .crest.milan { background: linear-gradient(135deg, #E3141F, #000 55%); color: #fff; }
  .ac-fixture .crest.verona { background: linear-gradient(135deg, #F6BE00, #1B4E9B 55%); color: #fff; }
  .ac-fixture .crest.freiburg { background: linear-gradient(135deg, #E3141F, #1A1A1D 60%); color: #fff; }
  .ac-fixture .crest.villa { background: linear-gradient(135deg, #95BFE5, #670E36 55%); color: #fff; }

  .ac-tag {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--violet);
    padding: 4px 9px;
    background: color-mix(in srgb, var(--violet) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--violet) 30%, transparent);
    border-radius: 5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .ac-block {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 12px;
  }
  .ac-block.verdict {
    border-left: 3px solid var(--lime);
  }
  .ac-section-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px;
  }
  .ac-section-icon {
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    flex-shrink: 0;
  }
  .ac-section-icon svg { width: 13px; height: 13px; }
  .ac-section-icon.flame {
    background: color-mix(in srgb, var(--warn) 18%, transparent);
    color: var(--warn);
  }
  .ac-section-icon.ball {
    background: color-mix(in srgb, var(--violet) 18%, transparent);
    color: var(--violet);
  }
  .ac-section-icon.bolt {
    background: color-mix(in srgb, var(--lime) 18%, transparent);
    color: var(--lime);
  }
  .ac-section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
  }
  .ac-section-title.upper {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-3);
  }
  .ac-section-title.upper.lime { color: var(--lime); }

  /* Motivation: nested per-team blocks */
  .motivation-team {
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    margin-top: 10px;
  }
  .motivation-team-name {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    letter-spacing: -0.005em;
  }
  .motivation-bullet {
    display: flex; align-items: flex-start; gap: 10px;
    margin-top: 6px;
  }
  .motivation-bullet:first-of-type { margin-top: 0; }
  .motivation-bullet svg {
    width: 12px; height: 12px;
    color: var(--text-3);
    flex-shrink: 0;
    margin-top: 3px;
  }
  .motivation-bullet span {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.5;
    flex: 1;
  }

  /* Goals consensus: 7-dot sentiment spectrum */
  .sentiment-row {
    margin-top: 18px;
  }
  .sentiment-row:first-of-type { margin-top: 0; }
  .sentiment-row-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 10px;
  }
  .sentiment-label {
    font-size: 14px;
    color: var(--text);
    font-weight: 500;
  }
  .sentiment-verdict {
    font-size: 13px;
    font-weight: 600;
  }
  .sentiment-verdict.strong-yes { color: var(--win); }
  .sentiment-verdict.likely { color: var(--win); }
  .sentiment-verdict.lean-yes { color: #86EFAC; }
  .sentiment-verdict.split { color: var(--warn); }
  .sentiment-verdict.lean-no { color: var(--warn); }
  .sentiment-verdict.unlikely { color: var(--loss); }
  .sentiment-verdict.strong-no { color: var(--loss); }
  .sentiment-track {
    position: relative;
    height: 12px;
  }
  .sentiment-track .dim {
    position: absolute;
    width: 7px; height: 7px;
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.38;
  }
  .sentiment-track .active {
    position: absolute;
    width: 12px; height: 12px;
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 12px -1px currentColor;
  }
  .sentiment-track .c-green { background: var(--win); color: var(--win); }
  .sentiment-track .c-leanyes { background: #86EFAC; color: #86EFAC; }
  .sentiment-track .c-amber { background: var(--warn); color: var(--warn); }
  .sentiment-track .c-red { background: var(--loss); color: var(--loss); }

  /* Verdict bullets */
  .verdict-bullet {
    display: flex; align-items: flex-start; gap: 12px;
    margin-top: 10px;
  }
  .verdict-bullet:first-of-type { margin-top: 0; }
  .verdict-bullet::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--lime);
    flex-shrink: 0;
    margin-top: 7px;
  }
  .verdict-bullet span {
    font-size: 13.5px;
    color: var(--text);
    line-height: 1.55;
    flex: 1;
  }

  /* legacy consensus styles (kept in case other pages use them) */
  .consensus-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0;
    border-top: 1px solid var(--border);
    font-size: 13px;
  }
  .consensus-row:first-of-type { border-top: none; }
  .consensus-row .label { color: var(--text-2); }
  .consensus-dots { display: flex; gap: 4px; }
  .consensus-dots .d {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--surface-3);
  }
  .consensus-dots .d.g { background: var(--win); }
  .consensus-dots .d.o { background: var(--warn); }
  .consensus-dots .d.r { background: var(--loss); }
  .consensus-verdict {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
  }
  .consensus-verdict.yes { background: color-mix(in srgb, var(--win) 18%, transparent); color: var(--win); }
  .consensus-verdict.no { background: color-mix(in srgb, var(--loss) 18%, transparent); color: var(--loss); }
  .consensus-verdict.split { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }

  /* ============ LEADERBOARD ============ */
  .lb-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    max-width: 860px;
    margin: 0 auto;
    overflow: hidden;
  }
  .lb-head {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-bottom: 20px;
  }
  .lb-head-left {
    display: flex; align-items: center; gap: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-2);
    white-space: nowrap;
  }
  .lb-head-left .live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--loss);
    animation: pulse 1.5s infinite;
    flex-shrink: 0;
  }
  .lb-tabs {
    display: flex; gap: 6px;
    flex-wrap: wrap;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
  }
  .lb-tabs button {
    padding: 5px 10px;
    border-radius: 6px;
    color: var(--text-2);
    border: 1px solid transparent;
    cursor: default;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
  }
  .lb-tabs button.active {
    color: var(--lime);
    border-color: color-mix(in srgb, var(--lime) 40%, transparent);
    background: color-mix(in srgb, var(--lime) 8%, transparent);
  }
  @media (max-width: 520px) {
    .lb-tabs { gap: 4px; }
    .lb-tabs button { font-size: 10.5px; padding: 4px 8px; }
  }

  .podium {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 8px;
    align-items: end;
    margin-bottom: 28px;
    padding: 20px 0 0;
  }
  .podium-col {
    display: flex; flex-direction: column; align-items: center;
    position: relative;
  }
  .podium-avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    margin-bottom: 10px;
    display: grid; place-items: center;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 20px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
  }
  .podium-col.first .podium-avatar {
    width: 68px; height: 68px;
    background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--violet) 60%, transparent), var(--violet-deep));
    border: 3px solid #E9C646;
    box-shadow: 0 0 30px -4px var(--violet);
    color: #fff;
  }
  .podium-col.second .podium-avatar {
    background: linear-gradient(135deg, #3a3a42, #1e1e22);
    border: 2px solid #9A9AA4;
    color: var(--text);
  }
  .podium-col.third .podium-avatar {
    background: linear-gradient(135deg, #3d2f1f, #1e1a14);
    border: 2px solid #B88A4E;
    color: var(--text);
  }
  .podium-col.first::before {
    content: '🏆';
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%);
    font-size: 22px;
    z-index: 3;
  }

  .podium-name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
    color: var(--text);
  }
  .podium-pts {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 15px;
    color: var(--win);
  }
  .podium-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--text-3);
    margin-top: 2px;
    letter-spacing: 0.06em;
  }
  .podium-block {
    width: 100%;
    margin-top: 12px;
    border-radius: 8px 8px 0 0;
    display: grid; place-items: center;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    color: rgba(255,255,255,0.12);
    font-size: 28px;
    position: relative;
  }
  .podium-col.first .podium-block {
    height: 80px;
    background: linear-gradient(to top, #1a1508, #2a1e0a);
    color: rgba(233, 198, 70, 0.25);
  }
  .podium-col.second .podium-block {
    height: 60px;
    background: linear-gradient(to top, #141417, #1c1c21);
  }
  .podium-col.third .podium-block {
    height: 50px;
    background: linear-gradient(to top, #171210, #221a14);
  }

  .lb-list {
    display: flex; flex-direction: column;
    border-top: 1px solid var(--border);
  }
  .lb-row {
    display: grid;
    grid-template-columns: 32px 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
  }
  .lb-row:last-child { border-bottom: none; }
  .lb-row .rank {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-3);
    font-size: 13px;
    text-align: center;
  }
  .lb-row .who {
    display: flex; align-items: center; gap: 10px;
    min-width: 0;
  }
  .lb-ava {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--surface-3);
    display: grid; place-items: center;
    flex-shrink: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 11px;
  }
  .lb-ava.ai {
    background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--violet) 55%, transparent), var(--violet-deep));
    color: #fff;
  }
  .lb-ava.human { background: color-mix(in srgb, var(--lime) 18%, transparent); color: var(--lime); }
  .lb-name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .lb-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: 0.04em;
  }
  .lb-chip {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .lb-chip.ai { color: var(--violet); background: color-mix(in srgb, var(--violet) 14%, transparent); }
  .lb-chip.hum { color: var(--lime); background: color-mix(in srgb, var(--lime) 14%, transparent); }

  .lb-pts {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 14px;
    text-align: right;
  }
  .lb-pts.pos { color: var(--win); }
  .lb-pts.neg { color: var(--loss); }

  .lb-acc {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-3);
    text-align: right;
    min-width: 42px;
  }

  .lb-foot {
    margin-top: 18px;
    display: flex; justify-content: space-between; align-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: 0.06em;
  }
  .lb-foot a { color: var(--lime); }

  /* ============ RANK LADDER ============ */
  .ladder {
    background: var(--bg-2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .ladder-wrap {
    max-width: 1100px; margin: 0 auto;
  }
  .ladder-track {
    display: grid;
    grid-template-columns: repeat(20, minmax(80px, 1fr));
    gap: 6px;
    overflow-x: auto;
    padding: 20px 4px 30px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-2) transparent;
  }
  .ladder-track::-webkit-scrollbar { height: 8px; }
  .ladder-track::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }

  .rung {
    display: flex; flex-direction: column; align-items: center;
    padding: 14px 8px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    min-width: 0;
    position: relative;
  }
  .rung-n {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--text-3);
    margin-bottom: 6px;
  }
  .rung-name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
    text-align: center;
    line-height: 1.2;
  }
  .rung-pts {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    color: var(--text-3);
    text-align: center;
    letter-spacing: 0.02em;
  }
  .rung .bar {
    position: absolute;
    top: 0; left: 8px; right: 8px;
    height: 3px;
    border-radius: 0 0 3px 3px;
  }

  .ladder-groups {
    display: grid;
    grid-template-columns: 4fr 4fr 4fr 4fr 4fr;
    gap: 6px;
    margin-bottom: 14px;
    padding: 0 4px;
  }
  .lg {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--text-3);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    padding: 8px 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .lg b { color: var(--text-2); font-weight: 600; }

  /* ============ PREDICTION CARD (mock) ============ */
  .pred-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px;
  }
  .pred-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px;
  }
  .pred-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--win);
    padding: 4px 10px;
    background: color-mix(in srgb, var(--win) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--win) 35%, transparent);
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .pred-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: 0.04em;
  }
  .pred-leg {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    gap: 12px;
  }
  .pred-leg:last-of-type { border-bottom: none; }
  .leg-name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 2px;
  }
  .leg-pick {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-2);
    letter-spacing: 0.04em;
  }
  .leg-odds {
    display: flex; align-items: center; gap: 8px;
  }
  .leg-odds .odds {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
  }
  .leg-check {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--win);
    display: grid; place-items: center;
    color: #000;
  }
  .leg-check svg { width: 11px; height: 11px; }
  .leg-live {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--loss);
    display: grid; place-items: center;
    color: #fff;
    animation: pulse 1.5s infinite;
  }
  .leg-live svg { width: 10px; height: 10px; }

  .pred-total {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }
  .pred-total-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .pred-total-pts {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 22px;
    color: var(--win);
  }

  /* ============ HOW IT WORKS ============ */
  .steps-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
  }
  @media (min-width: 680px) {
    .steps-grid { grid-template-columns: repeat(4, 1fr); }
  }
  .step {
    padding: 28px 22px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    position: relative;
    min-height: 200px;
  }
  .step-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--lime);
    margin-bottom: 18px;
    font-weight: 600;
    letter-spacing: 0.08em;
  }
  .step h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.015em;
    margin-bottom: 8px;
  }
  .step p {
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.55;
  }

  /* ============ FINAL CTA ============ */
  .final {
    padding: 120px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .final::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--lime) 12%, transparent), transparent 40%),
      radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--violet) 12%, transparent), transparent 40%);
    pointer-events: none;
  }
  .final h2 {
    position: relative;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(44px, 7vw, 88px);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 0.98;
    max-width: 820px;
    margin: 0 auto 24px;
  }
  .final h2 em { font-style: normal; color: var(--lime); }
  .final p {
    position: relative;
    color: var(--text-2);
    font-size: 18px;
    max-width: 520px;
    margin: 0 auto 32px;
  }
  .final .cta-row { position: relative; justify-content: center; }

  /* ============ FOOTER ============ */
  footer.site {
    padding: 64px 0 32px;
    border-top: 1px solid var(--border);
    background: var(--bg-2);
  }
  .footer-grid {
    display: grid;
    gap: 32px;
    grid-template-columns: 1fr;
    margin-bottom: 40px;
  }
  @media (min-width: 720px) {
    .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  }
  .footer-brand .brand { margin-bottom: 16px; }
  .footer-brand p {
    font-size: 14px;
    color: var(--text-2);
    max-width: 340px;
    line-height: 1.55;
  }
  .footer-col h5 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 14px;
    font-weight: 500;
  }
  .footer-col a {
    display: block;
    font-size: 14px;
    color: var(--text-2);
    padding: 5px 0;
  }
  .footer-col a:hover { color: var(--text); }

  .footer-bottom {
    display: flex; flex-wrap: wrap; gap: 12px;
    justify-content: space-between; align-items: center;
    padding-top: 28px;
    border-top: 1px solid var(--border);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: 0.04em;
  }

  /* small screens */
  @media (max-width: 600px) {
    :root { --section-gap: 72px; }
    .float-card.card-score { right: -8px; width: 180px; padding: 12px 14px; }
    .float-card.card-ai { left: -8px; width: 200px; padding: 12px 14px; }
    .lb-wrap { padding: 18px 14px; }
    .lb-row { grid-template-columns: 26px 1fr auto; gap: 8px; }
    .lb-row .lb-acc { display: none; }
  }


  /* ============ INSTALL / PWA ============ */
  /* Source order is pitch -> steps -> detail, which is the order a phone should
     read it in: someone on mobile is holding the device they will install on,
     so the instructions must not sit below five perks and a footnote. Desktop
     re-forms it into two columns with named areas. */
  .install-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr;
  }
  @media (min-width: 900px) {
    .install-grid {
      grid-template-columns: 1fr 1fr;
      gap: 20px 40px;
      grid-template-areas:
        "copy  card"
        "extra card";
      align-items: start;
    }
    .install-copy { grid-area: copy; }
    .install-card { grid-area: card; align-self: center; }
    .install-extra { grid-area: extra; }
  }

  .install-copy h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.08;
    margin: 16px 0 14px;
  }
  .install-copy h3 em { font-style: normal; color: var(--lime); }
  .install-copy > p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--text-2);
    max-width: 46ch;
  }
  .install-copy .cta-row { margin-top: 26px; }

  /* The CTA label is a full sentence now; let it wrap on a narrow phone rather
     than overflow, since .btn is nowrap by default. */
  .install-copy .btn {
    white-space: normal;
    text-align: center;
  }

  .install-perks {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
  }
  .install-perks li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--text-2);
  }
  .install-perks li b { color: var(--text); font-weight: 600; }
  .install-perks svg {
    width: 16px; height: 16px;
    flex: 0 0 16px;
    margin-top: 3px;
    color: var(--lime);
  }

  .install-note {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-3);
  }

  /* Two paired rows of equal-width cells: the browser install route first, the
     two stores below it. Equal cells are what make it read as a block rather
     than a wrapped row. Single column below 480px, where two nowrap buttons
     would overflow. Scoped by id so other .cta-row instances keep their flex
     layout. */
  #hero-cta,
  #hero-cta-stores,
  #final-cta,
  #final-cta-stores {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 460px;
  }
  /* The final CTA sits in a centred section, so the grid has to centre itself. */
  #final-cta,
  #final-cta-stores { margin-left: auto; margin-right: auto; }
  @media (min-width: 480px) {
    #hero-cta,
    #hero-cta-stores,
    #final-cta,
    #final-cta-stores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  #hero-cta .btn,
  #hero-cta-stores .btn,
  #final-cta .btn,
  #final-cta-stores .btn { justify-content: center; }

  /* The store row follows the explainer paragraph, not the buttons above it,
     so it needs less air than a standalone .cta-row. */
  .cta-row-stores { margin-top: 18px; }

  /* Two-line primary CTA: the payoff rides inside the button rather than
     sitting in prose below it, so the reason to tap is read as part of the tap.
     Grid cells stretch, so the neighbouring button matches this height. */
  .btn-stacked { padding-top: 11px; padding-bottom: 11px; }
  .btn-stacked .btn-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    line-height: 1.15;
  }
  .btn-stacked .btn-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    /* Dark ink at partial strength — the filled button already carries the
       emphasis, the sub-label only has to be readable. */
    color: rgba(10, 10, 10, 0.58);
  }
  .btn-ghost.btn-stacked .btn-sub { color: var(--text-3); }
  /* Centred against the whole stack, the arrow lands in the gap between the two
     lines. Pin it to the label it belongs to. */
  .btn-stacked svg { align-self: flex-start; margin-top: 2px; }

  /* The stores are the secondary route now. Same footprint so the grid still
     reads as a block, one step back in contrast — and it comes back on hover,
     so the button never looks disabled. */
  .btn-quiet {
    color: var(--text-2);
    border-color: var(--border);
    font-weight: 500;
  }
  .btn-quiet svg { opacity: 0.6; }
  .btn-quiet:hover { color: var(--text); }
  .btn-quiet:hover svg { opacity: 1; }

  /* Explains what the Install button does, since the label deliberately doesn't
     say "PWA". The payoff ("no store, no download") lives on the button itself,
     so this line only has to carry the detail. */
  .hero-pwa {
    margin-top: 14px;
    max-width: 48ch;
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-3);
  }

  #install .section-head p b { color: var(--lime); font-weight: 600; }

  /* Platform-aware step card */
  .install-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .install-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
  }
  .install-tab {
    flex: 1;
    padding: 15px 8px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--text-3);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background .18s ease;
  }
  .install-tab:hover { color: var(--text-2); background: var(--surface-2); }
  .install-tab[aria-selected="true"] {
    color: var(--lime);
    border-bottom-color: var(--lime);
    background: var(--surface-2);
  }

  .install-panel { padding: 26px 24px; }
  .install-panel[hidden] { display: none; }

  .install-steps {
    list-style: none;
    counter-reset: instep;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 20px;
  }
  .install-steps li {
    counter-increment: instep;
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 14px;
    align-items: start;
  }
  .install-steps li::before {
    content: counter(instep);
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--lime) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--lime) 35%, transparent);
    color: var(--lime);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
  }
  .install-steps strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 3px;
  }
  .install-steps p {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-2);
    margin: 0;
  }
  /* Inline glyph for "tap the Share icon" — the icon is the instruction. */
  .install-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    margin: 0 2px;
    vertical-align: -6px;
    border-radius: 6px;
    background: var(--surface-3);
    border: 1px solid var(--border-2);
    color: var(--text);
  }
  .install-glyph svg { width: 13px; height: 13px; }

  .install-url {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--lime);
    word-break: break-all;
  }

  .install-foot {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
  }