/* ============================================================================
   Landing Page — Light Theme (W1 first pass)
   ----------------------------------------------------------------------------
   Loaded after landing.css on pages/index.html. Everything here is scoped
   under html.theme-light (applied pre-paint by js/theme-boot.js); dark mode
   is untouched.

   How this file relates to the token system: the --landing-* light values
   live in css/theme-light.css and flip token-driven colors automatically.
   This file covers what tokens can't reach — hardcoded whites/navies,
   navy gradients that mix --landing-primary (kept dark in the light set
   because it's an action color), glass panels, and the dark artwork layers.

   Artwork rule (Anthony, 2026-07-07): light artwork mirrors the dark
   artwork family. The hero's dark ribbon art becomes the light ribbon.
   The composed dark art (story-card scenes, AI head, fingers, phone
   mockups) stays: framed dark product art on a light ground is standard
   fintech practice. Dark art used as full-bleed section wallpaper
   (console-plate-bg) is hidden and replaced by quiet light washes.
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   Global text effects: glows and metallic silver read as smudges on white.
   ────────────────────────────────────────────────────────────────────────── */
html.theme-light .landing-text-glow,
html.theme-light .landing-text-glow-bright {
    text-shadow: none;
}

html.theme-light .landing-text-white {
    color: var(--landing-fg);
}

html.theme-light .landing-text-cyan {
    color: #0e7490;
    filter: none;
}

