/* Periphery landing page (periphery.exposed): the Claude Design handoff
   "design_handoff_landing_page", as plain CSS for landing.html. The same
   design system as console.css (project 56ab81c6), at the kit's own sizes:
   the console scales every size by 1.1, the landing page is pixel-for-pixel
   the handoff. Holds the tokens, the p-* components the page uses, then the
   page's own lp-* rules (the handoff's reference/landing.css). Fonts and
   icons are the console's self-hosted ones: Source Sans 3 and IBM Plex Mono
   (SIL OFL, static/fonts), Lucide (ISC, static/icons.svg). */

/* ── Fonts ─────────────────────────────────────────────────────────────── */
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:200 900;font-display:swap;src:url(/static/fonts/source-sans-3-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:200 900;font-display:swap;src:url(/static/fonts/source-sans-3-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── tokens/colors.css ─────────────────────────────────────────────────── */
:root{
--gray-0:#ffffff;--gray-25:#fcfcfd;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-150:#eceef1;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2633;--gray-850:#181e29;--gray-900:#12161f;--gray-950:#0a0d14;
--accent-50:#fff6ef;--accent-100:#ffead9;--accent-200:#fed2b0;--accent-300:#fbb07c;--accent-400:#f68a4a;--accent-500:#ea6c2a;--accent-600:#c24e17;--accent-700:#a3400f;--accent-800:#84340f;--accent-900:#6b2b10;
--live-50:#ecfdf3;--live-200:#bbf0cf;--live-500:#22c55e;--live-700:#15803d;
--redirect-50:#eff6ff;--redirect-200:#cfe0fd;--redirect-500:#3b82f6;--redirect-700:#1d4ed8;
--warning-50:#fffbeb;--warning-200:#fde8a6;--warning-500:#f59e0b;--warning-700:#b45309;
--dead-50:#fef2f2;--dead-200:#fbd0d0;--dead-500:#ef4444;--dead-700:#b91c1c;
--tint-blue-bg:#eff4ff;--tint-blue-fg:#2a4fc9;--tint-blue-border:#d6e0fd;
--tint-green-bg:#ecfbf1;--tint-green-fg:#1d7a45;--tint-green-border:#c9efd7;
--tint-orange-bg:#fff3ea;--tint-orange-fg:#b4501a;--tint-orange-border:#fddcc4;
--tint-amber-bg:#fff8e6;--tint-amber-fg:#8a5b00;--tint-amber-border:#fbe6a8;
--tint-purple-bg:#f4f0ff;--tint-purple-fg:#6236c9;--tint-purple-border:#e1d7fd;
--tint-pink-bg:#fdf0f7;--tint-pink-fg:#b8256f;--tint-pink-border:#f8d3e6;
--tint-cyan-bg:#ebf9fb;--tint-cyan-fg:#0e7186;--tint-cyan-border:#c4ecf2;
--tint-gray-bg:var(--gray-100);--tint-gray-fg:var(--gray-600);--tint-gray-border:var(--gray-200);
--surface-page:var(--gray-0);--surface-subtle:var(--gray-50);--surface-sunken:var(--gray-100);--surface-card:var(--gray-0);--surface-field:var(--gray-0);--surface-hover:var(--gray-50);--surface-inverse:var(--gray-900);
--gradient-card:linear-gradient(to bottom,var(--gray-50),var(--gray-0));
--gradient-header:linear-gradient(to bottom,var(--gray-50),var(--gray-0));
--gradient-control:linear-gradient(to bottom,var(--gray-0),var(--gray-50));
--gradient-accent-soft:linear-gradient(to bottom,var(--accent-50),var(--gray-0));
--border-subtle:var(--gray-100);--border-default:var(--gray-200);--border-strong:var(--gray-300);
--text-strong:var(--gray-900);--text-body:var(--gray-700);--text-muted:var(--gray-500);--text-faint:var(--gray-400);--text-inverse:var(--gray-0);--text-link:var(--accent-700);
--accent:var(--accent-600);--accent-hover:var(--accent-700);--accent-icon:var(--accent-500);--accent-soft:var(--accent-50);--accent-soft-border:var(--accent-200);--accent-soft-text:var(--accent-700);--text-on-accent:#ffffff;
--focus-ring:rgba(234,108,42,.28);
--status-live-bg:var(--live-50);--status-live-fg:var(--live-700);--status-live-border:var(--live-200);--status-live-dot:var(--live-500);
--status-redirect-bg:var(--redirect-50);--status-redirect-fg:var(--redirect-700);--status-redirect-border:var(--redirect-200);--status-redirect-dot:var(--redirect-500);
--status-warning-bg:var(--warning-50);--status-warning-fg:var(--warning-700);--status-warning-border:var(--warning-200);--status-warning-dot:var(--warning-500);
--status-dead-bg:var(--dead-50);--status-dead-fg:var(--dead-700);--status-dead-border:var(--dead-200);--status-dead-dot:var(--dead-500);
color-scheme:light;
}
[data-theme="dark"]{
--tint-blue-bg:rgba(59,111,246,.14);--tint-blue-fg:#a9bfff;--tint-blue-border:rgba(59,111,246,.3);
--tint-green-bg:rgba(34,170,94,.14);--tint-green-fg:#86e0a9;--tint-green-border:rgba(34,170,94,.3);
--tint-orange-bg:rgba(240,120,50,.14);--tint-orange-fg:#fdb486;--tint-orange-border:rgba(240,120,50,.3);
--tint-amber-bg:rgba(230,170,30,.14);--tint-amber-fg:#f5d27a;--tint-amber-border:rgba(230,170,30,.3);
--tint-purple-bg:rgba(140,100,240,.16);--tint-purple-fg:#c7b3ff;--tint-purple-border:rgba(140,100,240,.32);
--tint-pink-bg:rgba(230,80,150,.14);--tint-pink-fg:#f7a8cd;--tint-pink-border:rgba(230,80,150,.3);
--tint-cyan-bg:rgba(30,170,200,.14);--tint-cyan-fg:#84dbea;--tint-cyan-border:rgba(30,170,200,.3);
--tint-gray-bg:var(--gray-850);--tint-gray-fg:var(--gray-300);--tint-gray-border:var(--gray-800);
--surface-page:var(--gray-950);--surface-subtle:var(--gray-900);--surface-sunken:var(--gray-850);--surface-card:var(--gray-900);--surface-field:var(--gray-950);--surface-hover:var(--gray-850);--surface-inverse:var(--gray-100);
--gradient-card:linear-gradient(to bottom,var(--gray-900),var(--gray-950));
--gradient-header:linear-gradient(to bottom,var(--gray-900),var(--gray-950));
--gradient-control:linear-gradient(to bottom,var(--gray-850),var(--gray-900));
--gradient-accent-soft:linear-gradient(to bottom,rgba(234,108,42,.12),var(--gray-950));
--border-subtle:var(--gray-850);--border-default:var(--gray-800);--border-strong:var(--gray-700);
--text-strong:var(--gray-100);--text-body:var(--gray-300);--text-muted:var(--gray-400);--text-faint:var(--gray-500);--text-inverse:var(--gray-950);--text-link:var(--accent-400);
--accent:var(--accent-600);--accent-hover:var(--accent-500);--accent-icon:var(--accent-400);--accent-soft:rgba(234,108,42,.14);--accent-soft-border:rgba(234,108,42,.32);--accent-soft-text:var(--accent-300);
--focus-ring:rgba(246,138,74,.35);
--status-live-bg:rgba(34,197,94,.12);--status-live-fg:#6ee7a0;--status-live-border:rgba(34,197,94,.3);
--status-redirect-bg:rgba(59,130,246,.12);--status-redirect-fg:#93c5fd;--status-redirect-border:rgba(59,130,246,.3);
--status-warning-bg:rgba(245,158,11,.12);--status-warning-fg:#fcd34d;--status-warning-border:rgba(245,158,11,.3);
--status-dead-bg:rgba(239,68,68,.12);--status-dead-fg:#fca5a5;--status-dead-border:rgba(239,68,68,.3);
color-scheme:dark;
}

/* ── tokens/typography.css ─────────────────────────────────────────────── */
:root{
--font-sans:"Source Sans 3","Source Sans Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--text-2xs:11px;--text-xs:12px;--text-sm:13px;--text-md:14px;--text-base:15px;--text-lg:17px;--text-xl:20px;--text-2xl:24px;--text-3xl:30px;--text-4xl:40px;--text-5xl:52px;
--type-body:400 var(--text-base)/1.5 var(--font-sans);
--type-meta:400 var(--text-sm)/1.4 var(--font-sans);
--type-host:500 var(--text-base)/1.3 var(--font-mono);
}

/* ── tokens/spacing.css ────────────────────────────────────────────────── */
:root{
--radius-xs:4px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-full:9999px;
--radius-control:var(--radius-sm);--radius-card:var(--radius-md);--radius-pill:var(--radius-full);--radius-chip:var(--radius-xs);
--shadow-xs:0 1px 1px rgba(16,24,40,.04);
--shadow-hover:0 1px 2px rgba(16,24,40,.04),0 4px 12px rgba(16,24,40,.06);
--shadow-popover:0 4px 8px rgba(16,24,40,.06),0 12px 32px rgba(16,24,40,.10);
--control-sm:28px;--control-md:32px;--control-lg:40px;
--nav-height:56px;--gutter:24px;
--ease-out:cubic-bezier(.2,.7,.2,1);
--dur-fast:120ms;
}
[data-theme="dark"]{
--shadow-xs:0 1px 1px rgba(0,0,0,.3);
--shadow-hover:0 1px 2px rgba(0,0,0,.3),0 6px 16px rgba(0,0,0,.35);
--shadow-popover:0 8px 24px rgba(0,0,0,.5);
}

/* ── tokens/base.css ───────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{font:var(--type-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0}
a{color:var(--text-link);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
::selection{background:var(--accent-100);color:var(--gray-900)}
:focus-visible{outline:2px solid var(--accent-400);outline-offset:2px}
code,kbd,pre,samp{font-family:var(--font-mono)}
/* Icons are inline SVGs using the sprite; they size with the font. */
.p-icon{display:inline-block;flex:none;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.125em}

/* ── components/core ───────────────────────────────────────────────────── */
.p-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--control-md);padding:0 12px;border:1px solid var(--border-default);border-radius:var(--radius-control);background:var(--gradient-control);color:var(--text-strong);font:600 var(--text-md)/1 var(--font-sans);white-space:nowrap;cursor:pointer;text-decoration:none;transition:background var(--dur-fast),border-color var(--dur-fast),box-shadow var(--dur-fast)}
.p-btn:hover{text-decoration:none;border-color:var(--border-strong);background:var(--surface-hover)}
.p-btn:active{transform:translateY(.5px)}
.p-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
.p-btn .p-icon{font-size:15px;color:var(--text-muted)}
.p-btn--primary{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}
.p-btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.p-btn--primary .p-icon{color:inherit;opacity:.9}
/* Black in light mode, near-white in dark: the inverse surface pair. */
.p-btn--inverse{background:var(--surface-inverse);border-color:var(--surface-inverse);color:var(--text-inverse)}
.p-btn--inverse:hover{--btn-inverse-hover:color-mix(in srgb,var(--surface-inverse) 85%,var(--surface-page));background:var(--btn-inverse-hover);border-color:var(--btn-inverse-hover)}
.p-btn--inverse .p-icon{color:inherit;opacity:.9}
.p-btn--ghost{background:transparent;border-color:transparent;color:var(--text-body)}
.p-btn--ghost:hover{background:var(--surface-sunken);border-color:transparent}
.p-btn--lg{height:var(--control-lg);padding:0 16px;font-size:var(--text-base)}
.p-btn--icon{width:var(--control-md);padding:0}
.p-btn--block{display:flex;width:100%}
.p-pill{--_bg:var(--tint-gray-bg);--_fg:var(--tint-gray-fg);--_bd:var(--tint-gray-border);display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border:1px solid var(--_bd);border-radius:var(--radius-pill);background:var(--_bg);color:var(--_fg);font:600 var(--text-xs)/1 var(--font-sans);white-space:nowrap}
.p-pill .p-icon{font-size:12px}
.p-pill--sm{height:18px;padding:0 6px;font-size:var(--text-2xs)}
[data-tint="blue"]{--_bg:var(--tint-blue-bg);--_fg:var(--tint-blue-fg);--_bd:var(--tint-blue-border)}
[data-tint="green"]{--_bg:var(--tint-green-bg);--_fg:var(--tint-green-fg);--_bd:var(--tint-green-border)}
[data-tint="orange"]{--_bg:var(--tint-orange-bg);--_fg:var(--tint-orange-fg);--_bd:var(--tint-orange-border)}
[data-tint="amber"]{--_bg:var(--tint-amber-bg);--_fg:var(--tint-amber-fg);--_bd:var(--tint-amber-border)}
[data-tint="purple"]{--_bg:var(--tint-purple-bg);--_fg:var(--tint-purple-fg);--_bd:var(--tint-purple-border)}
[data-tint="pink"]{--_bg:var(--tint-pink-bg);--_fg:var(--tint-pink-fg);--_bd:var(--tint-pink-border)}
[data-tint="cyan"]{--_bg:var(--tint-cyan-bg);--_fg:var(--tint-cyan-fg);--_bd:var(--tint-cyan-border)}
[data-tint="accent"]{--_bg:var(--accent-soft);--_fg:var(--accent-soft-text);--_bd:var(--accent-soft-border)}

