/*
 * Ambient Assist website.
 *
 * Dark is the default theme; [data-theme="light"] switches it. The orb is
 * drawn in CSS so it can move, and nothing loads from anywhere else: no web
 * fonts, no scripts from a CDN, no trackers.
 *
 * All four pages share every rule here. Rows of cells, cards and columns are
 * flex rows whose items have a basis, so they wrap on their own as the page
 * narrows; one query at 640 px tightens the spacing for phones.
 */

/* Theme tokens ----------------------------------------------------------- */

:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070b14;
  --panel: #0b1221;
  --raised: #0f1729;
  --line: #172033;
  --edge: #1d2740;
  --edge-strong: #2a3654;
  --text: #eef2fa;
  --text-2: #a5b1c8;
  --text-3: #7d8aa4;
  --accent: #4353f5;
  --accent-hover: #5563ff;
  --accent-text: #8e9bff;
  --seg-active: #1d2851;
  --dot: #5b8cff;
  --halo: 0.95;
  --fact: #6fd6ff;
  --action: #9aa6ff;
  --coach: #c79bff;
  --ok: #4ad39b;
  --warn: #ffb65c;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f5f9;
  --panel: #ffffff;
  --raised: #f5f7fb;
  --line: #e6eaf0;
  --edge: #dce2eb;
  --edge-strong: #cdd5e2;
  --text: #0e1430;
  --text-2: #4a5670;
  --text-3: #5e6a82;
  --accent: #4353f5;
  --accent-hover: #3645e8;
  --accent-text: #3442e0;
  --seg-active: #e3e8f6;
  --dot: #4f7cff;
  --halo: 0.6;
  --fact: #0b78b8;
  --action: #3442e0;
  --coach: #7a3fd1;
  --ok: #0b7a4f;
  --warn: #b45d00;
}

:root {
  --font: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, Menlo, monospace;
}

/* Base -------------------------------------------------------------------- */

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

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
}

.page {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: var(--accent-text);
}

a:hover {
  color: var(--text);
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 10;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: 16px;
}

.wrap {
  width: min(100% - 48px, 1120px);
  margin-inline: auto;
}

/* Small type: the tracked capitals used for eyebrows and panel labels. */

.eyebrow,
.label {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.label {
  font-size: 10.5px;
  letter-spacing: 0.22em;
}

.label-accent {
  color: var(--accent-text);
}

.label-warn {
  color: var(--warn);
}

h3 {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.code {
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 0.88em;
  overflow-wrap: anywhere;
}

/* "Coming" and the like: a small pill beside a label. */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  border-radius: 999px;
  color: var(--warn);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.eyebrow .badge {
  margin-left: 10px;
  vertical-align: 1px;
}

/* Icons, drawn inline. */

.check,
.arrow {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.check {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--accent-text);
}

.arrow {
  width: 14px;
  height: 14px;
}

/* Header ------------------------------------------------------------------ */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 28px;
}

.wordmark {
  color: var(--text);
  font-size: 21px;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.wordmark b {
  font-weight: 700;
}

.wordmark span {
  font-weight: 300;
}

.header-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 24px;
}

.nav a {
  display: inline-block;
  padding: 11px 0;
  color: var(--text-2);
  font-size: 14px;
  text-decoration: none;
}

.nav a:hover {
  color: var(--text);
}

.nav a[aria-current="page"] {
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* Segmented control ------------------------------------------------------- */

.seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--edge-strong);
  border-radius: 10px;
  background: var(--raised);
}

.seg-btn {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}

.seg-btn:hover {
  background: color-mix(in srgb, var(--seg-active) 55%, transparent);
}

[data-theme="dark"] .seg-btn[data-set-theme="dark"],
[data-theme="light"] .seg-btn[data-set-theme="light"] {
  background: var(--seg-active);
}

.seg-sm .seg-btn {
  min-height: 30px;
  padding: 0 11px;
  font-size: 13px;
}

@media (pointer: coarse) {
  .seg-btn,
  .seg-sm .seg-btn {
    min-height: 40px;
  }
}

/* Buttons ----------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-lg {
  min-height: 48px;
  padding: 0 22px;
  font-size: 15px;
}

.btn-sm {
  min-height: 40px;
  padding: 0 16px;
}

.btn-primary,
.btn-primary:hover {
  color: #fff;
}

.btn-primary {
  background: var(--accent);
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-quiet,
.btn-quiet:hover {
  color: var(--text);
}

.btn-quiet {
  border-color: var(--edge-strong);
  background: var(--raised);
}

.btn-quiet:hover {
  border-color: var(--text-3);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.motion-btn {
  min-height: 32px;
  padding: 0 2px;
  border: 0;
  background: none;
  cursor: pointer;
}

.motion-btn:hover {
  color: var(--text);
}

.when-running,
.when-paused {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.motion-btn .when-paused,
[data-motion="paused"] .motion-btn .when-running {
  display: none;
}

[data-motion="paused"] .motion-btn .when-paused {
  display: inline-flex;
}

.icon-pause {
  width: 8px;
  height: 9px;
  border-right: 2.5px solid currentColor;
  border-left: 2.5px solid currentColor;
}

.icon-play {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid currentColor;
}

.rm-note {
  display: none;
}

/* Hero -------------------------------------------------------------------- */

.hero {
  padding-top: 56px;
}

.hero-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px 56px;
  padding: clamp(28px, 5vw, 64px);
  border: 1px solid var(--edge);
  border-radius: 22px;
  background: var(--panel);
}

/* The text takes every spare pixel; the orb drops below it once the two
   no longer fit side by side. */
.hero-text {
  display: flex;
  flex: 999 1 480px;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  min-width: 0;
}

.hero h1 {
  max-width: 800px;
  font-size: clamp(38px, 5.4vw, 70px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.028em;
}

.hero-summary {
  max-width: 620px;
  color: var(--text-2);
  font-size: 18px;
  line-height: 1.55;
}

.hero-text .actions {
  padding-top: 4px;
}

.hero-note {
  color: var(--text-3);
  font-size: 13.5px;
}

.hero-orb {
  display: flex;
  flex: 1 1 220px;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.hero-orb .orb {
  font-size: 240px;
}

.hero-orb .rm-note {
  max-width: 220px;
  color: var(--text-3);
  font-size: 12.5px;
}

/* Sections ---------------------------------------------------------------- */

.section {
  padding-top: 112px;
  scroll-margin-top: 24px;
}

.section h2 {
  max-width: 760px;
  margin-top: 14px;
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.018em;
}

.lead {
  max-width: 660px;
  margin-top: 14px;
  color: var(--text-2);
  font-size: 16px;
}

.panel {
  margin-top: 32px;
  border: 1px solid var(--edge);
  border-radius: 22px;
  background: var(--panel);
  overflow: hidden;
}

.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 20px 22px 18px;
  border-bottom: 1px solid var(--line);
}

.panel-foot {
  padding: 18px 22px;
  border-top: 1px solid var(--line);
  color: var(--text-2);
  font-size: 13.5px;
}

/*
 * Rows of cells. The row's background is the divider colour and a 1px gap
 * lets it show between cells, so the lines follow however the cells wrap.
 */
.cells,
.value-cols,
.show-cols,
.steps,
.promise-grid,
.qa-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line);
}

.cells {
  margin-top: 32px;
  border: 1px solid var(--edge);
  border-radius: 22px;
  overflow: hidden;
}

.cell {
  display: flex;
  flex: 1 1 240px;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 26px 24px 28px;
  background: var(--panel);
}

.cell-text {
  color: var(--text-2);
}

.cell-point {
  gap: 8px;
  padding: 24px;
}

/* Points with a check; tone "doing" turns the checks green. */

.ticks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.6;
}

.ticks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.ticks-doing .check,
.tick-doing .check {
  color: var(--ok);
}

/* Who it's for: a card per audience. */

.audiences {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 32px;
}

