/* ─────────────────────────────────────────────────────────────────────────────
   SHOWCASE HERO (5 Sep 2026) — the pre-login home page SHOWS the product.
   Why: visitors bounced from a landing page that described SafeGrid with one static
   laptop render. The laptop slot now holds a rotating gallery of REAL screens of the
   logged-in app (ACME demo site): the laptop render first, then browser-framed web
   pages, with a phone overlapping the corner showing the mobile app on the same data.

   Rotation is PURE CSS (keyframes + per-slide delay): works on the first server render
   with no script, keeps working if a script fails, pauses on hover, honours
   prefers-reduced-motion (first slide only; the strip below still shows everything).
   Slide counts are FIXED by the keyframes: 14 in the stage, 8 on the phone. Change
   --show-n / --ph-n, the dwell and the keyframes together if that ever changes.
   ───────────────────────────────────────────────────────────────────────────── */

.showcase-visual {
    --show-n: 22;
    --ph-n: 8;
    --show-dwell: 6.5s;                                   /* per slide (Jeremy: "slow it down slightly") */
    --show-cycle: calc(var(--show-n) * var(--show-dwell));
    --ph-cycle: calc(var(--ph-n) * var(--show-dwell));
    --show-ink: #e6edf7;
    --show-muted: #9fb0c8;
    --show-accent: #3b82f6;
    --show-frame: #0b1220;
    --show-frame-edge: rgba(148, 163, 184, 0.24);
    position: relative;
    width: 760px;
    max-width: 100%;
    margin-left: auto;
    padding: 0 56px 30px 0;                               /* room for the phone's overhang */
    color: var(--show-ink);
}

/* home.css skews EVERY img inside .hero-visual (the old laptop rule: perspective + rotateY).
   Neutralise it for the gallery — Jeremy 5 Sep: "still weirdly skew". */
.hero-visual.showcase-visual img { transform: none !important; width: 100%; max-width: none; }

/* ── the stage: one slot, nine slides stacked, only one visible ─────────────── */
.showcase-stage {
    position: relative;
    aspect-ratio: 16 / 10;
    /* flat, not skewed — Jeremy 5 Sep: "the content is skewed like the laptop" */
}

