inline. This CSS is the fallback for the rare case where the inline padding is missing entirely — it does NOT use !important, so the LLM's inline styles always win when present. An earlier version used !important and inadvertently capped every section at 96 px (the floor) instead of honouring the 120 px the generator emits; hence the preview-vs-published rhythm discrepancy when sections were shipped live. Scoped to ``.marketing-generated-page`` so hand-authored pages (homepage, index.php fallback, editorial posts) are untouched — the baseline only applies to agent-produced content. */ .marketing-generated-page section { padding-top: max(96px, 8vh); padding-bottom: max(96px, 8vh); } @media (max-width: 640px) { .marketing-generated-page section { padding-top: 72px; padding-bottom: 72px; } } /* Eyebrow mono stamp — used at the top of every section */ .section-eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--outline); display: inline-flex; align-items: center; gap: 10px; } .section-eyebrow::before { content: ""; width: 20px; height: 1px; background: var(--primary-container); display: inline-block; } /* Oversized editorial headline scale */ .editorial-headline { font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; color: var(--text-heading); margin: 0; text-wrap: balance; } .editorial-headline--hero { font-size: clamp(56px, 9vw, 148px); line-height: 0.94; letter-spacing: -0.045em; } .editorial-headline--xl { font-size: clamp(44px, 6vw, 104px); } .editorial-headline--lg { font-size: clamp(36px, 4.2vw, 72px); } .editorial-headline .accent { color: var(--primary-container); } .editorial-headline .muted { color: var(--outline); font-weight: 500; } .editorial-subhead-lg { font-family: var(--font-sans); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; font-weight: 400; color: var(--on-surface-variant); max-width: 52ch; text-wrap: pretty; margin: 0; } /* ───────────────────────────────────────────────────────── Top navigation — sticky bar of --nav-height Fully opaque background. An earlier version used 88% opacity + backdrop-filter blur, which let content show through during fast scroll — visually jarring, and on Chrome/Safari the backdrop blur can lag a frame behind the scroll position, flashing unblurred content past the nav. Opaque removes both issues; the visual frosted-glass effect was pretty but not worth the scroll flicker. ───────────────────────────────────────────────────────── */ .marketing-nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); z-index: 50; background: var(--surface-canvas); border-bottom: 1px solid var(--hairline); display: flex; align-items: center; gap: 32px; padding: 0 32px; } .marketing-nav .wordmark { font-size: 20px; } .nav-links { display: flex; align-items: center; gap: 24px; margin-left: 16px; } .nav-link-mk { background: none; border: 0; color: var(--on-surface); font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em; padding: 6px 0; cursor: pointer; position: relative; display: inline-flex; align-items: center; gap: 4px; transition: color var(--duration-fast) var(--ease-expo); } .nav-link-mk::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--primary-container); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-base) var(--ease-expo); } .nav-link-mk:hover { color: var(--text-heading); } .nav-link-mk.active { color: var(--text-heading); } .nav-link-mk.active::after { transform: scaleX(1); } .nav-link-mk .caret { width: 10px; height: 10px; opacity: 0.55; } .nav-spacer-mk { flex: 1; } .nav-signin { background: none; border: 0; color: var(--on-surface-variant); font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: color var(--duration-fast) var(--ease-expo); } .nav-signin:hover { color: var(--text-heading); } .nav-cta { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer; white-space: nowrap; font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em; color: var(--on-primary-container); background: var(--gradient-primary); box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 8px 20px -10px rgba(20,227,156,0.55), 0 0 0 1px rgba(20,227,156,0.35); transition: transform var(--duration-fast) var(--ease-expo), box-shadow var(--duration-base) var(--ease-expo); } .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 14px 30px -12px rgba(20,227,156,0.7), 0 0 0 1px rgba(20,227,156,0.5); } .nav-cta:active { transform: translateY(0) scale(0.985); } /* ───────────────────────────────────────────────────────── Buttons ───────────────────────────────────────────────────────── */ .btn-primary-lg { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 999px; border: 0; cursor: pointer; font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: -0.005em; color: var(--on-primary-container); position: relative; overflow: hidden; isolation: isolate; background-image: linear-gradient( 115deg, #0a9968 0%, #14e39c 25%, #2dd4bf 45%, #7ef7c5 55%, #2dd4bf 70%, #14e39c 85%, #0a9968 100% ); background-size: 220% 220%; background-position: 15% 50%; box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 14px 32px -12px rgba(20,227,156,0.55), 0 0 0 1px rgba(20,227,156,0.4); transition: transform var(--duration-fast) var(--ease-expo), box-shadow var(--duration-base) var(--ease-expo), background-position var(--duration-slow) var(--ease-expo); } .btn-primary-lg:hover { transform: translateY(-1px); background-position: 85% 50%; box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset, 0 20px 44px -14px rgba(20,227,156,0.75), 0 0 0 1px rgba(20,227,156,0.65), 0 0 44px -8px rgba(20,227,156,0.45); } .btn-primary-lg:active { transform: translateY(0) scale(0.985); } .btn-primary-lg .arrow { transition: transform var(--duration-fast) var(--ease-expo); } .btn-primary-lg:hover .arrow { transform: translateX(3px); } .btn-ghost-lg { background: none; border: 0; color: var(--on-surface); font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: -0.005em; cursor: pointer; padding: 14px 6px; display: inline-flex; align-items: center; gap: 8px; transition: color var(--duration-fast) var(--ease-expo); } .btn-ghost-lg:hover { color: var(--primary); } .btn-ghost-lg .arrow { transition: transform var(--duration-fast) var(--ease-expo); } .btn-ghost-lg:hover .arrow { transform: translateX(3px); } /* ───────────────────────────────────────────────────────── Hero — editorial split. Left: eyebrow + oversized sans headline with signal-green hand-drawn underline + subhead + gradient CTA. Right: a live "signal card" — orbit pulse + agent feed — that introduces the Loop metaphor in the first screen. See Hero.jsx + HeroSignal.jsx ───────────────────────────────────────────────────────── */ .hero-v3 { position: relative; min-height: 100vh; width: 100%; /* Pull the hero up under the translucent fixed nav so the hero covers the full viewport; the 140px top padding below then puts the first content line clear of the nav. */ margin-top: calc(var(--nav-height) * -1); padding: 140px 56px 80px; overflow: hidden; isolation: isolate; color: var(--on-surface); background: var(--surface-canvas); } /* ── Ambient background ── */ .hero-v3-ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .hero-v3-ambient-grid { position: absolute; inset: -80px; background-image: linear-gradient(to right, rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.045) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 85% 75% at 55% 45%, black 30%, transparent 85%); mask-image: radial-gradient(ellipse 85% 75% at 55% 45%, black 30%, transparent 85%); } .hero-v3-ambient-glow { position: absolute; top: -30%; right: -15%; width: 80vw; height: 80vw; max-width: 1100px; max-height: 1100px; background: radial-gradient(circle at center, rgba(20,227,156,0.22) 0%, rgba(20,227,156,0.08) 30%, transparent 60%); filter: blur(20px); animation: hero-v3-breathe 14s ease-in-out infinite; } @keyframes hero-v3-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: 0.8; } } .hero-v3-ambient-noise { position: absolute; inset: 0; background-image: var(--noise-url); background-size: 180px 180px; opacity: 0.18; } /* ── Top marquee ── */ .hero-v3-marquee { position: absolute; top: 80px; left: 0; right: 0; z-index: 2; overflow: hidden; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: rgba(10,12,16,0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); height: 34px; display: flex; align-items: center; pointer-events: none; } .hero-v3-marquee-track { display: flex; animation: hero-v3-marquee 40s linear infinite; white-space: nowrap; will-change: transform; } .hero-v3-marquee-group { display: inline-flex; align-items: center; gap: 18px; padding-right: 18px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; color: var(--on-surface-variant); } .hero-v3-marquee-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--primary-container); box-shadow: 0 0 8px var(--primary-container); animation: signal-pulse 2s ease-in-out infinite; } .hero-v3-marquee-sep { color: var(--primary-container); opacity: 0.55; } @keyframes hero-v3-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ── Main split layout ── */ .hero-v3-inner { position: relative; z-index: 3; max-width: 1440px; margin: 0 auto; padding-top: 64px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 72px; align-items: center; min-height: calc(100vh - 140px); } /* ── LEFT: copy ── */ .hero-v3-copy { display: flex; flex-direction: column; gap: 28px; max-width: 640px; } .hero-v3-headline { margin: 0; font-size: clamp(56px, 7.6vw, 112px); line-height: 0.96; letter-spacing: -0.04em; } .hero-v3-headline-accent { position: relative; display: inline-block; color: var(--primary-container); } .hero-v3-underline { position: absolute; left: -2%; right: -2%; bottom: -0.18em; width: 104%; height: 0.28em; color: var(--primary-container); opacity: 0; filter: drop-shadow(0 0 12px rgba(20,227,156,0.5)); stroke-dasharray: 900; stroke-dashoffset: 900; animation: hero-v3-underline-draw 1.1s var(--ease-expo, cubic-bezier(0.16,1,0.3,1)) 0.6s forwards, hero-v3-underline-show 0.4s linear 0.6s forwards; } @keyframes hero-v3-underline-show { to { opacity: 1; } } @keyframes hero-v3-underline-draw { to { stroke-dashoffset: 0; } } .hero-v3-subhead { margin: 0; max-width: 52ch; font-size: 17px; line-height: 1.55; color: var(--on-surface-variant); } /* CTAs */ .hero-v3-ctas { display: flex; align-items: center; gap: 24px; margin-top: 4px; flex-wrap: wrap; } .hero-v3-cta-primary { display: inline-flex; align-items: center; gap: 10px; padding: 17px 28px; border: none; border-radius: 999px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; } .hero-v3-cta-link { display: inline-flex; align-items: center; gap: 10px; color: var(--on-surface); font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; padding: 16px 4px; border-bottom: 1px solid var(--hairline-strong); transition: color var(--duration-fast) var(--ease-expo), border-color var(--duration-fast) var(--ease-expo); } .hero-v3-cta-link:hover { color: var(--primary-container); border-color: var(--hairline-accent); } .hero-v3-cta-link-arrow { transition: transform var(--duration-fast) var(--ease-expo); display: inline-block; } .hero-v3-cta-link:hover .hero-v3-cta-link-arrow { transform: translateX(4px); } /* Trust strip */ .hero-v3-trust { display: flex; align-items: center; gap: 20px; margin-top: 16px; padding-top: 24px; border-top: 1px solid var(--hairline); flex-wrap: wrap; } .hero-v3-trust-stamp { display: inline-flex; align-items: center; gap: 8px; } .hero-v3-trust-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--primary-container); box-shadow: 0 0 8px var(--primary-container); } .hero-v3-trust-sep { width: 1px; height: 16px; background: var(--hairline); } .hero-v3-trust-stars { display: inline-flex; align-items: center; gap: 3px; color: var(--primary-container); } .hero-v3-trust-stars .mono-stamp { color: var(--on-surface-variant); margin-left: 8px; } /* ── Corner stamps ── */ .hero-v3-corner { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; } .hero-v3-corner--bl { left: 56px; bottom: 32px; } .hero-v3-corner-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--primary-container); box-shadow: 0 0 8px var(--primary-container); animation: signal-pulse 2s ease-in-out infinite; } /* ── Scroll indicator ── */ .hero-v3-scroll { position: absolute; right: 56px; bottom: 32px; z-index: 4; display: inline-flex; flex-direction: column; align-items: center; gap: 12px; color: var(--outline); text-decoration: none; transition: color var(--duration-fast) var(--ease-expo); } .hero-v3-scroll:hover { color: var(--on-surface); } .hero-v3-scroll-line { width: 1px; height: 44px; background: linear-gradient(to bottom, var(--hairline-strong), transparent); position: relative; overflow: hidden; } .hero-v3-scroll-line::after { content: ""; position: absolute; left: -1px; top: -20px; width: 3px; height: 20px; background: var(--primary-container); filter: blur(1px); animation: hero-v3-scroll-drop 2.2s ease-in-out infinite; } @keyframes hero-v3-scroll-drop { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(64px); opacity: 0; } } /* ───────────────────────────────────────────────────────── HeroSignal — right-side visualization ───────────────────────────────────────────────────────── */ .hero-v3-vis { position: relative; height: 100%; min-height: 560px; display: flex; align-items: center; justify-content: center; } .hs-frame { position: relative; width: 100%; max-width: 540px; display: flex; flex-direction: column; gap: 18px; perspective: 1200px; } .hs-frame-ticks { position: absolute; inset: -14px; pointer-events: none; } .hs-frame-ticks span { position: absolute; width: 18px; height: 18px; border-color: var(--hairline-strong); border-style: solid; } .hs-frame-ticks span:nth-child(1) { top: 0; left: 0; border-width: 1px 0 0 1px; } .hs-frame-ticks span:nth-child(2) { top: 0; right: 0; border-width: 1px 1px 0 0; } .hs-frame-ticks span:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 1px 1px; } .hs-frame-ticks span:nth-child(4) { bottom: 0; right: 0; border-width: 0 1px 1px 0; } /* Signal card */ .hs-card { position: relative; background: var(--surface-paper); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5), 0 0 0 1px rgba(20,227,156,0.04) inset; } .hs-card::after { content: ""; position: absolute; inset: 0; background-image: var(--noise-url); background-size: 180px 180px; opacity: 0.2; mix-blend-mode: overlay; pointer-events: none; } .hs-card--signal { padding: 18px 20px 16px; transform: rotate(-1.4deg); animation: hs-float-a 8s ease-in-out infinite; } .hs-card--feed { padding: 14px 16px; transform: rotate(1deg) translateX(14px); animation: hs-float-b 9s ease-in-out infinite; animation-delay: -2s; } @keyframes hs-float-a { 0%, 100% { transform: rotate(-1.4deg) translateY(0); } 50% { transform: rotate(-1.4deg) translateY(-8px); } } @keyframes hs-float-b { 0%, 100% { transform: rotate(1deg) translate(14px, 0); } 50% { transform: rotate(1deg) translate(14px, -6px); } } /* Card head */ .hs-card-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--hairline); margin-bottom: 12px; } .hs-card-head-l { display: flex; align-items: center; gap: 10px; } .hs-live-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--primary-container); box-shadow: 0 0 10px var(--primary-container); animation: signal-pulse 1.8s ease-in-out infinite; } .hs-card-url { font-family: var(--font-mono); font-size: 11.5px; color: var(--on-surface); } .hs-caret { color: var(--primary-container); animation: hs-caret-blink 1s steps(2) infinite; } @keyframes hs-caret-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } /* Orbit area */ .hs-orbit { position: relative; aspect-ratio: 420 / 260; width: 100%; } .hs-orbit svg { width: 100%; height: 100%; display: block; } /* Core KPI badge */ .hs-core-kpi { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; } .hs-core-kpi-val { display: inline-flex; align-items: baseline; gap: 2px; font-family: var(--font-heading); font-weight: 700; color: var(--text-heading); letter-spacing: -0.035em; } .hs-core-kpi-delta { font-size: 22px; color: var(--primary-container); } .hs-core-kpi-num { font-size: 44px; line-height: 1; transition: transform 240ms var(--ease-expo), color 240ms var(--ease-expo); } .hs-core-kpi-num.is-tick { color: var(--primary-container); transform: scale(1.04); } .hs-core-kpi-unit { font-size: 18px; color: var(--on-surface-variant); margin-left: 2px; } .hs-core-kpi-spark { width: 80px; height: 16px; } .hs-core-kpi-spark svg { width: 100%; height: 100%; display: block; } /* Card foot */ .hs-card-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--hairline); } .hs-card-foot-time { color: var(--primary-container); } /* Agent feed */ .hs-feed-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--hairline); } .hs-feed-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; } .hs-feed-row { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-xs); font-size: 11.5px; color: var(--on-surface); position: relative; opacity: 0; transform: translateX(-6px); animation: hs-feed-in 0.5s var(--ease-expo) forwards; } @keyframes hs-feed-in { to { opacity: 1; transform: translateX(0); } } .hs-feed-row::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--hairline-strong); border-radius: 1px; } .hs-feed-row.is-crit::before { background: #ff6b6b; } .hs-feed-row.is-warn::before { background: #e5b84b; } .hs-feed-row.is-ok::before { background: var(--primary-container); } .hs-feed-agent { color: var(--outline); font-size: 9.5px; } .hs-feed-msg { color: var(--on-surface); font-family: var(--font-sans); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hs-feed-chip { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; padding: 3px 7px; border-radius: 3px; border: 1px solid currentColor; text-transform: uppercase; } .hs-feed-row.is-crit .hs-feed-chip { color: #ff6b6b; } .hs-feed-row.is-warn .hs-feed-chip { color: #e5b84b; } .hs-feed-row.is-ok .hs-feed-chip { color: var(--primary-container); } /* ── Responsive ── */ @media (max-width: 1100px) { .hero-v3 { padding: 120px 36px 60px; } .hero-v3-inner { gap: 48px; } } @media (max-width: 900px) { .hero-v3-inner { grid-template-columns: 1fr; gap: 56px; padding-top: 48px; } .hero-v3-corner--bl { left: 24px; bottom: 20px; } .hero-v3-scroll { display: none; } .hero-v3 { padding: 120px 24px 48px; } .hs-frame { max-width: 480px; margin: 0 auto; } } @media (prefers-reduced-motion: reduce) { .hero-v3-ambient-glow, .hs-card--signal, .hs-card--feed, .hero-v3-marquee-track, .hero-v3-scroll-line::after, .hs-core-kpi-num { animation: none !important; } } /* ───────────────────────────────────────────────────────── Tension — Section 3 ───────────────────────────────────────────────────────── */ .tension { padding: 160px 48px 180px; } .tension-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 80px; align-items: start; } .tension-headline { margin: 28px 0 32px; } .tension-subhead { max-width: 44ch; } .tension-patterns { padding-top: 64px; position: relative; } .tension-patterns-label { display: block; margin-bottom: 28px; color: var(--outline); } .tension-patterns ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; } .tension-pattern { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--hairline); } .tension-pattern:last-child { border-bottom: 1px solid var(--hairline); } .tension-pattern .idx { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--outline); } .tension-pattern .text { font-family: var(--font-sans); font-size: 18px; line-height: 1.45; color: var(--outline); text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.25); text-decoration-thickness: 1px; text-underline-offset: 3px; } /* ───────────────────────────────────────────────────────── Loop diagram — Section 4 ───────────────────────────────────────────────────────── */ .loop-section { padding: 140px 48px 160px; } .loop-header { max-width: 760px; margin: 0 auto 72px; text-align: center; } .loop-headline { margin: 24px 0 24px; } .loop-subhead { margin: 0 auto; max-width: 58ch; } .loop-stage { position: relative; max-width: 1100px; margin: 0 auto; aspect-ratio: 800 / 620; border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(20,227,156,0.05), transparent 70%), var(--surface-stage); overflow: visible; padding: 0; } .loop-stage-noise { position: absolute; inset: 0; background-image: var(--noise-url); background-size: 180px 180px; opacity: 0.3; mix-blend-mode: overlay; pointer-events: none; } .loop-svg { position: absolute; inset: 40px; width: calc(100% - 80px); height: calc(100% - 80px); display: block; } .loop-labels { position: absolute; inset: 40px; pointer-events: none; } .loop-label { position: absolute; transform: translate(-50%, -50%); } .loop-label-card { pointer-events: auto; background: rgba(13,13,19,0.85); backdrop-filter: blur(6px); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 10px 14px; width: 180px; position: relative; transition: border-color var(--duration-base) var(--ease-expo); } .loop-label-card:hover { border-color: var(--hairline-accent); } .loop-label-card .mono-stamp { display: block; margin-bottom: 6px; } .loop-label-title { font-family: var(--font-sans); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--text-heading); margin: 0 0 4px; } .loop-label-copy { font-family: var(--font-sans); font-size: 13px; line-height: 1.45; color: var(--on-surface-variant); margin: 0; } /* Position nudges so cards don't sit ON the node circles */ .loop-label--top { transform: translate(-50%, -100%); } .loop-label--bottom { transform: translate(-50%, 0); } .loop-label--left { transform: translate(-100%, -50%); } .loop-label--right { transform: translate(0, -50%); } /* ── Live loop counter ── */ .loop-counter { position: absolute; top: 20px; right: 20px; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid var(--hairline); border-radius: 999px; background: rgba(13, 13, 19, 0.7); backdrop-filter: blur(6px); z-index: 2; } .loop-counter-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 8px var(--primary); animation: livePulse 1.2s ease-in-out infinite; } .loop-counter-num { color: var(--text-heading); font-variant-numeric: tabular-nums; } /* ── Central live card ── */ .loop-core { width: 184px; height: 120px; padding: 10px 12px; background: rgba(13,13,19,0.85); border: 1px solid rgba(20,227,156,0.35); border-radius: 4px; box-shadow: 0 0 0 1px rgba(20,227,156,0.08), 0 0 40px rgba(20,227,156,0.08); display: flex; flex-direction: column; gap: 6px; box-sizing: border-box; } .loop-core-top { display: flex; align-items: center; gap: 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.08); } .loop-core-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 6px var(--primary); animation: livePulse 1.2s ease-in-out infinite; flex: none; } .loop-core-url { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--on-surface); } .loop-core-caret { color: var(--primary); margin-left: 1px; animation: coreCaret 1s steps(2) infinite; } @keyframes coreCaret { 50% { opacity: 0; } } .loop-core-metric { display: flex; align-items: baseline; gap: 4px; font-family: var(--font-mono); line-height: 1; } .loop-core-delta { color: var(--primary); font-size: 14px; font-weight: 500; } .loop-core-num { color: var(--text-heading); font-size: 26px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; transition: color .3s ease; } .loop-core-num.is-tick { animation: coreTick 0.9s var(--ease-expo); } @keyframes coreTick { 0% { color: var(--primary); text-shadow: 0 0 12px rgba(20,227,156,0.6); } 100% { color: var(--text-heading); text-shadow: none; } } .loop-core-unit { font-family: var(--font-mono); font-size: 9px; color: var(--outline); letter-spacing: 0.16em; text-transform: uppercase; margin-left: 2px; } .loop-core-spark { height: 18px; margin: -2px 0 2px; } .loop-core-spark svg { width: 100%; height: 100%; display: block; } .loop-core-foot { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.18em; color: var(--outline); text-transform: uppercase; padding-top: 4px; border-top: 1px dashed rgba(255,255,255,0.08); } .loop-core-foot-time { color: var(--primary); } /* ───────────────────────────────────────────────────────── Agent cards — Section 5 ───────────────────────────────────────────────────────── */ .agents-section { padding: 140px 48px 160px; } .agents-header { max-width: 760px; margin: 0 auto 72px; text-align: center; } .agents-headline { margin: 24px 0; } .agents-header .editorial-subhead-lg { margin: 0 auto; } .agents-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .agent-card { padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 20px; min-height: 280px; transition: border-color var(--duration-base) var(--ease-expo), transform var(--duration-base) var(--ease-expo); } .agent-card:hover { border-color: var(--hairline-accent); transform: translateY(-2px); } .agent-card:hover .agent-glyph { transform: scale(1.08); } .agent-card-head { display: flex; align-items: center; justify-content: space-between; } .agent-status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; } .agent-status .status-dot { width: 6px; height: 6px; border-radius: 50%; } .agent-status--live { color: var(--primary); } .agent-status--live .status-dot { background: var(--primary-container); box-shadow: 0 0 8px var(--primary-container); animation: signal-pulse 2.4s var(--ease-expo) infinite; } .agent-status--soon { color: var(--outline); } .agent-status--soon .status-dot { background: transparent; border: 1px solid var(--outline); } .agent-idx { color: var(--outline); } .agent-glyph-frame { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--surface-container-lowest); border: 1px solid var(--hairline); margin-top: 8px; } .agent-glyph { width: 100%; height: 100%; transition: transform var(--duration-base) var(--ease-expo); } .agent-name { font-family: var(--font-sans); font-size: 20px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-heading); margin: 0; margin-top: auto; } .agent-job { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--on-surface-variant); margin: 0; } .agent-card--soon .agent-name { color: var(--on-surface-variant); } .agent-card--soon .agent-glyph-frame { opacity: 0.7; } /* ───────────────────────────────────────────────────────── Walkthroughs — Sections 6/7/8 ───────────────────────────────────────────────────────── */ .walkthrough { padding: 120px 48px; } .wt-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: center; } .walkthrough--text-right .wt-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .wt-text { position: relative; } .wt-title { margin: 24px 0 40px; max-width: 14ch; } .wt-beats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; } .wt-beat { display: grid; grid-template-columns: 40px 1fr; gap: 20px; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--hairline); } .wt-beat:last-child { border-bottom: 1px solid var(--hairline); } .wt-beat-num { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--primary); } .wt-beat-text { font-family: var(--font-sans); font-size: 17px; line-height: 1.45; color: var(--on-surface); } .wt-screen { position: relative; } /* ─── Product screen chrome ─── */ .product-screen { position: relative; background: var(--surface-paper); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 30px 60px -30px rgba(0,0,0,0.7); } .product-screen::after { content: ""; position: absolute; inset: 0; background-image: var(--noise-url); background-size: 200px 200px; opacity: 0.25; mix-blend-mode: overlay; pointer-events: none; } .product-screen-chrome { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: var(--surface-stage); border-bottom: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 11px; color: var(--outline); } .chrome-traffic { display: inline-flex; gap: 6px; } .chrome-traffic span { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.3); } .chrome-traffic .tl--r { background: #ff5f57; } .chrome-traffic .tl--y { background: #ffbd2e; } .chrome-traffic .tl--g { background: #28c940; } .chrome-url { display: inline-flex; align-items: center; gap: 8px; flex: 1; background: var(--surface-container-lowest); border: 1px solid var(--hairline); border-radius: 6px; padding: 5px 12px; color: var(--on-surface-variant); font-size: 11px; letter-spacing: 0.04em; } .chrome-url-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary-container); box-shadow: 0 0 6px var(--primary-container); } .chrome-spacer { flex: 0 0 auto; } .product-screen-body { position: relative; min-height: 360px; background: var(--surface-paper); z-index: 1; } /* ─── Audit screen ─── */ .ps-audit { display: grid; grid-template-columns: 170px 1fr; min-height: 420px; } .ps-audit-sidebar { background: var(--surface-stage); border-right: 1px solid var(--hairline); padding: 16px 0; } .ps-side-head { padding: 4px 16px 12px; color: var(--outline); } .ps-side-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; font-family: var(--font-sans); font-size: 13px; color: var(--on-surface-variant); border-left: 2px solid transparent; transition: background var(--duration-fast) var(--ease-expo); } .ps-side-item.active { color: var(--text-heading); background: var(--surface-paper); border-left-color: var(--primary-container); } .ps-side-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--outline); } .ps-side-item.active .ps-side-dot { background: var(--primary-container); box-shadow: 0 0 6px var(--primary-container); } .ps-audit-main { padding: 20px; display: flex; flex-direction: column; gap: 16px; } .ps-audit-head { display: flex; justify-content: space-between; align-items: center; } .ps-audit-head h4 { font-family: var(--font-sans); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; color: var(--text-heading); margin: 6px 0 0; } .ps-pill { height: 34px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--hairline-strong); background: var(--surface-container-lowest); color: var(--on-surface); font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: all var(--duration-fast) var(--ease-expo); } .ps-pill:hover { border-color: var(--primary-container); color: var(--primary); } .ps-pill--primary { background: var(--primary-container); color: var(--on-primary-container); border-color: var(--primary-container); } .ps-pill--primary:hover { color: var(--on-primary-container); background: var(--primary); border-color: var(--primary); } .ps-pill--ghost { background: transparent; } .ps-audit-rows { display: flex; flex-direction: column; } .ps-audit-row { display: grid; grid-template-columns: 12px 120px 1fr 60px; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--hairline); font-family: var(--font-sans); font-size: 13px; } .ps-audit-row:first-child { border-top: 0; } .ps-sev { width: 8px; height: 8px; border-radius: 50%; } .ps-sev--high { background: var(--error); } .ps-sev--med { background: var(--warning); } .ps-sev--low { background: var(--tertiary); } .ps-path { font-family: var(--font-mono); font-size: 11px; color: var(--on-surface-variant); } .ps-title { color: var(--on-surface); } .ps-score { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--text-heading); text-align: right; } .ps-score-total { color: var(--outline); font-weight: 400; font-size: 11px; } /* ─── Fix screen ─── */ .ps-fix { padding: 24px; display: flex; flex-direction: column; gap: 20px; min-height: 420px; } .ps-fix-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; } .ps-fix-head h4 { font-family: var(--font-sans); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; color: var(--text-heading); margin: 6px 0 0; } .ps-fix-actions { display: flex; gap: 8px; } .ps-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .ps-diff-col { display: flex; flex-direction: column; gap: 10px; } .ps-diff-box { border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 14px; background: var(--surface-container-lowest); font-family: var(--font-mono); font-size: 12px; line-height: 1.55; color: var(--on-surface); min-height: 120px; position: relative; } .ps-diff-box--before { border-color: rgba(255, 180, 171, 0.22); } .ps-diff-box--after { border-color: var(--hairline-accent); background: rgba(20,227,156,0.04); } .ps-diff-tag { display: inline-block; font-family: var(--font-mono); font-size: 10px; color: var(--outline); margin-bottom: 6px; letter-spacing: 0.1em; } .ps-diff-box p { margin: 0; font-family: var(--font-sans); color: var(--on-surface); font-size: 13px; line-height: 1.5; } .ps-redact { color: var(--outline); font-style: italic; } .ps-fix-foot { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 1px solid var(--hairline); } .ps-fix-target { font-family: var(--font-mono); font-size: 12px; color: var(--primary); } /* ─── Track screen ─── */ .ps-track { padding: 24px; display: flex; flex-direction: column; gap: 20px; min-height: 420px; } .ps-track-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; } .ps-track-head h4 { font-family: var(--font-sans); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; color: var(--text-heading); margin: 6px 0 0; max-width: 22ch; } .ps-track-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .ps-metric { background: var(--surface-container-lowest); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 16px; display: flex; flex-direction: column; gap: 10px; position: relative; } .ps-metric-row { display: flex; justify-content: space-between; align-items: baseline; } .ps-metric-val { font-family: var(--font-sans); font-weight: 600; font-size: 22px; letter-spacing: -0.025em; color: var(--text-heading); } .ps-delta { font-family: var(--font-mono); font-size: 12px; color: var(--outline); } .ps-delta--pos { color: var(--primary); } .ps-metric-spark { opacity: 0.9; } /* ───────────────────────────────────────────────────────── Integrations — Section 9 ───────────────────────────────────────────────────────── */ .integrations { padding: 140px 48px; background: var(--surface-stage); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); max-width: none; } .integrations-header { max-width: 1240px; margin: 0 auto 64px; } .integrations-headline { margin: 20px 0 0; } .integrations-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .int-tile { padding: 20px; display: flex; align-items: center; gap: 16px; min-height: 84px; transition: border-color var(--duration-base) var(--ease-expo); } .int-tile:hover { border-color: var(--hairline-accent); } .int-tile-glyph { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--surface-container-lowest); border: 1px solid var(--hairline); border-radius: var(--radius-sm); color: var(--on-surface-variant); flex: 0 0 auto; } .int-tile--live .int-tile-glyph { color: var(--primary); border-color: var(--hairline-accent); } .int-tile-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .int-tile-name { font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--text-heading); } .int-tile-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; } .int-tile-status .status-dot { width: 5px; height: 5px; border-radius: 50%; } .int-tile-status--live { color: var(--primary); } .int-tile-status--live .status-dot { background: var(--primary-container); box-shadow: 0 0 6px var(--primary-container); } .int-tile-status--soon { color: var(--outline); } .int-tile-status--soon .status-dot { background: transparent; border: 1px solid var(--outline); } /* ───────────────────────────────────────────────────────── Three steps — Section 10 (the clock, minimal) ───────────────────────────────────────────────────────── */ .three-steps { padding: 180px 48px 160px; max-width: 1320px; } .steps-header { max-width: 820px; margin: 0 auto 140px; text-align: center; display: flex; flex-direction: column; gap: 20px; align-items: center; } .steps-headline { margin: 0; } /* ── Rail ── */ .hour-rail { position: relative; padding: 0 48px; } .rail-line { position: absolute; top: 60px; left: 48px; right: 48px; height: 1px; background: var(--hairline); pointer-events: none; } .rail-progress { position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: linear-gradient(90deg, transparent 0, var(--primary) 8%, var(--primary) 92%, transparent 100%); opacity: 0; animation: railSweep 5s var(--ease-expo) infinite; transform-origin: left center; } @keyframes railSweep { 0% { transform: scaleX(0); opacity: 0; } 15% { opacity: 0.55; } 70% { transform: scaleX(1); opacity: 0.4; } 100% { transform: scaleX(1); opacity: 0; } } .rail-endcap { position: absolute; top: -28px; color: var(--outline); font-size: 10px; white-space: nowrap; } .rail-endcap--l { left: 0; } .rail-endcap--r { right: 0; } /* ── Moments ── */ .moments { position: relative; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .moment { position: relative; padding-top: 100px; display: flex; flex-direction: column; gap: 12px; text-align: left; } .moment-peg { position: absolute; top: 54px; left: 0; width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; } .peg-ring { position: absolute; inset: -6px; border: 1px solid var(--hairline-accent); border-radius: 50%; animation: pegPulse 2.6s var(--ease-expo) infinite; } .peg-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 12px rgba(20,227,156,0.6); } @keyframes pegPulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.6); opacity: 0; } } .moment-time { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--outline); display: inline-flex; align-items: baseline; gap: 10px; margin-top: 16px; } .moment-time-num { font-size: 56px; font-weight: 500; letter-spacing: -0.02em; color: var(--text-heading); line-height: 1; font-variant-numeric: tabular-nums; text-transform: none; } .moment-title { font-family: var(--font-sans); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--text-heading); margin: 12px 0 0; line-height: 1.1; } .moment-copy { font-family: var(--font-sans); font-size: 15px; line-height: 1.55; color: var(--on-surface-variant); margin: 4px 0 0; max-width: 32ch; } @media (max-width: 900px) { .moments { grid-template-columns: 1fr; gap: 64px; } .rail-line { display: none; } .moment { padding-top: 0; } .moment-peg { position: static; margin-bottom: 16px; } } /* ───────────────────────────────────────────────────────── Pricing teaser — Section 11 ───────────────────────────────────────────────────────── */ .pricing-teaser { position: relative; padding: 140px 48px 160px; max-width: none; } .pricing-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 980px; height: 620px; background: radial-gradient(ellipse 50% 40% at 50% 50%, rgba(20,227,156,0.11), transparent 70%); pointer-events: none; } .pricing-shell { position: relative; max-width: 1240px; margin: 0 auto; } .pricing-top { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; } .pricing-rule { flex: 1; height: 1px; background: var(--hairline); } .pricing-stamp { color: var(--outline); white-space: nowrap; } .pricing-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: stretch; } /* LEFT — pitch */ .pricing-pitch { padding: 56px 56px 48px 0; display: flex; flex-direction: column; gap: 24px; } .pricing-headline { margin: 0; } .pricing-sub { max-width: 48ch; margin: 0; } .pricing-includes { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 10px; } .pricing-includes li { display: flex; align-items: center; gap: 12px; font-family: var(--font-sans); font-size: 15px; color: var(--on-surface); } .pricing-includes .tick { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid var(--hairline-accent); border-radius: 50%; font-size: 10px; color: var(--primary); flex: 0 0 auto; } .pricing-ctas { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 12px; } /* RIGHT — ledger receipt */ .pricing-ledger { padding: 32px 32px 28px; display: flex; flex-direction: column; gap: 24px; background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 40%), var(--surface-paper); } .ledger-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 16px; border-bottom: 1px solid var(--hairline); } .ledger-rows { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; } .ledger-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px dashed var(--hairline); font-family: var(--font-sans); } .ledger-row:last-child { border-bottom: 0; } .lr-label { font-size: 14.5px; color: var(--on-surface-variant); display: inline-flex; align-items: center; gap: 10px; } .lr-value { font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--on-surface); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; } .lr-unit { color: var(--outline); font-weight: 400; margin-left: 2px; } .ledger-row--sum { padding-top: 20px; margin-top: 4px; border-top: 1px solid var(--hairline); border-bottom: 0; } .ledger-row--sum .lr-label { color: var(--outline); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-family: var(--font-mono); } .lr-strike { color: var(--outline); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--outline); } .ledger-row--delta { padding: 20px 0 8px; border-top: 1px solid var(--hairline-accent); } .ledger-row--delta .lr-label { color: var(--text-heading); font-weight: 500; font-size: 16px; letter-spacing: -0.01em; } .delta-tick { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 10px var(--primary); display: inline-block; } .lr-delta { color: var(--primary); font-family: var(--font-serif); font-style: italic; font-size: 22px; font-weight: 400; letter-spacing: -0.02em; } .ledger-foot { padding-top: 16px; border-top: 1px solid var(--hairline); } @media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } .pricing-pitch { padding: 0 0 8px; } } /* ───────────────────────────────────────────────────────── FAQ — Section 12 ───────────────────────────────────────────────────────── */ .faq { padding: 140px 48px; } .faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 96px; align-items: start; } .faq-head { position: sticky; top: 80px; } .faq-headline { margin: 20px 0 16px; } .faq-contact { color: var(--primary); text-decoration: none; border-bottom: 1px solid var(--hairline-accent); transition: color var(--duration-fast) var(--ease-expo); } .faq-contact:hover { color: var(--primary-container); } .faq-list { list-style: none; padding: 0; margin: 0; } .faq-item { border-top: 1px solid var(--hairline); } .faq-item:last-child { border-bottom: 1px solid var(--hairline); } .faq-q { width: 100%; background: none; border: 0; padding: 24px 0; display: grid; grid-template-columns: 40px 1fr 24px; align-items: center; gap: 20px; cursor: pointer; text-align: left; color: var(--on-surface); font-family: var(--font-sans); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; transition: color var(--duration-fast) var(--ease-expo); } .faq-q:hover { color: var(--text-heading); } .faq-q-num { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; color: var(--outline); text-transform: uppercase; } .faq-q-toggle { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--on-surface-variant); transition: transform var(--duration-base) var(--ease-expo), color var(--duration-fast) var(--ease-expo); } .faq-item--open .faq-q-toggle { transform: rotate(45deg); color: var(--primary); } .faq-a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-slow) var(--ease-expo); } .faq-item--open .faq-a-wrap { grid-template-rows: 1fr; } .faq-a-wrap > .faq-a { overflow: hidden; } .faq-a { margin: 0 0 0 60px; padding-bottom: 24px; font-family: var(--font-sans); font-size: 15px; line-height: 1.6; color: var(--on-surface-variant); max-width: 58ch; text-wrap: pretty; } /* ───────────────────────────────────────────────────────── Final CTA — Section 13 ───────────────────────────────────────────────────────── */ .final-cta { position: relative; padding: 180px 48px 200px; max-width: none; background: var(--surface-stage); border-top: 1px solid var(--hairline); text-align: center; overflow: hidden; } .final-cta-seal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 560px; height: 560px; opacity: 0.5; pointer-events: none; } .final-cta-seal svg { width: 100%; height: 100%; } .final-cta-body { position: relative; max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 28px; } .final-cta-headline { margin: 8px 0 4px; } .final-cta-body .editorial-subhead-lg { text-align: center; margin: 0 auto; } .final-cta-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: center; margin-top: 12px; } /* ───────────────────────────────────────────────────────── Footer ───────────────────────────────────────────────────────── */ .marketing-footer { background: var(--surface-canvas); border-top: 1px solid var(--hairline); padding: 72px 48px 32px; } .footer-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: 64px; padding-bottom: 48px; border-bottom: 1px solid var(--hairline); } .footer-brand { display: flex; flex-direction: column; gap: 16px; } .footer-brand .wordmark { font-size: 24px; } .footer-tagline { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--on-surface-variant); margin: 0; max-width: 28ch; } .footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .footer-col-head { display: block; margin-bottom: 16px; color: var(--outline); } .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .footer-col a { color: var(--on-surface-variant); text-decoration: none; font-family: var(--font-sans); font-size: 13.5px; transition: color var(--duration-fast) var(--ease-expo); } .footer-col a:hover { color: var(--primary); } .footer-strip { max-width: 1240px; margin: 0 auto; padding: 24px 0 0; display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; } .footer-socials { display: flex; gap: 20px; } .footer-social { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--outline); text-decoration: none; transition: color var(--duration-fast) var(--ease-expo); } .footer-social:hover { color: var(--primary); } /* ============================================================ SCROLL REVEAL — primitives + section effects ============================================================ */ .reveal { opacity: 0; transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms), transform 900ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms), filter 900ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms); will-change: opacity, transform, filter; } .reveal--up { transform: translate3d(0, 32px, 0); } .reveal--down { transform: translate3d(0, -32px, 0); } .reveal--right { transform: translate3d(-36px, 0, 0); } .reveal--left { transform: translate3d(36px, 0, 0); } .reveal--scale { transform: scale(0.92); } .reveal--blur { filter: blur(16px); opacity: 0; } .reveal--tilt { transform: perspective(1200px) rotateX(14deg) translate3d(0, 40px, 0); transform-origin: 50% 100%; } .reveal--rise { transform: translate3d(0, 60px, 0) scale(0.96); filter: blur(6px); } .reveal--clip { clip-path: inset(100% 0 0 0); transform: translate3d(0, 24px, 0); } .reveal--mask { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 0%, transparent 0%); mask-image: linear-gradient(180deg, #000 0%, #000 0%, transparent 0%); -webkit-mask-size: 100% 200%; mask-size: 100% 200%; -webkit-mask-position: 0 100%; mask-position: 0 100%; transition: opacity 1000ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms), -webkit-mask-position 1200ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms), mask-position 1200ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms); } .reveal.is-in { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0); -webkit-mask-position: 0 0; mask-position: 0 0; } /* ── Scroll progress bar (top of page) ── */ .scroll-progress { position: fixed; top: var(--nav-height); left: 0; right: 0; height: 2px; z-index: 49; pointer-events: none; background: transparent; } .scroll-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, transparent 0%, var(--primary-container) 30%, var(--primary) 70%, transparent 100%); box-shadow: 0 0 12px rgba(20,227,156,0.5); transition: width 80ms linear; } /* ── Nav condense on scroll ── */ .marketing-nav { transition: transform 360ms var(--ease-expo); } /* Nav stays fully opaque — see main .marketing-nav rule for why we removed the translucent/backdrop-filter treatment. */ /* Hero transitions respected by parallax block below */ .hero-v3-ambient, .hero-v3-vis, .hero-v3-copy { transition: opacity 400ms linear; } /* TENSION — each pattern strikes through on reveal */ .tension-pattern.reveal .text { text-decoration: none; background-image: linear-gradient(to right, var(--outline), var(--outline)); background-repeat: no-repeat; background-position: 0 60%; background-size: 0% 1px; transition: background-size 700ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--reveal-delay, 0ms) + 300ms); } .tension-pattern.reveal.is-in .text { background-size: 100% 1px; } .tension-pattern.reveal.is-in .idx { color: var(--primary-container); transition: color 500ms var(--ease-expo) calc(var(--reveal-delay, 0ms) + 200ms); } /* LOOP — orbit scales in + rings draw */ .loop-stage.reveal { transform: translate3d(0, 48px, 0) scale(0.96); filter: blur(6px); transform-origin: 50% 60%; } .loop-stage.reveal.is-in { transform: none; filter: none; } .loop-stage .loop-svg path, .loop-stage .loop-svg circle, .loop-stage .loop-svg line { transition: stroke-dashoffset 1800ms cubic-bezier(0.16, 1, 0.3, 1) 300ms, opacity 600ms var(--ease-expo) 300ms; } /* AGENT CARDS — 3D tilt-in stagger */ .agents-grid { perspective: 1400px; } .agents-grid > .agent-card.reveal { transform: perspective(1400px) rotateX(18deg) translate3d(0, 50px, 0); transform-origin: 50% 100%; opacity: 0; filter: blur(4px); } .agents-grid > .agent-card.reveal.is-in { transform: none; filter: none; opacity: 1; } /* WALKTHROUGH — product screen slides in from opposite side */ .wt-screen.reveal { transform: translate3d(60px, 30px, 0) scale(0.95); opacity: 0; filter: blur(6px); } .walkthrough--text-right .wt-screen.reveal { transform: translate3d(-60px, 30px, 0) scale(0.95); } .wt-screen.reveal.is-in { transform: none; filter: none; opacity: 1; } /* INTEGRATIONS — tiles pop from bottom (stagger handled by JS) */ .integrations-grid > .int-tile.reveal { transform: translate3d(0, 28px, 0) scale(0.94); opacity: 0; } .integrations-grid > .int-tile.reveal.is-in { transform: none; opacity: 1; } /* THREE STEPS — moments light up along the rail */ .moment.reveal { opacity: 0; transform: translate3d(0, 40px, 0); } .moment.reveal .peg-dot { background: var(--hairline-strong); box-shadow: none; transition: background 600ms var(--ease-expo) calc(var(--reveal-delay, 0ms) + 200ms), box-shadow 600ms var(--ease-expo) calc(var(--reveal-delay, 0ms) + 200ms); } .moment.reveal.is-in { opacity: 1; transform: none; } .moment.reveal.is-in .peg-dot { background: var(--primary); box-shadow: 0 0 12px rgba(20,227,156,0.6); } /* Rail line draws as you scroll */ .hour-rail-track { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .hour-rail-track-fill { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: linear-gradient(90deg, var(--primary-container) 0%, var(--primary) 50%, var(--primary-container) 100%); transform-origin: left center; transform: scaleX(var(--rail-progress, 0)); transition: transform 140ms linear; box-shadow: 0 0 8px rgba(20,227,156,0.5); } /* PRICING — ledger rows tally in */ .pricing-includes > li.reveal { opacity: 0; transform: translate3d(-16px, 0, 0); } .pricing-includes > li.reveal.is-in { opacity: 1; transform: none; } .ledger-rows > .ledger-row.reveal { opacity: 0; transform: translate3d(0, 12px, 0); } .ledger-rows > .ledger-row.reveal.is-in { opacity: 1; transform: none; } /* FAQ — rows swipe in with a clip-path wipe */ .faq-list > .faq-item.reveal { opacity: 0; transform: translate3d(24px, 0, 0); clip-path: inset(0 0 0 100%); } .faq-list > .faq-item.reveal.is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms), transform 700ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms), clip-path 900ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms); } /* FINAL CTA — huge text rises with blur mask release */ .final-cta .final-cta-headline.reveal { opacity: 0; transform: translate3d(0, 80px, 0) scale(0.94); filter: blur(18px); } .final-cta .final-cta-headline.reveal.is-in { opacity: 1; transform: none; filter: none; transition: opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1), transform 1400ms cubic-bezier(0.16, 1, 0.3, 1), filter 1200ms cubic-bezier(0.16, 1, 0.3, 1); } /* Section eyebrow — rule animates in on reveal */ .section-eyebrow.reveal.is-in::before { animation: eyebrow-rule 700ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms) both; } @keyframes eyebrow-rule { from { width: 0; } to { width: 20px; } } @media (prefers-reduced-motion: reduce) { .reveal, .reveal.is-in, .scroll-progress-bar, .hour-rail-track-fill { transition: none !important; transform: none !important; filter: none !important; opacity: 1 !important; clip-path: none !important; -webkit-mask-image: none !important; mask-image: none !important; } } /* HERO — scroll-driven parallax (uses --hero-progress 0..1) */ .hero-v3-ambient-glow { transform: translate3d(0, calc(var(--hero-progress, 0) * -140px), 0) scale(calc(1 + var(--hero-progress, 0) * 0.12)); } .hero-v3-ambient-grid { transform: translate3d(0, calc(var(--hero-progress, 0) * 80px), 0); } .hero-v3-vis { transform: translate3d(0, calc(var(--hero-progress, 0) * -60px), 0); opacity: calc(1 - var(--hero-progress, 0) * 0.7); } .hero-v3-copy { transform: translate3d(0, calc(var(--hero-progress, 0) * -30px), 0); opacity: calc(1 - var(--hero-progress, 0) * 0.7); } .hero-v3-marquee { opacity: calc(1 - var(--hero-progress, 0) * 0.9); } /* Pricing glow drifts with scroll */ .pricing-glow { transform: translate(-50%, calc(-50% + (var(--scroll-progress, 0) - 0.5) * 60px)); } .wt-beat-num { transition: color 300ms var(--ease-expo); } .wt-beat:hover .wt-beat-num { color: var(--primary-container); } @media (prefers-reduced-motion: reduce) { .hero-v3-ambient-glow, .hero-v3-ambient-grid, .hero-v3-vis, .hero-v3-copy, .hero-v3-marquee, .pricing-glow { transform: none !important; opacity: 1 !important; } } /* ============================================================ v1 polish — applied 2026-04-19 Covers WP-rendering edge cases + feedback from first live test. ============================================================ */ /* Kill browser default underlines on every link inside the marketing surface. Links that need a visual mark (e.g. faq-contact) set their own border-bottom. */ .marketing-page a, .marketing-body a { text-decoration: none; } .marketing-page a:hover, .marketing-page a:focus-visible { text-decoration: none; } /* Tension patterns label — the `.tension-patterns-label` override used `display: block`, which disabled the flex that centers the green prefix line. Restore inline-flex + keep the margin. */ .tension-patterns-label { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px; } /* Hero top padding was 140px — too tall on most laptop viewports. Tighten so the headline + CTA row stay above the fold. */ .hero-v3 { padding-top: 96px; padding-bottom: 0; } @media (max-width: 1024px) { .hero-v3 { padding-top: 84px; } } @media (max-width: 640px) { .hero-v3 { padding-top: 72px; } } /* ============================================================ Mobile + tablet responsiveness Target breakpoints: < 640px phone < 1024px tablet + narrow laptop Strategy: collapse multi-col grids to 1-2 cols, scale editorial headlines, swap nav for a hamburger drawer, simplify the most complex visuals (loop-diagram labels, product-screen grids). ============================================================ */ /* Mobile nav toggle — hidden on desktop */ .nav-mobile-toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; width: 44px; height: 44px; flex-direction: column; justify-content: center; align-items: center; gap: 4px; } .nav-mobile-toggle span { display: block; width: 20px; height: 1.5px; background: var(--on-surface); border-radius: 2px; transition: transform var(--duration-base) var(--ease-expo), opacity var(--duration-fast) var(--ease-expo); } .nav-mobile-open .nav-mobile-toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } .nav-mobile-open .nav-mobile-toggle span:nth-child(2) { opacity: 0; } .nav-mobile-open .nav-mobile-toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } /* ────────────────── TABLET (< 1024px) ────────────────── */ @media (max-width: 1024px) { .section { padding: 84px 32px; } .marketing-generated-page { padding-top: 88px; padding-bottom: 88px; } /* Hero stacks vertically */ .hero-v3 { padding: 84px 32px 0; } .hero-v3-inner { grid-template-columns: 1fr; gap: 56px; } .hero-v3-vis { max-width: 640px; margin: 0 auto; width: 100%; } .hero-v3-headline { font-size: clamp(48px, 8vw, 80px); } .hero-v3-scroll { display: none; } /* Tension — single column */ .tension { padding: 100px 32px; } .tension-grid { grid-template-columns: 1fr; gap: 56px; } /* Agents — 2 cols */ .agents-grid { grid-template-columns: repeat(2, 1fr); } /* Integrations — 3 cols */ .integrations { padding: 100px 32px; } .integrations-grid { grid-template-columns: repeat(3, 1fr); } /* Walkthroughs — always stack, screen above text */ .walkthrough { padding: 96px 32px; } .walkthrough .wt-grid, .walkthrough--text-right .wt-grid { grid-template-columns: 1fr; gap: 40px; } .walkthrough .wt-text, .walkthrough--text-right .wt-text { order: 2; } .walkthrough .wt-screen, .walkthrough--text-right .wt-screen { order: 1; } /* Pricing — already has 900px rule; extend here */ .pricing-teaser { padding: 100px 32px; } /* FAQ — stack, unpin the header */ .faq { padding: 100px 32px; } .faq-grid { grid-template-columns: 1fr; gap: 48px; } .faq-head { position: static; } /* Final CTA + loop */ .final-cta { padding: 120px 32px 140px; } .loop-section { padding: 100px 32px 120px; } /* Footer — stack the outer brand/cols split */ .marketing-footer { padding: 56px 32px 24px; } .footer-inner { grid-template-columns: 1fr; gap: 40px; padding-bottom: 40px; } .footer-cols { grid-template-columns: repeat(4, 1fr); gap: 24px; } } /* ────────────────── PHONE (< 640px) ────────────────── */ @media (max-width: 640px) { /* Nav becomes hamburger */ .marketing-nav { padding: 0 20px; gap: 0; } .nav-mobile-toggle { display: inline-flex; margin-left: auto; } .nav-spacer-mk { display: none; } .nav-signin { display: none; } .nav-cta { padding: 0 14px; height: 32px; font-size: 13px; } .nav-links { position: fixed; top: var(--nav-height); left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--surface-canvas); padding: 16px 20px 24px; margin-left: 0; border-bottom: 1px solid var(--hairline); z-index: 40; transform: translateY(-12px); opacity: 0; pointer-events: none; transition: transform var(--duration-base) var(--ease-expo), opacity var(--duration-base) var(--ease-expo); } .nav-mobile-open .nav-links { transform: translateY(0); opacity: 1; pointer-events: auto; } .nav-link-mk { font-size: 18px; padding: 14px 0; width: 100%; border-bottom: 1px solid var(--hairline); } .nav-link-mk:last-child { border-bottom: 0; } .nav-link-mk::after { display: none; } /* Section padding tightened */ .section { padding: 72px 20px; } .marketing-generated-page { padding-top: 76px; padding-bottom: 76px; } /* Hero */ .hero-v3 { padding: 72px 20px 0; } .hero-v3-inner { gap: 40px; } .hero-v3-headline { font-size: clamp(36px, 11vw, 56px); } .hero-v3-subhead { font-size: 16px; } .hero-v3-ctas { flex-direction: column; align-items: stretch; gap: 16px; } .hero-v3-cta-primary { width: 100%; justify-content: center; } .hero-v3-cta-link { justify-content: center; } .hero-v3-marquee { font-size: 10px; } /* Tension — single col, stricken items hand-drawn but smaller */ .tension-pattern .text { font-size: 16px; } .tension-pattern { grid-template-columns: 28px 1fr; gap: 12px; padding: 18px 0; } .editorial-headline--xl { font-size: clamp(32px, 9vw, 48px); } .editorial-headline--lg { font-size: clamp(28px, 7vw, 42px); } /* Loop diagram — hide label cards on phone, they collide. Keep orbit. */ .loop-section { padding: 80px 20px 96px; } .loop-header { margin-bottom: 48px; } .loop-stage { aspect-ratio: 1 / 1; border-radius: var(--radius); } .loop-labels { display: none; } .loop-counter { top: 12px; right: 12px; padding: 6px 10px; gap: 6px; } .loop-core { width: 140px; height: 96px; padding: 8px 10px; } .loop-core-num { font-size: 20px; } /* Agent cards — single column */ .agents-section { padding: 80px 20px; } .agents-grid { grid-template-columns: 1fr; gap: 16px; } .agent-card { min-height: 0; padding: 22px; } /* Walkthroughs */ .walkthrough { padding: 72px 20px; } .wt-title { max-width: none; } .wt-beat-text { font-size: 15px; } /* Product screens on phone — strip sidebar + compress diff */ .ps-audit { grid-template-columns: 1fr; min-height: 0; } .ps-audit-sidebar { display: none; } .ps-audit-main { padding: 16px; } .ps-audit-row { grid-template-columns: 10px 90px 1fr 50px; gap: 10px; font-size: 12px; } .ps-diff { grid-template-columns: 1fr; gap: 12px; } .ps-fix, .ps-track { padding: 16px; } .ps-fix-head, .ps-track-head { flex-direction: column; align-items: flex-start; gap: 12px; } .ps-track-grid { grid-template-columns: 1fr; } .product-screen-chrome { padding: 10px 12px; gap: 12px; } /* Hero signal card — tighten */ .hs-frame { gap: 12px; } .hs-card { padding: 14px; } .hs-orbit svg { height: auto; } .hs-core-kpi-num { font-size: 34px; } .hs-feed-row { gap: 8px; font-size: 11px; } /* Integrations — 2 cols */ .integrations { padding: 80px 20px; } .integrations-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .int-tile { padding: 14px; min-height: 72px; } .int-tile-glyph { width: 36px; height: 36px; } .int-tile-name { font-size: 14px; } /* Three-steps already has 900px stacking rule */ .three-steps { padding: 100px 20px; } .steps-header { margin-bottom: 72px; } .moment-time-num { font-size: 40px; } /* Pricing — ledger rows can't be wider than screen */ .pricing-teaser { padding: 80px 20px; } .pricing-pitch { padding: 0; } .pricing-ledger { padding: 24px; } .ledger-head { gap: 8px; flex-wrap: wrap; } .lr-delta { font-size: 18px; } .pricing-ctas { flex-direction: column; align-items: stretch; gap: 12px; } .pricing-ctas .btn-primary-lg { width: 100%; justify-content: center; } .pricing-ctas .btn-ghost-lg { text-align: center; } /* FAQ */ .faq-q { grid-template-columns: 28px 1fr 20px; gap: 10px; font-size: 16px; padding: 18px 0; } .faq-a { margin-left: 38px; font-size: 14px; } /* Final CTA */ .final-cta { padding: 100px 20px 120px; } .final-cta-seal { width: 320px; height: 320px; opacity: 0.35; } .final-cta-row { flex-direction: column; align-items: stretch; gap: 16px; } .final-cta-row .btn-primary-lg { width: 100%; justify-content: center; } /* Footer */ .marketing-footer { padding: 48px 20px 20px; } .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 24px; } .footer-col a { font-size: 13px; } .footer-strip { flex-direction: column; align-items: flex-start; gap: 16px; } } /* Very small phones — tiny extra tighten */ @media (max-width: 380px) { .section { padding: 64px 16px; } .marketing-generated-page { padding-top: 68px; padding-bottom: 68px; } .hero-v3 { padding: 64px 16px 0; } .integrations-grid { grid-template-columns: 1fr; } } /* ============================================================ 100% mobile polish — second pass Covers: touch targets (44×44 min), iOS 100vh quirk, safe-area insets for notched iPhones, smooth anchor scroll with nav offset, tap-highlight cleanup, reduced-motion respect, and marquee edge fade. ============================================================ */ /* Global: prevent horizontal scroll, smooth anchor nav, kill iOS text-size auto-inflation, remove the gray tap flash. */ html { scroll-behavior: smooth; /* Anchor-click lands past the fixed nav + 8px visual breathing room. */ scroll-padding-top: var(--content-top-offset); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body.marketing-body, .marketing-page { overflow-x: hidden; max-width: 100vw; } .marketing-page *, .marketing-body * { -webkit-tap-highlight-color: transparent; } /* iOS 100vh bug — use dynamic viewport height where supported. */ .hero-v3 { min-height: 100vh; /* legacy fallback */ min-height: 100dvh; /* correct on iOS 16+/Android */ } /* Safe-area padding for notched iPhones (iOS 11+). */ .marketing-nav { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); } .marketing-footer { padding-bottom: max(20px, env(safe-area-inset-bottom)); } /* Marquee edge fade so text doesn't hard-cut on narrow screens. */ .hero-v3-marquee-track { mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%); } /* Respect user's motion preference — pause the expensive stuff. */ @media (prefers-reduced-motion: reduce) { .hero-v3-marquee-track, .rail-progress, .hs-live-dot, .loop-counter-dot, .loop-core-dot, .peg-ring, .hs-caret, .loop-core-caret, .agent-status--live .status-dot, .int-tile-status--live .status-dot { animation: none !important; } svg animate, svg animateMotion, svg animateTransform { animation-play-state: paused; } html { scroll-behavior: auto; } } /* ────────────────── PHONE overrides (refined) ────────────────── */ @media (max-width: 640px) { /* Nav CTA: tappable size (40px meets Android, 44px preferred) */ .nav-cta { height: 40px; padding: 0 14px; font-size: 13px; } /* Hero signal card gets real minimum height so the orbit renders */ .hs-orbit { aspect-ratio: 420 / 240; } /* CTA buttons keep 44+px touch area even with mobile font sizes */ .btn-primary-lg, .hero-v3-cta-primary { min-height: 48px; height: auto; padding: 12px 22px; } .btn-ghost-lg, .hero-v3-cta-link { min-height: 44px; padding: 12px 0; } /* FAQ email link — tappable target */ .faq-contact { display: inline-block; padding: 6px 0; } /* Pricing rows are long — allow value to wrap if needed */ .ledger-row { grid-template-columns: 1fr auto; gap: 12px; } .lr-value { white-space: normal; text-align: right; } /* Hero signal: full width of column on phone */ .hero-v3-vis { max-width: 100%; } /* The hero "scroll" indicator is decorative — hide on phones */ .hero-v3-scroll { display: none; } /* Loop counter text is small + mono — keep it visible */ .loop-counter .mono-stamp { font-size: 9px; } /* Agent feed rows — make sure text doesn't overflow */ .hs-feed-msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hs-feed-agent { flex: 0 0 auto; } .hs-feed-chip { flex: 0 0 auto; } } /* ============================================================ Three-steps mobile: vertical timeline layout Rebuilds the section for <900px so it reads as a clock going top-to-bottom instead of flat stacked blocks. ============================================================ */ @media (max-width: 900px) { .three-steps { padding: 80px 24px 96px; } .steps-header { margin: 0 auto 56px; } .steps-headline { font-size: clamp(28px, 7vw, 42px); } .hour-rail { padding: 0; } .rail-line { display: none; } .moments { grid-template-columns: 1fr; gap: 0; max-width: 440px; margin: 0 auto; position: relative; } .moment { position: relative; padding: 0 0 48px 44px; text-align: left; min-height: 0; } .moment:last-child { padding-bottom: 0; } /* Vertical hairline rail connecting pegs */ .moment::before { content: ""; position: absolute; left: 6px; top: 20px; bottom: -4px; width: 1px; background: linear-gradient( to bottom, var(--primary-container) 0%, var(--hairline) 40%, var(--hairline) 100% ); opacity: 0.55; } .moment:last-child::before { display: none; } /* Peg sits pinned to the left edge of each moment */ .moment-peg { position: absolute; top: 2px; left: 0; margin: 0; width: 14px; height: 14px; } .peg-ring { inset: -6px; } /* Typography reset for vertical layout */ .moment-time { margin-top: 0; gap: 8px; font-size: 10px; } .moment-time-num { font-size: 34px; line-height: 1; } .moment-title { margin: 10px 0 4px; font-size: 20px; } .moment-copy { font-size: 14px; max-width: none; line-height: 1.5; } } @media (max-width: 640px) { .three-steps { padding: 72px 20px 88px; } .steps-header { margin-bottom: 48px; } .moment { padding-bottom: 40px; } .moment-time-num { font-size: 30px; } .moment-title { font-size: 18px; } }