fix(landing): the front door matches the house — content visible, dark real, mobile whole #5541
2 changed files+184−99
Modifiedsrc/routes/web.tsx+5−0View fileUnifiedSplit
@@ -76,6 +76,7 @@ import { resolveRepoAccess, satisfiesAccess } from "../middleware/repo-access";
7676import { claudeSemanticSearch } from "../lib/claude-semantic-search";
7777import { isAiAvailable } from "../lib/ai-client";
7878import { trackByName } from "../lib/traffic";
79import { readTheme } from "./theme";
7980import { LandingPage } from "../views/landing";
8081import { Landing2030Page } from "../views/landing-2030";
8182import { LandingProPage, type LandingProLiveFeed } from "../views/landing-pro";
@@ -2003,6 +2004,10 @@ web.get("/", async (c) => {
20032004 publicStats={publicStats}
20042005 liveFeed={liveFeed}
20052006 plans={plans}
2007 // The landing view renders its own <html>, so unlike Layout pages
2008 // nothing else sets data-theme for it. Until 2026-08-26 it pinned
2009 // "light" and was the one page where the theme cookie did nothing.
2010 theme={readTheme(c)}
20062011 />
20072012 )
20082013 );
Modifiedsrc/views/landing-pro.tsx+179−99View fileUnifiedSplit
@@ -40,6 +40,11 @@ export interface LandingProProps {
4040 publicStats?: PublicStats | null;
4141 liveFeed?: LandingProLiveFeed | null;
4242 plans?: LandingProPlan[] | null;
43 /** Resolved server-side from the same `theme` cookie the layout reads.
44 * This page renders its own <html>, so nothing sets the attribute for
45 * it — until 2026-08-26 it hardcoded data-theme="light" and the dark
46 * render of the homepage was pixel-identical to light. */
47 theme?: "light" | "dark";
4348}
4449
4550function fmtPlanPrice(cents: number): string {
@@ -80,20 +85,23 @@ export function relTime(
8085
8186// ─── inline SVG icon helper ────────────────────────────────────────
8287
83function icon(paths: string, color = "#1f5f57", size = 20) {
88// Inline SVG resolves CSS variables like any other markup, so the icons
89// read the theme tokens instead of restating hex — that is what lets them
90// follow a light/dark flip at all.
91function icon(paths: string, color = "var(--accent)", size = 20) {
8492 return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths}</svg>`;
8593}
8694
8795const ICONS: Record<string, string> = {
8896 code: icon('<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>'),
8997 fork: icon('<circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><line x1="6" y1="9" x2="6" y2="15"/><path d="M18 9V7a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2"/><path d="M18 15a3 3 0 0 0 0-6"/>'),
90 ai: icon('<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>', "var(--accent)"),
91 shield: icon('<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>', "#059669"),
92 workflow: icon('<circle cx="12" cy="12" r="3"/><path d="M12 3v3"/><path d="M12 18v3"/><path d="M4.22 4.22l2.12 2.12"/><path d="M17.66 17.66l2.12 2.12"/><path d="M3 12h3"/><path d="M18 12h3"/><path d="M4.22 19.78l2.12-2.12"/><path d="M17.66 6.34l2.12-2.12"/>', "#b45309"),
93 grid: icon('<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>', "#475569"),
94 chart: icon('<line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>', "#1f5f57"),
95 link: icon('<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>', "#dc2626"),
96 team: icon('<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>', "#0d9488"),
98 ai: icon('<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>'),
99 shield: icon('<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>', "var(--green)"),
100 workflow: icon('<circle cx="12" cy="12" r="3"/><path d="M12 3v3"/><path d="M12 18v3"/><path d="M4.22 4.22l2.12 2.12"/><path d="M17.66 17.66l2.12 2.12"/><path d="M3 12h3"/><path d="M18 12h3"/><path d="M4.22 19.78l2.12-2.12"/><path d="M17.66 6.34l2.12-2.12"/>', "var(--accent-2)"),
101 grid: icon('<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>', "var(--text-muted)"),
102 chart: icon('<line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>'),
103 link: icon('<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>', "var(--red)"),
104 team: icon('<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>', "var(--accent)"),
97105};
98106
99107// ─── page ──────────────────────────────────────────────────────────
@@ -102,6 +110,7 @@ export const LandingProPage: FC<LandingProProps> = ({
102110 publicStats,
103111 liveFeed,
104112 plans,
113 theme = "light",
105114} = {}) => {
106115 const title = "Gluecron — The AI-native git platform";
107116 const desc =
@@ -144,7 +153,11 @@ export const LandingProPage: FC<LandingProProps> = ({
144153 const showLiveNow = liveMerges.length > 0 || liveReviews.length > 0;
145154
146155 return (
147 <html lang="en" data-theme="light">
156 /* data-theme comes from the request's theme cookie (readTheme in the
157 route), same source as layout.tsx. It was pinned to "light" here,
158 which — combined with light-literal section CSS — made the homepage
159 the one page on the site where dark mode did nothing at all. */
160 <html lang="en" data-theme={theme}>
148161 <head>
149162 <meta charset="UTF-8" />
150163 {/* First script on the page. This view renders its own document and
@@ -153,7 +166,7 @@ export const LandingProPage: FC<LandingProProps> = ({
153166 the site and was reporting no browser errors at all. */}
154167 <script dangerouslySetInnerHTML={{ __html: errorBeaconScript }} />
155168 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
156 <meta name="theme-color" content="#ffffff" />
169 <meta name="theme-color" content={theme === "dark" ? "#0d1117" : "#ffffff"} />
157170 <title>{title}</title>
158171 <meta name="description" content={desc} />
159172 <meta property="og:title" content={title} />
@@ -175,7 +188,7 @@ export const LandingProPage: FC<LandingProProps> = ({
175188 <span class="lp-logo-mark" aria-hidden="true" />
176189 gluecron
177190 </a>
178 <PrelaunchPill />
191 <PrelaunchPill light={theme === "dark"} />
179192 <nav class="lp-nav-links" aria-label="Primary">
180193 <a href="#platform">Platform</a>
181194 <a href="#ai">AI suite</a>
@@ -355,17 +368,17 @@ export const LandingProPage: FC<LandingProProps> = ({
355368 {/* ── Impact stat band ── */}
356369 <div class="lp-impact-band">
357370 <div class="lp-wrap lp-impact-in">
358 <div class="lp-impact-stat lp-reveal">
371 <div class="lp-impact-stat">
359372 <span class="lp-impact-n">2<span class="lp-impact-x">×</span></span>
360373 <span class="lp-impact-label">faster dev velocity</span>
361374 </div>
362375 <div class="lp-impact-sep" aria-hidden="true" />
363 <div class="lp-impact-stat lp-reveal">
376 <div class="lp-impact-stat">
364377 <span class="lp-impact-n">100<span class="lp-impact-x">%</span></span>
365378 <span class="lp-impact-label">audit log coverage</span>
366379 </div>
367380 <div class="lp-impact-sep" aria-hidden="true" />
368 <div class="lp-impact-stat lp-reveal">
381 <div class="lp-impact-stat">
369382 <span class="lp-impact-n"><30<span class="lp-impact-x">s</span></span>
370383 <span class="lp-impact-label">AI review latency</span>
371384 </div>
@@ -486,15 +499,15 @@ export const LandingProPage: FC<LandingProProps> = ({
486499 </div>
487500
488501 <div class="lp-mcp-grid">
489 <div class="lp-mcp-item lp-reveal">
502 <div class="lp-mcp-item">
490503 <h3>Claude Code</h3>
491504 <p>One line, then OAuth. No config file, no token to paste.</p>
492505 </div>
493 <div class="lp-mcp-item lp-reveal">
506 <div class="lp-mcp-item">
494507 <h3>Claude Desktop</h3>
495508 <p>A one-click .dxt bundle with your token already embedded.</p>
496509 </div>
497 <div class="lp-mcp-item lp-reveal">
510 <div class="lp-mcp-item">
498511 <h3>Cursor, Windsurf, the rest</h3>
499512 <p>A standard remote MCP server over HTTP. Point anything at it.</p>
500513 </div>
@@ -525,16 +538,16 @@ export const LandingProPage: FC<LandingProProps> = ({
525538 </div>
526539
527540 <div class="lp-platform-grid">
528 <PlatformGroup icon={ICONS.code} iconColor="var(--accent)" title="Code hosting">
541 <PlatformGroup icon={ICONS.code} title="Code hosting">
529542 {["Git Smart HTTP · SSH keys", "Forks · stars · topics", "Releases · protected tags", "Push policy rulesets"]}
530543 </PlatformGroup>
531 <PlatformGroup icon={ICONS.team} iconColor="#0d9488" title="Collaboration">
544 <PlatformGroup icon={ICONS.team} title="Collaboration">
532545 {["Issues · PRs · inline review", "Draft PRs · merge queues", "Projects · discussions · wikis", "Organizations · teams · roles"]}
533546 </PlatformGroup>
534 <PlatformGroup icon={ICONS.workflow} iconColor="#b45309" title="CI / CD">
547 <PlatformGroup icon={ICONS.workflow} title="CI / CD">
535548 {["YAML-native workflow runner", "Branch protection · gates", "Required status checks", "Auto-repair on gate failure"]}
536549 </PlatformGroup>
537 <PlatformGroup icon={ICONS.shield} iconColor="#059669" title="Security">
550 <PlatformGroup icon={ICONS.shield} title="Security">
538551 {["Secret scanning at push", "Dependency CVE alerts", "2FA · passkeys · SAML SSO", "Audit log across the platform"]}
539552 </PlatformGroup>
540553 </div>
@@ -700,10 +713,13 @@ export const LandingProPage: FC<LandingProProps> = ({
700713 <h2 class="lp-h2">Built for organisations, not just solo developers.</h2>
701714 <p class="lp-sub">Everything a growing engineering team needs — including the parts enterprise platforms charge separately for.</p>
702715 </div>
716 {/* Three cards, not four: the "Enterprise auth" card that sat
717 here restated the Security section's card of the same name
718 almost verbatim — one message, one place. SSO/2FA/passkeys
719 live in the Security grid above. */}
703720 <div class="lp-teams-grid">
704721 <TeamCard title="Organizations & teams" items={["Org-owned repositories", "Team-based CODEOWNERS (@org/team)", "Role-based access (read / write / admin)", "Per-repo collaborator invites", "Org-wide secrets manager (AES-256-GCM)"]} />
705 <TeamCard title="Enterprise auth" items={["SAML/OIDC SSO (Okta, Azure AD, Google)", "TOTP 2FA + recovery codes", "Passkeys / WebAuthn", "Email-domain allowlists", "Auto-provision on first SSO login"]} />
706 <TeamCard title="Compliance & audit" items={["100% audit log coverage", "Per-repo + org-level audit views", "Signed commits with Verified badges", "Protected environments (reviewer-gated)", "DORA metrics for engineering health"]} />
722 <TeamCard title="Compliance & audit" items={["100% audit log coverage", "Per-repo + org-level audit views", "Signed commits with Verified badges", "Protected environments (reviewer-gated)", "SAML/OIDC SSO + auto-provisioning"]} />
707723 <TeamCard title="Developer insights" items={["DORA metrics (deploy freq, lead time, MTTR)", "Developer velocity dashboard", "Repository health score (0–100)", "Hot files heatmap (churn-based risk tiers)", "Org-wide green rate and PR activity"]} />
708724 </div>
709725 </div>
@@ -716,10 +732,13 @@ export const LandingProPage: FC<LandingProProps> = ({
716732 <div class="lp-kicker">Developer ecosystem</div>
717733 <h2 class="lp-h2">Meet developers where they work.</h2>
718734 </div>
735 {/* Three cards, not four: the "MCP server" card duplicated the
736 whole #mcp section above (plus the Connect nav item). The
737 differentiator gets its own section; it does not also need
738 a card in the also-ran grid. */}
719739 <div class="lp-eco-grid">
720740
721741
722 <EcoCard title="MCP server" sub="Claude Code · Claude Desktop · Cursor" body="Model Context Protocol tools for repo search, file reads, issue and PR management — all natively available to Claude and Cursor." link="/mcp" />
723742
724743 </div>
725744 </div>
@@ -902,14 +921,14 @@ export const LandingProPage: FC<LandingProProps> = ({
902921// ─── sub-components ────────────────────────────────────────────────
903922
904923const LiveCard: FC<{ title: string; variant: "violet"|"green"|"brand"|"neutral"; children?: any }> = ({ title, variant, children }) => (
905 <article class={`lp-live-card lp-live-card-${variant} lp-reveal`}>
924 <article class={`lp-live-card lp-live-card-${variant}`}>
906925 <h3 class="lp-live-card-title">{title}</h3>
907926 {children}
908927 </article>
909928);
910929
911const PlatformGroup: FC<{ icon: string; iconColor: string; title: string; children: string[] }> = ({ icon: iconHtml, title, children }) => (
912 <div class="lp-plat-group lp-reveal">
930const PlatformGroup: FC<{ icon: string; title: string; children: string[] }> = ({ icon: iconHtml, title, children }) => (
931 <div class="lp-plat-group">
913932 <div class="lp-plat-header">
914933 <span class="lp-plat-icon" dangerouslySetInnerHTML={{ __html: iconHtml }} />
915934 <h3 class="lp-plat-title">{title}</h3>
@@ -921,7 +940,7 @@ const PlatformGroup: FC<{ icon: string; iconColor: string; title: string; childr
921940);
922941
923942const PainRow: FC<{ problem: string; fix: string }> = ({ problem, fix }) => (
924 <div class="lp-pain-row lp-reveal">
943 <div class="lp-pain-row">
925944 <div class="lp-pain-problem">
926945 <span class="lp-pain-icon lp-pain-no" aria-label="Before">✗</span>{problem}
927946 </div>
@@ -937,7 +956,7 @@ const AiFeatureCard: FC<{
937956 link: { href: string; label: string };
938957 mock: any; reverse?: boolean;
939958}> = ({ n, title, body, link, mock, reverse }) => (
940 <div class={`lp-ai-feature lp-reveal${reverse ? " lp-ai-feature-rev" : ""}`}>
959 <div class={`lp-ai-feature${reverse ? " lp-ai-feature-rev" : ""}`}>
941960 <div class="lp-ai-text">
942961 <div class="lp-ai-n">{n}</div>
943962 <h3 class="lp-ai-title">{title}</h3>
@@ -949,14 +968,14 @@ const AiFeatureCard: FC<{
949968);
950969
951970const SecurityCard: FC<{ title: string; body: string }> = ({ title, body }) => (
952 <div class="lp-sec-card lp-reveal">
971 <div class="lp-sec-card">
953972 <h3 class="lp-sec-card-title">{title}</h3>
954973 <p class="lp-sec-card-body">{body}</p>
955974 </div>
956975);
957976
958977const TeamCard: FC<{ title: string; items: string[] }> = ({ title, items }) => (
959 <div class="lp-team-card lp-reveal">
978 <div class="lp-team-card">
960979 <h3 class="lp-team-title">{title}</h3>
961980 <ul class="lp-team-list">
962981 {items.map((item) => <li><span aria-hidden="true">✓</span>{item}</li>)}
@@ -965,7 +984,7 @@ const TeamCard: FC<{ title: string; items: string[] }> = ({ title, items }) => (
965984);
966985
967986const EcoCard: FC<{ title: string; sub: string; body: string; link: string }> = ({ title, sub, body, link }) => (
968 <div class="lp-eco-card lp-reveal">
987 <div class="lp-eco-card">
969988 <h3 class="lp-eco-title">{title}</h3>
970989 <div class="lp-eco-sub">{sub}</div>
971990 <p class="lp-eco-body">{body}</p>
@@ -985,7 +1004,7 @@ const PricingCard: FC<{
9851004 tier: string; price: string; cadence: string; desc: string;
9861005 features: string[]; cta: string; href: string; highlight?: boolean;
9871006}> = ({ tier, price, cadence, desc, features, cta, href, highlight }) => (
988 <div class={`lp-price-card lp-reveal${highlight ? " lp-price-hl" : ""}`}>
1007 <div class={`lp-price-card${highlight ? " lp-price-hl" : ""}`}>
9891008 {highlight && <div class="lp-price-badge">Most popular</div>}
9901009 <div class="lp-price-tier">{tier}</div>
9911010 <div class="lp-price-amount">
@@ -1055,15 +1074,9 @@ document.addEventListener('click',function(e){
10551074 }).catch(function(){});
10561075});
10571076
1058/* ── scroll reveal ── */
1059try{
1060 var obs=new IntersectionObserver(function(entries){
1061 entries.forEach(function(e){
1062 if(e.isIntersecting){e.target.classList.add('lp-visible');obs.unobserve(e.target);}
1063 });
1064 },{threshold:0.08,rootMargin:'0px 0px -40px 0px'});
1065 document.querySelectorAll('.lp-reveal').forEach(function(el){obs.observe(el);});
1066}catch(err){}
1077/* Scroll-reveal observer removed with the .lp-reveal CSS — content that
1078 ships opacity:0 and waits for JS is content that does not exist for
1079 captures, crawlers, or anyone whose JS has not run yet. */
10671080
10681081/* ── counter animation ── */
10691082try{
@@ -1127,11 +1140,14 @@ ${designTokensCss}
11271140 terminates the surrounding template literal, which is exactly how the
11281141 first draft of this block broke the build.)
11291142
1130 NOTE the explicit data-theme="light" on <html>. The shared block's first
1131 selector is :root, :root[data-theme='dark'] — so a document that sets
1132 no data-theme gets the DARK values. This page is deliberately light-only
1133 (its 1,300 lines of section CSS assume a paper background), so it pins
1134 the attribute rather than inheriting a theme it cannot render. */
1143 data-theme on <html> is SSR'd from the theme cookie (readTheme in the
1144 route). It used to be pinned to "light" while the section CSS hardcoded
1145 white cards and black-tinted borders — the 2026-08-26 sweep found the
1146 dark render of the homepage pixel-identical to light. The literals are
1147 now tokens, so flipping the attribute flips the page. The shared block's
1148 first selector is :root, :root[data-theme='dark'], so an <html> with NO
1149 attribute would get the DARK values — the attribute must always be set
1150 here. */
11351151:root{
11361152 --lp-brand:var(--accent);--lp-brand-h:var(--accent-hover);
11371153 --lp-bg:var(--bg);--lp-soft:var(--bg-secondary);
@@ -1148,9 +1164,13 @@ html{scroll-behavior:smooth;font-size:17px;line-height:1.6;-webkit-font-smoothin
11481164body{background:var(--lp-bg);color:var(--lp-ink);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif}
11491165a{color:inherit;text-decoration:none}
11501166
1151/* ── scroll reveal ── */
1152.lp-reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
1153.lp-reveal.lp-visible{opacity:1;transform:none}
1167/* There is deliberately no scroll-reveal here. The previous .lp-reveal
1168 pattern (opacity:0 until an IntersectionObserver fired) hid the BODY of
1169 seven sections — every card grid, the pain table, all four AI mocks —
1170 from anything that renders without scrolling: full-page captures, no-JS
1171 visitors, reader modes. The 2026-08-26 design sweep reviewed the page
1172 the way a crawler sees it and found "6-7 dead placeholder sections":
1173 real content, invisible by default. Content must never default hidden. */
11541174
11551175/* ── layout ── */
11561176.lp-wrap{max-width:var(--lp-max);margin:0 auto;padding:0 24px}
@@ -1165,17 +1185,20 @@ a{color:inherit;text-decoration:none}
11651185.lp-sub{font-size:18px;color:var(--lp-ink-2);line-height:1.65;max-width:60ch}
11661186.lp-text-link{color:var(--lp-brand);font-size:15px;font-weight:500}
11671187.lp-text-link:hover{color:var(--lp-brand-h);text-decoration:underline}
1168code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.86em;background:rgba(0,0,0,.05);padding:2px 5px;border-radius:4px}
1188code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.86em;background:var(--bg-inset);padding:2px 5px;border-radius:4px}
11691189
11701190/* ── buttons ── */
11711191.lp-btn{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-weight:600;font-size:15px;border-radius:var(--lp-r);padding:10px 18px;border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .2s,background .15s,border-color .15s,color .15s;white-space:nowrap}
11721192.lp-btn:hover{transform:translateY(-1px)}
1173.lp-btn-solid{background:var(--lp-ink);color:#fff;border-color:var(--lp-ink)}
1193/* Solid buttons are ink-on-paper in light and paper-on-ink in dark:
1194 var(--bg) as the text colour flips with the theme, a literal #fff
1195 would not. */
1196.lp-btn-solid{background:var(--lp-ink);color:var(--lp-bg);border-color:var(--lp-ink)}
11741197.lp-btn-solid:hover{box-shadow:0 8px 24px rgba(10,11,13,.25)}
1175.lp-btn-outline{color:var(--lp-ink);border-color:rgba(0,0,0,.2)}
1176.lp-btn-outline:hover{border-color:var(--lp-ink);background:rgba(0,0,0,.03)}
1198.lp-btn-outline{color:var(--lp-ink);border-color:var(--border-strong)}
1199.lp-btn-outline:hover{border-color:var(--lp-ink);background:var(--bg-hover)}
11771200.lp-btn-ghost{color:var(--lp-ink-2);border-color:var(--lp-border)}
1178.lp-btn-ghost:hover{color:var(--lp-ink);border-color:rgba(0,0,0,.2)}
1201.lp-btn-ghost:hover{color:var(--lp-ink);border-color:var(--border-strong)}
11791202.lp-btn-lg{padding:13px 22px;font-size:16px;border-radius:12px}
11801203.lp-btn-xl{padding:15px 30px;font-size:17px;border-radius:14px}
11811204.lp-btn-block{width:100%;justify-content:center}
@@ -1187,13 +1210,13 @@ code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.86em;backgro
11871210
11881211/* ── badges ── */
11891212.lp-badge{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:6px}
1190.lp-badge-merged{color:var(--lp-green);background:rgba(5,150,105,.1)}
1191.lp-badge-approved{color:var(--lp-green);background:rgba(5,150,105,.1)}
1213.lp-badge-merged{color:var(--lp-green);background:color-mix(in srgb, var(--lp-green) 12%, transparent)}
1214.lp-badge-approved{color:var(--lp-green);background:color-mix(in srgb, var(--lp-green) 12%, transparent)}
11921215.lp-badge-ai{color:var(--lp-violet);background:color-mix(in srgb, var(--lp-violet) 10%, transparent)}
1193.lp-badge-warn{color:var(--lp-amber);background:rgba(180,83,9,.1)}
1216.lp-badge-warn{color:var(--lp-amber);background:color-mix(in srgb, var(--lp-amber) 12%, transparent)}
11941217
11951218/* ── nav ── */
1196.lp-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(14px) saturate(180%);border-bottom:1px solid transparent;transition:border-color .2s}
1219.lp-nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--lp-bg) 88%, transparent);backdrop-filter:blur(14px) saturate(180%);border-bottom:1px solid transparent;transition:border-color .2s}
11971220.lp-nav.lp-stuck{border-bottom-color:var(--lp-border)}
11981221.lp-nav-in{max-width:var(--lp-max);margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:20px}
11991222.lp-logo{display:inline-flex;align-items:center;gap:9px;font-family:'Inter Tight',sans-serif;font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--lp-ink)}
@@ -1208,6 +1231,16 @@ code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.86em;backgro
12081231 whole page into horizontal scroll for every iPad-portrait and small-laptop
12091232 window. Hide it until the width it actually needs. */
12101233@media(max-width:880px){.lp-nav-links{display:none}.lp-nav-ctas .lp-btn-ghost{display:none}}
1234/* Below ~520px even the reduced bar (logo 97 + prelaunch pill ~140 + CTA 135
1235 + gaps + 48 padding = ~460) overflowed a 390px phone by ~70px — the only
1236 horizontal-scroll source on the page. Compact every term and let the pill
1237 (the one flexible item; its long copy lives in title/aria-label) shrink
1238 and clip instead of widening the document. */
1239@media(max-width:520px){
1240 .lp-nav-in{padding:12px 14px;gap:12px}
1241 .lp-nav .prelaunch-pill{flex-shrink:1;min-width:0;overflow:hidden;font-size:10px!important;margin-left:4px!important;padding:2px 6px!important}
1242 .lp-nav-ctas .lp-btn{padding:8px 12px;font-size:14px}
1243}
12111244
12121245/* ── hero ── */
12131246.lp-hero{padding:80px 0 60px;border-bottom:1px solid var(--lp-border)}
@@ -1244,7 +1277,7 @@ code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.86em;backgro
12441277@media(max-width:900px){.lp-hero-in{grid-template-columns:minmax(0,1fr)}.lp-hero-card{order:-1}}
12451278
12461279/* ── hero PR mock card ── */
1247.lp-hero-card{background:#fff;border:1px solid var(--lp-border);border-radius:16px;box-shadow:var(--lp-shadow-lg);overflow:hidden;font-size:13px}
1280.lp-hero-card{background:var(--bg-elevated);border:1px solid var(--lp-border);border-radius:16px;box-shadow:var(--lp-shadow-lg);overflow:hidden;font-size:13px}
12481281.lp-hc-chrome{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--lp-soft);border-bottom:1px solid var(--lp-border)}
12491282.lp-hc-dot{width:11px;height:11px;border-radius:50%}
12501283.lp-hc-dot-r{background:#ff5f57}
@@ -1253,31 +1286,32 @@ code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.86em;backgro
12531286.lp-hc-path{margin-left:8px;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--lp-muted)}
12541287.lp-hc-pr-row{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--lp-border)}
12551288.lp-hc-pr-title{font-size:13.5px;font-weight:600;color:var(--lp-ink)}
1256/* diff */
1257.lp-diff{font-family:'JetBrains Mono',monospace;font-size:12.5px;background:#fafafa;border-bottom:1px solid var(--lp-border)}
1289/* diff — syntax colours ride the semantic tokens so the mock stays
1290 readable on the dark surface too */
1291.lp-diff{font-family:'JetBrains Mono',monospace;font-size:12.5px;background:var(--bg-secondary);border-bottom:1px solid var(--lp-border)}
12581292.lp-diff-line{display:flex;align-items:baseline;gap:0;line-height:1.7;padding:0 0}
1259.lp-diff-add{background:rgba(5,150,105,.07)}
1260.lp-diff-focus{background:rgba(5,150,105,.13)}
1261.lp-ln{width:36px;text-align:right;color:#9ca3af;padding-right:8px;user-select:none;font-size:11px}
1293.lp-diff-add{background:color-mix(in srgb, var(--lp-green) 8%, transparent)}
1294.lp-diff-focus{background:color-mix(in srgb, var(--lp-green) 15%, transparent)}
1295.lp-ln{width:36px;text-align:right;color:var(--text-faint);padding-right:8px;user-select:none;font-size:11px}
12621296.lp-op{width:16px;text-align:center;color:var(--lp-green);font-weight:700;flex-shrink:0}
1263.lp-diff-line code{font-family:'JetBrains Mono',monospace;font-size:12px;background:none;padding:0;color:#1f2937}
1297.lp-diff-line code{font-family:'JetBrains Mono',monospace;font-size:12px;background:none;padding:0;color:var(--text)}
12641298.lp-kw{color:var(--accent);font-style:italic}
1265.lp-ty{color:#059669}
1266.lp-fn{color:#2563eb}
1267.lp-str{color:#d97706}
1299.lp-ty{color:var(--green)}
1300.lp-fn{color:var(--blue)}
1301.lp-str{color:var(--accent-warm)}
12681302/* inline comment */
12691303.lp-inline-comment{display:flex;gap:10px;padding:12px 16px;background:color-mix(in srgb, var(--accent) 4%, transparent);border-bottom:1px solid color-mix(in srgb, var(--accent) 12%, transparent)}
1270.lp-ic-ava{width:26px;height:26px;border-radius:50%;background:var(--lp-brand);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
1304.lp-ic-ava{width:26px;height:26px;border-radius:50%;background:var(--lp-brand);color:var(--lp-bg);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
12711305.lp-ic-head{font-size:12px;font-weight:600;color:var(--lp-ink-2);margin-bottom:3px}
12721306.lp-ic-loc{color:var(--lp-brand);font-family:'JetBrains Mono',monospace;font-size:11px}
12731307.lp-ic-text{font-size:13px;color:var(--lp-ink-2);line-height:1.5}
12741308/* gates */
12751309.lp-gates{display:flex;gap:6px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--lp-border)}
12761310.lp-gate{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:20px}
1277.lp-gate-ok{color:var(--lp-green);background:rgba(5,150,105,.09)}
1311.lp-gate-ok{color:var(--lp-green);background:color-mix(in srgb, var(--lp-green) 10%, transparent)}
12781312.lp-gate-spin{color:var(--lp-brand);background:color-mix(in srgb, var(--lp-violet) 9%, transparent)}
12791313/* auto-merge banner */
1280.lp-automerge-bar{background:var(--lp-brand);color:#fff;font-size:12px;font-weight:600;text-align:center;padding:8px;letter-spacing:.01em}
1314.lp-automerge-bar{background:var(--lp-brand);color:var(--lp-bg);font-size:12px;font-weight:600;text-align:center;padding:8px;letter-spacing:.01em}
12811315
12821316/* ── trust strip ── */
12831317.lp-trust-strip{border-bottom:1px solid var(--lp-border);padding:14px 0;background:var(--lp-soft)}
@@ -1303,11 +1337,11 @@ code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.86em;backgro
13031337.lp-live-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px}
13041338@media(max-width:1000px){.lp-live-grid{grid-template-columns:repeat(2,1fr)}}
13051339@media(max-width:560px){.lp-live-grid{grid-template-columns:1fr}}
1306.lp-live-card{background:#fff;border:1px solid var(--lp-border);border-radius:var(--lp-r);padding:20px;box-shadow:var(--lp-shadow);border-left:3px solid transparent;transition:transform .18s,box-shadow .2s}
1340.lp-live-card{background:var(--bg-elevated);border:1px solid var(--lp-border);border-radius:var(--lp-r);padding:20px;box-shadow:var(--lp-shadow);border-left:3px solid transparent;transition:transform .18s,box-shadow .2s}
13071341.lp-live-card:hover{transform:translateY(-2px);box-shadow:var(--lp-shadow-lg)}
1308.lp-live-card-violet{border-left-color:color-mix(in srgb, var(--lp-violet) 40%, transparent);background:color-mix(in srgb, var(--lp-violet) 2%, transparent)}
1309.lp-live-card-green{border-left-color:rgba(5,150,105,.4);background:rgba(5,150,105,.02)}
1310.lp-live-card-brand{border-left-color:color-mix(in srgb, var(--accent) 40%, transparent);background:color-mix(in srgb, var(--accent) 2%, transparent)}
1342.lp-live-card-violet{border-left-color:color-mix(in srgb, var(--lp-violet) 40%, transparent);background:color-mix(in srgb, var(--lp-violet) 2%, var(--bg-elevated))}
1343.lp-live-card-green{border-left-color:color-mix(in srgb, var(--lp-green) 40%, transparent);background:color-mix(in srgb, var(--lp-green) 2%, var(--bg-elevated))}
1344.lp-live-card-brand{border-left-color:color-mix(in srgb, var(--accent) 40%, transparent);background:color-mix(in srgb, var(--accent) 2%, var(--bg-elevated))}
13111345.lp-live-card-neutral{border-left-color:var(--lp-border)}
13121346.lp-live-card-title{font-size:12.5px;font-weight:700;color:var(--lp-ink-2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px}
13131347.lp-live-list{list-style:none;display:flex;flex-direction:column;gap:10px}
@@ -1323,7 +1357,7 @@ code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.86em;backgro
13231357.lp-live-feedrow{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;font-size:13px;line-height:1.5}
13241358.lp-live-rel{color:var(--lp-muted)}
13251359.lp-feed-kind{font-size:11.5px;font-weight:600;padding:2px 6px;border-radius:4px}
1326.lp-feed-kind-auto_merge-merged{color:var(--lp-green);background:rgba(5,150,105,.09)}
1360.lp-feed-kind-auto_merge-merged{color:var(--lp-green);background:color-mix(in srgb, var(--lp-green) 10%, transparent)}
13271361.lp-feed-kind-ai_build-dispatched{color:var(--lp-brand);background:color-mix(in srgb, var(--accent) 9%, transparent)}
13281362.lp-feed-kind-ai_review-posted{color:var(--lp-violet);background:color-mix(in srgb, var(--accent) 9%, transparent)}
13291363.lp-live-cta{display:flex;align-items:center;gap:16px}
@@ -1340,8 +1374,8 @@ code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.86em;backgro
13401374.lp-platform-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;border:1px solid var(--lp-border);border-radius:14px;overflow:hidden;background:var(--lp-border)}
13411375@media(max-width:900px){.lp-platform-grid{grid-template-columns:repeat(2,1fr)}}
13421376@media(max-width:500px){.lp-platform-grid{grid-template-columns:1fr}}
1343.lp-plat-group{background:#fff;padding:22px;display:flex;flex-direction:column;gap:12px;transition:background .15s}
1344.lp-plat-group:hover{background:#fafbff}
1377.lp-plat-group{background:var(--bg-elevated);padding:22px;display:flex;flex-direction:column;gap:12px;transition:background .15s}
1378.lp-plat-group:hover{background:var(--bg-surface)}
13451379.lp-plat-header{display:flex;align-items:center;gap:8px;margin-bottom:2px}
13461380.lp-plat-icon{display:flex;flex-shrink:0}
13471381.lp-plat-icon svg{display:block}
@@ -1354,11 +1388,11 @@ code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.86em;backgro
13541388.lp-pain-row{display:grid;grid-template-columns:1fr 40px 1fr;align-items:center;gap:16px;padding:20px 24px;border-bottom:1px solid var(--lp-border);transition:background .15s}
13551389.lp-pain-row:last-child{border-bottom:0}
13561390.lp-pain-row:hover{background:var(--lp-soft)}
1357.lp-pain-problem{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:#6b7280}
1391.lp-pain-problem{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:var(--text-muted)}
13581392.lp-pain-fix{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:var(--lp-ink);font-weight:500}
13591393.lp-pain-arrow{font-size:18px;color:var(--lp-muted);text-align:center}
13601394.lp-pain-icon{font-size:12.5px;font-weight:700;margin-top:3px;flex-shrink:0}
1361.lp-pain-no{color:#b91c1c}
1395.lp-pain-no{color:var(--red)}
13621396.lp-pain-yes{color:var(--lp-green)}
13631397@media(max-width:700px){.lp-pain-row{grid-template-columns:1fr;gap:8px}.lp-pain-arrow{display:none}}
13641398
@@ -1371,7 +1405,7 @@ code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.86em;backgro
13711405.lp-ai-n{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;color:var(--lp-muted);margin-bottom:10px;letter-spacing:.04em}
13721406.lp-ai-title{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:clamp(22px,3vw,30px);line-height:1.12;letter-spacing:-.018em;color:var(--lp-ink);margin-bottom:14px}
13731407.lp-ai-body{font-size:16px;color:var(--lp-ink-2);line-height:1.65;margin-bottom:18px}
1374.lp-ai-mock{background:#fff;border:1px solid var(--lp-border);border-radius:14px;overflow:hidden;box-shadow:var(--lp-shadow-lg)}
1408.lp-ai-mock{background:var(--bg-elevated);border:1px solid var(--lp-border);border-radius:14px;overflow:hidden;box-shadow:var(--lp-shadow-lg)}
13751409/* review mock */
13761410.lp-review-mock{display:flex;flex-direction:column;gap:0;font-size:13.5px}
13771411.lp-rm-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--lp-border);background:var(--lp-soft)}
@@ -1388,7 +1422,7 @@ code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.86em;backgro
13881422.lp-rm-active{color:var(--lp-ink);font-weight:500}
13891423.lp-rm-time{padding:8px 16px;font-size:11.5px;color:var(--lp-muted);border-top:1px solid var(--lp-border);font-family:'JetBrains Mono',monospace}
13901424.lp-rm-comment{display:flex;gap:10px;padding:12px 16px;background:color-mix(in srgb, var(--accent) 3%, transparent)}
1391.lp-rm-ava{width:28px;height:28px;border-radius:50%;background:var(--lp-brand);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
1425.lp-rm-ava{width:28px;height:28px;border-radius:50%;background:var(--lp-brand);color:var(--lp-bg);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
13921426.lp-rm-bubble{flex:1;font-size:13px;color:var(--lp-ink-2);line-height:1.5}
13931427.lp-rm-file{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--lp-brand);margin-bottom:4px}
13941428.lp-rm-verdict{padding:10px 16px;border-top:1px solid var(--lp-border)}
@@ -1402,27 +1436,27 @@ code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.86em;backgro
14021436.lp-security-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
14031437@media(max-width:900px){.lp-security-grid{grid-template-columns:repeat(2,1fr)}}
14041438@media(max-width:560px){.lp-security-grid{grid-template-columns:1fr}}
1405.lp-sec-card{background:#fff;border:1px solid var(--lp-border);border-radius:var(--lp-r);padding:24px;box-shadow:var(--lp-shadow);transition:transform .18s,box-shadow .2s}
1439.lp-sec-card{background:var(--bg-elevated);border:1px solid var(--lp-border);border-radius:var(--lp-r);padding:24px;box-shadow:var(--lp-shadow);transition:transform .18s,box-shadow .2s}
14061440.lp-sec-card:hover{transform:translateY(-3px);box-shadow:var(--lp-shadow-lg)}
14071441.lp-sec-card-title{font-size:15px;font-weight:700;color:var(--lp-ink);margin-bottom:10px}
14081442.lp-sec-card-body{font-size:13.5px;color:var(--lp-ink-2);line-height:1.6}
14091443
1410/* ── teams ── */
1411.lp-teams-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
1444/* ── teams ── (3 cards since the Enterprise-auth dedup) */
1445.lp-teams-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
14121446@media(max-width:1000px){.lp-teams-grid{grid-template-columns:repeat(2,1fr)}}
14131447@media(max-width:560px){.lp-teams-grid{grid-template-columns:1fr}}
1414.lp-team-card{background:#fff;border:1px solid var(--lp-border);border-radius:var(--lp-r);padding:24px;box-shadow:var(--lp-shadow);transition:transform .18s,box-shadow .2s}
1448.lp-team-card{background:var(--bg-elevated);border:1px solid var(--lp-border);border-radius:var(--lp-r);padding:24px;box-shadow:var(--lp-shadow);transition:transform .18s,box-shadow .2s}
14151449.lp-team-card:hover{transform:translateY(-3px);box-shadow:var(--lp-shadow-lg)}
14161450.lp-team-title{font-size:14.5px;font-weight:700;color:var(--lp-ink);margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--lp-border)}
14171451.lp-team-list{list-style:none;display:flex;flex-direction:column;gap:8px}
14181452.lp-team-list li{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:var(--lp-ink-2);line-height:1.4}
14191453.lp-team-list li span{color:var(--lp-green);font-size:12px;margin-top:2px;flex-shrink:0}
14201454
1421/* ── ecosystem ── */
1422.lp-eco-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
1455/* ── ecosystem ── (3 cards since the MCP-card dedup) */
1456.lp-eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
14231457@media(max-width:900px){.lp-eco-grid{grid-template-columns:repeat(2,1fr)}}
14241458@media(max-width:500px){.lp-eco-grid{grid-template-columns:1fr}}
1425.lp-eco-card{background:#fff;border:1px solid var(--lp-border);border-radius:var(--lp-r);padding:24px;box-shadow:var(--lp-shadow);display:flex;flex-direction:column;gap:10px;transition:transform .18s,box-shadow .2s}
1459.lp-eco-card{background:var(--bg-elevated);border:1px solid var(--lp-border);border-radius:var(--lp-r);padding:24px;box-shadow:var(--lp-shadow);display:flex;flex-direction:column;gap:10px;transition:transform .18s,box-shadow .2s}
14261460.lp-eco-card:hover{transform:translateY(-3px);box-shadow:var(--lp-shadow-lg)}
14271461.lp-eco-title{font-size:15px;font-weight:700;color:var(--lp-ink)}
14281462.lp-eco-sub{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--lp-brand)}
@@ -1453,10 +1487,10 @@ code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.86em;backgro
14531487/* ── pricing ── */
14541488.lp-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
14551489@media(max-width:800px){.lp-price-grid{grid-template-columns:1fr}}
1456.lp-price-card{background:#fff;border:1px solid var(--lp-border);border-radius:14px;padding:28px;box-shadow:var(--lp-shadow);display:flex;flex-direction:column;gap:0;position:relative;transition:transform .18s,box-shadow .2s}
1490.lp-price-card{background:var(--bg-elevated);border:1px solid var(--lp-border);border-radius:14px;padding:28px;box-shadow:var(--lp-shadow);display:flex;flex-direction:column;gap:0;position:relative;transition:transform .18s,box-shadow .2s}
14571491.lp-price-card:hover{transform:translateY(-3px);box-shadow:var(--lp-shadow-lg)}
14581492.lp-price-hl{border-color:var(--lp-brand);box-shadow:0 0 0 1px var(--lp-brand),var(--lp-shadow)}
1459.lp-price-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--lp-brand);color:#fff;font-size:11.5px;font-weight:700;padding:4px 14px;border-radius:999px}
1493.lp-price-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--lp-brand);color:var(--lp-bg);font-size:11.5px;font-weight:700;padding:4px 14px;border-radius:999px}
14601494.lp-price-tier{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--lp-brand);margin-bottom:12px}
14611495.lp-price-amount{display:flex;align-items:baseline;gap:6px;margin-bottom:12px}
14621496.lp-price-num{font-family:'Inter Tight',sans-serif;font-size:36px;font-weight:800;color:var(--lp-ink);letter-spacing:-.02em}
@@ -1466,34 +1500,36 @@ code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.86em;backgro
14661500.lp-price-features li{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:var(--lp-ink-2)}
14671501.lp-price-features li span{color:var(--lp-green);font-size:12px;margin-top:2px}
14681502.lp-price-foot{margin-top:16px}
1469.lp-price-note{font-size:12px;color:var(--lp-muted,#6b7280)}
1503.lp-price-note{font-size:12px;color:var(--lp-muted)}
14701504
14711505/* ── install ── */
14721506.lp-install-wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
14731507@media(max-width:800px){.lp-install-wrap{grid-template-columns:1fr}}
14741508.lp-install-text{display:flex;flex-direction:column}
14751509.lp-install-text .lp-kicker{margin-bottom:16px}
1476.lp-install-terminal{background:#fff;border:1px solid var(--lp-border);border-radius:14px;overflow:hidden;box-shadow:var(--lp-shadow-lg)}
1510.lp-install-terminal{background:var(--bg-elevated);border:1px solid var(--lp-border);border-radius:14px;overflow:hidden;box-shadow:var(--lp-shadow-lg)}
14771511.lp-term-bar{display:flex;align-items:center;gap:6px;padding:10px 16px;background:var(--lp-soft);border-bottom:1px solid var(--lp-border)}
1478.lp-term-dot{width:10px;height:10px;border-radius:50%;background:#d1d5db}
1512.lp-term-dot{width:10px;height:10px;border-radius:50%;background:var(--border-strong)}
14791513.lp-term-title{margin-left:8px;font-size:12px;color:var(--lp-muted);font-family:'JetBrains Mono',monospace}
14801514.lp-term-body{padding:16px;display:flex;flex-direction:column;gap:8px}
14811515.lp-term-line{display:flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-size:13px}
14821516.lp-term-prompt{color:var(--lp-brand);font-weight:500}
14831517.lp-term-out{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--lp-muted);padding-left:20px}
14841518.lp-term-ok{color:var(--lp-green)}
1485.lp-copy-btn{margin-left:auto;font-size:12px;font-family:'Inter',sans-serif;font-weight:600;padding:4px 10px;border:1px solid var(--lp-border);border-radius:6px;background:#fff;color:var(--lp-ink-2);cursor:pointer;transition:background .15s,color .15s}
1519.lp-copy-btn{margin-left:auto;font-size:12px;font-family:'Inter',sans-serif;font-weight:600;padding:4px 10px;border:1px solid var(--lp-border);border-radius:6px;background:var(--bg-elevated);color:var(--lp-ink-2);cursor:pointer;transition:background .15s,color .15s}
14861520.lp-copy-btn:hover{background:var(--lp-soft);color:var(--lp-ink)}
14871521
14881522/* ── dark CTA ── */
14891523.lp-cta-dark{background:var(--lp-navy);padding:96px 0;border-top:1px solid rgba(255,255,255,.06)}
14901524.lp-cta-in{text-align:center;display:flex;flex-direction:column;align-items:center}
1491.lp-kicker-dark{color:rgba(163,178,238,.9)}
1525/* Evergreen-tinted, not the indigo rgba(163,178,238) that survived the
1526 palette change here because it was an rgba the hex audit cannot see. */
1527.lp-kicker-dark{color:rgba(127,196,180,.9)}
14921528.lp-cta-h{font-family:'Inter Tight',sans-serif;font-weight:800;font-size:clamp(32px,5vw,56px);line-height:1.06;letter-spacing:-.025em;color:#fff;margin:12px 0 18px}
14931529.lp-cta-sub{font-size:18px;color:rgba(255,255,255,.65);max-width:52ch;margin-bottom:36px}
14941530.lp-cta-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:24px}
14951531.lp-cta-links-dark{display:flex;gap:12px;align-items:center;font-size:14px}
1496.lp-cta-links-dark a{color:rgba(163,178,238,.85);font-weight:500}
1532.lp-cta-links-dark a{color:rgba(127,196,180,.85);font-weight:500}
14971533.lp-cta-links-dark a:hover{color:#fff}
14981534.lp-cta-links-dark span{color:rgba(255,255,255,.2)}
14991535
@@ -1510,5 +1546,49 @@ code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.86em;backgro
15101546.lp-footer-col a{font-size:13.5px;color:rgba(255,255,255,.45);transition:color .15s}
15111547.lp-footer-col a:hover{color:rgba(255,255,255,.9)}
15121548.lp-footer-bottom{border-top:1px solid rgba(255,255,255,.07);padding:20px 0}
1513.lp-footer-bottom-in{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:rgba(255,255,255,.3)}
1549.lp-footer-bottom-in{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.3)}
1550
1551/* ── phone-width density ─────────────────────────────────────────────
1552 Desktop spacing (96px section pads, 72px feature gaps) stacked to an
1553 18,520px-tall document at 390px. That is a wall for readers — and it
1554 is also past Chromium's 16,384px max-texture size, so every full-page
1555 capture of the phone layout (the design sweep, link unfurlers) rendered
1556 the tail as garbage: a blank band with stale tiles of the nav + hero
1557 composited at the bottom. Nothing was duplicated in the markup; the
1558 page was simply too tall to rasterize. Phone spacing halves the
1559 ceremony so the whole page — live-now section included — stays well
1560 inside the rasterizer's range. */
1561@media(max-width:640px){
1562 .lp-sec{padding:48px 0}
1563 .lp-sec-head{margin-bottom:28px}
1564 .lp-sec-head .lp-h2{margin:6px 0 12px}
1565 .lp-hero{padding:36px 0 40px}
1566 .lp-hero-in{gap:32px}
1567 .lp-hero-sub{margin-top:14px}
1568 .lp-hero-ctas{margin-top:20px}
1569 .lp-hero-install{margin-top:20px;padding-top:16px}
1570 .lp-trust-strip{padding:10px 0}
1571 .lp-trust-in{gap:8px 14px}
1572 .lp-sep{display:none}
1573 .lp-impact-band{padding:32px 0}
1574 .lp-impact-in{gap:24px}
1575 .lp-mcp-item{padding:20px 18px}
1576 .lp-plat-group{padding:18px}
1577 .lp-pain-row{padding:14px 16px}
1578 .lp-ai-features{gap:40px}
1579 .lp-ai-feature{gap:20px}
1580 .lp-ai-body{margin-bottom:12px}
1581 .lp-live-grid{gap:12px;margin-bottom:24px}
1582 .lp-live-card{padding:16px}
1583 .lp-sec-card,.lp-team-card,.lp-eco-card{padding:18px}
1584 .lp-team-title{margin-bottom:10px;padding-bottom:10px}
1585 .lp-price-card{padding:20px}
1586 .lp-price-features{gap:6px;margin-bottom:16px}
1587 .lp-cmp-row,.lp-compare-head{padding-top:11px;padding-bottom:11px}
1588 .lp-install-wrap{gap:28px}
1589 .lp-cta-dark{padding:56px 0}
1590 .lp-cta-sub{margin-bottom:24px}
1591 .lp-footer{padding:40px 0 0}
1592 .lp-footer-in{margin-bottom:28px}
1593}
15141594`;
15151595
c comment · e edit title · m merge · a approve · r request changes · ? shortcuts