.audience {
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--edge);
  border-radius: 22px;
  background: var(--panel);
}

.audience-top,
.tier-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.audience h3,
.value-col h3,
.tier-price {
  font-size: 22px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.audience-text,
.value-text,
.tier-text {
  color: var(--text-2);
}

.go {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  min-height: 44px;
  margin-top: auto;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

/* Knowing and Doing, side by side. */

.value-col {
  display: flex;
  flex: 1 1 400px;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 30px 28px 32px;
  background: var(--panel);
}

.value-col h3 {
  font-size: 24px;
}

.value-col .ticks {
  margin-top: 6px;
}

.tone-knowing > .label {
  color: var(--accent-text);
}

.tone-doing > .label {
  color: var(--ok);
}

.value .panel-foot {
  padding: 16px 24px;
  color: var(--text-3);
}

/* The examples: a panel of columns. */

.show-col {
  display: flex;
  flex: 1 1 380px;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 22px;
  background: var(--panel);
}

.show-col.is-wide {
  flex: 3 1 420px;
}

.show-col.is-side {
  flex: 2 1 300px;
  gap: 0;
  padding: 0;
}

.live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.live-dot {
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  animation: dot-pulse 2.4s ease-out infinite;
}

.show-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
}

.transcript {
  display: grid;
  gap: 16px;
}

.transcript li {
  display: grid;
  gap: 2px;
}

.who {
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 12px;
}

.who-me {
  color: var(--accent-text);
}

.cards {
  display: grid;
  gap: 10px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--raised);
}

.card-exchange,
.card-offer {
  gap: 10px;
  padding: 16px 18px;
}

.card-offer {
  border-color: var(--edge-strong);
}

.card-offer .card-text {
  font-size: 16px;
}

.card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.card-note {
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.card-source {
  color: var(--text-3);
  font-size: 12.5px;
}

/* The example's Accept / Not now: drawn, not live. */
.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 2px;
}

.choices .btn {
  cursor: default;
  pointer-events: none;
}

.choices .btn-quiet {
  background: var(--panel);
}

.line {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.lines {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.tag {
  flex: none;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tag::before {
  content: "[";
}

.tag::after {
  content: "]";
}

.tag-fact,
.tag-answer {
  color: var(--fact);
}

.tag-action,
.tag-you,
.tag-draft {
  color: var(--action);
}

.tag-coach {
  color: var(--coach);
}

.tag-work,
.tag-offer {
  color: var(--ok);
}

.tag-headsup {
  color: var(--warn);
}

.verdict {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.verdict-ok {
  color: var(--ok);
}

.verdict-warn {
  color: var(--warn);
}

.verdict-muted {
  color: var(--text-3);
}

/* A question asked and its answer, with the answer's sources. */

.chat {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ask {
  align-self: flex-end;
  max-width: min(520px, 100%);
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--seg-active);
}

.answer + .ask {
  margin-top: 6px;
}

.answer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 760px;
  padding: 16px 18px;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--raised);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12.5px;
}

.chips-label {
  color: var(--text-3);
}

.chip {
  padding: 1px 9px;
  border: 1px solid var(--edge-strong);
  border-radius: 999px;
  color: var(--text-2);
}

/* A wiki page. */

.wiki {
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--raised);
  overflow: hidden;
}

.wiki-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--edge);
}

.wiki-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 20px;
  font-size: 14px;
}

.wiki-title {
  font-size: 20px;
  font-weight: 650;
  line-height: 1.3;
}

.wiki-kind {
  color: var(--text-3);
  font-size: 13px;
}

.wiki-h {
  margin-top: 8px;
}

.wiki-list {
  display: grid;
  gap: 4px;
  padding-left: 18px;
  list-style: disc;
}

.wiki-src {
  color: var(--text-3);
  font-size: 12.5px;
}

/* Side points, stacked beside an example. */

.point {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px;
}

.point + .point {
  border-top: 1px solid var(--line);
}

/* Why: what it's built on, and the quotes. */

.quotes {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 24px;
}

.quote {
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 26px 28px;
  border: 1px solid var(--edge);
  border-radius: 22px;
}

.quote.is-placeholder {
  border: 1px dashed var(--edge-strong);
}

.quote blockquote {
  color: var(--text-2);
  font-size: 18px;
  line-height: 1.5;
}

.quote figcaption {
  color: var(--text-3);
  font-size: 13.5px;
}

/* How it works: the steps, then the promises or a button. */

.step {
  display: flex;
  flex: 1 1 300px;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 28px 26px 30px;
  background: var(--panel);
}

.step-n {
  color: var(--accent-text);
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
}

.step h3 {
  margin-top: 8px;
}

.step p {
  color: var(--text-2);
}

.promise-strip {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 24px 24px;
}

.promise-strip .ticks {
  flex-flow: row wrap;
  gap: 10px 28px;
  padding-top: 0;
  border-top: 0;
  color: var(--text);
}

.promise-strip .ticks li {
  gap: 8px;
}

.plan-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 24px;
}

.plan-cta p {
  color: var(--text-3);
  font-size: 13.5px;
}

/* Promises. */

.promise {
  display: flex;
  flex: 1 1 300px;
  gap: 14px;
  min-width: 0;
  padding: 24px;
  background: var(--panel);
}

.promise .check {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--ok);
}

.promise h3,
.qa h3,
.faq-more h3 {
  font-size: 16px;
  line-height: 1.35;
}

.promise p,
.qa p,
.faq-more p {
  color: var(--text-2);
  font-size: 14px;
}

.promise p {
  margin-top: 4px;
}

/* The short version. */

.story {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(28px, 4.5vw, 56px);
  border: 1px solid var(--edge-strong);
  border-radius: 22px;
  background: var(--raised);
}

.story .eyebrow {
  color: var(--accent-text);
}

.story h2 {
  margin-top: 0;
}

.story-text {
  max-width: 820px;
  color: var(--text-2);
  font-size: 17px;
  line-height: 1.7;
}

/* Pricing. */

.tiers {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 32px;
}

.tier {
  display: flex;
  flex: 1 1 300px;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 30px 28px;
  border: 1px solid var(--edge);
  border-radius: 22px;
  background: var(--panel);
}

.tier-featured {
  border-color: var(--edge-strong);
}

.tier-featured .tier-top .label {
  color: var(--accent-text);
}

.tier .ticks {
  padding-top: 16px;
}

.tier .btn {
  align-self: flex-start;
  margin-top: auto;
}

/* FAQ. */

.qa {
  display: flex;
  flex: 1 1 400px;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 24px;
  background: var(--panel);
}

.faq-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 20px 24px;
  color: var(--text);
}

.faq-more p {
  margin-top: 4px;
}

/* The last word: the orb, the headline again, the buttons. */

.final {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: clamp(36px, 6vw, 72px) clamp(24px, 4vw, 56px);
  border: 1px solid var(--edge);
  border-radius: 22px;
  background: var(--panel);
  text-align: center;
}

.final h2 {
  max-width: 720px;
  margin-top: 0;
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.022em;
}

.final .lead {
  max-width: 560px;
  margin-top: 0;
}

.final .actions {
  justify-content: center;
  padding-top: 4px;
}

.fine {
  color: var(--text-3);
  font-size: 13.5px;
}

/* Footer ------------------------------------------------------------------ */

.site-footer {
  margin-top: 96px;
  padding-bottom: 48px;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px 32px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-tagline {
  color: var(--text-2);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.notes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 24px;
  color: var(--text-3);
  font-size: 13px;
}

/* The orb ----------------------------------------------------------------- */

/*
 * One em is the whole orb, so font-size sets its size. The sphere stays still
 * while the ring and its satellite turn together; the ring's colours ride
 * along, which keeps the gap and its two ends on either side of the
 * satellite, the way the logo draws them.
 */
.orb {
  --w: max(1.4px, 0.014em);
  --sat: max(3px, 0.092em);
  position: relative;
  flex: none;
  width: 1em;
  height: 1em;
  font-size: 300px;
  line-height: 0;
}

.orb span,
.orb i {
  position: absolute;
  display: block;
}

.orb-halo {
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(70, 118, 255, 0.5), rgba(96, 76, 255, 0.26) 52%, rgba(150, 80, 255, 0.1) 74%, rgba(150, 80, 255, 0));
  opacity: var(--halo);
  animation: orb-pulse 4.8s ease-in-out infinite;
}

