/* The signup chat with Brainpage, an AI agent: the full page /start and the pop-up on the home pages.
   Only those pages link this file (ApplicationHelper#site_stylesheet_paths leaves out pages/). It uses the
   colour tokens on .bp-page (toolkit.css): ink, ultramarine blue, coral, lilac. Every rule starts with sc-.
   Design brief: docs/plans/signup-chat-v4-marketing-brief.md (21 October 2026).

   The panel is an agent builder, not a support chat. It has two states:
   1. The hero (no visitor message yet): the headline at the home page's scale, one line, a large field for the
      company website or name, the job buttons, two proof lines, and example agent cards on a tinted stage.
      On a wide screen the stage stands to the right of the copy. The message box at the bottom is hidden.
   2. The conversation (.has-conversation): the hero shrinks to its headline. Under it, one left-aligned column,
      like a page that fills in: the visitor's words as a small quiet tag, the research as a progress card, the
      agent's short text, the 3 agent cards under a heading (one row on a wide screen), and the sign-in as a strong
      ultramarine block, like the close of the home page. A quiet "Ask anything" box stays at the bottom.

   Sizes:
   - Desktop: a panel up to 980 px wide. Its height follows the content, up to min(760px, 90vh); then only the
     content scrolls. The top of the panel stays at a fixed place (where a panel of full height would be centered),
     so the panel grows downward and does not move while a reply streams. In the pop-up it sits on a dark, slightly
     blurred page; on /start it sits on a pale lilac page.
   - Phone (640 px wide or less, or 500 px high or less, for a phone held sideways): the panel is a sheet at the
     bottom of the screen with round top corners. Its height follows the content, up to the visible height minus a
     small gap at the top; then only the content scrolls. It follows the visual viewport (signup_chat_controller.js
     sets --sc-height and --sc-top), so a field stays above the keyboard. The hero's headline, field and button
     show without a scroll at 360 px wide; the example cards come below them.

   Colour: ultramarine carries the actions (the hero's button, the agent cards' edge, the sign-in block). Coral
   marks only research in progress, keyboard focus and one job icon. Lilac washes make the stages. */

/* The full page and the open pop-up lock the page behind them. */
html:has(.sc-app--page), html:has(.sc-app--page) body, html.sc-locked, html.sc-locked body { overflow: hidden; overscroll-behavior: none; }
/* The bar at the bottom of a home page must not cover the end of the page. */
html.sc-has-bar body { padding-bottom: 84px; }

/* The top of the panel on a desktop: where a panel of full height (min(760px, 90vh)) is centered. */
:root { --sc-panel-top: calc((100vh - min(760px, 90vh)) / 2); }
@supports (height: 100dvh) { :root { --sc-panel-top: calc((100dvh - min(760px, 90dvh)) / 2); } }