/* ── components/navigation ─────────────────────────────────────────────── */
.p-nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:20px;height:var(--nav-height);padding:0 20px;background:var(--surface-page);border-bottom:1px solid var(--border-subtle)}
.p-wordmark{display:inline-flex;align-items:center;gap:.36em;font:700 var(--text-lg)/1 var(--font-sans);letter-spacing:-.01em;color:var(--text-strong);white-space:nowrap;text-decoration:none}
.p-wordmark:hover{text-decoration:none}
.p-wordmark svg{width:1.3em;height:1.3em;flex:none}
.p-nav__index{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;margin-left:-8px;border:1px solid var(--border-subtle);border-radius:var(--radius-pill);background:var(--surface-subtle);font:400 var(--text-xs)/1 var(--font-sans);color:var(--text-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.p-nav__live{width:6px;height:6px;border-radius:var(--radius-full);background:var(--status-live-dot);box-shadow:0 0 0 2px color-mix(in srgb,var(--status-live-dot) 22%,transparent);flex:none}
/* The theme toggle shows the moon in light mode and the sun in dark mode;
   without JS (no data-theme on <html>) it has nothing to do, so it hides. */
html:not([data-theme]) .p-theme-toggle{display:none}
.p-theme-toggle>span{display:inline-flex}
.p-theme-toggle>.i-sun,[data-theme="dark"] .p-theme-toggle>.i-moon{display:none}
[data-theme="dark"] .p-theme-toggle>.i-sun{display:inline-flex}

/* Segmented control (the Plus card's billing period) */
.p-seg{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--border-default);border-radius:var(--radius-control);background:var(--surface-sunken)}
.p-seg__btn{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border:0;border-radius:var(--radius-xs);background:transparent;color:var(--text-muted);font:600 var(--text-sm)/1 var(--font-sans);cursor:pointer;white-space:nowrap}
.p-seg__btn:hover{color:var(--text-strong)}
.p-seg__btn .p-icon{font-size:14px}
.p-seg__btn.is-active{background:var(--surface-card);color:var(--text-strong);box-shadow:0 0 0 1px var(--border-default),var(--shadow-xs)}

/* ── components/results ────────────────────────────────────────────────── */
.p-status{--_bg:var(--tint-gray-bg);--_fg:var(--tint-gray-fg);--_bd:var(--tint-gray-border);--_dot:var(--gray-400);display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 7px;border:1px solid var(--_bd);border-radius:var(--radius-chip);background:var(--_bg);color:var(--_fg);font:600 var(--text-xs)/1 var(--font-sans);white-space:nowrap}
.p-status__dot{width:6px;height:6px;border-radius:var(--radius-full);background:var(--_dot);flex:none}
.p-status__code{font:500 var(--text-xs)/1 var(--font-mono)}
.p-status[data-status="live"]{--_bg:var(--status-live-bg);--_fg:var(--status-live-fg);--_bd:var(--status-live-border);--_dot:var(--status-live-dot)}
.p-status[data-status="live"] .p-status__dot{box-shadow:0 0 0 2px color-mix(in srgb,var(--status-live-dot) 22%,transparent)}
.p-status[data-status="redirect"]{--_bg:var(--status-redirect-bg);--_fg:var(--status-redirect-fg);--_bd:var(--status-redirect-border);--_dot:var(--status-redirect-dot)}
.p-status[data-status="client"]{--_bg:var(--tint-orange-bg);--_fg:var(--tint-orange-fg);--_bd:var(--tint-orange-border);--_dot:var(--tint-orange-fg)}
.p-status[data-status="dead"]{--_bg:var(--status-dead-bg);--_fg:var(--status-dead-fg);--_bd:var(--status-dead-border);--_dot:var(--status-dead-dot)}
/* Favicon: the mock rows have none fetched, so a letter tile in a tint. */
.p-favicon{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:var(--radius-xs);background:var(--_fg,var(--gray-500));color:#fff;font:700 10px/1 var(--font-sans);text-transform:uppercase;flex:none;overflow:hidden}
[data-theme="dark"] .p-favicon{color:var(--gray-950)}
.p-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;font:var(--type-meta);color:var(--text-muted);min-width:0}
.p-meta__item{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font-variant-numeric:tabular-nums}
.p-meta__item .p-icon{font-size:13px;color:var(--text-faint)}
.p-meta__item+.p-meta__item::before{content:"·";margin-right:2px;color:var(--text-faint)}
/* Result row, compact (no screenshot). The page's rows are a picture of the
   console, not links, so no pointer and no hover lift. */
.p-row{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;padding:14px 16px;border:1px solid var(--border-subtle);border-radius:var(--radius-card);background:var(--gradient-card);color:inherit}
.p-row__main{display:grid;gap:5px;align-content:start;min-width:0}
.p-row__head{display:flex;align-items:center;gap:8px;min-width:0}
.p-row__host{font:var(--type-host);color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.p-row__title{font:600 var(--text-md)/1.35 var(--font-sans);color:var(--text-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-row__foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:3px}

/* ── providers ─────────────────────────────────────────────────────────── */
.p-plogo{display:inline-block;width:14px;height:14px;flex:none;border-radius:3px}
.p-plogo img{display:block;width:100%;height:100%;object-fit:contain;border-radius:inherit}
[data-theme="dark"] .p-plogo.is-mono img{filter:invert(1) hue-rotate(180deg)}
/* Provider pills are neutral (same look as filter tags) so tints stay
   reserved for status and risk colours. */
.p-pill[data-provider]{background:var(--gradient-card);border-color:var(--border-subtle);color:var(--text-body);border-radius:var(--radius-md);gap:6px}

/* ── tokens/responsive.css (the parts this page uses) ──────────────────── */
@media (max-width:900px){
:root{--gutter:16px}
.p-nav{gap:12px;padding:0 var(--gutter)}
.p-nav__index{display:none}
}
@media (max-width:640px){
.p-row{gap:10px 14px;padding:12px}
}

/* ── Landing (reference/landing.css) ───────────────────────────────────── */
/* Buttons and the wordmark keep their own colours on hover: a plain a:hover
   outranks .p-btn--primary and would paint its label in its own hover
   background. :where() keeps this at a:hover's specificity. */
a{color:var(--text-link)}a:where(:not(.p-btn,.p-wordmark)):hover{color:var(--accent-hover)}
html{scroll-behavior:smooth}body{background:var(--surface-page)}
.lp-mono{font-family:var(--font-mono)}
.lp-wrap{max-width:1160px;margin:0 auto;padding:0 var(--gutter)}.lp-wrap--wide{max-width:1280px}
/* The top bar is the console's, at its sizes (the kit's times 1.1, as in
   console.css), so the two sites share one bar; the rest of the page keeps
   the kit's own sizes. */
.lp-nav{gap:22px;height:61.5px;padding:0 22px;position:sticky;top:0;z-index:20}
.lp-nav .p-wordmark{font-size:18.5px}
.lp-nav .p-nav__index{gap:6.5px;height:26.5px;padding:0 10px;font-size:13px}
.lp-nav .p-nav__live{width:6.5px;height:6.5px}
.lp-nav .p-btn{gap:6.5px;height:35px;padding:0 13px;border-radius:6.5px;font-size:15.5px}
.lp-nav .p-btn .p-icon{font-size:16.5px}
.lp-nav .p-btn--icon{width:35px;padding:0}
.lp-nav .p-btn:focus-visible{box-shadow:0 0 0 3.5px var(--focus-ring)}
.lp-nav__links{display:flex;gap:24px;margin-left:auto;font:600 14.5px/1 var(--font-sans)}.lp-nav__links a{color:var(--text-body);text-decoration:none}.lp-nav__links a:hover{color:var(--text-strong)}
.lp-nav__right{display:flex;align-items:center;gap:6.5px}
.lp-h1{margin:0;font:700 clamp(52px,9vw,116px)/.92 var(--font-sans);letter-spacing:-.045em;color:var(--text-strong);text-wrap:balance}
.lp-h1 em,.lp-h2 em{font-style:normal;color:var(--accent)}
.lp-h2{margin:0;font:700 clamp(36px,5.2vw,64px)/1 var(--font-sans);letter-spacing:-.035em;color:var(--text-strong);text-wrap:balance}
.lp-h2--xl{font-size:clamp(40px,6.4vw,84px);max-width:1000px}
.lp-h3{margin:0;font:700 clamp(30px,3.4vw,44px)/1.04 var(--font-sans);letter-spacing:-.03em;color:var(--text-strong);text-wrap:balance}
.lp-sub{max-width:640px;margin:18px 0 0;font:400 var(--text-lg)/1.55 var(--font-sans);color:var(--text-muted);text-wrap:pretty}
.lp-head{margin-bottom:56px}.lp-head--center{text-align:center;display:grid;justify-items:center}
.lp-comment{margin:28px 0 0;font:400 13px/1.5 var(--font-mono);color:var(--text-muted)}.lp-comment--center{text-align:center}

/* Hero. It must fit above the fold on a 14" laptop (1512x~770 in a
   browser), so the padding, the headline, the lede and the logo stage also
   shrink with the viewport height, not only its width. The headline stops
   at 66px, the most "Still your attack surface." fits on one line at the
   wide wrap's 1280px. */
.lp-hero{position:relative;isolation:isolate;padding:clamp(32px,5.5vh,72px) 0 clamp(40px,7vh,104px);overflow:hidden}
.lp-hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(var(--border-strong) 1.2px,transparent 1.5px);background-size:26px 26px;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent);opacity:.7}
.lp-hero__grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.9fr);gap:40px;align-items:center}
.lp-hero__copy{display:grid;gap:22px;justify-items:start;min-width:0}
.lp-hero .lp-h1{font-size:clamp(46px,min(5vw,8.6vh),66px);line-height:.98}
.lp-hero .lp-h1 em{color:var(--text-strong);padding:0 .04em;background:linear-gradient(var(--accent-200),var(--accent-200)) 0 86%/100% 30% no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:lp-mark .9s .35s cubic-bezier(.2,.7,.2,1) both}
[data-theme="dark"] .lp-hero .lp-h1 em{background-image:linear-gradient(var(--accent-800),var(--accent-800))}
@keyframes lp-mark{from{background-size:0 30%}to{background-size:100% 30%}}
.lp-lede{max-width:600px;margin:0;font:400 clamp(17px,min(1.5vw,2.5vh),20px)/1.6 var(--font-sans);color:var(--text-body);text-wrap:pretty}
.lp-hero__search{display:grid;gap:12px;width:100%;max-width:600px;margin-top:4px}
.lp-hero__label{font:700 var(--text-xl)/1.2 var(--font-sans);letter-spacing:-.01em;color:var(--text-strong)}
.lp-hero .lp-assure{justify-content:flex-start;margin-top:-8px}
.lp-proof{display:flex;flex-wrap:wrap;gap:12px 0;margin:2px 0 0;padding-top:18px;border-top:1px solid var(--border-subtle);width:100%;max-width:600px}
.lp-proof div{display:grid;gap:4px;align-content:start;padding:0 28px}.lp-proof div:first-child{padding-left:0}.lp-proof div+div{border-left:1px solid var(--border-default)}
.lp-proof dt{font:700 30px/1 var(--font-sans);letter-spacing:-.03em;color:var(--text-strong);font-variant-numeric:tabular-nums}
.lp-proof dd{margin:0;font:500 var(--text-sm)/1.3 var(--font-sans);color:var(--text-muted)}

