/* ondynamics.com: the hero chat, in development on the hidden page /home-chat/ (loaded on that page only; it joins
   site.css when the chat moves to the home page). The line under "How can I help?", the conversation the hero
   becomes, and the column where the ring shows who is there. */

/* ---------- the line under the question ---------- */

/* "How can I help?" starts typing as soon as the line above has settled (site.js reads --type-wait, in seconds;
   without it, the home page waits one second) */
.hero-seq { --type-wait: 0.15; }
/* "How can I help?" a size up from the line above it, so the question leads to the answer line */
.hero-seq .lede.seq-type { font-size: clamp(1.6rem, 2.3vw, 2.1rem); line-height: 1.3; margin-top: 16px; max-width: none; }

.hc-dock {
  position: relative; max-width: 34rem; margin-top: 26px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s;
}
.hero-seq.hc-ready .hc-dock { opacity: 1; visibility: visible; transition: opacity 0.3s var(--ease); }

.hc-composer {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px;
  padding: 2px 0 8px; border-bottom: 1px solid rgba(242, 241, 238, 0.26);
}
/* focus: a red rule draws in under the line, the colour of the caret */
.hc-composer::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 1px; background: var(--accent-on-dark);
  transform: scaleX(0); transform-origin: left; transition: transform 0.55s var(--ease);
}
.hc-composer:focus-within::after { transform: scaleX(1); }

.hc-composer textarea {
  display: block; width: 100%; min-height: 0; margin: 0; padding: 8px 0; border: 0; border-radius: 0; background: transparent;
  resize: none; outline: none; overflow-y: hidden; font: inherit; font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.45; font-weight: 330;
  color: var(--on-dark); caret-color: var(--mark-red);
  scrollbar-width: thin; scrollbar-color: rgba(242, 241, 238, 0.22) transparent;
}
.hc-composer textarea::placeholder { color: var(--on-dark-mute); opacity: 1; }

/* the hero's red caret, carried down to the empty line until the visitor clicks into it */
.hc-fake-caret {
  position: absolute; left: 0; top: calc(2px + 8px + 0.2em); width: 2px; height: 1.1em; border-radius: 1px;
  font-size: clamp(1.1rem, 1.4vw, 1.3rem); background: var(--mark-red); pointer-events: none;
  animation: tw-blink 1.05s steps(1) infinite;
}
.hc-composer:focus-within .hc-fake-caret, .hc-typed .hc-fake-caret, html.hc-open .hc-fake-caret { display: none; }

/* the microphone and the send button share one place: the mic while the line is empty, send once there's text */
.hc-act { position: relative; width: 44px; height: 44px; margin-bottom: 2px; }
.hc-btn {
  position: absolute; inset: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(242, 241, 238, 0.28); background: transparent; color: var(--on-dark); cursor: pointer;
  transition: opacity 0.25s var(--ease), transform 0.35s var(--ease), background-color 0.2s, border-color 0.2s, color 0.2s;
}
.hc-btn svg { width: 20px; height: 20px; }
.hc-btn:hover { border-color: var(--on-dark); }
.hc-mic { border-color: transparent; color: var(--on-dark-mute); }
.hc-mic svg { width: 19px; height: 19px; }
.hc-mic:hover { border-color: transparent; color: var(--on-dark); background: rgba(242, 241, 238, 0.06); }
.hc-btn:focus-visible { outline-color: var(--accent-on-dark); }
.hc-send { background: var(--on-dark); border-color: var(--on-dark); color: var(--dark); }
.hc-send:hover { background: #fff; }
.hc-send:disabled { background: transparent; border-color: rgba(242, 241, 238, 0.16); color: rgba(242, 241, 238, 0.36); cursor: default; }
.hc-act:not(.no-mic) .hc-send, .hc-typed .hc-act:not(.no-mic) .hc-mic { opacity: 0; transform: scale(0.82); visibility: hidden; }
.hc-typed .hc-act:not(.no-mic) .hc-send { opacity: 1; transform: none; visibility: visible; }
.hc-mic.is-on { background: var(--accent-on-dark); border-color: var(--accent-on-dark); color: var(--dark); opacity: 1 !important; transform: none !important; visibility: visible !important; }
.hc-mic.is-on + .hc-send { opacity: 0 !important; visibility: hidden !important; }
.hc-btn[hidden] { display: none; }

/* suggestions: shown while the empty line has focus, before the first message, over the note so nothing moves */
.hc-line { position: relative; }
.hc-chips {
  position: absolute; z-index: 2; left: 0; right: 0; top: 100%; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.3s var(--ease), transform 0.45s var(--ease), visibility 0s linear 0.3s;
}
.hc-fresh:not(.hc-typed) .hc-dock:focus-within .hc-chips { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s var(--ease), transform 0.45s var(--ease); }
.hc-note, .hc-msg { transition: opacity 0.25s var(--ease); }
.hc-fresh:not(.hc-typed) .hc-dock:focus-within .hc-note, .hc-fresh:not(.hc-typed) .hc-dock:focus-within .hc-msg { opacity: 0; }
.hc-chip {
  padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(242, 241, 238, 0.22); background: transparent;
  color: #d6d5d0; font-size: 0.88rem; line-height: 1.3; cursor: pointer; transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.hc-chip:hover { border-color: var(--on-dark); color: var(--on-dark); background: rgba(242, 241, 238, 0.05); }
.hc-chip:focus-visible { outline-color: var(--accent-on-dark); }

.hc-msg { margin: 10px 0 0; font-size: 0.88rem; color: var(--accent-on-dark); }
.hc-msg:empty { display: none; }

.hc-note { margin: 12px 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--on-dark-mute); }
.hc-note .hc-av { width: 20px; height: 20px; margin: -2px 8px 0 0; }
.hc-note .hc-av.is-hugo::after { box-shadow: inset 0 0 0 1px var(--accent-on-dark); }
.hc-note a, .hc-note button {
  padding: 0; border: 0; background: none; font: inherit; color: #c9c8c3; cursor: pointer; white-space: nowrap;
  text-decoration: underline; text-decoration-color: rgba(242, 241, 238, 0.32); text-underline-offset: 3px;
}
.hc-note a { margin-left: 4px; }
.hc-note .hc-resume { display: block; margin-top: 4px; }
.hc-note a:hover, .hc-note button:hover { color: var(--on-dark); text-decoration-color: currentColor; }
.hc-note .hc-resume { color: var(--on-dark); }

/* who is speaking: the assistant is a small ring of light (chat.js draws it), Hugo is his own face */
.hc-av {
  position: relative; flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  overflow: hidden; vertical-align: middle; color: var(--on-dark);
}
.hc-av.is-ai { overflow: visible; }   /* the ring of light on its own, with no disc or edge */
.hc-av.is-ai svg { width: 62%; height: 62%; }
.hc-av canvas { display: block; width: 100%; height: 100%; }
.hc-av img { width: 100%; height: 100%; object-fit: cover; }
/* Hugo's face carries the mark's red, as a ring drawn inside the photo so nothing around it can clip it */
.hc-av.is-hugo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--accent-on-dark); }
.hc-av.is-away img { opacity: 0.55; filter: grayscale(1); }

