/* Speeqet shared styles
   Colors, fonts and spacing come from the Figma file "Speeqet" (Mobile page). */

:root {
  /* Brand */
  /* The palette is the Figma palette, nudged only as far as needed to meet WCAG AA
     (4.5:1 for text, 3:1 for the edges of form controls). */
  --indigo: #6265ee;        /* Figma #6366f1: backgrounds, borders, icons; white text on it passes */
  --indigo-ink: #5b5edf;    /* indigo used for TEXT (Figma #6366f1) */

  /* Small status TEXT colours (Figma value in brackets). The High contrast option darkens them further. */
  --ink-green: #0b7f58;     /* #10b981 */
  --ink-amber: #996307;     /* #f59e0b */
  --ink-red: #cb3a3a;       /* #ef4444 */
  --ink-orange: #bf5811;    /* #f97316 */
  --ink-faint: #697382;     /* #94a3b8 */
  --ink-result: #1d7c39;    /* #218c40 */
  --ink-pill-grey: #617187; /* #64748b */
  --ink-ended: var(--indigo-ink);
  --footer-eyebrow: #6f72f2;   /* indigo text on the dark footer (#6366f1) */
  --control-border: #8390a2;   /* edges of form fields, checkboxes and switches (#cbd5e1 / #e2e8f0) */
  --violet: #8558ec;
  --indigo-button: #6962ee;
  --indigo-text: #4d40bf;

  /* Neutrals */
  --ink: #0f172a;
  --body: #314157;
  --muted: #64748b;
  --border: #e2e8f0;
  --surface: #f8fafc;
  --white: #ffffff;
  --footer-line: #334155;

  /* Tints */
  --indigo-tint: #eef2ff;
  --indigo-tint-border: #dde3ff;
  --chip-border: #c7d2fe;

  /* Fonts */
  --font-display: "Afacad Flux", "DM Sans", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-label: "Inter", system-ui, sans-serif;

  /* A little air between the letters of bold headings (see the end of this file) */
  --heading-tracking: 0.02em;
}

*, *::before, *::after { box-sizing: border-box; }

/* Anything marked hidden stays hidden, even if a rule below sets its display. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; font-size: 100%; }

body {
  margin: 0;
  background: #eef0f4;
  color: var(--body);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.375rem;
}

a { color: inherit; text-decoration: none; }
p, h1, h2, h3 { margin: 0; }

/* The phone-sized screen. On a real phone it fills the width;
   on a computer it is centred at 430px wide, like the Figma frames. */
.screen {
  --gutter: 16px;
  width: 100%;
  max-width: 430px;
  min-height: max(100vh, 932px);
  margin: 0 auto;
  background: var(--white);
  display: flex;
  flex-direction: column;
  overflow: clip;
}

@media (min-width: 460px) {
  .screen {
    border: 1px solid var(--border);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
  }
}

/* ---------- Header ---------- */
.header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 16px var(--gutter);
}
.header__row { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 8px; }
.brand img { height: 22px; width: auto; aspect-ratio: 256 / 211; display: block; }       /* the logo mark (assets/logo-mark.png, 256 px wide: sharp on retina up to about 70px tall); sized to the wordmark beside it, larger on wide screens below */
.brand span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  text-transform: capitalize;
  letter-spacing: 0.035em;                /* a little air between the letters of the wordmark */
  color: var(--ink);
}
.header__actions { display: flex; align-items: center; gap: 24px; }
.link-signin { font-weight: 600; color: var(--indigo-ink); text-decoration: underline; }
.hamburger {
  display: block; position: relative; width: 28px; height: 18px;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.hamburger span {
  position: absolute; left: 0; width: 24px; height: 2px;
  background: var(--ink); border-radius: 1px;
}
.hamburger span:nth-child(1) { top: 2px; }
.hamburger span:nth-child(2) { top: 8px; }
.hamburger span:nth-child(3) { top: 14px; }

/* ---------- Page content ---------- */
.content { display: flex; flex-direction: column; gap: 22px; padding: 24px var(--gutter) 32px; }

.eyebrow {
  font-weight: 600; color: var(--indigo-ink);
  text-transform: uppercase; letter-spacing: 1.5px;
}
.eyebrow--lg { font-size: 1.25rem; letter-spacing: 0; line-height: 1.2; }
.eyebrow--md { font-size: 1rem; }
.eyebrow--sm { font-size: 0.6875rem; }

.h-hero { font-family: var(--font-display); font-weight: 700; font-size: 2.25rem; line-height: 2.25rem; color: var(--ink); }
.h-section { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.625rem; letter-spacing: 0.24px; color: var(--ink); }
.h-plain { font-weight: 700; font-size: 1.5rem; line-height: 1.2; color: var(--ink); }
.item-title { font-family: var(--font-label); font-weight: 600; font-size: 1rem; color: var(--ink); }

.stack-8  { display: flex; flex-direction: column; gap: 8px; }
.stack-14 { display: flex; flex-direction: column; gap: 14px; }
.stack-16 { display: flex; flex-direction: column; gap: 16px; }
.stack-20 { display: flex; flex-direction: column; gap: 20px; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  display: flex; flex-direction: column; gap: 20px;
}
.card--white {
  background: var(--white);
  padding: 0;
  gap: 0;
  overflow: clip;
  box-shadow: 0 10px 24px -8px rgba(15, 23, 42, 0.07);
}
.card__body { display: flex; flex-direction: column; gap: 16px; padding: 16px; }

/* ---------- Buttons ---------- */
.btn {
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; width: 100%;
  font-family: var(--font-body); font-weight: 600;
  color: var(--white); border-radius: 12px;
}
.btn--gradient {
  height: 49px; font-size: 0.9375rem;
  background: linear-gradient(to right, var(--indigo), var(--violet));
}
.btn--solid { padding: 14px 24px; font-size: 0.875rem; background: var(--indigo-button); }

/* ---------- Video / avatar card ---------- */
.viewport {
  position: relative; height: 200px; border-radius: 16px; overflow: clip;
  background: #1f1d1b; padding: 16px;
  display: flex; align-items: flex-end;
}
.viewport img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.viewport__hud { position: relative; flex: 1; display: flex; align-items: center; justify-content: space-between; }
.badge-name {
  background: rgba(0, 0, 0, 0.5); color: var(--white);
  font-size: 0.6875rem; font-weight: 600; padding: 4px 8px; border-radius: 6px; line-height: normal;
}
.badge-demo {
  position: relative;
  background: rgba(133, 88, 236, 0.95); color: var(--white);
  font-size: 0.6875rem; font-weight: 600; padding: 5px 10px; border-radius: 6px; line-height: normal;
}
.fineprint { font-size: 0.75rem; line-height: normal; color: var(--muted); text-align: left; }

/* ---------- Numbered steps ---------- */
.step { display: flex; gap: 16px; align-items: flex-start; }
.step__num {
  flex: none; width: 28px; height: 28px; border-radius: 14px;
  background: var(--indigo); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.8125rem;
}
.step__text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }

/* ---------- Icon rows ---------- */
.scope-row { display: flex; gap: 12px; align-items: flex-start; padding: 4px 0; }
.icon-circle {
  flex: none; width: 36px; height: 36px; border-radius: 18px;
  background: var(--indigo-tint); border: 1px solid var(--indigo-tint-border);
  display: flex; align-items: center; justify-content: center;
}
.icon-circle img { width: 18px; height: 18px; display: block; }

.divider { height: 1px; background: var(--border); border: 0; margin: 0; width: 100%; }

/* Keeps a phrase together on one line */
.nowrap { white-space: nowrap; }

/* ---------- Plain list (looks like text, not buttons) ---------- */
.industry-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px 16px; }
.industry-list li { position: relative; padding-left: 16px; color: var(--body); font-size: 0.9375rem; line-height: 1.35; }
.industry-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 50%; background: var(--indigo); }

/* ---------- Footer ---------- */
.footer {
  margin-top: auto;
  background: var(--ink);
  padding: 48px 24px 80px;
  display: flex; flex-direction: column; gap: 40px;
}
.footer > .stack-16 { gap: 20px; }
.footer .eyebrow { letter-spacing: 0; }
.footer__cta { font-family: var(--font-label); font-weight: 700; font-size: 1.5rem; line-height: 1.875rem; color: var(--white); }
.footer__line { height: 1px; background: var(--footer-line); width: 100%; }
.footer__bottom { display: flex; flex-direction: column; gap: 20px; align-items: center; text-align: center; }
.footer__copy { color: var(--border); }
.footer__links { display: flex; gap: 20px; font-weight: 500; color: var(--white); flex-wrap: wrap; justify-content: center; }

/* =====================================================================
   Added for the Menu, FAQ, About, Ethics and Contact pages
   ===================================================================== */

.screen--g20 { --gutter: 20px; }

/* ---------- Header extras ---------- */
.header--flat { display: flex; align-items: center; justify-content: space-between; }
.header--tight { padding-top: 12px; padding-bottom: 12px; }
.header__actions--12 { gap: 12px; }
.header__actions--20 { gap: 20px; }
.link-signin--14 { font-size: 0.875rem; }
.link-signin--13 { font-size: 0.8125rem; }
.hamburger--sm { width: 24px; }
.hamburger--sm span { width: 20px; }

/* Small pill button used in headers: MENU / CLOSE / HOME / BACK */
.pill-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 14px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.6875rem; line-height: normal;
  color: #475569; text-transform: uppercase; cursor: pointer;
}
.pill-btn--sm { padding: 6px 12px; }
.pill-btn img { display: block; width: 10px; height: 10px; }

/* ---------- Menu page ---------- */
.menu-body { flex: 1; background: var(--surface); padding: 25px var(--gutter) 32px; }
.menu-groups { display: flex; flex-direction: column; gap: 28px; }
.menu-group { display: flex; flex-direction: column; gap: 4px; }
.menu-group .eyebrow { letter-spacing: 0; }
.menu-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.menu-link__text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.menu-link__title { font-weight: 600; font-size: 1.125rem; line-height: normal; color: var(--ink); }
.menu-link img { width: 14px; height: 14px; flex: none; display: block; }

/* ---------- Headings used across the new pages ---------- */
.eyebrow--13 { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0; }
.eyebrow--12 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0; }
.label-caps { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--muted); line-height: normal; }
.h-dm-xl { font-weight: 800; font-size: 1.75rem; line-height: 2.125rem; color: var(--ink); }
.h-dm-lg { font-weight: 800; font-size: 1.5rem; line-height: normal; color: var(--ink); }
.h-dm-md { font-weight: 800; font-size: 1.375rem; line-height: normal; color: var(--ink); }
.h-dm-sm { font-weight: 800; font-size: 1.25rem; line-height: 1.3; color: var(--ink); }
.h-af-page { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 2.25rem; color: var(--ink); }
.h-af-24 { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: normal; color: var(--ink); }
.h-af-22 { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; line-height: normal; color: var(--ink); }
.h-af-20 { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: normal; color: var(--ink); }

/* ---------- Footer variants ---------- */
.footer--dm .footer__cta { font-family: var(--font-body); }
.footer--center .stack-16 { align-items: flex-start; }
.footer--center .footer__cta { text-align: left; }
.footer--center .eyebrow { width: 100%; }
.footer__copyright-bar {
  background: var(--ink); padding: 16px var(--gutter);
  font-size: 0.6875rem; line-height: 1.5; color: var(--white);
}
.footer__copyright-bar p { opacity: 0.8; }

/* ---------- FAQ ---------- */
.faq-body { display: flex; flex-direction: column; gap: 24px; padding: 24px var(--gutter) 32px; }
.search {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 16px;
}
.search img { width: 14.4px; height: 14.4px; flex: none; display: block; }
.search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--font-body); font-size: 0.875rem; color: var(--ink);
}
.search input::placeholder { color: var(--muted); opacity: 1; }
.search:focus-within { border-color: var(--indigo); }