/* Hero: the 22 provider logos scattered round the query. Tiles are placed
   by their centre (left/top in %); everything inside sizes in cqw so the
   stage scales as one unit. landing.js moves the hit every 2.6 s: the
   active tile, its line and its card; without JS the first hit stays. */
.lp-sc{display:grid;justify-items:center;gap:20px;min-width:0}
.lp-sc__stage{position:relative;width:min(100%,600px,calc(100svh - 190px));aspect-ratio:1;container-type:inline-size}
.lp-sc__stage::before{content:"";position:absolute;left:50%;top:50%;width:70cqw;height:70cqw;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,var(--accent-100),transparent);opacity:.8}
[data-theme="dark"] .lp-sc__stage::before{background:radial-gradient(closest-side,var(--accent-soft),transparent)}
.lp-sc__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* Only the active hit's line shows; showing it again replays the draw. */
.lp-sc__line{display:none;stroke:var(--accent-400);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:lp-draw .6s cubic-bezier(.2,.7,.2,1) forwards}
.lp-sc__line.is-on{display:inline}
@keyframes lp-draw{to{stroke-dashoffset:0}}
.lp-sc__item{position:absolute;translate:-50% -50%;animation:lp-tin .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 45ms)}
@keyframes lp-tin{from{opacity:0;transform:scale(.5)}}
.lp-sc__float{animation:lp-float var(--d) ease-in-out calc(var(--i) * -.7s) infinite alternate;rotate:var(--r)}
@keyframes lp-float{to{transform:translate(var(--fx),var(--fy)) rotate(calc(var(--r) * -.5))}}
.lp-sc__tile{display:grid;place-items:center;width:var(--s);height:var(--s);border:1px solid var(--border-default);border-radius:calc(var(--s) * .28);background:var(--surface-card);box-shadow:var(--shadow-popover);transition:scale .4s cubic-bezier(.2,.7,.2,1),border-color .4s,box-shadow .4s}
.lp-sc__tile .p-plogo{width:calc(var(--s) * .5);height:calc(var(--s) * .5);border-radius:calc(var(--s) * .11)}
.is-hit .lp-sc__tile{scale:1.18;border-color:var(--accent-400);box-shadow:0 0 0 5px var(--accent-soft),var(--shadow-popover)}
.lp-sc__item.is-hit{z-index:2}
.lp-sc__core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:36cqw;display:grid;justify-items:center;gap:2.4cqw;text-align:center}
/* Hero: centre query pill and hit card */
.lp-orb__q{display:flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;background:var(--gray-900);color:#fff;font:600 16px/1 var(--font-mono);box-shadow:0 10px 24px -8px rgba(16,24,40,.4)}
[data-theme="dark"] .lp-orb__q{background:var(--gray-0);color:var(--gray-900)}
.lp-orb__q .p-icon{font-size:15px;opacity:.7}
.lp-orb__hit{display:grid;justify-items:center;gap:6px;width:100%;padding:10px 12px;border:1px solid var(--border-default);border-radius:12px;background:var(--surface-card);box-shadow:var(--shadow-popover);animation:lp-pop .45s cubic-bezier(.2,.7,.2,1) both;box-sizing:border-box}
.lp-orb__hit[hidden]{display:none}
.lp-orb__hit .lp-host{max-width:100%;color:var(--text-strong);justify-content:center}.lp-orb__hit .lp-host>span{white-space:normal;overflow-wrap:anywhere;text-align:center;font-size:11.5px;line-height:1.3}
.lp-orb__hitname{font:600 10.5px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-soft-text)}
@keyframes lp-pop{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
.lp-orb__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;font:500 var(--text-sm)/1 var(--font-sans);color:var(--text-muted)}
.lp-orb__legend span{display:flex;align-items:center;gap:8px}

