/* ==========================================================================
   CAMfly marketing surfaces — landing page and sign-in.

   Deliberately dark-locked: these two pages do not participate in the app's
   [data-theme] switch. They are the product's shop window, they share the deep
   navy of the app's own operations shell, and the WebGL hero only reads on dark.

   The local --mk-* scale below is the whole palette. It also re-points a handful
   of the app's shared tokens (--aviation-*, --text-*) so shared components
   rendered inside these shells — FeedbackBanner, validation messages — come out
   dark even when the visitor's stored theme is light.
   ========================================================================== */

.landing-shell,
.login-shell {
    --mk-bg: #04090f;
    --mk-bg-raised: #071320;
    --mk-surface: rgba(13, 27, 45, 0.66);
    --mk-surface-strong: rgba(8, 18, 31, 0.92);
    --mk-border: rgba(126, 166, 212, 0.16);
    --mk-border-strong: rgba(126, 166, 212, 0.32);

    --mk-text: #eaf2fb;
    --mk-text-soft: #a7bcd4;
    --mk-text-muted: #7288a3;

    --mk-accent: #2b8ae6;
    --mk-accent-deep: #075eac;
    --mk-cyan: #14b8d4;
    --mk-gold: var(--brand-gold, #ffcc00);

    --mk-radius: 16px;
    --mk-radius-sm: 10px;
    --mk-ease: cubic-bezier(0.2, 0, 0, 1);
    --mk-gutter: clamp(1.15rem, 4vw, 2.5rem);

    /* Shared app components rendered inside these shells. */
    --aviation-border: var(--mk-border);
    --aviation-border-strong: var(--mk-border-strong);
    --aviation-surface: var(--mk-surface-strong);
    --aviation-muted: var(--mk-text-muted);
    --aviation-text: var(--mk-text);
    --text-primary: var(--mk-text);
    --text-secondary: var(--mk-text-soft);
    --text-muted: var(--mk-text-muted);
    --border-color: var(--mk-border);

    position: relative;
    min-height: 100vh;
    isolation: isolate;
    background: var(--mk-bg);
    color: var(--mk-text);
    font-family: var(--font-ui, "Manrope", "Segoe UI", sans-serif);
    -webkit-font-smoothing: antialiased;
}

.landing-shell *,
.login-shell * {
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   WebGL backdrop.

   The canvas is transparent until the shader draws its first frame, so the
   gradient on the host element is the entire no-WebGL fallback: nothing to
   detect, nothing to toggle, no layout shift.
   -------------------------------------------------------------------------- */

.landing-backdrop,
.login-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 120% 70% at 50% 8%, rgba(20, 184, 212, 0.16), transparent 60%),
        radial-gradient(ellipse 90% 60% at 18% 0%, rgba(7, 94, 172, 0.28), transparent 62%),
        linear-gradient(178deg, #07131f 0%, #050c15 46%, #04090f 100%);
}

.landing-backdrop > canvas,
.login-backdrop > canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Seats the hero copy against the shader without dimming the horizon itself. */
.landing-backdrop-fade {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 85% 70% at 50% 42%, transparent 30%, rgba(4, 9, 15, 0.62) 100%);
}

/* --------------------------------------------------------------------------
   Shared primitives
   -------------------------------------------------------------------------- */

.landing-container {
    width: min(1180px, 100%);
    margin: 0 auto;
    padding-inline: var(--mk-gutter);
}

.landing-main {
    position: relative;
    z-index: 1;
}

/* :where() keeps these resets at zero specificity for the element part, so a plain
   single-class rule further down still wins. Without it `.landing-shell h1` (0,1,1)
   would outrank `.landing-hero-title` (0,1,0) and silently flatten its margin. */
.landing-shell :where(h1, h2, h3, h4),
.login-shell :where(h1, h2) {
    margin: 0;
    font-family: var(--font-display, "Sora", "Segoe UI", sans-serif);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.12;
    color: var(--mk-text);
}

.landing-shell :where(p),
.login-shell :where(p) {
    margin: 0;
}

.landing-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
    color: var(--mk-cyan);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.landing-lede {
    max-width: 60ch;
    color: var(--mk-text-soft);
    font-size: clamp(0.98rem, 1.4vw, 1.08rem);
    line-height: 1.68;
}

.landing-section-head {
    margin-bottom: clamp(2rem, 4vw, 3.2rem);
}

.landing-section-head h2 {
    margin-bottom: 0.85rem;
    font-size: clamp(1.75rem, 3.6vw, 2.7rem);
}

/* Buttons ------------------------------------------------------------------ */

.landing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.78rem 1.35rem;
    border: 1px solid transparent;
    border-radius: var(--mk-radius-sm);
    font-family: inherit;
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 180ms var(--mk-ease), box-shadow 180ms var(--mk-ease),
                background-color 180ms var(--mk-ease), border-color 180ms var(--mk-ease);
}