/* ---------- the hero as the conversation ---------- */

.hc-log, .hc-side { display: none; }

/* the intro steps aside as the conversation starts, and comes back when it closes */
.hero-seq .hero-name, .hero-seq .wrap > .display, .hero-seq .wrap > .lede, .hero-seq .hero-actions {
  transition: opacity 0.45s var(--ease), transform 0.6s var(--ease), filter 0.45s var(--ease);
}
.hero-seq.hc-leaving .hero-name, .hero-seq.hc-leaving .wrap > .display, .hero-seq.hc-leaving .wrap > .lede, .hero-seq.hc-leaving .hero-actions, .hero-seq.hc-leaving .scroll-next {
  opacity: 0; transform: translateY(-18px); filter: blur(6px);
}
.hero-seq.hc-leaving .wrap > .display { transition-delay: 0.04s; }
.hero-seq.hc-leaving .wrap > .lede { transition-delay: 0.08s; }
.hero-seq.hc-leaving .wrap > .lede-2 { transition-delay: 0.12s; }

html.hc-open, html.hc-open body { overflow: hidden; overscroll-behavior: none; }
html.hc-open:not(.hc-page) main > :not(.hero-seq), html.hc-open:not(.hc-page) .site-footer { display: none; }   /* (on other pages the page stays, under the layer) */
/* (.hero.hero-seq[data-form] outranks site.css's phone hero, which keeps a band clear above its text) */
html.hc-open .hero.hero-seq[data-form] {
  position: fixed; inset: 0 0 auto 0; height: var(--hc-vh, 100dvh); min-height: 0; transform: translateY(var(--hc-vt, 0px));
  padding: calc(var(--header) + 16px) 0 24px;
}
html.hc-open .hero.hero-seq[data-form] .wrap {
  display: grid; flex: 1 1 0; min-height: 0; padding-bottom: 0;   /* fills the screen exactly (phones otherwise grow it) */
  grid-template-columns: minmax(0, 1fr) clamp(260px, 30vw, 460px); grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "log side" "dock side"; column-gap: clamp(32px, 5vw, 88px);
}
html.hc-open .hero-seq .wrap > .hero-name, html.hc-open .hero-seq .wrap > .display, html.hc-open .hero-seq .wrap > .lede,
html.hc-open .hero-seq .hero-actions, html.hc-open .hero-seq .scroll-next { display: none; }

html.hc-open .hc-log {
  grid-area: log; display: flex; flex-direction: column; gap: 26px; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  margin-left: -4px; padding: 72px 16px 32px 4px; outline-offset: -2px;   /* 4px of room on the left, so nothing at the edge is clipped */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 88px); mask-image: linear-gradient(180deg, transparent 0, #000 88px);
  scrollbar-width: thin; scrollbar-color: rgba(242, 241, 238, 0.2) transparent;
  animation: hc-in 0.7s var(--ease) 0.1s both;
}
html.hc-open .hc-log::before { content: ""; flex: 1 0 0; margin-bottom: -26px; }   /* the conversation sits at the foot, above the line */
html.hc-open .hc-note { display: none; }   /* once the chat starts, every reply carries its own name */
/* a reopened conversation shows its latest exchange; the rest waits behind one quiet button */
.hc-earlier { display: none !important; }
.hc-more {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 4px 0; border: 0; background: none;
  color: var(--on-dark-mute); font-size: 0.86rem; cursor: pointer; transition: color 0.2s;
}
.hc-more svg { width: 14px; height: 14px; }
.hc-more:hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }
.hc-more:focus-visible { outline-color: var(--accent-on-dark); }
html.hc-open .hc-dock { grid-area: dock; max-width: 46rem; margin-top: 0; }
html.hc-open .hc-composer textarea { font-size: 1.06rem; }