/* The big search box (hero and closing call to action) */
.lp-big{display:flex;align-items:center;gap:10px;width:100%;height:68px;padding:0 8px 0 22px;border:1px solid var(--border-strong);border-radius:16px;background:var(--surface-card);box-shadow:var(--shadow-popover);box-sizing:border-box;transition:border-color 120ms,box-shadow 120ms}
.lp-big:focus-within{border-color:var(--accent-400);box-shadow:0 0 0 4px var(--focus-ring),var(--shadow-popover)}
.lp-big>.p-icon{font-size:20px;color:var(--text-muted)}
.lp-big input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font:500 19px/1 var(--font-mono);color:var(--text-strong)}.lp-big input::placeholder{color:var(--text-faint)}
.lp-big .p-btn{height:52px;padding:0 22px;border-radius:11px;font-size:16px}
.lp-assure{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;font:500 var(--text-md)/1 var(--font-sans);color:var(--text-muted)}
.lp-assure li{display:flex;align-items:center;gap:6px}.lp-assure .p-icon{color:var(--accent-icon);font-size:15px}
/* Phones get the short wording (.lp-short) so the three fit on one line. */
.lp-short{display:none}

/* Product mock-ups */
.lp-fc__k{font:600 11px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.lp-fc__pills{display:flex;flex-wrap:wrap;gap:6px}
.lp-host{display:flex;align-items:center;gap:7px;min-width:0;font:500 12px/1.2 var(--font-mono);color:var(--text-muted)}.lp-host>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-fav{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:8px;background:var(--accent-600);color:#fff;font:700 15px/1 var(--font-sans)}
.lp-win{background:var(--surface-card);border:1px solid var(--border-default);border-radius:14px;box-shadow:var(--shadow-popover);overflow:hidden;min-width:0}
.lp-win__bar{display:flex;align-items:center;gap:12px;height:38px;padding:0 14px;border-bottom:1px solid var(--border-subtle);background:var(--surface-subtle)}
.lp-dots{display:flex;gap:6px}.lp-dots i{width:10px;height:10px;border-radius:50%;background:var(--gray-300)}
.lp-win__url{flex:1;min-width:0;font:500 12px/1 var(--font-mono);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-win__foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 14px;border-top:1px solid var(--border-subtle);font:var(--type-meta);color:var(--text-muted)}
.lp-win__search{display:flex;align-items:center;gap:10px;height:48px;padding:0 16px;border-bottom:1px solid var(--border-subtle);font:500 15px/1 var(--font-mono);color:var(--text-strong)}.lp-win__search .p-icon{color:var(--text-muted);font-size:17px}
.lp-win__count{margin-left:auto;font:500 var(--text-sm)/1 var(--font-sans);color:var(--text-muted)}
.lp-win__url b{color:var(--text-strong);font-weight:600}
.lp-caret{display:inline-block;width:2px;height:1.1em;margin-left:2px;vertical-align:-3px;background:var(--accent);animation:lp-blink 1s steps(1) infinite}
@keyframes lp-blink{50%{opacity:0}}
.lp-sketch{aspect-ratio:16/10;display:grid;place-items:center;background:var(--surface-subtle)}
.lp-sketch__card{display:grid;gap:9px;width:min(46%,260px);padding:20px;border:1px solid var(--border-default);border-radius:10px;background:var(--surface-card)}
.lp-sketch__card b{font:700 14px/1.2 var(--font-sans);color:var(--text-strong)}
.lp-sketch__logo{width:24px;height:24px;border-radius:7px;background:var(--accent-600)}
.lp-sketch__line{height:6px;width:70%;border-radius:3px;background:var(--gray-200)}
.lp-sketch__field{height:26px;border:1px solid var(--border-default);border-radius:6px;background:var(--surface-field)}
.lp-sketch__btn{height:28px;border-radius:6px;background:var(--gray-900)}[data-theme="dark"] .lp-sketch__btn{background:var(--gray-300)}
.lp-hv__t{font:500 11px/1 var(--font-mono);color:var(--text-faint)}
@keyframes lp-spin{to{transform:rotate(360deg)}}
.lp-win__rows{display:grid}.lp-win__rows>*+*{border-top:1px solid var(--border-subtle)}.lp-win__rows .p-row{border:0;border-radius:0}

/* Sections */
.lp-section{padding:128px 0}.lp-section--tint{background:var(--surface-subtle);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
.lp-feat__tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.lp-tag{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--accent-soft-text)}.lp-tag::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--accent)}
.lp-chip{display:inline-flex;align-items:center;height:24px;padding:0 10px;border:1px solid var(--border-default);border-radius:999px;background:var(--surface-card);font:600 12px/1 var(--font-sans);color:var(--text-body)}
.lp-plan .p-btn,.lp-dock .p-btn{height:46px;padding:0 20px;font-size:15px;border-radius:10px}
.lp-win--code{background:var(--gray-900);border-color:var(--gray-800)}.lp-win--code .lp-win__bar{background:var(--gray-850);border-color:var(--gray-800)}.lp-win--code .lp-dots i{background:var(--gray-700)}
.lp-code{margin:0;padding:16px 0;font:400 13px/1.75 var(--font-mono);color:var(--gray-200);overflow:auto;white-space:pre}
.lp-code>div{padding:0 16px}.lp-code .n{display:inline-block;width:28px;color:var(--gray-600);user-select:none}
.lp-code .k{color:#c7b3ff}.lp-code .s{color:#a5d6a7}
.lp-code .hit{padding:2px 4px;border-radius:4px;background:rgba(246,138,74,.18);color:var(--accent-300);outline:1px solid rgba(246,138,74,.5)}
.lp-keys__verdict{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid var(--gray-800);font:600 var(--text-sm)/1 var(--font-sans);color:var(--status-live-fg)}
.lp-keys__verdict>span{display:inline-flex;align-items:center;gap:5px}.lp-host--plain{margin-left:auto;color:var(--gray-400)}
.lp-favvis__note{flex-basis:100%;font:400 12px/1.3 var(--font-mono);color:var(--accent-soft-text)}
.lp-icon-tile{display:grid;place-items:center;width:56px;height:56px;border-radius:14px;background:var(--accent-soft);color:var(--accent-soft-text);font-size:26px}

/* Dark bands (use cases, closing call to action): dark in both themes */
.lp-band{padding:128px 0;background:var(--gray-950);color:var(--text-body)}html[data-theme="dark"] .lp-band{background:var(--gray-900);border-top:1px solid var(--gray-800);border-bottom:1px solid var(--gray-800)}
.lp-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:20px}
.lp-card{display:grid;gap:14px;align-content:start;padding:36px;border:1px solid var(--gray-800);border-radius:20px;background:var(--gray-900)}html[data-theme="dark"] .lp-card{background:var(--gray-850)}
.lp-card .lp-h3{margin-top:10px}
.lp-card__lead{margin:0;font:600 var(--text-lg)/1.45 var(--font-sans);color:var(--text-strong);text-wrap:pretty}
.lp-card__body{margin:0;font:400 var(--text-base)/1.6 var(--font-sans);color:var(--text-body);text-wrap:pretty}

