/* Hemo website wireframe mockup Content from 02-content-spec.md · Layout from 03-wireframe.md Aesthetic: brand palette + wireframe placeholders (dashed frames, labels) */ :root { --bg: #000d0f; --surface: #01161b; --surface-hover: #022026; --nav-bg: #041217; --stroke: #03242b; --stroke-strong: #0a3a44; --text: #f5fafa; --text-muted: rgba(245, 250, 250, 0.68); --text-faint: rgba(245, 250, 250, 0.42); --optimal: #5b9fd4; --normal: #5cb88a; --warn: #e08a6a; --cta: #7eacff; --cta-start: #5b8ef5; --cta-end: #96baff; --ai-1: #e6a0a0; --ai-2: #9ca0f9; --ai-3: #84a7fd; --peri: #9ca0f9; --radius: 12px; --wire: rgba(132, 167, 253, 0.35); --wire-label: rgba(132, 167, 253, 0.7); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 24px; --max: 1160px; --prose: 720px; --font: "Instrument Sans", -apple-system, "SF Pro Display", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; /* Type scale — start here; add body/lead/title tokens as we consolidate */ --text-eyebrow: 12px; --site-header-h: 4rem; /* 64px fixed header */ --edge-hair: rgba(0, 0, 0, 0.65); /* inset line paired with section/header strokes */ } *, *::before, *::after { box-sizing: border-box; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { margin: 0; padding-top: var(--site-header-h); font-family: var(--font); font-size: 17px; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; /* clip (not hidden) so sticky still works; kills stray horizontal scroll. NOTE: keep overflow off — a root overflow freezes iOS Safari's live toolbar tint (green bar sticks until zoom/refresh). */ overflow-x: clip; } /* Kill iOS double-tap zoom on chrome (logo tap after a long scroll was a common repro) */ a, button, .btn, summary, [role="button"] { touch-action: manipulation; } img { max-width: 100%; display: block; } a { color: var(--optimal); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--optimal); outline-offset: 3px; } /* ——— Layout ——— */ .wrap { width: min(100% - 48px, var(--max)); margin-inline: auto; } .prose { max-width: var(--prose); } .section { padding: 96px 0; border-top: 1px solid rgba(3, 36, 43, 0.7); box-shadow: inset 0 2px 0 var(--edge-hair); } .section--tight { padding: 64px 0; } /* Shared mono eyebrow / label (use class directly, or via aliases below) */ .eyebrow, .section__eyebrow, .wire__label, .extract-card__eyebrow, .flow-scene__label, .flow-bucket__label, .faq-page .faq-group__title, .roadmap__index, .step__num, .bio-group h3, .privacy-toc p, .beta-success__eyebrow { font-family: var(--font-mono); font-size: var(--text-eyebrow); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wire-label); } .section__eyebrow { margin: 0 0 12px; } .section__title { font-size: clamp(28px, 3.5vw, 40px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 16px; } .section__lead { font-size: 18px; color: var(--text-muted); margin: 0 0 32px; max-width: var(--prose); } .section__lead strong { color: var(--text); font-weight: 500; } /* ——— Header ——— */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(0, 13, 15, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); /* Reserve the outer stroke; gradient paints into it below the inset */ border-bottom: 1px solid transparent; /* Darkest hairline sits on top of the bottom stroke (inside the header) */ box-shadow: inset 0 -2px 0 var(--edge-hair); /* Own compositor layer so page animations can’t thrash header paint */ transform: translateZ(0); } /* Soft privacy blue → teal → stroke; sits in the border slot under the inset */ .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient( 90deg, rgba(63, 136, 224, 0.4) 0%, rgba(63, 136, 224, 0.32) 18%, rgba(42, 143, 160, 0.22) 55%, var(--stroke) 100% ); pointer-events: none; } .site-header__inner { display: flex; align-items: center; gap: 24px; height: 64px; } .logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; line-height: 0; } .logo:hover { text-decoration: none; } .logo__img { display: block; height: 32px; width: auto; max-width: 120px; object-fit: contain; } .logo--footer .logo__img { height: 36px; max-width: 140px; } .nav { display: flex; align-items: center; justify-content: flex-end; gap: 2px; flex: 1; margin-left: 24px; margin-right: 8px; } .nav a { display: inline-flex; align-items: center; height: 34px; box-sizing: border-box; color: var(--text-muted); font-size: 14px; padding: 0 12px; border-radius: var(--radius-sm); text-decoration: none; } .nav a:hover, .nav a[aria-current="page"] { color: var(--text); background: var(--surface-hover); text-decoration: none; } .site-header__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .site-header__actions .btn { height: 34px; box-sizing: border-box; padding: 0 14px; font-size: 13px; border-radius: 8px; line-height: 1; } .nav-toggle { display: none; align-items: center; justify-content: center; height: 34px; box-sizing: border-box; background: transparent; border: 1px solid var(--stroke-strong); color: var(--text); border-radius: var(--radius-sm); padding: 0 12px; font-size: 13px; cursor: pointer; font-family: inherit; } html.is-scroll-locked, html.is-scroll-locked body { overflow: hidden; overscroll-behavior: none; } /* iOS: pin the page while nav/modal lock is on (overflow alone fails under zoom) */ html.is-scroll-locked body { position: fixed; left: 0; right: 0; width: 100%; } body.nav-is-open::before { content: ""; position: fixed; inset: 0; z-index: 40; background: rgba(0, 8, 10, 0.42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* ——— Buttons ——— */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 10px; border: none; cursor: pointer; text-decoration: none; transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease; } .btn:hover { text-decoration: none; transform: translateY(-1px); } /* Filled CTA — layered border stack (hero spotlight is opt-in via .btn--spotlight) */ .btn--primary, .btn--stack { color: var(--bg); background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 42%), linear-gradient(180deg, var(--cta-end) 0%, var(--cta-end) 58%, var(--cta-start) 100%); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 0 0 1px rgba(40, 70, 140, 0.45), inset 0 1.5px 0 rgba(255, 255, 255, 0.32), inset 0 -1px 2px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.18), 0 4px 14px rgba(101, 152, 255, 0.28); } .btn--primary:hover, .btn--stack:hover { filter: brightness(1.06); transform: translateY(-1px); } .btn--primary:active, .btn--stack:active { transform: translateY(0); filter: brightness(0.98); box-shadow: 0 0 0 1px rgba(40, 70, 140, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(0, 0, 0, 0.2); } /* Hero CTA: thin mouse-steered light beam on the border only */ .btn--spotlight { --beam-angle: -90deg; --beam-intensity: 0.55; position: relative; isolation: isolate; /* Drop the blue outer glow; keep stack fill + subtle depth */ box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.32), inset 0 -1px 2px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.18); border-color: rgba(255, 255, 255, 0.16); } .btn--spotlight::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 1; background: conic-gradient( from var(--beam-angle), rgba(255, 255, 255, calc(0.08 * var(--beam-intensity))) 0deg, rgba(255, 255, 255, calc(0.22 * var(--beam-intensity))) 28deg, rgba(255, 255, 255, calc(0.95 * var(--beam-intensity))) 48deg, rgba(220, 235, 255, calc(0.55 * var(--beam-intensity))) 58deg, rgba(255, 255, 255, calc(0.95 * var(--beam-intensity))) 68deg, rgba(255, 255, 255, calc(0.22 * var(--beam-intensity))) 88deg, rgba(255, 255, 255, calc(0.08 * var(--beam-intensity))) 120deg, rgba(255, 255, 255, 0.05) 180deg, rgba(255, 255, 255, 0.05) 360deg ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .btn--spotlight:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 2px 4px rgba(0, 0, 0, 0.22), 0 1px 4px rgba(0, 0, 0, 0.2); } @media (prefers-reduced-motion: reduce) { .btn--spotlight { --beam-angle: -90deg; --beam-intensity: 0.45; } } .btn--secondary { color: var(--text); background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0) 40%), #01161b; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 1px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.25); } .btn--secondary:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 40%), #022026; border-color: rgba(255, 255, 255, 0.14); } .btn--secondary:active { transform: translateY(0); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.03), inset 0 2px 3px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.28); } .btn--ghost { background: transparent; color: var(--optimal); padding-inline: 8px; } /* Hero CTA only — larger proportions */ .hero__cta .btn { padding: 14px 44px; font-size: 16px; border-radius: 12px; } .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } /* ——— Wireframe placeholders ——— */ .wire { border: 1.5px dashed var(--wire); border-radius: var(--radius-lg); background: repeating-linear-gradient( -45deg, transparent, transparent 8px, rgba(132, 167, 253, 0.03) 8px, rgba(132, 167, 253, 0.03) 16px ), var(--surface); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 200px; padding: 24px; text-align: center; overflow: hidden; } .wire__title { font-size: 15px; font-weight: 500; color: var(--text-muted); margin: 0; } .wire__hint { font-size: 13px; color: var(--text-faint); max-width: 280px; margin: 0; } .wire--hero { min-height: 420px; aspect-ratio: 16 / 10; } .wire--lg { min-height: 320px; } .wire--md { min-height: 220px; } .wire--sm { min-height: 140px; } .wire--diagram { min-height: 280px; } .wire--angled { transform: perspective(900px) rotateY(-4deg) rotateX(2deg); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); } @media (max-width: 768px) { .wire--angled { transform: none; } } /* Fake UI chrome inside wireframes */ .fake-ui { width: 100%; max-width: 480px; text-align: left; opacity: 0.85; } .fake-ui__bar { display: flex; gap: 6px; margin-bottom: 16px; } .fake-ui__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--stroke-strong); } .fake-ui__row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--stroke); border-radius: var(--radius-sm); margin-bottom: 8px; font-size: 12px; color: var(--text-muted); } .fake-ui__ring { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--stroke-strong); border-top-color: var(--optimal); border-right-color: var(--normal); margin: 0 auto 16px; } .fake-ui__bands { height: 48px; border-radius: 8px; background: linear-gradient( 90deg, transparent 8%, rgba(92, 184, 138, 0.25) 8%, rgba(92, 184, 138, 0.25) 92%, transparent 92% ); position: relative; margin: 16px 0; } .fake-ui__bands::after { content: ""; position: absolute; inset: 8px 28% 8px 28%; background: rgba(91, 159, 212, 0.45); border-radius: 4px; } .fake-ui__dot-marker { position: absolute; top: 50%; left: 48%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--optimal); border: 2px solid var(--bg); z-index: 1; } /* ——— Hero → Import flow (solid --bg, no banding gradient) ——— */ .hero-flow { position: relative; /* Contain the grid at z-index: -1 so it sits above this bg but under content */ isolation: isolate; /* Solid page bg — no vertical darken gradient (avoids banding) */ background: var(--bg); } .hero-flow::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: min(140vh, 1200px); z-index: -1; pointer-events: none; background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(42, 143, 160, 0.18), transparent 60%), radial-gradient(ellipse 50% 40% at 50% 55%, rgba(26, 107, 122, 0.12), transparent 62%); } /* ——— Hero ——— */ .hero { --font-serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; position: relative; /* No elevated z-index — keeps gradient/trust under the pinned frame twin */ z-index: auto; box-sizing: border-box; /* Soft viewport fill — content can grow past the fold; no forced clip */ min-height: calc(100svh - var(--site-header-h)); display: flex; flex-direction: column; justify-content: center; padding: 72px 0 48px; overflow: visible; background: transparent; } .hero__stack { position: relative; /* No z-index — glass chips must compete at root above the fixed morph twin */ z-index: auto; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 64px; width: 100%; } .hero__copy { text-align: center; display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: min(100% - 48px, 46rem); padding: 0; } .hero__eyebrow { font-family: var(--font); font-size: clamp(15px, 1.2vw, 18px); font-weight: 500; letter-spacing: -0.01em; text-transform: none; color: rgba(245, 250, 250, 0.88); margin: 0 0 18px; } .hero__title { display: flex; flex-direction: column; align-items: center; gap: 0.06em; margin: 0 0 22px; } .hero__title-line { display: block; font-size: clamp(44px, 6.2vw, 76px); font-weight: 700; letter-spacing: -0.045em; line-height: 1.02; color: var(--text); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.18); } .hero__title-line--serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.03em; line-height: 1.05; font-size: clamp(42px, 5.8vw, 72px); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.16); } .hero__sub { position: relative; z-index: 2; font-size: clamp(19px, 1.6vw, 21px); font-weight: 400; color: rgba(245, 250, 250, 0.78); margin: 0 0 28px; line-height: 1.5; max-width: 40em; } .hero__cta { display: flex; justify-content: center; margin: 0; } .hero__note { font-size: 13px; color: var(--text-faint); margin: 16px 0 0; max-width: 36em; line-height: 1.45; } /* Trust chips — between sub and CTA */ .hero__trust { position: relative; z-index: 2; width: 100%; margin: 0 0 22px; padding: 0; } .trust-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; list-style: none; padding: 0; } .trust-chips li { font-size: 12px; font-weight: 500; color: var(--text-muted); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; padding: 6px 12px; background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Product stage — natural image size, glass rim wraps the full shot */ .hero__stage { position: relative; /* No stacking context here — chips need to compete at root with the fixed twin */ z-index: auto; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 100%; margin: 0; padding: 0 24px; } .hero__frame { position: relative; z-index: 1; width: min(100%, var(--max)); padding: 12px; border-radius: 24px; overflow: hidden; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 10px 22px rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(255, 255, 255, 0.12); } .hero__shot-wrap { position: relative; border-radius: 16px; overflow: hidden; background: #031416; } .hero__shot { display: block; width: 100%; height: auto; border-radius: inherit; object-fit: contain; object-position: center; /* Subtle vibrance bump so the dashboard colors read a bit richer */ filter: saturate(1.12) contrast(1.03); user-select: none; pointer-events: none; } .glass-chip { position: absolute; /* Must beat fixed morph twin (z:5) at the root stacking context */ z-index: 20; display: flex; align-items: center; gap: 10px; padding: 14px 18px; font-size: 13px; font-weight: 500; color: var(--text); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 14px; backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(255, 255, 255, 0.06); white-space: nowrap; pointer-events: none; } .glass-chip__badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--peri); border: 1px solid rgba(156, 160, 249, 0.4); border-radius: 999px; padding: 3px 8px; background: rgba(156, 160, 249, 0.12); } .glass-chip--1 { top: 8%; /* Hang past the frame edge (tracks --max so wide hero stays overlapped) */ right: max(0%, calc(50% - var(--max) / 2 - 60px)); animation: glass-float 5.5s ease-in-out infinite; } .glass-chip--2 { top: 36%; left: max(0%, calc(50% - var(--max) / 2 - 80px)); animation: glass-float 6.5s ease-in-out infinite 0.6s; } .glass-chip--3 { bottom: 14%; right: max(1%, calc(50% - 520px)); animation: glass-float 7s ease-in-out infinite 1.1s; } @keyframes glass-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .glass-chip--1, .glass-chip--2, .glass-chip--3 { animation: none; } } .hero__stage.is-offscreen .glass-chip--1, .hero__stage.is-offscreen .glass-chip--2, .hero__stage.is-offscreen .glass-chip--3 { animation-play-state: paused; } /* ——— Upload morph (hero frame → drop zone) ——— */ .upload-morph { position: relative; /* No z-index — lets the fixed twin participate at root between trust (0) and chips (15) */ z-index: auto; /* Inherits solid lighter wash from .hero-flow — no gradient (avoids banding) */ background: transparent; /* Breathing room after the pin releases, before the next section */ padding-bottom: clamp(72px, 16vh, 180px); overflow-x: clip; overflow-y: visible; /* Tall track changes must not yank scroll on refresh / layout */ overflow-anchor: none; } .upload-morph__track { /* Morph → docs → extract → snapshot (hold + swipe) → action plan */ height: 780vh; position: relative; overflow-anchor: none; } .upload-morph__sticky { /* Snapshot: floor at laptop size (~620), grow on large monitors */ --flow-art-w: min(900px, max(620px, 40vw), 78vh); /* Extract: keep the original settled size; don't scale up with viewport */ --flow-drop: min(340px, 78vw); position: sticky; top: var(--site-header-h); /* Fallback before JS; theater syncs to visualViewport so we fill the visible stage without painting under Safari’s bottom chrome (that locks a solid green toolbar color after the Understand beat). */ height: calc(100svh - var(--site-header-h)); display: flex; flex-direction: column; align-items: center; /* Keep import + snapshot copy/art as a centered unit on tall screens */ justify-content: center; /* Extra bottom pad so the last beat sits above the section seam */ padding: clamp(28px, 4vh, 56px) 24px clamp(72px, 12vh, 140px); overflow: hidden; box-sizing: border-box; pointer-events: none; /* Under pinned frame so copy stays behind the image while it crops */ z-index: 3; } /* ——— Hero status-light grid (subtle). Separate from extract WebGL grid. ——— */ .hero-grid { --hero-grid-op: 0; position: absolute; left: 0; right: 0; top: 0; /* Height set in JS: hero through Import sticky view */ height: 100vh; /* Behind hero/morph content; isolation on .hero-flow keeps this above the solid bg */ z-index: -1; pointer-events: none; opacity: var(--hero-grid-op, 0); transition: opacity 1.4s cubic-bezier(0.2, 0, 0, 1); /* Fade in from hero top; soft long fade-out through Import */ -webkit-mask-image: linear-gradient( to bottom, transparent 0%, rgba(0, 0, 0, 0.2) 8%, rgba(0, 0, 0, 0.7) 16%, #000 24%, #000 58%, rgba(0, 0, 0, 0.7) 70%, rgba(0, 0, 0, 0.35) 82%, rgba(0, 0, 0, 0.1) 92%, transparent 100% ); mask-image: linear-gradient( to bottom, transparent 0%, rgba(0, 0, 0, 0.2) 8%, rgba(0, 0, 0, 0.7) 16%, #000 24%, #000 58%, rgba(0, 0, 0, 0.7) 70%, rgba(0, 0, 0, 0.35) 82%, rgba(0, 0, 0, 0.1) 92%, transparent 100% ); } .hero-grid.is-in { --hero-grid-op: 1; } .hero-grid__canvas { display: block; width: 100%; height: 100%; } @media (prefers-reduced-motion: reduce) { .hero-grid { transition: none; } .hero-grid.is-in { --hero-grid-op: 1; } } /* WebGL ripple-reveal dot grid behind the extract box. Soft top fade keeps Import copy readable over the field. */ .upload-morph__grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 1; will-change: opacity; -webkit-mask-image: linear-gradient( to bottom, transparent 0%, rgba(0, 0, 0, 0.12) 12%, rgba(0, 0, 0, 0.45) 24%, rgba(0, 0, 0, 0.85) 40%, #000 55%, #000 100% ); mask-image: linear-gradient( to bottom, transparent 0%, rgba(0, 0, 0, 0.12) 12%, rgba(0, 0, 0, 0.45) 24%, rgba(0, 0, 0, 0.85) 40%, #000 55%, #000 100% ); } .upload-morph__grid-canvas { display: block; width: 100%; height: 100%; } /* Soft purple spotlights — delayed after snapshot, same resting shape as before */ .upload-morph__aura { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .upload-morph__aura-spot { position: absolute; inset: 0; opacity: calc(var(--snap-aura, 0) * 0.9); will-change: opacity, transform; } .upload-morph__aura-spot--tl { background: radial-gradient( ellipse 68% 55% at 6% 2%, rgba(142, 108, 198, 0.32) 0%, rgba(110, 78, 170, 0.16) 34%, rgba(70, 50, 130, 0.06) 58%, transparent 76% ); transform: translate3d( calc((1 - var(--snap-aura, 0)) * -10%), calc((1 - var(--snap-aura, 0)) * -8%), 0 ); } .upload-morph__aura-spot--br { background: radial-gradient( ellipse 68% 55% at 94% 98%, rgba(142, 108, 198, 0.3) 0%, rgba(110, 78, 170, 0.15) 34%, rgba(70, 50, 130, 0.06) 58%, transparent 76% ); transform: translate3d( calc((1 - var(--snap-aura, 0)) * 10%), calc((1 - var(--snap-aura, 0)) * 8%), 0 ); } .upload-morph__copy { position: relative; z-index: 1; text-align: center; max-width: min(42rem, 92vw); margin: 0 auto 32px; /* Import copy — out when snapshot or plan takes over */ opacity: calc(var(--morph-copy, 0) * (1 - var(--snap-copy, 0)) * (1 - var(--plan-copy, 0))); transform: translateY(calc((1 - var(--morph-copy, 0)) * 16px)); filter: blur(calc(var(--snap-copy, 0) * 4px)); transition: none; pointer-events: none; flex-shrink: 0; min-height: 6.75rem; } .upload-morph__copy .section__title { margin-bottom: 12px; font-size: clamp(28px, 3.5vw, 40px); white-space: normal; text-wrap: balance; } .upload-morph__copy .section__lead { margin: 0 auto; max-width: 36em; font-size: 18px; text-wrap: pretty; } .upload-morph__copy .section__eyebrow { margin-bottom: 10px; } .upload-morph__stage { position: relative; z-index: 1; /* Size to the drop zone so import stays centered */ flex: 0 0 auto; width: var(--flow-art-w); height: var(--flow-drop); display: flex; align-items: center; justify-content: center; min-height: 0; /* Out when snapshot / plan take over */ opacity: calc((1 - var(--snap-copy, 0)) * (1 - var(--plan-copy, 0))); pointer-events: none; } /* End-state slot — stays square through drop → extract */ .upload-morph__slot { width: var(--flow-drop); height: var(--flow-drop); flex-shrink: 0; visibility: hidden; pointer-events: none; } /* 02 · Understand + 03 · Optimize — shared left/right overlay grid */ .upload-morph__snapshot, .upload-morph__plan { position: absolute; inset: 0; z-index: 2; display: grid; /* Fixed copy column + flexible art column so short viewports don't re-center the pair when the portrait art shrinks */ grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); align-items: center; gap: clamp(28px, 2.8vw, 48px); /* Match .wrap / header content width so the pair isn't edge-loose */ width: min(100% - 48px, var(--max)); margin: 0 auto; padding: 48px 0 clamp(72px, 12vh, 140px); box-sizing: border-box; pointer-events: none; } .upload-morph__snapshot { opacity: calc(var(--snap-copy, 0) * (1 - var(--plan-copy, 0))); transform: translateY(calc((1 - var(--snap-copy, 0)) * 18px)); filter: blur(calc((1 - var(--snap-copy, 0)) * 4px + var(--plan-copy, 0) * 4px)); } .upload-morph__plan { opacity: var(--plan-copy, 0); transform: translateY(calc((1 - var(--plan-copy, 0)) * 18px)); filter: blur(calc((1 - var(--plan-copy, 0)) * 4px)); /* Tighter vertical pad so the tall portrait still gets more height */ padding-top: 40px; padding-bottom: 40px; align-items: center; } .upload-morph__snapshot-copy, .upload-morph__plan-copy { text-align: left; max-width: 26rem; justify-self: start; } .upload-morph__snapshot-copy .section__title, .upload-morph__plan-copy .section__title { margin-bottom: 10px; font-size: clamp(28px, 3.5vw, 40px); white-space: normal; text-wrap: balance; } .upload-morph__snapshot-copy .section__lead, .upload-morph__plan-copy .section__lead { margin: 0; max-width: 34em; font-size: 18px; text-wrap: pretty; } .upload-morph__copy-layer, .upload-morph__snapshot-copy, .upload-morph__plan-copy { pointer-events: none; user-select: text; } .upload-morph.is-copy-import .upload-morph__copy-layer, .upload-morph.is-copy-snapshot .upload-morph__snapshot-copy, .upload-morph.is-copy-plan .upload-morph__plan-copy { pointer-events: auto; } .upload-morph__snapshot-copy .section__eyebrow, .upload-morph__plan-copy .section__eyebrow { margin-bottom: 8px; } .upload-morph__snap-slot, .upload-morph__plan-slot { justify-self: end; visibility: hidden; pointer-events: none; } .upload-morph__snap-slot { width: min(100%, var(--flow-art-w)); aspect-ratio: 2328 / 1962; } .upload-morph__plan-slot { /* Same art column as snapshot; looser height budget for the portrait still */ width: min( 100%, var(--flow-art-w), calc((100svh - var(--site-header-h) - 7rem) * 1537 / 1690) ); aspect-ratio: 1537 / 1690; align-self: center; } /* On short desktop viewports, keep the side-by-side pair from feeling top-heavy */ @media (max-height: 820px) and (min-width: 1181px) { .upload-morph__snapshot, .upload-morph__plan { align-items: center; padding-top: 40px; padding-bottom: 48px; } .upload-morph__snapshot-copy, .upload-morph__plan-copy { align-self: center; } } /* Stack both beats on narrower viewports */ @media (max-width: 1180px) { /* Top-align all three beats — centering made a height ladder (Import mid, Optimize flush) */ .upload-morph__sticky { justify-content: flex-start; padding-top: clamp(20px, 3.5vh, 36px); padding-bottom: clamp(24px, 4vh, 40px); } .upload-morph__snapshot, .upload-morph__plan { grid-template-columns: 1fr; justify-items: center; gap: 28px; align-content: start; /* Absolute overlays ignore sticky padding — mirror the same top inset */ padding: clamp(20px, 3.5vh, 36px) 24px clamp(24px, 4vh, 40px); width: min(720px, calc(100% - 48px)); } .upload-morph__snapshot-copy, .upload-morph__plan-copy { text-align: center; max-width: min(36rem, 100%); justify-self: center; } .upload-morph__snapshot-copy .section__lead, .upload-morph__plan-copy .section__lead { margin-inline: auto; } .upload-morph__snap-slot, .upload-morph__plan-slot { justify-self: center; } .upload-morph__snap-slot { width: min(var(--flow-art-w), 100%); } .upload-morph__plan-slot { /* Leave room for stacked copy above the portrait art */ width: min( var(--flow-art-w), 72vw, calc((100svh - var(--site-header-h) - 14rem) * 1537 / 1690) ); } } /* One shared frame — fixed, measured from hero then morphs into drop */ .upload-morph__frame { --morph-x: 0px; --morph-y: 0px; --morph-w: var(--max); --morph-h: 628px; --morph-r: 24px; --morph-pad: 12px; --morph-drop: 0; --morph-icon-scale: 1; --morph-blur: 0; --morph-shot-opacity: 1; --morph-fill: 0; --morph-shadow: 1; --morph-extract: 0; --morph-snapshot: 0; --morph-glass: 0; --morph-out-scale: 1; --morph-shot-w: var(--max); --morph-shot-h: 628px; --morph-border-w: 1px; --morph-border: solid; --morph-border-c: rgba(255, 255, 255, 0.2); --morph-bg: rgba(255, 255, 255, 0.06); position: fixed; top: 0; left: 0; /* Below glass chips (z:15) and header (z:50); above page content / trust */ z-index: 5; width: var(--morph-w); height: var(--morph-h); padding: var(--morph-pad); border-radius: var(--morph-r); /* 1px matches .hero__frame — thicker only when becoming the drop zone */ border: var(--morph-border-w) var(--morph-border) var(--morph-border-c); background: var(--morph-bg); box-shadow: 0 24px 56px rgba(0, 0, 0, calc(0.4 * max(var(--morph-shadow), var(--morph-glass, 0)))), inset 0 1px 0 rgba(255, 255, 255, calc(0.28 * max(var(--morph-shadow), var(--morph-glass, 0)))), inset 0 8px 18px rgba(255, 255, 255, calc(0.1 * max(var(--morph-shadow), var(--morph-glass, 0)))), inset 0 -1px 0 rgba(255, 255, 255, calc(0.08 * max(var(--morph-shadow), var(--morph-glass, 0)))); backdrop-filter: blur(calc(18px * max(var(--morph-shadow), var(--morph-glass, 0)))) saturate(1.35); -webkit-backdrop-filter: blur(calc(18px * max(var(--morph-shadow), var(--morph-glass, 0)))) saturate(1.35); overflow: hidden; box-sizing: border-box; /* Scale exit keeps file rows proportional — avoid width/height clip */ transform: translate3d(var(--morph-x), var(--morph-y), 0) scale(var(--morph-out-scale, 1)); transform-origin: center center; opacity: 0; visibility: hidden; pointer-events: none; will-change: transform, width, height, border-radius, opacity; } .upload-morph__frame.is-active { opacity: 1; visibility: visible; } /* Inactive theater frames: collapse the layout box so wide defaults (900px snap, etc.) can’t expand iOS scroll width. Active sizes come from JS. */ .upload-morph__frame:not(.is-active), .snapshot-frame:not(.is-active), .plan-frame:not(.is-active) { width: 0; height: 0; padding: 0; border-width: 0; overflow: hidden; } /* Shot starts at pin-time inner size (frame shrink crops it), then JS scales it up if the content box grows so the glass doesn't band around it. contain + center matches the hero still so pin has no layout snap. */ .upload-morph__shot { position: absolute; left: 50%; top: 50%; width: var(--morph-shot-w); height: var(--morph-shot-h); max-width: none; transform: translate(-50%, -50%); object-fit: contain; object-position: center; border-radius: 16px; opacity: calc(var(--morph-shot-opacity)); filter: saturate(1.12) contrast(1.03); pointer-events: none; user-select: none; } /* Full-bleed veil — near section bg (#000d0f → #031416) */ .upload-morph__blur { position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: rgba(3, 20, 22, var(--morph-blur)); pointer-events: none; } .upload-morph__drop { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 28px 24px; text-align: center; opacity: var(--morph-drop); transform: scale(var(--morph-icon-scale, 1)); transform-origin: center center; pointer-events: none; will-change: transform, opacity; } .upload-morph__upload-icon { display: block; width: min(156px, 52%); height: auto; object-fit: contain; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35)); user-select: none; pointer-events: none; } /* Extraction moment — transparent so section grid reads through */ .upload-morph__extract { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; opacity: var(--morph-extract, 0); transform: scale(calc(0.97 + var(--morph-extract, 0) * 0.03)); pointer-events: none; background: transparent; border-radius: inherit; overflow: hidden; } .extract-card { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 28px 24px 22px; box-sizing: border-box; text-align: center; } .extract-card__eyebrow { margin: 0 0 22px; text-wrap: balance; opacity: 0; transform: translateY(10px); filter: blur(4px); transition-property: opacity, transform, filter; transition-duration: 420ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); transition-delay: 40ms; } .extract-card.is-live .extract-card__eyebrow { opacity: 1; transform: translateY(0); filter: blur(0); } .extract-card__files { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; max-width: 11.5rem; } .extract-file { --i: 0; display: grid; grid-template-columns: 1fr 16px; align-items: center; column-gap: 12px; width: 100%; min-height: 1.2em; opacity: 0; transform: translateY(10px); filter: blur(4px); transition-property: opacity, transform, filter; transition-duration: 420ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); transition-delay: calc(120ms + var(--i) * 90ms); } .extract-card.is-live .extract-file { opacity: 1; transform: translateY(0); filter: blur(0); } .extract-file__name { font-family: var(--font-mono, var(--font)); font-size: 0.88rem; font-weight: 500; letter-spacing: 0.01em; text-align: left; color: rgba(130, 150, 165, 0.55); -webkit-text-fill-color: currentColor; /* Keep clip + gradient always so done-state can crossfade fill over shimmer */ background-image: linear-gradient( 100deg, rgba(130, 150, 165, 0.4) 0%, rgba(130, 150, 165, 0.4) 38%, rgba(230, 240, 250, 0.95) 50%, rgba(130, 150, 165, 0.4) 62%, rgba(130, 150, 165, 0.4) 100% ); background-size: 220% 100%; background-position: 120% 0; -webkit-background-clip: text; background-clip: text; transition-property: color, -webkit-text-fill-color; transition-duration: 420ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); } /* Shimmer while pending — transparent fill reveals the moving gradient */ .extract-card.is-live .extract-file:not(.is-done) .extract-file__name { color: transparent; -webkit-text-fill-color: transparent; animation: extract-shimmer 1.55s ease-in-out infinite; } .extract-file.is-done .extract-file__name { color: #fff; -webkit-text-fill-color: #fff; animation: none; background-position: 50% 0; } .extract-file__check { width: 16px; height: 16px; justify-self: end; opacity: 0; transform: scale(0.25); filter: blur(4px); transition-property: opacity, transform, filter; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.2 8.1l3.1 3.1 6.4-6.8' stroke='%235CB88A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px 15px no-repeat; } .extract-file.is-done .extract-file__check { opacity: 1; transform: scale(1); filter: blur(0); } .extract-card__pill { margin-top: 4px; padding: 7px 16px; border-radius: 999px; box-shadow: 0 0 0 1px rgba(90, 130, 150, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06); font-size: 0.78rem; font-weight: 500; font-variant-numeric: tabular-nums; color: rgba(235, 245, 250, 0.9); letter-spacing: 0.02em; background: rgba(0, 0, 0, 0.22); opacity: 0; transform: translateY(8px); filter: blur(4px); transition-property: opacity, transform, filter; transition-duration: 420ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); transition-delay: 520ms; } .extract-card.is-live .extract-card__pill { opacity: 1; transform: translateY(0); filter: blur(0); } .extract-card__pill-sep { margin: 0 0.2em; opacity: 0.55; } /* Health Snapshot glass frame — sibling of morph frame, overlaps extract */ .snapshot-frame { --snap-x: 0px; --snap-y: 120vh; --snap-w: 900px; --snap-h: 758px; --snap-opacity: 0; --snap-slide: 0; position: fixed; top: 0; left: 0; z-index: 6; /* Above morph/extract (5); below glass chips (15) */ width: var(--snap-w); height: var(--snap-h); /* Match plan chrome */ padding: 8px; border-radius: 24px; box-sizing: border-box; overflow: hidden; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(14px) saturate(1.35); -webkit-backdrop-filter: blur(14px) saturate(1.35); box-shadow: 0 28px 64px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 6px 14px rgba(255, 255, 255, 0.04), inset 0 -1px 0 rgba(255, 255, 255, 0.1); transform: translate3d(var(--snap-x), var(--snap-y), 0); opacity: var(--snap-opacity); visibility: hidden; pointer-events: none; will-change: transform, opacity; } .snapshot-frame.is-active { visibility: visible; } .snapshot-frame__viewport { position: relative; width: 100%; height: 100%; border-radius: 20px; overflow: hidden; background: #031416; } .snapshot-frame__viewport::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); pointer-events: none; } .snapshot-frame__track { display: flex; width: 200%; height: 100%; transform: translate3d(calc(var(--snap-slide, 0) * -50%), 0, 0); will-change: transform; } .snapshot-frame__slide { flex: 0 0 50%; display: block; width: 50%; height: 100%; object-fit: cover; object-position: center top; user-select: none; pointer-events: none; } /* Action Plan glass frame — priority still, rises into left/right slot */ .plan-frame { --plan-x: 0px; --plan-y: 120vh; --plan-w: 680px; --plan-h: 747px; --plan-opacity: 0; position: fixed; top: 0; left: 0; z-index: 7; /* Above snapshot (6); below glass chips (15) */ width: var(--plan-w); height: var(--plan-h); padding: 8px; border-radius: 24px; box-sizing: border-box; overflow: hidden; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(14px) saturate(1.35); -webkit-backdrop-filter: blur(14px) saturate(1.35); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 6px 14px rgba(255, 255, 255, 0.04), inset 0 -1px 0 rgba(255, 255, 255, 0.1); transform: translate3d(var(--plan-x), var(--plan-y), 0); opacity: var(--plan-opacity); visibility: hidden; pointer-events: none; will-change: transform, opacity; } .plan-frame.is-active { visibility: visible; } .plan-frame__img { display: block; width: 100%; height: 100%; border-radius: 20px; object-fit: cover; object-position: center top; background: #031416; outline: 1px solid rgba(255, 255, 255, 0.1); outline-offset: -1px; user-select: none; pointer-events: none; } @keyframes extract-shimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } } .upload-morph__docs { position: sticky; top: var(--site-header-h); height: calc(100svh - var(--site-header-h)); /* Pull up to overlap the sticky copy/slot viewport */ margin-top: calc(-1 * (100svh - var(--site-header-h))); /* Under dropbox frame (z:5); above sticky copy (z:3) */ z-index: 4; pointer-events: none; /* Parked docs sit at ±vw offsets — clip so they can't widen the page */ overflow: hidden; } .upload-doc { --fly: 0; --doc-paper: #e8e8e8; --doc-ink: rgba(4, 22, 28, 0.88); --doc-mute: rgba(4, 22, 28, 0.5); --doc-rule: color-mix(in srgb, var(--doc-accent) 28%, rgba(4, 22, 28, 0.12)); --doc-tint: rgba(101, 152, 255, 0.42); --doc-accent: #6598ff; position: absolute; left: 50%; top: 50%; width: 96px; height: 122px; margin: -61px 0 0 -48px; padding: 10px 10px 9px; border-radius: 11px; background: linear-gradient(160deg, var(--doc-tint) 0%, color-mix(in srgb, var(--doc-tint) 45%, transparent) 42%, transparent 72%), var(--doc-paper); border: 3px solid var(--doc-accent); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 10px 24px rgba(0, 0, 0, 0.38), 0 2px 6px rgba(0, 0, 0, 0.22); display: flex; flex-direction: column; align-items: stretch; gap: 5px; transform: translate( calc(var(--ox) * (1 - var(--fly))), calc(var(--oy) * (1 - var(--fly))) ) rotate(calc(var(--rot) * (1 - var(--fly)))) scale(calc(0.9 + var(--fly) * 0.1)); /* Full opacity while parked; fade only once mostly under the dropbox */ opacity: calc( var(--docs-visible, 0) * (1 - clamp((var(--fly) - 0.72) / 0.28, 0, 1)) ); will-change: transform, opacity; color: var(--doc-ink); } .upload-doc__face { position: relative; flex: 1; display: flex; flex-direction: column; gap: 5px; padding-top: 14px; min-height: 0; } .upload-doc__mark { position: absolute; top: 0; right: 0; width: 18px; height: 10px; border-radius: 2px; background: var(--doc-accent); opacity: 0.72; } .upload-doc__bar { display: block; height: 4px; width: 72%; border-radius: 2px; background: color-mix(in srgb, var(--doc-accent) 55%, rgba(4, 22, 28, 0.35)); opacity: 0.85; } .upload-doc__rule { display: block; height: 2px; width: 100%; border-radius: 1px; background: var(--doc-rule); } .upload-doc__rule--short { width: 58%; } .upload-doc__name { font-size: 13px; font-weight: 600; letter-spacing: -0.015em; color: var(--doc-ink); line-height: 1.15; text-align: center; } .upload-doc small { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--doc-mute); text-align: center; line-height: 1; } /* Soft tint + unique mark per source */ .upload-doc--1 { --doc-tint: rgba(101, 152, 255, 0.5); --doc-accent: #6598ff; } .upload-doc--1 .upload-doc__mark { /* barcode stub */ width: 20px; height: 11px; border-radius: 1px; background: repeating-linear-gradient( 90deg, var(--doc-accent) 0 1.5px, transparent 1.5px 3px ); opacity: 0.8; } .upload-doc--2 { --doc-tint: rgba(156, 160, 249, 0.52); --doc-accent: #9ca0f9; } .upload-doc--2 .upload-doc__mark { /* export chevron */ width: 12px; height: 12px; border-radius: 0; background: transparent; border-top: 2px solid var(--doc-accent); border-right: 2px solid var(--doc-accent); opacity: 0.85; transform: rotate(45deg) translate(-1px, 2px); } .upload-doc--3 { --doc-tint: rgba(92, 184, 138, 0.48); --doc-accent: #5cb88a; } .upload-doc--3 .upload-doc__mark { /* photo corner brackets */ width: 14px; height: 14px; border-radius: 0; background: transparent; border: 1.5px solid var(--doc-accent); border-right: none; border-bottom: none; opacity: 0.8; } .upload-doc--3 .upload-doc__mark::after { content: ""; position: absolute; right: -8px; bottom: -8px; width: 14px; height: 14px; border: 1.5px solid var(--doc-accent); border-left: none; border-top: none; } .upload-doc--4 { --doc-tint: rgba(230, 160, 160, 0.5); --doc-accent: #e6a0a0; } .upload-doc--4 .upload-doc__mark { /* stamp circle */ width: 14px; height: 14px; border-radius: 50%; background: transparent; border: 1.5px solid var(--doc-accent); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--doc-accent) 35%, transparent); opacity: 0.85; } .upload-doc--5 { --doc-tint: rgba(132, 167, 253, 0.5); --doc-accent: #84a7fd; } .upload-doc--5 .upload-doc__mark { /* hospital cross */ width: 12px; height: 12px; border-radius: 1px; background: linear-gradient(var(--doc-accent), var(--doc-accent)) center / 4px 100% no-repeat, linear-gradient(var(--doc-accent), var(--doc-accent)) center / 100% 4px no-repeat; opacity: 0.8; } .upload-doc--6 { --doc-tint: rgba(90, 120, 140, 0.32); --doc-accent: #5a7380; } .upload-doc--6 .upload-doc__mark { /* pulse / waveform */ width: 22px; height: 10px; border-radius: 0; background: transparent; opacity: 0.9; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10' fill='none'%3E%3Cpath d='M0 5h4l2-3.5 3 7L12 2l3 5h7' stroke='%235a7380' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } /* Hero handoff — only the frame is replaced by the fixed twin; chips/trust keep scrolling */ .hero.is-handoff .hero__frame { opacity: 0; } .hero .hero__frame { transition: none; } /* Stacked readable story until theater layout is enabled. Also covers prefers-reduced-motion (head script omits html.hemo-motion). */ .upload-morph:not(.is-enhanced) { .upload-morph__track { height: auto; } .upload-morph__sticky { position: relative; top: auto; height: auto; padding: 64px 24px; pointer-events: auto; } .upload-morph__copy { opacity: 1; transform: none; filter: none; min-height: 0; } .upload-morph__copy-layer, .upload-morph__snapshot-copy, .upload-morph__plan-copy { pointer-events: auto; } .upload-morph__stage { width: min(520px, 100%); height: auto; margin: 0 auto; opacity: 1; } .upload-morph__snapshot { position: relative; inset: auto; opacity: 1; transform: none; filter: none; display: grid; width: min(1120px, 100%); margin: clamp(96px, 14vh, 160px) auto 0; padding: 0; } .upload-morph__plan { position: relative; inset: auto; opacity: 1; transform: none; display: grid; width: min(1120px, 100%); margin: clamp(96px, 14vh, 160px) auto 0; padding: 0; } .upload-morph__slot { display: none; } /* Empty until JS parks frames (reduced-motion); hide hollow placeholders for no-JS */ .upload-morph__snap-slot:empty, .upload-morph__plan-slot:empty { display: none; } .upload-morph__snap-slot { visibility: visible; width: min(var(--flow-art-w), 100%); aspect-ratio: 2328 / 1962; justify-self: center; } .upload-morph__plan-slot { visibility: visible; width: min( var(--flow-art-w), 100%, calc((100svh - var(--site-header-h) - 7rem) * 1537 / 1690) ); aspect-ratio: 1537 / 1690; justify-self: center; } .upload-morph__frame { position: relative; top: auto; left: auto; transform: none; opacity: 1; visibility: visible; width: var(--flow-drop); height: var(--flow-drop); margin: 0 auto 32px; --morph-r: 24px; --morph-pad: 0px; --morph-drop: 0; --morph-extract: 1; --morph-glass: 1; --morph-border: solid; --morph-border-c: rgba(255, 255, 255, 0.2); --morph-bg: rgba(3, 18, 22, 0.72); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .upload-morph__shot { display: none; } .upload-morph__blur { display: none; } .upload-morph__drop { display: none; } .upload-morph__extract { opacity: 1; transform: none; } .extract-card__eyebrow, .extract-file, .extract-card__pill { opacity: 1; transform: none; filter: none; transition: none; } .extract-file__name { color: #fff; -webkit-text-fill-color: #fff; background: none; animation: none; } .extract-file .extract-file__check { opacity: 1; transform: scale(1); filter: none; } .snapshot-frame { position: relative; top: auto; left: auto; transform: none; opacity: 1; visibility: visible; width: 100%; height: auto; aspect-ratio: 2328 / 1962; margin: 0 auto; } .plan-frame { position: relative; top: auto; left: auto; transform: none; opacity: 1; visibility: visible; width: 100%; height: auto; aspect-ratio: 1537 / 1690; margin: 0; } .upload-doc { display: none; } } /* Keep the tall track as soon as html.hemo-motion is set (inline in ), even if section .is-enhanced is a moment later — stops refresh scroll flicker. */ html.hemo-motion .upload-morph:not(.is-enhanced) .upload-morph__track { height: 780vh; } /* Mobile theater: pin→Import compressed, extract hold + slower snap handoff. 780 * (0.11 + (1.12 - 0.18)) ≈ 819 */ @media (max-width: 768px) { .upload-morph__track, html.hemo-motion .upload-morph:not(.is-enhanced) .upload-morph__track { height: 819vh; } } @media (prefers-reduced-motion: reduce) { .hero.is-handoff .hero__frame { opacity: 1; } } /* Optional drop → snapshot flow scene (after 4 steps) */ .flow-scene { margin-top: 40px; padding: 24px; border: 1px dashed var(--stroke-strong); border-radius: var(--radius); background: rgba(0, 0, 0, 0.2); } .flow-scene__chrome { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .flow-scene__label { margin: 0; } .flow-scene__title { font-size: clamp(22px, 2.5vw, 28px); font-weight: 600; letter-spacing: -0.02em; margin: 4px 0 10px; color: var(--text); } .flow-scene__desc { font-size: 14px; color: var(--text-muted); margin: 0 0 20px; max-width: 52em; line-height: 1.5; } .flow-scene__stage { position: relative; display: grid; grid-template-columns: 1.1fr auto 1fr; gap: 20px; align-items: center; min-height: 220px; padding: 28px 12px; } .flow-doc { position: absolute; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); padding: 10px 12px; border: 1px solid var(--stroke-strong); border-radius: 6px; background: var(--surface); width: 100px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); } .flow-doc--1 { top: 12%; left: 4%; transform: rotate(-8deg); } .flow-doc--2 { top: 38%; left: 14%; transform: rotate(4deg); opacity: 0.85; } .flow-doc--3 { bottom: 18%; left: 6%; transform: rotate(-3deg); opacity: 0.75; } .flow-doc--4 { top: 22%; left: 28%; transform: rotate(6deg); opacity: 0.7; } .flow-bucket { grid-column: 1; justify-self: end; width: 140px; height: 120px; border: 2px dashed var(--peri); border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(156, 160, 249, 0.06); position: relative; z-index: 1; } .flow-bucket__scan { width: 70%; height: 3px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--optimal), transparent); opacity: 0.8; } .flow-arrow { grid-column: 2; font-size: 28px; color: var(--text-faint); } .flow-snapshot { grid-column: 3; border: 1px solid var(--stroke-strong); border-radius: var(--radius); background: var(--surface); padding: 18px; text-align: left; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); } .flow-snapshot__title { font-size: 15px; font-weight: 600; margin: 4px 0 14px; } .flow-snapshot__hint { font-size: 11px; font-family: var(--font-mono); color: var(--text-faint); margin: 12px 0 0; } /* ——— Steps ——— */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .step { background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--radius-lg); padding: 24px; transition: background 0.15s ease, transform 0.15s ease; } .step:hover { background: var(--surface-hover); transform: translateY(-2px); } .step__num { margin-bottom: 12px; } .step__icon { width: 40px; height: 40px; border-radius: 10px; border: 1.5px dashed var(--wire); display: grid; place-items: center; margin-bottom: 16px; font-size: 18px; color: var(--optimal); } .step h3 { font-size: 18px; margin: 0 0 8px; font-weight: 600; } .step p { font-size: 14px; color: var(--text-muted); margin: 0; line-height: 1.5; } /* ——— Split sections ——— */ .split { display: grid; /* Features page: ~40% copy / ~60% media */ grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 48px; align-items: center; } /* When the shot leads, keep media at 60% */ .split:has(> .one-home-shot:first-child), .split:has(> .wire:first-child), .split:has(> .split__media:first-child) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .split .section__title { font-size: 36px; } .split .section__lead { font-size: 16px; } .split--one-home { align-items: start; gap: clamp(36px, 4vw, 64px); } .split--one-home .section__title { margin-bottom: 12px; } .split--one-home .section__lead { margin-bottom: 8px; } .split__media { display: flex; flex-direction: column; gap: 24px; min-width: 0; } .split__media .vs-table { margin-top: 0; } .one-home-shot { margin: 0; padding: 6px; border-radius: 24px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(14px) saturate(1.35); -webkit-backdrop-filter: blur(14px) saturate(1.35); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 6px 14px rgba(255, 255, 255, 0.04), inset 0 -1px 0 rgba(255, 255, 255, 0.1); overflow: hidden; } .one-home-shot__img { display: block; width: 100%; height: auto; border-radius: 20px; background: #031416; outline: 1px solid rgba(255, 255, 255, 0.1); outline-offset: -1px; } /* View toggle — segmented control (compact / medium / wide) */ .view-toggle-row { display: flex; justify-content: center; } .view-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 8px; background: #03242b; border: 1px solid rgba(52, 123, 118, 0.69); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } .view-toggle__btn { display: flex; align-items: center; justify-content: center; width: 48px; height: 32px; padding: 4px 12px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #53939a; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .view-toggle__btn:hover { color: #95e9e2; } .view-toggle__btn:focus-visible { outline: 2px solid #95e9e2; outline-offset: 2px; } .view-toggle__btn.is-active { background: linear-gradient(180deg, #95e9e2, #77d3cb); border-color: rgba(52, 123, 118, 0.69); color: #000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); } .view-toggle__btn.is-active:hover { color: #000; } .view-toggle__icon { width: 16px; height: 13px; flex-shrink: 0; } /* One home — floating tests list, fixed section height */ .section--one-home { position: relative; height: 880px; max-height: 92svh; padding-top: 0; padding-bottom: 0; overflow: hidden; display: flex; align-items: stretch; } /* Wide flat bottom fade — softens the list; sits under the copy */ .section--one-home::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; z-index: 2; pointer-events: none; background: linear-gradient( to top, var(--bg) 0%, color-mix(in srgb, var(--bg) 85%, transparent) 35%, color-mix(in srgb, var(--bg) 35%, transparent) 70%, transparent 100% ); } .one-home { position: relative; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(36px, 4vw, 64px); align-items: center; height: 100%; box-sizing: border-box; } .one-home__copy { position: relative; z-index: 3; /* Above section ::after fade */ min-width: 0; } .one-home__copy .section__title { margin-bottom: 12px; } .one-home__copy .section__lead { margin-bottom: 8px; } .one-home__media { position: relative; z-index: 1; /* Under the fade so the list still softens out */ height: 100%; min-height: 0; min-width: 0; padding: 28px 0; box-sizing: border-box; display: flex; align-items: stretch; justify-content: flex-end; } .one-home__img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center right; background: transparent; border: 0; border-radius: 0; box-shadow: none; outline: none; } .split--reverse > :first-child { order: 2; } .bullet-list { list-style: none; padding: 0; margin: 24px 0 0; } .bullet-list li { position: relative; padding: 10px 0 10px 28px; color: var(--text-muted); font-size: 15px; border-bottom: 1px solid rgba(3, 36, 43, 0.5); } .bullet-list li::before { content: ""; position: absolute; left: 0; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--optimal); } .bullet-list li strong { color: var(--text); font-weight: 500; } .bullet-list--stack li { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 12px; padding-bottom: 12px; border-bottom: 0; } .bullet-list--stack li::before { top: 1.05em; } .bullet-list--stack li strong { display: block; font-size: 15px; line-height: 1.35; } .bullet-list--stack li span { display: block; font-size: 15px; line-height: 1.45; color: var(--text-muted); } /* ——— Comparison mini table ——— */ .vs-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 28px; } .vs-table th, .vs-table td { padding: 12px 16px; text-align: left; border: 1px solid var(--stroke); } .vs-table th { background: var(--surface); font-weight: 600; font-size: 13px; } .vs-table td { color: var(--text-muted); } .vs-table .col-hemo { background: rgba(91, 159, 212, 0.08); color: var(--text); } .vs-table .check { color: var(--normal); } /* ——— Status legend ——— */ .status-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 20px 0; font-size: 13px; color: var(--text-muted); } .status-legend span { display: inline-flex; align-items: center; gap: 8px; } .status-dot { width: 10px; height: 10px; border-radius: 50%; } .status-dot--optimal { background: var(--optimal); } .status-dot--normal { background: var(--normal); } .status-dot--warn { background: var(--warn); } /* App-style status pill (inline in copy) */ .status-tag { display: inline-block; font-family: var(--font); font-size: 0.92em; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; padding: 0.18em 0.55em; border-radius: 8px; vertical-align: baseline; white-space: nowrap; } .status-tag--optimal { color: #6498ff; background: rgba(100, 152, 255, 0.1); } /* ——— Feature grid ——— */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 36px; } .feature-card { background: transparent; border: none; border-radius: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .feature-card h3 { font-size: 18px; margin: 0 0 6px; font-weight: 600; } .feature-card p { font-size: 15px; color: var(--text-muted); margin: 0; line-height: 1.5; } .feature-card > div:not(.feature-card__media) { padding-inline: 10px; } .feature-card .wire { min-height: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-md); } .feature-card__media { position: relative; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; background: var(--bg); border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 0 0 1px var(--edge-hair); } .feature-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ——— Feature bento ——— 4-col grid @ 1200px, 32px gap 1x1 ≈ 282×396 · 2x1 ≈ 588×396 · 4x1 ≈ 1200×594 */ .wrap--bento { width: min(100% - 48px, 1200px); } .section--feature-bento { padding: 128px 0 96px; } .section--feature-bento .section__title { max-width: 18ch; } .section--feature-bento .section__lead { max-width: 52ch; margin-bottom: 20px; } .section--feature-bento__cta { margin-bottom: 40px; } .feature-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } .bento-card { display: flex; flex-direction: column; overflow: hidden; height: 396px; border-radius: 24px; background: transparent; border: 1px solid rgba(245, 250, 250, 0.06); box-shadow: inset 0 1px 0 rgba(245, 250, 250, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.22); } .bento-card--1x1 { grid-column: span 1; } .bento-card--2x1 { grid-column: span 2; /* Height follows copy + aspect-ratio media (scales at tablet) */ height: auto; } .bento-card--4x1 { grid-column: span 4; /* Eagle Search 4×1 right: 1200×594, media 768×546 */ height: 594px; flex-direction: row; align-items: flex-start; padding: 48px 0 0 48px; gap: 32px; } .bento-card__content { padding: 40px 40px 0; flex-shrink: 0; } .bento-card--1x1 .bento-card__content { /* Eagle 1×1: copy on top, media fills below */ order: 0; padding: 40px 40px 0; flex-shrink: 0; } .bento-card--1x1 .bento-card__media { order: 1; flex: 1 1 0; } .bento-card--2x1 .bento-card__content { /* Copy band on top; room for original feature blurbs */ padding: 40px 40px 16px; height: auto; min-height: 148px; box-sizing: border-box; } .bento-card--4x1 .bento-card__content { flex: 0 0 336px; padding: 0; display: flex; flex-direction: column; justify-content: center; align-self: stretch; max-width: 336px; height: auto; } .bento-card__content h3 { margin: 0 0 8px; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; } .bento-card__content p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--text-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .bento-card--1x1 .bento-card__content p { -webkit-line-clamp: 2; } .bento-card--2x1 .bento-card__content p { -webkit-line-clamp: 3; } .bento-card__media { position: relative; flex: 1 1 auto; min-height: 0; margin-top: 0; overflow: hidden; } /* Soft bottom fade — same treatment as One Home list */ .bento-card__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; z-index: 1; pointer-events: none; background: linear-gradient( to top, var(--bg) 0%, color-mix(in srgb, var(--bg) 85%, transparent) 35%, color-mix(in srgb, var(--bg) 35%, transparent) 70%, transparent 100% ); } .bento-card--2x1 .bento-card__media { /* Plugin media aspect 588×324 (= 1176×648) — scales with card width */ width: 100%; height: auto; aspect-ratio: 588 / 324; flex: none; } .bento-card--4x1 .bento-card__media { /* Exact Eagle XL slot — matches trends 1920×1368 @2.5× */ margin: 0 0 0 auto; flex: none; width: 768px; height: 546px; border-radius: 16px 0 0 0; align-self: flex-end; } .bento-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; } .bento-card--2x1 .bento-card__media img { /* Exact aspect match with exports — no crop needed */ object-fit: cover; object-position: 50% 0%; } .bento-card--4x1 .bento-card__media img { object-fit: cover; object-position: 50% 0%; } .extras-grid { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 40px; } .extras-grid li { margin: 0; padding: 0; min-width: 0; } .extras-grid h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); } .extras-grid p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-muted); text-wrap: pretty; } /* ——— Category chips ——— */ .chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0; } .chip { min-height: 40px; display: inline-flex; align-items: center; font-size: 13px; padding: 8px 15px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(245, 250, 250, 0.72); background: var(--bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; } .chip--active, .chip:hover, .chip:focus-visible { text-decoration: none; color: var(--text); border-color: rgba(255, 255, 255, 0.18); background: var(--surface-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 24px rgba(0, 0, 0, 0.28); } .chip:hover, .chip:focus-visible { transform: translateY(-1px); } .chip:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.35); outline-offset: 3px; } .chip:active { transform: translateY(0) scale(0.96); } /* ——— Marker names ——— */ .marker-names { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 28px; } .marker-names span { font-family: var(--font-mono); font-size: 12px; padding: 6px 10px; border-radius: var(--radius-sm); background: rgba(91, 159, 212, 0.1); color: var(--optimal); border: 1px solid rgba(91, 159, 212, 0.2); } /* ——— Privacy band ——— */ .privacy-band { position: relative; isolation: isolate; padding: 96px 0; background: var(--bg); border-top: 1px solid rgba(3, 36, 43, 0.7); box-shadow: inset 0 2px 0 var(--edge-hair); overflow: clip; } .privacy-band__wash { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient( ellipse 75% 70% at 0% 100%, rgba(63, 136, 224, 0.28), transparent 62% ); } .privacy-band__wash::before { content: ""; position: absolute; left: -12%; bottom: -35%; width: min(70%, 560px); height: min(120%, 480px); background: radial-gradient(circle, rgba(63, 136, 224, 0.35), transparent 68%); filter: blur(48px); pointer-events: none; } .privacy-band__wash::after { display: none; } .privacy-band__inner { display: grid; grid-template-columns: minmax(160px, 0.42fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 40px); align-items: center; } .privacy-band__lock { display: block; width: min(100%, 300px); height: auto; justify-self: start; margin-inline: -4px 0; pointer-events: none; user-select: none; } .privacy-band__copy { min-width: 0; } .privacy-band__title { font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 14px; text-wrap: balance; max-width: 14em; } .privacy-band__lead { font-size: 18px; line-height: 1.6; margin: 0 0 28px; color: var(--text-muted); max-width: 40em; text-wrap: pretty; } .privacy-band__pillars { list-style: none; margin: 0 0 36px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 28px; } .privacy-band__pillars li { padding: 2px 0 2px 16px; border-left: 1.5px solid rgba(245, 250, 250, 0.55); font-size: 15px; font-weight: 600; line-height: 1.45; letter-spacing: -0.01em; color: var(--text); } .privacy-band__cta { display: inline-flex; } /* legacy strip kept for other pages if referenced */ .privacy-strip { background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--radius-lg); padding: 40px 48px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; } .privacy-strip h2 { font-size: clamp(24px, 3vw, 32px); margin: 0 0 12px; letter-spacing: -0.02em; } .privacy-strip p { margin: 0; color: var(--text-muted); max-width: 52em; } /* ——— Credibility ——— */ .cred-carousel { --cred-gap: 18px; --cred-visible: 3; position: relative; isolation: isolate; } /* Soft color so glass frost has something to catch */ .cred-carousel::before, .cred-carousel::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(48px); } .cred-carousel::before { width: min(52%, 420px); height: 220px; top: -20px; left: -4%; background: rgba(156, 160, 249, 0.22); } .cred-carousel::after { width: min(48%, 380px); height: 200px; top: 40%; right: -2%; background: rgba(101, 152, 255, 0.18); } .cred-strip { position: relative; z-index: 1; display: flex; align-items: stretch; gap: var(--cred-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding: 6px 2px 10px; margin: -6px -2px -10px; outline: none; } @media (prefers-reduced-motion: reduce) { .cred-strip { scroll-behavior: auto; } } .cred-strip::-webkit-scrollbar { display: none; } .cred-card { position: relative; z-index: 1; flex: 0 0 calc((100% - var(--cred-gap) * (var(--cred-visible) - 1)) / var(--cred-visible)); scroll-snap-align: start; display: flex; flex-direction: column; min-height: 320px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--radius-lg); padding: 28px; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 8px 18px rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(255, 255, 255, 0.08); overflow: hidden; transition-property: transform, box-shadow, border-color, background; transition-duration: 280ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); } .cred-card:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 28px 56px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 8px 18px rgba(255, 255, 255, 0.07), inset 0 -1px 0 rgba(255, 255, 255, 0.1); } .cred-card p { position: relative; z-index: 1; margin: 0; flex: 1; min-height: 0; font-size: 16px; font-weight: 500; font-style: normal; line-height: 1.55; letter-spacing: -0.01em; color: rgba(245, 250, 250, 0.94); text-wrap: pretty; } .cred-card__person { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; flex-shrink: 0; margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .cred-card__person:has(.cred-card__bio) { align-items: flex-start; } .cred-card__person:has(.cred-card__bio) .cred-card__avatar { margin-top: 2px; } .cred-card__avatar { --avatar: var(--peri); flex-shrink: 0; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-family: var(--font); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; line-height: 1; color: rgba(245, 250, 250, 0.95); background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.34), transparent 52%), linear-gradient(145deg, color-mix(in srgb, var(--avatar) 78%, white), color-mix(in srgb, var(--avatar) 72%, #01161b)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 0 1px color-mix(in srgb, var(--avatar) 35%, transparent), 0 6px 14px color-mix(in srgb, var(--avatar) 28%, transparent); user-select: none; } .cred-card cite { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-style: normal; font-size: 14px; line-height: 1.3; color: var(--text-muted); } .cred-card__name { font-weight: 600; color: rgba(245, 250, 250, 0.92); } .cred-card__bio { font-size: 12px; line-height: 1.35; color: var(--text-faint); text-wrap: pretty; } .cred-card__bio a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(245, 250, 250, 0.4); transition-property: text-decoration-color; transition-duration: 200ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); } .cred-card__bio a:hover { text-decoration-color: rgba(245, 250, 250, 0.75); } .cred-carousel__bar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; } .cred-carousel__btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; color: var(--text); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28); cursor: pointer; transition-property: background, border-color, opacity, transform; transition-duration: 200ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); } .cred-carousel__btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.32); } .cred-carousel__btn:active:not(:disabled) { transform: scale(0.96); } .cred-carousel__btn:disabled { opacity: 0.35; cursor: default; } .cred-carousel__dots { display: flex; align-items: center; gap: 8px; min-height: 12px; } .cred-carousel__dot { width: 7px; height: 7px; padding: 0; border: none; border-radius: 999px; background: rgba(245, 250, 250, 0.28); cursor: pointer; transition-property: background, transform, width; transition-duration: 220ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); } .cred-carousel__dot[aria-selected="true"] { width: 18px; background: rgba(156, 160, 249, 0.95); } .cred-carousel__dot:hover { background: rgba(245, 250, 250, 0.5); } .cred-carousel__dot[aria-selected="true"]:hover { background: rgba(156, 160, 249, 0.95); } @media (max-width: 1024px) { .cred-carousel { --cred-visible: 2; } } @media (max-width: 768px) { .cred-carousel { --cred-visible: 1; } .cred-card { min-height: 0; } } /* ——— Compare / keep your history ——— */ .compare-band__inner { display: flex; flex-direction: column; gap: 0; } .compare-band__copy .section__lead { margin-bottom: 0; max-width: 40em; } .compare-band__actions { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 28px 40px; margin-top: 28px; } .compare-band__actions .btn { flex-shrink: 0; } .compare-band__sources { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 0 22px; min-width: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; } .compare-band__sources li { position: relative; flex-shrink: 0; } .compare-band__sources li:not(:last-child)::after { content: ""; position: absolute; right: -13px; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: rgba(132, 167, 253, 0.35); transform: translateY(-50%); } @media (max-width: 900px) { .compare-band__actions { flex-wrap: wrap; align-items: flex-start; gap: 20px; } .compare-band__sources { flex-wrap: wrap; justify-content: flex-start; white-space: normal; row-gap: 10px; column-gap: 22px; } .compare-band__sources li:not(:last-child)::after { right: -13px; } } /* ——— FAQ ——— */ .faq { max-width: 780px; } /* Homepage FAQ — center the column in the wrap */ #faq .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; } #faq .faq { width: 100%; margin-inline: auto; text-align: left; } #faq .btn-row { justify-content: center; } .faq-item { border-bottom: 1px solid var(--stroke); overflow: clip; } .faq-item summary { list-style: none; cursor: pointer; padding: 20px 0; font-size: 17px; font-weight: 500; display: flex; justify-content: space-between; align-items: center; gap: 16px; /* Stop open/close clicks from selecting the answer like a double-click */ user-select: none; -webkit-user-select: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-family: var(--font-mono); color: var(--text-faint); font-size: 20px; flex-shrink: 0; transition: color 120ms ease, transform 140ms cubic-bezier(0.2, 0, 0, 1); } .faq-item.is-expanded summary::after { color: var(--peri); transform: rotate(45deg); } .faq-item .faq-a { padding: 0 0 20px; color: var(--text-muted); font-size: 15px; line-height: 1.6; margin: 0; transform-origin: top; } @media (prefers-reduced-motion: reduce) { .chip, .faq-item summary::after { transition-duration: 0.01ms; } } /* ——— FAQ page (open document layout) ——— */ .page-hero--faq { padding: clamp(64px, 10vw, 112px) 0 clamp(36px, 6vw, 64px); } .page-hero--faq .wrap { max-width: 760px; } .page-hero--faq h1 { margin: 0; text-wrap: balance; } .faq-page { border-top: none; box-shadow: none; padding-top: clamp(28px, 5vw, 56px); } .faq-page__inner { max-width: 760px; margin-inline: auto; } .faq-page .faq-group { max-width: none; scroll-margin-top: calc(var(--site-header-h) + 24px); } .faq-page .faq-group + .faq-group { margin-top: clamp(48px, 7vw, 72px); } .faq-page .faq-group__title { line-height: 1.4; margin: 0 0 18px; } .faq-page .faq { max-width: none; display: grid; gap: 28px; } .faq-page .faq-item { border-bottom: 0; margin: 0; overflow: visible; } .faq-page .faq-item h3 { font-size: 28px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 10px; text-wrap: pretty; } .faq-page .faq-item .faq-a { padding: 0; font-size: 16px; line-height: 1.6; text-wrap: pretty; transform: none; } /* ——— Roadmap ——— */ .roadmap__intro { margin-bottom: clamp(36px, 5vw, 56px); } .roadmap__intro .section__title { margin-bottom: 0; max-width: 18ch; text-wrap: balance; } .roadmap__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); } .roadmap__item { position: relative; display: flex; flex-direction: column; gap: 18px; /* Space text away from the vertical rules on both sides */ padding: 28px 28px 8px; border-right: 1px solid rgba(255, 255, 255, 0.06); } .roadmap__item:first-child { padding-left: 0; } .roadmap__item:last-child { border-right: none; padding-right: 0; } .roadmap__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .roadmap__body strong { font-size: clamp(15px, 1.35vw, 17px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; text-wrap: balance; } .roadmap__body span { font-size: 13px; line-height: 1.45; color: var(--text-faint); text-wrap: pretty; } @media (max-width: 1024px) { .roadmap__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .roadmap__item:nth-child(3) { border-right: none; padding-right: 0; } .roadmap__item:nth-child(4) { padding-left: 0; } .roadmap__item:nth-child(n + 4) { border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 28px; } } @media (max-width: 640px) { .roadmap__list { grid-template-columns: 1fr; border-top: none; } .roadmap__item { flex-direction: row; align-items: baseline; gap: 16px; padding: 18px 0; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .roadmap__item:first-child { border-top: 1px solid rgba(255, 255, 255, 0.08); } .roadmap__item:last-child { border-bottom: none; } .roadmap__item:nth-child(n + 4) { border-top: none; } .roadmap__index { flex-shrink: 0; width: 2ch; } } /* ——— CTA band (inner pages) ——— */ .cta-band { padding: 80px 0; text-align: center; border-top: 1px solid var(--stroke); box-shadow: inset 0 2px 0 var(--edge-hair); background: radial-gradient(ellipse 50% 80% at 50% 100%, rgba(42, 143, 160, 0.15), transparent); } .cta-band h2 { font-size: clamp(28px, 4vw, 40px); margin: 0 0 12px; letter-spacing: -0.02em; } .cta-band p { color: var(--text-muted); margin: 0 0 28px; max-width: 36em; margin-inline: auto; } /* ——— Closing composition (homepage) ——— */ .closing { position: relative; overflow-x: clip; background: var(--bg); } .closing__stage { position: relative; padding: clamp(48px, 8vh, 88px) 0 0; } .closing__rail { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.2fr); grid-template-rows: auto auto auto; column-gap: clamp(20px, 3.5vw, 48px); row-gap: 0; align-items: end; position: relative; z-index: 1; } /* Copy sits with the visible ring; bias slightly high so title leads the mass */ .closing__copy { grid-column: 1; grid-row: 1; align-self: center; justify-self: start; z-index: 3; max-width: min(36rem, 100%); padding-bottom: 8px; transform: translateY(-6%); } .closing__title { font-size: clamp(40px, 4.6vw, 56px); line-height: 1.08; letter-spacing: -0.035em; margin: 0 0 16px; font-weight: 600; max-width: none; } .closing__title-keep { white-space: nowrap; } .closing__lede { margin: 0 0 20px; color: var(--text-muted); font-size: 16px; line-height: 1.5; max-width: 28em; } .closing__visual-top { grid-column: 2; grid-row: 1; justify-self: end; width: min(124%, 760px); margin-right: clamp(-64px, -7vw, -20px); position: relative; z-index: 2; aspect-ratio: 1 / 0.54; overflow: hidden; /* Soften the floor cut — avoid a hard bitmap edge */ -webkit-mask-image: linear-gradient(#000 0%, #000 calc(100% - 4px), transparent 100%); mask-image: linear-gradient(#000 0%, #000 calc(100% - 4px), transparent 100%); animation: closing-float 14s ease-in-out infinite; } .closing__orb { position: absolute; left: 0; right: 0; top: 0; width: 100%; aspect-ratio: 1; } .closing__ring { width: 100%; height: 100%; animation: closing-spin 75s linear infinite; } .closing__ring picture, .closing__reflect picture { display: block; width: 100%; } .closing__ring-img, .closing__reflect-img { width: 100%; height: auto; display: block; user-select: none; -webkit-user-drag: none; } /* WebGL shimmer overlay — sits on the glass */ .closing__shader { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: soft-light; opacity: 0.85; border-radius: 50%; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 38%, transparent 68%); mask-image: radial-gradient(circle at 50% 50%, #000 38%, transparent 68%); } /* Thin shelf stroke — graphic column only */ .closing__shelf { grid-column: 2; grid-row: 2; justify-self: stretch; z-index: 4; height: 1px; width: min(86%, 620px); margin: 0 auto; background: linear-gradient( 90deg, transparent 0%, rgba(245, 250, 250, 0.05) 18%, rgba(168, 200, 255, 0.16) 50%, rgba(245, 250, 250, 0.05) 82%, transparent 100% ); } .closing__signup { position: relative; width: min(100%, 28em); margin-top: 8px; padding: 22px; border-radius: 18px; background: rgba(4, 18, 23, 0.72); border: 1px solid rgba(245, 250, 250, 0.08); box-shadow: inset 0 1px 0 rgba(245, 250, 250, 0.04); overflow: visible; } .closing__badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; font-family: var(--font-mono); font-size: var(--text-eyebrow); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); } .closing__badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cta); box-shadow: 0 0 10px rgba(126, 172, 255, 0.55); flex-shrink: 0; } .closing__form { display: flex; flex-direction: column; gap: 12px; } .closing__form-meta { min-height: 1.45em; } .closing__email { width: 100%; box-sizing: border-box; background: rgba(0, 13, 15, 0.55); border: 1px solid rgba(245, 250, 250, 0.12); border-radius: 12px; padding: 14px 16px; color: var(--text); font-family: inherit; font-size: 16px; } .closing__email::placeholder { color: var(--text-faint); } .closing__email:focus { outline: none; border-color: rgba(126, 172, 255, 0.5); box-shadow: 0 0 0 3px rgba(126, 172, 255, 0.14); } .closing__email[aria-invalid="true"] { border-color: var(--warn); } .closing__cta { width: 100%; justify-content: center; font-size: 16px; padding: 14px 18px; border-radius: 12px; } .closing__form-caption { margin: 0; color: var(--text-faint); font-size: 13px; line-height: 1.45; } /* Error replaces the caption in the same slot */ .form-error.closing__form-error { display: none; margin: 0; font-size: 13px; line-height: 1.45; color: var(--warn); } .form-error.closing__form-error.is-visible { display: block; } .closing__form-meta:has(.closing__form-error.is-visible) .closing__form-caption { display: none; } .closing__form[aria-busy="true"] .closing__cta { cursor: wait; opacity: 0.75; } .closing__success[hidden] { display: none !important; } .closing__success-title { margin: 0 0 8px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; } .closing__success-title:focus { outline: none; } .closing__success-sent { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.5; } .closing__success-sent strong { color: var(--text); font-weight: 600; } .closing__success-action { margin: 8px 0 0; color: var(--text-muted); font-size: 15px; line-height: 1.5; } .closing__visual-under { grid-column: 2; grid-row: 3; justify-self: end; width: min(124%, 760px); margin-right: clamp(-64px, -7vw, -20px); position: relative; z-index: 1; min-height: 0; margin-bottom: -20px; } /* Soft optimal-blue light from the submerged segment */ .closing__well { position: absolute; left: 24%; right: 24%; top: -4px; height: 56px; background: radial-gradient( ellipse 75% 60% at 50% 0%, rgba(91, 159, 212, 0.42), rgba(91, 159, 212, 0.12) 45%, transparent 72% ); filter: blur(14px); pointer-events: none; z-index: 0; opacity: 0.85; } .closing__reflect { position: relative; z-index: 1; width: 108%; margin: 0 0 0 -4%; aspect-ratio: 1 / 0.12; overflow: hidden; transform: scaleY(-1) scaleX(1.06); opacity: 0.26; filter: blur(14px) saturate(0.85); pointer-events: none; -webkit-mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.14) 40%, transparent 78% ); mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.14) 40%, transparent 78% ); } .closing__reflect-ring { width: 100%; aspect-ratio: 1; animation: closing-spin 75s linear infinite; } .closing.is-paused .closing__visual-top, .closing.is-paused .closing__ring, .closing.is-paused .closing__reflect-ring { animation-play-state: paused; } @keyframes closing-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes closing-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @media (prefers-reduced-motion: reduce) { .closing__visual-top, .closing__ring, .closing__reflect-ring { animation: none !important; } .closing__shader { display: none; } } @media (max-width: 900px) { .closing__stage { padding: 72px 0 0; } .closing__rail { /* minmax(0,1fr) keeps the oversized ring from widening the track */ grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "shelf" "under" "copy"; grid-template-rows: auto auto auto auto; justify-items: center; text-align: center; } .closing__visual-top { grid-area: top; width: min(118vw, 560px); max-width: none; margin-right: 0; margin-left: 0; justify-self: center; aspect-ratio: 1 / 0.56; } .closing__shelf { grid-area: shelf; width: min(92%, 480px); max-width: 100%; } .closing__visual-under { grid-area: under; width: min(118vw, 560px); max-width: none; margin-right: 0; justify-self: center; } .closing__copy { grid-area: copy; justify-self: center; width: min(100%, 36rem); max-width: 100%; text-align: center; padding-top: 20px; padding-bottom: 36px; transform: none; } .closing__signup { margin-inline: auto; width: min(100%, 28em); text-align: left; } .closing__footer { padding-top: 12px; } .closing__title-keep { white-space: normal; } .closing__lede { margin-inline: auto; } .closing__reflect { opacity: 0.28; filter: blur(12px); } } @media (max-width: 640px) { .closing__title { font-size: clamp(34px, 9vw, 42px); } .closing__signup { padding: 18px; } .closing__cta { font-size: 15px; padding: 13px 16px; } .closing__visual-top, .closing__visual-under { width: min(122vw, 480px); } .closing__shelf { width: min(94%, 420px); } } .closing__footer { padding: 8px 0 40px; font-size: 14px; position: relative; z-index: 2; } .closing__footer .footer-grid { margin-bottom: 40px; } .closing__footer .footer-bottom { border-top-color: rgba(3, 36, 43, 0.85); } /* ——— Footer ——— */ .site-footer { background: var(--nav-bg); border-top: 1px solid var(--stroke); box-shadow: inset 0 2px 0 var(--edge-hair); padding: 64px 0 40px; font-size: 14px; } .footer-grid { display: flex; flex-wrap: wrap; align-items: start; gap: 32px 56px; margin-bottom: 48px; } .footer-brand { flex: 0 1 22em; } .footer-col { flex: 0 0 auto; min-width: 7.5em; } .footer-brand p { color: var(--text-muted); margin: 12px 0 0; font-size: 13px; max-width: 22em; line-height: 1.5; } .footer-brand__updated { display: block; margin-top: 8px; color: var(--text-faint); font-size: 12px; } .footer-col h4 { font-size: var(--text-eyebrow); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); margin: 0 0 16px; font-weight: 500; font-family: var(--font-mono); } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col li { margin-bottom: 10px; } .footer-col a { color: var(--text-muted); text-decoration: none; } .footer-col a:hover { color: var(--text); } .footer-bottom { border-top: 1px solid var(--stroke); padding-top: 24px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; color: var(--text-faint); font-size: 12px; } .footer-disclaimer { max-width: 52em; line-height: 1.5; } /* ——— Page hero (inner pages) ——— */ .page-hero { position: relative; isolation: isolate; padding: 64px 0 48px; /* Match .section stack: outer stroke + dark inset hairline above it */ border-bottom: 1px solid rgba(3, 36, 43, 0.7); box-shadow: inset 0 -2px 0 var(--edge-hair); } /* Next section already has a top rule — don't double the hero divider */ .page-hero + .section { border-top: none; box-shadow: none; } /* Subtle status-light dot field (homepage hero grid, quieter). Side fades + a light bottom ease; full strength from the top. */ .page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; /* Blue → green wash (L→R diagonal), punched into a 16px dot lattice */ background: linear-gradient( 115deg, rgba(91, 159, 212, 0.7) 0%, rgba(92, 184, 138, 0.65) 100% ); -webkit-mask-image: radial-gradient(circle, #000 1px, transparent 1.15px), linear-gradient( to right, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.85) 18%, rgba(0, 0, 0, 0.85) 82%, rgba(0, 0, 0, 0.45) 100% ), linear-gradient( to bottom, #000 0%, #000 70%, rgba(0, 0, 0, 0.55) 100% ); mask-image: radial-gradient(circle, #000 1px, transparent 1.15px), linear-gradient( to right, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.85) 18%, rgba(0, 0, 0, 0.85) 82%, rgba(0, 0, 0, 0.45) 100% ), linear-gradient( to bottom, #000 0%, #000 70%, rgba(0, 0, 0, 0.55) 100% ); -webkit-mask-size: 16px 16px, 100% 100%, 100% 100%; mask-size: 16px 16px, 100% 100%, 100% 100%; -webkit-mask-repeat: repeat, no-repeat, no-repeat; mask-repeat: repeat, no-repeat, no-repeat; -webkit-mask-position: 0 0, 0 0, 0 0; mask-position: 0 0, 0 0, 0 0; -webkit-mask-composite: source-in, source-in; mask-composite: intersect, intersect; opacity: 0.2; } .page-hero h1 { font-size: clamp(36px, 5vw, 52px); letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 16px; } .page-hero .def { font-size: 18px; color: var(--text-muted); max-width: var(--prose); margin: 0 0 28px; line-height: 1.55; } .page-hero--bio { padding-bottom: 36px; } .page-hero--bio .def { max-width: 40rem; margin-bottom: 0; } .page-hero--bio .bio-controls { margin-top: 28px; } .page-hero--bio .bio-search { margin: 0; max-width: 32rem; } .page-hero--bio .bio-filters { margin-top: 28px; } .page-hero--bio .bio-filters[hidden] { display: none; } .page-hero--bio .bio-controls__eyebrow { margin: 0 0 12px; } .page-hero--bio .chips { margin: 0; } .section--bio-list { padding-top: 40px; } .meta-updated { font-family: var(--font-mono); font-size: var(--text-eyebrow); color: var(--text-faint); margin-top: 16px; } /* ——— Alternating feature rows ——— */ .alt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 64px 0; border-bottom: 1px solid rgba(3, 36, 43, 0.5); } .alt-row:nth-child(even) .alt-row__media { order: -1; } .alt-row h2 { font-size: clamp(22px, 2.5vw, 28px); margin: 0 0 12px; letter-spacing: -0.02em; } .alt-row .answer { color: var(--text-muted); margin: 0 0 16px; font-size: 16px; } /* ——— Comparison table (full) ——— */ .compare-table-wrap { overflow-x: auto; margin: 32px 0; border: 1px solid var(--stroke); border-radius: var(--radius-lg); } .compare-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; } .compare-table th, .compare-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--stroke); vertical-align: top; } .compare-table th { background: var(--surface); font-weight: 600; } .compare-table th.hemo, .compare-table td.hemo { background: rgba(91, 159, 212, 0.07); } .compare-table tr:last-child td { border-bottom: none; } .compare-table .row-label { color: var(--text-faint); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--font-mono); white-space: nowrap; } .choose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; } .choose-card { background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--radius-lg); padding: 28px; } .choose-card h3 { margin: 0 0 16px; font-size: 18px; } .choose-card ul { margin: 0; padding-left: 18px; color: var(--text-muted); font-size: 14px; } .choose-card li { margin-bottom: 8px; } .choose-card--hemo { border-color: rgba(91, 159, 212, 0.4); } /* ——— Biomarker list ——— */ .bio-search { position: relative; display: flex; gap: 12px; margin: 24px 0 32px; max-width: 480px; } .bio-search input { flex: 1; width: 100%; background: var(--surface); border: 1px solid var(--stroke-strong); border-radius: var(--radius-sm); padding: 12px 48px 12px 16px; color: var(--text); font-family: inherit; /* 16px+: prevents iOS Safari focus-zoom that sticks after the keyboard closes */ font-size: 16px; } .bio-search input::placeholder { color: var(--text-faint); } .bio-search input::-webkit-search-decoration, .bio-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .bio-search__clear { position: absolute; top: 50%; right: 8px; width: 28px; height: 28px; display: grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.06); color: var(--text-muted); font-size: 18px; line-height: 1; cursor: pointer; transform: translateY(-50%); transition: color 160ms cubic-bezier(0.2, 0, 0, 1), background-color 160ms cubic-bezier(0.2, 0, 0, 1), scale 120ms cubic-bezier(0.2, 0, 0, 1); } .bio-search__clear[hidden] { display: none; } .bio-search__clear:hover { color: var(--text); background: rgba(255, 255, 255, 0.12); } .bio-search__clear:active { scale: 0.96; } .bio-search__clear span { display: block; margin-top: -1px; } .bio-catalog-wire { min-height: 360px; margin-bottom: 48px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ——— Living biomarker grid ——— */ .bio-grid { position: relative; margin: 40px 0 0; border-radius: 0; background: transparent; outline: none; overflow: visible; isolation: auto; } .bio-grid::before { display: none; } .bio-grid--stage { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 48px; } .bio-grid--stage .bio-grid__canvas { width: 100%; } /* Tower split — copy left, silhouette right (home leftover styles; used on biomarkers hero) */ .bio-tower-split { display: grid; gap: 40px; align-items: center; justify-items: center; text-align: center; } .bio-tower-split__copy { max-width: 34rem; width: 100%; } .bio-tower-split__copy .section__lead { margin-bottom: 24px; margin-left: auto; margin-right: auto; } .bio-grid--tower { display: flex; flex-direction: column; align-items: center; gap: var(--bio-label-gap, 8px); margin: 0; width: 100%; max-width: 560px; justify-self: center; overflow: visible; } .bio-grid--tower .bio-grid__canvas { width: 100%; overflow: visible; } .bio-grid--tower .bio-grid__chrome { padding-left: 0; align-items: center; text-align: center; width: 100%; } @media (min-width: 900px) { .bio-tower-split { grid-template-columns: minmax(0, 0.8fr) minmax(360px, 1.1fr); gap: 40px 36px; align-items: center; justify-items: stretch; text-align: left; } .bio-tower-split__copy .section__lead { margin-left: 0; margin-right: 0; } .bio-grid--tower { max-width: none; justify-self: end; align-items: flex-start; } .bio-grid--tower .bio-grid__chrome { padding-left: var(--bio-edge, 32px); align-items: flex-start; text-align: left; width: auto; } } .bio-grid__chrome { position: static; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 0; pointer-events: none; min-height: 2.75em; } .bio-grid__hud-left, .bio-grid__hud-right { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .bio-grid__eyebrow, .bio-grid__count, .bio-grid__meta { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(245, 250, 250, 0.55); } .bio-grid__count { color: rgba(245, 250, 250, 0.38); font-variant-numeric: tabular-nums; } .bio-grid__name { font-size: clamp(15px, 1.6vw, 18px); font-weight: 500; letter-spacing: -0.01em; color: var(--text); line-height: 1.25; text-wrap: balance; opacity: 1; filter: blur(0); transform: translateY(0); transition-property: opacity, filter, transform; transition-duration: 120ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); } .bio-grid__meta { color: rgba(156, 160, 249, 0.85); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 1; filter: blur(0); transform: translateY(0); transition-property: opacity, filter, transform, color; transition-duration: 120ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); } .bio-grid__name.is-hud-out, .bio-grid__meta.is-hud-out { opacity: 0; filter: blur(4px); transform: translateY(4px); } .bio-grid__canvas { display: block; width: 100%; height: auto; vertical-align: top; position: relative; z-index: 0; /* Desktop: drag-scrub without scrolling the page; touch: pan-y so the page can scroll */ touch-action: none; outline: none; } @media (pointer: coarse) { .bio-grid__canvas { touch-action: pan-y; } } .bio-grid__canvas:focus-visible { box-shadow: inset 0 0 0 2px rgba(101, 152, 255, 0.55); } .bio-grid.is-error { min-height: 280px; display: grid; place-items: center; color: var(--text-muted); } /* Ring variant — split layout + centered HUD */ .bio-ring-split { position: relative; display: grid; gap: 40px; align-items: center; justify-items: center; text-align: center; } /* Blur veil lives inside the copy column so it can't bleed into the ring. One backdrop-filter layer, no opacity fade (that was the hitch). */ .bio-popover-veil { position: absolute; z-index: 1; left: 0; right: 0; top: 0; /* Stop short of the Browse CTA */ bottom: 4.75rem; pointer-events: none; opacity: 0; } .bio-ring-split.has-popover .bio-popover-veil { opacity: 1; } .bio-popover-veil__layer { position: absolute; inset: -20px; background: rgba(0, 13, 15, 0.22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); /* Soft radial falloff from under the card — no hard left cut through the title */ mask-image: radial-gradient( ellipse 115% 105% at 42% 38%, #000 0%, #000 28%, rgba(0, 0, 0, 0.7) 48%, rgba(0, 0, 0, 0.35) 66%, transparent 84% ); -webkit-mask-image: radial-gradient( ellipse 115% 105% at 42% 38%, #000 0%, #000 28%, rgba(0, 0, 0, 0.7) 48%, rgba(0, 0, 0, 0.35) 66%, transparent 84% ); } /* CTA stack: on mobile the popover anchors 12px above the Browse button */ .bio-ring-split__cta-stack { position: relative; } /* Marker detail popover — above Browse CTA (mobile) / mid-copy (desktop) */ .bio-popover { position: absolute; z-index: 6; left: 50%; top: auto; bottom: calc(100% + 12px); width: min(22rem, calc(100vw - 48px)); max-width: 100%; padding: 18px 44px 18px 18px; border-radius: 14px; background: #02161c; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 48px rgba(0, 0, 0, 0.45); text-align: left; opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(-50%, 8px, 0); transition: opacity 160ms cubic-bezier(0.2, 0, 0, 1), transform 160ms cubic-bezier(0.2, 0, 0, 1), visibility 160ms linear; } .bio-popover.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate3d(-50%, 0, 0); } .bio-popover__close { position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; display: grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--text-muted); font-size: 22px; line-height: 1; cursor: pointer; transition: color 160ms cubic-bezier(0.2, 0, 0, 1), background-color 160ms cubic-bezier(0.2, 0, 0, 1), scale 120ms cubic-bezier(0.2, 0, 0, 1); } .bio-popover__close:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); } .bio-popover__close:active { scale: 0.96; } .bio-popover__close span { display: block; margin-top: -1px; /* optical center for × */ } .bio-popover__cat { margin: 0 0 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); } .bio-popover__name { margin: 0 0 10px; font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; color: var(--text); } .bio-popover__body { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-muted); text-wrap: pretty; } .bio-ring-split__copy { position: relative; max-width: 34rem; width: 100%; } .bio-ring-split__copy .section__lead { margin-bottom: 28px; margin-left: auto; margin-right: auto; } .bio-ring-split__cta-stack .btn { position: relative; z-index: 2; } .bio-grid--ring { margin: 0; aspect-ratio: 1; width: 100%; max-width: 560px; justify-self: center; background: transparent; border-radius: 0; outline: none; overflow: visible; isolation: auto; } .bio-grid--ring::before { display: none; } .bio-grid__center { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0; text-align: center; pointer-events: none; } .bio-grid--ring .bio-grid__center { inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 42%; max-width: 12.5rem; margin-top: -0.15em; } .bio-grid--ring .bio-grid__name { font-size: clamp(16px, 2.2vw, 22px); max-width: none; } .bio-grid--ring .bio-grid__meta { white-space: normal; text-wrap: balance; } .bio-grid--ring .bio-grid__canvas { border-radius: 0; background: transparent; width: 100%; height: 100%; } @media (min-width: 900px) { .bio-ring-split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 40px 48px; justify-items: stretch; text-align: left; } .bio-ring-split__copy .section__lead { margin-left: 0; margin-right: 0; } .bio-grid--ring { max-width: none; justify-self: end; } /* Let the popover position against the copy column, not the CTA stack */ .bio-ring-split__cta-stack { position: static; } .bio-popover { left: 0; top: 50%; bottom: auto; width: min(22rem, 100%); transform: translate3d(0, calc(-50% + 8px), 0); } .bio-popover.is-open { transform: translate3d(0, -50%, 0); } } @media (prefers-reduced-motion: reduce) { .bio-popover-veil__layer { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(0, 13, 15, 0.78); } } @media (max-width: 640px) { .bio-grid__name { font-size: 14px; } .bio-grid--ring .bio-grid__name { font-size: 15px; } } .bio-group { margin-bottom: 40px; } .bio-group h3 { margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--stroke); } .bio-list { list-style: none; padding: 0; margin: 0; } .bio-list li { padding: 0; border: 0; } .bio-list .bio-item { border-bottom: 1px solid rgba(3, 36, 43, 0.4); scroll-margin-top: calc(var(--site-header-h) + 24px); } .bio-list .bio-item summary { padding: 14px 0; font-size: 14px; font-weight: 500; gap: 12px; justify-content: flex-start; } .bio-list .bio-item summary::after { font-size: 22px; margin-left: 4px; } .bio-list .name { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; color: var(--text); text-align: left; } .bio-list .note { flex-shrink: 0; font-size: 12px; color: var(--text-faint); font-family: var(--font-mono); } .bio-list .bio-item .faq-a { padding: 0 0 16px; font-size: 15px; max-width: 62ch; } .callout { border: 1.5px dashed var(--wire); border-radius: var(--radius-lg); padding: 24px 28px; background: rgba(132, 167, 253, 0.05); margin: 32px 0; } .callout p { margin: 0; color: var(--text-muted); } .callout strong { color: var(--text); } /* ——— Data flow diagram ——— */ .data-flow { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; padding: 32px; } .data-flow__box { border: 1.5px dashed var(--wire); border-radius: var(--radius-md); padding: 20px 24px; text-align: center; min-width: 160px; background: var(--surface); } .data-flow__box strong { display: block; margin-bottom: 4px; } .data-flow__box span { font-size: 12px; color: var(--text-faint); } .data-flow__arrow { color: var(--wire-label); font-family: var(--font-mono); font-size: 20px; } /* ——— Privacy policy ——— */ .page-hero--privacy { position: relative; isolation: isolate; overflow: hidden; } .privacy-hero__wash { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient( ellipse 75% 70% at 100% 50%, rgba(63, 136, 224, 0.28), transparent 62% ); } .privacy-hero__wash::before { content: ""; position: absolute; right: -8%; top: 50%; transform: translateY(-50%); width: min(55%, 420px); height: min(120%, 480px); background: radial-gradient(circle, rgba(63, 136, 224, 0.35), transparent 68%); filter: blur(48px); pointer-events: none; } .privacy-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 220px); gap: clamp(40px, 8vw, 96px); align-items: center; } .privacy-hero__copy { min-width: 0; } .privacy-hero__lock { display: block; width: min(100%, 200px); height: auto; max-height: 240px; object-fit: contain; justify-self: end; pointer-events: none; user-select: none; } @media (max-width: 720px) { .privacy-hero__inner { display: block; } .privacy-hero__lock { display: none; } } .privacy-overview__grid { display: grid; gap: 40px; } .privacy-summary { max-width: 760px; } .privacy-summary h2 { margin: 0 0 16px; font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.025em; line-height: 1.15; text-wrap: balance; } .privacy-summary p:not(.section__eyebrow) { margin: 0 0 12px; color: var(--text-muted); font-size: 17px; line-height: 1.6; text-wrap: pretty; } .privacy-flow { margin: 0; padding: 28px; border-radius: 24px; background: radial-gradient(circle at 16% 0%, rgba(91, 159, 212, 0.12), transparent 34%), var(--surface); box-shadow: 0 20px 56px rgba(0, 0, 0, 0.24); } .privacy-flow figcaption { margin-bottom: 24px; } .privacy-flow figcaption strong { display: block; font-size: 20px; letter-spacing: -0.015em; } .privacy-flow__route { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) 36px minmax(0, 1fr); gap: 0; align-items: stretch; } .privacy-flow__connector { position: relative; align-self: center; height: 1px; background: rgba(126, 172, 255, 0.5); } .privacy-flow__connector::after { content: ""; position: absolute; top: 50%; right: 0; width: 7px; height: 7px; border-top: 1px solid var(--cta); border-right: 1px solid var(--cta); transform: translateY(-50%) rotate(45deg); } .privacy-flow__node { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 18px 14px; border: none; background: rgba(0, 13, 15, 0.7); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09); } .privacy-flow__node--gateway { box-shadow: 0 0 0 1px rgba(92, 184, 138, 0.22), 0 10px 28px rgba(0, 0, 0, 0.18); } .privacy-flow__node > span:not(.privacy-flow__no-store) { display: block; } .privacy-flow .privacy-flow__no-store { display: inline-flex; align-items: center; justify-content: center; align-self: center; gap: 6px; margin-top: 0; padding: 5px 8px; color: var(--normal); background: rgba(92, 184, 138, 0.09); border-radius: 999px; font-family: var(--font-mono); font-size: 10px; line-height: 1.2; white-space: nowrap; } .privacy-flow__cleanup-line { position: relative; width: 1px; height: 14px; margin: 10px auto 7px; background: rgba(92, 184, 138, 0.5); } .privacy-flow__cleanup-line::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 5px; height: 5px; border-right: 1px solid var(--normal); border-bottom: 1px solid var(--normal); transform: translate(-50%, 1px) rotate(45deg); } .privacy-flow__mobile-loop, .privacy-flow__mobile-arrow { display: none; } .privacy-flow__no-store svg { width: 15px; height: 15px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; } .privacy-flow__return { position: relative; height: 86px; margin-top: 4px; } .privacy-flow__return svg { display: block; width: 100%; height: 86px; overflow: visible; } .privacy-flow__return-path { fill: none; stroke: rgba(92, 184, 138, 0.58); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } #privacy-return-arrow path { fill: var(--normal); } .privacy-flow__return-label { position: absolute; top: 50px; left: 50%; padding: 0 10px; color: var(--normal); background: var(--surface); font-family: var(--font-mono); font-size: 10px; line-height: 1.3; text-align: center; transform: translate(-50%, -50%); white-space: nowrap; } .privacy-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 72px; align-items: start; } .privacy-toc { position: sticky; top: calc(var(--site-header-h) + 32px); display: grid; gap: 2px; } .privacy-toc p { margin: 0 0 10px; } .privacy-toc a { padding: 7px 0; color: var(--text-muted); font-size: 13px; line-height: 1.3; transition-property: color; transition-duration: 160ms; } .privacy-toc a:hover { color: var(--text); } .privacy-policy__content { min-width: 0; max-width: 820px; } .privacy-policy__section { margin-bottom: 56px; padding-bottom: 56px; border-bottom: 1px solid var(--stroke); scroll-margin-top: calc(var(--site-header-h) + 32px); } .privacy-policy__section--last { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .privacy-policy__section h2 { margin: 0 0 24px; font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.025em; line-height: 1.15; text-wrap: balance; } .privacy-policy__section h3 { margin: 0 0 10px; font-size: 18px; letter-spacing: -0.01em; line-height: 1.3; text-wrap: balance; } .privacy-policy__section p, .privacy-policy__section li { color: var(--text-muted); font-size: 16px; line-height: 1.65; } .privacy-policy__section p { margin: 0 0 16px; } .privacy-policy__section ul { display: grid; gap: 10px; margin: 0 0 20px; padding-left: 22px; } .privacy-policy__section strong { color: var(--text); } .privacy-policy__section a { color: var(--cta); text-decoration: underline; text-underline-offset: 3px; } .privacy-policy__section code { padding: 2px 5px; color: var(--text); background: rgba(255, 255, 255, 0.06); border-radius: 4px; font-family: var(--font-mono); font-size: 0.88em; } .privacy-rule { margin-bottom: 30px; } .privacy-rule:last-child { margin-bottom: 0; } .privacy-table-wrap { overflow-x: auto; margin: 24px 0; border-radius: var(--radius-lg); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09); } .privacy-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 13px; } .privacy-table th, .privacy-table td { padding: 13px 15px; border-bottom: 1px solid var(--stroke); text-align: left; vertical-align: top; } .privacy-table th { color: var(--text); background: var(--surface); font-size: 12px; font-weight: 600; } .privacy-table td { color: var(--text-muted); line-height: 1.45; } .privacy-table tr:last-child td { border-bottom: none; } .privacy-location { display: inline-block; padding: 3px 7px; color: var(--text-muted); background: rgba(255, 255, 255, 0.05); border-radius: 5px; white-space: nowrap; } .privacy-location--local { color: var(--normal); background: rgba(92, 184, 138, 0.09); } .privacy-note { padding: 18px 20px; color: var(--text-muted); background: rgba(91, 159, 212, 0.07); border-radius: var(--radius-md); box-shadow: 0 0 0 1px rgba(91, 159, 212, 0.16); font-size: 14px; line-height: 1.55; } @media (max-width: 900px) { .privacy-layout { grid-template-columns: 1fr; gap: 48px; } .privacy-toc { position: static; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .privacy-toc::-webkit-scrollbar { display: none; } .privacy-toc p { display: none; } .privacy-toc a { flex: 0 0 auto; min-height: 40px; padding: 11px 14px; background: var(--surface); border-radius: 999px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); white-space: nowrap; } } @media (max-width: 720px) { .privacy-flow { padding: 22px; } .privacy-flow__route { grid-template-columns: 1fr; gap: 0; } .privacy-flow__node { width: calc(100% - 52px); } .privacy-flow__connector { width: 1px; height: 30px; margin-right: auto; margin-left: calc((100% - 52px) / 2); } .privacy-flow__connector::after { top: auto; right: auto; bottom: 0; left: 50%; transform: translateX(-50%) rotate(135deg); } .privacy-flow__mobile-loop { position: absolute; z-index: 1; top: 0; right: 0; display: block; width: 56px; height: 100%; overflow: visible; pointer-events: none; } .privacy-flow__mobile-loop path { fill: none; stroke: rgba(92, 184, 138, 0.72); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; marker-end: none; } #privacy-mobile-return-arrow path { fill: var(--normal); stroke: none; } .privacy-flow__mobile-arrow { position: absolute; z-index: 2; top: calc(16% - 4px); right: 45px; display: block; width: 0; height: 0; border-top: 4px solid transparent; border-right: 8px solid var(--normal); border-bottom: 4px solid transparent; pointer-events: none; } .privacy-flow__return { display: grid; height: auto; margin-top: 16px; padding: 13px 14px; background: rgba(92, 184, 138, 0.07); border-radius: var(--radius-sm); box-shadow: 0 0 0 1px rgba(92, 184, 138, 0.16); } .privacy-flow__return svg { display: none; } .privacy-flow__return-label { position: static; padding: 0; background: transparent; font-size: 10px; transform: none; white-space: normal; } } /* ——— Modal (beta signup) ——— */ .modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 24px; } .modal[aria-hidden="false"] { display: flex; } .modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); } .modal__panel { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--stroke-strong); border-radius: var(--radius-lg); padding: 32px; width: min(100%, 420px); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5); } .modal__panel h2 { margin: 0 0 8px; font-size: 22px; } .beta-form-view > p { color: var(--text-muted); font-size: 14px; margin: 0 0 24px; } .modal__close { position: absolute; z-index: 2; top: 8px; right: 8px; width: 40px; height: 40px; background: transparent; border: none; border-radius: 50%; color: var(--text-faint); font-size: 22px; cursor: pointer; line-height: 1; transition-property: color, background-color; transition-duration: 160ms; } .modal__close:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); } .form-field { margin-bottom: 16px; } .form-field label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 6px; } .form-field input { width: 100%; background: var(--bg); border: 1px solid var(--stroke-strong); border-radius: var(--radius-sm); padding: 12px 14px; color: var(--text); font-family: inherit; /* 16px+: prevents iOS Safari focus-zoom that sticks after the keyboard closes */ font-size: 16px; } .form-field input[aria-invalid="true"] { border-color: var(--warn); } .form-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .form-note { color: var(--text-faint); font-size: 12px; line-height: 1.5; margin: 12px 0 0; } .form-note a { color: var(--text-muted); } .modal__panel button[type="submit"]:disabled { opacity: 0.65; } .modal__panel form[aria-busy="true"] button[type="submit"] { cursor: wait; } .form-error { display: none; color: var(--warn); font-size: 14px; margin-top: 12px; } .form-error.is-visible { display: block; } .beta-success-view { position: relative; padding-top: 8px; text-align: center; } .beta-success__check { display: grid; width: 72px; height: 72px; margin: 0 auto 20px; place-items: center; color: var(--bg); background: var(--normal); border-radius: 50%; box-shadow: 0 0 32px rgba(92, 184, 138, 0.24); opacity: 0; filter: blur(4px); transform: scale(0.25); transition-property: opacity, filter, transform; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); } .beta-success__check svg { width: 34px; height: 34px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; } .beta-success__eyebrow { margin: 0 0 8px; } .beta-success-view h2 { margin-bottom: 12px; text-wrap: balance; } .beta-success-view h2:focus { outline: none; } .beta-success__sent { margin: 0 auto 20px; color: var(--text-muted); font-size: 14px; line-height: 1.55; text-wrap: pretty; } .beta-success__sent strong { color: var(--text); overflow-wrap: anywhere; } .beta-success__action { display: grid; gap: 5px; margin-bottom: 16px; padding: 16px; background: var(--bg); border: 1px solid var(--stroke-strong); border-radius: var(--radius-md); text-align: left; } .beta-success__action strong { color: var(--text); font-size: 14px; } .beta-success__action span { color: var(--text-muted); font-size: 13px; line-height: 1.5; } .beta-success__help { margin: 12px 0 0; color: var(--text-faint); font-size: 12px; line-height: 1.5; text-wrap: pretty; } .beta-success-view > .btn { width: 100%; } .beta-success__eyebrow, .beta-success-view h2, .beta-success__sent, .beta-success__action, .beta-success__help, .beta-success-view > .btn { opacity: 0; transform: translateY(8px); transition-property: opacity, transform; transition-duration: 320ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); } .beta-success-view.is-visible .beta-success__check, .beta-success-view.is-visible .beta-success__eyebrow, .beta-success-view.is-visible h2, .beta-success-view.is-visible .beta-success__sent, .beta-success-view.is-visible .beta-success__action, .beta-success-view.is-visible .beta-success__help, .beta-success-view.is-visible > .btn { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); } .beta-success-view.is-visible .beta-success__eyebrow { transition-delay: 80ms; } .beta-success-view.is-visible h2 { transition-delay: 120ms; } .beta-success-view.is-visible .beta-success__sent { transition-delay: 160ms; } .beta-success-view.is-visible .beta-success__action { transition-delay: 200ms; } .beta-success-view.is-visible .beta-success__help, .beta-success-view.is-visible > .btn { transition-delay: 240ms; } .beta-confetti { position: absolute; inset: 0; pointer-events: none; } .beta-confetti span { --confetti-x: 0px; --confetti-y: 80px; --confetti-r: 90deg; position: absolute; top: 36px; left: 50%; width: 5px; height: 9px; background: var(--cta); border-radius: 2px; opacity: 0; } .beta-confetti span:nth-child(1) { --confetti-x: -145px; --confetti-y: 34px; --confetti-r: -130deg; background: var(--normal); } .beta-confetti span:nth-child(2) { --confetti-x: -112px; --confetti-y: 82px; --confetti-r: 110deg; background: var(--ai-1); } .beta-confetti span:nth-child(3) { --confetti-x: -70px; --confetti-y: -18px; --confetti-r: -75deg; background: var(--cta); } .beta-confetti span:nth-child(4) { --confetti-x: -34px; --confetti-y: 102px; --confetti-r: 150deg; background: var(--peri); } .beta-confetti span:nth-child(5) { --confetti-x: 38px; --confetti-y: 94px; --confetti-r: -145deg; background: var(--normal); } .beta-confetti span:nth-child(6) { --confetti-x: 76px; --confetti-y: -20px; --confetti-r: 80deg; background: var(--ai-1); } .beta-confetti span:nth-child(7) { --confetti-x: 114px; --confetti-y: 72px; --confetti-r: -105deg; background: var(--cta); } .beta-confetti span:nth-child(8) { --confetti-x: 146px; --confetti-y: 28px; --confetti-r: 135deg; background: var(--peri); } .beta-success-view.is-visible .beta-confetti span, .closing__success.is-visible .beta-confetti span { animation: beta-confetti-pop 900ms cubic-bezier(0.2, 0, 0, 1) both; } .beta-success-view.is-visible .beta-confetti span:nth-child(even), .closing__success.is-visible .beta-confetti span:nth-child(even) { animation-delay: 60ms; } /* Footer signup: burst from the box, not just the success text block */ .closing__success .beta-confetti { inset: -12px -8px; } @keyframes beta-confetti-pop { 0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(0.5); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--confetti-x), var(--confetti-y)) rotate(var(--confetti-r)) scale(1); } } /* ——— Entry-triggered video (differentiator / range bar) ——— */ .scroll-video { border-top: 1px solid rgba(3, 36, 43, 0.7); box-shadow: inset 0 2px 0 var(--edge-hair); } .scroll-video__track { height: clamp(700px, 90svh, 920px); position: relative; } .scroll-video__pin { position: relative; height: 100%; overflow: hidden; display: flex; align-items: stretch; justify-content: center; } .scroll-video__stage { position: relative; flex: 1 1 auto; width: min(100%, var(--scroll-video-max, 1520px)); max-width: var(--scroll-video-max, 1520px); min-height: 0; background: var(--bg); } .scroll-video__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; } .scroll-video__fade { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } /* Blur a hard radial mask — avoids the posterization you get from long dark gradients */ .scroll-video__fade::before { content: ""; position: absolute; inset: -56px; /* Taller ellipse + larger clear center so it clears the bar segments */ background: radial-gradient( ellipse 62% 78% at 50% 52%, transparent 0%, transparent 52%, var(--bg) 78% ); filter: blur(30px); transform: translateZ(0); } /* Light tilt-shift: soft blur only at top/bottom, middle stays sharp */ .scroll-video__fade::after { content: ""; position: absolute; inset: 0; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); mask-image: linear-gradient( to bottom, #000 0%, #000 8%, transparent 26%, transparent 74%, #000 90%, #000 100% ); -webkit-mask-image: linear-gradient( to bottom, #000 0%, #000 8%, transparent 26%, transparent 74%, #000 90%, #000 100% ); } .scroll-video__copy { position: absolute; z-index: 2; left: 50%; top: clamp(72px, 12svh, 120px); width: min(36rem, calc(100% - 48px)); display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); text-align: center; pointer-events: none; filter: drop-shadow(0 0 28px rgba(0, 13, 15, 0.75)); } .scroll-video__eyebrow { margin: 0 0 12px; } .scroll-video__title, .scroll-video__body { margin: 0; } .scroll-video__body { margin-top: 14px; } .scroll-video__copy .section__title { margin-bottom: 0; } .scroll-video__copy .section__lead, .scroll-video__body { margin-bottom: 0; margin-inline: auto; font-size: 18px; line-height: 1.6; max-width: 40ch; } /* ——— Responsive ——— */ @media (max-width: 1024px) { .scroll-video__track { height: clamp(660px, 86svh, 840px); } .scroll-video__fade::before { inset: -44px; background: radial-gradient( ellipse 68% 82% at 50% 54%, transparent 0%, transparent 48%, var(--bg) 76% ); filter: blur(26px); } .scroll-video__fade::after { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); mask-image: linear-gradient( to bottom, #000 0%, #000 10%, transparent 28%, transparent 72%, #000 88%, #000 100% ); -webkit-mask-image: linear-gradient( to bottom, #000 0%, #000 10%, transparent 28%, transparent 72%, #000 88%, #000 100% ); } .scroll-video__copy { top: clamp(64px, 10svh, 96px); width: min(36rem, calc(100% - 32px)); } .scroll-video__copy .section__lead, .scroll-video__body { font-size: 18px; line-height: 1.6; max-width: 34ch; } } @media (max-width: 640px) { .scroll-video__track { height: clamp(640px, 84svh, 760px); } .scroll-video__copy { top: clamp(56px, 9svh, 72px); } .scroll-video__copy .section__title { font-size: clamp(24px, 7vw, 32px); } .scroll-video__copy .section__lead, .scroll-video__body { font-size: 18px; line-height: 1.6; max-width: 32ch; } } @media (max-width: 1024px) { /* Keep one-home side-by-side on tablet; tighten so the list isn't cropped */ .section--one-home { height: min(820px, 90svh); } .one-home { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 28px; } .one-home__media { padding: 20px 0; } .one-home__img { object-position: center; } .split, .split:has(> .one-home-shot:first-child), .split:has(> .wire:first-child), .split:has(> .split__media:first-child), .alt-row, .privacy-strip, .privacy-band__inner, .privacy-band__pillars, .choose-grid { grid-template-columns: 1fr; } .privacy-band { padding: 64px 0; } /* Lock stacks on top — keep the wash behind it, not stranded at the bottom */ .privacy-band__wash { background: radial-gradient( ellipse 75% 70% at 0% 0%, rgba(63, 136, 224, 0.28), transparent 62% ); } .privacy-band__wash::before { left: -12%; top: -30%; bottom: auto; } .privacy-band__lock { width: min(42vw, 180px); margin-inline: 0; justify-self: center; } .hero { min-height: 0; padding: 88px 0 48px; } .hero__stack { gap: 72px; } .hero__copy { width: min(100% - 40px, 42rem); } .upload-morph__snapshot, .upload-morph__plan { grid-template-columns: 1fr; justify-items: center; gap: 28px; align-content: start; padding: clamp(20px, 3.5vh, 36px) 20px clamp(24px, 4vh, 40px); width: 100%; } .upload-morph__snapshot-copy, .upload-morph__plan-copy { text-align: center; max-width: min(36rem, 100%); justify-self: center; } .upload-morph__snapshot-copy .section__lead, .upload-morph__plan-copy .section__lead { margin-inline: auto; } .upload-morph__snap-slot, .upload-morph__plan-slot { justify-self: center; } .upload-morph__snap-slot { width: min(var(--flow-art-w, 620px), 100%); } .upload-morph__plan-slot { width: min( var(--flow-art-w, 620px), 72vw, calc((100svh - var(--site-header-h) - 14rem) * 1537 / 1690) ); } /* Tablet: top-align + cap art so copy/eyebrow share one Y across beats */ .upload-morph__sticky { justify-content: flex-start; --flow-art-w: min( 620px, 100%, calc((100svh - var(--site-header-h) - 14rem) * 2328 / 1962) ); padding-left: 20px; padding-right: 20px; } .hero__stage { padding: 0 20px; } .hero__frame { width: min(100%, 860px); padding: 10px; border-radius: 24px; } .hero__shot-wrap { border-radius: 16px; } .hero__trust { margin: 0 0 18px; } .glass-chip--1 { top: 4%; right: 0; font-size: 12px; padding: 12px 14px; } .glass-chip--2 { left: 0; top: 34%; font-size: 12px; padding: 12px 14px; } .glass-chip--3 { bottom: 10%; right: 0; font-size: 12px; padding: 12px 14px; } .flow-scene__stage { grid-template-columns: 1fr; gap: 16px; min-height: 0; padding: 16px 0; } .flow-doc { display: none; } .flow-bucket { justify-self: center; grid-column: 1; } .flow-arrow { grid-column: 1; justify-self: center; transform: rotate(90deg); } .flow-snapshot { grid-column: 1; } .split--reverse > :first-child { order: 0; } .alt-row:nth-child(even) .alt-row__media { order: 0; } .steps { grid-template-columns: repeat(2, 1fr); } .feature-grid { grid-template-columns: repeat(2, 1fr); } .feature-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento-card--1x1 { grid-column: span 1; } .bento-card--2x1, .bento-card--4x1 { grid-column: span 2; height: auto; } .bento-card--2x1 .bento-card__media { height: auto; aspect-ratio: 588 / 324; } .bento-card--4x1 { flex-direction: column; padding: 28px 28px 0; height: auto; min-height: 480px; gap: 20px; } .bento-card--4x1 .bento-card__content { flex: none; flex-basis: auto; max-width: none; align-self: stretch; padding: 0; } /* Match stacked Trends hero inset on tablet */ .bento-card--2x1 .bento-card__content, .bento-card--1x1 .bento-card__content { padding: 28px 28px 16px; } .bento-card--4x1 .bento-card__media { width: 100%; height: auto; aspect-ratio: 768 / 546; margin: 0; border-radius: 12px 12px 0 0; align-self: stretch; } .extras-grid { grid-template-columns: repeat(2, 1fr); } .footer-brand { flex: 1 1 100%; } } @media (max-width: 768px) { .br--desktop { display: none; } /* True mobile: stack copy above a full-width list */ .section--one-home { height: auto; max-height: none; padding: 64px 0 48px; overflow: visible; } .one-home { grid-template-columns: 1fr; height: auto; gap: 28px; } .one-home__media { height: auto; padding: 0; justify-content: center; max-height: min(70vh, 580px); } .one-home__img { width: 100%; height: min(70vh, 580px); object-position: center top; } .wrap { width: min(100% - 32px, var(--max)); } .section { padding: 64px 0; } .section--feature-bento { padding: 96px 0 64px; } .nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; justify-content: flex-start; background: var(--nav-bg); border-bottom: 1px solid var(--stroke); padding: 12px 16px 20px; margin: 0; align-items: stretch; gap: 4px; } .nav.is-open { display: flex; } .nav a { height: auto; font-size: 17px; font-weight: 500; padding: 14px 14px; border-radius: var(--radius-sm); } .site-header__inner { gap: 10px; } .nav-toggle { display: inline-flex; margin-left: auto; } .site-header__actions { margin-left: 0; } .steps, .feature-grid, .extras-grid, .feature-bento { grid-template-columns: 1fr; } .bento-card--1x1, .bento-card--2x1, .bento-card--4x1 { grid-column: span 1; height: auto; min-height: 0; } .bento-card--2x1 .bento-card__content, .bento-card--1x1 .bento-card__content { height: auto; min-height: 0; padding: 28px 28px 16px; } .bento-card__content p { display: block; -webkit-line-clamp: unset; overflow: visible; } .bento-card--4x1 { padding: 28px 28px 0; } .bento-card--2x1 .bento-card__media { height: auto; aspect-ratio: 588 / 324; flex: none; } .wrap--bento { width: min(100% - 32px, 1200px); } .privacy-strip { padding: 28px; } .privacy-band { padding: 56px 0; } .privacy-band__pillars { gap: 16px; } .footer-grid { flex-direction: column; gap: 28px; } .hero { min-height: 0; padding: 72px 0 40px; } .hero__stack { gap: 60px; } .hero__copy { width: min(100% - 32px, 100%); } .hero__title-line { font-size: clamp(38px, 9.5vw, 48px); } .hero__title-line--serif { font-size: clamp(36px, 9vw, 46px); } .hero__sub { margin-bottom: 22px; } .hero__stage { padding: 0 16px; } .hero__frame { width: 100%; /* Thin chrome, unified 24px radius */ padding: 0; border-radius: 24px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } .hero__shot-wrap { border-radius: 24px; } .upload-morph__frame { --morph-r: 24px; --morph-pad: 0px; } .upload-morph__shot { border-radius: 24px; } /* Mobile: shared top inset so Import → Understand → Optimize don’t ladder */ .upload-morph__sticky { justify-content: flex-start; --flow-art-w: min( 100%, calc((100svh - var(--site-header-h) - 15rem) * 2328 / 1962) ); padding-top: clamp(20px, 3.5vh, 28px); padding-bottom: clamp(18px, 3.5vh, 28px); padding-left: 16px; padding-right: 16px; } .upload-morph__snapshot, .upload-morph__plan { padding: clamp(20px, 3.5vh, 28px) 16px clamp(18px, 3.5vh, 28px); width: 100%; gap: 28px; max-height: 100%; align-content: start; box-sizing: border-box; } .upload-morph__copy .section__title, .upload-morph__snapshot-copy .section__title, .upload-morph__plan-copy .section__title { font-size: clamp(22px, 5.5vw, 28px); } .upload-morph__snap-slot { width: min( 100%, calc((100svh - var(--site-header-h) - 16rem) * 2328 / 1962) ); max-height: calc(100svh - var(--site-header-h) - 16rem); } .upload-morph__plan-slot { width: min( 100%, calc((100svh - var(--site-header-h) - 16rem) * 1537 / 1690) ); max-width: 100%; max-height: calc(100svh - var(--site-header-h) - 16rem); justify-self: center; } /* Drop thick glass chrome — simple border, unified 24px radius. max-height may clip the bottom slightly; keep radius clean. */ .snapshot-frame, .plan-frame { padding: 0; border-radius: 24px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; overflow: hidden; } .snapshot-frame__viewport { border-radius: 24px; } .snapshot-frame__viewport::after { display: none; } .plan-frame__img { border-radius: 24px; outline: none; } .hero__trust { margin: 0 0 16px; } .trust-chips { gap: 6px; } .trust-chips li { font-size: 11px; padding: 5px 10px; } .glass-chip { display: none; } .wire--hero { min-height: 260px; aspect-ratio: auto; } }