/* The compare page (compare.mjs): Minda, Claude and ChatGPT, function by function. The site's look (hub.css tokens):
   near-black, Inter, hairlines, monochrome marks; the Minda column carries only a faint violet wash. The table is a real
   <table> (assistants and screen readers read it as one); on a phone each function becomes a card of three answers.
   compare.js adds the sticky bar's scroll-spy, the search and "Only differences"; without it every row shows. */
.hb-cmp { --cx-top: 80px; --cx-us: rgba(139, 92, 246, .055); --cx-us-2: rgba(163, 124, 255, .5); --cx-row: rgba(246, 245, 250, .025); }
.cx-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cx-checked { margin-top: 20px; font-size: var(--hb-t-sm); line-height: 1.5; color: var(--hb-mut); max-width: 40em; }
.cx-note { font-size: 16px; line-height: 1.6; color: var(--hb-mut); max-width: 30em; }

/* ---- Marks: yes (filled), in part (half), not listed (a dash) */
.cx-mark { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; }
/* the tick is green (the owner, 2026-10-07: "change to green tick"); in part and the others stay quiet */
.cx-yes { background: #30d158; color: #062a12; }
.cx-part { color: var(--hb-fg); box-shadow: inset 0 0 0 1.5px rgba(246, 245, 250, .55); }
.cx-part svg { width: 14px; height: 14px; }
.cx-no { color: rgba(246, 245, 250, .4); box-shadow: inset 0 0 0 1px var(--hb-line-2); }

/* ---- Meters: the yes share solid, the in-part share dim */
.cx-meter { position: relative; display: block; height: 6px; border-radius: 999px; background: rgba(246, 245, 250, .08); overflow: hidden; }
.cx-meter i, .cx-meter b { position: absolute; top: 0; bottom: 0; transform-origin: left center; }
.cx-meter i { left: 0; width: calc(var(--y) * 100%); background: var(--hb-fg); border-radius: 999px; }
.cx-meter b { left: calc(var(--y) * 100%); width: calc(var(--p) * 100%); background: rgba(246, 245, 250, .3); }
.is-us .cx-meter i { background: var(--hb-vi-2); }
.is-us .cx-meter b { background: rgba(163, 124, 255, .32); }

/* ---- Hero: the at-a-glance board */
.cx-hero { padding-bottom: clamp(32px, 4vw, 56px); }
.cx-hero .hb-hero-grid { align-items: start; }
.cx-glance { margin: 0; border-radius: 24px; background: var(--hb-card); box-shadow: inset 0 0 0 1px var(--hb-line), 0 40px 80px -40px rgba(0, 0, 0, .8); overflow: hidden; }
.cx-gl-head, .cx-gl-row { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); align-items: center; gap: 0 clamp(12px, 1.6vw, 20px); padding-inline: clamp(16px, 2vw, 24px); }
.cx-gl-head { padding-block: 16px; border-bottom: 1px solid var(--hb-line); background: rgba(246, 245, 250, .02); }
.cx-gl-t { font-size: var(--hb-t-sm); font-weight: 500; }
.cx-gl-p { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; font-weight: 600; color: var(--hb-mut-2); }
.cx-gl-p.is-us { color: var(--hb-fg); }
.cx-gl-row { padding-block: 10px; font-size: var(--hb-t-sm); transition: background-color .2s; }
.cx-gl-row:hover { background: var(--cx-row); }
.cx-gl-row + .cx-gl-row { border-top: 1px solid rgba(246, 245, 250, .06); }
.cx-gl-g { color: var(--hb-mut-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-gl-c { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.cx-gl-n { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--hb-fg); min-width: 3.4em; text-align: right; }
.cx-gl-n span { color: var(--hb-mut); font-weight: 400; }
.cx-gl-foot { padding: 14px clamp(16px, 2vw, 24px) 18px; border-top: 1px solid var(--hb-line); font-size: var(--hb-t-lbl); line-height: 1.5; color: var(--hb-mut); }
.hb-js .cx-glance .cx-meter i, .hb-js .cx-glance .cx-meter b { animation: cx-grow 1.1s var(--hb-ease) calc(.55s + var(--i, 0) * 40ms) both; }
@keyframes cx-grow { from { transform: scaleX(0); } }

/* ---- The three apps */
.cx-prof-grid, .cx-ahead-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cx-prof { display: flex; flex-direction: column; gap: 20px; padding: clamp(24px, 2.6vw, 32px); border-radius: 24px; background: var(--hb-card); box-shadow: inset 0 0 0 1px var(--hb-line); }
.cx-prof.is-us, .cx-ahead-col.is-us { background: linear-gradient(var(--cx-us), var(--cx-us)), var(--hb-card); box-shadow: inset 0 0 0 1px rgba(163, 124, 255, .28); }
.cx-prof header { display: flex; align-items: center; gap: 14px; }
.cx-prof header h3 { font-size: clamp(26px, 2.4vw, 32px); letter-spacing: -.03em; }
.cx-prof header p { margin-top: 4px; font-size: var(--hb-t-sm); color: var(--hb-mut); }
.cx-prof-what { font-size: 16px; line-height: 1.6; color: var(--hb-mut-2); text-wrap: pretty; }
.cx-prof dl { margin: auto 0 0; border-top: 1px solid var(--hb-line); }
.cx-prof dl > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hb-line); }
.cx-prof dt { display: flex; align-items: center; gap: 6px; align-self: start; font-size: 14px; color: var(--hb-mut); }
.cx-prof dt svg { flex: none; opacity: .8; }
.cx-prof dd { margin: 0; font-size: var(--hb-t-sm); line-height: 1.5; color: var(--hb-fg); }