/* Metallic sweep: same animation, slate-steel stops instead of silver. */
html.theme-light .landing-text-metallic-shine {
    background: linear-gradient(100deg,
        #475569 0, #334155 12%, #0f172a 22%, #0f172a 24%, #334155 30%,
        #475569 42%, #334155 54%, #0f172a 62%, #0f172a 64%, #334155 70%,
        #475569 82%, #0f172a 93%, #334155 97%, #475569 100%);
    background-size: 250% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   Hero
   ────────────────────────────────────────────────────────────────────────── */

/* Deep navy vertical wash behind the hero → airy light gradient. */
html.theme-light .landing-gradient-hero {
    background: linear-gradient(180deg, #eef4f9 0%, #ffffff 30%, #ffffff 65%, #f1f5f9 100%);
}

/* Ribbon artwork: hide the dark <img> (keeps layout) and paint the light
   ribbon on its container. Both ribbon files are 1024x1536; the dark
   <img> renders with object-fit:fill (stretched to the box), so the
   light background stretches the same way (100% 100%, not cover) to
   keep the composition in the identical position across themes. */
html.theme-light .landing-hero-mobile-bg,
html.theme-light .landing-hero-desktop-bg {
    background: url('../../assets/background-ribbon-light.webp') center / 100% 100% no-repeat;
}

html.theme-light .landing-hero-bg-img {
    visibility: hidden;
}

/* Dark scrim over the hero art → light veil (keeps headline contrast). */
html.theme-light .landing-hero-bg-overlay {
    background-color: rgba(255, 255, 255, 0.45);
}

/* Side headings were solid white. */
html.theme-light .landing-hero-side-heading {
    color: #0f172a;
}

/* Micro-copy under the CTA: faint silver → readable slate. */
html.theme-light .landing-hero-cta-micro {
    color: #64748b;
}

/* Headline frame: navy glass → white glass with the light card border. */
html.theme-light .landing-hero-title-frame {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(3, 105, 161, 0.25);
}

/* HUD corner brackets: darker cyan so they hold on white. */
html.theme-light .hud-bracket::before,
html.theme-light .hud-bracket::after {
    background: rgba(3, 105, 161, 0.65);
    box-shadow: none;
}

/* Hero pills: navy chips → white chips, slate ink, blue hairline. */
html.theme-light .landing-pill-tooltip-group {
    color: #0f172a;
    border-color: rgba(3, 105, 161, 0.30);
    background: rgba(255, 255, 255, 0.92);
}

html.theme-light .landing-pill-tooltip-group.active,
html.theme-light .landing-pill-tooltip-group.pill-active,
html.theme-light .landing-pill-tooltip-group:hover {
    border-color: rgba(3, 105, 161, 0.55);
    background: #ffffff;
}

html.theme-light .landing-pill-glass-pane {
    background: linear-gradient(135deg, rgba(3, 105, 161, 0.10), rgba(3, 105, 161, 0.05));
    border-color: rgba(3, 105, 161, 0.30);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

/* Tooltips (pills + NEAR benefits): near-black glass → white sheet. */
html.theme-light .landing-pill-tooltip,
html.theme-light .landing-near-benefit-tooltip {
    color: var(--landing-silver);
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(3, 105, 161, 0.22);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.16);
}

/* ──────────────────────────────────────────────────────────────────────────
   Section wallpaper: intro / about / features / risk use dark console art
   at full bleed behind a navy overlay. Hide the art, keep a quiet wash so
   the sections still read as distinct bands against the white body.
   ────────────────────────────────────────────────────────────────────────── */
html.theme-light .landing-intro-bg img,
html.theme-light .landing-about-bg img,
html.theme-light .landing-features-bg img,
html.theme-light .landing-risk-bg img {
    display: none;
}

html.theme-light .landing-intro-bg-overlay,
html.theme-light .landing-about-bg-overlay,
html.theme-light .landing-features-bg-overlay,
html.theme-light .landing-risk-bg-overlay {
    background: linear-gradient(180deg, #f4f8fb 0%, #eaf2f8 50%, #f4f8fb 100%);
}

/* Solid-white headings inside those sections. */
html.theme-light .landing-intro-title,
html.theme-light .landing-about-title,
html.theme-light .landing-near-title,
html.theme-light .landing-risk-title,
html.theme-light .landing-modal-title,
html.theme-light .landing-modal-login-title,
html.theme-light .landing-feature-card-title {
    color: #0f172a;
}

/* Ambient glow blobs: heavy blue clouds → faint tints. */
html.theme-light .landing-ambient-glow-center,
html.theme-light .landing-ambient-glow-corner,
html.theme-light .landing-solution-blob-1,
html.theme-light .landing-solution-blob-2,
html.theme-light .landing-about-blob-1,
html.theme-light .landing-about-blob-2,
html.theme-light .landing-near-glow-tr,
html.theme-light .landing-near-glow-bl {
    background: rgba(3, 105, 161, 0.06);
}

/* ──────────────────────────────────────────────────────────────────────────
   Solution section: navy gradient ground + faint blue grid.
   ────────────────────────────────────────────────────────────────────────── */
html.theme-light .landing-solution-bg {
    background: linear-gradient(180deg, #ffffff 0%, #eef4f9 50%, #f1f5f9 100%);
}

html.theme-light .landing-solution-grid,
html.theme-light .landing-solution-grid-bridge {
    background-image:
        linear-gradient(rgba(3, 105, 161, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(3, 105, 161, 0.05) 1px, transparent 1px);
}

/* ──────────────────────────────────────────────────────────────────────────
   Feature cards (sticky stack). Default cards go white; the -filled
   variant keeps its navy plate (matches the site's navy selection
   language), so its inner text is pinned back to the dark-theme inks.
   ────────────────────────────────────────────────────────────────────────── */
html.theme-light .landing-feature-card {
    background: #ffffff;
    border-color: rgba(3, 105, 161, 0.16);
    backdrop-filter: none;
}

html.theme-light .landing-feature-card:hover {
    background: #ffffff;
    border-color: rgba(3, 105, 161, 0.35);
    box-shadow: 0 15px 50px rgba(15, 23, 42, 0.12);
}

html.theme-light .landing-feature-card-category {
    background: linear-gradient(135deg, #475569 0, #0f172a 25%, #334155 50%, #0f172a 75%, #475569 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Desktop image fades into the card body: white instead of navy. */
html.theme-light .landing-feature-card-desktop-image-overlay {
    background: linear-gradient(to right, transparent, transparent, rgba(255, 255, 255, 0.92));
}

html.theme-light .landing-feature-card-mobile-image-overlay {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.55), transparent);
}

/* The filled (featured) card stays a navy plate: restore dark-theme inks. */
html.theme-light .landing-feature-card-filled,
html.theme-light .landing-feature-card-filled:hover {
    background: linear-gradient(180deg, #0a3d7a 0, #051937 100%);
    border-color: rgba(74, 158, 255, 0.35);
}

html.theme-light .landing-feature-card-filled .landing-feature-card-title {
    color: #ffffff;
}

html.theme-light .landing-feature-card-filled .landing-feature-card-desc {
    color: #F0F4F8;
}

html.theme-light .landing-feature-card-filled .landing-feature-card-category {
    background: linear-gradient(135deg, #c0c8d0 0, #fff 25%, #a8b4c0 50%, #fff 75%, #c0c8d0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

html.theme-light .landing-feature-card-filled .landing-feature-card-desktop-image-overlay {
    background: linear-gradient(to right, transparent, transparent, rgba(5, 25, 55, 0.85));
}

html.theme-light .landing-feature-card-filled .landing-feature-card-mobile-image-overlay {
    background: linear-gradient(to top, rgba(5, 40, 80, 0.5), transparent);
}

/* ──────────────────────────────────────────────────────────────────────────
   Workflow timeline (How It Works) + accordions.
   ────────────────────────────────────────────────────────────────────────── */
html.theme-light .landing-workflow-accordion {
    background: #ffffff;
    border-color: rgba(3, 105, 161, 0.16);
}

html.theme-light .landing-workflow-accordion:hover {
    border-color: rgba(3, 105, 161, 0.30);
}

html.theme-light .landing-workflow-accordion.open {
    background: #ffffff;
    border-color: rgba(3, 105, 161, 0.35);
}

html.theme-light .landing-workflow-accordion-header {
    color: #0f172a;
}

html.theme-light .landing-workflow-accordion-header:hover {
    background: rgba(3, 105, 161, 0.04);
}

/* The FAQ toggle is a .landing-btn-primary, which this page restyles
   into a 3D navy pill with !important — the pill stays navy in light
   (same language as every other primary button), so its text is white. */
html.theme-light .landing-workflow-readmore-btn {
    color: #ffffff;
}

/* ──────────────────────────────────────────────────────────────────────────
   "Your Role" user-flow step cards: navy glass → the site's light
   diagonal gradient card (the backtest-overview recipe). The cascade
   glow animation is redeclared with light values because the dark
   keyframes would otherwise keep overriding the border color.
   ────────────────────────────────────────────────────────────────────────── */
@keyframes uf-cascade-light {
    0%, 100% {
        border-color: rgba(3, 105, 161, 0.16);
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    }
    22%, 32% {
        border-color: rgba(3, 105, 161, 0.40);
        box-shadow: 0 4px 24px rgba(3, 105, 161, 0.12);
    }
}

html.theme-light .landing-userflow-step {
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.97) 0%, rgba(233, 243, 251, 0.94) 48%, rgba(246, 250, 253, 0.96) 100%);
    border-color: rgba(3, 105, 161, 0.16);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: uf-cascade-light 10s ease-in-out infinite;
    animation-delay: calc(var(--step-i, 0) * 2.5s);
}

html.theme-light .landing-userflow-step:hover {
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.97) 0%, rgba(233, 243, 251, 0.94) 48%, rgba(246, 250, 253, 0.96) 100%);
    border-color: rgba(3, 105, 161, 0.45);
    box-shadow: 0 12px 40px rgba(3, 105, 161, 0.14);
    animation: none;
}

html.theme-light .landing-userflow-title {
    color: #0f172a;
}

/* Hover glare: white sweep is invisible on the light card — blue tint. */
html.theme-light .uf-shimmer::before {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(3, 105, 161, 0.03) 25%,
        rgba(3, 105, 161, 0.07) 50%,
        rgba(3, 105, 161, 0.03) 75%,
        transparent 100%
    );
}

/* Icon glow: darker cyan ink, softer halo. */
html.theme-light .landing-userflow-icon {
    color: #0369a1;
    filter: drop-shadow(0 0 6px rgba(3, 105, 161, 0.20));
}

html.theme-light .landing-userflow-step:hover .landing-userflow-icon {
    filter: drop-shadow(0 0 10px rgba(3, 105, 161, 0.35));
}

/* ──────────────────────────────────────────────────────────────────────────
   NEAR section: benefit wells go white on the tinted band.
   ────────────────────────────────────────────────────────────────────────── */
html.theme-light .landing-near-benefit {
    background: #ffffff;
    border-color: rgba(3, 105, 161, 0.20);
}

html.theme-light .landing-near-benefit:hover {
    background: #ffffff;
    border-color: rgba(3, 105, 161, 0.40);
}

html.theme-light .landing-near-glass-pane {
    background: linear-gradient(135deg, rgba(3, 105, 161, 0.10), rgba(3, 105, 161, 0.05));
    border-color: rgba(3, 105, 161, 0.30);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

/* Descriptor box beside the benefits (fills in on hover, sits under the
   NEAR artwork): near-black glass → white sheet. Its body text is
   token-driven and already resolves to slate on white. */
html.theme-light .near-desc-box {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(3, 105, 161, 0.25);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
}

html.theme-light .near-desc-box.active {
    border-color: rgba(3, 105, 161, 0.50);
}

html.theme-light .near-desc-box-label {
    color: #0369a1;
}

/* ──────────────────────────────────────────────────────────────────────────
   Modals: navy glass sheets → white sheets.
   ────────────────────────────────────────────────────────────────────────── */
html.theme-light .landing-modal-backdrop {
    background: rgba(15, 23, 42, 0.45);
}

html.theme-light .landing-modal-content {
    background: #ffffff;
    border-color: rgba(3, 105, 161, 0.20);
    box-shadow: 0 30px 100px rgba(15, 23, 42, 0.25);
}

html.theme-light .landing-modal-close-btn {
    background: #f1f5f9;
    border-color: rgba(15, 23, 42, 0.12);
    color: #334155;
}

html.theme-light .landing-modal-close-btn:hover {
    border-color: #0369a1;
    color: #0f172a;
    background: rgba(3, 105, 161, 0.08);
}

html.theme-light .landing-modal-form-input {
    color: #0f172a;
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.14);
}

html.theme-light .landing-modal-content::-webkit-scrollbar-thumb {
    background: rgba(3, 105, 161, 0.35);
}

/* ──────────────────────────────────────────────────────────────────────────
   Chrome: menu dropdown hover, back-to-top, video intro stays cinematic.
   ────────────────────────────────────────────────────────────────────────── */
html.theme-light .landing-menu-dropdown {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.10);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
}

html.theme-light .landing-menu-item:hover {
    color: #0f172a;
    background: rgba(3, 105, 161, 0.06);
    text-shadow: none;
}

html.theme-light .landing-back-to-top {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(3, 105, 161, 0.30);
    color: #334155;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.14);
}

html.theme-light .landing-back-to-top:hover {
    background: #ffffff;
    border-color: rgba(3, 105, 161, 0.55);
    color: #0f172a;
}

/* Hero side-art glow pads and logo glow: keep, but fainter on white. */
html.theme-light .landing-hero-logo-glow {
    background: rgba(3, 105, 161, 0.06);
}

/* ──────────────────────────────────────────────────────────────────────────
   Summary risk disclosure strip (the inline-styled compliance band right
   below the hero). Selected structurally: it is the hero's next sibling.
   !important is required to beat its inline styles.
   ────────────────────────────────────────────────────────────────────────── */
html.theme-light .landing-hero + div[style] {
    background: #f1f5f9 !important;
    border-top-color: rgba(15, 23, 42, 0.08) !important;
    border-bottom-color: rgba(15, 23, 42, 0.08) !important;
}

html.theme-light .landing-hero + div[style] p[style] {
    color: #475569 !important;
}

html.theme-light .landing-hero + div[style] p strong[style] {
    color: #0f172a !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   Inline-styled white headings and silver copy scattered through the
   solution / how-it-works / memdex100 sections. Matched by their own
   style attribute so nothing on a dark plate is caught; buttons and
   links keep their designed colors.
   ────────────────────────────────────────────────────────────────────────── */
html.theme-light .landing-solution [style*="color:#fff"]:not(a):not(button),
html.theme-light .landing-about [style*="color:#fff"]:not(a):not(button),
html.theme-light #memdex100 [style*="color:#fff"]:not(a):not(button) {
    color: #0f172a !important;
}

html.theme-light #memdex100 [style*="color:#e0e8f0"]:not(a):not(button) {
    color: #334155 !important;
}

/* The $MEMDEX token card paints a translucent navy inline — mud on a
   light ground. White card instead; its pale-blue inner well already
   works on white and keeps its inline styling. */
html.theme-light #memdex100 .landing-reveal[style*="background: rgba(10,30,55"] {
    background: #ffffff !important;
    border-color: rgba(3, 105, 161, 0.20) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
}

/* Login modal helper line ("Don't have an account?") hardcodes faint white. */
html.theme-light .landing-modal-content p[style*="color:rgba(255"] {
    color: #64748b !important;
}

/* "The MemDex Effect" conclusion card: originally kept navy in light
   (W1 first pass); reversed 2026-07-10 per Anthony — the panel now goes
   white like the other cards. Its rules live in the dedicated section
   further down. */

/* ──────────────────────────────────────────────────────────────────────────
   How-It-Works deck: navy glass stage → white card. The slide artwork
   (dark scene renders) stays as framed art beside the copy.
   ────────────────────────────────────────────────────────────────────────── */
html.theme-light .landing-deck-stage {
    background: #ffffff;
    border-color: rgba(3, 105, 161, 0.18) !important;
    backdrop-filter: none;
    box-shadow: 0 8px 40px rgba(15, 23, 42, 0.10);
}

html.theme-light .landing-deck-slide-title {
    color: #0f172a;
}

html.theme-light .landing-deck-arrow {
    background: #ffffff !important;
    border-color: rgba(3, 105, 161, 0.30) !important;
    color: #334155;
}

html.theme-light .landing-deck-arrow:hover {
    background: #f1f5f9 !important;
}

/* Mobile carousel variant of the same content. */
html.theme-light .landing-carousel-card {
    background: #ffffff;
    border-color: rgba(3, 105, 161, 0.16);
    backdrop-filter: none;
}

html.theme-light .landing-carousel-card.carousel-active {
    border-color: rgba(3, 105, 161, 0.40);
    animation: none;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.10);
}