html.hc-open .hc-side {
  grid-area: side; display: grid; min-height: 0; justify-items: center;
  grid-template-rows: auto minmax(0, 1fr) auto auto minmax(0, 1fr);
  animation: hc-in 0.7s var(--ease) 0.2s both;
}
.hc-presence { position: relative; grid-row: 3; width: 100%; height: clamp(240px, 44vh, 460px); }
.hc-status { grid-row: 4; display: flex; align-items: center; gap: 12px; margin: 18px 0 0; font-size: 0.95rem; font-weight: 420; color: #d6d5d0; }

/* when Hugo joins, his face appears inside the ring, the particles passing in front of it */
.hc-face {
  position: absolute; left: 50%; top: 50%; width: var(--hc-face, 120px); height: var(--hc-face, 120px); margin: calc(var(--hc-face, 120px) / -2) 0 0 calc(var(--hc-face, 120px) / -2);
  border-radius: 50%; object-fit: cover; opacity: 0; transform: scale(0.82); filter: blur(6px);
  transition: opacity 0.9s var(--ease), transform 1.1s var(--ease), filter 0.9s var(--ease);
}
/* (Hugo's face no longer appears in the ring when he joins: his photo on his messages is enough) */
.hc-back {
  grid-row: 1; justify-self: end; align-self: start; display: inline-flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none;
  color: var(--on-dark); font-size: 0.95rem; cursor: pointer;
}
.hc-back svg {
  width: 44px; height: 44px; padding: 11px; border-radius: 50%; border: 1px solid rgba(242, 241, 238, 0.28);
  transition: border-color 0.2s, background-color 0.2s;
}
.hc-back:hover svg { border-color: var(--on-dark); background: rgba(242, 241, 238, 0.05); }
.hc-back:focus-visible { outline-color: var(--accent-on-dark); }

/* ---------- the turns: large type, no bubbles ---------- */

.hc-turn { max-width: 40rem; }
.hc-turn p { margin: 0; }
.hc-turn p + p { margin-top: 0.7em; }
/* the visitor's own words: a soft bubble on the right, so the two sides are told apart at a glance */
.hc-turn.is-you {
  align-self: flex-end; max-width: min(78%, 32rem); padding: 11px 17px; border-radius: 20px 20px 6px 20px;
  background: rgba(242, 241, 238, 0.09); color: var(--on-dark); font-size: 1rem; line-height: 1.5; font-weight: 330;
}
/* replies: plain text under the speaker's name, in a light weight (300; Hugo found 350 too strong), since light type on a dark ground reads heavy */
.hc-turn.is-ai, .hc-turn.is-hugo { color: #e6e5e1; font-size: clamp(1.04rem, 1.15vw, 1.14rem); line-height: 1.65; font-weight: 300; }
.hc-turn .hc-by { display: flex; align-items: center; gap: 11px; margin: 0 0 12px; font-size: 0.92rem; line-height: 1.2; font-weight: 420; letter-spacing: 0; color: #d6d5d0; }
/* a note in the conversation (Hugo has your message, your email is saved): the same face, in the same place, as a reply */
.hc-sys { display: flex; align-items: center; gap: 11px; margin: 0; font-size: 0.92rem; color: var(--on-dark-mute); }
.is-new { animation: hc-in 0.6s var(--ease) both; }

/* a reply is typed in: every character laid out but hidden, then shown in turn behind the red caret */
.hc-c { visibility: hidden; }
.hc-c.is-in { visibility: visible; }
.hc-caret { display: inline-block; position: relative; width: 0; height: 1em; vertical-align: -0.13em; }
.hc-caret::after { content: ""; position: absolute; left: 1px; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: var(--mark-red); }
.hc-caret.is-idle::after { animation: tw-blink 1.05s steps(1) infinite; }

/* a page named in a reply: its picture and its name, inline in the sentence */
.hc-link {
  padding: 2px 10px 2px 3px; margin: 0 1px; border-radius: 999px; background: rgba(242, 241, 238, 0.1); color: var(--on-dark);
  font-weight: 380; text-decoration: none; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-color 0.35s var(--ease);
}
.hc-link img {
  display: inline-block; width: 1.3em; height: 1.3em; margin-right: 7px; border-radius: 50%; object-fit: cover; vertical-align: -0.34em;
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease);
}
.hc-link:hover, .hc-link:focus-visible { background: rgba(242, 241, 238, 0.18); }
.hc-link:focus-visible { outline-color: var(--accent-on-dark); }
/* while a reply is typed, a link stays plain until the typing reaches it */
.hc-say .hc-link:not(.is-in) { background: transparent; }
.hc-say .hc-link:not(.is-in) img { opacity: 0; transform: scale(0.6); }

/* the email, when the conversation passes to Hugo: one field with its button inside, and one line beneath */
.hc-ask { width: min(100%, 25rem); margin: 0; }
.hc-ask-row {
  display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 6px 0 20px; border-radius: 999px;
  border: 1px solid rgba(242, 241, 238, 0.2); background: rgba(242, 241, 238, 0.04); transition: border-color 0.2s, background-color 0.2s;
}
.hc-ask-row:focus-within { border-color: rgba(242, 241, 238, 0.5); background: rgba(242, 241, 238, 0.06); }
.hc-ask.is-bad .hc-ask-row { border-color: var(--accent-on-dark); }
.hc-ask input {
  flex: 1; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; outline: none;
  font: inherit; font-size: 1rem; color: var(--on-dark); caret-color: var(--mark-red);
}
.hc-ask input::placeholder { color: var(--on-dark-mute); opacity: 1; }
.hc-ask button {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: var(--on-dark); color: var(--dark); cursor: pointer; transition: background-color 0.2s, transform 0.25s var(--ease);
}
.hc-ask button svg { width: 18px; height: 18px; }
.hc-ask button:hover { background: #fff; transform: translateX(1px); }
.hc-ask button:focus-visible { outline-color: var(--accent-on-dark); }
.hc-ask-help { margin: 9px 0 0 20px; font-size: 0.84rem; color: var(--on-dark-mute); }
.hc-ask.is-bad .hc-ask-help { color: var(--accent-on-dark); }

/* the page's own surfaces, in the conversation's colours */
.hero-seq ::selection { background: rgba(255, 125, 94, 0.32); color: #fff; }
/* the browser's own touches (autofill, suggestions, scrollbars) drawn dark, and autofill never paints the fields
   light: the email field and the line keep their own ground and lettering when a saved value is filled in */
.hero-seq { color-scheme: dark; }
.hc-composer textarea:autofill, .hc-ask input:autofill { -webkit-text-fill-color: var(--on-dark); transition: background-color 600000s 0s, color 600000s 0s; }
.hc-composer textarea:-webkit-autofill, .hc-ask input:-webkit-autofill, .hc-ask input:-webkit-autofill:hover, .hc-ask input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--on-dark); caret-color: var(--mark-red); transition: background-color 600000s 0s, color 600000s 0s;
}
.hc-log:focus-visible { outline: 1px solid rgba(242, 241, 238, 0.3); }

@keyframes hc-in { from { opacity: 0; transform: translateY(14px); } }

/* ---------- phones: the ring in a band at the top, the conversation, the line above the keyboard ---------- */

@media (max-width: 900px) {
  .hc-dock { max-width: none; margin-top: 22px; }
  .hc-composer textarea, html.hc-open .hc-composer textarea { font-size: 1.06rem; }
  .hc-fake-caret { font-size: 1.06rem; }
  .hc-chips { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .hc-chips::-webkit-scrollbar { display: none; }
  .hc-chip { flex: none; padding: 10px 14px; }
  .hc-note { font-size: 0.78rem; }

  html.hc-open .hero.hero-seq[data-form] { padding: calc(var(--header) + 2px) 0 calc(10px + env(safe-area-inset-bottom)); }
  html.hc-open .hero.hero-seq[data-form] .wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "side" "log" "dock"; }
  html.hc-open .hc-side { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; grid-template-areas: "ring ring" "status back"; justify-items: start; align-items: center; width: 100%; }
  .hc-presence { grid-area: ring; grid-row: auto; height: 15svh; min-height: 92px; }
  .hc-status { grid-area: status; grid-row: auto; gap: 8px; margin: 4px 0 0; font-size: 0.86rem; }
  .hc-status .hc-av { width: 28px; height: 28px; }
  .hc-back { grid-area: back; grid-row: auto; gap: 10px; margin: 4px 0 0; font-size: 0.86rem; }
  .hc-back svg { width: 40px; height: 40px; padding: 10px; }
  html.hc-open .hc-log { gap: 22px; padding: 40px 0 20px 4px; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40px); mask-image: linear-gradient(180deg, transparent 0, #000 40px); }
  html.hc-open .hc-dock { max-width: none; }
  .hc-turn.is-ai, .hc-turn.is-hugo { font-size: 1.02rem; line-height: 1.62; }
  .hc-turn.is-you { max-width: 86%; font-size: 0.98rem; padding: 10px 15px; }
  .hc-turn .hc-by { font-size: 0.88rem; }
  .hc-turn .hc-by .hc-av, .hc-sys .hc-av { width: 30px; height: 30px; }
}

/* ---------- reduced motion: every state arrives at once ---------- */

@media (prefers-reduced-motion: reduce) {
  .hc-dock, .hc-composer::after, .hc-btn, .hc-chips, .hero-seq .hero-name, .hero-seq .wrap > .display, .hero-seq .wrap > .lede, .hero-seq .hero-actions { transition: none !important; }
  .hc-log, .hc-side, .is-new { animation: none !important; }
  .hc-face { transition: none !important; }
  .hc-fake-caret, .hc-caret.is-idle { animation: none; }
}

/* ---------- preview controls (this hidden page only) ---------- */

.hc-dev { position: fixed; left: 12px; top: calc(var(--header) + 8px); z-index: 80; max-width: calc(100vw - 24px); font-size: 0.75rem; color: #c9c8c3; }
.hc-dev summary {
  display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-dark); background: rgba(24, 25, 27, 0.92);
  cursor: pointer; list-style: none; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; font-size: 0.68rem;
}
.hc-dev summary::-webkit-details-marker { display: none; }
.hc-dev > div { display: grid; gap: 8px; margin-bottom: 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--line-dark); background: rgba(24, 25, 27, 0.96); }
.hc-dev[open] { display: flex; flex-direction: column; align-items: flex-start; }
.hc-dev > div { margin: 8px 0 0; }
.hc-dev p { margin: 0; }
.hc-dev [role="group"] { display: flex; flex-wrap: wrap; gap: 6px; }
.hc-dev button { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-dark); background: transparent; color: #c9c8c3; font-size: 0.75rem; cursor: pointer; }
.hc-dev button[aria-pressed="true"] { background: var(--on-dark); color: var(--dark); border-color: var(--on-dark); }
.hc-ctx { max-width: 340px; max-height: 40vh; margin: 0; overflow: auto; font-family: var(--mono); font-size: 0.7rem; line-height: 1.5; color: var(--on-dark); white-space: pre-wrap; }

/* ---------- the live agent (stage 2) ---------- */

/* the honeypot: a field people never see and bots fill in */
.hc-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* where Cloudflare Turnstile appears, on the rare occasion it needs a click */
.hc-verify { margin-top: 12px; }
.hc-verify[hidden] { display: none; }
/* the note about who answers appears the first time the visitor clicks into the line, not as the page opens */
.hero-seq:not(.hc-noted) .hc-note { opacity: 0; visibility: hidden; }
.hc-note { transition: opacity 0.4s var(--ease), visibility 0s linear 0s; }
.hc-dev [hidden] { display: none; }

/* ---------- the line arrives: it draws itself in from the left to its full width, the suggestions following ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hc-dock .hc-composer { clip-path: polygon(0 -60%, 0 -60%, 0 160%, 0 160%); transition: clip-path 1.3s cubic-bezier(0.3, 0.7, 0.2, 1); }   /* at once, briskly, settling softly */
  .hero-seq.hc-ready .hc-dock .hc-composer { clip-path: polygon(0 -60%, 100% -60%, 100% 160%, 0 160%); }
  .hc-dock .hc-chips { opacity: 0; transform: translateY(6px); transition: opacity 0.7s var(--ease), transform 0.8s var(--ease); }
  .hero-seq.hc-ready .hc-dock .hc-chips { opacity: 1; transform: none; transition-delay: 1.3s; }
}

/* ---------- the stage: what the assistant shows, on the left, with the conversation moving to the right ---------- */
.hc-stage, .hc-card { display: none; }
/* a card, on the stage or under a reply: the number and the page, the picture, the heading, a short text, the points */
.hc-k { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark-mute); }
.hc-k i, .hc-ref i, .hc-tab i { font-style: normal; font-weight: 600; letter-spacing: 0.04em; color: var(--accent-on-dark); }
.hc-img { display: block; max-width: 100%; max-height: min(32vh, 300px); width: auto; height: auto; margin: 20px 0 0; border-radius: 10px; object-fit: contain; }
.hc-h { margin: 16px 0 0; font-size: 1.4rem; font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; color: var(--on-dark); }
.hc-h .cont { color: var(--on-dark-mute); }
.hc-p { margin: 12px 0 0; font-size: 0.98rem; line-height: 1.6; font-weight: 330; color: #c9c8c3; }
.hc-l { margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(242, 241, 238, 0.12); }
.hc-l li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(242, 241, 238, 0.12); font-size: 0.95rem; line-height: 1.45; font-weight: 380; color: #e6e5e1; }
.hc-l li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 0.6em; border-radius: 50%; background: var(--accent-on-dark); }
.hc-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; color: var(--on-dark); font-size: 0.95rem; text-decoration: underline; text-decoration-color: rgba(242, 241, 238, 0.32); text-underline-offset: 4px; transition: text-decoration-color 0.2s; }
.hc-go svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.hc-go:hover { text-decoration-color: currentColor; }
.hc-go:hover svg { transform: translateX(3px); }
.hc-go:focus-visible, .hc-ref:focus-visible, .hc-tab:focus-visible, .hc-stage-x:focus-visible { outline-color: var(--accent-on-dark); }