/* ---- Where each one is ahead */
.cx-ahead-col { padding: clamp(24px, 2.6vw, 32px); border-radius: 24px; background: var(--hb-card); box-shadow: inset 0 0 0 1px var(--hb-line); }
.cx-ahead-col h3, .cx-bcol h3, .cx-bus h3, .cx-src-col h3 { display: flex; align-items: center; gap: 12px; }
.cx-ahead-col ul { margin-top: 20px; }
.cx-ahead-col li { position: relative; padding: 14px 0 14px 22px; border-top: 1px solid var(--hb-line); font-size: 16px; line-height: 1.55; color: var(--hb-mut-2); text-wrap: pretty; }
.cx-ahead-col li::before { content: ''; position: absolute; left: 2px; top: 22px; width: 7px; height: 7px; border-radius: 50%; background: var(--hb-fg); }
.cx-ahead-col.is-us li::before { background: var(--hb-vi-2); }

/* Source links: small, quiet, always there */
.hb-cmp a.src, .cx-more { display: inline-block; font-size: 12px; font-weight: 500; color: var(--hb-mut-2); text-decoration: underline; text-decoration-color: rgba(246, 245, 250, .3); text-underline-offset: 3px; transition: color .15s, text-decoration-color .15s; }
.hb-cmp a.src:hover, .cx-more:hover { color: var(--hb-fg); text-decoration-color: currentColor; }

/* ---- The table */
.cx-tbl { padding-top: clamp(56px, 6vw, 96px); }
.cx-tbl .hb-head { margin-bottom: 32px; }
.cx-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: var(--hb-t-sm); color: var(--hb-mut-2); }
.cx-legend li { display: inline-flex; align-items: center; gap: 8px; }
.cx-legend .cx-mark { width: 18px; height: 18px; }
.cx-legend .cx-mark svg { width: 10px; height: 10px; }
.cx-legend .cx-part svg { width: 12px; height: 12px; }