.landing-btn-primary {
    background: linear-gradient(135deg, var(--mk-accent) 0%, var(--mk-accent-deep) 100%);
    box-shadow: 0 10px 30px rgba(7, 94, 172, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.landing-btn-primary:hover {
    box-shadow: 0 16px 40px rgba(20, 184, 212, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transform: translateY(-2px);
}

.landing-btn-ghost {
    border-color: var(--mk-border-strong);
    background: rgba(12, 26, 43, 0.55);
    color: var(--mk-text);
    backdrop-filter: blur(10px);
}

.landing-btn-ghost:hover {
    border-color: rgba(20, 184, 212, 0.55);
    background: rgba(16, 34, 55, 0.72);
    transform: translateY(-2px);
}

.landing-btn-solid {
    background: var(--mk-text);
    color: #06121f;
}

.landing-btn-solid:hover {
    background: #ffffff;
}

.landing-btn:disabled {
    opacity: 0.5;
    transform: none;
    cursor: not-allowed;
}

.landing-btn-arrow {
    display: inline-flex;
    width: 1.05em;
    transition: transform 180ms var(--mk-ease);
}

.landing-btn-arrow svg {
    width: 100%;
    height: auto;
    fill: currentColor;
}

.landing-btn-primary:hover .landing-btn-arrow {
    transform: translateX(3px);
}

.landing-shell a:focus-visible,
.landing-shell button:focus-visible,
.landing-shell input:focus-visible,
.landing-shell select:focus-visible,
.landing-shell textarea:focus-visible,
.login-shell a:focus-visible,
.login-shell button:focus-visible,
.login-shell input:focus-visible {
    outline: 2px solid var(--mk-cyan);
    outline-offset: 3px;
}

/* Brand -------------------------------------------------------------------- */

.landing-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
}

.landing-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--mk-border-strong);
    border-radius: 12px;
    background: linear-gradient(155deg, rgba(20, 184, 212, 0.16), rgba(7, 94, 172, 0.12));
}

.landing-brand-lockup {
    display: grid;
    gap: 1px;
}

.landing-brand-name {
    font-family: var(--font-display, "Sora", sans-serif);
    font-size: 1.28rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--mk-text);
}

.landing-brand-name span {
    color: var(--mk-gold);
}

.landing-brand-sub {
    color: var(--mk-text-muted);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.landing-brand-sm .landing-brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.camfly-landing-brand {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 0 0 auto;
    gap: 0.1rem;
    text-decoration: none;
}

.camfly-landing-brand img {
    width: clamp(170px, 18vw, 214px);
    height: auto;
}

.camfly-landing-brand span {
    padding-left: 0.08rem;
    color: var(--mk-text-muted);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.camfly-footer-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.camfly-footer-brand img {
    width: clamp(148px, 14vw, 170px);
    height: auto;
}

/* --------------------------------------------------------------------------
   Top navigation
   -------------------------------------------------------------------------- */

.landing-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid transparent;
    background: linear-gradient(180deg, rgba(4, 9, 15, 0.82), rgba(4, 9, 15, 0));
    backdrop-filter: blur(14px);
    transition: border-color 220ms var(--mk-ease), background-color 220ms var(--mk-ease);
}

.landing-nav-inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-block: 0.9rem;
}

.landing-nav-links {
    display: flex;
    gap: 1.6rem;
    margin-inline: auto;
}

.landing-nav-links a {
    position: relative;
    color: var(--mk-text-soft);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 180ms var(--mk-ease);
}

.landing-nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 1px;
    background: var(--mk-cyan);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 220ms var(--mk-ease);
}

.landing-nav-links a:hover {
    color: var(--mk-text);
}

.landing-nav-links a:hover::after {
    transform: scaleX(1);
}

.landing-nav-actions .landing-btn {
    padding: 0.6rem 1.1rem;
    font-size: 0.88rem;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.landing-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: min(88vh, 820px);
    padding-block: clamp(3rem, 9vw, 7rem) clamp(4rem, 10vw, 8rem);
}

.landing-hero-inner {
    width: min(1180px, 100%);
}

.landing-hero-copy {
    max-width: 44rem;
    transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0);
}

.landing-hero-eyebrow {
    padding: 0.4rem 0.85rem 0.4rem 0.6rem;
    border: 1px solid var(--mk-border-strong);
    border-radius: 999px;
    background: rgba(12, 26, 43, 0.5);
    backdrop-filter: blur(8px);
}

.landing-pulse {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mk-cyan);
}

.landing-pulse::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 1px solid var(--mk-cyan);
    border-radius: 50%;
    opacity: 0;
    animation: landing-pulse 2.6s var(--mk-ease) infinite;
}

@keyframes landing-pulse {
    0% { opacity: 0.7; transform: scale(0.6); }
    70% { opacity: 0; transform: scale(1.5); }
    100% { opacity: 0; transform: scale(1.5); }
}

.landing-hero-title {
    margin-bottom: 1.3rem;
    font-size: clamp(2.3rem, 6vw, 4.4rem);
    letter-spacing: -0.035em;
    line-height: 1.04;
    text-wrap: balance;
}

