/* Sections: the page's canvases (hairline boxes) and the app's own
   screens set inside them. The screens use ui.css; nothing here invents
   a component the app doesn't have. */

/* A canvas: a hairline box on the app's black ground and its gray light,
   with the dot field the app's own Dashboards stage uses. */
.canvas {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 2px;
  background-color: #000;
  isolation: isolate;
  overflow: hidden;
}
.canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(900px 520px at 70% -10%, oklch(0.5 0 0 / 0.16), transparent 62%);
  pointer-events: none;
}

/* ---------- Dashboards: the app's own empty-state split ---------- */
.showcase { display: grid; grid-template-columns: 488px minmax(0, 1fr); }
.dl-pitch { display: flex; align-items: center; padding: 48px 40px 48px 48px; border-right: 1px solid var(--ui-line); }
.dl-steps { display: flex; flex-direction: column; min-width: 0; }
.dl-step { display: flex; gap: 16px; }
.dl-rail { display: flex; flex-direction: column; align-items: center; flex: none; }
.dl-rail::after { content: ""; width: 1px; flex: 1; margin: 6px 0; background: var(--ui-line); }
.dl-step:last-child .dl-rail::after { display: none; }
.dl-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 96px;
  background: var(--ui-card);
  border: 1px solid var(--ui-line-strong);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--ui-ink-2);
  font-variant-numeric: tabular-nums;
}
.dl-step.is-current .dl-step-n { background: var(--ui-ink); border-color: var(--ui-ink); color: var(--ui-ink-inverse); }
.dl-step-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; padding-bottom: 28px; }
.dl-step.is-current .dl-step-body { gap: 10px; }
.dl-step:last-child .dl-step-body { padding-bottom: 0; }
.dl-step-t { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--ui-ink-2); text-wrap: pretty; }
.dl-step.is-current .dl-step-t { color: var(--ui-ink); }
.dl-step-d { font-size: 13px; line-height: 1.5; color: var(--ui-ink-3); text-wrap: pretty; }

.dl-field { position: relative; display: flex; align-items: stretch; min-height: 44px; background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: 6px; transition: border-color 250ms var(--ui-out); }
.dl-field.is-copied { border-color: oklch(0.72 0.14 160 / 0.45); }
.dl-prompt-line { flex: 1; min-width: 0; padding: 10px 14px; font-size: 16px; line-height: 24px; color: var(--ui-ink); }
.dl-prompt-line .u { color: var(--ui-ink-2); }
.dl-field-copy {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 44px;
  border-left: 1px solid var(--ui-line);
  border-radius: 0 5px 5px 0;
  color: var(--ui-ink);
  transition: background-color 150ms ease, color 150ms ease;
}
.dl-field-copy:hover { background: var(--ui-hover); }
.dl-field-copy .copy-glyph { width: 16px; height: 16px; }
.dl-field-copy .ico { stroke-width: 2; }
.dl-field.is-copied .dl-field-copy { color: var(--ui-ok-text); }
.dl-field.is-copied .copy-glyph .g-copy { opacity: 0; transform: scale(0.5); }
.dl-field.is-copied .copy-glyph .g-check { opacity: 1; transform: scale(1); }
.dl-ask-wrap { position: relative; display: inline-block; }
.dl-ask-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  gap: 4px;
  height: 24px;
  margin: 0 -1px;
  padding: 0 5px 0 7px;
  border-radius: 6px;
  background: var(--ui-mute);
  font: 400 16px/24px var(--ui-font);
  color: var(--ui-ink);
  vertical-align: top;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.dl-ask-toggle [data-ask] { flex: 0 1 auto; min-width: 0; overflow: hidden; }
/* An ask longer than a whole line (a narrow phone) leaves its box and
   wraps with the words around it, each line its own rounded highlight,
   the chevron held to the last word. */
