/* Landing page ("/") - the marketing/breakdown front door to the real app (index.html, completely
   unchanged). Built entirely on main.css's own tokens (colors, spacing, radius, shadow, light/dark
   theming) - see that file's :root for what every var(--...) below resolves to. No new palette, no
   new font - this is the same product's front door, not a separate microsite. */

.landing-body { min-height: 100vh; }

/* ---------- Header ---------- */
.landing-header {
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg);
    z-index: 10;
}
/* Full-bleed, not a centered 1100px bar - the logo genuinely reaches the left edge and Log In
   genuinely reaches the right edge of the viewport, rather than both sitting in a narrow column
   with the rest of the browser chrome empty on either side (the more space a screen actually has,
   the more this padding scales to use it - clamp(), not a fixed value, so a 1080p laptop and an
   ultrawide monitor each get a proportionate margin instead of one fixed number that's wrong for
   the other). */
.landing-header-inner {
    padding: var(--space-4) clamp(var(--space-6), 4vw, 64px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}
.landing-brand { display: flex; align-items: center; }
/* Icon mark only (logo_icon_light/dark.png, ~0.79:1 - roughly square) - the full wordmark lives
   in the hero's eyebrow instead (see .landing-eyebrow-logo below), so the sticky header stays a
   compact brand mark next to the nav rather than competing with it for width. Height-based sizing
   is fine here (unlike the wide wordmark elsewhere) since this aspect ratio never threatens to
   overflow a narrow header at any viewport. */
.landing-header-icon { height: 38px; width: auto; display: block; }
.landing-header-nav { display: flex; align-items: center; gap: var(--space-3); }

.landing-theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
}
.landing-theme-btn:hover { border-color: var(--border-strong); color: var(--text-primary); }

/* ---------- Buttons ---------- */
.landing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: inherit;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}
.landing-btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.landing-btn-lg { padding: var(--space-3) var(--space-6); font-size: var(--text-lg); }

.landing-btn-primary {
    background: var(--brand-red-action);
    color: #FFFFFF;
    box-shadow: var(--shadow-sm);
}
.landing-btn-primary:hover { background: var(--brand-red-bright); }

.landing-btn-ghost {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-strong);
}
.landing-btn-ghost:hover { border-color: var(--brand-red-action); color: var(--brand-red-action); }

/* Used on the closing band, which sits on a solid brand-red background - a dark-ink ghost button
   would disappear there, so these are the inverse: white fill / white-bordered ghost. */
.landing-btn-white { background: #FFFFFF; color: var(--brand-red-action); }
.landing-btn-white:hover { background: #F3F4F6; }
.landing-btn-ghost-inverse { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, 0.55); }
.landing-btn-ghost-inverse:hover { border-color: #FFFFFF; }

.landing-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }

/* ---------- Hero ---------- */
/* A faint radial glow anchored top-right, not a flat background - the one decorative flourish on
   the page, confined entirely to the hero so it reads as an accent rather than wallpaper. Brand
   red at low alpha so it works unchanged in both themes (no separate dark-mode override needed -
   it's already just a tint over whatever --bg is). */
.landing-hero {
    position: relative;
    overflow: hidden;
    padding: var(--space-8) clamp(var(--space-6), 4vw, 64px) var(--space-8);
}
.landing-hero::before {
    content: "";
    position: absolute;
    top: -220px;
    right: -160px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--brand-red-bright) 0%, transparent 70%);
    opacity: 0.12;
    pointer-events: none;
}
.landing-hero-grid {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: center;
}
/* The real Collision Suite wordmark (logo_header_light/dark.png - same files as .rail-logo/
   .login-logo elsewhere) instead of typing the name out as text - it's the product's actual mark,
   not a label, so it should look like one. Sized by WIDTH, not height (the source file is a fixed
   ~11:1 wide wordmark, so height follows automatically) - large enough to read as this section's
   own brand moment, not a small label sitting above a much wider line of headline text. */
.landing-eyebrow { margin: 0 0 var(--space-5); }
.landing-eyebrow-logo { width: min(420px, 65%); height: auto; display: block; }
/* Scaled down from --text-3xl - per direct user feedback, the eyebrow logo above (now sized to be
   this section's own brand moment - see .landing-eyebrow-logo) should visually lead, not compete
   with a same-or-larger headline directly underneath it. */