.landing-hero-lede {
    max-width: 40rem;
    margin-bottom: 2.1rem;
    color: var(--mk-text-soft);
    font-size: clamp(1rem, 1.7vw, 1.16rem);
    line-height: 1.66;
}

.landing-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2.6rem;
}

.landing-hero-actions .landing-btn {
    padding: 0.92rem 1.6rem;
    font-size: 1rem;
}

/* Tenant workspace entry ---------------------------------------------------- */

.landing-workspace {
    max-width: 30rem;
    padding: 1.05rem 1.15rem 1.15rem;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    background: var(--mk-surface);
    backdrop-filter: blur(14px);
}

.landing-workspace > label {
    display: block;
    margin-bottom: 0.6rem;
    color: var(--mk-text-soft);
    font-size: 0.84rem;
    font-weight: 600;
}

.landing-workspace-field {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.3rem 0.3rem 0.75rem;
    border: 1px solid var(--mk-border-strong);
    border-radius: var(--mk-radius-sm);
    background: rgba(4, 10, 18, 0.7);
    transition: border-color 180ms var(--mk-ease), box-shadow 180ms var(--mk-ease);
}

.landing-workspace-field:focus-within {
    border-color: rgba(20, 184, 212, 0.6);
    box-shadow: 0 0 0 3px rgba(20, 184, 212, 0.16);
}

.landing-workspace-prefix {
    color: var(--mk-text-muted);
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.landing-workspace-field input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0;
    border: 0;
    background: transparent;
    color: var(--mk-text);
    font-family: inherit;
    font-size: 0.94rem;
}

.landing-workspace-field input::placeholder {
    color: var(--mk-text-muted);
}

.landing-workspace-field input:focus-visible {
    outline: none;
}

.landing-workspace-field .landing-btn {
    padding: 0.6rem 1.05rem;
    font-size: 0.88rem;
}

/* Scroll cue --------------------------------------------------------------- */

.landing-hero-scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    width: 22px;
    height: 36px;
    border: 1px solid var(--mk-border-strong);
    border-radius: 999px;
    transform: translateX(-50%);
}

.landing-hero-scroll span {
    position: absolute;
    top: 7px;
    left: 50%;
    width: 3px;
    height: 7px;
    margin-left: -1.5px;
    border-radius: 2px;
    background: var(--mk-cyan);
    animation: landing-scroll-cue 2.1s var(--mk-ease) infinite;
}

@keyframes landing-scroll-cue {
    0%, 100% { opacity: 0; transform: translateY(0); }
    30% { opacity: 1; }
    70% { opacity: 0; transform: translateY(13px); }
}

/* --------------------------------------------------------------------------
   Sections below the hero.

   The shader backdrop is fixed to the viewport, so every section after the hero
   supplies its own ground. The first one ramps in, the rest sit flat, which
   keeps body copy at full contrast without dimming the hero.
   -------------------------------------------------------------------------- */

.landing-showcase,
.landing-modules,
.landing-capability,
.landing-contact {
    position: relative;
    padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.landing-showcase {
    background: linear-gradient(180deg, rgba(4, 9, 15, 0) 0%, var(--mk-bg) 16%, var(--mk-bg) 100%);
}

.landing-modules,
.landing-contact {
    background: var(--mk-bg);
}

.landing-capability {
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(7, 94, 172, 0.16), transparent 70%),
        var(--mk-bg);
}

/* Product showcase --------------------------------------------------------- */

.landing-showcase-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    width: fit-content;
    margin: 0 auto 1.5rem;
    padding: 0.3rem;
    border: 1px solid var(--mk-border);
    border-radius: 999px;
    background: var(--mk-surface);
}

.landing-showcase-tab {
    padding: 0.55rem 1.15rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--mk-text-soft);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 180ms var(--mk-ease), color 180ms var(--mk-ease);
}

.landing-showcase-tab:hover {
    color: var(--mk-text);
}

.landing-showcase-tab.is-active {
    background: linear-gradient(135deg, var(--mk-accent), var(--mk-accent-deep));
    color: #ffffff;
}

.landing-showcase-stage {
    position: relative;
    perspective: 1800px;
}

.landing-showcase-glow {
    position: absolute;
    inset: 12% 6% -8%;
    background: radial-gradient(ellipse at 50% 50%, rgba(20, 184, 212, 0.28), transparent 68%);
    filter: blur(46px);
}

.landing-showcase-window {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--mk-border-strong);
    border-radius: var(--mk-radius);
    background: #0a1524;
    box-shadow: 0 40px 90px rgba(2, 8, 18, 0.72), 0 0 0 1px rgba(20, 184, 212, 0.08);
    transform:
        perspective(1800px)
        rotateX(calc(var(--parallax-y, 0px) * 0.22))
        rotateY(calc(var(--parallax-x, 0px) * -0.32));
    transition: transform 320ms var(--mk-ease);
}

.landing-showcase-chrome {
    display: flex;
    gap: 0.4rem;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--mk-border);
    background: rgba(7, 17, 31, 0.9);
}

