/* index.css — extracted from inline <style> blocks. Generated by scripts/h1-extract.mjs */
:root {
        --bg-card: #110812;
        --bg-terminal: #080510;
        --green: #ffb84d;
        --green-dim: #cc8a2a;
        --green-muted: #66421a;
        --green-dark: #2e1d08;
        --green-glow: rgba(255, 184, 77, 0.14);
        --green-glow-strong: rgba(255, 184, 77, 0.28);
        --text-dim: #d1965a;
        --text-muted: #7a4a1c;
        --white: #ffe7c4;
      }
      .wrap { max-width: 1100px; margin: 0 auto; padding: 56px 24px 120px; position: relative; z-index: 2; }

      .hero {
        text-align: center;
        padding: 36px 20px 30px;
        border: 1px solid var(--green-dark);
        background: var(--bg-card);
        margin-bottom: 26px;
        position: relative;
        overflow: hidden;
      }
      .hero::before {
        content: "";
        position: absolute; inset: 0;
        background:
          radial-gradient(ellipse at center, rgba(255, 184, 77, 0.08), transparent 60%);
        pointer-events: none;
      }
      .hero .tag {
        color: var(--green);
        font-size: 11px;
        letter-spacing: 4px;
        text-transform: uppercase;
      }
      .hero h1 {
        font-size: 44px;
        color: var(--green);
        text-shadow: 0 0 18px var(--green-glow-strong);
        margin: 8px 0 12px;
        letter-spacing: 2px;
      }
      .hero p {
        color: var(--text-dim);
        font-size: 13px;
        max-width: 720px;
        margin: 0 auto 14px;
        line-height: 1.7;
      }
      .hero .subline {
        color: var(--white);
        font-size: 12px;
        letter-spacing: 1px;
      }
      .hero .subline strong { color: var(--green); }

      .intro-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 14px;
        margin: 26px 0 30px;
      }
      @media (max-width: 840px) { .intro-grid { grid-template-columns: 1fr; } }
      .intro-card {
        border: 1px solid var(--green-dark);
        background: var(--bg-terminal);
        padding: 18px 20px;
      }
      .intro-card h3 {
        color: var(--green);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 8px;
      }
      .intro-card p {
        color: var(--text-dim);
        font-size: 12px;
        line-height: 1.7;
        margin: 0;
      }

      .tiers {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 18px;
      }
      @media (max-width: 960px) { .tiers { grid-template-columns: 1fr; } }

      .tier {
        border: 1px solid var(--green-dark);
        background: var(--bg-card);
        padding: 22px 22px 20px;
        display: flex;
        flex-direction: column;
        position: relative;
        min-height: 330px;
      }
      .tier::after {
        content: "";
        position: absolute; inset: 0;
        border: 1px solid transparent;
        pointer-events: none;
        transition: border-color 0.18s;
      }
      .tier.live::after { border-color: var(--green); box-shadow: 0 0 22px var(--green-glow); }
      .tier.soon { opacity: 0.75; }

      .tier .weight {
        color: var(--text-muted);
        font-size: 10px;
        letter-spacing: 3px;
        text-transform: uppercase;
      }
      .tier h2 {
        font-size: 22px;
        color: var(--green);
        margin: 6px 0 4px;
        letter-spacing: 1px;
      }
      .tier .status-pill {
        display: inline-block;
        font-size: 10px;
        letter-spacing: 2px;
        text-transform: uppercase;
        padding: 2px 8px;
        border: 1px solid var(--green-muted);
        color: var(--text-dim);
        margin-bottom: 12px;
        align-self: flex-start;
      }
      .tier.live .status-pill {
        color: var(--green);
        border-color: var(--green);
        background: rgba(255, 184, 77, 0.08);
      }
      .tier p {
        color: var(--text-dim);
        font-size: 12px;
        line-height: 1.7;
        margin: 0 0 12px;
      }
      .tier ul {
        list-style: none;
        padding: 0;
        margin: 0 0 18px;
        font-size: 11px;
        color: var(--white);
      }
      .tier ul li { padding: 3px 0; }
      .tier ul li::before { content: "▸ "; color: var(--green); }

      .tier .cta {
        margin-top: auto;
        display: inline-block;
        text-align: center;
        padding: 10px 14px;
        border: 1px solid var(--green);
        color: var(--green);
        text-decoration: none;
        font-size: 11px;
        letter-spacing: 2px;
        text-transform: uppercase;
        transition: background 0.15s;
      }
      .tier .cta:hover { background: var(--green-dark); }
      .tier.soon .cta {
        border-color: var(--green-muted);
        color: var(--text-dim);
        pointer-events: none;
      }

      .how-it-works {
        margin-top: 40px;
        border: 1px solid var(--green-dark);
        background: var(--bg-card);
        padding: 24px 28px;
      }
      .how-it-works h2 {
        color: var(--green);
        font-size: 14px;
        letter-spacing: 3px;
        text-transform: uppercase;
        margin-bottom: 14px;
      }
      .how-it-works ol {
        color: var(--text-dim);
        font-size: 12px;
        line-height: 1.9;
        padding-left: 22px;
      }
      .how-it-works ol li strong { color: var(--green); }

      .auth-banner {
        margin: 16px 0 28px;
        padding: 14px 18px;
        border: 1px dashed var(--green-muted);
        background: rgba(255, 184, 77, 0.04);
        font-size: 12px;
        color: var(--text-dim);
      }
      .auth-banner.signed-in { border-style: solid; border-color: var(--green); color: var(--white); }
      .auth-banner a { color: var(--green); text-decoration: underline; }
      .auth-banner strong { color: var(--green); }

      body { padding-top: 64px; }