.landing-hero h1 {
    margin: 0 0 var(--space-5);
    font-size: var(--text-2xl);
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--text-heading);
    text-wrap: balance;
}
.landing-hero-sub {
    margin: 0 0 var(--space-6);
    font-size: var(--text-lg);
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ---------- Hero product shot ---------- */
.landing-hero-shot {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    /* Visible even before a real screenshot file exists at the referenced path - a plain broken
       <img> would otherwise leave an ugly browser-default icon floating in empty space. */
    background: var(--card-bg-inner);
    min-height: 220px;
    /* A slight tilt + lift, so it reads as a placed object next to the text rather than a second
       block stacked directly underneath it - the kind of small asymmetry a purely centered,
       stacked layout can't have room for. */
    transform: perspective(1400px) rotateY(-4deg) rotateX(1deg);
}
.landing-hero-shot img { display: block; width: 100%; height: auto; }

/* ---------- Intro "why" section ---------- */
.landing-points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-5);
}
.landing-point {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    color: var(--brand-red-action);
}
.landing-point p { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.6; }
.landing-point svg { flex: none; margin-top: 2px; }

/* ---------- Tabbed showcase ---------- */
/* A vertical tab list beside the panel, not buttons-above-content - each tab carries its own
   title+description, so the section reads as one real two-column layout instead of a centered
   control stacked on top of a centered image. */
.landing-showcase-grid {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}
.landing-tab-buttons { display: flex; flex-direction: column; gap: var(--space-2); }
.landing-tab-btn {
    text-align: left;
    font-family: inherit;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--card-bg);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.landing-tab-btn-title { font-size: var(--text-md); font-weight: 700; color: var(--text-heading); }
.landing-tab-btn-desc { font-size: var(--text-xs); line-height: 1.5; color: var(--text-secondary); }
.landing-tab-btn:hover { border-color: var(--border-strong); }
.landing-tab-btn.active { border-color: var(--brand-red-action); background: var(--brand-red-tint); }
.landing-tab-btn.active .landing-tab-btn-title { color: var(--brand-red-action); }

/* Found live: the source screenshots aren't the same shape (different page lengths), so
   height:auto - a natural fit for a single image - made the whole box resize every time you
   switched tabs, which reads as broken rather than responsive. object-fit:cover forces every tab
   into identical pixel dimensions regardless of its own image's real size, anchored to the TOP of
   each shot (object-position) so what actually gets cropped off, if anything, is the least
   important part (more grid rows scrolling off the bottom), never the nav/header that establishes
   what page you're looking at.
   Height itself is NOT fixed here - landing.js's syncShowcaseHeight sets an explicit pixel height
   directly on .landing-tab-panels (matching the button list's real rendered height), and
   .landing-tab-panel/.landing-tab-shot's height:100% below just inherit that. A pure-CSS version
   of this (align-items:stretch + a height:100% cascade with no JS) was tried first and found live
   to be genuinely viewport-width-dependent - the browser sizes the image column's "natural" height
   from the <img>'s own aspect ratio at whatever width that column resolves to before stretch ever
   applies, which isn't the same at every viewport width and isn't guaranteed to land on the button
   column's (font/text-driven) natural height either. Measuring the real DOM height in JS sidesteps
   that ambiguity entirely. */
.landing-tab-panel { height: 100%; }
.landing-tab-shot {
    height: 100%;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    background: var(--card-bg-inner);
    position: relative;
    cursor: zoom-in;
}
.landing-tab-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.landing-tab-shot:focus-visible { outline: 2px solid var(--brand-red-bright); outline-offset: 2px; }
/* Hover/focus treatment - darken the whole shot and float one centered expand icon over it,
   same "click to see the real thing" affordance a photo gallery uses. Two pseudo-elements so
   neither needs its own wrapper markup: ::before is the darken wash, ::after is the icon,
   centered via inset:0 + margin:auto on a fixed-size box rather than the shot's corner - per
   direct user feedback that a small corner badge was too easy to miss and didn't read as "the
   whole image is clickable." Both start transparent/invisible and only appear on hover/focus,
   so the shot itself stays clean at rest. */
.landing-tab-shot::before {
    content: '';
    position: absolute; inset: 0;
    background: rgba(10, 10, 12, 0.45);
    opacity: 0; transition: opacity 0.15s ease;
}
.landing-tab-shot::after {
    content: '';
    position: absolute; inset: 0; margin: auto;
    width: 56px; height: 56px; border-radius: var(--radius-pill);
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='22' height='22' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center;
    opacity: 0; transform: scale(0.85); transition: opacity 0.15s ease, transform 0.15s ease;
}
.landing-tab-shot:hover::before, .landing-tab-shot:focus-visible::before,
.landing-tab-shot:hover::after, .landing-tab-shot:focus-visible::after { opacity: 1; }
.landing-tab-shot:hover::after, .landing-tab-shot:focus-visible::after { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
    .landing-tab-shot::after { transition: opacity 0.15s ease; transform: none; }
}