.landing-showcase-chrome span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mk-border-strong);
}

.landing-showcase-panel img {
    display: block;
    width: 100%;
    height: auto;
}

/* Modules ------------------------------------------------------------------ */

.landing-module-group + .landing-module-group {
    margin-top: 2.4rem;
}

.landing-module-group-title {
    margin-bottom: 0.95rem;
    color: var(--mk-text-muted);
    font-family: var(--font-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* auto-fill rather than auto-fit: the groups have between one and four modules,
   and auto-fit would stretch the lone Components and Configure cards to full
   width. Keeping the empty tracks holds every card to the same size. */
.landing-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 0.9rem;
}

.landing-module-card {
    position: relative;
    overflow: hidden;
    padding: 1.4rem 1.3rem;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    background: var(--mk-surface);
    transition: transform 220ms var(--mk-ease), border-color 220ms var(--mk-ease),
                background-color 220ms var(--mk-ease);
}

.landing-module-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(150deg, rgba(20, 184, 212, 0.12), transparent 58%);
    opacity: 0;
    transition: opacity 220ms var(--mk-ease);
}

.landing-module-card:hover {
    border-color: rgba(20, 184, 212, 0.36);
    background: rgba(15, 32, 52, 0.72);
    transform: translateY(-4px);
}

.landing-module-card:hover::before {
    opacity: 1;
}

.landing-module-card > * {
    position: relative;
}

.landing-module-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 1rem;
    border: 1px solid rgba(20, 184, 212, 0.24);
    border-radius: 12px;
    background: linear-gradient(150deg, rgba(20, 184, 212, 0.18), rgba(7, 94, 172, 0.14));
}

.landing-module-icon svg {
    width: 21px;
    height: 21px;
    fill: var(--mk-cyan);
}

.landing-module-card h4 {
    margin-bottom: 0.45rem;
    font-size: 1.02rem;
}

.landing-module-card p {
    color: var(--mk-text-soft);
    font-size: 0.88rem;
    line-height: 1.6;
}

/* Capabilities -------------------------------------------------------------- */

.landing-capability-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 1rem;
}

.landing-capability-card {
    padding: 1.6rem 1.5rem;
    border: 1px solid var(--mk-border);
    border-left: 2px solid rgba(20, 184, 212, 0.45);
    border-radius: var(--mk-radius);
    background: var(--mk-surface-strong);
}

.landing-capability-card h3 {
    margin-bottom: 0.6rem;
    font-size: 1.08rem;
}

.landing-capability-card p {
    color: var(--mk-text-soft);
    font-size: 0.9rem;
    line-height: 1.66;
}

.landing-capability-note {
    margin-top: 1.6rem;
    padding: 1.25rem 1.5rem;
    border: 1px dashed var(--mk-border-strong);
    border-radius: var(--mk-radius);
}

.landing-capability-note p {
    max-width: 78ch;
    color: var(--mk-text-muted);
    font-size: 0.88rem;
    line-height: 1.66;
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.landing-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: clamp(1.6rem, 4vw, 3.5rem);
    align-items: start;
}

.landing-contact-intro h2 {
    margin-bottom: 0.9rem;
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
}

.landing-contact-points {
    margin: 1.4rem 0 0;
    padding: 0;
    list-style: none;
}

.landing-contact-points li {
    position: relative;
    padding-left: 1.4rem;
    color: var(--mk-text-muted);
    font-size: 0.88rem;
    line-height: 1.6;
}

.landing-contact-points li + li {
    margin-top: 0.6rem;
}

.landing-contact-points li::before {
    content: "";
    position: absolute;
    top: 0.55em;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mk-cyan);
}

.landing-contact-card {
    padding: clamp(1.3rem, 3vw, 2rem);
    border: 1px solid var(--mk-border-strong);
    border-radius: var(--mk-radius);
    background: var(--mk-surface-strong);
    box-shadow: 0 30px 70px rgba(2, 8, 18, 0.5);
}

.landing-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.landing-field-wide,
.landing-field.landing-field-wide {
    grid-column: 1 / -1;
}

.landing-field label,
.login-field label {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--mk-text-soft);
    font-size: 0.82rem;
    font-weight: 700;
}

.landing-field input,
.landing-field select,
.landing-field textarea,
.login-field input {
    width: 100%;
    padding: 0.72rem 0.85rem;
    border: 1px solid var(--mk-border-strong);
    border-radius: var(--mk-radius-sm);
    background: rgba(4, 10, 18, 0.75);
    color: var(--mk-text);
    font-family: inherit;
    font-size: 0.94rem;
    transition: border-color 160ms var(--mk-ease), box-shadow 160ms var(--mk-ease);
}

.landing-field textarea {
    min-height: 7.5rem;
    resize: vertical;
}

.landing-field input::placeholder,
.landing-field textarea::placeholder,
.login-field input::placeholder {
    color: var(--mk-text-muted);
}