.cx-bar { position: sticky; top: var(--cx-top); z-index: 20; display: flex; align-items: center; gap: 16px; margin-inline: calc(var(--hb-gut) * -1); padding: 10px var(--hb-gut); background: rgba(10, 10, 10, .84); -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px); border-bottom: 1px solid var(--hb-line); }
/* stuck under the floating header: a strip of the bar's glass fills the gap above it, so rows never show through */
.cx-bar.is-stuck::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--cx-top); background: var(--hb-bg); pointer-events: none; }
.cx-chips { display: flex; gap: 4px; min-width: 0; flex: 1; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
.cx-chips::-webkit-scrollbar { display: none; }
.cx-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px 0 12px; border-radius: 999px; font-size: var(--hb-t-sm); font-weight: 500; color: var(--hb-mut-2); white-space: nowrap; transition: background-color .2s, color .2s; }
.cx-chip:hover { color: var(--hb-fg); background: rgba(246, 245, 250, .06); }
.cx-chip.is-on { color: #0a0a0a; background: var(--hb-fg); }
.hb-cmp .cx-chip:focus-visible { outline-offset: 1px; border-radius: 999px; }
.cx-tools { display: flex; align-items: center; gap: 16px; flex: none; }
.cx-tools[hidden] { display: none; }
.cx-search { display: inline-flex; align-items: center; gap: 8px; height: 36px; width: 220px; padding: 0 14px; border-radius: 999px; color: var(--hb-mut); background: rgba(246, 245, 250, .05); box-shadow: inset 0 0 0 1px var(--hb-line); transition: box-shadow .2s, background-color .2s; }
.cx-search:focus-within { box-shadow: inset 0 0 0 1px var(--hb-line-2); background: rgba(246, 245, 250, .07); }
.cx-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--hb-fg); font: inherit; font-size: var(--hb-t-sm); }
.cx-search input::placeholder { color: var(--hb-mut); }
.cx-search input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }
.cx-switch { display: inline-flex; align-items: center; gap: 10px; font-size: var(--hb-t-sm); color: var(--hb-mut-2); cursor: pointer; white-space: nowrap; user-select: none; }
.cx-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cx-sw { position: relative; width: 36px; height: 22px; border-radius: 999px; background: rgba(246, 245, 250, .14); transition: background-color .2s; }
.cx-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--hb-fg); transition: transform .25s var(--hb-ease), background-color .2s; }
.cx-switch input:checked + .cx-sw { background: var(--hb-fg); }
.cx-switch input:checked + .cx-sw::after { transform: translateX(14px); background: #0a0a0a; }
.cx-switch input:focus-visible + .cx-sw { outline: 2px solid var(--hb-vi-2); outline-offset: 2px; }
.cx-count { margin: 16px 0 0; font-size: var(--hb-t-sm); color: var(--hb-mut); min-height: 1.5em; }

.cx-table { width: 100%; margin-top: 8px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.cx-table thead th { position: sticky; top: calc(var(--cx-top) + var(--cx-bar-h, 57px)); z-index: 10; padding: 16px 20px 14px; text-align: left; vertical-align: bottom; background: rgba(10, 10, 10, .92); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid var(--hb-line-2); }
.cx-h-f { width: 25%; font-size: var(--hb-t-sm); font-weight: 500; color: var(--hb-mut); }
.cx-h-n { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.cx-h-b { display: block; margin-top: 4px; padding-left: 40px; font-size: var(--hb-t-lbl); font-weight: 400; color: var(--hb-mut); }
.cx-h.is-us { box-shadow: inset 0 2px 0 var(--hb-vi-2); background: linear-gradient(var(--cx-us), var(--cx-us)), rgba(10, 10, 10, .92); }

.cx-gh > * { padding: 56px 20px 16px; border-bottom: 1px solid var(--hb-line-2); vertical-align: bottom; }
.cx-g:first-of-type .cx-gh > * { padding-top: 28px; }
.cx-gt { text-align: left; font-weight: 400; }
.cx-gt { display: table-cell; }
.cx-gt > span:last-child { display: block; }
.cx-gi { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-bottom: 12px; border-radius: 10px; color: var(--hb-fg); box-shadow: inset 0 0 0 1px var(--hb-line); background: rgba(246, 245, 250, .03); }
.cx-gl { display: block; font-size: var(--hb-t-h3); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--hb-fg); }
.cx-gb { display: block; margin-top: 6px; font-size: var(--hb-t-sm); line-height: 1.5; color: var(--hb-mut); }
.cx-gc { font-size: var(--hb-t-sm); color: var(--hb-mut-2); font-variant-numeric: tabular-nums; }
.cx-gc .cx-meter { max-width: 160px; margin-bottom: 8px; }
.cx-gc.is-us, .cx-c.is-us { background: var(--cx-us); }

.cx-r > * { padding: 14px 18px; vertical-align: top; border-bottom: 1px solid var(--hb-line); transition: background-color .2s; }
.cx-r:hover > * { background-color: var(--cx-row); }
.cx-r:hover > .is-us { background-color: rgba(139, 92, 246, .085); }
.cx-r:target > * { background-color: rgba(163, 124, 255, .1); }
.cx-f { text-align: left; font-weight: 400; }
.cx-f-n { display: block; font-size: 16px; font-weight: 500; letter-spacing: -.012em; line-height: 1.35; color: var(--hb-fg); }
.cx-f-h { display: block; margin-top: 4px; font-size: var(--hb-t-lbl); line-height: 1.45; color: var(--hb-mut); }
.cx-c { display: table-cell; }
/* the answer first, in a word beside its mark, then the detail at the column's full width */
.cx-v { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; }
.cx-v .cx-mark { width: 20px; height: 20px; }
.cx-v b { font-weight: 600; color: var(--hb-fg); }
.cx-c[data-s='no'] .cx-v b, .cx-c[data-s='unk'] .cx-v b { font-weight: 500; color: var(--hb-mut); }
.cx-c-body { margin-top: 6px; }
.cx-c-body > p:first-child { font-size: var(--hb-t-sm); line-height: 1.5; color: var(--hb-mut-2); text-wrap: pretty; }
.cx-c[data-s='no'] .cx-c-body > p:first-child { color: var(--hb-mut); }
.cx-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--hb-mut); }
.cx-tags > span + *::before, .cx-tags > a + *::before { content: none; }
.cx-pv { color: var(--hb-warm); }
.cx-g[hidden], .cx-r[hidden] { display: none; }
.cx-empty { padding: 48px 0; text-align: center; font-size: var(--hb-t-sm); color: var(--hb-mut); }

