/* Hallmark · macrostructure: Product Template + Reference Sheet · tone: technical-warm · anchor hue: lavender + gold
   /mcp page-only styles (A5, Krish review Oct 19: half the words, testimonials high, no tabs, one table; tightened
   Oct 20, AK: "UIs break, put things in a table, merge, keep it short").
   Now: hero, setup as ONE table (assistant x 3 steps), "What can I ask it?" as one ruled table, then one merged
   section: a 3x2 ruled grid of safety and cost facts plus the agent comparison. Brand tokens from .sf.
   Loaded after surfaces.css (shared with /api) and before platform.css (the shared hero).
   Prefixes: mc- (this page), mg- (safe grid), sm- (agent table + server URL, from surfaces.css). */

/* Hero: the assistants it works in, one small row under the CTAs */
.mc-assist { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.mc-assist a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 10px; border-radius: 999px; background: #fff; box-shadow: var(--sh-sm); color: var(--ink); font: 700 14px/1 Manrope, Arial, sans-serif; text-decoration: none; transition: transform .16s var(--ease), box-shadow .2s var(--ease); }
.mc-assist img { display: block; flex: none; width: 22px; height: 22px; }
@media (hover: hover) and (pointer: fine) { .mc-assist a:hover { box-shadow: var(--sh-md); transform: translateY(-1px); } }
.mc-assist a:active { transform: scale(.96); }
.mc-assist a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Section rhythm: compact, like the rest of the V2 pages (80% zoom density) */
.mc .mc-sec { padding: 64px 0; }
@media (min-width: 1024px) { .mc .mc-sec { padding: 72px 0; } }
@media (max-width: 599px) { .mc .mc-sec { padding: 56px 0; } }
.mc .mc-sec .sf-head { margin-bottom: 24px; }
.mc .mc-sec .sf-head h2 { font-size: clamp(28px, 2.2vw + 12px, 36px); }
.mc .mc-sec .sf-head p { margin-top: 8px; font-size: 16px; line-height: 1.55; }
.mc .sf-shell { max-width: 1120px; }

/* How do I connect it? One table: assistant, three steps, the link */
.mc-conn { width: 100%; max-width: 1040px; margin: 0 auto; border-collapse: separate; border-spacing: 0; table-layout: fixed; background: #fff; border: 1px solid var(--lav); border-radius: 24px; overflow: hidden; font-size: 14px; line-height: 1.45; }
.mc-conn th, .mc-conn td { padding: 10px 16px; text-align: start; vertical-align: middle; border-top: 1px solid var(--lav); }
.mc-conn thead th, .mc-conn thead td { padding-block: 10px; border-top: 0; background: var(--mist); font: 700 14px/1.4 Manrope, Arial, sans-serif; color: var(--ink); }
.mc-conn tbody th { width: 21%; padding-inline-start: 20px; }
.mc-conn tbody tr { scroll-margin-top: 112px; }
.mc-conn__id { display: flex; align-items: center; gap: 10px; }
.mc-conn__id img { display: block; flex: none; width: 28px; height: 28px; }
.mc-conn__id > span { display: flex; flex-direction: column; min-width: 0; }
.mc-conn__id b { font: 700 16px/1.2 var(--disp); letter-spacing: -.01em; color: var(--ink); }
.mc-conn__id em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--slate); }
.mc-conn td { color: var(--ink); }
.mc-conn td.mc-conn__go { width: 17%; padding-inline-end: 20px; }
.mc-conn__go a { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 6px; min-height: 36px; font: 700 13px/1.3 var(--disp); color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold); text-decoration-thickness: 1.5px; }
.mc-conn__go a svg { flex: none; }
.mc-conn__go a:hover { text-decoration-color: var(--ink); }
.mc-conn__go a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.mc-url { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; margin-top: 20px; font-size: 14px; font-weight: 600; color: var(--slate); }
.sm-url { display: flex; align-items: center; gap: 12px; max-width: 100%; padding: 5px 5px 5px 18px; border-radius: 999px; background: var(--ink); color: #fff; }
.sm-url code { min-width: 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; color: var(--gold-300); }

/* What can I ask it? One ruled table on the section background: product, what comes back, a real prompt to try */
.mc-ask { width: 100%; max-width: 1040px; margin: 0 auto; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--lav); border-radius: 24px; overflow: hidden; font-size: 14px; line-height: 1.45; table-layout: fixed; }
.mc-ask th, .mc-ask td { padding: 12px 20px; text-align: start; vertical-align: top; border-top: 1px solid var(--lav); }
.mc-ask tbody th { padding-inline-start: 24px; }
.mc-ask td:last-child { padding-inline-end: 24px; }
.mc-ask thead th { padding-block: 12px; border-top: 0; background: var(--mist); font: 700 14px/1.4 Manrope, Arial, sans-serif; color: var(--ink); }
.mc-ask tbody tr:first-child > * { border-top: 0; }
.mc-ask col.c1 { width: 20%; } .mc-ask col.c2 { width: 28%; }
.mc-ask tbody th a { display: inline-block; font: 700 18px/1.2 var(--disp); color: var(--ink); text-decoration: none; }
.mc-ask tbody th a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mc-ask tbody th span { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--slate); }
.mc-ask td:nth-child(2) { color: var(--ink); }
.mc-q { margin: 0; font-weight: 600; color: var(--ink); }
.mc-act { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin: 2px 0 0; }
.mc-act a { display: inline-flex; align-items: center; min-height: 32px; font: 700 13px/1.2 Manrope, Arial, sans-serif; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; text-decoration-color: var(--gold); }
.mc-act a:hover { text-decoration-color: var(--ink); }
.mc-act a:focus-visible, .mc-ask th a:focus-visible, .mc-more a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.mc-more { max-width: 1040px; margin: 16px auto 0; text-align: center; font-size: 14px; line-height: 1.6; color: var(--slate); }
.mc-more a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }

