/* /surfaces (Website V2, Oct 26 2026): the merge of /api, /mcp and /components. Loaded LAST, after components.css (cm-*), surfaces.css (sf-*),
   api.css (ap-*) and mcp.css (mc-*), which the three old pages used. Body carries "cm sf ap mc su"; this sheet settles what those sheets
   disagree on (section rhythm, heads, hero) and styles the two new pieces: the hero dock with three groups and the three-surface table.
   Locked palette only. Rollback: restore the Oct 26 backups (04-build/backups/oct26-sonnet-surfaces/). */

.su { --pad: 64px; }
@media (max-width: 1023px) { .su { --pad: 48px; } }

/* ---------- One rhythm for every section and every section head ---------- */
.su .cm-sec { padding: var(--pad) 0; }
.su .cm-head { max-width: 760px; margin: 0 auto 28px; }
.su .cm-head h2 { font-size: clamp(28px, 2.2vw + 12px, 36px); }
.su .cm-head p { margin-top: 8px; line-height: 1.55; }
.su .cm-head a, .su .mc-more a, .su .cm-foot a, .su .mc-agents a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }
.su .cm-shell { max-width: 1120px; }
.su .ap-dev { background: var(--white); }

/* ---------- Hero ---------- */
.su .cm-hero { padding: 120px 0 40px; }
.su .cm-hero h1 { max-width: 24ch; font-size: clamp(34px, 3vw + 12px, 52px); }
.su .cm-lead { max-width: 680px; margin-top: 16px; font-size: 17px; }
.su .cm-cta { margin-top: 24px; }

/* Dock: three groups (web app, browsers and inbox | MCP assistants | API), one white bar on desktop, one rounded card per group below */
.su .cm-dock { margin-top: 32px; }
.su .cm-dock__g > p { text-align: center; }
.su .cm-dock ul { justify-content: center; }
.su .cm-dock__ic svg { display: block; width: 28px; height: 28px; }
@media (max-width: 1023px) {
  .su .cm-dock { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .su .cm-dock__g, .su .cm-dock__g:first-child, .su .cm-dock__g:last-child, .su .cm-dock__g + .cm-dock__g { grid-column: auto; padding: 10px 10px 6px; background: var(--white); border: 1px solid var(--lav); border-radius: 20px; box-shadow: var(--sh-sm); }
}
@media (max-width: 767px) {
  .su .cm-hero { padding: 100px 0 32px; }
  .su .cm-dock { margin-top: 24px; }
  .su .cm-dock a { width: 58px; }
  .su .cm-dock__ic { width: 46px; height: 46px; }
  .su .cm-dock ul { gap: 2px; }
}
@media (max-width: 359px) {
  .su .cm-dock__g, .su .cm-dock__g:first-child, .su .cm-dock__g:last-child, .su .cm-dock__g + .cm-dock__g { padding: 8px 6px 4px; }
  .su .cm-dock a { width: 50px; }
  .su .cm-dock__ic { width: 40px; height: 40px; border-radius: 12px; }
  .su .cm-dock__ic img, .su .cm-dock__ic svg { width: 24px; height: 24px; }
  .su .cm-dock__n { font-size: 12px; }
}

/* ---------- The three surfaces, as one table ---------- */
.su-surf { max-width: 1040px; margin-inline: auto; }
.su .ap-tbl--surf tbody th { width: 20%; }
.su .ap-tbl--surf tbody th a { white-space: nowrap; }
.su .ap-tbl--surf td { padding-inline-end: 20px; vertical-align: middle; }
.su .ap-tbl--surf thead th:first-child { padding-inline-start: 24px; }

/* ---------- Integrations ledger: a wide mark (Zoho) shows by height, not as a square ---------- */
.su .cm-ledger img.su-wide { width: auto; height: 22px; max-width: 64px; }

/* ---------- Section tidy-ups where the old sheets assumed their own page ---------- */
.su .mc-conn, .su .mc-ask { margin-inline: auto; }
.su .ap-ep { max-width: 1040px; }
.su .mc-url { margin-top: 20px; }
.su .cm-foot { margin-top: 16px; }
.su .cm-card--ext { display: flex; flex-direction: column; }
.su .cm-card--ext .cm-link { margin-top: auto; align-self: flex-start; padding-top: 8px; }

/* One rhythm: every band uses the same --pad top and bottom. (Oct 28: the mid CTA strip and the Kairos band are gone, Kairos lives under the integrations.) */
.su .cm-kairos { padding: var(--pad) 0; background: var(--white); }
.su .cm-close { padding: var(--pad) 0; background: var(--white); }

/* Anchors (#api, #mcp, #components, every card): html already reserves 104px for the sticky nav, so the extra 84px
   margin from shell.css put headings ~250px down the screen. Sections land with their heading just under the nav. */
body.su main [id] { scroll-margin-top: 0; }
body.su main section[id], body.su main header[id] { scroll-margin-top: calc(24px - var(--pad)); }
body.su main #voices { scroll-margin-top: 0; }

@media (max-width: 767px) {
  .su .cm-head { margin-bottom: 20px; }
  .su .cm-hero h1 { max-width: 20ch; }
  .su .ap-tbl--surf tbody th, .su .ap-tbl--surf td { padding: 0; }
  .su .ap-tbl--surf tbody th a { white-space: normal; }
}
@media (max-width: 479px) {
  .su .cm-install { grid-template-columns: minmax(0, 1fr); }
  .su .cm-install a { grid-template-columns: 36px minmax(0, 1fr); }
}
.su .mc-conn__go a { flex-wrap: nowrap; }
@media (max-width: 1023px) {
  .su .ap-tbl--surf tbody th { width: auto; }
}
body.su main .cm-head[id], body.su main #connect, body.su main .mc-agents[id] { scroll-margin-top: -16px; }
@media (max-width: 359px) { .su .sm-url { border-radius: 24px; } }


/* =====================================================================================================================
   Oct 28 (F9, AK: "identify what is 90% needed; cut short what you can without losing anything").
   Compact facts, no chips, one line per integration, Kairos under the integrations, endpoint rows on one line.
   ===================================================================================================================== */

/* The agent comparison now sits under the MCP prompts (the safety table moved into the FAQ, Oct 26 PM W19) */
.su #tools .mc-agents { max-width: 1040px; margin: 24px auto 0; background: var(--white); border: 1px solid var(--lav); }
.su .mc-agents { padding: 16px 20px; }
.su .mc-agents .sm-agent { margin-top: 10px; }
.su .mc-agents .sm-agent th, .su .mc-agents .sm-agent td { padding-block: 6px; }

/* API endpoints: product name and type on one line, one row of text each */
@media (min-width: 1024px) {
  .su .ap-ep col.c1 { width: 35%; } .su .ap-ep col.c2 { width: 25%; } .su .ap-ep col.c3 { width: 40%; }
  .su .ap-ep th, .su .ap-ep td { padding-block: 9px; vertical-align: baseline; }
  .su .ap-ep tbody th { display: table-cell; }
  .su .ap-ep tbody th span { display: inline; margin: 0 0 0 10px; font-size: 13px; }
}

/* Developer facts: six short entries in two columns, hairline between rows, no chips */
.su .su-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; max-width: 1040px; margin: 0 auto; }
.su .su-facts > div { padding: 14px 0 16px; border-top: 1px solid var(--lav); }
.su .su-facts dt { font: 700 17px/1.25 var(--disp); color: var(--ink); }
.su .su-facts dd { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--slate); text-wrap: pretty; }
.su .su-facts dd a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; white-space: nowrap; }
.su .ap-dev__grid { margin-bottom: 24px; }