/* a reply's references to its cards: the card's number and heading, pointing to the stage */
.hc-refs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hc-ref {
  display: inline-flex; align-items: center; gap: 9px; max-width: 100%; padding: 6px 10px 6px 14px; border: 1px solid rgba(242, 241, 238, 0.2);
  border-radius: 999px; background: none; color: #d6d5d0; font: inherit; font-size: 0.86rem; font-weight: 380; line-height: 1.3; cursor: pointer;
  transition: border-color 0.25s, color 0.25s, background-color 0.25s;
}
.hc-ref svg { flex: none; width: 15px; height: 15px; color: var(--on-dark-mute); transition: color 0.25s, transform 0.3s var(--ease); }
.hc-ref span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-ref:hover { border-color: rgba(242, 241, 238, 0.5); color: var(--on-dark); }
.hc-ref:hover svg { transform: translateX(2px); }
.hc-ref.is-on { border-color: var(--accent-on-dark); color: var(--on-dark); background: rgba(255, 125, 94, 0.08); }
.hc-ref.is-on svg { color: var(--accent-on-dark); }

@media (min-width: 901px) {
  /* the conversation stays on the left, narrower; what the assistant shows opens on the right */
  html.hc-open.hc-shown .hero.hero-seq[data-form] .wrap { grid-template-columns: clamp(380px, 40vw, 600px) minmax(0, 1fr); grid-template-areas: "log side" "dock side"; }
  html.hc-open.hc-shown .hc-side { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 0; animation: none; }   /* no transform left behind, so Close can sit at the screen's edge */
  html.hc-open.hc-shown .hc-presence { display: none; }
  /* Close stays top right, over the conversation */
  html.hc-open.hc-shown .hc-back { position: fixed; z-index: 2; top: calc(var(--header) + 14px); right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
  html.hc-open.hc-shown .hc-stage:not([hidden]) {
    display: block; position: relative; width: 100%; max-width: 42rem; max-height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 6px 4px 6px 0; scrollbar-width: thin; scrollbar-color: rgba(242, 241, 238, 0.2) transparent;
  }
  .hc-stage-x {
    position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
    border: 1px solid rgba(242, 241, 238, 0.2); border-radius: 50%; background: transparent; color: var(--on-dark-mute); cursor: pointer; transition: color 0.2s, border-color 0.2s;
  }
  .hc-stage-x svg { width: 16px; height: 16px; }
  .hc-stage-x:hover { color: var(--on-dark); border-color: rgba(242, 241, 238, 0.5); }
  .hc-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 52px 30px 0; }
  .hc-tab {
    display: inline-flex; align-items: center; gap: 8px; max-width: 16rem; padding: 6px 13px; border: 1px solid rgba(242, 241, 238, 0.16); border-radius: 999px;
    background: none; color: var(--on-dark-mute); font: inherit; font-size: 0.8rem; line-height: 1.3; cursor: pointer; transition: color 0.2s, border-color 0.2s, background-color 0.2s;
  }
  .hc-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hc-tab:hover { color: var(--on-dark); border-color: rgba(242, 241, 238, 0.4); }
  .hc-tab.is-on { color: var(--on-dark); border-color: rgba(242, 241, 238, 0.5); background: rgba(242, 241, 238, 0.06); }
  .hc-stage-in { padding-right: 0; }
  .hc-stage-in .hc-img { max-height: min(34vh, 340px); margin-top: 24px; border-radius: 12px; }
  .hc-stage-in .hc-h { margin-top: 20px; font-size: clamp(2rem, 3vw, 3rem); line-height: 1.02; letter-spacing: -0.04em; }
  .hc-stage-in .hc-p { margin-top: 18px; max-width: 36rem; font-size: clamp(1.02rem, 1.15vw, 1.14rem); }
  .hc-stage-in .hc-l { margin-top: 26px; max-width: 36rem; }
  .hc-stage-in .hc-l li { padding: 12px 0; font-size: 1rem; }
  /* the card's lines ease in one after another (after --hc-d: the conversation gliding aside first) */
  .hc-stage-in.is-in > * { animation: hc-rise 1s var(--ease) both; animation-delay: var(--hc-d, 0s); }
  .hc-stage-in.is-in > :nth-child(2) { animation-delay: calc(var(--hc-d, 0s) + 0.12s); }
  .hc-stage-in.is-in > :nth-child(3) { animation-delay: calc(var(--hc-d, 0s) + 0.24s); }
  .hc-stage-in.is-in > :nth-child(4) { animation-delay: calc(var(--hc-d, 0s) + 0.36s); }
  .hc-stage-in.is-in > :nth-child(5) { animation-delay: calc(var(--hc-d, 0s) + 0.48s); }
  .hc-stage-in.is-in > :nth-child(n+6) { animation-delay: calc(var(--hc-d, 0s) + 0.6s); }
}