.landing-field input:focus,
.landing-field select:focus,
.landing-field textarea:focus,
.login-field input:focus {
    border-color: rgba(20, 184, 212, 0.6);
    box-shadow: 0 0 0 3px rgba(20, 184, 212, 0.16);
    outline: none;
}

/* The select's own dropdown is drawn by the OS, so its options need explicit
   colours or they inherit the page's white-on-dark and become unreadable. */
.landing-field select option {
    background: #0a1524;
    color: var(--mk-text);
}

/* Blazor's server-rendered validation output. */
.landing-shell .validation-message,
.landing-form-error {
    display: block;
    margin-top: 0.35rem;
    color: #ff9aa6;
    font-size: 0.82rem;
}

.landing-form-error {
    grid-column: 1 / -1;
    margin-top: 0;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(255, 154, 166, 0.35);
    border-radius: var(--mk-radius-sm);
    background: rgba(120, 30, 44, 0.25);
}

.landing-shell .invalid {
    border-color: rgba(255, 154, 166, 0.6);
}

.landing-form-note {
    margin-top: 0.7rem;
    color: var(--mk-text-muted);
    font-size: 0.78rem;
}

/* Off-screen rather than display:none — bots skip hidden fields but happily fill
   ones that are merely out of view, which is the point of a honeypot. */
.landing-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.landing-contact-state {
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    padding: 2.2rem 1rem;
    text-align: center;
}

.landing-contact-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(45, 212, 149, 0.4);
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.14);
}

.landing-contact-state-icon svg {
    width: 26px;
    height: 26px;
    fill: #4ade9b;
}

.landing-contact-state p {
    color: var(--mk-text-soft);
    font-size: 0.92rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.landing-footer {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--mk-border);
    background: var(--mk-bg-raised);
}

.landing-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem;
    padding-block: 1.6rem;
}

.landing-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-inline: auto;
}

.landing-footer-links a {
    color: var(--mk-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 160ms var(--mk-ease);
}

.landing-footer-links a:hover {
    color: var(--mk-text);
}

.landing-footer-legal {
    color: var(--mk-text-muted);
    font-size: 0.78rem;
}

/* --------------------------------------------------------------------------
   Sign in
   -------------------------------------------------------------------------- */

.login-split {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    min-height: 100vh;
}

.login-aside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.5rem;
    padding: clamp(2rem, 5vw, 3.6rem);
}

.login-aside-copy h2 {
    max-width: 16ch;
    margin-bottom: 1rem;
    font-size: clamp(1.9rem, 3.4vw, 3rem);
    letter-spacing: -0.03em;
}

.login-aside-copy p {
    max-width: 42ch;
    color: var(--mk-text-soft);
    font-size: 1rem;
    line-height: 1.66;
}

.login-aside-points {
    margin: 0;
    padding: 0;
    list-style: none;
}

.login-aside-points li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--mk-text-muted);
    font-size: 0.87rem;
}

.login-aside-points li + li {
    margin-top: 0.7rem;
}

.login-aside-points li::before {
    content: "";
    position: absolute;
    top: 0.5em;
    left: 0;
    width: 8px;
    height: 1px;
    background: var(--mk-cyan);
}

.login-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    padding: clamp(1.5rem, 4vw, 3rem) var(--mk-gutter);
    background: linear-gradient(200deg, rgba(6, 14, 24, 0.86), rgba(4, 9, 15, 0.96));
    border-left: 1px solid var(--mk-border);
    backdrop-filter: blur(18px);
}

.login-card {
    width: min(26rem, 100%);
    padding: clamp(1.5rem, 3.5vw, 2.3rem);
    border: 1px solid var(--mk-border-strong);
    border-radius: 20px;
    background: var(--mk-surface-strong);
    box-shadow: 0 34px 80px rgba(1, 5, 12, 0.66);
}

.login-card-head {
    margin-bottom: 1.6rem;
    text-align: center;
}

.login-card-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 1rem;
    border: 1px solid var(--mk-border-strong);
    border-radius: 14px;
    background: linear-gradient(155deg, rgba(20, 184, 212, 0.18), rgba(7, 94, 172, 0.14));
}

.login-card-head h1 {
    margin-bottom: 0.4rem;
    font-size: 1.65rem;
}

.login-card-head p {
    color: var(--mk-text-muted);
    font-size: 0.9rem;
}

.login-form {
    display: grid;
    gap: 1rem;
}

.login-password {
    position: relative;
}

.login-password input {
    padding-right: 3rem;
}

.login-password-toggle {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mk-text-muted);
    cursor: pointer;
    transform: translateY(-50%);
    transition: color 160ms var(--mk-ease), background-color 160ms var(--mk-ease);
}

.login-password-toggle:hover {
    background: rgba(20, 184, 212, 0.12);
    color: var(--mk-cyan);
}

.login-password-toggle[aria-pressed="true"] {
    color: var(--mk-cyan);
}

.login-password-toggle svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.login-remember {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--mk-text-soft);
    font-size: 0.86rem;
    cursor: pointer;
}

.login-remember input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--mk-accent);
}

