:root {
        --bg: #0a0a0a;
        --panel-1: #141414;
        --panel-2: #1c1c1c;
        --panel-3: #242424;
        --border: #2a2a2a;
        --border-soft: #1f1f1f;
        --text: #f5f5f5;
        --text-dim: #a0a0a0;
        --text-faint: #6b6b6b;
        --green: #92fe85;
        --green-dim: #6ac85e;
        --magenta: #ff3b76;
        --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        --sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
      }

      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
        padding: 0;
      }

      body {
        background: var(--bg);
        color: var(--text);
        font-family: var(--mono);
        font-size: 13px;
        line-height: 1.55;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      ::selection {
        background: var(--green);
        color: #0a0a0a;
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      /* Grain / subtle noise overlay for atmosphere */
      body::before {
        content: "";
        position: fixed;
        inset: 0;
        background-image: radial-gradient(
            1200px 600px at 20% -10%,
            rgba(146, 254, 133, 0.035),
            transparent 60%
          ),
          radial-gradient(
            900px 500px at 110% 10%,
            rgba(255, 59, 118, 0.025),
            transparent 60%
          );
        pointer-events: none;
        z-index: 0;
      }

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

      .shell {
        position: relative;
        z-index: 2;
        max-width: 1264px;
        margin: 0 auto;
        padding: 28px 32px 30px;
      }

      /* ============ NAV ============ */
      .nav {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        padding: 8px 0 56px;
        max-width: 1123px;
      }

      .brand {
        font-family: var(--mono);
        font-size: 26px;
        font-weight: 400;
        letter-spacing: 0;
        white-space: nowrap;
      }

      .brand .logo {
        display: inline-block;
        vertical-align: middle;
        margin-right: -6px;
        transform: translateY(-2px);
      }

      .nav-right {
        font-family: var(--mono);
        font-size: 13px;
        color: var(--text-dim);
      }

      .nav-right .ea {
        color: var(--green);
        margin-right: 8px;
      }

      .nav-right .nav-mobile.ea {
        margin-right: 0;
      }

      /* Toggle between desktop and mobile variants */
      .nav-right .nav-mobile {
        display: none;
      }

      .eyebrow .eb-mobile {
        display: none;
      }

      /* ============ TERMINAL STRIP ============ */
      .terminal {
        display: none;
        /* Temporarily hidden — toggle to 'flex' to bring it back */
        justify-content: flex-start;
        align-items: center;
        gap: 40px;
        margin-bottom: 52px;
        opacity: 1;
      }

      .terminal .pixel-logo,
      .terminal .lines,
      .terminal .mag-square {
        display: none;
      }

      /* Platform logos group */
      .platform-logos {
        display: flex;
        align-items: center;
        gap: 28px;
      }

      .plogo {
        width: 61px;
        height: 61px;
        display: inline-block;
        cursor: pointer;
        transform: scale(1);
        transition: transform 0.12s ease-out;
      }

      .plogo.pop {
        transform: scale(1.08);
      }

      .plogo.state-done {
        cursor: default;
      }

      .plogo.state-lit {
        cursor: default;
      }

      .plogo .pixel-grid {
        display: grid;
        grid-template-columns: repeat(8, 5px);
        gap: 3px;
      }

      .plogo .pixel {
        width: 5px;
        height: 5px;
        background: transparent;
        border-radius: 1.5px;
        transition: background 0.25s linear;
      }

      /* Shell (pixels with value 1) — dim-white, but turns green when done */
      .plogo .pixel.dim {
        background: rgba(225, 228, 231, 0.2);
      }

      .plogo .pixel.dim.to-green {
        background: rgba(146, 254, 133, 0.2);
      }

      /* Figure (pixels with value 2) — cycle through states */
      .plogo.state-idle .pixel.fig {
        background: rgba(225, 228, 231, 0.5);
      }

      .plogo.state-idle:hover .pixel.fig {
        background: rgba(225, 228, 231, 0.7);
      }

      .plogo.state-lit .pixel.fig {
        background: #e1e4e7;
      }

      .plogo .pixel.fig.to-green {
        background: var(--green);
      }

      /* Long pixel rectangle — 8 rows × 32 cols (animated progress bar) */
      .long-bar {
        display: grid;
        grid-template-columns: repeat(32, 5px);
        gap: 3px;
        opacity: 1;
        transition: opacity 0.4s ease;
      }

      .long-bar.is-visible {
        opacity: 1;
      }

      .long-bar .pixel {
        width: 5px;
        height: 5px;
        border-radius: 1.5px;
        transition: background 0.18s linear;
        will-change: transform;
      }

      .long-bar .pixel.empty {
        background: transparent;
      }

      .long-bar .pixel.dim {
        background: rgba(225, 228, 231, 0.2);
      }

      .long-bar .pixel.on {
        background: #e1e4e7;
      }

      /* Small magenta square — 8x8 grid, inner 4x4 lit */
      .mag-square {
        width: 61px;
        height: 61px;
      }

      .mag-square .pixel-grid {
        display: grid;
        grid-template-columns: repeat(8, 5px);
        gap: 3px;
      }

      .mag-square .pixel {
        width: 5px;
        height: 5px;
        background: transparent;
        border-radius: 1.5px;
      }

      .mag-square .pixel.dim {
        background: rgba(255, 59, 118, 0.2);
      }

      .mag-square .pixel.on {
        background: #ff3b76;
      }

      /* ============ HERO ============ */
      .hero {
        display: grid;
        grid-template-columns: 1fr 500px;
        gap: 48px;
        align-items: center;
        margin-bottom: 104px;
        max-width: 1123px;
      }

      .eyebrow {
        font-family: var(--mono);
        font-weight: 500;
        font-size: 21px;
        letter-spacing: 0;
        color: rgba(146, 254, 133, 0.7);
        margin-bottom: 17px;
        display: inline-block;
      }

      h1 {
        font-family: var(--sans);
        font-weight: 500;
        font-size: 69px;
        line-height: 1.02;
        letter-spacing: -0.025em;
        margin: 0 0 24px;
        padding-bottom: 0.08em;
        background: linear-gradient(90deg, #e1e4e7 0%, #92fe85 25%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
      }

      h1 .accent {
        color: inherit;
      }

      .hero-copy {
        font-family: var(--sans);
        font-weight: 400;
        font-size: 21px;
        line-height: 31px;
        color: rgba(243, 247, 250, 0.75);
        max-width: 540px;
        margin: 0 0 36px;
        letter-spacing: -0.005em;
      }

      .available {
        font-family: var(--sans);
        font-weight: 400;
        font-size: 16px;
        color: rgba(243, 247, 250, 0.5);
        line-height: 1.6;
        margin-bottom: 14px;
      }

      .available a, .available strong {
        color: var(--text);
        border-bottom: none;
      }

      .available .mobile-only-br {
        display: none;
      }

      .store-icons {
        display: flex;
        gap: 24px;
        margin-top: 4px;
      }

      .store-icon {
        display: inline-flex;
        color: var(--text);
        transition: color 0.2s, transform 0.2s;
      }

      .store-icon:hover {
        transform: translateY(-1px);
      }

      .store-icon.dim {
        opacity: 0.25;
      }

      .store-icon svg {
        width: 38px;
        height: 38px;
        display: block;
      }

      /* ============ FORM ============ */
      .form-card {
        background: linear-gradient(
            135deg,
            rgba(225, 228, 231, 0.05) 0%,
            rgba(225, 228, 231, 0) 100%
          ),
          var(--panel-1);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 25px;
        width: 500px;
        display: grid;
        grid-template-columns: 170px 1fr;
        column-gap: 25px;
        row-gap: 19px;
      }

      .field {
        display: flex;
        flex-direction: column;
        gap: 10px;
        grid-column: 1 / -1;
      }

      .field.half {
        grid-column: auto;
      }

      .field.full {
        grid-column: 1 / -1;
      }

      .field label {
        font-family: var(--mono);
        font-weight: 400;
        font-size: 15px;
        letter-spacing: 0;
        color: var(--text);
      }

      .field .with-info {
        display: inline-flex;
        align-items: center;
        gap: 10px;
      }

      .info-icon {
        width: 22px;
        height: 22px;
        display: inline-grid;
        place-items: center;
        color: var(--green);
        cursor: help;
      }

      .info-icon svg {
        width: 100%;
        height: 100%;
        display: block;
      }

      .input,
      .select {
        width: 100%;
        background: #1f2526;
        border: none;
        box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.25);
        border-radius: 8px;
        color: var(--text);
        font-family: var(--mono);
        font-weight: 400;
        font-size: 15px;
        padding: 0 16px;
        height: 45px;
        transition: box-shadow 0.15s, background 0.15s;
      }

      .input::placeholder {
        color: rgba(243, 247, 250, 0.35);
      }

      .input:focus,
      .select:focus {
        outline: none;
        box-shadow: inset 0 0 0 1px var(--green);
        background: #252c2d;
      }

      .select {
        appearance: none;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'><path d='M1 1l6 6 6-6' stroke='%23a0a0a0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
        background-repeat: no-repeat;
        background-position: right 16px center;
        padding-right: 40px;
        color: var(--text);
      }

      .select:has(option[value=""]:checked) {
        color: rgba(243, 247, 250, 0.35);
      }

      .input-wrap {
        position: relative;
      }

      .input-wrap .copy-btn {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        background: transparent;
        border: none;
        color: var(--text-dim);
        cursor: pointer;
        border-radius: 6px;
      }

      .input-wrap .copy-btn:hover {
        background: var(--panel-3);
        color: var(--text);
      }

      .input-wrap .copy-btn svg {
        width: 18px;
        height: 18px;
      }

      .consent {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 21px 1fr;
        gap: 18px;
        align-items: start;
        font-family: var(--mono);
        font-weight: 400;
        font-size: 15px;
        color: var(--text);
        line-height: 1.55;
      }

      .consent input[type="checkbox"] {
        appearance: none;
        width: 21px;
        height: 21px;
        border: 1.5px solid #3a3a3a;
        border-radius: 4px;
        background: transparent;
        margin: 0;
        cursor: pointer;
        position: relative;
        flex-shrink: 0;
      }

      .consent input[type="checkbox"]:checked {
        background: var(--green);
        border-color: var(--green);
      }

      .consent input[type="checkbox"]:checked::after {
        content: "";
        position: absolute;
        left: 7px;
        top: 2px;
        width: 5px;
        height: 11px;
        border: solid #0a0a0a;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
      }

      .consent a {
        color: var(--text);
        border-bottom: none;
        font-weight: 500;
      }

      .btn-primary {
        grid-column: 1 / -1;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        background: var(--green);
        color: #0a0a0a;
        font-family: var(--mono);
        font-weight: 600;
        font-size: 18px;
        letter-spacing: 0;
        white-space: nowrap;
        padding: 0 18px 0 16px;
        height: 45px;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        transition: background 0.15s, transform 0.1s;
      }

      .btn-primary:hover {
        background: #a8ff9b;
      }

      .btn-primary:active {
        transform: translateY(1px);
      }

      .btn-primary svg {
        width: 24px;
        height: 24px;
      }

      .btn-primary:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      .btn-primary:disabled:hover {
        background: var(--green);
      }

      /* Invalid field (failed client-side validation) — shares the error red */
      .input.is-invalid,
      .select.is-invalid {
        box-shadow: inset 0 0 0 1px #ff3d61;
      }

      .consent.is-invalid input[type="checkbox"] {
        border-color: #ff3d61;
      }

      /* Disabled form state */
      .form-card.is-submitting .input,
      .form-card.is-submitting .select,
      .form-card.is-submitting .consent input,
      .form-card.is-submitting .copy-btn {
        pointer-events: none;
        opacity: 0.6;
      }

      /* Error message below the form container */
      .form-error {
        font-family: var(--mono);
        font-size: 13px;
        line-height: 1.4;
        color: #ff3d61;
        text-align: center;
        margin-top: 16px;
        display: none;
      }

      .form-error.is-visible {
        display: block;
      }

      /* ============ DISCORD COMMUNITY BLOCK ============ */
      .community-block {
        margin-top: 18px;
        padding: 18px 4px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 32px;
      }

      .community-text {
        font-family: var(--sans);
        font-weight: 400;
        font-size: 19px;
        line-height: 28px;
        color: rgba(243, 247, 250, 0.75);
        max-width: 560px;
        margin: 0;
        letter-spacing: -0.005em;
      }

      .btn-discord {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        background: #5865f2;
        color: #fff;
        font-family: var(--mono);
        font-weight: 600;
        font-size: 18px;
        letter-spacing: 0;
        white-space: nowrap;
        padding: 0 28px;
        min-width: 180px;
        height: 45px;
        border: none;
        border-radius: 10px;
        text-decoration: none;
        cursor: pointer;
        transition: background 0.15s, transform 0.1s;
        flex-shrink: 0;
      }

      .btn-discord:hover {
        background: #6d76f4;
      }

      .btn-discord:active {
        transform: translateY(1px);
      }

      .btn-discord svg {
        width: 28px;
        height: 21px;
        display: block;
      }

      /* Success state */
      .form-success {
        display: none;
      }

      .form-wrap.is-submitted #signup-form {
        display: none;
      }

      .form-wrap.is-submitted .form-success {
        background: linear-gradient(
            135deg,
            rgba(225, 228, 231, 0.05) 0%,
            rgba(225, 228, 231, 0) 100%
          ),
          var(--panel-1);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 25px;
        width: 500px;
        height: 575px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        animation: successIn 0.4s ease forwards;
      }

      .form-success-eyebrow {
        font-family: var(--mono);
        font-weight: 500;
        font-size: 16px;
        letter-spacing: 0;
        color: var(--text);
        text-transform: uppercase;
      }

      .form-success-icon {
        align-self: center;
        width: 183px;
        height: 183px;
        display: block;
      }

      .form-success-icon .pixel-grid {
        display: grid;
        grid-template-columns: repeat(8, 15px);
        gap: 9px;
      }

      .form-success-icon .pixel {
        width: 15px;
        height: 15px;
        background: transparent;
        border-radius: 3px;
      }

      .form-success-icon .pixel.dim {
        background: rgba(146, 254, 133, 0.2);
      }

      .form-success-icon .pixel.on {
        background: var(--green);
      }

      .form-success-text {
        font-family: var(--mono);
        font-weight: 400;
        font-size: 18px;
        line-height: 28px;
        color: rgba(243, 247, 250, 0.5);
        letter-spacing: 0;
        text-transform: uppercase;
      }

      @keyframes successIn {
        from {
          opacity: 0;
          transform: translateY(6px);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* ============ SECTIONS ============ */
      .section {
        margin-bottom: 96px;
        max-width: 1123px;
      }

      .section-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--mono);
        font-weight: 500;
        font-size: 16px;
        letter-spacing: 0;
        color: var(--green);
        margin-bottom: 13px;
      }

      .section-eyebrow .dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--green);
        box-shadow: 0 0 10px rgba(146, 254, 133, 0.5);
      }

      .section-eyebrow.muted {
        color: #bbb59a;
      }

      .section-eyebrow.muted .dot {
        background: #bbb59a;
        box-shadow: 0 0 10px rgba(187, 181, 154, 0.4);
      }

      .section-eyebrow.plain {
        color: var(--text-dim);
      }

      .section-eyebrow.plain .dot {
        background: var(--text-dim);
        box-shadow: none;
      }

      h2 {
        font-family: var(--sans);
        font-weight: 600;
        font-size: 32px;
        line-height: 1.1;
        letter-spacing: -0.02em;
        margin: 0 0 14px;
        color: var(--text);
      }

      .section-sub {
        font-family: var(--sans);
        font-weight: 400;
        font-size: 21px;
        line-height: 31px;
        color: rgba(243, 247, 250, 0.75);
        max-width: 720px;
        margin: 0 0 36px;
        letter-spacing: -0.005em;
      }

      /* ============ FEATURE GRID ============ */
      .features {
        display: grid;
        grid-template-columns: repeat(3, 357px);
        gap: 25px;
      }

      .feature {
        background: linear-gradient(
            135deg,
            rgba(225, 228, 231, 0.05) 0%,
            rgba(225, 228, 231, 0) 100%
          ),
          var(--panel-1);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 28px 15px 28px 15px;
        width: 357px;
        height: 295px;
        transition: border-color 0.2s, background 0.2s, transform 0.25s;
        position: relative;
      }

      .feature:hover {
        border-color: #3a3a3a;
        background: #161616;
        transform: translateY(-2px);
      }

      .feature .card-icon {
        width: 69px;
        height: 69px;
        margin-bottom: 25px;
        display: block;
      }

      .feature .card-icon .pixel-grid {
        display: grid;
        grid-template-columns: repeat(8, 6px);
        gap: 3px;
      }

      .feature .card-icon .pixel {
        width: 6px;
        height: 6px;
        background: transparent;
        border-radius: 2px;
      }

      .feature .card-icon .pixel.dim {
        background: rgba(225, 228, 231, 0.2);
      }

      .feature .card-icon .pixel.on {
        background: #e1e4e7;
      }

      .feature.magnet-target .card-icon .pixel {
        will-change: transform;
      }

      /* ============ MAGNETIC HERO ICON ============ */
      .magnet-hero {
        display: none;
        /* Temporarily hidden — toggle to 'flex' to bring it back */
        justify-content: center;
        align-items: center;
        margin-bottom: 48px;
        max-width: 1123px;
      }

      .magnet-target-hero {
        width: 69px;
        height: 69px;
        display: block;
        cursor: pointer;
      }

      .magnet-target-hero .pixel-grid {
        display: grid;
        grid-template-columns: repeat(8, 6px);
        gap: 3px;
      }

      .magnet-target-hero .pixel {
        width: 6px;
        height: 6px;
        background: transparent;
        border-radius: 2px;
        will-change: transform;
      }

      .magnet-target-hero .pixel.dim {
        background: rgba(225, 228, 231, 0.2);
      }

      .magnet-target-hero .pixel.on {
        background: #e1e4e7;
      }

      .feature h3 {
        font-family: var(--sans);
        font-weight: 500;
        font-size: 23px;
        letter-spacing: -0.005em;
        margin: 0 0 8px;
        color: #f3f7fa;
      }

      .feature p {
        font-family: var(--sans);
        font-weight: 400;
        font-size: 16px;
        line-height: 25px;
        color: rgba(243, 247, 250, 0.5);
        margin: 0;
        letter-spacing: -0.005em;
      }

      .available-footnote {
        font-family: var(--sans);
        font-weight: 400;
        font-size: 16px;
        color: rgba(243, 247, 250, 0.5);
        text-align: left;
        margin-top: 28px;
      }

      .available-footnote a, .available-footnote strong {
        color: var(--text);
        border-bottom: none;
      }

      /* ============ VISION (compact feature grid) ============ */
      .vision-grid {
        display: grid;
        grid-template-columns: repeat(3, 357px);
        gap: 25px;
      }

      .vision-card {
        background: linear-gradient(
            135deg,
            rgba(225, 228, 231, 0.05) 0%,
            rgba(225, 228, 231, 0) 100%
          ),
          var(--panel-1);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 28px 15px 28px 15px;
        width: 357px;
        height: 201px;
        transition: border-color 0.2s, background 0.2s, transform 0.25s;
      }

      .vision-card:hover {
        border-color: #3a3a3a;
        background: #161616;
        transform: translateY(-2px);
      }

      .vision-card h3 {
        font-family: var(--sans);
        font-weight: 500;
        font-size: 23px;
        letter-spacing: -0.005em;
        margin: 0 0 8px;
        color: #f3f7fa;
      }

      .vision-card p {
        font-family: var(--sans);
        font-weight: 400;
        font-size: 16px;
        line-height: 25px;
        color: rgba(243, 247, 250, 0.5);
        margin: 0;
        letter-spacing: -0.005em;
      }

      /* ============ FAQ ============ */
      .faq-eyebrow {
        margin-bottom: 13px;
      }

      .faq h2 {
        margin-bottom: 30px;
      }

      .faq-list {
        border-top: 1px solid var(--border-soft);
      }

      .faq-item {
        border-bottom: 1px solid var(--border-soft);
      }

      .faq-q {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: transparent;
        border: none;
        padding: 18px 4px;
        font-family: var(--mono);
        font-weight: 400;
        font-size: 24px;
        color: var(--text);
        cursor: pointer;
        text-align: left;
      }

      .faq-q .sign {
        font-family: var(--mono);
        color: var(--text-dim);
        font-size: 28px;
        font-weight: 300;
        transition: transform 0.2s, color 0.2s;
      }

      .faq-item.open .faq-q .sign {
        color: var(--green);
      }

      .faq-a {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
      }

      .faq-a-inner {
        padding: 0 4px 20px;
        font-family: var(--sans);
        font-weight: 400;
        font-size: 17px;
        line-height: 26px;
        color: rgba(243, 247, 250, 0.5);
        letter-spacing: -0.005em;
        max-width: 720px;
      }

      .faq-a-inner a {
        color: var(--text);
        transition: color 0.15s;
      }

      .faq-a-inner a:hover {
        color: var(--green);
      }

      .faq-item.open .faq-a {
        max-height: 500px;
      }

      .community-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 22px 4px 0;
        font-family: var(--mono);
        font-weight: 400;
        font-size: 26px;
        color: var(--text);
      }

      /* ============ CTA ============ */
      .cta h2 {
        font-size: 32px;
        max-width: 560px;
      }

      .cta h2 .accent {
        color: var(--text);
      }

      .section.cta {
        margin-bottom: 68px;
      }

      .cta .btn-primary {
        display: inline-flex;
        width: auto;
        min-width: 326px;
        margin-top: 8px;
      }

      /* ============ FOOTER DIVIDER (pixel dotted line) ============ */
      .pixel-divider {
        max-width: 1123px;
        height: 2px;
        margin-top: 16px;
        /* 2px pixel + 2px gap, repeating horizontally — matches nav/footer logo scale */
        background-image: linear-gradient(
          to right,
          rgba(225, 228, 231, 0.2) 0,
          rgba(225, 228, 231, 0.2) 2px,
          transparent 2px,
          transparent 4px
        );
        background-size: 4px 2px;
        background-repeat: repeat-x;
        background-position: 0 center;
      }

      /* ============ FOOTER ============ */
      .footer {
        max-width: 1123px;
        margin-top: 12px;
        padding: 16px 0 0;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 24px;
      }

      .footer-copy {
        font-family: var(--mono);
        font-size: 13px;
        letter-spacing: 0.08em;
        color: var(--text);
        text-transform: uppercase;
      }

      .footer-copy .fc-medium {
        font-weight: 500;
      }

      .footer-copy .fc-regular {
        font-weight: 400;
      }
      .footer-copy ul {
        margin-left: 20px;
        padding: 0;
        display: inline;
      }
      .footer-copy li {
        display: inline-block;
      }
      .footer-copy li:not(:first-child) {
        margin-left: 16px;
      }
      .footer-copy a {
        &:hover {
          opacity: 100%;
        }
        opacity: 50%;
      }

      .footer-marks {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        justify-self: end;
      }

      .footer-marks .diver-logo {
        width: 23px;
        height: 30px;
        display: block;
        color: var(--text);
      }

      .footer-marks .diver-logo svg {
        width: 100%;
        height: 100%;
        display: block;
      }

      .footer-marks .logo.small {
        display: inline-block;
      }

      /* ============ PIXEL LOGOS ============ */
      .pixel-grid {
        display: grid;
        gap: 2px;
      }

      .pixel {
        background: #3a3a3a;
        border-radius: 1px;
      }

      .pixel.on {
        background: #e5e5e5;
      }

      .pixel.on-green {
        background: var(--green);
      }

      .pixel.on-yellow {
        background: #fde047;
      }

      /* Brand logo (nav) — 8x8 pixel grid */
      .brand .logo {
        display: inline-block;
      }

      .logo.small .pixel-grid {
        grid-template-columns: repeat(8, 2px);
        gap: 2px;
      }

      .logo.small .pixel {
        width: 2px;
        height: 2px;
        background: transparent;
        border-radius: 0.5px;
      }

      .logo.small .pixel.dim {
        background: rgba(225, 228, 231, 0.2);
      }

      .logo.small .pixel.on {
        background: #e1e4e7;
      }

      /* Terminal-strip logo — same 8x8 donut as brand, scaled up */
      .pixel-logo .pixel-grid {
        grid-template-columns: repeat(8, 5px);
        gap: 3px;
      }

      .pixel-logo .pixel {
        width: 5px;
        height: 5px;
        background: transparent;
        border-radius: 1.5px;
      }

      .pixel-logo .pixel.dim {
        background: rgba(225, 228, 231, 0.2);
      }

      .pixel-logo .pixel.on {
        background: #e1e4e7;
      }

      /* Feature card logo styles removed — cards now use a simple square placeholder (see .card-icon above) */

      /* ============ RESPONSIVE ============ */
      @media (max-width: 768px) {
        /* Shell: tighter padding */
        .shell {
          padding: 20px 18px 30px;
        }

        /* Nav: reduce bottom padding */
        .nav {
          padding: 8px 0 32px;
        }

        /* Nav brand: smaller */
        .brand {
          font-size: 22px;
        }

        /* H1: fits in 2 lines at mobile width */
        h1 {
          font-size: 44px;
        }

        /* Eyebrow: fits in one line */
        .eyebrow {
          font-size: 17px;
        }

        /* Nav right: hide on mobile */
        .nav-right {
          display: none;
        }

        /* Eyebrow: use desktop variant on mobile too */
        .eyebrow .eb-mobile {
          display: none;
        }

        /* Available: show extra br for 3-line layout */
        .available .mobile-only-br {
          display: inline;
        }

        /* Hero: single column, form below */
        .hero {
          grid-template-columns: 1fr;
          gap: 40px;
          align-items: start;
          margin-bottom: 64px;
        }

        /* Form: full width, single column */
        .form-wrap {
          width: 100%;
        }

        .form-card {
          width: 100%;
          grid-template-columns: 1fr;
          column-gap: 0;
        }

        /* Half fields become full width in mobile */
        .field.half {
          grid-column: 1 / -1;
        }

        /* Success state matches form width */
        .form-wrap.is-submitted .form-success {
          width: 100%;
          height: auto;
          min-height: 420px;
        }

        /* Features and vision: single column */
        .features,
        .vision-grid {
          grid-template-columns: 1fr;
        }

        .feature,
        .vision-card {
          width: 100%;
          height: auto;
          min-height: 0;
        }

        /* FAQ: smaller question size, gap to the +/- sign, align sign to top */
        .faq-q {
          font-size: 19px;
          gap: 16px;
          align-items: flex-start;
        }

        .faq-q .sign {
          flex-shrink: 0;
          line-height: 1;
          margin-top: 2px;
        }

        /* Section spacing tighter */
        .section {
          margin-bottom: 64px;
        }

        /* Community block: stack text + button */
        .community-block {
          flex-direction: column;
          align-items: flex-start;
          gap: 20px;
        }

        .btn-discord {
          width: 100%;
          justify-content: center;
        }

        /* CTA button: full width in mobile to match Discord button */
        .cta .btn-primary {
          width: 100%;
          min-width: 0;
        }

        /* Footer: tighter gap from divider */
        .footer {
          margin-top: 14px;
        }
      }

      /* Narrow phones (iPhone SE, 12/13/14 series, XR, Plus, Pro Max) */
      @media (max-width: 430px) {
        h1 {
          font-size: 40px;
        }

        .eyebrow {
          font-size: 15px;
        }

        .hero-copy {
          font-size: 18px;
          line-height: 27px;
        }

        .footer-copy ul {
          margin-left: 0;
        }
        .footer-copy ul li:not(:first-child) {
          margin-left: 0px;
        }
      }

      /* Entrance animations */
      .fade-in {
        opacity: 0;
        transform: translateY(8px);
        animation: fadeUp 0.6s ease forwards;
      }

      .fade-in.d1 {
        animation-delay: 0.05s;
      }

      .fade-in.d2 {
        animation-delay: 0.15s;
      }

      .fade-in.d3 {
        animation-delay: 0.25s;
      }

      .fade-in.d4 {
        animation-delay: 0.35s;
      }

      @keyframes fadeUp {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }