- {/* Dashed Pattern */} -
-
- - {/* Hero Section */} -
-
-

Build on SignalWire

-
- Voice, video, messaging, and AI — one programmable platform, every interface you need. + + +
+
+ {/* Hero: a docs orientation surface, not a second marketing navbar. */} +
+
+

SignalWire developer platform

+

One programmable platform for every communication.

+

+ Build voice, messaging, video, and AI applications from your backend, the browser, or the phone network. +

+
-
- - {/* Getting Started Banner */} -
- - New to SignalWire? Set up your account, grab API credentials, and start building. - -
- - {/* What are you building? */} -
-
-

What are you building?

+ + + {/* Native Fern tabs keep the examples interactive and accessible. */} +
+
+
+ + PRODUCT_EXAMPLES + ready +
+
+ + + + +```python +from signalwire import AgentBase + +agent = AgentBase(name="quickstart-agent") +agent.set_prompt_text("You are a concise and helpful assistant.") +agent.run() +``` + + + + +```bash +curl --request POST \ + --url "https://${SIGNALWIRE_SPACE}.signalwire.com/api/messaging/messages" \ + --user "$SIGNALWIRE_PROJECT_ID:$SIGNALWIRE_API_TOKEN" \ + --header "Content-Type: application/json" \ + --data '{ + "from": "+15559876543", + "to": "+15551234567", + "body": "Hello from SignalWire!" + }' +``` + + + + +```yaml +version: 1.0.0 +sections: + main: + - answer: {} + - play: + url: "say:Hello World!" + - hangup: {} +``` + + + + +```typescript +import { embeddableCall } from "@signalwire/js"; + +const call = await embeddableCall({ + to: "/public/conference", + embedToken: "YOUR_EMBED_TOKEN", + host: "your-space.signalwire.com", +}); +``` + + + + +
+
+
- - - LLM-powered phone agents and virtual assistants - - - WebRTC voice, video, and chat in your app - - - Backend call routing, SMS, and IVR systems - - - Drag-and-drop call flows and Dashboard AI agents - - -
- - {/* Interfaces & SDKs */} -
-
-

Interfaces & SDKs

-

- APIs, markup languages, and client libraries for building on SignalWire. -

+ {/* + Feature destinations are provisional until canonical platform guide hubs + exist. Keep this directory structure independent from the eventual route + taxonomy so links can move from references to guides without a redesign. + */} +
+
+ 01 / Product directory +

Explore by product

+

Go directly to the communication capability or implementation guide you need.

+
+ +
+ + + + +
+
+ +
+
+ 02 / Interfaces +

Choose how you build

+

Start with a primary implementation interface, then use the supporting tools as needed.

+
- - - Complete API reference for voice, video, messaging, and AI services. +
Primary interfaces
+ + + Build agents and control calls from your backend. - - Markup language that unifies LLMs, TTS, and STT with PSTN, SIP, and WebRTC. + + Provision resources and control calls over HTTP. - - Build AI agents, control calls, send messages, and more. + + Describe communication flows in JSON or YAML. - - Add video calling, audio calling, and chat directly to your website. + + WebRTC voice, video, and chat in the browser. -
- - {/* Tools */} -
-
-

Tools

-

- No-code builders and utilities to accelerate development. -

-
- - - Build drag-and-drop calling applications without writing code. +
Tools
+ + + Drag-and-drop calling applications. - - Manage your SignalWire space, phone numbers, and resources. + + Manage your Space and resources. - - Scaffold a new SignalWire project in seconds. + + Scaffold a new project in seconds. - - Interactive shell for testing SWML scripts and API calls. + + Interactive shell for SWML and API calls. -
- -{/* Twilio Migration */} -
- - Migrating from Twilio*? Drop-in compatible APIs and SDKs — switch with a few lines of code. - -
-

*Twilio and TwiML are trademarks of Twilio, Inc. SignalWire, Inc. and its products are not affiliated with or endorsed by Twilio, Inc.

+ +
+
+ +

Migrating from Twilio*? Use drop-in compatible APIs and SDKs to switch with a few lines of code.

+ Compatibility API +
+

*Twilio and TwiML are trademarks of Twilio, Inc. SignalWire, Inc. and its products are not affiliated with or endorsed by Twilio, Inc.