/* Coverage: two marquee rows, hosting to the left, app builders to the
   right; each list is drawn twice so a -50% shift loops seamlessly. */
.lp-section--compact{padding:104px 0}.lp-head--tight{margin-bottom:40px}
.lp-big-n{color:var(--accent)}
.lp-marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.lp-marq+.lp-marq{margin-top:12px}
.lp-marq__track{display:flex;width:max-content;animation:lp-marq var(--dur,60s) linear infinite}
.lp-marq.is-rev .lp-marq__track{animation-direction:reverse}.lp-marq:hover .lp-marq__track{animation-play-state:paused}
@keyframes lp-marq{to{transform:translateX(-50%)}}
.lp-marq__list{display:flex;gap:12px;margin:0;padding:4px 12px 4px 0;list-style:none}
.lp-pcard{flex:none;display:flex;align-items:center;gap:12px;padding:14px 20px 14px 16px;border:1px solid var(--border-subtle);border-radius:14px;background:var(--gradient-card);transition:border-color .2s,box-shadow .2s}
.lp-pcard:hover{border-color:var(--border-default);box-shadow:var(--shadow-hover)}
.lp-pcard div{display:grid;gap:3px}.lp-pcard b{font:600 var(--text-md)/1.2 var(--font-sans);color:var(--text-strong);white-space:nowrap}
.lp-pcard .lp-mono{font-size:12px;color:var(--text-muted);white-space:nowrap}
.lp-pcard .p-plogo{width:20px;height:20px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.lp-marq{overflow-x:auto}.lp-marq__track{animation:none}.lp-marq__list[aria-hidden]{display:none}}

/* Activity: counters since page load at the average daily rate (landing.js). */
.lp-live{border:1px solid var(--border-subtle);border-radius:24px;background:var(--surface-subtle);overflow:hidden}
.lp-live__bar{display:flex;align-items:center;gap:10px;padding:16px 28px;border-bottom:1px dashed var(--border-default);font:600 var(--text-md)/1 var(--font-sans);color:var(--text-strong)}
.lp-live__clock{margin-left:auto;font:500 var(--text-md)/1 var(--font-mono);color:var(--text-muted);font-variant-numeric:tabular-nums}
.lp-live__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.lp-live__cell{display:flex;flex-direction:column;gap:12px;padding:28px;min-width:0}.lp-live__cell+.lp-live__cell{border-left:1px dashed var(--border-default)}
.lp-live__cell.is-ping{animation:lp-ping 1.2s ease-out}
.lp-live__n{font:700 clamp(40px,4.6vw,68px)/1 var(--font-sans);letter-spacing:-.04em;color:var(--text-strong);font-variant-numeric:tabular-nums}
.lp-live__cell.lp-lane--keys .lp-live__n{color:var(--accent)}
.lp-live__day{margin-top:auto;padding-top:14px;border-top:1px solid var(--border-subtle);font:500 12.5px/1 var(--font-mono);color:var(--text-muted)}
.lp-flow__k{display:flex;align-items:center;gap:8px;font:600 12px/1.2 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}.lp-flow__k .p-icon{font-size:15px;color:var(--text-faint)}
.lp-flow__note{margin:0;font:400 var(--text-md)/1.45 var(--font-sans);color:var(--text-body);text-wrap:pretty}
.lp-lane--keys .lp-flow__k .p-icon{color:var(--accent-icon)}
@keyframes lp-ping{from{background:var(--accent-soft)}}