.dl-ask-wrap.is-wrap { display: inline; }
.dl-ask-wrap.is-wrap .dl-ask-toggle {
  display: inline;
  height: auto;
  padding-block: 2px;
  overflow: visible;
  white-space: normal;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.dl-ask-wrap.is-wrap .dl-ask-toggle .ico { display: inline-block; margin-left: 4px; vertical-align: -1px; }
.dl-ask-wrap.is-wrap .dl-ask-toggle [data-ask].is-swapping { display: inline; }
.dl-ask-toggle .ico { color: var(--ui-ink-3); stroke-width: 2; transition: transform 150ms ease; }
.dl-ask-toggle:hover, .dl-ask-toggle[aria-expanded="true"] { background: oklch(0.33 0 0); }
/* When the page picks the next ask itself, the chip lifts a step for a
   beat so the eye finds what changed. */
.dl-ask-toggle.is-cued { background: oklch(0.36 0 0); transition-duration: 250ms; }
.ui-url [data-slug] { transition: opacity 160ms var(--ui-out); }
.dl-ask-toggle[aria-expanded="true"] .ico { transform: rotate(180deg); }
.dl-ask-toggle [data-ask].is-swapping { display: inline-block; animation: dl-swap 220ms ease; }
@keyframes dl-swap { from { opacity: 0; transform: translateY(3px); } }
.dl-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 240px;
  padding: 4px;
  border-radius: 12px;
  background: var(--ui-popover);
  box-shadow: var(--ui-shadow-menu), var(--ui-shadow-popover);
  transform-origin: top left;
  animation: dl-menu-in 140ms var(--ui-out);
}
.dl-menu[hidden] { display: none; }
@keyframes dl-menu-in { from { opacity: 0; transform: translateY(-3px) scale(0.98); } }
.dl-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border-radius: 6px;
  font: 400 14px/21px var(--ui-font);
  color: var(--ui-ink-2);
  text-align: left;
  white-space: nowrap;
}
.dl-menu-item .ico { color: var(--ui-ink); visibility: hidden; stroke-width: 2; }
.dl-menu-item:hover, .dl-menu-item:focus-visible { background: var(--ui-hover); color: var(--ui-ink); outline: none; }
.dl-menu-item[aria-selected="true"] { color: var(--ui-ink); }
.dl-menu-item[aria-selected="true"] .ico { visibility: visible; }
.dl-wave {
  background-image: linear-gradient(90deg, var(--cat-saas) 0%, var(--cat-transport) 25%, var(--cat-travel) 50%, var(--cat-fun) 75%, var(--cat-saas) 100%);
  background-image: linear-gradient(90deg in oklch, var(--cat-saas) 0%, var(--cat-transport) 25%, var(--cat-travel) 50%, var(--cat-fun) 75%, var(--cat-saas) 100%);
  background-size: 300% 100%;
  background-repeat: repeat-x;
  background-position: 150% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: dl-wave 8s linear infinite;
}
@keyframes dl-wave { from { background-position: 150% 0; } to { background-position: 0% 0; } }

.dl-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; }
.dl-frame { width: 100%; }
.dl-ready { display: flex; justify-content: center; width: 100%; margin-top: 16px; }
.dl-ready > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
  border-radius: 96px;
  background: var(--ui-broad);
  border: 1px solid var(--ui-line);
  font-size: 14px;
  line-height: 1;
  color: var(--ui-ink-2);
  font-variant-numeric: tabular-nums;
}
.dl-ready i { width: 6px; height: 6px; border-radius: 96px; background: var(--ui-ok); animation: dl-blink 2s ease-in-out infinite; }
.dl-ready-more { color: var(--ui-ink-3); }
.dl-ready-more::before { content: "·"; margin-right: 8px; }
@keyframes dl-blink { 50% { opacity: 0.4; } }