+
+ + + + + +SignalWire is a programmable communications platform for building voice, messaging, video, and AI applications. + +## Start here + +- [Platform getting started](/docs/platform/getting-started) — Set up a SignalWire Space, get API credentials, and choose an implementation path. +- [Build your first AI agent](/docs/platform/ai/quickstart) — Create and run a conversational voice agent with the SignalWire Server SDK. +- [Complete documentation index](/docs/llms.txt) — Browse the machine-readable index of all SignalWire documentation sections. + +## Products and capabilities + +- [AI](/docs/platform/ai) — Build conversational voice and text agents that can call tools and act on external systems. +- [Calling](/docs/platform/calling) — Find the primary documentation for programmable calling across PSTN, SIP, and WebRTC. +- [Messaging](/docs/platform/messaging) — Send and receive SMS and MMS messages and manage production messaging traffic. +- [Voice](/docs/platform/voice) — Build and control voice calls, call flows, recordings, and related telephony features. +- [Video](/docs/platform/video) — Add programmable video rooms, conferences, and video communications to applications. +- [Fax](/docs/platform/fax) — Send, receive, and manage faxes through SignalWire. +- [Phone numbers](/docs/platform/phone-numbers) — Search, purchase, configure, and manage SignalWire phone numbers. +- [WhatsApp](/docs/platform/messaging/whatsapp) — Configure and send WhatsApp messages through SignalWire. +- [Chat](/docs/platform/chat) — Add real-time in-app chat and messaging to client applications. + +## Developer interfaces + +- [Server SDKs](/docs/server-sdks) — Build agents and control communications from backend applications using supported language SDKs. +- [REST APIs](/docs/apis) — Provision resources and control SignalWire services through HTTP endpoints. +- [SWML](/docs/swml) — Describe and execute communication workflows using SignalWire Markup Language in JSON or YAML. +- [Browser SDK](/docs/browser-sdk/v4/guides/overview) — Add WebRTC voice, video, and chat capabilities to browser applications. + +## Tools and migration + +- [Call Flow Builder](/docs/call-flow-builder) — Create calling applications with a visual drag-and-drop workflow editor. +- [WireStarter](/docs/platform/wirestarter) — Scaffold a new SignalWire application from a ready-to-use project template. +- [SWSH](/docs/platform/swsh) — Use an interactive shell to develop and test SWML scripts and API requests. +- [Compatibility API](/docs/compatibility-api) — Migrate Twilio-compatible applications to SignalWire with minimal code changes. + + diff --git a/fern/products/platform/pages/ai/overview.mdx b/fern/products/platform/pages/ai/overview.mdx index c4871d74fd..d547042749 100644 --- a/fern/products/platform/pages/ai/overview.mdx +++ b/fern/products/platform/pages/ai/overview.mdx @@ -72,6 +72,37 @@ flowchart LR +## AI capabilities + +Explore the ways you can add AI to text conversations and live calls. Each capability links to its +canonical API, SDK, or SWML reference. + + + + + Hold text conversations with the same SignalWire AI agent that handles voice calls. Use the REST + API directly, [`AIChatClient`](/docs/server-sdks/reference/python/agents/ai-chat-client) from a + trusted server, or [`ChatGateway`](/docs/server-sdks/reference/python/agents/chat-gateway) from a + browser-facing application. + + + + Attach a real-time AI observer that listens to a live call and streams coaching, compliance + alerts, or other agent-facing insights without speaking on the call. + + + + Translate both sides of a voice conversation in real time, inject translated speech, and request + summaries during or after the session. + + + + Stream real-time transcripts to your application and request an AI-generated summary while the + session is active or when it ends. + + + + ## How system-directed AI works A conversation moves between the model and your systems as the situation requires: diff --git a/fern/products/swml/pages/reference/methods/calling/overview.mdx b/fern/products/swml/pages/reference/methods/calling/overview.mdx index 53cc4d6879..f2e0867279 100644 --- a/fern/products/swml/pages/reference/methods/calling/overview.mdx +++ b/fern/products/swml/pages/reference/methods/calling/overview.mdx @@ -265,6 +265,9 @@ out to your backend via SWAIG functions or webhooks. Hand the call to an Amazon Bedrock-backed AI agent. + + Attach a real-time AI observer that coaches a human agent without speaking on the call. + ### Call lifecycle diff --git a/fern/styles.css b/fern/styles.css index c411bf8256..b372617fac 100644 --- a/fern/styles.css +++ b/fern/styles.css @@ -134,137 +134,837 @@ a[href*="god.gw.postman.com"] > img { .lp-page-container { min-height: 100vh; + overflow-x: clip; + background: var(--bg-page); + font-family: var(--typography-body-font-family), sans-serif; +} + +/* Homepage-only semantic colors. Brand accents stay stable while surfaces, + foregrounds, links, and code contrast follow Fern's active theme. */ +.lp-command-center { + --lp-brand-on-accent: #fafbfc; + --lp-button-secondary-bg: var(--bg-surface); + --lp-button-secondary-fg: var(--fg-headings); + --lp-fuchsia-text: #ab0a42; + --lp-browser-accent: var(--sw-purple); + --lp-code-keyword: var(--sw-blue); + --lp-workbench-shadow: 0 14px 42px rgba(var(--sw-blue-rgb), 0.08); +} + +.dark .lp-command-center { + --lp-button-secondary-bg: #fafbfc; + --lp-button-secondary-fg: #0e0e18; + --lp-fuchsia-text: var(--sw-fuchsia); + --lp-browser-accent: #bb88ff; + --lp-code-keyword: #7aabff; + --lp-workbench-shadow: 0 14px 42px rgba(var(--sw-blue-rgb), 0.12); +} + +/* Scope the page canvas through :has() so the homepage follows the active + Fern theme without changing any other documentation route. */ +html:has(.lp-command-center), +body:has(.lp-command-center), +body:has(.lp-command-center) .fern-main, +body:has(.lp-command-center) .width-before-scroll-bar { + background: var(--bg-page) !important; +} + +.lp-command-shell { + max-width: 72rem; + margin: 0 auto; + border-right: 1px solid var(--border-default); + border-left: 1px solid var(--border-default); +} + +.lp-hero { position: relative; + padding: 5rem 2rem 3rem; +} - .dashed-pattern { - position: absolute; - top: -50vh; - height: calc(100% + 50vh); - width: 1rem; - opacity: 1; - pointer-events: none; - mask: linear-gradient( - to bottom, - rgba(0, 0, 0, 1) 0%, - rgba(0, 0, 0, 1) 90%, - transparent 100% - ); - -webkit-mask: linear-gradient( - to bottom, - rgba(0, 0, 0, 1) 0%, - rgba(0, 0, 0, 1) 90%, - transparent 100% - ); - } +.lp-hero-content { + max-width: 49.375rem; + margin: 0 auto; + text-align: center; +} + +.lp-eyebrow, +.lp-section-index, +.lp-interface-index, +.lp-group-label, +.lp-status-name, +.lp-status-context, +.lp-fast-code { + font-family: var(--typography-code-font-family), monospace; +} + +.lp-eyebrow { + margin: 0; + color: var(--lp-fuchsia-text); + font-size: 0.6875rem; + letter-spacing: 0.16em; + text-transform: uppercase; +} + +.lp-hero-title { + max-width: 45rem; + margin: 1.25rem auto 0; + color: var(--fg-headings); + font-family: var(--typography-heading-font-family), sans-serif; + font-size: clamp(2.75rem, 5vw, 3.5rem); + font-weight: 600; + letter-spacing: -0.04em; + line-height: 1.08; + text-wrap: balance; +} + +.lp-hero-copy { + max-width: 42.5rem; + margin: 1.25rem auto 0; + font-size: 1rem; + line-height: 1.75; + text-wrap: balance; +} + +.lp-hero-actions { + display: flex; + align-items: center; + justify-content: center; + gap: 0.75rem; + margin-top: 2rem; +} + +.lp-btn { + display: inline-flex; + min-height: 3rem; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 0.625rem 1.25rem; + border-radius: var(--radius-sm); + font-family: var(--typography-heading-font-family), sans-serif; + font-size: 0.875rem; + font-weight: 500; + line-height: 1.2; + text-decoration: none !important; + transition: background-color 150ms ease, border-color 150ms ease, + box-shadow 160ms ease, color 200ms ease; +} + +.lp-btn--primary, +.lp-btn--secondary { + height: 3rem; + padding: 0 1.25rem; + border: 0.5px solid transparent; + font-family: var(--typography-body-font-family), sans-serif; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; +} + +.lp-btn--primary { + background: var(--sw-fuchsia); + color: var(--lp-brand-on-accent) !important; +} + +.lp-btn--primary:hover, +.lp-btn--primary:focus-visible { + border-color: var(--sw-fuchsia); + background: var(--sw-fuchsia); + box-shadow: 0 0 13.6px var(--sw-fuchsia); + color: var(--lp-brand-on-accent) !important; +} + +.lp-btn--secondary { + background: var(--lp-button-secondary-bg); + color: var(--lp-button-secondary-fg) !important; +} + +.lp-btn--secondary:hover, +.lp-btn--secondary:focus-visible { + border-color: var(--sw-blue); + background: var(--lp-button-secondary-bg); + box-shadow: 0 0 13.6px var(--sw-blue); + color: var(--lp-button-secondary-fg) !important; +} + +.lp-btn--outline { + border: 1px solid var(--border-default); + background: transparent; + color: var(--fg-secondary); +} + +.lp-btn--outline:hover { + border-color: var(--interactive-link-default); + color: var(--interactive-link-default); +} + +.lp-btn svg { + color: inherit; +} + +.lp-workbench-section { + padding: 0 2rem 4rem; +} + +.lp-workbench { + display: grid; + grid-template-columns: minmax(0, 42%) minmax(0, 58%); + grid-template-rows: auto minmax(0, 1fr); + overflow: hidden; + border: 1px solid var(--border-default); + border-radius: var(--radius-xl); + background: var(--bg-surface); + box-shadow: var(--lp-workbench-shadow); +} + +.lp-workbench-header { + display: flex; + align-items: center; + border-bottom: 1px solid var(--border-default); +} + +.lp-surface-tabs { + display: grid; + width: 42%; + grid-template-columns: repeat(4, minmax(0, 1fr)); + border-right: 1px solid var(--border-default); +} + +.lp-surface-tab { + display: flex; + min-height: 3rem; + align-items: center; + justify-content: center; + padding: 0.5rem; + color: var(--fg-muted); + font-family: var(--typography-code-font-family), monospace; + font-size: 0.6875rem; + text-decoration: none !important; + transition: color 150ms ease, background-color 150ms ease; +} + +.lp-surface-tab:hover { + color: var(--interactive-link-default); +} + +.lp-surface-tab--active { + border-bottom: 2px solid var(--sw-blue); + background: var(--bg-surface-raised); + color: var(--fg-headings); +} + +.lp-workbench-status { + grid-row: 1; + grid-column: 2; + display: flex; + min-height: 3rem; + flex: 1; + align-items: center; + gap: 0.75rem; + padding: 0.5rem 1rem; + border-bottom: 1px solid var(--border-default); + border-left: 1px solid var(--border-default); + font-family: var(--typography-code-font-family), monospace; + font-size: 0.6875rem; +} + +.lp-status-dot { + width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + background: var(--sw-turquoise); +} + +.lp-status-name, +.lp-status-context { + color: var(--fg-subtle); +} + +.lp-status-context { + margin-left: auto; +} + +.lp-product-tabs { + min-width: 0; + grid-row: 1 / 3; + grid-column: 1; + border-right: 1px solid var(--border-default); +} + +.lp-product-tabs > [data-orientation="horizontal"] { + display: flex; + min-width: 0; + height: 100%; + flex-direction: column; +} + +/* Recompose Fern's semantic tabs into the workbench header from the approved + preview while retaining Fern's keyboard and selection behavior. */ +.lp-product-tabs > [data-orientation="horizontal"] > :first-child { + flex: 0 0 auto; + margin: 0 !important; +} + +.lp-product-tabs .fern-x-overflow { + display: grid !important; + min-width: 0; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 0 !important; +} + +.lp-product-tabs [role="tab"] { + min-width: 0; + min-height: 3rem; + max-width: none; + align-items: center; + justify-content: center; + padding: 0.5rem; + color: var(--fg-muted); + font-family: var(--typography-code-font-family), monospace; + font-size: 0.6875rem; + font-weight: 400; + line-height: 1.25; + text-align: center; +} + +.lp-product-tabs [role="tab"][data-state="active"] { + background: var(--bg-surface-raised); + color: var(--fg-headings); +} + +.lp-product-tabs [role="tab"][data-state="active"]::before { + background: var(--sw-blue) !important; +} + +.lp-product-tabs [role="tabpanel"]::before { + display: none; +} + +.lp-product-tabs [role="tabpanel"][data-state="active"] { + min-width: 0; + flex: 1; + padding: 1.25rem; +} + +.lp-product-tabs .fern-code-block { + width: 100%; + min-width: 0; + max-width: 100%; + margin: 0 !important; + border: 0 !important; + border-radius: 0; + background: transparent !important; + box-shadow: none !important; + overflow: hidden; +} + +.lp-product-tabs .code-block-root { + background: transparent !important; +} + +.lp-product-tabs .fern-code-block > div:has(> .fern-copy-button) { + padding: 0.125rem; + border: 1px solid var(--border-default); + border-radius: var(--radius-sm); + background: var(--bg-surface-raised); + box-shadow: var(--card-shadow); +} + +.lp-product-tabs .fern-feedback-button, +.lp-product-tabs .fern-copy-button { + color: var(--fg-secondary) !important; +} + +.lp-fast-starts { + display: grid; + min-width: 0; + grid-row: 2; + grid-column: 2; + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.lp-fast-start { + display: flex; + min-height: 5.75rem; + align-items: center; + gap: 1rem; + padding: 1rem; + color: var(--fg-secondary); + font-family: var(--typography-heading-font-family), sans-serif; + font-size: 0.9375rem; + font-weight: 500; + text-decoration: none !important; + transition: background-color 150ms ease; +} + +.lp-fast-start:nth-child(even) { + border-left: 1px solid var(--border-default); +} + +.lp-fast-start:nth-child(n + 3) { + border-top: 1px solid var(--border-default); +} + +.lp-fast-start:hover { + background: var(--bg-surface-raised); + color: var(--fg-headings); +} + +.lp-fast-start > svg:last-child { + margin-left: auto; + color: var(--fg-subtle); + transition: color 150ms ease, transform 150ms ease; +} + +.lp-fast-start:hover > svg:last-child { + color: var(--interactive-link-default); + transform: translate(2px, -2px); +} + +.lp-fast-code { + flex: 0 0 auto; + font-size: 0.625rem; +} + +.lp-fast-code--ai { + color: var(--interactive-link-default); +} + +.lp-fast-code--calling { + color: var(--lp-code-keyword); +} + +.lp-fast-code--messaging { + color: var(--interactive-link-default); +} + +.lp-fast-code--browser { + color: var(--lp-browser-accent); +} + +.lp-section { + padding: 5rem 2rem; + border-top: 1px solid var(--border-default); +} + +.lp-section-header { + max-width: 40.625rem; + margin-bottom: 2.25rem; +} - .dashed-pattern-left { - left: -1rem; - border-right: 1px solid var(--grayscale-5); +.lp-section-index { + color: var(--lp-fuchsia-text); + font-size: 0.6875rem; + letter-spacing: 0.14em; + text-transform: uppercase; +} + +.lp-section-header h2 { + margin: 0.75rem 0 0; + color: var(--fg-headings); + font-family: var(--typography-heading-font-family), sans-serif; + font-size: 1.875rem; + font-weight: 600; + letter-spacing: -0.025em; + line-height: 1.2; +} + +.lp-section-header p { + margin: 0.5rem 0 0; + font-size: 0.875rem; + line-height: 1.5rem; +} + +.lp-capability-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + border-top: 1px solid var(--border-default); + border-bottom: 1px solid var(--border-default); +} + +.lp-capability { + display: flex; + min-width: 0; + flex-direction: column; + padding: 1.75rem 1.5rem; +} + +.lp-capability + .lp-capability { + border-left: 1px solid var(--border-default); +} + +.lp-capability:first-child { + padding-left: 0; +} + +.lp-capability:last-child { + padding-right: 0; +} + +.lp-capability h3 { + margin: 0; + font-family: var(--typography-heading-font-family), sans-serif; + font-size: 1.25rem; + font-weight: 600; +} + +.lp-capability h3 a { + color: var(--fg-headings); + text-decoration: none !important; +} + +.lp-capability > p { + min-height: 4.5rem; + margin: 0.5rem 0 0; + font-size: 0.8125rem; + line-height: 1.5rem; +} + +.lp-directory-links { + margin: 1.25rem 0 0; + padding: 0; + border-top: 1px solid var(--border-default); + list-style: none; +} + +.lp-directory-links li { + margin: 0; + padding-left: 0; + border-bottom: 1px solid var(--border-default); +} + +.lp-directory-links li::before { + display: none; + content: none; +} + +.lp-directory-links a { + display: flex; + min-height: 2.75rem; + align-items: center; + justify-content: space-between; + gap: 0.75rem; + padding-right: 0.25rem; + color: var(--fg-secondary); + font-size: 0.8125rem; + text-decoration: none !important; + transition: color 150ms ease; +} + +.lp-directory-links a:hover { + color: var(--interactive-link-default); +} + +.lp-directory-links svg { + flex: 0 0 auto; + color: var(--fg-subtle); + transition: color 150ms ease; +} + +.lp-directory-links a:hover svg { + color: var(--interactive-link-default); +} + +.lp-directory-all { + display: inline-flex; + min-height: 2.75rem; + align-items: center; + gap: 0.5rem; + margin-top: 1.25rem; + color: var(--interactive-link-default); + font-family: var(--typography-heading-font-family), sans-serif; + font-size: 0.8125rem; + font-weight: 500; + text-decoration: none !important; +} + +.lp-directory-all:hover { + color: var(--interactive-link-default); +} + +.lp-group-label { + display: flex; + align-items: center; + gap: 0.75rem; + margin-bottom: 0.75rem; + color: var(--interactive-link-default); + font-size: 0.625rem; + letter-spacing: 0.14em; + text-transform: uppercase; +} + +.lp-group-label > span:last-child { + height: 1px; + flex: 1; + background: var(--border-default); +} + +.lp-group-label--tools { + margin-top: 2.25rem; + color: var(--fg-subtle); +} + +.lp-interface-grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + border: 1px solid var(--border-default); + background: var(--bg-surface); +} + +.lp-interface { + display: flex; + min-height: 11.875rem; + flex-direction: column; + padding: 1.5rem; + color: var(--fg-muted); + text-decoration: none !important; + transition: background-color 150ms ease; +} + +.lp-interface + .lp-interface { + border-left: 1px solid var(--border-default); +} + +.lp-interface:hover { + background: var(--bg-surface-raised); +} + +.lp-interface > svg { + color: var(--sw-blue); +} + +.lp-interface-index { + margin-top: 2rem; + color: var(--fg-subtle); + font-size: 0.625rem; + text-transform: uppercase; +} + +.lp-interface h3 { + margin: 0.5rem 0 0; + color: var(--fg-headings); + font-family: var(--typography-heading-font-family), sans-serif; + font-size: 1.0625rem; + font-weight: 600; +} + +.lp-interface p { + margin: 0.5rem 0 0; + color: var(--fg-muted); + font-size: 0.8125rem; + line-height: 1.5rem; +} + +.lp-tools-grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + border-top: 1px solid var(--border-default); + border-bottom: 1px solid var(--border-default); +} + +.lp-tool { + display: flex; + min-height: 7rem; + align-items: flex-start; + gap: 1rem; + padding: 1.25rem; + color: var(--fg-muted); + text-decoration: none !important; + transition: background-color 150ms ease; +} + +.lp-tool + .lp-tool { + border-left: 1px solid var(--border-default); +} + +.lp-tool:hover { + background: var(--bg-surface); +} + +.lp-tool > svg { + flex: 0 0 auto; + margin-top: 0.125rem; + color: var(--fg-muted); +} + +.lp-tool strong, +.lp-tool small { + display: block; +} + +.lp-tool strong { + color: var(--fg-headings); + font-family: var(--typography-heading-font-family), sans-serif; + font-size: 0.9375rem; + font-weight: 500; +} + +.lp-tool small { + margin-top: 0.25rem; + color: var(--fg-subtle); + font-size: 0.75rem; + line-height: 1.25rem; +} + +.lp-migration-section { + padding: 3rem 2rem 5rem; + border-top: 1px solid var(--border-default); +} + +.lp-migration { + display: flex; + align-items: center; + gap: 1rem; + padding: 1.25rem; + border: 1px solid var(--border-default); + border-radius: var(--radius-md); + background: var(--bg-surface); +} + +.lp-migration-icon { + display: flex; + flex: 0 0 auto; + color: var(--fg-subtle); +} + +.lp-migration p { + flex: 1; + margin: 0; + font-size: 0.8125rem; + line-height: 1.5rem; +} + +.lp-migration strong { + color: var(--fg-secondary); + font-family: var(--typography-heading-font-family), sans-serif; + font-weight: 500; +} + +.lp-footnote { + margin: 0.75rem 0 0; + color: var(--fg-subtle); + font-size: 0.625rem; + font-style: italic; + line-height: 1.25rem; +} + +.lp-page-container a:focus-visible, +.lp-page-container button:focus-visible { + outline: 2px solid var(--sw-turquoise); + outline-offset: 3px; +} + +@media (max-width: 960px) { + .lp-workbench { + display: block; } - .dashed-pattern-right { - right: -1rem; - border-left: 1px solid var(--grayscale-5); + .lp-workbench-status, + .lp-product-tabs { + border-right: 0; + border-left: 0; } - .main-content { - max-width: 60rem; - margin: 0 auto; - position: relative; - padding: 4rem 0 3rem; + .lp-fast-starts { + grid-template-columns: repeat(2, minmax(0, 1fr)); + border-top: 1px solid var(--border-default); } - /* --- Hero Section --- */ + .lp-fast-start:nth-child(even) { + border-left: 1px solid var(--border-default); + } +} - .hero-section { - margin-bottom: 4rem; - position: relative; - overflow: clip; +@media (max-width: 767px) { + .lp-command-shell { + border-right: 0; + border-left: 0; } - .hero-content { - position: relative; - padding: 0 2rem; + .lp-hero { + padding: 3.5rem 1rem 2.5rem; } - /* --- Products Section --- */ + .lp-hero-title { + font-size: clamp(2.25rem, 11vw, 2.75rem); + } - .products-section { - border-top: 1px solid var(--grayscale-5); - padding: 3.5rem 2rem; + .lp-workbench-section, + .lp-section, + .lp-migration-section { + padding-right: 1rem; + padding-left: 1rem; } - .products-section h2 { - font-size: 1.25rem; - font-weight: 700; - color: var(--grayscale-12); - margin-bottom: 0.25rem; + .lp-section { + padding-top: 3.5rem; + padding-bottom: 3.5rem; } - .section-header { - margin-bottom: 2rem; + .lp-capability-grid { + grid-template-columns: minmax(0, 1fr); } - .section-header p { - font-size: 0.875rem; - color: var(--text-body); + .lp-capability, + .lp-capability:first-child, + .lp-capability:last-child { + padding: 1.75rem 0; } - /* --- Homepage Callout --- */ + .lp-capability + .lp-capability { + border-top: 1px solid var(--border-default); + border-left: 0; + } - .hp-callout { - display: flex; - align-items: center; - gap: 1.5rem; - padding: 1.5rem 2rem; - margin: 2rem 2rem 3rem; - border-radius: 0.75rem; - background: var(--grayscale-a2); - font-size: 0.875rem; + .lp-capability > p { + min-height: 0; } - .hp-callout-desc { - color: var(--grayscale-a11); - flex: 1; - line-height: 1.5; + .lp-migration { + align-items: flex-start; + flex-direction: column; } +} - .hp-callout-desc strong { - color: var(--grayscale-12); - font-weight: 700; +@media (max-width: 640px) { + .lp-hero-actions { + align-items: stretch; + flex-direction: column; } - /* --- Responsive Design --- */ + .lp-btn { + width: 100%; + } - @media (max-width: 640px) { - .main-content { - padding: 2rem 0; - } + .lp-status-context { + display: none; + } - .dashed-pattern-left, - .dashed-pattern-right { - display: none; - } + .lp-fast-starts { + grid-template-columns: minmax(0, 1fr); + } - .hero-section { - margin-bottom: 2.5rem; - } + .lp-fast-start:nth-child(even), + .lp-fast-start + .lp-fast-start { + border-left: 0; + } - .hero-content { - padding: 0 1rem; - } + .lp-fast-start:nth-child(n + 3) { + border-top: 0; + } - .products-section { - padding: 2.5rem 1rem; - } + .lp-fast-start:not(:last-child) { + border-bottom: 1px solid var(--border-default); + } +} - .hp-callout { - flex-direction: column; - align-items: flex-start; - padding: 1rem; - margin: 0 1rem; - gap: 0.25rem; - } +@media (prefers-reduced-motion: reduce) { + .lp-page-container *, + .lp-page-container *::before, + .lp-page-container *::after { + scroll-behavior: auto !important; + transition: none !important; + animation: none !important; } }