/* ============================================================================= macOS design layer — homepage ============================================================================= Loaded LAST in so it wins the cascade against the page's older inline blocks at equal specificity. Two of those blocks live in (inside .vs-table and .quote-section) and therefore come after this file in document order — rules that clash with those are prefixed `body ` to win on specificity (0,1,1 vs 0,1,0) rather than on order. Do not "tidy" those prefixes away. Light theme only (repo rule). The brand accent stays; what changes is the surface language: translucent layered panels, real depth, one radius scale, and spring motion instead of linear fades. ========================================================================== */ :root { /* macOS canvas + vibrancy. The canvas is deliberately a touch cooler and darker than the panels so translucent surfaces have something to lift off; on a pure-white canvas every panel reads flat. */ --mac-canvas: #f0f0f2; --mac-canvas-2: #e8e8ec; --mac-panel: #ffffff; --mac-panel-blur: rgba(255, 255, 255, 0.72); --mac-panel-blur-strong: rgba(255, 255, 255, 0.86); --mac-ink: #1d1d1f; --mac-ink-2: #52525b; --mac-ink-3: #86868b; --mac-line: rgba(0, 0, 0, 0.08); --mac-line-2: rgba(0, 0, 0, 0.045); /* The hairline highlight along a panel's top edge — the single detail that most reads as "macOS" rather than "generic card". */ --mac-gloss: inset 0 1px 0 rgba(255, 255, 255, 0.9); --mac-r-sm: 10px; --mac-r: 14px; --mac-r-lg: 20px; --mac-r-xl: 28px; --mac-e1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .03); --mac-e2: 0 4px 14px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .04); --mac-e3: 0 14px 36px rgba(0, 0, 0, .10), 0 2px 8px rgba(0, 0, 0, .05); --mac-e4: 0 30px 70px rgba(0, 0, 0, .15), 0 8px 22px rgba(0, 0, 0, .07); /* Overshoot for things that pop in; ease-out for things that settle. */ --mac-spring: cubic-bezier(.34, 1.4, .64, 1); --mac-ease: cubic-bezier(.16, 1, .3, 1); } body { background: var(--mac-canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.011em; } /* ── Nav ──────────────────────────────────────────────────────────────────── */ /* NO backdrop-filter here, on purpose.

is the sticky element, and the page already made this call at index.html:1957 — blurring behind a sticky element repaints every scroll frame, and .nav-inner's 0.97-opacity pill covers the result anyway, so it is pure cost. An earlier version of this file added `backdrop-filter: blur(20px)` to

and reintroduced exactly that. The floating-pill shape carries the macOS read on its own. */ body nav { background: transparent; border-bottom: 1px solid transparent; transition: box-shadow .4s var(--mac-ease); } body nav.is-scrolled { border-bottom-color: transparent; } body nav.is-scrolled .nav-inner { box-shadow: 0 10px 34px rgba(16, 20, 16, .10), var(--mac-gloss); } body .nav-inner { transition: box-shadow .4s var(--mac-ease); } body .nav-links a, body .nav-login { text-transform: none; letter-spacing: -0.01em; font-size: 0.875rem; color: var(--mac-ink-2); transition: color .2s var(--mac-ease); } body .nav-links a:hover, body .nav-login:hover { color: var(--mac-ink); } /* The lime dot separators read as debris at this weight. */ body .nav-links li + li::before { opacity: .35; } /* ── Buttons: capsule, with a pressed state that actually feels like one ──── */ body .btn-primary, body .btn-bracket, body .btn-bracket-accent, body .btn-secondary { border-radius: 980px; text-transform: none; letter-spacing: -0.01em; font-weight: 600; transition: transform .18s var(--mac-spring), box-shadow .25s var(--mac-ease), background .2s var(--mac-ease), border-color .2s var(--mac-ease); will-change: transform; } body .btn-primary { box-shadow: var(--mac-e2), var(--mac-gloss); padding: 12px 22px; } body .btn-primary:hover, body .btn-bracket-accent:hover { transform: translateY(-1.5px); box-shadow: var(--mac-e3); } body .btn-primary:active, body .btn-bracket-accent:active, body .btn-secondary:active { transform: translateY(0) scale(.975); box-shadow: var(--mac-e1); } body .btn-secondary { background: var(--mac-panel-blur); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--mac-line); box-shadow: var(--mac-e1), var(--mac-gloss); padding: 12px 20px; } body .btn-secondary:hover { background: #fff; transform: translateY(-1.5px); box-shadow: var(--mac-e2); } /* ── Hero ─────────────────────────────────────────────────────────────────── */ /* The old hero sat on a flat wash. This gives it a soft aurora the panels can lift off, keeping the accent well under the text contrast floor. */ body .hero { position: relative; background: radial-gradient(120% 80% at 15% -10%, rgba(204, 255, 0, .16), transparent 60%), radial-gradient(90% 70% at 92% 0%, rgba(22, 163, 74, .10), transparent 62%), linear-gradient(180deg, #f7f7f9 0%, var(--mac-canvas) 55%, var(--mac-canvas) 100%); overflow: clip; } body .hero::after { /* Fine grain stops the large gradient from banding on cheap panels. */ content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"); } body .hero-inner { position: relative; z-index: 1; } body .hero-h1 { letter-spacing: -0.045em; line-height: 1.02; font-weight: 700; } /* .hero-h1 em is deliberately NOT restyled here. The page already gives it solid green plus a lime highlighter that sweeps underneath on load (@keyframes cinSweep). An earlier version of this file replaced that with gradient-clipped text; the running animation owns background-size, the gradient never painted, and the headline's second line rendered as transparent text on a transparent background — invisible while still taking up its 87px of layout. Leave the marker sweep alone. */ body .hero-sub { color: var(--mac-ink-2); font-size: 1.0625rem; line-height: 1.62; letter-spacing: -0.014em; } body .hero-label { background: var(--mac-panel-blur); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border: 1px solid var(--mac-line); border-radius: 980px; padding: 7px 15px 7px 12px; box-shadow: var(--mac-e1), var(--mac-gloss); text-transform: none; letter-spacing: -0.005em; font-size: 0.8rem; width: fit-content; } body .hero-label .sq { border-radius: 50%; width: 7px; height: 7px; } body .hero-trust-item { color: var(--mac-ink-2); letter-spacing: -0.01em; } body .hero-trust-icon { color: #16a34a; } /* ── The scanner as a genuine macOS window ────────────────────────────────── */ body .scanner-widget { border-radius: var(--mac-r-lg); /* Opaque, and no backdrop-filter. This panel sits on the hero's lime and green orbs, so translucency pulled that colour through and flattened the contrast of every value in the table. backdrop-filter also forces its own compositing layer for no benefit once the background is solid. */ background: #fff; border: 1px solid rgba(0, 0, 0, .09); box-shadow: var(--mac-e4), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .35); overflow: hidden; transition: box-shadow .5s var(--mac-ease); } /* There is deliberately NO resting 3D tilt here. This used to be `perspective(1600px) rotateY(-1.6deg) rotateX(.7deg)` at rest, flattening only on :hover. It was described as "the alive cue, not a gimmick", but a 3D-rotated element is rasterised and resampled: it made every label and number in the panel render soft on every desktop screen, and it only sharpened while the pointer was over it. This widget's whole job is showing the visitor legible live data about their own device, so sharpness beats the tilt. Hover now lifts on the Z axis only — no rotate, no scale — which keeps the glyphs on the pixel grid. */ @media (hover: hover) and (min-width: 1024px) { body .scanner-widget:hover { box-shadow: var(--mac-e4), 0 18px 48px rgba(16, 22, 14, .13), inset 0 1px 0 rgba(255, 255, 255, .95); } } body .scanner-header { /* Opaque to match the panel — with a solid body behind it there is nothing for backdrop-filter to sample, and it only cost a compositing layer. */ background: linear-gradient(180deg, #fafafc, #f2f2f5); border-bottom: 1px solid var(--mac-line); } body .result-row { border-bottom: 1px solid var(--mac-line-2); transition: background .2s var(--mac-ease); } body .result-row:hover { background: rgba(0, 0, 0, .022); } /* ── Section rhythm + panel language ──────────────────────────────────────── */ body .stats-bar, body .value-props, body .how-it-works, body .vs-table, body .proof-section, body .quote-section, body .cta-section { position: relative; } body .stats-bar { background: transparent; border-top: 1px solid var(--mac-line); border-bottom: 1px solid var(--mac-line); } body .stat-num { letter-spacing: -0.045em; font-weight: 700; } body .stat-label { color: var(--mac-ink-3); letter-spacing: .04em; } body .value-props { background: linear-gradient(180deg, var(--mac-canvas), #f6f6f8); } body .how-it-works { background: var(--mac-canvas-2); } body .vs-table { background: linear-gradient(180deg, #f6f6f8, var(--mac-canvas)); } /* Every card-ish thing on the page converges on one panel treatment. */ body .step-card, body .vp-card, body .proof-card, body .quote-card, body .compare-card, body .feature-card { background: var(--mac-panel); border: 1px solid var(--mac-line); border-radius: var(--mac-r-lg) !important; box-shadow: var(--mac-e2), var(--mac-gloss); transition: transform .35s var(--mac-ease), box-shadow .35s var(--mac-ease); } body .step-card:hover, body .vp-card:hover, body .proof-card:hover, body .compare-card:hover, body .feature-card:hover { transform: translateY(-4px); box-shadow: var(--mac-e3), var(--mac-gloss); } body h2 { letter-spacing: -0.038em; line-height: 1.08; } body .section-label, body .vp-label { color: var(--mac-ink-3); letter-spacing: .09em; } /* ── Motion: spring reveals, and a guaranteed floor ───────────────────────── */ /* Only the easing is changed. Deliberately NOT re-declaring opacity:0 — the page owns the hidden state (.reveal / .reveal.visible, class added by the IntersectionObserver at index.html:4824). Restating it here would mean any element whose observer never fires stays hidden on this file's authority. */ body .reveal { transition: opacity .7s var(--mac-ease), transform .7s var(--mac-ease); } /* Safety net for the reveal bug measured 2026-08-02: 11 elements were still at opacity:0 after being scrolled past, because their observer never fired. A missed animation is a cosmetic loss; invisible content is a broken page. Runs on a delay so a normal reveal still animates and wins first. */ @media (prefers-reduced-motion: no-preference) { body .reveal:not(.visible) { animation: mac-reveal-floor 0s linear 2.6s forwards; } } @keyframes mac-reveal-floor { to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { body .reveal, body .scanner-widget, body .btn-primary, body .btn-secondary { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; } } /* ── Mascot band: it was 612px of page for one decorative image ───────────── */ body .mascot-footer { padding-block: 28px; } body .mascot-footer img, body .mascot-footer svg { max-height: 190px; width: auto; } /* ── Mobile ───────────────────────────────────────────────────────────────── */ @media (max-width: 900px) { body .hero-h1 { letter-spacing: -0.035em; } body .scanner-widget { transform: none !important; } body .mascot-footer { padding-block: 16px; } body .mascot-footer img, body .mascot-footer svg { max-height: 130px; } }