.login-submit {
    width: 100%;
    padding-block: 0.88rem;
}

.login-card-foot {
    margin-top: 1.3rem;
    color: var(--mk-text-muted);
    font-size: 0.83rem;
    text-align: center;
}

.login-card-foot a {
    color: var(--mk-cyan);
    text-decoration: none;
}

.login-card-foot a:hover {
    text-decoration: underline;
}

.login-legal {
    color: var(--mk-text-muted);
    font-size: 0.76rem;
}

/* --------------------------------------------------------------------------
   Scroll reveal.

   Content is visible by default. landing.js adds .reveal-ready to the shell to
   arm the hidden state, and only ever does so immediately before it starts
   revealing — so if that file 404s or throws, the page renders plainly instead
   of sitting invisible forever.
   -------------------------------------------------------------------------- */

.landing-shell.reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 700ms var(--mk-ease), transform 700ms var(--mk-ease);
}

.landing-shell.reveal-ready [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
    .landing-contact-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .login-split {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The shader still runs behind the panel, so the aside is redundant here. */
    .login-aside {
        display: none;
    }

    .login-panel {
        border-left: 0;
        background: transparent;
        backdrop-filter: none;
    }
}

@media (max-width: 860px) {
    .landing-nav-links {
        display: none;
    }

    .landing-nav-actions {
        margin-inline-start: auto;
    }

    .landing-hero {
        min-height: auto;
    }

    .landing-hero-scroll {
        display: none;
    }

    .landing-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .landing-footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .landing-footer-links {
        margin-inline: 0;
    }
}

@media (max-width: 560px) {
    .landing-workspace-prefix {
        display: none;
    }

    .landing-hero-actions .landing-btn {
        flex: 1 1 100%;
    }
}

/* --------------------------------------------------------------------------
   Reduced motion.

   app.css already neutralises animation and transition durations globally, but
   its hover-transform reset is scoped to .app-container.app-shell, which these
   pages do not use — so the transforms need explicit coverage here. The WebGL
   hero handles the preference itself: it renders a single frame and stops.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .landing-shell *,
    .login-shell * {
        animation: none !important;
        transition: none !important;
    }

    .landing-btn:hover,
    .landing-module-card:hover,
    .landing-showcase-window,
    .landing-hero-copy,
    .landing-showcase-stage {
        transform: none !important;
    }

    .landing-shell.reveal-ready [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

@media (forced-colors: active) {
    .landing-backdrop,
    .login-backdrop,
    .landing-showcase-glow {
        display: none;
    }

    .landing-module-card,
    .landing-capability-card,
    .landing-contact-card,
    .login-card {
        border-color: CanvasText;
    }
}

/* ==========================================================================
   Aviation Operations Platform — neutral home for CAMfly and StoreTrek.
   The visual language is a flight-operations nexus: two coloured rails converge
   on shared identity and master data, echoing the WebGL network behind the page.
   ========================================================================== */

[data-product="platform"] .landing-shell,
[data-product="platform"] .login-shell {
    --mk-bg: #03080e;
    --mk-bg-raised: #06111a;
    --mk-surface: rgba(8, 23, 34, 0.72);
    --mk-surface-strong: rgba(5, 16, 25, 0.94);
    --mk-border: rgba(154, 204, 226, 0.16);
    --mk-border-strong: rgba(154, 204, 226, 0.34);
    --mk-accent: #288ce8;
    --mk-accent-deep: #0b5fae;
    --mk-cyan: #45d8c4;
}

[data-product="platform"] .landing-backdrop,
[data-product="platform"] .login-backdrop {
    background:
        radial-gradient(ellipse 72% 52% at 52% 25%, rgba(36, 184, 194, 0.16), transparent 66%),
        radial-gradient(ellipse 60% 62% at 14% 8%, rgba(31, 111, 235, 0.22), transparent 65%),
        radial-gradient(ellipse 54% 52% at 88% 15%, rgba(15, 159, 145, 0.18), transparent 68%),
        linear-gradient(180deg, #06111b 0%, #03080e 68%, #03080e 100%);
}

.platform-main {
    overflow: clip;
}

.platform-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.72rem;
    color: var(--mk-text);
    text-decoration: none;
}

.platform-brand > img {
    width: 42px;
    height: 42px;
    filter: drop-shadow(0 0 18px rgba(51, 187, 211, 0.2));
}

.platform-brand > span {
    display: grid;
    gap: 0.14rem;
}

.platform-brand strong {
    font-family: var(--font-display, "Sora", sans-serif);
    font-size: 0.92rem;
    letter-spacing: 0.015em;
}

.platform-brand small {
    color: var(--mk-text-muted);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.login-brand-company {
    color: var(--mk-text-muted);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.platform-brand-small > img {
    width: 34px;
    height: 34px;
}

.platform-nav {
    background: linear-gradient(180deg, rgba(3, 8, 14, 0.92), rgba(3, 8, 14, 0.5));
}

.platform-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: min(84vh, 820px);
    padding-block: clamp(4.5rem, 10vw, 8rem) clamp(6rem, 12vw, 9rem);
}

.platform-hero::before,
.platform-hero::after {
    content: "";
    position: absolute;
    top: 12%;
    bottom: 12%;
    width: 1px;
    opacity: 0.35;
    background: linear-gradient(transparent, currentColor, transparent);
}

.platform-hero::before {
    left: max(1.5rem, calc(50% - 590px));
    color: #398feb;
}

.platform-hero::after {
    right: max(1.5rem, calc(50% - 590px));
    color: #32c8b4;
}

.platform-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(230px, 0.65fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 6rem);
}

.platform-hero-copy {
    max-width: 52rem;
    transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0);
}

