*, *::before, *::after { box-sizing: border-box; }
html { --header-height: 73px; --section-min-height: calc(100svh - var(--header-height)); scroll-padding-top: var(--header-height); scroll-behavior: smooth; scrollbar-gutter: stable; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
.js body { padding-top: var(--header-height); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
.wrap { width: min(var(--page-max), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.text-slot { font-size: 36px; line-height: 1.25; font-weight: 550; letter-spacing: -.035em; text-wrap: balance; }
.text-slot .title-line { display: block; }
.text-slot.display { font-size: clamp(48px, 5.2vw, 72px); line-height: 1.22; letter-spacing: -.045em; }
.text-slot.statement { font-size: clamp(36px, 3.8vw, 52px); line-height: 1.35; letter-spacing: -.035em; }
.text-slot.section { font-size: 32px; line-height: 1.35; }
.text-block { display: grid; gap: 26px; }
.text-block p { color: var(--muted); font-size: 17px; line-height: 1.9; }

.action-slot { display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 50px; width: fit-content; padding: 13px 23px; border: 1px solid transparent; font-size: 14px; font-weight: 550; line-height: 1.5; }
.action-slot.compact { width: 46px; height: 46px; min-height: 0; padding: 0; justify-content: center; }
.action-slot svg { width: 19px; height: 19px; }
.icon-button { display: inline-flex; width: 42px; height: 42px; border: 0; padding: 0; align-items: center; justify-content: center; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 100; }
.skip-link:focus { top: 16px; }
.site-header { position: fixed; inset: 0 0 auto; z-index: 40; width: 100%; margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--header-line); border-radius: 0; background: var(--header); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); transition: background .3s; }
.site-header.is-scrolled { background: var(--header-solid); }
.header-inner { position: relative; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.header-inner .brand img { width: 24px; height: 24px; border-radius: 6px; }
.header-inner .brand > span { font-size: 18px; }
.brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand > span { display: inline-flex; gap: 8px; align-items: baseline; font-size: 17px; font-weight: 600; letter-spacing: -.5px; white-space: nowrap; }
.brand-english { font-size: 16px; font-weight: 600; letter-spacing: -.5px; }
.brand img { width: 28px; height: 28px; border-radius: 8px; }
#site-navigation { display: flex; gap: 6px; margin-left: auto; margin-right: 8px; }
#site-navigation a { padding: 8px 10px; color: var(--muted); font-size: 13px; font-weight: 500; white-space: nowrap; }
#site-navigation a:hover { color: var(--ink); }
/* Header links lead with a small icon in the line style of the buttons. */
#site-navigation a { display: inline-flex; align-items: center; gap: 6px; }
.site-header #site-navigation a svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Where the bar is tight the icons step aside and the links keep their words; the menu on a phone keeps its icons.
   English labels are longer, so they give way sooner. */
@media (min-width: 801px) and (max-width: 1000px) { .site-header #site-navigation a svg { display: none; } }
@media (min-width: 801px) and (max-width: 1199px) { :lang(en) .site-header #site-navigation a svg { display: none; } }
/* On a tablet the English bar did not fit even without icons: the links sit closer and the contact button waits for more room. */
@media (min-width: 801px) and (max-width: 1000px) {
  :lang(en) #site-navigation a { padding-inline: 6px; }
  :lang(en) .header-actions .header-cta { display: none; }
}
.navigation-preferences { display: flex; grid-column: 1 / -1; align-items: center; gap: 6px; padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--line); }
.navigation-preferences .icon-button { width: 32px; height: 32px; }
.navigation-preferences .icon-button svg { width: 19px; height: 19px; }
.header-actions { position: relative; display: flex; align-items: center; gap: 10px; padding-left: 24px; }
.header-actions::before { content: ''; position: absolute; left: 0; top: 50%; width: 1px; height: 16px; transform: translateY(-50%); background: var(--header-line); }
.header-actions .icon-button { width: 32px; height: 32px; }
.header-actions .icon-button svg { width: 19px; height: 19px; }
/* The theme and language switches hold their place from the first paint. theme.js marks the page as scripted and sets
   the theme before anything is drawn, so they can show at once, with the right icon, and the bar does not shift when
   the other scripts start. On the narrowest phones they live in the menu, so there they wait for the script. */
@media (min-width: 381px) {
  /* !important answers the global [hidden] rule, which is itself !important. */
  html.js .header-actions > :is(.theme-toggle, .language-toggle)[hidden] { display: inline-flex !important; }
}
html[data-theme='dark'] .theme-toggle .when-light, html:not([data-theme='dark']) .theme-toggle .when-dark { display: none; }
/* The menu button of the phone layout holds its place from the first paint too. */
@media (max-width: 800px) { html.js .header-actions > .menu-toggle[hidden] { display: inline-flex !important; } }
.language-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 32px; padding: 0; border: 0; color: var(--muted); font-size: 12px; line-height: 18px; font-weight: 550; white-space: nowrap; }
.menu-toggle { display: none; }


@font-face { font-family: AgentHubWordmark; src: url('/assets/fonts/agenthub-wordmark.woff2') format('woff2'); font-weight: 600; font-display: swap; }
/* Every product shows its mark, wordmark and Tenon badge the same way; only the type is its own. */

.product-wordmark { display: inline-flex; align-items: center; gap: .3em; font-size: 26px; font-weight: 600; line-height: 1.15; letter-spacing: .025em; margin-bottom: 20px; }
.product-symbol { display: inline-flex; flex: none; width: 1em; height: 1em; }
.product-symbol > * { width: 100%; height: 100%; object-fit: contain; }
/* Marks are filled shapes; the site-wide svg rules would outline them. */
.product-wordmark .product-symbol svg { stroke: none; }
.product-symbol .mark-dark, html[data-theme="dark"] .product-symbol .mark-light { display: none; }
html[data-theme="dark"] .product-symbol .mark-dark { display: block; }
.product-name { display: inline-flex; align-items: flex-start; gap: .18em; }
.product-name img { width: .58em; height: .58em; margin-top: -.04em; }
.agenthub-wordmark { font-family: AgentHubWordmark, monospace; }
.inthub-wordmark, .intent-wordmark { font-family: "Avenir Next", Avenir, "PingFang SC", "Hiragino Sans GB", sans-serif; font-weight: 720; letter-spacing: -.055em; }
.caret-wordmark { font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; }
@font-face { font-family: WeSaidWordmark; src: url('/assets/fonts/wesaid-wordmark-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
.wesaid-wordmark { font-family: WeSaidWordmark, serif; font-weight: 740; letter-spacing: -.06em; }
.passby-wordmark { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 750; letter-spacing: -.05em; }
.jig-wordmark { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 700; letter-spacing: -.01em; }

.product-capture { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
.capture-link { display: block; cursor: zoom-in; border-radius: 20px; }
.phone-frame { display: block; flex-shrink: 0; height: 100%; width: auto; aspect-ratio: 390 / 844; border-radius: 18px; border: 1px solid var(--media-edge); overflow: hidden; cursor: zoom-in; box-shadow: 0 12px 28px #00000012; }
.product-phone { width: 100%; height: 100%; object-fit: contain; }
.device-scene { position: relative; width: 100%; aspect-ratio: 16 / 11; isolation: isolate; }
.desktop-frame { position: absolute; top: 4%; left: 0; width: 93%; display: block; border: 1px solid var(--media-edge); border-radius: clamp(12px, 1.4vw, 20px); overflow: hidden; cursor: zoom-in; box-shadow: 0 16px 40px #00000014; }
.product-desktop { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; }
.device-scene .phone-frame { position: absolute; right: 0; bottom: 0; width: 26%; height: auto; border-radius: clamp(12px, 1.5vw, 22px); box-shadow: -12px 16px 36px #00000035, 0 0 0 3px var(--media-edge); }
.device-scene .product-phone { display: block; }

.site-footer { padding-block: 42px 30px; border-top: 1px solid var(--line); }

.footer-links { display: flex; gap: 12px; }
.footer-notes { display: grid; gap: 6px; max-width: 720px; margin-top: 28px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.footer-legal { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.7; }
.footer-legal a:hover { color: var(--ink); }
.footer-legal-links { display: inline-flex; flex-wrap: wrap; gap: 8px 20px; }
.filing-psb { display: inline-flex; align-items: center; gap: 5px; }
/* v2 shell: one primary action in the header, a sitemap footer and one row of social channels. */
.header-actions .header-cta { margin-left: 6px; }
.footer-grid { display: grid; grid-template-columns: minmax(200px, 1.3fr) repeat(5, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 1100px) and (min-width: 901px) { .footer-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
.footer-brand { display: grid; align-content: start; gap: 14px; }
.footer-brand > p { max-width: 280px; color: var(--muted); font-size: 13px; line-height: 1.7; text-wrap: pretty; }
:lang(zh) .footer-brand > p { word-break: keep-all; }
.footer-column { display: grid; align-content: start; gap: 10px; font-size: 14px; }
.footer-column h2 { margin: 0 0 4px; color: var(--ink); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.footer-column a { width: fit-content; color: var(--muted); transition: color 160ms var(--ease); }
.footer-column a:hover { color: var(--ink); }
.footer-social { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; }
.footer-social h2 { margin: 0 6px 0 0; color: var(--ink); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.footer-social a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); transition: color 160ms var(--ease); }
.footer-social svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.footer-social a:hover { color: var(--ink); }
@media (max-width: 900px) {
  .header-actions .header-cta { display: none; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
.privacy-layout { gap: 24px; }
.privacy-layout .text-slot.statement { margin-top: 24px; font-size: var(--text-xl); line-height: 1.4; letter-spacing: -.01em; }
.privacy-layout .action-slot { justify-self: start; margin-top: 16px; }
.error-layout { max-width: 760px; padding-block: 120px; display: grid; gap: 40px; }
@media (max-width: 1100px) {
  .header-inner { gap: 20px; }
  #site-navigation { gap: 2px; }
}
@media (max-width: 800px) {
  html { --header-height: 65px; scroll-padding-top: 110px; }
  .header-inner { min-height: 64px; gap: 12px; }
  .brand { gap: 10px; }
  .brand > span { gap: 7px; font-size: 17px; }
  .brand-english { font-size: 15px; }
  .brand img { width: 29px; height: 29px; }
  .header-actions { margin-left: auto; gap: 6px; padding-left: 16px; }

  .icon-button { width: 38px; height: 38px; }
  .menu-toggle { display: inline-flex; }
  #site-navigation { position: absolute; top: calc(100% + 8px); left: 0; right: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 14px; margin: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
  .js #site-navigation { display: none; }
  .js #site-navigation.is-open { display: grid; }
  #site-navigation a { padding: 14px; font-size: 14px; }
  html:not(.js) main { padding-top: 190px; }


  .text-slot.display { font-size: clamp(36px, 6.5vw, 52px); }
  .text-slot.statement { font-size: 38px; }
  .text-block p { font-size: 16px; }
}
@media (max-width: 520px) {
  .header-inner { gap: 4px; }
  .header-inner .brand > span { font-size: 16px; }
  .brand { gap: 8px; }
  .brand > span { font-size: 16px; gap: 6px; }
  .brand-english { font-size: 14px; }
  .header-actions { gap: 4px; padding-left: 8px; }
  .header-actions .icon-button { width: 32px; height: 32px; }
  #site-navigation { padding: 10px; }
  .text-slot.display { font-size: 32px; line-height: 1.35; }
  .text-slot.statement { font-size: 31px; line-height: 1.4; }
  .text-block p { font-size: 15px; line-height: 1.85; }


  .footer-links { gap: 8px; }
  .footer-links .action-slot { width: 40px; height: 40px; }
  .site-footer { padding-top: 30px; }
  .footer-legal { align-items: start; flex-direction: column; gap: 10px; font-size: 10px; }
}
@media (max-width: 380px) {
  .header-actions { gap: 2px; padding-left: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion-ready [data-reveal] { opacity: 1; transform: none; }
}

/* Without JavaScript, navigation stays in normal flow. */
html:not(.js) .site-header { position: relative; top: 0; }
@media (max-width: 800px) {
  html:not(.js) .header-inner { flex-wrap: wrap; padding-block: 12px; }
  html:not(.js) #site-navigation { position: static; order: 3; width: 100%; padding: 4px 0 0; border: 0; background: transparent; }
  html:not(.js) main { padding-top: 0; }
}

.header-account-control { position: relative; }
/* The account icon is always in the bar, so nothing moves when the session is known. Its menu offers sign-in and
   sign-up to a visitor and the account's own actions once signed in. */
.account-menu-actions.account-menu-guest { border-top: 0; padding-top: 0; }
.header-account { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; color: var(--ink); }
.header-account[aria-expanded='true'] { background: var(--button-hover); }
.header-account:is(:hover, :focus-visible) { background: var(--button-hover); }
.header-account:active { background: var(--button-pressed); }
.header-account svg, .account-menu-item svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.account-menu { position: absolute; top: calc(100% + 12px); right: 0; z-index: 30; width: min(224px, calc(100vw - 32px)); padding: 8px; border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: 0 12px 40px #00000026, 0 2px 8px #00000012; animation: account-menu-arrive 160ms ease-out both; }
:root[data-theme='dark'] .account-menu { box-shadow: 0 12px 40px #00000080, 0 0 0 1px #ffffff0a; }
.account-menu-name { margin: 0; padding: 10px 10px 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; line-height: 20px; }
.account-menu-actions { display: grid; gap: 2px; border-top: 1px solid var(--line); padding-top: 6px; }
.account-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; border-radius: var(--button-radius); color: var(--ink); text-align: left; font: inherit; font-size: 13px; line-height: 20px; text-decoration: none; transition: background-color 200ms var(--ease), color 200ms var(--ease); }
.account-menu-item:is(:hover, :focus-visible) { background: var(--button-hover); }
.account-menu-item:active { background: var(--button-pressed); }
.account-menu-item.is-loading svg { display: none; }
.account-menu-item.is-loading::before { content: ''; box-sizing: border-box; width: 18px; height: 18px; flex-shrink: 0; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: account-menu-busy 800ms linear infinite; }
.account-menu-error { margin: 0; padding: 10px; color: var(--danger); font-size: 12px; line-height: 1.6; }
.account-menu-chevron { margin-left: auto; width: 14px !important; height: 14px !important; color: var(--muted); }
.account-submenu { position: absolute; right: calc(100% + 8px); top: 96px; width: min(304px, calc(100vw - 32px)); padding: 8px; border-radius: 18px; background: var(--surface); box-shadow: 0 12px 40px #00000026, 0 2px 8px #00000012; animation: account-menu-arrive 160ms ease-out both; }
:root[data-theme='dark'] .account-submenu { box-shadow: 0 12px 40px #00000080, 0 0 0 1px #ffffff0a; }
.account-submenu-heading { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 4px 6px; font-size: 13px; font-weight: 600; }
.account-submenu-back { display: grid; place-items: center; width: 30px; height: 30px; }
.account-submenu-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.account-choice-list { display: grid; gap: 2px; max-height: min(340px, calc(100dvh - 230px)); overflow-y: auto; overscroll-behavior: contain; }
.account-choice { border-radius: 12px; min-height: 62px; }
.account-choice-avatar { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--button-hover); font-size: 12px; font-weight: 500; }
.account-choice-identity { display: grid; gap: 2px; min-width: 0; flex: 1; }
.account-choice-name, .account-choice-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-choice-email { color: var(--muted); font-size: 11px; line-height: 16px; }
.account-choice[aria-checked='true'] { background: var(--button-hover); }
.account-choice svg { width: 16px; height: 16px; color: var(--muted); }
.account-choice.is-switching .account-choice-avatar { font-size: 0; background: transparent; }
.account-choice.is-switching .account-choice-avatar::after, .account-list-status.is-loading::before { content: ''; box-sizing: border-box; width: 16px; height: 16px; flex-shrink: 0; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: account-menu-busy 800ms linear infinite; }
.account-list-status { display: flex; align-items: center; gap: 10px; padding: 12px 10px; margin: 0; color: var(--muted); font-size: 12px; line-height: 20px; }
.account-submenu-footer { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.account-submenu [aria-disabled='true'] { opacity: .5; cursor: default; }
@media (max-width: 640px) {
  .account-menu { position: fixed; top: calc(var(--header-height) + 8px); right: 16px; }
  .account-menu.is-switch-open { width: min(304px, calc(100vw - 32px)); }
  .account-menu.is-switch-open [data-account-primary] { display: none; }
  .account-submenu { position: static; width: 100%; padding: 0; box-shadow: none !important; }
}
@media (prefers-reduced-motion: reduce) { .account-submenu, .account-choice.is-switching .account-choice-avatar::after, .account-list-status.is-loading::before { animation: none; } }
@keyframes account-menu-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes account-menu-busy { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .account-menu { animation: none; } .account-menu-item { transition: none; } .account-menu-item.is-loading::before { animation: none; } }

@media (max-width: 800px) {
  .product-wordmark { font-size: 24px; margin-bottom: 16px; }

  .product-capture { border-radius: 14px; }
}
@media (max-width: 520px) {
  .phone-frame { border-radius: 12px; }
}