/* Is it safe, and what does it cost? Two columns: a ruled 2 x 3 grid of facts on the left, the agent comparison on the right */
.mc-safe { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px 40px; align-items: stretch; max-width: 1040px; margin: 0 auto; }
.mc-facts { width: 100%; height: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--lav); border-radius: 24px; overflow: hidden; font-size: 14px; line-height: 1.45; color: var(--ink); }
.mc-facts th, .mc-facts td { padding: 12px 20px; text-align: start; vertical-align: middle; border-top: 1px solid var(--lav); }
.mc-facts thead th { padding-block: 12px; border-top: 0; background: var(--mist); font: 700 14px/1.4 Manrope, Arial, sans-serif; color: var(--ink); }
.mc-facts tbody th { width: 38%; padding-inline-start: 24px; font: 700 16px/1.3 var(--disp); color: var(--ink); }
.mc-facts td { padding-inline-end: 24px; color: var(--slate); }
.mc-chip { display: inline-block; margin-inline-end: 8px; padding: 2px 10px; border-radius: 8px; background: var(--lav); color: var(--ink); font: 700 12px/1.6 var(--mono); white-space: nowrap; }

/* Building your own AI agent? One mist panel: the pitch, then the table */
.mc-agents { padding: 20px 24px; border-radius: 24px; background: var(--mist); }
.mc-agents h3 { margin: 0; font: 700 22px/1.2 var(--disp); letter-spacing: -.02em; text-wrap: balance; }
.mc-agents p { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--slate); }
.mc-agents .mc-agents__a { margin-top: 12px; }
.mc-agents a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }
.mc .mc-agents .sm-agent { width: 100%; max-width: none; margin: 14px 0 0; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.mc .sm-agent th, .mc .sm-agent td { padding: 8px 10px; border-bottom: 1px solid var(--lav); }
.mc .sm-agent thead th { padding-top: 0; padding-bottom: 8px; border-bottom: 1px solid var(--lav); font: 700 13px/1.3 Manrope, Arial, sans-serif; color: var(--ink); }
.mc .sm-agent thead th:first-child, .mc .sm-agent tbody th { width: 40%; padding-left: 0; text-align: start; font-size: 14px; font-weight: 600; }
.mc .sm-agent .is-us { background: none; border-radius: 0; }
.mc .sm-agent thead .is-us { color: var(--ink); }
.mc .sm-agent thead .is-us span { display: inline-block; padding-bottom: 2px; box-shadow: 0 3px 0 var(--gold); }
.mc .sm-agent tbody tr:last-child > * { border-bottom: 0; }
.mc .sm-m { width: 24px; height: 24px; }
.mc .sm-m--no { background: #fff; color: var(--slate); }

@media (min-width: 1024px) {
}

@media (max-width: 1023px) {
  /* connect table: each assistant becomes a block, steps stacked as "Step n: ..." */
  .mc-conn, .mc-conn tbody, .mc-conn tr, .mc-conn th, .mc-conn td { display: block; width: auto !important; }
  .mc-conn { border: 0; background: none; border-radius: 0; overflow: visible; max-width: 640px; }
  .mc-conn thead { display: none; }
  .mc-conn tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .mc-conn tbody tr { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 20px; background: #fff; border: 1px solid var(--lav); }
  .mc-conn th, .mc-conn td, .mc-conn tbody th { padding: 0; border: 0; }
  .mc-conn tbody th { margin-bottom: 4px; }
  .mc-conn td[data-l]::before { content: attr(data-l) ": "; font-weight: 700; color: var(--slate); }
  .mc-conn td.mc-conn__go { margin-top: auto; padding-top: 4px; }

  .mc-ask thead, .mc-ask colgroup { display: none; }
  .mc-ask, .mc-ask tbody, .mc-ask tr, .mc-ask th, .mc-ask td { display: block; width: auto !important; }
  .mc-ask { border-radius: 20px; }
  .mc-ask tbody tr { padding: 14px 16px; border-top: 1px solid var(--lav); }
  .mc-ask tbody tr:first-child { border-top: 0; }
  .mc-ask th, .mc-ask td, .mc-ask tbody tr > * { padding: 0; border: 0 !important; }
  .mc-ask tbody th { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
  .mc-ask tbody th span { margin: 0; }
  .mc-ask td { margin-top: 6px; }
  .mc-ask td:nth-child(2)::before { content: "What comes back: "; font-weight: 700; color: var(--slate); }
  .mc-ask td:nth-child(3)::before { content: "Try asking"; display: block; margin-bottom: 2px; font-size: 13px; font-weight: 700; color: var(--slate); }

  .mc-safe { grid-template-columns: minmax(0, 1fr); }
  .mc-facts { height: auto; }
}
@media (max-width: 767px) {
  .mc-facts, .mc-facts tbody, .mc-facts tr, .mc-facts th, .mc-facts td { display: block; width: 100% !important; }
  .mc-facts { border-radius: 20px; }
  .mc-facts thead { display: none; }
  .mc-facts tbody tr { padding: 12px 16px; }
  .mc-facts tbody tr + tr { border-top: 1px solid var(--lav); }
  .mc-facts th, .mc-facts td, .mc-facts tbody th { padding: 0; border: 0; }
  .mc-facts tbody th { margin-bottom: 4px; }
  .mc-act a { min-height: 44px; }
  .mc-more a, .mc-ask tbody th a { display: inline-block; padding: 11px 0; margin: -11px 0; }
  .mc-conn__go a { min-height: 44px; }
}
/* Phones: inline links in FAQ answers get a 40px+ tap area without moving the text; Copy buttons a 44px target */
@media (max-width: 767px) {
  .mc .sf-copy { min-height: 44px; padding-inline: 18px; display: inline-flex; align-items: center; }
}
@media (max-width: 599px) {
  .mc-conn tbody { grid-template-columns: minmax(0, 1fr); }
  .mc-assist { justify-content: center; }
  .sm-url { padding-left: 14px; }
  .mc-agents { padding: 16px; }
  .mc .sm-agent th, .mc .sm-agent td { padding: 8px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-assist a { transition: none; }
}

/* Phones: inline links in the section heads get a 44px tap area without moving the text */
@media (max-width: 767px) {
  .mc .sf-head a, .mc .mc-agents a { display: inline-block; padding: 12px 0; margin: -12px 0; }
}
/* MOBILE-B (Oct 21): shorter sections, connect cards and safety facts two to a row on phones */
@media (max-width: 767px) {
  .mc .mc-sec { padding: 36px 0; }
  .mc .sf-head { margin-bottom: 20px; }
  .mc-conn tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mc-conn tbody tr { padding: 12px; gap: 2px; border-radius: 16px; }
  .mc-conn td { font-size: 14px; line-height: 1.4; }
  .mc-facts tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-facts tbody tr { padding: 12px; }
  .mc-facts tbody tr + tr { border-top: 1px solid var(--lav); }
  .mc-facts tbody tr:nth-child(2) { border-top: 0; }
  .mc-facts tbody tr:nth-child(odd) { border-right: 1px solid var(--lav); }
  .mc-ask tbody tr { padding: 12px 14px; }
  .mc-agents { padding: 14px; }
}
@media (max-width: 359px) {
  .mc-conn tbody, .mc-facts tbody { grid-template-columns: minmax(0, 1fr); }
  .mc-facts tbody tr:nth-child(odd) { border-right: 0; }
  .mc-facts tbody tr:nth-child(2) { border-top: 1px solid var(--lav); }
}