/* Integrations: category and one line on the left, marks on the right; Kairos closes the section */
@media (min-width: 1100px) {
  .su .cm-ledger { max-width: 1040px; }
  .su .cm-ledger > div { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); padding-block: 12px; }
  .su .cm-ledger dt { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: baseline; gap: 16px; }
  .su .cm-ledger dt span { font-size: 14px; line-height: 1.45; }
  .su .cm-ledger ul { flex-wrap: nowrap; }
}
.su .su-kairos { max-width: 760px; margin: 40px auto 0; padding-top: 32px; border-top: 1px solid var(--rule); text-align: center; scroll-margin-top: 0; }
.su .su-kairos h3 { font: 700 22px/1.2 var(--disp); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.su .su-kairos p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--slate); text-wrap: pretty; }
.su .su-kairos a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }

/* Browser extension card: the three install rows share the height the Web app and Outlook cards set, so the card has no empty band */
@media (min-width: 900px) {
  .su .cm-card--ext .cm-install { flex: 1; display: flex; flex-direction: column; }
  .su .cm-card--ext .cm-install li { flex: 1; display: flex; }
  .su .cm-card--ext .cm-install li a { flex: 1; align-items: center; }
}

@media (max-width: 1099px) {
  .su .cm-ledger ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
}
@media (max-width: 899px) {
  .su .su-facts { grid-template-columns: minmax(0, 1fr); }
  .su .su-kairos { margin-top: 32px; padding-top: 24px; }
}
@media (max-width: 359px) {
  .su .cm-ledger ul { grid-template-columns: repeat(2, minmax(0, max-content)); gap: 8px 12px; }
  .su .cm-ledger li span { white-space: nowrap; }
}


/* =====================================================================================================================
   AK Nov 4: surfaces are where the rep works; MCP and the API connect them. Hero on the home hero's type scale with the
   customer logos inside it, a six-surface dock with hover CTAs, the six-surface table, the 1200px frame (1152px content)
   and every desktop section one screen tall with its content centred.
   ===================================================================================================================== */
.su .cm-shell { max-width: 1200px; }
.su .cm-head { max-width: none; }
.su .cm-head p { max-width: 900px; margin-inline: auto; }