.orb-spin {
  inset: 0;
  animation: orb-spin 4.8s linear infinite;
}

/* The ring's colour field; its gap sits between 64deg and 92deg. */
.orb-ring,
.orb-ring-glow i {
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 92deg, #ffd2f6 0deg, #f38af0 16deg, #d45cf4 45deg, #9848fa 80deg, #6a40ff 105deg, rgba(80, 64, 255, 0.4) 128deg, rgba(60, 84, 255, 0.1) 144deg, rgba(56, 104, 255, 0.55) 162deg, #3a6cff 184deg, #3f86ff 232deg, #58a6ff 272deg, #9ad8ff 312deg, #c8ecff 332deg, transparent 332deg);
}

.orb-ring {
  -webkit-mask: radial-gradient(closest-side, transparent calc(80% - var(--w) / 2 - 0.5px), #000 calc(80% - var(--w) / 2 + 0.5px), #000 calc(80% + var(--w) / 2 - 0.5px), transparent calc(80% + var(--w) / 2 + 0.5px));
  mask: radial-gradient(closest-side, transparent calc(80% - var(--w) / 2 - 0.5px), #000 calc(80% - var(--w) / 2 + 0.5px), #000 calc(80% + var(--w) / 2 - 0.5px), transparent calc(80% + var(--w) / 2 + 0.5px));
}

.orb-ring-glow {
  inset: 0;
  opacity: 0.85;
  filter: blur(max(2px, 0.022em));
}

.orb-ring-glow i {
  -webkit-mask: radial-gradient(closest-side, transparent calc(80% - var(--w) * 3), #000 calc(80% - var(--w) / 2), #000 calc(80% + var(--w) / 2), transparent calc(80% + var(--w) * 3));
  mask: radial-gradient(closest-side, transparent calc(80% - var(--w) * 3), #000 calc(80% - var(--w) / 2), #000 calc(80% + var(--w) / 2), transparent calc(80% + var(--w) * 3));
}

/* Round ends for the ring, centred on the arc where the gap begins. */
.orb-cap {
  width: var(--w);
  height: var(--w);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.orb-cap-a {
  top: 51.396%;
  left: 89.976%;
  background: #ffd2f6;
}

.orb-cap-b {
  top: 32.465%;
  left: 85.952%;
  background: #c8ecff;
}

/* The satellite turns back against the ring so its light stays top-left. */
.orb-sat {
  top: 41.684%;
  left: 89.126%;
  width: var(--sat);
  height: var(--sat);
  margin: calc(var(--sat) / -2) 0 0 calc(var(--sat) / -2);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffffff 0%, #d9f6ff 22%, #bcc8ff 56%, #f29be9 100%);
  box-shadow: 0 0 max(2px, 0.018em) rgba(255, 255, 255, 0.8), 0 0 max(5px, 0.06em) rgba(170, 140, 255, 0.75);
  animation: orb-spin 4.8s linear infinite reverse;
}

.orb-core {
  top: 23%;
  left: 23%;
  width: 54%;
  height: 54%;
  border-radius: 50%;
  /* Top to bottom: lavender light at the top right, a pink rim on the right,
     indigo depth underneath, a cyan rim on the top left, the blue body. */
  background:
    radial-gradient(55% 45% at 72% 14%, rgba(246, 232, 255, 0.8) 0%, rgba(226, 204, 255, 0.36) 42%, rgba(210, 180, 255, 0) 76%),
    radial-gradient(100% 100% at 22% 30%, rgba(255, 110, 230, 0) 56%, rgba(255, 112, 228, 0.85) 78%, rgba(255, 214, 246, 0.95) 92%),
    radial-gradient(80% 55% at 42% 102%, rgba(20, 8, 110, 0.7) 0%, rgba(20, 8, 110, 0) 72%),
    radial-gradient(100% 100% at 74% 80%, rgba(90, 225, 255, 0) 56%, rgba(92, 226, 255, 0.85) 78%, rgba(214, 255, 255, 0.95) 92%),
    linear-gradient(140deg, #2f9bff 0%, #2956ff 26%, #2629e2 55%, #4419cc 78%, #9a34ee 100%);
  box-shadow:
    inset 0 0 max(1px, 0.01em) rgba(255, 255, 255, 0.4),
    -0.012em -0.012em max(4px, 0.06em) rgba(80, 200, 255, 0.45),
    0.012em 0.016em max(4px, 0.06em) rgba(236, 100, 240, 0.4),
    0 0 max(8px, 0.16em) rgba(92, 80, 255, 0.35);
}

.orb-24 {
  font-size: 24px;
}

.orb-32 {
  font-size: 32px;
}

/* Small orbs keep their ring crisp: less bloom, a steadier halo. */
.orb-24 .orb-ring-glow,
.orb-32 .orb-ring-glow {
  opacity: 0.45;
}

.orb-24 .orb-halo,
.orb-32 .orb-halo {
  inset: 18%;
}

.orb-48 {
  font-size: 48px;
}

.orb-64 {
  font-size: 64px;
}

.orb-112 {
  font-size: 112px;
}

@keyframes orb-spin {
  to {
    transform: rotate(1turn);
  }
}

@keyframes orb-pulse {
  0%,
  100% {
    opacity: calc(var(--halo) * 0.7);
    transform: scale(0.96);
  }

  50% {
    opacity: var(--halo);
    transform: scale(1.04);
  }
}

@keyframes dot-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent);
  }

  70%,
  100% {
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--ok) 0%, transparent);
  }
}

/*
 * Motion: at rest when the system asks for less, unless the visitor plays it;
 * paused whenever the visitor pauses it. data-motion sits on <html>.
 */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .motion,
  .motion * {
    animation-play-state: paused;
  }

  .motion-btn .when-running {
    display: none;
  }

  .motion-btn .when-paused {
    display: inline-flex;
  }

  .rm-note {
    display: block;
  }

  [data-motion="playing"] .motion,
  [data-motion="playing"] .motion * {
    animation-play-state: running;
  }

  [data-motion="playing"] .motion-btn .when-running {
    display: inline-flex;
  }

  [data-motion="playing"] .motion-btn .when-paused,
  [data-motion="playing"] .rm-note {
    display: none;
  }
}

[data-motion="paused"] .motion,
[data-motion="paused"] .motion * {
  animation-play-state: paused !important;
}

/* The app frames -----------------------------------------------------------
 *
 * Copies of the app's screens. The desktop app wears its own tokens
 * (webui/src/theme.js), set on .dt for each theme; the web account page
 * wears the site's own, which meeting_copilot/admin_ui/admin.css shares.
 * Both follow the site's dark/light switch. What a frame shows at a time
 * is chosen with the hidden attribute, which site.js moves.
 */

.frames {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 32px;
}

.frame-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.frame {
  border: 1px solid var(--edge);
  border-radius: 22px;
  background: var(--panel);
  overflow: hidden;
}

.frame [hidden] {
  display: none !important;
}

.frame-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 14px 22px 13px;
  border-bottom: 1px solid var(--line);
}

