/* ------------------------------------------------------------------
   The assistant card (ask.js drives it): directly below Contact sales on
   /corporate, where Dan put the form first on 2026-10-10, and above "Talk to
   a person" on the homepage. It reads the page's own tokens (--paper,
   --ink, --muted, --line, --rule, --accent, --accent-text, --display,
   --err), which both pages define.

   A card of its own rather than a part of the sales card: a visitor can have
   a question long before they are ready to write to the team, and the form
   stays the page's one call to action. So it shares the sales card's width
   (560), radius (16), type and field style, but takes a plain rule for a
   border and no glow. The purple and its pulse belong to the thing we want
   sent.
   ------------------------------------------------------------------ */
.ask {
  max-width: 560px; margin: 40px auto 0;
  border: 1px solid var(--rule); border-radius: 16px;
  background: var(--paper); color: var(--ink);
  padding: 30px 30px 24px;
}
/* Shipped hidden; ask.js shows it once it can actually answer. Without
   script, or before the Worker has a Turnstile key, there is no card rather
   than a card that cannot work. */
.ask[hidden], html:not(.js) .ask { display: none; }

.ask .tag {
  font: 800 11px/1.35 var(--display); letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent-text);
  margin: 0 0 10px; text-align: center;
}
.ask h2 {
  font: 900 clamp(22px, 4.6vw, 27px)/1.15 var(--display);
  letter-spacing: -0.015em; margin: 0 auto 6px; text-align: center;
}
.ask .lede {
  color: var(--muted); font-size: 15px; max-width: 42ch;
  margin: 0 auto 18px; text-align: center; text-wrap: pretty;
}

/* ---- the conversation ---- */
.ask-log {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
  /* Long enough for an answer and its follow-up; past that it scrolls inside
     the card rather than pushing the form off the screen. */
  max-height: min(460px, 62vh); overflow-y: auto; overscroll-behavior: contain;
}
.ask-log:empty { display: none; }
.ask-log li {
  font-size: 15px; line-height: 1.5; text-align: left;
  border-radius: 12px; padding: 10px 13px; overflow-wrap: anywhere;
}
.ask-log .q {
  align-self: flex-end; max-width: 85%;
  background: color-mix(in srgb, var(--accent) 16%, var(--paper));
}
.ask-log .a {
  align-self: stretch;
  background: var(--paper-soft); border: 1px solid var(--line);
}
.ask-log .a > * { margin: 0; }
.ask-log .a > * + * { margin-top: 8px; }
/* A list inside the answer is a list inside a list item, which browsers
   bullet with hollow circles; these are top-level lists in all but markup. */
.ask-log .a ul { list-style: disc; padding-left: 20px; }
.ask-log .a ol { list-style: decimal; padding-left: 20px; }
.ask-log .a li { padding: 0; border-radius: 0; }
.ask-log .a li + li { margin-top: 2px; }
.ask-log .src { font-size: 12.5px; color: var(--muted); }
.ask-log .busy { color: var(--muted); }
.ask-log .err { color: var(--err); }
/* The way to the team, under every answer and every refusal. A link in
   look, a button in fact: it fills in the form above rather than going
   anywhere. */
.ask .handoff {
  display: inline-block; padding: 0; border: 0; background: none; cursor: pointer;
  font: 700 14px/1.3 inherit; color: var(--accent-text);
  text-decoration: underline; text-underline-offset: 3px;
}
.ask .handoff:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

/* ---- asking ---- */
.ask textarea {
  display: block; width: 100%; min-height: 76px; resize: vertical;
  /* 16px or more, or iOS zooms the page on focus. */
  font: 400 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 11px; padding: 13px 14px;
}
.ask textarea:focus {
  outline: none; border-color: var(--accent-text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
/* Turnstile shows itself only when it needs the visitor to do something. */
#askTurnstile:not(:empty) { margin-top: 12px; display: flex; justify-content: center; }
.ask .fine {
  width: min(420px, 100%); margin: 14px auto 0;
  font-size: 13px; color: var(--muted); text-align: center; text-wrap: pretty;
}

/* "Ask our team" scrolls the page's contact card to the top of the window.
   /corporate keeps sections clear of its sticky header (`section[id]`,
   68px), and the homepage has one too; the cards are divs, so they get the
   room here. */
#salesCard, #contactCard { scroll-margin-top: 84px; }

@media (max-width: 620px) {
  .ask { padding: 28px 20px 22px; margin-top: 28px; }
}