/* ================================================================================================
   Full-size screenshot viewer - see landing.js's openLightbox/closeLightbox/setupLightboxPanZoom.
   Click/wheel-to-zoom and drag-to-pan once zoomed, mirroring the app's own #clash-lightbox image
   viewer (main.css's CLASH LIGHTBOX section) exactly - same toolbar, same icons, same cursor
   states - so switching from the marketing page to the real app doesn't feel like a different
   viewer. Unlike that one this always shows exactly one static image (no prev/next, no per-clash
   metadata panel), so it's a trimmed-down version of that structure, not a full copy.
   ================================================================================================ */
.landing-lightbox {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-6) var(--space-5);
    background: rgba(10, 10, 12, 0.86);
    animation: landing-lightbox-fade 0.15s ease;
}
.landing-lightbox[hidden] { display: none; }

.landing-lightbox-stage {
    position: relative;
    width: 100%; height: 100%; max-width: 1600px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    touch-action: none;
}
.landing-lightbox-stage img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    object-fit: contain;
    cursor: zoom-in;
    transform-origin: center center;
    transition: transform 0.1s ease-out;
    user-select: none; -webkit-user-drag: none;
}
.landing-lightbox-stage.zoomed img { cursor: grab; }
.landing-lightbox-stage.zoomed.dragging img { cursor: grabbing; transition: none; }

.landing-lightbox-toolbar {
    position: fixed; top: var(--space-5); left: var(--space-5); z-index: 2;
    display: flex; flex-direction: column; gap: 4px;
    background: rgba(23, 24, 28, 0.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--radius-md); padding: 5px;
}
.landing-lightbox-tool-btn {
    width: 32px; height: 32px; border-radius: var(--radius-sm); border: none;
    background: transparent; color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s ease;
}
.landing-lightbox-tool-btn:hover { background: rgba(255, 255, 255, 0.14); }
.landing-lightbox-tool-btn:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

.landing-lightbox-close {
    position: fixed; top: var(--space-5); right: var(--space-5); z-index: 2;
    width: 42px; height: 42px; border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.1); color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.landing-lightbox-close:hover { background: rgba(255, 255, 255, 0.2); }
.landing-lightbox-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes landing-lightbox-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .landing-lightbox { animation: none; }
    .landing-lightbox-stage img { transition: none; }
}

@media (max-width: 820px) {
    .landing-hero-grid { grid-template-columns: 1fr; text-align: left; }
    .landing-hero-shot { transform: none; order: -1; }
    .landing-showcase-grid { grid-template-columns: 1fr; }
}

/* ---------- "Why this matters" band ---------- */
/* Distinct from the later spec-sheet stats band lower down (short number + short label, several in
   a row) - these three carry a full sentence each, so they read as the argument for why this
   product exists, not a quick technical fact sheet. Kept on the plain page background (not another
   colored band) - the closing CTA is the one place that spends the page's "boldness," everywhere
   else stays quiet around it. */
.landing-why-band {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: var(--space-8) clamp(var(--space-6), 4vw, 64px);
}
.landing-why-grid {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-6);
}
.landing-why-stat { display: flex; flex-direction: column; gap: var(--space-2); }
.landing-why-num {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--brand-red-action);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.landing-why-label { font-size: var(--text-sm); line-height: 1.6; color: var(--text-secondary); }

/* ---------- Stats band ---------- */
.landing-stats-band {
    background: var(--card-bg-inner);
    padding: var(--space-8) clamp(var(--space-6), 4vw, 64px);
}
.landing-stats-grid {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-6);
    text-align: center;
}
.landing-stat { display: flex; flex-direction: column; gap: var(--space-1); }
.landing-stat-num {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--brand-red-action);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.landing-stat-label { font-size: var(--text-sm); color: var(--text-secondary); }

/* ---------- FAQ ---------- */
.landing-faq-section { max-width: 780px; }
.landing-faq-list { display: flex; flex-direction: column; gap: var(--space-3); }
.landing-faq-item {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
}
.landing-faq-item summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-heading);
    font-size: var(--text-md);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.landing-faq-item summary::-webkit-details-marker { display: none; }
.landing-faq-item summary::after {
    content: "+";
    flex: none;
    font-size: var(--text-lg);
    color: var(--text-secondary);
    transition: transform 0.15s ease;
}
.landing-faq-item[open] summary::after { transform: rotate(45deg); }
.landing-faq-item p { margin: var(--space-3) 0 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.6; }

