/* AI browsers beside Minda (browsers.mjs): /compare/ai-browsers/, the pages of Minda and one rival, and the retired product's
   page. They wear compare.css (loaded first) and its one type scale: headings, titles 20, text 15, labels 13. The big tables
   are a row per product, a card per product on a narrow screen; the table of two is compare.css's .cx-table, a card per
   function on a phone. No sideways page scroll at 360 px. */
.hb-bx { --cx-bar-h: 0px; }

/* ---- Marks and small words: "No" is only ever its maker's own word, a quiet cross; a state in a pill */
.bx-x { color: var(--hb-mut-2); box-shadow: inset 0 0 0 1.5px var(--hb-line-2); }
.hb-bx :is(.cx-c, .bx-c)[data-s='not-listed'] .cx-v b, .bx-c:is([data-s='no'], [data-s='unk']) .cx-v b { font-weight: 500; color: var(--hb-mut); }
.bx-c[data-s='unk'] .cx-c-body > p:first-child, .hb-bx .cx-c[data-s='unk'] .cx-c-body > p:first-child { color: var(--hb-mut); }
.bx-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; font-size: var(--hb-t-lbl); font-weight: 500; line-height: 1; white-space: nowrap; color: var(--hb-warm); background: var(--hb-warm-bg); }
.bx-unk { color: var(--hb-mut); }
.bx-srcs { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: var(--hb-t-lbl); color: var(--hb-mut); }
.bx-tnote { margin-bottom: 32px; max-width: 46em; }
.hb-qa-head + .bx-tnote { margin-top: 32px; }
.bx-wait { margin-top: 20px; }

/* ---- Hero: the products on the page, the two side by side, or what moves out */
.bx-hero .hb-hero-visual { justify-items: stretch; }
.bx-list { margin: 0; padding: clamp(18px, 2vw, 24px); 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); }
.bx-list-cap { font-size: var(--hb-t-lbl); font-weight: 500; color: var(--hb-mut); }
.bx-list > ol { margin-top: 8px; columns: 2 240px; column-gap: 24px; }
.bx-li { padding: 12px 0; border-top: 1px solid var(--hb-line); break-inside: avoid; }
.bx-li-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.bx-pn { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: var(--hb-t-sm); font-weight: 600; color: var(--hb-fg); }
.bx-by { font-size: var(--hb-t-lbl); color: var(--hb-mut); }
.bx-li-t, .bx-li-n { margin-top: 4px; font-size: var(--hb-t-lbl); line-height: 1.5; color: var(--hb-mut-2); text-wrap: pretty; overflow-wrap: anywhere; }
.bx-li-n { color: var(--hb-mut); }
.bx-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bx-pc { padding: clamp(18px, 2vw, 24px); border-radius: 24px; background: var(--hb-card); box-shadow: inset 0 0 0 1px var(--hb-line); }
.bx-pc.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); }
.bx-dl { margin-top: 16px; }
.bx-dl > div { padding: 12px 0; border-top: 1px solid var(--hb-line); }
.bx-dl dt { margin-bottom: 6px; font-size: var(--hb-t-lbl); font-weight: 500; color: var(--hb-mut); }
.bx-dl .cx-c-body > p:first-child { font-size: var(--hb-t-lbl); }
.bx-mvl { margin-top: 8px; }
.bx-mvl > li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px; padding: 10px 0; border-top: 1px solid var(--hb-line); }
.bx-mv-w { font-size: var(--hb-t-sm); font-weight: 500; color: var(--hb-fg); }
.bx-mv-s { font-size: var(--hb-t-lbl); color: var(--hb-mut-2); }
.bx-card-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hb-line); font-size: var(--hb-t-lbl); line-height: 1.5; color: var(--hb-mut); }

/* ---- What an AI browser and an agentic browser are: two answers side by side */
.bx-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px clamp(40px, 6vw, 96px); }
.bx-def .hb-lead { margin-top: 20px; }
.bx-def > p:not(.hb-lead) { margin-top: 16px; font-size: var(--hb-t-body); line-height: 1.65; color: var(--hb-mut-2); max-width: 36em; text-wrap: pretty; }

/* ---- The big tables: a group of functions each, a row per product */
.bx-grp { margin-top: clamp(40px, 5vw, 64px); }
.bx-tnote + .bx-grp { margin-top: 0; }
.bx-grp-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 16px; }
.bx-grp-h h3 { font-size: var(--hb-t-h3); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.bx-grp-h p { font-size: var(--hb-t-sm); line-height: 1.5; color: var(--hb-mut); }
.bx-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.bx-table thead th { position: sticky; top: var(--cx-top); z-index: 5; padding: 14px 14px 12px; 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); }
.bx-th-p { width: 17%; font-size: var(--hb-t-sm); font-weight: 500; color: var(--hb-mut); }
.bx-table tbody > tr > * { padding: 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hb-line); transition: background-color .2s; }
.bx-table .bx-p { font-weight: 400; }
.bx-p .bx-by { display: block; margin-top: 4px; }
.bx-r:hover > * { background-color: var(--cx-row); }
.bx-r.is-us > * { background-color: var(--cx-us); }
.bx-fn { display: none; }
.bx-table .cx-v { gap: 6px; }
.bx-table .cx-c-body > p:first-child { font-size: var(--hb-t-lbl); line-height: 1.5; overflow-wrap: anywhere; }

