.agent-start { --ink: #191b22; --muted: #5c6878; --line: #dce2e9; --ground: #f5f7f9; --green: #628573; color: var(--ink); background: var(--ground); font-family: Inter, sans-serif; }
.agent-start-wrap { width: min(100% - 48px, 1080px); margin-inline: auto; }
.agent-start-hero { padding: 92px 0 84px; background: radial-gradient(circle at 88% 8%, #e3eaf3, transparent 44%), var(--ground); border-bottom: 1px solid var(--line); }
.agent-start-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.agent-start-eyebrow { margin: 0 0 18px; color: #526477; font-size: 14px; font-weight: 600; }
.agent-start h1 { margin: 0; font-size: clamp(38px, 4.6vw, 58px); line-height: 1.06; font-weight: 600; letter-spacing: -.045em; text-wrap: balance; }
.agent-start-lead { max-width: 560px; margin: 22px 0 0; color: var(--muted); font-size: 18px; line-height: 1.65; }
.agent-start-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 30px; }
.agent-start-primary { display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 52px; padding: 13px 22px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; transition: background .2s; }
.agent-start-primary:hover { background: #303644; }
.agent-start-secondary { color: #354357; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.agent-start a:focus-visible, .agent-start button:focus-visible { outline: 2px solid #55718e; outline-offset: 4px; }

/* Prompt card styled as the agent app */
.agent-start-chat { display: flex; flex-direction: column; gap: 0; border: 1px solid #cfd7e0; border-radius: 20px; background: #fff; box-shadow: 0 24px 60px -36px #142c4966; overflow: hidden; }
.agent-start-chat-head { display: flex; align-items: center; gap: 12px; padding: 15px 20px; border-bottom: 1px solid #e6ebf0; }
.agent-start-chat-logos { display: inline-flex; }
.agent-start-chat-logos img { width: 26px; height: 26px; padding: 4px; box-sizing: border-box; background: #fff; border: 1px solid #dfe5ec; border-radius: 50%; }
.agent-start-chat-logos img + img { margin-left: -7px; }
.agent-start-chat-head strong { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.agent-start-chat-head small { display: block; margin-top: 1px; color: #78818d; font-size: 11px; }
.agent-start-chat-request { padding: 20px 20px 0; }
.agent-start-chat-request > span, .agent-start-chat-reply > span { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; color: #6b7684; }
.agent-start-chat-request > span { text-align: right; }
.agent-start-chat-request p { margin: 0 0 0 28px; padding: 13px 16px; background: #eceef1; border-radius: 16px 16px 4px 16px; font-size: 14px; line-height: 1.55; color: #202630; }
.agent-start-chat-reply { padding: 22px 20px 22px; }
.agent-start-chat-reply p { margin: 0 28px 0 0; color: #2f3d4d; font-size: 14px; line-height: 1.6; }
.agent-start-chat-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px; border-top: 1px solid #e6ebf0; background: #fafbfc; }
.agent-start-chat-foot > span { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.agent-start-copy { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 10px 18px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s; }
.agent-start-copy:hover { background: #303644; }
.agent-start-copy.is-copied { background: var(--green); }
.agent-start-copy-small { min-height: 34px; padding: 7px 13px; font-size: 12px; }

/* Body sections use the shared marketing Tailwind language; only what Tailwind cannot express lives here */
.agent-start-section { font-family: Inter, sans-serif; }
.agent-start-app-steps { margin: 22px 0 0; padding: 0; list-style: none; counter-reset: agent-app-step; }
.agent-start-app-steps li { counter-increment: agent-app-step; display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid #f4f4f5; color: #3f3f46; font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; }
.agent-start-app-steps li::before { content: counter(agent-app-step); flex: 0 0 auto; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: #f4f4f5; color: #52525b; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.agent-start .agent-start-cta-copy.is-copied, .agent-start .agent-start-cta-copy.is-copied:hover { background-color: var(--green); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 960px) {
    .agent-start-hero-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
    .agent-start-wrap { width: min(100% - 32px, 620px); }
    .agent-start-hero { padding-block: 60px 56px; }
    .agent-start-lead { font-size: 16.5px; }
    .agent-start-chat-request p { margin-left: 12px; }
    .agent-start-chat-reply p { margin-right: 12px; }
    .agent-start-chat-foot { flex-direction: column; align-items: stretch; }
    .agent-start-copy { justify-content: center; }
}