/* ═══════════════════════════════════════════════════ MySA Features v2 — Persistent Phone Architecture Apple Keynote × Stripe × Linear aesthetic ═══════════════════════════════════════════════════ */ /* Country gate: Call Assist is Canada-only (geo-content.js callAssistVisible). Hide the two call features — "AI Call Assistant" (#f-calls) and "Outgoing Calls" (#f-outgoing) — UNLESS navbar.js confirms Canada by adding `geo-callassist-on` to . Default-hidden via :not() so the non-Canada majority (and no-JS crawlers) never see them; Canada gets them revealed. */ html:not(.geo-callassist-on) #f-calls, html:not(.geo-callassist-on) #f-outgoing { display: none !important; } /* Auto-numbering: the feature badges are filled by a CSS counter (not hardcoded digits), so when the Canada-only call features above are hidden the remaining features renumber continuously (1, 2, 3 …) with no gaps — a `display:none` element does not increment a CSS counter. Canada (all shown) numbers 1–10. */ .fp-content-rail { counter-reset: fp-feat; } .fp-content-rail .fp-feature { counter-increment: fp-feat; } .fp-feature-num::before { content: counter(fp-feat); } /* ── Design Tokens ── */ :root { --fp-navy: #0F172A; --fp-white: #FFFFFF; --fp-bg: #F8FAFC; --fp-alt: #F1F5F9; --fp-glass: rgba(255, 255, 255, 0.7); --fp-glass-border: rgba(0, 0, 0, 0.06); --fp-subtitle: #64748B; --fp-body: #334155; --fp-brand-grad: linear-gradient(90deg, #43C05F 0%, #0090A8 100%); --fp-brand-solid: #43C05F; --fp-brand-alt: #0090A8; --fp-font-d: 'Inter', -apple-system, sans-serif; --fp-font-b: 'Inter', -apple-system, sans-serif; --fp-shadow-s: 0 2px 8px rgba(0, 0, 0, 0.04); --fp-shadow-m: 0 8px 32px rgba(0, 0, 0, 0.08); --fp-shadow-l: 0 20px 60px rgba(0, 0, 0, 0.12); --fp-r-m: 12px; --fp-r-l: 20px; --fp-r-xl: 28px; } /* ── Reset for features page ── */ .features-page-v2 { background: var(--fp-bg); color: var(--fp-body); overflow-x: visible !important; overflow-y: visible !important; } .features-page-v2 *, .features-page-v2 *::before, .features-page-v2 *::after { box-sizing: border-box; } html:has(.features-page-v2) { overflow-x: hidden; overflow-y: visible !important; } /* ── Typography ── */ .fp-h1 { font: 700 clamp(36px, 5vw, 64px)/1.08 var(--fp-font-d); color: var(--fp-navy); letter-spacing: -0.03em; } .fp-h2 { font: 700 clamp(32px, 4vw, 52px)/1.12 var(--fp-font-d); color: var(--fp-navy); letter-spacing: -0.02em; } .fp-h3 { font: 600 clamp(20px, 2.5vw, 28px)/1.3 var(--fp-font-d); color: var(--fp-navy); } .fp-lead { font: 400 clamp(16px, 1.5vw, 20px)/1.6 var(--fp-font-b); color: var(--fp-subtitle); max-width: 640px; } .fp-grad { background: var(--fp-brand-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Layout Primitives ── */ .fp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); } .fp-center { text-align: center; display: flex; flex-direction: column; align-items: center; } /* ── Badge ── */ .fp-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 100px; background: rgba(67, 192, 95, 0.1); border: 1px solid rgba(67, 192, 95, 0.2); font: 500 13px/1 var(--fp-font-b); color: var(--fp-brand-solid); margin-bottom: 20px; } /* ── Hero ── */ .fp-hero { padding: clamp(100px, 12vh, 160px) 0 clamp(60px, 8vh, 100px); text-align: center; } .fp-hero .fp-h1 { margin-bottom: 24px; } .fp-hero .fp-lead { margin: 0 auto 40px; } .fp-pills { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .fp-pill { padding: 10px 20px; border-radius: 100px; background: var(--fp-glass); border: 1px solid var(--fp-glass-border); font: 500 14px/1 var(--fp-font-b); color: var(--fp-navy); backdrop-filter: blur(10px); } /* ══════════════════════════════════════════ PERSISTENT PHONE + FEATURE JOURNEY ══════════════════════════════════════════ */ .fp-journey { position: relative; } /* The sticky container holds the phone */ .fp-journey-inner { display: flex; align-items: flex-start; gap: clamp(40px, 6vw, 80px); } /* Left: scrolling content */ .fp-content-rail { flex: 1; min-width: 0; } /* Right: sticky phone */ .fp-phone-dock { position: sticky; top: 10vh; flex: 0 0 clamp(280px, 30vw, 360px); display: flex; justify-content: center; z-index: 10; height: auto; } /* ── iPhone 15 Pro Mockup ── */ .fp-iphone { width: 100%; max-width: 340px; aspect-ratio: 430/932; background: #1a1a1a; border-radius: clamp(36px, 5vw, 50px); padding: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset, var(--fp-shadow-l), 0 40px 80px rgba(0, 0, 0, 0.18); position: relative; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .fp-iphone-island { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 100px; height: 30px; background: #000; border-radius: 16px; z-index: 20; } .fp-iphone-screen { width: 100%; height: 100%; border-radius: clamp(28px, 4vw, 40px); overflow: hidden; background: #e5ddd5; position: relative; display: flex; flex-direction: column; } /* ── WhatsApp Chrome ── */ .fp-wa-header { background: #075E54; color: #fff; padding: 40px 16px 12px; display: flex; align-items: center; gap: 10px; position: relative; z-index: 5; } .fp-wa-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--fp-brand-grad); color: #fff; display: flex; align-items: center; justify-content: center; font: 600 13px/1 var(--fp-font-d); } .fp-wa-name { font: 500 14px/1 var(--fp-font-d); } .fp-wa-status { font: 400 11px/1 var(--fp-font-b); opacity: 0.7; } .fp-wa-chat { flex: 1; padding: 16px 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4cfc4' fill-opacity='0.15'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); min-height: 0; } .fp-wa-input { background: #f0f0f0; padding: 10px 16px 10px 12px; display: flex; align-items: center; gap: 8px; border-top: 1px solid #ddd; } .fp-wa-input-field { flex: 1; background: #fff; border-radius: 20px; padding: 8px 14px; font: 400 12px/1 var(--fp-font-b); color: #999; border: none; } .fp-wa-mic { width: 32px; height: 32px; border-radius: 50%; background: #075E54; display: flex; align-items: center; justify-content: center; } .fp-wa-mic svg { width: 16px; height: 16px; fill: #fff; } /* ── Fake iOS Keyboard ── */ .fp-wa-keyboard { height: auto; background: #d1d4d9; flex-shrink: 0; display: flex; flex-direction: column; padding: 8px 4px 20px; gap: 8px; } .fp-kbd-row { display: flex; justify-content: center; gap: 4px; } .fp-kbd-key { background: #fff; border-radius: 6px; height: 40px; flex: 1; max-width: 32px; box-shadow: 0 1px 0 rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; font: 400 16px/1 system-ui, -apple-system, sans-serif; color: #000; } .fp-kbd-key.special { background: #b3b8c2; flex: 1.5; max-width: none; font-size: 14px; } .fp-kbd-key.space { flex: 5; max-width: none; font-size: 14px; } /* ── Chat Bubbles ── */ .fp-msg { max-width: 85%; padding: 8px 12px; border-radius: 12px; font: 400 12px/1.4 var(--fp-font-b); position: relative; word-wrap: break-word; opacity: 0; transform: translateY(8px); animation: fpMsgIn 0.3s forwards; } .fp-msg.user { align-self: flex-end; background: #dcf8c6; color: #111; border-bottom-right-radius: 4px; } .fp-msg.ai { align-self: flex-start; background: #fff; color: #111; border-bottom-left-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } .fp-msg time { display: block; text-align: right; font-size: 10px; color: #999; margin-top: 4px; } .fp-msg .fp-check { color: #53bdeb; font-size: 10px; margin-left: 4px; } .fp-msg-confirm { display: inline-flex; align-items: center; gap: 4px; color: #10B981; font-weight: 600; font-size: 11px; margin-bottom: 4px; } /* Cascade stagger */ .fp-msg:nth-child(1) { animation-delay: 0.1s; } .fp-msg:nth-child(2) { animation-delay: 0.5s; } .fp-msg:nth-child(3) { animation-delay: 0.9s; } .fp-msg:nth-child(4) { animation-delay: 1.3s; } @keyframes fpMsgIn { to { opacity: 1; transform: translateY(0); } } /* Typing dots */ .fp-typing { align-self: flex-start; background: #fff; border-radius: 12px; padding: 10px 14px; display: flex; gap: 4px; align-items: center; opacity: 0; animation: fpMsgIn 0.2s 0.35s forwards; } .fp-typing .dot { width: 6px; height: 6px; background: #999; border-radius: 50%; animation: fpDotBounce 1.2s infinite; } .fp-typing .dot:nth-child(2) { animation-delay: 0.2s; } .fp-typing .dot:nth-child(3) { animation-delay: 0.4s; } @keyframes fpDotBounce { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } } /* ── Feature Section ── */ .fp-feature { padding: clamp(80px, 10vh, 140px) 0; border-bottom: 1px solid var(--fp-glass-border); opacity: 0.35; /* Only the dim→bright fade toggles on scroll; no vertical transform, so the feature text never shifts as it becomes active/inactive. */ transition: opacity 0.7s; } .fp-feature.active { opacity: 1; } .fp-feature:last-child { border-bottom: none; } .fp-feature-header { margin-bottom: 40px; } .fp-feature-header .fp-h2 { margin-bottom: 16px; } .fp-problem { font: 400 16px/1.6 var(--fp-font-b); color: var(--fp-body); max-width: 560px; margin-bottom: 24px; } .fp-transformation { font: 500 18px/1.5 var(--fp-font-b); color: var(--fp-navy); } /* ── Command Cards ── */ .fp-commands { margin-top: 48px; } .fp-commands h4 { font: 600 14px/1 var(--fp-font-d); color: var(--fp-subtitle); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; } .fp-cmd-list { display: flex; flex-direction: column; gap: 12px; } .fp-cmd { background: var(--fp-glass); border: 1px solid var(--fp-glass-border); border-radius: var(--fp-r-m); padding: 16px 20px; display: flex; align-items: center; gap: 12px; transition: transform 0.2s, box-shadow 0.2s; cursor: default; backdrop-filter: blur(8px); } .fp-cmd:hover { transform: translateY(-2px); box-shadow: var(--fp-shadow-m); } .fp-cmd-tag { font: 600 10px/1 var(--fp-font-b); text-transform: uppercase; padding: 4px 8px; border-radius: 4px; flex-shrink: 0; letter-spacing: 0.5px; } .fp-cmd-tag.basic { background: var(--fp-alt); color: var(--fp-subtitle); border: 1px solid var(--fp-glass-border); } .fp-cmd-tag.power { background: var(--fp-brand-grad); color: #fff; } .fp-cmd-text { font: 400 14px/1.4 var(--fp-font-b); color: var(--fp-navy); flex: 1; } /* ── Feature number indicator ── */ .fp-feature-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--fp-brand-grad); color: #fff; font: 600 12px/1 var(--fp-font-d); margin-bottom: 16px; } /* ── Scroll Reveal ── */ .fp-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .fp-reveal.visible { opacity: 1; transform: translateY(0); } /* ══════════════════════════════════════════ BOTTOM SECTIONS (Social, FAQ, CTA) ══════════════════════════════════════════ */ .fp-social-section, .fp-faq-section, .fp-cta-section-v2 { padding: clamp(60px, 8vh, 120px) 0; } .fp-social-section { background: var(--fp-alt); } /* Metrics */ .fp-metrics { display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; margin: 48px 0; } .fp-metric { text-align: center; } .fp-metric-num { font: 700 clamp(28px, 4vw, 48px)/1 var(--fp-font-d); color: var(--fp-navy); } .fp-metric-label { font: 400 14px/1 var(--fp-font-b); color: var(--fp-subtitle); margin-top: 8px; } /* Testimonials */ .fp-testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 48px; } .fp-testi { background: var(--fp-white); border: 1px solid var(--fp-glass-border); border-radius: var(--fp-r-l); padding: 24px; } .fp-testi-stars { margin-bottom: 12px; font-size: 14px; } .fp-testi-quote { font: 400 14px/1.6 var(--fp-font-b); color: var(--fp-body); margin-bottom: 16px; } .fp-testi-author { display: flex; align-items: center; gap: 12px; } .fp-testi-av { width: 36px; height: 36px; border-radius: 50%; background: var(--fp-brand-grad); color: #fff; display: flex; align-items: center; justify-content: center; font: 600 14px/1 var(--fp-font-d); } .fp-testi-name { font: 500 13px/1 var(--fp-font-d); color: var(--fp-navy); } .fp-testi-role { font: 400 12px/1 var(--fp-font-b); color: var(--fp-subtitle); margin-top: 2px; } /* FAQ */ .fp-faq-section { background: var(--fp-bg); } .fp-faq-list { max-width: 700px; margin: 0 auto; } .fp-faq-item { border-bottom: 1px solid var(--fp-glass-border); } .fp-faq-q { width: 100%; background: none; border: none; padding: 20px 0; display: flex; justify-content: space-between; align-items: center; font: 500 16px/1.4 var(--fp-font-d); color: var(--fp-navy); cursor: pointer; text-align: left; } .fp-faq-q svg { width: 20px; height: 20px; transition: transform 0.3s; flex-shrink: 0; } .fp-faq-item.open .fp-faq-q svg { transform: rotate(45deg); } .fp-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s; } .fp-faq-item.open .fp-faq-a { max-height: 200px; } .fp-faq-a p { padding: 0 0 20px; font: 400 15px/1.6 var(--fp-font-b); color: var(--fp-subtitle); } /* CTA */ .fp-cta-section-v2 { background: var(--fp-brand-grad); color: #fff; text-align: center; } .fp-cta-section-v2 .fp-h2 { color: #fff; } .fp-cta-section-v2 .fp-lead { color: rgba(255, 255, 255, 0.9); } .fp-cta-btns { display: flex; gap: 16px; justify-content: center; margin-top: 32px; flex-wrap: wrap; } .fp-cta-primary { padding: 16px 40px; border-radius: 100px; background: #fff; color: var(--fp-brand-alt); font: 600 16px/1 var(--fp-font-d); text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; border: none; cursor: pointer; } .fp-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255, 255, 255, 0.3); } .fp-cta-secondary { padding: 16px 40px; border-radius: 100px; background: rgba(255, 255, 255, 0.1); color: #fff; font: 600 16px/1 var(--fp-font-d); text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.3); transition: background 0.2s; } .fp-cta-secondary:hover { background: rgba(255, 255, 255, 0.2); } .fp-cta-trust { margin-top: 24px; font: 400 13px/1 var(--fp-font-b); color: rgba(255, 255, 255, 0.8); display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* ══════════════════════════════════════════ MOBILE RESPONSIVE ══════════════════════════════════════════ */ @media (max-width: 968px) { .fp-journey-inner { flex-direction: column; } /* Mobile: hide the iPhone mockup (shown only on desktop) — content stays as is. */ .fp-phone-dock { display: none; } .fp-iphone { max-width: 260px; margin: 0 auto; } .fp-feature { padding: 60px 0; /* No scroll-sync dimming on mobile/tablet — the sticky-phone "brighten the active feature" effect is a desktop thing; on the stacked layout every feature (incl. the one you deep-linked to) must be fully visible, not faded. */ opacity: 1; } } @media (max-width: 480px) { .fp-iphone { max-width: 220px; } .fp-cmd { flex-direction: column; align-items: flex-start; gap: 8px; } } /* ── Prefers Reduced Motion ── */ @media (prefers-reduced-motion: reduce) { .fp-msg, .fp-typing, .fp-feature, .fp-reveal { animation: none !important; transition-duration: 0.01ms !important; opacity: 1 !important; transform: none !important; } .fp-typing .dot { animation: none !important; } } /* ═══════════════════════════════════════════════ * Top-nav styling is now inherited entirely from the shared * css/sections/nav.css, so this page shows the exact same navbar * as every other page. The old features-v2 white-link overrides * (built for a dark hero) were removed. * ═══════════════════════════════════════════════ */