html.theme-light .landing-carousel-card-title {
    color: #0f172a;
}

/* ──────────────────────────────────────────────────────────────────────────
   MemDex Effect conclusion card (skyline art + summary copy)
   The card is inline-styled dark (#0a1a3a, blue glow, silver text), so
   these need !important. The skyline art stays (framed dark art on a
   light ground, per the artwork rule); the panel under it goes white
   with standard light body text.
   ────────────────────────────────────────────────────────────────────────── */
html.theme-light .landing-effect-card {
    background: #ffffff !important;
    border: 1.5px solid rgba(3, 105, 161, 0.22) !important;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.10) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Top 2px blue sheen line: a dark-card highlight, smudge on white. */
html.theme-light .landing-effect-card > div:first-child {
    background: none !important;
}

/* The image's bottom fade blends the skyline into the dark panel; on a
   white panel it would trail navy into the card, so drop it and let the
   art end on a clean edge. */
html.theme-light .landing-effect-card img + div {
    background: none !important;
}

/* Copy: silver → standard light body slate; the middle emphasis line
   keeps an accent in the light cyan used site-wide in this theme. */
html.theme-light .landing-effect-card p {
    color: #334155 !important;
}

html.theme-light .landing-effect-card p:nth-child(2) {
    color: #0e7490 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   Buttons — light-mode hierarchy pass (2026-07-10)
   In dark mode every in-page button wears the navy "3D dark pill" (the
   !important-heavy inline block in index.html). In light mode only true
   CTAs stay dark; in-page utility buttons (Read More, FAQ, Full Overview,
   disclosure Read More) become quiet light secondaries, so the page keeps
   a single dark accent instead of seven. The cyan hero CTA keeps its own
   look in both themes and is excluded.
   Selector note: :not(.landing-hero-cta-button) lifts specificity above
   the inline pill rules, which is what lets these !important declarations
   win at equal importance.
   ────────────────────────────────────────────────────────────────────────── */
html.theme-light .landing-btn-primary:not(.landing-hero-cta-button) {
    background: #ffffff !important;
    color: #0e2748 !important;
    text-shadow: none !important;
    border: 1px solid rgba(15, 23, 42, 0.18) !important;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 2px 10px rgba(15, 23, 42, 0.07) !important;
}

/* The 1px white top-sheen is a dark-pill highlight; on white it reads as
   a smudge. */
html.theme-light .landing-btn-primary:not(.landing-hero-cta-button)::before {
    background: none !important;
    opacity: 0 !important;
}

html.theme-light .landing-btn-primary:not(.landing-hero-cta-button):hover {
    background: #f8fafc !important;
    color: #081c38 !important;
    border-color: rgba(15, 23, 42, 0.34) !important;
    box-shadow:
        0 2px 4px rgba(15, 23, 42, 0.07),
        0 6px 16px rgba(15, 23, 42, 0.10) !important;
    transform: translateY(-1px) !important;
}

html.theme-light .landing-btn-primary:not(.landing-hero-cta-button):active {
    background: #eef2f7 !important;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06),
        inset 0 1px 3px rgba(15, 23, 42, 0.10) !important;
    transform: translateY(0) !important;
}