/* Ink campaign preview: physical device edges, no decorative UI borders.
   Real screenshot elements remain separate from the illustrated casing. */
.landing-ink .landing-hero {
    width: min(1440px, 100%); min-height: 0; padding: 0;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 0;
}
.landing-ink .landing-hero::before { display: none; }
.landing-ink .landing-hero-copy { padding: 64px 0 80px max(32px, calc((1440px - 1180px) / 2)); margin-right: -64px; }
.landing-ink .landing-hero h1 { font-size: clamp(72px, 8.7vw, 126px); }
.landing-ink .landing-lede { max-width: 410px; }
.landing-ink .ink-hero-art {
    position: relative; display: block; height: auto; aspect-ratio: .82;
    max-width: none; width: 100%; margin: 0; overflow: hidden; grid-row: auto;
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 94%, transparent);
}
/* Crop to the rider, excluding the concept's generated device UI. */
.landing-ink .ink-hero-art > img {
    position: absolute; display: block; height: 100%; width: auto; max-width: none;
    left: -4%; top: 0;
}
.landing-ink .ink-hero-art::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(0deg, #071710, transparent 19%, transparent 90%, #07171088);
}
.landing-ink .electric-art-caption { z-index: 1; right: 48px; bottom: 32px; color: #faf6df; }
.landing-ink .landing-strip { background: #faf6df; gap: 40px; }
.landing-ink .landing-ride { grid-template-columns: 1fr 1fr; gap: 96px; padding-block: 104px 48px; }
.landing-ink .landing-ride-copy > .landing-kicker { margin: 0 0 24px; font-size: 11px; }
.landing-ink .landing-detail-list { display: grid; gap: 32px; }
.landing-ink .landing-detail-list > span { display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; row-gap: 4px; }
.landing-ink .landing-detail-list .material-symbols-outlined { grid-row: span 2; color: #75efad; font-size: 32px; }
.landing-ink .landing-detail-list strong { color: #faf6df; font-size: 20px; }
.landing-ink .landing-detail-list small { color: #a1c9b6; font-size: 15px; line-height: 24px; }
.landing-ink .landing-how { padding-top: 88px; }
.landing-ink .story-scene { grid-template-columns: .7fr 1.3fr; gap: 40px; }
.landing-ink .story-demo.story-screen { padding: 0; background: none; box-shadow: none; border-radius: 0; }
.landing-ink .story-screen figcaption { padding: 0 32px 16px; }
.landing-ink .story-screen a { overflow: visible; background: none; border-radius: 16px; }
.landing-ink .ink-device {
    position: relative; display: block; width: 100%; aspect-ratio: 1.28;
    transform: rotate(-2deg); filter: drop-shadow(0 24px 24px #0005);
}
.landing-ink .story-screen-ride .ink-device { transform: rotate(2deg); }
.landing-ink .ink-device .ink-device-frame {
    width: 100%; height: 100%; max-height: none; object-fit: fill;
    /* Keep the inked physical housing; remove the generator's outside backdrop. */
    clip-path: inset(7% 4.7% 7.8% round 4%);
}
.landing-ink .ink-device-screen {
    position: absolute; display: block; left: 9.35%; top: 13.7%; width: 81.4%; height: 71.8%;
    overflow: hidden; border-radius: 1%; background: #1a2b26;
}
.landing-ink .ink-device-screen > img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.landing-ink .screen-detail { padding: 16px 32px 0; }
.landing-ink .landing-final { background: radial-gradient(ellipse at 50% 85%, #194e34, transparent 70%); }
.landing-ink .landing-final::before { display: none; }
.landing-ink .landing-final-mark { color: #75efad; }
@media (max-width: 1200px) and (min-width: 901px) {
    .landing-ink .landing-hero-copy { padding-left: 32px; }
    .landing-ink .landing-hero h1 { font-size: 88px; }
    .landing-ink .landing-hero { min-height: 680px; }
    .landing-ink .landing-ride { gap: 48px; }
}
@media (max-width: 900px) {
    .landing-ink .landing-hero { display: grid; grid-template-columns: 1fr; padding: 0; }
    .landing-ink .ink-hero-art { grid-row: 1; width: min(100%, 580px); margin: 0 auto; aspect-ratio: .98; max-height: 560px; }
    .landing-ink .ink-hero-art > img { height: 120%; left: 0; }
    .landing-ink .landing-hero-copy { grid-row: 2; padding: 0 24px 64px; margin: -48px auto 0; max-width: 620px; }
    .landing-ink .landing-hero h1 { font-size: clamp(64px, 12vw, 96px); }
    .landing-ink .landing-hero .landing-kicker { background: none; padding: 0; margin-left: 0; }
    .landing-ink .electric-art-caption { display: none; }
    .landing-ink .landing-lede { max-width: 480px; }
    .landing-ink .landing-ride { grid-template-columns: 1fr; gap: 40px; padding-block: 72px 0; }
    .landing-ink .landing-how { padding-top: 80px; }
    .landing-ink .story-scene { grid-template-columns: 1fr; gap: 24px; }
    .landing-ink .story-screen { width: 100%; max-width: 720px; margin: 0 auto; }
    .landing-ink .landing-strip { gap: 16px; }
}
@media (max-width: 480px) {
    .landing-ink .landing-hero-copy { margin-top: -24px; padding-inline: 24px; }
    .landing-ink .landing-hero h1 { font-size: clamp(52px, 15vw, 72px); }
    .landing-ink .landing-strip { gap: 8px; }
    .landing-ink .story-screen figcaption { padding: 0 16px 16px; }
    .landing-ink .screen-detail { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .landing-ink .ink-device { transform: none; }
}

/* Device-led story artwork: conceptual illustrations, not product screenshots. */
.landing-ink .story-demo.story-illustration {
    margin: 0; padding: 0; min-width: 0; width: 100%; max-width: none;
    border: 0; border-radius: 0; background: none; box-shadow: none;
}
.landing-ink .story-illustration > img {
    display: block; width: 100%; height: auto; border: 0; border-radius: 0;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 48%, transparent 74%);
    mask-image: radial-gradient(ellipse at center, #000 48%, transparent 74%);
}

/* Full-screen suite: keep the whole device family visible on narrow screens. */
.landing-ink .landing-suite { position: relative; isolation: isolate; overflow: hidden; width: 100%; height: 100svh; min-height: 600px; margin-top: 80px; background: #001109; }
.landing-suite .suite-art { position: absolute; inset: -40px 0; transform: translateY(var(--suite-y, 0px)); z-index: -1; }
.landing-suite .suite-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.landing-suite::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, #001109 0%, #001109db 12%, transparent 48%); pointer-events: none; }
.landing-suite .suite-copy { position: absolute; bottom: 40px; left: 0; width: 100%; padding: 0 24px; box-sizing: border-box; text-align: center; }
.landing-suite h2 { margin: 8px 0 24px; color: #faf6df; font-size: clamp(32px, 4.5vw, 64px); line-height: 1.1; }
.landing-suite h2 em { color: #75efad; }
.landing-suite a { color: #faf6df; text-underline-offset: 6px; }
.landing-ink .landing-mcp { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding-block: 96px; }
.landing-mcp h2 { margin: 16px 0 24px; }
.landing-mcp p { color: #a1c9b6; line-height: 1.6; }
.mcp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.mcp-actions > p { flex-basis: 100%; margin: -8px 0 0; }
@media (max-width: 900px) {
    .landing-ink .landing-suite { height: 100svh; min-height: 560px; max-height: 960px; margin-top: 64px; }
    .landing-suite .suite-art { inset: 0; transform: none; }
    .landing-suite .suite-art img { object-fit: contain; }
    .landing-suite::after { background: linear-gradient(0deg, #001109 0%, transparent 42%); }
    .landing-suite .suite-copy { bottom: 48px; }
    .landing-ink .landing-mcp { grid-template-columns: 1fr; gap: 24px; padding-block: 64px; }
}
@media (prefers-reduced-motion: reduce) { .landing-suite .suite-art { transform: none; } }
.landing-suite .landing-kicker { justify-content: center; }
@media (max-width: 600px) {
    .landing-ink .landing-suite { height: min(100svh, 560px); min-height: 480px; }
    .landing-suite .suite-art img { object-position: center 24%; }
    .landing-suite .suite-copy { bottom: 32px; }
}