.frame-who {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

.frame-ex {
  padding: 1px 9px;
  border: 1px solid var(--edge-strong);
  border-radius: 999px;
  color: var(--text-2);
  letter-spacing: 0.16em;
}

.frame-at {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.frame-reset {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.frame-reset:hover {
  color: var(--text);
}

.frame-body {
  min-width: 0;
}

.frame-with-call .frame-body {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line);
}

.frame-with-call .frame-app {
  flex: 999 1 600px;
  min-width: 0;
  background: var(--panel);
}

.frames-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-top: 16px;
  padding: 0 4px;
  color: var(--text-2);
  font-size: 13.5px;
}

/* Side points under a frame sit in a row. */
.frames + .panel.show {
  margin-top: 20px;
}

.frames + .panel .show-col.is-side {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line);
}

.frames + .panel .point {
  flex: 1 1 260px;
  background: var(--panel);
}

.frames + .panel .point + .point {
  border-top: 0;
}

/* A journal citation as what it points to, in a chip beside the words
   (the account page's .cite; the desktop's below, Cite.jsx). */
.cite {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: var(--raised);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
  white-space: nowrap;
}

/* The orb at rest, as the app draws its avatars and marks. */
.orb-still {
  display: block;
}

.orb-still .orb-halo,
.orb-still .orb-spin,
.orb-still .orb-sat {
  animation: none;
}

.orb-still .orb-halo {
  inset: 18%;
  opacity: calc(var(--halo) * 0.7);
  transform: scale(0.96);
}

.orb-still .orb-ring-glow {
  opacity: 0.45;
}

.orb-20 {
  font-size: 20px;
}

.orb-26 {
  font-size: 26px;
}

.orb-34 {
  font-size: 34px;
}

.orb-42 {
  font-size: 42px;
}

/* A plain call window, and what is said in it. */

.call {
  display: flex;
  flex: 1 1 300px;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 22px;
  background: var(--panel);
}

.call-win {
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--raised);
  overflow: hidden;
}

.call-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--edge);
  font-size: 12.5px;
}

.call-lights {
  display: inline-flex;
  gap: 5px;
}

.call-lights i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--edge-strong);
}

.call-title {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}

.call-clock {
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.call-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px;
}

.call-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  background: var(--seg-active);
  box-shadow: inset 0 0 0 2px transparent;
  transition: box-shadow 0.2s ease;
}

.call-tile.is-speaking {
  box-shadow: inset 0 0 0 2px var(--ok);
}

.call-av {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4b5578, #1c2444);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.call-name {
  max-width: 100%;
  padding: 0 6px;
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.call-ctrls {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 2px 10px 12px;
}

.call-ctrls span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--edge);
  color: var(--text-2);
}

.call-ctrls .call-leave {
  background: #e5484d;
  color: #fff;
}

