/* ── Game theme (Option C, "Faraday Land") ─────────────────────────────────────
   Brings the landing page in line with the game's own UI language while keeping the
   existing palette, button colors, header, and every image untouched. Purely borders,
   fonts, and CSS patterns — no new art. Loaded last so it layers over the page styles.
   Remove the single <link> in index.html to revert. ─────────────────────────── */

/* Pixel corners: notched octagon on cards, buttons, and frames */
.step, .cv-stat, .team-card, .features-list .item, .video-embed, .hero-video-col,
.device-grid img, .reserve-cta, .hero-reserve-btn, .play-hero-btn, .kaidobot-bar {
    border-radius: 0 !important;
    clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px),
                       calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}

/* Breadboard dot grid on the mint sections */
.hero-media, .features, .device-section, .cv-section, .how-it-works, .team, .demo-section, .cta {
    background-image: radial-gradient(circle, rgba(13,148,136,.26) 1.6px, transparent 1.8px) !important;
    background-size: 14px 14px !important;
}

/* Pixel dividers + pixel underline under section titles */
.divider {
    height: 4px !important; border: none !important;
    background: repeating-linear-gradient(90deg, #0D9488 0 8px, transparent 8px 16px) !important;
}
section h2::after {
    content: ""; display: block; width: 72px; height: 4px; margin: 10px auto 0;
    background: repeating-linear-gradient(90deg, #0D9488 0 8px, transparent 8px 12px);
}

/* Section titles + card titles in the game's pixel font */
section h2 { font-family: 'Press Start 2P', cursive !important; font-size: 1.05rem !important; line-height: 1.7 !important; color: #0D9488 !important; }
.step h3, .team-card h3, .video-item h3, .cv-stat .label { font-family: 'Press Start 2P', cursive !important; font-size: .62rem !important; line-height: 1.7 !important; }

/* The story reads as a Kaido dialogue box: navy panel, mint text, mint inner frame */
.hero { background: #0f2c30 !important; background-image: none !important; outline: 3px solid #14B8A6; outline-offset: -14px; }
.hero p.intro, .hero p.story { color: #EAF7F4 !important; }
.hero .highlight { color: #5EEAD4 !important; }

/* Cards as RPG windows: mint fill, teal frame, navy offset shadow */
.step, .team-card, .features-list .item { background: #EAF7F4 !important; border: 3px solid #0D9488 !important; box-shadow: 4px 4px 0 0 #0f2c30 !important; }

/* HUD stat counters */
.cv-stat { background: #0f2c30 !important; border: 3px solid #14B8A6 !important; box-shadow: 4px 4px 0 0 #0f2c30 !important; }
.cv-stat .label { color: #EAF7F4 !important; }
.cv-stat .value { font-family: 'Press Start 2P', cursive !important; font-size: 1.05rem !important; color: #5EEAD4 !important; }

/* Team cards in the NPC parchment the villagers speak in */
.team-card { background: #F6ECD2 !important; border: 3px solid #8B5E34 !important; box-shadow: 4px 4px 0 0 #8B5E34 !important; }
.team-card h3 { color: #3B2A14 !important; }
.team-card .role { color: #7A5230 !important; }
.team-card p { color: #4A3820 !important; }

/* Game button glyphs on the calls to action (colors unchanged) */
.hero-reserve-btn::before, .reserve-cta::before { content: "● "; }
/* Play the demo already carries its own ▶ glyph, so it gets no extra marker. */

.video-embed { box-shadow: 4px 4px 0 0 #0f2c30; }

/* Circuit-trace borders around the main sections */
.features, .device-section, .how-it-works, .demo-section { outline: 3px dashed rgba(13,148,136,.55); outline-offset: -10px; }

/* ── Carry the theme through every section below the hero ─────────────────── */

/* Circuit-trace frame on every main section */
.cv-section, .team, .cta { outline: 3px dashed rgba(13,148,136,.55); outline-offset: -10px; }

/* Detection image: pixel frame + scanlines, like the video players */
.cv-image {
    position: relative; border-radius: 0 !important; border: 3px solid #0D9488 !important; overflow: hidden;
    clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
.cv-image img { border-radius: 0 !important; display: block; }

/* Device photos: teal frame to match the video frames */
.device-grid img { border: 3px solid #0D9488 !important; }

/* How It Works: step icons as HUD tiles */
.step .icon {
    background: #0f2c30 !important; border: 3px solid #14B8A6 !important; border-radius: 0 !important;
    clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}

/* Waitlist form: pixel-cornered fields and button (colors unchanged), ● marker on the button */
.wl-input, .wl-select, .wl-btn {
    border-radius: 0 !important;
    clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
.wl-input, .wl-select { border: 3px solid #0D9488 !important; }
.wl-btn::before { content: "● "; }

/* Footer: pixel dashed rule on top */
footer { border-top: 3px dashed rgba(13,148,136,.55) !important; }

/* How It Works summary line: same pixel frame as the cards */
.magic-box {
    border-radius: 0 !important; border: 3px solid #0D9488 !important;
    clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}

/* "The Device" title in the same dark ink as its photo labels */
.device-section h2 { color: #0C1A1A !important; }