/* Feature tour: one 26 s loop driven by landing.js, which shows one view
   at a time and toggles .is-in / .is-hover / .is-on from the clock. */
.lp-tour{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:56px;align-items:center}
.lp-tour__stage{position:relative;padding:40px;border:1px solid var(--border-subtle);border-radius:24px;background:var(--surface-sunken);min-width:0;overflow:hidden}
.lp-tour__win{display:flex;flex-direction:column;height:500px;box-shadow:0 2px 4px rgba(16,24,40,.04),0 24px 56px -16px rgba(16,24,40,.22)}
.lp-tour__body{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--surface-subtle)}
.lp-tour__view{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;padding:14px;animation:lp-pop .35s cubic-bezier(.2,.7,.2,1) both}
.lp-tour__view--page,.lp-tour__view--code{gap:12px;background:var(--surface-card)}
.lp-tin{opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1)}.lp-tin.is-in{opacity:1;transform:none}
.lp-tr{display:flex;align-items:center;gap:6px 10px;flex:none;min-height:46px;padding:8px 12px;border:1px solid var(--border-subtle);border-radius:10px;background:var(--surface-card);box-sizing:border-box;min-width:0;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1),border-color .2s,box-shadow .2s,background .4s}
.lp-tr.is-hover{border-color:var(--accent-400);box-shadow:0 0 0 3px var(--focus-ring)}
.lp-tr.is-odd{background:var(--accent-soft);border-color:var(--accent-soft-border)}
.lp-tr--note{flex-wrap:wrap}.lp-tr__line{display:flex;align-items:center;gap:10px;flex:1 1 100%;min-width:0}.lp-tr .lp-favvis__note{flex-basis:100%}
.lp-tr__host{flex:0 1 auto;min-width:0;font:500 13px/1.2 var(--font-mono);color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-tr__title{flex:1 1 0;min-width:0;font:400 var(--text-md)/1.2 var(--font-sans);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-tr__end{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
.lp-fav--sm{width:22px;height:22px;border-radius:6px;font-size:12px}
.lp-tour__app{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--border-subtle);min-width:0}.lp-tour__app .lp-tr__host{font-size:14px}
.lp-tour__app-end{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
.lp-tour__fav{position:relative;display:inline-flex;flex:none;border-radius:9px;transition:box-shadow .2s}.lp-tour__fav.is-hover{box-shadow:0 0 0 3px var(--accent-400)}
.lp-tour__pill{position:relative;display:inline-flex;border-radius:999px;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .2s}.lp-tour__pill.is-hover{box-shadow:0 0 0 3px var(--focus-ring)}
.lp-tour__tip{position:absolute;left:50%;bottom:calc(100% + 8px);z-index:3;padding:7px 10px;border-radius:7px;background:var(--gray-900);color:#fff;font:500 12px/1 var(--font-sans);white-space:nowrap;opacity:0;pointer-events:none;translate:-50% 4px;transition:opacity .2s,translate .2s}
.lp-tour__tip--below{left:0;bottom:auto;top:calc(100% + 8px);translate:0 -4px}
.is-hover>.lp-tour__tip{opacity:1;translate:-50% 0}.is-hover>.lp-tour__tip--below{translate:0 0}
[data-theme="dark"] .lp-tour__tip{background:var(--gray-0);color:var(--gray-900)}
.lp-tour__page{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:18px;flex:1;min-height:0}
.lp-tour__page .lp-sketch{aspect-ratio:auto;height:100%;border:1px solid var(--border-subtle);border-radius:10px;display:flex;place-items:stretch;overflow:hidden}
.lp-tour__page .lp-sketch__card{flex:1;width:auto;gap:12px;align-content:center;padding:28px 24px;border:0;border-radius:0}.lp-tour__page .lp-sketch__card b{font-size:17px}.lp-tour__page .lp-sketch__logo{width:32px;height:32px;border-radius:9px}.lp-tour__page .lp-sketch__field{height:36px;border-radius:8px}.lp-tour__page .lp-sketch__btn{height:38px;border-radius:8px}
.lp-tour__text{display:flex;flex-direction:column;gap:10px;min-width:0}
.lp-tour__text p{margin:0 0 6px;font:400 var(--text-md)/1.6 var(--font-sans);color:var(--text-body);text-wrap:pretty}
.lp-tour__text mark{background:transparent;color:inherit;font-weight:600;border-radius:3px;padding:0 3px;transition:background .3s,color .3s}.lp-tour__text mark.is-on{background:var(--tint-purple-bg);color:var(--tint-purple-fg)}
.lp-tour .lp-code{padding:12px 0}.lp-tour .lp-code>div{transition:background .12s}.lp-tour .lp-code>div.is-scan{background:rgba(255,255,255,.07)}
.lp-tour .lp-code .s{transition:background .3s,color .3s,outline-color .3s}
.lp-tour .lp-keys__verdict{min-height:46px;box-sizing:border-box;padding-top:8px;padding-bottom:8px}
.lp-tour__chk{display:inline-flex;align-items:center;gap:7px;color:var(--gray-400);font-weight:500}
.lp-tour__spin{animation:lp-spin 1s linear infinite}
.lp-tour__cur{position:absolute;left:0;top:0;z-index:5;pointer-events:none;transition:transform .9s cubic-bezier(.55,0,.2,1)}
.lp-tour__cur svg{display:block;width:22px;height:22px;margin:-2.3px 0 0 -3.7px;filter:drop-shadow(0 2px 3px rgba(16,24,40,.3));transform-origin:20% 15%;transition:transform .12s}
.lp-tour__cur.is-click svg{transform:scale(.82)}
.lp-tour__cur>i{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;border:2px solid var(--accent);opacity:0;box-sizing:border-box}
.lp-tour__cur.is-click>i{animation:lp-ripple .45s ease-out}
@keyframes lp-ripple{from{opacity:.9;transform:scale(.3)}to{opacity:0;transform:scale(1.5)}}
.lp-tour__pp{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:var(--text-muted);font-size:14px;cursor:pointer}.lp-tour__pp:hover{background:var(--surface-card);color:var(--text-strong)}
.lp-tour__rail{display:grid;gap:28px;align-content:center;min-width:0}
.lp-tour__chs{list-style:none;margin:0;padding:0;display:grid}
.lp-tour__ch{position:relative;display:grid;gap:8px;width:100%;padding:16px 0 16px 24px;border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
.lp-tour__ch::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--border-default)}
.lp-tour__bar{position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);transform-origin:top;transform:scaleY(0)}
.lp-tour__ch b{font:700 var(--text-xl)/1.2 var(--font-sans);letter-spacing:-.015em;color:var(--text-muted);text-wrap:balance;transition:color .3s}
.lp-tour__ch.is-on b,.lp-tour__ch:hover b{color:var(--text-strong)}
.lp-tour__fact{font:400 var(--text-md)/1.5 var(--font-sans);color:var(--text-muted);text-wrap:pretty;transition:color .3s}.lp-tour__ch.is-on .lp-tour__fact{color:var(--text-body)}
.lp-tour__ch:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:6px}
.lp-tour [hidden]{display:none!important}
.lp-tour__si{display:inline-flex}.lp-tour__spin{display:inline-flex}
.lp-keys__verdict>.lp-tour__ok{display:contents}

/* Three ways in: a stack of three cards; landing.js rotates the slots. */
/* On phones the tilted back cards reach past the screen edge; clip the
   section, not the stage, so the page never scrolls sideways. */
#access{overflow-x:clip}
.lp-ways{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.lp-ways__copy{display:grid;gap:28px;justify-items:start;min-width:0}.lp-ways__copy .lp-sub{margin:0}
.lp-way--accent{--_c:var(--accent);--_bg:var(--accent-50);--_fg:var(--accent-soft-text)}[data-theme="dark"] .lp-way--accent{--_bg:var(--accent-soft)}
.lp-way--ink{--_c:var(--gray-900);--_bg:var(--gray-100);--_fg:var(--gray-900)}[data-theme="dark"] .lp-way--ink{--_c:var(--gray-300);--_bg:var(--gray-850);--_fg:var(--gray-100)}
.lp-way--purple{--_c:var(--tint-purple-fg);--_bg:var(--tint-purple-bg);--_fg:var(--tint-purple-fg)}
.lp-ways__thumbs{display:flex;gap:14px}
.lp-ways__thumb{display:grid;place-items:center;width:60px;height:60px;padding:0;border:2px solid var(--_c);border-radius:50%;background:var(--_bg);color:var(--_fg);font-size:24px;cursor:pointer;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.lp-ways__thumb:hover{transform:translateY(-2px)}
.lp-ways__thumb.is-on{transform:scale(1.12);box-shadow:0 0 0 3px var(--surface-page),0 0 0 5px var(--_c),var(--shadow-popover)}
.lp-ways__thumb:focus-visible{outline:2px solid var(--focus-ring);outline-offset:6px}
.lp-ways__stage{position:relative;height:540px;min-width:0}
.lp-way{--x:0px;--y:0px;--r:0deg;--lift:0px;position:absolute;left:50%;top:50%;width:min(360px,80%);display:grid;gap:14px;padding:12px 12px 22px;border:1px solid var(--border-default);border-top:4px solid var(--_c);border-radius:20px;background:var(--surface-card);box-shadow:0 2px 4px rgba(16,24,40,.04),0 16px 40px -20px rgba(16,24,40,.2);box-sizing:border-box;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y) + var(--lift))) rotate(var(--r));transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.lp-way.is-s0{--y:28px;z-index:3;box-shadow:0 2px 4px rgba(16,24,40,.04),0 32px 64px -20px rgba(16,24,40,.3)}
.lp-way.is-s1{--x:30%;--y:-34px;--r:5deg;z-index:1;cursor:pointer}
.lp-way.is-s2{--x:-28%;--y:-8px;--r:-6deg;z-index:2;cursor:pointer}
.lp-way.is-s1:hover,.lp-way.is-s2:hover{--lift:-12px}
.lp-way__vis{display:grid;align-content:center;height:210px;padding:16px;border-radius:12px;background:var(--_bg);overflow:hidden;box-sizing:border-box}
.lp-way--ink .lp-way__vis{background:var(--gray-950)}
.lp-way__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:6px 10px 0}
.lp-way__name{margin:0;font:700 28px/1 var(--font-sans);letter-spacing:-.03em;color:var(--text-strong)}
.lp-way__label{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--_fg);white-space:nowrap}
.lp-way__body{margin:0;padding:0 10px;font:400 var(--text-base)/1.55 var(--font-sans);color:var(--text-body);text-wrap:pretty}
.lp-way__win{display:grid;border:1px solid var(--border-default);border-radius:10px;background:var(--surface-card);overflow:hidden;box-shadow:var(--shadow-xs)}
.lp-way__q{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;border-bottom:1px solid var(--border-subtle);font:500 13px/1 var(--font-mono);color:var(--text-strong)}.lp-way__q .p-icon{color:var(--text-muted);font-size:14px}
.lp-way__row{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;min-width:0}.lp-way__row+.lp-way__row{border-top:1px solid var(--border-subtle)}.lp-way__row .lp-tr__host{flex:1;font-size:12px}
.lp-way__code{padding:0;font-size:11.5px;line-height:1.6;overflow:hidden}.lp-way__code>div{padding:0}
.lp-way__chat{display:grid;gap:10px;align-content:center}
.lp-way__msg{margin:0;max-width:86%;padding:9px 12px;border:1px solid var(--tint-purple-border);border-radius:12px 12px 12px 4px;background:var(--surface-card);font:400 13px/1.45 var(--font-sans);color:var(--text-body);text-wrap:pretty}
.lp-way__msg b{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--text-strong);overflow-wrap:anywhere}
.lp-way__msg--me{justify-self:end;border-color:var(--tint-purple-fg);border-radius:12px 12px 4px 12px;background:var(--tint-purple-fg);color:#fff}[data-theme="dark"] .lp-way__msg--me{color:var(--gray-950)}
.lp-way__tool{justify-self:start;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border:1px dashed var(--tint-purple-fg);border-radius:999px;font:500 11.5px/1 var(--font-mono);color:var(--tint-purple-fg)}
@media (max-width:1000px){.lp-ways{grid-template-columns:minmax(0,1fr);gap:40px}}
@media (max-width:640px){.lp-ways__stage{height:500px}.lp-way{width:min(320px,84%)}.lp-way.is-s1{--x:14%}.lp-way.is-s2{--x:-14%}.lp-way__vis{height:184px}}
@media (prefers-reduced-motion:reduce){.lp-way,.lp-ways__thumb{transition:none}}

/* Pricing */
.lp-plans{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px;max-width:940px;margin:0 auto;align-items:stretch}
.lp-plan{display:flex;flex-direction:column;gap:20px;padding:36px;border:1px solid var(--border-default);border-radius:24px;background:var(--surface-card);min-width:0}
.lp-plan.is-featured{position:relative;isolation:isolate;overflow:hidden;border-color:var(--accent-600);background:var(--gray-950);color:var(--text-body);box-shadow:0 0 0 4px var(--accent-soft),0 32px 64px -24px rgba(16,24,40,.45)}
.lp-plan.is-featured::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(90% 70% at 100% 0%,rgba(234,108,42,.24),transparent 65%)}
.lp-plan.is-featured::after{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.09) 1.1px,transparent 1.4px);background-size:22px 22px;-webkit-mask-image:linear-gradient(200deg,#000,transparent 55%);mask-image:linear-gradient(200deg,#000,transparent 55%)}
.lp-plan__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;min-height:32px}
.lp-plan__name{display:inline-flex;align-items:center;height:32px;padding:0 14px;border:1px solid var(--border-default);border-radius:999px;background:var(--surface-subtle);font:700 var(--text-base)/1 var(--font-sans);letter-spacing:-.01em;color:var(--text-strong)}.lp-plan.is-featured .lp-plan__name{border-color:rgba(234,108,42,.45);background:rgba(234,108,42,.16);color:var(--accent-300)}
.lp-plan__bill{display:flex;align-items:center;gap:10px}
/* Without JS (no data-theme on <html>) the billing switch can't switch: the
   card keeps its yearly price and the switch hides. */