.call-said {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.call-lines {
  display: grid;
  gap: 14px;
}

.call-lines li {
  display: grid;
  gap: 2px;
}

.call-lines b {
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
}

.call-lines li.is-now b {
  color: var(--ok);
}

/* A step of the live sequence waits its turn, then lands. */
.is-pending {
  display: none !important;
}

.is-landing {
  animation: frame-land 0.35s ease;
}

@keyframes frame-land {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* The desktop app (webui/src) ---------------------------------------------- */

.dt {
  --d-surface: #0d1330;
  --d-surface-2: #141b3b;
  --d-border: #1e2750;
  --d-border-2: #26305c;
  --d-divider: #1a2247;
  --d-text: #e8ebf7;
  --d-text-2: #9aa3c4;
  --d-text-3: #6a7397;
  --d-track-off: #2e3968;
  --d-accent: color-mix(in srgb, #4353f5 90%, #fff);
  --d-tint: color-mix(in srgb, var(--d-accent) 30%, #0d1330);
  display: flex;
  flex-direction: column;
  height: 640px;
  background: var(--d-surface);
  color: var(--d-text);
  font-size: 13.5px;
  line-height: 1.5;
}

[data-theme="light"] .dt {
  --d-surface: #fff;
  --d-surface-2: #f3f4f9;
  --d-border: #eceef5;
  --d-border-2: #e6e9f2;
  --d-divider: #f1f2f8;
  --d-text: #0e1430;
  --d-text-2: #5b6485;
  --d-text-3: #9199b3;
  --d-track-off: #cfd4e3;
  --d-accent: #4353f5;
  --d-tint: color-mix(in srgb, #4353f5 10%, #fff);
}

.dt .cite {
  border-color: var(--d-border-2);
  background: var(--d-surface-2);
  color: var(--d-text-2);
  font-size: 11.5px;
}

/* The frames' buttons start bare; each class draws its own. */
:where(.dt, .wb) button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: inherit;
}

.dfill {
  flex: 1;
}

.dbar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 12px 0 16px;
  border-bottom: 1px solid var(--d-border);
}

.dbar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.dbar-logo b {
  font-weight: 700;
}

.dbar-theme {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--d-text-3);
  cursor: pointer;
}

.dbar-theme:hover {
  color: var(--d-text);
}

.dbar-theme .ic + .ic,
[data-theme="light"] .dbar-theme .ic:first-child {
  display: none;
}

[data-theme="light"] .dbar-theme .ic + .ic {
  display: block;
}

.dt-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* The sidebar, and the slim rail it folds to. */

.dside {
  display: flex;
  flex: none;
  flex-direction: column;
  width: 232px;
  min-height: 0;
  border-right: 1px solid var(--d-border);
}

.dside-top {
  display: flex;
  gap: 8px;
  padding: 14px 14px 8px;
}

.dsearch {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border-radius: 9px;
  background: var(--d-surface-2);
  color: var(--d-text-3);
  font-size: 13px;
}

.dsearch span {
  flex: 1;
}

.dsearch kbd {
  padding: 1px 5px;
  border: 1px solid var(--d-border-2);
  border-radius: 5px;
  font-family: inherit;
  font-size: 10.5px;
}

.dside-fold,
.drail-fold {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--d-border-2);
  border-radius: 9px;
  color: var(--d-text-3);
}

.dside-card {
  padding: 4px 14px;
}

.dcard {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border-radius: 11px;
  background: var(--d-surface-2);
  box-shadow: inset 0 0 0 1px var(--d-border);
  color: var(--d-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

p.dcard {
  cursor: default;
}

.dcard-name {
  flex: 1;
}

.dcard .ic {
  color: var(--d-text-3);
}

.dcard.is-on {
  background: color-mix(in srgb, var(--d-accent) 10%, var(--d-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--d-accent) 30%, transparent);
}

.dside-list {
  flex: 1;
  padding: 4px 10px 10px;
  overflow-y: auto;
}

.dside-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 8px 6px;
  color: var(--d-text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.dmrow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 36px;
  padding: 0 8px;
  border-radius: 8px;
  color: var(--d-text);
  font-size: 13.5px;
  font-weight: 500;
}

button.dmrow {
  cursor: pointer;
}

button.dmrow:hover {
  background: var(--d-surface-2);
}

.dmrow span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dmrow .ic:last-child {
  color: var(--d-text-3);
}

.dmrow.is-on {
  background: var(--d-tint);
  color: var(--d-accent);
  font-weight: 600;
}

.dmrow.is-live i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
}

.dmrow.is-live b {
  font-size: 10.5px;
  letter-spacing: 0.05em;
}

.dside-me {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 10px 10px;
  padding: 8px;
  font-weight: 600;
}

.dside-me span:nth-child(2) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dside-me .ic {
  color: var(--d-text-3);
}

.dav {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4b5578, #1c2444);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
}

.dav-on::after {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--d-surface);
  border-radius: 50%;
  background: #22c55e;
  content: "";
}

.drail {
  display: none;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 54px;
  padding: 14px 0;
  border-right: 1px solid var(--d-border);
}

.drail-fold {
  width: 34px;
  height: 34px;
}

/* The screen: its head, its tabs, the tab shown. */

.dt-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.dscreen,
.dpanes,
.dpane {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.dah {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  padding: 16px 22px 12px;
}

.dah p {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.dmore {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--d-border-2);
  border-radius: 8px;
  color: var(--d-text-2);
}

.dtabs {
  display: flex;
  flex: none;
  gap: 24px;
  padding: 0 22px;
  border-bottom: 1px solid var(--d-border);
  overflow-x: auto;
  scrollbar-width: none;
}

.dtabs::-webkit-scrollbar {
  display: none;
}

.dtab {
  display: flex;
  flex: none;
  align-items: center;
  gap: 7px;
  margin-bottom: -1px;
  padding: 2px 0 11px;
  border-bottom: 2px solid transparent;
  color: var(--d-text-2);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.dtab:hover {
  color: var(--d-text);
}

.dtab[aria-selected="true"] {
  border-bottom-color: var(--d-accent);
  color: var(--d-accent);
}

.dtab:focus-visible {
  outline-offset: -2px;
}

/* The chat: a feed of cards and messages, the box under it. */

.dfeed {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  padding: 20px 22px;
  overflow-y: auto;
}

.dday-div {
  align-self: center;
  color: var(--d-text-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.dc {
  display: flex;
  align-self: stretch;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--c-border);
  border-radius: 13px;
  background: var(--c-bg);
}

.dc-ic {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--c-ic-bg);
  color: var(--c-ic);
}

.dc-col {
  flex: 1;
  min-width: 0;
}

.dc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  margin-bottom: 3px;
}

.dc-label {
  color: var(--c-ic);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.dc-time {
  color: var(--d-text-3);
  font-size: 11.5px;
}

.dc-text {
  font-size: 13.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.dc-fact {
  --c-ic: #1f9254;
  --c-ic-bg: color-mix(in srgb, #22c55e 16%, var(--d-surface));
  --c-bg: color-mix(in srgb, #22c55e 7%, var(--d-surface));
  --c-border: color-mix(in srgb, #22c55e 22%, var(--d-surface));
}

.dc-note {
  --c-ic: var(--d-text-2);
  --c-ic-bg: var(--d-surface-2);
  --c-bg: var(--d-surface);
  --c-border: var(--d-border-2);
}

.dc-coach {
  --c-ic: var(--d-accent);
  --c-ic-bg: color-mix(in srgb, var(--d-accent) 14%, var(--d-surface));
  --c-bg: color-mix(in srgb, var(--d-accent) 7%, var(--d-surface));
  --c-border: color-mix(in srgb, var(--d-accent) 26%, var(--d-surface));
}

.dc-action,
.dac {
  --c-ic: #f79009;
  --c-ic-bg: color-mix(in srgb, #f79009 16%, var(--d-surface));
  --c-bg: color-mix(in srgb, #f79009 7%, var(--d-surface));
  --c-border: color-mix(in srgb, #f79009 24%, var(--d-surface));
}

.dc-activity {
  --c-ic: #8b5cf6;
  --c-ic-bg: color-mix(in srgb, #8b5cf6 14%, var(--d-surface));
  --c-bg: color-mix(in srgb, #8b5cf6 6%, var(--d-surface));
  --c-border: color-mix(in srgb, #8b5cf6 22%, var(--d-surface));
}

.dc-work {
  --c-ic: #d97706;
  --c-ic-bg: color-mix(in srgb, #f59e0b 16%, var(--d-surface));
  --c-bg: color-mix(in srgb, #f59e0b 6%, var(--d-surface));
  --c-border: color-mix(in srgb, #f59e0b 22%, var(--d-surface));
}

.dc-headsup {
  --c-ic: #b7791f;
  --c-ic-bg: color-mix(in srgb, #f5b400 18%, var(--d-surface));
  --c-bg: color-mix(in srgb, #f5b400 8%, var(--d-surface));
  --c-border: color-mix(in srgb, #f5b400 30%, var(--d-surface));
}

.dm {
  display: flex;
  gap: 11px;
  max-width: 620px;
}

.dm-ai {
  align-self: flex-start;
}

.dm-you {
  flex-direction: row-reverse;
  align-self: flex-end;
}

.dm-col {
  min-width: 0;
}

.dm-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}

.dm-you .dm-meta {
  justify-content: flex-end;
}

.dm-meta b {
  font-size: 13px;
  font-weight: 600;
}

.dm-meta span {
  color: var(--d-text-3);
  font-size: 12px;
}

.dm-bubble {
  padding: 11px 14px;
  border: 1px solid var(--d-border-2);
  border-radius: 12px;
  background: var(--d-surface);
  font-size: 14px;
  line-height: 1.55;
}

.dm-you .dm-bubble {
  border-color: transparent;
  background: color-mix(in srgb, var(--d-accent) 10%, var(--d-surface));
}

.dfeed-empty {
  align-self: center;
  margin-top: 40px;
  color: var(--d-text-3);
  font-size: 12.5px;
}

.dcomp {
  flex: none;
  padding: 10px 22px 18px;
}

.dcomp-box {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 7px 0 16px;
  border: 1px solid var(--d-border-2);
  border-radius: 13px;
}

.dcomp-ph {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--d-text-3);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dcomp-send {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--d-accent);
  color: #fff;
}

/* A tab with a side column: the middle scrolls, the column beside it. */

.dsplit {
  display: flex;
  flex: 1;
  min-height: 0;
}

.dcenter {
  flex: 1;
  min-width: 0;
  padding: 20px 24px;
  overflow-y: auto;
}

.dnarrow {
  max-width: 640px;
  margin: 0 auto;
}

.dwide {
  max-width: 720px;
  margin: 0 auto;
}

.dcol {
  flex: none;
  width: 264px;
  padding: 20px 18px;
  border-left: 1px solid var(--d-border);
  overflow-y: auto;
}

.dcol-flush {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.dcol-narrow {
  width: 220px;
}

.dcol-head {
  flex: none;
  padding: 14px 16px 8px;
}

.dcol-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
}

.dcol-sub {
  margin-top: 2px;
  color: var(--d-text-3);
  font-size: 11.5px;
}

.dscout {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--d-border);
}

.dcol-head-plain {
  padding-bottom: 2px;
}

.dcol-list {
  flex: 1;
  padding: 2px 16px 16px;
  overflow-y: auto;
}

.dcol-note {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--d-divider);
  color: var(--d-text-3);
  font-size: 12px;
  line-height: 1.6;
}

.dlink {
  display: block;
  margin-top: 6px;
  padding: 0;
  color: var(--d-accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.dday-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 16px;
}

.dday-title {
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.dtoday {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--d-tint);
  color: var(--d-accent);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.dday-count {
  color: var(--d-text-3);
  font-size: 12px;
}

.dempty {
  padding: 44px 0;
  color: var(--d-text-3);
  text-align: center;
}

.dempty p {
  margin-top: 10px;
  font-size: 13.5px;
}

.dstack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The Timeline tab. */

.dtl {
  position: relative;
}

.dtl::before {
  position: absolute;
  top: 8px;
  bottom: 14px;
  left: 78px;
  width: 2px;
  border-radius: 1px;
  background: var(--d-divider);
  content: "";
}

.dtl-row {
  display: grid;
  grid-template-columns: 64px 30px minmax(0, 1fr);
  padding-bottom: 16px;
}

.dtl-time {
  padding-top: 3px;
  color: var(--d-text-3);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.dtl-dot {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: 11px;
  height: 11px;
  margin-top: 5px;
  border-radius: 50%;
  background: #8b5cf6;
  box-shadow: 0 0 0 3px var(--d-surface);
}

.dtl-dot-meeting {
  border-radius: 3px;
  background: var(--d-accent);
}

.dtl-act {
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, #8b5cf6 22%, var(--d-surface));
  border-radius: 11px;
  background: color-mix(in srgb, #8b5cf6 6%, var(--d-surface));
}

.dtl-act b {
  display: block;
  margin-bottom: 2px;
  color: #8b5cf6;
  font-size: 10.5px;
  letter-spacing: 0.04em;
}

.dtl-meet {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--d-accent) 25%, var(--d-surface));
  border-radius: 11px;
  background: var(--d-tint);
  color: var(--d-accent);
}

.dtl-meet-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.dtl-meet-text b {
  overflow: hidden;
  color: var(--d-text);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dtl-meet-text span,
.dtl-meet .ic:last-child {
  color: var(--d-text-3);
  font-size: 11.5px;
}

/* The month calendar. */

.dcal-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.dcal-month {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
}

.dcal-step {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--d-border-2);
  border-radius: 7px;
  color: var(--d-text-2);
}

.dcal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.dcal-dow {
  margin-bottom: 4px;
}

.dcal-dow span {
  padding: 2px 0;
  color: var(--d-text-3);
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
}

.dcal-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 34px;
  border-radius: 8px;
  color: var(--d-text-3);
  font-size: 12.5px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
}

.dcal-day span {
  line-height: 1;
}

.dcal-day i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
}

.dcal-day:hover {
  background: var(--d-surface-2);
}

.dcal-day.has {
  color: var(--d-text);
}

.dcal-day.has i {
  background: #8b5cf6;
}

.dcal-day.today {
  box-shadow: inset 0 0 0 1.5px var(--d-accent);
  font-weight: 700;
}

.dcal-day[aria-pressed="true"] {
  background: var(--d-accent);
  box-shadow: none;
  color: #fff;
  font-weight: 700;
}

.dcal-day[aria-pressed="true"] i {
  background: #fff;
}

.dcal-day.has[aria-pressed="false"] i {
  background: #8b5cf6;
}

/* An action item and its checkbox. */

.dac {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--c-border);
  border-radius: 13px;
  background: var(--c-bg);
}

.dac.is-done {
  opacity: 0.72;
}

.dac-check {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 2px solid var(--d-track-off);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
}

.dac-check .ic {
  opacity: 0;
}

.dac.is-done .dac-check {
  border-color: #f79009;
  background: #f79009;
}

.dac.is-done .dac-check .ic {
  opacity: 1;
}

.dac .dac-done,
.dac.is-done .dac-open {
  display: none;
}

.dac.is-done .dac-done {
  display: inline;
}

.dac.is-done .dac-text {
  text-decoration: line-through;
}

/* The Wiki tab. */

.dwiki {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.dwbar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-bottom: 1px solid var(--d-border);
}

.dselect {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--d-border-2);
  border-radius: 8px;
  background: var(--d-surface);
  font-size: 12.5px;
  font-weight: 600;
}

.dtool {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--d-border-2);
  border-radius: 8px;
  color: var(--d-text-2);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.dtool:disabled {
  opacity: 0.45;
  cursor: default;
}

.dwpath {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--d-text-3);
  font-family: var(--mono);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dwbody {
  flex: 1;
  min-height: 0;
  padding: 18px 26px 22px;
  overflow-y: auto;
}

.dwpage {
  max-width: 680px;
  margin: 0 auto;
}

.dchips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.dchip {
  padding: 3px 9px;
  border: 1px solid var(--d-border-2);
  border-radius: 999px;
  background: var(--d-surface-2);
  color: var(--d-text-2);
  font-size: 11px;
  font-weight: 600;
}

.dchip span {
  color: var(--d-text-3);
}

.dmd {
  font-size: 13.5px;
  line-height: 1.65;
}

.dmd-h1 {
  margin: 2px 0 8px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.dmd-h2 {
  margin: 16px 0 6px;
  font-size: 15.5px;
  font-weight: 700;
}

.dmd p {
  margin: 0 0 8px;
}

.dmd-list {
  margin: 4px 0 8px;
  padding-left: 22px;
  list-style: disc;
}

.dmd-list li {
  margin: 3px 0;
}

.dwlink,
.dt a[data-go] {
  padding: 0;
  color: var(--d-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* The Intelligence tab. */

.din-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.dhz {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 4px 0 10px;
  border: 1px solid var(--d-border-2);
  border-radius: 999px;
  color: var(--d-text-2);
  font-size: 11.5px;
}

.dhz b {
  font-weight: 600;
}

.dhz span {
  color: var(--d-text-3);
}

.dhz .dhz-run {
  display: flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--d-tint);
  color: var(--d-accent);
  font-size: 10.5px;
  font-weight: 700;
}

.dsec {
  margin-top: 12px;
  padding: 14px 18px;
  border: 1px solid var(--d-border-2);
  border-radius: 14px;
}

.dsec-head {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 8px;
}

.dsec-ic {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--c) 14%, var(--d-surface));
  color: var(--c);
}

.dsec-col {
  flex: 1;
  min-width: 0;
}

.dsec-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 9px;
}

.dsec-title b {
  font-size: 15px;
}

.dsec-title span {
  color: var(--d-text-3);
  font-size: 11.5px;
}

.dsec-desc {
  margin-top: 1px;
  color: var(--d-text-2);
  font-size: 12px;
}

.dsec-routines,
.dsec-progress {
  --c: #2563eb;
}

.dsec-preferences,
.dsec-decisions {
  --c: #16a34a;
}

.dsec-approaches,
.dsec-practices {
  --c: #8b5cf6;
}

.dsec-risks {
  --c: #f79009;
}

.dacq-day {
  margin: 12px 0 7px;
  color: var(--d-text-3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.dacq {
  margin-bottom: 8px;
  padding: 7px 10px 8px;
  border-left: 3px solid var(--c);
  border-radius: 4px 9px 9px 4px;
  background: color-mix(in srgb, var(--c) 4%, var(--d-surface));
}

.dacq-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  margin-bottom: 2px;
  font-size: 10.5px;
}

.dacq-meta b {
  color: var(--c);
  text-transform: uppercase;
}

.dacq-meta span {
  color: var(--d-text-3);
}

.dacq-text {
  font-size: 12.5px;
  line-height: 1.5;
}

/* The Work tab. */

.dwk-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 9px;
  margin-bottom: 4px;
}

.dwk-h b {
  font-size: 15px;
}

.dwk-h span {
  color: var(--d-text-2);
  font-size: 12px;
}

.dwk-h-jobs {
  margin-top: 24px;
}

.dwk-offer {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 10px;
  padding: 14px 18px;
  border: 1px solid var(--d-border-2);
  border-radius: 14px;
}

.dwk-ic {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: color-mix(in srgb, #f79009 14%, var(--d-surface));
  color: #f79009;
}

.dwk-col {
  flex: 1;
  min-width: 0;
}

.dwk-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 9px;
  font-size: 14px;
  line-height: 1.45;
}

.dwk-why {
  margin-top: 3px;
  color: var(--d-text-2);
  font-size: 12.5px;
}

.dwk-col .dlink {
  font-size: 11.5px;
}

.dwk-details {
  margin-top: 2px;
  padding-left: 10px;
  border-left: 3px solid var(--d-border-2);
  color: var(--d-text-2);
  font-size: 12.5px;
}

.dwk-dl {
  margin-top: 7px;
  color: var(--d-text-3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.dwk-details ul {
  padding-left: 18px;
  list-style: disc;
}

.dwk-acts {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.dpill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--d-tint);
  color: var(--d-accent);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

button.dpill {
  cursor: pointer;
}

button.dpill:hover {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--d-accent) 40%, transparent);
}

.dpill-quiet {
  background: var(--d-surface-2);
  color: var(--d-text-2);
}

.dpill-danger {
  background: color-mix(in srgb, #ef4444 10%, var(--d-surface));
  color: #ef4444;
}

.dwk-none {
  margin-top: 10px;
  padding: 14px 18px;
  border: 1px dashed var(--d-border-2);
  border-radius: 14px;
  color: var(--d-text-3);
  font-size: 12.5px;
}

.dwk-job {
  margin-top: 10px;
  padding: 12px 18px;
  border: 1px solid var(--d-border-2);
  border-radius: 14px;
}

.dwk-jhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 9px;
}

.dwk-jhead b {
  font-size: 13.5px;
  line-height: 1.4;
}

.dwk-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #9ca3af;
}

.dwk-active,
.is-running .dwk-run {
  background: #16a34a;
}

.dwk-jmeta {
  color: var(--d-text-3);
  font-size: 11.5px;
}

.dwk-desc {
  margin-top: 5px;
  color: var(--d-text-2);
  font-size: 12.5px;
}

.dwk-last {
  margin-top: 7px;
  padding: 7px 10px;
  border-radius: 9px;
  background: var(--d-surface-2);
  color: var(--d-text-2);
  font-size: 12px;
}

.dwk-last b {
  color: var(--d-text-3);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}

.dwk-running {
  display: none;
  margin-top: 7px;
  color: var(--d-text-2);
  font-size: 12.5px;
}

.is-running .dwk-running {
  display: block;
}

.is-running .dwk-last,
.is-running .dwk-when-done,
.dwk-job:not(.is-running) .dwk-when-run {
  display: none;
}

.dres {
  margin-top: 10px;
  padding: 7px 10px 8px;
  border-left: 3px solid #f79009;
  border-radius: 4px 9px 9px 4px;
  background: color-mix(in srgb, #f79009 4%, var(--d-surface));
}

.dres-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  margin-bottom: 2px;
  font-size: 10.5px;
}

.dres-meta b {
  color: #f79009;
  text-transform: uppercase;
}

.dres-meta span {
  color: var(--d-text-3);
}

.dres-text {
  font-size: 12px;
  line-height: 1.5;
}

/* A meeting's screen. */

.dmh {
  display: flex;
  flex: none;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 22px 0;
}

.dmh-ic {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--d-tint);
  color: var(--d-accent);
}

.dmh-col {
  flex: 1;
  min-width: 0;
}

.dmh-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.dmh-title b {
  font-size: 18px;
  letter-spacing: -0.02em;
}

.dlive {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, #22c55e 12%, var(--d-surface));
  color: #16a34a;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.dlive i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
}

.dmh-sub {
  margin-top: 3px;
  color: var(--d-text-2);
  font-size: 13px;
}

.dmpill {
  display: flex;
  flex: none;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--d-tint);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--d-accent) 30%, transparent);
  color: var(--d-accent);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.dmpill i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
}

.dmpill-t {
  color: var(--d-text-3);
  font-variant-numeric: tabular-nums;
}

.dmh + .dtabs {
  margin-top: 14px;
}

.dtr {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 18px;
}

.dtr-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 7px 8px;
}

.dtr-time {
  flex: none;
  width: 58px;
  color: var(--d-text-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.dtr-who {
  flex: none;
  width: 66px;
  font-size: 12px;
  font-weight: 700;
}

.dtr-text {
  flex: 1;
  color: var(--d-text-2);
  font-size: 13.5px;
  line-height: 1.55;
}

.dtr-me {
  color: #2563eb;
}

.dtr-s1 {
  color: #a855f7;
}

.dtr-s2 {
  color: #f97316;
}

.dspk {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 6px;
  font-size: 13px;
  font-weight: 600;
}

.dspk i {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
}

.dspk span:nth-of-type(1) {
  flex: 1;
}

.dspk-n {
  color: var(--d-text-3);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.dnotes-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.dnotes-head b {
  font-size: 20px;
  letter-spacing: -0.02em;
}

.dnotes-head span {
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--d-tint);
  color: var(--d-accent);
  font-size: 11.5px;
  font-weight: 600;
}

.dnotes {
  margin-bottom: 18px;
}

.dnotes li {
  position: relative;
  margin-bottom: 9px;
  padding-left: 16px;
  color: var(--d-text-2);
  font-size: 14px;
}

.dnotes li::before {
  position: absolute;
  left: 0;
  color: var(--d-accent);
  font-weight: 700;
  content: "•";
}

.dnotes li span {
  color: var(--d-text-3);
  font-size: 11.5px;
}

.dnotes-wait {
  color: var(--d-text-3);
  font-size: 13px;
}

.dnotes-recap-h {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
}

.dnotes-recap {
  color: var(--d-text-2);
  font-size: 14px;
  line-height: 1.65;
}

.dmact {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  padding: 13px 16px;
  border: 1px solid var(--d-border-2);
  border-radius: 11px;
  background: var(--d-surface);
}

.dmact .ic {
  flex: none;
  margin-top: 1px;
  color: #f79009;
}

.dmact p {
  font-size: 14px;
  font-weight: 500;
}

.dmact span {
  display: block;
  margin-top: 4px;
  color: var(--d-text-3);
  font-size: 12px;
}

/* The web account page (meeting_copilot/account_ui, admin_ui) ---------------- */

/* A browser window's height: the menu stays put while the page scrolls
   beside it, as the account page's does. */
.wb {
  display: flex;
  flex-direction: column;
  height: 760px;
  background: var(--bg);
  font-size: 14px;
}

.wb-top {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  padding: 13px 22px;
  border-bottom: 1px solid var(--line);
}

.wb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wb-word {
  font-size: 16px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.wb-word b {
  font-weight: 700;
}

.wb-word span {
  font-weight: 300;
}

.wb-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.wb-me {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 12.5px;
}

.wb-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--seg-active);
  color: var(--accent-text);
  font-size: 10px;
  font-weight: 700;
}

.wb-shell {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 0 24px;
  min-height: 0;
  padding: 0 22px;
}

.wb-side {
  display: flex;
  flex: 1 1 170px;
  flex-direction: column;
  gap: 18px;
  max-width: 210px;
  max-height: 100%;
  padding: 22px 0;
  overflow-y: auto;
}

.wb-navgroup {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
}

.wb-navlink {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 11px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--text-2);
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}

.wb-navlink:hover {
  background: var(--raised);
  color: var(--text);
}

.wb-navlink[aria-current="page"] {
  background: var(--seg-active);
  color: var(--text);
  font-weight: 600;
}

.wb-navlink.is-static,
.wb-navlink.is-static:hover {
  background: none;
  color: var(--text-2);
  cursor: default;
}

.wb-main {
  display: flex;
  flex: 999 1 440px;
  flex-direction: column;
  min-width: 0;
  max-height: 100%;
  padding: 22px 2px 24px;
  overflow-y: auto;
}

.wb-view,
.wb-tabset,
.wb-vbody {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.wb-title {
  margin-top: 8px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.018em;
}

.wb-lead {
  max-width: 600px;
  margin-top: 8px;
  color: var(--text-2);
}

.wb-panel {
  border: 1px solid var(--edge);
  border-radius: 18px;
  background: var(--panel);
  overflow: hidden;
}

.wb-phead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 14px;
  padding: 16px 18px 14px;
}

.wb-ptitle {
  margin-top: 6px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.wb-psub {
  max-width: 600px;
  margin-top: 3px;
  color: var(--text-2);
  font-size: 13px;
}

.wb-count {
  color: var(--text-3);
  font-size: 12.5px;
}

.wb-ctl {
  display: flex;
  gap: 8px;
}

.wb-ctl .btn {
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
}

.wb-ctl .btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.wb-pfoot {
  padding: 12px 18px 14px;
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: 12.5px;
}

.wb-vtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--edge-strong);
  border-radius: 12px;
  background: var(--raised);
}

.wb-vtab {
  flex: none;
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}

.wb-vtab:hover {
  background: color-mix(in srgb, var(--seg-active) 55%, transparent);
  color: var(--text);
}

.wb-vtab[aria-selected="true"] {
  background: var(--seg-active);
  color: var(--text);
}

.wb-cards {
  display: grid;
  gap: 10px;
  padding: 0 18px 16px;
}

.wb-card {
  padding: 12px 14px 13px;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--raised);
}

.wb-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  color: var(--text-3);
  font-size: 12px;
}

.wb-meta .btn {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12.5px;
}

.wb-tag {
  color: var(--accent-text);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.wb-text {
  margin-top: 4px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.wb-heads {
  border-color: color-mix(in srgb, var(--warn) 40%, var(--edge));
  background: color-mix(in srgb, var(--warn) 6%, var(--raised));
}

.wb-heads .wb-tag {
  color: var(--warn);
}

.wb-heads-done {
  border-color: var(--edge);
  background: var(--raised);
}

.wb-heads-done .wb-tag {
  color: var(--text-3);
}

.wb-heads-done .wb-text {
  color: var(--text-2);
}

.wb-wbody {
  padding: 2px 18px 18px;
  border-top: 1px solid var(--line);
}

.wb-md {
  font-size: 14.5px;
  line-height: 1.65;
}

.wb-md > :first-child {
  margin-top: 12px;
}

.wb-md p {
  margin-top: 10px;
}

.wb-md-h2 {
  margin-top: 16px;
  font-size: 15.5px;
  font-weight: 650;
}

.wb-md-list {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  padding-left: 20px;
  list-style: disc;
}

.wb-wbody > .wb-md-list {
  margin-top: 12px;
}

.wb-md-list li::marker {
  color: var(--text-3);
}

.wb-link,
.wb a[data-go] {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent-text) 45%, transparent);
  text-underline-offset: 3px;
  cursor: pointer;
}

.wb-vlead {
  color: var(--text-2);
}

.wb-tl {
  padding: 4px 18px 12px;
  border-top: 1px solid var(--line);
}

.wb-tl li {
  display: grid;
  grid-template-columns: 104px 12px minmax(0, 1fr);
  gap: 0 10px;
  padding: 10px 0;
}

.wb-tl li + li {
  border-top: 1px dashed var(--line);
}

.wb-tl time {
  padding-top: 1px;
  color: var(--text-3);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.wb-tldot {
  width: 9px;
  height: 9px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--dot);
}

.wb-tlkind {
  color: var(--text-3);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.wb-tl p {
  margin-top: 1px;
  line-height: 1.55;
}

.wb-log {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 430px;
  padding: 16px 18px;
  border-top: 1px solid var(--line);
  overflow-y: auto;
}

.wb-day {
  align-self: center;
  margin: 4px 0 2px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wb-msg {
  max-width: min(82%, 600px);
  padding: 9px 13px 11px;
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: var(--raised);
  line-height: 1.55;
}

.wb-you {
  align-self: flex-end;
  border-color: transparent;
  border-bottom-right-radius: 6px;
  background: var(--accent);
  color: #fff;
}

.wb-ai {
  align-self: flex-start;
  border-bottom-left-radius: 6px;
}

.wb-who {
  margin-bottom: 3px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
}

.wb-you .wb-who {
  color: rgba(255, 255, 255, 0.8);
}

.wb-compose {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--line);
}

.wb-input {
  flex: 1;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--edge-strong);
  border-radius: 10px;
  background: var(--raised);
  color: var(--text-3);
}

.wb-compose .btn {
  cursor: default;
  pointer-events: none;
}

.wb-tbl {
  width: 100%;
  border-collapse: collapse;
}

.wb-tbl th {
  padding: 9px 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-align: left;
  text-transform: uppercase;
}

.wb-tbl td {
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
}

.wb-tbl tr:last-child td {
  border-bottom: 0;
}

.wb-person {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wb-person .wb-avatar {
  width: 32px;
  height: 32px;
  font-size: 11.5px;
}

.wb-person .wb-mark {
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
}

.wb-person b {
  display: block;
  font-weight: 600;
}

.wb-person span span {
  display: block;
  color: var(--text-3);
  font-size: 12.5px;
}

/* Narrower frames: the sidebar folds to its rail, then goes; the call
   window drops above the app. */

@media (max-width: 1080px) {
  .dside {
    display: none;
  }

  .drail {
    display: flex;
  }
}

@media (max-width: 860px) {
  .drail {
    display: none;
  }

  .dcol {
    width: 230px;
  }
}

/* Phones ------------------------------------------------------------------ */

@media (max-width: 640px) {
  .wrap {
    width: min(100% - 32px, 1120px);
  }

  /* The header's parts join one wrapping row: the wordmark and the theme
     switch, then the nav on a line of its own. The hero's first button is
     the header's, so the header drops its copy. */
  .site-header {
    gap: 0 16px;
    padding-top: 20px;
  }

  .header-right {
    display: contents;
  }

  .site-header .seg {
    order: 1;
  }

  .site-header .nav {
    flex-basis: 100%;
    order: 2;
    gap: 0 16px;
    margin-top: 6px;
  }

  .header-cta {
    display: none;
  }

  .hero {
    padding-top: 20px;
  }

  .hero-panel {
    gap: 28px;
    padding: 28px 20px;
  }

  .hero-orb .orb {
    font-size: 200px;
  }

  .hero-summary {
    font-size: 17px;
  }

  .hero-text .actions,
  .final .actions {
    align-self: stretch;
  }

  .hero-text .actions .btn,
  .final .actions .btn {
    flex: 1 1 auto;
  }

  .section {
    padding-top: 80px;
  }

  .cell,
  .cell-point,
  .audience,
  .value-col,
  .show-col,
  .point,
  .step,
  .promise,
  .tier,
  .qa,
  .quote,
  .panel-head,
  .panel-foot,
  .promise-strip,
  .faq-more,
  .value .panel-foot {
    padding-right: 18px;
    padding-left: 18px;
  }

  .show-col.is-side {
    padding: 0;
  }

  .line {
    flex-direction: column;
    gap: 2px;
  }

  .footer-top {
    flex-direction: column;
  }

  /* The app frames: the tab bar scrolls (it always may), the side column
     moves under the panel, and the panes take their own height, scrolling
     inside once they are long. */
  .frame-head,
  .call {
    padding-right: 18px;
    padding-left: 18px;
  }

  .dt {
    height: auto;
  }

  .dscreen,
  .dpanes,
  .dpane,
  .dsplit {
    flex: none;
  }

  .dsplit {
    flex-direction: column;
  }

  .dfeed,
  .dcenter,
  .dwbody {
    max-height: 470px;
  }

  .dfeed,
  .dcenter {
    padding: 16px;
  }

  .dwbody {
    padding: 14px 16px 18px;
  }

  .dcol,
  .dcol-narrow {
    width: auto;
    border-top: 1px solid var(--d-border);
    border-left: 0;
  }

  .dcol-list {
    max-height: 340px;
  }

  .dah,
  .dmh {
    padding-right: 16px;
    padding-left: 16px;
  }

  .dmh {
    flex-wrap: wrap;
  }

  .dmh-col {
    flex-basis: calc(100% - 54px);
  }

  .dmpill {
    margin-left: 54px;
  }

  .dtabs {
    gap: 20px;
    padding: 0 16px;
  }

  .dwbar {
    padding: 10px 16px;
    overflow-x: auto;
  }

  .dcomp {
    padding: 8px 16px 14px;
  }

  .dtl::before {
    left: 66px;
  }

  .dtl-row {
    grid-template-columns: 54px 26px minmax(0, 1fr);
  }

  .dtr-row {
    flex-wrap: wrap;
    gap: 2px 10px;
  }

  .dtr-text {
    flex-basis: 100%;
  }

  .wb {
    height: auto;
  }

  .wb-top,
  .wb-shell {
    padding-right: 16px;
    padding-left: 16px;
  }

  .wb-shell {
    gap: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .wb-side,
  .wb-main {
    padding: 0;
  }

  .wb-main {
    max-height: 620px;
  }

  .wb-email {
    display: none;
  }

  .wb-side {
    max-width: none;
  }

  .wb-title {
    font-size: 22px;
  }

  .wb-tl li {
    grid-template-columns: 12px minmax(0, 1fr);
  }

  .wb-tl time {
    grid-column: 2;
  }

  .wb-tldot {
    grid-row: 1 / span 2;
    grid-column: 1;
  }
}