.platform-hero h1 {
    max-width: 13ch;
    margin-bottom: 0.8rem;
    font-size: clamp(2.75rem, 7vw, 5.8rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
    text-wrap: balance;
}

.platform-hero-statement {
    max-width: 25ch;
    margin-bottom: 1.2rem !important;
    color: var(--mk-text);
    font-family: var(--font-display, "Sora", sans-serif);
    font-size: clamp(1.25rem, 2.5vw, 2rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.025em;
}

.platform-hero h1 span {
    color: transparent;
    background: linear-gradient(100deg, #8ccaff 2%, #f0fbff 47%, #68ead5 96%);
    background-clip: text;
    -webkit-background-clip: text;
}

.platform-hero-lede {
    max-width: 46rem;
    margin-bottom: 2rem;
    color: var(--mk-text-soft);
    font-size: clamp(1rem, 1.7vw, 1.2rem);
    line-height: 1.72;
}

.platform-btn-storetrek {
    border-color: rgba(68, 224, 198, 0.38);
}

.platform-hero-orbit {
    position: relative;
    display: grid;
    place-items: center;
    width: min(29vw, 340px);
    aspect-ratio: 1;
    justify-self: end;
    border: 1px solid rgba(164, 214, 233, 0.16);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(18, 53, 70, 0.45), rgba(4, 13, 21, 0.1) 64%, transparent 65%);
    box-shadow: inset 0 0 70px rgba(45, 173, 201, 0.08);
}

.platform-hero-orbit::before,
.platform-hero-orbit::after {
    content: "";
    position: absolute;
    inset: 14%;
    border: 1px dashed rgba(170, 221, 235, 0.2);
    border-radius: inherit;
    animation: platform-orbit-spin 24s linear infinite;
}

.platform-hero-orbit::after {
    inset: 31%;
    border-style: solid;
    animation-direction: reverse;
    animation-duration: 15s;
}

@keyframes platform-orbit-spin {
    to { transform: rotate(360deg); }
}

.platform-orbit-core {
    z-index: 1;
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    border: 1px solid rgba(198, 239, 248, 0.26);
    border-radius: 50%;
    background: rgba(4, 16, 25, 0.82);
    box-shadow: 0 0 50px rgba(54, 194, 201, 0.24);
}

.platform-orbit-core img {
    width: 58px;
    height: 58px;
}

.platform-orbit-label {
    position: absolute;
    z-index: 2;
    padding: 0.55rem 0.78rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: rgba(4, 14, 23, 0.78);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.platform-orbit-label.is-camfly {
    top: 18%;
    left: -7%;
    color: #75baff;
}

.platform-orbit-label.is-storetrek {
    right: -9%;
    bottom: 18%;
    color: #5ae3cc;
}

.platform-scroll-cue {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    display: inline-flex;
    gap: 0.65rem;
    color: var(--mk-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
    transform: translateX(-50%);
}

.platform-products {
    position: relative;
    padding-block: clamp(5rem, 10vw, 9rem);
    border-top: 1px solid var(--mk-border);
    background: linear-gradient(180deg, rgba(3, 8, 14, 0.84), rgba(6, 17, 26, 0.96));
}

.platform-section-head {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    column-gap: 3rem;
}

.platform-section-head .landing-eyebrow {
    grid-column: 1;
}

.platform-section-head h2 {
    grid-column: 1;
}

.platform-section-head .landing-lede {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    padding-bottom: 0.85rem;
}

.platform-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
}

.platform-product-card {
    --product-accent: #3b98ed;
    --product-accent-soft: rgba(59, 152, 237, 0.16);
    position: relative;
    display: flex;
    min-height: 540px;
    flex-direction: column;
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--product-accent) 38%, transparent);
    border-radius: 2px 24px 2px 24px;
    background:
        linear-gradient(150deg, var(--product-accent-soft), transparent 38%),
        rgba(7, 20, 31, 0.82);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.22);
}

.platform-product-card::after {
    content: "";
    position: absolute;
    right: -14%;
    bottom: -22%;
    width: 65%;
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--product-accent) 22%, transparent);
    border-radius: 50%;
    box-shadow: 0 0 0 34px color-mix(in srgb, var(--product-accent) 4%, transparent),
                0 0 0 68px color-mix(in srgb, var(--product-accent) 3%, transparent);
    pointer-events: none;
}