/* ---------- Automations: the card, its run, and the email ---------- */
.flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; padding: 48px; }
.flow-wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; pointer-events: none; }
.wire { fill: none; stroke: oklch(1 0 0 / 0.18); stroke-width: 1; }
.wire-pulse { fill: none; stroke: oklch(0.985 0 0); stroke-width: 1.5; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 4px oklch(1 0 0 / 0.6)); }
.wire-dot { fill: #000; stroke: oklch(1 0 0 / 0.3); stroke-width: 1; }
.flow-app, .flow-mail { position: relative; z-index: 1; min-width: 0; }
.flow-app { align-self: start; }

.autocard { display: flex; flex-direction: column; gap: 14px; min-height: 130px; padding: 16px; }
.ac-head { display: flex; align-items: flex-start; gap: 12px; }
.ac-ico { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 96px; background: var(--ui-mute); color: var(--ui-ink-2); }
.ac-ico .ico { width: 16px; height: 16px; stroke-width: 2; }
.ac-id { min-width: 0; }
.ac-n { font-weight: 500; }
.ac-r { margin-top: 2px; color: var(--ui-ink-2); text-wrap: pretty; }
.ac-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; color: var(--ui-ink-2); }
.ac-next { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ac-next span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-sched { margin-left: auto; flex: none; color: var(--ui-ink-3); }
.ui-dot { width: 8px; height: 8px; border-radius: 96px; flex: none; background: var(--ui-ink-3); }
.ui-dot.ok { background: var(--ui-ok); }

.col-title { margin: 24px 0 12px; font-size: 14px; font-weight: 500; letter-spacing: -0.02em; }
.runlist { overflow: hidden; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-broad); }
.runrow { display: flex; align-items: center; gap: 16px; height: 58px; padding: 0 16px; }
.run-state { display: inline-flex; align-items: center; gap: 8px; flex: none; width: 128px; }
.rs-glyph { display: inline-grid; place-items: center; width: 12px; height: 12px; }
.rs-glyph > * { grid-area: 1 / 1; transition: opacity 200ms var(--ui-out), transform 300ms var(--ui-spring); }
.rs-glyph .ui-dot { opacity: 0; transform: scale(0.4); }
.runlist.is-done .rs-glyph .spin { opacity: 0; transform: scale(0.4); }
.runlist.is-done .rs-glyph .ui-dot { opacity: 1; transform: none; }
.spin { width: 12px; height: 12px; border-radius: 96px; border: 1.5px solid var(--ui-line-strong); border-top-color: var(--ui-ink-2); animation: ui-spin 800ms linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
.run-state .lbl { color: var(--ui-ink); }
.run-state .dur { font-size: 13px; color: var(--ui-ink-3); }
.run-desc { flex: 1; min-width: 0; color: var(--ui-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.run-when { display: inline-flex; align-items: center; gap: 10px; flex: none; font-size: 13px; color: var(--ui-ink-3); }
.run-actor { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 96px; background: var(--ui-mute); color: var(--ui-ink-3); }
.run-actor .ico { width: 11px; height: 11px; stroke-width: 2; }
/* The log opens with its first line and grows one line at a time, as a
   streamed log does; between runs it closes again. Each step is a grid
   row going 0fr to 1fr, so nothing is measured and a resize can't
   strand a height. */
.run-log { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--ui-spring); }
.runlist.is-logging .run-log { grid-template-rows: 1fr; }
.run-log-clip { min-height: 0; overflow: hidden; }
.runrow-log { padding: 12px 16px 14px; border-top: 1px solid var(--ui-line); background: var(--ui-sunken); }
.log-lines { font: 400 13px/1.9 var(--ui-mono); }
.log-lines .l { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 360ms var(--ui-spring); }
.log-lines .l-in { display: flex; gap: 14px; min-height: 0; overflow: hidden; transition: opacity 260ms var(--ui-out) 60ms, transform 360ms var(--ui-spring) 60ms; }
.log-lines .t { flex: none; color: var(--ui-ink-dim); }
.log-lines .m { min-width: 0; color: var(--ui-ink-2); overflow-wrap: anywhere; }
.log-lines .l.is-pending { grid-template-rows: 0fr; }
.log-lines .l.is-pending .l-in { opacity: 0; transform: translateY(4px); transition-delay: 0s; }
/* The newest line lands a step brighter, then settles to the log's gray. */
.log-lines .l.is-new .m { color: var(--ui-ink); }
.log-lines .m { transition: color 900ms var(--ui-out); }
.run-state .lbl, .run-desc, .run-state .dur { transition: opacity 160ms var(--ui-out); }
.is-swapping-text { opacity: 0 !important; }

/* The email, in Driggsby's dark theme: the wordmark over one card,
   always fully lit. Its unread dot springs in as it reaches the screen,
   and the frame glows for a beat when the run lands it. */
.flow-mail { overflow: hidden; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-card-solid); box-shadow: var(--ui-shadow-popover); transition: box-shadow 700ms var(--ui-out), border-color 700ms var(--ui-out); }
.flow-mail.is-landed { border-color: oklch(1 0 0 / 0.26); box-shadow: 0 0 0 4px oklch(1 0 0 / 0.04), var(--ui-shadow-popover); }
.mail-unread { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--blue); vertical-align: 1px; transform: scale(0); transition: transform 420ms var(--ui-spring); }
.flow-mail:not(.is-waiting) .mail-unread { transform: none; }
.mail-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--ui-line); background: var(--ui-sunken); }
.mail-av { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 96px; background: #fafafa; }
.mail-av svg { width: 13.25px; height: 14px; fill: #000; }
.mail-who { display: flex; flex-direction: column; min-width: 0; }
.mail-from { font-weight: 500; line-height: 20px; }
.mail-subj { font-size: 13px; line-height: 18px; color: var(--ui-ink-2); }
.mail-time { margin-left: auto; font-size: 13px; color: var(--ui-ink-3); }
.mail-page { padding: 24px; background: #000; }
.mail-brand { display: block; padding: 0 4px 16px; font: 600 20px/1 var(--ui-font); letter-spacing: -0.02em; color: #fafafa; }
.mail-card { padding: 24px; border-radius: 16px; background: #1f1f1f; }
.mail-h { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; color: #fafafa; }
.mail-lines { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.mail-lines li { font-size: 15px; line-height: 23px; color: #989898; text-wrap: pretty; }
.mail-lines b { font-weight: 500; color: #fafafa; }
.mail-lines b.ok { color: var(--ui-ok-text); }
.mail-btn { display: inline-flex; align-items: center; height: 40px; margin-top: 20px; padding: 0 20px; border-radius: 999px; background: #fafafa; font-size: 14px; font-weight: 500; color: #0a0a0a; }

/* ---------- App tiles ---------- */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tile {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--panel);
  transition: border-color 200ms var(--ease);
}
.tile:hover { border-color: var(--line-2); }
.tile-vis {
  position: relative;
  height: 264px;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(420px 260px at 70% -20%, oklch(0.5 0 0 / 0.14), transparent 65%), #000;
}
.tile-vis.is-cropped::after { content: ""; position: absolute; inset: auto 0 0; height: 56px; z-index: 3; pointer-events: none; background: linear-gradient(transparent, #000); }
.tile-cap { padding: 22px 24px 26px; }
.tile-cap h3 { font-size: 15px; line-height: 22px; font-weight: 500; letter-spacing: -0.011em; color: var(--ink); }
.tile-cap p { margin-top: 4px; font-size: 14.5px; line-height: 22px; letter-spacing: -0.006em; color: var(--ink-3); text-wrap: pretty; }

/* ---------- Security: two of the app's screens ---------- */
.trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; padding: 48px; }
.trust-frame { position: relative; }

/* The consent screen: a flow page, no card, a centered column. */
.flow-pg { position: relative; height: 560px; padding: 0 24px; }
.flow-brand { display: block; height: 56px; padding-top: 19px; }
.flow-col { width: 400px; max-width: 100%; margin: 28px auto 0; text-align: center; }
.flow-heading { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.02em; }
.flow-sentence { margin-top: 16px; font-size: 16px; line-height: 24px; color: var(--ui-ink-3); text-wrap: pretty; }
.flow-sentence strong { font-weight: 600; color: var(--ui-ink); }
.flow-rows { margin-top: 24px; text-align: left; border-top: 1px solid var(--ui-line); }
.flow-rows li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ui-line); font-size: 14px; line-height: 20px; color: var(--ui-ink-2); text-wrap: pretty; }
.flow-rows .ico { width: 16px; height: 16px; flex: none; margin-top: 2px; stroke-width: 2; color: var(--ui-ink-3); }
.flow-rows li[data-can="yes"] .ico { color: var(--ui-ok-text); }
.flow-actions { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.flow-button { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 40px; padding: 0 20px; border-radius: 96px; font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; }
.flow-button-primary { background: var(--ui-ink); color: var(--ui-ink-inverse); }
.flow-button-ghost { background: var(--ui-card-solid); color: var(--ui-ink); box-shadow: inset 0 0 0 1px var(--ui-line); }

/* The Access page under the console bar. */
.ax { position: relative; height: 560px; overflow: hidden; }
.ax-bar { height: 56px; }
.ax-bar .ui-avatar { margin-left: auto; }
/* The strip is scrolled to its selected tab, as the app does; whatever
   runs off its left edge fades out there. */
.ax-tabs { overflow: hidden; }
.ax-tabs.is-shifted { -webkit-mask: linear-gradient(90deg, transparent, #000 56px); mask: linear-gradient(90deg, transparent, #000 56px); }
.ax-page { padding: 24px 20px; }
.ax-sub { margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--ui-ink-2); }
.ax-section { margin: 24px 0 12px; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -0.01em; }
.ax-list { overflow: hidden; }
.mcx-row + .mcx-row { border-top: 1px solid var(--ui-line); }
.mcx-row { overflow: hidden; transition: background-color 300ms var(--ui-out); }
.mcx-row.is-open { background: oklch(1 0 0 / 0.022); }
/* The row head on the app's grid: the mark spans both lines, the name
   over its detail, the last use and the chevron centered on the row. A
   row whose detail would be cut rides its last use up to the name's
   line and gives the detail the full width (the app's own narrow rule). */
.mcx-row-head { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 16px; grid-template-rows: 20px 18px; row-gap: 2px; align-items: center; column-gap: 14px; min-height: 64px; padding: 12px 16px; }
.mcx-id { display: contents; }
.mcx-logo { grid-column: 1; grid-row: 1 / span 2; }
.mcx-name { grid-column: 2; grid-row: 1; }
.mcx-meta { grid-column: 2; grid-row: 2; }
.mcx-when { grid-column: 3; grid-row: 1 / span 2; }
.mcx-chev { grid-column: 4; grid-row: 1 / span 2; }
.mcx-row-head[data-ride] > :is(.mcx-when, .mcx-chev) { grid-row: 1; }
.mcx-row-head[data-ride] .mcx-meta { grid-column: 2 / -1; }
.mcx-used-short { display: none; }
.mcx-logo { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ui-mute); box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.06); color: var(--ui-ink-2); }
.mcx-logo .brand { width: 18px; height: 18px; }
.mcx-logo .brand-openai { color: var(--ui-ink); }
.mcx-logo .ico { width: 16px; height: 16px; stroke-width: 2; }
.mcx-id { min-width: 0; }
.mcx-name { display: block; font-weight: 500; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcx-meta { display: block; font-size: 13px; line-height: 18px; color: var(--ui-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcx-when { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 19.5px; color: var(--ui-ink-2); white-space: nowrap; }
.mcx-live { width: 7px; height: 7px; border-radius: 50%; background: var(--ui-ok); }
.mcx-chev { display: inline-grid; width: 16px; height: 16px; color: var(--ui-ink-3); transition: transform 300ms var(--ui-spring), color 150ms; }
.mcx-chev .ico { width: 16px; height: 16px; stroke-width: 2; }
.mcx-row.is-open .mcx-chev { transform: rotate(180deg); color: var(--ui-ink-2); }
.mcx-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--ui-spring); }
.mcx-row.is-open .mcx-detail { grid-template-rows: 1fr; }
.mcx-detail-body { min-height: 0; overflow: hidden; padding: 0 16px 0 62px; opacity: 0; transform: translateY(-4px); transition: opacity 220ms var(--ui-out), transform 420ms var(--ui-spring), padding 420ms var(--ui-spring); }
.mcx-row.is-open .mcx-detail-body { padding-bottom: 16px; opacity: 1; transform: none; }
.mcx-calls-t { margin-bottom: 4px; font-size: 12px; line-height: 16px; color: var(--ui-ink-3); }
.mcx-call { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline; font-size: 13px; line-height: 28px; }
.mcx-call-why { color: var(--ui-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcx-call-tool { color: var(--ui-ink-3); white-space: nowrap; }
/* The foot asks in place: its line and its buttons each hold both
   states in one grid cell and crossfade, so the foot never changes
   size between asking and not. */
.mcx-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 47px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--ui-line); }
.mcx-foot-texts { display: grid; align-items: center; min-width: 0; }
.mcx-foot-text { grid-area: 1 / 1; min-width: 0; font-size: 13px; line-height: 18px; color: var(--ui-ink-3); text-wrap: pretty; }
.mcx-foot-text b { font-weight: 500; color: var(--ui-ink); }
.mcx-foot-acts { display: grid; justify-items: end; align-items: center; flex: none; }
.acts-idle, .acts-ask { grid-area: 1 / 1; display: flex; gap: 8px; }
.mcx-foot-text, .acts-idle, .acts-ask { transition: opacity 200ms var(--ui-out), transform 340ms var(--ui-spring), visibility 0s; }
.mcx-row:not(.is-asking) :is([data-foot-ask], .acts-ask),
.mcx-row.is-asking :is([data-foot-idle], .acts-idle) { opacity: 0; transform: translateY(3px); visibility: hidden; transition: opacity 160ms var(--ui-out), transform 340ms var(--ui-spring), visibility 0s linear 160ms; }
.mcx-row.is-asking [data-foot-ask] { transition-delay: 60ms; }
.mcx-row.is-asking .acts-ask { transition-delay: 40ms; }
/* A press, as a finger or a click lands: the pill dips and takes its
   hover fill for a beat. */
.ui-btn.is-pressed { transform: scale(0.96); }
.ui-btn-danger.is-pressed { background: var(--ui-danger-bg); }
.ui-btn-danger-solid.is-pressed { background: oklch(0.53 0.19 25); }
/* The phone's confirm (shown only at a phone's width): an action sheet
   that fits its words, risen from the window's bottom edge over the
   page's dim, the question 17/22 over what it does 15/20, then the red
   action and Cancel as 48 pills, gutter to gutter. */
.ax-bar .ax-ph, .ax-scrim, .ax-sheet { display: none; }
.ax-scrim { position: absolute; inset: 0; z-index: 4; background: oklch(0 0 0 / 0.62); opacity: 0; pointer-events: none; transition: opacity 320ms var(--ui-out); }
.ax-sheet {
  position: absolute;
  inset: auto 0 0;
  z-index: 5;
  padding: 32px 16px 16px;
  text-align: center;
  border-radius: 16px 16px 0 0;
  background: color-mix(in oklch, var(--ui-popover) 96%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow: 0 -1px 0 var(--ui-line), 0 -12px 40px oklch(0 0 0 / 0.45);
  transform: translateY(calc(100% + 40px));
  transition: transform 460ms var(--ui-spring);
}
.ax-sheet::before { content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 96px; background: var(--ui-ink-dim); opacity: 0.5; }
.ax-sheet-t { font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; }
.ax-sheet-w { margin-top: 8px; font-size: 15px; line-height: 20px; letter-spacing: -0.01em; color: var(--ui-ink-2); }
.ax-sheet-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.ax-sheet-acts .ui-btn { width: 100%; height: 48px; font-size: 17px; line-height: 22px; font-weight: 600; }
.ax.is-sheet .ax-scrim { opacity: 1; }
.ax.is-sheet .ax-sheet { transform: none; }
.ax-toast { position: absolute; right: 16px; bottom: 16px; left: auto; width: min(400px, calc(100% - 32px)); opacity: 0; transform: translateY(12px) scale(0.98); transition: opacity 220ms var(--ui-out), transform 520ms var(--ui-spring); }
.ax-toast.is-on { opacity: 1; transform: none; }

/* ---------- Platform ---------- */
/* Two cards: what each is for and three plain lines on what it does;
   the full lists wait behind a disclosure that springs open. */
.pcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pcard { overflow: hidden; }
.pc-list { display: flex; flex-direction: column; gap: 12px; padding: 18px; list-style: none; }
.pc-list li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 12px; font-size: 14px; line-height: 20px; color: var(--ui-ink); }
.pc-list .ico { margin-top: 2px; color: var(--ui-ink-3); }
.pc-more { border-top: 1px solid var(--ui-line); }
.pc-more summary { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 2px 18px 0; font-size: 13px; font-weight: 500; color: var(--ui-ink-2); cursor: pointer; list-style: none; transition: color 150ms ease, background-color 150ms ease; }
.pc-more summary::-webkit-details-marker { display: none; }
.pc-more summary .ico { color: var(--ui-ink-3); stroke-width: 2; transition: transform 300ms var(--ui-spring); }
.pc-more[open] summary .ico { transform: rotate(180deg); }
@media (hover: hover) { .pc-more summary:hover { color: var(--ui-ink); background: var(--ui-hover); } }
.pc-more summary:focus-visible { outline-offset: -2px; }
.pc-body { overflow: hidden; }
/* The CLI card ends on its sign-in fact, a row the height of the MCP
   card's toggle, so the two cards stand level. */
.pc-foot { display: flex; align-items: center; gap: 8px; height: 45px; padding: 2px 18px 0; border-top: 1px solid var(--ui-line); font-size: 13px; font-weight: 500; color: var(--ui-ink-2); }
.pc-foot .ico { color: var(--ui-ink-3); stroke-width: 2; }
.pc-body .way-rows { padding-top: 4px; padding-bottom: 10px; border-top: 1px solid var(--ui-line); }
.way-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--ui-line); }
.way-who { min-width: 0; }
.way-t { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ui-ink); }
.way-s { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--ui-ink-3); text-wrap: pretty; }
.way-pill { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 96px; background: var(--ui-mute); font-size: 12px; font-weight: 500; color: var(--ui-ink-2); white-space: nowrap; }
.way-rows { padding: 2px 18px 6px; }
.way-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--ui-line); }
.way-row:first-child { border-top: 0; }
.way-k { padding-top: 2px; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ui-ink-2); }
.tg-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tg-list span { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 96px; background: var(--ui-mute); font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0.2px; color: var(--ui-ink-2); transition: color 150ms, background-color 150ms; }
.tg-list span:hover { color: var(--ui-ink); background: oklch(0.33 0 0); }
@media (max-width: 860px) {
  .pcards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .way-head { flex-direction: column; gap: 10px; padding: 12px 16px; }
  .way-rows { padding: 2px 16px 6px; }
  .way-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pc-list { padding: 16px; }
  .pc-more summary, .pc-foot { padding: 2px 16px 0; }
}

/* ---------- Closing CTA ---------- */
/* The close fills the last screen with the footer, its stack centered
   between the floating nav (64px down at every width) and the footer, so
   the end of the page shows nothing else. A phone's Safari brings its
   toolbar back at the end of the page; the top takes the toolbar's height
   (100lvh - 100svh) so the stack centers in what's then on screen. */
.cta { display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - var(--foot-h)); min-height: calc(100lvh - var(--foot-h)); padding-top: 80px; padding-top: calc(80px + 100lvh - 100svh); padding-bottom: 16px; text-align: center; overflow: hidden; isolation: isolate; }
.cta-inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.cta-glow { position: absolute; left: 50%; top: 108px; width: 1040px; height: 640px; translate: -50% -50%; z-index: -1; pointer-events: none; background: radial-gradient(520px 320px at 50% 50%, oklch(0.5 0 0 / 0.18), transparent 70%); }
/* The installed app's icon: the brand mark black on the manifest's
   #fafafa, at the icon file's own proportions (the mark spans 66.5% of
   the width and 70.3% of the height, centered), in iOS's 22.4% corner. */
.app-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: #fafafa;
  box-shadow: 0 0 0 1px oklch(1 0 0 / 0.14), 0 12px 32px oklch(0 0 0 / 0.6), 0 0 56px oklch(1 0 0 / 0.08);
  animation: icon-float 5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes icon-float { 50% { translate: 0 -4px; } }
.app-icon svg { width: 47.9px; height: 50.65px; fill: #000; }
/* The stack steps evenly, 36 a gap, as the hero's does: the headline's
   margins take back its box's 0.17em above its capitals and 0.286em
   below its baseline. */
.cta-title { margin-top: calc(36px - 0.17em); margin-bottom: -0.286em; padding-bottom: 0.06em; background: linear-gradient(180deg, #fff 38%, oklch(0.76 0 0)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta-lead { margin-top: 36px; max-width: 460px; text-wrap: balance; }
/* Each sentence starts its own line. */
.cta-lead .ls { display: block; }
.cta-actions { justify-content: center; margin-top: 28px; }
.cta-note { margin-top: 30px; font-size: 13px; line-height: 20px; color: var(--ink-3); text-wrap: balance; }