/* Marketing site — small additions on top of ds/tokens.css + ds/components.css.
   Tokens only (no raw colours), so light/dark and contrast follow the design
   system. Same-origin, no external requests. */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* clip, not hidden: hidden would make <body> the scroll container and unstick the header. */
html, body { overflow-x: clip; }
/* The header is sticky: anchors land below it, with a breath of air. */
section[id], [id="main"], [id="signin"] { scroll-margin-top: calc(var(--space-16) + var(--space-4)); }

/* Header: brand + primary call-to-action stay on one line down to 320px. */
.mhead .brand { padding: 0; flex: none; }
.cta-short { display: none; }
@media (max-width: 600px) {
  .mhead__inner { gap: var(--space-3); }
}
@media (max-width: 420px) {
  .cta-long { display: none; }
  .cta-short { display: inline; }
}

/* "Your assistant": the asks, as quote cards. */
.asks { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.asks li { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.asks q { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--color-text); quotes: "\201C" "\201D"; }
.asks q::before { color: var(--color-accent); }
@media (max-width: 900px) { .asks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .asks { grid-template-columns: minmax(0, 1fr); } }

/* Menu on narrow screens: a <details> (no script needed to open it); js/nav.js
   closes it after a choice. Hidden where the full nav fits. */
.mmenu { display: none; position: relative; }
.mmenu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-h-sm); min-width: var(--control-h-sm); padding-inline: var(--space-2); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font-size: var(--text-xs); font-weight: var(--weight-semibold); transition: background var(--duration-fast) var(--ease-standard); }
.mmenu > summary::-webkit-details-marker { display: none; }
.mmenu > summary:hover { background: var(--color-surface-sunken); }
.mmenu > summary:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.mmenu[open] > summary { background: var(--color-accent-subtle); border-color: var(--color-accent); }
.mmenu__panel { position: absolute; right: 0; top: calc(100% + var(--space-2)); min-width: calc(var(--space-24) * 3); padding: var(--space-2); list-style: none; display: flex; flex-direction: column; gap: 2px; background: var(--color-surface-raised); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: var(--z-overlay); }
.mmenu__panel a { display: flex; align-items: center; gap: var(--space-2); min-height: calc(var(--control-h-md) + var(--space-1)); padding-inline: var(--space-3); border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.mmenu__panel a:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.mmenu__panel li + li.mmenu__sep { margin-top: var(--space-1); padding-top: var(--space-1); border-top: var(--border-width) solid var(--color-border); }
@media (max-width: 900px) {
  .mmenu { display: block; }
  .mhead .btn--signin { display: none; }   /* "Sign in" lives in the menu here */
}
@media (pointer: coarse) { .mmenu > summary { min-height: calc(var(--control-h-md) + var(--space-1)); min-width: calc(var(--control-h-md) + var(--space-1)); } }

/* Talk to us / sign in */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); }
.contact__card { background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); box-shadow: var(--shadow-sm); }
.contact__card h3 { font-size: var(--text-lg); }
.contact__card a { overflow-wrap: anywhere; }
.contact__card .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 700px) {
  .contact { grid-template-columns: minmax(0, 1fr); }
}

/* Footer */
.mfoot .spread { row-gap: var(--space-4); }
.mfoot ul { list-style: none; padding: 0; margin: 0; }
.mfoot a { overflow-wrap: anywhere; }
.mfoot__brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text); font-family: var(--font-display); font-weight: var(--weight-semibold); text-decoration: none; }
.mfoot__brand .brand__mark { width: var(--space-5); height: var(--space-5); border-radius: var(--radius-sm); }
.mfoot__brand .brand__mark .icon { width: 100%; height: 100%; }
.mfoot__brand:hover { color: var(--color-accent); }

/* Buttons inside a column stack keep their natural width. */
#see .stack > .btn { align-self: flex-start; }

/* "Chat with us" (js/chat.js): a pill on wide screens, a round button on phones,
   and room at the end of the page so it never sits on the footer controls. */
.chat-bubble { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 50; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--control-h-lg); padding-inline: var(--space-5); border-radius: 999px; background: var(--color-accent); color: var(--color-accent-text);
  font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold); box-shadow: var(--shadow-lg, 0 8px 24px rgb(0 0 0 / .18));
  transition: background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.chat-bubble:hover { background: var(--color-accent-hover); }
.chat-bubble:active { transform: translateY(1px); }
.chat-bubble:focus-visible { outline: 3px solid var(--color-focus, var(--color-accent)); outline-offset: 3px; }
.chat-bubble[aria-expanded="true"] { background: var(--color-text); color: var(--color-surface); }
.chat-panel { position: fixed; right: var(--space-4); bottom: calc(var(--space-4) + var(--control-h-lg) + var(--space-2)); z-index: 50;
  width: min(380px, calc(100vw - 2 * var(--space-4))); height: min(560px, calc(100vh - 7rem)); height: min(560px, calc(100dvh - 7rem));
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg, 0 8px 24px rgb(0 0 0 / .18)); overflow: hidden; display: flex; flex-direction: column; }
.chat-panel iframe { flex: 1; width: 100%; border: 0; }
.chat-close { position: absolute; top: var(--space-2); right: var(--space-2); z-index: 1; border: var(--border-width) solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-md);
  width: calc(var(--space-8) + var(--space-1)); height: calc(var(--space-8) + var(--space-1)); display: grid; place-items: center;
  color: var(--color-text-muted); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0; }
.chat-close:hover { color: var(--color-text); background: var(--color-surface-sunken); }
.chat-close:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.chat-panel[hidden] { display: none; }
body.has-chat { padding-bottom: calc(var(--control-h-lg) + var(--space-6)); }
@media (max-width: 700px) {
  .chat-bubble { width: calc(var(--control-h-lg) + var(--space-2)); height: calc(var(--control-h-lg) + var(--space-2)); padding: 0; }
  .chat-bubble__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .chat-panel { bottom: calc(var(--space-4) + var(--control-h-lg) + var(--space-4)); }
  body.has-chat { padding-bottom: calc(var(--control-h-lg) + var(--space-10)); }
}