/* The full page /start: a pale lilac field with the panel at the fixed top. On a phone the panel fills the screen. */
.sc-page { position: fixed; inset: 0; z-index: 1; display: grid; justify-items: center; align-items: start; padding: max(24px, var(--sc-panel-top)) 24px 24px; background: radial-gradient(80% 70% at 50% 0%, #ebe7fc 0%, #f5f3fe 55%, #fbfaff 100%); }

/* The pop-up: a <dialog> in the top layer that covers the screen. The panel is its child, so a click on
   the dimmed area around the panel targets the dialog itself (signup_popup_controller.js#backdrop). */
.sc-dialog { box-sizing: border-box; position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; overscroll-behavior: contain; }
.sc-dialog[open] { display: grid; justify-items: center; align-items: start; padding: var(--sc-panel-top) 24px 0; }
/* Dark and slightly blurred, so the page text behind the panel does not compete with it. */
.sc-dialog::backdrop { background: rgb(16 14 46 / .7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sc-dialog__body { display: contents; }

.sc-app {
  --sc-muted: #575166;
  --sc-body: #3b3850;
  --sc-soft: #f3f1fd;
  --sc-soft-edge: #e4e0f7;
  --sc-blue-side: #211d99;
  --sc-on-blue: #e8e6ff;
  --sc-gutter: 44px;
  --sc-column: 660px;
  position: relative;
  width: min(980px, 100%);
  /* The height follows the content, up to this limit. Then .sc-scroll scrolls. */
  max-height: min(760px, 90vh);
  max-height: min(760px, 90dvh);
  display: flex;
  flex-direction: column;
  min-width: 0;
  isolation: isolate;
  overflow: hidden;
  border-radius: 20px;
  /* Light, not decoration: a lilac wash from the top left corner, behind the headline, fading to white. */
  background: radial-gradient(75% 60% at 0% 0%, #efebfd 0%, rgb(247 245 254 / .7) 45%, rgb(255 255 255 / 0) 75%), #fff;
  box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 50px 100px -40px #0b085e99, 0 0 0 1px #2a24a81f;
  color: var(--tk-ink);
  font-family: "Archivo", sans-serif;
  text-align: left;
}
.sc-app:focus { outline: none; }
.sc-app *, .sc-app *::before, .sc-app *::after { box-sizing: border-box; }
:where(.sc-app) :where(p, h1, h2, h3, ul, figure) { margin: 0; }
.sc-app :focus-visible { outline: 3px solid var(--tk-coral); outline-offset: 3px; }
:where(.sc-app) button { font: inherit; }
.sc-nobreak { white-space: nowrap; }
.sc-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; }

/* The top edge: the wordmark, the quiet way out to the sign-in page, and in the pop-up the close control. */
.sc-bar { flex: none; position: relative; z-index: 1; }
.sc-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 8px calc(var(--sc-gutter) - 12px) 0 var(--sc-gutter); }
.sc-brand { color: var(--tk-ink); font-size: 21px; font-weight: 900; letter-spacing: -.045em; line-height: 1; text-decoration: none; }
.sc-bar__actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
/* A quiet way out: small and muted, with a thin underline. It keeps a 44 px tap target and the focus ring.
   The link may break into 2 lines in a long language, so the close control always fits. */
.sc-skip { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; color: var(--sc-muted); font-size: 13px; font-weight: 600; line-height: 1.2; text-align: right; text-decoration: underline; text-decoration-color: #bdb8d4; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.sc-close { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--tk-ink); cursor: pointer; }
.sc-close svg { width: 22px; height: 22px; }

/* The content. Only this area scrolls. Text fades out under the top edge instead of a hard cut. */
.sc-scroll { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(to bottom, transparent 0, #000 14px); }
.sc-canvas { padding: 14px var(--sc-gutter) 40px; }

/* ---------- 1. The hero ---------- */

.sc-hero { display: grid; gap: 28px 48px; }
.sc-hero__title { font-size: clamp(40px, 4.6vw, 58px); font-weight: 900; line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.sc-hero__title span { display: block; color: var(--tk-blue); }
.sc-hero__more { margin-top: 18px; }
.sc-hero__lede { max-width: 31em; color: var(--sc-body); font-size: 18px; line-height: 1.45; text-wrap: pretty; }

/* The website field: one raised white bar with the field and the ultramarine button. The company field under
   a reply (.sc-entry--inline) is the same, a little smaller. */
.sc-entry { margin-top: 26px; }
.sc-entry__label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 750; line-height: 1.3; }
.sc-entry__row { display: flex; align-items: center; gap: 6px; padding: 6px; border: 1.5px solid var(--tk-rule); border-radius: 14px; background: #fff; box-shadow: 0 2px 0 #191a230a, 0 26px 44px -32px #2a24a8; transition: border-color 140ms ease-out, box-shadow 140ms ease-out; }
.sc-entry__row:focus-within { border-color: var(--tk-blue); box-shadow: 0 0 0 4px var(--tk-lilac), 0 26px 44px -32px #2a24a8; }
/* 16px at least, so iOS Safari does not zoom the page when the field gets focus. */
.sc-entry__input { flex: 1 1 auto; min-width: 0; height: 56px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--tk-ink); font: inherit; font-size: 18px; font-weight: 500; }
.sc-entry__input::placeholder { color: #6f6a80; font-weight: 400; }
.sc-app .sc-entry__input:focus-visible { outline: none; }
.sc-entry__input[aria-invalid="true"]::placeholder { color: #a3341a; }
.sc-entry__button { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 22px; border: 0; border-radius: 9px; background: var(--tk-blue); color: #fff; font-size: 17px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; cursor: pointer; box-shadow: 0 3px 0 var(--sc-blue-side); transition: background-color 140ms ease-out, transform 140ms ease-out; }
.sc-entry__button .tk-icon { width: 20px; height: 20px; transition: transform 160ms ease-out; }
.sc-entry__button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sc-blue-side); }
.sc-entry__error { margin-top: 8px; color: #a3341a; font-size: 14px; font-weight: 650; line-height: 1.4; }
.sc-entry__error[hidden] { display: none; }
.sc-entry__skip { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; padding: 0 2px; border: 0; background: none; color: var(--sc-muted); font-size: 14px; font-weight: 600; text-decoration: underline; text-decoration-color: #bdb8d4; text-underline-offset: .25em; cursor: pointer; }

/* The job buttons: white tiles with a small coloured icon. */
.sc-jobs { margin-top: 24px; }
.sc-jobs__label { margin-bottom: 10px; color: var(--sc-muted); font-size: 14px; font-weight: 700; }
.sc-jobs__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sc-job { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px 10px 10px; border: 1px solid #dcd8ef; border-radius: 12px; background: rgb(255 255 255 / .86); color: var(--tk-ink); font-size: 15px; font-weight: 750; line-height: 1.22; letter-spacing: -.01em; text-align: left; cursor: pointer; box-shadow: 0 2px 0 #211d990f; transition: border-color 140ms ease-out, box-shadow 140ms ease-out, transform 140ms ease-out; }
.sc-job__icon { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 9px; }
.sc-job__icon svg, .sc-sample__icon svg { width: 20px; height: 20px; }
.sc-job:active { transform: translateY(1px); }
.sc-tone--blue { background: var(--tk-blue); color: #fff; }
.sc-tone--coral { background: var(--tk-coral); color: #fff; }
.sc-tone--lilac { background: var(--tk-lilac); color: var(--tk-blue); }

/* Two proof lines: the free trial (from /get-started) and the customers named on the home page. */
.sc-proof { display: grid; gap: 6px; margin-top: 24px; padding: 0; list-style: none; font-size: 14px; line-height: 1.45; }
.sc-proof__trial { display: flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: -.01em; }
.sc-proof__trial .tk-icon { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--tk-lilac); color: var(--tk-blue); }
.sc-proof__customers { color: var(--sc-muted); }

/* The stage: example agent cards, layered on a lilac wash. They show what agents hand back. */
.sc-stage { position: relative; display: grid; align-content: center; gap: 14px; padding: 22px 22px 28px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(90% 70% at 85% 0%, #e3ddfc 0%, rgb(236 232 253 / .7) 40%, rgb(246 244 254 / 0) 80%), linear-gradient(180deg, #f3f0fe 0%, #f8f7fe 100%);
  box-shadow: inset 0 0 0 1px #e6e2f8; }
.sc-stage__label { color: var(--sc-muted); font-size: 13px; font-weight: 700; line-height: 1.3; }
.sc-samples { display: grid; padding: 0; list-style: none; }
.sc-sample { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); grid-template-areas: "icon name" "icon does" "result result"; column-gap: 12px; row-gap: 2px; padding: 14px 16px 14px 14px; border: 1px solid #e4e0f7; border-radius: 14px; background: #fff; box-shadow: 0 2px 0 #211d9912, 0 22px 38px -26px #0b085e8c; }
/* Layered: each card sits a little lower and to the side of the one before, and overlaps it. */
.sc-sample--1 { z-index: 1; margin-right: 22px; }
.sc-sample--2 { z-index: 2; margin: -8px 0 0 22px; }
.sc-sample--3 { z-index: 3; margin: -8px 12px 0 8px; }
.sc-sample__icon { grid-area: icon; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; }
.sc-sample__name { grid-area: name; align-self: end; font-size: 16px; font-weight: 850; line-height: 1.2; letter-spacing: -.02em; }
.sc-sample__does { grid-area: does; color: var(--sc-muted); font-size: 13.5px; line-height: 1.35; }
.sc-sample__result { grid-area: result; justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 10px 5px 7px; border-radius: 10px; background: var(--sc-soft); color: var(--tk-blue); font-size: 13px; font-weight: 750; line-height: 1.25; }
.sc-sample__result .tk-icon { flex: none; width: 15px; height: 15px; }

/* Wide screens: the copy on the left, the stage on the right. */
@media (min-width: 900px) and (min-height: 501px) {
  .sc-app:not(.has-conversation) .sc-hero { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); grid-template-areas: "copy stage"; align-items: stretch; }
  .sc-app:not(.has-conversation) .sc-hero__copy { grid-area: copy; padding-top: 6px; }
  /* The stage is as tall as the copy. The label and the cards sit a little above its middle (the optical
     center): the empty space splits 1 to 3 between the top and the bottom, with two empty grid rows. The cards
     are a little larger here, so they fill more of the stage. */
  .sc-app:not(.has-conversation) .sc-stage { grid-area: stage; margin-top: 4px; grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 3fr); align-content: stretch; }
  .sc-app:not(.has-conversation) .sc-stage::before, .sc-app:not(.has-conversation) .sc-stage::after { content: ""; }
  .sc-app:not(.has-conversation) .sc-sample { padding: 17px 18px 17px 16px; }
  .sc-app:not(.has-conversation) .sc-sample__name { font-size: 17px; }
  .sc-app:not(.has-conversation) .sc-sample__does { font-size: 14px; }
  .sc-app:not(.has-conversation) .sc-sample__result { margin-top: 12px; }
}

/* The first frame of the pop-up: the hero with its controls off, drawn as the real one. */
.sc-app--loading .sc-entry__button, .sc-app--loading .sc-job { cursor: default; }

/* ---------- 2. The conversation ---------- */

/* On a wide panel the conversation is one centered column (--sc-column), and the agent cards break out of it to
   the full width. The panel keeps a minimum height, so it does not jump from the hero's size to a small box. */
@supports (width: 1cqw) {
  @media (min-width: 900px) and (min-height: 501px) {
    .sc-scroll { container-type: inline-size; }
    .has-conversation .sc-canvas { --sc-side: max(var(--sc-gutter), (100cqw - var(--sc-column)) / 2); padding-inline: var(--sc-side); }
    .has-conversation .sc-msg__body > .sc-build { width: calc(100% + 2 * (var(--sc-side) - var(--sc-gutter))); margin-inline: calc(var(--sc-gutter) - var(--sc-side)); }
    .has-conversation .sc-dock { padding-inline: max(var(--sc-gutter), (100% - var(--sc-column)) / 2); }
  }
}
@media (min-width: 900px) and (min-height: 501px) {
  .sc-app.has-conversation { min-height: min(600px, 90vh); }
  .sc-app.has-conversation .sc-scroll { flex: 1 1 auto; }
}

/* The hero shrinks to its headline, on one line. */
.has-conversation .sc-hero__more, .has-conversation .sc-stage { display: none; }
.has-conversation .sc-hero__title { font-size: 26px; line-height: 1.1; letter-spacing: -.035em; }
.has-conversation .sc-hero__title span { display: inline; }
.has-conversation .sc-canvas { padding-bottom: 28px; }

.sc-log { display: flex; flex-direction: column; gap: 20px; }
.has-conversation .sc-log { margin-top: 22px; }
.sc-log:empty { display: none; }
.sc-msg__body { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.sc-msg__body > * { max-width: var(--sc-column); }
.sc-msg__body > .sc-build { max-width: none; width: 100%; }
.sc-text { font-size: 18px; line-height: 1.5; white-space: pre-line; overflow-wrap: break-word; text-wrap: pretty; }
.sc-text a { color: var(--tk-blue); }

/* The visitor's words: a small quiet tag, like the input of a form. */
.sc-msg--visitor { display: flex; }
.sc-said { max-width: min(var(--sc-column), 100%); padding: 6px 14px; border-radius: 999px; background: #f1f0f6; color: var(--sc-body); font-size: 15px; font-weight: 600; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Typing dots: one line of text high, so the first words take their place without a jump. */
.sc-typing { display: flex; align-items: center; gap: 6px; height: 27px; }
.sc-typing__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tk-blue); opacity: .3; }

/* Research progress: a card of steps. A finished step has a check; the running step a coral dot.
   When the agent's text continues, the first and the last step stay ("Reading acme.com", "Found Acme"). */
.sc-status { padding: 12px 16px; border: 1px solid #e9e6f8; border-radius: 14px; background: linear-gradient(180deg, #f7f5fe 0%, #f3f1fd 100%); }
.sc-status__lines { display: grid; gap: 8px; padding: 0; list-style: none; }
.sc-status__line { display: flex; align-items: center; gap: 10px; color: var(--sc-body); font-size: 15px; font-weight: 600; line-height: 1.35; }
.sc-status__mark { position: relative; display: grid; flex: 0 0 auto; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tk-blue); color: #fff; }
.sc-status__mark .tk-icon { width: 13px; height: 13px; }
.sc-status__line.is-active { color: var(--tk-ink); }
.sc-status__line.is-active .sc-status__mark { background: #fff; box-shadow: inset 0 0 0 1.5px #f6c3b4; }
.sc-status__line.is-active .tk-icon { visibility: hidden; }
.sc-status__line.is-active .sc-status__mark::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--tk-coral); }
.sc-status.is-done .sc-status__line:not(:first-child):not(:last-child) { display: none; }

/* Quick replies: outlined pills. */
.sc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-chip { min-height: 44px; padding: 9px 18px; border: 1.5px solid var(--tk-blue); border-radius: 999px; background: #fff; color: var(--tk-blue); font-size: 15px; font-weight: 750; line-height: 1.2; letter-spacing: -.005em; text-align: left; cursor: pointer; transition: background-color 140ms ease-out, transform 140ms ease-out; }
.sc-chip:active { transform: translateY(1px); }

/* The company field under a reply. */
.sc-entry--inline { width: 100%; margin-top: 0; }
.sc-entry--inline .sc-entry__input { height: 50px; font-size: 17px; }
.sc-entry--inline .sc-entry__button { height: 50px; font-size: 16px; }

/* The agents: a heading, then 3 cards (one row on a wide screen). White cards with the toolkit's raised
   ultramarine edge, on a lilac stage. The chosen card turns blue. */
.sc-build { margin-top: 4px; padding: 20px; border-radius: 18px; background: radial-gradient(80% 90% at 100% 0%, #e7e2fd 0%, rgb(240 237 253 / .6) 45%, rgb(248 247 254 / 0) 85%), #f7f6fe; box-shadow: inset 0 0 0 1px #e9e6f8; }
.sc-build__title { margin-bottom: 14px; font-size: 24px; font-weight: 900; line-height: 1.15; letter-spacing: -.035em; text-wrap: balance; }
.sc-agents { display: grid; gap: 12px; padding: 0; list-style: none; }
.sc-agents__item { display: flex; min-width: 0; }
.sc-agent { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 18px 18px 14px; border: 1px solid #e1ddf3; border-radius: 14px; background: #fff; color: inherit; text-align: left; cursor: pointer; box-shadow: 0 3px 0 #211d9926, 0 22px 36px -28px #0b085e; transition: border-color 160ms ease-out, box-shadow 160ms ease-out, transform 160ms ease-out; }
.sc-agent__name { display: block; font-size: 19px; font-weight: 850; line-height: 1.15; letter-spacing: -.025em; }
.sc-agent__does { display: block; color: var(--sc-body); font-size: 15px; line-height: 1.45; }
.sc-agent__facts { display: grid; gap: 6px; margin-top: 2px; padding-top: 10px; border-top: 1px solid #ebe8f4; }
.sc-agent__fact { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; font-size: 14px; line-height: 1.4; }
.sc-agent__label { color: var(--sc-muted); }
.sc-agent__value { font-weight: 600; }
.sc-agent__pick { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; color: var(--tk-blue); font-size: 15px; font-weight: 750; }
.sc-agent__pick .tk-icon { width: 18px; height: 18px; transition: transform 160ms ease-out; }
.sc-agent:disabled { cursor: default; box-shadow: 0 2px 0 #211d9914; }
.sc-agent:disabled .sc-agent__pick { display: none; }
.sc-agent.is-chosen { border-color: var(--tk-blue); background: var(--tk-blue); color: #fff; box-shadow: 0 3px 0 var(--sc-blue-side), 0 22px 34px -22px #2a24a8; }
.sc-agent.is-chosen .sc-agent__does, .sc-agent.is-chosen .sc-agent__label { color: var(--sc-on-blue); }
.sc-agent.is-chosen .sc-agent__facts { border-top-color: rgb(255 255 255 / .22); }
/* While the research runs: "Designing agents for <company>" over 3 placeholder cards, the same shape as the agent
   cards. Grey bars on white, with a soft light that moves across them (no motion with reduced motion). */
.sc-draft__line { margin-bottom: 14px; color: var(--sc-muted); font-size: 17px; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; }
.sc-ghost { display: flex; flex-direction: column; gap: 9px; width: 100%; padding: 18px 18px 20px; border: 1px solid #e9e6f8; border-radius: 14px; background: #fff; box-shadow: 0 2px 0 #211d9912; }
.sc-ghost__bar { --sc-ghost: #efedf9; display: block; width: 92%; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--sc-ghost) 0%, var(--sc-ghost) 40%, #fbfaff 50%, var(--sc-ghost) 60%, var(--sc-ghost) 100%) 0 0 / 300% 100%; }
.sc-ghost__bar--name { --sc-ghost: #e4e0f6; width: 62%; height: 15px; margin-bottom: 3px; }
.sc-ghost__bar--short { width: 54%; }
.sc-ghost__rule { display: block; height: 1px; margin: 3px 0 2px; background: #efedf6; }
.sc-ghost__bar--label { width: 30%; height: 8px; }
.sc-ghost__bar--value { width: 74%; }
@media (min-width: 900px) and (min-height: 501px) {
  .sc-agents { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* In a narrow card, each fact puts its label over its value. */
  .sc-agent__fact { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sc-agent__label { font-size: 13px; }
  .sc-agent { padding: 16px 16px 12px; }
  .sc-agent__does { font-size: 14.5px; }
}

/* Sign-in: the strong last step, on ultramarine like the close of the home page. The agent's reason is the
   heading. The Register buttons are white. */
.sc-signin { position: relative; display: grid; gap: 14px; width: 100%; padding: 26px 24px 22px; border-radius: 18px; overflow: hidden; color: #fff;
  background: radial-gradient(90% 80% at 100% 0%, #4d4ad9 0%, rgb(61 58 202 / .6) 40%, rgb(52 49 189 / 0) 75%), linear-gradient(160deg, #3834c4 0%, #2c29a6 100%);
  box-shadow: 0 3px 0 var(--sc-blue-side), 0 30px 50px -30px #1a1680; }
.sc-signin__reason { font-size: 26px; font-weight: 900; line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.sc-providers { display: grid; gap: 10px; margin-top: 2px; }
.sc-provider { display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; align-items: center; gap: 12px; min-height: 66px; padding: 10px 14px 10px 10px; border-radius: 10px; background: #fff; color: var(--tk-ink); text-decoration: none; box-shadow: 0 3px 0 #1b1880, 0 18px 30px -22px #0b085e; transition: background-color 160ms ease-out, box-shadow 160ms ease-out, transform 160ms ease-out; }
.sc-provider__mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--sc-soft); }
.sc-provider__mark svg { display: block; width: 22px; height: 22px; }
.sc-provider__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-provider__label { font-size: 17px; font-weight: 800; line-height: 1.2; letter-spacing: -.015em; }
.sc-provider__sub { color: var(--sc-muted); font-size: 14px; line-height: 1.35; }
.sc-provider__arrow { display: grid; place-items: center; color: var(--tk-blue); }
.sc-provider__arrow .tk-icon { width: 20px; height: 20px; transition: transform 160ms ease-out; }
.sc-provider:active { transform: translateY(2px); box-shadow: 0 1px 0 #1b1880; }
.sc-signin :focus-visible { outline-color: #fff; }
.sc-signin__access { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; color: var(--sc-on-blue); font-size: 14px; line-height: 1.45; }
.sc-signin__access li { position: relative; padding-left: 16px; }
.sc-signin__access li::before { content: ""; position: absolute; top: calc(.725em - 3px); left: 2px; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.sc-signin__free { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; letter-spacing: -.015em; }
.sc-signin__free .tk-icon { flex: 0 0 auto; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: #fff; color: var(--tk-blue); }
.sc-signin__note { color: var(--sc-on-blue); font-size: 14px; line-height: 1.5; }
.sc-signin__note a { display: inline-block; color: #fff; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
.sc-signin__terms { color: #d4d1fb; font-size: 12px; line-height: 1.5; }
.sc-signin__terms a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
@media (min-width: 900px) and (min-height: 501px) {
  .sc-msg__body > .sc-signin { max-width: 720px; }
  .sc-providers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Side by side, the whole button is the target: the arrow goes, so "Register with Microsoft" fits on one line. */
  .sc-provider { grid-template-columns: 40px minmax(0, 1fr); }
  .sc-provider__arrow { display: none; }
}

/* A failed reply. */
.sc-error { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; width: 100%; padding: 12px 14px 12px 16px; border: 1px solid #f4c9bb; border-radius: 12px; background: #fff6f3; }
.sc-error[hidden] { display: none; }
.sc-error__text { flex: 1 1 200px; font-size: 15px; line-height: 1.45; }
.sc-error__retry { min-height: 44px; padding: 0 18px; border: 0; border-radius: 8px; background: var(--tk-ink); color: #fff; font-size: 15px; font-weight: 750; cursor: pointer; }
.sc-error__retry[hidden] { display: none; }

/* The quiet "Ask anything" box at the bottom. Hidden while the hero shows: its field comes first. */
.sc-dock { flex: none; position: relative; padding: 8px var(--sc-gutter) 18px; background: #fff; }
.sc-app:not(.has-conversation) .sc-dock { display: none; }
.sc-dock::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 22px; pointer-events: none; background: linear-gradient(rgb(255 255 255 / 0), #fff); }
.sc-composer { display: grid; gap: 6px; max-width: var(--sc-column); }
.sc-field { display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: end; gap: 8px; padding: 4px 4px 4px 16px; border: 1px solid #e2dfec; border-radius: 12px; background: #faf9fd; transition: border-color 140ms ease-out, box-shadow 140ms ease-out, background-color 140ms ease-out; }
.sc-field:focus-within { border-color: var(--tk-blue); background: #fff; box-shadow: 0 0 0 3px var(--tk-lilac); }
.sc-input { display: block; width: 100%; min-height: 40px; max-height: 144px; padding: 9px 0; border: 0; background: transparent; color: var(--tk-ink); font: inherit; font-size: 16px; line-height: 1.4; resize: none; }
.sc-input::placeholder { color: #6f6a80; }
.sc-app .sc-input:focus-visible { outline: none; }
.sc-send { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 9px; background: var(--tk-lilac); color: var(--tk-blue); cursor: pointer; transition: background-color 140ms ease-out, color 140ms ease-out; }
.sc-send .tk-icon { width: 20px; height: 20px; }
.sc-send:disabled { background: #ebe9f3; color: #8d88a3; cursor: default; }
/* The keyboard hint is for screen readers only (aria-describedby on the text box). The "characters left"
   warning near the limit shows on screen (is-shown, signup_chat_controller.js). */
.sc-hint { padding-left: 4px; color: var(--sc-muted); font-size: 12px; line-height: 1.4; }
.sc-hint:not(.is-shown) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The bar at the bottom of a home page after the visitor closes the pop-up. A click opens the same chat.
   It sits at the left, so it never covers the chat launcher at the bottom right. */
.sc-minibar { position: fixed; left: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60; font-family: "Archivo", sans-serif; }
.sc-minibar[hidden] { display: none; }
.sc-minibar__button { display: flex; align-items: center; gap: 12px; min-height: 56px; max-width: min(420px, calc(100vw - 112px)); padding: 10px 16px 10px 12px; border: 1px solid #211d99; border-radius: 12px; background: var(--tk-blue); color: #fff; font: inherit; font-size: 16px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; text-align: left; cursor: pointer; box-shadow: 0 3px 0 #211d99, 0 22px 40px -18px #0b085eb3; transition: background-color 140ms ease-out, transform 140ms ease-out; }
.sc-avatar { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: var(--tk-blue); color: #fff; font-size: 14px; font-weight: 900; line-height: 1; }
.sc-minibar__button .sc-avatar { flex: 0 0 auto; width: 30px; height: 30px; background: #fff; color: var(--tk-blue); font-size: 16px; }
.sc-minibar__text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-minibar__icon { flex: 0 0 auto; width: 20px; height: 20px; }
.sc-minibar__button:focus-visible { outline: 3px solid var(--tk-coral); outline-offset: 3px; }
.sc-minibar__button:active { transform: translateY(2px); box-shadow: 0 1px 0 #211d99; }

/* Hover only where a pointer can hover. On a touch screen the hover style would stay on after a tap. */
@media (hover: hover) {
  .sc-skip:hover { color: var(--tk-blue); text-decoration-color: currentColor; }
  .sc-close:hover { background: var(--sc-soft); }
  .sc-entry__button:not(:disabled):hover { background: var(--tk-blue-hover); }
  .sc-entry__button:not(:disabled):hover .tk-icon { transform: translateX(3px); }
  .sc-entry__skip:hover { color: var(--tk-blue); text-decoration-color: currentColor; }
  /* A job button or an agent card under a pointer that has not moved since it appeared (for example the click on
     the page's button that opened the panel) looks like the others: .is-pointer-still
     (signup_chat_controller.js#holdHover). */
  .sc-job:not(:disabled):hover { border-color: var(--tk-blue); box-shadow: 0 3px 0 var(--tk-blue); transform: translateY(-1px); }
  .is-pointer-still .sc-job:not(:disabled):hover { border-color: #dcd8ef; box-shadow: 0 2px 0 #211d990f; transform: none; }
  .sc-chip:hover { background: var(--sc-soft); }
  .sc-agent:not(:disabled):hover { border-color: var(--tk-blue); box-shadow: 0 3px 0 var(--tk-blue), 0 22px 34px -22px #2a24a8; transform: translateY(-1px); }
  .sc-agent:not(:disabled):hover .sc-agent__pick .tk-icon { transform: translateX(3px); }
  .is-pointer-still .sc-agent:not(:disabled):hover { border-color: #e1ddf3; box-shadow: 0 3px 0 #211d9926, 0 22px 36px -28px #0b085e; transform: none; }
  .is-pointer-still .sc-agent:not(:disabled):hover .sc-agent__pick .tk-icon { transform: none; }
  .sc-provider:hover { background: #f6f5ff; box-shadow: 0 3px 0 #16136b, 0 22px 34px -20px #0b085e; transform: translateY(-1px); }
  .sc-provider:hover .sc-provider__arrow .tk-icon { transform: translateX(3px); }
  .sc-signin__note a:hover { color: var(--tk-lilac); }
  .sc-error__retry:hover { background: #2e2f3d; }
  .sc-send:not(:disabled):hover { background: var(--tk-blue); color: #fff; }
  .sc-minibar__button:hover { background: var(--tk-blue-hover); }
}

@media (prefers-reduced-motion: no-preference) {
  .sc-typing__dot { animation: sc-wait 1.2s ease-in-out infinite; }
  .sc-typing__dot:nth-child(2) { animation-delay: .16s; }
  .sc-typing__dot:nth-child(3) { animation-delay: .32s; }
  .sc-status__line.is-active .sc-status__mark::after { animation: sc-pulse 1.1s ease-in-out infinite; }
  .sc-ghost__bar { animation: sc-shimmer 1.8s ease-in-out infinite; }
  .sc-agents__item:nth-child(2) .sc-ghost__bar { animation-delay: .15s; }
  .sc-agents__item:nth-child(3) .sc-ghost__bar { animation-delay: .3s; }
  .sc-log > .sc-msg:last-child { animation: sc-arrive 260ms ease-out both; }
  .sc-build, .sc-signin { animation: sc-rise 320ms ease-out both; }
  .sc-dialog[open] .sc-app { animation: sc-rise 220ms ease-out both; }
  .sc-dialog[open]::backdrop { animation: sc-arrive 200ms ease-out both; }
  .sc-minibar:not([hidden]) { animation: sc-rise 200ms ease-out both; }
}
@keyframes sc-wait { 0%, 70%, 100% { opacity: .25; transform: none; } 35% { opacity: .9; transform: translateY(-3px); } }
@keyframes sc-pulse { 0%, 100% { transform: scale(.8); opacity: .7; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes sc-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes sc-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes sc-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .sc-app *, .sc-app *::before, .sc-app *::after, .sc-minibar * { transition: none !important; animation: none !important; }
  .sc-typing__dot { opacity: .5; }
}

/* Tablet widths: one column, the stage under the copy, the sample cards side by side. */
@media (min-width: 641px) and (max-width: 899px) and (min-height: 501px) {
  .sc-samples { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .sc-sample { margin: 0 !important; grid-template-columns: minmax(0, 1fr); grid-template-areas: "icon" "name" "does" "result"; row-gap: 6px; }
}

/* Phone, upright or sideways: the panel becomes a sheet at the bottom of the visible area. A sideways phone
   is wide but short (844 x 390).
   - The bottom edge of the sheet is the bottom edge of the visual viewport (--sc-top + --sc-height), so the
     keyboard never covers a field. The sheet is fixed to the layout viewport, so `bottom` is the layout
     viewport height minus that edge. Without the script, the sheet sits at the bottom of the screen.
   - The height follows the content, up to the visible height minus --sc-sheet-gap. The dimmed page
     shows in that gap. A tap on the gap minimizes the chat, as a tap on the dimmed area does on a desktop.
   - /start is not a sheet: see .sc-app--page below. */
@media (max-width: 640px), (max-height: 500px) {
  :root { --sc-sheet-gap: 40px; }
  .sc-page { padding: 0; }
  .sc-app { --sc-gutter: 20px; position: fixed; left: 0; right: 0; top: auto; bottom: calc(100% - var(--sc-top, 0px) - var(--sc-height, 100%)); width: 100%; height: auto; max-height: calc(var(--sc-height, 100dvh) - var(--sc-sheet-gap)); border-radius: 20px 20px 0 0; box-shadow: 0 -18px 40px -24px #0b085e66; }
  /* /start is a full page, not a pop-up: the panel fills the visible area from its top edge. The
     content does not grow to fill the panel, so the message box sits directly under the last message.
     When the content is longer than the panel, it scrolls and the message box stays at the bottom. */
  .sc-app--page { top: var(--sc-top, 0px); bottom: auto; height: var(--sc-height, 100dvh); max-height: none; border-radius: 0; box-shadow: none; }
  .sc-app--page .sc-scroll { flex: 0 1 auto; }
  .sc-dialog[open] .sc-app { animation: none; }
  .sc-bar__inner { min-height: 56px; padding-top: 4px; }
  .sc-brand { font-size: 19px; }
  .sc-canvas { padding: 6px var(--sc-gutter) 26px; }

  .sc-hero { gap: 22px; }
  .sc-hero__title { font-size: clamp(32px, 9.4vw, 40px); }
  .sc-hero__more { margin-top: 12px; }
  .sc-hero__lede { font-size: 16px; line-height: 1.42; }
  .sc-entry { margin-top: 18px; }
  /* The field and the button stack, each the full width. */
  .sc-entry__row { display: grid; gap: 8px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .sc-entry__row:focus-within { box-shadow: none; }
  .sc-entry__input { height: 54px; padding: 0 16px; border: 1.5px solid var(--tk-rule); border-radius: 12px; background: #fff; font-size: 17px; }
  .sc-entry__input:focus { border-color: var(--tk-blue); box-shadow: 0 0 0 3px var(--tk-lilac); }
  .sc-entry__button { width: 100%; height: 54px; }
  .sc-entry--inline .sc-entry__input, .sc-entry--inline .sc-entry__button { height: 50px; }
  .sc-jobs { margin-top: 20px; }
  .sc-jobs__list { gap: 8px; }
  .sc-job { flex-direction: column; align-items: flex-start; gap: 8px; min-height: 0; padding: 10px; font-size: 14px; }
  .sc-job__icon { width: 30px; height: 30px; border-radius: 8px; }
  .sc-job__icon svg { width: 18px; height: 18px; }
  .sc-proof { margin-top: 18px; font-size: 13px; }
  .sc-stage { padding: 16px 16px 18px; gap: 10px; }
  .sc-draft__line { margin-bottom: 12px; font-size: 16px; }
  /* On a phone the placeholder cards are short, so the research lines above them stay in view. */
  .sc-ghost { gap: 8px; padding: 14px 16px; }
  .sc-ghost__rule, .sc-ghost__bar--short, .sc-ghost__bar--label, .sc-ghost__bar--value { display: none; }
  .sc-samples { gap: 8px; }
  .sc-sample { margin: 0 !important; padding: 12px; }
  .sc-sample__does { display: none; }
  .sc-sample__name { align-self: center; }
  .sc-sample__result { margin-top: 8px; }

  .has-conversation .sc-hero__title { font-size: 22px; }
  .has-conversation .sc-log { margin-top: 18px; }
  .sc-text { font-size: 17px; }
  .sc-build { padding: 16px; margin-inline: -4px; width: calc(100% + 8px) !important; }
  .sc-build__title { font-size: 21px; margin-bottom: 12px; }
  .sc-signin { padding: 22px 18px 20px; }
  .sc-signin__reason { font-size: 22px; }
  .sc-dock { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .sc-minibar { left: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .sc-minibar__button { max-width: calc(100vw - 96px); min-height: 52px; gap: 10px; padding: 10px 14px 10px 10px; font-size: 15px; }
  .sc-minibar__icon { display: none; }
}
@media (max-height: 500px) { :root { --sc-sheet-gap: 24px; } }
@media (max-width: 380px) {
  .sc-agent__fact { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sc-provider__label { font-size: 16px; }
  .sc-provider__sub { font-size: 13px; }
  .sc-job { font-size: 13.5px; }
}