html:not([data-theme]) .lp-plan__bill{display:none}
.lp-plan__bill [hidden]{display:none}
.lp-plan__price{display:flex;align-items:baseline;gap:8px;margin-top:6px}.lp-plan__price span{font:700 72px/1 var(--font-sans);letter-spacing:-.05em;color:var(--text-strong);font-variant-numeric:tabular-nums}.lp-plan__price small{font:500 var(--text-base)/1 var(--font-sans);color:var(--text-muted)}
.lp-plan__n{display:inline-block;animation:lp-roll .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes lp-roll{from{opacity:0;transform:translateY(.35em)}}
.lp-plan__note{margin:-8px 0 0;font:500 var(--text-md)/1.3 var(--font-sans);color:var(--text-muted)}
.lp-plan__quota{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:4px 0 0;border:1px solid var(--border-subtle);border-radius:14px;background:var(--surface-subtle)}
.lp-plan.is-featured .lp-plan__quota{background:rgba(255,255,255,.03);border-color:var(--gray-800)}
.lp-plan__quota div{display:grid;gap:6px;align-content:start;padding:16px 18px;min-width:0}.lp-plan__quota div+div{border-left:1px solid var(--border-subtle)}.lp-plan.is-featured .lp-plan__quota div+div{border-color:var(--gray-800)}
.lp-plan__quota dt{font:700 30px/1 var(--font-sans);letter-spacing:-.03em;color:var(--text-strong);font-variant-numeric:tabular-nums}
.lp-plan__quota dd{margin:0;font:500 var(--text-sm)/1.3 var(--font-sans);color:var(--text-muted)}
.lp-plan__meter{display:block;height:4px;margin-top:6px;border-radius:4px;background:var(--border-default);overflow:hidden}.lp-plan.is-featured .lp-plan__meter{background:var(--gray-800)}
.lp-plan__meter i{display:block;height:100%;min-width:4px;border-radius:4px;background:var(--gray-400)}.lp-plan.is-featured .lp-plan__meter i{background:var(--accent-400)}
.lp-plan__plus{margin:0 0 -8px;font:600 var(--text-sm)/1 var(--font-sans);color:var(--text-strong)}
.lp-plan ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;flex:1;align-content:start}
.lp-plan li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;font:400 var(--text-base)/1.45 var(--font-sans);color:var(--text-body)}.lp-plan li b{color:var(--text-strong)}
.lp-plan li .p-icon{color:var(--accent-icon);font-size:16px;margin-top:2px}.lp-plan.is-featured li .p-icon{color:var(--accent-400)}
@media (max-width:820px){.lp-plans{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.lp-plan__n{animation:none}}
.lp-more{display:flex;flex-wrap:wrap;align-items:center;gap:20px 24px;max-width:880px;margin:20px auto 0;padding:28px 36px;border:1px solid var(--border-default);border-radius:20px;background:var(--surface-card);box-sizing:border-box}.lp-more>div{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 320px}.lp-more b{font:700 var(--text-xl)/1.2 var(--font-sans);letter-spacing:-.015em;color:var(--text-strong)}.lp-more span:not(.lp-icon-tile){font:400 var(--text-base)/1.55 var(--font-sans);color:var(--text-body);text-wrap:pretty}.lp-more .lp-icon-tile{flex:none;width:48px;height:48px;border-radius:12px;font-size:22px}.lp-more .p-btn{height:46px;padding:0 20px;font-size:15px;border-radius:10px}

/* Closing call to action and footer */
.lp-band--cta{background:var(--gray-950)}
.lp-cta__inner{display:grid;justify-items:center;gap:32px;text-align:center}
.lp-cta__inner .lp-big{max-width:640px}
.lp-foot{border-top:1px solid var(--border-subtle)}
.lp-foot__inner{display:grid;grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));gap:32px;padding-top:56px;padding-bottom:40px}
.lp-foot__brand p{margin:10px 0 0;font:var(--type-meta);color:var(--text-muted)}
.lp-foot nav{display:grid;gap:10px;align-content:start;font:400 var(--text-md)/1.3 var(--font-sans)}.lp-foot nav b{font:600 12px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px}
.lp-foot nav a{color:var(--text-body);text-decoration:none}.lp-foot nav a:hover{color:var(--text-strong)}
.lp-foot__base{padding-top:20px;padding-bottom:32px;border-top:1px solid var(--border-subtle);font:var(--type-meta);color:var(--text-muted)}