.showcase-slide {
    position: absolute; inset: 0;
    margin: 0;
    display: flex; flex-direction: column;
    border-radius: 16px;
    background: var(--show-frame);
    border: 1px solid var(--show-frame-edge);
    box-shadow: 0 30px 80px rgba(2, 6, 23, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    overflow: hidden;
    opacity: 0;
    animation: showcase-fade var(--show-cycle) linear infinite;
    animation-delay: calc(var(--i) * var(--show-dwell));
    will-change: opacity;
}
.showcase-slide img {
    display: block; width: 100%; flex: 1 1 auto; min-height: 0;
    object-fit: cover; object-position: top left;
}
/* the laptop render: no frame — it IS a frame */
.showcase-slide--bare {
    background: transparent; border: 0; box-shadow: none; overflow: visible;
    justify-content: center;
}
.showcase-slide--bare img { object-fit: contain; object-position: center; }
.showcase-slide--bare img[src*="how-it-fits"] { border-radius: 16px; }

.showcase-chrome {
    flex: 0 0 auto;
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: 12px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--show-frame-edge);
}
.showcase-chrome__dots { display: flex; gap: 6px; }
.showcase-chrome__dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.showcase-chrome__dots i:nth-child(1) { background: #ef4444; }
.showcase-chrome__dots i:nth-child(2) { background: #f59e0b; }
.showcase-chrome__dots i:nth-child(3) { background: #22c55e; }
.showcase-chrome__url {
    height: 24px; border-radius: 7px; background: rgba(255, 255, 255, 0.05);
    font: 500 12px/24px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--show-muted); padding: 0 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.showcase-chrome__hint { font-size: 11px; color: var(--show-muted); letter-spacing: 0.06em; text-transform: uppercase; }

/* caption: which screen you are looking at, pinned to the slide's bottom edge */
.showcase-caption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 26px 16px 12px;
    font-size: 14px; font-weight: 600; color: #fff; text-align: left;
    background: linear-gradient(to top, rgba(2, 6, 23, 0.92), rgba(2, 6, 23, 0));
    pointer-events: none;
}
.showcase-slide--bare .showcase-caption { background: none; text-align: center; padding-bottom: 0; color: var(--show-muted); }

/* progress bars under the stage — each fills during its own window */
.showcase-dots {
    position: absolute; left: 0; right: 0; top: 100%;
    display: flex; gap: 6px; justify-content: center; padding-top: 12px;
}
.showcase-dots i {
    position: relative; display: block;
    width: 28px; height: 4px; border-radius: 2px;
    background: rgba(148, 163, 184, 0.25); overflow: hidden;
}
.showcase-dots i::after {
    content: ""; position: absolute; inset: 0;
    background: var(--show-accent);
    transform: translateX(-100%);
    animation: showcase-bar var(--show-cycle) linear infinite;
    animation-delay: calc(var(--i) * var(--show-dwell));
}

/* ── the phone, overlapping the stage's bottom-right corner ──────────────────── */
.showcase-phone { display: none; }
.showcase-phone--gone {
    position: absolute; right: 0; bottom: 0;
    width: 22%;                                            /* height follows the screen's own ratio */
    border-radius: 9.5% / 4.6%;
    background: #05070d;
    padding: 2.6%;
    box-shadow: 0 24px 60px rgba(2, 6, 23, 0.65), 0 0 0 1px rgba(148, 163, 184, 0.35), 0 0 0 4px #0b1220;
    z-index: 2;
}
.showcase-phone__notch {
    position: absolute; top: 4.2%; left: 50%; transform: translateX(-50%);
    width: 22%; height: 2.2%; border-radius: 999px; background: #05070d; z-index: 3;
}
.showcase-phone__screen {
    /* exactly the capture's ratio, so nothing of the page is cropped (Jeremy: "chopping too much off") */
    position: relative; width: 100%; aspect-ratio: 720 / 1488; overflow: hidden;
    border-radius: 7.5% / 3.6%; background: #050a16;
}
.showcase-phone__screen img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center;
    opacity: 0;
    animation: showcase-fade-8 var(--ph-cycle) linear infinite;
    /* half a dwell behind the stage so the two never crossfade in the same instant */
    animation-delay: calc(var(--i) * var(--show-dwell) + var(--show-dwell) / 2);
    will-change: opacity;
}

/* (hover pause REMOVED 6 Sep 2026 — Jeremy read the paused gallery as "stuck") */

/* One of TWENTY-TWO slides is visible for 4.545% of the cycle, with a ~0.35% crossfade at each edge. */
@keyframes showcase-fade {
    0%      { opacity: 0; z-index: 2; }
    0.35%   { opacity: 1; }
    4.2%    { opacity: 1; }
    4.545%  { opacity: 0; z-index: 1; }
    100%    { opacity: 0; }
}
@keyframes showcase-bar {
    0%      { transform: translateX(-100%); }
    4.545%  { transform: translateX(0); }
    4.6%    { transform: translateX(100%); }
    100%    { transform: translateX(100%); }
}
/* EIGHT phone slides */
@keyframes showcase-fade-8 {
    0%      { opacity: 0; z-index: 2; }
    1.25%   { opacity: 1; }
    11.25%  { opacity: 1; }
    12.5%   { opacity: 0; z-index: 1; }
    100%    { opacity: 0; }
}

/* ── the screens, as a strip below the hero ─────────────────────────────────── */
.showcase-strip { padding: 10px 80px 56px; }
.showcase-strip__title {
    font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
    color: #9fb0c8; margin: 0 0 14px;
}
.showcase-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.showcase-grid--phone { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.showcase-tile {
    display: block; text-decoration: none; color: inherit;
    border-radius: 12px; overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: #0b1220;
    transition: transform 200ms ease, border-color 200ms ease;
}
.showcase-tile:hover, .showcase-tile:focus-visible { transform: translateY(-3px); border-color: #3b82f6; outline: none; }
.showcase-tile img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.showcase-tile--phone img { aspect-ratio: 720 / 1488; object-position: top; }
.showcase-tile figcaption { padding: 10px 12px 12px; font-size: 13px; line-height: 1.35; color: #cbd5e1; }
.showcase-note { margin: 18px 0 0; font-size: 12px; color: #7c8aa3; }

/* ── responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .hero-rot { height: 3.3em; }
    .hero-rot__item { white-space: normal; }
    .showcase-visual { width: min(100%, 720px); margin: 0 auto; padding: 0 0 26px; }
    .showcase-phone { right: -6px; bottom: -10px; width: 26%; }
    .showcase-strip { padding: 10px 28px 44px; }
    .showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .showcase-grid--phone { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .showcase-chrome__hint { display: none; }
    .showcase-caption { font-size: 12px; padding: 18px 10px 8px; }
    .showcase-phone { width: 30%; }
    .showcase-strip { padding: 10px 16px 36px; }
    .showcase-grid { grid-template-columns: 1fr; }
    .showcase-grid--phone { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Reduced motion: no rotation, no perspective. The first screen stays; the strip below
   carries the rest. Nothing is lost, nothing moves. */
@media (prefers-reduced-motion: reduce) {
    .showcase-slide, .showcase-dots i::after, .showcase-phone__screen img { animation: none !important; }
    .showcase-slide[style*="--i: 0"], .showcase-phone__screen img[style*="--i: 0"] { opacity: 1; }
    .showcase-tile { transition: none; }
}

/* light theme: the stage stays dark (the screens are dark UI); only the strip copy lifts */
[data-sg-theme="light"] .showcase-strip__title { color: #475569; }
[data-sg-theme="light"] .showcase-tile figcaption { color: #334155; }
[data-sg-theme="light"] .showcase-note { color: #64748b; }


/* ── rotating headlines (five pairs, 5 s each) ──────────────────────────────── */
/* absolute stack with a fixed 3-line reserve: the tallest pair in any language fits, nothing
   below ever moves or gets covered (grid-stacking stretched the h1 to half the hero — 5 Sep). */
/* the live page's title frame is inline-block, and absolutely-positioned headlines give it no
   width, so it collapsed to half the column (Jeremy: "make the headline wider"). Full width. */
.hero-title-frame:has(.hero-rot) { display: block; width: 100%; padding-left: 0; padding-right: 0; }
.hero-rot { position: relative; display: block; width: 100%; height: 2.3em; margin: 0 0 0.45em; line-height: 1.05; }
.hero-rot__item { white-space: nowrap; }                 /* two short lines, never four */
.hero-rot__item {
    position: absolute; left: 0; right: 0; top: 0;
    opacity: 0;
    animation: hero-rot-fade 25s linear infinite;
    animation-delay: calc(var(--i) * 5s);
    will-change: opacity;
}
@keyframes hero-rot-fade {
    0%    { opacity: 0; transform: translateY(6px); }
    2.5%  { opacity: 1; transform: translateY(0); }
    18%   { opacity: 1; }
    20%   { opacity: 0; transform: translateY(-4px); }
    100%  { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-rot__item { animation: none !important; }
    .hero-rot__item[style*="--i: 0"] { opacity: 1; }
}

/* ── bigger hero: give the gallery ~60% of the row (Jeremy: "hard to read anything") ── */
@media (min-width: 1101px) {
    .hero:has(.showcase-visual) .hero-inner { grid-template-columns: minmax(340px, 0.85fr) minmax(0, 1.35fr); gap: 32px; }
    .hero:has(.showcase-visual) .hero-text h1 { font-size: clamp(30px, 2.55vw, 44px); }
    .hero-visual.showcase-visual { width: 100%; max-width: 1040px; padding-right: 64px; }
    .showcase-caption { font-size: 15px; }
}


/* ── feature cards: a SMALL real-screen thumbnail on every card (Jeremy: "much smaller") ── */
.feature.feature--shot { padding-top: 22px; }
.feature.feature--shot img.feature__shot {
    display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 16 / 10;   /* the WHOLE screen, in proportion */
    object-fit: cover; object-position: top left;
    margin: 0; border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    transform: none !important;
}
/* web shot + the phone overlapping its corner (6 Sep 2026: the app on every card that has a screen) */
.feature.feature--shot { flex-direction: column; }
.feature__shots { position: relative; margin: auto 0 18px; }
.feature.feature--shot .feature__shots img.feature__phone { position: absolute; right: 8px; bottom: -10px; width: 27% !important; max-width: none; height: auto !important; margin: 0 !important; border-radius: 12px; border: 2px solid #0b1220; box-shadow: 0 12px 30px rgba(2,6,23,.6); transform: none !important; }
.mkt-dialog__media { position: relative; }
.mkt-dialog__phone { position: absolute; right: 14px; bottom: -18px; width: 26%; height: auto; border-radius: 16px; border: 3px solid #0b1220; box-shadow: 0 18px 40px rgba(2,6,23,.65); transform: none !important; }
.mkt-dialog__words p:first-child { margin-top: 0; font-size: 15px; }
.mkt-dialog__words li { font-size: 14.5px; margin-bottom: 6px; }
.mkt-dialog img.mkt-dialog__shot {
    /* the height attribute (750) was winning over the CSS width → a tall zoomed crop (Jeremy, 5 Sep) */
    display: block; width: 100%; height: auto; max-width: none;
    aspect-ratio: 16 / 10; object-fit: cover; object-position: top left;
    border-radius: 12px; border: 1px solid rgba(148, 163, 184, 0.22); margin: 0;
    transform: none !important;
}
@media (max-width: 1100px) {
    .feature__shot { width: calc(100% + 40px); margin: 0 -20px 16px; }
}

/* narrow screens: the headline may wrap (the earlier 1100px block sits above the base rules) */
@media (max-width: 1100px) {
    .hero-rot { height: 3.4em; }
    .hero-rot__item { white-space: normal; }
}
@media (max-width: 560px) {
    .hero-rot { height: 3.6em; }
    .hero:has(.showcase-visual) .hero-text h1 { font-size: 30px; }
}

/* ── phone hero order (Jeremy, 5 Sep): eyebrow + headline, THEN the gallery, then the copy/buttons ── */
@media (max-width: 1100px) {
    .hero:has(.showcase-visual) { padding-top: 10px; }
    .hero:has(.showcase-visual) .hero-text { display: contents; }
    .hero:has(.showcase-visual) .hero-text > * { order: 3; text-align: center; }
    .hero:has(.showcase-visual) .hero-text > .mkt-eyebrow,
    .hero:has(.showcase-visual) .hero-text > .hero-title-frame { order: 1; }
    .hero:has(.showcase-visual) .hero-visual { order: 2; margin: 6px auto 18px; }
    .hero:has(.showcase-visual) .hero-title-frame { margin-bottom: 0; }
    .hero:has(.showcase-visual) .hero-text > p { margin-left: auto; margin-right: auto; }
    .hero:has(.showcase-visual) .hero-buttons { justify-content: center; }
    /* full-width buttons had left-aligned labels on phones (Jeremy: "oddly aligned captions") */
    .hero:has(.showcase-visual) .hero-buttons a,
    .hero:has(.showcase-visual) .hero-buttons button { text-align: center; justify-content: center; display: inline-flex; align-items: center; }
    .hero:has(.showcase-visual) .mkt-trust-row { justify-content: center; }
}

/* ── PHONE PASS (Jeremy, 5 Sep: "at least 50% is dead space on mobile") ─────────────────────
   No card-inside-card frame, tight section spacing, cards that are mostly screenshot, a bigger hero
   gallery, and the nav collapsed to logo + burger. Desktop (>900px) untouched. */
@media (max-width: 900px) {
    .page-frame { margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; }
    .nav.mkt-nav { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; padding: 10px 14px !important; gap: 8px; }
    .nav.mkt-nav .mkt-nav__burger { display: flex !important; }
    .hero:has(.showcase-visual) { padding: 6px 14px 8px !important; }
    .hero:has(.showcase-visual) .hero-text h1 { font-size: 30px; }
    .hero:has(.showcase-visual) .hero-text > p { font-size: 15px; margin-bottom: 12px; }
    .hero-visual.showcase-visual { width: 100% !important; max-width: none !important; padding: 0 0 22px !important; margin: 4px 0 8px !important; }
    .showcase-phone { width: 30% !important; right: -4px !important; bottom: -8px !important; }
    .showcase-caption { font-size: 12px; padding: 16px 10px 8px; }
    .hero-buttons { gap: 8px; }
    .mkt-hero-apps { margin-top: 10px; }
    .mkt-trust-row { display: none; }                         /* four pills of tags are not what sells on a phone */
    .mkt-section, .mkt-section--alt { padding: 16px 12px 8px !important; }
    .mkt-section-header { margin-bottom: 10px !important; }
    .mkt-section-header h2 { font-size: 24px !important; margin-bottom: 4px !important; }
    .mkt-section-header p { font-size: 14px !important; }
    .features { padding: 4px 12px 16px !important; gap: 10px !important; grid-template-columns: 1fr !important; }
    .feature { padding: 12px 12px 10px !important; border-radius: 12px !important; }
    .feature.feature--shot { padding-top: 10px !important; }
    .feature.feature--shot img.feature__shot { margin: 0 !important; border-radius: 8px !important; }
    .feature__shots { margin: 0 0 12px; }
    .mkt-feature-emoji { font-size: 20px !important; margin-bottom: 4px !important; display: inline-block; margin-right: 8px; }
    .feature h3 { font-size: 17px !important; margin: 0 0 4px !important; display: inline; }
    .feature p { font-size: 13.5px !important; margin: 4px 0 6px !important; }
    .feature .link { font-size: 13px; }
    .mkt-role-grid { gap: 10px !important; padding: 0 12px 12px !important; grid-template-columns: 1fr !important; }
    .mkt-role-card { padding: 14px !important; }
    .mkt-role-card__icon { width: 36px !important; height: 36px !important; font-size: 18px !important; margin-bottom: 8px !important; }
    .mkt-callout { margin: 12px 12px !important; padding: 16px !important; }
    .mkt-callout__inner { gap: 12px !important; }
    .cta { padding: 24px 14px !important; }
    /* feature pages */
    .fd-hero { padding: 10px 14px 6px !important; }
    .fd-hero__grid { gap: 8px !important; }
    .fd-gallery { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding: 6px 14px 18px !important; -webkit-overflow-scrolling: touch; }
    .fd-gallery img { flex: 0 0 62%; scroll-snap-align: start; border-radius: 18px !important; }
    .fd-hero-shot { padding: 6px 14px 14px !important; }
    .fd-stories { padding: 10px 14px 6px !important; }
    .fd-story { gap: 10px !important; padding: 14px 0 !important; }
    .fd-story__text h3 { font-size: 19px !important; }
    .fd-story__text p { font-size: 14.5px !important; }
    .fd-story .fd-story__shot { order: -1; }                 /* the screen first, then the words */
    .fd-story--phone .fd-story__shot img { width: min(100%, 260px) !important; }
    /* how it works */
    .hiw-hero { padding: 10px 14px 8px !important; }
    .hiw-figure { padding: 0 8px 6px !important; }
    .hiw-grid { padding: 6px 12px 16px !important; gap: 10px !important; grid-template-columns: 1fr !important; }
    .hiw-card { padding: 12px !important; }
    .hiw-card__shot { height: auto !important; aspect-ratio: 16 / 10; }
}

/* ── phone: edge-to-edge (Jeremy: "use more width… bigger screen dumps") + the burger back on screen ── */
@media (max-width: 900px) {
    .safegrid-main-scroll--public { padding: 0 !important; border: 0 !important; border-radius: 0 !important; }
    .safegrid-main--public, .safegrid-content-row--public { padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; }
    .nav.mkt-nav .nav-left { width: auto !important; flex: 0 1 auto !important; }
    .nav.mkt-nav .mkt-nav__burger { flex: 0 0 44px !important; width: 44px !important; margin-left: auto; }
    .hero:has(.showcase-visual) { padding: 6px 0 8px !important; }
    .hero:has(.showcase-visual) .hero-text > * { padding-left: 14px; padding-right: 14px; }
    .hero-visual.showcase-visual { padding: 0 0 20px !important; margin: 4px 0 6px !important; }
    .showcase-slide { border-radius: 10px; }
    .showcase-slide--bare img { padding: 0 8px; }
    .showcase-dots { padding-top: 8px; }
    .features, .mkt-role-grid, .hiw-grid, .fd-gallery, .fd-stories, .hiw-figure, .fd-hero-shot { padding-left: 8px !important; padding-right: 8px !important; }
    .mkt-section, .mkt-section--alt { padding-left: 8px !important; padding-right: 8px !important; }
    .mkt-callout { margin-left: 8px !important; margin-right: 8px !important; }
}

/* phone: the App Store / APK badges centred as a pair (Jeremy) */
@media (max-width: 900px) {
    .mkt-hero-apps { text-align: center; }
    .mkt-store-badges--hero, .mkt-store-badges { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
}

/* ── APP SPOTLIGHT (6 Sep 2026): one big phone with the patrol screen + why the app ── */
.app-spotlight { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; padding: 48px 80px 56px; }
.app-spotlight__phone { justify-self: center; width: min(380px, 100%); border-radius: 44px; padding: 10px; background: #0b1220; border: 1px solid rgba(148,163,184,.35); box-shadow: 0 40px 90px rgba(2,6,23,.65), 0 0 0 1px rgba(59,130,246,.15); }
.app-spotlight__phone img { display: block; width: 100%; height: auto; border-radius: 34px; }
.app-spotlight__words h2 { margin: 8px 0 12px; font-size: 34px; line-height: 1.12; letter-spacing: -.01em; }
.app-spotlight__lead { margin: 0 0 20px; font-size: 17px; line-height: 1.55; color: #b6c4da; }
.app-spotlight__why { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.app-spotlight__why li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.045); border: 1px solid rgba(148,163,184,.18); }
.app-spotlight__ico { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: rgba(59,130,246,.18); }
.app-spotlight__why strong { display: block; font-size: 15px; margin-bottom: 2px; }
.app-spotlight__why span:not(.app-spotlight__ico) { font-size: 13.5px; line-height: 1.4; color: #9fb0c8; }
@media (max-width: 1100px) { .app-spotlight { grid-template-columns: 1fr; gap: 28px; padding: 32px 28px 40px; } .app-spotlight__phone { width: min(320px, 80%); } }
@media (max-width: 900px)  { .app-spotlight { padding: 24px 16px 32px; } .app-spotlight__words h2 { font-size: 26px; } .app-spotlight .mkt-store-badges { justify-content: center; } .app-spotlight__words { text-align: left; } }

/* ── THE APP page (/mobile-app): one big card per app screen — words left, portrait phone right ── */
.app-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 10px 80px 10px; }
.app-card { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 22px; align-items: center; background: rgba(11,18,32,.78); border: 1px solid rgba(148,163,184,.2); border-radius: 20px; padding: 24px 24px 24px 28px; }
.app-card__emoji { font-size: 28px; line-height: 1; margin-bottom: 10px; }
.app-card h3 { margin: 0 0 8px; font-size: 22px; line-height: 1.2; }
.app-card p { margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: #b6c4da; }
.app-card ul { margin: 0; padding-left: 18px; color: #d5deeb; font-size: 14px; line-height: 1.5; }
.app-card li { margin-bottom: 4px; }
.app-card__phone { width: 230px; border-radius: 30px; padding: 7px; background: #0b1220; border: 1px solid rgba(148,163,184,.35); box-shadow: 0 24px 60px rgba(2,6,23,.6); }
.app-card__phone img { display: block; width: 100%; height: auto; border-radius: 24px; transform: none !important; }
.app-cards__note { text-align: center; color: #7f8ea6; font-size: 13px; margin: 14px 80px 0; }
@media (max-width: 1100px) { .app-cards { grid-template-columns: 1fr; padding: 10px 28px; } .app-cards__note { margin: 14px 28px 0; } }
@media (max-width: 900px) {
    .app-cards { padding: 8px 12px; gap: 16px; }
    .app-card { grid-template-columns: 1fr; padding: 18px 16px 20px; gap: 16px; }
    .app-card__phone { order: -1; width: min(100%, 340px); justify-self: center; }
    .app-cards__note { margin: 12px 16px 0; }
}

/* ── APP SLIDES in the hero (6 Sep 2026): phone left, localised wording right ── */
.showcase-slide--app { background: linear-gradient(135deg, #0b1630 0%, #070c1a 100%); }
.showcase-app { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 30% minmax(0, 1fr); gap: 5%; align-items: center; padding: 3.5% 5%; }
.showcase-app__phone { height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; }
.showcase-app__phone img { display: block; width: auto; max-width: 100%; max-height: 100%; height: auto; flex: 0 0 auto; object-fit: contain; border-radius: 6%/3%; border: 1px solid rgba(148,163,184,.35); box-shadow: 0 20px 50px rgba(2,6,23,.6); }
.showcase-app__words { color: #e6edf7; font-size: clamp(10px, 1.05vw, 16px); text-align: left; }
.showcase-app__eyebrow { font-size: .72em; letter-spacing: .12em; text-transform: uppercase; color: #7fa5ff; font-weight: 700; }
.showcase-app__words h3 { margin: .3em 0 .35em; font-size: 2em; line-height: 1.12; letter-spacing: -.01em; }
.showcase-app__words p { margin: 0 0 .8em; font-size: 1.05em; line-height: 1.45; color: #b6c4da; }
.showcase-app__words ul { margin: 0; padding-left: 1.2em; text-align: left; list-style-position: outside; color: #d5deeb; font-size: .95em; line-height: 1.4; }
.showcase-app__words li { margin-bottom: .25em; }
@media (max-width: 900px) { .showcase-app { grid-template-columns: 34% minmax(0, 1fr); gap: 4%; padding: 4%; } .showcase-app__words { font-size: 10px; } .showcase-app__words p { display: none; } }