/* ---- How this page was made */
.cx-rules { counter-reset: r; display: grid; gap: 0; max-width: 56em; border-top: 1px solid var(--hb-line); }
.cx-rules li { counter-increment: r; display: grid; grid-template-columns: 2.4em minmax(0, 1fr); padding: 14px 0; border-bottom: 1px solid var(--hb-line); font-size: 16px; line-height: 1.6; color: var(--hb-mut-2); }
.cx-rules li::before { content: counter(r); font-variant-numeric: tabular-nums; color: var(--hb-mut); }
.cx-src-grid { display: grid; gap: 12px; margin-top: 48px; }
.cx-src-col { padding: 24px; border-radius: 20px; background: var(--hb-card); box-shadow: inset 0 0 0 1px var(--hb-line); }
.cx-src-col h3 { font-size: var(--hb-t-body); }
.cx-src-col ul { margin-top: 12px; columns: 3 280px; column-gap: 32px; }
.cx-src-col li { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--hb-line); font-size: 14px; line-height: 1.45; break-inside: avoid; }
.cx-src-col li a { color: var(--hb-fg); font-weight: 500; }
.cx-src-col li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cx-src-col li span { color: var(--hb-mut); overflow-wrap: anywhere; }
.cx-tm { margin-top: 32px; font-size: var(--hb-t-lbl); line-height: 1.6; color: var(--hb-mut); max-width: 60em; }