/* ---- The table of two: a group title row over its functions */
.bx-vs .cx-h:not(.is-us) .cx-h-b { padding-left: 0; }
.bx-gh > th { padding: 48px 18px 14px; text-align: left; font-weight: 400; border-bottom: 1px solid var(--hb-line-2); }
.bx-g:first-of-type .bx-gh > th { padding-top: 24px; }

/* ---- Which one fits which job */
.bx-joblist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.bx-job { padding: clamp(20px, 2.2vw, 28px); border-radius: 20px; background: var(--hb-card); box-shadow: inset 0 0 0 1px var(--hb-line); }
.bx-job-h h3 { font-size: var(--hb-t-h3); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.bx-job-h p { margin-top: 6px; font-size: var(--hb-t-lbl); color: var(--hb-mut); }
.bx-job-h a, .bx-jl dd a { color: var(--hb-mut-2); text-decoration: underline; text-decoration-color: rgba(246, 245, 250, .3); text-underline-offset: 3px; }
.bx-job-h a:hover, .bx-jl dd a:hover { color: var(--hb-fg); text-decoration-color: currentColor; }
.bx-job dl { margin-top: 16px; }
.bx-jl { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 4px 16px; padding: 10px 0; border-top: 1px solid var(--hb-line); }
.bx-jl dt { display: flex; align-items: center; gap: 8px; font-size: var(--hb-t-lbl); font-weight: 500; color: var(--hb-mut); }
.bx-jl dt .cx-mark { width: 18px; height: 18px; }
.bx-jl dd { font-size: var(--hb-t-sm); line-height: 1.5; color: var(--hb-fg); }
.bx-jl dd a { color: var(--hb-fg); }

/* ---- Where each one is ahead: as many columns as products, up to four */
.bx-ahead[data-n='1'] { grid-template-columns: minmax(0, 1fr); max-width: 40em; }
.bx-ahead[data-n='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bx-ahead[data-n='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---- Moving out of a retired product */
.bx-mvt { width: 100%; margin-top: 48px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.bx-mvt thead th { padding: 0 18px 12px 0; text-align: left; font-size: var(--hb-t-lbl); font-weight: 500; color: var(--hb-mut); border-bottom: 1px solid var(--hb-line-2); }
.bx-mvt thead th:first-child { width: 28%; }
.bx-mvt tbody > tr > * { padding: 16px 18px 16px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hb-line); }
.bx-mv > th { font-size: var(--hb-t-sm); font-weight: 500; color: var(--hb-fg); }
.bx-mv > td > p:first-child { font-size: var(--hb-t-sm); line-height: 1.55; color: var(--hb-mut-2); text-wrap: pretty; }

.bx-more .hb-specs { margin-top: 32px; }

@media (max-width: 1080px) {
  /* each product becomes a card: its name, then each function's answer under the function's name */
  .bx-table, .bx-table tbody, .bx-table tr, .bx-table th, .bx-table td { display: block; width: auto; }
  .bx-table thead { display: none; }
  .bx-table .bx-r { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; border-radius: 20px; background: var(--hb-card); box-shadow: inset 0 0 0 1px var(--hb-line); overflow: hidden; }
  .bx-table .bx-r.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); }
  .bx-table .bx-r > * { padding: 14px 18px; background: none; }
  .bx-table .bx-p { grid-column: 1 / -1; padding-top: 18px; }
  .bx-r:hover > *, .bx-r.is-us > * { background-color: transparent; }
  .bx-fn { display: block; margin-bottom: 6px; font-size: var(--hb-t-lbl); font-weight: 500; color: var(--hb-mut); }
  .bx-ahead[data-n='3'] { grid-template-columns: minmax(0, 1fr); }
  .bx-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .bx-pair, .bx-joblist, .bx-ahead[data-n='2'] { grid-template-columns: minmax(0, 1fr); }
  .bx-gh > th { padding: 36px 0 4px; border: 0; }
  .bx-g:first-of-type .bx-gh > th { padding-top: 8px; }
  .bx-mvt, .bx-mvt tbody, .bx-mvt tr, .bx-mvt th, .bx-mvt td { display: block; width: auto; }
  .bx-mvt thead { display: none; }
  .bx-mvt tbody > tr { padding: 14px 0; border-bottom: 1px solid var(--hb-line); }
  .bx-mvt tbody > tr > * { padding: 0; border: 0; }
  .bx-mv > td { margin-top: 6px; }
}
@media (max-width: 640px) {
  .bx-table .bx-r { grid-template-columns: minmax(0, 1fr); }
  .bx-list > ol { columns: 1; }
  .bx-jl { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .bx-table tbody > tr > * { transition: none; }
}