/* Public acquisition only. Authenticated riding and desktop account UI stay independent. */
.landing-electric { --electric-cream: #faf6df; background: #071710; }
.landing-electric .public-header { border-bottom-color: #a9d9ba26; }
.landing-electric .landing-hero {
    isolation: isolate; width: 100%; min-height: 760px;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 0; padding: 88px max(32px, calc((100% - 1180px) / 2)) 104px;
}
.landing-electric-art { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.landing-electric .landing-hero::before {
    content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, #04120cea, #04120c6b 38%, transparent 67%), linear-gradient(0deg, #071710, transparent 16%, transparent 88%, #071710b3);
}
.landing-electric .landing-hero-copy { max-width: 680px; }
.landing-electric .landing-hero h1 { max-width: none; color: var(--electric-cream); font-size: clamp(80px, 8.8vw, 136px); line-height: .86; letter-spacing: -.045em; text-transform: uppercase; }
.landing-electric .landing-hero h1 em { color: #64efb1; }
.landing-electric .landing-kicker { font-size: 11px; line-height: 20px; letter-spacing: .1em; margin-bottom: 24px; }
.electric-status { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #78f6bb; box-shadow: 0 0 16px #78f6bb99; }
.landing-electric .landing-lede { max-width: 440px; margin-top: 32px; font-size: 18px; line-height: 28px; color: #c4d8cc; }
.landing-electric .landing-actions { gap: 24px; margin-top: 32px; flex-wrap: wrap; }
.landing-electric .landing-primary { background: #76f5b7; min-height: 56px; padding-inline: 32px; box-shadow: 0 0 32px #47e59e24; transition: box-shadow .2s, transform .2s; }
.landing-electric .landing-primary:hover { box-shadow: 0 0 40px #47e59e50; }
.landing-electric .landing-secondary { min-height: 48px; font-size: 14px; gap: 12px; }
.electric-free-note { margin: 16px 0 0; max-width: 400px; font-size: 12px; line-height: 20px; color: #aac5b5; }
.landing-electric .landing-mashup { position: static; height: 480px; padding: 0; margin: 0; }
.electric-art-caption { position: absolute; right: max(32px, calc((100% - 1180px) / 2)); bottom: 56px; color: #b7caba; font: 10px/16px 'Roboto Mono', monospace; text-transform: uppercase; letter-spacing: .18em; }
.landing-electric .landing-strip { position: relative; gap: 40px; background: #75efad; color: #092217; border: 0; padding-block: 24px; font-weight: 700; }
.landing-electric .landing-strip i { width: 8px; height: 8px; background: #155c3b; transform: rotate(45deg); flex-shrink: 0; }
.landing-electric .landing-section h2 { color: var(--electric-cream); font-size: clamp(56px, 6.4vw, 88px); line-height: .95; }
.landing-electric .landing-section h2 em { color: #72eeb0; font-style: inherit; }
.landing-electric .landing-section-heading { max-width: 720px; }
.landing-electric .landing-section-heading > p:last-child { max-width: 520px; }
.landing-electric .landing-how { position: relative; }
.landing-electric .story-demo:not(.story-ride) { border: 1px solid #7ab29440; background: radial-gradient(ellipse at top right, #37604a60, transparent 65%), #10241a; box-shadow: 0 24px 80px #0005; }
.landing-electric .story-track > span { letter-spacing: .1em; }
.landing-electric .story-copy h3 { color: var(--electric-cream); }
.landing-electric .story-prompt { background: #2c4d3c; }
.landing-electric .landing-ride-visual { border-color: #b1d7b966; box-shadow: 0 24px 96px #44d99316; }
.landing-electric .landing-final { position: relative; isolation: isolate; max-width: none; width: 100%; padding: 120px 24px; overflow: hidden; background: radial-gradient(ellipse at 50% 55%, #164b3099, transparent 66%); border-top: 1px solid #a9d9ba26; }
.landing-electric .landing-final::before { content: ''; position: absolute; z-index: -1; width: 400px; height: 400px; border: 1px solid #9bffc32b; border-radius: 50%; top: 100px; left: calc(50% - 200px); box-shadow: 0 0 0 64px #9bffc307, 0 0 0 128px #9bffc305; }
.landing-electric .landing-final h2 { font-size: clamp(72px, 9vw, 128px); text-transform: uppercase; }
.landing-electric .landing-final-mark { color: #e9d199; }
@media (min-width: 1600px) { .landing-electric-art { object-position: center 62%; } }
@media (max-width: 1000px) and (min-width: 701px) {
    .landing-electric .landing-hero { padding-inline: 32px; min-height: 720px; grid-template-columns: 1.2fr .8fr; }
    .landing-electric .landing-hero h1 { font-size: 88px; }
    .landing-electric .landing-mashup { grid-row: auto; }
    .landing-electric .landing-lede { max-width: 344px; }
    .landing-electric .landing-hero::before { background: linear-gradient(90deg, #04120cf2, #04120cc7 46%, transparent 80%), linear-gradient(0deg, #071710, transparent 22%); }
}
@media (max-width: 700px) {
    .landing-electric .landing-hero { display: block; min-height: auto; padding: 320px 24px 48px; }
    .landing-electric-art { height: 408px; object-position: 85% center; }
    .landing-electric .landing-hero::before { background: linear-gradient(0deg, #071710 0%, #071710 30%, #071710ed 44%, transparent 70%); }
    .landing-electric .landing-hero-copy { max-width: 480px; margin: 0 auto; }
    .landing-electric .landing-hero h1 { font-size: clamp(56px, 15.2vw, 104px); }
    .landing-electric .landing-kicker { font-size: 9px; letter-spacing: .06em; gap: 8px; margin-bottom: 24px; }
    .landing-electric .landing-hero .landing-kicker { width: fit-content; padding: 4px 8px; margin-left: -8px; border-radius: 4px; background: #071710e6; }
    .landing-electric .landing-lede { font-size: 16px; line-height: 24px; margin-top: 24px; }
    .landing-electric .landing-actions { gap: 16px; margin-top: 24px; }
    .landing-electric .landing-primary { min-height: 52px; padding-inline: 24px; }
    .landing-electric .landing-mashup { display: none; }
    .landing-electric .landing-strip { gap: 16px; padding: 24px 16px; font-size: 10px; letter-spacing: .03em; flex-wrap: wrap; }
    .landing-electric .landing-strip i { width: 4px; height: 4px; }
    .landing-electric .landing-section { padding-block: 80px; }
    .landing-electric .landing-section h2 { font-size: clamp(48px, 12vw, 72px); }
    .landing-electric .landing-final h2 { font-size: clamp(64px, 16vw, 96px); }
    .landing-electric .landing-final { padding: 80px 24px; }
}
@media (prefers-reduced-motion: reduce) { .landing-electric .landing-primary { transition: none; } }

/* The human effort, followed by authentic product screens. */
.landing-electric .landing-ride { grid-template-columns: 1.2fr .8fr; gap: 64px; }
.landing-electric .landing-ride-visual { padding: 0; transform: none; border-radius: 24px; overflow: hidden; }
.landing-electric .landing-ride-visual img { border-radius: 0; aspect-ratio: 1.2; object-fit: cover; object-position: 65% center; }
.landing-electric .story-scene { grid-template-columns: .75fr 1.25fr; gap: 56px; }
.landing-electric .story-screen { margin: 0; padding: 16px; border-radius: 24px; }
.story-screen figcaption { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; padding: 8px 8px 16px; }
.screen-origin { font-size: 10px; line-height: 16px; color: #a7c5b3; }
.story-screen a { display: block; border-radius: 12px; overflow: hidden; background: #101b17; }
.story-screen a:focus-visible { outline: 3px solid #75efad; outline-offset: 4px; }
.story-screen img { display: block; width: 100%; height: auto; }
.screen-detail { display: flex; justify-content: space-between; padding: 16px 8px 0; color: #b9d7c5; font-size: 11px; }
@media (max-width: 1000px) { .landing-electric .landing-ride { gap: 32px; } }
@media (max-width: 900px) {
 .landing-electric .landing-ride, .landing-electric .story-scene { grid-template-columns: 1fr; gap: 32px; }
 .landing-electric .landing-ride-visual { max-width: none; }
 .landing-electric .landing-ride-visual img { aspect-ratio: 1.5; }
 .landing-electric .story-screen { max-width: 720px; }
}
@media (max-width: 480px) {
 .landing-electric .story-screen { padding: 8px; border-radius: 16px; }
 .story-screen figcaption { padding: 8px 8px 16px; }
 .screen-detail { padding: 12px 8px 8px; }
}
@media (min-width: 901px) and (min-height: 850px) and (prefers-reduced-motion: no-preference) {
 .story-screen img { max-height: min(56vh, 560px); object-fit: contain; }
 .landing-electric .story-scene { padding-block: 32px; }
}
@media (max-width: 700px) {
 .landing-electric .landing-strip { flex-wrap: nowrap; justify-content: space-between; gap: 8px; }
 .landing-electric .landing-strip i { min-width: 4px; height: 4px; }
}