.platform-product-card.is-storetrek {
    --product-accent: #35cbb5;
    --product-accent-soft: rgba(15, 159, 145, 0.17);
}

.platform-product-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2.2rem;
}

.platform-product-logo {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 1px solid color-mix(in srgb, var(--product-accent) 40%, transparent);
    border-radius: 16px;
    background: rgba(3, 10, 17, 0.7);
}

.platform-product-logo img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.platform-product-kicker {
    margin-bottom: 0.25rem !important;
    color: var(--product-accent);
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.platform-product-card h3 {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.platform-product-index {
    align-self: start;
    color: color-mix(in srgb, var(--product-accent) 58%, var(--mk-text-muted));
    font-family: var(--font-display, "Sora", sans-serif);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.platform-product-position {
    max-width: 38rem;
    margin-bottom: 1.7rem !important;
    color: var(--mk-text-soft);
    font-size: 1.02rem;
    line-height: 1.7;
}

.platform-product-card ul {
    display: grid;
    gap: 0.82rem;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}

.platform-product-card li {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    color: var(--mk-text);
    font-size: 0.91rem;
}

.platform-product-card li::before {
    content: "";
    width: 18px;
    height: 1px;
    flex: 0 0 auto;
    background: var(--product-accent);
    box-shadow: 0 0 9px var(--product-accent);
}

.platform-product-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: auto;
}

.platform-product-card .landing-btn-primary {
    background: linear-gradient(135deg, var(--product-accent), color-mix(in srgb, var(--product-accent) 66%, #06131d));
}

.platform-product-learn {
    color: var(--mk-text-soft);
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
}

.platform-product-learn:hover {
    color: var(--product-accent);
}

.platform-product-disabled {
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--mk-border);
    color: var(--mk-text-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.platform-together {
    padding-block: clamp(5rem, 10vw, 9rem);
    border-top: 1px solid var(--mk-border);
    background: rgba(3, 9, 15, 0.9);
}

.platform-together-grid {
    display: grid;
    grid-template-columns: minmax(240px, 0.8fr) minmax(360px, 1.2fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
}

.platform-together h2 {
    max-width: 13ch;
    font-size: clamp(2rem, 4.4vw, 3.5rem);
}

.platform-together-grid > .landing-lede {
    grid-column: 1;
}

.platform-flow {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    align-items: center;
}

.platform-flow-product {
    writing-mode: vertical-rl;
    color: #75baff;
    font-family: var(--font-display, "Sora", sans-serif);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.platform-flow-product.is-storetrek {
    color: #5ae3cc;
}

.platform-flow-line {
    height: 1px;
    background: linear-gradient(90deg, currentColor, rgba(200, 240, 247, 0.52));
    color: #438fd9;
}

.platform-flow-line:nth-of-type(2) {
    color: #31bca9;
    transform: rotate(180deg);
}

.platform-flow-core {
    display: grid;
    place-items: center;
    width: 142px;
    height: 142px;
    border: 1px solid var(--mk-border-strong);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(32, 93, 109, 0.38), rgba(5, 15, 24, 0.9) 68%);
    text-align: center;
    box-shadow: 0 0 60px rgba(42, 168, 186, 0.16);
}

.platform-flow-core small {
    color: var(--mk-text-muted);
    font-size: 0.61rem;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.platform-footer {
    background: #03080e;
}

.platform-brand-mark {
    background: linear-gradient(145deg, rgba(46, 139, 218, 0.15), rgba(45, 201, 178, 0.13));
}

@media (max-width: 900px) {
    .platform-hero-inner,
    .platform-section-head,
    .platform-together-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .platform-hero-orbit {
        display: none;
    }

    .platform-section-head .landing-lede,
    .platform-together-grid > .landing-lede,
    .platform-flow {
        grid-column: 1;
        grid-row: auto;
    }

    .platform-product-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .platform-product-card {
        min-height: 500px;
    }
}

@media (max-width: 560px) {
    .platform-brand strong {
        font-size: 0.8rem;
    }

    .platform-brand small {
        display: none;
    }

    .platform-hero {
        min-height: auto;
        padding-top: 4rem;
    }

    .platform-hero h1 {
        font-size: clamp(2.55rem, 13vw, 4rem);
    }

    .platform-scroll-cue {
        display: none;
    }

    .platform-product-card {
        min-height: auto;
        border-radius: 2px 18px 2px 18px;
    }

    .platform-product-head {
        grid-template-columns: auto 1fr;
    }

    .platform-product-index {
        display: none;
    }

    .platform-product-actions .landing-btn,
    .platform-product-actions .platform-product-disabled {
        width: 100%;
    }

    .platform-flow-core {
        width: 104px;
        height: 104px;
    }

    .platform-flow-core img {
        width: 34px;
        height: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .platform-hero-orbit::before,
    .platform-hero-orbit::after {
        animation: none;
    }
}

@media (forced-colors: active) {
    .platform-product-card,
    .platform-flow-core,
    .platform-hero-orbit {
        border-color: CanvasText;
    }
}