/* phones: no stage; each card sits under the reply that brought it, and the references give way */
@media (max-width: 900px) {
  .hc-refs { display: none; }
  .hc-card { display: block; margin-top: 14px; padding: 16px 16px 18px; border: 1px solid rgba(242, 241, 238, 0.14); border-radius: 14px; background: rgba(242, 241, 238, 0.04); }
  .hc-card:empty { display: none; }
  .hc-card .hc-img { max-height: 170px; margin-top: 14px; }
  .hc-card .hc-h { margin-top: 12px; font-size: 1.22rem; }
  .hc-card .hc-p { margin-top: 8px; font-size: 0.93rem; line-height: 1.55; }
  .hc-card .hc-l { margin-top: 12px; }
  .hc-card .hc-l li { padding: 8px 0; font-size: 0.9rem; }
  .hc-card .hc-go { margin-top: 14px; font-size: 0.9rem; }
  /* the line's note on one line: the short version, cut short if it must be */
  .hc-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* one of the site's visualizations under a reply, on a sheet of the site's paper, as on its page */
.hc-fig { margin-top: 16px; max-width: 36rem; }
.hc-fig-in { padding: clamp(10px, 1.4vw, 16px); border-radius: 12px; background: var(--paper); color: var(--ink); font-size: 1rem; font-weight: 400; line-height: 1.5; overflow: hidden; }
.hc-fig-in > figure { margin: 0; max-width: none; }
.hc-fig-in .diagram { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.hc-fig-in figcaption { display: none; }   /* the caption below replaces the page's own */
.hc-fig-in .dg { cursor: default; }
.hc-fig-in video, .hc-fig-in img { display: block; width: 100%; height: auto; border-radius: 6px; }
.hc-turn .hc-fig-c { margin: 16px 2px 0; font-size: 0.8rem; line-height: 1.45; font-weight: 380; color: var(--on-dark-mute); }
.hc-fig-c a { color: #c9c8c3; text-decoration: underline; text-decoration-color: rgba(242, 241, 238, 0.32); text-underline-offset: 3px; }
.hc-fig-c a:hover { color: var(--on-dark); text-decoration-color: currentColor; }

/* the line's note: a short version for phones */
.hc-note-s { display: none; }
@media (max-width: 900px) { .hc-note-l { display: none; } .hc-note-s { display: inline; } }

@media (prefers-reduced-motion: reduce) { .hc-stage-in.is-in > * { animation: none; } }

/* ---------- the privacy policy over the page, from the line's note: it closes back to the hero ---------- */
dialog.hc-priv {
  width: min(720px, calc(100vw - 24px)); max-height: calc(100svh - 48px); padding: 0; border: 0; border-radius: 18px; overflow: hidden;
  background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
dialog.hc-priv[open] { display: flex; flex-direction: column; }
dialog.hc-priv::backdrop { background: rgba(10, 11, 12, 0.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
@media (prefers-reduced-motion: no-preference) {
  dialog.hc-priv[open] { animation: hc-in 0.5s var(--ease) both; }
  dialog.hc-priv[open]::backdrop { animation: hc-fade 0.4s var(--ease) both; }
}
@keyframes hc-fade { from { opacity: 0; } }
.hc-priv-in { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 48px) 8px; }
.hc-priv-x {
  position: absolute; top: 12px; right: 12px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; transition: background-color 0.2s;
}
.hc-priv-x svg { width: 18px; height: 18px; }
.hc-priv-x:hover { background: var(--paper-2); }
.hc-priv-h { margin: 14px 48px 0 0; font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 500; line-height: 1.04; letter-spacing: -0.04em; text-wrap: balance; }
.hc-priv-h .cont { color: var(--cont); }
.hc-priv-lede { margin: 14px 0 0; font-size: 1.05rem; line-height: 1.5; color: var(--ink-2); }
.hc-priv .prose { max-width: none; margin: 0; padding: 4px 0 40px; font-size: 1rem; }
.hc-priv .prose h2 { margin-top: 1.8em; font-size: 1.35rem; }

/* phones: while the conversation is open, Close takes the menu button's place in the header, and the menu comes back after */
.hc-nav-x { display: none; }
@media (max-width: 900px) {
  html.hc-open .nav-toggle, html.hc-open .hc-back { display: none; }
  html.hc-open .hc-nav-x {
    display: grid; place-items: center; margin-left: auto; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: inherit; cursor: pointer;
  }
  .hc-nav-x svg { width: 24px; height: 24px; }
  .hc-nav-x:focus-visible { outline-color: var(--accent-on-dark); }
}

/* a gentle rise for what the assistant shows: further, slower and softer than hc-in */
@keyframes hc-rise { from { opacity: 0; transform: translateY(18px); filter: blur(3px); } }

/* phones: the ring leaves its band at the top to fill the screen behind the conversation (chat.js places it), so the band goes */
@media (max-width: 900px) { html.hc-open .hc-presence { display: none; } }

/* a picture or PDF Hugo sent from Telegram, under his words */
.hc-photo { display: block; width: fit-content; max-width: 100%; margin-top: 14px; border-radius: 12px; overflow: hidden; line-height: 0; }
.hc-photo img { display: block; max-width: 100%; max-height: min(55vh, 440px); width: auto; height: auto; }
.hc-photo:focus-visible { outline-color: var(--accent-on-dark); }
.hc-file {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin-top: 14px; padding: 8px 14px; border: 1px solid rgba(242, 241, 238, 0.2);
  border-radius: 999px; color: var(--on-dark); font-size: 0.9rem; text-decoration: none; transition: border-color 0.2s, background-color 0.2s;
}
.hc-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-file i { font-style: normal; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; color: var(--accent-on-dark); }
.hc-file svg { flex: none; width: 13px; height: 13px; color: var(--on-dark-mute); }
.hc-file:hover { border-color: rgba(242, 241, 238, 0.5); background: rgba(242, 241, 238, 0.05); }
.hc-file:focus-visible { outline-color: var(--accent-on-dark); }

/* the stage's list: what the assistant has shown in this conversation, each to open or remove, and Hide for the stage */
.hc-tray { margin: 0 0 34px; }
.hc-tray-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.hc-tray-k { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark-mute); }
.hc-tray-k::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-on-dark); }
.hc-hide {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 14px; border: 1px solid rgba(242, 241, 238, 0.2); border-radius: 999px;
  background: none; color: var(--on-dark-mute); font: inherit; font-size: 0.8rem; cursor: pointer; transition: color 0.2s, border-color 0.2s;
}
.hc-hide svg { width: 13px; height: 13px; }
.hc-hide:hover { color: var(--on-dark); border-color: rgba(242, 241, 238, 0.5); }
/* one row; a long one scrolls sideways and fades at its edge rather than wrapping */
.hc-tray-l {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
.hc-tray-l::-webkit-scrollbar { display: none; }
.hc-item { display: inline-flex; align-items: center; flex: none; max-width: 17rem; border: 1px solid rgba(242, 241, 238, 0.16); border-radius: 999px; transition: border-color 0.2s, background-color 0.2s; }
.hc-item:last-child { margin-right: 40px; }   /* clear of the fade */
.hc-item.is-on { border-color: rgba(242, 241, 238, 0.55); background: rgba(242, 241, 238, 0.07); }
.hc-item-go { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 4px 6px 13px; border: 0; background: none; color: var(--on-dark-mute); font: inherit; font-size: 0.8rem; line-height: 1.3; cursor: pointer; }
.hc-item-go i { font-style: normal; font-weight: 600; letter-spacing: 0.04em; color: var(--accent-on-dark); }
.hc-item-go span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-item:hover .hc-item-go, .hc-item.is-on .hc-item-go { color: var(--on-dark); }
.hc-item-x { display: grid; place-items: center; flex: none; width: 26px; height: 26px; margin-right: 3px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--on-dark-mute); cursor: pointer; transition: color 0.2s, background-color 0.2s; }
.hc-item-x svg { width: 12px; height: 12px; }
.hc-item-x:hover { color: var(--on-dark); background: rgba(242, 241, 238, 0.1); }
.hc-hide:focus-visible, .hc-item-go:focus-visible, .hc-item-x:focus-visible { outline-color: var(--accent-on-dark); }

/* Larger screens: while the conversation is open, Close chat takes the Contact button's place in the header (the
   conversation is the way to get in touch then), as Close takes the menu button's place on phones */
.hc-nav-x span { display: none; }
@media (min-width: 901px) {
  html.hc-open .nav-cta, html.hc-open .hc-back { display: none; }
  html.hc-open .hc-nav-x {
    display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px 0 18px; border: 1px solid rgba(242, 241, 238, 0.3);
    border-radius: 999px; background: transparent; color: var(--on-dark); font: inherit; font-size: 0.95rem; cursor: pointer; transition: border-color 0.2s, background-color 0.2s;
  }
  html.hc-open .hc-nav-x span { display: inline; }
  html.hc-open .hc-nav-x svg { width: 16px; height: 16px; }
  html.hc-open .hc-nav-x:hover { border-color: var(--on-dark); background: rgba(242, 241, 238, 0.06); }
  html.hc-open .hc-nav-x:focus-visible { outline-color: var(--accent-on-dark); }
}

/* the conversation starts clear of the header, and of WordPress's admin bar for a signed-in editor, and fades out
   before it reaches them */
@media (max-width: 900px) {
  html.hc-open .hero.hero-seq[data-form] { padding-top: calc(var(--header) + 10px); }
  html.hc-open .hc-log { padding-top: 52px; -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 8px, #000 60px); mask-image: linear-gradient(180deg, transparent 0, transparent 8px, #000 60px); }
}
html.hc-open body.admin-bar .hero.hero-seq[data-form] { padding-top: calc(var(--header) + 32px + 16px); }
@media (max-width: 900px) { html.hc-open body.admin-bar .hero.hero-seq[data-form] { padding-top: calc(var(--header) + 32px + 10px); } }
@media (max-width: 782px) { html.hc-open body.admin-bar .hero.hero-seq[data-form] { padding-top: calc(var(--header) + 46px + 10px); } }

/* ---------- the conversation on every other page: a layer over the page, which stays where it was, dimmed ---------- */
/* the veil dims the page; the ring (the page's own form canvas) rises above it; the conversation sits on top */
.hc-layer { display: none; }
html.hc-open .hero.hero-seq.hc-layer[data-form] { display: flex; z-index: 32; background: none; }
.hc-veil {
  position: fixed; inset: 0; z-index: 30; background: #0d0e0f url("../img/hero-dark-bg.webp") center / cover no-repeat;
  opacity: 0; visibility: hidden; transition: opacity 0.6s var(--ease), visibility 0s linear 0.6s;
}
html.hc-open .hc-veil { opacity: 1; visibility: visible; transition: opacity 0.6s var(--ease); }
html.hc-page.hc-open #form-canvas { z-index: 31; }
html.hc-open .wayfinder { opacity: 0 !important; visibility: hidden; }
@media (prefers-reduced-motion: no-preference) { html.hc-open .hc-layer .wrap { animation: hc-in 0.8s var(--ease) both; } }

/* Ask, in the header: a word and a small turning ring with the mark's red section (on phones the ring alone, by the menu) */
.hc-askbtn {
  --ring-red: var(--accent);
  display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px; border: 0; border-radius: 999px;
  background: transparent; color: inherit; font: inherit; font-size: 0.95rem; cursor: pointer; transition: background-color 0.25s;
}
.site-header.on-dark .hc-askbtn { --ring-red: var(--accent-on-dark); }
.hc-askbtn:hover { background: rgba(128, 128, 128, 0.08); background: color-mix(in srgb, currentColor 8%, transparent); }
.hc-askbtn:focus-visible { outline-offset: 2px; }
.hc-askring {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  background: conic-gradient(from 20deg, var(--ring-red) 0 64deg, transparent 64deg 80deg, currentColor 80deg 344deg, transparent 344deg);
  -webkit-mask: radial-gradient(circle, transparent 50%, #000 56%); mask: radial-gradient(circle, transparent 50%, #000 56%);
}
@media (prefers-reduced-motion: no-preference) { .hc-askring { animation: hc-askturn 16s linear infinite; } }
@keyframes hc-askturn { to { transform: rotate(1turn); } }
html.hc-open .hc-askbtn { display: none; }
@media (max-width: 900px) {
  .hc-askbtn { margin-left: auto; width: 44px; height: 44px; padding: 0; justify-content: center; }
  .hc-askbtn span { display: none; }
  .hc-askring { width: 21px; height: 21px; }
  .nav .hc-askbtn ~ .nav-toggle { margin-left: 0; }
}

/* "Ask about ..." at the wayfinder's end, following the section under it */
.wf-ask {
  display: inline-block; margin-left: auto; padding: 4px 0 4px 18px; border: 0; background: none;   /* (inline, so its spaces stay) */
  color: var(--accent-ink); font: inherit; letter-spacing: inherit; text-transform: inherit; white-space: nowrap; cursor: pointer; pointer-events: auto;
}
.wf-ask b { display: inline-block; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; font-weight: 600; }
.wf-ask svg { display: inline-block; width: 13px; height: 13px; margin-left: 7px; vertical-align: -2px; transition: transform 0.3s var(--ease); }
.wf-ask:hover svg { transform: translateX(3px); }
.wayfinder.on-dark .wf-ask { color: var(--accent-on-dark); }
@media (max-width: 600px) { .wf-ask-x { display: none; } }

/* the first line's suggestions, under it */
.hc-sugg { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hc-sugg .hc-chip { max-width: 100%; text-align: left; }   /* a long one wraps rather than running off a phone */

/* while the human check is up, the suggestions step aside (they open over the same space, and would catch its click) */
.hc-verifying .hc-chips { display: none !important; }

/* suggestions above the line: one small row that opens while the empty line has focus (before the first message),
   so the privacy note under the line stays in view; in the layer, the first line's own suggestions do this job */
.hc-dock .hc-chips {
  position: static; flex-wrap: wrap; gap: 6px; padding: 2px 0; margin: 0; max-height: 0; overflow: hidden; scrollbar-width: none; transform: none;   /* (2px: room for the borders) */
  transition: max-height 0.35s var(--ease), margin 0.35s var(--ease), opacity 0.25s var(--ease), visibility 0s linear 0.35s;
}
.hc-dock .hc-chips::-webkit-scrollbar { display: none; }
.hc-fresh:not(.hc-typed) .hc-dock:focus-within .hc-chips { max-height: 72px; margin: 0 0 10px; transform: none; transition: max-height 0.35s var(--ease), margin 0.35s var(--ease), opacity 0.3s var(--ease) 0.05s; }
.hc-dock .hc-chips .hc-chip { flex: none; padding: 4px 11px; font-size: 0.76rem; white-space: nowrap; }
.hc-fresh:not(.hc-typed) .hc-dock:focus-within .hc-note, .hc-fresh:not(.hc-typed) .hc-dock:focus-within .hc-msg { opacity: 1; }
.hc-layer .hc-dock .hc-chips { display: none; }
/* phones: the suggestions stay one row, sliding sideways, fading at the screen's edge */
@media (max-width: 900px) {
  .hc-dock .hc-chips { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .hc-fresh:not(.hc-typed) .hc-dock:focus-within .hc-chips { max-height: 40px; }
}
/* once the conversation is open, the first line carries the suggestions */
html.hc-open .hc-dock .hc-chips { display: none; }

/* ---------- the contact page and the conversation ---------- */
/* beside Send: the way to the assistant instead, a quiet underlined line with the small turning ring */
.hc-alt {
  --ring-red: var(--accent);
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 2px; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 0.95rem;
  cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; transition: color 0.2s, text-decoration-color 0.2s;
}
.hc-alt:hover { color: var(--ink); text-decoration-color: currentColor; }
.hc-alt:focus-visible { outline-offset: 3px; }
/* in the "Message sent" panel, on its dark ground */
.hc-alt.is-sent { --ring-red: var(--accent-on-dark); margin-top: 22px; color: #c9c8c3; text-decoration-color: rgba(242, 241, 238, 0.32); }
.hc-alt.is-sent:hover { color: var(--on-dark); }
/* a conversation already under way: sent with the message (ticked), or carried on */
.hc-had {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0 0 24px; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: 12px; font-size: 0.9rem; color: var(--ink-2);
}
.hc-had label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.hc-had input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.hc-had-go { padding: 0; border: 0; background: none; color: var(--accent-ink); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* phones: with the keyboard up, the browser shifts what is visible down the page (--hc-vt, from the visual viewport);
   the header follows the shift, as the conversation does, so the logo and the Close stay in view */
html.hc-open .site-header { transform: translateY(var(--hc-vt, 0px)); }

/* phones: the privacy line sits above the input once the conversation is open (under it, it would be behind the
   keyboard), until the first message is sent */
@media (max-width: 900px) {
  html.hc-open .hc-dock { display: flex; flex-direction: column; }
  html.hc-open .hero-seq.hc-fresh .hc-note { display: block; order: -1; margin: 0 0 10px; opacity: 1; visibility: visible; }
}

/* phones: no scrollbar beside the conversation (it showed just in from the edge); swiping scrolls it as before */
@media (max-width: 900px) {
  html.hc-open .hc-log { scrollbar-width: none; }
  html.hc-open .hc-log::-webkit-scrollbar { display: none; }
}

/* a page link whose page is showing on the right: lit, as a reference is */
.hc-link.is-on { background: rgba(255, 125, 94, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 125, 94, 0.55); }

/* phones: the question a size up with the rest of the hero (site.css) */
@media (max-width: 900px) { .hero-seq .lede.seq-type { font-size: 1.85rem; } }

/* the wayfinder's Ask takes clicks only while the strip shows (hidden, it caught clicks just under the header) */
.wayfinder:not(.is-on) .wf-ask { pointer-events: none; }

/* the home page's hero is the chat itself, so the header's Ask fades out over it, keeping its place so nothing moves */
.hc-askbtn { transition: background-color 0.25s, opacity 0.45s var(--ease), visibility 0s; }
.hc-askbtn.is-off { opacity: 0; visibility: hidden; pointer-events: none; transition: background-color 0.25s, opacity 0.3s var(--ease), visibility 0s 0.3s; }

/* What the assistant pins on the right (larger screens) sits on a pane of its own: a faint wash of light with the ring
   blurred behind it (no border, no solid fill), so it reads as the site's content, held up for this conversation, apart
   from the conversation itself. A fine line ties it to the link or reference in the chat it came from (chat.js). */
@media (min-width: 901px) {
  html.hc-open.hc-shown .hc-stage:not([hidden]) {
    padding: 24px 28px 28px; border-radius: 22px;
    background: linear-gradient(160deg, rgba(242, 241, 238, 0.085), rgba(242, 241, 238, 0.03) 60%);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
  html.hc-open.hc-shown .hc-tray { margin-bottom: 28px; }
}
.hc-tie { position: fixed; inset: 0; z-index: 33; width: 100vw; height: 100vh; overflow: visible; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; }
.hc-tie.is-on { opacity: 1; }
.hc-tie path { fill: none; stroke: var(--accent-on-dark); stroke-opacity: 0.6; stroke-width: 1; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.hc-tie circle { fill: var(--accent-on-dark); opacity: 0; }
.hc-tie.is-drawn path { stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease); }
.hc-tie.is-drawn circle { opacity: 1; transition: opacity 0.3s ease; }
.hc-tie.is-drawn circle:last-of-type { transition-delay: 0.8s; }
@media (max-width: 900px) { .hc-tie { display: none; } }
@media (prefers-reduced-motion: reduce) { .hc-tie.is-drawn path, .hc-tie.is-drawn circle { transition: none; } }

/* the pinned list wraps onto more lines, so every item can be seen (a row that scrolled sideways hid them from a mouse);
   past three lines it scrolls down, with a thin bar */
.hc-tray-l {
  flex-wrap: wrap; overflow-x: visible; overflow-y: auto; max-height: 122px; padding: 0 4px 2px 0;
  -webkit-mask-image: none; mask-image: none; scrollbar-width: thin; scrollbar-color: rgba(242, 241, 238, 0.22) transparent;
}
.hc-item { max-width: calc(50% - 4px); }   /* two to a line */
.hc-item:last-child { margin-right: 0; }

/* the human check takes room only while it asks for a click (chat.js), so an invisible one moves nothing */
.hc-verify { margin-top: 0; }
.hc-verify.is-asking { margin-top: 12px; }

/* who answers, and the privacy policy: under the name on the conversation's first turn from the assistant (chat.js), as
   a quiet subtitle, so the note under the line isn't needed once the conversation is open */
.hc-by-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hc-by-sub { font-size: 0.76rem; font-weight: 300; line-height: 1.4; color: var(--on-dark-mute); }
.hc-by-sub a { margin-left: 3px; color: inherit; text-decoration: underline; text-decoration-color: rgba(242, 241, 238, 0.35); text-underline-offset: 3px; }
.hc-by-sub a:hover { color: var(--on-dark); text-decoration-color: currentColor; }
.hc-by-sub a:focus-visible { outline-color: var(--accent-on-dark); }
html.hc-open .hero-seq .hc-note, html.hc-open .hero-seq.hc-fresh .hc-note { display: none; }
/* phones: the line opens the conversation as soon as it is touched, where the subtitle says it, so the hero keeps no room for the note and the line sits at the foot */
@media (max-width: 900px) { .hero-seq .hc-note { display: none; } }

/* beside the caret while a reply is on its way: what the assistant is doing, in words that change (chat.js), quiet and
   with a slow sheen passing over them */
.hc-doing { display: inline-block; margin-left: 10px; font-size: 0.86rem; font-weight: 300; line-height: 1.4; color: var(--on-dark-mute); vertical-align: baseline; transition: opacity 0.22s ease, transform 0.22s ease; }
.hc-doing.is-swap { opacity: 0; transform: translateY(3px); }
@media (prefers-reduced-motion: no-preference) {
  .hc-doing {
    color: transparent; -webkit-background-clip: text; background-clip: text;
    background-image: linear-gradient(100deg, rgba(242, 241, 238, 0.42) 40%, rgba(242, 241, 238, 0.95) 50%, rgba(242, 241, 238, 0.42) 60%);
    background-size: 300% 100%; animation: hc-sheen 2.4s linear infinite;
  }
}
@keyframes hc-sheen { from { background-position: 100% 0; } to { background-position: 0% 0; } }

/* phones: Ask is the word alone, set like the wordmark beside it (its weight and tight spacing, in the header's own
   colour), with no ring, border or dot, so the header reads as one family: the mark and name, Ask, and the menu's lines */
@media (max-width: 900px) {
  .hc-askbtn { width: auto; height: 44px; padding: 0 10px; gap: 0; font-size: 1.06rem; font-weight: 600; letter-spacing: -0.02em; line-height: 24px; }
  .hc-askbtn span { display: inline; }
  .hc-askring { display: none; }
  .hc-askbtn:hover { background: transparent; }
  .nav .hc-askbtn ~ .nav-toggle { margin-left: 2px; }
}

/* the chat open over a page: the header sits on the chat's dark layer whatever the page asked of it (the contact page's
   header is solid paper, which left its light text on white) */
html.hc-open.hc-page .site-header.solid::before, html.hc-open.hc-page .site-header.solid.is-top::before {
  background: rgba(15, 16, 17, 0.9); background: color-mix(in srgb, var(--dark) 90%, transparent); border-color: var(--line-dark);
}

/* phones: the conversation's box on the contact form in two lines, Carry on chatting under the label's words */
@media (max-width: 900px) {
  .hc-had { gap: 6px 10px; margin-bottom: 18px; padding: 11px 14px; }
  .hc-had-go { flex-basis: 100%; margin-left: 26px; text-align: left; }
}

/* phones: the line rises above a keyboard that lies over the conversation (--hc-kb, chat.js; Chrome on Android), and
   behind the conversation the page is its dark too, so no light edge shows at its foot whatever the browser does */
html.hc-open { background: #0d0e0f; }
@media (max-width: 900px) {
  html.hc-open .hero.hero-seq[data-form] { padding-bottom: calc(10px + max(env(safe-area-inset-bottom, 0px), var(--hc-kb, 0px))); }
}

/* the assistant's face: the mark, quiet (Hugo, 30 Oct). The ring a soft grey, its section a darker grey, so it reads as
   a sign rather than a letter; it turns while the assistant thinks, and slowly as it answers */
.hc-av.is-ai svg { width: 70%; height: 70%; color: rgba(242, 241, 238, 0.42); --mark-red: rgba(242, 241, 238, 0.16); }
.hc-av.is-ai svg g { transform-origin: 50% 50%; transform-box: view-box; }
@media (prefers-reduced-motion: no-preference) {
  .hc-av.is-ai.is-busy svg g { animation: hc-mark-turn 1.4s linear infinite; }
  .hc-av.is-ai.is-speaking svg g { animation: hc-mark-turn 5s linear infinite; }
}
@keyframes hc-mark-turn { to { transform: rotate(-360deg); } }