/* Hero: first screen on desktop, logos on its bottom edge, same background */
.su .su-hero { display: flex; flex-direction: column; padding: 112px 0 0; }
.su .su-hero__in { display: flex; flex-direction: column; align-items: center; width: 100%; }
.su .cm-hero h1 { max-width: none; font: 700 clamp(40px, 5.2vw, 72px)/1.04 var(--disp); letter-spacing: -.03em; }
.su .cm-lead { max-width: 880px; margin: 18px auto 0; font: 600 clamp(18px, 1.6vw, 22px)/1.45 Manrope, Arial, sans-serif; color: var(--ink); text-wrap: balance; }
.su .su-hero .hxp { padding: 20px 24px 28px; }
@media (min-width: 1024px) and (min-height: 600px) {
  .su .su-hero { min-height: 100svh; box-sizing: border-box; }
  .su .su-hero__in { flex: 1; justify-content: center; }
}

/* Dock: six surface groups on one bar */
.su .cm-dock__g { padding: 0 10px; }
.su .cm-dock ul { gap: 2px; }
.su .cm-dock a { width: 72px; }
.su .cm-dock__g > p { white-space: nowrap; }

/* Hover or keyboard-focus CTA over the web app and Chrome tiles */
.su .su-tiphost { position: relative; }
.su .su-tip {
  position: absolute; z-index: 6; left: 50%; bottom: calc(100% + 6px); display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 8px 6px; border-radius: 18px; background: var(--ink); box-shadow: var(--sh-md); white-space: nowrap;
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s;
}
.su .su-tip::after { content: ""; position: absolute; left: 50%; top: 100%; width: 12px; height: 12px; background: var(--ink); transform: translate(-50%, -7px) rotate(45deg); border-radius: 2px; }
.su .su-tip::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.su .cm-dock .su-tip a { width: auto; flex-direction: row; padding: 2px 6px; border-radius: 999px; }
.su .cm-dock .su-tip__go { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; background: var(--gold); color: var(--ink); font: 700 14px/1 var(--disp); text-decoration: none; }
.su .cm-dock .su-tip__alt { color: var(--white); text-decoration: underline; font: 700 12px/1.4 Manrope, Arial, sans-serif; text-underline-offset: 3px; }
.su .su-tip a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.su .su-tiphost:has(:focus-visible) .su-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
@media (hover: hover) and (pointer: fine) {
  .su .su-tiphost:hover .su-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
  .su .cm-dock .su-tip__go:hover { background: var(--white); }
}
@media (prefers-reduced-motion: reduce) { .su .su-tip { transition: none; } }

/* The six surfaces: name and marks, what the rep gets, how it connects */
.su .su-surf { max-width: 1040px; }
.su .su-surf { table-layout: fixed; }
.su .su-surf col.c1 { width: 22%; } .su .su-surf col.c2 { width: 14%; } .su .su-surf col.c3 { width: 38%; } .su .su-surf col.c4 { width: 26%; }
.su .ap-tbl--surf.su-surf tbody th { width: auto; }
.su .su-surf th, .su .su-surf td { vertical-align: middle; }
.su .su-surf tbody th a { white-space: nowrap; }
.su .su-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.su .su-marks img { display: block; width: 20px; height: 20px; object-fit: contain; }
.su .su-marks img.su-wide { width: auto; height: 14px; }
.su .su-via { color: var(--ink); font-weight: 700; }
.su #surfaces .cm-foot a { color: var(--ink); font-weight: 700; }
.su .cm-head p { text-wrap: balance; }

/* Web app, AI assistant apps and Outlook: compact cards, the action and its link or marks on one row */
.su #components .cm-pair { max-width: 1152px; }
.su #components .cm-stack .cm-card { padding: 20px 24px; }
.su #components .cm-stack .cm-card > div { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; min-width: 0; }
.su #components .cm-stack .cm-card > div > :is(h3, p) { flex-basis: 100%; }
.su #components .cm-stack .cm-act { margin-top: 14px; }
.su #components .cm-stack .cm-link { margin-top: 14px; }
.su .su-marks--card { order: 3; margin-top: 14px; gap: 10px; }
.su .su-marks--card img { width: 22px; height: 22px; }

/* Every desktop section fills one screen, content centred (voices, the FAQ and the close band keep their own layout) */
@media (min-width: 1024px) and (min-height: 600px) {
  body.su main > section.cm-sec { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
  body.su main > section.cm-sec > .cm-shell { width: 100%; }
}
@media (max-width: 767px) {
  .su .su-hero { padding-top: 100px; }
  .su .cm-dock a { width: auto; min-width: 58px; padding-inline: 3px; }
  .su .su-surf tbody th a { white-space: normal; }
  .su .su-surf td[data-l="Tools"]::before { content: none; }
  .su .su-surf td[data-l="Tools"] { margin: 2px 0 6px; }
}