/* ---------- Sections ---------- */
.landing-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--space-8) clamp(var(--space-6), 4vw, 64px);
}
.landing-section-title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text-heading);
    letter-spacing: -0.01em;
}
.landing-section-sub {
    margin: 0 0 var(--space-6);
    max-width: 560px;
    color: var(--text-secondary);
    font-size: var(--text-md);
    line-height: 1.6;
}

/* ---------- Feature grid ---------- */
.landing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-5);
}
.landing-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
}
.landing-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--brand-red-tint);
    color: var(--brand-red-action);
    margin-bottom: var(--space-4);
}
.landing-card h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-heading);
}
.landing-card p {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ---------- Plugin section ---------- */
.landing-plugin-section {
    background: var(--card-bg-inner);
    border-radius: var(--radius-lg);
    /* No max-width override of its own - inherits .landing-section's, so widening that widens this
       too instead of the two silently drifting out of sync. */
}
/* Four cards, not a bulleted list - per direct user feedback that the list read as one dense
   block. Numbered (01-04), and honestly so: Connection genuinely comes first (everything else
   needs it), and the other three are what's available once it's made - not an arbitrary feature
   grid like .landing-grid above, where a number would just be decoration. */
.landing-plugin-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--space-4);
}
.landing-plugin-step {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}
.landing-plugin-step-num {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--brand-red-action);
    margin-bottom: var(--space-2);
}
.landing-plugin-step h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--text-heading);
}
.landing-plugin-step p {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ---------- Final CTA ---------- */
/* A solid brand-red band (not just another plain section) - the one deliberate spot of full-bleed
   color on the page, reserved for the single most important action, same "spend your boldness in
   one place" idea the rest of the page stays quiet around. */
.landing-final-cta {
    background: linear-gradient(135deg, var(--brand-red-action), var(--brand-red-secondary));
    padding: var(--space-8) clamp(var(--space-6), 4vw, 64px);
}
.landing-final-cta-inner { max-width: 780px; margin: 0 auto; text-align: center; }
.landing-final-cta h2 {
    margin: 0 0 var(--space-6);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: #FFFFFF;
}
.landing-final-cta .landing-cta-row { justify-content: center; }

/* ---------- Footer ---------- */
/* Top padding trimmed down from the bottom's, matching #site-footer's own treatment in main.css -
   the logo already carries its own visual weight right under the divider line. */
.landing-footer {
    border-top: 1px solid var(--border);
    padding: var(--space-3) var(--space-6) var(--space-6);
    text-align: center;
}
.landing-footer-note { display: block; font-size: var(--text-2xs); color: var(--text-secondary); margin-top: var(--space-3); }
/* The trademark lockup (wordmark + "JAED Corporation Inc.") - width-based (~11:1 wordmark, same
   reasoning as .landing-eyebrow-logo above). display:block + margin:auto (not inline-block relying
   on the parent's text-align:center) - an inline/inline-block image sits on the text baseline,
   which leaves several px of descender space underneath it beyond any margin - see
   .footer-trademark-logo's own comment in main.css for the same fix on the app's footer. */
.landing-footer-logo { width: 170px; height: auto; display: block; margin: 0 auto; }

@media (max-width: 640px) {
    .landing-hero h1 { font-size: var(--text-2xl); }
    .landing-cta-row { flex-direction: column; align-items: stretch; }
    .landing-btn-lg { width: 100%; }
}

/* ---------- Scroll reveal ---------- */
/* landing.js adds .is-visible via IntersectionObserver the first time each .landing-reveal element
   scrolls into view (never re-triggers on scroll back up - a one-time entrance, not a distracting
   repeat). prefers-reduced-motion below skips the animation entirely rather than just shortening it -
   for someone who's set that preference, "start invisible until JS says otherwise" would be a real
   usability bug if the transition were ever skipped for any reason, not just a comfort issue. */
.landing-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.landing-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .landing-reveal { opacity: 1; transform: none; transition: none; }
}

/* A slight stagger across a row of cards reads as considered; all six firing in perfect unison
   reads as a generic fade-in effect slapped on afterward. Capped at 4 - a 5th+ card just inherits
   the same delay as the 4th rather than stacking further, so a long grid doesn't develop an
   oddly-long tail before its last row finishes animating in. */
.landing-grid .landing-card:nth-child(1) { transition-delay: 0s; }
.landing-grid .landing-card:nth-child(2) { transition-delay: 0.08s; }
.landing-grid .landing-card:nth-child(3) { transition-delay: 0.16s; }
.landing-grid .landing-card:nth-child(n+4) { transition-delay: 0.24s; }