/* Sticky search dock: shown by landing.js while neither the hero search nor
   the closing call to action is on screen. Once slid out it is also hidden,
   or its shadow would still show along the bottom edge. */
.lp-dock{position:fixed;left:50%;bottom:20px;z-index:30;display:flex;align-items:center;gap:18px;padding:7px 7px 7px 22px;border:1px solid var(--gray-800);border-radius:999px;background:var(--gray-900);box-shadow:0 12px 40px rgba(0,0,0,.28);font:400 var(--text-md)/1.2 var(--font-sans);color:var(--gray-300);white-space:nowrap;transform:translate(-50%,160%);visibility:hidden;transition:transform 240ms cubic-bezier(.2,.7,.2,1),visibility 0s 240ms}
.lp-dock.is-on{transform:translate(-50%,0);visibility:visible;transition:transform 240ms cubic-bezier(.2,.7,.2,1)}html[data-consent-open] .lp-dock{visibility:hidden}.lp-dock b{color:var(--gray-0);font-weight:600}.lp-dock .p-btn{border-radius:999px}

@media (prefers-reduced-motion:reduce){.lp-sc__item,.lp-sc__float,.lp-sc__line{animation:none}.lp-sc__line{stroke-dashoffset:0}.lp-orb__hit{animation:none}.lp-hero .lp-h1 em,.lp-caret{animation:none}.lp-tin,.lp-tr,.lp-tour__view{transition:none;animation:none}.lp-dock,.lp-dock.is-on{transition:none}html{scroll-behavior:auto}}
@media (max-width:900px){.lp-nav{gap:13px;padding:0 17.5px}}
@media (max-width:1000px){
.lp-hero__grid{grid-template-columns:minmax(0,1fr);gap:64px}
.lp-live__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lp-live__cell:nth-child(3){border-left:0}.lp-live__cell:nth-child(n+3){border-top:1px dashed var(--border-default)}
.lp-tour{grid-template-columns:minmax(0,1fr);gap:40px}.lp-tour__chs{grid-template-columns:repeat(2,minmax(0,1fr))}
.lp-nav__links{display:none}.lp-nav__right{margin-left:auto}
}
@media (max-width:640px){
.lp-nav .p-nav__index,.lp-nav__right .p-btn--ghost:not([aria-label]){display:none}
.lp-hero{padding:48px 0 72px}
.lp-big{height:auto;flex-wrap:wrap;padding:10px;gap:8px}.lp-big>.p-icon{margin-left:8px}.lp-big input{height:44px;font-size:17px}.lp-big .p-btn{width:100%;justify-content:center}
.lp-long{display:none}.lp-short{display:inline}
.lp-assure{gap:8px 14px;font-size:13px}.lp-assure li{gap:5px}.lp-assure .p-icon{font-size:13px}
/* The three proof figures stay on one row: equal columns, the labels wrap. */
.lp-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.lp-proof div{padding:0 12px}.lp-proof dt{font-size:26px}.lp-proof dd{text-wrap:balance}
.lp-section,.lp-band{padding:80px 0}.lp-head{margin-bottom:40px}
.lp-tour__stage{padding:36px 10px 10px;border-radius:18px}.lp-tour__win{height:460px}.lp-tour__chs{grid-template-columns:minmax(0,1fr)}.lp-tour__page{grid-template-columns:minmax(0,1fr)}.lp-tour__page .lp-sketch,.lp-tr__title,.lp-tr .lp-hv__t,.lp-tr__mail{display:none}.lp-tour__app-end .p-pill{display:none}
.lp-live__bar{padding:14px 18px}.lp-live__cell{padding:20px 18px}
.lp-card,.lp-plan{padding:24px}
.lp-foot__inner{grid-template-columns:repeat(2,minmax(0,1fr))}.lp-foot__brand{grid-column:1/-1}
.lp-dock{left:12px;right:12px;transform:translateY(160%);justify-content:space-between;padding-left:16px}.lp-dock.is-on{transform:none}.lp-dock>span{overflow:hidden;text-overflow:ellipsis}
}