/* Landing refresh aligned with the merchant admin light theme. */ :root { --landing-black: #0a0a0a; --landing-muted: #6b7280; --landing-line: #e5e7eb; --landing-surface: #f7f7f5; --landing-white: #ffffff; --landing-purple: #6558d9; --landing-purple-soft: #f2f0ff; } html { overflow-x: hidden; scroll-behavior: auto; } body.landing-page { /* Horizontal clipping lives on ; keeping body non-scrollable preserves sticky. */ overflow: visible !important; } body.landing-page.public-menu-open { overflow: hidden !important; } /* Keep dark-theme ambience inside the viewport now that body must stay overflow-visible. */ html[data-theme="dark"] body.landing-page > .ambient { left: 0; width: 38vw; animation: none; } html[data-theme="dark"] body.landing-page > .ambient.two { right: 0; left: auto; } .landing-page .journey-demo, .landing-page .conversion-card { overflow: hidden; } body.landing-page > main { overflow-x: clip; } html:not([data-theme="dark"]) body.landing-page { color: var(--landing-black); background: var(--landing-surface); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } html:not([data-theme="dark"]) .landing-page .bg { background: var(--landing-surface) !important; } html:not([data-theme="dark"]) .landing-page .bg::after, html:not([data-theme="dark"]) .landing-page .ambient, html:not([data-theme="dark"]) .landing-page .orb, html:not([data-theme="dark"]) .landing-page .gw-aura, html:not([data-theme="dark"]) .landing-page .gw-stage::before, html:not([data-theme="dark"]) .landing-page .visual::before { display: none !important; } html:not([data-theme="dark"]) .landing-page .wrap { width: min(1160px, calc(100% - 48px)); } /* Header */ html:not([data-theme="dark"]) .landing-page .nav-wrap { padding: 14px 0 0; background: rgba(247, 247, 245, 0.92); backdrop-filter: blur(16px); } html:not([data-theme="dark"]) .landing-page .nav { min-height: 66px !important; height: 66px !important; padding: 0 10px 0 18px !important; border: 1px solid var(--landing-line) !important; border-radius: 12px !important; background: var(--landing-white) !important; box-shadow: 0 8px 24px rgba(10, 10, 10, 0.05) !important; } html:not([data-theme="dark"]) .landing-page .brand { gap: 9px; } html:not([data-theme="dark"]) .landing-page .brand-icon { width: 34px !important; height: 34px !important; filter: grayscale(1) contrast(1.7); } html:not([data-theme="dark"]) .landing-page .brand-word { color: var(--landing-black); font-size: 18px; font-weight: 600; } html:not([data-theme="dark"]) .landing-page .nav .links { gap: 2px; color: var(--landing-muted); } html:not([data-theme="dark"]) .landing-page .nav .links > a:not(.btn) { padding: 9px 11px !important; border-radius: 8px !important; color: var(--landing-muted) !important; font-weight: 600 !important; } html:not([data-theme="dark"]) .landing-page .nav .links > a:not(.btn)::before, html:not([data-theme="dark"]) .landing-page .nav .links > a:not(.btn)::after { display: none !important; } html:not([data-theme="dark"]) .landing-page .nav .links > a:not(.btn):hover { color: var(--landing-black) !important; background: var(--landing-surface) !important; transform: none !important; } html:not([data-theme="dark"]) .landing-page .theme-toggle { width: 38px; height: 38px; border: 1px solid var(--landing-line); border-radius: 10px; color: var(--landing-muted); background: var(--landing-white); } html:not([data-theme="dark"]) .landing-page .theme-toggle:hover { color: var(--landing-black); background: var(--landing-surface); } /* Buttons */ html:not([data-theme="dark"]) .landing-page .btn, html:not([data-theme="dark"]) .landing-page .iso-cta, html:not([data-theme="dark"]) .landing-page .demo-btn { min-height: 44px; border-radius: 10px !important; font-weight: 600 !important; box-shadow: none !important; } html:not([data-theme="dark"]) .landing-page .btn::after, html:not([data-theme="dark"]) .landing-page .btn.magnetic::before { display: none !important; } html:not([data-theme="dark"]) .landing-page .btn.primary, html:not([data-theme="dark"]) .landing-page .btn.magnetic, html:not([data-theme="dark"]) .landing-page .hero .actions .btn.primary { color: #fff !important; border-color: var(--landing-purple) !important; background: var(--landing-purple) !important; box-shadow: 0 8px 20px rgba(101, 88, 217, 0.2) !important; } html:not([data-theme="dark"]) .landing-page .btn.primary:hover, html:not([data-theme="dark"]) .landing-page .btn.magnetic:hover, html:not([data-theme="dark"]) .landing-page .hero .actions .btn.primary:hover { background: #5548c8 !important; box-shadow: 0 10px 24px rgba(101, 88, 217, 0.25) !important; } html:not([data-theme="dark"]) .landing-page .btn.secondary, html:not([data-theme="dark"]) .landing-page .hero .actions .btn.secondary, html:not([data-theme="dark"]) .landing-page .nav .links .btn.secondary { color: var(--landing-black) !important; border: 1px solid var(--landing-line) !important; background: var(--landing-white) !important; box-shadow: none !important; } html:not([data-theme="dark"]) .landing-page .btn.secondary:hover, html:not([data-theme="dark"]) .landing-page .nav .links .btn.secondary:hover { color: var(--landing-black) !important; border-color: #d1d5db !important; background: var(--landing-surface) !important; box-shadow: none !important; } /* Hero */ html:not([data-theme="dark"]) .landing-page .hero { padding: 38px 0 44px !important; } html:not([data-theme="dark"]) .landing-page .hero-grid { grid-template-columns: minmax(0, 1.16fr) minmax(340px, 0.84fr); gap: 52px; align-items: center; } html:not([data-theme="dark"]) .landing-page .hero-badge-row { gap: 8px; filter: none; } html:not([data-theme="dark"]) .landing-page .eyebrow, html:not([data-theme="dark"]) .landing-page .tag, html:not([data-theme="dark"]) .landing-page .free-badge { padding: 7px 9px; border: 1px solid #dedafc; border-radius: 8px; color: #5145b8; background: var(--landing-purple-soft); box-shadow: none !important; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; } html:not([data-theme="dark"]) .landing-page .live-chip { padding: 7px 9px; border: 1px solid var(--landing-line); border-radius: 8px; color: var(--landing-muted); background: var(--landing-white); font-size: 11px; font-weight: 600; box-shadow: none; } html:not([data-theme="dark"]) .landing-page .live-chip::after { display: none; } html:not([data-theme="dark"]) .landing-page .hero h1 { max-width: 700px; margin: 22px 0 20px; color: var(--landing-black); font-size: clamp(44px, 4.4vw, 58px) !important; font-weight: 600 !important; line-height: 1.02 !important; letter-spacing: 0 !important; } html:not([data-theme="dark"]) .landing-page .hero h1 .grad { color: var(--landing-purple) !important; background: none !important; -webkit-text-fill-color: currentColor !important; } html:not([data-theme="dark"]) .landing-page .hero > .wrap > .hero-grid > div:first-child > p { max-width: 640px; margin: 0 0 26px; color: var(--landing-muted); font-size: 17px; line-height: 1.62; } html:not([data-theme="dark"]) .landing-page .hero .actions { gap: 10px; margin-bottom: 22px; } html:not([data-theme="dark"]) .landing-page .hero .actions .btn { min-height: 48px; padding: 13px 20px !important; } html:not([data-theme="dark"]) .landing-page .hero-proof-panel { grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 14px; } html:not([data-theme="dark"]) .landing-page .hero-proof-panel > div { min-height: 78px; padding: 14px !important; border: 1px solid var(--landing-line) !important; border-radius: 10px !important; background: var(--landing-white) !important; box-shadow: none !important; } html:not([data-theme="dark"]) .landing-page .hero-proof-panel strong { color: var(--landing-purple); font-size: 12px; font-weight: 600; } html:not([data-theme="dark"]) .landing-page .hero-proof-panel span { color: var(--landing-black); font-size: 13px; line-height: 1.35; } html:not([data-theme="dark"]) .landing-page .metrics { gap: 0; margin-top: 0; padding: 12px 0 0; border-top: 1px solid var(--landing-line); } html:not([data-theme="dark"]) .landing-page .metric { padding: 4px 16px 4px 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html:not([data-theme="dark"]) .landing-page .metric strong { color: var(--landing-black); font-size: 17px; font-weight: 600; } html:not([data-theme="dark"]) .landing-page .metric small { color: var(--landing-muted); font-size: 11px; letter-spacing: 0; text-transform: none; } html:not([data-theme="dark"]) .landing-page .visual { min-height: 650px; } html:not([data-theme="dark"]) .landing-page .gw-stage { min-height: 650px; } html:not([data-theme="dark"]) .landing-page .gw-phone { width: 318px; height: 638px; border-radius: 44px; background: #111111; box-shadow: 0 28px 60px rgba(10, 10, 10, 0.18), 0 0 0 1px rgba(10, 10, 10, 0.08) !important; } /* Sections and cards */ html:not([data-theme="dark"]) .landing-page .section { padding-top: 76px !important; padding-bottom: 76px !important; scroll-margin-top: 112px; } html:not([data-theme="dark"]) .landing-page .section::before { top: 0; width: 100%; background: var(--landing-line); opacity: 1; } html:not([data-theme="dark"]) .landing-page .section h2 { color: var(--landing-black); font-size: clamp(32px, 4vw, 48px) !important; font-weight: 600 !important; line-height: 1.08 !important; letter-spacing: 0 !important; } html:not([data-theme="dark"]) .landing-page .lead, html:not([data-theme="dark"]) .landing-page .overview-head p, html:not([data-theme="dark"]) .landing-page .launch-copy p, html:not([data-theme="dark"]) .landing-page .partner-copy p { color: var(--landing-muted) !important; font-size: 17px; line-height: 1.7; } html:not([data-theme="dark"]) .landing-page :where( .card, .process-card, .price-card, .timeline-step, .faq-item, .metric, .partner-box, .contact-card, .stat-card, .source-stat, .launch-card, .overview-card ) { border: 1px solid var(--landing-line) !important; border-radius: 12px !important; background: var(--landing-white) !important; box-shadow: none !important; backdrop-filter: none; } html:not([data-theme="dark"]) .landing-page :where( .card, .process-card, .price-card, .timeline-step, .faq-item, .metric, .stat-card, .launch-card, .overview-card ):hover { border-color: #d1d5db !important; box-shadow: 0 10px 28px rgba(10, 10, 10, 0.06) !important; transform: translateY(-2px); } html:not([data-theme="dark"]) .landing-page :where(.card, .process-card, .price-card, .timeline-step)::before, html:not([data-theme="dark"]) .landing-page .card::after { display: none; } html:not([data-theme="dark"]) .landing-page :where(.card, .process-card, .overview-card, .launch-card) h3 { color: var(--landing-black); font-weight: 600 !important; letter-spacing: 0 !important; } html:not([data-theme="dark"]) .landing-page :where(.card, .process-card, .overview-card, .launch-card) p { color: var(--landing-muted) !important; } html:not([data-theme="dark"]) .landing-page .overview-head { gap: 56px; } html:not([data-theme="dark"]) .landing-page .overview-grid, html:not([data-theme="dark"]) .landing-page .grid4, html:not([data-theme="dark"]) .landing-page .process, html:not([data-theme="dark"]) .landing-page .launch-grid { gap: 12px; } html:not([data-theme="dark"]) .landing-page .overview-card, html:not([data-theme="dark"]) .landing-page .process-card, html:not([data-theme="dark"]) .landing-page .launch-card { padding: 24px !important; } html:not([data-theme="dark"]) .landing-page .overview-card.is-featured, html:not([data-theme="dark"]) .landing-page .price-card.featured { border-color: #c9c3fa !important; box-shadow: inset 0 3px 0 var(--landing-purple) !important; } html:not([data-theme="dark"]) .landing-page .overview-card > span, html:not([data-theme="dark"]) .landing-page .process-card > b, html:not([data-theme="dark"]) .landing-page .launch-card > span { color: var(--landing-purple); background: var(--landing-purple-soft) !important; border-radius: 8px !important; box-shadow: none !important; } html:not([data-theme="dark"]) .landing-page .icon { width: 48px; height: 48px; border: 1px solid #dedafc; border-radius: 10px; color: var(--landing-purple); background: var(--landing-purple-soft) !important; box-shadow: none !important; } html:not([data-theme="dark"]) .landing-page .proof span, html:not([data-theme="dark"]) .landing-page .module-toggles span, html:not([data-theme="dark"]) .landing-page .partner-rules span { border: 1px solid var(--landing-line) !important; border-radius: 8px !important; color: var(--landing-muted) !important; background: var(--landing-white) !important; box-shadow: none !important; } html:not([data-theme="dark"]) .landing-page .source-stat { margin-top: 14px; } html:not([data-theme="dark"]) .landing-page .source-stat-figure, html:not([data-theme="dark"]) .landing-page .stat-number, html:not([data-theme="dark"]) .landing-page .partner-revenue-grid strong { color: var(--landing-purple) !important; } html:not([data-theme="dark"]) .landing-page .card.dark, html:not([data-theme="dark"]) .landing-page .demo-card, html:not([data-theme="dark"]) .landing-page .partner-highlight, html:not([data-theme="dark"]) .landing-page .conversion-card, html:not([data-theme="dark"]) .landing-page .band { color: #fff; border: 1px solid #222 !important; border-radius: 12px !important; background: #111 !important; box-shadow: none !important; } html:not([data-theme="dark"]) .landing-page .card.dark :where(h2, h3, .big), html:not([data-theme="dark"]) .landing-page .demo-card :where(h2, h3), html:not([data-theme="dark"]) .landing-page .partner-highlight strong, html:not([data-theme="dark"]) .landing-page .conversion-card h2, html:not([data-theme="dark"]) .landing-page .band h2 { color: #fff !important; } html:not([data-theme="dark"]) .landing-page .card.dark :where(p, .dark-list span), html:not([data-theme="dark"]) .landing-page .demo-card p, html:not([data-theme="dark"]) .landing-page .conversion-card p, html:not([data-theme="dark"]) .landing-page .band p { color: #c5c5c5 !important; } html:not([data-theme="dark"]) .landing-page .dark-list span { border-color: #303030; border-radius: 8px; background: #1b1b1b; } /* Product configurator */ html:not([data-theme="dark"]) .landing-page .journey-demo { padding: 18px; border: 1px solid var(--landing-line); border-radius: 12px !important; background: var(--landing-white) !important; box-shadow: none !important; } html:not([data-theme="dark"]) .landing-page .journey-config { border: 0 !important; border-right: 1px solid var(--landing-line) !important; border-radius: 0 !important; box-shadow: none !important; } html:not([data-theme="dark"]) .landing-page .persona-chip, html:not([data-theme="dark"]) .landing-page .quick-settings > div, html:not([data-theme="dark"]) .landing-page .journey-steps span { border: 1px solid var(--landing-line) !important; border-radius: 10px !important; background: var(--landing-white) !important; box-shadow: none !important; } html:not([data-theme="dark"]) .landing-page .persona-chip.is-active, html:not([data-theme="dark"]) .landing-page .journey-steps span.is-active, html:not([data-theme="dark"]) .landing-page .module-toggles span.on { border-color: #c9c3fa !important; color: #5145b8 !important; background: var(--landing-purple-soft) !important; } html:not([data-theme="dark"]) .landing-page .iso-phone { box-shadow: 0 24px 54px rgba(10, 10, 10, 0.18) !important; } /* Pricing, FAQ and footer */ html:not([data-theme="dark"]) .landing-page .pricing { gap: 12px; } html:not([data-theme="dark"]) .landing-page .price-card.featured { scale: 1; } html:not([data-theme="dark"]) .landing-page .price-card.featured::before { border-radius: 7px; background: var(--landing-purple); } html:not([data-theme="dark"]) .landing-page .faq { gap: 10px; } html:not([data-theme="dark"]) .landing-page .faq-question { min-height: 64px; color: var(--landing-black); font-weight: 600; } html:not([data-theme="dark"]) .landing-page .faq-answer p { color: var(--landing-muted); } html:not([data-theme="dark"]) .landing-page .partner-hero, html:not([data-theme="dark"]) .landing-page .partner-revenue-grid > div { border: 1px solid var(--landing-line) !important; border-radius: 12px !important; background: var(--landing-white) !important; box-shadow: none !important; } html:not([data-theme="dark"]) .landing-page .footer { padding: 48px 0 28px; border-top: 1px solid var(--landing-line); color: var(--landing-muted); background: var(--landing-white); } html:not([data-theme="dark"]) .landing-page .footer img { filter: grayscale(1) contrast(1.7); } html:not([data-theme="dark"]) .landing-page .footer strong { color: var(--landing-black); font-weight: 600; } html:not([data-theme="dark"]) .landing-page .footer a:hover { color: var(--landing-purple); } @media (max-width: 1050px) { html:not([data-theme="dark"]) .landing-page .hero-grid { grid-template-columns: 1fr; gap: 24px; } html:not([data-theme="dark"]) .landing-page .hero { text-align: left; } html:not([data-theme="dark"]) .landing-page .hero .actions, html:not([data-theme="dark"]) .landing-page .hero .metrics { margin-left: 0; margin-right: 0; justify-content: flex-start; } html:not([data-theme="dark"]) .landing-page .hero > .wrap > .hero-grid > div:first-child > p { margin-left: 0 !important; margin-right: 0 !important; } html:not([data-theme="dark"]) .landing-page .hero .actions { display: flex !important; flex-direction: row !important; width: auto !important; max-width: 560px; } html:not([data-theme="dark"]) .landing-page .hero .actions .btn { width: auto !important; } html:not([data-theme="dark"]) .landing-page .metrics { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; width: 100%; max-width: 560px; } html:not([data-theme="dark"]) .landing-page .visual { min-height: 650px; } } @media (min-width: 768px) and (max-width: 900px) { html:not([data-theme="dark"]) .landing-page .nav { position: relative; } html:not([data-theme="dark"]) .landing-page .nav-hamburger { position: relative; z-index: 90; display: block !important; width: 40px; min-height: 40px; border: 1px solid var(--landing-line); border-radius: 9px; background: var(--landing-white); box-shadow: none; } html:not([data-theme="dark"]) .landing-page .nav-hamburger span { position: absolute; left: 9px; width: 20px; background: var(--landing-black); } html:not([data-theme="dark"]) .landing-page .nav-hamburger span:nth-child(1) { top: 12px; } html:not([data-theme="dark"]) .landing-page .nav-hamburger span:nth-child(2) { top: 18px; } html:not([data-theme="dark"]) .landing-page .nav-hamburger span:nth-child(3) { top: 24px; } html:not([data-theme="dark"]) .landing-page .nav.menu-open .nav-hamburger span:nth-child(1) { top: 18px; transform: rotate(45deg) !important; } html:not([data-theme="dark"]) .landing-page .nav.menu-open .nav-hamburger span:nth-child(2) { opacity: 0; } html:not([data-theme="dark"]) .landing-page .nav.menu-open .nav-hamburger span:nth-child(3) { top: 18px; transform: rotate(-45deg) !important; } html:not([data-theme="dark"]) body.landing-page .nav #publicNav { position: absolute !important; inset: auto 0 auto 0 !important; top: calc(100% + 8px) !important; z-index: 80; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; padding: 8px !important; border: 1px solid var(--landing-line) !important; border-radius: 12px !important; background: var(--landing-white) !important; box-shadow: 0 16px 40px rgba(10, 10, 10, 0.12) !important; opacity: 0 !important; transform: translateY(-6px) !important; pointer-events: none !important; } html:not([data-theme="dark"]) body.landing-page .nav.menu-open #publicNav { opacity: 1 !important; transform: none !important; pointer-events: auto !important; } html:not([data-theme="dark"]) body.landing-page .nav #publicNav > a:not(.btn) { display: flex !important; justify-content: flex-start; width: 100%; min-height: 44px; padding: 11px 12px !important; border-bottom: 1px solid var(--landing-line) !important; border-radius: 0 !important; color: var(--landing-black) !important; background: transparent !important; box-shadow: none !important; } html:not([data-theme="dark"]) .landing-page #publicNav .theme-toggle, html:not([data-theme="dark"]) .landing-page #publicNav .btn { width: 100%; min-height: 44px; margin-top: 6px; border-radius: 9px !important; } } @media (max-width: 767px) { html:not([data-theme="dark"]) .landing-page .wrap { width: min(100% - 28px, 1160px) !important; } html:not([data-theme="dark"]) .landing-page .nav-wrap { padding-top: 8px; } html:not([data-theme="dark"]) .landing-page .nav { min-height: 58px !important; height: 58px !important; padding: 0 8px 0 12px !important; border-radius: 11px !important; } html:not([data-theme="dark"]) .landing-page .brand-icon { width: 30px !important; height: 30px !important; } html:not([data-theme="dark"]) .landing-page .brand-word { font-size: 16px; } html:not([data-theme="dark"]) .landing-page .nav-hamburger { position: relative; display: block; width: 40px; min-height: 40px; border: 1px solid var(--landing-line); border-radius: 9px; background: var(--landing-white); box-shadow: none; } html:not([data-theme="dark"]) .landing-page .nav-hamburger span { position: absolute; left: 9px; width: 20px; background: var(--landing-black); } html:not([data-theme="dark"]) .landing-page .nav-hamburger span:nth-child(1) { top: 12px; } html:not([data-theme="dark"]) .landing-page .nav-hamburger span:nth-child(2) { top: 18px; } html:not([data-theme="dark"]) .landing-page .nav-hamburger span:nth-child(3) { top: 24px; } html:not([data-theme="dark"]) .landing-page .nav.menu-open .nav-hamburger span:nth-child(1) { top: 18px; transform: rotate(45deg) !important; } html:not([data-theme="dark"]) .landing-page .nav.menu-open .nav-hamburger span:nth-child(2) { opacity: 0; } html:not([data-theme="dark"]) .landing-page .nav.menu-open .nav-hamburger span:nth-child(3) { top: 18px; transform: rotate(-45deg) !important; } html:not([data-theme="dark"]) .landing-page .nav .links, html:not([data-theme="dark"]) .landing-page #publicNav { top: calc(100% + 8px) !important; gap: 0 !important; padding: 8px !important; border: 1px solid var(--landing-line) !important; border-radius: 12px !important; background: var(--landing-white) !important; box-shadow: 0 16px 40px rgba(10, 10, 10, 0.12) !important; backdrop-filter: none; } html:not([data-theme="dark"]) .landing-page .nav .links > a:not(.btn), html:not([data-theme="dark"]) .landing-page .nav .links .btn, html:not([data-theme="dark"]) .landing-page .nav .links .theme-toggle { min-height: 44px; border-radius: 9px !important; } html:not([data-theme="dark"]) body.landing-page .nav #publicNav > a:not(.btn) { justify-content: flex-start; padding: 11px 12px !important; border-bottom: 1px solid var(--landing-line) !important; border-radius: 0 !important; color: var(--landing-black) !important; background: transparent !important; box-shadow: none !important; } html:not([data-theme="dark"]) body.landing-page .nav #publicNav > a:not(.btn):hover { color: var(--landing-purple) !important; background: var(--landing-surface) !important; } html:not([data-theme="dark"]) .landing-page #publicNav .theme-toggle { width: 100%; margin: 6px 0; } html:not([data-theme="dark"]) .landing-page #publicNav .btn + .btn { margin-top: 6px; } html:not([data-theme="dark"]) .landing-page .hero { padding: 38px 0 44px !important; } html:not([data-theme="dark"]) .landing-page .hero h1 { margin-top: 18px; font-size: clamp(38px, 12vw, 52px) !important; } html:not([data-theme="dark"]) .landing-page .hero > .wrap > .hero-grid > div:first-child > p { font-size: 16px; } html:not([data-theme="dark"]) .landing-page .hero .actions { display: grid !important; flex-direction: column !important; grid-template-columns: 1fr !important; width: 100% !important; max-width: none; } html:not([data-theme="dark"]) .landing-page .hero .actions .btn { width: 100% !important; } html:not([data-theme="dark"]) .landing-page .hero-proof-panel { grid-template-columns: 1fr; } html:not([data-theme="dark"]) .landing-page .hero-proof-panel > div { min-height: 0; } html:not([data-theme="dark"]) .landing-page .metrics { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; padding: 8px !important; border: 1px solid var(--landing-line) !important; border-radius: 12px !important; background: var(--landing-white) !important; box-shadow: none !important; } html:not([data-theme="dark"]) .landing-page .metric { min-width: 0; padding: 8px 4px !important; text-align: center; } html:not([data-theme="dark"]) .landing-page .metric strong { font-size: 15px; } html:not([data-theme="dark"]) .landing-page .metric small { font-size: 10px; line-height: 1.25; } html:not([data-theme="dark"]) .landing-page .visual, html:not([data-theme="dark"]) .landing-page .gw-stage { min-height: 520px !important; } html:not([data-theme="dark"]) .landing-page .gw-phone { width: min(260px, 80vw) !important; height: 520px !important; border-radius: 36px !important; } html:not([data-theme="dark"]) .landing-page .section { padding-top: 58px !important; padding-bottom: 58px !important; scroll-margin-top: 82px; } html:not([data-theme="dark"]) .landing-page .section h2 { font-size: 34px !important; } html:not([data-theme="dark"]) .landing-page .journey-demo { padding: 12px; } html:not([data-theme="dark"]) .landing-page .journey-config { padding: 18px !important; border-right: 0 !important; border-bottom: 1px solid var(--landing-line) !important; } html:not([data-theme="dark"]) .landing-page .iso-phone { width: min(270px, 82vw) !important; height: 570px !important; } html:not([data-theme="dark"]) .landing-page .iso-hero { height: 430px !important; } html:not([data-theme="dark"]) .landing-page .iso-panel { max-height: 430px !important; } .landing-page .journey-preview .iso-chips, .landing-page .journey-preview .iso-trust { display: none !important; } } @media (max-width: 420px) { html:not([data-theme="dark"]) .landing-page .hero-badge-row { align-items: stretch; } html:not([data-theme="dark"]) .landing-page .eyebrow, html:not([data-theme="dark"]) .landing-page .live-chip { width: 100%; } html:not([data-theme="dark"]) .landing-page .hero h1 { font-size: 36px !important; } html:not([data-theme="dark"]) .landing-page .hero .actions { grid-template-columns: 1fr !important; } } @media (max-width: 380px) { html:not([data-theme="dark"]) .landing-page .visual, html:not([data-theme="dark"]) .landing-page .gw-stage { min-height: 520px !important; } html:not([data-theme="dark"]) .landing-page .gw-phone { width: min(250px, 82vw) !important; height: 520px !important; } html:not([data-theme="dark"]) .landing-page .gw-scene-wrap { min-height: 395px !important; } html:not([data-theme="dark"]) .landing-page .iso-phone { width: min(250px, 82vw) !important; height: 550px !important; } html:not([data-theme="dark"]) .landing-page .iso-hero { height: 430px !important; } html:not([data-theme="dark"]) .landing-page .iso-panel { max-height: 430px !important; } } /* Show only the game format selected by the active merchant persona. */ .landing-page .iso-wheel-game, .landing-page .iso-quiz-game, .landing-page .iso-scratch-game { display: none !important; } .landing-page .journey-demo[data-persona="italian"] .iso-wheel-game { display: grid !important; } .landing-page .journey-demo[data-persona="padel"] .iso-quiz-game { display: grid !important; gap: 7px; width: 100%; margin: 14px auto !important; } .landing-page .iso-quiz-game b, .landing-page .iso-quiz-game span { display: block; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 10px; color: #fff; background: rgba(255, 255, 255, 0.1); text-align: left; } .landing-page .iso-quiz-game b { background: rgba(255, 255, 255, 0.16); font-size: 12px; } .landing-page .iso-quiz-game span { font-size: 11px; } .landing-page .journey-demo[data-persona="beauty"] .iso-scratch-game { display: block !important; width: 100%; margin: 14px auto; } .landing-page .scratch-card { min-height: 140px; padding: 20px; border-radius: 18px; color: #000000; background: #fff; display: grid; place-items: center; text-align: center; } .landing-page .scratch-card em, .landing-page .scratch-card strong { display: block; } /* The generic light-theme typography must not darken the black Apple Wallet CTA. */ .landing-page .gw-wallet-actions > span:first-child b, .landing-page .gw-wallet-actions > span:first-child em, .landing-page .gw-wallet-actions > span:first-child strong { color: #fff !important; } /* Keep the four hero scenes continuously cross-faded. */ @keyframes gwScene { 0% { opacity: 0; transform: translateY(12px) scale(.975); } 4%, 25% { opacity: 1; transform: none; } 29%, 100% { opacity: 0; transform: translateY(-10px) scale(.99); } } .gw-scene { animation-timing-function: linear !important; }