/* ---- Narrower screens */
@media (max-width: 1080px) {
  .cx-search { width: 180px; }
  .cx-prof-grid, .cx-ahead-grid { grid-template-columns: minmax(0, 1fr); }
  .cx-prof dl { margin-top: 0; }
}
@media (max-width: 860px) {
  .hb-cmp { --cx-top: 72px; }
  .cx-bar { flex-wrap: wrap; gap: 10px; }
  .cx-chips { flex-basis: 100%; }
  .cx-tools { flex: 1 1 100%; min-width: 0; justify-content: space-between; }
  .cx-search { flex: 1; width: auto; min-width: 0; }
  .cx-src-grid { grid-template-columns: minmax(0, 1fr); }
  /* the table becomes cards: a function, then each app's answer with its name */
  .cx-table, .cx-table tbody, .cx-table tr, .cx-table th, .cx-table td { display: block; width: auto; }
  .cx-table thead, .cx-table colgroup { display: none; }
  .cx-gh { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 40px 0 16px; border-bottom: 1px solid var(--hb-line-2); }
  .cx-gh > * { padding: 0; border: 0; background: none !important; }
  .cx-gt { grid-column: 1 / -1; }
  .cx-gc .cx-meter { margin-bottom: 6px; }
  .cx-r { margin-top: 12px; border-radius: 20px; background: var(--hb-card); box-shadow: inset 0 0 0 1px var(--hb-line); overflow: hidden; }
  .cx-r > * { padding: 14px 18px; border-bottom: 1px solid var(--hb-line); }
  .cx-r > :last-child { border-bottom: 0; }
  .cx-r:hover > * { background-color: transparent; }
  .cx-f { padding-top: 18px !important; }
  .cx-table .cx-who { display: flex; }
  .cx-table .cx-gc .cx-who { margin-bottom: 8px; }
}
@media (max-width: 640px) {
  .cx-gl-head, .cx-gl-row { grid-template-columns: minmax(0, 1fr) repeat(3, 56px); gap: 0 10px; }
  .cx-gl-c { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .cx-gl-n { text-align: left; min-width: 0; }
  .cx-gl-p { justify-content: flex-start; }
  .cx-gl-p > span:last-child { display: none; }
  .cx-gl-g { white-space: normal; line-height: 1.3; }
  .cx-switch { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hb-js .cx-glance .cx-meter i, .hb-js .cx-glance .cx-meter b { animation: none; }
  .cx-sw::after, .cx-chip, .cx-r > * { transition: none; }
}
.cx-unk { box-shadow: none; border: 1.5px dotted rgba(246, 245, 250, .32); }
.cx-c[data-s='unk'] .cx-c-body > p:first-child { color: rgba(246, 245, 250, .42); }
.cx-gc em { font-style: normal; color: var(--hb-mut); }

/* ---- Beyond the table */
.cx-bus { padding: clamp(24px, 3vw, 40px); border-radius: 24px; background: linear-gradient(var(--cx-us), var(--cx-us)), var(--hb-card); box-shadow: inset 0 0 0 1px rgba(163, 124, 255, .28); }
.cx-bus h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.cx-bus h3 small { font-size: var(--hb-t-lbl); font-weight: 400; letter-spacing: 0; color: var(--hb-mut); }
.cx-bgrid { columns: 3 260px; column-gap: clamp(24px, 3vw, 40px); margin-top: 24px; }
.cx-bg { break-inside: avoid; padding-bottom: 24px; }
.cx-bg h4 { font-size: var(--hb-t-body); color: var(--hb-fg); padding-bottom: 10px; border-bottom: 1px solid var(--hb-line); }
.cx-bg li { padding: 9px 0; border-bottom: 1px solid rgba(246, 245, 250, .06); font-size: var(--hb-t-sm); line-height: 1.5; color: var(--hb-mut-2); text-wrap: pretty; }
.cx-brivals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.cx-bcol { padding: clamp(24px, 2.6vw, 32px); border-radius: 24px; background: var(--hb-card); box-shadow: inset 0 0 0 1px var(--hb-line); }
.cx-bnote { margin-top: 6px; font-size: var(--hb-t-sm); color: var(--hb-mut); }
.cx-bcol ul { margin-top: 16px; }
.cx-bcol li { padding: 12px 0; border-top: 1px solid var(--hb-line); font-size: 16px; line-height: 1.55; color: var(--hb-mut-2); }
@media (max-width: 860px) { .cx-brivals { grid-template-columns: minmax(0, 1fr); } }

/* ---- Product tiles (marks.mjs): one dark tile per app, the same size and look */
.cx-tile { display: inline-grid; place-items: center; flex: none; width: var(--ts); height: var(--ts); border-radius: calc(var(--ts) * .233); box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 16px -8px rgba(0, 0, 0, .7); overflow: hidden; }
.cx-tile > svg { display: block; }
/* each app in its own colours: Minda's app icon draws its own tile; Claude's mark in #D97757 on a warm dark tile;
   ChatGPT black on white, the colours of its app icon */
.cx-tile-claude { background: linear-gradient(#302e2a, #24231f); box-shadow: inset 0 0 0 1px rgba(217, 119, 87, .28), 0 1px 2px rgba(0, 0, 0, .5), 0 6px 16px -8px rgba(0, 0, 0, .7); }
.cx-tile-chatgpt { background: #fff; color: #0d0d0d; }
.cx-tile-chatgpt b { font-size: max(7.5px, calc(var(--ts) * .31)); font-weight: 800; letter-spacing: .01em; line-height: 1; }

/* the apps' colours on their meters and column heads (Minda's violet comes from .is-us) */
[data-app='claude'] .cx-meter i { background: #d97757; }
[data-app='claude'] .cx-meter b { background: rgba(217, 119, 87, .34); }
.cx-h[data-app='claude'] { box-shadow: inset 0 2px 0 #d97757; }
.cx-h[data-app='chatgpt'] { box-shadow: inset 0 2px 0 rgba(246, 245, 250, .85); }
.cx-gl-p { gap: 9px; }
.cx-who { display: none; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--hb-fg); }
.cx-chip svg { opacity: .7; }
.cx-chip.is-on svg { opacity: 1; }

/* ---- Where it works: each place a box, the app's parts inside (no lines between them) */
.cx-map { display: grid; gap: 8px; margin: 0; }
.cx-zone { padding: 12px 14px 10px; border-radius: 14px; border: 1px dashed rgba(246, 245, 250, .2); background: rgba(246, 245, 250, .02); }
.cx-zl { display: flex; align-items: center; gap: 6px; font-size: var(--hb-t-lbl); font-weight: 500; color: var(--hb-mut); }
.cx-zone ul { display: grid; gap: 6px; margin-top: 10px; }
.cx-zone li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 10px; border-radius: 8px; background: rgba(246, 245, 250, .045); font-size: var(--hb-t-sm); line-height: 1.45; color: var(--hb-fg); }
.cx-zone li > svg { margin-top: 1px; color: var(--hb-mut-2); }
.is-us .cx-zone { border-color: rgba(163, 124, 255, .32); }
.is-us .cx-zone li > svg { color: var(--hb-vi-2); }
.cx-ws { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cx-ws i { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-style: normal; font-size: var(--hb-t-lbl); color: var(--hb-mut-2); box-shadow: inset 0 0 0 1px var(--hb-line-2); }
.cx-ws i::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--hb-vi-2); }

/* ---- Compare: all three apps, or Minda with one of the others */
.cx-view { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 20px; }
.cx-view[hidden] { display: none; }
.cx-view-l { margin-right: 8px; font-size: var(--hb-t-sm); font-weight: 500; color: var(--hb-mut); }
.cx-view button { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 8px; border-radius: 999px; font-size: var(--hb-t-sm); font-weight: 500; color: var(--hb-mut-2); box-shadow: inset 0 0 0 1px var(--hb-line-2); transition: background-color .2s, color .2s, box-shadow .2s; }
.cx-view button:hover { color: var(--hb-fg); background: rgba(246, 245, 250, .06); }
.cx-view button[aria-checked='true'] { color: #0a0a0a; background: var(--hb-fg); box-shadow: none; }
.hb-cmp .cx-view button:focus-visible { outline-offset: 2px; border-radius: 999px; }
.cx-view-t { display: inline-flex; }
.cx-view-t .cx-tile + .cx-tile { margin-left: -6px; box-shadow: 0 0 0 2px #0a0a0a; }
.cx-view button[aria-checked='true'] .cx-view-t .cx-tile + .cx-tile { box-shadow: 0 0 0 2px var(--hb-fg); }
.cx-table[data-view='claude'] [data-app='chatgpt'], .cx-table[data-view='chatgpt'] [data-app='claude'] { display: none; }

/* ---- How it works: a small demo beside the answer on hover, keyboard focus or a tap (compare.mjs demo()). It opens to the
   right of the answer, and to the left in the last column on screen; it plays (typed request, then each step ticked)
   every time it opens, since it is display: none until then. */
.cx-c.has-ex { position: relative; cursor: help; outline: none; }
.cx-ex-i { display: inline-grid; margin-left: auto; color: var(--hb-mut); opacity: .55; transition: opacity .2s, color .2s; }
.cx-c.has-ex:hover .cx-ex-i, .cx-c.has-ex:focus-within .cx-ex-i { opacity: 1; color: var(--hb-fg); }
.cx-c.has-ex:focus-visible { box-shadow: inset 0 0 0 2px var(--hb-vi-2); }
.cx-demo { position: absolute; z-index: 40; top: 4px; left: calc(100% - 14px); width: 330px; display: none; gap: 12px; padding: 14px 16px 15px; border-radius: 14px; background: #141418; box-shadow: inset 0 0 0 1px var(--hb-line-2), 0 24px 48px -16px rgba(0, 0, 0, .9); text-align: left; pointer-events: none; }
.cx-c[data-app='chatgpt'] .cx-demo, .cx-table[data-view='claude'] .cx-c[data-app='claude'] .cx-demo { left: auto; right: calc(100% - 14px); }
.cx-c.has-ex:hover .cx-demo, .cx-c.has-ex:focus .cx-demo, .cx-c.has-ex:focus-within .cx-demo { display: grid; animation: cx-pop .2s var(--hb-ease) both; }
.cx-dm-hd { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.cx-dm-hd b { font-weight: 600; color: var(--hb-fg); }
.cx-dm-hd em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--hb-mut); }
.cx-dm-ask { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: rgba(246, 245, 250, .06); }
.cx-dm-you { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--hb-mut); }
.cx-dm-ty { font-size: 14px; line-height: 1.45; color: var(--hb-fg); }
.cx-dm-ty i { font-style: normal; opacity: 0; animation: cx-on .01s linear forwards; animation-delay: calc(.35s + var(--i) * .028s); }
.cx-dm-ty u { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -2px; text-decoration: none; background: var(--hb-vi-2); animation: cx-caret .9s steps(1) infinite, cx-off .01s linear forwards; animation-delay: 0s, calc(.65s + var(--n) * .028s); }
.cx-dm-steps { display: grid; gap: 8px; }
.cx-dm-st { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; line-height: 1.45; color: var(--hb-mut-2); opacity: 0; transform: translateY(4px); animation: cx-in .35s var(--hb-ease) forwards; animation-delay: var(--d); }
.cx-dm-ck { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; color: transparent; box-shadow: inset 0 0 0 1.5px var(--hb-line-2); animation: cx-tick .3s var(--hb-ease) forwards; animation-delay: calc(var(--d) + .45s); }
.cx-dm-src { font-size: 12px; line-height: 1.45; color: var(--hb-mut); }
/* The scenes (compare.mjs SCENES): each kind of item its own frame; a step comes in at its --d. */
.cx-in { opacity: 0; transform: translateY(4px); animation: cx-in .35s var(--hb-ease) forwards; animation-delay: var(--d); }
.cx-demo :where(p) { margin: 0; }
/* chat: the request on the right, the answer in bubbles on the left */
.cx-k-chat { display: grid; gap: 6px; }
.cx-bb { max-width: 86%; padding: 8px 11px; border-radius: 14px 14px 14px 4px; background: rgba(246, 245, 250, .07); font-size: 13.5px; line-height: 1.45; color: var(--hb-mut-2); }
.cx-bb-you { justify-self: end; border-radius: 14px 14px 4px 14px; background: #2b2540; color: var(--hb-fg); }
/* page: a browser window, each step an action with the pointer */
.cx-k-win { border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--hb-line); background: #0d0d10; }
.cx-wn-bar { display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; background: #1b1b21; }
.cx-wn-bar > i { width: 7px; height: 7px; border-radius: 50%; background: rgba(246, 245, 250, .18); }
.cx-wn-url { display: flex; align-items: center; gap: 6px; flex: 1; height: 17px; margin-left: 8px; padding: 0 8px; border-radius: 99px; background: #0d0d10; color: var(--hb-mut); }
.cx-wn-url b { height: 5px; width: 46%; border-radius: 99px; background: rgba(246, 245, 250, .14); }
.cx-wn-body { display: grid; gap: 7px; padding: 10px 11px 12px; }
.cx-wn-ask { padding: 6px 9px; border-radius: 8px; background: #2b2540; font-size: 13px; line-height: 1.4; color: var(--hb-fg); }
.cx-act { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 13px; line-height: 1.45; color: var(--hb-mut-2); }
.cx-act svg { margin-top: 2px; color: var(--hb-vi-2); }
/* files: a folder, a row per step */
.cx-k-files { border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--hb-line); }
.cx-fl-hd { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #1b1b21; font-size: 13px; color: var(--hb-fg); }
.cx-fl-hd svg { color: #f5c451; flex: none; }
.cx-fl-row { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px 10px; border-top: 1px solid var(--hb-line); font-size: 13px; line-height: 1.45; color: var(--hb-mut-2); }
.cx-fl-row svg { margin-top: 2px; color: var(--hb-mut); }
/* flow: the trigger, then the runs on a timeline */
.cx-k-flow { display: grid; gap: 10px; }
.cx-fw-trig { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(245, 196, 81, .1); box-shadow: inset 0 0 0 1px rgba(245, 196, 81, .28); font-size: 13px; line-height: 1.45; color: var(--hb-fg); }
.cx-fw-trig svg { margin-top: 2px; color: #f5c451; flex: none; }
.cx-k-flow ol { position: relative; display: grid; gap: 10px; margin: 0; padding: 0 0 0 20px; list-style: none; }
.cx-k-flow ol::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1.5px; background: var(--hb-line-2); }
.cx-k-flow li { position: relative; font-size: 13px; line-height: 1.45; color: var(--hb-mut-2); }
.cx-fw-dot { position: absolute; left: -20px; top: 4px; width: 11px; height: 11px; border-radius: 50%; background: #141418; box-shadow: inset 0 0 0 1.5px var(--hb-line-2); animation: cx-dot .3s var(--hb-ease) forwards; animation-delay: calc(var(--d) + .3s); }
/* cards: each step arrives as an alert card */
.cx-k-cards { display: grid; gap: 6px; }
.cx-cd-ask { font-size: 13px; line-height: 1.45; color: var(--hb-mut); }
.cx-cd { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 9px; align-items: start; padding: 9px 10px; border-radius: 12px; background: #1d1d23; box-shadow: inset 0 0 0 1px var(--hb-line); font-size: 13px; line-height: 1.4; color: var(--hb-fg); opacity: 0; transform: translateX(18px); animation: cx-in .4s var(--hb-ease) forwards; animation-delay: var(--d); }
.cx-cd em { font-style: normal; font-size: 11px; color: var(--hb-mut); }
/* screen: a monitor with the agent's border, the steps as captions on it */
.cx-k-screen { display: grid; justify-items: center; }
.cx-sc-mon { display: grid; gap: 6px; align-content: start; width: 100%; min-height: 120px; padding: 10px 11px; border-radius: 9px; background: linear-gradient(160deg, #1d2335, #14141a); box-shadow: inset 0 0 0 2px rgba(163, 124, 255, .55); }
.cx-sc-ask { justify-self: start; padding: 5px 9px; border-radius: 8px; background: rgba(10, 10, 14, .7); font-size: 12.5px; line-height: 1.4; color: var(--hb-fg); }
.cx-sc-cap { padding: 6px 9px; border-radius: 8px; background: rgba(246, 245, 250, .08); font-size: 13px; line-height: 1.4; color: var(--hb-mut-2); }
.cx-sc-stand { width: 34%; height: 8px; margin-top: 3px; border-radius: 0 0 6px 6px; background: #24242c; }
/* cols: side by side, one column per step */
.cx-k-cols { display: grid; gap: 8px; }
.cx-cl-ask { font-size: 13px; line-height: 1.45; color: var(--hb-fg); }
.cx-cl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cx-cl-grid[data-n='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cx-cl { display: grid; gap: 7px; align-content: start; padding: 8px; border-radius: 9px; background: #1b1b21; box-shadow: inset 0 0 0 1px var(--hb-line); font-size: 12.5px; line-height: 1.4; color: var(--hb-mut-2); }
.cx-cl-bar { height: 5px; width: 60%; border-radius: 99px; background: var(--hb-vi-2); opacity: .7; }
/* term: the request at a prompt, each step a line of output */
.cx-k-term { display: grid; gap: 6px; padding: 10px 11px; border-radius: 10px; background: #0b0b0e; box-shadow: inset 0 0 0 1px var(--hb-line); }
.cx-tm-in { display: flex; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--hb-fg); }
.cx-tm-in b { color: var(--hb-vi-2); }
.cx-tm-out { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 13px; line-height: 1.45; color: var(--hb-mut-2); }
.cx-tm-out i { display: inline-grid; place-items: center; margin-top: 3px; color: #30d158; }
/* rows: settings, each step a row whose switch turns on */
.cx-k-rows { display: grid; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--hb-line); }
.cx-rw-ask { padding: 8px 11px; background: #1b1b21; font-size: 13px; line-height: 1.45; color: var(--hb-fg); }
.cx-rw { display: grid; grid-template-columns: minmax(0, 1fr) 26px; gap: 10px; align-items: center; padding: 8px 11px; border-top: 1px solid var(--hb-line); font-size: 13px; line-height: 1.4; color: var(--hb-mut-2); }
.cx-rw-ask + .cx-rw { border-top: 0; }
.cx-sw { position: relative; width: 26px; height: 15px; border-radius: 99px; background: rgba(246, 245, 250, .16); animation: cx-swbg .25s var(--hb-ease) forwards; animation-delay: calc(var(--d) + .35s); }
.cx-sw::after { content: ''; position: absolute; left: 2px; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; animation: cx-swon .25s var(--hb-ease) forwards; animation-delay: calc(var(--d) + .35s); }
/* voice: a live wave, then what was said and done */
.cx-k-voice { display: grid; gap: 7px; }
.cx-vo-wave { display: flex; align-items: center; gap: 3px; height: 28px; }
.cx-vo-wave i { flex: 1; height: 100%; border-radius: 2px; background: var(--hb-vi-2); transform: scaleY(.25); animation: cx-wave 1s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -.13s); }
.cx-vo-said { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.45; color: var(--hb-fg); }
.cx-vo-said svg { margin-top: 3px; color: var(--hb-vi-2); flex: none; }
.cx-vo-cap { font-size: 13px; line-height: 1.45; color: var(--hb-mut-2); }
/* phone: on a phone */
.cx-k-phone { display: grid; justify-items: center; }
.cx-ph { display: grid; gap: 6px; align-content: start; width: 190px; min-height: 150px; padding: 18px 10px 12px; border-radius: 22px; background: #0d0d10; box-shadow: inset 0 0 0 2px #2e2e36; }
.cx-ph-notch { justify-self: center; width: 46px; height: 5px; margin: -8px 0 4px; border-radius: 99px; background: #2e2e36; }
.cx-ph-ask { padding: 6px 9px; border-radius: 10px; background: #2b2540; font-size: 12.5px; line-height: 1.4; color: var(--hb-fg); }
.cx-ph-row { padding: 6px 9px; border-radius: 10px; background: rgba(246, 245, 250, .07); font-size: 12.5px; line-height: 1.4; color: var(--hb-mut-2); }
@keyframes cx-pop { from { opacity: 0; transform: translateY(4px) scale(.98); } }
@keyframes cx-on { to { opacity: 1; } }
@keyframes cx-off { to { opacity: 0; } }
@keyframes cx-caret { 50% { background: transparent; } }
@keyframes cx-in { to { opacity: 1; transform: none; } }
@keyframes cx-tick { to { color: #062a12; background: #30d158; box-shadow: none; } }
@keyframes cx-dot { to { background: #30d158; box-shadow: none; } }
@keyframes cx-swbg { to { background: #30d158; } }
@keyframes cx-swon { to { transform: translateX(11px); } }
@keyframes cx-wave { to { transform: scaleY(1); } }
@media (max-width: 860px) {
  /* a phone has no hover: a tap on the answer opens its demo in place */
  .cx-demo, .cx-c[data-app='chatgpt'] .cx-demo, .cx-table[data-view='claude'] .cx-c[data-app='claude'] .cx-demo { position: static; width: auto; margin-top: 12px; box-shadow: inset 0 0 0 1px var(--hb-line-2); }
}
@media (prefers-reduced-motion: reduce) {
  .cx-c.has-ex:hover .cx-demo, .cx-c.has-ex:focus .cx-demo, .cx-c.has-ex:focus-within .cx-demo { animation: none; }
  .cx-dm-ty i, .cx-dm-st { opacity: 1; transform: none; animation: none; }
  .cx-dm-ty u { display: none; }
  .cx-dm-ck { animation: none; color: #062a12; background: #30d158; box-shadow: none; }
  .cx-in, .cx-cd { opacity: 1; transform: none; animation: none; }
  .cx-fw-dot { animation: none; background: #30d158; box-shadow: none; }
  .cx-sw { animation: none; background: #30d158; }
  .cx-sw::after { animation: none; transform: translateX(11px); }
  .cx-vo-wave i { animation: none; transform: scaleY(.6); }
}