/* Hallmark · macrostructure: Workbench (/api) + Conversational (/mcp) · tone: technical-warm · anchor hue: ink + gold
   Surface pages (Website V2, Oct 16). /api = white page, ink request console, docs-like rows.
   /mcp = cream page, light chat with tool calls, questions as section heads. Brand tokens only;
   Cabinet Grotesk + Manrope come from hai-brand.css. Shared: sf-*, API: sa-*, MCP: sm-*. */

.sf {
  --gold: #FFC61E; --gold-300: #FFE8A5; --violet: #341D99; --ink: #110A33; --lav: #DDD6FF;
  --mist: #F6F4FF; --cream: #FFF4D2; --slate: #5B6478; --line: rgba(17, 10, 51, .1);
  --ease: cubic-bezier(.23, 1, .32, 1); --disp: "Cabinet Grotesk", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --sh-sm: 0 2px 8px rgba(17,10,51,.08); --sh-md: 0 12px 32px -12px rgba(17,10,51,.22); --sh-lg: 0 32px 64px -24px rgba(17,10,51,.35);
}
html { scroll-behavior: smooth; }
body.sf { margin: 0; overflow-x: clip; }
.sf *, .sf *::before, .sf *::after { box-sizing: border-box; }
/* zero-specificity reset, so the shared blocks (hx-voices, hx-start3) keep their own margins */
:where(.sf) :where(h1, h2, h3, p, ul, ol, dl, dd) { margin: 0; }
.sf [hidden] { display: none !important; }
.sf p, .sf li, .sf dd, .sf td { text-wrap: pretty; }
.sf main [id] { scroll-margin-top: 104px; }
.sf code { font-family: var(--mono); }
.sf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sf-shell { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- Shared pieces ---------- */
.sf-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.sf .hx-btn { min-height: 50px; }
.sf .hx-btn:active, .sf-copy:active, .sm-act:active, [role="tab"]:active { transform: scale(.96); }
.sf-lead { margin-top: 24px; max-width: 60ch; font-size: 18px; line-height: 1.65; color: var(--slate); }
.sf-note { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--slate); }
.sf-note a, .sf-foot a, .sf-head a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.sf-chip { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; background: var(--lav); color: var(--ink); font: 700 13px/1.4 Manrope, Arial, sans-serif; white-space: nowrap; }
.sf-link { font: 700 15px/1.4 Manrope, Arial, sans-serif; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.sf-link::after { content: " \2192"; }
.sf-copy { all: unset; box-sizing: border-box; flex: none; padding: 6px 14px; border-radius: 999px; background: var(--gold); color: var(--ink); font: 700 13px/1.2 Manrope, Arial, sans-serif; cursor: pointer; transition: transform .16s var(--ease), background-color .2s; }
.sf-copy:hover { background: var(--gold-300); }
.sf-copy:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.sf-sec { padding: 96px 0; }
.sf-sec--mist { background: var(--mist); }
.sf-sec--ink { background: var(--ink); color: #fff; }
.sf-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.sf-head h2 { font: 700 clamp(27px, 3.4vw, 44px)/1.12 var(--disp); letter-spacing: -.02em; text-wrap: balance; }
.sf-head p { margin-top: 16px; font-size: 17.5px; font-weight: 400; line-height: 1.6; color: var(--slate); }
.sf-sec--ink .sf-head h2 { color: #fff; }
.sf-sec--ink .sf-head p, .sf-sec--ink .sf-foot { color: var(--lav); }
.sf-sec--ink .sf-foot a { color: #fff; }
.sf-sec--ink :focus-visible, .sa-con :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sf-foot { margin-top: 40px; text-align: center; font-size: 16px; line-height: 1.6; color: var(--slate); }

/* Three surfaces: one decision table */
.sf-cmp { width: 100%; max-width: 980px; margin: 0 auto; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 15px; line-height: 1.5; }
.sf-cmp th, .sf-cmp td { padding: 16px 20px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--line); }
.sf-cmp thead th { font: 700 24px/1.2 var(--disp); color: var(--ink); }
.sf-cmp thead th .sf-chip { margin-inline-start: 8px; vertical-align: middle; }
.sf-cmp tbody th { width: 22%; font-weight: 700; color: var(--slate); font-size: 14px; }
.sf-cmp td { color: var(--ink); }
.sf-cmp .is-here { background: #fff; }
.sf-cmp thead .is-here { border-radius: 20px 20px 0 0; }
.sf-cmp__go td { border-bottom: 0; }
.sf-cmp__go .is-here { border-radius: 0 0 20px 20px; }
.sf-cmp thead td { border-bottom: 0; }

/* ---------- /api ---------- */
.sa-hero { padding: 152px 0 96px; background: var(--ink); color: #fff; }
.sf .sa-hero h1 { color: #fff; }
.sa-hero .sf-lead, .sa-hero .sf-note { color: var(--lav); }
.sa-hero .sf-note a { color: #fff; }
.sa-hero .sa-ghost { color: #fff; border-color: rgba(255, 255, 255, .6); }
.sa-hero .sa-ghost:hover { background: #fff; color: var(--ink); }
.sa-hero :focus-visible { outline-color: var(--gold); }
.sa-hero__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.sa-hero h1, .sm-hero h1 { font: 700 clamp(38px, 6vw, 76px)/1.06 var(--disp); letter-spacing: -.035em; text-wrap: balance; }

/* The console: ink panel, no fake window chrome */
.sa-con { padding: 8px; border-radius: 24px; background: rgba(255, 255, 255, .06); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.sa-con__tabs, .sm-chat__tabs, .sm-connect__tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.sa-con__tabs { padding: 4px; }
[role="tab"] { all: unset; box-sizing: border-box; flex: none; padding: 8px 16px; border-radius: 999px; font: 700 14px/20px Manrope, Arial, sans-serif; cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s, transform .16s var(--ease); }
[role="tab"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sa-con [role="tab"], .sm-connect [role="tab"] { color: var(--lav); }
.sa-con [role="tab"]:hover, .sm-connect [role="tab"]:hover { color: #fff; }
.sa-con [role="tab"][aria-selected="true"], .sm-connect [role="tab"][aria-selected="true"] { background: var(--gold); color: var(--ink); }
.sa-con__panel { padding: 12px 12px 0; }
.sa-req { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, .06); }
.sa-req pre { flex: 1; min-width: 0; margin: 0; font: 500 14px/22px var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.t-m { color: var(--gold); font-weight: 700; } .t-u { color: #fff; } .t-p { color: var(--lav); } .t-v { color: var(--gold-300); } .t-c { color: var(--lav); font-style: normal; }
.sa-con__note { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--lav); }
.sa-life { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 12px 0; padding: 0; }
.sa-life li { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 13px; line-height: 1.4; color: var(--lav); }
.sa-life b { font: 700 13px/1.4 var(--mono); color: var(--gold-300); white-space: nowrap; }
.sa-life li:last-child b { color: var(--gold); }
.sa-res { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 20px 24px; margin: 12px 4px 0; padding: 20px; border-radius: 16px; background: #fff; color: var(--ink); }
.sa-res h3 { margin-bottom: 12px; font: 700 19px/1.12 var(--disp); color: var(--slate); }
.sa-res__disc { display: flex; flex-direction: column; }
.sa-res__disc ul { flex: 1; list-style: none; padding: 0; display: grid; gap: 12px; align-content: space-evenly; }
.sa-res__disc li { display: grid; grid-template-columns: 100px minmax(0, 1fr) 64px; align-items: center; gap: 8px; font-size: 13px; line-height: 1.3; }
.sa-res__disc b { font-weight: 700; text-align: end; }
.sa-meter { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.sa-meter i { height: 10px; border-radius: 4px; background: var(--mist); }
.sa-meter i.on { background: var(--gold); }
.sa-radar { margin: 0; display: grid; justify-items: center; align-content: start; }
.sa-radar h3 { justify-self: stretch; text-align: center; }
.sa-radar svg { width: 100%; max-width: 168px; height: auto; overflow: visible; }
.sa-radar .g { fill: none; stroke: rgba(17, 10, 51, .1); stroke-width: 1; }
.sa-radar .v { fill: rgba(255, 198, 30, .55); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; transform-origin: 100px 100px; }
.sa-radar text { font: 700 13px Manrope, Arial, sans-serif; fill: var(--slate); text-anchor: middle; dominant-baseline: middle; }
.sa-traits { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.sa-traits dt { font-size: 12px; line-height: 1.3; color: var(--slate); }
.sa-traits dd { margin-top: 2px; font: 700 15px/1.3 Manrope, Arial, sans-serif; }
.sa-advice { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sa-advice p { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--cream); font-size: 14px; line-height: 1.45; }
.sa-advice p + p { background: var(--mist); }
.sa-advice b { font-size: 12px; color: var(--slate); }
.sa-con__foot { padding: 12px 12px 8px; font-size: 12px; line-height: 1.4; color: var(--lav); }

.sa-calls { list-style: none; padding: 0; display: grid; gap: 12px; }
.sa-calls li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 8px; align-items: baseline; font-size: 13px; line-height: 1.4; }
.sa-calls code { padding: 3px 8px; border-radius: 6px; font-size: 13px; justify-self: start; overflow-wrap: anywhere; }
.sa-calls span { grid-column: 2; }
/* Suite explorer: product list on the left, what it returns and a rendered sample on the right */
.sa-x { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }
.sa-x__list { display: grid; gap: 4px; }
.sa-x [role="tab"] { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; color: var(--ink); white-space: normal; transition: background-color .2s, transform .16s var(--ease); }
.sa-x [role="tab"] i { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--mist); font: 700 16px/1 var(--disp); font-style: normal; }
.sa-x [role="tab"] span { display: grid; }
.sa-x [role="tab"] b { font: 700 16px/1.25 var(--disp); }
.sa-x [role="tab"] small { font-size: 13px; line-height: 1.35; color: var(--slate); font-weight: 500; }
.sa-x [role="tab"]:hover { background: var(--mist); }
.sa-x [role="tab"][aria-selected="true"] { background: var(--ink); color: #fff; }
.sa-x [role="tab"][aria-selected="true"] i { background: var(--gold); color: var(--ink); }
.sa-x [role="tab"][aria-selected="true"] small { color: var(--lav); }
.sa-x [role="tab"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sa-x__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; min-height: 480px; padding: 40px; border-radius: 24px; background: var(--mist); }
.sa-x__copy h3 { font: 700 19px/1.12 var(--disp); letter-spacing: -.02em; }
.sa-x__line { margin-top: 8px; font-size: 18px; line-height: 1.5; color: var(--slate); }
.sa-x__copy h4 { margin: 24px 0 8px; font: 700 14px/1.3 Manrope, Arial, sans-serif; color: var(--slate); }
.sa-x__does { list-style: none; padding: 0; display: grid; gap: 8px; margin-bottom: 20px; }
.sa-x__does li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; font-size: 15px; line-height: 1.5; }
.sa-x__does li::before { content: ""; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--gold); }
.sa-x .sa-calls code { background: var(--ink); color: var(--gold-300); }
.sa-x .sa-calls li { color: var(--slate); }
.sa-x .sa-calls b { color: var(--ink); }
.sa-x .sf-link { display: inline-block; margin-top: 16px; }
.sa-art { margin: 0; }
.sa-art__card { padding: 24px; border-radius: 20px; background: #fff; box-shadow: var(--sh-md); display: grid; gap: 12px; }
.sa-art__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.sa-art__head b { font: 700 18px/1.2 var(--disp); }
.sa-art__head span { padding: 2px 10px; border-radius: 999px; background: var(--lav); font-size: 12px; font-weight: 700; white-space: nowrap; }
.sa-art dl { display: grid; gap: 10px; }
.sa-art dl div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; font-size: 14px; line-height: 1.45; }
.sa-art dt { color: var(--slate); }
.sa-art dd { font-weight: 700; }
.sa-art__role { font-size: 14px; color: var(--slate); }
.sa-art__disc { display: flex; align-items: center; gap: 12px; }
.sa-art__disc b { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--gold); font: 700 24px/1 var(--disp); }
.sa-art__disc span { display: grid; font-weight: 700; }
.sa-art__disc small { font-weight: 500; font-size: 13px; color: var(--slate); }
.sa-art__do, .sa-art__subj { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; font-size: 14px; line-height: 1.45; }
.sa-art i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--slate); }
.sa-art__body { font-size: 14px; line-height: 1.55; }
.sa-art__feed { list-style: none; padding: 0; display: grid; gap: 8px; }
.sa-art__feed li { display: flex; gap: 10px; align-items: baseline; padding: 10px 12px; border-radius: 12px; background: var(--mist); font-size: 14px; line-height: 1.4; }
.sa-art__feed b { flex: none; padding: 0 8px; border-radius: 6px; background: var(--cream); font-size: 12px; }
.sa-art__note { font-size: 13px; line-height: 1.5; color: var(--slate); }
.sa-art__lane { display: flex; justify-content: space-between; font-size: 14px; }
.sa-art__lane span { font-size: 12px; font-weight: 700; color: var(--slate); }
.sa-art figcaption { margin-top: 12px; text-align: center; font-size: 12px; color: var(--slate); }

/* From one call to every record: inputs fan into the API, the API fans out to where it goes */
.sa-flow { display: grid; grid-template-columns: auto 88px auto 88px minmax(0, 1fr); align-items: stretch; max-width: 1040px; margin: 0 auto; }
.sa-flow__in, .sa-flow__out { list-style: none; padding: 0; display: grid; grid-auto-rows: 1fr; gap: 12px; align-items: center; }
.sa-flow__in li { justify-self: end; padding: 10px 18px; border-radius: 999px; background: #fff; box-shadow: var(--sh-sm); font: 700 15px/1.2 Manrope, Arial, sans-serif; }
.sa-wire { width: 100%; height: 100%; overflow: visible; }
.sa-wire path { fill: none; stroke: var(--gold); stroke-width: 2; vector-effect: non-scaling-stroke; }
.sa-flow__core { align-self: center; display: grid; gap: 6px; justify-items: center; padding: 28px 24px; border-radius: 24px; background: var(--ink); color: #fff; text-align: center; box-shadow: var(--sh-md); }
.sa-flow__core b { font: 700 22px/1.1 var(--disp); color: var(--gold); white-space: nowrap; }
.sa-flow__core span { font-size: 13px; color: var(--lav); }
.sa-flow__out li { padding: 18px 24px; border-radius: 24px; background: var(--cream); }
.sa-flow__out h3 { font: 700 19px/1.12 var(--disp); }
.sa-flow__out p { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--slate); }

/* Production spec on ink */
.sa-spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 40px; }
.sa-spec.sa-spec--light dt { color: var(--ink); }
.sa-spec.sa-spec--light dd { color: var(--slate); }
.sa-spec.sa-spec--light code { background: var(--mist); color: var(--ink); }
.sa-spec code { display: block; width: fit-content; margin-bottom: 14px; padding: 6px 12px; border-radius: 10px; background: rgba(255, 255, 255, .08); color: var(--gold); font: 700 15px/1.3 var(--mono); }
.sa-spec dt { font: 700 22px/1.25 var(--disp); color: #fff; }
.sa-spec dd { margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--lav); }
.sa-shape { margin-top: 12px; font-size: 14px; line-height: 2; color: var(--slate); }
.sa-shape code { padding: 2px 8px; border-radius: 6px; background: #fff; color: var(--ink); font-size: 13px; }

/* ---------- /mcp ---------- */
.sm-hero { padding: 152px 0 80px; background: var(--cream); }
.sm-hero__copy { max-width: 880px; margin: 0 auto; text-align: center; }
.sm-hero .sf-lead { margin-inline: auto; }
.sm-hero .sf-cta { justify-content: center; }

/* The chat: a light window, the tool calls visible between the question and the answer */
.sm-chat { max-width: 760px; margin: 56px auto 0; padding: 16px; border-radius: 24px; background: #fff; box-shadow: var(--sh-lg); }
.sm-chat__tabs { justify-content: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.sm-chat [role="tab"] { color: var(--slate); }
.sm-chat [role="tab"]:hover { color: var(--ink); }
.sm-chat [role="tab"][aria-selected="true"] { background: var(--lav); color: var(--ink); }
.sm-chat [role="tab"]:focus-visible { outline-color: var(--ink); }
.sm-chat__log { display: grid; gap: 12px; padding: 20px 8px 8px; min-height: 300px; align-content: start; }
.sm-msg { max-width: 88%; padding: 14px 18px; border-radius: 20px; font-size: 16px; line-height: 1.55; }
.sm-msg--you { justify-self: end; background: var(--ink); color: #fff; border-bottom-right-radius: 6px; }
.sm-msg--ai { justify-self: start; width: min(100%, 560px); background: var(--mist); color: var(--ink); border-bottom-left-radius: 6px; }

.sm-msg__tag { display: block; margin-bottom: 6px; font: 700 12px/1.3 Manrope, Arial, sans-serif; color: var(--slate); }
/* What the assistant hands back: a small artifact under the answer */
.sm-art { margin-top: 12px; padding: 0; list-style: none; display: grid; gap: 8px; }
.sm-art--profile { padding: 14px; border-radius: 16px; background: #fff; }
.sm-art__disc { display: flex; align-items: center; gap: 12px; }
.sm-art__disc b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--gold); font: 700 22px/1 var(--disp); }
.sm-art__disc span { display: grid; font-weight: 700; font-size: 15px; }
.sm-art__disc small { font-weight: 500; font-size: 13px; color: var(--slate); }
.sm-art--profile p { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; font-size: 14px; line-height: 1.45; }
.sm-art--profile i, .sm-art--mail em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--slate); }
.sm-art--plan li, .sm-art--mail li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #fff; font-size: 14px; line-height: 1.4; }
.sm-art--plan i { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--cream); color: var(--ink); }
.sm-art--mail i { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--cream); color: var(--ink); }
.sm-art--mail span { display: grid; flex: 1; font-weight: 700; }
.sm-art--mail small { font-weight: 500; font-size: 13px; color: var(--slate); }
.sm-art--mail em { padding: 2px 10px; border-radius: 999px; background: var(--lav); color: var(--ink); }
.sm-calls { list-style: none; padding: 0; display: grid; gap: 6px; justify-self: start; }
.sm-calls li { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--cream); font-size: 14px; line-height: 1.4; color: var(--slate); }
.sm-calls i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--ink); flex: none; }
.sm-calls code { color: var(--ink); font-size: 13px; font-weight: 600; }

.sm-where { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.sm-where a { display: flex; align-items: baseline; gap: 8px; padding: 10px 18px; border-radius: 999px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: var(--sh-sm); transition: box-shadow .2s var(--ease), transform .16s var(--ease); }
.sm-where b { font: 700 15px/1.2 var(--disp); }
.sm-where span { font-size: 13px; color: var(--slate); }
@media (hover: hover) { .sm-where a:hover { box-shadow: var(--sh-md); } }

/* Prompts */
.sm-prompts { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sm-prompts li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; align-items: start; padding: 28px; border-radius: 24px; background: var(--mist); }
.sm-prompts h3 { font: 700 19px/1.12 var(--disp); }
.sm-prompts p { grid-column: 1 / -1; font-size: 16px; line-height: 1.6; color: var(--ink); }
.sm-prompts li { grid-template-columns: minmax(0, 1fr); }
.sm-open { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-open a { padding: 6px 14px; border-radius: 999px; background: #fff; color: var(--ink); font: 700 13px/1.2 Manrope, Arial, sans-serif; text-decoration: none; box-shadow: var(--sh-sm); transition: box-shadow .2s var(--ease), transform .16s var(--ease); }
.sm-open a:hover { box-shadow: var(--sh-md); }
.sm-open a:active { transform: scale(.96); }

/* The 13 tools */
.sm-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sm-tools__col { display: grid; gap: 16px; align-content: start; }
.sm-tools__g { padding: 28px; border-radius: 24px; background: #fff; box-shadow: var(--sh-sm); }
.sm-tools__g h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 16px; font: 700 19px/1.12 var(--disp); }
.sm-tools__g h3 a { color: var(--ink); text-decoration: none; }
.sm-tools__g h3 a:hover { text-decoration: underline; }
.sm-tools__g h3 span { font: 600 14px/1.3 Manrope, Arial, sans-serif; color: var(--slate); }
.sm-tools__g ul { list-style: none; padding: 0; display: grid; gap: 14px; }
.sm-tools__g li { display: grid; gap: 2px; }
.sm-tools__g code { font-size: 13px; line-height: 1.4; color: var(--violet); font-weight: 600; overflow-wrap: anywhere; }
.sm-tools__g li span { font-size: 15px; line-height: 1.45; color: var(--slate); }

/* Connect, on ink */
.sm-connect { max-width: 1000px; margin: 0 auto; }
.sm-connect__tabs { justify-content: center; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .08); width: fit-content; max-width: 100%; margin: 0 auto; }
.sm-connect__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 48px; align-items: center; margin-top: 40px; }
.sm-connect__how { display: grid; gap: 28px; justify-items: start; }
.sm-steps { list-style: none; padding: 0; counter-reset: s; display: grid; gap: 16px; }
.sm-steps li { counter-increment: s; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: baseline; font-size: 17px; line-height: 1.55; color: #fff; }
.sm-steps li::before { content: counter(s); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: var(--gold); font: 700 14px/1 Manrope, Arial, sans-serif; }
.sm-card { display: grid; gap: 16px; padding: 28px; border-radius: 24px; background: #fff; color: var(--ink); box-shadow: var(--sh-lg); }
.sm-card__id { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.sm-card__what { font-size: 15px; line-height: 1.5; color: var(--slate); }
.sm-card__tools { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sm-card__tools li { display: grid; padding: 12px 14px; border-radius: 14px; background: var(--mist); }
.sm-card__tools b { font: 700 16px/1.2 var(--disp); }
.sm-card__tools span { font-size: 13px; color: var(--slate); }
.sm-card__note { font-size: 14px; line-height: 1.5; color: var(--slate); }
.sm-card .sm-url { background: var(--ink); }
.sm-act { display: inline-flex; align-items: center; padding: 12px 24px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .5); color: #fff; font: 700 15px/1 var(--disp); text-decoration: none; transition: background-color .2s, color .2s, transform .16s var(--ease); }
.sm-act:hover, .sm-act:focus-visible { background: #fff; color: var(--ink); }

/* Agents table */
.sm-agent { width: 100%; max-width: 720px; margin: 0 auto; border-collapse: separate; border-spacing: 0; font-size: 16px; }
.sm-agent th, .sm-agent td { padding: 16px 20px; text-align: center; border-bottom: 1px solid var(--line); }
.sm-agent thead th { font: 700 15px/1.3 Manrope, Arial, sans-serif; color: var(--slate); }
.sm-agent tbody th { text-align: start; font-weight: 600; color: var(--ink); }
.sm-agent .is-us { background: var(--cream); }
.sm-agent thead .is-us { border-radius: 16px 16px 0 0; color: var(--ink); }
.sm-agent tbody tr:last-child td.is-us { border-radius: 0 0 16px 16px; }
.sm-agent tbody tr:last-child > * { border-bottom: 0; }
.sm-m { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--ink); }
.sm-m--no { background: var(--mist); color: var(--slate); }

/* ---------- Motion: the console and the chat play once in view, and again on a tab change ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js-play [data-step] { opacity: 0; transform: translateY(8px); filter: blur(4px); transition: opacity .45s var(--ease), transform .5s var(--ease), filter .45s var(--ease); }
  .js-play [data-step].on { opacity: 1; transform: none; filter: none; }
  .js-play .sa-wire path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s var(--ease) .1s; }
  .js-play .sa-wire.on path { stroke-dashoffset: 0; }
  .js-play .sa-radar .v { transform: scale(.4); opacity: 0; transition: transform .7s var(--ease) .25s, opacity .4s var(--ease) .25s; }
  .js-play .on .sa-radar .v { transform: none; opacity: 1; }
  .js-play .sa-meter i.on { transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
  .js-play .on .sa-meter i.on { transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .sa-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .sa-hero__copy { max-width: 720px; }
  .sa-x { grid-template-columns: minmax(0, 1fr); }
  .sa-x__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sa-x [role="tab"] { flex-direction: column; text-align: center; gap: 6px; }
  .sa-x [role="tab"] small { display: none; }
}
@media (max-width: 767px) {
  .sf-sec { padding: 64px 0; }
  .sf-head { margin-bottom: 32px; }
  .sa-hero, .sm-hero { padding-top: 128px; }
  .sa-hero { padding-bottom: 64px; }
  .sm-prompts, .sm-tools, .sa-spec { grid-template-columns: minmax(0, 1fr); }
  .sa-x__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-x [role="tab"] { flex-direction: row; text-align: start; }
  .sa-x__panel { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 24px; }
  .sm-connect__panel { grid-template-columns: minmax(0, 1fr); }
  .sa-x__copy h3 { font-size: 19px; }
  /* the comparison table becomes one block per row, each cell labelled */
  .sf-cmp, .sf-cmp tbody, .sf-cmp tr, .sf-cmp th, .sf-cmp td { display: block; width: auto; }
  .sf-cmp thead { display: none; }
  .sf-cmp tbody th { width: auto; }
  .sf-cmp tr.sf-cmp__go { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; background: none; padding: 0; }
  .sf-cmp__go td { border: 0; padding: 0; }
  .sf-cmp__go td:empty { display: none; }
  .sf-cmp__go td::before { content: none; }
  .sf-cmp tbody tr { margin-bottom: 16px; padding: 16px 20px; border-radius: 20px; background: #fff; }
  .sf-cmp tbody th { padding: 0 0 8px; border: 0; font-size: 15px; color: var(--ink); }
  .sf-cmp td { padding: 8px 0; border-bottom: 1px solid var(--line); background: none !important; }
  .sf-cmp td:last-child { border-bottom: 0; }
  .sf-cmp td::before { content: attr(data-l); display: block; font-size: 12px; font-weight: 700; color: var(--slate); }
  .sa-traits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-advice { grid-template-columns: minmax(0, 1fr); }
  .sa-flow { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .sa-wire { display: none; }
  .sa-flow__in { grid-template-columns: repeat(2, auto); grid-auto-rows: auto; justify-content: center; gap: 8px; }
  .sa-flow__in li { justify-self: stretch; text-align: center; }
  .sa-flow__core { position: relative; justify-self: center; }
  .sa-flow__core::before, .sa-flow__core::after { content: ""; position: absolute; left: 50%; width: 2px; height: 32px; background: var(--gold); }
  .sa-flow__core::before { bottom: 100%; } .sa-flow__core::after { top: 100%; }
  .sa-flow__out { grid-auto-rows: auto; }
  .sa-flow__out li { text-align: center; }
  .sm-chat { margin-top: 40px; padding: 12px; }
  /* even rows, never one tab or chip alone on a line */
  .sm-chat__tabs, .sm-connect__tabs { display: grid; gap: 4px; }
  .sm-chat__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm-connect__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .sm-chat [role="tab"], .sm-connect [role="tab"] { padding: 8px 6px; font-size: 13px; text-align: center; white-space: normal; }
  .sa-req { flex-direction: column; }
  .sa-req { gap: 8px; }
  .sa-req .sf-copy { align-self: flex-end; }
  .sa-req pre { font-size: 13px; line-height: 20px; }
  .sm-msg { max-width: 100%; font-size: 15px; }
  .sm-called { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sm-agent th, .sm-agent td { padding: 12px 8px; font-size: 14px; }
  .sm-connect__tabs { border-radius: 24px; }
  .sm-url { border-radius: 16px; flex-wrap: wrap; justify-content: center; padding: 12px; }
}
/* Phone tap targets (Oct 17 audit): stand-alone chips and CTA links get a 44px hit height.
   Inline CTAs become inline-flex, so the arrow gets a no-break space to keep its gap. */
@media (max-width: 767px) {
  .sm-open a, .sf-link, .sa-x .sf-link { min-height: 44px; display: inline-flex; align-items: center; }
  .sf-link::after { content: "\00a0\2192"; }
}
@media (max-width: 399px) {
  .sf-shell { padding: 0 16px; }
  .sf-cta .hx-btn { flex: 1 1 100%; justify-content: center; }
  .sa-res { grid-template-columns: minmax(0, 1fr); }
  .sm-calls li { padding-right: 10px; gap: 6px; }
  .sm-calls code { font-size: 12px; }
  .sa-res__disc li { grid-template-columns: 96px minmax(0, 1fr) 64px; font-size: 12px; }
  .sa-res { padding: 16px; }
  .sa-con__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sa-con [role="tab"] { padding: 8px 4px; font-size: 13px; text-align: center; }
  .sa-req pre { font-size: 12px; }
  .sm-prompts li, .sm-tools__g { padding: 24px 20px; }
  .sm-open { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm-open a, .sm-open .sf-copy { text-align: center; padding-inline: 8px; }
  .sm-oi { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sa-x__list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sa-x [role="tab"] { padding: 8px; gap: 8px; }
  .sa-x [role="tab"] i { width: 30px; height: 30px; }
  .sa-x [role="tab"] b { font-size: 14px; }
  .sa-x__panel { padding: 20px; }
}

/* ---------- Integrations row (views/v2/_integrations.ejs), Oct 20: the break under the one proof strip on /api and /mcp ----------
   Krish 33:58: "put a break here, and over here integrations". White band, a calm caption, real marks in their own colours.
   One group is centred; two groups (/mcp: assistants, then CRMs) sit side by side with a hairline between, stacked on phones. */
.sf-int { padding: 24px; background: #fff; border-bottom: 1px solid var(--lav); }
.sf-int__in { display: flex; justify-content: center; max-width: 1100px; margin: 0 auto; }
.sf-int__g { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.sf-int__in--two .sf-int__g { flex: 1 1 0; }
.sf-int__in--two .sf-int__g + .sf-int__g { border-left: 1px solid var(--lav); }
.sf-int .sf-int__cap { margin: 0; font: 600 14px/1.4 Manrope, Arial, sans-serif; color: var(--slate); text-align: center; }
.sf-int__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 40px; margin: 0; padding: 0; list-style: none; }
.sf-int__list li { display: flex; align-items: center; margin: 0; }
.sf-int__list a, .sf-int__i { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 4px; border-radius: 12px; color: var(--ink); text-decoration: none; font: 800 17px/1 Manrope, Arial, sans-serif; }
.sf-int__list img { display: block; width: auto; max-width: 100%; }
.sf-int__list img[style] { height: var(--h); object-fit: contain; }
.sf-int__ic { flex: none; width: 28px; height: 28px; }
.sf-int__list a { transition: transform .16s var(--ease); }
@media (hover: hover) and (pointer: fine) { .sf-int__list a:hover { transform: translateY(-2px); } }
.sf-int__list a:active { transform: scale(.97); }
.sf-int__list a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 899px) {
  .sf-int { padding: 20px 16px; }
  .sf-int__in--two { flex-direction: column; gap: 20px; }
  .sf-int__in--two .sf-int__g + .sf-int__g { padding-top: 20px; border-left: 0; border-top: 1px solid var(--lav); }
  /* three equal columns, so no item is ever left alone on a second row (320 px included) */
  .sf-int__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 8px; width: 100%; max-width: 360px; justify-items: center; }
  .sf-int__list img[style] { height: calc(var(--h) * .8); max-width: 100%; }
  .sf-int__list a, .sf-int__i { flex-direction: column; gap: 4px; justify-content: center; text-align: center; min-height: 56px; font-size: 15px; }
  .sf-int__list li:has(img[style]) .sf-int__i, .sf-int__list li:has(img[style]) a { flex-direction: row; }
}
@media (prefers-reduced-motion: reduce) { .sf-int__list a { transition: none; } }