.topics { display: flex; flex-direction: column; gap: 10px; }
.topics__row { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
.topic-pill {
  background: var(--surface); border: 1px solid var(--border); border-radius: 99px;
  padding: 8px 16px; font-family: var(--font-body); font-weight: 600; font-size: 0.8125rem;
  line-height: normal; color: #475569; cursor: pointer; white-space: nowrap;
}
.topic-pill[aria-pressed="true"] { background: var(--indigo); border-color: var(--indigo); color: var(--white); }

.accordion { display: flex; flex-direction: column; gap: 12px; }
.acc-item { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.acc-item.is-open { background: var(--surface); }
.acc-item__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem; line-height: 1.25rem; color: var(--body);
}
.acc-item__chev { width: 16px; height: 16px; flex: none; display: flex; align-items: center; justify-content: center; }
.acc-item__chev img { width: 14.4px; height: 14.4px; display: block; }
.acc-item__chev .up { display: none; }
.acc-item.is-open .acc-item__chev .up { display: block; }
.acc-item.is-open .acc-item__chev .down { display: none; }
.acc-item__body { display: none; padding-top: 12px; }
.acc-item.is-open .acc-item__body { display: block; }

.cta-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  background: var(--indigo-tint); border: 1px solid #e0e7ff; border-radius: 16px; padding: 20px;
}
.cta-card__text { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.cta-card__title { font-weight: 700; font-size: 1.125rem; line-height: normal; color: var(--ink); }
.cta-card__actions { display: flex; gap: 10px; width: 100%; }
.btn-sm {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: 8px; border: 1px solid transparent; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 0.8125rem; line-height: normal; white-space: nowrap;
}
.btn-sm img { width: 14.4px; height: 14.4px; display: block; }
.btn-sm--primary { background: var(--indigo); color: var(--white); }
.btn-sm--outline { background: var(--white); border-color: var(--border); color: #475569; }

/* ---------- About ---------- */
.about-hero { display: flex; flex-direction: column; gap: 16px; padding: 32px var(--gutter) 24px; }
.about-lead { font-weight: 800; }
.about-hero p, .mission p, .value-card p { text-wrap: pretty; }          /* no word left alone on the last line */
.about-image { padding: 0 var(--gutter) 24px; }
.about-image img { display: block; width: 100%; height: 240px; object-fit: cover; object-position: 50% 35%; border-radius: 16px; }
.mission {
  display: flex; flex-direction: column; gap: 14px; padding: 24px var(--gutter);
  background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.values { display: flex; flex-direction: column; gap: 24px; padding: 32px var(--gutter); }
.value-card {
  display: flex; flex-direction: column; gap: 12px; padding: 18px;
  background: var(--white); border: 1px solid var(--border); border-radius: 12px;
}
.icon-box {
  width: 36px; height: 36px; flex: none; border-radius: 8px; background: var(--indigo-tint);
  display: flex; align-items: center; justify-content: center;
}
.icon-box img { width: 18px; height: 18px; display: block; }
.value-card__title { font-weight: 700; font-size: 1rem; line-height: normal; color: var(--ink); }
.callout {
  display: flex; flex-direction: column; gap: 16px; padding: 24px;
  background: var(--indigo-tint); border-radius: 16px 16px 0 0;
}

/* ---------- Ethics ---------- */
.ethics-body { display: flex; flex-direction: column; gap: 40px; padding: 32px var(--gutter) 40px; }
.badge {
  align-self: flex-start; background: var(--indigo-tint); border: 1px solid var(--indigo-tint-border);
  border-radius: 999px; padding: 4px 10px; font-weight: 700; font-size: 0.75rem; line-height: normal;
  color: var(--indigo-ink); text-transform: uppercase; white-space: nowrap;
}
.h-ethics { font-family: var(--font-display); font-weight: 700; font-size: 2.125rem; line-height: 2.375rem; color: var(--ink); }
.principle {
  display: flex; flex-direction: column; gap: 14px; padding: 20px;
  background: var(--white); border: 1px solid var(--border); border-radius: 16px;
}
.principle__head { display: flex; align-items: center; gap: 12px; }
.icon-round {
  width: 40px; height: 40px; flex: none; border-radius: 20px; background: var(--indigo-tint);
  display: flex; align-items: center; justify-content: center;
}
.icon-round img { width: 20px; height: 20px; display: block; }
.commitments {
  display: flex; flex-direction: column; gap: 20px; padding: 24px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
}
.commitment { display: flex; align-items: flex-start; gap: 12px; }
.commitment__check {
  width: 24px; height: 24px; flex: none; border-radius: 12px; background: var(--indigo-tint);
  display: flex; align-items: center; justify-content: center;
}
.commitment__check img { width: 12px; height: 12px; display: block; }
.commitment__title { font-weight: 600; font-size: 0.9375rem; line-height: normal; color: var(--ink); }
.contact-cta {
  display: flex; flex-direction: column; gap: 16px; padding: 20px;
  background: var(--indigo-tint); border: 1px solid var(--indigo-tint-border); border-radius: 16px;
}
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.875rem; line-height: normal; color: var(--indigo-ink); }
.link-arrow img { width: 14px; height: 14px; display: block; }

/* ---------- Contact ---------- */
.contact-body { display: flex; flex-direction: column; gap: 28px; padding: 24px var(--gutter) 40px; }
.hours-notice {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.hours-notice > img { width: 8px; height: 8px; flex: none; display: block; }
.hours-notice__title { font-weight: 700; font-size: 0.8125rem; line-height: normal; color: var(--ink); }
.form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-weight: 600; font-size: 0.8125rem; line-height: normal; color: var(--ink); }
.field__label .req { font-weight: 400; color: var(--indigo-ink); margin-left: 4px; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--white); border: 1px solid var(--border); border-radius: 8px;
  padding: 0 12px; font-family: var(--font-body); font-size: 0.875rem; color: var(--ink); outline: 0;
}
.field input, .field select { height: 44px; }
.field textarea { height: 100px; padding: 12px; line-height: 1.4; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--indigo); }
.field select {
  appearance: none; -webkit-appearance: none; color: #475569;
  background: var(--white) url("../assets/contact-chevron-down.svg") no-repeat right 12px center / 14px 14px;
  padding-right: 36px;
}
.btn-form {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 12px 24px; border: 0; border-radius: 8px; background: var(--indigo); cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: 0.9375rem; line-height: normal; color: var(--white);
}
.btn-form img { width: 16px; height: 16px; display: block; }
.form-note { font-size: 0.8125rem; line-height: 1.4; color: var(--muted); }
.form-note[hidden] { display: none; }
.form-note--success { color: #15803d; font-weight: 700; background: #f0fdf4; border: 1px solid #dcfce7; border-radius: 10px; padding: 12px; }
.form-note--error { color: #b91c1c; font-weight: 700; background: #fef2f2; border: 1px solid #fee2e2; border-radius: 10px; padding: 12px; }
.channels {
  display: flex; flex-direction: column; gap: 16px; padding: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
}
.method { display: flex; align-items: center; gap: 12px; }
.method--top { align-items: flex-start; }
.method__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.method__label { font-weight: 500; font-size: 0.75rem; line-height: normal; text-transform: uppercase; color: var(--muted); }
.method__value { font-weight: 600; font-size: 0.875rem; line-height: normal; color: var(--ink); }
.icon-box--white { background: var(--white); border: 1px solid var(--border); }
.socials { display: flex; flex-wrap: wrap; gap: 8px; }
.social {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: var(--indigo-tint); border: 1px solid var(--indigo-tint-border); border-radius: 999px;
  font-weight: 700; font-size: 0.8125rem; line-height: normal; color: var(--indigo-ink);
}
.social:hover { background: var(--indigo-tint-border); }
.social img { width: 16px; height: 16px; display: block; }
.faq-callout {
  display: flex; flex-direction: column; gap: 4px; padding: 16px;
  background: var(--indigo-tint); border-radius: 16px;
}
.faq-callout__title { font-weight: 700; font-size: 0.9375rem; line-height: normal; color: var(--ink); }
.faq-callout .link-arrow { padding-top: 6px; font-size: 0.8125rem; gap: 4px; }

/* =====================================================================
   Added for the sign-up flow: Subscription, Payment, Verify email,
   Welcome
   ===================================================================== */

.footer__copyright-bar { margin-top: auto; }

/* ---------- Header variants ---------- */
.header--logo-only { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; padding-bottom: 12px; }
.header--cancel { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; }
.link-cancel { font-weight: 500; font-size: 0.875rem; line-height: normal; color: #475569; }

/* ---------- Step progress ---------- */
.steps { display: flex; flex-direction: column; gap: 8px; }
.steps__labels { display: flex; align-items: center; justify-content: space-between; font-size: 0.6875rem; line-height: normal; white-space: nowrap; }
.steps__name { font-weight: 700; color: var(--indigo-ink); text-transform: uppercase; }
.steps__count { font-weight: 600; color: var(--muted); }
.steps__bar { height: 4px; border-radius: 2px; background: var(--border); }
.steps__bar > span { display: block; height: 100%; width: var(--progress, 50%); border-radius: 2px; background: var(--indigo); }
.steps-bar-row { padding: 12px var(--gutter) 0; background: var(--white); border-bottom: 1px solid var(--border); }
.steps-bar-row--pad { padding-bottom: 0; }
.steps--lg { padding-top: 12px; gap: 9px; }
.steps--lg .steps__labels { font-size: 0.75rem; font-weight: 600; }
.steps--lg .steps__name { font-size: 1rem; font-weight: 600; }
.steps--lg .steps__count { color: var(--ink-faint); }
.steps-block { padding: 16px; background: var(--white); border-bottom: 1px solid var(--border); }

/* ---------- Plans ---------- */
.plans { display: flex; flex-direction: column; gap: 20px; padding: 24px 16px; }
.plans__intro { display: flex; flex-direction: column; gap: 5px; }
.plans__intro .eyebrow { letter-spacing: 0; }
.h-plans { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 2rem; color: var(--ink); text-align: left; }
.plan-card {
  display: flex; flex-direction: column; gap: 35px; padding: 20px;
  background: var(--white); border: 1px solid var(--indigo-tint-border); border-radius: 16px;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.05);
}
.plan-card__head { display: flex; flex-direction: column; gap: 18px; }
.plan-card__row { display: flex; align-items: center; justify-content: space-between; }
.tag {
  background: var(--indigo-tint); color: var(--indigo-ink); border-radius: 4px; padding: 2px 6px;
  font-weight: 600; font-size: 0.625rem; line-height: normal;
}
.price { display: flex; align-items: baseline; gap: 4px; line-height: normal; }
.price__amount { font-family: var(--font-display); font-weight: 700; font-size: 2rem; color: var(--ink); }
.price__unit { color: #475569; }
.features { display: flex; flex-direction: column; gap: 34px; margin: 0; padding: 0; list-style: none; }
.feature { display: flex; align-items: flex-start; gap: 8px; color: var(--ink); }
.feature img { width: 16px; height: 22px; flex: none; display: block; object-fit: none; }
.feature--light { color: var(--border); }
.features--tight { gap: 12px; }
.features--tight .feature { align-items: center; }
.features--tight .feature img { height: 16px; }
.btn-lg {
  display: flex; align-items: center; justify-content: center; width: 100%;
  padding: 14px 24px; border: 0; border-radius: 12px; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem; line-height: normal; color: var(--white);
}
.btn-lg--soft { background: var(--indigo-button); }
.btn-lg--indigo { background: var(--indigo); }
.dark-card {
  display: flex; flex-direction: column; gap: 23px; padding: 20px;
  background: var(--ink); border: 1px solid #1e293b; border-radius: 16px;
}
.dark-card .eyebrow { color: #818cf8; letter-spacing: 0; font-size: 1rem; }
.dark-card__title { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: normal; color: var(--white); }
.dark-card__big { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: normal; color: var(--white); }
.dark-card p { color: var(--border); }

/* ---------- Payment ---------- */
.pay-body { display: flex; flex-direction: column; gap: 28px; padding: 24px 16px 32px; }
.summary {
  display: flex; flex-direction: column; gap: 16px; padding: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.summary__title { font-weight: 700; font-size: 1rem; line-height: normal; color: var(--ink); }
.plan-option {
  display: flex; flex-direction: column; gap: 4px; padding: 12px;
  background: var(--indigo-tint); border: 1px solid var(--indigo); border-radius: 8px;
}
.plan-option__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-option__name { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.8125rem; line-height: normal; color: var(--ink); }
.plan-option__name img { width: 16px; height: 16px; display: block; }
.plan-option__price { font-weight: 700; font-size: 0.9375rem; line-height: normal; color: var(--ink); }
.plan-option__list { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0 0 0 24px; list-style: none; color: #475569; line-height: normal; }
.calc { display: flex; flex-direction: column; gap: 8px; }
.calc__row { display: flex; align-items: flex-start; justify-content: space-between; font-size: 0.8125rem; line-height: normal; }
.calc__row span:first-child { color: #475569; }
.calc__row span:last-child { color: var(--ink); }
.calc__due { display: flex; align-items: baseline; justify-content: space-between; line-height: normal; }
.calc__due span:first-child { font-weight: 600; font-size: 0.875rem; color: var(--ink); }
.calc__due span:last-child { font-weight: 700; font-size: 1.125rem; color: var(--ink-green); }
.calc hr { height: 1px; border: 0; background: var(--border); margin: 0; width: 100%; }

.pay-fields { display: flex; flex-direction: column; gap: 16px; }
.pay-account { display: flex; flex-direction: column; gap: 12px; }
.pay-account__head { display: flex; flex-direction: column; gap: 4px; line-height: normal; }
.pay-account__title { font-weight: 700; font-size: 1.125rem; color: var(--ink); }
.pay-account__sub { color: #475569; }
.pay-account__fields { display: flex; flex-direction: column; gap: 16px; }
.field--pay .field__label { font-size: 1rem; }
.field--pay input { height: auto; padding: 12px; }
.field--pay input::placeholder { color: var(--ink-faint); }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; min-width: 0; }
.field.is-invalid input { border-color: #f97316; }
.field-warning { display: none; align-items: center; gap: 8px; color: var(--ink-orange); font-weight: 500; font-size: 0.75rem; line-height: 1rem; }
.field.is-invalid .field-warning { display: flex; }
.field-warning__icon {
  width: 16px; height: 16px; flex: none; border-radius: 8px; background: #fef3c7; border: 1px solid #f97316;
  display: flex; align-items: center; justify-content: center;
}
.field-warning__icon img { width: 10px; height: 10px; display: block; }
.btn-pay {
  display: flex; justify-content: center; width: 100%; padding: 14px 24px; border: 0; border-radius: 12px;
  background: var(--indigo-button); cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 0.875rem; line-height: normal; color: var(--white);
}

/* ---------- Verify email / Welcome ---------- */
.verify-body { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding: 32px 16px 40px; text-align: left; }
.envelope {
  width: 80px; height: 80px; border-radius: 40px; background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.envelope img { width: 32px; height: 32px; display: block; }
.envelope { align-self: center; }   /* the mail icon sits in the middle of the verify page */
.verify-thanks { font-weight: 600; letter-spacing: 0.16px; color: var(--indigo-ink); }
.actions-card {
  display: flex; flex-direction: column; gap: 20px; padding: 20px; width: 100%;
  background: var(--white); border: 1px solid var(--border); border-radius: 12px;
}
.btn-soft {
  display: flex; align-items: center; justify-content: center; width: 100%; padding: 14px 24px;
  border: 0; border-radius: 12px; background: var(--indigo-button); cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 0.875rem; line-height: normal; color: var(--white);
}
.link-underline { font-weight: 600; font-size: 0.875rem; line-height: normal; color: var(--indigo-ink); text-decoration: underline; }
.resend-note { font-size: 0.8125rem; line-height: 1.4; color: var(--muted); }
.resend-note[hidden] { display: none; }

.welcome-body { display: flex; flex-direction: column; gap: 20px; padding: 24px 20px 20px; }
.celebrate { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; text-align: left; }
.success-ring {
  width: 56px; height: 56px; border-radius: 28px; background: #ecfdf5; border: 2px solid #10b981;
  display: flex; align-items: center; justify-content: center;
}
.success-ring img { width: 24px; height: 24px; display: block; }
.micro-label { font-weight: 700; font-size: 0.5625rem; letter-spacing: 1.2px; line-height: normal; text-transform: uppercase; }
.h-welcome { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.875rem; color: var(--ink); }
.details-card {
  display: flex; flex-direction: column; gap: 12px; padding: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.details-list { display: flex; flex-direction: column; gap: 8px; }
.detail-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; line-height: normal; }
.detail-row__key { font-weight: 500; font-size: 0.75rem; color: #475569; }
.detail-row__val { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.8125rem; color: var(--ink); text-align: right; }
.verified-badge { background: #ecfdf5; color: var(--ink-green); border-radius: 4px; padding: 2px 6px; font-weight: 600; font-size: 0.625rem; }
.details-list hr { height: 1px; border: 0; background: var(--border); margin: 0; width: 100%; }
.notice { padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.bottom-actions { display: flex; flex-direction: column; gap: 16px; padding: 16px 20px; background: var(--white); border-top: 1px solid var(--border); }
.btn-flow {
  display: flex; align-items: center; justify-content: center; width: 100%; padding: 14px 24px;
  border-radius: 12px; border: 1px solid var(--indigo); cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 0.875rem; line-height: normal;
}
.btn-flow--primary { background: var(--indigo); color: var(--white); }
.btn-flow--outline { background: var(--white); color: var(--indigo-ink); padding-top: 12px; padding-bottom: 12px; }
.screen-spacer { flex: 1; }

/* ---------- Service agreement ---------- */
.agreement-body { display: flex; flex-direction: column; gap: 21px; padding: 30px var(--gutter) 12px; }
.agreement-kicker { font-weight: 700; font-size: 1.125rem; line-height: normal; color: var(--indigo-ink); }
.agreement-title { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; line-height: 1.625rem; color: var(--ink); }
.agreement-cards { display: flex; flex-direction: column; gap: 12px; }
.agreement-card {
  display: flex; flex-direction: column; gap: 12px; padding: 16px;
  background: var(--white); border: 1px solid var(--indigo); border-radius: 10px;
}
.agreement-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.agreement-card__title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1rem; line-height: normal; color: var(--ink); }
.num-badge {
  width: 22px; height: 22px; flex: none; border-radius: 11px; background: var(--indigo-tint); color: var(--indigo-ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.6875rem; line-height: normal;
}
.check-box {
  width: 16px; height: 18px; flex: none; border-radius: 4px; background: var(--indigo);
  display: flex; align-items: center; justify-content: center;
}
.check-box img { width: 10px; height: 10px; display: block; }
.agreement-footer { display: flex; flex-direction: column; gap: 25px; padding: 26px 20px 29px; background: var(--white); border-top: 1px solid var(--border); }

/* ---------- Back button ---------- */
/* A clear left chevron, and a tap area at least 44px tall (the standard minimum for touch). */
.pill-btn--back { position: relative; padding-left: 10px; }
.pill-btn--back img { width: 14px; height: 14px; transform: scaleX(-1); }
.pill-btn--back::after { content: ""; position: absolute; inset: -9px -6px; }

/* ---------- Highlighted plan features (service agreement) ---------- */
.plan-highlight {
  display: flex; flex-direction: column; gap: 12px; padding: 14px;
  background: var(--indigo-tint); border: 1px solid var(--indigo-tint-border); border-radius: 8px;
}
.plan-highlight__title { font-weight: 700; font-size: 0.8125rem; line-height: normal; letter-spacing: 0.4px; text-transform: uppercase; color: var(--indigo-ink); }
.plan-highlight__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.plan-highlight__list li { display: flex; align-items: flex-start; gap: 8px; font-weight: 600; color: var(--ink); }
.plan-highlight__list img { width: 16px; height: 22px; flex: none; display: block; object-fit: none; }

/* =====================================================================
   Added for the setup flow: Project Brief (step 5) and Confirmation (step 6)
   ===================================================================== */

.help-pill {
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px;
  font-weight: 600; font-size: 0.75rem; line-height: normal; color: var(--ink); text-transform: uppercase;
}
.steps--muted .steps__count { font-size: 0.75rem; color: var(--ink-faint); }
.header--steps { display: flex; flex-direction: column; }
.header--steps .steps { padding-top: 12px; }

/* ---------- Project Brief ---------- */
.brief { display: flex; flex-direction: column; gap: 28px; padding: 16px 16px 62px; }
.brief__intro { display: flex; flex-direction: column; gap: 12px; }
.brief__kicker { font-weight: 600; font-size: 0.6875rem; letter-spacing: 1px; text-transform: uppercase; color: var(--indigo-ink); line-height: normal; }
.h-brief { font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; line-height: 2rem; color: var(--ink); }

.reminder { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.reminder img { width: 44px; height: 44px; flex: none; border-radius: 22px; object-fit: cover; display: block; }
.reminder__name { font-weight: 700; font-size: 1rem; line-height: normal; color: var(--ink); }
.reminder__status { display: flex; align-items: center; gap: 4px; font-weight: 500; line-height: normal; color: var(--ink-green); }
.reminder__status img { width: 6px; height: 6px; display: block; }

.panel { display: flex; flex-direction: column; gap: 16px; padding: 20px; background: var(--white); border: 1px solid var(--border); border-radius: 16px; }
.panel__head { display: flex; flex-direction: column; gap: 4px; }
.panel__title-row { display: flex; align-items: center; gap: 8px; }
.panel__title-row img { width: 18px; height: 18px; flex: none; display: block; }
.panel__title { font-weight: 700; font-size: 1.125rem; line-height: normal; color: var(--ink); }
.panel__title--lg { font-size: 1.25rem; }
.panel__small { font-size: 0.875rem; line-height: 1.25rem; }

.url-box { display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--white); border: 1px solid var(--border); border-radius: 8px; }
.url-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-family: var(--font-body); font-size: 0.875rem; color: var(--ink); }
.url-box input::placeholder { color: var(--muted); opacity: 1; }
.url-box:focus-within { border-color: var(--indigo); }
.mini-btn { border: 0; border-radius: 6px; padding: 6px 12px; background: var(--indigo-tint); cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: 0.75rem; line-height: normal; color: var(--indigo-ink); white-space: nowrap; }
.link-list { display: flex; flex-direction: column; gap: 8px; }
.link-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.link-row img { width: 12px; height: 12px; flex: none; display: block; }
.link-row__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; line-height: normal; color: var(--ink); }
.link-row__status { font-size: 0.6875rem; line-height: normal; color: var(--ink-green); white-space: nowrap; }
.link-row__status--queued { color: var(--muted); }
.add-more { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; background: var(--indigo-tint); border: 1px solid var(--chip-border); border-radius: 10px; cursor: pointer; text-align: left; font-family: var(--font-body); font-weight: 700; font-size: 0.875rem; line-height: normal; color: var(--indigo-ink); }
.add-more img { width: 16px; height: 16px; flex: none; display: block; }

.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
  min-height: 185px; padding: 24px 16px; background: var(--surface); border: 1px dashed #cbd5e1; border-radius: 10px; cursor: pointer;
}
.dropzone:hover, .dropzone.is-over, .dropzone:focus-within { border-color: var(--indigo); background: var(--indigo-tint); }
.dropzone__title { font-weight: 600; font-size: 0.8125rem; line-height: normal; color: var(--ink); }
.dropzone__hint { font-size: 1rem; line-height: 1.375rem; color: var(--muted); }
.dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.file-row img { width: 12px; height: 12px; flex: none; display: block; }
.file-row__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: normal; color: var(--ink); }
.file-row__size { font-size: 0.6875rem; line-height: normal; color: var(--muted); white-space: nowrap; }

.brief-form { display: flex; flex-direction: column; gap: 20px; }
.q { font-weight: 600; font-size: 1rem; line-height: normal; color: var(--body); }
.q-group { display: flex; flex-direction: column; gap: 12px; border: 0; margin: 0; padding: 0; min-width: 0; }
.menu { background: var(--white); border: 1px solid var(--border); border-radius: 8px; overflow: clip; }
.menu__selected { display: flex; align-items: center; justify-content: space-between; padding: 12px; font-weight: 700; line-height: normal; color: var(--ink); }
.menu__selected img { width: 20px; height: 20px; display: block; }
.menu hr { height: 1px; border: 0; background: var(--border); margin: 0; }
.opt { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid transparent; border-radius: 6px; cursor: pointer; font-weight: 500; line-height: normal; color: #475569; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt__mark { width: 20px; height: 20px; flex: none; border-radius: 10px; background: var(--white); border: 1px solid #cbd5e1; display: flex; align-items: center; justify-content: center; }
.opt__mark img { width: 12px; height: 12px; display: none; }
.opt.is-selected { background: #eff6ff; border-color: #bfdbfe; font-weight: 700; color: var(--ink); }
.opt.is-selected .opt__mark { background: #2563eb; border-color: #2563eb; }
.opt.is-selected .opt__mark img { display: block; }
.opt:focus-within { outline: 2px solid var(--indigo); outline-offset: -2px; }

.textbox { width: 100%; padding: 12px; background: var(--white); border: 1px solid var(--border); border-radius: 8px; font-family: var(--font-body); font-size: 1rem; line-height: 1.375rem; color: var(--body); outline: 0; }
.textbox:focus { border-color: var(--indigo); }
textarea.textbox { min-height: 80px; resize: vertical; overflow: hidden; field-sizing: content; }
.textbox::placeholder { color: var(--body); opacity: 1; }
.avoid-list { display: flex; flex-direction: column; gap: 13px; }
.link-add { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 1rem; line-height: normal; color: var(--indigo-ink); }
.link-add img { width: 12px; height: 12px; display: block; }
.moderation { display: flex; flex-direction: column; gap: 8px; }
.moderation__title { font-weight: 600; color: var(--ink); line-height: normal; }
.moderation__note { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--body); }
.moderation__note strong { font-weight: 600; }

.brief-actions { display: flex; gap: 10px; padding-top: 16px; border-top: 1px solid var(--border); }
.btn-brief {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 14px 20px;
  border-radius: 12px; border: 2px solid var(--indigo); cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem; line-height: normal; white-space: nowrap;
}
.btn-brief--primary { background: var(--indigo); color: var(--white); }
.btn-brief--outline { background: var(--white); color: var(--indigo-ink); }
.brief-note { font-size: 0.8125rem; line-height: 1.4; color: var(--muted); }
.brief-note[hidden] { display: none; }

/* ---------- Project Confirmation ---------- */
.success-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 32px 24px 8px; margin-top: 21px; }
.success-hero__icon { width: 80px; height: 80px; border-radius: 40px; background: #f0fdf4; border: 1px solid #dcfce7; display: flex; align-items: center; justify-content: center; }
.success-hero__icon img { width: 32px; height: 32px; display: block; }
.h-confirm { font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; line-height: 2rem; color: var(--ink); text-align: left; }
.next-steps { display: flex; flex-direction: column; gap: 12px; padding: 8px 24px 24px; margin-top: 21px; }
.next-steps__label { font-weight: 700; font-size: 0.8125rem; letter-spacing: 1px; text-transform: uppercase; color: var(--indigo-ink); line-height: normal; }
.notify-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.notify-card__head { display: flex; align-items: center; gap: 12px; }
.notify-card__icon { width: 32px; height: 32px; flex: none; border-radius: 16px; background: #eff6ff; display: flex; align-items: center; justify-content: center; }
.notify-card__icon img { width: 16px; height: 16px; display: block; }
.notify-card hr { height: 1px; border: 0; background: var(--border); margin: 0; width: 100%; }
.notify-card__title { font-weight: 700; color: var(--ink); }
.notify-card__small { font-weight: 700; font-size: 0.875rem; line-height: normal; color: var(--ink); }

/* =====================================================================
   Business area: sign in, dashboard home, add/upload forms, confirmations
   ===================================================================== */

.screen--surface { background: var(--surface); }
.text-link { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Sign in ---------- */
.signin { display: flex; flex-direction: column; gap: 32px; padding: 32px 24px 36px; flex: 1; }
.h-signin { font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; line-height: normal; color: var(--ink); }
.signin-card {
  display: flex; flex-direction: column; gap: 20px; padding: 20px;
  background: var(--white); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 4px 6px rgba(15, 23, 42, 0.05);
}
.signin-field { display: flex; flex-direction: column; gap: 6px; }
.signin-field__label { font-weight: 700; font-size: 0.8125rem; line-height: normal; text-transform: uppercase; color: var(--ink); }
.input-wrap { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; background: var(--white); border: 1px solid var(--border); border-radius: 10px; }
.input-wrap:focus-within { border-color: var(--indigo); }
.input-wrap > img { width: 18px; height: 18px; flex: none; display: block; }
.input-wrap input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-family: var(--font-body); font-size: 0.875rem; color: var(--ink); }
.input-wrap input::placeholder { color: var(--ink-faint); opacity: 1; }
.input-wrap button { background: none; border: 0; padding: 0; cursor: pointer; display: flex; }
.input-wrap button img { width: 18px; height: 18px; display: block; }
.signin-links { display: flex; justify-content: flex-end; }
.link-small { font-weight: 600; font-size: 0.8125rem; line-height: normal; color: var(--indigo-ink); text-decoration: underline; text-underline-position: from-font; }
.btn-signin { display: flex; align-items: center; justify-content: center; padding: 14px; border: 0; border-radius: 10px; background: var(--indigo); cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: 0.9375rem; line-height: normal; color: var(--white); }
.or-divider { display: flex; align-items: center; gap: 12px; font-size: 0.75rem; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink-faint); line-height: normal; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.oauth-row { display: flex; gap: 12px; }
.btn-oauth { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; background: var(--white); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 0.875rem; line-height: normal; color: var(--ink); }
.btn-oauth img { width: 18px; height: 18px; display: block; }
.signup-prompt { display: flex; justify-content: flex-start; gap: 6px; padding-top: 8px; font-size: 0.875rem; line-height: normal; color: #475569; }
.signup-prompt a { font-weight: 700; color: var(--indigo-ink); text-decoration: underline; text-underline-position: from-font; }
.signin-note { font-size: 0.8125rem; line-height: 1.4; color: var(--muted); text-align: left; }

/* ---------- Dashboard header ---------- */
.dash-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: var(--white); border-bottom: 1px solid var(--border); }
.dash-brand { display: flex; align-items: center; gap: 8px; }
.live-tag { padding: 2px 6px; border-radius: 4px; background: #f0fdf4; font-weight: 700; font-size: 0.5rem; line-height: normal; color: var(--ink-green); }
.dash-actions { display: flex; align-items: center; gap: 12px; }
.dash-actions .link-signout { font-weight: 700; font-size: 0.875rem; line-height: normal; color: var(--indigo-ink); text-decoration: underline; text-underline-position: from-font; }
.avatar-32 { width: 32px; height: 32px; border-radius: 16px; object-fit: cover; display: block; }

.avatar-menu { position: relative; }
.avatar-menu__trigger { display: flex; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.avatar-menu__trigger { position: relative; }
.avatar-menu__trigger::after { content: ""; position: absolute; inset: -6px; }
.avatar-menu__panel {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; z-index: 20;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--white); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
.avatar-menu__item {
  display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px;
  background: none; font-family: var(--font-body); font-weight: 600; font-size: 0.9375rem;
  line-height: normal; color: var(--ink); text-decoration: none; text-align: left; cursor: pointer;
}
.avatar-menu__item:hover, .avatar-menu__item:focus-visible { background: var(--surface); }

/* ---------- Dashboard home ---------- */
.dash-body { display: flex; flex-direction: column; gap: 16px; padding: 16px 20px 32px; }
.preview { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px; }
.preview > * { width: 100%; max-width: 394px; }
.video { position: relative; height: 340px; display: flex; align-items: flex-end; justify-content: space-between; padding: 20px; background: #1f1d1b; border-radius: 12px; overflow: clip; }
.video > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }
.video__hud { position: relative; flex: 1; display: flex; align-items: center; justify-content: space-between; }
.cam-dot { width: 8px; height: 8px; border-radius: 4px; background: #10b981; }
.video-controls { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--border); border-radius: 12px; }
.round-32 { width: 32px; height: 32px; flex: none; border-radius: 16px; display: flex; align-items: center; justify-content: center; border: 0; padding: 0; cursor: pointer; }
.round-32 img { width: 18px; height: 18px; display: block; }
.round-32--dark { background: var(--ink); }
.round-32--light { background: var(--white); border: 1px solid var(--border); }
.video-controls__progress { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.track { height: 4px; border-radius: 999px; background: var(--border); overflow: clip; }
.track > span { display: block; height: 100%; width: var(--fill, 50%); border-radius: 999px; background: var(--ink); }
.video-controls__times { display: flex; justify-content: space-between; font-weight: 600; line-height: normal; }
.video-controls__times span:first-child { color: #475569; }
.video-controls__times span:last-child { color: var(--ink); }
.speech-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; background: var(--white); border: 1px solid var(--border); border-radius: 12px; }
.card-title { font-weight: 700; font-size: 1rem; line-height: normal; color: var(--ink); }
.card-title--lg { font-size: 1.125rem; }
.video > img[data-host-photo] { opacity: 1; }
/* Host picker: a horizontal scroll row of Human AI Hosts; the third card peeks in to show it scrolls. */
.host-picker { display: flex; gap: 12px; overflow-x: auto; padding: 3px 3px 16px; margin: -3px -3px -8px; scroll-snap-type: x mandatory; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.host-card { position: relative; flex: none; width: 148px; display: flex; flex-direction: column; gap: 4px; padding: 8px 8px 12px; background: var(--white); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; scroll-snap-align: start; line-height: normal; }
.host-card input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.host-card img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 8px; margin-bottom: 4px; display: block; }
.host-card__name { font-weight: 700; color: var(--ink); }
.host-card__role { font-size: 0.875rem; color: #475569; }
.host-card.is-selected { background: var(--indigo-tint); border: 2px solid var(--indigo); padding: 7px 7px 11px; }
.host-card:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.host-picker__hint { margin-top: -6px; }
.hero-card { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 394px; padding: 16px; background: var(--white); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 4px 6px rgba(15, 23, 42, 0.05); }
.hero-card__kicker { font-weight: 700; font-size: 1rem; letter-spacing: 1px; text-transform: uppercase; color: var(--indigo-ink); line-height: normal; }
.hero-card__title { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.75rem; color: var(--ink); }
.hero-card__links { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; line-height: normal; color: var(--indigo-ink); }
.hero-card__links a { text-decoration: underline; text-underline-position: from-font; }
.dash-panel { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 394px; padding: 16px; background: var(--white); border: 1px solid var(--border); border-radius: 12px; }
.dash-panel--lg { border-radius: 16px; gap: 14px; }
.btn-dash { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 16px; border: 0; border-radius: 10px; background: var(--indigo); cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: 1rem; line-height: normal; color: var(--white); text-align: center; }
.btn-dash--sm { padding: 8px 12px; width: auto; flex: none; }
.btn-dash--slate { background: #314157; }
/* First-visit checklist on the dashboard */
.start-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.start-item { display: flex; align-items: center; gap: 12px; }
.start-item__mark { flex: none; width: 24px; height: 24px; border: 2px solid var(--border); border-radius: 50%; background: var(--white); display: inline-flex; align-items: center; justify-content: center; font-size: 0.875rem; line-height: 1; color: var(--white); }
.start-item.is-done .start-item__mark { background: var(--indigo); border-color: var(--indigo); }
.start-item.is-done .start-item__mark::before { content: "\2713"; }
.start-item__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.start-item__text small { font-size: 0.8125rem; line-height: 1.3; color: var(--muted); }
.start-item.is-done .start-item__text strong { color: var(--muted); }
.start-item .btn-dash--sm { text-decoration: none; }
button.link-plain[data-start-hide] { background: none; border: 0; padding: 4px 8px; font: inherit; font-size: 0.8125rem; color: var(--muted); text-decoration: underline; cursor: pointer; }
.mini-list { display: flex; flex-direction: column; gap: 8px; }
.mini-card { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.mini-card__icon { width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--white); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
.mini-card__icon img { width: 18px; height: 18px; display: block; }
.mini-card__icon img[data-pause-icon] { width: 28px; height: 28px; }   /* the link on/off icon is a filled circle, so it is drawn larger than the line icons */
.mini-card__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mini-card__title { font-weight: 700; font-size: 0.875rem; line-height: normal; color: var(--ink); }
.train-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.train-card--wide { gap: 25px; }
.train-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.train-card__title { font-weight: 700; font-size: 1rem; line-height: normal; color: var(--ink); }
.count-tag { padding: 2px 6px; border-radius: 4px; background: #f0fdf4; font-weight: 700; font-size: 0.5rem; line-height: normal; color: var(--ink-green); }
.upload-types { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.upload-types li { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 0.875rem; line-height: normal; color: var(--ink); }
.upload-types img { width: 6px; height: 6px; display: block; }
.notes-box { min-height: 160px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font-family: var(--font-body); font-size: 0.8125rem; line-height: 1.4; color: var(--ink); resize: vertical; outline: 0; width: 100%; }
.notes-box::placeholder { color: var(--ink-faint); opacity: 1; }
.notes-box:focus { border-color: var(--indigo); }
.dash-note { font-size: 0.8125rem; line-height: 1.4; color: var(--muted); }
.dash-note[hidden] { display: none; }
.dash-note--error { color: #b91c1c; }

/* ---------- Add / upload forms ("sheet" screens) ---------- */
.sheet-header { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; background: var(--white); border-bottom: 1px solid var(--border); }
.sheet-header__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sheet-header__title { font-weight: 700; font-size: 1rem; line-height: normal; color: var(--ink); text-align: center; }
.icon-btn { position: relative; display: flex; align-items: center; justify-content: center; padding: 8px; border: 0; border-radius: 99px; background: var(--surface); cursor: pointer; }
.icon-btn img { width: 18px; height: 18px; display: block; }
.icon-btn::after { content: ""; position: absolute; inset: -6px; }
.sheet-header__desc { line-height: 1.35; color: #475569; }
.sheet-form { display: flex; flex-direction: column; gap: 20px; padding: 16px; flex: 1; }
.f-field { display: flex; flex-direction: column; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.f-label { display: flex; gap: 4px; font-weight: 700; font-size: 0.8125rem; line-height: normal; text-transform: uppercase; color: var(--ink); }
.f-label .req { color: var(--ink-red); }
.f-input, .f-textarea, .f-select {
  width: 100%; padding: 12px 14px; background: var(--white); border: 1px solid var(--border); border-radius: 10px;
  font-family: var(--font-body); font-size: 0.875rem; line-height: normal; color: var(--ink); outline: 0;
}
.f-textarea { line-height: 1.4; resize: vertical; overflow: hidden; field-sizing: content; }
.f-input:focus, .f-textarea:focus, .f-select:focus { border-color: var(--indigo); }
.f-select { appearance: none; -webkit-appearance: none; padding-right: 40px; background: var(--white) url("../assets/inquiry-chevron-down.svg") no-repeat right 14px center / 16px 16px; }
.f-input-icon { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--white); border: 1.5px solid var(--indigo); border-radius: 10px; }
.f-input-icon img { width: 16px; height: 16px; flex: none; display: block; }
.f-input-icon input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-family: var(--font-body); font-size: 0.875rem; line-height: normal; color: var(--ink); }
.f-hint { font-size: 0.75rem; line-height: normal; color: var(--muted); }
.f-hint--lg { font-size: 1rem; line-height: 1.35; }
.f-hint--body { font-size: 1rem; line-height: normal; color: var(--body); }
.segmented { display: flex; gap: 4px; padding: 4px; background: var(--white); border: 1px solid var(--border); border-radius: 10px; }
.segmented label { flex: 1; min-width: 0; position: relative; display: flex; justify-content: center; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-weight: 700; font-size: 0.8125rem; line-height: normal; color: #475569; }
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented label.is-on { background: var(--indigo); color: var(--white); }
.segmented label:focus-within { outline: 2px solid var(--indigo); outline-offset: 1px; }
.add-url { display: flex; flex-direction: column; gap: 8px; }
.btn-add-url { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 12px; background: var(--indigo-tint); border: 1px solid var(--chip-border); border-radius: 10px; cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: 0.875rem; line-height: normal; color: var(--indigo-ink); }
.btn-add-url img { width: 16px; height: 16px; display: block; }
.sheet-footer { display: flex; flex-direction: column; padding: 20px 16px 28px; background: var(--white); border-top: 1px solid var(--border); margin-top: auto; }
.btn-save { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px 16px; border: 0; border-radius: 12px; background: var(--indigo); cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: 1rem; line-height: normal; color: var(--white); }
.btn-save img { width: 18px; height: 18px; display: block; }
.tag-box { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--white); border: 1px solid var(--border); border-radius: 12px; }
.tag-box:focus-within { border-color: var(--indigo); }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.kw { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 6px; background: var(--indigo-tint); font-weight: 600; font-size: 0.75rem; line-height: normal; color: var(--indigo-ink); }
.kw button { display: flex; padding: 0; border: 0; background: none; cursor: pointer; }
.kw img { width: 12px; height: 12px; display: block; }
.tag-box input { border: 0; outline: 0; background: transparent; width: 100%; font-family: var(--font-body); font-size: 0.8125rem; line-height: normal; color: var(--ink); }
.tag-box input::placeholder { color: var(--muted); opacity: 1; }
.phrasings { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--white); border: 1px solid var(--border); border-radius: 10px; }
.phrasing { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; line-height: normal; color: #475569; }
.phrasing img { width: 14px; height: 14px; flex: none; display: block; }
.phrasings hr { height: 1px; border: 0; background: var(--border); margin: 0; width: 100%; }
.phrasings input { border: 0; outline: 0; background: transparent; width: 100%; padding: 0; font-family: var(--font-body); font-size: 0.8125rem; line-height: normal; color: var(--ink); }
.phrasings input::placeholder { color: var(--muted); opacity: 1; }
.dz { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px 20px; background: var(--white); border: 1px dashed var(--indigo); border-radius: 14px; cursor: pointer; text-align: center; }
.dz.is-over, .dz:focus-within { background: var(--indigo-tint); }
.dz input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.dz__icon { display: flex; padding: 12px; border-radius: 99px; background: var(--indigo-tint); }
.dz__icon img { width: 24px; height: 24px; display: block; }
.dz__title { font-weight: 700; font-size: 0.875rem; line-height: normal; color: var(--ink); }
.dz__sub { font-size: 0.75rem; line-height: normal; color: var(--muted); }
.dz__fine { font-size: 0.6875rem; line-height: normal; color: var(--muted); }
.queue { display: flex; flex-direction: column; gap: 8px; }
.queue__label { font-weight: 700; font-size: 0.75rem; line-height: normal; text-transform: uppercase; color: #475569; }
.q-item { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--white); border: 1px solid var(--border); border-radius: 10px; }
.q-item__row { display: flex; align-items: center; gap: 8px; }
.q-item__row img.file { width: 16px; height: 16px; flex: none; display: block; }
.q-item__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 0.8125rem; line-height: normal; color: var(--ink); }
.q-item__pct { font-size: 0.75rem; line-height: normal; color: var(--indigo-ink); white-space: nowrap; }
.q-item__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.q-item__meta { font-size: 0.6875rem; line-height: normal; color: var(--muted); }
.q-item--done .q-item__row { gap: 12px; }
.q-item .track { }
.q-item .track > span { background: var(--indigo); }
.done-badge { display: flex; padding: 2px; border-radius: 99px; background: #f0fdf4; }
.done-badge img { width: 12px; height: 12px; display: block; }

/* ---------- Confirmation screens ---------- */
.done-header { position: relative; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 20px; }
.done-body { display: flex; flex-direction: column; gap: 56px; flex: 1; padding: 24px 20px 40px; }
.done-visual { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.done-ring { width: 140px; height: 140px; border-radius: 70px; background: var(--indigo-tint); border: 4px solid #e0e7ff; display: flex; align-items: center; justify-content: center; }
.done-ring__inner { width: 100px; height: 100px; border-radius: 50px; background: var(--white); filter: drop-shadow(0 8px 8px rgba(99, 102, 241, 0.08)); display: flex; align-items: center; justify-content: center; }
.done-ring__inner img { width: 44px; height: 44px; display: block; }
.done-ring--lg { width: 148px; height: 148px; border-radius: 74px; }
.done-ring--lg .done-ring__inner { width: 108px; height: 108px; border-radius: 54px; }
.done-ring--lg .done-ring__inner img { width: 48px; height: 48px; }
.success-badge { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 30px; background: #f0fdf4; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.5px; text-transform: uppercase; line-height: normal; color: var(--ink-green); white-space: nowrap; }
.success-badge img { width: 6px; height: 6px; display: block; }
.done-card { display: flex; flex-direction: column; gap: 16px; padding: 24px; background: var(--white); border: 1px solid var(--border); border-radius: 16px; filter: drop-shadow(0 4px 6px rgba(15, 23, 42, 0.02)); }
.done-card__text { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.done-card__title { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.75rem; color: var(--ink); }
.done-card__copy { line-height: 1.25rem; color: #475569; }
.processing { display: flex; align-items: center; gap: 10px; padding: 12px; background: #fffbeb; border: 1px solid #fef3c7; border-radius: 10px; }
.processing img { width: 20px; height: 20px; flex: none; display: block; }
.processing p { font-weight: 600; font-size: 0.8125rem; line-height: 1.125rem; color: #b45309; }
.processing--ready { background: #f0fdf4; border-color: #dcfce7; }                         /* a green tick for "ready right away" (the amber clock is for "ready in a few minutes") */
.processing--ready p { color: #15803d; }
.btn-done { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px 24px; border-radius: 10px; background: var(--indigo); font-weight: 700; font-size: 1rem; line-height: normal; color: var(--white); }
.btn-done img { width: 18px; height: 18px; display: block; }

.f-field legend, .q-group legend { padding: 0; }

/* ---------- One logo mark everywhere: the dot + wordmark ---------- */
.brand--lg { gap: 10px; }
.brand--lg img { height: 30px; }
.brand--lg span { font-size: 1.5rem; }

/* Dashboard: "Email Your Guests" (ready-made emails) and the small text-style button used inside a sentence */
.link-inline { font-weight: 600; color: var(--indigo-ink); text-decoration: underline; cursor: pointer; }
.email-dialog { width: min(94vw, 520px); max-height: 92vh; overflow: auto; }
.email-dialog__body { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 22px; }
.email-dialog .f-textarea { field-sizing: fixed; height: 220px; overflow-y: auto; resize: vertical; }      /* a fixed-height box that scrolls, so the buttons below stay close */
.email-dialog__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 6px; }
.email-dialog__actions .btn-dash { width: 100%; }
.mini-card--social { flex-wrap: wrap; }
.share-links { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.share-link { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--chip-border); border-radius: 999px; background: var(--white); font-weight: 700; font-size: 0.875rem; line-height: normal; color: var(--indigo-ink); }
.share-link:hover { background: var(--indigo-tint); }
.mini-card__text p { text-wrap: pretty; }       /* no single word alone on the last line */
.mini-card__text .link-plain, .mini-card__text .link-inline { font-size: inherit; line-height: inherit; }       /* links inside a card sentence match the words around them */
.email-preview { max-height: 320px; overflow: auto; border: 1px solid var(--border); border-radius: 12px; background: #f3f4f8; }
.email-preview table { margin: 0 auto; }
.email-dialog__tip { text-wrap: pretty; }       /* no single word alone on the last line */
.email-plain { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.email-plain summary { cursor: pointer; font-weight: 600; color: var(--indigo-ink); }
.email-plain[open] summary { margin-bottom: 10px; }
.email-plain .email-dialog__actions { padding-top: 10px; }
@media (max-width: 420px) { .email-dialog__actions { grid-template-columns: 1fr; } }

/* ---------- QR code dialog ---------- */
.qr-dialog { width: min(92vw, 360px); padding: 0; border: 0; border-radius: 16px; box-shadow: 0 24px 48px rgba(15, 23, 42, 0.25); color: var(--body); font-family: var(--font-body); }
.qr-dialog::backdrop { background: rgba(15, 23, 42, 0.5); }
.qr-dialog__body { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 0; padding: 24px; text-align: center; }
.qr-dialog__img { width: 240px; height: 240px; padding: 8px; background: var(--white); border: 1px solid var(--border); border-radius: 12px; image-rendering: pixelated; }
.qr-dialog__link { font-size: 0.8125rem; line-height: 1.4; color: var(--muted); word-break: break-all; }
.qr-dialog__actions { display: flex; gap: 12px; width: 100%; }
.qr-dialog__actions .btn-dash { flex: 1; }

/* =====================================================================
   Business area part 2: analytics, billing, account states
   ===================================================================== */

/* ---------- App bar (back button + title + status badge) ---------- */
.appbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--white); }
.appbar--line { border-bottom: 1px solid var(--border); }
.appbar__left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.appbar__back { position: relative; flex: none; width: 32px; height: 32px; border-radius: 16px; background: var(--white); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
.appbar__back img { width: 16px; height: 16px; display: block; }
.appbar__back::after { content: ""; position: absolute; inset: -6px; }
.appbar__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: normal; }
.appbar__title { font-weight: 700; font-size: 1rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar__sub { font-size: 0.75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-pill { flex: none; padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: 0.6875rem; line-height: normal; text-transform: uppercase; white-space: nowrap; }
.status-pill--green { background: #ecfdf5; color: var(--ink-green); }
.status-pill--amber { background: #fef3c7; color: #b45309; }
.status-pill--red { background: #fef2f2; color: var(--ink-red); }
.status-pill--grey { background: #f1f5f9; color: var(--ink-pill-grey); }
.status-pill--sm { padding: 4px 10px; font-size: 0.625rem; text-transform: none; }

.app-body { display: flex; flex-direction: column; gap: 16px; padding: 16px 16px 32px; flex: 1; }
.app-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--white); border: 1px solid var(--border); border-radius: 12px; }
.app-card--lg { border-radius: 16px; }
.app-card--shadow { box-shadow: 0 4px 6px rgba(15, 23, 42, 0.05); }
.eyebrow-sm { font-weight: 700; font-size: 0.75rem; line-height: normal; text-transform: uppercase; color: var(--muted); }

/* ---------- Analytics ---------- */
.metric-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.metric-top__label { font-weight: 500; font-size: 0.875rem; line-height: normal; color: var(--muted); text-transform: uppercase; }
.trend { flex: none; padding: 2px 6px; border-radius: 4px; background: #ecfdf5; font-weight: 700; font-size: 0.6875rem; line-height: normal; color: var(--ink-green); }
.metric-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.metric { flex: 1 1 0; min-width: min-content; display: flex; flex-direction: column; gap: 6px; padding: 12px 10px; border-radius: 16px; }
.metric__label { font-weight: 700; font-size: 1rem; line-height: normal; text-transform: uppercase; }
.metric__value { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: normal; color: var(--ink); }
/* Three equal cards: same width and height, labels on top (two lines at most), numbers lined up along the bottom.
   Sentence case, because "CONVERSATIONS" in capitals does not fit a third of the column. */
.metric-cards--even { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.metric-cards--even .metric { min-width: 0; justify-content: space-between; gap: 12px; padding: 14px 8px; }
.metric-cards--even .metric__label { font-size: 0.75rem; line-height: 1.25; min-height: 2.5em; text-transform: none; }
.metric-cards--even .metric__value { font-size: 1.75rem; line-height: 1; white-space: nowrap; }
.metric-cards--compact .metric__label { font-size: 0.8125rem; }
.metric-cards--compact .metric__value { font-size: 1.375rem; white-space: nowrap; }
.metric--indigo { background: var(--indigo-tint); } .metric--indigo .metric__label { color: var(--indigo-ink); }
.metric--amber { background: #fef3c7; } .metric--amber .metric__label { color: var(--ink-amber); }
.metric--green { background: #ecfdf5; } .metric--green .metric__label { color: var(--ink-green); }
.card-heading { font-weight: 700; font-size: 0.875rem; line-height: normal; color: var(--ink); }
.card-heading--md { font-size: 0.9375rem; }
.bars { display: flex; align-items: flex-end; justify-content: space-between; height: 100px; }
.bar { width: 24px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bar__fill { width: 12px; height: var(--h); border-radius: 3px 3px 0 0; background: var(--indigo); }
.bar__label { font-size: 0.625rem; line-height: normal; color: var(--ink-faint); }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-filter { padding: 6px 10px; border-radius: 999px; background: var(--white); border: 1px solid var(--border); cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; line-height: normal; color: #475569; }
.chip-filter[aria-pressed="true"] { background: var(--indigo); border-color: var(--indigo); color: var(--white); font-weight: 700; }
.moments { display: flex; flex-direction: column; gap: 8px; }
.moment { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.moment__icon { width: 32px; height: 32px; flex: none; border-radius: 16px; background: var(--indigo-tint); display: flex; align-items: center; justify-content: center; }
.moment__icon img { width: 16px; height: 16px; display: block; }
.moment__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: normal; }
.moment__title { font-weight: 600; font-size: 0.8125rem; color: var(--ink); }
.moment__issue { color: #475569; }
.moment__resolution { font-weight: 500; color: var(--muted); }
.session-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.live-badge { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; background: #dcfce7; font-weight: 700; font-size: 0.75rem; line-height: normal; color: #15803d; white-space: nowrap; }
.live-badge img { width: 6px; height: 6px; display: block; }
.agent-row { display: flex; align-items: center; gap: 12px; }
.agent-avatar { width: 40px; height: 40px; flex: none; border-radius: 20px; background: var(--indigo-tint); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; color: var(--indigo-ink); }
.agent-row__copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: normal; }
.agent-row__label { font-weight: 500; font-size: 0.875rem; color: var(--ink-faint); }
.agent-row__name { font-weight: 600; font-size: 0.9375rem; color: var(--ink); }
.agent-row__time { font-size: 0.875rem; line-height: normal; color: #475569; }
.hr-line { height: 1px; border: 0; background: var(--border); margin: 0; width: 100%; }
.stage { position: relative; height: 220px; border-radius: 16px; overflow: clip; background: var(--ink); }
.stage > img.stage__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage__chip { position: absolute; top: 12px; left: 12px; display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); font-weight: 700; font-size: 0.75rem; line-height: normal; color: var(--white); }
.stage__chip img, .pip__chip img, .pip__bottom img { width: 6px; height: 6px; display: block; }
.pip { position: absolute; right: 0; top: 116px; width: 160px; max-width: 62%; height: 92px; border: 2px solid var(--white); border-radius: 16px; overflow: clip; background: var(--ink); box-shadow: 0 6px 14px rgba(15, 23, 42, 0.28); }
.pip > img.pip__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pip__top { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.pip__chip { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); font-weight: 700; font-size: 0.6875rem; line-height: normal; color: var(--white); white-space: nowrap; }
.pip__audio { padding: 4px 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); font-weight: 600; font-size: 0.625rem; line-height: normal; color: var(--white); }
.pip__bottom { position: absolute; bottom: 8px; left: 8px; display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.6875rem; line-height: normal; color: var(--white); }
.progress-blue { height: 4px; border-radius: 999px; background: var(--border); overflow: clip; }
.progress-blue > span { display: block; height: 100%; width: 47%; border-radius: 999px; background: #2563eb; }
.summary-copy { display: flex; flex-direction: column; gap: 2px; line-height: normal; }
.summary-copy strong { font-weight: 600; font-size: 0.9375rem; color: var(--ink); }
.controls-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.playback { display: flex; align-items: center; gap: 12px; }
.ctl { width: 40px; height: 40px; flex: none; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.ctl img { width: 18px; height: 18px; display: block; }
.ctl--primary { background: #2563eb; border-color: #2563eb; }
.btn-download { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; border-radius: 8px; background: var(--surface); cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 0.8125rem; line-height: normal; color: #475569; }
.btn-download img { width: 16px; height: 16px; display: block; }
.transcript { display: flex; flex-direction: column; gap: 10px; }
.transcript__who { font-weight: 700; font-size: 0.75rem; line-height: normal; color: var(--indigo-ink); }
.transcript__turn { display: flex; flex-direction: column; gap: 4px; }
.transcript__turn--customer { padding-left: 12px; border-left: 3px solid #f59e0b; }
.transcript__turn--customer .transcript__who { color: var(--ink-amber); text-transform: uppercase; }
.transcript__text { line-height: 1.375rem; color: var(--body); }

/* ---------- Billing ---------- */
.plan-summary { display: flex; align-items: baseline; gap: 6px; line-height: normal; }
.plan-summary__price { font-weight: 700; font-size: 1.25rem; color: var(--indigo-ink); }
.plan-summary__note { font-size: 0.8125rem; color: var(--muted); }
.h-plan-name { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; line-height: normal; color: var(--ink); }
.link-plain { align-self: flex-start; font-weight: 600; font-size: 0.8125rem; line-height: normal; color: var(--indigo-ink); }
.pay-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pay-row__left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pay-row__icon { width: 36px; height: 36px; flex: none; border-radius: 8px; background: var(--indigo-tint); display: flex; align-items: center; justify-content: center; }
.pay-row__icon img { width: 18px; height: 18px; display: block; }
.pay-row__meta { display: flex; flex-direction: column; gap: 2px; line-height: normal; }
.pay-row__name { font-weight: 600; font-size: 0.875rem; color: var(--ink); }
.pay-row__exp { font-size: 0.75rem; color: var(--muted); }
.btn-outline-sm { padding: 8px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 0.7812rem; line-height: normal; color: var(--ink); }
.history { display: flex; flex-direction: column; gap: 10px; }
.hist-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; }
.hist-row__date { font-weight: 500; font-size: 0.8125rem; line-height: normal; color: var(--ink); }
.hist-row__right { display: flex; align-items: center; gap: 10px; }
.hist-row__amount { font-weight: 600; font-size: 0.8125rem; line-height: normal; color: var(--ink); }
.cancel-row { display: flex; justify-content: flex-start; padding: 12px 16px; }
.btn-text { background: none; border: 0; padding: 4px 8px; cursor: pointer; font-family: var(--font-body); font-weight: 500; font-size: 0.8125rem; line-height: normal; color: var(--muted); }
.btn-text:hover { text-decoration: underline; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.stat-card { display: flex; flex-direction: column; gap: 4px; padding: 14px; background: var(--white); border: 1px solid var(--border); border-radius: 14px; text-align: left; font-family: inherit; color: inherit; }
button.stat-card { cursor: pointer; }
.stat-card--wide { grid-column: 1 / -1; }
.stat-card--alert { border-color: #fecaca; background: #fef2f2; }
.stat-card__label { font-weight: 700; font-size: 0.75rem; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.stat-card__value { font-weight: 800; font-size: 1.5rem; line-height: 1.15; color: var(--ink); }
.stat-card__note { font-size: 0.8125rem; line-height: 1.35; color: var(--muted); }
.stat-card__bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: #e2e8f0; margin-top: 4px; }
.stat-card__bar span { display: block; height: 100%; }
.convo-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.convo-tag { padding: 2px 8px; border-radius: 10px; font-size: 0.75rem; font-weight: 700; background: #e2e8f0; color: #334155; }
.convo-tag--positive { background: #dcfce7; color: #166534; }
.convo-tag--negative, .convo-tag--urgent { background: #fee2e2; color: #991b1b; }
.convo-tag--mixed { background: #fef3c7; color: #92400e; }
.account-links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding: 4px 8px; }
.account-links .btn-text { padding: 10px 6px; font-size: 0.875rem; }
.account-links [hidden] { display: none; }

/* ---------- Grace period banner / paused ---------- */
.banner-warn { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: #fffbeb; border: 1px solid #fef3c7; border-radius: 12px; }
.banner-warn__top { display: flex; align-items: center; gap: 10px; }
.banner-warn__icon { width: 32px; height: 32px; flex: none; border-radius: 16px; background: #fef3c7; display: flex; align-items: center; justify-content: center; }
.banner-warn__icon img { width: 18px; height: 18px; display: block; }
.banner-warn__title { font-weight: 700; font-size: 0.9375rem; line-height: normal; color: var(--ink); }
.banner-warn__text { font-size: 0.8125rem; line-height: 1.45; color: #b45309; }
.btn-primary-block { display: flex; align-items: center; justify-content: center; width: 100%; padding: 14px 24px; border: 0; border-radius: 10px; background: var(--indigo); cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: 1rem; line-height: normal; color: var(--white); text-align: center; }
.kits-continue { width: calc(100% - 48px); align-self: center; margin: 12px 0 40px; }   /* Continue to your dashboard: narrower than the kit cards, and room before the footer */
.preview-dim { background: var(--surface); }
.preview-dim__num { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: normal; color: #64748b; }
.paused { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px 16px 32px; flex: 1; }
.paused__icon { width: 88px; height: 88px; border-radius: 44px; background: #fef2f2; display: flex; align-items: center; justify-content: center; }
.paused__icon img { width: 36px; height: 36px; display: block; }
.paused__text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; line-height: normal; }
.h-paused { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; line-height: normal; color: var(--ink); }
.paused__text p { font-size: 0.875rem; line-height: 1.45; color: #475569; }
.locked-list { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.locked-row { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; line-height: normal; color: #475569; }
.locked-row img { width: 14px; height: 14px; flex: none; display: block; }

/* ---------- Account deletion / reactivated ---------- */
.done-body--tight { gap: 40px; padding: 24px 20px 40px; }
.done-visual--tight { gap: 20px; }
.done-ring--120 { width: 120px; height: 120px; border-radius: 60px; }
.done-ring--120 .done-ring__inner { width: 84px; height: 84px; border-radius: 42px; }
.done-ring--120 .done-ring__inner img { width: 36px; height: 36px; }
.done-ring--red { background: #fef2f2; border-color: #fee2e2; }
.done-ring--green { background: #dcfce7; border-color: #f0fdf4; }
.success-badge--red { background: #fef2f2; color: #b91c1c; letter-spacing: 0; }
.success-badge--green { background: #dcfce7; color: #15803d; letter-spacing: 0; }
.done-card__copy--15 { font-size: 0.9375rem; }
.processing--red { background: #fef2f2; border-color: #fee2e2; }
.processing--red p { color: #b91c1c; font-size: 0.7812rem; }
.processing--green { background: #f0fdf4; border-color: #dcfce7; }
.processing--green p { color: #15803d; font-size: 0.7812rem; }
.processing--red img, .processing--green img { width: 18px; height: 18px; }
.btn-done--block { width: 100%; }

/* =====================================================================
   Customer side: consent, invitation, live session, session ended, unavailable
   ===================================================================== */

/* ---------- Shared customer header ---------- */
.cust-header { background: var(--white); border-bottom: 1px solid var(--border); }
.cust-header__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px 12px; }
.cust-pill { padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; font-weight: 700; font-size: 0.875rem; line-height: normal; color: var(--indigo-ink); white-space: nowrap; }
.cust-header__titles { display: flex; flex-direction: column; gap: 4px; padding: 0 24px 16px; font-weight: 700; line-height: normal; }
.cust-header__kicker { font-size: 1rem; letter-spacing: 1px; text-transform: uppercase; color: var(--indigo-ink); }
.cust-header__title { font-size: 1.125rem; color: var(--ink); }       /* lines fill normally; the last two words of each title are tied together in the page (a non-breaking space) so no word is left alone */

/* ---------- Consent ---------- */
.cust-body { display: flex; flex-direction: column; gap: 16px; padding: 20px 24px 24px; }
.disclosure { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--indigo-tint); border: 1px solid var(--chip-border); border-radius: 12px; }
.disclosure__head { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--indigo-ink); line-height: normal; }
.disclosure__head img { width: 20px; height: 20px; flex: none; display: block; }
.cust-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--white); border: 1px solid var(--border); border-radius: 12px; }
.cust-card__title { font-weight: 700; font-size: 1rem; line-height: normal; color: var(--ink); }
.info-row { display: flex; align-items: flex-start; gap: 12px; }
.info-row__icon { width: 36px; height: 36px; flex: none; border-radius: 18px; background: var(--indigo-tint); display: flex; align-items: center; justify-content: center; }
.info-row__icon img { width: 18px; height: 18px; display: block; }
.info-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.info-row__title { font-weight: 700; line-height: normal; color: var(--ink); }
.info-row__desc { line-height: 1.25rem; color: #475569; }
.opt-row { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.opt-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.opt-row__desc { line-height: 1.125rem; color: #475569; }

/* On/off switch */
.switch { position: relative; flex: none; width: 48px; height: 28px; display: inline-block; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch__track { position: absolute; inset: 0; border-radius: 14px; background: #cbd5e1; transition: background 0.15s; pointer-events: none; }
.switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 12px; background: var(--white); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25); transition: transform 0.15s; }
.switch input:checked + .switch__track { background: var(--indigo); }
.switch input:checked + .switch__track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--ink); outline-offset: 2px; }

.emergency { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: #fef2f2; border: 1px solid #fca5a5; border-radius: 12px; }
.emergency__head { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink-red); line-height: normal; }
.emergency__head img { width: 16px; height: 16px; flex: none; display: block; }
.emergency p { line-height: 1.4; color: #991b1b; }
.cust-actions { display: flex; flex-direction: column; gap: 16px; padding-top: 12px; }
.btn-gradient-lg { display: flex; align-items: center; justify-content: center; width: 100%; padding: 14px; border: 0; border-radius: 12px; background: linear-gradient(to right, var(--indigo), var(--violet)); box-shadow: 0 4px 4px rgba(99, 102, 241, 0.15); cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 1rem; line-height: normal; color: var(--white); text-align: center; }
.btn-gradient-lg:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.link-muted { align-self: center; padding: 8px 12px; background: none; border: 0; cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 1rem; line-height: normal; color: var(--muted); text-decoration: underline; text-underline-position: from-font; }
.declined { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--white); border: 1px solid var(--border); border-radius: 12px; }
.declined p { line-height: 1.375rem; }
.declined__links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
/* The footer every page shares: the line, the links and the legal name. (The bottom padding keeps it clear of the accessibility button.) */
.footer--legal { gap: 20px; padding: 28px 24px 80px; }
@media (max-width: 420px) { .footer__bottom .footer__links { gap: 8px 12px; } .footer__bottom .footer__links a { font-size: 0.8125rem; } }      /* all six links on one line on a phone */
.footer--customer { padding: 24px 24px 80px 28px; gap: 20px; margin-top: auto; }
.footer--customer .footer__links a { white-space: nowrap; }

/* ---------- Support invitation ---------- */
.invite-wrap { padding: 16px 24px 7px; }
.invite-card { overflow: clip; background: var(--white); border: 1px solid var(--border); border-radius: 24px; box-shadow: 0 8px 24px rgba(25, 23, 20, 0.03); }
.invite-card__preview { position: relative; height: 286px; background: #1f1d1b; overflow: clip; }
.invite-card__preview > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }
.invite-card__tag { position: absolute; top: 16px; left: 16px; display: flex; align-items: center; gap: 8px; }
.invite-card__tag span:first-child { padding: 4px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); font-weight: 600; font-size: 0.875rem; line-height: normal; color: var(--white); }
.invite-card__tag .dot { width: 8px; height: 8px; border-radius: 4px; background: #10b981; }
.invite-card__content { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.invite-card__kicker { font-weight: 700; font-size: 1rem; line-height: normal; color: var(--indigo-ink); text-transform: uppercase; }
.invite-card__title { font-weight: 700; font-size: 1.125rem; line-height: normal; color: var(--ink); }
/* Consent page: the details sit in their own scrolling box, so the two tick boxes and the button are not pushed far down the page.
   The soft shadows at the top and bottom of the box show there is more to read, and go away at the ends. Keyboard users can scroll it too (it takes focus). */
.consent-from { margin: 0; font-weight: 700; font-size: 1.0625rem; line-height: 1.35; color: var(--ink); }
.consent-scroll__hint { margin: 0; font-size: 0.875rem; line-height: 1.4; color: var(--muted); }
.consent-scroll {
  display: flex; flex-direction: column; gap: 12px; padding: 10px;
  max-height: min(46vh, 340px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--chip-border); border-radius: 14px; background-color: var(--white);
  background-image:
    linear-gradient(var(--white) 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), var(--white) 70%),
    radial-gradient(farthest-side at 50% 0, rgba(15, 23, 42, 0.22), rgba(15, 23, 42, 0)), radial-gradient(farthest-side at 50% 100%, rgba(15, 23, 42, 0.22), rgba(15, 23, 42, 0));
  background-position: 0 0, 0 100%, 0 0, 0 100%;
  background-size: 100% 28px, 100% 28px, 100% 12px, 100% 12px;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.consent-note { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: 0.9375rem; line-height: 1.4; font-weight: 600; color: var(--ink); }       /* under the two tick boxes: the icon lines up with their boxes, the words with their text */
.consent-note img { flex: none; width: 22px; height: 22px; margin-top: 0; }
.consent-scroll:focus-visible { outline: 3px solid var(--indigo); outline-offset: 2px; }
.consent-scroll > .cust-card { flex: none; }
.consent-form { display: flex; flex-direction: column; gap: 24px; padding: 24px 24px 32px; }
.ack-list { display: flex; flex-direction: column; gap: 12px; }
.ack { position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.ack input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.ack__box { width: 22px; height: 22px; flex: none; margin-top: 0; border-radius: 4px; background: var(--white); border: 1.5px solid #cbd5e1; display: flex; align-items: center; justify-content: center; }
.ack__box img { width: 14px; height: 14px; display: none; }
.ack input:checked + .ack__box { background: var(--indigo); border-color: var(--indigo); }
.ack input:checked + .ack__box img { display: block; }
.ack input:focus-visible + .ack__box { outline: 2px solid var(--ink); outline-offset: 2px; }
.ack__text { flex: 1; min-width: 0; line-height: 1.4; color: var(--ink); }
.sign-fields { display: flex; flex-direction: column; gap: 16px; }
.sign-field { display: flex; flex-direction: column; gap: 6px; }
.sign-field label { font-weight: 700; font-size: 1rem; line-height: normal; color: var(--ink); }
.sign-input { width: 100%; padding: 12px 16px; background: var(--white); border: 1px solid var(--border); border-radius: 8px; font-family: var(--font-body); font-size: 1rem; line-height: normal; color: var(--ink); outline: 0; }
.sign-input:focus { border-color: var(--indigo); }
.sign-input::placeholder { color: var(--ink-faint); opacity: 1; }
.sign-input[readonly] { background: var(--surface); color: var(--muted); }
.form-help { font-size: 0.8125rem; line-height: 1.4; color: var(--muted); }

/* Sign-up: the "I agree to the Terms and Privacy Policy" box. */
.terms-check { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9375rem; line-height: 1.45; color: var(--ink); cursor: pointer; }
.terms-check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--indigo); cursor: pointer; }
.terms-check a { color: var(--indigo-ink); text-decoration: underline; }

/* ---------- Live session (dark) ---------- */
.screen--dark { background: #0b0e17; color: var(--white); }
.call-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 12px; }
.call-header__titles { display: flex; flex-direction: column; gap: 4px; line-height: normal; }
.call-header__name { font-weight: 700; font-size: 1.125rem; color: var(--white); }
.call-header__sub { font-size: 0.8125rem; color: #a6adbf; }
.timer { padding: 4px 10px; border-radius: 12px; background: #db2633; font-weight: 600; font-size: 0.6875rem; line-height: 1rem; color: var(--white); font-variant-numeric: tabular-nums; }
.call-stage { position: relative; flex: 1; min-height: 320px; max-height: 480px; margin: 8px 16px 0; border-radius: 16px; overflow: clip; background: #1f1d1b; }
.call-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.call-stage--live { max-height: none; min-height: 60vh; }
/* Always on the video for the whole conversation: the person is talking to AI. */
.call-stage .call-badge { position: absolute; top: 12px; left: 12px; z-index: 4; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.call-badge span:first-child { padding: 4px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.62); font-weight: 700; font-size: 0.8125rem; letter-spacing: .04em; line-height: normal; color: var(--white); }
/* The call fits the screen it is on, so the buttons are never below the fold (other pages keep the tall design frame). */
.screen--dark[data-live] { min-height: 100vh; min-height: 100dvh; }
.call-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; z-index: 1; background: #1f1d1b; }
/* The live conversation is a tall 9:16 picture, sized by its height so the ratio is exact (the width follows). */
.call-stage--live { flex: none; min-height: 0; max-height: none; height: min(62vh, calc(100dvh - 300px)); aspect-ratio: 9 / 16; width: auto; max-width: calc(100% - 32px); align-self: center; }
.call-stage--custom .pip-self { z-index: 3; width: 104px; height: 140px; background: #262933; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.pip-self video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.pip-self span { z-index: 1; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
.call-stage--custom .conn-dot { z-index: 3; }
.call-tap { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 4; padding: 10px 18px; border: 0; border-radius: 22px; background: var(--white); color: var(--ink); font-family: var(--font-body); font-weight: 700; font-size: 0.9375rem; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.caption--live { margin-top: 12px; }
.call-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1; }
.call-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 16px; color: var(--white); text-align: center; z-index: 2; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55); }
.conn-dot { position: absolute; top: 16px; right: 16px; width: 8px; height: 8px; border-radius: 4px; background: #33d966; }
.pip-self { position: absolute; right: 16px; bottom: 16px; width: 90px; height: 120px; border: 2px solid var(--white); border-radius: 10px; background: #262933; overflow: clip; }
.pip-self span { position: absolute; left: 6px; bottom: 4px; font-weight: 500; font-size: 0.625rem; line-height: normal; color: var(--white); }
.caption { margin: 12px 16px 0; padding: 10px 14px; border-radius: 10px; background: rgba(28, 33, 46, 0.85); line-height: normal; }
.caption__who { font-weight: 600; font-size: 0.6875rem; color: #8c94fa; }
.caption__text { margin-top: 4px; font-size: 0.8125rem; line-height: 1.4; color: var(--white); }
.call-controls { display: flex; justify-content: space-around; gap: 8px; padding: 24px 20px 32px; }
.ctl-item { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 64px; }
.ctl-item__label { font-size: 0.6875rem; line-height: normal; color: #bfc4d1; }
.call-btn { position: relative; width: 56px; height: 56px; border: 0; padding: 0; border-radius: 28px; background: #262b38; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 600; font-size: 1.125rem; line-height: normal; color: var(--white); }
.call-btn img { width: 24px; height: 24px; display: block; }
.call-btn--end { background: #db2633; }
.call-btn--art { background: none; }
.call-btn--art img { width: 56px; height: 56px; }
.call-btn[aria-pressed="true"].is-muted { background: #475569; }
.call-btn--cc[aria-pressed="true"] { background: var(--indigo); }
.call-btn:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.toast { position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 10px 14px; border-radius: 10px; background: #1c212e; border: 1px solid #334155; font-size: 0.8125rem; line-height: 1.4; color: var(--white); text-align: center; z-index: 5; }

/* ---------- Session ended ---------- */
.ended-header { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 20px; }
.ended-header__label { font-weight: 600; font-size: 0.75rem; line-height: normal; color: var(--ink-ended); text-transform: uppercase; }
.ended-body { display: flex; flex-direction: column; gap: 16px; padding: 0 16px 32px; flex: 1; }
.ended-card { display: flex; flex-direction: column; gap: 12px; padding: 15px; background: var(--white); border: 1px solid #e5ebf2; border-radius: 12px; }
.ended-card__title { font-weight: 700; font-size: 1.25rem; line-height: normal; color: var(--ink); }
.ended-card__meta { display: flex; flex-direction: column; gap: 2px; font-size: 0.875rem; line-height: normal; color: var(--muted); }
.result-badge { align-self: flex-start; padding: 5px 8px; border-radius: 13px; background: #dbf5e3; font-weight: 600; font-size: 0.75rem; line-height: normal; color: var(--ink-result); }
.feedback-choices { display: flex; gap: 16px; }
.feedback-choices label { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 10px; background: #f5f5fa; cursor: pointer; font-weight: 600; font-size: 0.875rem; line-height: normal; color: var(--ink); }
.feedback-choices input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.feedback-choices label.is-on { background: var(--violet); color: var(--white); }
.feedback-choices label:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.feedback-note { width: 100%; min-height: 90px; padding: 11px; background: #f7f7fa; border: 1px solid #e5ebf2; border-radius: 10px; font-family: var(--font-body); font-size: 0.8125rem; line-height: 1.4; color: var(--ink); resize: vertical; outline: 0; }
.feedback-note::placeholder { color: #a6adb8; opacity: 1; }
.feedback-note:focus { border-color: var(--indigo); }
.feedback-q { font-size: 0.8125rem; line-height: normal; color: var(--muted); }
.ended-actions { display: flex; flex-direction: column; gap: 16px; }
.link-center { align-self: center; padding: 8px 12px; font-weight: 600; font-size: 0.875rem; line-height: normal; color: var(--muted); }
.thanks-card { display: flex; flex-direction: column; gap: 8px; padding: 20px 15px; background: var(--white); border: 1px solid #e5ebf2; border-radius: 12px; text-align: left; }
.thanks-card__title { font-weight: 700; font-size: 1.125rem; line-height: normal; color: var(--ink); }

/* ---------- Service unavailable (dark) ---------- */
.unavail { display: flex; flex-direction: column; flex: 1; }
.unavail__stage { display: flex; justify-content: center; padding: 56px 16px; }
.unavail__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; max-width: 398px; padding: 40px 24px; border-radius: 16px; background: #262b38; text-align: left; }
.moon-wrap { width: 72px; height: 72px; border-radius: 36px; background: #252837; display: flex; align-items: center; justify-content: center; }
.moon-wrap img { width: 32px; height: 32px; display: block; }
.unavail__title { font-weight: 700; font-size: 1.125rem; line-height: 1.3; color: var(--white); }
.unavail__text { font-size: 0.8438rem; line-height: 1.45; color: #a6adbf; }
.fallback-card { display: flex; flex-direction: column; gap: 8px; margin: 0 16px; padding: 16px; border-radius: 10px; background: #1c212e; line-height: normal; }
.fallback-card__label { font-weight: 600; font-size: 0.6875rem; color: #8c94fa; text-transform: uppercase; }
.fallback-card p { font-size: 0.8125rem; line-height: 1.45; color: var(--white); }
.fallback-card a { color: var(--white); text-decoration: underline; }
.close-bar { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 20px 32px; margin-top: auto; }
.call-controls { margin-top: auto; }
.footer--customer .footer__bottom { padding: 0; }
.fallback-card p.fallback-card__label { font-weight: 600; font-size: 0.6875rem; color: #8c94fa; text-transform: uppercase; }


/* =====================================================================
   Accessibility
   ===================================================================== */

/* Main area sits between the header and footer inside the phone-sized screen */
.screen > main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 8px; background: var(--ink); color: var(--white); font-weight: 600; }
.skip-link:focus { top: 8px; }

/* Visible keyboard focus everywhere */
:focus-visible { outline: 2px solid var(--indigo-ink); outline-offset: 2px; }
.screen--dark :focus-visible, .footer :focus-visible, .footer__copyright-bar :focus-visible, .call-btn:focus-visible { outline-color: #a5b4fc; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--indigo-ink); outline-offset: 1px; }
/* inputs that live inside a bordered wrapper: show the ring on the wrapper instead */
.search input:focus-visible, .input-wrap input:focus-visible, .f-input-icon input:focus-visible, .url-box input:focus-visible,
.tag-box input:focus-visible, .phrasings input:focus-visible { outline: 0; }
.search:focus-within, .input-wrap:focus-within, .f-input-icon:focus-within, .url-box:focus-within, .tag-box:focus-within, .phrasings:focus-within {
  outline: 2px solid var(--indigo-ink); outline-offset: 1px;
}

/* Bigger tap areas (44px) without changing the layout */
.brand, .link-signin, .link-cancel, .footer__links a, .link-plain, .link-arrow, .link-underline, .hero-card__links a,
.hamburger, .pill-btn, .topic-pill, .chip-filter, .acc-item__head, .btn-text, .mini-btn, .btn-outline-sm, .btn-download, .btn-sm,
.link-center, .link-muted { position: relative; }
.brand::after, .link-signin::after, .footer__links a::after, .btn-text::after { content: ""; position: absolute; inset: -11px -6px; }
.link-plain::after, .link-arrow::after, .link-underline::after, .hero-card__links a::after { content: ""; position: absolute; inset: -14px -6px; }
.link-cancel::after { content: ""; position: absolute; inset: -13px -6px; }
.pill-btn::after, .link-center::after, .link-muted::after { content: ""; position: absolute; inset: -8px -6px; }
.chip-filter::after, .mini-btn::after { content: ""; position: absolute; inset: -9px -4px; }
.topic-pill::after { content: ""; position: absolute; inset: -5px -2px; }
.acc-item__head::after { content: ""; position: absolute; inset: -12px 0; }
.btn-outline-sm::after, .btn-download::after, .btn-sm::after { content: ""; position: absolute; inset: -6px -4px; }
.hamburger::after { content: ""; position: absolute; inset: -13px -10px; }
.pill-btn--back::after { inset: -8px -6px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* more tap areas */
.help-pill, .link-signout, .signup-prompt a, .dash-actions > a, .round-32, .ctl, .kw button, .method__value { position: relative; }
.help-pill::after { content: ""; position: absolute; inset: -9px -6px; }
.link-signout::after, .signup-prompt a::after { content: ""; position: absolute; inset: -13px -6px; }
.dash-actions > a::after, .round-32::after { content: ""; position: absolute; inset: -6px; }
.ctl::after { content: ""; position: absolute; inset: -3px; }
.kw button::after { content: ""; position: absolute; inset: -16px -14px; }
a.method__value::after { content: ""; position: absolute; inset: -14px 0; }
.input-wrap button { width: 44px; height: 44px; margin-right: -14px; align-items: center; justify-content: center; }
.help-pill::after { inset: -10px -6px; }
.dash-actions > a.link-signout::after { inset: -13px -6px; }
.kw button::after { inset: -16px -16px; }
.signin-links .link-small { position: relative; }
.signin-links .link-small::after { content: ""; position: absolute; inset: -14px -6px; }
/* Programmatic focus targets (main, thank-you cards, ...) don't need a ring */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: 0; }

/* =====================================================================
   Accessibility options (chosen by the visitor in the panel; saved on their device).
   The standard experience is the Figma design. Each rule below only applies when a
   visitor switches that option on (or their device asks for it).
   ===================================================================== */

/* Text size (everything is sized in rem, so the whole page scales) */
html[data-a11y-text="large"] { font-size: 125%; }
html[data-a11y-text="xlarge"] { font-size: 150%; }

/* High contrast: deeper text colours, stronger borders */
html[data-a11y-contrast="high"] {
  --indigo: #6265ee; --violet: #8558ec; --indigo-button: #6962ee;
  --indigo-ink: #4f46e5;
  --ink-green: #047857; --ink-amber: #b45309; --ink-red: #b91c1c; --ink-orange: #c2410c;
  --ink-faint: #64748b; --ink-result: #166534; --ink-pill-grey: #475569; --ink-ended: #4f46e5;
  --ink: #020617; --muted: #475569; --border: #64748b; --control-border: #64748b; --footer-eyebrow: #a5b4fc; --indigo-tint-border: #a5b4fc; --chip-border: #818cf8;
}
html[data-a11y-contrast="high"] .footer .eyebrow { color: #a5b4fc; }
html[data-a11y-contrast="high"] .badge-demo { background: rgba(133, 88, 236, 0.95); }
html[data-a11y-contrast="high"] .preview-dim { opacity: 1; background: var(--surface); }
html[data-a11y-contrast="high"] .preview-dim__num { color: #64748b; }
html[data-a11y-contrast="high"] .card, html[data-a11y-contrast="high"] .app-card, html[data-a11y-contrast="high"] .cust-card,
html[data-a11y-contrast="high"] .dash-panel, html[data-a11y-contrast="high"] .ended-card { border-color: #64748b; }

/* Reduce motion (also switched on automatically if the device asks for it) */
html[data-a11y-motion="reduce"] *, html[data-a11y-motion="reduce"] *::before, html[data-a11y-motion="reduce"] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}

/* Easy-read font */
html[data-a11y-font="easy"] {
  --font-display: "Atkinson Hyperlegible", "DM Sans", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", "DM Sans", system-ui, sans-serif;
  --font-label: "Atkinson Hyperlegible", "DM Sans", system-ui, sans-serif;
}

/* More text spacing (WCAG text-spacing values) */
html[data-a11y-spacing="on"] body *:not(.sr-only) { line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; }

/* Underline links */
html[data-a11y-links="underline"] a:not([class*="btn"]):not(.brand):not(.icon-btn):not(.call-btn):not(.appbar__back):not(.pill-btn):not(.hamburger):not(.social):not(.menu-link):not(.help-pill):not(.skip-link):not(.ctl):not(.a11y-fab) {
  text-decoration: underline !important; text-underline-offset: 3px;
}

/* Stronger focus outline */
html[data-a11y-focus="strong"] :focus, html[data-a11y-focus="strong"] :focus-visible { outline: 4px solid #1e1b4b !important; outline-offset: 3px !important; }
html[data-a11y-focus="strong"] .screen--dark :focus, html[data-a11y-focus="strong"] .footer :focus,
html[data-a11y-focus="strong"] .footer__copyright-bar :focus, html[data-a11y-focus="strong"] .a11y-fab:focus { outline-color: #ffffff !important; }

/* Larger buttons and tap areas */
html[data-a11y-targets="large"] .btn-sm, html[data-a11y-targets="large"] .btn-dash--sm, html[data-a11y-targets="large"] .add-more,
html[data-a11y-targets="large"] .btn-add-url, html[data-a11y-targets="large"] .link-add, html[data-a11y-targets="large"] .social,
html[data-a11y-targets="large"] .topic-pill, html[data-a11y-targets="large"] .chip-filter, html[data-a11y-targets="large"] .mini-btn,
html[data-a11y-targets="large"] .btn-outline-sm, html[data-a11y-targets="large"] .btn-download, html[data-a11y-targets="large"] .pill-btn,
html[data-a11y-targets="large"] .help-pill, html[data-a11y-targets="large"] .cust-pill { min-height: 48px; }
html[data-a11y-targets="large"] .segmented label { min-height: 48px; align-items: center; }
html[data-a11y-targets="large"] .btn, html[data-a11y-targets="large"] .btn-lg, html[data-a11y-targets="large"] .btn-save,
html[data-a11y-targets="large"] .btn-dash, html[data-a11y-targets="large"] .btn-gradient-lg, html[data-a11y-targets="large"] .btn-pay,
html[data-a11y-targets="large"] .btn-form, html[data-a11y-targets="large"] .btn-brief, html[data-a11y-targets="large"] .btn-primary-block { min-height: 52px; }
html[data-a11y-targets="large"] .footer__links, html[data-a11y-targets="large"] .hero-card__links { gap: 14px 24px; }
html[data-a11y-targets="large"] .accordion, html[data-a11y-targets="large"] .mini-list, html[data-a11y-targets="large"] .cust-actions { gap: 16px; }

/* ---------- The options button and panel ---------- */
.a11y-fab {
  position: fixed; z-index: 40; bottom: 16px; right: max(16px, calc(50vw - 215px + 16px));
  width: 48px; height: 48px; padding: 0; border-radius: 24px; border: 2px solid var(--white);
  background: var(--ink); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.a11y-fab img { width: 26px; height: 26px; display: block; }
.a11y-fab--raised { bottom: 150px; }
.a11y-dialog { width: min(94vw, 400px); max-height: 90vh; padding: 0; border: 0; border-radius: 16px; box-shadow: 0 24px 48px rgba(15, 23, 42, 0.3); color: var(--body); font-family: var(--font-body); overflow: auto; }
.a11y-dialog::backdrop { background: rgba(15, 23, 42, 0.55); }
.a11y-dialog__body { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 20px; }
.a11y-dialog__title { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; line-height: 1.2; color: var(--ink); }
.a11y-dialog__intro { font-size: 0.9375rem; line-height: 1.4; color: var(--body); }
.a11y-group { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.a11y-group legend { padding: 0; margin-bottom: 8px; font-weight: 700; font-size: 0.9375rem; line-height: 1.2; color: var(--ink); }
.a11y-switches { display: flex; flex-direction: column; gap: 8px; }
.a11y-switches .opt-row { padding: 12px 14px; }
.a11y-switches .info-row__title { font-size: 0.9375rem; }
.a11y-switches .opt-row__desc { font-size: 0.8125rem; line-height: 1.35; }
.a11y-dialog__actions { display: flex; gap: 12px; }
.a11y-dialog__actions .btn-dash { flex: 1; }
.a11y-dialog__note { font-size: 0.8125rem; line-height: 1.4; color: var(--muted); }
@media print { .a11y-fab { display: none; } }

/* High contrast: light text on dark panels must not follow the darker border colour */
html[data-a11y-contrast="high"] .footer__copy, html[data-a11y-contrast="high"] .dark-card p,
html[data-a11y-contrast="high"] .feature--light { color: #e2e8f0; }

/* ---------- Screens added after the Figma file (account, shopper edge cases, billing, legal, owner tools) ---------- */
.paused__icon--green { background: #ecfdf5; }
.paused__icon--amber { background: #fef3c7; }
.paused__icon--indigo { background: var(--indigo-tint); }
.paused__icon--center { align-self: center; }   /* the signed-out lock and the waiting/limit pages (Host busy, demo busy, start limit, daily limit) sit the icon in the middle */

/* ---------- Status pages: Free Trial Ended, Conversation Declined, Request Sent, empty states ---------- */
.state-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: var(--white); }
.state { display: flex; flex-direction: column; gap: 32px; padding: 24px 16px 32px; flex: 1; }
.state__visual { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.state__ring { width: 164px; height: 140px; border-radius: 60px; background: #f7f7ff; border: 4px solid #f0fdf4; display: flex; align-items: center; justify-content: center; }
.state__icon { width: 84px; height: 84px; border-radius: 42px; background: #f0f0ff; display: flex; align-items: center; justify-content: center; font-size: 2.125rem; line-height: 1; }
.state__icon img { width: 40px; height: 40px; display: block; }
.state__badge { padding: 6px 12px; border-radius: 30px; background: #f0f0ff; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.3px; line-height: normal; text-transform: uppercase; color: var(--indigo-ink); }
.state__card { display: flex; flex-direction: column; gap: 16px; padding: 24px; background: var(--white); border: 1px solid var(--border); border-radius: 16px; line-height: normal; }
.state__text { display: flex; flex-direction: column; gap: 8px; }
.state__title { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: normal; color: var(--ink); }
.state__text p:not(.state__title) { color: #475569; line-height: 1.4; }
.state__callout { display: flex; align-items: flex-start; gap: 10px; padding: 12px; background: #f0f0ff; border: 1px solid #dcfce7; border-radius: 10px; font-weight: 600; color: var(--indigo-ink); }
.state__callout--green { background: #f0fdf4; color: #15803d; }
.state__actions { display: flex; flex-direction: column; gap: 12px; }
.btn-outline-indigo { display: flex; align-items: center; justify-content: center; width: 100%; padding: 12px 24px; border: 1.5px solid var(--indigo); border-radius: 10px; background: transparent; cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: 1rem; line-height: normal; color: var(--indigo-ink); text-align: center; }
.count-note { font-weight: 600; color: #64748b; }
.inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; color: var(--ink); line-height: normal; }
.form-lead { display: flex; flex-direction: column; gap: 8px; }
.card-label { font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; line-height: 1.4; color: var(--ink); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-opt { position: relative; padding: 8px 14px; border-radius: 999px; background: var(--white); border: 1px solid var(--border); cursor: pointer; font-weight: 600; line-height: 1.25; color: var(--ink); }
.chip-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-opt.is-selected { background: var(--indigo-tint); border: 2px solid var(--indigo); padding: 7px 13px; font-weight: 700; color: var(--indigo-ink); }
.chip-opt:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.chip-opt::after { content: ""; position: absolute; inset: -6px -3px; }
.field--caps .field__label { font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; }
.field textarea { width: 100%; padding: 12px; border: 1px solid var(--control-border, #8390a2); border-radius: 10px; background: var(--white); font-family: var(--font-body); font-size: 1rem; line-height: 1.4; color: var(--ink); resize: vertical; }
.field--pay textarea::placeholder { color: var(--ink-faint); opacity: 1; }
.btn-outline-block { display: flex; align-items: center; justify-content: center; width: 100%; padding: 13px 24px; border: 1px solid var(--control-border); border-radius: 10px; background: var(--white); font-family: var(--font-body); font-weight: 600; font-size: 0.9375rem; line-height: normal; color: var(--ink); cursor: pointer; }
a.btn-outline-sm { display: inline-flex; align-items: center; position: relative; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; line-height: 1.25rem; }
.kv__k { color: var(--muted); flex: none; }
.kv__v { color: var(--ink); font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.steps-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.step-row { display: flex; align-items: flex-start; gap: 12px; }
.step-row__title { font-weight: 700; color: var(--ink); line-height: normal; }
.legal-note { padding: 12px 14px; border-radius: 10px; background: #fef3c7; color: #6b4406; font-size: 0.8125rem; line-height: 1.4; }
.doc { display: flex; flex-direction: column; gap: 10px; padding: 20px var(--gutter, 16px) 32px; }
.doc h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; line-height: 1.3; color: var(--ink); margin-top: 12px; }
.doc h3 { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--ink); margin-top: 6px; }
.doc p, .doc li { line-height: 1.5; }
.doc ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.doc a { color: var(--indigo-ink); text-decoration: underline; }

.app-card .opt-row { padding: 12px 14px; }
.app-card .opt-row .info-row__title { font-size: 0.9375rem; }
.app-card .opt-row__desc { font-size: 0.8125rem; line-height: 1.2rem; }

.btn-outline-block--danger { color: var(--ink-red); border-color: var(--ink-red); }
.btn-call { display: flex; align-items: center; justify-content: center; width: 100%; padding: 13px 20px; border-radius: 10px; font-weight: 700; font-size: 0.9375rem; line-height: normal; cursor: pointer; }
.btn-call--light { background: var(--white); color: #0b0e17; border: 0; }
.btn-call--ghost { background: transparent; color: var(--white); border: 1px solid #a6adbf; }
.unavail__inner .btn-call { max-width: 280px; }
.unavail__inner .btn-call + .btn-call { margin-top: -8px; }
.bubble { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; max-width: 92%; line-height: 1.35; }
.bubble__who { font-weight: 700; font-size: 0.6875rem; text-transform: uppercase; color: #475569; line-height: normal; }
.bubble__time { font-weight: 700; font-size: 0.75rem; }
.bubble--you { background: #ecfdf5; border: 1px solid #bbf7d0; align-self: flex-end; }
.bubble--you .bubble__time { color: var(--ink-green); }
.bubble--ai { background: var(--indigo-tint); align-self: flex-start; }
.bubble--ai .bubble__time { color: var(--indigo-ink); }
.bubble--sys { align-self: center; text-align: center; color: var(--muted); font-size: 0.8125rem; }
a.moment { color: inherit; position: relative; }

/* ---------- Conversation Transcripts list + detail ---------- */
.convo-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; }
.convo-list { display: flex; flex-direction: column; gap: 12px; }
.convo-row { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--white); border: 1px solid var(--border); border-radius: 12px; text-decoration: none; color: inherit; }
.avatar-initials { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8125rem; color: var(--ink); }
.convo-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.convo-row__name { font-weight: 700; color: var(--ink); }
.convo-row__quote { color: var(--muted); font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.convo-row__meta { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.convo-row__date { font-weight: 700; font-size: 0.8125rem; color: var(--ink); }
.convo-row__time { color: var(--muted); font-size: 0.8125rem; display: flex; align-items: center; gap: 2px; }
.convo-row__time img { width: 10px; height: 10px; display: block; }
.convo-summary { display: flex; align-items: flex-start; gap: 12px; }
.convo-summary__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.convo-summary__meta { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

/* ---------- Baseline accessibility (on for everyone) ---------- */
.footer .eyebrow { color: var(--footer-eyebrow); }

/* Edges of form controls must be visible (WCAG 1.4.11, 3:1) */
.field input, .field select, .field textarea, .search, .input-wrap, .f-input, .f-textarea, .f-select, .url-box, .tag-box,
.phrasings, .sign-input, .textbox, .notes-box, .feedback-note, .dropzone { border-color: var(--control-border); }
.opt__mark, .ack__box { border-color: var(--control-border); }
.switch__track { background: var(--control-border); }

/* Invisible 44px tap areas for the few visible buttons that are shorter than that */
.btn-dash--sm, .add-more, .btn-add-url, .social, .link-add { position: relative; }
.btn-dash--sm::after, .add-more::after, .btn-add-url::after, .social::after { content: ""; position: absolute; inset: -6px 0; }
.link-add::after { content: ""; position: absolute; inset: -12px -6px; }
.segmented label::after { content: ""; position: absolute; inset: -6px 0; }

/* A customer's link: hold the page text back for a moment while the business's Host name and photo are swapped in (js/app.js). */
.host-pending body { visibility: hidden; }
/* the dark call pages wait on a dark background, so there is no light-grey flash before them */
.host-pending:has(.screen--dark) body { background: #0b0e17; }

/* Plans, help and legal links at the bottom of the homepage. */
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin: 0 0 12px; }
.footer__links a { color: inherit; text-decoration: underline; font-size: 0.875rem; opacity: 0.9; }

/* =====================================================================
   Wide screens (tablets and laptops)
   A page opts in by adding "screen--wide" to its .screen. On a phone nothing changes. From 768px the page fills the window, the content
   stays centred at most 1120px wide, and the header shows its links instead of the menu button. From 1000px the home page, Plans and FAQ
   also spread into columns. Pages that have not opted in keep their phone-sized column, centred.
   ===================================================================== */
.header__nav { display: none; }
.who { padding: 0 20px; }
.ready-stack { display: flex; flex-direction: column; gap: 16px; }
.plan-notice-wrap { padding: 16px 20px 0; }
.plan-notice { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 12px; background: #fffbeb; border: 1px solid #fde68a; }
.plan-notice--ended { background: #fef2f2; border-color: #fecaca; }
.plan-notice--ending { background: #eff6ff; border-color: #bfdbfe; }
.plan-notice--change { background: #eff6ff; border-color: #bfdbfe; }
.plan-notice__title { font-weight: 700; font-size: 1rem; color: var(--ink); }
.plan-notice p:not(.plan-notice__title) { font-size: 0.9375rem; line-height: 1.4; color: var(--body); }
.plans__row { display: flex; flex-direction: column; gap: 20px; }

@media (min-width: 768px) {
  .screen--wide {
    --gutter: max(32px, calc((100% - 1120px) / 2));      /* the content column; the percentage is the page width wherever the gutter is used as padding */
    max-width: none; min-height: 100vh; border: 0; box-shadow: none;
  }
  .screen--wide .header { padding-top: 18px; padding-bottom: 18px; }
  .screen--wide .brand span { font-size: 1.375rem; }
  .screen--wide .brand img { height: 28px; }
  .screen--wide .brand--lg img { height: 32px; }
  .screen--wide .header__nav { display: flex; align-items: center; gap: 32px; font-weight: 600; color: var(--ink); }
  .screen--wide .header__nav a { padding: 6px 0; border-bottom: 2px solid transparent; }
  .screen--wide .header__nav a:hover, .screen--wide .header__nav a[aria-current="page"] { color: var(--indigo-ink); border-bottom-color: var(--indigo); }
  .screen--wide .header__nav ~ .header__actions .hamburger { display: none; }       /* the menu button goes only where the links took its place */
  .screen--wide [data-return-dashboard] { padding-left: var(--gutter) !important; }
  body:has(.screen--wide) .a11y-fab { right: 24px; }                  /* the options button sits at the window's edge, not the phone column's */

  .screen--wide .footer { padding: 56px var(--gutter) 80px; gap: 32px; }
  .screen--wide .footer > .stack-16 { align-items: flex-start; }
  .screen--wide .footer .btn { width: auto !important; align-self: flex-start !important; padding: 14px 40px; }
  .screen--wide .footer__cta { font-size: 2rem; line-height: 2.5rem; text-align: left; }
  .screen--wide .footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; text-align: left; }
  .screen--wide .footer__bottom { padding-right: 72px; }                /* keep the copyright line clear of the floating options button */
  .screen--wide .footer__links { justify-content: flex-start; }

  /* Home */
  .screen--wide .content { align-items: stretch; gap: 32px; padding-top: 48px; padding-bottom: 64px; }
  .screen--wide .content > section:first-child { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
  .screen--wide .content > section:first-child > .card { order: -1; }                 /* the Host on the left, the words on the right (the page still reads headline first) */
  .screen--wide .h-hero { font-size: 3rem; line-height: 3.25rem; }
  .screen--wide .viewport { height: 300px; }
  .screen--wide .who { padding: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: 16px 48px; align-items: start; }
  .screen--wide .who > h2 { grid-column: 1; grid-row: 1; }
  .screen--wide .who > p { grid-column: 1; grid-row: 2; }
  .screen--wide .who > ul { grid-column: 2; grid-row: 1 / span 2; }
  .screen--wide .industry-list { grid-template-columns: 1fr; }

  /* Plans: one readable column on a tablet */
  .screen--wide .plans { padding: 48px var(--gutter) 64px; gap: 28px; align-items: center; }
  .screen--wide .plans > *, .screen--wide .plans__row { width: 100%; max-width: 640px; }
  .screen--wide .plans__intro { gap: 8px; }
  .screen--wide .h-plans { font-size: 2.75rem; line-height: 3rem; }
  .screen--wide .plan-card { gap: 24px; }
  .screen--wide .plan-card .btn-lg, .screen--wide .dark-card .btn-lg { margin-top: auto; }
  .screen--wide .features { gap: 18px; }
  .screen--wide .features--tight { gap: 12px; }

  /* FAQ: one readable column on a tablet */
  .screen--wide .faq-body { padding: 48px var(--gutter) 64px; align-items: center; }
  .screen--wide .faq-body > * { width: 100%; max-width: 760px; }

  /* Sign-up, sign-in and checkout: the header and footer span the window; the form sits in a centred card */
  .screen--flow { background: var(--surface); }
  .screen--flow > header > .steps { width: 100%; max-width: 520px; margin: 0 auto; }       /* a step bar in the header lines up with the card */
  .screen--flow > main {
    flex: none; width: 100%; max-width: 520px; margin: 40px auto; --gutter: 24px;
    background: var(--white); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 10px 24px -8px rgba(15, 23, 42, 0.07); overflow: clip;
  }

  /* Signed-in pages: the top bar lines up with the content column, and the page content sits in a readable column */
  .screen--app > header { padding-left: var(--gutter); padding-right: var(--gutter); }
  .screen--wide > header:not(.sheet-header) { padding-left: var(--gutter); padding-right: var(--gutter); }       /* every top bar lines up with the content column */
  .screen--wide .header__nav ~ .header__actions .pill-btn[href="menu.html"] { display: none; }

  /* Sheets (kits, tools, topics, questions, profile picture): the title bar and the form make one centred card */
  .screen--sheet > .sheet-header {
    width: 100%; max-width: 640px; margin: 40px auto 0; padding: 16px 24px; background: var(--white);
    border: 1px solid var(--border); border-radius: 16px 16px 0 0;
  }
  .screen--sheet > main {
    flex: none; width: 100%; max-width: 640px; margin: 0 auto 48px; --gutter: 24px;
    background: var(--white); border: 1px solid var(--border); border-top: 0; border-radius: 0 0 16px 16px; box-shadow: 0 10px 24px -8px rgba(15, 23, 42, 0.07); overflow: clip;
  }
  .screen--sheet .sheet-form { padding: 24px; }
  .screen--sheet .sheet-footer { padding: 20px 24px 28px; }

  /* Guest pages */
  .screen--flow-lg > main { max-width: 680px; }
  .screen--flow-lg > .cust-header { padding-left: 0; padding-right: 0; }
  .screen--flow-lg .cust-header__row, .screen--flow-lg .cust-header__titles { width: 100%; max-width: 680px; margin-left: auto; margin-right: auto; }
  body:has(.screen--dark.screen--wide) { background: #0b0e17; }                  /* the call and its error screens fill the window in dark */
  /* The call: the same 9:16 portrait picture as on a phone (so the Host is framed the same way), just larger and centred */
  .screen--call { --stage-h: max(360px, min(78vh, calc(100dvh - 260px))); }
  .screen--call .call-stage { flex: none; width: min(calc(100% - 32px), calc(var(--stage-h) * 0.5625)); height: var(--stage-h); min-height: 0; max-height: none; aspect-ratio: 9 / 16; margin: 8px auto 0; align-self: center; }
  .screen--call .caption, .screen--call .call-controls { width: 100%; max-width: 480px; margin-left: auto; margin-right: auto; }

  /* Staff pages */
  .screen--staff > main { width: 100%; padding: 0 var(--gutter); flex: 1 0 auto; }
  .screen--staff .app-body { padding: 24px 0 48px; }
  .screen--app > main { width: 100%; max-width: 760px; margin: 0 auto; flex: 1 0 auto; }
  .screen--app:not(.screen--dash) > main { padding-bottom: 40px; }                       /* breathing room above the footer (About's last band touched it) */
  .screen--app > main > * { max-width: none; }
  .screen--app .dash-panel, .screen--app .hero-card { max-width: none; }
  .screen--app .dash-body { padding: 24px 0 48px; }
  .screen--dash > main { max-width: none; padding: 0 var(--gutter); }
  .screen--dash .dash-body { padding: 32px 0 64px; }
  .screen--dash .plan-notice-wrap { padding: 24px 0 0; }
  .screen--dash .plan-notice { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px 24px; }
  .screen--dash .plan-notice > .plan-notice__title { flex: 1 1 100%; }
  .screen--dash .plan-notice > p:not(.plan-notice__title) { flex: 1 1 320px; }
  .screen--dash .plan-notice > .btn-dash { width: auto; padding-left: 28px; padding-right: 28px; }
}

@media (min-width: 1000px) {
  .screen--staff .app-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; align-items: start; align-content: start; }
  .screen--staff .app-body > section:first-child { grid-column: 1 / -1; }
  .screen--staff .ready-stack { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; align-content: start; }
  .screen--staff .ready-stack > section:first-child { grid-column: 1 / -1; }
  .screen--staff .app-body:has(> .ready-stack) { display: block; }
  /* Listening switch page: the on/off card across the top, the short cards stacked in the left column with no gaps, and the tall Limits card
     alongside them on the right. The last row takes up whatever height is left over, so no gaps open between the left cards. */
  .screen--staff .ready-stack--listening { grid-template-rows: auto auto auto auto auto auto auto 1fr; }
  .screen--staff .ready-stack--listening > section { grid-column: 1; }
  .screen--staff .ready-stack--listening > section:first-child { grid-column: 1 / -1; }
  .screen--staff .ready-stack--listening > .listening-limits { grid-column: 2; grid-row: 2 / 9; }
  .screen--dash .dash-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px 32px; align-items: start; align-content: start; }
  .screen--dash .dash-body > .preview { grid-column: 1; grid-row: 1 / span 8; position: sticky; top: 16px; }
  .screen--dash .dash-body > :not(.preview) { grid-column: 2; }
  .screen--dash .preview > * { max-width: none; }
}

@media (min-width: 1000px) {
  .screen--wide .content { display: grid; grid-template-columns: 1fr 1fr; }
  .screen--wide .content > section:first-child, .screen--wide .content > .divider, .screen--wide .content > .who { grid-column: 1 / -1; }

  .screen--wide .plans { align-items: stretch; }
  .screen--wide .plans > *, .screen--wide .plans__row { max-width: none; }
  .screen--wide .plans__row { flex-direction: row; align-items: stretch; }
  .screen--wide .plans__row > * { flex: 1 1 0; min-width: 0; }
  .screen--wide .plans__intro { max-width: 640px; }

  .screen--wide .faq-body {
    display: grid; grid-template-columns: 340px 1fr; gap: 28px 56px; align-items: start;
    grid-template-columns: 340px 1fr; grid-template-rows: auto 1fr auto;
    grid-template-areas: "intro acc" "cta acc" ". more";
  }
  .screen--wide .faq-body > .cta-card { align-self: start; }
  .screen--wide .cta-card__actions { flex-wrap: wrap; }
  .screen--wide .cta-card__actions > * { flex: 1 1 auto; white-space: nowrap; }
  .screen--wide .faq-body > * { max-width: none; }
  .screen--wide .faq-body > .stack-16 { grid-area: intro; }
  .screen--wide .faq-body > .accordion { grid-area: acc; }
  .screen--wide .faq-body > .cta-card { grid-area: cta; }
  .screen--wide .faq-body > .link-plain { grid-area: more; }
}

/* About on a laptop: use the width. The intro sits beside the photo, the two mission paragraphs side by side, the three values in a row. Phones and tablets keep the single column. */
@media (min-width: 1000px) {
  .screen--app.screen--about > main {
    max-width: none; padding: 40px var(--gutter) 72px; flex: 1 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  }
  .screen--about .about-hero, .screen--about .about-image, .screen--about .mission, .screen--about .values { padding-left: 0; padding-right: 0; }
  .screen--about .about-hero { padding-top: 0; padding-bottom: 0; gap: 20px; }
  .screen--about .about-lead { font-size: 2.25rem; line-height: 1.15; text-wrap: balance; }
  .screen--about .about-hero p:not(.eyebrow):not(.about-lead) { font-size: 1.125rem; line-height: 1.6; max-width: 520px; }
  .screen--about .about-image { padding: 0; }
  .screen--about .about-image img { height: 340px; border-radius: 20px; }

  .screen--about .mission {
    grid-column: 1 / -1; padding: 36px 40px; border: 1px solid var(--border); border-radius: 20px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px 56px; align-items: start;
  }
  .screen--about .mission > h2 { grid-column: 1 / -1; }
  .screen--about .mission > .divider { display: none; }
  .screen--about .mission > p:not(.fineprint) { font-size: 1.0625rem; line-height: 1.6; text-wrap: pretty; }
  .screen--about .mission > .btn { grid-column: 1; justify-self: start; width: auto; padding-left: 28px; padding-right: 28px; }
  .screen--about .mission > .fineprint { grid-column: 1; margin-top: -4px; text-wrap: balance; }

  .screen--about .values { grid-column: 1 / -1; gap: 28px; padding-top: 16px; padding-bottom: 0; }
  .screen--about .values .stack-16 { flex-direction: row; gap: 20px; }
  .screen--about .values .value-card { flex: 1 1 0; min-width: 0; padding: 24px; }
  .screen--about .value-card p { text-wrap: balance; }

  .screen--about .callout {
    grid-column: 1 / -1; padding: 32px 40px; border-radius: 20px;
    display: grid; grid-template-columns: 1fr 1.4fr; gap: 6px 56px; align-items: center;
  }
  .screen--about .callout > .eyebrow { grid-column: 1; }
  .screen--about .callout > h2 { grid-column: 1; }
  .screen--about .callout > p:not(.eyebrow) { grid-column: 2; grid-row: 1 / span 2; font-size: 1.0625rem; line-height: 1.6; }
}

/* Home on a laptop: the words on the left and the Host on the right, the three steps in a row, "What you get" beside its heading, "Who it's for" in three columns, and the closing band with its button on the right. */
.home-hero__lead { color: var(--body); line-height: 1.5; text-wrap: pretty; }          /* the same words on every screen size */
@media (min-width: 1000px) {
  .screen--home .content { display: flex; flex-direction: column; gap: 72px; padding-top: 56px; padding-bottom: 80px; }
  .screen--home .content > section:first-child { grid-template-columns: 1.15fr 0.85fr; gap: 72px; }
  .screen--home .content > section:first-child > .card { order: 0; max-width: 440px; justify-self: end; width: 100%; }       /* the Host card now sits on the right */
  .screen--home .viewport { height: 320px; }
  .screen--home .h-hero { font-size: 3.25rem; line-height: 3.5rem; text-wrap: balance; }
  .screen--home .home-hero__lead { display: block; font-size: 1.1875rem; line-height: 1.6; color: var(--body); max-width: 520px; text-wrap: pretty; }
  .screen--home .content > section:first-child .stack-16 { gap: 20px; }

  .screen--home .home-how { padding: 40px; gap: 28px; }
  .screen--home .home-how > .stack-16 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .screen--home .home-how .step { flex-direction: column; gap: 14px; padding: 24px; background: var(--white); border: 1px solid var(--border); border-radius: 14px; }
  .screen--home .home-how > .btn { align-self: flex-start; width: auto; padding: 14px 32px; }
  .screen--home .home-how .item-title, .screen--home .home-get .item-title { text-wrap: balance; }
  .screen--home .home-how .step__text p:not(.item-title), .screen--home .home-get .step__text p:not(.item-title) { text-wrap: pretty; }

  .screen--home .home-get { display: grid; grid-template-columns: 0.9fr 1.3fr; gap: 56px; padding: 40px; align-items: start; }
  .screen--home .home-get h2 { text-wrap: balance; }
  .screen--home .home-get > .stack-16 { gap: 14px; }
  .screen--home .home-get .scope-row { align-items: center; padding: 16px 18px; background: var(--white); border: 1px solid var(--border); border-radius: 12px; }

  .screen--home .who { display: block; }
  .screen--home .who > p { margin-top: 12px; max-width: 640px; }
  .screen--home .industry-list { grid-template-columns: repeat(3, 1fr); gap: 16px 32px; margin-top: 24px; }

  .screen--home .footer > .stack-16 { display: grid; grid-template-columns: 1fr auto; column-gap: 40px; row-gap: 8px; align-items: center; }
  .screen--home .footer > .stack-16 > .eyebrow { grid-column: 1; }
  .screen--home .footer > .stack-16 > .footer__cta { grid-column: 1; }
  .screen--home .footer > .stack-16 > .btn { grid-column: 2; grid-row: 1 / span 2; align-self: center !important; }
}

/* Plans on a laptop: the second row lines up with the three columns above (the custom plan spans two, Enterprise takes one), and the short descriptions are balanced so no word is left alone on a line. */
@media (min-width: 1000px) {
  .screen--wide .plans__row:has(> [data-custom-plan]) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .screen--wide .plans__row > [data-custom-plan] { grid-column: span 2; }
  .screen--wide .plans > .fineprint { text-wrap: balance; }
  .screen--wide .plan-card h2, .screen--wide .plan-card h3 { text-wrap: balance; }
  .screen--wide .plan-card__head > p, .screen--wide .dark-card .stack-8 > p { text-wrap: balance; }
}

/* Laptop windows: at least 72px of space at each side (it was 32px until the window passed about 1200px wide, so the content sat against the edges, and the round options button overlapped it). */
@media (min-width: 1000px) {
  .screen--wide { --gutter: max(72px, calc((100% - 1120px) / 2)); }
}

/* The custom plan's features go into two columns only where there is room for each on one line. */
@media (min-width: 1200px) {
  .screen--wide [data-custom-plan] .features { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; }
}

/* Contact and Ethics on a laptop. Contact: the form on the left and the ways to reach us on the right. Ethics: the six principles three across, and the data and questions cards side by side. Phones and tablets keep their single column. */
.contact-side { display: contents; }
@media (min-width: 1000px) {
  .screen--app.screen--contact > main, .screen--app.screen--ethics > main { max-width: none; padding: 40px var(--gutter) 72px; }

  .screen--contact .contact-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 0 80px; align-items: start; padding: 0; }
  .screen--contact .contact-body > section:first-child { grid-column: 1; grid-row: 1; }
  .screen--contact .contact-body > .form { grid-column: 1; grid-row: 2; margin-top: 24px; }
  .screen--contact .contact-body > .divider { display: none; }
  .screen--contact .contact-side { display: flex; flex-direction: column; gap: 32px; grid-column: 2; grid-row: 1 / span 2; padding-top: 6px; }
  .screen--contact .footer__cta { text-wrap: balance; }
  .screen--contact .contact-body p, .screen--contact .faq-callout p { text-wrap: pretty; }

  .screen--ethics .ethics-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px 48px; align-items: start; padding: 0; }
  .screen--ethics .ethics-body > section:first-child, .screen--ethics .ethics-body > .divider, .screen--ethics .ethics-body > .pillars { grid-column: 1 / -1; }
  .screen--ethics .ethics-body > section:first-child { max-width: 720px; }
  .screen--ethics .pillars > .stack-16 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .screen--ethics .principle { height: 100%; }
  .screen--ethics .principle p, .screen--ethics .commitment p, .screen--ethics .contact-cta p { text-wrap: pretty; }
  .screen--ethics .commitments { grid-column: 1; }
  .screen--ethics .contact-cta { grid-column: 2; }
}

/* Opening and closing the menu (see js/a11y.js): the page fades up and out for a moment, and the Menu page slides in from the top. */
@keyframes menu-open { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes page-leave { to { opacity: 0; transform: translateY(-8px); } }
.menu-body { animation: menu-open 0.26s ease-out both; }
html.is-leaving main, html.is-leaving .footer { animation: page-leave 0.16s ease-in forwards; }
@media (prefers-reduced-motion: reduce) { .menu-body, html.is-leaving main, html.is-leaving .footer { animation: none; } }
html[data-a11y-motion="reduce"] .menu-body, html[data-a11y-motion="reduce"].is-leaving main, html[data-a11y-motion="reduce"].is-leaving .footer { animation: none; }

/* On every page in the hamburger menu, the three lines are an X that closes the screen (it turns from the lines as the page opens). Hidden from 768px up on pages whose header shows the page links. */
.hamburger--close span:nth-child(1) { top: 8px; transform: rotate(45deg); animation: burger-top 0.28s ease-out; }
.hamburger--close span:nth-child(2) { opacity: 0; animation: burger-mid 0.2s ease-out; }
.hamburger--close span:nth-child(3) { top: 8px; transform: rotate(-45deg); animation: burger-bottom 0.28s ease-out; }
@keyframes burger-top { from { top: 2px; transform: none; } to { top: 8px; transform: rotate(45deg); } }
@keyframes burger-mid { from { opacity: 1; } to { opacity: 0; } }
@keyframes burger-bottom { from { top: 14px; transform: none; } to { top: 8px; transform: rotate(-45deg); } }
@media (prefers-reduced-motion: reduce) { .hamburger--close span { animation: none; } }
html[data-a11y-motion="reduce"] .hamburger--close span { animation: none; }

/* On a phone the X sits exactly where the home page's hamburger sits (55px-high header, 16px from the right edge), so it never jumps between pages. */
@media (max-width: 767px) {
  header.header:has(.hamburger--close) { padding-top: 16px; padding-bottom: 16px; padding-right: 16px; }
  .appbar:has(.hamburger--close) { padding: 16px 16px 12px; align-items: flex-start; }
  .appbar:has(.hamburger--close) .header__actions { min-height: 24px; }
}

/* Pages opened from the menu (phone only): the normal header stays the same on every page, and a slim bar under it has one round back button and the page name, like the Starter Kits bar. From 768px up, the header shows the page links instead. */
.sheet-header__spacer { width: 34px; flex: none; }
@media (min-width: 768px) { .screen--wide .sheet-header--menu { display: none; } }
@media (max-width: 767px) { .screen:has(.sheet-header--menu) [data-return-dashboard] { display: none; } }       /* signed in: the slim bar's own back arrow is the way back, so no second arrow */

/* On a phone the top header is the same on every page opened from the menu (55px high, "Sign In" the same size), so only the slim bar below it changes. */
@media (max-width: 767px) {
  .screen:has(.sheet-header--menu) > header:not(.sheet-header) { padding-top: 16px; padding-bottom: 16px; }
  .screen:has(.sheet-header--menu) > header:not(.sheet-header) .link-signin { font-size: 1rem; }
}

/* The dashboard waits for its real numbers, then fades in once, so nothing jumps. If anything goes wrong it shows itself after 3 seconds. */
.screen--dash .dash-body, .screen--dash .plan-notice-wrap { transition: opacity 0.2s ease-out; }
.screen--dash.dash-loading .dash-body, .screen--dash.dash-loading .plan-notice-wrap { opacity: 0; animation: dash-reveal 0.2s ease-out 3s forwards; }
@keyframes dash-reveal { to { opacity: 1; } }

/* The Host picker sits under the Talk To Your Host button. With several Hosts it scrolls sideways (swipe), with the next card peeking in from the edge.
   The first and last cards use auto margins, so a short row sits in the centre and a long row starts at the left (centering a scroller would hide the first cards). */
.host-picker { justify-content: flex-start !important; }
.host-card:first-child { margin-left: auto; }
.host-card:last-child { margin-right: auto; }
@media (max-width: 480px) { .host-card { width: 118px; padding: 6px 6px 10px; } .host-card.is-selected { padding: 5px 5px 9px; } }

/* Show / Hide password button (js/a11y.js adds it to every password field) */
.pw-wrap { position: relative; display: flex; }
.pw-wrap input { padding-right: 68px; }
.pw-toggle { flex: none; background: none; border: 0; padding: 0 4px; min-height: 44px; min-width: 44px; font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--indigo-ink); cursor: pointer; }
.pw-wrap .pw-toggle { position: absolute; top: 0; right: 4px; height: 100%; min-height: 0; }
.input-wrap .pw-toggle { margin-right: -6px; }
.pw-toggle:hover { text-decoration: underline; }
.pw-toggle:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 6px; }

/* QR poster page (qr-poster.html): a tools card, then a poster preview that prints at letter size or as a 4 x 6 table card. */
.poster-page { width: 100%; max-width: 980px; margin: 0 auto; padding: 24px 16px 48px; display: flex; flex-direction: column; gap: 24px; }
.poster-tools { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.poster-tools__row { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.poster-stage { overflow-x: auto; padding-bottom: 8px; }
.poster-stage[hidden] { display: none; }
.poster { margin: 0 auto; background: #fff; color: #0f172a; box-shadow: 0 10px 28px -10px rgba(15, 23, 42, 0.3); display: flex; flex-direction: column; align-items: center; text-align: center; font-family: var(--font-body); overflow: hidden; }
.poster--letter { width: 8.5in; height: 11in; padding: 0.7in; gap: 0.26in; }
.poster--card { width: 4in; height: 6in; padding: 0.28in; gap: 0.1in; }
.poster__brand { align-self: flex-start; display: flex; align-items: center; gap: 0.4em; margin: 0; font-weight: 800; font-size: 22px; letter-spacing: 0.035em; color: #5b5edf; }
.poster__brand img { height: 1.5em; width: auto; display: block; }
.poster__biz { margin: 0; font-weight: 800; font-size: 36px; line-height: 1.1; color: #0f172a; overflow-wrap: anywhere; }
.poster__title { margin: 0; font-size: 54px; line-height: 1.05; font-weight: 800; }
.poster__sub { margin: 0; font-size: 24px; line-height: 1.3; color: #314157; max-width: 6.2in; }
.poster__row { display: flex; gap: 0.4in; align-items: center; justify-content: center; }
.poster__photo { width: 2.3in; height: 2.8in; object-fit: cover; border-radius: 20px; }
.poster__photo[hidden] { display: none; }
.poster__qr { width: 3in; height: 3in; border: 4px solid #0f172a; border-radius: 16px; padding: 10px; background: #fff; display: flex; align-items: center; justify-content: center; }
.poster__qr img { width: 100%; height: auto; display: block; image-rendering: pixelated; }
.poster__steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25in; }
.poster__steps li { background: #eef0ff; border-radius: 14px; padding: 14px 16px; width: 2.2in; font-size: 17px; line-height: 1.3; text-align: left; }
.poster__steps b { display: block; font-size: 21px; color: #5b5edf; margin-bottom: 2px; }
.poster__small { margin: 0; font-size: 15px; line-height: 1.35; color: #314157; max-width: 6.4in; }
.poster__link { margin: 0; font-size: 11px; color: #64748b; overflow-wrap: anywhere; max-width: 6.4in; }
/* the small table card */
.poster--card .poster__brand { font-size: 12px; }
.poster--card .poster__biz { font-size: 20px; }
.poster--card .poster__title { font-size: 25px; }
.poster--card .poster__sub { font-size: 12.5px; max-width: 3.4in; }
.poster--card .poster__photo { display: none; }
.poster--card .poster__qr { width: 1.85in; height: 1.85in; border-width: 3px; border-radius: 12px; padding: 6px; }
.poster--card .poster__steps { flex-direction: column; gap: 3px; width: 100%; }
.poster--card .poster__steps li { width: auto; padding: 4px 9px; font-size: 10.5px; border-radius: 8px; }
.poster--card .poster__steps b { display: inline; font-size: 11.5px; margin: 0 4px 0 0; }
.poster--card .poster__small { font-size: 9.5px; line-height: 1.3; max-width: 3.45in; }
.poster--card .poster__link { font-size: 7.5px; max-width: 3.45in; }
@media print {
  html, body { background: #fff !important; height: auto !important; }
  body > :not(.screen--poster) { display: none !important; }          /* the skip link, the accessibility button */
  .screen--poster { display: block !important; width: auto !important; max-width: none !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: #fff !important; }
  .screen--poster > header, .screen--poster > footer, .poster-tools { display: none !important; }
  .screen--poster > main, .poster-page, .poster-stage { margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; max-width: none !important; overflow: visible !important; background: #fff !important; }
  .poster { margin: 0 !important; box-shadow: none !important; zoom: 1 !important; break-inside: avoid; page-break-after: avoid; }
  .poster--card { height: 5.98in; }
  .poster--letter { height: 10.98in; }
}
.screen--flow.screen--poster > main { max-width: 1040px; }

/* Staff home (admin.html): the sign-ups table. A real table on laptops; each row stacks into a card on narrower screens. */
.signups-bar { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 8px; }
.signups-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.signups-filters button { font: inherit; font-size: 0.8125rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--white); color: var(--ink); cursor: pointer; }
.signups-filters button { min-height: 44px; }
.signups-filters button[aria-pressed="true"] { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.signups-search { max-width: 360px; }
.signups-wrap { overflow-x: auto; }
.signups { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.signups th { text-align: left; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 2px solid var(--border); white-space: nowrap; }
.signups td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--body); }
.signups td strong { display: block; color: var(--ink); overflow-wrap: anywhere; }
.signups td small { display: block; color: var(--muted); font-size: 0.8125rem; margin-top: 2px; }
.signups td.signups__email { overflow-wrap: anywhere; }
.signups td.signups__num { text-align: right; white-space: nowrap; }
@media (max-width: 899px) {
  .signups thead { display: none; }
  .signups, .signups tbody, .signups tr, .signups td { display: block; width: 100%; }
  .signups tr { border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; margin-bottom: 12px; background: var(--white); }
  .signups td { border: 0; padding: 6px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .signups td::before { content: attr(data-label); font-weight: 600; color: var(--muted); text-align: left; flex: none; }
  .signups td.signups__name { display: block; text-align: left; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
  .signups td.signups__name::before { content: none; }
  .signups td.signups__num { text-align: right; }
  .signups td > div { text-align: right; }
}
@media (min-width: 1000px) {
  .screen--staff .app-body > .staff-wide { grid-column: 1 / -1; }
}

/* Starter kits on a laptop: the three kits side by side instead of one long narrow column */
@media (min-width: 1100px) {
  .screen--kits > .sheet-header, .screen--kits > main { max-width: 1040px; }
  .screen--kits [data-kit-list] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}

/* Headings: a little space between the letters, so bold type does not feel cramped. Kept at the end so it wins over each heading's own style.
   Small all-caps labels (eyebrows, badges) keep their own spacing, and the "More text spacing" accessibility choice still overrides this. */
h1, h2, h3, h4,
.h-hero, .h-section, .h-plain, .h-dm-xl, .h-dm-lg, .h-dm-md, .h-dm-sm, .h-af-page, .h-af-24, .h-af-22, .h-af-20, .h-ethics, .h-plans, .h-welcome,
.h-brief, .h-confirm, .h-signin, .h-plan-name, .h-paused,
.card-heading, .card-title, .item-title, .cust-card__title, .info-row__title, .menu-link__title, .mini-card__title, .train-card__title, .value-card__title,
.commitment__title, .summary__title, .cta-card__title, .moment__title, .dark-card__title, .hero-card__title, .done-card__title, .ended-card__title,
.unavail__title, .state__title, .sheet-header__title, .appbar__title, .poster__title, .dz__title, .a11y-dialog__title, .plan-card__head h2, .principle__head h3 {
  letter-spacing: var(--heading-tracking);
}

/* Starter kits: the kit in use is easy to see, and changing kits is acknowledged. */
.kit-card { position: relative; }
.kit-card__badge { display: none; position: absolute; top: 12px; right: 12px; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--indigo); color: var(--white); font-weight: 700; font-size: 0.8125rem; line-height: 1.2; }
.kit-card.is-current { border: 2px solid var(--indigo); background: #f5f5ff; }
.kit-card.is-current .kit-card__badge { display: inline-flex; }
.btn-save.is-current { background: var(--white); color: var(--indigo-ink); border: 2px solid var(--indigo); }
.btn-save.is-current::before { content: "\2713\00a0"; }
.kit-card.is-just-chosen { animation: kit-pulse 1.4s ease-out 1; }
@keyframes kit-pulse { 0% { box-shadow: 0 0 0 0 rgba(98, 101, 238, 0.55); } 100% { box-shadow: 0 0 0 18px rgba(98, 101, 238, 0); } }
.kit-toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 9999; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 12px; background: #14532d; color: var(--white); font-weight: 700; font-size: 1rem; line-height: 1.3; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); transition: opacity 0.4s ease, transform 0.4s ease; }
.kit-toast.is-leaving { opacity: 0; transform: translate(-50%, -8px); }
@media (prefers-reduced-motion: reduce) { .kit-card.is-just-chosen { animation: none; } .kit-toast { transition: none; } }
html[data-a11y-motion="reduce"] .kit-card.is-just-chosen { animation: none; }